/* =======================================================
   STYLE.CSS: DEFINICIÓN DE VARIABLES (MODO DUAL)
   ======================================================= */
   :root {
    /* --- Paleta de Colores Oscura (Valor por defecto) --- */
    --color-primary-bg: #1A1A1A;
    --color-secondary-bg: #2C2C2C;
    --color-card-bg: #3A3A3A;
    --color-text-light: #F0F0F0;
    --color-text-muted: #B0B0B0;
    --color-border-dark: #444444;
    --color-info: #17A2B8; /* Azul claro para información o botones de envío/refresco */
    --color-info-dark: #128194; /* Versión más oscura para hover */
    
    /* --- Paleta de Colores Clara (Nuevas variables) --- */
    --color-light-primary-bg: #F8F8F8;      /* Fondo principal claro */
    --color-light-secondary-bg: #FFFFFF;    /* Fondo de columnas/contenedores */
    --color-light-card-bg: #E8E8E8;         /* Fondo de tarjetas */
    --color-light-text-dark: #111111;       /* ⭐ TEXTO PRINCIPAL: NEGRO FUERTE ⭐ */
    --color-light-text-muted: #5A5A5A;      /* Texto secundario (gris oscuro) */
    --color-light-border-light: #CCCCCC;    /* Bordes claros */
    
    /* Colores Semánticos (Kanban - se mantienen igual para contraste) */
    --color-high-alert: #FF5252;     
    --color-medium-alert: #FFC107;
    --color-low-alert: #00BCD4;      /* Usaremos el azul para acentos */
    --color-success: #69F0AE;
    --color-historic: #35b678;
    --color-button-bg: #00BCD4;
}

/* =======================================================
   REGLAS DEL MODO CLARO (LIGHT MODE)
   ======================================================= */
   body.light-mode {
    background-color: var(--color-light-primary-bg);
    color: var(--color-light-text-dark); /* Texto principal ahora es oscuro */
}

/* 1. Títulos de Métrica, Sidebar y Columna (Señalamiento) */
body.light-mode .stats-sidebar h2,
body.light-mode .kitchen-command-sidebar h2,
body.light-mode .column-title {
    color: var(--color-light-text-dark) !important; /* ⭐ TÍTULOS EN NEGRO ⭐ */
    border-color: var(--color-light-border-light) !important;
}

/* 2. Valores de Métrica (Más fuertes) */
body.light-mode .stats-card h3 { 
    color: var(--color-light-text-muted); /* Etiquetas en gris oscuro */
}
body.light-mode .stats-card p { 
    color: var(--color-light-text-dark); /* ⭐ VALORES DE DATOS EN NEGRO ⭐ */
    font-weight: 700;
}

/* 3. Estilo de la Comanda de Cocina */
body.light-mode #kitchen-command-content {
    background-color: var(--color-light-card-bg); /* Fondo más claro */
    color: #4A4A4A; /* Texto oscuro/gris de comando */
    border: 1px dashed var(--color-light-border-light);
}

/* 4. Texto del Acordeón Desplegado (.order-detail) */
body.light-mode .order-detail {
    background-color: var(--color-light-card-bg); /* Fondo más claro */
    color: var(--color-light-text-dark); /* ⭐ TEXTO DEL MENSAJE DE PRODUCTOS EN NEGRO ⭐ */
    border: 1px solid var(--color-light-border-light);
}

/* 5. Asegurar que los textos de la tarjeta sean oscuros */
body.light-mode .order-time,
body.light-mode .order-client,
body.light-mode .order-info-line {
    color: var(--color-light-text-dark);
}

body.light-mode .main-header,
body.light-mode .stats-sidebar,
body.light-mode .kanban-column {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .order-card {
    background-color: var(--color-light-card-bg);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

body.light-mode .order-detail {
    background-color: #DEDEDE;
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .order-time,
body.light-mode .order-client,
body.light-mode .order-info-line {
    color: var(--color-light-text-dark);
}
body.light-mode .order-time i,
body.light-mode .order-info-line i {
    color: var(--color-low-alert);
}
body.light-mode .column-title {
    border-color: var(--color-light-border-light) !important;
}

/* Modales y Login en Modo Claro */
body.light-mode .modal-content,
body.light-mode .login-box {
    background-color: var(--color-light-secondary-bg);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
body.light-mode .login-box input {
    background-color: var(--color-light-card-bg);
    color: var(--color-light-text-dark);
    border-color: var(--color-light-border-light);
}

/* --- 1. Estilos Base y Tipografía --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    line-height: 1.5;
}

/* --- 2. Encabezado Principal --- */
.main-header {
    background-color: var(--color-secondary-bg);
    color: var(--color-text-light);
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--color-border-dark);
}

.main-header h1 {
    font-size: 1.9em; /* Ligeramente más grande */
    font-weight: 400; /* Menos delgado que 300 */
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 1em;
    font-weight: 300;
    color: var(--color-text-muted);
}

/* Display de información del usuario */
.user-info-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(76, 175, 80, 0.15));
    border: 1px solid rgba(0, 188, 212, 0.3);
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-light);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
    transition: all 0.3s ease;
}

.user-info-display:hover {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.25), rgba(76, 175, 80, 0.25));
    border-color: rgba(0, 188, 212, 0.5);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
    transform: translateY(-1px);
}

.user-info-display i {
    color: var(--color-low-alert);
    font-size: 1.2em;
}

.user-info-display .user-label {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9em;
}

.user-info-display .username-text {
    color: var(--color-low-alert);
    font-weight: 700;
    text-transform: capitalize;
}

/* Modo Claro */
body.light-mode .user-info-display {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.1), rgba(76, 175, 80, 0.1));
    border-color: rgba(0, 188, 212, 0.2);
    color: var(--color-light-text-dark);
}

body.light-mode .user-info-display:hover {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(76, 175, 80, 0.15));
    border-color: rgba(0, 188, 212, 0.3);
}

body.light-mode .user-info-display .user-label {
    color: var(--color-light-text-muted);
}

body.light-mode .user-info-display .username-text {
    color: var(--color-low-alert);
}

#refresh-button {
    background-color: var(--color-button-bg);
    color: var(--color-primary-bg);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 600;
    box-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
}

#refresh-button:hover {
    background-color: #0097A7;
}

/* --- 3. Contenedor Principal y Sidebar --- */
.dashboard-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    min-height: calc(100vh - 70px);
}

.kanban-panel {
    flex-grow: 1;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr); 
}

.stats-sidebar {
    width: 280px;
    min-width: 280px;
    background-color: var(--color-secondary-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    align-self: flex-start;
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
}

.stats-sidebar h2 {
    font-size: 1.4em;
    margin-bottom: 15px;
    color: var(--color-text-light);
    border-bottom: 1px dashed var(--color-border-dark);
    padding-bottom: 10px;
    flex-shrink: 0;
}

.stats-card {
    background-color: var(--color-card-bg);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-left: 5px solid var(--color-border-dark);
    flex-shrink: 0;
}

.stats-card h3 {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.stats-card p {
    font-size: 1.6em;
    font-weight: bold;
}

/* Estilos de alerta en la sidebar */
.stats-card.alert-low { border-left-color: var(--color-high-alert); }
.stats-card.alert-success { border-left-color: var(--color-success); }
.stats-card.alert-info { border-left-color: var(--color-low-alert); }


/* --- 4. Comanda de Cocina (Sidebar) --- */
.kitchen-command-sidebar {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-dark);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#kitchen-command-content {
    background-color: #222222;
    padding: 15px;
    border-radius: 5px;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.9em;
    overflow-y: auto;
    border: 1px dashed var(--color-medium-alert);
    color: #FFEB3B; /* Texto de comanda resaltado */
    flex: 1;
    min-height: 0;
    max-height: 100%;
}


/* --- 5. Columnas Kanban y Títulos --- */
.kanban-column {
    background-color: var(--color-secondary-bg);
    border-radius: 8px;
    padding: 15px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    height: fit-content;
}

.column-title {
    font-size: 1.4em;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 3px solid;
    text-transform: uppercase;
    font-weight: 700;
}

/* Colores de títulos por estado */
.title-alert-high { border-color: var(--color-high-alert); color: var(--color-high-alert); }
.title-alert-medium { border-color: var(--color-medium-alert); color: var(--color-medium-alert); }
.title-alert-low { border-color: var(--color-low-alert); color: var(--color-low-alert); }
.title-historic { border-color: var(--color-historic); color: var(--color-historic); }

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- 6. Tarjeta de Pedido (Order Card) --- */
.order-card {
    background-color: var(--color-card-bg);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border-left: 5px solid var(--color-border-dark);
}

.order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-border-dark);
}

.order-id {
    font-size: 1.3em;
    font-weight: 700; /* Más peso para el ID */
    color: var(--color-low-alert);
}

.order-time {
    font-size: 0.8em;
    color: var(--color-text-muted); /* Gris tenue */
    margin-bottom: 8px; /* Espacio antes de la información de cliente */
}

.order-info-line {
    font-size: 0.95em;
    padding: 2px 0;
    color: var(--color-text-light);
}
.order-time i,
.order-info-line i {
    width: 15px; /* Mantiene la alineación de los íconos */
    margin-right: 8px;
    color: var(--color-low-alert); /* Color de acento */
}
/* Estilo para el texto "Pago:" y "Entrega:" (si lo incluiste) */
.order-info-line span {
    font-weight: 600; /* Hace que la etiqueta sea ligeramente más fuerte */
}

.order-client {
    margin-top: 8px;
    font-size: 1.1em;
}

.order-client i {
    margin-right: 5px;
    color: var(--color-button-bg);
}

.order-detail {
    background-color: #4A4A4A;
    border-radius: 3px;
    padding: 8px;
    margin-top: 8px;
    margin-bottom: 10px;
    white-space: pre-wrap;
    font-size: 0.9em;
    border: 1px solid var(--color-border-dark);
    color: #EEEEEE;

    /* ⭐ MODIFICACIONES CLAVE AQUÍ: HABILITAR SCROLL INTERNO ⭐ */
    max-height: none; /* Limita la altura del mensaje a 150px */
    overflow-y: visible; /* Habilita la barra de desplazamiento solo en este recuadro */
    /* ----------------------------------------------------------- */
}

/* Estilo para el Cronómetro de Estado */
.status-chronometer {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-text-light); /* Texto principal claro */
    text-align: right;
}

.status-chronometer strong {
    font-weight: 700;
    color: var(--color-low-alert); /* Resalta el tiempo con el color de acento (Cyan) */
}

/* Asegurar el color en el modo claro */
body.light-mode .status-chronometer {
    color: var(--color-light-text-dark);
}
body.light-mode .status-chronometer strong {
    color: var(--color-low-alert);
}

