/* ==========================================================================
   Tu Evento BEES - Estilos Unificados para Formularios y Tablas de Administración
   Aplica de forma global a todas las secciones del panel administrativo (Django Unfold):
   1. Formularios (.change-form / form): bordes visibles, padding uniforme y ancho homogéneo (max-w-2xl / 672px).
   2. Tablas (.change-list / #result_list / inlines): sticky headers (encabezados fijos al hacer scroll vertical),
      columna de selección fija y barra de scroll horizontal visible y accesible en pantallas pequeñas.
   ========================================================================== */

/* ==========================================================================
   1. Contenedores de Fila para Campos Checkbox / Switch
   En Unfold (fieldset_row_checkbox.html), el switch y su help text se envuelven
   en un contenedor que debe abarcar el 100% del ancho disponible para que
   el switch y el texto explicativo se muestren holgadamente sin colapsar verticalmente.
   ========================================================================== */
.field-line > div:has(> .grow),
.field-line > div.flex.flex-col:has(input[type="checkbox"]) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* ==========================================================================
   2. Contenedores de Etiquetas (Labels): Preservar ancho estándar de Unfold
   Garantiza que la columna de labels mantenga su tamaño estándar (w-56 = 14rem / 224px)
   en pantallas grandes (desktop), tanto para campos de texto como para switches.
   Usa :not(:has(.grow)) para evitar seleccionar el contenedor padre de los switches.
   ========================================================================== */
@media (min-width: 1024px) {
    .field-line div.lg\:w-56:not(:has(.grow)),
    .field-line > div:first-child:not(:has(.grow)):has(label) {
        width: 14rem !important;
        min-width: 14rem !important;
        max-width: 14rem !important;
        flex: 0 0 14rem !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   2. Formularios: Longitud uniforme y ancho completo de campos (inputs)
   Aplica exclusivamente a los controles de formulario sin afectar contenedores ni labels.
   ========================================================================== */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="tel"],
form input[type="date"],
form input[type="time"],
form select,
form textarea,
.change-form input[type="text"],
.change-form input[type="number"],
.change-form input[type="email"],
.change-form input[type="password"],
.change-form input[type="url"],
.change-form input[type="tel"],
.change-form input[type="date"],
.change-form input[type="time"],
.change-form select,
.change-form textarea {
    width: 100% !important;
    max-width: 42rem !important; /* 42rem = max-w-2xl (672px) estándar de Unfold */
    box-sizing: border-box !important;
}

/* ==========================================================================
   3. Formularios: Bordes visibles, fondos, padding, tipografía y sombras
   ========================================================================== */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="tel"],
form input[type="date"],
form input[type="time"],
form select,
form textarea,
.change-form input[type="text"],
.change-form input[type="number"],
.change-form input[type="email"],
.change-form input[type="password"],
.change-form input[type="url"],
.change-form input[type="tel"],
.change-form input[type="date"],
.change-form input[type="time"],
.change-form select,
.change-form textarea {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--color-base-300, #cbd5e1) !important;
    border-radius: var(--border-radius, 8px) !important;
    background-color: #ffffff !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--color-font-default-light, #1e293b) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline 0.15s ease-in-out !important;
    min-height: 38px !important;
}

/* ==========================================================================
   3. Formularios: Estados de Focus limpios y destacados
   ========================================================================== */
