@font-face{font-family:'Clash';src:url('../assets/clash-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash';src:url('../assets/clash-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --void:#05070d;
  --deep:#0a1128;
  --deep2:#0f1a38;
  --deep3:#141f42;
  --blue:#3b63ff;
  --blue-soft:#7290ff;
  --white:#f5f7fb;
  --muted-d:#95a0bd;
  --line-d:rgba(255,255,255,.09);
  --ok:#3ddc97;
  --warn:#ffb648;
  --danger:#ff5c72;
  --radius:16px;
  --gold:#c9a227;
  --gold-soft:#e4c766;
  --bronze:#8a6a3c;
  --champagne:#ecd9a8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--void);
  color:var(--white);
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100svh;
  /* el sitio de la barra de abajo, con la zona segura del iPhone dentro:
     78px fijos dejaban el ultimo boton debajo de la barra en algunos moviles */
  padding-bottom:calc(var(--alto-nav, 68px) + env(safe-area-inset-bottom) + 28px);
}
h1,h2,h3,.disp{font-family:'Clash',system-ui,sans-serif;font-weight:700;letter-spacing:.01em;word-spacing:.12em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.muted{color:var(--muted-d)}

.wrap{max-width:720px;margin:0 auto;padding:0 18px}

/* topnav (desktop) */
.topnav{display:none}
@media (min-width:860px){
  .topnav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 32px;border-bottom:1px solid var(--line-d);
    background:rgba(5,7,13,.85);backdrop-filter:blur(12px);
    position:sticky;top:0;z-index:50;
  }
  .topnav .links{display:flex;gap:28px;font-size:14.5px;font-weight:600}
  .topnav .links a{color:var(--muted-d);transition:color .2s}
  .topnav .links a.active,.topnav .links a:hover{color:var(--white)}
  .bottomnav{display:none}
}
.nav-badge{display:inline-block;min-width:17px;padding:1px 5px;border-radius:100px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;text-align:center;vertical-align:2px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Clash';font-weight:700;font-size:15px;letter-spacing:.02em}
.brand img{width:30px;height:30px;object-fit:contain}

/* mobile top bar */
.mtop{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line-d);
  position:sticky;top:0;z-index:50;background:rgba(5,7,13,.9);backdrop-filter:blur(12px);
}
@media (min-width:860px){.mtop{display:none}}

/* bottom nav mobile */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:space-around;align-items:center;
  background:rgba(10,17,40,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-d);
  padding:10px 6px calc(10px + env(safe-area-inset-bottom));
}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted-d);font-weight:600}
.bottomnav a.active{color:var(--blue-soft)}
.bottomnav .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);position:absolute;margin-top:-14px;margin-left:14px}
.bottomnav svg{width:22px;height:22px}
@media (min-width:860px){.bottomnav{display:none}}

main{padding:26px 0 40px}

.card{
  background:linear-gradient(180deg,var(--deep2),var(--deep));
  border:1px solid var(--line-d);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
}
.card-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-d);font-weight:700;margin-bottom:10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--deep3);border-radius:12px;padding:14px;border:1px solid var(--line-d)}
.stat .n{font-family:'Clash';font-size:22px;font-weight:700}
.stat .l{font-size:11.5px;color:var(--muted-d);margin-top:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:100px;font-weight:700;font-size:14.5px;
  border:none;cursor:pointer;width:100%;transition:transform .15s,opacity .15s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-soft));color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line-d);color:var(--white)}
.btn-sm{padding:10px 16px;font-size:13px;width:auto}
.btn-block{margin-bottom:10px}

.priority{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line-d)}
.priority:last-child{border-bottom:none}
.priority .num{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

form label{display:block;font-size:13px;font-weight:700;color:var(--muted-d);margin:16px 0 6px}
form label:first-child{margin-top:0}
input[type=email],input[type=password],input[type=text],input[type=number],textarea,select{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line-d);
  background:var(--deep3);color:var(--white);font-size:15px;font-family:inherit;
}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue)}
.hint{font-size:12px;color:var(--muted-d);margin-top:5px}
.error{background:rgba(255,92,114,.12);border:1px solid rgba(255,92,114,.4);color:#ffb2bd;padding:12px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted-d);font-weight:500}
.check input{width:auto}

.scale{display:flex;gap:6px}
.scale label{flex:1;text-align:center;margin:0;padding:0;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-d);border-radius:8px;cursor:pointer;font-weight:700;font-size:13px;color:var(--muted-d)}
.scale input{display:none}
.scale input:checked + span{color:var(--white)}
.scale label:has(input:checked){border-color:var(--blue);background:rgba(59,99,255,.15);color:var(--white)}

.range-field{margin:16px 0}
.range-field .rf-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.range-field .rf-label{font-size:13px;font-weight:700;color:var(--muted-d);margin:0}
.range-field .rf-val{font-family:'Clash';font-size:16px;font-weight:700;color:var(--champagne)}
.range-field input[type=range]{width:100%;accent-color:var(--gold);height:6px;cursor:pointer}
.range-field .rf-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-d);margin-top:2px}

.toggle2{display:flex;gap:8px;margin-bottom:6px}
.toggle2 label{flex:1;text-align:center;padding:12px;border:1px solid var(--line-d);border-radius:10px;cursor:pointer;font-weight:700;color:var(--muted-d)}
.toggle2 input{display:none}
.toggle2 label:has(input:checked){border-color:var(--blue);background:rgba(59,99,255,.15);color:var(--white)}

.tabs-bar{display:flex;gap:4px;border-bottom:1px solid var(--line-d);margin:6px 0 16px;flex-wrap:wrap}
.tabs-bar .tab-btn{padding:10px 14px;font-size:13px;font-weight:700;color:var(--muted-d);cursor:pointer;border-bottom:2px solid transparent;user-select:none}
.tabs-bar .tab-btn.active{color:var(--white);border-bottom-color:var(--blue)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.two-col{display:block}
@media (min-width:860px){.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}}

.status-badge{display:inline-block;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.status-badge.sin_cambios{background:rgba(149,160,189,.15);color:var(--muted-d)}
.status-badge.cambios{background:rgba(59,99,255,.18);color:var(--blue-soft)}

.progressbar{display:flex;gap:4px;margin:18px 0 24px}
.progressbar div{flex:1;height:4px;border-radius:4px;background:var(--line-d)}
.progressbar div.on{background:var(--blue)}

.login-wrap{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:linear-gradient(180deg,var(--deep2),var(--deep));border:1px solid var(--line-d);border-radius:20px;padding:36px 28px;text-align:center}
.login-card img{width:48px;height:48px;margin:0 auto 18px;object-fit:contain}
.login-card h1{font-size:22px;margin-bottom:26px}
.login-card form{text-align:left}
.link-row{margin-top:18px;font-size:13px;text-align:center}
.link-row a{color:var(--blue-soft);font-weight:700}

.splash-wrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;position:relative;overflow:hidden;background:var(--void)}
.splash-wrap::before{content:'';position:absolute;left:50%;bottom:-22%;transform:translateX(-50%);width:150%;max-width:640px;aspect-ratio:1/1;background:radial-gradient(circle,rgba(59,99,255,.32),rgba(59,99,255,0) 65%);pointer-events:none}
/* El resplandor va DETRAS, en su propia capa, no como filter sobre la imagen.
   Con dos drop-shadow encima del <img>, Safari del iPhone lo pinta rasterizado
   dentro de la caja del elemento y sale un recuadro azulado alrededor de la M
   al cargar, que desaparece al tocar cualquier cosa porque repinta. Lo enseño
   Miguel con una captura el 26-ago: "al entrar la M sale mal, si le doy a
   iniciar sesion ya se pone bien". */
.splash-logo-box{position:relative;width:132px;height:132px;margin-bottom:26px;
  display:grid;place-items:center}
.splash-logo-box::before{content:'';position:absolute;left:50%;top:50%;
  width:230%;height:230%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(59,99,255,.42),rgba(59,99,255,0) 62%);
  pointer-events:none}
.splash-logo{position:relative;width:132px;height:132px;object-fit:contain}
.splash-brand{position:relative;font-family:'Clash';font-weight:700;font-size:21px;letter-spacing:.05em;margin-bottom:38px;text-align:center}
.splash-brand .light{font-weight:600;opacity:.65}
.splash-card{position:relative;width:100%;max-width:360px}

/* La tira que vende de la pantalla de entrada (20-sep-2026). Frases e iconos, sin
   una sola captura de dentro: lo pidio asi Miguel para no dar el plano a nadie. */
.vende{position:relative;width:100%;max-width:360px;margin:0 0 30px}
.vende-v{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.vende-v::-webkit-scrollbar{display:none}
.vende-v:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:16px}
.vende-s{flex:0 0 100%;scroll-snap-align:center;text-align:center;padding:0 6px}
.vende-i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;
  border-radius:13px;background:rgba(59,99,255,.14);border:1px solid rgba(59,99,255,.3);
  color:var(--blue-soft)}
