@layer tn.utilities {
/* Bound-field errors are independent messages, not an icon/text horizontal row. */
.field__error[data-tn-field-errors] { flex-direction: column; overflow-wrap: anywhere; }
/* Accessibility/semantic visibility must win over component display values. */
[hidden] { display: none !important; }
/* ==========================================================================
   TANATOS · utilities.css
   Layouts de página y utilidades de composición. Pocas y predecibles:
   el aspecto vive en componentes/patrones, no acá.
   ========================================================================== */

/* ---------- Layouts de página ---------- */
.l-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.l-main--260 { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
.l-main--300 { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.l-main--380 { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
.l-side-left { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.l-side-left--340 { grid-template-columns: 340px minmax(0, 1fr); gap: 20px; }
.l-side-left--220 { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.l-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.l-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.l-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.l-split > .l-split__aside { border-left: 1px solid var(--tn-line); }
.is-sticky { position: sticky; top: calc(var(--tn-topbar-h) + 24px); }

@media (max-width: 1180px) {
  .l-main, .l-main--260, .l-main--300, .l-main--380 { grid-template-columns: minmax(0, 1fr); }
  .l-side-left { grid-template-columns: 280px minmax(0, 1fr); }
  .is-sticky { position: static; }
}
@media (max-width: 960px) {
  .l-side-left, .l-side-left--340, .l-side-left--220, .l-2, .l-split { grid-template-columns: minmax(0, 1fr); }
  .l-3 { grid-template-columns: minmax(0, 1fr); }
  .l-split > .l-split__aside { border-left: 0; border-top: 1px solid var(--tn-line); }
}

/* ---------- Composición ---------- */
/* Filas con desplazamiento horizontal: se desvanecen hacia el lado donde hay más (tanatos.js, pasada final 2026-11-04). */
.tn-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tn-more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.tn-more-left.tn-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* Números que no se parten en dos renglones (pasada final, 2026-11-04: «Factura 0002-» / «00000122»). */
.tn-nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--start { align-items: flex-start; }
.row--baseline { align-items: baseline; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.self-start { align-self: flex-start; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.gap-28 { gap: 28px; } .gap-32 { gap: 32px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.w-full { width: 100%; }
.hide-mobile { }
@media (max-width: 760px) { .hide-mobile { display: none; } }

}

@layer tn.utilities {
/* Pantallas anchas (dueño, 2026-10-19): el contenido usa más ancho y la columna de información se
   separa más del contenido central. En notebooks (≤1600 px) no cambia nada. */
@media (min-width: 1600px) {
  :root { --tn-content-max: 1440px; --tn-content-max-wide: 1600px; --tn-gutter: 48px; }
  .l-main, .l-main--260, .l-main--300, .l-main--380 { gap: 44px; }
  .l-main { grid-template-columns: minmax(0, 1fr) 360px; }
  .l-main--300 { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 1920px) {
  :root { --tn-content-max: 1600px; --tn-content-max-wide: 1760px; --tn-gutter: 56px; }
  .l-main, .l-main--260, .l-main--300, .l-main--380 { gap: 52px; }
}
/* Batería RC132: con el contenido angosto, la tira de Configuración no queda fija encima del contenido. */
@container tn-main (max-width: 1060px) {
  .tn-config-nav.is-sticky { position: static; }
  .l-side-left--220:has(> .tn-config-nav) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
}