/* css/style.css */

/* --- REFACTORIZACIÓN: Tema Oscuro como Único Tema por Defecto --- */
:root {
    /* --- CORRECCIÓN: La variable ahora contiene el degradado del fondo --- */
    --bg-color: linear-gradient(to bottom, #242526, #18191a);
    /* --- MEJORA VISUAL: La variable de las tarjetas ahora también es un degradado --- */
    --card-bg-color: linear-gradient(to bottom, #2d2e2f, #242526);
    --form-bg-color: #2d2e2f;
    --text-color: #e4e6eb;
    --text-color-strong: #ffffff;
    --text-secondary-color: #b0b3b8;
    --title-color: #e4e6eb;
    --table-text-color: #e4e6eb;
    --span-text-color: #b0b3b8;
    --suggestion-text-color: #e4e6eb;
    --border-color: #525456;
    --divider-color: #444;
    --navbar-text-color: #e4e6eb;
    --navbar-bg-color: linear-gradient(to bottom, #1f2933, #171f27); /* Degradado sutil para la barra de navegación. */
    --navbar-dropdown-hover-bg-color: #1c2a38;
    --navbar-hover-bg-color: #0f171e;
    --success-highlight-bg-color: rgba(40, 167, 69, 0.2);
    --success-highlight-border-color: #218838;
    --danger-highlight-bg-color: rgba(231, 76, 60, 0.2);
    --special-accent-color: #9b59b6;
    --readonly-bg-color: #3a3b3c;
    --modal-dropdown-bg-color: #1a1e21; /* Nuevo color para modales y menús desplegables */
    --readonly-text-color: #e4e6eb;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --highlight-bg-color: #173851;
    --admin-submenu-hover-bg-color: #3a3b3c;
}

/*
 * CORRECCIÓN DE USABILIDAD MÓVIL: Prevenir Zoom Automático en iOS.
 * Al establecer un tamaño de fuente de 16px o más en los campos de formulario,
 * los navegadores móviles (especialmente Safari en iOS) no hacen zoom automático
 * al enfocar un campo, mejorando la experiencia de usuario.
 */
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="number"],
 input[type="date"],
 select,
 textarea {
     font-size: 16px !important; /* !important para asegurar que sobreescriba cualquier otra regla */
     /* --- ESTILOS DE MODO OSCURO UNIFICADOS --- */
     background-color: var(--form-bg-color); /* Fondo de input oscuro */
     color: var(--text-color); /* Texto de input claro */
     border: 1px solid var(--border-color); /* Borde oscuro */
     border-radius: 6px; /* Bordes redondeados para consistencia */
     /* --- ESTILO UNIFICADO DE TAMAÑO --- */
     padding: 12px; /* Aumentamos el padding para hacerlos más grandes */
     width: 100%; /* Hacemos que ocupen todo el ancho de su contenedor */
     box-sizing: border-box; /* Aseguramos que el padding no afecte el ancho total */
 }
 


/* --- CORRECCIÓN DE ESTILO: Asegurar que los formularios dentro de un modal no se desborden --- */
/* Hacemos que todos los formularios en modales usen una sola columna, como en la versión móvil. */
.modal .operation-form {
    grid-template-columns: 1fr;
}


body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* --- CORRECCIÓN: Usar la propiedad 'background' para aplicar el degradado desde la variable --- */
    background: var(--bg-color);
    margin: 0;
    color: var(--text-color);
    background-attachment: fixed; /* CORRECCIÓN: Fija el fondo para que no se repita al hacer scroll. */
}
/* Indicador visual de que las tarjetas de saldo son clicables para refrescar */
#initial-balance-card,
#remaining-balance-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#initial-balance-card:hover,
#remaining-balance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.04);
}

#initial-balance-card:active,
#remaining-balance-card:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}


/* --- CORRECCIÓN DE FOOTER: Asegurar que el body ocupe toda la altura --- */
html, body {
    height: 100%; /* Asegura que ambos ocupen toda la altura de la ventana */
    margin: 0;
    display: flex;
    flex-direction: column;
}


/* --- NUEVO: Estilos de Modo Oscuro por Defecto para el Login --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    /* --- CORRECCIÓN: Se añade la imagen de fondo SVG --- */
    /* Asumimos que la imagen está en una carpeta 'img' en la raíz del proyecto. */
    /* Se añade un gradiente oscuro semitransparente sobre la imagen para oscurecerla. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('../img/fondo.svg');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor. */
    background-position: center; /* Centra la imagen. */
    background-repeat: no-repeat; /* Evita que la imagen se repita. */
    /* --- CORRECCIÓN: Se fija la imagen de fondo al viewport. --- */
    background-attachment: fixed; /* Evita que la imagen se corte al aparecer el teclado en móvil. */
    background-color: #18191a; /* Se mantiene un color oscuro como fallback. */
}

.login-card {
    background: var(--card-bg-color); /* CORRECCIÓN: Usar la propiedad 'background' para aplicar el degradado. */
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Sombra oscura */
    position: relative; /* Necesario para la animación de reflejo */
    overflow: hidden;   /* Oculta el reflejo fuera de la tarjeta */
    text-align: center;
}

/* --- NUEVO: Estilo para el logo en la tarjeta de login --- */
.login-logo {
    width: 235px; /* Tamaño del logo */
    height: auto;
    margin-bottom: 1rem; /* Espacio debajo del logo */
}



#login-view {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    

}

h2 {
    margin-top: 0;
    color: var(--text-color-strong);
}
/* Sobreescribimos el color de los títulos y párrafos solo para el login */
.login-card h2, .login-card p {
    color: #e4e6eb; /* Texto claro */
}


.input-group {
    margin-bottom: 1rem;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--text-secondary-color); /* Usamos la variable para el color de la etiqueta */
}

/* Estilos para los inputs del login */
#login-view input[type="email"], 
#login-view input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #3a3b3c; /* Borde oscuro */
    border-radius: 6px;
    box-sizing: border-box;
    background-color: #2d2e2f; /* Fondo de input oscuro */
    color: #e4e6eb; /* Texto de input claro */
}

button {
    width: 100%;
    padding: 12px;
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    /* NUEVO: Añadimos una transición para una animación suave */
    transition: all 0.2s ease-in-out;
}

button:hover {
    background-color: #166fe5;
    /* NUEVO: Efecto de elevación y sombra al pasar el cursor */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.error-message {
    color: #d93025;
    font-size: 0.9rem;
    margin-top: 10px;
    text-align: center;
}

#forgot-password-link {
    display: block;
    margin-top: 15px;
    color: #1877f2;
    text-decoration: none;
    font-size: 0.9rem;
}

/* Estilos para la vista de la app */
#app-view {
    display: none; /* Oculto por defecto */
    width: 100%;
    background-color: var(--bg-color);
    display: flex;
    flex-grow: 1; /* Hace que la vista de la app ocupe el espacio restante en el body */
    flex-direction: column;
}

/* --- CORRECCIÓN DE FOOTER: Aplicar flexbox al contenedor de auditoría --- */
.audit-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Asegura que ocupe el espacio disponible */
    width: 100%;
    box-sizing: border-box;
}


.main-content {
    flex-grow: 1; /* Ocupa el espacio restante */
    overflow-y: auto; /* Permite el scroll vertical */
    width: 100%;
    box-sizing: border-box;
}

/* --- CORRECCIÓN: Estilos unificados y mejorados para el footer --- */
.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    
    padding: 2rem;
    font-size: 1rem;
    background-color: var(--navbar-dropdown-hover-bg-color);
    color: var(--navbar-text-color);
}

.footer-copyright {
    margin: 0;
    
    flex-grow: 1;
}

.footer-support-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary-color);
    text-decoration: none;
    /* CORRECCIÓN: Aumentamos el padding y el tamaño de la fuente para hacerlo más grande */
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 1.1rem;
    font-weight: bold;
}

.footer-support-link:hover {
    background-color: #25D366; /* Verde WhatsApp */
    color: white;
}

.footer-support-link .whatsapp-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; /* CORRECCIÓN: Evita que el icono se repita */
    mask-repeat: no-repeat; /* CORRECCIÓN: Evita que el icono se repita */
    background-color: var(--text-secondary-color);
    /* CORRECCIÓN: Aumentamos el tamaño del icono */
    width: 20px;
    height: 20px;
}

.footer-support-link:hover .whatsapp-icon {
    background-color: white;
}

/* --- REFACTORIZACIÓN: Estilos de Barra de Scroll Unificados y Modernizados --- */
/* Se aplica a la barra principal, a los modales y a las listas de sugerencias */
::-webkit-scrollbar {
    width: 8px; /* Hacemos la barra más delgada */
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #18191a; /* CORRECCIÓN: Fondo oscuro para la pista del scroll */
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color); /* Color del "mango" de la barra */
    border-radius: 20px;
    /* Se elimina el borde para un look más limpio y minimalista */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary-color); /* Color al pasar el cursor sobre la barra */
}
/* --- FIN DE ESTILOS DE SCROLL --- */

.top-navbar {
    min-width: 320px;
    width: auto;
    max-width: 100vw;
    /* --- MEJORA VISUAL: Añadir un degradado al fondo --- */
    /* CORRECCIÓN: Se utiliza la propiedad 'background' para aplicar el degradado desde la variable. */
    background: var(--navbar-bg-color);
    color: var(--navbar-text-color);
    /* --- CORRECCIÓN: Añadir padding vertical para más espacio --- */
    /* Se añade un pequeño padding arriba y abajo para que no se vea tan apretado. */
    padding: 1.2rem 2.5rem;
    box-shadow: 0 2px 4px var(--shadow-color);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* --- CORRECCIÓN: Hacer que la barra de navegación se quede fija arriba --- */
    position: sticky; /* Hace que la barra se "pegue" al hacer scroll. */
    top: 0;           /* Se pega en la parte superior de la pantalla. */
    z-index: 100;     /* Asegura que esté por encima de otros elementos. */
}

