/* =====================================================================
   ATENEA · Panel del juez (tablet) — rediseño sep-2026
   Misma distribución y mismos botones en el mismo lugar; solo cambia el
   estilo: marino + azul del logo + celeste del listón.
   Colores por tipo de descuento (se conservan las familias de antes):
   Ejecución = azul · Dificultad = marino · Neutrales = ámbar · Caída = rojo.
   ===================================================================== */
:root{
  --nav:#0B1C45; --nav2:#12295F; --b:#0F4EC6; --b2:#2A6BE0; --cy:#4AC1F8;
  --ribbon:linear-gradient(100deg,#4AC1F8 0%,#2A6BE0 55%,#0F4EC6 100%);
  --ok:#12A150; --err:#D6363A; --warn:#E0A526; --amb:#C98A16;
  --bg:#EEF2F8; --ink:#0F1A33; --muted:#627089; --line:#DDE4EE;
  --font:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);user-select:none;-webkit-user-select:none}
button{font:inherit;border:0;cursor:pointer;touch-action:manipulation}
button:active{transform:scale(.96)}

/* ---------- Entrada con PIN ---------- */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;
  background:radial-gradient(80% 60% at 100% 0%,rgba(74,193,248,.22),transparent 60%),linear-gradient(160deg,#12295F,#06112B 75%)}
.pin-box{position:relative;overflow:hidden;background:#fff;border-radius:24px;padding:28px 26px 24px;width:390px;max-width:100%;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.pin-box::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ribbon)}
.pin-box img{width:78px;height:78px}
.pin-marca{font-weight:800;font-style:italic;letter-spacing:.08em;font-size:18px;color:var(--nav);margin-top:6px}
.pin-marca span{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--b2);margin-top:2px}
.pin-box h1{margin:12px 0 14px;font-size:21px;font-weight:700;color:var(--ink)}
.pin-box label{display:block;text-align:left;font-size:12.5px;font-weight:600;color:#44516B;margin:12px 0 6px}
.pin-box input{width:100%;font-size:24px;padding:12px;border:2px solid #D3DBE7;border-radius:14px;text-align:center;font-family:var(--font);font-weight:700;color:var(--nav)}
.pin-box input:focus{outline:none;border-color:var(--b2);box-shadow:0 0 0 4px rgba(42,107,224,.15)}
.pin-box .code{text-transform:uppercase;letter-spacing:6px;font-style:italic}
.pin-box .pin{letter-spacing:12px}
.err{background:#FDECEC;color:#A92226;border:1px solid #F6C6C7;border-left:4px solid var(--err);padding:10px 12px;border-radius:12px;margin-bottom:6px;font-size:14px;text-align:left}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.keypad button{height:66px;font-size:26px;font-weight:700;border-radius:16px;background:#EEF2F8;color:var(--nav);box-shadow:inset 0 -3px 0 #DCE3EE}
.keypad button:active{background:#E1E8F3}
.keypad .k-ok{background:linear-gradient(180deg,#19B45C,var(--ok));color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(18,161,80,.3)}
.keypad .k-del{background:#E1E8F3}
.keypad.sm{grid-template-columns:repeat(6,1fr);margin-top:6px}
.keypad.sm button{height:54px;font-size:22px}

/* ---------- Aplicación ---------- */
body.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.jbar{position:relative;background:linear-gradient(100deg,var(--nav2),var(--nav) 60%);color:#fff;display:flex;align-items:center;gap:16px;padding:10px 16px 12px;flex:0 0 auto}
.jbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ribbon)}
.jbar .ap b{font-size:22px;font-weight:800;font-style:italic;display:block;letter-spacing:.01em}
.jbar .ap span{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--cy)}
.jbar .info{flex:1;display:flex;flex-direction:column;font-size:13.5px;color:#C9D4EE}
.jbar .salir{color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.jbar .salir:active{background:#fff;color:var(--nav)}
.net{font-size:20px;color:#7F92BE}.net.ok{color:#5CF2B8}.net.off{color:#FF7A7D;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.wrap{flex:1;display:flex;min-height:0}
.lista{width:230px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.lista-h{padding:11px 14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid #EEF1F6}
#lista{overflow-y:auto;flex:1}
.it{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:#fff;border-bottom:1px solid #EEF1F6;text-align:left}
.it .n{font-weight:800;font-style:italic;font-size:20px;min-width:52px;color:var(--b);font-variant-numeric:tabular-nums}
.it .nm{flex:1;font-size:16.5px;font-weight:600}
.it .st{font-size:18px;color:var(--ok)}
.it.on{background:linear-gradient(90deg,#E4F1FE,#fff);box-shadow:inset 5px 0 0 var(--b)}
.it.done{opacity:.55}
.it.done.on{opacity:1}
.work{flex:1;overflow-y:auto;padding:16px 18px 130px;position:relative}
.vacio{font-size:22px;color:var(--muted);text-align:center;margin-top:18vh}
.gim{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;background:#fff;border-radius:18px;padding:14px 22px;margin-bottom:14px;box-shadow:0 2px 10px rgba(15,26,51,.06)}
.gim::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ribbon)}
.gim .num{font-size:56px;font-weight:800;font-style:italic;color:var(--b);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gim .nom{font-size:34px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--nav)}
.gim .cat{color:var(--muted);font-size:14px}
.gim .gdat{flex:1}
.intentos{display:flex;gap:8px}
.intentos button{padding:12px 16px;border-radius:12px;background:#EEF2F8;font-weight:700;color:var(--nav)}
.intentos button.on{background:var(--b);color:#fff}
.ya{background:#E4F7EC;color:#0E6B36;border:1px solid #BFE8CF;border-radius:14px;padding:12px 16px;margin-bottom:12px;font-weight:600}
.sec{background:#fff;border-radius:18px;padding:14px 18px 16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(15,26,51,.05)}
.sec h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#44516B}
.sec h3::before{content:"";width:5px;height:16px;border-radius:3px;background:var(--ribbon);transform:skewX(-14deg)}
.sec h3 small{text-transform:none;font-weight:500;letter-spacing:0;color:var(--muted)}
.sec .mt{margin-top:16px}
.btns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.btns button{height:70px;border-radius:16px;background:linear-gradient(180deg,var(--b2),var(--b));color:#fff;font-size:22px;font-weight:700;box-shadow:0 4px 0 #0B3FA6,0 6px 14px rgba(15,78,198,.22)}
.btns button:active{box-shadow:0 1px 0 #0B3FA6}
.btns.big button{height:86px;font-size:26px}
.btns .wide{grid-column:span 2;font-size:17px;background:linear-gradient(180deg,#2A3F73,#1B2C57);box-shadow:0 4px 0 #111F42,0 6px 14px rgba(11,28,69,.2)}
.btns .minor{background:linear-gradient(180deg,#1D2B4F,#0B1C45);font-size:18px;box-shadow:0 4px 0 #050E26,0 6px 14px rgba(11,28,69,.25)}
.btns .caida{grid-column:span 4;background:linear-gradient(180deg,#E6474B,var(--err));height:70px!important;font-size:22px!important;box-shadow:0 4px 0 #A92226,0 6px 14px rgba(214,54,58,.25)}
.btns[data-grupo=N] button{background:linear-gradient(180deg,#DDA12E,var(--amb));box-shadow:0 4px 0 #9A6A0E,0 6px 14px rgba(201,138,22,.22)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:10px}
.chips span{background:#EEF2F8;border-radius:20px;padding:5px 12px;font-weight:600;font-size:14px;color:var(--nav)}
.dval{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.dval b{font-size:44px;font-weight:800;font-style:italic;color:var(--b);font-variant-numeric:tabular-nums}
.lock{pointer-events:none;opacity:.35}
.acciones{position:fixed;left:230px;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:12px 18px;box-shadow:0 -6px 18px rgba(15,26,51,.08)}
.acciones .total{flex:1;text-align:center}
.acciones .total span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.acciones .total b{font-size:42px;font-weight:800;font-style:italic;color:var(--nav);font-variant-numeric:tabular-nums;line-height:1.1}
.acciones .total small{display:block;color:var(--muted)}
.undo,.reset{background:#E6ECF4;color:var(--nav);padding:18px 20px;border-radius:14px;font-weight:700;font-size:17px}
.send{background:linear-gradient(180deg,#19B45C,var(--ok));color:#fff;padding:22px 44px;border-radius:16px;font-size:22px;font-weight:800;box-shadow:0 4px 0 #0B7A3B,0 8px 18px rgba(18,161,80,.3)}
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--nav);color:#fff;padding:14px 22px;border-radius:14px;font-weight:600;opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:90vw;box-shadow:0 12px 30px rgba(6,17,43,.3)}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.ok{background:var(--ok)}.toast.err{background:var(--err)}.toast.warn{background:var(--warn);color:#222}
.modal{position:fixed;inset:0;background:rgba(6,17,43,.6);display:flex;align-items:center;justify-content:center;z-index:90}
.modal[hidden]{display:none}
.mbox{position:relative;overflow:hidden;background:#fff;border-radius:20px;padding:24px 26px;width:460px;max-width:92vw;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.mbox::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ribbon)}
.mbox h2{margin:0 0 10px;font-size:20px;color:var(--nav)}
.mbox .mg{font-size:24px;font-weight:800;margin-bottom:6px}
.mbox ul{padding-left:20px;font-size:17px;line-height:1.7}
.mbox .big{font-size:34px;font-weight:800;font-style:italic;color:var(--nav)}
.mbox .mt2{font-size:17px}
.mbtn{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}

/* Valor general: todo en una sola sección */
.btns.gen{grid-template-columns:repeat(4,1fr)}
.btns.gen button{height:74px;font-size:24px}
.btns.gen .full{grid-column:1/-1}
.btns.gen .minor{background:linear-gradient(180deg,#1D2B4F,#0B1C45)}
.btns.gen .dif{background:linear-gradient(180deg,#2A3F73,#1B2C57);font-size:21px;box-shadow:0 4px 0 #111F42,0 6px 14px rgba(11,28,69,.2)}
.btns.gen .caida{background:linear-gradient(180deg,#E6474B,var(--err));font-size:22px}

/* Tablet vertical / pantallas angostas */
@media (max-width:900px){
  .wrap{flex-direction:column}
  .lista{width:auto;border-right:0;border-bottom:1px solid var(--line);max-height:none}
  .lista-h{display:none}
  #lista{display:flex;overflow-x:auto;overflow-y:hidden}
  .it{flex:0 0 auto;width:auto;border-bottom:0;border-right:1px solid #EEF1F6;padding:10px 14px}
  .it.on{box-shadow:inset 0 -4px 0 var(--b);background:#E4F1FE}
  .acciones{left:0}
  .gim .num{font-size:42px}.gim .nom{font-size:26px}
  .btns{grid-template-columns:repeat(3,1fr)}
  .btns .caida{grid-column:span 3}
  .btns.gen{grid-template-columns:repeat(4,1fr)}
  .btns.gen .full,.btns.gen .caida{grid-column:1/-1}
  .send{padding:20px 26px}
}

/* ---------- Rotaciones (grupos) ---------- */
.rotbox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border-radius:18px;padding:14px 18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(15,26,51,.06);border-left:6px solid var(--cy)}
.rotbox.fin{border-left-color:var(--ok);background:linear-gradient(90deg,#E4F7EC,#fff 60%)}
.rotbox .rt{flex:1;min-width:220px}
.rotbox .rt b{display:block;font-size:20px;font-weight:800;color:var(--nav)}
.rotbox .rt span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.rotbox .rt .pend{color:#96610F;font-weight:600}
.rotbox .sig{background:linear-gradient(180deg,var(--b2),var(--b));color:#fff;padding:18px 26px;border-radius:16px;font-size:19px;font-weight:800;box-shadow:0 4px 0 #0B3FA6,0 8px 18px rgba(15,78,198,.25)}
.rotbox .sig[disabled]{background:#C5CEDC;box-shadow:none;color:#fff;cursor:default;transform:none}
.jbar .info .rot{color:var(--cy);font-weight:700}

/* Calificación enviada: nota que dio este juez (informativa) */
.ya .ya-1{font-weight:700}
.ya .ya-1 b{font-size:24px;font-weight:800;font-style:italic;margin-left:4px;font-variant-numeric:tabular-nums}
.ya .ya-3{margin-top:4px;font-size:13px;font-weight:500;color:#3F6B52}
.gnota{display:flex;flex-direction:column;align-items:flex-end;line-height:1;padding-left:10px}
.gnota span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gnota b{font-size:52px;font-weight:800;font-style:italic;color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gnota[hidden]{display:none}
/* Dificultad / requisitos (niveles): −0.10 −0.30 −0.50 ocupan todo el ancho; Falta / Incompleto a la mitad cada uno */
#dFIJO .btns{grid-template-columns:repeat(6,1fr)}
#dFIJO .btns button{grid-column:span 2}
#dFIJO .btns button.wide{grid-column:span 3}
/* Sin −0.05: el botón se oculta y Ejecución queda en 3 columnas */
.btns button[hidden]{display:none}
.btns.sin005{grid-template-columns:repeat(3,1fr)}
.btns.sin005 .caida{grid-column:1/-1}
/* Calificación enviada: la barra de abajo sigue opaca (solo se atenúan sus botones) para que no se transparente el contenido */
.acciones.lock{opacity:1;background:#fff}
.acciones.lock > *{opacity:.35}
.acciones.lock .total{opacity:1}
/* Tablets (Android/iPad): la barra de calificación respeta la zona de gestos y el área de botones
   siempre deja libre la altura real de la barra (la calcula juez.js) */
.acciones{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
@media (max-width:600px){
  .acciones{gap:8px;padding-left:10px;padding-right:10px}
  .undo,.reset{padding:14px 12px;font-size:15px}
  .send{padding:18px 18px;font-size:19px}
  .acciones .total b{font-size:32px}
}