/* ==================================================
   HOJA DE ESTILOS PERSONALIZADA PARA CUBAN VIBES ADMIN
   ================================================== */

/* 1. IMPORTACIÓN DE FUENTES Y VARIABLES DE COLOR */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Paleta de Colores Cuban Vibes (copiada del sitio principal) */
  --primary: #D95D39; /* Naranja/Rojo del logo */
  --secondary: #4A948D; /* Turquesa del auto */
  --light: #FDF6E3;   /* Crema del fondo de la web */
  --dark: #3A6351;    /* Verde oscuro de la palmera */
  --warning: #F2C45A;  /* Amarillo del sol */
  --white: #ffffff;
  --dark-text: #333333;
  --sidenav-bg: #2c4f41; /* Un verde un poco más oscuro para el Sidenav */
}

/* 2. ESTILOS GENERALES Y LAYOUT */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--light);
  color: var(--dark-text);
  font-size: 16px;
}

.admin-layout-container {
  display: flex;
}

.admin-main-content {
  flex-grow: 1;
  padding-left: 225px; /* Ancho del Sidenav */
  transition: padding-left 0.3s ease;
}

/* 3. BARRA SUPERIOR (TOPNAV) */
.admin-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: 56px;
  background-color: var(--dark);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.admin-topnav .navbar-brand {
  color: var(--warning);
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
}

.admin-topnav .sidebar-toggle-btn {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
}

/* 4. MENÚ LATERAL (SIDENAV) */

.admin-sidenav {
  position: fixed;
  top: 56px; /* Altura del topnav */
  left: 0;
  bottom: 0;
  width: 225px;
  background-color: var(--sidenav-bg);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  z-index: 1031; /* <-- AÑADE ESTA LÍNEA */
}

.sidenav-menu {
  flex-grow: 1;
  padding: 1rem 0;
}