.hamburger {
    display: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.hamburger:hover {
    /* Anula el hover general de los botones para que no tenga ningún efecto */
    background-color: transparent; 
    transform: none;
    box-shadow: none;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: var(--navbar-text-color);
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem 0;
}

/* --- NUEVO: Estilo para el logo en la barra de navegación --- */
.navbar-logo {
    height: 40px; /* Altura del logo en la barra */
    width: auto; /* El ancho se ajusta automáticamente */
    margin: 0.5rem 0 0; /* Margen superior para dar espacio, sin margen inferior. */
}

.navbar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reducimos el espacio entre la hamburguesa y el logo */
    /* CORRECCIÓN: Eliminamos el justify-content para que el logo se pegue a la hamburguesa. */
    justify-content: flex-start;
    min-width: 0; /* Evita que el flexbox se desborde */
}

.cerrador-selector-container {
    /* CORRECCIÓN: Se elimina el flex-grow para que no ocupe espacio extra. */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Aumentamos un poco el espacio */
    margin-left: 2rem;
    position: relative; /* Necesario para el icono del selector */
}

.cerrador-selector-container label {
    font-size: 0.9rem;
    /* Hacemos la etiqueta un poco menos prominente que el valor seleccionado */
    color: rgba(255, 255, 255, 0.7);
}

.cerrador-selector-container select {
    /* --- REFACTORIZACIÓN DE ESTILO --- */
    appearance: none; /* Eliminamos el estilo por defecto del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* --- ESTILO UNIFICADO (ESCRITORIO Y MÓVIL) --- */
    background-color: var(--form-bg-color); /* Fondo sutil para destacarlo */
    color: var(--text-color); /* Color de texto principal */
   
    border-radius: 6px; /* Bordes redondeados */
    /* Padding unificado */
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease; /* Transición para todos los efectos */
    /* Icono de flecha personalizado como fondo */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e4e6eb'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 1.2em;
}

/* --- CORRECCIÓN DE ESTILO PARA MÓVIL --- */
/* Cuando el selector está dentro del menú hamburguesa, necesita colores que contrasten
   con el fondo del menú, que es más claro que la barra de navegación. */
.navbar-links .cerrador-selector-container label {
    color: var(--text-secondary-color); /* Un gris más claro para la etiqueta */
}

.navbar-links .cerrador-selector-container select {
    /* En móvil, solo necesitamos que ocupe el ancho completo. */
    width: 100%; /* Hacemos que ocupe el ancho disponible */
}





.navbar-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 0 2rem;
    display: flex;
}

.navbar-menu li a {
    display: flex; /* Usamos flex para alinear icono y texto */
    align-items: center; /* Centramos verticalmente */
    gap: 0.6rem; /* Espacio entre el icono y el texto */
    padding: 1.2rem 1rem;
    color: var(--navbar-text-color);
    text-decoration: none;
    /* CORRECCIÓN: Se añade una transición suave para el fondo, margen y padding. */
    transition: background-color 0.2s ease-out, margin 0.2s ease-out, padding 0.2s ease-out;
    font-size: 0.9rem;
}

.navbar-menu > li > a:hover, .navbar-menu > li.active > a {
    /* CORRECCIÓN: Se añade un margen y un radio para que el fondo se "despegue" del texto. */
    background-color: var(--navbar-hover-bg-color);
    border-radius: 6px; /* Suaviza las esquinas del fondo */
    margin: 0 0.5rem; /* Añade un pequeño espacio a los lados */
    /* Ajustamos el padding para compensar el margen y mantener el espaciado vertical */
    padding: 1.2rem 0.5rem; 
}

/* --- NUEVO: Estilos para los iconos del menú de navegación --- */
.nav-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--navbar-text-color); /* El color del icono será el del texto */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0; /* Evita que el icono se encoja */
}

/* Iconos específicos usando la técnica de máscara SVG */
.icon-dashboard {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z' fill='%23000000'/%3E%3C/svg%3E");
}
.icon-register {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns'%3E%3Ctitle%3Eplus%3C/title%3E%3Cdesc%3ECreated with Sketch Beta.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' sketch:type='MSPage'%3E%3Cg id='Icon-Set-Filled' sketch:type='MSLayerGroup' transform='translate(-362.000000, -1037.000000)' fill='%23000000'%3E%3Cpath d='M390,1049 L382,1049 L382,1041 C382,1038.79 380.209,1037 378,1037 C375.791,1037 374,1038.79 374,1041 L374,1049 L366,1049 C363.791,1049 362,1050.79 362,1053 C362,1055.21 363.791,1057 366,1057 L374,1057 L374,1065 C374,1067.21 375.791,1069 378,1069 C380.209,1069 382,1067.21 382,1065 L382,1057 L390,1057 C392.209,1057 394,1055.21 394,1053 C394,1050.79 392.209,1049 390,1049' id='plus' sketch:type='MSShapeGroup'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns'%3E%3Ctitle%3Eplus%3C/title%3E%3Cdesc%3ECreated with Sketch Beta.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' sketch:type='MSPage'%3E%3Cg id='Icon-Set-Filled' sketch:type='MSLayerGroup' transform='translate(-362.000000, -1037.000000)' fill='%23000000'%3E%3Cpath d='M390,1049 L382,1049 L382,1041 C382,1038.79 380.209,1037 378,1037 C375.791,1037 374,1038.79 374,1041 L374,1049 L366,1049 C363.791,1049 362,1050.79 362,1053 C362,1055.21 363.791,1057 366,1057 L374,1057 L374,1065 C374,1067.21 375.791,1069 378,1069 C380.209,1069 382,1067.21 382,1065 L382,1057 L390,1057 C392.209,1057 394,1055.21 394,1053 C394,1050.79 392.209,1049 390,1049' id='plus' sketch:type='MSShapeGroup'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.icon-pending {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
}
.icon-deliveries {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.21606 15L6.10495 16H8.11726L8.22837 15H10.003C12.2105 15 14 13.2105 14 11.003C14 9.12963 12.6989 7.5076 10.8701 7.1012L9.14852 6.71864L9.45059 4H13V1H9.78393L9.89504 0H7.88273L7.77162 1H5.99699C3.78951 1 2 2.78951 2 4.99699C2 6.87037 3.30115 8.4924 5.12992 8.8988L6.85147 9.28136L6.54939 12H3V15H6.21606ZM8.5617 12H10.003C10.5536 12 11 11.5536 11 11.003C11 10.5357 10.6754 10.1311 10.2193 10.0298L8.81528 9.71776L8.5617 12ZM7.1847 6.28223L7.43828 4H5.99699C5.44637 4 5 4.44637 5 4.99699C5 5.46427 5.32455 5.86887 5.78071 5.97023L7.1847 6.28223Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.21606 15L6.10495 16H8.11726L8.22837 15H10.003C12.2105 15 14 13.2105 14 11.003C14 9.12963 12.6989 7.5076 10.8701 7.1012L9.14852 6.71864L9.45059 4H13V1H9.78393L9.89504 0H7.88273L7.77162 1H5.99699C3.78951 1 2 2.78951 2 4.99699C2 6.87037 3.30115 8.4924 5.12992 8.8988L6.85147 9.28136L6.54939 12H3V15H6.21606ZM8.5617 12H10.003C10.5536 12 11 11.5536 11 11.003C11 10.5357 10.6754 10.1311 10.2193 10.0298L8.81528 9.71776L8.5617 12ZM7.1847 6.28223L7.43828 4H5.99699C5.44637 4 5 4.44637 5 4.99699C5 5.46427 5.32455 5.86887 5.78071 5.97023L7.1847 6.28223Z' fill='%23000000'/%3E%3C/svg%3E");
}
.icon-history {
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 64 64' enable-background='new 0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23000000' d='M60,0H4C1.789,0,0,1.789,0,4v56c0,2.211,1.789,4,4,4h56c2.211,0,4-1.789,4-4V4C64,1.789,62.211,0,60,0z M56,32H44c-2.211,0-4,1.789-4,4v4H24v-4c0-2.211-1.789-4-4-4H8V8h48V32z'/%3E%3Cpath fill='%23000000' d='M20,24h24c2.211,0,4-1.789,4-4s-1.789-4-4-4H20c-2.211,0-4,1.789-4,4S17.789,24,20,24z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 64 64' enable-background='new 0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23000000' d='M60,0H4C1.789,0,0,1.789,0,4v56c0,2.211,1.789,4,4,4h56c2.211,0,4-1.789,4-4V4C64,1.789,62.211,0,60,0z M56,32H44c-2.211,0-4,1.789-4,4v4H24v-4c0-2.211-1.789-4-4-4H8V8h48V32z'/%3E%3Cpath fill='%23000000' d='M20,24h24c2.211,0,4-1.789,4-4s-1.789-4-4-4H20c-2.211,0-4,1.789-4,4S17.789,24,20,24z'/%3E%3C/g%3E%3C/svg%3E");
}
.icon-admin, .icon-cerradores {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9.9 15.7-19.4 15.7H181.8c-9.5 0-17.4-6.5-19.4-15.7l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L48.2 414.3c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C17.6 241.1 17 232.8 17 224s.6-17.1 1.7-25.4L15.4 159.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9.9-15.7 19.4-15.7h64.4c9.5 0 17.4 6.5 19.4 15.7l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9.9 15.7-19.4 15.7H181.8c-9.5 0-17.4-6.5-19.4-15.7l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L48.2 414.3c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C17.6 241.1 17 232.8 17 224s.6-17.1 1.7-25.4L15.4 159.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9.9-15.7 19.4-15.7h64.4c9.5 0 17.4 6.5 19.4 15.7l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E");
}
.icon-users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM320 336a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM320 336a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
}
.icon-clients {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM48 128V384c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16zM576 96c0-35.3-28.7-64-64-64H416c-8.8 0-16 7.2-16 16s7.2 16 16 16H512c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H416c-8.8 0-16 7.2-16 16s7.2 16 16 16H512c35.3 0 64-28.7 64-64V96zM112 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm88-24c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40s-17.9 40-40 40H240c-22.1 0-40-17.9-40-40zm0 88c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40s-17.9 40-40 40H240c-22.1 0-40-17.9-40-40z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM48 128V384c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16zM576 96c0-35.3-28.7-64-64-64H416c-8.8 0-16 7.2-16 16s7.2 16 16 16H512c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H416c-8.8 0-16 7.2-16 16s7.2 16 16 16H512c35.3 0 64-28.7 64-64V96zM112 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm88-24c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40s-17.9 40-40 40H240c-22.1 0-40-17.9-40-40zm0 88c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40s-17.9 40-40 40H240c-22.1 0-40-17.9-40-40z'/%3E%3C/svg%3E");
}
.icon-gains {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z'/%3E%3C/svg%3E");
}
.icon-backup {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64v96h64V64H352v96h64V64c0-35.3-28.7-64-64-64H128zM19.2 223.4c10.4-16.2 28.7-26.6 48.2-27.8V160H128v32c0 17.7-14.3 32-32 32H80c-8.8 0-16-7.2-16-16c0-4.4 1.8-8.4 4.7-11.3L19.2 223.4zM492.8 223.4L443.3 196.7c2.9 2.9 4.7 6.9 4.7 11.3c0 8.8-7.2 16-16 16H416c-17.7 0-32-14.3-32-32V160h64v35.6c19.5 1.2 37.8 11.6 48.2 27.8zM0 288c0-10.6 3.5-20.5 9.6-28.6L160 128l150.4 131.4c10.4 16.2 28.7 26.6 48.2 27.8V256h48v32c0 53-43 96-96 96H96c-53 0-96-43-96-96z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64v96h64V64H352v96h64V64c0-35.3-28.7-64-64-64H128zM19.2 223.4c10.4-16.2 28.7-26.6 48.2-27.8V160H128v32c0 17.7-14.3 32-32 32H80c-8.8 0-16-7.2-16-16c0-4.4 1.8-8.4 4.7-11.3L19.2 223.4zM492.8 223.4L443.3 196.7c2.9 2.9 4.7 6.9 4.7 11.3c0 8.8-7.2 16-16 16H416c-17.7 0-32-14.3-32-32V160h64v35.6c19.5 1.2 37.8 11.6 48.2 27.8zM0 288c0-10.6 3.5-20.5 9.6-28.6L160 128l150.4 131.4c10.4 16.2 28.7 26.6 48.2 27.8V256h48v32c0 53-43 96-96 96H96c-53 0-96-43-96-96z'/%3E%3C/svg%3E");
}

