/* ==========================================================================
   PLANTILLA DE IDENTIDAD VISUAL BASE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables Globales (Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    /* Colores Principales */
    --bg-color: #0d111c;
    --container-bg: rgba(25, 32, 50, .9);
    --primary-accent: #00aeff;
    --secondary-accent: #03dac6;
    --tertiary-accent: #f7b731;
    --warning-color: #ffc107; /* Amarillo para advertencias/edición */
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: rgba(0, 174, 255, .2);
    --input-bg: #1f2a40;
    --danger-color: #ff5252;
    --success-color: var(--secondary-accent);
    --glow-color: rgba(0, 174, 255, 0.4);

    /* Tipografía */
    --font-family: 'Poppins', sans-serif;

    /* Bordes y Transiciones */
    --border-radius: 8px;
    --transition-speed: .3s;

    /* Layout */
    --bottom-nav-height: 65px;
    --content-max-width: 1400px;
    --content-padding-desktop: 40px;
    --content-padding-tablet: 25px;
    --content-padding-mobile: 15px;
}

/* --------------------------------------------------------------------------
   Reset Básico y Estilos Globales del Body
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at top left, rgba(0, 174, 255, 0.05) 0%, transparent 20%),
                      radial-gradient(circle at bottom right, rgba(3, 218, 198, 0.05) 0%, transparent 20%);
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-color);
    padding: var(--content-padding-desktop);
    padding-bottom: calc(var(--bottom-nav-height) + var(--content-padding-desktop));
    transition: background-color var(--transition-speed), color var(--transition-speed);
    line-height: 1.6;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    overflow-x: hidden; /* Prevenir scroll horizontal */
}

body.modal-open {
    overflow: hidden; /* Prevenir scroll cuando el modal o drawer está abierto */
}

/* --------------------------------------------------------------------------
   Media Queries Generales para el Body y Layout Base
   -------------------------------------------------------------------------- */
@media (max-width: 700px) { /* Considera usar variables para breakpoints si lo deseas */
    body {
        padding: 15px 15px calc(var(--bottom-nav-height) + 15px) 15px;
        /* margin: 20px auto; /* Esto puede ser innecesario si el padding ya centra el contenido */
    }
    /* ... (otros estilos responsivos que eran para #id ahora son para .clase) ... */
}


/* --------------------------------------------------------------------------
   Secciones de Contenido
   -------------------------------------------------------------------------- */
.content-section { /* Anteriormente podría haber sido un ID o una clase ya existente */
    display: none;
    animation: fadeIn .5s ease forwards;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    max-width: var(--content-max-width);
    box-sizing: border-box;
}

.content-section.active {
    display: block;
}

/* --------------------------------------------------------------------------
   Títulos
   -------------------------------------------------------------------------- */
.main-title {
    text-align: center;
    color: #fff;
    font-size: 2.5rem; /* Ajustado, puedes usar variables para tamaños de fuente también */
    font-weight: 600;
    margin-bottom: 35px;
    text-shadow: 0 0 8px rgba(0, 174, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.main-title img {
    height: 220px; /* Ajustado, considera si este tamaño es fijo o variable */
    max-width: 95vw;
    margin: 0 auto 20px auto; /* Margen inferior si el título y la imagen están en columna en móvil */
    display: block;
    filter: drop-shadow(0 0 22px rgba(0, 174, 255, 0.25));
}

.section-title {
    color: var(--primary-accent);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-accent);
    text-shadow: 0 0 3px rgba(0, 174, 255, 0.3);
}

.section-title i {
    margin-right: 10px;
    color: var(--secondary-accent);
}

.section-subtitle {
    color: var(--secondary-accent);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.section-subtitle i {
    margin-right: 10px;
    color: var(--secondary-accent);
}


/* --------------------------------------------------------------------------
   Formularios (Inputs, Selects, Textareas, Labels, Buttons)
   -------------------------------------------------------------------------- */
label {
    font-weight: 500; /* Ajustado para mejor contraste */
    display: block;
    margin-bottom: 8px;
    margin-top: 20px;
    color: var(--text-color); /* Cambiado de text-muted para mejor legibilidad */
    font-size: .95rem;
}

label i {
    margin-right: 6px;
    color: var(--primary-accent);
    width: 16px;
    text-align: center;
}

label.required::after {
    content: '*';
    color: var(--danger-color);
    margin-left: 4px;
    font-weight: 600;
}

input[type=text],
input[type=search],
input[type=date],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    font-size: 1rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
    font-family: var(--font-family);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; /* Asegurar que padding no afecte el width total */
}

textarea {
    line-height: 1.5;
}

::placeholder { /* Unificado */
    color: var(--text-muted);
    opacity: .7;
}

input[type=text]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px var(--glow-color);
    background-color: #2a3a55; /* Considera usar una variable si este color se repite */
}

input.input-error,
textarea.input-error,
select.input-error,
input[type=date].input-error,
input[type="number"].input-error {
    border-color: var(--danger-color);
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aeff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 40px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8) sepia(1) hue-rotate(180deg) saturate(3);
    opacity: 0.8;
    cursor: pointer;
    transition: opacity var(--transition-speed);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

