/* Tipografias autoalojadas (antes @import a fonts.googleapis.com) -- asi
   el navegador de quien visita la web nunca contacta con servidores de
   Google para cargar la fuente. Mismos pesos que antes: Inter 400/500/600
   e Space Grotesk 500/700, subset latin (paginas en espanol/ingles), SIL
   Open Font License igual que en Google Fonts -- ver LICENSE-inter.txt /
   LICENSE-space-grotesk.txt en fonts/. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

/* Paleta sacada del logo real de la app: negro, verde lima, blanco y gris
   de la malla de la raqueta. Toda la web es oscura para ser fiel a esos
   colores -- ver la seccion "@media print" mas abajo, donde se vuelve a
   una paleta clara solo para la exportacion a PDF (por tinta y lectura en
   papel, el partido impreso no necesita ir en negro). */
:root {
    --ink: #000000;
    --bg: #0F1012;
    --surface: #1A1B1E;
    --surface-2: #2B2D31;
    --lime: #C2D230;
    --lime-ink: #14150A;
    --green: #35C77E;
    --red: #FF6161;
    --text: #F2F3EF;
    --text-muted: #9AA0A6;
    --team-a: #E08A2C;
    --team-b: #5B8CFF;
    /* Ivan, 2026-09-23 (rediseño "Fairway"): "revisa los colores, forma y
       organizacion... busca un diseño moderno y fluido" -- mismo negro +
       lima de siempre (viene del logo, no se toca), pero se añade un verde
       "fairway" (para degradados calle->green en cabeceras/botones) y un
       tono mas claro del lima (para esos mismos degradados) y radios de
       esquina reutilizables para que tarjetas/botones sean mas redondeados
       y organicos en toda la web, no solo en un sitio suelto. */
    --fairway: #1F7A4D;
    --fairway-deep: #0E2318;
    --lime-soft: #DDE96E;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-pill: 999px;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
    padding: 0 0 60px;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

header.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    margin: 0 -20px 20px;
    background: var(--ink);
    color: var(--text);
    border-bottom: 3px solid var(--lime);
}

header.top h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text);
}

header.top h1.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 7px;
    display: block;
}

header.top .sub {
    color: var(--text-muted);
    font-size: 13px;
}

/* /panel (index.html) es la unica cabecera con TRES cosas a la derecha del
   titulo (numero de partidos + el nuevo enlace de cuenta) en vez de dos --
   se agrupan aqui para no romper el "justify-content: space-between" de
   header.top, pensado para exactamente dos huecos (titulo/marca a la
   izquierda, una cosa a la derecha). */
/* Ivan, 2026-09-17: "en la pagina principal de mi cuenta, reordena el
   titulo Mi Cuenta, el lapiz de editar, y el nombre de usuario del email,
   esta todo descolocado" -- .top-right-group base (abajo) apila sus hijos
   en COLUMNA porque /panel y la portada meten ahi dos lineas de texto
   distintas; en /cuenta eso dejaba el avatar+nombre en una fila y el
   lapiz de editar suelto en otra, con un hueco vacio de por medio que no
   pegaba con nada. Aqui, con avatar+nombre+lapiz, tiene mas sentido una
   unica fila horizontal (los 3 alineados y centrados verticalmente entre
   si, igual que estarian en cualquier cabecera de app) -- de ahi este
   modificador aparte (.account-identity) en vez de tocar la regla base,
   que las demas paginas siguen necesitando en columna. */
.top-right-group.account-identity {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.top-right-group.account-identity .avatar-row { min-width: 0; }

.top-right-group.account-identity .sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El titulo NUNCA debe partirse en dos lineas ("Mi" / "cuenta") por falta
   de sitio -- si el nombre/email de la derecha es largo, es ESE el que se
   encoge con elipsis (ver .sub de arriba, con min-width:0 en toda la
   cadena de contenedores hasta el), nunca el titulo. */
header.top h1.brand { flex-shrink: 0; }

.top-right-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Enlace de "Entrar"/"Mi cuenta" arriba a la derecha -- antes solo vivia en
   la portada (reutilizando el hueco visual de .sub, dentro de header.top);
   ahora sale en todas las paginas (ver templates/_account_link.html), asi
   que necesita su propio color/tamano base en vez de depender de estar
   siempre dentro de header.top -- por ejemplo dentro de .mini-brand, en las
   paginas que no tienen header.top (ficha de partido, comparar amigos...). */
.account-link {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Ivan, revision 2026-09-23, pendiente nº4 ("notificaciones"): campanita
   junto a "Mi cuenta"/"Entrar" en la cabecera del feed -- .top-right-group
   base apila sus hijos en COLUMNA (ver comentario de mas arriba), asi que
   aqui hace falta una fila horizontal aparte para poner campanita+enlace
   uno junto al otro. */
.top-right-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.notif-bell {
    color: var(--text-muted);
    display: inline-flex;
}

.notif-bell:hover { color: var(--lime); }

.account-link:hover { color: var(--lime); text-decoration: underline; }

/* .mini-brand paso de contener solo el enlace a la marca a ser una fila
   completa (marca a la izquierda, "Mi cuenta"/"Entrar" a la derecha) en las
   paginas que no tienen header.top -- ficha de partido/jugador, comparar,
   editar perfil, aviso de amigo sin jugador. */
.mini-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 24px 0 32px;
}

.stat-tile {
    background: linear-gradient(155deg, var(--surface-2), var(--surface));
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    text-align: center;
}

.stat-tile .num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    color: var(--lime);
}

.stat-tile .label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

h2.section {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    margin: 36px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(194, 210, 48, 0.35);
}

/* Ficha de marcador: cada partido se ve como una fila de ranking federativo */
.scoreboard-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 8px;
    border-left: 4px solid var(--surface-2);
    gap: 12px;
}

.scoreboard-card.won { border-left-color: var(--green); }
.scoreboard-card.lost { border-left-color: var(--red); }
.scoreboard-card:hover { background: var(--surface-2); }

.sc-left { flex: 1; min-width: 0; }

.sc-left .sc-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.sc-left .sc-format {
    font-size: 11px;
    color: var(--text-muted);
}

.sc-left .sc-players {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-score {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--text);
}

.sc-score .sep { color: var(--text-muted); margin: 0 4px; }

.sc-winner {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--surface-2);
    color: var(--text-muted);
    white-space: nowrap;
}

.sc-winner.won { background: rgba(53, 199, 126, 0.15); color: var(--green); }
.sc-winner.lost { background: rgba(255, 97, 97, 0.15); color: var(--red); }

.sc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.sc-views {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.leaderboard {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

table.leaderboard th, table.leaderboard td {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
}

table.leaderboard th {
    color: var(--lime);
    background: var(--ink);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}

table.leaderboard tr:not(:last-child) td { border-bottom: 1px solid var(--surface-2); }

/* Fila propia en el ranking de amigos (/amigos) -- misma idea que
   resaltar tu fila en cualquier tabla de clasificacion, para que te
   encuentres de un vistazo sin tener que leer nombre a nombre. */
table.leaderboard tr.leaderboard-row-you td { color: var(--lime); font-weight: 700; }

/* Navegacion mes anterior/siguiente del MVP mensual entre amigos
   (Fase 2.3, /amigos) -- reutiliza .filter-bar (flex + gap) solo que con
   enlaces y una etiqueta de texto en vez de un <select>. */
.mvp-month-nav { align-items: center; }
.mvp-month-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-muted);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state .big { font-family: 'Space Grotesk', sans-serif; font-size: 20px; color: var(--text); margin-bottom: 6px; }

.back-link { display: inline-block; margin: 24px 0 8px; color: var(--lime); font-size: 14px; font-weight: 600; }

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.brand-link .brand-icon { width: 20px; height: 20px; border-radius: 5px; }

.detail-header {
    /* Ivan, 2026-09-23 (rediseño "Fairway"): cabecera de la ficha de ronda
       como tarjeta "hero" -- degradado sutil lima/fairway en una esquina
       (mismo recurso que .hero-* de round_live_play.html) en vez del negro
       plano de antes, y esquinas mas redondeadas para ir con el resto de
       tarjetas nuevas. */
    background: radial-gradient(120% 160% at 100% 0%, rgba(194, 210, 48, .10), transparent 55%), var(--ink);
    color: var(--text);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    text-align: center;
    margin: 20px 0;
    border-top: 4px solid var(--surface-2);
}

.detail-header .winner-line {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--text);
}

.detail-header.won { border-top-color: var(--green); }
.detail-header .meta { color: var(--text-muted); font-size: 13px; margin-top: 6px; }

.pin-badge {
    display: inline-block;
    margin-top: 14px;
    background: var(--lime);
    color: var(--lime-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}

.views-badge {
    display: inline-block;
    margin-top: 10px;
    margin-left: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

table.set-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

table.set-table th, table.set-table td {
    padding: 10px 14px;
    text-align: center;
    font-size: 14px;
    border: 1px solid var(--surface-2);
}

table.set-table th { color: var(--text-muted); font-weight: 500; }
table.set-table td.label { text-align: left; }
table.set-table tr.won td { color: var(--green); font-weight: 600; }

/* Marca quien gano CADA set en concreto (no solo la fila del ganador del
   partido, que ya estaba) -- un set suelto perdido dentro de un partido
   ganado tambien se ve distinto asi. */
table.set-table td.set-won { color: var(--lime); font-weight: 700; }

.set-won-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lime);
    margin-left: 4px;
    vertical-align: middle;
}

/* Resumen del partido generado con Claude (opcional, ver
   generate_ai_summary en main.py) -- la etiqueta "generado con IA" es a
   proposito siempre visible, no un detalle escondido. */
.ai-summary {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin: 16px 0;
}

.ai-summary-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.ai-badge {
    background: var(--surface-2);
    color: var(--lime);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: normal;
}

.ai-summary p { color: var(--text); font-size: 14px; line-height: 1.55; margin: 0; }

.ai-summary-list {
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    padding-left: 18px;
}

.ai-summary-list li { margin-bottom: 6px; }
.ai-summary-list li:last-child { margin-bottom: 0; }

/* La IA marca en **negrita** el dato/nombre clave de cada punto (ver
   _markdown_bold_to_html en main.py) -- acento lima para que resalte al
   leer en diagonal, igual que el resto de datos destacados de la ficha. */
.ai-summary strong, .ai-summary-list strong { color: var(--lime); font-weight: 700; }

/* Ivan, 2026-09-17: "aconsejar como jugar al jugador en el siguiente
   hoyo" -- caja de consejo de caddie en round_live_play.html (ver
   #caddieTipBox / renderCaddieTipBox), reutiliza .ai-summary como base y
   solo añade el espaciado entre lineas cuando hay varios jugadores. */
.caddie-tip-box p.caddie-tip-line { color: var(--text); font-size: 14px; line-height: 1.5; margin: 0 0 6px; }
.caddie-tip-box p.caddie-tip-line:last-child { margin-bottom: 0; }
.caddie-tip-box p.caddie-tip-line b { color: var(--lime); }
/* Ivan, 2026-09-23 (pendiente nº5, "Caddie en vivo... no solo con
   historico"): la frase calculada con el dia de hoy (_live_round_trend_note
   en main.py) se distingue en cursiva/opacidad del consejo historico de
   siempre, para que se lea como algo distinto ("esto es lo de hoy"). */
.caddie-tip-box p.caddie-tip-line.caddie-tip-live { font-style: italic; opacity: 0.85; }

/* Aviso "recopilado con Padel Stats" + enlace a Connect IQ, solo en la
   vista publica por PIN (ver match_detail.html, not owned) -- mismo
   patron visual que .ai-summary pero con acento lima en vez de resaltar
   como si fuera un dato del partido. */
.app-promo {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 20px 0 16px;
    text-align: center;
}

.app-promo-label {
    color: var(--lime);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.app-promo-text {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0;
}

/* Ivan, 2026-09-16: las pestañas Resultado/Estadisticas/Caddie de
   round_detail.html ocultan los paneles que no tocan con el atributo
   HTML "hidden" -- pero la regla de encima (".player-grid { display:
   grid }") es de autor y gana en especificidad a la regla del navegador
   "[hidden] { display: none }", asi que sin esto los tres paneles se
   veian a la vez apilados en vez de solo el activo. */
.player-grid[hidden] {
    display: none;
}

.player-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 14px 16px;
}

.player-card .pname { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); min-width: 0; overflow-wrap: break-word; }

/* Ivan, 2026-09-20: "la seleccion de tipo de marcaje se debe de elegir en
   el perfil del jugador... revisaremos cada perfil para decidir el tipo
   de marcaje a entrar" -- estas insignias solo INFORMAN de que modo le
   toca a cada jugador (resuelto por su nombre/perfil), ya no hay un
   selector manual por ronda. Mismo patron visual que .ai-badge. */
.player-mode-badge {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 10px;
    margin-top: 4px;
}
.player-mode-badge-stats { color: var(--text); }
.player-mode-badge-caddy { color: var(--lime); }

