/* ===========================================================================
   TERNIUM — Design System (Manual de Sistemas TERNIUM, base Homer v1.9)
   Hoja compartida por las tres versiones del prototipo.
   Cada bloque referencia la sección del manual que implementa.
   =========================================================================== */

/* --- Manual §1.1 Paleta de colores corporativa --------------------------- */
:root {
  --color-text-main:      #6a6c6f;
  --color-text-light:     #9d9fa2;
  --color-text-white:     #ffffff;

  --color-brand-orange:   #ff9900;
  --color-brand-orange-2: #ffa500;
  --color-action-primary: #34495e;
  --color-favorite-on:    #ffb606;

  --color-bg-page:        #f1f3f6;
  --color-bg-panel:       #ffffff;
  --color-bg-alt:         #f7f9fa;
  --color-bg-progress:    #f5f5f5;
  --color-border:         #e4e5e7;

  --color-status-danger:  #e74c3c;
  --color-status-success: #62cb31;
  --color-status-success-dark: #006600;
  --color-status-warning: #ffd634;
  --color-status-warning-2: #ffa500;
  --color-status-info:    #3498db;
  --color-status-info-dark: #01688a;
  --color-status-neutral: #d4d4d4;
  --color-status-neutral-dark: #8c8c8c;
  --color-purple:         #9b59b6;

  /* Métricas fijas del manual */
  --control-h:            34px;
  --control-h-compact:    24px;
  --radius:               3px;
  --tile-w:               230px;
  --tile-h:               210px;
  --tile-gap:             15px;
  --pricelist-w:          298px;
  --pricelist-w-active:   278px;
}

/* --- Manual §1.2 Tipografía: Open Sans, exclusiva ------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; color: var(--color-text-main); }

.tx-h1     { font-size: 40px; font-weight: 600; line-height: 1.05; color: var(--color-brand-orange-2); }
.tx-h2     { font-size: 22px; font-weight: 700; line-height: 1.15; }
.tx-h3     { font-size: 20px; font-weight: 600; line-height: 24px; text-align: center; }
.tx-h4     { font-size: 15px; font-weight: 600; }
.tx-h5     { font-size: 13px; font-weight: 600; }
.tx-body   { font-size: 13px; font-weight: 400; }
.tx-small  { font-size: 12px; font-weight: 400; }
.tx-micro  { font-size: 11px; font-weight: 600; }
.tx-nano   { font-size: 10px; font-weight: 300; }
.tx-upper  { text-transform: uppercase; }
.tx-light  { color: var(--color-text-light); }
.tx-num    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

a { color: var(--color-action-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
}

/* --- Manual §3.1 Botones de acción --------------------------------------- */
.tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;                       /* separación exacta icono ↔ texto */
  height: var(--control-h);
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-action-primary);
  color: var(--color-text-white);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s ease, background-color .12s ease;
}
.tx-btn:hover   { filter: brightness(1.15); text-decoration: none; }
.tx-btn:active  { filter: brightness(.92); }
.tx-btn i       { font-size: 13px; color: currentColor; }
.tx-btn--main   { text-transform: uppercase; }
.tx-btn--ghost  { background: transparent; border-color: var(--color-text-main); color: var(--color-text-main); }
.tx-btn--ghost:hover { background: rgba(106,108,111,.07); filter: none; }
.tx-btn--onDark { background: transparent; border-color: var(--color-text-white); color: var(--color-text-white); }
.tx-btn--onDark:hover { background: rgba(255,255,255,.12); filter: none; }
.tx-btn--orange { background: var(--color-brand-orange); }
.tx-btn--sm     { height: var(--control-h-compact); font-size: 11px; padding: 0 8px; }
.tx-btn[disabled] { opacity: .45; cursor: not-allowed; }

.tx-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-bg-panel); color: var(--color-text-main);
  cursor: pointer; font-size: 14px;
}
.tx-iconbtn:hover { background: var(--color-bg-alt); }

/* --- Manual §3.3 Formularios, búsqueda y filtros ------------------------- */
.tx-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-main);
}
.tx-field + .tx-field { margin-top: 20px; }   /* separación entre controles */