.sidenav-menu-heading {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.nav-link.active {
  background-color: var(--primary);
  color: var(--white);
  font-weight: 600;
}

.nav-link-icon {
  margin-right: 0.75rem;
  width: 20px; /* Alineación de iconos */
  text-align: center;
}

.sidenav-footer {
  padding: 1rem;
  background-color: rgba(0,0,0,0.2);
  font-size: 0.8rem;
}

/* 5. CONTENIDO PRINCIPAL (MAIN) */
main {
  padding-top: calc(56px + 2rem); /* Altura Topnav + Espacio */
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-family: 'Fredoka One', cursive;
  color: var(--dark);
  font-size: 2.5rem;
}

/* 6. TARJETAS DE ESTADÍSTICAS */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.stat-card h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--secondary);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stat-card .stat-value {
    font-family: 'Fredoka One', cursive;
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.stat-card .stat-link {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.stat-card .stat-link:hover {
    color: var(--primary);
}

/* Estilos de usuario y otros detalles (puedes expandir esto) */
.topnav-user-menu {
    position: relative;
}
.user-dropdown-toggle {
    cursor: pointer;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.user-dropdown-toggle .icon-arrow {
    margin-left: 8px;
    transition: transform 0.2s ease-in-out;
}
.user-dropdown-menu {
    display: none; /* JS se encargará de mostrarlo */
    position: absolute;
    right: 0;
    top: 40px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    min-width: 180px;
    border-radius: 5px;
}
.user-dropdown-menu.show {
    display: block;
}
.user-dropdown-menu li a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--dark-text);
    text-decoration: none;
}
.user-dropdown-menu li a:hover {
    background-color: #f5f5f5;
}
.user-dropdown-menu hr {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* ==================================================
   7. ESTILOS PARA GESTIÓN DE OPINIONES
   ================================================== */

.opinions-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ... otros estilos ... */

.opinion-card {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-left: 5px solid; /* Borde de color para estado */
    transition: box-shadow 0.3s ease;
    position: relative; /* <--- AÑADE ESTA LÍNEA */
}

/* ... el resto de tus estilos ... */

.opinion-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* Colores de estado */
.opinion-card.visible {
    border-left-color: var(--secondary); /* Turquesa para visible */
}
.opinion-card.hidden {
    border-left-color: #ccc; /* Gris para oculto */
}

.opinion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.opinion-meta {
    display: flex;
    align-items: center; /* ¡La clave! Alinea estrellas y etiqueta verticalmente */
    gap: 0.75rem;      /* Añade un espacio agradable entre las estrellas y la etiqueta */
}

.opinion-client .client-name {
    font-weight: 600;
    color: var(--dark-text);
    font-size: 1.1rem;
    display: block;
}

.opinion-client .client-profession {
    font-size: 0.9rem;
    color: #777;
}

.opinion-rating {
    font-size: 1rem;
     color: var(--warning); 
}
.opinion-rating span {
    font-weight: 600;
    color: var(--dark-text);
    margin-left: 0.5rem;
}

.opinion-body {
    padding: 1.5rem;
    line-height: 1.6;
}
.opinion-body p {
    margin: 0;
}

.opinion-actions {
    display: flex;
    gap: 1rem;
    padding: 0 1.5rem 1rem;
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}

.action-btn {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: transparent;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.action-btn i {
    margin-right: 0.5rem;
}

/* Botón de visibilidad */
.toggle-visibility-btn.is-visible {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}
.toggle-visibility-btn.is-visible:hover {
    background-color: #3b7b74; /* Un poco más oscuro */
}

.toggle-visibility-btn.is-hidden {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #555;
}
.toggle-visibility-btn.is-hidden:hover {
    background-color: #e0e0e0;
}

/* Botón de eliminar */
.delete-btn {
    color: var(--primary);
    border-color: var(--primary);
}
.delete-btn:hover {
    background-color: var(--primary);
    color: var(--white);
}

/* ================================================== */
/*   8. ESTILOS PARA MENÚ COLAPSABLE Y RESPONSIVE     */
/* ================================================== */

/* --- Funcionalidad del Menú Colapsable (Toggle) en ESCRITORIO --- */
/* Estas reglas se aplican a TODAS las pantallas por defecto */

/* CUANDO el menú está colapsado en ESCRITORIO... */
body.sidenav-toggled .admin-sidenav {
    width: 60px; /* ...reducimos su ancho al tamaño de los iconos. */
}

/* Ocultamos el texto y otros elementos dentro del menú colapsado */
body.sidenav-toggled .admin-sidenav .nav-link span,
body.sidenav-toggled .admin-sidenav .sidenav-menu-heading,
body.sidenav-toggled .admin-sidenav .sidenav-footer {
    display: none;
}

/* Centramos el icono que queda visible */
body.sidenav-toggled .admin-sidenav .nav-link {
    justify-content: center;
}

/* Y ajustamos el padding del contenido principal para que ocupe el espacio */
body.sidenav-toggled .admin-main-content {
    padding-left: 60px;
}

/* --- Diseño Responsive para MÓVILES (menos de 992px) --- */
@media (max-width: 991.98px) {
    /* Por defecto, el menú está COMPLETAMENTE OCULTO fuera de la pantalla */
    .admin-sidenav {
        width: 225px; /* Mantenemos su ancho natural para cuando se muestre */
        transform: translateX(-100%);
        /* ... (resto de las reglas no cambian) ... */
    }
    
    .admin-main-content {
        padding-left: 0; /* El contenido principal ocupa todo el ancho */
    }

    /* CUANDO SE ACTIVA EL MENÚ EN MÓVIL... */
    body.sidenav-toggled .admin-sidenav {
        /* ... el menú se desliza para hacerse visible */
        transform: translateX(0);
        /* ... y se muestra con su ancho completo (esto ya lo corregimos antes) */
        width: 225px; 
    }

    /* =================================================================== */
    /*          CAMBIO CLAVE: MOSTRAR LOS TEXTOS EN MÓVIL                  */
    /* =================================================================== */
    /* Anulamos las reglas que ocultaban el texto, para que AHORA SÍ se vean en móvil */
    body.sidenav-toggled .admin-sidenav .nav-link span,
    body.sidenav-toggled .admin-sidenav .sidenav-menu-heading,
    body.sidenav-toggled .admin-sidenav .sidenav-footer {
        display: block; /* O 'inline' o 'flex' según el elemento */
    }
    
    /* Restauramos la alineación normal del texto y el icono */
    body.sidenav-toggled .admin-sidenav .nav-link {
        justify-content: flex-start;
    }
    /* Restauramos el display del span */
     body.sidenav-toggled .admin-sidenav .nav-link span {
        display: inline;
    }

    /* Superposición oscura para enfocar en el menú */
    .sidenav-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 1030;
        display: none;
    }

    body.sidenav-toggled .sidenav-overlay {
        display: block;
    }
}
/* ================================================================ */
/*   9. ESTILOS PARA MENÚS LATERALES DESPLEGABLES (LÓGICA BASE)   */
/* ================================================================ */

/* Estilo base para el contenedor del submenú (acordeón) */
.collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

/* Estilo para los sub-enlaces */
.sidenav-menu-nested {
    padding-left: 1.5rem;
    flex-direction: column;
}
.sidenav-menu-nested .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Estilo para la flecha y su animación */
.sidenav-collapse-arrow {
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
}
/* Cuando el enlace tiene la clase 'open', la flecha rota */
.nav-link.open .sidenav-collapse-arrow {
    transform: rotate(-180deg);
}
/* El texto del desplegable se pone blanco cuando está desplegado */
.nav-link.open {
    color: var(--white);
}

/* Estado Activo (Página Actual) */
.sidenav-menu .nav-link.active {
    background-color: var(--primary);
    color: var(--white);
    font-weight: 600;
}
/* Regla específica para que el padre de un sub-enlace activo también se ponga naranja */
.nav-link-collapse.active {
    background-color: var(--primary);
    color: var(--white);
    font-weight: 600;
}


/* ================================================================ */
/*   10. ESTILOS PARA MENÚ COLAPSADO (LÓGICA DUAL: DESKTOP/MÓVIL)   */
/* ================================================================ */

/* --- A. Lógica para Escritorio (pantallas más anchas que 992px) --- */
@media (min-width: 992px) {
    body.sidenav-toggled .admin-sidenav {
        /* Hacemos que cada elemento principal sea un ancla de posicionamiento */
        .nav-link-collapse {
            position: relative;
        }
        
        /* El submenú (.collapse) se posiciona de forma absoluta y flotante */
        .collapse {
            position: absolute;
            left: 55px; /* Solapamos 5px para evitar el hueco al mover el cursor */
            top: 0;
            width: 200px;
            background-color: var(--sidenav-bg);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border-radius: 0 5px 5px 0;
            z-index: 1032;

            /* Ocultamos el submenú usando visibilidad y opacidad */
            visibility: hidden;
            opacity: 0;
            max-height: none !important; /* Anulamos la animación de altura en esta vista */
            transition: opacity 0.2s ease, visibility 0s 0.2s; /* Retardo al desaparecer */
        }

        /* Al pasar el ratón sobre el enlace padre... */
        .nav-link-collapse:hover {
            /* ...hacemos visible el submenú que le sigue */
            & + .collapse {
                visibility: visible;
                opacity: 1;
                transition-delay: 0s; /* Hacemos que aparezca al instante */
            }
        }
        
        /* Cuando el menú flotante está visible, también debe estarlo si se pasa el cursor sobre él */
        .collapse:hover {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }

        /* Ocultamos la flecha del desplegable en esta vista, no es necesaria */
        .sidenav-collapse-arrow {
            display: none;
        }
    }
}

/* --- B. Lógica para Móvil (pantallas de 991px o menos) --- */
@media (max-width: 991.98px) {
    /* CUANDO SE ACTIVA EL MENÚ EN MÓVIL... */
    body.sidenav-toggled .admin-sidenav {
        /* ... se muestra con su ancho completo para evitar textos aplastados */
        width: 225px;
    }

    /* Nos aseguramos de que la flecha SÍ sea visible en pantallas pequeñas */
    body.sidenav-toggled .admin-sidenav .sidenav-collapse-arrow {
        display: inline-block !important;
    }
}

/* ================================================== */
/*   11. ESTILOS PARA GESTIÓN DE RESERVAS             */
/* ================================================== */

/* --- Lista de Tarjetas de Reserva (una columna) --- */
.reservations-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reservation-card {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-left: 5px solid;
    transition: box-shadow 0.3s ease;
}
.reservation-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1); }

