/* Relevo · sistema de diseño de alta fidelidad (dirección C "Buzón")
   Se usa en todas las pantallas de docs/diseno/hifi/. Tokens: docs/ventas/marca/tokens.css (copiados acá
   para que cada pantalla sea autosuficiente). Convenciones en hifi/README.md. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap");

:root{
  --azul:#2650FF; --azul-hondo:#1A38C4; --tinta:#141414; --tinta-2:#5B6270; --tinta-3:#8A919E;
  --fondo:#F2F4F7; --sup:#FFFFFF; --sup-2:#F7F8FA; --borde:#E1E5EC;
  --manteca:#FFE59A; --menta:#BFEBDD; --lila:#D9D2FF; --tomate:#FF5B47;
  --ok:#0F7A50; --alerta:#946200; --error:#C2301F;
  --sobre-tinta:#141414; --sobre-azul:#FFFFFF;
  --f-display:"Bricolage Grotesque", system-ui, sans-serif;
  --f-texto:"Figtree", system-ui, sans-serif;
  --f-dato:"DM Mono", ui-monospace, monospace;
  --r-s:10px; --r-m:16px; --r-sobre:22px; --r-carta:28px;
  --sombra-sobre:0 1px 0 rgba(0,0,0,.04), 0 24px 40px -24px rgba(20,20,20,.35);
  --sombra-flota:0 20px 40px -20px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.9,.25,1.15); --ease-salida:cubic-bezier(.6,-0.2,.4,1); --ease-ui:cubic-bezier(.2,0,0,1);
  color-scheme: light;
}
:root[data-tema="oscuro"]{
  --azul:#6E8BFF; --azul-hondo:#8EA5FF; --tinta:#F4F5F7; --tinta-2:#A2A9B6; --tinta-3:#737B89;
  --fondo:#0F1115; --sup:#1A1D24; --sup-2:#14171D; --borde:#2A2F3A;
  --manteca:#6B5A1C; --menta:#2D5E4F; --lila:#4B4180; --tomate:#FF7A69;
  --ok:#3FD097; --alerta:#F0B23C; --error:#FF7A69; --sobre-tinta:#F4F5F7; --sobre-azul:#0F1115;
  --sombra-sobre:0 1px 0 rgba(0,0,0,.3), 0 24px 40px -24px rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --azul:#6E8BFF; --azul-hondo:#8EA5FF; --tinta:#F4F5F7; --tinta-2:#A2A9B6; --tinta-3:#737B89;
    --fondo:#0F1115; --sup:#1A1D24; --sup-2:#14171D; --borde:#2A2F3A;
    --manteca:#6B5A1C; --menta:#2D5E4F; --lila:#4B4180; --tomate:#FF7A69;
    --ok:#3FD097; --alerta:#F0B23C; --error:#FF7A69; --sobre-tinta:#F4F5F7; --sobre-azul:#0F1115;
    --sombra-sobre:0 1px 0 rgba(0,0,0,.3), 0 24px 40px -24px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (pointer:coarse), (max-width:860px){.rv-logo{min-height:44px}}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font:400 16px/1.5 var(--f-texto);-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--azul)}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:10px}
.dato{font-family:var(--f-dato);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Tipografía ── */
.t-hero{font:800 64px/.95 var(--f-display);letter-spacing:-.04em;margin:0}
.t-h1{font:800 40px/1 var(--f-display);letter-spacing:-.035em;margin:0}
.t-h2{font:700 24px/1.15 var(--f-display);letter-spacing:-.02em;margin:0}
.t-h3{font:700 18px/1.2 var(--f-display);letter-spacing:-.01em;margin:0}
.t-chico{font-size:14px;color:var(--tinta-2)}
.t-eti{font:500 12px/1 var(--f-dato);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.t-num{font:800 44px/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.acento{color:var(--azul)}

/* ── Estructura: barra superior (escritorio) + navegación inferior (celular) ── */
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(10px)}
.rv-logo{display:flex;align-items:center;gap:10px;font:800 26px/1 var(--f-display);letter-spacing:-.04em;color:var(--tinta);text-decoration:none}
.rv-logo svg{width:34px;height:34px;flex:none}
.rv-pildoras{display:flex;gap:4px;background:var(--sup);border:1px solid var(--borde);border-radius:999px;padding:5px}
.rv-pildoras a{position:relative;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--tinta-2);font-weight:600;font-size:14px;white-space:nowrap}
.rv-pildoras a:hover{color:var(--tinta)}
.rv-pildoras a[aria-current]{background:var(--tinta);color:var(--sup)}
.rv-pildoras .n{display:inline-block;margin-left:6px;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--manteca);color:var(--sobre-tinta);font:600 12px/18px var(--f-texto);text-align:center}
.rv-top-der{display:flex;align-items:center;gap:10px}
.rv-cuenta{display:flex;align-items:center;gap:10px;border:1px solid var(--borde);background:var(--sup);border-radius:999px;padding:4px 12px 4px 4px;font-size:14px;font-weight:600}
.rv-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--f-texto);background:var(--lila);color:var(--sobre-tinta);flex:none}
.rv-icono-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--borde);background:var(--sup);display:grid;place-items:center}
.rv-icono-btn svg{width:20px;height:20px}
.rv-main{max-width:1360px;margin:0 auto;padding:8px 28px 120px}
.rv-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:18px 0 22px;flex-wrap:wrap}
.rv-cabecera p{margin:6px 0 0;color:var(--tinta-2);max-width:620px}
.rv-tabbar{display:none}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-m);border:2px solid var(--tinta);background:transparent;font-weight:700;font-size:15px;text-decoration:none;color:var(--tinta);transition:background .12s var(--ease-ui),transform .12s var(--ease-ui)}
.btn:hover{background:var(--sup-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-primario{background:var(--azul);border-color:var(--azul);color:var(--sobre-azul)}
.btn-primario:hover{background:var(--azul-hondo);border-color:var(--azul-hondo)}
.btn-suave{border-color:var(--borde);background:var(--sup)}
.btn-peligro{border-color:var(--tomate);color:var(--error)}
.btn-chico{min-height:44px;padding:6px 12px;font-size:14px;border-radius:12px}
.btn kbd{font:500 11px/1 var(--f-dato);opacity:.55}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Etiquetas, pastillas y estados ── */
.eti{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--f-dato);letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--sup-2);color:var(--tinta-2);white-space:nowrap}
.eti-precio{background:var(--manteca);color:var(--sobre-tinta)}
.eti-catalogo,.eti-info{background:var(--menta);color:var(--sobre-tinta)}
.eti-pedido,.eti-confirma{background:var(--lila);color:var(--sobre-tinta)}
.eti-decide{background:color-mix(in srgb,var(--tomate) 12%,var(--sup));color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tomate)}
.estado{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.estado{color:var(--tinta)}
.estado::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--punto,var(--tinta-3));flex:none}
.estado-ok{--punto:var(--ok)} .estado-alerta{--punto:var(--alerta)} .estado-error{--punto:var(--error)} .estado-neutro{--punto:var(--tinta-3)}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtro{border:1px solid var(--borde);background:var(--sup);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;color:var(--tinta-2);min-height:44px}
.filtro[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--sup)}