.order-total {
    font-size: 1.5em;
    letter-spacing: 0.5px;
    font-weight: bold;
    color: var(--color-success); /* Total siempre resaltado */
    margin-top: 10px;
    text-align: right;
}

.order-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border-dark);
}

.action-btn {
    flex-grow: 1;
    padding: 10px 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s, transform 0.1s;
    font-weight: 600;
}

.action-btn:active {
    transform: translateY(1px);
}

/* Asegurar que el botón de notificaciones tenga el mismo tamaño que los otros */
#notification-settings-button {
    flex-grow: 1;
    padding: 10px 5px;
    font-size: 0.9em;
    white-space: nowrap;
    min-width: 0;
}

/* =======================================================
   ESTILOS: BOTÓN VOLVER AL MENÚ PRINCIPAL (Dashboard)
   ======================================================= */

   #back-to-main-menu-dashboard-button {
    /* Basamos el estilo en el color de información (Azul/Cyan) */
    background-color: var(--color-info); 
    color: var(--color-primary-bg); /* Texto oscuro (negro) para buen contraste */
    
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 700; /* Lo hacemos fuerte para que se vea como botón principal */
    
    /* Pequeña sombra para que destaque en el fondo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); 
    transition: background-color 0.2s, box-shadow 0.2s;
}

#back-to-main-menu-dashboard-button:hover {
    background-color: var(--color-info-dark); /* Azul oscuro al pasar el ratón */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* 🌙 Modo Claro */
body.light-mode #back-to-main-menu-dashboard-button {
    color: var(--color-light-text-dark); /* Aseguramos texto negro en modo claro */
    /* El background-color: var(--color-info); se mantiene (el azul es un color de acento) */
}

/* Estilos de botones por acción/estado */
.btn-start { background-color: var(--color-medium-alert); color: var(--color-primary-bg); }
.btn-send { background-color: var(--color-low-alert); color: var(--color-primary-bg); }
.btn-deliver { background-color: var(--color-success); color: var(--color-primary-bg); }
.btn-cancel { background-color: var(--color-historic); color: var(--color-text-light); }
.btn-print { background-color: #34495E; color: var(--color-text-light); }

.btn-start:hover { 
    background-color: #FFA000; /* Naranja más oscuro */
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}
.btn-send:hover { 
    background-color: #00BCD4; /* Cyan más oscuro */
    box-shadow: 0 0 8px rgba(77, 208, 225, 0.5);
}
.btn-deliver:hover { 
    background-color: #00E676; /* Verde más oscuro */
    box-shadow: 0 0 8px rgba(105, 240, 174, 0.5);
}
.btn-cancel:hover { 
    background-color: #5A5A5A;
}
.btn-print:hover { 
    background-color: #243447;
}


/* --- 7. Estilos para la Alerta de Nuevo Pedido --- */
.new-order-flash {
    animation: flash-red 0.5s infinite alternate;
    box-shadow: 0 0 20px var(--color-high-alert);
}

@keyframes flash-red {
    from {
        border-color: var(--color-high-alert);
        background-color: #401010;
    }
    to {
        border-color: red;
        background-color: #501515;
    }
}

/* --- 8. Responsive Design (Manteniendo la estructura anterior) --- */
@media (max-width: 1200px) {
    .kanban-panel {
        grid-template-columns: repeat(2, 1fr); 
    }
    .stats-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 20px;
    }
    .dashboard-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .kanban-panel {
        grid-template-columns: unset;
        display: flex;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .kanban-column {
        min-width: 300px;
    }

    .main-header {
        flex-direction: column;
        gap: 10px;
    }
}

/* --- 9. Estilos de Impresión (Reutilizamos la lógica del ticket) --- */
@media print {
    body * {
        visibility: hidden;
    }
    
    .ticket-to-print, .ticket-to-print * {
        visibility: visible;
        font-family: 'Courier New', monospace !important;
        color: #000 !important;
    }

    .ticket-to-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 58mm !important;
        margin: 0 !important;
        padding: 5mm; 
        box-sizing: border-box;
        height: auto; 
        overflow: hidden;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto; 
        overflow: hidden;
    }
    
    .ticket-to-print .order-header,
    .ticket-to-print .order-client,
    .ticket-to-print .order-total {
        font-size: 10px;
    }

    .ticket-to-print .order-detail {
        font-size: 9px;
        border-top: 1px dashed #000;
        border-bottom: 1px dashed #000;
        padding: 5px 0;
    }

    .ticket-to-print .order-actions {
        display: none !important;
    }
}

/* =======================================================
   ESTILOS PARA ACORDEÓN DE DETALLE DENTRO DE LA TARJETA KANBAN
   ======================================================= */

/* 1. Ocultar el contenido de detalle (Mensaje y Botones) por defecto */
.card-detail-content {
    /* Eliminamos max-height, overflow y todas las transiciones */
    height: auto; /* El contenido define su propia altura */
    display: none; /* ⭐ CRÍTICO: Usamos display: none para ocultar INSTANTÁNEAMENTE ⭐ */
    
    border-top: 1px dashed var(--color-border-dark);
    margin-top: 10px;
    padding-top: 0;
    opacity: 0; /* Lo mantenemos, aunque display: none lo anula */
    visibility: hidden;
}

/* 2. Estado Abierto (Añadido por JS) */
.card-detail-content.expanded {
    display: block; /* ⭐ CRÍTICO: Usamos display: block para mostrar INSTANTÁNEAMENTE ⭐ */
    
    /* Restauramos la visibilidad y opacidad */
    visibility: visible;
    opacity: 1;
    padding-top: 10px;
    /* NO NECESITAMOS max-height */
   
}

.card-detail-content .order-actions {
    display: flex !important; /* <--- CRÍTICO: Forzar display flex para mostrar los botones */
    margin-top: 15px; 
    gap: 8px;
    padding-top: 0;
    border-top: none; 
}

/* 4. Asegurar que el contenido del detalle (mensaje) sea visible */
.card-detail-content .order-detail {
    /* Si tenías alguna regla display: none oculta, asegúrate de que no afecte aquí */
    visibility: inherit; 
    display: block; 
}

/* 3. Estilos específicos para los campos que siempre se muestran */
.order-master-info {
    cursor: pointer; /* Indica que la zona es clickeable */
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.order-master-info:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Ligero feedback visual */
    border-radius: 4px;
}

/* 4. Asegurar que los botones estén dentro del contenido de detalle */
.order-actions {
    /* CRÍTICO: Asegurar que se muestre, sin importar el estado inicial */
    display: flex; 
    justify-content: space-between;
    gap: 8px; /* Espacio entre botones */
    margin-top: 15px; /* Margen para separarlo del detalle del pedido */
    padding-top: 0; 
    border-top: none; /* Ya no necesitamos el borde aquí, lo maneja el contenedor del detalle */
}

/* =======================================================
   ESTILOS DE MODAL (INSTRUCCIONES)
   ======================================================= */

/* Estilo del Botón de Ayuda */
#help-button {
    background-color: #6C757D; /* Gris suave */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 600;
}
#help-button:hover {
    background-color: #5A6268;
    box-shadow: 0 0 5px rgba(108, 117, 125, 0.7);
}


/* Fondo oscuro de la ventana modal */
.modal-overlay {
    display: none; /* Oculto por defecto por JavaScript */
    position: fixed;
    z-index: 1000; /* Asegura que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Oscurece el fondo */
}

/* Contenido del modal */
.modal-content {
    background-color: var(--color-secondary-bg);
    margin: 10% auto; /* 10% desde arriba y centrado */
    padding: 30px;
    border: 1px solid var(--color-border-dark);
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    color: var(--color-text-light);
}

.modal-content h2 {
    color: var(--color-button-bg);
    margin-bottom: 15px;
}

.modal-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--color-low-alert);
}

.modal-content ul {
    list-style-type: none;
    padding-left: 20px;
}

.modal-content li {
    margin-bottom: 8px;
    border-left: 3px solid var(--color-border-dark);
    padding-left: 10px;
}

/* Botón de cierre (X) */
.close-button {
    color: var(--color-text-muted);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.close-button:hover,
.close-button:focus {
    color: var(--color-high-alert);
    text-decoration: none;
    transform: scale(1.2);
    text-shadow: 0 0 8px var(--color-high-alert);
}

.close-button:active {
    transform: scale(1.1);
}

/* =======================================================
   ESTILOS DE LOADER Y SPINNER
   ======================================================= */

.loading-msg {
    text-align: center;
    padding: 30px;
    color: var(--color-text-muted);
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.loading-msg i.fa-spinner {
    animation: spin-loader 1s linear infinite !important;
    color: var(--color-low-alert);
    font-size: 1.3em;
    display: inline-block;
}

/* Asegurar que FontAwesome fa-spin funcione */
.fa-spin,
.fa-spinner.fa-spin,
.loading-msg .fa-spinner.fa-spin {
    animation: spin-loader 1s linear infinite !important;
    display: inline-block;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Spinner personalizado mejorado con animación forzada */
@keyframes spin-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Asegurar que el spinner tenga animación incluso si fa-spin no funciona */
.loading-msg i.fa-spinner:not(.fa-spin) {
    animation: spin-loader 1s linear infinite !important;
}

/* Modo claro para loader */
body.light-mode .loading-msg {
    color: var(--color-light-text-dark);
}

body.light-mode .loading-msg i.fa-spinner {
    color: var(--color-low-alert);
}

/* =======================================================
   ESTILOS: LOADER DE TABLAS (igual que botón de login)
   ======================================================= */

.table-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.1em;
    font-weight: 500;
}

.table-loading-container i.fa-spinner {
    animation: spin-loader 1s linear infinite !important;
    color: var(--color-low-alert);
    font-size: 1.3em;
    display: inline-block;
    transform-origin: center;
}

/* Asegurar que el spinner tenga animación */
.table-loading-container .fa-spin,
.table-loading-container .fa-spinner.fa-spin,
.table-loading-container i.fa-spinner:not(.fa-spin) {
    animation: spin-loader 1s linear infinite !important;
    display: inline-block;
    transform-origin: center;
}

/* Modo claro para loader de tablas */
body.light-mode .table-loading-container {
    color: var(--color-light-text-dark);
}

body.light-mode .table-loading-container i.fa-spinner {
    color: var(--color-low-alert);
}

/* =======================================================
   ESTILOS DE LOGIN
   ======================================================= */

/* Ocultar el Dashboard completo por defecto */
.dashboard-container, .main-header {
    opacity: 0;
    transition: opacity 0.5s;
}
/* Clase para mostrar el dashboard después del login */
.logged-in .dashboard-container, .logged-in .main-header {
    opacity: 1;
}


/* Superposición de Login */
.login-overlay {
    /* Mantiene el fondo fijo y a pantalla completa */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(55, 65, 81, 0.95) 100%);
    backdrop-filter: blur(5px);
    
    /* ⭐ CLAVE: QUITAR FLEX/GRID para que la posición absoluta funcione sin interferencia ⭐ */
    display: block; 
    
    z-index: 1000;
    transition: opacity 0.5s ease;
}

.login-box {
    /* ⭐ CENTRADO ABSOLUTO EN PANTALLA ⭐ */
    position: absolute; 
    top: 50%; /* Mover 50% desde arriba */
    left: 50%; /* Mover 50% desde la izquierda */
    transform: translate(-50%, -50%); /* Ajustar hacia atrás el 50% de su propio tamaño */
    
    /* Propiedades de estilo */
    background-color: var(--color-secondary-bg); 
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 90%;
    max-width: 400px;
    border: 1px solid var(--color-border);
    animation: fadeIn 0.8s ease-out;
    
    z-index: 1002; 
}

    .login-box h2 {
        color: var(--color-primary);
        margin-bottom: 5px;
        font-size: 2em;
        text-shadow: 0 0 5px var(--color-secondary);
    }
    
    .login-box p {
        color: var(--color-text-secondary);
        margin-bottom: 25px;
    }

    .input-group {
    position: relative; /* Contenedor para el posicionamiento del ícono */
    margin-bottom: 15px;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 15px; /* Posición del ícono */
    transform: translateY(-50%);
    color: var(--color-text-secondary); /* Color gris/sutil para el ícono */
    font-size: 1.1em;
    z-index: 2; /* Asegura que esté sobre el input */
}

.login-box input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid var(--color-border-dark);
    border-radius: 5px;
    background-color: var(--color-card-bg);
    color: var(--color-text-light);
    outline: none;
    transition: border-color 0.2s;
}