.vende-i svg{width:22px;height:22px}
.vende-s b{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.vende-x{display:block;font-size:13.5px;line-height:1.55;color:var(--muted-d);
  max-width:300px;margin:0 auto}
.vende-p{display:flex;gap:7px;justify-content:center;margin-top:16px}
.vende-d{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.22);transition:width .25s ease,background .25s ease}
.vende-d span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vende-d.on{width:20px;border-radius:99px;background:var(--blue)}
/* En pantallas bajas el logo y la tira no caben juntos con holgura. */
@media (max-height:700px){
  .splash-logo-box,.splash-logo{width:104px;height:104px}
  .splash-logo-box{margin-bottom:18px}
  .splash-brand{margin-bottom:24px}
  .vende{margin-bottom:22px}
}
.splash-card form{text-align:left}
.splash-card .link-row{margin-top:20px}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.32);color:var(--white)}
.btn-outline:active{background:rgba(255,255,255,.06)}
.btn-box{border-radius:14px;padding:16px 22px}
.splash-card .btn-primary{background:var(--blue)}
.splash-card .btn-outline{border-color:rgba(59,99,255,.55);color:var(--blue-soft)}
.splash-card .btn-box{display:flex;width:84%;margin-left:auto;margin-right:auto}

.empty{text-align:center;padding:40px 20px;color:var(--muted-d)}
.empty svg{width:40px;height:40px;margin:0 auto 14px;opacity:.5}

.res-card{display:flex;gap:14px;align-items:center}
.res-card img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--deep3)}
.res-card .t{font-weight:700;font-size:15px;margin-bottom:3px}
.res-card .d{font-size:13px;color:var(--muted-d)}

table.admin-t{width:100%;border-collapse:collapse;font-size:13.5px}
table.admin-t th{text-align:left;color:var(--muted-d);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line-d)}
table.admin-t td{padding:12px 10px;border-bottom:1px solid var(--line-d)}
table.admin-t tr:last-child td{border-bottom:none}
.pill{display:inline-block;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:700}
.pill.warn{background:rgba(255,182,72,.15);color:var(--warn)}
.pill.danger{background:rgba(255,92,114,.15);color:var(--danger)}
.pill.ok{background:rgba(61,220,151,.15);color:var(--ok)}

.session-block{background:var(--deep3);border-radius:12px;padding:14px;margin-bottom:12px;border:1px solid var(--line-d)}
.session-block h3{font-size:15px;margin-bottom:8px}
.ex-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-d);font-size:13.5px}
.ex-row:last-child{border-bottom:none}
.ex-row .name{font-weight:700}
.ex-row .meta{color:var(--muted-d);text-align:right}

.demo-flag{background:rgba(255,182,72,.12);border:1px solid rgba(255,182,72,.35);color:var(--warn);font-size:12.5px;padding:9px 14px;border-radius:10px;margin-bottom:16px;font-weight:600}

/* MIGUEL PERFORMANCE: indices, confianza, recomendacion, atencion requerida */
.perf-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-soft);font-weight:700;margin-bottom:4px}

.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.idx-card{background:linear-gradient(160deg,var(--deep2),var(--deep));border:1px solid var(--line-d);border-radius:14px;padding:14px;position:relative;overflow:hidden}
.idx-card::before{content:'';position:absolute;top:-30%;right:-30%;width:60%;height:60%;background:radial-gradient(circle,rgba(201,162,39,.14),transparent 70%);pointer-events:none}
.idx-card .idx-label{font-size:11.5px;color:var(--muted-d);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.idx-card .idx-val{font-family:'Clash',system-ui,sans-serif;font-weight:700;font-size:30px;line-height:1;color:var(--champagne)}
.idx-card .idx-val .u{font-size:14px;color:var(--muted-d);font-weight:600;margin-left:2px}
.idx-card .idx-bar{margin-top:9px;height:5px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
.idx-card .idx-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--bronze),var(--gold-soft))}
.idx-card.na .idx-val{color:var(--muted-d);font-size:16px;font-weight:600}

.confianza-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;border:1px solid rgba(236,217,168,.3);color:var(--champagne);background:rgba(201,162,39,.08)}
.confianza-badge.calibrando{color:var(--muted-d);border-color:var(--line-d);background:rgba(255,255,255,.04)}

