/* =========================================================================
   Pi Management — Sistema de diseño
   Marca: π roja + serif elegante. Paleta: rojo / carbón / crema.
   ========================================================================= */

:root {
  /* Marca */
  --red:        #C1272D;
  --red-600:    #A81F26;
  --red-700:    #8A181D;
  --red-tint:   #FBECED;

  /* Tinta / neutros cálidos */
  --ink:        #1B1714;
  --ink-2:      #39322C;
  --muted:      #6E655C;
  --muted-2:    #9B9086;
  --line:       #EAE3DA;
  --line-2:     #DED5C9;

  /* Fondos */
  --bg:         #FFFFFF;
  --cream:      #FBF8F3;
  --cream-2:    #F4EDE3;
  --ink-band:   #17130F;
  --surface:    #FFFFFF;
  /* El realce: «lo mismo, pero un punto distinto». Es lo que pinta el renglón bajo el
     cursor, el encabezado de una tabla o una tecla.
     Existe porque ese trabajo lo hacía --surface, y en tema claro --surface y --bg son el
     MISMO blanco: como las tarjetas están pintadas de #fff, el realce caía sobre blanco
     contra blanco y no se veía nada. Pasar el ratón por una fila no hacía nada visible, y
     el encabezado de las tablas no se distinguía del cuerpo. */
  --realce:     #F4F0E9;
  /* El fondo de una tarjeta. Existe porque estaba escrito «#fff» a mano en veintisiete
     reglas, y cada una necesitaba su propia excepción para el tema oscuro. Cuatro se
     quedaron sin ella —entre otras la tarjeta del lanzador— y se veían blancas sobre
     fondo oscuro. Con un token no hay excepción que olvidar. */
  --tarjeta:    #FFFFFF;

  /* Estado: bien, ojo, mal, dato, nada. Son cinco cosas que decir, no veintiuna maneras
     de decirlas. Estaban escritas a mano en dieciséis reglas de DOS familias que hacen el
     mismo trabajo —.tb-pill--* y .status-*— y ni siquiera coincidían: «pendiente» era
     #b7791f en una y #B98A3E en la otra.
     El fondo va en rgba sobre lo que haya debajo, y no en un pastel sólido: así la misma
     pastilla funciona sobre una tarjeta clara y sobre una oscura. Las de .tb-pill--*
     usaban pastel sólido y en tema oscuro quedaban como manchas claras. */
  /* La tinta va más oscura que el tono «bonito» de cada estado. Medido sobre la tarjeta,
     los originales daban 3.10 (pendiente) y 3.47 (pagada): por debajo del 4.5 que pide
     un texto pequeño, y estas pastillas van en .78rem. Con estos valores pasan de 5. */
  --ok-tinta:     #17724A;  --ok-fondo:     rgba(31,157,97,.14);
  --aviso-tinta:  #8A6520;  --aviso-fondo:  rgba(184,138,62,.18);
  --mal-tinta:    var(--red); --mal-fondo:  var(--red-tint);
  --info-tinta:   #2A5BC4;  --info-fondo:   rgba(26,86,219,.12);
  --neutro-tinta: var(--muted); --neutro-fondo: var(--cream-2);

  --header-bg:  rgba(255,255,255,.86);

  /* Tipografía */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Radios / sombras */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(27,23,20,.06), 0 2px 8px rgba(27,23,20,.05);
  --shadow:    0 8px 24px rgba(27,23,20,.08), 0 2px 6px rgba(27,23,20,.05);
  --shadow-lg: 0 24px 60px rgba(27,23,20,.14), 0 8px 20px rgba(27,23,20,.08);

  /* Layout */
  --container: 1160px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
}

/* ---------- Tema oscuro ---------- */
:root[data-theme="dark"] {
  --ink: #F2EAE0; --ink-2: #D6CCC0; --muted: #A99E92; --muted-2: #857B70;
  --line: #302A24; --line-2: #3E362E;
  --bg: #15120F; --cream: #1C1815; --cream-2: #241E19; --ink-band: #0E0C0A;
  --surface: #1E1A16; --realce: #2B2520; --tarjeta: #241E19; --header-bg: rgba(21,18,15,.9);
  /* Los fondos en rgba valen igual sobre oscuro. La tinta sí sube de luminosidad: los
     tonos del tema claro se apagan sobre una tarjeta oscura y dejan de leerse. */
  --ok-tinta: #4FC28C; --aviso-tinta: #D9A85C; --info-tinta: #7BA6F5;
  /* El rojo de marca sobre una tarjeta oscura daba 2.82: se lee mal. Aquí la tinta de
     «mal» se aclara. La marca no se toca —sigue siendo #C1272D donde es marca— porque
     esto es sólo el color del texto de una pastilla de estado. */
  --mal-tinta: #F0757B;
  --red-tint: #2C1618;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .trust__logos img { filter: grayscale(1) invert(.9) brightness(1.1); }
:root[data-theme="dark"] .footer__logo { filter: brightness(0) invert(1); }

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---------- Tipografía ---------- */
h1,h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); }
h3,h4 { font-family: var(--font-sans); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p  { color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-2); line-height: 1.6; }
strong { font-weight: 700; color: var(--ink); }