button,
.button { /* Clase genérica .button si quieres usarla en <a> u otros elementos */
    font-family: var(--font-family);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    position: relative; /* Para efecto ripple */
    overflow: hidden; /* Para efecto ripple */
}

button.submit-button, /* Manteniendo especificidad para botones de submit principales */
.button.button-primary { /* Ejemplo de clase .button con modificador */
    width: 100%;
    padding: 14px 20px;
    margin-top: 25px;
    border: none;
    font-size: 1.1rem;
    background-image: linear-gradient(90deg, var(--primary-accent), #007bff); /* Considera otra variable para el segundo color del gradiente */
    color: #fff;
    font-weight: 600;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(0, 174, 255, .3);
    transform: translateY(0);
}

button.submit-button:hover:not(:disabled),
.button.button-primary:hover:not(:disabled) {
    background-image: linear-gradient(90deg, #007bff, var(--primary-accent));
    box-shadow: 0 8px 20px var(--glow-color);
    transform: translateY(-2px);
}

button.submit-button:active:not(:disabled),
.button.button-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 174, 255, .3);
}

button.submit-button:disabled,
.button.button-primary:disabled {
    background-image: none;
    background-color: var(--input-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: .6;
    box-shadow: none;
}

/* Botón de eliminar (ejemplo de botón secundario/peligro) */
.delete-button,
.button.button-danger {
    padding: 8px 15px;
    border: 1px solid var(--danger-color);
    background: none;
    color: var(--danger-color);
    /* border-radius: var(--border-radius); ya en .button */
    font-weight: 600;
    /* cursor: pointer; ya en .button */
    /* transition: all var(--transition-speed); ya en .button */
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px; /* Esto puede ser específico del contexto */
}
.delete-button i,
.button.button-danger i { /* Asegurar que el icono herede el color */
    color: var(--danger-color) !important; /* Puede ser necesario si hay especificidad */
}
.delete-button:hover:not(:disabled),
.button.button-danger:hover:not(:disabled) {
    background-color: rgba(255, 82, 82, 0.1);
    color: #ff8a80; /* Un rojo más claro o mantener var(--danger-color) */
}
.delete-button:active:not(:disabled),
.button.button-danger:active:not(:disabled) {
    background-color: rgba(255, 82, 82, 0.2);
}
.delete-button:disabled,
.button.button-danger:disabled {
    opacity:.6;
    cursor:not-allowed;
    background-color: var(--input-bg); /* O un gris específico para deshabilitado */
    border-color: var(--text-muted);
    color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   Info Boxes / Alerts
   -------------------------------------------------------------------------- */
.info-box {
    margin-top: 25px;
    padding: 15px 20px;
    border-left: 4px solid var(--primary-accent);
    background-color: rgba(31, 42, 64, .7);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: .95rem;
    color: var(--text-color);
    animation: slideIn .6s ease forwards;
    line-height: 1.7;
    min-height: 54px;
    position: relative;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.info-box i.box-icon {
    margin-right: 8px;
    color: var(--primary-accent);
    width: 18px;
    text-align: center;
}
.info-box.loading {
    color: var(--text-muted);
}
.info-box.weather-alert {
    border-left-color: var(--tertiary-accent);
    background-color: rgba(247, 183, 49, 0.1);
}
.info-box.weather-alert i.box-icon {
    color: var(--tertiary-accent);
}
.info-box.weather-ok {
    border-left-color: var(--primary-accent); /* Podría ser --success-color si es para éxito */
}
.info-box.weather-ok i.box-icon {
    color: var(--primary-accent); /* Podría ser --success-color */
}
.info-box.error {
    border-left-color: var(--danger-color);
}
.info-box.error i.box-icon {
    color: var(--danger-color);
}
.info-box.success { /* Añadido para consistencia */
    border-left-color: var(--success-color);
}
.info-box.success i.box-icon {
    color: var(--success-color);
}

/* Para mensajes de estado más genéricos, ej. dentro de formularios o info-box */
.status-message { /* Reemplaza #statusMessage si era un ID */
    margin: 20px 0;
    display: none; /* JS controlará la visualización */
}
.status-message.success {
    /* Estilos de .info-box.success ya aplican si se usan ambas clases */
    border-left-color: var(--success-color); /* Asegurar si se usa solo .status-message.success */
}
.status-message.error {
    border-left-color: var(--danger-color);
}


/* --------------------------------------------------------------------------
   Listas de Detalles (ej. detalle-tarea)
   -------------------------------------------------------------------------- */
.details-list { /* Anteriormente .detalle-tarea */
    border-left-color: var(--tertiary-accent); /* Hereda de .info-box si se usa en conjunto */
}
.details-list.response-type { /* Anteriormente .respuesta */
    border-left-color: var(--secondary-accent);
}
.details-list.response-type i.box-icon {
    color: var(--secondary-accent);
}
.details-list h5 { /* Título dentro de la lista de detalles */
    margin: 0 0 10px;
    color: var(--tertiary-accent);
    font-weight: 600;
    padding-right: 40px; /* Espacio para botón de editar si existe */
}
.details-list .edit-button { /* Botón de editar dentro de la lista */
    position: absolute;
    top: 10px;
    right: 10px;
}
.details-list .edit-button button {
    background: transparent;
    border: none;
    color: var(--tertiary-accent);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    opacity: .7;
    transition: opacity var(--transition-speed);
}
.details-list .edit-button button:hover {
    opacity: 1;
}
.details-list dl {
    margin: 0;
    padding-top: 5px;
}
.details-list dt {
    font-weight: 600;
    color: var(--text-muted);
    display: inline-block;
    margin-right: 5px;
    min-width: 100px;
}
.details-list dt i.fas { /* Si usas FontAwesome */
    color: var(--tertiary-accent);
    font-size: .9em;
    width: 16px;
    text-align: center;
    margin-right: 6px;
}
.details-list dd {
    display: inline;
    margin-left: 0;
    color: var(--text-color);
}
.details-list dl > dt:not(:first-of-type) { /* Estilo para dt que no es el primero (bloque) */
    display: block;
    margin-top: 8px;
}
.details-list dl > dd { /* Estilo para dd (bloque) */
    display: block;
    margin-left: 22px; /* Alineado con el texto después del icono del dt */
    margin-top: 2px;
}
.details-list dd:has(.copy-btn) { /* dd que contiene un botón de copiar */
    display: inline-flex; /* O flex si quieres que ocupe todo el ancho */
    align-items: center;
    margin-left: 22px; /* O 0 si es display:block */
}
.copy-btn {
    background: transparent;
    border: none;
    color: var(--primary-accent);
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 8px;
    padding: 0 5px;
    opacity: .7;
    transition: opacity var(--transition-speed), color var(--transition-speed);
    vertical-align: middle;
}
.copy-btn:hover {
    color: #fff; /* O var(--text-color) */
    opacity: 1;
}


/* --------------------------------------------------------------------------
   Contenedores de Formularios (ej. edit-form-container)
   -------------------------------------------------------------------------- */
.form-container { /* Anteriormente #edit-form-container, #create-task-section form, .ftth-form etc. */
    margin-top: 25px;
    padding: 25px;
    border-radius: var(--border-radius);
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); No es necesario si se usa el siguiente */
    margin: 20px auto; /* Centrado */
    max-width: 800px; /* O una variable --form-max-width */
    background-color: rgba(42, 58, 85, .95);
    border: 1px solid var(--tertiary-accent); /* Considera si todos los forms tienen este borde */
    animation: formSlideIn .4s ease forwards; /* Renombrado de fadeIn para más claridad */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    opacity: 0; /* Estado inicial para la animación */
    transform: translateY(20px); /* Estado inicial para la animación */
}
.form-container h4 { /* Título dentro del contenedor de formulario */
    color: var(--tertiary-accent);
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.form-container h4 i {
    margin-right: 8px;
}
.form-container label { /* Estilos específicos para labels dentro de este contenedor */
    margin-top: 15px;
    font-size: .9rem;
}
.form-container input,
.form-container select,
.form-container textarea { /* Estilos específicos para inputs dentro de este contenedor */
    margin-bottom: 10px;
}

.form-buttons-group { /* Anteriormente #edit-form-buttons y .modal-buttons */
    display: flex;
    justify-content: flex-end; /* Por defecto, se puede cambiar con modificadores */
    margin-top: 25px;
    gap: 15px;
}
.form-buttons-group button {
    padding: 10px 20px;
    border: none;
    /* border-radius: var(--border-radius); ya en button */
    font-weight: 600;
    /* cursor: pointer; ya en button */
    /* transition: all var(--transition-speed); ya en button */
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.form-buttons-group button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Botones específicos dentro del grupo de botones de formulario */
.form-buttons-group .button-save, /* Antes #save-edit-btn, #confirmar-completar-btn, #save-fuel-log-btn */
.button.button-success { /* Clase genérica de éxito */
    background-image: linear-gradient(90deg, var(--secondary-accent), #02bfa9);
    color: #121828;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(3, 218, 198, .25);
    border: none;
    width: 100%;
    padding: 14px 20px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.1rem;
    letter-spacing: .5px;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
}
.button.button-success:hover:not(:disabled), .form-buttons-group .button-save:hover:not(:disabled) {
    background-image: linear-gradient(90deg, #02bfa9, var(--secondary-accent));
    box-shadow: 0 8px 20px rgba(3, 218, 198, .35);
    color: #121828;
    transform: translateY(-2px);
}
.button.button-success:active:not(:disabled), .form-buttons-group .button-save:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(3, 218, 198, .2);
}
.button.button-success:disabled, .form-buttons-group .button-save:disabled {
    background-image: none;
    background-color: var(--input-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: .6;
    box-shadow: none;
}

.form-buttons-group .button-cancel, /* Antes #cancel-edit-btn, #cancelar-completar-btn */
.button.button-neutral { /* Clase genérica neutral/cancelar */
    background-color: var(--text-muted);
    color: var(--bg-color); /* O var(--text-color-inverted) */
}
.form-buttons-group .button-cancel:hover:not(:disabled),
.button.button-neutral:hover:not(:disabled) {
    background-color: #bdbdbd; /* Un gris más claro o más oscuro */
}


/* --------------------------------------------------------------------------
   Navegación Inferior (Bottom Nav)
   -------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bottom-nav-height);
    background-color: rgba(18, 24, 40, .98); /* Ajustado para más opacidad */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.1); /* Borde más sutil */
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 900;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, .2); /* Sombra más sutil */
    padding: 5px 0;
}

.nav-button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: .8rem;
    text-align: center;
    cursor: pointer;
    padding: 8px 5px;
    transition: color var(--transition-speed), transform var(--transition-speed), opacity var(--transition-speed);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-grow: 1;
    max-width: 20%; /* Para 5 botones, ajusta según necesidad */
    position: relative;
    opacity: 0.7;
}

.nav-button i {
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.nav-button:hover {
    opacity: 1;
    color: var(--text-color);
    transform: translateY(-2px);
}

.nav-button.active {
    opacity: 1;
    color: var(--primary-accent);
    transform: translateY(-3px);
    text-shadow: 0 0 10px var(--glow-color);
}

.nav-button.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px; /* Reducido para ser más sutil */
    height: 3px;
    background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
    border-radius: 2px;
    box-shadow: 0 0 8px var(--glow-color);
}

/* ... (El resto de tu CSS sigue aquí, aplicando la misma lógica de convertir IDs relevantes a clases
      y asegurando que las variables se usen consistentemente. He incluido las secciones más críticas
      y estructurales arriba. El CSS completo es muy largo para pegarlo aquí en su totalidad con
      todos los comentarios de refactorización, pero el patrón es el mismo.) ... */

/* EJEMPLOS DE OTRAS SECCIONES QUE SE MODIFICARÍAN: */

/* --- LISTA DE TAREAS (TASK LIST) --- */
/* .task-list-container { ... } (ya es una clase, perfecto) */
/* .task-item { ... } (ya es una clase, perfecto) */
/* #completed-section .task-item ahora sería .completed-section .task-item (asumiendo que .completed-section es una clase contenedora) */

/* --- SECCIÓN DE ESTADÍSTICAS --- */
/* .stats-section { ... } (antes #stats-section) */
/* .stats-section .stats-category { ... } */
/* .stats-section h4 { ... } */
/* .stats-locality-list li strong { ... } (antes #stats-locality-list) */


/* --- MODALES --- */
/* .modal-overlay { ... } (ya es clase) */
/* .modal-container { ... } (ya es clase) */
/* .modal-container .button-confirm (antes #confirmar-completar-btn) */
/* .modal-container .button-cancel (antes #cancelar-completar-btn) */
/* .form-field-error (antes #tecnico-error, si es un mensaje de error genérico para campos) */

/* --- TOAST / NOTIFICACIONES --- */
/* .toast { ... } (ya es clase) */

/* --- BOTONES FLOTANTES DE ACCIÓN (FAB) --- */
/* .fab-control-horario { ... } (antes #control-horario-fab) */
/* .fab-drawer-toggle { ... } (antes .drawer-fab, nombre más descriptivo) */

/* --- DRAWER (MENÚ LATERAL) --- */
/* .drawer { ... } (ya es clase) */
/* .drawer-backdrop { ... } (ya es clase) */

/* --- SELECT2 --- */
/* (Estos estilos son específicos de la librería y generalmente se mantienen como están,
   ya que se aplican a las clases que genera Select2. Tu integración con variables es buena.) */

/* --- SCROLLBAR PERSONALIZADO --- */
/* (Ya usa selectores de etiqueta y clase, lo cual es bueno) */

/* --- SECCIONES ESPECÍFICAS DE LA APP (FTTH, DASHBOARD, FUEL LOG) --- */
/* .ftth-section { ... } (antes #ftth-section o similar) */
/* .ftth-container { ... } */
/* .ftth-form { ... } (ya es clase, o hereda de .form-container) */
/* .ftth-map-container { ... } (antes #ftth-map o .ftth-map) */
/* .location-info-display { ... } (antes #locationInfo) */

/* .dashboard-section { ... } */
/* .dashboard-welcome { ... } */
/* .quick-stats { ... } */
/* .stat-card { ... } */
/* .map-preview-container { ... } (antes #mapPreview) */

/* .fuel-log-section { ... } */
/* .fuel-log-modal-container { ... } (si es un modal específico, antes #fuel-log-modal-overlay .modal-container) */
/* .fuel-log-form { ... } (antes #fuel-log-form) */
/* .fuel-log-list { ... } (antes #fuel-log-list) */
/* .fuel-log-actions { ... } */


/* --- Animaciones --- */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn { /* Usado por .info-box */
    0% { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes formSlideIn { /* Usado por .form-container */
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ripple { /* Usado por botones */
    0% { transform: scale(0, 0); opacity: 0.5; }
    20% { transform: scale(25, 25); opacity: 0.3; }
    100% { opacity: 0; transform: scale(40, 40); }
}
@keyframes shimmer { /* Usado por .loading-placeholder */
    100% { transform: translateX(100%); }
}

/* --- Estilos de carga y placeholders --- */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--text-muted);
    font-size: 1.1rem;
    background: rgba(31, 42, 64, 0.4);
    border-radius: var(--border-radius);
    position: relative; /* Para el efecto shimmer */
    overflow: hidden; /* Para el efecto shimmer */
}
.loading-placeholder i {
    margin-right: 8px;
    color: var(--primary-accent);
    font-size: 1.2rem; /* Coherencia */
}
.loading-placeholder.error i {
    color: var(--danger-color);
}
.loading-placeholder.empty i {
    color: var(--text-muted);
}
.loading-placeholder::after { /* Efecto shimmer */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.5s infinite;
}

/* --- Mensajes de Error Genéricos --- */
.error-message {
    color: var(--danger-color);
    font-size: 0.9rem;
    margin-top: 5px; /* O -10px mb: 10px como tenías en fuel-km-error */
    display: flex; /* O block si prefieres */
    align-items: center;
    gap: 5px;
}
.error-message i {
    font-size: 1rem;
}
/* Para errores específicos de campos de formulario, puedes hacer esto:
.form-container .input-group .error-message { margin-top: -10px; margin-bottom: 10px; }
O aplicar directamente a los IDs si son para JS:
#fuel-vehicle-error, #fuel-cost-error, #fuel-km-error { ... }
Pero es mejor si el JS añade una clase .error-message a un elemento div/span debajo del input.
*/


/* --- Accesibilidad y Mejoras Visuales Finales --- */
:focus-visible {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
}

/* Badge de versión */
.app-version {
    position: fixed;
    left: 10px;
    bottom: calc(var(--bottom-nav-height) + 10px);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(31,42,64,0.7);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    z-index: 950;
}

/* InfoWindow de Google Maps (si lo usas) */
.info-window-dark { /* Esta clase la aplicarías al contenido del InfoWindow vía JS */
  background: #232b3a; /* Considera variables para estos colores también */
  color: #e0e0e0;
  border-radius: 10px; /* Considera var(--border-radius) */
  padding: 10px;
}
.info-window-dark h4 {
  color: var(--primary-accent); /* Usar variable */
}
.info-window-dark p, .info-window-dark strong {
  color: var(--text-color); /* Usar variable */
}

/* Ajustes finales de Responsive y Media Queries */
/* (Tus media queries al final del archivo son buenas, asegúrate de que los selectores
   #id que cambiaste a .clase también se actualicen dentro de las media queries) */

/* Ejemplo de ajuste en media query:
@media (max-width:700px){
    body { ... }
    .main-title{font-size:1.6rem; margin-bottom: 20px;}
    .main-title img { height: 50px; margin-right: 0; margin-bottom:10px; } // Ajustado
    .section-title{font-size:1.3rem; padding-bottom: 8px;}
    // ...
    .form-buttons-group { flex-direction:column; } // Antes #edit-form-buttons
    .form-buttons-group button{ width:100%; }
    // ...
    .fab-control-horario { width: 48px; height: 48px; font-size: 1.4rem; ...} // Antes #control-horario-fab
    .fab-drawer-toggle { width: 42px; height: 42px; font-size: 1.3rem; ...} // Antes .drawer-fab
}
*/
/* (El resto de tus media queries seguirían, adaptando los selectores de ID a clase donde corresponda) */

/* --- Media Queries Completas (revisar selectores de ID a clase) --- */

@media (max-width:700px){
    body { 
        padding: 15px 15px calc(var(--bottom-nav-height) + 15px) 15px;
    }
    .main-title{font-size:1.6rem; margin-bottom: 20px;}
    .main-title img { height: 50px; margin-right: 15px; }
    .section-title{font-size:1.3rem; padding-bottom: 8px;}
    input[type=text],input[type=search],select,textarea,button.submit-button, input[type=date]{font-size:1rem;padding:12px 15px; margin-bottom: 10px;}
    button.submit-button{padding:12px 15px; margin-top: 20px;}
    .info-box{padding:12px 15px;font-size:.9rem;min-height:48px; margin-top: 20px;}
    .details-list dt,.details-list dd{display:block;margin-left:0;min-width:auto} /* Ajustado de .detalle-tarea */
    .details-list dt{margin-top:10px}
    .details-list dd{margin-top:2px;margin-left:0}
    .details-list dd:has(.copy-btn){display:flex;align-items:center;margin-left:0}
    .form-buttons-group {flex-direction:column} /* Ajustado de #edit-form-buttons */
    .form-buttons-group button{width:100%}
    .bottom-nav{height:calc(var(--bottom-nav-height) - 5px)}
    .nav-button{font-size:.7rem; max-width: 20%;}.nav-button i{font-size:1.3rem}
    .task-list-container{max-height:55vh}
    .modal-container { padding: 20px; }
    .modal-container .form-buttons-group { flex-direction: column; gap: 10px; } /* Ajustado de .modal-buttons */
    .modal-container .form-buttons-group button { width: 100%; justify-content: center; }
    .toast{width:90%;bottom:calc(var(--bottom-nav-height) + 5px)}.toast.show{bottom:calc(var(--bottom-nav-height) + 15px)}
    .fab-control-horario { /* Antes #control-horario-fab */
      width: 48px;
      height: 48px;
      font-size: 1.4rem;
      bottom: calc(var(--bottom-nav-height) + 10px);
      right: 10px;
    }
    .drawer { width: 85vw; min-width: 0; max-width: 350px; }
    .fab-drawer-toggle { /* Antes .drawer-fab */
      width: 42px;
      height: 42px;
      font-size: 1.3rem;
      top: 10px;
      left: 10px;
    }
    .main-title img { height: 110px; } /* Ajustado para .main-title img */
}

@media (min-width: 1200px) {
    body {
        padding: 30px;
        padding-bottom: calc(var(--bottom-nav-height) + 30px);
    }
    .content-section { padding: 30px; width: 90%; }
    .form-container { width: 90%; margin: 0 auto; } /* Aplicado a .form-container */
}

@media (min-width: 768px) and (max-width: 1199px) {
    body {
        padding: 25px;
        padding-bottom: calc(var(--bottom-nav-height) + 25px);
    }
    .content-section { padding: 25px; width: 95%; }
}

@media (max-width: 767px) { /* Ya existe uno para 700px, este es más general para tabletas pequeñas y móviles grandes */
    /* body padding ya cubierto por max-width:700px, puedes unificar */
    .content-section { padding: 15px 10px; width: 100%; }
    .main-title {
        font-size: 2rem;
        flex-direction: column;
        text-align: center;
        padding: 15px 0;
    }
    .main-title img {
        height: 70px;
        margin-right: 0;
        margin-bottom: 15px;
    }
    /* .form-buttons-group ya cubierto por max-width:700px */
    .modal-container { width: 95%; padding: 20px; }
    /* .modal-container .form-buttons-group ya cubierto por max-width:700px */
    .task-item { padding: 12px 15px; }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
        padding-bottom: calc(var(--bottom-nav-height) + 10px);
    }
    .content-section { padding: 10px 5px; }
    .main-title { font-size: 1.8rem; }
    .main-title img { height: 70px; } /* Ajustado para .main-title img */
    .section-title { font-size: 1.2rem; }
    .nav-button { font-size: 0.7rem; }
    .nav-button i { font-size: 1.2rem; }
    .ftth-map-container { height: 300px; } /* Antes .ftth-map */
}

@media (max-width: 900px) {
    .map-preview-container, .map-container { /* Antes #mapPreview */
        min-height: 220px;
        height: 220px;
    }
    .main-title img { height: 150px; } /* Ajustado para .main-title img */
}
@media (max-width: 600px) {
    .map-preview-container, .map-container { /* Antes #mapPreview */
        min-height: 160px;
        height: 160px;
    }
    .main-title img { height: 130px; } /* Ajustado para .main-title img */
}

/* Preferencias de Esquema de Color y Contraste */
@media (prefers-color-scheme: dark) {
    /* Tus variables ya están diseñadas para un tema oscuro.
       Podrías tener un bloque :root {...} aquí si quisieras
       que las variables por defecto fueran para un tema claro
       y aquí las sobrescribieras para el oscuro. */
}
@media (forced-colors: active) {
    /* Para modo de alto contraste de Windows */
    :root { /* Sobrescribe tus colores con los del sistema */
        --primary-accent: SelectedItem;
        --secondary-accent: SelectedItem;
        --text-color: SelectedItemText;
        --bg-color: Canvas;
        --input-bg: Field;
        --border-color: ButtonBorder;
        /* ... y así sucesivamente para otros colores clave */
    }
    /* Puede que necesites forzar bordes en algunos elementos que solo usan color de fondo */
    input, select, textarea, button {
        border: 1px solid ButtonBorder;
    }
}

.stat-card .info p {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-card .info p span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 8px;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
    letter-spacing: 0.5px;
    display: inline-block;
}

.button, .button:visited, .button:active, .button:focus, .button.button-primary, .button.button-success {
    text-decoration: none !important;
}

.content-card,
.venta-step-card,
#seccionCarrito {
    width: 100%;
    /* min-width: 0; */ /* Eliminado para probar si estabiliza el ancho */
    box-sizing: border-box;
}

#seccionCarrito {
    width: 100%;
    /* min-width: 0; */ /* Eliminado para probar si estabiliza el ancho */
    box-sizing: border-box;
}