.reco-pill{display:inline-flex;align-items:center;gap:6px;font-family:'Clash',system-ui,sans-serif;font-weight:700;font-size:15px;padding:8px 16px;border-radius:100px;letter-spacing:.02em}
.reco-pill.impulsa{background:rgba(61,220,151,.14);color:var(--ok);border:1px solid rgba(61,220,151,.3)}
.reco-pill.construye{background:rgba(201,162,39,.14);color:var(--gold-soft);border:1px solid rgba(201,162,39,.3)}
.reco-pill.recupera{background:rgba(255,92,114,.14);color:var(--danger);border:1px solid rgba(255,92,114,.3)}

.factores-list{list-style:none;padding:0;margin:10px 0 0}
.factores-list li{font-size:13px;color:var(--muted-d);padding:6px 0 6px 16px;position:relative;border-bottom:1px solid var(--line-d)}
.factores-list li:last-child{border-bottom:none}
.factores-list li::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:100px;background:var(--gold-soft)}

.coach-note{background:linear-gradient(160deg,var(--deep2),var(--deep));border:1px solid rgba(201,162,39,.25);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.coach-note .cn-from{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-soft);font-weight:700;margin-bottom:5px}
.coach-note .cn-text{font-size:14.5px;line-height:1.5;white-space:pre-line}

.atn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--deep3);border:1px solid var(--line-d);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.atn-row .atn-main{flex:1;min-width:0}
.atn-row .atn-name{font-weight:700;font-size:14.5px}
.atn-row .atn-detail{font-size:12.5px;color:var(--muted-d);margin-top:2px}
.atn-row form{flex-shrink:0}

/* Era un bloque dorado entero en mitad de una pantalla azul marino: se comia la
   atencion de todo lo demas, incluido el entreno de hoy, que es lo que importa.
   Ahora es una tarjeta del sistema con un rail ambar, que avisa sin gritar. */
.checkin-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--n2);border:1px solid var(--linea);border-left:3px solid var(--aviso);
  border-radius:var(--r-l);padding:14px 16px;margin-bottom:14px;color:var(--texto)}
.checkin-cta .cc-text{font-weight:700;font-size:14.5px;color:var(--texto)}
.checkin-cta .cc-sub{font-size:12px;margin-top:3px;color:var(--texto-2)}
.checkin-cta a{display:inline-flex;align-items:center;min-height:44px;
  background:var(--grad-azul);color:#fff;padding:0 16px;border-radius:100px;
  font-size:13px;font-weight:700;white-space:nowrap;flex:none}


/* ---- responde al tacto ----
   Medido el 26-ago: en la pantalla de inicio, 9 de 11 cosas tocables no daban
   ninguna senal al tocarlas, incluida la barra de abajo, que es lo mas tocado de
   toda la app. En el iPhone todo se hunde un poco al tocarlo antes de que pase
   nada, y esa decima es lo que separa una app de una pagina web. */
button, a, summary, [role="button"], .tabbar a, .card-link{
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), opacity .16s ease;
}
button:active, a:active, summary:active, [role="button"]:active, .card-link:active{
  transform:scale(.965);
  transition-duration:.06s;
}
/* La barra de abajo va pegada al borde: encogerla se ve raro, se apaga el icono. */
.tabbar a:active, nav a:active{transform:none;opacity:.55;transition-duration:.06s}

@media (prefers-reduced-motion: reduce){
  button:active, a:active, summary:active, [role="button"]:active, .card-link:active{
    transform:none; opacity:.6;
  }
}

/* ---- CICLO MENSTRUAL ----
   Los colores de las fases son suaves a proposito: esto se mira en un momento
   privado y no tiene que gritar. Nada de rosa, que su marca es azul y ademas
   el rosa aqui es un cliche. */
.ciclo-fases-previa{display:grid;gap:8px}
.cf-mini{background:rgba(var(--pri-rgb),.07);border:1px solid rgba(var(--pri-rgb),.16);
  border-radius:10px;padding:10px 12px}
.cf-mini b{display:block;font-size:14px}
.cf-mini span{font-size:13px;color:var(--texto-2)}

.ciclo-legal{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.6}
.ciclo-legal li{margin-bottom:7px}
.ciclo-acepto{display:flex;gap:11px;align-items:flex-start;margin:16px 0;
  font-size:13.5px;line-height:1.55;color:var(--texto-2)}