.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    padding: 12px 15px 12px 45px; /* ⭐ Aumentar el padding izquierdo para el ícono ⭐ */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-background-input);
    color: var(--color-text-primary);
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Efecto de foco mejorado (NEON FOCUS) - Opcional: cambiar color del ícono al enfocar */
.input-group:focus-within .input-icon {
    color: var(--color-secondary); /* Resalta el ícono al enfocar */
}

/* Efecto de foco mejorado (NEON FOCUS) */
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
    border-color: var(--color-secondary); /* Borde rosa al enfocar */
    box-shadow: 0 0 10px var(--color-secondary-low-alert); 
}

/* --- ESTILO DEL BOTÓN ACCEDER (AZUL) --- */

.login-box #login-button {
    width: 100%;
    /* Utilizamos el color azul de acción, que típicamente es var(--color-info) o similar */
    background-color: var(--color-info); /* ⭐ COLOR AZUL DEL DASHBOARD ⭐ */
    color: var(--color-text-light);
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: 10px;
}

.login-box #login-button:hover {
    background-color: var(--color-info-dark); /* Un azul un poco más oscuro al pasar el ratón */
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.login-box .error-message {
    color: var(--color-high-alert); 
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--color-high-alert);
    border-radius: 8px;
    background-color: rgba(255, 0, 0, 0.1);
}

/* Animación de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* ⭐ ANTES: transform: translateY(-20px); ⭐ */
        /* ⭐ AHORA: Debemos incluir el centrado completo (-50%, -50%) en el FROM ⭐ */
        transform: translate(-50%, -70%); /* Iniciar 20% más arriba del centro */
    }
    to {
        opacity: 1;
        /* La posición final es el centro de la pantalla */
        transform: translate(-50%, -50%); 
    }
}

.login-box input:focus {
    border-color: var(--color-button-bg);
}

.error-message {
    color: var(--color-high-alert);
    background-color: #401010;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

#login-button {
    width: 100%;
    padding: 12px;
    background-color: var(--color-button-bg);
    color: var(--color-primary-bg);
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.2s;
}

#login-button:hover {
    background-color: #0097A7;
}

/* =======================================================
   ESTILOS DEL SWITCH DE TEMA
   ======================================================= */
   .theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 15px;
    font-size: 0.9em;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 48px;
    margin-right: 8px;
}

.theme-switch input {
    display: none;
}

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

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 16px;
}

input:checked + .slider {
    background-color: var(--color-button-bg);
}

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

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

.slider.round:before {
    border-radius: 50%;
}
body.light-mode .theme-mode-label {
    color: var(--color-light-text-dark);
}

/* =======================================================
   ESTILOS DE LA BARRA DE FILTROS
   ======================================================= */
   .filters-bar {
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    padding: 20px;
    margin: 0 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--color-border-dark);
    border-radius: 0 0 12px 12px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.filters-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

.filters-bar label {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filters-bar label i {
    color: var(--color-low-alert);
    font-size: 1em;
}

.filters-bar input,
.filters-bar select {
    padding: 10px 14px;
    border: 2px solid var(--color-border-dark);
    border-radius: 6px;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-size: 0.95em;
    transition: all 0.3s ease;
    outline: none;
}

.filters-bar input:focus,
.filters-bar select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    transform: translateY(-1px);
}

.filters-bar input:hover,
.filters-bar select:hover {
    border-color: var(--color-low-alert);
}

#clear-filters-button {
    background-color: #6C757D;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 600;
}
#clear-filters-button:hover {
    background-color: #5A6268;
}

/* Modo Claro: Ajustes para la barra de filtros */
body.light-mode .filters-bar {
    background: linear-gradient(135deg, var(--color-light-card-bg) 0%, var(--color-light-secondary-bg) 100%);
    border-bottom: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .filters-bar::before {
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

body.light-mode .filters-bar label {
    color: var(--color-light-text-dark);
}

body.light-mode .filters-bar input,
body.light-mode .filters-bar select {
    border: 2px solid var(--color-light-border-light);
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
}

body.light-mode .filters-bar input:focus,
body.light-mode .filters-bar select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

/* =======================================================
   ESTILO DE ALERTA DE TIEMPO EXCEDIDO (OVERDUE)
   ======================================================= */
   .order-card.overdue-alert {
    animation: flash-overdue 1s infinite alternate;
    border: 3px solid var(--color-high-alert) !important;
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.7);
}

.order-card.overdue-alert .order-master-info {
    font-weight: bold;
}

/* Animación de parpadeo sutil para el fondo */
@keyframes flash-overdue {
    from { 
        background-color: var(--color-card-bg); /* Fondo normal */
    }
    to { 
        background-color: #502020; /* Fondo rojo oscuro sutil */
    }
}

/* Ajustes para Modo Claro */
body.light-mode .order-card.overdue-alert {
    background-color: #FFEEEE; /* Fondo rojo muy claro */
    border: 3px solid var(--color-high-alert) !important;
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.4);
}
@keyframes flash-overdue {
    from { background-color: var(--color-light-card-bg); }
    to { background-color: #FFCCCC; } /* Parpadeo más claro */
}

/* =======================================================
   ESTILOS DEL MÓDULO DE CONFIGURACIÓN
   ======================================================= */

/* Contenedor principal de la vista de configuración */
#config-container {
    max-width: 900px; /* Mantener 900px para la configuración */
    margin: 50px auto; /* Centrado horizontalmente */
    padding: 30px;
    background-color: var(--color-secondary-bg); 
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

#config-container h2 {
    font-size: 1.8em;
    color: var(--color-low-alert);
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

#config-table-container {
    margin-top: 20px;
    overflow-x: auto;
}

/* --- Tabla de Parámetros --- */
.config-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    font-size: 0.95em;
    background-color: var(--color-card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.config-table th, .config-table td {
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-dark);
    transition: all 0.2s;
}

.config-table th {
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    color: var(--color-text-light);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-low-alert);
    position: sticky;
    top: 0;
    z-index: 10;
}

.config-table td {
    color: var(--color-text-light);
    background-color: var(--color-secondary-bg);
}

.config-table tbody tr {
    transition: all 0.2s;
}

.config-table tbody tr:hover {
    background-color: var(--color-card-bg);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
}

.config-table tr:nth-child(even) td {
    background-color: #313131;
}

.config-table tbody tr:last-child td {
    border-bottom: none;
}

/* Estilo para el campo de VALOR editable */
.config-table .value-cell {
    width: 25%; /* Ancho fijo para el campo de valor */
}

.config-table .value-cell .display-value {
    word-break: break-word;
    color: var(--color-text-muted);
    font-style: italic;
}

.config-table .value-cell input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--color-border-dark);
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s;
    font-size: 0.95em;
}

.config-table .value-cell input[type="text"]:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2), 0 0 10px rgba(0, 188, 212, 0.3);
    outline: none;
    background-color: var(--color-secondary-bg);
}

/* Estilo para botones de acción en la tabla */
.config-table .action-cell {
    width: 140px;
    text-align: center;
}

.config-table .action-cell button {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 700;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    pointer-events: auto;
    user-select: none;
}

.config-table .btn-edit-config {
    background-color: var(--color-low-alert);
    color: var(--color-primary-bg);
}

.config-table .btn-edit-config:hover {
    background-color: #00a8b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 188, 212, 0.4);
}

.config-table .btn-edit-config:active {
    transform: translateY(0);
}

.config-table .btn-edit-config:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.config-table .btn-edit {
    background-color: var(--color-low-alert);
    color: var(--color-primary-bg);
}

.config-table .btn-edit:hover {
    background-color: #00a8b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 188, 212, 0.4);
}

.config-table .btn-update {
    background-color: var(--color-success);
    color: var(--color-primary-bg);
}

.config-table .btn-update:hover {
    background-color: #55d88a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(105, 240, 174, 0.4);
}

/* Estilos para el botón de Volver */
.config-actions {
    text-align: right;
    margin-top: 30px;
}
#back-to-dashboard-button {
    padding: 10px 20px;
}

/* --- REGLAS DEL MODO CLARO PARA CONFIGURACIÓN --- */
body.light-mode #config-container {
    background-color: var(--color-light-secondary-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-light-border-light);
}
body.light-mode .config-table {
    background-color: var(--color-light-card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.light-mode .config-table th {
    background: linear-gradient(135deg, var(--color-light-card-bg) 0%, var(--color-light-secondary-bg) 100%);
    color: var(--color-light-text-dark);
    border-bottom-color: var(--color-low-alert);
}

body.light-mode .config-table td {
    color: var(--color-light-text-dark);
    background-color: var(--color-light-secondary-bg);
    border-bottom-color: var(--color-light-border-light);
}

body.light-mode .config-table tbody tr:hover {
    background-color: var(--color-light-card-bg);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.15);
}

body.light-mode .config-table tr:nth-child(even) td {
    background-color: var(--color-light-primary-bg);
}

body.light-mode .config-table .value-cell input[type="text"] {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border: 2px solid var(--color-light-border-light);
}

body.light-mode .config-table .value-cell input[type="text"]:focus {
    background-color: var(--color-light-card-bg);
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15), 0 0 10px rgba(0, 188, 212, 0.2);
}