.player-mode-tag {
    display: inline-block;
    background: var(--surface-2);
    color: var(--lime);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Cabecera de la tarjeta de jugador en la ficha publica por PIN (Fase 2.6):
   nombre/insignia a la izquierda, y a la derecha -- justo donde Ivan pidio
   sitio -- el avatar de quien ya esta vinculado (si se puede ensenar, ver
   slot_identity en main.py) o el boton para vincularse. En el panel del
   dueno (owned=True) esta cabecera no se pinta -- ese caso sigue usando
   solo el formulario de asignar nombres de arriba.
   flex-wrap:wrap -- en movil, .pname (sin encoger, ver arriba) y el
   formulario de "Vincular" (select + boton, ancho fijo) no cabian los dos
   en la misma fila y el boton acababa tapando el texto del nombre; con
   wrap, si no caben los dos se pasa el segundo a su propia fila debajo,
   sin superponerse. */
.player-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.player-card-identity {
    flex-shrink: 0;
}

.identity-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.identity-avatar-wrap .identity-name {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* Avatar de quien SI se revela en la tarjeta de jugador (dueno, tu mismo, o
   un amigo aceptado) -- Ivan pidio que fuera "muy pequeña", bastante mas
   chica que el .avatar-thumb de 32px que se usa en /amigos, para no competir
   visualmente con el nombre del hueco en una tarjeta ya bastante apretada. */
.avatar-thumb-tiny, .avatar-placeholder-tiny {
    width: 16px;
    height: 16px;
}

.vincular-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vincular-select {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--surface-2);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 12px;
    max-width: 110px;
}

.card-vincular-no-candidates {
    font-size: 11px;
    color: var(--text-muted);
}

.card-vincular-no-candidates a { color: var(--lime); }

.pword-badge {
    background: var(--surface-2);
    color: var(--lime);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    vertical-align: middle;
}
.player-card .pstat { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.player-card .pstat b { color: var(--text); }
.player-card .pstat-sub { color: var(--text-muted); font-size: 11px; }

/* Ivan, 2026-09-17: "en la tarjeta que aparece de cada jugador, añade un
   pequeño texto de IA valorando su juego" -- mismo acento lima en negrita
   que .ai-summary/.ai-tip, pero compacto para caber dentro de la tarjeta
   de cada jugador (ver player_notes en main.py/round_detail.html). */
.player-card .pnote {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--surface-2);
}
.player-card .pnote strong { color: var(--lime); font-weight: 700; }

/* Leyenda de los iconos que se pintan ENCIMA de la linea en el grafico de
   "Evolucion de juegos y sets" (copa grande = cierra el partido, copa
   pequena = cierra el set, rayo = rotura de saque -- ver
   scorePointStyles/makeEmojiIcon en match_detail.html). Mismo emoji y
   misma diferencia de tamano copa-grande/copa-pequena que en el propio
   grafico, para que se identifique cada icono de un vistazo sin tener que
   adivinar por el texto. Mismo patron visual que .mvp-legend. */
.chart-icon-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.chart-icon-legend span { display: inline-flex; align-items: center; gap: 5px; }

.legend-icon { font-style: normal; font-size: 13px; line-height: 1; }
.legend-icon-sm { font-size: 11px; }
.legend-icon-lg { font-size: 17px; }

/* Regla de sets debajo del grafico de "Evolucion de puntos y sets": cada
   tramo ocupa el mismo % de ancho que los puntos de ese set ocupan en el
   grafico de arriba, para que quede alineado visualmente con el eje X. */
.set-ruler {
    display: flex;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--surface-2);
    margin: -8px 0 20px;
}

.set-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--surface);
    border-right: 1px solid var(--surface-2);
    overflow: hidden;
    white-space: nowrap;
}

.set-seg:last-child { border-right: none; }
.set-seg span { overflow: hidden; text-overflow: ellipsis; }
.set-seg.won-a { background: rgba(224, 138, 44, 0.18); color: var(--team-a); }
.set-seg.won-b { background: rgba(91, 140, 255, 0.18); color: var(--team-b); }

/* MVP del partido: ranking de los 4 jugadores por puntuacion 0-10 (misma
   formula que MvpCalc.mc en el reloj), el primero destacado en lima. */
.mvp-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.mvp-row {
    display: grid;
    grid-template-columns: minmax(90px, 130px) 1fr 40px;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 10px 14px;
}

.mvp-row.mvp-winner { border-color: var(--lime); background: rgba(194, 210, 48, 0.08); }

.mvp-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Barra del MVP partida en 3 tramos (puntos / bono defensivo por pocos
   errores / saque), cada uno con el ancho de su contribucion real a la
   puntuacion 0-10 -- ver compute_mvp() en main.py, donde points_pct +
   defense_pct + serve_pct ya suman exactamente el ancho total de antes. */
.mvp-bar-track { display: flex; height: 8px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.mvp-bar-fill { height: 100%; }
.mvp-bar-points { background: var(--lime); }
.mvp-bar-defense { background: var(--green); }
.mvp-bar-serve { background: var(--team-b); }

.mvp-explainer {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin: -4px 0 12px;
    max-width: 62ch;
}

.mvp-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.mvp-legend span { display: flex; align-items: center; gap: 5px; }

.mvp-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.mvp-swatch-points { background: var(--lime); }
.mvp-swatch-defense { background: var(--green); }
.mvp-swatch-serve { background: var(--team-b); }

.mvp-score {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Grupo de graficos "Puntos, errores y saques": mismo .chart-container de
   siempre, con una etiqueta encima para diferenciarlos ya que van seguidos. */
.chart-block { margin: 16px 0; }

.chart-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.chart-container-small { height: 200px; }

.visits-total {
    color: var(--text-muted);
    font-size: 12px;
    margin: 6px 0 20px;
    font-variant-numeric: tabular-nums;
}

.delete-form { margin-top: 24px; }

.btn-delete {
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.btn-delete:hover { background: rgba(255, 97, 97, 0.12); }

/* Borrado con periodo de gracia (ver PLAN-web-publica.md): un jugador con
   el PIN puede pedir borrar un partido, pero el dueño tiene 48h para
   deshacerlo antes de que se borre de verdad -- este bloque avisa de eso
   en la propia ficha, y el badge equivalente en el listado del panel. */
.pending-delete-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(255, 97, 97, 0.1);
    border: 1px solid var(--red);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 18px 0;
}

.pending-delete-text {
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
}

.btn-restore {
    background: var(--lime);
    border: none;
    color: var(--lime-ink);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-restore:hover { opacity: 0.88; }

.badge-pending {
    display: inline-block;
    background: rgba(255, 97, 97, 0.15);
    color: var(--red);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    vertical-align: middle;
}

.delete-requested-banner {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 20px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.map-link { color: var(--lime); font-size: 13px; font-weight: 600; }

.map-container {
    height: 280px;
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0;
    border: 1px solid var(--surface-2);
}

.chart-container {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
    height: 240px;
}

.assign-form {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}

.assign-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.assign-row label {
    width: 34px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-muted);
}

.assign-row input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.assign-row input::placeholder { color: var(--text-muted); }

.btn-save {
    background: var(--lime);
    border: none;
    color: var(--lime-ink);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.btn-save:hover { opacity: 0.88; }

.map-popup { font-family: 'Inter', sans-serif; font-size: 13px; color: #14213D; }

/* Revision 2026-09-23: comparador con un amigo -- una fila por
   estadistica (valor de cada uno a los lados, etiqueta en el centro) y el
   que va mejor resaltado, en vez de barras proporcionales al numero (que
   en "bruto medio" hacian parecer mejor al que tenia MAS golpes). */
.h2h-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 4px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
}
.h2h-header .a { color: var(--team-a); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-header .b { color: var(--team-b); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-header .vs { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

.h2h-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 6px 16px;
}
.h2h-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-2);
}
.h2h-row:last-child { border-bottom: none; }
.h2h-val {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.h2h-val.a { text-align: left; }
.h2h-val.b { text-align: right; }
.h2h-val.win { color: var(--lime); }
.h2h-val.win::after { content: " ●"; font-size: 9px; vertical-align: middle; }
.h2h-val.b.win::after { content: ""; }
.h2h-val.b.win::before { content: "● "; font-size: 9px; vertical-align: middle; }
.h2h-label {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.scroll-box {
    max-height: 420px;
    overflow-y: auto;
    border-radius: 10px;
}

.scroll-box::-webkit-scrollbar { width: 6px; }
.scroll-box::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }

.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 8px;
}

.filter-bar select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}

.action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

/* Centrado de texto de cualquier boton/enlace dentro de un .action-row
   (Ivan, 2026-09-12): con "align-items: stretch" (el valor por defecto de
   flex, que teniamos antes) los botones mas bajos se estiraban a la altura
   del mas alto de la fila, y su texto quedaba pegado arriba en vez de
   centrado -- se notaba sobre todo en movil, donde varios botones de
   /cuenta comparten fila con anchuras y numero de lineas de texto
   distintos. "align-items: center" en el contenedor ya evita el
   estiramiento; esta regla ademas centra el texto dentro de cada boton por
   si su propio texto ocupa mas de una linea. */
.action-row > a,
.action-row > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn-action {
    /* Ivan, 2026-09-23 (rediseño "Fairway"): botones tipo pildora (radio
       completo) en vez de esquinas a 8px -- mismo lenguaje que
       .btn-primary/.btn-secondary de la landing, ahora en TODOS los
       botones de accion de la web para que se sienta consistente. */
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.btn-action:hover { background: var(--surface-2); }

/* Ivan, 2026-09-16: "en la pantalla final de resultado de la partida,
   separa la info en diferentes pantalla, primero el resultado... un
   boton para ver la pantalla con la info estadistica, y otro boton que
   nos llevara a la info de caddie" -- botones de pestaña sobre la ficha
   de ronda (round_detail.html), mismo lenguaje visual que btn-action pero
   con un estado "active" en lima, igual que el resto de pestañas de la
   app (ver .bottom-nav-item.active). */
/* Ivan, 2026-09-23 (rediseño "Fairway"): de una fila de botones sueltos a
   un control segmentado tipo "pildora deslizante" (mismo patron que un
   segmented control de iOS) -- un unico riel con fondo, y la pestaña
   activa como pildora lima dentro de el, en vez de cada boton con su
   propio borde suelto. */
.result-tabs {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin: 4px 0 14px;
}
.result-tab-btn {
    background: transparent;
    border-color: transparent;
}
.result-tab-btn.active {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
}

/* Ivan, 2026-09-17: "añade la opcion de dividir a los jugadores en grupo A
   y B" -- reutiliza el mismo control segmentado (.result-tabs/
   .result-tab-btn) para el interruptor A/B de cada jugador en
   round_live_new.html, con margenes mas ajustados para encajar dentro de
   una tarjeta de jugador en vez de una barra de pestañas de pagina. */
.team-switch {
    margin: 6px 0;
}
.team-switch .team-btn {
    font-size: 12.5px;
    padding: 6px 12px;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #25D366;
    border-color: #25D366;
    color: #05300F;
    text-decoration: none;
}

.btn-whatsapp:hover { background: #2EE577; border-color: #2EE577; }

.wa-icon { flex-shrink: 0; }

/* Selector Padel/Tenis del panel del dueno -- ver dashboard()/players_list()/
   player_detail() en main.py, que calculan "sport" a partir de si la ruta
   empieza por /tenis. Los mismos dos enlaces aparecen en index.html,
   players.html y player_detail.html para poder saltar de una seccion a la
   otra sin volver a la portada publica. */
.sport-tabs {
    display: flex;
    gap: 8px;
    margin: 4px 0 18px;
}

.sport-tab {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.sport-tab:hover { background: var(--surface-2); color: var(--text); }

.sport-tab.active {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
}

/* /cuenta -- vincular la cuenta con un nombre de jugador (Fase 2.2) ----- */

.account-player-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    max-width: 320px;
    margin-bottom: 24px;
    text-align: left;
}

.account-player-card .label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.account-player-card .num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--lime);
    margin: 6px 0 12px;
}

.btn-small { font-size: 12px; padding: 6px 12px; }

.account-link-player-form { justify-content: center; margin-top: 14px; }

.account-name-taken { display: inline-block; margin: 10px 0; }

/* /cuenta -- codigo de vinculacion del reloj (Fase 2.1) ----------------- */

.account-pairing-code {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.08em;
    color: var(--lime);
    margin: 14px 0 8px;
}

.account-pairing-instructions {
    color: var(--text-muted);
    font-size: 13px;
    max-width: 420px;
    margin: 0 auto 8px;
}

/* Interruptor "ocultar mis partidos del feed de mis amigos" (Fase 2.10,
   2026-09-12, /cuenta/perfil) -- primer checkbox de toda la web, de ahi
   que no hubiera ya una clase generica para esto. */
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--lime);
    cursor: pointer;
}

.account-feed-privacy-hint {
    color: var(--text-muted);
    font-size: 13px;
    max-width: 420px;
    margin: 8px auto 0;
}

/* /amigos (Fase 2.2) ---------------------------------------------------- */

.friends-outcome-banner {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0 20px;
    font-size: 14px;
}

.friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    gap: 12px;
}

.friend-row .pname {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.friend-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Ivan, revision 2026-09-23, pendiente nº4 ("notificaciones"): la fila de
   /notificaciones reutiliza .friend-row pero puede ser un <a> (si la
   notificacion lleva a una ronda) -- sin esto heredaria el subrayado/color
   azul de enlace de toda la vida. notif-row-unread marca con un borde
   lima a la izquierda las que todavia no se habian abierto (se pintan asi
   una unica vez: al entrar en /notificaciones se marcan todas como
   leidas, ver mark_notifications_read en main.py). */
.notif-row {
    text-decoration: none;
    color: inherit;
}

.notif-row .pname { font-weight: 600; }

.notif-row-unread {
    border-left: 3px solid var(--lime);
}

.notif-row-unread .pname { font-weight: 700; }

.friends-no-player-hint {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}

.player-roster-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
}