.ciclo-acepto input{flex:none;width:22px;height:22px;margin-top:1px}

.ciclo-hoy{border-left:3px solid var(--acento)}
.ciclo-hoy.fase-menstrual{border-left-color:#c0708a}
.ciclo-hoy.fase-folicular{border-left-color:#34d399}
.ciclo-hoy.fase-ovulacion{border-left-color:#fbbf24}
.ciclo-hoy.fase-lutea,.ciclo-hoy.fase-lutea_final{border-left-color:#8b95c9}
.ciclo-dia{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-2);font-weight:700}
.ciclo-fase{margin:4px 0 2px;font-size:22px}
.ciclo-titular{margin:0 0 3px;font-size:15.5px;color:var(--acento);font-weight:600}
.ciclo-horm{margin:0;font-size:13px;color:var(--texto-2)}
.ciclo-cols{display:grid;gap:16px;margin-top:16px}
@media(min-width:560px){.ciclo-cols{grid-template-columns:1fr 1fr}}
.ciclo-et{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-2);font-weight:700;margin-bottom:5px}
.ciclo-cols ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55}
.ciclo-cols li{margin-bottom:5px}
.ciclo-senal{margin:14px 0 0;padding:11px 13px;border-radius:10px;font-size:13.5px;
  background:rgba(139,149,201,.14);border:1px solid rgba(139,149,201,.3)}

.ciclo-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ciclo-form .campo{flex:1;min-width:170px;margin-bottom:0}

.ciclo-rej{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ciclo-d{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
  font-size:12.5px;font-weight:700;border:1px solid var(--linea)}
.ciclo-d.f-vacio{color:var(--texto-3);background:transparent}
.ciclo-d.f-menstrual{background:rgba(192,112,138,.3);border-color:rgba(192,112,138,.5)}
.ciclo-d.f-folicular{background:rgba(52,211,153,.22);border-color:rgba(52,211,153,.42)}
.ciclo-d.f-ovulacion{background:rgba(251,191,36,.22);border-color:rgba(251,191,36,.42)}
.ciclo-d.f-lutea{background:rgba(139,149,201,.22);border-color:rgba(139,149,201,.42)}
/* Los ultimos dias van mas marcados a proposito: es donde su guia cambia el
   consejo (bajar volumen e intensidad), asi que tienen que verse distintos de
   los primeros dias de la lutea y no como el mismo bloque. */
.ciclo-d.f-lutea_final{background:rgba(139,149,201,.42);border-color:rgba(139,149,201,.75)}
.ciclo-d.es-regla{outline:2px solid #c0708a;outline-offset:-2px}
.ciclo-leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;
  font-size:12.5px;color:var(--texto-2)}
.ciclo-leyenda span{display:flex;align-items:center;gap:6px}
.ciclo-leyenda i{width:12px;height:12px;border-radius:4px;display:block}
.ciclo-leyenda i.f-menstrual{background:rgba(192,112,138,.55)}
.ciclo-leyenda i.f-folicular{background:rgba(52,211,153,.45)}
.ciclo-leyenda i.f-ovulacion{background:rgba(251,191,36,.45)}
.ciclo-leyenda i.f-lutea{background:rgba(139,149,201,.45)}

.ciclo-lista{list-style:none;margin:0;padding:0}
.ciclo-lista li{display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--linea);font-size:14.5px}
.ciclo-lista li:last-child{border-bottom:none}
.ciclo-lista form{margin:0}
.btn-quitar{background:transparent;border:1px solid var(--linea);color:var(--texto-2);
  border-radius:9px;min-height:44px;padding:0 14px;font-size:13px;font-family:inherit;
  cursor:pointer}

.ciclo-borrar{border:1px solid rgba(248,113,113,.28)}
.btn-peligro{color:#fca5a5;border-color:rgba(248,113,113,.4)}
.ciclo-medico{margin:22px 0 0;font-size:12.5px;line-height:1.55;color:var(--texto-3);
  text-align:center}
.ciclo-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.ciclo-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--texto-3);
  letter-spacing:.05em}
.ciclo-d.f-hueco{border-color:transparent;background:transparent}

.ciclo-leyenda i.f-lutea-fin{background:rgba(139,149,201,.8)}

/* ---- La energia que apunta ella (Miguel, 16-sep) --------------------------
   El fondo de cada dia sigue siendo el de la FASE, que ya existia y el dijo que
   estaba bien. Esto va ENCIMA: un punto en la esquina con lo que ella puso.
   Por eso el punto lleva un anillo del color del fondo de la tarjeta: sin el,
   el punto verde sobre la fase folicular (que ya es verde) no se distingue. */