body.light-mode .config-table .btn-edit,
body.light-mode .config-table .btn-edit-config {
    color: var(--color-light-text-dark);
}

/* Puedes dar un color distintivo al nuevo botón de Menú */
#menu-config-button {
    background-color: var(--color-medium-alert); /* Naranja/Ámbar */
    color: var(--color-primary-bg); /* O texto oscuro */
    transition: background-color 0.2s;
}
#menu-config-button:hover {
    background-color: #f5a623; 
}
body.light-mode #menu-config-button {
     color: var(--color-light-text-dark);
}

/* =======================================================
   REGLA DE CONSISTENCIA PARA TÍTULOS DE MÓDULOS
   ======================================================= */
/* Aplicamos el color de acento directamente a los títulos de ambos módulos */
/* ⭐ Módulo de Menús (NUEVO - 1000px de ancho) ⭐ */
#menu-container {
    max-width: 1000px; /* Ligeramente más ancho para la tabla de menú */
    margin: 50px auto; /* Centrado horizontalmente */
    padding: 30px;
    background-color: var(--color-secondary-bg); 
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}


#config-container h2,
#menu-container h2 {
    color: var(--color-low-alert) !important; 
    border-bottom: 2px solid var(--color-border-dark); /* Reafirmamos el borde */
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Modo Claro Ajustes para ambos contenedores */
body.light-mode #config-container,
body.light-mode #menu-container {
    background-color: var(--color-light-secondary-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-light-border-light);
}

/* Ajuste para el icono */
#menu-container h2 i {
    margin-right: 10px;
}

body.light-mode #config-container h2,
body.light-mode #menu-container h2 {
    border-color: var(--color-light-border-light) !important; 
}

/* =======================================================
   ESTILOS: MENÚ PRINCIPAL NEON / CYBERPUNK
   ======================================================= */

/* Oculta los elementos específicos del Dashboard cuando el Menú está activo */
.menu-grid-container #dashboard-container,
.menu-grid-container #global-filters-bar {
    display: none !important;
}

/* Contenedor del Menú Principal */
#main-menu-container {
    /* Quitamos el 'position: relative' que usamos antes para el footer, 
       y aseguramos el centrado de los hijos (el grid y el footer) */
    display: flex; /* Usamos flex para apilar el grid y el footer verticalmente */
    flex-direction: column;
    align-items: center; /* Centra horizontalmente a todos los hijos (grid y footer) */
    
    gap: 40px; /* Separación vertical entre el grid y el footer */
    padding: 80px 20px 80px 20px; 
    min-height: calc(100vh - 70px);
    background-color: var(--color-primary-bg);
}

.menu-footer {
    /* ⭐ CLAVE: Eliminar el posicionamiento absoluto o fijo ⭐ */
    position: static; 
    
    /* Le damos un ancho que respete el max-width de la rejilla para que se vea bien */
    width: 100%;
    max-width: 1200px; 
    margin-top: 20px; 
    text-align: center;
    font-size: 0.9em;
    
    /* ⭐ RESTAURACIÓN DE COLOR BASE ⭐ */
    color: var(--color-text-muted); 
    
    padding: 0 40px; 
    box-sizing: border-box;
}

.menu-footer a {
    color: var(--color-low-alert); /* Usamos el Cyan/Azul de acento (low-alert o info) */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.menu-footer a:hover {
    color: var(--color-primary); /* Color de brillo Neon en hover */
    text-decoration: underline;
}

/* 🌙 MODO CLARO: Aseguramos el color del texto y enlace */

body.light-mode .menu-footer {
    color: var(--color-light-text-muted); /* Gris oscuro en modo claro */
}

body.light-mode .menu-footer a {
    color: var(--color-info); /* Azul de acento fuerte */
}

body.light-mode .menu-footer a:hover {
    color: var(--color-low-alert);
}

.menu-cards-grid {
    display: grid;
    /* ⭐ CLAVE: Definir 3 columnas de ancho igual ⭐ */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas */
    max-width: 1200px; /* Límite máximo para que no se extienda demasiado */
    width: 100%;
    margin: 0 auto;
    margin-bottom: 0;
    
    /* Asegurar que las tarjetas estén alineadas en el centro del main-menu-container */
    justify-items: center;
}

/* Header y Footer en el modo Menú */
#global-header {
    background-color: #0d0d0d; /* Negro más intenso para el fondo cyberpunk */
    border-bottom-color: #222222;
}

#global-header h1 {
    color: #f0f0f0 !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
}

/* Tarjeta del Menú */
.menu-card {
    background-color: var(--color-secondary-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 30px 20px; /* Reducimos el padding vertical, aumentamos horizontal */
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    
    /* Aseguramos que la tarjeta ocupe el espacio de la rejilla */
    width: 100%; 
    
    /* ⭐ CLAVE: Definir una altura MÍNIMA y usar FLEX para centrar el contenido ⭐ */
    min-height: 280px; /* Asegura espacio para 4 líneas de texto + icono */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente los elementos de la tarjeta */
    align-items: center;
}

.menu-card:hover {
    transform: scale(1.03);
    border-color: rgba(255, 255, 255, 0.4);
}

.menu-card h3 {
    font-size: 1.5em;
    margin-top: 15px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.menu-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: 10px;
    /* ⭐ CLAVE: Aseguramos que el texto no se salga ⭐ */
    word-wrap: break-word; 
    overflow-wrap: break-word;
    max-width: 100%;
}

.menu-icon {
    font-size: 4em;
    margin-bottom: 10px;
}

/* --- Colores Neon y Efectos de Brillo --- */

/* Neon Azul (Gestión de Pedidos) */
.menu-card.neon-blue {
    color: #00dfff;
    box-shadow: 0 0 15px #00dfff;
}
.menu-card.neon-blue:hover {
    box-shadow: 0 0 30px #00dfff;
    border-color: #00dfff;
}
.menu-card.neon-blue .menu-icon {
    text-shadow: 0 0 10px #00dfff;
}

/* Neon Rosa/Pink (Gestión de Menús) */
.menu-card.neon-pink {
    color: #ff0099;
    box-shadow: 0 0 15px #ff0099;
}
.menu-card.neon-pink:hover {
    box-shadow: 0 0 30px #ff0099;
    border-color: #ff0099;
}
.menu-card.neon-pink .menu-icon {
    text-shadow: 0 0 10px #ff0099;
}

/* Neon Verde/Cyan (Configuración) */
.menu-card.neon-green {
    color: #55ff77;
    box-shadow: 0 0 15px #55ff77;
}

/* Neon Cyan (Gestión de Usuarios) */
.menu-card.neon-cyan {
    color: #00ffff;
    box-shadow: 0 0 15px #00ffff;
}
.menu-card.neon-cyan:hover {
    box-shadow: 0 0 30px #00ffff;
    border-color: #00ffff;
}
.menu-card.neon-cyan .menu-icon {
    text-shadow: 0 0 10px #00ffff;
}

.menu-card.neon-green:hover {
    box-shadow: 0 0 30px #55ff77;
    border-color: #55ff77;
}
.menu-card.neon-green .menu-icon {
    text-shadow: 0 0 10px #55ff77;
}

.menu-card.neon-red {
    color: #FF5252; /* High Alert Color */
    box-shadow: 0 0 15px #FF5252;
}
.menu-card.neon-red:hover {
    box-shadow: 0 0 30px #FF5252;
    border-color: #FF5252;
}
.menu-card.neon-red .menu-icon {
    text-shadow: 0 0 10px #FF5252;
}

/* Neon Amarillo (Call Center) */
.menu-card.neon-yellow {
    color: #FFEB3B; /* Amarillo brillante */
    box-shadow: 0 0 15px #FFEB3B;
}
.menu-card.neon-yellow:hover {
    box-shadow: 0 0 30px #FFEB3B;
    border-color: #FFEB3B;
}
.menu-card.neon-yellow .menu-icon {
    text-shadow: 0 0 10px #FFEB3B;
}

/* Neon Púrpura (Asistencia) */
.menu-card.neon-purple {
    color: #9C27B0; /* Púrpura vibrante */
    box-shadow: 0 0 15px #9C27B0;
}
.menu-card.neon-purple:hover {
    box-shadow: 0 0 30px #9C27B0;
    border-color: #9C27B0;
}
.menu-card.neon-purple .menu-icon {
    text-shadow: 0 0 10px #9C27B0;
}

/* Neon Cyan (Gestión de Usuarios) */
.menu-card.neon-cyan {
    color: #00ffff;
    box-shadow: 0 0 15px #00ffff;
}
.menu-card.neon-cyan:hover {
    box-shadow: 0 0 30px #00ffff;
    border-color: #00ffff;
}
.menu-card.neon-cyan .menu-icon {
    text-shadow: 0 0 10px #00ffff;
}

/* Modo Claro: Desactivar los efectos Neon y usar colores sólidos */
body.light-mode #main-menu-container {
    background-color: var(--color-light-primary-bg);
}
body.light-mode .menu-card {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-light-border-light);
}
body.light-mode .menu-card:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: var(--color-button-bg);
}
body.light-mode .menu-card.neon-blue,
body.light-mode .menu-card.neon-pink,
body.light-mode .menu-card.neon-green {
    color: var(--color-button-bg); /* Color de acento */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
body.light-mode .menu-icon {
    text-shadow: none;
}

body.light-mode .menu-card.neon-red,
body.light-mode .menu-card.neon-yellow,
body.light-mode .menu-card.neon-purple {
    /* Usamos el color de acento INFO (azul/cyan) en modo claro para que no se vean demasiado fuertes */
    color: var(--color-info); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =======================================================
   ESTILOS: FORMULARIO Y MODAL DE EDICIÓN (Menú y Config)
   ======================================================= */

/* General: Fondo del Modal y Contenido */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: linear-gradient(135deg, var(--color-secondary-bg) 0%, var(--color-card-bg) 100%);
    color: var(--color-text-light);
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 188, 212, 0.3);
    border-radius: 16px;
    padding: 40px;
    max-width: 90%;
    width: 650px; 
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-content.large-modal {
    width: 800px;
    padding: 30px 30px 20px 30px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Encabezado del Modal */
.modal-content h2 {
    color: var(--color-low-alert); 
    border-bottom: 3px solid var(--color-low-alert);
    padding-bottom: 12px;
    margin-bottom: 20px;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

.modal-content h2 i {
    font-size: 1.2em;
}

.modal-content h2 span {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 0.9em;
}

/* ⭐ SOLUCIÓN DEFINITIVA: USANDO FLEXBOX EN LA FORMA ⭐ */

#menu-item-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 25px;
    margin-bottom: 25px;
}

/* 1. Estilos y Separación del Label (Ahora es el CONTENEDOR del campo) */
.modal-content label {
    display: flex; 
    flex-direction: column;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color-low-alert);
    padding-top: 0;
    margin-bottom: 10px;
    width: calc(50% - 12.5px);
    position: relative;
}

.modal-content label::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-low-alert), transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-content label:focus-within::before {
    opacity: 1;
}

