/* assets/css/css_common.css */

/* Variables CSS para colores personalizados (originalmente de Tailwind) */
:root {
    --color-gray-900: #111827; /* rgb(17 24 39) */
    --color-gray-800: #1f2937; /* rgb(31 41 55) */
    --color-gray-700: #374151; /* rgb(55 65 81) */
    --color-gray-600: #4b5563; /* rgb(75 85 99) */
    --color-gray-400: #9ca3af; /* rgb(156 163 175) */
    --color-gray-300: #d1d5db; /* rgb(209 213 219) */
    --color-gray-100: #f3f4f6; /* rgb(243 244 246) */
    --color-blue-500: #3b82f6; /* rgb(59 130 246) */
    --color-blue-400: #60a5fa; /* rgb(96 165 250) */
    --color-blue-300: #93c5fd; /* rgb(147 197 253) */
    --color-red-600: #dc2626; /* rgb(220 38 38) */
    --color-red-700: #b91c1c; /* rgb(185 28 28) */
    --color-indigo-600: #4f46e5; /* rgb(79 70 229) */
    --color-indigo-700: #4338ca; /* rgb(67 56 202) */
    --color-lime-500: #84cc16; /* rgb(132 204 22) */
    --color-lime-600: #65a30d; /* rgb(101 163 13) */
    --color-rose-500: #f43f5e; /* rgb(244 63 94) */
    --color-rose-600: #e11d48; /* rgb(225 29 72) */
    --color-teal-300: #5eead4; /* rgb(94 234 212) */
    --color-teal-400: #2dd4bf; /* rgb(45 212 191) */
    --color-teal-200: #99f6e4; /* rgb(153 246 228) */
    --color-sky-blue: #87CEEB; /* SkyBlue */
    --color-neon-green: #39FF14; /* Neon Green */
    --color-chartreuse: #7FFF00; /* Chartreuse */
    --color-very-light-gray: #E0E7EB; /* Un gris muy claro */
    --color-logo-blue: rgb(0, 191, 255); /* Color de logo actualizado a rgb(0, 191, 255) */
}

/* Estilos generales del body */
body {
    background-color: var(--color-gray-900);
    color: var(--color-gray-100);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif; /* Asegurar la fuente Inter */
    -webkit-font-smoothing: antialiased; /* Para navegadores WebKit */
    -moz-osx-font-smoothing: grayscale; /* Para Firefox en macOS */
    text-rendering: optimizeLegibility; /* Para mejorar la legibilidad */
    text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.3); /* Sombra suave para efecto ClearType */
}

/* Ajustes específicos para elementos que puedan necesitar una sombra diferente o anular la del body */
h1, h2, h3 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* Sombra un poco más pronunciada para títulos */
}

/* Clases de estado para los badges y elementos de display */
.estado-aprobado {
    background-color: #10B981; /* Tailwind green-500 */
    color: #FFFFFF;
}
.estado-rechazado {
    background-color: #EF4444; /* Tailwind red-500 */
    color: #FFFFFF;
}
.estado-observaciones {
    background-color: #F59E0B; /* Tailwind amber-500 */
    color: #FFFFFF;
}
.estado-pendiente {
    background-color: #6B7280; /* Tailwind gray-500 */
    color: #FFFFFF;
}
/* Sombra de texto para los badges de estado para que resalten */
.estado-aprobado, .estado-rechazado, .estado-observaciones, .estado-pendiente {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); /* Sombra más fuerte para los badges */
}

/* Sombra de texto para los enlaces de navegación */
#fixed-nav-bar nav a,
#mobile-menu a {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* Sombra en las 4 esquinas para efecto de borde */
}

/* Remover sombra para el botón de la pestaña activa (ya tiene buen contraste) */
#fixed-nav-bar nav a.border-blue-500.bg-blue-700.text-white,
#fixed-nav-bar nav a.border-blue-500.text-blue-400 { /* Targeting the active tab */
    text-shadow: none !important;
}

