/* Portal Documental Denicolás — design-system/MASTER.md
   WCAG 2.2 AA · mobile-first · movimiento nativo (View Transitions, @starting-style,
   scroll-driven animations, linear() springs) desactivado con prefers-reduced-motion. */

:root {
  /* Marca */
  --orange: #FF3F1B;           /* bloques de marca, acentos, gráficos (no texto sobre claro) */
  --orange-strong: #C92A0A;    /* texto/acción sobre claro: 5.5:1 con blanco */
  --orange-deep: #A3230A;
  --ink: #1B1D1B;              /* Raisin Black */
  --ink-2: #2B2E2B;
  --light-blue: #A1D9E5;
  --rackley: #4D838C;
  --rackley-strong: #3E6B73;
  --flash: #EFEFEF;            /* Anti-Flash White */

  /* Superficies y texto */
  --paper: #F5F4F1;
  --surface: #FFFFFF;
  --text: var(--ink);
  --muted: #595E59;            /* 6.2:1 sobre --paper */
  --line: #DCDAD4;
  --line-strong: #858A85;      /* bordes de controles ≥ 3:1 */
  --ok: #1F7A45;
  --warn: #A95A00;
  --off: #858A85;
  --danger: #B42318;
  --danger-soft: #FCEDEB;

  /* Tipografía: Montserrat ≈ Gotham (logo); Figtree para lectura */
  --f-display: "Montserrat", "Gotham", system-ui, sans-serif;
  --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaciado */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;

  /* Movimiento */
  --out: cubic-bezier(.16, 1, .3, 1);          /* salida expo: entradas */
  --in: cubic-bezier(.7, 0, .84, 0);           /* salidas rápidas */
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --t-1: 140ms; --t-2: 240ms; --t-3: 420ms; --t-4: 700ms;

  --masthead-h: 64px;
  --tabbar-h: 64px;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1rem/1.55 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, a, select, label[for], input[type="checkbox"] { cursor: pointer; }
code { font-size: .9em; background: rgba(27, 29, 27, .06); padding: 1px 6px; border-radius: 4px; }

:focus-visible { outline: 3px solid var(--orange-strong); outline-offset: 3px; border-radius: 2px; }
.masthead :focus-visible, .login__brand :focus-visible { outline-color: var(--light-blue); }

[hidden] { display: none !important; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: inherit; transition: background-color var(--t-1), color var(--t-1); }
.icon-btn:hover { background: rgba(27, 29, 27, .06); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--s-4); top: var(--s-4); z-index: 1000; background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform var(--t-2) var(--out); }
.skip-link:focus { transform: none; }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.req { color: var(--danger); font-weight: 700; }

/* ============ Tipografía: jerarquía ============ */
.overline { font: 700 .75rem/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-strong); }
.display { font: 800 clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem)/.98 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.display--md { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.02; letter-spacing: -.03em; }
.h2 { font: 700 clamp(1.375rem, 1.2rem + .6vw, 1.75rem)/1.2 var(--f-display); letter-spacing: -.02em; margin: var(--s-8) 0 var(--s-4); }
.h3 { font: 700 1.125rem/1.3 var(--f-display); letter-spacing: -.01em; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.lead strong { color: var(--text); font-weight: 600; }

/* Enlaces con subrayado que crece */
.link { color: var(--text); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor 0 0) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; border: 0; transition: background-size var(--t-2) var(--out), color var(--t-1); }
button.link { background-color: transparent; padding: 0 0 2px; font: inherit; font-weight: 600; }
.link:hover { color: var(--orange-strong); background-size: 0 1.5px; background-position: 100% 100%; }
.link--muted { color: var(--muted); font-weight: 500; background-size: 0 1.5px; }
.link--muted:hover { color: var(--text); background-size: 100% 1.5px; background-position: 0 100%; }

/* ============ Logo ============ */
.brand-logo { height: 22px; width: auto; }
.brand-wordmark { font: 800 1.125rem var(--f-display); letter-spacing: .06em; color: var(--orange); }

