/* ============================================================
   Sistema de diseño MiBasket — paneles
   Neutros FIJOS (escala slate) + marca POR CLUB (multi-tenant).
   El color primario y el de acento se inyectan en runtime desde
   el branding del club (ver index.html: aplicarTemaClub). Los
   valores por defecto son los del club Murgi (verde).
   ============================================================ */
:root {
    /* ---- Neutros fijos (no dependen del club) ---- */
    --mb-titulo: #0F172A;          /* títulos de página */
    --mb-texto-fuerte: #1E293B;    /* cabeceras de tarjeta */
    --mb-texto: #475569;           /* texto general */
    --mb-texto-suave: #64748B;     /* subtítulos / descripciones */
    --mb-placeholder: #9CA3AF;     /* placeholders / textos indicativos */
    --mb-borde: #D1D5DB;           /* borde de inputs */
    --mb-borde-suave: #E2E8F0;     /* separadores / bordes de tarjeta */
    --mb-borde-dash: #CBD5E1;      /* borde de la zona drag&drop */
    --mb-superficie: #F1F5F9;      /* fondo botón secundario */
    --mb-superficie-viva: #E2E8F0; /* hover botón secundario */
    --mb-bg: #F8FAFC;              /* fondo general de la pantalla */
    --mb-sidebar: #ffffff;
    --mb-hover: #F1F5F9;

    /* ---- Marca (por club) — valores por defecto: MiBasket (naranja/marino) ---- */
    --mb-primary: #e8762c;
    --mb-primary-hover: color-mix(in srgb, var(--mb-primary) 90%, black);   /* activo: oscurece */
    --mb-primary-claro: color-mix(in srgb, var(--mb-primary) 85%, white);   /* hover: aclara (más perceptible) */
    --mb-primary-contraste: #ffffff;
    --mb-acento: #1d3557;          /* color secundario del club (acento) */
    --mb-acento-suave: color-mix(in srgb, var(--mb-acento) 14%, white);     /* fondos/realces sutiles de acento */
    --mb-glow: color-mix(in srgb, var(--mb-primary) 25%, transparent); /* foco */

    /* ---- Peligro ---- */
    --mb-danger: #EF4444;
    --mb-danger-bg: #FEE2E2;

    /* ---- Radios / sombra / tipografía ---- */
    --mb-radio: 12px;              /* tarjetas (alias legacy) */
    --mb-radio-card: 12px;
    --mb-radio-control: 8px;
    --mb-sombra-card: 0 1px 3px rgba(0, 0, 0, .05);
    --mb-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---- Scroll ---- */
    --mb-scroll: #c2c7d0;

    /* ---- Compatibilidad con tokens antiguos (apuntan a la marca) ---- */
    --mb-marino: var(--mb-primary);
    --mb-marino-osc: var(--mb-primary-hover);
    --mb-naranja: var(--mb-acento);
}

/* ---------- Barra de scroll integrada con la página ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--mb-scroll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mb-scroll);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(0.9); }

.panel-shell {
    display: flex;
    min-height: 100vh;
    background: var(--mb-bg);
}

/* ---------- Barra lateral ---------- */
.panel-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--mb-sidebar);
    border-right: 1px solid var(--mb-borde);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.9rem;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
}

.panel-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem 0.4rem 1rem;
}

.panel-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mb-marino);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.panel-brand-titulo {
    font-weight: 700;
    color: var(--mb-titulo);
    line-height: 1.1;
}

.panel-brand-sub {
    font-size: 0.75rem;
    color: var(--mb-texto);
}

.panel-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
    flex: 1 1 auto;
    min-height: 0;        /* permite que el nav encoja y haga scroll */
    overflow-y: auto;     /* el menú scrollea; usuario y "cerrar sesión" quedan siempre visibles */
}

.panel-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: var(--mb-texto);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background-color .12s, color .12s;
}

.panel-nav-link i {
    font-size: 1.05rem;
}

.panel-nav-link:hover {
    background: var(--mb-hover);
    color: var(--mb-titulo);
}

.panel-nav-link.active {
    background: var(--mb-marino);
    color: #fff;
    /* Indicador con el color secundario del club (acento) a la izquierda */
    box-shadow: inset 3px 0 0 var(--mb-acento);
}
.panel-nav-link.active i { color: var(--mb-acento); }

/* Ítem de menú que ejecuta una acción (no navega), p. ej. "Guía de bienvenida": igualar al NavLink */
button.panel-nav-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* Encabezado de sección dentro del menú (p. ej. "Mi cuenta") */
.panel-nav-titulo {
    padding: 0.5rem 0.75rem 0.15rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mb-texto);
    opacity: .55;
}
.panel-nav-titulo:first-child { margin-top: 0; }
/* Encabezado de sección clicable (pliega/despliega su bloque, estado en localStorage). */
.panel-nav-titulo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.panel-nav-titulo-toggle:hover { opacity: .85; }
.panel-nav-titulo-toggle .bi { font-size: .8em; }

/* ---------- Bloque de usuario ---------- */
.panel-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.5rem 0.4rem;
    border-top: 1px solid var(--mb-borde);
    margin-top: 0.5rem;
}

.panel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mb-naranja);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.panel-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Zona de usuario clicable (lleva a /cuenta/perfil) */
.panel-user-link { text-decoration: none; cursor: pointer; border-radius: 10px; transition: background-color .12s; }
.panel-user-link:hover { background: var(--mb-hover); }
.panel-user-link .panel-user-nombre { text-decoration: none; }

/* Avatar grande de la página de cuenta */
.mb-avatar-grande {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--mb-naranja);
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.mb-avatar-grande img { width: 100%; height: 100%; object-fit: cover; }

.panel-user-nombre {
    font-weight: 600;
    color: var(--mb-titulo);
    font-size: 0.85rem;
    line-height: 1.1;
}

.panel-user-rol {
    font-size: 0.72rem;
    color: var(--mb-texto);
}

.panel-logout {
    margin-top: 0.35rem;
    border: 1px solid var(--mb-borde);
    background: #fff;
    color: var(--mb-texto);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    cursor: pointer;
}

.panel-logout:hover {
    background: var(--mb-hover);
    color: var(--mb-titulo);
}

/* ---------- Área de contenido ---------- */
.panel-main {
    flex: 1;
    min-width: 0;
    padding: 2rem 2.25rem;
}

.panel-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.panel-titulo {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--mb-titulo);
    margin: 0;
}

.panel-sub {
    color: var(--mb-texto);
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
}

/* ---------- Tarjetas ---------- */
.panel-card {
    background: #fff;
    border: 1px solid var(--mb-borde-suave);
    border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card);
    padding: 1.5rem; /* 24px */
    margin-bottom: 1.25rem;
    overflow: hidden; /* recorta la banda de cabecera a las esquinas redondeadas */
}

.panel-card-titulo {
    font-size: 1.0625rem; /* ~17px */
    font-weight: 600;
    color: var(--mb-texto-fuerte);
    margin: 0 0 1rem;
}
/* Icono lineal antepuesto al título de la tarjeta (doc §1) */
.panel-card-titulo > i:first-child {
    color: var(--mb-primary);
    margin-right: 0.5rem; /* 8px */
}
/* Banda de cabecera a sangre con tinte suave de marca + texto oscuro, separada del
   contenido por una línea. Solo cuando el título es el PRIMER hijo del contenedor
   (tarjeta o popup), para no descolocar layouts donde el título no abre la caja. */
.panel-card > .panel-card-titulo:first-child,
.modal-recorte > .panel-card-titulo:first-child {
    margin: -1.5rem -1.5rem 1.5rem;
    padding: 0.85rem 1.5rem;
    background: color-mix(in srgb, var(--mb-primary) 8%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--mb-primary) 16%, var(--mb-borde-suave));
    border-radius: var(--mb-radio-card) var(--mb-radio-card) 0 0;
}

/* Título de SECCIÓN dentro de una tarjeta (subdivisión): más grande que una etiqueta y
   teñido con el primario para que se aprecie como título. Sustituye a los <h3 class="h6">. */
.panel-seccion-titulo {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--mb-primary);
    margin: 1.4rem 0 0.7rem;
}
.panel-seccion-titulo:first-child { margin-top: 0; }
.panel-seccion-titulo > i:first-child { margin-right: 0.4rem; }

/* Importe monetario: nunca parte el "€" a otra línea + cifras tabulares alineadas. */
.moneda { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Cabeceras de tabla teñidas con el primario (se leen como títulos de columna de marca). */
.panel-card .table > thead th,
.modal-recorte .table > thead th { color: var(--mb-primary); font-weight: 600; }

/* Plantilla de equipo (popup con columnas dinámicas): las celdas NO parten el texto (cada
   valor en una línea) y las cabeceras envuelven hasta un ancho máximo. Así las columnas
   conservan un ancho legible y, cuando hay muchas, el contenedor (.table-responsive) hace
   scroll horizontal en vez de apelotonar el texto en vertical. */
.plantilla-tabla th { white-space: normal; min-width: 5rem; max-width: 11rem; vertical-align: bottom; }
.plantilla-tabla td { white-space: nowrap; }

/* Menú «Columnas» de la plantilla: por defecto se abre hacia la izquierda (en escritorio el
   botón está a la derecha de la cabecera). En móvil/tablet el botón cae a la izquierda al
   envolver, así que el menú se abre hacia la derecha para no salirse de la pantalla. */
.plantilla-cols-menu { right: 0; }
@media (max-width: 991.98px) {
    .plantilla-cols-menu { right: auto; left: 0; }
}

/* Cabecera de tarjeta: icono lineal + título + subtítulo (doc §1) */
.panel-card-cab {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}
.panel-card-cab > i {
    font-size: 1.15rem;
    line-height: 1.5rem;
    color: var(--mb-primary);
    flex-shrink: 0;
}
.panel-card-cab-tit {
    font-size: 1.0625rem; /* 16-18px */
    font-weight: 600;
    color: var(--mb-texto-fuerte);
    margin: 0;
    line-height: 1.3;
}
.panel-card-cab-sub {
    font-size: 0.8125rem; /* 13px */
    font-weight: 400;
    color: var(--mb-texto-suave);
    margin: 0.15rem 0 0;
}

/* ---------- Badges tipo pill ---------- */
.panel-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--mb-hover);
    color: var(--mb-texto);
}

