/* base (Cuotas Claras la trae en su <style>): sin esto el body tiene margen y la barra se desborda */
*{box-sizing:border-box;margin:0}

/* Hasta Ti: el contenido de cada tomo, sobre los tokens de manuales.css (marino CSS, papel, oro). */
.workspace{color:var(--text);font-family:var(--serif)}
.aviso-proto{display:none;margin:0 0 1.2rem}
.aviso-proto .marco{
  padding:.8rem 1rem;border-left:3px solid var(--pink);
  background:rgba(19,53,95,.7);color:var(--muted);font-size:.9rem;line-height:1.5;
}
.aviso-proto b{color:var(--paper)}

.tomo{max-width:40rem}
.tomo-num{margin:0 0 .3rem;color:var(--pink);font-style:italic;font-size:1rem}
.tomo h1{
  margin:0 0 .8rem;color:var(--paper);
  font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:600;font-style:italic;
  letter-spacing:-.025em;line-height:1.08;
}
.tomo .lede{margin:0 0 1.6rem;color:var(--muted);font-size:1.12rem;line-height:1.6}
.tomo .lede em{color:var(--paper)}

/* la cifra que justifica el tomo, con su fuente */
.dato{
  display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:baseline;
  margin:0 0 1.8rem;padding:1.1rem 1.2rem;border-radius:4px 12px 12px 4px;
  background:var(--card);border:1px solid rgba(220,200,164,.16);
}
.dato .cifra{
  grid-row:span 2;margin:0;color:var(--pink-bright);
  font-size:clamp(2.6rem,7vw,3.6rem);font-style:italic;font-weight:600;line-height:.9;
}
.dato p{margin:0;line-height:1.5}
.dato .fuente{margin-top:.45rem;color:var(--muted);font-size:.82rem}

.pasos-tit{margin:0 0 .6rem;color:var(--muted);font-style:italic}
.pasos{margin:0 0 1.2rem;padding:0;list-style:none;counter-reset:paso}
.pasos li{
  position:relative;margin:0 0 .9rem;padding-left:2.6rem;line-height:1.55;
  counter-increment:paso;
}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:-.1rem;
  width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;
  background:var(--pink);color:#1d1a15;font-style:italic;font-weight:700;
}
.pasos b{color:var(--paper)}

.demo:empty{display:none}
.demo{margin:0 0 1.8rem}

/* puertas: los canales que la gente ya usa */
.puertas{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 3rem}
.puertas-tit{flex-basis:100%;margin:0 0 .2rem;color:var(--muted);font-style:italic}
.puerta{
  display:inline-flex;align-items:center;min-height:48px;padding:0 1.3rem;border-radius:999px;
  font-weight:700;font-style:italic;text-decoration:none;
  border:1px solid rgba(220,200,164,.28);color:var(--paper);background:rgba(26,66,116,.55);
  transition:background 200ms ease,transform 200ms var(--ease);
}
.puerta:hover{background:rgba(34,82,140,.8);transform:translateY(-2px)}
.puerta:focus-visible{outline:2px solid var(--pink-bright);outline-offset:3px}
.puerta.voz{background:var(--pink);color:#1d1a15;border-color:transparent}
.puerta.voz:hover{background:var(--pink-bright)}
@media (prefers-reduced-motion:reduce){.puerta{transition:none}}

/* ── demos ── */
.demo-tit{margin:0 0 .5rem;color:var(--paper);font-size:1.35rem;font-style:italic;font-weight:600}
.demo-tit2{margin:1.6rem 0 .5rem;color:var(--paper);font-size:1.1rem;font-style:italic}
.demo-sub{margin:0 0 1rem;color:var(--muted);line-height:1.5}
.consulta{display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;align-items:end;margin:0 0 1.2rem}
.consulta label{display:grid;gap:.3rem;color:var(--muted);font-size:.9rem;font-style:italic}
.consulta select,.consulta input{
  width:100%;min-height:46px;padding:0 .8rem;border-radius:10px;
  border:1px solid rgba(220,200,164,.28);background:var(--card-suave);color:var(--paper);
  font:inherit;font-style:normal;
}
.consulta button,.acciones-chat button{
  min-height:46px;padding:0 1.3rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--pink);color:#1d1a15;font:italic 700 1rem var(--serif);
}
.consulta button:hover,.acciones-chat button:hover{background:var(--pink-bright)}
.consulta :focus-visible,.acciones-chat button:focus-visible{outline:2px solid var(--pink-bright);outline-offset:2px}

