/* ===== Portal de clientes — Boosters (marca v2) =====
   Un solo tema: marcos verde noche con degradé sobre un fondo apagado con logos bstrs como marca de agua.
   Adentro, tarjetas blancas (blanco crema con degradé) y letras tinta; sus acentos van en tinta, nunca lima sobre blanco.
   Las piezas lima (la protagonista de cada pantalla) llevan detrás una etiqueta blanco crema, como el logo.
   Movimiento suave: el menú de abajo salta con resorte, los números cuentan y los bloques entran escalonados. */

:root, :root[data-theme="dark"] {
  --tinta: #051A0C;
  --crema: #FFFEF7;
  --lima: #EFFA00;
  --noche: #092A14;

  --bg: #2A302B;                     /* el fondo de afuera: apagado, con marca de agua */
  --bg-2: #1F2420;
  --lima-grad: linear-gradient(135deg, #F8FF6E 0%, #EFFA00 46%, #D7E300 100%);
  --tinta-grad: linear-gradient(160deg, #1B4F2E 0%, #0B2D16 52%, #051A0C 100%);
  /* El marco: casi negro, con un degradé abstracto (gris grafito, un toque de verde en una esquina y un brillo lima muy leve). */
  --frame-grad: radial-gradient(760px 460px at 100% 0%, rgb(239 250 0 / 6%), transparent 62%),
    radial-gradient(680px 560px at 0% 100%, rgb(22 64 38 / 38%), transparent 66%),
    radial-gradient(820px 620px at 78% 115%, rgb(88 96 92 / 22%), transparent 62%),
    radial-gradient(560px 420px at 22% 18%, rgb(70 78 74 / 16%), transparent 70%),
    conic-gradient(from 210deg at 62% 38%, #141816 0deg, #0A0D0B 90deg, #1B201D 180deg, #0D110F 270deg, #141816 360deg);
  --card-grad: linear-gradient(180deg, #FFFFFF 0%, #FDFCF6 46%, #F1EEE1 100%);
  --feature-grad: var(--lima-grad);   /* en tarjetas blancas pasan a tinta */
  --primary-grad: var(--lima-grad);
  --accent-grad: var(--lima-grad);
  --frame: var(--noche);             /* el marco donde vive cada pantalla */
  --frame-line: rgb(255 254 247 / 16%);
  --stroke: rgb(255 254 247 / 32%);     /* marcos de las tarjetas: blanco fino */
  --tag-line: rgb(255 254 247 / 24%);   /* la etiqueta de atrás de cada tarjeta */
  --shadow-frame: 0 1px 2px rgb(0 0 0 / 25%), 0 34px 70px -24px rgb(0 0 0 / 70%), 0 14px 28px -14px rgb(0 0 0 / 45%);
  --shadow-card: 0 20px 36px -18px rgb(0 0 0 / 70%), 0 3px 8px rgb(0 0 0 / 22%);
  --stroke-hl: rgb(239 250 0 / 65%);    /* lo activo o importante: lima neón */
  --dock-stroke: rgb(239 250 0 / 40%);
  --surface: #0E321B;                /* tarjetas adentro del marco */
  --surface-2: #143B22;
  --surface-3: #1B472B;
  --here: var(--frame);              /* el fondo de lo que está atrás (tapa la línea del progreso) */
  --field: var(--surface);           /* fondo de los campos de texto */
  --line: rgb(255 254 247 / 9%);
  --line-2: rgb(255 254 247 / 16%);
  --ink: var(--crema);
  --ink-2: rgb(255 254 247 / 74%);
  --muted: rgb(255 254 247 / 50%);
  --faint: rgb(255 254 247 / 24%);

  --hl: var(--lima);                 /* texto destacado */
  --feature: var(--lima);            /* la pieza protagonista de cada pantalla */
  --on-feature: var(--noche);
  --primary: var(--lima);
  --on-primary: var(--noche);
  --primary-hover: #F6FF4D;
  --accent: var(--lima);             /* progreso, foco */
  --on-accent: var(--noche);
  --stk-front: var(--lima);          /* etiquetas: adelante lima con letras verde noche, atrás crema */
  --stk-back: var(--crema);
  --stk-ink: var(--noche);

  --good-ink: var(--lima);
  --warn: #FFC24D;
  --critical: #FF7A66;
  --critical-ink: #FF907E;

  --radius: 20px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --shadow: 0 24px 60px rgb(5 26 12 / 40%);
  color-scheme: dark;
}

/* ===== Base ===== */
html { background: var(--bg); }
body.portal, body:has(.boot) {
  margin: 0; min-height: 100dvh;
  background: radial-gradient(1200px 700px at 50% -10%, #343B35 0%, transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) fixed;
  color: var(--crema);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
body.no-scroll { overflow: hidden; }
/* Marca de agua: logos bstrs en línea, en diagonal, casi transparentes. */
.wm { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .06; pointer-events: none; }
.wm-logo { overflow: visible; }
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot img { border-radius: 18px; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.92) rotate(-4deg); opacity: .7; } }

::selection { background: var(--lima); color: var(--noche); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.center { justify-content: center; }
.late { color: var(--critical-ink); }

/* El marco: cada pantalla vive adentro de una lámina redondeada; afuera queda la tinta con puntos.
   Termina arriba del menú de abajo, que flota sobre el borde. */
.page, .auth {
  position: relative; z-index: 1;
  width: min(1560px, 100% - 24px); margin: 12px auto calc(104px + env(safe-area-inset-bottom));
  min-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
  padding-bottom: 48px; border-radius: 28px;
  background: var(--frame-grad); --here: var(--frame); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--frame-line), var(--shadow-frame);
  animation: frame-in .7s var(--ease) both;
}
@keyframes frame-in { from { opacity: 0; transform: scale(.985); } }
.wrap { width: min(1280px, 100% - clamp(32px, 6vw, 112px)); margin-inline: auto; }
@media (max-width: 560px) {
  .page, .auth { width: calc(100% - 14px); margin-top: 7px; border-radius: 22px; padding-bottom: 32px; }
  .shell > .page { width: auto; margin-top: 0; }
  .wrap { width: calc(100% - 30px); }
}

/* ===== Columna izquierda + marco ===== */
:root { --side-w: 300px; --shell-gap: 16px; }
.shell {
  position: relative; z-index: 1; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: var(--shell-gap);
  width: min(1900px, 100% - 32px); margin: 16px auto 0; align-items: stretch;
}
.shell > .page { width: auto; margin: 0 0 calc(104px + env(safe-area-inset-bottom)); }
/* La columna mide lo mismo que el marco del centro: la grilla la estira y "contain: size" evita que
   su contenido (la lista de notificaciones) la agrande; la lista se desplaza por dentro. */
.side {
  position: relative; contain: size; margin-bottom: calc(104px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px;
  padding: 20px 16px 16px; border-radius: 28px; background: var(--frame-grad); --here: var(--frame); --field: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--frame-line), var(--shadow-frame);
  animation: frame-in .7s var(--ease) both;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 2px 4px 4px; text-decoration: none; }
.side-brand .wordmark { font-size: 21px; }
.side-logo { display: block; height: 50px; flex: none; }
.side-logo .logo { transform-origin: 6% 55%; }
.side-brand:hover .logo { animation: hang .9s var(--ease); }
.side-brand:hover .wordmark { color: var(--hl); }
@keyframes hang { 25% { transform: rotate(-5deg); } 55% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } }
.side-me {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; text-decoration: none;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke), var(--shadow-card); transition: box-shadow .25s, background .25s;
}
.side-me:hover { box-shadow: inset 0 0 0 1px var(--stroke-hl), var(--shadow-card); }
.av-side { width: 48px; height: 48px; font-family: var(--font-display); font-size: 16px; letter-spacing: -.03em; outline: 1px solid var(--stroke-hl); outline-offset: 3px; }
.side-me-text { display: grid; min-width: 0; }
.side-me-text strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-me-text small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-bell {
  display: none; position: relative; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  place-items: center; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke);
}
.side-bell-n {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--lima); color: var(--noche);
}
.side-noti {
  flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 4px 4px 14px; border-radius: 18px;
  background: var(--surface); --here: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke), var(--shadow-card);
}
.side-h {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 10px 0 0; margin-bottom: 4px; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.side-h .side-chev { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tinta-grad); color: var(--lima); transition: transform .4s var(--ease-back); transform: rotate(90deg); }
.side-h:hover .side-chev { filter: brightness(1.15); }
/* Plegado: solo queda el título. */
/* Plegar y desplegar con animación: la tarjeta crece o se encoge hasta su título y la lista se desvanece. */
.side-noti { flex: 1 1 0%; min-height: 50px; overflow: hidden; transition: flex-grow .65s var(--ease), padding-bottom .45s var(--ease); }
.side-h { transition: margin-bottom .45s var(--ease); }
.noti-list { transition: opacity .35s ease .12s, transform .5s var(--ease) .08s; }
.side.noti-closed .side-noti { flex-grow: 0.0001; padding-bottom: 10px; }
.side.noti-closed .side-h { margin-bottom: 0; }
.side.noti-closed .side-chev { transform: rotate(0deg); }
.side.noti-closed .noti-list { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .2s ease, transform .3s var(--ease); }
.side.noti-closed .noti-read { display: none; }
.side-h h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.035em; }
.noti-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.noti-list.in-sheet { max-height: 70dvh; padding: 0; }
.noti-group { margin: 14px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.noti {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 6px; margin: 0 -6px; border-radius: 12px;
  color: inherit; text-decoration: none; transition: background .2s; animation: rise .45s var(--ease) both;
}
.noti + .noti { box-shadow: 0 -1px 0 var(--line); border-radius: 0 0 12px 12px; }
a.noti:hover { background: var(--surface-2); box-shadow: none; border-radius: 12px; }
/* Los íconos, como en Finanzas: círculo tinta con el ícono en lima. */
.noti-ic {
  position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinta-grad); color: var(--lima);
}
.noti-ic.is-new::after { content: ''; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 1.5px var(--tinta); }
.noti-body { display: grid; gap: 2px; min-width: 0; }
.noti-text { font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.noti-text b { color: var(--ink); font-weight: 600; }
.noti-text q { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); quotes: '“' '”'; }
.noti-tag { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--hl); box-shadow: inset 0 0 0 1px currentColor; }
.noti time { font-size: 11px; color: var(--muted); }
.noti-empty { margin: 12px 10px 12px 0; font-size: 12.5px; color: var(--muted); }

/* Pantallas angostas: la columna se vuelve una franja arriba; las notificaciones se abren con la campanita. */
@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 10px; width: calc(100% - 14px); margin-top: 7px; }
  .side {
    position: static; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px;
  }
  .side { margin-bottom: 0; contain: none; }
  .side-logo { height: 38px; }
  .side-brand { padding: 0 2px; gap: 8px; }
  .side-brand .wordmark { font-size: 17px; }
  .side-me-slot { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
  .side-me { padding: 5px 12px 5px 5px; }
  .av-side { width: 36px; height: 36px; font-size: 13px; }
  .side-me-text small { display: none; }
  .side-bell { display: grid; }
  .side-noti { display: none; }
}
@media (max-width: 480px) { .side-me-text { display: none; } }
@media (max-width: 360px) { .side-brand .wordmark { display: none; } }

/* Entrada escalonada de los bloques de cada pantalla (solo la primera vez). */
.view.entering > * { animation: rise .75s var(--ease) both; }
.view.entering > :nth-child(2) { animation-delay: .06s; }
.view.entering > :nth-child(3) { animation-delay: .14s; }
.view.entering > :nth-child(4) { animation-delay: .22s; }
.view.entering > :nth-child(5) { animation-delay: .3s; }
.view.entering > :nth-child(n+6) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Logo de la barra: la palabra "boosters" sola, en Unbounded 800 (sin etiqueta). */
.wordmark {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1;
  letter-spacing: -.045em; color: var(--ink); text-decoration: none; transition: color .25s;
}
.wordmark:hover { color: var(--hl); }

/* ===== Encabezado de pantalla ===== */
.head { display: flex; align-items: flex-end; gap: 16px 24px; padding-top: clamp(30px, 4.4vw, 48px); position: relative; }
.head-text { flex: 1; min-width: 0; }
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.display {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1; letter-spacing: -.045em;
  text-transform: lowercase; overflow-wrap: anywhere;
}
.hl { color: var(--hl); }
.lead { margin: 10px 0 0; max-width: 520px; font-size: 14.5px; color: var(--ink-2); }
.head-aside { flex: none; }
.head-detail .display { font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.04em; line-height: 1.05; }
.head-detail { align-items: flex-start; }
.head-detail .head-aside { align-self: flex-end; }
.head-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.back-btn {
  flex: none; width: 38px; height: 38px; margin-top: 0; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: transparent; border: 1px solid var(--stroke); color: var(--ink);
  transition: transform .35s var(--ease-back), background .2s, border-color .2s;
}
.back-btn:hover { transform: translateX(-4px); background: var(--surface-2); border-color: var(--stroke-hl); }
@media (max-width: 720px) {
  .head { flex-wrap: wrap; }
  .head-aside { width: 100%; }
  .head-detail { display: grid; grid-template-columns: auto 1fr; }
  .head-detail .head-aside { grid-column: 1 / -1; }
}

/* ===== Secciones ===== */
.sec { margin-top: clamp(34px, 4.4vw, 54px); }
.sec-tight { margin-top: clamp(22px, 2.6vw, 30px); }
.sec-sm { margin-top: 30px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-h h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.035em; text-transform: lowercase; }
.sec-note { font-size: 12.5px; color: var(--muted); }
.link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--ink-2); text-decoration: none; transition: color .2s, gap .3s var(--ease);
}
.link:hover { color: var(--ink); gap: 9px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 30px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ===== Tarjetas adentro del marco ===== */
.panel, .minis, .stage, .d-status, .llist, .quote, .group, .feed, .auth-box {
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke), var(--shadow-card); border-radius: 18px;
  --here: var(--surface); --field: var(--frame);
}
/* Las tarjetas lima llevan detrás una etiqueta blanco crema, igual que el logo. */
.feature, .lastpay, .action-approve { position: relative; }
.feature::before, .lastpay::before, .action-approve::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--crema); transform: translate(9px, -8px) rotate(1.4deg);
  box-shadow: var(--shadow-card);
}
.panel { padding: clamp(18px, 2.2vw, 24px); }

/* ===== Botones ===== */
.btn {
  height: 38px; padding: 0 15px; gap: 7px; border-radius: 999px;
  background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--stroke);
  font-weight: 600; font-size: 13.5px;
  transition: transform .3s var(--ease-back), background .2s, box-shadow .3s, color .2s;
}
.btn:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--stroke-hl); transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 18px -8px rgb(0 0 0 / 70%); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 28%, transparent); }
/* Sobre piezas lima (o tinta en crema): botón del color de la tinta. */
.btn-ink { background: var(--on-feature); color: var(--feature); box-shadow: none; }
.btn-ink:hover { background: var(--on-feature); box-shadow: 0 10px 26px rgb(0 0 0 / 25%); }
.btn-ink-ghost { background: transparent; color: var(--on-feature); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-feature) 45%, transparent); }
.btn-ink-ghost:hover { background: color-mix(in srgb, var(--on-feature) 8%, transparent); box-shadow: inset 0 0 0 1px var(--on-feature); }
.btn-danger { color: var(--critical-ink); }
.btn:disabled { opacity: .5; transform: none; box-shadow: none; }
.icon-btn {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, transform .3s var(--ease-back);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); transform: rotate(-8deg); }

