/*
 * Daygol - estilos personalizados.
 *
 * Único fichero de CSS propio del proyecto. Antes de añadir una regla aquí,
 * comprobar que no existe ya una utilidad/componente de Bootstrap (o una
 * combinación de ellas) que resuelva lo mismo. Ver DOC/frontend-convenciones.md.
 *
 * 1. Tema: paleta, tipografía y variables de Bootstrap (claro y oscuro).
 * 2. Componentes de Bootstrap ajustados al tema (botones, tarjetas, tablas...).
 * 3. Estructura: back-office, acceso, logo y piezas propias.
 * 4. Movimiento y accesibilidad.
 * 5. Registro en directo: ahora en la sección 19.
 * 6. Web pública: la portada por franjas, su cabecera, su pie y los textos legales.
 * 7. Pizarra táctica de los ejercicios (dibujo y editor).
 * 8. Separadores entre las dos mitades de una tarjeta.
 * 9. Tema «Césped» del back-office y del acceso (verde, redondeado): manda
 *    sobre las secciones 1 y 2 dentro de `.dg-backoffice` y `.dg-auth`.
 * 10. Alineación sobre el campo.
 * 11. Clasificación: los partidos de la jornada.
 * 12. Días de la semana de la repetición de un entrenamiento.
 * 13–18. Calendario, página del partido, compartir, hojas para imprimir,
 *    convocatoria y alineación, avisos de «No estará».
 * 19. Registro en directo, para el móvil en horizontal.
 * 20. Eventos del directo (configuración del equipo).
 * 21–22. Plan del partido; historial de convocatorias.
 * 23. Inicio del equipo, «Día de partido».
 * 24–37. Estadísticas, clasificación, plantilla, ficha del jugador, acta, informe, recorrido
 *    del alta, alta de varios jugadores, horarios, convocados, tour, análisis del rival, tarea y sesión.
 * 38. «Mis equipos».
 */

/* 1. Tema --------------------------------------------------------------------
   Base neutra (grises «zinc», todos de la misma familia fría) y un único
   acento verde (el del logo desde el 21/10; antes, naranja), que se usa con
   cuentagotas: botón principal, enlace activo del menú, foco, insignias y marcas.
   Contrastes sobre blanco (WCAG AA pide 4,5:1 en texto normal):
   - Tinta #18181B: 17,7 · gris de apoyo #71717A: 4,8.
   - Verde texto #137A37: 5,4 (el de marca #1DB954 solo en rellenos, iconos
     o trazos, nunca como texto sobre blanco).
   - Botón principal #15853C con texto blanco: 4,6 (el de marca daría 2,6).
   -------------------------------------------------------------------------- */


/* Tipografías servidas desde la propia web (`webroot/fonts/`, licencia OFL;
   ficheros de Fontsource, versión variable): así ninguna petición sale a
   Google Fonts con la IP de quien visita. Solo latino y latino extendido. */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/geist-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/geist-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/geist-mono-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --dg-zinc-50: #FAFAFA;
    --dg-zinc-100: #F4F4F5;
    --dg-zinc-200: #E4E4E7;
    --dg-zinc-300: #D4D4D8;
    --dg-zinc-400: #A1A1AA;
    --dg-zinc-500: #71717A;
    --dg-zinc-600: #52525B;
    --dg-zinc-700: #3F3F46;
    --dg-zinc-800: #27272A;
    --dg-zinc-900: #18181B;
    --dg-zinc-950: #09090B;

    --dg-accent: #1DB954;         /* verde del logo: rellenos, iconos y foco */
    --dg-accent-50: #EDF9F1;
    --dg-accent-100: #DBF4E4;
    --dg-accent-200: #B2E7C5;
    --dg-accent-600: #15853C;     /* botón principal (texto blanco) */
    --dg-accent-700: #137A37;     /* verde accesible para texto */
    --dg-accent-800: #0F5F2B;

    /* Naranja de los datos sobre el césped (mapa de calor, equipo A de la
       pizarra): no cambia con el tema del back-office. */
    --dg-orange: #F25C19;

    /* Sombras teñidas del mismo gris (nunca negro puro) y luz desde arriba. */
    --dg-shadow-xs: 0 1px 2px rgba(24, 24, 27, .06);
    --dg-shadow-sm: 0 1px 3px rgba(24, 24, 27, .08), 0 1px 2px rgba(24, 24, 27, .04);
    --dg-shadow-lg: 0 16px 40px -12px rgba(24, 24, 27, .18), 0 4px 12px -4px rgba(24, 24, 27, .08);

    /* Curva de salida: las integradas de CSS son flojas. Nunca ease-in en UI. */
    --dg-ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* Tipografía y radios también en cada elemento con `data-bs-theme`: Bootstrap
   vuelve a declarar ahí sus valores y taparía los de :root. */
:root,
[data-bs-theme] {
    --bs-body-font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-font-monospace: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.55;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;
}

:root,
[data-bs-theme="light"] {
    --bs-primary: var(--dg-zinc-900);
    --bs-primary-rgb: 24, 24, 27;
    --bs-primary-text-emphasis: var(--dg-accent-700);
    --bs-primary-bg-subtle: var(--dg-accent-50);
    --bs-primary-border-subtle: var(--dg-accent-200);
    --bs-secondary-text-emphasis: var(--dg-zinc-700);
    --bs-secondary-bg-subtle: var(--dg-zinc-100);
    --bs-secondary-border-subtle: var(--dg-zinc-200);
    --bs-success: #059669;
    --bs-success-rgb: 5, 150, 105;
    --bs-success-text-emphasis: #047857;
    --bs-success-bg-subtle: #ECFDF5;
    --bs-success-border-subtle: #A7F3D0;
    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: #B91C1C;
    --bs-danger-bg-subtle: #FEF2F2;
    --bs-danger-border-subtle: #FECACA;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning-text-emphasis: #B45309;
    --bs-warning-bg-subtle: #FFFBEB;
    --bs-warning-border-subtle: #FDE68A;
    --bs-link-color: var(--dg-zinc-900);
    --bs-link-color-rgb: 24, 24, 27;
    --bs-link-hover-color: var(--dg-accent-700);
    --bs-link-hover-color-rgb: 19, 122, 55;
    --bs-focus-ring-color: rgba(29, 185, 84, .22);
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--dg-zinc-900);
    --bs-body-color-rgb: 24, 24, 27;
    --bs-emphasis-color: var(--dg-zinc-950);
    --bs-emphasis-color-rgb: 9, 9, 11;
    --bs-heading-color: var(--dg-zinc-950);
    --bs-secondary-color: var(--dg-zinc-500);
    --bs-secondary-color-rgb: 113, 113, 122;
    --bs-tertiary-color: var(--dg-zinc-400);
    --bs-secondary-bg: #FFFFFF;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: var(--dg-zinc-50);
    --bs-tertiary-bg-rgb: 250, 250, 250;
    --bs-border-color: var(--dg-zinc-200);
    --bs-border-color-translucent: rgba(24, 24, 27, .1);
}

[data-bs-theme="dark"] {
    --bs-primary: var(--dg-zinc-50);
    --bs-primary-rgb: 250, 250, 250;
    --bs-primary-text-emphasis: #B2E7C5;
    --bs-primary-bg-subtle: #0D2A17;
    --bs-primary-border-subtle: #14502A;
    --bs-link-color: var(--dg-zinc-50);
    --bs-link-color-rgb: 250, 250, 250;
    --bs-link-hover-color: #B2E7C5;
    --bs-link-hover-color-rgb: 178, 231, 197;
    --bs-focus-ring-color: rgba(29, 185, 84, .35);
    --bs-body-bg: var(--dg-zinc-950);
    --bs-body-bg-rgb: 9, 9, 11;
    --bs-body-color: var(--dg-zinc-300);
    --bs-body-color-rgb: 212, 212, 216;
    --bs-emphasis-color: var(--dg-zinc-50);
    --bs-emphasis-color-rgb: 250, 250, 250;
    --bs-heading-color: var(--dg-zinc-50);
    --bs-secondary-color: var(--dg-zinc-400);
    --bs-secondary-bg: var(--dg-zinc-900);
    --bs-secondary-bg-rgb: 24, 24, 27;
    --bs-tertiary-bg: #111113;
    --bs-tertiary-bg-rgb: 17, 17, 19;
    --bs-border-color: var(--dg-zinc-800);
}

body {
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; }

/* Titulares con peso y tracking negativo; nunca en mayúsculas. */
h1, .h1, h2, .h2, h3, .h3 { font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; letter-spacing: -.015em; }
.fw-bold { font-weight: 600 !important; }

/* Cifras en columna (dorsales, marcadores, horas): mismas anchuras. */
.table, .badge, .font-monospace { font-variant-numeric: tabular-nums; }

/* 2. Componentes de Bootstrap ---------------------------------------------- */

/* Botones: 36 px de alto, peso medio y una sombra mínima que los despega del
   fondo. Solo se tocan las variables --bs-btn-*: tamaños, focus y disabled
   siguen siendo de Bootstrap. */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .4375rem;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
    letter-spacing: -.005em;
}
.btn-sm {
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .3125rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}
.btn-lg { --bs-btn-border-radius: .625rem; }

/* Principal: naranja con un brillo interior arriba (canto iluminado), igual
   en modo claro y oscuro. */
.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--dg-accent-600);
    --bs-btn-border-color: var(--dg-accent-600);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--dg-accent-700);
    --bs-btn-hover-border-color: var(--dg-accent-700);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--dg-accent-800);
    --bs-btn-active-border-color: var(--dg-accent-800);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--dg-accent-600);
    --bs-btn-disabled-border-color: var(--dg-accent-600);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(9, 9, 11, .24);
}

/* Secundarios y neutros: blancos con borde fino. El seleccionado (botones de
   opción) se rellena del color de su intención. */
.btn-outline-secondary,
.btn-light {
    --bs-btn-color: var(--dg-zinc-900);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: var(--dg-zinc-200);
    --bs-btn-hover-color: var(--dg-zinc-900);
    --bs-btn-hover-bg: var(--dg-zinc-50);
    --bs-btn-hover-border-color: var(--dg-zinc-300);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--dg-zinc-600);
    --bs-btn-active-border-color: var(--dg-zinc-600);
    box-shadow: var(--dg-shadow-xs);
}
.btn-outline-secondary:active:not(.btn-check + *) { --bs-btn-active-color: var(--dg-zinc-900); --bs-btn-active-bg: var(--dg-zinc-100); --bs-btn-active-border-color: var(--dg-zinc-300); }

/* Acción destacada que no es la principal: tinte naranja. */
.btn-outline-primary {
    --bs-btn-color: var(--dg-accent-800);
    --bs-btn-bg: var(--dg-accent-50);
    --bs-btn-border-color: var(--dg-accent-200);
    --bs-btn-hover-color: var(--dg-accent-800);
    --bs-btn-hover-bg: var(--dg-accent-100);
    --bs-btn-hover-border-color: var(--dg-accent-200);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--dg-accent-700);
    --bs-btn-active-border-color: var(--dg-accent-700);
    --bs-btn-disabled-color: var(--dg-accent-800);
    --bs-btn-disabled-bg: var(--dg-accent-50);
    --bs-btn-disabled-border-color: var(--dg-accent-200);
    box-shadow: var(--dg-shadow-xs);
}
.btn-outline-primary:active:not(.btn-check + *) { --bs-btn-active-color: var(--dg-accent-800); --bs-btn-active-bg: var(--dg-accent-100); --bs-btn-active-border-color: var(--dg-accent-200); }

.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: var(--dg-zinc-200);
    box-shadow: var(--dg-shadow-xs);
}
.btn-outline-danger {
    --bs-btn-color: #B91C1C;
    --bs-btn-hover-color: #B91C1C;
    --bs-btn-hover-bg: #FEF2F2;
    --bs-btn-hover-border-color: #FECACA;
    --bs-btn-active-bg: #DC2626;
    --bs-btn-active-border-color: #DC2626;
}
.btn-outline-success {
    --bs-btn-color: #047857;
    --bs-btn-hover-color: #047857;
    --bs-btn-hover-bg: #ECFDF5;
    --bs-btn-hover-border-color: #A7F3D0;
    --bs-btn-active-bg: #059669;
    --bs-btn-active-border-color: #059669;
}
.btn-outline-warning {
    --bs-btn-color: #B45309;
    --bs-btn-hover-color: #B45309;
    --bs-btn-hover-bg: #FFFBEB;
    --bs-btn-hover-border-color: #FDE68A;
    --bs-btn-active-color: var(--dg-zinc-950);
    --bs-btn-active-bg: #FBBF24;
    --bs-btn-active-border-color: #FBBF24;
}
.btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); }

/* En oscuro (web pública y directo, que siguen al sistema) los botones
   blancos pasan a superficie oscura con borde. */
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-danger,
[data-bs-theme="dark"] .btn-outline-success,
[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-bg: var(--dg-zinc-900);
    --bs-btn-border-color: var(--dg-zinc-700);
    --bs-btn-hover-bg: var(--dg-zinc-800);
    --bs-btn-hover-border-color: var(--dg-zinc-600);
}
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--dg-zinc-100);
    --bs-btn-hover-color: var(--dg-zinc-50);
    --bs-btn-active-color: var(--dg-zinc-950);
    --bs-btn-active-bg: var(--dg-zinc-200);
    --bs-btn-active-border-color: var(--dg-zinc-200);
}
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #F87171; --bs-btn-hover-color: #FCA5A5; }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #34D399; --bs-btn-hover-color: #6EE7B7; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #FBBF24; --bs-btn-hover-color: #FCD34D; }
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #FDBA8C;
    --bs-btn-bg: #2A1509;
    --bs-btn-border-color: #5A2A10;
    --bs-btn-hover-color: #FED7AA;
    --bs-btn-hover-bg: #3A1D0C;
    --bs-btn-hover-border-color: #7C3A14;
}
[data-bs-theme="dark"] .btn-outline-secondary:active:not(.btn-check + *) { --bs-btn-active-color: var(--dg-zinc-50); --bs-btn-active-bg: var(--dg-zinc-800); --bs-btn-active-border-color: var(--dg-zinc-600); }
[data-bs-theme="dark"] .btn-outline-primary:active:not(.btn-check + *) { --bs-btn-active-color: #FED7AA; --bs-btn-active-bg: #3A1D0C; --bs-btn-active-border-color: #7C3A14; }

.btn-link {
    --bs-btn-color: var(--dg-zinc-600);
    --bs-btn-hover-color: var(--dg-zinc-950);
    --bs-btn-active-color: var(--dg-zinc-950);
    box-shadow: none;
}

/* Grupos de botones (selector lista / calendario): sin sombras sueltas entre
   piezas, la sombra la lleva el grupo. */
.btn-group { box-shadow: var(--dg-shadow-xs); border-radius: var(--bs-border-radius); }
.btn-group-sm { border-radius: var(--bs-border-radius-sm); }
.btn-group > .btn { box-shadow: none; }

.pagination {
    --bs-pagination-color: var(--dg-zinc-700);
    --bs-pagination-hover-color: var(--dg-zinc-950);
    --bs-pagination-hover-bg: var(--dg-zinc-50);
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: var(--dg-zinc-900);
    --bs-pagination-active-border-color: var(--dg-zinc-900);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

/* Tarjetas: borde fino, sin sombra (en el lienzo blanco la elevación no aporta). */
.card {
    --bs-card-bg: var(--bs-secondary-bg);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: .875rem;
}
/* Tarjeta que es un enlace: se levanta un poco al pasar por encima. */
a.card {
    transition: border-color .2s var(--dg-ease-out), box-shadow .2s var(--dg-ease-out), transform .2s var(--dg-ease-out);
}
@media (hover: hover) and (pointer: fine) {
    a.card:hover { border-color: var(--dg-zinc-300); box-shadow: var(--dg-shadow-lg); transform: translateY(-2px); }
}

.list-group {
    --bs-list-group-bg: var(--bs-secondary-bg);
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-border-radius: var(--bs-border-radius-lg);
    --bs-list-group-item-padding-y: .875rem;
    --bs-list-group-item-padding-x: 1.125rem;
    --bs-list-group-action-hover-bg: var(--dg-zinc-50);
}

/* Tablas: cabecera en gris claro, sin mayúsculas, y filas con aire. */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--dg-zinc-50);
    --bs-table-border-color: var(--dg-zinc-100);
}
.table > thead th {
    background-color: var(--dg-zinc-50);
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.card > .table-responsive > .table { margin-bottom: 0; }
.card > .table-responsive:first-child > .table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--bs-card-inner-border-radius); }
.card > .table-responsive:first-child > .table > thead > tr:first-child > th:last-child { border-top-right-radius: var(--bs-card-inner-border-radius); }

/* Formularios: campos blancos con borde fino y foco en naranja suave. */
.form-control,
.form-select {
    border-color: var(--dg-zinc-200);
    box-shadow: var(--dg-shadow-xs);
    transition: border-color .15s var(--dg-ease-out), box-shadow .15s var(--dg-ease-out);
}
.form-control::placeholder { color: var(--dg-zinc-400); }
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--dg-zinc-300); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dg-accent);
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
/* Solo lectura y desactivados: fondo gris y texto atenuado, sin sombra ni
   foco de color (Bootstrap pinta igual el de solo lectura, y el desactivado
   con --bs-secondary-bg, que aquí es blanco). */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: var(--dg-zinc-100);
    color: var(--dg-zinc-500);
    box-shadow: none;
}
.form-control[readonly]:focus { border-color: var(--dg-zinc-300); box-shadow: none; }
.form-check-input { border-color: var(--dg-zinc-300); }
.form-check-input:checked {
    background-color: var(--dg-zinc-900);
    border-color: var(--dg-zinc-900);
}
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a1a1aa'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { border-color: var(--dg-zinc-700); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--dg-zinc-50); border-color: var(--dg-zinc-50); }
[data-bs-theme="dark"] .form-label { color: var(--dg-zinc-300); }
[data-bs-theme="dark"] .input-group > .input-group-text:first-child { background-color: var(--bs-body-bg); border-color: var(--dg-zinc-700); }
[data-bs-theme="dark"] .table > thead th,
[data-bs-theme="dark"] .table > tbody > tr > .dg-line-heading { background-color: var(--bs-tertiary-bg); color: var(--dg-zinc-400); }
.form-label { font-weight: 500; font-size: .8125rem; color: var(--dg-zinc-700); margin-bottom: .375rem; }
.form-text { color: var(--dg-zinc-500); font-size: .8125rem; }
.invalid-feedback { font-size: .8125rem; }

/* Icono delante del campo (`prepend`): se lee como un solo control, con el
   borde del campo y el icono dentro, no como una caja pegada al lado. */
.input-group > .input-group-text:first-child {
    background-color: #FFFFFF;
    color: var(--dg-zinc-400);
    border-color: var(--dg-zinc-200);
    border-right: 0;
    box-shadow: var(--dg-shadow-xs);
}
.input-group > .input-group-text:first-child + .form-control { border-left: 0; padding-left: 0; }
.input-group:focus-within > .input-group-text:first-child { border-color: var(--dg-accent); color: var(--dg-zinc-600); }
.input-group:focus-within > .form-control:focus { box-shadow: none; }
.input-group:focus-within { border-radius: var(--bs-border-radius); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--dg-zinc-200);
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-box-shadow: var(--dg-shadow-lg);
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-item-padding-x: .625rem;
    --bs-dropdown-item-padding-y: .4375rem;
    --bs-dropdown-item-border-radius: .375rem;
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-link-hover-bg: var(--dg-zinc-100);
    --bs-dropdown-link-active-bg: var(--dg-zinc-100);
    --bs-dropdown-link-active-color: var(--dg-zinc-950);
    --bs-dropdown-divider-margin-y: .375rem;
    box-shadow: var(--bs-dropdown-box-shadow);
}

.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-font-size: .75rem;
    --bs-badge-padding-x: .5rem;
    --bs-badge-padding-y: .25rem;
}

.alert {
    --bs-alert-border-radius: .625rem;
    --bs-alert-padding-y: .75rem;
    font-size: .875rem;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--dg-zinc-950);
    --bs-nav-tabs-link-active-border-color: var(--dg-zinc-200) var(--dg-zinc-200) #FFFFFF;
}
.nav-link { --bs-nav-link-color: var(--dg-zinc-600); --bs-nav-link-hover-color: var(--dg-zinc-950); }

/* 3. Estructura -------------------------------------------------------------- */

/* Un hijo flexible no se encoge por debajo de su contenido sin min-width: 0,
   y Bootstrap no tiene utilidad: sin esto una tabla ancha desborda el panel. */
.dg-min-w-0 { min-width: 0; }

/* Logo: altura fija, la anchura la da la proporción de la imagen. */
.dg-logo { height: 1.75rem; width: auto; }
.dg-auth .dg-logo { height: 2.25rem; }
/* En el menú lateral, más grande: con el corte de la línea de banda, a 28 px parecía recortado (Juan, 21/10). */
.dg-sidebar .dg-logo { height: 38px; }
.dg-setting-preview { max-height: 4rem; max-width: 100%; }
/* Editor visual de los textos legales (Quill): el marco con los bordes y la
   letra del resto de campos. */
.ql-container.dg-wysiwyg { min-height: 20rem; font-family: inherit; font-size: 1rem; }
.ql-snow .ql-picker.ql-header { width: 8rem; }
.dg-wysiwyg .ql-editor { min-height: 20rem; }
.ql-toolbar.ql-snow { border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; background-color: var(--bs-tertiary-bg); }
.ql-container.ql-snow { border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); background-color: #fff; }

/* Back-office. El fondo de la página es gris y el contenido va en un lienzo
   blanco con borde y esquinas redondeadas (desde lg), con la barra lateral
   fundida con el fondo: el menú se distingue sin necesidad de color.
   Bootstrap no trae barra lateral: con offcanvas-lg es desplegable en móvil y
   fija desde lg. */
.dg-backoffice { background-color: var(--dg-zinc-100); }
.dg-sidebar {
    --bs-offcanvas-width: 16rem;
    --bs-offcanvas-bg: var(--dg-zinc-100);
    /* !important: a partir de lg, Bootstrap pone `.offcanvas-lg` en
       `background-color: transparent !important`. */
    background-color: var(--dg-zinc-100) !important;
}
@media (min-width: 992px) {
    .dg-sidebar { width: 15.5rem; }
    .dg-canvas {
        margin: .5rem .5rem .5rem 0;
        height: calc(100dvh - 1rem);
        overflow-y: auto;
        background-color: #FFFFFF;
        border: 1px solid var(--dg-zinc-200);
        border-radius: var(--bs-border-radius-xl);
        box-shadow: var(--dg-shadow-xs);
    }
}
@media (max-width: 991.98px) {
    .dg-canvas { min-height: 100dvh; }
}
.dg-canvas { background-color: #FFFFFF; }

.dg-nav-group + .dg-nav-group { margin-top: 1.5rem; }
.dg-nav-heading {
    padding: 0 .625rem .375rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--dg-zinc-400);
}
/* Aclaración bajo el encabezado de un grupo del menú (`nav/group`). */
.dg-nav-description { padding: 0 .625rem; margin: -.125rem 0 .5rem; }
.dg-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4375rem .625rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
    color: var(--dg-zinc-600);
    font-weight: 500;
    transition: color .15s var(--dg-ease-out), background-color .15s var(--dg-ease-out);
}
.dg-nav .nav-link > .fa-fw { color: var(--dg-zinc-400); transition: color .15s var(--dg-ease-out); }
.dg-nav .nav-link > .dg-own-icon { display: inline-grid; place-items: center; }
.dg-nav .nav-link > .dg-own-icon svg { width: 1.25em; height: 1.25em; }
.dg-nav .nav-link:hover,
.dg-nav .nav-link:focus-visible { color: var(--dg-zinc-950); background-color: rgba(24, 24, 27, .05); }
.dg-nav .nav-link:hover > .fa-fw { color: var(--dg-zinc-600); }
/* Activo: pieza blanca en relieve, con el icono en el acento. */
.dg-nav .nav-link.active {
    color: var(--dg-zinc-950);
    background-color: #FFFFFF;
    border-color: var(--dg-zinc-200);
    box-shadow: var(--dg-shadow-sm);
}
.dg-nav .nav-link.active > .fa-fw { color: var(--dg-accent); }

/* Barra superior del lienzo: se queda arriba al desplazar. */
.dg-topbar {
    z-index: 1020;
    background-color: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(12px);
}
.dg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: .5rem;
    background-color: var(--dg-accent-100);
    color: var(--dg-accent-800);
    font-size: .8125rem;
    font-weight: 600;
}

/* Dorsal: placa tinta con la cifra en blanco, en monoespaciada. */
.dg-shirt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--dg-zinc-900);
    color: #FFFFFF;
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    font-weight: 600;
}

/* Mapa de acciones: celdas del mapa de calor y goles en el naranja del acento
   (Bootstrap no tiene utilidad de color para él). */
.dg-heat { color: var(--dg-orange); }
/* Al filtrar un tipo, el icono de cada acción en el mapa (Juan, 26/10): a 32 px, reducido en el SVG. */
.dg-map-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #FFFFFF; font-size: 18px; line-height: 1; }

/* Sin dorsal, la placa queda en gris claro en lugar de un cuadrado negro vacío. */
.dg-shirt:empty { background-color: var(--dg-zinc-100); }

/* Campo de dos cifras (dorsal en la convocatoria, goles del resultado): no todo el ancho. */
.dg-input-shirt { width: 4.5rem; }

/* Foto del jugador (o sus iniciales si no tiene): cuadrada, a tres tamaños. */
.dg-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    background-color: var(--dg-zinc-100);
    color: var(--dg-zinc-500);
    font-weight: 600;
    letter-spacing: .02em;
}
.dg-photo-sm { width: 2.25rem; height: 2.25rem; font-size: .75rem; border-radius: var(--bs-border-radius-sm); }
.dg-photo-md { width: 3rem; height: 3rem; font-size: .875rem; }
.dg-photo-lg { width: 6rem; height: 6rem; font-size: 1.5rem; border-radius: var(--bs-border-radius-lg); }

/* Texto largo de una ficha (el desarrollo de un ejercicio): líneas de lectura cómoda. */
.dg-prose { max-width: 72ch; }

/* Resumen de dos líneas como mucho en una tarjeta. */
.dg-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Desplegable dentro de una tabla (paso de temporada): que no se estreche en móvil. */
.dg-cell-select { min-width: 10rem; }

/* Minuto de un momento del partido: columna fija para que los textos queden alineados (cabe «45+3'»). */
.dg-minute { width: 3rem; }

/* Barra de la comparativa de estadísticas (propio / rival): fina. Bootstrap no
   tiene utilidad para la altura de la barra de progreso. */
.dg-stat-bar { --bs-progress-height: .375rem; gap: 2px; }

/* Encabezado de línea (Porteros, Defensas...) dentro de las tablas de plantilla. */
.table > tbody > tr > .dg-line-heading {
    background-color: var(--dg-zinc-50);
    color: var(--dg-zinc-600);
    font-size: .75rem;
    font-weight: 600;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top: 1px solid var(--dg-zinc-100);
}

/* Texto leído de un PDF: conserva los saltos de línea pero ajusta las líneas
   largas, con scroll propio (Bootstrap no tiene max-height ni pre-wrap). */
.dg-pdf-text {
    max-height: 36rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .8125rem;
}

/* Acceso: fondo gris con una retícula de puntos y la tarjeta blanca encima. */
.dg-auth {
    background-color: var(--dg-zinc-100);
    background-image: radial-gradient(var(--dg-zinc-300) 1px, transparent 1px);
    background-size: 22px 22px;
}
.dg-auth-card {
    --bs-card-border-radius: var(--bs-border-radius-xl);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-xl) - 1px);
    box-shadow: var(--dg-shadow-lg);
}

/* 4. Movimiento y accesibilidad ------------------------------------------- */

/* Respuesta al pulsar: Bootstrap cambia el color, la escala confirma el clic.
   Se redeclara la transición entera (CSS no permite añadir una propiedad). */
.btn {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: .15s;
    transition-timing-function: var(--dg-ease-out);
}
.btn:active { transform: scale(.97); }
.btn.stretched-link:active,
.btn-check + .btn:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .btn { transition-property: color, background-color, border-color, box-shadow; }
    .btn:active { transform: none; }
    a.card:hover { transform: none; }
}

/* 5. Registro en directo: ver la sección 19 -------------------------------- */

/* 6. Web pública -----------------------------------------------------------
   La portada «desde la banda» (21/10): franjas de solo dos colores, el
   verde bosque (#0C2A1B, desde el 22/10; antes, la noche #0B0D0C) con el
   césped segado a franjas y la cal (#F2F3F2), alternas; un único verde (el de la
   web, `--dg-accent`) para acentos y el botón principal (con texto oscuro:
   8,6:1), y el rojo solo para el punto del directo. Texto base a 18 px,
   titulares muy negros y apretados, contenido a 1440 px. Las capturas de la
   app son de verdad (imágenes y vídeos de las secciones, desde el admin).
   Las piezas que entran al bajar llevan `data-dg-in` (`custom.js` 5d).
   -------------------------------------------------------------------------- */

.dg-site {
    --dg-night: #0C2A1B;
    --dg-surface: #133A26;
    --dg-chalk: #F3F4F3;
    --dg-soft: #B3C5B9;
    --dg-line: rgba(255, 255, 255, .11);
    --dg-live-red: #E5322D;
    --dg-wrap: 1440px;
    --dg-gut: clamp(20px, 4vw, 40px);
    --dg-r: 22px;
    --bs-body-font-size: 1.125rem;
    --bs-body-line-height: 1.55;
    background-color: var(--dg-night);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 120px, transparent 120px 240px);
    color: var(--dg-chalk);
}
.dg-site main { overflow-x: clip; }
.dg-site img, .dg-site video { display: block; max-width: 100%; height: auto; }
.dg-site h1, .dg-site h2, .dg-site h3, .dg-site h4, .dg-site p { margin: 0; color: inherit; }
.dg-site h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.dg-site h3 { font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.dg-site :focus-visible { outline: 3px solid var(--dg-accent); outline-offset: 3px; border-radius: 6px; }
.dg-wrap { max-width: var(--dg-wrap); margin: 0 auto; padding: 0 var(--dg-gut); }
.dg-flash { padding-top: 96px; }
.dg-site [id] { scroll-margin-top: 76px; }

/* Franjas: la oscura es el fondo de la página; la clara cambia los tonos. */
.dg-band { padding: 130px 0; }
.dg-band.is-light {
    --dg-surface: #FFFFFF;
    --dg-soft: #555B57;
    --dg-line: rgba(17, 19, 18, .1);
    background-color: #F2F3F2;
    color: #111312;
}

/* Antetítulo: en verde con su icono en un círculo, que entra girando y late. */
.dg-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; color: var(--dg-accent); }
.dg-kicker > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(29, 185, 84, .14); color: var(--dg-accent); font-size: 15px; }
.dg-band.is-light .dg-kicker > i { background: rgba(29, 185, 84, .12); }
.dg-kicker > i.fa-whatsapp { font-size: 19px; }
.dg-own-icon svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: no-preference) {
    .dg-kicker > i { animation: dg-kick-beat 3.2s ease-in-out infinite; }
    .dg-js [data-dg-in] .dg-kicker > i { transform: scale(.4) rotate(-90deg); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .15s, opacity .4s .15s; }
    .dg-js [data-dg-in].is-in .dg-kicker > i { transform: none; opacity: 1; }
}
@keyframes dg-kick-beat {
    0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(29, 185, 84, .35); }
    85% { box-shadow: 0 0 0 9px rgba(29, 185, 84, 0); }
}
.dg-lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--dg-soft); max-width: 46ch; text-wrap: pretty; }
.dg-heading h2 { margin-top: 16px; }
.dg-heading .dg-lead { margin-top: 20px; }
.dg-heading.is-split { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.dg-heading.is-split .dg-lead { margin-top: 0; max-width: 40ch; }

/* El punto rojo del directo, que late. */
.dg-onair b { position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--dg-live-red); }
.dg-onair b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dg-live-red); animation: dg-live-ping 1.6s ease-out infinite; }
.dg-kicker > i.dg-onair { animation: none; }
@keyframes dg-live-ping {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Botones de Bootstrap a la medida de la web: píldoras altas. */
.dg-site .btn {
    --bs-btn-padding-x: 26px;
    --bs-btn-font-size: 17px;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    transition: transform .15s, background-color .15s, color .15s, border-color .15s;
}
.dg-site .btn:hover { transform: translateY(-2px); }
.dg-site .btn-primary {
    --bs-btn-color: #0B0D0C;
    --bs-btn-bg: var(--dg-accent);
    --bs-btn-border-color: var(--dg-accent);
    --bs-btn-hover-color: #0B0D0C;
    --bs-btn-hover-bg: var(--dg-accent);
    --bs-btn-hover-border-color: var(--dg-accent);
    --bs-btn-active-color: #0B0D0C;
    --bs-btn-active-bg: var(--dg-accent);
    --bs-btn-active-border-color: var(--dg-accent);
}
.dg-site .btn-primary:hover { filter: brightness(1.08); }
.dg-site .btn-outline-light {
    --bs-btn-color: var(--dg-chalk);
    --bs-btn-border-color: rgba(255, 255, 255, .22);
    --bs-btn-hover-color: var(--dg-chalk);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
    --bs-btn-border-width: 1.5px;
}
.dg-site .btn-light { --bs-btn-bg: var(--dg-chalk); --bs-btn-border-color: var(--dg-chalk); --bs-btn-color: #0B0D0C; }
.dg-btn-off { background: rgba(255, 255, 255, .06); color: var(--dg-soft); cursor: default; }
.dg-site .dg-btn-off:hover { transform: none; }

/* Cabecera fija y oscura; al bajar, una raya la separa. */
.dg-site-nav { position: fixed; z-index: 1030; top: 0; left: 0; right: 0; background: rgba(12, 42, 27, .94); transition: box-shadow .2s; }
.dg-site-nav.is-scrolled { box-shadow: 0 1px 0 var(--dg-line); }
.dg-site-nav .dg-wrap { height: 76px; display: flex; align-items: center; gap: 32px; }
.dg-site-nav .dg-logo { height: 32px; }
.dg-site-nav-menu { display: flex; gap: 32px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: 17px; font-weight: 600; }
.dg-site-nav-menu a { color: #DDE1DE; transition: color .15s; }
.dg-site-nav-menu a:hover, .dg-site-nav-menu a[aria-current] { color: var(--dg-accent); }
.dg-site-nav-actions { display: flex; align-items: center; gap: 24px; }
.dg-site-nav-menu + .dg-site-nav-actions { margin-left: 8px; }
.dg-site-nav-brand + .dg-site-nav-actions { margin-left: auto; }
.dg-site-nav-enter { color: var(--dg-chalk); font-size: 17px; font-weight: 700; }
.dg-site-nav-enter:hover { color: var(--dg-accent); }
.dg-site-nav .btn { height: 46px; --bs-btn-padding-x: 22px; --bs-btn-font-size: 16px; }
.dg-site-nav-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--dg-chalk); font-size: 18px; }

/* Dibujos de fondo de las franjas oscuras (22/10, `pitch` de cada sección):
   líneas del campo a toda la franja, inclinadas y casi transparentes
   (`img/pitch/`, el trazo va en el SVG). En la cabecera, el círculo central
   con la línea de medio campo a la altura del título; «el área asomando por
   abajo» va pegada al pie de la franja. */
.dg-pitch-centre, .dg-pitch-area, .dg-pitch-corner, .dg-pitch-field, .dg-pitch-goal { background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.dg-pitch-centre { background-image: url("../img/pitch/centre.svg"); }
.dg-pitch-area { background-image: url("../img/pitch/area.svg"); }
.dg-pitch-corner { background-image: url("../img/pitch/corner.svg"); }
.dg-pitch-field { background-image: url("../img/pitch/field.svg"); }
.dg-pitch-goal { background-image: url("../img/pitch/goal.svg"); }
.dg-pitch-mouth { background: url("../img/pitch/mouth.svg") center bottom / 760px 398px no-repeat; }
.dg-hero.dg-pitch-centre {
    background: url("../img/pitch/circle.svg") 50% 8px / 664px 664px no-repeat,
        linear-gradient(to bottom, transparent 339px, rgba(255, 255, 255, .075) 339px 341px, transparent 341px) 0 0 / 100% 100% no-repeat;
}
@media (max-width: 767.98px) {
    .dg-hero.dg-pitch-centre {
        background: url("../img/pitch/circle.svg") 50% 40px / 420px 420px no-repeat,
            linear-gradient(to bottom, transparent 249px, rgba(255, 255, 255, .075) 249px 251px, transparent 251px) 0 0 / 100% 100% no-repeat;
    }
    .dg-pitch-mouth { background-size: 420px 220px; }
}

/* 1 · Cabecera principal: desde la banda. */
.dg-hero { position: relative; padding: 150px 0 110px; overflow: clip; }
.dg-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 980px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 120px, transparent 120px 240px); pointer-events: none; }
.dg-hero-top { position: relative; text-align: center; }
.dg-hero h1 { margin: 22px auto 0; max-width: 12ch; font-size: clamp(52px, 8.4vw, 124px); line-height: .9; letter-spacing: -.06em; font-weight: 900; text-wrap: wrap; }
.dg-cut { display: inline-block; position: relative; }
.dg-cut-up { display: block; clip-path: inset(0 0 46% 0); }
.dg-cut-down { position: absolute; inset: 0; color: var(--dg-accent); clip-path: inset(57% 0 0 0); }
.dg-cut-down::before { content: attr(data-text); }
.dg-hero .dg-lead { margin: 28px auto 0; max-width: 960px; text-wrap: balance; }
.dg-hero .dg-lead b { display: inline-block; color: var(--dg-chalk); font-weight: 800; font-size: clamp(26px, 3vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.dg-hero .dg-lead b + b { margin-left: .3em; }
.dg-hero .dg-lead b + b::before { content: ""; display: inline-block; width: .12em; height: .78em; margin-right: .55em; border-radius: 2px; background: var(--dg-accent); transform: skewX(-18deg) translateY(.06em); }
.dg-hero-actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dg-hero-note { margin-top: 16px; font-size: 14px; color: var(--dg-soft); }
.dg-stage { position: relative; margin: 72px auto 0; max-width: 1360px; padding: 0 var(--dg-gut); }
.dg-stage .dg-window { width: 78%; }
.dg-stage .dg-window video, .dg-stage .dg-window img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.dg-stage .dg-hero-phone { position: absolute; right: var(--dg-gut); bottom: -40px; width: 50%; }
.dg-hero-tag { left: 2%; bottom: 16%; }

/* Montajes: la ventana del navegador, el móvil y las etiquetas. */
.dg-window { position: relative; border-radius: 16px; background: #FFFFFF; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.dg-window-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #EEF0EF; }
.dg-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #D2D6D3; }
.dg-window-bar span { margin-left: 14px; flex: 1; max-width: 340px; height: 22px; border-radius: 7px; background: #FFFFFF; font-size: 12px; line-height: 22px; color: #737A76; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-window > video, .dg-window > img { width: 100%; }
.dg-phone { position: relative; border-radius: 34px; background: #050806; padding: 10px; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8), 0 0 0 1.5px rgba(255, 255, 255, .12); }
.dg-phone > video, .dg-phone > img { border-radius: 25px; width: 100%; }
.dg-phone.is-land { border-radius: 30px; padding: 9px 12px; }
.dg-phone.is-land > video, .dg-phone.is-land > img { border-radius: 20px; }
.dg-float-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--dg-chalk); color: #111312; font-size: 15px; font-weight: 700; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
.dg-float-tag b { font-weight: 800; }

/* El carrusel del móvil de la cabecera y su etiqueta. */
.dg-slides { position: relative; aspect-ratio: 1688 / 780; border-radius: 20px; overflow: hidden; background: #F3F4F3; }
.dg-slide { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .6s ease; }
.dg-slide.is-on { opacity: 1; }
.dg-slide-caption { display: none; align-items: center; gap: 10px; }
.dg-slide-caption.is-on { display: inline-flex; animation: dg-fade-in .3s ease; }
.dg-tag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dg-accent); box-shadow: 0 0 0 4px rgba(29, 185, 84, .2); }
.dg-slide-caption.is-live .dg-tag-dot { background: var(--dg-live-red); box-shadow: 0 0 0 4px rgba(229, 50, 45, .18); }
@keyframes dg-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 2 · Cifras. */
.dg-facts .dg-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.dg-facts .dg-wrap > div { padding: 34px 24px; border-left: 1px solid var(--dg-line); text-align: center; }
.dg-facts .dg-wrap > div:first-child { border-left: 0; }
.dg-facts .dg-wrap > div > i { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; background: rgba(29, 185, 84, .14); color: var(--dg-accent); font-size: 22px; }
.dg-facts .dg-wrap > div > i.fa-whatsapp { font-size: 26px; }
.dg-facts .dg-own-icon svg { width: 24px; height: 24px; }
.dg-facts .dg-onair b { width: 14px; height: 14px; margin: 0; }
.dg-facts .dg-wrap > div > b { display: block; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.dg-facts span { display: block; margin-top: 12px; color: var(--dg-soft); font-size: 16px; text-wrap: pretty; }

/* 3 · Escaparate con pestañas sobre el campo a rayas. */
.dg-tabs { margin-top: 56px; display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: stretch; }
.dg-tab-list { display: grid; gap: 6px; align-content: start; }
.dg-tab-list button { position: relative; overflow: hidden; display: grid; gap: 4px; text-align: left; padding: 16px 20px 18px; border: 0; border-radius: 16px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color .2s; }
.dg-tab-list button:hover { background: rgba(10, 27, 17, .05); }
.dg-tab-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #737A76; transition: color .2s; }
.dg-tab-text { font-size: 15.5px; color: var(--dg-soft); line-height: 1.45; max-height: 0; opacity: 0; transition: max-height .35s, opacity .35s; }
.dg-tab-list button[aria-selected="true"] { background: var(--dg-surface); box-shadow: 0 12px 30px -18px rgba(10, 27, 17, .35); }
.dg-tab-list button[aria-selected="true"] .dg-tab-name { color: currentColor; }
.dg-tab-list button[aria-selected="true"] .dg-tab-text { max-height: 60px; opacity: 1; }
.dg-tab-bar { position: absolute; left: 20px; right: 20px; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(10, 27, 17, .08); opacity: 0; }
.dg-tab-bar::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--dg-accent); transform-origin: left; transform: scaleX(0); }
.dg-tab-list button[aria-selected="true"] .dg-tab-bar { opacity: 1; }
.dg-tab-list button[aria-selected="true"] .dg-tab-bar::after { animation: dg-tab-run 6s linear forwards; }
.dg-tabs.is-paused .dg-tab-bar::after { animation-play-state: paused; }
@keyframes dg-tab-run { to { transform: scaleX(1); } }
.dg-tab-stage { position: relative; min-height: 620px; border-radius: 28px; background: repeating-linear-gradient(90deg, #2E8B4A 0 8%, #2A8044 8% 16%); overflow: hidden; }
.dg-tab-stage::before { content: ""; position: absolute; inset: 28px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 6px; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .7) calc(50% - 1px), rgba(255, 255, 255, .7) calc(50% + 1px), transparent calc(50% + 1px)); }
.dg-tab-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); }
.dg-tab-pane { position: absolute; z-index: 1; inset: 0; padding: 30px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s, transform .45s; pointer-events: none; }
.dg-tab-pane.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dg-comp { position: relative; width: 100%; height: 100%; }
.dg-comp-slot { position: absolute; }
.dg-comp-slot.is-shot, .dg-comp-slot.is-board { border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .04); }
.dg-comp-slot.is-board { background: #161917; }
.dg-comp-slot > img, .dg-comp-slot > video { width: 100%; }
.dg-comp-slot.is-tall { padding: 8px; border-radius: 28px; }
.dg-comp-slot.is-tall > img, .dg-comp-slot.is-tall > video { height: 440px !important; object-fit: cover; object-position: 50% 0; border-radius: 21px; }
.dg-comp-slot.is-land { padding: 7px 9px; border-radius: 22px; }
.dg-comp-slot.is-land > img, .dg-comp-slot.is-land > video { border-radius: 15px; }
.dg-tab-pane.is-on .dg-comp-slot.is-2 { animation: dg-comp-in .6s .08s both; }
.dg-tab-pane.is-on .dg-comp-slot.is-3 { animation: dg-comp-in .6s .18s both; }
@keyframes dg-comp-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* Las ocho composiciones (`PageBlocksTable::SHOWCASE_FRAMES`). */
.dg-comp-a .is-1 { left: 3%; top: 2%; width: 36%; z-index: 2; }
.dg-comp-a .is-2 { right: 3%; top: 6%; width: 55%; z-index: 1; }
.dg-comp-a .is-3 { right: 12%; bottom: -6%; width: 24%; z-index: 3; }
.dg-comp-b .is-1 { left: 3%; top: 2%; width: 33%; z-index: 2; }
.dg-comp-b .is-2 { left: 37%; top: 5%; width: 26%; z-index: 3; }
.dg-comp-b .is-3 { right: 2%; bottom: 5%; width: 35%; z-index: 4; }
.dg-comp-c .is-1 { left: 2%; top: 10%; width: 68%; z-index: 2; }
.dg-comp-c .is-2 { right: 2%; top: 3%; width: 27%; z-index: 3; }
.dg-comp-c .is-3 { left: 8%; bottom: 4%; width: 44%; z-index: 1; }
.dg-comp-d .is-1 { left: 2%; top: 3%; width: 66%; z-index: 2; }
.dg-comp-d .is-2 { right: 2%; bottom: 4%; width: 50%; z-index: 3; }
.dg-comp-d .is-3 { left: 4%; bottom: 2%; width: 38%; z-index: 4; }
.dg-comp-e .is-1 { left: 2%; top: 2%; width: 58%; z-index: 1; }
.dg-comp-e .is-2 { right: 4%; top: 5%; width: 23%; z-index: 3; }
.dg-comp-e .is-3 { right: 2%; bottom: 5%; width: 58%; z-index: 2; }
.dg-comp-f .is-1 { left: 3%; top: 2%; width: 40%; z-index: 1; }
.dg-comp-f .is-2 { left: 38%; top: 8%; width: 30%; z-index: 3; }
.dg-comp-f .is-3 { right: 2%; bottom: 8%; width: 30%; z-index: 2; }
.dg-comp-g .is-1 { left: 2%; top: 3%; width: 64%; z-index: 1; }
.dg-comp-g .is-2 { right: 2%; top: 14%; width: 44%; z-index: 2; }
.dg-comp-g .is-3 { left: 10%; bottom: 4%; width: 46%; z-index: 3; }
.dg-comp-h .is-1 { left: 8%; top: 3%; width: 26%; z-index: 3; }
.dg-comp-h .is-2 { right: 3%; top: 8%; width: 58%; z-index: 2; }
.dg-comp-h .is-3 { right: 9%; bottom: 5%; width: 40%; z-index: 1; }

/* 4 · Cada herramienta por dentro: el texto a un lado y la app al otro. */
.dg-tool .dg-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.dg-tool.is-flip .dg-wrap { grid-template-columns: 7fr 5fr; }
.dg-tool.is-flip .dg-tool-copy { order: 2; }
.dg-tool-copy h2 { margin-top: 16px; }
.dg-tool-copy .dg-lead { margin-top: 20px; }
.dg-ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; font-size: 17px; }
.dg-ticks li { position: relative; padding-left: 34px; }
.dg-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(29, 185, 84, .16); }
.dg-ticks li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 9px; border: solid var(--dg-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.dg-tool-media { position: relative; isolation: isolate; }
.dg-glow { position: absolute; inset: 10% 6%; border-radius: 50%; background: rgba(29, 185, 84, .22); filter: blur(90px); z-index: -1; }
.dg-band.is-light .dg-glow { background: rgba(29, 185, 84, .28); }
.dg-shot { border-radius: 18px; overflow: hidden; background: #FFFFFF; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); }
.dg-shot:has(> video) { background: #161917; }
.dg-shot > img, .dg-shot > video { width: 100%; }
.dg-shot.is-side { position: absolute; border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .05); }
.dg-tool-media.is-card .dg-shot.is-side { width: 44%; left: -8%; bottom: -18%; }
.dg-tool-media.is-pair-right .dg-shot:not(.is-side) { width: 62%; }
.dg-tool-media.is-pair-right .dg-shot.is-side { width: 58%; right: 0; top: 12%; }
.dg-tool-media.is-pair-left .dg-shot:not(.is-side) { width: 62%; margin-left: auto; }
.dg-tool-media.is-pair-left .dg-shot.is-side { width: 54%; left: 0; top: 16%; }
.dg-tool-media.is-phone-tall { display: flex; justify-content: center; }
.dg-tool-media.is-phone-tall .dg-phone { width: min(340px, 80%); }
.dg-tool-tag { right: 4%; bottom: -26px; }

/* 5 · La semana. */
.dg-week ol { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--dg-cols, 5), 1fr); gap: 16px; }
.dg-week li { position: relative; padding: 26px 22px 28px; border-radius: var(--dg-r); background: var(--dg-surface); box-shadow: inset 0 0 0 1px var(--dg-line); }
.dg-week li > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(29, 185, 84, .14); color: var(--dg-accent); font-size: 18px; }
.dg-week li > i.fa-whatsapp { font-size: 21px; }
.dg-week li > .dg-own-icon svg { width: 22px; height: 22px; }
.dg-week li h3 { margin-top: 18px; font-size: 20px; }
.dg-week li p { margin-top: 8px; font-size: 15.5px; color: var(--dg-soft); }
.dg-week li.is-highlight { background: var(--dg-accent); color: #0B0D0C; box-shadow: none; }
.dg-week li.is-highlight p { color: #0B0D0C; }
.dg-week li.is-highlight > i { background: rgba(11, 13, 12, .12); color: #0B0D0C; }

/* 6 · Precio: los planes y todo lo que incluyen. */
.dg-plans { margin-top: 56px; display: grid; grid-template-columns: repeat(var(--dg-cols, 3), 1fr); gap: 20px; align-items: stretch; }
.dg-plan { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: 26px; background: var(--dg-surface); box-shadow: inset 0 0 0 1px var(--dg-line); }
.dg-plan.is-best { box-shadow: inset 0 0 0 2px var(--dg-accent); }
.dg-plan-tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .08); }
.dg-plan-tag.is-hot { background: var(--dg-live-red); color: #FFFFFF; }
.dg-plan.is-best .dg-plan-tag { background: var(--dg-accent); color: #0B0D0C; }
.dg-plan h3 { margin-top: 22px; font-size: 22px; }
.dg-plan-cost { margin-top: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.dg-plan-cost b { font-size: 64px; line-height: .95; letter-spacing: -.055em; font-weight: 900; white-space: nowrap; }
.dg-plan-cost s { width: 100%; font-size: 18px; color: var(--dg-soft); text-decoration-thickness: 2px; text-decoration-color: var(--dg-live-red); }
.dg-plan-cost span { color: var(--dg-soft); font-size: 17px; }
.dg-plan.is-soon .dg-plan-cost b { color: #DDE1DE; }
.dg-band.is-light .dg-plan.is-soon .dg-plan-cost b { color: #3A3F3C; }
.dg-plan-sub { margin-top: 14px; color: var(--dg-soft); font-size: 16px; min-height: 3em; }
.dg-plan .dg-ticks { margin: 22px 0 28px; font-size: 16px; gap: 10px; }
.dg-plan .btn { margin-top: auto; width: 100%; }
.dg-included { margin-top: 20px; padding: 36px 32px; border-radius: 26px; background: var(--dg-surface); box-shadow: inset 0 0 0 1px var(--dg-line); }
.dg-included h3 { font-size: 17px; color: var(--dg-soft); font-weight: 600; }
.dg-included .dg-ticks { grid-template-columns: repeat(4, 1fr); gap: 14px 24px; font-size: 16px; }

/* 7 · Preguntas, plegables. */
.dg-faq .dg-wrap { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; }
.dg-faq details { border-bottom: 1px solid var(--dg-line); }
.dg-faq summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; position: relative; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary::after { content: ""; position: absolute; right: 8px; top: 34px; width: 11px; height: 11px; border: solid var(--dg-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s; }
.dg-faq details[open] summary::after { transform: rotate(-135deg); top: 40px; }
.dg-faq details p { padding: 0 48px 28px 0; color: var(--dg-soft); }

/* 8 · Cierre y contacto: un panel con borde, el texto y el formulario. */
.dg-close-panel { position: relative; overflow: hidden; border-radius: 32px; background-color: var(--dg-night); box-shadow: inset 0 0 0 1px var(--dg-line); padding: 80px 64px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; }
.dg-close h2 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -.05em; }
.dg-close-panel .dg-lead { margin-top: 18px; font-size: 19px; max-width: 40ch; }
.dg-close-panel .btn-primary { margin-top: 30px; }
.dg-close-form .form-label { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: inherit; }
.dg-close-form .form-check-label { color: inherit; }
.dg-close-form .form-control { font-size: 16px; padding: 14px 16px; border-radius: 12px; border: 0; background: #F2F3F2; color: #0B0D0C; }
.dg-close-form .form-check-label a { color: inherit; text-decoration: underline; }
.dg-close-form .btn { margin-top: 6px; }
.dg-close-legal { margin-top: 20px !important; font-size: 13px; color: var(--dg-soft); }
.dg-close-sent { display: flex; gap: 14px; align-items: flex-start; font-size: 19px; }
.dg-close-sent > i { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(29, 185, 84, .14); color: var(--dg-accent); font-size: 15px; }

/* Pie, en la cal. */
.dg-footer { background: #F2F3F2; color: #555B57; --dg-line: rgba(17, 19, 18, .1); }
.dg-footer-cols { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; font-size: 15px; }
.dg-footer .dg-logo { height: 38px; }
.dg-footer p { margin-top: 14px; max-width: 34ch; }
.dg-footer h4 { margin: 0 0 14px; color: #111312; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.dg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dg-footer a { color: inherit; }
.dg-footer a:hover { color: #111312; }
.dg-footer-social { margin-top: 18px !important; display: flex !important; gap: 8px !important; }
.dg-footer-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dg-line); }
.dg-footer-legal { border-top: 1px solid var(--dg-line); }
.dg-footer-legal .dg-wrap { padding-top: 22px; padding-bottom: 28px; font-size: 13px; color: #6B716D; }

/* Textos legales, en la franja clara. */
.dg-legal-page { padding-top: 150px; }
.dg-legal-page .dg-wrap { max-width: 860px; }
.dg-legal-page h1 { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -.04em; font-weight: 800; }
.dg-legal-date { margin: 10px 0 40px !important; font-size: 14px; color: #555B57; }

/* Páginas de error (layout `error`): el número partido como el logo sobre el
   círculo central del campo, la frase y adónde ir. */
.dg-error-layout { position: relative; overflow-x: clip; }
.dg-error-head { position: relative; width: 100%; padding-top: 22px; padding-bottom: 22px; }
.dg-error-head .dg-logo { height: 32px; }
.dg-error-head a { color: var(--dg-chalk) !important; }
.dg-error-layout main { position: relative; padding: 24px 0 64px; }
.dg-error { position: relative; isolation: isolate; text-align: center; }
.dg-error::before { content: ""; position: absolute; z-index: -1; top: clamp(60px, 11vw, 150px); left: 50%; width: clamp(280px, 40vw, 520px); aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, .07); border-radius: 50%; transform: translate(-50%, -50%); }
.dg-error::after { content: ""; position: absolute; z-index: -1; top: clamp(60px, 11vw, 150px); left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, .07); }
.dg-error-code { font-size: clamp(120px, 22vw, 300px); line-height: .8; letter-spacing: -.07em; font-weight: 900; }
.dg-error h1 { margin-top: 40px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; }
.dg-error .dg-lead { margin: 20px auto 0; max-width: 52ch; }
.dg-error-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; }
.dg-error-back { color: var(--dg-soft); font-size: 17px; font-weight: 700; text-decoration: none; }
.dg-error-back:hover { color: var(--dg-accent); }
.dg-error-debug { margin: 56px auto 0; max-width: 960px; text-align: left; font-size: 14px; color: var(--dg-soft); border: 1px solid var(--dg-line); border-radius: 14px; padding: 14px 18px; background: rgba(255, 255, 255, .03); }
.dg-error-debug summary { cursor: pointer; font-weight: 700; color: var(--dg-chalk); }
.dg-error-debug p { margin-top: 10px; overflow-wrap: anywhere; }
.dg-error-debug pre { margin: 12px 0 0; max-height: 320px; overflow: auto; font-size: 12px; color: var(--dg-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.dg-error-foot { position: relative; width: 100%; padding-top: 22px; padding-bottom: 28px; font-size: 13px; color: #6B716D; }

/* Volver arriba: un balón que cae al aparecer, se toca con el ratón y sale de una patada. */
.dg-to-top { position: fixed; z-index: 1040; right: 24px; bottom: 24px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #FFFFFF; color: #0B0D0C; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s, transform .25s; }
.dg-to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dg-to-top i { display: block; width: 54px; height: 54px; font-size: 54px; line-height: 54px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
    .dg-to-top:hover i { animation: dg-ball-juggle .6s ease-in-out infinite alternate; }
    .dg-to-top.is-kick i { animation: dg-ball-kick .95s cubic-bezier(.2, .7, .3, 1) forwards; }
    .dg-to-top.is-on.is-appear i { animation: dg-ball-drop .7s cubic-bezier(.3, 1.6, .5, 1); }
}
@keyframes dg-ball-juggle { from { transform: translateY(0) rotate(0); } to { transform: translateY(-8px) rotate(25deg); } }
@keyframes dg-ball-drop { 0% { transform: translateY(-60px) rotate(-120deg); } 100% { transform: none; } }
@keyframes dg-ball-kick { 0% { transform: translateY(0) scale(1); } 15% { transform: translateY(6px) scale(.9, 1.08); } 100% { transform: translate(-40px, -110vh) rotate(-900deg) scale(.6); } }

/* Entradas al aparecer. */
@media (prefers-reduced-motion: no-preference) {
    .dg-js [data-dg-in] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--dg-delay, 0s); }
    .dg-js [data-dg-in].is-in { opacity: 1; transform: none; }
}

/* Móvil y tableta. */
@media (max-width: 980px) {
    .dg-site-nav-menu { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--dg-gut) 20px; background: rgba(12, 42, 27, .97); box-shadow: 0 1px 0 var(--dg-line); }
    .dg-site-nav-menu.is-open { display: flex; }
    .dg-site-nav-menu a { display: block; padding: 12px 0; }
    .dg-site-nav .dg-wrap { gap: 16px; }
    .dg-site-nav-actions { margin-left: auto !important; gap: 14px; }
    .dg-site-nav-toggle { display: grid; place-items: center; }
    .dg-stage .dg-window { width: 100%; }
    .dg-stage .dg-hero-phone { position: relative; right: auto; bottom: auto; width: 88%; margin: -60px 0 0 auto; }
    .dg-facts .dg-wrap { grid-template-columns: 1fr 1fr; }
    .dg-facts .dg-wrap > div { padding: 28px 10px; }
    .dg-facts .dg-wrap > div:nth-child(3) { border-left: 0; }
    .dg-facts .dg-wrap > div:nth-child(n+3) { border-top: 1px solid var(--dg-line); }
    .dg-heading.is-split { flex-direction: column; align-items: start; }
    .dg-heading.is-split .dg-lead { margin-top: 20px; }
    .dg-tabs { grid-template-columns: 1fr; gap: 20px; }
    .dg-tab-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; }
    .dg-tab-text { display: none; }
    .dg-tab-list button { padding: 12px 16px 14px; }
    .dg-tab-stage { min-height: 440px; }
    .dg-tab-pane { padding: 22px; }
    .dg-comp-slot.is-tall > img, .dg-comp-slot.is-tall > video { height: 240px !important; }
    .dg-comp-slot.is-shot, .dg-comp-slot.is-board { border-radius: 8px; }
    .dg-band { padding: 96px 0; }
    .dg-tool .dg-wrap, .dg-tool.is-flip .dg-wrap { grid-template-columns: 1fr; gap: 48px; }
    .dg-tool.is-flip .dg-tool-copy { order: 0; }
    .dg-week ol { grid-template-columns: 1fr 1fr; }
    .dg-faq .dg-wrap, .dg-close-panel { grid-template-columns: 1fr; }
    .dg-faq .dg-wrap { gap: 32px; }
    .dg-plans { grid-template-columns: 1fr; }
    .dg-included .dg-ticks { grid-template-columns: 1fr 1fr; }
    .dg-close-panel { padding: 48px 28px; }
    .dg-plan, .dg-included { padding: 30px 24px; }
    .dg-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .dg-site { --bs-body-font-size: 1.0625rem; }
    .dg-site-nav .btn { display: none; }
    .dg-hero { padding-top: 120px; }
    .dg-week ol, .dg-included .dg-ticks { grid-template-columns: 1fr; }
    .dg-facts .dg-wrap > div > b { font-size: 22px; }
    .dg-shot.is-side { display: none; }
    .dg-footer-cols { grid-template-columns: 1fr; }
}

/* 7. Pizarra táctica ---------------------------------------------------------
   Césped oscuro con líneas claras, como el campo ilustrado de la web. Equipo
   A en naranja, equipo B en blanco; conos amarillos. Los tamaños de las
   piezas van en las unidades del campo (los pone quien pinta el SVG).
   -------------------------------------------------------------------------- */

.dg-board {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    border-radius: var(--bs-border-radius-lg);
    /* El césped del directo (30/10, Juan: todos los campos de la app, como el del directo): la franja oscura de fondo y las claras, `.dg-pitch-stripe`. */
    background-color: #2A8044;
    color: #FFFFFF;
}
.dg-board .text-body-secondary { color: currentColor !important; }
.dg-pitch-stripe { fill: #2E8B4A; }
/* El primer círculo es el jugador; el editor añade detrás la zona de agarre. */
.dg-board-player > circle:first-child { stroke: rgba(9, 9, 11, .45); }
.dg-board-player.is-a > circle:first-child { fill: var(--dg-orange); }
.dg-board-player.is-b > circle:first-child { fill: #F4F4F5; }
.dg-board-player text {
    fill: #FFFFFF;
    font-family: var(--bs-font-monospace);
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
.dg-board-player.is-b text { fill: var(--dg-zinc-900); }
/* El nombre debajo de la pieza (pizarras del partido), con el halo del césped. */
.dg-board-player text.dg-board-name, .dg-board-player.is-b text.dg-board-name { fill: #FFFFFF; stroke: #14231B; stroke-linejoin: round; paint-order: stroke; font-family: var(--bs-body-font-family); font-weight: 700; }
.dg-board-ball { fill: #FFFFFF; stroke: var(--dg-zinc-900); }
.dg-board-cone { fill: #FACC15; }
.dg-board-goal { fill: none; stroke: #F4F4F5; }
.dg-board-line { fill: none; stroke: #F4F4F5; stroke-linecap: round; stroke-linejoin: round; }
/* Zona sombreada y texto: el texto lleva un halo del color del césped para leerse encima de todo. */
.dg-board-zone { fill: #FACC15; fill-opacity: .16; stroke: #FACC15; stroke-opacity: .8; }
.dg-board-label {
    font-family: var(--bs-body-font-family);
    fill: #FFFFFF;
    stroke: #14231B;
    stroke-linejoin: round;
    paint-order: stroke;
    font-weight: 600;
    user-select: none;
}

/* Editor: el lienzo recibe el dedo o el ratón; las piezas se agarran. */
[data-board-svg] { touch-action: none; cursor: crosshair; user-select: none; }
[data-board-tool="move"] [data-board-svg] { cursor: default; }
[data-board-tool="move"] [data-board-svg] [data-index] { cursor: grab; }
[data-board-tool="erase"] [data-board-svg] [data-index] { cursor: pointer; }
[data-board-tool="text"] [data-board-svg] { cursor: text; }
.dg-board-hit { fill: none; stroke: transparent; pointer-events: stroke; }
.dg-board-grab { fill: transparent; stroke: none; }
.dg-board-ring { fill: none; stroke: #FACC15; pointer-events: none; }

/* En las tarjetas de la biblioteca, todos del mismo alto (el dibujo se centra). */
.dg-board-card { aspect-ratio: 16 / 10; }

/* Miniatura en la lista de tareas del entrenamiento: a todo el ancho en el
   móvil; sin pizarra, un hueco discontinuo para dibujarla. */
.dg-board-thumb { width: 100%; flex-shrink: 0; }
@media (min-width: 576px) { .dg-board-thumb { width: 12rem; } }
.dg-board-empty { aspect-ratio: 16 / 10; border-style: dashed !important; }
.dg-board-empty:hover { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }

/* Fase 4 (19/10): metros, medidas, varias elegidas, fotogramas y pantalla completa. */
.dg-board-measure rect { fill: rgba(9, 9, 11, .62); }
.dg-board-measure text { fill: #FFFFFF; font-family: var(--bs-body-font-family); font-weight: 700; pointer-events: none; user-select: none; }
.dg-board-measure { pointer-events: none; }
.dg-board-ruler line { stroke: currentColor; stroke-opacity: .55; stroke-width: .2; }
.dg-board-ruler text { fill: currentColor; fill-opacity: .6; font-family: var(--bs-body-font-family); user-select: none; }
.dg-board-marquee { fill: #FDE047; fill-opacity: .08; stroke: #FDE047; stroke-dasharray: .8 .6; pointer-events: none; }
.dg-board-measure-line { stroke: #FDE047; pointer-events: none; }
[data-board-tool="measure"] [data-board-svg] { cursor: crosshair; }

/* El editor (29/10, Juan, tras la maqueta). Cerrado, es la tarjeta protagonista de la ficha: el
   dibujo a la izquierda (arriba en el móvil) y «Así se monta» al lado. Abierto, a pantalla completa
   y en claro, como el back-office: arriba la barra, a la izquierda las herramientas y su cajón, en
   medio el campo (con el zoom, se desliza) y abajo los fotogramas. */
.dg-board-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; }
.dg-board-editor > .dg-board-top, .dg-board-editor > .dg-board-tools, .dg-board-editor > .dg-board-drawers, .dg-board-editor > .dg-board-frames { display: none; }
.dg-board-editor:not(.is-open) .dg-board-ruler, .dg-board-editor:not(.is-open) .dg-board-text, .dg-board-editor:not(.is-open) .dg-board-ctx { display: none; }
.dg-board-editor:not(.is-open) .dg-board-field, .dg-board-editor:not(.is-open) [data-board-svg] { cursor: pointer; }
.dg-board-stage { position: relative; min-width: 0; }
.dg-board-field { position: relative; }
.dg-board-field .dg-board { max-height: none; }
.dg-board-summary { position: relative; z-index: 1; align-self: center; }
@media (min-width: 992px) { .dg-board-editor:not(.is-open) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; } }
/* La ficha, más reducida (29/10, Juan): cerrada, la pizarra más baja (`is-compact`), con «Así se monta» al lado. */
.dg-board-editor.is-compact:not(.is-open) { padding: 1rem 1.25rem; gap: 1rem; }
/* Sin nada dibujado (`is-empty`, 29/10, Juan eligió esta entre tres): cerrada, el campo vacío y apagado de fondo y, encima, la invitación a
   dibujarla y «Crear pizarra» (que no se tome por un título y se pase por alto). */
.dg-board-cta { display: none; }
.dg-board-editor.is-empty:not(.is-open) { display: block; position: relative; }
.dg-board-editor.is-empty:not(.is-open) > .dg-board-stage { opacity: .35; }
.dg-board-editor.is-empty:not(.is-open) .dg-board-summary { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center; }
.dg-board-editor.is-empty:not(.is-open) .dg-board-cta { display: flex; flex-direction: column; align-items: center; gap: .875rem; max-width: 26rem; margin-bottom: 1rem; text-align: center; }
.dg-board-cta-icon { display: grid; flex-shrink: 0; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: rgba(29, 185, 84, .18); color: #1DB954; font-size: 1.15rem; }
.dg-board-cta-text { opacity: .75; }
.dg-board-editor.is-empty:not(.is-open) .dg-board-summary > .h6, .dg-board-editor.is-empty:not(.is-open) .dg-board-summary > ul, .dg-board-editor.is-empty:not(.is-open) .dg-board-download { display: none !important; }
.dg-board-editor.is-empty:not(.is-open) [data-board-open] { width: auto !important; padding-inline: 1.75rem; }
.dg-board-editor.is-empty .dg-board-open-edit, .dg-board-editor:not(.is-empty) .dg-board-open-new { display: none; }
.dg-board-editor.is-compact:not(.is-open) .dg-board-field .dg-board { max-height: 15rem; width: auto; max-width: 100%; margin-inline: auto; }
@media (min-width: 992px) { .dg-board-editor.is-compact:not(.is-open) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

.dg-board-editor.is-open { position: fixed; inset: 0; z-index: 1070; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: auto auto minmax(0, 1fr); gap: 0; padding: 0; border: 0; border-radius: 0; background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: none; }
.dg-board-editor.is-open::after, .dg-board-editor.is-open > .dg-board-summary { display: none; }
/* Abierta, sin los colores de la tarjeta protagonista: los del back-office. */
.dg-backoffice .dg-board-editor.is-open { --bs-card-bg: inherit; --bs-card-border-color: inherit; --bs-card-color: inherit; --bs-body-color: inherit; --bs-secondary-color: inherit; --bs-heading-color: inherit; --bs-link-color: inherit; --bs-link-hover-color: inherit; color: var(--bs-body-color); }
.dg-board-editor.is-open .text-body-secondary { color: var(--bs-secondary-color) !important; }
.dg-board-editor.is-open > .dg-board-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .625rem 1rem; border-bottom: 1px solid var(--dg-zinc-200); background: #FFFFFF; }
.dg-board-title { min-width: 0; flex: 1; margin-left: .25rem; line-height: 1.2; }
.dg-board-top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.dg-board-size { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; font-weight: 600; color: var(--dg-zinc-600); }
.dg-board-size[hidden] { display: none; }
.dg-board-size .form-control { width: 4.5rem; }
.dg-board-editor.is-open > .dg-board-tools { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: .25rem; padding: .5rem; overflow-y: auto; border-right: 1px solid var(--dg-zinc-200); background: #FFFFFF; }
.dg-board-editor.is-open > .dg-board-tools .dg-board-tool { min-width: 4.25rem; }
.dg-board-tool-piece { width: 1.1rem; height: 1.1rem; }
.dg-board-editor.is-open.has-drawer > .dg-board-drawers { grid-column: 2; grid-row: 2; display: block; width: 18rem; padding: 1rem 0 1rem 1rem; overflow-y: auto; }
.dg-board-drawers .card[hidden] { display: none; }
.dg-board-editor.is-open > .dg-board-stage { grid-column: 3; grid-row: 2; display: grid; place-items: center; min-height: 0; padding: 1.25rem 1.5rem 2rem 2.5rem; overflow: auto; }
.dg-board-editor.is-open .dg-board-field { width: min(100%, calc((100vh - 13rem) * var(--dg-board-ratio, 1.49))); }
.dg-board-editor.is-open.is-zoomed > .dg-board-stage { place-items: start; }
.dg-board-editor.is-open.is-zoomed .dg-board-field { width: calc(min(100%, (100vh - 13rem) * var(--dg-board-ratio, 1.49)) * var(--dg-board-zoom, 1)); max-width: none; }
.dg-board-editor.is-open .dg-board-text { position: absolute; top: .5rem; left: 50%; z-index: 3; width: min(22rem, 80%); transform: translateX(-50%); }
.dg-board-editor.is-open > .dg-board-frames { grid-column: 1 / -1; display: flex; margin: 0; border-radius: 0; background: #FFFFFF; box-shadow: inset 0 1px 0 var(--dg-zinc-200); }
.dg-board-preview-play { left: .75rem; bottom: .75rem; z-index: 2; }
.dg-board-preview-play + .dg-board-frame-count { left: 3.5rem; bottom: 1.2rem; }
/* Cada herramienta y cada pieza del cajón: su dibujo y su nombre. */
.dg-board-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; flex-shrink: 0; min-width: 4rem; padding: .45rem .3rem; border-radius: .75rem; color: var(--dg-zinc-600); font-size: .6875rem; font-weight: 600; line-height: 1.1; text-align: center; cursor: pointer; }
.dg-board-tool i { font-size: 1rem; }
.dg-board-tool:hover { background: var(--dg-zinc-100); }
.btn-check:checked + .dg-board-tool { background: var(--dg-green-50); color: var(--bs-primary); box-shadow: inset 0 0 0 1.5px var(--bs-primary); }
.btn-check:focus-visible + .dg-board-tool { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.dg-board-tool-a { color: var(--dg-orange); }
.dg-board-tool-b { color: var(--dg-zinc-400); }
/* Las piezas del cajón (material y estilos de zona), en tres columnas (dos, los estilos). */
.dg-board-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.dg-board-pieces.is-2 { grid-template-columns: repeat(2, 1fr); }
.dg-board-pieces.is-4 { grid-template-columns: repeat(4, 1fr); }
.dg-board-pieces.is-4 .dg-board-tool { padding-inline: .1rem; font-size: .625rem; }
/* Chapa, camiseta y punto, dentro de su sitio (Juan, 30/10). */
.dg-board-looks > .btn { flex: 1 1 0; min-width: 0; padding-inline: .25rem; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
/* El texto se escribe donde se toca (30/10): el cuadro va encima del campo, en el punto, con la letra y el color del texto. */
/* La confirmación («Borrar todo», «Terminar sin pizarra»…), encima de la pizarra abierta (Juan, 30/10: se quedaba debajo). */
#dg-confirm { z-index: 1085; }
body:has(.dg-board-editor.is-open) .modal-backdrop { z-index: 1080; }
.dg-board-inline-text { position: absolute; z-index: 4; min-width: 3ch; padding: 0 .3em; overflow: hidden; resize: none; white-space: pre; transform-origin: center; border: 1px dashed rgba(255, 255, 255, .85); border-radius: .3em; outline: 0; background: rgba(20, 35, 27, .35); color: #FFFFFF; font-family: var(--bs-body-font-family); font-weight: 700; line-height: 1.4; text-align: center; text-shadow: 0 0 .25em #14231B; caret-color: #FFFFFF; transform: translate(-50%, -50%) rotate(var(--dg-text-rot, 0deg)); }
.dg-board-inline-text[hidden] { display: none; }
.dg-board-pieces .dg-board-tool { min-width: 0; color: var(--dg-zinc-800); }
.dg-board-pieces svg { width: 1.75rem; height: 1.75rem; }
.dg-board-lines .btn { display: flex; align-items: center; gap: .75rem; text-align: left; }
.dg-board-lines svg { flex-shrink: 0; width: 3.25rem; height: 1rem; }
.dg-board-swatches { grid-template-columns: repeat(5, 1fr); }
.dg-board-swatch-team { background: conic-gradient(var(--dg-orange) 0 50%, #F4F4F5 0 100%); }
.dg-board-team-dot { display: inline-block; width: .875rem; height: .875rem; margin-right: .5rem; border-radius: 50%; vertical-align: -.1em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.dg-board-team-dot.is-a { background: var(--dg-orange); }
.dg-board-team-dot.is-b { background: #F4F4F5; }
.dg-board-team-dot.is-c { background: #FACC15; }
.dg-board-team-dot.is-k { background: #18181B; box-shadow: inset 0 0 0 2px #FACC15; }
/* Lo elegido: su barra encima y sus asas (las puntas, la curva y la esquina de la zona). */
.dg-board-ctx { position: absolute; z-index: 4; display: flex; flex-direction: row; align-items: center; gap: .125rem; padding: .25rem; border-radius: 50rem; white-space: nowrap; }
.dg-board-ctx[hidden] { display: none; }
.dg-board-ctx [hidden] { display: none !important; }
.dg-board-ctx-size { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .375rem 0 .25rem; font-size: .8125rem; font-weight: 600; }
.dg-board-ctx-size .form-control { width: 3.75rem; }
.dg-board-ctx .dg-kit-swatch { width: 1.25rem; }
.dg-board-ctx-colors .dg-board-swatches { width: 12rem; }
/* Una zona solo con su contorno también se agarra por dentro. */
.dg-board-editor [data-index] > .dg-board-zone { pointer-events: all; }
.dg-board-handle { fill: #FFFFFF; stroke: var(--bs-primary); cursor: grab; }
.dg-board-handle.is-curve { fill: #FACC15; }
.dg-board-frame-dot.is-piece { fill: #A1A1AA; }
.dg-board-frame-dot.is-c { fill: #FACC15; }
.dg-board-frame-dot.is-k { fill: #18181B; stroke: #FACC15; }
/* En pantallas bajas (el móvil en horizontal) o estrechas: todo más justo, el cajón encima del campo. */
@media (max-height: 560px), (max-width: 767.98px) {
    .dg-board-editor.is-open > .dg-board-top { padding: .375rem .5rem; }
    .dg-board-editor.is-open .dg-board-title, .dg-board-editor.is-open .dg-board-zoom { display: none; }
    .dg-board-editor.is-open > .dg-board-tools { padding: .25rem; }
    .dg-board-editor.is-open > .dg-board-tools .dg-board-tool { min-width: 3.25rem; padding: .35rem .2rem; font-size: 0; }
    .dg-board-editor.is-open.has-drawer > .dg-board-drawers { position: absolute; top: 3.25rem; bottom: 3.5rem; left: 3.9rem; z-index: 5; grid-area: auto; padding: .5rem 0; }
    .dg-board-editor.is-open > .dg-board-stage { grid-column: 2 / -1; padding: .5rem 1rem 1.5rem 2rem; }
    .dg-board-editor.is-open .dg-board-field { width: min(100%, calc((100vh - 9.5rem) * var(--dg-board-ratio, 1.49))); }
    .dg-board-editor.is-open > .dg-board-frames { padding: .25rem .5rem; }
    .dg-board-editor.is-open .dg-board-frame { width: 3.75rem; }
    .dg-board-editor.is-open .dg-board-speed-label, .dg-board-editor.is-open .dg-board-speed-text { display: none; }
}

/* Los fotogramas: ▶, una miniatura por fotograma y añadir. */
.dg-board-frames { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; padding: .5rem; border-radius: .875rem; background: var(--dg-zinc-50, #FAFAFA); box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-board-frames-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.dg-board-frames-play { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--bs-primary); color: #FFFFFF; }
.dg-board-frames-play:disabled { background: var(--dg-zinc-200); color: var(--dg-zinc-400); }
.dg-board-frame { position: relative; flex-shrink: 0; width: 5.5rem; padding: 0; border: 0; border-radius: .5rem; overflow: hidden; background: #2A8044; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); opacity: .7; }
.dg-board-frame.is-active { opacity: 1; box-shadow: 0 0 0 2.5px var(--bs-primary); }
/* Reordenar arrastrando (30/10): la que se mueve, apagada y con su borde; mientras, sin seleccionar nada. */
.dg-board-frames-list .dg-board-frame { cursor: grab; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.dg-board-frames-list.is-sorting, .dg-board-frames-list.is-sorting .dg-board-frame { cursor: grabbing; }
.dg-board-frame.is-dragging { opacity: .45; box-shadow: 0 0 0 2px var(--bs-primary); outline: 2px dashed var(--bs-primary); outline-offset: 2px; }
.dg-board-frame > span { position: absolute; left: .25rem; top: .2rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 50rem; background: rgba(9, 9, 11, .7); color: #FFFFFF; font-size: .625rem; font-weight: 800; line-height: 1.1rem; text-align: center; }
.dg-board-frame-svg { display: block; width: 100%; height: auto; }
.dg-board-frame-field { fill: #2A8044; stroke: rgba(255, 255, 255, .4); stroke-width: .4; }
.dg-board-frame-line { stroke: rgba(255, 255, 255, .55); }
.dg-board-frame-dot { stroke: rgba(9, 9, 11, .4); stroke-width: .3; }
.dg-board-frame-dot.is-a { fill: var(--dg-orange); }
.dg-board-frame-dot.is-b { fill: #F4F4F5; }
.dg-board-frame-dot.is-ball { fill: #FFFFFF; }
.dg-board-frame-dot.is-cone { fill: #FACC15; }
.dg-board-frame-dot.is-goal { fill: none; stroke: #F4F4F5; }
.dg-board-frames-add { flex-shrink: 0; height: 2.5rem; padding: 0 .75rem; border: 1.5px dashed var(--dg-zinc-300); border-radius: .75rem; background: #FFFFFF; color: var(--dg-zinc-600); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.dg-board-frames-add:disabled { opacity: .5; }
/* La velocidad del fotograma (30/10): tres botones en píldora con su medidor; el elegido, en verde lleno. */
.dg-board-speed { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.dg-board-speed[hidden] { display: none; }
.dg-board-speed-label { color: var(--dg-zinc-500); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.dg-board-speed-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 50rem; background: var(--dg-zinc-100, #F4F4F5); box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-board-speed-btn { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .7rem; border-radius: 50rem; color: var(--dg-zinc-600); font-size: .8125rem; font-weight: 600; line-height: 1.2; cursor: pointer; user-select: none; }
.dg-board-speed-btn .dg-own-icon svg { width: 1.1rem; height: 1.1rem; display: block; }
.dg-board-speed-btn:hover { color: var(--bs-primary); }
.btn-check:checked + .dg-board-speed-btn { background: var(--bs-primary); color: #FFFFFF; box-shadow: 0 1px 2px rgba(9, 9, 11, .15); }
.btn-check:focus-visible + .dg-board-speed-btn { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.btn-check:disabled + .dg-board-speed-btn { opacity: .45; cursor: default; }
.dg-board-speed.is-first .dg-board-speed-btn:hover { color: var(--dg-zinc-600); }
.dg-board-frame > .dg-board-frame-speed { position: absolute; top: auto; left: auto; right: .2rem; bottom: .2rem; display: flex; align-items: center; justify-content: center; width: 1.15rem; min-width: 0; height: 1.15rem; padding: 0; border-radius: 50%; background: rgba(9, 9, 11, .72); color: #FFFFFF; }
/* Sin sitio para el rótulo, lo dice al pasar por encima. */
@media (max-width: 1399.98px) { .dg-board-editor.is-open .dg-board-speed-label { display: none; } }
.dg-board-frame-speed svg { width: .8rem; height: .8rem; }
/* Abierta, la tira en una sola fila que se desliza (30/10: con muchos fotogramas bajaba de línea y cortaba el campo). */
.dg-board-editor.is-open > .dg-board-frames { flex-wrap: nowrap; }
.dg-board-editor.is-open .dg-board-frames-list { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; padding: 3px; overflow-x: auto; scrollbar-width: thin; }

/* Reproducir en la pizarra de solo lectura. */
.dg-board-play { position: absolute; left: .5rem; bottom: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--bs-primary); color: #FFFFFF; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.dg-board-frame-count { position: absolute; left: 3.1rem; bottom: .95rem; padding: .1rem .5rem; border-radius: 50rem; background: rgba(9, 9, 11, .55); color: #FFFFFF; font-size: .6875rem; font-weight: 700; }

/* Ejercicios (fase 5, 20/10): pestañas en píldora, filtros y tarjetas de tarea. */
.dg-tabs-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.dg-tab-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 50rem; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); color: var(--dg-zinc-700); font-size: .875rem; font-weight: 600; text-decoration: none; }
.dg-tab-pill:hover { color: var(--bs-primary); }
.dg-tab-pill b { padding: .05rem .45rem; border-radius: 50rem; background: var(--dg-zinc-100); font-size: .6875rem; }
.dg-tab-pill.is-active { background: var(--bs-primary); color: #FFFFFF; box-shadow: none; }
.dg-tab-pill.is-active b { background: rgba(255, 255, 255, .25); }
/* Tareas (30/10, Juan eligió la maqueta A): las pestañas y los filtros en una franja; las tarjetas, tantas por fila como quepan. */
.dg-task-bar { display: flex; flex-direction: column; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--dg-zinc-200); border-radius: 1rem; background-color: #FFFFFF; }
.dg-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; }
.dg-task-grid .btn { white-space: nowrap; }
@media (max-width: 767.98px) {
    /* En el móvil, las pestañas en una línea que se desliza. */
    .dg-task-bar .dg-tabs-pills { flex-wrap: nowrap; margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; scrollbar-width: none; }
    .dg-task-bar .dg-tabs-pills::-webkit-scrollbar { display: none; }
    .dg-task-bar .dg-tab-pill { flex-shrink: 0; }
}
/* Qué es la pestaña que se ve (Juan, 30/10). */
.dg-task-tab-text { display: flex; align-items: baseline; font-size: .875rem; color: var(--dg-zinc-600); }
.dg-task-tab-text > i { color: var(--bs-primary); }
.dg-task-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dg-task-search { width: 100%; }
@media (min-width: 768px) { .dg-task-search { width: 16rem; } }
.dg-task-filter { width: auto; max-width: 12rem; border-radius: .75rem; font-weight: 600; }
/* Multiselección (30/10, Juan): el filtro es un botón con el aspecto del desplegable, cuántas van elegidas y la lista de casillas. */
button.dg-task-filter { display: inline-flex; align-items: center; gap: .45rem; text-align: left; white-space: nowrap; }
button.dg-task-filter > span { overflow: hidden; text-overflow: ellipsis; }
button.dg-task-filter > b { padding: .05rem .45rem; border-radius: 50rem; background: var(--bs-primary); color: #FFFFFF; font-size: .6875rem; line-height: 1.4; }
.dg-task-filter-menu { min-width: 14rem; max-height: 20rem; overflow-y: auto; padding: .35rem; }
.dg-task-filter-menu .dropdown-item.form-check { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .65rem; border-radius: .5rem; white-space: normal; cursor: pointer; }
.dg-task-filter-menu .form-check-input { float: none; flex-shrink: 0; margin: 0; }
.dg-task-filter-menu .dropdown-item.form-check:active { background-color: var(--dg-green-50); color: inherit; }
@media (max-width: 767.98px) { .dg-task-filter-wrap { flex: 1 1 calc(50% - .25rem); min-width: 0; } .dg-task-filter-wrap .dg-task-filter { width: 100%; max-width: none; } }
.dg-task-filter.is-on { border-color: var(--bs-primary); background-color: var(--dg-green-50); color: var(--dg-green-800, #166534); }
.dg-task-card { overflow: hidden; container-type: inline-size; }
.dg-adapt-short { display: none; }
/* Las tuyas, con «Añadir a una sesión»: «Editar» y «Borrar» si caben; si no, «⋯» (Juan, 30/10). */
.dg-own-more { display: none; }
.dg-own-more .dropdown-item { font-size: .875rem; font-weight: 600; }
.dg-task-actions .dg-own-more, .dg-task-actions .dg-own-wide > * { flex: 0 0 auto; }
@container (max-width: 23.5rem) { .dg-task-actions.is-own .dg-own-wide { display: none !important; } .dg-task-actions.is-own .dg-own-more { display: block; } .dg-task-actions.is-own { flex-wrap: nowrap; } .dg-task-actions.is-own > .btn { min-width: 0; } }
@container (max-width: 15.5rem) { .dg-adapt-long { display: none; } .dg-adapt-short { display: inline; } }
/* Los botones de la tarjeta: si no caben en una línea, cada uno en la suya, a todo el ancho (Juan, 30/10: «Copiar y adaptar» se cortaba). */
.dg-task-actions > * { flex: 1 1 auto; white-space: nowrap; }
.dg-session-slot[data-dg-task-open] { cursor: pointer; transition: box-shadow .15s ease; }
.dg-session-slot[data-dg-task-open]:hover { box-shadow: 0 .5rem 1.25rem rgba(12, 42, 27, .1); }
.dg-task-card[data-dg-task-open] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.dg-task-card[data-dg-task-open]:hover { border-color: var(--dg-zinc-300); box-shadow: 0 .5rem 1.25rem rgba(12, 42, 27, .08); }
#task-results[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
.dg-task-board { position: relative; padding: .5rem .5rem 0; }
.dg-task-noboard { display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: rgba(255, 255, 255, .25); }
.dg-task-badge { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 50rem; background: rgba(255, 255, 255, .94); color: var(--dg-green-800, #166534); font-size: .6875rem; font-weight: 800; }
.dg-task-badge.is-adapted { color: #9A3412; }
.dg-task-star-form { position: absolute; right: 1rem; top: 1rem; margin: 0; }
.dg-task-star { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: rgba(9, 9, 11, .45); color: #FFFFFF; }
.dg-task-star.is-on,
.dg-task-star-btn.is-on i { color: #FACC15; }
.dg-task-chip { padding: .15rem .55rem; border-radius: 50rem; background: var(--dg-green-50); color: var(--dg-green-800, #166534); font-size: .6875rem; font-weight: 700; }
.dg-task-chip.is-soft { background: var(--dg-zinc-100); color: var(--dg-zinc-700); }
.dg-task-level { display: inline-flex; gap: .2rem; }
.dg-task-level span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--dg-zinc-200); }
.dg-task-level span.is-on { background: var(--bs-primary); }
/* La ventana de una tarea (`#task-detail`, 30/10, Juan: todo a la vista, sin scroll): en el PC, la pizarra a la izquierda
   con el volumen en cifras debajo y los textos a la derecha; el alto, el de la pantalla (si un texto fuese muy largo, solo
   esa columna se desliza). En el móvil, a pantalla completa y una cosa debajo de otra. */
.dg-tm-dialog { --bs-modal-width: min(1200px, calc(100vw - 3rem)); }
/* Sin scroll en la página al abrirla (Juan, 30/10): la ventana mide como mucho el alto de la pantalla y lo de dentro se ajusta. */
@media (min-width: 992px) {
    .dg-tm-dialog { --bs-modal-margin: 1.25rem; }
    .dg-tm-dialog .modal-content { max-height: calc(100vh - 2.5rem); }
}
.dg-tm-head { align-items: flex-start; gap: .75rem; padding: 1rem 2.25rem 1rem 1.5rem; }
/* La X, saliendo por la esquina de la ventana (Juan, 30/10). */
.dg-tm-dialog .modal-content { position: relative; }
.dg-tm-close { position: absolute; top: -.85rem; right: -.85rem; z-index: 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: #1DB954; color: #FFFFFF; font-size: 1rem; box-shadow: 0 .35rem 1rem rgba(29, 185, 84, .35); }
.dg-tm-close:hover, .dg-tm-close:focus-visible { background: #169C46; }
@media (max-width: 991.98px) { .dg-tm-close { top: .6rem; right: .6rem; } }
.dg-tm-body { display: grid; gap: 1.25rem 1.75rem; padding: 1.25rem 1.5rem; }
.dg-tm-main { display: flex; flex-direction: column; gap: .875rem; min-width: 0; container-type: inline-size; }
.dg-tm-side { min-width: 0; }
.dg-tm-board { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
/* Lo más grande que cabe: el ancho de la columna o el alto que queda, a la proporción de la pizarra (`--dg-board-ratio`). */
.dg-tm-board .dg-board { width: min(100cqw, calc((100vh - 16.75rem) * var(--dg-board-ratio, 1.49))); max-height: none; }
/* Reproducir, en grande y en medio del campo, en blanco para que no se confunda con el césped (Juan, 30/10: en la esquina se perdía); mientras se reproduce, pequeño en la esquina para pararlo. */
.dg-board-play-label { display: none; }
.dg-tm-board .dg-board-player-wrap:not(.is-playing) .dg-board-play { left: 50%; top: 50%; bottom: auto; width: 4.5rem; height: 4.5rem; font-size: 1.6rem; transform: translate(-50%, -62%); background: #FFFFFF; color: #0C2A1B; box-shadow: 0 0 0 .5rem rgba(255, 255, 255, .3), 0 .75rem 1.75rem rgba(0, 0, 0, .35); transition: transform .15s ease; }
.dg-tm-board .dg-board-player-wrap:not(.is-playing) .dg-board-play:hover { transform: translate(-50%, -62%) scale(1.06); }
.dg-tm-board .dg-board-player-wrap:not(.is-playing) .dg-board-play > i { margin-left: .2rem; }
.dg-tm-board .dg-board-player-wrap:not(.is-playing) .dg-board-frame-count { left: 50%; top: calc(50% + 2.25rem); bottom: auto; transform: translateX(-50%); padding: .3rem .8rem; font-size: .8125rem; white-space: nowrap; }
.dg-tm-board .dg-board-player-wrap:not(.is-playing) .dg-board-play-label { display: inline; }
.dg-tm-board .dg-board-player-wrap.is-playing .dg-board-frame-count { display: none; }
.dg-tm-noboard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; aspect-ratio: 113 / 76; color: rgba(255, 255, 255, .7); font-size: 1.5rem; }
.dg-tm-noboard span { font-size: .875rem; font-weight: 600; }
.dg-tm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.dg-tm-meta li { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--dg-zinc-800); }
.dg-tm-meta li > i { color: var(--bs-primary); }
/* Las etiquetas, en negrita (Juan, 30/10). */
.dg-tm-label { margin: 0 0 .2rem; font-size: .875rem; font-weight: 800; color: var(--dg-zinc-900); }
.dg-tm-text { margin-bottom: .7rem; font-size: .875rem; line-height: 1.4; }
.dg-tm-foot { justify-content: flex-start; gap: .5rem; padding: .75rem 1.5rem; }
.dg-tm-foot > * { margin: 0; }
/* La ficha de la tarea, que se guarda sola (30/10): «Guardando… / Guardado», al lado de «Listo». */
.dg-task-status { font-size: .875rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-task-status.is-error { color: #B91C1C; }
.dg-tm-hint { align-self: center; max-width: 30rem; font-size: .8125rem; line-height: 1.3; text-align: right; color: var(--dg-zinc-600); }
.dg-tm-delete { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; padding-top: .5rem; font-size: .875rem; }
@media (min-width: 992px) {
    .dg-tm-body { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
    .dg-tm-side { min-height: 0; overflow-y: auto; padding-right: .25rem; scrollbar-width: thin; }
}
/* Sesiones de plantilla: la barra de tiempos y las tareas en orden. */
.dg-template-bar { display: flex; gap: 2px; height: .6rem; border-radius: 50rem; overflow: hidden; }
.dg-template-tasks { display: flex; flex-direction: column; gap: .35rem; padding-left: 1.25rem; font-size: .8125rem; }
.dg-template-tasks li { padding-left: .25rem; }
.dg-template-tasks li > * { vertical-align: middle; }
.dg-template-tasks li { display: list-item; }
.dg-template-tasks li .text-body-secondary { float: right; }
.dg-template-rows { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.5rem; margin: 0; }
.dg-template-rows li { padding-left: .25rem; }
.dg-template-minutes { flex-shrink: 0; width: 7.5rem; }
/* La valoración de los jugadores (fase 6). */
.dg-rating-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: .2rem .5rem; border-radius: 50rem; background: var(--dg-zinc-100); color: var(--dg-zinc-700); font-weight: 700; font-size: .8125rem; }
.dg-rating-input { width: 5.5rem; }
.dg-rating-ring { flex-shrink: 0; }
.dg-rating-ring-track { fill: none; stroke: var(--dg-zinc-200); }
.dg-rating-ring-value { fill: none; stroke-linecap: round; }
.dg-rating-ring.is-good .dg-rating-ring-value { stroke: #16A34A; }
.dg-rating-ring.is-fair .dg-rating-ring-value { stroke: #CA8A04; }
.dg-rating-ring.is-low .dg-rating-ring-value { stroke: #DC2626; }
.dg-rating-ring text { fill: var(--dg-zinc-900); font-weight: 800; font-family: var(--bs-body-font-family); }
/* Gráficas partido a partido (fase 6): minutos o goles en barras, la valoración en línea. */
.dg-match-chart { display: block; width: 100%; height: auto; overflow: visible; }
.dg-match-chart-guide { stroke: var(--dg-zinc-200); stroke-dasharray: 3 3; }
.dg-match-chart-guide.is-solid { stroke-dasharray: none; }
.dg-match-chart-axis { fill: var(--dg-zinc-400); font-size: 10px; font-family: var(--bs-body-font-family); }
.dg-match-chart-label { fill: var(--dg-zinc-500); font-size: 10px; font-weight: 600; font-family: var(--bs-body-font-family); }
.dg-match-chart-bar { fill: #BBF7D0; }
.dg-match-chart-line { fill: none; stroke: #15803D; stroke-width: 2.5; stroke-linejoin: round; }
.dg-match-chart-dot { fill: #FFFFFF; stroke: #15803D; stroke-width: 2; }
.dg-results-for { fill: #16A34A; }
.dg-results-against { fill: #FCA5A5; }
.dg-results-dot.is-win { fill: #16A34A; }
.dg-results-dot.is-draw { fill: #A1A1AA; }
.dg-results-dot.is-loss { fill: #DC2626; }
@media (max-width: 575.98px) {
    .dg-match-chart-label, .dg-match-chart-axis { font-size: 18px; }
}
.dg-legend-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; }
.dg-legend-swatch.dg-results-for { background: #16A34A; }
.dg-legend-swatch.dg-results-against { background: #FCA5A5; }
/* Tareas recomendadas en el entrenamiento. */
.dg-recommended { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: .875rem; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-recommended-board { width: 5.5rem; flex-shrink: 0; }

/* 8. Separadores de tarjeta --------------------------------------------------- */

/* Separador entre las dos mitades de una tarjeta: al lado desde xl, encima antes. */
@media (min-width: 1200px) {
    .dg-border-end-xl { border-right: var(--bs-border-width) solid var(--bs-border-color); }
}
@media (max-width: 1199.98px) {
    .dg-border-top-until-xl { border-top: var(--bs-border-width) solid var(--bs-border-color); }
}

/* 9. Tema «Césped» (back-office y acceso) -----------------------------------
   Elegido el 25/09 (propuesta A): claro y deportivo. Menú lateral blanco,
   fondo gris verdoso y tarjetas blancas con esquinas amplias; un verde vivo
   de acento y botones en píldora. Tipografía Plus Jakarta Sans.

   Dentro de `.dg-backoffice` y `.dg-auth` se redefinen las variables de las
   secciones 1 y 2: la escala «zinc» pasa a grises con un punto de verde y el
   acento pasa a verde, así todo lo que ya las usa (menú, foco, insignias,
   gráficas) cambia solo. La web pública no se toca.
   Contrastes sobre blanco: verde de botón #13893F con texto blanco 4,5:1;
   verde de texto #0E7A3B 5,4:1; gris de apoyo #5F6F65 5,4:1. El verde vivo
   #1DB954 solo en rellenos, iconos y trazos, nunca como texto.
   -------------------------------------------------------------------------- */

.dg-backoffice,
.dg-auth {
    --dg-zinc-50: #F6F8F5;
    --dg-zinc-100: #EEF2EE;
    --dg-zinc-200: #E2E8E3;
    --dg-zinc-300: #CBD5CD;
    --dg-zinc-400: #93A198;
    --dg-zinc-500: #5F6F65;
    --dg-zinc-600: #4A5950;
    --dg-zinc-700: #36433B;
    --dg-zinc-800: #243029;
    --dg-zinc-900: #16211B;
    --dg-zinc-950: #0C140F;

    --dg-green: #1DB954;          /* verde vivo: rellenos, iconos, trazos */
    --dg-green-50: #EEFAF2;
    --dg-green-100: #DAF4E3;
    --dg-green-200: #B4E8C6;
    --dg-green-600: #13893F;      /* botón principal (texto blanco) */
    --dg-green-700: #0E7A3B;      /* verde para texto */
    --dg-green-800: #0B5E2E;
    --dg-green-900: #0F3D24;      /* verde bosque: tarjeta protagonista, dorsales */

    --dg-accent: var(--dg-green);
    --dg-accent-50: var(--dg-green-50);
    --dg-accent-100: var(--dg-green-100);
    --dg-accent-200: var(--dg-green-200);
    --dg-accent-600: var(--dg-green-600);
    --dg-accent-700: var(--dg-green-700);
    --dg-accent-800: var(--dg-green-800);

    --dg-shadow-xs: 0 1px 2px rgba(22, 33, 27, .05);
    --dg-shadow-sm: 0 1px 3px rgba(22, 33, 27, .07), 0 1px 2px rgba(22, 33, 27, .04);
    --dg-shadow-lg: 0 18px 44px -14px rgba(15, 61, 36, .22), 0 4px 12px -4px rgba(22, 33, 27, .08);

    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;

    --bs-primary: var(--dg-green-600);
    --bs-primary-rgb: 19, 137, 63;
    --bs-primary-text-emphasis: var(--dg-green-700);
    --bs-primary-bg-subtle: var(--dg-green-50);
    --bs-primary-border-subtle: var(--dg-green-200);
    --bs-link-color: var(--dg-green-700);
    --bs-link-color-rgb: 14, 122, 59;
    --bs-link-hover-color: var(--dg-green-800);
    --bs-link-hover-color-rgb: 11, 94, 46;
    --bs-focus-ring-color: rgba(29, 185, 84, .25);
    --bs-body-color: var(--dg-zinc-900);
    --bs-body-color-rgb: 22, 33, 27;
    --bs-emphasis-color: var(--dg-zinc-950);
    --bs-heading-color: var(--dg-zinc-950);
    --bs-secondary-color: var(--dg-zinc-500);
    --bs-secondary-color-rgb: 95, 111, 101;
    --bs-tertiary-color: var(--dg-zinc-400);
    --bs-tertiary-bg: var(--dg-zinc-50);
    --bs-tertiary-bg-rgb: 246, 248, 245;
    --bs-border-color: var(--dg-zinc-200);
    --bs-border-color-translucent: rgba(22, 33, 27, .1);
    --bs-secondary-text-emphasis: var(--dg-zinc-700);
    --bs-secondary-bg-subtle: var(--dg-zinc-100);
    --bs-secondary-border-subtle: var(--dg-zinc-200);
    --bs-success: #16A34A;
    --bs-success-rgb: 22, 163, 74;
    --bs-success-text-emphasis: #15803D;
    --bs-success-bg-subtle: #EEFAF2;
    --bs-success-border-subtle: #B4E8C6;
    font-family: var(--bs-body-font-family);
    font-feature-settings: normal;
}

/* Titulares más rotundos: la Plus Jakarta Sans pide peso. */
.dg-backoffice h1, .dg-backoffice .h1,
.dg-backoffice h2, .dg-backoffice .h2,
.dg-backoffice h3, .dg-backoffice .h3,
.dg-auth h1, .dg-auth .h4 { font-weight: 700; letter-spacing: -.02em; }
.dg-backoffice h4, .dg-backoffice .h4,
.dg-backoffice h5, .dg-backoffice .h5,
.dg-backoffice h6, .dg-backoffice .h6 { font-weight: 700; letter-spacing: -.01em; }
.dg-backoffice .fw-bold { font-weight: 700 !important; }

/* Botones en píldora, algo más altos y con peso. */
.dg-backoffice .btn,
.dg-auth .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-border-radius: 50rem;
    letter-spacing: 0;
}
.dg-backoffice .btn-sm {
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .3125rem;
    --bs-btn-border-radius: 50rem;
}
.dg-backoffice .btn-lg,
.dg-auth .btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .625rem; --bs-btn-border-radius: 50rem; }
/* El botón principal: verde con texto blanco (Juan, 26/10: tras probar el de la web,
   con texto oscuro, mejor así). El verde es el más vivo con el que el blanco se lee
   bien (4,5:1). */
.dg-backoffice .btn-primary,
.dg-auth .btn-primary {
    --bs-btn-bg: var(--dg-green-600);
    --bs-btn-border-color: var(--dg-green-600);
    --bs-btn-hover-bg: var(--dg-green-700);
    --bs-btn-hover-border-color: var(--dg-green-700);
    --bs-btn-active-bg: var(--dg-green-800);
    --bs-btn-active-border-color: var(--dg-green-800);
    --bs-btn-disabled-bg: var(--dg-green-600);
    --bs-btn-disabled-border-color: var(--dg-green-600);
    box-shadow: 0 1px 2px rgba(15, 61, 36, .18), 0 4px 12px -6px rgba(var(--bs-primary-rgb), .55);
}
/* Grupos de botones: la píldora es el grupo, no cada pieza. */
.dg-backoffice .btn-group { border-radius: 50rem; }
.dg-backoffice .btn-group > .btn { --bs-btn-border-radius: 50rem; }
.dg-backoffice .pagination {
    --bs-pagination-active-bg: var(--dg-green-600);
    --bs-pagination-active-border-color: var(--dg-green-600);
    --bs-pagination-border-radius: .625rem;
}

/* Tarjetas: blancas, esquinas amplias y una sombra mínima teñida. */
.dg-backoffice .card {
    --bs-card-bg: #FFFFFF;
    --bs-card-border-color: var(--dg-zinc-200);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-cap-padding-y: 1rem;
    box-shadow: var(--dg-shadow-xs);
}
.dg-backoffice .card-header { font-weight: 700; }
/* Copiar, archivar y eliminar en Ajustes del equipo: tres botones iguales en una fila (en «Mis equipos», en el menú «⋯», sección 38). */
.dg-team-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.dg-team-actions > .btn { padding-inline: .5rem; font-size: .8125rem; white-space: nowrap; }
@media (max-width: 399.98px) {
    .dg-team-actions > .btn > i { display: none; }
}
/* Modales como las tarjetas: blancos, sin borde y con las esquinas amplias. */
.dg-backoffice .modal {
    --bs-modal-bg: #FFFFFF;
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--bs-border-radius-xl);
    --bs-modal-inner-border-radius: var(--bs-border-radius-xl);
    --bs-modal-box-shadow: 0 24px 48px -16px rgba(15, 61, 36, .35);
}
.dg-backoffice .list-group {
    --bs-list-group-border-radius: var(--bs-border-radius-lg);
    --bs-list-group-action-hover-bg: var(--dg-zinc-50);
}

.dg-backoffice .table > thead th { font-weight: 600; }

/* Campos algo más altos y redondeados; foco verde. */
.dg-backoffice .form-control,
.dg-backoffice .form-select,
.dg-auth .form-control {
    --bs-border-radius: .625rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.dg-backoffice .form-control-sm,
.dg-backoffice .form-select-sm { padding-top: .25rem; padding-bottom: .25rem; }
.dg-backoffice .form-check-input:checked,
.dg-auth .form-check-input:checked { background-color: var(--dg-green-600); border-color: var(--dg-green-600); }
.dg-backoffice .form-label,
.dg-auth .form-label { font-weight: 600; }

.dg-backoffice .badge { --bs-badge-font-weight: 600; }
.dg-backoffice .dropdown-menu {
    --bs-dropdown-border-radius: 1rem;
    --bs-dropdown-item-border-radius: .625rem;
    --bs-dropdown-link-hover-bg: var(--dg-zinc-50);
}
.dg-backoffice .alert { --bs-alert-border-radius: .875rem; }

/* Estructura (29/10, Juan eligió la propuesta B tras la maqueta: el gris «parecía web antigua»): el menú
   lateral en el verde bosque de la web pública, con el logo para fondo oscuro, y el contenido en blanco; las
   tarjetas se separan por su borde. En el móvil, la barra de arriba también en verde: así destaca. */
.dg-backoffice { background-color: #FFFFFF; }
.dg-backoffice .dg-sidebar {
    --bs-offcanvas-width: 16.5rem;
    --bs-offcanvas-bg: #0C2A1B;
    background-color: #0C2A1B !important;
    border-right: 0;
    color: #FFFFFF;
}
.dg-backoffice .dg-sidebar .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.dg-backoffice .dg-sidebar .text-body-secondary { color: rgba(255, 255, 255, .55) !important; }
/* Los desplegables del menú («Crear», la persona) siguen siendo blancos: su gris de siempre. */
.dg-backoffice .dg-sidebar .dropdown-menu .text-body-secondary { color: var(--bs-secondary-color) !important; }
.dg-backoffice .dg-canvas { background-color: #FFFFFF; }
@media (min-width: 992px) {
    .dg-backoffice .dg-sidebar { width: 16rem; }
    .dg-backoffice .dg-canvas {
        margin: 0;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
.dg-backoffice .dg-topbar {
    background-color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: var(--dg-zinc-200) !important;
}
@media (max-width: 991.98px) {
    .dg-backoffice .dg-topbar { background-color: #0C2A1B; border-color: transparent !important; color: #FFFFFF; }
    .dg-backoffice .dg-topbar .text-body-secondary { color: rgba(255, 255, 255, .6) !important; }
    .dg-backoffice .dg-topbar .btn-light,
    .dg-backoffice .dg-topbar .btn-outline-secondary { --bs-btn-color: #FFFFFF; --bs-btn-bg: rgba(255, 255, 255, .1); --bs-btn-border-color: transparent; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: rgba(255, 255, 255, .22); }
    .dg-backoffice .dg-topbar a:not(.dropdown-item),
    .dg-backoffice .dg-topbar [data-bs-toggle="dropdown"] { color: #FFFFFF; }
    .dg-backoffice .dg-topbar .dg-topbar-team:hover { color: #FFFFFF; opacity: .85; }
    /* El escudo sobre el verde, con un aro claro para que no se pierda. */
    .dg-backoffice .dg-topbar .dg-topbar-crest { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
}
/* La fila del logo del menú, igual de alta que la barra de arriba y con su misma
   línea debajo: logo y barra, una sola franja (Juan, 26/10, tras la maqueta). La
   barra, siempre de esa altura (en /admin no lleva escudo). */
.dg-backoffice .dg-topbar > div { min-height: 64px; }
.dg-sidebar-head {
    height: 65px;
    padding: 0 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dg-sidebar .dg-sidebar-head .dg-logo { height: 36px; }

/* El menú, sobre el verde bosque (29/10): el texto y los iconos en blanco (Juan: apagados quedaban feos), la elegida con un velo verde y su icono en el verde vivo. */
.dg-backoffice .dg-nav-heading { color: rgba(255, 255, 255, .6); font-weight: 600; font-size: .75rem; }
.dg-backoffice .dg-nav .nav-link {
    padding: .5625rem .75rem;
    border: 0;
    border-radius: .75rem;
    color: #FFFFFF;
    font-weight: 600;
}
.dg-backoffice .dg-nav .nav-link > .fa-fw { color: #FFFFFF; }
.dg-backoffice .dg-nav .nav-link:hover,
.dg-backoffice .dg-nav .nav-link:focus-visible { background-color: rgba(255, 255, 255, .06); color: #FFFFFF; }
.dg-backoffice .dg-nav .nav-link:hover > .fa-fw { color: #FFFFFF; }
.dg-backoffice .dg-nav .nav-link.active {
    background-color: rgba(29, 185, 84, .16);
    color: #FFFFFF;
    box-shadow: none;
}
.dg-backoffice .dg-nav .nav-link.active > .fa-fw { color: #1DB954; }
/* El pie del menú, en el PC (29/10, Juan: sin barra de arriba): «Ayuda», «Ver la web» y la persona, que abre su menú hacia arriba. */
.dg-sidebar-foot { padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.dg-sidebar-foot-link { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .75rem; border: 0; border-radius: .75rem; background: transparent; color: #FFFFFF; font-weight: 600; font-size: .9375rem; text-align: left; text-decoration: none; }
.dg-sidebar-foot-link:hover, .dg-sidebar-foot-link:focus-visible { background-color: rgba(255, 255, 255, .06); color: #FFFFFF; }
.dg-sidebar-user { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .75rem; border: 0; border-radius: .75rem; background-color: rgba(255, 255, 255, .06); color: #FFFFFF; font-size: .875rem; text-align: left; }
.dg-sidebar-user:hover, .dg-sidebar-user:focus-visible, .dg-sidebar-user[aria-expanded="true"] { background-color: rgba(255, 255, 255, .1); }
.dg-sidebar-user .dg-avatar { flex-shrink: 0; }
.dg-sidebar-user-mail { color: rgba(255, 255, 255, .55); font-size: .75rem; }
.dg-sidebar-foot .dropdown-menu { min-width: 14rem; color: var(--bs-body-color); }

/* Club activo arriba del menú: escudo (o iniciales) y temporada. */
.dg-club-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    position: relative;
    overflow: hidden;
    padding: .625rem .75rem;
    border-radius: 1rem;
    /* En el verde bosque de la web, con el círculo del centro del campo (Juan, 26/10). */
    background-color: var(--dg-green-900);
    color: #FFFFFF;
}
.dg-club-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 80px; height: 80px; border: 1.5px solid rgba(255, 255, 255, .12); border-radius: 50%; pointer-events: none; }
.dg-club-card .text-body-secondary { color: rgba(255, 255, 255, .7) !important; }
.dg-club-card .dg-crest { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
a.dg-club-card:hover { background-color: #134A2C; color: #FFFFFF; }
/* Sobre el menú verde bosque, la tarjeta del equipo se marca con un velo y su borde. */
.dg-backoffice .dg-sidebar .dg-club-card { background-color: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.dg-backoffice .dg-sidebar a.dg-club-card:hover { background-color: rgba(255, 255, 255, .1); }
.dg-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--dg-crest-bg, var(--dg-green-900));
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    object-fit: cover;
}
.dg-crest-lg { width: 4rem; height: 4rem; font-size: 1.125rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
/* El escudo en Ajustes del equipo (19/10), como la foto de «Mi cuenta»: la imagen entera sobre blanco. */
.dg-crest.dg-crest-xl { width: 6.5rem; height: 6.5rem; font-size: 2rem; }
img.dg-crest.dg-crest-xl { padding: .625rem; background: #FFFFFF; object-fit: contain; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }

.dg-backoffice .dg-avatar {
    border-radius: 50%;
    background-color: var(--dg-green-100);
    color: var(--dg-green-800);
    font-weight: 700;
}
/* La foto de perfil en el círculo (`element/account/avatar`), y en grande en «Mi cuenta». */
.dg-avatar-photo { object-fit: cover; padding: 0; }
.dg-avatar.dg-avatar-lg { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
.dg-avatar.dg-avatar-xl { width: 6.5rem; height: 6.5rem; font-size: 2.25rem; }
/* La tarjeta del perfil de «Mi cuenta»: la foto con el botón de la cámara encima, como en las redes. */
.dg-profile-photo { position: relative; flex-shrink: 0; }
.dg-profile-camera {
    position: absolute;
    right: -.125rem;
    bottom: -.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--bs-body-bg), 0 4px 10px -4px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: filter .15s var(--dg-ease-out);
}
.dg-profile-camera:hover { filter: brightness(1.08); }
/* La cámara con su desplegable (`element/photo_picker`, 23/10): el botón va en la esquina de la foto. */
.dg-photo-picker { position: absolute; right: -.125rem; bottom: -.125rem; }
.dg-photo-picker .dg-profile-camera { position: static; }
.dg-photo-picker .dropdown-item { cursor: pointer; }
.dg-profile-photo:has(input:focus-visible) .dg-profile-camera { outline: 2px solid var(--bs-primary); outline-offset: 3px; }

/* Dorsal: placa verde bosque. Fotos e iniciales, redondas. */
.dg-backoffice .dg-shirt { background-color: var(--dg-green-900); border-radius: .5rem; font-weight: 700; }
.dg-backoffice .dg-shirt:empty { background-color: var(--dg-zinc-100); }
.dg-backoffice .dg-photo { border-radius: 50%; background-color: var(--dg-green-50); color: var(--dg-green-700); font-weight: 700; }
.dg-backoffice .dg-photo-lg { border-radius: 1.25rem; }

/* Tarjeta protagonista (el próximo partido, un marcador): verde bosque. */
.dg-backoffice .dg-hero-card {
    --bs-card-bg: var(--dg-green-900);
    --bs-card-border-color: var(--dg-green-900);
    --bs-card-color: #FFFFFF;
    --bs-body-color: #FFFFFF;
    --bs-secondary-color: var(--dg-green-200);
    --bs-heading-color: #FFFFFF;
    --bs-link-color: #FFFFFF;
    --bs-link-hover-color: var(--dg-green-100);
    color: #FFFFFF;
}
.dg-hero-card .text-body-secondary { color: var(--dg-green-200) !important; }
/* El círculo del centro del campo, arriba a la derecha: que no sea un fondo verde sin más. */
.dg-hero-card { position: relative; overflow: hidden; }
.dg-hero-card::after {
    content: "";
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 16rem;
    height: 16rem;
    border: 2px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, .025);
    pointer-events: none;
}
.dg-hero-card > .card-body { position: relative; z-index: 1; }
/* Un nombre largo (la competición) baja de línea repartido, no con una palabra sola abajo. */
.dg-text-balance { text-wrap: balance; }
/* La tarjeta entera es el enlace al partido (19/10); y las tarjetas-enlace del resumen. */
a.dg-hero-card { color: #FFFFFF; transition: transform .15s var(--dg-ease-out), box-shadow .15s var(--dg-ease-out); }
a.dg-hero-card:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(15, 61, 36, .6); }
a.dg-hero-card:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.dg-hero-live { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 50rem; background-color: #DC2626; color: #FFFFFF; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.dg-card-link { transition: border-color .15s var(--dg-ease-out), box-shadow .15s var(--dg-ease-out); }
.dg-card-link:hover { box-shadow: 0 8px 20px -12px rgba(15, 61, 36, .35); }
/* Datos sueltos de la tarjeta protagonista (campo, cómo va la convocatoria). */
.dg-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .75rem;
    border-radius: 50rem;
    background-color: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-weight: 600;
}
.dg-hero-chip > span { color: inherit !important; }
/* Nuestro escudo (sin color propio) en blanco sobre el verde bosque. */
.dg-hero-card .dg-crest:not([style]):not(img) { background-color: #FFFFFF; color: var(--dg-green-900); }
.dg-hero-card .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .4); --bs-btn-hover-color: var(--dg-green-900); }
.dg-hero-card .btn-light { --bs-btn-color: var(--dg-green-900); --bs-btn-hover-color: var(--dg-green-900); }

/* Resultado de un partido (G, E, P): círculo de ancho fijo. */
.dg-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    flex-shrink: 0;
}

/* Miembros por grupos, en una sola tabla: la fila con el nombre de cada grupo,
   en gris como la cabecera de la tabla. */
.dg-members-group > th {
    background-color: var(--dg-zinc-50);
    color: var(--dg-zinc-700);
    font-size: .8125rem;
    font-weight: 600;
}

/* Ordenar arrastrando (`data-dg-sortable`): el asa de puntos a la izquierda y
   la fila que se arrastra, levantada. */
.dg-sort-cell { width: 2.5rem; }
.dg-sort-handle {
    --bs-btn-padding-x: .375rem;
    --bs-btn-padding-y: .25rem;
    --bs-btn-color: var(--dg-zinc-400);
    --bs-btn-hover-color: var(--dg-zinc-700);
    --bs-btn-active-color: var(--dg-zinc-700);
    cursor: grab;
    touch-action: none;
}
.dg-sort-handle:active { cursor: grabbing; transform: none; }
.dg-sort-dragging > td { background-color: var(--dg-green-50); }
.dg-sort-dragging { box-shadow: var(--dg-shadow-lg); }
/* Acceso: fondo gris verdoso con la retícula de puntos y la tarjeta encima. */
.dg-auth {
    background-color: var(--dg-zinc-50);
    background-image: radial-gradient(var(--dg-zinc-300) 1px, transparent 1px);
}
.dg-auth .dg-auth-card {
    --bs-card-border-color: var(--dg-zinc-200);
    --bs-card-border-radius: 1.5rem;
    --bs-card-inner-border-radius: calc(1.5rem - 1px);
}
.dg-auth .input-group:focus-within { border-radius: .625rem; }
/* La ventana de confirmar (`element/layout/confirm`, 25/10): la de la app, no la del navegador. */
#dg-confirm .modal-content { border: 0; border-radius: 1.25rem; }
.dg-confirm-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--dg-green-50, #DCF5E5); color: var(--dg-green-700, #15803D); font-size: 1.15rem; }

/* 10. Alineación sobre el campo (element panel/lineup_pitch) -----------------
   Un círculo por puesto en el verde del panel con el dorsal en blanco; el
   puesto libre, con borde discontinuo y el código de su posición. El nombre
   va debajo con un halo del color del fondo para leerse sobre las líneas. */
.dg-lineup-dot { fill: var(--bs-primary); stroke: #FFFFFF; stroke-width: .35; transition: fill .15s var(--dg-ease-out); }
.dg-lineup-empty .dg-lineup-dot { fill: var(--bs-body-bg); stroke: var(--bs-secondary-color); stroke-dasharray: .9 .7; }
.dg-lineup-number { fill: #FFFFFF; font-family: var(--bs-font-monospace); font-weight: 600; }
.dg-lineup-empty .dg-lineup-number { fill: var(--bs-secondary-color); font-family: var(--bs-body-font-family); font-weight: 500; }
.dg-lineup-name { fill: var(--bs-emphasis-color); font-family: var(--bs-body-font-family); font-weight: 600; paint-order: stroke; stroke: var(--bs-body-bg); stroke-width: .6; }
.dg-lineup-report { max-width: 48rem; }

/* 11. Clasificación (Panel/Competitions) -------------------------------------
   Cada partido de la jornada en tres columnas: local a la derecha, marcador
   centrado y visitante a la izquierda, para que los nombres largos no muevan
   el marcador. */
.dg-fixture { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; }
.dg-fixture-score { min-width: 3.5rem; text-align: center; }
.dg-fixture-input { width: 3rem; padding-inline: .25rem; }
@media (max-width: 575.98px) {
    .dg-fixture { gap: .5rem; font-size: .875rem; }
    .dg-fixture > .text-truncate { white-space: normal; overflow-wrap: break-word; }
    .dg-fixture-input { width: 2.5rem; }
}

/* 12. Días de la semana (repetición de un entrenamiento) ----------------------
   Un círculo por día, como en Google Calendar (element panel/training_repeat). */
.dg-weekday { width: 2.5rem; height: 2.5rem; }

/* 13. Calendario del equipo (Panel/Calendar) ---------------------------------
   Partidos y entrenamientos juntos. El partido es el protagonista, en verde
   bosque como la tarjeta del próximo partido; el entrenamiento, en verde
   claro con una raya a la izquierda; lo cancelado, gris y tachado. La
   columna «Sem.» lleva el número de la semana. Pulsar un día abre «¿Qué
   añadimos?» (`.dg-day-menu`, custom.js 2m) dentro de él. */
.dg-cal { table-layout: fixed; }
.dg-cal > :not(caption) > * > * { border-color: var(--dg-zinc-100); }
.dg-cal > tbody > tr > td { height: 8.25rem; vertical-align: top; padding: .375rem; position: relative; }
/* El mes cabe entero en la pantalla (29/10, Juan: en 1536 × 864 había que bajar): cada semana, lo que
   queda de alto entre las que tiene el mes (`--dg-cal-rows`), de 5,25 a 8,25rem; lo de encima (barra,
   título y cabecera del calendario), `--dg-cal-offset`. Si un día lleva más, la celda crece. */
@media (min-width: 768px) {
    .dg-cal > tbody > tr > td {
        height: clamp(5.25rem, calc((100vh - var(--dg-cal-offset, 18.5rem)) / var(--dg-cal-rows, 6)), 8.25rem);
        height: clamp(5.25rem, calc((100dvh - var(--dg-cal-offset, 18.5rem)) / var(--dg-cal-rows, 6)), 8.25rem);
    }
}
.dg-cal > thead th {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dg-zinc-500);
    padding-block: .625rem;
}
.dg-cal > :not(caption) > * > .dg-cal-week {
    width: 4rem;
    background-color: var(--dg-zinc-50);
    text-align: center;
    vertical-align: top;
    padding: .5rem .25rem;
}
.dg-cal > tbody > tr > td.dg-cal-out { background-color: var(--dg-zinc-50); }
.dg-cal-out .dg-cal-day { color: var(--dg-zinc-300); }
[data-dg-day] { cursor: pointer; }
[data-dg-day] .dg-ev { cursor: pointer; }
.dg-cal-week-number { font-size: .875rem; font-weight: 700; color: var(--dg-zinc-600); }
.dg-cal-day { font-size: .8125rem; font-weight: 600; color: var(--dg-zinc-500); line-height: 1.5rem; min-width: 1.5rem; text-align: center; }
.dg-cal-today .dg-cal-day { background-color: var(--bs-primary); color: #FFFFFF; border-radius: 999px; padding-inline: .375rem; }
.dg-cal-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px dashed var(--bs-primary);
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    color: var(--bs-primary);
    font-size: .6875rem;
    opacity: 0;
    transition: opacity .15s var(--dg-ease-out);
}
[data-dg-day]:hover .dg-cal-add,
.dg-cal-add:focus-visible,
.dg-cal-picked .dg-cal-add { opacity: 1; }
@media (hover: none) { .dg-cal-add { opacity: 1; } }
.dg-cal > tbody > tr > td.dg-cal-picked,
.dg-cal-weekgrid > .dg-cal-picked { box-shadow: inset 0 0 0 2px var(--bs-primary); }

.dg-ev {
    display: block;
    border-radius: .5rem;
    padding: .3rem .45rem;
    font-size: .75rem;
    line-height: 1.3;
    text-decoration: none;
    min-width: 0;
    transition: filter .15s var(--dg-ease-out);
}
.dg-ev:hover { filter: brightness(.96); }
.dg-ev-sub { opacity: .8; }
.dg-ev-training { background-color: var(--dg-green-50); color: var(--dg-green-800); border-left: 3px solid var(--bs-primary); }
.dg-ev-game { background-color: var(--dg-green-900); color: #FFFFFF; }
.dg-ev-game:hover { color: #FFFFFF; filter: brightness(1.15); }
.dg-ev-game .dg-ev-sub { color: var(--dg-green-200); opacity: 1; }
.dg-ev-game .text-primary-emphasis,
.dg-ev-game .text-body-secondary { color: inherit !important; }
.dg-ev-game .dg-crest { box-shadow: 0 0 0 1.5px #FFFFFF; }
.dg-ev-cancelled { background-color: var(--dg-zinc-100); color: var(--dg-zinc-500); text-decoration: line-through; }
.dg-ev-cancelled:hover { color: var(--dg-zinc-600); }
.dg-ev-result { border-radius: 999px; padding: 0 .4rem; font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.dg-ev-result.is-won { background-color: #4ADE80; color: #052E16; }
.dg-ev-result.is-drawn { background-color: #FDE047; color: #422006; }
.dg-ev-result.is-lost { background-color: #FCA5A5; color: #450A0A; }
.dg-crest-xs { width: 1.125rem; height: 1.125rem; font-size: .4375rem; letter-spacing: 0; }

.dg-cal-filter > .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; white-space: nowrap; }
.dg-cal-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; }
.dg-cal-dot.is-game { background-color: var(--dg-green-900); }
.dg-cal-dot.is-training { background-color: var(--dg-green-600); }
.btn-primary .dg-cal-dot { box-shadow: 0 0 0 1.5px #FFFFFF; }
.dg-cal-count { opacity: .7; font-variant-numeric: tabular-nums; }

.dg-cal-weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dg-cal-weekgrid > div { position: relative; min-height: 16rem; padding: .75rem .5rem; border-left: 1px solid var(--dg-zinc-100); }
.dg-cal-weekgrid > div:first-child { border-left: 0; }
.dg-cal-weekgrid .dg-ev { padding: .5rem .6rem; }

.dg-cal-agenda-week { background-color: var(--dg-zinc-50); color: var(--dg-zinc-600); font-size: .75rem; font-weight: 600; }
.dg-cal-agenda-day { width: 3rem; flex-shrink: 0; text-align: center; }
.dg-cal-agenda-day small { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-cal-agenda-day b { display: block; font-size: 1.375rem; line-height: 1.1; color: var(--bs-emphasis-color); }
.list-group .dg-ev { font-size: .8125rem; padding: .5rem .75rem; }

.dg-day-menu {
    position: absolute;
    z-index: 20;
    top: 2.25rem;
    left: .25rem;
    width: 17rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 18px 40px -12px rgba(15, 61, 36, .35), 0 0 0 1px rgba(15, 61, 36, .06);
    text-align: left;
    cursor: default;
}
.dg-day-menu.is-end { left: auto; right: .25rem; }
/* Si no cabe por abajo (la última semana), se abre hacia arriba, pegado al pie del día (29/10, Juan). */
.dg-day-menu.is-up { top: auto; bottom: .25rem; }
.dg-day-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: 1px solid var(--dg-zinc-100);
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
}
/* También como botón (¿De la biblioteca o nueva?, 29/10). */
button.dg-day-option { width: 100%; background-color: transparent; }
/* ¿De la biblioteca o nueva? (29/10): dos tarjetas una al lado de la otra, con el icono arriba. */
.dg-task-choice { flex-direction: column; align-items: flex-start; gap: .5rem; background-color: transparent; color: inherit; text-align: left; text-decoration: none; }
.dg-task-choice:hover, .dg-task-choice:focus-visible { border-color: var(--bs-primary); background-color: var(--dg-green-50); color: inherit; }
.dg-task-choice .dg-day-option-icon { margin-bottom: .25rem; }
.dg-task-choice .dg-own-icon svg { width: 20px; height: 20px; }
.dg-day-option-icon.is-training { --dg-icon-paper: var(--dg-green-50); }
.dg-day-option:hover,
.dg-day-option:focus-visible { border-color: var(--bs-primary); background-color: var(--dg-green-50); color: inherit; }
.dg-day-option-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: .625rem; }
.dg-day-option-icon.is-training { background-color: var(--dg-green-50); color: var(--dg-green-700); }
.dg-day-option-icon.is-game { background-color: var(--dg-green-900); color: #FFFFFF; }

/* En el móvil, mes y semana siguen en cuadrícula (como Google Calendar en
   Android): celdas bajas y cada partido o entrenamiento en una línea
   (`.dg-ev-chip`); «¿Qué añadimos?» sale abajo, a todo el ancho. */
.dg-ev-chip { display: none; }
@media (max-width: 767.98px) {
    .dg-cal > thead th { padding-inline: 0; font-size: .6875rem; letter-spacing: 0; }
    .dg-cal > tbody > tr > td { height: 5.25rem; padding: .125rem; }
    .dg-cal .dg-cal-add { display: none; }
    .dg-cal .dg-cal-day { margin: 0 auto; font-size: .75rem; line-height: 1.375rem; min-width: 1.375rem; }
    .dg-cal .vstack { gap: 2px !important; }
    .dg-cal .dg-ev,
    .dg-cal-weekgrid .dg-ev { padding: .0625rem .1875rem; border-radius: .25rem; font-size: .625rem; line-height: 1.35; border-left-width: 2px; }
    .dg-cal .dg-ev-body,
    .dg-cal-weekgrid .dg-ev-body { display: none; }
    .dg-cal .dg-ev-chip,
    .dg-cal-weekgrid .dg-ev-chip { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
    .dg-cal-weekgrid > div { min-height: 12rem; padding: .375rem .125rem; }
    .dg-cal-weekgrid .dg-cal-weekday { flex-direction: column; gap: 0 !important; }
    .dg-cal-weekgrid .dg-cal-weekday .dg-cal-add { display: none; }
    .dg-cal-weekgrid .vstack { gap: 2px !important; }
    .dg-cal-weekgrid .dg-ev-chip { -webkit-line-clamp: 4; }
    .dg-day-menu,
    .dg-day-menu.is-end,
    .dg-day-menu.is-up { position: fixed; top: auto; right: 1rem; bottom: 1rem; left: 1rem; width: auto; z-index: 1050; }
}

/* 14. Página del partido (panel/match_header y sus pestañas) ------------------
   La cabecera es la tarjeta del próximo partido del inicio (panel/match_card)
   con el marcador y los pasos hasta el partido;
   las pestañas en una píldora blanca. La alineación, en vertical y atacando
   hacia arriba: cada jugador es una pieza redonda en el campo y una tarjeta
   en el banquillo (la misma, según dónde esté), con los colores de la
   equipación (variables --dg-kit-*; sin equipación, el verde del panel). */
.dg-topbar-team { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: inherit; font-weight: 600; text-decoration: none; }
.dg-topbar-team:hover { color: var(--bs-primary); }
.dg-topbar-team .dg-topbar-crest { flex-shrink: 0; width: 1.75rem; height: 1.75rem; font-size: .625rem; }
/* La duración del partido: la del equipo en una línea y, plegado, el campo para cambiarla en este partido. */
.dg-duration > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; list-style: none; cursor: pointer; }
.dg-duration > summary::-webkit-details-marker { display: none; }
.dg-duration-toggle { color: var(--bs-link-color); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dg-duration[open] .dg-duration-toggle { display: none; }
/* El avión de los partidos de fuera, inclinado 45°, despegando. */
.dg-plane { transform: rotate(-45deg); }
/* La cara de la tarjeta del partido: escudos en la primera fila (siempre alineados), los nombres enteros
   debajo, en las líneas que hagan falta, y en medio, centrado con los escudos, cuándo o el marcador. */
.dg-match-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 1rem; row-gap: .5rem; align-items: center; }
.dg-match-face-crest { grid-row: 1; justify-self: center; }
.dg-match-face-name { grid-row: 2; align-self: start; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.dg-match-face .is-first { grid-column: 1; }
.dg-match-face .is-second { grid-column: 3; }
.dg-match-face-mid { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dg-match-tbc { max-width: 6.5rem; line-height: 1.25; text-wrap: balance; }
.dg-match-time { font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.dg-match-big { margin-top: .25rem; font-size: 2.25rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.dg-match-big.is-score { font-family: var(--bs-font-monospace); font-size: 3rem; letter-spacing: 0; }
.dg-kit-shirt { width: 2rem; height: 2rem; flex-shrink: 0; }
.dg-kit-shirt-sm { width: 1.125rem; height: 1.125rem; }
/* La equipación entera (panel/kit_full, 19/10): camiseta con el dorsal, pantalón y medias, con su sombreado. */
.dg-kit-full { flex-shrink: 0; width: auto; height: 3.5rem; overflow: visible; }
.dg-kit-full.is-xs { height: 1.75rem; }
.dg-kit-full.is-sm { height: 2.5rem; }
.dg-kit-full.is-md { height: 3.25rem; }
.dg-kit-full.is-editor { display: block; width: 100%; max-width: 8.5rem; height: auto; margin: 0 auto; filter: drop-shadow(0 6px 10px rgba(15, 61, 36, .14)); }
.dg-kit-full.is-preview { display: block; width: auto; height: 11rem; margin: 0 auto; filter: drop-shadow(0 8px 14px rgba(15, 61, 36, .18)); }
.dg-kit-part { fill: #FFFFFF; stroke: rgba(0, 0, 0, .3); stroke-width: 1.1; stroke-linejoin: round; transition: fill .18s ease, stroke .18s ease; }
.dg-kit-part.is-empty { fill: var(--dg-zinc-100); }
.dg-kit-shade { pointer-events: none; }
.dg-kit-number { font-family: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.02em; fill: transparent; pointer-events: none; }
.is-editor .dg-kit-part { cursor: pointer; outline: none; }
.is-editor .dg-kit-part.is-empty,
.is-preview .dg-kit-part.is-empty { fill: #FFFFFF; stroke: var(--dg-zinc-400); stroke-dasharray: 4 3; }
.is-editor .dg-kit-part:hover { stroke: var(--bs-primary); stroke-width: 2.2; }
.is-editor .dg-kit-part:focus-visible,
.is-preview .dg-kit-part.is-selected { stroke: var(--bs-primary); stroke-width: 3; stroke-dasharray: none; }
.dg-kit-editor { padding: 0; }
.dg-kit-figure { padding: 1rem .5rem .75rem; border-radius: .875rem; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 61, 36, .06), inset 0 0 0 1px var(--dg-zinc-100); text-align: center; }
/* El modal del color: la equipación en grande y la paleta. */
.dg-kit-modal .modal-dialog { max-width: 26rem; }
.dg-kit-modal-preview { display: flex; justify-content: center; margin-bottom: 1.25rem; padding: 1.25rem 0; border-radius: 1rem; background: radial-gradient(circle at 50% 35%, #FFFFFF, var(--dg-green-50, #F0FAF3) 75%); }
.dg-kit-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: .625rem; }
.dg-kit-swatch {
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dg-swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dg-kit-swatch:hover { transform: scale(1.08); }
.dg-kit-swatch:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--dg-green-100, #D1F5DC); }
.dg-kit-swatch.is-active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px #FFFFFF, 0 0 0 5px var(--bs-primary); }
.dg-match-steps { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.dg-match-step a,
.dg-match-step > span { display: inline-flex; align-items: center; gap: .45rem; color: var(--dg-green-200); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.dg-match-step a:hover { color: #FFFFFF; }
.dg-match-step.is-done a,
.dg-match-step.is-now a { color: #FFFFFF; }
.dg-match-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-size: .5625rem;
}
.dg-match-step.is-done .dg-match-step-icon { background-color: #4ADE80; color: #052E16; }
.dg-match-step.is-now .dg-match-step-icon { background-color: #FDE047; color: #422006; }
.dg-match-tabs {
    display: flex;
    gap: .25rem;
    width: 100%;
    padding: .3rem;
    overflow-x: auto;
    border-radius: 50rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(15, 61, 36, .06), 0 0 0 1px rgba(15, 61, 36, .05);
    scrollbar-width: none;
}
.dg-match-tabs > a {
    padding: .45rem 1rem;
    border-radius: 50rem;
    color: var(--dg-zinc-600);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.dg-match-tabs > a:hover { color: var(--dg-zinc-900); background-color: var(--dg-zinc-50); }
.dg-match-tabs > a.active { background-color: var(--bs-primary); color: #FFFFFF; }
.dg-match-tab-badge { margin-left: .25rem; padding: 0 .4rem; border-radius: 50rem; background-color: var(--dg-zinc-100); color: var(--dg-zinc-600); font-size: .6875rem; }
.dg-match-tabs > a.active .dg-match-tab-badge { background-color: rgba(255, 255, 255, .2); color: #FFFFFF; }
/* En el móvil las pestañas no caben: se deslizan en una línea. El lado por el que
   hay más se difumina y asoma la pestaña siguiente (custom.js 2t pone is-more-start
   / is-more-end y lleva la activa a la vista). */
.dg-match-tabs { scroll-behavior: smooth; overscroll-behavior-x: contain; }
.dg-match-tabs > a { flex: 1 0 auto; text-align: center; }
.dg-match-tabs.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.dg-match-tabs.is-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.dg-match-tabs.is-more-start.is-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
@media (max-width: 575.98px) {
    .dg-match-tabs > a { padding: .45rem .85rem; }
}
@media (max-width: 767.98px) {
    /* En el móvil, cada paso en su línea. */
    .dg-match-steps { flex-direction: column; }
    .dg-match-big { font-size: 1.5rem; }
    .dg-match-big.is-score { font-size: 2rem; }
}
.dg-kit-option {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border: 1px solid var(--dg-zinc-200);
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
.dg-kit-option .form-check-input { margin: 0; }
.dg-kit-option:has(:checked) { border-color: var(--bs-primary); box-shadow: 0 0 0 2px var(--dg-green-100); }
.dg-direct-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--dg-green-50);
    color: var(--dg-green-700);
    font-size: 1.25rem;
}

.dg-lineup-pitch {
    position: relative;
    max-width: 27.5rem;
    margin: 0 auto;
    aspect-ratio: 68 / 100;
    overflow: hidden;
    border-radius: 1rem;
    background: repeating-linear-gradient(180deg, #2E8B4A 0 10%, #2A8044 10% 20%);
    user-select: none;
}
.dg-lineup-pitch > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: .35; }
.dg-lineup-slot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    min-height: 4rem;
    transform: translate(-50%, -50%);
}
.dg-lineup-slot-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px dashed rgba(255, 255, 255, .75);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-size: .6875rem;
    font-weight: 700;
}
.dg-lineup-slot.is-filled .dg-lineup-slot-code { display: none; }
.dg-lineup-slot.is-over .dg-lineup-slot-code,
.dg-lineup-slot.is-over .dg-lineup-shirt,
.is-picking .dg-lineup-slot:hover .dg-lineup-slot-code { box-shadow: 0 0 0 3px #FDE047, 0 0 0 8px rgba(253, 224, 71, .35); }
.dg-lineup-slot.is-invalid .dg-lineup-shirt { box-shadow: 0 0 0 3px var(--bs-danger); }
/* En el móvil el dedo desliza la página (el arrastre empieza con una pulsación larga: custom.js 2o). */
.dg-lineup-player { display: flex; align-items: center; touch-action: pan-y; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dg-lineup-player img { pointer-events: none; }
.dg-lineup-player.is-dragging { opacity: .35; }
/* El portero, con la suya (19/10, KitColors::cssVars): en el campo manda el puesto de portero; fuera, quien juega de portero. */
.dg-lineup-player.is-keeper,
.dg-lineup-slot.is-gk .dg-lineup-player { --dg-kit-shirt: var(--dg-gk-shirt); --dg-kit-number: var(--dg-gk-number); }
.dg-lineup-slot:not(.is-gk) .dg-lineup-player.is-keeper { --dg-kit-shirt: inherit; --dg-kit-number: inherit; }
.dg-lineup-shirt {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--dg-kit-trim, #FFFFFF), 0 6px 14px rgba(0, 0, 0, .22);
}
.dg-lineup-shirt .dg-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--dg-kit-shirt, var(--bs-primary));
    color: var(--dg-kit-number, #FFFFFF);
    object-fit: cover;
    font-size: .8125rem;
}
.dg-lineup-dorsal {
    position: absolute;
    right: -.4rem;
    bottom: -.25rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .25rem;
    border-radius: 50rem;
    background-color: var(--dg-kit-shirt, var(--bs-primary));
    box-shadow: 0 0 0 2px var(--dg-kit-trim, #FFFFFF);
    color: var(--dg-kit-number, #FFFFFF);
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1.3rem;
    text-align: center;
}
.dg-lineup-player:focus-visible .dg-lineup-shirt,
.dg-lineup-player.is-selected .dg-lineup-shirt { box-shadow: 0 0 0 3px #FDE047, 0 0 0 8px rgba(253, 224, 71, .35); }
.dg-lineup-label {
    padding: .05rem .5rem;
    border-radius: 50rem;
    background-color: rgba(10, 40, 24, .78);
    color: #FFFFFF;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}
.dg-lineup-full { display: none; min-width: 0; line-height: 1.3; font-size: .8125rem; }
/* En el campo: redonda con el nombre debajo. */
.dg-lineup-slot .dg-lineup-player,
.dg-lineup-ghost { flex-direction: column; gap: .25rem; }
/* En el banquillo y en «No disponibles»: tarjeta con la foto, el nombre y la posición. */
.dg-lineup-bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; min-height: 4rem; padding: .25rem; border-radius: .875rem; }
.dg-lineup-bench.is-over { background-color: var(--dg-green-50); box-shadow: inset 0 0 0 2px var(--bs-primary); }
.dg-lineup-bench .dg-lineup-player,
.dg-lineup-off {
    gap: .625rem;
    padding: .5rem .625rem;
    border: 1px solid var(--dg-zinc-100);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
}
.dg-lineup-bench .dg-lineup-player .dg-lineup-shirt { width: 2.25rem; height: 2.25rem; box-shadow: 0 0 0 2px var(--dg-kit-trim, #FFFFFF), 0 0 0 3px var(--dg-zinc-200); }
.dg-lineup-bench .dg-lineup-player .dg-lineup-label { display: none; }
.dg-lineup-bench .dg-lineup-player .dg-lineup-full { display: block; }
.dg-lineup-bench .dg-lineup-player.is-selected { border-color: #EAB308; }
.dg-lineup-off { display: flex; align-items: center; background-color: var(--dg-zinc-50); }
.dg-lineup-off .dg-photo { width: 2.25rem; height: 2.25rem; filter: grayscale(1); opacity: .7; }
/* La hoja de abajo del móvil: la lista de jugadores para un puesto o el campo pequeño para un jugador. */
.dg-lineup-sheet { --bs-offcanvas-height: auto; max-height: 85vh; border-radius: 1.25rem 1.25rem 0 0; }
.dg-lineup-sheet .dg-lineup-bench { min-height: 0; padding: 0; }
.dg-sheet-pick { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: start; }
.dg-sheet-pick .dg-lineup-player { cursor: pointer; }
.dg-lineup-pitch.is-mini { width: 100%; max-width: 15rem; margin: 0 auto; }
.dg-lineup-pitch.is-mini .dg-lineup-slot { width: 3.75rem; min-height: 3rem; cursor: pointer; }
.dg-lineup-pitch.is-mini .dg-lineup-slot-code,
.dg-lineup-pitch.is-mini .dg-lineup-shirt { width: 2rem; height: 2rem; }
.dg-lineup-pitch.is-mini .dg-lineup-dorsal { display: none; }
.dg-lineup-pitch.is-mini .dg-lineup-label { font-size: .5625rem; padding: 0 .35rem; }
.dg-lineup-pitch.is-mini .is-current .dg-lineup-shirt { box-shadow: 0 0 0 3px #FDE047, 0 0 0 7px rgba(253, 224, 71, .35); }
.dg-lineup-ghost { position: fixed; z-index: 1080; pointer-events: none; transform: translate(-50%, -50%) rotate(-5deg); }
.dg-lineup-ghost .dg-lineup-full { display: none; }
.dg-lineup-ghost .dg-lineup-label { display: inline; }
.dg-pos { display: inline-block; padding: .05rem .4rem; border-radius: 50rem; font-size: .625rem; font-weight: 800; letter-spacing: .03em; }
.dg-pos.is-goalkeeper { background-color: #FEF3C7; color: #92400E; }
.dg-pos.is-defender { background-color: #DBEAFE; color: #1E40AF; }
.dg-pos.is-midfielder { background-color: #DCFCE7; color: #166534; }
.dg-pos.is-forward { background-color: #FFE4E6; color: #9F1239; }

/* 15. Compartir el partido (página para las familias, tarjeta del panel) -----
   La página pública (layout `share`) es una columna estrecha para el móvil
   con la misma tarjeta en verde bosque de la cabecera del partido; lo que
   va pasando, en una tarjeta blanca. En el panel, la tarjeta «Compartir con
   las familias» de la convocatoria (`panel/share_card`). */
.dg-share { background-color: var(--bs-body-bg); }
.dg-share-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 34rem;
    margin: 0 auto;
    padding: 1rem 1rem .25rem;
}
.dg-share-team-name { font-size: .8125rem; font-weight: 600; color: var(--dg-zinc-500); text-align: right; }
.dg-share-main { display: flex; flex-direction: column; gap: .75rem; max-width: 34rem; margin: 0 auto; padding: .75rem 1rem 2.5rem; }
.dg-share-live { display: flex; flex-direction: column; gap: .75rem; }
.dg-share-hero {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 1.25rem;
    background-color: var(--dg-green-900);
    color: #FFFFFF;
    text-align: center;
}
.dg-share-hero::after {
    content: "";
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 11rem;
    height: 11rem;
    border: 2px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    pointer-events: none;
}
.dg-share-hero > * { position: relative; z-index: 1; }
.dg-share-heading { margin-bottom: .6rem; color: var(--dg-green-200); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dg-share-when { color: var(--dg-green-200); font-size: .8125rem; font-weight: 600; }
.dg-share-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .65rem;
    border-radius: 50rem;
    background-color: rgba(255, 255, 255, .14);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.dg-share-status.is-live { background-color: #DC2626; }
.dg-share-status .dg-share-minute { margin-left: .15rem; padding-left: .45rem; border-left: 1px solid rgba(255, 255, 255, .45); color: #FFFFFF; font-family: inherit; font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dg-share-status.is-live::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background-color: #FFFFFF; animation: dg-share-pulse 1.4s ease-in-out infinite; }
@keyframes dg-share-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dg-share-status.is-live::before { animation: none; } }
/* Escudos y marcador en la primera fila y los nombres en la segunda (Juan, 27/10: alineados aunque un nombre ocupe más). */
.dg-share-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .4rem .5rem; margin-top: .9rem; }
.dg-share-teams > .dg-share-crest { justify-self: center; }
.dg-share-teams > .dg-share-crest:not([style]):not(img) { background-color: #FFFFFF; color: var(--dg-green-900); }
.dg-share-teams > .dg-crest-lg { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
.dg-share-team { grid-row: 2; grid-column: 1; align-self: start; min-width: 0; font-size: .875rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dg-share-team.is-right { grid-column: 3; }
.dg-share-round { margin-top: .15rem; color: rgba(255, 255, 255, .7); font-size: .6875rem; }
/* El logo en el centro cuando va solo (la página de las familias, Juan, 27/10). */
.dg-share-top > :only-child { margin: 0 auto; }
.dg-share-score { font-family: var(--bs-font-monospace); font-size: 2.5rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.dg-share-score.is-time { font-family: var(--bs-body-font-family); font-size: 1.75rem; }
.dg-share-note { margin-top: .75rem; color: var(--dg-green-200); font-size: .75rem; }
.dg-share-card { border-radius: 1.1rem; }
.dg-share-card .card-body { padding: 1rem 1.1rem; }
.dg-share-moments > li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--dg-zinc-100); }
.dg-share-moments > li:first-child { border-top: 0; }
.dg-share-minute { flex-shrink: 0; width: 2.75rem; color: var(--dg-zinc-500); font-family: var(--bs-font-monospace); font-size: .8125rem; }
.dg-share-icon { flex-shrink: 0; width: 1.25rem; text-align: center; color: var(--dg-zinc-600); }
.dg-share-squad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; }
.dg-share-squad > li { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 600; }
.dg-share-shirt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .3rem;
    border-radius: 50rem;
    background-color: var(--dg-green-900);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 800;
}
.dg-share-preview { display: block; width: 100%; max-width: 26rem; height: auto; border-radius: .75rem; box-shadow: 0 10px 28px -14px rgba(15, 61, 36, .45); }
.dg-share-link { font-family: var(--bs-font-monospace); font-size: .8125rem; }
/* La imagen de la fecha y la hora en «Compartir» (pestaña Partido): verde bosque mientras llega. */
.dg-share-shot { background: var(--dg-green-900); }
.dg-share-shot.ratio-4x5 { --bs-aspect-ratio: 125%; }
/* «Compartir» la convocatoria: con camisetas o con fotos, dos botones grandes. */
.dg-share-choice { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; height: 100%; padding: 1.5rem 1rem; border: 2px solid var(--dg-zinc-200); border-radius: 1rem; background: #FFFFFF; color: var(--bs-body-color); text-align: center; transition: border-color .15s, background-color .15s; }
.dg-share-choice:hover, .dg-share-choice:focus-visible { border-color: var(--bs-primary); background-color: var(--dg-green-50); }
.dg-share-choice-icon { margin-bottom: .25rem; color: var(--bs-primary); font-size: 2rem; }
.dg-btn-whatsapp { --bs-btn-bg: #1DA851; --bs-btn-border-color: #1DA851; --bs-btn-color: #FFFFFF; --bs-btn-hover-bg: #178F45; --bs-btn-hover-border-color: #178F45; --bs-btn-hover-color: #FFFFFF; --bs-btn-active-bg: #178F45; --bs-btn-active-border-color: #178F45; }

/* 16. Hojas para imprimir o guardar en PDF (layout `print`) ------------------
   En pantalla, una hoja A4 sobre el fondo gris con la barra de «Imprimir» y
   «Volver»; al imprimir, solo la hoja, sin sombras y con sus colores. */
.dg-print { background-color: var(--dg-zinc-100); }
.dg-print-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; max-width: 210mm; margin: 0 auto; padding: 1rem 0; }
.dg-sheet {
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto 2rem;
    padding: 14mm;
    border-radius: .5rem;
    background-color: #FFFFFF;
    box-shadow: 0 10px 30px -14px rgba(15, 61, 36, .35);
    font-size: .8125rem;
}
.dg-sheet-header { display: flex; align-items: center; gap: .9rem; padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 3px solid var(--bs-primary); }
.dg-sheet-header h1 { margin: 0; font-size: 1.35rem; font-weight: 800; }
.dg-sheet-footer { margin-top: 1.5rem; padding-top: .6rem; border-top: 1px solid var(--dg-zinc-100); color: var(--dg-zinc-500); font-size: .6875rem; }
.dg-sheet-task { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--dg-zinc-100); break-inside: avoid; }
.dg-sheet-task:first-of-type { border-top: 0; }
.dg-sheet .dg-lineup-pitch { max-width: 21rem; }
@page { size: A4; margin: 10mm; }
@media print {
    .dg-print { background-color: #FFFFFF; }
    .dg-print-bar { display: none; }
    .dg-sheet { max-width: none; min-height: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
    .dg-sheet,
    .dg-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.dg-sheet-shirt { min-width: 1.75rem; font-weight: 700; text-align: right; }
.dg-sheet-task.is-text { grid-template-columns: minmax(0, 1fr); }
/* La sesión compartida (30/10): cada tarea en su tarjeta; en el móvil, la pizarra encima. */
.dg-sheet-task.is-card { padding: 1rem; margin-bottom: .75rem; border-top: var(--bs-card-border-width) solid var(--bs-card-border-color); }
@media (max-width: 767.98px) { .dg-sheet-task.is-card { grid-template-columns: minmax(0, 1fr); } }
/* El PDF de la sesión se dibuja con estas pizarras, fuera de la vista. */
.dg-pdf-source { position: absolute; top: 0; left: -10000px; width: 56rem; pointer-events: none; }
/* «Compartir la sesión»: el fichero que se manda. */
.dg-ss-file { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: .875rem; background: var(--dg-zinc-50, #FAFAFA); box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-ss-file-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: #FEE2E2; color: #DC2626; font-size: 1.15rem; }
/* «¿Qué quieres mandar?»: las tres opciones en la misma línea, cada una con su icono encima. */
.dg-ss-choice { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; height: 100%; padding: .9rem .5rem; text-align: center; border: 2px solid var(--dg-zinc-200); border-radius: .875rem; background: #FFFFFF; color: var(--bs-body-color); transition: border-color .15s, background-color .15s; }
.dg-ss-choice:hover, .dg-ss-choice:focus-visible { border-color: var(--bs-primary); background-color: var(--dg-green-50); }
.dg-ss-choice .small { font-size: .75rem; }
.dg-ss-choice-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: var(--dg-green-50); color: var(--bs-primary); font-size: 1.1rem; }
.dg-sheet-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1.25rem; }
.dg-sheet-block { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--dg-zinc-100); break-inside: avoid; }

/* 17. Convocatoria y alineación: la barra de cómo va, la marca de «No estará»
   en la pieza del jugador, «Sin convocar» y «Mover puestos». */
/* Menú de sistemas de la alineación (19/10): «Crear» arriba, favoritos con estrella y los demás. */
.dg-formation-toggle { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dg-formation-menu { min-width: 14rem; max-height: min(70vh, 28rem); overflow-y: auto; }
.dg-formation-menu .dropdown-header { padding: .375rem .5rem .25rem; color: var(--bs-emphasis-color); font-size: .8125rem; font-weight: 700; }
/* Los títulos de grupo, pegados a la izquierda; los sistemas de cada grupo, con sangría. */
.dg-formation-option { display: flex; align-items: center; gap: .25rem; padding-left: .5rem; }
.dg-formation-option > .dropdown-item { flex: 1; min-width: 0; }
.dg-formation-star { flex-shrink: 0; padding: .25rem .5rem; border: 0; border-radius: .5rem; background: none; color: var(--dg-zinc-300); }
.dg-formation-star:hover { color: #F59E0B; }
/* El sistema elegido, en negrita y verde, sin fondo. */
.dg-formation-menu .dropdown-item.active,
.dg-formation-menu .dropdown-item:active { background-color: transparent; color: var(--bs-primary); font-weight: 700; }
.dg-formation-star.is-on { color: #F59E0B; }
.dg-lineup-status { color: var(--dg-green-700); font-weight: 600; }
.dg-lineup-status.is-error { color: var(--bs-danger-text-emphasis); }
.dg-lineup-answer {
    position: absolute;
    top: -.3rem;
    left: -.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FFFFFF;
    color: #FFFFFF;
    font-size: .5625rem;
}
.dg-lineup-answer.is-no { background-color: #DC2626; }
/* El capitán (23/10): la «C» amarilla arriba a la derecha de su ficha. */
.dg-lineup-captain { position: absolute; top: -.3rem; right: -.35rem; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background-color: #FACC15; box-shadow: 0 0 0 2px #FFFFFF; color: var(--dg-green-900); font-size: .625rem; font-weight: 800; }
.dg-lineup-captain[hidden] { display: none; }
.dg-lineup-pitch.is-mini .dg-lineup-captain { display: none; }
.dg-lineup-bench.is-out .dg-lineup-player { background-color: var(--dg-zinc-50); }
.dg-lineup-bench.is-out .dg-lineup-shirt { opacity: .75; }
.is-editing .dg-lineup-slot { cursor: move; touch-action: none; }
.is-editing .dg-lineup-slot .dg-lineup-shirt,
.is-editing .dg-lineup-slot-code { outline: 2px dashed #FDE047; outline-offset: 4px; }
.is-editing .dg-lineup-player { cursor: move; }
.dg-lineup-edit { padding: 1rem; border-radius: .875rem; background-color: var(--dg-green-50); }
/* La convocatoria en pasos (19/10): número de paso, el mensaje tal como quedará y «Más opciones». */
.dg-step-head { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.dg-step-number { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: var(--dg-green-50); color: var(--bs-primary); font-size: .8125rem; font-weight: 800; }
.dg-callup-message { padding: .875rem 1rem; border-radius: .875rem; background-color: #E7F7EC; color: var(--bs-emphasis-color); font-size: .875rem; line-height: 1.5; }
.dg-callup-more > summary { cursor: pointer; color: var(--bs-secondary-color); }
/* Texto escrito por el entrenador con sus saltos de línea (observaciones de la convocatoria). */
.dg-pre-line { white-space: pre-line; overflow-wrap: anywhere; }
/* «Elegir varios» en los suplentes: se marcan con un toque y se pasan a «Sin convocar». */
.dg-lineup-multi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.is-multi [data-dg-zone="bench"] .dg-lineup-player { cursor: pointer; }
.dg-lineup-bench .dg-lineup-player.is-checked { border-color: var(--bs-primary); background-color: var(--dg-green-50); box-shadow: inset 0 0 0 1px var(--bs-primary); }

/* 18. Avisos de que no estará: los próximos partidos en la tarjeta de la
   familia (panel/family_card), cada uno con «No podrá jugar» y su formulario. */
.dg-family-game { padding: .875rem 0; border-bottom: 1px solid var(--bs-border-color); }
.dg-family-game:last-child { padding-bottom: 0; border-bottom: 0; }
.dg-family-absence { padding: 1rem; border-radius: .875rem; background-color: var(--dg-green-50); }
/* Notificaciones (Mi cuenta): un aviso por fila. */
/* Interruptor algo más grande cuando va solo, a la derecha de su fila (notificaciones de «Mi cuenta»). */
.dg-switch-lg { padding-left: 0; }
.dg-switch-lg .form-check-input { width: 2.6em; height: 1.4em; margin: 0; float: none; }

/* 19. Registro en directo (Panel/Games/live, custom.js 3): para el móvil en
   horizontal. Barra en verde bosque; debajo, el campo de rayas de la
   alineación en el centro y, a cada lado, la columna de acciones de cada
   equipo (junto a la mitad que defiende: con «is-rtl» se cambian). Las
   preguntas salen encima del campo. En vertical, solo «Gira el móvil». */
.dg-live {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0F3D24;
    color: #fff;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    --dg-kit-shirt: #C8102E;
    --dg-kit-trim: #fff;
    --dg-kit-number: #fff;
    --dg-live-col: 11rem;
}
.dg-live-rotate { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem; text-align: center; background: #0F3D24; }
.dg-live-rotate > i { font-size: 3rem; color: #4ADE80; animation: dg-live-rotate 2.4s ease-in-out infinite; }
.dg-live-rotate .small { max-width: 18rem; opacity: .8; }
@keyframes dg-live-rotate { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { .dg-live-rotate { display: flex; } }
/* En Eventos, la ventana «Añadir evento» (27/10, Juan: paso a paso, sin girar el móvil): el mismo directo, una
   cosa cada vez según `data-phase` —`pick`, «¿Qué ha pasado?» con sus botones; `ask`, la pregunta; `pitch`,
   el campo para tocar dónde fue—, en vertical y sobre el blanco de la ventana. */
.dg-live.is-modal { position: relative; inset: auto; overflow: visible; background: none; color: var(--bs-body-color); }
.dg-live.is-modal .dg-live-rotate, .dg-live.is-modal .dg-live-bar, .dg-live.is-modal .dg-live-tip, .dg-live.is-modal .dg-live-finished { display: none !important; }
.dg-live.is-modal .dg-live-stage { position: static; display: block; padding: 0; background: none; container-type: normal; }
.dg-live.is-modal .dg-live-col { max-width: none; min-width: 0; background: #0F3D24; }
.dg-live.is-modal .dg-live-col-head { padding: .5rem .6rem; }
.dg-live.is-modal .dg-live-col-head [data-action="hand"], .dg-live.is-modal .dg-live-col-head [data-action="marks"], .dg-live.is-modal .dg-live-col-head [data-action="look"] { display: none; }
/* Cambio, Posiciones y el sistema, debajo de las acciones y con su nombre. */
.dg-live.is-modal .dg-live-col-head { order: 3; flex-wrap: wrap; gap: .45rem; padding: 0 .75rem .75rem; background: none; }
.dg-live.is-modal .dg-live-col-head .dg-live-col-btn { gap: .4rem; width: auto; height: 2.4rem; padding: 0 .9rem; border-radius: 50rem; font-size: .85rem; font-weight: 700; color: #0F3D24; }
.dg-live.is-modal .dg-live-col-head .dg-live-col-btn[hidden] { display: none; }
.dg-live.is-modal .dg-live-col-system { order: 3; height: 2.4rem; margin-right: 0; margin-left: auto; }
.dg-live.is-modal .dg-live-pick-title { order: 1; }
.dg-live.is-modal .dg-live-actions { order: 2; }
.dg-live.is-modal .dg-live-pick-title { padding: .9rem 1rem .1rem; border: 0; background: none; color: #FFFFFF; font-size: 1.15rem; font-weight: 800; text-align: left; text-decoration: underline dashed rgba(255, 255, 255, .45); text-underline-offset: .3rem; }
/* El aviso de guardado, también con la pregunta del minuto abierta. */
.dg-live.is-modal .dg-live-ask.is-open ~ .dg-live-toast { visibility: visible; }
.dg-live.is-modal .dg-live-actions { grid-auto-rows: 3.4rem; gap: .45rem; padding: .75rem; overflow: visible; }
.dg-live.is-modal .dg-live-act { padding: .3rem .6rem; font-size: .95rem; }
.dg-live.is-modal .dg-live-center { width: auto; margin: 0; }
.dg-live.is-modal .dg-live-field { position: relative; top: auto; transform: none; border-radius: .6rem; background: repeating-linear-gradient(90deg, #2E8B4A 0 10%, #2A8044 10% 20%); }
.dg-live.is-modal .dg-live-dir { top: .4rem; }
.dg-live.is-modal .dg-live-ask { position: static; opacity: 1; pointer-events: auto; transform: none; border: 1px solid var(--dg-zinc-200); box-shadow: none; }
.dg-live.is-modal .dg-live-body { max-height: none; overflow: visible; }
.dg-live.is-modal .dg-live-hint { position: static; margin-bottom: .75rem; padding: .9rem 1rem; background: #FCD34D; color: #0F3D24; }
.dg-live.is-modal .dg-live-toast { position: static; display: none; margin-top: .75rem; transform: none; }
.dg-live.is-modal .dg-live-toast.is-on { display: flex; }
.dg-live.is-modal[data-phase="pick"] .dg-live-field, .dg-live.is-modal[data-phase="pick"] .dg-live-ask,
.dg-live.is-modal[data-phase="ask"] .dg-live-col, .dg-live.is-modal[data-phase="ask"] .dg-live-field,
.dg-live.is-modal[data-phase="pitch"] .dg-live-ask, .dg-live.is-modal[data-phase="pitch"] .dg-live-col-head,
.dg-live.is-modal[data-phase="pitch"] .dg-live-actions, .dg-live.is-modal[data-phase="pitch"] .dg-live-pick-title { display: none; }
.dg-live.is-modal[data-phase="pitch"] .dg-live-col { background: none; }
/* Al corregir, lo que tenía: con su marco verde. */
.dg-live.is-modal .is-was { box-shadow: 0 0 0 3px #1DB954 !important; }
/* Guardado: solo el aviso, en grande; luego la ventana se cierra sola. */
.dg-live.is-modal[data-phase="done"] .dg-live-col, .dg-live.is-modal[data-phase="done"] .dg-live-field, .dg-live.is-modal[data-phase="done"] .dg-live-ask { display: none; }
.dg-live.is-modal[data-phase="done"] .dg-live-toast { justify-content: center; margin: 2rem auto; padding: 1rem 1.25rem; font-size: 1.05rem; font-weight: 700; }
.dg-live.is-modal[data-phase="done"] .dg-live-toast button { display: none; }
/* El campo va debajo de la orden: sin la mano que apunta de lado; los escudos, a su tamaño (sin el contenedor del directo). */
.dg-live.is-modal .dg-live-hint-point { display: none; }
.dg-live.is-modal .dg-live-field { container-type: size; }

/* En un iPhone sin instalar: cómo verlo a pantalla completa (una vez). */
.dg-live-tip { position: absolute; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 61, 36, .85); }
.dg-live-tip[hidden] { display: none; }
.dg-live-tip-card { max-width: 24rem; padding: 1.25rem 1.5rem; border-radius: 1.2rem; background: #0F3D24; text-align: center; box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, .6); }
.dg-live-tip-card > i { margin-bottom: .5rem; font-size: 1.8rem; color: #4ADE80; }
.dg-live-tip-card p { opacity: .85; }

.dg-live-bar { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left)); background: #0F3D24; }
.dg-live-ic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .95rem; text-decoration: none; }
.dg-live-ic:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.dg-live-ic:disabled { opacity: .45; }
.dg-live-ic[hidden] { display: none; }
.dg-look-circle { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--dg-kit-shirt); box-shadow: inset 0 0 0 1.5px var(--dg-kit-trim); color: var(--dg-kit-number); font-size: .62rem; font-weight: 800; line-height: 1; }
.dg-live-ic [data-look][hidden] { display: none; }
.dg-live-score { display: flex; align-items: center; gap: .45rem; min-width: 0; font-weight: 800; }
.dg-live-team { overflow: hidden; max-width: 8rem; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.dg-live-score b { flex: 0 0 auto; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dg-live .dg-crest.dg-live-crest { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; font-size: .6rem; }
.dg-live span.dg-crest { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dg-crest-bg, #fff); color: #fff; font-weight: 800; }
.dg-live span.dg-crest:not([style]) { background: #fff; color: #0F3D24; }
.dg-live img.dg-crest { object-fit: contain; background: none; }
.dg-live-clock { display: flex; flex: 0 0 auto; align-items: center; gap: .4rem; margin-left: auto; padding: .2rem .25rem .2rem .75rem; border-radius: 50rem; background: rgba(255, 255, 255, .12); font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-live-clock small { font-weight: 600; opacity: .75; }
.dg-live-clock .dg-live-ic { width: 1.8rem; height: 1.8rem; background: #1DB954; }
.dg-live-clock .dg-live-ic.is-play { gap: .3rem; width: auto; padding: 0 .8rem; border-radius: 50rem; font-size: .78rem; font-weight: 800; }
.dg-live-clock .dg-live-ic.is-play > i { font-size: .7rem; }
/* El reloj: tocarlo corrige el minuto. */
.dg-live-clock-time { padding: 0 .2rem; border: 0; border-bottom: 1px dashed rgba(255, 255, 255, .45); background: none; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-live-clock .dg-live-ic:disabled { background: rgba(255, 255, 255, .2); opacity: 1; }
.dg-live-clock .dg-live-ic.is-period { gap: .3rem; width: auto; padding: 0 .75rem; border-radius: 50rem; background: rgba(255, 255, 255, .16); font-size: .78rem; font-weight: 800; }
.dg-live-clock .dg-live-ic.is-period .dg-live-svg { width: 1.1rem; height: 1.1rem; }
/* Si está todo guardado: la nube con su marca (tic, flecha o aviso); al tocarla, el aviso lo dice. */
.dg-live-sync { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .95rem; }
.dg-live-sync-badge { position: absolute; right: .2rem; bottom: .2rem; display: inline-flex; align-items: center; justify-content: center; width: .95rem; height: .95rem; border-radius: 50%; background: #4ADE80; color: #0F3D24; font-size: .5rem; box-shadow: 0 0 0 2px #0F3D24; }
.dg-live-sync[data-status="pending"] .dg-live-sync-badge { background: #FCD34D; }
.dg-live-sync[data-status="off"] .dg-live-sync-badge { background: #F87171; color: #fff; }
.dg-live-menu-btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .85rem; border: 0; border-radius: 50rem; background: #fff; color: #0F3D24; font-size: .85rem; font-weight: 700; }
/* Deshacer, al lado de «Lo registrado» y apartado de terminar la parte (Juan, 25/10). */
.dg-live-undo { margin-left: .5rem; }

/* Escenario: a la izquierda, la columna de acciones en parejas «a favor · en
   contra» (23/10, maqueta C), y el campo. La columna se queda a la izquierda
   aunque se cambie de sentido. */
.dg-live-stage { position: absolute; inset: 3rem 0 0 0; display: flex; gap: .5rem; padding: .5rem max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: repeating-linear-gradient(90deg, #2E8B4A 0 10%, #2A8044 10% 20%); container-type: size; }
.dg-live-col { display: flex; flex: 1 1 0; flex-direction: column; min-width: var(--dg-live-col); max-width: 28rem; container-type: inline-size; position: relative; border-radius: 1rem; background: rgba(15, 61, 36, .82); overflow: hidden; }
.dg-live-center { position: relative; flex: 0 0 auto; width: min(calc(100cqw - var(--dg-live-col) - 2.1rem), calc((100cqh - 1.2rem) * var(--dg-ratio))); margin: 0 .6rem 0 1rem; }
/* Diestros (de partida): los botones a la derecha; zurdos, a la izquierda (menú «Partido», se recuerda en el dispositivo). */
.dg-live-stage.is-hand-right .dg-live-col { order: 2; }
.dg-live-stage.is-hand-right .dg-live-center { margin: 0 1rem 0 .6rem; }
.dg-live-col-head { display: flex; align-items: center; gap: .3rem; padding: .35rem .4rem; background: rgba(0, 0, 0, .18); }
.dg-live-col-system { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; margin-right: auto; padding: .25rem .7rem; border: 0; border-radius: 50rem; background: rgba(255, 255, 255, .16); color: #fff; font-size: clamp(.68rem, 4.5cqi, .85rem); font-weight: 800; cursor: pointer; }
.dg-live-col-system > i { font-size: .65em; opacity: .8; }
.dg-live-col-system:disabled { cursor: default; }
.dg-live-col-system:disabled > i, .dg-live-col-system[hidden] { display: none; }
/* «Cambio» y «Posiciones», solo con su icono (redondos), junto a la formación. */
.dg-live-col-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0F3D24; }
.dg-live-col-btn[hidden] { display: none; }
.dg-live-col-btn.is-on { background: #4ADE80; }
.dg-icon-sub { display: inline-flex; gap: 1px; font-size: .85rem; }
.dg-icon-sub .fa-arrow-up { color: #16A34A; }
.dg-icon-sub .fa-arrow-down { color: #DC2626; }
.dg-icon-positions { flex: 0 0 auto; width: 1.15em; height: 1.15em; }
.dg-live-col-btn > .dg-icon-positions { width: 1.3rem; height: 1.3rem; }
/* Las siete filas caben sin scroll (Juan, 23/10); si en alguna pantalla no, se ve la barra. En el móvil,
   el icono al lado y el texto en dos líneas como mucho; con altura, el icono encima. */
.dg-live-actions { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(1.8rem, 1fr); gap: .25rem; padding: .35rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .55) transparent; }
.dg-live-actions::-webkit-scrollbar { width: 4px; }
.dg-live-actions::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(255, 255, 255, .55); }
.dg-live-act { display: flex; align-items: center; gap: .25rem; min-width: 0; padding: .1rem .3rem; border: 0; border-radius: .6rem; background: #fff; color: #18181B; font-size: clamp(.6rem, 5cqi, .92rem); font-weight: 800; line-height: 1.05; text-align: left; }
.dg-live-act i { flex: 0 0 auto; width: 1.3em; font-size: 1.3em; text-align: center; color: var(--dg-green-600); }
.dg-live-act .dg-live-svg { flex: 0 0 auto; width: 1.45em; height: 1.45em; color: var(--dg-green-600); }
.dg-live-act.is-against .dg-live-svg { color: #C2410C; }
.dg-live-col-btn .dg-live-svg { width: 1.3rem; height: 1.3rem; }
.dg-live-act span { min-width: 0; font-size: .82em; hyphens: auto; overflow-wrap: break-word; }
.dg-live-act.is-against { background: #FFF1E7; color: #431407; }
.dg-live-act.is-against i { color: #C2410C; }
.dg-live-act.is-goal-for { background: #FCD34D; color: #0F3D24; }
.dg-live-act.is-goal-for i { color: #0F3D24; }
.dg-live-act.is-goal-against { background: #FDBA74; color: #7C2D12; }
.dg-live-act.is-goal-against i { color: #7C2D12; }
.dg-live-act.is-yellow-card, .dg-live-act.is-red-card { background: #fff; color: #18181B; }
.dg-live-act.is-yellow-card i { color: #EAB308; }
.dg-live-act.is-red-card i { color: #DC2626; }
.dg-live-act.is-active { box-shadow: 0 0 0 3px #4ADE80; }
@media (min-height: 600px) {
    .dg-live { --dg-live-col: 14rem; }
    .dg-live-actions { grid-auto-rows: minmax(3rem, 1fr); gap: .35rem; }
    .dg-live-act { flex-direction: column; justify-content: center; gap: .2rem; padding: .25rem; text-align: center; }
    .dg-live-act i { width: auto; }
}

/* El campo, con su proporción, lo más grande que quepa (--dg-ratio: largo / ancho). */
.dg-live-field { position: absolute; top: 50%; left: 0; width: 100%; aspect-ratio: var(--dg-ratio); transform: translateY(-50%); cursor: crosshair; }
.dg-live-field > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg-live-field > svg g { stroke: #fff; stroke-opacity: .85; }
.dg-live-field > svg circle[fill="currentColor"] { fill: #fff; }
.dg-live-field.is-waiting { outline: 3px dashed #FCD34D; outline-offset: 4px; border-radius: 2px; }
.dg-live-markers, .dg-live-tokens { position: absolute; inset: 0; pointer-events: none; }
/* Marca de agua: el escudo de cada equipo en la mitad que defiende. */
.dg-live-mark { position: absolute; top: 50%; left: 25%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .14; pointer-events: none; transition: left .3s ease; }
.dg-live-mark.is-rival, .dg-live-field.is-rtl .dg-live-mark.is-own { left: 75%; }
.dg-live-field.is-rtl .dg-live-mark.is-rival { left: 25%; }
.dg-live-mark .dg-crest { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; font-size: 12cqh; object-fit: contain; }
.dg-live-mark.is-own span.dg-crest { background: #0F3D24; color: #fff; }
/* Nuestros jugadores en su puesto: círculo, camiseta o foto, con dorsal y
   nombre. Solo se tocan en «Posiciones» (`.is-swapping`): dos toques y se
   cambian de puesto. */
.dg-live-token { position: absolute; display: flex; flex-direction: column; align-items: center; width: 3.6rem; margin: -.8rem 0 0 -1.8rem; transition: left .3s ease, top .3s ease; }
.dg-live-token-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--dg-kit-shirt); box-shadow: inset 0 0 0 2px var(--dg-kit-trim), 0 1px 3px rgba(0, 0, 0, .45); }
.dg-live-token-number { position: relative; color: var(--dg-kit-number); font-size: .62rem; font-weight: 800; line-height: 1; }
.dg-live-token-name { max-width: 100%; margin-top: .1rem; overflow: hidden; color: #fff; font-size: .56rem; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.dg-live-token.is-shirt .dg-live-token-mark { background: none; box-shadow: none; border-radius: 0; }
.dg-live-token.is-shirt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.dg-live-token.is-shirt path { fill: var(--dg-kit-shirt); stroke: var(--dg-kit-trim); stroke-width: 1.4; stroke-linejoin: round; }
.dg-live-token.is-shirt .dg-live-token-number { top: .1rem; }
.dg-live-token.is-photo .dg-live-token-mark { width: 1.9rem; height: 1.9rem; background: #fff; }
.dg-live-token.is-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dg-live-token.is-photo .dg-live-token-number { position: absolute; right: -.35rem; bottom: -.2rem; min-width: 1rem; padding: .1rem .2rem; border-radius: 50rem; background: var(--dg-kit-shirt); box-shadow: inset 0 0 0 1.5px var(--dg-kit-trim); font-size: .55rem; text-align: center; }
.dg-live-field.is-swapping .dg-live-tokens { pointer-events: auto; }
.dg-live-field.is-swapping { cursor: default; }
.dg-live-field.is-swapping .dg-live-token { cursor: pointer; }
.dg-live-field.is-swapping .dg-live-token-mark { outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: 2px; }
.dg-live-token.is-picked .dg-live-token-mark { outline: 3px solid #FCD34D !important; outline-offset: 2px; }
/* Expulsado (roja o segunda amarilla): sigue en su sitio, apagado, y no se elige para nada (Juan, 23/10). */
.dg-live-token.is-off, .dg-live-pl.is-off { --dg-kit-shirt: #A1A1AA; --dg-kit-trim: #E4E4E7; --dg-kit-number: #fff; }
.dg-live-token.is-off img, .dg-live-pl.is-off img { filter: grayscale(1); opacity: .55; }
.dg-live-token.is-off .dg-live-token-name, .dg-live-pl.is-off .dg-live-pl-name { opacity: .7; }
.dg-live-pl.is-off { cursor: not-allowed; }
.dg-live-dir { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); z-index: 2; padding: .2rem .8rem; border: 0; border-radius: 50rem; background: rgba(15, 61, 36, .7); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.dg-live-dir.is-rtl i { transform: scaleX(-1); }
.dg-live-dot { position: absolute; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border: 2px solid #fff; border-radius: 50%; background: #0F3D24; }
.dg-live-dot.is-rival { background: #C2410C; }
.dg-live-dot.is-goal { width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; background: #F59E0B; }
.dg-live-tap { position: absolute; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border: 3px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 .4rem rgba(255, 255, 255, .18); }
.dg-live-tap.is-end { width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-style: dashed; }
/* «Toca en el campo» (y «Posiciones»), encima de la columna de botones: el campo queda libre entero (Juan, 23/10). */
.dg-live-hint { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem .8rem; border-radius: 1rem; background: #FCD34D; color: #18181B; text-align: center; }
.dg-live-hint[hidden] { display: none; }
.dg-live-hint-title { font-size: clamp(1.1rem, 7cqi, 1.5rem); font-weight: 800; line-height: 1.15; }
.dg-live-hint-point { display: inline-flex; align-items: center; gap: .4rem; font-size: clamp(1.4rem, 10cqi, 2.2rem); }
.dg-live-hint-point.is-right { flex-direction: row-reverse; }
.dg-live-hint-point .fa-hand-pointer { transform: rotate(-90deg); }
.dg-live-hint-point.is-right .fa-hand-pointer { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
    .dg-live-hint-point { animation: dg-live-nudge 1.2s ease-in-out infinite; }
    .dg-live-hint-point.is-right { animation-name: dg-live-nudge-right; }
}
@keyframes dg-live-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-.4rem); } }
@keyframes dg-live-nudge-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.4rem); } }
.dg-live-hint-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .4rem; }
.dg-live-hint-btn { flex: 0 0 auto; height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 50rem; background: #fff; color: #0F3D24; font-size: .85rem; font-weight: 800; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.dg-live-hint-btn.is-icon { width: 2.4rem; padding: 0; }

/* Las preguntas, encima del campo. */
.dg-live-ask { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: #fff; color: #18181B; border-radius: 1rem; box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transform: scale(.98); transition: opacity .15s ease, transform .15s ease; }
.dg-live-ask.is-open { opacity: 1; pointer-events: auto; transform: none; }
.dg-live-sheet-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem .45rem; border-bottom: 1px solid #E4E7E3; }
.dg-live-crumb { flex: 1; min-width: 0; overflow: hidden; font-size: .78rem; color: #52525B; white-space: nowrap; text-overflow: ellipsis; }
/* La pregunta, que no pase desapercibida (Juan, 23/10): en grande, sobre amarillo, y un destello al aparecer. */
.dg-live-q { color: #18181B; font-size: 1.1rem; font-weight: 800; }
.dg-live-q-what { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 50rem; background: rgba(0, 0, 0, .08); color: #3F3F46; font-size: .72rem; font-weight: 700; vertical-align: .15rem; }
.dg-live-ask.is-question .dg-live-sheet-head { padding-block: .6rem; background: #FCD34D; border-bottom-color: #F59E0B; border-radius: 1rem 1rem 0 0; }
.dg-live-ask.is-question .dg-live-q { font-size: 1.3rem; }
.dg-live-ask.is-question .dg-live-close { background: rgba(255, 255, 255, .65); }
@keyframes dg-live-flash { 0% { box-shadow: 0 0 0 0 rgba(252, 211, 77, .95); } 100% { box-shadow: 0 0 0 1.1rem rgba(252, 211, 77, 0); } }
@media (prefers-reduced-motion: no-preference) {
    .dg-live-ask.is-new, .dg-live-hint.is-new { animation: dg-live-flash .6s ease-out 2; }
}
.dg-live-close { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: #EEF1ED; color: #3F3F46; }
.dg-live-back { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #18181B; font-size: .95rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.dg-live-back[hidden] { display: none; }
.dg-live-body { flex: 1; overflow: auto; padding: .55rem .7rem .8rem; overscroll-behavior: contain; }
.dg-live-label { margin: .2rem 0 .4rem; color: #71717A; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dg-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .45rem; }
.dg-live-ev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 3.9rem; padding: .35rem; border: 0; border-radius: .9rem; background: #EEFAF2; color: #0B5E2E; font-size: .76rem; font-weight: 700; line-height: 1.1; text-align: center; }
.dg-live-ev i { font-size: 1.15rem; color: var(--dg-green-600); }
.dg-live-ev small { font-size: .62rem; font-weight: 700; color: #0B5E2E; text-transform: uppercase; }
.dg-live-ev.is-against { background: #FFF1E7; color: #9A3412; }
.dg-live-ev.is-against i { color: #C2410C; }
.dg-live-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .6rem .3rem; padding-top: .45rem; }
.dg-live-pl { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; border: 0; background: none; color: #27272A; font-size: .7rem; font-weight: 700; }
.dg-live-pl-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-live-shirt { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: 50%; background: var(--dg-kit-shirt); color: var(--dg-kit-number); font-size: .95rem; font-weight: 800; box-shadow: inset 0 0 0 3px var(--dg-kit-trim), 0 0 0 1px #D4D4D8; }
.dg-live-pl.is-bench .dg-live-shirt { background: #fff; color: #3F3F46; box-shadow: inset 0 0 0 2px #A1A1AA; }
/* Como en el campo: camiseta o foto con el dorsal en una pastilla (`playerButton`). */
.dg-live-shirt > b { position: relative; font-weight: 800; }
.dg-live-shirt.is-shirt { border-radius: 0; background: none; box-shadow: none; }
.dg-live-shirt.is-shirt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.dg-live-shirt.is-shirt path { fill: var(--dg-kit-shirt); stroke: var(--dg-kit-trim); stroke-width: 1.2; stroke-linejoin: round; }
.dg-live-shirt.is-shirt > b { top: .15rem; font-size: .85rem; }
.dg-live-pl.is-bench .dg-live-shirt.is-shirt { background: none; box-shadow: none; }
.dg-live-pl.is-bench .dg-live-shirt.is-shirt path { fill: #fff; stroke: #A1A1AA; }
.dg-live-shirt.is-photo { background: #fff; box-shadow: 0 0 0 1px #D4D4D8; }
.dg-live-shirt.is-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dg-live-shirt.is-photo > b { position: absolute; right: -.35rem; bottom: -.2rem; min-width: 1.15rem; padding: .1rem .25rem; border-radius: 50rem; background: var(--dg-kit-shirt); box-shadow: inset 0 0 0 1.5px var(--dg-kit-trim); color: var(--dg-kit-number); font-size: .62rem; line-height: 1; text-align: center; }
.dg-live-pl.is-bench .dg-live-shirt.is-photo { background: #fff; box-shadow: 0 0 0 1px #D4D4D8; }
.dg-live-pl.is-bench .dg-live-shirt.is-photo img { opacity: .8; }
/* Goles y tarjetas del jugador en el partido, sobre su ficha (`markBadges`): un balón (con el número si son
   varios) y cada tarjeta, para decidir de un vistazo. */
.dg-live-shirt, .dg-live-token-mark { position: relative; }
.dg-live-marks { position: absolute; top: -.45rem; right: -.6rem; display: flex; align-items: center; gap: .1rem; pointer-events: none; }
.dg-live-marks:empty { display: none; }
.dg-live-mark-goal { display: inline-flex; align-items: center; gap: .1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 50rem; background: #fff; color: #0F3D24; font-size: .65rem; font-weight: 800; line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.dg-live-mark-goal i { font-size: .75rem; }
.dg-live-mark-card { width: .42rem; height: .6rem; border-radius: .08rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 0, 0, .45); transform: rotate(8deg); }
.dg-live-mark-card.is-yellow { background: #FACC15; }
.dg-live-mark-card.is-red { background: #DC2626; }
.dg-live-pl .dg-live-marks { top: -.3rem; right: -.45rem; }
.dg-live-skip { width: 100%; margin-top: .6rem; padding: .45rem; border: 1px dashed #C7CDC5; border-radius: .8rem; background: #fff; color: #52525B; font-size: .8rem; font-weight: 700; }
.dg-live-skip.is-light { border-style: solid; border-color: #E4E7E3; background: #F4F6F3; }
/* «Suplentes», con el banquillo dibujado. */
.dg-live-skip.is-bench { display: flex; align-items: center; justify-content: center; gap: .5rem; border-style: solid; border-color: #C9D6CD; background: #F4F6F3; color: #0F3D24; font-weight: 800; }
.dg-live-skip.is-bench .dg-live-svg { width: 1.4rem; height: 1.4rem; }
.dg-live-skip.is-bench .dg-live-svg.is-wide { width: 2.2rem; height: 1.7rem; }
.dg-live-desc { display: flex; flex-wrap: wrap; gap: .4rem; }
.dg-live-desc button { padding: .45rem .95rem; border: 1px solid #DADFD8; border-radius: 50rem; background: #fff; color: #18181B; font-size: .82rem; font-weight: 700; }
.dg-live-desc button.is-on { border-color: #0F3D24; background: #0F3D24; color: #fff; }
/* Opciones con su icono propio (Juan, 23/10): el dibujo encima y el nombre debajo. */
.dg-live-desc.is-icons { flex-wrap: nowrap; gap: .5rem; }
.dg-live-desc.is-icons > button { flex: 1 1 0; min-width: 0; }
.dg-live-desc.is-icons button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .6rem .8rem .5rem; border-radius: 1rem; }
.dg-live-opt-icon { width: 2.1rem; height: 2.1rem; color: #0F3D24; }
.dg-live-desc button.is-on .dg-live-opt-icon { color: #fff; }
.dg-live-menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.dg-live-menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.dg-live-menu button.is-on { background: #0F3D24; color: #fff; }
.dg-live-menu button.is-on i { color: #4ADE80; }
.dg-live-menu button { display: flex; align-items: center; gap: .55rem; min-height: 3.1rem; padding: .5rem .75rem; border: 0; border-radius: .9rem; background: #F4F6F3; color: #18181B; font-size: .82rem; font-weight: 700; text-align: left; }
.dg-live-menu button i { width: 1.4rem; color: var(--dg-green-600); font-size: 1.05rem; text-align: center; }
.dg-live-timeline { margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.dg-live-timeline li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #EEF1ED; }
.dg-live-timeline li.is-rival .dg-live-min { color: #C2410C; }
.dg-live-timeline li > i { color: #A1A1AA; }
.dg-live-min { min-width: 2.4rem; color: #0B5E2E; font-weight: 800; font-variant-numeric: tabular-nums; }
.dg-live-del { flex: 0 0 auto; height: 1.9rem; min-width: 1.9rem; padding: 0 .5rem; border: 0; border-radius: 50rem; background: #EEF1ED; color: #52525B; font-size: .75rem; font-weight: 700; }
.dg-live-del.is-confirm { background: #DC2626; color: #fff; }
.dg-live-final { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: .3rem 0 .8rem; }
.dg-live-final > div { min-width: 0; max-width: 40%; }
.dg-live-final-sep { font-size: 1.6rem; font-weight: 800; }
/* El minuto por el que se va, si se olvidó empezar (Juan, 23/10). */
.dg-live-start { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.dg-live-num { display: flex; align-items: center; gap: .4rem; }
.dg-live-num b { min-width: 2.2rem; font-size: 2rem; font-weight: 800; text-align: center; }
.dg-live-step { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: #E4E7E3; color: #18181B; font-size: 1.1rem; font-weight: 800; }
.dg-live-btn { min-height: 2.5rem; padding: .4rem 1.1rem; border: 0; border-radius: 50rem; background: #0F3D24; color: #fff; font-size: .85rem; font-weight: 700; }
.dg-live-btn.is-light { background: #EEF1ED; color: #18181B; }
.dg-live-btn.is-white { display: inline-flex; align-items: center; background: #fff; color: #0F3D24; text-decoration: none; }
.dg-live-btn.is-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }

.dg-live-toast { position: absolute; bottom: .4rem; left: 50%; z-index: 5; display: flex; align-items: center; gap: .6rem; max-width: 100%; padding: .4rem .45rem .4rem .9rem; transform: translate(-50%, .6rem); border-radius: 50rem; background: #fff; color: #18181B; font-size: .8rem; font-weight: 700; white-space: nowrap; box-shadow: 0 .6rem 1.8rem -.6rem rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.dg-live-toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* Con una pregunta abierta, el aviso no se ve: la pregunta ya dice lo guardado y no tapa sus botones. */
.dg-live-ask.is-open ~ .dg-live-toast { visibility: hidden; }
.dg-live-toast > i { color: var(--dg-green-600); }
.dg-live-toast > span { overflow: hidden; text-overflow: ellipsis; }
.dg-live-toast button { flex: 0 0 auto; padding: .35rem .9rem; border: 0; border-radius: 50rem; background: #0F3D24; color: #fff; font-size: .8rem; font-weight: 800; }
.dg-live-toast button[hidden] { display: none; }

.dg-live-finished { position: absolute; inset: 3rem 0 0 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(15, 61, 36, .72); }
.dg-live-finished[hidden] { display: none; }
.dg-live-finished-card { padding: 1.5rem 2rem; border-radius: 1.2rem; background: #0F3D24; text-align: center; box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, .6); }
.dg-live-finished-card > i { font-size: 1.6rem; color: #FCD34D; }
.dg-live-finished-score { margin: .2rem 0 .6rem; font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-height: 360px) {
    .dg-live-bar { height: 2.6rem; }
    .dg-live-stage, .dg-live-finished { top: 2.6rem; }
    .dg-live-team { display: none; }
}
@media (max-width: 760px) {
    .dg-live { --dg-live-col: 10rem; }
    .dg-live-act { font-size: clamp(.58rem, 5.6cqi, 1rem); }
    .dg-live-team { display: none; }
}

/* 21. Plan del partido (Panel/GamePlans, fase 7): el rival, las pizarras del
   partido y el balón parado. */
.dg-plan-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) {
    .dg-plan-figures { grid-template-columns: minmax(0, 1fr); }
}
.dg-watch-row { padding: .9rem 1rem; border-radius: .9rem; background: var(--dg-zinc-50, #FAFAFA); box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
/* Los papeles de una jugada de balón parado: el número sale solo, por el orden. */
.dg-roles { counter-reset: dg-role; }
.dg-role-row { display: flex; align-items: center; gap: .75rem; counter-increment: dg-role; }
.dg-role-n, .dg-role-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--dg-orange); color: #FFFFFF; font-weight: 800; font-size: .875rem; }
.dg-role-n::before { content: counter(dg-role); }
.dg-set-piece-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 50rem; background: #DCFCE7; color: #166534; font-size: .75rem; font-weight: 700; }
.dg-set-piece-chip.is-defensive { background: #FEE2E2; color: #991B1B; }
.dg-signal { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: .6rem; background: #EFF6FF; color: #1E40AF; font-size: .8125rem; font-weight: 700; }
/* Cifras del balón parado en el plan del partido. */
.dg-plan-stat { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem .8rem; border-radius: 50rem; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); font-size: .8125rem; color: var(--dg-zinc-700); }
.dg-plan-stat b { font-size: 1rem; color: var(--dg-zinc-900); }
.dg-plan-stat.is-good b { color: #15803D; }
.dg-plan-stat.is-bad b { color: #B91C1C; }
.dg-sheet .dg-plan-piece { box-shadow: none; border: 1px solid var(--dg-zinc-200); break-inside: avoid; }
.dg-sheet-board { break-inside: avoid; }

/* 22. Historial de convocatorias (ficha del jugador y Estadísticas, 20/10). */
.dg-history-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
.dg-history-figure { padding: .8rem .9rem; border-radius: .9rem; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-history-figure.is-injured .fs-4 { color: #B45309; }
.dg-history-figure.is-absent .fs-4 { color: #0369A1; }
.dg-history-figure.is-technical .fs-4 { color: #B91C1C; }
.dg-history-bar { display: flex; gap: 2px; height: .75rem; border-radius: 50rem; overflow: hidden; background: var(--dg-zinc-100); }
.dg-history-bar .is-called { background: #16A34A; }
.dg-history-bar .is-injured { background: #F59E0B; }
.dg-history-bar .is-absent { background: #38BDF8; }
.dg-history-bar .is-technical { background: #EF4444; }
.dg-history-bar .is-out { background: var(--dg-zinc-400); }
.dg-history-chip { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 50rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.dg-history-chip.is-starter { background: #DCFCE7; color: #166534; }
.dg-history-chip.is-bench { background: #F0FDF4; color: #15803D; }
.dg-history-chip.is-injured { background: #FEF3C7; color: #92400E; }
.dg-history-chip.is-absent { background: #E0F2FE; color: #075985; }
.dg-history-chip.is-technical { background: #FEE2E2; color: #991B1B; }
.dg-history-chip.is-out { background: var(--dg-zinc-100); color: var(--dg-zinc-700); }
.dg-history-timeline { list-style: none; padding: 0; margin: 0; }
.dg-history-timeline li { position: relative; padding: 0 0 1rem 1.4rem; margin-left: .4rem; border-left: 2px solid var(--dg-zinc-200); }
.dg-history-timeline li:last-child { padding-bottom: 0; }
.dg-history-timeline li::before { content: ''; position: absolute; left: -.45rem; top: .2rem; width: .8rem; height: .8rem; border-radius: 50%; background: #38BDF8; box-shadow: 0 0 0 3px #FFFFFF; }
.dg-history-timeline li.is-off::before { background: var(--dg-zinc-300); }.dg-history-share { min-width: 10rem; }
.dg-history-shirt { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--dg-orange); color: #FFFFFF; font-size: .75rem; font-weight: 800; }


/* 23. Inicio del equipo, «Día de partido» (Panel/Dashboard, 21/10): las
   tarjetas con su título dentro, el estado sin datos (la gráfica apagada con
   el aviso encima), la preparación del partido, los disponibles, la semana,
   los tramos de goles, el reparto de minutos, la asistencia y las tablas.
   Los colores de las gráficas, los de `dg-results-*` (sección 18). */
/* La tarjeta del partido, a la altura de la preparación: el partido en medio. */
.dg-dash-hero .dg-match-face { margin-top: auto !important; margin-bottom: auto !important; padding: 1.5rem 0; }
.dg-dash-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.5rem 0; }
.dg-dash-card-body { position: relative; padding: 1rem 1.5rem 1.5rem; }
.dg-dash-card.is-flush .dg-dash-card-body { padding: .75rem 0 .5rem; }
.dg-dash-empty { position: relative; min-height: 10rem; }
.dg-dash-ghost { filter: grayscale(1); opacity: .16; pointer-events: none; }
.dg-dash-ghost a { pointer-events: none; }
.dg-dash-empty-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0; padding: 1rem; text-align: center; font-weight: 700; color: var(--dg-zinc-700); }
.dg-dash-empty-note > span:first-child { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--dg-green-50); color: var(--dg-green-700); }
.dg-dash-empty-text { display: grid; justify-items: center; gap: .6rem; }
.dg-dash-insight { margin: 1rem 0 0; padding: .65rem .85rem; border-radius: .75rem; background: var(--dg-green-50); font-size: .8125rem; color: var(--dg-zinc-700); }
.dg-dash-insight .fa-solid { margin-right: .4rem; color: #CA8A04; }

/* Preparación: cuántos pasos, la barra y los pasos (el que toca, en amarillo). */
.dg-dash-prep-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .15rem .6rem; margin-bottom: 1rem; }
.dg-dash-progress { grid-column: 1 / -1; position: relative; height: .5rem; margin-top: .5rem; border-radius: 1rem; background: var(--dg-zinc-100); overflow: hidden; }
.dg-dash-progress::after { content: ""; position: absolute; inset: 0; width: calc(var(--dg-value) * 100%); border-radius: 1rem; background: var(--dg-green); }
.dg-dash-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.dg-dash-steps a, .dg-dash-steps li > span { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border-radius: .75rem; color: var(--dg-zinc-900); }
.dg-dash-steps a:hover { background: var(--dg-zinc-50); }
.dg-dash-step-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--dg-zinc-300); font-size: .8125rem; font-weight: 800; color: var(--dg-zinc-500); }
.dg-dash-steps .is-done .dg-dash-step-mark { border-color: var(--dg-green); background: var(--dg-green); color: #FFFFFF; }
.dg-dash-steps .is-now a, .dg-dash-steps .is-now > span { background: #FEF6DA; }
.dg-dash-steps .is-now .dg-dash-step-mark { border-color: #EAB308; color: #854D0E; }

/* Cifras en cuadros (temporada y rival). */
.dg-dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.dg-dash-tiles.is-3 { grid-template-columns: repeat(3, 1fr); }
.dg-dash-tiles > div { padding: .75rem .85rem; border-radius: .85rem; background: var(--dg-zinc-50); }
.dg-dash-tiles b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.dg-dash-tiles span { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-dash-form { display: inline-flex; gap: .25rem; }
.dg-dash-form i { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: .35rem; font-size: .6875rem; font-style: normal; font-weight: 800; color: #FFFFFF; }
.dg-dash-form .is-won { background: #16A34A; }
.dg-dash-form .is-drawn { background: var(--dg-zinc-400); }
.dg-dash-form .is-lost { background: #DC2626; }

/* Los últimos resultados, en la fila del próximo partido (29/10, el estilo de Alonbalon que le gustó a Juan):
   cada uno, centrado, con los dos escudos y «VS», el rival, el marcador grande en su color y el día. */
.dg-dash-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
/* Sin scroll: lo que no cabe se esconde (custom.js 2y); el título y «Todos», en una línea (30/10). */
.dg-dash-latest .dg-dash-card-head { flex-wrap: nowrap; gap: .5rem; padding-inline: 1rem; }
.dg-dash-latest .dg-dash-card-head > h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-dash-latest .dg-dash-card-head > div { flex-shrink: 0; }
/* «Últimos resultados» si cabe; si no, «Últ. resultados», recortado con «…» si tampoco. */
.dg-dash-latest .dg-dash-card { container-type: inline-size; }
.dg-dash-title-short { display: none; }
@container (max-width: 14rem) {
    .dg-dash-title-long { display: none; }
    .dg-dash-title-short { display: inline; }
}
.dg-dash-fit .dg-dash-card-body:has(> .dg-dash-results) { overflow: hidden; }
.dg-dash-result { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .75rem; border-top: 1px solid var(--dg-zinc-100); color: var(--dg-zinc-900); text-align: center; text-decoration: none; }
.dg-dash-result:first-child { border-top: 0; }
.dg-dash-result:hover { background: var(--dg-zinc-50); color: var(--dg-zinc-900); }
.dg-dash-result-crests { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.dg-dash-result-crests > span:not(.dg-crest) { font-size: .75rem; font-weight: 800; color: var(--dg-zinc-400); }
.dg-dash-result-rival { max-width: 100%; overflow: hidden; font-size: .8125rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dg-dash-result-score { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dg-dash-result.is-won .dg-dash-result-score { color: #15803D; }
.dg-dash-result.is-drawn .dg-dash-result-score { color: var(--dg-zinc-500); }
.dg-dash-result.is-lost .dg-dash-result-score { color: #B91C1C; }
.dg-dash-result-date { font-size: .75rem; color: var(--dg-zinc-500); }

/* La semana: siete días; en el móvil se desliza. */
/* Sin deslizarse de lado (el menú de un día se cortaría): siete columnas o, con poco ancho, un día por línea (30/10). */
.dg-dash-week-box { container-type: inline-size; }
.dg-dash-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
@container (max-width: 44rem) {
    .dg-dash-week { grid-template-columns: 1fr; gap: .35rem; }
    .dg-dash-day { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .5rem; }
    .dg-dash-day-head { justify-content: flex-start; gap: .4rem; margin-bottom: 0; }
}
.dg-dash-day[data-dg-day] { position: relative; }
.dg-dash-day.dg-cal-picked { box-shadow: inset 0 0 0 2px var(--bs-primary); }
.dg-dash-weeknav { display: inline-flex; align-items: center; gap: .35rem; }
.dg-dash-weeknav-label { min-width: 7.5rem; font-size: .875rem; font-weight: 700; text-align: center; color: var(--dg-zinc-700); }
.dg-dash-week .dg-ev { font-size: .75rem; }
.dg-dash-day { min-height: 6rem; padding: .5rem; border-radius: .75rem; background: var(--dg-zinc-50); }
.dg-dash-day.is-past { opacity: .55; }
.dg-dash-day.is-today { background: var(--dg-green-50); box-shadow: inset 0 0 0 2px var(--dg-green); }
.dg-dash-day-head { display: flex; justify-content: space-between; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-dash-day-head b { color: var(--dg-zinc-900); }

/* ¿Cuándo marcamos? En contra a la izquierda, a favor a la derecha. */
.dg-dash-buckets { display: grid; gap: .625rem; }
.dg-dash-bucket { display: grid; grid-template-columns: 1fr 4.5rem 1fr; align-items: center; gap: .5rem; }
.dg-dash-bucket b { text-align: center; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-dash-bucket-bar { position: relative; height: 1.4rem; }
.dg-dash-bucket-bar::before { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--dg-value) * 100%); border-radius: .4rem; }
.dg-dash-bucket-bar.is-for::before { left: 0; background: #16A34A; }
.dg-dash-bucket-bar.is-against::before { right: 0; background: #FCA5A5; }
.dg-dash-bucket-bar i { position: absolute; top: .1rem; font-size: .75rem; font-style: normal; font-weight: 800; }
.dg-dash-bucket-bar.is-for i { left: calc(var(--dg-value) * 100% + .4rem); }
.dg-dash-bucket-bar.is-against i { right: calc(var(--dg-value) * 100% + .4rem); color: #B91C1C; }

/* Reparto de minutos: la media, una raya discontinua sobre las barras. */
.dg-dash-minutes { position: relative; display: grid; gap: .45rem; padding-bottom: 1.25rem; }
.dg-dash-minutes-row { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: .65rem; }
.dg-dash-minutes-bar { position: relative; height: .75rem; border-radius: 1rem; background: var(--dg-zinc-100); }
.dg-dash-minutes-bar i { position: absolute; inset: 0; width: calc(var(--dg-value) * 100%); border-radius: 1rem; background: var(--dg-green); }
.dg-dash-minutes-row.is-low .dg-dash-minutes-bar i { background: #EAB308; }
.dg-dash-minutes-average { position: absolute; top: -.25rem; bottom: 1.1rem; left: calc(8.65rem + (100% - 12.3rem) * var(--dg-average)); border-left: 2px dashed var(--dg-zinc-400); pointer-events: none; }
.dg-dash-minutes-average span { position: absolute; bottom: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .6875rem; font-weight: 700; color: var(--dg-zinc-500); white-space: nowrap; }

/* Asistencia: cada jugador con su foto y su %. */
.dg-dash-attendance th, .dg-dash-attendance td { padding-top: .4rem; padding-bottom: .4rem; }
.dg-dash-attendance th { font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); white-space: nowrap; }
/* El nombre se lleva el sitio que sobra y se recorta con «…»: las cifras se ven siempre (en la
   clasificación, la tabla se desliza de lado si aun así no cabe). */
.dg-dash-attendance td:first-child { max-width: 0; }
.dg-dash-standings td:nth-child(2) { max-width: 0; min-width: 6.5rem; }
.dg-dash-standings th, .dg-dash-standings td { padding-left: .4rem; padding-right: .4rem; }
.dg-dash-standings .ps-4 { padding-left: 1.25rem !important; }
.dg-dash-standings .pe-4 { padding-right: 1.25rem !important; }
.dg-dash-standings th:not(:nth-child(2)) { width: 1%; white-space: nowrap; }

/* Tablas de eventos y resultados. */
.dg-dash-table th { font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); white-space: nowrap; }
.dg-dash-table tbody tr:hover { background: var(--dg-zinc-50); }
.dg-dash-score { display: inline-block; padding: .2rem .55rem; border-radius: .45rem; font-weight: 800; color: #FFFFFF; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-dash-score.is-won { background: #16A34A; }
.dg-dash-score.is-drawn { background: var(--dg-zinc-400); }
.dg-dash-score.is-lost { background: #DC2626; }
.dg-dash-pill { --bs-btn-padding-x: .85rem; --bs-btn-font-weight: 700; --bs-btn-bg: var(--dg-zinc-100); --bs-btn-color: var(--dg-zinc-700); --bs-btn-hover-bg: var(--dg-zinc-200); --bs-btn-active-bg: #0F3D24; --bs-btn-active-color: #FFFFFF; --bs-btn-border-width: 0; }
.dg-dash-pill.active { background: #0F3D24; color: #FFFFFF; }

/* Altos de las filas (Juan, 21/10): las tarjetas «fit» miden lo de su fila (la de «El directo de la
   temporada») y, si no les cabe, se deslizan dentro; las de «La plantilla», como mucho el top 5 de
   «Valoración por jugador». */
.dg-dash-card { display: flex; flex-direction: column; }
.dg-dash-card-body { flex: 1 1 auto; min-height: 0; }
.dg-dash-card-body.is-scroll { overflow-y: auto; }
.dg-dash-fit .dg-dash-card-body { overflow-y: auto; }
.dg-dash-fit .dg-dash-card-body.is-scroll { max-height: 24rem; }
@media (min-width: 1200px) {
    .dg-dash-fit { position: relative; }
    .dg-dash-fit > .dg-dash-card { position: absolute; top: 0; bottom: 0; left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); width: auto; }
    .dg-dash-fit .dg-dash-card-body.is-scroll { max-height: none; }
}
.dg-dash-capped .dg-dash-card-body { max-height: 20rem; overflow-y: auto; }

/* Los grupos del Inicio: el título de cada grupo con lo suyo a la derecha. */
.dg-dash-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }

/* Así va la temporada: cada cifra con su evolución en pequeño y si sube o baja. */
.dg-dash-kpi { display: grid; grid-template-rows: auto auto 1fr auto; padding: 1.1rem 1.25rem; }
.dg-dash-kpi-label { font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-dash-kpi-value { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.dg-dash-kpi-sub { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-dash-kpi-spark { display: block; margin-top: .75rem; min-height: 40px; }
.dg-dash-spark { display: block; width: 100%; height: 40px; }
.dg-dash-spark polyline { fill: none; stroke: var(--dg-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-dash-spark polyline.is-second { stroke: #FCA5A5; }
.dg-dash-spark circle { fill: var(--dg-green); }
.dg-dash-trend { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .8125rem; }
.dg-dash-diff { display: inline-grid; place-items: center; min-width: 2.1rem; padding: .1rem .45rem; border-radius: 50rem; background: var(--dg-zinc-100); color: var(--dg-zinc-600); font-size: .8125rem; font-weight: 800; vertical-align: middle; }
.dg-dash-diff.is-pos { background: #DCFCE7; color: #15803D; }
.dg-dash-diff.is-neg { background: #FEE2E2; color: #B91C1C; }
.dg-dash-trend.is-small { width: 1.2rem; height: 1.2rem; font-size: .625rem; }
.dg-dash-trend.is-up { background: #DCFCE7; color: #15803D; }
.dg-dash-trend.is-down { background: #FEE2E2; color: #B91C1C; }
.dg-dash-trend.is-same { background: var(--dg-zinc-100); color: var(--dg-zinc-500); }

/* La clasificación: nuestra fila y la del rival del próximo partido. */
.dg-dash-standings tr.is-own td { background: var(--dg-green-50); }
.dg-dash-standings tr.is-rival td { background: #FEF2F2; }

/* El directo de la temporada: lo nuestro contra lo del rival. */
.dg-dash-vs { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: .6rem; }
.dg-dash-vs b { text-align: center; font-weight: 800; } .dg-dash-vs b.is-rival { color: #B91C1C; }
.dg-dash-vs-bar { position: relative; height: 1.6rem; border-radius: .5rem; background: #FCA5A5; overflow: hidden; }
.dg-dash-vs-bar i { position: absolute; inset: 0; width: calc(var(--dg-value) * 100%); background: #16A34A; }
.dg-dash-vs-bar em { position: absolute; inset: 0; display: grid; place-items: center; font-size: .75rem; font-style: normal; font-weight: 800; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.dg-dash-rank { width: 1rem; text-align: right; }

@media (max-width: 575.98px) {
    .dg-dash-card-head { padding: 1rem 1rem 0; }
    .dg-dash-card-body { padding: .75rem 1rem 1rem; }
    .dg-dash-minutes-row { grid-template-columns: 6.5rem 1fr 2.75rem; }
    .dg-dash-minutes-average { left: calc(7.15rem + (100% - 10.55rem) * var(--dg-average)); }
}

/* 24. Estadísticas (Panel/Teams/stats, 22/10): los filtros en píldoras, las
   pestañas (las del partido), la temporada en verde bosque, las cifras con su
   evolución, las gráficas propias (jornada a jornada, donuts, barras, el campo
   con los goles), lo mejor del equipo y los récords. Las tarjetas son las del
   Inicio (`panel/dashboard/card`): sin datos, apagadas con el aviso. */
.dg-st-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.dg-st-filter { display: inline-flex; align-items: center; gap: .2rem; padding: .25rem; border-radius: 50rem; background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--dg-zinc-200); }
.dg-st-filter-label { padding: 0 .5rem 0 .75rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-st-filter-option { display: inline-flex; align-items: center; border: 0; border-radius: 50rem; padding: .35rem .85rem; background: transparent; font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-700); text-decoration: none; white-space: nowrap; }
.dg-st-filter-option:hover { background: var(--dg-zinc-50); color: var(--dg-zinc-900); }
.dg-st-filter-option.active, .dg-st-filter-option.active:hover { background: #0F3D24; color: #FFFFFF; }
.dg-st-filter-option:disabled { opacity: .5; }
/* Las pestañas, como en la maqueta (Juan, 22/10): con su icono y la activa subrayada en verde. */
.dg-st-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--dg-zinc-200); scrollbar-width: none; scroll-behavior: smooth; }
.dg-st-tabs > a { display: inline-flex; align-items: center; margin-bottom: -1px; padding: .85rem 1.1rem; border-bottom: 3px solid transparent; font-weight: 700; color: var(--dg-zinc-500); text-decoration: none; white-space: nowrap; }
.dg-st-tabs > a:hover { color: var(--dg-zinc-900); }
.dg-st-tabs > a.active { border-bottom-color: #1DB954; color: #0F3D24; }
.dg-st-tabs > a i { font-size: .9em; }
.dg-st-tabs > a .dg-own-icon { display: inline-grid; place-items: center; }
.dg-st-tabs > a .dg-own-icon svg { width: 1.15em; height: 1.15em; }
.dg-st-tabs.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.dg-st-tabs.is-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }

.dg-st-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1.25rem; background: #0F3D24; color: #FFFFFF; }
.dg-st-hero::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border: 2px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none; }
.dg-st-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
.dg-st-chip { flex-shrink: 0; padding: .25rem .7rem; border-radius: 50rem; background: #1DB954; color: #0B2A18; font-weight: 800; }
.dg-st-hero-record { display: flex; align-items: baseline; gap: .6rem; font-size: 4.5rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.dg-st-hero-record i { font-style: normal; font-size: 2.5rem; color: #1DB954; }
.dg-st-hero-legend { display: flex; gap: 1.4rem; margin-top: -.6rem; font-size: .75rem; color: rgba(255, 255, 255, .65); }
.dg-st-hero-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0; }
.dg-st-hero-nums div { padding: .6rem .75rem; border-radius: .75rem; background: rgba(255, 255, 255, .07); }
.dg-st-hero-nums dt { font-size: .6875rem; font-weight: 600; color: rgba(255, 255, 255, .65); }
.dg-st-hero-nums dd { margin: 0; font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.dg-st-hero-pos { display: grid; gap: .35rem; font-size: .75rem; color: rgba(255, 255, 255, .65); }
.dg-st-posline { width: 100%; height: 70px; }
.dg-st-hero-empty { margin: 0; padding: .75rem; border-radius: .75rem; background: rgba(255, 255, 255, .05); font-size: .8125rem; color: rgba(255, 255, 255, .7); }
.dg-st-forms { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.dg-st-forms > .dg-st-hero-empty { flex: 1; }
.dg-st-form { flex: 1 0 2.6rem; max-width: 4.5rem; display: grid; justify-items: center; gap: .1rem; padding: .45rem .2rem; border-radius: .7rem; background: rgba(255, 255, 255, .07); color: #FFFFFF; text-decoration: none; }
.dg-st-form:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.dg-st-form b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .75rem; }
.dg-st-form.is-won b { background: #1DB954; color: #0B2A18; }
.dg-st-form.is-drawn b { background: #A1A1AA; }
.dg-st-form.is-lost b { background: #EF4444; }
.dg-st-form span { font-size: .8125rem; font-weight: 800; }
.dg-st-form small { font-size: .625rem; font-weight: 700; color: rgba(255, 255, 255, .6); }

.dg-st-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; align-content: start; column-gap: .9rem; padding: 1.1rem 1.25rem; }
.dg-st-kpi.is-green { background: var(--dg-green-50); }
.dg-st-kpi-icon { grid-row: 1 / 4; display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dg-green-50); color: var(--dg-green-700); }
.dg-st-kpi.is-green .dg-st-kpi-icon { background: #1DB954; color: #FFFFFF; }
.dg-st-kpi-label { font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-st-kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.dg-st-kpi-sub { font-size: .75rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-st-kpi-bars { grid-column: 1 / -1; align-self: end; display: flex; align-items: flex-end; gap: 4px; height: 3.2rem; margin-top: 1rem; }
.dg-st-kpi-bars i { flex: 1; max-width: 2.5rem; border-radius: 4px 4px 2px 2px; background: #1DB954; opacity: .85; }
.dg-st-kpi-bars i:last-child { opacity: 1; box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px #1DB954; }
.dg-st-kpi-bars.is-rival i { background: #FCA5A5; }
.dg-st-kpi-bars.is-rival i:last-child { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px #FCA5A5; }

.dg-st-chart { display: block; width: 100%; height: auto; }
.dg-st-axis { font-size: 11px; font-weight: 600; fill: var(--dg-zinc-500); }
.dg-st-axis.is-strong { font-weight: 800; fill: var(--dg-zinc-800); }
.dg-st-chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-st-chart-legend i { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; }
.dg-st-chart-legend i.is-own { background: #FFFFFF; box-shadow: inset 0 0 0 2px #0F3D24; }

.dg-st-side + .dg-st-side { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dg-zinc-100); }
.dg-st-side-head { display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.dg-st-side-head i { color: var(--dg-green-700); }
.dg-st-side-head span { margin-left: auto; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-st-wdl { display: flex; gap: 3px; height: 1.6rem; margin: .6rem 0; border-radius: .5rem; overflow: hidden; }
.dg-st-wdl span { display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #FFFFFF; }
.dg-st-wdl .is-won { background: #1DB954; }
.dg-st-wdl .is-drawn { background: #A1A1AA; }
.dg-st-wdl .is-lost { background: #EF4444; }
.dg-st-side-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.dg-st-side-nums dt { font-size: .6875rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-st-side-nums dd { margin: 0; font-size: 1.15rem; font-weight: 800; }

.dg-st-halves { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.dg-st-halves div { padding: .6rem .8rem; border-radius: .75rem; background: var(--dg-zinc-50); }
.dg-st-halves span { display: block; font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-st-halves b { font-size: 1.35rem; font-weight: 800; }
.dg-st-halves.is-big { margin-top: 0; }
.dg-st-halves.is-big b { font-size: 2.4rem; }
.dg-st-halves small { display: block; font-size: .75rem; color: var(--dg-zinc-500); }

.dg-st-donut-row { display: flex; align-items: center; gap: 1.25rem; }
.dg-st-donut-row.is-col { flex-direction: column; align-items: stretch; }
.dg-st-donut { flex-shrink: 0; width: 140px; height: 140px; margin: 0 auto; }
.dg-st-donut-value { font-size: 26px; font-weight: 800; fill: var(--dg-zinc-900); }
.dg-st-legend { flex: 1; display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.dg-st-legend li { display: grid; grid-template-columns: auto 1fr auto 2.6rem; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; }
.dg-st-legend i { width: .75rem; height: .75rem; border-radius: 3px; }
.dg-st-legend span { text-align: right; font-size: .75rem; color: var(--dg-zinc-500); }

.dg-st-pitch { display: block; width: 100%; height: auto; border-radius: .75rem; }

.dg-st-top { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 1.1rem; text-align: center; }
.dg-st-top-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-st-top-label i { color: var(--dg-green-700); }
.dg-st-top .dg-photo { box-shadow: 0 0 0 4px var(--dg-green-50); }
.dg-st-top-name { font-size: 1.05rem; }
.dg-st-top-value { font-size: 1.5rem; font-weight: 800; color: #0F3D24; }
.dg-st-top-value small { font-size: .75rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-st-top-empty { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--dg-zinc-100); color: var(--dg-zinc-400); font-size: 1.25rem; }

.dg-st-record { display: flex; align-items: center; gap: .85rem; height: 100%; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--dg-zinc-200); }
.dg-st-record .dg-st-kpi-icon { grid-row: auto; }
.dg-st-record b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.dg-st-record small { font-size: .75rem; color: var(--dg-zinc-500); }

.dg-st-mini { display: grid; gap: 2px; width: 6rem; margin-bottom: .2rem; }
.dg-st-mini i { display: block; height: .35rem; border-radius: 1rem; background: #1DB954; }
.dg-st-mini i.is-rival { background: #FCA5A5; }
.dg-st-rivals { display: grid; gap: .75rem; }
.dg-st-rivals > div { display: flex; align-items: center; gap: .75rem; }

.dg-st-vs-head { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .75rem; font-weight: 800; color: var(--dg-zinc-500); }
.dg-st-vs { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; gap: .2rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--dg-zinc-100); }
.dg-st-vs > b { font-size: 1.15rem; }
.dg-st-vs-name { text-align: center; font-size: .8125rem; font-weight: 700; }
.dg-st-vs-name i { color: var(--dg-green-700); }
.dg-st-vs-name small { display: block; font-size: .6875rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-st-vs-bars { grid-column: 1 / -1; display: flex; height: .4rem; }
.dg-st-vs-bars i { display: block; height: 100%; margin-left: auto; border-radius: 1rem 0 0 1rem; background: #1DB954; }
.dg-st-vs-bars i.is-rival { margin-left: 0; margin-right: auto; border-radius: 0 1rem 1rem 0; background: #FCA5A5; }

.dg-st-hbars { display: grid; gap: .55rem; }
.dg-st-hbars > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(3rem, 1fr) 1.75rem; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; }
.dg-st-hbars i { position: relative; height: .7rem; border-radius: 1rem; background: var(--dg-zinc-100); }
.dg-st-hbars i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--dg-w); border-radius: 1rem; background: #1DB954; }
.dg-st-hbars b { text-align: right; }

.dg-st-sort { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font: inherit; color: inherit; white-space: nowrap; }
.dg-st-sort i { font-size: .7em; opacity: .4; }
[aria-sort="ascending"] .dg-st-sort i, [aria-sort="descending"] .dg-st-sort i { opacity: 1; color: var(--dg-green-700); }
.dg-st-minbar { display: block; width: 6rem; height: .4rem; margin-bottom: .2rem; border-radius: 1rem; background: var(--dg-zinc-100); }
.dg-st-minbar i { display: block; height: 100%; border-radius: 1rem; background: #1DB954; }
.dg-st-rate { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 3px solid #1DB954; border-radius: 50%; font-size: .8125rem; font-weight: 800; }
.dg-st-card { display: inline-grid; place-items: center; width: 1.1rem; height: 1.5rem; margin: 0 .1rem; border-radius: 3px; font-size: .6875rem; font-weight: 800; }
.dg-st-card.is-yellow { background: #FACC15; color: #422006; }
.dg-st-card.is-red { background: #DC2626; color: #FFFFFF; }

.dg-st-sessions { display: flex; align-items: flex-end; gap: .5rem; height: 12rem; overflow-x: auto; }
.dg-st-sess { flex: 1 0 2.4rem; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: .25rem; height: 100%; color: inherit; text-decoration: none; }
.dg-st-sess-bar { position: relative; width: 2.2rem; height: 100%; overflow: hidden; border-radius: .6rem; background: var(--dg-zinc-100); }
.dg-st-sess-bar i { position: absolute; inset: auto 0 0; border-radius: .6rem; background: #1DB954; }
.dg-st-sess b { font-size: .8125rem; }
.dg-st-sess small { font-size: .6875rem; color: var(--dg-zinc-500); white-space: nowrap; }
.dg-st-crest-ghost { flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--dg-zinc-300); }
.dg-st-line-ghost { height: .75rem; border-radius: 1rem; background: var(--dg-zinc-300); }
@media (max-width: 575.98px) {
    .dg-st-filter { flex-wrap: wrap; border-radius: 1rem; }
    .dg-st-hero-record { font-size: 3.5rem; }
    .dg-st-hero-nums { grid-template-columns: 1fr 1fr; }
    .dg-st-kpi-value { font-size: 1.5rem; }
}

/* 25. Clasificación (Panel/Competitions, 22/10): la tabla con su pestaña
   General · En casa · Fuera, nuestra fila y la del próximo rival marcadas, lo
   que sube o baja cada equipo, los puntos con su ajuste y la forma (G/E/P);
   la jornada con la tira de todas; la evolución y lo mejor de la liga. */
.dg-cl-switch { display: inline-flex; gap: .2rem; padding: .25rem; border-radius: 50rem; background: var(--dg-zinc-100); }
.dg-cl-switch .nav-link { border-radius: 50rem; padding: .35rem .9rem; font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-600); }
.dg-cl-switch .nav-link.active { background: var(--bs-body-bg); color: #0F3D24; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.dg-cl-table tr.is-own td { background: var(--dg-green-50); }
.dg-cl-table tr.is-own td:first-child { box-shadow: inset 4px 0 0 #1DB954; }
.dg-cl-table tr.is-rival td { background: #FEF2F2; }
.dg-cl-table tr.is-rival td:first-child { box-shadow: inset 4px 0 0 #F87171; }
.dg-cl-pos { display: inline-block; min-width: 1.2rem; }
.dg-cl-move { display: inline-flex; align-items: center; gap: .1rem; margin-left: .25rem; font-size: .75rem; font-weight: 800; color: var(--dg-zinc-400); }
.dg-cl-move:not(.is-up):not(.is-down) { min-width: .9rem; justify-content: center; font-size: .875rem; }
.dg-cl-move.is-up { color: #16A34A; }
.dg-cl-move.is-down { color: #DC2626; }
.dg-cl-tag { display: inline-block; margin-top: .1rem; padding: .05rem .5rem; border-radius: 50rem; background: #FEE2E2; color: #B91C1C; font-size: .6875rem; font-weight: 800; white-space: nowrap; }
.dg-cl-pts { display: inline-flex; align-items: center; gap: .3rem; font-size: .9375rem; font-weight: 800; color: var(--dg-zinc-900); }
.dg-cl-table td.text-center { color: var(--dg-zinc-600); }
.dg-cl-table th.text-center, .dg-cl-table td.text-center { padding-left: .4rem; padding-right: .4rem; }
.dg-cl-adjust { display: inline-grid; place-items: center; padding: 0 .3rem; border-radius: 50rem; background: #FEE2E2; color: #991B1B; font-size: .6875rem; font-weight: 800; }
.dg-cl-adjust.is-big { flex-shrink: 0; min-width: 2.6rem; padding: .3rem .5rem; font-size: .875rem; }
.dg-cl-form { display: inline-flex; gap: 3px; }
.dg-cl-form i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: .625rem; font-style: normal; font-weight: 800; color: #FFFFFF; }
.dg-cl-form .is-won { background: #1DB954; }
.dg-cl-form .is-drawn { background: #A1A1AA; }
.dg-cl-form .is-lost { background: #EF4444; }
.dg-cl-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 1rem 1.5rem; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-cl-legend i { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; }
.dg-cl-legend i.is-own { background: #1DB954; }
.dg-cl-legend i.is-rival { background: #F87171; }
.dg-cl-days { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.dg-cl-arrow { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dg-zinc-100); color: var(--dg-zinc-700); text-decoration: none; }
.dg-cl-arrow:hover { background: var(--dg-zinc-200); color: var(--dg-zinc-900); }
.dg-cl-arrow.is-off { opacity: .35; }
.dg-cl-strip { display: flex; flex: 1; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.dg-cl-day { flex-shrink: 0; display: grid; place-items: center; min-width: 2.4rem; padding: .3rem .5rem; border-radius: 50rem; background: var(--dg-zinc-50); color: var(--dg-zinc-400); font-size: .75rem; font-weight: 800; text-decoration: none; }
.dg-cl-day.is-played { color: var(--dg-zinc-700); }
.dg-cl-day:hover { background: var(--dg-zinc-100); }
.dg-cl-day.active { background: #0F3D24; color: #FFFFFF; }
.dg-cl-matches { display: grid; gap: .5rem; }
.dg-cl-match { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; padding: .7rem .75rem; border-radius: .9rem; background: var(--dg-zinc-50); color: inherit; font-size: .8125rem; font-weight: 700; text-decoration: none; }
.dg-cl-match.is-own { padding-right: 2rem; background: var(--dg-green-50); box-shadow: inset 0 0 0 1px #BBF7D0; }
.dg-cl-match.is-own:hover { box-shadow: inset 0 0 0 1px #1DB954; color: inherit; }
.dg-cl-side { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; text-align: right; line-height: 1.2; }
.dg-cl-side.is-away { justify-content: flex-start; text-align: left; }
.dg-cl-side .dg-crest { width: 1.8rem; height: 1.8rem; font-size: .625rem; }
.dg-cl-score { display: flex; align-items: center; justify-content: center; min-width: 3.4rem; padding: .25rem .5rem; border-radius: .6rem; background: #0F3D24; color: #FFFFFF; font-weight: 800; white-space: nowrap; }
.dg-cl-score i { margin: 0 .2rem; font-style: normal; opacity: .6; }
.dg-cl-score.is-pending { background: var(--bs-body-bg); color: var(--dg-zinc-500); font-size: .75rem; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-cl-report { position: absolute; right: .75rem; color: #0F3D24; }
.dg-cl-key { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 700; }
.dg-cl-key i { width: .8rem; height: .8rem; border-radius: 50%; }
.dg-cl-versus { max-width: 14rem; }
.dg-cl-best { display: grid; justify-items: center; align-content: start; gap: .4rem; padding: 1.1rem; text-align: center; }
.dg-cl-best.is-own { background: var(--dg-green-50); }
.dg-cl-best .dg-crest { width: 3rem; height: 3rem; margin: .25rem 0; font-size: .9rem; box-shadow: none; }
.dg-cl-best-name { font-size: 1rem; }
.dg-cl-best-value { font-size: 1.15rem; font-weight: 800; color: #0F3D24; }
.dg-cl-edit { display: grid; grid-template-columns: minmax(0, 1fr) 4rem auto 4rem minmax(0, 1fr); align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; }
.dg-cl-adjustment { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .75rem; background: var(--dg-zinc-50); }
@media (max-width: 575.98px) {
    .dg-cl-table td:nth-child(2) { max-width: 0; }
    .dg-cl-table th, .dg-cl-table td { padding-left: .35rem; padding-right: .35rem; }
    .dg-cl-table .ps-4 { padding-left: 1rem !important; }
    .dg-cl-best { padding: .9rem .6rem; }
    .dg-cl-best-value { font-size: 1rem; }
}
/* Clasificación: distancias, lo que nos queda, cifras de la liga y cuadro de resultados (22/10) */
.dg-cl-dg { font-weight: 700; color: var(--dg-zinc-500); }
.dg-cl-dg.is-pos { color: #16A34A; }
.dg-cl-dg.is-neg { color: #DC2626; }
.dg-cl-left { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: .9rem; background: var(--dg-zinc-50); color: inherit; font-size: .8125rem; text-decoration: none; }
.dg-cl-left:hover { background: var(--dg-green-50); color: inherit; }
.dg-cl-left .dg-crest { flex-shrink: 0; width: 2rem; height: 2rem; font-size: .625rem; }
.dg-cl-left-day { flex-shrink: 0; display: grid; justify-items: center; min-width: 3rem; line-height: 1.15; }
.dg-cl-left-day small { font-size: .6875rem; color: var(--dg-zinc-500); }
.dg-cl-left-pos { flex-shrink: 0; display: grid; place-items: center; min-width: 2.2rem; padding: .2rem .45rem; border-radius: .5rem; background: #0F3D24; color: #FFFFFF; font-weight: 800; }
.dg-cl-who { height: 2.1rem; margin-top: 0; }
.dg-cl-who span { padding: 0 .4rem; white-space: nowrap; overflow: hidden; }
.dg-cl-figs { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; }
.dg-cl-grid { width: calc(100% - 2rem); border-collapse: separate; border-spacing: 3px; margin: .5rem 1rem 1rem; font-size: .75rem; }
.dg-cl-grid th { font-weight: 700; }
.dg-cl-grid thead th { padding: 0 0 .25rem; text-align: center; }
.dg-cl-grid tbody th { max-width: 11rem; padding-right: .6rem; white-space: nowrap; }
.dg-cl-grid .dg-crest { flex-shrink: 0; width: 1.6rem; height: 1.6rem; font-size: .5625rem; }
.dg-cl-grid-corner span { display: block; font-size: .625rem; font-weight: 600; color: var(--dg-zinc-400); text-align: left; }
.dg-cl-grid td { padding: 0; }
.dg-cl-grid td.is-self { background: repeating-linear-gradient(135deg, var(--dg-zinc-100) 0 4px, transparent 4px 8px); border-radius: .4rem; }
.dg-cl-cell { display: grid; place-items: center; min-width: 2.4rem; height: 1.9rem; border-radius: .4rem; background: var(--dg-zinc-50); font-weight: 800; white-space: nowrap; }
.dg-cl-cell.is-won { background: #DCFCE7; color: #166534; }
.dg-cl-cell.is-drawn { background: var(--dg-zinc-100); color: var(--dg-zinc-700); }
.dg-cl-cell.is-lost { background: #FEE2E2; color: #991B1B; }
.dg-cl-grid tr.is-own th, .dg-cl-grid thead th.is-own { color: #0F3D24; }
.dg-cl-grid tr.is-own th > span { padding: .2rem .4rem; border-radius: .5rem; background: var(--dg-green-50); box-shadow: inset 3px 0 0 #1DB954; }
.dg-cl-grid tr.is-own .dg-cl-cell.is-empty, .dg-cl-grid .dg-cl-cell.is-empty.is-own-col { background: var(--dg-green-50); }
@media (max-width: 575.98px) {
    .dg-cl-dist { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .85rem 1rem; }
    .dg-cl-dist .dg-st-kpi-icon { width: 2rem; height: 2rem; font-size: .8rem; }
    .dg-cl-dist b { font-size: 1.15rem; }
    .dg-cl-grid-name { display: none; }
    .dg-cl-figs { grid-template-columns: 1fr; gap: .75rem; }
}
/* Clasificación: los resultados de la jornada se escriben ahí mismo y se guardan solos (22/10, custom.js 2aa) */
.dg-cl-match.is-edit { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .6rem .75rem; transition: box-shadow .2s ease; }
.dg-cl-line { display: flex; align-items: center; gap: .6rem; margin: 0; cursor: text; }
.dg-cl-line .dg-crest { flex-shrink: 0; width: 1.8rem; height: 1.8rem; font-size: .625rem; }
.dg-cl-line > .text-truncate { flex: 1; }
.dg-cl-line .form-control { flex-shrink: 0; width: 2.75rem; padding: .3rem .2rem; border-radius: .6rem; text-align: center; font-weight: 800; -moz-appearance: textfield; }
.dg-cl-line .form-control::-webkit-outer-spin-button, .dg-cl-line .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-cl-match.is-saving { opacity: .7; }
.dg-cl-match.is-saved { box-shadow: inset 0 0 0 1px #86EFAC; }
.dg-cl-match.is-error { box-shadow: inset 0 0 0 1px #F87171; }
.dg-cl-saved { min-height: 1.2rem; margin: 0; font-size: .75rem; font-weight: 700; color: #16A34A; text-align: center; }
.dg-cl-saved.is-error { color: #DC2626; }
/* La liga a mano (25/10): sin liga, cómo montarla; sus equipos y nuestros partidos al crearla; en la jornada,
   añadir un partido de los demás, quitarlo y abrir la siguiente. */
.dg-cl-choice { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.75rem; border-radius: 1.25rem; background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--dg-zinc-200); }
.dg-cl-choice-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--dg-green-50); color: var(--dg-green-700); font-size: 1.35rem; }
.dg-cl-choice-tag { background: var(--dg-green-50); color: var(--dg-green-800); }
.dg-cl-choice ul { display: grid; gap: .25rem; margin: 0; padding-left: 1.1rem; font-size: .875rem; color: var(--dg-zinc-600); }
.dg-cl-choice .btn { align-self: flex-start; margin-top: auto; }
.dg-cl-ghost { position: relative; }
.dg-cl-ghost table { opacity: .35; filter: grayscale(1); }
.dg-cl-ghost-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; text-align: center; font-weight: 700; color: var(--dg-zinc-600); }
.dg-cl-team-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: .9rem; background: var(--dg-zinc-50); }
.dg-cl-team-row.is-own { background: var(--dg-green-50); }
.dg-cl-team-row .dg-crest { flex-shrink: 0; width: 2.1rem; height: 2.1rem; font-size: .7rem; }
.dg-cl-team-row .form-control { padding-left: 0; border: 0; background: transparent; box-shadow: none; font-weight: 700; }
.dg-cl-team-new { --dg-crest-bg: var(--dg-zinc-300); }
.dg-cl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.dg-cl-chips button { padding: .3rem .8rem; border: 0; border-radius: 50rem; background: var(--dg-zinc-100); font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-700); }
.dg-cl-chips button:hover { background: var(--dg-green-50); color: var(--dg-green-700); }
.dg-cl-game { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .9rem; background: var(--dg-zinc-50); font-size: .875rem; }
.dg-cl-game label { cursor: pointer; }
.dg-cl-game small { color: var(--dg-zinc-500); }
.dg-cl-game .form-control { width: 3.6rem; text-align: center; }
.dg-cl-day-new { flex-shrink: 0; display: grid; place-items: center; min-width: 2.4rem; padding: .3rem .5rem; border: 2px dashed var(--dg-zinc-300); border-radius: 50rem; color: var(--dg-zinc-500); font-size: .75rem; font-weight: 800; text-decoration: none; }
.dg-cl-day-new:hover { border-color: var(--dg-green-600); color: var(--dg-green-700); }
.dg-cl-remove { position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dg-zinc-400); }
.dg-cl-remove:hover { background: #FEE2E2; color: #B91C1C; }
.dg-cl-match.is-edit:has(.dg-cl-remove) { padding-right: 2.2rem; }
.dg-cl-add { display: grid; gap: .5rem; padding: .75rem; border: 2px dashed var(--dg-zinc-200); border-radius: .9rem; }
.dg-cl-add-line { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem; gap: .5rem; }
.dg-cl-free { margin: 0; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-cl-free b { color: var(--dg-zinc-700); }

/* 26. Plantilla (Panel/Players, 22/10): las cifras de arriba, la barra y la
   tarjeta «cromo» de cada jugador (verde bosque con el dorsal grande de fondo
   y el color de su línea); en el móvil, una por fila, en horizontal. */
.dg-sq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.dg-sq-kpi { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: 1rem 1.15rem; border-radius: 1rem; background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--dg-zinc-200); }
.dg-sq-kpi-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .35rem; border-radius: 50%; background: var(--dg-green-50); color: var(--dg-green-700); }
.dg-sq-kpi-label { font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-sq-kpi > b { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.dg-sq-kpi > b small { font-size: .8rem; font-weight: 700; color: var(--dg-zinc-500); }
.dg-sq-kpi-sub { font-size: .75rem; color: var(--dg-zinc-500); }
.dg-sq-kpi.is-lines { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem 2.5rem; background: #0F3D24 repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 40px, transparent 40px 80px); color: #FFFFFF; box-shadow: none; }
.dg-sq-kpi.is-lines > div:first-child { grid-row: span 2; display: flex; flex-direction: column; }
.dg-sq-kpi.is-lines .dg-sq-linebar { margin: 0; }
.dg-sq-linekey b { color: #FFFFFF; }
.dg-sq-kpi.is-lines .dg-sq-kpi-label, .dg-sq-kpi.is-lines b small { color: rgba(255, 255, 255, .7); }
.dg-sq-linebar { display: flex; gap: 3px; height: 1.6rem; margin: .6rem 0 .5rem; border-radius: .5rem; overflow: hidden; }
.dg-sq-linebar span { display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #0F3D24; background: var(--dg-sq-line); }
.dg-sq-linekey { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .6875rem; color: rgba(255, 255, 255, .75); }
.dg-sq-linekey i { display: inline-block; width: .6rem; height: .6rem; margin-right: .3rem; border-radius: 2px; background: var(--dg-sq-line); }
.dg-sq-linebar .is-goalkeeper, .dg-sq-linekey .is-goalkeeper, .dg-sq-card.is-goalkeeper { --dg-sq-line: #FCD34D; }
.dg-sq-linebar .is-defender, .dg-sq-linekey .is-defender, .dg-sq-card.is-defender { --dg-sq-line: #93C5FD; }
.dg-sq-linebar .is-midfielder, .dg-sq-linekey .is-midfielder, .dg-sq-card.is-midfielder { --dg-sq-line: #86EFAC; }
.dg-sq-linebar .is-forward, .dg-sq-linekey .is-forward, .dg-sq-card.is-forward { --dg-sq-line: #FDA4AF; }
.dg-sq-card.is-none { --dg-sq-line: #D4D4D8; }
.dg-sq-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.dg-sq-sort { width: auto; max-width: 11rem; padding-right: 2rem; }
.dg-sq-filterrow { display: flex; align-items: center; gap: .75rem; min-width: 0; max-width: 100%; }
.dg-sq-filterrow .dg-sq-lines { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dg-sq-filterrow .dg-sq-lines::-webkit-scrollbar { display: none; }
.dg-sq-sortbox { flex-shrink: 0; }
.dg-sq-group { margin-bottom: 1.75rem; }
.dg-sq-group-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; font-size: 1rem; font-weight: 800; }
.dg-sq-group-title small { font-weight: 700; color: var(--dg-zinc-400); }
.dg-sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.dg-sq-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.1rem; background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--dg-zinc-200), 0 1px 2px rgba(0, 0, 0, .04); transition: transform .15s ease, box-shadow .15s ease; }
.dg-sq-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--dg-zinc-200), 0 10px 24px -12px rgba(15, 61, 36, .35); }
.dg-sq-top { position: relative; display: flex; align-items: flex-end; height: 6.2rem; padding: 0 1rem; background: #0F3D24 repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 26px, transparent 26px 52px); text-decoration: none; }
.dg-sq-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--dg-sq-line); }
.dg-sq-top-bg { position: absolute; inset: 0; overflow: hidden; }
.dg-sq-bignum { position: absolute; right: .5rem; top: -1.3rem; font-size: 6.5rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; color: rgba(255, 255, 255, .08); }
.dg-sq-photo { position: relative; z-index: 1; margin-bottom: -1.9rem; }
.dg-sq-photo .dg-photo { width: 4.6rem; height: 4.6rem; font-size: 1.25rem; object-fit: cover; box-shadow: 0 0 0 4px var(--bs-body-bg), 0 0 0 6px var(--dg-sq-line); }
.dg-sq-shirt { position: absolute; right: -.4rem; bottom: .1rem; display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: .5rem; background: #0F3D24; color: #FFFFFF; font-size: .75rem; font-weight: 800; box-shadow: 0 0 0 2px var(--bs-body-bg); }
.dg-sq-rating { position: absolute; top: .7rem; right: .7rem; }
.dg-sq-rating .dg-rating-ring-track { stroke: rgba(255, 255, 255, .15); }
.dg-sq-rating .dg-rating-ring text { fill: #FFFFFF; font-weight: 800; }
.dg-sq-rating.is-empty { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 3px solid rgba(255, 255, 255, .15); border-radius: 50%; color: rgba(255, 255, 255, .5); font-weight: 800; }
.dg-sq-body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 2.2rem 1rem .9rem; }
.dg-sq-name { font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: var(--dg-zinc-900); text-decoration: none; }
.dg-sq-name:hover { color: #0F3D24; }
.dg-sq-name small { font-size: .8rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-sq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-sq-state { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .15rem .55rem; border-radius: 50rem; font-size: .6875rem; font-weight: 800; }
.dg-sq-state.is-ok { background: var(--dg-green-50); color: #166534; }
.dg-sq-state.is-injured { background: #FFEDD5; color: #9A3412; }
.dg-sq-state.is-absent { background: #FEE2E2; color: #991B1B; }
.dg-sq-state.is-former { background: var(--dg-zinc-100); color: var(--dg-zinc-600); }
.dg-sq-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin: .35rem 0 0; padding: .6rem 0; border-top: 1px solid var(--dg-zinc-100); border-bottom: 1px solid var(--dg-zinc-100); text-align: center; }
.dg-sq-nums dt { font-size: .625rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-sq-nums dd { margin: 0; font-size: 1.2rem; font-weight: 800; }
.dg-sq-nums dd small { font-size: .7rem; color: var(--dg-zinc-400); }
.dg-sq-bar-label { display: flex; justify-content: space-between; gap: .5rem; margin-top: .35rem; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-sq-bar-label b { color: var(--dg-zinc-900); }
.dg-sq-bar { height: .45rem; margin-top: .25rem; border-radius: 50rem; background: var(--dg-zinc-100); overflow: hidden; }
.dg-sq-bar span { display: block; height: 100%; border-radius: 50rem; background: #1DB954; }
.dg-sq-bar.is-low span { background: #FACC15; }
/* La tarjeta de la Plantilla (23/10): la ficha en tres datos y quién tiene acceso a la app. */
.dg-sq-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem .5rem; margin: .35rem 0 0; padding: .6rem 0; border-top: 1px solid var(--dg-zinc-100); border-bottom: 1px solid var(--dg-zinc-100); }
.dg-sq-facts dt { font-size: .625rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-sq-facts dd { margin: 0; font-size: .875rem; font-weight: 800; }
.dg-sq-nick { display: block; font-size: .8125rem; font-weight: 600; color: var(--dg-zinc-500); }
.dg-sq-access { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; white-space: nowrap; }
.dg-sq-access > span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; font-weight: 600; color: var(--dg-zinc-500); }
.dg-sq-access > span.is-on { color: #166534; }
.dg-sq-invite { flex-shrink: 0; padding: .15rem .6rem; border: 0; border-radius: 50rem; background: var(--dg-green-50); font-weight: 800; color: #0F3D24; text-decoration: none; }
.dg-sq-invite:hover { background: var(--dg-green-100); color: #0F3D24; }
/* Toda la tarjeta lleva a la ficha (el nombre es `stretched-link`); los botones y «Invitar», por encima, cada uno a lo suyo. */
.dg-sq-foot a, .dg-sq-foot button, .dg-sq-foot form, .dg-sq-access .dropdown { position: relative; z-index: 2; }
.dg-sq-foot { padding: .5rem .9rem; border-top: 1px solid var(--dg-zinc-100); background: var(--dg-zinc-50); }
.dg-sq-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: var(--dg-zinc-600); font-size: .8rem; text-decoration: none; }
.dg-sq-icon:hover { background: var(--bs-body-bg); color: var(--dg-zinc-900); box-shadow: 0 0 0 1px var(--dg-zinc-200); }
.dg-sq-icon.is-danger:hover { color: #DC2626; }
@media (max-width: 1199.98px) {
    .dg-sq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .dg-sq-kpis { gap: .75rem; }
    .dg-sq-kpi.is-lines { grid-template-columns: minmax(0, 1fr); }
    .dg-sq-kpi.is-lines > div:first-child { grid-row: auto; }
    .dg-sq-toolbar { gap: .5rem; }
    .dg-sq-toolbar > .dg-st-filter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .dg-sq-filterrow { width: 100%; gap: .5rem; }
    .dg-sq-lines { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
}
@media (max-width: 575.98px) {
    /* Una por fila, en horizontal: la franja con la foto a la izquierda y los números a la derecha. */
    .dg-sq-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .dg-sq-card { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); }
    .dg-sq-top { flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: auto; padding: .9rem .5rem; }
    .dg-sq-top::after { left: auto; top: 0; width: 4px; height: auto; }
    .dg-sq-bignum { right: auto; left: -.4rem; top: auto; bottom: -1rem; font-size: 5rem; }
    .dg-sq-photo { margin-bottom: 0; }
    .dg-sq-photo .dg-photo { width: 4rem; height: 4rem; box-shadow: 0 0 0 3px var(--dg-sq-line); }
    .dg-sq-shirt { box-shadow: none; }
    .dg-sq-rating { position: relative; top: 0; right: 0; }
    .dg-sq-body { padding: .8rem .85rem; gap: .35rem; }
    .dg-sq-name { font-size: .95rem; }
    .dg-sq-nums dd { font-size: 1.05rem; }
    .dg-sq-nums dt { font-size: .5625rem; }
    .dg-sq-foot { grid-column: 1 / -1; }
}

/* 27. Ficha del jugador (Panel/Players/view, 23/10): la cabecera tipo cromo,
   los anillos del resumen y el jugador dibujado con la equipación (Lesiones). */
.dg-pf-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin-bottom: 1.25rem; padding: 1.75rem 2rem; overflow: hidden; border-radius: 1.25rem; background: #0F3D24 repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 34px, transparent 34px 68px); color: #FFFFFF; }
.dg-pf-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--dg-pf-line); }
.dg-pf-hero.is-goalkeeper { --dg-pf-line: #FCD34D; }
.dg-pf-hero.is-defender { --dg-pf-line: #93C5FD; }
.dg-pf-hero.is-midfielder { --dg-pf-line: #86EFAC; }
.dg-pf-hero.is-forward { --dg-pf-line: #FDA4AF; }
.dg-pf-hero.is-none { --dg-pf-line: #D4D4D8; }
.dg-pf-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dg-pf-hero-num { position: absolute; right: 13rem; top: -3rem; font-size: 15rem; font-weight: 900; line-height: 1; letter-spacing: -.06em; color: rgba(255, 255, 255, .06); }
.dg-pf-hero-photo { position: relative; z-index: 3; }
.dg-pf-hero-photo .dg-photo { width: 8.5rem; height: 8.5rem; border-radius: 50%; font-size: 2rem; object-fit: cover; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 0 0 8px var(--dg-pf-line); }
.dg-pf-hero-shirt { position: absolute; right: -.3rem; bottom: .3rem; display: grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .35rem; border-radius: .7rem; background: #FFFFFF; color: #0F3D24; font-weight: 900; }
.dg-pf-hero-main { position: relative; z-index: 2; min-width: 0; }
.dg-pf-hero-name { margin: 0; color: #FFFFFF; font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.dg-pf-hero-name small { font-size: 1.1rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.dg-pf-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .3rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.dg-pf-hero-facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; margin: 1.1rem 0 0; }
.dg-pf-hero-facts dt { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.dg-pf-hero-facts dd { margin: 0; font-size: 1.05rem; font-weight: 800; }
.dg-pf-hero-facts small { font-size: .7rem; color: rgba(255, 255, 255, .65); }
/* El acceso a la app, debajo de edad, pie y puesto (como en la Plantilla). */
.dg-pf-access { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .85rem; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.dg-pf-access .is-on { color: #BBF7D0; }
.dg-pf-invite { padding: 0; border: 0; background: none; font-size: .75rem; font-weight: 800; color: #86EFAC; }
.dg-pf-invite:hover { color: #BBF7D0; }
.dg-pf-hero-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.dg-pf-hero-ring { display: flex; align-items: center; gap: .75rem; }
.dg-pf-hero-ring .dg-rating-ring-track { stroke: rgba(255, 255, 255, .15); }
.dg-pf-hero-ring text { fill: #FFFFFF; font-weight: 800; }
.dg-pf-hero-ring small { font-size: .7rem; line-height: 1.3; color: rgba(255, 255, 255, .65); }
.dg-pf-card { padding: 1.25rem; }
.dg-pf-ring { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.dg-pf-ring svg { width: 9.5rem; height: 9.5rem; }
.dg-pf-ring-track { fill: none; stroke: var(--dg-zinc-100); stroke-width: 12; }
.dg-pf-ring-value { font-size: 18px; font-weight: 800; fill: var(--dg-zinc-900); }
.dg-pf-ring-unit { font-size: 7px; fill: var(--dg-zinc-500); }
.dg-pf-ring-title { font-size: .9rem; }
.dg-pf-ring-sub { font-size: .75rem; color: var(--dg-zinc-500); }
.dg-pf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .8rem; font-size: .75rem; color: var(--dg-zinc-600); }
.dg-pf-legend i { display: inline-block; width: .6rem; height: .6rem; margin-right: .3rem; border-radius: 50%; }
.dg-pf-body { width: 8.5rem; height: auto; }
.dg-pf-skin { fill: #E7C9A9; }
.dg-pf-hair { fill: #3B2A20; }
.dg-pf-boot { fill: #1F2937; }
.dg-pf-body-name { font-size: 9px; font-weight: 800; }
.dg-pf-body-number { font-size: 30px; font-weight: 800; }
.dg-pf-body-small { font-size: 12px; font-weight: 800; }
.dg-pf-mark { fill: #A1A1AA; stroke: #FFFFFF; stroke-width: 2; }
.dg-pf-mark.is-active { fill: #EF4444; }
@media (max-width: 991.98px) {
    .dg-pf-hero { grid-template-columns: auto minmax(0, 1fr); }
    .dg-pf-hero-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 575.98px) {
    .dg-pf-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem; padding: 1.5rem 1rem; text-align: center; }
    .dg-pf-hero-tags, .dg-pf-hero-facts { justify-content: center; }
    .dg-pf-hero-main { width: 100%; }
    .dg-pf-access { justify-content: center; }
    /* En el móvil, el nombre en una sola línea (si no cabe, se corta con «…») y el apodo debajo (Juan, 23/10). */
    .dg-pf-hero-name { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }
    .dg-pf-hero-name > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .dg-pf-hero-name > small { display: block; margin-top: .15rem; }
    .dg-pf-hero-num { right: -1rem; font-size: 10rem; }
    .dg-pf-hero-side { justify-content: center; flex-wrap: wrap; }
}
/* El informe del jugador en PDF (Panel/Players/sheet, 23/10): la cabecera
   tipo cromo más pequeña, las tarjetas con borde sobre la hoja blanca, el mapa
   sin sus filtros y el resultado de cada partido con su V, E o D. */
.dg-pf-hero.is-sheet { gap: 1.25rem; margin-bottom: 1rem; padding: 1.1rem 1.4rem; border-radius: .9rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-photo .dg-photo { width: 5.5rem; height: 5.5rem; font-size: 1.4rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 0 5px var(--dg-pf-line); }
.dg-pf-hero.is-sheet .dg-pf-hero-shirt { min-width: 1.75rem; height: 1.75rem; border-radius: .5rem; font-size: .8125rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-name { font-size: 1.5rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-name small { font-size: .9rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-num { right: 9rem; top: -2rem; font-size: 10rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-facts { gap: .75rem 1.75rem; margin-top: .6rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-facts dd { font-size: .9375rem; }
.dg-pf-hero.is-sheet .dg-pf-hero-side { gap: .6rem; }
.dg-sheet .card { border: 1px solid var(--dg-zinc-200); box-shadow: none; break-inside: avoid; }
.dg-sheet .dg-sq-kpi { padding: .7rem .85rem; box-shadow: none; border: 1px solid var(--dg-zinc-200); }
.dg-sheet .dg-pf-card { padding: .85rem .6rem; }
.dg-sheet .dg-pf-ring svg { width: 6.5rem; height: 6.5rem; }
.dg-sheet .dg-pf-legend { font-size: .6875rem; }
.dg-sheet-map.card { margin: 0; }
.dg-sheet-map .card-header .btn-group,
.dg-sheet-map .card-header .dropdown { display: none; }
.dg-sheet-num { min-width: 1.75rem; text-align: end; }
.dg-sheet-result { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-right: .3rem; border-radius: .3rem; font-size: .625rem; font-weight: 800; color: #FFFFFF; }
.dg-sheet-result.is-win { background: #16A34A; }
.dg-sheet-result.is-draw { background: #A1A1AA; }
.dg-sheet-result.is-loss { background: #DC2626; }
.dg-sheet-block.is-flow { break-inside: auto; }
.dg-sheet-history > .row { margin-top: 0 !important; }
.dg-sheet-history > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
@media (max-width: 575.98px) {
    .dg-pf-hero.is-sheet { padding: 1rem; }
}
.dg-sheet-map .card-body > .row > :first-child { flex: 0 0 64%; max-width: 64%; }
.dg-sheet-map .card-body > .row > :nth-child(2) { flex: 0 0 36%; max-width: 36%; }
.dg-pf-hero.is-sheet { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: stretch; text-align: start; }
.dg-pf-hero.is-sheet .dg-pf-hero-tags,
.dg-pf-hero.is-sheet .dg-pf-hero-facts { justify-content: flex-start; }
.dg-pf-hero.is-sheet .dg-pf-hero-side { grid-column: auto; flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }
.dg-sheet h2 { break-after: avoid; }
.dg-sheet .table > :not(caption) > * > * { padding: .3rem .5rem; }
.dg-sheet tr { break-inside: avoid; }
.dg-sheet .dg-history-figures { margin-bottom: .6rem !important; }
.dg-sheet .dg-history-figure { padding: .45rem .7rem; }
/* «Datos personales» de la ficha (23/10): la cámara sobre la foto de la
   cabecera, abajo a la izquierda (el dorsal sigue a la derecha), con su
   desplegable para subir, cambiar o quitar la foto; el dorsal del formulario,
   grande y estrecho; el interruptor de «Jugador activo», más grande. */
.dg-pf-hero-photo .dg-photo-picker { right: auto; left: -.3rem; bottom: .3rem; }
.dg-pf-hero-photo .dg-profile-camera { box-shadow: 0 0 0 3px #0F3D24; }
.dg-pe-shirt { max-width: 8rem; font-size: 1.25rem; font-weight: 800; }
.dg-pe-switch .form-check-input { width: 2.6rem; height: 1.4rem; cursor: pointer; }

/* 28. Eventos, dentro de Informe (Panel/GameRecords/view; antes, el acta, 23/10): arriba, la
   pantalla del directo (.dg-live.is-embedded, sección 19); el formulario para corregir (el minuto,
   la parte y tocar al jugador) y «Lo que pasó» por partes, entero (Juan, 27/10: sin filtro ni «Quién jugó»). */
.dg-rec-form { padding: 1.1rem; border-radius: 1rem; background: var(--dg-green-50); box-shadow: inset 0 0 0 1px #BBF7D0; }
.dg-rec-minute { width: 5.5rem; font-weight: 800; text-align: center; }
.dg-rec-seg { display: inline-flex; padding: .2rem; border-radius: 50rem; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--dg-zinc-200); }
.dg-rec-seg label { padding: .3rem .8rem; border-radius: 50rem; font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-600); cursor: pointer; }
.dg-rec-seg .btn-check:checked + label { background: #0F3D24; color: #FFFFFF; }
.dg-rec-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem; }
.dg-rec-chip { display: flex; align-items: center; gap: .4rem; min-width: 0; padding: .3rem .5rem .3rem .3rem; border-radius: .8rem; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--dg-zinc-200); font-size: .8125rem; cursor: pointer; }
.dg-rec-chip > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg-rec-chip b { font-family: var(--bs-font-monospace); color: var(--dg-zinc-500); }
.dg-rec-chip .dg-photo { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }
.dg-rec-chip.is-none { justify-content: center; font-weight: 600; color: var(--dg-zinc-600); }
.btn-check:checked + .dg-rec-chip { background: #0F3D24; color: #FFFFFF; box-shadow: none; }
.btn-check:checked + .dg-rec-chip b { color: #86EFAC; }
.btn-check:focus-visible + .dg-rec-chip { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.dg-rec-timeline { margin: 0; padding: .5rem 1.25rem 1rem; list-style: none; }
.dg-rec-part { margin: .75rem 0 .5rem; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-rec-ev { display: flex; align-items: center; gap: .8rem; padding: .45rem .6rem; border-radius: .8rem; }
.dg-rec-ev:hover { background: var(--dg-zinc-50); }
.dg-rec-ev-min { min-width: 3rem; font-family: var(--bs-font-monospace); font-weight: 800; color: var(--dg-zinc-600); }
.dg-rec-ev-ico { display: grid; flex-shrink: 0; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dg-zinc-100); color: var(--dg-zinc-600); }
.dg-rec-ev.is-goal .dg-rec-ev-ico { background: #DCFCE7; color: #166534; }
/* Los iconos del directo (Juan, 27/10). */
.dg-rec-ev-ico .dg-live-svg, .dg-rec-ev-ico .dg-icon-positions { width: 1.15rem; height: 1.15rem; }
.dg-rec-ev-ico .dg-icon-sub { font-size: .75rem; }
.dg-rec-ev.is-rival_goal .dg-rec-ev-ico { background: #FEE2E2; color: #B91C1C; }
.dg-rec-ev.is-substitution .dg-rec-ev-ico { background: #DBEAFE; color: #1D4ED8; }
.dg-rec-ev.is-yellow_card .dg-rec-ev-ico { background: #FEF9C3; color: #CA8A04; }
.dg-rec-ev.is-red_card .dg-rec-ev-ico { background: #FEE2E2; color: #DC2626; }
.dg-rec-ev form { display: inline; }
@media (max-width: 575.98px) {
    .dg-rec-ev { gap: .5rem; padding: .45rem .2rem; }
}
/* «Goles, cambios y tarjetas» / «Todo» en «Lo que pasó» (custom.js 2ae). */
/* «Ponte al día» en el Inicio (element/panel/dashboard/catchup). */
.dg-rec-hello { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: 1.25rem; background: #0F3D24 repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 34px, transparent 34px 68px); color: #FFFFFF; }
.dg-rec-hello-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #86EFAC; }
.dg-rec-hello-title { margin: .4rem 0 .5rem; font-size: 1.5rem; font-weight: 800; color: #FFFFFF; }
.dg-rec-hello-text { max-width: 36rem; color: rgba(255, 255, 255, .78); }
.dg-rec-hello-list { display: grid; align-content: start; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.dg-rec-hello-list a { display: flex; align-items: center; gap: .75rem; padding: .45rem .75rem; border-radius: .7rem; background: rgba(255, 255, 255, .07); font-size: .875rem; color: #FFFFFF; text-decoration: none; }
.dg-rec-hello-list a:hover { background: rgba(255, 255, 255, .14); }
.dg-rec-hello-list b { color: #FDE047; }
.dg-rec-hello-list .small, .dg-rec-hello-list i, .dg-rec-hello-list .is-more { color: rgba(255, 255, 255, .6); }
.dg-rec-hello-list .is-more { padding: .2rem .75rem; font-size: .8125rem; }
@media (max-width: 991.98px) {
    .dg-rec-hello { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
}
/* En el acta, «En el campo» y «Suplentes» en la lista de jugadores (custom.js 2ae). */
.dg-rec-pick-head { grid-column: 1 / -1; margin-top: .25rem; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-rec-pick-head:first-child { margin-top: 0; }
/* El aviso de lo apuntado sin recargar (custom.js 2ae). */
.dg-rec-status { min-height: 1.25rem; font-weight: 700; color: #166534; }
.dg-rec-status.is-error { color: #B91C1C; }

/* 29. El informe del partido (Panel/Games/view, 26/10, rediseño con Juan tras
   la maqueta): el veredicto en verde bosque, los números enfrentados, el
   partido minuto a minuto, los goles, los tiros, los tercios, cada parte, los
   jugadores, la alineación, la liga y lo que trabajar. Las frases se cambian
   con su lápiz (custom.js 2ag). */
.dg-rp-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-rp-legend i { display: inline-block; width: .65rem; height: .65rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; }
.dg-rp-legend i.is-own, .dg-rp-bar i.is-own { background: #1DB954; }
.dg-rp-legend i.is-rival, .dg-rp-bar i.is-rival { background: #F97316; }
/* El veredicto */
.dg-rp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.4rem; margin: 0; }
.dg-rp-note { margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid #1DB954; border-radius: .5rem; background: rgba(255, 255, 255, .06); font-size: .875rem; }
.dg-rp-note.is-empty, .dg-rp-note-form { display: none; }
.dg-rp.is-editing .dg-rp-note { display: block; }
.dg-rp.is-editing .dg-rp-note-text { display: none; }
.dg-rp.is-editing .dg-rp-note-form { display: block; }
.dg-rp-note-form label { color: #FFFFFF; }
.dg-rp-edit-toggle { margin-top: .9rem; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .75); font-size: .8125rem; font-weight: 700; }
.dg-rp-edit-toggle:hover { color: #FFFFFF; }
/* Las frases */
.dg-rp-fact { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border-radius: .75rem; background: var(--dg-green-50); font-size: .8125rem; color: var(--dg-zinc-700); }
.dg-rp-fact.is-bad { background: #FFF4ED; }
.dg-rp-fact.is-info { background: var(--dg-zinc-50); }
.dg-rp-fact-icon { flex-shrink: 0; margin-top: .15rem; color: #15853C; }
.dg-rp-fact.is-bad .dg-rp-fact-icon { color: #C2410C; }
.dg-rp-fact.is-info .dg-rp-fact-icon { color: var(--dg-zinc-500); }
.dg-rp-fact-text { flex: 1; min-width: 0; }
.dg-rp-fact.is-removed { display: none; }
.dg-rp.is-editing .dg-rp-fact.is-removed { display: flex; opacity: .45; }
.dg-rp.is-editing .dg-rp-fact.is-removed .dg-rp-fact-text { text-decoration: line-through; }
.dg-rp-fact-edit { display: none; flex-shrink: 0; padding: 0 .2rem; border: 0; background: transparent; color: inherit; opacity: .6; }
.dg-rp.is-editing .dg-rp-fact-edit { display: inline-block; }
.dg-rp-fact-edit:hover { opacity: 1; }
.dg-rp-fact-form { flex: 1; display: grid; gap: .4rem; }
/* Los números */
.dg-rp-vs { display: grid; gap: .7rem; }
.dg-rp-vs-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 8.5rem minmax(0, 1fr) 3rem; align-items: center; gap: .6rem; font-size: .875rem; }
.dg-rp-vs-row > b { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.dg-rp-vs-row > b.is-win { color: #15853C; }
.dg-rp-vs-row > b.is-lose { color: var(--dg-zinc-400); }
.dg-rp-vs-label { text-align: center; font-size: .75rem; font-weight: 700; line-height: 1.2; color: var(--dg-zinc-600); }
.dg-rp-vs-label small { display: block; font-weight: 500; color: var(--dg-zinc-400); }
.dg-rp-bar { display: flex; height: .5rem; overflow: hidden; border-radius: 4px; background: var(--dg-zinc-100); }
.dg-rp-bar.is-left { justify-content: flex-end; }
.dg-rp-bar i { display: block; height: 100%; border-radius: 4px; }
.dg-rp-bar i.is-card { background: #FACC15; }
/* Minuto a minuto */
.dg-rp-flow { display: block; width: 100%; height: auto; }
.dg-rp-flow text { font-family: inherit; font-size: 11px; fill: var(--dg-zinc-500); }
.dg-rp-flow .dg-rp-flow-score { font-weight: 700; fill: var(--dg-zinc-700); }
.dg-rp-flow-bg { fill: #F6F8F5; }
.dg-rp-flow-bg.is-alt { fill: #FBFBFA; }
.dg-rp-flow-half { stroke: var(--dg-zinc-400); stroke-dasharray: 4 4; }
.dg-rp-flow-axis { stroke: var(--dg-zinc-300); }
.dg-rp-flow-own { fill: #1DB954; }
.dg-rp-flow-rival { fill: #F97316; }
.dg-rp-flow-even { fill: var(--dg-zinc-300); }
.dg-rp-mark line { stroke: #0F3D24; }
.dg-rp-mark.is-yellow rect { fill: #FACC15; }
.dg-rp-mark.is-red rect { fill: #DC2626; }
.dg-rp-mark.is-sub path { fill: #15853C; }
.dg-rp-mark.is-system rect { fill: #0F3D24; }
.dg-rp-moments { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; font-size: .8125rem; color: var(--dg-zinc-600); }
.dg-rp-moments b { margin-right: .3rem; color: var(--dg-zinc-900); }
.dg-rp-moments-score { padding: 0 .4rem; border-radius: 50rem; background: var(--dg-zinc-100); font-weight: 800; color: var(--dg-zinc-800); }
/* Los goles */
.dg-rp-goals { display: grid; gap: .6rem; }
.dg-rp-goal { display: grid; grid-template-columns: 3rem 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .9rem; background: var(--dg-zinc-50); }
.dg-rp-goal.is-rival { background: #FFF4ED; }
.dg-rp-goal-min { font-size: 1.2rem; font-weight: 800; color: #0F3D24; }
.dg-rp-goal.is-rival .dg-rp-goal-min { color: #C2410C; }
.dg-rp-goal-score { display: grid; place-items: center; height: 2rem; border-radius: .6rem; background: #0F3D24; color: #FFFFFF; font-size: .8125rem; font-weight: 800; }
.dg-rp-goal.is-rival .dg-rp-goal-score { background: #F97316; }
.dg-rp-goal small { color: var(--dg-zinc-500); }
.dg-rp-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.dg-rp-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 50rem; background: #FFFFFF; box-shadow: 0 0 0 1px var(--dg-zinc-200); font-size: .75rem; font-weight: 700; color: var(--dg-zinc-700); white-space: nowrap; }
/* Los tiros */
.dg-rp-pitch { display: block; width: 100%; height: auto; border-radius: .9rem; background: repeating-linear-gradient(180deg, #2E8B4A 0 20%, #2A8044 20% 40%); }
.dg-rp-pitch-lines { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .35; }
.dg-rp-pitch-lines .is-spot { fill: #FFFFFF; }
.dg-rp-shots .is-goal { fill: #FACC15; stroke: #0F3D24; stroke-width: .3; }
.dg-rp-shots .is-on { fill: #FFFFFF; }
.dg-rp-shots .is-off { fill: none; stroke: #FFFFFF; stroke-width: .45; }
.dg-rp-shots .is-blocked { fill: #0F3D24; stroke: #FFFFFF; stroke-width: .3; }
.dg-rp-shots .is-wood { fill: #F97316; stroke: #FFFFFF; stroke-width: .3; }
.dg-rp-shots .is-unknown { fill: rgba(255, 255, 255, .5); }
.dg-rp-shotkey { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .6rem; font-size: .75rem; color: var(--dg-zinc-600); }
.dg-rp-shotkey .is-zero { color: var(--dg-zinc-400); }
/* Los tercios */
.dg-rp-thirds { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-radius: .9rem; }
.dg-rp-third { display: grid; place-items: center; gap: .1rem; padding: 1rem .35rem; text-align: center; color: #FFFFFF; }
.dg-rp-thirds.is-recovery .dg-rp-third { background: rgba(21, 133, 60, var(--dg-level)); }
.dg-rp-thirds.is-loss .dg-rp-third { background: rgba(234, 88, 12, var(--dg-level)); }
.dg-rp-third + .dg-rp-third { border-left: 2px dashed rgba(255, 255, 255, .4); }
.dg-rp-third b { font-size: 1.7rem; line-height: 1; font-weight: 800; }
.dg-rp-third small { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.dg-rp-thirds-cap { display: flex; justify-content: space-between; gap: .5rem; margin: .35rem .1rem .9rem; font-size: .75rem; color: var(--dg-zinc-500); }
/* Cada parte */
.dg-rp-halves { width: 100%; font-size: .875rem; }
.dg-rp-halves th { padding: .35rem; text-align: center; font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); white-space: nowrap; }
.dg-rp-halves td { padding: .5rem .35rem; border-top: 1px solid var(--dg-zinc-100); text-align: center; white-space: nowrap; }
.dg-rp-halves td:first-child { text-align: left; font-weight: 600; color: var(--dg-zinc-600); }
.dg-rp-change { display: inline-flex; align-items: center; gap: .15rem; font-size: .75rem; font-weight: 800; color: var(--dg-zinc-400); }
.dg-rp-change.is-good { color: #15853C; }
.dg-rp-change.is-bad { color: #DC2626; }
/* Los jugadores */
.dg-rp-stars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dg-rp-star { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .85rem; border-radius: 1rem; background: var(--bs-body-bg); box-shadow: 0 0 0 1px var(--dg-zinc-200); }
.dg-rp-star small { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-rp-star em { margin-left: auto; font-style: normal; font-size: 1.4rem; font-weight: 800; color: #0F3D24; }
.dg-rp-star.is-warn em { color: #C2410C; }
.dg-rp-ptable { width: 100%; font-size: .875rem; }
.dg-rp-ptable th { padding: .6rem .5rem; border-bottom: 1px solid var(--dg-zinc-200); text-align: center; font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); white-space: nowrap; }
.dg-rp-ptable th:first-child, .dg-rp-ptable td:first-child { padding-left: 1.25rem; text-align: left; }
.dg-rp-ptable td { padding: .5rem; border-bottom: 1px solid var(--dg-zinc-100); text-align: center; white-space: nowrap; }
.dg-rp-ptable td.is-bad { font-weight: 800; color: #DC2626; }
.dg-rp-zero { color: var(--dg-zinc-300); }
.dg-rp-who { display: flex; align-items: center; gap: .6rem; min-width: 11rem; }
.dg-rp-who small { display: block; font-size: .75rem; color: var(--dg-zinc-500); }
.dg-rp-min { display: grid; gap: .2rem; min-width: 6.5rem; text-align: left; font-size: .75rem; color: var(--dg-zinc-600); }
.dg-rp-min i { position: relative; display: block; height: .4rem; border-radius: 3px; background: var(--dg-zinc-100); }
.dg-rp-min em { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: #1DB954; }
.dg-rp-card { display: inline-block; width: .6rem; height: .85rem; margin: 0 .1rem; border-radius: 2px; vertical-align: -2px; }
.dg-rp-card.is-yellow { background: #FACC15; }
.dg-rp-card.is-red { background: #DC2626; }
.dg-rp-val { display: inline-grid; place-items: center; min-width: 2.5rem; padding: .15rem .4rem; border-radius: .5rem; font-size: .8125rem; font-weight: 800; }
.dg-rp-val.is-8 { background: #1DB954; color: #0B2A18; }
.dg-rp-val.is-7 { background: #BBF7D0; color: #14532D; }
.dg-rp-val.is-6 { background: #FEF3C7; color: #78350F; }
.dg-rp-val.is-5 { background: #FED7AA; color: #7C2D12; }
/* Los cambios */
.dg-rp-subs { display: grid; gap: .4rem; }
.dg-rp-sub { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: .75rem; background: var(--dg-zinc-50); font-size: .8125rem; }
.dg-rp-sub > b { min-width: 2.4rem; font-size: .95rem; color: #0F3D24; }
.dg-rp-sub .is-in { font-weight: 700; color: #15853C; }
.dg-rp-sub .is-out { font-weight: 700; color: #DC2626; }
/* Lo que trabajar */
@media (max-width: 991.98px) {
    .dg-rp-stars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dg-rp-facts { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .dg-rp-stars { grid-template-columns: 1fr; }
    .dg-rp-vs-row { grid-template-columns: 2.6rem minmax(0, 1fr) 6.5rem minmax(0, 1fr) 2.6rem; }
    .dg-rp-goal { grid-template-columns: 2.6rem 2.4rem minmax(0, 1fr); }
    .dg-rp-goal .dg-rp-tags { grid-column: 1 / -1; justify-content: flex-start; }
}

/* 30. El recorrido del alta (26/10, Juan, tras la maqueta; element/panel/onboarding,
   custom.js 2ai): la tarjeta abajo a la derecha, plegada en una píldora, y la
   ventana de «paso completado». */
.dg-tour-card { position: fixed; right: 24px; bottom: 24px; z-index: 1045; display: flex; flex-direction: column; width: 380px; max-height: calc(100dvh - 48px); overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: 0 24px 60px -16px rgba(12, 42, 27, .45), 0 0 0 1px rgba(12, 42, 27, .08); }
.dg-tour-head { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; padding: 18px 52px 16px 20px; background: var(--dg-green-900); color: #FFFFFF; }
.dg-tour-head::after { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 50%; pointer-events: none; }
.dg-tour-progress, .dg-tour-pill-ring { position: relative; flex-shrink: 0; display: grid; place-items: center; }
.dg-tour-progress b, .dg-tour-pill-ring b { position: absolute; font-weight: 800; }
.dg-tour-progress b { font-size: .9rem; }
.dg-tour-pill-ring b { font-size: .68rem; }
.dg-tour-ring circle { fill: none; stroke-width: 4; }
.dg-tour-ring .is-track { stroke: rgba(255, 255, 255, .18); }
.dg-tour-ring .is-value { stroke: var(--dg-green); stroke-linecap: round; }
.dg-tour-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: #FFFFFF; }
.dg-tour-sub { margin: 2px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .72); }
.dg-tour-fold { position: absolute; right: 12px; top: 12px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.dg-tour-fold:hover { background: rgba(255, 255, 255, .2); }
.dg-tour-body { overflow-y: auto; padding: 6px 12px 8px; }
.dg-tour-group { padding: 12px 8px 6px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-zinc-400); }
.dg-tour-step { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; color: var(--dg-zinc-900); text-decoration: none; }
.dg-tour-step:hover { background: var(--dg-zinc-50); color: var(--dg-zinc-900); }
.dg-tour-mark { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--dg-zinc-100); color: var(--dg-zinc-600); font-size: .8rem; }
.dg-tour-step.is-done .dg-tour-mark { background: var(--dg-green); color: #FFFFFF; }
.dg-tour-step.is-done b { color: var(--dg-zinc-400); text-decoration: line-through; text-decoration-color: rgba(124, 138, 129, .5); }
.dg-tour-step.is-next { background: #FFFBEA; box-shadow: inset 0 0 0 1.5px #FACC15; }
.dg-tour-step.is-next .dg-tour-mark, .dg-tour-next .dg-tour-mark { background: #FACC15; color: #422006; }
.dg-tour-step-text { flex: 1; min-width: 0; }
.dg-tour-step-text b { display: block; font-size: .85rem; font-weight: 700; }
.dg-tour-step-text small { display: block; font-size: .75rem; line-height: 1.3; color: var(--dg-zinc-500); }
.dg-tour-now { flex-shrink: 0; padding: 2px 9px; border-radius: 50rem; background: #FACC15; color: #422006; font-size: .7rem; font-weight: 800; }
.dg-tour-go { color: var(--dg-zinc-300); font-size: .75rem; }
.dg-tour-foot { padding: 12px 16px 16px; border-top: 1px solid var(--dg-zinc-200); }
.dg-tour-pill { position: fixed; right: 24px; bottom: 24px; z-index: 1045; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 16px 8px 8px; border: 0; border-radius: 50rem; background: var(--dg-green-900); color: #FFFFFF; box-shadow: 0 18px 40px -14px rgba(12, 42, 27, .6); font-size: .85rem; font-weight: 700; }
.dg-tour-pill small { font-weight: 500; font-size: .72rem; color: rgba(255, 255, 255, .7); }
.dg-tour-pill:hover { background: #134A2C; }
.dg-tour-modal .modal-content { overflow: hidden; border: 0; border-radius: 24px; }
.dg-tour-modal-top { position: relative; overflow: hidden; padding: 28px 28px 22px; background: var(--dg-green-900); color: #FFFFFF; text-align: center; }
.dg-tour-modal-top::after { content: ""; position: absolute; left: 50%; top: -120px; width: 260px; height: 260px; margin-left: -130px; border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 50%; pointer-events: none; }
.dg-tour-modal-top h2 { margin: 14px 0 4px; font-weight: 800; color: #FFFFFF; }
.dg-tour-modal-top p { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.dg-tour-badge { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--dg-green); color: #0B2A18; font-size: 1.6rem; box-shadow: 0 0 0 8px rgba(29, 185, 84, .18); }
.dg-tour-modal.show .dg-tour-badge { animation: dgTourPop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes dgTourPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dg-tour-bar { max-width: 260px; margin: 16px auto 0; }
.dg-tour-bar div { height: 8px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.dg-tour-bar i { display: block; height: 100%; border-radius: 4px; background: var(--dg-green); }
.dg-tour-bar small { display: block; margin-top: 6px; font-size: .75rem; color: rgba(255, 255, 255, .7); }
.dg-tour-next { display: flex; align-items: flex-start; gap: 14px; margin: 22px 24px 0; padding: 14px; border-radius: 16px; background: #FFFBEA; box-shadow: inset 0 0 0 1.5px #FACC15; }
.dg-tour-next small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #A16207; }
.dg-tour-next b { display: block; font-size: 1rem; }
.dg-tour-next span:not(.dg-tour-mark) { font-size: .82rem; color: var(--dg-zinc-500); }
.dg-tour-actions { display: flex; gap: 10px; padding: 20px 24px 24px; }
.dg-tour-actions .btn { flex: 1; }
@media (max-width: 575.98px) {
    .dg-tour-card { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 75dvh; }
    .dg-tour-pill { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .dg-tour-modal.show .dg-tour-badge { animation: none; } }

/* 31. Varios jugadores de una vez (Panel/TeamPlayers/bulk, 26/10; custom.js 2aj):
   la tabla que se escribe o se pega, con su explicación arriba. */
.dg-bulk-tip { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--dg-zinc-200); background: var(--dg-green-50); border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0; font-size: .875rem; color: var(--dg-zinc-700); }
.dg-bulk-tip b { display: block; margin-bottom: 2px; color: var(--dg-zinc-900); }
.dg-bulk-step { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dg-green-900); color: #FFFFFF; font-weight: 800; }
.dg-bulk-paste { min-height: 9rem; font-size: .9rem; }
.dg-bulk-preview { min-width: 560px; font-size: .82rem; }
.dg-bulk-preview th { min-width: 9.5rem; padding: .4rem; background: var(--dg-zinc-50); vertical-align: top; }
.dg-bulk-preview th.is-skip, .dg-bulk-preview td.is-skip { opacity: .45; }
.dg-bulk-preview td { padding: .35rem .5rem; color: var(--dg-zinc-700); white-space: nowrap; }
.dg-bulk .table-responsive { position: relative; }
.dg-bulk-table { min-width: 880px; }
.dg-bulk-table th { padding: .7rem .5rem; font-size: .75rem; font-weight: 700; color: var(--dg-zinc-500); white-space: nowrap; }
.dg-bulk-table td { padding: .35rem .35rem; vertical-align: top; }
.dg-bulk-table th:first-child, .dg-bulk-table td:first-child { padding-left: 1.25rem; }
.dg-bulk-table td.dg-bulk-n { width: 2.5rem; padding-top: .7rem; font-size: .8rem; font-weight: 700; color: var(--dg-zinc-400); }
.dg-bulk-table .dg-bulk-shirt { width: 6rem; }
.dg-bulk-table td:last-child { width: 2.5rem; padding-right: .75rem; }
.dg-bulk-table .invalid-feedback { font-size: .72rem; }
.dg-bulk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 16px 20px; border-top: 1px solid var(--dg-zinc-200); }
@media (max-width: 575.98px) {
    .dg-bulk-foot .btn { flex: 1 1 100%; }
}
.dg-bulk fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.dg-bulk-preview-wrap { max-height: 22rem; overflow: auto; }
.dg-bulk-word { margin: 0 .2rem .2rem 0; padding: .05rem .45rem; border: 0; border-radius: .4rem; background: var(--dg-zinc-100); color: var(--dg-zinc-700); font-size: .8rem; }
.dg-bulk-word.is-first { background: var(--dg-green-100); color: var(--dg-green-800); font-weight: 700; }
.dg-bulk-word:hover { box-shadow: 0 0 0 1.5px var(--dg-green); }
.dg-bulk-shirtnum { display: inline-block; min-width: 1.6rem; margin-right: .35rem; font-weight: 800; color: var(--dg-zinc-900); }
.dg-bulk[data-dg-bulk-import] > .dg-bulk-tip { border-bottom: 0; border-radius: var(--bs-border-radius-lg); }

/* 32. Días y horarios de entrenamiento (Panel/TrainingSessions/schedule, 26/10; custom.js 2ak):
   cada día en una fila; marcado, sus horas y su lugar al lado (en el móvil, debajo). */
.dg-schedule { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.dg-schedule-day { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: .85rem 1rem; }
.dg-schedule-day + .dg-schedule-day { border-top: 1px solid var(--bs-border-color); }
.dg-schedule-day.is-on { background: var(--dg-green-50); }
.dg-schedule-day:first-child { border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0; }
.dg-schedule-day:last-child { border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg); }
.dg-schedule-day > .form-check { flex: 0 0 9rem; }
.dg-schedule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; flex: 1 1 100%; }
.dg-schedule-fields[hidden] { display: none; }
.dg-schedule-place { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .dg-schedule-fields { grid-template-columns: 8rem 8rem 1fr; flex: 1 1 0; }
    .dg-schedule-place { grid-column: auto; }
}

/* 33. Los convocados en la pestaña Convocatoria (element/panel/callup_squad, 27/10; custom.js 2al):
   la plantilla por líneas; va = blanca con el borde verde, fuera = apagada; lesionado, sin poder tocarlo. */
.dg-squad-count { background: var(--dg-green-50); color: var(--dg-green-800); font-weight: 700; }
.dg-squad-count.is-out { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.dg-squad-line + .dg-squad-line { margin-top: 1.25rem; }
.dg-squad-line-title { margin-bottom: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dg-zinc-500); }
.dg-squad-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
.dg-squad-pick { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--dg-zinc-50); color: var(--dg-zinc-500); cursor: pointer; user-select: none; transition: border-color .15s, background-color .15s, opacity .15s; }
.dg-squad-pick .dg-photo { opacity: .45; filter: grayscale(1); }
.dg-squad-photo { position: relative; flex-shrink: 0; }
.dg-squad-shirt { position: absolute; right: -.4rem; bottom: -.3rem; min-width: 1.25rem; padding: 0 .2rem; border-radius: .4rem; background: var(--dg-zinc-700); color: #fff; font-size: .65rem; font-weight: 800; line-height: 1.1rem; text-align: center; }
.dg-squad-state { color: inherit; }
.dg-squad-in { display: none; }
.btn-check:checked + .dg-squad-pick { border-color: var(--bs-primary); background: #fff; color: var(--dg-zinc-900); box-shadow: inset 0 0 0 1px var(--bs-primary); }
.btn-check:checked + .dg-squad-pick .dg-photo { opacity: 1; filter: none; }
.btn-check:checked + .dg-squad-pick .dg-squad-shirt { background: var(--dg-green-700); }
.btn-check:checked + .dg-squad-pick .dg-squad-in { display: inline; color: var(--dg-green-700); }
.btn-check:checked + .dg-squad-pick .dg-squad-out { display: none; }
.btn-check:focus-visible + .dg-squad-pick { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.dg-squad-pick.is-absent .dg-squad-out { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.dg-squad-pick.is-injured { cursor: not-allowed; }
.dg-squad-pick.is-injured .dg-squad-out { color: var(--bs-danger-text-emphasis); font-weight: 600; }
@media (max-width: 575.98px) {
    .dg-squad-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En la tarjeta de la Convocatoria, los convocados y, a su derecha, los datos, con su raya en el PC (Juan, 27/10). */
@media (min-width: 992px) {
    .dg-callup-data-col { border-left: 1px solid var(--bs-border-color); padding-left: 1.75rem; }
}
.dg-callup-squad-col .dg-squad-picks { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
/* «No convocado», en rojo (Juan, 27/10). */
.dg-squad-pick .dg-squad-out { color: var(--bs-danger-text-emphasis); font-weight: 600; }
/* La alineación en una tarjeta (Juan, 27/10): a la derecha del campo, los suplentes y «Sin convocar», con su raya en el PC;
   «Ordenar», como los filtros de la Plantilla. */
@media (min-width: 1200px) {
    .dg-lineup-side { border-left: 1px solid var(--bs-border-color); padding-left: 1.75rem; }
}
.dg-lineup-sort .btn-check:checked + .dg-st-filter-option { background: #0F3D24; color: #FFFFFF; }
.dg-lineup-sort .dg-st-filter-option { cursor: pointer; margin: 0; }
/* Sitio al pie de la página para la tarjeta del recorrido, fija abajo a la derecha (Juan, 27/10: tapaba «Siguiente»). */
.dg-backoffice main.dg-with-tour { padding-bottom: 6.5rem !important; }
/* «No lo sé» en las preguntas del directo, en negrita (Juan, 27/10). */
.dg-live-skip.is-unknown { font-weight: 800; color: #18181B; font-size: .85rem; }
/* En el cambio del directo, lo que lleva jugado cada uno (Juan, 27/10); el suplente que no ha jugado, en naranja. */
.dg-live-pl-min { display: block; font-size: .7rem; font-weight: 600; color: #52525B; line-height: 1.1; }
.dg-live-pl-min.is-zero { color: #C2410C; font-weight: 700; }
/* En el campo del directo, lo que lleva jugado cada uno, debajo del nombre (Juan, 27/10). */
.dg-live-token-min { margin-top: .05rem; padding: 0 .3rem; border-radius: 50rem; background: rgba(10, 40, 24, .7); color: #FDE68A; font-size: .5rem; font-weight: 800; line-height: 1.3; }

/* Lo más destacado del informe, en una tarjeta blanca (Juan, 27/10: el marcador ya está arriba). */
.dg-rp-summary .dg-rp-facts { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; }
.dg-rp-summary .dg-rp-note { background: var(--dg-zinc-50); }
.dg-rp-summary .dg-rp-note-form label { color: var(--dg-zinc-700); }
.dg-rp-summary .dg-rp-edit-toggle { color: #15853C; }
.dg-rp-summary .dg-rp-edit-toggle:hover { color: #0F3D24; }

/* Minuto a minuto con los iconos del directo (Juan, 27/10): el balón (nuestro en verde bosque, del rival en naranja), la tarjeta, las flechas del cambio y el sistema. */
.dg-rp-mark-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1.5px #0F3D24; color: #0F3D24; font-size: 13px; line-height: 1; }
.dg-rp-mark.is-rival .dg-rp-mark-icon { box-shadow: 0 0 0 1.5px #F97316; color: #EA580C; }
.dg-rp-mark .dg-icon-sub { font-size: 10px; }
.dg-rp-card-icon { display: inline-block; width: .5rem; height: .7rem; border-radius: 1.5px; background: #FACC15; vertical-align: -.05rem; }
.is-red > .dg-rp-mark-icon .dg-rp-card-icon, .dg-rp-mark.is-red .dg-rp-card-icon, .dg-rp-moments .is-red .dg-rp-card-icon { background: #DC2626; }
.dg-rp-moments-icon { display: inline-flex; align-items: center; margin-right: .35rem; color: #0F3D24; font-size: .8rem; }
.dg-rp-moments .is-rival .dg-rp-moments-icon { color: #EA580C; }
.dg-rp-moments .is-system .dg-rp-moments-icon { color: var(--dg-zinc-500); }

/* Los tiros del informe con los iconos del directo (Juan, 27/10). */
.dg-rp-shots .is-badge { fill: #FFFFFF; stroke: #0F3D24; stroke-width: .25; }
.dg-rp-shots .dg-rp-shot-icon, .dg-rp-shotkey .dg-rp-shot-icon { fill: none; stroke: #0F3D24; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-rp-shot-ball { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #0F3D24; line-height: 1; }
.dg-rp-shotkey svg { width: 1.05rem; height: 1.05rem; margin-right: .3rem; vertical-align: -.25rem; overflow: visible; }
.dg-rp-shotkey circle.is-badge { fill: #FFFFFF; stroke: #0F3D24; stroke-width: 1.2; }

/* Los mejores, al lado de la alineación (Juan, 27/10): uno debajo de otro. */
.dg-rp-stars.is-column { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; }

/* El mapa de acciones como el campo del directo (Juan, 27/10): césped a franjas, líneas blancas, cada acción con su icono y los botones de las acciones que se deslizan de lado. */
.dg-map-svg { border-radius: .9rem; }
.dg-map-grass { fill: #2A8044; }
.dg-map-stripe { fill: #2E8B4A; }
.dg-map-heat rect { fill: #FDE047; }
.dg-map-point circle { fill: #FFFFFF; stroke: #0F3D24; stroke-width: .2; }
.dg-map-point .dg-map-icon { color: #0F3D24; }
.dg-map-icon .dg-live-svg { width: 20px; height: 20px; }
.dg-map-icon .dg-rp-card-icon { width: 12px; height: 17px; }
.dg-rp-card-icon.is-red { background: #DC2626; }
.dg-map-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .75rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); scrollbar-width: thin; }
.dg-map-chip { display: inline-flex; flex-shrink: 0; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--dg-zinc-200); border-radius: 50rem; background: #FFFFFF; color: var(--dg-zinc-500); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.dg-map-chip b { padding: 0 .4rem; border-radius: 50rem; background: var(--dg-zinc-100); color: var(--dg-zinc-600); font-size: .7rem; }
.dg-map-chip.is-on { border-color: #0F3D24; background: #0F3D24; color: #FFFFFF; }
.dg-map-chip.is-on b { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.dg-map-chip-icon { display: inline-flex; align-items: center; }
.dg-map-chip-icon .dg-live-svg { width: 1rem; height: 1rem; }
.dg-map-chip-icon .dg-rp-card-icon { width: .55rem; height: .75rem; }
.dg-map-svg [hidden] { display: none; }
.dg-rp-shot-icon { color: #0F3D24; }
/* El mapa, más contenido (Juan, 27/10). */
.dg-map-field { max-width: 46rem; margin: 0 auto; }
/* Las rojas, en rojo (Juan, 27/10: amarillas y rojas por separado). */
.dg-rp-bar i.is-card.is-red { background: #DC2626; }

/* Minuto a minuto: el icono tocado y su línea, marcados (Juan, 27/10). */
.dg-rp-mark { cursor: pointer; outline: none; }
.dg-rp-mark.is-active .dg-rp-mark-icon { background: #FDE047; transform: scale(1.15); }
.dg-rp-moments li { padding: .1rem .4rem; border-radius: .4rem; cursor: pointer; }
.dg-rp-moments li.is-active { background: #FEF9C3; color: var(--dg-zinc-900); }
.dg-rp > div > .dg-rp-edit-toggle { color: #15853C; }
.dg-rp-ball { width: 1em; height: 1em; } .dg-rp-mark-icon .dg-rp-ball { width: 17px; height: 17px; }
/* El informe compartido (27/10): la página de compartir, a todo el ancho. */
.dg-share.is-wide .dg-share-top, .dg-share.is-wide .dg-share-main { max-width: 84rem; }
.dg-share.is-wide .dg-share-main { gap: 1.25rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 992px) { .dg-share.is-wide .dg-share-main { padding-left: 1.5rem; padding-right: 1.5rem; } }
.dg-share-report-hero .dg-share-teams { max-width: 34rem; margin-left: auto; margin-right: auto; }
/* Minuto a minuto por filas (Juan, 27/10): el nombre de cada lado, el de cada fila, su carril y la raya a su minuto. */
.dg-rp-flow .dg-rp-flow-side { font-size: 10.5px; font-weight: 700; }
.dg-rp-flow .dg-rp-flow-side.is-own { fill: #15853C; }
.dg-rp-flow .dg-rp-flow-side.is-rival { fill: #EA580C; }
.dg-rp-flow .dg-rp-flow-lane { font-weight: 700; fill: var(--dg-zinc-600); }
.dg-rp-flow-track { stroke: var(--dg-zinc-200); stroke-dasharray: 2 4; }
.dg-rp-mark line { stroke: var(--dg-zinc-400); stroke-width: 1; }
/* El balón del gol en los tiros: el del directo, en tinta sobre el círculo blanco. */
.dg-rp-shot-ball { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #0F3D24; font-size: 24px; line-height: 1; }
/* Minuto a minuto, la línea del tiempo (Juan, 27/10): sin barras; los que se juntan, en un círculo que acerca la franja. */
.dg-rp-tl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg-rp-tl-svg [hidden] { display: none; }
.dg-rp-tl-svg text { font-family: inherit; font-size: 11px; fill: var(--dg-zinc-500); }
.dg-rp-tl-track { fill: var(--dg-zinc-200); }
.dg-rp-tl-tick { stroke: var(--dg-zinc-400); }
.dg-rp-tl-half { stroke: var(--dg-zinc-400); stroke-dasharray: 4 4; }
.dg-rp-tl-svg .dg-rp-tl-score, .dg-rp-tl-svg .dg-rp-tl-period { font-weight: 700; fill: var(--dg-zinc-700); }
.dg-rp-tl-cluster { cursor: pointer; outline: none; }
.dg-rp-tl-cluster line { stroke: var(--dg-zinc-400); }
.dg-rp-tl-cluster circle { fill: #0F3D24; stroke: #FFFFFF; stroke-width: 2; }
.dg-rp-tl-cluster.is-rival circle { fill: #EA580C; }
.dg-rp-tl-svg .dg-rp-tl-cluster text { font-size: 13px; font-weight: 800; fill: #FFFFFF; }
.dg-rp-tl-cluster:hover circle, .dg-rp-tl-cluster:focus-visible circle { stroke: #FDE047; }
.dg-rp-tl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; padding: .35rem .5rem .35rem .75rem; border-radius: .75rem; background: #FEF9C3; }
.dg-rp-tl-bar[hidden] { display: none; }
/* La lista de debajo: los iconos del directo, del tamaño del texto. */
.dg-rp-moments-icon { min-width: 1rem; justify-content: center; font-size: .85rem; }
.dg-rp-moments-icon .dg-icon-sub { font-size: .7rem; }
/* Así llegaron los goles: los iconos de las respuestas del directo (Juan, 27/10). */
.dg-rp-tag-icon { flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: #0F3D24; }
/* Así llegaron los goles, debajo: marcados y encajados con cómo llegaron (Juan, 27/10). */
.dg-rp-goalsum { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.dg-rp-goalsum-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .6rem .75rem; border-radius: .75rem; background: var(--dg-zinc-50); }
.dg-rp-goalsum-row .dg-rp-tags { justify-content: flex-start; }
.dg-rp-goalsum-head { display: flex; align-items: baseline; gap: .4rem; min-width: 7.5rem; }
.dg-rp-goalsum-head b { font-size: 1.35rem; font-weight: 800; line-height: 1; color: #0F3D24; }
.dg-rp-goalsum-row.is-rival .dg-rp-goalsum-head b { color: #EA580C; }
.dg-rp-goalsum-head span { font-size: .8125rem; font-weight: 700; color: var(--dg-zinc-700); }
/* La alineación del informe en el campo del directo (Juan, 27/10) y el carrusel de sistemas. */
.dg-rp-lineup-pitch { border-radius: .75rem; }
.dg-rp-lineup-pitch .dg-lineup-dot { fill: #FFFFFF; stroke: #0F3D24; stroke-width: .35; }
.dg-rp-lineup-pitch .dg-lineup-number { fill: #0F3D24; font-weight: 700; }
.dg-rp-lineup-pitch .dg-lineup-empty .dg-lineup-dot { fill: rgba(255, 255, 255, .15); stroke: #FFFFFF; stroke-dasharray: .9 .7; }
.dg-rp-lineup-pitch .dg-lineup-empty .dg-lineup-number { fill: #FFFFFF; }
.dg-rp-lineup-pitch .dg-lineup-name { fill: #FFFFFF; stroke: #14532D; stroke-width: .5; paint-order: stroke; }
.dg-rp-systems .dg-rp-systems-tabs { position: static; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0 0 .6rem; }
.dg-rp-systems .dg-rp-systems-tabs [data-bs-target] { width: auto; height: auto; margin: 0; padding: .25rem .7rem; border: 0; border-radius: 50rem; background: var(--dg-zinc-100); color: var(--dg-zinc-700); font-size: .75rem; font-weight: 700; text-indent: 0; opacity: 1; }
.dg-rp-systems .dg-rp-systems-tabs .active { background: #0F3D24; color: #FFFFFF; }
.dg-rp-systems-head { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .6rem; }
.dg-rp-systems-head .dg-rp-systems-tabs { margin: 0; }
.dg-rp-systems-arrow { display: grid; flex-shrink: 0; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: var(--dg-zinc-100); color: #0F3D24; }
.dg-rp-systems-arrow:hover { background: var(--dg-zinc-200); }
/* El carrusel, una pastilla por momento (Juan, 27/10): se deslizan de lado y quien cambia va en amarillo. */
.dg-rp-systems-head { justify-content: space-between; }
.dg-rp-systems .dg-rp-systems-tabs { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dg-rp-systems .dg-rp-systems-tabs::-webkit-scrollbar { display: none; }
.dg-rp-systems .dg-rp-systems-tabs [data-bs-target] { display: inline-flex; flex-shrink: 0; align-items: center; gap: .3rem; white-space: nowrap; }
.dg-rp-systems .dg-rp-systems-tabs .dg-icon-sub { font-size: .6rem; }
.dg-rp-lineup-pitch .is-new .dg-lineup-dot { fill: #FDE047; stroke: #0F3D24; stroke-width: .5; }
.dg-rp-lineup-pitch .is-off { opacity: .55; }
.dg-rp-lineup-pitch .is-off .dg-lineup-dot { stroke: #DC2626; stroke-width: .6; }
.dg-rp-systems .dg-rp-systems-tabs .dg-icon-positions { width: 1rem; height: 1rem; }
/* Directo: volver a la parte de antes en el descanso (Juan, 27/10). */
.dg-live-clock .dg-live-ic.is-reopen { gap: .3rem; width: auto; padding: 0 .75rem; border-radius: 50rem; background: rgba(255, 255, 255, .16); font-size: .78rem; font-weight: 800; }
.dg-live-clock .dg-live-ic.is-reopen > i { font-size: .7rem; }
/* Directo (Juan, 27/10): el tiempo añadido, en rojo; y en el campo, el icono de cada cosa registrada en lugar del punto. */
.dg-live-clock-time.is-added { padding: 0 .35rem; border-bottom: 0; border-radius: .4rem; background: #DC2626; }
.dg-live-dot.is-icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border: 2px solid #0F3D24; background: #FFFFFF; color: #0F3D24; font-size: .8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.dg-live-dot.is-icon.is-rival { border-color: #EA580C; color: #C2410C; }
.dg-live-dot.is-icon.is-goal { width: 1.9rem; height: 1.9rem; margin: -.95rem 0 0 -.95rem; font-size: 1rem; }
.dg-live-dot.is-icon .dg-live-svg, .dg-live-dot.is-icon .dg-live-opt-icon { width: 1.05rem; height: 1.05rem; }
.dg-live-dot-card { display: block; width: .55rem; height: .78rem; border-radius: 1.5px; background: #FACC15; }
.dg-live-dot-card.is-red { background: #DC2626; }
/* Directo (Juan, 27/10): el icono solo, sin su círculo, para que ocupe menos; y los jugadores, siempre por encima de lo registrado (el toque de ahora, encima de todo). */
.dg-live-dot.is-icon { width: 1.3rem; height: 1.3rem; margin: -.65rem 0 0 -.65rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: #FFFFFF; font-size: 1rem; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)); }
.dg-live-dot.is-icon.is-rival { color: #FDBA74; }
.dg-live-dot.is-icon.is-goal { width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; font-size: 1.2rem; }
.dg-live-dot.is-icon .dg-live-svg, .dg-live-dot.is-icon .dg-live-opt-icon { width: 1.2rem; height: 1.2rem; }
.dg-live-dot { z-index: 1; }
.dg-live-tokens { z-index: 2; }
.dg-live-tap { z-index: 3; }
/* El botón de lo registrado con puntos: un punto, como en el campo. */
.dg-look-dot { display: inline-block; width: .7rem; height: .7rem; border: 2px solid #FFFFFF; border-radius: 50%; background: #0F3D24; }
/* Lo que falta por hacer (Juan, 27/10: la valoración sin confirmar), en el informe y en el Inicio. */
.dg-todo { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--dg-zinc-200); border-left: 4px solid #FACC15; border-radius: 1rem; background: #FFFFFF; }
.dg-todo-icon { display: grid; flex-shrink: 0; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #FEF9C3; color: #A16207; }
.dg-todo-text { display: grid; flex: 1; gap: .2rem; min-width: 0; }
.dg-todo-text > span { font-size: .875rem; color: var(--dg-zinc-600); }
.dg-todo-games { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.dg-todo-games > a, .dg-todo-games > span { padding: .25rem .7rem; border-radius: 50rem; background: var(--dg-zinc-100); font-size: .8125rem; color: var(--dg-zinc-700); text-decoration: none; }
.dg-todo-games > a:hover { background: #FEF9C3; color: #0F3D24; }
.dg-todo-games small { color: #A16207; font-weight: 700; }
.dg-todo > .btn { flex-shrink: 0; }
@media (max-width: 575.98px) { .dg-todo { flex-wrap: wrap; } .dg-todo > .btn { width: 100%; } }
.dg-live-finished-more { max-width: 22rem; margin: 1rem auto 0; font-size: .8125rem; color: rgba(255, 255, 255, .8); }
.dg-live-finished-more a { color: #FFFFFF; font-weight: 700; }
/* Lo que va pasando, para las familias (Juan, 27/10): lo nuestro con entusiasmo y lo del rival, informativo. */
.dg-share-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dg-zinc-100); }
.dg-share-icon .dg-live-svg { width: 1.15rem; height: 1.15rem; }
.dg-share-moment { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.dg-share-moment small { color: var(--dg-zinc-500); }
.dg-share-moments > li.is-own .dg-share-moment b { font-weight: 800; color: #0F3D24; }
.dg-share-moments > li.is-own .dg-share-icon { background: #DCFCE7; color: #15803D; }
.dg-share-moments > li.is-rival .dg-share-moment b { font-weight: 500; color: var(--dg-zinc-600); }
/* Todas las filas con el mismo margen a la izquierda (Juan, 27/10: los goles salían más metidos). */
.dg-share-feed .dg-share-moments { margin: 0 -.6rem; }
.dg-share-moments > li { padding-inline: .6rem; }
.dg-share-moments > li.is-own.is-goal { margin: .2rem 0; padding: .5rem .6rem; border-top: 0; border-radius: .9rem; background: #0F3D24; }
/* El descanso y el final, en una franja gris con su marcador. */
.dg-share-moments > li.is-break, .dg-share-moments > li.is-final { margin: .2rem 0; padding-block: .55rem; border-top: 0; border-radius: .9rem; background: var(--dg-zinc-100); }
.dg-share-moments > li.is-break + li, .dg-share-moments > li.is-final + li { border-top: 0; }
.dg-share-moments > li.is-break .dg-share-icon, .dg-share-moments > li.is-final .dg-share-icon { background: #FFFFFF; color: #0F3D24; }
.dg-share-moments > li.is-final .dg-share-moment b { font-size: 1rem; }
.dg-share-moments > li.is-own.is-goal + li { border-top: 0; }
/* Sin ocupar tanto (Juan, 27/10) y sin cortarse: la letra se ajusta al ancho y, si el club tiene un nombre largo, baja de línea repartida. */
.dg-share-moments > li.is-own.is-goal .dg-share-moment b { font-size: clamp(.875rem, 4vw, 1rem); line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; color: #FFFFFF; }
.dg-share-moments > li.is-own.is-goal .dg-share-minute { width: 2.4rem; }
/* Minuto a minuto, hasta el final de la pantalla (Juan, 27/10): la página no se desliza; la lista, dentro de su tarjeta. */
.dg-share:not(.is-wide) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.dg-share:not(.is-wide) .dg-share-top { flex-shrink: 0; width: 100%; }
.dg-share:not(.is-wide) .dg-share-main { flex: 1; width: 100%; min-height: 0; overflow-y: auto; padding-bottom: 1rem; }
.dg-share:not(.is-wide) .dg-share-live { flex: 1; min-height: 0; }
.dg-share-feed { flex: 1; min-height: 14rem; }
.dg-share-feed .card-body { display: flex; flex-direction: column; min-height: 0; }
.dg-share-feed .dg-share-moments { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dg-share-moments > li.is-own.is-goal .dg-share-moment small, .dg-share-moments > li.is-own.is-goal .dg-share-minute { color: rgba(255, 255, 255, .75); }
.dg-share-moments > li.is-own.is-goal .dg-share-icon { background: #1DB954; color: #0F3D24; }
.dg-share-moments > li.is-own.is-woodwork .dg-share-moment b, .dg-share-moments > li.is-own.is-penalty .dg-share-moment b { color: #C2410C; }

/* 34. El tour «Conoce Daygol» (element/panel/guide, 28/10; custom.js 2aq): la ventana «Ayuda» con los
   capítulos y, con el tour en marcha, el foco —la pantalla en verde bosque y lo que se explica
   iluminado, con su marco verde que late— y la tarjeta al lado (en el móvil, abajo a todo el ancho). */
.dg-guide-help .modal-content { overflow: hidden; border: 0; border-radius: 22px; }
.dg-guide-help-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: #0C2A1B; color: #FFFFFF; }
.dg-guide-help-head h2 { font-weight: 800; }
.dg-guide-help-head p { color: rgba(255, 255, 255, .7); font-size: .8125rem; }
.dg-guide-help-ring { position: relative; flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#1DB954 0 var(--dg-guide-percent, 0%), rgba(255, 255, 255, .15) var(--dg-guide-percent, 0%) 100%); }
.dg-guide-help-ring b { position: absolute; inset: 6px; display: grid; place-items: center; border-radius: 50%; background: #0C2A1B; font-size: .875rem; }
.dg-guide-help-close { flex-shrink: 0; width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.dg-guide-chapters { margin: 0; padding: 0; list-style: none; }
.dg-guide-chapter { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; }
.dg-guide-chapter:hover { background: var(--dg-zinc-50); }
.dg-guide-chapter-icon { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--dg-green-50); color: var(--dg-green-700); font-size: 1.1rem; }
.dg-guide-chapter.is-done .dg-guide-chapter-icon { background: #1DB954; color: #0C2A1B; }
.dg-guide-chapter.is-next .dg-guide-chapter-icon { background: #FDE047; color: #0C2A1B; }
.dg-guide-chapter b { display: block; color: #0C2A1B; }
.dg-guide-chapter small { color: var(--dg-zinc-500); }
.dg-guide-state { margin-left: 6px; padding: 1px 8px; border-radius: 50rem; background: #DCFCE7; color: #166534; font-size: .6875rem; font-weight: 700; vertical-align: 2px; }
.dg-guide-chapter.is-next .dg-guide-state { background: #FEF9C3; color: #854D0E; }
.dg-guide-soon { max-width: 9rem; }
.dg-guide-hole { position: fixed; z-index: 1060; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(9, 32, 20, .74); outline: 3px solid #1DB954; outline-offset: 3px; transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; pointer-events: none; }
.dg-guide-hole.is-center { top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; outline: 0; }
.dg-guide-hole:not(.is-center)::after { content: ""; position: absolute; inset: -9px; border: 2px solid rgba(29, 185, 84, .55); border-radius: 18px; animation: dg-guide-pulse 1.8s ease-out infinite; }
@keyframes dg-guide-pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .dg-guide-hole, .dg-guide-card { transition: none; } .dg-guide-hole::after { animation: none; } }
.dg-guide-card { position: fixed; z-index: 1061; width: 360px; max-width: calc(100vw - 32px); padding: 18px 20px 16px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .45); transition: top .3s ease, left .3s ease; }
.dg-guide-card[hidden], .dg-guide-hole[hidden] { display: none; }
.dg-guide-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px; border-radius: 50rem; background: #DCFCE7; color: #166534; font-size: .75rem; font-weight: 700; }
.dg-guide-count { margin-left: auto; flex-shrink: 0; color: var(--dg-zinc-500); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-guide-title { margin: 12px 0 6px; color: #0C2A1B; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.dg-guide-text { margin: 0; color: var(--dg-zinc-700); font-size: .875rem; line-height: 1.5; }
.dg-guide-text b, .dg-guide-tip b { color: #0C2A1B; }
.dg-guide-where { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: .75rem; color: #3F5A49; }
.dg-guide-where .fa-solid { margin-top: 2px; color: #1DB954; }
.dg-guide-where[hidden] { display: none; }
.dg-guide-tip { display: flex; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: #FEF9C3; color: #713F12; font-size: .8125rem; }
.dg-guide-tip[hidden] { display: none; }
.dg-guide-tip > i { margin-top: 3px; }
.dg-guide-bar { display: flex; gap: 4px; margin: 14px 0 12px; }
.dg-guide-bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--dg-zinc-200); }
.dg-guide-bar i.is-done { background: #1DB954; }
.dg-guide-actions { display: flex; align-items: center; gap: 8px; }
.dg-guide-exit { margin-right: auto; padding: 0; border: 0; background: none; color: var(--dg-zinc-500); font-size: .8125rem; font-weight: 600; }
.dg-guide-arrow { position: absolute; width: 14px; height: 14px; background: #FFFFFF; transform: rotate(45deg); }
@media (max-width: 575.98px) {
    .dg-guide-card { top: auto !important; right: 12px; bottom: 12px; left: 12px !important; width: auto; }
    .dg-guide-card.is-top { top: 12px !important; bottom: auto; }
    .dg-guide-arrow { display: none; }
}
.dg-guiding .dg-tour { display: none; }

/* 35. El análisis del rival (Panel/GamePlans/view, element/panel/analysis/, 29/10, Juan, tras la maqueta;
   custom.js 2ar): verlo —las pastillas de la idea de juego, el sistema en el campo del color de su
   camiseta, las listas con ✓, ✗ o el número y la conclusión en verde bosque— y editarlo igual que se
   ve, con las mismas tarjetas numeradas, las pastillas que se marcan con un toque (todas del mismo verde: Juan, 29/10), cada frase en su
   línea y la barra de «Guardar» fija abajo. */
.dg-an-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dg-an-section-title { margin: 0 0 10px; color: #3F5A49; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dg-an-auto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dg-an-auto > div { padding: 14px 16px; border: 1px solid #E3EAE5; border-radius: 16px; background: #FFFFFF; }
.dg-an-auto b { display: block; font-size: 1.5rem; line-height: 1.1; }
.dg-an-auto small { color: #5B6E62; }
@media (max-width: 767.98px) { .dg-an-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg-an-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-an-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #E8F7EE; color: #14532D; font-size: .78rem; font-weight: 600; }
a.dg-an-pill:hover { background: #DCEFE3; }
.dg-an-pitch { position: relative; aspect-ratio: 105 / 68; overflow: hidden; border-radius: 12px; background: repeating-linear-gradient(90deg, #2E8B4A 0 10%, #2A8044 10% 20%); }
.dg-an-pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dg-an-dot { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #FFFFFF; border-radius: 50%; background: #FFFFFF; color: #0C2A1B; font-size: .8rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); }
.dg-an-dot.is-code { font-size: .56rem; letter-spacing: -.02em; }
.dg-an-dot.is-gk { background: #FACC15; color: #111111; }
.dg-an-dot input { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; outline: 0; background: transparent; color: inherit; font-weight: 800; text-align: center; }
.dg-an-dot input::placeholder { color: inherit; opacity: .55; }
.dg-an-dot:focus-within { box-shadow: 0 0 0 3px #FACC15; }
.dg-an-phase { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid #EDF1EE; }
.dg-an-phase:first-child { padding-top: 0; border-top: 0; }
.dg-an-phase h4 { margin: 0 0 6px; font-size: .95rem; font-weight: 800; }
.dg-an-phase-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #0C2A1B; color: #1DB954; font-size: 1.1rem; }
.dg-an-lines { margin: 0; padding-left: 1.1rem; }
.dg-an-lines li { margin: 2px 0; }
.dg-an-check, .dg-an-cross, .dg-an-num { margin: 0; padding-left: 0; list-style: none; }
.dg-an-check li, .dg-an-cross li { position: relative; margin: 7px 0; padding-left: 26px; }
.dg-an-check li::before, .dg-an-cross li::before { position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #FFFFFF; font: 900 .6rem "Font Awesome 6 Free"; }
.dg-an-check li::before { content: "\f00c"; background: #16A34A; }
.dg-an-cross li::before { content: "\f00d"; background: #DC2626; }
.dg-an-num { counter-reset: dg-an; }
.dg-an-num li { position: relative; margin: 9px 0; padding-left: 34px; counter-increment: dg-an; }
.dg-an-num li::before { content: counter(dg-an); position: absolute; top: -1px; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1DB954; color: #0C2A1B; font-size: .78rem; font-weight: 800; }
.dg-an-num.is-defend li::before { background: #0C2A1B; color: #FFFFFF; }
.dg-an-player { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.dg-an-shirt { position: relative; display: inline-block; flex-shrink: 0; width: 64px; height: 60px; }
.dg-an-shirt svg { width: 100%; height: 100%; fill: var(--dg-an-shirt); stroke: #0C2A1B; stroke-width: 1.2; }
.dg-an-shirt b, .dg-an-shirt input { position: absolute; top: 14px; right: 12px; left: 12px; display: block; padding: 0; border: 0; outline: 0; background: transparent; color: var(--dg-an-number); font-size: 1.15rem; font-weight: 800; line-height: 1.2; text-align: center; }
.dg-an-shirt input::placeholder { color: inherit; opacity: .55; }
.dg-an-conclusion { position: relative; overflow: hidden; padding: 22px 26px; border-radius: 20px; background: #0C2A1B; color: #FFFFFF; }
.dg-an-conclusion::after { content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border: 2px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none; }
.dg-an-conclusion textarea { position: relative; z-index: 1; width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #FFFFFF; resize: vertical; }
.dg-an-conclusion textarea::placeholder { color: rgba(255, 255, 255, .5); }
.dg-an-label { color: #1DB954; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dg-an-version { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid #EDF1EE; }
.dg-an-version:first-of-type { border-top: 0; }
/* Editar. */
.dg-an-card .card-header { display: flex; align-items: center; gap: 10px; }
.dg-an-step { display: grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0C2A1B; color: #1DB954; font-size: .72rem; font-weight: 800; }
.dg-an-step.is-light { background: #1DB954; color: #0C2A1B; }
.dg-an-sub { margin-left: auto; color: #6B7C71; font-size: .75rem; }
.dg-an-progress { display: inline-flex; gap: 4px; }
.dg-an-progress i { width: 22px; height: 5px; border-radius: 3px; background: #DCE6DF; }
.dg-an-progress i.is-on { background: #1DB954; }
.dg-an-how { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-an-how label { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 130px; padding: 12px; border: 1px solid #E3EAE5; border-radius: 14px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.dg-an-how label .fa-solid { color: #15803D; }
.dg-an-how .btn-check:checked + label { border-color: #1DB954; background: #F0FBF4; box-shadow: 0 0 0 1px #1DB954; }
.dg-an-how .btn-check:focus-visible + label, .dg-an-chips .btn-check:focus-visible + .dg-an-chip, .dg-an-swatches .btn-check:focus-visible + label { outline: 2px solid #15803D; outline-offset: 2px; }
.dg-an-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dg-an-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px dashed #C5D3CA; border-radius: 999px; background: #FFFFFF; color: #5B6E62; font-size: .78rem; font-weight: 600; cursor: pointer; user-select: none; }
.dg-an-chip::before { content: "+"; font-weight: 800; }
.btn-check:checked + .dg-an-chip { border-style: solid; border-color: transparent; background: #E8F7EE; color: #14532D; }
.btn-check:checked + .dg-an-chip::before { content: "\2713"; }
.dg-an-list { display: flex; flex-direction: column; gap: 2px; }
.dg-an-rows { counter-reset: dg-an-edit; }
.dg-an-li { display: flex; align-items: flex-start; gap: 10px; padding: 3px 6px; border-radius: 10px; counter-increment: dg-an-edit; }
.dg-an-li:hover, .dg-an-li:focus-within { background: #F3F7F4; }
.dg-an-li textarea { flex: 1; min-width: 0; padding: 5px 0; border: 0; outline: 0; overflow: hidden; resize: none; background: transparent; font-size: .9rem; line-height: 1.4; }
.dg-an-li .dg-an-mark, .dg-an-li .dg-an-x { margin-top: 5px; }
.dg-an-mark { display: grid; flex-shrink: 0; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #FFFFFF; font: 900 .6rem "Font Awesome 6 Free"; }
.dg-an-list.is-dot .dg-an-mark { width: 7px; height: 7px; margin: 11px 5.5px 0; background: #9DB3A5; }
.dg-an-list.is-check .dg-an-mark { background: #16A34A; }
.dg-an-list.is-check .dg-an-mark::before { content: "\f00c"; }
.dg-an-list.is-cross .dg-an-mark { background: #DC2626; }
.dg-an-list.is-cross .dg-an-mark::before { content: "\f00d"; }
.dg-an-list.is-number .dg-an-mark { width: 24px; height: 24px; margin-top: 2px; background: #1DB954; color: #0C2A1B; font-family: inherit; font-size: .72rem; font-weight: 800; }
.dg-an-list.is-number .dg-an-mark::before { content: counter(dg-an-edit); }
.dg-an-list.is-number.is-defend .dg-an-mark { background: #0C2A1B; color: #FFFFFF; }
.dg-an-x { padding: 2px 4px; border: 0; background: transparent; color: #A3B2A8; visibility: hidden; }
.dg-an-x:hover { color: #DC2626; }
.dg-an-li:hover .dg-an-x, .dg-an-li:focus-within .dg-an-x, .dg-an-x.is-visible { visibility: visible; }
@media (hover: none) { .dg-an-x { visibility: visible; } }
.dg-an-add { align-self: flex-start; padding: 6px; border: 0; background: transparent; color: #15803D; font-size: .82rem; font-weight: 600; }
.dg-an-add[hidden] { display: none; }
.dg-an-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-an-swatches label { width: 28px; height: 28px; border: 2px solid #FFFFFF; border-radius: 50%; background: var(--dg-an-swatch); box-shadow: 0 0 0 1px #CFDCD3; cursor: pointer; }
.dg-an-swatches .btn-check:checked + label { box-shadow: 0 0 0 2px #0C2A1B; }
.dg-an-player-shirt { flex-shrink: 0; width: 62px; }
.dg-an-player-edit { height: 100%; padding: 14px; border: 1px solid #E3EAE5; border-radius: 16px; }
.dg-an-position { min-width: 0; max-width: 100%; padding: 3px 26px 3px 11px; border: 0; border-radius: 999px; background: #EEF2EF; color: #3F5A49; font-size: .78rem; font-weight: 600; }
.dg-an-player-new { display: grid; place-items: center; width: 100%; height: 100%; min-height: 150px; border: 2px dashed #CFDCD3; border-radius: 16px; background: #FAFCFA; color: #15803D; font-weight: 600; }
.dg-an-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 10px 12px 10px 22px; border-radius: 999px; background: #0C2A1B; color: #FFFFFF; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); }
.dg-an-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #1DB954; }
.dg-an-form.is-dirty .dg-an-bar-dot { background: #FACC15; }
@media (max-width: 575.98px) { .dg-an-bar { border-radius: 20px; } }
.dg-an-others { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid #BFE5CC; border-radius: 18px; background: #F0FBF4; }
.dg-an-others-icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #0C2A1B; color: #1DB954; }
.dg-an-other { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #D6EEDD; }
.dg-an-other:first-of-type { border-top: 0; padding-top: 2px; }
.dg-an-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.dg-an-facts dt { color: #5B6E62; font-size: .82rem; font-weight: 600; }
.dg-an-facts dd { margin: 0; }
.dg-an-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--dg-an-swatch); box-shadow: 0 0 0 1px #CFDCD3; }
.dg-an-modal-body { background: #F4F7F5; }
/* El enlace compartido. */
.dg-an-share-hero { text-align: center; }
.dg-an-share-name { margin: .6rem 0 .3rem; color: #FFFFFF; font-size: 1.6rem; font-weight: 800; }
/* La sesión compartida en el móvil (Juan, 30/10): la cabecera, más baja, a la izquierda y con el botón pequeño. */
@media (max-width: 767.98px) {
    .dg-ss-hero { padding: .85rem 1rem; text-align: left; }
    .dg-ss-hero .dg-share-heading { margin-bottom: .15rem; font-size: .6875rem; }
    .dg-ss-hero .dg-an-share-name { margin: 0 0 .15rem; font-size: 1.15rem; line-height: 1.25; }
    .dg-ss-hero .dg-share-when { font-size: .75rem; }
    .dg-ss-hero .dg-ss-hero-action { margin-top: .6rem !important; }
    .dg-ss-hero .dg-ss-hero-action .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; }
}
@media print { .dg-an-pitch, .dg-an-conclusion, .dg-an-phase-icon, .dg-an-pill, .dg-an-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* 36. La ficha de la tarea y su pizarra (Panel/Exercises/form, 29/10, Juan, tras la maqueta):
   las listas en un desplegable con buscador (element/panel/term_picker, custom.js 2as), con lo
   elegido como pastillas dentro del campo, que es un .form-select. */
.dg-multi-field { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; min-height: calc(1.5em + .75rem + 2px); cursor: pointer; }
.dg-multi-chips { display: contents; }
.dg-multi-chips .badge { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding-right: .3rem; white-space: normal; text-align: left; }
.dg-multi-remove { display: inline-grid; flex-shrink: 0; place-items: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); color: inherit; font-size: .6rem; }
.dg-multi-remove:hover { background: rgba(255, 255, 255, .4); }
.dg-multi-menu { width: 100%; max-height: 20rem; overflow-y: auto; }
.dg-multi-search { position: sticky; top: -.5rem; z-index: 1; margin-top: -.5rem; padding: .5rem .75rem; background: var(--bs-dropdown-bg); }
.dg-multi-option { display: flex; align-items: center; gap: .625rem; white-space: normal; cursor: pointer; }
.dg-multi-option .form-check-input { flex-shrink: 0; margin: 0; }
.dg-multi-option[hidden] { display: none; }
.dg-multi-group { padding-top: .75rem; color: var(--bs-secondary-color); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[data-dg-multi-group][hidden] { display: none; }
/* La pizarra nueva: sobre el césped, lo neutro del material va claro; el comodín en amarillo y el
   portero en negro con el borde amarillo (sus dorsales los pone quien pinta). */
.dg-board { --dg-piece-ink: #E4E4E7; }
.dg-board-player.is-c > circle:first-child { fill: #FACC15; }
.dg-board-player.is-k > circle:first-child { fill: #18181B; stroke: #FACC15; }
.dg-board-player.is-k text { fill: #FACC15; }
.dg-board-player.is-c text { fill: var(--dg-zinc-900); }

/* 37. La sesión (Panel/TrainingSessions/view y add, element/panel/session/, 29/10, Juan, tras la maqueta:
   «como Alonbalon pero con lo nuestro»): la ventana «Nueva sesión» (una o que se repita), los datos y lo que
   se trabaja arriba, las tareas en huecos con su número, sus minutos y su pizarra, y «Elige la tarea». */
.dg-contents { display: contents; }
.dg-session-choice { display: flex; gap: .85rem; align-items: flex-start; height: 100%; padding: 1rem; border: 2px solid var(--dg-zinc-200); border-radius: 1rem; cursor: pointer; transition: border-color .15s var(--dg-ease-out), background-color .15s var(--dg-ease-out); }
.dg-session-choice:hover { border-color: var(--dg-zinc-300); }
.btn-check:checked + .dg-session-choice { border-color: var(--bs-primary); background-color: var(--dg-green-50); }
.btn-check:focus-visible + .dg-session-choice { box-shadow: 0 0 0 .25rem rgba(29, 185, 84, .25); }
.dg-session-time { display: flex; height: .6rem; border-radius: 50rem; overflow: hidden; background: var(--dg-zinc-100); }
.dg-session-time > span { height: 100%; }
.dg-session-time > .is-0, .dg-session-legend .is-0 { background: #1DB954; }
.dg-session-time > .is-1, .dg-session-legend .is-1 { background: #0F7A3D; }
.dg-session-time > .is-2, .dg-session-legend .is-2 { background: #FACC15; }
.dg-session-time > .is-3, .dg-session-legend .is-3 { background: #38BDF8; }
.dg-session-time > .is-4, .dg-session-legend .is-4 { background: #F97316; }
.dg-session-time > .is-5, .dg-session-legend .is-5 { background: #A78BFA; }
.dg-session-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--dg-zinc-600); }
.dg-session-legend i { display: inline-block; width: .6rem; height: .6rem; margin-right: .35rem; border-radius: 50%; }
.dg-session-legend .is-free { background: var(--dg-zinc-200); }
.dg-session-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.dg-session-slot { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dg-zinc-200); border-radius: 1rem; background: #FFFFFF; }
.dg-session-slot > .dg-board, .dg-session-slot .dg-board-player-wrap .dg-board, .dg-session-pick .dg-board { max-height: none; border-radius: 0; }
.dg-session-num { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #FFFFFF; color: #0C2A1B; font-size: .8125rem; font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.dg-session-min { position: absolute; top: .6rem; right: .6rem; z-index: 2; padding: .15rem .55rem; border-radius: 50rem; background: rgba(12, 42, 27, .85); color: #FFFFFF; font-size: .75rem; font-weight: 700; }
.dg-session-draw { display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.dg-session-draw:hover { color: #FFFFFF; }
.dg-session-slot-body { flex-grow: 1; padding: .85rem 1rem .5rem; }
.dg-session-type { color: var(--dg-green-700, #15803D); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dg-session-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.dg-session-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--dg-zinc-200); }
.dg-session-dots i.is-on { background: #1DB954; }
.dg-session-slot-foot { display: flex; align-items: center; gap: .25rem; padding: .35rem .5rem .6rem 1rem; }
.dg-session-slot-foot .btn { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .25rem; }
.dg-session-slot-foot form { display: inline; }
.dg-session-minutes { width: 15rem; }
.dg-session-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; min-height: 17rem; border: 2px dashed var(--dg-zinc-300); border-radius: 1rem; background: transparent; color: var(--dg-zinc-500); font-weight: 700; transition: border-color .15s var(--dg-ease-out), color .15s var(--dg-ease-out), background-color .15s var(--dg-ease-out); }
.dg-session-add:hover, .dg-session-add:focus-visible { border-color: var(--bs-primary); background: var(--dg-green-50); color: var(--bs-primary); }
.dg-session-plus { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--bs-primary); color: #FFFFFF; font-size: 1.25rem; }
.dg-session-types { display: flex; flex-direction: column; gap: 2px; }
.dg-session-types > button { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .75rem; border: 0; border-radius: .6rem; background: transparent; color: var(--dg-zinc-700); font-size: .875rem; text-align: left; }
.dg-session-types > button > span:last-child { color: var(--dg-zinc-400); }
.dg-session-types > button:hover { background: var(--dg-zinc-50); }
.dg-session-types > button.is-active { background: var(--dg-green-50); color: #0F3D24; font-weight: 700; }
.dg-session-types-group { padding: .75rem .75rem .25rem; color: var(--dg-zinc-500); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dg-session-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.dg-session-search { max-width: 16rem; }
.dg-session-pick { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--dg-zinc-200); border-radius: 1rem; background: #FFFFFF; }
[data-dg-pick][hidden] { display: none !important; }
@media (max-width: 575.98px) {
    .dg-session-search { max-width: none; }
}

/* 38. «Mis equipos» (Panel/Teams/index, element/panel/teams/, 29/10, Juan eligió la maqueta A, «cromo»):
   las licencias en una barra, cada equipo activo un cromo con el escudo sobre el verde bosque (el círculo
   y la línea del centro del campo de fondo), sus tres cifras, lo siguiente y «Entrar» con el menú «⋯»;
   el hueco para crear otro y los archivados en filas pequeñas. ------------------------------------------- */
.dg-licenses { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: -.75rem; }
.dg-licenses-bar { display: flex; gap: .25rem; }
.dg-licenses-bar > span { width: 1.75rem; height: .5rem; border-radius: 999px; background-color: var(--dg-green-600); }
.dg-licenses-bar > span.is-free { background-color: var(--dg-zinc-200); }
.dg-team-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--dg-zinc-200); border-radius: 1.25rem; background-color: #FFFFFF; transition: box-shadow .15s ease; }
.dg-team-card:hover { box-shadow: 0 10px 28px rgba(12, 42, 27, .12); }
/* Al pasar por el cromo (o al llegar con el teclado), «Entrar» se pone en verde como el del equipo actual (Juan, 29/10). */
.dg-team-card:hover .dg-team-card-enter.btn-outline-primary, .dg-team-card:focus-within .dg-team-card-enter.btn-outline-primary { background-color: var(--dg-green-600); border-color: var(--dg-green-600); color: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 61, 36, .18), 0 4px 12px -6px rgba(var(--bs-primary-rgb), .55); }
/* Sin `position`: así el enlace del nombre (`stretched-link`) cubre todo el cromo, no solo la cabecera (Juan, 29/10);
   el círculo y la línea del centro del campo, de fondo. */
.dg-team-card-top {
    display: flex; align-items: center; gap: 1rem; padding: 1.25rem; color: #FFFFFF;
    background-color: #0C2A1B;
    background-image: radial-gradient(circle at calc(100% + 1rem) -1rem, transparent 4.4rem, rgba(255, 255, 255, .08) 4.45rem, rgba(255, 255, 255, .08) 4.55rem, transparent 4.6rem),
        linear-gradient(90deg, transparent calc(100% - 1.125rem), rgba(255, 255, 255, .06) calc(100% - 1.125rem), rgba(255, 255, 255, .06) calc(100% - 1rem), transparent calc(100% - 1rem));
}
.dg-team-card.is-current .dg-team-card-top { padding-right: 7.5rem; }
.dg-crest.dg-team-card-crest { width: 3.5rem; height: 3.5rem; font-size: 1rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
img.dg-crest.dg-team-card-crest { padding: .3rem; background-color: #FFFFFF; object-fit: contain; }
.dg-team-card-club { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.dg-team-card-club > a { color: #FFFFFF; text-decoration: none; }
.dg-team-card-team { color: var(--dg-green-200); font-weight: 500; }
.dg-team-card-now { position: absolute; z-index: 1; top: .75rem; right: .75rem; padding: .2rem .6rem; border-radius: 999px; background-color: #1DB954; color: #0C2A1B; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dg-team-card-body { flex: 1; padding: 1rem 1.25rem; }
.dg-team-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.dg-team-card-stat { min-width: 0; padding: .5rem .625rem; border-radius: .75rem; background-color: var(--dg-green-50); }
.dg-team-card-stat > b { display: block; color: #0C2A1B; font-size: 1.125rem; line-height: 1.2; }
.dg-team-card-stat > small { display: block; color: var(--bs-secondary-color); font-size: .75rem; }
.dg-team-card-form { display: flex; gap: .2rem; height: 1.35rem; align-items: center; }
.dg-team-card-form > i { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; color: #FFFFFF; font-size: .625rem; font-style: normal; font-weight: 800; }
.dg-team-card-form > .is-win { background-color: var(--dg-green-600); }
.dg-team-card-form > .is-draw { background-color: var(--dg-zinc-400); }
.dg-team-card-form > .is-loss { background-color: #DC2626; }
.dg-team-card-next { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.dg-team-card-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background-color: var(--dg-green-50); color: var(--dg-green-700); }
.dg-team-card-foot { display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem 1.25rem; }
/* «Entrar» y el menú, por encima del enlace que cubre la tarjeta. */
.dg-team-card-foot > .btn, .dg-team-card-foot > .dropdown, .dg-team-archived .btn, .dg-team-archived .dropdown { position: relative; z-index: 2; }
.dg-team-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 100%; min-height: 16rem; border: 2px dashed var(--dg-green-200); border-radius: 1.25rem; background-color: rgba(238, 250, 242, .5); color: var(--dg-green-700); font-weight: 700; text-decoration: none; }
.dg-team-new:hover { background-color: var(--dg-green-50); color: var(--dg-green-800); }
.dg-team-new-plus { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background-color: var(--dg-green-600); color: #FFFFFF; font-size: 1.25rem; }
.dg-team-archived { position: relative; display: flex; align-items: center; gap: .875rem; padding: .75rem 1rem; border: 1px solid var(--dg-zinc-200); border-radius: 1rem; background-color: #FFFFFF; }
.dg-team-archived > .dg-crest { filter: grayscale(1); opacity: .7; }
.dg-team-archived:hover { background-color: var(--dg-green-50); }
@media (max-width: 767.98px) {
    .dg-team-new { min-height: 8rem; }
    /* En el móvil, «Estás aquí» encima del nombre, que así no se corta. */
    .dg-team-card.is-current .dg-team-card-top { padding-top: 2.5rem; padding-right: 1.25rem; }
}