/* ============================================================
   Pizarra Táctica — interfaz
   Tema "Stadium Night". Armazón de aplicación: nada hace scroll
   salvo el panel de herramientas y las listas de los diálogos.

   La superficie es de cristal: el fondo lleva un degradado de color y
   encima van capas translúcidas que lo dejan pasar. Por eso casi ningún
   panel es de color liso; son blanco a muy poca opacidad sobre el fondo,
   con un filo claro arriba (--sheen) que les da grosor.

   El difuminado (backdrop-filter) solo se pone donde detrás hay algo que
   se mueve: la hoja del móvil, el velo, los diálogos y lo que flota sobre
   el campo. Las barras fijas no lo llevan: detrás solo tienen un degradado,
   y difuminar un degradado no se nota y sí se paga.
   ============================================================ */
@font-face{font-family:'Outfit';src:url('../assets/fonts/outfit-latin-var.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'InterVar';src:url('../assets/fonts/inter-latin-var.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  /* Fondos opacos, del más hondo al más cercano */
  --bg:#070A0F; --bg-2:#0B1017; --surface:#101823; --surface-2:#16202D; --surface-3:#1E2A39;

  /* Cristal: lo que deja ver el fondo */
  --glass:rgba(255,255,255,.05);
  --glass-2:rgba(255,255,255,.085);
  --glass-3:rgba(255,255,255,.13);
  --bar:rgba(10,14,21,.74);          /* barras fijas */
  --panel:rgba(13,18,27,.82);        /* hoja y diálogos */
  --sheen:rgba(255,255,255,.10);     /* filo de luz del canto superior */
  --well:rgba(4,7,11,.55);           /* hueco hundido: campos de texto */
  --blur:blur(24px) saturate(150%);

  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --text:#E8EEF6; --muted:#93A6BC;
  --brand:#E11A41; --brand-ink:#FFFFFF; --brand-2:#FF5C7A;
  --home:#E03B2F; --away:#2E86DE; --neutral:#F1C40F;

  --ff-display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-body:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Un solo juego de esquinas y de sombras para toda la aplicación */
  --r1:9px; --r2:12px; --r3:15px; --r4:19px; --r5:24px;
  --sh-1:0 2px 8px -3px rgba(0,0,0,.55);
  --sh-2:0 16px 38px -18px rgba(0,0,0,.8);
  --sh-3:0 40px 90px -30px rgba(0,0,0,.9);
  --ease:cubic-bezier(.2,.9,.3,1);

  --topbar:56px; --aside:264px; --tabbar:0px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --touch:44px;
}

/* Quien no sepa difuminar recibe capas más opacas, no cristales sucios. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{--bar:rgba(10,14,21,.96);--panel:rgba(13,18,27,.97);--blur:none}
}
/* Quien haya pedido menos transparencias en el sistema, no las tiene. */
@media (prefers-reduced-transparency:reduce){
  :root{--bar:var(--bg-2);--panel:var(--surface);--glass:var(--surface);
        --glass-2:var(--surface-2);--glass-3:var(--surface-3);--blur:none;--well:var(--surface-2)}
}

*,*::before,*::after{box-sizing:border-box}

/* La ventana no se mueve: ni scroll, ni rebote, ni zoom por doble toque. */
html,body{
  height:100%;margin:0;padding:0;
  overflow:hidden;overscroll-behavior:none;
  position:fixed;inset:0;width:100%;
  touch-action:manipulation;
}
body{
  color:var(--text);
  /* El color del fondo. Sin esto las capas translúcidas no tendrían nada
     que enseñar y el cristal parecería gris sucio. */
  background:
    radial-gradient(1250px 700px at 4% -14%,rgba(225,26,65,.26),transparent 60%),
    radial-gradient(1050px 650px at 97% 0%,rgba(46,134,222,.19),transparent 58%),
    radial-gradient(950px 640px at 52% 118%,rgba(16,168,120,.15),transparent 60%),
    var(--bg);
  font-family:var(--ff-body);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;   /* iOS: sin menú al mantener pulsado */
}
input,textarea{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sm-only{display:none}

/* ---------------- Estructura ---------------- */
.app{
  position:fixed;inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);   /* si no, una fila ancha estira todo el armazón */
  grid-template-rows:auto 1fr auto var(--tabbar);
  padding-left:var(--safe-l);padding-right:var(--safe-r);
}
.middle{display:grid;grid-template-columns:var(--aside) 1fr;min-height:0;min-width:0}

/* ---------------- Barra superior ---------------- */
.topbar{
  position:relative;z-index:20;
  display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;
  height:calc(var(--topbar) + var(--safe-t));padding:var(--safe-t) 12px 0;
  background:var(--bar);
  border-bottom:1px solid var(--line);
}
/* Hilo de luz bajo la barra: se apaga hacia los lados, así no corta la pantalla en dos. */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.logo{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;font-family:var(--ff-display);font-weight:800;letter-spacing:-.02em;font-size:15px;white-space:nowrap}
.logo svg{width:26px;height:26px;flex:none}
.logo a{color:var(--muted);font-weight:500;font-size:12px;text-decoration:none;font-family:var(--ff-body);transition:color .15s}
.logo a:hover{color:var(--brand-2)}
.topbar .spacer{flex:1}
.group{display:flex;flex:none;align-items:center;gap:5px;padding:4px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:inset 0 1px 0 var(--sheen)}

.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 11px;border-radius:var(--r1);
  font-size:13px;color:var(--muted);white-space:nowrap;
  transition:background .16s,color .16s,transform .12s var(--ease),box-shadow .16s}
