/* ============================================================
   SKI LAB — APP · Sistema de diseño
   Basado en la identidad gráfica de la web (skilab_es.html)
   ============================================================ */

/* IVC v3 (julio 2026): Futura Medium (títulos) + Overpass (cuerpo) · rojo oficial #A52F35 */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;700&display=swap');

@font-face{
  font-family:'Futura';
  src:url('../fonts/futura-medium.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Futura';
  src:url('../fonts/futura-bold.woff2') format('woff2');
  font-weight:700 900; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --red:#A52F35; --red-dark:#7f2429; --red-soft:rgba(165,47,53,.14);
  --white:#ffffff; --black:#0a0a0a; --dark:#111111; --dark2:#181818; --dark3:#202020;
  --gray:#888888; --muted:rgba(255,255,255,.45); --muted2:rgba(255,255,255,.6);
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --green:#27c08a; --amber:#e0a93d; --blue:#3d8fe0;
  --yellow:#f2c230; --yellow-soft:rgba(242,194,48,.15);
  --font-d:'Futura','Century Gothic','Jost',sans-serif; --font-b:'Overpass',sans-serif;
  --radius:10px; --radius-sm:6px;
  --nav-h:64px; --header-h:60px; --maxw:720px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black); color:var(--white);
  font-family:var(--font-b); font-size:15px; line-height:1.55;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
::-webkit-scrollbar{width:0;height:0}

/* ── Fondo cinematográfico ── */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%,rgba(165,47,53,.16) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%,rgba(165,47,53,.06) 0%,transparent 60%),
    linear-gradient(180deg,#0a0a0a 0%,#0d0d0d 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── Tipografía utilitaria ── */
h1,h2,h3,h4{font-family:var(--font-d);text-transform:uppercase;line-height:1;letter-spacing:-.01em}
.eyebrow{font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
.muted{color:var(--muted)}
.title-r{color:var(--red)}
.center{text-align:center}

/* ── App shell ── */
.app{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}

/* ── Header superior ── */
.appbar{
  position:sticky;top:0;z-index:80;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 18px;background:rgba(10,10,10,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
}
.appbar .logo{height:34px;width:auto;display:block}
.appbar-title{font-family:var(--font-d);font-weight:900;font-size:19px;text-transform:uppercase;letter-spacing:.04em}
.appbar-title span{color:var(--red)}
.appbar-right{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--dark3);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:800;font-size:15px;color:#fff;text-decoration:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:var(--muted2);cursor:pointer;transition:.2s}
.icon-btn:hover{color:#fff;border-color:var(--border-strong)}

/* ── Contenido ── */
.view{padding:20px 18px 0;animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.view-head{margin-bottom:18px}
.view-head h1{font-size:30px;font-weight:900}
.view-head p{color:var(--muted);font-size:14px;margin-top:4px}

.section-label{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.section-label h2{font-size:18px;font-weight:800;letter-spacing:.02em}
.link{color:var(--red);cursor:pointer;transition:.15s}
.link:hover{text-decoration:underline;filter:brightness(1.25)}
.section-label .link{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-decoration:none;cursor:pointer}

/* ── Tarjetas ── */
.card{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:border-color .25s,transform .25s}
.card.tap:active{transform:scale(.99)}
.card.accent{border-left:3px solid var(--red)}
.card-row{display:flex;align-items:center;gap:14px}
.card h3{font-size:17px;font-weight:700;letter-spacing:.01em;margin-bottom:4px}
.card .sub{color:var(--muted);font-size:13px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ── Pills / tags / estados ── */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:30px;border:1px solid var(--border-strong);color:var(--muted2)}
.pill.red{background:var(--red-soft);border-color:rgba(165,47,53,.35);color:#d68f94}
.pill.green{background:rgba(39,192,138,.12);border-color:rgba(39,192,138,.35);color:#5fe0b4}
.pill.amber{background:rgba(224,169,61,.12);border-color:rgba(224,169,61,.35);color:#f0c878}
.pill.blue{background:rgba(61,143,224,.12);border-color:rgba(61,143,224,.35);color:#8fc0ff}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── Botones ── */
.btn{font-family:var(--font-d);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;border:none;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.2s;text-decoration:none;width:100%}
.btn svg{flex-shrink:0}
.btn-red{background:var(--red);color:#fff}
.btn-red:active{background:var(--red-dark);transform:scale(.98)}
.btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--border-strong)}
.btn-ghost:active{background:rgba(255,255,255,.1)}
.btn-sm{padding:10px 16px;font-size:12px;width:auto}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Progreso ── */
.bar{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--red),#c4555a);border-radius:8px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.ring{--p:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--red) calc(var(--p)*1%),rgba(255,255,255,.08) 0);}
.ring>i{width:50px;height:50px;border-radius:50%;background:var(--dark);display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:16px;font-style:normal}

/* ── Stats grid ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px;text-align:center}
.stat .n{font-family:var(--font-d);font-weight:900;font-size:26px;color:var(--red);line-height:1}
.stat .l{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* ── Formularios ── */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px}
.input,select.input,textarea.input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:13px 14px;color:#fff;font-family:var(--font-b);font-size:15px;transition:.2s;
}
.input:focus,textarea.input:focus,select.input:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.06)}
textarea.input{resize:vertical;min-height:90px;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
/* opciones del desplegable: fondo blanco y texto negro (legibles) */
select.input option{background:#ffffff;color:#111111}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Bottom nav ── */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--maxw);z-index:90;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;background:rgba(12,12,12,.92);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--muted);background:none;border:none;transition:color .2s;position:relative}
.tab svg{width:23px;height:23px}
.tab span{font-family:var(--font-d);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tab.active{color:var(--red)}
.tab.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:2px;background:var(--red);border-radius:2px}

/* ── Video / upload ── */
/* El reproductor nunca debe pasar del alto de la pantalla: si no, hay que
   hacer scroll para llegar al botón de play. Limitamos el ANCHO en función
   del alto disponible (descontando cabecera, título y barra de navegación),
   así el 16:9 resultante siempre cabe y queda centrado. */
.video-box{position:relative;width:100%;aspect-ratio:16/9;
  /* --vfit lo calcula fitLessonVideo() midiendo el hueco real que queda
     entre el título y la barra inferior. El calc de abajo es la reserva
     por si el JS aún no ha corrido. */
  --vfit:calc(100dvh - 215px);
  max-height:var(--vfit);
  max-width:calc(var(--vfit) * 16 / 9);
  margin-left:auto;margin-right:auto;
  border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#0a0a0a,#1a0707);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
/* contain, no cover: si el vídeo no es 16:9 exacto preferimos ver las
   cuatro esquinas con bandas antes que recortar la imagen. */
.video-box video{width:100%;height:100%;object-fit:contain;background:#000}

/* Cabecera de la clase:
   1ª línea → volver al curso (siempre)
   2ª línea → clase anterior a la izquierda / siguiente a la derecha */
.lesson-crumb{display:block;font-size:13px;margin-bottom:6px;opacity:.85}
.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;min-height:20px}
.lesson-top .link{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.lesson-top .link.nx{text-align:right;font-weight:600}

/* Móvil en horizontal: la cabecera se come toda la pantalla, la encogemos
   para que al vídeo le quede sitio. */
@media (max-height:520px){
  .appbar{height:48px}
  .view{padding-top:10px}
  .lesson-top{margin-bottom:2px}
  .lesson-top .link{font-size:12.5px}
  .view-head h1{font-size:17px!important}
}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:30px 18px;text-align:center;cursor:pointer;transition:.2s;background:rgba(255,255,255,.02)}
.dropzone:hover{border-color:var(--red);background:var(--red-soft)}
.dropzone svg{color:var(--red);margin-bottom:10px}
.dropzone .t{font-family:var(--font-d);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:15px}
.dropzone .s{color:var(--muted);font-size:12px;margin-top:4px}

/* ── Listas de ejercicios ── */
.ex{display:flex;align-items:center;gap:14px;padding:14px;background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px}
.ex-num{flex-shrink:0;width:34px;height:34px;border-radius:8px;background:var(--red-soft);border:1px solid rgba(165,47,53,.3);display:grid;place-items:center;font-family:var(--font-d);font-weight:800;color:#d68f94;font-size:15px}
.ex-body{flex:1;min-width:0}
.ex-body .n{font-weight:600;font-size:15px;margin-bottom:2px}
.ex-body .m{color:var(--muted);font-size:12.5px}
.ex-check{flex-shrink:0;width:26px;height:26px;border-radius:7px;border:1.5px solid var(--border-strong);cursor:pointer;display:grid;place-items:center;color:transparent;transition:.2s}
.ex-check.done{background:var(--green);border-color:var(--green);color:#fff}

/* ── Días tabs (físico) ── */
.daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scrollbar-width:none}
.daystrip::-webkit-scrollbar{display:none}
.daypill{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;padding:10px 6px;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer;transition:.2s}
.daypill .d{font-family:var(--font-d);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.daypill .n{font-family:var(--font-d);font-weight:900;font-size:18px}
.daypill.active{background:var(--red);border-color:var(--red)}
.daypill.active .d,.daypill.active .n{color:#fff}
.daypill.rest{opacity:.55}

/* ── Sub-tabs (segment) ── */
.segment{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:30px;padding:4px;margin-bottom:18px}
.segment button{flex:1;border:none;background:none;color:var(--muted);font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:9px 8px;border-radius:30px;cursor:pointer;transition:.2s}
.segment button.active{background:var(--red);color:#fff}

/* ── Empty state ── */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty svg{color:var(--border-strong);margin-bottom:12px}
.empty .t{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);font-size:16px}

/* ── Modal / sheet ── */
.sheet-bg{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center}
.sheet-bg.open{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:100%;max-width:var(--maxw);background:var(--dark);border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid var(--border);border-bottom:none;padding:8px 18px calc(24px + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto;animation:sheetUp .3s cubic-bezier(.25,.46,.45,.94)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grab{width:42px;height:4px;border-radius:4px;background:var(--border-strong);margin:8px auto 16px}
.sheet-close{position:sticky;top:2px;float:right;z-index:6;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);background:var(--dark3);color:var(--muted2);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:-2px -4px 0 8px}
.sheet-close:hover{color:#fff;border-color:var(--red);background:var(--red-soft)}
.sheet h2{font-size:22px;font-weight:900;margin-bottom:4px}

/* ── Toast ── */
.toast{position:fixed;bottom:calc(var(--nav-h) + 20px);left:50%;transform:translateX(-50%) translateY(20px);z-index:300;background:var(--dark2);border:1px solid var(--border-strong);border-left:3px solid var(--green);border-radius:var(--radius-sm);padding:13px 18px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-left-color:var(--red)}

/* ── Demo banner ── */
.demo-banner{background:rgba(224,169,61,.1);border-bottom:1px solid rgba(224,169,61,.25);color:#f0c878;font-size:11.5px;text-align:center;padding:6px 14px;font-weight:600;letter-spacing:.02em}

/* ── Selector de idioma (banderas, estilo web) ── */
.lang-flags{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:40px;padding:3px 4px}
.lang-flag-btn{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:30px;cursor:pointer;border:none;background:none;transition:background .2s,opacity .2s;opacity:.4;font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.lang-flag-btn svg{width:18px;height:13px;border-radius:2px;flex-shrink:0;display:block}
.lang-flag-btn:hover{opacity:.8}
.lang-flag-btn.active{background:rgba(255,255,255,.1);opacity:1}
#langSel{position:fixed;top:16px;right:16px;z-index:120}

/* ── Badge de avisos ── */
.noti-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--font-d);font-weight:800;font-size:10px;display:flex;align-items:center;justify-content:center;border:2px solid var(--black)}
.noti-item{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px}
.noti-item.unread{border-left:3px solid var(--red);background:var(--red-soft)}

/* ── Helpers ── */
.hidden{display:none!important}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.divider{height:1px;background:var(--border);margin:18px 0}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ── Login ── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:380px}
/* Logo maestro IVC (negro sobre blanco) → versión en negativo para fondo oscuro */
.auth-logo{height:90px;display:block;margin:0 auto 16px;filter:invert(1)}
.auth-card h1{font-size:30px;font-weight:900;text-align:center;margin-bottom:6px}
.auth-card .tagline{text-align:center;color:var(--muted);margin-bottom:28px;font-size:14px}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.auth-switch a{color:var(--red);font-weight:600;cursor:pointer;text-decoration:none}
.role-toggle{display:flex;gap:10px;margin-bottom:22px}
.role-toggle .ro{flex:1;text-align:center;padding:14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--muted);transition:.2s}
.role-toggle .ro.active{border-color:var(--red);background:var(--red-soft);color:#fff}

@media(min-width:600px){
  .app{border-left:1px solid var(--border);border-right:1px solid var(--border);min-height:100vh}
}

/* ── Escritorio: ocupar toda la pantalla (borde a borde) ── */
@media(min-width:1000px){
  :root{ --maxw:100%; }               /* app, tabbar y chat a ancho completo */
  .view{padding:24px 40px 0}
  /* Listas de tarjetas que se adaptan al ancho (más columnas cuanto más ancha la pantalla) */
  #content .stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
  #content .stack .card{margin:0}
  #course-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
  #course-list .course-card{margin-bottom:0}
  #content .month-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  #content .ex-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  /* Los modales/ventanas no deben ensancharse: se quedan centrados y cómodos */
  .sheet{max-width:620px;margin:0 auto;border-radius:18px}
}

/* ── Temporada: grid de meses ── */
.month-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.month-card{background:var(--red);border-radius:14px;padding:22px 14px 18px;cursor:pointer;text-align:center;border:2px solid transparent;transition:opacity .15s,border-color .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.month-card:not(.selected){opacity:.72}
.month-card.current-month{border-color:rgba(255,255,255,.7);opacity:1}
.month-card.selected{border-color:rgba(255,255,255,.5);opacity:1}
.month-card-name{font-family:var(--font-d);font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.month-card-sub{font-size:11px;color:rgba(255,255,255,.7);margin-top:6px;font-family:var(--font-b);font-weight:500}

/* ── Semanas ── */
.week-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.week-btn{display:flex;align-items:center;width:100%;padding:13px 16px;background:var(--dark2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:var(--font-d);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;transition:background .15s,border-color .15s;text-align:left;gap:8px}
.week-btn .wk-sub{font-size:11px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--font-b);margin-left:4px}
.week-btn.current-wk{border-left:3px solid var(--red)}
.week-btn.active{background:var(--red-soft);border-color:rgba(165,47,53,.5)}
.week-btn:hover{background:rgba(255,255,255,.06)}
.week-btn .wk-count{margin-left:auto;flex-shrink:0;background:rgba(255,255,255,.12);border-radius:20px;font-size:10px;padding:2px 8px;font-family:var(--font-b);font-weight:600;text-transform:none;letter-spacing:0}

/* ── Slots de ejercicios (grid 2 col) ── */
.ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.ex-slot{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:5px;min-height:120px}
.ex-slot-title{font-family:var(--font-d);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.3}
.ex-slot-status{font-size:11px;color:var(--muted);flex:1}
.ex-slot .btn{font-size:10px;padding:4px 8px;min-height:28px}

/* ── Chat ── */
/* Layout 2 paneles tipo Discord: fijo entre appbar y tabbar */
.chat-layout{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);top:var(--header-h);bottom:var(--nav-h);display:flex;background:var(--black);border-left:1px solid var(--border);border-right:1px solid var(--border);overflow:hidden}
.chat-sidebar{width:230px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:12px 8px;background:rgba(255,255,255,.015)}
.chat-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 10px;border-bottom:1px solid var(--border);margin-bottom:8px}
.chat-sidebar-head h2{font-size:17px;font-weight:900}
.chat-side-cat{font-family:var(--font-d);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 6px 6px}
.chat-ch{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--muted2);transition:background .12s,color .12s;margin-bottom:1px}
.chat-ch:hover{background:rgba(255,255,255,.05);color:#fff}
.chat-ch.active{background:var(--red-soft);color:#fff}
.chat-ch .ch-ic{flex-shrink:0;font-size:16px;width:20px;text-align:center}
.chat-ch .ch-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px;font-weight:600}
.chat-ch.unread .ch-name{color:#fff;font-weight:700}
.chat-unread{margin-left:auto;flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--font-d);font-weight:800;font-size:10px;display:grid;place-items:center}
/* Panel principal */
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-main-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.chat-main-head h2{font-size:18px;font-weight:800}
.chat-main-head .sub{font-size:12px;color:var(--muted)}
.chat-back{cursor:pointer;color:var(--muted2);display:none;flex-shrink:0}
.chat-empty{flex:1;display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px}
.chat-scroll{flex:1;overflow-y:auto;padding:14px 14px;display:flex;flex-direction:column;gap:9px}
.chat-msg{position:relative;max-width:88%;padding:9px 13px;border-radius:14px;background:var(--dark2);border:1px solid var(--border);align-self:flex-start}
.chat-msg .del{position:absolute;top:3px;right:6px;font-size:13px;line-height:1;color:var(--muted);cursor:pointer;opacity:0;background:none;border:none;padding:2px 4px;transition:opacity .15s,color .15s}
.chat-msg:hover .del{opacity:.65}
.chat-msg .del:hover{color:var(--red);opacity:1}
@media(hover:none){.chat-msg .del{opacity:.45}}
.chat-msg.mine{align-self:flex-end;background:var(--red-soft);border-color:rgba(165,47,53,.35)}
.chat-msg .who{font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.chat-msg.mine .who{color:#d68f94}
.chat-msg .txt{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.chat-msg .when{font-size:10px;color:var(--muted);margin-top:4px;text-align:right}
.chat-compose{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0}
.chat-compose textarea{flex:1;min-height:42px;max-height:110px;resize:none}
.chat-readonly{margin:10px 12px;text-align:center;padding:12px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03);border:1px dashed var(--border-strong);border-radius:10px}
.tab-badge{position:absolute;top:6px;right:50%;transform:translateX(14px);min-width:8px;height:8px;border-radius:5px;background:var(--red);border:2px solid var(--black)}
/* Responsive: en móvil un panel cada vez */
@media(max-width:599px){
  .chat-sidebar{width:100%}
  .chat-layout.has-active .chat-sidebar{display:none}
  .chat-layout:not(.has-active) .chat-main{display:none}
  .chat-back{display:inline-flex}
}

/* ── Valoración (estrellas) ── */
.stars{display:flex;gap:6px;font-size:30px;line-height:1;user-select:none}
.star{color:var(--border-strong);cursor:pointer;transition:color .12s,transform .1s}
.star.on{color:#f0c878}
.star:hover{transform:scale(1.12)}
.stars-static{display:inline-flex;gap:2px;font-size:14px}
.stars-static .star{cursor:default;font-size:14px}

/* ── Dashboard superadmin ── */
.coach-metric-card{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}
.coach-metric-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.metric-tile{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:12px}
.metric-tile .mv{font-family:var(--font-d);font-size:26px;font-weight:900;line-height:1}
.metric-tile .ml{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.metric-tile.good .mv{color:var(--green)} .metric-tile.warn .mv{color:var(--amber)} .metric-tile.bad .mv{color:var(--red)}
.metric-tile.tap{cursor:pointer;transition:.15s}
.metric-tile.tap:hover{background:rgba(255,255,255,.06)}
.metric-tile.sel{border-color:var(--red);background:var(--red-soft)}
.metric-tile.sel .ml{color:#d68f94}

/* ── Puntuación del coach (0-100) ── */
.score-row{margin-bottom:14px}
.score-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.score-lbl{font-size:14px;color:var(--muted2)}
.score-val{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--red);min-width:44px;text-align:right}
.score-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:rgba(255,255,255,.12);outline:none}
.score-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--red);border:2px solid #fff;cursor:pointer}
.score-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);border:2px solid #fff;cursor:pointer}
.score-range:focus-visible{box-shadow:0 0 0 3px var(--red-soft)}

/* ── Pentágono de rendimiento + ranking (alumno) ── */
.penta-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.rank-row.me{border-color:var(--red);background:var(--red-soft)}
.rank-pos{font-family:var(--font-d);font-weight:900;font-size:17px;color:var(--muted);width:28px;text-align:center;flex-shrink:0}
.rank-row.me .rank-pos{color:var(--red)}
.rank-nm{flex:1;font-size:14.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-pts{font-family:var(--font-d);font-weight:900;font-size:16px;color:var(--ink,#fff)}
.rank-pts small{font-family:var(--font-b);font-weight:400;font-size:11px;color:var(--muted);margin-left:3px}

/* ── Selector de idioma del curso (independiente del idioma de la app) ── */
.clang{display:flex;align-items:center;gap:8px;margin:-6px 0 16px;flex-wrap:wrap}
.clang-lbl{font-size:12.5px;color:var(--muted);margin-right:2px}
.clang-btn{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.08em;padding:6px 12px;border-radius:20px;
  border:1px solid var(--border-strong);background:rgba(255,255,255,.04);color:var(--muted2);cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:7px}
/* Bandera dibujada (los emojis de bandera no se ven en Windows) */
.flag{width:18px;height:12.6px;border-radius:2px;display:block;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.section-label h2 .flag{display:inline-block;vertical-align:-1px;margin-right:2px}
.clang-btn:hover{color:#fff;border-color:var(--muted)}
.clang-btn.on{background:var(--red);border-color:var(--red);color:#fff}
.clang-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ── Filtro de alumnos por coach ── */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filt{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-d);font-size:11.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 13px;border-radius:30px;
  border:1px solid var(--border-strong);background:rgba(255,255,255,.03);color:var(--muted2);
  cursor:pointer;transition:.18s;white-space:nowrap}
.filt:hover{color:#fff;border-color:var(--muted)}
.filt span{font-size:11px;padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.09);color:var(--muted2)}
.filt.on{background:var(--red);border-color:var(--red);color:#fff}
.filt.on span{background:rgba(0,0,0,.28);color:#fff}
.filt.warn{border-color:rgba(224,169,61,.45);color:#f0c878}
.filt.warn span{background:rgba(224,169,61,.18);color:#f0c878}
.filt.warn.on{background:var(--amber);border-color:var(--amber);color:#141414}
.filt.warn.on span{background:rgba(0,0,0,.22);color:#141414}
.sub.sin-coach{color:#f0c878}

/* ── Análisis biomecánico: color propio, distinto de general/individual ── */
.pill.bio{background:var(--yellow-soft);border-color:rgba(242,194,48,.45);color:#f2c230}
.card.accent-bio{border-left:3px solid var(--yellow)}
.bio-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bio-slot{position:relative;padding:18px 12px 16px}
.bio-slot .t{font-size:13.5px;margin-top:6px}
.bio-slot .s{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bio-slot.lleno{border-style:solid;border-color:rgba(242,194,48,.45);background:var(--yellow-soft)}
.bio-slot.lleno svg{color:#f2c230}
.bio-slot:hover{border-color:var(--yellow)}
.bio-vid-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);
  cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.bio-vid-x:hover{color:#e08a8f}
@media (max-width:420px){ .bio-slots{grid-template-columns:1fr} }

.bio-tips{display:flex;flex-direction:column;gap:14px}
.bio-tips>div{display:flex;gap:12px;align-items:flex-start}
.bio-tips>div>div{font-size:12.5px;color:var(--muted);line-height:1.5}
.bio-tips b{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--yellow-soft);
  color:#f2c230;display:grid;place-items:center;font-size:11px;font-family:var(--font-d);font-weight:700;margin-top:1px}
.bio-tips strong{display:block;color:#fff;font-weight:700;font-size:13.5px;margin-bottom:2px;letter-spacing:.01em}
.bio-tips-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--muted2)}
#bio-zone:hover{border-color:var(--yellow);background:var(--yellow-soft)}

/* ── Análisis biomecánico: rejilla de ángulos por fase de curva ── */
.bio-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bio-top .field{margin:0}
.bio-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:6px;align-items:center;margin-top:12px}
.bio-h{font-family:var(--font-d);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:2px}
.bio-lbl{font-size:12.5px;color:var(--muted2);line-height:1.5}
.bio-lbl i{font-style:normal;color:var(--muted);font-size:11px}
.bio-in{padding:9px 8px!important;font-size:13px;text-align:center}
/* Variante de solo lectura, para el alumno */
.bio-grid.read .bio-v{font-family:var(--font-d);font-weight:700;font-size:14px;text-align:center;
  padding:9px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(255,255,255,.03)}
/* El estandar de Albert, debajo del dato del alumno. Pequeno y apagado:
   es contexto, no compite con su propio numero. */
/* El estandar de Albert, debajo del dato del alumno. Va en el ROJO
   CORPORATIVO (--red): decision de Marc, es identidad de marca.
   Ese rojo sobre fondo negro tiene poco contraste para un texto tan
   pequeno, asi que se compensa con mas cuerpo y mas peso. Si algun dia
   se ve flojo en movil a pleno sol, la salida es subir el tamano, no
   cambiar el color. */
.bio-grid.read .bio-v .bio-ref{display:block;font-family:var(--font-b);font-weight:700;
  font-size:11px;line-height:1.5;margin-top:3px;color:var(--red);letter-spacing:0}
.bio-grid.read .bio-v.up{color:var(--green);border-color:rgba(39,192,138,.3);background:rgba(39,192,138,.08)}
.bio-grid.read .bio-v.down{color:#e08a8f;border-color:rgba(165,47,53,.3);background:var(--red-soft)}
/* ── RANKING ── */
/* Selector de tabla (Ejercicios / IQ) */
.seg{display:flex;gap:4px;padding:4px;border-radius:30px;background:rgba(255,255,255,.05);
  border:1px solid var(--border)}
.seg button{flex:1;font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:11px 8px;border:0;border-radius:26px;background:transparent;
  color:var(--muted);cursor:pointer;transition:.2s}
.seg button.on{background:var(--red);color:#fff}
.seg button:not(.on):hover{color:#fff}

/* Tarjeta de tu posición */
.rk-hero{border:1px solid var(--red);border-radius:var(--radius);padding:18px;margin-bottom:20px;
  background:linear-gradient(160deg,var(--red-soft),rgba(255,255,255,.02))}
.rk-hero-top{display:flex;justify-content:space-between;gap:16px}
.rk-hero-r{text-align:right}
.rk-pos{font-family:var(--font-d);font-weight:900;font-size:36px;line-height:1.05;letter-spacing:-.02em}
.rk-val{font-family:var(--font-d);font-weight:900;font-size:36px;line-height:1.05;color:var(--red)}
.rk-val small{font-size:14px;font-weight:700;margin-left:3px;color:var(--muted2)}
.rk-delta{font-size:12px;color:var(--muted);margin-top:5px}
.rk-delta.up{color:var(--green)}
.rk-delta.down{color:#e08a8f}
.rk-bar-txt{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);
  margin:16px 0 6px;flex-wrap:wrap}
.rk-bar{height:7px;border-radius:7px;background:rgba(255,255,255,.09);overflow:hidden}
.rk-bar>i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--red),#c4555a)}

/* Podio */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;margin-bottom:6px}
.pod{position:relative;border-radius:14px 14px var(--radius-sm) var(--radius-sm);padding:34px 8px 14px;
  text-align:center;border:1px solid var(--border);background:rgba(255,255,255,.035)}
.pod1{padding-top:42px;background:linear-gradient(180deg,rgba(165,47,53,.32),rgba(165,47,53,.10));
  border-color:var(--red)}
.pod2{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03))}
.pod3{background:linear-gradient(180deg,rgba(224,169,61,.20),rgba(224,169,61,.05));
  border-color:rgba(224,169,61,.35)}
.pod.me{outline:2px solid var(--red);outline-offset:2px}
.pod-av{position:absolute;top:-19px;left:50%;transform:translateX(-50%);width:46px;height:46px;
  border-radius:50%;background:var(--dark3);border:2px solid var(--border-strong);
  display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:17px}
.pod1 .pod-av{width:56px;height:56px;top:-24px;font-size:20px;border-color:var(--red)}
.pod-n{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:21px;height:21px;
  border-radius:50%;background:var(--dark);border:1px solid var(--border-strong);
  display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:11px}
.pod1 .pod-n{top:30px;background:var(--red);border-color:var(--red)}
.pod-nm{font-family:var(--font-d);font-weight:700;font-size:13px;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-v{font-size:12.5px;color:var(--muted2);margin-top:3px}
.pod-v small{font-size:10px;color:var(--muted)}
@media (max-width:380px){ .pod-nm{font-size:11.5px} .pod{padding-left:4px;padding-right:4px} }

/* ── IQ técnico ── */
.iq-box{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--radius);
  border:1px solid var(--border-strong);background:rgba(255,255,255,.03);margin-bottom:14px}
.iq-box.mal{border-color:rgba(224,169,61,.4);background:rgba(224,169,61,.06)}
.iq-num{font-family:var(--font-d);font-weight:900;font-size:46px;line-height:1;letter-spacing:-.02em;flex-shrink:0}
.iq-box.mal .iq-num{color:var(--muted)}
.iq-txt{min-width:0}
.iq-txt b{display:block;font-family:var(--font-d);font-size:16px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.iq-txt i{display:block;font-style:normal;font-size:12px;color:#f0c878;line-height:1.55;margin-top:5px}
.iq-det{margin-bottom:14px}
.iq-det summary{font-size:12.5px;color:var(--muted);cursor:pointer;padding:4px 0}
.iq-det summary:hover{color:#fff}

/* Comparación de IQ entre dos meses */
.iq-cmp{display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:var(--radius);
  border:1px solid var(--border-strong);background:rgba(255,255,255,.03);margin-bottom:14px}
.iq-cmp-num{font-family:var(--font-d);font-weight:900;font-size:40px;line-height:1;flex-shrink:0}
.iq-cmp.sube{border-color:rgba(39,192,138,.4);background:rgba(39,192,138,.07)}
.iq-cmp.sube .iq-cmp-num{color:var(--green)}
.iq-cmp.baja{border-color:rgba(165,47,53,.4);background:var(--red-soft)}
.iq-cmp.baja .iq-cmp-num{color:#e08a8f}
.iq-cmp.igual .iq-cmp-num{color:var(--muted2)}
.iq-cmp.gris{border-style:dashed}
.iq-cmp-txt{min-width:0}
.iq-cmp-txt b{display:block;font-family:var(--font-d);font-size:16px;font-weight:800;margin-top:3px}
.iq-cmp-txt i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px}
.iq-cmp.gris .iq-cmp-txt{font-size:12.5px;color:var(--muted);line-height:1.5}

/* El IQ dentro de la miniatura de la galería */
.prog-iq{display:flex;align-items:baseline;gap:7px}
.prog-iq b{font-family:var(--font-d);font-weight:900;font-size:22px;line-height:1}
.prog-iq.mal b{color:var(--muted)}
.prog-iq span{font-family:var(--font-d);font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Leyenda de bandas en la ficha del IQ */
.iq-bandas{display:flex;flex-direction:column;gap:6px}
.iq-bandas>div{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(255,255,255,.025)}
.iq-bandas i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.iq-bandas b{font-family:var(--font-d);font-size:12.5px;width:42px;flex-shrink:0}
.iq-bandas span{color:var(--muted2)}

/* Botón de información de cada métrica + su ficha con fotos */
.bio-lbl{display:flex;align-items:center;gap:6px}
/* El (i) en rojo de marca: invita a tocarlo. Antes pasaba desapercibido
   en gris y casi nadie abria la ficha con las fotos de cada metrica. */
.bio-i{flex-shrink:0;width:17px;height:17px;border-radius:50%;border:1px solid rgba(165,47,53,.5);
  background:var(--red-soft);color:#d68f94;font-family:var(--font-d);font-size:10px;
  font-weight:700;line-height:1;cursor:pointer;padding:0;transition:.18s}
.bio-i:hover{background:var(--red);border-color:var(--red);color:#fff}
.bio-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bio-foto{margin:0}
.bio-foto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:#000;display:block}
.bio-foto figcaption{font-family:var(--font-d);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-top:5px}
@media (max-width:420px){ .bio-fotos{gap:5px} .bio-foto figcaption{font-size:9px;letter-spacing:.06em} }

.bio-read{display:flex;flex-direction:column;gap:6px}
.bio-read>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(255,255,255,.025)}
.bio-read span{font-size:12.5px;color:var(--muted);flex:1;min-width:120px}
.bio-read b{font-family:var(--font-d);font-size:14px;font-weight:700}
.bio-read i{font-style:normal;font-size:11.5px;color:var(--muted);width:100%}
@media (max-width:420px){
  .bio-grid{grid-template-columns:1.2fr repeat(3,1fr);gap:4px}
  .bio-lbl{font-size:11.5px}
  .bio-in,.bio-grid.read .bio-v{font-size:12px;padding:7px 3px!important}
}

/* ── Fin de clase: aviso + siguiente ── */
.lesson-end{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:16px 18px;
  border:1px solid var(--red);background:var(--red-soft);border-radius:var(--radius);
  animation:endIn .35s ease}
@keyframes endIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .lesson-end{animation:none} }
.lesson-end-txt{flex:1;min-width:180px}
.lesson-end-txt h3{font-size:16px;font-weight:700;margin-top:4px;line-height:1.3}
.lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
.lesson-nav .btn{flex:0 1 auto}

/* ── Curso ── */
/* ── Progreso (galería + comparador) ── */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.prog-item{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.prog-item:hover{border-color:var(--border-strong)}
.prog-item.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.prog-thumb{position:relative;background:#000;height:120px}
.prog-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.prog-cmp{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(10,10,10,.75);color:#fff;font-size:14px;cursor:pointer;line-height:1}
.prog-cmp.on{background:var(--red);border-color:var(--red)}
.prog-meta{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.prog-title{font-size:12.5px;font-weight:600;line-height:1.5}
.prog-bar{position:sticky;bottom:8px;display:flex;justify-content:center;margin-top:14px;z-index:5}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.course-card{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;margin-bottom:12px;transition:border-color .2s}
.course-card.locked{opacity:.72}
.course-card.locked:hover{opacity:.9;border-color:rgba(224,169,61,.4)}
.course-card:hover{border-color:var(--border-strong)}
.course-top{min-height:86px;background:linear-gradient(135deg,var(--red),var(--red-dark));display:flex;align-items:flex-end;padding:14px 16px}
.course-top h3{font-family:var(--font-d);font-size:21px;font-weight:900;text-transform:uppercase;color:#fff;line-height:1.05;text-shadow:0 1px 5px rgba(0,0,0,.35)}
.course-body{padding:12px 16px}
.course-meta{font-size:12.5px;color:var(--muted);margin-bottom:9px}
/* Pie del curso bloqueado: el precio manda, el aviso acompaña */
.course-lock{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12.5px;color:#f0c878;line-height:1.5}
.course-precio{flex-shrink:0;font-family:var(--font-d);font-size:17px;color:#fff;letter-spacing:-.01em;
  background:var(--red);border-radius:5px;padding:3px 10px}
/* Tarjeta del Full Pass: misma forma que un curso, pero con el borde rojo
   para que se lea como la opción de arriba y no como uno más de la fila. */
.course-card.pack{border-color:rgba(165,47,53,.55);background:rgba(165,47,53,.05)}
.course-card.pack:hover{border-color:var(--red)}
.pack-lista{list-style:none;margin:0 0 4px;padding:0}
.pack-lista li{position:relative;padding-left:16px;font-size:12.5px;color:var(--muted2);line-height:1.5;margin-bottom:3px}
.pack-lista li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red)}
/* Variante compacta de .pill para ir pegada dentro de una línea de texto */
.pill-inline{font-size:10px;font-weight:700;letter-spacing:.06em;padding:1px 7px;margin-left:5px;border-radius:20px;color:var(--red);border-color:rgba(165,47,53,.4);vertical-align:1px}
.progress-track{height:7px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.progress-fill{height:100%;background:var(--green);border-radius:6px;transition:width .4s}
.mod-head{font-family:var(--font-d);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.mod-head .n{background:var(--red-soft);color:#d68f94;border-radius:6px;font-size:11px;padding:1px 7px;font-family:var(--font-b);font-weight:700}
.lesson-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:10px;cursor:pointer;margin-bottom:8px;transition:background .15s}
.lesson-row:hover{background:rgba(255,255,255,.06)}
.lesson-ic{width:34px;height:34px;border-radius:9px;background:var(--red-soft);color:#d68f94;display:grid;place-items:center;flex-shrink:0}
.lesson-row.done .lesson-ic{background:rgba(39,192,138,.15);color:var(--green)}
.lesson-check{margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;color:transparent;font-size:12px}
.lesson-row.done .lesson-check{background:var(--green);border-color:var(--green);color:#fff}

/* ── Nw exercises list (coach) ── */
.nw-ex-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;font-size:13px}
.nw-ex-item .nw-del{margin-left:auto;flex-shrink:0;cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:4px;border:none;background:none;color:rgba(165,47,53,.7)}
.nw-ex-item .nw-del:hover{color:var(--red)}

/* ── LOGROS ──────────────────────────────────────────────
   Cuadrados grises cuando estan bloqueados y en color al conseguirlos.
   Los iconos son provisionales: van a sustituirse por las imagenes que
   haga Marc, una por nivel (el 1 basico y el 4 el mas trabajado). */
.lg-hero{display:flex;align-items:center;gap:16px;border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;margin-bottom:14px;background:rgba(255,255,255,.02)}
.lg-anillo{position:relative;width:78px;height:78px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;align-content:center;
  background:conic-gradient(var(--anillo) calc(var(--p,0)*1%), rgba(255,255,255,.07) 0);
  box-shadow:inset 0 0 0 5px var(--black)}
.lg-anillo::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--black)}
.lg-anillo span,.lg-anillo i{position:relative;z-index:1}
.lg-anillo span{font-family:var(--font-d);font-size:22px;font-weight:800;line-height:1}
.lg-anillo i{font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.1em}
.lg-hero b{display:block;font-family:var(--font-d);font-size:19px;text-transform:uppercase;line-height:1.1;margin:2px 0 4px}
.lg-hero i{font-style:normal;font-size:12.5px;color:var(--muted)}

.lg-cat{border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.lg-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.lg-cab b{display:block;font-family:var(--font-d);font-size:14.5px;text-transform:uppercase;letter-spacing:.02em}
.lg-cab i{font-style:normal;display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.lg-n{flex-shrink:0;font-family:var(--font-d);font-size:12px;font-weight:700;color:var(--muted);
  border:1px solid var(--border);border-radius:20px;padding:3px 9px}

/* Tope de 72px: sin el, en pantalla ancha cada cuadrado se comia un cuarto
   de los 720px del contenedor y quedaban enormes. */
.lg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,72px));gap:8px}
.lg-sq{aspect-ratio:1;border:1px solid var(--border);border-radius:11px;padding:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-align:center;background:rgba(255,255,255,.02);transition:.2s}
.lg-sq .lg-ic{color:var(--muted);opacity:.45;line-height:0}
.lg-sq b{font-family:var(--font-d);font-size:12px;line-height:1;color:var(--muted2)}
/* conseguido */
.lg-sq.on{border-color:rgba(165,47,53,.55);background:var(--red-soft)}
.lg-sq.on .lg-ic{color:var(--red);opacity:1}
.lg-sq.on b{color:#fff}

.lg-falta{font-size:12px;color:var(--muted);margin-top:9px}
@media(max-width:340px){ .lg-grid{grid-template-columns:repeat(4,minmax(0,64px));gap:6px} }

/* Aro de rango alrededor de la foto de perfil. Solo aparece a partir de
   Bronce: sin logros no se pinta nada, que un aro apagado no premia. */
.avatar.con-rango{box-shadow:0 0 0 2px var(--black), 0 0 0 4px var(--rango,var(--muted))}

/* ============================================================
   COMUNIDAD
   ============================================================ */

/* Interruptor de ajustes */
.com-sw{width:44px;height:26px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid var(--border-strong);flex-shrink:0;position:relative;transition:.2s}
.com-sw i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.com-sw.on{background:var(--red);border-color:var(--red)}
.com-sw.on i{left:20px}

/* Pestañas internas: Feed · Explora · Tú
   Van FIJAS justo encima de la barra de abajo. Si se quedaran arriba del
   todo, para cambiar de solapa habría que volver a subir todo el feed. */
:root{--com-h:58px}
.com-tabs{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  width:100%;max-width:var(--maxw);z-index:89;
  padding:8px 16px;display:flex;
  background:rgba(12,12,12,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
}
.com-tabs-in{display:flex;gap:6px;flex:1;background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius);padding:4px}
.com-tabs button{flex:1;min-width:0;background:none;border:none;color:var(--muted2);font-family:var(--font-d);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:9px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:.18s;white-space:nowrap}
.com-tabs button.active{background:var(--red);color:#fff}
/* Hueco para que la última publicación no quede debajo de la barra fija */
.view-comunidad{padding-bottom:var(--com-h)}

/* Publicación */
.com-post{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.com-post-head{display:flex;align-items:center;gap:10px;padding:9px 12px}
.com-post-head h4{font-family:var(--font-d);font-size:14px;font-weight:800;line-height:1.2}
.com-post-head .sub{font-size:11.5px;color:var(--muted)}
/* El medio de una publicacion.
   Marco de proporcion FIJA, como Instagram: todas las publicaciones miden
   lo mismo y un video vertical no se come la pantalla. La clave es
   `cover`: recorta un poco en vez de dejar dos bandas negras enormes a los
   lados, que es lo que hacia que un video de movil pareciera un cartel.
   Al abrir la publicacion (tocandola) se ve entera, sin recortar. */
/* CUADRADO en movil. La razon es de pantalla, no de gusto: con 4/5 o 9/16
   el bloque de me gusta y comentarios quedaba por debajo del borde y habia
   que hacer scroll para ver si a tu foto le habia gustado a alguien. Con
   1:1 entra la publicacion entera de una sola vez. */
.com-media{width:100%;display:block;background:#000;aspect-ratio:1/1;object-fit:cover;max-height:43vh}
/* En un movil con la barra del navegador a la vista quedan unos 660 px, y
   un cuadrado de 337 dejaba los me gusta por debajo del borde. El limite
   por altura recorta el cuadrado solo en las pantallas cortas; en las
   normales no se nota. dvh mide la pantalla DE VERDAD; vh en el movil mide
   como si la barra del navegador estuviera escondida, y se pasa. */
@supports (height:1dvh){ .com-media{max-height:43dvh} }
@media(min-width:1000px){ .com-media{aspect-ratio:auto;height:380px;max-height:none} }

/* Un video se ve en formato de movil (9:16, que es como se graba) y SIN los
   controles del navegador: esa barra de play y avance es fea y tapa el
   video. Un toque lo abre a pantalla completa, que es donde se ve bien. */
.com-video{position:relative;cursor:pointer;background:#000}
.com-video .com-media{aspect-ratio:1/1;object-fit:cover}
/* En ordenador el video NO va en 9:16: 470 px de ancho por 835 de alto es
   un poste. Se le da el mismo marco que a las fotos y se recorta. Para
   verlo entero esta el visor a pantalla completa, que es de donde se
   disfruta un video en un monitor. */
@media(min-width:1000px){ .com-video .com-media{aspect-ratio:auto;height:380px;object-fit:cover} }
.com-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.7))}
.sheet .com-video .com-media{aspect-ratio:auto;height:auto;max-height:66vh;object-fit:contain}
/* Abierta a pantalla completa si se ve entera */
.sheet .com-media{aspect-ratio:auto;height:auto;max-height:66vh;object-fit:contain}
.sheet .com-post{margin-bottom:0;border:none;background:none}
.com-post-body{padding:8px 12px 12px}
.com-acc{display:flex;align-items:center;gap:18px;padding:9px 12px 2px}
.com-acc button{background:none;border:none;color:var(--muted2);display:flex;align-items:center;gap:6px;font-family:var(--font-b);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.com-acc button.on{color:var(--red)}
.com-acc button.on svg{fill:var(--red)}
.com-lugar{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);margin-top:2px}

/* Comentarios */
.com-cmt{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.com-cmt:last-child{border-bottom:none}
.com-cmt-txt{flex:1;font-size:13.5px;line-height:1.5}
.com-cmt-txt b{font-family:var(--font-d);font-weight:800;font-size:13px}
.com-cmt-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;flex-shrink:0}

/* Personas (explora y listas) */
.com-persona{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.com-persona:last-child{border-bottom:none}
.com-persona h4{font-family:var(--font-d);font-size:14px;font-weight:800;line-height:1.25}
.com-persona .sub{font-size:11.5px;color:var(--muted)}

/* Rejilla del perfil, estilo Instagram */
.com-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.com-grid-i{position:relative;aspect-ratio:1;background:var(--dark2);overflow:hidden;cursor:pointer}
.com-grid-i img,.com-grid-i video{width:100%;height:100%;object-fit:cover;display:block}
.com-grid-i .tag{position:absolute;top:5px;right:5px;color:#fff;opacity:.85;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* Cabecera del perfil de comunidad */
.com-perfil{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.com-nums{display:flex;gap:22px;margin-top:6px}
.com-nums div{text-align:center}
.com-nums b{display:block;font-family:var(--font-d);font-size:17px;font-weight:900;line-height:1}
.com-nums span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* Botón flotante de publicar */
.com-fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + var(--com-h) + 14px);width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5);z-index:40}
.com-fab:active{transform:scale(.94)}

/* Con Comunidad ya son 6 pestañas abajo. En un móvil de 375 px cada pestaña
   tiene 54 px, y "COMUNIDAD" a 10 px mide 72: se sale. Partirla en dos líneas
   queda peor que reducir la letra, así que se reduce.
   Si la palabra se ve demasiado pequeña, la solución es cambiarla por una más
   corta (SOCIAL, CLUB) en el <span> de la pestaña de app/index.html; entonces
   se puede borrar la regla de abajo. */
.tab{min-width:0}
.tab span{white-space:nowrap}
@media (max-width:430px){
  .tab span{font-size:8.5px;letter-spacing:.02em}
  .tab[data-view="comunidad"] span{font-size:7.5px;letter-spacing:0}
  .tab svg{width:21px;height:21px}
}

/* Buscador de Explora */
.com-buscar{display:flex;align-items:center;gap:9px;background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;margin-bottom:16px;color:var(--muted)}
.com-buscar input{flex:1;background:none;border:none;outline:none;color:#fff;font-family:var(--font-b);font-size:14px;padding:12px 0}
.com-buscar input::placeholder{color:var(--muted)}
.com-buscar button{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:4px}

/* Cabecera de Comunidad: título a la izquierda, corazón a la derecha */
.com-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.com-head h1{font-size:30px;font-weight:900}
/* En movil la cabecera se come el sitio de la publicacion. Se recorta: el
   titulo mas pequeno, el "SKI LAB" de encima fuera y menos aire. */
@media(max-width:999px){
  .view-comunidad{padding-top:12px}
  .com-head{margin-bottom:10px}
  .com-head h1{font-size:21px}
  .com-head .eyebrow{display:none}
  .com-heart{width:38px;height:38px}
}
.com-heart{position:relative;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.com-heart:active{transform:scale(.94)}
.com-heart-dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--font-d);font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--black)}
.com-volver{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.com-volver:active{transform:scale(.94)}

/* Una línea de Actividad */
.com-act{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--dark);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}
.com-act.nueva{border-color:rgba(165,47,53,.45);background:var(--red-soft)}
.com-act-i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);color:var(--muted2);display:grid;place-items:center;flex-shrink:0}
.com-act.nueva .com-act-i{color:var(--red);border-color:rgba(165,47,53,.4)}
.com-act h4{font-family:var(--font-d);font-size:14px;font-weight:800;line-height:1.25}
.com-act .sub{font-size:12px;color:var(--muted);line-height:1.5}
.com-act-f{font-size:11px;color:var(--muted);flex-shrink:0;align-self:flex-start;padding-top:2px}

/* Nombres largos no deben partir la fila en dos */
.com-persona h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.com-persona .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.com-x{width:34px;height:34px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--border-strong);color:var(--muted2);font-size:14px;cursor:pointer;flex-shrink:0}
.com-x:active{background:rgba(255,255,255,.1)}

/* ============================================================
   ANCHO DEL FEED
   ------------------------------------------------------------
   El resto de la app va a ancho completo en ordenador, pero un feed de
   fotos no: a 2000 px cada publicacion es un cartel. Columna centrada y
   estrecha, como Instagram.
   ============================================================ */
.com-col{max-width:470px;margin:0 auto}
.com-tabs-in{max-width:470px;margin:0 auto}

/* Explora: cuadraditos, no publicaciones enteras */
.com-explora-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:8px}
@media(min-width:700px){ .com-explora-grid{grid-template-columns:repeat(4,1fr);gap:6px} }
@media(min-width:1100px){ .com-explora-grid{grid-template-columns:repeat(6,1fr)} }
.com-explora-grid .com-grid-i{border-radius:2px}
@media(min-width:700px){ .com-explora-grid .com-grid-i{border-radius:6px} }

/* La rejilla del perfil gana columnas en pantallas grandes */
@media(min-width:700px){ .com-grid{grid-template-columns:repeat(4,1fr);gap:6px} }
@media(min-width:1100px){ .com-grid{grid-template-columns:repeat(6,1fr)} }

/* ============================================================
   HISTORIAS
   ============================================================ */
.st-fila{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:2px;scrollbar-width:none}
.st-fila::-webkit-scrollbar{display:none}
.st-burbuja{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;width:66px}
.st-aro{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border-strong);overflow:hidden;position:relative}
.st-aro .avatar{border:none}
.st-aro img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* El anillo rojo = te queda algo por ver de esa persona */
.st-burbuja.sinver .st-aro{border-color:var(--red);box-shadow:0 0 0 2px var(--black) inset}
.st-aro.st-mas{border-style:dashed;color:var(--muted2)}
.st-aro.dest{border-color:var(--border-strong);color:var(--muted2)}
.st-nombre{font-size:10.5px;color:var(--muted2);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Visor a pantalla completa */
.st-viewer{position:fixed;inset:0;z-index:400;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.st-barras{position:absolute;top:8px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.st-b{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.st-b i{display:block;height:100%;width:0;background:#fff}
.st-top{position:absolute;top:20px;left:10px;right:10px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff}
.st-top h4{font-family:var(--font-d);font-size:14px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-top span{font-size:11px;opacity:.7}
.st-ic{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.35);border:none;color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.st-media{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.st-media img,.st-media video{max-width:100%;max-height:100%;object-fit:contain}
@media(min-width:700px){ .st-media img,.st-media video{max-width:420px;border-radius:12px} }
.st-texto{position:absolute;left:0;right:0;bottom:70px;padding:0 24px;text-align:center;color:#fff;font-size:15px;line-height:1.5;text-shadow:0 2px 8px rgba(0,0,0,.8);z-index:3}
/* Mitad izquierda: atrás. Mitad derecha: adelante. Como en Instagram. */
.st-zona{position:absolute;top:60px;bottom:0;width:38%;background:none;border:none;cursor:pointer;z-index:2}
.st-zona.izq{left:0} .st-zona.der{right:0;width:62%}

/* Elegir la miniatura de un vídeo */
.mn-caja{position:relative;width:100%;aspect-ratio:16/9;background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:grid;place-items:center;margin-bottom:10px}
.mn-caja img{width:100%;height:100%;object-fit:contain}
.mn-cargando{position:absolute;font-size:12px;color:var(--muted)}
#mnRango{width:100%;accent-color:var(--red);cursor:pointer}
#mnRango:disabled{opacity:.4;cursor:default}
.mn-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.mn-pie .muted{font-size:11.5px}

/* ============================================================
   VISOR DE VÍDEO A PANTALLA COMPLETA
   ------------------------------------------------------------
   El desplazamiento lo hace el navegador con scroll-snap, no JavaScript:
   así el gesto de pasar al siguiente va tan suave como en una app nativa.
   ============================================================ */
.rl-viewer{position:fixed;inset:0;z-index:420;background:#000}
.rl-scroll{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rl-scroll::-webkit-scrollbar{display:none}
.rl-item{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:grid;place-items:center;cursor:pointer}
.rl-item video{width:100%;height:100%;object-fit:contain;background:#000}
@media(min-width:700px){ .rl-item video{width:auto;max-width:min(430px,100%);border-radius:12px} }
/* La flecha: fina, blanca y sin caja, como en las apps de vídeo */
.rl-atras{position:fixed;top:12px;left:8px;z-index:5;background:none;border:none;color:#fff;cursor:pointer;padding:8px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.rl-pausa{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .18s;filter:drop-shadow(0 3px 12px rgba(0,0,0,.7))}
.rl-item.pausado .rl-pausa{opacity:1}
.rl-pie{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 26px;color:#fff;z-index:2;pointer-events:none;
        background:linear-gradient(transparent,rgba(0,0,0,.8))}
@media(min-width:700px){ .rl-pie{max-width:430px;left:50%;transform:translateX(-50%);border-radius:0 0 12px 12px} }
.rl-autor{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.rl-autor b{font-family:var(--font-d);font-size:14px;font-weight:800}
.rl-pie p{font-size:13.5px;line-height:1.5;margin-bottom:4px}

/* ============================================================
   ELEGIR ESTACIÓN Y MAPA
   ============================================================ */
.lg-campo{position:relative}
.lg-sug{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;
        background:var(--dark2);border:1px solid var(--border-strong);border-radius:var(--radius);
        max-height:230px;overflow-y:auto;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.lg-sug.abierta{display:block}
.lg-op{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
       background:none;border:none;border-bottom:1px solid var(--border);color:#fff;
       font-family:var(--font-b);font-size:14px;text-align:left;padding:11px 13px;cursor:pointer}
.lg-op:last-child{border-bottom:none}
.lg-op:hover,.lg-op:active{background:rgba(255,255,255,.06)}
.lg-op em{font-style:normal;font-size:11px;color:var(--muted);flex-shrink:0}

.mapa-caja{width:100%;height:260px;border-radius:var(--radius);overflow:hidden;
           background:var(--dark2);border:1px solid var(--border);display:grid;place-items:center;margin-bottom:14px}
/* Leaflet pinta su fondo en blanco; aquí todo es oscuro */
.mapa-caja .leaflet-container{background:#111;height:100%;width:100%;font-family:var(--font-b)}
.mapa-caja .leaflet-control-attribution{background:rgba(0,0,0,.6);color:var(--muted);font-size:9px}
.mapa-caja .leaflet-control-attribution a{color:var(--muted2)}
.mapa-caja .leaflet-popup-content-wrapper,.mapa-caja .leaflet-popup-tip{background:var(--dark2);color:#fff;border:1px solid var(--border-strong)}
.mapa-caja .leaflet-popup-content{font-size:12.5px;margin:10px 12px}

/* Los mapas de OpenStreetMap vienen en claro y aquí todo es oscuro. En vez
   de contratar un proveedor de mapas oscuros se les da la vuelta con un
   filtro: solo afecta a las imágenes del mapa, no a los puntos rojos. */
.mapa-caja .leaflet-tile{filter:invert(1) hue-rotate(185deg) brightness(.82) contrast(1.05) saturate(.55)}

/* Encuadrar la foto antes de publicarla */
.cr-marco{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);
          background:#000;border:1px solid var(--border-strong);touch-action:none;cursor:grab;user-select:none}
.cr-marco:active{cursor:grabbing}
.cr-marco img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
/* Las líneas de tercios ayudan a colocar al esquiador sin pensarlo */
.cr-rejilla{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.22) 33.2%,rgba(255,255,255,.22) 33.5%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.22) 66.4%,rgba(255,255,255,.22) 66.7%,transparent 66.7%),
             linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.22) 33.2%,rgba(255,255,255,.22) 33.5%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.22) 66.4%,rgba(255,255,255,.22) 66.7%,transparent 66.7%)}
#crZoom{width:100%;accent-color:var(--red);cursor:pointer;margin-top:10px}

/* Altavoz del visor de vídeo: arranca apagado y se enciende tocándolo */
.rl-sonido{position:fixed;top:12px;right:10px;z-index:5;width:40px;height:40px;border-radius:50%;
           background:rgba(0,0,0,.4);border:none;color:#fff;display:grid;place-items:center;cursor:pointer;
           filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.rl-sonido:active{transform:scale(.92)}