/* ============ Masthead (desktop) + tabbar (móvil) ============ */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--ink); color: var(--flash); view-transition-name: masthead; }
.masthead__inner { max-width: var(--max); margin: 0 auto; height: var(--masthead-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s-6); }
.masthead__brand { display: inline-flex; padding: var(--s-2) 0; }
.masthead__nav { display: none; flex: 1; height: 100%; }
.masthead__user { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.masthead__tool { display: none; color: #BFC3BF; font-size: .875rem; font-weight: 600; text-decoration: none; padding: var(--s-2) 0; }
.masthead__tool:hover { color: #fff; }

.nav { display: flex; height: 100%; gap: var(--s-1); }
.nav li { display: flex; }
.masthead .nav__link { position: relative; display: flex; align-items: center; padding: 0 var(--s-3); color: #BFC3BF; font: 600 .9375rem var(--f-text); text-decoration: none; transition: color var(--t-1); }
.masthead .nav__link:hover { color: #fff; }
.masthead .nav__link[aria-current="page"] { color: #fff; }
.nav__icon { display: none; }
/* Indicador de sección: se desliza entre páginas gracias a la View Transition */
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0; height: 3px; background: var(--orange); view-transition-name: nav-indicator; }

.usermenu { position: relative; }
.usermenu__trigger { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2); list-style: none; border-radius: var(--radius); color: var(--flash); font-weight: 600; font-size: .9375rem; transition: background var(--t-1); }
.usermenu__trigger::-webkit-details-marker { display: none; }
.usermenu__trigger:hover { background: rgba(255, 255, 255, .07); }
.usermenu__name { display: none; }
.usermenu__chev { transition: transform var(--t-2) var(--out); }
.usermenu[open] .usermenu__chev { transform: rotate(180deg); }
.usermenu__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; padding: var(--s-4); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 50px -12px rgba(27, 29, 27, .35); transform-origin: top right; }
.usermenu[open] .usermenu__panel { animation: pop var(--t-2) var(--out); }
.usermenu__full { font: 700 1rem var(--f-display); letter-spacing: -.01em; }
.usermenu__meta { font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.usermenu__action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: var(--s-3); padding: 0; border: 0; border-top: 1px solid var(--line); background: none; font-weight: 600; text-align: left; }
.usermenu__action:hover { color: var(--orange-strong); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

.tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); view-transition-name: tabbar; }
.tabbar .nav { justify-content: space-around; height: var(--tabbar-h); }
.tabbar .nav li { flex: 1; }
.tabbar .nav__link { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: .75rem; font-weight: 600; text-decoration: none; }
.tabbar .nav__icon { display: block; }
.tabbar .nav__link[aria-current="page"] { color: var(--text); }
.tabbar .nav__link[aria-current="page"]::after { top: 0; bottom: auto; left: 30%; right: 30%; }

@media (min-width: 900px) {
  .masthead__nav, .masthead__tool, .usermenu__name { display: flex; }
  .tabbar { display: none; }
}

/* ============ Layout de página ============ */
.main { max-width: var(--max); margin: 0 auto; padding: var(--s-6) var(--gutter) calc(var(--tabbar-h) + var(--s-7) + env(safe-area-inset-bottom)); outline: none; view-transition-name: main; }
@media (min-width: 900px) { .main { padding-top: var(--s-7); padding-bottom: var(--s-8); } }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-6); padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.page-head__text { display: grid; gap: var(--s-3); min-width: 0; flex: 1 1 420px; }
.page-head__text .display { margin: var(--s-1) 0 var(--s-1); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.meta-line { font-size: .875rem; color: var(--muted); margin: calc(var(--s-5) * -1) 0 var(--s-6); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: .875rem; color: var(--muted); margin-bottom: var(--s-5); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }

/* ============ Botones ============ */
.btn { --bg: transparent; --fg: var(--text); --bd: transparent;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 22px; border: 1.5px solid var(--bd); border-radius: var(--radius); background: var(--bg); color: var(--fg);
  font: 600 .9375rem/1 var(--f-text); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: color var(--t-2) var(--out), background-color var(--t-2) var(--out), border-color var(--t-2) var(--out), transform var(--t-1) var(--out); }
.btn:active { transform: scale(.975); }
.btn__arrow { display: inline-flex; transition: transform var(--t-3) var(--spring); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }

/* Primario: tinta sólida; al pasar el mouse, la marca aparece de abajo hacia arriba */
.btn--primary { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange-strong); transform: translateY(101%); transition: transform var(--t-3) var(--out); }
.btn--primary:hover { --bd: var(--orange-strong); }
.btn--primary:hover::before, .btn--primary:focus-visible::before { transform: none; }

/* Contorno: se rellena desde la izquierda */
.btn--outline { --bd: var(--ink); }
.btn--outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-3) var(--out); }
.btn--outline:hover { --fg: #fff; }
.btn--outline:hover::before { transform: none; }

.btn--quiet { --fg: var(--text); padding: 0 14px; }
.btn--quiet:hover { --bg: rgba(27, 29, 27, .06); }
.btn--danger { --bg: var(--danger); --fg: #fff; --bd: var(--danger); }
.btn--danger:hover { --bg: #931C13; --bd: #931C13; }
.btn--danger-text { --fg: var(--danger); }
.btn--danger-text:hover { --bg: var(--danger-soft); }

.btn[aria-disabled="true"] { pointer-events: none; }
.btn .dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.btn .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dot 1s var(--out) infinite; }
.btn .dots i:nth-child(2) { animation-delay: .15s; }
.btn .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ============ Cifras (stats) ============ */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 900px) { .figures { gap: var(--s-6); } }
.figure { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); color: inherit; text-decoration: none; }
.figure--ok { border-top-color: var(--ok); }
.figure--accent, .figure--warn { border-top-color: var(--orange); }
.figure__label { font: 700 .75rem/1.25 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.figure__value { font: 800 clamp(2.5rem, 1.6rem + 4vw, 5rem)/.95 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; transition: color var(--t-2) var(--out); }
.figure__hint { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--muted); }
.figure--link .figure__hint .icon { transition: transform var(--t-3) var(--spring); }
.figure--link:hover .figure__value { color: var(--orange-strong); }
.figure--link:hover .figure__hint { color: var(--text); }
.figure--link:hover .figure__hint .icon { transform: translateX(4px); }
@media (max-width: 599px) { .figure__hint { display: none; } }

.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-8); padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.callout > div { display: grid; gap: var(--s-1); max-width: 62ch; }