.tbtn:hover{background:var(--glass-2);color:var(--text)}
.tbtn:active{transform:scale(.96)}
.tbtn[aria-pressed="true"],.tbtn.on{background:var(--glass-3);color:var(--text);box-shadow:inset 0 1px 0 var(--sheen)}
.tbtn svg{width:16px;height:16px;flex:none}
/* Los degradados de los botones de color van del tono de marca hacia ABAJO y a
   más oscuro, nunca hacia arriba y a más claro: sobre un rojo aclarado el texto
   blanco se queda en 3,9:1 y deja de cumplir el mínimo legible. El relieve lo
   da el filo de luz de dentro, no un tono más claro. */
.tbtn.primary{background:linear-gradient(180deg,var(--brand),#B61233);color:var(--brand-ink);
  font-weight:700;font-family:var(--ff-display);
  box-shadow:0 8px 20px -10px rgba(225,26,65,.95),inset 0 1px 0 rgba(255,255,255,.22)}
.tbtn.primary:hover{background:linear-gradient(180deg,var(--brand),#CB1739);color:var(--brand-ink);
  box-shadow:0 12px 28px -10px rgba(225,26,65,1),inset 0 1px 0 rgba(255,255,255,.3)}
.tbtn.rec{background:#E03B2F;color:#fff;animation:recpulse 1.2s ease-in-out infinite}
@keyframes recpulse{50%{background:#F2503F}}
.tbtn:disabled{opacity:.34;cursor:not-allowed}
.tbtn:disabled:hover{background:none;color:var(--muted);transform:none}
.tbtn:disabled:active{transform:none}

/* ---------------- Panel de herramientas ---------------- */
.aside{
  background:linear-gradient(180deg,rgba(14,19,29,.88),rgba(9,13,20,.88));
  border-right:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;padding:14px 13px 26px;
  scrollbar-width:thin;scrollbar-color:var(--glass-3) transparent;
}
.aside::-webkit-scrollbar{width:10px}
.aside::-webkit-scrollbar-thumb{background:var(--glass-3);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.aside::-webkit-scrollbar-thumb:hover{background:var(--line-strong);background-clip:padding-box}
.sheet-grab,.sheet-tit{display:none}
.block{margin-bottom:20px;scroll-margin-top:12px}
.block > h2{font-family:var(--ff-display);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px 2px;opacity:.85}
.block-note{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:var(--muted)}

.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:var(--touch);padding:9px 3px;
  border-radius:var(--r2);border:1px solid var(--line);background:var(--glass);color:var(--muted);
  box-shadow:inset 0 1px 0 var(--sheen);
  font-size:10px;line-height:1.15;text-align:center;
  transition:background .16s,border-color .16s,color .16s,transform .12s var(--ease),box-shadow .16s}
.tool svg{width:19px;height:19px}
.tool:hover{background:var(--glass-2);border-color:var(--line-strong);color:var(--text)}
.tool:active{transform:scale(.95)}
/* Lo seleccionado no cambia solo de color: se enciende. */
.tool[aria-pressed="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 30%,transparent),color-mix(in srgb,var(--brand) 14%,transparent));
  border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:#fff;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 95%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.tool[aria-pressed="true"] svg{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brand) 60%,transparent))}

.teams{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.team-btn{min-height:var(--touch);padding:9px;border-radius:var(--r2);font-family:var(--ff-display);
  font-weight:700;font-size:12.5px;color:#fff;border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.2);
  transition:box-shadow .16s,transform .12s var(--ease)}
/* Al pasar por encima se levanta, no se aclara: aclarando el fondo el rótulo
   blanco bajaba de 4,5:1 y se volvía difícil de leer. */
.team-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.26)}
.team-btn:active{transform:scale(.97)}
.team-btn.home{background:linear-gradient(180deg,#C3352A,#9B2419)}
.team-btn.away{background:linear-gradient(180deg,#22679F,#154C7F)}
/* El comodín era mostaza sobre blanco y se leía mal; ahora es ámbar con tinta oscura. */
.team-btn.neutral{background:linear-gradient(180deg,#EFB53A,#C08908);color:#26190A;grid-column:span 2;
  border-color:rgba(0,0,0,.18);text-shadow:none}

.mats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mat{position:relative;aspect-ratio:1;min-height:var(--touch);display:grid;place-items:center;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--glass);box-shadow:inset 0 1px 0 var(--sheen);
  transition:background .16s,border-color .16s,transform .12s var(--ease),box-shadow .16s}
.mat svg{width:25px;height:25px}
.mat:hover{background:var(--glass-2);border-color:var(--line-strong)}
.mat:active{transform:scale(.94)}
.mat[aria-pressed="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 30%,transparent),color-mix(in srgb,var(--brand) 14%,transparent));
  border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 95%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}

.swatches{display:flex;flex-wrap:wrap;gap:9px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s var(--ease),box-shadow .16s}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px rgba(7,10,15,.9) inset,0 4px 14px -4px rgba(0,0,0,.8)}

.seg{display:flex;gap:4px;padding:4px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:inset 0 1px 0 var(--sheen)}
.seg button{flex:1;min-height:36px;padding:7px 6px;border-radius:var(--r1);font-size:12px;color:var(--muted);
  transition:background .16s,color .16s,box-shadow .16s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--glass-3);color:var(--text);font-weight:600;
  box-shadow:var(--sh-1),inset 0 1px 0 var(--sheen)}

.stack{display:grid;gap:6px}
.row-btn{display:flex;align-items:center;gap:9px;min-height:var(--touch);padding:9px 11px;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--glass);color:var(--text);font-size:12.5px;text-align:left;
  box-shadow:inset 0 1px 0 var(--sheen);
  transition:background .16s,border-color .16s,color .16s,transform .12s var(--ease)}
.row-btn:hover{border-color:var(--line-strong);background:var(--glass-2)}
.row-btn:active{transform:scale(.985)}
.row-btn svg{width:15px;height:15px;flex:none;color:var(--muted);transition:color .16s}
.row-btn.danger:hover{border-color:#8A3227;color:#FF8A7A;background:rgba(138,50,39,.16)}
.row-btn.danger:hover svg{color:#FF8A7A}

.check{display:flex;align-items:center;gap:9px;min-height:var(--touch);padding:8px 10px;border-radius:var(--r2);
  background:var(--glass);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--sheen);
  font-size:12.5px;cursor:pointer;transition:background .16s,border-color .16s}
.check:hover{background:var(--glass-2);border-color:var(--line-strong)}
.check input{accent-color:var(--brand);width:17px;height:17px}

/* Un único estilo de campo para toda la aplicación: el panel, los diálogos y
   los filtros. Antes había cinco, cada uno con su tamaño y su borde.
   Van hundidos (fondo más oscuro que el cristal) para que se lean como huecos
   donde escribir y no como otro botón más. */
.ask-input,.field input,.field select,.field textarea,
#lib-q,.lib-selects select,select.sel,#cfg-categoria{
  width:100%;min-height:var(--touch);padding:11px 13px;border-radius:var(--r2);
  background:var(--well);border:1px solid var(--line);color:var(--text);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
  font-family:var(--ff-body);font-size:15px;line-height:1.45;
  transition:border-color .16s,background .16s}
.ask-input:hover,.field input:hover,.field textarea:hover,
#lib-q:hover,.lib-selects select:hover,select.sel:hover,#cfg-categoria:hover,.field select:hover{
  border-color:var(--line-strong)}
.ask-input:focus,.field input:focus,.field select:focus,.field textarea:focus,
#lib-q:focus,.lib-selects select:focus,select.sel:focus,#cfg-categoria:focus{
  outline:2px solid var(--brand-2);outline-offset:1px;border-color:transparent}
.field select,.lib-selects select,select.sel{cursor:pointer}
.field textarea{min-height:70px;resize:vertical}
::placeholder{color:var(--muted);opacity:.72}

/* ---------------- Escenario ---------------- */
/* El canvas va fuera del flujo: si midiera el contenedor y a la vez lo empujara,
   cada redibujado lo haría crecer y acabaría más ancho que la pantalla. */
.stage{position:relative;min-width:0;min-height:0;overflow:hidden;padding:10px;
  background:
    radial-gradient(78% 62% at 50% -6%,rgba(225,26,65,.10),transparent 68%),
    radial-gradient(60% 50% at 50% 108%,rgba(46,134,222,.07),transparent 70%),
    rgba(4,7,11,.5)}
/* El campo se lee como una pieza apoyada encima, no como un hueco recortado. */
#board{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:block;touch-action:none;cursor:crosshair;border-radius:10px;
  box-shadow:0 40px 90px -46px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07)}
#board.is-select{cursor:default}

.zoom-reset{position:absolute;right:12px;bottom:12px;z-index:4;display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 13px;border-radius:var(--r3);border:1px solid var(--line-strong);
  background:var(--bar);color:var(--text);font-size:12.5px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-2),inset 0 1px 0 var(--sheen);
  transition:border-color .16s,transform .12s var(--ease)}
.zoom-reset svg{width:16px;height:16px;color:var(--brand-2)}
.zoom-reset:hover{border-color:var(--brand-2)}
.zoom-reset:active{transform:scale(.96)}

/* El velo tapa la pantalla entera —tocarlo en cualquier sitio cierra la hoja—
   pero solo difumina de la barra superior hacia abajo. Difuminándolo todo, los
   botones de arriba se convertían en manchas y la aplicación parecía rota; así
   la barra se atenúa pero se sigue leyendo. */
.scrim{position:fixed;inset:0;display:none;z-index:35;background:transparent}
.scrim.show{display:block}
.scrim::before,.scrim::after{content:"";position:absolute;left:0;right:0;background:rgba(3,6,10,.5)}
.scrim::before{top:0;height:calc(var(--topbar) + var(--safe-t))}
/* 5 px y no más: este difuminado cubre media pantalla y se rehace en cada
   cuadro mientras la jugada se anima. Medido en un teléfono simulado a 1/4 de
   velocidad, a 7 px la animación bajaba a 40 fps y a 5 px se queda en 47. */
.scrim::after{top:calc(var(--topbar) + var(--safe-t));bottom:0;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}

.hint{position:absolute;left:50%;bottom:12px;max-width:min(340px,calc(100% - 130px));transform:translateX(-50%);display:block;
  padding:9px 16px;border-radius:var(--r4);background:var(--bar);border:1px solid var(--line);
  color:var(--muted);font-size:12px;line-height:1.4;pointer-events:none;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-2),inset 0 1px 0 var(--sheen);
  text-align:center;text-wrap:balance;
  opacity:0;transition:opacity .25s}