.player-roster-card .pname {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
}

.add-player-form {
    display: flex;
    gap: 8px;
    margin: 16px 0 24px;
}

.add-player-form input[type=text] {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

/* Ligas entre amigos (Fase 2.4): estos formularios tienen mas campos que
   el resto de .add-player-form de siempre (nombre+deporte+modo al crear,
   dos desplegables al anadir una pareja) -- sin flex-wrap se saldrian de
   pantalla en movil. */
.leagues-create-form,
.leagues-add-form {
    flex-wrap: wrap;
}

.leagues-create-form select,
.leagues-add-form select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.leagues-fixture-row {
    flex-wrap: wrap;
}

.leagues-resolve-form {
    flex-wrap: wrap;
}

.leagues-resolve-form input[type=text] {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    width: 110px;
}

/* --- Foto de perfil + buscador de amigos (Fase 2.5) -------------------- */

.avatar-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.avatar-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
}

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    flex-shrink: 0;
}

.avatar-thumb-big, .avatar-placeholder-big {
    /* Historial de este tamano en /cuenta y /cuenta/perfil: 56px -> 40px
       (seguia "ocupando gran parte de la vista") -> 10px (1/4 de 40,
       pedido tal cual) -> ahora 48px, porque 10px resulto demasiado
       pequeno para una foto de perfil (casi ni se ve). 48px es mayor que
       el .avatar-thumb de 32px que se usa en listas (amigos, ligas...) --
       tiene sentido que la cabecera de la propia cuenta destaque un poco
       mas -- pero lejos de los 56px originales. El cache-busting por
       version anadido en base.html (ver STATIC_VERSION en main.py) hace
       que este cambio se note al momento, sin esperar a que caduque el
       cache de 7 dias de CachedStaticFiles.
       .avatar-thumb / .avatar-placeholder ya le dan la forma circular
       (border-radius: 50%, object-fit: cover), esto solo ajusta el
       tamano. */
    width: 48px;
    height: 48px;
}

.account-header-with-avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    justify-content: flex-start;
}

/* Rediseño de /cuenta (Ivan, 2026-09-12): "debemos tener una parte fija
   con el saludo y el consejo de IA" -- sticky en vez de fijo de verdad
   (position: fixed) porque tiene que convivir con el header.top de arriba
   (marca + "Mi cuenta"), que SI se desplaza con el resto: al hacer scroll,
   header.top se va, y justo cuando el saludo llega arriba del todo se
   queda pegado ahi mientras el resto de la pagina (estadisticas, graficos,
   partidos, mapa...) sigue desplazandose debajo. Fondo solido (var(--bg),
   el mismo que <body>) + un borde inferior para que se note que es una
   capa por encima del contenido que pasa detras, no una tarjeta mas de la
   pagina. z-index por debajo de la barra de instalar PWA (40) y de la
   propia botonera inferior (30 en .bottom-nav) para que ninguna de las dos
   quede tapada si coinciden en pantalla. */
.account-pinned {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    padding-top: 6px;
    margin: 0 -20px 0;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid var(--surface-2);
}

.account-pinned .detail-header {
    margin: 14px 0 0;
}

.account-pinned .ai-summary {
    margin: 14px 0 14px;
}

.account-header-info { min-width: 0; }

/* El icono de lapiz de "Editar perfil" vive DENTRO del saludo (Ivan,
   2026-09-12: ya no es un boton mas en una fila de acciones, sigue siendo
   una accion sobre "quien soy" -- tiene sentido pegado al nombre). */
.account-header-info .winner-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text-muted);
    flex-shrink: 0;
}

.account-edit-btn:hover { background: var(--surface-2); color: var(--lime); }

/* Acciones secundarias al final de /cuenta (Reclamar, Cerrar sesion) --
   Ivan, 2026-09-12: ya no son "apartados" con peso de boton grande como
   antes, ahora son enlaces de texto discretos, mismo tratamiento que
   .back-link en el resto de la web. */
.account-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 32px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--surface-2);
}

.account-footer-link {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.account-footer-link:hover { color: var(--lime); text-decoration: underline; }

.account-footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

/* Botonera fija de navegacion entre apartados (Cuenta/Feed/Amigos/Ligas),
   ver templates/_bottom_nav.html -- mismo espiritu de "app" que la barra
   de tabs de Instagram/Strava (Ivan, 2026-09-12: "una botonera que te
   permita moverte en los diferentes apartados sin salir de la propia web
   que se ve mas moderna"). z-index (30) por debajo de .pwa-install-bar
   (40) para que, si las dos coinciden en pantalla, el aviso de instalar
   quede por encima sin tapar la navegacion -- ver "body.has-bottom-nav
   .pwa-install-bar" mas abajo, que ademas la desplaza hacia arriba para
   que ni se solapen ni una esconda a la otra. */
.bottom-nav {
    /* Ivan, 2026-09-23 (rediseño "Fairway"): de una barra que ocupa todo el
       ancho, pegada al borde, a una "pildora" flotante con margen a los
       lados y por debajo -- mismo espiritu de app moderna (Instagram,
       Strava...) pero con mas aire alrededor, a juego con el resto de
       tarjetas redondeadas del rediseño. El objetivo tactil de cada boton
       (ver .bottom-nav-item, min-height 48px) no cambia. */
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    background: rgba(26, 27, 30, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-pill);
    padding: 6px 10px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
}

.bottom-nav-item {
    /* Ivan, 2026-09-17: "la barra flotante de campo, config, jugadores es
       muy diferente a la barra flotante que tenemos en mi cuenta, copia el
       formato de la de mi cuenta" -- misma barra/clases (#formTabBar en
       round_live_new.html ya reutilizaba .bottom-nav/.bottom-nav-item),
       pero ahi cada pestaña es un <button> en vez de un <a> (no navega,
       solo cambia de seccion dentro del propio formulario) -- sin este
       reset, el estilo por defecto del navegador para <button> (fondo
       blanco, borde, fuente del sistema) se colaba encima de esta clase y
       rompia el aspecto de pastilla oscura que si se ve bien en
       _bottom_nav.html (que solo usa <a>, sin ese problema). */
    background: none;
    border: none;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Mismo motivo que el padding de .bottom-nav de arriba: 7px/5px de
       antes dejaba un objetivo tactil de ~50px de alto, por debajo de las
       ~48px que recomiendan tanto Apple (Human Interface Guidelines) como
       Android (Material Design) como minimo para no fallar el toque --
       10px/8px + min-height se aseguran de llegar a eso incluso si el
       texto de la etiqueta ocupase menos de lo esperado. */
    padding: 10px 4px 8px;
    min-height: 48px;
    color: var(--text-muted);
    border-radius: 12px;
}

.bottom-nav-item span {
    font-size: 11px;
    font-weight: 600;
}

/* Aviso numerico de "novedades" por apartado (Ivan, 2026-09-17: "no
   aparecen avisos si hay alguna novedad, añade un aviso numerico") --
   viaja sobre el propio icono (ver .bottom-nav-icon-wrap, contenedor
   relativo) en vez de sobre toda la pestaña, igual que las apps de
   siempre (WhatsApp, Instagram...). */
.bottom-nav-icon-wrap {
    position: relative;
    display: inline-flex;
}

.bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}

.bottom-nav-item.active {
    color: var(--lime);
    background: rgba(194, 210, 48, 0.12);
}

/* Boton central de "empezar ronda" en la botonera de siempre (Ivan,
   2026-09-13: "un jugador que este en mi cuenta tambien debe tener acceso
   para crear una ronda nueva, añade un boton en la barra flotante... boton
   central y resaltalo sobre el resto") -- ahora que "Apuntar ronda" ha
   desaparecido y la UNICA forma de empezar una ronda es en directo (ver
   /rondas/en-directo/nueva), este boton es el punto de entrada principal
   desde cualquier apartado (Cuenta/Feed/Amigos/Ligas), no solo desde
   /cuenta como antes. Mismo patron que el boton central "+" de
   Instagram/WhatsApp: circular, en lima (el color de accion de toda la
   web) y "flotando" por encima del propio borde de la barra (margin-top
   negativo) para que se note a simple vista que es la accion principal y
   no una pestaña mas. */
.bottom-nav-fab {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    margin: -22px 2px 0;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
    box-shadow: 0 4px 14px rgba(194, 210, 48, 0.5), 0 0 0 4px var(--surface);
    padding: 0;
    min-height: unset;
}

.bottom-nav-fab:active { transform: scale(0.94); }

.bottom-nav-fab.active { background: var(--lime); color: var(--lime-ink); }

/* Espacio reservado abajo del todo en las paginas que llevan la botonera
   fija (ver "{% block body_class %}has-bottom-nav{% endblock %}" en
   account.html/feed.html/friends.html/leagues.html) para que el ultimo
   contenido de la pagina (el pie de pagina de siempre, o el ultimo
   partido de una lista) no quede tapado detras de la barra. */
/* 88px -> 96px (Ivan, 2026-09-12, botones mas grandes en .bottom-nav):
   la barra crecio unos 8px de alto (mas padding vertical en
   .bottom-nav-item) para que el objetivo tactil llegue a las ~48px
   minimas -- este hueco reservado tiene que crecer lo mismo o el ultimo
   contenido de la pagina volveria a quedar tapado detras de la barra. */
/* +18px sobre las 96px de antes: la barra ahora flota con margen (14px)
   respecto al borde en vez de ir pegada, ver .bottom-nav -- el hueco
   reservado tiene que crecer lo mismo para que el ultimo contenido de la
   pagina no quede tapado detras suyo. */
body.has-bottom-nav { padding-bottom: 114px; }

body.has-bottom-nav .pwa-install-bar { bottom: 86px; }

.account-avatar-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.account-avatar-input {
    /* El input real queda oculto -- el <label for="fotoInput"> hace de
       boton visible y abre el selector de archivo el solo con un click;
       en cuanto se elige un archivo, onchange manda el formulario, asi
       que "Subir foto" es un unico paso, sin "Choose file / No file
       chosen" del input nativo ni un segundo click para confirmar.
       Reforzado con el patron "visualmente oculto" completo (clip +
       white-space + border:0 ademas de width/height/overflow/opacity) por
       si el recuadro nativo seguia asomando en algun navegador con solo
       las reglas de antes -- Ivan lo vio seguir apareciendo junto a
       "Subir foto" en /cuenta/perfil. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.account-avatar-upload-label {
    cursor: pointer;
}

/* Ivan, 2026-09-23: "al subir la foto de perfil de un usuario, añade una
   pequeña opcion para editar para ajustar la foto en la posicion y zoom
   que mejor le encaje a nuestro recorte" -- antes elegir un archivo
   mandaba el formulario AL MOMENTO (onchange="this.form.submit()") y el
   servidor recortaba siempre el centro exacto de la foto a un cuadrado
   (ver ImageOps.fit en upload_avatar, main.py) sin que el usuario pudiera
   elegir que parte de la foto se queda dentro del circulo del avatar. El
   input ya no manda el formulario solo: abre #avatarCropModal (mismo
   patron .modal-overlay/.modal-panel que el resto de la app) con la foto
   dentro de un circulo (mismo forma que el avatar final), arrastrable
   para colocarla y con un control de zoom -- al confirmar, se recorta de
   verdad en un <canvas> y ESE recorte cuadrado ya ajustado es lo que se
   sube (ver avatarCropConfirm en edit_profile.html); el servidor sigue
   haciendo su propio ImageOps.fit por seguridad/consistencia, pero como
   ya recibe un cuadrado no vuelve a recortar nada visible. */
.avatar-crop-panel {
    max-width: 360px;
    text-align: center;
}

.avatar-crop-stage {
    position: relative;
    width: 260px;
    height: 260px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 6px auto 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    touch-action: none;
    cursor: grab;
    /* aro para distinguir el circulo de recorte del fondo del panel */
    box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--text-muted);
}

.avatar-crop-stage.dragging { cursor: grabbing; }

.avatar-crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.avatar-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.avatar-crop-zoom-row svg { flex-shrink: 0; color: var(--text-muted); }

.avatar-crop-zoom-row input[type="range"] {
    flex: 1;
    accent-color: var(--lime);
}

.section-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    margin: 12px 0 8px;
}

.assign-row select, .assign-row input[list] {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.sr-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0;
}

.sr-table th, .sr-table td {
    padding: 10px 12px;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid var(--surface-2);
}

.sr-table th {
    color: var(--lime);
    background: var(--ink);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.sr-table td.label { text-align: left; color: var(--text-muted); }
.sr-table td.a { color: var(--team-a); font-weight: 600; }
.sr-table td.b { color: var(--team-b); font-weight: 600; }

/* Landing / pagina de entrada publica -------------------------------- */

.hero {
    text-align: center;
    padding: 40px 12px 8px;
}

.hero-icon { width: 96px; height: 96px; margin-bottom: 8px; border-radius: 20px; }

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 8px 0 12px;
    text-wrap: balance;
}

