/* Panel PintuCL — sistema de diseño (rediseño 2026-10-16).
   Tema oscuro único. Tokens arriba; los componentes solo usan tokens. */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fuentes/Montserrat.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fuentes/Inter.woff2) format("woff2")}

:root{
  color-scheme:dark;
  /* Superficies: gris carbón con un matiz frío mínimo */
  --fondo:#111215; --s1:#17191d; --s2:#1e2025; --s3:#272a30; --s4:#31353c;
  --borde:#2a2d33; --borde-fuerte:#3b3f47;
  /* Texto */
  --texto:#eceef2; --texto-2:#a9afb9; --texto-3:#7b818c;
  /* Acento de marca */
  --acento:#E71E63; --acento-boton:#D81B60; --acento-hover:#DE1A5B; --acento-activo:#c8164f;
  --acento-suave:rgba(231,30,99,.16); --acento-texto:#ff6e9a; --sobre-acento:#fff;
  /* Estados — fijos; siempre acompañados de ícono y palabra, nunca solo color */
  --est-borrador:#f2b53a;   --est-borrador-bg:rgba(242,181,58,.14);
  --est-aprobado:#3fcb86;   --est-aprobado-bg:rgba(63,203,134,.14);
  --est-rechazado:#a79cff;  --est-rechazado-bg:rgba(167,156,255,.14);
  --est-render:#4ea6ff;     --est-render-bg:rgba(78,166,255,.14);
  --est-error:#ff5a5f;      --est-error-bg:rgba(255,90,95,.14);
  --info:#4ea6ff;
  /* Tipografía */
  --f-titulo:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem; --t-lg:1.25rem; --t-xl:1.5rem; --t-2xl:1.875rem;
  /* Espacio, radios, sombras */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e10:40px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sombra-1:0 1px 2px rgba(0,0,0,.35);
  --sombra-2:0 8px 24px rgba(0,0,0,.45);
  --sombra-3:0 -12px 40px rgba(0,0,0,.55);
  --foco:0 0 0 2px var(--fondo),0 0 0 4px var(--acento-texto);
  --nav-alto:64px; --herr-alto:66px; --nav-ancho:232px;
  --mov:160ms cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 var(--t-base)/1.5 var(--f-ui);
  font-feature-settings:"cv11","ss03";-webkit-font-smoothing:antialiased;min-height:100dvh}
h1,h2,h3,h4{font-family:var(--f-titulo);color:var(--texto);margin:0;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--t-xl);font-weight:700}
h2{font-size:var(--t-lg);font-weight:700}
h3{font-size:var(--t-md);font-weight:600}
h4{font-size:var(--t-base);font-weight:600}
p{margin:0}
a{color:var(--acento-texto);text-underline-offset:3px}
a:hover{color:#ff93b5}
img,video,svg{max-width:100%}
img{display:block}
hr{border:0;border-top:1px solid var(--borde);margin:var(--e6) 0}
:focus{outline:none}
:focus-visible{box-shadow:var(--foco);border-radius:var(--r-sm)}
::selection{background:var(--acento-suave);color:var(--texto)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}
.meta{color:var(--texto-2);font-size:var(--t-sm)}
.tenue{color:var(--texto-3)}

/* Íconos (sprite Lucide, ISC) */
.ico{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px}.ico-lg{width:24px;height:24px}.ico-xl{width:32px;height:32px}
.gira{animation:giro 900ms linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

/* ============ Estructura de la aplicación ============ */
.app{min-height:100dvh;display:flex;flex-direction:column}
.nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;background:rgba(23,25,29,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--borde);
  padding:0 var(--e2) env(safe-area-inset-bottom,0px)}
.nav-marca,.nav-pie{display:none}
.nav-lista{display:flex;flex:1;margin:0;padding:0;list-style:none}
.nav-lista li{flex:1}
.nav a.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--nav-alto);
  color:var(--texto-3);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.01em;border-radius:var(--r-md);
  transition:color var(--mov)}
.nav a.nav-item:hover{color:var(--texto-2)}
.nav a.nav-item[aria-current=page]{color:var(--texto)}
.nav a.nav-item[aria-current=page] .ico{color:var(--acento-texto)}
.contenido{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:var(--e4) var(--e4) calc(var(--nav-alto) + var(--e8) + env(safe-area-inset-bottom,0px))}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin:var(--e2) 0 var(--e5)}
.cabecera h1{display:flex;align-items:center;gap:var(--e3)}
.cabecera-acciones{display:flex;gap:var(--e2)}
.pestana-movil{display:flex;align-items:center;gap:var(--e2)}

@media (min-width:1024px){
  .nav{top:0;right:auto;width:var(--nav-ancho);flex-direction:column;border-top:0;border-right:1px solid var(--borde);
    background:var(--s1);padding:var(--e5) var(--e3);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-marca{display:flex;align-items:center;gap:var(--e3);padding:var(--e1) var(--e3) var(--e6);font:700 var(--t-md)/1 var(--f-titulo);letter-spacing:-.01em}
  .nav-marca i{width:28px;height:28px;border-radius:8px;background:var(--acento-boton);display:grid;place-items:center;color:var(--sobre-acento);font:800 15px var(--f-titulo);font-style:normal}
  .nav-lista{flex:none;flex-direction:column;gap:2px}
  .nav a.nav-item{flex-direction:row;justify-content:flex-start;gap:var(--e3);height:42px;padding:0 var(--e3);font-size:var(--t-base);font-weight:500}
  .nav a.nav-item:hover{background:var(--s2);color:var(--texto)}
  .nav a.nav-item[aria-current=page]{background:var(--s3);color:var(--texto)}
  .nav-pie{display:flex;flex-direction:column;gap:var(--e2);margin-top:auto;padding:var(--e3);border-top:1px solid var(--borde)}
  .nav-pie b{font-weight:600;font-size:var(--t-sm)}
  .nav-pie a{font-size:var(--t-sm);color:var(--texto-2);display:inline-flex;align-items:center;gap:var(--e2);text-decoration:none}
  .nav-pie a:hover{color:var(--texto)}
  .app{padding-left:var(--nav-ancho)}
  .contenido{padding:var(--e8) var(--e10) var(--e10)}
  h1{font-size:var(--t-2xl)}
}

/* ============ Botones ============ */
.btn{--bg:var(--s3);--fg:var(--texto);--bd:var(--borde-fuerte);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:44px;padding:0 var(--e5);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r-md);cursor:pointer;
  font:600 var(--t-base)/1 var(--f-ui);text-decoration:none;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--mov),border-color var(--mov),transform var(--mov),opacity var(--mov)}
.btn:hover{--bg:var(--s4);color:var(--fg)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{box-shadow:var(--foco);border-radius:var(--r-md)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.btn-primario{--bg:var(--acento-boton);--fg:var(--sobre-acento);--bd:transparent}
.btn-primario:hover{--bg:var(--acento-hover)}
.btn-primario:active{--bg:var(--acento-activo)}
.btn-aprobar{--bg:#1a7a4f;--fg:#fff;--bd:transparent}
.btn-aprobar:hover{--bg:#1d8556}
.btn-peligro{--bg:transparent;--fg:var(--est-error);--bd:rgba(255,90,95,.45)}
.btn-peligro:hover{--bg:var(--est-error-bg)}
.btn-fantasma{--bg:transparent;--bd:transparent;--fg:var(--texto-2)}
.btn-fantasma:hover{--bg:var(--s3);--fg:var(--texto)}
.btn-sm{min-height:36px;padding:0 var(--e3);font-size:var(--t-sm);border-radius:var(--r-sm)}
.btn-lg{min-height:52px;padding:0 var(--e6);font-size:var(--t-md)}
.btn-bloque{width:100%}
.btn-icono{padding:0;width:44px}.btn-icono.btn-sm{width:36px}
.btn.cargando{pointer-events:none;color:transparent;position:relative}
.btn.cargando::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:giro 700ms linear infinite}
.grupo-botones{display:flex;flex-wrap:wrap;gap:var(--e2)}
.grupo-botones>.btn{flex:1 1 auto}

/* ============ Insignias de estado ============ */
.insignia{--c:var(--texto-2);--bg:var(--s3);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--e2) 0 6px;
  border-radius:var(--r-pill);background:var(--bg);color:var(--c);font:600 11px/1 var(--f-ui);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.insignia .ico{width:14px;height:14px;stroke-width:2.25}
.est-borrador{--c:var(--est-borrador);--bg:var(--est-borrador-bg)}
.est-aprobado{--c:var(--est-aprobado);--bg:var(--est-aprobado-bg)}
.est-rechazado{--c:var(--est-rechazado);--bg:var(--est-rechazado-bg)}
.est-render{--c:var(--est-render);--bg:var(--est-render-bg)}
.est-error{--c:var(--est-error);--bg:var(--est-error-bg)}
.insignia.est-render .ico{animation:giro 1.4s linear infinite}
.contador{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--acento-boton);color:var(--sobre-acento);font:700 11px/1 var(--f-ui)}

/* ============ Tarjetas ============ */
.tarjeta{background:var(--s1);border:1px solid var(--borde);border-radius:var(--r-lg);overflow:hidden}
.tarjeta-cuerpo{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3)}
.tarjetas{display:grid;gap:var(--e4);grid-template-columns:1fr}
@media (min-width:700px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.tarjetas{grid-template-columns:repeat(3,1fr)}}
.tarjeta-medio{position:relative;background:var(--s2);aspect-ratio:4/5;display:grid;place-items:center;color:var(--texto-3);overflow:hidden}
.tarjeta-medio img,.tarjeta-medio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tarjeta-medio .insignia{position:absolute;top:var(--e3);left:var(--e3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tarjeta.est-borrador-t{border-color:rgba(242,181,58,.28)}
.tarjeta.est-rechazado-t{border-color:rgba(167,156,255,.4)}
.tarjeta-titulo{display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
.tarjeta-texto{white-space:pre-wrap;font-size:var(--t-base);color:var(--texto);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-pie{display:flex;gap:var(--e2);padding:0 var(--e4) var(--e4)}
.tarjeta-pie .btn{flex:1}
.motivo{display:flex;gap:var(--e2);align-items:flex-start;padding:var(--e3);border-radius:var(--r-md);background:var(--est-rechazado-bg);color:#cfc9ff;font-size:var(--t-sm)}

/* ============ Formularios ============ */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--e4)}
.campo>label,.etiqueta{font:600 var(--t-sm)/1.2 var(--f-ui);color:var(--texto-2);letter-spacing:.01em}
.entrada,.campo input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.campo select,.campo textarea{
  width:100%;min-height:44px;padding:0 var(--e3);background:var(--s2);color:var(--texto);border:1px solid var(--borde-fuerte);
  border-radius:var(--r-md);font:400 var(--t-base)/1.4 var(--f-ui);transition:border-color var(--mov),background var(--mov)}
.campo textarea{padding:var(--e3);min-height:96px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#4a4f58}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave);border-radius:var(--r-md)}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9afb9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.campo-error input,.campo-error textarea{border-color:var(--est-error)}
.campo-ayuda{font-size:var(--t-xs);color:var(--texto-3)}
.campo-error .campo-ayuda{color:var(--est-error);display:flex;gap:6px;align-items:center}
.campo input:disabled{opacity:.5;cursor:not-allowed}
.campo-buscar{position:relative}
.campo-buscar .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--texto-3);pointer-events:none}
.campo-buscar input{padding-left:40px!important}
.interruptor{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);min-height:44px;cursor:pointer}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor .pista{flex:0 0 auto;width:44px;height:26px;border-radius:var(--r-pill);background:var(--s4);position:relative;transition:background var(--mov)}
.interruptor .pista::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--mov);box-shadow:var(--sombra-1)}
.interruptor input:checked+.pista{background:var(--acento)}
.interruptor input:checked+.pista::after{transform:translateX(18px)}
.interruptor input:focus-visible+.pista{box-shadow:var(--foco)}
.casilla{display:flex;align-items:center;gap:var(--e3);min-height:44px;cursor:pointer}
.casilla input{appearance:none;width:22px;height:22px;margin:0;border:1.5px solid var(--borde-fuerte);border-radius:6px;background:var(--s2);display:grid;place-items:center;cursor:pointer;transition:background var(--mov)}
.casilla input:checked{background:var(--acento);border-color:var(--acento)}
.casilla input:checked::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.casilla input:focus-visible{box-shadow:var(--foco)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--acento) var(--p,50%),var(--s4) var(--p,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--s4)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--acento)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;margin-top:-8px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=color]{width:44px;height:44px;padding:3px;background:var(--s2);border:1px solid var(--borde-fuerte);border-radius:var(--r-md);cursor:pointer}
.segmentado{display:flex;padding:3px;gap:2px;background:var(--s2);border:1px solid var(--borde);border-radius:var(--r-md)}
.segmentado button{flex:1;min-height:36px;border:0;border-radius:8px;background:transparent;color:var(--texto-2);font:600 var(--t-sm)/1 var(--f-ui);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--mov),color var(--mov)}
.segmentado button[aria-pressed=true],.segmentado button[aria-selected=true]{background:var(--s4);color:var(--texto)}
.fichas{display:flex;flex-wrap:wrap;gap:var(--e2)}
.ficha{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--e3);border-radius:var(--r-pill);background:var(--s2);border:1px solid var(--borde-fuerte);color:var(--texto-2);font:500 var(--t-sm)/1 var(--f-ui);cursor:pointer;text-decoration:none}
.ficha:hover{background:var(--s3);color:var(--texto)}
.ficha[aria-pressed=true]{background:var(--acento-suave);border-color:var(--acento);color:var(--texto)}
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2)}
.opcion{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--e3) var(--e2);border-radius:var(--r-md);background:var(--s2);border:1px solid var(--borde-fuerte);color:var(--texto-2);font:600 var(--t-xs)/1.2 var(--f-ui);cursor:pointer;text-align:center}
.opcion:hover{background:var(--s3);color:var(--texto)}
.opcion[aria-pressed=true]{border-color:var(--acento);background:var(--acento-suave);color:var(--texto)}
.opcion small{font-weight:400;color:var(--texto-3);font-size:11px}
.formato-caja{border:2px solid currentColor;border-radius:3px;opacity:.85}

/* ============ Avisos, toasts ============ */
.aviso{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3) var(--e4);border-radius:var(--r-md);border:1px solid var(--borde-fuerte);background:var(--s2);font-size:var(--t-sm);line-height:1.45}
.aviso .ico{margin-top:1px}
.aviso-info{border-color:rgba(78,166,255,.4);background:var(--est-render-bg)}.aviso-info>.ico{color:var(--info)}
.aviso-ok{border-color:rgba(63,203,134,.4);background:var(--est-aprobado-bg)}.aviso-ok>.ico{color:var(--est-aprobado)}
.aviso-atencion{border-color:rgba(242,181,58,.4);background:var(--est-borrador-bg)}.aviso-atencion>.ico{color:var(--est-borrador)}
.aviso-error{border-color:rgba(255,90,95,.45);background:var(--est-error-bg)}.aviso-error>.ico{color:var(--est-error)}
.avisos{display:flex;flex-direction:column;gap:var(--e3)}
.toasts{position:fixed;z-index:80;left:var(--e4);right:var(--e4);bottom:calc(var(--nav-alto) + var(--e4) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--e2);align-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--e3);width:100%;max-width:420px;padding:var(--e3) var(--e4);border-radius:var(--r-md);background:var(--s4);border:1px solid var(--borde-fuerte);box-shadow:var(--sombra-2);font-size:var(--t-sm);font-weight:500;animation:toast-entra 220ms cubic-bezier(.2,.8,.2,1)}
.toast>.ico{flex:0 0 auto}
.toast-ok>.ico{color:var(--est-aprobado)}.toast-error>.ico{color:var(--est-error)}.toast-info>.ico{color:var(--info)}
.toast span{flex:1}
.toast.sale{animation:toast-sale 180ms ease forwards}
@keyframes toast-entra{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes toast-sale{to{opacity:0;transform:translateY(8px)}}
@media (min-width:1024px){.toasts{left:calc(var(--nav-ancho) + var(--e6));right:var(--e6);bottom:var(--e6);align-items:flex-end}}

/* ============ Vacío, carga ============ */
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e3);padding:var(--e10) var(--e6);border:1px dashed var(--borde-fuerte);border-radius:var(--r-lg);color:var(--texto-2)}
.vacio-ico{width:64px;height:64px;border-radius:50%;background:var(--s2);display:grid;place-items:center;color:var(--texto-3)}
.vacio h3{color:var(--texto)}
.vacio p{max-width:34ch;font-size:var(--t-sm)}
.esqueleto{background:linear-gradient(100deg,var(--s2) 30%,var(--s3) 50%,var(--s2) 70%);background-size:300% 100%;animation:brillo 1.4s ease-in-out infinite;border-radius:var(--r-md)}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}
.cargando-fila{display:flex;align-items:center;gap:var(--e3);color:var(--texto-2);font-size:var(--t-sm)}
.progreso{height:6px;border-radius:var(--r-pill);background:var(--s4);overflow:hidden}
.progreso>i{display:block;height:100%;background:var(--est-render);border-radius:inherit;transition:width 300ms}

/* ============ Hoja inferior (bottom sheet) ============ */
.telon{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity 200ms}
.telon.abierto{opacity:1;pointer-events:auto}
.hoja{position:fixed;z-index:60;left:0;right:0;bottom:0;max-height:78dvh;display:flex;flex-direction:column;background:var(--s2);border:1px solid var(--borde-fuerte);border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sombra-3);transform:translateY(105%);visibility:hidden;transition:transform 260ms cubic-bezier(.2,.8,.2,1),visibility 0s 260ms;padding-bottom:env(safe-area-inset-bottom,0px)}
.hoja.abierta{transform:none;visibility:visible;transition:transform 260ms cubic-bezier(.2,.8,.2,1),visibility 0s}
.hoja-asa{flex:0 0 auto;width:40px;height:4px;border-radius:4px;background:var(--borde-fuerte);margin:var(--e2) auto 0}
.hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--e4) var(--e2)}
.hoja-cab h3{display:flex;align-items:center;gap:var(--e2)}
.hoja-cuerpo{overflow:auto;padding:var(--e2) var(--e4) var(--e5);overscroll-behavior:contain}
@media (min-width:700px){
  .hoja{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,calc(100vw - 32px));max-height:80dvh;border-bottom:1px solid var(--borde-fuerte);border-radius:var(--r-xl);
    transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:transform 200ms,opacity 200ms,visibility 0s 200ms}
  .hoja.abierta{transform:translate(-50%,-50%);opacity:1;pointer-events:auto;transition:transform 200ms,opacity 200ms,visibility 0s}
  .hoja-asa{display:none}
}

