/* Estilos generales del sistema */
:root {
    --primary-color: #5dade2; /* Un azul claro como color de acento principal */
    --secondary-color: #5cb85c;
    --dark-color: #ecf0f1;    /* Color de texto principal (claro) */
    --light-color: #34495e;   /* Fondo de las tarjetas */
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --success-color: #2ecc71;
    --info-color: #3498db;
    --white-color: #2c3e50;   /* Nuevo fondo principal del cuerpo (azul oscuro) */
    --gray-color: #bdc3c7;    /* Texto secundario (gris claro) */
    --light-gray-bg: #2c3e50; /* Reemplaza el fondo gris claro por el azul oscuro */
    --border-color: #4a627a;  /* Un color de borde más oscuro pero visible */
    --text-color-dark: #ecf0f1; /* Texto principal (claro) */
    --text-color-light: #bdc3c7;/* Texto secundario (gris claro) */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

a {
    text-decoration: none;
    color: var(--primary-color);
}

ul {
    list-style: none;
}
/* ================================================== */
/* NUEVOS ESTILOS PARA DASHBOARD (TIPO LISTA)     */
/* ================================================== */

/* Contenedor principal para la cuadrícula */
.dashboard-grid {
    display: grid;
    /* En pantallas pequeñas, una columna. En más grandes, se ajusta. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px; /* Espacio entre los botones */
}

/* Estilo para cada tarjeta/botón individual del menú */
.menu-card {
    background-color: #ffffff; /* Fondo blanco para un look más limpio */
    border-radius: 8px;
    padding: 15px;
    color: #343a40; /* Texto oscuro */
    text-decoration: none;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex; /* <-- La clave: convierte la tarjeta en un contenedor flex */
    flex-direction: row; /* <-- Alinea los elementos horizontalmente */
    align-items: center; /* <-- Centra el ícono y el texto verticalmente */
    gap: 15px; /* Espacio entre el ícono y el texto */
}

/* Efecto al pasar el mouse */
.menu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-color: #78281f; /* Color del borde al pasar el mouse */
}

/* Estilo para el icono dentro de la tarjeta */
.menu-card .menu-card-icon {
    font-size: 1.8em; /* Ícono más pequeño */
    color: #78281f; /* Color primario para el ícono */
    /* Creamos un contenedor para el ícono para mejor alineación */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* Evita que el ícono se encoja */
}

/* Estilo para el texto dentro de la tarjeta */
.menu-card .menu-card-title {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.3;
    text-align: left; /* Alinea el texto a la izquierda */
}
/* Estilo para los encabezados de fecha en la lista de tickets */
.date-header {
    grid-column: 1 / -1; /* Ocupa todo el ancho de la cuadrícula */
    font-size: 1.3em;
    font-weight: bold;
    color: #78281f;
    padding-bottom: 10px;
    margin-top: 20px;
    border-bottom: 2px solid #e0e0e0;
}
.date-header:first-child {
    margin-top: 0; /* Elimina el margen extra del primer título */
}

/* --- INICIO: NUEVOS ESTILOS PARA TARJETAS DE TICKETS --- */

/* Contenedor principal para las tarjetas, usa Grid en escritorio */
.ticket-grid {
    display: grid;
    gap: 20px; /* Espacio entre tarjetas */
}

/* Diseño de cada tarjeta individual */
.ticket-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */
}