/* ===== Chips y cuenta regresiva ===== */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--stroke);
}
.chip-hl { background: var(--feature); color: var(--on-feature); box-shadow: none; }
.chip-done { background: transparent; color: var(--good-ink); box-shadow: inset 0 0 0 1px currentColor; }
.chip-late { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical-ink); }
.cd {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke);
}
.cd.cd-soon, .cd.cd-urgent { background: var(--feature); color: var(--on-feature); box-shadow: none; }
.cd.cd-late { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical-ink); }

/* ===== Pastilla "en tiempo récord" (simple, sin sticker) ===== */
.stk {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--hl); box-shadow: inset 0 0 0 1px currentColor;
}

/* ===== Control segmentado (píldora que se desliza) ===== */
.seg {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--stroke);
}
.seg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap;
  font-weight: 600; font-size: 13px; color: var(--muted); transition: color .3s;
}
.seg button:hover { color: var(--ink); }
.seg button.on { color: var(--on-primary); }
.seg button b {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; background: var(--surface-3); color: var(--ink-2); transition: background .3s, color .3s;
}
.seg button.on b { background: color-mix(in srgb, var(--on-primary) 16%, transparent); color: var(--on-primary); }
.seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: 999px; background: var(--primary);
}
.seg.ready .seg-pill { transition: transform .55s var(--ease-back), width .55s var(--ease-back); }

/* ===== Menú de abajo ===== */
.dock {
  --dock-fill: var(--tinta);
  position: fixed; z-index: 100; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(400px, 100% - 24px); height: 60px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0 30px;
  animation: dock-in .8s var(--ease-back) both .1s;
}
@keyframes dock-in { from { transform: translate(-50%, 140%); } }
.dock-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 18px 26px rgb(5 26 12 / 38%));
}
.dock-bg path { fill: url(#dock-grad); stroke: rgb(255 254 247 / 22%); stroke-width: 1; }
.dock-blob {
  position: absolute; z-index: 1; left: 0; top: -21px; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FBFF8C 0%, #EFFA00 52%, #CFDA00 100%); transform: scale(0); will-change: transform;
  box-shadow: 0 6px 18px rgb(239 250 0 / 28%), inset 0 -3px 0 rgb(9 42 20 / 12%);
}
/* La burbuja asoma sobre el fondo claro: un aro tinta la separa (nunca lima directo sobre claro). */
.dock-blob { box-shadow: 0 0 0 2.5px var(--tinta), 0 8px 20px rgb(5 26 12 / 30%), inset 0 -3px 0 rgb(9 42 20 / 12%); }
.dock-blob::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lima); opacity: 0;
}
.dock-blob.land::after { animation: land .7s var(--ease) .22s; }
@keyframes land { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }

.dock-item {
  position: relative; z-index: 2; display: grid; justify-items: center; height: 60px;
  color: rgb(255 254 247 / 66%); text-decoration: none; outline: none;
}
.dock-ic {
  position: absolute; top: 6px; width: 38px; height: 38px; display: grid; place-items: center;
  transition: transform .35s var(--ease), color .2s;
}
.dock-ic svg, .dock-av { transition: transform .18s var(--ease); }
.dock-lbl {
  position: absolute; bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: rgb(255 254 247 / 48%); transition: color .3s, transform .4s var(--ease-back);
}
.dock-item:hover .dock-ic { transform: translateY(-3px); color: var(--crema); }
.dock-item:focus-visible .dock-ic { outline: 2px solid var(--lima); outline-offset: 2px; border-radius: 50%; }
.dock-item.active .dock-ic {
  transform: translateY(-25px); color: var(--noche);
  transition: transform .6s var(--ease-back) .08s, color .2s .14s;
}
.dock-item.active .dock-lbl { color: var(--lima); font-weight: 700; transform: translateY(-1px); }
.dock-item.tap .dock-ic svg, .dock-item.tap .dock-av { animation: squish .45s var(--ease-back); }
@keyframes squish { 30% { transform: scale(.72) rotate(-10deg); } 65% { transform: scale(1.18) rotate(4deg); } }
.dock-item.active.tap .dock-ic svg { animation: squish .5s var(--ease-back); }
.dock-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(255 254 247 / 30%); }
.dock-item.active .dock-av { box-shadow: 0 0 0 2px var(--noche); }
/* El "+": una etiqueta doble como el logo. */
.dock-tag {
  position: absolute; top: 7px; width: 34px; height: auto; pointer-events: none;
  transition: transform .45s var(--ease-back), opacity .25s;
}
.dock-nuevo .dock-ic { opacity: 0; }
.dock-nuevo:hover .dock-tag { animation: tag-hang .9s var(--ease); }
.dock-nuevo.tap .dock-tag { animation: tag-press .45s var(--ease-back); }
.dock-nuevo.active .dock-tag { transform: scale(.2) rotate(-40deg) translateY(-20px); opacity: 0; }
.dock-nuevo.active .dock-ic { opacity: 1; }
@keyframes tag-hang { 25% { transform: rotate(-12deg); } 55% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
@keyframes tag-press { 35% { transform: scale(.8) rotate(-10deg); } 70% { transform: scale(1.1) rotate(5deg); } }
@media (max-width: 360px) { .dock { padding: 0 24px; } .dock-lbl { font-size: 10px; } }

/* ===== Avatares ===== */
.av {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  font-size: 13px; font-weight: 700; background: var(--feature); color: var(--on-feature);
}
.av-sm { width: 32px; height: 32px; font-size: 12px; }
.av-xl { width: 68px; height: 68px; font-family: var(--font-display); font-size: 22px; letter-spacing: -.04em; }
.av-studio { background: var(--tinta); }
.dock-av.av { width: 24px; height: 24px; font-size: 9px; background: var(--crema); color: var(--noche); }

/* ===== Inicio ===== */
.stats { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: 22px; align-items: stretch; }
.feature {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  min-height: 0; padding: 20px 22px; border-radius: 18px; gap: 10px;
  background: var(--feature); color: var(--on-feature);
}
.feature-l { position: relative; font-weight: 600; font-size: 13.5px; }
.feature-v {
  position: relative; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(48px, 6vw, 64px); line-height: .9; letter-spacing: -.06em;
}
.feature-s { position: relative; font-size: 12.5px; opacity: .72; }
.minis { margin: 0; padding: 2px 20px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; column-gap: 32px; }
.mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; }
.mini:not(:nth-child(3n + 1)) { border-top: 1px solid var(--stroke); }
.mini dt { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.mini dt svg { color: var(--muted); }
.mini dd {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.045em; line-height: 1;
}
@media (max-width: 1180px) { .stats { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .minis { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .mini:not(:nth-child(3n + 1)), .mini:nth-child(4) { border-top: 1px solid var(--stroke); }
}
@media (max-width: 820px) {
  .stats { grid-template-columns: 1fr; gap: 18px; }
  .feature { padding: 18px 20px; }
}

.chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 2vw, 18px); height: 120px; margin-top: 28px; }
.chart-card .sec-h { margin-bottom: 0; }
.bar-col { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; }
.bar {
  position: relative; align-self: end; justify-self: center; width: min(100%, 34px); height: calc(var(--h) * 1%); min-height: 6px; border-radius: 8px;
  background: var(--surface-3); transform-origin: bottom;
  animation: grow 1s var(--ease-back) both; animation-delay: calc(.35s + var(--i) * .08s);
  transition: background .25s;
}
.bar b {
  position: absolute; left: 0; right: 0; top: -19px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: -.03em; color: var(--ink-2);
}
.bar-col:hover .bar { background: var(--line-2); }
.bar-col.cur .bar { background: var(--feature); }
.bar-col.cur .bar b { color: var(--ink); }
.bar-m { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: lowercase; }
.bar-col.cur .bar-m { color: var(--ink); }
@keyframes grow { from { transform: scaleY(0); } }

.quick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@media (max-width: 720px) {
  .quick { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .quick .btn { flex: none; }
}
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.panel-empty { margin: 14px 0 2px; font-size: 13px; color: var(--muted); }

/* su ritmo: calendario, un cuadradito por día */
.grid-cal { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 980px) { .grid-cal { grid-template-columns: minmax(0, 1fr); } }
.cal-card { display: flex; flex-direction: column; }
.cal-scroll { overflow-x: auto; scrollbar-width: none; margin-top: 6px; }
.cal { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 8px; min-width: 520px; }
.cal-months { grid-column: 2; display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); gap: 4px; font-size: 11px; color: var(--muted); text-transform: lowercase; }
.cal-months span { white-space: nowrap; }
.cal-days { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 10.5px; color: var(--muted); align-items: center; }
.cal-grid { grid-column: 2; grid-row: 2; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); gap: 4px; }
.c {
  display: block; aspect-ratio: 1; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--stroke);
  animation: rise .45s var(--ease) both; animation-delay: calc(.2s + var(--w, 0) * 18ms);
}
.c.l1, .c.l2 { background: var(--accent); box-shadow: none; }
.c.l2 { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--on-accent) 35%, transparent); } /* 2 o más envíos ese día */
.c.today { box-shadow: inset 0 0 0 1.5px var(--stroke-hl); }
.c.future { box-shadow: none; opacity: .35; background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 5px); }
.cal-grid .c:not(.future):hover { transform: scale(1.25); box-shadow: inset 0 0 0 1px var(--stroke-hl); }
.cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 16px; font-size: 12.5px; color: var(--muted); }
.cal-foot b { color: var(--ink); }
.cal-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.cal-legend .c { width: 12px; animation: none; }
.cal-legend .c:first-of-type { margin-left: 4px; }
.cal-legend .c:last-of-type { margin-right: 4px; }

/* tus videos */
.vids { display: flex; align-items: center; gap: 20px; }
.donut-wrap { position: relative; width: 92px; height: 92px; flex: none; }
.donut { width: 100%; height: 100%; }
.donut circle { fill: none; stroke-width: 10; }
.donut-bg { stroke: var(--surface-3); }
.donut-v { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--len) var(--c); animation: donut-in 1.3s var(--ease) both .35s; }
@keyframes donut-in { from { stroke-dasharray: 0 var(--c); } }
.donut-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.donut-n b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.04em; }
.donut-n small { font-size: 10.5px; color: var(--muted); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.legend li b { margin-left: auto; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.lg-v svg { color: var(--hl); }
.lg-h svg { color: var(--muted); }
.facts2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke); display: grid; gap: 8px; }
.fact { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--ink-2); }
.fact svg { flex: none; color: var(--muted); }
.fact b { color: var(--ink); }

/* ===== Pedidos: buscador, línea de producción y lista ===== */
.search { position: relative; display: block; width: min(260px, 100%); }
.search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .in { height: 36px; padding-left: 36px; border-radius: 999px; font-size: 13.5px; background: transparent; }
.search .in::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }

.fmt-badge {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--stroke); transition: transform .4s var(--ease-back), background .25s;
}

/* ===== Vacío ===== */
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 20px; color: var(--ink-2); }
.empty-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke); margin-bottom: 6px; }
.empty strong { font-size: 15px; color: var(--ink); }
.empty p { margin: 0 0 8px; max-width: 360px; }

/* ===== Un pedido ===== */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; margin-top: clamp(20px, 3vw, 28px); }
.detail.vertical { grid-template-columns: minmax(0, 1fr) 350px; }
.d-main { display: grid; gap: 16px; min-width: 0; }
.stage { display: grid; gap: 10px; padding: 10px; border-radius: 20px; }
.stage .vtabs { padding: 2px 2px 0; }
.vtabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.vtab {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--ink-2); font-weight: 600; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--stroke);
  transition: background .2s, color .2s, transform .3s var(--ease-back);
}
.vtab:hover { transform: translateY(-2px); }
.vtab small { margin-left: 4px; font-weight: 500; opacity: .7; }
.vtab.on { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.player-frame .player { border-radius: 14px; background: #000; outline: 1px solid var(--stroke); outline-offset: -1px; }
.player-frame.vertical .player { aspect-ratio: 9 / 16; width: min(100%, calc(62vh * 9 / 16)); margin: 0 auto; }
.player-frame.placeholder {
  display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 22px; border-radius: 14px; text-align: center;
  background: var(--frame); color: var(--ink-2);
}
.player-frame.vertical.placeholder { aspect-ratio: 9 / 16; width: min(100%, calc(60vh * 9 / 16)); margin: 0 auto; }
.player-frame.placeholder > div { display: grid; justify-items: center; gap: 10px; max-width: 300px; }
.player-frame.placeholder strong { color: var(--ink); font-size: 15px; }
.player-frame.placeholder span:not(.ph-ic) { font-size: 13px; }
.ph-ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--feature); color: var(--on-feature); animation: breathe 2.4s ease-in-out infinite;
}
.player-link { background: var(--surface); color: var(--ink); }
.v-dl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 4px 0; }
.v-dl > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.btn-dl {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font-size: 13.5px; font-weight: 700; background: var(--tinta-grad); color: var(--lima);
  box-shadow: 0 10px 20px -12px rgb(5 26 12 / 70%); transition: transform .35s var(--ease-back), box-shadow .2s;
}
.btn-dl:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 14px 26px -12px rgb(5 26 12 / 80%); }
.btn-dl svg { transition: transform .35s var(--ease-back); }
.btn-dl:hover svg { transform: translateY(2px); }