/* Colores de estado de la reserva */
.reservation-card.status-pending { border-left-color: var(--warning); }
.reservation-card.status-confirmed { border-left-color: #28a745; } /* Verde explícito */
.reservation-card.status-cancelled { border-left-color: #dc3545; } /* Rojo explícito */

/* --- Header de la Tarjeta --- */
.reservation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.client-info .client-name { font-weight: 600; font-size: 1.2rem; display: block; }
.client-info .service-name { font-size: 0.9rem; color: #777; }
.status-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    text-transform: capitalize;
}
.status-pending .status-badge { background-color: var(--warning); }
.status-confirmed .status-badge { background-color: #28a745; }
.status-cancelled .status-badge { background-color: #dc3545; }

/* --- Cuerpo Detallado de la Tarjeta --- */
.reservation-details {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    background-color: #fafafa;
}

.info-block strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dark);
}
.info-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.info-block li {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #555;
}
.info-block li strong { display: inline; }
.info-block.extra-info {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    border-top: 1px solid #eee;
    padding-top: 1rem;
    margin-top: 1rem;
}
.info-block.extra-info p { margin: 0; font-style: italic; }

/* --- Resumen (Precio) y Acciones --- */
/* Busca .reservation-summary en tu CSS y reemplázalo con este bloque */

.reservation-summary {
    display: flex; /* La clave para la nueva disposición */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Alinear verticalmente */
    padding: 0.75rem 1.25rem;
    background-color: var(--dark-bg);
    color: var(--light-text);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Nuevos contenedores para los botones */
.reservation-actions-left,
.reservation-actions-right {
    display: flex;
    gap: 0.5rem; /* Espacio entre botones si hay más de uno */
}

/* Estilos para la sección del precio */
.summary-price {
    text-align: right;
}

.summary-price span {
    display: block; /* Para que el título y el precio estén en dos líneas */
    line-height: 1.2;
}

.summary-price .price-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.reservation-actions {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    background-color: #f8f9fa;
}

/* --- Menú Desplegable para Cambiar Estado (Controlado por JS) --- */
.status-dropdown {
    position: relative;
    display: inline-block;
}

.status-dropdown .status-btn {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #555;
}

.status-dropdown .dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    bottom: 100%; 
    left: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
}

.status-dropdown .dropdown-content.show {
    display: block;
}

.status-option {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
}

.status-option::before {
    content: '●';
    margin-right: 10px;
}

/* ====================================================================== */
/*   NUEVO: REGLAS DE COLOR PARA LAS OPCIONES DEL DESPLEGABLE             */
/* ====================================================================== */
.status-option.confirmed {
    color: #28a745 !important; /* Verde */
}
.status-option.pending {
    color: #ffc107 !important;  /* Amarillo */
}
.status-option.cancelled {
    color: #dc3545 !important;/* Rojo */
}

.status-option:hover {
    background-color: #f1f1f1;
}

/* --- NUEVOS ESTILOS PARA EL FILTRO DE ESTADO --- */
.status-filter-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-label {
    font-weight: 500;
    color: var(--dark-text);
    margin-bottom: 0; /* Anular margen por defecto de Bootstrap */
}

.status-filter-container {
    position: relative;
    display: inline-block;
}

.filter-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary); /* Color turquesa */
    pointer-events: none; /* Permite hacer clic a través del icono */
}

