/*
 * Overrides para resolver conflictos entre Tabler CSS y componentes que
 * seguimos usando de Tabler (simplebar, etc.)
 *
 * El sidebar usa Bootstrap JS nativo de Tabler (data-bs-toggle="dropdown").
 * No hay hacks de Alpine.js aquí.
 */

/* ─── Cursor pointer para elementos interactivos ──────────────────── */
.cursor-pointer {
    cursor: pointer;
}

/* ─── Material Symbols de Tabler (fuente no cargada) ──────────────── */
.material-symbols-outlined {
    display: none !important;
}

/* ─── Clase .hidden de Django admin (no existe en Tabler/Bootstrap) ── */
.hidden {
    display: none !important;
}

/* ─── Colisión `.empty`: Tabler vs Django admin ─────────────────────
   Tabler define `.empty { display:flex; flex-direction:column;
   align-items:center; justify-content:center; height:100%; padding:1rem;
   text-align:center; }` para su componente empty-state. Django admin /
   `app.js#checkFormsetEmpty()` aplica `.empty` al `<table.formset>` (y a
   los wrappers `<div.formset>` de stacked) cuando el inline no tiene
   filas no-template. Sin este override la tabla colapsa a flex column
   center y el `<thead>`/`<tbody>` se desalinean (anchos distintos,
   thead centrado encima del tbody). Restauramos cada propiedad al
   default del elemento. */
.formset.empty {
    display: revert;
    flex-direction: revert;
    align-items: revert;
    justify-content: revert;
    height: revert;
    padding: revert;
    text-align: revert;
}

/* ─── Overlay de delete en inlines ──────────────────────────────────
   `.inline-delete-undo` se renderiza con `d-none` por default en
   `inline_delete_undo.html` y aquí lo revelamos cuando la fila tiene
   su checkbox DELETE marcado. Sin esto el overlay siempre estaría
   encima de cada row existente.                                       */
.form-row:has(input[name$="-DELETE"]:checked) .inline-delete-undo {
    display: flex !important;
}

/* Cuando la overlay roja está activa, ocultamos el trigger original
   (label con checkbox + "Borrar") — el propio overlay tiene su botón
   "Click to cancel" para desmarcar, así que el control duplicado
   arriba-derecha sobra y distrae.                                    */
.form-row:has(input[name$="-DELETE"]:checked) .stacked-delete-toggle {
    display: none !important;
}

/* ─── Barra de acciones bulk: overlay sobre el card-header ──────── */
/* El overlay se ancla al ``.result-list-wrapper`` (contenedor de la tabla) y
   se proyecta hacia arriba con ``bottom: 100%`` para tapar el card-header de
   búsqueda que vive justo encima. Anclar al ``.card`` (intento previo con
   ``top: 0``) lo dejaba pegado al tope del card: cuando la vista tiene tabs
   (otro card-header arriba del de búsqueda) el overlay tapaba los tabs y no
   alcanzaba a cubrir el header de búsqueda. Anclando al wrapper, el overlay
   siempre cae sobre el header inmediatamente superior a la tabla, con o sin
   tabs. Usa el mismo padding que el card-header para coincidir en alto. */
.result-list-wrapper {
    position: relative;
}

#changelist-actions {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1rem 1.25rem;
    background-color: var(--tblr-primary, #206bc4);
    /* Esquinas rectas: el overlay ya no se ancla al tope del card sino sobre
       el card-header de búsqueda (a media altura), así que el redondeo
       superior de las esquinas se vería fuera de lugar. */
    border-radius: 0;
}

#changelist-form:has(input.action-select:checked) #changelist-actions {
    display: flex !important;
}

/* Select de acciones: adaptar form-select de Tabler para fondo azul.
   El widget ya usa form-select (definido en grua/admin.py _TablerActionForm),
   aquí solo ajustamos colores para el fondo primario. */
#changelist-actions .form-select {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    color: #fff;
    min-width: 200px;
}

#changelist-actions .form-select:focus {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
}

#changelist-actions .form-select option {
    color: var(--tblr-body-color);
    background-color: #fff;
}

/* ─── Search bar: estilos Tabler para el buscador del changelist ── */

#toolbar {
    flex: 1 1 auto;
    min-width: 0;
}

#changelist-search {
    position: relative;
}

