/* Regla del producto: ninguna pantalla tiene scroll horizontal, y menos una tabla en celular.
   Las tablas con encabezado se apilan (cada fila pasa a ser una tarjeta con sus etiquetas); lo
   hace static/js/tablas_apilables.js, que marca la tabla con .tabla-apilada y rotula cada celda.
   Para no apilar una tabla muy corta: <table data-no-stack>. */
html, body { max-width: 100%; overflow-x: clip; }       /* red de seguridad: lo que se salga se arregla, no se esconde */
img, video, canvas, svg { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
.table-responsive:has(> table.tabla-apilada) { overflow-x: visible; }

/* La flecha de desplegar solo existe en celular. */
.ta-mas { display: none; }

@media (max-width: 767.98px) {
  table.tabla-apilada, table.tabla-apilada tbody, table.tabla-apilada tfoot, table.tabla-apilada tr, table.tabla-apilada td {
    display: block; width: 100%; min-width: 0;
  }
  table.tabla-apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.tabla-apilada { border: 0; background: transparent; }
  table.tabla-apilada tr {
    border: 1px solid var(--border, rgba(15, 27, 45, .12)); border-radius: 14px; margin-bottom: .5rem;
    padding: .5rem .85rem; background: var(--surface-strong, var(--surface, #fff)); box-shadow: none !important;
  }
  table.tabla-apilada td { min-width: 0 !important; max-width: 100%; }
  table.tabla-apilada td form.d-flex { max-width: 100%; }
  table.tabla-apilada td { border: 0; padding: .2rem 0 !important; overflow-wrap: anywhere; text-align: left; background: transparent !important; box-shadow: none !important; }
  table.tabla-apilada td.ta-vacia { display: none !important; }
  table.tabla-apilada td::before { content: none; }

  /* Fila compacta: título, dos datos clave y sus acciones; el resto se despliega. */
  table.tabla-apilada tr.ta-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1rem; }
  table.tabla-apilada tr.ta-fila { position: relative; }
  table.tabla-apilada td.ta-titulo { flex: 1 1 100%; font-weight: 700; display: block; min-width: 0; }
  table.tabla-apilada td.ta-titulo .d-flex { flex-wrap: wrap; min-width: 0; }
  table.tabla-apilada tr.ta-colapsable td.ta-titulo { padding-right: 2.9rem; }
  table.tabla-apilada .ta-mas {
    display: inline-grid; place-items: center; position: absolute; top: .5rem; right: .55rem; margin: 0; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--border, rgba(15, 27, 45, .12)); background: var(--bg-2, #f1f3f7); color: inherit; padding: 0;
  }
  table.tabla-apilada .ta-mas i { transition: transform .15s ease; line-height: 1; }
  table.tabla-apilada tr.abierta .ta-mas i { transform: rotate(180deg); }
  table.tabla-apilada .ta-mas:focus-visible { outline: 2px solid var(--signal, var(--accent, #f2542d)); outline-offset: 2px; }
  table.tabla-apilada td.ta-clave { flex: 0 1 auto; width: auto; font-size: .85rem; }
  table.tabla-apilada td.ta-clave::before, table.tabla-apilada td.ta-detalle::before {
    content: attr(data-label); font-weight: 600; font-size: .78rem; color: var(--text-dim, var(--text-muted, #5d687c));
  }
  table.tabla-apilada td.ta-clave::before { content: attr(data-label) ": "; }
  table.tabla-apilada td.ta-accion { flex: 1 1 100%; display: flex; flex-direction: row !important; justify-content: flex-end; align-items: center; gap: .4rem; flex-wrap: wrap; padding-top: .3rem !important; }
  table.tabla-apilada td.ta-accion .flex-column { flex-direction: row !important; }
  table.tabla-apilada td.ta-accion form { margin: 0; }
  table.tabla-apilada td.ta-detalle { display: none !important; flex: 1 1 100%; justify-content: space-between; gap: 1rem; padding: .35rem 0 0 !important;
    border-top: 1px solid var(--border, rgba(15, 27, 45, .08)); text-align: right; }
  table.tabla-apilada tr.abierta td.ta-detalle { display: flex !important; }
  table.tabla-apilada td.ta-detalle::before { flex: 0 0 40%; max-width: 40%; text-align: left; }
  /* Filas con celdas combinadas (un aviso de «sin resultados», un pie): se muestran enteras. */
  table.tabla-apilada tr.ta-completa td { display: block; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { table.tabla-apilada .ta-mas i { transition: none; } }