.tx-input, .tx-select {
  width: 100%;
  height: var(--control-h);
  padding: 0 10px;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-main);
  font-family: inherit;
  font-size: 13px;
}
.tx-input::placeholder { color: var(--color-text-light); }
.tx-select {
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236a6c6f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.tx-input--compact, .tx-select--compact { height: var(--control-h-compact); font-size: 11px; padding: 0 8px; }
.tx-select--compact { padding-right: 22px; }

.tx-search { position: relative; }
.tx-search .tx-input { padding-right: 34px; }
.tx-search > i {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--color-text-light); pointer-events: none;
}

/* Checkbox 16x16 exacto (§3.3) */
.tx-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tx-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tx-check span.box {
  width: 16px; height: 16px; flex: 0 0 16px;
  background: #e2e2e2; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: #999999;
}
.tx-check input:checked + span.box::before { content: "\f00c"; font-family: FontAwesome; }
.tx-check input:focus-visible + span.box { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }
.tx-check em { font-style: normal; font-size: 11px; color: #666666; }

/* Tags de filtro: la "x" va del lado IZQUIERDO (§3.3) */
.tx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 8px;
  background: var(--color-text-main); border-radius: var(--radius);
  color: var(--color-text-white); font-size: 10px; text-transform: uppercase;
  border: 0; cursor: pointer; font-family: inherit;
}
.tx-tag i { font-size: 9px; order: -1; }
.tx-tag:hover { background: #56585b; }

/* Barra de filtros seleccionados */
.tx-filterbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 8px 20px; background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
}
.tx-filterbar .k { text-transform: uppercase; color: var(--color-text-light); }
.tx-filterbar .v { font-weight: 700; color: #222; }

/* --- Manual §3.2 Grillas — regla de oro: SIN paginador ------------------- */
.tx-gridwrap {
  position: relative;             /* contiene el .tx-sr de las filas, ver nota abajo */
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  overflow: auto;                 /* la navegación es por scroll, nunca paginada */
}
.tx-grid { width: 100%; border-collapse: collapse; }
.tx-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-bg-panel);
  padding: 8px 10px;
  font-size: 13px; font-weight: 700; color: var(--color-text-main);
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; user-select: none;
}
.tx-grid thead th i { font-size: 14px; margin-left: 5px; color: var(--color-text-light); }
.tx-grid thead th[aria-sort] i { color: var(--color-action-primary); }
.tx-grid thead th.num, .tx-grid td.num { text-align: right; }
.tx-grid thead th.act, .tx-grid td.act { text-align: right; }

/* Cabecera de color para grillas maestras (§3.2) */
.tx-grid--master thead th {
  background: var(--color-brand-orange);
  color: var(--color-text-white);
  font-size: 13px;
  border-bottom: 0;
  border-right: 1px solid var(--color-text-white);   /* divisores verticales blancos */
}
.tx-grid--master thead th:last-child { border-right: 0; }
.tx-grid--master thead th i { color: rgba(255,255,255,.85); }

.tx-grid tbody td {
  padding: 6px 10px;              /* padding obligatorio 6px arriba / 6px abajo */
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.tx-grid tbody tr:hover { background: var(--color-bg-alt); }
.tx-grid tbody tr[aria-selected="true"] { background: #eef4f8; }
.tx-grid tbody tr.clickable { cursor: pointer; }
.tx-grid th.ref, .tx-grid td.ref { width: 1px; padding-left: 12px; padding-right: 0; }
.tx-grid th.fav, .tx-grid td.fav { width: 1px; padding-left: 8px; padding-right: 8px; text-align: center; }

.tx-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: var(--color-bg-alt);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--color-text-light);
  border: 1px solid var(--color-border);
}
.tx-fav { background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--color-action-primary); padding: 0; }
.tx-fav[aria-pressed="true"] { color: var(--color-favorite-on); }

/* --- Semáforo ------------------------------------------------------------ */
.tx-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; flex: 0 0 13px; }
.tx-ref { display: inline-block; width: 5px; height: 30px; border-radius: 1px; flex: 0 0 5px; }
.tx-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.s-bloqueado  { background: var(--color-status-danger); }
.s-porLiberar { background: var(--color-status-warning-2); }
.s-tolerancia { background: var(--color-status-info); }
.s-alerta     { background: var(--color-status-warning); }
.s-liberado   { background: var(--color-status-success); }