.panel-badge-ok { background: #e6f4ea; color: #1e7e44; }
.panel-badge-off { background: #fdeaea; color: #b42318; }
.panel-badge-naranja { background: #fdf0e6; color: var(--mb-naranja); }
.panel-badge-info { background: #e7f0fb; color: #1a56b0; }
.panel-badge-gris { background: var(--mb-hover); color: var(--mb-texto-suave); }
/* Aviso fuerte (p. ej. «Datos modificados — revisar»): rojo sólido para que destaque en el listado. */
.panel-badge-danger { background: #b42318; color: #fff; }

/* ---------- Matriz de asistencia (Entrenamientos → Faltas) ----------
   Es una MATRIZ (jugador×sesión): NO se apila en móvil; se mantiene con scroll horizontal
   y la primera columna (el jugador) queda fija (sticky). */
.mb-matriz-wrap { max-height: 68vh; }
.mb-matriz-asis { border-collapse: separate; border-spacing: 0; }
.mb-matriz-asis th,
.mb-matriz-asis td { white-space: nowrap; vertical-align: middle; }
.mb-matriz-asis thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--mb-hover);
    border-bottom: 1px solid var(--mb-borde-suave);
}
.mb-matriz-asis .mb-col-jug {
    position: sticky; left: 0; z-index: 2;
    background: var(--mb-sidebar);
    text-align: left; min-width: 150px;
    box-shadow: 1px 0 0 var(--mb-borde-suave);
}
.mb-matriz-asis thead th.mb-col-jug { z-index: 3; background: var(--mb-hover); }
.mb-matriz-asis .mb-hora-col { font-size: 0.68rem; color: var(--mb-texto-suave); }
.mb-matriz-asis .mb-col-total,
.mb-matriz-asis .mb-col-pct { min-width: 34px; }
.mb-celda-asis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    font-weight: 700; font-size: 0.78rem;
}
.mb-asis-p { background: #e6f4ea; color: #1e7e44; }
.mb-asis-a { background: #fdeaea; color: #b42318; }
.mb-asis-j { background: #fef3d6; color: #9a6b00; }
.mb-asis-r { background: #fdecdc; color: #c2571a; }
.mb-asis-vacia { color: var(--mb-placeholder); background: transparent; }
.mb-leyenda-asis { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mb-texto); }

/* ---------- Filas de tabla clicables ---------- */
.fila-click { cursor: pointer; transition: background .12s ease; }
.fila-click:hover { background: var(--mb-hover); }
.fila-click .bi-chevron-right { font-size: 0.8rem; }

/* ---------- Cabecera del detalle (enlace volver + slug) ---------- */
/* Volver de página (Nivel 1): botón outline con flecha dentro de panel-page-head.
   La clase solo aporta la respiración bajo el botón; el estilo lo dan btn btn-sm btn-outline-secondary. */
.panel-volver { margin-bottom: 0.5rem; }

.panel-slug {
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--mb-hover);
    color: var(--mb-texto);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ---------- Pestañas (menú superior dentro de una sección) ---------- */
.panel-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mb-borde);
    margin-bottom: 1.25rem;
    /* Si las pestañas no caben (tablet), se deslizan en horizontal sin desbordar la página. */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
.panel-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.panel-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    white-space: nowrap;
    border: none;
    background: none;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mb-texto);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}
.panel-tab:hover { color: var(--mb-titulo); }
.panel-tab.activa {
    color: var(--mb-marino);
    border-bottom-color: var(--mb-naranja);
}

/* Pestañas que colapsan a un selector en móvil/tablet.
   El <select> sustituye a la barra de pestañas por debajo del mismo punto en el
   que el panel pasa a layout compacto (sidebar como cajón, 991.98px). Se presenta
   con el aspecto de la PESTAÑA ACTIVA (no de un input): sin caja, subrayado de
   acento y flecha propia; la línea base fina a todo el ancho la dibuja el
   contenedor, igual que `.panel-tabs` en escritorio. */
.panel-tabs-select-wrap { display: none; }
@media (max-width: 991.98px) {
    .panel-tabs-colapsable { display: none; }

    .panel-tabs-select-wrap {
        display: block;
        border-bottom: 1px solid var(--mb-borde);
        margin-bottom: 1.25rem;
    }
    .panel-tabs-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: inline-block;
        width: auto;
        max-width: 100%;
        margin: 0 0 -1px;                          /* el subrayado se apoya en la línea base */
        padding: 0.65rem 1.6rem 0.65rem 0;         /* sin sangría izquierda; hueco a la derecha para la flecha */
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.15rem center;
        background-size: 1rem;
        border: 0;
        border-bottom: 2px solid var(--mb-naranja);
        border-radius: 0;
        color: var(--mb-marino);
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.2;
        cursor: pointer;
    }
    .panel-tabs-select:focus {
        outline: none;
        box-shadow: none;
        border-bottom-color: var(--mb-naranja);
    }
}

/* ---------- Editor de texto enriquecido (Quill) ----------
   Por defecto el snow-theme aplica `.ql-container { height: 100% }`, que dentro
   de un formulario colapsa la caja del contenedor: el área editable se desborda
   por encima de los controles siguientes (no se podían pulsar). Fijamos una
   altura real para que el editor ocupe su caja y los campos de debajo queden
   libres.
   OJO: `new Quill(el)` convierte el propio div `.editor-texto` en el
   `.ql-container`, por lo que el override va como selector COMPUESTO (mismo
   elemento) y no descendente; se incluye también el descendente por si alguna
   versión de Quill envolviera el contenedor en un hijo. */
.editor-texto { position: relative; }
.editor-texto.ql-container,
.editor-texto .ql-container {
    height: auto;
    min-height: 180px;
    font-size: 0.95rem;
}
.editor-texto .ql-editor { min-height: 180px; }

/* Vista de código HTML del editor (botón «<>»): se inserta como hermano del .ql-container. */
.editor-html-fuente {
    min-height: 180px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    white-space: pre;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ---------- Contenido enriquecido renderizado (HTML guardado del editor) ----------
   Estilos para que tablas, imágenes y demás se vean bien donde se pinta con MarkupString. */
.contenido-rico img { max-width: 100%; height: auto; }
.contenido-rico table {
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    margin: 0.5rem 0;
}
.contenido-rico th,
.contenido-rico td {
    border: 1px solid var(--mb-borde, #dee2e6);
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
}
.contenido-rico th { background: rgba(0, 0, 0, 0.04); font-weight: 600; }
.contenido-rico figure { margin: 0.5rem 0; }
.contenido-rico blockquote {
    border-left: 3px solid var(--mb-borde, #dee2e6);
    margin: 0.5rem 0;
    padding: 0.25rem 0 0.25rem 0.85rem;
    color: var(--mb-texto-tenue, #6c757d);
}
.contenido-rico pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    overflow: auto;
}

/* ---------- Aviso de consentimiento opcional no marcado ---------- */
/* Recuadro destacado para animar a marcar una autorización opcional (p. ej. derechos de imagen).
   El color de acento (border-left) lo fija el club por cláusula; el fondo es un tinte muy suave del
   mismo para que el texto se lea bien. Nunca bloquea: es solo un aviso informativo. */
.aviso-consentimiento {
    padding: 0.6rem 0.85rem;
    border-radius: var(--mb-radio-control);
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.875rem;
}
.aviso-consentimiento .contenido-rico :last-child { margin-bottom: 0; }
.aviso-consentimiento .contenido-rico :first-child { margin-top: 0; }

/* ---------- Landing pública ---------- */
.landing-top { color: #fff; }
/* Hero con imagen de fondo: la foto va en el fondo (cover) y un velo de color encima da legibilidad. */
.landing-top.con-imagen { position: relative; overflow: hidden; }
.landing-top.con-imagen .landing-hero-velo { position: absolute; inset: 0; z-index: 0; }
.landing-top.con-imagen .landing-hero { position: relative; z-index: 1; }
.landing-top.con-imagen { min-height: 360px; display: flex; align-items: center; }
.landing-top.con-imagen .landing-hero { width: 100%; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

.landing-hero { text-align: center; padding: 2.5rem 1rem 4.5rem; }
.landing-hero-logo {
    height: 115px;
    max-width: 240px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 1.5rem;
}
.landing-hero h1 { font-weight: 800; max-width: 900px; margin: 0 auto; line-height: 1.15; }
.landing-hero-sub { font-size: 1.15rem; opacity: .9; max-width: 680px; margin: 1rem auto 0; }
.landing-hero-botones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- Sección de texto libre configurable (v2) ---------- */
/* Tipografía del título (opción por sección). La «moderna» es la de siempre (Inter, sin clase). */
.titulo-tipografia-clasica { font-family: Georgia, 'Times New Roman', serif; }
.titulo-tipografia-elegante { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.titulo-tipografia-manuscrita { font-family: 'Caveat', 'Segoe Script', cursive; }

/* Modo héroe: la imagen de la sección pasa a fondo (cover) y el texto se superpone con un velo oscuro.
   Solo CSS (SSR-safe, sin JS). El background-image, el velo y su opacidad se pasan inline desde el render. */
.seccion-texto-hero { position: relative; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; }
.seccion-texto-hero .seccion-texto-velo { position: absolute; inset: 0; background: #000; z-index: 0; }
.seccion-texto-hero > .container { position: relative; z-index: 1; width: 100%; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.seccion-texto-hero .contenido-rico,
.seccion-texto-hero .landing-seccion-titulo { color: inherit; }

/* Carrusel de noticias recientes (bajo las 3 destacadas): scroll-snap horizontal + flechas (sin librerías). */
.noticias-carrusel-wrap { display: flex; align-items: center; gap: .5rem; }
.noticias-carrusel {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .25rem .25rem 1rem; flex: 1 1 auto; scrollbar-width: thin;
}
.noticia-mini {
    flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column;
    border: 1px solid var(--mb-borde-suave); border-radius: 12px; overflow: hidden; background: #fff;
    transition: box-shadow .18s, transform .18s;
}
.noticia-mini:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .10); transform: translateY(-2px); }
.noticia-mini-img {
    height: 120px; background-size: cover; background-position: center; background-color: var(--mb-bg);
    display: flex; align-items: center; justify-content: center; color: #c2ccd9; font-size: 1.6rem;
}
.noticia-mini-cuerpo { padding: .6rem .75rem; }
.noticia-mini-titular {
    font-weight: 600; color: var(--mb-texto-fuerte); line-height: 1.25; margin-top: .15rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.noticias-carrusel-flecha {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mb-borde);
    background: #fff; color: var(--mb-texto); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.noticias-carrusel-flecha:hover { color: var(--mb-primary); border-color: var(--mb-primary); }
@media (max-width: 767.98px) {
    .noticias-carrusel-flecha { display: none; }   /* en móvil se desliza con el dedo */
    .noticia-mini { flex-basis: 200px; }
}

.landing-seccion-titulo { text-align: center; font-weight: 700; margin-bottom: 0.5rem; }

.card-club {
    background: #fff;
    border: 1px solid var(--mb-borde);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    padding: 1.5rem;
    height: 100%;
    text-align: center;
}
.card-club-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.caja-registro {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.10);
    padding: 2rem;
    max-width: 480px;
    margin: 1.5rem auto 0;
}

.sponsors-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}
.sponsors-flex img { height: 56px; max-width: 150px; object-fit: contain; transition: transform .2s ease; }
.sponsors-flex a:hover img { transform: scale(1.05); }

.landing-footer { color: #fff; padding: 2.5rem 0 1.75rem; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-legal a, .landing-footer a { color: #fff; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .footer-grid { grid-template-columns: 1fr; }
    .landing-hero { padding: 1.5rem 1rem 3rem; }
    .landing-hero-logo { height: 80px; margin-bottom: 1rem; }
}

/* ===== PR-4: navegación pública ===== */
/* Cabecera pública del club (CabeceraPublica): barra clara reutilizable por la landing y las
   páginas de Noticias. En ≤767.98px los enlaces colapsan tras el botón de menú (toggle Blazor). */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Colores configurables por el club (--nav-bg/--nav-fg); si no, caen a los tokens de siempre. */
    background: var(--nav-bg, var(--mb-superficie));
    border-bottom: 1px solid var(--mb-borde);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
    overflow: visible;   /* deja que el escudo colgante sobresalga por debajo de la barra */
}

/* Escudo colgante: placa con el logo que cuelga a la izquierda de la barra (sustituye al logo suelto).
   Fondo configurable (inline) y márgenes a los 4 lados. El margen inferior negativo lo hace «colgar»
   sin agrandar la barra. La altura del logo se fija en píxeles (inline, style="height:Npx"); la placa
   ENVUELVE al logo: al ser inline-flex, su ancho sigue la proporción del logo (logos horizontales ⇒
   placa ancha) con su padding uniforme alrededor. No se recorta la imagen (sin max-width). */
.escudo-colgante {
    display: inline-flex; align-items: center; justify-content: center;
    width: fit-content;
    padding: .6rem .9rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
    position: relative; z-index: 5;
    margin: -.4rem .35rem -2.2rem 0;
}
/* Alto por defecto (72px) si no llega el inline; width auto + sin max-width = respeta proporción sin recortar. */
.escudo-colgante img { height: 72px; width: auto; max-width: none; object-fit: contain; display: block; }
@media (max-width: 767.98px) {
    .escudo-colgante { padding: .45rem .65rem; margin-bottom: -1.5rem; border-radius: 12px; }
    /* En móvil, cap del alto para que un valor grande no rompa el nav (respeta proporción: width auto). */
    .escudo-colgante img { max-height: 72px; }
}

/* Caja de la vista previa del escudo en el builder (formularios de la barra): fondo a cuadros suave para
   que la placa se lea sobre cualquier color, con scroll interno si el logo crece mucho. La placa dentro
   se pinta con margin:0 (inline) para no colgar aquí. */
.escudo-preview-caja {
    display: flex; align-items: center; justify-content: center;
    min-height: 96px; max-width: 100%; overflow: auto;
    padding: 1rem; border: 1px dashed var(--bs-border-color, #ced4da); border-radius: 12px;
    background:
        linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.04) 75%) 0 0 / 16px 16px,
        linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.04) 75%) 8px 8px / 16px 16px;
}
.landing-nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    flex-wrap: wrap;
}
.landing-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-right: auto;
    flex-shrink: 0;   /* la marca nunca se comprime; con muchos enlaces el menú parte en dos líneas */
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--nav-fg, var(--mb-titulo));
    text-decoration: none;
}
/* Logo protagonista (más grande, ya que se retiró del hero). SOLO el hijo directo: el logo del
   escudo colgante va anidado en su placa y se dimensiona por su propia regla + alto inline. */
.landing-nav-brand > img { height: 56px; width: auto; max-width: 220px; object-fit: contain; }
.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Con muchas secciones los enlaces no caben en una línea: se envuelven a la siguiente,
       alineados a la derecha, en vez de desbordar/ocultarse. El bloque móvil (abajo) sobreescribe esto. */
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .25rem;
}
.landing-nav-links > a {
    color: var(--nav-fg, var(--mb-texto));
    text-decoration: none;
    font-weight: 500;
    padding: .25rem 0;
}
.landing-nav-links > a:hover { color: var(--mb-primary); }
/* Sección del menú pintada como botón: recupera el padding/redondeo de botón (la regla de arriba,
   `.landing-nav-links > a`, gana en especificidad a `.btn` y le quita el padding horizontal). Los
   colores llegan por `style` inline (fondo/texto/borde), que prevalece sobre el `color` del enlace. */