/* ============ Filtros y controles ============ */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
.filters__search, .filters > .field:nth-child(4) { grid-column: 1 / -1; }
@media (min-width: 760px) { .filters { grid-template-columns: minmax(240px, 2.2fr) repeat(3, minmax(140px, 1fr)) auto; gap: var(--s-4); align-items: end; } .filters__search, .filters > .field:nth-child(4) { grid-column: auto; } }
.filters__actions { display: flex; align-items: center; gap: var(--s-4); min-height: 48px; }
.js .filters__actions:not(:has(a)) { display: none; }
.cell-stack { display: grid; justify-items: inherit; }
.js .filters [data-js-hide] { display: none; }
.results-count { font-size: .875rem; color: var(--muted); margin: var(--s-5) 0 var(--s-2); }

.field { display: grid; gap: 6px; align-content: start; }
.field__label { font: 600 .875rem var(--f-text); }
.field__help { font-size: .875rem; color: var(--muted); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--danger); }
.input { width: 100%; min-height: 48px; padding: 0 14px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: 1rem; transition: border-color var(--t-1), box-shadow var(--t-2) var(--out); }
.input:hover { border-color: var(--ink); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 63, 27, .18); }
.input:focus-visible { outline: 3px solid var(--orange-strong); outline-offset: 2px; }
.input:disabled { background: #EDECE8; color: var(--muted); border-style: dashed; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
select.input { appearance: none; padding-right: 40px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1D1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon .input { padding-left: 42px; }
.field--check { grid-template-columns: auto 1fr; gap: var(--s-3); }
.check { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }

/* ============ Formularios ============ */
.form { max-width: 760px; display: grid; gap: var(--s-7); }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.fieldset__legend { font: 700 .75rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 0 var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); width: 100%; }
.grid-2 { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.form__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (max-width: 479px) { .form__actions .btn { flex: 1; } }
.error-summary { border-left: 4px solid var(--danger); background: var(--danger-soft); padding: var(--s-4) var(--s-5); outline: none; }
.error-summary:focus-visible { outline: 3px solid var(--danger); outline-offset: 2px; }
.error-summary__title { font: 700 1.0625rem var(--f-display); color: var(--danger); margin-bottom: var(--s-2); }
.error-summary ul { margin: 0; padding-left: var(--s-5); }
.error-summary a { color: var(--danger); font-weight: 600; }
.notice { padding: var(--s-4) var(--s-5); border-left: 4px solid var(--rackley); background: #E9F3F5; color: #24474D; }

/* ============ Tabla editorial (tarjetas en móvil) ============ */
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { text-align: left; padding: 0 var(--s-4) var(--s-3); font: 700 .6875rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.table td { padding: var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .num { text-align: right; }
.table tbody tr { transition: background-color var(--t-1); }
.table tbody tr:hover { background: rgba(27, 29, 27, .025); }
.cell-sub { display: block; color: var(--muted); font-size: .875rem; }
@media (max-width: 759px) {
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; width: 100%; }
  .table--cards tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .table--cards td { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 6px 0; border: 0; text-align: right; }
  .table--cards td[data-label]::before { content: attr(data-label); font: 700 .6875rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; }
  .table--cards td:first-child { display: block; text-align: left; padding-bottom: var(--s-2); }
  .table--cards .cell-stack { justify-items: end; }
  .table--cards td:first-child::before { display: none; }
  .table .num { text-align: right; }
}

.person { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; color: inherit; text-decoration: none; }
.person__text { display: grid; min-width: 0; }
.person__name { font-weight: 700; background: linear-gradient(currentColor 0 0) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t-2) var(--out); justify-self: start; }
.person:hover .person__name, .person:focus-visible .person__name { background-size: 100% 1.5px; }
.person__email { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #E3E1DC; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: clamp(64px, 10vw, 96px); height: clamp(64px, 10vw, 96px); font-size: 1.75rem; }
.avatar--initials { display: inline-grid; place-items: center; font: 700 .8125rem var(--f-display); color: var(--ink); background: var(--light-blue); }
.masthead .avatar--initials { background: var(--orange); color: var(--ink); }
.avatar--lg.avatar--initials { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -.02em; }

/* Estado: marcador + texto */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--off)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--off)) 18%, transparent); }
.status--ok { --dot: var(--ok); }
.status--warn { --dot: var(--warn); }
.status--off { --dot: var(--off); color: var(--muted); }
.status--sig-pending { --dot: var(--off); }
.status--sig-reading { --dot: var(--rackley); }
.status--sig-signed { --dot: var(--ok); }
.role { font-size: .9375rem; }
.role--superadmin { font-weight: 700; }
.role--admin { font-weight: 600; }
.role--viewer { color: var(--muted); }

.meter { display: inline-flex; align-items: center; gap: var(--s-3); }
.meter__text { font: 700 .9375rem var(--f-display); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.meter__bar { position: relative; width: 72px; height: 4px; background: var(--line); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--ink); transform-origin: left; animation: grow var(--t-4) var(--out) both; animation-delay: calc(var(--i, 0) * 40ms + 150ms); }
@keyframes grow { from { transform: scaleX(0); } }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); min-height: 44px; }
.pagination__info { font-size: .875rem; color: var(--muted); }

/* ============ Perfil ============ */
.profile__id { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-end; flex: 1 1 520px; min-width: 0; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); font-size: .9375rem; color: var(--muted); }
.facts li { display: flex; align-items: center; gap: var(--s-3); }
.facts li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* ============ Vacíos ============ */
.empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.empty__title { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.2 var(--f-display); letter-spacing: -.02em; }
.empty__text { color: var(--muted); max-width: 52ch; }
.empty-inline { color: var(--muted); padding: var(--s-5) 0; border-top: 1px solid var(--line); }