/* la conversación: burbujas de papel, no la marca de ninguna app */
.chat{display:flex;flex-direction:column;gap:.55rem;max-width:32rem;padding:1rem;border-radius:18px;
  background:rgba(7,29,58,.6);border:1px solid rgba(220,200,164,.14)}
.burbuja{max-width:88%;padding:.65rem .85rem;border-radius:4px 14px 14px 14px;line-height:1.45;
  background:var(--paper);color:#29251d}
.burbuja.yo{align-self:flex-end;border-radius:14px 4px 14px 14px;background:var(--pink);color:#1d1a15}
.burbuja small{display:block;margin-top:.35rem;color:#6b5a3e;font-size:.75rem;font-style:italic}
.acciones-chat{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 0}
.acciones-chat .hecho{color:var(--ok-tx,#c5d4b4);font-style:italic}

.semaforo{display:grid;gap:.7rem;margin:0 0 1rem;padding:0;list-style:none}
.semaforo li{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;padding:.8rem 1rem;border-radius:4px 12px 12px 4px;
  background:var(--card);border:1px solid rgba(220,200,164,.14)}
.sem-med{color:var(--paper);font-weight:600}
.sem-nac{color:var(--muted);text-align:right}
.sem-nac b{color:var(--ok-tx,#c5d4b4)}
.sem-barra{grid-column:1/-1;height:8px;border-radius:99px;background:rgba(125,154,106,.35);overflow:hidden}
.sem-barra span{display:block;width:var(--p);height:100%;background:var(--rojo,#c46a4e)}
.sem-cuenta{grid-column:1/-1;color:var(--muted);font-size:.88rem;line-height:1.4}
.sem-cuenta b{color:#e8b4a4}
.reportes{margin:0;padding-left:1.1rem;color:var(--muted);line-height:1.7}
.workspace .fuente{color:var(--muted);font-size:.82rem}
@media (max-width:640px){.consulta{grid-template-columns:1fr}.semaforo li{grid-template-columns:1fr}.sem-nac{text-align:left}}
.kpis-ht{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:0 0 1rem;padding:0;list-style:none}
.kpis-ht li{padding:.8rem;border-radius:4px 12px 12px 4px;background:var(--card);border:1px solid rgba(220,200,164,.14);color:var(--muted);font-size:.88rem;line-height:1.3}
.kpis-ht b{display:block;color:var(--pink-bright);font-size:1.6rem;font-style:italic}
.eventos{margin:0 0 .8rem;padding:0;list-style:none}
.eventos li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(220,200,164,.12)}
.eventos small{color:var(--muted);white-space:nowrap}
.nota-llana{margin:0 0 1rem;color:var(--muted);line-height:1.55}
.nota-llana b{color:var(--paper)}
.guion{margin:0 0 1rem;padding:0;list-style:none;counter-reset:g}
.guion li{counter-increment:g;display:flex;gap:.8rem;align-items:baseline;padding:.6rem .9rem;margin:0 0 .45rem;
  border-radius:4px 12px 12px 4px;background:var(--paper);color:#29251d}
.guion li::before{content:counter(g);color:#7a5c2e;font-style:italic;font-weight:700}
@media (max-width:640px){.kpis-ht{grid-template-columns:repeat(2,1fr)}}
/* con un tomo abierto el texto sube bajo la barra fija: velo marino para que no se encime con los logos */
[data-vista="detail"] .fm-topbar{background:linear-gradient(180deg,var(--ink-deep) 70%,rgba(7,29,58,0))}
/* Escritorio: la barra vive dentro del escenario (z-index 4) y el texto encima (12), así que un fondo en la
   barra no la tapa. La columna de texto tiene su propio scroll y empieza debajo de la barra. */
@media (min-width:901px){
  [data-vista="detail"] .workspace{
    position:fixed;top:92px;bottom:0;right:0;margin:0;max-width:none;overflow-y:auto;
    left:calc(16% + min(22vw,340px) + 5.5rem);padding:0 2.5vw 3rem .4rem;overscroll-behavior:contain;
  }
  [data-vista="detail"] .workspace > *{max-width:720px}
}
[data-vista="detail"] .fm-topbar .contacto{visibility:hidden}  /* la X de cerrar ocupa ese lugar */
.burbuja a{color:#0b3f78;font-weight:600}