/* Resaltado de lo que falta (dentro de borradores) */
.falta{background:var(--manteca);border-radius:8px;padding:1px 7px;font-weight:700;white-space:nowrap;color:var(--sobre-tinta)}

/* ── Superficies ── */
.carta{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-carta);padding:24px}
.tarjeta{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-sobre);padding:20px}
.sobre{position:relative;border-radius:var(--r-sobre);padding:20px 22px;box-shadow:var(--sombra-sobre);color:var(--sobre-tinta);overflow:hidden}
.sobre::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;
  background:linear-gradient(to bottom right,transparent 49.4%,rgba(0,0,0,.06) 50%,transparent 50.6%) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent 49.4%,rgba(0,0,0,.06) 50%,transparent 50.6%) right/50% 100% no-repeat}
.sobre-precio{background:var(--manteca)} .sobre-catalogo,.sobre-info{background:var(--menta)} .sobre-pedido,.sobre-confirma{background:var(--lila)}
.sobre-decide{background:var(--sup);box-shadow:inset 0 0 0 3px var(--tomate),var(--sombra-sobre);color:var(--tinta)}
.sobre-neutro{background:var(--sup);border:1px solid var(--borde)}
.separador{height:1px;background:var(--borde);margin:16px 0;border:0}

/* ── Métricas (no son "tarjetas de plantilla": número + contexto + mini serie) ── */
.metrica{display:flex;flex-direction:column;gap:6px}
.metrica .delta{font:500 13px/1.3 var(--f-dato)}
.delta-sube{color:var(--ok)} .delta-baja{color:var(--error)}
.serie{display:flex;align-items:flex-end;gap:3px;height:36px}
.serie i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--azul) 30%,transparent)}
.serie i:last-child{background:var(--azul)}
.barra-uso{height:10px;border-radius:999px;background:var(--sup-2);overflow:hidden;border:1px solid var(--borde)}
.barra-uso i{display:block;height:100%;border-radius:999px;background:var(--azul)}

/* ── Tablas ── */
.tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.tabla th{font:500 12px/1 var(--f-dato);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-2);text-align:left;padding:12px 14px;border-bottom:1px solid var(--borde)}
.tabla td{padding:14px;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--sup-2)}
.tabla .num{text-align:right;font-family:var(--f-dato);font-variant-numeric:tabular-nums}

