/* ============================================================
   KING'S SOCCER LEAGUE — Sistema de diseño
   Paleta tomada directamente del escudo: negro profundo + dorado
   metálico + blanco marfil. Tipografía: Oswald (condensada, de
   marcador/corona) para titulares y números; Inter para texto.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --cancha-900: #0d0d0d;   /* negro del escudo, fondo del marcador */
    --cancha-800: #1a1710;   /* negro-dorado, secciones oscuras */
    --pasto-600:  #a3790f;   /* dorado oscuro, color de marca (texto sobre blanco) */
    --pasto-500:  #d4af37;   /* dorado metálico, botones/marca */
    --pasto-400:  #f0c04c;   /* dorado brillante, números del marcador */
    --arbitro-500:#f59e0b;   /* ámbar, acentos y CTA secundario */
    --hueso-50:   #faf8f3;   /* fondo claro, marfil */
    --linea-200:  #e8e2d2;
    --tinta-700:  #2b2620;
    --tinta-500:  #6b6455;

    --fuente-marcador: 'Oswald', sans-serif;
    --fuente-texto: 'Inter', sans-serif;
}

body { font-family: var(--fuente-texto); color: var(--tinta-700); background: var(--hueso-50); }

.ls-marca {
    font-family: var(--fuente-marcador);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* --- Hero --- */
.ls-hero {
    background: radial-gradient(circle at 20% 20%, #2a2410 0%, var(--cancha-900) 55%);
    color: white;
    padding: 4.5rem 0 0;
    position: relative;
    overflow: hidden;
}
.ls-hero::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--pasto-400) 0 24px, transparent 24px 48px);
    opacity: .5;
}
.ls-hero h1 {
    font-family: var(--fuente-marcador);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
}
.ls-hero .ls-accent { color: var(--pasto-400); }
.ls-hero p.lead { color: #cbd8cf; max-width: 640px; }

.ls-btn-primary {
    background: var(--pasto-500); border: none; color: white; font-weight: 600;
    padding: .75rem 1.5rem; border-radius: .5rem; transition: transform .15s ease, background .15s ease;
}
.ls-btn-primary:hover { background: var(--pasto-400); transform: translateY(-1px); color: white; }
.ls-btn-outline {
    border: 1px solid rgba(255,255,255,.35); color: white; font-weight: 600;
    padding: .75rem 1.5rem; border-radius: .5rem; background: transparent;
}
.ls-btn-outline:hover { border-color: white; color: white; background: rgba(255,255,255,.08); }

/* --- Marcador (signature: franja tipo tablero LED de estadio) --- */
.ls-marcador {
    background: var(--cancha-800);
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 3rem;
}
.ls-marcador .num {
    font-family: var(--fuente-marcador);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    color: var(--pasto-400);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ls-marcador .lbl {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9fb3a6;
}
.ls-marcador .col { border-left: 1px solid rgba(255,255,255,.08); }
.ls-marcador .col:first-child { border-left: none; }

/* --- Features --- */
.ls-feature {
    background: white;
    border: 1px solid var(--linea-200);
    border-radius: .75rem;
    padding: 1.5rem;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease;
}
.ls-feature:hover { border-color: var(--pasto-500); transform: translateY(-2px); }
.ls-feature .ls-icono {
    width: 44px; height: 44px; border-radius: .6rem;
    background: color-mix(in srgb, var(--pasto-500) 12%, white);
    color: var(--pasto-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: .9rem;
}
.ls-feature h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
.ls-feature p { font-size: .92rem; color: var(--tinta-500); margin: 0; }

.ls-eyebrow {
    font-family: var(--fuente-marcador);
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--pasto-600); font-weight: 600;
}

/* --- Pasos --- */
.ls-paso .ls-paso-num {
    font-family: var(--fuente-marcador);
    font-size: 2.4rem; font-weight: 700; color: var(--linea-200);
    line-height: 1;
}

/* --- CTA final --- */
.ls-cta {
    background: linear-gradient(135deg, var(--pasto-600), var(--cancha-900));
    color: white; border-radius: 1rem;
}

/* ============================================================
   Acentos juveniles — para insignias, notificaciones y detalles
   que le dan energía a la interfaz sin perder la identidad de marca.
   ============================================================ */
:root {
    --electrico-400: #22d3ee;   /* cian, energía/juventud */
    --rosa-500:      #f43f5e;   /* alertas y notificaciones */
    --gradiente-marca: linear-gradient(135deg, var(--pasto-500) 0%, var(--electrico-400) 120%);
    --sombra-suave: 0 8px 24px -8px rgba(11,18,32,.18);
    --sombra-card: 0 1px 2px rgba(11,18,32,.04), 0 8px 20px -10px rgba(11,18,32,.12);
}

.ls-btn-gradiente {
    background: var(--gradiente-marca);
    border: none; color: white; font-weight: 700;
    padding: .8rem 1.7rem; border-radius: .65rem;
    box-shadow: var(--sombra-suave);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ls-btn-gradiente:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(21,128,61,.4); color: white; }

.ls-badge-vivo {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(244,63,94,.1); color: var(--rosa-500);
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: 999px;
}
.ls-badge-vivo::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa-500);
    animation: ls-pulso 1.4s infinite;
}
@keyframes ls-pulso { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================
   Panel administrativo — shell con sidebar
   ============================================================ */
.ls-admin-body { background: var(--hueso-50); min-height: 100vh; }
.ls-admin-shell { display: flex; min-height: 100vh; }

.ls-admin-sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--cancha-900);
    color: #cbd8cf;
    padding: 1.25rem 1rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.ls-admin-sidebar .ls-marca { color: white; font-size: 1.1rem; display: block; margin-bottom: 1.75rem; }
