/* Paleta oscura de RinkMetrics: fondo azul noche, paneles azul pizarra, celeste de la marca como color principal y
   verde lima para lo que se destaca (reloj en marcha, "listo"). Los tableros (marcador de RinkMetrics, encabezado de los
   formularios) van un tono más oscuro que el fondo. Verde, amarillo y rojo solo para estados. */
:root {
    color-scheme: dark;
    --bg: #0b1220;
    --panel: #13203a;
    --panel-2: #1a2a48;
    --field: #0d1422;
    --line: #263a5c;
    --ink: #f3f6fb;
    --ink-2: #c9d2e0;
    --muted: #93a1b8;
    --accent: #22b8f0;      /* celeste de la marca: botón principal, selección, enlaces */
    --accent-ink: #04121c;
    --accent-soft: rgba(34, 184, 240, .14);
    --brand: #22b8f0;       /* celeste de la marca: logo */
    --lime: #c8f135;        /* verde lima: lo que se destaca (reloj en marcha, cintillos) */
    --dark: #070c16;        /* tableros: un tono más oscuro que el fondo */
    --on-dark: #ffffff;
    --on-dark-muted: #93a1b8;
    --accent-on-dark: #22b8f0;
    --good: #22c55e;        /* listo, a favor, recuperaciones */
    --warn: #f5c518;
    --err: #ff6b6b;         /* error, en contra, pérdidas */
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .25);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .35), 0 4px 6px -4px rgba(0, 0, 0, .3);
    --display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
    --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
/* El espacio de la barra de desplazamiento queda reservado: al pasar de una pantalla corta a una larga, nada se corre. */
html { background: var(--bg); scrollbar-gutter: stable; }
body {
    margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.55 var(--body);
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(34, 184, 240, .18), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(200, 241, 53, .08), transparent 60%),
        var(--bg);
}
/* Pista de hockey sobre patines, apenas marcada, de fondo */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .07;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Crect x='10' y='10' width='380' height='180' rx='36'/%3E%3Cline x1='200' y1='10' x2='200' y2='190'/%3E%3Ccircle cx='200' cy='100' r='26'/%3E%3Cpath d='M10 70h44a8 8 0 0 1 8 8v44a8 8 0 0 1-8 8H10'/%3E%3Cpath d='M390 70h-44a8 8 0 0 0-8 8v44a8 8 0 0 0 8 8h44'/%3E%3Ccircle cx='86' cy='100' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='314' cy='100' r='2.5' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.wrap { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px 16px 40px; }

/* Barra superior */
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 42px; height: 42px; flex: none; }
.brand b { font: 700 1.35rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.brand small { display: block; margin-top: 4px; font: 600 .72rem/1 var(--display); letter-spacing: .18em;
               color: var(--muted); text-transform: uppercase; }

/* Portada */
.hero { margin: 34px 0 22px; }
.tag { display: inline-block; padding: 4px 12px; background: var(--accent-soft); color: var(--accent);
       border-radius: 999px; font: 700 .78rem/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 12px 0 10px; font: 700 clamp(2.3rem, 9vw, 3.6rem)/1.05 var(--display); text-transform: uppercase;
     letter-spacing: .01em; }
h1 { color: var(--ink); }
h1 em { font-style: normal; color: var(--accent); }
.lead { margin: 0; color: var(--muted); max-width: 520px; }

/* Marcador de características */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 26px; }
.board div { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent);
             border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; }