.c-bloqueado  { color: var(--color-status-danger); }
.c-porLiberar { color: var(--color-status-warning-2); }
.c-tolerancia { color: var(--color-status-info); }
.c-alerta     { color: #b58c00; }
.c-liberado   { color: var(--color-status-success-dark); }

.k-permanencia  { background: var(--color-status-danger); }
.k-capacitacion { background: var(--color-status-info-dark); }
.k-regional     { background: var(--color-purple); }
.k-secure       { background: var(--color-status-neutral-dark); }

/* --- Manual §3.6 Tiles de dashboard -------------------------------------- */
.tx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile-w));
  gap: var(--tile-gap);
}
.tx-tile {
  width: var(--tile-w); min-height: var(--tile-h);
  display: flex; flex-direction: column;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  text-align: left; font-family: inherit; color: inherit;
  padding: 0; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.tx-tile:hover { border-color: var(--color-brand-orange); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.tx-tile[aria-pressed="true"] { border-color: var(--color-action-primary); box-shadow: inset 0 0 0 1px var(--color-action-primary); }
.tx-tile__body { flex: 1; padding: 20px 10px; position: relative; display: flex; flex-direction: column; }
.tx-tile__icon { position: absolute; top: 8px; right: 8px; font-size: 50px; line-height: 1; color: var(--color-text-main); opacity: .32; }
.tx-tile__title { font-size: 22px; font-weight: 700; padding-right: 52px; }
.tx-tile__big { font-size: 40px; font-weight: 600; color: var(--color-brand-orange-2); line-height: 1; margin-top: auto; }
.tx-tile__sub { font-size: 12px; text-transform: uppercase; margin-top: 10px; color: var(--color-text-light); }
.tx-tile__foot {
  background: var(--color-bg-alt); border-top: 1px solid var(--color-border);
  padding: 8px 10px; font-size: 12px; font-weight: 300; text-align: center;
}
.tx-tile--kpi .tx-tile__body { align-items: center; justify-content: center; text-align: center; }
.tx-tile--kpi .tx-tile__title { padding-right: 0; }
.tx-tile--kpi .tx-tile__big { margin-top: 0; margin-bottom: 4px; }
.tx-tile__desc { font-size: 12px; font-weight: 300; color: var(--color-text-main); margin-top: 8px; }
/* Tile de 2 columnas: 230*2 + 15 = 475px (fórmula del manual §3.6) */
.tx-tile--w2 { width: calc(var(--tile-w) * 2 + var(--tile-gap)); grid-column: span 2; }

/* --- Manual §3.5 Price Lists --------------------------------------------- */
.tx-pl {
  width: var(--pricelist-w);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  font-family: inherit; text-align: left; color: inherit; padding: 0;
  cursor: pointer;
}
.tx-pl[aria-pressed="true"] { width: var(--pricelist-w-active); box-shadow: 0 0 0 2px var(--color-action-primary); }
.tx-pl__head {
  height: 42px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--color-text-white);
  font-size: 15px; font-weight: 700; text-transform: uppercase;
}
.tx-pl[aria-pressed="true"] .tx-pl__head { height: 48px; }
.tx-pl__mod { padding: 10px 20px; }
.tx-pl__mod + .tx-pl__mod { border-top: 1px solid var(--color-border); }
.tx-pl__modtitle { font-size: 15px; font-weight: 600; text-transform: uppercase; color: var(--color-text-main); }
.tx-pl__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tx-pl__num { font-size: 22px; font-weight: 700; color: var(--color-text-main); }
.tx-pl__cap { font-size: 12px; text-transform: uppercase; color: var(--color-text-main); }
.tx-pl__foot { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 20px; margin-top: auto; }

/* Barra de avance 10px (§3.5) — con el reset de padding que pide el manual */
.tx-progress { height: 10px; background: var(--color-bg-progress); border-radius: 2px; overflow: hidden; }
.tx-progress > .tx-progress-bar { height: 100%; padding-right: 0px; border-radius: 2px; transition: width .4s ease; }

/* Componente Bola 60x60 (§3.5) */
.tx-ball {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-white); font-size: 22px; font-weight: 300;
  margin: 0 auto;
}