#changelist-search .input-group {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: var(--tblr-border-radius, 4px);
    background-color: var(--tblr-bg-forms, #fff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#changelist-search .input-group:focus-within {
    border-color: #0054a6;
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
}


/* Botones de la barra de acciones: borde blanco para diferenciar del texto */
#changelist-actions .btn-ghost-light {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

#changelist-actions .btn-ghost-light:hover {
    border-color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}


/* TreeTable — tabla jerárquica con expand/collapse server-side. */
.treetable tr.treetable-collapsed {
    display: none !important;
}

/* Indentación por nivel del árbol. El prefijo de cada fila (lo que va antes
   del texto) define cuánto hay que indentar al hijo para que su contenido
   caiga bajo el texto del padre. Sin manija de arrastre el prefijo es solo
   el toggle (1.5rem), así que 1.5rem por nivel alinea el texto del hijo con
   el del padre. Con manija (``treetable-reorderable``) el prefijo crece con
   el bloque de la manija (1.5rem = icono 1.25rem + margin-right 0.25rem), por
   lo que la indentación sube a ~3rem para que la manija del hijo quede
   alineada al comienzo del nombre del padre. El ``- 3px`` corrige un
   sobrepaso visual de la manija (quedaba ~3px a la derecha del nombre). */
.treetable {
    --treetable-indent: 1.5rem;
}

.treetable.treetable-reorderable {
    --treetable-indent: calc(3rem - 3px);
}

.treetable .treetable-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.treetable .treetable-toggle {
    margin-right: 0.25rem;
    text-decoration: none;
    line-height: 1;
    /* Asegurar tamaño visible del chevron en todos los contextos. */
    font-size: 1rem;
}

.treetable .treetable-toggle .icon {
    width: 1em;
    height: 1em;
    font-size: 1em;
}

.treetable .treetable-col-actions {
    width: 2.5rem;
    text-align: center;
}

.treetable .treetable-search-hit > td {
    background-color: var(--tblr-warning-lt, rgba(247, 159, 31, 0.1));
}