.navbar-links {
    /* --- CORRECCIÓN: Alinear elementos en la barra de navegación --- */
    display: flex; /* Convierte el contenedor en un layout flexible. */
    align-items: center; /* Centra verticalmente todos los elementos hijos. */
    width: 100%; /* Asegura que ocupe todo el ancho disponible. */
}

.notification-badge {
    background-color: #e74c3c; /* Rojo */
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2;
    min-width: 10px;
    text-align: center;
    transition: transform 0.2s ease-in-out;
}

.navbar-user {
    /* --- CORRECCIÓN: Alinear a la derecha en escritorio --- */
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-user #user-email-display {
    font-size: 0.9rem;
    /* margin-right: 1rem; */ /* Se mueve al badge */
}

.role-badge {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 10px;
    margin-left: 0.5rem;
    margin-right: 1rem;
    text-transform: uppercase;
    color: white;
}

/* NUEVO: Contenedor para el interruptor de modo oscuro */
.dark-mode-toggle {
    display: flex;
    align-items: center;
}

.role-badge.admin {
    background-color: #2980b9; /* Azul para admin */
}

.role-badge.operador {
    background-color: #7f8c8d; /* Gris para operador */
}

/* --- NUEVO: Estilos para la Barra de Búsqueda Global --- */
.global-search-container {
    position: relative;
    margin-right: 1rem;
}

#global-search-input {
    background-color: var(--navbar-hover-bg-color);
    color: var(--navbar-text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    width: 250px;
    transition: width 0.3s ease;
}

#global-search-input::placeholder {
    color: var(--text-secondary-color);
    opacity: 0.8;
}


.panel {
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}

.panel h1 {
    font-size: 2.2rem;
    color: var(--title-color);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.panel p {
    text-align: center;
    color: var(--text-secondary-color);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#app-view h2 {
    color: var(--text-color-strong);
}

/* Estilos para el formulario de operaciones */
.operation-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    background-color: var(--form-bg-color);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin: 1rem auto; /* Centra el formulario y añade un margen vertical */
    
    
}

.form-row {
    grid-column: 1 / -1; /* Hacemos que ocupe todo el ancho del grid padre */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-section-title {
    grid-column: 1 / -1;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--title-color);
    border-bottom: 2px solid var(--divider-color);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.operation-form .input-group {
    margin-bottom: 0;
}

/* Estilo para resaltar un campo importante */
.input-group.highlight {
    background-color: var(--highlight-bg-color);
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
}

/* Estilo para resaltar un campo de costo/peligro */

.input-group.highlight-danger label, .input-group.highlight-danger input {
    color: #e74c3c; /* Rojo */
}

/* Estilo para resaltar un campo de ganancia/éxito */
/* --- MEJORA VISUAL: Resaltar más el campo de Tasa Cliente --- */
.input-group.highlight-success {
    background-color: var(--success-highlight-bg-color);
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid var(--success-highlight-border-color);
    /* Se añade un resplandor para que destaque más */
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
    transition: box-shadow 0.3s ease;
}

.input-group.highlight-success:focus-within {
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.8);
}

/* --- MEJORA VISUAL: Hacer que la etiqueta de "Tasa Cliente" resalte más --- */
.input-group.highlight-success label {
    font-weight: bold; /* Texto en negrita */
    color: var(--text-color-strong); /* Color de texto más brillante para mayor contraste */
}

/* --- CORRECCIÓN VISUAL: Forzar el tamaño del input de fecha en iOS --- */
/* Safari en iOS a veces le da un tamaño intrínseco al input de fecha que ignora el 'width: 100%'.
 * Estas propiedades le indican al navegador que el ancho del input debe ser flexible y
 * ajustarse al espacio disponible en su contenedor (el .input-group), solucionando el desbordamiento. */
input[type="date"] {
    flex: 1;
    min-width: 0;
}

.operation-form textarea {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
    box-sizing: border-box;
}

/* --- MEJORA VISUAL: Resaltar más el campo de Monto USD --- */
.input-group-usd {
    background-color: var(--highlight-bg-color);
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid #2980b9;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}
.input-group-usd:focus-within {
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.8);
}

.operation-form button {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
}

.success-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #28a745;
    font-weight: bold;
    margin: 10px 0 0 0;
    padding: 10px;
    background-color: var(--success-highlight-bg-color);
    border-radius: 6px;
}

.divider {
    height: 1px;
    background-color: var(--divider-color);
    margin: 3rem auto;
    width: 100%;
}

.navbar-user #logout-button {
    background-color: #e74c3c; /* Mantenemos el color rojo distintivo */
    font-size: 1rem; /* Aumentado para mayor legibilidad */
    padding: 10px 20px; /* Aumentado para un área de clic más grande */
    margin-top: 0;
    width: auto; /* Ancho automático */
    font-weight: bold; /* Texto en negrita para más impacto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil para darle profundidad */
    /* Transición más completa para un efecto suave en hover */
    transition: all 0.2s ease-in-out;
}

.navbar-user #logout-button:hover {
    background-color: #c0392b; /* Un rojo más oscuro */
    transform: translateY(-2px); /* Efecto de elevación al pasar el cursor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada en hover */
}