/* ============ Toasts ============ */
.toasts { position: fixed; z-index: 100; left: var(--s-4); right: var(--s-4); bottom: calc(var(--tabbar-h) + var(--s-4) + env(safe-area-inset-bottom)); pointer-events: none; }
.toasts__list { display: grid; gap: var(--s-2); justify-items: center; }
@media (min-width: 900px) { .toasts { left: auto; right: var(--gutter); bottom: var(--s-6); } .toasts__list { justify-items: end; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); width: min(440px, 100%); padding: var(--s-3) var(--s-2) var(--s-3) var(--s-5); background: var(--ink); color: #fff; border-radius: var(--radius); box-shadow: 0 24px 60px -18px rgba(27, 29, 27, .55); position: relative; overflow: hidden;
  transition: opacity var(--t-3) var(--out), transform var(--t-3) var(--spring); }
@starting-style { .toast { opacity: 0; transform: translateY(16px) scale(.97); } }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--light-blue); }
.toast--success::before { background: #5FD08F; }
.toast--error::before, .toast--warning::before { background: var(--orange); }
.toast__text { flex: 1; font-size: .9375rem; }
.toast__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: transparent; color: #BFC3BF; }
.toast__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateX(24px); transition: opacity var(--t-1) var(--in), transform var(--t-1) var(--in); }

/* ============ Diálogo ============ */
.dialog { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radius); color: var(--text); box-shadow: 0 30px 80px -20px rgba(27, 29, 27, .5);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity var(--t-2) var(--out), transform var(--t-3) var(--spring), overlay var(--t-2) allow-discrete, display var(--t-2) allow-discrete; }
.dialog[open] { opacity: 1; transform: none; }
@starting-style { .dialog[open] { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog::backdrop { background: rgba(27, 29, 27, 0); transition: background var(--t-2), overlay var(--t-2) allow-discrete, display var(--t-2) allow-discrete; }
.dialog[open]::backdrop { background: rgba(27, 29, 27, .5); }
@starting-style { .dialog[open]::backdrop { background: rgba(27, 29, 27, 0); } }
.dialog__body { padding: var(--s-6); display: grid; gap: var(--s-3); }
.dialog__title { font: 800 1.5rem/1.15 var(--f-display); letter-spacing: -.025em; }
.dialog__text { color: var(--muted); }
.dialog__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); }

/* ============ Login ============ */
.login { background: var(--paper); }
.login__grid { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.login__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); padding: var(--s-5) var(--gutter) var(--s-6); background: var(--orange); color: var(--ink); overflow: hidden;
  animation: wipe var(--t-4) var(--out) both; }
.login__logo .brand-logo { height: 26px; }
.login__statement { display: grid; font: 800 clamp(2.75rem, 1.2rem + 7vw, 7.5rem)/.9 var(--f-display); letter-spacing: -.05em; }
.reveal-line { display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-line > span { display: block; animation: line-up var(--t-4) var(--out) both; }
.reveal-line:nth-child(1) > span { animation-delay: 180ms; }
.reveal-line:nth-child(2) > span { animation-delay: 260ms; }
.reveal-line:nth-child(3) > span { animation-delay: 340ms; }
.reveal-line:nth-child(3) { color: #fff; }
.login__caption { font: 700 .75rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.login__panel { display: grid; align-items: center; padding: var(--s-7) var(--gutter) var(--s-7); outline: none; }
.login__form { width: min(440px, 100%); display: grid; gap: var(--s-4); animation: rise var(--t-4) var(--out) 420ms both; }
.login__title { font: 800 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.login__gsi { margin-top: var(--s-3); min-height: 44px; }
.login__fallback { font-size: .875rem; color: var(--muted); }
.login__help { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
@media (min-width: 900px) {
  .login__grid { grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); }
  .login__brand { padding: var(--s-6) clamp(32px, 5vw, 72px); min-height: 100dvh; }
  .login__panel { padding: var(--s-7) clamp(32px, 6vw, 96px); }
}
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Páginas simples (403/404/error) */
.plain__main { min-height: 100dvh; display: grid; place-content: center; padding: var(--s-6) var(--gutter); outline: none; }
.plain__card { display: grid; gap: var(--s-4); justify-items: start; max-width: 560px; border-top: 3px solid var(--orange); padding-top: var(--s-6); animation: rise var(--t-4) var(--out) both; }
.plain__logo .brand-logo { height: 22px; margin-bottom: var(--s-4); }

/* ============ Movimiento de entrada ============ */
.page-head__text > * { animation: rise var(--t-4) var(--out) both; }
.page-head__text > :nth-child(2) { animation-delay: 60ms; }
.page-head__text > :nth-child(3) { animation-delay: 120ms; }
.page-head__text > :nth-child(4) { animation-delay: 180ms; }
.page-actions { animation: rise var(--t-4) var(--out) 200ms both; }
.figure { animation: rise var(--t-4) var(--out) both; }
.figure:nth-child(2) { animation-delay: 80ms; }
.figure:nth-child(3) { animation-delay: 160ms; }
.row { animation: rise var(--t-3) var(--out) both; animation-delay: calc(min(var(--i, 0), 14) * 30ms + 120ms); }
/* Filas fuera de pantalla: aparecen al hacer scroll */
@supports (animation-timeline: view()) {
  .row:nth-child(n + 15) { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; animation-delay: 0s; }
}

/* ============ Fase 3 · Documentos ============ */
.skeleton { position: absolute; inset: 0; background: linear-gradient(100deg, #ECEAE5 30%, #F7F6F3 50%, #ECEAE5 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

.progress { position: relative; display: block; height: 3px; background: var(--line); overflow: hidden; flex: 1; }
.progress--lg { height: 6px; }
.progress__fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--ink); transform-origin: left; animation: grow var(--t-4) var(--out) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); }

/* Tarjetas de "Mis documentos" */
.doc-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.doc-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t-3) var(--out), box-shadow var(--t-3) var(--out), border-color var(--t-2);
  animation: rise var(--t-4) var(--out) both; animation-delay: calc(var(--i, 0) * 70ms + 100ms); }
.doc-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 20px 40px -24px rgba(27, 29, 27, .45); }
.doc-card:focus-within { border-color: var(--ink); }
.doc-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EDEBE6; border-bottom: 1px solid var(--line); }
.doc-card__thumb canvas { display: block; width: 100% !important; height: auto !important; transform-origin: top center; transition: transform var(--t-4) var(--out); animation: fade-in var(--t-3) var(--out); }
.doc-card:hover .doc-card__thumb canvas { transform: scale(1.03); }
.doc-card__thumb.is-failed .skeleton { animation: none; }
.doc-card__body { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); }
.doc-card__title { font: 700 1.25rem/1.2 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.doc-card__link { color: inherit; text-decoration: none; }
.doc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.doc-card__link:focus-visible { outline: none; }
.doc-card__link:focus-visible::after { outline: 3px solid var(--orange-strong); outline-offset: -3px; border-radius: var(--radius); }
.doc-card__desc { color: var(--muted); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-card__meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); font-size: .8125rem; color: var(--muted); }
.doc-card__meta li + li::before { content: "·"; margin-right: var(--s-3); }
.doc-card__meta .is-late { color: var(--danger); font-weight: 600; }
.doc-card__foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.doc-card__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.doc-card__cta .icon { transition: transform var(--t-3) var(--spring); }
.doc-card:hover .doc-card__cta { color: var(--orange-strong); }
.doc-card:hover .doc-card__cta .icon { transform: translateX(4px); }