.landing-nav-links > a.landing-nav-boton-seccion {
    padding: .35rem .8rem;
    border-radius: var(--mb-radio);
    font-weight: 600;
    white-space: nowrap;
}
.landing-nav-cta { display: inline-flex; align-items: center; gap: .5rem; }
.landing-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--mb-borde);
    border-radius: var(--mb-radio);
    color: var(--nav-fg, var(--mb-titulo));
    font-size: 1.25rem;
    line-height: 1;
    padding: .3rem .55rem;
}

@media (max-width: 767.98px) {
    .landing-nav-toggle { display: inline-flex; }
    .landing-nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        padding: .25rem 0 1rem;
    }
    .landing-nav-links.abierto { display: flex; }
    .landing-nav-cta { flex-direction: column; align-items: stretch; gap: .5rem; margin-top: .25rem; }
}

/* Sección «Contacto» de la web del club */
.seccion-contacto-datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.75rem;
    margin-bottom: 1rem;
}
.seccion-contacto-datos a {
    color: var(--mb-titulo);
    text-decoration: none;
    font-weight: 500;
}
.seccion-contacto-datos a:hover { color: var(--mb-primary); }
.seccion-contacto-redes {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    font-size: 1.5rem;
}
.seccion-contacto-redes a { color: var(--mb-titulo); }
.seccion-contacto-redes a:hover { color: var(--mb-primary); }

/* ===== PR-6: landing comercial ===== */
/* Landing comercial de la plataforma MiBasket (dominio raíz). Rediseño sobrio: header claro sticky,
   hero SÓLIDO (sin degradados), secciones limpias y pie oscuro marino. Todo sobre tokens --mb-*; el
   naranja (--mb-primary) se reserva a botones/acentos/chips, los títulos van en marino (--mb-acento)
   o slate (--mb-titulo) y el cuerpo en --mb-texto. En .plat-preview (vista previa del builder, D4)
   el árbol es no-interactivo. */

/* Desplazamiento suave a las anclas (respeta la preferencia de movimiento reducido). scroll-padding
   evita que la sección quede tapada por el header sticky. Se limita a la landing real (no a la vista
   previa del builder, que va enmarcada). */
html:has(.plat-root:not(.plat-preview)) { scroll-padding-top: 4.75rem; }
@media (prefers-reduced-motion: no-preference) {
    html:has(.plat-root:not(.plat-preview)) { scroll-behavior: smooth; }
}