/* --- ESTILOS RESPONSIVOS --- */
@media (max-width: 768px) { /* Ajustado para aplicar solo en móviles y tablets pequeñas */
    .top-navbar {
        flex-wrap: wrap; /* Permite que los elementos se pongan debajo */
        /* CORRECCIÓN: El justify-content ya no es necesario aquí. */
        /* CORRECCIÓN: Se reduce el padding vertical para hacer la barra más delgada. */
        padding: 0.5rem 1rem;
        /* --- CORRECCIÓN: Eliminar el comportamiento fijo en móvil --- */
        position: static; /* Anula el 'sticky' de la versión de escritorio */
    }

    .navbar-header {
        width: 100%; /* Hacemos que la cabecera ocupe todo el ancho */
        justify-content: space-between; /* Distribuimos el espacio */
    }
    .navbar-brand {
        /* En móvil, el logo ya no necesita padding porque la imagen tiene su propio tamaño. */
        padding: 0;
        margin-right: 25px; /* Añadimos un margen para compensar el ancho del botón hamburguesa y centrar el logo */
    }

    .navbar-header > .hamburger {
        display: block;
    }

    .navbar-links {
        width: 100%;
        flex-direction: column;
        padding-bottom: 1rem; /* Añadimos un padding inferior para crear espacio al final del menú */
        align-items: stretch; /* Estiramos los elementos para que ocupen todo el ancho */
        /* CORRECCIÓN: Se mantiene el overflow hidden para que la animación de apertura sea limpia. */
        overflow: hidden; 
        max-height: 0; /* Lo colapsa por defecto */
        /* CORRECCIÓN: Se anima tanto la altura como la visibilidad del overflow. */
        transition: max-height 0.3s ease-out, overflow 0s 0.3s;
    }

    .navbar-links.active {
        /* CORRECCIÓN: El overflow se vuelve visible solo cuando la animación de altura ha terminado, */
        /* permitiendo que los submenús (como el de admin) se puedan desplegar sin ser cortados. */
        overflow: visible;
        transition: max-height 0.3s ease-out, overflow 0s;
    }

    /* --- CORRECCIÓN DE ANIMACIÓN: Ocultar contenido por defecto --- */
    /* Por defecto, los elementos dentro del menú están invisibles. */
    .navbar-links > * {
        opacity: 0;
        transition: opacity 0.2s ease-out;
    }

    /* --- CORRECCIÓN DE ANIMACIÓN: Mostrar contenido cuando el menú está activo --- */
    /* Cuando el menú se activa, los elementos hijos directos se hacen visibles con un pequeño retraso. */
    .navbar-links.active > * {
        opacity: 1;
        transition-delay: 0.15s; /* Este retraso asegura que la animación de altura comience primero. */
    }

    .navbar-menu {
        flex-direction: column;
        width: 100%;
        margin: 1rem 0 0 0;
    }

    /*
     * CORRECCIÓN DE APILAMIENTO (Z-INDEX):
     * Le damos al menú principal una posición relativa y un z-index para que
     * su submenú siempre se muestre por encima de los otros elementos del menú hamburguesa.
    */
    .navbar-menu { position: relative; z-index: 10; }


  

    .navbar-user {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
        margin-right: 0; /* Aseguramos que no haya margen a la derecha */
        margin-top: 1rem;
        padding: 0.5rem;
    }

    .cerrador-selector-container {
        /* CORRECCIÓN: Ocultamos el selector en su posición de escritorio en vista móvil.
           JavaScript se encargará de moverlo dentro del menú hamburguesa. */
        display: none;
    }
    /* Estilos para cuando el selector está DENTRO del menú hamburguesa */
    .navbar-links .cerrador-selector-container {
        display: flex; /* Lo hacemos visible de nuevo */
        justify-content: center; /* Centramos el contenido (label y select) */
        /* CORRECCIÓN: Añadimos separación y un borde para un mejor diseño en móvil. */
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
        width: 100%; /* Aseguramos que ocupe todo el ancho */
        box-sizing: border-box; /* Para que el padding no afecte el ancho */
        margin-left: 0; /* CORRECCIÓN: Anulamos el margen izquierdo de la vista de escritorio */
    }

    /* Hacemos el texto de la tabla más pequeño en móviles */
    th, td {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* Transformamos la tabla en tarjetas */
    table {
        border: 0;
    }
    table thead {
        display: none; /* Ocultamos los encabezados originales */
    }
    table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    table td {
        display: flex;
        justify-content: space-between;
        text-align: right;
        padding: 10px;
        border-bottom: 1px solid var(--divider-color);
    }
    table td::before {
        content: attr(data-label); /* Usamos el atributo data-label como etiqueta */
        float: left;
        font-weight: bold;
        text-align: left;
    }
    table td:last-child {
        border-bottom: 0;
    }

    /* Asegura que TODOS los contenedores de tarjetas se apilen en móvil */
    .stat-cards-container,
    .balance-display-container,
    .history-overall-summary,
    .history-summary-container {
        grid-template-columns: 1fr;
    }

    /* --- NUEVO: Ajuste para el formulario de operaciones en móvil --- */
    /* Eliminamos el centrado para que ocupe el ancho completo del panel */
    .operation-form {
        margin-left: 0;
        margin-right: 0;
    }

}

/* --- ESTILOS DE TABLA COMO TARJETAS (SIEMPRE ACTIVOS) --- */
table {
    border: 0;
}
table thead {
    display: none; /* Ocultamos los encabezados originales */
}
table tr {
    display: block;
    /* margin-bottom: 1.5rem; */ /* MOVIMOS este margen a .details-row para unir las tarjetas */
    margin-bottom: 2.5rem; /* Espaciado por defecto para todas las filas de tabla */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg-color); /* Fondo de la tarjeta */
    border-bottom-width: 0; /* Quitamos el borde inferior para que se una con la fila de detalles */
    position: relative; /* Necesario para la animación de reflejo */
    overflow: hidden;   /* Oculta el reflejo fuera de la tarjeta */
    box-shadow: 0 2px 4px var(--shadow-color);
    /* Transición para el efecto de hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
table td {
    display: flex;
    justify-content: space-between;
    text-align: right;
    padding: 10px;
    border-bottom: 1px solid var(--divider-color);
}
table td::before {
    content: attr(data-label); /* Usamos el atributo data-label como etiqueta */
    float: left;
    font-weight: bold;
    text-align: left;
}

/* Anulamos el margen para las filas de operaciones para que la principal y la de detalles se vean unidas */
tr.main-op-row {
    margin-bottom: 0;
}


/* --- NUEVA IMPLEMENTACIÓN: Estilos para la fila de detalles expandible --- */

/* La fila de detalles está colapsada por defecto y tiene una transición suave. */
.details-row {
    max-height: 0;
    overflow: hidden; /* Oculta el contenido que se desborda */
    transition: max-height 0.4s ease-in-out; /* Animación más suave y consistente */
    /* Importante: display: block para que la animación de altura funcione con la vista de tarjeta. */
    display: block; 
    /* Heredamos el borde inferior de la fila principal para una apariencia cohesiva */
    border: 1px solid var(--border-color);
    border-top: none; /* Quitamos el borde superior para que se una visualmente a la fila principal */
    border-bottom-width: 1px;
    
    border-radius: 0 0 8px 8px; /* Solo redondeamos las esquinas de abajo */
}

/* Cuando la fila se expande, le damos una altura máxima para que se muestre. */
.details-row.is-expanded {
    max-height: 500px; /* Un valor alto para asegurar que todo el contenido quepa. */
    
}

.operations-table .details-row {
    /* AÑADIMOS LA SEPARACIÓN A LA FILA DE DETALLES */
    /* Esto crea un espacio debajo de cada grupo de tarjeta (principal + detalles) */
    margin-bottom: 2.5rem;
}



/* La celda interior contiene el padding, que se animará junto con la altura de la fila. */
.details-cell {
    display: block !important; /* Forzamos el display block */
    padding: 1.5rem !important;
    background-color: var(--highlight-bg-color);
    border-top: 2px solid var(--navbar-hover-bg-color);
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.details-content div {
    /* CORRECCIÓN: Usamos flexbox para alinear la etiqueta y el valor en la misma línea. */
    display: flex;
    justify-content: flex-end; /* CORRECCIÓN: Alinea todo el contenido a la derecha. */
    align-items: baseline; /* Alinea el texto por la base para un mejor aspecto. */
    gap: 0.5rem; /* Añade un pequeño espacio entre la etiqueta y el valor. */
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 0.5rem;
}

/* Estilos para el icono de flecha del botón */
.toggle-details-btn .arrow-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.toggle-details-btn.is-expanded .arrow-icon {
    transform: rotate(90deg);
}

/* Estilos para la tabla de operaciones */
.table-container {
    overflow-x: auto;
}

table {
    width:100%;
    /* CORRECCIÓN: Aumentamos el ancho máximo para acomodar dos columnas en escritorio */
    max-width: 1400px; 
    border-collapse: collapse; 
    margin: 2rem auto; /* Centra la tabla horizontalmente */
    /* Se eliminan estilos de fondo y sombra que ahora están en las filas (tr) */
}

/* --- NUEVO: Layout de dos columnas para las tablas en escritorio --- */
@media (min-width: 1025px) { /* Se aplica solo en pantallas grandes */
    table tbody {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dos columnas */
        gap: 1.5rem; /* Espacio entre las tarjetas */
        grid-template-columns: 1fr 1fr;
        /* ELIMINAMOS EL GAP que causaba la separación incorrecta */
        gap: 0 1.5rem; /* 0 de gap vertical, 1.5rem de gap horizontal */
        grid-template-columns: 1fr; /* Una columna por defecto */
    }
}
/* Cuando una fila de detalles se expande, debe ocupar ambas columnas */
.details-row.is-expanded {
    grid-column: 1 / -1;
   
}



th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--divider-color);
}

th {
    background-color: var(--form-bg-color);
    font-weight: bold;
}



tbody tr td:last-child {
    border-bottom: 0;
}


table:not(.operations-table) {
    margin-bottom: 1.5rem;
}


/* Estilos para el Modal */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    /* --- CORRECCIÓN DE ANIMACIÓN --- */
    /* Se establece el estado inicial como invisible y se prepara para la transición. */
    opacity: 0;
    transition: opacity 0.3s ease-out;
}


.modal-content {
    background-color: var(--modal-dropdown-bg-color);
    margin: auto;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    width: 95%;
    max-width: 800px; /* Ancho máximo por defecto para la mayoría de los modales */
    border-radius: 8px;
    position: relative;
    /*display flex*/
   /* flex-direction: column;*/
    /* --- CORRECCIÓN DE ANIMACIÓN --- */
    /* Se establece el estado inicial y se prepara para la transición de escala y opacidad. */
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}

/* --- NUEVO: Contenedor para el contenido que puede crecer y necesita scroll --- */
.modal-scrollable-content {
    overflow-y: auto; /* El scroll ahora está en este contenedor */
    /* CORRECCIÓN: La altura máxima se aplica aquí para que el modal se adapte al contenido. */
    max-height: 65vh; /* Reducimos un poco para dar más espacio al efecto de fade */
    padding: 0 1.5rem; /* Espaciado interno para que el scroll no pegue al borde */
    margin: 0 -1.5rem; /* Truco para que el padding no afecte el ancho */
    /* --- NUEVO: Efecto de desvanecimiento en los bordes para indicar scroll --- */
    -webkit-mask-image: linear-gradient(transparent, black 20px, black calc(100% - 20px), transparent);
    mask-image: linear-gradient(transparent, black 20px, black calc(100% - 20px), transparent);
}


/* Cuando el modal está activo, se vuelve visible y el contenido se escala a su tamaño normal. */
.modal.active {
    opacity: 1;
}
.modal.active .modal-content {
    transform: scale(1);
}

.close-button {
    color: white;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background-color: #e74c3c; /* Rojo */
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    grid-column: 1 / -1;
}

.modal-actions button {
    width: 100%;
    margin-top: 0;
}

.modal-actions .approve {
    /* --- MEJORA VISUAL: Botón de aprobar más llamativo --- */
    background-image: linear-gradient(45deg, #2ecc71, #28a745); /* Degradado de verdes */
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.modal-actions .approve:hover {
    filter: brightness(1.1); /* Aumenta el brillo al pasar el cursor */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-actions .reject {
    background-color: #dc3545; /* Rojo */
}
.modal-actions .reject:hover {
    background-color: #c82333;
}

/* Estilos específicos para el modal de Deuda con Cerrador */
#cerrador-debt-modal .modal-content {
    max-width: 720px;
    padding: 1rem 1.25rem;
}

#cerrador-debt-modal .modal-scrollable-content {
    padding: 0.5rem 1rem;
    max-height: 62vh;
}

#cerrador-debt-modal .modal-scrollable-content input#cerrador-debt-name-input {
    background-color: var(--form-bg-color);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-sizing: border-box;
}

/* Alineación: hacer que el botón de 'Calcular Deuda' quede a la par del input */
#cerrador-debt-modal .modal-scrollable-content input#cerrador-debt-name-input {
    height: 44px; /* altura fija para coincidir con el botón */
}

