/* Componentes — vidrio SOLO en chrome (topbar) y sheets (ficha); superficies
   densas (columnas, cards, textarea de nota) van OPACAS con hairline — regla
   dura de la spec, no decorativa (Lente 3, resuelve el conflicto glass-vs-CRM-denso). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; overflow-x: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; }

/* ── Topbar: chrome glass ───────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  backdrop-filter: blur(20px) saturate(140%);
  background: color-mix(in srgb, var(--canvas) 70%, transparent);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.tero-brand { font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.tero-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

#tero-segmented { display: flex; gap: var(--sp-2); }
.tero-seg-pill { font-family: var(--font-mono); font-size: 11px; padding: 5px 11px; border-radius: 18px; border: 1px solid var(--ink-faint); color: var(--ink-mid); }
.tero-seg-activo { border-color: var(--terracotta); color: var(--terracotta); cursor: pointer; }
.tero-seg-disabled { opacity: .55; }
.tero-seg-disabled em { font-style: normal; }

#tero-metrics-strip { display: flex; gap: var(--sp-4); }
.tero-metric-tile { text-align: center; font-family: var(--font-mono); }
.tero-metric-valor { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tero-metric-label { font-size: 10px; color: var(--ink-mid); text-transform: uppercase; letter-spacing: .06em; }

.tero-badge-syncoff { display: none; font-family: var(--font-mono); font-size: 10px; padding: 6px 11px; border-radius: 9px; border: 1px solid rgba(197,106,46,.45); color: var(--terracotta); cursor: pointer; }
#tero-identity-badge { font-family: var(--font-mono); font-size: 11px; color: var(--teal); }

.tero-btn {
  font-family: var(--font-ui); font-size: 12px; padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--elevada); color: var(--ink); cursor: pointer;
}
.tero-btn:hover { border-color: var(--terracotta); }

/* ── Nav de 3 pestañas ──────────────────────────────────────────────────── */
#tero-nav { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
.tero-nav-btn {
  font-family: var(--font-ui); font-size: 13px; padding: var(--sp-2) var(--sp-4);
  border: none; background: none; color: var(--ink-mid); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tero-nav-btn:hover { color: var(--ink); }
.tero-nav-activo { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* ── Owner (quién sigue el lead) ────────────────────────────────────────── */
.tero-owner {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink-mid); cursor: pointer; white-space: nowrap;
}
.tero-owner-arthur { border-color: var(--terracotta); color: var(--terracotta); }
.tero-owner-lucky { border-color: var(--teal); color: var(--teal); }
.tero-owner-none { color: var(--ink-faint); }
.tero-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.tero-ficha-owner { font-size: 12px; color: var(--ink-mid); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }

/* ── Estado del proyecto ────────────────────────────────────────────────── */
.tero-estado-wrap h2 { font-weight: 600; }
.tero-estado-sub { color: var(--ink-mid); font-family: var(--font-mono); font-size: 11px; margin-bottom: var(--sp-6); }
.tero-hitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.tero-hito { background: var(--elevada); border: 1px solid var(--hairline); border-left-width: 3px; border-radius: var(--radius-md); padding: var(--sp-4); cursor: pointer; transition: border-color .15s var(--ease-out); position: relative; }
.tero-hito:hover { border-color: var(--terracotta); }
.tero-hito-mas { font-family: var(--font-mono); font-size: 10px; color: var(--terracotta); margin-top: var(--sp-3); opacity: 0; transition: opacity .15s var(--ease-out); }
.tero-hito:hover .tero-hito-mas { opacity: 1; }
.tero-hito-hecho { border-left-color: var(--sap); }
.tero-hito-en_curso { border-left-color: var(--teal); }
.tero-hito-en_proceso { border-left-color: var(--ember); }
.tero-hito-bloqueado { border-left-color: var(--slate-warm); }
.tero-hito-top { display: flex; justify-content: space-between; align-items: center; }
.tero-hito-id { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.tero-hito-emoji { font-size: 16px; }
.tero-hito-titulo { font-weight: 600; margin-top: var(--sp-1); }
.tero-hito-estado { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mid); margin: var(--sp-1) 0; }
.tero-hito-detalle { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.tero-estado-h3 { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: var(--sp-8); }
.tero-frentes { display: flex; flex-direction: column; gap: var(--sp-2); }
.tero-frente { display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-3); padding: var(--sp-3); background: var(--elevada); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.tero-frente-quien { font-family: var(--font-mono); font-size: 12px; color: var(--terracotta); }
.tero-frente-que { font-size: 13px; color: var(--ink-soft); }

/* Detalle de un hito (dentro del sheet de la derecha) */
.tero-hito-detail h2 { margin: var(--sp-1) 0 var(--sp-2); }
.tero-hd-kicker { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mid); }
.tero-hd-detalle { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.tero-hd-live { font-family: var(--font-mono); font-size: 12px; color: var(--teal); background: rgba(62,142,134,.10); border: 1px solid rgba(62,142,134,.30); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; }
.tero-hd-sec { margin-top: var(--sp-4); }
.tero-hd-sec > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mid); margin-bottom: var(--sp-2); }
.tero-hd-acciones { list-style: none; padding: 0; margin: 0; }
.tero-hd-acciones li { font-size: 13px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline); line-height: 1.4; }
.tero-hd-ok { color: var(--ink-mid); }
.tero-hd-pend { color: var(--ink); }
.tero-hd-quien { font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--terracotta); color: var(--terracotta); margin-left: var(--sp-1); }
.tero-hd-vacio { font-size: 12px; color: var(--ink-mid); font-style: italic; }
.tero-hd-deps { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tero-hd-dep { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--elevada); color: var(--ink); cursor: pointer; }
.tero-hd-dep:hover { border-color: var(--terracotta); }
.tero-hd-dep-ok { color: var(--sap); }
.tero-hd-dep-wait { color: var(--sand); }
.tero-hd-dep-next { color: var(--teal); }