.hero-sub {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
    max-width: 46em;
    margin: 0 auto 22px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.btn-primary {
    /* Ivan, 2026-09-23 (rediseño "Fairway"): boton principal en pildora con
       un degradado lima suave (antes lima plano) y un resplandor sutil
       (box-shadow) a juego -- es la accion principal de la web (empezar
       ronda), tiene que notarse mas que el resto de botones. */
    background: linear-gradient(120deg, var(--lime-soft), var(--lime));
    color: var(--lime-ink);
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 8px 20px -8px rgba(194, 210, 48, .55);
}

.btn-primary:hover { opacity: 0.88; }

/* Segundo boton de descarga en la landing compartida, para Tennis Stats --
   mismo estilo que .btn-primary pero en azul (--team-b) para que se
   distinga a simple vista del boton de Padel Stats (lima). Se muestra solo
   si TENNIS_STORE_URL esta configurada, ver landing() en main.py. */
.btn-primary-alt {
    background: var(--team-b);
    color: #04122E;
    box-shadow: none;
}

.btn-primary-alt:hover { opacity: 0.88; }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--surface-2);
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.btn-secondary:hover { background: var(--surface-2); }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 16px 0 8px;
}

/* Ivan, 2026-09-26 ("me gusta mas la landing de padel... visualmente es
   mejor"): revisando el codigo para mejorar la landing de golf encontre
   que las 3 secciones que usan class="how-it-works" (landing.html,
   login.html, round_detail.html) llevaban DESDE SIEMPRE sin ninguna regla
   de CSS -- esta clase nunca se definio aqui (la version de
   padelscorestats.com usa "steps" para lo mismo, ver arriba). Resultado:
   esas tarjetas se apilaban en una columna sin ningun grid, aunque cada
   tarjeta individual (.step) si tenia su estilo. La arreglo dandole la
   misma rejilla de 3 columnas que ".steps" en vez de renombrar la clase
   en las plantillas (asi no hay que tocar 3 ficheros para un cambio de
   solo CSS). */
.how-it-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 16px 0 8px;
}

.step {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 18px 16px;
}

.step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.step-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 6px;
}

.step-body {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.mvp-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 16px 0;
}

.mvp-text {
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}

.mvp-weights {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mvp-weight-bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 5px;
    overflow: hidden;
}

.mvp-weight-fill { height: 100%; background: var(--lime); border-radius: 5px; }

.mvp-weight-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 5px;
}

.pin-box {
    display: flex;
    gap: 10px;
    margin: 8px 0 6px;
}

.pin-input {
    flex: 1;
    max-width: 260px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

.pin-input::placeholder { color: var(--text-muted); opacity: 0.5; }

.pin-hint {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 30px;
}

/* Paginas de error (PIN no encontrado, 404, 429) ----------------------- */

.error-hero {
    text-align: center;
    padding: 48px 12px 24px;
    max-width: 32em;
    margin: 0 auto;
}

.error-badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--lime);
    color: var(--lime);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 12px;
    text-wrap: balance;
}

.error-body {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 auto 28px;
}

.error-body strong { color: var(--text); font-weight: 700; }

.error-pin-box {
    justify-content: center;
}

/* El campo de email de /entrar reutiliza .pin-input (misma caja, mismo
   formulario) pero un PIN de partido y un email no se leen igual --
   quitamos el tracking ancho y el peso pensados para un codigo corto. */
.login-email-input {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
    max-width: 320px;
}

/* Checkbox de aceptacion del aviso de privacidad en /entrar (Fase 2.17,
   2026-09-12) -- .checkbox-row por defecto centra un checkbox + una
   palabra corta (el interruptor de /cuenta/perfil), pero aqui el texto
   es una frase con un enlace que puede partirse en dos lineas: se
   alinea a la izquierda y el checkbox se ancla arriba para que no quede
   descolgado si el texto envuelve. */
.login-privacy-ack {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    margin: 2px auto 16px;
    max-width: 320px;
}

.login-privacy-ack input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.error-home-link {
    display: inline-block;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .steps, .how-it-works { grid-template-columns: 1fr; }
    .hero-title { font-size: 24px; }
    .error-pin-box { flex-direction: column; }
    .error-pin-box .pin-input { max-width: none; }
}

.site-footer {
    margin: 48px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--surface-2);
    text-align: center;
}

.site-footer a {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.site-footer a:hover { color: var(--text); }

/* Ivan, 2026-09-17: "añade en un rincon de la web la version que tenemos"
   -- discreto a proposito: esquina inferior, texto pequeño y apagado
   (opacity baja), no interfiere con nada ni tapa botones porque el aviso
   de instalar PWA (mas abajo, tambien fijo) ya reserva su propia franja
   inferior y este badge va MAS arriba, pegado a la esquina. */
.app-version-badge {
    position: fixed;
    right: 6px;
    bottom: 4px;
    z-index: 5;
    font-size: 10px;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-muted);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* Banner "Instalar app" (PWA, ver base.html) -- barra fija abajo del todo,
   por encima de cualquier otro contenido, con el mismo lenguaje visual
   (superficie oscura, boton lima) que el resto de la app en vez del
   banner generico del navegador. padding-bottom con env(safe-area-inset-
   bottom) para que en iPhones con "isla dinamica"/barra inferior no quede
   pegado al borde fisico ni debajo del gesto de inicio del sistema. */
.pwa-install-bar[hidden] {
    /* Sin esto, el "display: flex" de abajo gana por prioridad de cascada
       a la regla implicita "[hidden]{display:none}" de la hoja de estilos
       del navegador (aunque la especificidad del selector empate, el CSS
       de la propia pagina tiene preferencia) -- asi que el atributo
       hidden dejaba de esconder nada de verdad y el aviso se veia
       siempre, con el boton de cerrar sin efecto visible. Ivan, 2026-09-11. */
    display: none;
}

.pwa-install-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface);
    border-top: 1px solid var(--surface-2);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
}

.pwa-install-text {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    flex: 1 1 220px;
}

.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.pwa-install-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.pwa-install-close:hover { color: var(--text); }

.lang-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.lang-switch a {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lang-switch a:hover { color: var(--text); }

.lang-switch a.lang-switch-active {
    color: var(--accent, var(--text));
    text-decoration: underline;
}

.lang-switch-sep {
    color: var(--text-muted);
    font-size: 12px;
}

.policy-text {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.policy-text b { color: var(--text); }

.policy-list {
    margin: 0 0 18px;
    padding-left: 20px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.policy-list li { margin-bottom: 6px; }

.policy-updated {
    color: var(--text-muted);
    font-size: 12px;
    margin: 30px 0 0;
}

/* Impresion / PDF: el sitio en pantalla es oscuro (fiel al logo), pero un
   partido impreso en negro solo gasta tinta y es mas dificil de leer en
   papel -- para @media print volvemos a redefinir los tokens con una
   paleta clara, así que todo lo de arriba (que solo usa var(--...)) sale
   bien en blanco y negro sin tener que duplicar reglas. */

/* --- Feed y publicaciones (Fase 2.7, red social, 2026-09-12) ----------- */

.feed-compose-form {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.feed-compose-form textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.feed-compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Boton "+" para adjuntar foto en vez del <input type=file> nativo (Ivan,
   2026-09-12: "no me gusta esta parte de la zona de publicar feed
   Añadir foto (opcional), crea un boton que haga esta funcion con un
   simbolo +") -- el input real sigue ahi (mismo name="foto", mismo
   accept), solo se hace invisible y se estira sobre el circulo para que
   todo el circulo sea clicable/tocable; el signo "+" vive en el <label>
   por fuera del input para que no desaparezca al superponer el input
   transparente encima. */
.feed-photo-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.feed-photo-add {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.feed-photo-add input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.feed-photo-name {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Previsualizacion de la foto elegida + aviso de tamaño, ANTES de subir
   nada al servidor (Ivan, 2026-09-12: "no hay previsualizacion de la
   foto subida antes de publicar" + la pantalla en blanco que no responde
   al publicar -- ver el comentario largo junto a este bloque en
   feed.html para el porque de las dos cosas). */
.feed-photo-preview-wrap[hidden] {
    /* Mismo hueco (y mismo arreglo) que .pwa-install-bar[hidden] mas
       arriba: el "display: inline-block" de abajo ganaba por cascada al
       "[hidden]{display:none}" del navegador, asi que el atributo hidden
       no escondia nada de verdad -- se veia el boton "x" de quitar foto
       ENCIMA del boton de subir, sin haber subido nada todavia. Ivan,
       2026-09-12: "veo que en el feed, justo encima del boton de subir
       foto antes de subir nada ya aparece un boton de X sin sentido". */
    display: none;
}

.feed-photo-preview-wrap {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.feed-photo-preview-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    border: 1px solid var(--surface-2);
}

.feed-photo-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.feed-photo-remove-btn:hover { background: var(--surface-2); color: var(--red); }

.feed-photo-error {
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

/* Tarjeta de publicacion (a diferencia de .scoreboard-card, que ya cubre
   las tarjetas de partido del feed -- ver feed.html): mismo fondo/borde
   redondeado que el resto de tarjetas de la web, pero en columna, porque
   una foto no cabe en una fila junto a un resultado. */
.feed-post-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.feed-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.feed-post-date {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.feed-post-text {
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 10px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.feed-post-photo {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Noticias de padel profesional como "stories" (Fase 2.8, 2026-09-12):
   Ivan penso en el scroll horizontal de Instagram Stories, con las
   noticias ya leidas movidas detras -- pero pidio tarjetas horizontales
   grandes (titular completo) en vez de circulos pequeños. El anillo/borde
   en --lime marca "no leida"; una vez abierta (visor propio, ver
   news_story_detail) pasa a .is-read: borde neutro y la imagen atenuada,
   mismo lenguaje visual que el "ya visto" de las stories reales. */
.feed-stories-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin-bottom: 8px;
    scroll-snap-type: x proximity;
}

.feed-stories-row::-webkit-scrollbar { height: 6px; }
.feed-stories-row::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }

.feed-story-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 220px;
    background: var(--surface);
    border: 2px solid var(--lime);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
}

.feed-story-card.is-read {
    border-color: var(--surface-2);
}

.feed-story-photo {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}

.feed-story-card.is-read .feed-story-photo {
    opacity: 0.55;
}

.feed-story-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-size: 34px;
    color: var(--text-muted);
}

.feed-story-body {
    padding: 8px 10px 10px;
}

.feed-story-badge {
    display: inline-block;
    background: var(--lime);
    color: var(--lime-ink);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.feed-story-card.is-read .feed-story-badge {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* Variantes de insignia para partidos/publicaciones mezclados en la misma
   tira que las noticias (Fase 2.15, 2026-09-12: "deben de estar juntos en
   el mismo scroll horizontal... y utilizar el mismo formato") -- la
   noticia sigue con el lima por defecto de .feed-story-badge de arriba
   (sin necesitar su propia clase "-news"); un partido gana/pierde en
   verde/rojo (mismo lenguaje de color que .sc-winner won/lost en el resto
   de la web) y una publicacion usa un tono neutro, para distinguir de un
   vistazo los tres tipos de tarjeta sin depender solo del texto. */
.feed-story-badge-won {
    background: var(--green);
    color: var(--text);
}

.feed-story-badge-lost {
    background: var(--red);
    color: var(--text);
}

.feed-story-badge-post {
    background: var(--surface-2);
    color: var(--text);
}

.feed-story-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-story-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.news-story-detail {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 16px;
}

.news-story-detail-photo {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
}

.news-story-detail-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.news-story-detail-title {
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 12px;
}

.news-story-detail-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.news-story-detail-source {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
}

@media print {
    :root {
        --ink: #0B1F3A;
        --bg: #FFFFFF;
        --surface: #FFFFFF;
        --surface-2: #E7EBF2;
        --lime: #8A9A1E;
        --lime-ink: #FFFFFF;
        --green: #1D9E5A;
        --red: #D63A3A;
        --text: #14213D;
        --text-muted: #6B7A94;
        --team-a: #B4690E;
        --team-b: #1B4B8F;
    }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body { padding: 0; }
    .wrap { max-width: 100%; padding: 0; }
    header.top { margin: 0 0 16px; border-bottom: none; }
    .no-print { display: none !important; }
    .scroll-box { max-height: none !important; overflow: visible !important; }
    .scoreboard-card, .stat-tile, .player-card, .h2h-row { break-inside: avoid; }
    @page { size: A4; margin: 14mm; }

    /* Estos bloques siguen con fondo oscuro (--ink) en el PDF a proposito
       (para que el titulo del partido destaque), asi que su texto no puede
       tomar --text (oscuro en print) o se vuelve ilegible -- se fuerza a
       blanco aqui en vez de en la version de pantalla. */
    header.top h1, header.top .sub,
    .detail-header .winner-line, .detail-header .meta,
    table.leaderboard th, .sr-table th {
        color: #FFFFFF !important;
    }
}

/* =========================================================================
   Anadidos propios de Golf Stats (formularios genericos, modo Caddy,
   tarjeta de ronda nueva y stat-grid de /players/{id} y /cuenta) -- el
   resto de este fichero es el style.css de padelscorestats.com copiado
   tal cual (mismos colores, misma tipografia); estas clases nuevas son
   las que hacian falta para las pantallas que no existen en pádel
   (registro manual de una ronda, sus 3 modos, y el rendimiento por palo). */

.auth-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 12px;
    padding: 24px 20px;
    max-width: 380px;
    margin: 20px auto;
}

.stacked-form, .auth-card form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stacked-form label, .auth-card form label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 12px;
}

.stacked-form input[type=text],
.stacked-form input[type=email],
.stacked-form input[type=number],
.stacked-form input[type=date],
.stacked-form select,
.stacked-form textarea,
.auth-card form input {
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    width: 100%;
}

.stacked-form textarea { resize: vertical; }

.hint {
    color: var(--text-muted);
    font-size: 12px;
    margin: 6px 0 0;
}

/* --- Apuntar ronda (modo normal/estadisticas/caddy) -------------------- */

.mode-choice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.mode-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
}

.mode-option:has(input:checked) { border-color: var(--lime); background: rgba(194, 210, 48, 0.08); }
.mode-option input { margin-top: 4px; accent-color: var(--lime); }
.mode-option strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--text); }
.mode-option span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.new-course-fields { margin: 4px 0 8px; }

/* Ivan, 2026-09-24: "cada vez que inicias ronda pregunta permiso para el
   gps... para no preguntar cada vez" -- boton de reintentar la deteccion
   de campo cercano A MANO (ver gpsRetryBtn en round_live_new.html), solo
   visible cuando hace falta (sin cache valida, o el usuario dijo que no
   antes). Un pelin de espacio para que no quede pegado a la lista de
   campos de encima. */
.gps-retry-btn { margin: 8px 0 0; }

/* Boton explicito de "Crear campo nuevo" + estado de la ubicacion (Ivan,
   2026-09-17) -- antes solo existia el hueco en blanco del desplegable. */
.new-course-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
}

/* Ivan, 2026-09-16: "al crear un campo pregunta si guardar las
   coordenadas GPS antes de guardarlas" -- caja de confirmacion que
   aparece al pulsar "Crear campo nuevo", antes de pedir la ubicacion
   al navegador. */
.gps-ask-box {
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin: -4px 0 14px;
}

.gps-ask-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Ivan, 2026-09-16: "al iniciar partida debe de aparecer solo la
   selección de campo, fecha, y las notas" -- aviso de "campo nuevo
   pendiente" que sustituye al formulario completo (ahora en
   #newCourseModal) dentro de la pestaña Campo. */
.new-course-summary {
    background: var(--surface-2);
    border: 1px solid rgba(194, 210, 48, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    margin: -4px 0 14px;
}

.pars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    margin-top: 8px;
}

/* Ivan, 2026-09-23: "el texto dentro de course rating y slope de la
   pantalla de editar campo, o crear campo, no se puede leer bien, y es
   dificil ver que casilla es cada una" -- Course Rating y Slope
   reutilizaban .pars-grid (pensado para cajitas de par-mini, columnas
   minimas de solo 52px) sin ninguna etiqueta visible, solo con
   placeholder: con dos campos con placeholders largos ("Course Rating
   (p.ej. 70.5)") en columnas tan estrechas, el texto quedaba cortado, y
   al escribir un valor el placeholder desaparece y no queda forma de
   saber que casilla es cada una. .rating-slope-grid reparte las dos
   columnas a partes iguales (sin el limite de 52px) y cada campo lleva su
   propia etiqueta SIEMPRE visible encima (mismo estilo de etiqueta que
   .stacked-form label), no solo placeholder. */
.rating-slope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.rating-slope-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.rating-slope-field input {
    width: 100%;
}

.par-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted);
    gap: 2px;
    /* Ivan, 2026-09-22: "la casilla de handicap de pitch n putt queda
       desplazada por el texto... asegurate que los dos cuadros esten
       alineados" -- con la etiqueta larga ("Pitch & Putt") partida en 2
       lineas y la corta ("Golf") en 1, el input de cada columna quedaba a
       distinta altura. nowrap evita que la etiqueta parta en varias
       lineas (ademas de acortarla a "P&P", ver edit_profile.html /
       player_detail.html) para que las dos cajas queden a la misma
       altura sea la que sea la etiqueta. */
    white-space: nowrap;
}

.par-mini input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    border-radius: 6px;
    padding: 4px;
    text-align: center;
    font-size: 12px;
}