#cerrador-debt-modal .modal-scrollable-content .secondary-button {
    margin: 0 0 0 8px; /* quitar el margin grande por defecto y dejar pequeño gap */
    padding: 10px 14px; /* tamaño más compacto para emparejar con el input */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px; /* igual que el input para alineación perfecta */
    border-radius: 6px;
    vertical-align: middle;
}

#cerrador-debt-modal .modal-scrollable-content > p {
    margin-top: 0.9rem; /* más separación encima del texto de ayuda */
    margin-bottom: 1rem; /* más separación debajo */
    color: var(--text-secondary-color);
    font-size: 1rem;
    line-height: 1.45; /* mayor interlineado para legibilidad */
}

#cerrador-debt-modal #cerrador-debt-modal-summary {
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    color: #0a3d62;
    font-size: 1.05rem;
}

/* Resaltar más el texto de summary en el modal de deuda */
#cerrador-debt-modal #cerrador-debt-modal-summary {
    font-size: 1.15rem; /* tamaño ligeramente aumentado */
    font-weight: 700; /* peso notable */
    color: var(--text-color); /* usar color de texto principal */
    background: transparent; /* sin fondo, texto plano */
    padding: 0; /* mantener como línea de texto */
    margin-top: 0.8rem; /* separar del texto anterior */
    margin-bottom: 1rem; /* separar del breakdown */
    line-height: 1.4; /* mejor lectura si el texto ocupa 2 líneas */
}

/* Clase para resaltar solo el monto de deuda dentro del summary */
#cerrador-debt-modal #cerrador-debt-modal-summary .cerrador-debt-total {
    color: #e74c3c; /* Rojo distintivo para deuda */
    font-weight: 800;
}

/* Mejor distribución de cada item del breakdown */
#cerrador-debt-modal .previous-balance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--divider-color);
}

#cerrador-debt-modal .previous-balance-item .left {
    flex: 1 1 60%;
    color: var(--text-color-strong);
}

#cerrador-debt-modal .previous-balance-item .right {
    flex: 0 0 40%;
    text-align: right;
    color: var(--text-secondary-color);
}

/* Botones principales dentro del modal */
#cerrador-debt-modal .modal-actions {
    padding: 0.5rem 0;
}

/* Espaciado para el título del modal */
#cerrador-debt-modal .modal-content > h2 {
    margin-top: 0;
    margin-bottom: 0.9rem; /* aumentar separación entre título y contenido */
}

/* Entregar = primary (azul), Cerrar = tertiary (naranja) */
#cerrador-debt-modal #cerrador-debt-modal-deliver-btn {
    background-image: linear-gradient(45deg, #3498db, #2980b9);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
}

#cerrador-debt-modal #cerrador-debt-modal-close-btn {
    background-image: linear-gradient(45deg, #f39c12, #e67e22);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
}

/* Responsive: apilar botones en pantallas pequeñas */
@media (max-width: 520px) {
    #cerrador-debt-modal .modal-actions { flex-direction: column; }
    #cerrador-debt-modal .modal-actions button { width: 100%; }
    #cerrador-debt-modal .previous-balance-item { flex-direction: column; align-items: flex-start; gap: 6px; }
    #cerrador-debt-modal .previous-balance-item .right { text-align: left; }
}

/* Mensaje de ayuda en el modal - más grande y resaltado en rojo */
#cerrador-debt-modal .cerrador-debt-help {
    font-size: 1.1rem; /* un poco más grande */
    color: #e74c3c; /* rojo */
    font-weight: 700;
    background: rgba(231,76,60,0.06); /* fondo rojo muy suave */
    padding: 8px 10px;
    border-left: 4px solid #e74c3c;
    border-radius: 4px;
    margin: 0 0 10px 0;
}

/* Animación del contenido del modal */
@keyframes scaleUp {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}


/* Animación de pulsación al hacer clic */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.clicked {
    animation: pulse 0.3s ease-out;
}

.approve-main-button {
    width: 100%;
    margin-top: 1rem;
    background-color: #28a745;
}

.approve-main-button:hover {
    background-color: #218838;
}

.cerrador-name-highlight {
    background-color: #243254; 
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

.client-name-highlight {
    /* Se elimina el background-color para que herede el de la tarjeta */
    color: var(--text-color);
    font-style: italic; /* Estilo itálico, como el de fecha */
}

.cerrador-name-highlight-modal {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--special-accent-color) !important;
}

.made-by-highlight {
    font-weight: bold;
    color: #2980b9; /* Un azul distintivo */
    
}

.usd-amount-highlight {
    font-weight: bold;
    color: #16a085; /* Verde azulado */
    text-transform: uppercase;
}

.profit-highlight {
    background-color: var(--success-highlight-bg-color);
    color: #6ec995;
    font-weight: bold;
}

/* Estilo para resaltar el campo de monto USD */
.input-group-usd label, .input-group-usd input {
    color: #28a745; /* Verde */
    font-weight: bold;
}

/* Línea separadora azul para las secciones de saldo */
.balance-separator {
    width: 100%;
    height: 2px;
    background-color: #186090; /* Azul */
    margin: 1.5rem 0;
}

.total-bs-highlight {
    background-color: #f39c12; /* Naranja */
    color: white;
    font-weight: bold;
}

.date-highlight {
    background-color: #18191a; /* CORRECCIÓN: Usar un color sólido */
    color: var(--text-secondary-color);
    font-style: italic;
}

.initial-balance-highlight {
    font-weight: bold;
    color: var(--title-color);
}

/* --- Estilos para los botones de acción en la tabla --- */
.table-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end; /* Alinea los botones a la derecha en la tarjeta */
}

.table-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 0.8rem;
    margin-top: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold; /* Fuente más gruesa */
}

.reset-balance-btn {
    background-color: #f39c12; /* Naranja */
}

.reset-balance-btn:hover {
    background-color: #e67e22;
}

.delete-cerrador-btn {
    background-color: #e74c3c; /* Rojo */
}
.delete-cerrador-btn:hover {
    background-color: #c0392b;
}

/* --- Estilos para el Toggle Switch --- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--modal-dropdown-bg-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    grid-column: 1 / -1; /* Ocupa todo el ancho */
}

