/* Turpial Airlines - Sistema de Gestión de Solicitudes */
/* Estilos principales - Manteniendo el look and feel original */
/* Navegación actualizada v2.2.0 - Estilo plano minimalista */
/* Tipografía Montserrat v2.1.0 - Sistema coherente de mayúsculas/minúsculas */
/* Header expandido v2.2.0 - Más espacio y bordes amarillos en botones */
/* Filtros rediseñados v2.4.0 - Sección análisis con métricas y botones */
/* Botones mejorados v2.5.0 - Font-weight consistente en estados activos */
/* Estilo corporativo v2.6.0 - Botones limpios sin bordes negros */
/* Layout mejorado v2.7.0 - Métricas separadas y cards independientes */
/* Filtros simplificados v2.8.0 - Card limpia con espaciado mejorado */
/* Cards compactas v2.9.0 - Versión compacta y responsive */
/* Dashboard operador v3.0.0 - Panel personal motivacional */
/* Modal expandido v3.1.0 - Sin scroll, más espacio */
/* Gráficos de Pie v3.3.0 - Nuevas métricas con visualización circular */
/* Responsive FINAL v4.0.0 - Sin scroll horizontal, 100% adaptable */

/* ===== PREVENCIÓN DE SCROLL HORIZONTAL ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Asegurar que ningún elemento se salga del viewport */
*, *::before, *::after {
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #FFFFFF; /* Fondo blanco elegante */
    color: #333333; /* Texto oscuro por defecto */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
}

