:root{
--bg:#10141a;
--panel:#171d26;
--panel-2:#1c2430;
--line:#2a3341;
--text:#e8edf3;
--text-dim:#8d9bb0;
--accent:#f2b134;
--accent-dim:#c8912a;
--danger:#e5555c;
--pitch-a:#2e6b3e;
--pitch-b:#357a44;
--radius:10px;
--font-display:'Sora',sans-serif;
--font-body:'Inter',sans-serif;
color-scheme:dark;
}
/* Modo claro: mismas variables, solo cambian los tonos de la interfaz (barras, paneles,
   textos). La cancha (--pitch-a/--pitch-b) y los colores de marca (--accent/--danger)
   se mantienen iguales a propósito, para que funcionen bien sobre cualquiera de los dos fondos. */
:root[data-theme="light"]{
--bg:#eef0f3;
--panel:#ffffff;
--panel-2:#f2f4f7;
--line:#d7dce3;
--text:#1a2230;
--text-dim:#5b6675;
color-scheme:light;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
overflow:hidden;
}
.app{
display:flex;
flex-direction:column;
height:100vh;
}
/* ================= TOPBAR ================= */
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
height:58px;
background:var(--panel);
border-bottom:1px solid var(--line);
flex:none;
}
.brand{display:flex;align-items:center;gap:10px;position:relative;}
/* Botón de menú (tres líneas → X) y su desplegable, igual al que ya usan tus otros
   sitios (Calculadora Liga 1, Simulador de Sorteo), con los colores de este sitio. */