/* Lista de administración */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.toolbar__search { flex: 0 1 320px; }
.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); overflow-x: auto; scrollbar-width: none; }
.toolbar .tabs { margin-bottom: 0; border-bottom: 0; }
.tabs__tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--t-1); }
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-current="page"] { color: var(--text); }
.tabs__tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); animation: grow var(--t-3) var(--out); }
.tabs__count { font: 700 .75rem var(--f-display); padding: 1px 7px; border-radius: 999px; background: rgba(27, 29, 27, .07); }

.doclist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.doclist__item { position: relative; display: grid; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); transition: background-color var(--t-1); }
.doclist__item:hover { background: rgba(27, 29, 27, .02); }
@media (min-width: 760px) { .doclist__item { grid-template-columns: 1fr minmax(240px, 320px); align-items: center; gap: var(--s-6); } }
.doclist__title { font: 700 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.25 var(--f-display); letter-spacing: -.02em; }
.doclist__item:hover .doclist__title { color: var(--orange-strong); }
.doclist__meta { margin-top: var(--s-1); font-size: .875rem; color: var(--muted); }
.doclist__progress { display: grid; gap: var(--s-2); }
.doclist__figure { display: flex; align-items: baseline; gap: 2px; }
.doclist__num { font: 800 1.75rem/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.doclist__label { margin-left: var(--s-2); font-size: .875rem; color: var(--muted); }
.doclist__reading { font-size: .8125rem; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.section-head .h2 { margin-bottom: var(--s-3); }
.live { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .8125rem; font-weight: 600; color: var(--muted); }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(31, 122, 69, .5); animation: pulse 2s var(--out) infinite; }
.live.is-stale .live__dot { background: var(--warn); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(31, 122, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 122, 69, 0); } }
.row.is-updated { animation: row-flash 1.4s var(--out); }
@keyframes row-flash { from { background: rgba(255, 63, 27, .12); } }