/* Datos de cada hoyo al crear un campo nuevo desde "Ronda en directo"
   (Ivan, 2026-09-16: par + hándicap del hoyo + distancia, como una
   tarjeta de golf de verdad) -- una mini tarjeta por hoyo con sus 3
   campos apilados, en vez de un unico input de Par como antes
   (ver .par-mini, que se queda para el formulario clasico de /campos). */
.hole-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 6px;
    margin-top: 8px;
}

/* Ivan, 2026-09-23: etiqueta "Ida (hoyos 1–9)"/"Vuelta (hoyos 10–18)"
   encima de cada bloque de 9 hoyos en el panel de editar/crear campo (ver
   renderCourseParsBox) -- mismo estilo que la etiqueta equivalente de la
   ficha final de ronda (round_detail.html). */
.hole-block-label {
    margin: 10px 0 4px;
    font-weight: 600;
    color: var(--text);
}

.hole-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 6px 4px;
}

.hole-detail-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.hole-detail-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    border-radius: 6px;
    padding: 4px;
    text-align: center;
    font-size: 12px;
}

/* Ivan, 2026-09-21: "el boton de crear campo, debe de abrir una ventana"
   -- ventana modal generica (no solo para crear campo: cualquier
   formulario que necesite abrirse "encima" de la pagina puede reutilizar
   estas clases). Mismo lenguaje visual que el panel de anotacion
   (.score-entry-modal) pero centrada en vez de anclada abajo, porque este
   formulario es mas largo (tabla de hoyos) y conviene el scroll normal de
   una ventana centrada en vez de un sheet fijo. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-overlay[hidden] { display: none; }

.modal-panel {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    /* Ivan, 2026-09-19: "vigila en la creacion de campo porque se confunde
       el scroll del fondo, con la pantalla de crear campo, al hacer scroll
       puedes ver la pantalla del fondo moverse y no la de delante" -- sin
       esto, al llegar arriba/abajo del todo haciendo scroll DENTRO del
       panel, el gesto "encadenaba" hacia la pagina de fondo (scroll
       chaining) en vez de quedarse aqui. Ver tambien "body.modal-open" mas
       abajo, que congela del todo el scroll de la pagina mientras cualquier
       .modal-overlay este abierta -- las dos cosas juntas son las que
       hacian falta, esto solo no bastaba en algunos navegadores moviles. */
    overscroll-behavior: contain;
}

/* Ver comentario de "overscroll-behavior" en .modal-panel de arriba --
   base.html vigila con un MutationObserver si CUALQUIER .modal-overlay
   esta visible (sirve para las 4 ventanas modales que hay ahora mismo:
   #courseModal, #roundScanModal, #newCourseModal, #friendsModal, y
   cualquier otra que se añada despues, ya que estas clases estan pensadas
   para reutilizarse) y añade esta clase al <body> mientras tanto. */
body.modal-open {
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

/* Ivan, 2026-09-21: "añade un buscador de amigos, donde podemos ver la
   lista de amigos con su foto de perfil" -- lista de botones dentro del
   .modal-panel de #friendsModal (round_live_new.html), uno por amigo, con
   su avatar (o inicial) y nombre; un amigo ya añadido a la ronda se ve
   atenuado con la etiqueta "Añadido" en vez de desaparecer. */
.friends-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}

.friend-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 14px;
    text-align: left;
}

.friend-picker-row:disabled {
    opacity: 0.5;
}

