/* SIAR · Fase 2 — Método TRACK · Estilos (v40.2) */

/* ── Preparación para TRACK (bloque en Fase 1) ──────────────── */
.f1-track-prep {
  margin: 28px 0 0;
  border: 1.5px solid var(--cta);
  border-radius: 12px;
  overflow: hidden;
}
.f1-track-prep__hd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  background: color-mix(in srgb, var(--cta) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cta) 20%, transparent);
}
.f1-track-prep__icon { font-size:20px; color:var(--cta); margin-top:2px; flex-shrink:0; }
.f1-track-prep__title { font-size:14px; font-weight:700; color:var(--ink1); }
.f1-track-prep__sub { font-size:12px; color:var(--ink3); margin-top:2px; }
.f1-track-prep__grid { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:12px 0; }
@media(max-width:600px){ .f1-track-prep__grid{ grid-template-columns:1fr; } }
.f1-track-prep__item { display:flex; flex-direction:column; gap:2px; padding:8px 18px; border-bottom:1px solid var(--border); }
.f1-track-prep__lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink4); font-weight:600; }
.f1-track-prep__val { font-size:13px; color:var(--ink1); font-weight:500; }
.f1-track-prep__action { padding:14px 18px 16px; border-top:1px solid var(--border); background:var(--bg2); }

/* ── Navegación de pestañas TRACK ───────────────────────────── */
.f2-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 20px 0 0;
  padding: 0;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.f2-tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink3);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 6px 6px 0 0;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.f2-tab-btn:hover { color: var(--ink1); background: var(--bg2); }