/* Estilo para el elemento activo del menú de navegación móvil (común para ambos PHP) */
/* Se utiliza !important para asegurar que sobrescribe la regla general de color blanco */
#mobile-menu a.mobile-nav-active {
    color: #93C5FD !important; /* Color de text-blue-300 */
    font-weight: 700; /* font-bold */
    /* background-color: var(--color-gray-700); /* Tailwind gray-700 */
    text-shadow: none !important; /* Eliminar sombra para el elemento activo */
}

/* Estilo para el icono dentro del elemento activo del menú de navegación móvil (común para ambos PHP) */
#mobile-menu a.mobile-nav-active i {
    color: #93C5FD !important; /* Color de text-blue-300 */
    text-shadow: none !important; /* Eliminar sombra para el icono activo */
}

/* Estilo para el borde del botón del logo con el color del logo (AHORA EN COMMON) */
.border-logo-blue {
    border-color: #00BFFF; /* El tono azul del logo image_e6ada9.png */
}

/* ======================================================= */
/* Estilos para el NAV (Header) - Común */
/* ======================================================= */
#fixed-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--color-gray-800);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    border-bottom: 1px solid var(--color-gray-700); /* border-b border-gray-700 */
    display: flex; /* Default display */
    flex-direction: column; /* Default flex direction */
}

/* Sección de menú móvil */
#fixed-nav-bar .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem; /* p-4 */
}
@media (min-width: 1024px) { /* lg breakpoint */
    #fixed-nav-bar .mobile-header {
        display: none;
    }
}

#fixed-nav-bar .mobile-header h2 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: var(--color-logo-blue);
}

#fixed-nav-bar .mobile-header button {
    color: var(--color-gray-400);
    border: 2px solid var(--color-logo-blue);
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.25rem; /* p-1 */
    background: none;
    cursor: pointer;
    outline: none;
}
#fixed-nav-bar .mobile-header button:hover {
    color: var(--color-gray-200); /* hover:text-gray-200 */
}
#fixed-nav-bar .mobile-header button img {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
}

/* Barra superior para pantallas de escritorio */
#fixed-nav-bar .desktop-header {
    display: none; /* hidden */
    justify-content: space-between;
    align-items: center;
    padding: 1rem; /* p-4 */
}
@media (min-width: 1024px) { /* lg breakpoint */
    #fixed-nav-bar .desktop-header {
        display: flex; /* lg:flex */
    }
}

#fixed-nav-bar .desktop-header button {
    color: var(--color-gray-400);
    border: 2px solid var(--color-logo-blue);
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.25rem; /* p-1 */
    background: none;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    margin-right: auto; /* me-auto */
    transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
}
#fixed-nav-bar .desktop-header button:hover {
    color: var(--color-gray-200); /* hover:text-gray-200 */
    transform: scale(1.1); /* hover:scale-110 */
}
#fixed-nav-bar .desktop-header button img {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
}

#fixed-nav-bar .desktop-header .user-info {
    display: flex;
    align-items: center;
    color: var(--color-gray-400);
    font-size: 0.75rem; /* text-xs */
    margin-left: auto; /* ml-auto */
}
@media (min-width: 640px) { /* sm breakpoint */
    #fixed-nav-bar .desktop-header .user-info {
        font-size: 0.875rem; /* sm:text-sm */
    }
}
#fixed-nav-bar .desktop-header .user-info span.font-semibold {
    font-weight: 600; /* font-semibold */
    color: var(--color-blue-300);
    margin-left: 0.25rem; /* ml-1 */
}

#fixed-nav-bar .desktop-header .logout-button {
    margin-left: 0.5rem; /* ml-2 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    background-color: var(--color-red-600);
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
    outline: none;
    border: none;
    cursor: pointer;
}
@media (min-width: 640px) { /* sm breakpoint */
    #fixed-nav-bar .desktop-header .logout-button {
        margin-left: 1rem; /* sm:ml-4 */
        font-size: 0.875rem; /* sm:text-sm */
    }
}
#fixed-nav-bar .desktop-header .logout-button:hover {
    background-color: var(--color-red-700); /* hover:bg-red-700 */
    transform: scale(1.05); /* hover:scale-105 */
}
#fixed-nav-bar .desktop-header .logout-button:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 4px var(--color-red-500); /* focus:ring-2 focus:ring-offset-2 focus:ring-red-500 */
}