.board strong { display: block; font: 700 1.6rem/1 var(--display); color: var(--accent); }
.board span { font: 600 .7rem/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Planilla (formulario) */
.sheet { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent);
         border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0 20px 22px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin: 0 -20px 6px;
              padding: 12px 20px; border-bottom: 1px solid var(--line);
              font: 700 .85rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.sheet-head span:last-child { color: var(--muted); }
.field { margin-top: 16px; }
.field label { display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
               font: 600 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
       background: var(--accent); color: var(--accent-ink); font: 700 .85rem/1 var(--display); letter-spacing: 0; }
.num > i { font-style: normal; }
select { width: 100%; appearance: none; -webkit-appearance: none; padding: 12px 40px 12px 14px;
         background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2322b8f0' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
         color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
         font: 600 1.02rem/1.3 var(--body); }
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
select:disabled { opacity: .5; }
select option { background: var(--field); color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hint { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.notice { margin-top: 16px; padding: 12px 14px; border-left: 4px solid var(--accent); background: var(--accent-soft);
          border-radius: var(--radius-sm); font-weight: 600; }
.notice[hidden] { display: none; }

/* Botón principal */
button.go { position: relative; width: 100%; margin-top: 24px; padding: 15px 18px; border: 0; cursor: pointer;
            background: var(--accent); color: var(--accent-ink);
            font: 700 1.25rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
            border-radius: var(--radius); box-shadow: 0 4px 12px rgba(34, 184, 240, .25);
            transition: transform .12s ease, filter .12s ease; }
button.go:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
button.go:disabled { opacity: .45; cursor: not-allowed; }
button.go::after { content: " ►"; font-size: .85em; }

/* Tablero de progreso */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; padding: 0; margin: 18px 0 0; }
.steps[hidden] { display: none; }
.steps li { font: 600 .72rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.steps li::before { content: ""; display: block; height: 6px; margin-bottom: 7px; border-radius: 999px; background: var(--line); }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--good); }
.steps li.now { color: var(--ink); }
.steps li.now::before { background: linear-gradient(90deg, var(--accent) 0 50%, var(--line) 50%);
                        background-size: 200% 100%; animation: run 1s linear infinite; }
@keyframes run { from { background-position: 100% 0; } to { background-position: 0 0; } }

#status { margin-top: 14px; min-height: 24px; color: var(--muted); font-size: .95rem; }
#status.err { color: var(--err); }
.result { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.result b { flex-basis: 100%; font: 700 1rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--good); }
.btn { display: inline-block; padding: 10px 16px; text-decoration: none; border-radius: var(--radius-sm);
       font: 700 .9rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

.sample { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.sample span { color: var(--muted); font-size: .85rem; }

footer { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
footer b { font: 700 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

@media (max-width: 480px) {
    .grid2 { grid-template-columns: 1fr; }
    #season { display: none; }
    .board strong { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .steps li.now::before { animation: none; background: var(--accent); }
    button.go { transition: none; }
}

/* ---- Usuarios: login, registro, pantalla de jugador ---- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.userbar { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.userbar b { color: var(--ink); font-weight: 600; }
.userbar button { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: 6px 10px; cursor: pointer;
                  font: 700 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.userbar button:hover { border-color: var(--accent); color: var(--accent); }
input[type=text], input[type=password], input[type=email], input[type=date] {
    width: 100%; padding: 12px 14px; background: var(--field); color: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius-sm); font: 500 1rem/1.3 var(--body); }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input::placeholder { color: #5d6b82; }
input[readonly] { background: transparent; border-style: dashed; color: var(--ink); cursor: default; }
.profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profiles label { display: block; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); cursor: pointer;
                  font: 600 .95rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.profiles label small { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; font-weight: 400; }
.profiles input { position: absolute; opacity: 0; }
.profiles label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.profiles label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.req { color: var(--accent); }
.alt { margin-top: 16px; font-size: .9rem; color: var(--muted); }
.alt a { color: var(--accent); }
[hidden] { display: none !important; }
.profiles.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .profiles, .profiles.three { grid-template-columns: 1fr; } }
.hint a { color: var(--accent); }

/* ---- Home: ejemplos y llamada a registrarse ---- */
.section-title { margin: 30px 0 4px; font: 700 1.35rem/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.examples { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.example { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--panel);
           border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); }
.example h3 { margin: 0; font: 700 1.2rem/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.example ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; flex: 1; }
.example li { margin: 3px 0; }
.example .tag { align-self: flex-start; }
.example .btn { text-align: center; }
.cta { margin-top: 26px; text-align: center; }
.go-link { display: block; padding: 15px 18px; background: var(--accent); color: var(--accent-ink); text-decoration: none;
           font: 700 1.25rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
           border-radius: var(--radius); box-shadow: 0 4px 12px rgba(34, 184, 240, .25); }
.go-link:hover { filter: brightness(1.06); }
.go-link::after { content: " ►"; font-size: .85em; }
@media (max-width: 560px) { .examples { grid-template-columns: 1fr; } }
.notice.ok { border-left-color: var(--good); background: rgba(22, 163, 74, .08); }
.notice p { margin: 6px 0 0; font-weight: 400; }

/* ---- Planes de suscripción (registro) ---- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plans .plan { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; margin: 0;
        padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); cursor: pointer;
        font: 400 .9rem/1.35 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.plans .plan input { position: absolute; opacity: 0; }
.plans .plan:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 4px 0 var(--accent), var(--shadow); }
.plans .plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.plans .plan-name { font: 700 1.05rem/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.plans .plan-price b { font: 700 1.7rem/1 var(--display); color: var(--accent); }
.plans .plan-price small { color: var(--muted); font-size: .8rem; }
.plans .plan-month { color: var(--muted); font-size: .8rem; }
.plans .plan-quota { margin-top: 4px; padding: 4px 8px; align-self: flex-start; background: var(--accent-soft);
              border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-weight: 600; font-size: .85rem; }
.plans .plan ul { margin: 6px 0 0; padding-left: 16px; color: var(--muted); font-size: .8rem; }
.plans .plan li { margin: 2px 0; }
@media (max-width: 480px) { .plans { grid-template-columns: 1fr; } }

/* RinkMetrics: equipos del DT */
.coach-teams { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.coach-teams li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); color: var(--muted); }
.coach-teams li b { color: var(--ink); }

/* ---- RinkMetrics en vivo: una columna de celular; marcador y reloj fijos arriba ---- */
.coach-mis { margin-top: 16px; }
.coach-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.coach-lista button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; text-align: left;
                   background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer;
                   font: 600 .95rem/1.3 var(--body); }
.coach-lista button:hover { border-color: var(--accent); }
.coach-lista b { font: 700 1.1rem/1 var(--display); }
.coach-lista small { grid-column: 1 / -1; color: var(--muted); font-weight: 400; font-size: .8rem; }
.coach-vacio { color: var(--muted); font-size: .9rem; padding: 6px 0; list-style: none; }
input[type=date] { color-scheme: dark; }

.coach-board { position: sticky; top: 0; z-index: 5; margin: 14px -16px 0; padding: 10px 16px; display: grid; gap: 8px;
            background: rgba(250, 250, 250, .96); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
            backdrop-filter: blur(6px); }
.coach-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.coach-team { min-width: 0; }
.coach-team b { display: block; font: 700 1.1rem/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-team span { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-team.rival { text-align: right; }
.coach-goals { font: 700 2.5rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.coach-goals i { font-style: normal; color: var(--muted); padding-inline: 6px; }
.coach-clockrow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.coach-period { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font: 600 .8rem/1.2 var(--display);
             letter-spacing: .08em; color: var(--muted); }
.coach-clock { min-width: 84px; text-align: center; font: 700 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
.coach-clock.on { color: var(--accent); }
.coach-clockbtns { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.coach-play { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); cursor: pointer;
           font: 700 .85rem/1 var(--body); }
.coach-play.on { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.coach-play.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.coach-play:focus-visible, .coach-adjust button:focus-visible, .coach-player:focus-visible, .coach-act:focus-visible,
.coach-pair button:focus-visible, .coach-tabs button:focus-visible, .coach-link:focus-visible, .coach-log button:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-adjust { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.coach-adjust button { min-width: 48px; min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
                    color: var(--ink); cursor: pointer; font: 600 .85rem/1 var(--display); }
.coach-sync { text-align: center; font-size: .75rem; color: var(--muted); }
.coach-sync.pend { color: var(--accent); font-weight: 600; }
.coach-sync.off { color: var(--warn); font-weight: 600; }
.coach-aviso { padding: 8px 12px; border-left: 4px solid var(--err); border-radius: var(--radius-sm); background: rgba(220, 38, 38, .08);
            color: var(--err); font-weight: 600; font-size: .9rem; }

.coach-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; padding: 3px; gap: 3px; background: var(--panel-2);
            border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.coach-tabs button { padding: 10px 4px; border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 .85rem/1 var(--body); }
.coach-tabs button { border-radius: 7px; }
.coach-tabs button[aria-selected="true"] { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }

.coach-col { display: grid; gap: 18px; }
.coach-group { display: grid; gap: 7px; }
.coach-group h3 { margin: 4px 0 0; }
.coach-eyebrow { font: 600 .72rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.coach-eyebrow.ink { color: var(--ink); }
.coach-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.coach-line b { color: var(--ink); }
.coach-link { padding: 4px 0; border: 0; background: none; color: var(--accent); cursor: pointer; font: 600 .8rem/1.2 var(--body); }
.coach-nuevo { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px; }
.coach-nuevo button { padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); cursor: pointer; font: 700 .85rem/1 var(--body); }
/* Jugadores: el nombre completo es lo que se lee primero; el número y "Arquero", chicos arriba. */
.coach-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.coach-player { position: relative; display: grid; align-content: start; gap: 3px; padding: 6px 8px 8px; min-height: 58px; text-align: left;
             border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer;
             box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.coach-player .cab { display: flex; align-items: center; gap: 6px; padding-left: 12px; min-height: 14px; }
.coach-player .n { font: 600 .72rem/1 var(--display); letter-spacing: .04em; color: var(--muted); }
.coach-player .ar { padding: 1px 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
                 font: 700 .58rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.coach-player .s { font: 700 .86rem/1.18 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.coach-player[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.coach-player[aria-pressed="true"] .s { color: var(--accent); }
.coach-player.oncourt::before { content: ""; position: absolute; top: 9px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.coach-player:not(.oncourt) .cab { padding-left: 0; }
.coach-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.coach-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coach-act { display: grid; gap: 2px; min-height: 58px; padding: 10px 8px; text-align: left; border: 1px solid var(--line); border-radius: 10px;
          background: var(--panel); color: var(--ink); cursor: pointer; transition: transform .08s, box-shadow .12s;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.coach-act:hover, .coach-pair .btns button:hover, .coach-player:hover { box-shadow: var(--shadow); }
.coach-act:active, .coach-pair button:active, .coach-player:active { transform: scale(.97); }
.coach-act .t { font: 600 .85rem/1.2 var(--body); }
.coach-act .d { font-size: .72rem; color: var(--muted); }
.coach-act .c { font: 500 .75rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Cada acción con su color (--c, desde dt.js): botón relleno, texto blanco; la tarjeta amarilla lleva texto oscuro. */
.coach-act { background: var(--c, var(--panel)); border-color: transparent; color: #fff; }
.coach-act .t { font-weight: 700; }
.coach-act .d, .coach-act .c { color: rgba(255, 255, 255, .85); }
.coach-act.oscuro { color: #422006; }
.coach-act.oscuro .d, .coach-act.oscuro .c { color: rgba(66, 32, 6, .8); }
.coach-act:hover { filter: brightness(1.08); }
.coach-pair { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.coach-pair .t { display: flex; justify-content: space-between; gap: 6px; font: 600 .85rem/1.2 var(--body); }
.coach-pair .t small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.coach-pair .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.coach-pair .btns button { min-height: 40px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
                        cursor: pointer; font: 700 .85rem/1 var(--body); }
.coach-pair .btns button { background: var(--c); border-color: transparent; color: #fff; }
.coach-pair .btns button:hover { filter: brightness(1.08); }
.coach-note { margin: 0; font-size: .75rem; color: var(--muted); }

.coach-log { list-style: none; margin: 0; padding: 0; }
.coach-log li { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; padding: 8px 0;
             border-bottom: 1px solid var(--line); font-size: .85rem; }
.coach-log li.coach-vacio { display: block; border: 0; }
.coach-log .m { font-family: var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.coach-log .w { min-width: 0; }
.coach-log .w small { display: block; color: var(--muted); font-size: .75rem; }
.coach-log button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: .75rem; }
.coach-log button:hover:not(:disabled) { border-color: var(--err); color: var(--err); }
.coach-log button:disabled { opacity: .4; cursor: default; }
.coach-tag { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; }

.coach-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.coach-kpi { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.coach-kpi b { color: var(--accent); }
.coach-kpi b { display: block; font: 700 1.4rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.coach-kpi span { font-size: .72rem; color: var(--muted); }
.coach-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.coach-table { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.coach-table th, .coach-table td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.coach-table th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: .7rem; }
.coach-table th:first-child, .coach-table td:first-child { position: sticky; left: 0; text-align: left; background: var(--panel); }
.coach-table th:first-child { background: var(--panel-2); }
.coach-table tfoot td { background: var(--panel-2); }
.coach-table tfoot td { font-weight: 700; border-bottom: 0; }

.coach-toast { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 10; margin-inline: auto;
            display: flex; align-items: center; gap: 14px; width: fit-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px;
            background: var(--ink); color: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); font-size: .85rem; font-weight: 600; }
.coach-toast button { padding: 4px 0; border: 0; background: none; color: var(--lime); cursor: pointer; font: 700 .85rem/1 var(--body); }
@media (prefers-reduced-motion: reduce) { .coach-act, .coach-act:active, .coach-pair button:active, .coach-player:active { transition: none; transform: none; } }

/* ---- RinkMetrics en tablet y web: con el partido abierto la página usa todo el ancho y la carga va en columnas
   (jugadores | acciones | últimas acciones), así todo entra en la pantalla sin bajar. ---- */
.coach-bloque { display: grid; gap: 6px; align-content: start; }
.coach-bloques { display: grid; gap: 12px; }
@media (min-width: 760px) {
    body.coach-vivo .wrap { padding-top: 10px; }
    body.coach-vivo .topbar .brand svg { width: 32px; height: 32px; }
    body.coach-vivo .topbar .brand small { display: none; }
    body.coach-vivo footer { display: none; }
    /* Marcador en una sola fila: equipos y goles a la izquierda, reloj y botones a la derecha. */
    .coach-board { margin: 8px -16px 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
    .coach-score { grid-column: 1; }
    .coach-clockrow { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    .coach-adjust { grid-column: 2; justify-content: flex-end; }
    .coach-sync { grid-column: 1; grid-row: 2; text-align: left; align-self: center; }
    .coach-aviso { grid-column: 1 / -1; }
    .coach-tabs { max-width: 420px; margin: 10px 0; }
    .coach-tabs button { padding: 8px 4px; }
    /* Carga: jugadores y últimas acciones a la izquierda, acciones a la derecha. */
    .coach-cargar { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr); align-items: start; gap: 14px 20px; }
    .coach-c-jug { grid-column: 1; grid-row: 1; }
    .coach-c-log { grid-column: 1; grid-row: 2; }
    .coach-c-acc { grid-column: 2; grid-row: 1 / span 2; }
    .coach-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coach-bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
    .coach-act { min-height: 50px; padding: 7px 8px; }
    .coach-pair { padding: 6px 8px; }
    .coach-pair .btns button { min-height: 36px; padding: 6px 4px; }
    .coach-log li { padding: 6px 0; }
    #p-resumen { max-width: 1100px; }
}
@media (min-width: 1200px) {
    /* Web: tres columnas y las acciones en cuatro bloques lado a lado. */
    .coach-cargar { grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr) minmax(240px, 1fr); }
    .coach-c-log { grid-column: 3; grid-row: 1; }
    .coach-c-acc { grid-row: 1; }
    .coach-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coach-bloques { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .coach-bloques .coach-row, .coach-bloques .coach-row.three { grid-template-columns: 1fr; }
    .coach-bloques .coach-bloque:last-child .coach-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coach-bloques .coach-bloque:last-child .coach-row.three { grid-template-columns: 1fr; }
    .coach-c-log .coach-log { max-height: calc(100vh - 230px); overflow-y: auto; }
}
/* Casilla "Mantener la sesión iniciada" del ingreso */
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; font-size: .9rem; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.check small { display: block; color: var(--muted); font-size: .8rem; }

/* ---- Tableros en petróleo: el marcador de RinkMetrics y el encabezado de los formularios ---- */
.sheet-head { background: var(--dark); color: var(--on-dark); border-bottom: 0; border-radius: 4px 4px 0 0; }
.sheet-head span:last-child { color: var(--on-dark-muted); }
.coach-board { background: var(--dark); color: var(--on-dark); border-bottom: 0; backdrop-filter: none;
            box-shadow: 0 6px 16px rgba(18, 48, 58, .25); }
.coach-board .coach-team b, .coach-board .coach-goals { color: var(--on-dark); }
.coach-board .coach-team span, .coach-board .coach-goals i, .coach-board .coach-adjust, .coach-board .coach-sync { color: var(--on-dark-muted); }
.coach-board .coach-period { border-color: rgba(255, 255, 255, .25); color: var(--on-dark-muted); }
.coach-board .coach-clock { color: var(--on-dark-muted); }
.coach-board .coach-clock.on { color: var(--lime); }
.coach-board .coach-play.on, .coach-board .coach-play.ghost { background: rgba(255, 255, 255, .08); color: var(--on-dark);
                                                  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.coach-board .coach-adjust button { background: rgba(255, 255, 255, .08); color: var(--on-dark); border-color: rgba(255, 255, 255, .25); }
.coach-board .coach-sync.pend { color: var(--accent-on-dark); }
.coach-board .coach-sync.off { color: #fcd34d; }
.coach-board .coach-aviso { background: rgba(251, 191, 36, .16); border-left-color: #fbbf24; color: #fde68a; }
.coach-board :focus-visible { outline-color: var(--accent-on-dark); }

/* ---- Pantalla completa: en el celular, una columna; desde 960 px cada página ocupa todo el ancho (hasta 1440 px)
   en dos columnas: la presentación a la izquierda (queda fija al bajar) y el contenido a la derecha. ---- */
/* La página ocupa todo el alto: si el contenido es corto, el pie queda abajo de la pantalla. */
.wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wrap > footer { margin-top: auto; }
.wrap > .split, .wrap > #v-partido { margin-bottom: 26px; }
@media (min-width: 600px) { .wrap { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 960px) {
    .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; align-items: start; }
    .split > .intro { position: sticky; top: 24px; }
    .split > .intro .hero { margin-top: 28px; }
    .split > .main { padding-top: 34px; }
    .split > .main > .section-title:first-child { margin-top: 0; }
    .split > .main .sheet + .sheet { margin-top: 20px; }
    .lead { max-width: none; }
}
@media (min-width: 1280px) { .split > .main .examples { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* ---- Secciones: menú Informes / DT al lado de la marca, y la portada con una tarjeta por sección ---- */
.topbar > .brand, .topbar > header.brand { flex: none; }
nav.secciones { display: flex; gap: 4px; margin-right: auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px;
                background: var(--panel); }
nav.secciones a { padding: 6px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none;
                  font: 700 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
nav.secciones a:hover { color: var(--accent); }
nav.secciones a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.to-madsports { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
    font: 600 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.to-madsports:hover { color: var(--accent); border-color: var(--accent); }
.wrap > nav.secciones + .to-madsports { align-self: flex-start; margin-top: 8px; }
.wrap > header.brand + nav.secciones { margin: 12px 0 0; align-self: flex-start; }
.secciones-home .example { gap: 8px; }
.secciones-home .example h3 { font-size: 1.5rem; }
.secciones-home .example .hint { margin: 0; }
.secciones-home .example .btn { text-align: center; }
@media (max-width: 480px) { nav.secciones { order: 3; width: 100%; justify-content: center; } }

/* Botón "Volver" arriba del registro (a la sección de la que viene) */
.volver { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 8px 14px; border: 1px solid var(--line);
          border-radius: 999px; background: var(--panel); color: var(--ink-2); text-decoration: none;
          font: 700 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.volver:hover { border-color: var(--accent); color: var(--accent); }
.split > .intro .volver + .hero { margin-top: 18px; }

/* Portada: la marca, más grande */
body.home .brand { gap: 16px; }
body.home .brand svg { width: 64px; height: 64px; }
body.home .brand b { font-size: 2rem; }
body.home .brand small { font-size: .85rem; margin-top: 6px; }
@media (min-width: 960px) {
    body.home .brand svg { width: 80px; height: 80px; }
    body.home .brand b { font-size: 2.6rem; }
    body.home .brand small { font-size: .95rem; }
}

/* ---- Portada: cualidades bajo el título y el bloque "Por qué RinkMetrics" ---- */
.cualidades { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 6px; padding: 0; list-style: none; }
.cualidades li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.cualidades svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.hero .hint { max-width: 560px; }
.ventajas { margin: 34px 0 6px; }
.ventajas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.ventajas-grid article { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
                         box-shadow: var(--shadow); }
.ventajas-grid svg { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.ventajas-grid h3 { margin: 10px 0 4px; font: 700 1.05rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.ventajas-grid p { margin: 0; font-size: .9rem; color: var(--muted); }
@media (min-width: 1200px) { .ventajas-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Cintillo "Próximamente" en la esquina de una tarjeta */
.proximamente { position: relative; overflow: hidden; }
.cintillo { position: absolute; top: 18px; right: -42px; width: 170px; padding: 5px 0; transform: rotate(35deg);
            background: var(--lime); color: #0b1220; text-align: center; box-shadow: 0 2px 6px rgba(18, 48, 58, .2);
            font: 700 .7rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }

/* El logo es un enlace a la portada */
.brand-link { display: flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.brand-link:hover b { color: var(--accent); }
.brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* Fondo oscuro: los tableros llevan un borde sutil para separarse del fondo; los botones de acción, un poco de brillo. */
.sheet-head { border-bottom: 1px solid var(--line); }
.coach-board { border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.coach-act, .coach-pair .btns button { box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 6px rgba(0, 0, 0, .3); }
.coach-toast { background: #f3f6fb; color: #0b1220; }
.coach-toast button { color: #0a7ea4; }

/* Aviso "Próximamente" (Informes) */
.notice.proximo { border-left-color: var(--lime); background: rgba(200, 241, 53, .08); }
.notice.proximo b { font: 700 .85rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.split > .main > .notice.proximo:first-child { margin-top: 0; margin-bottom: 16px; }

/* Demo de RinkMetrics: aviso arriba de todo */
body:not(.demo) .demo-aviso { display: none; }
.demo-aviso { margin: -8px 0 12px; padding: 8px 14px; border-radius: var(--radius-sm); background: rgba(200, 241, 53, .1);
              border: 1px solid rgba(200, 241, 53, .35); font-size: .85rem; color: var(--ink-2); }
.demo-aviso b { margin-right: 6px; font: 700 .78rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.demo-aviso a { color: var(--accent); font-weight: 600; }

/* Menú superior: cuatro entradas; en el celular, a todo el ancho y en dos filas si hace falta */
html { scroll-behavior: smooth; }
#asi-se-ve { scroll-margin-top: 16px; }
nav.secciones { flex-wrap: wrap; }
nav.secciones a { white-space: nowrap; }
@media (max-width: 480px) { nav.secciones a { flex: 1 1 auto; text-align: center; padding: 6px 8px; font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Galería de capturas de RinkMetrics */
.galeria { margin: 34px 0 6px; }
.galeria-grid { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: 1fr; }
.galeria figure { margin: 0; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
                  box-shadow: var(--shadow); }
.galeria img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.galeria-celular img { max-width: 320px; margin: 0 auto; }
.galeria figcaption { margin-top: 10px; font-size: .88rem; color: var(--muted); }
.galeria figcaption b { display: block; font: 700 .9rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.galeria-demo { max-width: 420px; margin: 18px auto 0; text-align: center; }
@media (min-width: 960px) {
    .galeria-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
    .galeria-grid .galeria-celular { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- RinkMetrics: menú (Dashboard · Partidos · Jugadores), dashboard y fichas de jugadores ---- */
.coach-menu { display: flex; gap: 6px; margin: 14px 0 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px;
           background: var(--panel); width: fit-content; max-width: 100%; overflow-x: auto; }
.coach-menu a { padding: 8px 18px; border-radius: 999px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
             font: 700 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.coach-menu a:hover { color: var(--accent); }
.coach-menu a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.coach-vista { margin-top: 10px; }
.dash-kpis { margin: 12px 0; }
.dash-kpis .coach-kpi b { font-size: 2rem; }
.dash-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.dash-box { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.dash-box h3 { margin: 0 0 10px; font: 700 .85rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dash-proximos .btn { margin-top: 12px; }
@media (min-width: 640px) {
    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-proximos { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .eq-rankings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grafico { width: 100%; height: auto; display: block; }
.grafico .eje { font: 500 11px var(--body); fill: var(--muted); }
.grafico .valor { font: 700 12px var(--body); fill: var(--ink); }
.grafico .grilla { stroke: var(--line); stroke-width: 1; }
.grafico .linea { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.grafico .area-linea { fill: rgba(34, 184, 240, .12); }
.grafico .punto { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }

.fichas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); margin-top: 12px; }
/* La ficha del jugador elegido en un informe: una sola, de un ancho razonable. */
.inf-ficha { grid-template-columns: minmax(270px, 420px); }
.ficha { overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
         border-radius: 14px; box-shadow: var(--shadow); }
.ficha-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 14px 16px 10px;
              background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.ficha-head b { display: block; font: 700 1.1rem/1.2 var(--body); color: var(--ink); }
.ficha-head small { color: var(--muted); font-size: .8rem; }
.ficha-indice { text-align: right; flex: none; }
.ficha-indice b { font: 700 2.2rem/1 var(--display); color: var(--accent); }
.ficha.arquero .ficha-indice b { color: #a78bfa; }
.ficha.sin-datos .ficha-indice b { color: var(--muted); }
.ficha-indice small { display: block; margin-top: 2px; font: 700 .65rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.ficha-pentagono { padding: 4px 6px 0; }
.ficha-pentagono .coach-vacio { padding: 30px 0; text-align: center; }
.pentagono { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.pentagono .anillos polygon, .pentagono .anillos line { fill: none; stroke: #3a5378; stroke-width: 1; }
.pentagono .area { fill: rgba(34, 184, 240, .35); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.ficha.arquero .pentagono .area { fill: rgba(167, 139, 250, .35); stroke: #a78bfa; }
.pentagono .etiquetas { font: 600 10.5px var(--body); fill: var(--ink-2); }
.ficha-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 12px; }
.ficha-datos div { padding: 6px 8px; border-radius: 8px; background: var(--panel-2); }
.ficha-datos b { display: block; font: 700 1rem/1.2 var(--display); color: var(--ink); }
.ficha-datos span { font-size: .72rem; color: var(--muted); }
.ficha-detalle { margin-top: auto; border-top: 1px solid var(--line); }
.ficha-detalle summary { padding: 9px 14px; cursor: pointer; font: 700 .75rem/1 var(--display); letter-spacing: .12em;
                         text-transform: uppercase; color: var(--muted); }
.ficha-detalle summary:hover { color: var(--accent); }
.ficha-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 14px; border-top: 1px solid rgba(255, 255, 255, .04); }
.ficha-fila .t { font: 700 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ficha-fila .v { font-size: .76rem; color: var(--accent); text-align: right; }
.ficha.arquero .ficha-fila .v { color: #a78bfa; }
.ficha-fila .d { font-size: .74rem; color: var(--muted); }
.ficha-fila .n { font: 700 .88rem/1.2 var(--body); color: var(--ink); text-align: right; }
body.coach-vivo .coach-menu { display: none; }

@media (min-width: 960px) { .galeria-grid.galeria-dos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } }

.ficha-head small { display: block; }
.ficha-head .ficha-pj { margin-top: 2px; font: 700 .7rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ficha-datos span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Informes de RinkMetrics: pestaña Informe del partido y sección Informes */
.inf-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.inf-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.inf-seg button { padding: 8px 14px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; font: 600 .85rem/1 var(--body); }
.inf-seg button[aria-pressed="true"] { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }
.inf-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inf-filtros select { width: auto; min-width: 240px; flex: 1 1 240px; max-width: 420px; }
.inf-finalizados { margin-bottom: 14px; }
.inf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin: 4px 0 6px; }
.inf-titulo h3 { margin: 0; font: 700 1.35rem/1.15 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.inf-titulo small { display: block; margin-top: 3px; color: var(--muted); font-size: .85rem; }
.inf-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inf-acciones select { width: auto; min-width: 220px; padding-top: 9px; padding-bottom: 9px; }
.inf-pdf { border: 0; cursor: pointer; font: 600 .9rem/1 var(--body); }
.inf-sub { margin: 18px 0 8px; font: 700 .8rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.inf-sub2 { margin: 14px 0 6px; font: 600 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.inf-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.inf-kpis .coach-kpi small { display: block; margin-top: 1px; font-size: .7rem; color: var(--ink-2); }
.inf-kpis .t-azul b { color: #60a5fa; }
.inf-kpis .t-amarilla b { color: var(--warn); }
.inf-kpis .t-roja b { color: var(--err); }
.inf-partidos b.r-G { color: var(--good); }
.inf-partidos b.r-P { color: var(--err); }
.inf-partidos b.r-E { color: var(--warn); }
.inf-tabla tbody tr.clic { cursor: pointer; }
.inf-tabla tbody tr.clic:hover td { background: var(--panel-2); }
.inf-ar { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(167, 139, 250, .18); color: #a78bfa; font: 700 .62rem/1.3 var(--body); text-transform: uppercase; }
.inf-eventos { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.inf-eventos li { display: grid; grid-template-columns: 76px 1fr; gap: 2px 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: .85rem; }
.inf-eventos li:first-child { border-top: 0; }
.inf-eventos li.coach-vacio { display: block; }
.inf-eventos .m { grid-row: span 2; font-family: var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.inf-eventos .j { color: var(--muted); font-size: .78rem; }
.inf .coach-note { margin-top: 10px; }
@media (min-width: 600px) { .inf-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) {
    .inf-eventos li { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); padding: 6px 14px; }
    .inf-eventos .m { grid-row: auto; }
    .inf-eventos .j { font-size: .85rem; color: var(--ink-2); }
}
@media (min-width: 1100px) { .inf-kpis { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* En RinkMetrics el menú del DT va en la barra superior, en lugar del menú del sitio. */
.topbar .coach-menu { margin: 0 auto 0 0; }
@media (max-width: 760px) { .topbar .coach-menu { order: 3; width: 100%; max-width: none; justify-content: space-between; } }
@media (max-width: 480px) { .topbar .coach-menu a { flex: 1 1 auto; text-align: center; padding: 8px 6px; font-size: .72rem; letter-spacing: .06em; } }

/* Dashboard: dos totales, gráfico de partidos por mes más bajo y rankings de goleadores, penales y libres. */
.dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
#d-meses .grafico { max-height: 150px; }
.dash-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-ranking li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline;
                   padding: 7px 10px 9px; border-radius: 8px; background: var(--panel-2); overflow: hidden; }
.dash-ranking li.coach-vacio { display: block; background: none; padding: 0; }
.dash-ranking .pos { font: 700 .9rem/1 var(--display); color: var(--muted); }
.dash-ranking li:first-child .pos { color: var(--lime); }
.dash-ranking .quien { font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ranking b { font: 700 1.15rem/1 var(--display); color: var(--accent); text-align: right; }
.dash-ranking small { grid-column: 2 / -1; font-size: .72rem; color: var(--muted); }
.dash-ranking .barra { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); opacity: .7; }

/* Vista Equipo */
.eq-balance { margin: 12px 0 4px; }
@media (min-width: 760px) { .eq-balance { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.eq-rankings { margin-top: 18px; align-items: start; }

/* Partidos: la caja de nuevo partido y la lista, lado a lado desde tablet. */
.partidos-grid { display: grid; gap: 16px; margin-top: 12px; align-items: start; }
.partidos-grid .coach-mis { margin-top: 0; }
@media (min-width: 860px) { .partidos-grid { grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: 24px; } }
/* Los títulos de las vistas del DT, todos del mismo color (dentro de .coach-line heredaban el gris). */
.coach-vista .section-title { color: var(--ink); }

/* Menú del DT con el submenú Estadísticas (Equipo y Jugadores). */
.coach-menu { overflow: visible; flex-wrap: wrap; align-items: center; }
.coach-sub { position: relative; }
.coach-sub-btn { padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer;
              white-space: nowrap; font: 700 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.coach-sub-btn::after { content: ""; display: inline-block; margin-left: 7px; border: 4px solid transparent;
                     border-top-color: currentColor; border-bottom: 0; vertical-align: 2px; }
.coach-sub-btn:hover { color: var(--accent); }
.coach-sub.activo .coach-sub-btn { background: var(--accent); color: var(--accent-ink); }
.coach-sub-btn:focus-visible, .coach-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-sub-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 180px; display: grid; gap: 2px;
               padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.coach-sub-menu[hidden] { display: none; }
.coach-sub-menu a { border-radius: 8px; }
@media (max-width: 760px) { .topbar .coach-menu { justify-content: flex-start; border-radius: 18px; } }
@media (max-width: 480px) {
    .topbar .coach-menu a, .topbar .coach-sub-btn { padding: 8px 9px; font-size: .72rem; letter-spacing: .06em; }
    .topbar .coach-menu > a { flex: 0 1 auto; }
}

/* Equipo: ABM del plantel. */
.pl-check { display: flex; align-items: flex-end; }
.pl-check label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; }
.pl-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.pl-cancelar { display: block; margin: 12px auto 0; }
#pl-status { margin-top: 12px; min-height: 20px; color: var(--muted); font-size: .9rem; }
#pl-status.error { color: var(--err); }
#pl-status.ok { color: var(--good); }
.pl-lista { list-style: none; margin: 0; padding: 0; }
.pl-lista li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 2px;
               border-top: 1px solid var(--line); }
.pl-lista li:first-child { border-top: 0; }
.pl-lista li.coach-vacio { display: block; }
.pl-lista li.editando { background: var(--accent-soft); border-radius: 8px; }
.pl-lista .pl-num { font: 700 1rem/1 var(--display); color: var(--accent); text-align: center; }
.pl-lista .quien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pl-lista .quien b { font-weight: 600; color: var(--ink); }
.pl-lista .acc { display: flex; gap: 14px; }
.pl-lista .pl-baja { color: var(--err); }

/* Equipo: ABM de equipos (con su balance) y de jugadores (con sus equipos). */
.coach-aviso-equipo { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 8px;
                   background: rgba(245, 197, 24, .08); color: var(--ink); font-size: .9rem; }
.coach-aviso-equipo a { color: var(--accent); font-weight: 600; }
.abm-status { margin-top: 12px; min-height: 20px; color: var(--muted); font-size: .9rem; }
.abm-status.error { color: var(--err); }
.abm-status.ok { color: var(--good); }
.eq-lista li.eq-fila { grid-template-columns: minmax(0, 1fr) auto auto; }
.eq-balance { display: flex; gap: 4px; }
.eq-dato { display: grid; justify-items: center; min-width: 36px; padding: 4px 6px; border-radius: 6px; background: var(--panel-2); }
.eq-dato b { font: 700 .95rem/1 var(--display); color: var(--ink); }
.eq-dato small { margin-top: 2px; font: 700 .6rem/1 var(--display); letter-spacing: .1em; color: var(--muted); }
/* Informe de club: ramas y categorías a incluir (todas marcadas; la casilla de la rama marca o desmarca las suyas) */
.cats { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.cats legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 7px;
               font: 600 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cat-branch { margin-top: 10px; }
.cat-branch label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.cat-list { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0 0 24px; }
.cats input { width: 18px; height: 18px; accent-color: var(--accent); }
/* Jugadores de un equipo del DT: tildados los que juegan, destildados (atenuados) los que quedaron afuera */
.pl-lista li.pl-tilde { display: block; }
.pl-lista li.pl-tilde label { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; }
.pl-lista li.pl-tilde input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.pl-lista li.pl-tilde.pendiente .quien { opacity: .55; }
.pl-equipos { border: 0; padding: 0; margin: 16px 0 0; }
.pl-equipos legend { padding: 0; margin-bottom: 7px; font: 700 .72rem/1 var(--display); letter-spacing: .14em;
                     text-transform: uppercase; color: var(--muted); }
#pl-equipos { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pl-eq { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.pl-eq input { width: 18px; height: 18px; accent-color: var(--accent); }
.pl-filtro { padding: 10px 0 2px; }
.pl-filtro select { width: auto; min-width: 220px; padding-top: 8px; padding-bottom: 8px; }
.pl-lista .pl-de { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
@media (max-width: 560px) {
    .eq-lista li.eq-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .eq-lista .eq-balance { grid-column: 1 / -1; grid-row: 2; }
}

/* Partidos: cada uno con su botón Eliminar. */
.coach-lista li.con-borrar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.coach-borrar { padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted);
             cursor: pointer; font: 600 .78rem/1 var(--body); }
.coach-borrar:hover { border-color: var(--err); color: var(--err); }

/* Panel: los gráficos de estado y de partidos por mes, de tamaño contenido (no crecen con el ancho de la pantalla). */
#d-estados .grafico { max-width: 360px; }
#d-meses .grafico { max-width: 440px; max-height: 160px; margin: 0 auto; }

/* Botón de un plan en el registro. */
.plan-cta { margin-top: 12px; text-align: center; }

/* Plan que todavía no se puede elegir (los mensuales del DT y del jugador): con el cintillo "Próximamente", apagado y
   borroneado. */
.plan.no-disponible { cursor: default; user-select: none; }
/* Opción que todavía no se puede elegir (los jugadores de la AMP). */
.profiles label.no-disponible { opacity: .5; cursor: not-allowed; }
.plan.no-disponible > :not(.cintillo) { opacity: .55; filter: blur(2.5px); }

/* Equipo desde SIDGAD: el plantel de la categoría para tildar o destildar, y los jugadores "no incluidos" */
.eq-sidgad legend small { margin-left: 6px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.eq-jugadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; max-height: 280px;
                overflow-y: auto; padding: 2px; }
.eq-jug { display: flex; align-items: center; gap: 6px; font: 500 .88rem/1.3 var(--body); cursor: pointer;
          text-transform: none; letter-spacing: 0; color: var(--ink); }
.eq-jug .pl-num { min-width: 2.4em; }
.eq-jug input:not(:checked) ~ .quien { color: var(--muted); text-decoration: line-through; }
.eq-sidgad-cat { display: block; color: var(--muted); font-size: .76rem; }
.pl-lista li.pendiente .quien b { color: var(--muted); }
.pl-tag-pend { margin-left: 6px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted);
               font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }