/* sanimas · tokens del archivo Figma (colección brand-base) y componentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --surface: #ffffff;
  --faint: #f2f8fe;
  --weak: #dcecfd;
  --primary: #0a62cf;
  --primary-strong: #084fa9;
  --stronger: #063b83;
  --secondary-strong: #0b656e;
  --neutral: #c3d2e3;
  --text: #000000;
  --text-2: #56698a;
  --stroke: #93a6bf;
  --stroke-weak: #e3ebf5;
  --danger: #cc412c;
  --danger-faint: #fbf0ee;
  --danger-text: #75191e;
  --success-weak: #ebfcd5;
  --success-text: #19760e;
  --warning-weak: #fef9cd;
  --warning-text: #755701;
  --info-weak: #cbf7fe;
  --info-text: #0059b5;
  --overlay: rgba(21, 30, 67, .8);
  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-44: 44px;
  --r-soft: 4px; --r-medium: 8px; --r-strong: 12px; --r-round: 999px;
  --gutter: 150px;
  /* movimiento: curvas y tiempos de Material 3 (emphasized) */
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.05, .7, .1, 1); --ease-in: cubic-bezier(.3, 0, .8, .15);
  --d1: 120ms; --d2: 250ms; --d3: 400ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 24px; color: var(--text); background: var(--surface); }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--primary); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-soft); }
[hidden] { display: none !important; }