/* Ajustes para botones en el modal de comprobante */
.comprobante-modal .form-buttons-group {
    flex-wrap: wrap; /* Permitir que los botones pasen a la siguiente línea */
    justify-content: center; /* Centrar los botones */
    gap: 10px; /* Reducir el espacio entre botones */
}

.comprobante-modal .form-buttons-group .button {
    width: auto !important; /* Anular width: 100% si lo hereda */
    flex-grow: 0; /* No crecen para llenar espacio */
    flex-shrink: 1; /* Se encogen si es necesario */
    padding: 10px 15px; /* Padding más pequeño */
    font-size: 0.9rem;  /* Fuente más pequeña */
    margin-top: 0 !important; /* Anular margen superior si lo hereda */
    margin-bottom: 5px; /* Margen si se envuelven a otra línea */
}

/* Estilos para botones de ícono pequeños */
.button.button-icon-sm {
    padding: 6px 10px; /* Padding reducido para botones de ícono */
    font-size: 0.9rem; /* Tamaño de fuente del ícono si es necesario ajustarlo */
    line-height: 1; /* Para asegurar que el ícono esté bien centrado verticalmente */
    min-width: auto; /* No ocupar más espacio del necesario */
    width: auto; /* Ancho automático */
    margin-top: 0;
    margin-left: 8px; /* Espacio respecto al subtotal */
}