/* ── Formularios ── */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label{font-weight:600;font-size:14px}
.campo .ayuda{font-size:13px;color:var(--tinta-2)}
.input{min-height:48px;border:1.5px solid var(--borde);background:var(--sup);border-radius:var(--r-m);padding:10px 14px;width:100%}
.input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px color-mix(in srgb,var(--azul) 20%,transparent)}
.secreto{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--borde);border-radius:var(--r-m);padding:8px 8px 8px 14px;background:var(--sup-2)}
.secreto .dato{flex:1;letter-spacing:.1em}
.interruptor{position:relative;width:48px;height:28px;border-radius:999px;background:var(--borde);border:0;flex:none}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.interruptor[aria-checked="true"]{background:var(--azul)}
.interruptor[aria-checked="true"]::after{transform:translateX(20px)}

/* ── Estados vacíos, carga y error ── */
.vacio{text-align:center;padding:56px 24px;border:2px dashed var(--borde);border-radius:var(--r-sobre)}
.vacio .t-h2{margin:14px 0 6px}
.vacio p{color:var(--tinta-2);margin:0 auto 18px;max-width:420px}
.esqueleto{background:linear-gradient(90deg,var(--sup-2) 0,var(--borde) 50%,var(--sup-2) 100%);background-size:200% 100%;animation:brillo 1.4s linear infinite;border-radius:12px}
@keyframes brillo{to{background-position:-200% 0}}
.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-m);padding:14px 16px;border:1px solid var(--borde);background:var(--sup)}
.aviso svg{width:22px;height:22px;flex:none}
.aviso-error{border-color:color-mix(in srgb,var(--error) 40%,transparent);background:color-mix(in srgb,var(--error) 7%,var(--sup))}
.aviso-alerta{border-color:color-mix(in srgb,var(--alerta) 45%,transparent);background:color-mix(in srgb,var(--alerta) 9%,var(--sup))}
.aviso-ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--sup))}

/* ── Buzón de salida (deshacer de 10 s) ── */
.buzon{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:#141414;color:#F4F5F7;border-radius:22px;padding:10px 12px 10px 18px;z-index:40;box-shadow:var(--sombra-flota);min-width:min(520px,calc(100% - 28px))}
.buzon .ranura{width:64px;height:14px;border-radius:7px;background:#000;box-shadow:inset 0 3px 6px rgba(255,255,255,.12);flex:none}
.buzon .txt{flex:1;font-size:14px}
.buzon .txt b{display:block;font:700 18px/1.1 var(--f-display)}
.buzon button{background:#F4F5F7;color:#141414;border:0;border-radius:14px;padding:10px 16px;font-weight:700;min-height:44px;display:none}
.buzon.espera button{display:inline-block}
.buzon .anillo{width:38px;height:38px;flex:none}
.buzon .anillo circle{fill:none;stroke-width:4}
.buzon .anillo .fondo{stroke:rgba(255,255,255,.18)}
.buzon .anillo .prog{stroke:#FFE59A;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:107;stroke-dashoffset:107}

/* ── Utilidades de grilla ── */
.grilla{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fila{display:flex;align-items:center;gap:12px}
.entre{justify-content:space-between}
.crece{flex:1;min-width:0}
.recortar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Celular ── */
@media (max-width: 860px){
  .rv-top{padding:12px 16px}
  .rv-pildoras,.rv-cuenta > span:not(.rv-av){display:none}
  .rv-cuenta{padding:3px;border-radius:50%}
  .rv-cabecera{margin:10px 0 16px}
  .rv-cabecera p{font-size:15px}
  .rv-main{padding:4px 16px 150px}
  .t-hero{font-size:42px}
  .t-h1{font-size:32px}
  .g-2,.g-3{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carta{padding:20px 18px;border-radius:24px}
  .buzon{bottom:78px;min-width:0;width:calc(100% - 28px);padding:8px 8px 8px 14px;gap:10px;border-radius:18px}
  .buzon .txt{font-size:12px;line-height:1.3} .buzon .txt b{font-size:15px}
  .buzon .ranura{width:34px;height:10px} .buzon .anillo{width:30px;height:30px}
  .rv-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--sup);border-top:1px solid var(--borde);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:35}
  .rv-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--tinta-2);text-decoration:none;min-height:44px;justify-content:center;position:relative}
  .rv-tabbar a svg{width:22px;height:22px}
  .rv-tabbar a[aria-current]{color:var(--tinta)}
  .rv-tabbar a[aria-current]::before{content:"";position:absolute;top:-8px;width:28px;height:4px;border-radius:2px;background:var(--azul)}
  .rv-tabbar .n{position:absolute;top:0;left:56%;background:var(--manteca);color:var(--sobre-tinta);font:700 10px/16px var(--f-texto);min-width:16px;padding:0 4px;border-radius:8px}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* Buzón dentro de la página (landing, demos): mismo dibujo, sin flotar */
.buzon.buzon-estatico{position:static;transform:none;visibility:visible;opacity:1}