/* ---------- Utilidades ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink-band); color: #F3ECE3; }
.section--ink h1,.section--ink h2,.section--ink h3 { color: #FFF; }
.section--ink p { color: #C9BEB2; }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; }
.section--ink .eyebrow { color: #E8A0A3; }
.section--ink .eyebrow::before { background: #E8A0A3; }
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: .8rem; }
.section-head p { margin-top: 1rem; }

/* π decorativa */
.pi-mark { font-family: var(--font-display); color: var(--red); font-weight: 600; }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--red); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 6px 18px rgba(193,39,45,.22);
}
.btn:hover { transform: translateY(-2px); background: var(--red-600); box-shadow: 0 10px 26px rgba(193,39,45,.30); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }
.btn--light { background: #F5EFE7; color: #1B1714; box-shadow: var(--shadow-sm); }
.btn--light:hover { background: #FFFFFF; color: var(--red); box-shadow: var(--shadow); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; color: var(--red); font-weight: 600; }
.link-arrow svg { transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Top bar ---------- */
.topbar { background: var(--ink-band); color: #E8DFD4; font-size: .84rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.topbar a { color: #E8DFD4; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: #fff; }
.topbar .sep { color: #6c6259; }
.topbar__right { display: flex; gap: 1.2rem; align-items: center; }
@media (max-width: 720px){ .topbar__left .hide-sm { display:none; } .topbar__right .hide-sm{ display:none; } }

/* ---------- Header / nav ---------- */
.header { position: sticky; top: 0; z-index: 60; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; }
.header.is-stuck { border-color: var(--line); box-shadow: 0 6px 24px rgba(27,23,20,.06); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .85rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__pi { font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--red); line-height: 1; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__txt b { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--ink); letter-spacing: -.01em; }
.brand__txt small { font-family: var(--font-sans); font-weight: 600; font-size: .58rem; letter-spacing: .22em; color: var(--muted-2); text-transform: uppercase; margin-top: 2px; }

.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__links > li > a { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .7rem; border-radius: 8px; font-weight: 500; font-size: .95rem; color: var(--ink-2); transition: color .18s ease, background .18s ease; }
.nav__links > li > a:hover { color: var(--red); background: var(--red-tint); }
.nav__cta { display: flex; align-items: center; gap: .6rem; }

/* Dropdown */
.has-menu { position: relative; }
.dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: flex; flex-direction: column; gap: 1px; padding: .6rem .7rem; border-radius: 10px; }
.dropdown a:hover { background: var(--cream); }
.dropdown a b { font-family: var(--font-sans); font-weight: 600; font-size: .93rem; color: var(--ink); }
.dropdown a span { font-size: .8rem; color: var(--muted); }
.caret { width: 14px; height: 14px; opacity: .6; }

/* Hamburguesa */
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); align-items: center; justify-content: center; }
.nav__toggle svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero { position: relative; background:
    radial-gradient(1100px 500px at 82% -8%, var(--red-tint), transparent 60%),
    radial-gradient(800px 400px at 0% 110%, var(--cream-2), transparent 55%),
    var(--bg);
  overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.hero__eyebrow { margin-bottom: 1.2rem; }
.hero h1 { max-width: 12ch; }
.hero h1 em { font-style: italic; color: var(--red); }
.hero__lead { margin-top: 1.4rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__trust { margin-top: 1.8rem; display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--muted); }
.hero__trust svg { color: var(--red); flex: none; }

/* Panel visual del hero */
.hero__panel { position: relative; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.4rem; }
.hero-card__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.hero-card__top b { font-family: var(--font-display); font-size: 1.05rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #26c281; box-shadow: 0 0 0 4px rgba(38,194,129,.16); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.1rem; }
.kpi { background: var(--cream); border-radius: var(--r-sm); padding: .9rem 1rem; }
.kpi span { font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kpi b { display: block; font-family: var(--font-display); font-size: 1.5rem; margin-top: .2rem; color: var(--ink); }
.kpi.up b { color: #1f9d61; }

/* Las dos clases que faltaban.
 *
 * `kpi__label` y `kpi__value` se usaban en DIECINUEVE sitios del panel y no
 * tenían una sola regla: el rótulo salía del tamaño del texto normal y la cifra
 * igual, así que un indicador se leía como un párrafo suelto dentro de una caja
 * beige. No daba error en ningún lado —una clase sin estilo no se queja— y
 * afectaba a todos los tableros a la vez.
 *
 * Son las mismas medidas que `.kpi span` y `.kpi b`, que es lo que estas dos
 * vinieron a sustituir cuando alguien dejó de usar etiquetas y empezó a usar
 * divs. */
.kpi__label { display: block; font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kpi__value { display: block; font-family: var(--font-display); font-size: 1.5rem; margin-top: .2rem; color: var(--ink); line-height: 1.15; }
/* La comparación va debajo y en pequeño: es contexto de la cifra, no otra cifra. */
.kpi .tb-sub { display: block; margin-top: .25rem; font-size: .76rem; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: .5rem; height: 84px; margin-top: 1.1rem; padding: 0 .2rem; }
.bars i { flex: 1; background: linear-gradient(var(--red), var(--red-600)); border-radius: 5px 5px 0 0; opacity: .85; }
.hero-badge { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: .7rem .9rem; display: flex; align-items: center; gap: .6rem; font-size: .84rem; font-weight: 600; }
.hero-badge svg { color: var(--red); }
.hero-badge--tl { top: -18px; left: -22px; }
.hero-badge--br { bottom: -20px; right: -14px; }

/* ---------- Trust strip ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust .container { padding-block: 1.6rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.trust__label { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.trust__logos { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); flex-wrap: wrap; justify-content: center; }
.trust__logos img { height: 30px; width: auto; opacity: .72; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.trust__logos img:hover { opacity: 1; filter: grayscale(0); }

/* ---------- Grid de servicios ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.7rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card__icon { width: 52px; height: 52px; border-radius: 13px; background: var(--red-tint); color: var(--red); display: grid; place-items: center; margin-bottom: 1.1rem; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.28rem; }
.card p { margin-top: .6rem; font-size: .97rem; color: var(--muted); flex: 1; }
.card__list { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.card__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; color: var(--ink-2); }
.card__list svg { color: var(--red); flex: none; margin-top: 3px; }
.card__link { margin-top: 1.2rem; }

/* ---------- Franja valor / por qué ---------- */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.why__list { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.why__item { display: flex; gap: .9rem; }
.why__item .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--red); display: grid; place-items: center; }
.why__item h4 { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--ink); }
.why__item p { font-size: .95rem; color: var(--muted); margin-top: .15rem; }
.quote-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--r); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.quote-card p { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.4; color: var(--ink); font-style: italic; }
.quote-card .by { margin-top: 1.1rem; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: .9rem; color: var(--muted); }

/* ---------- Banda CFO ---------- */
.cfo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.cfo__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .88rem; font-weight: 500; }
.chip svg { color: #E8A0A3; }
.dashboard-mock { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 1.3rem; }
.dashboard-mock .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
.dashboard-mock .cell { background: rgba(255,255,255,.06); border-radius: 12px; padding: .9rem; }
.dashboard-mock .cell span { font-size: .72rem; color: #B6ABA0; text-transform: uppercase; letter-spacing: .05em; }
.dashboard-mock .cell b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: #fff; margin-top: .25rem; }
.dashboard-mock .chart { margin-top: .9rem; height: 120px; border-radius: 12px; background:
    linear-gradient(180deg, rgba(232,160,163,.22), transparent),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); display: flex; align-items: flex-end; gap: 6px; padding: 10px; }
.dashboard-mock .chart i { flex: 1; background: linear-gradient(#E8A0A3, var(--red)); border-radius: 4px 4px 0 0; }

/* ---------- Proceso ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 3rem; counter-reset: step; }
.step { position: relative; padding: 1.7rem; border-radius: var(--r); background: var(--cream); border: 1px solid var(--line); }
.step__num { counter-increment: step; font-family: var(--font-display); font-size: 2.6rem; color: var(--red); line-height: 1; opacity: .9; }
.step__num::before { content: "0" counter(step); }
.step h3 { font-size: 1.2rem; margin-top: .6rem; }
.step p { margin-top: .5rem; font-size: .95rem; color: var(--muted); }

/* ---------- CTA final ---------- */
.cta-final { position: relative; overflow: hidden; background:
    radial-gradient(700px 340px at 85% -10%, rgba(232,160,163,.28), transparent 60%),
    var(--ink-band); border-radius: clamp(20px, 3vw, 34px); padding: clamp(2.4rem, 6vw, 4.5rem); text-align: center; }
.cta-final h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-final p { color: #CBC0B4; margin-top: 1rem; max-width: 52ch; margin-inline: auto; }
.cta-final .hero__cta { justify-content: center; margin-top: 2rem; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-band); color: #C4B9AD; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer__logo { height: 46px; width: auto; margin-bottom: 1.1rem; filter: brightness(0) invert(1); opacity: .95; }
.footer p { color: #A79C90; font-size: .93rem; max-width: 34ch; }
.footer h5 { font-family: var(--font-sans); color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer__col a { display: block; padding: .3rem 0; color: #BCB1A5; font-size: .94rem; }
.footer__col a:hover { color: #fff; }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; font-size: .94rem; }
.footer__contact svg { color: #E8A0A3; flex: none; margin-top: 3px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .86rem; color: #8E8478; }
.footer__bottom a:hover { color: #fff; }
.footer__social { display: flex; gap: .6rem; }
.footer__social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: #C4B9AD; }
.footer__social a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Reveal on scroll ---------- */
/* El contenido se ve SIEMPRE, salvo que el JS haya dicho que sabe revelarlo.
 *
 * Antes `.reveal` empezaba en opacidad 0 y sólo el JS la subía. Cualquier tropiezo en
 * main.js —un error, un bloque que no corre, un elemento inyectado después que nadie
 * observa— dejaba secciones enteras invisibles, con el contenido ahí. Fue justo lo que
 * pasó en la tienda: los tres planes en el DOM y la sección en blanco.
 *
 * Una animación no puede ser la razón por la que algo no se ve.
 */
html.revelable .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.revelable .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 940px){
  .hero .container { grid-template-columns: 1fr; }
  .hero__panel { order: -1; max-width: 460px; }
  .why, .cfo { grid-template-columns: 1fr; }
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px){
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  /* Menú móvil */
  .nav__links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: .2rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: .8rem clamp(1.1rem,4vw,2rem) 1.2rem;
  }
  .nav__links.open > li > a { padding: .8rem .4rem; font-size: 1.05rem; border-bottom: 1px solid var(--cream-2); }
  .nav__links.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: .2rem 0 .6rem 1rem; min-width: 0; display: none; }
  .nav__links.open .has-menu.open .dropdown { display: block; }
}
@media (max-width: 560px){
  .cards, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .dashboard-mock .row { grid-template-columns: 1fr; }
}

/* =========================================================================
   v2 — Tipografía fina + animaciones de scroll + componentes nuevos
   ========================================================================= */

/* Ajuste Didone del hero */
.hero h1 { font-weight: 600; letter-spacing: -.02em; line-height: 1.02; }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--red); }
.card h3 { font-size: 1.28rem; }

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--red), #E86A63);
  box-shadow: 0 0 10px rgba(193,39,45,.45);
  transition: width .08s linear;
}

/* Marca de agua π del hero (con parallax) */
.hero__pi {
  position: absolute; top: 50%; margin-top: -.44em; right: -3%;
  font-family: var(--font-display); font-weight: 600; font-size: min(58vw, 760px);
  line-height: 1; color: var(--red); opacity: .045; pointer-events: none;
  z-index: 0; user-select: none;
}
.hero .container { position: relative; z-index: 1; }
[data-parallax] { will-change: transform; }

/* Variantes de reveal */
.reveal--left  { transform: translateX(-34px); }  .reveal--left.in  { transform: none; }
.reveal--right { transform: translateX(34px); }    .reveal--right.in { transform: none; }
.reveal--scale { transform: scale(.95); }          .reveal--scale.in { transform: none; }

/* Barras que crecen al entrar en pantalla */
.bars i, .dashboard-mock .chart i {
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 1.05s cubic-bezier(.2,.8,.2,1);
}
.bars.in i, .dashboard-mock .chart.in i { transform: scaleY(1); }

/* Banda de estadísticas */
.stats-band { border-top: 1px solid var(--line); padding-block: clamp(2.6rem,5vw,4rem); }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; text-align: center; }
.stat b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem); color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat b .u { color: var(--red); }
.stat span { display: block; margin-top: .55rem; font-size: .92rem; color: var(--muted); font-weight: 500; }
.stat + .stat { border-left: 1px solid var(--line); }
@media (max-width: 640px){
  .stats { grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; }
  .stat:nth-child(odd) { border-left: none; }
}

/* Wordmark de partner (logo en texto, editable desde config.js) */
.trust__logos .wordmark {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em;
  color: var(--muted-2); opacity: .8; filter: grayscale(1); transition: opacity .2s, filter .2s; white-space: nowrap;
}
.trust__logos .wordmark:hover { opacity: 1; filter: none; }
.trust__logos .wordmark .a { color: var(--ink); }
.trust__logos .wordmark em { font-style: normal; color: var(--red); }

/* Entrada del hero al cargar */
.hero__copy > * { opacity: 0; transform: translateY(18px); animation: heroIn .85s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__copy > *:nth-child(1){ animation-delay:.06s; }
.hero__copy > *:nth-child(2){ animation-delay:.16s; }
.hero__copy > *:nth-child(3){ animation-delay:.26s; }
.hero__copy > *:nth-child(4){ animation-delay:.36s; }
.hero__copy > *:nth-child(5){ animation-delay:.46s; }
.hero__panel { opacity: 0; animation: heroIn 1s cubic-bezier(.2,.7,.2,1) .4s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  .hero__copy > *, .hero__panel { animation: none; opacity: 1; transform: none; }
  .bars i, .dashboard-mock .chart i { transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .scroll-progress { display: none; }
}

/* =========================================================================
   v3 — Componentes de páginas internas
   ========================================================================= */

/* Nav activo */
.nav__links > li > a.is-active { color: var(--red); }

/* Hero de página interna */
.page-hero { position: relative; overflow: hidden;
  background: radial-gradient(1000px 460px at 82% -12%, var(--red-tint), transparent 60%),
              radial-gradient(700px 360px at -5% 120%, var(--cream-2), transparent 55%), var(--cream);
  border-bottom: 1px solid var(--line); }
.page-hero .container { padding-block: clamp(2.6rem, 6vw, 4.6rem); position: relative; z-index: 1; }
.page-hero .inner { max-width: 780px; }
.page-hero h1 { margin-top: 1rem; }
.page-hero .lead { margin-top: 1.2rem; max-width: 62ch; }
.page-hero .hero__cta { margin-top: 1.9rem; }
.page-hero__pi { position: absolute; top: 50%; margin-top: -.44em; right: -2%; font-family: var(--font-display);
  font-weight: 600; font-size: min(46vw, 520px); line-height: 1; color: var(--red); opacity: .05; pointer-events: none; z-index: 0; }

/* Breadcrumb */
.crumbs { font-size: .86rem; color: var(--muted); }
.crumbs a:hover { color: var(--red); }
.crumbs span { margin: 0 .4rem; opacity: .5; }

/* Split dos columnas */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.split--wide { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 820px){ .split, .split--wide { grid-template-columns: 1fr; } }

/* Panel / tarjeta de contenido */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.9rem; box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 1.2rem; }
.panel h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.panel .eyebrow { margin-bottom: .8rem; }

/* Lista con check roja (independiente) */
.check-list { display: grid; gap: .7rem; margin-top: 1.1rem; }
.check-list li { position: relative; padding-left: 1.7rem; color: var(--ink-2); font-size: .97rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }

/* Lista de audiencia (chips en bloque) */
.audience { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; margin-top: 1.2rem; }
.audience li { position: relative; padding: .9rem 1rem .9rem 2.4rem; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; font-size: .95rem; color: var(--ink-2); }
.audience li::before { content: "→"; position: absolute; left: 1rem; top: .9rem; color: var(--red); font-weight: 700; }
@media (max-width: 620px){ .audience { grid-template-columns: 1fr; } }

/* Prosa (texto largo: guías, blog, legal) */
.prose { max-width: 760px; }
.prose.center { margin-inline: auto; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; font-size: 1.22rem; }
.prose ul { display: grid; gap: .55rem; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.prose strong { color: var(--ink); }

/* Formularios */
.form { display: grid; gap: 1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea { font: inherit; font-size: .97rem; padding: .8rem .9rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.field textarea { min-height: 130px; resize: vertical; }
.form__note { font-size: .84rem; color: var(--muted); }
@media (max-width: 640px){ .form .row { grid-template-columns: 1fr; } }

/* Embed (Cal.com / mapa) placeholder */
.embed-ph { border: 2px dashed var(--line-2); border-radius: var(--r); background: var(--cream); padding: clamp(2rem,5vw,3.5rem); text-align: center; color: var(--muted); }
.embed-ph svg { color: var(--red); margin-bottom: .8rem; }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 860px){ .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card .tagline { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.post-card h3 { margin-top: .5rem; font-size: 1.18rem; }
.post-card p { margin-top: .5rem; font-size: .94rem; color: var(--muted); flex: 1; }
.post-card .link-arrow { margin-top: 1rem; }
.post-hero__meta { display: flex; gap: 1rem; align-items: center; font-size: .88rem; color: var(--muted); margin-top: 1rem; }

/* =========================================================================
   v4 — Maqueta de plataforma "a la medida"
   ========================================================================= */
.app-mock { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.app-mock__bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--cream); }
.app-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.app-mock__bar b { margin-left: .6rem; font-family: var(--font-sans); font-weight: 600; font-size: .82rem; color: var(--muted); }
.app-mock__body { display: grid; grid-template-columns: 168px 1fr; min-height: 300px; }
.app-mock__side { background: var(--ink-band); padding: 1rem .7rem; display: flex; flex-direction: column; gap: .25rem; }
.app-mock__side a { color: #B9AEA2; font-size: .8rem; padding: .45rem .6rem; border-radius: 8px; display: flex; gap: .55rem; align-items: center; }
.app-mock__side a svg { width: 15px; height: 15px; flex: none; }
.app-mock__side a.on { background: rgba(255,255,255,.09); color: #fff; }
.app-mock__main { padding: 1.1rem; }
.app-mock__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
.app-mock__tile { background: var(--cream); border-radius: 10px; padding: .75rem .8rem; }
.app-mock__tile span { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.app-mock__tile b { display: block; font-family: var(--font-display); font-size: 1.3rem; margin-top: .15rem; color: var(--ink); }
.app-mock__tile.up b { color: #1f9d61; }
.app-mock__chart { margin-top: .8rem; height: 120px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: flex-end; gap: 5px; padding: 9px; background: var(--bg); }
.app-mock__chart i { flex: 1; background: linear-gradient(var(--red), var(--red-600)); border-radius: 4px 4px 0 0; opacity: .9; }
@media (max-width: 560px){
  .app-mock__body { grid-template-columns: 1fr; }
  .app-mock__side { flex-direction: row; overflow-x: auto; }
  .app-mock__tiles { grid-template-columns: 1fr 1fr; }
}

/* Comparación a la medida vs enlatado */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.5rem; }
.vs__col { border-radius: var(--r); padding: 1.7rem; border: 1px solid var(--line); }
.vs__col--bad { background: var(--cream); }
.vs__col--good { background: var(--red-tint); border-color: rgba(193,39,45,.25); }
.vs__col h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.vs__col ul { display: grid; gap: .6rem; }
.vs__col li { position: relative; padding-left: 1.7rem; font-size: .95rem; color: var(--ink-2); }
.vs__col--bad li::before { content: "✕"; position: absolute; left: 0; color: var(--muted-2); font-weight: 700; }
.vs__col--good li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
@media (max-width: 640px){ .vs { grid-template-columns: 1fr; } }

/* =========================================================================
   v5 — Tienda ContaDigital + carrito + cotizador
   ========================================================================= */
.plan { display: flex; flex-direction: column; }
.plan.is-featured { border-color: var(--red); box-shadow: 0 14px 40px rgba(193,39,45,.14); position: relative; }
.plan__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; }
.plan__name { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin: .8rem 0 .2rem; }
.plan__price b { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; color: var(--ink); line-height: 1; }
.plan__price span { color: var(--muted); font-size: .9rem; }
.plan__desc { color: var(--muted); font-size: .93rem; margin-bottom: 1rem; }
.plan .check-list { margin-top: 0; flex: 1; }
.plan .btn { margin-top: 1.4rem; }

/* Carrito flotante */
.cart-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: var(--red); color: #fff; border: none; box-shadow: 0 10px 26px rgba(193,39,45,.4); display: grid; place-items: center; }
.cart-fab svg { width: 24px; height: 24px; }
.cart-fab__count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.cart-fab[hidden] { display: none; }

.cart-drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw); background: var(--surface); z-index: 90; box-shadow: -20px 0 60px rgba(27,23,20,.2); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.cart-drawer.open { transform: none; }
.cart-backdrop { position: fixed; inset: 0; background: rgba(27,23,20,.4); z-index: 89; opacity: 0; visibility: hidden; transition: opacity .3s; }
.cart-backdrop.open { opacity: 1; visibility: visible; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.cart-drawer__head h3 { font-size: 1.2rem; }
.cart-close { background: none; border: none; font-size: 1.5rem; color: var(--muted); line-height: 1; }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }
.cart-item { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--cream-2); }
.cart-item__info { flex: 1; }
.cart-item__info b { font-size: .95rem; font-weight: 600; }
.cart-item__info span { display: block; color: var(--muted); font-size: .85rem; }
.cart-item__rm { background: none; border: none; color: var(--muted-2); font-size: .8rem; text-decoration: underline; }
.cart-item__price { font-weight: 700; white-space: nowrap; }
.cart-empty { color: var(--muted); text-align: center; padding: 2rem 0; }
.cart-drawer__foot { padding: 1.2rem 1.4rem; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.cart-total b { font-family: var(--font-display); font-size: 1.5rem; }
.cart-note { font-size: .8rem; color: var(--muted); margin-top: .8rem; text-align: center; }

/* =========================================================================
   v6 — Agenda propia (booking) + Panel de administración
   ========================================================================= */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .55rem; margin-top: .5rem; }
.slot { padding: .6rem .4rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--realce); font-weight: 600; font-size: .92rem; text-align: center; color: var(--ink-2); transition: .15s; }
.slot:hover { border-color: var(--red); color: var(--red); }
.slot.sel { background: var(--red); color: #fff; border-color: var(--red); }
.slot[disabled] { opacity: .35; cursor: not-allowed; }
.booking-ok { background: var(--red-tint); border: 1px solid rgba(193,39,45,.25); border-radius: var(--r); padding: 1.6rem; }
.booking-ok h3 { color: var(--red); }
.gcal-link { margin-top: 1rem; }

/* Panel admin */
.admin-shell { min-height: 100vh; background: var(--cream); }
.admin-top { background: var(--ink-band); color: #fff; padding: .9rem 0; position: sticky; top: 0; z-index: 60; }
/* ===== Command Center (dashboard glassmorphism) ===== */
.omni {
  --omni-soft: 0 8px 32px rgba(0,0,0,.07);
  --omni-hover: 0 12px 44px rgba(0,0,0,.12);
  background-image:
    radial-gradient(at 0% 0%, hsla(353,60%,45%,.07) 0, transparent 50%),
    radial-gradient(at 90% 5%, hsla(225,39%,40%,.06) 0, transparent 50%),
    radial-gradient(at 50% 100%, hsla(339,49%,45%,.05) 0, transparent 55%);
  margin: -1rem; padding: 1.4rem; border-radius: 24px;
}
.omni-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.omni-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-2); font-weight: 700; }
.omni-title { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; letter-spacing: -.5px; margin-top: .2rem; }
.omni-card {
  background: rgba(255,255,255,.66); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.55); border-radius: 20px; box-shadow: var(--omni-soft);
  padding: 1.4rem 1.5rem; transition: transform .25s, box-shadow .25s;
}
:root[data-theme="dark"] .omni-card { background: rgba(40,38,40,.6); border-color: rgba(255,255,255,.08); }
/* Cuatro columnas fijas recibían CINCO tarjetas en dos pantallas —Sistema maestro y el
 * Consolidado— y la quinta se quedaba sola en un segundo renglón con tres huecos al lado.
 *
 * `auto-fit` en vez de un número fijo: se acomodan las que haya. Con cinco da dos
 * renglones parejos en vez de 4+1. `minmax` con `1fr` mantiene el mínimo sin desbordar
 * cuando son muchas. */
.omni-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.omni-kpis .omni-card:hover { transform: translateY(-3px); box-shadow: var(--omni-hover); }
.omni-lbl { font-size: 12px; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.omni-val { font-size: 2rem; font-weight: 700; margin: .5rem 0 .5rem; letter-spacing: -1px; }
.omni-pill { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(0,0,0,.04); color: var(--ink-2); }
.omni-alert { border: 1px solid rgba(193,39,45,.3); }
.omni-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.omni-chart { display: flex; flex-direction: column; min-height: 320px; }
.omni-section { font-size: .93rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.omni-legend { display: flex; gap: 1.2rem; font-size: 12px; color: var(--ink-2); margin-top: .6rem; }
.omni-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.omni-dot { width: 9px; height: 9px; background: var(--red); border-radius: 50%; display: inline-block; }
.omni-feed-list { display: flex; flex-direction: column; gap: 1rem; max-height: 300px; overflow-y: auto; }
.omni-feed-item { display: flex; gap: .8rem; align-items: flex-start; }
.omni-feed-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--tarjeta); box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: .82rem; }
.omni-feed-item h4 { font-size: .84rem; font-weight: 700; margin-bottom: 2px; }
.omni-feed-item p { font-size: .78rem; color: var(--ink-2); }
.omni-feed-item .t { font-size: 11px; color: var(--ink-2); margin-top: 3px; font-weight: 600; }
@media (max-width: 900px) { .omni-kpis { grid-template-columns: repeat(2,1fr); } .omni-grid2 { grid-template-columns: 1fr; } }

/* Lanzador de aplicaciones (estilo Odoo) */
#appLauncher { position: fixed; inset: 0; z-index: 40; background: var(--cream, #f6f4f2); overflow-y: auto; }
.launcher-inner { max-width: 1000px; margin: 0 auto; padding: 6rem 1.4rem 3rem; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.4rem; }
.app-card { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 18px; padding: 1.7rem 1rem; text-align: center; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.app-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.09); border-color: var(--red); }
.app-ico { width: 54px; height: 54px; border-radius: 15px; margin: 0 auto .8rem; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.app-card b { font-size: .95rem; font-weight: 600; }
/* Constructor de páginas por bloques */
.pg-block { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: .9rem; background: var(--surface); }
.pg-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.pg-drag { cursor: grab; color: var(--ink-2); font-size: 18px; line-height: 1; user-select: none; padding: 0 .2rem; }
.pg-drag:active { cursor: grabbing; }
.pg-block.pg-dragging { opacity: .5; }
.pg-block.drop-before { box-shadow: 0 -3px 0 0 var(--red); }
.pg-block.drop-after { box-shadow: 0 3px 0 0 var(--red); }
.pg-mini { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--tarjeta); border-radius: 8px; cursor: pointer; font-size: .88rem; }
.pg-mini:hover { border-color: var(--red); color: var(--red); }
.pg-img { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pg-img-prev { width: 110px; height: 66px; border-radius: 10px; border: 1px dashed var(--line); background: var(--tarjeta) center/cover no-repeat; flex: 0 0 auto; }

/* Cargadores de imagen del diseñador de sitio */
.imgup { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.imgup-prev { width: 92px; height: 62px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface) center/cover no-repeat; flex: 0 0 auto; }
.imgup-btn { cursor: pointer; }
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .7rem; }
.galeria-item { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-item button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .88rem; line-height: 1; }

.social-fields { display: grid; gap: .6rem; }
.social-row { display: flex; align-items: center; gap: .7rem; }
.social-row input { flex: 1; }
.social-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.social-ico svg { width: 19px; height: 19px; }
.admin-top .container { display: flex; align-items: center; justify-content: space-between; }
.admin-top .brand__pi { font-size: 1.5rem; }
.admin-top b { font-family: var(--font-sans); font-weight: 600; }
.admin-login { max-width: 380px; margin: 8vh auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 2rem; box-shadow: var(--shadow); }
.admin-tabs { display: flex; gap: .5rem; margin: 1.6rem 0; }
.admin-tab { padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.admin-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.admin-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px){ .admin-grid { grid-template-columns: 1fr; } }
/* Lista tipo tabla: un solo panel con filas divididas */
/* La tarjeta la da el CONTENEDOR (.admin-list), no la fila. Pero JS mete filas en varios
   contenedores que son <div> pelones, y ahí las mismas listas salían desnudas sobre el
   fondo, sin borde ni tarjeta, con el separador flotando en el aire. El :has() acierta con
   los que de verdad acaban teniendo filas —sea cual sea— en vez de con la lista que yo
   pueda adivinar leyendo el JS. */
.admin-list, div:has(> .admin-row) { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.admin-list > .form__note, div:has(> .admin-row) > .form__note { padding: 1.1rem 1.2rem; margin: 0; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: .8rem 1.15rem; transition: background .12s; }
.admin-row:last-child { border-bottom: none; }
.admin-row:hover { background: var(--realce); }
.admin-row b { font-weight: 600; font-size: .93rem; }
.admin-row span { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.admin-del { background: none; border: none; color: var(--red); font-size: .84rem; font-weight: 600; cursor: pointer; padding: .2rem .4rem; border-radius: 6px; }
.admin-del:hover { background: rgba(193,39,45,.08); }
.badge-soft { display: inline-block; background: var(--cream-2); border-radius: 999px; padding: .1rem .55rem; font-size: .74rem; color: var(--muted); }

/* =========================================================================
   Tabla estilo Odoo — vista de datos con columnas (firma Pi Management)
   ========================================================================= */
/* ---------- Una sola forma de empezar una pantalla ----------
 *
 * Había cuatro: .tbl-toolbar con un <h3> (la mayoría), <h2 class="panel-title"> (19),
 * .omni-head (el tablero) y una sección que arrancaba directamente en un .panel. Y el
 * mismo título en tres tamaños, porque el h3 del toolbar era fluido —clamp(1.2rem,
 * 2.2vw, 1.5rem)— mientras panel-title y omni-title eran fijos en 1.5rem: coincidían en
 * escritorio y se separaban al estrechar, que es justo donde peor se nota.
 *
 * No se tocan las 94 secciones a mano. Se hace que las cuatro variantes rindan igual. */
.tbl-toolbar h3, .panel-title, .omni-title { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 620px){ .tbl-toolbar h3, .panel-title, .omni-title { font-size: 1.25rem; } }

.tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
/* Sin flex-wrap, tres botones de acción empujaban el título fuera de la pantalla. Las
   variantes escritas en línea sí lo llevaban; la clase, que es la que se usa en 20 de los
   toolbars, no. */
.tbl-toolbar__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tbl-count { color: var(--muted); font-size: .82rem; margin-left: .6rem; }

/* La rejilla de aplicaciones del panel de Módulos. Es la misma que ve el cliente al crear
   su empresa, a propósito: administrar lo que contrataste y contratarlo no deberían
   parecer dos sistemas distintos. */
/* El cajón de ayuda lleva display:flex en su atributo style, y eso le gana al atributo
   hidden: se quedaba abierto y vacío al cargar el panel. Con !important porque lo que
   hay que vencer es un estilo en línea. */
#ayudaCajon[hidden] { display: none !important; }

/* La marca de «hecho» de los primeros pasos. Vacía cuando falta: un círculo abierto se
   lee como una casilla por marcar sin tener que decirlo. */
.arr-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2);
            display: grid; place-items: center; font-size: .7rem; font-weight: 700; margin-top: .15rem; }
.arr-mark--ok { background: var(--ok-tinta); border-color: var(--ok-tinta); color: #fff; }

/* La ayuda dibujada: qué pulsar, en qué orden y dónde está. El botón se pinta con su
   texto exacto, así que quien lee compara con lo que tiene delante en vez de traducir. */
.ay-pasos { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.2rem; }
.ay-paso { display: grid; grid-template-columns: 1.5rem 1fr; gap: .65rem; align-items: start;
           padding: .5rem 0; position: relative; }
/* El hilo que une un paso con el siguiente: es una secuencia, no una lista suelta. */
.ay-paso:not(:last-child)::after { content: ''; position: absolute; left: .72rem; top: 1.9rem;
                                   bottom: -.1rem; width: 1px; background: var(--line); }
.ay-n { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--realce);
        color: var(--ink-2); display: grid; place-items: center; font-size: .72rem;
        font-weight: 700; flex: none; position: relative; z-index: 1;
        font-size: .95rem; line-height: 1; }
.ay-boton { display: inline-block; border: 1px solid var(--line-2); border-radius: 999px;
            padding: .18rem .6rem; font-size: .82rem; font-weight: 600; background: var(--tarjeta); }
.ay-boton--pri { background: var(--red); color: #fff; border-color: var(--red); }
.ay-paso small { display: block; color: var(--muted); font-size: .78rem; margin-top: .25rem; line-height: 1.4; }

.ay-campos { margin-bottom: 1.2rem; }
.ay-campos b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
               color: var(--muted); margin-bottom: .4rem; }
.ay-campos > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.ay-campo { border: 1px dashed var(--line-2); border-radius: 6px; padding: .12rem .45rem; font-size: .78rem; color: var(--ink-2); }

.ay-ojo { border-left: 3px solid var(--aviso-tinta); background: var(--aviso-fondo);
          border-radius: 0 8px 8px 0; padding: .7rem .9rem; }
.ay-ojo b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
            color: var(--aviso-tinta); margin-bottom: .25rem; }
.ay-ojo p { font-size: .86rem; line-height: 1.5; }

.mod-apps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%), 1fr)); }
.mod-fam h5 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
              padding-bottom: .35rem; margin-bottom: .5rem; border-bottom: 2px solid currentColor; }
