/* 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;
}

* { 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). */
.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;
}

.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: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 12px;
    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: 10px;
    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: 10px;
    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 {
    background: var(--ink);
    color: var(--text);
    border-radius: 12px;
    padding: 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: 10px;
    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: 10px;
    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; }

/* 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;
}

.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; }

/* 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; }

/* 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; }

.h2h-header {
    display: flex;
    justify-content: space-between;
    padding: 0 4px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.h2h-header .a { color: var(--team-a); }
.h2h-header .b { color: var(--team-b); }

.h2h-row { margin-bottom: 16px; }

.h2h-nums {
    display: flex;
    justify-content: space-between;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 4px;
}

.h2h-nums .a { color: var(--team-a); }
.h2h-nums .b { color: var(--team-b); }

.h2h-bar { display: flex; height: 10px; width: 100%; background: var(--surface-2); border-radius: 6px; }
.h2h-bar .half { width: 50%; display: flex; }
.h2h-bar .half.a { justify-content: flex-end; }
.h2h-bar .half.b { justify-content: flex-start; }
.h2h-bar .fill { height: 100%; min-width: 3px; }
.h2h-bar .fill.a { background: var(--team-a); border-radius: 6px 0 0 6px; }
.h2h-bar .fill.b { background: var(--team-b); border-radius: 0 6px 6px 0; }

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

.h2h-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

.h2h-dot.a { background: var(--team-a); }
.h2h-dot.b { background: var(--team-b); }

.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;
    gap: 10px;
    margin: 16px 0;
}

.btn-action {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

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

.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: 12px;
    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;
}

/* /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;
}

.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;
}

.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;
}

.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 {
    background: var(--lime);
    color: var(--lime-ink);
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.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;
}

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

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--surface-2);
    padding: 12px 22px;
    border-radius: 8px;
    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;
}

.step {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    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: 10px;
    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;
}

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

@media (max-width: 640px) {
    .steps { 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); }

.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. */
@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;
    }
}