/* tipografía */
.headline { font-weight: 700; font-size: 60px; line-height: 72px; letter-spacing: -.01em; }
.t-large { font-weight: 600; font-size: 48px; line-height: 60px; }
.t-medium { font-weight: 600; font-size: 36px; line-height: 44px; }
.t-small { font-weight: 600; font-size: 28px; line-height: 38px; }
.t-xsmall { font-weight: 600; font-size: 24px; line-height: 33px; }
.b-large { font-size: 20px; line-height: 30px; }
.b-medium { font-size: 16px; line-height: 24px; }
.b-small { font-size: 14px; line-height: 20px; }
.micro { font-size: 12px; line-height: 16px; }
.bold { font-weight: 700; }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.muted { color: var(--text-2); }
.accent { color: var(--primary); }
.link { color: var(--primary); font-weight: 700; font-size: 14px; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.link.md { font-size: 16px; line-height: 24px; }
.link.plain { font-weight: 400; }

/* disposición */
.row { display: flex; gap: var(--s-12); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--s-12); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.gap-0 { gap: 0; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.start { align-items: flex-start; }
.center { text-align: center; align-items: center; }
.grid { display: grid; gap: var(--s-24); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: var(--r-medium); border: 1px solid transparent; font-size: 18px; line-height: 26px; font-weight: 400; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn.sm { min-height: 36px; padding: 6px 16px; font-size: 14px; line-height: 20px; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-strong); }
.btn.secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.btn.secondary:hover { background: var(--faint); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #9c2b24; }
.btn.wide { width: 100%; }
.btn[disabled] { background: var(--neutral); border-color: var(--neutral); color: #fff; cursor: not-allowed; }

/* íconos */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--primary-strong); }
.ic.s16 { width: 16px; height: 16px; } .ic.s18 { width: 18px; height: 18px; } .ic.s20 { width: 20px; height: 20px; } .ic.s28 { width: 28px; height: 28px; } .ic.s48 { width: 48px; height: 48px; }
.ic.neutral { color: var(--text-2); } .ic.white { color: #fff; } .ic.danger { color: var(--danger-text); }
.chip { width: 44px; height: 44px; border-radius: var(--r-round); background: var(--faint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chip.lg { width: 56px; height: 56px; } .chip.sm { width: 36px; height: 36px; } .chip.weak { background: var(--weak); } .chip.red { background: var(--danger-faint); }
.icon-btn { background: none; border: 0; padding: 6px; border-radius: var(--r-round); cursor: pointer; display: inline-flex; position: relative; text-decoration: none; }
.icon-btn:hover { background: var(--faint); }
.dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* tarjetas */
.card { background: var(--surface); border: 1px solid var(--stroke-weak); border-radius: var(--r-strong); padding: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }
.card.pad-lg { padding: var(--s-24); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-head h2, .card-head h3 { font-size: 20px; line-height: 30px; font-weight: 700; }
.note { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: var(--r-medium); background: var(--faint); font-size: 14px; line-height: 20px; }
.note.ok { background: var(--success-weak); } .note.ok .ic { color: var(--success-text); }
.note.err { background: var(--danger-faint); color: var(--danger-text); font-weight: 600; } .note.err .ic { color: var(--danger-text); }
.note.dark { background: var(--weak); }
.badge { display: inline-flex; padding: 4px 10px; border-radius: var(--r-soft); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.badge.info { background: var(--info-weak); color: var(--info-text); }
.badge.success { background: var(--success-weak); color: var(--success-text); }
.badge.warning { background: var(--warning-weak); color: var(--warning-text); }
.badge.danger { background: var(--danger-faint); color: var(--danger-text); }
.badge.azul { background: var(--weak); color: var(--primary-strong); }
.badge.off { background: #edf4fb; color: var(--text-2); }
.pill { display: inline-flex; padding: 6px 14px; border-radius: var(--r-round); border: 1px solid var(--stroke); background: var(--surface); font-size: 14px; line-height: 20px; font-weight: 700; cursor: pointer; color: var(--text); text-decoration: none; }
.pill[aria-pressed='true'], .pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.kv { padding: 8px 0; border-bottom: 1px solid var(--stroke-weak); }
.kv dt { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
dl { margin: 0; }
.sep { height: 1px; background: var(--neutral); border: 0; margin: 4px 0; width: 100%; }

/* formularios */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; line-height: 16px; }
.field input, .field select, .field textarea { border: 1px solid var(--stroke); border-radius: var(--r-soft); padding: 9px 12px; font-size: 14px; line-height: 20px; background: var(--surface); width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--danger); }
.field .msg { font-size: 12px; line-height: 16px; color: var(--danger-text); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }
.code { display: flex; gap: 8px; }
.code input { width: 48px; height: 56px; text-align: center; font-size: 28px; font-weight: 600; border: 1px solid var(--stroke); border-radius: var(--r-medium); }
.code input:focus { border-color: var(--primary); }

/* web pública */
.pub-header { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); border-bottom: 1px solid var(--stroke-weak); background: var(--surface); position: sticky; top: 0; z-index: 20; }
/* El logotipo va en línea junto al texto de marca; cada versión del sitio decide cuál muestra. */
.brand .logo { display: none; height: 31px; width: auto; }
.lg-ink { fill: var(--logo-ink, #030321); } .lg-panel { fill: var(--logo-panel, #f3f2ea); } .lg-line { fill: var(--logo-line, #111144); } .lg-fold { fill: #4ad1b0; }
.brand { font-weight: 600; font-size: 28px; line-height: 38px; color: var(--primary); text-decoration: none; }
.pub-nav { display: flex; gap: 16px; align-items: center; }
.pub-nav a { padding: 8px 4px; font-size: 14px; line-height: 20px; color: var(--text); text-decoration: none; border-bottom: 2px solid transparent; }
.pub-nav a[aria-current] { color: var(--primary); font-weight: 700; border-color: var(--primary); }
.pub-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px var(--gutter); background: var(--faint); }
.pub-footer .links { display: flex; gap: 16px; }
.pub-footer .links a { font-size: 14px; }
.band { padding: 56px var(--gutter); }
.band.faint { background: var(--faint); }
.band.dark { background: var(--stronger); color: #fff; }
.band.dark .ic { color: #fff; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.photo { border-radius: var(--r-strong); width: 100%; object-fit: cover; background: var(--neutral); }
.auth-body { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; padding: 56px var(--gutter); background: var(--faint); min-height: calc(100vh - 71px - 102px); }
.auth-card { padding: var(--s-24); }
.sys-body { padding: 96px var(--gutter); background: var(--faint); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; min-height: calc(100vh - 71px - 102px); }
.sys-body p { max-width: 520px; }
.ext-header { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); border-bottom: 1px solid var(--stroke-weak); }
.ext-body { background: var(--faint); padding: 32px var(--gutter); min-height: calc(100vh - 71px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ext-body > .card { width: 100%; max-width: 760px; }
.ext-body > .card.narrow { max-width: 520px; }

/* portal */
.portal { display: flex; min-height: 100vh; background: var(--faint); }
.sidebar { width: 248px; flex: none; background: var(--surface); border-right: 1px solid var(--stroke-weak); padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { padding: 0 12px 16px; }
.nav-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-medium); font-size: 14px; line-height: 20px; color: var(--text); text-decoration: none; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }
.nav-row .ic { color: var(--text-2); width: 20px; height: 20px; }
.nav-row:hover { background: var(--faint); }
.nav-row[aria-current] { background: var(--weak); color: var(--primary); font-weight: 700; }
.nav-row[aria-current] .ic { color: var(--primary-strong); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 32px; background: var(--surface); border-bottom: 1px solid var(--stroke-weak); position: sticky; top: 0; z-index: 20; }
.search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-medium); background: var(--faint); border: 1px solid var(--stroke-weak); width: 420px; max-width: 100%; }
.search input { border: 0; background: none; outline: none; flex: 1; font-size: 14px; min-width: 0; }
.user-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 700; padding: 2px; border-radius: var(--r-round); }
.content { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-title h1 { font-weight: 600; font-size: 36px; line-height: 44px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.menu-pop { position: absolute; right: 32px; top: 64px; width: 280px; padding: 8px; gap: 2px; z-index: 40; box-shadow: 0 8px 24px rgba(21, 30, 67, .12); }
.drawer-wrap { position: fixed; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity var(--d2) linear; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); background: var(--surface); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-104%); transition: transform var(--d3) var(--ease-in); box-shadow: 8px 0 32px rgba(21, 30, 67, .18); border-radius: 0 var(--r-strong) var(--r-strong) 0; }
.drawer-wrap.open .scrim { opacity: 1; }
.drawer-wrap.open .drawer { transform: none; transition-timing-function: var(--ease-out); }
.drawer .topbar { position: static; }
.drawer .menu { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.drawer .nav-row { justify-content: flex-start; padding: 14px 12px; font-size: 16px; opacity: 0; transform: translateX(-12px); transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease-out), background var(--d1); }
.drawer-wrap.open .nav-row { opacity: 1; transform: none; }
.drawer-wrap.open .menu > :nth-child(1) { transition-delay: 88ms; }
.drawer-wrap.open .menu > :nth-child(2) { transition-delay: 116ms; }
.drawer-wrap.open .menu > :nth-child(3) { transition-delay: 144ms; }
.drawer-wrap.open .menu > :nth-child(4) { transition-delay: 172ms; }
.drawer-wrap.open .menu > :nth-child(5) { transition-delay: 200ms; }
.drawer-wrap.open .menu > :nth-child(6) { transition-delay: 228ms; }
.drawer-wrap.open .menu > :nth-child(7) { transition-delay: 256ms; }
.drawer-wrap.open .menu > :nth-child(8) { transition-delay: 284ms; }
.drawer-wrap.open .menu > :nth-child(9) { transition-delay: 312ms; }
.drawer-wrap.open .menu > :nth-child(10) { transition-delay: 340ms; }
.drawer-wrap.open .menu > :nth-child(11) { transition-delay: 368ms; }
.drawer-wrap.open .menu > :nth-child(12) { transition-delay: 396ms; }
.drawer .nav-row .chev { margin-left: auto; }
.only-m { display: none; }
.demo { background: var(--stronger); color: #fff; font-size: 13px; line-height: 18px; padding: 8px 16px; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; }
.demo strong { letter-spacing: .12em; font-size: 15px; }
.demo .ic { color: #fff; width: 16px; height: 16px; }

/* piezas */
.acts-m { flex-wrap: wrap; }
.setting > :last-child { flex: none; }
.setting .row.wrap { flex: 0 1 auto; }
.kpi { flex-direction: row; align-items: center; }
.kpi .v { font-weight: 600; font-size: 28px; line-height: 38px; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stroke-weak); text-decoration: none; color: inherit; }
.doc-row .date { width: 110px; font-size: 14px; color: var(--text-2); flex: none; }
.doc-row .cat { width: 120px; flex: none; }
.doc-row .chev { display: none; }
.table-head { display: flex; gap: 12px; padding: 8px 0; font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; border-bottom: 1px solid var(--stroke-weak); }
.empty { align-items: center; text-align: center; padding: 48px 24px; }
.empty p { max-width: 460px; }
.dropzone { border: 2px dashed var(--stroke); border-radius: var(--r-strong); background: var(--surface); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.dropzone.over { border-color: var(--primary); background: var(--weak); }
.track { height: 6px; border-radius: 999px; background: var(--weak); overflow: hidden; }
.track > i { display: block; height: 100%; background: var(--primary); width: 0; transition: width .2s; }
.viewer { padding: 0; overflow: hidden; }
.viewer .bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--stroke-weak); }
.viewer .stage { background: var(--neutral); min-height: 420px; display: flex; align-items: center; justify-content: center; }
.viewer .stage .pdf { width: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; min-height: 260px; justify-content: center; }
.viewer .stage .pdf canvas { width: 100%; max-width: 900px; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(21, 30, 67, .14); }
.viewer .stage img { max-height: 760px; width: auto; max-width: 100%; }
.viewer .stage iframe, .viewer .stage object { width: 100%; height: 760px; border: 0; background: #fff; }
.timeline .year { font-weight: 700; font-size: 20px; line-height: 30px; margin-top: 8px; }
.event { display: grid; grid-template-columns: 64px 20px minmax(0, 1fr); gap: 12px; }
.event .when { font-size: 14px; font-weight: 700; padding-top: 14px; text-align: right; }
.rail { display: flex; flex-direction: column; align-items: center; }
.rail i { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: 18px; flex: none; }
.rail b { width: 2px; flex: 1; background: var(--weak); }
.qr-card { background: var(--stronger); color: #fff; border: 0; align-items: center; text-align: center; padding: 24px; }
.qr-card .qr { background: #fff; padding: 12px; border-radius: var(--r-medium); width: 204px; height: 204px; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 12px; }
.qr-card .qr img, .qr-card .qr svg { width: 180px; height: 180px; }
.option { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--stroke-weak); border-radius: var(--r-medium); cursor: pointer; background: var(--surface); text-align: left; width: 100%; text-decoration: none; color: inherit; }
.option.on, .option:has(input:checked) { border-color: var(--primary); background: var(--faint); }
.option input { accent-color: var(--primary); width: 18px; height: 18px; flex: none; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stroke-weak); }
.switch { appearance: none; width: 44px; height: 24px; border-radius: 999px; background: var(--neutral); position: relative; cursor: pointer; flex: none; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch:checked { background: var(--primary); }
.switch:checked::after { left: 23px; }
details.faq { border-bottom: 1px solid var(--stroke-weak); padding: 12px 0; }
details.faq summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq p { font-size: 14px; color: var(--text-2); padding-top: 6px; }
details.faq[open] summary .ic { transform: rotate(180deg); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.legal h3 { font-size: 16px; font-weight: 700; margin-top: 12px; }
.legal p { color: var(--text-2); }

/* diálogo */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { background: var(--surface); border-radius: var(--r-strong); padding: 24px; max-width: 480px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.dialog .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ── movimiento ─────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--d2) var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in var(--d3) var(--ease-out) both; }
.sidebar { view-transition-name: sidebar; } .topbar { view-transition-name: topbar; } .pub-header { view-transition-name: pubheader; }
::view-transition-group(sidebar), ::view-transition-group(topbar), ::view-transition-group(pubheader) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(204, 65, 44, .5); } 100% { box-shadow: 0 0 0 8px rgba(204, 65, 44, 0); } }
@keyframes bob { 50% { transform: translateY(-6px); } }

.content > *, .auth-body > *, .sys-body > *, .ext-body > *, main > .band:first-child .split > * { animation: rise var(--d3) var(--ease-out) both; }
.content > :nth-child(2), .auth-body > :nth-child(2), .ext-body > :nth-child(2), main > .band:first-child .split > :nth-child(2) { animation-delay: 70ms; }
.content > :nth-child(3), .ext-body > :nth-child(3) { animation-delay: 140ms; } .content > :nth-child(4) { animation-delay: 210ms; } .content > :nth-child(n+5) { animation-delay: 280ms; }
.content > .grid > *, .content > .grid > .col > * { animation: rise var(--d3) var(--ease-out) both; }
.content > .grid > :nth-child(1) { animation-delay: 120ms; } .content > .grid > :nth-child(2) { animation-delay: 180ms; } .content > .grid > :nth-child(3) { animation-delay: 240ms; } .content > .grid > :nth-child(n+4) { animation-delay: 300ms; }
.content > .note, .auth-card .note.ok, .auth-card .note.err:not([hidden]) { animation: drop var(--d3) var(--ease-out) both; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.grid > .reveal:nth-child(2), .steps > .reveal:nth-child(2) { transition-delay: 70ms; } .grid > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { transition-delay: 140ms; } .grid > .reveal:nth-child(4), .steps > .reveal:nth-child(4) { transition-delay: 210ms; } .grid > .reveal:nth-child(5), .steps > .reveal:nth-child(5) { transition-delay: 280ms; }
.band .grid > *, .band .steps > * { transition: transform var(--d2) var(--ease); }

.btn { transition: background var(--d1), border-color var(--d1), transform var(--d1) var(--ease), box-shadow var(--d2); }
.btn:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 98, 207, .18); }
.btn:not([disabled]):active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn.danger:hover { box-shadow: 0 6px 16px rgba(204, 65, 44, .22); }
.pill, .link, .icon-btn, .nav-row, .user-btn, .option, .field input, .field select, .field textarea, .code input, .card { transition: background var(--d1), border-color var(--d1), color var(--d1), box-shadow var(--d2), transform var(--d2) var(--ease); }
.pill:hover { border-color: var(--primary); transform: translateY(-1px); }
.icon-btn:hover { transform: scale(1.08); } .icon-btn:active { transform: scale(.94); }
.field input:focus, .field select:focus, .field textarea:focus, .code input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--weak); }
.nav-row .ic { transition: transform var(--d2) var(--ease), color var(--d1); }
.nav-row:hover .ic { transform: translateX(2px); color: var(--primary-strong); }
.sidebar .nav-row { position: relative; }
.sidebar .nav-row::before { content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); transform: scaleY(0); transition: transform var(--d2) var(--ease); }
.sidebar .nav-row[aria-current]::before { transform: scaleY(1); }
a.card:hover, .option:hover, .kpi:hover, .band .card:hover { border-color: var(--stroke); box-shadow: 0 10px 24px rgba(21, 30, 67, .08); transform: translateY(-2px); }
.doc-row { transition: background var(--d1), padding var(--d2) var(--ease); border-radius: var(--r-medium); }
.doc-row:hover { background: var(--faint); padding-left: 8px; padding-right: 8px; }
.doc-row .chev, .doc-row .ver, .option > .ic:last-child { transition: transform var(--d2) var(--ease); }
.doc-row:hover .chev, .doc-row:hover .ver, .option:hover > .ic:last-child { transform: translateX(3px); }
.chip { transition: transform var(--d2) var(--ease), background var(--d1); }
.card:hover > .chip, .card:hover > .row > .chip, .option:hover .chip, a.row:hover .chip { transform: scale(1.08); background: var(--weak); }
.photo { transition: transform 600ms var(--ease), box-shadow 600ms; }
.photo:hover { transform: scale(1.015); box-shadow: 0 20px 40px rgba(21, 30, 67, .14); }
.pub-header, .topbar { transition: box-shadow var(--d2); }
.pub-header.scrolled, .topbar.scrolled { box-shadow: 0 4px 16px rgba(21, 30, 67, .08); }
.dot { animation: pulse 1.8s var(--ease) infinite; }
.overlay { animation: fade var(--d2) linear both; } .dialog { animation: pop var(--d3) var(--ease-out) both; }
.menu-pop { animation: drop var(--d2) var(--ease-out) both; transform-origin: top right; }
.dropzone { transition: border-color var(--d1), background var(--d1), transform var(--d2) var(--ease); cursor: pointer; }
.dropzone:hover { border-color: var(--primary); } .dropzone.over { transform: scale(1.01); } .dropzone.over .chip, .dropzone:hover .chip { animation: bob 900ms var(--ease) infinite; }
.rail i { transition: transform var(--d2) var(--ease), box-shadow var(--d2); } .event:hover .rail i { transform: scale(1.35); box-shadow: 0 0 0 5px var(--weak); }
.switch, .switch::after { transition: background var(--d2), left var(--d2) var(--ease); }
.badge { transition: transform var(--d1); }
details.faq summary .ic { transition: transform var(--d2) var(--ease); } details.faq summary:hover { color: var(--primary); }
:root { interpolate-size: allow-keywords; }
details.faq::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size var(--d3) var(--ease), opacity var(--d2), content-visibility var(--d3) allow-discrete; }
details.faq[open]::details-content { block-size: auto; opacity: 1; }
.qr svg { animation: pop var(--d3) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .reveal { opacity: 1; transform: none; } @view-transition { navigation: none; } }

/* ── interacción ────────────────────────────────────────────────────── */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 520px); pointer-events: none; }
.toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-medium); background: #10214a; color: #fff; font-size: 14px; line-height: 20px; box-shadow: 0 12px 32px rgba(21, 30, 67, .28); animation: pop var(--d3) var(--ease-out) both; }
.toast .link { color: #fff; flex: none; } .toast.out { opacity: 0; transform: translateY(8px); transition: opacity var(--d2), transform var(--d2) var(--ease-in); }
.toast .life { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .45); transform-origin: left; animation: life linear both; }
@keyframes life { to { transform: scaleX(0); } }
.search { position: relative; } .search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--weak); background: var(--surface); }
kbd { font: inherit; font-size: 11px; line-height: 16px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--stroke); color: var(--text-2); background: var(--surface); flex: none; }
.search:focus-within > kbd { display: none; }
.typeahead { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50; padding: 12px; gap: 4px; box-shadow: 0 16px 40px rgba(21, 30, 67, .16); animation: drop var(--d2) var(--ease-out) both; max-height: 70vh; overflow-y: auto; }
.typeahead > .micro { padding: 6px 8px 2px; letter-spacing: .04em; }
.ta-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-medium); text-decoration: none; color: inherit; font-size: 14px; line-height: 20px; }
.ta-row:hover, .ta-row.on { background: var(--faint); } .ta-row.on { outline: 2px solid var(--weak); } .ta-row.all { color: var(--primary); border-top: 1px solid var(--stroke-weak); border-radius: 0 0 var(--r-medium) var(--r-medium); margin-top: 4px; padding-top: 12px; }
.bell-pop { width: 360px; right: 96px; }
.hint { font-size: 12px; line-height: 16px; color: var(--text-2); }
.field.has-pw { position: relative; } .field.has-pw input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 23px; width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pw-toggle:hover { background: var(--faint); } .pw-toggle.on .ic { color: var(--primary); }
.meter { display: flex; flex-direction: column; gap: 4px; } .meter .track { height: 4px; } .meter[data-lvl='0'] { display: none; }
.meter[data-lvl='1'] .track i { background: var(--danger); } .meter[data-lvl='2'] .track i { background: #af8903; } .meter[data-lvl='3'] .track i { background: #2c9217; }
.drop-veil { position: fixed; inset: 12px; z-index: 110; border: 3px dashed var(--primary); border-radius: 20px; background: rgba(242, 248, 254, .94); display: flex; align-items: center; justify-content: center; pointer-events: none; animation: fade var(--d2) both; }
.drop-veil .chip { animation: bob 900ms var(--ease) infinite; }
.skeleton { background: linear-gradient(100deg, var(--neutral) 30%, #dfe8f3 50%, var(--neutral) 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.viewer .stage img { cursor: zoom-in; transition: transform var(--d3) var(--ease); } .viewer .stage.zoom { overflow: auto; align-items: flex-start; justify-content: flex-start; max-height: 760px; } .viewer .stage.zoom img { cursor: zoom-out; max-width: none; max-height: none; width: 180%; }
.viewer .stage:fullscreen { background: #0b1226; } .viewer .stage:fullscreen img { max-height: 100vh; } .viewer .stage:fullscreen iframe { height: 100vh; }
.step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-medium); border: 1px solid var(--stroke-weak); font-size: 14px; line-height: 20px; text-decoration: none; color: inherit; transition: border-color var(--d1), background var(--d1), transform var(--d2) var(--ease); }
a.step:hover { border-color: var(--primary); background: var(--faint); transform: translateY(-2px); } .step.done { color: var(--text-2); text-decoration: line-through; background: var(--faint); } .step.done .ic { color: var(--success-text); }
.step .ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--stroke); flex: none; }
@media (hover: hover) { .icon-btn[aria-label] { position: relative; } .icon-btn[aria-label]:hover::after { content: attr(aria-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #10214a; color: #fff; font-size: 12px; line-height: 16px; font-weight: 400; padding: 4px 8px; border-radius: 4px; z-index: 70; animation: fade var(--d2) 300ms both; pointer-events: none; } .topbar .icon-btn:last-of-type[aria-label]:hover::after, .viewer .icon-btn:last-child[aria-label]:hover::after { left: auto; right: 0; transform: none; } }

/* ── perfil clínico ─────────────────────────────────────────────────── */
.ring { position: relative; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--weak) 0); }
.ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); } .ring b { position: relative; font-size: 15px; }
.ring-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--stroke); flex: none; margin: 1px; }
.chip.lime { background: var(--banana, #fef9cd); }
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--stroke-weak); } .aviso:last-child { border-bottom: 0; }
.aviso.despues, .aviso.info { opacity: .92; }
.pill-check { cursor: pointer; } .pill-check input { position: absolute; opacity: 0; pointer-events: none; } .pill-check span { display: inline-flex; padding: 6px 14px; border-radius: var(--r-round); border: 1px solid var(--stroke); font-size: 14px; line-height: 20px; font-weight: 600; transition: background var(--d1), border-color var(--d1), color var(--d1); }
.pill-check input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; } .pill-check input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.week { display: flex; gap: 6px; } .day { width: 38px; height: 46px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 11px; font-weight: 700; color: var(--text-2); transition: background var(--d1), transform var(--d1) var(--ease); }
.day:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--primary); } .day.on { background: var(--primary); border-color: var(--primary); color: #fff; } .day[disabled] { opacity: .35; cursor: default; }
.tree-card { padding: 0; overflow: hidden; }
.tree { position: relative; overflow-x: auto; padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 44px; min-height: 420px; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; } .tree-lines path { fill: none; stroke: var(--stroke); stroke-width: 1.5; }
.gen { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 28px; min-width: max-content; }
.gen-label { position: absolute; left: 0; top: -22px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.couple, .sibs { display: flex; gap: 10px; align-items: flex-start; } .couple { padding: 6px; border-radius: 18px; background: var(--faint); }
.person { position: relative; z-index: 1; width: 132px; min-height: 118px; padding: 10px 8px; border-radius: 14px; border: 1.5px solid var(--stroke-weak); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 13px; line-height: 17px; color: inherit; transition: transform var(--d2) var(--ease), box-shadow var(--d2), border-color var(--d1), opacity var(--d2), background var(--d1); }
.person:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(21, 30, 67, .12); border-color: var(--primary); }
.person b { font-size: 14px; overflow-wrap: anywhere; } .person .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--weak); display: grid; place-items: center; font-weight: 700; margin-bottom: 2px; }
.person.has { border-color: var(--primary); } .person.has .avatar { background: var(--primary); color: #fff; }
.person.on { border-color: var(--stronger); box-shadow: 0 0 0 3px var(--weak); } .person.me { background: var(--stronger); color: #fff; border-color: var(--stronger); } .person.me .avatar { background: var(--banana, #fff); color: var(--stronger); }
.person.dim { opacity: .35; } .person.hit { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-faint); transform: translateY(-3px); }
.person .tags { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; width: 100%; } .person .tags i { font-style: normal; font-size: 10.5px; line-height: 14px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--danger-faint); color: var(--danger-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.me .tags i { background: rgba(255, 255, 255, .16); color: #fff; }
.person.ghost { border-style: dashed; border-color: var(--stroke); background: transparent; justify-content: center; color: var(--text-2); font-weight: 600; } .person.ghost.small { width: 96px; min-height: 118px; font-size: 12px; }
.person.ghost:hover { background: var(--faint); color: var(--primary); }
@media (max-width: 900px) { .tree { padding: 24px 12px; gap: 40px; } .gen { justify-content: flex-start; gap: 16px; padding-left: 4px; } .person { width: 112px; } .person.ghost.small { width: 84px; } .week { gap: 4px; } .day { width: 34px; } }

@media (max-width: 1200px) { :root { --gutter: 48px; } .g-main { grid-template-columns: minmax(0, 1fr); } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-5, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  #toasts { bottom: 12px; } .typeahead { position: fixed; left: 12px; right: 12px; top: 64px; }
  .only-m { display: inline-flex; } .only-d { display: none !important; }
  .headline { font-size: 36px; line-height: 44px; } .t-large { font-size: 28px; line-height: 38px; } .t-medium, .page-title h1 { font-size: 28px; line-height: 38px; } .t-small { font-size: 24px; line-height: 33px; } .b-large { font-size: 16px; line-height: 24px; }
  .brand { font-size: 24px; line-height: 33px; }
  .pub-header { padding: 12px 16px; }
  .pub-footer { flex-direction: column; align-items: flex-start; padding: 24px 16px; gap: 16px; }
  .band { padding: 32px 16px; }
  .split, .auth-body, .g-2, .g-3, .g-4, .g-5, .g-main, .steps { grid-template-columns: minmax(0, 1fr); }
  .split { gap: 24px; } .auth-body { gap: 24px; padding: 24px 16px; align-items: start; } .auth-aside { display: none; }
  .grid { gap: 16px; }
  .sidebar { display: none; }
  .topbar { padding: 12px 16px; }
  .content { padding: 20px 16px; gap: 16px; }
  .page-title { flex-direction: column; align-items: stretch; }
  .page-title .btn { width: 100%; }
  .menu-pop { right: 16px; }
  .doc-row .date, .doc-row .cat, .doc-row .ver, .table-head { display: none; }
  .doc-row .chev { display: block; }
  .doc-row .sub-m::after { content: attr(data-m); }
  .acts-m { flex-direction: column; align-items: stretch; } .acts-m .btn { width: 100%; }
  .dialog .acts { flex-direction: column; } .dialog .acts .btn { width: 100%; }
  .event { grid-template-columns: 52px 16px minmax(0, 1fr); gap: 8px; }
  .viewer .stage { min-height: 260px; } .viewer .stage iframe, .viewer .stage object { height: 480px; }
  .sys-body { padding: 48px 16px; } .ext-header { padding: 12px 16px; } .ext-body { padding: 20px 16px; }
  .code input { width: 100%; min-width: 0; }
}

@media print { .sidebar, .topbar, .demo, .no-print, .btn { display: none !important; } .portal, .content { background: #fff; padding: 0; } .card { break-inside: avoid; } }

/* Transcripción bajo el documento: texto ordenado que se agranda con A− / A+ (--tr va de 1 a 2). */
.tr-tam { display: flex; align-items: center; gap: 8px; } .tr-tam .btn { min-width: 48px; min-height: 44px; padding: 0 12px; font-weight: 700; } .tr-tam output { min-width: 52px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* Un solo tamaño de letra y dos tonos (texto y texto secundario): el orden lo dan las filas y los títulos en negrita. */
.tr-cuerpo { font-size: calc(16px * var(--tr, 1)); line-height: 1.6; overflow-wrap: anywhere; border-top: 1px solid var(--stroke-weak); padding-top: 12px; }
.tr-cuerpo:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 4px; border-radius: 4px; }
.tr-cuerpo p { margin: 0 0 .4em; max-width: 68ch; } .tr-cuerpo p:last-child { margin-bottom: 0; }
.tr-sec { margin-top: 1.8em; } .tr-sec h4 { font-size: 1em; line-height: 1.4; font-weight: 700; margin: 0 0 .4em; }
.tr-pares { margin: 0; } .tr-pares > div { display: grid; grid-template-columns: minmax(9em, 15em) 1fr; gap: 0 1.5em; padding: .45em 0; border-bottom: 1px solid var(--stroke-weak); }
.tr-pares dt { color: var(--text-2); } .tr-pares dd { margin: 0; }
@container (max-width: 30em) { .tr-pares > div { grid-template-columns: 1fr; } }
.tr-hoja { container-type: inline-size; }
.tr-lista { margin: 0; padding-left: 1.4em; } .tr-lista li { margin-bottom: .3em; max-width: 68ch; }
.tr-tabla { overflow-x: auto; } .tr-tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tr-tabla th, .tr-tabla td { text-align: left; font-weight: 400; padding: .45em 1.2em .45em 0; border-bottom: 1px solid var(--stroke-weak); vertical-align: top; } .tr-tabla td { white-space: nowrap; }
.tr-tabla thead th { color: var(--text-2); white-space: nowrap; }
.tr-tabla.fichas { overflow: visible; } .tr-tabla.fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .tr-tabla.fichas table, .tr-tabla.fichas tbody, .tr-tabla.fichas tr, .tr-tabla.fichas th, .tr-tabla.fichas td { display: block; }
.tr-tabla.fichas tr { padding: .5em 0; border-bottom: 1px solid var(--stroke-weak); } .tr-tabla.fichas th, .tr-tabla.fichas td { border: 0; padding: 0; white-space: normal; } .tr-tabla.fichas td:empty { display: none; }
.tr-tabla.fichas tbody th { font-weight: 700; } .tr-tabla.fichas td[data-col]:not([data-col=""])::before { content: attr(data-col) ": "; color: var(--text-2); text-transform: lowercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tr .card-head { flex-wrap: wrap; gap: 8px 16px; } .tr-aviso .badge { margin-right: 6px; vertical-align: 1px; }

/* Área de salud: pestañas arriba de la lista. La elegida se marca con peso y subrayado, no solo con color. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stroke-weak); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; white-space: nowrap; text-decoration: none; color: var(--text-2); font-size: 16px; line-height: 24px; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.tab .ic { color: currentColor; } .tab .n { font-size: 13px; line-height: 20px; min-width: 24px; padding: 0 7px; text-align: center; border-radius: 999px; background: var(--faint); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--text); background: var(--faint); } .tab[aria-current] { color: var(--text); font-weight: 700; border-bottom-color: var(--primary); }
.area-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: -3px; } .area-tag .ic { color: currentColor; }
.pill.off { color: var(--text-2); opacity: .5; cursor: default; pointer-events: none; }
@media (max-width: 900px) { .tabs { margin: 0 -20px; padding: 0 20px; } .tab { padding: 0 12px; } }

/* Áreas en Inicio y comparación de recetas de lentes */
.area-card { align-items: flex-start; } .area-card .chip { margin-top: 2px; }
.lentes caption { text-align: left; font-weight: 700; padding-bottom: 8px; } .lentes .tr-tabla { font-size: 16px; } .lentes + .tr-pares { margin-top: 8px; font-size: 16px; }
@media (max-width: 1100px) { .grid.g-3:has(.area-card) { grid-template-columns: minmax(0, 1fr); } }
.grid.lentes { grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* Árbol familiar en lista: una fila por familiar, a todo el ancho, agrupada por generación. Se abre y se edita en el mismo lugar. */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--faint); } .seg button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(3, 3, 33, .14); }
.plista { gap: 28px; } .pgrupo { display: flex; flex-direction: column; gap: 8px; } .pgrupo h3 { font-size: 18px; line-height: 26px; font-weight: 700; margin-bottom: 4px; } .plado { display: flex; flex-direction: column; gap: 8px; } .plado + .plado { margin-top: 8px; }
.prow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left; border: 1px solid var(--stroke-weak); border-radius: var(--r-medium); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.prow .avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--faint); display: grid; place-items: center; font-weight: 700; } .prow.has .avatar { background: var(--primary); color: #fff; }
.prow b { overflow-wrap: anywhere; } .prow .giro { transition: transform var(--d2) var(--ease); flex: none; } .prow.on .giro { transform: rotate(90deg); } .prow.on { border-color: var(--primary); border-radius: var(--r-medium) var(--r-medium) 0 0; }
.prow.me { background: var(--midnight, var(--stronger)); border-color: transparent; color: #fff; } .prow.me .avatar { background: var(--spring, #fff); color: var(--midnight, #000); } .prow.me .ic { color: #fff; }
.prow.dim { opacity: .4; } .prow.hit { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-faint); }
.prow.ghost { min-height: 52px; border-style: dashed; border-color: var(--stroke); background: none; color: var(--text-2); font-weight: 600; font-size: 14px; } .prow.ghost .ic { color: currentColor; }
.prow-panel { border: 1px solid var(--primary); border-top: 0; border-radius: 0 0 var(--r-medium) var(--r-medium); } .prow-panel > .card { border: 0; box-shadow: none; border-radius: 0 0 var(--r-medium) var(--r-medium); padding: 16px 14px 20px; }
@media (min-width: 901px) { .plista { padding: 32px; } }

/* Cierre del menú lateral: el panel se desliza completo y las filas se quedan quietas mientras sale */
.drawer { will-change: transform; } .drawer-wrap.closing .nav-row { opacity: 1; transform: none; transition: none; } .drawer-wrap.closing .scrim { transition-duration: var(--d3); }
/* Cifras del Inicio: son enlaces */
a.kpi { text-decoration: none; color: inherit; cursor: pointer; } a.kpi .ir { color: currentColor; opacity: .55; flex: none; transition: transform var(--d2) var(--ease), opacity var(--d1); } a.kpi:hover .ir, a.kpi:focus-visible .ir { transform: translateX(3px); opacity: 1; }
a.kpi:focus-visible { outline: 3px solid var(--midnight, var(--primary)); outline-offset: 3px; }
.drawer-wrap.closing .drawer { transition: transform 280ms cubic-bezier(.4, 0, 1, 1); } .drawer-wrap.closing .scrim { transition: opacity 280ms linear; }

/* Compartir protegido: código de acceso, sello de consulta y marca sobre el documento */
.pin-box { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r-medium); background: var(--faint); margin-bottom: 8px; }
.pin { display: inline-flex; gap: 8px; } .pin i { font-style: normal; display: grid; place-items: center; width: 52px; height: 60px; border-radius: 12px; background: var(--surface); border: 1px solid var(--stroke); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pin.sm { gap: 4px; vertical-align: middle; } .pin.sm i { width: 26px; height: 32px; font-size: 18px; border-radius: 6px; }
.traza { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 16px; font-size: 13px; line-height: 20px; background: var(--faint); color: var(--text); } .traza span { display: inline-flex; align-items: center; gap: 6px; } .traza .ic { color: currentColor; }
.card > .traza { border-radius: var(--r-medium); }
.stage.marcado { position: relative; overflow: hidden; }
.marca-agua { position: absolute; inset: -40% -60%; display: grid; grid-template-columns: repeat(4, 1fr); align-content: space-around; justify-items: center; gap: 48px 24px; transform: rotate(-24deg); pointer-events: none; user-select: none; z-index: 2; }
.marca-agua span { font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: rgba(3, 3, 33, .2); text-shadow: 0 0 2px rgba(255, 255, 255, .7); }
.code:has(input:nth-child(4):last-child) { justify-content: flex-start; }
@media (max-width: 900px) { .pin i { width: 44px; height: 52px; font-size: 28px; } .marca-agua span { font-size: 11px; } }

/* Fila de documento con acción de compartir: el título abre el documento y su zona de toque cubre la fila; compartir queda encima */
.doc-row.con-accion { position: relative; } .doc-row .abrir { color: inherit; text-decoration: none; } .doc-row .abrir::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.doc-row .abrir:focus-visible { outline: none; } .doc-row .abrir:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; }
.doc-row .compartir { position: relative; z-index: 1; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none; } .doc-row .compartir .ic { color: var(--primary); }
.btn .ic { color: currentColor; }

/* Boletas y facturas */
.liga { display: inline-flex; align-items: center; gap: 4px; color: var(--text); margin-top: 2px; } .liga .ic { color: var(--primary); flex: none; }
.monto { font-family: var(--display, inherit); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
fieldset.comp { border: 1px solid var(--stroke-weak); border-radius: var(--r-medium); padding: 16px; margin: 0; } fieldset.comp legend { padding: 0 6px; } fieldset.comp[hidden] { display: none; }
.sel { border: 1px solid var(--stroke); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; background: var(--surface); width: 100%; min-height: 48px; }
.comp-row { text-decoration: none; color: inherit; padding: 8px 0; border-bottom: 1px solid var(--stroke-weak); }
.gasto { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--stroke-weak); } .gasto:last-child { border-bottom: 0; } .gasto .fin { align-items: flex-end; text-align: right; flex: none; }
.areas-gasto { margin-top: 8px; font-size: 16px; }
@media (max-width: 900px) { .monto { font-size: 26px; line-height: 34px; } .gasto { flex-direction: column; gap: 8px; } .gasto .fin { align-items: flex-start; text-align: left; flex-direction: row; gap: 12px; align-items: center; } }

.espera { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-medium); background: var(--faint); } .espera > .ic { color: var(--text); flex: none; margin-top: 2px; }
.liga { align-items: flex-start; } .liga .ic { margin-top: 2px; }

/* Motivos de salud */
.option.motivo { align-items: center; padding: 18px 20px; } #motivo-nuevo[hidden] { display: none; }
.anio { font-size: 18px; line-height: 26px; font-weight: 700; margin: 12px 0 0; }

/* Ambiente de entidades: barra oscura con la entidad y la persona, distinta del portal personal */
.clin-bar { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 14px var(--gutter); background: var(--midnight, #030321); color: #fff; position: sticky; top: 0; z-index: 20; }
.clin-bar .brand { --logo-ink: #ffffff; --logo-panel: #030321; --logo-line: #ffffff; color: #fff; }
.clin-quien { display: flex; flex-direction: column; flex: 1; min-width: 200px; } .clin-quien b { font-size: 16px; line-height: 22px; } .clin-quien span { font-size: 13px; line-height: 18px; opacity: .8; }
.clin-bar .btn.secondary { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; } .clin-bar .btn.secondary:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.clin-body { padding: 40px var(--gutter) 96px; display: flex; flex-direction: column; gap: 24px; max-width: 1296px; margin: 0 auto; width: 100%; }
.option.espacio { text-align: left; font: inherit; width: 100%; cursor: pointer; }
@media (max-width: 900px) { .clin-body { padding: 24px 20px 72px; } .clin-bar { padding: 12px 20px; } }

.clin-lugar { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 16px; } .clin-lugar span { opacity: .8; }
.clin-lugar select { min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font: inherit; font-size: 14px; } .clin-lugar select option { color: #030321; }

/* Ambiente de entidades con el mismo marco del portal personal: menú a la izquierda, barra arriba, contenido amplio */
.clin-ent { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--r-medium); background: var(--midnight, #030321); color: #fff; }
.clin-ent span { font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; } .clin-ent b { font-size: 15px; line-height: 21px; }
.clin .topbar .search { width: 360px; } .clin .topbar .search input { border: 0; background: none; font: inherit; font-size: 14px; width: 100%; outline: none; }
.clin .clin-lugar { color: var(--text); } .clin .clin-lugar span { opacity: 1; color: var(--text-2); }
.clin .clin-lugar select { border: 1px solid var(--stroke); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; min-height: 40px; }
.clin-yo { cursor: default; text-align: left; } .clin-movil { display: none; }
/* la lista de documentos necesita ancho: en pantallas medianas se guarda la fecha y la categoría bajo el título, como en el teléfono */
@media (max-width: 1180px) { .clin .doc-row .date, .clin .doc-row .cat, .clin .table-head { display: none; } .clin .doc-row .only-m { display: inline; } }
@media (max-width: 900px) { .clin-movil { display: flex; gap: 8px; padding: 12px 20px 0; overflow-x: auto; scrollbar-width: none; } .clin-movil .pill { flex: none; } .clin .topbar { flex-wrap: wrap; } .clin .topbar .search { width: 100%; order: 3; } .clin .clin-lugar { flex: 1; } .clin .clin-lugar select { width: 100%; } }
.kpi .v.txt { font-size: 22px; line-height: 30px; }

/* Espacio profesional: otra paleta (azules del logo) para que nunca se confunda con «Mi salud», y la palabra «Profesional» bajo el logo */
.clin { --fennec: #e4edfb; --faint: #e4edfb; --weak: #c9dbf7; --cassiopeia: #c9dbf7; --mantis: #a9c5f2; --spring: #cfe0fb; --banana: #cfe0fb; --book-green: #1e488f; --billabong: #1e488f; --primary: #1e488f; --primary-strong: #143366; --stronger: #0e264d; --ink-link: #1e488f; --stroke: #8fa8d1; --stroke-weak: #cdd9ec; --neutral: #c3d2e8; --text-2: #3b4d6b; }
.clin .btn.primary, .clin .btn.primary:visited { background: #1e488f; } .clin .btn.primary:hover { background: #143366; } .clin .btn.secondary { border-color: #1e488f; color: #1e488f; } .clin .btn.secondary:hover { background: #e4edfb; border-color: #1e488f; color: #1e488f; }
.clin .grid.g-4 > .kpi:nth-child(1) { background: #cfe0fb; } .clin .grid.g-4 > .kpi:nth-child(3) { background: #a9c5f2; } .clin .grid.g-4 > .kpi:nth-child(4) { background: #1e488f; }
.clin .badge.success { background: #c9dbf7; color: #0e264d; } .clin .note.ok { background: #c9dbf7; }
.clin-marca { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; }
.clin-pro { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1e488f; padding-left: 2px; }
.clin .clin-ent { background: #1e488f; }
.doc-row.pac { gap: 16px; } .doc-row.pac .avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--mantis); color: #0e264d; display: grid; place-items: center; font-weight: 700; } .pac-ult { text-align: right; flex: none; }
@media (max-width: 900px) { .pac-ult { display: none; } .clin .topbar .clin-marca .logo { height: 24px; } }
.clin .topbar .clin-marca { display: none; } @media (max-width: 900px) { .clin .topbar .clin-marca { display: inline-flex; } }

/* Espacio profesional en el teléfono: botón de menú a la izquierda, como en el portal personal */
.clin .topbar .clin-izq { display: none; } .clin .topbar .clin-izq .clin-marca { display: inline-flex; }
@media (max-width: 900px) { .clin .topbar .clin-izq { display: flex; align-items: center; flex: 1; } .clin .clin-lugar { flex: 1 1 100%; order: 2; } .clin .topbar .search { order: 3; } .clin .topbar > .row:last-child { flex: none; } }
.drawer-wrap.clin .clin-pro { color: #1e488f; }
@media (max-width: 900px) { .clin .topbar > .row:last-child { display: contents; } .clin .topbar .clin-izq { order: 0; } .clin .clin-yo { order: 1; } .clin .topbar { gap: 12px; } }

/* Compartir: documentos ya elegidos, selección múltiple en la lista y código QR del profesional */
.elegido { padding: 8px 0; border-bottom: 1px solid var(--stroke-weak); } .elegido:last-child { border-bottom: 0; }
#lista.eligiendo .doc-row.con-accion { cursor: pointer; } #lista.eligiendo .doc-row .compartir, #lista.eligiendo .doc-row .ver { visibility: hidden; }
#lista.eligiendo .doc-row.con-accion .chip { position: relative; } #lista.eligiendo .doc-row.con-accion .chip::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--stroke); }
#lista.eligiendo .doc-row.elegida { background: var(--fennec, var(--faint)); } #lista.eligiendo .doc-row.elegida .chip { background: var(--book-green, var(--primary)); } #lista.eligiendo .doc-row.elegida .chip .ic { color: #fff; } #lista.eligiendo .doc-row.elegida .chip::after { border-color: var(--book-green, var(--primary)); }
.sel-barra { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(calc(100vw - 32px), 640px); padding: 12px 16px 12px 20px; border-radius: 999px; background: var(--midnight, #030321); color: #fff; box-shadow: 0 12px 32px rgba(3, 3, 33, .28); } .sel-barra[hidden] { display: none; }
.sel-barra .btn.secondary { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; } .sel-barra .btn[disabled] { opacity: .5; cursor: default; }
.qr-pro .qr { align-self: center; width: 200px; height: 200px; display: grid; place-items: center; background: #fff; border: 1px solid var(--stroke-weak); border-radius: var(--r-medium); padding: 10px; font-size: 12px; }
@media (max-width: 900px) { .sel-barra { border-radius: 20px; flex-direction: column; align-items: stretch; text-align: center; bottom: 12px; } .sel-barra .row { justify-content: center; } }