:root {
  color-scheme: light;
  /* Paleta en escala de azules sobre fondo blanco */
  --b900: #223a5e;
  --b700: #355982;
  --b500: #4d79a8;
  --b400: #6e9ecc;
  --b300: #9fc0e3;
  --b200: #d0e1f2;
  --b100: #e6eff9;
  --b50: #f3f8fd;
  --white: #ffffff;
  --paper: #ffffff;
  --tint-1: var(--b50);
  --tint-2: var(--b100);
  --tint: var(--b200);
  --border: var(--b200);
  --line: var(--b200);
  --input-border: var(--b400);
  --ink: var(--b900);
  --ink-2: #456e9c;
  --accent: var(--b700);
  --navy: var(--b900);
  --cta: var(--b700);
  --cta-d: var(--b900);
  /* Estados: lo único fuera de la escala azul, porque comunican éxito, aviso y error */
  --ok-soft: #e1f4ec;
  --ok-ink: #0b6b4b;
  --warn-soft: #fdf1d3;
  --warn-ink: #7a5600;
  --err-soft: #fdecee;
  --err-ink: #a4202c;
  --radius: 12px;
  --shadow: 0 1px 0 rgba(34, 58, 94, .04), 0 14px 34px -18px rgba(34, 58, 94, .35);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0; font-variation-settings: 'SOFT' 60, 'opsz' 96; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); margin-inline: auto; }
.eyebrow { font: 600 .76rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--b300); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.45rem var(--serif); letter-spacing: -0.03em; }
.logo svg { width: 30px; height: 30px; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a:not(.btn) { text-decoration: none; padding: 10px 13px; border-radius: 999px; font-weight: 500; font-size: .94rem; color: var(--ink-2); }
.nav a:not(.btn):hover, .nav a[aria-current='page'] { color: var(--ink); background: var(--tint-2); }
.nav .btn { margin-left: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--navy); display: inline-grid; place-items: center; font: 600 .85rem var(--sans); object-fit: cover; }
.menu-btn { display: none; margin-left: auto; border: 1.5px solid var(--border); background: var(--white); border-radius: 10px; min-width: 44px; min-height: 44px; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 16px 16px; gap: 2px; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 12px; }
  .nav .btn { margin: 8px 0 0; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font: 600 .97rem var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s, border-color .15s; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--cta); border-color: var(--cta); color: #fff; }
.btn.primary:hover { background: var(--cta-d); border-color: var(--cta-d); }
.btn.sage { background: var(--b200); border-color: var(--b300); color: var(--navy); }
.btn.sage:hover { background: var(--b300); }
.btn.ghost { background: var(--white); border-color: var(--border); }
.btn.ghost:hover { background: var(--tint-2); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: .88rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-google { gap: 12px; }
.btn-google svg { width: 18px; height: 18px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 84px); background: radial-gradient(circle at 18% 18%, rgba(110, 158, 204, .22), rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 82% 30%, rgba(159, 192, 227, .30), rgba(255, 255, 255, 0) 46%), linear-gradient(#ffffff 0%, #f3f8fd 100%); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.hero .lead { font-size: 1.14rem; color: var(--ink-2); max-width: 34em; margin-top: 20px; }
.hero ul.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.hero ul.facts li { display: grid; grid-template-columns: 7.4rem 1fr; gap: 14px; padding: 14px 16px; border-radius: 14px; font-size: .94rem; }
.hero ul.facts li:nth-child(1) { background: var(--b100); }
.hero ul.facts li:nth-child(2) { background: var(--b200); }
.hero ul.facts li:nth-child(3) { background: var(--b50); box-shadow: inset 0 0 0 1px var(--b200); }
.hero ul.facts b { font: 600 1.02rem var(--serif); }
.hero .card { box-shadow: 14px 14px 0 var(--tint), var(--shadow); }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } .hero .card { box-shadow: var(--shadow); } }

