/* ═══════════════════════════════════════════════════════════════
   TABLE-STACKED — Sistema de tabla responsive con acordeón
   ───────────────────────────────────────────────────────────────
   Uso: agregar las clases al <table> y a cada <td> según su rol.
   El sistema se activa automáticamente vía CSS container query
   cuando el contenedor mide ≤ 767px (no depende del viewport).

   DEPENDENCIAS
     CSS : static/css/table_stack.css   (este archivo)
     JS  : static/js/table_stack.js     (accordion + card transparente)

   ── SETUP ───────────────────────────────────────────────────────
   Template:
     {% block heading %}
       <link rel="stylesheet" href="{% static 'css/table_stack.css' %}?v=7.1">
     {% endblock %}
     {% block extra_js %}
       <script src="{% static 'js/table_stack.js' %}"></script>
     {% endblock %}

   ── CLASES EN <table> ───────────────────────────────────────────
     table-stacked   — activa el layout en grid al comprimirse
     table-accordion — activa el comportamiento de acordeón

     <table class="table mb-0 text-nowrap table-stacked table-accordion">

   ── CLASES EN <td> ──────────────────────────────────────────────
     (sin clase)      N° — columna 1, siempre visible. Requiere
                      data-label="N°" para el selector CSS.

     ts-primary       Nombre/avatar — columna 2, siempre visible,
                      ocupa todo el espacio libre del centro.

     ts-collapsible   Dato secundario — oculto por defecto, aparece
                      en el acordeón al expandir la fila.
                      REQUIERE data-label="Texto" → se muestra como
                      etiqueta en mayúsculas a la izquierda del valor.

     ts-always        Acciones (⋮) — columna 3, siempre visible,
                      anclado a la derecha.

     ts-expander      Franja expandir/colapsar — NO lleva contenido
                      real, solo los iconos chevron. Va DESPUÉS de
                      ts-always en el DOM.

   ── ORDEN DE <td> EN CADA <tr> ──────────────────────────────────
     N°  →  ts-primary  →  ts-collapsible(s)  →  ts-always  →  ts-expander

   ── EJEMPLO COMPLETO ────────────────────────────────────────────
     <tr>
       <td data-label="N°">1</td>
       <td class="ts-primary" data-label="Nombre">
         <div class="d-flex align-items-center gap-2">...</div>
       </td>
       <td class="ts-collapsible" data-label="Fecha">21/04/2026</td>
       <td class="ts-collapsible" data-label="Estado">Activo</td>
       <td class="ts-always" data-label="">
         <div class="dropdown dropstart position-static">...</div>
       </td>
       <td class="ts-expander" data-label="">
         <i class="bi bi-chevron-down ts-exp-open"></i>
         <i class="bi bi-chevron-up ts-exp-close"></i>
       </td>
     </tr>

   ── RESULTADO VISUAL (mobile) ────────────────────────────────────
     Cerrado:
     ┌─────────────────────────────────────────┐
     │  1  │  Nombre / subtítulo         │  ⋮  │
     │─────────────────────────────────────────│
     │                  ∨                      │  ← ts-expander
     └─────────────────────────────────────────┘

     Abierto:
     ┌─────────────────────────────────────────┐
     │  1  │  Nombre / subtítulo         │  ⋮  │
     │  FECHA        21/04/2026                │
     │  ESTADO       Activo                    │
     │─────────────────────────────────────────│
     │                  ∧                      │  ← azul = abierto
     └─────────────────────────────────────────┘

   En desktop no hay cambio — funciona como tabla normal.
   ═══════════════════════════════════════════════════════════════ */

/* ── Container query setup (automático) ────────────────────────── */
.table-responsive:has(table.table-stacked) {
  container-type: inline-size;
  container-name: tbl;
}