.friend-picker-row .pname {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-card-head input[type=text] {
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

.player-card-head input[type=number] {
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
}

/* Cabeceras pequeñas dentro de "Partida" (Golpes, Putts, Chips...) --
   Ivan, 2026-09-14: la tarjeta de apuntar golpes pasa a ser SIEMPRE
   jugadores en fila / hoyos en columna (como una tarjeta de golf de
   verdad), y en modo estadisticas/caddy cada dato (golpes, putts, chips,
   penalizaciones, calle, green, palo...) es su propia tabla apilada --
   este es el titulo de cada una. */
h3.subsection {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 18px 0 8px;
}

/* Ivan, 2026-09-17: el border-radius/overflow:hidden que redondeaba las
   esquinas vivia en la propia <table> (ver mas abajo) -- position:sticky
   se calcula respecto al ANCESTRO MAS CERCANO con overflow distinto de
   "visible", asi que ese overflow:hidden en la tabla (aunque la tabla en
   si nunca hace scroll) se colaba por delante de este .scorecard-wrap
   (que es el que de verdad tiene el scroll horizontal) y dejaba la
   columna fija sin ningun sitio al que "pegarse" -- se veia scrollear
   igual que las demas. El redondeado de esquinas se mueve aqui (el
   contenedor que SI hace scroll) para que sticky funcione de verdad. */
.scorecard-wrap { position: relative; overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }

/* Ivan, 2026-09-17: "al ir anotando los diferentes hoyos en la cuadricula
   con scroll horizontal... fija la primera columna, para que no se mueva
   al hacer el scroll horizontal (bloquea tambien la primera columna de
   pantalla de puntuacion final)" -- antes esta columna (nombre del
   jugador, o "Par"/"Distancia"/"Hcp hoyo"/"Equipo") solo se distinguia por
   estilo, sin quedar realmente fija (ver comentario antiguo de mas abajo);
   ahora es sticky de verdad. round_live_play.html (anotacion en vivo) y
   round_detail.html (resultado final) comparten la MISMA tabla
   ".scorecard-table", asi que esta unica regla arregla las dos pantallas a
   la vez. Necesita fondo opaco propio (igual que el de la tabla) porque al
   hacer scroll el resto de columnas pasan por DEBAJO de esta, y sin fondo
   se verian a traves. */
table.scorecard-table th:first-child,
table.scorecard-table td.player-row-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
}

/* Ivan, 2026-09-26: el bloque "Vuelta" de la tarjeta final de resultado
   (scorecard-table-io-last, ver round_detail.html) ya no tiene columna de
   nombre -- su primera columna real es un hoyo (H10) -- asi que fijarla
   como si fuera el nombre (regla de arriba) no tiene sentido; se anula
   aqui para las dos anchuras de pantalla, no solo la vista movil sin
   scroll (ver el mismo ajuste dentro de @media max-width:480px). */
table.scorecard-table.scorecard-table-io-last th:first-child {
    position: static;
    left: auto;
    z-index: auto;
    background: transparent;
    box-shadow: none;
}

table.scorecard-table td.player-row-label {
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

table.scorecard-table tr.par-row td { color: var(--text-muted); font-size: 13px; }

/* Filas de info del hoyo (Distancia, Par, Hcp hoyo) encima de las de cada
   jugador, como en una tarjeta de golf de papel (Ivan, 2026-09-16) --
   mismo tono apagado que .par-row. Par y Hcp hoyo van en filas separadas
   (antes iban juntos en una sola fila "Par / Hcp" -- Ivan, 2026-09-16:
   "son campos diferentes, separalos"). */
table.scorecard-table tr.hole-info-row td { color: var(--text-muted); font-size: 13px; }

/* Ivan, 2026-09-23: "en el cuadro de resultado de las estadisticas,
   intenta utilizar el maximo de iconos posibles (izquierda flecha a la
   izquierda, arriba flecha arriba...)" -- Calle/Green en la ficha de ronda
   (resultado final) se pintan como flechas/check en vez de texto; un poco
   mas grandes y en negrita para que se lean bien de un vistazo, y con
   color segun acierto (verde, "hit") o fallo (apagado, con dirección). */
table.scorecard-table td.stat-icon-cell { text-align: center; }

/* Ivan, 2026-09-23 (rediseño "Fairway"): el icono de Calle/Green pasa de
   texto suelto a un "chip" redondeado (mismo lenguaje que el resto de
   tarjetas del rediseño) -- mas facil de escanear de un vistazo que un
   caracter suelto sobre el fondo de la celda. */
.dir-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
}

.dir-chip.dir-chip-hit { background: rgba(194, 210, 48, 0.16); color: var(--lime); }

.dir-chip.dir-chip-miss { color: var(--text-muted); }

/* Ivan, 2026-09-17: Palo (club) en la cuadricula de Caddie -- mismo <select>
   oculto + valor visible que Calle/Green/Grip (ver clubTextHtml en
   round_live_play.html), pero el nombre del palo es texto libre y largo
   ("Pitching Wedge"), no cabe en un chip de icono de 28px -- texto pequeño
   con elipsis en vez, la celda ya es tactil igual que el resto. */
.hole-club-text {
    display: inline-block;
    max-width: 100%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

table.scorecard-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    background: var(--bg);
}

/* Ivan, 2026-09-17: "aumenta el tamaño de las cuadriculas de resultado
   (mientras anotas y el de resultado final)" -- mismo aumento en las dos
   pantallas ya que comparten esta tabla (ver comentario de la columna fija
   de mas arriba).
   Ivan, 2026-09-23: "el tamaño de la cuadricula continua siendo pequeño,
   cuesta leer los numeros. incrementa el tamaño" -- segunda vuelta de
   aumento, mas generosa que la anterior. */
table.scorecard-table th, table.scorecard-table td {
    padding: 12px 15px;
    text-align: center;
    font-size: 17px;
    border-bottom: 1px solid var(--surface-2);
    white-space: nowrap;
}

table.scorecard-table th {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* Ivan, 2026-09-23 (seguimiento al partido Ida/Vuelta del 2026-09-22):
   "en la vista final, ajusta el tamaño texto y columnas para que siempre
   se vea todos los hoyos en la pantalla del movil. Actualmente se ve el
   nombre y 4 hoyos, en esas filas de 9" -- partir en bloques de 9 hoyos
   (ver hole_blocks en round_detail.html) no bastaba por si solo: esta
   MISMA tabla llevaba un min-width:480px FIJO (pensado para cuando los
   18 hoyos iban en una sola fila con scroll), asi que incluso un bloque
   de solo 9 hoyos se quedaba forzado a 480px de ancho igualmente -- de
   ahi que en un movil (~335px utiles dentro de .wrap) solo se vieran 4-5
   columnas por mucho que se acortara la letra, el min-width ganaba
   siempre. Esta clase "scorecard-table-final" (que round_detail.html
   añade SOLO a sus propias tablas -- round_live_play.html, la anotacion
   EN DIRECTO, no la lleva y sigue exactamente igual que siempre, con sus
   18 hoyos en una fila con scroll, que es justo lo que esa pantalla
   necesita) quita ese min-width en movil y pasa a table-layout:fixed --
   con eso el navegador reparte el 100% del ancho disponible ENTRE las
   columnas que haya (9 o 12, segun el bloque), asi que un bloque nunca
   puede desbordar el ancho de pantalla por definicion, sea cual sea el
   numero de columnas. El resto (letra/padding mas ajustados, nombre con
   puntos suspensivos, iconos de Calle/Green mas pequeños) es para que lo
   que quepa en cada columna se siga leyendo bien. */
@media (max-width: 480px) {
    table.scorecard-table.scorecard-table-final {
        min-width: 0;
        table-layout: fixed;
    }
    table.scorecard-table.scorecard-table-final th,
    table.scorecard-table.scorecard-table-final td {
        padding: 4px 2px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table.scorecard-table.scorecard-table-final th {
        font-size: 8px;
        letter-spacing: 0;
        padding: 3px 1px;
        white-space: normal;
        line-height: 1.05;
    }
    table.scorecard-table.scorecard-table-final td.player-row-label,
    table.scorecard-table.scorecard-table-final th:first-child {
        max-width: 42px;
        white-space: nowrap;
    }
    table.scorecard-table.scorecard-table-final td.hole-cell {
        padding-top: 11px;
    }
    table.scorecard-table.scorecard-table-final .dir-chip {
        width: 20px;
        height: 20px;
        font-size: 11px;
        border-radius: 7px;
    }
    table.scorecard-table.scorecard-table-final .hole-club-text {
        font-size: 8px;
    }

    /* Ivan, 2026-09-26 ("busca la simetria entre la primera parte del
       resultado y la segunda parte... deja espacio para ver el nombre, lo
       equivalente a tres columnas"): el bloque "Ida" (round_detail.html:
       scorecard-table-io-first) tiene 13 columnas efectivas -- nombre(3) +
       9 hoyos + OUT(1) -- asi que el nombre necesita mas ancho que el
       tope generico de 42px de la regla de arriba (pensado para cuando el
       nombre era 1 columna de 10/13). Con table-layout:fixed (arriba), el
       resto de columnas sin ancho explicito se reparten lo que sobre a
       partes iguales, asi que basta con fijar el ancho del nombre aqui --
       no hace falta tocar nada mas para que las 9 columnas de hoyo + OUT
       queden iguales entre si. 3/13 ~ 23%, redondeado a 24% para que se
       lea comodo. */
    table.scorecard-table.scorecard-table-final.scorecard-table-io-first td.player-row-label,
    table.scorecard-table.scorecard-table-final.scorecard-table-io-first th:first-child {
        max-width: none;
        width: 24%;
    }
    /* La anulacion del "sticky" para el bloque "Vuelta" sin nombre
       (scorecard-table-io-last) ya esta mas arriba, fuera de este media
       query -- aplica igual en movil que en escritorio. */
}

/* Ivan, 2026-09-17: "busca en internet como se identifican en la tarjeta
   de resultados los birdies (creo que era un circulo), bogeys (un
   cuadrado), para añadir a nuestras tarjetas" -- convencion estandar de
   tarjeta de golf: eagle o mejor = DOBLE circulo, birdie = circulo, par =
   sin marca, bogey = cuadrado, doble bogey o peor = DOBLE cuadrado (ver
   score_mark_class en round_detail.html y relativeMarkClass en
   round_live_play.html, misma frontera que relative_counts en
   database.py). El "doble" se dibuja con un truco de box-shadow inset (un
   anillo del color, luego un hueco del color de fondo, luego otro anillo)
   para no necesitar mas marcado ni cambiar el tamaño de la celda -- el
   hueco (--mark-gap) tiene que ser del mismo color que el fondo real de
   cada sitio donde se usa (el fondo de scorecard-table es --bg, pero el
   input editable de la cuadricula en directo tiene su propio fondo
   --surface, de ahi el override de mas abajo). Sustituye a las antiguas
   rel-under/rel-over (que ademas apuntaban a un td.rel-under que nunca
   llegaba a existir en el HTML real -- la clase se ponia en el span de
   dentro, no en el td). */
.score-mark {
    --mark-gap: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    height: 1.7em;
    line-height: 1;
}
.score-mark.score-birdie, .score-mark.score-eagle { border-radius: 50%; }
.score-mark.score-bogey, .score-mark.score-double { border-radius: 4px; }
.score-mark.score-birdie { box-shadow: inset 0 0 0 1.5px var(--lime); font-weight: 700; color: var(--lime); }
.score-mark.score-eagle { box-shadow: inset 0 0 0 1.5px var(--lime), inset 0 0 0 4.5px var(--mark-gap), inset 0 0 0 6px var(--lime); font-weight: 700; color: var(--lime); }
.score-mark.score-bogey { box-shadow: inset 0 0 0 1.5px var(--red); color: var(--red); }
.score-mark.score-double { box-shadow: inset 0 0 0 1.5px var(--red), inset 0 0 0 4.5px var(--mark-gap), inset 0 0 0 6px var(--red); color: var(--red); }
input.hole-input.score-mark, select.hole-input.score-mark { --mark-gap: var(--surface); }
/* Ivan, 2026-09-19: "en las tablas eclecticas, utiliza la simbologia de
   birdies y bogies" -- misma marca reutilizada dentro de table.leaderboard
   (tabla eclectica en round_detail.html y course_history.html), cuyo
   fondo real es --surface (ver table.leaderboard mas arriba), no --bg
   como en el resto de la pagina -- sin este override el "hueco" del doble
   circulo/cuadrado (score-eagle/score-double) se veria del color
   equivocado, como ya pasaba con el input editable de la cuadricula. */
table.leaderboard .score-mark { --mark-gap: var(--surface); }

/* Ivan, 2026-09-19: "hay que crear un panel de control de golf... deberiamos
   añadir espacio para una foto del campo, la podemos añadir en aquellas
   pantallas donde se utiliza el campo como filtro" -- miniatura cuadrada
   redondeada (a diferencia de .avatar-thumb, que es circular -- una foto
   de campo no es un retrato) reutilizada en 4 sitios: el panel /campos, la
   lista "Campos jugados" de /cuenta, la cabecera de /cuenta/campos/{id}
   (esta con .course-photo-banner, mas grande) y el selector visual de
   campo al empezar una ronda (.course-picker-*, mas abajo).

   Ivan, 2026-09-23 (conversacion sobre logos/marca de los campos, 3
   mensajes seguidos): ya no es una foto subida a mano del campo real --
   es una de 8 fotos GENERICAS de golf (ver COURSE_STOCK_PHOTOS en
   main.py), asi que .course-thumb-placeholder (el icono ⛳ de "sin foto
   todavia") ha desaparecido -- todos los campos tienen foto desde que se
   crean, ya no hace falta esa rama en ningun sitio.

   "las podemos difuminar un poco, para que no se pueda relacionar con
   ningun campo" -- filter: blur() en las dos clases de foto (esta y
   .course-photo-banner mas abajo): son fotos GENERICAS, no del campo
   real, y el desenfoque ayuda a que se lean como eso a simple vista (un
   fondo decorativo) en vez de parecer "la foto de verdad de este campo". */
.course-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
    filter: blur(3px);
}

.course-photo-banner {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    background: var(--surface-2);
    filter: blur(3px);
}

/* Selector visual de campo en "Empezar ronda" (round_live_new.html): el
   <select id="courseSelect"> de siempre se queda en el DOM (sigue siendo
   el que de verdad manda course_id al enviar el formulario, y sigue
   recibiendo el valor programatico de la sugerencia por GPS -- ver
   suggestNearestCourse), pero se oculta visualmente detras de esta lista
   de tarjetas con miniatura, que es la que el usuario ve y toca de
   verdad. */
.course-select-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.course-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 8px;
    max-height: 280px;
    overflow-y: auto;
}

.course-picker-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.course-picker-card.selected { border-color: var(--lime); background: rgba(194, 210, 48, 0.08); }
.course-picker-card .course-thumb { width: 38px; height: 38px; font-size: 15px; }
.course-picker-name { font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--text); font-weight: 600; }
.course-picker-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* Ivan, 2026-09-26: "al crear partida no tenemos forma de buscar los
   campos, añade un buscador por nombre, un apartado de campos favoritos...
   y un apartado de jugados recientemente" -- buscador de texto (mismo
   look que el resto de inputs del formulario) y una pequeña etiqueta de
   apartado (Favoritos / Jugados recientemente / Todos los campos) encima
   de cada grupo de tarjetas dentro de #coursePickerList (ver
   renderCoursePickerList en round_live_new.html). */
.course-search-input {
    width: 100%;
    margin: 8px 0 4px;
}

.course-picker-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 10px 0 2px;
}

.course-picker-section-label:first-child { margin-top: 2px; }

/* Ivan, 2026-09-23: "en el modo de anotar resultado durante la partida,
   veo que las columnas van cambiando de tamaño en funcion del modo de
   entrada: en entrada normal es muy ancho, en estadisticas y caddie se
   ve un tamaño correcto... utiliza el tamaño de la columna del modo de
   estadisticas" -- .hole-input llevaba 76px de ancho, y solo los campos
   de estadisticas/caddie (full_shots, putts, chips, bunkers,
   penalizaciones, swing%...) usaban la clase extra ".mini" (62px) por
   encima. El campo de golpes en modo normal (buildStrokesTable/
   buildMixedTotalsTable en round_live_play.html) no llevaba ".mini",
   de ahi la diferencia de ancho segun el modo. Se unifica el ancho BASE
   de .hole-input a los 62px de estadisticas (el tamaño que Ivan confirma
   que es el correcto) -- asi todas las columnas miden igual sea cual sea
   el modo de entrada del jugador, sin tener que tocar el marcado de cada
   sitio (".mini" ya no aporta nada distinto, se queda como alias
   inofensivo por si algun HTML antiguo en cache todavia la lleva). */
.hole-input, table.scorecard-table select {
    width: 62px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 6px;
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
}

.hole-input.mini { width: 62px; }
table.scorecard-table select { width: 96px; }

.hole-total {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--lime);
}

/* Puntitos de hándicap sobre la casilla de un jugador+hoyo (Ivan,
   2026-09-17: "si es hoyo para el jugador 1 se le aplica un punto de
   handicap debe de aparecer un puntito en la parte de arriba de la
   casilla") -- reparto EGA/R&A/USGA estandar, ver holeHandicapStrokes en
   round_live_new.html. Padding extra arriba en la celda para que los
   puntitos no se superpongan con el input/numero. */
td.hole-cell { position: relative; padding-top: 15px; }

.hcp-dots {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.hcp-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lime);
    flex-shrink: 0;
}

/* Ivan, 2026-09-18: las casillas de la cuadricula ya no se editan
   escribiendo directamente (ver "readonly" en round_live_new.html) --
   se editan siempre desde el panel #scoreEntryModal. pointer-events:none
   en el <select> deja pasar el toque a la <td> de debajo (hole-cell, que
   es quien de verdad abre el panel) sin que el navegador intente abrir
   el desplegable nativo primero -- es lo que de verdad bloquea el
   comportamiento nativo, no basta con tabindex="-1". El cursor de mano
   en toda la celda es solo la pista visual de que es "tocable". */
table.scorecard-table select.hole-input { pointer-events: none; }
td.hole-cell, td[data-role="total"] { cursor: pointer; }
.hole-input[readonly] { cursor: pointer; }

/* Ivan, 2026-09-20: en una ronda con jugadores de distinto modo (cada uno
   segun su perfil), las tablas de estadisticas/caddie siguen teniendo una
   fila por jugador, pero un jugador en modo mas bajo no tiene nada que
   anotar ahi -- casilla inerte (sin input/select, no abre el panel), en
   vez de fingir que se puede tocar. */
td.hole-cell-locked {
    text-align: center;
    color: var(--text-muted);
    opacity: 0.45;
}

/* Ivan, 2026-09-16: "junto al nombre de cada jugador debemos ver el
   resultado neto, de los hoyos jugados" -- pastilla pequeña junto al
   nombre en la cuadricula de partida, con el neto de lo anotado HASTA
   AHORA (ver playerNetSoFar en round_live_play.html). Mismo criterio de
   color que rel-under/rel-over: lima si va por debajo de su hándicap,
   rojo si va por encima. */