.btn-menu{
width:38px;height:38px;
border-radius:8px;
background:var(--panel-2);
border:1px solid var(--line);
display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
cursor:pointer;flex:none;
transition:border-color .2s ease;
}
.btn-menu span{width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .25s ease,opacity .25s ease;}
.btn-menu:hover,.btn-menu[aria-expanded="true"]{border-color:var(--accent);}
.btn-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.btn-menu[aria-expanded="true"] span:nth-child(2){opacity:0;}
.btn-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.site-menu-nav{
position:absolute;top:calc(100% + 8px);left:0;
min-width:260px;max-width:calc(100vw - 20px);
display:flex;flex-direction:column;
padding:8px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,.5);
z-index:120;
}
.site-menu-nav[hidden]{display:none;}
.site-menu-nav a{
display:flex;align-items:center;gap:12px;
padding:11px 13px;
border-radius:8px;
color:var(--text);
text-decoration:none;
font-size:14px;font-weight:600;
font-family:var(--font-body);
transition:background .2s ease,color .2s ease;
}
.site-menu-nav a img{width:22px;height:22px;object-fit:contain;border-radius:5px;flex:none;}
.site-menu-nav a:hover{background:var(--line);color:var(--accent);}
.site-menu-nav a.activo{color:var(--accent);background:rgba(242,177,52,.12);}
.brand-name{
font-family:var(--font-display);
font-weight:700;
font-size:16px;
letter-spacing:.2px;
}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.zoom-group{
display:flex;align-items:center;gap:2px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:8px;
padding:2px;
}
.zoom-value{
font-size:12px;
color:var(--text-dim);
width:42px;
text-align:center;
font-variant-numeric:tabular-nums;
}
.icon-btn{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
background:transparent;
border:none;
color:var(--text);
border-radius:6px;
cursor:pointer;
font-size:16px;
}
.icon-btn:hover{background:var(--line);}
.btn-primary{
display:flex;align-items:center;gap:7px;
background:var(--accent);
color:#1a1204;
border:none;
font-family:var(--font-body);
font-weight:600;
font-size:13px;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
transition:filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.08);}
.btn-tool{
display:flex;align-items:center;gap:7px;
background:transparent;
color:var(--text);
border:1px solid var(--line);
font-family:var(--font-body);
font-weight:600;
font-size:13px;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
white-space:nowrap;
transition:background .15s ease,border-color .15s ease;
}
.btn-tool svg{flex:none;}
.btn-tool:hover{background:var(--panel-2);border-color:var(--text-dim);}
.btn-pro{color:var(--accent);border-color:rgba(242,177,52,.45);}
.btn-pro:hover{background:rgba(242,177,52,.12);border-color:var(--accent);}
/* ================= WORKSPACE ================= */
.workspace{
flex:1;
display:flex;
min-height:0;
}
/* ---- toolbar ---- */
.toolbar{
flex:none;
width:56px;
background:var(--panel);
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
padding:12px 0;
position:relative;
z-index:20;
}
.tool-btn{
width:38px;height:38px;
border:none;
background:transparent;
color:var(--text-dim);
border-radius:8px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
touch-action:manipulation;
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
}
.tool-btn:hover{background:var(--panel-2);color:var(--text);}
.tool-btn.active{background:var(--accent);color:#1a1204;}
.tool-btn.danger:hover{background:rgba(229,85,92,.15);color:var(--danger);}
.tool-sep{width:28px;height:1px;background:var(--line);margin:6px 0;}
.tool-group{position:relative;display:flex;flex-direction:column;align-items:center;}
.tool-popover{
display:none;
position:absolute;
left:34px;
top:0;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:8px;
padding:6px;
min-width:170px;
box-shadow:0 8px 24px rgba(0,0,0,.4);
z-index:30;
flex-direction:column;
}
.tool-popover.open{display:flex;}
.tool-group:hover .tool-popover{display:flex;}
.tool-popover.force-hidden{display:none !important;}
.tool-popover button{
background:transparent;border:none;color:var(--text);
text-align:left;padding:8px 10px;border-radius:6px;font-size:13px;
cursor:pointer;font-family:var(--font-body);
}
.tool-popover button:hover{background:var(--line);}
/* ---- Popover de íconos (Línea y Zona): horizontal, solo íconos ---- */
.tool-popover.popover-icons{
flex-direction:row;
min-width:auto;
padding:6px;
gap:4px;
}
.tool-popover.popover-icons button{
width:36px;
height:36px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
}
.popover-label{
font-size:11px;
color:var(--text-dim);
display:block;
margin:2px 2px 6px;
}
.popover-colors{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:6px;
padding:0 2px;
}
.popover-colors span{
width:20px;height:20px;border-radius:50%;cursor:pointer;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.popover-colors span.selected{box-shadow:0 0 0 2px var(--accent);}
.popover-range{width:100%;padding:0 2px;}
/* indicador de que el botón tiene submenú */
.tool-group{position:relative;}
.tool-group > .tool-btn::after{
content:'';
position:absolute;
right:3px;
bottom:3px;
width:4px;height:4px;
border-radius:50%;
background:var(--text-dim);
pointer-events:none;
}
.tool-group:hover > .tool-btn::after{background:var(--accent);}
/* ---- pitch area ---- */
.pitch-area{
flex:1;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
padding:22px;
min-width:0;
min-height:0;
background:
radial-gradient(1200px 600px at 50% 0%, rgba(242,177,52,.05), transparent 60%),
var(--bg);
}
.canvas-stage{
flex:1;
min-height:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
.pitch-frame{
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:16px;
box-shadow:0 20px 50px rgba(0,0,0,.45);
max-width:100%;
max-height:100%;
}
.canvas-wrap{
border-radius:8px;
overflow:hidden;
line-height:0;
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
}
.canvas-wrap canvas{width:100% !important;height:100% !important;}
.canvas-wrap .canvas-container{width:100% !important;height:100% !important;}
/* ---- dock (bench) ---- */
.dock{
flex:none;
margin-top:16px;
display:flex;
align-items:center;
gap:14px;
background:var(--panel);
border:1px solid var(--line);
padding:10px 16px;
border-radius:14px;
box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.dock-label{
font-family:var(--font-display);
font-size:11px;
font-weight:600;
letter-spacing:.3px;
color:var(--text-dim);
padding-right:10px;
border-right:1px solid var(--line);
}
.dock-tokens{
display:grid;
grid-template-columns:repeat(5,1fr);
grid-auto-rows:auto;
gap:8px 10px;
}
.dock-sep{width:1px;align-self:stretch;background:var(--line);}
.dock-token{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;}
.dock-token:active{cursor:grabbing;}
.dock-circle{
width:38px;height:38px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);
font-weight:700;
font-size:14px;
color:#fff;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.14);
}
.ball-circle{background:transparent;box-shadow:none;padding:0;}
.ball-circle img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.14);}
/* dragging ghost */
.drag-ghost{
position:fixed;
pointer-events:none;
z-index:999;
opacity:.9;
transform:translate(-50%,-50%);
}
/* ================= CONTEXT MENU ================= */
.ctx-menu{
display:none;
position:fixed;
z-index:200;
width:220px;
background:var(--panel-2);
border:1px solid var(--line);
border-radius:12px;
padding:14px;
box-shadow:0 20px 50px rgba(0,0,0,.5);
font-size:13px;
}
.ctx-menu.open{display:block;}
/* Menú de clic derecho sobre un espacio de Cargar/Guardar pizarra */
/* Menú de clic derecho sobre un espacio de Cargar/Guardar pizarra:
   por encima de .modal-overlay (z-index:300), donde vive este menú. */
.boards-ctx-menu{width:190px;padding:6px;z-index:310;}
.boards-ctx-item{
display:block;
width:100%;
text-align:left;
background:transparent;
border:none;
color:var(--text);
padding:9px 10px;
border-radius:7px;
font-family:var(--font-body);
font-size:13px;
cursor:pointer;
}
.boards-ctx-item:hover{background:var(--line);}
.boards-ctx-item.danger{color:var(--danger);}
.boards-ctx-item.danger:hover{background:rgba(229,85,92,.15);}

.ctx-row{margin-bottom:10px;}
.ctx-row label{
display:block;
font-size:11px;
color:var(--text-dim);
margin-bottom:4px;
}
.ctx-row input[type=text]{
width:100%;
background:var(--bg);
border:1px solid var(--line);
color:var(--text);
border-radius:6px;
padding:6px 8px;
font-family:var(--font-body);
font-size:13px;
}
.ctx-row input[type=range]{width:100%;}
.ctx-shapes{display:flex;gap:6px;}
.ctx-shapes button{
flex:1;
background:var(--bg);
border:1px solid var(--line);
color:var(--text-dim);
border-radius:6px;
padding:6px 0;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
}
.ctx-shapes button.active{border-color:var(--accent);color:var(--accent);}
.ctx-colors{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:6px;
}
.ctx-colors span{
width:22px;height:22px;border-radius:50%;cursor:pointer;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);
}
.ctx-colors span.selected{box-shadow:0 0 0 2px var(--accent);}
.ctx-delete{
width:100%;
background:rgba(229,85,92,.12);
color:var(--danger);
border:1px solid rgba(229,85,92,.3);
border-radius:7px;
padding:8px 0;
font-family:var(--font-body);
font-weight:600;
font-size:12.5px;
cursor:pointer;
margin-top:4px;
}
.ctx-delete:hover{background:rgba(229,85,92,.22);}
/* ================= MODAL ================= */
.modal-overlay{
display:none;
position:fixed;inset:0;
background:rgba(8,10,14,.6);
align-items:center;justify-content:center;
z-index:300;
}
.modal-overlay.open{display:flex;}
.modal{
background:var(--panel-2);
border:1px solid var(--line);
border-radius:14px;
padding:22px;
width:340px;
box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.modal h3{
font-family:var(--font-display);
margin:0 0 8px;
font-size:16px;
}
.modal p{
color:var(--text-dim);
font-size:13px;
line-height:1.5;
margin:0 0 18px;
}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}
.btn-ghost{
background:transparent;
border:1px solid var(--line);
color:var(--text);
padding:8px 14px;
border-radius:8px;
cursor:pointer;
font-family:var(--font-body);
font-size:13px;
}
.btn-ghost:hover{background:var(--line);}
.btn-danger{
background:var(--danger);
border:none;
color:#2a0a0c;
font-weight:600;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
font-family:var(--font-body);
font-size:13px;
}
/* ================= MODAL: INICIAR SESIÓN / REGISTRO ================= */
.modal-auth{
position:relative;
width:440px;
max-width:calc(100vw - 24px);
max-height:calc(100vh - 24px);
max-height:calc(100dvh - 24px);
overflow-y:auto;
padding:26px 24px 24px;
}
.modal-close{
position:absolute;
top:10px;right:10px;
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
background:transparent;
border:none;
color:var(--text-dim);
font-size:22px;
line-height:1;
border-radius:8px;
cursor:pointer;
}
.modal-close:hover{background:var(--line);color:var(--text);}
.modal-auth .auth-sub{margin:0 0 16px;}
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.auth-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.auth-field.full{grid-column:1 / -1;}
.auth-field label{font-size:11px;color:var(--text-dim);}
.auth-input{
width:100%;
background:var(--bg);
border:1px solid var(--line);
color:var(--text);
border-radius:8px;
padding:10px 11px;
font-family:var(--font-body);
font-size:16px; /* 16px evita el zoom automático de iOS al enfocar */
color-scheme:inherit; /* respeta el tema actual en vez de forzar siempre oscuro */
}
.auth-input::placeholder{color:var(--text-dim);}
.auth-input:focus{outline:none;border-color:var(--accent);}
select.auth-input{cursor:pointer;}
.auth-form .auth-submit{width:100%;justify-content:center;padding:11px 14px;margin-top:4px;}
/* Enlaces de texto dentro del modal de cuenta: "¿Olvidó su contraseña?", "Volver a
   iniciar sesión", "Reenviar correo de verificación" */