/* Menú de escritorio colapsable - Solo la regla para mostrar/ocultar con JS */
#desktop-collapsible-menu.show {
    display: flex !important; /* Override desktop_menu.css display: none !important for smaller screens */
}

/* Menú móvil (overlay) */
#mobile-menu {
    position: fixed;
    inset: 0; /* top-0 right-0 bottom-0 left-0 */
    background-color: rgba(26, 32, 44, 0.95); /* bg-gray-900 bg-opacity-95 */
    z-index: 100;
    display: none; /* hidden */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 1rem; /* p-4 */
}
#mobile-menu.show {
    display: flex;
}
@media (min-width: 1024px) { /* lg breakpoint */
    #mobile-menu {
        display: none; /* lg:hidden */
    }
}

#mobile-menu-close-button {
    position: absolute;
    top: 1rem; /* top-4 */
    right: 1rem; /* right-4 */
    color: var(--color-gray-400);
    font-size: 2.25rem; /* text-3xl */
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}
#mobile-menu-close-button:hover {
    color: var(--color-gray-200); /* hover:text-gray-200 */
}

#mobile-menu a {
    font-size: 1.5rem; /* text-2xl */
    padding: 0.75rem 0; /* py-3 */
    display: flex;
    align-items: center;
    color: var(--color-gray-300);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}
#mobile-menu a:hover {
    color: var(--color-gray-100); /* hover:text-gray-100 */
}
#mobile-menu a i {
    margin-right: 0.75rem; /* mr-3 */
}

#mobile-menu .divider {
    border-top: 1px solid var(--color-gray-700); /* border-t border-gray-700 */
    width: 66.666667%; /* w-2/3 */
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1rem; /* my-4 */
}

#mobile-menu .user-info-mobile {
    font-size: 1.125rem; /* text-lg */
    color: var(--color-gray-400);
    display: flex;
    align-items: center;
}
#mobile-menu .user-info-mobile span.font-semibold {
    font-weight: 600; /* font-semibold */
    color: var(--color-blue-300);
    margin-left: 0.25rem; /* ml-1 */
}

#mobile-menu .logout-button-mobile {
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    background-color: var(--color-red-600);
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-medium */
    display: flex;
    align-items: center;
    margin-top: 0.75rem; /* mt-3 */
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
}
#mobile-menu .logout-button-mobile:hover {
    background-color: var(--color-red-700); /* hover:bg-red-700 */
}

/* Sombreado específico para el texto del botón "Cerrar Sesión" en el menú móvil */
#mobile-menu .logout-button-mobile {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Sombreado específico para el texto del botón "Cerrar Sesión" en la barra superior de escritorio (tablet y mayor) */
@media (min-width: 1024px) { /* equivalent to Tailwind's lg breakpoint */
    #fixed-nav-bar .desktop-header .logout-button {
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    }
}

/* Estilo para la hora en el nav móvil (ya estaba, mantenido) */
#current-date-time-display {
    color: var(--color-sky-blue); /* SkyBlue - un azul celeste vibrante, igual que la fecha del footer */
    font-weight: 600;
    text-shadow: 0 0 1px rgba(135, 206, 235, 0.4); /* Sombra muy sutil */
}

/* ======================================================= */
/* Estilos para el FOOTER - Común */
/* ======================================================= */
#fixed-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--color-gray-800);
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    padding: 1rem; /* p-4 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para que los elementos se envuelvan en pantallas pequeñas */
    gap: 0.5rem; /* Espacio entre los elementos */
}
#fixed-footer-bar .footer-text {
    color: var(--color-gray-400);
    font-size: 0.75rem; /* text-xs */
    text-align: center;
    font-family: 'Inter', sans-serif;
}
@media (min-width: 640px) { /* sm breakpoint */
    #fixed-footer-bar .footer-text {
        font-size: 0.875rem; /* sm:text-sm */
    }
}