/* Formulario de carga */
.dropzone { position: relative; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-5); text-align: center; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); transition: border-color var(--t-2), background-color var(--t-2), transform var(--t-2) var(--out); }
.dropzone:hover, .dropzone.is-over { border-color: var(--ink); background: #FBFAF8; }
.dropzone.is-over { transform: scale(1.01); }
.dropzone.has-file { border-style: solid; border-color: var(--ok); }
.dropzone:focus-within { outline: 3px solid var(--orange-strong); outline-offset: 2px; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__icon { width: 28px; height: 28px; color: var(--orange-strong); }
.dropzone__text { font-size: 1rem; overflow-wrap: anywhere; }
.dropzone__help { font-size: .875rem; color: var(--muted); }
.field--error .dropzone { border-color: var(--danger); }
textarea.input { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.choice { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 600; transition: border-color var(--t-1), background-color var(--t-1); }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); }
.choice:has(input:focus-visible) { outline: 3px solid var(--orange-strong); outline-offset: 2px; }

.picker { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.picker[hidden] { display: none; }
.picker__head { display: grid; gap: var(--s-2); }
.picker__bulk { display: flex; gap: var(--s-4); font-size: .875rem; }
.picker__list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.picker__item[hidden] { display: none; }
.picker__label { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-1); border-bottom: 1px solid #EEEDE9; }
.picker__label:hover { background: #FAFAF8; }
.picker__label input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.picker__text { display: grid; }
.picker__name { font-weight: 600; }
.picker__sub { font-size: .8125rem; color: var(--muted); }

/* ============ Visor de lectura ============ */
.reader-page { background: #E9E7E2; }
.reader__bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-2) var(--gutter); padding-top: max(var(--s-2), env(safe-area-inset-top)); background: var(--ink); color: var(--flash); view-transition-name: masthead; }
.reader__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.reader__progress-fill { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-1) linear; }
.reader__back { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: #BFC3BF; font-weight: 600; font-size: .9375rem; text-decoration: none; }
.reader__back:hover { color: #fff; }
.reader__back-label { display: none; }
.reader__heading { flex: 1; min-width: 0; }
.reader__overline { font: 700 .6875rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--light-blue); }
.reader__title { font: 700 clamp(.9375rem, .85rem + .4vw, 1.125rem)/1.25 var(--f-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader__pages { font: 700 .875rem var(--f-display); font-variant-numeric: tabular-nums; color: #BFC3BF; white-space: nowrap; }
.reader__fs { color: #BFC3BF; }
.reader__fs:hover { color: #fff; background: rgba(255, 255, 255, .08); }
@media (min-width: 760px) { .reader__back-label { display: inline; } }

.reader__main { max-width: 968px; margin: 0 auto; padding: var(--s-5) var(--s-4) calc(120px + env(safe-area-inset-bottom)); outline: none; view-transition-name: main; }
.reader__doc { display: grid; gap: var(--s-4); }
.page { position: relative; width: 100%; max-width: 920px; margin: 0 auto; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -18px rgba(0, 0, 0, .25); overflow: hidden; }
.page--skeleton { aspect-ratio: 8.5 / 11; }
.page canvas { display: block; }
.page.is-rendered canvas { animation: fade-in var(--t-3) var(--out); }
.page .textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; transform-origin: 0 0; z-index: 1;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.page .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.page .textLayer > :not(.markedContent), .page .textLayer .markedContent span:not(.markedContent) {
  --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.page .textLayer .markedContent { display: contents; }
.page .textLayer ::selection { background: rgba(255, 63, 27, .28); }
.reader__error { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--danger-soft); border-left: 4px solid var(--danger); }

.reader__foot { position: fixed; inset: auto 0 0 0; z-index: 30; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.reader__foot-inner { max-width: 968px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); }
.reader__meter { position: relative; flex: 1 0 100%; height: 6px; background: var(--line); overflow: hidden; border-radius: 3px; }
.reader__meter-fill { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-3) var(--out); }
.reader__status { flex: 1; font-size: .9375rem; }
.reader__status strong { font: 800 1rem var(--f-display); font-variant-numeric: tabular-nums; margin-right: var(--s-1); }
.reader__goto:not([hidden]) { animation: rise var(--t-3) var(--out); }
@media (min-width: 760px) { .reader__meter { flex: 1 1 280px; order: 2; } .reader__status { order: 1; flex: 0 1 auto; } .reader__goto { order: 3; } }

.sign { margin-top: var(--s-7); padding: var(--s-6) var(--s-5); background: var(--surface); border-top: 4px solid var(--orange); outline: none; scroll-margin-top: 80px; }
.sign.is-revealed { animation: sign-in var(--t-4) var(--out) both; }
@keyframes sign-in { from { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 40% 0); } to { clip-path: inset(0); } }
.sign__title { font: 800 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1.1 var(--f-display); letter-spacing: -.03em; margin: var(--s-2) 0 var(--s-5); text-wrap: balance; }
.sign__form { display: grid; gap: var(--s-5); }
.sign__fields { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .sign__fields { grid-template-columns: 1.2fr 1.2fr 1fr; } }
.input[readonly] { background: #F3F2EE; border-color: var(--line); color: var(--text); }
.sign__accept { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius); line-height: 1.5; transition: border-color var(--t-2), background-color var(--t-2); }
.sign__accept:has(input:checked) { border-color: var(--ink); background: #FBFAF8; }
.sign__accept label { cursor: pointer; }
.sign__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.btn--sign { min-height: 56px; padding: 0 32px; font-size: 1rem; }
.btn:disabled { background: #D9D7D2; border-color: #D9D7D2; color: #595E59; cursor: not-allowed; }
.btn:disabled::before { display: none; }
.sign__hint { font-size: .875rem; color: var(--muted); }

.signed-banner { display: grid; gap: var(--s-4); align-items: center; margin-bottom: var(--s-5); padding: var(--s-5); background: var(--ink); color: #fff; border-radius: var(--radius); animation: rise var(--t-4) var(--out) both; }
@media (min-width: 760px) { .signed-banner { grid-template-columns: auto 1fr auto; gap: var(--s-5); } }
.signed-banner__title { font: 800 1.5rem/1.1 var(--f-display); letter-spacing: -.02em; margin-bottom: var(--s-1); }
.signed-banner p { color: #C9CCC9; }
.signed-banner .btn--primary { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.signed-banner .btn--primary:hover { --fg: #fff; }
.signed-banner__check { width: 52px; height: 52px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.signed-banner__check circle { stroke: var(--orange); stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 600ms var(--out) 200ms forwards; }
.signed-banner__check path { stroke: #fff; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 400ms var(--out) 650ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.signed-note { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface); border-left: 4px solid var(--ok); }
@keyframes fade-in { from { opacity: 0; } }

/* ============ Fase 4 · Tablero ============ */
:root { --data-signed: #1F7A45; --data-reading: #DB7A1F; --data-empty: #E4E2DC; } /* validado: dataviz validate_palette (CVD ΔE 9,4) */
.figures--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
@media (min-width: 900px) { .figures--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figures--4 .figure:nth-child(4) { animation-delay: 240ms; }
@media (max-width: 599px) { .figures--4 .figure__hint { display: none; } }

.panel { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1.5px solid var(--ink); }
.panel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-5); }
.h2--flush { margin: 0 0 var(--s-1); }
.panel__sub { font: 700 .75rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: var(--s-5) 0 var(--s-2); }
.panel__more { margin-top: var(--s-4); font-size: .875rem; }
.panel__note { margin-top: var(--s-5); font-size: .8125rem; color: var(--muted); }
.split { display: grid; gap: 0 var(--s-7); }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend__swatch--signed { background: var(--data-signed); }
.legend__swatch--reading { background: var(--data-reading); }
.legend__swatch--empty { background: var(--data-empty); box-shadow: inset 0 0 0 1px #C9C6BF; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; }
.bars__row { position: relative; animation: rise var(--t-4) var(--out) both; animation-delay: calc(var(--i, 0) * 50ms + 150ms); }
.bars__link { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: baseline; padding: var(--s-3) 0 var(--s-4); color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.bars__label { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.bars__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__link:hover .bars__title, .bars__link:focus-visible .bars__title { text-decoration: underline; text-underline-offset: 3px; }
.bars__flag { font-size: .8125rem; }
.bars__value { font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__value strong { font: 800 1rem var(--f-display); }
.bars__track { grid-column: 1 / -1; display: flex; height: 12px; background: var(--data-empty); border-radius: 0 4px 4px 0; overflow: hidden; }
.bars__seg { height: 100%; width: var(--w); flex: none; box-shadow: 2px 0 0 var(--paper); transform-origin: left; animation: grow var(--t-4) var(--out) both; animation-delay: calc(var(--i, 0) * 50ms + 300ms); }
.bars__seg:last-child { border-radius: 0 4px 4px 0; }
.bars__seg--signed { background: var(--data-signed); }
.bars__seg--reading { background: var(--data-reading); animation-delay: calc(var(--i, 0) * 50ms + 480ms); }
.bars__tip { position: absolute; z-index: 5; right: 0; bottom: calc(100% - 6px); display: grid; gap: 4px; min-width: 220px; max-width: 320px; padding: var(--s-3) var(--s-4); background: var(--ink); color: #fff; border-radius: var(--radius); font-size: .8125rem; box-shadow: 0 16px 40px -16px rgba(27, 29, 27, .5); pointer-events: none;
  opacity: 0; transform: translateY(4px); visibility: hidden; transition: opacity var(--t-1) var(--out), transform var(--t-2) var(--out), visibility 0s linear var(--t-1); }
.bars__tip span { display: flex; align-items: center; gap: var(--s-2); }
.bars__tip .muted { color: #BFC3BF; }
.bars__tip .legend__swatch--empty { box-shadow: none; }
.bars__row:hover .bars__tip, .bars__row:focus-within .bars__tip { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed__item { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.feed__item > .status { margin-top: 6px; }
.feed__item .avatar { margin-top: 1px; }
.feed__meta { display: block; font-size: .8125rem; color: var(--muted); }

/* Lista de pendientes con acción directa */
.tasks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.task { display: grid; gap: var(--s-3); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .task { grid-template-columns: 1fr auto; gap: var(--s-6); } }
.task__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: .875rem; }
.task__deadline { color: var(--muted); }
.task__deadline.is-late { color: var(--danger); font-weight: 600; }
.task__title { font: 700 1.125rem/1.25 var(--f-display); letter-spacing: -.015em; margin: var(--s-1) 0 var(--s-2); }
.task__progress { display: flex; align-items: center; gap: var(--s-3); max-width: 420px; }
.task__pct { font: 700 .875rem var(--f-display); font-variant-numeric: tabular-nums; min-width: 4ch; }
.task__meta { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 759px) { .task__cta { width: 100%; } }

.done { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.done__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.done__title { flex: 1; font-weight: 600; min-width: 12ch; }
.done__date { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta-line--foot { margin: var(--s-8) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ============ Fase 5 · Acciones masivas y reportes ============ */
.col-check { width: 44px; padding-right: 0 !important; }
.col-check .check { display: block; margin: 0; }
.table tbody tr.is-selected { background: rgba(255, 63, 27, .06); }
@media (max-width: 759px) {
  .table--select tr { position: relative; }
  .table--select td.col-check { position: absolute; top: var(--s-4); right: 0; width: auto; padding: 0; }
  .table--select td.col-check::before { display: none; }
  .table--select td.col-check:empty { display: none; }
}

.bulkbar { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); width: min(720px, calc(100% - 24px)); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  background: var(--ink); color: #fff; border-radius: var(--radius); box-shadow: 0 24px 60px -18px rgba(27, 29, 27, .55);
  transition: opacity var(--t-2) var(--out), transform var(--t-3) var(--spring); }
@starting-style { .bulkbar { opacity: 0; transform: translate(-50%, 16px); } }
@media (min-width: 900px) { .bulkbar { bottom: var(--s-6); } }
.bulkbar__count { flex: 1; font-size: .9375rem; }
.bulkbar__count strong { font: 800 1.125rem var(--f-display); font-variant-numeric: tabular-nums; }
.bulkbar__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bulkbar .btn--outline { --bd: #fff; --fg: #fff; }
.bulkbar .btn--outline::before { background: #fff; }
.bulkbar .btn--outline:hover { --fg: var(--ink); }
.bulkbar__clear { --fg: #C9CCC9; }
.bulkbar__clear:hover { --bg: rgba(255, 255, 255, .08); --fg: #fff; }
.bulkbar :focus-visible { outline-color: var(--light-blue); }

.excluded { display: grid; gap: var(--s-4); justify-items: start; }
.excluded__list { width: 100%; max-height: 280px; border: 1px solid var(--line); }

.report-filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-6); }
.report-filters__doc, .report-filters > .field:nth-child(2), .report-filters__dates { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .report-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
  .report-filters__doc { grid-column: 1 / 4; }
  .report-filters > .field:nth-child(2) { grid-column: 4 / 7; }
  .report-filters__dates { grid-column: 4 / 7; }
}
.report-filters__dates { border: 0; margin: 0; padding: 0; min-width: 0; }
.report-filters__dates legend { padding: 0; margin-bottom: 6px; }
.date-range { display: flex; align-items: center; gap: var(--s-2); }
.date-range .input { flex: 1; min-width: 0; }
.report-summary { margin-bottom: var(--s-7); }
.figure__value--text { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.1; padding-top: .4em; }
.report-head { align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); }
.report-head .results-count { margin: 0; }

.sort { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: inherit; text-decoration: none; }
.sort:hover { color: var(--text); }
.sort__icon { opacity: 0; transition: opacity var(--t-1), transform var(--t-2) var(--out); }
.sort:hover .sort__icon, .sort:focus-visible .sort__icon { opacity: .5; }
th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--text); }
th[aria-sort="ascending"] .sort__icon { opacity: 1; transform: rotate(180deg); }
th[aria-sort="descending"] .sort__icon { opacity: 1; }
.table th.num .sort { justify-content: flex-end; }

.soon { margin-top: var(--s-8); padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--radius); display: grid; gap: var(--s-2); }

/* ============ Fases 6–7 · Configuración y avisos ============ */
.masthead__tool[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
a.usermenu__link { color: var(--text); text-decoration: none; }
a.usermenu__link:hover { color: var(--orange-strong); }
a.usermenu__link + a.usermenu__link { margin-top: 0; }

.settings { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .settings { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-8); } }
.settings__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
@media (min-width: 1024px) {
  .settings__toc { position: sticky; top: calc(var(--masthead-h) + var(--s-5)); align-self: start; }
  .settings__toc ol { flex-direction: column; gap: var(--s-3); padding-left: var(--s-4); border-left: 1px solid var(--line); }
}
.settings__main { min-width: 0; }
.form--wide { max-width: 820px; }
.fieldset[id] { scroll-margin-top: calc(var(--masthead-h) + var(--s-5)); }
.panel[id] { scroll-margin-top: calc(var(--masthead-h) + var(--s-5)); }
.field__static { font-weight: 600; }
.indent { padding-left: var(--s-6); border-left: 2px solid var(--line); margin-left: 10px; }
.form__actions--sticky { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 5; background: linear-gradient(to top, var(--paper) 70%, transparent); padding-bottom: var(--s-4); }
@media (min-width: 900px) { .form__actions--sticky { bottom: 0; } }

.swatches { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.swatch { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4) 0 var(--s-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 600; transition: border-color var(--t-1); }
.swatch:hover { border-color: var(--ink); }
.swatch input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.swatch__chip { width: 22px; height: 22px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.swatch:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--orange-strong); outline-offset: 2px; }

.logo-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.logo-field__preview { display: grid; place-items: center; min-width: 200px; min-height: 64px; padding: var(--s-3); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.logo-field__preview .brand-logo { height: 32px; }
.logo-field input[type=file] { font-size: .9375rem; }

.integrations { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.integration { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.integration__name { font-weight: 700; }
.integration__detail { font-size: .9375rem; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 599px) { .integration { grid-template-columns: 1fr; gap: var(--s-1); } }
.integration-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.pushcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius);
  transition: opacity var(--t-3) var(--out), transform var(--t-3) var(--out); }
@starting-style { .pushcard { opacity: 0; transform: translateY(8px); } }
.pushcard[data-state="on"] { border-left-color: var(--ok); }
.pushcard[data-state="denied"], .pushcard[data-state="ios"] { border-left-color: var(--rackley); }
.pushcard__text { flex: 1 1 320px; display: grid; gap: var(--s-1); }
.pushcard__title { font: 700 1.125rem/1.3 var(--f-display); letter-spacing: -.01em; }
.pushcard__body { color: var(--muted); font-size: .9375rem; }
.pushcard__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ============ Transiciones entre páginas (View Transitions, cross-document) ============ */
@view-transition { navigation: auto; }
::view-transition-old(main) { animation: vt-out var(--t-1) var(--in) both; }
::view-transition-new(main) { animation: vt-in var(--t-3) var(--out) both; }
::view-transition-group(nav-indicator) { animation-duration: var(--t-3); animation-timing-function: var(--spring); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .btn .dots i { animation: none !important; opacity: 1; }
  .skeleton, .live__dot { animation: none !important; }
  .bars__tip { transition: none !important; }
  .signed-banner__check circle, .signed-banner__check path { stroke-dashoffset: 0; }
}