.player-net-badge {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.player-net-badge.net-under { color: var(--lime); }
.player-net-badge.net-over { color: var(--red); }

/* Ivan, 2026-09-17: "añade este valor tambien en la tarjeta del jugador de
   forma resaltada (este es el resultado importante)... añade tambien este
   mismo valor en la lista de rondas recientes de forma resaltada" --
   mismo signo/color que .player-net-badge (net_to_par_html en main.py,
   compartido en los 3 sitios), pero mas grande y sin la pastilla de fondo:
   aqui el numero YA es el titular de la tarjeta/fila, no un dato
   secundario junto a otra cosa. */
.net-to-par {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
}
.net-to-par.net-under { color: var(--lime); }
.net-to-par.net-over { color: var(--red); }

/* Ivan, 2026-09-19: la clase .missing-data-notice (Ivan, 2026-09-16: aviso
   fijo de "faltan datos por anotar") se ha quitado de aqui -- Ivan pidio
   eliminar ese aviso permanente y que solo avise al intentar terminar la
   ronda (ver confirmFinishRound en round_live_play.html), asi que ya no
   hace falta ningun estilo para el. */

/* Ivan, 2026-09-22: "en la seccion de partida, al anotar el hoyo debemos
   indicar que hoyo se esta jugando, resaltalo de alguna forma" -- toda la
   columna del hoyo "actual" (por defecto el 1, o el siguiente al ultimo
   anotado, ver computeCurrentHole en round_live_play.html) se marca con
   un fondo y un borde lima para que se distinga de un vistazo al hacer
   scroll horizontal por la cuadricula. */
table.scorecard-table th.current-hole-col,
table.scorecard-table td.current-hole-col {
    background: rgba(194, 210, 48, 0.16);
    border-left: 1px solid var(--lime);
    border-right: 1px solid var(--lime);
}

table.scorecard-table th.current-hole-col {
    color: var(--lime);
}

/* --- Panel de entrada por casilla (jugador+hoyo) -----------------------
   Ivan, 2026-09-18: "se abre una pantalla con el teclado numerico
   personalizado" -- hoja inferior a pantalla completa en movil, con un
   teclado propio (numeros) o una rejilla de opciones (calle/green/palo)
   segun el tipo de campo activo, y 1-3 "pantallas" (basica/estadisticas/
   caddie) con su boton Siguiente -- ver scoreEntrySteps en
   round_live_new.html. */
.score-entry-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.score-entry-modal[hidden] { display: none; }

.score-entry-panel {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
}

.score-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.score-entry-player { font-weight: 700; font-size: 1.05rem; }
.score-entry-hole { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }

.score-entry-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.7rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.score-entry-step-title {
    margin-top: 12px;
    font-weight: 700;
    color: var(--lime);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Ivan, 2026-09-23: "añade el total de golpes entrados en la cabecera de
   la lista, para ver cuando suma los datos entrados" -- fila junto al
   titulo del paso "Datos básicos" con el total en vivo (ver
   updateScoreEntryStepTotal en round_live_play.html). */
.score-entry-step-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.score-entry-step-total {
    margin-top: 12px;
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
    white-space: nowrap;
}

.score-entry-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.score-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.score-field-row.active { border-color: var(--lime); background: rgba(194, 210, 48, 0.1); }
.score-field-label { font-weight: 500; }
.score-field-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; min-width: 2em; text-align: right; }

.score-entry-control { margin-top: 14px; min-height: 60px; }

.score-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.score-key {
    padding: 10px 0 6px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
}

.score-key:active { background: var(--lime); color: var(--lime-ink); }
.score-key-back { color: var(--red); }

/* Ivan, 2026-09-22: "en el teclado de anotacion utiliza el par del hoyo,
   para indicar en pequeño debajo de cada valor y con un color diferente
   (hole in one, albatros, birdie, par, bogey, doble bogey...)" -- solo en
   el teclado numerico del campo "Golpes" (ver strokeRelInfo en
   round_live_play.html): cada tecla 1-9 muestra debajo lo que ESE
   resultado significaria para el par del hoyo actual, con un color propio
   para reconocerlo de un vistazo sin tener que leer el texto.
   score-key:active pone el fondo en lima -- el texto del sub-color pasa a
   la tinta oscura del propio boton para que siga siendo legible. */
.score-key-sub {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.score-key:active .score-key-sub { color: var(--lime-ink) !important; }

.score-key-sub-ace { color: #FFD54A; }
.score-key-sub-albatross { color: #B98CFF; }
.score-key-sub-eagle { color: #5B8CFF; }
.score-key-sub-birdie { color: var(--lime); }
.score-key-sub-par { color: var(--text-muted); }
.score-key-sub-bogey { color: #E08A2C; }
.score-key-sub-double { color: var(--red); }
.score-key-sub-triple { color: #B23A3A; }
.score-key-sub-worse { color: #7A2020; }

.score-options { display: flex; flex-wrap: wrap; gap: 8px; }

.score-option {
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid var(--surface-2);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.92rem;
    cursor: pointer;
}

.score-option:active { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.score-option-clear { opacity: 0.7; }

/* Ivan, 2026-09-18: "en lugar de campos donde añadir la info, facilitar la
   entrada con diagramas para elegir donde cae en el green, los grips" --
   dibujo tocable en vez de una fila de botones de texto para Calle, Green,
   Grip (fuerza) y Grip (longitud) -- ver FAIRWAY_DIAGRAM_SVG,
   GREEN_DIAGRAM_SVG y GRIP_*_DIAGRAM_SVG en round_live_play.html. Las zonas tocables
   (.score-diagram-zone) van dibujadas con fill="transparent" -- no
   "none", que dejaria de admitir toques -- y se rellenan de verde vivo
   solo cuando se marcan como elegidas (.score-picked), sin que eso mueva
   ni tape el dibujo de fondo (bandera, mango del grip...).*/
.score-diagram-wrap { display: flex; justify-content: center; margin-bottom: 6px; }
.score-diagram { max-width: 100%; height: auto; touch-action: manipulation; }
.score-diagram-zone { cursor: pointer; transition: fill 0.15s ease; }
.score-diagram-zone:active { fill: rgba(194, 210, 48, 0.18); }
.score-diagram-label {
    font-family: inherit;
    font-size: 11px;
    fill: var(--text-muted);
    pointer-events: none;
    user-select: none;
}

.score-picked.score-diagram-zone { fill: rgba(194, 210, 48, 0.32); }
.score-picked.score-option { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }

/* Ivan, 2026-09-17: "en la entrada de datos en modo caddie, tenemos el %
   de swing, añade una barra de % que corra de 5% en 5%" -- de teclado
   numerico a una barra deslizante (kind: 'percent', ver
   renderScoreEntryControl en round_live_play.html), con el % grande
   encima (mismo tamaño que .score-field-value) y las marcas de min/medio/
   max debajo, igual de legible en movil que el teclado que sustituye. */
.score-percent-wrap { text-align: center; }
.score-percent-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 10px;
}
/* Ivan, 2026-09-24: "la barra de metros del primer putt cuesta de mover,
   al intentar cogerla se mueve es scroll del fondo de la pantalla pero la
   barra no se mueve" -- sin touch-action, el navegador movil interpreta
   el primer roce sobre el <input type="range"> como el inicio de un
   scroll de la pagina en cuanto el dedo se desvia un poco en vertical (la
   barra es ancha pero no muy alta), y se lleva el gesto entero para si en
   vez de dejarselo al slider. Mismo arreglo que .avatar-crop-stage
   (tambien arrastrable a mano) -- touch-action: none le dice al navegador
   que este elemento gestiona el toque el mismo, así el scroll de fondo ya
   no compite por el gesto. */
.score-percent-input, .score-meters-input {
    width: 100%;
    height: 30px;
    margin: 0;
    accent-color: var(--lime);
    cursor: pointer;
    position: relative;
    z-index: 1;
    touch-action: none;
}
.score-percent-track { position: relative; margin-bottom: 4px; }
/* Ivan, 2026-09-19: "en la barra de % de swing añade marcas en 25% 50% y
   75% para facilitar entrar el valor correcto" -- .score-percent-track
   envuelve el <input type="range"> para poder superponerle unas marcas
   verticales (.score-percent-marks/.score-percent-mark) exactamente
   encima de la barra, en vez de solo debajo (las etiquetas de texto de
   .score-percent-ticks, que ya existian). pointer-events: none en las
   marcas para que nunca capturen el arrastre -- el input sigue
   respondiendo aunque el dedo pase justo por encima de una marca. */
.score-percent-marks {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    height: 8px;
    transform: translateY(-50%);
    pointer-events: none;
}
.score-percent-mark {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    background: var(--ink);
    opacity: 0.55;
    border-radius: 1px;
}
.score-percent-ticks {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 14px;
}

.score-entry-footer { margin-top: 18px; }
.score-entry-next { width: 100%; }

/* --- Estadisticas de jugador (/players/{id}, /cuenta) ------------------ */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--lime);
}

/* Ivan, 2026-09-23 (rediseño "Fairway"): anillo de progreso para
   porcentajes reales (calles/GIR, ver player_stats en database.py) -- mas
   facil de leer de un vistazo que una cifra suelta entre las demas del
   stat-grid, y reutilizable para cualquier otro % que se quiera pintar
   asi en el futuro. */
.ring-row {
    display: flex;
    gap: 12px;
    margin: 0 0 20px;
}

.ring-card {
    flex: 1;
    background: linear-gradient(155deg, var(--surface-2), var(--surface));
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring-value { fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.ring-value.ring-value-alt { stroke: var(--team-b); }
/* Ivan, 2026-09-17: anillo de putts por hoyo -- a diferencia de
   calles/GIR (mas relleno = mejor), aqui "mejor" depende de si se supera o
   no el objetivo (2 putts/hoyo), asi que el color cambia segun el valor en
   vez de ser siempre el mismo. */
.ring-value.ring-value-good { stroke: var(--green); }
.ring-value.ring-value-bad { stroke: var(--red); }
.ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.ring-caption { color: var(--text-muted); font-size: 11.5px; font-weight: 600; }

.stat-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.ai-tip {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
}

.ai-tip strong { color: var(--lime); }

/* Ivan, 2026-09-25 ("dame ideas para incentivar utilizar la app"): avisos
   "en caliente" en el resumen de una ronda (ranking del campo, récords
   personales) -- mismo lenguaje visual que .ai-tip/.goal-card (tarjeta con
   acento lima), ver round_detail.html. */
.achievement-box {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 10px 0 16px;
}

.achievement-line {
    font-size: 14px;
    line-height: 1.5;
    margin: 2px 0;
}

.achievement-line-top {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--lime);
}

/* Racha de semanas jugando seguidas (Mi cuenta, idea de incentivos nº3) --
   mismo tono que .achievement-line-top. */
.streak-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--lime);
    margin: 2px 0 0;
}

/* Ivan, 2026-09-25 ("los 3 primeros tendran una medalla... esta medalla
   sera visible en todos los sitios donde aparezca el nombre"): un emoji
   pequeño, pegado al nombre (ver player_medal_html en main.py) -- sin
   fondo ni color propio, el propio emoji (🥇🥈🥉) ya distingue el
   liderato de oro/plata/bronce. */
.player-medal {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.9em;
}

/* Ivan, revision 2026-09-23, pendiente nº6 ("Objetivo personal ... visible
   en Mi cuenta con progreso"): mismo lenguaje visual que .ai-tip (tarjeta
   con acento lima), con una barra de progreso propia -- progress_pct ya
   viene calculado desde database.user_goal_progress (0-100), asi que aqui
   solo se pinta el ancho. */
.goal-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--lime);
    border-radius: var(--radius-card);
    padding: 14px 18px;
    margin-bottom: 16px;
}

.goal-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.goal-progress-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.goal-achieved {
    color: var(--lime);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.goal-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    background: var(--lime);
    border-radius: 999px;
}

.goal-progress-fill-done { background: #35C77E; }

.goal-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.goal-form select, .goal-form input {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.goal-form input[type="number"] { width: 100px; }

/* --- Cuenta: cabecera fija con saludo + consejo IA ---------------------- */

.account-sticky-head {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--surface-2);
    z-index: 10;
    margin-bottom: 16px;
}

/* Ivan, 2026-09-17: "falta el saludo al usuario" -- el comentario de
   arriba ya hablaba de "cabecera con saludo" pero nunca llego a pintarse
   ningun texto de saludo, solo el avatar+nombre en la esquina. */
.account-greeting {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--text);
    margin: 4px 0 0;
}

/* Boton de solo icono (lapiz de "Editar perfil", flecha de "Comparar"...)
   -- Ivan, 2026-09-17: "el boton de editar perfil debe de ser un boton
   con el dibujo de un lapiz, igual que el que utilizamos en la web de
   padel". */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    flex-shrink: 0;
}

.icon-btn:hover { background: var(--surface-2); color: var(--lime); }


/* =====================================================================
   Revision completa 2026-09-23 -- estadisticas avanzadas (ver
   advanced_stats_block en _stats_block.html), perfil de amigo
   (friend_profile.html) e invitaciones (friends.html).
   ===================================================================== */
h3.subsection {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin: 26px 0 10px;
}

.dist-bar {
    display: flex;
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--surface-2);
    gap: 2px;
}
.dist-seg { min-width: 4px; }
.dist-eagle { background: #F2C94C; }
.dist-birdie { background: var(--lime); }
.dist-par { background: var(--green); }
.dist-bogey { background: #6B7280; }
.dist-double { background: var(--red); }
.dist-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.dist-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.dist-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

.adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.adv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adv-tile {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 14px 14px 12px;
}
.adv-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.1;
}
.adv-label { font-size: 12px; color: var(--text); margin-top: 6px; font-weight: 600; }
.adv-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.adv-bad .adv-value { color: var(--red); }

/* Ivan, revision 2026-09-23, pendiente nº6 ("Strokes gained simplificado"):
   mismo lenguaje que .adv-tile, pero coloreando el valor segun signo
   (verde/rojo) en vez del gris neutro de siempre -- aqui "mejor o peor de
   lo esperado" es justo el punto de la tarjeta. */
.sg-lite-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.sg-lite-tile {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 14px 14px 12px;
}
.sg-lite-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.sg-lite-good .sg-lite-value { color: #35C77E; }
.sg-lite-bad .sg-lite-value { color: var(--red); }
.sg-lite-label { font-size: 12px; color: var(--text); margin-top: 6px; font-weight: 600; }
.sg-lite-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Ivan, 2026-09-25: "añade un boton de info o ?... obtener una pequeña
   explicacion de que es cada valor, y cual es el valor esperado para
   alguien de su handicap estimado" -- boton "?" pequeño e inline junto a
   la etiqueta de cada estadistica dificil de interpretar (ver
   stat-info-btn en _stats_block.html); al tocarlo abre #statInfoModal
   (definido una sola vez en base.html, compartido por toda la app). */
.stat-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}
.stat-info-btn:hover, .stat-info-btn:focus-visible { border-color: var(--text); color: var(--text); }
#statInfoModalDesc { margin: 4px 0 0; }
#statInfoModalCompare { margin-top: 10px; }

/* "podemos estimar... el valor esperado segun nivel de handicap, y
   indicar en rojo o en verde, si el valor del usuario es mejor o peor de
   lo esperado" -- se aplica sobre el numero ya pintado (ring-label,
   adv-value...), sin tocar el color de relleno de los anillos de
   progreso (Calles/GIR siguen con su color de marca; Putts/hoyo sigue
   con su propio umbral fijo de 2.0, pedido aparte el 2026-09-17). Un
   resultado "neutral" (dentro del margen normal para su hándicap) se deja
   sin colorear -- no toda diferencia pequeña significa algo. */
.stat-eval-better { color: var(--green) !important; }
.stat-eval-worse { color: var(--red) !important; }

.miss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.miss-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 14px;
}
.miss-title { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.miss-lr { display: flex; justify-content: space-between; align-items: center; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 14px; }
.miss-center { color: var(--green); font-weight: 600; font-size: 12px; }
.miss-strong { color: var(--red); font-weight: 700; }
.miss-compass {
    display: grid;
    grid-template-areas: ". n ." "w . e" ". s .";
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.miss-compass .mc-n { grid-area: n; }
.miss-compass .mc-w { grid-area: w; text-align: left; }
.miss-compass .mc-e { grid-area: e; text-align: right; }
.miss-compass .mc-s { grid-area: s; }

/* Ivan, 2026-09-23: "un diagrama de green para que se mas visual" -- mismo
   dibujo de 8 zonas que la pantalla de anotar (round_live_play.html),
   aqui de solo lectura: cada zona se rellena de rojo con mas o menos
   opacidad segun el % de fallos que ha ido hacia ahi (fill-opacity
   calculado en el propio SVG, ver _stats_block.html), asi que no hace
   falta ningun estilo de color aqui, solo el texto encima. */
.green-diagram-wrap { display: flex; justify-content: center; }
.green-diagram { max-width: 100%; height: auto; }
.green-diagram-label {
    fill: #fff;
    font-size: 13px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.green-diagram-hit-label { fill: #eafbe0; font-size: 15px; font-weight: 700; }
.green-diagram-hit-sub { fill: #eafbe0; font-size: 9px; opacity: 0.85; }

.record-list { display: flex; flex-direction: column; gap: 8px; }
.record-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.record-icon { grid-row: span 2; font-size: 20px; }
.record-text { font-size: 14px; }
.record-text b { color: var(--lime); font-family: 'Space Grotesk', sans-serif; }
.record-meta { font-size: 11px; color: var(--text-muted); }

.profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--fairway-deep), var(--surface) 70%);
    border: 1px solid var(--surface-2);
}
.profile-hero-avatar { width: 56px !important; height: 56px !important; flex-shrink: 0; }
.profile-hero-text { flex: 1; min-width: 0; }
.profile-hero-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-hero-sub b { color: var(--lime); }
.profile-hero-cta { flex-shrink: 0; }

.invite-card {
    background: var(--surface);
    border: 1px solid var(--lime);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.invite-title { font-weight: 700; margin-bottom: 4px; }
.friend-link { color: inherit; }
.friend-link:hover .pname { color: var(--lime); }

@media (max-width: 480px) {
    .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adv-grid-3 .adv-value { font-size: 18px; }
    .profile-hero { flex-wrap: wrap; }
}


/* =====================================================================
   Diseño 2026-09-23 v2 -- Ivan: "busca mejora en el diseño de la app,
   para poder ofrecer una vista sofisticada y moderna de la app".

   Capa final sobre el rediseño "Fairway" de esta mañana (va al final a
   proposito: por cascada gana a las reglas de arriba sin tener que tocar
   cada una). Mismo negro + lima del logo, pero:
     - superficies con mas profundidad (bordes translucidos + sombra
       suave) en vez de bordes grises planos;
     - el lima se reserva para lo importante (accion principal, cifra
       clave, "quien va mejor") -- los numeros normales pasan a blanco;
     - titulos de seccion en minuscula y sin subrayado (mas editorial);
     - cabecera tipo "cristal" y un halo verde "fairway" muy tenue arriba;
     - campos de formulario, botones secundarios y pestañas unificados;
     - numeros tabulares en todas las estadisticas (no "bailan").
   ===================================================================== */
:root {
    --bg: #0B0C0E;
    --surface: #141619;
    --surface-2: #1E2125;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.12);
    --text-muted: #8E959D;
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 34px -22px rgba(0, 0, 0, 0.85);
    --radius-card: 18px;
}

html { -webkit-text-size-adjust: 100%; }
body {
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(31, 122, 77, 0.22), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(194, 210, 48, 0.35); }

/* --- Cabecera ------------------------------------------------------------ */
header.top {
    background: linear-gradient(180deg, rgba(11, 12, 14, 0.92), rgba(11, 12, 14, 0.72));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}
header.top h1 { font-size: 21px; letter-spacing: -0.02em; }
.account-sticky-head {
    background: rgba(11, 12, 14, 0.82);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--border);
}
.account-greeting { font-size: 22px; letter-spacing: -0.02em; margin-top: 8px; }

/* --- Titulos de seccion ---------------------------------------------------- */
h2.section {
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.015em;
    border-bottom: none;
    padding-bottom: 0;
    margin: 34px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
h2.section::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--lime-soft), var(--lime));
    flex-shrink: 0;
}
h3.subsection { letter-spacing: .09em; font-size: 11.5px; margin: 28px 0 10px; }

/* --- Tarjetas: una sola familia visual ------------------------------------- */
.stat-tile, .ring-card, .adv-tile, .miss-card, .record-row, .h2h-card,
.scoreboard-card, .friend-row, .ai-tip, .account-player-card, .invite-card,
.empty-state, .chart-container {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.stat-tile, .ring-card, .adv-tile, .miss-card, .record-row, .scoreboard-card,
.friend-row, .ai-tip { border-radius: var(--radius-card); }
.h2h-card { border-radius: 22px; }
.invite-card { border-color: rgba(194, 210, 48, 0.45); }

.stat-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.stat-tile { padding: 16px 12px 14px; }
.stat-value, .adv-value, .ring-label, .h2h-val, .sc-winner, .leaderboard td {
    font-variant-numeric: tabular-nums;
}
.stat-value { color: var(--text); font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; }
.stat-label { text-transform: none; letter-spacing: 0; font-size: 12px; margin-top: 6px; line-height: 1.3; }
.ring-card { padding: 16px 10px 14px; }
.ring-track { stroke: rgba(255, 255, 255, 0.06); }
.ring-caption { font-size: 12px; font-weight: 500; }

.scoreboard-card { border-left: 1px solid var(--border); padding: 14px 16px; transition: transform .15s ease, border-color .15s ease; }
.scoreboard-card.won { box-shadow: inset 3px 0 0 var(--green), var(--shadow-card); }
.scoreboard-card.lost { box-shadow: inset 3px 0 0 var(--red), var(--shadow-card); }
.scoreboard-card:hover { background: var(--surface); border-color: var(--border-strong); }
.scoreboard-card:active { transform: scale(0.99); }
.sc-date { font-weight: 600; }

.friend-row { padding: 12px 14px; }
.friend-row .pname { font-size: 15px; letter-spacing: -0.01em; }

.ai-tip {
    border-left: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(194, 210, 48, 0.10), transparent 55%),
        var(--surface);
}

.empty-state { border-radius: var(--radius-card); }
.chart-container { border-radius: var(--radius-card); }

/* --- Tarjeta protagonista del hándicap (ver _stats_block.html) ------------ */
.hcp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 20px 20px 10px;
    margin: 6px 0 12px;
    border: 1px solid var(--border);
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(194, 210, 48, 0.16), transparent 55%),
        linear-gradient(160deg, var(--fairway-deep), var(--surface) 65%);
    box-shadow: var(--shadow-card);
}
.hcp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hcp-hero-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.hcp-hero-est { color: var(--lime); font-size: 11px; margin-left: 4px; }
.hcp-hero-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-top: 6px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hcp-hero-delta {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    text-align: right;
    line-height: 1.15;
}
.hcp-hero-delta span { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10.5px; color: var(--text-muted); }
.hcp-hero-delta.is-better { background: rgba(53, 199, 126, 0.14); color: var(--green); }
.hcp-hero-delta.is-worse { background: rgba(255, 97, 97, 0.14); color: var(--red); }
.hcp-hero .hcp-hero-chart {
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 10px -8px 0;
    height: 150px;
    padding: 0;
}

/* --- Formularios ------------------------------------------------------------ */
input[type=email], input[type=password], input[type=search], input[type=date], input[type=url],
input[type=text]:not(.hole-input):not(.pin-input), input[type=number]:not(.hole-input):not(.hole-detail-input),
select:not(.hole-input), textarea {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=email], input[type=password], input[type=search], input[type=url],
input[type=text]:not(.hole-input):not(.pin-input) { padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: #6B7178; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(194, 210, 48, 0.7);
    box-shadow: 0 0 0 3px rgba(194, 210, 48, 0.16);
}
.filter-bar { gap: 8px; }
.filter-bar select { border-radius: var(--radius-pill); padding: 9px 34px 9px 14px; font-size: 13.5px; font-weight: 600; }

/* --- Botones ---------------------------------------------------------------- */
.btn-primary {
    box-shadow: 0 10px 24px -12px rgba(194, 210, 48, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .12s ease, filter .15s ease;
    white-space: nowrap;
}
.btn-primary:hover { opacity: 1; filter: brightness(1.05); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary, .btn-action {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border-strong);
    transition: background .15s ease, transform .12s ease;
}
.btn-secondary:hover, .btn-action:hover { background: rgba(255, 255, 255, 0.08); }
.btn-secondary:active, .btn-action:active { transform: scale(0.97); }
.btn-ghost-danger {
    background: transparent;
    border: 1px solid transparent;
    color: var(--red);
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}
.btn-ghost-danger:hover { background: rgba(255, 97, 97, 0.1); }

/* Ivan, revision 2026-09-23, pendiente nº4 ("Reacciones/comentarios en
   rondas"): fila de chips de reaccion (un emoji por chip, cada uno su
   propio <form> -- ver round_detail.html) y lista de comentarios, con el
   mismo lenguaje visual que el resto de chips/tarjetas de la app. */
.reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-pill);
    padding: 7px 12px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.reaction-chip-mine {
    border-color: var(--lime);
    background: rgba(194, 210, 48, 0.12);
}

.reaction-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.comments-list { margin-bottom: 14px; }

.comment-row {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.comment-author {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}

.comment-date {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.comment-text {
    margin: 0;
    font-size: 14px;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.comment-row form { margin-top: 6px; }

/* --- Pestañas segmentadas: siempre en una fila, mismo ancho ---------------- */
.result-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}
.result-tabs .result-tab-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 9px 8px; font-size: 13px; }
.result-tab-btn.active { box-shadow: 0 6px 16px -8px rgba(194, 210, 48, .8); }

/* --- Barra de navegacion flotante ------------------------------------------ */
.bottom-nav {
    background: rgba(20, 22, 25, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border-strong);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8);
}

/* --- Feed: tarjetas de historia mas limpias --------------------------------- */
.feed-story-card {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.feed-story-card:not(.is-read) { box-shadow: 0 0 0 1.5px var(--lime), var(--shadow-card); }

/* --- Tablas de ranking ------------------------------------------------------- */
table.leaderboard { border-collapse: separate; border-spacing: 0; }
table.leaderboard th { font-size: 11px; letter-spacing: .06em; }

/* --- Movimiento reducido ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* --- Impresion: se mantiene la paleta clara de "@media print" de arriba ----- */
@media print {
    body { background: #fff; }
    header.top, .account-sticky-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
    .hcp-hero { background: #fff; box-shadow: none; border-color: #ddd; }
    .hcp-hero-value, .stat-value { color: #000; }
}

/* v2: ajustes tras revisar capturas en movil (390px) */
.add-player-form { align-items: stretch; }
.add-player-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { flex: 1 1 auto; min-width: 0; }
.add-player-form .btn-primary, .add-player-form .btn-secondary { flex-shrink: 0; padding: 11px 16px; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
@media (max-width: 420px) {
    .stat-value { font-size: 22px; }
    .stat-tile { padding: 14px 8px 12px; }
    .hcp-hero-value { font-size: 50px; }
}
.empty-state { margin-top: 12px; }

/* --- Planes / monetizacion (roadmap 2026-09-24, /cuenta/premium) ----------- */
.premium-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.premium-tier-card {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-card);
}
.premium-tier-current { border-color: var(--lime); box-shadow: 0 0 0 1.5px var(--lime), var(--shadow-card); }
.premium-tier-price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--text);
    margin: 4px 0 8px;
}
.premium-tier-price span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.paypal-button-box { margin-top: 12px; max-width: 260px; }