.status-filter-select {
    -webkit-appearance: none; /* Quitar apariencia por defecto en Safari/Chrome */
    -moz-appearance: none;    /* Quitar apariencia por defecto en Firefox */
    appearance: none;         /* Quitar apariencia por defecto estándar */
    
    background-color: var(--white);
    border: 1px solid #ddd;
    border-radius: 25px; /* Bordes completamente redondeados */
    padding: 0.6rem 1.5rem 0.6rem 2.75rem; /* Padding: arriba/abajo, derecha, izquierda (para dejar espacio al icono) */
    font-weight: 500;
    color: var(--dark-text);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    
    /* Estilo para la flecha del desplegable */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%233A6351' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 8px 10px;
}

.status-filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(217, 93, 57, 0.15); /* Sombra naranja suave */
}


/* --- Estilos para el Cambiador de Vista --- */
.view-switcher-wrapper {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.view-btn {
    background-color: var(--white);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: #888;
    transition: background-color 0.2s, color 0.2s;
}

.view-btn:not(:last-child) {
    border-right: 1px solid #ddd;
}

.view-btn.active {
    background-color: var(--secondary);
    color: var(--white);
}

/* --- Estilos para la Tabla de Reservas --- */
.reservations-table-wrapper {
    overflow-x: auto; /* Permite scroll horizontal en pantallas pequeñas */
}
.reservations-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}

.reservations-table th, .reservations-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.reservations-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--dark-text);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.reservations-table tbody tr:hover {
    background-color: #fdf6e3; /* Color crema del fondo */
}

/* Estilo para la celda de Estado */
.status-cell span {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    text-transform: capitalize;
}