/* Campos de ANCHO COMPLETO */
.modal-content label.full-width-field {
    width: 100%;
}


/* 2. Estilos de Input/Select/Textarea */
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--color-border-dark);
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s;
    margin-top: 6px;
    margin-bottom: 0;
    font-family: inherit;
}

.modal-content input[type="text"]:not(:read-only),
.modal-content input[type="number"]:not(:read-only),
.modal-content textarea:not(:read-only),
.modal-content select {
    border-color: var(--color-border-dark);
}

.modal-content input[type="text"]:read-only {
    background-color: var(--color-card-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.modal-content textarea:read-only {
    background-color: var(--color-card-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Textarea para descripción y opciones */
.modal-content textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
    font-family: inherit;
}

/* Select mejorado */
.modal-content select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300BCD4' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

/* Foco del input */
.modal-content input:focus:not(:read-only),
.modal-content textarea:focus,
.modal-content select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2), 0 0 15px rgba(0, 188, 212, 0.3);
    outline: none;
    background-color: var(--color-secondary-bg);
}

/* Estilos de los botones dentro del modal */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 0;
    border-top: 2px solid var(--color-border-dark);
    clear: both;
    position: sticky;
    bottom: 0;
    background-color: var(--color-primary-bg);
    z-index: 10;
    box-shadow: none;
}

.modal-actions .action-btn {
    padding: 12px 24px;
    font-weight: 700;
    font-size: 0.95em;
    border-radius: 8px;
    transition: all 0.3s;
    min-width: 140px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-actions .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.modal-actions .action-btn:active {
    transform: translateY(0);
}

.modal-actions .btn-deliver {
    order: 1;
}

.modal-actions .btn-send {
    order: 2;
}

.modal-actions .btn-cancel {
    order: 3;
}

/* 🌙 Modo Claro: Ajustar estilos */
body.light-mode .modal-content {
    background-color: var(--color-light-primary-bg);
    border-color: var(--color-light-border-light);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

body.light-mode .modal-content h2 {
    color: var(--color-low-alert) !important;
    border-bottom-color: var(--color-light-border-light);
}

body.light-mode .modal-content {
    background: linear-gradient(135deg, var(--color-light-secondary-bg) 0%, var(--color-light-card-bg) 100%);
}

body.light-mode .modal-content label {
    color: var(--color-low-alert);
    text-shadow: none;
}

body.light-mode .modal-content label::before {
    background: linear-gradient(180deg, var(--color-low-alert), transparent);
}

body.light-mode .modal-content input[type="text"],
body.light-mode .modal-content input[type="number"],
body.light-mode .modal-content textarea,
body.light-mode .modal-content select {
    border: 2px solid var(--color-light-border-light);
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
}

body.light-mode .modal-content input[type="text"]:read-only {
    background-color: var(--color-light-primary-bg);
    color: var(--color-light-text-muted);
}

body.light-mode .modal-content textarea:read-only {
    background-color: var(--color-light-primary-bg);
    color: var(--color-light-text-muted);
}

/* Contenedor de chips de opciones */
#opciones-actuales-container,
#modal-opciones-container {
    min-height: 100px;
    padding: 10px;
    border: 2px solid var(--color-border-dark);
    border-radius: 8px;
    background-color: var(--color-primary-bg);
    margin-top: 8px;
}

#opciones-actuales-chips,
#modal-opciones-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.light-mode #opciones-actuales-container,
body.light-mode #modal-opciones-container {
    border-color: var(--color-light-border-light);
    background-color: var(--color-light-secondary-bg);
}

/* Estilos para los chips de opciones */
.opcion-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border-dark);
    border-radius: 20px;
    color: var(--color-text-light);
    font-size: 0.9em;
    transition: all 0.2s ease;
    max-width: 100%;
}

.opcion-chip:hover {
    background-color: var(--color-secondary-bg);
    border-color: var(--color-low-alert);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
}

.opcion-chip-remove {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.85em;
    min-width: 24px;
    min-height: 24px;
}

.opcion-chip-remove:hover {
    background-color: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

body.light-mode .opcion-chip {
    background-color: var(--color-light-card-bg);
    border-color: var(--color-light-border-light);
    color: var(--color-light-text-dark);
}

body.light-mode .opcion-chip:hover {
    background-color: var(--color-light-secondary-bg);
    border-color: var(--color-low-alert);
}

body.light-mode .opcion-chip-remove {
    color: var(--color-light-text-muted);
}

body.light-mode .opcion-chip-remove:hover {
    background-color: rgba(255, 82, 82, 0.15);
    color: #ff5252;
}

body.light-mode .modal-content input:focus:not(:read-only),
body.light-mode .modal-content textarea:focus,
body.light-mode .modal-content select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15), 0 0 10px rgba(0, 188, 212, 0.2);
    background-color: var(--color-light-card-bg);
}

body.light-mode .modal-actions {
    background-color: var(--color-light-primary-bg);
}

body.light-mode .modal-actions {
    border-top-color: var(--color-light-border-light);
}

/* =======================================================
   ESTILOS: CORRECCIÓN DE ANCHO DE TABLA DE MENÚS
   ======================================================= */

/* Asegurar que el contenedor del módulo no limita la tabla */
.menu-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.menu-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

.menu-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.menu-filters label {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-filters label i {
    color: var(--color-low-alert);
    font-size: 1em;
}

.menu-filters input[type="text"],
.menu-filters select {
    padding: 10px 14px;
    border: 2px solid var(--color-border-dark);
    border-radius: 6px;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-size: 0.95em;
    width: 100%;
    transition: all 0.3s ease;
}

.menu-filters input[type="text"]:focus,
.menu-filters select:focus {
    border-color: var(--color-low-alert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    transform: translateY(-1px);
}

.menu-filters input[type="text"]:hover,
.menu-filters select:hover {
    border-color: var(--color-low-alert);
}

body.light-mode .menu-filters {
    background: linear-gradient(135deg, var(--color-light-card-bg) 0%, var(--color-light-secondary-bg) 100%);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .menu-filters::before {
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

body.light-mode .menu-filters label {
    color: var(--color-light-text-dark);
}

body.light-mode .menu-filters input[type="text"],
body.light-mode .menu-filters select {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border: 2px solid var(--color-light-border-light);
}

body.light-mode .menu-filters input[type="text"]:focus,
body.light-mode .menu-filters select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

.menu-actions-top {
    margin-bottom: 20px;
}

#menu-container {
    width: 100%;
}

/* Forzar que la tabla ocupe el 100% y manejar el layout de columnas */
.menu-table {
    width: 100%;
    min-width: unset; 
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.menu-table th {
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    color: var(--color-text-light);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    padding: 16px 12px;
    border-bottom: 2px solid var(--color-low-alert);
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.menu-table td {
    padding: 14px 12px;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border-dark);
    transition: background-color 0.2s;
}

.menu-table tbody tr {
    background-color: var(--color-secondary-bg);
    transition: all 0.2s;
}

.menu-table tbody tr:hover {
    background-color: var(--color-card-bg);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
}

.menu-table tbody tr:last-child td {
    border-bottom: none;
}

/* Asignar anchos fijos a las columnas más cortas */
.menu-table thead tr th:nth-child(2), /* Precio */
.menu-table tbody tr td:nth-child(2) {
    width: 12%;
    min-width: 100px;
    text-align: right;
    font-weight: 600;
    color: var(--color-success);
}

.menu-table thead tr th:nth-child(4), /* En Stock */
.menu-table tbody tr td:nth-child(4) {
    width: 12%; 
    min-width: 100px;
    text-align: center;
}

.menu-table thead tr th:nth-child(5), /* Acción (Editar) */
.menu-table tbody tr td:nth-child(5) {
    width: 15%; 
    min-width: 120px;
    text-align: center;
}

/* Permitir que la columna Nombre y Sección ocupen el espacio restante */
.menu-table thead tr th:nth-child(1), /* Nombre */
.menu-table tbody tr td:nth-child(1) {
    width: 35%;
    font-weight: 600;
    color: var(--color-text-light);
}

.menu-table thead tr th:nth-child(3), /* Sección */
.menu-table tbody tr td:nth-child(3) {
    width: 26%;
    color: var(--color-text-muted);
}

/* Estilos para el estado de stock */
.menu-table .stock-true {
    color: var(--color-success);
    font-weight: 700;
}

.menu-table .stock-false {
    color: var(--color-high-alert);
    font-weight: 700;
}

/* Botón de editar en la tabla */
.menu-table .btn-edit-menu {
    padding: 8px 16px;
    font-size: 0.9em;
    border-radius: 6px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
}

.menu-table .btn-edit-menu:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 188, 212, 0.4);
}

.menu-table .btn-edit-menu:active {
    transform: translateY(0);
}

.menu-table .btn-edit-menu:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =======================================================
   ESTILOS: CORRECCIÓN DE ANCHO DE TABLA DE CONFIGURACIÓN
   ======================================================= */

.config-table {
    width: 100%;
    table-layout: fixed;
}

/* Asignar anchos fijos a las columnas de Configuración */
.config-table thead tr th:nth-child(1), /* Parámetro */
.config-table tbody tr td:nth-child(1) {
    width: 35%; 
    min-width: 150px;
}

.config-table thead tr th:nth-child(2), /* Valor */
.config-table tbody tr td:nth-child(2) {
    width: 50%; /* Deja la mayor parte del espacio para el valor (recortado) */
    min-width: 200px;
    /* Aplicar estilo para forzar el truncamiento si es muy largo */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Muestra "..." si el texto es demasiado largo */
}

.config-table thead tr th:nth-child(3), /* Acción (Editar) */
.config-table tbody tr td:nth-child(3) {
    width: 15%; 
    min-width: 100px;
}

/* Estilos específicos para el formulario de configuración */
#config-item-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#config-item-form label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color-low-alert);
    position: relative;
}

#config-item-form label::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-low-alert), transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s;
}

