/* Base y componentes de Destapa. Todo sale de tokens.css; aquí no hay colores sueltos. */

/* ---------- reset y tipografía ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 16px/1.55 var(--f-body); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgb(var(--accent-rgb) / .28); }

/* Escala del brandbook: Display Sora 800 · 0.95 · −4.5 % | Título Sora 700 · 1.1 · −3 % | Texto Inter 400 · 1.55 | Etiqueta Inter 600 MAYÚS +17 % */
.display { font: 800 clamp(2.6rem, 7vw, 5.2rem)/.95 var(--f-head); letter-spacing: -.045em; margin: 0; }
h1, .h1 { font: 700 clamp(1.9rem, 4vw, 2.6rem)/1.1 var(--f-head); letter-spacing: -.03em; margin: 0 0 .4em; }
h2, .h2 { font: 700 clamp(1.4rem, 3vw, 1.8rem)/1.1 var(--f-head); letter-spacing: -.03em; margin: 0 0 .5em; }
h3, .h3 { font: 700 1.15rem/1.2 var(--f-head); letter-spacing: -.02em; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
.texto-2 { color: var(--text-2); }
.etiqueta {
  font: 600 .72rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .17em; color: var(--text-2);
}
.cifra { font-variant-numeric: tabular-nums; }
.glifo { font: 600 .8rem/1 var(--f-label); color: var(--text-2); letter-spacing: .02em; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 1.25em; border-radius: var(--pill); border: 1px solid transparent;
  font: 600 15px/1 var(--f-body); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease-out), background-color .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-accion { background: var(--btn-bg); color: var(--btn-fg); }              /* uno solo por vista */
.btn-accion:hover { background: var(--btn-hover); }
.btn-fuerte { background: var(--btn2-bg); color: var(--btn2-fg); }
.btn-secundario { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-secundario:hover { border-color: var(--text-2); }
.btn-fantasma { background: transparent; color: var(--text-2); }
.btn-fantasma:hover { color: var(--text); background: rgb(var(--text-rgb) / .06); }
.btn-peligro { background: transparent; color: var(--danger); border-color: currentColor; }
.btn-chico { min-height: 34px; padding: 0 .9em; font-size: 14px; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4em; min-height: 32px; padding: 0 .85em;
  border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent;
  font: 600 13px/1 var(--f-label); color: var(--text-2); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { color: var(--text); border-color: var(--text-2); }
.chip[aria-pressed=true] { background: var(--btn2-bg); color: var(--btn2-fg); border-color: var(--btn2-bg); }

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.tarjeta-oscura { background: var(--deep); color: var(--on-deep); border-radius: var(--r-xl); padding: 28px; }
.tarjeta-oscura .etiqueta { color: rgb(from var(--on-deep) r g b / .66); }

/* ---------- badges y estados (siempre con texto; el punto de color es apoyo) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em; border-radius: var(--pill);
  font: 600 12px/1.2 var(--f-label); white-space: nowrap; border: 1px solid var(--line-2); color: var(--text-2);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge-sin-punto::before { display: none; }
.badge-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.badge-aviso { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.badge-peligro { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.badge-accion { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.badge-accion::before { background: var(--on-accent); }

/* Prioridad: barras + texto (no depende del color) */
.prioridad { display: inline-flex; align-items: center; gap: .5em; font: 600 12px/1 var(--f-label); color: var(--text-2); }
.prioridad i { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.prioridad i b { width: 3px; border-radius: 1px; background: var(--line-2); }
.prioridad i b:nth-child(1) { height: 5px; } .prioridad i b:nth-child(2) { height: 8px; }
.prioridad i b:nth-child(3) { height: 10px; } .prioridad i b:nth-child(4) { height: 12px; }
.prioridad[data-nivel="1"] i b:nth-child(-n+1),
.prioridad[data-nivel="2"] i b:nth-child(-n+2),
.prioridad[data-nivel="3"] i b:nth-child(-n+3) { background: currentColor; }
.prioridad[data-nivel="4"] { color: var(--danger); }
.prioridad[data-nivel="4"] i b { background: currentColor; }

/* ---------- botón "?" y popover ---------- */
.ayuda {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-2); background: transparent; color: var(--text-2);
  font: 700 11px/1 var(--f-body); cursor: pointer; vertical-align: middle;
}
.ayuda:hover, .ayuda[aria-expanded=true] { color: var(--text); border-color: var(--text-2); }
.popover {
  position: absolute; z-index: 50; max-width: min(280px, calc(100vw - 32px)); padding: 12px 14px;
  border-radius: var(--r-md); background: var(--pop-bg); color: var(--pop-fg); box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.45;
}
.popover[hidden] { display: none; }

/* ---------- métrica ---------- */
.metrica .valor { font: 700 clamp(2rem, 4vw, 2.6rem)/1 var(--f-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: .25em 0; }
.metrica .nota { color: var(--text-2); font-size: 14px; margin: 0; }

/* ---------- campos ---------- */
.campo { display: grid; gap: 6px; }
.campo label { font: 600 14px/1.2 var(--f-body); }
.campo .pista { font-size: 13px; color: var(--text-2); }
.entrada {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--field); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.entrada::placeholder { color: var(--text-3); }
.entrada:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22); }
.entrada[aria-invalid=true] { border-color: var(--danger); }
.codigo-2fa { font: 600 1.4rem/1 var(--f-body); letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- tabla ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { text-align: left; font: 600 .7rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); padding: 0 12px 10px; border-bottom: 1px solid var(--line-2); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr:hover td { background: rgb(var(--text-rgb) / .03); }
.barra { height: 6px; border-radius: var(--pill); background: var(--line); overflow: hidden; min-width: 80px; }
.barra > span { display: block; height: 100%; background: var(--text); border-radius: inherit; }
.barra.completa > span { background: var(--ok); }

/* ---------- tarjeta de tarea (tablero y listas) ---------- */
.tarea {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgb(var(--text-rgb) / .04);
}
.tarea .cliente { font: 600 12px/1.2 var(--f-label); color: var(--text-2); letter-spacing: .02em; }
.tarea .titulo { font: 600 15px/1.35 var(--f-body); margin: 0; }
.tarea .pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tarea.vencida { border-color: rgb(from var(--danger) r g b / .45); }
.avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--deep-2); color: var(--on-deep); font: 700 11px/1 var(--f-body);
}
:root[data-theme=dark] .avatar { background: #262a2d; color: var(--text); }

/* Columnas del tablero */
.columna { display: grid; gap: 10px; align-content: start; }
.columna > header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }

/* ---------- estado vacío ---------- */
.vacio { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 32px 20px; }
.vacio canvas { width: min(260px, 70vw); aspect-ratio: 1; }
.vacio p { color: var(--text-2); max-width: 36ch; }

/* ---------- toast ---------- */
.toast {
  position: fixed; inset: auto 16px 16px auto; z-index: 60; display: flex; gap: 10px; align-items: center;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--pop-bg); color: var(--pop-fg); box-shadow: var(--shadow);
  animation: entrar .3s var(--ease-out);
}
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- burbujas al cerrar una tarea ---------- */
.burbuja {
  position: fixed; z-index: 70; pointer-events: none; border-radius: 50%;
  border: 1.5px solid rgb(var(--accent-rgb) / .9); background: rgb(var(--accent-rgb) / .12);
  animation: subir var(--dur, 900ms) var(--ease-out) forwards;
}
@keyframes subir {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -90px)) scale(1); }
}

/* ---------- firma ---------- */
.firma { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.firma svg { width: 36px; height: 36px; flex: none; }
.firma .nombre { font: 800 1.35rem/1 var(--f-head); letter-spacing: -.05em; }
.firma .respaldo { display: block; margin-top: 4px; font: 600 .6rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }

/* ---------- utilidades ---------- */
.fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pila { display: grid; gap: 16px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .burbuja { display: none; }
}