/* Hacemos que el contenedor del toggle en la tabla no tenga estilos especiales */
td .toggle-switch-container {
    padding: 0;
    border: none;
    background: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { display:none; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #28a745; /* Verde */
}

input:focus + .slider {
  box-shadow: 0 0 1px #28a745;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Estilos para el Dashboard */
.stat-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-card {
    background: var(--card-bg-color); /* CORRECCIÓN: Usar la propiedad 'background' para aplicar el degradado. */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    text-align: center;
    /* --- SOLUCIÓN CLS: Reservar espacio para evitar saltos de contenido --- */
    position: relative; /* Necesario para la animación de reflejo */
    overflow: hidden;   /* Oculta el reflejo fuera de la tarjeta */
    /* Transición para el efecto de hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 120px; 
}

.stat-card p {
    margin: 0;
    color: var(--text-secondary-color);
    font-size: 1rem;
}

.stat-card h3 {
    margin: 0.5rem 0 0 0;
    font-size: 2.5rem;
    color: var(--title-color);
}

/* Resaltar específicamente el monto de Deuda con Cerrador en rojo */
#stat-cerrador-debt-usd {
    color: #e74c3c; /* Rojo distintivo para deuda */
    /* Más peso para destacarlo */
    font-size: 2.6rem; /* Ligeramente más grande que el resto */
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.stat-card h4.sub-stat {
    margin: 0.25rem 0 0 0;
    font-size: 1.5rem;
    color: var(--text-secondary-color);
    font-weight: normal;
}

.stat-card h3.negative-balance {
    color: #e74c3c; /* Rojo */
}

.stat-card.negative-balance h3 {
    color: #e74c3c; /* Rojo */
    font-weight: bold;
}

.stat-card h3.positive-balance {
    color: #28a745; /* Verde */
}

.stat-card.tomorrow-balance-style {
    background-color: var(--highlight-bg-color);
    transition: background-color 0.5s ease;
}

.stat-card.tomorrow-balance-style h3 {
    color: #2980b9; /* Azul oscuro */
    transition: color 0.5s ease;
}

.filter-container {
    display: flex;
    gap: 1.5rem;
    background: var(--card-bg-color); /* CORRECCIÓN: Usar la propiedad 'background' para aplicar el degradado. */
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 0 4px 12px var(--shadow-color);
    flex-wrap: wrap;
}

.filter-container .input-group {
    margin-bottom: 0;
    min-width: 200px;
}

.date-filter-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.date-filter-wrapper input[type="date"] {
    flex-grow: 1;
    width: auto; /* Permite que el input se ajuste */
}

.clear-filter-button {
    background-color: var(--readonly-bg-color);
    color: var(--title-color);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
    line-height: 28px;
    padding: 0;
}

#approved-date-display {
    color: var(--text-secondary-color);
    font-size: 1.5rem;
}

.dashboard-subtitle {
    text-align: center;
    color: var(--title-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.panel-subtitle {
    text-align: center;
    color: var(--title-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.date-group {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--divider-color);
}

.date-group h3 {
    color: var(--title-color);
    border-bottom: 2px solid var(--divider-color);
    padding-bottom: 0.5rem;
    /* Centramos el título de la fecha para que coincida con la tabla */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.3rem; /* Aumentamos el tamaño de la fuente */
    font-weight: 700; /* Hacemos la fuente un poco más gruesa */
}

.table-header-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    /* Ajustamos los márgenes para que se centre igual que la tabla */
    max-width: 1000px;
    margin: 0 auto 1rem auto;
}

/* Estilos para la fila de descripción */
.operations-table .description-row {
    background-color: #fffbe6; /* Amarillo muy claro */
    cursor: default; /* El cursor no cambia en esta fila */
}

.operations-table .description-row:hover {
    background-color: #fffbe6; /* Mantenemos el color en hover */
}

.operations-table .description-cell {
    padding: 10px 15px;
    font-style: italic;
    color: #8a6d3b;
    /* Marrón/dorado oscuro */
    border-bottom: 1px solid #f2e7c3;
    display: block; /* Hacemos que ocupe todo el ancho */
    text-align: left;
}

.description-label {
    font-weight: bold;
}

.table-header-with-button h2 {
    margin: 0;
}

.table-header-with-button .secondary-button {
    margin: 0;
}

.summary-box {
    background-color: var(--modal-dropdown-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.summary-box h4 {
    margin-top: 0;
    color: var(--title-color);
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 0.5rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.summary-item span {
    color: var(--text-secondary-color);
}

.summary-item strong {
    color: var(--title-color);
}

.summary-item.total strong {
    font-size: 1.4rem;
    color: #28a745; /* Verde */
}


/* Estilos para el contenedor del formulario de cerradores */
.cerrador-form-container {
    max-width: 900px;
    margin: 0 auto 2rem auto;
}

/* Hacemos que el formulario de cerrador tenga 3 columnas en escritorio */
@media (min-width: 768px) {
    #add-cerrador-form {
        grid-template-columns: repeat(3, 1fr);
    }
}

.secondary-button {
    display: block;
    width: fit-content;
    margin: 2rem auto 0 auto;
    padding: 10px 25px;
    background-color: #3498db;
    font-size: 1rem;
    text-align: center;
}

/* Alineamos el espaciado del botón de registrar con el resto mediante .main-dashboard-action */
/* (Se removió la regla específica para evitar inconsistencias). */

/* --- NUEVO: Estilo para los botones de acción principales del dashboard --- */
.main-dashboard-action {
    display: block;
    width: 90%;
    max-width: 450px;
    margin: 1rem auto; /* separación uniforme entre botones */
    padding: 16px 28px; /* padding uniforme para los tres botones */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    line-height: 1; /* asegura alineación vertical consistente */
}

.main-dashboard-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1); /* Aumenta ligeramente el brillo del degradado */
}

#go-to-register-from-dashboard { background-image: linear-gradient(45deg, #8e44ad, #9b59b6); }
#add-capital-button { background-image: linear-gradient(45deg, #f39c12, #f1c40f); }
#final-closure-button-dashboard { background-image: linear-gradient(45deg, #e74c3c, #c0392b); }

.secondary-button:hover {
    background-color: #2980b9;
    /* NUEVO: Efecto de elevación y sombra */
    transform: translateY(-2px);
}

.panel > .secondary-button {
    
    margin-bottom: 2rem;
}

.danger-button {
    display: block;
    width: fit-content;
    margin: 1rem auto 2rem auto;
    padding: 10px 25px;
    background-color: #e74c3c;
    font-size: 1rem;
    text-align: center;
}

.danger-button:hover {
    background-color: #c0392b;
    /* NUEVO: Efecto de elevación y sombra */
    transform: translateY(-2px);
}

.history-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem auto 2rem auto;
    max-width: 1000px;
}

.history-actions .tertiary-button, .history-actions .danger-button {
    margin: 0;
}

.main-action-button {
    width: 100%;
    padding: 15px;
    background-color: #e74c3c; /* Rojo */
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}

.main-action-button:hover {
    background-color: #c0392b; /* Rojo más oscuro */
}

.tertiary-button {
    display: block;
    width: 100%; /* Ocupa todo el ancho para centrar el texto */
    padding: 10px 20px;
    background-color: #f39c12; /* Naranja */ /* Nueva fuente para los botones terciarios */
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-weight: bold; /* Fuente más gruesa */
    text-align: center;
    box-sizing: border-box; /* Asegura que el padding no desborde */
}

.tertiary-button:hover {
    background-color: #e67e22; /* Naranja más oscuro */
}

/* --- NUEVO: Estilos para los botones de exportar a PDF --- */
.pdf-export-button {
    background-color: #c0392b; /* Rojo base */
    color: white;
}

.pdf-export-button:hover {
    background-color: #a93226; /* Rojo más oscuro para el hover */
    color: white;
}

/* --- Estilos para la sección de control de saldo --- */
/* --- CORRECCIÓN DE VISIBILIDAD --- */
#balance-control-section {
    display: flex; /* Usamos flexbox para un control más predecible */
    flex-wrap: wrap; /* Permitimos que los elementos se apilen en móvil */
    gap: 1.5rem;
    margin: 2rem auto;
    max-width: 900px; /* Aumentamos un poco el ancho para que se vea mejor */
    justify-content: center; /* Centramos las tarjetas */
}

/* Hacemos que cada tarjeta ocupe el espacio disponible */
#balance-control-section > .stat-card {
    flex: 1 1 400px; /* Permite crecer y encogerse, con una base de 400px */
}

/* En móvil, las tarjetas de saldo se apilan una debajo de la otra */
@media (max-width: 768px) {
    #balance-control-section > .stat-card {
        flex-basis: 100%; /* Cada tarjeta ocupa el 100% del ancho */
    }
}

#balance-setter-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--highlight-bg-color);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

.balance-setter-actions {
    display: flex;
    gap: 1rem;
    align-self: flex-end;
    margin-top: 0.5rem;
}

#remaining-balance-card {
    width: 100%;
    box-sizing: border-box;
}

.balance-display-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem auto;
    max-width: 600px;
}

@media (max-width: 767px) {
    .balance-display-container {
        grid-template-columns: 1fr;
    }
}

.history-summary-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem auto;
    max-width: 1000px;
}

.history-overall-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#history-profit-card {
    background-color: #28a745; /* Verde */
}

#history-usd-card {
    background-color: #3498db; /* Azul */
}

#history-profit-card p, #history-profit-card h3,
#history-usd-card p, #history-usd-card h3 {
    color: white;
}

/* --- TAREA ADICIONAL: Poner en blanco el sub-valor de la tarjeta de ganancia de 30 días --- */
#history-profit-card h4.sub-stat {
    color: white;
}

/* Estilo para sub-valores en la misma línea (ej. resumen de cerrador) */
.sub-stat-inline {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    font-weight: normal;
    margin-left: 8px;
}

/* Estilos para la lista de saldos anteriores en el modal */
.previous-balances-list {
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.previous-balance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--divider-color);
}

.previous-balance-item:last-child {
    border-bottom: none;
}

.previous-balance-item div span:last-child { font-weight: bold; }

.delete-balance-button {
    background-color: #e74c3c; /* Rojo */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
}
.delete-balance-button:hover { background-color: #c0392b; }

.edit-balance-button {
    background-color: #3498db; /* Azul */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
}

.previous-balances-list + h3 {
    font-size: 1.2rem;
    color: var(--title-color);
    border-bottom: 2px solid var(--divider-color);
    padding-bottom: 0.5rem;
}

.injection-item {
    background-color: var(--success-highlight-bg-color); /* Fondo verde oscuro semitransparente */
    border-left: 4px solid var(--success-highlight-border-color); /* Borde verde más oscuro */
    padding-left: 1rem; /* Aumentamos un poco el padding para mejor espaciado */
    flex-wrap: wrap; /* Permite que los detalles se pongan debajo si no caben */
}

.injection-details {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    width: 100%; /* Ocupa todo el ancho para ponerse debajo */
    text-align: right;
    flex-grow: 1;
}

.delete-injection-button {
    background-color: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 2px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    margin-left: -7px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s; /* Transición suave */
}

/* --- NUEVO: Estilo hover para el botón de eliminar inyección --- */
.delete-injection-button:hover {
    background-color: #e74c3c; /* Fondo rojo */
    color: white; /* Texto blanco */
}

/* --- Estilos para Toast/Popup --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Para poder hacer clic a través del contenedor */
}

