/* Sistema visual del Generador de landings, extraido tal cual de base.html (app Flask original). */
  /* ======================================================================
     Sistema visual «Centro de despacho»: tinta de etiqueta, hormigón y naranja señal.
     Archivo en tres anchos: ancha para títulos, normal para texto, estrecha para cifras.
     ====================================================================== */
  @font-face { font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(/static/fonts/archivo-latin.woff2) format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(/static/fonts/archivo-latin-ext.woff2) format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  @font-face { font-family:"Archivo Ancha"; font-style:normal; font-weight:100 900; font-stretch:116%; font-display:swap; src:url(/static/fonts/archivo-latin.woff2) format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family:"Archivo Ancha"; font-style:normal; font-weight:100 900; font-stretch:116%; font-display:swap; src:url(/static/fonts/archivo-latin-ext.woff2) format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0; }
  @font-face { font-family:"Archivo Estrecha"; font-style:normal; font-weight:100 900; font-stretch:80%; font-display:swap; src:url(/static/fonts/archivo-latin.woff2) format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

  :root {
    color-scheme:light;
    --lienzo:#ECEEF3; --lienzo-2:#E3E6EE; --lateral:#141933; --tarjeta:#FFFFFF; --campo:#FFFFFF; --hover:#F1F3F8; --elevado:#FFFFFF;
    --tinta:#141933; --suave:#4F5776; --tenue:#858CA7; --linea:#DFE2EB; --linea-2:#CCD1DE; --linea-3:#B1B8CB;
    --accion:#FF5A1F; --accion-2:#FF7A45; --accion-osc:#E2450C; --accion-claro:#FFEDE4; --accion-borde:#FFC6AC; --accion-brillo:rgba(255,90,31,.34);
    --cobalto:#3651F5; --cobalto-claro:#E9EDFF;
    --ok:#0A8F5D; --ok-claro:#E2F6EC; --ok-borde:#A8DEC5;
    --alerta:#94590A; --alerta-claro:#FFF4DE; --alerta-borde:#F0CF8E;
    --error:#C8322B; --error-claro:#FDECEB; --error-borde:#F3C0BC;
    --info:#2F4BE0; --info-claro:#ECEFFF; --info-borde:#C5CEFA;
    --solido:#141933; --solido-txt:#FFFFFF; --solido-suave:#A7AECB; --solido-linea:#2A3156;
    --sombra-1:0 1px 2px rgba(20,25,51,.06);
    --sombra-2:0 1px 2px rgba(20,25,51,.05), 0 8px 22px -14px rgba(20,25,51,.22);
    --sombra-3:0 34px 80px -30px rgba(20,25,51,.5), 0 2px 10px rgba(20,25,51,.08);
    --rail-txt:#AEB4D0; --rail-tenue:#6F779C; --rail-linea:rgba(255,255,255,.08); --rail-hover:rgba(255,255,255,.065); --rail-on:rgba(255,255,255,.1);
    --rejilla:transparent; --resplandor:transparent;
    --fondo:var(--lienzo); --marca:var(--tinta); --marca-claro:var(--accion-claro);
    --titulo:"Archivo Ancha", "Archivo", "Segoe UI", system-ui, sans-serif;
    --texto:"Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
    --cifras:"Archivo Estrecha", "Archivo", "Segoe UI", system-ui, sans-serif;
    --r:12px; --r-peq:10px; --r-card:18px; --r-xl:26px;
    --ease-out:cubic-bezier(.16,1,.3,1); --ease-muelle:cubic-bezier(.34,1.56,.64,1); --ease-io:cubic-bezier(.65,0,.35,1);
    --rail-w:256px;
  }
  [data-tema="oscuro"] {
    color-scheme:dark;
    --lienzo:#0A0D19; --lienzo-2:#0E1223; --lateral:#06080F; --tarjeta:#11162B; --campo:#0C1023; --hover:#182040; --elevado:#161C37;
    --tinta:#E9ECF8; --suave:#A3AACA; --tenue:#6B7396; --linea:#1C2341; --linea-2:#283056; --linea-3:#3A4472;
    --accion:#FF6326; --accion-2:#FF8650; --accion-osc:#FF7A42; --accion-claro:rgba(255,99,38,.13); --accion-borde:rgba(255,99,38,.42); --accion-brillo:rgba(255,99,38,.5);
    --cobalto:#8293FF; --cobalto-claro:rgba(130,147,255,.13);
    --ok:#36D08F; --ok-claro:rgba(54,208,143,.11); --ok-borde:rgba(54,208,143,.34);
    --alerta:#F3B84A; --alerta-claro:rgba(243,184,74,.11); --alerta-borde:rgba(243,184,74,.34);
    --error:#FF6B5E; --error-claro:rgba(255,107,94,.11); --error-borde:rgba(255,107,94,.36);
    --info:#8EA2FF; --info-claro:rgba(142,162,255,.11); --info-borde:rgba(142,162,255,.34);
    --solido:#1E2547; --solido-txt:#FFFFFF; --solido-suave:#9AA2C4; --solido-linea:#303A68;
    --sombra-1:0 0 0 1px rgba(255,255,255,.015);
    --sombra-2:inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px -20px rgba(0,0,0,.85);
    --sombra-3:0 40px 100px -30px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.07);
    --rail-txt:#959CBE; --rail-tenue:#5B6388; --rail-linea:rgba(255,255,255,.06); --rail-hover:rgba(255,255,255,.05); --rail-on:rgba(255,255,255,.08);
  }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  html { background:var(--lienzo); scroll-padding-top:80px; }
  body { margin:0; font-family:var(--texto); font-size:14.5px; line-height:1.55; background:var(--lienzo); color:var(--tinta);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  b, strong { font-weight:650; }
  a { color:var(--tinta); text-decoration-color:var(--linea-3); text-underline-offset:3px; transition:text-decoration-color .2s, color .2s; }
  a:hover { text-decoration-color:var(--accion); }
  :focus-visible { outline:2px solid var(--accion); outline-offset:2px; }
  ::selection { background:var(--accion-brillo); color:var(--tinta); }
  * { scrollbar-width:thin; scrollbar-color:var(--linea-3) transparent; }

  /* ------------------------------------------------------------ estructura */
  .app { display:grid; grid-template-columns:var(--rail-w) minmax(0, 1fr); min-height:100vh; transition:grid-template-columns .5s var(--ease-out); }
  .rail-compacta { --rail-w:80px; }

  /* ------------------------------------------------------------ carril lateral (siempre en tinta) */
  .lateral { position:sticky; top:0; height:100vh; z-index:40; display:flex; flex-direction:column; padding:18px 12px 12px; background:var(--lateral); color:var(--rail-txt); overflow:hidden;
    box-shadow:inset -1px 0 0 var(--rail-linea); }
  .logo { display:flex; align-items:center; gap:12px; padding:2px 8px 18px; text-decoration:none; color:#fff; white-space:nowrap; }
  .logo-marca { position:relative; width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; color:#fff; background:var(--accion);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 10px 24px -10px var(--accion-brillo); transition:transform .5s var(--ease-muelle); }
  .logo:hover .logo-marca { transform:rotate(-8deg) scale(1.05); }
  .logo-marca svg { width:18px; height:18px; transition:transform .5s var(--ease-muelle); }
  .logo:hover .logo-marca svg { transform:translate(2px, -2px); }
  .logo-txt { font:800 17px/1.1 var(--titulo); letter-spacing:-.025em; transition:opacity .25s; }
  .logo-txt small { display:block; margin-top:2px; font:500 11.5px/1.3 var(--texto); letter-spacing:0; color:var(--rail-tenue); }

  /* idioma de la app: arriba del todo, encima de la tienda */
  .ia-app { position:relative; display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:0 10px; height:36px; border-radius:12px; color:var(--rail-tenue);
    background:rgba(255,255,255,.045); border:1px solid var(--rail-linea); cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
  .ia-app:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#fff; }
  .ia-app:focus-within { border-color:var(--accion); }
  .ia-app svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ia-app select { all:unset; flex:1; min-width:0; font-size:13px; font-weight:600; color:#fff; cursor:pointer; padding-right:22px; margin-right:-22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ia-app select option { color:#111; background:#fff; }
  .ia-app select:disabled { cursor:not-allowed; opacity:.75; }
  .ia-app .ia-fl { pointer-events:none; }
  .rail-compacta .ia-app { padding:0 9px; } .rail-compacta .ia-app select, .rail-compacta .ia-app .ia-fl { opacity:0; }
  .rail-compacta .ia-app select { position:absolute; inset:0; margin:0; padding:0; }
  .ts { position:relative; margin:0 0 12px; }
  .ts-btn { list-style:none; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; cursor:pointer; color:#fff;
    background:rgba(255,255,255,.045); border:1px solid var(--rail-linea); transition:background .2s, border-color .2s; }
  .ts-btn::-webkit-details-marker { display:none; } .ts-btn::before { display:none !important; content:none !important; }
  .ts-btn:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
  .ts-av { width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--accion); color:#fff; font:800 14px var(--titulo); overflow:hidden; }
  .ts-av img { width:100%; height:100%; object-fit:contain; background:#fff; }
  .ts-txt { min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.2; }
  .ts-txt b { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ts-txt small { font-size:11px; color:var(--rail-tenue); white-space:nowrap; }
  .ts-fl, .ts-ok, .ts-nueva svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .ts-fl { color:var(--rail-tenue); transition:transform .3s var(--ease-out); }
  .ts[open] .ts-fl { transform:rotate(180deg); }
  .ts-menu { position:absolute; left:0; top:calc(100% + 8px); z-index:80; width:max(100%, 250px); color:var(--tinta); background:var(--elevado); border:1px solid var(--linea-2); border-radius:16px; padding:6px;
    box-shadow:var(--sombra-3); transform-origin:20% 0; animation:pop .32s var(--ease-out); }
  .ts-menu p { margin:6px 8px 8px; font-size:12px; color:var(--tenue); }
  .ts-op { all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; color:var(--tinta); }
  .ts-op .ts-txt small { color:var(--tenue); }
  .ts-op:hover { background:var(--hover); } .ts-op.on { background:var(--accion-claro); } .ts-op:focus-visible { outline:2px solid var(--accion); outline-offset:-2px; }
  .ts-ok { color:var(--accion); }
  .ts-nueva { display:flex; align-items:center; gap:8px; padding:10px 8px 6px; margin-top:4px; border-top:1px solid var(--linea); font-size:13px; color:var(--suave); text-decoration:none; }
  .ts-nueva:hover { color:var(--accion); }
  @keyframes pop { from { opacity:0; transform:translateY(-6px) scale(.96); } }

  .nav { position:relative; display:flex; flex-direction:column; gap:1px; margin:0 -6px; padding:0 6px; }
  .nav-princ { flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-color:rgba(255,255,255,.14) transparent;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent); mask-image:linear-gradient(#000 calc(100% - 26px), transparent); padding-bottom:20px; }
  .nav-grupo { position:relative; font-size:11.5px; font-weight:600; color:var(--rail-tenue); padding:16px 10px 6px; white-space:nowrap; letter-spacing:.01em; }
  .nav a { position:relative; z-index:1; display:flex; align-items:center; gap:12px; min-height:38px; padding:0 10px; border-radius:10px; color:var(--rail-txt); text-decoration:none;
    font-weight:500; font-size:13.75px; white-space:nowrap; transition:color .2s, background-color .2s; }
  .nav a svg { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease-muelle), color .2s; }
  .nav a span { overflow:hidden; text-overflow:ellipsis; transition:opacity .2s; }
  .nav a:hover { color:#fff; }
  .nav a:hover svg { transform:scale(1.12); }
  .nav a.on { color:#fff; font-weight:600; background:var(--rail-on); }
  .nav a.on svg { color:var(--accion); }
  .nav-ind { position:absolute; left:-6px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accion); box-shadow:0 0 14px 1px var(--accion-brillo); }
  .nav-hov { position:absolute; left:6px; right:6px; top:0; height:38px; border-radius:10px; background:var(--rail-hover); opacity:0; pointer-events:none; z-index:0;
    transition:transform .38s var(--ease-out), height .3s var(--ease-out), opacity .25s; }
  .nav-hov.on { opacity:1; }
  .badge { margin-left:auto; background:var(--accion); color:#fff; font-style:normal; font-size:11px; font-weight:700; border-radius:10px; padding:0 6px; line-height:18px; min-width:18px; text-align:center;
    box-shadow:0 0 0 3px var(--lateral); animation:badge-entra .6s var(--ease-muelle) .4s both; }
  @keyframes badge-entra { from { transform:scale(0); } }
  .nav-cta { margin-bottom:6px; }
  .nav a.nueva { color:#fff; margin:0; justify-content:center; font-weight:650; font-size:14px; min-height:42px; overflow:hidden; isolation:isolate;
    background:var(--accion); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.1), 0 12px 26px -12px var(--accion-brillo); transition:transform .3s var(--ease-muelle), box-shadow .3s; }
  .nav a.nueva::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform:translateX(-120%);
    animation:barrido 7s var(--ease-io) 2.4s infinite; }
  @keyframes barrido { 0%, 16% { transform:translateX(-120%); } 30%, 100% { transform:translateX(120%); } }
  .nav a.nueva:hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 30px -12px var(--accion-brillo); }
  .nav a.nueva:hover svg { transform:rotate(90deg); }
  .nav a.nueva.on { background:var(--accion-osc); }
  .lat-pie { border-top:1px solid var(--rail-linea); padding-top:10px; margin-top:6px; display:flex; flex-direction:column; gap:8px; }
  .lat-fila { display:flex; gap:6px; align-items:center; }
  .tema { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; padding:3px; border-radius:11px; background:rgba(255,255,255,.05); position:relative; }
  .tema button { position:relative; z-index:1; margin:0; min-height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--rail-tenue); box-shadow:none; transition:color .2s; }
  .tema button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s var(--ease-muelle); }
  .tema button:hover { color:#fff; background:transparent; filter:none; }
  .tema button:hover svg { transform:rotate(25deg); }
  .tema button.on { color:#fff; background:rgba(255,255,255,.12); }
  .plegar { margin:0; width:36px; min-height:34px; padding:0; flex:none; border:0; border-radius:10px; background:rgba(255,255,255,.05); color:var(--rail-tenue); box-shadow:none; }
  .plegar:hover { background:rgba(255,255,255,.1); color:#fff; filter:none; }
  .plegar svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s var(--ease-muelle); }
  .rail-compacta .plegar svg { transform:rotate(180deg); }

  /* carril plegado */
  .rail-compacta .logo { padding-left:9px; }
  .rail-compacta .logo-txt, .rail-compacta .ts-txt, .rail-compacta .ts-fl, .rail-compacta .nav a span { opacity:0; pointer-events:none; }
  .rail-compacta .ts-btn { padding:8px 9px; }
  .rail-compacta .nav-grupo { font-size:0; padding:12px 10px 8px; }
  .rail-compacta .nav-grupo::after { content:""; display:block; height:1px; background:var(--rail-linea); }
  .rail-compacta .nav a { padding:0 0 0 17px; }
  .rail-compacta .nav a.nueva { padding:0; }
  .rail-compacta .nav a.nueva span { display:none; }
  .rail-compacta .badge { position:absolute; left:32px; top:4px; margin:0; font-size:10px; line-height:15px; min-width:15px; padding:0 4px; }
  .rail-compacta .lat-fila { flex-direction:column-reverse; }
  .rail-compacta .tema { grid-template-columns:1fr; width:100%; }
  .rail-compacta .tema button:not(.on) { display:none; }
  .rail-compacta .plegar { width:100%; }
  .tip { position:fixed; z-index:300; pointer-events:none; padding:6px 10px; border-radius:8px; background:var(--solido); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
    box-shadow:var(--sombra-3); opacity:0; transform:translateX(-6px); transition:opacity .15s, transform .25s var(--ease-out); }
  .tip.on { opacity:1; transform:none; }

  /* ------------------------------------------------------------ zona de trabajo */
  main { min-width:0; padding:0 44px 120px; position:relative; }
  .contenido { max-width:880px; margin:0 auto; padding-top:30px; }
  .vt-nav .contenido { view-transition-name:contenido; }
  .vt-nav .nav-ind { view-transition-name:nav-ind; }

  .topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; margin:0 -44px; padding:12px 44px;
    background:color-mix(in srgb, var(--lienzo) 80%, transparent); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px);
    border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; }
  .topbar.bajado { border-bottom-color:var(--linea); box-shadow:0 10px 30px -24px rgba(20,25,51,.5); }
  .tb-menu { display:none; flex:none; margin:0; width:40px; min-height:40px; padding:0; border-radius:12px; background:var(--tarjeta); color:var(--tinta); border:1px solid var(--linea); box-shadow:none; }
  .tb-menu svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .tb-buscar { margin:0; flex:0 1 440px; min-height:40px; justify-content:flex-start; gap:10px; padding:0 8px 0 13px; border-radius:12px;
    background:var(--tarjeta); border:1px solid var(--linea); color:var(--tenue); font-weight:500; font-size:13.5px; box-shadow:var(--sombra-1); transition:border-color .2s, box-shadow .3s, transform .3s var(--ease-out); }
  .tb-buscar:hover { background:var(--tarjeta); border-color:var(--linea-3); color:var(--suave); filter:none; box-shadow:var(--sombra-2); }
  .tb-buscar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; transition:transform .4s var(--ease-muelle); }
  .tb-buscar:hover svg { transform:rotate(-12deg) scale(1.1); }
  .tb-buscar span { flex:1; text-align:left; }
  kbd { font:600 11px/1 var(--texto); color:var(--suave); background:var(--hover); border:1px solid var(--linea); border-bottom-width:2px; border-radius:6px; padding:3px 6px; }
  .tb-der { margin-left:auto; display:flex; align-items:center; gap:8px; }
  .estado-sis { position:relative; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 13px; border-radius:999px; font-size:12.5px; font-weight:600;
    color:var(--suave); background:var(--tarjeta); border:1px solid var(--linea); text-decoration:none; max-width:360px; isolation:isolate; transition:color .2s, border-color .2s; }
  .estado-sis span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .estado-sis i { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 3px var(--ok-claro); }
  .estado-sis.activo { color:var(--tinta); border-color:transparent; }
  .estado-sis.activo::before { content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px;
    background:conic-gradient(from var(--giro, 0deg), var(--accion), transparent 35%, transparent 65%, var(--accion));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:giro 2.4s linear infinite; }
  @property --giro { syntax:"<angle>"; initial-value:0deg; inherits:false; }
  @keyframes giro { to { --giro:360deg; } }
  .estado-sis.activo i { background:var(--accion); box-shadow:0 0 0 3px var(--accion-claro); animation:latido 1.4s ease-in-out infinite; }
  @keyframes latido { 50% { box-shadow:0 0 0 7px transparent; transform:scale(.8); } }

  /* ------------------------------------------------------------ cabecera de página */
  .pag-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
  .pag-cab h1 { margin:0; }
  .pag-cab p { margin:8px 0 0; color:var(--suave); max-width:64ch; font-size:15px; }
  .pag-tit { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:18px; align-items:center; }
  .pag-tit > :not(.pag-ic) { grid-column:2; }
  .pag-ic { grid-row:1 / span 4; align-self:start; width:56px; height:56px; border-radius:17px; display:grid; place-items:center; background:var(--solido); color:var(--accion);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -16px rgba(20,25,51,.6); animation:ic-entra .8s var(--ease-muelle) both; }
  .pag-ic svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  @keyframes ic-entra { from { opacity:0; transform:scale(.4) rotate(-25deg); } }

  /* ------------------------------------------------------------ tipografía */
  h1, h2, h3, h4 { font-family:var(--titulo); color:var(--tinta); }
  h1 { font-size:34px; line-height:1.04; font-weight:780; letter-spacing:-.032em; margin:0 0 6px; text-wrap:balance; }
  h2 { font-size:19px; line-height:1.25; font-weight:700; letter-spacing:-.018em; margin:0 0 14px; }
  h3 { font-family:var(--texto); font-size:15.5px; line-height:1.3; font-weight:650; letter-spacing:-.01em; margin:0; }
  h4 { font-family:var(--texto); font-size:14px; font-weight:650; margin:16px 0 8px; }
  p.sub { color:var(--suave); margin:0 0 20px; font-size:15px; }
  .ayuda { font-size:13px; color:var(--suave); margin-top:6px; line-height:1.55; }
  code { font-size:12.5px; background:var(--hover); border:1px solid var(--linea); border-radius:6px; padding:1px 6px; color:var(--tinta); }
  b, td, .num, [data-contar] { font-variant-numeric:tabular-nums; }
  .cifra { font-family:var(--cifras); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

  /* ------------------------------------------------------------ tarjetas */
  .card { background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r-card); padding:24px; margin-bottom:16px; box-shadow:var(--sombra-1); }
  a.card { display:block; text-decoration:none; color:inherit; transition:border-color .2s, box-shadow .3s, transform .35s var(--ease-out); }
  a.card:hover { border-color:var(--linea-3); box-shadow:var(--sombra-2); transform:translateY(-2px); }
  /* foco de luz que sigue al ratón en lo que se puede pulsar */
  .foco { position:relative; }
  .foco::before { content:""; position:absolute; inset:-1px; z-index:2; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s;
    background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accion), transparent 65%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
  .foco:hover::before { opacity:1; }

  /* ------------------------------------------------------------ formularios */
  label { display:block; font-size:13px; font-weight:580; margin:16px 0 6px; color:var(--tinta); }
  input, select, textarea { width:100%; min-height:42px; padding:10px 13px; border:1px solid var(--linea-2); border-radius:var(--r); font:inherit; font-size:14.5px;
    background:var(--campo); color:var(--tinta); transition:border-color .18s, box-shadow .3s var(--ease-out), background-color .2s; box-shadow:var(--sombra-1); }
  textarea { line-height:1.55; resize:vertical; }
  input::placeholder, textarea::placeholder { color:var(--tenue); }
  input:hover, select:hover, textarea:hover { border-color:var(--linea-3); }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accion); box-shadow:0 0 0 4px var(--accion-claro); }
  input[readonly] { background:var(--hover); color:var(--suave); }
  select { appearance:none; padding-right:36px; cursor:pointer; background-color:var(--campo);
    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='%23858CA7' stroke-width='2.6' 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 13px center; }
  select option, select optgroup { background:var(--tarjeta); color:var(--tinta); }
  input[type=checkbox], input[type=radio] { -webkit-appearance:none; appearance:none; width:18px; height:18px; min-height:0; padding:0; margin:0; flex:none; cursor:pointer;
    border:1.5px solid var(--linea-3); background:var(--campo) no-repeat center / 0 0; box-shadow:none; display:inline-grid; vertical-align:-3px;
    transition:background-color .2s, border-color .2s, background-size .35s var(--ease-muelle), box-shadow .3s var(--ease-muelle), transform .2s; }
  input[type=checkbox] { border-radius:6px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  input[type=checkbox]:checked { background-color:var(--accion); border-color:var(--accion); background-size:13px 13px; }
  input[type=checkbox]:indeterminate { background-color:var(--accion); border-color:var(--accion); background-image:linear-gradient(#fff, #fff); background-size:9px 2.5px; }
  input[type=radio] { border-radius:50%; }
  input[type=radio]:checked { background-color:var(--accion); border-color:var(--accion); box-shadow:inset 0 0 0 4px var(--campo); }
  input[type=checkbox]:hover, input[type=radio]:hover { border-color:var(--accion); }
  input[type=checkbox]:active, input[type=radio]:active { transform:scale(.88); }
  input[type=checkbox]:focus, input[type=radio]:focus { box-shadow:none; }
  input[type=radio]:checked:focus { box-shadow:inset 0 0 0 4px var(--campo); }
  input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline:2px solid var(--accion); outline-offset:2px; }
  input[type=checkbox]:disabled, input[type=radio]:disabled { opacity:.45; cursor:not-allowed; }
  input[type=range] { padding:0; min-height:0; box-shadow:none; border:0; accent-color:var(--accion); background:transparent; }
  input[type=file] { padding:9px; background:var(--hover); }
  input[type=color] { padding:3px; cursor:pointer; }
  .fila { display:grid; grid-template-columns:1fr 200px; gap:14px; }
  .dos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .tres { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
  .check { display:flex; gap:10px; align-items:flex-start; font-weight:500; font-size:14px; margin-top:14px; cursor:pointer; }
  .check input { margin-top:2px; }

  /* ------------------------------------------------------------ botones */
  button, a.boton, .boton-s { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; margin-top:18px; padding:0 19px;
    background:var(--accion); color:#fff; border:1px solid var(--accion-osc); border-radius:var(--r);
    font:650 14px/1 var(--texto); letter-spacing:-.005em; cursor:pointer; text-decoration:none; white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px rgba(20,25,51,.14), 0 8px 18px -10px var(--accion-brillo);
    transition:transform .3s var(--ease-muelle), box-shadow .3s, filter .15s, background-color .2s, border-color .2s, color .2s; }
  button:hover, a.boton:hover { filter:brightness(1.06); color:#fff; }
  :is(button:not([class]), button.sec, button.peq, button.oscuro, a.boton, .boton-s):hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 14px 26px -12px var(--accion-brillo); }
  :is(button:not([class]), button.sec, button.peq, button.oscuro, a.boton, .boton-s):active { transform:translateY(0) scale(.97); transition-duration:.1s; }
  button:disabled { opacity:.45; cursor:not-allowed; filter:none; transform:none !important; }
  button.sec, a.sec, .boton-s { background:var(--tarjeta); color:var(--tinta); border:1px solid var(--linea-2); box-shadow:var(--sombra-1); }
  button.sec:hover, a.sec:hover, .boton-s:hover { background:var(--hover); border-color:var(--linea-3); color:var(--tinta); filter:none; box-shadow:var(--sombra-2) !important; }
  button.peq, a.peq, .boton-s.peq { margin:0; min-height:34px; padding:0 13px; font-size:13px; border-radius:10px; }
  button.oscuro { background:var(--solido); border-color:var(--solido-linea); color:var(--solido-txt); box-shadow:none; }
  .onda-caja { position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
  .onda { position:absolute; border-radius:50%; background:currentColor; opacity:.22; transform:scale(0); animation:onda .65s var(--ease-out) forwards; }
  @keyframes onda { to { transform:scale(1); opacity:0; } }

  /* ------------------------------------------------------------ avisos, chips, etc. */
  .aviso, .ok, .info { border-radius:14px; padding:13px 16px; font-size:14px; margin-bottom:16px; border:1px solid; line-height:1.55; animation:aviso-entra .5s var(--ease-out) both; }
  @keyframes aviso-entra { from { opacity:0; transform:translateY(-6px); } }
  .aviso { background:var(--alerta-claro); border-color:var(--alerta-borde); color:var(--alerta); }
  .ok { background:var(--ok-claro); border-color:var(--ok-borde); color:var(--ok); }
  .info { background:var(--info-claro); border-color:var(--info-borde); color:var(--info); }
  .aviso a, .ok a, .info a { color:inherit; font-weight:650; }
  .chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--hover); color:var(--suave); border:1px solid var(--linea); white-space:nowrap; line-height:1.4; }
  .chip.revision { background:var(--alerta-claro); color:var(--alerta); border-color:var(--alerta-borde); }
  .chip.publicada, .chip.ok { background:var(--ok-claro); color:var(--ok); border-color:var(--ok-borde); }
  .chip.error { background:var(--error-claro); color:var(--error); border-color:var(--error-borde); }
  .chip.preparando, .chip.publicando, .chip.en_cola { background:var(--info-claro); color:var(--info); border-color:var(--info-borde); }
  .chip.revision::before, .chip.publicada::before, .chip.error::before, .chip.preparando::before, .chip.publicando::before, .chip.en_cola::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
  .chip.preparando::before, .chip.publicando::before, .chip.en_cola::before { animation:latido 1.2s ease-in-out infinite; }

  details > summary { cursor:pointer; list-style:none; }
  details > summary::-webkit-details-marker { display:none; }
  details > summary::before { content:""; display:inline-block; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin:0 10px 2px 2px; transition:transform .3s var(--ease-muelle); }
  details[open] > summary::before { transform:rotate(45deg); }
  details[open] > :not(summary) { animation:abre .4s var(--ease-out); }
  @keyframes abre { from { opacity:0; transform:translateY(-4px); } }
  pre { white-space:pre-wrap; font-size:12.5px; color:var(--suave); background:var(--hover); padding:12px 14px; border-radius:var(--r); max-height:260px; overflow:auto; }
  table { color:var(--tinta); }
  hr { border:0; border-top:1px solid var(--linea); }
  img { transition:opacity .5s var(--ease-out); }
  img.img-carga { opacity:0; } img.img-carga.img-ok { opacity:1; }

  /* ------------------------------------------------------------ indicador deslizante de pestañas */
  .tl-ind > .tl-barra { position:absolute; left:0; top:0; z-index:0; pointer-events:none; opacity:0;
    transition:transform .5s var(--ease-muelle), width .5s var(--ease-muelle), height .3s var(--ease-out), opacity .2s; }
  .tl-ind > .tl-barra.vis { opacity:1; }
  .tl-ind.tl-listo > .tl-barra { will-change:transform, width; }
  .tl-ind > :not(.tl-barra) { position:relative; z-index:1; }
  .tl-ind.tl-p > .on, .tl-ind.tl-p > [aria-selected="true"] { background:transparent !important; box-shadow:none !important; }
  .tl-ind.tl-u > .on, .tl-ind.tl-u > [aria-selected="true"] { border-bottom-color:transparent !important; }
  .tl-ind.tl-u > .tl-barra { border-radius:2px; box-shadow:0 0 12px var(--accion-brillo); }

  /* ------------------------------------------------------------ paleta de comandos */
  .pc-fondo { position:fixed; inset:0; z-index:200; background:rgba(8,10,22,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; animation:fundido .2s ease-out; }
  [data-tema="oscuro"] .pc-fondo { background:rgba(0,0,0,.6); }
  @keyframes fundido { from { opacity:0; } }
  .pc { width:min(660px, 100%); background:var(--elevado); border:1px solid var(--linea-2); border-radius:20px; box-shadow:var(--sombra-3); overflow:hidden; animation:pc-entra .45s var(--ease-muelle); }
  @keyframes pc-entra { from { opacity:0; transform:translateY(-10px) scale(.95); } }
  .pc-cab { display:flex; align-items:center; gap:12px; padding:4px 16px; border-bottom:1px solid var(--linea); }
  .pc-cab svg { width:19px; height:19px; fill:none; stroke:var(--accion); stroke-width:2.2; stroke-linecap:round; flex:none; }
  .pc-cab input { border:0; box-shadow:none !important; background:transparent; min-height:56px; font-size:17px; padding:0; }
  .pc-lista { max-height:min(440px, 56vh); overflow-y:auto; padding:6px; }
  .pc-grupo { font-size:11.5px; font-weight:650; color:var(--tenue); padding:10px 10px 4px; }
  .pc-it { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:11px; cursor:pointer; color:var(--tinta); font-size:14px; transition:background-color .15s; }
  .pc-lista.entra .pc-it { animation:pc-it .4s var(--ease-out) both; animation-delay:calc(min(var(--k, 0), 14) * 18ms); }
  @keyframes pc-it { from { opacity:0; transform:translateY(4px); } }
  .pc-it .pc-ic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--hover); color:var(--suave); flex:none; border:1px solid var(--linea); overflow:hidden; transition:all .25s var(--ease-out); }
  .pc-it .pc-ic svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .pc-it .pc-ic img { width:100%; height:100%; object-fit:cover; }
  .pc-it small { margin-left:auto; color:var(--tenue); font-size:12px; white-space:nowrap; }
  .pc-it span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pc-it.sel { background:var(--hover); } .pc-it.sel .pc-ic { color:#fff; background:var(--accion); border-color:var(--accion); transform:scale(1.06); }
  .pc-vacio { padding:28px; text-align:center; color:var(--tenue); }
  .pc-pie { display:flex; gap:14px; padding:10px 16px; border-top:1px solid var(--linea); font-size:12px; color:var(--tenue); background:var(--lienzo-2); }
  .pc-pie span { display:inline-flex; gap:5px; align-items:center; }

  /* ------------------------------------------------------------ avisos flotantes y barra de carga */
  .toasts { position:fixed; z-index:400; right:22px; bottom:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; pointer-events:none; }
  .toast { pointer-events:auto; position:relative; display:flex; align-items:flex-start; gap:12px; width:min(420px, calc(100vw - 32px)); padding:14px 14px 15px 14px; border-radius:16px; overflow:hidden;
    background:var(--solido); color:#fff; font-size:14px; line-height:1.45; box-shadow:0 24px 50px -20px rgba(8,10,22,.6), 0 0 0 1px rgba(255,255,255,.06);
    animation:toast-entra .55s var(--ease-muelle) both; }
  .toast.fuera { animation:toast-sale .3s var(--ease-io) both; }
  @keyframes toast-entra { from { opacity:0; transform:translateY(24px) scale(.94); } }
  @keyframes toast-sale { to { opacity:0; transform:translateX(30px) scale(.97); } }
  .toast > i { width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.1); }
  .toast > i svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .toast-ok > i { background:var(--ok); } .toast-error > i { background:#E5483F; } .toast-info > i { background:var(--accion); }
  .toast > span { flex:1; padding-top:3px; white-space:pre-line; word-break:break-word; }
  .toast > button { margin:0; width:26px; min-height:26px; padding:0; flex:none; border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.6); box-shadow:none; }
  .toast > button:hover { background:rgba(255,255,255,.1); color:#fff; filter:none; }
  .toast > button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
  .toast-t { position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:0 50%; background:rgba(255,255,255,.35); animation:toast-t var(--dur, 4s) linear forwards; }
  .toast-ok .toast-t { background:var(--ok); } .toast-error .toast-t { background:#E5483F; } .toast-info .toast-t { background:var(--accion); }
  .toast.pausa .toast-t { animation-play-state:paused; }
  @keyframes toast-t { to { transform:scaleX(0); } }
  .barra-carga { position:fixed; top:0; left:0; right:0; height:3px; z-index:500; pointer-events:none; overflow:hidden; }
  .barra-carga::before { content:""; position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); opacity:0;
    background:linear-gradient(90deg, var(--accion-2), var(--accion)); box-shadow:0 0 12px var(--accion-brillo); }
  .barra-carga.va::before { opacity:1; animation:carga 2.6s var(--ease-out) forwards; }
  .barra-carga.trabaja::after { content:""; position:absolute; top:0; bottom:0; width:30%; background:linear-gradient(90deg, transparent, var(--accion), transparent); animation:trabaja 1.1s var(--ease-io) infinite; }
  @keyframes carga { 0% { transform:scaleX(0); } 40% { transform:scaleX(.55); } 100% { transform:scaleX(.9); } }
  @keyframes trabaja { from { left:-30%; } to { left:100%; } }

  /* ------------------------------------------------------------ movimiento */
  @keyframes enfoca { from { opacity:0; filter:blur(16px); transform:translateY(10px); } to { opacity:1; filter:blur(0); transform:none; } }
  @keyframes sube { from { opacity:0; transform:translateY(22px) scale(.985); } to { opacity:1; transform:none; } }
  @keyframes palabra { from { transform:translateY(105%) rotate(4deg); } to { transform:none; } }
  .m-enfoca { animation:enfoca .8s var(--ease-out) both; }
  .m-sube { animation:sube .75s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 60ms + 140ms); }
  .m-palabras .pal { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
  .m-palabras .pal > span { display:inline-block; animation:palabra .85s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 70ms + 60ms); }
  .rv { opacity:0; transform:translateY(26px); }
  .rv.rv-on { opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .9s var(--ease-out); }
  [data-tilt] { transform-style:preserve-3d; transition:transform .6s var(--ease-out), box-shadow .3s, border-color .15s; will-change:transform; }
  [data-tilt].tilting { transition:transform .08s linear, box-shadow .3s, border-color .15s; }
  .scr { display:inline-block; color:var(--accion); white-space:nowrap; }
  .scr i { font-style:normal; opacity:.55; }
  /* contador tipo panel de salidas: cada cifra rueda hasta su sitio */
  .odo { display:inline-flex !important; align-items:flex-start; line-height:1.12 !important; height:1.12em; vertical-align:bottom; }
  g-oc { display:inline-block; height:1.12em; overflow:hidden; }
  g-ot { display:flex; flex-direction:column; transform:translateY(0); transition:transform 1.6s var(--ease-out); transition-delay:calc(var(--d) * 70ms + 150ms); }
  g-od { display:block; height:1.12em; text-align:center; }
  .odo.odo-on g-ot { transform:translateY(calc((var(--n) + 10) * -1.12em)); }
  g-os { display:inline-block; white-space:pre; }
  .vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* transiciones entre páginas */
  @view-transition { navigation:auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
  ::view-transition-old(contenido) { animation:vt-sale .2s var(--ease-io) both; }
  ::view-transition-new(contenido) { animation:vt-entra .45s var(--ease-out) both; }
  ::view-transition-group(nav-ind) { animation-duration:.5s; animation-timing-function:var(--ease-muelle); }
  @keyframes vt-sale { to { opacity:0; transform:translateY(-8px); filter:blur(3px); } }
  @keyframes vt-entra { from { opacity:0; } }
  .vt-tema .contenido, .vt-tema .nav-ind, .vt-local .contenido, .vt-local .nav-ind { view-transition-name:none; }

  /* ------------------------------------------------------------ móvil: el carril se convierte en cajón */
  .velo { position:fixed; inset:0; z-index:45; background:rgba(8,10,22,.5); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s; }
  @media (max-width:900px) {
    .app { grid-template-columns:1fr; }
    .lateral { position:fixed; z-index:60; left:0; top:0; bottom:0; width:min(300px, 86vw); height:auto; transform:translateX(-102%); transition:transform .45s var(--ease-out); box-shadow:var(--sombra-3); }
    .menu-abierto .lateral { transform:none; }
    .menu-abierto .velo { opacity:1; pointer-events:auto; }
    .rail-compacta .logo-txt, .rail-compacta .ts-txt, .rail-compacta .ts-fl, .rail-compacta .nav a span { opacity:1; pointer-events:auto; }
    .plegar { display:none; }
    .tb-menu { display:inline-flex; }
    main { padding:0 16px 120px; } .topbar { margin:0 -16px; padding:10px 16px; } .estado-sis span { display:none; } .cp-boton span { display:none; }
    .tb-buscar kbd { display:none; }
  }
  @media (max-width:600px) { .fila, .dos, .tres { grid-template-columns:1fr; } h1 { font-size:27px; } .card { padding:18px; } .pag-ic { width:46px; height:46px; border-radius:14px; } .toasts { right:16px; left:16px; bottom:16px; align-items:stretch; } .toast { width:auto; } }
  @media print { .lateral, .topbar, .no-print, .toasts, .barra-carga { display:none !important; } .app { display:block; } main { padding:0; } body { background:#fff; } }
  @media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition:none !important; animation:none !important; }
    .rv { opacity:1; transform:none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
  }
.idioma-otro { display:grid; grid-template-columns:1.2fr 1.4fr 1fr 1fr; gap:6px; margin-top:8px; width:100%; }
.idioma-otro input { margin:0; min-width:0; }
@media (max-width:700px) { .idioma-otro { grid-template-columns:1fr 1fr; } }
html.i18n-pend body { opacity:0; }
.cp-boton { position:relative; display:inline-flex; align-items:center; gap:7px; margin:0; min-height:34px; padding:0 13px 0 11px; border-radius:999px; font-size:12.5px; font-weight:650;
  color:var(--tinta); background:var(--tarjeta); border:1px solid var(--linea); box-shadow:var(--sombra-1); }
.cp-boton svg { width:16px; height:16px; fill:var(--accion); stroke:none; transition:transform .6s var(--ease-muelle); }
.cp-boton:hover { background:var(--tarjeta); color:var(--tinta); border-color:var(--accion-borde); filter:none; box-shadow:0 0 0 4px var(--accion-claro); }
.cp-boton:hover svg { transform:rotate(72deg) scale(1.15); }
.cp-x svg, .cp-form button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cp { position:fixed; right:22px; bottom:22px; z-index:90; width:min(430px, calc(100vw - 32px)); height:min(660px, calc(100vh - 44px)); display:flex; flex-direction:column;
  background:var(--elevado); border-radius:24px; box-shadow:var(--sombra-3), 0 0 0 1px var(--linea); overflow:hidden; transform-origin:100% 100%; animation:cp-entra .5s var(--ease-muelle); }
.cp[hidden] { display:none; }
@keyframes cp-entra { from { opacity:0; transform:translateY(20px) scale(.92); } }
.cp-cab { display:flex; gap:6px; align-items:flex-start; padding:18px 14px 14px 20px; border-bottom:1px solid var(--linea);
  background:var(--solido); color:#fff; }
.cp-cab div { flex:1; } .cp-cab b { font:780 18px var(--titulo); letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.cp-cab b::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(54,208,143,.2); }
.cp-cab small { color:var(--solido-suave); font-size:12.5px; line-height:1.4; display:block; margin-top:4px; }
.cp-x { margin:0; padding:6px; min-height:0; border:0; background:none; color:var(--solido-suave); box-shadow:none; border-radius:10px; }
.cp-x:hover { background:rgba(255,255,255,.1); color:#fff; filter:none; }
.cp-msgs { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; }
.cp-m { max-width:88%; padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; animation:cp-m .45s var(--ease-muelle) both; }
@keyframes cp-m { from { opacity:0; transform:translateY(10px) scale(.96); } }
.cp-m.user { align-self:flex-end; background:var(--accion); color:#fff; border-bottom-right-radius:6px; transform-origin:100% 100%; }
.cp-m.assistant { align-self:flex-start; background:var(--hover); border-bottom-left-radius:6px; transform-origin:0 100%; }
.cp-m.sistema { align-self:center; background:none; color:var(--ok); font-size:13px; font-weight:650; padding:2px 8px; }
.cp-m.pensando { color:var(--suave); font-style:italic; background:linear-gradient(90deg, var(--hover) 30%, var(--lienzo-2) 50%, var(--hover) 70%) 0 0 / 300% 100%; animation:cp-m .45s var(--ease-muelle) both, brillo-carga 1.4s linear infinite; }
@keyframes brillo-carga { to { background-position:-300% 0; } }
.cp-prop { align-self:flex-start; max-width:88%; border:1.5px solid var(--accion); border-radius:16px; padding:11px 13px; display:flex; flex-direction:column; gap:8px; font-size:14px; animation:cp-m .45s var(--ease-muelle) both; }
.cp-prop .peq { margin:0; align-self:flex-start; } .cp-prop.hecha { border-color:var(--linea); color:var(--suave); }
.cp-sug { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; }
.cp-sug button { margin:0; min-height:32px; padding:0 12px; font-size:12.5px; font-weight:550; background:var(--tarjeta); color:var(--tinta); border:1px solid var(--linea-2); box-shadow:none; border-radius:999px; }
.cp-sug button:hover { background:var(--accion-claro); color:var(--tinta); border-color:var(--accion-borde); filter:none; }
.cp-form { display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--linea); align-items:flex-end; }
.cp-form textarea { margin:0; resize:none; max-height:120px; flex:1; border-radius:16px; }
.cp-form button { margin:0; padding:0; width:44px; min-height:44px; border-radius:14px; }
@media print { .cp-boton, .cp { display:none !important; } }

/* ---- «¿Cómo funciona esta pantalla?» (fragments/ayuda.html) ---- */
.ayp { margin:0 0 18px; border:1px solid var(--info-borde); border-radius:var(--r-card); background:var(--info-claro); overflow:hidden; }
/* las apps embebidas a toda altura (Packs, Contra reembolso) traen su propia ayuda: la caja solo sale si falta la tienda */
.contenido:has(.cdm) > .ayp { display:none; }
.ayp > summary { list-style:none; display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; flex-wrap:wrap; }
.ayp > summary::-webkit-details-marker { display:none; } .ayp > summary::before { display:none !important; content:none !important; }
.ayp-ic { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--tarjeta); color:var(--info); border:1px solid var(--info-borde); }
.ayp-ic svg, .ayp-abrir svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ayp-t { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ayp-t b { font-size:14.5px; color:var(--tinta); } .ayp-t small { font-size:13px; color:var(--suave); line-height:1.45; }
.ayp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ayp-chip { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.ayp-chip.si { background:var(--ok-claro); color:var(--ok); } .ayp-chip.no { background:var(--error-claro); color:var(--error); } .ayp-chip.opc { background:var(--tarjeta); color:var(--suave); border:1px solid var(--linea); }
.ayp-abrir { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--info); white-space:nowrap; }
.ayp-abrir svg { transition:transform .25s var(--ease-out); } .ayp[open] .ayp-abrir svg { transform:rotate(180deg); }
.ayp .ayp-ocultar, .ayp[open] .ayp-ver { display:none; } .ayp[open] .ayp-ocultar { display:inline; }
.ayp-cuerpo { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; padding:4px 16px 16px; }
.ayp-cuerpo section { background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px; padding:12px 14px; }
.ayp-cuerpo h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--suave); }
.ayp-cuerpo p { margin:0 0 8px; font-size:13.5px; line-height:1.5; }
.ayp-pasos { margin:0; padding:0; list-style:none; counter-reset:p; display:grid; gap:8px; }
.ayp-pasos li { counter-increment:p; display:grid; grid-template-columns:24px 1fr; gap:8px; font-size:13.5px; line-height:1.45; }
.ayp-pasos li::before { content:counter(p); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--accion-claro); color:var(--accion); }
.ayp-req { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.ayp-req li { display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:13.5px; }
.ayp-req i { font-style:normal; font-weight:800; text-align:center; } .ayp-req li.si i { color:var(--ok); } .ayp-req li.no i { color:var(--error); } .ayp-req li.opc i { color:var(--tenue); }
.ayp-req small { display:block; color:var(--suave); font-size:12.5px; line-height:1.4; } .ayp-req a, .ayp-guia { font-weight:600; }
.ayp-guia { font-size:13px; }
@media (max-width:640px) { .ayp > summary { padding:12px; } .ayp-chips { order:3; width:100%; } }