/* ===== Escena de la fase (mientras no hay vídeo para revisar) ===== */
.stage:has(.phase-stage) { container-type: inline-size; }
.phase-stage {
  position: relative; overflow: hidden; isolation: isolate; min-height: clamp(340px, 46vh, 460px);
  display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(16px, 3vw, 36px);
  padding: clamp(22px, 3.4vw, 40px); border-radius: 14px; background: var(--tinta-grad); color: var(--crema);
}
.ps-glow {
  position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: -18%; top: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgb(239 250 0 / 22%), transparent 65%); animation: ps-drift 9s ease-in-out infinite alternate;
}
@keyframes ps-drift { to { transform: translate(35%, 45%) scale(1.15); } }
.ps-art { position: relative; display: grid; place-items: center; min-height: 200px; }
.ps-art .sticker { display: block; height: auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / 35%)); }
.ps-main { width: min(250px, 92%); animation: hang-in .9s var(--ease-back) both, float 4.5s ease-in-out .9s infinite; transform-origin: 50% 0; }
.ps-side { position: absolute; right: 2%; bottom: -4%; width: min(110px, 38%); animation: ps-pop .7s var(--ease-back) .5s both, ps-wobble 3.2s ease-in-out 1.3s infinite; }
@keyframes ps-pop { from { opacity: 0; transform: scale(0) rotate(-30deg); } }
@keyframes ps-wobble { 50% { transform: rotate(-8deg) scale(1.05); } }
.ps-copy { display: grid; gap: 12px; justify-items: start; min-width: 0; animation: rise .6s var(--ease) .15s both; }
.ps-kicker {
  padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgb(239 250 0 / 12%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 30%);
}
.ps-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 5.2cqi, 44px); line-height: 1; overflow-wrap: anywhere; letter-spacing: -.045em; color: var(--crema); }
.ps-text { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: rgb(255 254 247 / 78%); }
.ps-doing { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--lima); }
.ps-doing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: ps-dot 1.2s ease-in-out infinite; }
.ps-doing i:first-of-type { margin-left: 4px; }
.ps-doing i:nth-of-type(2) { animation-delay: .15s; }
.ps-doing i:nth-of-type(3) { animation-delay: .3s; }
@keyframes ps-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.ps-due { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: 14px; background: rgb(255 254 247 / 7%); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 12%); }
.ps-due span { font-size: 12px; color: rgb(255 254 247 / 65%); }
.ps-due strong { font-size: 15px; color: var(--crema); }
.ps-track { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 420px; margin: 6px 0 0; padding: 0; }
.ps-track li { display: grid; gap: 6px; font-size: 11px; font-weight: 600; color: rgb(255 254 247 / 45%); }
.ps-track li::before { content: ''; height: 5px; border-radius: 99px; background: rgb(255 254 247 / 14%); }
.ps-track li.done { color: rgb(255 254 247 / 75%); }
.ps-track li.done::before { background: var(--lima); }
.ps-track li.now { color: var(--lima); }
.ps-track li.now::before {
  background: linear-gradient(90deg, var(--lima) 0 40%, rgb(239 250 0 / 25%) 40% 100%); background-size: 250% 100%;
  animation: ps-load 1.8s ease-in-out infinite;
}
@keyframes ps-load { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ps-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; background: var(--lima); color: var(--tinta);
  box-shadow: 0 10px 24px -10px rgb(239 250 0 / 55%); transition: transform .35s var(--ease-back), box-shadow .2s;
}
.ps-cta:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 14px 30px -10px rgb(239 250 0 / 70%); }
.btn-danger-solid { background: #D8432F; color: #fff; box-shadow: none; }
.btn-danger-solid:hover { background: #C23826; }
.ps-cancel {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; background: transparent; color: rgb(255 254 247 / 60%);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 18%); transition: color .2s, box-shadow .2s, background .2s;
}
.ps-cancel:hover { color: #FFB4A6; box-shadow: inset 0 0 0 1px rgb(255 180 166 / 55%); background: rgb(255 120 100 / 8%); }
.ps-prev, .ps-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; background: rgb(255 254 247 / 10%); color: var(--crema); transition: background .2s;
}
.ps-prev:hover { background: rgb(255 254 247 / 18%); }
.ps-back { justify-self: start; background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--stroke); }
.ps-back svg { transform: scaleX(-1); }
@container (max-width: 620px) {
  .phase-stage { grid-template-columns: 1fr; }
  .ps-art { min-height: 140px; }
  .ps-main { width: min(200px, 64%); }
  .ps-side { right: 8%; width: min(90px, 26%); }
  .ps-title { font-size: clamp(26px, 8cqi, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-glow, .ps-main, .ps-side, .ps-copy, .ps-doing i, .ps-track li.now::before { animation: none !important; }
}

.action {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke);
}
.action strong { display: block; font-size: 15px; }
.action small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.action-approve { background: var(--feature); color: var(--on-feature); box-shadow: none; }
.action-approve small { color: inherit; opacity: .72; }
.ok-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--feature); color: var(--on-feature); }
.action-review { flex-wrap: wrap; }
.action-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-line-ink { height: 44px; padding: 0 18px; background: transparent; color: var(--on-feature); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-feature) 55%, transparent); }
.btn-line-ink:hover { background: color-mix(in srgb, var(--on-feature) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--on-feature); }
.btn-line-ink:disabled { opacity: .5; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-feature) 35%, transparent); }
@media (max-width: 560px) { .action { flex-wrap: wrap; } .action .btn { width: 100%; } }

.d-status { padding: 18px 20px 20px; }
.d-status .sec-h { margin-bottom: 4px; }
.d-status-text { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--stroke); }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; }
.facts a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--hl); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }

.feed {
  position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100dvh - 130px); min-height: 360px;
  border-radius: 18px;
}
.feed-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.feed-head h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.035em; }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-3); }
.count:empty { display: none; }
.feed-list { flex: 1; overflow-y: auto; padding: 8px 14px 12px; display: grid; align-content: start; gap: 10px; scrollbar-width: thin; }
.cm { display: flex; gap: 10px; align-items: flex-end; animation: rise .45s var(--ease) both; }
.cm.mine { flex-direction: row-reverse; }
.cm-bubble { max-width: 84%; padding: 8px 12px 9px; border-radius: 16px 16px 16px 5px; background: var(--surface-2); }
.cm.mine .cm-bubble { border-radius: 16px 16px 5px 16px; background: var(--primary); color: var(--on-primary); }
.cm-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 2px; font-size: 11px; }
.cm-head b { font-weight: 700; }
.cm-head span { opacity: .6; }
.cm-bubble p { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cm-bubble a { color: inherit; }
.cm.resolved .cm-bubble { opacity: .6; }
.cm-done { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 600; opacity: .8; }
.cm.caption .cm-bubble { background: transparent; box-shadow: inset 0 0 0 1px var(--stroke); }
.tc-chip { margin: 2px 0 6px; background: var(--feature); color: var(--on-feature); border-radius: 999px; padding: 2px 9px; }
.cm.mine .tc-chip { background: var(--on-primary); color: var(--primary); }
.tc-chip:hover { background: var(--ink); color: var(--noche); }
.feed-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 10px; text-align: center; color: var(--muted); font-size: 14px; }
.feed-empty span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.feed-empty p { margin: 0; }
.composer { padding: 10px 12px 12px; border-top: 1px solid var(--stroke); }
.composer-box {
  display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 20px;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--stroke); transition: box-shadow .2s;
}
.composer-box:focus-within { box-shadow: inset 0 0 0 1px var(--stroke-hl); }
.composer textarea {
  flex: 1; min-height: 34px; max-height: 120px; padding: 7px 0; border: 0; outline: none; resize: none;
  background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.4;
}
.composer textarea::placeholder { color: var(--muted); }
.send-btn {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); transition: transform .35s var(--ease-back), opacity .2s;
}
.send-btn:not(:disabled):hover { transform: translateY(-3px) rotate(-8deg); }
.send-btn:disabled { opacity: .3; cursor: default; }
.composer-hint { display: flex; align-items: center; gap: 5px; margin: 8px 4px 0; font-size: 11px; color: var(--muted); }
.composer-closed { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--stroke); font-size: 12px; color: var(--muted); }
.tc-pending {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 6px 4px 12px; border-radius: 999px;
  font-size: 13px; background: var(--feature); color: var(--on-feature); animation: rise .35s var(--ease-back);
}
.tc-pending button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / 12%); color: inherit; cursor: pointer; }
@media (max-width: 1000px) {
  .detail, .detail.vertical { grid-template-columns: 1fr; }
  .feed { position: static; max-height: none; min-height: 0; }
  .feed-list { max-height: 60vh; }
}

/* ===== Nuevo pedido ===== */
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.step-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 1px var(--stroke); color: var(--ink-2);
  transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--ease-back);
}
.step:focus-within .step-n { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.step-body { display: grid; gap: 8px; min-width: 0; }
.step-l { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; padding-top: 4px; }
.step-h { font-size: 12px; color: var(--muted); }
.raw-link { display: grid; gap: 8px; }
.raw-link[hidden] { display: none; }
/* Interruptor (p. ej. "Lo envié por otro medio"): pista tinta y bolita lima al activarlo. */
.tgl { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; background: var(--field); box-shadow: inset 0 0 0 1px var(--stroke); transition: box-shadow .25s; }
.tgl:has(input:checked) { box-shadow: inset 0 0 0 1px var(--stroke-hl); }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tgl-track { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--tinta-grad); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 22%); transition: box-shadow .25s; }
.tgl-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--crema); opacity: .55; transition: transform .35s var(--ease-back), background .25s, opacity .25s; }
.tgl input:checked + .tgl-track { box-shadow: inset 0 0 0 1px rgb(239 250 0 / 55%); }
.tgl input:checked + .tgl-track i { transform: translateX(18px); background: var(--lima); opacity: 1; }
.tgl input:focus-visible + .tgl-track { outline: 2px solid var(--lima); outline-offset: 2px; }
.tgl-txt { display: grid; gap: 1px; min-width: 0; }
.tgl-txt strong { font-size: 14px; }
.tgl-txt small { font-size: 12px; color: var(--muted); }
.in, .g-in {
  width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; border: 0; outline: none;
  background: var(--field); color: var(--ink); font: inherit; font-size: 14.5px;
  box-shadow: inset 0 0 0 1px var(--stroke); transition: box-shadow .2s, background .2s;
}
textarea.in { height: auto; padding: 10px 14px; resize: vertical; }
select.in {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23051A0C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.in::placeholder { color: var(--faint); }
.in:focus { box-shadow: inset 0 0 0 1px var(--stroke-hl), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.in-lg { height: 44px; font-size: 14.5px; border-radius: 12px; }
.in-wrap { position: relative; display: block; }
.in-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.in-wrap .in { padding-left: 40px; }
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.format {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 0; cursor: pointer; text-align: left;
  background: var(--field); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke);
  transition: box-shadow .25s, transform .4s var(--ease-back), background .25s;
}
.format:hover { transform: translateY(-1px); }
.format.on { box-shadow: inset 0 0 0 1px var(--stroke-hl); }
.format-art { height: 32px; width: 32px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .3s, transform .5s var(--ease-back); }
.format-art.v svg { height: 30px; width: auto; }
.format-art.h svg { height: 24px; width: auto; }
.format.on .format-art { color: var(--hl); }
.format-txt strong { display: block; font-size: 14px; }
.format-txt small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.format-check {
  position: absolute; top: 50%; right: 12px; margin-top: -10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); transform: scale(0); transition: transform .4s var(--ease-back);
}
.format.on .format-check { transform: scale(1); }
/* "¿Qué nos envía?": un vídeo o varios sin ordenar. Tarjetas más altas, con la explicación debajo. */
.kinds .format { align-items: flex-start; padding: 14px 40px 14px 14px; }
.format-art.kind { width: 38px; height: 32px; }
.format-art.kind svg { width: 38px; height: auto; }
.kinds .format-txt small { font-size: 12px; line-height: 1.4; margin-top: 3px; }
.formats.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formats.f3 .format { padding-right: 34px; }
.in-num { max-width: 160px; }
@media (max-width: 560px) { .kinds, .formats.f3 { grid-template-columns: 1fr; } }
.qpicks { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.qpick { padding-right: 40px; }
.qpick .format-txt { min-width: 0; }
.qpick .format-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; text-transform: lowercase; font-family: var(--font-display); font-weight: 700; }
.qpick-n {
  border-radius: 10px; background: var(--tinta-grad); color: var(--lima); font-family: var(--font-display); font-weight: 800; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgb(239 250 0 / 30%);
}
.qpick.on .qpick-n { background: var(--lima-grad); color: var(--noche); }
.qpick-none { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--stroke); font-size: 14px; color: var(--ink-2); }
.qpick-none strong { color: var(--ink); }
.qpick-none .btn { justify-self: start; margin-top: 4px; }
.done-card { display: grid; justify-items: center; gap: 12px; padding-top: 40px; text-align: center; }
.done-card .display { font-size: clamp(26px, 3.6vw, 36px); }
.done-card p { max-width: 400px; margin: 0 0 6px; color: var(--ink-2); font-size: 14.5px; }
.done-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--feature); color: var(--on-feature); animation: dot-in .5s var(--ease-back) both; }
@keyframes dot-in { from { transform: scale(0); } }
.step-l .opt { margin-left: 4px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.refs { display: grid; gap: 8px; }
.ref-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ref-row:has(.ref-del[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ref-del {
  width: 36px; height: 36px; border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--muted); transition: background .2s, color .2s;
}
.ref-del:hover { background: var(--field); color: var(--ink); }
.ref-add {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-left: -10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--hl); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.ref-add:hover { background: var(--field); }
.ref-add[hidden], .ref-del[hidden] { display: none; }
.brief-card { display: grid; gap: 18px; }
/* Detalles del pedido: una barra chica plegada; se abre con un toque */
.od { padding: 0; overflow: hidden; }
.od-sum { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; user-select: none; }
.od-sum::-webkit-details-marker { display: none; }
.od-ic { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.od-t { display: grid; min-width: 0; flex: 1; }
.od-t b { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; letter-spacing: -.035em; }
.od-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-chev { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--stroke); transform: rotate(90deg); transition: transform .35s var(--ease-back), background .2s; }
.od-sum:hover .od-chev { background: var(--field); }
.od[open] .od-chev { transform: rotate(-90deg); }
.od-body { display: grid; gap: 16px; padding: 4px 14px 16px; animation: rise .35s var(--ease) both; }
.od-tools { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.detail.no-feed, .detail.vertical.no-feed { grid-template-columns: minmax(0, 1fr); }
.brief-card .sec-h { margin-bottom: 0; }
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.ob-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--stroke); min-width: 0; }
.ob-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.ob-tile > div { display: grid; gap: 2px; min-width: 0; }
.ob-l { font-size: 11.5px; color: var(--muted); }
.ob-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; }
.ob-v a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); text-decoration: none; }
.ob-v a:hover { text-decoration: underline; }
.ob-dots { display: inline-flex; gap: 3px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stroke-hl); }
.ob-dots i.on { background: var(--tinta-grad); box-shadow: none; }
.ob-muted { color: var(--muted); font-weight: 600; }


/* Notas y referencias de un pedido (portal y panel) */
.bf-block { display: grid; gap: 10px; min-width: 0; }
.bf-l { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bf-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11px; background: var(--tinta-grad); color: var(--lima); letter-spacing: 0; }
.bf-quote {
  position: relative; margin: 0; padding: 14px 16px 14px 20px; border-radius: 14px; overflow-wrap: anywhere;
  background: var(--field); color: var(--ink); font-size: 14.5px; line-height: 1.55;
}
.bf-quote::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tinta-grad); }
.ref-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ref-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); min-width: 0;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--stroke); transition: transform .35s var(--ease-back), box-shadow .2s;
}
.ref-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--stroke-hl), 0 10px 22px -14px rgb(0 0 0 / 45%); }
.ref-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.ref-txt { display: grid; min-width: 0; flex: 1; }
.ref-txt strong { font-size: 13.5px; }
.ref-txt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-go { flex: none; color: var(--muted); transition: color .2s, transform .3s var(--ease-back); }
.ref-card:hover .ref-go { color: var(--ink); transform: translate(2px, -2px); }
@media (max-width: 480px) { .formats { grid-template-columns: 1fr; gap: 8px; } .step { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; } .step-n { width: 24px; height: 24px; font-size: 11px; } }

/* ===== Finanzas ===== */
.lastpay {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 28px; align-items: stretch;
  padding: 22px 24px; border-radius: 18px; background: var(--feature); color: var(--on-feature);
}
.lastpay.is-empty { grid-template-columns: 1fr; }
.lp-eyebrow { font-size: 13px; font-weight: 600; opacity: .8; }
.lp-v { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-sub { margin: 10px 0 0; font-size: 13px; opacity: .78; }
.lp-items { padding-left: 24px; border-left: 1px solid color-mix(in srgb, var(--on-feature) 25%, transparent); }
.lp-h { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; opacity: .8; }
@media (max-width: 720px) {
  .lastpay { grid-template-columns: 1fr; padding: 18px; }
  .lp-items { padding: 14px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--on-feature) 25%, transparent); }
}
.llist { list-style: none; margin: 0; padding: 0 16px; }

/* ===== Formularios de las hojas ===== */
.fld { display: grid; gap: 6px; }
.fld-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.up-form { display: grid; gap: 14px; }
.drop {
  display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: 16px; cursor: pointer; text-align: center;
  box-shadow: inset 0 0 0 1px var(--stroke); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 14px 14px;
  transition: box-shadow .2s, background-color .2s;
}
.drop:hover { box-shadow: inset 0 0 0 1px var(--stroke-hl); }
.drop.has-file { box-shadow: inset 0 0 0 1px var(--stroke-hl); background-color: var(--surface-2); }
.drop-ic { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--feature); color: var(--on-feature); }
.drop-t { font-size: 14px; }
.drop-s { font-size: 12px; color: var(--muted); }
.pay-data { white-space: pre-line; margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: 14px; line-height: 1.6; }

/* ===== Perfil ===== */
.profile-hero { display: flex; align-items: center; gap: 18px; padding-top: clamp(26px, 4vw, 40px); }
.profile-text { min-width: 0; }
.profile-text .display { font-size: clamp(24px, 3.4vw, 34px); }
.profile-text .lead { margin-top: 4px; }
.profile-avatar { position: relative; flex: none; cursor: pointer; border-radius: 50%; transition: transform .45s var(--ease-back); }
.profile-avatar:hover { transform: scale(1.04); }
.profile-cam {
  position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 3px var(--here);
}
@media (max-width: 560px) { .profile-hero { gap: 14px; } .av-xl { width: 56px; height: 56px; font-size: 18px; } }
.group { border-radius: 18px; }
.group > :first-child { border-radius: 18px 18px 0 0; }
.group > :last-child { border-radius: 0 0 18px 18px; }
.g-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--stroke); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none;
}
.g-row:last-child { border-bottom: 0; }
.g-l { flex: none; width: 128px; font-size: 12.5px; color: var(--muted); }
.group .g-in { height: 46px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 500; font-size: 14px; }
.g-foot { display: flex; justify-content: flex-end; padding: 10px 12px; }
.g-btn { cursor: pointer; transition: background .2s; }
.g-btn:hover { background: var(--surface-2); }
.g-btn > svg:last-child { color: var(--muted); transition: transform .35s var(--ease-back); }
.g-btn:hover > svg:last-child { transform: translateX(4px); }
.g-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.g-btn.danger { color: var(--critical-ink); }
.g-btn.danger .g-ic { background: var(--tinta-grad); color: #FF907E; }
@media (max-width: 480px) { .g-l { width: 100px; } }

/* ===== Presupuesto ===== */
.quote { max-width: 720px; display: grid; gap: 10px; padding: clamp(18px, 2.6vw, 26px); border-radius: 18px; }
.ok-line { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--good-ink); }
.q-items { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--stroke); }
.q-items li { display: flex; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--stroke); font-size: 14px; }
.q-items small { color: var(--muted); }
.q-total { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 2px 0; }
.q-total span { font-weight: 600; color: var(--ink-2); }
.q-total strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.05em; }
.q-notes { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; background: var(--frame); color: var(--ink-2); white-space: pre-line; }
.pay-box { padding: 12px 14px; border-radius: 12px; background: var(--frame); }
.pay-box .label { font-size: 13px; color: var(--muted); }
.pay-text { margin: 4px 0 0; white-space: pre-line; }
.q-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 560px) { .q-actions .btn { flex: 1; } }

/* ===== Ventanas (paneles encima de todo; en celular suben desde abajo) =====
   La pantalla de atrás se sigue viendo, desenfocada: así se nota que es un panel encima y no otra página. */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 400; display: grid; align-items: end; justify-items: center;
  background: rgb(8 18 12 / 30%); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05);
  animation: fade .25s ease;
}
.sheet {
  width: min(460px, 100%); max-height: 92dvh; overflow: auto; padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; animation: sheet-up .5s var(--ease-back);
}
.sheet-wide { width: min(640px, 100%); }
.sheet-new { width: min(560px, 100%); }
.sheet-backdrop.closing { animation: fade .22s ease reverse forwards; }
.sheet-backdrop.closing .sheet { animation: sheet-up .22s ease reverse forwards; }
@keyframes sheet-up { from { transform: translateY(70%); opacity: 0; } }
@keyframes sheet-pop { from { transform: translateY(18px) scale(.94); opacity: 0; } }
.sheet-grip { width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 5px; background: var(--line-2); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet-head h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.035em; }
.sheet-body > p { margin: 0 0 14px; font-size: 14px; }
.sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sheet-actions.center { justify-content: center; }
.sheet .llist { padding: 0 14px; box-shadow: inset 0 0 0 1px var(--stroke); background: var(--here); }
@media (min-width: 700px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { border-radius: 22px; padding: 10px 24px 24px; animation: sheet-pop .45s var(--ease-back); }
  .sheet-backdrop.closing .sheet { animation: sheet-pop .2s ease reverse forwards; }
  .sheet-grip { display: none; }
  .sheet-head { margin-top: 10px; }
}
/* Pedido nuevo: su propia página, el formulario en una tarjeta blanca y al lado cómo continúa. */
.new-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.new-card { padding: clamp(20px, 2.6vw, 28px); }
.new-card .done-card { padding: 20px 0 10px; }
.new-card .done-card h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.05em; }
.how-card h2 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.035em; }
.how { list-style: none; margin: 0; padding: 0; display: grid; }
.how li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding-bottom: 16px; }
.how li:not(:last-child)::before { content: ''; position: absolute; left: 14.5px; top: 32px; bottom: 2px; width: 1px; background: var(--line-2); }
.how-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.how strong { display: block; font-size: 13.5px; }
.how small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .new-grid { grid-template-columns: 1fr; } }
/* Formulario del pedido nuevo. */
.new-form { display: grid; gap: 20px; }
.new-sub { margin: -6px 0 0 !important; font-size: 13.5px !important; }
.new-how { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 12.5px !important; color: var(--muted); }
.done-card.in-sheet { padding: 8px 0 4px; }
.done-card.in-sheet h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.05em; }
/* Presupuesto en su ventana: sin tarjeta adentro de la tarjeta. */
.sheet-quote .quote { padding: 0; background: none; box-shadow: none; }
.q-title { margin: 0 0 2px !important; font-size: 16px !important; font-weight: 700; letter-spacing: -.01em; }

/* ===== Entrar ===== */
.auth { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100dvh - 32px); margin-bottom: 16px; padding-bottom: 0; }
.auth-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 48px clamp(32px, 5vw, 72px); }
.auth-hero { position: relative; align-self: flex-start; }
.auth-logo { height: clamp(60px, 6.5vw, 86px); animation: hang-in 1.2s var(--ease-back) both .1s; transform-origin: 6% 55%; }
.auth-logo .logo { animation: float 6s ease-in-out infinite 1.4s; transform-origin: 6% 55%; }
@keyframes hang-in { from { opacity: 0; transform: rotate(-24deg) translateY(-40px); } }
@keyframes float { 50% { transform: rotate(2.5deg) translateY(-6px); } }
.auth-title {
  margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.055em; line-height: .98;
  font-size: clamp(32px, 4vw, 54px); animation: rise .9s var(--ease) both .35s;
  position: relative; align-self: flex-start;
}
.auth-panel { display: grid; place-items: center; padding: 40px 24px; animation: rise .8s var(--ease) both .2s; }
.auth-art { justify-content: center; gap: 64px; padding-bottom: 96px; }
.auth-lockup { display: flex; flex-direction: column; gap: 22px; }
/* El subrayado lima de "en un solo lugar", dibujado a mano. */
.auth-title .mark { position: relative; display: inline-block; }
.mark-line { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; color: var(--lima); overflow: visible; }
.mark-line path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw .9s var(--ease) forwards 1.1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* La escena: un vídeo en revisión, su comentario y la etiqueta del estado. */
.auth-scene { position: relative; flex: none; height: 230px; width: min(440px, 100%); }
.sc-player, .sc-comment {
  position: absolute; background: var(--card-grad); color: var(--tinta); border-radius: 18px; box-shadow: var(--shadow-card);
}
.sc-player {
  top: 0; left: 0; width: min(320px, 73%); padding: 8px; transform: rotate(-1.5deg);
  animation: sc-in .9s var(--ease-back) both .5s, sc-float 7s ease-in-out infinite 1.6s;
}
.sc-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden;
  background: radial-gradient(70% 90% at 80% 10%, rgb(239 250 0 / 22%), transparent 60%), var(--tinta-grad);
}
.sc-thumb::after {   /* un brillo que cruza la imagen */
  content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 254 247 / 9%) 50%, transparent 65%);
  animation: sheen 5s ease-in-out infinite 2s; transform: translateX(-100%);
}
@keyframes sheen { 40%, 100% { transform: translateX(100%); } }
.sc-ver { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--lima); color: var(--noche); font: 800 10px/1.2 var(--font-display); letter-spacing: -.03em; transform: rotate(-4deg); }
.sc-tc { position: absolute; top: 9px; right: 9px; font: 600 9.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: rgb(255 254 247 / 70%); }
.sc-wave { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 34%; display: flex; align-items: flex-end; gap: 3px; }
.sc-wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgb(255 254 247 / 38%); transform-origin: bottom; animation: wave 1.3s ease-in-out infinite alternate var(--d); }
.sc-wave i:nth-child(n+11):nth-child(-n+15) { background: var(--lima); }
@keyframes wave { from { transform: scaleY(.35); } }
.sc-bar { position: relative; height: 4px; margin: 10px 4px 4px; border-radius: 9px; background: rgb(5 26 12 / 12%); }
.sc-prog { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--tinta); transition: width .9s var(--ease); }
.sc-bar b { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--tinta); transition: transform .4s var(--ease-back), background .3s; }
.sc-bar b.on { background: var(--lima); box-shadow: 0 0 0 2px var(--tinta); transform: scale(1.5); }
.sc-comment > * { transition: opacity .35s, transform .35s var(--ease); }
.sc-comment.out > * { opacity: 0; transform: translateY(6px); }
.sc-comment {
  bottom: 0; right: 0; width: min(220px, 52%); display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; transform: rotate(1.5deg);
  animation: sc-in .9s var(--ease-back) both .9s, sc-float 8s ease-in-out infinite reverse 2s;
}
.sc-comment::before {  /* la colita del globo */
  content: ''; position: absolute; left: 22px; top: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px;
}
.sc-comment p { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 500; }
.sc-time { flex: none; padding: 2px 6px; border-radius: 7px; background: var(--tinta); color: var(--lima); font: 700 10px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
/* La etiqueta lima con su etiqueta crema detrás, como el logo. El estado cambia solo. */
.sc-tag {
  position: absolute; top: -26px; left: min(250px, 57%); display: grid; padding: 6px 12px; border-radius: 10px;
  color: var(--noche); font: 800 12.5px/1.1 var(--font-display); letter-spacing: -.04em; white-space: nowrap;
  transform: rotate(4deg); animation: sc-in .9s var(--ease-back) both 1.2s;
}
.sc-tag::before, .sc-tag::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lima-grad); }
.sc-tag::before { background: var(--crema); transform: translate(5px, 5px) rotate(-6deg); }
.sc-tag span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; opacity: 0; animation: tag-cycle 9s var(--ease) infinite; }
.sc-tag span:nth-child(2) { animation-delay: 3s; }
.sc-tag span:nth-child(3) { animation-delay: 6s; }
@keyframes tag-cycle { 0% { opacity: 0; transform: translateY(8px); } 5%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sc-in { from { opacity: 0; translate: 0 30px; scale: .9; } }
@keyframes sc-float { 50% { translate: 0 -8px; } }

/* Abajo, una cinta con lo que editamos. */
.auth-ticker {
  position: absolute; left: 0; right: 0; bottom: 30px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.auth-ticker > div { display: flex; align-items: center; gap: 22px; width: max-content; padding-right: 22px; animation: ticker 32s linear infinite; }
.auth-ticker span { font: 800 18px/1 var(--font-display); letter-spacing: -.05em; text-transform: lowercase; color: rgb(255 254 247 / 22%); }
.auth-ticker i { width: 6px; height: 6px; border-radius: 2px; background: var(--lima); transform: rotate(45deg); opacity: .6; }
@keyframes ticker { to { transform: translateX(-50%); } }

.auth-box {
  width: min(380px, 100%); padding: 28px 26px; border-radius: 20px; position: relative;
}
.auth-box h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.045em; line-height: 1.05; }
.auth-sub { margin: 8px 0 20px; font-size: 14px; color: var(--ink-2); }
.auth-form { display: grid; gap: 12px; }
.auth-form .btn { margin-top: 6px; }
.auth-help { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.auth-help a, .auth-sub a { color: var(--ink); }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; align-content: start; }
  .auth-art { gap: 16px; padding: 32px 20px 4px; }
  .auth-logo { height: 56px; }
  .auth-title { font-size: 26px; }
  .auth-panel { place-items: start center; padding: 20px 16px 32px; }
  .auth-box { padding: 22px 18px; }
  .auth-art { padding-bottom: 4px; }
  .auth-scene, .auth-ticker { display: none; }
}

/* ===== Sticker de un momento (aprobar, etc.) ===== */
.sticker-moment {
  position: fixed; z-index: 1500; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(190px, 55vw); pointer-events: none; transition: opacity .4s, transform .5s var(--ease);
}
.sticker-moment.sm-text { width: auto; }
.tstk {
  display: block; padding: 14px 28px 16px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 7vw, 34px); line-height: 1; letter-spacing: -.045em;
  background: var(--lima); color: var(--tinta);
  box-shadow: 0 0 0 7px var(--crema), 0 22px 34px -12px rgb(0 0 0 / 50%);
  transform: rotate(-5deg); animation: tstk-in .6s var(--ease-back) both;
}
@keyframes tstk-in { from { opacity: 0; transform: rotate(-24deg) scale(.4); } }
.sticker-moment.out { opacity: 0; transform: translate(-50%, 30px) rotate(10deg) scale(.8); }

/* ===== Avisos chiquitos ===== */
#toasts { bottom: calc(108px + env(safe-area-inset-bottom)); }
.toast { padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: var(--tinta); color: var(--crema); box-shadow: 0 0 0 1px rgb(255 254 247 / 14%), 0 14px 30px -10px rgb(5 26 12 / 55%); }
.toast-good { background: var(--primary); color: var(--on-primary); }
.toast-critical { background: var(--critical); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .feature-deco, .auth-logo .logo, .boot img, .ph-ic, .auth-ticker > div, .sc-wave i, .sc-thumb::after { animation: none !important; }
  .sc-tag span:first-child { opacity: 1; }
}

/* ===== Tarjetas blancas =====
   Blanco crema con degradé y letras tinta. Adentro, todo lo que era lima pasa a tinta (nunca lima sobre blanco). */
.panel, .minis, .stage, .d-status, .llist, .quote, .group, .feed, .auth-box,
.side-me, .side-noti, .action:not(.action-approve), .sheet, .script-paper {
  --surface: #FFFEF7;
  --surface-2: #F0EEE3;
  --surface-3: #E3E0D0;
  --here: #FBFAF3;
  --field: #FFFFFF;
  --line: rgb(5 26 12 / 9%);
  --line-2: rgb(5 26 12 / 16%);
  --stroke: rgb(5 26 12 / 13%);
  --stroke-hl: rgb(5 26 12 / 62%);
  --ink: var(--tinta);
  --ink-2: rgb(5 26 12 / 74%);
  --muted: rgb(5 26 12 / 52%);
  --faint: rgb(5 26 12 / 26%);
  --hl: var(--tinta);
  --feature: var(--tinta);
  --on-feature: var(--lima);
  --primary: var(--tinta);
  --on-primary: var(--lima);
  --primary-hover: #0F3A1F;
  --accent: var(--tinta);
  --on-accent: var(--lima);
  --good-ink: #0B5A26;
  --critical: #D8432F;
  --critical-ink: #B8301E;
  --feature-grad: var(--tinta-grad);
  --primary-grad: var(--tinta-grad);
  --accent-grad: var(--tinta-grad);
  background: var(--card-grad);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%), var(--shadow-card);
}
.sheet { box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 60%); }
.side-me:hover { box-shadow: inset 0 0 0 1px var(--stroke-hl), var(--shadow-card); }
.q-notes, .pay-box { background: var(--surface-2); }
.cm.mine .cm-bubble { color: var(--crema); }
.cm.mine .tc-chip { background: var(--lima); color: var(--noche); }
.lv-media { background: var(--frame); }

/* ===== Degradados en todo lo que tiene color ===== */
.feature, .lastpay, .action-approve { background: var(--lima-grad); }
.btn-primary, .seg-pill, .vtab.on, .cm.mine .cm-bubble, .send-btn, .step:focus-within .step-n, .format-check, .profile-cam, .toast-good {
  background: var(--primary-grad);
}
.btn-primary:hover { background: var(--primary-grad); filter: brightness(1.06); }
.chip-hl, .cd.cd-soon, .cd.cd-urgent, .av, .ph-ic, .ok-ic, .tc-chip, .tc-pending, .done-ic, .drop-ic, .f-ic {
  background: var(--feature-grad);
}
.c.l1, .c.l2 { background: var(--accent-grad); }
.av-studio { background: var(--tinta); }
.dock-av.av { background: var(--lima-grad); color: var(--noche); }
.btn-ink { background: var(--tinta-grad); }
.toast { background: var(--tinta-grad); }
.toast-good { background: var(--tinta-grad); color: var(--lima); box-shadow: 0 0 0 1px rgb(239 250 0 / 35%), 0 14px 30px -10px rgb(5 26 12 / 55%); }
.lastpay::before, .feature::before, .action-approve::before { background: linear-gradient(160deg, #FFFFFF 0%, var(--crema) 60%, #EDEAD9 100%); }

/* ===== Barra de progreso del pedido =====
   Toda en lima (un solo color para que el ojo no se pierda): lo hecho lleno, el estado actual con un brillo
   que avanza y lo que falta vacío. Encima de cada tramo, lo que duró ese estado. Si hubo correcciones,
   flechas para pasar de una etapa a otra. */
.pbar {
  width: 100%; padding: 9px 12px 9px; border-radius: 14px; color: var(--crema);
  background: var(--tinta-grad); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 10%), 0 10px 20px -12px rgb(0 0 0 / 60%);
}
.pbar-head { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 3px; }
.pbar-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--lima-grad); box-shadow: 0 0 0 3px rgb(239 250 0 / 18%); animation: live-dot 2.4s ease-in-out infinite; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 6px rgb(239 250 0 / 4%); } }
.pbar-now { font-size: 13px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-pager {
  position: relative; z-index: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 999px;
  background: rgb(255 254 247 / 7%); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 12%);
}
.pbar-arrow {
  width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--lima); cursor: pointer; transition: background .2s, transform .3s var(--ease-back), color .2s;
}
.pbar-arrow:not(.next) svg { transform: rotate(180deg); }
.pbar-arrow:hover:not(:disabled) { background: rgb(239 250 0 / 16%); }
.pbar-arrow:active:not(:disabled) { transform: scale(.85); }
.pbar-arrow:disabled { color: rgb(255 254 247 / 22%); cursor: default; }
.pbar-rn { padding: 0 3px; font-size: 10.5px; font-weight: 600; color: rgb(255 254 247 / 66%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbar-rn b { color: var(--lima); font-weight: 800; }
.pbar-round[hidden] { display: none; }
.pbar-round.in-next { animation: round-in-next .4s var(--ease) both; }
.pbar-round.in-prev { animation: round-in-prev .4s var(--ease) both; }
@keyframes round-in-next { from { opacity: 0; transform: translateX(16px); } }
@keyframes round-in-prev { from { opacity: 0; transform: translateX(-16px); } }
.pbar-times, .pbar-track, .pbar-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
.pbar-times span { height: 14px; font-size: 10px; font-weight: 700; color: rgb(255 254 247 / 58%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar-times span.live { color: var(--lima); }
.pbar-track { margin-top: 2px; }
.pbar-track i { display: block; height: 7px; border-radius: 4px; background: rgb(255 254 247 / 12%); overflow: hidden; position: relative; }
.pbar-track i.on::after, .pbar-track i.live::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--lima-grad);
  box-shadow: 0 0 10px rgb(239 250 0 / 40%);
  transform-origin: left; animation: seg-in .5s var(--ease) both; animation-delay: calc(.15s + var(--i) * .12s);
}
.pbar-track i.live::after {
  background: linear-gradient(100deg, transparent 0 32%, rgb(255 255 255 / 75%) 46%, transparent 60% 100%) 0 0 / 240% 100% no-repeat, var(--lima-grad);
  animation: seg-in .5s var(--ease) both calc(.15s + var(--i) * .12s), shine 2.4s linear infinite 1.2s;
}
@keyframes seg-in { from { transform: scaleX(0); } }
@keyframes shine { from { background-position: 140% 0, 0 0; } to { background-position: -140% 0, 0 0; } }
.pbar-steps { margin-top: 5px; }
.pbar-steps span { font-size: 10px; font-weight: 600; color: rgb(255 254 247 / 36%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-steps span.on { color: rgb(255 254 247 / 78%); }
.pbar-steps span.live { color: var(--lima); font-weight: 700; }
.pbar-big { padding: 14px 16px 13px; border-radius: 16px; }
.pbar-big .pbar-head { margin-bottom: 6px; }
.pbar-big .pbar-now { font-size: 15px; }
.pbar-big .pbar-times span { height: 17px; font-size: 12px; }
.pbar-big .pbar-track i { height: 10px; border-radius: 5px; }
.pbar-big .pbar-steps span { font-size: 12px; }
.pbar-big .pbar-arrow { width: 26px; height: 26px; }
.pbar-big .pbar-rn { font-size: 12px; padding: 0 5px; }

/* ===== Pedidos: filtros (pastillas separadas, todas con el ícono en lima) ===== */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.fpill {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 7px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tinta-grad); color: var(--crema); font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 14%), 0 12px 24px -14px rgb(0 0 0 / 80%);
  transition: transform .35s var(--ease-back), box-shadow .25s, background .25s, color .25s;
}
.fpill:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 45%), 0 14px 26px -14px rgb(0 0 0 / 85%); }
.fpill:active { transform: scale(.97); }
.fpill-ic {
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(239 250 0 / 10%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 38%);
}
.fpill.on { background: var(--lima-grad); color: var(--noche); box-shadow: 0 0 0 3px rgb(239 250 0 / 18%), 0 14px 26px -14px rgb(0 0 0 / 80%); }
.fpill.on .fpill-ic { background: var(--tinta-grad); color: var(--lima); box-shadow: none; }
@media (max-width: 640px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -15px; padding: 4px 15px 8px; }
  .fpill { flex: none; }
}

/* ===== Pedidos: una tarjeta por pedido, con bloques separados =====
   Toda la tarjeta abre el pedido. Los finalizados quedan apagados (ya no están activos). */
.olist2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ocard { position: relative; margin-right: 222px; animation: rise .55s var(--ease) both; animation-delay: calc(.06s + var(--i) * .05s); }
#olist.swap .ocard { animation-delay: calc(var(--i) * .04s); }
.oc-body {
  --surface: #FFFEF7; --surface-2: #F0EEE3; --surface-3: #E3E0D0; --here: #FBFAF3;
  --line: rgb(5 26 12 / 10%); --line-2: rgb(5 26 12 / 16%); --stroke: rgb(5 26 12 / 13%); --stroke-hl: rgb(5 26 12 / 62%);
  --ink: var(--tinta); --ink-2: rgb(5 26 12 / 74%); --muted: rgb(5 26 12 / 52%);
  --primary: var(--tinta); --on-primary: var(--lima); --primary-grad: var(--tinta-grad); --feature-grad: var(--tinta-grad);
  position: relative; z-index: 1; display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(270px, 1.25fr) minmax(190px, .85fr);
  border-radius: 18px; background: var(--card-grad); color: var(--ink); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%), var(--shadow-card);
  transition: transform .35s var(--ease), box-shadow .3s;
}
.ocard:hover .oc-body { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%), 0 26px 40px -18px rgb(0 0 0 / 75%), 0 3px 8px rgb(0 0 0 / 22%); }
.oc-cell { display: flex; align-items: center; min-width: 0; padding: 16px 20px; }
.oc-cell + .oc-cell { border-left: 1px solid var(--line); }
.oc-main { gap: 14px; padding-left: 22px; }
/* El número de pedido: la punta izquierda de la tarjeta, toda negra, con sombra sobre lo blanco: queda "por encima". */
.oc-num {
  position: relative; z-index: 2; display: grid; place-items: center; pointer-events: none;
  background: var(--tinta-grad); color: var(--lima);
  font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  box-shadow: 9px 0 16px -6px rgb(5 26 12 / 42%), 2px 0 4px -1px rgb(5 26 12 / 30%);
  border-radius: 18px 0 0 18px;
  transition: color .3s, text-shadow .3s;
}
.ocard:hover .oc-num { text-shadow: 0 0 14px rgb(239 250 0 / 45%); }
.oc-title { display: grid; gap: 2px; min-width: 0; }
.oc-link { display: block; min-width: 0; color: inherit; text-decoration: none; }
.oc-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.oc-link:focus-visible { outline: none; }
.ocard:has(.oc-link:focus-visible) .oc-body { box-shadow: inset 0 0 0 2px var(--tinta), var(--shadow-card); }
.oc-title strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.oc-title small { font-size: 12.5px; color: var(--muted); }
.oc-status { padding: 12px 16px; }
.oc-meta { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.om { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.om svg { color: var(--muted); }
.om.has-new { color: var(--ink); font-weight: 600; }
.om.has-new svg { color: var(--ink); }
/* "Sin ver": un punto lima que late y un cartel mínimo al costado. */
.om-new {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px 0 7px; margin-left: 2px; border-radius: 999px;
  background: var(--tinta-grad); color: var(--crema); font-size: 10.5px; font-weight: 600; letter-spacing: .005em;
  animation: pop-in .5s var(--ease-back) both .45s;
}
.om-new i { width: 6px; height: 6px; border-radius: 50%; background: var(--lima); animation: new-dot 1.8s ease-out infinite; }
@keyframes new-dot { 0% { box-shadow: 0 0 0 0 rgb(239 250 0 / 60%); } 70%, 100% { box-shadow: 0 0 0 6px rgb(239 250 0 / 0%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.7); } }

/* Finalizados: tarjeta apagada, gris verdoso, con la barra también apagada. */
.ocard.is-final .oc-body {
  --ink: rgb(5 26 12 / 70%); --ink-2: rgb(5 26 12 / 58%); --muted: rgb(5 26 12 / 44%); --line: rgb(5 26 12 / 9%);
  background: linear-gradient(180deg, #DCDFD5 0%, #CBD0C3 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%), 0 14px 26px -18px rgb(0 0 0 / 60%);
}
.ocard.is-final .oc-num { background: linear-gradient(160deg, #34473A 0%, #1F2C24 100%); color: #C9D06A; box-shadow: 8px 0 14px -6px rgb(5 26 12 / 30%), 2px 0 4px -1px rgb(5 26 12 / 22%); }
.ocard.is-final .pbar { background: linear-gradient(160deg, #2E4034 0%, #1D2B22 100%); }
.ocard.is-final .pbar-track i.on::after { background: linear-gradient(135deg, #E2E88C 0%, #C3CB5C 100%); box-shadow: none; }
.ocard.is-final .pbar-dot { animation: none; background: #C9D06A; box-shadow: none; }
.ocard.is-final .pbar-steps span.on { color: rgb(255 254 247 / 62%); }
.ocard.is-final:hover .oc-body { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%), 0 22px 34px -18px rgb(0 0 0 / 65%); }

/* La etiqueta del plazo: escondida detrás de la tarjeta; al pasar el cursor asoma por la derecha,
   lima con degradé y una etiqueta crema detrás (como el logo), con un reloj de arena que gira cada pocos segundos. */
.dl {
  position: absolute; z-index: 0; top: 50%; right: 0; width: 262px; height: 68px; pointer-events: none;
  transform: translate(-56px, -50%); transition: transform .6s var(--ease-back);
}
.ocard:hover .dl, .ocard:focus-within .dl { transform: translate(208px, -50%); }
.dl-back {
  position: absolute; inset: 4px 2px; border-radius: 0 16px 16px 0;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--crema) 60%, #E8E4D2 100%);
  transform: rotate(6deg) translate(6px, -3px); box-shadow: 0 10px 20px -10px rgb(0 0 0 / 60%);
}
.dl-front {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 64px;
  border-radius: 0 16px 16px 0; background: var(--lima-grad); color: var(--noche);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%), 0 14px 26px -12px rgb(0 0 0 / 70%);
}
.dl-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.dl-ic svg { animation: hourglass 3.2s var(--ease) infinite; }
.dl-stop .dl-ic svg, .dl-done .dl-ic svg { animation: none; }
@keyframes hourglass { 0%, 70% { transform: rotate(0deg); } 86%, 100% { transform: rotate(180deg); } }
.dl-txt { display: grid; gap: 1px; min-width: 0; line-height: 1.15; }
.dl-txt strong { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.04em; white-space: nowrap; }
.dl-txt small { font-size: 10.5px; font-weight: 600; opacity: .72; line-height: 1.2; }
.dl-wait .dl-txt strong, .dl-stop .dl-txt strong, .dl-done .dl-txt strong { font-size: 13px; letter-spacing: -.025em; white-space: normal; line-height: 1.1; }
.dl-late .dl-txt strong { color: #7A1A0C; }

/* Pantallas táctiles o angostas: no hay "pasar el cursor"; la etiqueta queda a la vista, colgando debajo de la tarjeta. */
@media (hover: none), (max-width: 1320px) {
  .ocard { margin-right: 0; }
  .dl { position: relative; display: block; top: auto; right: auto; width: max-content; max-width: 280px; height: auto; transform: none; margin: -12px 18px 0 auto; }
  .ocard:hover .dl, .ocard:focus-within .dl { transform: none; }
  .dl-back { display: none; }
  .dl-front { position: relative; padding: 18px 14px 9px; border-radius: 0 0 14px 14px; }
  .dl-ic { width: 26px; height: 26px; }
  .dl-txt strong { font-size: 14px; }
}
/* La línea que separa los que están en marcha de los finalizados. */
.o-divider { display: flex; align-items: center; gap: 14px; margin: 14px 2px 2px; color: rgb(255 254 247 / 62%); }
.o-divider::before, .o-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgb(255 254 247 / 26%)); }
.o-divider::after { background: linear-gradient(90deg, rgb(255 254 247 / 26%), transparent); }
.o-divider span { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -.03em; }
.olist2 > .o-divider:first-child { margin-top: 0; }
@media (hover: hover) and (min-width: 1321px) { .o-divider { margin-right: 222px; } }

/* Pedidos por presupuesto: uno por vez, con flechas para pasar de uno a otro. */
.qswitch {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius);
  background: var(--tinta-grad); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 14%), 0 14px 28px -16px rgb(0 0 0 / 80%);
}
.qs-arrow {
  flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgb(239 250 0 / 10%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 38%);
  transition: transform .3s var(--ease-back), background .2s, color .2s;
}
.qs-arrow:not(.next) svg { transform: rotate(180deg); }
.qs-arrow:hover:not(:disabled) { background: var(--lima-grad); color: var(--noche); transform: scale(1.06); }
.qs-arrow:active:not(:disabled) { transform: scale(.94); }
.qs-arrow:disabled { opacity: .3; cursor: default; }
.qs-mid { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: center; }
.qs-eyebrow { display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lima); }
.qs-eyebrow b { font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: rgb(239 250 0 / 12%); font-size: 11px; }
.qs-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; text-transform: lowercase; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-mid small { color: var(--muted); font-size: 13px; }
.qswitch.is-off .qs-title { font-size: 15px; color: var(--muted); }
#qswitch { margin-bottom: 14px; }
/* El botón a la carpeta «Editados» del presupuesto en Google Drive: todos los vídeos que le entregamos. */
.qs-drive {
  justify-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgb(239 250 0 / 10%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 38%);
  font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, transform .3s var(--ease-back);
}
.qs-drive:hover { background: var(--lima-grad); color: var(--noche); transform: translateY(-1px); }
.qs-drive svg:last-child { opacity: .7; }
@media (max-width: 640px) {
  .qswitch { gap: 8px; padding: 8px; }
  .qs-arrow { width: 40px; height: 40px; }
  .qs-title { font-size: 16px; }
}

/* Páginas (12 pedidos por página). */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; }
.pg {
  min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  background: var(--tinta-grad); color: var(--crema); font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 14%); transition: transform .3s var(--ease-back), box-shadow .2s;
}
.pg:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 45%); }
.pg.on { background: var(--lima-grad); color: var(--noche); box-shadow: 0 0 0 3px rgb(239 250 0 / 18%); }
.pg-arrow { color: var(--lima); }
.pg-arrow:not(.next) svg { transform: rotate(180deg); }
.pg:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (min-width: 1321px) { .pager { margin-right: 222px; } }

@media (max-width: 900px) {
  .oc-body { grid-template-columns: 58px minmax(0, 1fr); }
  .oc-num { grid-row: 1 / span 3; font-size: 20px; }
  .oc-main, .oc-status, .oc-meta { grid-column: 2; }
  .oc-main { padding-left: 18px; }
  .oc-meta { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-start; }
  .oc-cell + .oc-cell { border-left: 0; border-top: 1px solid var(--line); }
}

/* ===== Pedidos simples: tres grupos (para revisar · en curso · finalizados) y una frase por pedido ===== */
.os-group + .os-group { margin-top: 30px; }
.os-group .sec-h h2 { color: var(--crema); font-size: 18px; }
.os-group .sec-note { color: rgb(255 254 247 / 58%); }
.ocard.os { margin-right: 0; }
.os-body { grid-template-columns: 74px minmax(0, 1.25fr) minmax(230px, 1fr) 150px; }
.os-state { gap: 14px; }
.os-dots { display: inline-flex; gap: 4px; flex: none; }
.os-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.os-dots i.on { background: var(--tinta); box-shadow: none; }
.os-dots i.now { background: var(--tinta); box-shadow: 0 0 0 3px rgb(5 26 12 / 14%); animation: os-now 2s ease-in-out infinite; }
@keyframes os-now { 50% { box-shadow: 0 0 0 5px rgb(5 26 12 / 6%); } }
.os-txt { display: grid; gap: 1px; min-width: 0; }
.os-txt strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.os-txt small { font-size: 12.5px; color: var(--muted); }
.os-late .os-txt small { color: #B3261E; font-weight: 600; }
.os-go { justify-content: center; }
.os-btn { pointer-events: none; height: 38px; }
.os-chev { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--stroke); transition: background .2s, transform .3s var(--ease-back); }
.ocard.os:hover .os-chev { background: var(--tinta-grad); color: var(--lima); transform: translateX(2px); }
/* Para revisar: la tarjeta lleva un filo tinta (nunca lima sobre crema) y el número late. */
.ocard.is-ask .oc-body { box-shadow: inset 0 0 0 2px var(--tinta), var(--shadow-card); }
.ocard.is-ask .oc-num { text-shadow: 0 0 14px rgb(239 250 0 / 45%); }
.ocard.is-ask .os-txt strong { font-weight: 750; }
.ocard.is-final .os-dots i.on { background: #6F7D63; }
.os-batch .oc-num { color: var(--lima); }
.os-more { margin: 14px auto 0; display: flex; background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 30%); }
.os-more:hover { box-shadow: inset 0 0 0 1px var(--lima); color: var(--lima); }
@media (max-width: 900px) {
  .os-body { grid-template-columns: 58px minmax(0, 1fr); }
  .os-body .oc-num { grid-row: 1 / span 3; }
  .os-body .oc-main, .os-body .os-state, .os-body .os-go { grid-column: 2; }
  .os-go { justify-content: flex-start; padding-top: 0; border-top: 0 !important; }
  .os-go:empty, .os-go:has(.os-chev) { display: none; }
}

/* ===== Trabajos: una carpeta por presupuesto, con forma de carpeta =====
   Atrás la pestaña (tinta oscura), adentro unas hojas crema que asoman y adelante la tapa tinta con el nombre.
   Al pasar el cursor la tapa se abre un poco y las hojas suben. Detalles lima solo sobre tinta. */
.folds { list-style: none; margin: 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 180px)); gap: 28px 20px; }
.fold-li { animation: rise .55s var(--ease) both; animation-delay: calc(.05s + var(--i) * .06s); }
.fold { position: relative; display: block; aspect-ratio: 5 / 4; color: var(--crema); text-decoration: none; perspective: 900px; }
.fold-back { position: absolute; inset: 0; border-radius: 4px 14px 14px 14px; background: linear-gradient(160deg, #2A7243 0%, #154A28 100%);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 8%); }
.fold-back::before { content: ''; position: absolute; left: 0; top: -10px; width: 44%; height: 20px; border-radius: 10px 12px 0 0;
  background: linear-gradient(160deg, #2F7C4A 0%, #2A7243 100%); clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.fold-paper { position: absolute; left: 9%; right: 9%; top: 9%; height: 62%; border-radius: 7px;
  background: var(--card-grad); box-shadow: 0 6px 14px -8px rgb(0 0 0 / 60%); transition: transform .5s var(--ease-back); opacity: 0; }
.fold.has-papers .fold-paper { opacity: 1; }
.fold-paper.p1 { transform: rotate(-3deg); }
.fold-paper.p2 { left: 13%; right: 6%; top: 13%; transform: rotate(2.5deg); background: linear-gradient(180deg, #F4F1E4 0%, #E6E2D0 100%); }
.fold-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 10px 12px 12px; border-radius: 13px; background: var(--tinta-grad); transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 rgb(255 254 247 / 14%), inset 0 0 0 1px rgb(255 254 247 / 8%), 0 22px 36px -18px rgb(0 0 0 / 85%);
  transition: transform .5s var(--ease-back), box-shadow .3s;
}
.fold:hover .fold-front, .fold:focus-visible .fold-front { transform: rotateX(-16deg); box-shadow: inset 0 1px 0 rgb(255 254 247 / 18%), inset 0 0 0 1px rgb(239 250 0 / 35%), 0 28px 40px -18px rgb(0 0 0 / 90%); }
.fold:hover .fold-paper.p1 { transform: translateY(-14px) rotate(-5deg); }
.fold:hover .fold-paper.p2 { transform: translateY(-8px) rotate(4deg); }
.fold:focus-visible { outline: none; }
.fold-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: auto; }
.fold-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lima); }
.fold-ask { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; flex: none;
  background: var(--lima-grad); color: var(--noche); font-size: 10px; font-weight: 700; animation: pop-in .5s var(--ease-back) both .4s;
  position: absolute; z-index: 2; top: -9px; right: 8px; box-shadow: 0 6px 12px -6px rgb(0 0 0 / 70%); }
.fold-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.045em; line-height: 1.05;
  text-transform: lowercase; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.fold-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgb(255 254 247 / 66%); }
.fold.has-ask .fold-front { box-shadow: inset 0 1px 0 rgb(255 254 247 / 14%), inset 0 0 0 1.5px rgb(239 250 0 / 55%), 0 22px 36px -18px rgb(0 0 0 / 85%); }

/* Dentro de la carpeta: dónde subir los brutos (tinta con detalles lima). */
.raw-drop { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: 20px; background: var(--tinta-grad); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 10%), 0 22px 36px -20px rgb(0 0 0 / 80%); }
.raw-ic { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--lima);
  box-shadow: inset 0 0 0 1.5px rgb(239 250 0 / 45%); background: rgb(239 250 0 / 6%); }
.raw-txt { flex: 1 1 260px; display: grid; gap: 3px; min-width: 0; }
.raw-txt strong { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.045em; text-transform: lowercase; }
.raw-txt small { font-size: 13px; color: rgb(255 254 247 / 70%); line-height: 1.4; }
.raw-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.raw-ghost { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 30%); }
.raw-ghost:hover { color: var(--lima); box-shadow: inset 0 0 0 1px var(--lima); }
@media (max-width: 560px) {
  .folds { grid-template-columns: repeat(2, minmax(0, 170px)); gap: 26px 14px; }
  .raw-btns, .raw-btns .btn { width: 100%; }
}


/* ===== Finanzas ===== */
.fin-left { display: grid; align-content: start; }
.pay-scroll { max-height: 360px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(5 26 12 / 20%) transparent; }
.fx-note { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 12.5px; color: rgb(255 254 247 / 60%); }
/* Una fila: círculo tinta con el ícono en lima, lo principal en negrita, un dato y la fecha a la derecha. */
.flist > li + li { border-top: 1px solid var(--stroke); }
.frow {
  width: 100%; display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.frow { cursor: pointer; transition: transform .35s var(--ease); }
button.frow:hover { transform: translateX(4px); }
.f-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--lima); }
.f-ic.rechazado { color: #FF907E; }
.f-main { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.f-mid { min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-end { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; transition: transform .35s var(--ease-back), color .2s; }
button.frow:hover .f-end svg { color: var(--ink); }
.lp-quote {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--tinta-grad); color: var(--crema); font: inherit; text-align: left; box-shadow: 0 12px 22px -12px rgb(0 0 0 / 70%);
  transition: transform .35s var(--ease-back), box-shadow .25s;
}
.lp-quote:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgb(0 0 0 / 75%); }
.lp-quote-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lima-grad); color: var(--noche); }
.lp-quote strong { font-size: 15px; font-weight: 700; }
.lp-quote-go { color: var(--lima); transition: transform .35s var(--ease-back); }
.lp-quote:hover .lp-quote-go { transform: translateX(4px); }
.lp-noquote { margin: 0; font-size: 13px; font-weight: 600; opacity: .75; }
/* El comprobante en su ventana. */
.rc-view { display: grid; gap: 14px; }
.rc-media { display: block; width: 100%; max-height: 52dvh; object-fit: contain; border: 0; border-radius: 14px; background: var(--surface-2); }
iframe.rc-media { height: 52dvh; }

/* ===== Presupuesto (solo lectura) ===== */
.q-head { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.q-head + .q-items { margin-top: 0; }
.q-hint { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* ===== Perfil: preferencias ===== */
.g-select {
  appearance: none; cursor: pointer; padding-right: 22px !important; text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23051A0C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 2px center !important;
}
.g-note { margin: 0; padding: 10px 16px 14px; font-size: 12px; color: var(--muted); }

/* ===== Acceso único: elegir si es cliente o del equipo ===== */
.auth-box.has-role > .seg { display: flex; width: 100%; margin-bottom: 22px; }
.auth-box.has-role > .seg button { flex: 1; justify-content: center; }
#auth-inner.swap { animation: rise .45s var(--ease) both; }

.fin-cols .sec-h { align-items: center; min-height: 32px; }

/* ===== Finanzas: presupuestos y comprobantes en la misma fila ===== */
.fin-sync .frow { min-height: 56px; }
.f-ic.slot { background: none; border: 1.5px dashed rgb(5 26 12 / 38%); color: var(--tinta); }
button.frow:hover .f-ic.slot { border-color: var(--tinta); background: rgb(239 250 0 / 35%); }
.up-quote { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.up-quote .muted { margin-left: auto; font-size: 13px; }
@media (max-width: 860px) { .fin-sync { gap: 22px; } }

/* ===== Notificaciones: borrar una a una (deslizando en el celular, con la ✕ en la compu) ===== */
.swipe-item { position: relative; overflow: hidden; margin: 0 -6px; border-radius: 12px; transition: height .3s var(--ease), opacity .25s ease; animation: rise .45s var(--ease) both; }
.swipe-item + .swipe-item { box-shadow: 0 -1px 0 var(--line); }
.swipe-item .noti { position: relative; z-index: 1; margin: 0; background: var(--surface); animation: none; touch-action: pan-y; }
.swipe-item .noti + .noti, .swipe-item + .swipe-item .noti { box-shadow: none; }
.swipe-del {
  position: absolute; inset: 0 0 0 auto; width: 88px; display: grid; place-content: center; justify-items: center; gap: 3px;
  border: 0; background: #D8432F; color: #fff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.swipe-x {
  position: absolute; z-index: 2; top: 9px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); cursor: pointer; opacity: 0;
  transition: opacity .2s, background .2s, color .2s;
}
.swipe-x:hover { background: #D8432F; color: #fff; }
@media (hover: hover) {
  .swipe-item:hover .swipe-x, .swipe-x:focus-visible { opacity: 1; }
  .swipe-item .noti { padding-right: 28px; }
}
@media (hover: none) { .swipe-x { display: none; } }
.swipe-item.gone { height: 0 !important; opacity: 0; }

/* ===== Columna de correcciones (portal y panel) ===== */
.fx-head { gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--stroke); flex-wrap: wrap; }
.fx-ic { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); transform: rotate(-6deg); }
.fx-title { display: grid; gap: 1px; min-width: 0; flex: 1; }
.fx-title h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.04em; }
.fx-title small { font-size: 11.5px; color: var(--muted); }
.fx-count { background: var(--tinta-grad); color: var(--lima); }
.feed-list:has(.fx) { gap: 8px; }
.fx {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--stroke); animation: rise .45s var(--ease) var(--d, 0ms) both;
}
.fx-n {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  font-family: var(--font-display); font-weight: 800; font-size: 12px; background: var(--tinta-grad); color: var(--lima);
}
.fx-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.fx-top { display: flex; align-items: center; gap: 8px; }
.fx-tc { margin: 0; font-size: 11.5px; font-weight: 700; background: var(--tinta-grad); color: var(--lima); }
.fx-tc:hover { background: var(--tinta); color: var(--lima); }
.fx-gen { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fx-ago { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.fx-body p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.fx-body p a { color: inherit; }
.fx.resolved { opacity: .62; }
.fx.resolved .fx-body p { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.fx-done, .fx-resolve { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.fx-resolve { margin-top: 2px; padding: 4px 10px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; background: transparent; box-shadow: inset 0 0 0 1px var(--stroke); transition: background .2s, color .2s; }
.fx-resolve:hover { box-shadow: inset 0 0 0 1px var(--stroke-hl); }
.fx-resolve.on { background: var(--tinta-grad); color: var(--lima); box-shadow: none; }
.fx-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 14px; text-align: center; }
.fx-empty strong { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.04em; color: var(--ink); }
.fx-empty p { margin: 0; max-width: 270px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.fx-art { display: flex; align-items: center; gap: 8px; width: 190px; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: var(--tinta-grad); box-shadow: 0 14px 26px -16px rgb(5 26 12 / 70%); transform: rotate(-3deg); }
.fx-play { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lima); }
.fx-play .tri { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent var(--tinta); }
.fx-line { position: relative; flex: 1; height: 4px; border-radius: 99px; background: rgb(255 254 247 / 22%); }
.fx-line::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: rgb(255 254 247 / 55%); transform-origin: left; animation: fx-scrub 4.5s ease-in-out infinite; }
.fx-line i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px rgb(239 250 0 / 25%); animation: fx-mark 4.5s var(--ease-back) infinite both; }
.fx-line i:nth-child(1) { left: 22%; animation-delay: .6s; }
.fx-line i:nth-child(2) { left: 55%; animation-delay: 1.5s; }
.fx-line i:nth-child(3) { left: 82%; animation-delay: 2.4s; }
@keyframes fx-scrub { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes fx-mark { 0% { transform: scale(0); } 8%, 80% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .fx-line::before, .fx-line i, .fx { animation: none !important; } }

/* ===== Inicio del cliente: solo para mirar ===== */
.hm { display: grid; gap: 18px; }
.hm-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.hh {
  position: relative; overflow: hidden; isolation: isolate; min-height: 250px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(150px, .7fr);
  align-items: center; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: var(--tinta-grad); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 10%);
}
.hh-glow { position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; right: -10%; top: -40%; border-radius: 50%; background: radial-gradient(circle, rgb(239 250 0 / 22%), transparent 65%); animation: ps-drift 9s ease-in-out infinite alternate; }
.hh-copy { display: grid; gap: 10px; justify-items: start; min-width: 0; animation: rise .6s var(--ease) both; }
.hh-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.02; letter-spacing: -.045em; }
.hh-text { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: rgb(255 254 247 / 78%); }
.hh-extra { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--lima); }
.hh-art { position: relative; display: grid; place-items: center; min-height: 160px; }
.hh-art .sticker { display: block; height: auto; filter: drop-shadow(0 16px 22px rgb(0 0 0 / 35%)); }
.hh-main { width: min(220px, 100%); transform-origin: 50% 0; animation: hang-in .9s var(--ease-back) both, float 4.5s ease-in-out .9s infinite; }
.hh-side { position: absolute; right: 0; bottom: 0; width: min(96px, 42%); animation: ps-pop .7s var(--ease-back) .5s both, ps-wobble 3.2s ease-in-out 1.3s infinite; }
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs { display: grid; align-content: space-between; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke); }
.hs-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.hs strong { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.05em; }
.hs-l { font-size: 12.5px; color: var(--muted); }
@media (max-width: 1100px) { .hm-top { grid-template-columns: minmax(0, 1fr); } .hs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .hh { grid-template-columns: 1fr; }
  .hh-art { min-height: 120px; order: -1; }
  .hh-main { width: 170px; }
}
@media (prefers-reduced-motion: reduce) { .hh-glow, .hh-main, .hh-side { animation: none !important; } }