#config-item-form label:focus-within::before {
    opacity: 1;
}

#config-item-form textarea {
    min-height: 120px;
    line-height: 1.6;
}

body.light-mode #config-item-form label {
    color: var(--color-low-alert);
}

body.light-mode #config-item-form label::before {
    background: linear-gradient(180deg, var(--color-low-alert), transparent);
}

/* =======================================================
   ESTILOS: SEPARACIÓN DE TABLA EN MÓDULOS ADMIN
   ======================================================= */

/* 1. Separación General entre Botones Superiores y Contenido (usado en Config y Menú) */
.config-actions-top {
    margin-bottom: 25px; /* Espacio debajo del botón "Volver" superior */
}

/* 2. Separación General de la Tabla del Contenedor del Módulo */
#config-table-container,
#menu-table-container {
    /* Añade padding vertical al contenedor de la tabla para separarla del título y del botón inferior */
    padding: 10px 0 30px 0; 
}

/* =======================================================
   ESTILOS: FOOTER DE LA PANTALLA DE LOGIN
   ======================================================= */
   .login-footer {
    position: fixed; 
    bottom: 20px;
    left: 0;         
    right: 0;
    width: 100%;     
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-muted); 
    z-index: 1001; 
}

.login-footer a {
    color: var(--color-info); /* Color azul de acento para el enlace */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.login-footer a:hover {
    color: var(--color-primary); /* Un color más brillante al pasar el ratón */
    text-decoration: underline;
}

/* Ajuste para modo claro */
body.light-mode .login-footer {
    color: var(--color-light-text-muted);
}
body.light-mode .login-footer a {
    color: var(--color-info);
}

/* =======================================================
   ESTILOS: MÓDULO DE REPORTES Y ESTADÍSTICAS
   ======================================================= */

/* Contenedor principal de reportes */
#reports-container {
    max-width: 1400px;
    margin: 50px auto;
    padding: 30px;
    background-color: var(--color-secondary-bg);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
}

#reports-container h2 {
    color: var(--color-low-alert);
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Filtros de reportes */
.reports-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.reports-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

.reports-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reports-filters label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-filters .date-picker-input {
    padding: 10px 14px;
    border: 2px solid var(--color-border-dark);
    border-radius: 6px;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-size: 0.95em;
    min-width: 180px;
    transition: all 0.3s ease;
}

.reports-filters .date-picker-input:focus {
    border-color: var(--color-low-alert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    transform: translateY(-1px);
}

.reports-filters .date-picker-input:hover {
    border-color: var(--color-low-alert);
}

.reports-filters .filter-group:last-child {
    flex-direction: row;
    gap: 10px;
}

/* Tarjetas de resumen (métricas principales) */
.reports-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--color-border-dark);
    transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.summary-icon {
    font-size: 2.5em;
    color: var(--color-low-alert);
    flex-shrink: 0;
}

.summary-content h3 {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-bottom: 5px;
    font-weight: 600;
}

.summary-content p {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--color-text-light);
    margin: 0;
}

/* Secciones de gráficos */
.reports-charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.reports-charts-section .chart-container.full-width {
    grid-column: 1 / -1;
}

.chart-container {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--color-border-dark);
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.chart-container h3 {
    font-size: 1.1em;
    color: var(--color-text-light);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-container h3 i {
    color: var(--color-low-alert);
}

.chart-container canvas {
    max-height: 300px !important;
    height: 300px !important;
}

/* Filtros para el módulo de reportes */
.reports-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.reports-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

.reports-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.reports-filters label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-filters input[type="text"],
.reports-filters select {
    padding: 8px 12px;
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-size: 0.95em;
    width: 100%;
}

.reports-filters input[type="text"]:focus,
.reports-filters select:focus {
    border-color: var(--color-low-alert);
    outline: none;
}

body.light-mode .reports-filters {
    background: linear-gradient(135deg, var(--color-light-card-bg) 0%, var(--color-light-secondary-bg) 100%);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .reports-filters::before {
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

body.light-mode .reports-filters label {
    color: var(--color-light-text-dark);
}

body.light-mode .reports-filters input[type="text"],
body.light-mode .reports-filters select {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border: 2px solid var(--color-light-border-light);
}

body.light-mode .reports-filters input[type="text"]:focus,
body.light-mode .reports-filters select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

/* Filtros para la tabla de detalle de pedidos */
.reports-table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.reports-table-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

.reports-table-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.reports-table-filters label {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reports-table-filters label i {
    color: var(--color-low-alert);
    font-size: 1em;
}

.reports-table-filters input[type="text"],
.reports-table-filters select {
    padding: 10px 14px;
    border: 2px solid var(--color-border-dark);
    border-radius: 6px;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-size: 0.95em;
    width: 100%;
    transition: all 0.3s ease;
}

.reports-table-filters input[type="text"]:focus,
.reports-table-filters select:focus {
    border-color: var(--color-low-alert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    transform: translateY(-1px);
}

.reports-table-filters input[type="text"]:hover,
.reports-table-filters select:hover {
    border-color: var(--color-low-alert);
}

body.light-mode .reports-table-filters {
    background: linear-gradient(135deg, var(--color-light-card-bg) 0%, var(--color-light-secondary-bg) 100%);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .reports-table-filters::before {
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

body.light-mode .reports-table-filters label {
    color: var(--color-light-text-dark);
}

body.light-mode .reports-table-filters input[type="text"],
body.light-mode .reports-table-filters select {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border: 2px solid var(--color-light-border-light);
}

body.light-mode .reports-table-filters input[type="text"]:focus,
body.light-mode .reports-table-filters select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

/* Sección de detalles (tabla) */
.reports-details-section {
    margin-top: 30px;
}

.reports-details-section h3 {
    font-size: 1.3em;
    color: var(--color-text-light);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-details-section h3 i {
    color: var(--color-low-alert);
}

/* Contenedor de la tabla con scroll horizontal */
#reports-table-container {
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 15px;
    -webkit-overflow-scrolling: touch;
}

.reports-table {
    width: 100%;
    min-width: 900px; /* Ancho mínimo para que todas las columnas sean visibles */
    border-collapse: collapse;
    table-layout: auto; /* Permite que las columnas se ajusten al contenido */
}

.reports-table th,
.reports-table td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid var(--color-border-dark);
    white-space: nowrap; /* Evita que el texto se corte en múltiples líneas */
}

/* Anchos específicos para cada columna */
.reports-table th:nth-child(1),
.reports-table td:nth-child(1) {
    width: 10%; /* Núm. Pedido */
    min-width: 100px;
}

.order-number-link {
    color: var(--color-low-alert);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.order-number-link:hover {
    color: var(--color-success);
    text-decoration: underline;
}

body.light-mode .order-number-link {
    color: var(--color-low-alert);
}

body.light-mode .order-number-link:hover {
    color: var(--color-success);
}

.reports-table th:nth-child(2),
.reports-table td:nth-child(2) {
    width: 12%; /* Fecha */
    min-width: 110px;
}

.reports-table th:nth-child(3),
.reports-table td:nth-child(3) {
    width: 20%; /* Cliente */
    min-width: 150px;
    white-space: normal; /* Permite que nombres largos se ajusten */
    word-wrap: break-word;
}

.reports-table th:nth-child(4),
.reports-table td:nth-child(4) {
    width: 15%; /* Estado */
    min-width: 120px;
}

.reports-table th:nth-child(5),
.reports-table td:nth-child(5) {
    width: 18%; /* Tipo Servicio */
    min-width: 140px;
}

.reports-table th:nth-child(6),
.reports-table td:nth-child(6) {
    width: 15%; /* Método Pago */
    min-width: 120px;
}

.reports-table th:nth-child(7),
.reports-table td:nth-child(7) {
    width: 10%; /* Total */
    min-width: 100px;
    text-align: right;
}

.reports-table th {
    background-color: var(--color-card-bg);
    color: var(--color-text-light);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.reports-table td {
    background-color: var(--color-secondary-bg);
    color: var(--color-text-light);
}

.reports-table tr:nth-child(even) td {
    background-color: #313131;
}

.reports-table .status-pendiente {
    color: var(--color-high-alert);
    font-weight: 600;
}

.reports-table .status-en\ preparacion {
    color: var(--color-medium-alert);
    font-weight: 600;
}

.reports-table .status-enviado {
    color: var(--color-low-alert);
    font-weight: 600;
}

.reports-table .status-entregado {
    color: var(--color-success);
    font-weight: 600;
}

.reports-table .status-cancelado {
    color: var(--color-historic);
    font-weight: 600;
}

/* Modo claro para reportes */
body.light-mode #reports-container {
    background-color: var(--color-light-secondary-bg);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode #reports-container h2 {
    border-color: var(--color-light-border-light);
}

body.light-mode .reports-filters {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .reports-filters label {
    color: var(--color-light-text-dark);
}

body.light-mode .reports-filters .date-picker-input {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border: 2px solid var(--color-light-border-light);
}

body.light-mode .reports-filters .date-picker-input:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

body.light-mode .summary-card {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .summary-content h3 {
    color: var(--color-light-text-muted);
}

body.light-mode .summary-content p {
    color: var(--color-light-text-dark);
}

body.light-mode .chart-container {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .chart-container h3 {
    color: var(--color-light-text-dark);
    border-color: var(--color-light-border-light);
}

body.light-mode .reports-table th {
    background-color: var(--color-light-card-bg);
    color: var(--color-light-text-dark);
    border-color: var(--color-light-border-light);
}

body.light-mode .reports-table td {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border-color: var(--color-light-border-light);
}

body.light-mode .reports-table tr:nth-child(even) td {
    background-color: var(--color-light-primary-bg);
}

/* Asegurar que el contenedor de reportes permita el scroll horizontal */
#reports-container {
    overflow-x: visible;
}

#reports-table-container {
    width: 100%;
}

/* Responsive para reportes */
@media (max-width: 1200px) {
    .reports-charts-section {
        grid-template-columns: 1fr;
    }
    
    .reports-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .reports-summary-cards {
        grid-template-columns: 1fr;
    }
    
    .reports-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .reports-filters .filter-group:last-child {
        flex-direction: column;
    }
    
    .chart-container canvas {
        max-height: 250px !important;
        height: 250px !important;
    }
}

/* =======================================================
   ESTILOS: MÓDULO DE CALL CENTER
   ======================================================= */

/* Contenedor principal */
#callcenter-container {
    max-width: 1600px;
    margin: 50px auto;
    padding: 30px;
    background-color: var(--color-secondary-bg);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
}

#callcenter-container h2 {
    color: var(--color-low-alert);
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Controles (Tabs y Filtros) */
.callcenter-controls {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--color-border-dark);
}

/* Tabs */
.callcenter-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: 10px;
}

.callcenter-tab {
    background-color: transparent;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.callcenter-tab:hover {
    color: var(--color-text-light);
    background-color: rgba(255, 255, 255, 0.05);
}

.callcenter-tab.active {
    color: var(--color-low-alert);
    border-bottom-color: var(--color-low-alert);
}

.callcenter-tab .tab-count {
    background-color: var(--color-secondary-bg);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 700;
}

.callcenter-tab.active .tab-count {
    background-color: var(--color-low-alert);
    color: var(--color-primary-bg);
}

/* Filtros */
.callcenter-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-secondary-bg) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.callcenter-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

.callcenter-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.callcenter-filters label {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.callcenter-filters label i {
    color: var(--color-low-alert);
    font-size: 1em;
}

.callcenter-filters select,
.callcenter-filters input[type="text"] {
    padding: 10px 14px;
    border: 2px solid var(--color-border-dark);
    border-radius: 6px;
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-size: 0.95em;
    width: 100%;
    transition: all 0.3s ease;
}

.callcenter-filters select:focus,
.callcenter-filters input[type="text"]:focus {
    border-color: var(--color-low-alert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    transform: translateY(-1px);
}

.callcenter-filters input[type="text"]:hover,
.callcenter-filters select:hover {
    border-color: var(--color-low-alert);
}

#callcenter-refresh {
    padding: 6px 10px;
    min-width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    align-self: flex-end;
    font-size: 0.85em;
}

body.light-mode .callcenter-filters {
    background: linear-gradient(135deg, var(--color-light-card-bg) 0%, var(--color-light-secondary-bg) 100%);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .callcenter-filters::before {
    background: linear-gradient(90deg, var(--color-low-alert), var(--color-success));
}

body.light-mode .callcenter-filters label {
    color: var(--color-light-text-dark);
}

body.light-mode .callcenter-filters select,
body.light-mode .callcenter-filters input[type="text"] {
    border: 2px solid var(--color-light-border-light);
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
}

/* Grid de Tarjetas de Pedidos */
.callcenter-orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Tarjeta de Pedido */
.callcenter-order-card {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--color-border-dark);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.callcenter-order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--color-low-alert);
}

/* Header de la tarjeta */
.callcenter-card-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-dark);
}

.callcenter-order-info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.95em;
    margin-bottom: 2px;
}

.callcenter-order-info-top .callcenter-order-number {
    flex-shrink: 0;
}

.callcenter-status-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.callcenter-customer-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0;
}

.callcenter-order-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.callcenter-order-number {
    font-weight: 700;
    color: var(--color-low-alert);
}

.callcenter-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.callcenter-status-dot.orange {
    background-color: var(--color-medium-alert);
    box-shadow: 0 0 8px var(--color-medium-alert);
}

.callcenter-status-dot.blue {
    background-color: var(--color-low-alert);
    box-shadow: 0 0 8px var(--color-low-alert);
}

.callcenter-status-dot.green {
    background-color: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
}

.callcenter-status-text {
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Información del pedido */
.callcenter-card-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.callcenter-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--color-text-light);
    justify-content: flex-start;
}