/* Cabecera de la tarjeta: ID y Estado */
.ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.ticket-id {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

/* Cuerpo de la tarjeta: Detalles del pedido */
.ticket-card-body {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para los detalles */
    gap: 10px;
}

.ticket-card-detail {
    font-size: 0.9em;
    color: #555;
}
.ticket-card-detail strong {
    color: #333;
    display: block; /* El título en una línea y el valor en otra */
}
/* Detalle del total más grande */
.ticket-total {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    font-size: 1.3em;
    font-weight: bold;
    color: #78281f;
    text-align: center;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    margin-top: 5px;
}

/* Pie de la tarjeta: Botones de acciones */
.ticket-card-actions {
    display: flex;
    flex-wrap: wrap; /* Los botones pasan a la siguiente línea si no caben */
    gap: 8px;
    padding: 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}
.ticket-card-actions .btn {
    flex-grow: 1; /* Los botones crecen para ocupar el espacio disponible */
}

/* --- RESPONSIVIDAD --- */

/* En pantallas grandes (tablets y escritorio), muestra 2 columnas */
@media (min-width: 768px) {
    .ticket-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* En pantallas muy grandes, muestra 3 columnas */
@media (min-width: 1200px) {
    .ticket-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* --- FIN: NUEVOS ESTILOS --- */

/* ================================================== */
/* ESTILOS PARA PANEL CON TARJETAS           */
/* ================================================== */

/* Contenedor principal para la cuadrícula de tarjetas */
.dashboard-grid {
    display: grid;
    /* Crea columnas flexibles que se adaptan al tamaño de la pantalla */
    /* Cada tarjeta tendrá un mínimo de 180px de ancho */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px; /* Espacio entre las tarjetas */
    padding-top: 20px; /* Espacio debajo del título "Panel de Administración" */
}



/* Efecto elegante al pasar el mouse sobre la tarjeta */
.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    color: #f5be7f;
}

/* Estilo para el icono dentro de la tarjeta */
.menu-card .menu-card-icon {
    font-size: 2.8em; /* Tamaño del icono */
    margin-bottom: 15px; /* Espacio entre el icono y el texto */
    color: #7a1115; /* Un color dorado/amarillo para los iconos */
}

/* Estilo para el texto dentro de la tarjeta */
.menu-card .menu-card-title {
    font-size: 1.05em;
    font-weight: 500;
    line-height: 1.3;
}

/* Estilo para la fila de cada producto en el menú principal */
.product-row {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    gap: 15px;
}

/* Contenedor de la imagen (Izquierda) */
.product-row-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0; /* Evita que el contenedor se encoja */
}

/* La imagen dentro del contenedor */
.product-row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
    border-radius: 8px;
}

/* Información del producto (Centro) */
.product-row-info {
    flex-grow: 1; /* Ocupa el espacio restante */
}

/* Controles de cantidad (Derecha) */
.product-row-quantity {
    /* No necesita estilos adicionales, se alinea automáticamente */
}

/* ================================================== */
/* ESTILOS GENERALES                   */
/* ================================================== */

/* Estilos para el login */
.login-body {
    background-color: #d6eaf8;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background-color: var(--white-color);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
}

.logo-container {
    margin-bottom: 20px;
}

.logo {
    max-width: 150px;
    height: auto;
}

.login-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Formularios */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color-light);
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--white-color);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: var(--info-color);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.2);
    outline: none;
}

/* Botones */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s;
    text-transform: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.btn-primary:hover {
    background-color: #c9302c;
}

.btn-success {
    background-color: var(--success-color);
    color: #fff;
    border: 1px solid var(--success-color);
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-warning {
    background-color: var(--warning-color);
    color: var(--dark-color);
    border: 1px solid var(--warning-color);
}
.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: var(--dark-color);
}

.btn-block {
    display: block;
    width: 100%;
}

/* Alertas */
.alert {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid transparent;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Barra de Navegación */
.navbar {
    background-color: var(--white-color);
    color: var(--dark-color);
    padding: 12px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-size: 22px;
    font-weight: 600;
    color: var(--dark-color);
}

.navbar-nav {
    display: flex;
    align-items: center;
}

.nav-item {
    margin-left: 15px;
    display: flex;
    align-items: center;
}

.nav-link, .navbar-nav .nav-item span {
    color: var(--text-color-light);
    font-weight: 500;
    transition: color 0.3s;
    padding: 8px 12px;
    border-radius: 4px;
}
.navbar-nav .nav-item span {
    padding-right: 5px;
}

.nav-link:hover, .navbar-nav .nav-item a.btn:hover {
    color: var(--primary-color);
    background-color: rgba(0,0,0,0.03);
}

.navbar .btn {
    padding: 8px 15px;
    font-size: 14px;
    margin-left: 10px;
}

.navbar .btn-success {
    background-color: var(--success-color);
    color: var(--white-color);
    border: 1px solid var(--success-color);
}
.navbar .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
    color: var(--white-color);
}