.toast {
    background-color: var(--text-color-strong);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    pointer-events: auto; /* Para que se pueda interactuar con el toast si es necesario */
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success { background-color: #28a745; } /* Verde */
.toast.error { background-color: #e74c3c; } /* Rojo */
.toast.info { background-color: #3498db; } /* Azul */

/* --- Estilos para la Pantalla de Carga Global --- */
/* --- REFACTORIZACIÓN: Estilo de Loader Modernizado --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usamos la variable de fondo principal con transparencia para que se adapte al modo claro/oscuro */
    background-color: rgba(24, 25, 26, 0.85); /* CORRECCIÓN: Fondo oscuro fijo */
    backdrop-filter: blur(4px); /* Efecto de desenfoque para un look más moderno */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que esté por encima de todo */
    color: #ffffff; /* CORRECCIÓN: Color de texto siempre blanco */
    font-size: 1.2rem;
    /* Transición suave para la aparición y desaparición */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

/* Cuando el loader es visible (controlado por JS), se vuelve opaco */
.loader-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.loader-spinner {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.loader-spinner div {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff; /* CORRECCIÓN: Puntos siempre blancos */
    animation: pulse-dots 1.4s infinite ease-in-out both;
}

.loader-spinner div:nth-child(1) {
    animation-delay: -0.32s;
}

.loader-spinner div:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes pulse-dots {
    0%, 80%, 100% {
        transform: scale(0);
    } 40% {
        transform: scale(1.0);
    }
}

/* --- Estilos para el contenedor del gráfico --- */
.chart-container {
    position: relative;
    margin: 2rem auto;
    height: 40vh;
    max-height: 400px;
    width: 100%;
    /* --- SOLUCIÓN CLS: Reservar espacio para el gráfico --- */
    min-height: 300px;
    max-width: 1000px;    
    background-color: var(--card-bg-color);
}



/* --- Estilos para el enlace de WhatsApp --- */
.whatsapp-contact-link {
    display: inline-flex; /* Usamos flex para alinear el icono y el texto */
    align-items: center;
    background-color: #25D366; /* Color verde de WhatsApp */
    color: white !important; /* !important para asegurar que el color se aplique sobre otros estilos */
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    gap: 8px; /* Espacio entre el icono y el texto */
    transition: background-color 0.2s;
}

.whatsapp-contact-link::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: white; /* El icono será blanco */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* Estilo para mensajes de información genéricos */
.info-message {
    background-color: var(--highlight-bg-color);
    color: #2980b9;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}
.info-message p { margin: 0; }

.cerrador-name-in-label {
    font-weight: bold;
    color: var(--special-accent-color);
    margin-left: 8px;
    font-style: italic;
}


.whatsapp-contact-link:hover {
    background-color: #128C7E; /* Un verde más oscuro para el hover */
}
/* --- Estilos para la lista de entregas por cliente en forma de tabla de 3 columnas en desktop --- */
.client-deliveries-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 columnas de igual ancho en desktop */
    gap: 2rem; /* Separación generosa entre columnas y filas */
    max-width:60rem;
    margin: 2rem auto;
}

/* --- MEJORA DE DISEÑO: Si solo hay una tarjeta, que ocupe todo el ancho --- */
/* Usamos :has() para detectar si la lista solo tiene un hijo directo y cambiamos el layout a una sola columna. */
.client-deliveries-list:has(> .client-delivery-card:only-child) {
    grid-template-columns: 1fr;
    max-width: 40rem; /* Reducimos el ancho máximo para que no se vea tan estirado */
}

/* --- Ajuste para la lista de entregas en móvil --- */
@media (max-width: 1024px) {
    .client-deliveries-list {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 768px) {
    .client-deliveries-list {
        grid-template-columns: 1fr; /* Apila las tarjetas verticalmente en móvil */
    }
    .client-delivery-card {
        flex-direction: column; /* En móvil, disposición vertical */
        width: 100% !important; /* Ocupa todo el ancho en móvil */
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

.client-delivery-card {
    background-color: var(--form-bg-color); /* Fondo sólido para un look más limpio */
    border-radius: 8px;
    flex-direction: row; /* En desktop, disposición en fila */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center; /* Centra todo horizontalmente */
    text-align: center;
    gap: 1rem; /* Espacio entre elementos */
   
    width: 100%; /* Ahora la tarjeta ocupa toda la celda del grid */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0; /* Elimina márgenes individuales para que el gap del grid controle la separación */
}

.client-delivery-header {
    /* --- NUEVO: El header ahora es un contenedor simple --- */
    width: 100%;
}

.client-delivery-header .client-name-highlight {
    /* --- NUEVO: Estilo de nombre más prominente --- */
    font-size: 1.5rem; /* Más grande */
    font-weight: 600;
    color: var(--text-color-strong);
    margin-bottom: 0.5rem;
    display: block;
}

.client-delivery-total {
    /* --- NUEVO: La sección de la deuda es ahora el elemento central --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* Se asegura que el contenedor no recorte el texto */
    min-width: 0;
}

.client-delivery-total span {
    /* --- NUEVO: Etiqueta "Deuda Total" más sutil --- */
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.client-delivery-total .usd-amount-highlight {
    /* Monto de la deuda grande, pero adaptativo para evitar desbordamiento */
    font-size: 3rem; 
    margin-top: 0.5rem;
    font-weight: 700;
    color: #e74c3c; /* Rojo para indicar deuda */
    line-height: 1.1;
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Hace que el texto se adapte al contenedor en tamaño si sobrepasa, con un tamaño máximo ligeramente menor */
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* --- MEJORA VISUAL: Hacer que el total pagado sea verde --- */
/* Cuando el cliente ha pagado, el monto total se muestra en verde. */
.client-delivery-total.paid .usd-amount-highlight {
    color: #28a745; /* Verde */
}

/* --- NUEVO: Estilo para la deuda con pago parcial --- */
.client-delivery-total.partial-payment .usd-amount-highlight {
    color: #edcb20; /* Amarillo/Naranja para indicar un abono */
}


.client-delivery-actions {
    /* Contenedor de acciones: los botones dentro de este se adaptan al tamaño de la tarjeta y pantalla */
    margin-top: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

.client-delivery-card .register-delivery-button,
.client-delivery-card .whatsapp-contact-link {
    /* Ajuste adaptativo: el tamaño y el padding cambian según ancho de pantalla */
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
}

.client-delivery-card .register-delivery-button {
    background-color: #3498db;
    color: white;
    border-radius: 6px;
}

.client-delivery-card .register-delivery-button:hover {
    background-color: #2980b9;
}

.client-delivery-card .whatsapp-contact-link {
    justify-content: center;
}

/* Reducción gradual automática en tablets */
@media (max-width: 1024px) {
    .client-delivery-actions .register-delivery-button,
    .client-delivery-actions .whatsapp-contact-link {
        font-size: 0.95rem;
        padding: 0.75rem 1.2rem;
    }
}

/* Reducción clara en móvil */
@media (max-width: 768px) {
    .client-delivery-actions .register-delivery-button,
    .client-delivery-actions .whatsapp-contact-link {
        font-size: 0.88rem;
        padding: 0.6rem 0.6rem;
    }
}

/* Evita desborde por texto muy largo en móviles */
@media (max-width: 480px) {
    .client-delivery-actions .register-delivery-button,
    .client-delivery-actions .whatsapp-contact-link {
        font-size: 0.82rem;
        padding: 0.5rem 0.3rem;
        word-break: break-word;
    }
}
/* --- Estilos para el indicador de estado de deuda --- */
.debt-status-paid, .debt-status-pending {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
}

.debt-status-paid {
    background-color: #28a745; /* Verde */
}

.debt-status-pending {
    background-color: #f39c12; /* Naranja */
    color: #fff;
}

/* --- Estilos para el resumen por cerrador en el historial --- */
.cerrador-summary-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 1rem auto;
}

.cerrador-summary-card {
    background: var(--card-bg-color); /* CORRECCIÓN: Usar la propiedad 'background' para aplicar el degradado. */
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    padding: 1.5rem;
    position: relative; /* Necesario para la animación de reflejo */
    overflow: hidden;   /* Oculta el reflejo fuera de la tarjeta */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cerrador-summary-card h4 {
    margin: 0 0 0.5rem 0;
    text-align: center;
}

/* --- Estilos para el Autocompletado de Clientes --- */
.autocomplete-container {
    position: relative;
}

.suggestions-list {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--modal-dropdown-bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px var(--shadow-color);
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--divider-color);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: var(--form-bg-color);
}

.suggestion-detail {
    color: #7f8c8d; /* Gris */
    margin-left: 5px;
}

/* --- Estilos para la Alerta de Saldo Bajo --- */
.low-balance-alert {
    border: 2px solid #e74c3c; /* Borde rojo */
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

.low-balance-text {
    color: #e74c3c !important; /* Rojo, !important para asegurar que sobreescriba otros estilos */
    font-weight: bold;
}

/* --- Estilos para la cuadrícula de gráficos del Dashboard --- */
.charts-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
}

@media (min-width: 992px) {
    .charts-grid-container {
        grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas grandes */
    }
}

.chart-wrapper {
    background: var(--card-bg-color); /* CORRECCIÓN: Usar la propiedad 'background' para aplicar el degradado. */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    position: relative; /* Necesario para la animación de reflejo */
    overflow: hidden;   /* Oculta el reflejo fuera de la tarjeta */
    /* Transición para el efecto de hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Estilos para el Panel de Administración --- */
.admin-submenu {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    background-color: #18191a; /* CORRECCIÓN: Usar un color sólido */
    padding: 0.5rem;
    border-radius: 8px;
    margin: 1rem auto 2rem auto;
    max-width: fit-content;
}

.admin-submenu-link {
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--title-color);
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.admin-submenu-link:hover {
    background-color: var(--admin-submenu-hover-bg-color);
}

.admin-submenu-link.active {
    background-color: #3498db; /* Azul */
    color: white;
}

.delete-delivery-button {
    background-color: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 4px 10px;
    font-size: 0.8rem;
    margin: 0;
    width: 90px; /* Ancho fijo para el botón */
    text-align: center; /* Centra el texto dentro del botón */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

/* Estilo para campos de solo lectura calculados */
.readonly-field {
    background-color: var(--readonly-bg-color);
    font-weight: bold;
    color: var(--readonly-text-color);
    cursor: not-allowed; /* Cambia el cursor para indicar que no se puede hacer clic */
}

/* --- Estilos para el Menú Desplegable de Administración --- */
.dropdown {
    position: relative;
}

.dropdown-toggle, .dropdown-toggle span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;    
    background-color: var(--modal-dropdown-bg-color);
    list-style: none;
    padding: 0.5rem; /* Añade un espaciado interno */
    margin: 0.5rem 0 0 0; /* Añade un pequeño margen superior para separarlo */
    min-width: 220px;
    /* CORRECCIÓN: Sombra y bordes redondeados más modernos. */
    box-shadow: 0 5px 15px var(--shadow-color);
    border-radius: 8px;
    z-index: 1100; /* Aumentado para asegurar que se muestre sobre otros elementos como los modales */
    /* --- Animación de despliegue --- */
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden; /* Oculto pero accesible para la transición */
    pointer-events: none; /* No se puede interactuar cuando está oculto */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
}

/* Se muestra cuando el padre tiene la clase 'open' (controlado por JS) */
.dropdown.open .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.dropdown-menu li a {
    /* CORRECCIÓN: Usamos flex para alinear el icono y el texto, igual que en el menú principal. */
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Aumentamos ligeramente el espacio para más claridad */
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 16px; /* Padding por defecto */
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
    /* CORRECCIÓN: Se añade la misma transición completa que en el menú principal. */
    transition: background-color 0.2s ease-out, margin 0.2s ease-out, padding 0.2s ease-out;
}

.dropdown-menu li a:hover {
    background-color: var(--highlight-bg-color);
    /* CORRECCIÓN: Se añade el mismo efecto de "despegue" que en el menú principal. */
    border-radius: 6px;
    margin: 0; /* El margen ya no es necesario gracias al padding del contenedor */
    padding: 12px 16px; /* Mantenemos el padding original */
}

/* En móvil, el menú desplegable se integra en el menú hamburguesa */
/* CORRECCIÓN: Se eliminan las reglas específicas para .dropdown-menu en móvil. */
/* Ahora el submenú usará los mismos estilos de posicionamiento absoluto y animación */
/* que en la versión de escritorio, haciendo que "flote" sobre el contenido. */


/* Estilos para el nuevo modal de decisión */
.choice-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* --- Estilos para el Contenedor de Cierre Definitivo --- */
/* --- REFACTORIZACIÓN DE ESTILO: Integración con Tema Oscuro --- */
.final-closure-container {
    background-color: var(--danger-highlight-bg-color); /* Fondo rojo oscuro semitransparente */
    border: 1px solid #c0392b; /* Borde rojo más intenso */
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 800px;
    text-align: center;
    box-shadow: 0 4px 12px var(--shadow-color); /* Sombra consistente con otras tarjetas */
}

.final-closure-container .info-message { 
    margin-bottom: 1.5rem; 
    /* Anulamos los estilos por defecto de .info-message para que se adapte al contenedor de peligro */
    background-color: transparent;
    border: none;
    color: var(--text-color); /* Texto claro para que sea legible */
}
.final-closure-container .danger-button { margin: 0 auto; }

/* --- NUEVO: CORRECCIONES PARA RESPONSIVIDAD EN MÓVILES --- */

/* Media Query para tablets y móviles (pantallas de menos de 768px de ancho) */
@media (max-width: 768px) {

    /*
     * CORRECCIÓN PARA GRÁFICOS DEL DASHBOARD:
     * Cambiamos el grid de 2 columnas a 1 sola columna.
     * Esto hace que los gráficos se apilen verticalmente en lugar de estar lado a lado.
     */
    .charts-grid-container {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 1.5rem; /* Un poco más de espacio vertical entre los gráficos */
    }

    /*
     * CORRECCIÓN PARA EL MODAL EN MÓVIL:
     * Hacemos que la altura máxima sea más flexible y dependa del contenido,
     * evitando que se vea cortado en pantallas pequeñas.
     */
    .modal-content {
        /*
         * CORRECCIÓN DE ANCHO EN MÓVIL:
         * Reducimos el ancho al 90% de la pantalla para que no se pegue a los bordes,
         * dando una apariencia más limpia y profesional.
         */
        width: 80%;
        max-height: 80vh; /* Aumentamos un poco la altura máxima disponible */
        margin-top: 2rem; /* Añadimos un margen superior para que no pegue al borde */
        margin-bottom: 2rem;
    }

    /*
     * CORRECCIÓN PARA EL FORMULARIO DE OPERACIONES EN MÓVIL:
     * Añadimos padding horizontal para que los inputs no se peguen a los bordes.
     */
    .operation-form {
        /* CORRECCIÓN: Usamos padding en lugar de margin para crear espacio interno. */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* --- NUEVO: Ajustes para el footer en móvil --- */
    .app-footer {
        flex-direction: column; /* Apila los elementos verticalmente */
        justify-content: center; /* Centra los elementos */
        padding: 1.5rem 1rem; /* Reduce el padding */
        gap: 1rem; /* Reduce el espacio entre elementos */
        text-align: center; /* Centra el texto del copyright */
        background-color: var(--navbar-dropdown-hover-bg-color);
    }

    .footer-copyright {
        font-size: 0.8rem; /* Reduce el tamaño de la fuente del copyright */
    }

    .footer-support-link {
        padding: 0.5rem 1rem; /* Reduce el padding del botón */
        font-size: 0.9rem; /* Reduce el tamaño de la fuente del botón */
    }

    .footer-support-link .whatsapp-icon {
        width: 16px; /* Reduce el tamaño del icono */
        height: 16px;
    }
}

/* Ajustes para la vista móvil */
@media (max-width: 768px) {
    .modal-content {
        padding: 1.5rem 1rem; /* Menos padding horizontal en móvil */
    }

    .modal-scrollable-content {
        padding: 0 0.5rem;
        margin: 0 -0.5rem;
    }

    /* Todos los formularios dentro de un modal pasan a una columna */
    .modal .operation-form {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 1rem 0; /* Solo espacio vertical */
    }
}

/* --- CORRECCIÓN RESPONSIVA: Evitar que los gráficos se desborden en móvil --- */
.chart-container canvas {
    max-width: 100%;
    height: auto !important; /* Asegura que la altura se ajuste proporcionalmente */
}

/* --- Estilos para Items Cancelados --- */
.cancelled-item {
    background-color: var(--danger-highlight-bg-color) !important; /* Fondo rojo semitransparente */
    border-left-color: #e74c3c !important; /* Borde rojo */
    text-decoration: line-through;
    opacity: 0.7;
}

.cancelled-tag {
    background-color: #e74c3c;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    text-decoration: none; /* Quitar el tachado del tag */
}

/* --- NUEVO: Contenedor para la fila de gasto para manejar la separación --- */
.gasto-tbody {
    display: block;
    margin-bottom: 2.5rem; /* La misma separación que las otras tarjetas */
}

/* --- NUEVO: Estilos para la fila de tipo "gasto" --- */
.gasto-row {
    /* Fondo vinotinto para indicar que es un gasto/egreso */
    background: #8c1c1c; /* Un rojo vinotinto oscuro y elegante */
    border: 1px solid #a93226; /* Un borde ligeramente más claro para definir la tarjeta */
    margin-bottom: 0 !important; /* Anulamos el margen para que el tbody lo controle */
    border-bottom-width: 1px; /* Añadimos el borde inferior que quitamos en el 'tr' general */
    border-radius: 4px; /* Redondeamos todas las esquinas */
}

.gasto-row td {
    /* Hacemos que todo el texto dentro de la fila de gasto sea blanco */
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2); /* Hacemos el separador interno más sutil */
}

/* Anulamos los colores específicos para que todo el texto sea blanco */
.gasto-row .cerrador-name-highlight,
.gasto-row .made-by-highlight {
    background-color: transparent; /* Quitamos cualquier fondo especial */
    color: #ffffff !important; /* Forzamos el texto a blanco */
    font-weight: bold;
}

.gasto-row .total-bs-highlight {
    background-color: #6e1616; /* Un rojo más oscuro para la celda del monto */
}

/* --- NUEVO: Estilos para la sección de deuda del cerrador --- */
#cerrador-debt-section {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: var(--highlight-bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

#cerrador-debt-section #deliver-usd-button {
    margin-top: 1.5rem;
    background-color: #2980b9; /* Un azul distintivo */
}

#cerrador-debt-section #deliver-usd-button:hover {
    /* Se añade un azul más oscuro para el efecto hover, mejorando la retroalimentación visual. */
    background-color: #2471a3;
}

#confirm-action-modal {
    /* Asegura que este modal de confirmación siempre aparezca sobre otros modales abiertos. */
    z-index: 1050;
}


/* --- NUEVO: Asegurar que el modal de contraseña también esté por encima --- */
#password-confirm-modal {
    /* Este modal también debe tener un z-index alto para aparecer sobre otros. */
    z-index: 1050;
}

/* --- NUEVO: Estilo para la descripción resumida en la tabla de operaciones --- */
.op-description-summary {
    display: block; /* Asegura que se muestre en una nueva línea debajo del nombre */
    font-size: 0.9rem; /* Un poco más pequeño que el texto principal */
    color: #d57e31; /* Usamos el color de acento especial (morado) */
    font-style: italic; /* Cursiva para diferenciarlo */
    margin-top: 3px; /* Pequeño espacio superior */
    margin-left: 2px;
    /* Truncar el texto si es muy largo para no romper el diseño */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Ancho máximo antes de truncar */
}

/* --- NUEVO: Animación de "levantamiento" para las tarjetas al pasar el cursor --- */

/* Se comenta este bloque para eliminar el efecto hover de las tarjetas y tablas */
/*
.stat-card:hover,
.chart-wrapper:hover,
table tr:not(.details-row):hover, /* Excluye las filas de detalles */
.client-delivery-card:hover {
    transform: translateY(-5px) scale(1.02); /* Levanta y agranda la tarjeta */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Aumenta la sombra para dar profundidad */
}
*/

/* --- NUEVO: Clase para bloquear el scroll del body cuando un modal está abierto --- */
body.modal-open {
    /*
     * CORRECCIÓN: El scroll principal está en .main-content, no en el body.
     * Aplicar overflow: hidden al <html> es una forma más robusta de asegurar
     * que ninguna barra de scroll de la página principal esté activa.
    */
    overflow: hidden;
}
html.modal-open {
    overflow: hidden;
}

/* --- NUEVO: Animación de Carga para Gráficos --- */
.chart-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color);
    border-top-color: var(--special-accent-color); /* Color morado para el acento */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10; /* Asegura que esté por encima del canvas */
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.chart-wrapper {
    /* Aseguramos que el contenedor tenga posición relativa para que el loader se posicione correctamente */
    position: relative;
}

/* --- NUEVO: Estilos para el Selector con Búsqueda --- */
.searchable-select-container .searchable-select {
    position: relative;
    width: 100%;
}

.searchable-select-container .select-display {
    background-color: var(--form-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

.searchable-select-container .select-display::after {
    content: '▼';
    font-size: 12px;
    margin-left: 10px;
    transition: transform 0.2s ease;
}

.searchable-select-container.open .select-display::after {
    transform: rotate(180deg);
}

.searchable-select-container .select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--modal-dropdown-bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 1051; /* Por encima de los modales */
    max-height: 250px;
    overflow-y: hidden; /* Oculta el scroll principal */
    box-shadow: 0 4px 8px var(--shadow-color);
}

.searchable-select-container.open .select-dropdown {
    display: block;
}

.searchable-select-container .search-input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--form-bg-color);
    color: var(--text-color);
    font-size: 16px;
}

.searchable-select-container .search-input:focus {
    outline: none;
    border-bottom-color: #3498db;
}

.searchable-select-container .options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 190px; /* Altura máxima para la lista antes de hacer scroll */
    overflow-y: auto; /* Scroll solo para la lista de opciones */
}

.searchable-select-container .option-item {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.searchable-select-container .option-item:last-child {
    border-bottom: none;
}

.searchable-select-container .option-item:hover,
.searchable-select-container .option-item.selected {
    background-color: var(--highlight-bg-color);
}

/* --- NUEVO: Estilo para la opción resaltada con el teclado --- */
.searchable-select-container .option-item.highlighted {
    background-color: #3498db; /* Un azul distintivo para el resaltado del teclado */
    color: white;
}

.searchable-select-container .option-item.hidden {
    display: none;
}

/* Subtexto pequeño junto al nombre (por ejemplo, USD inicial del cerrador) */
.searchable-select-container .option-item .option-subtext {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 8px;
    white-space: nowrap;
}