:root{
  --blue:#3266ad;
  --orange:#E8774A;
  /* --blue-text/--orange-text: variantes usadas SOLO como color de texto
     (links, valores, badges). --blue original no pasa 4.5:1 sobre fondos
     oscuros (tarjeta/fondo oscuros) y --orange original no pasa 4.5:1 sobre
     blanco — mismo patrón que ya usan --improve/--regress (valor distinto
     por tema). Los usos de --blue/--orange como FONDO sólido con texto
     blanco encima (ej. .view-toggle-btn.active) se quedan con el valor
     original, que sí tiene buen contraste con blanco. */
  --blue-text:var(--blue);
  --orange-text:#b54417;
  /* Dorado/ámbar para insignias "destacado" (Club Spotlight) — más oscuro
     que el dorado de milestone/verified (#c9a227) porque aquí se usa como
     fondo sólido con texto blanco encima (necesita 4.5:1, ese no llega). */
  --accent:#8a6d13;
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#1e2530;
  --muted:#5b6476;
  --border:#e4e7ec;
  --improve:#2e7d32;
  --regress:#c0392b;
  --th-bg:#fafbfc;
  --row-hover:#f8fafc;
  --sugg-hover:#f0f4fa;
  --row-selected:#eef3fc;
  --shadow-elevated:0 4px 20px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06);
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ── Dark mode (sistema o toggle manual) ─── */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111827;--card:#1e2533;--text:#e8ecf4;--muted:#8899bb;
    --border:#2a3447;--th-bg:#161f2e;--row-hover:#1a2540;--sugg-hover:#1a2540;
    --improve:#66bb6a;--regress:#ff6b6b;--row-selected:rgba(69,131,214,.22);
    --blue-text:#6699d6;--orange-text:var(--orange);
    --shadow-elevated:0 4px 20px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#111827;--card:#1e2533;--text:#e8ecf4;--muted:#8899bb;
  --border:#2a3447;--th-bg:#161f2e;--row-hover:#1a2540;--sugg-hover:#1a2540;
  --improve:#66bb6a;--regress:#ff6b6b;--row-selected:rgba(69,131,214,.22);
  --blue-text:#6699d6;--orange-text:var(--orange);
  --shadow-elevated:0 4px 20px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --bg:#f5f7fa;--card:#ffffff;--text:#1e2530;--muted:#5b6476;
  --border:#e4e7ec;--th-bg:#fafbfc;--row-hover:#f8fafc;--sugg-hover:#f0f4fa;
  --improve:#2e7d32;--regress:#c0392b;--row-selected:#eef3fc;
  --blue-text:var(--blue);--orange-text:#b54417;
  --shadow-elevated:0 4px 20px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06);
}
*{box-sizing:border-box;}
/* ── Foco visible consistente (accesibilidad de teclado) ── */
:focus-visible{
  outline:2px solid var(--blue-text);
  outline-offset:2px;
  border-radius:2px;
}
body{
  margin:0;
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--text);
}
a{color:var(--blue-text);}
a:visited{color:var(--blue-text);}
a:hover{opacity:.8;}
.topbar{
  background:linear-gradient(135deg,var(--blue),#1f4780);
  color:#fff;
  padding:24px 20px 0 20px;
}
/* El anillo de foco azul (var(--blue)) se pierde contra el fondo degradado
   azul del topbar — aquí usamos blanco para que siga siendo visible. */
.topbar :focus-visible{outline-color:#fff;}
.topbar-inner h1{
  margin:0 0 4px 0;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.subtitle{margin:0 0 16px 0;opacity:.9;font-size:.9rem;}
.tabs-wrap{position:relative;}
.tabs{
  display:flex;gap:4px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-padding-left:4px;
}
/* gradiente que avisa que hay más pestañas a la derecha (mismo truco que .club-table-wrap.collapsed::after) */
@media(max-width:900px){
  .tabs-wrap::after{
    content:'';
    position:absolute;top:0;right:0;bottom:0;
    width:36px;
    background:linear-gradient(90deg,transparent,#1f4780);
    pointer-events:none;
  }
}
.tab-btn{
  background:rgba(255,255,255,.12);
  border:none;
  color:#fff;
  padding:10px 18px;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  font-size:.9rem;
  white-space:nowrap;
  scroll-snap-align:start;
}
.tab-btn.active{background:var(--bg);color:var(--blue-text);font-weight:600;}
#app{max-width:1100px;margin:0 auto;padding:24px 20px 60px 20px;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.panel-head h2{
  margin:0 0 4px 0;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}
.hint{color:var(--muted);font-size:.85rem;margin:0 0 16px 0;}
.filter-row{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.filter-row label{font-size:.85rem;color:var(--muted);}
.compare-race-checklist{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 16px;
  max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;
  padding:12px;margin-bottom:14px;
}
.compare-race-check-row{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text);}
.compare-race-check-row input{margin:0;}
#compareRaceTable th.cat-sub{font-size:.72rem;text-align:center;}
#compareRaceTable td.cat-max{font-weight:700;color:var(--blue-text);background:var(--row-selected);}
select,input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],textarea{
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 10px;
  font-size:.9rem;
  margin-left:6px;
  background:var(--card);
  color:var(--text);
  font-family:inherit;
}
input#runnerSearch{width:100%;max-width:420px;margin:0 0 6px 0;padding:10px 12px;}
.table-wrap{overflow-x:auto;background:var(--card);border-radius:10px;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:.87rem;}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);}
th{background:var(--th-bg);color:var(--muted);font-weight:600;position:sticky;top:0;}
tr:hover td{background:var(--row-hover);}