.ls-admin-sidebar .ls-marca span { color: var(--pasto-400); }
.ls-admin-nav-grupo {
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: #5f7566; margin: 1.1rem .6rem .4rem;
}
.ls-admin-link {
    display: flex; align-items: center; gap: .65rem;
    color: #cbd8cf; text-decoration: none;
    padding: .55rem .7rem; border-radius: .5rem; font-size: .92rem; font-weight: 500;
    margin-bottom: 2px;
}
.ls-admin-link:hover { background: rgba(255,255,255,.06); color: white; }
.ls-admin-link.activo { background: var(--pasto-600); color: white; }
.ls-admin-link i { width: 18px; text-align: center; opacity: .85; }

.ls-admin-main { flex: 1; min-width: 0; }
.ls-admin-topbar {
    background: white; border-bottom: 1px solid var(--linea-200);
    padding: .9rem 1.75rem; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 10;
}
.ls-admin-content { padding: 1.75rem; }

.ls-stat-card {
    background: white; border: 1px solid var(--linea-200); border-radius: .85rem;
    padding: 1.25rem; box-shadow: var(--sombra-card);
}
.ls-stat-card .valor {
    font-family: var(--fuente-marcador); font-weight: 700; font-size: 2rem; line-height: 1;
}
.ls-stat-card .etiqueta { color: var(--tinta-500); font-size: .8rem; margin-top: .3rem; }
.ls-stat-card .icono {
    width: 40px; height: 40px; border-radius: .6rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    margin-bottom: .75rem;
}

.ls-panel {
    background: white; border: 1px solid var(--linea-200); border-radius: .85rem;
    box-shadow: var(--sombra-card);
}
.ls-panel .ls-panel-head {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea-200);
    font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
.ls-panel .ls-panel-body { padding: 1.25rem; }

/* Mobile: sidebar se colapsa a un menú superior simple */
@media (max-width: 900px) {
    .ls-admin-shell { flex-direction: column; }
    .ls-admin-sidebar { width: 100%; height: auto; position: relative; }
}

/* ============================================================
   Panel del jugador — notificaciones, próximo partido, stats
   ============================================================ */
