/* ============================================================================
   Diseños de la app (Clásico / Pro / Sala de análisis / Pizarra táctica).
   Se elige con el botón 🎨 de la barra superior (ver temas.js) y se guarda en
   el navegador. "Clásico" no tiene reglas acá: es la app tal cual estaba.

   Cada diseño solo redefine las variables de color, tipografía y bordes que ya
   usa toda la app (styles.css / equipo-dashboard.css), más unos pocos ajustes
   de la barra superior; no cambia ninguna pantalla ni función. El color del
   club es --acc (lo pone temas.js); --navy es el color principal de la app
   (botones, pestañas activas, barras de gráficos), así que pasa a ser ese color.
   Sala de análisis y Pizarra táctica tienen modo claro y oscuro (botón 🌙/☀️).
   ============================================================================ */

/* ---------------------------------------------------------------- PRO --- */
[data-design="pro"]{
  --a:var(--acc,#d3212d);
  --navy:var(--a);--navy-dark:color-mix(in srgb,var(--a) 72%,#000);
  --gold:var(--a);--on-gold:#fff;--gold-soft:color-mix(in srgb,var(--a) 10%,#fff);
  /* Día: fondo azulado suave, tarjetas blancas, títulos en azul marino y el color del club como acento */
  --bg:#eef2f8;--card:#ffffff;--border:#dbe3ef;--text:#1b2a42;--muted:#566783;--danger:#c62f2b;
  --radius:12px;--radius-sm:8px;--radius-lg:14px;
  --shadow:0 1px 2px rgba(15,32,56,.05),0 10px 26px -16px rgba(15,32,56,.2);
  --surface-1:#ffffff;--surface-2:#f4f7fc;--surface-3:#e9eff8;--surface-4:#dbe4f0;
  --focus-ring:color-mix(in srgb,var(--a) 35%,#fff);--heading:#0f2038;
}
[data-design="pro"][data-theme="dark"]{
  /* Noche: azul marino profundo con acento rojo (la misma combinación del panel de scouting) */
  --navy:color-mix(in srgb,var(--a) 90%,#fff);--navy-dark:color-mix(in srgb,var(--a) 60%,#000);
  --gold:var(--navy);--gold-soft:color-mix(in srgb,var(--a) 17%,#0d1a2e);
  --bg:#0a1424;--card:#111f36;--border:#243a5c;--text:#e8edf6;--muted:#94a6c2;--danger:#ef5a56;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px -18px rgba(0,0,0,.7);
  --surface-1:#111f36;--surface-2:#16263f;--surface-3:#1d3050;--surface-4:#27406a;
  --focus-ring:color-mix(in srgb,var(--a) 45%,#000);--heading:#f2f6fc;
}
[data-design="pro"] body{font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
[data-design="pro"] body.equipo-page{--dash-font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--accent-strong:var(--navy)}
[data-design="pro"] body h1,[data-design="pro"] body h2,[data-design="pro"] body h3{letter-spacing:-.015em}
[data-design="pro"] header.topbar{background:var(--card);color:var(--text);border-bottom:1px solid var(--border);box-shadow:none}
[data-design="pro"] .topbar-inner .who,
[data-design="pro"] body.equipo-page .eq-breadcrumb,
[data-design="pro"] body.equipo-page .eq-breadcrumb a{color:var(--muted)}
[data-design="pro"] body.equipo-page .eq-breadcrumb-current{color:var(--text)}
[data-design="pro"] .theme-toggle,
[data-design="pro"] header.topbar .btn{background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text)!important}
[data-design="pro"] .theme-toggle:hover,
[data-design="pro"] header.topbar .btn:hover{background:var(--surface-3)!important}
[data-design="pro"] .card h2{border-bottom:1px solid var(--border)}
[data-design="pro"] .btn-gold:hover{background:var(--navy-dark);color:#fff}

/* ------------------------------------------------- SALA DE ANÁLISIS --- */
[data-design="sala"]{
  --a:var(--acc,#d3212d);
  --navy:color-mix(in srgb,var(--a) 92%,#000);--navy-dark:#080a0e;
  --gold:var(--navy);--on-gold:#ffffff;--gold-soft:color-mix(in srgb,var(--a) 10%,#fff);
  --bg:#eceff3;--card:#ffffff;--border:#d3d9e2;--text:#10151c;--muted:#566173;--danger:#c62f2b;
  --radius:3px;--radius-sm:2px;--radius-lg:4px;--shadow:none;
  --surface-1:#ffffff;--surface-2:#f4f6f9;--surface-3:#e9edf2;--surface-4:#dde3ea;
  --focus-ring:color-mix(in srgb,var(--a) 35%,#fff);--heading:#0b0e13;
}
[data-design="sala"][data-theme="dark"]{
  --navy:color-mix(in srgb,var(--a) 82%,#fff);--navy-dark:#080a0e;
  --gold:var(--navy);--on-gold:#0b0e13;--gold-soft:color-mix(in srgb,var(--a) 16%,#0b0e13);
  --bg:#0b0e13;--card:#131820;--border:#222b37;--text:#eaeff5;--muted:#93a0b1;--danger:#f0685c;
  --surface-1:#131820;--surface-2:#1a212b;--surface-3:#222b37;--surface-4:#2b3542;
  --focus-ring:color-mix(in srgb,var(--a) 50%,#000);--heading:#f2f6fb;
}
[data-design="sala"] body{font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
[data-design="sala"] body.equipo-page{--r-sm:2px;--r-md:3px;--r-lg:4px;--r-xl:4px;--dash-font:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--accent-strong:var(--navy)}
[data-design="sala"] body h1,[data-design="sala"] body h2,[data-design="sala"] body h3,
[data-design="sala"] .sub-h,[data-design="sala"] .kpi-value,[data-design="sala"] .kpi-label,
[data-design="sala"] .mod-group-title,[data-design="sala"] .brand{font-family:"Barlow Condensed","Barlow",sans-serif;text-transform:uppercase;letter-spacing:.03em}
[data-design="sala"] header.topbar{background:#080a0e;color:#eaeff5;box-shadow:inset 0 -2px 0 var(--navy)}
[data-design="sala"] .card{border-top:3px solid var(--navy)}
[data-design="sala"] .card h2{border-bottom:1px solid var(--border)}
[data-design="sala"] body.equipo-page .kpi-card{border-left:4px solid var(--navy)}
[data-design="sala"] .btn-gold,[data-design="sala"] .btn-navy{text-transform:uppercase;letter-spacing:.05em}

/* ---------------------------------------------------- PIZARRA TÁCTICA --- */
[data-design="pizarra"]{
  --a:var(--acc,#d3212d);
  --navy:color-mix(in srgb,var(--a) 85%,#000);--navy-dark:#06261b;
  --gold:var(--navy);--on-gold:#ffffff;--gold-soft:color-mix(in srgb,var(--a) 10%,#fffdf6);
  --bg:#f1efe4;--card:#fffdf6;--border:rgba(20,64,46,.42);--text:#10281e;--muted:#4c6558;--danger:#b3261e;
  --radius:6px;--radius-sm:4px;--radius-lg:8px;--shadow:none;
  --surface-1:#fffdf6;--surface-2:#f6f3e6;--surface-3:#ece8d6;--surface-4:#e2ddc6;
  --focus-ring:rgba(20,64,46,.4);--heading:#06261b;
}
[data-design="pizarra"][data-theme="dark"]{
  --navy:color-mix(in srgb,var(--a) 50%,#fff);--navy-dark:#06261b;
  --gold:var(--navy);--on-gold:#06261b;--gold-soft:color-mix(in srgb,var(--a) 20%,#0b3022);
  --bg:#0e3a2a;--card:#0b3022;--border:rgba(236,243,232,.42);--text:#eef4ea;--muted:#b9cdbd;--danger:#ff9a8f;
  --surface-1:#0b3022;--surface-2:#0f3a2a;--surface-3:#154634;--surface-4:#1b5240;
  --focus-ring:rgba(236,243,232,.45);--heading:#ffffff;
}
[data-design="pizarra"] body{font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420' fill='none' stroke='%2314402e' stroke-opacity='.09' stroke-width='3'%3E%3Crect x='20' y='20' width='600' height='380'/%3E%3Cline x1='320' y1='20' x2='320' y2='400'/%3E%3Ccircle cx='320' cy='210' r='62'/%3E%3Crect x='20' y='120' width='96' height='180'/%3E%3Crect x='524' y='120' width='96' height='180'/%3E%3C/svg%3E");background-size:640px 420px;background-attachment:fixed}
[data-design="pizarra"][data-theme="dark"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420' fill='none' stroke='%23eef4ea' stroke-opacity='.10' stroke-width='3'%3E%3Crect x='20' y='20' width='600' height='380'/%3E%3Cline x1='320' y1='20' x2='320' y2='400'/%3E%3Ccircle cx='320' cy='210' r='62'/%3E%3Crect x='20' y='120' width='96' height='180'/%3E%3Crect x='524' y='120' width='96' height='180'/%3E%3C/svg%3E")}
[data-design="pizarra"] body.equipo-page{--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:8px;--dash-font:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--accent-strong:var(--navy)}
[data-design="pizarra"] body h1,[data-design="pizarra"] body h2,[data-design="pizarra"] body h3,
[data-design="pizarra"] .sub-h,[data-design="pizarra"] .kpi-value,[data-design="pizarra"] .mod-group-title,
[data-design="pizarra"] .brand,[data-design="pizarra"] .eq-nombre{font-family:"Bebas Neue","Karla",sans-serif;font-weight:400;letter-spacing:.06em}
[data-design="pizarra"] .card h2,[data-design="pizarra"] .sub-h{font-size:1.25em}
[data-design="pizarra"] header.topbar{background:#06261b;color:#eef4ea;box-shadow:none;border-bottom:2px dashed rgba(236,243,232,.35)}
[data-design="pizarra"] .card,[data-design="pizarra"] body.equipo-page .kpi-card{border:2px dashed var(--border)}
[data-design="pizarra"] .card h2{border-bottom:2px dashed var(--border)}

[data-design] .topbar-inner .brand,[data-design] .topbar-inner .brand:visited{color:inherit;text-decoration:none}

/* --------------------------- lo común a los diseños nuevos: dropdown 🎨 --- */
.dz-pop{position:fixed;top:58px;right:14px;z-index:60;width:min(320px,calc(100vw - 28px));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 18px 48px -8px rgba(0,0,0,.45);padding:14px;font-family:inherit}
.dz-pop h4{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;font-family:inherit}
.dz-op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--text);border-radius:var(--radius);padding:9px 10px;cursor:pointer;font:inherit}
.dz-op:hover{background:var(--surface-2)}
.dz-op[aria-checked="true"]{background:var(--surface-2);border-color:var(--border)}
.dz-op b{display:block;font-size:13.5px;font-weight:700}
.dz-op small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.dz-prev{display:flex;flex-shrink:0}
.dz-prev i{display:block;width:16px;height:30px}
.dz-prev i:first-child{border-radius:6px 0 0 6px}.dz-prev i:last-child{border-radius:0 6px 6px 0}
.dz-col{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.dz-sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);padding:0;cursor:pointer}
.dz-sw[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px var(--card)}
.dz-col input[type=color]{width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:50%;background:none;cursor:pointer}
.dz-den{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.dz-den[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.dz-nota{margin:10px 0 0;font-size:11.5px;color:var(--muted)}
.auth-card .dz-btn{right:52px}
.dz-pop button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ------------------------------------------- impresión: siempre como siempre --- */
@media print{
  html[data-design],html[data-design][data-theme="dark"]{
    --navy:#16273f!important;--navy-dark:#0d1a2e!important;--gold:#c9a24a!important;--on-gold:#16273f!important;--gold-soft:#f6efdd!important;
    --bg:#ffffff!important;--card:#ffffff!important;--border:#dde3ec!important;--text:#1a2230!important;--muted:#6b7787!important;--danger:#c40016!important;
    --surface-1:#ffffff!important;--surface-2:#f8f9fc!important;--surface-3:#eef2f9!important;--surface-4:#e6eaf2!important;--heading:#0d1a2e!important;--shadow:none!important
  }
  html[data-design] body{background:#fff!important;background-image:none!important}
  .dz-pop{display:none!important}
}