/* style.css - Hoja de Estilos Principal */
/* ------------------------------------- */
/* Este archivo contiene los estilos generales de la aplicación. */
/* Aquí se define la apariencia de los botones, formularios, tablas, etc. */
/* Puedes hacer cambios aquí para afectar el diseño de todo el sitio. */
/* ------------------------------------- */


/* ========== 🚀 MEJORA: MODERN CSS RESET ========== */
/* 1. Use a more-intuitive box-sizing model. */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Allow percentage-based heights in the application */
html, body {
  height: 100%;
}
/* Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Remove built-in form typography styles */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Estilos para el cuerpo de la página (body) */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg-primary); 
    color: var(--text-primary);
    transition: background var(--transition-normal), color var(--transition-normal);
}

/* Partículas de fondo animadas para el login */
body.modern-login-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 123, 255, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 80% 50%, rgba(23, 162, 184, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 40% 20%, rgba(0, 86, 179, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 60% 80%, rgba(23, 162, 184, 0.04) 1px, transparent 1px);
    background-size: 100px 100px, 120px 120px, 80px 80px, 90px 90px;
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Contenedor principal que centra el contenido */
.container { max-width: 1400px; margin: 0 auto; padding: 20px; padding-bottom: 100px; }

/* ========== ENCABEZADO ========== */
/* Barra de encabezado superior */
.header { background: var(--gradient-primary); color: white; padding: 20px 0; box-shadow: var(--shadow); }
.header h1 { text-align: center; margin: 0; font-size: 2.2em; }
.header p { text-align: center; margin-top: 5px; opacity: 0.9; }

/* Información del usuario y enlace de "Cerrar Sesión" */
.user-info { text-align: right; margin-bottom: 15px; }
.user-info a { color: #007bff; text-decoration: none; }
.user-info a:hover { text-decoration: underline; }

/* ========== NAVEGACIÓN PRINCIPAL ========== */
/* Barra de navegación donde están los botones de módulos */
.main-nav { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 15px; margin-bottom: 20px; box-shadow: var(--shadow); }
.nav-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Estilo de los botones de navegación (Empresas, Caja, etc.) */
.nav-btn { 
    padding: 12px 24px; 
    background: #17a2b8; /* Color azul unificado */
    color: white; 
    text-decoration: none; 
    border-radius: var(--radius-md); 
    transition: all var(--transition-normal); 
    font-weight: bold; /* Texto en negrita */
    border: none; 
    cursor: pointer;
    display: inline-block; /* Asegura que se comporte como un bloque para padding/margin */
    user-select: none; /* Evita que el texto se seleccione al hacer clic */
}
/* Efecto al pasar el mouse sobre el botón */
.nav-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); background-color: #138496; }
/* Estilo del botón cuando está activo (módulo seleccionado) */
.nav-btn.active { background: var(--accent-primary); color: white; }

/* ========== MÓDULOS Y TARJETAS ========== */
/* Los módulos son las secciones que se cargan con AJAX */
.module { display: none; }
.module.active { display: block; }

/* 🚀 NUEVO: Estilos para los formularios que se muestran/ocultan con JS */
.collapsible-form { display: none; }
.collapsible-form.active { display: block; }

/* Las "tarjetas" son los contenedores blancos con sombra */
.card { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 25px; margin-bottom: 20px; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
.card h3 { color: var(--text-primary); margin-bottom: 20px; font-size: 1.4em; border-bottom: 2px solid var(--border-light); padding-bottom: 10px; }

/* ========== FORMULARIOS ========== */
/* Grilla para organizar campos de formulario en columnas */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.form-grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-container-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }

/* Grupo de formulario (etiqueta + campo de entrada) */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-secondary); }

/* Estilo para los campos de entrada (input, select, textarea) */
.form-group input, .form-group select, .form-group textarea { 
    width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); 
    transition: border-color var(--transition-normal); font-size: 14px; background: var(--bg-tertiary); color: var(--text-primary);
}
/* Efecto al hacer clic (focus) en un campo */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { 
    outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 0.2rem var(--accent-primary-transparent, rgba(0,123,255,.25)); 
}
.form-group textarea { resize: vertical; min-height: 80px; }

/* Texto de ayuda debajo de un campo de formulario */
.form-text {
    display: block;
    margin-top: 5px;
    color: var(--text-secondary);
}

/* Estilo para los checkboxes */
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.checkbox-group input[type="checkbox"] { width: auto; margin-right: 8px; }

/* Grupo de campo de entrada con un botón al lado (ej. para ver contraseña) */
.input-group {
    display: flex;
    align-items: center;
}
.input-group input {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}
.input-group .btn-icon {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    cursor: pointer;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background-color var(--transition-fast);
}
.input-group .btn-icon:hover { background-color: var(--border-color); }

/* Contenedor para mostrar totales calculados */
.total-display {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1em;
}

/* ========== BOTONES ========== */
/* Estilo base para todos los botones */
.btn { 
    padding: 12px 24px; 
    border: none; 
    border-radius: var(--radius-sm); 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: bold; /* Letras en negrita */
    transition: all var(--transition-normal); 
    color: white; /* Color de texto blanco por defecto */
    text-decoration: none; /* Para que los <a> se vean como botones */
    display: inline-block; /* Para que los <a> respeten padding y margin */
}

/* Estilo específico para el botón de la página de login */
.btn-login {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    padding: 10px 20px; /* Reducido */
    font-size: 16px;
    border-radius: 10px; /* Reducido */
    display: block;
    margin: 16px auto 0; /* Reducido margen superior */
    width: 90%; /* Ancho relativo */
    max-width: 260px; /* Reducido */
    height: 44px; /* Altura fija */
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}

/* Botones más pequeños para acciones secundarias o en tablas */
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Colores semánticos para botones de acción */
.btn-primary { background-color: var(--accent-primary); }
.btn-success { background-color: var(--accent-success); }
.btn-info { background-color: var(--accent-info); }

/* Mantenemos los colores semánticos para acciones importantes */
.btn-danger { background: var(--accent-danger); } /* Rojo para eliminar/peligro */

/* Para el botón "warning", el fondo amarillo necesita texto oscuro para buen contraste */
.btn-warning { 
    background: var(--accent-warning); 
    color: #111; /* Usamos un color oscuro fijo para garantizar el contraste */
}

/* Botón secundario (gris/claro) */
.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Efectos hover consistentes para todos los botones */
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-primary:hover { filter: brightness(90%); } /* Oscurece el color de acento primario */
.btn-info:hover { background-color: #138496; } /* Azul más oscuro */
.btn-success:hover { background-color: #1e7e34; } /* Verde más oscuro */
.btn-danger:hover { background-color: #c82333; } /* Rojo más oscuro */
.btn-warning:hover { background-color: #e0a800; } /* Amarillo más oscuro */
.btn-secondary:hover { background-color: var(--bg-hover); }

/* ========== ALERTAS Y BADGES (ETIQUETAS) ========== */
/* Alertas para mostrar mensajes de éxito o error */
.alert { padding: 15px; margin-bottom: 20px; border-radius: var(--radius-sm); }
.alert-success { 
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.alert-error { 
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.alert-info {
    background-color: var(--accent-info); 
    color: white; 
    border: 1px solid var(--accent-info);
}

/* Badges o etiquetas de estado (ej. "Activo", "Inactivo") */
.status-badge { 
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; 
    display: inline-block; text-align: center;
}
.status-activa { background: #d1eddd; color: #0f5132; }
.status-inactiva { background: #f8d7da; color: #721c24; }
.status-warning { background: #fff3cd; color: #856404; }

/* ========== TABLAS ========== */
.table-container { overflow-x: auto; } /* Permite scroll horizontal en tablas grandes */
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
th { background-color: var(--bg-tertiary); font-weight: 600; color: var(--text-secondary); }
tr:hover { background-color: var(--bg-tertiary); } /* Efecto al pasar el mouse sobre una fila */

/* 🚀 NUEVO: Estilo para resaltar filas de liquidaciones pendientes */
.fila-pendiente {
    background-color: #fffbe6 !important; /* Un amarillo pálido */
    font-weight: 600;
}

.fila-pendiente:hover {
    background-color: #fff6c9 !important; /* Un amarillo un poco más oscuro al pasar el mouse */
}

.fila-pendiente td {
    border-top: 1px solid #ffeeba;
    border-bottom: 1px solid #ffeeba;
}


/* ========== ESTADÍSTICAS (NO USADO ACTUALMENTE) ========== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background: var(--gradient-info); color: white; padding: 20px; border-radius: var(--radius-lg); text-align: center; }
.stat-card h4 { font-size: 2em; margin-bottom: 5px; }
.stat-card p { opacity: 0.9; }

/* ========== BREADCRUMBS (MIGAS DE PAN - NO USADO ACTUALMENTE) ========== */
.breadcrumbs { margin-bottom: 15px; font-size: 14px; color: var(--text-secondary); }
.breadcrumbs a { color: var(--accent-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ========== RESUMEN DE STOCK (NO USADO ACTUALMENTE) ========== */
.stock-summary { display: flex; gap: 30px; flex-wrap: wrap; }
.stock-item { font-size: 1.1em; display: flex; align-items: center; gap: 10px; }

/* ========== ESTILOS PÁGINA DE LOGIN (DISEÑO MODERNO) ========== */
.modern-login-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    background: linear-gradient(-45deg, #007bff, #0056b3, #667eea, #764ba2, #0056b3);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    position: relative;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 🚀 NUEVO: Contenedor principal para el contenido del login */
.login-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 80px 20px;
    min-height: calc(100vh - 60px);
}

/* Animación de las partículas */
@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Imagen del captcha */
.captcha-image {
    background: var(--gradient-primary, #0d6efd);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    min-width: 100px;
    text-align: center;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Contenedor del formulario de login */
.login-container {
    background: var(--bg-login-container);
    backdrop-filter: blur(20px); /* Efecto de vidrio esmerilado */
    border-radius: 12px; /* Bordes más compactos */
    padding: 20px 16px; /* Padding más compacto */
    width: 100%;
    max-width: 240px; /* Ancho más pequeño */
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.12),
        0 5px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 20px auto; /* Centrado horizontal */
    text-align: center; /* Centra todo el contenido interno */
    position: relative;
    z-index: 1; /* Asegura que esté por encima del fondo animado */
}

/* Encabezado del login (logo y título) */
.login-header { text-align: center; margin-bottom: 15px; }
.login-header .login-logo {
    width: 50px; /* Logo más pequeño */
    height: 50px;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    background: var(--text-login-header-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
}
.login-header p {
    font-size: 24px;
    font-weight: 700;
    background: var(--text-login-header-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.login-header small {
    color: #6b7280;
    font-weight: 500;
}

/* Contenedor del Captcha */
.captcha-container { 
    display: flex; 
    align-items: center; 
    gap: 8px; /* Reducido de 10px */
    margin-bottom: 16px; /* Reducido de 20px */
}
.captcha-image {
    background: var(--gradient-primary, #0d6efd);
    color: white;
    padding: 8px 12px; /* Reducido */
    border-radius: 8px; /* Reducido */
    font-size: 16px; /* Reducido */
    font-weight: bold;
    letter-spacing: 2px; /* Reducido */
    min-width: 100px; /* Reducido */
    text-align: center;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 40px; /* Altura fija */
    display: flex;
    align-items: center;
    justify-content: center;
}
.captcha-image:hover {
    transform: scale(1.05);
}
.captcha-input { 
    flex: 1; 
    text-align: center; 
    width: auto; 
    min-width: 70px; /* Reducido */
    padding: 8px 12px; /* Reducido */
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-tertiary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    height: 40px; /* Altura fija */
}
.refresh-captcha {
    background: none; border: none; font-size: 20px; cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: transform var(--transition-normal); color: var(--text-secondary);
}
.refresh-captcha:hover { transform: rotate(90deg); }

/* Inputs específicos del contenedor de login */
.login-container .form-group input {
    width: 100%;
    padding: 10px 12px; /* Reducido */
    border: 2px solid #e5e7eb;
    border-radius: 10px; /* Reducido de 12px */
    font-size: 14px;
    background: var(--bg-tertiary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    height: 40px; /* Altura fija para consistencia */
}
.login-container .form-group input:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ========== ESTILOS PANEL DE ADMINISTRACIÓN ========== */
.admin-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin: 20px auto;
    padding: 30px;
    max-width: 1600px;
}
.header-admin {
    background: var(--gradient-primary);
    color: white;
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 30px;
    text-align: center;
}
.logout-btn {
    background: var(--accent-danger);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}
.logout-btn:hover { opacity: 0.9; }

/* Pestañas (Tabs) en los paneles de administración */
.tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
}
.tab {
    padding: 15px 25px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all var(--transition-normal);
}
.tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.tab:hover {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Badges o etiquetas de colores */
.badge { 
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px; 
    font-weight: 600; 
    display: inline-block;
}
.badge-success { background: var(--accent-success); color: white; }
.badge-danger { background: var(--accent-danger); color: white; }
.badge-warning { background: var(--accent-warning); color: var(--text-primary); }
.badge-info { background: var(--accent-info); color: white; }
.badge-ingreso { background: var(--accent-success); color: white; }
.badge-gasto { background: var(--accent-danger); color: white; }
.badge-boleto { background: var(--accent-primary); color: white; opacity: 0.8; }
.badge-guia { background: var(--accent-warning); color: var(--text-primary); opacity: 0.8; }
.badge-manual { background: var(--bg-tertiary); color: var(--text-secondary); }


/* Sobrescribe el .user-info para el panel de admin para que sea una barra */
.admin-container .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-tertiary);
    padding: 15px;
    border-radius: var(--radius-md);
}

/* ========== MODALES (VENTANAS EMERGENTES) ========== */

/* Asegurar que los modales de Bootstrap 5 funcionen correctamente */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

.modal.show {
    display: block !important;
}

.modal-content {
    z-index: 1056 !important;
}

.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo en la pantalla */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es muy grande */
}

/* Contenido del modal */
.modal-content {
    background-color: var(--bg-secondary);
    margin: 5% auto;
    padding: 30px;
    border: 1px solid var(--border-color);
    width: 80%;
    max-width: 800px;
    border-radius: var(--radius-lg);
    position: relative;
    animation: slideDown 0.5s ease-out; /* Animación de entrada */
}

.modal-content.large {
    max-width: 800px;
}

/* Grilla para detalles dentro de un modal */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}
/* Botón para cerrar el modal (la 'X') */
.close-button {
    color: var(--text-secondary);
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Animación de entrada del modal */
@keyframes slideDown {
    from { top: -300px; opacity: 0; }
    to { top: 0; opacity: 1; }
}

/* ========== RESPONSIVE DESIGN (AJUSTES PARA MÓVILES) ========== */
@media (max-width: 768px) {
    body.modern-login-body {
        padding: 16px;
    }
    body.modern-login-body .login-container {
        padding: 32px 24px;
    }
    body.modern-login-body .theme-selector {
        top: 16px;
        right: 16px;
    }
    body.modern-login-body .captcha-container {
        flex-direction: column;
        gap: 16px;
    }
    body.modern-login-body .captcha-image {
        min-width: auto;
        width: 100%;
    }
}

/* ========== ESTILOS PARA DETALLE DE CAJA / TICKET (NO USADO ACTUALMENTE) ========== */
.container-print { max-width: 1200px; margin: 0 auto; padding: 20px; }
.header-print { background: var(--gradient-primary); color: white; padding: 25px; border-radius: var(--radius-lg); margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); }
.header-print h1 { font-size: 1.8em; margin: 0; }
.print-actions { display: flex; gap: 10px; }
.ticket { background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 25px; }
.ticket-header { background: var(--gradient-info); color: white; padding: 25px; text-align: center; }
.ticket-header h2 { font-size: 2em; margin-bottom: 10px; }
.ticket-header p { font-size: 1.1em; opacity: 0.9; margin: 5px 0; }
.ticket-section { padding: 25px; border-bottom: 1px solid var(--border-color); }
.ticket-section:last-child { border-bottom: none; }
.ticket-section h3 { color: var(--text-primary); margin-bottom: 20px; font-size: 1.3em; display: flex; align-items: center; gap: 10px; }
.resumen-table { width: 100%; border-collapse: collapse; font-size: 1.1em; }
.resumen-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-light); }
.resumen-table .text-right { text-align: right; font-weight: 600; }
.total-row { background: var(--bg-tertiary); font-weight: bold; font-size: 1.1em; }
.diferencia-positiva { color: #28a745; }
.diferencia-negativa { color: #dc3545; }
.diferencia-neutral { color: var(--text-primary); }
.detalle-movimientos { width: 100%; border-collapse: collapse; margin-top: 15px; }
.detalle-movimientos th, .detalle-movimientos td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
.detalle-movimientos th { background: var(--bg-tertiary); font-weight: 600; color: var(--text-primary); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; }
.detalle-movimientos tr:hover { background: var(--bg-tertiary); }
.movimiento-ingreso { color: #28a745; font-weight: 600; }
.movimiento-gasto { color: #dc3545; font-weight: 600; }
.ticket-footer { background: var(--bg-tertiary); padding: 20px; text-align: center; color: var(--text-secondary); font-size: 0.9em; }
.edit-form-section { display: none; margin-top: 20px; padding: 20px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.edit-form-section h4 { margin-bottom: 15px; color: var(--text-primary); }

/* Estilos para impresión (oculta botones, etc.) */
@media print {
    body { background: white; color: black; }
    .no-print { display: none !important; }
    .ticket { box-shadow: none; border: 1px solid #ccc; }
    .ticket-header { background: #f8f9fa !important; color: black !important; }
    .btn { display: none; }
    .container-print { max-width: none; padding: 10px; }
    .ticket-section { padding: 15px; }
    .detalle-movimientos th, .detalle-movimientos td { padding: 8px; font-size: 12px; }
}

/* ========== MENÚ DESPLEGABLE (DROPDOWN) ========== */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Contenido del menú (oculto por defecto) */
.nav-dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute; /* Posicionado relativo al contenedor .nav-dropdown */
    background-color: var(--bg-secondary); /* Fondo del tema */
    min-width: 240px; /* Ancho mínimo para que no se vea apretado */
    box-shadow: var(--shadow-hover); /* Sombra del tema */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    border-radius: var(--radius-md); /* Bordes redondeados consistentes */
    border: 1px solid var(--border-color);
    padding: 5px 0; /* Espacio vertical interno */
    top: 100%; /* Se posiciona justo debajo del botón */
    left: 0;
}

/* Enlaces dentro del menú */
.nav-dropdown-content a {
    color: var(--text-primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Hace que cada enlace ocupe una línea completa */
    font-size: 14px;
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown-content a:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
}

/* Al pasar el mouse sobre el contenedor, se muestra el contenido del dropdown */
.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* ========== SPINNER (INDICADOR DE CARGA) ========== */
/* Animación de rotación */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Estilo del spinner que se muestra en los botones al cargar */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    vertical-align: middle;
    margin-left: 5px;
}

/* ========== PIE DE PÁGINA (FOOTER) ========== */
.app-footer {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    background: var(--bg-secondary);
}
.app-footer p {
    margin: 3px 0;
}
.app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
}

/* Footer específico para el nuevo login (fijo al fondo) */
body.modern-login-body .app-footer,
body.modern-login-body .page-footer-fixed {
    background: linear-gradient(-45deg, rgba(0, 123, 255, 0.9), rgba(0, 86, 179, 0.9), rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9), rgba(0, 86, 179, 0.9));
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    color: var(--text-login-footer);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    padding: 10px; /* Reducido */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    font-size: 12px; /* Reducido */
}
body.modern-login-body .app-footer a,
body.modern-login-body .page-footer-fixed a {
    color: var(--text-login-footer-link);
    text-decoration: none;
    font-weight: 600;
}
body.modern-login-body .app-footer p,
body.modern-login-body .page-footer-fixed p {
    line-height: 1.6;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    margin: 3px 0;
}
body.modern-login-body .app-footer:hover p,
body.modern-login-body .page-footer-fixed:hover p {
    opacity: 1;
}

/* Estilo general para el hover de los enlaces del footer */
.app-footer a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Estilo para el ícono de WhatsApp */
.whatsapp-link svg {
    color: #25D366;
    transition: transform 0.2s ease-in-out;
}
.whatsapp-link:hover svg {
    transform: scale(1.2);
}

/* ========== PAGINACIÓN ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.pagination span {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Footer fijo para login y dashboard */
.page-footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    text-align: center !important;
    padding: 10px 20px;
    font-size: 12px;
    background: linear-gradient(-45deg, #17a2b8, #138496, #0d6efd, #0056b3);
    background-size: 400% 400%;
    animation: gradientFlow 20s ease infinite;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.page-footer-fixed a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}
.page-footer-fixed .footer-contact {
    margin-top: 5px;
}