/* ============ Galería de miniaturas (Material) ============ */
.galeria{display:grid;gap:var(--e2);grid-template-columns:repeat(3,1fr)}
@media (min-width:700px){.galeria{grid-template-columns:repeat(5,1fr);gap:var(--e3)}}
@media (min-width:1280px){.galeria{grid-template-columns:repeat(6,1fr)}}
.mini{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--s2);border:1px solid var(--borde);color:var(--texto);text-decoration:none;cursor:pointer}
.mini img,.mini video{width:100%;height:100%;object-fit:cover}
.mini-ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.55)}
.mini:hover{border-color:var(--borde-fuerte)}
.mini[aria-pressed=true],.mini.sel{border-color:var(--acento);box-shadow:0 0 0 2px var(--acento)}
.mini-esq{position:absolute;display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:var(--r-pill);background:rgba(10,11,13,.72);font:600 11px/1.4 var(--f-ui);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mini-esq.sup-der{top:6px;right:6px}.mini-esq.inf-der{bottom:6px;right:6px}.mini-esq.inf-izq{bottom:6px;left:6px}
.mini-marca{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:var(--acento);display:grid;place-items:center;color:#fff}
.mini-prod{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.mini-prod .mini{aspect-ratio:1}
.mini-prod b{font:600 var(--t-sm)/1.3 var(--f-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-prod span{font-size:var(--t-xs);color:var(--texto-2)}
.galeria-prod{display:grid;gap:var(--e4) var(--e3);grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0}
.mini-prod:hover{color:inherit}.mini-prod:hover b{color:var(--acento-texto)}
@media (min-width:700px){.galeria-prod{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1280px){.galeria-prod{grid-template-columns:repeat(6,1fr)}}
/* Marcadores de posición para la guía y la maqueta (gradientes, no fotos) */
.ph-1{background:linear-gradient(135deg,#7a2a55,#e0558c 60%,#f6a1bd)}
.ph-2{background:linear-gradient(135deg,#1f4c63,#3d93b8 60%,#9ad3e8)}
.ph-3{background:linear-gradient(135deg,#4d3a82,#8c6fd6 60%,#cbb9f5)}
.ph-4{background:linear-gradient(135deg,#6b4a1f,#d19a3d 60%,#f0d08a)}
.ph-5{background:linear-gradient(135deg,#1f5c4a,#3fb28a 60%,#a5e3cd)}
.ph-6{background:linear-gradient(135deg,#5a2230,#c4455f 60%,#f0a1b0)}

/* ============ Guía de estilo ============ */
.guia-sec{margin-top:var(--e10)}
.guia-sec>h2{margin-bottom:var(--e2)}
.guia-sec>.meta{margin-bottom:var(--e5);max-width:68ch}
.muestras{display:grid;gap:var(--e3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.muestra-c{border:1px solid var(--borde);border-radius:var(--r-md);overflow:hidden;background:var(--s1)}
.muestra-c i{display:block;height:52px;border-bottom:1px solid var(--borde)}
.muestra-c div{padding:var(--e2) var(--e3);display:flex;flex-direction:column}
.muestra-c b{font-size:var(--t-sm)}.muestra-c code{font-size:var(--t-xs);color:var(--texto-3)}
.fila-guia{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}
.caja-guia{padding:var(--e5);background:var(--s1);border:1px solid var(--borde);border-radius:var(--r-lg)}
.iconos-rejilla{display:grid;gap:var(--e2);grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.iconos-rejilla div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--e3) var(--e1);border:1px solid var(--borde);border-radius:var(--r-md);background:var(--s1);font-size:11px;color:var(--texto-3);text-align:center;word-break:break-all}
.iconos-rejilla .ico{color:var(--texto)}
.escala-t>div{display:flex;align-items:baseline;gap:var(--e4);padding:var(--e2) 0;border-bottom:1px solid var(--borde)}
.escala-t code{flex:0 0 120px;color:var(--texto-3);font-size:var(--t-xs)}
.dos-col{display:grid;gap:var(--e4)}
@media (min-width:900px){.dos-col{grid-template-columns:1fr 1fr}}
.volver{display:inline-flex;align-items:center;gap:6px;color:var(--texto-2);text-decoration:none;font-size:var(--t-sm)}

/* ============ Material y fotos ============ */
.precio{font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}
.tachado{text-decoration:line-through;color:var(--texto-3);font-variant-numeric:tabular-nums}
.precio-linea{font-size:var(--t-md)}
.muestra{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.3);vertical-align:-2px;margin-left:2px}
.texto{white-space:pre-wrap;line-height:1.55;max-width:70ch;color:var(--texto)}
.filtros{display:grid;gap:var(--e3);grid-template-columns:1fr;margin-bottom:var(--e4)}
.filtros .campo{margin:0}
.filtros .casilla{min-height:44px}
@media (min-width:700px){.filtros{grid-template-columns:minmax(0,1fr) 240px auto auto;align-items:center}}
.total{margin:0 0 var(--e3);font-size:var(--t-sm);color:var(--texto-2)}
.mini-precio{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;font-size:var(--t-sm)!important}
.mini-precio .precio{font-size:var(--t-sm)}
.mini-precio .meta{font-size:var(--t-xs)}
.mini-prod .mini-ph{color:var(--texto-3)}
.paginas{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-top:var(--e5)}
.inactivo{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--e3);border-radius:var(--r-md);color:var(--texto-3);border:1px solid var(--borde);font-size:var(--t-sm)}
.sec{margin-top:var(--e6);display:flex;flex-direction:column;gap:var(--e3)}
.sec h2{font-size:var(--t-md)}
.mini-fig{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.mini-fig figcaption{font-size:var(--t-xs);color:var(--texto-2);display:flex;flex-direction:column;gap:4px;word-break:break-word}
.mini-fig figcaption b{color:var(--texto);font-size:var(--t-sm)}
.mini-fig figcaption a{color:var(--acento-texto)}
.mini-fig form{margin-top:2px}
.mini-fig .btn{width:100%}
.enlace-caja{display:flex;gap:var(--e2);align-items:stretch;min-width:0}
.enlace{flex:1;min-width:0;padding:var(--e2) var(--e3);border-radius:var(--r-md);background:var(--s2);border:1px solid var(--borde);font:500 var(--t-xs)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--texto-2);word-break:break-all;display:flex;align-items:center}
.fila-btns form{flex:1 1 auto;display:flex}
.fila-btns form .btn{flex:1}
.valoracion{display:flex;align-items:center;gap:6px}
.valoracion .ico{color:var(--est-borrador)}
.resena{margin:0;padding:var(--e3) var(--e4);border-left:3px solid var(--borde-fuerte);background:var(--s1);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--t-sm);color:var(--texto-2)}
.resena b{color:var(--texto)}
.subida{margin-top:var(--e3)}
.tarjeta-cuerpo h3{margin-top:var(--e2)}
@media (min-width:700px){.contenido .galeria{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.contenido .galeria{grid-template-columns:repeat(6,1fr)}}

/* ============ Borradores y piezas ============ */
.tarjeta-medio.sin-pieza{aspect-ratio:auto;min-height:112px}
.tipo-pieza{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tarjeta-medio .ph{color:var(--texto-3);display:flex;flex-direction:column;align-items:center;gap:var(--e2);font-size:var(--t-sm);padding:var(--e4);text-align:center}
.tarjeta-medio .render{position:absolute;inset:auto var(--e3) var(--e3);display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3);border-radius:var(--r-md);background:rgba(10,11,13,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:var(--t-sm);color:var(--texto)}
.tarjeta-medio .render progress{width:100%;height:6px;appearance:none;-webkit-appearance:none;border:0;border-radius:var(--r-pill);background:var(--s4);overflow:hidden}
.tarjeta-medio .render progress::-webkit-progress-bar{background:var(--s4)}
.tarjeta-medio .render progress::-webkit-progress-value{background:var(--est-render)}
.tarjeta-medio .render progress::-moz-progress-bar{background:var(--est-render)}
.tarjeta-medio video{object-fit:contain;background:#000}
.tarjeta-titulo b{font:600 var(--t-base)/1.3 var(--f-titulo);min-width:0;overflow:hidden;text-overflow:ellipsis}
.tarjeta-pie{flex-wrap:wrap}
.tarjeta-pie form{flex:1;display:flex}
.tarjeta-pie form .btn{flex:1}
.adjuntar{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3);border-radius:var(--r-md);background:var(--s2);border:1px solid var(--borde)}
.adjuntar label{font:600 var(--t-xs)/1.2 var(--f-ui);color:var(--texto-2);letter-spacing:.04em;text-transform:uppercase}
.adjuntar .fila{display:flex;gap:var(--e2)}
.adjuntar select{flex:1;min-width:0}
@media (min-width:700px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.tarjetas{grid-template-columns:repeat(3,1fr)}}
.tarjetas>.tarjeta{display:flex;flex-direction:column}
.tarjetas>.tarjeta .tarjeta-cuerpo{flex:1}

/* ============ Login y páginas sin sesión ============ */
.sola{min-height:100dvh;display:grid;place-items:center;padding:var(--e6) var(--e4)}
.sola-caja{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--e5)}
.sola-marca{display:flex;align-items:center;gap:var(--e3);font:700 var(--t-lg)/1 var(--f-titulo)}
.sola-marca i{width:40px;height:40px;border-radius:12px;background:var(--acento-boton);color:#fff;display:grid;place-items:center;font:800 18px/1 var(--f-titulo);font-style:normal}
.sola .tarjeta-cuerpo{gap:var(--e4)}
.sola .campo{margin:0}

/* ============ Secuencias y plantillas de video ============ */
#tomas-vista{position:absolute;inset:0;overflow:hidden;background:#000}
#toma-img,#toma-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;pointer-events:none;display:block}
#toma-video{display:none}.est-marco.toma-clip #toma-video{display:block}.est-marco.toma-clip #toma-img{display:none}
.clip-secuencia{border:0;background:var(--s3);overflow:visible}
.clip-toma{position:absolute;top:0;bottom:0;border:2px solid var(--acento);border-radius:var(--r-sm);background:var(--s4);overflow:hidden;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;box-sizing:border-box}
.clip-toma img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.clip-toma span{position:relative;z-index:1;font:700 11px/1 var(--f-ui);background:rgba(10,11,13,.7);padding:2px 6px;border-radius:var(--r-pill)}
.clip-toma.sel{box-shadow:inset 0 0 0 2px #fff;z-index:2}
.toma-fila{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--e3);padding:var(--e3);border-radius:var(--r-md);background:var(--s1);border:1px solid var(--borde)}
.toma-fila.sel{border-color:var(--acento)}
.toma-fila .mini{width:64px;height:64px;padding:0}
.toma-fila .mini .mini-ph{position:static;height:100%;color:var(--texto-3)}
.toma-cuerpo{gap:var(--e2)}
.toma-cuerpo b{font:600 var(--t-sm)/1.2 var(--f-ui)}
/* Galería de plantillas: vistas previas animadas en CSS (una maqueta del movimiento, no un render) */
.tarjetas-plantilla{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.tarjetas-plantilla{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.tarjetas-plantilla{grid-template-columns:repeat(5,1fr)}}
.tarjeta.plantilla{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.tarjeta.plantilla:hover{border-color:var(--acento)}
.plantilla-previa{aspect-ratio:9/16;background:#1b1d22;position:relative;overflow:hidden;display:block}
.pv-foto{position:absolute;inset:0;background:linear-gradient(160deg,#d1689a,#4d7bd6 55%,#f2b53a);transform-origin:center}
.pv-txt{position:absolute;left:10%;right:10%;text-align:center;color:#fff;font:800 clamp(12px,9cqw,22px)/1.1 var(--f-titulo);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.plantilla-previa{container-type:inline-size}
.pv-zoom{animation:pv-zoom 8s ease-in-out infinite alternate}
@keyframes pv-zoom{from{transform:scale(1)}to{transform:scale(1.25)}}
.pv-gancho{top:38%;animation:pv-aparece 8s infinite}
.pv-precio{top:70%;font-size:clamp(14px,11cqw,26px);animation:pv-aparece 8s infinite 2.6s;opacity:0}
.pv-pill{position:absolute;left:18%;right:18%;bottom:8%;padding:6% 0;border-radius:999px;background:var(--acento);color:#fff;text-align:center;font:700 clamp(10px,7cqw,16px)/1 var(--f-ui);animation:pv-aparece 8s infinite 5.6s;opacity:0}
@keyframes pv-aparece{0%{opacity:0;transform:translateY(12px)}6%{opacity:1;transform:none}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
.pv-tonos{position:absolute;inset:0;display:flex;width:400%;animation:pv-desliza 8s steps(1) infinite}
.pv-tonos s{flex:1;display:block}
.pv-tonos s:nth-child(1){background:#c9456f}.pv-tonos s:nth-child(2){background:#e07a8b}.pv-tonos s:nth-child(3){background:#9b2f52}.pv-tonos s:nth-child(4){background:#f0a3a3}
@keyframes pv-desliza{0%{transform:translateX(0)}25%{transform:translateX(-25%)}50%{transform:translateX(-50%)}75%{transform:translateX(-75%)}}
.pv-tono{bottom:12%;top:auto;background:rgba(10,11,13,.6);border-radius:8px;padding:4% 0;font-size:clamp(11px,7cqw,16px)}
.pv-pasos{background:linear-gradient(160deg,#2f8f6b,#1b5a8a 60%,#5b6dd6)}
.pv-paso{position:absolute;left:12%;top:10%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center;font:800 clamp(12px,9cqw,22px)/1 var(--f-titulo);opacity:0}
.pv-paso.p1{animation:pv-aparece 9s infinite}.pv-paso.p2{animation:pv-aparece 9s infinite 3s}.pv-paso.p3{animation:pv-aparece 9s infinite 6s}
.pv-rev{opacity:0}
.pv-rev.r1{background:linear-gradient(160deg,#5b6dd6,#2f8f6b);animation:pv-fundido 9s infinite}
.pv-rev.r2{background:linear-gradient(160deg,#9a7a2a,#d1689a);animation:pv-fundido 9s infinite 3s}
.pv-rev.r3{background:linear-gradient(160deg,#c9456f,#4d7bd6);animation:pv-fundido 9s infinite 6s}
@keyframes pv-fundido{0%{opacity:0}8%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}}
.pv-titulo{top:40%}
.pv-cortes{animation:pv-cortes 7.2s steps(1) infinite}
@keyframes pv-cortes{0%{background:linear-gradient(160deg,#d1689a,#4d7bd6)}20%{background:linear-gradient(160deg,#4d7bd6,#f2b53a)}40%{background:linear-gradient(160deg,#2f8f6b,#d1689a)}60%{background:linear-gradient(160deg,#f2b53a,#9a7a2a)}80%{background:linear-gradient(160deg,#9b2f52,#5b6dd6)}}
.pv-pie{bottom:12%;top:auto;background:rgba(10,11,13,.6);border-radius:8px;padding:4% 0;font-size:clamp(11px,7cqw,16px)}
@media (prefers-reduced-motion:reduce){.plantilla-previa *{animation:none!important}.pv-precio,.pv-pill,.pv-paso,.pv-rev{opacity:1}}
/* Formulario de plantilla */
.producto-elegido{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3);border-radius:var(--r-md);background:var(--s2);border:1px solid var(--borde)}
.producto-elegido .fila-btns{flex:0 0 auto}
.producto-elegido .fila-btns .btn{flex:0 0 auto}
.mini-res{width:36px;height:36px;object-fit:cover;border-radius:var(--r-sm)}
#resultados .capa .meta{flex:0 0 auto}

/* ============ Estudio (editor) ============ */
body.estudio{overflow:hidden;height:100dvh}
.est{height:100dvh;display:grid;grid-template-rows:52px minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);background:var(--fondo)}
.est-barra{display:flex;align-items:center;gap:var(--e2);padding:0 var(--e3);border-bottom:1px solid var(--borde);background:var(--s1);min-width:0}
.est-barra .titulo{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.est-barra .titulo b{display:block;font:600 var(--t-sm)/1.2 var(--f-titulo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-barra .titulo small{font-size:11px;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-barra .solo-ancho{display:none}
.est-barra .solo-movil{color:var(--est-borrador);font-weight:600}
#estado.sucio,#estado.atencion{color:var(--est-borrador)}#estado.ok{color:var(--est-aprobado)}#estado.error{color:var(--est-error)}
#hoja-version .hoja-cuerpo{display:flex;flex-direction:column;gap:var(--e4)}#hoja-version .texto{font-size:var(--t-sm);color:var(--texto-2)}
.est-lienzo{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e3);padding:var(--e3);background:
  radial-gradient(circle at 50% 40%,#1b1d22,#0e0f12 70%);transition:padding 200ms}
/* El marco mide lo más grande que cabe en su contenedor sin deformarse: --rel = ancho/alto */
.est-marco-wrap{flex:1;min-height:0;width:100%;display:grid;place-items:center;container-type:size}
.est-marco{--rel:.8;position:relative;width:min(100cqw,calc(100cqh * var(--rel)));aspect-ratio:var(--rel);border-radius:6px;overflow:hidden;background:var(--s2);
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);container-type:size;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.est-marco img#previa{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.est-marco video{position:absolute;display:block;background:transparent;pointer-events:none}
#capas{position:absolute;inset:0}
.caja{position:absolute;border:1px dashed rgba(255,255,255,.6);outline:1px dashed rgba(0,0,0,.4);touch-action:none;cursor:move}
.caja.sel{border:2px solid var(--acento);outline:none;z-index:2}
.caja .asa{display:none;position:absolute;right:2px;bottom:2px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--acento);touch-action:none;cursor:nwse-resize;box-shadow:var(--sombra-1)}
.caja.sel .asa{display:block}
.caja .asa::after{content:"";position:absolute;inset:-10px}
.est-lienzo #problemas{position:absolute;left:var(--e3);right:var(--e3);top:calc(var(--e3) + 44px);z-index:5;box-shadow:var(--sombra-2)}
.est-lienzo #problemas ul{margin:4px 0 0;padding-left:18px}
.est-lienzo #problemas strong{font-weight:600}
.est-ajustes{position:absolute;top:var(--e3);right:var(--e3);z-index:5;--bg:rgba(20,21,25,.85);box-shadow:var(--sombra-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.est-transporte{display:flex;align-items:center;gap:var(--e3);color:var(--texto-2);font:500 var(--t-sm)/1 var(--f-ui);flex:0 0 auto;width:100%;max-width:560px}
.est-transporte .btn-icono{--bg:var(--s3);flex:0 0 auto}
.est-transporte input[type=range]{flex:1;min-width:0}
.est-transporte time{font-variant-numeric:tabular-nums;min-width:84px;text-align:center;white-space:nowrap}
.est-transporte time b{color:var(--texto);font-weight:600}
/* Piezas dentro del lienzo (maqueta de la guía) */
.cv-fondo{position:absolute;inset:0}
.cv-prod{position:absolute;left:50%;top:44%;width:44%;aspect-ratio:3/5;transform:translate(-50%,-50%);border-radius:18% 18% 12% 12%/10% 10% 8% 8%;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.88) 40%,rgba(255,255,255,.55));box-shadow:0 20px 30px rgba(0,0,0,.25)}
.cv-prod::before{content:"";position:absolute;left:30%;right:30%;top:-12%;height:14%;border-radius:4px 4px 0 0;background:rgba(255,255,255,.8)}
.cv-caja{position:absolute;cursor:grab;outline:1.5px solid transparent}
.cv-caja.sel{outline-color:var(--acento);}
.cv-caja.sel::before,.cv-caja.sel::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--acento)}
.cv-caja.sel::before{left:-5px;top:-5px}.cv-caja.sel::after{right:-5px;bottom:-5px}
.cv-titulo{left:6%;right:6%;top:6%;font:800 clamp(18px,6.4cqw,40px)/1.05 var(--f-titulo);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.3);letter-spacing:-.02em}
.cv-precio{left:6%;bottom:6%;padding:2.2cqw 4cqw;border-radius:2cqw;background:var(--acento);color:#fff;font:800 clamp(18px,7cqw,44px)/1 var(--f-titulo)}
.cv-precio s{display:block;font:500 .42em/1.2 var(--f-ui);opacity:.85}
.est-rail{display:none}

/* Línea de tiempo */
.linea{background:var(--s1);border-top:1px solid var(--borde);padding:var(--e2) 0 var(--e3);user-select:none;-webkit-user-select:none}
.linea:empty{display:none}
.linea-cab{display:flex;align-items:center;justify-content:space-between;padding:0 var(--e3) var(--e2);font-size:var(--t-xs);color:var(--texto-3)}
.linea-cab b{color:var(--texto-2);font-weight:600}
.linea-pista{position:relative;margin:0 var(--e3);touch-action:none}
.regla{display:flex;justify-content:space-between;height:18px;font:500 10px/18px var(--f-ui);color:var(--texto-3);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--borde)}
.carril{position:relative;height:44px;margin-top:6px;border-radius:var(--r-sm);background:var(--s2)}
.carril.fino{height:26px}
.clip{position:absolute;top:0;bottom:0;border-radius:var(--r-sm);border:2px solid var(--acento);background:repeating-linear-gradient(90deg,var(--s3) 0 22px,var(--s4) 22px 23px)}
.clip .asa{position:absolute;top:-2px;bottom:-2px;width:14px;background:var(--acento);display:grid;place-items:center;cursor:ew-resize}
.clip .asa::before{content:"";position:absolute;inset:-8px -12px}
.clip .asa::after{content:"";width:2px;height:16px;border-radius:2px;background:rgba(255,255,255,.9)}
.clip .asa.izq{left:-2px;border-radius:3px 0 0 3px}.clip .asa.der{right:-2px;border-radius:0 3px 3px 0}
.cinta{position:absolute;top:3px;bottom:3px;border:0;border-radius:5px;display:flex;align-items:center;gap:6px;padding:0 var(--e2);font:600 11px/1 var(--f-ui);color:#fff;white-space:nowrap;overflow:hidden;cursor:pointer;min-width:24px;opacity:.85}
.cinta:hover,.cinta.sel{opacity:1;box-shadow:0 0 0 1.5px #fff}
.cinta.texto{background:#5b6dd6}.cinta.precio{background:#b3447a}.cinta.imagen{background:#2f8f6b}.cinta.logo{background:#9a7a2a}
.cabezal{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;z-index:3}
.cabezal::before{content:"";position:absolute;top:-1px;left:50%;width:14px;height:12px;transform:translateX(-50%);background:#fff;border-radius:3px 3px 7px 7px}

/* Barra inferior de herramientas */
.est-herr{position:relative;z-index:61;display:flex;background:var(--s1);border-top:1px solid var(--borde);padding:var(--e1) var(--e1) calc(var(--e1) + env(safe-area-inset-bottom,0px))}
.herr{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:calc(var(--herr-alto) - 8px);border:0;background:transparent;color:var(--texto-2);font:600 10.5px/1 var(--f-ui);cursor:pointer;border-radius:var(--r-md);position:relative;-webkit-tap-highlight-color:transparent}
.herr .ico{width:22px;height:22px}
.herr:hover{color:var(--texto)}
.herr[aria-pressed=true]{color:var(--texto)}
.herr[aria-pressed=true] .ico{color:var(--acento-texto)}

/* En el teléfono, la biblioteca (herramienta) y las propiedades son hojas
   sobre el lienzo, por encima de la barra de herramientas. Cerradas quedan
   fuera de pantalla y sin interacción (visibility). */
.est-biblio,.est-props{display:flex;position:fixed;z-index:60;left:0;right:0;bottom:calc(var(--herr-alto) + env(safe-area-inset-bottom,0px));max-height:56dvh;flex-direction:column;background:var(--s2);border-top:1px solid var(--borde-fuerte);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sombra-3);transform:translateY(calc(100% + 90px));visibility:hidden;transition:transform 260ms cubic-bezier(.2,.8,.2,1),visibility 0s 260ms}
.est-biblio.abierta,.est-props.abierta{transform:none;visibility:visible;transition:transform 260ms cubic-bezier(.2,.8,.2,1),visibility 0s}
.est-props .hoja-cuerpo{padding:0;flex:1;min-height:0}
body.estudio .telon{z-index:65}
#hoja-resultado,#hoja-version{z-index:70}
.telon-estudio{background:rgba(0,0,0,.35)}
.herr-panel{display:none;flex-direction:column;min-height:0}
.herr-panel.activo{display:flex;flex:1}
.herr-panel .hoja-cuerpo{display:flex;flex-direction:column;gap:var(--e4);flex:1;min-height:0}
.est-cierra{display:flex}
.apilado{display:flex;flex-direction:column;gap:var(--e3)}
.apilado:empty{display:none}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
.fila-btns{display:flex;flex-wrap:wrap;gap:var(--e2)}
.fila-btns .btn{flex:1 1 auto}
.fila-ctl{display:flex;align-items:center;gap:var(--e3);min-height:44px}
.fila-ctl>span{flex:0 0 76px;font-size:var(--t-sm);color:var(--texto-2)}
.fila-ctl input[type=range]{flex:1}
.fila-ctl output{flex:0 0 40px;text-align:right;font-size:var(--t-sm);color:var(--texto-2);font-variant-numeric:tabular-nums}
/* Control con etiqueta y valor arriba, deslizador abajo */
.ctl{display:flex;flex-direction:column;gap:2px}
.ctl-cab{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);color:var(--texto-2)}
.ctl-cab output{font-variant-numeric:tabular-nums;color:var(--texto)}
.minis{display:flex;gap:var(--e2);overflow-x:auto;padding:2px 0 var(--e1);scroll-snap-type:x proximity}
.minis .mini{flex:0 0 72px;width:72px;height:72px;padding:0;scroll-snap-align:start}
.filtro-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2)}
.filtro{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:11px;font-weight:600;color:var(--texto-2);background:transparent;border:0;cursor:pointer;padding:0}
.filtro i{display:block;width:100%;aspect-ratio:1;border-radius:var(--r-md);border:2px solid transparent;overflow:hidden;background:var(--s3)}
.filtro i img{width:100%;height:100%;object-fit:cover;display:block}
.filtro i.filtro-video{background:linear-gradient(135deg,#d1689a,#4d7bd6 55%,#f2b53a)}
.filtro[aria-pressed=true] i{border-color:var(--acento)}
.filtro[aria-pressed=true]{color:var(--texto)}
.collage-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2)}
.collage{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--e2);border-radius:var(--r-md);background:var(--s2);border:1px solid var(--borde-fuerte);color:var(--texto-2);font:600 10.5px/1.2 var(--f-ui);cursor:pointer;text-align:center}
.collage[aria-pressed=true]{border-color:var(--acento);background:var(--acento-suave);color:var(--texto)}
.collage .cl{width:100%;aspect-ratio:1;display:grid;gap:2px}
.collage .cl i{background:var(--borde-fuerte);border-radius:2px}
.collage[aria-pressed=true] .cl i{background:var(--acento-texto)}
.biblio-busca{display:flex;gap:var(--e2)}
.precio-tarjeta{display:flex;flex-direction:column;gap:4px;padding:var(--e4);border-radius:var(--r-md);background:var(--s2);border:1px solid var(--borde)}
.precio-tarjeta b{font:800 var(--t-xl)/1.2 var(--f-titulo);font-variant-numeric:tabular-nums}
.resultado-img{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--s3)}
#render-estado video{display:block;width:100%;max-height:60dvh;border-radius:var(--r-md);background:#000}
#render-estado progress{width:100%;height:8px;appearance:none;-webkit-appearance:none;border:0;border-radius:var(--r-pill);background:var(--s4);overflow:hidden}
#render-estado progress::-webkit-progress-bar{background:var(--s4);border-radius:var(--r-pill)}
#render-estado progress::-webkit-progress-value{background:var(--est-render);border-radius:var(--r-pill)}
#render-estado progress::-moz-progress-bar{background:var(--est-render);border-radius:var(--r-pill)}
.props-sec{padding:var(--e4);border-bottom:1px solid var(--borde);display:flex;flex-direction:column;gap:var(--e3)}
.props-sec:last-child{border-bottom:0}
.props-sec h4{display:flex;align-items:center;gap:var(--e2);color:var(--texto-2);font:700 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.props-sec h4 .ico{color:var(--acento-texto)}
.props-sec textarea{min-height:72px}
.capas-lista{display:flex;flex-direction:column;gap:2px}
.capa{display:flex;align-items:center;gap:var(--e3);min-height:40px;padding:0 var(--e3);border:0;border-radius:var(--r-md);background:transparent;color:var(--texto-2);font:500 var(--t-sm)/1.2 var(--f-ui);cursor:pointer;text-align:left;width:100%}
.capa:hover{background:var(--s2)}
.capa.sel,.capa[aria-pressed=true]{background:var(--s3);color:var(--texto)}
.capa span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capa .ico{color:var(--texto-3);flex:0 0 auto}
.capa.sel>.ico:first-child,.capa[aria-pressed=true]>.ico:first-child{color:var(--acento-texto)}

/* ----- Escritorio: riel | biblioteca | lienzo | propiedades, y la línea abajo ----- */
@media (min-width:1024px){
  .est{grid-template-rows:56px minmax(0,1fr) auto;grid-template-columns:64px 308px minmax(0,1fr) 316px}
  .est-barra{grid-column:1/-1;padding:0 var(--e4);gap:var(--e3)}
  .est-barra .solo-ancho{display:inline}.est-barra .solo-movil{display:none}
  .est-rail{grid-row:2;grid-column:1;display:flex;flex-direction:column;gap:var(--e1);padding:var(--e2) var(--e1);background:var(--s1);border-right:1px solid var(--borde)}
  .est-herr,.est-ajustes{display:none}
  .est-rail .herr{flex:none;min-height:58px}
  .est-biblio,.est-props{position:static;display:flex;transform:none;visibility:visible;max-height:none;border-radius:0;box-shadow:none;border-top:0;background:var(--s1);overflow:hidden;transition:none}
  .est-biblio{grid-row:2;grid-column:2;border-right:1px solid var(--borde)}
  .est-props{grid-row:2;grid-column:4;border-left:1px solid var(--borde)}
  .est-biblio .hoja-asa,.est-props .hoja-asa,.est-cierra{display:none}
  .est-biblio .hoja-cab,.est-props .hoja-cab{padding-top:var(--e4)}
  .est-props .hoja-cuerpo{overflow:auto}
  .est-lienzo{grid-row:2;grid-column:3;padding:var(--e5)}
  .est-lienzo #problemas{top:var(--e5);left:var(--e5);right:var(--e5);max-width:560px;margin:0 auto}
  .linea{grid-row:3;grid-column:1/-1;padding-bottom:var(--e4)}
  .linea-cab,.linea-pista{margin-left:var(--e5);margin-right:var(--e5);padding-left:0;padding-right:0}
  .carril{height:48px}
  .props-sec{padding:var(--e3) var(--e4);gap:var(--e2)}
  .props-sec textarea{min-height:56px!important}
  .telon-estudio{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}