/* ===== Autocompletado del navegador =====
   Chrome pinta de gris azulado los campos que completa solo (email, contraseña). Se tapa con el fondo y el texto
   del propio campo, así se ven igual que el resto. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.in:-webkit-autofill, .input:-webkit-autofill, .select:-webkit-autofill, .textarea:-webkit-autofill {
  box-shadow: inset 0 0 0 1px var(--stroke), inset 0 0 0 1000px var(--field) !important;
}
.in:-webkit-autofill:focus, .input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1px var(--stroke-hl), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 0 0 1000px var(--field) !important;
}
.g-in:-webkit-autofill { box-shadow: inset 0 0 0 1000px var(--here, var(--surface)) !important; }

/* ===== Servicios y pasos de un pedido (guion → grabación → vídeo → miniatura → publicación) =====
   Los servicios del presupuesto agregan pasos a sus pedidos. Arriba del pedido, una tira con los pasos (tocando uno se
   ve ese paso); en la barra de progreso, un caminito con todos; y el guion como una hoja, la miniatura en su marco. */

/* Pastillas con los servicios (presupuesto, selector de presupuestos…) */
.svc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.svc-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--stroke);
}
.svc-chip svg { color: var(--hl); }
.svc-mini { margin-top: 6px; }
.svc-mini .svc-chip { height: 21px; font-size: 10.5px; padding: 0 7px 0 6px; }
.q-services { display: grid; gap: 8px; }
.q-services .label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Caminito de pasos dentro de la barra de progreso (fondo tinta: detalles lima) */
.pbar-path { display: flex; align-items: center; margin: 1px 0 8px; }
.pp {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: rgb(255 254 247 / 38%); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 18%);
}
.pp + .pp { margin-left: 18px; }
.pp + .pp::before {
  content: ''; position: absolute; right: calc(100% + 3px); top: 50%; width: 12px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: rgb(255 254 247 / 16%);
}
.pp.done { background: var(--lima-grad); color: var(--noche); box-shadow: none; }
.pp.done + .pp::before { background: var(--lima); }
.pp.now { color: var(--lima); box-shadow: inset 0 0 0 1.5px var(--lima), 0 0 0 3px rgb(239 250 0 / 14%); }
.pp.ask::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lima); box-shadow: 0 0 0 2px var(--noche);
}
.pbar-big .pp { width: 26px; height: 26px; }

/* Tira de pasos arriba del pedido (sobre el marco oscuro) */
.steps-nav {
  display: flex; gap: 8px; margin-top: clamp(16px, 2.4vw, 22px); overflow-x: auto; scrollbar-width: none;
  padding: 2px; counter-reset: sn;
}
.steps-nav::-webkit-scrollbar { display: none; }
.sn {
  position: relative; flex: 1 1 0; min-width: 132px; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px;
  border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: inherit;
  background: var(--tinta-grad); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 12%), 0 12px 24px -16px rgb(0 0 0 / 80%);
  transition: transform .35s var(--ease-back), box-shadow .25s, background .25s;
  animation: sn-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes sn-in { from { opacity: 0; transform: translateY(6px); } }
.sn + .sn::before {
  content: ''; position: absolute; left: -8px; top: 50%; width: 8px; height: 2px; margin-top: -1px; background: rgb(255 254 247 / 18%);
}
.sn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 40%), 0 14px 26px -16px rgb(0 0 0 / 85%); }
.sn-ic {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(239 250 0 / 10%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 34%);
}
.sn.done .sn-ic { background: var(--lima-grad); color: var(--noche); box-shadow: none; }
.sn.now .sn-ic { box-shadow: inset 0 0 0 1.5px var(--lima), 0 0 0 4px rgb(239 250 0 / 12%); }
.sn:not(.done):not(.now) .sn-ic { color: rgb(255 254 247 / 45%); background: transparent; box-shadow: inset 0 0 0 1px rgb(255 254 247 / 18%); }
.sn-dot {
  position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--lima); box-shadow: 0 0 0 2px var(--noche); animation: live-dot 2.4s ease-in-out infinite;
}
.sn-t { display: grid; min-width: 0; line-height: 1.2; }
.sn-t b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sn-t small { font-size: 11.5px; color: rgb(255 254 247 / 58%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn.now .sn-t small { color: var(--lima); }
.sn.on { background: var(--lima-grad); color: var(--noche); box-shadow: 0 0 0 3px rgb(239 250 0 / 16%), 0 14px 26px -14px rgb(0 0 0 / 80%); }
.sn.on .sn-ic, .sn.on:not(.done):not(.now) .sn-ic { background: var(--tinta-grad); color: var(--lima); box-shadow: none; }
.sn.on .sn-t small { color: rgb(9 42 20 / 70%); }
.sn.on .sn-dot { background: var(--noche); box-shadow: 0 0 0 2px var(--lima); }
@media (max-width: 640px) {
  .steps-nav { margin-inline: -15px; padding: 2px 15px 6px; }
  .sn { flex: none; min-width: 0; }
}

/* Un paso que no es el vídeo: una sola columna, más angosta */
.step-detail .d-main { max-width: 860px; }

/* El guion, como una hoja */
.script-paper { display: grid; gap: 14px; padding: clamp(18px, 2.6vw, 28px); border-radius: 20px; }
.sp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-head .grow { display: grid; min-width: 0; }
.sp-head strong { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.035em; text-transform: lowercase; }
.sp-head small { font-size: 12px; color: var(--muted); }
.sp-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima); }
.sp-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.sp-body {
  padding: 4px 2px 0; border-top: 1px dashed var(--line-2); padding-top: 16px;
  font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
  max-height: 70vh; overflow-y: auto;
}
.sp-empty { margin: 0; font-size: 13.5px; color: var(--muted); }

/* La miniatura en su marco (16:9 o 9:16) */
.thumb-frame {
  position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: var(--tinta-grad);
  aspect-ratio: 16 / 9; box-shadow: inset 0 0 0 1px var(--stroke);
}
.thumb-frame.v { aspect-ratio: 9 / 16; width: min(100%, calc(62vh * 9 / 16)); margin-inline: auto; }
.thumb-frame img { display: block; width: 100%; height: 100%; object-fit: cover; animation: tf-in .5s var(--ease) both; }
@keyframes tf-in { from { opacity: 0; transform: scale(1.03); } }
.tf-none { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(239 250 0 / 60%); }

/* Mandar el material grabado */
.rec-form { display: grid; gap: 12px; }
.rec-card .sec-h { margin-bottom: 14px; }

/* Lo que pidió cambiar, sobre el marco */
.fb-block .bf-l { color: rgb(255 254 247 / 62%); }

/* Inicio: la cuenta atrás debajo del texto */
.hh-due { margin-top: 12px; }

/* Pedido nuevo: los servicios extra de este vídeo */
.svc-toggles { display: grid; gap: 8px; }
.svc-row { display: grid; gap: 8px; }
.svc-row .tgl { align-items: center; }
.svc-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--stroke); transition: background .25s, color .25s;
}
.svc-row.on .svc-ic, .svc-row .tgl:has(input:checked) .svc-ic { background: var(--tinta-grad); color: var(--lima); box-shadow: none; }
.svc-field { margin-left: 56px; width: calc(100% - 56px); }
@media (max-width: 520px) { .svc-field { margin-left: 0; width: 100%; } }

/* La nota de una versión o de una miniatura */
.stage .v-notes { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }

/* El carrusel: las imágenes una al lado de la otra (4:5, como en Instagram); se deslizan y cada una lleva su número */
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin;
}
.cs {
  position: relative; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px;
  background: var(--tinta-grad); box-shadow: inset 0 0 0 1px var(--stroke);
  animation: tf-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.cs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs figcaption {
  position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgb(5 26 12 / 72%); color: rgb(255 254 247 / 80%); backdrop-filter: blur(4px);
}
.cs figcaption b { color: var(--lima); }
.carousel-empty {
  display: grid; justify-items: center; gap: 10px; padding: 34px 18px; border-radius: 14px; text-align: center;
  background: var(--tinta-grad); color: rgb(255 254 247 / 70%); font-size: 13.5px;
}
.carousel-empty svg { color: var(--lima); }

/* Pedido nuevo: los extras del presupuesto (no se eligen: van con la edición) */
.svc-inc { display: grid; gap: 7px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.svc-inc-l { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ===== Pedido nuevo: un asistente, una pregunta por pantalla =====
   Arriba, en qué paso va (una rayita por paso); en el medio, la pregunta (entra deslizándose hacia el lado en que
   avanza); abajo, «Atrás» y «Siguiente». Al final, un resumen con «Cambiar» en cada renglón. */
.wz { display: grid; gap: 18px; align-content: start; }
.wz-bar.is-off { visibility: hidden; height: 0; }
.wz-top { display: grid; gap: 8px; }
.wz-count { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wz-bar { display: flex; gap: 5px; }
.wz-bar i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-3); transition: background .35s; }
.wz-bar i.done { background: var(--tinta); }
.wz-bar i.now { background: linear-gradient(90deg, var(--tinta) 0 45%, var(--surface-3) 45%); background-size: 220% 100%; animation: ps-load 1.8s ease-in-out infinite; }
.wz-screen { display: grid; gap: 6px; }
.wz-screen.in-next { animation: wz-in-next .38s var(--ease) both; }
.wz-screen.in-prev { animation: wz-in-prev .38s var(--ease) both; }
@keyframes wz-in-next { from { opacity: 0; transform: translateX(22px); } }
@keyframes wz-in-prev { from { opacity: 0; transform: translateX(-22px); } }
.wz-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.04em; text-transform: lowercase; line-height: 1.1; }
.wz-sub { margin: 0; font-size: 13.5px; color: var(--muted); }
.wz-body { display: grid; gap: 16px; margin-top: 12px; }
.wz-field { display: grid; gap: 8px; }
.wz-what { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-what .format { min-height: 92px; }
.wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.wz-nav .btn-lg { min-width: 160px; justify-content: center; }
.wz-sum { display: grid; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--stroke); }
.wz-sum-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.wz-sum-row:last-child { border-bottom: 0; }
.wz-sum-l { font-size: 12px; font-weight: 600; color: var(--muted); }
.wz-sum-v { font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wz-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wz-edit { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wz-edit:hover { color: var(--ink); }
@media (max-width: 640px) {
  .wz-what { grid-template-columns: 1fr; }
  .wz-what .format { min-height: 0; }
  .wz-sum-row { grid-template-columns: 1fr auto; }
  .wz-sum-l { grid-column: 1 / -1; }
  .wz-nav .btn-lg { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .wz-screen.in-next, .wz-screen.in-prev, .wz-bar i.now { animation: none; } }

/* ===== Asistente de pedido nuevo, con la marca =====
   Arriba de cada pantalla, un marco tinta (brillo lima, el paso, el título de marca, la barra en lima y un sticker que
   entra colgándose y queda flotando). Las opciones grandes son tarjetas tinta con su dibujo en lima; lo elegido se marca
   en tinta con detalles lima (nunca lima sobre crema). Todo entra escalonado y responde al pasar el cursor. */
.new-card.wz { padding: 0; gap: 0; overflow: hidden; animation: rise .5s var(--ease) both; }
.wz-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 23%, 168px);
  align-items: center; gap: 12px; padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px) clamp(18px, 2.2vw, 24px);
  background: var(--tinta-grad); color: var(--crema); box-shadow: inset 0 -1px 0 rgb(255 254 247 / 8%);
}
.wz-glow {
  position: absolute; z-index: -1; width: 75%; aspect-ratio: 1; right: -24%; top: -70%; border-radius: 50%;
  background: radial-gradient(circle, rgb(239 250 0 / 24%), transparent 65%); animation: ps-drift 9s ease-in-out infinite alternate;
}
.wz-hero::after {
  content: ''; position: absolute; z-index: -1; inset: auto -10% -60% auto; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(22 64 38 / 70%), transparent 70%);
}
.wz-hero-copy { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.wz-hero .wz-title { color: var(--crema); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1; overflow-wrap: anywhere; }
.wz-hero .wz-sub { color: rgb(255 254 247 / 72%); max-width: 44ch; }
.wz-hero .wz-bar { width: 100%; max-width: 380px; margin-top: 8px; gap: 6px; }
.wz-hero .wz-bar i { height: 6px; background: rgb(255 254 247 / 14%); }
.wz-hero .wz-bar i.done { background: var(--lima-grad); box-shadow: 0 0 10px rgb(239 250 0 / 35%); }
.wz-hero .wz-bar i.now {
  background: linear-gradient(90deg, var(--lima) 0 45%, rgb(239 250 0 / 20%) 45%); background-size: 220% 100%;
  box-shadow: 0 0 12px rgb(239 250 0 / 30%); animation: ps-load 1.8s ease-in-out infinite;
}
.wz-art { position: relative; display: grid; place-items: center; min-height: 112px; }
.wz-art .sticker { display: block; height: auto; filter: drop-shadow(0 14px 20px rgb(0 0 0 / 38%)); }
.wz-main { width: 100%; max-width: 160px; transform-origin: 50% 0; animation: float 4.5s ease-in-out infinite; }
.wz-side { position: absolute; right: -8%; bottom: -14%; width: 40%; animation: ps-wobble 3.2s ease-in-out infinite; }
.wz-hero.is-moving .wz-main { animation: hang-in .85s var(--ease-back) both, float 4.5s ease-in-out .85s infinite; }
.wz-hero.is-moving .wz-side { animation: ps-pop .6s var(--ease-back) .35s both, ps-wobble 3.2s ease-in-out 1s infinite; }
.wz-hero.is-moving .wz-hero-copy > * { animation: rise .5s var(--ease) both; }
.wz-hero.is-moving .wz-hero-copy > :nth-child(2) { animation-delay: .05s; }
.wz-hero.is-moving .wz-hero-copy > :nth-child(3) { animation-delay: .1s; }
.wz-hero.is-moving .wz-hero-copy > :nth-child(4) { animation-delay: .15s; }
.wz-hero.is-moving .wz-bar i { animation: seg-in .45s var(--ease) both; animation-delay: calc(.2s + var(--i) * .05s); transform-origin: left; }
.wz-hero.is-moving .wz-bar i.now { animation: seg-in .45s var(--ease) both calc(.2s + var(--i) * .05s), ps-load 1.8s ease-in-out 1s infinite; }
.wz-screen { padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px) 0; }
.wz-screen .wz-body { margin-top: 0; }
.wz-screen.in-next, .wz-screen.in-prev { animation: none; }
.wz-screen.in-next .wz-body > *, .wz-screen.in-prev .wz-body > * { animation: wz-in-next .45s var(--ease) both; }
.wz-screen.in-prev .wz-body > * { animation-name: wz-in-prev; }
.wz-body > :nth-child(2) { animation-delay: .06s !important; }
.wz-body > :nth-child(3) { animation-delay: .12s !important; }
.wz-body > :nth-child(4) { animation-delay: .18s !important; }
.wz-body > :nth-child(5) { animation-delay: .24s !important; }
.wz-nav { margin: 20px clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 24px); padding-top: 14px; }
.wz-nav .btn svg { transition: transform .35s var(--ease-back); }
.wz-nav [data-next]:hover svg { transform: translateX(5px); }
.wz-nav [data-back]:hover svg { transform: translateX(-4px); }
.wz-nav [data-next], .wz-send { position: relative; overflow: hidden; box-shadow: 0 12px 24px -12px rgb(5 26 12 / 60%); transition: transform .35s var(--ease-back), box-shadow .25s; }
.wz-nav [data-next]:hover, .wz-send:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgb(5 26 12 / 70%); }
.wz-send::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(239 250 0 / 28%) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen 2.8s ease-in-out 1s infinite;
}

