/* ============================================================
   livi — Brand CSS  ·  v1 (2026)
   Pega este archivo en tu sitio y enlázalo:
   <link rel="stylesheet" href="livi-brand.css">
   Tipografía: Hanken Grotesk (se importa abajo).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* — Color — */
  --livi-navy:#0B1426;      /* funda: texto y superficies oscuras */
  --livi-ivory:#F3F1EB;     /* respiro: fondos y espacio negativo */
  --livi-green:#28D17C;     /* señal: acción, punto de la “i”. ≤10% */
  --livi-olive:#536B3F;     /* calidez: secundario */
  --livi-green-ink:#1c8f56; /* verde legible sobre claro (texto) */
  --livi-danger:#C4453D;

  /* — Superficies / bordes — */
  --livi-surface:#ffffff;
  --livi-border:rgba(11,20,38,.16);
  --livi-muted:rgba(11,20,38,.55);

  /* — Tipografía — */
  --livi-font:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --livi-mono:ui-monospace, Menlo, Consolas, monospace;

  /* — Forma — */
  --livi-radius:10px;
  --livi-radius-lg:16px;
  --livi-shadow:0 1px 3px rgba(11,20,38,.08);
  --livi-focus:0 0 0 3px rgba(40,209,124,.25);
}

/* ---------- Base ---------- */
.livi{font-family:var(--livi-font);color:var(--livi-navy);-webkit-font-smoothing:antialiased}
.livi a{color:var(--livi-olive);text-decoration:none}
.livi a:hover{color:var(--livi-navy)}

/* ---------- Wordmark (minúsculas + punto “i” en verde) ----------
   Markup:
   <span class="livi-wordmark">l<span class="i">ı</span>v<span class="i">ı</span></span>
   Ojo: usa la “i” sin punto (ı, U+0131); el punto lo pone el CSS.
   Añade .rev para fondos oscuros.                                   */
.livi-wordmark{font-family:var(--livi-font);font-weight:500;letter-spacing:-.015em;color:var(--livi-navy);line-height:.9}
.livi-wordmark.rev{color:var(--livi-ivory)}
.livi-wordmark .i{position:relative;display:inline-block}
.livi-wordmark .i::after{content:"";position:absolute;left:50%;bottom:.72em;transform:translateX(-50%);width:.15em;height:.15em;border-radius:50%;background:var(--livi-green)}

/* símbolo: pega el SVG (ver index.html) y controla color con `color:` */
.livi-symbol{overflow:visible;display:inline-block;vertical-align:middle}

/* ---------- Logotipo canónico ----------
   El marcado único vive en `assets/livi-logo.html`. Estas reglas forman
   parte de la marca, no de una pantalla, para que acceso, HQ y Livi OS
   rendericen exactamente la misma construcción. */
.liv-logo{display:inline-flex;align-items:center;gap:.32em;line-height:1;
  color:var(--livi-navy);font-size:26px}
.liv-logo__simbolo{width:1.08em;height:1.08em;flex:none;overflow:visible}
.liv-logo__punto{fill:var(--livi-green)}
.liv-logo__texto{font-size:1em;color:inherit}
.liv-logo .liv-logo__texto{color:inherit}
.liv-logo--sm{font-size:22px}
.liv-logo--md{font-size:30px}
.liv-logo--lg{font-size:44px}
.liv-solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.liv-barra .liv-logo,.liv-auth-panel .liv-logo,.liv-hq-lado .liv-logo,
.liv-navy .liv-logo{color:var(--livi-ivory)}
.liv-logo__texto{visibility:hidden}
html.liv-fuente .liv-logo__texto{visibility:visible}
html.liv-sin-js .liv-logo__texto{visibility:visible}

/* ---------- Botones ---------- */
.livi-btn{font-family:var(--livi-font);font-weight:600;font-size:15px;line-height:1;
  padding:12px 22px;border-radius:var(--livi-radius);border:1px solid transparent;
  cursor:pointer;transition:background .15s,opacity .15s,box-shadow .15s}