/* ── Modo apilado ───────────────────────────────────────────────── */
@container tbl (max-width: 767px) {

  .table-stacked thead { display: none; }
  .table-stacked > tbody { border-top: none !important; }

  /* tr como grid de 3 columnas: [N°] [nombre] [acciones] */
  .table-stacked tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    margin-bottom: .65rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(30, 45, 64, .05);
    overflow: hidden;
  }

  /* Reset: todas las celdas ocultas por defecto */
  .table-stacked tbody td {
    display: none;
    padding: 0;
    border: none;
    font-size: .85rem;
  }

  /* ── N° — columna 1 ─────────────────────────────────────────── */
  .table-stacked td[data-label="N°"] {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    padding: .7rem .3rem .7rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    color: #aab8cc;
  }
  .table-stacked td[data-label="N°"]::before { display: none; }

  /* ── ts-primary — columna 2, ocupa el espacio libre ─────────── */
  .table-accordion .ts-primary,
  .table-stacked .ts-primary {
    display: flex !important;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: .7rem .4rem;
    gap: .5rem;
    border: none;
  }
  .table-stacked .ts-primary > * {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .table-stacked .ts-primary h5,
  .table-stacked .ts-primary h6 {
    font-size: .88rem;
    margin-bottom: .1rem;
  }
  .table-stacked .ts-primary p {
    font-size: .78rem;
    margin-bottom: 0;
  }
  .table-stacked .ts-primary small {
    font-size: .73rem;
  }

  /* ── ts-always — columna 3, siempre visible ──────────────────── */
  .table-stacked .ts-always {
    display: flex !important;
    align-items: center;
    grid-column: 3;
    grid-row: 1;
    padding: .7rem .75rem .7rem .3rem;
    border: none;
  }
  .table-stacked .ts-always::before { display: none !important; }

  /* ── Botón expandir/colapsar (flotante debajo del card) ─────── */
  .table-accordion .ts-expander {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    padding: .28rem 0;
    cursor: pointer;
    background: rgba(94, 114, 228, 0.08);
    border-top: none;
    user-select: none;
    transition: background .2s;
  }
  .table-accordion .ts-expander:hover {
    background: rgba(94, 114, 228, 0.15);
  }
  .table-accordion .ts-expander i {
    font-size: .8rem;
    line-height: 1;
    color: #5e72e4;
  }

  /* Estado cerrado: ∨ visible */
  .table-accordion .ts-expander .ts-exp-close { display: none !important; }
  .table-accordion .ts-expander .ts-exp-open  { display: inline-block; }

  /* Estado abierto: ∧ visible, pill danger */
  .table-accordion tbody tr.ts-open .ts-expander .ts-exp-open  { display: none !important; }
  .table-accordion tbody tr.ts-open .ts-expander .ts-exp-close { display: inline-block !important; }
  .table-accordion tbody tr.ts-open .ts-expander {
    background: rgba(229, 63, 60, 0.08);
  }
  .table-accordion tbody tr.ts-open .ts-expander:hover {
    background: rgba(229, 63, 60, 0.15);
  }
  .table-accordion tbody tr.ts-open .ts-expander i {
    color: #e53f3c;
  }

  /* ── ts-collapsible — líneas que se expanden debajo ─────────── */
  .table-accordion .ts-collapsible {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .5rem;
    overflow: hidden;
    height: 0;
    max-height: 0;
    padding: 0 1rem !important;
    opacity: 0;
    border-top: none;
    white-space: normal;
    text-align: left !important;
    pointer-events: none;
    transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
  }

  /* Label de cada fila colapsable */
  .table-accordion .ts-collapsible::before {
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 700;
    color: #8fa0bb;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
    min-width: 90px;
    padding-top: .1rem;
  }
  .table-accordion .ts-collapsible > * {
    min-width: 0;
    text-align: left;
    font-size: .82rem;
    white-space: normal;
    word-break: break-word;
  }

  /* Estado abierto */
  .table-accordion tbody tr.ts-open {
    border-color: #c9d4e8;
  }
  .table-accordion tbody tr.ts-open .ts-collapsible {
    height: auto;
    max-height: 120px;
    padding: .45rem 1rem !important;
    border-top: 1px solid #f0f4fb;
    opacity: 1;
    pointer-events: auto;
  }

  /* Empty state — la celda debe ser block full-width: un display:table-cell
     dentro de un tr display:block genera una tabla anónima que encoge al
     contenido y se ancla a la izquierda (icono descuadrado). Con block+100%
     el text-align:center centra icono, texto y botón. */
  .table-stacked tbody tr.table-empty {
    display: block;
  }
  .table-stacked tbody tr.table-empty td {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.5rem;
  }
}

/* ── Expander oculto en desktop ─────────────────────────────────── */
@container tbl (min-width: 768px) {
  .ts-expander { display: none !important; }
}

/* ── Card exterior transparente cuando el container está comprimido ─ */
/* Clase .ts-mobile agregada/removida por table_stack.js via ResizeObserver */
.card.ts-mobile {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  --bs-card-bg: transparent;
  --bs-card-border-width: 0px;
  --bs-card-box-shadow: none;
}
.card.ts-mobile .scroll-btn,
.card.ts-mobile .scroll-fade-right,
.card.ts-mobile .scroll-fade-left {
  display: none !important;
}
.card.ts-mobile .table-responsive {
  overflow: visible !important;
  padding: 0 !important;
}