.status-cell .status-pending { background-color: var(--warning); }
.status-cell .status-confirmed { background-color: #28a745; }
.status-cell .status-cancelled { background-color: #dc3545; }

/* Estilo para el indicador de nueva reserva */
.reservation-card {
    position: relative; /* Necesario para que el indicador se posicione correctamente */
}
/* Estilo para el indicador de nueva reserva (CORREGIDO) */
.reservation-card .new-indicator {
    /* Se eliminó position, top, right, z-index */
    background-color: var(--primary);
    color: var(--white);
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* NUEVO: Contenedor para alinear la etiqueta y la insignia */
.reservation-status-container {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre la etiqueta "NUEVA" y la insignia de estado */
}

/* ============================================= */
/*          ESTILOS GLOBALES DEL PANEL           */
/* ============================================= */

/* Estilo para el indicador de 'NUEVA' */
.new-indicator {
    background-color: #D95D39; /* Naranja primario de tu marca */
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 8px;
}

/* ============================================= */
/*          ESTILOS PARA EL CALENDARIO           */
/* ============================================= */

#calendar {
    font-family: 'Poppins', sans-serif;
}

/* Estilo de los botones del calendario (Hoy, Mes, Semana, etc.) */
.fc .fc-button-primary {
    background-color: #3A6351; /* Color secundario de tu marca */
    border-color: #3A6351;
    transition: background-color 0.2s ease;
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:active {
    background-color: #2e4f40; /* Un tono más oscuro para el hover */
    border-color: #2e4f40;
}

/* Estilo de los eventos en el calendario */
.fc-event {
    background-color: #D95D39 ; /* Color primario de tu marca */
    border: 1px solid #b84d2f ;
    padding: 2px 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* ESTILO CLAVE: Eventos que ya han pasado */
.fc-event-past {
    opacity: 0.6;
    background-color: #6c757d !important; /* Un gris para denotar que ya pasó */
    border-color: #5a6268 !important;
}

.fc-daygrid-event {
    white-space: normal !important; /* Permite que el texto del evento se divida en varias líneas */
    align-items: center;
}

/* Busca esta regla en la sección de estilos del calendario en admin-style.css y modifícala */

.fc-event-main {
    padding: 3px 6px !important; /* Aumentamos el padding horizontal un poco */
    display: flex; /* Usamos flexbox para alinear bien */
    align-items: center;
    overflow: hidden; /* Evita que el texto se desborde */
}

.fc-event-title {
    color: #ffffff;
    font-weight: 500;
    white-space: normal !important; /* Asegura que el título también se divida en líneas */
}

/* ============================================= */
/*       ESTILOS PARA EL MODAL DEL CALENDARIO    */
/* ============================================= */

.modal {
    display: none;
}

.modal-header {
    background-color: var(--dark-bg);
    color: var(--light-text);
    border-bottom: 2px solid var(--primary-color);
}

.modal-header .modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.modal-header .close {
    color: var(--light-text);
    opacity: 0.8;
}

.modal-body p {
    margin-bottom: 0.5rem;
}

.modal-info-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.modal-info-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.modal-info-section h6 {
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 0.75rem;
}

.modal-info-section ul {
    list-style-type: none;
    padding-left: 0;
}

.modal-info-section li {
    margin-bottom: 0.25rem;
}

/* Busca este bloque en tu css/admin-style.css y reemplázalo por completo */

/* ============================================= */
/*       ESTILOS PARA EL POPUP PERSONALIZADO     */
/* ============================================= */

/* El fondo oscuro que cubre toda la pantalla (sin cambios) */
.custom-popup {
    display: none; 
    position: fixed; 
    z-index: 1050; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.6); 
    padding-top: 60px; 
}

/* El contenedor del contenido del popup (ACTUALIZADO) */
.popup-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #ddd;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 8px;
    animation: fadeIn 0.3s;
    
    /* ========================================================== */
    /*          CAMBIO CLAVE: Controlar la altura máxima          */
    /* ========================================================== */
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* El popup nunca ocupará más del 85% de la altura de la pantalla */
}

/* Cabecera del popup (sin cambios) */
.popup-header {
    padding: 1rem 1.5rem;
    background-color: var(--dark-bg);
    color: var(--light-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--primary-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* Evita que el header se encoja */
    flex-shrink: 0; 
}

.popup-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.popup-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.popup-close:hover,
.popup-close:focus {
    color: #fff;
    text-decoration: none;
}

/* Cuerpo del popup (ACTUALIZADO) */
.popup-body {
    padding: 1.5rem;

    /* ========================================================== */
    /*          CAMBIO CLAVE: Habilitar el scroll interno         */
    /* ========================================================== */
    overflow-y: auto; /* ¡Esta es la línea más importante! */
}

/* Secciones de detalle (sin cambios) */
.detail-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}
.detail-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* ... (resto de estilos de .detail-section sin cambios) ... */
.detail-section h6 {
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 0.75rem;
}
.detail-section p { margin-bottom: 0.5rem; }
.detail-section ul { list-style-type: none; padding-left: 0; }
.detail-section li { margin-bottom: 0.25rem; }

/* ============================================= */
/*          ESTILOS RESPONSIVOS DEL PANEL        */
/* ============================================= */
@media (max-width: 768px) {

    /* Ajustar el tamaño general de la fuente del calendario en móvil */
    #calendar {
        font-size: 14px;
    }

    /* Reducir el tamaño del título del evento */
    .fc-event-title {
        font-size: 0.85rem;
    }

    /* Hacer la vista de lista más compacta */
    .fc-list-event-title a {
        font-size: 0.9rem;
    }
    
    .fc-list-event-time {
        font-size: 0.8rem;
    }

    /* Ajustar el popup para pantallas pequeñas */
    .popup-content {
        width: 95%; /* Ocupa casi todo el ancho */
        padding-top: 20px;
    }

    .popup-body {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .detail-section h6 {
        font-size: 1rem;
    }
}

/* ============================================= */
/*       ESTILOS RESPONSIVOS PARA EL CALENDARIO    */
/* ============================================= */

@media (max-width: 576px) {

    /* Hacer el contenedor del calendario más compacto */
    .card.p-3 {
        padding: 0.5rem !important;
    }

    /* Reducir el tamaño de la cabecera (título del mes) */
    .fc .fc-toolbar-title {
        font-size: 1.25em; /* Un poco más pequeño */
    }

    /* Reducir el tamaño de los botones */
    .fc .fc-button {
        padding: 0.25em 0.5em;
        font-size: 0.8em;
    }

    /* Reducir el tamaño de los números de los días */
    .fc .fc-daygrid-day-number {
        font-size: 0.8em;
        padding: 2px;
    }

    /* Ajustar el tamaño del texto del evento */
    .fc-event-title {
        font-size: 0.7rem; /* Más pequeño para que quepa mejor */
        line-height: 1.2;
    }
    
    /* Ajustar el padding interno del evento */
    .fc-event-main {
        padding: 2px 4px !important;
    }

    /* Ajustar el popup para pantallas pequeñas */
    .custom-popup {
        padding-top: 20px;
    }
    
    .popup-content {
        width: 95%; /* Ocupa casi todo el ancho */
        max-height: 90vh;
    }

    .popup-body {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .detail-section h6 {
        font-size: 1rem;
    }
}


/* ============================================= */
/*       ESTILOS PARA EL HISTORIAL DE RESERVAS   */
/* ============================================= */

.history-card {
    background-color: #f8f9fa; /* Un fondo ligeramente gris */
    border: 1px solid #dee2e6;
    border-left: 5px solid #6c757d; /* Borde izquierdo gris para indicar "archivado" */
    border-radius: 5px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.history-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--dark-text);
}

.history-title .fa-check-circle {
    color: #28a745; /* Verde de éxito */
}

.history-title h5 {
    margin: 0;
    font-size: 1.1rem;
}

.history-date {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
}

.history-body {
    padding: 1.25rem;
    font-size: 0.9rem;
}

.history-body p {
    margin-bottom: 0.5rem;
}

.history-vehicles {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 0.25rem;
}

.history-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: #e9ecef;
    border-top: 1px solid #dee2e6;
}

.history-footer .price-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-text);
}