/* ── Tablas anchas → vista de tarjetas en mobile (data-label + ::before) ──
   Aplica a .table-wrap.responsive-table. Cada <td> relevante debe traer
   data-label="Encabezado" (ver renderTop/renderRaceFullTable/renderClubes/
   showRunnerProfile en app.js). No requiere JS extra para el layout. */
@media(max-width:640px){
  .table-wrap.responsive-table{overflow-x:visible;border:none;background:transparent;}
  .table-wrap.responsive-table table{border-collapse:separate;border-spacing:0 10px;}
  .table-wrap.responsive-table thead{position:absolute;left:-9999px;top:-9999px;}
  .table-wrap.responsive-table tbody tr{
    display:block;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px 0;
  }
  .table-wrap.responsive-table tbody tr:hover td{background:transparent;}
  .table-wrap.responsive-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 12px;
    text-align:right;
    border-bottom:none;
  }
  .table-wrap.responsive-table td[data-label]::before{
    content:attr(data-label);
    font-size:.72rem;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.03em;
    text-align:left;
    margin-right:12px;
    flex-shrink:0;
  }
}
.badge-V{color:var(--blue-text);font-weight:600;}
.badge-F{color:var(--orange-text);font-weight:600;}

/* ── Tiempo como protagonista tipográfico en tablas de resultados ──
   Tratamiento tipo badge/pill sutil: azul (varonil) u naranja (femenil) si
   la fila trae un .badge-V/.badge-F (mismo <tr>, vía :has()); si el navegador
   no soporta :has() o no hay contexto de género, se queda en el azul default. */
.time-cell{
  font-family:var(--f-mono);font-weight:700;font-size:1.08em;color:var(--text);white-space:nowrap;
  display:inline-block;padding:2px 8px;border-radius:6px;
  background:color-mix(in srgb, var(--blue) 12%, transparent);
}
tr:has(.badge-F) .time-cell{background:color-mix(in srgb, var(--orange) 12%, transparent);}
tr:has(.badge-V) .time-cell{background:color-mix(in srgb, var(--blue) 12%, transparent);}
.meta-cell{font-size:.8rem;color:var(--muted);font-weight:400;}
/* mismo estilo visual que badge-V/F pero para usos no relacionados a género */
.badge-pending{color:var(--muted);font-weight:600;}
.badge-category{color:var(--improve);font-weight:600;}
.badge-approved{color:var(--improve);font-weight:600;}
.badge-rejected{color:var(--regress);font-weight:600;}

/* ── Rank badge (posiciones en tablas de ranking) ─────────── */
.rank-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 6px;
  border-radius:999px;
  background:var(--th-bg);
  border:1px solid var(--border);
  color:var(--muted);
  font-family:var(--f-mono);
  font-size:.78rem;font-weight:700;
}
/* acento sutil para el top 3 (las primeras filas de una tabla ordenada por rank) */
tbody tr:nth-child(-n+3) .rank-badge{
  background:var(--row-selected);
  border-color:var(--blue-text);
  color:var(--blue-text);
}
.suggestions{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  max-width:420px;
  overflow:hidden;
}
.suggestions div{padding:8px 12px;cursor:pointer;font-size:.87rem;}
.suggestions div:hover{background:var(--sugg-hover);}
.runner-profile{margin-top:20px;}
/* .stat-row es un layout genérico (fila de .stat-card) reutilizado fuera del
   perfil de corredor — KPIs de carrera (#raceKpis), tarjetas de calendario, etc. */
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 18px;
  min-width:140px;
}
.stat-card .label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.stat-card .value{font-size:1.4rem;font-weight:700;color:var(--blue-text);}