.ls-hero-jugador {
    background: linear-gradient(120deg, var(--cancha-900) 0%, #241f10 60%, var(--pasto-700, #6b5310) 100%);
    color: white; border-radius: 1rem; padding: 2rem;
}
.ls-notif {
    display: flex; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--linea-200);
}
.ls-notif:last-child { border-bottom: none; }
.ls-notif .ls-notif-icono {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ls-notif.tipo-ok .ls-notif-icono { background: rgba(21,128,61,.12); color: var(--pasto-600); }
.ls-notif.tipo-alerta .ls-notif-icono { background: rgba(244,63,94,.12); color: var(--rosa-500); }
.ls-notif.tipo-info .ls-notif-icono { background: rgba(34,211,238,.12); color: #0891b2; }

/* ============================================================
   Selector de posición (tarjetas) y dorsal (grid de camisetas)
   ============================================================ */
.ls-position-card {
    position: relative; cursor: pointer;
    border: 2px solid var(--linea-200); border-radius: .85rem;
    padding: 1.1rem .9rem; text-align: center; background: white;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ls-position-card:hover { border-color: var(--pasto-400); transform: translateY(-2px); }
.ls-position-card input { position: absolute; opacity: 0; pointer-events: none; }
.ls-position-card .ls-pos-icono { font-size: 1.6rem; margin-bottom: .4rem; }
.ls-position-card .ls-pos-nombre { font-weight: 700; font-size: .92rem; }
.ls-position-card .ls-pos-cupos { font-size: .74rem; color: var(--tinta-500); margin-top: .15rem; }
.ls-position-card.lleno { opacity: .45; cursor: not-allowed; }
.ls-position-card.seleccionada {
    border-color: var(--pasto-500); background: color-mix(in srgb, var(--pasto-500) 6%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pasto-500) 18%, transparent);
}

.ls-cupos-barra {
    height: 6px; border-radius: 999px; background: var(--linea-200); overflow: hidden; margin-top: .5rem;
}
.ls-cupos-barra > div { height: 100%; background: var(--pasto-500); }

.ls-jersey-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .5rem;
}
.ls-jersey-btn {
    aspect-ratio: 1; border-radius: .5rem; border: 2px solid var(--linea-200);
    background: white; font-family: var(--fuente-marcador); font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all .1s ease;
}
.ls-jersey-btn:hover:not(.tomado) { border-color: var(--pasto-400); transform: scale(1.05); }
.ls-jersey-btn.seleccionado { background: var(--pasto-500); border-color: var(--pasto-500); color: white; }
.ls-jersey-btn.tomado { background: var(--hueso-50); color: var(--linea-200); border-color: var(--linea-200); cursor: not-allowed; text-decoration: line-through; }



/* ============================================================
   v5 — navegación, idioma, pie, pagos por Zelle, estados de cuota
   ============================================================ */
.ls-nav { background: var(--cancha-900); border-bottom: 3px solid var(--pasto-500); }
.ls-nav .nav-link { color: #cbd8cf; font-weight: 500; font-size: .95rem; }
.ls-nav .nav-link:hover, .ls-nav .nav-link.active { color: var(--pasto-400); }
.ls-lang { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; }
.ls-lang a { color: #cbd8cf; text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: .3rem .6rem; }
.ls-lang a.activo { background: var(--pasto-500); color: var(--cancha-900); }
.ls-admin-sidebar .ls-lang a { color: #cbd8cf; }
.ls-footer { background: var(--cancha-900); color: #cbd8cf; padding: 2.5rem 0; margin-top: 3rem; }
.ls-footer a { color: #cbd8cf; }
.ls-footer a:hover { color: var(--pasto-400); }

.ls-page-hero { background: radial-gradient(circle at 20% 20%, #2a2410 0%, var(--cancha-900) 55%); color: white; padding: 2.5rem 0; }
.ls-page-hero h1 { font-family: var(--fuente-marcador); text-transform: uppercase; font-weight: 700; margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Bloque de pago por Zelle */
.ls-pago-monto { font-family: var(--fuente-marcador); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--pasto-600); }
.ls-codigo {
    font-family: var(--fuente-marcador); font-weight: 700; font-size: clamp(1.3rem, 4vw, 1.9rem); letter-spacing: .06em;
    background: var(--cancha-900); color: var(--pasto-400); padding: .75rem 1rem; border-radius: .6rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; user-select: all;
}
.ls-copiar { border: 1px solid rgba(255,255,255,.3); background: transparent; color: white; border-radius: .4rem; padding: .3rem .6rem; font-size: .75rem; font-family: var(--fuente-texto); letter-spacing: .05em; }
.ls-copiar:hover { background: rgba(255,255,255,.1); }
.ls-dato { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--linea-200); }
.ls-dato:last-child { border-bottom: 0; }
.ls-dato .valor { font-weight: 700; font-size: 1.05rem; }
.ls-pasos-pago { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.ls-pasos-pago li { counter-increment: paso; display: flex; gap: .9rem; padding: .7rem 0; border-bottom: 1px dashed var(--linea-200); }
.ls-pasos-pago li:last-child { border-bottom: 0; }
.ls-pasos-pago li::before {
    content: counter(paso); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--pasto-500); color: var(--cancha-900); font-family: var(--fuente-marcador); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Estados de cuota */
.ls-cuota { border: 1px solid var(--linea-200); border-radius: .85rem; padding: 1rem 1.25rem; background: white; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ls-cuota.pagada { border-color: #86efac; background: #f0fdf4; }
.ls-cuota.reportada { border-color: #fcd34d; background: #fffbeb; }
.ls-cuota.rechazada { border-color: #fca5a5; background: #fef2f2; }
.ls-cuota.vencida { border-color: #fca5a5; }
.ls-estado { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; }
.ls-estado.pendiente { background: var(--linea-200); color: var(--tinta-700); }
.ls-estado.reportada { background: #fde68a; color: #78350f; }
.ls-estado.pagada { background: #bbf7d0; color: #14532d; }
.ls-estado.rechazada, .ls-estado.anulada { background: #fecaca; color: #7f1d1d; }
.ls-estado.expirada { background: #e5e7eb; color: #374151; }

.ls-reloj { font-family: var(--fuente-marcador); font-size: .95rem; color: var(--rosa-500); }

/* Carnet: impresión limpia */
@media print {
    .ls-nav, .ls-footer, .ls-no-print { display: none !important; }
    body { background: white; }
}

/* Registro electrónico de aceptación de la exención (documento imprimible) */
.ls-doc-body { background: #f3f1ec; }
.ls-doc { max-width: 860px; margin: 0 auto; background: white; border: 1px solid var(--linea-200, #ddd); border-radius: .5rem; padding: 2rem 2.25rem; }
.ls-doc-head { border-bottom: 2px solid #111; padding-bottom: .75rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ls-doc-head .ls-doc-tipo { font-family: 'Oswald', sans-serif; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; color: #555; }
.ls-doc-head h1 { font-family: 'Oswald', sans-serif; font-size: 1.45rem; margin: 0; }
.ls-doc table.ls-doc-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ls-doc table.ls-doc-tabla th, .ls-doc table.ls-doc-tabla td { border-bottom: 1px solid #e5e1d8; padding: .45rem .5rem; vertical-align: top; text-align: left; }
.ls-doc table.ls-doc-tabla th { width: 34%; font-weight: 600; color: #333; background: #faf8f4; }
.ls-doc .ls-doc-seccion { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; color: #6b5e3c; margin: 1.5rem 0 .5rem; }
.ls-doc .ls-doc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; word-break: break-all; }
.ls-doc .ls-doc-snapshot { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; background: #faf8f4; border: 1px solid #e5e1d8; padding: 1rem; max-height: 420px; overflow: auto; }
.ls-doc .ls-doc-pie { border-top: 1px solid #e5e1d8; margin-top: 1.5rem; padding-top: .75rem; font-size: .78rem; color: #666; }
.ls-doc-barra { max-width: 860px; margin: 0 auto 1rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
@media print {
    .ls-doc-body { background: white; }
    .ls-doc { border: 0; border-radius: 0; padding: 0; max-width: none; }
    .ls-doc .ls-doc-snapshot { max-height: none; overflow: visible; }
    .ls-doc-barra { display: none !important; }
    a[href]::after { content: ''; }
}

/* Calendario público */
.ls-partido { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--linea-200); }
.ls-partido:last-child { border-bottom: 0; }
.ls-partido .marcador { font-family: var(--fuente-marcador); font-weight: 700; font-size: 1.4rem; min-width: 70px; text-align: center; }
.ls-partido .equipo { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.ls-partido .equipo img { width: 32px; height: 32px; border-radius: .4rem; object-fit: cover; }
.ls-partido .equipo.visitante { justify-content: flex-end; text-align: right; }
.ls-jornada-titulo { font-family: var(--fuente-marcador); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--pasto-600); padding: .6rem 1rem; background: var(--hueso-50); border-bottom: 1px solid var(--linea-200); }

/* ---------- v6: pizarra táctica (alineación con formaciones) ---------- */
.ls-cancha {
    position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 560px; border-radius: .75rem; overflow: hidden;
    background:
        repeating-linear-gradient(180deg, #2f8f46 0 12.5%, #2a8340 12.5% 25%),
        #2a8340;
    border: 2px solid rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), var(--sombra-card);
}
.ls-cancha::before, .ls-cancha::after {
    content: ""; position: absolute; left: 20%; width: 60%; height: 16%; border: 2px solid rgba(255,255,255,.7); pointer-events: none;
}
.ls-cancha::before { top: -2px; border-top: 0; }
.ls-cancha::after { bottom: -2px; border-bottom: 0; }
.ls-cancha-linea { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.7); }
.ls-cancha-circulo { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.7); border-radius: 50%; }
.ls-casilla {
    position: absolute; transform: translate(-50%, -50%); width: 22%; min-width: 64px; max-width: 120px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: white;
}
.ls-dorsal {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--cancha-900); color: var(--pasto-400); font-family: var(--fuente-marcador); font-size: 1rem; font-weight: 700;
    border: 2px solid var(--pasto-500); box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.ls-dorsal-sm { width: 26px; height: 26px; font-size: .8rem; flex: none; }
.ls-casilla-vacia .ls-dorsal { background: rgba(255,255,255,.25); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.6); }
.ls-casilla-nombre, .ls-casilla-rol { font-size: .68rem; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.6); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-casilla-rol { text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.ls-casilla-llena .ls-casilla-rol { opacity: 1; }
.ls-sel-jugador {
    width: 100%; font-size: .7rem; padding: 2px 4px; border-radius: .35rem; border: 1px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.92); color: var(--tinta-700); cursor: pointer;
}
.ls-casilla-llena .ls-sel-jugador { background: var(--pasto-400); border-color: var(--pasto-500); font-weight: 600; }
.ls-formacion-badge { font-family: var(--fuente-marcador); letter-spacing: .06em; font-size: .85rem; }
.ls-banca { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .75rem; }
.ls-banca-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .3rem .4rem; border-radius: .4rem; cursor: pointer; }
.ls-banca-item:hover { background: var(--hueso-50); }
.ls-banca-item input { flex: none; }
.ls-banca-titular { opacity: .45; text-decoration: line-through; }
.ls-banca-susp { opacity: .6; }
@media (max-width: 480px) {
    .ls-casilla { min-width: 56px; }
    .ls-dorsal { width: 28px; height: 28px; font-size: .85rem; }
    .ls-casilla-nombre, .ls-casilla-rol { font-size: .6rem; }
    .ls-sel-jugador { font-size: .62rem; }
}

/* ---------- v7: imágenes en noticias ---------- */
.ls-noticia-img { display: block; width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--linea-200); }
.ls-noticia-thumb { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .6rem; border: 1px solid var(--linea-200); }

/* --- Autenticación (registro / login): tarjeta dividida, panel de marca + formulario --- */
.ls-auth { max-width: 980px; margin: 2.5rem auto 4rem; padding: 0 1rem; }
.ls-auth-card {
    display: grid; grid-template-columns: 1fr; background: white; border: 1px solid var(--linea-200);
    border-radius: 1.1rem; overflow: hidden; box-shadow: 0 2px 4px rgba(11,18,32,.04), 0 24px 48px -24px rgba(11,18,32,.25);
}
@media (min-width: 860px) { .ls-auth-card { grid-template-columns: 5fr 7fr; } }
.ls-auth-brand {
    position: relative; color: #f4efe2; padding: 2.25rem 2rem;
    background: radial-gradient(ellipse 80% 55% at 20% 0%, rgba(212,175,55,.35) 0%, transparent 60%), linear-gradient(170deg, #1a1710 0%, var(--cancha-900) 70%);
    display: flex; flex-direction: column; gap: 1.75rem;
}
.ls-auth-brand::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(212,175,55,.35); border-radius: .8rem; pointer-events: none; }
.ls-auth-liga { display: flex; align-items: center; gap: .85rem; position: relative; }
.ls-auth-liga img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--pasto-500); object-fit: cover; }
.ls-auth-liga .nombre { font-family: var(--fuente-marcador); font-weight: 600; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pasto-400); line-height: 1.2; }
.ls-auth-liga .lema { font-size: .82rem; color: rgba(244,239,226,.7); letter-spacing: .04em; }
.ls-auth-brand h2 { font-family: var(--fuente-marcador); font-weight: 700; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; margin: 0; color: white; position: relative; }
.ls-auth-brand h2 span { color: var(--pasto-400); }
.ls-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.ls-pasos li { display: grid; grid-template-columns: 34px 1fr; gap: .8rem; align-items: start; }
.ls-pasos .num {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--fuente-marcador); font-weight: 700; font-size: 1rem;
    border: 1px solid rgba(212,175,55,.6); color: var(--pasto-400); background: rgba(212,175,55,.08);
}
.ls-pasos li.activo .num { background: linear-gradient(180deg, var(--pasto-400), var(--pasto-600)); color: var(--cancha-900); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(212,175,55,.8); }
.ls-pasos .titulo { font-weight: 600; color: white; margin: 0; line-height: 1.3; }
.ls-pasos .texto { margin: .15rem 0 0; font-size: .86rem; color: rgba(244,239,226,.68); line-height: 1.45; }
.ls-pasos li:not(.activo) .titulo { color: rgba(244,239,226,.85); }
.ls-pasos .check { color: var(--pasto-400); }
.ls-auth-pie { margin-top: auto; font-size: .78rem; color: rgba(244,239,226,.5); letter-spacing: .06em; text-transform: uppercase; position: relative; }
.ls-auth-pie b { color: var(--pasto-500); font-weight: 600; }
.ls-auth-form { padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
@media (min-width: 860px) { .ls-auth-form { padding: 2.5rem 2.75rem; } }
.ls-auth-form h1 { font-family: var(--fuente-marcador); font-weight: 700; font-size: 1.85rem; letter-spacing: .01em; margin: 0; color: var(--tinta-700); }
.ls-auth-form .sub { margin: .25rem 0 0; color: var(--tinta-500); }
.ls-campos { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .ls-campos { grid-template-columns: 1fr 1fr; } .ls-campos .ancho { grid-column: 1 / -1; } }
.ls-campo { display: flex; flex-direction: column; gap: .35rem; }
.ls-campo label { font-size: .82rem; font-weight: 600; color: var(--tinta-700); letter-spacing: .01em; }
.ls-campo .form-control, .ls-campo .form-select {
    border: 1.5px solid var(--linea-200); border-radius: .6rem; padding: .7rem .9rem; font-size: .98rem; background: var(--hueso-50);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ls-campo .form-control:focus, .ls-campo .form-select:focus { border-color: var(--pasto-500); background: white; box-shadow: 0 0 0 4px rgba(212,175,55,.18); }
.ls-campo .ayuda { font-size: .78rem; color: var(--tinta-500); margin: 0; }
.ls-campo-pw { position: relative; }
.ls-campo-pw .form-control { padding-right: 4.6rem; }
.ls-campo-pw .ver {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--pasto-600); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .5rem; border-radius: .4rem; cursor: pointer;
}
.ls-campo-pw .ver:hover, .ls-campo-pw .ver:focus-visible { background: rgba(212,175,55,.14); outline: none; }
.ls-btn-oro {
    display: block; width: 100%; border: 0; border-radius: .7rem; padding: .95rem 1.5rem;
    font-family: var(--fuente-marcador); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cancha-900); background: linear-gradient(180deg, var(--pasto-400) 0%, var(--pasto-500) 60%, #c39a2a 100%);
    box-shadow: 0 10px 24px -10px rgba(163,121,15,.7); transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.ls-btn-oro:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 28px -10px rgba(163,121,15,.8); color: var(--cancha-900); }
.ls-btn-oro:focus-visible { outline: 3px solid var(--cancha-900); outline-offset: 2px; }
.ls-auth-nota { font-size: .8rem; color: var(--tinta-500); margin: 0; line-height: 1.5; }
.ls-auth-alt { margin: 0; text-align: center; color: var(--tinta-500); font-size: .92rem; }
.ls-auth-alt a { color: var(--pasto-600); font-weight: 600; text-decoration-color: rgba(163,121,15,.4); }
.ls-auth-alt a:hover { color: var(--cancha-900); }
.ls-auth-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .ls-btn-oro, .ls-btn-oro:hover { transition: none; transform: none; } }

/* ============================================================
   Formularios del panel y de la cuenta: mismo lenguaje visual
   que el ingreso/registro (tarjeta blanca, cabecera negra-dorada,
   campos marfil con foco dorado, botón dorado Oswald).
   ============================================================ */
.ls-btn-gradiente {
    background: linear-gradient(180deg, var(--pasto-400) 0%, var(--pasto-500) 60%, #c39a2a 100%);
    color: var(--cancha-900); font-family: var(--fuente-marcador); font-weight: 700;
    font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
    border-radius: .7rem; box-shadow: 0 10px 24px -10px rgba(163,121,15,.7);
}
.ls-btn-gradiente:hover, .ls-btn-gradiente:focus { color: var(--cancha-900); filter: brightness(1.04); box-shadow: 0 14px 28px -10px rgba(163,121,15,.8); transform: translateY(-1px); }
.ls-btn-gradiente:focus-visible { outline: 3px solid var(--cancha-900); outline-offset: 2px; }

.ls-form-card {
    background: white; border: 1px solid var(--linea-200); border-radius: 1rem; overflow: hidden;
    box-shadow: 0 2px 4px rgba(11,18,32,.04), 0 24px 48px -24px rgba(11,18,32,.22);
}
.ls-form-head {
    position: relative; color: #f4efe2; padding: 1.35rem 1.5rem 1.25rem;
    background: radial-gradient(ellipse 80% 70% at 15% 0%, rgba(212,175,55,.35) 0%, transparent 60%), linear-gradient(170deg, #1a1710 0%, var(--cancha-900) 70%);
}
.ls-form-head::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--pasto-500), transparent); }
.ls-form-head .eyebrow { font-family: var(--fuente-marcador); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pasto-400); font-weight: 600; margin: 0 0 .15rem; }
.ls-form-head h2 { font-family: var(--fuente-marcador); font-weight: 700; font-size: 1.45rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; margin: 0; color: white; }
.ls-form-head .sub { margin: .3rem 0 0; font-size: .86rem; color: rgba(244,239,226,.68); line-height: 1.45; }
.ls-form-body { padding: 1.5rem; }
@media (min-width: 700px) { .ls-form-body { padding: 1.75rem; } }

.ls-form-card .form-label, .ls-panel .form-label { font-size: .82rem; font-weight: 600; color: var(--tinta-700); letter-spacing: .01em; margin-bottom: .35rem; }
.ls-form-card .form-label .text-muted, .ls-panel .form-label .text-muted { font-weight: 500; }
.ls-form-card .form-control, .ls-form-card .form-select, .ls-panel .form-control, .ls-panel .form-select {
    border: 1.5px solid var(--linea-200); border-radius: .6rem; padding: .7rem .9rem; font-size: .98rem; background: var(--hueso-50); color: var(--tinta-700);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ls-form-card .form-select, .ls-panel .form-select { background-color: var(--hueso-50); }
.ls-form-card .form-control:focus, .ls-form-card .form-select:focus, .ls-panel .form-control:focus, .ls-panel .form-select:focus {
    border-color: var(--pasto-500); background-color: white; box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}
.ls-form-card .form-control[readonly], .ls-panel .form-control[readonly] { background: #f1ede3; color: var(--tinta-500); }
.ls-form-card .form-check-input:checked, .ls-panel .form-check-input:checked { background-color: var(--pasto-500); border-color: var(--pasto-500); }
.ls-form-card .form-check-input:focus, .ls-panel .form-check-input:focus { border-color: var(--pasto-500); box-shadow: 0 0 0 4px rgba(212,175,55,.18); }
.ls-form-card .form-text, .ls-panel .form-text { color: var(--tinta-500); font-size: .78rem; }
.ls-form-card .alert, .ls-panel .alert {
    background: rgba(212,175,55,.10); border: 1px solid rgba(212,175,55,.4); color: var(--tinta-700); border-radius: .6rem;
}
.ls-form-card .alert-danger, .ls-panel .alert-danger { background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.35); }
.ls-form-card .alert-success, .ls-panel .alert-success { background: rgba(21,128,61,.08); border-color: rgba(21,128,61,.35); }
.ls-form-card .ls-eyebrow { color: var(--pasto-600); }
.ls-form-card .btn-outline-secondary, .ls-panel .btn-outline-secondary { border-radius: .55rem; }

/* País del jugador: bandera junto al nombre y selector con vista previa */
.ls-bandera { display: inline-block; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); object-fit: cover; margin-left: .15rem; }
.ls-nombre-pais { white-space: nowrap; }
.ls-pais-campo { display: flex; align-items: center; gap: .5rem; }
.ls-pais-campo .ls-pais-vista { flex: 0 0 auto; min-width: 24px; display: inline-flex; align-items: center; }
.ls-pais-campo .ls-pais-vista .ls-bandera { margin-left: 0; }
.ls-pais-campo select { flex: 1 1 auto; min-width: 0; }
.ls-auth-form .ls-campo label .opcional { font-weight: 400; opacity: .7; }
.ls-pais-campo .ls-pais-vista:empty { display: none; }

/* changes23: menú "Acciones" por fila en Admin > Jugadores (Bootstrap dropdown con el lenguaje visual del sitio) */
.ls-acciones .dropdown-toggle { white-space: nowrap; }
.ls-acciones .dropdown-menu {
    min-width: 15.5rem; padding: .35rem; background: #fff; border: 1px solid var(--linea-200); border-radius: .65rem;
    box-shadow: var(--sombra-card); font-size: .92rem;
}
.ls-acciones .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .48rem .75rem; border-radius: .45rem; white-space: nowrap; }
.ls-acciones .dropdown-item .bi { width: 1.15rem; text-align: center; flex: 0 0 auto; }
.ls-acciones .dropdown-item small { color: var(--tinta-500); }
.ls-acciones .dropdown-item:hover, .ls-acciones .dropdown-item:focus { background: var(--hueso-50); color: var(--cancha-900); }
.ls-acciones .dropdown-item:focus-visible { outline: 2px solid var(--pasto-500); outline-offset: -2px; }
.ls-acciones .dropdown-item.disabled, .ls-acciones .dropdown-item:disabled { color: var(--tinta-500); background: transparent; }
.ls-acciones .dropdown-item.text-danger:hover, .ls-acciones .dropdown-item.text-danger:focus { background: rgba(244,63,94,.08); color: #b91c1c !important; }
.ls-acciones .dropdown-divider { margin: .3rem .25rem; border-color: var(--linea-200); }
.ls-acciones form { margin: 0; }
.ls-indicador { display: inline-block; margin-left: .2rem; font-size: 1.05rem; line-height: 1; vertical-align: middle; }