.history-footer .cancel-btn {
    background-color: #dc3545; /* Rojo para cancelar */
    color: white;
}

.history-footer .cancel-btn:hover {
    background-color: #c82333;
}
/* Añade esto al final de la sección de estilos del historial en admin-style.css */

.history-body .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
    gap: 1.5rem; /* Espacio entre las columnas */
}

/* Para pantallas pequeñas, las columnas se apilan una encima de la otra */
@media (max-width: 768px) {
    .history-body .info-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 0.5rem;
    }
}

/* ============================================= */
/*       ESTILOS PARA EL BOTÓN DE CONFIRMAR PAGO   */
/* ============================================= */

/* Estilo del botón "Confirmar Pago" */
.confirm-payment-btn {
    background-color: #28a745; /* Verde de éxito */
    color: white;
    font-weight: 500;
}
.confirm-payment-btn:hover {
    background-color: #218838;
}

/* Estilo para la etiqueta "Pago Confirmado" */
.payment-confirmed-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    background-color: #e9ecef;
    color: #3A6351; /* Verde oscuro de tu marca */
    font-weight: 600;
    font-size: 0.9rem;
}

.payment-confirmed-label .fa-check-double {
    color: #28a745;
}

/* Estilo para la tarjeta con estado 'paid' */
.reservation-card.status-paid {
    border-left-color: #28a745;
}
.reservation-card.status-paid .status-badge {
    background-color: #28a745;
}

