/* COI · tokens y componentes compartidos.
   Tokens copiados del kit visual Glass + Malla (app/globals.css del CRM).
   Única diferencia a propósito: el acento es el rojo COI #C0272D (el #E0503A del kit es el de RC). */

:root{
  --bg:#F2F2F7; --bg-a:#f4f4f8; --bg-b:#ececf2;
  --card:rgba(255,255,255,.92); --card2:rgba(247,247,250,.88); --card-solid:#FFFFFF;
  --glass:rgba(255,255,255,.62); --field:rgba(255,255,255,.75);
  --line:rgba(60,60,67,.12); --line2:rgba(60,60,67,.08);
  --ink:#1C1C1E; --ink1:#2C2C2E; --ink2:#48484A; --muted:#8E8E93; --faint:#AEAEB2;
  --chip:rgba(120,120,128,.12); --hoverbg:rgba(120,120,128,.10); --navactive:rgba(120,120,128,.14); --avbd:#E0E0E6;
  --red:#C0272D; --red-ink:#C0272D; --red-btn:#C0272D; --red-tint:rgba(192,39,45,.12);
  --blue:#007AFF; --blue-ink:#3d62b8; --blue-dot:#5b82d6; --blue-tint:rgba(91,130,214,.14);
  --green:#2e7d54; --green-dot:#4fa97a; --green-tint:rgba(79,169,122,.14);
  --amber:#a5721e; --amber-dot:#d9a03c; --amber-tint:rgba(217,160,60,.14);
  --crit:#b8402e; --crit-dot:#c8523f; --crit-tint:rgba(200,82,63,.14);
  --grid-line:rgba(20,22,40,.045); --tint-a:rgba(192,39,45,.10); --tint-b:rgba(0,122,255,.07);
  --shadow-card:0 1px 3px rgba(20,22,40,.06),0 4px 12px rgba(20,22,40,.04);
  --shadow-float:0 8px 30px rgba(20,22,40,.10),0 2px 6px rgba(20,22,40,.05);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --r-card:12px; --r-hi:18px; --r-btn:10px; --r-cta:9px;
  --topbar:58px;
  color-scheme:light;
}
/* El modo claro manda: el oscuro solo se activa con el botón (data-theme="dark"), nunca por el sistema. */
:root[data-theme="dark"]{
  --bg:#000000; --bg-a:#0b0b0d; --bg-b:#000000;
  --card:rgba(28,28,30,.88); --card2:rgba(44,44,46,.66); --card-solid:#1C1C1E;
  --glass:rgba(28,28,30,.60); --field:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --ink:#FFFFFF; --ink1:#EBEBF0; --ink2:#C7C7CC; --muted:#8E8E93; --faint:#636366;
  --chip:rgba(255,255,255,.08); --hoverbg:rgba(255,255,255,.06); --navactive:rgba(255,255,255,.10); --avbd:#48484A;
  --red:#E04A50; --red-ink:#F2676B; --red-tint:rgba(224,74,80,.16);
  --blue:#0A84FF; --blue-ink:#8faee8;
  --green:#7cc8a2; --amber:#e0b45e; --crit:#ee9585;
  --grid-line:rgba(255,255,255,.05); --tint-a:rgba(224,74,80,.16); --tint-b:rgba(0,122,255,.10);
  --shadow-card:0 1px 3px rgba(0,0,0,.4);
  --shadow-float:0 8px 30px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  color-scheme:dark;
}