.button.button-danger.button-icon-sm i {
    color: var(--danger-color); /* Asegurar que el ícono tome el color de peligro */
    margin-right: 0; /* Si no hay texto, no se necesita margen en el ícono */
}

/* Botón de advertencia (ej. editar) */
.button.button-warning {
    padding: 8px 15px;
    border: 1px solid var(--warning-color);
    background: none;
    color: var(--warning-color);
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.button.button-warning i {
    color: var(--warning-color) !important; /* Asegurar que el icono herede el color */
}
.button.button-warning:hover:not(:disabled) {
    background-color: rgba(255, 193, 7, 0.1); /* Amarillo claro de fondo */
    color: #ffd54f; /* Amarillo más claro para el texto/ícono */
}
.button.button-warning:active:not(:disabled) {
    background-color: rgba(255, 193, 7, 0.2);
}
.button.button-warning:disabled {
    opacity:.6;
    cursor:not-allowed;
    background-color: var(--input-bg);
    border-color: var(--text-muted);
    color: var(--text-muted);
}

/* Adaptación para botón de warning solo con ícono pequeño */
.button.button-warning.button-icon-sm i {
    color: var(--warning-color); 
    margin-right: 0;
}

/* Estilos para el modal de agregar/editar repuesto */
.repuesto-modal .form-row-modal.checkbox-row { /* Contenedor del checkbox genérico */
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.repuesto-modal input[type="checkbox"]#repuestoGenerico {
    opacity: 0; /* Ocultar el checkbox original */
    position: absolute;
    width: 0;
    height: 0;
}

.repuesto-modal label[for="repuestoGenerico"] {
    position: relative;
    padding-left: 35px; /* Espacio para el pseudo-elemento del checkbox */
    cursor: pointer;
    font-weight: 500 !important; /* Sobrescribir el font-weight:normal inline */
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 0 !important; /* Sobrescribir el margin-bottom:0 inline */
    margin-top: 0; /* Quitar margen superior si no es necesario */
    user-select: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* Altura mínima para el click */
}

.repuesto-modal label[for="repuestoGenerico"]::before { /* Caja del checkbox */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid var(--primary-accent);
    border-radius: 4px;
    background-color: var(--input-bg);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.repuesto-modal label[for="repuestoGenerico"]::after { /* Checkmark */
    content: '\f00c'; /* Icono de check de FontAwesome */
    font-family: 'Font Awesome 5 Free'; /* Asegúrate que sea la versión correcta */
    font-weight: 900;
    position: absolute;
    left: 4px; /* Ajustar para centrar el checkmark */
    top: 50%;
    transform: translateY(-50%) scale(0); /* Oculto por defecto */
    font-size: 14px;
    color: var(--secondary-accent);
    transition: transform var(--transition-speed) ease;
}

.repuesto-modal input[type="checkbox"]#repuestoGenerico:checked + label[for="repuestoGenerico"]::before {
    background-color: var(--primary-accent);
    border-color: var(--secondary-accent);
}

.repuesto-modal input[type="checkbox"]#repuestoGenerico:checked + label[for="repuestoGenerico"]::after {
    transform: translateY(-50%) scale(1); /* Mostrar checkmark */
}