/* ── Insignia de hitos (total de carreras corridas, perfil de corredor) ── */
.milestone-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:50%;flex-shrink:0;
  background:var(--card);border:3px solid var(--border);
}
.milestone-count{font-family:var(--f-mono);font-weight:700;font-size:1.6rem;line-height:1;color:var(--blue-text);}
.milestone-label{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;text-align:center;margin-top:4px;padding:0 6px;}
.milestone-badge.milestone-5{border-color:var(--blue-text);}
.milestone-badge.milestone-10{border-color:var(--orange-text);}
.milestone-badge.milestone-10 .milestone-count{color:var(--orange-text);}
.milestone-badge.milestone-25{border-color:var(--improve);}
.milestone-badge.milestone-25 .milestone-count{color:var(--improve);}
.milestone-badge.milestone-50,.milestone-badge.milestone-100{
  border-color:#c9a227;background:linear-gradient(135deg,rgba(201,162,39,.16),transparent);
}
.milestone-badge.milestone-50 .milestone-count,.milestone-badge.milestone-100 .milestone-count{color:#c9a227;}
.milestone-badge.milestone-100{border-width:4px;box-shadow:0 0 0 3px rgba(201,162,39,.18);}

/* ── Insignia de corredor verificado (mismo dorado que milestone-50/100) ── */
.verified-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(201,162,39,.16),transparent);
  border:1px solid #c9a227;color:#c9a227;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 10px;border-radius:100px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:800px){.grid2{grid-template-columns:1fr;}}
/* ── Grid de 3 columnas (causas activas, proveedores) ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid3{grid-template-columns:1fr;}}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;}
.card h3{margin:0 0 10px 0;font-size:.95rem;color:var(--text);}

/* ── Calendario: carreras (grande, izq) + mini calendario (chico, der) ── */
.calendario-layout{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
@media(max-width:900px){.calendario-layout{grid-template-columns:1fr;}}
.calendario-mini-col{position:sticky;top:16px;}
@media(max-width:900px){.calendario-mini-col{position:static;order:-1;}}
.mini-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mini-cal-head h4{margin:0;font-size:.85rem;text-transform:capitalize;}
.mini-cal-nav{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text);
  cursor:pointer;width:26px;height:26px;font-size:.8rem;line-height:1;}
.mini-cal-nav:hover{background:var(--row-hover);}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;}
.mini-cal-dow{font-size:.62rem;color:var(--muted);font-weight:600;padding-bottom:4px;}
.mini-cal-day{font-size:.72rem;padding:4px 0;border-radius:6px;color:var(--text);position:relative;}
.mini-cal-day.is-empty{visibility:hidden;}
.mini-cal-day.has-race{background:var(--row-selected);font-weight:700;cursor:pointer;}
.mini-cal-day.has-race:hover{background:var(--blue);color:#fff;}
.mini-cal-day.is-today{outline:1.5px solid var(--blue-text);}
.mini-cal-legend{font-size:.68rem;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px;}
.mini-cal-legend .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;}
.stat-box{display:flex;flex-direction:column;gap:10px;}
.club-detail{margin-top:16px;}

/* ── "Cargar más" en tablas truncadas (Top Matamoros, Clubes) ─────────── */
.load-more-row{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap;}
.load-more-count{font-size:.82rem;color:var(--muted);margin:0;}
.btn-loadmore{
  background:var(--card);border:1px solid var(--border);color:var(--blue-text);
  padding:8px 16px;border-radius:6px;font-size:.85rem;font-family:inherit;font-weight:500;
  cursor:pointer;transition:background .12s;
}
.btn-loadmore:hover{background:var(--row-hover);}
@media(max-width:640px){
  .btn-loadmore{min-height:44px;}
}
@media(max-width:480px){
  .load-more-row{flex-direction:column;align-items:flex-start;gap:8px;}
}
footer{text-align:center;color:var(--muted);font-size:.8rem;padding:20px;}
.footer-socio{margin-top:8px;}
.footer-socio a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-weight:600;}
.footer-socio a:hover{color:var(--text);}
.footer-socio img{width:22px;height:22px;border-radius:5px;display:block;}

/* ── Toggle de sub-vistas (ej. Top Matamoros: Ranking / Por género / Por edad) ── */
.view-toggle{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.view-toggle-btn{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--muted);
  padding:6px 14px;
  border-radius:6px;
  font-size:.85rem;
  font-family:inherit;
  font-weight:500;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.view-toggle-btn:hover{background:var(--row-hover);}
.view-toggle-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}

/* ── Leaderboard destacado (top 5 de una carrera) ─────────── */
.leaderboard-card h3{margin-bottom:12px;}
.leaderboard-list{display:flex;flex-direction:column;gap:8px;}
.leaderboard-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;background:var(--bg);
}
.leaderboard-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leaderboard-club{color:var(--muted);font-size:.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leaderboard-time{font-family:var(--f-mono);font-weight:700;font-size:1rem;}
.leaderboard-rank-1{background:var(--row-selected);}
.leaderboard-rank-1 .rank-badge{background:var(--blue);border-color:var(--blue);color:#fff;}
@media(max-width:560px){
  .leaderboard-row{flex-wrap:wrap;}
  .leaderboard-club{order:4;flex-basis:100%;}
}

/* ── Panel de Admin: links para compartir ────────────────── */
.share-links-card{display:flex;flex-direction:column;}
.share-link-row{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid var(--border);}
.share-link-row:last-of-type{border-bottom:none;}
.share-link-label{font-size:.82rem;font-weight:600;color:var(--text);}
.share-link-copy{display:flex;gap:8px;align-items:center;}
.share-link-copy input{
  flex:1;min-width:0;font-family:var(--f-mono,monospace);font-size:.78rem;
  padding:6px 8px;border:1px solid var(--border);border-radius:6px;
  background:var(--bg);color:var(--muted);
}
.share-link-generator{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.share-link-generator select{
  padding:8px 10px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);color:var(--text);font-size:.85rem;
}

/* ── Panel de Admin: Importar carrera (staging de un CSV subido) — resalta
   las filas flaggeadas del detalle de un job, mismo criterio de color-mix
   que .time-cell/.badge-inactive para no introducir un rojo sólido nuevo. ── */
tr.staging-flagged td{background:color-mix(in srgb, var(--regress) 10%, transparent);}

/* ── Topbar quick stats (mismo patrón que .stat-card, ajustado al fondo
   oscuro degradado del topbar) + CTA "Ver próxima carrera" ── */
.topbar-stats{display:flex;gap:12px;flex-wrap:wrap;margin:2px 0 14px;}
.topbar-stat{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  padding:8px 16px;
  min-width:120px;
}
.topbar-stat .label{font-size:.72rem;color:#fff;opacity:.75;text-transform:uppercase;letter-spacing:.03em;}
.topbar-stat .value{font-size:1.25rem;font-weight:700;color:#fff;}
#nextRaceBtn{margin-bottom:16px;background:rgba(255,255,255,.18);}
#nextRaceBtn:hover{background:rgba(255,255,255,.28);opacity:1;}

/* ── Topbar auth layout ──────────────────────────────────── */
.topbar-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.topbar-auth{display:flex;align-items:center;padding-top:6px;flex-shrink:0;}
.auth-btn{
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  padding:6px 14px;
  font-size:.82rem;
  font-family:inherit;
  font-weight:500;
  cursor:pointer;
  transition:background .12s;
  white-space:nowrap;
}
.auth-btn:hover{background:rgba(255,255,255,.28);}
.auth-btn-sm{background:transparent;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25);font-size:.75rem;padding:4px 10px;}
.auth-user{display:flex;align-items:center;gap:8px;}
.auth-user-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:0;}
.auth-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5);}
.auth-initials{
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  color:#fff;
  font-size:.8rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.auth-name{font-size:.8rem;color:rgba(255,255,255,.9);font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:200;
}
.modal-box{
  background:var(--card);
  border-radius:12px;
  padding:32px 28px;
  width:340px;
  max-width:calc(100vw - 40px);
  position:relative;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.modal-close{position:absolute;top:12px;right:14px;background:transparent;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);line-height:1;}
.modal-title{margin:0 0 20px;font-size:1.05rem;font-weight:600;}
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--border);border-radius:6px;padding:8px 12px;
  background:var(--card);cursor:pointer;font-size:.87rem;font-family:inherit;font-weight:500;
  transition:background .12s;
}
.btn-google:hover{background:var(--bg);}
.modal-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:.76rem;}
.modal-divider::before,.modal-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.modal-form{display:flex;flex-direction:column;gap:8px;}
.modal-form input{margin-left:0;width:100%;}
.btn-primary{
  background:var(--blue);color:#fff;border:none;border-radius:6px;
  padding:8px 18px;font-size:.87rem;font-family:inherit;font-weight:500;
  cursor:pointer;transition:opacity .12s;text-align:center;
}
.btn-primary:hover{opacity:.85;}
.btn-link{background:none;border:none;color:var(--blue-text);font-size:.84rem;cursor:pointer;padding:0;font-family:inherit;}
.modal-toggle{font-size:.78rem;color:var(--muted);margin:0;text-align:center;}
.modal-toggle a{color:var(--blue-text);text-decoration:none;}
.modal-msg{font-size:.78rem;margin:2px 0 0;color:#c0392b;min-height:1.1em;}

/* ── Profile claim / edit card ───────────────────────────── */
.profile-claim-card,.profile-own-card{margin-bottom:16px;}
.leaderboard-card,
.profile-own-card{
  border-radius:14px;
  box-shadow:var(--shadow-elevated);
}
.profile-own-card h3{margin:0 0 14px;font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.profile-edit-row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;}
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
.profile-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--border);}
.profile-avatar-placeholder{
  width:72px;height:72px;border-radius:50%;
  background:var(--bg);border:2px dashed var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.profile-photo-label{font-size:.75rem;color:var(--blue-text);cursor:pointer;}
.profile-fields{display:flex;flex-direction:column;gap:10px;flex:1;min-width:200px;}
.field-label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);font-weight:500;}
.field-label input,.field-label textarea{margin-left:0;width:100%;}

/* ── Aliases ─────────────────────────────────────────────── */
.aliases-section{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.aliases-label{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.aliases-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;min-height:24px;}
.alias-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:4px 10px 4px 12px;font-size:.8rem;}
.alias-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.75rem;line-height:1;padding:0 0 0 2px;}
.alias-chip button:hover{color:#c0392b;}

/* ── Resumen de ritmo + marca de récord personal (PR) ─────── */
.pace-summary{
  display:flex;gap:22px;flex-wrap:wrap;
  margin:8px 0 12px;padding:10px 16px;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
}
.pace-summary-item{display:flex;flex-direction:column;gap:2px;}
.pace-summary-label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.pace-summary-value{font-family:var(--f-mono);font-weight:700;font-size:.95rem;}
.pace-summary-value.pace-best{color:var(--improve);}
.pace-summary-value.pace-worst{color:var(--regress);}
tr.pr-row td{background:var(--row-selected);}
tr.pr-row td:first-child{box-shadow:inset 3px 0 0 var(--improve);}
.pr-badge{
  display:inline-block;margin-left:6px;font-size:.62rem;font-weight:700;
  color:var(--improve);border:1px solid var(--improve);border-radius:10px;
  padding:0 6px;vertical-align:middle;letter-spacing:.03em;
}

/* ── Runner profile links ─────────────────────────────────── */
canvas{display:block;} /* Chart.js needs block to avoid inline 4px gap */
.runner-link{background:none;border:none;color:var(--blue-text);cursor:pointer;font:inherit;font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:2px;text-align:left;}
.runner-link:hover{opacity:.7;}

/* ── Club profile ─────────────────────────────────────────── */
.club-profile-card{margin-bottom:16px;}
.club-cover-photo{width:100%;max-height:160px;object-fit:cover;border-radius:8px;margin-bottom:12px;}
.badge-admin{background:var(--blue);color:#fff;font-size:.7rem;font-weight:600;border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:middle;}
/* Contador "X pendientes" en headers de admin (bienvenida/análisis) — mismo
   patrón que .badge-admin pero en --accent (ámbar) para que salte a la
   vista frente al texto verde de "ya enviado" (.badge-approved). */
.badge-pending{background:var(--accent);color:#fff;font-size:.7rem;font-weight:600;border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:middle;}
/* Etiqueta "Premium" en pestañas/funciones que serán de paga a futuro (aún
   sin sistema de pagos) — mismo look de pill que .badge-admin/.badge-pending,
   clase propia para no mezclar semántica de "pendiente de revisión". */
.badge-premium{background:var(--accent);color:#fff;font-size:.65rem;font-weight:600;border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em;}
/* Botón "Marcar enviado" en tablas de admin — pill ámbar en vez de link de
   texto plano, para que el pendiente se distinga a simple vista del check
   verde (.badge-approved) sin tener que leer cada celda. */
.btn-pending-email{background:var(--accent);color:#fff;border:none;border-radius:4px;padding:3px 9px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;}
.btn-pending-email:hover{opacity:.85;}
tr.row-selected td{background:var(--row-selected) !important;color:var(--text);}
.club-table-wrap{overflow-x:auto;background:var(--card);border-radius:10px;border:1px solid var(--border);transition:max-height .3s ease;}
.club-table-wrap.collapsed{max-height:120px;overflow:hidden;position:relative;}

.club-members-list{max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:2px 10px;}
.club-member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.85rem;}
.club-member-row:last-child{border-bottom:none;}
.club-member-row label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:.78rem;white-space:nowrap;}
.club-member-row input[type=checkbox]{width:auto;margin:0;border:none;flex-shrink:0;}
.club-table-wrap.collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,var(--card));pointer-events:none;}
/* ── Club Spotlight ───────────────────────────────────────── */
.club-spotlight-card{position:relative;margin-bottom:16px;background:linear-gradient(135deg,var(--card) 0%,color-mix(in srgb,var(--accent) 8%,var(--card)) 100%);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));}
.club-spotlight-form{background:var(--card);border:1px solid var(--border);}
.spotlight-badge{display:inline-block;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:2px 8px;margin-bottom:10px;}
.spotlight-photo{width:100%;max-height:240px;object-fit:cover;border-radius:8px;margin-bottom:10px;display:block;}
.spotlight-runner{font-size:1.05rem;font-weight:700;margin:0 0 6px;color:var(--text);}
.spotlight-message{font-size:.88rem;color:var(--muted);margin:0;white-space:pre-wrap;word-break:break-word;}


/* ── Section headers (Historial de competencia, Entrenamientos) ── */
.section-header{
  font-size:.75rem;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 4px;padding:0;
}

/* ── Training table ───────────────────────────────────────── */
.training-section{margin-top:4px;}
.training-table td input[type=text],.training-table td input[type=number],.training-table td input[type=date]{
  border:1px solid var(--border);border-radius:4px;padding:4px;
  font-size:.78rem;font-family:inherit;background:var(--bg);
}
.training-table td select{
  border:1px solid var(--border);border-radius:4px;padding:4px;
  font-size:.78rem;font-family:inherit;background:var(--bg);
}
.training-table td input:disabled,.training-table td select:disabled{
  opacity:.7;background:transparent;border-color:transparent;cursor:default;
}
.coach-note{font-size:.72rem;color:var(--muted);}

/* ── Club member status ───────────────────────────────────────── */
tr.member-inactive td{opacity:.45;}
tr.member-inactive .runner-link{text-decoration:line-through;color:var(--muted);}
.badge-active{color:#2e7d32;font-size:.72rem;font-weight:600;background:#e8f5e9;border-radius:4px;padding:2px 6px;}
.badge-inactive{color:#b71c1c;font-size:.72rem;font-weight:600;background:#fce4ec;border-radius:4px;padding:2px 6px;}
[data-theme="dark"] .badge-active{background:#1b3a1f;color:#81c784;}
[data-theme="dark"] .badge-inactive{background:#3b1218;color:#ef9a9a;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .badge-active{background:#1b3a1f;color:#81c784;}
  :root:not([data-theme="light"]) .badge-inactive{background:#3b1218;color:#ef9a9a;}
}
.btn-deactivate{font-size:.72rem;padding:2px 8px;border-radius:4px;border:1px solid #e57373;color:#c62828;background:transparent;cursor:pointer;margin-left:6px;}
.btn-deactivate:hover{background:#fce4ec;}
.btn-reactivate{font-size:.72rem;padding:2px 8px;border-radius:4px;border:1px solid #81c784;color:#2e7d32;background:transparent;cursor:pointer;margin-left:6px;}
.btn-reactivate:hover{background:#e8f5e9;}
/* ── Corriendo con Causa: tema editorial (scoped, no filtra a otras pestañas) ── */
#tab-causa{
  --causa-bg:#1a1a1a;     /* fondo oscuro editorial, no negro puro */
  --causa-ink:#f4f4f2;    /* texto claro sobre el fondo oscuro */
}
#tab-causa .panel-head{
  background:var(--causa-bg);
  color:var(--causa-ink);
  border-radius:14px;
  padding:36px 28px;
  margin:0 0 28px;
}
#tab-causa .panel-head h2{
  margin:0 0 10px;
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--causa-ink);
}
#tab-causa .panel-head .hint{
  margin:0;
  color:rgba(244,244,242,.7);
  font-size:.88rem;
}

.cause-progress-track{
  position:relative;
  width:100%;height:2px;
  background:var(--border);
  margin:18px 2px 14px;
}
.cause-progress-fill{
  position:absolute;top:0;left:0;height:100%;
  background:var(--text);
  transition:width .3s ease;
}
.cause-progress-dot{
  position:absolute;top:50%;
  width:11px;height:11px;border-radius:50%;
  background:var(--text);
  border:2px solid var(--card);
  transform:translate(-50%,-50%);
  transition:left .3s ease;
}
.cause-progress-goal-text{
  margin:0;
  font-family:var(--f-mono,monospace);
  font-size:.8rem;
  color:var(--muted);
}
/* ── Donativos estimados (vista organizadora, renderOrganizerBibOrders) ── */
.donation-bar-wrap{
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:12px;
}
.donation-bar-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;flex-wrap:wrap;margin-bottom:8px;
}
.donation-bar-head .hint{margin:0;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;}
.donation-bar-amount{
  font-family:var(--f-mono,monospace);
  font-weight:700;font-size:1.15rem;color:var(--text);
}
.donation-bar-amount span{font-size:.72rem;font-weight:400;color:var(--muted);}
.donation-bar-track{
  display:flex;width:100%;height:14px;
  border-radius:7px;overflow:hidden;
  background:var(--border);
}
.donation-bar-confirmed{background:var(--improve);}
.donation-bar-pending{
  background:color-mix(in srgb, var(--improve) 35%, var(--card));
}
.donation-bar-empty-text{
  margin:6px 0 0;font-size:.75rem;color:var(--muted);
}
.donation-bar-legend{
  display:flex;gap:14px;flex-wrap:wrap;
  margin:8px 0 0;font-size:.75rem;color:var(--muted);
}
.donation-bar-legend b{
  font-family:var(--f-mono,monospace);color:var(--text);font-weight:700;
}
.donation-bar-legend .dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:5px;vertical-align:middle;
}
.donation-bar-legend .dot-confirmed{background:var(--improve);}
.donation-bar-legend .dot-pending{
  background:color-mix(in srgb, var(--improve) 35%, var(--card));
  border:1px solid var(--border);
}

.cause-checkbox-row{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;padding-top:4px;}
.cause-checkbox-row input[type=checkbox]{width:auto;margin:0;border:none;flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════════════
   Fase 2.2 — Breakpoints generales de layout mobile
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .topbar{padding:18px 14px 0 14px;}
  .topbar-inner h1{font-size:1.3rem;}
  .subtitle{font-size:.8rem;}
  #app{padding:16px 14px 44px 14px;}
  .panel-head h2{font-size:1.15rem;}
  .hint{font-size:.82rem;}

  /* Filtros: de fila a columna, cada select ocupa el ancho completo */
  .filter-row{flex-direction:column;align-items:stretch;gap:10px;}
  .filter-row label{display:flex;flex-direction:column;gap:4px;width:100%;}
  .filter-row select{width:100%;margin-left:0;}

  select,input[type=text],input[type=email],input[type=password],input[type=date],input[type=number]{
    width:100%;margin-left:0;padding:8px 10px;font-size:.92rem;
  }
  input#runnerSearch{max-width:100%;}

  .stat-row{gap:10px;}
  .stat-card{flex:1 1 calc(50% - 5px);min-width:0;padding:12px 14px;}

  .grid2{gap:12px;}
  .card{padding:14px;}

  table{font-size:.82rem;}
  th,td{padding:8px;}

  /* Área táctil mínima de 44px para botones de acción */
  .btn-primary,.btn-google,.auth-btn,.tab-btn,.view-toggle-btn{
    min-height:44px;
    min-width:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .btn-primary,.btn-google{width:100%;}
}

/* ── Área táctil mínima de 44x44px en botones-ícono pequeños (touch) ──
   Se expande el hit-area con un ::before invisible en vez de agrandar el
   elemento visualmente, para no alterar el diseño compacto de estos
   controles (mismo patrón que recomienda WCAG 2.5.5 / Apple HIG). ── */
@media(max-width:640px),(pointer:coarse){
  /* .modal-close ya trae position:absolute (ver "Modal" arriba) — no se toca,
     eso ya la vuelve contexto de posicionamiento para su ::before. */
  .mini-cal-nav,.alias-chip button,.btn-deactivate,.btn-reactivate{
    position:relative;
  }
  .mini-cal-nav::before,.modal-close::before,.alias-chip button::before,
  .btn-deactivate::before,.btn-reactivate::before{
    content:'';
    position:absolute;
    inset:50%;
    width:44px;height:44px;
    transform:translate(-50%,-50%);
  }
}

@media(max-width:480px){
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:8px;}
  .topbar-auth{padding-top:0;width:100%;justify-content:space-between;}
  .topbar-inner h1{font-size:1.15rem;}

  .stat-card{flex:1 1 100%;}
  .modal-box{padding:24px 18px;}
}

/* ── Utilidades de spacing (para código nuevo — no retrofitear estilos inline existentes) ── */
.mt-4{margin-top:4px;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mb-4{margin-bottom:4px;}
.mb-8{margin-bottom:8px;}
.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}
.card-elevated{border-radius:14px;box-shadow:var(--shadow-elevated);}
.flex-gap-8{display:flex;gap:8px;}
.flex-gap-16{display:flex;gap:16px;}

/* ── Causa: zona oscura con tarjetas blancas flotantes para los CTAs ── */
#tab-causa .causa-cta-zone{
  background:var(--causa-bg);
  border-radius:14px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-bottom:28px;
}
#tab-causa .causa-cta-card{
  background:#fff;
  color:#1a1a1a;
  border-radius:12px;
  padding:22px 24px;
  box-shadow:0 20px 44px rgba(0,0,0,.4);
}
#tab-causa .causa-cta-card .section-header{color:#1a1a1a;}
#tab-causa .causa-cta-card .hint{color:#6b6b6b;}
#tab-causa .causa-cta-card .field-label{color:#6b6b6b;}
#tab-causa .causa-cta-card input,
#tab-causa .causa-cta-card select{
  background:#fafafa;color:#1a1a1a;border-color:#ddd;
}
#tab-causa .causa-cta-card > .btn-primary{margin-bottom:0;}
#tab-causa .causa-cta-form{margin-top:16px;padding-top:16px;border-top:1px solid #eaeaea;}
#tab-causa .causa-cta-card .btn-primary{
  background:#000;
  color:#fff;
  border-radius:6px;
  font-weight:700;
}

/* ── Fotos de header por pestaña (banner discreto arriba del panel-head) ── */
.tab-hero{
  height:130px;border-radius:10px;margin-bottom:16px;overflow:hidden;position:relative;
  background-size:cover;background-position:center;
}
.tab-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.25) 100%);
}
@media(max-width:640px){ .tab-hero{height:90px;} }

/* ── Panel de Admin > General: gestor de fotos de header por pestaña ── */
.tab-hero-admin-list{display:flex;flex-direction:column;gap:10px;}
.tab-hero-admin-row{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
}
.tab-hero-admin-thumb{flex-shrink:0;width:120px;height:60px;border-radius:6px;overflow:hidden;}
.tab-hero-admin-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tab-hero-admin-placeholder{
  width:100%;height:100%;border-radius:6px;
  background:var(--bg);border:2px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--muted);text-align:center;
}
.tab-hero-admin-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.tab-hero-admin-label{font-size:.85rem;font-weight:600;color:var(--text);}
.tab-hero-admin-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
#tab-causa .causa-cta-card .btn-primary:hover{opacity:.82;}

/* ── Loading dot spinner ── */
@keyframes loading-pulse {
  0%,100%{ opacity:.3; transform:scale(.7); }
  50%{ opacity:1; transform:scale(1); }
}
.loading-dot {
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:currentColor;
  animation:loading-pulse 1.2s ease-in-out infinite;
}
/* ── Reto 8 Semanas ────────────────────────────────────────── */
/* Código de referencia como protagonista tipográfico, mismo criterio que
   .time-cell (mono, grande, pill de fondo suave) — es el dato que el
   participante necesita recordar/copiar cada semana. */
.reto8-code-box{
  font-family:var(--f-mono);font-weight:700;font-size:1.6rem;letter-spacing:.03em;
  text-align:center;padding:14px 10px;border-radius:8px;
  background:color-mix(in srgb, var(--blue) 12%, transparent);
  color:var(--blue-text);
  border:1px dashed var(--blue-text);
}
.reto8-result-card{border-color:var(--improve);}
/* Badges de estado de reporte semanal (no enviado/pendiente/validado/
   rechazado) — mismo look de pill que .badge-active/.badge-inactive, con un
   estado "neutral" (gris) adicional para "no enviado". */
.reto8-badge{font-size:.72rem;font-weight:600;border-radius:4px;padding:2px 8px;white-space:nowrap;}
.reto8-badge-neutral{color:var(--muted);background:var(--th-bg);border:1px solid var(--border);}
.reto8-badge-pending{color:#8a6d13;background:#fff3d6;}
.reto8-badge-validated{color:#2e7d32;background:#e8f5e9;}
.reto8-badge-rejected{color:#b71c1c;background:#fce4ec;}
[data-theme="dark"] .reto8-badge-pending{background:#3a2f0f;color:#e0c46a;}
[data-theme="dark"] .reto8-badge-validated{background:#1b3a1f;color:#81c784;}
[data-theme="dark"] .reto8-badge-rejected{background:#3b1218;color:#ef9a9a;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .reto8-badge-pending{background:#3a2f0f;color:#e0c46a;}
  :root:not([data-theme="light"]) .reto8-badge-validated{background:#1b3a1f;color:#81c784;}
  :root:not([data-theme="light"]) .reto8-badge-rejected{background:#3b1218;color:#ef9a9a;}
}

/* ── Mobile polish v2: topbar + tabs + perfil ── */
@media (max-width: 640px) {
  .topbar { padding: 14px 12px 0 12px; }
  .topbar-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .topbar-inner h1 { font-size: 1.2rem; }
  .subtitle { font-size: 0.78rem; margin-bottom: 8px; }
  .topbar-stats { gap: 8px; margin: 0 0 10px; }
  .topbar-stat { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 8px 10px; }
  .topbar-stat .value { font-size: 1.05rem; }
  #nextRaceBtn { width: 100%; margin-bottom: 6px; }
  .topbar-auth { width: 100%; padding-top: 0; justify-content: flex-end; }

  .tabs-wrap { margin: 0 -12px; padding: 0 12px; }
  .tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    min-height: 40px !important;
    min-width: auto !important;
    white-space: nowrap;
  }
  .tabs-wrap::after { width: 28px; }

  .profile-edit-row { flex-direction: column; align-items: center; }
  .profile-fields { width: 100%; min-width: 0; }
  .field-label input,
  .field-label textarea { font-size: 16px; }

  #app { padding: 14px 12px 48px 12px; }
}