/* Sistema tipográfico Montserrat */
/* Títulos principales - Primera letra mayúscula */
h1, h2, h3, .hero-title, .section-title {
    text-transform: capitalize;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Subtítulos y descripciones - Minúsculas normales */
h4, h5, h6, .hero-subtitle, .subtitle, p, .description {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* --- BOTONES UNIVERSALES CON CAPITALIZACIÓN Y DEGRADADO SEGÚN COLOR --- */

.turpial-btn, .turpial-btn-yellow, .turpial-btn-secondary, .turpial-btn-neutral, .bg-green-500, .bg-blue-500, .bg-gray-500, .bg-yellow-500 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-transform: capitalize !important;
  letter-spacing: 0.01em;
  border-radius: 12px;
  padding: 0.85rem 2.2rem;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  border-width: 2px;
  border-style: solid;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  outline: none;
  cursor: pointer;
  display: inline-block;
}

/* BOTÓN NEGRO/MORADO OSCURO */
.turpial-btn-secondary, .bg-gray-500 {
  background: linear-gradient(135deg, #18122B 0%, #2D2D44 100%);
  color: #F5F5F5;
  border-color: #A084E8;
  box-shadow: 0 2px 8px 0 rgba(160, 132, 232, 0.15);
}
.turpial-btn-secondary:hover, .bg-gray-500:hover {
  background: linear-gradient(135deg, #22144b 0%, #3a2e5f 100%);
  color: #fff;
  border-color: #BCA7F7;
}

/* BOTÓN AMARILLO/NARANJA */
.turpial-btn-yellow, .bg-yellow-500 {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  color: #18122B;
  border-color: #FFD95A;
  box-shadow: 0 2px 8px 0 rgba(255, 193, 7, 0.15);
}
.turpial-btn-yellow:hover, .bg-yellow-500:hover {
  background: linear-gradient(135deg, #FFB300 0%, #FFC107 100%);
  color: #18122B;
  border-color: #FFD95A;
}

/* BOTÓN VERDE */
.bg-green-500 {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #fff;
  border-color: #A7F3D0;
  box-shadow: 0 2px 8px 0 rgba(34, 197, 94, 0.15);
}
.bg-green-500:hover {
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
  color: #fff;
  border-color: #6EE7B7;
}

/* BOTÓN AZUL */
.bg-blue-500 {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: #fff;
  border-color: #93C5FD;
  box-shadow: 0 2px 8px 0 rgba(59, 130, 246, 0.15);
}
.bg-blue-500:hover {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  color: #fff;
  border-color: #60A5FA;
}

/* BOTÓN NEUTRAL (GRIS) */
.turpial-btn-neutral {
  background: linear-gradient(135deg, #6C757D 0%, #495057 100%);
  color: #F5F5F5;
  border-color: #A084E8;
  box-shadow: 0 2px 8px 0 rgba(160, 132, 232, 0.10);
}
.turpial-btn-neutral:hover {
  background: linear-gradient(135deg, #495057 0%, #6C757D 100%);
  color: #fff;
  border-color: #BCA7F7;
}

/* BOTÓN BLANCO (si existe) */
.bg-white, .turpial-btn-white {
  background: #fff;
  color: #18122B;
  border-color: #E5E7EB;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
}
.bg-white:hover, .turpial-btn-white:hover {
  background: #F3F4F6;
  color: #18122B;
  border-color: #D1D5DB;
}

/* Navegación estilo plano minimalista (como imagen objetivo) */
.nav-link {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: #2D2D2D;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.875rem;
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    margin: 0 0.25rem;
}

.nav-link.active {
    color: #000000;
    background: #FFC107;
    border: 1px solid #FFC107;
    font-weight: 600;
}

.nav-link:hover:not(.active) {
    color: #FFC107;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Botones especiales en la barra de navegación (ADMIN, ACTUALIZAR, SALIR) */
.turpial-header .turpial-btn-yellow,
.turpial-header .turpial-btn-neutral,
.turpial-header .turpial-btn-secondary {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    margin: 0 0.3rem;
    background: #2D2D2D;
    color: #FFFFFF;
}

.turpial-header .turpial-btn-yellow {
    background: #FFC107;
    color: #1E1E1E;
}

.turpial-header .turpial-btn-yellow:hover {
    background: #FFB300;
}

.turpial-header .turpial-btn-neutral:hover,
.turpial-header .turpial-btn-secondary:hover {
    background: #404040;
}

/* Estados activos y focus para botones del header */
.turpial-header .turpial-btn-yellow:active,
.turpial-header .turpial-btn-neutral:active,
.turpial-header .turpial-btn-secondary:active {
    font-weight: 600;
}

.turpial-header .turpial-btn-yellow:focus,
.turpial-header .turpial-btn-neutral:focus,
.turpial-header .turpial-btn-secondary:focus {
    font-weight: 600;
    outline: none;
}

/* Secciones */
.section {
    min-height: 80vh; /* Para asegurar que las secciones ocupen espacio */
    padding-top: 80px; /* Offset por el header fijo */
    padding-bottom: 40px;
}

/* Sistema de páginas */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* Ocultar la app principal durante la carga inicial */
.main-app {
    display: none;
}

/* Evitar flash de contenido no estilizado */
body {
    visibility: visible;
}

body.loading {
    visibility: hidden;
}

/* Página de Inicio con background del avión */
#inicio {
    background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Móvil - desactivar attachment fixed para mejor rendimiento */
@media (max-width: 768px) {
    #inicio {
        background-attachment: scroll;
        min-height: 100vh;
        padding: 1rem 0.5rem;
    }
}

#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-section {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: clamp(1rem, 4vw, 2rem);
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 800;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    font-weight: 400;
    opacity: 0.95;
    line-height: 1.4;
}

/* Responsive para móviles - Ya no necesario con clamp() */

/* Tablas */
.table-header-yellow th {
    background-color: #FFC107;
    color: #1E1E1E; /* Darker text for better contrast */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-row-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-row-clickable:hover {
    background-color: #f8f9fa;
}

.table-row-even {
    background-color: #f8f9fa;
}

.table-row-odd {
    background-color: #ffffff;
}

.table-row-even:hover,
.table-row-odd:hover {
    background-color: #e9ecef;
}

.status-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Scrollbar personalizada para WebKit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Métricas */
.metric-card {
    background-color: #4A4A4A;
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    color: white;
}

.metric-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFC107;
}

.metric-label {
    font-size: 1rem;
    color: #E0E0E0;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Fondo específico para métricas */
#metricas {
    background-color: #F8F9FA;
}

#metricas .metric-card .metric-label {
    color: #6C757D;
    font-weight: 600;
}

/* Modal */
#conversationModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    width: 95%;
    max-width: 1200px; /* Más grande que antes */
    max-height: 95vh; /* Más alto que antes */
    border-radius: 8px;
    overflow-y: auto;
    border: 2px solid #FFC107;
}

.modal-header {
    background: linear-gradient(135deg, #FFC107 0%, #e0a800 100%);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E1E1E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.close {
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: #1E1E1E;
    background: none;
    border: none;
    transition: opacity 0.3s ease;
}

.close:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 2rem;
    max-height: calc(95vh - 120px); /* Asegurar espacio para scroll */
    overflow-y: auto;
}

/* Mejorar la apariencia de los campos del modal */
.modal-body input, 
.modal-body select, 
.modal-body textarea {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.modal-body input:focus, 
.modal-body select:focus, 
.modal-body textarea:focus {
    border-color: #FFC107;
    outline: none;
}

.modal-body label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

/* Botones del modal más grandes */
.modal-body button {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Secciones dentro del modal */
.modal-body .bg-gray-50 {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.modal-body .grid {
    gap: 1.5rem;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FFC107;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

/* Filtros activos */
#filtrosActivos {
    margin-top: 1rem;
}

#filtrosActivos .filtro-activo {
    display: inline-block;
    background-color: #FFC107;
    color: #1E1E1E;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.table-mobile-scroll {
    overflow-x: auto;
}

/* ========== ESTILOS DUPLICADOS ELIMINADOS ========== */
/* Los estilos de botones y navegación están definidos arriba con morphism */

/* Estilos para inputs y formularios */
.filter-input-simple, .filter-select-simple {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #2D2D2D;
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-input-simple:focus, .filter-select-simple:focus {
    outline: none;
    border: 2px solid #FFC107;
}

/* Estilo para cards de métricas */
.metric-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.metric-card:hover {
    border-color: #FFC107;
}

/* Estilo para el filtro container */
.filters-container-simple {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Secciones */
.section {
    min-height: 80vh; /* Para asegurar que las secciones ocupen espacio */
    padding-top: 80px; /* Offset por el header fijo */
    padding-bottom: 40px;
}

/* Sistema de páginas */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* Ocultar la app principal durante la carga inicial */
.main-app {
    display: none;
}

/* Evitar flash de contenido no estilizado */
body {
    visibility: visible;
}

body.loading {
    visibility: hidden;
}

/* Página de Inicio con background del avión */
#inicio {
    background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-section {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 2rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    font-weight: 400;
    opacity: 0.95;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-section {
        padding: 1rem;
    }
}

/* Tablas */
.table-header-yellow th {
    background-color: #FFC107;
    color: #1E1E1E; /* Darker text for better contrast */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-row-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-row-clickable:hover {
    background-color: #f8f9fa;
}

.table-row-even {
    background-color: #f8f9fa;
}

.table-row-odd {
    background-color: #ffffff;
}

.table-row-even:hover,
.table-row-odd:hover {
    background-color: #e9ecef;
}

.status-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Scrollbar personalizada para WebKit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Métricas */
.metric-card {
    background-color: #4A4A4A;
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    color: white;
}

.metric-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFC107;
}

.metric-label {
    font-size: 1rem;
    color: #E0E0E0;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Fondo específico para métricas */
#metricas {
    background-color: #F8F9FA;
}

#metricas .metric-card .metric-label {
    color: #6C757D;
    font-weight: 600;
}

/* ===== FILTROS DISCRETOS (COMO ANTES) ===== */
.filters-container-simple {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.filter-title-simple {
    font-size: 1.2rem;
    font-weight: 600;
    color: #FFC107;
    margin-bottom: 1rem;
}

.filter-form-simple {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-row-simple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.filter-item-simple {
    display: flex;
    flex-direction: column;
}

.filter-label-simple {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.filter-input-simple, .filter-select-simple {
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    color: #333;
    transition: border-color 0.3s ease;
}

.filter-input-simple:focus, .filter-select-simple:focus {
    outline: none;
    border-color: #FFC107;
}

.filter-actions-simple {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ===== TABLA ADAPTABLE AL TAMAÑO DE PANTALLA ===== */
.conversations-container-adaptive {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 1.5rem;
    /* Esta tabla se adaptará al espacio disponible */
    width: 100%;
}

.table-responsive-adaptive {
    overflow-x: auto;
    /* Altura adaptable - usa el espacio disponible en pantalla */
    max-height: calc(100vh - 300px); /* Se ajusta según el tamaño de pantalla */
    min-height: 400px;
    overflow-y: auto;
}

.conversations-table-adaptive {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.conversations-table-adaptive tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
}

.conversations-table-adaptive tbody tr:hover {
    background-color: #f8f9fa;
}

.conversations-table-adaptive td {
    padding: 0.8rem;
    vertical-align: middle;
}

/* ===== PAGINACIÓN SIMPLE ===== */
.pagination-simple {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pagination-info-simple {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

.pagination-controls-simple {
    display: flex;
    gap: 0.5rem;
}

/* ===== FOOTER SIMPLE (COMO EN LA TERCERA IMAGEN) ===== */
.turpial-footer-simple {
    background-color: #333;
    color: #999;
    text-align: center;
    padding: 1rem 0;
    margin-top: auto;
    font-size: 0.8rem;
}

.footer-content-simple {
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    /* Header móvil */
    .turpial-header {
        padding: clamp(0.8rem, 2vw, 1.2rem) 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .turpial-header .container {
        padding: 0 clamp(0.8rem, 3vw, 1.5rem);
    }
    
    /* Logo responsivo en móvil */
    .turpial-header img {
        height: clamp(1.8rem, 5vw, 2.2rem);
    }
    
    /* Container responsivo en móvil */
    .container-wide {
        padding: 0 clamp(0.5rem, 2vw, 1rem);
        max-width: 100%;
    }
    
    /* Filtros responsive */
    .filters-container-simple {
        padding: 1.5rem;
        border-radius: 15px;
    }
    
    .filter-title-simple {
        font-size: 1.5rem;
    }
    
    .filter-row-simple {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-actions-simple {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .filter-input-simple, .filter-select-simple {
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    
    /* Tabla responsive CON SCROLL HORIZONTAL */
    .conversations-container-adaptive,
    .table-responsive-adaptive {
        overflow-x: auto !important;
        max-height: 70vh !important;
        display: block;
    }
    
    .conversations-table-adaptive {
        min-width: 800px; /* ANCHO MÍNIMO para forzar scroll horizontal */
        font-size: clamp(0.7rem, 2vw, 0.85rem);
        table-layout: auto; /* CAMBIAR a auto para permitir ancho natural */
        width: max-content; /* PERMITIR que la tabla se expanda naturalmente */
    }
    
    /* Anchos naturales de columnas - permitir scroll horizontal */
    .conversations-table-adaptive th,
    .conversations-table-adaptive td {
        min-width: fit-content; /* Ancho natural basado en contenido */
        white-space: nowrap; /* Evitar que el texto se corte */
    }
    
    /* Columnas que pueden tener más texto */
    .conversations-table-adaptive th:nth-child(2), /* Nombre */
    .conversations-table-adaptive td:nth-child(2),
    .conversations-table-adaptive th:nth-child(4), /* Caso */
    .conversations-table-adaptive td:nth-child(4) {
        min-width: 150px; /* Espacio mínimo para estas columnas */
        max-width: 200px; /* Máximo para evitar que sean demasiado anchas */
        white-space: normal; /* Permitir texto multilínea */
        word-wrap: break-word;
    }
    
    /* Mantener acciones visibles en móvil con scroll */
    .conversations-table-adaptive th:nth-child(9), /* Acciones */
    .conversations-table-adaptive td:nth-child(9) {
        min-width: 120px; /* Espacio suficiente para botones */
        position: sticky; /* Mantener acciones visibles al hacer scroll */
        right: 0;
        background: white;
        box-shadow: -2px 0 4px rgba(0,0,0,0.1);
    }
    
    .conversations-table-adaptive td {
        padding: clamp(0.4rem, 1.5vw, 0.8rem) clamp(0.3rem, 1vw, 0.6rem);
        vertical-align: middle;
        /* Configuración base para scroll horizontal */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .conversations-table-adaptive tbody tr:hover {
        transform: none;
    }
    
    /* Paginación responsive */
    .pagination-simple {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .pagination-controls-simple {
        width: 100%;
        justify-content: center;
    }
    
    .pagination-btn {
        flex: 1;
        max-width: 150px;
    }
    
    /* Footer responsive */
    .footer-content-simple {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .footer-left {
        justify-content: center;
    }
    
    .footer-text {
        font-size: 0.9rem;
    }
    
    .footer-powered {
        font-size: 1rem;
    }
    
    /* Modal responsive mejorado */
    .modal-content {
        width: 99vw !important;
        max-width: 99vw !important;
        max-height: 98vh !important;
        margin: 0 !important;
        border-radius: 0.5rem !important;
    }

    .modal-header {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-header h2 {
        font-size: 1.2rem;
        text-align: center;
    }

    .modal-body {
        padding: 1rem;
    }
    
    /* Navegación móvil antigua - DESHABILITADA (ahora usamos barra inferior fija) */
    /*
    .mobile-nav-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.5rem, 2vw, 0.8rem);
        margin-top: clamp(0.8rem, 2vw, 1rem);
        padding: 0 0.5rem;
    }
    
    .mobile-nav-grid .nav-link,
    .mobile-nav-grid button {
        padding: clamp(0.8rem, 3vw, 1rem) clamp(0.5rem, 2vw, 0.8rem);
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
        text-align: center;
        border-radius: 8px;
        border: 2px solid rgba(255, 193, 7, 0.3);
        background: transparent;
        box-shadow: none;
        transform: none;
        transition: all 0.3s ease;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-nav-grid .nav-link.active {
        background: #FFC107;
        color: #000000;
        border: 2px solid #FFC107;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    }
    
    .mobile-nav-grid .turpial-btn-yellow {
        background: #FFC107;
        color: #000000;
        border: 2px solid #FFC107;
        font-weight: 600;
    }
    
    .mobile-nav-grid .turpial-btn-secondary {
        background: #2D2D2D;
        color: #FFFFFF;
        border: 2px solid #2D2D2D;
        font-weight: 600;
    }
    */
}

@media (min-width: 769px) {
    .conversations-container-adaptive,
    .table-responsive-adaptive {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        display: block;
    }
}

/* DESKTOP: Layout horizontal (4 columnas) para tarjetas expandidas */
@media (min-width: 1024px) {
    /* En desktop: mantener layout horizontal original */
    .conversations-table-adaptive [id^="details-row-"] .grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* En desktop: las tarjetas pueden tener anchos naturales */
    .conversations-table-adaptive [id^="details-row-"] .grid > div {
        width: auto !important;
        max-width: none !important;
    }
    
    /* En desktop: contenido más compacto */
    .conversations-table-adaptive [id^="details-row-"] .bg-gray-50 {
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        min-height: 200px; /* Altura mínima para uniformidad */
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .filter-title-simple {
        font-size: 1.3rem;
    }
    
    .table-title {
        font-size: 1rem;
    }
    
    .conversations-table {
        font-size: 0.8rem;
    }
    
    .table-header-enhanced th {
        padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.2rem, 1vw, 0.3rem);
        font-size: clamp(0.6rem, 1.8vw, 0.75rem);
    }
    
    .table-body-enhanced td {
        padding: 0.6rem 0.3rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    /* Cards extra compactas en móviles pequeños */
    .bg-white.rounded-lg {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    /* Botones optimizados para móvil */
    .turpial-btn-yellow,
    .turpial-btn-secondary {
        padding: clamp(0.8rem, 3vw, 1rem) clamp(1.2rem, 4vw, 1.8rem);
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        min-height: 44px; /* Tamaño mínimo para touch */
        border-radius: 8px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }
    
    /* Formularios compactos */
    input, select {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Títulos de cards más pequeños */
    h2, h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
}

/* ================================ */
/* ESTILOS PARA DASHBOARD OPERADOR */
/* ================================ */

/* Gráfico de barras sencillo */
.barra-dia {
    background: linear-gradient(to top, #FFC107, #FFE082);
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #1E1E1E;
    font-weight: 600;
    font-size: 0.8rem;
    position: relative;
    transition: all 0.3s ease;
}

.barra-dia:hover {
    background: linear-gradient(to top, #e0a800, #FFC107);
}

.barra-dia.vacia {
    background: #E5E7EB;
    color: #9CA3AF;
}

/* Medidor de estrellas */
.medidor-estrellas {
    position: relative;
}

.medidor-estrellas .estrellas-fondo {
    color: #E5E7EB;
}

.medidor-estrellas .estrellas-llenas {
    color: #FFC107;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

/* Cards de feedback */
.feedback-card {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.feedback-card:hover {
    background: #F3F4F6;
    border-color: #FFC107;
}

.feedback-estrellas {
    color: #FFC107;
    font-size: 1.1rem;
}

.feedback-texto {
    font-style: italic;
    color: #4B5563;
    margin: 0.5rem 0;
}

.feedback-cliente {
    color: #6B7280;
    font-size: 0.8rem;
}

.feedback-fecha {
    color: #9CA3AF;
    font-size: 0.75rem;
}

/* Animaciones motivacional */
@keyframes pulso-suave {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.kpi-numero:hover {
    animation: pulso-suave 1s ease-in-out;
}

/* Comparativas positivas/negativas */
.comparativa-positiva {
    color: #059669;
    font-weight: 600;
}

.comparativa-negativa {
    color: #DC2626;
    font-weight: 600;
}

.comparativa-neutral {
    color: #6B7280;
    font-weight: 500;
}

/* Responsive para dashboard operador */
@media (max-width: 768px) {
    #mi-dashboard .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .medidor-estrellas {
        margin-bottom: 1rem;
    }
    
    #graficoBarras {
        height: 100px;
    }
    
         .barra-dia {
         font-size: 0.7rem;
     }
 }

/* ================================ */
/* ESTILOS PARA MODAL EXPANDIDO */
/* ================================ */

/* Contenedores sin altura fija para mejor visualización */
.details-container {
    min-height: 160px; /* min-h-40 en Tailwind */
    padding: 12px;
}

/* Mejorar espaciado en cards de detalles */
.details-section {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0 0 8px 8px;
    padding: 12px;
    min-height: 160px;
}

/* Headers de secciones más destacados */
.details-header {
    background: #FFC107;
    color: #000;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px 8px 0 0;
    margin-bottom: 8px;
}

/* Controles de formulario en modal */
.details-form-control {
    width: 100%;
    font-size: 0.875rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 8px 12px;
    transition: border-color 0.3s ease;
}

.details-form-control:focus {
    outline: none;
    border-color: #FFC107;
}

/* Botón de guardar mejorado */
.details-save-btn {
    width: 100%;
    background: #FFC107;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.details-save-btn:hover {
    background: #e0a800;
}

/* Texto en secciones de información */
.details-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
}

.details-info-item {
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.details-info-item strong {
    color: #1F2937;
    font-weight: 600;
} 

/* ================================ */
/* MÉTRICAS AVANZADAS V3.2.0 */
/* ================================ */

.metric-chart-container {
    position: relative;
    height: 200px;
    width: 100%;
}

.metric-chart-container canvas {
    max-height: 100% !important;
}

.gauge-chart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-chart::before {
    content: attr(data-value) '%';
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    color: #374151;
    z-index: 10;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ranking-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.ranking-table-container table {
    min-width: 700px;
}

.metric-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.metric-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: #f9fafb;
    border-radius: 9999px;
    font-size: 0.75rem;
    border: 1px solid #e5e7eb;
}

.metric-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #6b7280;
    font-size: 0.875rem;
}

.metric-card-advanced {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.metric-card-advanced:hover {
    border-color: #FFC107;
}

.metric-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metric-value-large {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-label-large {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.status-indicator.success {
    background-color: #dcfce7;
    color: #166534;
}

.status-indicator.warning {
    background-color: #fef3c7;
    color: #92400e;
}

.status-indicator.danger {
    background-color: #fee2e2;
    color: #991b1b;
}

@media (max-width: 768px) {
    .metric-chart-container {
        height: 150px;
    }
    
    .metric-value-large {
        font-size: 2rem;
    }
    
    .ranking-table-container {
        font-size: 0.8rem;
    }
    
    .metric-card-advanced {
        padding: 1rem;
    }
}

/* ================================ */
/* GRÁFICOS DE PIE v3.3.0           */
/* ================================ */

/* Contenedores específicos para gráficos de pie */
.pie-chart-container {
    position: relative;
    height: 200px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-chart-canvas {
    max-height: 100%;
    max-width: 100%;
}

/* Leyendas personalizadas para gráficos de pie */
.pie-chart-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pie-chart-legend-item {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem;
}

.pie-chart-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Indicadores específicos para gráficos de pie */
.pie-chart-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 0.375rem;
    background-color: #F9FAFB;
}

.pie-chart-label {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #374151;
}

.pie-chart-value {
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;
}

/* Estilos específicos para cada tipo de gráfico de pie */

/* Canal Distribution */
.canal-whatsapp { background-color: #10B981; }
.canal-email { background-color: #3B82F6; }
.canal-telefono { background-color: #8B5CF6; }
.canal-chat { background-color: #F97316; }

/* Sentimiento */
.sentimiento-positivo { background-color: #10B981; }
.sentimiento-neutral { background-color: #F59E0B; }
.sentimiento-negativo { background-color: #EF4444; }

/* Finalización */
.finalizacion-resuelto { background-color: #10B981; }
.finalizacion-no-resuelto { background-color: #EF4444; }
.finalizacion-pendiente { background-color: #6B7280; }

/* Operadores */
.operador-color-1 { background-color: #EAB308; }
.operador-color-2 { background-color: #3B82F6; }
.operador-color-3 { background-color: #10B981; }
.operador-color-4 { background-color: #F97316; }
.operador-color-otros { background-color: #6B7280; }

/* Contador central para algunos gráficos */
.pie-chart-center-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.pie-chart-center-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.pie-chart-center-label {
    font-size: 0.75rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hover effects para interactividad */
.pie-chart-canvas:hover {
    cursor: pointer;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .pie-chart-container {
        height: clamp(140px, 30vw, 180px);
        min-height: clamp(140px, 30vw, 180px);
        padding: clamp(0.5rem, 2vw, 1rem);
    }
    
    .pie-chart-legend {
        grid-template-columns: 1fr;
        gap: clamp(0.2rem, 0.8vw, 0.25rem);
        margin-top: clamp(0.5rem, 2vw, 1rem);
    }
    
    .pie-chart-legend-item {
        font-size: clamp(0.6rem, 1.8vw, 0.7rem);
        padding: clamp(0.1rem, 0.5vw, 0.15rem);
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    .pie-chart-legend-dot {
        width: clamp(8px, 2vw, 10px);
        height: clamp(8px, 2vw, 10px);
        margin-right: clamp(0.3rem, 1vw, 0.4rem);
        flex-shrink: 0;
    }
    
    .pie-chart-center-number {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
    
    .pie-chart-center-label {
        font-size: clamp(0.5rem, 1.5vw, 0.625rem);
    }
}

/* Animaciones para los gráficos de pie */
@keyframes pieSliceHover {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

.pie-slice-hover {
    animation: pieSliceHover 0.3s ease-in-out;
}

/* ===== BARRA DE NAVEGACIÓN INFERIOR MÓVIL - TURPIAL AIRLINES ===== */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFC107 !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 100;
    border-top: 3px solid #E0A800;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #111 !important;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 6px;
    min-height: 60px;
    cursor: pointer;
    flex: 1;
    max-width: 80px;
    border-radius: 8px;
    margin: 0 2px;
}

.mobile-nav-item .mobile-nav-icon svg {
    display: block;
    fill: none;
    stroke: currentColor;
    color: #111;
    width: 22px;
    height: 22px;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
    background: rgba(0, 0, 0, 0.1);
    color: #111 !important;
    outline: none;
}

.mobile-nav-item.active {
    background: #000 !important;
    color: #fff !important;
    font-weight: 600;
}

.mobile-nav-item.active .mobile-nav-icon svg {
    color: #fff;
    stroke: #fff;
}

.mobile-nav-icon {
    font-size: 18px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
    font-weight: normal;
}

.mobile-nav-item:hover .mobile-nav-icon {
    transform: scale(1.1);
}

.mobile-nav-item.active .mobile-nav-icon {
    transform: scale(1.05);
}

.mobile-nav-text {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    transition: color 0.3s ease;
}

.mobile-nav-item.active .mobile-nav-text {
    color: #fff !important;
    font-weight: 600;
}

/* Eliminar bordes y efectos de los botones de filtros */
.bg-yellow-500, .bg-gray-500, .bg-green-500 {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.bg-yellow-500:hover, .bg-gray-500:hover, .bg-green-500:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.bg-yellow-500:focus, .bg-gray-500:focus, .bg-green-500:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.bg-yellow-500:active, .bg-gray-500:active, .bg-green-500:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Espacio inferior para el contenido cuando hay barra de navegación móvil */
@media (max-width: 640px) {
    .mobile-app-container {
        padding-bottom: 80px; /* Espacio para la barra inferior */
    }
    
    /* Ajuste para que las páginas no se oculten detrás de la barra */
    .page {
        min-height: calc(100vh - 160px); /* Header + barra inferior */
    }
}

/* Fondo oscuro solo para el login */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff !important; /* Por defecto, fondo blanco */
}

#loginScreen {
  min-height: 100vh;
  min-width: 100vw;
  background: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}

#loginScreen > div {
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.25);
  border-radius: 18px;
  background: #222;
  padding: 2.5rem 2rem 2rem 2rem;
  border: 2px solid #FFD600;
}

body.login-active, html.login-active {
  background: #181818 !important;
}

/* Ajuste específico para el textarea de análisis en auditoría */
#consultoriaModalAnalisis {
  min-height: 120px;
  max-height: 220px;
  width: 100%;
  font-size: 1rem;
  resize: vertical;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .modal-content {
    width: 99vw !important;
    max-width: 99vw !important;
    max-height: 98vh !important;
    margin: 0 !important;
    border-radius: 0.5rem !important;
  }
  #consultoriaModalAnalisis {
    min-height: 160px;
    max-height: 40vh;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #consultoriaModalAnalisis {
    min-height: 120px;
    max-height: 50vh;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .col-estado-auditoria,
  .col-estado-auditoria ~ td {
    display: none !important;
  }
}

/* --- NUEVO ESTILO GLOBAL DE BOTONES --- */
.turpial-btn {
  background: #18122B;
  color: #F5F5F5;
  border: 1.5px solid #A084E8;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(160, 132, 232, 0.15);
  padding: 0.85rem 2.2rem;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  outline: none;
  cursor: pointer;
  display: inline-block;
}
.turpial-btn:active, .turpial-btn:focus {
  box-shadow: 0 0 0 2px #A084E8;
}
.turpial-btn:hover {
  background: #22144b;
  color: #fff;
  border-color: #BCA7F7;
}

/* Amarillo corporativo */
.turpial-btn-yellow {
  @extend .turpial-btn;
  background: #FFC107;
  color: #18122B;
  border: 1.5px solid #FFD95A;
}
.turpial-btn-yellow:hover {
  background: #FFB300;
  color: #18122B;
  border-color: #FFD95A;
}

/* Secundario oscuro */
.turpial-btn-secondary {
  @extend .turpial-btn;
  background: #2D2D2D;
  color: #F5F5F5;
  border: 1.5px solid #A084E8;
}
.turpial-btn-secondary:hover {
  background: #18122B;
  color: #fff;
  border-color: #BCA7F7;
}

/* Neutral gris */
.turpial-btn-neutral {
  @extend .turpial-btn;
  background: #6C757D;
  color: #F5F5F5;
  border: 1.5px solid #A084E8;
}
.turpial-btn-neutral:hover {
  background: #495057;
  color: #fff;
  border-color: #BCA7F7;
}

/* --- GLASSMORPHISM HEADER --- */
.turpial-header {
  background: rgba(255, 255, 255, 0.95); /* Casi sólido, glass leve */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid rgba(160, 132, 232, 0.13);
  box-shadow: 0 2px 12px 0 rgba(160, 132, 232, 0.07);
  /* Eliminar posición fija */
  position: static;
  top: unset;
  left: unset;
  right: unset;
  z-index: unset;
  transition: background 0.3s;
}

/* --- GLASSMORPHISM BUTTONS (leve, sin perder color de marca) --- */
.turpial-btn-yellow, .turpial-btn-secondary, .turpial-btn-neutral {
  background: rgba(255, 193, 7, 0.92); /* Amarillo glass leve */
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border: 1.5px solid rgba(160, 132, 232, 0.18);
  box-shadow: 0 2px 8px 0 rgba(160, 132, 232, 0.10);
}
.turpial-btn-secondary {
  background: rgba(45, 45, 45, 0.88);
}
.turpial-btn-neutral {
  background: rgba(108, 117, 125, 0.88);
}

/* Hover mantiene glass pero sube opacidad */
.turpial-btn-yellow:hover {
  background: rgba(255, 179, 0, 0.98);
}
.turpial-btn-secondary:hover {
  background: rgba(24, 20, 75, 0.98);
}
.turpial-btn-neutral:hover {
  background: rgba(73, 80, 87, 0.98);
}

/* ===== MÉTRICAS DE AUDITORÍA OPTIMIZADAS PARA MÓVIL ===== */

.auditoria-metrics-container {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem;
  margin: 0 auto 1.5rem auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.auditoria-metrics-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.auditoria-metric-card {
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  flex: 1;
  transition: all 0.2s ease;
}

.auditoria-metric-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.auditoria-metric-content {
  text-align: center;
  width: 100%;
}

.auditoria-metric-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: #6B7280;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  font-family: 'Montserrat', sans-serif;
}

.auditoria-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1F2937;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
}

/* Responsive para pantallas muy pequeñas */
@media (max-width: 480px) {
  .auditoria-metrics-container {
    gap: 0.4rem;
    padding: 0 0.75rem;
  }
  
  .auditoria-metric-card {
    padding: 0.75rem;
    min-width: 120px;
    border-radius: 12px;
  }
  
  .auditoria-metric-label {
    font-size: 0.625rem;
  }
  
  .auditoria-metric-value {
    font-size: 1.25rem;
  }
}

/* Para pantallas medianas/grandes: layout más espacioso */
@media (min-width: 768px) {
  .auditoria-metrics-container {
    justify-content: center;
    max-width: 48rem;
    gap: 1.5rem;
  }
  
  .auditoria-metric-card {
    padding: 1.25rem;
    min-width: 180px;
    border-radius: 20px;
  }
  
  .auditoria-metric-label {
    font-size: 0.75rem;
  }
  
  .auditoria-metric-value {
    font-size: 1.75rem;
  }
}

/* ===== BOTONES DE FILTROS DE AUDITORÍA - SOLO MÓVIL ===== */

/* Ocultar emojis e iconos en móvil */
@media (max-width: 767px) {
  .auditoria-filter-buttons .auditoria-emoji-desktop,
  .auditoria-filter-buttons .auditoria-icon-desktop {
    display: none !important;
  }
  
  /* Igualar el tamaño de los botones en móvil */
  .auditoria-filter-buttons {
    display: flex;
    gap: 0.5rem;
    width: 100%;
  }
  
  .auditoria-btn-aplicar,
  .auditoria-btn-limpiar {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Para pantallas muy pequeñas: botones más compactos */
@media (max-width: 480px) {
  .auditoria-filter-buttons {
    gap: 0.375rem;
  }
  
  .auditoria-btn-aplicar,
  .auditoria-btn-limpiar {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* ===== TABLA DE AUDITORÍA - REGULADOR DE COLUMNAS MÓVIL ===== */

/* Configuración específica para tabla de auditoría en móvil */
@media (max-width: 767px) {
  /* Contenedor de la tabla de auditoría */
  #consultoria .table-mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Tabla de auditoría con anchos específicos */
  #consultoria table {
    min-width: 700px; /* Ancho mínimo para permitir scroll horizontal controlado */
    table-layout: fixed; /* Layout fijo para controlar anchos precisos */
  }
  
  /* REGULADOR DE ANCHOS DE COLUMNAS - AUDITORÍA MÓVIL */
  
  /* Columna 1: Caso (MÁS ANCHA para legibilidad) */
  #consultoria table th:nth-child(1), 
  #consultoria table td:nth-child(1) {
    width: 200px; /* Caso prioritario - más ancho */
    min-width: 200px;
    max-width: 200px;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    padding: 0.5rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1.3;
    vertical-align: top;
  }
  
  /* Columna 2: Usuario */
  #consultoria table th:nth-child(2), 
  #consultoria table td:nth-child(2) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    word-wrap: break-word;
    white-space: normal;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.2;
  }
  
  /* Columna 3: Puntuación */
  #consultoria table th:nth-child(3), 
  #consultoria table td:nth-child(3) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }
  
  /* Columna 4: Estatus */
  #consultoria table th:nth-child(4), 
  #consultoria table td:nth-child(4) {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }
  
  /* Columna 5: Fecha */
  #consultoria table th:nth-child(5), 
  #consultoria table td:nth-child(5) {
    width: 85px;
    min-width: 85px;
    max-width: 85px;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1.1;
  }
  
  /* Columna 6: Acciones */
  #consultoria table th:nth-child(6), 
  #consultoria table td:nth-child(6) {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }
  
  /* Botones de acción en la tabla de auditoría móvil */
  #consultoria .turpial-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.7rem;
    white-space: nowrap;
    margin: 0 0.125rem;
  }
  
  /* Mejorar legibilidad del texto de caso en móvil */
  #consultoria table td:nth-child(1) {
    font-weight: 500;
    color: #374151;
    hyphens: auto;
    word-break: break-word;
  }
}

/* Para pantallas muy pequeñas - ajuste adicional */
@media (max-width: 480px) {
  #consultoria table {
    min-width: 680px; /* Reducir ligeramente para pantallas muy pequeñas */
  }
  
  /* Caso sigue siendo prioritario pero optimizado */
  #consultoria table th:nth-child(1), 
  #consultoria table td:nth-child(1) {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    padding: 0.5rem 0.3rem;
    font-size: 0.7rem;
  }
  
  /* Ajustar otras columnas proporcionalmente */
  #consultoria table th:nth-child(2), 
  #consultoria table td:nth-child(2) {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
  }
  
  #consultoria table th:nth-child(5), 
  #consultoria table td:nth-child(5) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    font-size: 0.65rem;
  }
  
  #consultoria table th:nth-child(6), 
  #consultoria table td:nth-child(6) {
    width: 115px;
    min-width: 115px;
    max-width: 115px;
  }
}

/* ===== MANTENER TABLA DE SOLICITUDES SIN CAMBIOS ===== */

/* Asegurar que solo afecte a la tabla de auditoría */
#conversaciones .table-responsive-adaptive {
  /* Mantener comportamiento original para solicitudes */
} 

/* ===== MODAL DE AUDITORÍA OPTIMIZADO ===== */

/* Modal específico de consultoría/auditoría */
#consultoriaModal .modal-content {
  background-color: white;
  width: 95%;
  max-width: 1000px; /* Ligeramente más pequeño para mejor adaptación */
  max-height: 95vh;
  border-radius: 12px;
  overflow: hidden; /* Para evitar scroll del contenedor */
  border: 2px solid #FFC107;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Header del modal de auditoría - MÁS COMPACTO */
#consultoriaModal .modal-header {
  background: linear-gradient(135deg, #FFC107 0%, #e0a800 100%);
  padding: 1rem 1.5rem; /* Reducido de 1.5rem 2rem */
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  min-height: auto; /* Permitir altura mínima */
}

/* Título del modal de auditoría - FUENTE MÁS PEQUEÑA */
#consultoriaModal .modal-header h2 {
  margin: 0;
  font-size: 1.25rem; /* Reducido de 1.5rem */
  font-weight: 700;
  color: #1E1E1E;
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Reducido de 1px */
  flex: 1;
  text-align: center;
  min-width: 0; /* Permitir que se comprima */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 1rem; /* Espacio garantizado para el botón */
}

/* Botón de cerrar del modal de auditoría - COMPLETAMENTE VISIBLE */
#consultoriaModal .close {
  font-size: 1.75rem; /* Reducido de 2rem */
  font-weight: bold;
  cursor: pointer;
  color: #1E1E1E;
  background: none;
  border: none;
  transition: all 0.3s ease;
  padding: 0.25rem;
  line-height: 1;
  width: 2.5rem; /* Aumentado para garantizar visibilidad */
  height: 2.5rem; /* Aumentado para garantizar visibilidad */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0; /* No permitir que se comprima */
  min-width: 2.5rem; /* Ancho mínimo garantizado */
  margin-left: auto; /* Empujar hacia la derecha */
}

#consultoriaModal .close:hover {
  background: rgba(0,0,0,0.1);
  opacity: 0.8;
  transform: scale(1.1);
}

/* Body del modal de auditoría */
#consultoriaModal .modal-body {
  padding: 1.5rem; /* Ligeramente reducido */
  max-height: calc(95vh - 100px); /* Ajustado para el header más pequeño */
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ===== RESPONSIVE PARA MODAL DE AUDITORÍA ===== */

/* Tablet y móvil */
@media (max-width: 768px) {
  #consultoriaModal .modal-content {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 95vh !important;
    margin: 1rem auto !important;
    border-radius: 8px !important;
  }

  #consultoriaModal .modal-header {
    padding: 0.75rem 1rem; /* Aún más compacto en móvil */
    flex-direction: row; /* Mantener horizontal */
    gap: 0.5rem;
  }

  #consultoriaModal .modal-header h2 {
    font-size: 1rem; /* Más pequeño en móvil */
    letter-spacing: 0.3px;
    text-align: left; /* Alineado a la izquierda en móvil */
    flex: 1;
    margin-right: 0.75rem; /* Espacio para el botón en móvil */
  }

  #consultoriaModal .close {
    font-size: 1.5rem;
    width: 2rem;
    height: 2rem;
    min-width: 2rem; /* Garantizar tamaño en móvil */
  }

  #consultoriaModal .modal-body {
    padding: 1rem;
    max-height: calc(95vh - 80px); /* Ajustado para header móvil */
  }
  
  /* Optimizar campos del formulario en móvil */
  #consultoriaModal .modal-body .grid {
    grid-template-columns: 1fr !important; /* Una columna en móvil */
    gap: 1rem;
  }
  
  #consultoriaModal .modal-body .bg-gray-50 {
    padding: 1rem;
    margin-bottom: 1rem;
  }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  #consultoriaModal .modal-content {
    width: 99vw !important;
    margin: 0.5rem auto !important;
    border-radius: 6px !important;
  }

  #consultoriaModal .modal-header {
    padding: 0.625rem 0.75rem; /* Extra compacto */
  }

  #consultoriaModal .modal-header h2 {
    font-size: 0.9rem; /* Muy compacto para móviles pequeños */
    letter-spacing: 0.2px;
    margin-right: 0.5rem; /* Espacio para el botón en móviles pequeños */
  }

  #consultoriaModal .close {
    font-size: 1.3rem;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem; /* Garantizar tamaño en móviles pequeños */
  }

  #consultoriaModal .modal-body {
    padding: 0.75rem;
    max-height: calc(95vh - 70px);
  }
  
  /* Campos de entrada más compactos */
  #consultoriaModal .modal-body input,
  #consultoriaModal .modal-body select,
  #consultoriaModal .modal-body textarea {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
}