/* Qué necesita: tarjetas tinta con el dibujo en lima */
.wz-what { gap: 12px; }
.wz-what .format {
  min-height: 108px; padding: 16px 40px 16px 16px; background: var(--tinta-grad); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgb(255 254 247 / 10%), 0 16px 28px -18px rgb(5 26 12 / 75%);
  animation: rise .5s var(--ease) both;
}
.wz-what .format:nth-child(2) { animation-delay: .07s; }
.wz-what .format:nth-child(3) { animation-delay: .14s; }
.wz-what .format:nth-child(4) { animation-delay: .21s; }
.wz-what .format small { color: rgb(255 254 247 / 62%); }
.wz-what .format-art { color: var(--lima); width: 44px; height: 38px; }
.wz-what .format-art svg { width: 44px; }
.wz-what .format:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 45%), 0 20px 30px -16px rgb(5 26 12 / 75%); }
.wz-what .format:hover .format-art { transform: scale(1.14) rotate(-7deg); }
.wz-what .format.on { box-shadow: inset 0 0 0 2px var(--lima), 0 0 0 4px rgb(5 26 12 / 12%), 0 20px 30px -16px rgb(5 26 12 / 75%); transform: translateY(-3px); }
.wz-what .format.on .format-check { background: var(--lima); color: var(--noche); }
.wz-what .format.on .format-art { color: var(--lima); }

/* Lo elegido (formato, presupuesto, servicios) en tinta con detalles lima */
.wz .formats:not(.wz-what) .format { animation: rise .45s var(--ease) both; }
.wz .formats:not(.wz-what) .format:nth-child(2) { animation-delay: .06s; }
.wz .formats:not(.wz-what) .format:nth-child(3) { animation-delay: .12s; }
.wz .formats:not(.wz-what) .format:nth-child(4) { animation-delay: .18s; }
.wz .formats:not(.wz-what) .format:hover { transform: translateY(-3px); }
.wz .formats:not(.wz-what) .format.on { background: var(--tinta-grad); color: var(--crema); box-shadow: 0 14px 26px -16px rgb(5 26 12 / 70%); }
.wz .formats:not(.wz-what) .format.on small { color: rgb(255 254 247 / 62%); }
.wz .formats:not(.wz-what) .format.on .format-art { color: var(--lima); }
.wz .formats:not(.wz-what) .format.on .format-check { background: var(--lima); color: var(--noche); }
.wz .qpick.on .qpick-n { background: var(--lima-grad); color: var(--noche); }
.wz .svc-row { animation: rise .45s var(--ease) both; }
.wz .svc-row:nth-child(2) { animation-delay: .06s; }
.wz .svc-row:nth-child(3) { animation-delay: .12s; }
.wz .svc-row:nth-child(4) { animation-delay: .18s; }
.wz .svc-row .tgl { transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--ease-back); }
.wz .svc-row .tgl:hover { transform: translateX(3px); }
.wz .svc-row.on .tgl { background: var(--tinta-grad); color: var(--crema); box-shadow: 0 12px 22px -16px rgb(5 26 12 / 70%); }
.wz .svc-row.on .tgl-txt small { color: rgb(255 254 247 / 62%); }
.wz .svc-row.on .svc-ic { background: rgb(239 250 0 / 12%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 38%); }
.wz .svc-row.on .tgl-track { background: rgb(255 254 247 / 14%); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 50%); }
.wz .svc-inc { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); border-radius: 14px; }
.wz .svc-inc .svc-chip, .wz-sum .svc-chip { background: var(--tinta-grad); color: var(--crema); box-shadow: none; }
.wz .svc-inc .svc-chip svg, .wz-sum .svc-chip svg { color: var(--lima); }

/* Resumen: renglones que entran de a uno */
.wz-sum { background: var(--field); }
.wz-sum-row { animation: rise .4s var(--ease) both; }
.wz-sum-row:nth-child(2) { animation-delay: .05s; }
.wz-sum-row:nth-child(3) { animation-delay: .1s; }
.wz-sum-row:nth-child(4) { animation-delay: .15s; }
.wz-sum-row:nth-child(5) { animation-delay: .2s; }
.wz-sum-row:nth-child(6) { animation-delay: .25s; }
.wz-sum-row:nth-child(7) { animation-delay: .3s; }
.wz-sum-row:nth-child(8) { animation-delay: .35s; }
.wz-sum-l { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700; }
.wz .new-how { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 14px; background: var(--tinta-grad); color: var(--crema); font-size: 13px; }
.wz .new-how svg { flex: none; color: var(--lima); animation: hourglass 2.4s ease-in-out infinite; }

/* Confirmación: un sticker que entra colgándose */
.done-stk { width: 150px; height: auto; filter: drop-shadow(0 14px 20px rgb(0 0 0 / 30%)); transform-origin: 50% 0; animation: hang-in .9s var(--ease-back) both, float 4.5s ease-in-out .9s infinite; }
.new-card.wz .done-card { padding: 28px 22px 26px; }

/* Cómo continúa, en un panel tinta: la línea de tiempo en lima, que se arma de a un paso */
.panel.how-dark {
  --muted: rgb(255 254 247 / 58%); --line-2: rgb(239 250 0 / 22%);
  position: sticky; top: 18px; overflow: hidden; isolation: isolate;
  background: var(--tinta-grad); color: var(--crema); box-shadow: inset 0 0 0 1px rgb(255 254 247 / 10%), var(--shadow-card);
}
.panel.how-dark::before {
  content: ''; position: absolute; z-index: -1; width: 90%; aspect-ratio: 1; left: -40%; bottom: -50%; border-radius: 50%;
  background: radial-gradient(circle, rgb(239 250 0 / 14%), transparent 65%); animation: ps-drift 11s ease-in-out infinite alternate;
}
.how-dark h2 { color: var(--crema); }
.how-dark .how-n { background: rgb(239 250 0 / 12%); color: var(--lima); box-shadow: inset 0 0 0 1px rgb(239 250 0 / 40%); }
.how-dark .how li:last-child .how-n { background: var(--lima-grad); color: var(--noche); box-shadow: 0 0 14px rgb(239 250 0 / 35%); }
.how-dark .how li { animation: rise .45s var(--ease) both; }
.how-dark .how li:nth-child(2) { animation-delay: .05s; }
.how-dark .how li:nth-child(3) { animation-delay: .1s; }
.how-dark .how li:nth-child(4) { animation-delay: .15s; }
.how-dark .how li:nth-child(5) { animation-delay: .2s; }
.how-dark .how li:nth-child(6) { animation-delay: .25s; }
.how-dark .how li:nth-child(7) { animation-delay: .3s; }
.how-dark .how li:nth-child(8) { animation-delay: .35s; }
.how-dark .how li:nth-child(n+9) { animation-delay: .4s; }
.how-dark .muted { color: rgb(255 254 247 / 62%); }

@media (max-width: 640px) {
  .wz-hero { grid-template-columns: minmax(0, 1fr) 92px; padding: 18px 16px 16px; }
  .wz-art { min-height: 84px; }
  .wz-side { display: none; }
  .wz-what .format { min-height: 0; }
  .panel.how-dark { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .wz-hero *, .wz-body > *, .wz-what .format, .wz .svc-row, .wz-sum-row, .how-dark .how li, .done-stk, .wz-send::after, .panel.how-dark::before { animation: none !important; }
}

/* La confirmación del asistente: un marco tinta con brillo lima, el sticker y los botones en lima */
.new-card.wz .done-card {
  --ink: var(--crema); --ink-2: rgb(255 254 247 / 76%); --stroke: rgb(255 254 247 / 26%); --surface-2: rgb(255 254 247 / 10%);
  --primary: var(--lima); --on-primary: var(--noche); --primary-grad: var(--lima-grad);
  position: relative; overflow: hidden; isolation: isolate; margin: 0; padding: 34px 22px 30px; background: var(--tinta-grad); color: var(--crema);
}
.new-card.wz .done-card::before {
  content: ""; position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; left: 10%; top: -55%; border-radius: 50%;
  background: radial-gradient(circle, rgb(239 250 0 / 22%), transparent 65%); animation: ps-drift 9s ease-in-out infinite alternate;
}
.new-card.wz .done-card h3 { color: var(--crema); }
.new-card.wz .done-card p b { color: var(--lima); }
.new-card.wz .done-card .btn-primary { color: var(--noche); }

/* Guion y copy: la hoja entra subiendo; su ícono en tinta con un brillo lima que respira */
.script-paper { animation: rise .5s var(--ease) both; }
.sp-ic { box-shadow: 0 0 0 4px rgb(5 26 12 / 6%); animation: breathe 3.6s ease-in-out infinite; }
.sp-body { animation: rise .55s var(--ease) .1s both; }
.thumb-stage .thumb-frame { animation: rise .5s var(--ease) both; }

/* Panel: los clientes del primer paso entran de a uno y rebotan al pasar el cursor */
.wz .who-c { animation: rise .45s var(--ease) both; transition: transform .35s var(--ease-back); }
.wz .who-c:nth-child(2) { animation-delay: .05s; } .wz .who-c:nth-child(3) { animation-delay: .1s; } .wz .who-c:nth-child(4) { animation-delay: .15s; }
.wz .who-c:nth-child(5) { animation-delay: .2s; } .wz .who-c:nth-child(n+6) { animation-delay: .25s; }
.wz .who-c:hover { transform: translateY(-4px) rotate(-3deg); }

/* El ícono del paso, en grande (sin stickers): un círculo lima con el ícono en tinta, un anillo punteado que gira
   alrededor y un brillo que respira. Entra con un salto al cambiar de pantalla y queda flotando. */
.wz-art { min-height: 120px; }
.wz-ic {
  position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center;
  background: var(--lima-grad); color: var(--noche); transform: rotate(-6deg);
  box-shadow: 0 0 0 6px rgb(239 250 0 / 12%), 0 18px 34px -10px rgb(239 250 0 / 45%), 0 10px 20px rgb(0 0 0 / 30%);
  animation: wz-float 4.5s ease-in-out infinite;
}
.wz-ring {
  position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 2px dashed rgb(239 250 0 / 38%);
  animation: wz-spin 18s linear infinite;
}
.wz-hero.is-moving .wz-ic { animation: wz-pop .7s var(--ease-back) both, wz-float 4.5s ease-in-out .7s infinite; }
.wz-hero.is-moving .wz-ring { animation: ps-pop .6s var(--ease-back) .15s both, wz-spin 18s linear .75s infinite; }
@keyframes wz-float { 50% { transform: rotate(3deg) translateY(-7px); } }
@keyframes wz-spin { to { transform: rotate(360deg); } }
@keyframes wz-pop { from { opacity: 0; transform: scale(.3) rotate(-40deg); } 60% { transform: scale(1.08) rotate(4deg); } }
.done-big { width: 72px; height: 72px; border-radius: 24px; background: var(--lima-grad); color: var(--noche); box-shadow: 0 0 0 6px rgb(239 250 0 / 14%), 0 16px 30px -10px rgb(239 250 0 / 45%); animation: wz-pop .7s var(--ease-back) both, wz-float 4.5s ease-in-out .7s infinite; }
@media (max-width: 640px) { .wz-ic { width: 66px; height: 66px; border-radius: 22px; } .wz-ic svg { width: 32px; height: 32px; } .wz-ring { width: 90px; height: 90px; } .wz-art { min-height: 90px; } }
@media (prefers-reduced-motion: reduce) { .wz-ic, .wz-ring, .done-big { animation: none !important; } }

/* Panel: la barra de arriba dentro de una carpeta (volver, nombre del presupuesto y sus links). */
.fold-bar { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; }
.fold-bar .eyebrow { margin: 0 0 2px; color: var(--lima); }
.fold-bar-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.05em; text-transform: lowercase; color: var(--crema); }

/* Vídeos sin etapas: la versión con su ícono y, al lado, cuántas versiones hubo. */
.os-txt strong { display: inline-flex; align-items: center; gap: 6px; }
.os-txt strong svg { color: var(--muted); }
.os-inline { font-size: 12px; font-weight: 500; color: var(--muted); }

/* ===== Lista de videos: filas finas (portal y panel) =====
   Número · nombre · formato y fecha · aviso (si hay algo nuevo o por hacer) · flecha. Toda la fila abre el video. */
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vrow {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto 18px; align-items: center; gap: 14px;
  min-height: 46px; padding: 7px 14px 7px 8px; border-radius: 12px; background: var(--card-grad); color: var(--tinta);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%), 0 10px 20px -14px rgb(0 0 0 / 70%);
  animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * .03s); transition: transform .25s var(--ease), box-shadow .25s;
}
.vrow:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px var(--tinta), 0 12px 22px -14px rgb(0 0 0 / 80%); }
.vr-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tinta-grad); color: var(--lima);
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: -.04em; overflow: hidden; }
.vr-av { background: none; }
.vr-link { min-width: 0; color: inherit; text-decoration: none; }
.vr-link::after { content: ''; position: absolute; inset: 0; }
.vr-link strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.vr-link:focus-visible { outline: none; }
.vrow:has(.vr-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--tinta); }
.vr-meta { font-size: 12px; color: rgb(5 26 12 / 55%); white-space: nowrap; }
.vr-badge { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--tinta-grad); color: var(--lima);
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.vr-chev { color: rgb(5 26 12 / 45%); display: grid; place-items: center; }
.vrow.is-hot { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 10px 20px -14px rgb(0 0 0 / 70%); }
.vrow:not(:has(.vr-badge)) { grid-template-columns: 30px minmax(0, 1fr) auto 18px; }
@media (max-width: 560px) {
  .vrow, .vrow:not(:has(.vr-badge)) { grid-template-columns: 30px minmax(0, 1fr) auto 16px; row-gap: 0; }
  .vr-meta { grid-column: 2; grid-row: 2; font-size: 11px; }
  .vr-link { grid-row: 1; }
  .vr-num { grid-row: 1 / span 2; }
  .vr-badge { grid-column: 3; grid-row: 1 / span 2; }
  .vr-chev { grid-column: 4; grid-row: 1 / span 2; }
}

/* Un sticker en vez del ícono en los estados vacíos (carpeta nueva, cero pendientes, ¡ups!). */
.empty-stk { width: 170px; height: auto; margin-bottom: 6px; transform: rotate(-3deg); animation: ps-pop .7s var(--ease-back) .2s both; }