/* ============================================= */
/*       ESTILOS PARA EL ESTADO 'PAID'           */
/* ============================================= */

/* Color del borde izquierdo en la vista de tarjetas */
.reservation-card.status-paid {
    border-left-color: #28a745; /* Verde éxito */
}

/* Color del badge de estado en la vista de tarjetas */
.status-paid .status-badge {
    background-color: #28a745;
}

/* Color del badge de estado en la vista de tabla */
.status-cell .status-paid {
    background-color: #28a745;
}

/* ============================================= */
/*       ESTILOS RESPONSIVOS PARA LAS TARJETAS     */
/* ============================================= */

@media (max-width: 768px) {

    /* Hacer que la barra inferior sea vertical y esté centrada */
    .reservation-summary {
        flex-direction: column; /* Apilar elementos verticalmente */
        align-items: stretch;   /* Estirar elementos para que ocupen el ancho */
        gap: 1rem;              /* Espacio entre los bloques */
        padding: 1rem;
    }

    /* Alinear los botones a cada extremo en su propio contenedor */
    .reservation-actions-left,
    .reservation-actions-right {
        width: 100%;
        justify-content: space-between; /* Espacio entre los botones si hay dos */
    }

    /* Asegurarse de que los botones crezcan para llenar el espacio */
    .reservation-actions-left .action-btn,
    .reservation-actions-right .action-btn {
        flex-grow: 1; /* Permite que los botones se expandan */
    }
    
    /* Centrar la sección del precio */
    .summary-price {
        text-align: center;
        width: 100%;
        padding: 0.5rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .summary-price .price-value {
        font-size: 1.8rem; /* Un poco más grande para destacar */
    }

    /* Ajustes generales de la tarjeta en móvil */
    .reservation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .reservation-details {
        grid-template-columns: 1fr; /* Una sola columna para los detalles */
    }
}


/* ============================================= */
/*       ESTILOS PARA LA SECCIÓN DE FINANZAS     */
/* ============================================= */

/* Tarjeta destacada para la métrica más importante */
.stat-card--highlight {
    background-color: var(--dark); /* Verde oscuro de la palmera */
    color: var(--white);
}

.stat-card--highlight h4 {
    color: var(--light); /* Crema del fondo */
}

.stat-card--highlight .stat-value {
    color: var(--warning); /* Amarillo del sol */
    font-size: 3rem; /* Un poco más grande para destacar */
}

.stat-card--highlight .stat-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* Estilo para el subtítulo de las tarjetas normales */
.stat-card .stat-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: -0.75rem; /* Acercarlo un poco al valor principal */
    display: block;
}

/* ============================================= */
/*       ESTILOS PARA MÉTRICAS DE COMPARACIÓN    */
/* ============================================= */

.stat-comparison {
    margin-top: 0.75rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Estilo para cambio positivo (verde) */
.stat-comparison.positive-change {
    color: #28a745; /* Verde éxito */
}
.stat-comparison.positive-change::before {
    font-family: "Font Awesome 6 Free";
    content: '\f062'; /* Icono de flecha hacia arriba */
    font-weight: 900;
    margin-right: 0.5rem;
}

/* Estilo para cambio negativo (rojo) */
.stat-comparison.negative-change {
    color: #dc3545; /* Rojo peligro */
}
.stat-comparison.negative-change::before {
    font-family: "Font Awesome 6 Free";
    content: '\f063'; /* Icono de flecha hacia abajo */
    font-weight: 900;
    margin-right: 0.5rem;
}

/* ============================================= */
/*           ESTILOS PARA LOS GRÁFICOS (VERSIÓN FINAL Y ROBUSTA) */
/* ============================================= */

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

/* Contenedor principal: define el espacio y el fondo */
.chart-container {
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    height: 400px; /* Clave para la estabilidad del tamaño */
    display: flex;
    flex-direction: column;
}

.chart-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--secondary);
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    flex-shrink: 0; /* Evita que el título se encoja */
}