.hint.show{opacity:1}
.hint b{color:var(--brand-2);font-weight:600}

/* Barra contextual del objeto seleccionado */
.inspector{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:none;align-items:center;gap:8px;
  padding:7px;border-radius:var(--r4);background:var(--bar);border:1px solid var(--line-strong);
  box-shadow:var(--sh-3),inset 0 1px 0 var(--sheen);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center;z-index:5}
.inspector.show{display:flex}
.inspector .name{font-family:var(--ff-display);font-weight:700;font-size:12.5px;padding:0 6px;white-space:nowrap}
.inspector .div{width:1px;height:24px;background:var(--line-strong)}
.inspector input[type="text"]{width:80px;min-height:34px;padding:6px 8px;border-radius:var(--r1);background:var(--well);
  border:1px solid var(--line);color:var(--text);font-size:13px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.inspector input[type="text"].num{width:48px;text-align:center}
.ibtn{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r1);color:var(--muted);
  font-family:var(--ff-display);font-size:12px;font-weight:700;
  transition:background .16s,color .16s,transform .12s var(--ease)}
.ibtn:hover{background:var(--glass-2);color:var(--text)}
.ibtn:active{transform:scale(.92)}
.ibtn.danger:hover{background:rgba(138,50,39,.34);color:#FF8A7A}
.ibtn svg{width:17px;height:17px}
.mini-sw{display:flex;gap:6px}
.mini-sw button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .16s var(--ease)}
.mini-sw button:hover{transform:scale(1.12)}
.mini-sw button[aria-pressed="true"]{border-color:var(--text)}