.f2-tab-btn.on { color: var(--cta); border-bottom-color: var(--cta); font-weight:700; }
.f2-tab-btn__letter {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex; align-items:center; justify-content:center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.f2-tab-btn.on .f2-tab-btn__letter { background: var(--cta); color:#fff; }
@media(max-width:640px){
  .f2-tab-btn { padding:6px 10px 8px; font-size:12px; }
  .f2-tab-btn__letter { display:none; }
}

/* ── Contenido de cada pestaña ──────────────────────────────── */
.f2-tab { display:none; margin-top:20px; }
.f2-tab.on { display:block; }
.f2-tab-hd { margin-bottom:16px; }
.f2-tab-hd__title { font-size:17px; font-weight:700; color:var(--ink1); margin:0 0 4px; }
.f2-tab-hd__sub { font-size:13px; color:var(--ink3); line-height:1.5; }

/* ── Matrices de TRACK (tablas editables) ───────────────────── */
.track-matrix {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 13px;
}
.track-matrix th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink3);
  font-weight: 700;
}
.track-matrix td {
  padding: 6px 8px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.track-matrix tr:hover td { background: var(--bg2); }
.track-matrix td input,
.track-matrix td textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink1);
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
  min-height: 36px;
}
.track-matrix td input:focus,
.track-matrix td textarea:focus { outline: 1px solid var(--cta); border-radius: 3px; }
.track-matrix__letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 13px;
  color: #fff; flex-shrink: 0;
}
.track-matrix__letter.a { background:#16a34a; }
.track-matrix__letter.b { background:#2563eb; }
.track-matrix__letter.c { background:#f59e0b; }
.track-matrix__letter.d { background:#9ca3af; }

/* ── Fila de cadencia ───────────────────────────────────────── */
.cadencia-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.cadencia-row:first-child { border-top: 1px solid var(--border); }
.cadencia-cell {
  padding: 6px 8px;
  border-right: 1px solid var(--border);
  font-size: 13px;
}
.cadencia-cell:last-child { border-right: none; }
.cadencia-cell input, .cadencia-cell textarea {
  width:100%; border:none; background:transparent;
  font-size:13px; color:var(--ink1); font-family:inherit;
  resize:vertical; min-height:32px; line-height:1.4;
}
.cadencia-cell input:focus, .cadencia-cell textarea:focus {
  outline:1px solid var(--cta); border-radius:3px;
}
.cadencia-hd {
  display:grid;
  grid-template-columns:90px 1fr 1fr 1fr;
  gap:0;
  background:var(--bg2);
  border:1px solid var(--border);
  border-bottom:none;
  font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink3); font-weight:700;
}
.cadencia-hd-cell { padding:7px 8px; border-right:1px solid var(--border); }
.cadencia-hd-cell:last-child { border-right:none; }
@media(max-width:600px){
  .cadencia-row, .cadencia-hd { grid-template-columns:80px 1fr 1fr; }
  .cadencia-cell:nth-child(4), .cadencia-hd-cell:nth-child(4) { display:none; }
}

/* ── Checklist editable ─────────────────────────────────────── */
.track-checklist { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.track-check-item {
  display: flex; align-items:flex-start; gap:10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg1);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.track-check-item:hover { border-color:var(--cta); background:var(--bg2); }
.track-check-item.on { border-color:var(--ok); background:color-mix(in srgb,var(--ok) 6%,transparent); }
.track-check-box {
  width:18px; height:18px; border-radius:4px;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
  font-size:11px; color:transparent;
}
.track-check-item.on .track-check-box { border-color:var(--ok); color:var(--ok); }
.track-check-item.on .track-check-box::after { content:'✓'; }
.track-check-text { font-size:13px; color:var(--ink1); line-height:1.4; flex:1; }

/* ── Contexto heredado en TRACK ─────────────────────────────── */
.f2-ctx-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0;
}
@media(max-width:600px){ .f2-ctx-grid{ grid-template-columns:1fr; } }
.f2-ctx-item {
  background: var(--bg1);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.f2-ctx-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink4); font-weight:600; }
.f2-ctx-val { font-size:13px; color:var(--ink1); font-weight:500; word-break:break-word; }
.f2-ctx-val.empty { color:var(--ink5); font-style:italic; font-weight:400; }

/* ── Campo de texto inline de TRACK ────────────────────────── */
.f2-field { margin-bottom:14px; }
.f2-field label { display:block; font-size:12px; font-weight:700; color:var(--ink2); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.f2-field input, .f2-field textarea, .f2-field select {
  width:100%; padding:9px 12px;
  border:1.5px solid var(--border);
  border-radius:8px; font-size:13px; font-family:inherit;
  background:var(--bg1); color:var(--ink1);
  transition:border-color .15s;
}
.f2-field input:focus, .f2-field textarea:focus, .f2-field select:focus {
  outline:none; border-color:var(--cta);
}
.f2-field textarea { resize:vertical; min-height:72px; line-height:1.5; }
.f2-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:560px){ .f2-field-grid{ grid-template-columns:1fr; } }
.f2-field-hint { font-size:11.5px; color:var(--ink4); margin-top:3px; line-height:1.4; }

/* ── Resumen TRACK ──────────────────────────────────────────── */
.f2-resumen-box {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin:14px 0;
  font-size:13.5px;
  color:var(--ink1);
  line-height:1.6;
}
.f2-resumen-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink4); margin-bottom:8px; }
.f2-section-hd {
  font-size:14px; font-weight:700; color:var(--ink1);
  margin:20px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}

/* ── Chips de opciones ─────────────────────────────────────── */
.f2-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.f2-chip {
  padding:5px 12px;
  border:1.5px solid var(--border);
  border-radius:20px;
  font-size:12.5px;
  cursor:pointer;
  background:var(--bg1);
  color:var(--ink2);
  font-weight:500;
  transition: all .15s;
}
.f2-chip:hover { border-color:var(--cta); color:var(--cta); }
.f2-chip.sel { border-color:var(--cta); background:var(--cta); color:#fff; }

/* ── Señales de baja calidad ────────────────────────────────── */
.f2-baja-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0; }
@media(max-width:560px){ .f2-baja-grid{ grid-template-columns:1fr; } }
.f2-baja-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg1);
  font-size:12.5px;
  color:var(--ink2);
  cursor:pointer;
}
.f2-baja-item.on { border-color:var(--err); background:color-mix(in srgb,var(--err) 6%,transparent); color:var(--err); }
.f2-baja-box { width:16px; height:16px; border-radius:3px; border:1.5px solid currentColor; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; }
.f2-baja-item.on .f2-baja-box::after { content:'✕'; }

/* ── Progreso de pestaña ────────────────────────────────────── */
.f2-tab-status {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:10px;
  margin-left:6px;
}
.f2-tab-status.done { background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok); }
.f2-tab-status.pending { background:var(--bg3); color:var(--ink4); }