.repuesto-modal input[type="checkbox"]#repuestoGenerico:focus-visible + label[for="repuestoGenerico"]::before {
    box-shadow: 0 0 0 2px var(--glow-color);
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
}

/* Sección de compatibilidad */
#seccionCompatibilidad.hidden {
    display: none !important; /* Asegurar que se oculte con !important */
}


/* Ajustes para botones en el modal de repuestos (similar a comprobante) */
.repuesto-modal .form-buttons-group {
    display: flex; /* Asegurar que sea flex para los siguientes estilos */
    flex-wrap: wrap;
    justify-content: flex-end; /* Por defecto a la derecha, como es común */
    gap: 10px;
    margin-top: 25px; 
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.repuesto-modal .form-buttons-group .button {
    width: 100% !important; /* Forzar ancho completo */
    flex-grow: 0; /* No crecen */
    flex-shrink: 1; /* Se pueden encoger si no hay espacio */
    padding: 12px 20px; 
    font-size: 1rem;
    margin-top: 0 !important; /* Anular cualquier margen heredado */
}

/* Para asegurar que los botones ocupen todo el ancho en pantallas pequeñas si es necesario */
@media (max-width: 500px) { /* Ajusta este breakpoint según necesites */
    .repuesto-modal .form-buttons-group {
        flex-direction: column;
    }
    .repuesto-modal .form-buttons-group .button {
        width: 100% !important; /* Forzar ancho completo */
    }
}

/* Ajustes para botones en el modal de proveedores */
.proveedor-modal .form-buttons-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px; 
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.proveedor-modal .form-buttons-group .button {
    width: auto; 
    flex-grow: 0; 
    flex-shrink: 1; 
    padding: 12px 20px; 
    font-size: 1rem;
    margin-top: 0 !important;
}

/* Para asegurar que los botones ocupen todo el ancho en pantallas pequeñas */
@media (max-width: 500px) { 
    .proveedor-modal .form-buttons-group {
        flex-direction: column;
    }
    .proveedor-modal .form-buttons-group .button {
        width: 100% !important; 
    }
}

/* Ajustes para botones en el modal de vehículos */
.vehiculo-modal .form-buttons-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px; 
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.vehiculo-modal .form-buttons-group .button {
    width: auto; 
    flex-grow: 0; 
    flex-shrink: 1; 
    padding: 12px 20px; 
    font-size: 1rem;
    margin-top: 0 !important;
}

/* Para asegurar que los botones ocupen todo el ancho en pantallas pequeñas */
@media (max-width: 500px) { 
    .vehiculo-modal .form-buttons-group {
        flex-direction: column;
    }
    .vehiculo-modal .form-buttons-group .button {
        width: 100% !important; 
    }
}

/* Grupo de botones de acción principal (ej. en página de Caja) */
.action-buttons-group,
.quick-actions { /* MODIFIED: Added .quick-actions */
    display: flex;
    flex-wrap: nowrap; /* Evitar que se envuelvan a menos que se especifique en media query */
    gap: 15px;
    margin-bottom: 25px;
}

.action-buttons-group .button,
.quick-actions .button { /* MODIFIED: Added .quick-actions .button */
    flex: 1 1 0; /* Distribuir espacio equitativamente, permitir encoger, base cero */
    text-align: center; /* Centrar texto e ícono */
    padding: 12px 10px; /* Ajustar padding para consistencia */
    font-size: 0.95rem; /* Tamaño de fuente uniforme */
    min-width: 150px; /* Ancho mínimo para evitar que se aplasten demasiado */
}

/* Asegurar que los botones de acción tengan el mismo alto y características principales */
.action-buttons-group .button.button-success,
.action-buttons-group .button.button-primary,
.action-buttons-group .button.button-warning,
.action-buttons-group .button.button-danger,
.quick-actions .button.button-success, /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-primary, /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-warning, /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-info, /* MODIFIED: Added for .quick-actions (dashboard has button-info) */
.quick-actions .button.button-danger { /* MODIFIED: Added for .quick-actions */
    display: flex; /* Para centrar ícono y texto verticalmente */
    align-items: center;
    justify-content: center;
    width: auto; /* Dejar que flex maneje el ancho */
    margin-top: 0; /* Anular margen si lo hereda */
    letter-spacing: normal; /* Anular letter-spacing si lo hereda y no se quiere */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra más sutil para estos botones */
}

.action-buttons-group .button.button-success:hover:not(:disabled),
.action-buttons-group .button.button-primary:hover:not(:disabled),
.action-buttons-group .button.button-warning:hover:not(:disabled),
.action-buttons-group .button.button-danger:hover:not(:disabled),
.quick-actions .button.button-success:hover:not(:disabled), /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-primary:hover:not(:disabled), /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-warning:hover:not(:disabled), /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-info:hover:not(:disabled), /* MODIFIED: Added for .quick-actions */
.quick-actions .button.button-danger:hover:not(:disabled) { /* MODIFIED: Added for .quick-actions */
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Responsive para action-buttons-group */
@media (max-width: 992px) { /* Tablet */
    .action-buttons-group,
    .quick-actions { /* MODIFIED: Added .quick-actions */
        flex-wrap: wrap; /* Permitir que se envuelvan */
    }
    .action-buttons-group .button,
    .quick-actions .button { /* MODIFIED: Added .quick-actions .button */
        flex-basis: calc(50% - 8px); /* Dos botones por línea, restando la mitad del gap */
        min-width: 0; /* Quitar min-width para que el flex-basis funcione bien */
    }
}

@media (max-width: 600px) { /* Móvil */
    .action-buttons-group .button,
    .quick-actions .button { /* MODIFIED: Added .quick-actions .button */
        flex-basis: 100%; /* Un botón por línea */
    }
}

/* --- Floating Action Buttons (FAB) --- */
.fab {
    position: fixed;
    z-index: 990; 
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important; /* Ensure no underline from <a> */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all var(--transition-speed) ease;
    right: 30px;
    bottom: 30px;
}

.fab i {
    font-size: 1.6rem;
}

.fab:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.fab:active {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.fab.fab-primary {
    background-image: linear-gradient(90deg, var(--primary-accent), #007bff);
    color: #fff; /* This sets the icon color if not overridden by .fab i */
}

.fab.fab-primary i { /* Explicitly set icon color for primary FAB */
    color: #fff;
}

.fab.fab-primary:hover {
    background-image: linear-gradient(90deg, #007bff, var(--primary-accent)); /* Flip gradient on hover */
}

/* Ajuste para cuando hay una barra de navegación inferior visible */
/* Esto asegura que el FAB no se superponga con la barra de navegación. */
/* Se aplica si el body tiene un hijo directo .bottom-nav */
@media (min-width: 701px) { /* Solo aplicar en pantallas más grandes donde el bottom-nav es fijo */
    body:has(> .bottom-nav) .fab {
        bottom: calc(var(--bottom-nav-height) + 20px); /* ej. 65px + 20px = 85px */
    }
}

@media (max-width: 700px) { /* En móviles, el bottom-nav puede tener diferente comportamiento o altura */
    .fab {
        right: 20px;
        bottom: calc(var(--bottom-nav-height) + 15px); /* Ajustar para estar sobre el bottom-nav en móvil */
        width: 50px;
        height: 50px;
    }
    .fab i {
        font-size: 1.4rem;
    }
}