.mod-app { padding: .3rem 0; }
.mod-app label { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.mod-app input { margin-top: .3rem; flex: none; }
.mod-app b { font-weight: 600; font-size: .88rem; }
.mod-app small { display: block; color: var(--ink-2); font-size: .78rem; line-height: 1.35; }
.mod-app em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
/* Lo que no existe todavía y lo que existe pero no cabe en el plan se ven distinto: uno
   no se puede comprar de ninguna manera, el otro se compra subiendo de paquete. */
.mod-app--pronto { opacity: .45; }
.mod-app--pronto label { cursor: default; }
.mod-app--fuera { opacity: .8; }
.mod-app--fuera label { cursor: default; }
.mod-app--fuera em { color: var(--red); }

/* La descripción de la pantalla llevaba 29 ritmos verticales distintos, todos escritos en
   el atributo style. Lleva !important porque eso es lo único que le gana a una declaración
   en línea, y el alcance es estrecho a propósito: sólo la nota que cuelga directamente de
   la sección o de su vista, es decir la que describe la pantalla. Las notas de dentro de
   un formulario o un panel se quedan como están. */
section[data-panel] > .form__note,
section[data-panel] > [data-vista] > .form__note { margin: -.4rem 0 1.2rem !important; }
.tbl-search { border: 1px solid var(--line); border-radius: 999px; padding: .5rem .95rem; font-size: .86rem; min-width: 220px; background: var(--tarjeta); color: var(--ink); }
.tbl-search:focus { outline: none; border-color: var(--red); }
.btn--sm { padding: .4rem .85rem; font-size: .82rem; }

.tabla-wrap { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.tabla-scroll { overflow-x: auto; }
/* El ancho minimo va SOLO en las tablas que tienen quien las desplace.
 *
 * Sin el, en un telefono la tabla se encoge hasta que las columnas se aplastan y el
 * texto se parte letra por letra: se ve todo y no se lee nada. Con el, la tabla
 * conserva su ancho y el contenedor la desplaza de lado.
 *
 * Va acotado a `.tabla-scroll >` a proposito. Si se lo pusiera a toda `.tabla-odoo`,
 * las tablas que no van dentro de un contenedor -las anidadas en el detalle de una
 * fila- desbordarian la pagina entera de lado, que es justo el defecto que esto
 * viene a arreglar. */
.tabla-scroll > .tabla-odoo { min-width: 44rem; }
.tabla-odoo { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-odoo thead th { text-align: left; font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--realce); padding: .7rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: default; }
.tabla-odoo thead th.sortable { cursor: pointer; }
.tabla-odoo thead th.sortable:hover { color: var(--ink); }
.tabla-odoo thead th.r, .tabla-odoo td.r { text-align: right; }
.tabla-odoo th.col-check, .tabla-odoo td.col-check { width: 38px; padding-right: 0; text-align: center; }
.tabla-odoo tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.tabla-odoo tbody tr:last-child td { border-bottom: none; }
.tabla-odoo tbody tr { transition: background .12s; }
.tabla-odoo tbody tr:hover { background: var(--realce); }
.tabla-odoo tbody tr.sel { background: rgba(193,39,45,.05); }
.tb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 600; font-size: .8rem; flex: none; }
.tb-cell-avatar { display: flex; align-items: center; gap: .65rem; }
.tb-cell-avatar b { font-weight: 600; }
.tb-sub { color: var(--muted); font-size: .8rem; }
.tb-pill { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .74rem; font-weight: 600; border: 1px solid transparent; }
.tb-pill--borrador { background: var(--neutro-fondo); color: var(--neutro-tinta); }
.tb-pill--enviada, .tb-pill--pendiente { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.tb-pill--aceptada, .tb-pill--pagada, .tb-pill--activa { background: var(--ok-fondo); color: var(--ok-tinta); }
.tb-pill--rechazada, .tb-pill--cancelada, .tb-pill--vencida { background: var(--mal-fondo); color: var(--mal-tinta); }
.tb-pill--propio { background: var(--ok-fondo); color: var(--ok-tinta); }
.tb-pill--personalizado { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.tb-actions { display: flex; gap: .5rem; justify-content: flex-end; white-space: nowrap; }
.tb-link { background: none; border: none; color: var(--ink-2); font-size: .82rem; font-weight: 600; cursor: pointer; padding: .2rem .35rem; border-radius: 6px; text-decoration: none; }
.tb-link:hover { background: var(--realce); color: var(--ink); }
.tb-link--danger { color: var(--red); }
.tb-link--danger:hover { background: rgba(193,39,45,.08); }
.tb-empty { padding: 2.5rem 1.2rem; text-align: center; color: var(--muted); font-size: .88rem; }
/* Buscador de opciones (Ctrl+K) */
.cmdk-ov { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9998; display: none; }
.cmdk-ov.on { display: block; }
.cmdk { position: fixed; z-index: 9999; top: 12vh; left: 50%; transform: translateX(-50%); width: min(620px, 94vw); background: var(--tarjeta); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); display: none; overflow: hidden; }
.cmdk.on { display: block; }
.cmdk-in { width: 100%; border: none; border-bottom: 1px solid var(--line); padding: 1.05rem 1.2rem; font-size: 1rem; background: transparent; color: var(--ink); outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: .4rem; }
.cmdk-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 10px; cursor: pointer; font-size: .92rem; color: var(--ink); }
.cmdk-item .g { margin-left: auto; font-size: .76rem; color: var(--muted); }
.cmdk-item.sel, .cmdk-item:hover { background: var(--realce); }
.cmdk-item .ic { width: 22px; text-align: center; }
.cmdk-empty { padding: 1.6rem; text-align: center; color: var(--muted); font-size: .9rem; }
.cmdk-foot { border-top: 1px solid var(--line); padding: .5rem .9rem; font-size: .76rem; color: var(--muted); display: flex; gap: 1rem; }
kbd { background: var(--realce); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; font-size: .74rem; font-family: inherit; }

.pi-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1f9d61; color: #fff; padding: .7rem 1.2rem; border-radius: 999px; font-size: .88rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; }
.pi-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Toggle de vistas (lista / kanban / mapa) */
/* .toggle-group/.toggle se usan en doce pantallas (10 grupos, 20 botones) y no tenían
   NINGUNA regla: se pintaban como botones crudos del navegador, gris y biselados, en medio
   de pantallas por lo demás terminadas. Se enganchan a .vista-toggle en vez de copiarle las
   reglas, para que sigan siendo un solo control y no dos que se van separando. */
/* `flex-wrap` y `white-space` no son cosmética aquí.
 *
 * Sin ellos el grupo no se parte NUNCA y el navegador, para que quepa, parte
 * las palabras: «Equipos de ventas» acababa en tres renglones de una palabra
 * cada uno dentro de una casilla de sesenta píxeles. Ahora se parte entre
 * botones, que es por donde tiene sentido partir. Con dos o tres opciones no
 * cambia nada, que es el caso de nueve de las diez pantallas que lo usan. */
.vista-toggle, .toggle-group { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--tarjeta); }
.vista-toggle button, .toggle-group button, .toggle-group .toggle { border: none; background: none; padding: .45rem .7rem; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: .35rem; white-space: nowrap; border-right: 1px solid var(--line); }
.vista-toggle button:last-child, .toggle-group button:last-child, .toggle-group .toggle:last-child { border-right: none; }
.vista-toggle button.on, .toggle-group button.on, .toggle-group .toggle.on { background: var(--red); color: #fff; }

/* Muchas opciones: deja de ser un interruptor y pasa a ser una fila de pestañas.
 *
 * Un control segmentado dice «elige una de estas pocas», y con catorce casillas
 * encajonadas deja de decir eso: parece una rejilla de botones y hay que leerla
 * entera para encontrar la que se busca. Con el mismo aspecto que la segunda
 * fila del menú, el ojo ya sabe qué son sin pensarlo, y la que está puesta se
 * distingue por color en vez de por un bloque rojo que pesa más que el título. */
.toggle-group--tabs { border: none; border-radius: 0; background: none; gap: .2rem; }
.toggle-group--tabs button, .toggle-group--tabs .toggle { border-right: none; border-radius: 7px; padding: .34rem .62rem; font-size: .855rem; font-weight: 500; color: var(--ink-2); }
.toggle-group--tabs button:hover, .toggle-group--tabs .toggle:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.toggle-group--tabs button.on, .toggle-group--tabs .toggle.on { background: var(--red-tint); color: var(--red); font-weight: 600; }
.toggle-group--tabs .n { background: var(--line-2); color: var(--ink); border-radius: 99px; padding: 0 .42rem; font-size: .7rem; font-weight: 600; }
.vista-toggle button:not(.on):hover, .toggle-group button:not(.on):hover, .toggle-group .toggle:not(.on):hover { background: var(--realce); color: var(--ink); }

/* Kanban */
.kb-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .6rem; align-items: flex-start; }
.kb-col { flex: 0 0 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: 72vh; }
.kb-col.kb-over { border-color: var(--red); box-shadow: 0 0 0 2px rgba(193,39,45,.15); }
.kb-col-h { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.kb-n { background: var(--cream-2); color: var(--muted); border-radius: 999px; padding: .05rem .5rem; font-size: .74rem; }
.kb-col-body { padding: .7rem; display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; min-height: 60px; }
.kb-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .12s, transform .05s; }
:root[data-theme="dark"] .kb-card { background: var(--cream); }
.kb-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.kb-card:active { cursor: grabbing; }
.kb-card.kb-drag { opacity: .5; }
.kb-card b { font-size: .9rem; display: block; }
.kb-card .kb-sub { color: var(--muted); font-size: .8rem; margin-top: .2rem; display: block; }
.kb-card .kb-total { font-weight: 700; color: var(--ink); margin-top: .35rem; display: block; }
.kb-empty { color: var(--muted); font-size: .8rem; text-align: center; padding: 1rem 0; }