.livi-btn--primary{background:var(--livi-green);color:var(--livi-navy)}
.livi-btn--primary:hover{background:#20bd6d}
.livi-btn--secondary{background:var(--livi-navy);color:var(--livi-ivory)}
.livi-btn--secondary:hover{opacity:.86}
.livi-btn--ghost{background:transparent;border-color:rgba(11,20,38,.25);color:var(--livi-navy);font-weight:500}
.livi-btn--ghost:hover{background:rgba(11,20,38,.05)}
.livi-btn--sm{padding:8px 15px;font-size:13px;border-radius:8px}
.livi-btn:disabled{background:rgba(11,20,38,.14);color:rgba(11,20,38,.4);cursor:not-allowed;opacity:1}
.livi-btn:focus-visible{outline:none;box-shadow:var(--livi-focus)}

/* ---------- Producto interno · manda el canon del OS ----------
   El 26.11 (P1-1) registra la contradicción de este archivo: aquí la
   primaria es verde, la secundaria navy y el foco verde — exactamente al
   revés del canon del OS. El CTO acotó la reconciliación al PRODUCTO
   INTERNO (2026-09-20): las páginas que operan la empresa llevan
   `livi-producto` en el `<body>` y siguen el canon; el sitio público y
   las pantallas de acceso conservan su verde, que es la marca.

   El verde deja de ser BOTÓN. Sigue siendo la marca y sigue significando
   «hecho» —`is-success`, los chips—, que es justo lo que se gastaba al
   usarlo también para llamar a la acción y para marcar el foco. */
.livi-producto{--livi-focus:0 0 0 3px rgba(11,20,38,.28)}
.livi-producto .livi-btn--primary{background:var(--livi-navy);color:var(--livi-ivory)}
.livi-producto .livi-btn--primary:hover{background:#16233d}
.livi-producto .livi-btn--secondary{background:var(--livi-surface);color:var(--livi-navy);border-color:rgba(11,20,38,.28)}
.livi-producto .livi-btn--secondary:hover{background:rgba(11,20,38,.05);opacity:1}
.livi-producto .livi-input:focus,
.livi-producto .livi-select:focus,
.livi-producto .livi-textarea:focus{border-color:var(--livi-navy)}

/* ---------- Campos ---------- */
.livi-label{display:block;font-weight:600;font-size:13px;margin-bottom:7px;color:var(--livi-navy)}
.livi-input,.livi-select,.livi-textarea{
  width:100%;box-sizing:border-box;background:var(--livi-surface);
  border:1px solid var(--livi-border);border-radius:var(--livi-radius);
  padding:12px 14px;font:400 15px var(--livi-font);color:var(--livi-navy);
  outline:none;transition:border-color .15s,box-shadow .15s}
.livi-textarea{line-height:1.5;resize:vertical}
.livi-input:focus,.livi-select:focus,.livi-textarea:focus{border-color:var(--livi-green);box-shadow:var(--livi-focus)}
.livi-input.is-error{border:1.5px solid var(--livi-danger)}
.livi-input.is-success{border:1.5px solid var(--livi-green)}
.livi-hint{font-size:12px;margin-top:6px;color:var(--livi-muted)}
.livi-hint.is-error{color:#b13c34;font-weight:500}
.livi-hint.is-success{color:var(--livi-green-ink);font-weight:500}

/* ---------- Toggle ---------- */
.livi-toggle{width:42px;height:24px;border-radius:20px;background:rgba(11,20,38,.18);position:relative;display:inline-block;cursor:pointer;transition:background .15s;flex:none}
.livi-toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.livi-toggle.is-on{background:var(--livi-green)}
.livi-toggle.is-on::after{left:20px}

/* ---------- Chips / badges ---------- */
.livi-chip{font:600 11px var(--livi-mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:20px;display:inline-block}
.livi-chip--ok{background:rgba(40,209,124,.16);color:var(--livi-green-ink)}
.livi-chip--pending{background:rgba(83,107,63,.16);color:#4a5f37}
.livi-chip--late{background:rgba(196,69,61,.14);color:#b13c34}

/* ---------- Card ---------- */
.livi-card{background:var(--livi-surface);border:1px solid rgba(11,20,38,.1);border-radius:var(--livi-radius-lg);box-shadow:var(--livi-shadow);padding:22px}

/* ============================================================
   LIVI — avatar (ser de luz)
   Markup mínimo (ver index.html):
   <div class="livi-char livi-char--md" data-state="idle"> … </div>
   Tamaños: --sm (52) · --md (120) · --lg (180) vía font-size base.
   Estados: data-state="idle|thinking|speaking|celebrating|eating"
   ============================================================ */
.livi-char{position:relative;display:inline-block;font-size:120px} /* 1em = escala */
.livi-char--sm{font-size:52px}
.livi-char--md{font-size:120px}
.livi-char--lg{font-size:180px}

.livi-char__glow{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:1.55em;height:1.55em;border-radius:50%;
  background:radial-gradient(circle,rgba(40,209,124,.5),rgba(40,209,124,0) 70%);
  filter:blur(.22em);animation:liviPulse 4.5s ease-in-out infinite}
.livi-char__float{position:relative;animation:liviFloat 6s ease-in-out infinite}
.livi-char__body{width:1em;height:1.1em;position:relative;
  border-radius:58% 42% 52% 48% / 60% 58% 42% 40%;
  background:radial-gradient(circle at 40% 30%, #fff 0%, #eafff3 22%, var(--livi-green) 64%, #1b7f52 100%);
  box-shadow:0 0 .33em rgba(40,209,124,.55), inset 0 -.13em .22em rgba(11,20,38,.3), inset 0 .1em .2em rgba(255,255,255,.65);
  transform-origin:50% 100%;animation:liviBreathe 5s ease-in-out infinite}
.livi-char__sprout{position:absolute;top:-.31em;left:50%;transform:translateX(-56%);width:.52em;height:.52em;overflow:visible}
.livi-char__eyes{position:absolute;top:.42em;left:50%;transform:translateX(-50%);display:flex;gap:.16em}
.livi-char__eye{width:.075em;height:.11em;border-radius:50%;background:var(--livi-navy)}
.livi-char__mouth{position:absolute;top:.6em;left:50%;transform:translateX(-50%);width:.15em;height:.075em;border-bottom:.021em solid rgba(11,20,38,.5);border-radius:0 0 70% 70%}

/* — estados — */
.livi-char[data-state="thinking"] .livi-char__body{animation-duration:4s}
.livi-char[data-state="thinking"] .livi-char__mouth{display:none}
.livi-char[data-state="speaking"] .livi-char__mouth{width:.13em;height:.05em;border:none;background:rgba(11,20,38,.72);border-radius:.06em;animation:liviSpeak .5s ease-in-out infinite}
.livi-char[data-state="celebrating"] .livi-char__float{animation:liviCelebrate 1.4s ease-in-out infinite}
.livi-char[data-state="celebrating"] .livi-char__eye{height:.06em;border-radius:50% 50% 0 0;border-top:.022em solid var(--livi-navy);background:none}
.livi-char[data-state="celebrating"] .livi-char__mouth{width:.17em;height:.09em;border:none;background:rgba(11,20,38,.72);border-radius:0 0 60% 60%}
.livi-char[data-state="eating"] .livi-char__body{animation:liviMunch .6s ease-in-out infinite}
.livi-char[data-state="eating"] .livi-char__eye{height:.06em;border-radius:50% 50% 0 0;border-top:.022em solid var(--livi-navy);background:none}
.livi-char[data-state="eating"] .livi-char__mouth{width:.12em;height:.075em;border:none;background:rgba(11,20,38,.72);border-radius:0 0 60% 60%;animation:liviSpeak .6s ease-in-out infinite}

/* — puntos de “pensando” (opcional, ver markup) — */
.livi-char__think{position:absolute;top:-.12em;left:54%;display:flex;gap:.06em}
.livi-char__think span{width:.06em;height:.06em;border-radius:50%;background:var(--livi-green);animation:liviThink 1.4s ease-in-out infinite}
.livi-char__think span:nth-child(2){animation-delay:.2s;opacity:.6}
.livi-char__think span:nth-child(3){animation-delay:.4s;opacity:.3}

@keyframes liviFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.1em)}}
@keyframes liviBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes liviPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes liviSpeak{0%,100%{height:.04em}50%{height:.1em}}
@keyframes liviMunch{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.93) scaleX(1.04)}}
@keyframes liviCelebrate{0%,100%{transform:translateY(0)}28%{transform:translateY(-.14em)}60%{transform:translateY(-.03em)}}
@keyframes liviThink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.025em)}}

@media (prefers-reduced-motion:reduce){
  .livi-char *{animation:none!important}
}