.treetable .treetable-toggle:focus-visible {
    outline: 2px solid var(--tblr-primary, #0054a6);
    outline-offset: 2px;
    border-radius: 2px;
}

.treetable .treetable-toggle-spacer {
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.25rem;
}

/* Mostrar el icono que corresponde al estado del row. */
.treetable [aria-expanded="true"] .treetable-icon-collapsed,
.treetable [aria-expanded="false"] .treetable-icon-expanded {
    display: none;
}

.treetable .treetable-label {
    display: inline-flex;
    align-items: center;
}

/* Header de la columna label: alinea el texto del encabezado con el texto
   de las filas. Reusa clones invisibles de la manija de arrastre y un
   spacer del toggle para ocupar exactamente el mismo ancho que el prefijo
   de cada fila (manija + chevron). Así "Nombre" cae sobre el label real
   en vez de pegado al borde de la celda. */
.treetable .treetable-header-label {
    display: inline-flex;
    align-items: center;
}

.treetable .treetable-header-spacer {
    visibility: hidden;
    cursor: default;
}

/* Manija de arrastre para reordenar filas (solo visible en filas
   ``data-treetable-draggable``). SortableJS engancha por
   ``[data-treetable-drag-handle]``. ``cursor: grab`` señala la afordancia;
   pasa a ``grabbing`` mientras se arrastra (clase ``sortable-ghost`` del
   propio Sortable en la fila fantasma). */
.treetable .treetable-drag-handle {
    cursor: grab;
    margin-left: -0.25rem;
    /* 0.25rem (gap estándar chevron→texto) + 3px extra de aire al nombre. */
    margin-right: calc(0.25rem + 3px);
    color: var(--tblr-secondary, #6c757d);
    line-height: 1;
}

.treetable tr.sortable-ghost {
    opacity: 0.5;
}

.treetable tr.sortable-ghost .treetable-drag-handle {
    cursor: grabbing;
}

/* ─── Plantillas de formset hidden ──────────────────────────────────
   Django admin marca el ``<tr>`` clonable de un TabularInline (y filas
   no-instanciadas) con clase ``empty-form`` o ``template``. Su CSS
   (``django/contrib/admin/static/admin/css/forms.css``) las oculta con
   ``display: none``. Como Tabler reemplazó ese stack por su propio
   ``tabler.min.css``, la regla nunca llega — la fila clonable queda
   visible y se ve duplicada al renderizar. Restauramos el ocultamiento
   explícitamente. La clase la remueve ``app.js`` al clonar la fila
   para agregar una nueva entrada al inline. */
.formset .empty-form {
    display: none !important;
}

/* Acciones inline en la fila de tabs (ver tab_items.html ``<li ms-auto>``):
   los botones del header (Importar / Exportar / Añadir / Editar / etc.)
   se mueven a la fila de tabs cuando hay > 1 auto-tab. Se renderean con
   tamaño normal por default (vienen como strings capturados de los
   ``nav-global``/``nav-global-side`` blocks). Acá los achicamos a sm para
   que su altura quede pareja con la de los ``.nav-link`` de las tabs.

   Tratamiento C: la fila de tabs vive en ``.page-tabs-row`` (banda blanca
   de cabecera), no en un ``card-header``. Targetea sólo los descendientes
   del ``<li ms-auto>`` para no afectar a otros btn-list. */
.page-tabs-row .nav-tabs > li.nav-item.ms-auto .btn {
    --tblr-btn-padding-y: 0.25rem;
    --tblr-btn-padding-x: 0.5rem;
    --tblr-btn-font-size: 0.75rem;
    --tblr-btn-line-height: 1.25;
    --tblr-btn-border-radius: var(--tblr-border-radius-sm);
}

/* El icono del btn-sm queda muy grande con el font-size default de
   Tabler Icons. Bajamos el tamaño para mantener la proporción. */
.page-tabs-row .nav-tabs > li.nav-item.ms-auto .btn .icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

/* Centrar verticalmente el grupo de botones respecto a los ``.nav-link``
   de las tabs (que llevan ``padding-bottom`` para alojar el borde inferior
   de la tab activa). */
.page-tabs-row .nav-tabs > li.nav-item.ms-auto {
    display: flex;
    align-items: center;
}

/* ─── Tratamiento C: espaciado header full-bleed + cuerpo gris ──────────
   El handoff "Mejora de espacio en componentes" define que la zona de
   cabecera (título/identidad + acciones + pestañas) va full-bleed sobre
   blanco, y el cuerpo (toolbar + tabla / fichas) va sobre gris con cards.
   Valores de referencia: mockup "Variantes C - Listar y Persona". */

/* Cuerpo sobre el gris nativo de Tabler (``--tblr-body-bg`` = #f9fafb). Antes
   se fijaba a #f1f5f9 (gris del mockup), pero ese valor difería del gris del
   ``.page`` que asoma cuando el contenido no llega al fondo, dejando dos grises
   distintos bajo el header. Reusar la variable de Tabler los unifica. */
.page-body {
    background-color: var(--tblr-body-bg);
}

/* Banda blanca full-bleed de cabecera: aloja el header (título/identidad +
   acciones) y la fila de pestañas. El borde inferior la separa del cuerpo
   gris. */
.page-header-band {
    background-color: #fff;
    border-bottom: 1px solid #e6e7e9;
}

/* El ``.page-header`` interno trae margen propio de Tabler que rompería el
   full-bleed contra los bordes de la banda. Lo neutralizamos y damos un
   padding vertical propio. */
.page-header-band .page-header {
    margin: 0;
    /* Fila de identidad/título: padding vertical 14px (mockup ``.titlerow``). */
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* Título de la vista: 20px/700, gris azulado oscuro del mockup C-2. */
.page-header-band .page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f1b2d;
}

[data-bs-theme="dark"] .page-header-band .page-title {
    color: var(--tblr-body-color);
}

/* Fila de pestañas dentro de la banda blanca. Sin la fila, la banda queda
   sólo con el header. El gap entre tabs y el espacio inferior espejan el
   mockup. */
.page-tabs-row {
    background-color: #fff;
    /* Separador superior full-bleed entre la fila de identidad/título y las
       pestañas (mockup ``.tabsrow`` border-top). El borde inferior lo aporta
       el ``.page-header-band`` (también full-bleed), evitando la doble línea
       que aparecía al poner los bordes container-width sobre el ``.nav-tabs``
       (una línea container + una línea de banda full-bleed). */
    border-top: 1px solid #f0f1f3;
}

[data-bs-theme="dark"] .page-tabs-row {
    border-top-color: var(--tblr-border-color);
}

.page-tabs-row .nav-tabs {
    /* Sin borde inferior propio: el del ``.page-header-band`` (full-bleed)
       cierra la fila de pestañas a lo ancho de la página. */
    border-bottom: none;
    gap: 1.5rem;
    margin-bottom: 0;
}

.page-tabs-row .nav-tabs > li.nav-item {
    margin-bottom: 0;
}

.page-tabs-row .nav-tabs .nav-link {
    /* Alto de fila ~46px (mockup ``.tabsrow``): 0.75rem vertical sobre la línea
       base de 14px de la pestaña. */
    padding: 0.75rem 0;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tblr-secondary, #6c757d);
    font-weight: 500;
}

.page-tabs-row .nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom-color: #206bc4;
    color: #206bc4;
    font-weight: 600;
}

/* El slot derecho de acciones no debe heredar el border-bottom de tab. */
.page-tabs-row .nav-tabs > li.nav-item.ms-auto .nav-link {
    border-bottom-color: transparent;
}

/* Cards del cuerpo: borde + radio + sombra sutil, sobre el gris. */
.page-body .card {
    border: 1px solid #e6e7e9;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Modo oscuro: los colores fijos de arriba (gris claro / blanco) pisarían el
   tema oscuro de Tabler. Reanclamos cuerpo, banda y cards a las variables del
   tema (``--tblr-body-bg`` #111827, ``--tblr-bg-surface`` #1f2937 —más claro
   que el body, para que las cards/banda resalten— y ``--tblr-border-color``). */
[data-bs-theme="dark"] .page-body {
    background-color: var(--tblr-body-bg);
}

[data-bs-theme="dark"] .page-header-band {
    background-color: var(--tblr-bg-surface);
    border-bottom-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .page-tabs-row {
    background-color: var(--tblr-bg-surface);
}

[data-bs-theme="dark"] .page-body .card {
    border-color: var(--tblr-border-color);
}

/* ─── Fidelidad C: detalles finos del mockup (C-2 / Variantes C) ────────
   Avatar de identidad, alturas de la toolbar, tipografía de las fichas y
   divisor de sección del card de detalle. */

/* Avatar de la fila de identidad: 48px, fondo/letra del mockup. */
.page-header-band .avatar.avatar-xl {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
    font-weight: 700;
}

.page-header-band .avatar.avatar-xl.bg-primary-lt {
    background-color: #dfe7f3;
    color: #3b5b8c;
}

/* Subtítulo de identidad (teléfono / mail / identificador): gris más claro y
   letra más chica que el ``text-secondary`` default (mockup ``.bcrumb``-like:
   12px / #8a94a6). Aplica también a los iconos del subtítulo. */
.page-header-band .detail-header-summary {
    font-size: 0.75rem;
    color: #8a94a6;
}

.page-header-band .detail-header-summary .icon {
    font-size: 0.8125rem;
    width: 0.8125rem;
    height: 0.8125rem;
}

[data-bs-theme="dark"] .page-header-band .detail-header-summary {
    color: var(--tblr-secondary);
}

/* Controles de la toolbar del cuerpo (búsqueda + columnas + filtros):
   alto 36px, radio 6px (mockup toolbar de búsqueda). */
.page-body .card-header .form-control,
.page-body .card-header .form-select,
.page-body .card-header .btn {
    min-height: 36px;
    border-radius: 6px;
}

/* Fichas del card de detalle: labels 10px/600/uppercase, valores ~14px. */
.page-body .datagrid-title {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #aeb6c2;
}

.page-body .datagrid-content {
    font-size: 0.875rem;
    color: #1a2234;
}

[data-bs-theme="dark"] .page-body .datagrid-content {
    color: var(--tblr-body-color);
}

/* Secciones del card de detalle (``show.html``) como bandas full-bleed: el
   ``.card-body`` pierde su padding y cada título de sección + cada datagrid
   llevan su propio padding. Los divisores (hr) de cada título llegan así a los
   bordes del card (mockup "Variantes C": header de sección con border-top +
   border-bottom de ancho completo del card). */
.show-view .page-body .card-body {
    padding: 0;
}

.show-view .page-body .card-body > .card-title {
    margin: 0;
    padding: 0.875rem 1.375rem;
    border-top: 1px solid #f0f1f3;
    border-bottom: 1px solid #f0f1f3;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a2234;
}

/* El primer título de sección queda pegado al tope del card, sin borde
   superior (sólo lo separa el borde del propio card). */
.show-view .page-body .card-body > .card-title:first-child {
    border-top: none;
}

.show-view .page-body .card-body > .datagrid {
    margin: 0;
    padding: 1.25rem 1.375rem;
}

[data-bs-theme="dark"] .show-view .page-body .card-body > .card-title {
    border-top-color: var(--tblr-border-color);
    border-bottom-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

/* ─── Breadcrumb del app bar (Tratamiento C) ────────────────────────────
   El breadcrumb vive en la barra superior (navbar_top). Separador ``›``
   gris, crumbs intermedios azules enlazados, crumb actual gris no-enlazado.
   Valores del mockup C-2 / Variantes C. */
.navbar .breadcrumb,
.page-header-band .breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    font-size: 0.8125rem;
}

/* El separador ``›`` se centra entre nodos: se anula el ``padding-left`` que
   Tabler pone en el item siguiente y se deja el espacio simétrico sólo en el
   ``::before`` (0.5rem a cada lado = mockup ``gap:8px``). Sin esto el ``›``
   quedaba pegado al nodo siguiente (0.75rem antes / 0.25rem después). */
.navbar .breadcrumb-item + .breadcrumb-item,
.page-header-band .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}

.navbar .breadcrumb-item + .breadcrumb-item::before,
.page-header-band .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #c3ccd6;
    padding-inline: 0.5rem;
}

.navbar .breadcrumb-item a,
.page-header-band .breadcrumb-item a {
    color: #206bc4;
}

/* Crumb actual (último nodo): gris, sin negrita (mockup ``.cur``). Tabler lo
   pone en bold vía ``--tblr-breadcrumb-item-active-font-weight``. */
.navbar .breadcrumb-item.active,
.page-header-band .breadcrumb-item.active {
    color: #8a94a6;
    font-weight: 400;
}

/* ─── Sidebar de dos niveles: dropdown flotante ─────────────────────
   Los grupos del sidebar vertical (`app_list.html`) usan el patrón nativo
   de Tabler/Bootstrap: `.nav-item.dropdown` + `.dropdown-toggle` (caret
   propio del `.dropdown-toggle::after`) + `.dropdown-menu` flotante. No
   hay override de CSS — Tabler posiciona y estila el dropdown del sidebar
   vertical. Fiel al demo oficial `layout-vertical`. */

/* ─── Drawer del changelist (offcanvas-end) ─────────────────────────
   Editar/crear CRUDs sin pestañas sin salir de la lista (ver
   admin/change_list.html + src/drawer.js). Ancho "lg": ~720px o 90vw
   en viewports angostos, lo que sea menor. El contenido (header + body)
   lo inyecta el parcial admin/change_form_drawer.html por HTMX. */
.offcanvas.offcanvas-drawer-lg {
    width: min(720px, 90vw);
}

/* Ancho "xl": para el patrón `document`, que pone el archivo adjunto al lado
   del formulario. El partial lo pide con `data-drawer-size="xl"` y drawer.js
   togglea la clase (el scaffold del offcanvas es compartido, no puede
   hornear el ancho). */
.offcanvas.offcanvas-drawer-xl {
    width: min(1240px, 96vw);
}

/* ─── Patrón `document`: visor del archivo + formulario ─────────────────
   El visor ocupa toda la altura de su columna; el scroll de las páginas del
   PDF es interno al visor (`.pdf-viewer-pages`, en `src/pdf_viewer.css`) y la
   columna del formulario scrollea sola. */

/* Apiladas (abajo de lg) scrollea el bloque completo; el visor arranca con
   un alto mínimo para que el archivo siga siendo legible. */
.document-layout {
    overflow-y: auto;
}

.document-layout-media {
    min-height: 18rem;
}

/* En ≥lg cada columna se limita al alto del row (`.row` envuelve, así que sin
   esto la columna del visor se estira al alto del formulario) y scrollea por
   su cuenta. */
@media (min-width: 992px) {
    .document-layout {
        overflow-y: hidden;
    }

    .document-layout > .document-layout-media,
    .document-layout > .document-layout-form {
        height: 100%;
        min-height: 0;
    }

    .document-layout-form {
        overflow-y: auto;
    }
}

.document-media-viewer {
    min-height: 0;
}

.document-media-viewer > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}