/* Bitácora Kindu · design system del brand kit de Kindu
   Aloevera / Ladinta / mono en versalitas son las fuentes reales de la marca.
   Quien las tenga instaladas las ve; el resto cae a las alternativas de Google. */

:root{
  --ink:#181C34; --ink-soft:#333A63;
  --paper:#FAF6EC; --paper2:#F1E9D8; --gutter:#E9E2D2;
  --blue:#5C7FC4; --blue-deep:#3E5A96;
  --lavender:#AF9BF2; --terracotta:#DD7A3C;
  --muted:#6B7094; --line:rgba(24,28,52,.13);

  --surface:#fff; --ground:var(--gutter); --text:var(--ink); --text-2:var(--muted);
  --accent:var(--blue-deep); --ok:#2F7D5B; --alerta:var(--terracotta);

  --f-body:'Aloevera','Inter',system-ui,-apple-system,sans-serif;
  --f-marca:'Ladinta','Fraunces',Georgia,serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r:14px; --sombra:0 1px 2px rgba(24,28,52,.05),0 2px 8px rgba(24,28,52,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#20253F; --ground:#12162A; --text:var(--paper); --text-2:#9AA0C0;
    --accent:var(--lavender); --line:rgba(250,246,236,.14); --ok:#6FCFA0;
    --sombra:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --surface:#20253F; --ground:#12162A; --text:var(--paper); --text-2:#9AA0C0;
  --accent:var(--lavender); --line:rgba(250,246,236,.14); --ok:#6FCFA0;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--text);
  font:400 15px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* etiquetas en mono, mayúscula, muy espaciadas · detalle de marca Kindu */
.eyebrow{
  font:500 10.5px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2);
}

/* ---------- login ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login{
  width:min(400px,100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:36px 32px; box-shadow:var(--sombra);
}
.marca{font:500 30px/1 var(--f-marca);letter-spacing:-.01em;margin:0 0 4px}
.login p.sub{margin:0 0 26px;color:var(--text-2);font-size:14px}
label.campo{display:block;margin-bottom:16px}
label.campo span{display:block;margin-bottom:6px}
input[type=email],input[type=password],textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px;
  background:var(--ground); color:var(--text); font:inherit; font-size:14.5px;
}
textarea{resize:vertical;min-height:76px;line-height:1.55}
.btn{
  width:100%; padding:12px; border:0; border-radius:9px;
  background:var(--blue-deep); color:#fff; font-weight:600; font-size:15px;
}
.btn:hover{background:var(--blue)}
.btn.sec{background:transparent;color:var(--text-2);border:1px solid var(--line);width:auto;padding:7px 14px;font-size:13px;font-weight:500}
.btn.sec:hover{color:var(--text);border-color:var(--accent)}
.error{color:var(--terracotta);font-size:13.5px;margin-top:12px;min-height:20px}

/* ---------- cabecera ---------- */
header{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line);padding:12px 22px;
}
.fila{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.crece{flex:1}
.quien{font:500 15px/1.2 var(--f-marca);font-size:17px}
.quien small{display:block;font:400 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-top:3px}
nav{display:flex;gap:2px;background:var(--ground);padding:3px;border-radius:10px;flex-wrap:wrap}
nav button{
  padding:7px 14px;border:0;background:transparent;color:var(--text-2);
  border-radius:8px;font-size:13.5px;font-weight:500;
}
nav button[aria-current="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sombra)}

/* ---------- avance ---------- */
.avance{display:flex;align-items:center;gap:12px;margin-top:12px}
.barra{flex:1;height:7px;background:var(--ground);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .35s ease}
.avance b{font:500 15px/1 var(--f-marca);font-variant-numeric:tabular-nums}

main{padding:22px;max-width:1240px;margin:0 auto}

/* ---------- bloques ---------- */
.bloque{margin-bottom:30px}
.bloque-h{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.bloque-h h2{font:500 20px/1.2 var(--f-marca);margin:0;letter-spacing:-.01em}
.bloque-h .cuenta{font:400 12px/1 var(--f-mono);color:var(--text-2)}
.bloque .nota-bloque{color:var(--text-2);font-size:13.5px;margin:0 0 14px;max-width:62ch}

/* ---------- tarjeta ---------- */
.lista{display:grid;gap:9px}
.t{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sombra);
}
.t.c-producto{border-left-color:var(--ok)}
.t.c-ventas{border-left-color:var(--terracotta)}
.t.c-equipo{border-left-color:var(--lavender)}
.t.c-operaciones{border-left-color:var(--blue)}
.t.c-marca{border-left-color:#D98BB4}
.t.c-finanzas{border-left-color:var(--blue-deep)}
.t.c-alianzas{border-left-color:#8A6FD4}
.t.c-experimentos{border-left-color:var(--blue)}
.t.hecha{opacity:.55}
.t.hecha .titulo{text-decoration:line-through;text-decoration-color:var(--text-2)}
.t.vencida{border-color:var(--terracotta);background:color-mix(in srgb,var(--terracotta) 6%,var(--surface))}

.tick{
  appearance:none;width:21px;height:21px;margin:2px 0 0;border:1.5px solid var(--line);
  border-radius:6px;background:var(--ground);display:grid;place-items:center;flex:none;
}
.tick:checked{background:var(--ok);border-color:var(--ok)}
.tick:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.tick:disabled{opacity:.4;cursor:not-allowed}

.cuerpo{min-width:0}
.linea1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.id{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--text-2)}
.titulo{font-weight:600;font-size:15px;line-height:1.35;margin:0 0 5px;cursor:pointer}
.titulo:hover{color:var(--accent)}
.resumen{color:var(--text-2);font-size:13.5px;line-height:1.5;margin:0 0 9px}
.metas{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{
  font:400 11.5px/1 var(--f-mono);letter-spacing:.04em;padding:4px 8px;border-radius:6px;
  background:var(--ground);color:var(--text-2);border:1px solid var(--line);white-space:nowrap;
}
.chip.alto{color:var(--terracotta);border-color:color-mix(in srgb,var(--terracotta) 45%,var(--line))}
.chip.dueno{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.chip.venc{background:var(--terracotta);color:#fff;border-color:var(--terracotta);font-weight:500}
.chip.priv{background:var(--ink-soft);color:var(--paper);border-color:var(--ink-soft)}
.chip.nota{background:color-mix(in srgb,var(--lavender) 18%,var(--surface));color:var(--text);border-color:color-mix(in srgb,var(--lavender) 40%,var(--line))}
.firma{font:400 11px/1 var(--f-mono);color:var(--text-2);margin-top:8px}

/* ---------- matriz ---------- */
.matriz{display:grid;grid-template-columns:140px repeat(4,1fr);gap:9px}
.mh{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);text-align:center;padding:8px 0}
.mr{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;justify-content:flex-end;padding-right:10px;text-align:right}
.celda{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px;min-height:88px}
.celda.oro{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--surface))}
.mini{font-size:12px;padding:6px 8px;border-radius:7px;background:var(--ground);margin-bottom:5px;cursor:pointer;border-left:2px solid var(--blue);line-height:1.35}
.mini:hover{background:color-mix(in srgb,var(--accent) 12%,var(--ground))}
.mini.hecha{opacity:.5;text-decoration:line-through}

/* ---------- fichas de texto ---------- */
.ficha{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;box-shadow:var(--sombra);max-width:900px}
.ficha h3{margin:0 0 3px;font:500 17px/1.3 var(--f-marca)}
.ficha .rol{color:var(--text-2);font-size:13px;margin-bottom:9px}
.ficha p{margin:8px 0;font-size:14px}
.sig{background:var(--ground);border-radius:8px;padding:9px 11px;font-size:13.5px;margin-top:10px;border-left:3px solid var(--accent)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--text-2);font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
td b{font-family:var(--f-mono);font-size:12px}

/* ---------- panel ---------- */
aside{
  position:fixed;inset:0 0 0 auto;width:min(500px,96vw);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-10px 0 40px rgba(24,28,52,.16);
  transform:translateX(101%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  z-index:60;overflow-y:auto;padding:24px 26px 60px;
}
aside.abierto{transform:none}
.cerrar{position:absolute;top:16px;right:18px;border:0;background:var(--ground);width:31px;height:31px;border-radius:9px;color:var(--text-2);font-size:18px;line-height:1}
aside h2{margin:10px 0 5px;font:500 22px/1.25 var(--f-marca);letter-spacing:-.01em}
.datos{display:grid;grid-template-columns:96px 1fr;gap:5px 14px;margin:18px 0;font-size:13px}
.datos dt{color:var(--text-2)}
.datos dd{margin:0;font-weight:500}
.detalle{font-size:14px;line-height:1.65}
.detalle p{margin:11px 0}
.detalle strong{font-weight:640}
.detalle .warn{background:color-mix(in srgb,var(--terracotta) 9%,transparent);border-radius:9px;padding:11px 13px;margin:13px 0;font-size:13.5px;border-left:3px solid var(--terracotta)}
.detalle .quote{border-left:3px solid var(--accent);padding:6px 0 6px 13px;color:var(--text-2);font-style:italic;margin:13px 0}
.detalle table{margin:12px 0}
.detalle hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.bloque-nota{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.bloque-nota .eyebrow{margin-bottom:8px;display:block}
.vacio{color:var(--text-2);text-align:center;padding:54px 20px;font-size:14px}
.ok-msg{color:var(--ok);font-size:12.5px;margin-top:7px;min-height:17px}