/* ---------------- Transporte ---------------- */
.timeline{display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--bar);border-top:1px solid var(--line);position:relative}
.play{width:44px;height:44px;flex:none;border-radius:var(--r3);
  background:linear-gradient(180deg,var(--brand),#B61233);color:var(--brand-ink);
  display:grid;place-items:center;
  box-shadow:0 12px 26px -12px rgba(225,26,65,.95),inset 0 1px 0 rgba(255,255,255,.26);
  transition:background .16s,transform .12s var(--ease),box-shadow .16s}
.play:hover{background:linear-gradient(180deg,var(--brand),#CB1739);
  box-shadow:0 16px 32px -12px rgba(225,26,65,1),inset 0 1px 0 rgba(255,255,255,.32)}
.play:active{transform:scale(.94)}
.play svg{width:20px;height:20px}
.play:disabled{background:var(--glass);color:var(--muted);cursor:not-allowed;box-shadow:inset 0 1px 0 var(--sheen)}
.play:disabled:active{transform:none}

.frames{display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;
  padding:3px 1px;flex:1;min-width:0;scrollbar-width:thin;scrollbar-color:var(--glass-3) transparent}
.frames::-webkit-scrollbar{height:6px}
.frames::-webkit-scrollbar-thumb{background:var(--glass-3);border-radius:6px}
.frame{flex:none;min-width:42px;height:40px;padding:0 12px;border-radius:var(--r2);border:1px solid var(--line);
  background:var(--glass);color:var(--muted);font-family:var(--ff-display);font-weight:700;font-size:13px;
  box-shadow:inset 0 1px 0 var(--sheen);
  transition:background .16s,border-color .16s,color .16s,transform .12s var(--ease),box-shadow .16s}
.frame:hover{background:var(--glass-2);border-color:var(--line-strong);color:var(--text)}
.frame:active{transform:scale(.95)}
.frame[aria-pressed="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 32%,transparent),color-mix(in srgb,var(--brand) 15%,transparent));
  border-color:color-mix(in srgb,var(--brand) 58%,transparent);color:#fff;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 95%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.frame.add{color:var(--brand-2);font-size:19px;padding:0 14px}
.frame.add:hover{color:#fff;background:color-mix(in srgb,var(--brand) 22%,transparent);
  border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

.chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;min-width:40px;
  padding:0 12px;border-radius:var(--r2);border:1px solid var(--line);background:var(--glass);
  color:var(--muted);font-size:12.5px;box-shadow:inset 0 1px 0 var(--sheen);
  transition:background .16s,border-color .16s,color .16s,transform .12s var(--ease),box-shadow .16s}
.chip:hover{background:var(--glass-2);border-color:var(--line-strong);color:var(--text)}
.chip:active{transform:scale(.95)}
.chip svg{width:17px;height:17px}
.chip[aria-pressed="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 30%,transparent),color-mix(in srgb,var(--brand) 14%,transparent));
  border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:#fff;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 95%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.chip.mono{font-family:var(--ff-display);font-weight:700;font-variant-numeric:tabular-nums;min-width:54px}
.chip:disabled{opacity:.34;cursor:not-allowed}
.chip:disabled:active{transform:none}

.progress{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.08);display:none;overflow:hidden}
.progress.show{display:block}
.progress i{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 12px color-mix(in srgb,var(--brand) 70%,transparent)}

/* ---------------- Barra de secciones (móvil) ---------------- */
.tabbar{display:none}

/* ---------------- Diálogos ---------------- */
dialog{border:1px solid var(--line-strong);border-radius:var(--r5);background:var(--panel);color:var(--text);
  padding:0;max-width:min(460px,calc(100vw - 24px));width:100%;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-3),inset 0 1px 0 var(--sheen)}
dialog[open]{animation:dlg-in .22s var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
dialog::backdrop{background:rgba(3,6,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line)}
dialog h3{margin:0;font-family:var(--ff-display);font-size:16.5px;letter-spacing:-.01em}
dialog .dbody{padding:17px;max-height:58vh;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--glass-3) transparent}
dialog .dbody::-webkit-scrollbar{width:10px}
dialog .dbody::-webkit-scrollbar-thumb{background:var(--glass-3);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
dialog .dfoot{padding:13px 17px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}
dialog .dfoot .tbtn{min-height:var(--touch);padding:9px 16px}
dialog .dfoot .tbtn:not(.primary){border:1px solid var(--line);background:var(--glass)}
dialog .dfoot .tbtn:not(.primary):hover{background:var(--glass-2);border-color:var(--line-strong)}
.tbtn.primary.danger{background:linear-gradient(180deg,#C93E2C,#A82F20);color:#fff;
  box-shadow:0 8px 20px -10px rgba(201,62,44,.9),inset 0 1px 0 rgba(255,255,255,.22)}
.tbtn.primary.danger:hover{background:linear-gradient(180deg,#D4442F,#B23324);
  box-shadow:0 12px 28px -10px rgba(201,62,44,1),inset 0 1px 0 rgba(255,255,255,.3)}
.ios-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ios-steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.ios-steps li > b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--brand),#B61233);color:var(--brand-ink);
  font-family:var(--ff-display);font-size:13px;box-shadow:0 6px 14px -7px rgba(225,26,65,.9)}
.ios-steps span b{color:var(--text)}

dialog.wide{max-width:min(660px,calc(100vw - 24px))}

.form-group{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:22px 0 10px;font-family:var(--ff-display);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.form-group:first-child{margin-top:0}
.mini-btn,.sug{padding:6px 11px;border-radius:100px;border:1px solid var(--line);
  background:var(--glass);font-family:var(--ff-body);font-size:11.5px;line-height:1.3;
  letter-spacing:0;text-transform:none;
  transition:background .16s,border-color .16s,color .16s,transform .12s var(--ease)}
.mini-btn{color:var(--brand-2);font-weight:600}
.sug{color:var(--muted)}
.mini-btn:hover,.sug:hover{border-color:var(--brand-2);background:var(--glass-2);color:var(--text)}
.mini-btn:active,.sug:active{transform:scale(.95);background:var(--glass-3)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* Un elemento con «hidden» tiene que desaparecer aunque su clase diga
   display:flex. Sin esto, el campo del nombre no se ocultaba al cambiar de
   pestaña y entrar y crear cuenta parecían lo mismo. */
[hidden]{display:none!important}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.wide{grid-column:1 / -1}
.field > span{font-size:11.5px;color:var(--muted);font-weight:600}
.field > span small{font-weight:400;opacity:.75}
/* La ficha, por apartados: uno cada vez, no un rollo de treinta campos. */
.seg.pasos{margin-bottom:16px}
.seg.pasos button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paso > .form-group:first-child{margin-top:0}
/* El nombre del apartado ya está en la pestaña: aquí solo queda su acción. */
.paso > .form-group > span{display:none}
.paso > .form-group{justify-content:flex-end;margin:0 0 14px;min-height:34px}
.paso > .form-group.vacio{display:none}

.sugs{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sugs:empty{display:none}

@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .sug,.mini-btn{font-size:12.5px;padding:7px 12px}
  /* 16 px evita que Safari acerque la pantalla al enfocar un campo */
  .ask-input,.field input,.field select,.field textarea,
  #lib-q,.lib-selects select,select.sel,#cfg-categoria{font-size:16px}
  dialog.wide .dbody{max-height:68vh}
  dialog.wide .dfoot .tbtn{flex:1;padding:9px 10px}
}

.ex{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:var(--r3);
  border:1px solid var(--line);background:var(--glass);color:var(--text);text-align:left;
  margin-bottom:8px;cursor:pointer;box-shadow:inset 0 1px 0 var(--sheen);
  transition:background .16s,border-color .16s,transform .16s var(--ease),box-shadow .16s}
.ex:hover{border-color:var(--brand-2);background:var(--glass-2);transform:translateY(-1px);box-shadow:var(--sh-2)}
.ex:active{transform:translateY(0) scale(.99)}
.ex:disabled{opacity:.4;cursor:not-allowed}
.ex:disabled:hover{border-color:var(--line);background:var(--glass);transform:none;box-shadow:inset 0 1px 0 var(--sheen)}
.ex-ico{flex:none;width:38px;height:38px;border-radius:var(--r2);display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ex-ico svg{width:20px;height:20px}
.ex-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ex-txt b{font-family:var(--ff-display);font-size:14px}
.ex-txt small{font-size:11.5px;line-height:1.4;color:var(--muted)}

.saved{display:grid;gap:7px}
.saved-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--glass);box-shadow:inset 0 1px 0 var(--sheen)}
.saved-item span{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-item small{color:var(--muted);font-size:11.5px}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:22px 0}
.kbd{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;align-items:center}
.kbd b{font-family:var(--ff-display);background:var(--glass-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:3px 8px;font-size:11.5px;justify-self:start;white-space:nowrap}
.kbd span{color:var(--muted)}

/* ---------------- Biblioteca ---------------- */
.lib-filtros{display:grid;gap:9px;margin-bottom:14px}
.lib-selects{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lib-selects select{min-height:40px;padding:9px 11px;font-size:13.5px}
.lib-linea{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px}
.lib-cuenta{font-size:12px;color:var(--muted)}
.lib-nota{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted);opacity:.85}
.lib-nota:empty{display:none}
.lib-vacio{padding:26px 18px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6}
.lib-vacio b{display:block;color:var(--text);font-family:var(--ff-display);font-size:15px;margin-bottom:6px}

.lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lib-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r3);
  background:var(--glass);overflow:hidden;box-shadow:inset 0 1px 0 var(--sheen);
  transition:border-color .16s,transform .18s var(--ease),box-shadow .18s}
.lib-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--sh-2)}
.lib-card > img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;
  background:rgba(0,0,0,.3);border-bottom:1px solid var(--line)}
.lib-txt{padding:11px 13px 9px;flex:1;min-width:0}
.lib-txt b{display:block;font-family:var(--ff-display);font-size:14.5px;line-height:1.25;margin-bottom:5px}
.lib-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* La hoja, cuando hay que enseñarla en vez de mandarla a la impresora. */
#hoja-marco{width:100%;height:min(62dvh,760px);border:1px solid var(--line);
  border-radius:var(--r2);background:#fff;display:block}

/* La cuenta es otro asunto que la modalidad o el equipo: se separa. */
#cfg-cuenta-bloque{margin-top:22px;border-top:1px solid var(--line)}
#cuenta-aviso{color:var(--brand-2)}

.lib-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.lib-tags span{font-size:10.5px;line-height:1;padding:5px 9px;border-radius:100px;
  background:var(--glass-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.lib-pie{display:flex;align-items:center;gap:7px;padding:9px 11px;border-top:1px solid var(--line);
  background:rgba(0,0,0,.22)}
.lib-origen{flex:1;min-width:0;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lo que has subido pero todavía no has compartido con nadie. */
.lib-origen.privado{color:var(--brand-2)}
.lib-pie .tbtn{padding:7px 12px;font-size:12.5px}
.lib-pie .tbtn.sutil{opacity:.6}
.lib-pie .tbtn.sutil:hover{opacity:1}
@media (max-width:560px){
  .lib-grid{grid-template-columns:1fr}
  .lib-selects{grid-template-columns:1fr}   /* a 16 px, dos por fila se cortan */
  .lib-pie{flex-wrap:wrap}
  .lib-origen{flex:1 0 100%}
}

/* ---------------- Aviso ---------------- */
.toast{position:fixed;left:50%;bottom:calc(96px + var(--tabbar) + var(--safe-b));transform:translate(-50%,14px);
  padding:12px 19px;border-radius:var(--r3);background:var(--bar);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  font-size:13px;box-shadow:var(--sh-2),inset 0 1px 0 var(--sheen);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:50;
  max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   Pantallas pequeñas: el panel pasa a ser una hoja inferior y
   aparece una barra de secciones al alcance del pulgar.
   ============================================================ */
@media (max-width:900px){
  :root{--aside:0px;--tabbar:60px;--topbar:52px}

  /* La última fila tiene que dar de sí lo que ocupa el indicador de inicio del
     iPhone. Antes medía solo --tabbar: la barra se quedaba corta por abajo, sus
     botones se salían por debajo de la pantalla y, como la hoja se apoya a la
     altura de --tabbar + el hueco seguro, entre la hoja y la barra asomaba una
     franja vacía con el fondo del campo. */
  .app{grid-template-rows:auto 1fr auto calc(var(--tabbar) + var(--safe-b))}
  .middle{grid-template-columns:1fr}
  .sm-only{display:flex}
  .topbar .hide-sm{display:none}
  .topbar{gap:6px;padding-left:10px;padding-right:10px}
  .logo span{display:none}
  .topbar .tbtn{min-width:var(--touch);min-height:38px}

  /* La hoja se apoya ENCIMA de la barra de pestañas. Antes llegaba hasta abajo
     del todo y la barra, que va por delante, le comía la última fila: el
     desplegable de la formación visitante o la casilla de la rejilla quedaban
     cortados por la mitad. */
  .aside{
    position:fixed;z-index:40;left:0;right:0;top:auto;
    bottom:calc(var(--tabbar) + var(--safe-b));
    width:auto;
    max-height:min(68dvh, calc(100dvh - var(--topbar) - var(--tabbar) - var(--safe-b) - 60px));
    background:var(--panel);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border-right:0;border-top:1px solid var(--line-strong);
    border-radius:var(--r5) var(--r5) 0 0;
    padding:0 14px 18px;
    box-shadow:0 -30px 70px -26px rgba(0,0,0,.92),inset 0 1px 0 var(--sheen);
    transform:translateY(calc(101% + var(--tabbar) + var(--safe-b)));
    transition:transform .3s var(--ease);
  }
  .aside.open{transform:none}
  /* Las cabeceras de la hoja se quedan pegadas arriba. Difuminan lo que pasa
     por debajo en vez de taparlo con un color liso: si no, sobre un panel de
     cristal se verían como un parche opaco. */
  .sheet-grab{display:block;position:sticky;top:0;z-index:2;
    width:100%;height:26px;margin-bottom:2px;border:0;border-radius:var(--r5) var(--r5) 0 0;
    background:rgba(13,18,27,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .sheet-grab::before{content:"";display:block;width:42px;height:4px;border-radius:4px;
    background:var(--line-strong);margin:11px auto 0}

  /* Cada pestaña enseña su sección y esconde el resto: si abres «Material»,
     ves material, no un panel con todo dentro. */
  .sheet-tit{display:block;position:sticky;top:26px;z-index:2;margin:0 -14px 12px;
    padding:6px 14px 12px;border-bottom:1px solid var(--line);
    background:rgba(13,18,27,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    font-family:var(--ff-display);font-size:15.5px;font-weight:700;letter-spacing:-.01em}
  .aside[data-grupo] .block{display:none}
  .aside[data-grupo="tools"] .block[data-grupo="tools"],
  .aside[data-grupo="trazo"] .block[data-grupo="trazo"],
  .aside[data-grupo="equipos"] .block[data-grupo="equipos"],
  .aside[data-grupo="material"] .block[data-grupo="material"],
  .aside[data-grupo="campo"] .block[data-grupo="campo"],
  .aside[data-grupo="pizarra"] .block[data-grupo="pizarra"]{display:block}
  .aside[data-grupo] .block > h2{display:none}          /* el título ya está arriba */
  .aside[data-grupo] .block[data-grupo="equipos"] > h2{display:block}  /* salvo si hay dos */
  .block{margin-bottom:16px;scroll-margin-top:30px}
  .tools{grid-template-columns:repeat(4,1fr)}
  .mats{grid-template-columns:repeat(5,1fr)}

  .tabbar{
    display:grid;grid-template-columns:repeat(6,1fr);
    background:var(--bar);border-top:1px solid var(--line);
    padding-bottom:var(--safe-b);z-index:41;position:relative;
  }
  /* Sin altura fija: los botones rellenan lo que la barra les deja, así que el
     píxel del borde de arriba no los empuja fuera. */
  .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:0;font-size:9.5px;line-height:1.1;text-align:center;padding:0 2px;
    color:var(--muted);transition:color .18s}
  /* Pastilla encendida detrás del icono de la sección abierta. El z-index
     negativo es lo que la deja DEBAJO del icono y del rótulo: un pseudo-
     elemento posicionado se pinta, si no, por encima del contenido. */
  .tab::before{content:"";position:absolute;left:50%;top:7px;z-index:-1;width:48px;height:27px;border-radius:var(--r1);
    transform:translateX(-50%) scale(.7);opacity:0;
    background:color-mix(in srgb,var(--brand) 24%,transparent);
    transition:opacity .18s,transform .18s var(--ease)}
  .tab svg{width:20px;height:20px}
  .tab[aria-pressed="true"]{color:var(--brand-2)}
  .tab[aria-pressed="true"]::before{opacity:1;transform:translateX(-50%) scale(1)}
  .tab[aria-pressed="true"] svg{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 55%,transparent))}

  .timeline{padding:8px 10px;gap:7px}
  .stage{padding:8px}
  .inspector{top:8px;gap:6px;padding:6px}
  .inspector .name{display:none}
}

/* ============================================================
   Teléfonos: la barra de arriba tiene que caber ENTERA.
   El logo era lo único que podía encogerse, así que absorbía todo lo que
   sobraba y se quedaba en cuatro píxeles: se veía un icono cortado. Ahora no
   cede (flex:none) y lo que se ajusta es el tamaño de los botones, por
   tramos, hasta que todo cabe de verdad.
   ============================================================ */
@media (max-width:430px){
  .topbar{gap:4px;padding-left:8px;padding-right:8px}
  .topbar .logo{flex:none;overflow:visible}
  .topbar .logo svg{width:24px;height:24px}
  .group{gap:3px;padding:2px}
  .topbar .tbtn{min-width:40px;padding-left:8px;padding-right:8px}
}

@media (max-width:365px){
  /* Aquí ya no cabe la marca, y es lo único decorativo de la barra. */
  .topbar .logo{display:none}
}

@media (max-width:340px){
  .topbar{gap:3px;padding-left:6px;padding-right:6px}
  .topbar .tbtn{min-width:34px;padding-left:5px;padding-right:5px}
  .topbar .tbtn svg{width:15px;height:15px}
}

@media (max-width:420px){
  .chip#speed{min-width:48px;padding:0 8px}
  .tab{font-size:9.5px}
  .tab::before{width:44px}
  .toast{bottom:calc(90px + var(--tabbar) + var(--safe-b))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .aside{transition:none}
}