.navbar .btn-danger {
    background-color: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}
.navbar .btn-danger:hover {
    background-color: var(--danger-color);
    color: var(--white-color);
}

/* Contenedores de Administración */
.admin-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

.admin-title {
    color: var(--dark-color);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.admin-card {
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    padding: 25px;
    margin-bottom: 25px;
    transition: box-shadow 0.3s ease-in-out;
}
.admin-card:hover {
    box-shadow: var(--card-hover-shadow);
}

.admin-card-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.admin-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Tablas */
.table-container {
    overflow-x: auto;
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    padding: 15px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

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

.table th {
    background-color: var(--light-gray-bg);
    font-weight: 600;
    color: var(--dark-color);
}

.table tr:hover {
    background-color: #f9f9f9;
}

.table .btn {
    padding: 6px 10px;
    font-size: 13px;
}

/* Estilos para el Menú de Toma de Pedidos */
.menu-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

.menu-title .fas,
.menu-subtitle .fas,
.order-title .fas,
.customer-title .fas {
    margin-right: 10px;
    color: #78281f; /* Color para los iconos en títulos */
}

.menu-title {
    color: var(--dark-color);
    font-size: 26px;
    margin-bottom: 10px;
}

.menu-subtitle {
    color: var(--text-color-light);
    margin-bottom: 20px;
}

.category-container {
    margin-bottom: 30px;
}

.category-title {
    color: var(--dark-color);
    font-size: 22px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.product-card {
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease-in-out;
}
.product-card:hover {
    box-shadow: var(--card-hover-shadow);
}

.product-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark-color);
}

.product-description {
    color: var(--text-color-light);
    margin-bottom: 10px;
    flex-grow: 1;
    font-size: 14px;
}

.product-price {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 18px;
}

.product-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quantity-input {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

/* Resumen de Pedido */
.order-summary {
    background-color: var(--white-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--card-shadow);
}

.order-title {
    color: var(--dark-color);
    font-size: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Pie de Página */
.footer {
     background-color: var(--white-color);
    color: var(--gray-color);
    padding: 25px 0;
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-text {
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-link {
    color: var(--primary-color);
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--info-color);
}

/* ================================================== */
/* ESTILOS PARA TARJETAS DE CATEGORÍAS             */
/* ================================================== */

/* Contenedor principal que usa Grid para responsividad */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Diseño de cada tarjeta individual */
.category-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column; /* Cambiamos la dirección a columna */
    justify-content: space-between; /* Espacio entre la info y las acciones */
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 10px; /* Añadido para espacio entre tarjetas */
}

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

.category-card-info {
    margin-bottom: 15px; /* Espacio entre la info y los botones */
}

/* Información de la categoría (izquierda) */
.category-card-info .id {
    font-size: 0.8em;
    font-weight: bold;
    color: #6c757d;
    background-color: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.category-card-info .nombre {
    font-size: 1.3em;
    font-weight: 600;
    color: #343a40;
    margin: 0;
}

.category-card-info .product-count {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 5px;
}

/* Acciones (derecha) */
.category-card-actions {
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    gap: 10px;
}


/* Notificaciones Toast */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 320px;
}

.toast {
    background-color: #fff;
    color: #333;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 5px solid #6c757d; /* Borde por defecto */
    opacity: 0;
    transform: translateX(100%);
    animation: slideInLeft 0.5s forwards;
}
    
.toast.success {
    border-left-color: var(--success-color);
}
.toast.success .toast-icon {
    color: var(--success-color);
}
    
.toast.error {
    border-left-color: var(--danger-color);
}
.toast.error .toast-icon {
    color: var(--danger-color);
}
    
.toast-icon {
    font-size: 1.5em;
}
    
.toast-message {
    font-weight: 500;
}

.toast.toast-fade-out {
    animation: fadeOut 0.5s forwards;
}
/* Estilos para la barra de progreso de stock */
.progress-bar-container {
    background-color: #e9ecef;
    border-radius: 5px;
    height: 18px;
    width: 100%;
}
.progress-bar {
    height: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    transition: width 0.4s ease;
}

/* ================================================== */
/* NUEVOS ESTILOS PARA BOTONES DE NAVEGACIÓN      */
/* ================================================== */

/* Contenedor para los botones de la derecha */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el texto de bienvenida y los botones */
}

/* Estilo base para los nuevos botones */
.nav-button {
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espacio entre el ícono y el texto */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Estilo específico para el botón de Administración */
.nav-button.admin-btn {
    background-color: #2c3e50; /* Un azul oscuro elegante */
    color: #ecf0f1;
}

.nav-button.admin-btn:hover {
    background-color: #34495e; /* Un poco más claro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Estilo específico para el botón de Cerrar Sesión */
.nav-button.logout-btn {
    background-color: transparent;
    color: #c0392b; /* Rojo sutil */
    border: 1px solid #e74c3c;
}

.nav-button.logout-btn:hover {
    background-color: #c0392b;
    color: #ffffff;
}
.progress-bar.high { background-color: #28a745; } /* Verde */
.progress-bar.medium { background-color: #ffc107; color: #333 !important; } /* Amarillo */
.progress-bar.low { background-color: #dc3545; } /* Rojo */
    
@keyframes slideInLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ================================================== */
/* MEDIA QUERIES                     */
/* ================================================== */

/* Para tablets y móviles */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .admin-buttons {
        flex-direction: column;
    }
    .admin-buttons .btn {
        width: 100%;
    }
    
    .navbar {
        flex-direction: column;
        padding: 15px;
        align-items: flex-start;
    }
    
    .navbar-brand {
        margin-bottom: 15px;
    }
    
    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center; /* <-- Este es el cambio clave para centrar */
        width: 100%;
        gap: 10px; /* Mantiene el espacio entre los elementos */
    }
    
    .nav-item {
        margin: 8px 0;
        width: 100%;
        text-align: left;
        margin-left: 0;
    }
    .navbar .btn {
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 0;
    }
    
    .navbar-nav .nav-button {
        width: auto; /* El botón se ajusta a su contenido */
        min-width: 220px; /* Le damos un ancho mínimo para que se vea bien */
        justify-content: center; /* Centra el texto y el ícono dentro del botón */
    }
    .navbar-nav .nav-item span {
        padding: 8px 0;
    }
    .nav-item .fa-solid {
        margin-right: 8px; /* Espacio a la derecha del icono */
    }

    .input-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .input-group .form-control {
        flex-grow: 1;
    }
}

/* Para Escritorio */
@media (min-width: 769px) {
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1000; 
    }
}

/* === AJUSTES PARA EL NUEVO TEMA AZUL === */

/* Fondo del cuerpo y color de texto por defecto */
body {
    background-color: var(--light-gray-bg);
    color: var(--text-color-dark);
}

/* Color de los iconos en títulos */
.menu-title .fas,
.menu-subtitle .fas,
.order-title .fas,
.customer-title .fas,
.menu-card .menu-card-icon,
.navbar-brand {
    color: var(--primary-color) !important;
}

/* Ajuste para subtítulos y descripciones */
.menu-subtitle,
.product-description,
.form-group label {
    color: var(--text-color-light);
}

/* Estilo para las filas de productos y contenedores */
.product-row,
.order-summary,
.customer-info {
    background-color: var(--light-color);
    border-bottom: 1px solid var(--border-color);
}

/* Precio del producto */
.product-price {
    color: var(--success-color);
    font-weight: bold;
}

/* Formularios */
.form-control {
    background-color: #2c3e50; /* Fondo azul oscuro para inputs */
    color: var(--text-color-dark);
    border: 1px solid var(--border-color);
}

.form-control:focus {
    background-color: #34495e;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.2);
}

/* Estilo de la barra de navegación y pie de página */
.navbar,
.footer {
    background-color: var(--light-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Placeholder para la imagen */
.no-image-placeholder {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    color: var(--gray-color);
}

/* Botones de cantidad */
.btn-aumentar, .btn-disminuir {
    background-color: #2c3e50;
    border-color: var(--border-color);
    color: var(--text-color-dark);
}

.btn-aumentar:hover, .btn-disminuir:hover {
    background-color: #4a627a;
}

.table tr:hover {
    background-color: #34495e;
}

/* === AJUSTES DE CONTRASTE Y TARJETAS (SEGUNDA REVISIÓN) === */

/* 1. Un nuevo color gris oscuro para las tarjetas que contrasta con el fondo */
.product-row, 
.order-summary, 
.customer-info, 
.menu-card {
    background-color: #4a5158; /* Un gris oscuro y neutro */
    border: 1px solid #5f676e; /* Un borde sutil */
}

/* 2. Textos claros y legibles dentro de las tarjetas del dashboard */
.menu-card, 
.menu-card .menu-card-title {
    color: #ecf0f1; 
}
.menu-card:hover {
    background-color: #5f676e; /* Efecto hover para las tarjetas */
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* 3. Iconos del dashboard en el color de acento principal */
.menu-card .menu-card-icon {
    color: var(--primary-color);
}

/* 4. Resaltar el precio con un color dorado y aumentar su tamaño */
.product-price {
    color: #f1c40f; 
    font-size: 1.15em;
    font-weight: bold;
}

/* 5. Asegurar que todo el texto de los productos sea blanco y legible */
.product-description, 
.product-name {
     color: #ecf0f1;
}

/* 6. Aclarar las etiquetas de los formularios (label) */
.form-group label {
    color: #d5d9dc; 
    font-weight: 500;
}

/* 7. Mejorar los botones de la barra de navegación */
.navbar .nav-button.admin-btn,
.navbar .nav-button.logout-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
}

.navbar .nav-button.logout-btn {
    background-color: #c0392b; /* Un rojo más sutil */
}

/* Estilo para el botón "Menu Principal" y similares */
.navbar .btn, 
.navbar a.btn, 
.navbar .nav-item a[href="panel.php"],
.navbar .nav-item a:not(.nav-button) {
    background-color: #e9ecef; /* Fondo muy claro */
    color: #2c3e50; /* Texto oscuro para máximo contraste */
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.navbar .btn:hover, 
.navbar a.btn:hover,
.navbar .nav-item a[href="panel.php"]:hover,
.navbar .nav-item a:not(.nav-button):hover {
    background-color: #d1d5d9;
    transform: translateY(-2px);
}

/* === AJUSTES DE COLOR EN TARJETAS Y TÍTULOS (TERCERA REVISIÓN) === */

/* 1. Cambia el color de las tarjetas a un azul muy oscuro y profundo */
.product-row, 
.order-summary, 
.customer-info, 
.menu-card {
    background-color: #1B2631; /* Un azul pizarra muy oscuro */
    border: 1px solid #34495E; /* Borde en un tono de azul más claro para definir */
}

/* 2. Cambia el fondo blanco del título de la categoría por un azul oscuro */
.category-header {
    background-color: #212F3C; /* Azul oscuro, ligeramente más claro que las tarjetas */
    padding: 12px 15px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0; /* Unimos el título con la lista de productos */
    border-bottom: 2px solid var(--primary-color); /* Línea de acento azul claro */
}

/* 3. Asegura que el texto del título de la categoría sea claro y legible */
.category-header .category-title {
    color: #EBF5FB; /* Texto en un tono blanco azulado */
    font-size: 1.2rem;
    border-bottom: none; /* Eliminamos el borde anterior que ya no es necesario */
    margin: 0;
}

/* 4. Retoque para que las listas de productos se unan bien con los nuevos títulos */
.products-list {
    /* Este estilo es para asegurar que no haya un doble borde o espacio no deseado */
    border-top: none; 
}

/* === CORRECCIÓN FINAL PARA TÍTULO DE CATEGORÍA === */

/* Forza el cambio de color en el fondo de la barra de título */
.category-header {
    background-color: #34495e !important; 
}

/* Forza el cambio de color en el texto del título */
.category-header .category-title {
    color: #ffffff !important; 
}

/* Estilos para los botones de cantidad (+ y -) */
.btn-aumentar,
.btn-disminuir {
    background-color: #4a627a !important;
    color: #ecf0f1 !important;
    border: 1px solid #5f676e !important;
}

/* Efecto al pasar el mouse o presionar el botón */
.btn-aumentar:hover,
.btn-disminuir:hover {
    background-color: #5dade2 !important;
    border-color: #5dade2 !important;
}
/* Cambia el color del TÍTULO del producto */
.product-name {
    color: #ffffff !important; 
}

/* Cambia el color del PRECIO del producto */
.product-price {
    color: #f1c40f !important; 
}

/* Corrección para el campo "Tipo de Pedido" */
.customer-info .form-group:last-of-type p {
    background-color: #34495e !important;
    color: #ffffff !important;
    border: 1px solid #4a627a !important;
}
/* === ESTILOS PARA VISTA DE TICKETS Y DETALLE DE FACTURA === */

/* 1. Estilos para la lista de Tickets (Historial) */

/* Cambia el fondo de cada tarjeta de ticket a un tono gris */
.ticket-card {
    background-color: #4a5158; 
    border: 1px solid #5f676e;
}

/* Ajusta la cabecera de la tarjeta con un fondo ligeramente distinto */
.ticket-card-header {
    background-color: #566573; 
    border-bottom: 1px solid #5f676e;
}

/* Asegura que el ID del ticket y el estado sean claros */
.ticket-card-header .ticket-id,
.ticket-card-header .estado-texto-lista {
    color: #ffffff;
}

/* Pone el texto principal dentro de la tarjeta en color claro */
.ticket-card-body,
.ticket-card-detail {
    color: #ecf0f1;
}

/* Cambia el color de las etiquetas (Cliente, Fecha, etc.) a un gris suave */
.ticket-card-detail strong {
    color: #bdc3c7;
}

/* Resalta el total de cada ticket con un color llamativo */
.ticket-total {
    color: #f1c40f; /* Dorado/Amarillo */
    border-top: 1px dashed #5f676e;
}


/* 2. Estilos para la vista de Detalle del Ticket (Factura) */

/* Cambia el fondo del contenedor principal de la factura */
.ticket-container {
    background-color: #4a5158;
    border-color: #5f676e;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

/* Pone todos los textos principales de la factura en color claro */
.ticket-header h2,
.ticket-header p,
.ticket-info p,
.ticket-items td,
.ticket-summary p,
.ticket-footer p {
    color: #ecf0f1;
}

/* Ajusta el color de las etiquetas y cabeceras de la tabla */
.ticket-info strong,
.ticket-items th {
    color: #ffffff; /* Blanco para máxima legibilidad */
}

/* Da un fondo a la cabecera de la tabla de productos */
.ticket-items th {
     background-color: #566573;
}

/* Resalta el TOTAL final de la factura */
.ticket-summary p.total-final,
.ticket-summary p.total-final span {
    color: #f1c40f !important; /* Dorado/Amarillo */
}

/* Ajusta todos los bordes internos para el nuevo tema oscuro */
.ticket-header,
.ticket-items th,
.ticket-items td,
.ticket-summary,
.ticket-footer {
    border-color: #5f676e !important;
}

/* === ESTILOS PARA LA VISTA DE DETALLE DEL TICKET (FACTURA) === */

/* 1. Contenedor principal de la factura */
.ticket-container {
    background-color: #4a5158; /* Fondo gris oscuro */
    color: #ecf0f1;           /* Color de texto claro por defecto */
    border: 1px solid #5f676e;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 2. Cabecera y textos de información */
.ticket-header h2 {
    color: #ffffff; /* Título principal en blanco brillante */
}

.ticket-header p,
.ticket-info p,
.ticket-footer p {
    color: #bdc3c7; /* Textos secundarios en un gris más suave */
}

.ticket-info strong {
    color: #ffffff; /* Etiquetas como "Cliente:" en blanco */
}

/* 3. Tabla de productos */
.ticket-items th {
    background-color: #566573; /* Fondo para la cabecera de la tabla */
    color: #ffffff;
}

/* 4. Resumen y Total */
.ticket-summary p.total-final,
.ticket-summary p.total-final span {
    color: #f1c40f !important; /* Total resaltado en dorado/amarillo */
    font-weight: bold;
}

/* 5. Ajuste de bordes y separadores */
.ticket-header,
.ticket-items th,
.ticket-items td,
.ticket-summary,
.ticket-footer {
    border-color: #5f676e !important;
}

/* 6. Estilo para el botón "Volver" */
.ticket-actions a.btn-outline-secondary,
.ticket-container a.btn { /* Selector para el botón de volver dentro de la factura */
    background-color: #5dade2;
    color: #ffffff;
    border: none;
    text-decoration: none;
}
.ticket-actions a.btn-outline-secondary:hover,
.ticket-container a.btn:hover {
    background-color: #3498db;
}

/* === AJUSTE A TEMA CLARO PARA VISTA DE TICKET (FONDO GRIS MÁS NOTABLE) === */

/* 1. Contenedor principal con fondo gris claro */
.ticket-container {
    background-color: #e9ecef !important; /* <<-- ESTE ES EL NUEVO TONO DE GRIS CLARO -->> */
    color: #343a40 !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* 2. Textos de la cabecera e información */
.ticket-header h2,
.ticket-info strong {
    color: #212529 !important;
}

.ticket-header p,
.ticket-info p,
.ticket-footer p,
.ticket-items td {
    color: #6c757d !important;
}

/* 3. Tabla de productos */
.ticket-items th {
    background-color: #dee2e6 !important; /* Un gris ligeramente más oscuro para la cabecera */
    color: #495057 !important;
}

/* 4. Resumen y Total */
.ticket-summary p {
    color: #495057 !important;
}

.ticket-summary p.total-final,
.ticket-summary p.total-final span {
    color: #c0392b !important;
}

/* 5. Ajuste de bordes para el tema claro */
.ticket-header,
.ticket-items th,
.ticket-items td,
.ticket-summary,
.ticket-footer {
    border-color: #ced4da !important;
}

/* Cambia el color de fondo de la sección de botones en las tarjetas de ticket */
.ticket-card-actions {
    background-color: #34495E;
    border-top: 1px solid #5f676e; 
}

/* === CORRECCIÓN DE ESTILOS PARA LA TABLA DE PRODUCTOS (FONDO PERMANENTE) === */

/* 1. Contenedor de la tabla (sin cambios) */
.admin-container .table-container {
    background-color: #34495e;
    border: none;
    padding: 1rem;
    border-radius: 8px;
}

/* 2. Cabecera de la tabla (sin cambios) */
.admin-container .table th {
    background-color: #2c3e50;
    color: #ffffff;
    border-bottom: 2px solid #5dade2;
}

/* 3. Celdas del cuerpo de la tabla (sin cambios) */
.admin-container .table td {
    color: #ecf0f1;
    border-bottom: 1px solid #4a627a;
}

/* 4. ESTILO CORREGIDO: Filas con fondo oscuro permanente */
.admin-container .table tbody tr {
    background-color: #34495e; /* <<-- Color oscuro base para TODAS las filas */
}

.admin-container .table tbody tr:nth-child(even) {
    background-color: #4a5158; /* <<-- Color ligeramente distinto para filas pares */
}

.admin-container .table tbody tr:hover {
    background-color: #566573; /* <<-- Un color de hover diferente para resaltar */
}