.auth-link{
display:block;
width:100%;
text-align:center;
background:transparent;
border:none;
color:var(--text-dim);
font-family:var(--font-body);
font-size:12.5px;
padding:4px 0;
cursor:pointer;
text-decoration:underline;
}
.auth-link:hover{color:var(--accent);}
.auth-link[hidden]{display:none;}
.auth-forgot-link{margin-top:10px;}
#resendVerifyBtn{margin:-4px 0 4px;color:var(--accent);}
/* Campo del código de 6 dígitos (verificar correo / restablecer contraseña) */
.auth-code-input{
text-align:center;
font-family:var(--font-display);
font-size:22px;
font-weight:700;
letter-spacing:10px;
padding-left:16px; /* compensa el letter-spacing para que quede centrado a simple vista */
}
.auth-link:disabled{opacity:.5;cursor:default;text-decoration:none;}
.auth-sep{height:1px;background:var(--line);margin:22px 0 18px;}
.modal-auth .auth-register-text{margin:0 0 6px;color:var(--text);}
.auth-section-title{
font-family:var(--font-display);
font-size:15px;
margin:0 0 14px;
color:var(--accent);
}
.modal-auth [hidden]{display:none !important;}
/* ---- Guardar / Cargar pizarra ---- */
.modal-boards .boards-gate-text,
.modal-boards .boards-confirm-text{
color:var(--text);
font-size:14px;
line-height:1.5;
margin:0 0 18px;
}
.modal-boards .boards-gate-btn{width:100%;justify-content:center;padding:11px 14px;}
.boards-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.boards-slot{
display:flex;
align-items:center;
gap:10px;
text-align:left;
background:var(--bg);
border:1px solid var(--line);
color:var(--text);
border-radius:10px;
padding:10px 12px;
cursor:pointer;
font-family:var(--font-body);
min-width:0;
}
.boards-slot:hover:not(:disabled){border-color:var(--accent);background:var(--panel);}
.boards-slot:disabled{opacity:.4;cursor:not-allowed;}
.boards-slot.locked .boards-slot-name{color:var(--accent);}
.boards-slot.locked:disabled{opacity:.6;}
.boards-slot-num{
flex:none;
width:26px;height:26px;
border-radius:50%;
background:var(--line);
color:var(--text);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);
font-size:12px;
font-weight:700;
}
.boards-slot.filled .boards-slot-num{background:var(--accent);color:#1a1204;}
.boards-slot-info{min-width:0;display:flex;flex-direction:column;gap:2px;}
.boards-slot-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.boards-slot-date{font-size:11px;color:var(--text-dim);}
.modal-boards .boards-msg{margin-top:12px;}
.modal-boards .modal-actions{margin-top:14px;}
.boards-loading{grid-column:1 / -1;color:var(--text-dim);font-size:13px;padding:8px 2px;}
/* Mensajes de error/éxito del formulario. Se usa .modal-auth delante para ganarle en
   especificidad a la regla '.modal p' (que los pintaba de gris y con margen inferior). */
.modal-auth .auth-msg{
margin:0;
font-size:13px;
font-weight:500;
line-height:1.4;
color:#ff4d4d; /* rojo */
}
.modal-auth .auth-msg:empty{display:none;}
.modal-auth .auth-msg.ok{color:#5fc37a;}
.auth-user-card{
display:flex;
align-items:center;
gap:12px;
background:var(--bg);
border:1px solid var(--line);
border-radius:12px;
padding:14px;
}
.auth-avatar{
flex:none;
width:42px;height:42px;
border-radius:50%;
background:var(--accent);
color:#1a1204;
font-family:var(--font-display);
font-weight:800;
font-size:18px;
display:flex;align-items:center;justify-content:center;
}
.auth-user-info{flex:1;min-width:0;}
.auth-user-name{font-weight:600;font-size:14px;}
.auth-user-email-row{display:flex;align-items:center;gap:6px;min-width:0;}
.auth-user-email{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;}
.auth-eye-btn{
flex:none;
width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
background:transparent;
border:none;
color:var(--text-dim);
border-radius:5px;
cursor:pointer;
padding:0;
}
.auth-eye-btn:hover{color:var(--text);background:var(--line);}
#authEyeClosed{display:none;}
.level-badge{
flex:none;
font-family:var(--font-display);
font-size:10.5px;
font-weight:700;
letter-spacing:.5px;
padding:4px 9px;
border-radius:999px;
border:1px solid var(--line);
color:var(--text-dim);
}
.level-badge.pro{color:var(--accent);border-color:rgba(242,177,52,.55);background:rgba(242,177,52,.1);}
.level-badge.admin{color:#8ab4ff;border-color:rgba(138,180,255,.55);background:rgba(138,180,255,.12);}
.auth-logout{width:100%;display:flex;justify-content:center;padding:11px 14px;margin-top:16px;text-decoration:none;box-sizing:border-box;}
@media (max-width:480px){
.auth-grid{grid-template-columns:1fr;}
}
/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
.btn-tool .btn-label{display:none;}
.btn-tool{padding:8px 10px;}
}
@media (max-width:860px){
.workspace{flex-direction:column;}
.toolbar{
width:100%;
flex-direction:row;
border-right:none;
border-bottom:1px solid var(--line);
padding:8px 10px;
overflow-x:auto;
}
.tool-sep{width:1px;height:28px;margin:0 6px;}
.tool-popover{left:0;top:46px;}
/* Dock compacto: fichas + balón en una sola fila, para dejar más espacio a la cancha */
.dock{flex-wrap:nowrap;justify-content:center;max-width:100%;margin-top:8px;padding:8px 10px;gap:10px;}
.dock-label{display:none;}
.dock-tokens{gap:6px 8px;}
.dock-circle{width:30px;height:30px;font-size:12px;}
.ball-circle img{width:30px;height:30px;}
/* Márgenes reducidos alrededor de la cancha */
.pitch-area{padding:10px;}
.pitch-frame{padding:8px;border-radius:12px;}
.brand-name{display:none;}
/* Barra superior compacta: solo íconos y, si aún no cabe, se desplaza horizontalmente */
.topbar{padding:0 10px;gap:8px;}
.brand{flex:none;}
.topbar-actions{gap:6px;min-width:0;overflow-x:auto;}
.topbar-actions > *{flex:none;}
.btn-label-export{display:none;}
.btn-primary{padding:8px 10px;}
}