/* Estilos para la hora en el footer (visible en mobile y tablet) */
#footer-date-time-display {
    display: none; /* Oculto por defecto en desktop */
}
@media (max-width: 1023px) { /* Visible en mobile y tablet (hasta lg breakpoint) */
    #footer-date-time-display {
        display: block; /* Muestra la hora en el footer */
        font-size: 0.75rem; /* Tamaño de texto para la hora en el footer */
        color: var(--color-blue-400); /* Color azul para la hora */
    }
    /* Ajustes para el footer en móvil y tablet */
    #fixed-footer-bar {
        justify-content: space-between; /* Espacia el copyright y la hora */
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Estilo para la fecha en el footer */
#fixed-footer-bar .footer-text p {
    color: var(--color-sky-blue); /* SkyBlue - un azul celeste vibrante */
    font-weight: 600; /* Semibold for the date */
    text-shadow: 0 0 1px rgba(135, 206, 235, 0.4); /* Sombra muy sutil para realce */
}

/* Estilos para las etiquetas de divisas en el footer (ej: "Dólar:", "Euro:") */
#currency-values {
    display: flex; /* Para alinear horizontalmente Dólar y Euro */
    gap: 1rem; /* Espacio entre los elementos de moneda */
    justify-content: center; /* Centrar los elementos de moneda */
}

#currency-values p {
    white-space: nowrap;
    color: var(--color-very-light-gray); /* Un gris muy claro para las etiquetas */
    font-weight: 500;
}

/* Estilos para los SÍMBOLOS de las divisas en el footer */
.footer-currency-symbol {
    color: var(--color-neon-green); /* Neon Green - un verde neón brillante y distintivo */
    font-weight: 800; /* Extra bold */
    text-shadow: 0 0 1px rgba(57, 255, 20, 0.4); /* Sombra muy sutil para destacar */
    margin-right: 0.15rem; /* Pequeño espacio después del símbolo */
}

/* Estilos para los VALORES NUMÉRICOS de las divisas en el footer */
.footer-currency-value {
    color: var(--color-chartreuse); /* Chartreuse - un verde brillante y legible */
    font-weight: 700;
}

/* ======================================================= */
/* Estilos para el contenido principal (común) */
/* ======================================================= */
main {
    margin-top: 4rem; /* Ajustar para compensar el header fijo */
    flex-grow: 1; /* flex-grow */
}
@media (min-width: 640px) { /* sm breakpoint */
    main {
        padding: 1rem; /* sm:p-4 */
    }
}

/* Estilos para el modal personalizado (común) */
.custom-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1050; /* Sit on top, above Bootstrap's default modal */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.custom-modal-content {
    background-color: var(--color-gray-800); /* Match bg-gray-800 */
    margin: auto;
    padding: 20px;
    border: 1px solid var(--color-gray-700); /* Match border-gray-700 */
    border-radius: 0.375rem; /* Match rounded-lg */
    width: 80%; /* Could be responsive w/ Bootstrap breakpoints */
    max-width: 500px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Match shadow-md */
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-gray-700);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.custom-modal-title {
    font-size: 1.25rem; /* h5 in Bootstrap */
    font-weight: bold;
    color: var(--color-gray-100);
}

.custom-modal-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-gray-400);
    cursor: pointer;
}
.custom-modal-close-button:hover {
    color: var(--color-gray-100);
}

.custom-modal-body {
    color: var(--color-gray-300);
    margin-bottom: 15px;
}

.custom-modal-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--color-gray-700);
    padding-top: 10px;
}

.custom-modal-confirm-btn {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: var(--color-blue-500); /* bg-blue-600 */
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.custom-modal-confirm-btn:hover {
    background-color: var(--color-blue-400); /* hover:bg-blue-700 */
}
.custom-modal-confirm-btn.hidden {
    display: none;
}

.custom-modal-cancel-btn {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: var(--color-gray-600); /* bg-gray-600 */
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    margin-left: 0.5rem; /* ml-2 */
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.custom-modal-cancel-btn:hover {
    background-color: var(--color-gray-700); /* hover:bg-gray-700 */
}

/* Estilos para impresión (ocultar elementos no deseados) */
@media print {
    .no-print {
        display: none !important;
    }
    body {
        background-color: #fff;
        color: #000;
        /* Eliminar sombreado al imprimir para texto más nítido */
        text-shadow: none !important;
    }
}