.callcenter-detail-item i {
    color: var(--color-low-alert);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.callcenter-detail-item > span {
    flex-shrink: 0;
}

.callcenter-detail-item .btn-view-order {
    background-color: transparent;
    border: 1px solid var(--color-low-alert);
    color: var(--color-low-alert);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex-shrink: 0;
}

.callcenter-detail-item .btn-view-order:hover {
    background-color: var(--color-low-alert);
    color: var(--color-primary-bg);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 188, 212, 0.3);
}

.callcenter-detail-item .btn-view-order i {
    font-size: 0.9em;
}

.callcenter-delivery-info {
    background-color: var(--color-secondary-bg);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--color-text-muted);
    border-left: 3px solid var(--color-medium-alert);
}

.callcenter-channel {
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Botón principal de acción */
.callcenter-main-action {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95em;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.callcenter-main-action.status-enviando {
    background-color: var(--color-high-alert);
    color: white;
}

.callcenter-main-action.status-en-tienda {
    background-color: var(--color-success);
    color: white;
}

.callcenter-main-action.status-pendiente {
    background-color: var(--color-medium-alert);
    color: var(--color-primary-bg);
}

.callcenter-main-action:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Botones secundarios */
.callcenter-secondary-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.callcenter-secondary-actions button {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    background-color: var(--color-secondary-bg);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.callcenter-secondary-actions button:hover {
    background-color: var(--color-card-bg);
    border-color: var(--color-low-alert);
    color: var(--color-low-alert);
}

.callcenter-secondary-actions .btn-cancel {
    color: var(--color-high-alert);
    border-color: var(--color-high-alert);
}

.callcenter-secondary-actions .btn-cancel:hover {
    background-color: rgba(255, 82, 82, 0.1);
}

/* Modo claro */
body.light-mode #callcenter-container {
    background-color: var(--color-light-secondary-bg);
    border: 1px solid var(--color-light-border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .callcenter-controls {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .callcenter-tabs {
    border-bottom-color: var(--color-light-border-light);
}

body.light-mode .callcenter-tab {
    color: var(--color-light-text-muted);
}

body.light-mode .callcenter-tab.active {
    color: var(--color-low-alert);
}

body.light-mode .callcenter-filters label {
    color: var(--color-light-text-dark);
}

body.light-mode .callcenter-filters select,
body.light-mode .callcenter-filters input[type="text"] {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .callcenter-order-card {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .callcenter-customer-name {
    color: var(--color-light-text-dark);
}

body.light-mode .callcenter-card-header {
    border-bottom-color: var(--color-light-border-light);
}

body.light-mode .callcenter-detail-item {
    color: var(--color-light-text-dark);
}

body.light-mode .callcenter-delivery-info {
    background-color: var(--color-light-primary-bg);
    border-left-color: var(--color-medium-alert);
}

body.light-mode .callcenter-secondary-actions button {
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
    border-color: var(--color-light-border-light);
}

body.light-mode .callcenter-detail-item .btn-view-order {
    border-color: var(--color-low-alert);
    color: var(--color-low-alert);
}

body.light-mode .callcenter-detail-item .btn-view-order:hover {
    background-color: var(--color-low-alert);
    color: var(--color-light-text-dark);
}

/* Estilos para el modal de detalle del pedido */
.order-detail-info {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--color-border-dark);
}

.detail-info-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.detail-info-row:last-child {
    margin-bottom: 0;
}

.detail-info-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 0.95em;
    color: var(--color-text-light);
    text-align: left;
}

.detail-info-item i {
    color: var(--color-low-alert);
    width: 20px;
    text-align: center;
}

.detail-info-item strong {
    color: var(--color-text-muted);
    margin-right: 5px;
}

.detail-status-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 5px;
}

.detail-status-group .callcenter-status-dot {
    flex-shrink: 0;
}

.detail-status-group .callcenter-status-text {
    margin: 0;
}

/* Estilo para el total en el modal */
#detail-modal-total {
    display: inline-block;
    background-color: rgba(76, 175, 80, 0.2);
    color: var(--color-success);
    padding: 6px 12px;
    border-radius: 100px;
    font-weight: 700;
    margin-left: 5px;
}

body.light-mode #detail-modal-total {
    background-color: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.order-detail-content {
    margin-bottom: 25px;
}

.order-detail-content h3 {
    color: var(--color-low-alert);
    margin-bottom: 15px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border-dark);
}

.order-message-content {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--color-border-dark);
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.8;
    color: var(--color-text-light);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.formatted-message {
    color: var(--color-text-light);
}

.formatted-message .section-title {
    color: var(--color-low-alert);
    font-size: 1.1em;
    display: block;
    margin: 15px 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.formatted-message .quantity {
    color: var(--color-success);
    font-weight: 700;
}

.formatted-message .no-content {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Modo claro para el modal de detalle */
body.light-mode .order-detail-info {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .detail-info-item {
    color: var(--color-light-text-dark);
}

body.light-mode .order-detail-content h3 {
    border-bottom-color: var(--color-light-border-light);
}

body.light-mode .order-message-content {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
    color: var(--color-light-text-dark);
}

body.light-mode .formatted-message {
    color: var(--color-light-text-dark);
}

/* Estilos para el modal de mensaje de WhatsApp */
.message-order-info {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border-dark);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    color: var(--color-text-light);
}

.message-info-item i {
    color: var(--color-low-alert);
    width: 20px;
    text-align: center;
}

.message-info-item strong {
    color: var(--color-text-muted);
    margin-right: 5px;
}

.message-form-container {
    margin-bottom: 20px;
}

.message-preview-label {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin: 15px 0 8px 0;
    font-weight: 600;
}

.message-preview {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--color-text-light);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
    min-height: 80px;
}

body.light-mode .message-order-info {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
}

body.light-mode .message-info-item {
    color: var(--color-light-text-dark);
}

body.light-mode .message-preview {
    background-color: var(--color-light-card-bg);
    border: 1px solid var(--color-light-border-light);
    color: var(--color-light-text-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .callcenter-orders-grid {
        grid-template-columns: 1fr;
    }
    
    .callcenter-filters {
        flex-direction: column;
    }
    
    .callcenter-filters .filter-group {
        min-width: 100%;
    }
    
    .detail-info-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* =======================================================
   ESTILOS: MÓDULO DE ASISTENCIA TÉCNICA
   ======================================================= */

#assistance-container {
    max-width: 1400px;
    margin: 50px auto;
    padding: 30px;
    background-color: var(--color-secondary-bg);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
}

#assistance-container h2 {
    color: var(--color-low-alert);
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.assistance-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.assistance-section {
    background-color: var(--color-card-bg);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.assistance-section h3 {
    color: var(--color-low-alert);
    font-size: 1.5em;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: 15px;
}

.assistance-section h3 i {
    font-size: 1.2em;
}

.assistance-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.assistance-card {
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-secondary-bg) 100%);
    border: 1px solid var(--color-border-dark);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.assistance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.3);
    border-color: var(--color-low-alert);
}

.assistance-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-low-alert), var(--color-success));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--color-primary-bg);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

.assistance-card h4 {
    color: var(--color-text-light);
    font-size: 1.3em;
    margin: 0;
    font-weight: 600;
}

.assistance-card p {
    color: var(--color-text-muted);
    font-size: 0.95em;
    margin: 0;
    line-height: 1.5;
}

.assistance-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--color-low-alert);
    color: var(--color-primary-bg);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.assistance-link:hover {
    background-color: var(--color-success);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
}