.plat-root { background: #fff; }
.plat-preview { pointer-events: none; }

/* ---- Header claro sticky (colores configurables --plat-nav-bg/--plat-nav-fg; si no, los de siempre) ---- */
.plat-header {
    position: sticky; top: 0; z-index: 1030;
    background: var(--plat-nav-bg, #fff);
    border-bottom: 1px solid var(--mb-borde-suave);
    box-shadow: 0 1px 10px rgba(15, 23, 42, .05);
}
.plat-header-inner {
    display: flex; align-items: center; gap: 1rem;
    min-height: 4.25rem; flex-wrap: wrap;
}
.plat-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    margin-right: auto;
    font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em;
    color: var(--plat-nav-fg, var(--mb-acento)); text-decoration: none;
}
/* SOLO el hijo directo: el logo del escudo colgante va anidado en su placa y esta regla (posterior a la
   del escudo) le clavaba width:36px — el alto inline se respetaba pero el ancho no y el logo se veía chico. */
.plat-brand > img { height: 36px; width: 36px; border-radius: 8px; object-fit: contain; }
.plat-nav { display: flex; align-items: center; gap: 1.5rem; }
.plat-nav > a:not(.plat-nav-cta):not(.plat-nav-enlace-boton) {
    color: var(--plat-nav-fg, var(--mb-texto)); text-decoration: none; font-weight: 500; padding: .25rem 0;
}
.plat-nav > a:not(.plat-nav-cta):not(.plat-nav-enlace-boton):hover { color: var(--mb-primary); }
/* Enlace del menú pintado como botón (sus colores van inline; solo forma/espaciado aquí). */
.plat-nav-enlace-boton {
    display: inline-flex; align-items: center; text-decoration: none;
    font-weight: 600; padding: .35rem .85rem; white-space: nowrap;
}
.plat-nav-cta { padding: .5rem 1.15rem; }
.plat-nav-toggle {
    display: none;
    background: none; border: 1px solid var(--mb-borde);
    border-radius: var(--mb-radio-control);
    color: var(--mb-titulo); font-size: 1.35rem; line-height: 1;
    padding: .3rem .55rem;
}

/* ---- Botones ---- */
.plat-btn-primary {
    background: var(--mb-primary); color: var(--mb-primary-contraste);
    border: 1px solid var(--mb-primary); font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.plat-btn-primary:hover, .plat-btn-primary:focus {
    background: var(--mb-primary-hover); border-color: var(--mb-primary-hover); color: var(--mb-primary-contraste);
}
.plat-btn-outline {
    background: transparent; color: var(--mb-acento);
    border: 1px solid var(--mb-borde); font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.plat-btn-outline:hover { border-color: var(--mb-acento); background: var(--mb-superficie); color: var(--mb-acento); }

/* ---- Hero (sólido, sin degradado) ---- */
.plat-hero {
    position: relative;
    background: var(--mb-bg);
    background-size: cover; background-position: center;
    padding: clamp(3rem, 8vw, 6rem) 0;
}
.plat-hero-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.plat-hero-titulo {
    font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.15rem);
    line-height: 1.1; letter-spacing: -.02em; color: var(--mb-acento); margin: 0;
}
.plat-hero-sub {
    font-size: 1.2rem; line-height: 1.55; color: var(--mb-texto);
    margin: 1.25rem auto 0; max-width: 640px;
}
.plat-hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; justify-content: center; }
/* Variante con imagen de fondo: overlay marino translúcido + texto blanco (contraste AA). */
.plat-hero--imagen .plat-hero-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(29, 53, 87, .82); }
.plat-hero--imagen .plat-hero-titulo { color: #fff; }
.plat-hero--imagen .plat-hero-sub { color: rgba(255, 255, 255, .92); }
.plat-hero--imagen .plat-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.plat-hero--imagen .plat-btn-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- Secciones ---- */
.plat-seccion { padding: clamp(3rem, 6vw, 5rem) 0; }
.plat-seccion--blanco { background: #fff; }
.plat-seccion--gris { background: var(--mb-bg); }
.plat-seccion--demo { background: var(--mb-acento-suave); }
.plat-seccion-titulo {
    text-align: center; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.15rem);
    letter-spacing: -.015em; color: var(--mb-titulo); margin: 0 auto;
}
.plat-seccion-intro {
    text-align: center; color: var(--mb-texto-suave);
    max-width: 640px; margin: .85rem auto 0; font-size: 1.05rem;
}

/* ---- Características ---- */
.plat-feature {
    height: 100%; background: #fff;
    border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    padding: 1.6rem;
}
.plat-feature-ico {
    width: 52px; height: 52px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1rem;
    background: var(--mb-acento-suave); color: var(--mb-primary);
}
/* SVG subido por el club/plataforma para la tarjeta: ocupa el chip como el glifo (PR-7). */
.plat-feature-svg { width: 28px; height: 28px; object-fit: contain; display: block; }
.plat-feature-titulo { font-size: 1.15rem; font-weight: 700; color: var(--mb-texto-fuerte); margin: 0 0 .4rem; }
.plat-feature-texto { color: var(--mb-texto); margin: 0; line-height: 1.55; }

/* ---- Familias + patrocinadores ---- */
.plat-familias-titulo { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--mb-titulo); margin: 0 0 1rem; }
.plat-familias-texto { color: var(--mb-texto); line-height: 1.65; font-size: 1.05rem; }
.plat-familias-texto p:last-child { margin-bottom: 0; }
.plat-familias-img { width: 100%; border-radius: var(--mb-radio-card); box-shadow: var(--mb-sombra-card); }
.plat-sponsors-wrap { text-align: center; }
.plat-sponsors-rotulo {
    text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700;
    color: var(--mb-texto-suave); margin: 0 0 1.25rem;
}
.plat-sponsors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.25rem; }
.plat-sponsors img { height: 52px; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.plat-sponsors a:hover img { filter: none; opacity: 1; }

/* ---- Cómo funciona (número en marino, no naranja) ---- */
.plat-paso { text-align: center; padding: 0 1rem; }
.plat-paso-num {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.25rem;
    background: var(--mb-acento); color: #fff;
}
.plat-paso-titulo { font-size: 1.1rem; font-weight: 700; color: var(--mb-texto-fuerte); margin: 1rem 0 .35rem; }
.plat-paso-texto { color: var(--mb-texto); margin: 0; line-height: 1.55; }

/* ---- Precios ---- */
.plat-plan {
    position: relative; height: 100%; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    padding: 1.85rem 1.6rem;
}
.plat-plan--destacado { border: 2px solid var(--mb-primary); box-shadow: 0 12px 30px rgba(232, 118, 44, .14); }
.plat-plan-badge {
    position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
    background: var(--mb-primary); color: var(--mb-primary-contraste);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .25rem .7rem; border-radius: 999px;
}
.plat-plan-nombre { font-size: 1.15rem; font-weight: 700; color: var(--mb-texto-fuerte); margin: 0; }
.plat-plan-precio { font-size: 2rem; font-weight: 800; color: var(--mb-acento); margin: .35rem 0 .25rem; letter-spacing: -.02em; }
.plat-plan-desc { color: var(--mb-texto-suave); margin: 0 0 1rem; }
.plat-plan-lista { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: grid; gap: .55rem; }
.plat-plan-lista li { display: flex; align-items: flex-start; gap: .55rem; color: var(--mb-texto); }
.plat-plan-lista i { color: var(--mb-primary); margin-top: .18rem; flex-shrink: 0; }
.plat-plan-nota { text-align: center; color: var(--mb-texto-suave); font-size: .9rem; margin: 1.75rem 0 0; }

/* ---- Testimonios ---- */
.plat-testimonio {
    height: 100%; margin: 0; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    padding: 1.75rem;
}
.plat-testimonio-comilla { font-size: 1.6rem; color: var(--mb-primary); opacity: .55; }
.plat-testimonio-texto { color: var(--mb-texto); font-size: 1.02rem; line-height: 1.6; margin: .5rem 0 1.25rem; flex-grow: 1; }
.plat-testimonio-autor { display: flex; align-items: center; gap: .8rem; }
.plat-testimonio-foto, .plat-testimonio-inicial { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.plat-testimonio-inicial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.plat-testimonio-meta { display: flex; flex-direction: column; line-height: 1.3; }
.plat-testimonio-nombre { font-weight: 700; color: var(--mb-texto-fuerte); }
.plat-testimonio-cargo { font-size: .85rem; color: var(--mb-texto-suave); }

/* ---- Formulario de demo ---- */
.plat-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.plat-demo-info { align-self: center; }
.plat-demo-info .plat-seccion-titulo { text-align: left; margin: 0; }
.plat-demo-texto { color: var(--mb-texto); font-size: 1.1rem; line-height: 1.6; margin: 1rem 0 0; }
.plat-demo-email { color: var(--mb-texto-suave); margin: 1rem 0 0; }
.plat-demo-email a { color: var(--mb-primary); text-decoration: none; font-weight: 600; }
.plat-demo-caja {
    background: #fff; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card); padding: 1.75rem;
}
.plat-campo { margin-bottom: 1rem; }
.plat-campo label { display: block; font-weight: 600; font-size: .9rem; color: var(--mb-texto-fuerte); margin-bottom: .35rem; }
.plat-demo-legal { color: var(--mb-texto-suave); font-size: .8rem; margin: .85rem 0 0; text-align: center; }
.plat-aviso { border-radius: var(--mb-radio-control); padding: .8rem 1rem; margin-bottom: 1rem; font-weight: 500; }
.plat-aviso--ok { background: #ecfdf3; border: 1px solid #a6f0c6; color: #086c3f; }
.plat-aviso--error { background: #fef2f2; border: 1px solid #f6c2c2; color: #a12626; }
/* Honeypot: accesible-oculto FUERA DE PANTALLA (no display:none, que algunos bots respetan). */
.plat-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pie oscuro marino ---- */
.plat-footer { background: var(--mb-acento); color: rgba(255, 255, 255, .78); padding: 3rem 0 1.75rem; }
.plat-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.plat-footer-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: .85rem; }
.plat-footer-brand img { height: 34px; width: 34px; border-radius: 8px; object-fit: contain; }
.plat-footer-dato { margin: 0 0 .3rem; font-size: .9rem; }
.plat-footer-titulo { color: #fff; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .85rem; }
.plat-footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .85rem; }
.plat-footer-enlace { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.plat-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.plat-footer a:hover { color: #fff; text-decoration: underline; }
.plat-footer-redes { display: flex; gap: 1rem; font-size: 1.4rem; }
.plat-footer-redes a { color: rgba(255, 255, 255, .82); }
.plat-footer-redes a:hover { color: #fff; text-decoration: none; }
.plat-footer-copy { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 2rem; padding-top: 1.5rem; font-size: .85rem; }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .plat-nav-toggle { display: inline-flex; }
    .plat-nav {
        display: none; flex-basis: 100%; flex-direction: column;
        align-items: stretch; gap: .35rem; padding: .5rem 0 1rem;
    }
    .plat-nav.abierto { display: flex; }
    .plat-nav-cta { text-align: center; margin-top: .35rem; }
    .plat-demo { grid-template-columns: 1fr; gap: 1.75rem; }
    .plat-demo-info .plat-seccion-titulo { text-align: center; }
    .plat-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- Banner de cookies ---------- */
.banner-cookies {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1080;
    background: #1f2733;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}

/* ---------- Modal de recorte de imagen ---------- */
.modal-recorte-fondo {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-recorte {
    background: #fff;
    border-radius: var(--mb-radio);
    padding: 1.5rem; /* igual que .panel-card: la banda de cabecera queda a sangre */
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
/* Variante ancha para modales con tablas/contenido amplio. Mantiene width:100% del
   contenedor, así que en móvil nunca supera el viewport (lo acota .modal-recorte-fondo). */
.modal-recorte.modal-ancho { max-width: 780px; }
.recorte-area { max-height: 60vh; }
.recorte-area img { max-width: 100%; display: block; }
.recorte-circular .cropper-view-box,
.recorte-circular .cropper-face { border-radius: 50%; }

.modal-login {
    background: #fff;
    border-radius: var(--mb-radio);
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
/* Variante con scroll: para modales altos (p. ej. la guía de bienvenida) que en móvil con
   letra grande/zoom superarían el viewport; así los botones inferiores siguen siendo accesibles. */
.modal-login--scroll {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

/* ---------- Popups de acceso sobre la landing SSR (acceso SSR PR-B) ---------- */
/* La tarjeta reutiliza .modal-login/.modal-login--scroll; aquí solo la vuelve contenedor de posicionamiento
   (para el botón ×) y da estilo al input del código OTP. El checklist de contraseña (.lista-requisitos) y el
   aviso de consentimiento (.aviso-consentimiento) ya viven arriba y se reutilizan tal cual. */
.acceso-tarjeta { position: relative; }
.acceso-cerrar {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6c757d;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
}
.acceso-cerrar:hover { background: rgba(0, 0, 0, .06); color: #212529; }
/* Input del código OTP de 6 dígitos: centrado y con separación entre cifras. */
.acceso-otp-input {
    text-align: center;
    letter-spacing: .5em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Modal accesible sobre <dialog> nativo (componente ModalDialogo) ---------- */
/* El <dialog> aporta top-layer, ::backdrop, focus trap y Escape. Aquí solo lo «desnudamos»
   (padding/borde/fondo a cero): el aspecto lo pone .modal-recorte, que va dentro y reutiliza
   el lenguaje visual de las tarjetas (banda de cabecera con .panel-card-titulo). */
.mb-dialog {
    padding: 0;
    border: none;
    background: transparent;
    width: 100%;
    max-width: min(560px, calc(100vw - 2rem)); /* AnchoMax lo sobreescribe por style inline */
    max-height: calc(100dvh - 2rem);
    margin: auto; /* el UA ya centra; lo reforzamos */
    overflow: visible;
    color: var(--mb-texto);
}
.mb-dialog::backdrop { background: rgba(0, 0, 0, .5); }

/* El contenido llena el diálogo (sin hueco): así el clic en el fondo tiene como target el
   <dialog> y el interop lo detecta como backdrop. El scroll vertical vive aquí. */
.mb-dialog .modal-recorte {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

/* Botón «✕» de cierre, hijo directo del <dialog> (bloque contenedor = el propio diálogo,
   que es position:fixed cuando es modal): flota sobre la esquina superior derecha, sobre
   la banda de cabecera, sin que el overflow del contenido lo recorte. */
.mb-dialog-cerrar {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--mb-texto-suave);
    border-radius: var(--mb-radio-control);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.mb-dialog-cerrar:hover { background: var(--mb-superficie); color: var(--mb-texto-fuerte); }
.mb-dialog-cerrar:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 1px; }

/* Mensaje del ModalConfirmar: respeta los saltos de línea del texto. */
.mb-dialog-mensaje { white-space: pre-line; color: var(--mb-texto); }

/* Pie de acciones: alineado a la derecha, con separación uniforme. */
.mb-dialog-pie {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* Móvil (≤375px de referencia): botones a lo ancho y táctiles (≥44px de alto lo da .btn=42px + gap). */
@media (max-width: 575.98px) {
    .mb-dialog-pie { flex-direction: column-reverse; }
    .mb-dialog-pie > .btn { width: 100%; min-height: 44px; }
}

/* Difumina el contenido de fondo en los avisos de sesión (privacidad por inactividad).
   Solo se aplica a los overlays de GestorSesion, no al resto de modales. */
.overlay-difuminado {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari / iOS PWA */
}

/* Hilo de mensajes de un ticket de soporte */
.ticket-hilo { display: flex; flex-direction: column; gap: .6rem; }
.ticket-msg {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--mb-radio);
    padding: .6rem .75rem;
    background: #fff;
    max-width: 85%;
}
.ticket-msg-usuario { align-self: flex-start; }
.ticket-msg-staff {
    align-self: flex-end;
    background: var(--bs-tertiary-bg, #f1f3f5);
    border-left: 3px solid var(--mb-primary, #e8762c);
}
.ticket-msg-cuerpo { white-space: pre-wrap; margin-top: .15rem; }

/* Aviso flotante de error inesperado (HTTP 5xx) */
.aviso-error-global {
    position: fixed;
    z-index: 1080;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 2rem));
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 4px solid var(--bs-danger, #dc3545);
    border-radius: var(--mb-radio);
    padding: .85rem 1rem;
}

/* ---------- Campo de contraseña reutilizable ---------- */
.lista-requisitos {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .8125rem;
}
.lista-requisitos li {
    display: flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.5;
}
.lista-requisitos li.pendiente { color: #6c757d; }
.lista-requisitos li.ok { color: #198754; }
.lista-requisitos li i { font-size: .85em; }

/* ---------- Responsive: sidebar como cajón en móvil ---------- */
.panel-topbar { display: none; }
.panel-backdrop { display: none; }

@media (max-width: 991.98px) {
    .panel-shell { flex-direction: column; }
    .panel-topbar {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        background: #fff;
        border-bottom: 1px solid var(--mb-borde);
        padding: 0.6rem 1rem;
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .panel-topbar button {
        border: 1px solid var(--mb-borde);
        background: #fff;
        border-radius: 8px;
        padding: 0.3rem 0.55rem;
        font-size: 1.1rem;
        line-height: 1;
    }
    .panel-sidebar {
        position: fixed;
        z-index: 30;
        height: 100vh;
        height: 100dvh;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 0 100vmax rgba(0,0,0,0);
    }
    .panel-sidebar.abierta {
        transform: translateX(0);
        box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
    }
    /* Capta el toque fuera del cajón para cerrarlo. El oscurecido lo aporta el
       box-shadow del cajón (z-index 30); esta capa va justo por debajo (29),
       sobre el resto del contenido. */
    .panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 29;
    }
    .panel-main { padding: 1.25rem; }
}

/* ---------- Banner de impersonación de soporte (transparencia) ----------
   Barra fija arriba mientras el SuperAdmin actúa «como soporte» de un club. Empuja el panel hacia
   abajo (padding + offset de los elementos sticky/fixed) para no tapar el contenido. Altura fija
   para que los desplazamientos cuadren siempre, también en móvil. */
:root { --h-banner-soporte: 2.75rem; }

.banner-soporte {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1090;
    height: var(--h-banner-soporte);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    background: var(--mb-danger);
    color: #fff;
    font-size: 0.85rem;
    overflow: hidden;
    white-space: nowrap;
}
.banner-soporte-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.banner-soporte-tiempo { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.banner-soporte-btn {
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.75);
    background: transparent;
    color: #fff;
    border-radius: 8px;
    padding: 0.12rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
}
.banner-soporte-btn:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.banner-soporte-btn:disabled { opacity: .7; cursor: default; }

/* Con banner presente, desplazar el panel para que el banner no lo tape. */
.panel-shell.impersonando { padding-top: var(--h-banner-soporte); }
.panel-shell.impersonando .panel-sidebar {
    top: var(--h-banner-soporte);
    height: calc(100dvh - var(--h-banner-soporte));
}
@media (max-width: 991.98px) {
    .panel-shell.impersonando .panel-topbar { top: var(--h-banner-soporte); }
}

/* ============================================================
   SISTEMA DE DISEÑO — tipografía, overrides de Bootstrap y capa propia
   ============================================================ */

/* ---------- Tipografía Inter (auto-hospedada, sin Google Fonts) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}

/* ---------- Tipografías de títulos de secciones (auto-hospedadas, OFL — ver fonts/OFL.txt) ----------
   Solo se usan como opción de título en las secciones de texto libre de la landing (clases
   .titulo-tipografia-*). Playfair Display es una fuente VARIABLE: un único fichero cubre 400..700. */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caveat-400.woff2') format('woff2');
}

/* ---------- Tipos de letra del carnet de abono (Taquilla), auto-hospedadas OFL — ver fonts/OFL.txt ----------
   Solo se usan en la vista previa del diseñador de carnet (LienzoCarnet: font-family CarnetCondensada, etc.);
   el PNG final lo compone el servidor con estas mismas fuentes embebidas en la API. Se sirven en .ttf (no woff2)
   porque no hay conversor en el pipeline y son ficheros de uso puntual (solo el editor las carga).
   Oswald (CarnetCondensada) y Montserrat (CarnetModerna) son VARIABLES: un único fichero cubre 400..700 y el
   motor interpola la negrita. Pacifico (CarnetManuscrita) solo trae Regular; la negrita la sintetiza el navegador. */
@font-face {
    font-family: 'CarnetCondensada';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/carnet-condensada.ttf') format('truetype');
}
@font-face {
    font-family: 'CarnetModerna';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/carnet-moderna.ttf') format('truetype');
}
@font-face {
    font-family: 'CarnetSerif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/carnet-serif-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'CarnetSerif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/carnet-serif-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'CarnetManuscrita';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/carnet-manuscrita.ttf') format('truetype');
}

body {
    font-family: var(--mb-font);
    color: var(--mb-texto);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Overrides de Bootstrap (heredan la marca del club) ---------- */
:root {
    --bs-primary: var(--mb-primary);
    --bs-primary-rgb: 232, 118, 44; /* fallback estático (naranja MiBasket); el color real va por var */
    --bs-border-radius: var(--mb-radio-control);
    --bs-body-font-family: var(--mb-font);
    --bs-body-color: var(--mb-texto);
}

/* Botón primario */
.btn-primary {
    --bs-btn-bg: var(--mb-primary);
    --bs-btn-border-color: var(--mb-primary);
    --bs-btn-hover-bg: var(--mb-primary-claro);
    --bs-btn-hover-border-color: var(--mb-primary-claro);
    --bs-btn-active-bg: var(--mb-primary-hover);
    --bs-btn-active-border-color: var(--mb-primary-hover);
    --bs-btn-disabled-bg: var(--mb-primary);
    --bs-btn-disabled-border-color: var(--mb-primary);
    --bs-btn-color: var(--mb-primary-contraste);
    --bs-btn-hover-color: var(--mb-primary-contraste);
    --bs-btn-active-color: var(--mb-primary-contraste);
    --bs-btn-disabled-color: var(--mb-primary-contraste);
}

/* Botón secundario (gris claro del doc) */
.btn-secondary {
    --bs-btn-bg: var(--mb-superficie);
    --bs-btn-border-color: var(--mb-superficie);
    --bs-btn-color: #334155;
    --bs-btn-hover-bg: var(--mb-superficie-viva);
    --bs-btn-hover-border-color: var(--mb-superficie-viva);
    --bs-btn-hover-color: #334155;
    --bs-btn-active-bg: var(--mb-superficie-viva);
    --bs-btn-active-border-color: var(--mb-superficie-viva);
    --bs-btn-active-color: #334155;
}
.btn-outline-primary {
    --bs-btn-color: var(--mb-primary);
    --bs-btn-border-color: var(--mb-primary);
    --bs-btn-hover-bg: var(--mb-primary);
    --bs-btn-hover-border-color: var(--mb-primary);
    --bs-btn-hover-color: var(--mb-primary-contraste);
    --bs-btn-active-bg: var(--mb-primary);
    --bs-btn-active-border-color: var(--mb-primary);
}

.btn {
    /* Altura de control única, alineada con form-control (42px) para homogeneizar
       todos los botones con texto del sistema. */
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Al ser flex, los espacios literales del markup entre icono y texto se suprimen;
       el gap los repone de forma uniforme. No afecta a los botones de solo icono
       (un único ítem flex → sin separación que aplicar). */
    gap: 0.35rem;
    border-radius: var(--mb-radio-control);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--mb-glow);
}
/* Realce al pasar el cursor (afianza el feedback del hover de marca) */
.btn-primary:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--mb-primary) 30%, transparent); }
/* Variante compacta única (contextos densos: formularios dentro de modales, filas inline) */
.btn-sm {
    min-height: 34px;
}
/* Botón de solo icono fuera de tablas: cuadrado, a la altura de control, con fondo al hover.
   Para acciones en tablas seguir usando .mb-btn-tabla (36×36). */
.mb-btn-icono {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    flex-shrink: 0;
}
.btn-sm.mb-btn-icono { width: 34px; height: 34px; min-height: 34px; }

/* Botón peligro del doc: fondo blanco, borde/texto/icono rojo, hover rojo muy suave */
.mb-btn-danger {
    --bs-btn-color: var(--mb-danger);
    --bs-btn-border-color: var(--mb-danger);
    --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--mb-danger-bg);
    --bs-btn-hover-border-color: var(--mb-danger);
    --bs-btn-hover-color: var(--mb-danger);
    --bs-btn-active-bg: var(--mb-danger-bg);
    --bs-btn-active-border-color: var(--mb-danger);
    --bs-btn-active-color: var(--mb-danger);
    border-radius: var(--mb-radio-control);
}

/* ---------- Formularios (doc §4) ---------- */
.form-label {
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.35rem;
}
.form-control,
.form-select {
    min-height: 42px;
    border-radius: var(--mb-radio-control);
    border-color: var(--mb-borde);
    color: var(--mb-titulo);
}
.form-control::placeholder { color: var(--mb-placeholder); opacity: 1; }
.form-control:focus,
.form-select:focus {
    border-color: var(--mb-primary);
    box-shadow: 0 0 0 0.2rem var(--mb-glow);
}
/* El selector de color nativo conserva su tamaño propio */
.form-control-color { min-height: 42px; }

/* ---------- Zona de carga drag&drop (doc §3) ---------- */
.mb-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem;
    border: 2px dashed var(--mb-borde-dash);
    border-radius: var(--mb-radio-control);
    background: var(--mb-bg);
    padding: 1.75rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.mb-dropzone:hover { border-color: var(--mb-texto-suave); }
.mb-dropzone.arrastrando {
    border-color: var(--mb-acento);
    border-style: solid;
    background: color-mix(in srgb, var(--mb-acento) 8%, var(--mb-bg));
}
.mb-dropzone .mb-dropzone-icono {
    font-size: 1.6rem;
    color: var(--mb-texto-suave);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.mb-dropzone .mb-dropzone-texto {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #334155;
}
.mb-dropzone .mb-dropzone-hint {
    font-size: 0.75rem; /* 12px */
    color: var(--mb-placeholder);
}
/* Variante compacta para usos inline (p. ej. logos de patrocinadores) */
.mb-dropzone.compacta { padding: 0.9rem 0.85rem; }
.mb-dropzone.compacta .mb-dropzone-icono { font-size: 1.2rem; margin-bottom: 0.1rem; }

/* ---------- Interruptores (toggle) — doc §4 ---------- */
/* Reaprovecha el .form-switch de Bootstrap, restilado a la marca y a 44×24.
   Reservamos el ancho del interruptor + 8px de hueco para que el texto no se pegue. */
.form-switch {
    padding-left: calc(44px + 0.5rem);
    min-height: 24px;
    /* Separación superior UNIFORME: todos los toggles (el primero y el resto) llevan el
       mismo margen, independientemente de si están en lista o en grid. Así nunca queda
       pegado al elemento de arriba y el primer ítem es igual que los demás. */
    margin-top: 0.7rem;
}
/* Grupo de toggles: contenedor con ritmo vertical uniforme (úsalo envolviendo varios
   .form-switch); evita depender de mb-1/mb-2 sueltos en el marcado. */
.mb-toggles { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.7rem; }
.mb-toggles .form-switch { margin-top: 0; }
.form-switch .form-check-input {
    width: 44px;
    height: 24px;
    margin-top: 0;
    margin-left: calc(-44px - 0.5rem);
    border-radius: 999px;
    background-color: var(--mb-borde-suave);
    border-color: var(--mb-borde-suave);
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
    cursor: pointer;
}
.form-switch .form-check-input:checked {
    background-color: var(--mb-primary);
    border-color: var(--mb-primary);
}
.form-switch .form-check-input:focus {
    border-color: var(--mb-borde-suave);
    box-shadow: 0 0 0 0.2rem var(--mb-glow);
}
.form-switch .form-check-input:checked:focus { border-color: var(--mb-primary); }
.form-switch .form-check-label { cursor: pointer; }

/* ---------- Input con icono-prefijo (redes/contacto) — doc §3 ---------- */
.input-group .input-group-text {
    background: #fff;
    border-color: var(--mb-borde);
    color: var(--mb-placeholder);
}
.input-group:focus-within .input-group-text { border-color: var(--mb-primary); }

/* ---------- Botones de acción en tablas (36×36) — doc §5 ---------- */
.mb-btn-tabla {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mb-borde-suave);
    border-radius: var(--mb-radio-control);
    background: #fff;
    color: var(--mb-texto);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mb-btn-tabla:hover { background: var(--mb-hover); }
.mb-btn-tabla:disabled { opacity: .55; cursor: default; }
.mb-btn-tabla-ok { color: #16a34a; }
.mb-btn-tabla-ok:hover { background: #F0FDF4; border-color: #bbf7d0; }
.mb-btn-tabla-danger { border-color: #FCA5A5; color: var(--mb-danger); }
.mb-btn-tabla-danger:hover { background: var(--mb-danger-bg); border-color: var(--mb-danger); }
/* Touch targets (WCAG 2.5.5): en punteros táctiles (móvil/tablet) el botón de acción
   sube a 44×44 px. En escritorio (puntero fino) se mantiene 36×36 para no engordar las
   tablas densas de admin. Se apoya en (pointer: coarse), no en el ancho de viewport. */
@media (pointer: coarse) {
    .mb-btn-tabla { width: 44px; height: 44px; }
}

/* ---------- Botón de ayuda contextual "?" (cabeceras de página) ---------- */
.mb-btn-ayuda {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mb-borde-suave);
    border-radius: 50%;
    background: #fff;
    color: var(--mb-primary);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.mb-btn-ayuda:hover { background: var(--mb-hover); border-color: var(--mb-primary); }

/* ---------- Estado vacío reutilizable (listas sin registros) ---------- */
.estado-vacio { padding: 2rem 1rem; }
.estado-vacio-icono { font-size: 2.5rem; color: var(--mb-texto-suave); line-height: 1; }

/* ---------- Celda de imagen unificada (logo en tabla) — doc §6 ---------- */
.mb-img-celda {
    position: relative;
    width: var(--cw, 120px);
    height: var(--ch, 60px);
    border: 1px solid var(--mb-borde-suave);
    border-radius: 6px;
    background: var(--mb-bg);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mb-img-celda.arrastrando {
    border-color: var(--mb-acento);
    border-style: solid;
    background: color-mix(in srgb, var(--mb-acento) 8%, var(--mb-bg));
}
.mb-img-celda img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
/* Estado vacío */
.mb-img-celda-vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    color: var(--mb-placeholder);
    font-size: 0.78rem;
    font-weight: 500;
}
.mb-img-celda-vacia i { font-size: 1.1rem; line-height: 1; }
/* Controles editar/eliminar fijos en la esquina, SIEMPRE visibles (funciona en móvil,
   donde no hay hover). En escritorio el realce extra lo da el :hover de los botones. */
.mb-img-celda-overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 0.3rem;
    opacity: 1;
    pointer-events: auto;
}
.mb-img-celda-overlay button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: var(--mb-titulo);
    cursor: pointer;
}
.mb-img-celda-overlay button:hover { background: #f1f5f9; }
.mb-img-celda-overlay .mb-celda-borrar:hover { color: var(--mb-danger); }

/* ---------- Tabla "apilable": en móvil cada fila se convierte en tarjeta etiqueta:valor ----------
   Breakpoint md (767.98px): cubre todos los móviles, incluidos los grandes en horizontal.
   Entre 768 y 991px (tablet) la tabla se muestra normal, con .table-responsive de red de seguridad. */
@media (max-width: 767.98px) {
    /* Al apilar, la tabla ya no necesita ancho mínimo: anulamos cualquier min-width inline
       (p. ej. style="min-width:620px") para evitar el scroll lateral residual dentro de
       .table-responsive. */
    .tabla-apilada { min-width: 0 !important; }
    .tabla-apilada thead { display: none; }
    .tabla-apilada tbody tr {
        display: block;
        border: 1px solid var(--mb-borde-suave);
        border-radius: var(--mb-radio-control);
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.6rem;
    }
    .tabla-apilada tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0;
        padding: 0.2rem 0;
        text-align: right;
    }
    .tabla-apilada tbody td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--mb-texto-suave);
        text-align: left;
    }
    .tabla-apilada tfoot tr { display: block; border-top: 2px solid var(--mb-borde-suave); padding-top: 0.4rem; }
    .tabla-apilada tfoot td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: 0.15rem 0;
        text-align: right;
    }
    .tabla-apilada tfoot td:empty { display: none; }
    .tabla-apilada tfoot td::before { content: attr(data-label); font-weight: 600; text-align: left; }
}

/* ---------- Tabla "expandible": tablas densas de admin en móvil ----------
   Se usa JUNTO con .tabla-apilada (class="table tabla-apilada tabla-expandible").
   En móvil, la tarjeta de cada fila muestra solo las celdas clave; las marcadas
   .col-secundaria quedan ocultas tras un botón "Ver más" (la fila gana .expandida).
   La celda .col-expandir contiene ese botón. En escritorio se comporta como tabla normal. */
.tabla-expandible .col-expandir { display: none; } /* el control de expandir no existe en escritorio */

@media (max-width: 767.98px) {
    .tabla-expandible tbody td.col-secundaria { display: none; }
    .tabla-expandible tbody tr.expandida td.col-secundaria { display: flex; }
    /* Celda del botón: ancho completo, centrada, sin etiqueta data-label. */
    .tabla-expandible tbody td.col-expandir {
        display: block;
        text-align: center;
        padding-top: 0.4rem;
        margin-top: 0.3rem;
        border-top: 1px dashed var(--mb-borde-suave);
    }
    .tabla-expandible tbody td.col-expandir::before { content: none; }
    .tabla-expandible .btn-expandir {
        background: none;
        border: 0;
        color: var(--mb-primary);
        font-weight: 500;
        font-size: 0.85rem;
        cursor: pointer;
        padding: 0.15rem 0.5rem;
    }
}

/* Fila de detalle expandible (p. ej. facturas): bloque plano, no se apila como tarjeta clave:valor. */
.mb-fila-detalle > td { background: var(--mb-hover); }
@media (max-width: 767.98px) {
    .tabla-apilada tbody tr.mb-fila-detalle { padding: 0.4rem 0.6rem; }
    .tabla-apilada tbody tr.mb-fila-detalle td { display: block; text-align: left; padding: 0; }
    .tabla-apilada tbody tr.mb-fila-detalle td::before { content: none; }
}

/* Estilos propios de Blazor — no modificar */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Se ha producido un error."
}

/* Splash de arranque. Marca NEUTRA por defecto (marino, sin naranja); en recargas, el color de la marca
   recordada (localStorage) llega por --splash-acento (ver index.html). */
.splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: #ffffff;
    z-index: 9999;
}

.splash-logo {
    width: 96px;
    height: 96px;
    /* Logo TAL CUAL: sin recorte redondeado ni máscara; fondo transparente y sin deformar. */
    object-fit: contain;
    animation: splash-pulse 1.4s ease-in-out infinite;
}

.splash-nombre {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    color: #1d3557;
}

.splash-barra {
    width: 180px;
    height: 4px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

/* Barra de progreso real (sin número): refleja la descarga del runtime WASM. */
.splash-barra > span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: var(--splash-acento, #1d3557);
    border-radius: inherit;
    transition: width 0.2s ease-out;
}

@keyframes splash-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
    .splash-logo { animation: none; }
}

/* ===================== Cuadro de horarios (módulo Horarios) ===================== */
/* Bloque de franja en la rejilla semanal: el fondo es el color propio del equipo (o un pastel de
   reserva) y el color de texto se fija inline según el contraste WCAG; el #1b1b1b de aquí es solo
   el valor por defecto. El cuadro es una MATRIZ: su tabla va siempre dentro de .table-responsive
   (scroll horizontal en móvil, NORMA de matrices). */
.horario-bloque {
    color: #1b1b1b;
    border-radius: 6px;
    padding: 4px 6px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    line-height: 1.15;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.horario-bloque:last-child { margin-bottom: 0; }
/* Celda de CONTINUACIÓN de una franja larga: no repite el texto, solo prolonga el color del bloque
   para que la columna se lea como un único tramo continuo. Mismos radio/margen/borde que el bloque
   de inicio para que encajen; el color de fondo se fija inline (color del equipo). */
.horario-bloque-cont {
    border-radius: 6px;
    margin-bottom: 4px;
    min-height: 34px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.horario-bloque-cont:last-child { margin-bottom: 0; }
.horario-bloque-solape { border: 2px solid var(--bs-danger, #dc3545); }
/* El texto del bloque hereda el color de contraste que se fija inline (según el color del equipo);
   el subtexto solo lo atenúa un poco para que siga legible sobre fondos claros u oscuros. */
.horario-bloque-sub { font-size: 0.7rem; color: inherit; opacity: 0.8; }

/* ===== Hub de configuración del club (/club/configuracion) =====
   Tarjetas-enlace en rejilla (Bootstrap `row/col`). Estilo alineado con `panel-card`. */
.config-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--mb-borde-suave);
    border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card);
    color: var(--mb-texto);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.config-card:hover,
.config-card:focus-visible {
    border-color: var(--mb-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    color: var(--mb-texto);
    outline: none;
}
.config-card-icono {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--mb-acento-suave);
    color: var(--mb-primary);
    font-size: 1.35rem;
}
.config-card-cuerpo { flex: 1 1 auto; min-width: 0; }
.config-card-titulo {
    display: block;
    margin-bottom: .15rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mb-texto-fuerte);
}
.config-card-desc {
    display: block;
    font-size: .82rem;
    color: var(--mb-texto-suave);
    line-height: 1.35;
}
.config-card-flecha {
    flex: 0 0 auto;
    color: var(--mb-placeholder);
    font-size: 1.05rem;
    transition: color .15s ease;
}
.config-card:hover .config-card-flecha { color: var(--mb-primary); }

/* ===================== Indicadores de carga (UI/Cargando.razor) ===================== */
/* Spinner accesible: círculo con un arco de marca girando. El texto lo lee el lector de
   pantalla (visually-hidden) salvo que se pase Texto visible. */
.mb-cargando {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0;
    color: var(--mb-texto-suave);
}
.mb-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid color-mix(in srgb, var(--mb-primary) 22%, transparent);
    border-top-color: var(--mb-primary);
    border-radius: 50%;
    animation: mb-girar 0.7s linear infinite;
}
.mb-cargando-texto { font-size: 0.95rem; }
@keyframes mb-girar { to { transform: rotate(360deg); } }

/* Skeleton: placeholders con un barrido de brillo. Imita tarjetas o filas de lista. */
.mb-skeleton-card {
    background: #fff;
    border: 1px solid var(--mb-borde-suave);
    border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.mb-sk {
    position: relative;
    overflow: hidden;
    background: var(--mb-superficie);
    border-radius: 6px;
}
.mb-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: mb-brillo 1.3s ease-in-out infinite;
}
.mb-sk-titulo { height: 1.15rem; width: 42%; margin-bottom: 1.1rem; border-radius: 8px; }
.mb-sk-linea { height: 0.85rem; width: 100%; margin-bottom: 0.7rem; }
.mb-sk-linea:last-child { margin-bottom: 0; }
.mb-sk-linea-fina { height: 0.7rem; }
.mb-sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.mb-sk-fila {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--mb-borde-suave);
}
.mb-sk-fila:last-child { border-bottom: 0; }
.mb-sk-fila-textos { flex: 1 1 auto; min-width: 0; }
@keyframes mb-brillo { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .mb-spinner { animation-duration: 1.4s; }
    .mb-sk::after { animation: none; }
}

/* ===================== Stepper de progreso (UI/PasosProgreso.razor) ===================== */
/* Indicador del flujo completo (varias fases). Escritorio: círculos numerados + etiqueta +
   línea de conexión. Móvil: solo círculos, con la etiqueta del paso actual debajo. */
.mb-stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
}
.mb-stepper-paso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.mb-stepper-marca {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--mb-superficie);
    color: var(--mb-texto-suave);
    border: 2px solid var(--mb-borde-suave);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mb-stepper-etiqueta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mb-texto-suave);
    white-space: nowrap;
}
.mb-stepper-linea {
    flex: 1 1 auto;
    height: 2px;
    min-width: 1rem;
    background: var(--mb-borde-suave);
    border-radius: 2px;
}
.mb-stepper-linea.hecho { background: var(--mb-primary); }
/* Paso actual: círculo de marca relleno + etiqueta oscura. */
.mb-stepper-paso.activo .mb-stepper-marca {
    background: var(--mb-primary);
    color: var(--mb-primary-contraste);
    border-color: var(--mb-primary);
}
.mb-stepper-paso.activo .mb-stepper-etiqueta { color: var(--mb-texto-fuerte); }
/* Pasos completados: círculo con tinte de marca + check. */
.mb-stepper-paso.hecho .mb-stepper-marca {
    background: var(--mb-acento-suave);
    color: var(--mb-primary);
    border-color: color-mix(in srgb, var(--mb-primary) 35%, var(--mb-borde-suave));
}
.mb-stepper-actual { display: none; }

@media (max-width: 767.98px) {
    /* En móvil ocultamos las etiquetas de cada paso y mostramos solo la del actual debajo. */
    .mb-stepper { gap: 0.15rem; margin-bottom: 0.75rem; }
    .mb-stepper-etiqueta { display: none; }
    .mb-stepper-marca { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; }
    .mb-stepper-actual {
        display: block;
        font-size: 0.9rem;
        color: var(--mb-texto);
        margin: 0 0 1rem;
    }
}

/* ===== Dashboard de inicio del club (/club) =====
   Tarjetas KPI en rejilla (Bootstrap `row/col`: 2×2 en escritorio, 1 columna en móvil). Estilo
   alineado con `config-card`, pero destacando el VALOR numérico. Cada tarjeta enlaza a su sección. */
.kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem 1.35rem;
    background: #fff;
    border: 1px solid var(--mb-borde-suave);
    border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card);
    color: var(--mb-texto);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kpi-card:hover,
.kpi-card:focus-visible {
    border-color: var(--mb-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    color: var(--mb-texto);
    outline: none;
}
.kpi-card-icono {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--mb-acento-suave);
    color: var(--mb-primary);
    font-size: 1.6rem;
}
.kpi-card-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.kpi-card-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mb-texto-fuerte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kpi-card-valor-error { color: var(--mb-placeholder); }
.kpi-card-titulo {
    font-size: .9rem;
    font-weight: 600;
    color: var(--mb-texto-fuerte);
}
.kpi-card-sub {
    font-size: .8rem;
    color: var(--mb-texto-suave);
    line-height: 1.3;
}
.kpi-card-flecha {
    flex: 0 0 auto;
    color: var(--mb-placeholder);
    font-size: 1.05rem;
    transition: color .15s ease;
}
.kpi-card:hover .kpi-card-flecha { color: var(--mb-primary); }

/* Skeleton de carga (bloques con shimmer) mientras llega cada KPI. */
.kpi-skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--mb-borde-suave) 25%, #f1f5f9 37%, var(--mb-borde-suave) 63%);
    background-size: 400% 100%;
    animation: kpi-shimmer 1.4s ease infinite;
}
.kpi-skeleton-valor { width: 3.5rem; height: 1.75rem; margin-bottom: .3rem; }
.kpi-skeleton-sub { width: 7rem; height: .8rem; margin-top: .35rem; }
@keyframes kpi-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kpi-skeleton { animation: none; }
}

/* ---------- Tarjeta «Primeros pasos» (onboarding v2) ----------
   Ayuda PERSISTENTE y colapsable por rol; sustituye al antiguo modal de bienvenida. La pinta
   `UI/TarjetaPrimerosPasos.razor` sobre una `.panel-card` (presentacional puro). El verde de los
   checks es un verde de éxito fijo (independiente de la marca del club, que puede ser de cualquier
   color): «hecho» debe leerse siempre como verde. */
.primeros-pasos { border-left: 3px solid var(--mb-primary); }
.primeros-pasos-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.primeros-pasos-cab-txt { min-width: 0; }
.primeros-pasos-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.0625rem; /* ~17px, como .panel-card-titulo */
    font-weight: 600;
    color: var(--mb-texto-fuerte);
    margin: 0;
}
.primeros-pasos-titulo > i { color: var(--mb-primary); }
.primeros-pasos-icono-ok { color: #16A34A !important; } /* verde éxito fijo */
.primeros-pasos-sub {
    font-size: .8125rem; /* 13px */
    color: var(--mb-texto-suave);
    margin: .2rem 0 0;
}
.primeros-pasos-acciones {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.primeros-pasos-progreso {
    font-size: .8rem;
    font-weight: 600;
    color: var(--mb-primary);
    background: var(--mb-acento-suave);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.primeros-pasos-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--mb-texto-suave);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.primeros-pasos-btn:hover { background: var(--mb-hover); color: var(--mb-texto-fuerte); }

.primeros-pasos-lista {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.primeros-pasos-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .5rem;
    border-radius: var(--mb-radio-control);
}
.primeros-pasos-check {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--mb-placeholder);
    line-height: 1;
}
.primeros-pasos-item--hecho .primeros-pasos-check { color: #16A34A; } /* verde éxito fijo */
.primeros-pasos-item-txt { flex: 1 1 auto; min-width: 0; }
.primeros-pasos-item-tit {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--mb-texto-fuerte);
    font-size: .925rem;
}
.primeros-pasos-item--hecho .primeros-pasos-item-nombre {
    color: var(--mb-texto-suave);
    text-decoration: line-through;
}
.primeros-pasos-item-desc {
    font-size: .8125rem;
    color: var(--mb-texto-suave);
    line-height: 1.35;
    margin-top: .1rem;
}
.primeros-pasos-opcional {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mb-texto-suave);
    background: var(--mb-superficie);
    border-radius: 999px;
    padding: .05rem .45rem;
}
.primeros-pasos-cta { flex: 0 0 auto; white-space: nowrap; }
.primeros-pasos-cta > i { font-size: .8em; }

/* Móvil: la CTA cae bajo el texto y la fila respira (sin scroll lateral). */
@media (max-width: 575.98px) {
    .primeros-pasos-item { flex-wrap: wrap; }
    .primeros-pasos-cta { margin-left: 2rem; }
}

/* ============================================================================
   PIZARRA TÁCTICA (módulo Ejercicios) — editor y visor SVG nativos (sin librerías)
   ============================================================================ */

/* Layout del editor: paleta | lienzo | propiedades. Solo se muestra en ≥992px. */
.pz-editor { display: flex; gap: 1rem; align-items: flex-start; }
.pz-paleta {
    flex: 0 0 250px; width: 250px; align-self: flex-start;
    /* Barra lateral FIJA (punto 2): toda la paleta (objetos, zona/texto y trazos) queda visible y
       pulsable en escritorio sin buscar con scroll; se queda pegada al hacer scroll de la página. */
    position: sticky; top: 1rem;
    background: #fff; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card); padding: .75rem;
}
/* Salvaguarda para pantallas de escritorio MUY bajas: si no cupiera, la propia paleta scrollea. */
@media (min-width: 992px) and (max-height: 660px) {
    .pz-paleta { max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.pz-central { flex: 1 1 auto; min-width: 0; }
.pz-props {
    flex: 0 0 236px; width: 236px;
    background: #fff; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    box-shadow: var(--mb-sombra-card); padding: 1rem;
}
.pz-props-tit { font-size: .95rem; font-weight: 600; color: var(--mb-texto-fuerte); margin: 0 0 .5rem; }

/* Grupos y botones de la paleta */
.pz-grupo-tit {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mb-texto-suave); margin: .75rem 0 .35rem;
}
.pz-tool {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    padding: .45rem .6rem; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-control);
    background: #fff; color: var(--mb-texto); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pz-tool:hover { background: var(--mb-hover); }
/* 3 columnas para los símbolos (jugadores/material/zona-texto): caben todos sin scroll (punto 2);
   los trazos se quedan en 2 columnas porque su previsualización es apaisada y necesita más ancho. */
.pz-simbolos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.pz-trazos-paleta { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.pz-simbolo-btn, .pz-trazo-btn {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .3rem .15rem; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-control);
    background: #fff; color: var(--mb-texto-suave); font-size: .66rem; cursor: pointer; line-height: 1.05;
}
.pz-simbolo-btn:hover, .pz-trazo-btn:hover { background: var(--mb-hover); }
.pz-simbolo-btn.activa, .pz-trazo-btn.activa, .pz-tool.activa {
    border-color: var(--mb-primary); background: color-mix(in srgb, var(--mb-primary) 8%, white); color: var(--mb-texto-fuerte);
}
.pz-mini { width: 40px; height: 40px; }
.pz-mini-trazo { width: 58px; height: 26px; }

/* Selector de número (1..5) para atacante/defensor */
.pz-numeros { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .5rem 0; }
.pz-num-btn {
    width: 30px; height: 30px; border: 1px solid var(--mb-borde-suave); border-radius: 50%;
    background: #fff; color: var(--mb-texto); font-weight: 700; cursor: pointer;
}
.pz-num-btn.activa { border-color: var(--mb-primary); background: var(--mb-primary); color: #fff; }

/* Barra de herramientas del lienzo */
.pz-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.pz-barra-sep { width: 1px; align-self: stretch; background: var(--mb-borde-suave); margin: 0 .1rem; }
.pz-campo { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .8rem; color: var(--mb-texto-suave); }
.pz-campo select { width: auto; }
.pz-check { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: .8rem; color: var(--mb-texto-suave); }
.pz-aviso { border-radius: var(--mb-radio-control); padding: .5rem .75rem; font-size: .85rem; margin-bottom: .6rem; }
.pz-aviso.ok { background: var(--mb-acento-suave); color: #14532d; }
.pz-aviso.err { background: var(--mb-danger-bg); color: #991b1b; }

/* Editor visual de plantillas RRSS (F3c): lienzo de cajas arrastrables sobre la vista previa */
.rrss-lienzo { position: relative; display: block; width: 100%; max-width: 480px; }
.rrss-lienzo-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.rrss-caja { cursor: grab; }
.rrss-menu {
    position: absolute; z-index: 20; margin-top: .25rem; min-width: 220px;
    max-height: 260px; overflow-y: auto; padding: .25rem;
    background: #fff; border: 1px solid var(--mb-borde-suave);
    border-radius: var(--mb-radio-control); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* Fase Foto (RRSS): contenedor del canvas + cursor-círculo del pincel de emborronado */
.mb-foto-lienzo { position: relative; display: inline-block; width: 100%; }
.mb-foto-anillo {
    position: absolute; display: none; transform: translate(-50%, -50%);
    border: 2px solid #ef4444; border-radius: 50%; background: rgba(239, 68, 68, .12);
    pointer-events: none; z-index: 2;
}

/* Lienzo SVG */
.pz-lienzo-caja {
    border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    background: #f4efe3; padding: .5rem; display: flex; justify-content: center;
}
.pz-svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.pz-svg.pz-edicion { touch-action: none; cursor: crosshair; }
.pz-suelo { fill: #f7f1e6; }
.pz-obj { cursor: grab; }
.pz-zona { fill: color-mix(in srgb, #2563eb 14%, transparent); stroke: #2563eb; stroke-width: 2; }
.pz-zona.pz-sel { stroke-width: 3.5; stroke-dasharray: 6 4; }
.pz-anillo-sel { fill: none; stroke: #2563eb; stroke-width: 2.5; stroke-dasharray: 5 4; }
.pz-trazo.pz-sel { filter: drop-shadow(0 0 3px #2563eb); }
/* Trazos durante el «play»: un grupo por fase, oculto; pizarra.js muestra el del segmento en curso (tenue). */
.pz-trazos-play { display: none; opacity: .4; }
.pz-num { font-family: var(--mb-font); font-size: 20px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.pz-texto { font-family: var(--mb-font); font-size: 22px; font-weight: 600; fill: #0f172a; }

/* Visor de solo lectura (ficha, móvil, listado) */
.pz-marco {
    border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card);
    background: #f4efe3; padding: .5rem; display: flex; justify-content: center;
}
.pz-marco .pz-svg { max-height: 60vh; }
.pz-vacio {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    text-align: center; padding: 2rem 1rem; border: 1px dashed var(--mb-borde-dash);
    border-radius: var(--mb-radio-card); background: #fff;
}
.pz-vacio > i { font-size: 2rem; }

/* Navegación por fases del visor (ficha y móvil): botones grandes táctiles + puntos indicadores */
.pz-fases { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .6rem; }
.pz-fase-nav {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--mb-borde-suave); background: #fff; color: var(--mb-texto);
    font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pz-fase-nav:hover:not(:disabled) { background: var(--mb-hover); }
.pz-fase-nav:disabled { opacity: .4; cursor: default; }
/* Botón «play» (F2): acento verde para distinguir la reproducción de la navegación por fases. */
.pz-fase-nav.pz-play { color: var(--bs-success, #198754); border-color: var(--bs-success, #198754); }
.pz-fase-nav.pz-play:hover:not(:disabled) { background: rgba(25, 135, 84, .1); }
.pz-fase-info { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 8rem; }
.pz-fase-txt { font-size: .85rem; font-weight: 600; color: var(--mb-texto-suave); }
.pz-fase-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pz-punto {
    width: 14px; height: 14px; padding: 0; border-radius: 50%;
    border: 1px solid var(--mb-borde); background: transparent; cursor: pointer;
}
.pz-punto.activo { background: var(--mb-primary); border-color: var(--mb-primary); }
.pz-fase-titulo { text-align: center; margin: .35rem 0 0; }

/* Miniatura de pizarra en las tarjetas del catálogo (frame 1 reducido) */
.pz-marco-mini { padding: .25rem; }
.pz-marco-mini .pz-svg { max-height: 160px; }
.ej-miniatura { display: block; text-decoration: none; margin-bottom: .5rem; }
.ej-miniatura-vacia {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    height: 96px; margin-bottom: .5rem; color: var(--mb-texto-suave); font-size: .85rem;
    background: #fff; border: 1px dashed var(--mb-borde-dash); border-radius: var(--mb-radio-card);
}

/* Tira de frames del editor (§10.1): carril de miniaturas de cada fase + acciones */
.pz-tira { margin-top: .75rem; border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card); background: #fff; padding: .6rem .7rem; }
.pz-tira-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.pz-tira-tit { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mb-texto-suave); display: flex; align-items: center; gap: .4rem; }
.pz-tira-contador { font-weight: 700; color: var(--mb-texto); }
.pz-tira-carril { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; }
.pz-frame-mini {
    position: relative; flex: 0 0 auto; width: 112px; padding: .2rem;
    border: 2px solid var(--mb-borde-suave); border-radius: var(--mb-radio-control);
    background: #f4efe3; cursor: pointer;
}
.pz-frame-mini:hover { border-color: var(--mb-borde); }
.pz-frame-mini.activo { border-color: var(--mb-primary); box-shadow: 0 0 0 1px var(--mb-primary); }
.pz-frame-mini .pz-svg { max-height: 92px; pointer-events: none; }
.pz-frame-num {
    position: absolute; top: 3px; left: 3px; z-index: 1;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    background: var(--mb-primary); color: #fff; font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ===== PR-9: equipos del club ===== */
/* Tarjetas sobrias de equipo, agrupadas por programa: punto del color del equipo + nombre. Sin fotos ni
   datos personales (RGPD). */
.equipos-grupo-titulo {
    font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .75rem;
}
.equipos-grupo-titulo:first-of-type { margin-top: .25rem; }
.equipos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.equipo-card {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--mb-borde-suave);
    border-radius: 10px; background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.equipo-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}
.equipo-punto {
    flex: 0 0 auto;
    width: 14px; height: 14px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.equipo-nombre {
    font-weight: 600; color: var(--mb-texto, #1f2933); line-height: 1.3;
}

@media (max-width: 767.98px) {
    .equipos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .equipo-card { padding: 12px 14px; }
}
/* ===== PR-7: builder UI (lista de secciones + selector de iconos + vista previa) ===== */

/* --- Lista de secciones del builder (ListaSeccionesBuilder) --- */
.builder-lista { display: flex; flex-direction: column; gap: .5rem; }
.builder-item {
    position: relative;
    display: flex; align-items: center; gap: .35rem;
    border: 1px solid var(--mb-borde-suave); border-radius: 10px;
    background: #fff; padding: .4rem .5rem .4rem .3rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.builder-item:hover { border-color: #c9d3e0; }
.builder-item.seleccionada {
    border-color: var(--mb-primary);
    box-shadow: 0 0 0 1px var(--mb-primary), 0 6px 16px rgba(232, 118, 44, .13);
    background: linear-gradient(90deg, color-mix(in srgb, var(--mb-primary) 8%, #fff), #fff 42%);
}
/* Barra de acento a la izquierda que conecta la fila seleccionada con el editor de la derecha. */
.builder-item.seleccionada::before {
    content: ""; position: absolute; left: -1px; top: .5rem; bottom: .5rem; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--mb-primary);
}
.builder-item.inactiva { opacity: .68; }
.builder-item.inactiva .builder-item-ico { background: #eef1f5; color: #9aa7b8; }

/* Tirador (pista visual de reordenación; el reordenamiento real es por flechas en v1). */
.builder-item-grip {
    flex: 0 0 auto; width: 16px; align-self: stretch; display: inline-flex;
    align-items: center; justify-content: center; color: #c2ccd9; cursor: grab; font-size: .95rem;
}
.builder-item.fija > .builder-item-sel { padding-left: .5rem; }

.builder-item-sel {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55rem;
    background: transparent; border: 0; padding: .3rem .35rem; text-align: left; color: inherit;
    border-radius: 7px; cursor: pointer;
}
.builder-item-sel:hover { background: color-mix(in srgb, var(--mb-primary) 5%, #fff); }
.builder-item-sel:focus-visible { outline: 2px solid var(--mb-glow); outline-offset: 2px; }
.builder-item-ico {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mb-primary) 12%, #fff); color: var(--mb-primary); font-size: 1.08rem;
}
.builder-item.fija .builder-item-ico { background: var(--mb-acento-suave); color: var(--mb-acento); }
.builder-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.builder-item-titulo { font-weight: 600; color: var(--mb-texto-fuerte); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }

/* Chips de estado de la fila: fija / oculta / aviso de «sin contenido». */
.builder-chip {
    flex: 0 0 auto; font-size: .68rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; line-height: 1.5;
}
.builder-chip.mute { background: var(--mb-acento-suave); color: var(--mb-acento); }
.builder-chip.off { background: #eef1f5; color: #8b98a8; }
.builder-chip.warn { background: #fdf0dd; color: #b26a12; }

.builder-item-acciones { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; }

/* Reordenar = un único control segmentado (no dos botones fantasma sueltos). */
.builder-reorden { display: inline-flex; border: 1px solid var(--mb-borde-suave); border-radius: 8px; overflow: hidden; background: #fff; }
.builder-reorden button {
    width: 27px; height: 30px; border: 0; background: transparent; color: var(--mb-texto-suave);
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer;
}
.builder-reorden button + button { border-left: 1px solid var(--mb-borde-suave); }
.builder-reorden button:hover:not(:disabled) { background: var(--mb-bg); color: var(--mb-primary); }
.builder-reorden button:disabled { opacity: .3; cursor: default; }

.builder-item-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: var(--mb-texto-suave); cursor: pointer; transition: background .12s, color .12s;
}
.builder-item-btn:hover:not(:disabled) { background: var(--mb-bg); color: var(--mb-primary); }
.builder-item-btn:focus-visible { outline: 2px solid var(--mb-glow); outline-offset: 1px; }
.builder-item-ojo { color: var(--mb-primary); }
.builder-item-ojo.apagado { color: #aab4c2; }
.builder-item-btn-danger:hover:not(:disabled) { background: #fdecec; color: #dc3545; }

/* --- Selector visual de iconos (SelectorIcono) --- */
.selector-icono-trigger {
    display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
    border: 1px solid var(--mb-borde); border-radius: var(--mb-radio-control);
    background: #fff; padding: .3rem .55rem; cursor: pointer; color: var(--mb-texto);
}
.selector-icono-trigger:hover { border-color: var(--mb-primary); }
.selector-icono-trigger:focus-visible { outline: 2px solid var(--mb-glow); outline-offset: 1px; }
.selector-icono-actual {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-acento-suave); color: var(--mb-primary); font-size: 1.1rem;
}
.selector-icono-nombre { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-icono-caret { font-size: .7rem; color: var(--mb-texto-suave); margin-left: auto; }
.selector-icono-busca { position: relative; margin-bottom: 1rem; }
.selector-icono-busca .bi-search { position: absolute; top: 50%; left: .7rem; transform: translateY(-50%); color: var(--mb-texto-suave); }
.selector-icono-busca .form-control { padding-left: 2.1rem; }
.selector-icono-galeria { max-height: 55vh; overflow-y: auto; }
.selector-icono-grupo + .selector-icono-grupo { margin-top: 1.1rem; }
.selector-icono-grupo-titulo {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--mb-texto-suave); margin: 0 0 .5rem;
}
.selector-icono-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; }
.selector-icono-item {
    aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-control);
    background: #fff; color: var(--mb-texto); font-size: 1.2rem; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.selector-icono-item:hover { border-color: var(--mb-primary); color: var(--mb-primary); background: var(--mb-acento-suave); }
.selector-icono-item:focus-visible { outline: 2px solid var(--mb-glow); outline-offset: 1px; }
.selector-icono-item.seleccionado { border-color: var(--mb-primary); background: var(--mb-primary); color: #fff; }
.selector-icono-vacio { text-align: center; padding: 1.5rem 0; }

/* --- Mini-previsualización del SVG subido (admin de la característica) --- */
.icono-svg-mini {
    width: 34px; height: 34px; object-fit: contain; padding: 3px; background: #fff;
    border: 1px solid var(--mb-borde-suave); border-radius: 8px;
}

/* --- Marco de vista previa (VistaPreviaPanel) --- */
.vista-previa { border: 1px solid var(--mb-borde-suave); border-radius: var(--mb-radio-card); overflow: hidden; background: var(--mb-bg); }
.vista-previa-barra {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .75rem; background: #fff; border-bottom: 1px solid var(--mb-borde-suave);
}
.vista-previa-rotulo { font-weight: 600; color: var(--mb-texto-fuerte); font-size: .9rem; }
.vista-previa-rotulo .bi { color: var(--mb-primary); margin-right: .3rem; }
.vista-previa-escenario { padding: 1rem; overflow: auto; max-height: 75vh; }
.vista-previa-lienzo {
    background: #fff; border-radius: var(--mb-radio-card); overflow: hidden;
    box-shadow: var(--mb-sombra-card); transition: max-width .2s ease;
}
.vista-previa-lienzo.movil { max-width: 390px; margin: 0 auto; border: 6px solid #111; border-radius: 26px; }

@media (max-width: 767.98px) {
    .builder-item { flex-wrap: wrap; }
    .builder-item-acciones { width: 100%; justify-content: flex-end; }
    .selector-icono-trigger { width: 100%; }
    .selector-icono-rejilla { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
    .vista-previa-escenario { padding: .5rem; }
}

/* --- PR-11: overlay de vista previa a ancho completo (SuperAdmin) --- */
.mb-preview-overlay {
    position: fixed; inset: 0; z-index: 1090;
    display: flex; flex-direction: column; background: var(--mb-bg);
}
.mb-preview-cab {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--mb-borde-suave);
}
.mb-preview-tit { font-weight: 700; color: var(--mb-texto-fuerte); }
.mb-preview-tit .bi { color: var(--mb-primary); margin-right: .35rem; }
.mb-preview-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem; }
.mb-preview-cuerpo .vista-previa-escenario { max-height: none; }

/* ===== PR-10: seccion siguenos ===== */
/* Tarjetas estilo «post social» con los últimos posts de RRSS que el club muestra en su web (texto plano,
   nunca HTML). Debajo, iconos-enlace a los perfiles del club. */
.rrss-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.rrss-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--mb-borde-suave); border-radius: 12px;
    background: #fff; overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.rrss-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}
.rrss-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 10px;
}
.rrss-card-red { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.rrss-card-meta { display: flex; flex-direction: column; min-width: 0; }
.rrss-card-club { font-weight: 600; color: var(--mb-texto, #1f2933); line-height: 1.2; }
.rrss-card-fecha { font-size: .8rem; color: #6b7280; }
.rrss-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.rrss-card-texto {
    padding: 12px 16px 0; margin: 0;
    color: var(--mb-texto, #1f2933); line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.rrss-card-enlace {
    margin-top: auto; padding: 12px 16px 14px;
    font-weight: 600; font-size: .9rem; text-decoration: none;
    color: var(--mb-primary);
}
.rrss-card-enlace:hover { text-decoration: underline; }
.rrss-perfiles { display: flex; justify-content: center; gap: 18px; font-size: 1.6rem; }
.rrss-perfiles a { color: var(--mb-acento, #1d3557); transition: color .2s ease; }
.rrss-perfiles a:hover { color: var(--mb-primary); }

@media (max-width: 767.98px) {
    .rrss-cards { grid-template-columns: 1fr; gap: 12px; }
    .rrss-perfiles { font-size: 1.4rem; gap: 14px; }
}

/* ===== Builder de secciones: rejilla unificada (club + SuperAdmin) + editor con cabecera y drawer móvil ===== */
/* A la izquierda la lista de secciones; a la derecha el editor de la sección seleccionada, con una cabecera
   «Editando · X» que cambia al seleccionar y una entrada animada, para que se note que el formulario se cargó.
   En <992px la rejilla apila y el editor entra como PANEL DESLIZANTE (drawer) por encima de la lista, en vez de
   caer «debajo» fuera de pantalla. Lo comparten SeccionLanding (club) y SeccionLandingPlataforma (SuperAdmin). */
.builder2 { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.builder2-lista { min-width: 0; }
@media (min-width: 992px) {
    /* En escritorio la lista acompaña al scroll de formularios largos (galería, patrocinadores). */
    .builder2-lista { position: sticky; top: 1rem; }
}

.builder2-editor { min-width: 0; display: flex; flex-direction: column; }
.builder2-editor-cab {
    display: flex; align-items: center; gap: .7rem;
    padding-bottom: .85rem; margin-bottom: 1rem; border-bottom: 1px solid var(--mb-borde-suave);
}
.builder2-editor-cab .builder-item-ico { width: 40px; height: 40px; font-size: 1.2rem; }
.builder2-editor-cab .txt { display: flex; flex-direction: column; min-width: 0; }
.builder2-editor-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-primary); }
.builder2-editor-tit { font-size: 1.05rem; font-weight: 700; color: var(--mb-texto-fuerte); line-height: 1.25; }
.builder2-editor-cerrar { margin-left: auto; display: none; }   /* solo visible como cierre del drawer móvil */
.builder2-editor-cuerpo { animation: builder-aparece .2s ease; }
.builder2-editor-pie { display: none; }                         /* barra «Guardar» del drawer, solo móvil */
.builder2-backdrop { display: none; }

/* Botón «Añadir sección» al pie de la lista (acción de creación, estilo dashed discreto). */
.add-seccion {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: #fff; border: 1px dashed var(--mb-borde); color: var(--mb-texto-suave);
    padding: .6rem; border-radius: 9px; font-weight: 600; font-size: .85rem; cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.add-seccion:hover:not(:disabled) { border-color: var(--mb-primary); color: var(--mb-primary); background: color-mix(in srgb, var(--mb-primary) 6%, #fff); }
.add-seccion:disabled { opacity: .6; cursor: default; }

@keyframes builder-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .builder2-editor-cuerpo { animation: none; }
    .builder2-editor { transition: none !important; }
}

@media (max-width: 991.98px) {
    .builder2 { grid-template-columns: 1fr; gap: 1rem; }
    .builder2-lista { position: static; }

    .builder2-editor {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1091;
        max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 34px rgba(15, 23, 42, .22);
        transform: translateY(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        overflow: hidden;
    }
    .builder2-editor.abierta { transform: none; }
    .builder2-editor-cab { position: sticky; top: 0; background: #fff; margin-bottom: .5rem; padding-top: .25rem; }
    .builder2-editor-cerrar { display: inline-flex; }
    .builder2-editor-cuerpo { overflow: auto; flex: 1 1 auto; padding-top: .5rem; }
    .builder2-editor-pie {
        display: flex; gap: .6rem; padding-top: .8rem; margin-top: .5rem;
        border-top: 1px solid var(--mb-borde-suave);
    }
    .builder2-editor-pie > * { flex: 1 1 auto; justify-content: center; }
    .builder2-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1090;
        background: rgba(15, 23, 42, .32); opacity: 0; pointer-events: none; transition: opacity .28s;
    }
    .builder2-backdrop.abierta { opacity: 1; pointer-events: auto; }
}

/* ============================================================================================
   Galería PÚBLICA (Galería PR-2): rejilla de miniaturas del álbum + visor (lightbox) en JS puro.
   El visor (.galeria-pub-visor*) lo construye js/galeriaPublica.js, con clases propias (la galería
   antigua de la landing y su visor Blazor se retiraron en el PR-3).
   ============================================================================================ */
.galeria-pub-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.galeria-pub-foto {
    display: block; overflow: hidden; border-radius: 8px;
    aspect-ratio: 1 / 1; background: var(--mb-borde-suave, #eee);
}
.galeria-pub-foto img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.galeria-pub-foto:hover img,
.galeria-pub-foto:focus-visible img { transform: scale(1.05); }
.galeria-pub-foto:focus-visible { outline: 3px solid var(--mb-primary, #e8762c); outline-offset: 2px; }

/* Overlay a pantalla completa (lo monta y muestra el JS: [hidden] lo oculta hasta abrir). */
.galeria-pub-visor {
    position: fixed; inset: 0; z-index: 1090;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 20, 30, .92); padding: 24px;
}
.galeria-pub-visor[hidden] { display: none; }
.galeria-pub-visor:focus { outline: none; }
/* Bloquea el scroll del fondo mientras el visor está abierto. */
body.galeria-pub-visor-abierto { overflow: hidden; }
.galeria-pub-visor-figura {
    margin: 0; max-width: 92vw; max-height: 92vh;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.galeria-pub-visor-img {
    max-width: 92vw; max-height: 80vh; object-fit: contain;
    border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.galeria-pub-visor-pie {
    display: flex; align-items: center; gap: 14px;
    color: #fff; font-size: .95rem; text-align: center; min-height: 1.4em;
}
.galeria-pub-visor-titulo { font-weight: 600; }
.galeria-pub-visor-contador { opacity: .75; font-variant-numeric: tabular-nums; }
.galeria-pub-visor-cerrar,
.galeria-pub-visor-nav {
    position: fixed; border: 0; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff; background: rgba(255, 255, 255, .12);
    transition: background .2s ease;
}
.galeria-pub-visor-cerrar:hover,
.galeria-pub-visor-nav:hover { background: rgba(255, 255, 255, .28); }
.galeria-pub-visor-cerrar { top: 18px; right: 18px; }
.galeria-pub-visor-nav { top: 50%; transform: translateY(-50%); }
.galeria-pub-visor-anterior { left: 18px; }
.galeria-pub-visor-siguiente { right: 18px; }

@media (max-width: 767.98px) {
    .galeria-pub-fotos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .galeria-pub-visor { padding: 12px; }
    .galeria-pub-visor-img { max-height: 72vh; }
    .galeria-pub-visor-cerrar,
    .galeria-pub-visor-nav { width: 40px; height: 40px; font-size: 1.15rem; }
    .galeria-pub-visor-cerrar { top: 10px; right: 10px; }
    .galeria-pub-visor-anterior { left: 8px; }
    .galeria-pub-visor-siguiente { right: 8px; }
}

/* ═══════════ Editor del álbum de galería (/club/galeria): dropzone múltiple + mosaico ═══════════ */

/* Dropzone de subida masiva: el <InputFile multiple> va superpuesto transparente cubriendo toda la zona,
   así el navegador acepta el clic y el drop de VARIOS ficheros del SO nativamente (dispara OnChange). */
.galeria-dropzone-multi { position: relative; }
.galeria-dropzone-multi .galeria-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* Deshabilitada mientras se sube: bloquea el input y atenúa la zona. */
.galeria-dropzone-multi.gd-inhabilitada { opacity: .6; cursor: default; }
.galeria-dropzone-multi.gd-inhabilitada .galeria-dropzone-input { pointer-events: none; }

/* Mosaico de miniaturas (imita la rejilla pública): cuadrícula responsive con acciones en overlay. */
.galeria-mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.galeria-mosaico-item {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--mb-radio-control, 8px);
    overflow: hidden;
    background: var(--mb-bg);
    border: 1px solid var(--mb-borde-suave);
}
.galeria-mosaico-item.es-portada { outline: 2px solid var(--mb-primary); outline-offset: -2px; }
.galeria-mosaico-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Distintivo de portada (arriba-izquierda), siempre visible. */
.galeria-mosaico-portada {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    background: var(--mb-primary);
    border-radius: 999px;
    z-index: 2;
}
/* Grupos de acciones sobre la foto: mover (abajo) y acciones (arriba-derecha). */
.galeria-mosaico-mover,
.galeria-mosaico-acciones {
    position: absolute;
    display: flex;
    gap: 4px;
    z-index: 2;
    opacity: 0;
    transition: opacity .15s ease;
}
.galeria-mosaico-acciones { top: 6px; right: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 12px); }
.galeria-mosaico-mover { bottom: 6px; left: 50%; transform: translateX(-50%); }
/* En escritorio las acciones aparecen al pasar el ratón; con foco también (accesibilidad de teclado). */
.galeria-mosaico-item:hover .galeria-mosaico-mover,
.galeria-mosaico-item:hover .galeria-mosaico-acciones,
.galeria-mosaico-item:focus-within .galeria-mosaico-mover,
.galeria-mosaico-item:focus-within .galeria-mosaico-acciones { opacity: 1; }
/* Botón de acción del overlay. */
.galeria-mosaico .gm-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.galeria-mosaico .gm-btn:hover:not(:disabled) { background: rgba(15, 23, 42, .95); }
.galeria-mosaico .gm-btn:disabled { opacity: .4; cursor: default; }
.galeria-mosaico .gm-btn.gm-activo { background: var(--mb-primary); }
.galeria-mosaico .gm-btn.gm-peligro:hover:not(:disabled) { background: var(--mb-danger, #dc2626); }

/* En táctil (móvil/tablet) no hay hover: las acciones se ven siempre y el botón sube a 40×40 (WCAG 2.5.5). */
@media (pointer: coarse) {
    .galeria-mosaico-mover,
    .galeria-mosaico-acciones { opacity: 1; }
    .galeria-mosaico .gm-btn { width: 40px; height: 40px; font-size: 1rem; }
}