/* ============================================================
   css/criterios.css — hoja "¿Cómo se clasifica?" (variante A) +
   página "Criterios del equipo" (#/criterios, variante B).
   2026-09-05. Solo lo específico de estas dos piezas: el shell de
   la hoja (.sheet/.sheet-backdrop/.sheet-hd/.sheet-body) y el
   sistema de badges/chips ya viven en app.css/tokens.css.
   ============================================================ */

/* ---- Hoja "¿Cómo se clasifica?" ---- */
.crit-sub {
  padding: 0 var(--sp-4) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.crit-sheet-body { padding: 0 var(--sp-4) var(--sp-5); }
.crit-loading,
.crit-error {
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
}

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .01em;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.badge-ap { background: var(--green-soft); color: var(--green-text); border-color: var(--green-border); }
.badge-a  { background: var(--blue-soft);  color: var(--blue-text);  border-color: var(--blue-border); }
.badge-b  { background: var(--orange-soft); color: var(--orange-text); border-color: var(--orange-border); }
.badge-c  { background: var(--gray-soft, rgba(120,120,128,.12)); color: var(--text-2); border-color: var(--border); }

.td-current-tag {
  display: inline-flex; align-items: center; margin-left: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue-text); background: var(--blue-soft); border: 1px solid var(--blue-border);
  border-radius: 5px; padding: 1px 6px; vertical-align: middle;
}

/* ---- Tabla densa (desktop) ---- */
.crit-table { width: 100%; border-collapse: collapse; }
.crit-table thead tr { background: var(--surface-2); }
.crit-table th {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 7px 12px;
  border-bottom: 1.5px solid var(--border-strong); border-top: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.crit-table td {
  padding: 10px 12px; vertical-align: top; font-size: var(--fs-sm); color: var(--text-1);
  border-bottom: .5px solid var(--hairline); line-height: 1.4;
}
.crit-table tr.row-active td { background: var(--blue-soft); }
.crit-table tr:last-child td { border-bottom: none; }
.td-dato { display: block; font-size: 11px; font-weight: 600; margin-top: 3px; }
.td-dato.ok { color: var(--green-text); }
.td-dato.gap { color: var(--orange-text); }

/* ---- Mobile / puntero grueso: la tabla se apila por FILA (una tarjeta por categoría), nunca
   scroll lateral — CLAUDE.md §4.1 nº12 ("un texto cortado se mide") aplicado al ancho: acá
   directamente no hay ancho que medir porque no hay columnas. Patrón "responsive table→cards"
   sobre el MISMO <table> semántico: sin duplicar markup entre desktop y mobile. ---- */
@media (max-width: 899px), (pointer: coarse) {
  .crit-table, .crit-table thead, .crit-table tbody, .crit-table tr, .crit-table th, .crit-table td {
    display: block;
  }
  .crit-table thead { display: none; }
  .crit-table tr {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  }
  .crit-table tr.row-active { background: var(--blue-soft); border: 1.5px solid var(--blue-border); }
  .crit-table td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2);
    padding: 7px 0; border-top: .5px solid var(--hairline); border-bottom: none !important;
    text-align: right;
  }
  .crit-table td:first-child { border-top: none; }
  .crit-table td::before {
    content: attr(data-label);
    font-size: var(--fs-caption); color: var(--text-3); font-weight: 500;
    min-width: 64px; flex-shrink: 0; text-align: left; padding-top: 1px;
  }
  .crit-table td[data-label="Clase"]::before { content: ''; display: none; }
  .crit-table td[data-label="Clase"] { justify-content: flex-start; }
}

/* ---- Apilado por ANCHO REAL del contenedor (2026-09-05, criterios-sheet.js::attachStackObserver):
   `.crit-sheet` puede medir menos que la tabla de 6 columnas ESTANDO en escritorio (side-sheet de
   413px con viewport ≥900px) — el media query de arriba no lo agarra porque mira el viewport, no
   el panel. Mismas reglas que el bloque de arriba, gatilladas por la clase `.crit-stacked` que el
   JS pone/saca según `getBoundingClientRect().width` del propio `.crit-sheet`. */
.crit-sheet.crit-stacked .crit-table,
.crit-sheet.crit-stacked .crit-table thead,
.crit-sheet.crit-stacked .crit-table tbody,
.crit-sheet.crit-stacked .crit-table tr,
.crit-sheet.crit-stacked .crit-table th,
.crit-sheet.crit-stacked .crit-table td {
  display: block;
}
.crit-sheet.crit-stacked .crit-table thead { display: none; }
.crit-sheet.crit-stacked .crit-table tr {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.crit-sheet.crit-stacked .crit-table tr.row-active { background: var(--blue-soft); border: 1.5px solid var(--blue-border); }
.crit-sheet.crit-stacked .crit-table td {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2);
  padding: 7px 0; border-top: .5px solid var(--hairline); border-bottom: none !important;
  text-align: right;
}
.crit-sheet.crit-stacked .crit-table td:first-child { border-top: none; }
.crit-sheet.crit-stacked .crit-table td::before {
  content: attr(data-label);
  font-size: var(--fs-caption); color: var(--text-3); font-weight: 500;
  min-width: 64px; flex-shrink: 0; text-align: left; padding-top: 1px;
}
.crit-sheet.crit-stacked .crit-table td[data-label="Clase"]::before { content: ''; display: none; }
.crit-sheet.crit-stacked .crit-table td[data-label="Clase"] { justify-content: flex-start; }