/* --- Manual §3.4 Modales ------------------------------------------------- */
.tx-modal { border: 0; padding: 0; background: transparent; max-width: min(940px, 94vw); width: 100%; }
.tx-modal::backdrop { background: rgba(0,0,0,.42); }
.tx-modal__box { background: var(--color-bg-panel); border: 1px solid var(--color-border); display: flex; flex-direction: column; max-height: 88vh; outline: none; }
.tx-modal__head {
  height: 45px; flex: 0 0 45px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px; background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 15px; font-weight: 700;
}
.tx-modal__head button { background: none; border: 0; font-size: 16px; color: var(--color-text-main); cursor: pointer; padding: 4px; }
.tx-modal__body { position: relative; padding: 20px; overflow: auto; }
.tx-modal__foot {
  background: var(--color-bg-alt); border-top: 1px solid var(--color-border);
  padding: 10px 20px; display: flex; justify-content: flex-end; gap: 10px;
}

/* Sweet-Alert: puntas cuadradas, todo centrado (§3.4) */
.tx-sweet { border: 0; padding: 0; background: transparent; max-width: 420px; }
.tx-sweet::backdrop { background: rgba(0,0,0,.42); }
.tx-sweet__box { background: var(--color-bg-panel); border-radius: 0; padding: 30px 25px; text-align: center; }
.tx-sweet__icon {
  width: 60px; height: 60px; margin: 0 auto 25px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--color-text-white);
}
.tx-sweet__title { font-size: 20px; font-weight: 600; }
.tx-sweet__sub { font-size: 13px; font-weight: 400; color: var(--color-text-main); margin-top: 15px; }
.tx-sweet__actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }

/* --- Manual §3.7 Barras, menús y navegación ------------------------------ */
.tx-tabs {
  display: flex; gap: 26px; align-items: flex-end;
  border-bottom: 1px solid var(--color-border);
  padding: 0 20px;
}
.tx-tab {
  position: relative; background: none; border: 0; padding: 12px 0;
  font-family: inherit; font-size: 13px; text-transform: uppercase;
  color: var(--color-text-main); cursor: pointer;
}
.tx-tab[aria-selected="true"] { color: #3d3f42; font-weight: 600; }
.tx-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: -1px;   /* excede 10px a cada lado */
  height: 3px; background: var(--color-brand-orange-2);
}

/* Slider superior de 56px (§3.7) */
.tx-slider { display: flex; background: var(--color-bg-panel); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.tx-slider__item {
  position: relative; flex: 1 0 auto; min-width: 150px; height: 56px; padding: 10px 16px;
  background: none; border: 0; border-right: 1px solid var(--color-border);
  font-family: inherit; text-align: left; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.tx-slider__item .lbl { font-size: 11px; text-transform: uppercase; color: var(--color-text-main); }
.tx-slider__item .val { font-size: 15px; font-weight: 700; }
.tx-slider__item[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-brand-orange-2);
}
.tx-dots { display: flex; gap: 6px; justify-content: center; padding: 8px 0; background: var(--color-bg-panel); }
.tx-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-status-neutral); }
.tx-dots span.on { background: var(--color-brand-orange-2); }

/* Offcanvas lateral (§3.7) */
.tx-offcanvas {
  position: fixed; inset: 0 0 0 auto; width: 300px; max-width: 86vw; z-index: 60;
  background: var(--color-bg-panel); border-left: 1px solid var(--color-border);
  padding: 20px; overflow: auto;
  transform: translateX(100%); transition: transform .22s ease; visibility: hidden;
}
.tx-offcanvas[data-open="true"] { transform: none; visibility: visible; }
.tx-offcanvas a, .tx-offcanvas button.nav {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  font-size: 13px; color: var(--color-text-main); background: none; border: 0;
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
}
.tx-offcanvas .sub { padding-left: 40px; }        /* indentado de subniveles */
.tx-offcanvas i { font-size: 24px; width: 24px; text-align: center; }
.tx-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 55; }