/* Wrapper: posiciona el canvas dentro del espacio disponible */
.chart-wrapper {
    position: relative;
    flex-grow: 1; /* Ocupa el espacio restante que dejó el título */
    min-height: 0; /* Arreglo de Flexbox para un renderizado consistente */
}

/* ============================================= */
/*           ESTILOS PARA GESTIÓN DE GUÍAS        */
/* ============================================= */

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-primary:hover {
    background-color: #b84d2f; /* Tono más oscuro de --primary */
}
.btn-secondary {
    background-color: #6c757d;
    color: var(--white);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.guides-list {
    display: flex;          /* CAMBIO: De grid a flexbox */
    flex-direction: column; /* CAMBIO: Apila los elementos verticalmente */
    gap: 1.5rem;
    max-width: 900px;       /* AÑADIDO: Evita que las tarjetas sean demasiado anchas en pantallas grandes */
    margin: 0 auto;         /* AÑADIDO: Centra la lista en la página para un look más limpio */
}

.guide-card {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    padding: 1.5rem;
    gap: 1.5rem;
    transition: transform 0.2s ease;
}
.guide-card:hover {
    transform: translateY(-5px);
}

.guide-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.guide-photo-default {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
}

.guide-info {
    flex-grow: 1;
}

.guide-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: var(--dark-text);
}

.guide-contact {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #6c757d;
}
.guide-contact i {
    color: var(--secondary);
    margin-right: 0.5rem;
}
.guide-contact a {
    color: inherit;
    text-decoration: none;
}
.guide-contact a:hover {
    color: var(--primary);
}

.guide-languages {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.language-tag {
    background-color: var(--light);
    color: var(--dark);
    padding: 0.25rem 0.6rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.guide-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.guide-actions .action-btn {
    background: #f1f3f5;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.guide-actions .action-btn:hover {
    background-color: #dee2e6;
}
.guide-actions .edit-btn { color: var(--secondary); }
.guide-actions .delete-btn { color: var(--primary); }

/* --- Estilos del Modal --- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-content {
    background-color: var(--white);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body {
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    margin-top: 1.5rem;
}

/* ============================================= */
/*       ESTILOS PARA ASIGNACIÓN DE GUÍAS (CORREGIDO) */
/* ============================================= */

.history-footer {
    display: grid;
    /* CAMBIO: Ajustamos a 3 columnas para Guía, Precio y Acciones */
    grid-template-columns: 1fr auto auto; 
    align-items: center;
    gap: 1rem;
}

/* AÑADIDO: Estilo para el precio en el footer */
.history-footer .price-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-text);
    text-align: center; /* Centramos el precio */
}

.assigned-guide {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--dark);
}

.assigned-guide i {
    color: var(--secondary);
}

.history-footer .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.assign-guide-btn {
    background-color: var(--secondary) !important;
    color: white !important;
}
.assign-guide-btn:hover {
    background-color: #3b7b74 !important;
}

/* ============================================= */
/*           ESTILOS PARA PÁGINA DE ESTADÍSTICAS */
/* ============================================= */

.stats-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e9ecef;
    margin-top: 2rem;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.tab-btn i {
    margin-right: 0.5rem;
}
.tab-btn:hover {
    color: var(--dark-text);
}
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.ranking-title {
    font-size: 1.2rem;
    color: var(--dark-text);
    margin-bottom: 1rem;
}

.ranking-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.ranking-item {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.rank-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #adb5bd;
    width: 50px;
    flex-shrink: 0;
}
.rank-number.rank-gold { color: #f2c45a; }
.rank-number.rank-silver { color: #ced4da; }
.rank-number.rank-bronze { color: #cd7f32; }

.item-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dark-text);
    flex-grow: 1;
}

.item-count {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
}
.item-count span {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c757d;
    margin-left: 0.25rem;
}