/* ── Contenido: superficies OPACAS con hairline ────────────────────────── */
main { flex: 1; overflow: auto; padding: var(--sp-6); }

/* Cola HOY */
.tero-hoy-wrap h2 { font-family: var(--font-ui); font-weight: 600; }
.tero-hoy-sec { margin-bottom: var(--sp-6); }
.tero-hoy-sec h3 { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.tero-hoy-empty { color: var(--ink-mid); font-style: italic; padding: var(--sp-2) 0; }
.tero-hoy-row {
  display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--elevada); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2); cursor: pointer;
}
.tero-hoy-row:hover { border-color: var(--terracotta); }
.tero-hoy-motivo { color: var(--ink-soft); }
.tero-hoy-estado { font-family: var(--font-mono); font-size: 11px; color: var(--teal); text-align: right; }

/* Kanban */
.tero-boardwrap { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4); }
.tero-col { min-width: 220px; flex: 1 0 220px; }
.tero-col-head { font-size: 12px; font-weight: 600; padding: var(--sp-2) 0; display: flex; justify-content: space-between; color: var(--ink-soft); }
.tero-col-count { font-family: var(--font-mono); color: var(--ink-mid); }
.tero-col-body { background: var(--elevada); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--sp-2); min-height: 80px; display: flex; flex-direction: column; gap: var(--sp-2); }
.tero-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--sp-3); cursor: grab; }
.tero-card:hover { border-color: var(--terracotta); }
.tero-card-nombre { font-weight: 600; }
.tero-card-meta { font-size: 11px; color: var(--ink-mid); }
.tero-card-prox { font-family: var(--font-mono); font-size: 10px; color: var(--teal); margin-top: var(--sp-1); }
.tero-badge { display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 6px; margin-top: var(--sp-1); }
.tero-badge-noshow { background: rgba(224,163,60,.18); color: var(--ember); }

.tero-terminales { margin-top: var(--sp-6); }
.tero-terminales-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tero-term { font-family: var(--font-mono); font-size: 11px; padding: var(--sp-3); border-radius: var(--radius-sm); border: 1px dashed var(--hairline); background: var(--elevada); min-width: 150px; min-height: 64px; }
.tero-term-label { margin-bottom: var(--sp-2); }
.tero-term-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tero-term-chip { font-family: var(--font-ui); font-size: 10px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--hairline); cursor: pointer; }
.tero-term-chip:hover { border-color: var(--terracotta); color: var(--terracotta); }
.tero-tono-positivo { color: var(--sap); }
.tero-tono-negativo { color: var(--rust); }
.tero-tono-neutro { color: var(--sand); }
.tero-tono-frio { color: var(--slate-warm); }
.tero-tono-fantasma { color: var(--ink-faint); }

/* ── Ficha: sheet glass ─────────────────────────────────────────────────── */
/* [hidden] tiene que ganarle a .tero-sheet-overlay (misma especificidad,
   pero la nuestra carga después de la hoja de estilos del user-agent) — si
   no, la ficha queda tapando toda la pantalla incluso con hidden puesto. */
.tero-sheet-overlay[hidden] { display: none; }
.tero-sheet-overlay {
  position: fixed; inset: 0; display: flex; justify-content: flex-end;
  background: color-mix(in srgb, var(--basalt) 55%, transparent);
}
.tero-sheet-card {
  width: min(480px, 100%); height: 100%; overflow-y: auto; position: relative;
  padding: var(--sp-6);
  backdrop-filter: blur(40px) saturate(130%);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  border-left: 1px solid var(--hairline);
}
.tero-sheet-close { position: absolute; top: var(--sp-4); right: var(--sp-4); background: none; border: none; color: var(--ink); font-size: 16px; cursor: pointer; }
.tero-ficha h2 { margin-bottom: 0; }
.tero-ficha-sub { color: var(--ink-mid); font-family: var(--font-mono); font-size: 12px; margin-bottom: var(--sp-4); }
.tero-ficha-cta { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tero-ficha-sec { margin-bottom: var(--sp-4); }
.tero-ficha-sec label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mid); margin-bottom: var(--sp-1); }
.tero-ficha-sec select, .tero-ficha-sec textarea, .tero-ficha-sec input[type=date] {
  width: 100%; background: var(--elevada); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--font-ui); padding: var(--sp-2); font-size: 13px;
}
.tero-ficha-sec textarea { min-height: 90px; resize: vertical; }
.tero-disp-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tero-btn-disp { font-size: 11px; }
.tero-ficha-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mid); margin-top: var(--sp-2); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.tero-ficha-stub .tero-stub { color: var(--ink-faint); font-style: italic; font-size: 12px; border: 1px dashed var(--hairline); border-radius: var(--radius-sm); padding: var(--sp-3); }
.tero-datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tero-drow { display: flex; flex-direction: column; font-size: 12px; }
.tero-drow span:first-child { color: var(--ink-mid); font-size: 10px; text-transform: uppercase; }
.tero-seed-note { font-size: 12px; color: var(--ink-soft); font-style: italic; }
.tero-msg-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline); font-size: 12px; }

/* ── Identidad ──────────────────────────────────────────────────────────── */
.tero-identity-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--basalt) 70%, transparent); z-index: 100; }
.tero-identity-card { background: var(--elevada); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--sp-8); text-align: center; max-width: 340px; }
.tero-identity-btns { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); justify-content: center; }
.tero-identity-btns button { font-size: 14px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--terracotta); background: transparent; color: var(--terracotta); cursor: pointer; }
.tero-identity-btns button:hover { background: var(--terracotta); color: var(--porcelain); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }