:root {
  --azul: #037ecc; --azul-suave: #e6f2fb; --tinta: #0f1b2a; --gris: #5b6675; --linea: #e3e7ec; --fondo: #f6f8fa;
  --blanco: #fff; --verde: #138a4b; --verde-suave: #e5f5ec; --rojo: #c0392b; --rojo-suave: #fbeceb;
  --ambar: #a86400; --ambar-suave: #fff3df; --radio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --azul: #4aa8eb; --azul-suave: #13283a; --tinta: #e8edf2; --gris: #9aa6b4; --linea: #263241; --fondo: #0e141b;
    --blanco: #151d26; --verde: #4cc78a; --verde-suave: #11291d; --rojo: #ef7b6e; --rojo-suave: #2c1614;
    --ambar: #f0b45a; --ambar-suave: #2b2111;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fondo); color: var(--tinta); font-size: 15px; line-height: 1.45; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
header.barra { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--blanco); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
header.barra .marca { font-weight: 800; letter-spacing: -.02em; }
header.barra .marca span { color: var(--azul); }
header.barra nav { display: flex; gap: 4px; flex-wrap: wrap; }
header.barra nav a { padding: 6px 12px; border-radius: 8px; color: var(--tinta); font-weight: 500; }
header.barra nav a.activo, header.barra nav a:hover { background: var(--azul-suave); color: var(--azul); text-decoration: none; }
header.barra .yo { margin-left: auto; color: var(--gris); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--azul-suave); color: var(--azul); white-space: nowrap; }
.etiqueta.verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta.rojo { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta.ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta.gris { background: var(--linea); color: var(--gris); }
main { max-width: 1280px; margin: 0 auto; padding: 20px; }
h1 { font-size: 22px; margin: 0 0 12px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 22px 0 10px; }
.aviso, .error, .franja { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 14px; }
.aviso { background: var(--verde-suave); color: var(--verde); }
.error { background: var(--rojo-suave); color: var(--rojo); }
.franja { background: var(--ambar-suave); color: var(--ambar); font-size: 13px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi .n { font-size: 26px; font-weight: 800; }
.kpi .t { color: var(--gris); font-size: 13px; }
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.pestanas a { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta); background: var(--blanco); font-size: 13px; }
.pestanas a.activo { border-color: var(--azul); color: var(--azul); font-weight: 600; }
.lista { display: grid; gap: 8px; }
.fila { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr auto; gap: 12px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 14px; }
.fila .nombre { font-weight: 700; }
.fila .sub { color: var(--gris); font-size: 13px; }
.fila.bloqueada { opacity: .55; }
@media (max-width: 760px) { .fila { grid-template-columns: 1fr; } }
button, .boton { font: inherit; border: 1px solid var(--azul); background: var(--azul); color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; display: inline-block; }
button.sec, .boton.sec { background: transparent; color: var(--azul); }
button.peligro { background: transparent; border-color: var(--rojo); color: var(--rojo); }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { font: inherit; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 7px 10px; width: 100%; }
textarea.codigo { font-family: ui-monospace, Consolas, monospace; font-size: 13px; min-height: 60vh; }
label { font-size: 13px; color: var(--gris); display: block; margin: 8px 0 3px; }
.rejilla-lead { display: grid; grid-template-columns: 340px 1fr 320px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .rejilla-lead { grid-template-columns: 1fr; } }
.ficha dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
.ficha dt { color: var(--gris); }
.ficha dd { margin: 0; word-break: break-word; }
.telefono { font-size: 22px; font-weight: 800; letter-spacing: .02em; margin: 6px 0 10px; }
.guion section.paso { border-left: 3px solid var(--azul); padding: 2px 0 2px 14px; margin: 0 0 14px; }
.guion h3 { margin: 0 0 4px; font-size: 15px; }
.guion p, .guion li { margin: 4px 0; }
.guion ul { padding-left: 18px; margin: 4px 0; }
mark.var { background: var(--azul-suave); color: var(--azul); padding: 0 4px; border-radius: 4px; font-weight: 600; }
mark.falta { background: var(--ambar-suave); color: var(--ambar); padding: 0 4px; border-radius: 4px; font-style: italic; }
.huecos { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; }
.huecos label { margin: 0; }
.huecos input { display: none; }
.huecos span { display: inline-block; padding: 5px 9px; border: 1px solid var(--linea); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--tinta); }
.huecos input:checked + span { background: var(--azul); color: #fff; border-color: var(--azul); }
.resultados { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.resultados button { width: 100%; padding: 8px 6px; font-size: 13px; }
.resultados .bueno { background: var(--verde); border-color: var(--verde); }
.resultados .malo { background: transparent; border-color: var(--rojo); color: var(--rojo); }
.resultados .neutro { background: transparent; border-color: var(--gris); color: var(--tinta); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--gris); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; } }
.historial { font-size: 13px; }
.historial li { margin-bottom: 4px; }
.centro { max-width: 380px; margin: 12vh auto; }
.mini { font-size: 12px; color: var(--gris); }
.formacion { max-width: 820px; }