.ciclo-d{position:relative}
/* El anillo va a 2px y no a 1,5: el caso peor es un punto VERDE (energia alta)
   sobre el fondo VERDE de la fase folicular, y ahi el punto y el fondo son el
   mismo tono. Medido mirando el dia 15 en un movil de 390 px. */
.ciclo-ener{position:absolute;right:3px;bottom:3px;width:9px;height:9px;
  border-radius:50%;display:block;box-shadow:0 0 0 2px var(--n2)}
.ener-punto{width:12px;height:12px;border-radius:50%;display:inline-block}
.ener-n1,.ener-punto.ener-n1,.ciclo-ener.ener-n1{background:var(--peligro)}
.ener-n2,.ener-punto.ener-n2,.ciclo-ener.ener-n2{background:var(--aviso)}
.ener-n3,.ener-punto.ener-n3,.ciclo-ener.ener-n3{background:var(--ok)}
.ciclo-leyenda-ener{margin-top:8px}
.ciclo-leyenda-ener i{border-radius:50%}

/* Los tres botones. A 44px de alto porque es lo minimo que se acierta con el
   pulgar sin mirar, y esto se contesta con el movil en la mano. */
.ener-botones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ener-b{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:64px;border-radius:var(--r-s);cursor:pointer;
  border:1px solid var(--linea);background:var(--n3);color:var(--texto-2);
  font-size:13px;font-weight:600;transition:border-color var(--t),color var(--t)}
.ener-b i{width:14px;height:14px;border-radius:50%;display:block}
.ener-b.ener-n1 i{background:var(--peligro)}
.ener-b.ener-n2 i{background:var(--aviso)}
.ener-b.ener-n3 i{background:var(--ok)}
/* El elegido se marca con el borde y el texto, NO con el fondo del color:
   un boton entero en rojo se lee como un error, y aqui no hay ningun error. */
.ener-b.elegido{border-color:var(--primario);color:var(--texto);
  box-shadow:inset 0 0 0 1px var(--primario)}
.ener-b.ener-n1,.ener-b.ener-n2,.ener-b.ener-n3{background:var(--n3)}
.ener-quitar{margin-top:10px;text-align:right}

.ener-ajuste{border-left:3px solid var(--linea-fuerte)}
.ener-ajuste.nivel-1{border-left-color:var(--peligro)}
.ener-ajuste.nivel-3{border-left-color:var(--ok)}
.ener-ajuste-cab{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:15.5px}
.ener-ajuste ul{margin:0;padding-left:18px}
.ener-ajuste li{margin-bottom:4px}
.ener-porque{margin:12px 0 0;font-size:13.5px;color:var(--texto-2)}

.ener-otro{margin-top:14px}
.ener-otro summary{cursor:pointer;font-size:13.5px;color:var(--texto-2);
  padding:6px 0;list-style:none}
.ener-otro summary::-webkit-details-marker{display:none}
.ener-otro summary::before{content:"+ ";font-weight:700}
.ener-otro[open] summary::before{content:"- "}
.ener-otro .ener-botones{margin-top:10px}

/* Lo que llevas dentro, en la pagina de instalacion (/app) */
.ins-que{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10)}
.ins-lista{margin:8px 0 0;padding:0;list-style:none}
.ins-lista li{position:relative;padding-left:20px;margin-bottom:9px;
  font-size:14px;line-height:1.5;color:var(--texto-2)}
.ins-lista li::before{content:"";position:absolute;left:4px;top:8px;width:6px;
  height:6px;border-radius:50%;background:currentColor;opacity:.65}

/* Leads que vienen de una guia (20-sep-2026). Miguel: "ponles otro color para
   saber que vienen de ahi y hacer el seguimiento de venta". Se marca la FILA
   entera y no solo una etiqueta, porque lo que el hace es barrer la lista con
   el ojo buscando a quien llamar, no leer celda por celda. */
tr.lead-guia > td:first-child{box-shadow:inset 3px 0 0 var(--blue,#3b63ff)}
tr.lead-guia > td{background:rgba(59,99,255,.07)}
.pill.amigo{background:rgba(160,132,255,.16);color:#b9a6ff}
.pill.guia{background:rgba(59,99,255,.16);color:var(--blue-soft,#8aa4ff)}