/* Mapa */
.mapa-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 780px){ .mapa-wrap { grid-template-columns: 1fr; } }
.mapa-lista { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 14px; max-height: 70vh; overflow-y: auto; }
.mapa-item { padding: .7rem .9rem; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .86rem; }
.mapa-item:hover, .mapa-item.on { background: var(--realce); }
.mapa-item b { display: block; }
.mapa-item .m-dir { color: var(--muted); font-size: .8rem; }
.mapa-item .m-sin { color: var(--red); font-size: .76rem; }
#mapaLienzo, .mapa-canvas { height: 70vh; min-height: 420px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; z-index: 0; }

/* Punto de Venta */
.pos-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.2rem; align-items: start; }
@media (max-width: 900px){ .pos-layout { grid-template-columns: 1fr; } }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; }
.pos-prod { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .7rem; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; transition: box-shadow .12s, transform .04s; min-height: 84px; }
.pos-prod:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.pos-prod:active { transform: scale(.98); }
.pos-prod .pn { font-weight: 600; font-size: .86rem; color: var(--ink); line-height: 1.2; }
.pos-prod .pp { font-weight: 800; color: var(--red); }
.pos-prod .ps { font-size: .72rem; color: var(--muted); }
.pos-prod.agotado { opacity: .5; }
.pos-ticket { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 16px; position: sticky; top: 58px; display: flex; flex-direction: column; max-height: calc(100vh - 74px); }
.pos-ticket-h { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.pos-lineas { flex: 1; overflow-y: auto; padding: .3rem 1.1rem; min-height: 80px; }
.pos-linea { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.pos-linea .l-n { flex: 1; font-size: .86rem; color: var(--ink); }
.pos-linea .l-n small { display: block; color: var(--muted); }
.pos-linea .l-imp { font-weight: 700; min-width: 62px; text-align: right; }
.pos-qty { display: flex; align-items: center; gap: .35rem; }
.pos-qty button { width: 24px; height: 24px; border: 1px solid var(--line); background: var(--realce); border-radius: 6px; cursor: pointer; font-weight: 700; color: var(--ink); }
.pos-foot { padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.pos-iva { display: flex; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: .6rem; }
.pos-tot { display: flex; justify-content: space-between; font-size: .9rem; margin: .2rem 0; color: var(--ink-2); }
.pos-grand { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin: .4rem 0 .7rem; }
.pos-metodos { display: flex; gap: .5rem; margin-bottom: .6rem; }
.pos-metodo { flex: 1; padding: .55rem; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
:root[data-theme="dark"] .pos-metodo { background: var(--cream); }
.pos-metodo.on { background: var(--red); color: #fff; border-color: var(--red); }

/* =========================================================================
   v7 — FAQ + testimonios + valores
   ========================================================================= */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: .8rem; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.3rem 1.2rem; color: var(--ink-2); }

.testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.testi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.7rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.testi__stars { color: var(--red); letter-spacing: 2px; margin-bottom: .7rem; }
.testi p { font-style: italic; color: var(--ink-2); flex: 1; }
.testi .who { margin-top: 1.1rem; font-weight: 700; font-size: .92rem; color: var(--ink); }
.testi .who span { display: block; color: var(--muted); font-weight: 500; font-size: .82rem; }
@media (max-width: 820px){ .testis { grid-template-columns: 1fr; } }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.5rem; }
.value { padding: 1.6rem; border-radius: var(--r); background: var(--cream); border: 1px solid var(--line); }
.value .card__icon { margin-bottom: .9rem; }
.value h3 { font-size: 1.12rem; }
.value p { margin-top: .4rem; color: var(--muted); font-size: .95rem; }
@media (max-width: 760px){ .values { grid-template-columns: 1fr; } }

/* Página de error / gracias */
.state-hero { text-align: center; max-width: 620px; margin-inline: auto; }
.state-hero .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 14vw, 8rem); color: var(--red); line-height: 1; }

/* =========================================================================
   v8 — Accesibilidad + botones flotantes + cookies + sectores
   ========================================================================= */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--red); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid rgba(193,39,45,.55); outline-offset: 2px; border-radius: 5px; }

/* Botones flotantes (WhatsApp + subir) */
.fabs { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column-reverse; gap: .6rem; }
body.cookie-open .fabs { display: none; }
.fab-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow); border: none; cursor: pointer; transition: transform .18s ease; }
.fab-btn:hover { transform: translateY(-3px); }
.fab-wa { background: #25D366; color: #fff; }
.fab-wa svg { width: 28px; height: 28px; }
.fab-top { background: var(--surface); color: var(--ink); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(10px); }
.fab-top.show { opacity: 1; visibility: visible; transform: none; }
.fab-top:hover { background: var(--ink); color: #fff; }

/* Banner de cookies */
.cookie { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 85; width: min(560px, calc(100vw - 36px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 1.1rem 1.3rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cookie[hidden] { display: none; }
.cookie p { font-size: .86rem; color: var(--ink-2); flex: 1 1 220px; margin: 0; }
.cookie a { color: var(--red); text-decoration: underline; }
.cookie__btns { display: flex; gap: .5rem; }
.cookie .btn { padding: .55rem 1rem; font-size: .86rem; box-shadow: none; }

/* Sectores que atendemos */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.sector { display: flex; gap: .9rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem; transition: border-color .2s, transform .2s; }
.sector:hover { border-color: var(--line-2); transform: translateY(-3px); }
.sector .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--red-tint); color: var(--red); display: grid; place-items: center; flex: none; }
.sector .ic svg { width: 24px; height: 24px; }
.sector b { font-weight: 600; font-size: 1rem; }
.sector span { display: block; color: var(--muted); font-size: .85rem; margin-top: 1px; }
@media (max-width: 760px){ .sectors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .sectors { grid-template-columns: 1fr; } }

/* Interruptor de tema */
.theme-toggle { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: color .18s, border-color .18s; flex: none; }
.theme-toggle:hover { color: var(--red); border-color: var(--line-2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* =========================================================================
   v9 — Newsletter + filtro de blog + mapa
   ========================================================================= */
.newsletter { background: var(--ink-band); color: #F3ECE3; }
.newsletter .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: clamp(2rem, 4vw, 2.8rem); }
.newsletter h3 { color: #fff; font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
.newsletter p { color: #C9BEB2; margin-top: .3rem; font-size: .95rem; }
.newsletter form { display: flex; gap: .6rem; flex: 1 1 340px; max-width: 470px; }
.newsletter input { flex: 1; padding: .8rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; }
.newsletter input::placeholder { color: #B6ABA0; }
.newsletter input:focus { outline: none; border-color: #E8A0A3; }
.newsletter .btn { white-space: nowrap; }
.newsletter__ok { color: #7bdcab; font-weight: 600; font-size: .92rem; }
@media (max-width: 560px){ .newsletter form { flex-direction: column; } }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.filter-chip { padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: .9rem; color: var(--ink-2); cursor: pointer; transition: .15s; }
.filter-chip:hover { border-color: var(--red); color: var(--red); }
.filter-chip.on { background: var(--red); color: #fff; border-color: var(--red); }
.post-card.hide { display: none; }

.map-embed { display: block; width: 100%; height: 300px; border: 1px solid var(--line); border-radius: var(--r); margin-top: 1.2rem; filter: saturate(.9); }
:root[data-theme="dark"] .map-embed { filter: invert(.92) hue-rotate(180deg) saturate(.8); }

/* =========================================================================
   v10 — ERP: Cotizaciones (editor en panel + documento del cliente)
   ========================================================================= */
/* Editor de conceptos en /admin */
.qitems { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.qitems th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .35rem; }
.qitems th.num, .qitems td.num { text-align: right; }
.qitems td { padding: .2rem .25rem; vertical-align: middle; }
.qitems input { width: 100%; padding: .5rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; }
.qitems input.num { text-align: right; }
.qitems .imp { font-weight: 600; white-space: nowrap; padding: .5rem .35rem; text-align: right; }
.qitems .rm { background: none; border: none; color: var(--red); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.qtotals { margin: 1rem 0 0 auto; max-width: 260px; }
.qtotals div { display: flex; justify-content: space-between; padding: .25rem 0; color: var(--ink-2); }
.qtotals .grand { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .5rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.copy-link { display: flex; gap: .5rem; margin-top: .8rem; }
.copy-link input { flex: 1; padding: .5rem .7rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--cream); color: var(--ink-2); font-size: .82rem; }

/* Documento de cotización (vista del cliente) */
.quote-doc { max-width: 820px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.quote-doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem,4vw,2.2rem); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.quote-doc__brand { display: flex; align-items: center; gap: .6rem; }
.quote-doc__brand .brand__pi { font-size: 2rem; }
.quote-doc__meta { text-align: right; }
.quote-doc__meta .folio { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--red); }
.quote-doc__meta small { color: var(--muted); font-size: .85rem; display: block; }
.quote-doc__body { padding: clamp(1.5rem,4vw,2.2rem); }
.quote-doc__to { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.quote-doc__to h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .3rem; }
.quote-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.quote-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); padding: .6rem .4rem; }
.quote-table td { padding: .7rem .4rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.quote-table .num { text-align: right; white-space: nowrap; }
.quote-doc__totals { margin-left: auto; max-width: 300px; }
.quote-doc__totals div { display: flex; justify-content: space-between; padding: .3rem 0; color: var(--ink-2); }
.quote-doc__totals .grand { border-top: 2px solid var(--line); margin-top: .4rem; padding-top: .6rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.quote-actions { display: flex; gap: .6rem; padding: 1.4rem clamp(1.5rem,4vw,2.2rem); background: var(--cream); flex-wrap: wrap; align-items: center; }
.status-badge { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status-borrador { background: var(--neutro-fondo); color: var(--neutro-tinta); }
.status-enviada { background: var(--info-fondo); color: var(--info-tinta); }
.status-aceptada { background: var(--ok-fondo); color: var(--ok-tinta); }
.status-rechazada { background: var(--mal-fondo); color: var(--mal-tinta); }
.status-nuevo { background: var(--info-fondo); color: var(--info-tinta); }
.status-pagado, .status-entregado { background: var(--ok-fondo); color: var(--ok-tinta); }
.status-en_proceso { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.status-cancelado { background: var(--mal-fondo); color: var(--mal-tinta); }
.status-convertida { background: var(--neutro-fondo); color: var(--neutro-tinta); }
.status-pendiente { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.status-pagada { background: var(--ok-fondo); color: var(--ok-tinta); }
.status-cancelada { background: var(--mal-fondo); color: var(--mal-tinta); }
.pedido-estado { padding: .35rem .6rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; }

/* Portal de clientes */
.portal-login { max-width: 410px; margin: 2vh auto; }
.portal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.portal-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.portal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px){ .portal-cards { grid-template-columns: 1fr; } }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.mini-row:last-child { border-bottom: none; }
.mini-row a { color: var(--red); font-weight: 600; }

/* =========================================================================
   v12 — Panel con barra lateral (ERP interno) + dashboard
   ========================================================================= */
.topbar__portal { font-weight: 600; }

/* ===================== El menú: dos filas de pestañas =====================
 *
 * Era una barra lateral con acordeón: los trece módulos apilados, y el abierto
 * desplegando sus pantallas debajo. Funcionaba, pero para ver en qué módulo
 * estabas había que mirar cuál estaba desplegado, y para cambiar de módulo
 * había que buscarlo en una columna de trece encabezados que a media pantalla
 * ya no cabía entera.
 *
 * Ahora son dos renglones fijos arriba: MÓDULOS y, debajo, las PANTALLAS del
 * módulo en el que estás. Es la forma en que están hechos los programas con los
 * que ya trabaja quien va a usar esto, y tiene una ventaja que la columna no
 * podía dar: los trece módulos se ven de un vistazo, sin desplegar nada.
 *
 * Los dos renglones van dentro de UN contenedor fijo. Fijándolos por separado
 * habría que decirle al segundo a qué altura empieza, y ese número se rompe el
 * día que una etiqueta ocupe dos renglones o que el primero se parta en dos.
 */
.admin-body { display: block; min-height: calc(100vh - 58px); }
.admin-nav { position: sticky; top: 58px; z-index: 31; background: var(--surface); box-shadow: 0 1px 0 var(--line); }

/* Fila 1: los módulos. */
.modtabs { display: flex; gap: .1rem; align-items: stretch; padding: 0 clamp(.5rem, 2vw, 1.2rem); overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.modtabs button { display: flex; align-items: center; gap: .45rem; flex: none; border: none; background: none; font: inherit; font-size: .855rem; font-weight: 600; color: var(--muted-2); cursor: pointer; white-space: nowrap; padding: .62rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.modtabs button:hover { color: var(--ink); background: rgba(0,0,0,.028); }
.modtabs button.on { color: var(--red); border-bottom-color: var(--red); }
/* El punto de color es el mismo de la tarjeta del lanzador: quien ya asoció
 * «Ventas» con el azul lo reconoce aquí sin leer. */
.modtabs .mt-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; opacity: .85; }
.modtabs button.on .mt-dot { opacity: 1; }

/* Fila 2: las pantallas del módulo abierto.
 *
 * `display: contents` en el grupo para que sus botones sean hijos directos de
 * la fila: si el grupo siguiera siendo una caja, cada módulo sería un bloque y
 * los botones no podrían repartirse por los renglones disponibles. Los grupos
 * que no son el activo siguen escondidos por la regla del acordeón. */
.admin-side { display: flex; flex-wrap: wrap; gap: .2rem; padding: .42rem clamp(.5rem, 2vw, 1.2rem); background: var(--cream); }
.admin-side .group { display: contents; }
.admin-side .group h6 { display: none; }
.admin-side .group.collapsed .admin-nav-item { display: none; }
.admin-side .group[hidden] { display: none !important; }
/* Ajustes no pertenece a ningún módulo: se va al extremo derecho del renglón. */
.admin-side__pie { margin-left: auto; }
.admin-nav-item { display: inline-flex; align-items: center; gap: .42rem; width: auto; text-align: left; padding: .34rem .62rem; border-radius: 7px; border: none; background: none; color: var(--ink-2); font: inherit; font-size: .855rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.admin-nav-item:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.admin-nav-item.on { background: var(--red-tint); color: var(--red); font-weight: 600; }
.admin-nav-item svg { width: 15px; height: 15px; flex: none; }
.admin-nav-item .n { background: var(--line-2); color: var(--ink); border-radius: 99px; padding: 0 .42rem; font-size: .7rem; font-weight: 600; }
/* ===================== El ancho del panel =====================
 *
 * ÉSTA ES LA CAUSA DE «se ve desacomodado», y no era lo que parecía.
 *
 * `.admin-main` no tenía ancho máximo. En un monitor de 1920px la columna de contenido
 * quedaba de ~1600px, y ahí todo lo que no fuera una tabla se veía huérfano: una tarjeta
 * de 380px pegada a la izquierda con mil doscientos píxeles de vacío al lado.
 *
 * El síntoma que se reportó -la tarjeta sola de Integraciones- se culpaba al `auto-fill`
 * de su retícula. Pero `auto-fill` está puesto a propósito (ver el comentario en
 * `.integr-grid`): sirve para que una tarjeta sola conserve su ancho en vez de estirarse
 * ridículamente a todo lo largo. Cambiarlo habría cambiado un defecto por otro.
 *
 * Con un ancho máximo razonable, `auto-fill` da dos o tres columnas en vez de cinco, y
 * una tarjeta sola se ve deliberada en lugar de perdida.
 *
 * POR QUÉ 1440 Y NO LOS 1160 DEL SITIO PÚBLICO
 * El sitio público es para leer: 1160px da renglones cómodos. El panel es para trabajar,
 * y sus tablas de contabilidad tienen ocho o diez columnas. Estrangularlas a 1160 las
 * obligaría a desplazarse a lo ancho en pantallas donde había sitio de sobra.
 */
.admin-main {
  padding: clamp(1.2rem, 3vw, 2.2rem);
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
  /* `clip` y no `hidden`. Los dos recortan igual, pero `hidden` convierte al elemento en
   * contenedor de desplazamiento, y eso desactiva TODOS los `position:sticky` de dentro
   * — la paleta del constructor de páginas, el índice de Ajustes, el ticket del punto de
   * venta y la vista en vivo dejaban de seguir al desplazarse por esta línea. */
  overflow-x: clip;
}

/* El texto explicativo no puede ir a todo lo ancho.
 *
 * Hay 102 párrafos de ayuda en el panel. A 1440px son renglones de 150 caracteres, y a
 * partir de unos 75 el ojo pierde el renglón al volver a la izquierda: se relee la misma
 * línea o se salta una. Es la razón por la que los periódicos tienen columnas.
 *
 * Es un TOPE: donde el contenedor ya es angosto no hace nada. */
.admin-main > .form__note,
.admin-main > p.form__note,
section[data-panel] > .form__note,
section[data-panel] > p { max-width: 72ch; }

/* El tamaño lo pone la regla común de encabezados de pantalla (busca «Una sola forma de
   empezar una pantalla»). Aquí no se repite: estaba más abajo en el archivo y, a igual
   especificidad, ganaba la última — así que en pantalla chica este título se quedaba en
   24px mientras los del toolbar bajaban a 20. */
.panel-title { font-family: var(--font-sans); font-weight: 700; margin-bottom: 1.2rem; }

/* ===================== Gráfica del tablero =====================
 * Los colores de serie se comprobaron con el validador de paletas: en claro
 * #C1272D / #1F6FB2 y en oscuro #CE3138 / #4A8FD4 pasan las cinco comprobaciones,
 * con separación para daltonismo muy por encima del mínimo. Aun así, cada serie
 * lleva su etiqueta pegada al último punto: la identidad no depende sólo del color. */
:root { --serie-facturado: #C1272D; --serie-cobrado: #1F6FB2; }
[data-theme="dark"], .dark { --serie-facturado: #CE3138; --serie-cobrado: #4A8FD4; }

.omni-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; }
.omni-sub { color: var(--muted); font-size: .8rem; margin: .25rem 0 0; line-height: 1.4; max-width: 46ch; }

.omni-plot { position: relative; flex: 1; min-height: 220px; }
.omni-plot #omniChart { position: absolute; inset: 0; }

/* El globo de consulta: sigue al ratón sin tapar la línea que estás mirando. */
.omni-tip {
  position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .65rem; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  font-size: .8rem; display: flex; flex-direction: column; gap: .2rem; white-space: nowrap; z-index: 3;
}
.omni-tip b { color: var(--ink); }
.omni-tip span { display: flex; align-items: center; gap: .4rem; color: var(--ink-2); }
.omni-tip i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.omni-tip .omni-tip-dif { color: var(--muted); font-size: .74rem; margin-top: .15rem; }

/* La leyenda dice también QUÉ mide cada serie: «cobrado» no significa lo mismo
 * para todo el mundo, y adivinarlo es de donde salen los malentendidos. */
.omni-legend em { color: var(--muted); font-style: normal; font-size: .74rem; }
.omni-legend span { display: inline-flex; align-items: center; gap: .35rem; }

.omni-tabla { margin-top: .9rem; overflow-x: auto; }

@media (max-width: 560px) {
  .omni-cab { flex-direction: column; }
  .omni-legend em { display: none; }
}

/* ===================== Indicadores (mosaicos con tendencia) =====================
 * Un número solo no es un indicador: es un dato suelto. Cada mosaico lleva su valor,
 * cuánto cambió contra el periodo anterior y la forma de las últimas 12 semanas.
 *
 * Los colores de estado se validaron con el comprobador de paletas: en claro
 * #147D52 / #C1272D y en oscuro #147D52 / #CE3138 pasan banda de luminosidad, croma,
 * separación para daltonismo y contraste contra su superficie. El verde y el rojo
 * NUNCA van solos: siempre con su flecha ▲▼ y el texto del periodo, porque bajo
 * deuteranopía ese par queda en el límite. */
:root { --kpi-bien: #147D52; --kpi-mal: #C1272D; --kpi-linea: #B9AEA2; }
[data-theme="dark"], .dark { --kpi-bien: #147D52; --kpi-mal: #CE3138; --kpi-linea: #6E635A; }

/* grid-auto-rows: 1fr iguala TODAS las filas, no solo las tarjetas dentro de una:
 * al envolverse a un segundo renglon, una tarjeta suelta mas alta se ve como un error. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: .85rem; }
.kpi-grid--dinero { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 1.4rem; }

.kpi-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: .95rem 1rem .8rem; display: flex; flex-direction: column; gap: .35rem;
  /* La cifra y su cambio arriba; la tendencia siempre pegada abajo, aunque el texto
   * de en medio sea mas corto en unas tarjetas que en otras. */
  justify-content: flex-start;
  position: relative; text-align: left; width: 100%; font: inherit; color: inherit;
  cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kpi-card:hover { border-color: var(--muted); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.kpi-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* La etiqueta va ARRIBA: se lee primero qué es, después cuánto. */
.kpi-card .kpi-lbl { color: var(--muted); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
/* Cifras proporcionales: a este tamaño, tabular-nums deja los números sueltos. */
.kpi-card .kpi-num { font-family: var(--font-display); font-weight: 600; font-size: 1.85rem; color: var(--ink); line-height: 1.05; }
.kpi-grid--dinero .kpi-card .kpi-num { font-size: 2.1rem; }

.kpi-delta { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; }
.kpi-delta--bien { color: var(--kpi-bien); }
.kpi-delta--mal  { color: var(--kpi-mal); }
.kpi-delta--plano { color: var(--muted); font-weight: 500; }
.kpi-delta .kpi-perio { color: var(--muted); font-weight: 400; }

.kpi-nota { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.kpi-spark { display: block; width: 100%; height: 30px; margin-top: auto; padding-top: .35rem; overflow: visible; }

/* Los que están en cero se atenúan en vez de esconderse: siguen ahí para tocarlos,
 * pero dejan de competir por la atención con los que sí tienen movimiento. */
.kpi-card--vacio { opacity: .5; }
.kpi-card--vacio:hover { opacity: 1; }

.kpi-seccion { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem; }
.kpi-seccion h4 { margin: 0; font-size: .95rem; }
.kpi-seccion span { color: var(--muted); font-size: .8rem; }

@media (max-width: 560px) {
  .kpi-grid, .kpi-grid--dinero { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kpi-card .kpi-num, .kpi-grid--dinero .kpi-card .kpi-num { font-size: 1.6rem; }
}

@media (max-width: 820px){
  /* En un teléfono los trece módulos no caben en un renglón, y partirlos en
   * cuatro se come media pantalla antes de empezar a trabajar. Las dos filas se
   * deslizan a lo ancho: se pierde el vistazo completo, pero se gana el alto,
   * que es lo escaso ahí. */
  .admin-nav { top: 0; }
  .admin-side { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .admin-side__pie { margin-left: .4rem; }
  .admin-nav-item .n { display: none; }
  /* El pie deja de ser pie: en una tira horizontal no hay abajo. */
  .admin-side__pie { margin: 0; padding: 0 0 0 .3rem; border-top: none; border-left: 1px solid var(--line); }

  /* El botón de cobrar iba detrás de TODO el catálogo: en una columna el ticket caía al
   * final, y cobrar es justo lo que más se repite en el día. Va primero. */
  .pos-ticket { order: -1; position: static; max-height: none; }

  /* Safari en iPhone hace zoom solo al enfocar un campo de menos de 16px, y deja la página
   * descuadrada. De los 404 campos del panel, 334 estaban por debajo —la mayoría en .97rem,
   * a un pelo—. Lleva !important porque las media queries no suman especificidad: `input`
   * es 0-0-1 y cualquier clase de componente (.tbl-search, .field input…) le gana siempre.
   * Sólo un campo pasaba de 16px, y por .32px, así que no se encoge nada que se note. */
  /* 16px y NO 1rem, aunque hoy valgan lo mismo: el umbral de Safari son dieciséis
     píxeles de verdad. `1rem` sigue al tamaño base del navegador, y a quien lo tenga
     bajado le volvería el zoom. Aquí el valor absoluto es el punto, no un descuido.
     (Una consolidación de tamaños de letra lo cambió a 1rem y hubo que devolverlo.) */
  input, select, textarea { font-size: 16px !important; }
}

/* La barra de arriba no podía envolverse ni encogerse —flex-wrap:nowrap y flex:none en
 * casi todo— y desbordaba a lo ancho la página entera en un teléfono. Va con !important
 * porque los estilos de esos elementos están en el atributo style y le ganan a la hoja. */
@media (max-width: 620px){
  .admin-top .container { gap: .5rem !important; }
  /* El logo del cliente se comía 179 de 375 píxeles y empujaba al distintivo de cuenta
   * («MI NEGOCIO» / «OPERANDO CLIENTE») fuera de su caja, encima del botón de salir.
   * En un teléfono el logo es lo prescindible: saber en qué cuenta estás, no. */
  .admin-top #brandLink { display: none !important; }
  .admin-top #brandBiz + span { display: none; }       /* el separador, ya sin nada que separar */
  .admin-top .container > div:first-child { overflow: hidden; }   /* por si algo más crece */
  .admin-top .hide-sm { display: none !important; }    /* la regla vieja sólo valía dentro
                                                          de .topbar__left/.topbar__right,
                                                          así que aquí no aplicaba nunca */
  .admin-top #cmdkBtn kbd { display: none; }           /* no hay ⌘K en un teléfono */
  .admin-top #appActual { font-size: .82rem; min-width: 0; }
  .admin-top select { max-width: 110px !important; }
}

/* Reportes + tareas */
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.rep-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem; margin-bottom: 1.4rem; }
.rep-chart h4 { font-family: var(--font-sans); font-weight: 700; margin-bottom: 1rem; }
.rep-bar { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: .8rem; margin-bottom: .6rem; font-size: .9rem; color: var(--ink-2); }
.rep-bar .track { height: 12px; background: var(--cream-2); border-radius: 99px; overflow: hidden; }
.rep-bar .fill { height: 100%; background: linear-gradient(90deg, var(--red), #E86A63); border-radius: 99px; }
.rep-bar b { text-align: right; color: var(--ink); }
.task-item.done b { text-decoration: line-through; color: var(--muted); }

/* Visor de documento imprimible (factura, reporte, cotización) */
.doc-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); overflow-y: auto; padding: 2rem 1rem 4rem; }
.doc-overlay[hidden] { display: none; }
.doc-toolbar { max-width: 820px; margin: 0 auto .8rem; display: flex; gap: .6rem; justify-content: flex-end; }
.doc-page { max-width: 820px; margin: 0 auto; background: #fff; color: #1B1714; border-radius: 8px; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid #eee; padding-bottom: 1.2rem; margin-bottom: 1.4rem; }
.doc-head .em b { font-family: var(--font-display); font-size: 1.4rem; color: #C1272D; }
.doc-head .em span { display: block; font-size: .82rem; color: #666; }
.doc-head .meta { text-align: right; }
.doc-head .meta .folio { font-family: var(--font-display); font-size: 1.5rem; color: #C1272D; }
.doc-head .meta small { display: block; color: #666; font-size: .84rem; }
.doc-to { margin-bottom: 1.2rem; font-size: .92rem; }
.doc-to h5 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-bottom: .3rem; }
.doc-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.doc-table th { text-align: left; font-size: .74rem; text-transform: uppercase; color: #999; border-bottom: 2px solid #eee; padding: .55rem .4rem; }
.doc-table td { padding: .6rem .4rem; border-bottom: 1px solid #f0f0f0; font-size: .92rem; }
.doc-table .r { text-align: right; white-space: nowrap; }
.doc-tot { margin-left: auto; max-width: 280px; }
.doc-tot div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .92rem; }
.doc-tot .g { border-top: 2px solid #eee; margin-top: .3rem; padding-top: .5rem; font-family: var(--font-display); font-size: 1.4rem; }
.doc-note { margin-top: 1.5rem; font-size: .85rem; color: #666; }
@media print {
  body * { visibility: hidden !important; }
  .doc-overlay, .doc-overlay * { visibility: visible !important; }
  .doc-overlay { position: absolute; inset: 0; background: #fff; padding: 0; overflow: visible; }
  .doc-toolbar { display: none !important; }
  .doc-page { box-shadow: none; border-radius: 0; max-width: none; margin: 0; padding: 1rem; }
}
@media print { .header,.topbar,.footer,.newsletter,.fabs,.cookie,.quote-actions,.scroll-progress { display: none !important; } .quote-doc { box-shadow: none; border: none; } }

/* ===== Paleta del constructor de páginas: columna fija con scroll propio ===== */
/* Se queda pegada aunque arrastres por toda la página: nunca se pierde de vista. */
/* Ojo: sin esta regla, display:flex le gana a [hidden] y la paleta sigue ocupando lugar. */
.pg-paleta[hidden] { display: none; }
.pg-paleta { position: sticky; top: 80px; display: flex; flex-direction: column;
  height: calc(100vh - 104px); min-height: 420px; padding: .7rem .7rem .8rem; overflow: hidden; }
.pg-paleta__head { flex: 0 0 auto; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.pg-paleta__buscar { width: 100%; margin-top: .45rem; border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem .6rem; font-size: .8rem; background: #fff; color: var(--ink); }
.pg-paleta__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: .5rem .35rem .5rem 0; margin-right: -.35rem; }
.pg-paleta__body::-webkit-scrollbar { width: 8px; }
.pg-paleta__body::-webkit-scrollbar-thumb { background: #d8d2ca; border-radius: 8px; }
.pg-paleta__grupo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: .8rem 0 .4rem; }
.pg-paleta__grupo:first-child { margin-top: 0; }
.pg-paleta__vacio { font-size: .8rem; color: var(--muted); text-align: center; padding: 1rem .5rem; }
.pg-paleta__foot { flex: 0 0 auto; padding-top: .7rem; border-top: 1px solid var(--line); }

/* Cuadritos: caben muchos a la vista, como en un constructor profesional */
/* Se acomodan solos según lo ancha que esté la columna: 2 o 3 por renglón, nunca aplastados. */
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .4rem; }
.pg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 62px; padding: .45rem .25rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: 600 .68rem/1.15 inherit; text-align: center;
  cursor: grab; transition: border-color .12s, box-shadow .12s, transform .12s; }
.pg-tile:hover { border-color: var(--red, #C1272D); box-shadow: 0 3px 10px rgba(0,0,0,.09); transform: translateY(-1px); }
.pg-tile:active { cursor: grabbing; }
.pg-tile__ic { font-size: 1.15rem; line-height: 1; }
.pg-tile span:last-child { display: block; width: 100%; overflow-wrap: anywhere; }
/* Widgets de paga: punto dorado en la esquina */
.pg-tile--prem { position: relative; }
.pg-tile--prem::after { content: '✦'; position: absolute; top: 3px; right: 5px; font-size: .62rem; color: #C79A28; }
.pg-tile.pg-bloq { opacity: .55; cursor: not-allowed; }
/* Secciones reales del sitio: más anchas porque el nombre es largo */
#pgWidgets { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
:root[data-theme="dark"] .pg-tile, :root[data-theme="dark"] .pg-paleta__buscar { background: var(--cream-2, #241f1b); }
@media (max-width: 1100px) { .pg-paleta { position: static; height: auto; max-height: none; } .pg-paleta__body { overflow: visible; } }

/* ===== Integraciones: tarjetas parejas agrupadas por función ===== */
/* Antes usaban .admin-grid (1.6fr/1fr, pensado para contenido + barra lateral):
   quedaban de anchos distintos y con huecos. */
.integr-grupo { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 1.8rem 0 .8rem; font-size: 1rem; }
.integr-grupo:first-of-type { margin-top: .4rem; }
.integr-grupo span { font-size: .82rem; font-weight: 400; color: var(--muted); }
/* auto-fill (no auto-fit): una tarjeta sola conserva su ancho en vez de estirarse a todo lo largo. */
.integr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.2rem; align-items: stretch; }
/* stretch + flex: todas las tarjetas del renglón terminan a la misma altura
   y el botón "Probar conexión" queda abajo, alineado entre tarjetas. */
.integr-card { display: flex; flex-direction: column; }
.integr-card > div:last-child { margin-top: auto; padding-top: .6rem; }
.integr-card .field:last-of-type { margin-bottom: .4rem; }
.integr-avanzado { margin-top: .4rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.integr-avanzado > summary { cursor: pointer; font-size: .8rem; font-weight: 700;
  color: var(--ink-2); list-style: none; }
.integr-avanzado > summary::before { content: '▸ '; color: var(--muted); }
.integr-avanzado[open] > summary::before { content: '▾ '; }
.integr-avanzado > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) { .integr-grid { grid-template-columns: 1fr; } }

/* Arqueo de caja: rejilla de denominaciones */
.pcj-den { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.pcj-den__it { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; background: #fff; }
.pcj-den__it span { font-weight: 700; font-size: .82rem; color: var(--ink-2); min-width: 38px; }
.pcj-den__it input { width: 100%; border: 0; padding: .25rem; font-size: .9rem; background: transparent; color: var(--ink); }
:root[data-theme="dark"] .pcj-den__it { background: var(--cream-2, #241f1b); }

/* ===== Portal del cliente: seguimiento y facturación ===== */
.portal-aviso { border-left: 3px solid var(--red); margin-bottom: 1.4rem; }
.portal-ped { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .8rem; }
.portal-ped__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.portal-ped__acc { margin-top: .7rem; }
/* Línea de etapas: se colorean las ya cumplidas y se marca la actual. */
.portal-track { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 0; }
.portal-track__step { font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.portal-track__step.on { background: #e8f5ee; color: #1f7a4d; border-color: #bfe3d0; }
.portal-track__step.now { background: #1f9d61; color: #fff; border-color: #1f9d61; }
.portal-track--cancel { color: var(--red); font-weight: 600; font-size: .85rem; }
@media (max-width: 620px) { .portal-ped__top { flex-direction: column; gap: .2rem; } }

/* ===== Optimizador de SEO ===== */
/* Imita cómo se ve el resultado en Google, para que el usuario entienda qué está editando. */
.seo-serp { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; background: #fff; max-width: 560px; }
.seo-serp__url { font-size: .76rem; color: #4d7c37; margin-bottom: .15rem; }
.seo-serp__tit { color: #1a0dab; font-size: 1.05rem; line-height: 1.3; margin-bottom: .15rem; }
.seo-serp__desc { font-size: .84rem; color: #4d5156; line-height: 1.45; }
:root[data-theme="dark"] .seo-serp { background: var(--cream-2, #241f1b); }
:root[data-theme="dark"] .seo-serp__tit { color: #8ab4f8; }
:root[data-theme="dark"] .seo-serp__desc { color: #bdc1c6; }
.seo-tip { font-size: .82rem; line-height: 1.45; padding: .3rem .55rem; border-radius: 7px; margin-bottom: .3rem;
  background: rgba(193,39,45,.06); color: var(--ink); border-left: 3px solid var(--red); }
.seo-tip.ok { background: rgba(31,157,97,.07); border-left-color: #1f9d61; color: var(--ink-2); }

/* ===== Pantalla de Ajustes: índice por módulo ===== */
.aj-layout { display: grid; grid-template-columns: minmax(190px, 230px) 1fr; gap: 1.4rem; align-items: start; }
.aj-nav { display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 80px; }
.aj-nav__it { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; border-radius: 9px; padding: .5rem .7rem;
  font: 600 .87rem/1.2 inherit; color: var(--ink-2); cursor: pointer; }
.aj-nav__it:hover { background: var(--surface); }
.aj-nav__it.on { background: var(--surface); border-color: var(--line); color: var(--red); }
.aj-nav__it b { margin-left: auto; font-size: .72rem; opacity: .55; font-weight: 600; }
.aj-tit { margin: 0 0 .8rem; font-size: 1rem; }
.aj-tit:not(:first-child) { margin-top: 1.6rem; }
.aj-item { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: .8rem 1rem;
  margin-bottom: .55rem; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.aj-item:hover { border-color: var(--red); box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.aj-item b { font-size: .93rem; color: var(--ink); min-width: 210px; }
.aj-item span { font-size: .84rem; color: var(--muted); flex: 1; }
.aj-item i { font-style: normal; color: var(--muted); }
:root[data-theme="dark"] .aj-item { background: var(--cream-2, #241f1b); }
@media (max-width: 820px) { .aj-layout { grid-template-columns: 1fr; } .aj-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .aj-item { flex-direction: column; align-items: flex-start; gap: .2rem; } .aj-item b { min-width: 0; } }

/* ===== Redes sociales ===== */
.so-redes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.so-red { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; background: #fff; }
.so-red__ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .5rem; }
.so-red b { display: block; margin-bottom: .2rem; }
.so-red p { margin: 0 0 .6rem; font-size: .78rem; }
/* Muro: una columna por cuenta, con scroll propio como en un gestor de redes. */
.so-muro { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .6rem; }
.so-col { flex: 0 0 300px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); max-height: 70vh; overflow-y: auto; }
.so-col__head { position: sticky; top: 0; background: #fff; border-bottom: 2px solid; padding: .6rem .8rem; font-size: .88rem; }
.so-col__head span { display: block; font-size: .74rem; }
.so-post { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin: .55rem; padding: .7rem; }
.so-post img { width: 100%; border-radius: 8px; margin-bottom: .5rem; display: block; }
.so-post p { margin: 0; font-size: .84rem; line-height: 1.45; white-space: pre-wrap; }
.so-post__pie { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; font-size: .74rem; color: var(--muted); }
.so-cuentas { display: flex; flex-wrap: wrap; gap: .5rem; }
.so-chk { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; font-size: .84rem; cursor: pointer; background: #fff; }
.so-chk:has(input:checked) { border-color: var(--red); background: rgba(193,39,45,.06); }
:root[data-theme="dark"] .so-red, :root[data-theme="dark"] .so-post, :root[data-theme="dark"] .so-chk,
:root[data-theme="dark"] .so-col__head { background: var(--cream-2, #241f1b); }

/* El mapa no puede salirse de su caja.
 *
 * Leaflet pinta sus capas con z-index hasta 400 y sus controles hasta 1000. Sin esto,
 * el mapa se dibuja ENCIMA de la ventana de captura -que va en 200- y el formulario
 * queda tapado a medias: se ve el titulo y los campos desaparecen debajo del mapa.
 *
 * `isolation: isolate` convierte el contenedor en su propio contexto de apilado, asi
 * que lo de dentro se ordena entre si pero nunca por encima de lo de fuera. Es mejor
 * que bajarle el z-index a las capas una por una: eso romperia el orden interno de
 * Leaflet -los marcadores dejarian de verse sobre los mosaicos-.
 */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }

/* ===== Ventana de captura (sustituye a los prompt del navegador) ===== */
.pm-fondo { position: fixed; inset: 0; background: rgba(20,16,14,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 1200; padding: 1.2rem; animation: pmIn .14s ease; }
@keyframes pmIn { from { opacity: 0 } to { opacity: 1 } }
.pm-caja { background: #fff; border-radius: 16px; width: min(520px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; }
.pm-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.pm-head__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--surface);
  display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.pm-head b { display: block; font-size: 1rem; }
.pm-head span { display: block; font-size: .8rem; color: var(--muted); }
.pm-x { margin-left: auto; border: 0; background: none; font-size: 1.5rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 .2rem; }
.pm-x:hover { color: var(--red); }
.pm-body { padding: 1.1rem 1.2rem; overflow-y: auto; }
.pm-body .field { margin-bottom: .8rem; }
.pm-pie { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.2rem;
  border-top: 1px solid var(--line); background: var(--surface); }
/* Selector de icono */
.pm-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .35rem; margin-top: .3rem; }
.pm-ico { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: .4rem;
  font-size: 1.15rem; cursor: pointer; transition: border-color .12s, transform .12s; }
.pm-ico:hover { border-color: var(--red); transform: translateY(-1px); }
.pm-ico.on { border-color: var(--red); background: rgba(193,39,45,.08); box-shadow: inset 0 0 0 1px var(--red); }
:root[data-theme="dark"] .pm-caja, :root[data-theme="dark"] .pm-ico { background: var(--cream-2, #241f1b); }

/* ===== Bloques del constructor: legibles de un vistazo ===== */
/* El título en una sola línea: antes se partía en tres y descuadraba la tarjeta. */
.pg-block-tit { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .92rem; }
.pg-block-head > span:first-child { min-width: 0; flex: 1; }
/* Resumen del contenido, para saber qué es sin abrir el código */
.pg-resumen { font-size: .84rem; line-height: 1.5; color: var(--ink-2); background: var(--surface);
  border-radius: 8px; padding: .55rem .7rem; margin-bottom: .4rem; }
.pg-resumen i { opacity: .6; }
.pg-meta { font-size: .72rem; color: var(--muted); margin-bottom: .5rem; }
/* El código va plegado y no se abre solo */
.pg-cod > summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--ink-2);
  list-style: none; padding: .35rem 0; }
.pg-cod > summary::-webkit-details-marker { display: none; }
.pg-cod > summary::before { content: '▸ '; color: var(--muted); }
.pg-cod[open] > summary::before { content: '▾ '; }
.pg-cod textarea { width: 100%; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .74rem; line-height: 1.5; tab-size: 2; white-space: pre; overflow-wrap: normal;
  overflow-x: auto; background: #1e1b18; color: #e8e2da; border-color: #3a332c; border-radius: 8px; }
:root[data-theme="dark"] .pg-cod textarea { background: #14110f; }

/* ===== Red de distribución y demos ===== */
.al-etapas { display: flex; gap: .2rem; }
.al-etapa { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: .2rem .45rem;
  font-size: .68rem; color: var(--muted); cursor: pointer; text-transform: capitalize; }
.al-etapa.on { background: #1f9d61; color: #fff; border-color: #1f9d61; }
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.dm-card { border: 1px solid var(--line); border-radius: 14px; padding: 1rem; background: #fff; display: flex; flex-direction: column; }
.dm-card__top b { display: block; font-size: 1rem; }
.dm-card__top span { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.dm-card p { margin: .5rem 0 .7rem; flex: 1; }
.dm-datos { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.dm-datos span { font-size: .72rem; background: var(--surface); border-radius: 999px; padding: .15rem .6rem; color: var(--ink-2); }
.dm-acc { display: flex; gap: .4rem; flex-wrap: wrap; }
:root[data-theme="dark"] .dm-card, :root[data-theme="dark"] .al-etapa { background: var(--cream-2, #241f1b); }
.mod-lista { font-size: .82rem; color: var(--ink-2); margin-top: .3rem; }

/* ===== Gráficas del panel ===== */
.g-wrap { overflow-x: auto; }
.g-svg { width: 100%; height: auto; display: block; }
.g-linea { stroke: var(--line); stroke-width: 1; }
.g-val { font: 600 10px system-ui; fill: var(--ink-2); }
.g-eje { font: 500 10px system-ui; fill: var(--muted); }
.g-donut-t { font: 500 11px system-ui; fill: var(--muted); }
.g-donut-v { font: 800 15px system-ui; fill: var(--ink); }
.g-pastel { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.g-legs { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .3rem; }
.g-leg { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.g-leg span { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.g-leg b { margin-left: auto; }
.g-leg i { font-style: normal; color: var(--muted); font-size: .78rem; min-width: 34px; text-align: right; }
.g-hbars { display: flex; flex-direction: column; gap: .5rem; }
.g-hb { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; gap: .7rem; align-items: center; }
.g-hb__et { font-size: .85rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-hb__barra { background: var(--surface); border-radius: 6px; height: 20px; overflow: hidden; }
.g-hb__barra i { display: block; height: 100%; border-radius: 6px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.g-hb__val { font-size: .85rem; white-space: nowrap; }
.rv-sep { display: inline-block; width: 1px; height: 20px; background: var(--line); margin: 0 .4rem; vertical-align: middle; }
.toggle--ic { min-width: 34px; text-align: center; }
.g-barra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.g-total { margin-left: auto; font-size: 1.05rem; }

/* ===== Tabla dinámica ===== */
.piv-barra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .82rem; color: var(--muted); }
.piv-sel { border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; font-size: .84rem; background: #fff; color: var(--ink); }
.piv-barra > button { margin-left: auto; }
.piv-wrap { max-height: 62vh; overflow: auto; }
.piv thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.piv-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.piv-exp { border: 0; background: none; cursor: pointer; font-size: .95rem; color: var(--muted); padding: 0 .2rem; }
.piv-exp:hover { color: var(--red); }
.piv-n { font-size: .7rem; color: var(--muted); background: var(--surface); border-radius: 999px; padding: .05rem .4rem; }
.piv-fila > td { font-weight: 600; }
.piv-sub > td { background: rgba(0,0,0,.018); font-size: .85rem; font-weight: 400; }
.piv-ind { display: inline-block; width: 22px; }
.piv-cero { color: var(--muted); }
.piv-tot { font-weight: 800; }
.piv-total > td { border-top: 2px solid var(--line); background: var(--surface); font-weight: 700; }
:root[data-theme="dark"] .piv-sel { background: var(--cream-2, #241f1b); }
:root[data-theme="dark"] .piv-sub > td { background: rgba(255,255,255,.03); }

/* ===================================================================================
 *  El sistema Pi Management: los tres paquetes en la portada
 * ===================================================================================
 *
 * Va dentro de una banda oscura (`.section--ink`), que es la que el sitio ya usa para
 * destacar algo del resto. Los colores salen de ahí y no se inventan otros: una paleta
 * nueva sólo para esta sección la haría parecer pegada de otra página.
 */

.erp-puntos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  margin: 2.6rem 0 3.4rem;
}
.erp-punto {
  border-left: 2px solid #E8A0A3; padding-left: 1.1rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.erp-punto b { font-size: 1.05rem; color: #FFF; }
.erp-punto span { font-size: .93rem; color: #C9BEB2; line-height: 1.6; }

.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: start; }

.plan {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column; gap: .8rem;
}

/* El de en medio se levanta un poco. Es la señal de «éste» sin tener que escribirlo,
 * y va acompañada del sello: sólo con el color, quien no distingue matices no ve nada. */
.plan--destacado {
  background: rgba(255,255,255,.09);
  border-color: #E8A0A3;
  transform: translateY(-10px);
}
.plan__sello {
  position: absolute; top: -11px; left: 1.5rem;
  background: var(--red); color: #FFF;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 99px;
}

.plan__nom { font-size: 1.25rem; font-weight: 700; color: #FFF; }
.plan__precio {
  font-size: 2.4rem; font-weight: 700; color: #FFF; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__precio span { font-size: .85rem; font-weight: 500; color: #A99E92; letter-spacing: 0; }
.plan__para { font-size: .9rem; color: #C9BEB2; line-height: 1.55; margin: 0; }

.plan__lista { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.plan__lista li {
  font-size: .9rem; color: #E4DAD0; padding-left: 1.35rem; position: relative; line-height: 1.45;
}
.plan__lista li::before {
  content: '✓'; position: absolute; left: 0; color: #E8A0A3; font-weight: 700;
}

.btn--block { display: block; width: 100%; text-align: center; margin-top: auto; }
.section--ink .btn--ghost { color: #F3ECE3; border-color: rgba(255,255,255,.28); }
.section--ink .btn--ghost:hover { background: #FFF; color: var(--ink); border-color: #FFF; }

.planes__pie { margin-top: 2rem; text-align: center; font-size: .85rem; color: #A99E92; }

@media (max-width: 1200px) {
  .planes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .erp-puntos, .planes { grid-template-columns: 1fr; }
  /* En una columna, levantar el de en medio lo descoloca sin destacar nada: encima y
   * debajo hay otros, así que el sello es lo que lo distingue. */
  .plan--destacado { transform: none; }
}

/* ---- El tour: te lleva a la pantalla y te señala el botón de verdad ----
 *
 * El foco NO es un recuadro dibujado encima: es un hueco. Todo lo demás se oscurece con
 * una sombra enorme que sale de este elemento, así que lo que queda claro es exactamente
 * el botón — y sigue siendo el botón, no una copia pintada encima.
 */
.tour { position: fixed; inset: 0; z-index: 10000; pointer-events: auto; }
.tour__hueco {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 3px var(--red, #C1272D);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.tour__globo {
  position: fixed; max-width: min(340px, calc(100vw - 24px));
  background: var(--tarjeta, #fff); color: var(--ink, #1a1a1a);
  border-radius: 14px; padding: 1rem 1.1rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.tour__paso { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
              color: var(--ink-2, #6b6b6b); margin-bottom: .35rem; }
.tour__que { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.tour__sub { font-size: .88rem; color: var(--ink-2, #6b6b6b); margin-top: .35rem; line-height: 1.5; }
.tour__pies { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .tour__hueco { transition: none; }
}