.assistance-info-box {
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-secondary-bg) 100%);
    border: 1px solid var(--color-border-dark);
    border-radius: 10px;
    padding: 25px;
    line-height: 1.8;
}

.assistance-info-box p {
    color: var(--color-text-light);
    margin-bottom: 15px;
    font-size: 1.05em;
}

.assistance-info-box p:last-of-type {
    margin-bottom: 25px;
}

.assistance-info-box strong {
    color: var(--color-low-alert);
    font-size: 1.1em;
}

.assistance-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.assistance-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-low-alert), var(--color-success));
    color: var(--color-primary-bg);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

.assistance-link-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.5);
}

/* Modo Claro */
body.light-mode #assistance-container {
    background-color: var(--color-light-secondary-bg);
    border-color: var(--color-light-border-light);
}

body.light-mode .assistance-section {
    background-color: var(--color-light-card-bg);
    border-color: var(--color-light-border-light);
}

body.light-mode .assistance-card {
    background: linear-gradient(135deg, var(--color-light-primary-bg) 0%, var(--color-light-secondary-bg) 100%);
    border-color: var(--color-light-border-light);
}

body.light-mode .assistance-card h4 {
    color: var(--color-light-text-dark);
}

body.light-mode .assistance-card p {
    color: var(--color-light-text-muted);
}

body.light-mode .assistance-info-box {
    background: linear-gradient(135deg, var(--color-light-primary-bg) 0%, var(--color-light-secondary-bg) 100%);
    border-color: var(--color-light-border-light);
}

body.light-mode .assistance-info-box p {
    color: var(--color-light-text-dark);
}

body.light-mode .assistance-info-box strong {
    color: var(--color-low-alert);
}

/* Responsive */
@media (max-width: 768px) {
    .assistance-cards {
        grid-template-columns: 1fr;
    }
    
    .assistance-links {
        flex-direction: column;
    }
    
    .assistance-link-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =======================================================
   ESTILOS: FORMULARIO DE SOPORTE TÉCNICO
   ======================================================= */

#support-ticket-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 25px;
    margin-bottom: 25px;
}

/* Estilos para labels del formulario de soporte - usando la misma estructura que menu-item-form */
#support-ticket-form label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color-low-alert);
    padding-top: 0;
    margin-bottom: 0;
    width: calc(50% - 12.5px);
    position: relative;
}

#support-ticket-form label::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-low-alert), transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s;
}

#support-ticket-form label:focus-within::before {
    opacity: 1;
}

#support-ticket-form label.full-width-field {
    width: 100%;
}

#support-ticket-form label .label-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1.5;
}

#support-ticket-form label .label-text i {
    color: var(--color-low-alert);
    margin-right: 5px;
    flex-shrink: 0;
}

#support-ticket-form label .label-text .required {
    color: var(--color-medium-alert);
    font-weight: 700;
    margin-left: 2px;
    flex-shrink: 0;
}


/* Estilos para inputs del formulario de soporte */
#support-ticket-form input[type="text"],
#support-ticket-form input[type="email"],
#support-ticket-form input[type="tel"],
#support-ticket-form select,
#support-ticket-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--color-border-dark);
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s;
    margin-top: 8px;
    margin-bottom: 0;
    font-family: inherit;
}

#support-ticket-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300BCD4' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

#support-ticket-form textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
    font-family: inherit;
}

#support-ticket-form input:focus:not(:read-only),
#support-ticket-form textarea:focus,
#support-ticket-form select:focus {
    border-color: var(--color-low-alert);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2), 0 0 15px rgba(0, 188, 212, 0.3);
    outline: none;
    background-color: var(--color-secondary-bg);
}

.form-field.full-width-field {
    grid-column: 1 / -1;
    margin-bottom: 0;
    margin-top: 0;
}

/* Reducir espacio superior a los campos full-width que vienen después de un form-row */
.form-row + .form-field.full-width-field {
    margin-top: 15px;
}

/* Agregar espacio superior a los campos full-width que vienen después de otro campo full-width */
.form-field.full-width-field + .form-field.full-width-field {
    margin-top: 20px;
}

.required {
    color: var(--color-medium-alert);
    font-weight: 700;
    margin-left: 2px;
    display: inline;
    white-space: nowrap;
}

.form-message {
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    font-weight: 600;
    text-align: center;
}

.form-message.success {
    background-color: rgba(76, 175, 80, 0.2);
    border: 2px solid var(--color-success);
    color: var(--color-success);
}

.form-message.error {
    background-color: rgba(244, 67, 54, 0.2);
    border: 2px solid var(--color-medium-alert);
    color: var(--color-medium-alert);
}

.form-message.info {
    background-color: rgba(33, 150, 243, 0.2);
    border: 2px solid var(--color-low-alert);
    color: var(--color-low-alert);
}

/* Modo Claro */
body.light-mode .form-field label {
    color: var(--color-light-text-dark);
}

body.light-mode .form-field input,
body.light-mode .form-field select,
body.light-mode .form-field textarea {
    border: 2px solid var(--color-light-border-light);
    background-color: var(--color-light-secondary-bg);
    color: var(--color-light-text-dark);
}

body.light-mode .form-field input:focus,
body.light-mode .form-field select:focus,
body.light-mode .form-field textarea:focus {
    border-color: var(--color-low-alert);
    background-color: var(--color-light-primary-bg);
}

body.light-mode .form-field input:hover,
body.light-mode .form-field select:hover,
body.light-mode .form-field textarea:hover {
    background-color: var(--color-light-primary-bg);
}

/* =======================================================
   ESTILOS: SISTEMA DE NOTIFICACIONES TOAST
   ======================================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    min-width: 320px;
    max-width: 450px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 4.7s forwards;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: currentColor;
}

.toast-success {
    background: linear-gradient(135deg, rgba(105, 240, 174, 0.95) 0%, rgba(69, 200, 150, 0.95) 100%);
    color: #0a3d2e;
    border-left: 4px solid #00e676;
}

.toast-error {
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.95) 0%, rgba(220, 50, 50, 0.95) 100%);
    color: #ffffff;
    border-left: 4px solid #ff1744;
}

.toast-info {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.95) 0%, rgba(18, 129, 148, 0.95) 100%);
    color: #ffffff;
    border-left: 4px solid #00bcd4;
}

.toast-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.95) 0%, rgba(230, 170, 0, 0.95) 100%);
    color: #3e2723;
    border-left: 4px solid #ffc107;
}

.toast-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    align-self: flex-start;
}

.toast-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.toast-message {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 4px;
}

.toast-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.toast-close:active {
    transform: scale(0.95);
}

/* Barra de progreso para el tiempo de vida */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    animation: progressBar 5s linear forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes progressBar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Modo claro */
/* =======================================================
   ESTILOS: MODAL DE CONFIRMACIÓN DE ELIMINACIÓN
   ======================================================= */

.confirm-modal-overlay {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInOverlay 0.3s ease-out;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.confirm-modal-content {
    max-width: 500px;
    width: 90%;
    background: linear-gradient(135deg, var(--color-secondary-bg) 0%, var(--color-card-bg) 100%);
    border: 2px solid var(--color-high-alert);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(255, 82, 82, 0.4), 
                0 0 60px rgba(255, 82, 82, 0.2);
    animation: slideInConfirm 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    position: relative;
}

@keyframes slideInConfirm {
    from {
        transform: scale(0.7) translateY(-50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.confirm-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--color-high-alert) 0%, 
        #ff5252 50%, 
        var(--color-high-alert) 100%);
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px var(--color-high-alert);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 30px var(--color-high-alert);
    }
}

.confirm-modal-header {
    padding: 30px 30px 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-border-dark);
}

.confirm-icon-wrapper {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-icon {
    font-size: 64px;
    color: var(--color-high-alert);
    animation: shake 0.5s ease-in-out, pulse-icon 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 82, 82, 0.6),
                 0 0 40px rgba(255, 82, 82, 0.4);
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px) rotate(-5deg);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px) rotate(5deg);
    }
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

.confirm-title {
    font-size: 1.8em;
    color: var(--color-text-light);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(255, 82, 82, 0.3);
}

.confirm-modal-body {
    padding: 25px 30px;
    text-align: center;
}

.confirm-message {
    font-size: 1.1em;
    color: var(--color-text-light);
    margin-bottom: 15px;
    line-height: 1.6;
    font-weight: 500;
}

.confirm-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.3);
    border-radius: 8px;
    color: var(--color-high-alert);
    font-size: 0.95em;
    font-weight: 600;
    margin: 0;
}

.confirm-warning i {
    font-size: 1.1em;
}

.confirm-modal-actions {
    display: flex;
    gap: 15px;
    padding: 20px 30px 30px;
    justify-content: center;
}

.confirm-cancel-btn,
.confirm-delete-btn {
    flex: 1;
    padding: 14px 24px;
    font-size: 1em;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
}

.confirm-cancel-btn {
    background: linear-gradient(135deg, var(--color-low-alert) 0%, #00a8b8 100%);
    color: var(--color-primary-bg);
    border: 2px solid var(--color-low-alert);
}

.confirm-cancel-btn:hover {
    background: linear-gradient(135deg, #00a8b8 0%, var(--color-low-alert) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

.confirm-delete-btn {
    background: linear-gradient(135deg, var(--color-high-alert) 0%, #d32f2f 100%);
    color: #ffffff;
    border: 2px solid var(--color-high-alert);
    box-shadow: 0 4px 15px rgba(255, 82, 82, 0.3);
}

.confirm-delete-btn:hover {
    background: linear-gradient(135deg, #d32f2f 0%, var(--color-high-alert) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 82, 82, 0.5);
}

.confirm-delete-btn:active {
    transform: translateY(0);
}

/* Modo claro */
body.light-mode .confirm-modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border-color: var(--color-high-alert);
}

body.light-mode .confirm-title {
    color: var(--color-light-text-dark);
}

body.light-mode .confirm-message {
    color: var(--color-light-text-dark);
}

body.light-mode .confirm-warning {
    background: rgba(255, 82, 82, 0.1);
    border-color: rgba(255, 82, 82, 0.3);
    color: var(--color-high-alert);
}

body.light-mode .toast-success {
    background: linear-gradient(135deg, rgba(105, 240, 174, 0.98) 0%, rgba(69, 200, 150, 0.98) 100%);
    color: #0a3d2e;
}

body.light-mode .toast-error {
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.98) 0%, rgba(220, 50, 50, 0.98) 100%);
    color: #ffffff;
}

body.light-mode .toast-info {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.98) 0%, rgba(18, 129, 148, 0.98) 100%);
    color: #ffffff;
}

body.light-mode .toast-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.98) 0%, rgba(230, 170, 0, 0.98) 100%);
    color: #3e2723;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}