/* ---------- Formularios ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow); }
.card h2, .card h3.t { font-size: 1.35rem; margin-bottom: 4px; }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.form .full { grid-column: 1 / -1; }
.field label, .field .lbl { display: block; font: 600 .82rem var(--sans); margin-bottom: 6px; color: var(--ink); }
.field .hint { font-size: .78rem; color: var(--ink-2); margin-top: 5px; }
input[type='text'], input[type='number'], input[type='month'], input[type='email'], input[type='password'], input[type='search'], input[type='date'], input[type='datetime-local'], input[type='tel'], input[type='url'], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 500 1rem var(--sans); color: var(--ink);
  background: var(--tint-1); border: 1.5px solid var(--input-border); border-radius: 10px; appearance: none; -webkit-appearance: none;
}
::placeholder { color: #6f87a6; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236e655b' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea { min-height: 96px; resize: vertical; font-size: .92rem; }
input:focus, select:focus, textarea:focus { border-color: var(--b700); background: var(--white); outline: none; box-shadow: 0 0 0 3px var(--b200); }
input[aria-invalid='true'] { border-color: var(--err-ink); }
.err { color: var(--err-ink); font-size: .85rem; margin-top: 6px; }
.err:empty { display: none; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--input-border); border-radius: 999px; font-weight: 500; font-size: .9rem; background: var(--tint-1); }
.chip input:checked + span { border-color: var(--b700); background: var(--b200); font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid var(--b300); outline-offset: 2px; }
.seg { display: inline-flex; border: 1.5px solid var(--input-border); border-radius: 10px; overflow: hidden; width: 100%; }
.seg label { flex: 1; margin: 0; position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: flex; justify-content: center; align-items: center; min-height: 44px; font-weight: 600; font-size: .9rem; cursor: pointer; background: var(--tint-1); border-right: 1px solid var(--border); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--b200); box-shadow: inset 0 0 0 1.5px var(--b700); }
.seg input:focus-visible + span { outline: 3px solid var(--b300); outline-offset: -3px; }
.sect { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 2px; }
.sect > .eyebrow { display: block; margin-bottom: 12px; }
.sect .inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
details.adv { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 12px; }
details.adv > summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--accent); min-height: 34px; display: flex; align-items: center; }
details.adv[open] > summary { margin-bottom: 12px; }
.meter { height: 8px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--b500); border-radius: 999px; transition: width .3s; }
@media (max-width: 520px) { .form, .sect .inner { grid-template-columns: 1fr; } }

/* ---------- Resultado ---------- */
.result { margin-top: 28px; }
section.result { margin-top: 0; scroll-margin-top: 76px; }
.res-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.res-head .where { font: 600 1.05rem var(--serif); }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--sans); padding: 5px 11px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); }
.badge.media { background: var(--warn-soft); color: var(--warn-ink); }
.badge.baja { background: var(--err-soft); color: var(--err-ink); }
.badge.lila { background: var(--tint); color: var(--navy); }
.badge.cielo { background: var(--b100); color: var(--navy); }
.res-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px 40px; align-items: start; margin-top: 8px; }
.res-grid .kpis { grid-template-columns: 1fr; margin-top: 14px; }
@media (max-width: 860px) { .res-grid { grid-template-columns: 1fr; } }
.big { font: 600 clamp(2.4rem, 6vw, 3.6rem)/1 var(--serif); letter-spacing: -0.03em; margin: 14px 0 2px; font-variant-numeric: lining-nums tabular-nums; }
.big small { font-size: .45em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-right: 8px; }
.alt { color: var(--ink-2); font-size: 1.02rem; }
.range { margin: 24px 0 8px; }
.range .bar { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--b300) 0%, var(--b500) 55%, var(--b900) 100%); }
.range .pin { position: absolute; top: -5px; left: 50%; width: 4px; height: 22px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); }
.range .ends { display: flex; justify-content: space-between; font-size: .86rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 22px; }
.kpi { padding: 14px 16px; border-radius: 14px; background: var(--tint-1); border: 1px solid var(--line); }
.kpi:nth-child(3n+1) { background: var(--b100); border-color: var(--b200); }
.kpi:nth-child(3n+2) { background: var(--b50); border-color: var(--b200); }
.kpi:nth-child(3n) { background: var(--b200); border-color: var(--b300); }
.kpi .k { font-size: .78rem; color: var(--ink-2); font-weight: 500; }
.kpi .v { font: 600 1.3rem var(--serif); letter-spacing: -0.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: .78rem; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 600; }
td.r, th.r { text-align: right; }
tr.grp td { background: var(--tint-1); font-weight: 600; font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.disc { font-size: .82rem; color: var(--ink-2); margin-top: 18px; border-left: 3px solid var(--border); padding-left: 12px; }
.pos { color: var(--ok-ink); } .neg { color: var(--err-ink); }

/* Informe completo */
.rep { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.rep > h3 { margin-bottom: 4px; }
.rep > .muted { margin-bottom: 14px; font-size: .92rem; }
.strat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.strat > div { border-radius: 14px; padding: 14px 16px; border: 1.5px solid transparent; }
.strat > div:nth-child(1) { background: var(--b200); }
.strat > div:nth-child(2) { background: var(--b100); }
.strat > div:nth-child(3) { background: var(--b50); border-color: var(--b200); }
.strat .on { border-color: var(--ink); }
.strat b { display: block; font: 600 1.45rem var(--serif); letter-spacing: -0.02em; margin: 4px 0 2px; }
@media (max-width: 640px) { .strat { grid-template-columns: 1fr; } }
.locked { margin-top: 26px; border-radius: 18px; padding: clamp(20px, 3vw, 30px); background: linear-gradient(135deg, var(--b50), var(--b200)); border: 1px solid var(--line); }
.locked h3 { font-size: 1.4rem; }
.locked ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; font-size: .94rem; }
.locked li { padding-left: 22px; position: relative; }
.locked li::before { content: '✓'; position: absolute; left: 0; color: var(--b700); font-weight: 700; }
@media (max-width: 600px) { .locked ul { grid-template-columns: 1fr; } }
.note { background: var(--b100); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: .88rem; margin-top: 14px; }
.note.warn { background: var(--warn-soft); color: #4a3500; }
.note.ok { background: var(--ok-soft); color: #063d2b; }
.note.bad { background: var(--err-soft); color: #5a1119; }
.empty { padding: 32px; text-align: center; color: var(--ink-2); border: 1.5px dashed var(--border); border-radius: 14px; background: var(--tint-1); }

/* ---------- Secciones ---------- */
section.s { padding: clamp(48px, 7vw, 96px) 0; scroll-margin-top: 64px; }
section.s.alt { background: var(--tint-1); border-block: 1px solid var(--line); }
section.s.tint-sage { background: var(--b50); }
section.s.tint-sky { background: var(--b50); }
.s-head { max-width: 40em; margin-bottom: 40px; }
.s-head p { margin-top: 14px; color: var(--ink-2); font-size: 1.08rem; }
.feat { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; counter-reset: f; }
.feat li { counter-increment: f; display: grid; grid-template-columns: 3rem 1fr; gap: 14px; padding: 26px 0; border-top: 1px solid var(--border); }
.feat li::before { content: counter(f, decimal-leading-zero); font: 500 1.5rem var(--serif); color: var(--accent); font-variant-numeric: lining-nums; }
.feat h3 { margin-bottom: 6px; }
.feat p { color: var(--ink-2); font-size: .98rem; }
.feat a { color: var(--accent); font-weight: 600; }
@media (max-width: 780px) { .feat { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.who div { border-radius: 16px; padding: 20px; }
.who div:nth-child(1) { background: var(--b100); }
.who div:nth-child(2) { background: var(--b200); }
.who div:nth-child(3) { background: var(--b50); box-shadow: inset 0 0 0 1px var(--b200); }
.who div:nth-child(4) { background: var(--b300); }
.who h3 { font-size: 1.1rem; margin-bottom: 6px; }
.who p { color: var(--ink-2); font-size: .94rem; }
@media (max-width: 900px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .who { grid-template-columns: 1fr; } }

/* Variables */
.vars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vars > div { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.vars h3 { font-size: 1rem; margin-bottom: 6px; }
.vars p { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 900px) { .vars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vars { grid-template-columns: 1fr; } }

/* Precios */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px 20px; display: flex; flex-direction: column; }
.plan:nth-child(1) { background: var(--b100); border-color: var(--b200); }
.plan:nth-child(2) { background: var(--b200); border-color: var(--b300); }
.plan.pop { background: var(--b50); border: 2px solid var(--b700); position: relative; }
.plan.pop::before { content: 'Para corredores'; position: absolute; top: -12px; left: 18px; background: var(--cta); color: #fff; font: 600 .72rem var(--sans); padding: 4px 11px; border-radius: 999px; }
.plan:nth-child(4) { background: var(--b100); border-color: var(--b200); }
.plan h3 { font-size: 1.2rem; }
.plan .price { font: 600 2.2rem var(--serif); letter-spacing: -0.03em; margin: 10px 0 0; font-variant-numeric: lining-nums; }
.plan .price small { font: 500 .85rem var(--sans); color: var(--ink-2); letter-spacing: 0; }
.plan .loc { font-size: .8rem; color: var(--ink-2); min-height: 1.3em; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 8px; font-size: .92rem; flex: 1; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--b700); font-weight: 700; }
@media (max-width: 1020px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* FAQ */
.faq details { border-top: 1px solid var(--border); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; font: 600 1.08rem var(--serif); min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.6rem var(--sans); color: var(--accent); }
.faq details[open] summary::after { content: '–'; }
.faq p { padding: 0 0 18px; color: var(--ink-2); max-width: 46em; }

footer { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: .9rem; color: var(--ink-2); background: var(--tint-1); }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
footer ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .8rem; max-width: 70em; }
@media (max-width: 700px) { footer .cols { grid-template-columns: 1fr; } }

/* ---------- Herramientas ---------- */
.tools-head { padding: 40px 0 8px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; border-bottom: 1px solid var(--line); scrollbar-width: none; margin-top: 24px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 1.5px solid transparent; background: none; color: var(--ink-2); font: 600 .92rem var(--sans); padding: 0 16px; min-height: 44px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected='true'] { background: var(--b200); border-color: var(--b300); color: var(--navy); }
.tabs button:hover:not([aria-selected='true']) { border-color: var(--border); color: var(--ink); }
.panel { display: none; padding: 28px 0 64px; scroll-margin-top: 64px; }
.panel.on { display: block; }
.tool-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 880px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-grid .form { grid-template-columns: 1fr; margin-top: 0; }
.tool-grid .form.two { grid-template-columns: 1fr 1fr; }
.out h3 { margin-bottom: 12px; }
.bars { display: grid; gap: 6px; margin-top: 8px; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 80px; gap: 10px; align-items: center; font-size: .9rem; }
.bar-row .track { height: 14px; background: var(--tint-2); border-radius: 6px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 6px; background: var(--b700); }
.bar-row.gba .fill { background: var(--b400); }
.bar-row.int .fill { background: var(--b300); }
.bar-row .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 520px) { .bar-row { grid-template-columns: 110px 1fr 64px; font-size: .82rem; } }
.total-row td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.cmp > div { border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; background: var(--white); }
.cmp h4 { margin: 0 0 8px; font: 600 1rem var(--serif); }
.cmp .big2 { font: 600 1.9rem var(--serif); letter-spacing: -0.02em; }
.cmp .win { border-color: var(--b700); background: var(--b50); }
@media (max-width: 560px) { .cmp { grid-template-columns: 1fr; } }
.fxgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

.skel { background: linear-gradient(90deg, var(--tint-2) 25%, var(--tint-1) 50%, var(--tint-2) 75%); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 6px; display: inline-block; min-width: 4em; min-height: 1em; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- Cuenta, login ---------- */
.auth-wrap { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 40px 16px; background: linear-gradient(160deg, var(--b100) 0%, #ffffff 50%, var(--b200) 100%); }
.auth-card { width: min(440px, 100%); }
.auth-card h1 { font-size: 1.9rem; letter-spacing: -0.02em; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .82rem; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.stack { display: grid; gap: 14px; }
.tabs-auth { display: grid; grid-template-columns: 1fr 1fr; background: var(--tint-2); border-radius: 999px; padding: 4px; margin: 18px 0; }
.tabs-auth button { border: 0; background: none; border-radius: 999px; min-height: 40px; font: 600 .92rem var(--sans); cursor: pointer; color: var(--ink-2); }
.tabs-auth button[aria-selected='true'] { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(34, 58, 94, .18); }
.dash { padding: 36px 0 72px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 24px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { border-radius: 16px; padding: 18px 20px; }
.stat:nth-child(1) { background: var(--b200); }
.stat:nth-child(2) { background: var(--b100); }
.stat:nth-child(3) { background: var(--b50); box-shadow: inset 0 0 0 1px var(--b200); }
.stat:nth-child(4) { background: var(--b300); }
.stat .k { font-size: .8rem; color: var(--ink-2); font-weight: 500; }
.stat .v { font: 600 2rem var(--serif); letter-spacing: -0.02em; margin-top: 2px; }
.stat .s { font-size: .82rem; color: var(--ink-2); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-grid .full { grid-column: 1 / -1; }
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }
.tag { display: inline-block; font: 600 .74rem var(--sans); padding: 3px 10px; border-radius: 999px; background: var(--tint-2); }
.tag.approved { background: var(--ok-soft); color: var(--ok-ink); }
.tag.pending { background: var(--warn-soft); color: var(--warn-ink); }
.tag.rejected, .tag.cancelled, .tag.refunded { background: var(--err-soft); color: var(--err-ink); }
.snippet { background: var(--b900); color: var(--b200); border-radius: 12px; padding: 14px 16px; font: 500 .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.preview-frame { width: 100%; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); height: 640px; }
input[type='color'] { width: 100%; min-height: 46px; padding: 4px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--tint-1); }
input[type='file'] { font-size: .85rem; max-width: 100%; }
.logo-prev { max-height: 56px; max-width: 200px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); padding: 4px; }

body.embed { background: transparent; }
body.embed .card { box-shadow: none; border-radius: 14px; }
body.embed .big { font-size: 2.4rem; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; font-weight: 500; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---------- Informe imprimible ---------- */
#informe { display: none; }
@media print {
  @page { margin: 15mm; }
  body { background: #fff; color: #222; font-size: 10.5pt; }
  body > *:not(#informe) { display: none !important; }
  #informe { display: block; }
  #informe * { box-shadow: none !important; }
  .inf-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--inf-color, #355982); padding-bottom: 12px; margin-bottom: 16px; }
  .inf-head img { max-height: 54px; max-width: 180px; }
  .inf-head .nm { font: 600 20pt var(--serif); }
  #informe h1 { font-size: 20pt; }
  #informe h3 { font-size: 12.5pt; margin: 16px 0 6px; }
  #informe .valor { font: 600 30pt var(--serif); color: var(--inf-color, #355982); }
  #informe .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  #informe .box { border: 1px solid #ccc; padding: 8px 12px; border-radius: 8px; }
  #informe .box b { display: block; font-size: 8.5pt; color: #666; font-weight: 500; }
  #informe .box span { font: 600 13pt var(--serif); }
  #informe .rep { border: 0; margin-top: 4px; padding-top: 0; break-inside: avoid; }
  #informe .strat { grid-template-columns: repeat(3, 1fr); }
  #informe .strat > div { border: 1px solid #ccc !important; background: #fff !important; }
  #informe table { font-size: 9pt; }
  #informe .foot { margin-top: 20px; font-size: 8pt; color: #555; border-top: 1px solid #bbb; padding-top: 8px; }
  #informe .wm { text-align: center; font-size: 8pt; color: #888; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* ---------- SEO y páginas de contenido ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.page-head { padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 4vw, 40px); }
.page-head h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); max-width: 22em; }
.page-head .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 40em; margin-top: 16px; }
.page-head .actions { margin-top: 22px; }
.crumbs { margin-bottom: 18px; font-size: .84rem; color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 8px; list-style: none; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs li + li::before { content: '›'; margin-right: 8px; color: var(--ink-2); }
.crumbs a { text-decoration: none; color: var(--accent); padding: 6px 0; display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { text-decoration: underline; }
.prose { max-width: 780px; }
.prose h2 { margin: 34px 0 12px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; color: var(--ink); }
.prose a, .page-head a:not(.btn), .s-head a { color: var(--accent); }
.bullets { padding-left: 1.2em; margin: 0 0 16px; display: grid; gap: 8px; }
.bullets li::marker { color: var(--accent); }
.srcs { padding-left: 1.2em; margin: 0; display: grid; gap: 6px; }
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.linklist li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.linklist a { color: var(--accent); text-decoration: none; font-weight: 600; }
.linklist a:hover { text-decoration: underline; }
.vcard { display: block; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: border-color .15s, transform .15s; }
.vcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.vcard h2, .vcard h3 { font-size: 1.1rem; margin-bottom: 6px; }
.vcard p { font-size: .9rem; color: var(--ink-2); }
.vcard .more { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 600; font-size: .9rem; }
a.bar-row.link { text-decoration: none; color: inherit; padding: 6px 4px; border-radius: 8px; min-height: 44px; }
a.bar-row.link:hover { background: var(--tint-2); }
a.bar-row.link:hover span:first-child { color: var(--accent); text-decoration: underline; }
.wrap > .panel.on, section.panel.on { padding-top: 8px; }


/* ---------- Móvil: toques cómodos (44 px), sin zoom de iOS y zonas seguras ---------- */
textarea { font-size: 1rem; }
.linklist li { padding: 0; }
.linklist a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
.linklist li > .muted { align-self: center; }
footer ul { gap: 0; }
footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.linklike { min-height: 44px; padding: 10px 2px; }
details.adv > summary { min-height: 44px; }
.btn.sm { min-height: 44px; }
.chip span { min-height: 44px; }
.crumbs li, .crumbs a { min-height: 44px; }
.crumbs { margin-bottom: 8px; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.top { padding-top: env(safe-area-inset-top); }
.toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (max-width: 380px) {
  .wrap, .narrow { width: calc(100% - 24px); }
  h1 { font-size: clamp(1.9rem, 9vw, 2.3rem); }
  .hero ul.facts li { grid-template-columns: 1fr; gap: 4px; }
  .card { padding: 16px; }
  .btn { padding: 0 16px; }
  .actions .btn { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .actions .btn { flex: 1 1 auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat .v { font-size: 1.5rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .top { position: static; }
  .hero, section.s { padding-block: 32px; }
}
.logo { min-height: 44px; }
.crumbs a, .nav a:not(.btn) { min-width: 44px; justify-content: center; }
footer ul a { min-width: 44px; }
.tool-grid > * { min-width: 0; }
.form > *, .field { min-width: 0; }
select, input { min-width: 0; }
@media (max-width: 440px) { .tool-grid .form.two { grid-template-columns: 1fr; } }
.dash-grid > *, .plans > *, .stats > *, .split > *, .kpis > *, .vars > *, .cmp > * { min-width: 0; }
.tag { font-size: .75rem; }
.plan h3, .plan .price { overflow-wrap: anywhere; }
/* En pantallas angostas las migas se resumen en un enlace "‹ página anterior" (el HTML y los datos estructurados quedan completos) */
@media (max-width: 600px) {
  .crumbs li:not(:nth-last-child(2)) { display: none; }
  .crumbs li:nth-last-child(2)::before { content: '‹'; margin-right: 6px; }
  .crumbs li:nth-last-child(2):first-child::before { content: none; }
}


/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; transition: border-color .15s, transform .15s; }
.post-card:hover { border-color: var(--b400); transform: translateY(-2px); }
.post-cover img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; background: var(--b100); }
.post-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-body h2 { font-size: 1.2rem; line-height: 1.2; }
.post-body h2 a { text-decoration: none; }
.post-body h2 a:hover { color: var(--accent); }
.post-body .more { margin-top: auto; color: var(--accent); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.post-body a:not(.more) { color: var(--accent); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--b300); text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--white); }
.chip-link:hover, .chip-link.on { background: var(--b200); border-color: var(--b700); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.post-hero { margin: 0 0 24px; }
.post-hero img { width: 100%; height: auto; border-radius: 16px; display: block; }
.post-content { max-width: none; }
.post-content img { max-width: 100%; height: auto; border-radius: 12px; }
.post-content blockquote { margin: 18px 0; padding: 8px 18px; border-left: 4px solid var(--b400); background: var(--b50); border-radius: 0 10px 10px 0; color: var(--ink); }
.post-content code { background: var(--b100); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.post-content pre { background: var(--b900); color: var(--b200); padding: 14px 16px; border-radius: 12px; overflow-x: auto; }
.post-content pre code { background: none; padding: 0; }
.toc { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 0 0 24px; }
.toc ol { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 2px; }
.toc li.l3 { margin-left: 14px; font-size: .92rem; }
.toc a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.toc a:hover { text-decoration: underline; }

/* ---------- Asistente flotante ---------- */
.ai-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; min-width: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--b900); color: #fff; font: 600 .95rem var(--sans); cursor: pointer; box-shadow: 0 10px 28px -8px rgba(34, 58, 94, .55); transition: transform .15s, background .15s; }
.ai-fab:hover { background: var(--b700); transform: translateY(-2px); }
.ai-fab.on { background: var(--b700); }
@media (max-width: 640px) { .ai-fab { padding: 0; justify-content: center; width: 56px; } .ai-fab span { display: none; } html.ai-open .ai-fab { display: none; } html.ai-open body { overflow: hidden; } }
.ai-panel { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px); z-index: 61; width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100dvh - 120px)); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--b200); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(34, 58, 94, .5); overflow: hidden; }
.ai-panel[hidden] { display: none; }
@media (max-width: 640px) { .ai-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } }
.ai-head { display: flex; align-items: center; gap: 4px; padding: 14px 10px 12px 18px; background: var(--b900); color: #fff; }
.ai-head > div { flex: 1; display: grid; gap: 2px; }
.ai-head b { font: 600 1.05rem var(--serif); }
.ai-head span { font-size: .76rem; color: var(--b200); }
.ai-icon { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff; font-size: 1.15rem; cursor: pointer; }
.ai-icon:hover { background: rgba(255, 255, 255, .14); }
.ai-log { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; background: var(--b50); overscroll-behavior: contain; }
.ai-msg { display: grid; gap: 6px; max-width: 88%; }
.ai-msg.user { justify-self: end; }
.ai-bub { padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.ai-msg.assistant .ai-bub { background: var(--white); border: 1px solid var(--b200); border-top-left-radius: 4px; }
.ai-msg.user .ai-bub { background: var(--b700); color: #fff; border-top-right-radius: 4px; }
.ai-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--b300); background: var(--white); font: 600 .85rem var(--sans); color: var(--b700); text-decoration: none; }
.ai-link:hover { background: var(--b200); }
.ai-tag { font-size: .72rem; color: var(--ink-2); }
.ai-sugs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: var(--b50); }
.ai-sugs:empty { display: none; }
.ai-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--b300); background: var(--white); font: 500 .88rem var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
.ai-chip:hover { background: var(--b200); }
.ai-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--b200); background: var(--white); }
.ai-form input { flex: 1; min-height: 46px; font-size: 1rem; border-radius: 999px; padding: 0 16px; }
.ai-send { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--b700); color: #fff; font-size: 1.1rem; cursor: pointer; }
.ai-send:hover { background: var(--b900); }
.ai-foot { margin: 0; padding: 0 14px 10px; font-size: .72rem; color: var(--ink-2); background: var(--white); text-align: center; }
.ai-typing { display: inline-flex; gap: 5px; padding: 14px 16px !important; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--b400); animation: aib 1s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aib { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
@media print { .ai-fab, .ai-panel { display: none !important; } }

/* ---------- Banners ---------- */
.banner-top { position: relative; z-index: 25; }
.banner { display: flex; align-items: center; gap: 14px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); font-size: .93rem; }
.banner .b-in { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; justify-content: center; text-align: center; min-width: 0; }
.banner b { font-weight: 700; }
.banner a.b-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 700; text-decoration: none; background: rgba(255, 255, 255, .95); color: var(--b900); }
.banner img { max-height: 44px; width: auto; border-radius: 8px; }
.banner .b-x { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; opacity: .85; }
.banner .b-x:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.b-azul { background: var(--b700); color: #fff; }
.b-navy { background: var(--b900); color: #fff; }
.b-claro { background: var(--b100); color: var(--b900); } .b-claro a.b-link { background: var(--b700); color: #fff; }
.b-aviso { background: var(--warn-soft); color: #4a3500; } .b-aviso a.b-link { background: #4a3500; color: #fff; }
.b-ok { background: var(--ok-soft); color: #063d2b; } .b-ok a.b-link { background: #063d2b; color: #fff; }
.banner-home { margin: 20px auto 0; border-radius: 16px; padding: 16px 18px; }
.banner-home .b-in { justify-content: flex-start; text-align: left; }
.banner-home img { max-height: 72px; }

/* ---------- Panel de administración ---------- */
.admin { padding: 28px 0 72px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-top: 6px; }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 22px; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { flex: none; min-height: 44px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 999px; background: none; font: 600 .92rem var(--sans); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.admin-tabs button:hover { border-color: var(--b200); color: var(--ink); }
.admin-tabs button[aria-selected='true'] { background: var(--b900); color: #fff; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.toolbar .field { min-width: 150px; flex: 1 1 150px; }
.toolbar .field.grow { flex: 2 1 220px; }
.toolbar .btn { flex: none; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-grid .stat { padding: 16px 18px; }
.kpi-grid .stat .v { font-size: 1.55rem; }
.kpi-grid .stat:nth-child(5n+1) { background: var(--b200); } .kpi-grid .stat:nth-child(5n+2) { background: var(--b100); }
.kpi-grid .stat:nth-child(5n+3) { background: var(--b50); box-shadow: inset 0 0 0 1px var(--b200); } .kpi-grid .stat:nth-child(5n+4) { background: var(--b300); } .kpi-grid .stat:nth-child(5n) { background: var(--b100); }
.panel-box { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 18px; min-width: 0; }
.panel-box > h2, .panel-box > h3 { font-size: 1.1rem; margin-bottom: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.tbl { width: 100%; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover { background: var(--b50); }
.tbl td, .tbl th { white-space: nowrap; }
.tbl td.wrap-cell { white-space: normal; min-width: 180px; }
.tbl .sub { display: block; font-size: .78rem; color: var(--ink-2); }
.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--b500); } .chart .bar2 { fill: var(--b300); } .chart text { font: 500 10px var(--sans); fill: var(--ink-2); }
.legend { display: flex; gap: 16px; font-size: .82rem; color: var(--ink-2); margin-top: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.modal { border: 0; padding: 0; border-radius: 20px; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 30px 80px -20px rgba(34, 58, 94, .55); }
.modal::backdrop { background: rgba(34, 58, 94, .45); }
.modal-in { padding: 20px; overflow-y: auto; max-height: calc(100dvh - 24px); }
.modal-in > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-in h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.modal-x { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--b100); cursor: pointer; font-size: 1rem; color: var(--ink); }
.modal-x:hover { background: var(--b200); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .formgrid { grid-template-columns: 1fr; } }
.btn.danger { background: var(--err-soft); border-color: #f0b8bf; color: var(--err-ink); }
.btn.danger:hover { background: #f8cfd4; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.plan-admin { display: grid; gap: 14px; }
.plan-admin .panel-box { margin: 0; }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }
.editor textarea { min-height: 420px; font: 500 .92rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.editor .preview { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--white); max-height: 560px; overflow: auto; }
.mdbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mdbar button { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1.5px solid var(--b300); border-radius: 10px; background: var(--white); font: 600 .85rem var(--sans); cursor: pointer; color: var(--ink); }
.mdbar button:hover { background: var(--b100); }
.counter { font-size: .75rem; color: var(--ink-2); text-align: right; margin-top: 3px; }
.counter.over { color: var(--err-ink); font-weight: 700; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 .74rem var(--sans); background: var(--b100); color: var(--ink); }
.pill.ok { background: var(--ok-soft); color: var(--ok-ink); } .pill.warn { background: var(--warn-soft); color: var(--warn-ink); } .pill.bad { background: var(--err-soft); color: var(--err-ink); }
.code { font: 500 .82rem ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--b50); border: 1px solid var(--b200); border-radius: 8px; padding: 8px 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; }
.switch input { width: 22px; height: 22px; accent-color: var(--b700); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .92rem; }
.dl dt { color: var(--ink-2); } .dl dd { margin: 0; overflow-wrap: anywhere; }
.chatlog { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.chatlog div { padding: 8px 12px; border-radius: 12px; font-size: .92rem; background: var(--b50); }
.chatlog .u { background: var(--b200); justify-self: end; max-width: 90%; }

/* ---------- Ojo para ver la contraseña ---------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-eye { position: absolute; right: 2px; top: 1px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--b700); border-radius: 10px; cursor: pointer; }
.pw-eye:hover { background: var(--b100); }


/* ---------- Mapas de calor y tiempo real ---------- */
.sec-title { font-size: 1.35rem; margin: 26px 0 12px; }
.heat { padding: 16px 16px 14px; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.hm-head h3 { margin: 0; font-size: 1.05rem; }
.hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.hmsvg { width: 100%; height: auto; display: block; }
.hmsvg text { font: 500 9px var(--sans); fill: var(--ink-2); }
.hmsvg rect.cell { cursor: pointer; transition: fill .35s; transform-box: fill-box; transform-origin: center; }
.hmsvg rect.cell:hover { stroke: var(--b900); stroke-width: 1.5; }
.hm0 { fill: #e9eff7; background: #e9eff7; } .hm1 { fill: #d0e1f2; background: #d0e1f2; } .hm2 { fill: #9fc0e3; background: #9fc0e3; } .hm3 { fill: #4d79a8; background: #4d79a8; } .hm4 { fill: #223a5e; background: #223a5e; }
.hmsvg rect.pulse { animation: hmpulse 1.2s ease-out; stroke: var(--b900); stroke-width: 2; }
@keyframes hmpulse { 0% { transform: scale(1); } 30% { transform: scale(2); } 100% { transform: scale(1); } }
.hm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 10px; }
.hm-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .82rem; color: var(--ink-2); }
.hm-stats b { color: var(--ink); }
.hm-legend { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--ink-2); }
.hm-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.hm-legend span:first-child { margin-right: 4px; } .hm-legend span:last-child { margin-left: 4px; }
.hm-tip { position: absolute; z-index: 90; background: var(--b900); color: #fff; padding: 7px 11px; border-radius: 9px; font: 600 .8rem var(--sans); pointer-events: none; white-space: nowrap; box-shadow: 0 8px 20px -6px rgba(34, 58, 94, .5); }
.hm-tip[hidden] { display: none; }
.live-chip, .live-state { display: inline-flex; align-items: center; gap: 7px; font: 600 .75rem var(--sans); color: var(--ok-ink); background: var(--ok-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.live-chip.big { font-size: .82rem; padding: 7px 12px; }
.live-chip i, .live-state i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 0 rgba(31, 157, 107, .6); animation: livedot 1.8s infinite; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 107, .55); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 107, 0); } }
.live-state.retry, .live-state.conectando { color: var(--warn-ink); background: var(--warn-soft); } .live-state.retry i, .live-state.conectando i { background: #c98a00; animation: none; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; min-width: 0; }
.feed li:last-child { border-bottom: 0; }
.feed .ft { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed time { color: var(--ink-2); font-size: .78rem; white-space: nowrap; }
.feed li.new { animation: feedin .9s ease-out; }
@keyframes feedin { 0% { background: var(--b200); transform: translateY(-8px); opacity: 0; } 100% { background: transparent; transform: none; opacity: 1; } }
.stat.flash { animation: statflash 1.4s ease-out; }
@keyframes statflash { 0% { box-shadow: 0 0 0 0 rgba(53, 89, 130, .7); transform: scale(1.03); } 100% { box-shadow: 0 0 0 14px rgba(53, 89, 130, 0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .hmsvg rect.pulse, .live-chip i, .live-state i, .feed li.new, .stat.flash { animation: none !important; } .hmsvg rect.cell { transition: none; } }

.admin-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.live-chip.demo { color: var(--b900); background: var(--b100); }
.demo-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; min-height: 44px; cursor: pointer; }
.demo-toggle input { width: 20px; height: 20px; accent-color: var(--b700); }

/* Animación fluida de los mapas de calor */
.hmsvg { overflow: visible; }
.hmsvg rect.cell { transition: fill .8s cubic-bezier(.22, 1, .36, 1); animation: cellin .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--c, 0) * 9ms); }
@keyframes cellin { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.hmsvg rect.ping, .hmsvg rect.ripple { transform-box: fill-box; transform-origin: center; pointer-events: none; }
.hmsvg rect.ping { stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(34, 58, 94, .55)); animation: hmping 1.6s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes hmping { 0% { transform: scale(.6); opacity: 0; } 18% { transform: scale(3.3); opacity: 1; } 45% { transform: scale(2.7); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.hmsvg rect.ripple { fill: none; stroke: #4d79a8; stroke-width: 1.6; animation: hmripple 1.7s ease-out forwards; }
@keyframes hmripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5.5); opacity: 0; } }
.feed li.new { animation: feedin .9s cubic-bezier(.22, 1, .36, 1); }
.stat { transition: box-shadow .4s, transform .4s; }
@media (prefers-reduced-motion: reduce) { .hmsvg rect.cell, .hmsvg rect.ping, .hmsvg rect.ripple { animation: none !important; transition: none; } .hmsvg rect.ping, .hmsvg rect.ripple { display: none; } }
.hm-scroll { padding: 24px; margin: -24px -24px -16px; }

/* Movimiento constante: una ola diagonal que recorre los cuadraditos con datos, hasta que un dato nuevo se agranda */
.hmsvg rect.cell:is(.hm1, .hm2, .hm3, .hm4) {
  animation: cellin .7s cubic-bezier(.22, 1, .36, 1) both, cellwave 6s ease-in-out .9s infinite;
  animation-delay: calc(var(--c, 0) * 9ms), calc(.9s + (var(--c, 0) + var(--r, 0) * 2) * 85ms);
}
@keyframes cellwave { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .72; } }
.heat.fuera .hmsvg rect.cell { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hmsvg rect.cell:is(.hm1, .hm2, .hm3, .hm4) { animation: none !important; } }

/* Más rápido: se arman de izquierda a derecha y la ola recorre en el mismo sentido */
.hmsvg rect.cell { animation-duration: .45s; }
.hmsvg rect.cell:is(.hm1, .hm2, .hm3, .hm4) {
  animation: cellin .45s cubic-bezier(.22, 1, .36, 1) both, cellwave 2.6s ease-in-out infinite;
  animation-delay: calc(var(--c, 0) * 14ms), calc(1.3s + var(--c, 0) * 40ms + var(--r, 0) * 12ms);
}
.hmsvg rect.cell:is(.hm0) { animation-delay: calc(var(--c, 0) * 14ms); }