/* ---- Ancho de la hoja en escritorio (2026-09-05): el mockup A aprobado es un panel de ~700px;
   `.sheet` en app.css cae a 460px a partir de 900px (modal centrado genérico) — acá se sobreescribe
   SOLO `.crit-sheet`, nunca la regla general. */
@media (min-width: 900px) {
  .crit-sheet { max-width: 760px; }
}

/* ---- Página "Criterios del equipo" (#/criterios) ---- */
.crit-page-body {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-4); max-width: 900px; margin: 0 auto;
}
.crit-version { font-size: var(--fs-sm); color: var(--text-3); }

.crit-cards {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
}
@media (min-width: 700px) {
  .crit-cards { grid-template-columns: 1fr 1fr; }
}

.clase-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-1);
}
.clase-card .card-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.clase-card .clase-label { font-size: var(--fs-body-lg); font-weight: 800; }
.clase-card .clase-short { font-size: var(--fs-sm); color: var(--text-2); flex: 1; min-width: 0; }
.crit-row { display: flex; gap: var(--sp-2); padding: 4px 0; border-bottom: .5px solid var(--hairline); font-size: var(--fs-sm); }
.crit-row:last-child { border-bottom: none; }
.crit-etq { color: var(--text-3); font-weight: 600; min-width: 88px; flex-shrink: 0; padding-top: 1px; }
.crit-val { color: var(--text-2); flex: 1; line-height: 1.4; }

.crit-semaforos { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 700px) {
  .crit-semaforos { flex-direction: row; }
  .crit-semaforos .semaforo-block { flex: 1; min-width: 0; }
}

.semaforo-block {
  background: var(--surface); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border);
}
.sem-block-title { font-size: var(--fs-body); font-weight: 700; color: var(--text-1); padding: 10px 14px 6px; border-bottom: .5px solid var(--hairline); }
.sem-row, .bcra-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 14px; border-bottom: .5px solid var(--hairline); font-size: var(--fs-sm);
}
.sem-row:last-child, .bcra-row:last-child { border-bottom: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow-text, var(--orange)); background: #ffcc00; }
.dot-red { background: var(--red); }
.dot-gray { background: var(--text-4); }
.sem-label { font-weight: 600; color: var(--text-1); min-width: 80px; }
.sem-desc { color: var(--text-2); flex: 1; }

/* ---- Bloques de reglas a ancho completo (K3): un bloque por sección, nunca en la fila de los
   semáforos cortos. En escritorio la etiqueta del estado (emoji + nombre + chip) tiene lugar fijo
   para que la regla arranque alineada fila a fila. ---- */
.crit-reglas { display: flex; flex-direction: column; gap: var(--sp-3); }
.crit-reglas .sem-row { align-items: flex-start; }
.crit-reglas .sem-row .dot { margin-top: 5px; }
@media (min-width: 700px) {
  .crit-reglas .sem-label { min-width: 260px; }
}
/* En celular (medido a 375 px: filas de 250-330 px con la regla en una columna angosta al lado de
   la etiqueta) la regla baja a su propio renglón, alineada con el texto de la etiqueta. */
@media (max-width: 699px) {
  .crit-reglas .sem-row { flex-wrap: wrap; }
  .crit-reglas .sem-label { min-width: 0; flex: 1; }
  .crit-reglas .sem-desc { flex: 0 0 100%; padding-left: 18px; } /* 10px de dot + 8px de gap */
}

/* ---- Chip "regla automática" / "lo pone dirección" (K3, 2026-09-05): sin color nuevo, mismos
   tokens que --text-3/--surface-2/--border ya usados en el resto del sistema (5,1:1 en los dos
   temas — ver tokens.css). ---- */
.crit-origen {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 2px 8px; white-space: nowrap;
}

.bcra-pill {
  font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 9px; color: #fff;
  flex-shrink: 0;
}
.bcra-pill-green { background: var(--green-text); }
.bcra-pill-yellow { background: var(--yellow-text, #8a6500); }
.bcra-pill-red { background: var(--red-text); }
.bcra-pill-bordo { background: var(--bordo-bg, #6d1220); }
.bcra-txt-green { color: var(--green-text); }
.bcra-txt-yellow { color: var(--yellow-text, #8a6500); }
.bcra-txt-red { color: var(--red-text); }
.bcra-txt-bordo { color: var(--bordo-bg, #6d1220); }

/* ---- "Tu cuenta" (2026-09-05): cuando la cuenta todavía no tiene clase, no hay fila "actual"
   donde colgar las anotaciones — este bloque va ARRIBA de la tabla con las 4, huecos incluidos. */
.crit-tu-cuenta {
  background: var(--blue-soft); border: 1px solid var(--blue-border); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3);
}
.crit-tu-cuenta-hd { font-size: var(--fs-sm); font-weight: 700; color: var(--text-1); margin-bottom: var(--sp-2); }
.crit-tu-cuenta-rows { display: flex; flex-direction: column; gap: 4px; }
.crit-tu-cuenta-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); }
.crit-tu-cuenta-lbl { color: var(--text-3); font-weight: 500; }