/* Logos que cambian con el tema */
.only-dark{display:none!important}
:root[data-theme="dark"] .only-light{display:none!important}
:root[data-theme="dark"] .only-dark{display:inline-block!important}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--topbar)}
body{
  margin:0; min-height:100svh; font-family:var(--font); font-size:16px; line-height:1.55;
  color:var(--ink); background-color:var(--bg); -webkit-font-smoothing:antialiased;
}
/* El fondo real del CRM: capa fija con dos radiales de tinte, malla de 1 px cada 34 px y degradé a 135°. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 88% -8%, var(--tint-a), transparent 60%),
    radial-gradient(1000px 800px at 4% 108%, var(--tint-b), transparent 55%),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 34px),
    linear-gradient(135deg, var(--bg-a), var(--bg-b));
}
#circuit{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
img{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
p{margin:0}
:focus-visible{outline:2px solid color-mix(in srgb,var(--red) 40%,transparent);outline-offset:2px;border-radius:6px}

.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

.kicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-ink)}
.label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:16px;height:16px}

/* Botones · receta "cta" del CRM: 11px 18px, radio 9, 13.5px bold */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;
  border-radius:var(--r-cta);border:1px solid transparent;font-size:13.5px;font-weight:700;line-height:1.3;
  text-decoration:none;cursor:pointer;transition:filter .15s ease,background-color .15s ease,color .15s ease,transform .15s ease;
}
.btn-primary{background:var(--red-btn);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;border-color:var(--avbd);color:var(--ink2)}
.btn-ghost:hover{background:var(--hoverbg);color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:12.5px}
.btn-lg{padding:13px 22px;font-size:15px}

/* Chips y badges de tinte: fondo al 14 %, radio 6 */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--chip);font-size:12.5px;font-weight:600;color:var(--ink2)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.pill.green{background:var(--green-tint);color:var(--green)}
.pill.amber{background:var(--amber-tint);color:var(--amber)}
.pill.crit{background:var(--crit-tint);color:var(--crit)}
.pill.blue{background:var(--blue-tint);color:var(--blue-ink)}
.pill.red{background:var(--red-tint);color:var(--red-ink)}
.pill.gray{background:var(--chip);color:var(--muted)}

/* Superficies */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.card-hi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-hi);box-shadow:var(--shadow-float)}
.stripe{height:3px;background:var(--red-btn)}
.icon-chip{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--chip);color:var(--ink1);flex:none}
.icon-chip.red{background:var(--red-tint);color:var(--red-ink)}
.icon-chip.blue{background:var(--blue-tint);color:var(--blue-ink)}
.icon-chip.green{background:var(--green-tint);color:var(--green)}
.icon-chip.gray{background:var(--chip);color:var(--ink1)}

/* Barra superior: el único lugar con blur, junto con el dock */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar);
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line2);
}
.topbar .wrap{height:100%;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
/* Logo de COI: el koi va en un solo color, nunca bicolor (Fran, 17-09). Es el vector #coi-koi del sprite de cada página:
   el koi toma el rojo del tema y «OI» la tinta. Para llevar todo el logo a un color, definí --coi-oi en el contenedor. */
.coi-logo,.coi-koi{display:block;flex:none;width:auto;fill:var(--red)}
.coi-logo{height:30px}
.coi-koi{height:18px}
.coi-logo .oi-o{fill:none;stroke:var(--coi-oi,var(--ink));stroke-width:13}
.coi-logo .oi-i{fill:var(--coi-oi,var(--ink))}
.brand-sub{font-size:12.5px;color:var(--muted);font-weight:500;padding-left:10px;border-left:1px solid var(--line)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--avbd);background:transparent;cursor:pointer;color:var(--ink2)}
.icon-btn:hover{background:var(--hoverbg);color:var(--ink)}
/* Enlace de la barra de arriba: Sobre nosotros (Fran, 16-09). En pantallas angostas van las versiones cortas. */
.nav-link{display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink2);text-decoration:none;white-space:nowrap}
.nav-link:hover{background:var(--hoverbg);color:var(--ink)}
.nav-link[aria-current="page"]{background:var(--chip);color:var(--ink)}
.nl-s{display:none}
@media (max-width:480px){.nl-l{display:none}.nl-s{display:inline}.nav-link{padding:0 9px}}
@media (max-width:640px){.brand-sub{display:none}}

/* Firma de COI: etiqueta arriba, koi + nombre abajo. Gris, chica, sin link. */
.sign{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sign .sign-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--faint)}
.sign .sign-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sign strong{color:var(--ink2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}