/* Volver arriba (§3.7) */
.tx-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-bg-panel); border: 1px solid var(--color-status-neutral);
  color: var(--color-text-main); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.tx-top[data-show="true"] { display: flex; }

/* --- Cabecera de aplicación --------------------------------------------- */
.tx-appbar {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 20px;
  background: var(--color-action-primary); color: var(--color-text-white);
}
.tx-appbar .brand { display: flex; align-items: baseline; gap: 10px; }
.tx-appbar .brand b { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tx-appbar .brand span { font-size: 11px; color: rgba(255,255,255,.72); text-transform: uppercase; }
.tx-appbar .spacer { flex: 1; }
.tx-appbar .tx-select { background-color: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; height: var(--control-h-compact); font-size: 11px; width: auto; }
.tx-appbar .tx-select option { color: var(--color-text-main); }

/* Píldora de estado en vivo */
.tx-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.tx-live .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-status-success); }
@media (prefers-reduced-motion: no-preference) {
  .tx-live[data-live="true"] .pulse { animation: txPulse 2s ease-in-out infinite; }
  @keyframes txPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
}
.tx-live[data-live="false"] .pulse { background: var(--color-status-neutral); }

/* --- Utilidades ---------------------------------------------------------- */
.tx-panel { background: var(--color-bg-panel); border: 1px solid var(--color-border); }
.tx-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border);
}
.tx-sectionbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border);
}
.tx-row { display: flex; align-items: center; gap: 10px; }
.tx-wrap { display: flex; flex-wrap: wrap; gap: 15px; }
/* Texto solo para lectores de pantalla.
   Es position:absolute, así que todo contenedor con scroll que lo albergue debe
   declarar position:relative; de lo contrario se ancla al bloque contenedor
   inicial y alarga el documento con scroll vacío. */
.tx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.tx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 20px; padding: 3px 7px; line-height: 1.2;
  border-radius: var(--radius); font-size: 10px; font-weight: 600; text-transform: uppercase;
  color: var(--color-text-white);
}
.tx-chip--ghost { background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text-main); }

.tx-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-left: 3px solid var(--color-brand-orange-2);
  background: #fff8ec; font-size: 11px; color: #8a6100;
}
.tx-sox {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 10px; font-weight: 300; color: var(--color-text-light);
}

/* Cuenta regresiva */
.tx-count { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; }
.tx-count[data-urgent="true"] { color: var(--color-status-warning-2); }
.tx-count[data-done="true"]  { color: var(--color-status-success-dark); }

/* Estado vacío */
.tx-empty { padding: 60px 20px; text-align: center; }
.tx-empty i { font-size: 48px; color: var(--color-status-neutral); }
.tx-empty h3 { margin-top: 15px; }
.tx-empty p { margin: 8px 0 0; font-size: 13px; color: var(--color-text-light); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Detalle del bloqueo (usado por las tres versiones) ------------------ */
.tx-detalle__id {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 15px; margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}
.tx-detalle__reloj {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px;
  align-items: end; padding: 10px 15px; margin-bottom: 10px;
  background: var(--color-bg-alt);
}
.tx-kv { width: 100%; border-collapse: collapse; }
.tx-kv td { padding: 6px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tx-kv tr:last-child td { border-bottom: 0; }

.tx-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--color-border); }
.tx-timeline li { position: relative; padding: 0 0 15px 14px; }
.tx-timeline li::before {
  content: ""; position: absolute; left: -22px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-bg-panel); border: 2px solid var(--color-action-primary);
}
.tx-timeline li:last-child { padding-bottom: 0; }

/* --- Responsive: la grilla densa se vuelve lista en pantallas chicas ------ */
@media (max-width: 720px) {
  .tx-appbar { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .tx-appbar .tx-h5 { width: 100%; order: 3; }
  .tx-tiles { grid-template-columns: 1fr; }
  .tx-tile, .tx-tile--w2 { width: 100%; min-height: 0; grid-column: auto; }
  .tx-pl { width: 100%; }
  .tx-detalle__reloj { grid-template-columns: 1fr 1fr; }
  .tx-tabs { gap: 16px; overflow-x: auto; }
}