form input[type="text"]:focus,
form input[type="number"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="url"]:focus,
form input[type="tel"]:focus,
form select:focus,
form textarea:focus,
.change-form input:focus,
.change-form select:focus,
.change-form textarea:focus {
    outline: 2px solid var(--color-primary-600, #4f46e5) !important;
    outline-offset: -1px !important;
    border-color: var(--color-primary-600, #4f46e5) !important;
}

/* ==========================================================================
   4. Formularios: Selects con flecha y padding
   ========================================================================== */
form select,
.change-form select {
    cursor: pointer !important;
    padding-right: 2.25rem !important;
}

/* ==========================================================================
   5. Formularios: Soporte para Modo Oscuro
   ========================================================================== */
.dark form input[type="text"],
.dark form input[type="number"],
.dark form input[type="email"],
.dark form input[type="password"],
.dark form input[type="url"],
.dark form input[type="tel"],
.dark form select,
.dark form textarea,
.dark .change-form input:not([type="checkbox"]):not([type="radio"]),
.dark .change-form select,
.dark .change-form textarea {
    border-color: var(--color-base-700, #334155) !important;
    background-color: var(--color-base-900, #0f172a) !important;
    color: var(--color-font-default-dark, #f8fafc) !important;
}

/* ==========================================================================
   6. Tablas: Contenedor Responsivo con Altura Máxima y Scroll Interno
   Permite que la barra de desplazamiento horizontal esté siempre accesible
   sin tener que bajar hasta la última fila de la tabla.
   ========================================================================== */
.change-list #changelist-form .overflow-x-auto,
.change-list .overflow-x-auto:has(> table#result_list),
.change-list .result-list-wrapper .overflow-x-auto,
.inline-group .overflow-x-auto,
div:has(> table#result_list) {
    max-height: calc(100vh - 310px) !important;
    min-height: 280px;
    overflow: auto !important;
    position: relative;
    border-radius: var(--border-radius, 8px);
}

@media (max-width: 1024px) {
    .change-list #changelist-form .overflow-x-auto,
    .change-list .overflow-x-auto:has(> table#result_list),
    .change-list .result-list-wrapper .overflow-x-auto,
    .inline-group .overflow-x-auto,
    div:has(> table#result_list) {
        max-height: calc(100vh - 350px) !important;
        min-height: 240px;
    }
}

@media (max-width: 768px) {
    .change-list #changelist-form .overflow-x-auto,
    .change-list .overflow-x-auto:has(> table#result_list),
    .change-list .result-list-wrapper .overflow-x-auto,
    .inline-group .overflow-x-auto,
    div:has(> table#result_list) {
        max-height: calc(100vh - 380px) !important;
        min-height: 200px;
    }
}

/* ==========================================================================
   7. Tablas: Encabezados de Columna Fijos (Sticky Header)
   Al desplazarse hacia abajo verticalmente, los títulos de las columnas se
   mantienen siempre visibles en la parte superior.
   ========================================================================== */
table#result_list thead th,
table.result-list thead th,
.overflow-x-auto table thead th,
.inline-group table thead th,
.tabular table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    background-color: var(--color-base-100, #f8fafc) !important;
    border-bottom: 2px solid var(--color-base-300, #cbd5e1) !important;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08) !important;
}

.dark table#result_list thead th,
.dark table.result-list thead th,
.dark .overflow-x-auto table thead th,
.dark .inline-group table thead th,
.dark .tabular table thead th {
    background-color: var(--color-base-800, #1e293b) !important;
    border-bottom: 2px solid var(--color-base-700, #334155) !important;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   8. Tablas: Columna de Selección (Checkbox) Fija a la Izquierda
   Al desplazarse horizontalmente, los checkboxes permanecen fijados a la izquierda.
   ========================================================================== */
table#result_list th.action-checkbox-column,
table#result_list td.action-checkbox,
table.result-list th.action-checkbox-column,
table.result-list td.action-checkbox {
    position: sticky !important;
    left: 0 !important;
    z-index: 15 !important;
    background-color: #ffffff !important;
    box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Esquina superior izquierda (Header Checkbox) fija en ambos ejes */
table#result_list thead th.action-checkbox-column,
table.result-list thead th.action-checkbox-column {
    z-index: 35 !important;
    background-color: var(--color-base-100, #f8fafc) !important;
}

.dark table#result_list th.action-checkbox-column,
.dark table#result_list td.action-checkbox,
.dark table.result-list th.action-checkbox-column,
.dark table.result-list td.action-checkbox {
    background-color: var(--color-base-900, #0f172a) !important;
    box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.25) !important;
}

.dark table#result_list thead th.action-checkbox-column,
.dark table.result-list thead th.action-checkbox-column {
    background-color: var(--color-base-800, #1e293b) !important;
}

/* ==========================================================================
   9. Scrollbars Estilizadas y Altamente Visibles para Tablas
   ========================================================================== */
.overflow-x-auto::-webkit-scrollbar,
.unfold-floating-scrollbar::-webkit-scrollbar {
    height: 10px !important;
    width: 10px !important;
}

.overflow-x-auto::-webkit-scrollbar-track,
.unfold-floating-scrollbar::-webkit-scrollbar-track {
    background: var(--color-base-100, #f1f5f9) !important;
    border-radius: 6px !important;
}

.overflow-x-auto::-webkit-scrollbar-thumb,
.unfold-floating-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-base-400, #94a3b8) !important;
    border-radius: 6px !important;
    border: 2px solid var(--color-base-100, #f1f5f9) !important;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover,
.unfold-floating-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-base-500, #64748b) !important;
}

.overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
}

.overflow-x-auto,
.unfold-floating-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: var(--color-base-400, #94a3b8) var(--color-base-100, #f1f5f9) !important;
}

/* ==========================================================================
   10. Barra de Desplazamiento Horizontal Flotante Auxiliar (Overlay)
   ========================================================================== */
.unfold-floating-scrollbar {
    position: fixed !important;
    bottom: 0 !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    height: 18px !important;
    z-index: 45 !important;
    background-color: rgba(248, 250, 252, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid var(--color-base-300, #cbd5e1) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
    display: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto !important;
    pointer-events: auto !important;
    transition: bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.unfold-floating-scrollbar.is-elevated {
    border-bottom: 1px solid var(--color-base-300, #cbd5e1) !important;
}

.unfold-floating-scrollbar::-webkit-scrollbar {
    height: 14px !important;
    -webkit-appearance: none !important;
}

.unfold-floating-scrollbar::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.6) !important;
    border-radius: 9999px !important;
}

.unfold-floating-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-base-400, #94a3b8) !important;
    border-radius: 9999px !important;
    border: 2px solid rgba(248, 250, 252, 0.95) !important;
    min-width: 48px !important;
}

.unfold-floating-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-base-500, #64748b) !important;
}

.unfold-floating-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: var(--color-primary-600, #4f46e5) !important;
}

.dark .unfold-floating-scrollbar {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-top-color: var(--color-base-700, #334155) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark .unfold-floating-scrollbar::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.6) !important;
}

.dark .unfold-floating-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-base-600, #475569) !important;
    border-color: rgba(15, 23, 42, 0.95) !important;
}

.dark .unfold-floating-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-base-500, #64748b) !important;
}

.dark .unfold-floating-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: var(--color-primary-500, #6366f1) !important;
}

/* ==========================================================================
   11. Adaptabilidad Responsiva para Tablas en Pantallas Reducidas
   ========================================================================== */
@media (max-width: 1024px) {
    .overflow-x-auto > table#result_list,
    .overflow-x-auto > table.result-list {
        min-width: 100%;
    }

    .overflow-x-auto table th,
    .overflow-x-auto table td {
        min-width: 50px;
    }

    .overflow-x-auto table th.action-checkbox-column,
    .overflow-x-auto table td.action-checkbox {
        min-width: 32px !important;
        width: 32px !important;
    }
}


/* ==========================================================================
   12. Sidebar de Navegación: Backdrop, Panel y Animación de Entrada/Salida
   Unfold sirve Tailwind precompilado y no incluye utilidades como xl:hidden,
   bg-base-950/40, backdrop-blur-* o -translate-x-full; se definen aquí como
   clases semánticas que usa templates/admin/nav_sidebar.html. El breakpoint
   1280px coincide con el de Unfold (app.js), donde el sidebar pasa de columna
   fija a overlay.
   ========================================================================== */
:root {
    --teb-sidebar-backdrop-color: color-mix(in srgb, var(--color-base-950) 40%, transparent);
    --teb-sidebar-backdrop-blur: 2px;
    --teb-sidebar-backdrop-z: 50; /* Debajo del sidebar (z-60), encima del contenido */
    --teb-sidebar-panel-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --teb-sidebar-enter-duration: 300ms;
    --teb-sidebar-leave-duration: 220ms;
    --teb-sidebar-enter-easing: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out suave */
    --teb-sidebar-leave-easing: cubic-bezier(0.4, 0, 1, 1);    /* ease-in */
}

.teb-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--teb-sidebar-backdrop-z);
    background-color: var(--teb-sidebar-backdrop-color);
    backdrop-filter: blur(var(--teb-sidebar-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--teb-sidebar-backdrop-blur));
}

@media (max-width: 1279.98px) {
    .teb-sidebar-drawer {
        box-shadow: var(--teb-sidebar-panel-shadow);
    }
}

/* --- Animación (Alpine x-transition) ------------------------------------
   Wrapper: anima el ancho para que el contenido se desplace suave en escritorio.
   El !important vence al width inline que Alpine enlaza con sidebarWidth.
   Drawer (#nav-sidebar, fixed): se desliza desde la izquierda. */
.teb-sidebar-slide-enter,
.teb-sidebar-slide-enter .teb-sidebar-drawer {
    transition-property: width, transform;
    transition-duration: var(--teb-sidebar-enter-duration);
    transition-timing-function: var(--teb-sidebar-enter-easing);
}

.teb-sidebar-slide-leave,
.teb-sidebar-slide-leave .teb-sidebar-drawer {
    transition-property: width, transform;
    transition-duration: var(--teb-sidebar-leave-duration);
    transition-timing-function: var(--teb-sidebar-leave-easing);
}

.teb-sidebar-slide-hidden {
    width: 0 !important;
}

.teb-sidebar-slide-hidden .teb-sidebar-drawer {
    transform: translateX(-100%);
}

.teb-sidebar-fade-enter {
    transition: opacity var(--teb-sidebar-enter-duration) var(--teb-sidebar-enter-easing);
}

.teb-sidebar-fade-leave {
    transition: opacity var(--teb-sidebar-leave-duration) var(--teb-sidebar-leave-easing);
}

.teb-sidebar-fade-hidden {
    opacity: 0;
}

/* Accesibilidad: sin animación si el usuario pidió reducir movimiento. */
@media (prefers-reduced-motion: reduce) {
    .teb-sidebar-slide-enter,
    .teb-sidebar-slide-enter .teb-sidebar-drawer,
    .teb-sidebar-slide-leave,
    .teb-sidebar-slide-leave .teb-sidebar-drawer,
    .teb-sidebar-fade-enter,
    .teb-sidebar-fade-leave,
    .unfold-floating-scrollbar {
        transition: none !important;
    }
}

/* En escritorio el sidebar es una columna del layout: el backdrop nunca debe
   existir, aunque Alpine (x-show) quite el display:none inline. */
@media (min-width: 1280px) {
    .teb-sidebar-backdrop {
        display: none !important;
    }
}