/* t453 (18-oct-2026): REDISENO en las 4 apps (prueba, Plan Libre, Plan Premium y clientes).
   Mismo fichero en las dos apps, cargado el ULTIMO en base.html.
   - Tres temas medidos: claro (blanco y azul electrico, el de siempre por defecto),
     oscuro (azul noche) y noche (vino y terracota). Todo lo nuevo sale de estos tokens.
   - Tarjetas SIN recuadro: ni sombra dura ni borde que dibuje la caja. Se separan
     del fondo por el color (fondo de pagina un punto mas tintado que la tarjeta).
   - Iconos: todos en la misma cajita (44 px, radio 14), mismo grosor de trazo.
   - Login claro en el tema claro (referencia F74CDE71), oscuro en los otros dos.
   - Mi ciclo con el estilo de las referencias y seleccion de varios dias arrastrando. */

:root{ /* oscuro (sin data-tema) */
  --t5-pag:#060B1A; --t5-card:#0E1834; --t5-card2:#13204A; --t5-tx:#F2F5FF; --t5-tx2:#AEBBDD;
  --t5-acc:#4F84FF; --t5-acc-tx:#9DB8FF; --t5-acc-soft:rgba(79,132,255,.16); --t5-linea:rgba(160,185,255,.10);
  --t5-ico-f:rgba(79,132,255,.16); --t5-ico:#9DB8FF; --t5-chip:rgba(157,184,255,.12);
  --t5-btn:linear-gradient(135deg,#3B6CFF 0%,#1E46D8 100%); --t5-btn-tx:#fff;
  --t5-flecha-f:#FFFFFF; --t5-flecha:#1F55F0; --t5-foto-mezcla:#0E1834;
}
:root[data-tema="claro"]{
  --t5-pag:#F3F6FD; --t5-card:#FFFFFF; --t5-card2:#EEF3FF; --t5-tx:#0B1430; --t5-tx2:#53607D;
  --t5-acc:#1F5BFF; --t5-acc-tx:#1D4ED8; --t5-acc-soft:rgba(31,91,255,.09); --t5-linea:rgba(15,40,110,.07);
  --t5-ico-f:rgba(31,91,255,.10); --t5-ico:#1F5BFF; --t5-chip:#EEF3FF;
  --t5-btn:linear-gradient(135deg,#2F6BFF 0%,#1238D0 100%);
  --t5-flecha-f:#FFFFFF; --t5-flecha:#1F55F0; --t5-foto-mezcla:#FFFFFF;
}
:root[data-tema="noche"]{
  --t5-pag:#0A0406; --t5-card:#1A0D11; --t5-card2:#24131A; --t5-tx:#F3E4D8; --t5-tx2:#C9AC98;
  --t5-acc:#D9714B; --t5-acc-tx:#EFA383; --t5-acc-soft:rgba(217,113,75,.16); --t5-linea:rgba(255,220,200,.08);
  --t5-ico-f:rgba(217,113,75,.16); --t5-ico:#EFA383; --t5-chip:rgba(239,163,131,.12);
  --t5-btn:linear-gradient(135deg,#D9714B 0%,#A9472A 100%);
  --t5-flecha-f:#F3E4D8; --t5-flecha:#8A3A20; --t5-foto-mezcla:#1A0D11;
}

/* ---------- fondo de pagina ---------- */
html:not(:has(.splash-wrap)) body{background:var(--t5-pag)!important}

/* ---------- 6) tarjetas sin recuadro ---------- */
html body :is(.card, section.card, a.card, div.card, .fx-fila, .rx-fila, .rx-grande, .n7-sec, .pg-kpi, .hoy-card,
  .sp-tarj, .ini-banner, .ru-hero, .t433-ayuda, .pl-plato, .inst-tira, .sp-hablar, .mg-accion, .t441-cred li,
  .ay-slide, details.dia, .dia.es-hoy, .cic-hoy, .sa-hero, .cal-b, .pf-fila-info, .fx-vacio, .pl-aro, .pp-card, .pp-ind, .pp-act, .mv-acceso){
  box-shadow:none!important;
  border-color:transparent!important;
}
html body :is(.card, section.card, a.card, div.card, .fx-fila, .rx-fila, .n7-sec, .hoy-card, .t441-t, .pg-kpi, .pp-card, .pp-ind){
  background:var(--t5-card)!important;
}
html body :is(.card, section.card, .n7-sec, .t441-t, .fx-fila, .rx-fila){border-radius:24px!important}
/* el brillo de cristal de arriba de las tarjetas dibujaba un canto */
html body .card::before{box-shadow:none!important}
/* las tarjetas de dentro de una tarjeta, un tono por debajo */
html body .card :is(.card, .pg-kpi, .sh-op, .fx-fila){background:var(--t5-card2)!important}
/* las de foto (t441): mismo fondo que todas, la foto se funde con el del tema */
html body .t441-t{--t441-bg:var(--t5-card);--t441-tx:var(--t5-tx);--t441-tx2:var(--t5-tx2);
  box-shadow:none!important;border:0!important}
@media (hover:hover){html body .t441-t:hover{box-shadow:none!important;transform:translateY(-1px)}}
html body .n7-sec.t441-sec{background:var(--t5-card)!important;box-shadow:none!important;border:0!important}
/* la barra de la prueba y la tira de instalar: sin sombra de caja */
html body :is(.t433-barra, .sp-barra, .sp-v-cab){box-shadow:none!important}

/* ---------- textos ---------- */
html body :is(.mg-tt, .t441-txt b){color:var(--t5-tx)}
html body .mg-rot{color:var(--t5-acc-tx)}

/* ---------- 4) iconos: la misma cajita, el mismo trazo ---------- */
html body :is(.fx-ico, .sa-ico, .r10-ico, .t441-ico, .t453-ico){
  width:44px!important;height:44px!important;border-radius:14px!important;flex:none;
  display:inline-grid!important;place-items:center;
  background:var(--t5-ico-f)!important;box-shadow:none!important;border:0!important;color:var(--t5-ico)}
html body :is(.fx-ico, .sa-ico, .r10-ico, .t441-ico, .t453-ico) .ic-m{width:22px!important;height:22px!important;background:var(--t5-ico)!important}
html body :is(.fx-ico, .sa-ico, .r10-ico, .t441-ico, .t453-ico) svg{width:22px;height:22px;fill:none;stroke:var(--t5-ico);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .fx-ico.chico{width:40px!important;height:40px!important;border-radius:13px!important}
html body .fx-ico.chico .ic-m{width:20px!important;height:20px!important}
html body .fx-ico.redondo{border-radius:14px!important}
/* los tonos de las tarjetas de foto se quedan (verde, violeta, cian): solo el color, misma forma */
html body .t441-t .t441-ico{background:var(--t441-ico-f, var(--t5-ico-f))!important}
html body .t441-t .t441-ico .ic-m{background:var(--t441-ico, var(--t5-ico))!important}
:root[data-tema="noche"] body .t441-t{--t441-ico:#EFA383;--t441-ico-f:rgba(217,113,75,.16)}
:root[data-tema="noche"] body .t441-t[data-tono="verde"]{--t441-ico:#7FD8AE;--t441-ico-f:rgba(127,216,174,.14)}
:root[data-tema="noche"] body .t441-t[data-tono="violeta"]{--t441-ico:#D3B8F5;--t441-ico-f:rgba(211,184,245,.14)}
:root[data-tema="noche"] body .t441-t[data-tono="cian"]{--t441-ico:#8FD8E6;--t441-ico-f:rgba(143,216,230,.14)}
html body .t441-n{color:var(--t441-ico, var(--t5-acc-tx))}
:root[data-tema="noche"] body .t441-chips span{color:#EFA383;background:rgba(239,163,131,.12)}
/* iconos de los botones de arriba: trazo igual */
html body .icono-btn svg{stroke-width:1.8}
html body .icono-btn{box-shadow:none!important}

/* ---------- flecha en circulo blanco ---------- */
html body .t441-fl{background:var(--t5-flecha-f)!important;color:var(--t5-flecha)!important;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.35)!important}

/* ---------- tarjeta de foto generica (t453.js la monta en el resto de pantallas) ---------- */
.t453-t{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;min-height:96px;padding:16px 62px 16px 16px;
  border-radius:24px;background:var(--t5-card);color:var(--t5-tx);text-decoration:none;overflow:hidden;
  -webkit-tap-highlight-color:transparent;transition:transform .18s ease}
.t453-t:active{transform:scale(.985)}
.t453-t .t441-foto{width:44%}
.t453-t .t453-txt{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:58%}
.t453-t .t453-txt b{font:800 16px/1.25 Manrope,system-ui,sans-serif;color:var(--t5-tx)}
.t453-t .t453-txt small{font:500 13px/1.35 Manrope,system-ui,sans-serif;color:var(--t5-tx2)}
.t453-t .t441-n{font:800 11.5px/1 Manrope,system-ui,sans-serif;letter-spacing:.12em;font-style:normal}
.t453-lista{display:grid;gap:12px;margin:12px 0}
@media (min-width:720px){.t453-lista{grid-template-columns:1fr 1fr}}

/* ---------- textos poco legibles que salieron en la medicion ---------- */
:root[data-tema="claro"] body .sa-hero .sa-et,:root[data-tema="claro"] body .r10-hero .sa-et{color:#1D4ED8!important}
:root[data-tema="claro"] body .rx-grande .rx-cat{color:#1D4ED8!important}
html body .sp-tp-chip{color:var(--t5-acc-tx)!important;background:var(--t5-chip)!important}
:root[data-tema="claro"] body .sp-tp-chip{color:#1D4ED8!important}

/* ---------- 2) fotos descentradas: se encuadra a la persona ---------- */
html body .t441-foto{background-position:center 30%!important}

/* ---------- Recursos / guias: portada de guia (IA) ---------- */
html body .rx-grande{background:var(--t5-card)!important}
html body .rx-grande-foto[src*="/t453/guias/"]{object-fit:cover;object-position:center 40%}
html body .rx-foto img[src*="/t453/guias/"]{object-fit:cover;object-position:center 62%}
/* la etiqueta IA que va dentro de la imagen se ve; esta la refuerza en la lista */
.t453-ia{position:absolute;right:10px;top:10px;z-index:3;padding:3px 8px;border-radius:999px;background:rgba(14,21,48,.62);
  color:#fff;font:800 10.5px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.08em;pointer-events:none}
/* filas de "Mas recursos" como las tarjetas de foto: texto a la izquierda, portada a la derecha */
html body .rx-filas{display:grid;gap:12px}
html body a.rx-fila.t453-rxf{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;min-height:104px;
  padding:16px 62px 16px 16px;overflow:hidden;background:var(--t5-card)!important;color:var(--t5-tx)}
html body a.rx-fila.t453-rxf .rx-mini{display:none!important}
html body a.rx-fila.t453-rxf>.t441-foto{width:46%}
html body a.rx-fila.t453-rxf .rx-fila-txt{max-width:56%;position:relative}
html body a.rx-fila.t453-rxf .rx-fila-txt b{color:var(--t5-tx)!important;text-shadow:none!important}
html body a.rx-fila.t453-rxf .rx-fila-txt :is(small,span){color:var(--t5-tx2)!important}
html body a.rx-fila.t453-rxf>.fx-chev{display:none}
html body a.rx-fila.t453-rxf::before,html body a.rx-fila.t453-rxf::after{display:none!important}

/* ---------- 1) cabecera de tarjeta (icono en cajita, numero y titulo) ---------- */
html body .mg-cabt{align-items:center}
html body .mg-cabt .t453-n{display:block;font:800 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.12em;color:var(--t5-acc-tx);margin-bottom:4px}
html body .mg-cabt .mg-rot{font-size:15.5px;letter-spacing:-.005em;text-transform:none;font-weight:800;color:var(--t5-tx)}

/* ---------- chips y botones secundarios planos ---------- */
html body :is(.sh-chip, .ciclo-chip, .chip-op, .ener-b, .sh-op){box-shadow:none!important}

/* ---------- 5) MI CICLO ---------- */
html body .ciclo-rej{touch-action:none;user-select:none;-webkit-user-select:none;gap:6px}
html body .ciclo-d{border-radius:14px!important;box-shadow:none!important;border:0!important;position:relative;transition:transform .12s ease}
html body .ciclo-d.t453-sel{outline:3px solid var(--t5-acc);outline-offset:1px;transform:scale(1.06);z-index:2}
html body .ciclo-d.t453-futuro{opacity:.45}
html body .ciclo-d.t453-guardado{animation:t453-ok .9s ease}
@keyframes t453-ok{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.t453-ayuda-cal{display:flex;gap:8px;align-items:center;margin:10px 0 2px;font:600 13px/1.35 Manrope,system-ui,sans-serif;color:var(--t5-tx2)}
.t453-ayuda-cal svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--t5-acc-tx);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* hoja de abajo para elegir como te sentiste esos dias */
.t453-hoja{position:fixed;left:0;right:0;bottom:0;z-index:9000;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  background:var(--t5-card);color:var(--t5-tx);border-radius:26px 26px 0 0;box-shadow:0 -20px 50px -20px rgba(0,0,0,.45);
  transform:translateY(105%);transition:transform .22s ease;max-width:560px;margin:0 auto}
.t453-hoja:not(.on){visibility:hidden}
.t453-hoja.on{transform:none;visibility:visible}
.t453-hoja h3{margin:0 0 2px;font:800 18px/1.25 Manrope,system-ui,sans-serif;color:var(--t5-tx)}
.t453-hoja p{margin:0 0 14px;font:500 13.5px/1.4 Manrope,system-ui,sans-serif;color:var(--t5-tx2)}
.t453-hoja .t453-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.t453-hoja .t453-op{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:18px;border:0;
  background:var(--t5-card2);color:var(--t5-tx);font:800 14px/1.2 Manrope,system-ui,sans-serif;cursor:pointer}
.t453-hoja .t453-op i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.t453-hoja .t453-op:focus-visible{outline:2px solid var(--t5-acc);outline-offset:2px}
.t453-hoja .t453-animos{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.t453-hoja .t453-animo{padding:8px 14px;border-radius:999px;border:0;background:var(--t5-chip);color:var(--t5-tx);
  font:700 13px/1.2 Manrope,system-ui,sans-serif;cursor:pointer}
.t453-hoja .t453-animo.on{background:var(--t5-acc);color:#fff}
.t453-hoja .t453-pie{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.t453-hoja .t453-pie button{flex:1;padding:12px;border-radius:999px;border:0;font:800 14px/1.2 Manrope,system-ui,sans-serif;cursor:pointer;
  background:var(--t5-chip);color:var(--t5-tx)}
.t453-hoja .t453-pie .t453-quitar{color:#C7263C}
:root:not([data-tema="claro"]) .t453-hoja .t453-pie .t453-quitar{color:#FF8A9A}
.t453-aviso{position:fixed;left:50%;bottom:110px;z-index:9001;transform:translateX(-50%);padding:10px 18px;border-radius:999px;
  background:var(--t5-tx);color:var(--t5-pag);font:800 14px/1.2 Manrope,system-ui,sans-serif;pointer-events:none}
@media (prefers-reduced-motion:reduce){.t453-hoja{transition:none}html body .ciclo-d{transition:none}}

/* ---------- LOGIN: claro en el tema claro (referencia F74CDE71) ---------- */
:root[data-tema="claro"] .splash-wrap{background:linear-gradient(180deg,#FFFFFF 0%,#EEF3FF 55%,#DCE6FF 100%)!important}
:root[data-tema="claro"]:has(.splash-wrap),:root[data-tema="claro"]:has(.splash-wrap) body{background:#F3F6FD!important}
:root[data-tema="claro"] .splash-wrap::after{display:none}
:root[data-tema="claro"] .splash-wrap::before{background:radial-gradient(circle,rgba(47,107,255,.16) 0%,rgba(47,107,255,0) 62%)}
:root[data-tema="claro"] .splash-logo-box::before{background:radial-gradient(circle,rgba(47,107,255,.20) 0%,transparent 66%)}
:root[data-tema="claro"] .splash-logo{content:url("../assets/logo-nav.png");object-fit:contain;padding:14px;
  filter:drop-shadow(0 10px 22px rgba(31,85,240,.28))}
:root[data-tema="claro"] .splash-brand{color:#0B1430;text-shadow:none}
:root[data-tema="claro"] .splash-brand .light{color:#1F5BFF}
:root[data-tema="claro"] .splash-card{background:#FFFFFF!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-tema="claro"] .splash-card label{color:#1D4ED8}
:root[data-tema="claro"] .splash-card input{background:#F3F6FD;border:1.5px solid #E1E8F8;color:#0B1430}
:root[data-tema="claro"] .splash-card input:focus{border-color:#1F5BFF;outline:0;box-shadow:0 0 0 4px rgba(31,91,255,.12)}
:root[data-tema="claro"] .splash-nota{color:#53607D}
:root[data-tema="claro"] .splash-card .link-row a{color:#1D4ED8}
:root[data-tema="claro"] .splash-card a.btn-outline,:root[data-tema="claro"] .splash-card .btn-outline{background:#FFFFFF;color:#1D4ED8;
  border:1.5px solid #C9D7FA;box-shadow:none}
:root[data-tema="claro"] .splash-wrap .ge-tit{color:#0B1430!important}
:root[data-tema="claro"] .splash-wrap .ge-ir b{color:#1D4ED8!important}
:root[data-tema="claro"] .splash-wrap :is(.idioma,.lang){background:#fff;border:1px solid #E1E8F8}
:root[data-tema="claro"] .splash-card :is(p,span,small,a){text-shadow:none}
:root[data-tema="claro"] .splash-card .ge-pri{color:#53607D}
:root[data-tema="claro"] .splash-card .ge-pri b{color:#1D4ED8}
:root[data-tema="noche"] .splash-card .btn-primary{background:var(--t5-btn)}

/* ---------- 7) Entrar con Google ---------- */
.t453-google{margin:14px 0 4px;display:flex;flex-direction:column;align-items:center;gap:10px}
.t453-o{display:flex;align-items:center;gap:10px;width:100%;font:700 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-3)}
.t453-o::before,.t453-o::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}
.t453-gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:0 18px;border-radius:999px;
  background:#fff;color:#1F1F1F;border:1.5px solid #DADCE0;font:700 15px/1 Manrope,system-ui,sans-serif;cursor:pointer}
.t453-gbtn svg{width:20px;height:20px}
.t453-gbtn[disabled]{opacity:.6;cursor:default}
.t453-gnota{margin:0;font:500 12px/1.4 Manrope,system-ui,sans-serif;color:var(--texto-3);text-align:center}
#t453-gsi{display:flex;justify-content:center;width:100%;min-height:44px}

/* ---------- Mi ciclo: dias en tonos suaves en el tema claro (como la referencia) ---------- */
:root[data-tema="claro"] body .ciclo-d::after{display:none}
:root[data-tema="claro"] body .ciclo-d.f-menstrual{background:#FBE1E8!important;color:#9B2C4E!important}
:root[data-tema="claro"] body .ciclo-d.f-folicular{background:#DDF3EF!important;color:#0B6158!important}
:root[data-tema="claro"] body .ciclo-d.f-ovulacion{background:#FBEFD3!important;color:#7A5600!important}
:root[data-tema="claro"] body .ciclo-d.f-lutea{background:#ECE7FA!important;color:#5B47A6!important}
:root[data-tema="claro"] body .ciclo-d.f-lutea_final{background:#DDD5F5!important;color:#47358F!important}
:root[data-tema="claro"] body .ciclo-d.es-regla{outline:2px solid #C2476B!important;outline-offset:-2px}
html body .ciclo-d .ciclo-ener{box-shadow:0 0 0 2px var(--t5-card)}
html body .ciclo-d.t453-sel{outline:3px solid var(--t5-acc)!important;outline-offset:1px}
@media (min-width:720px){html body :is(.ciclo-rej,.ciclo-dow,.t453-ayuda-cal){max-width:470px;margin-left:auto;margin-right:auto}}

/* Recursos: las dos portadas en pareja, con el mismo estilo de tarjeta (texto + portada a la derecha) */
html body .rx-par:has(.t453-rxf2){display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){html body .rx-par:has(.t453-rxf2){grid-template-columns:1fr 1fr}}
html body a.rx-foto.t453-rxf2{position:relative;isolation:isolate;display:flex;align-items:center;min-height:116px;height:auto;aspect-ratio:auto;
  padding:16px 62px 16px 16px;border-radius:24px;overflow:hidden;background:var(--t5-card)!important;box-shadow:none!important;border:0!important}
html body a.rx-foto.t453-rxf2>img,html body a.rx-foto.t453-rxf2 .rx-play{display:none!important}
html body a.rx-foto.t453-rxf2::before,html body a.rx-foto.t453-rxf2::after{display:none!important}
html body a.rx-foto.t453-rxf2 .rx-foto-txt{position:relative;inset:auto;max-width:56%;padding:0;background:none!important}
html body a.rx-foto.t453-rxf2 .rx-foto-txt :is(b,strong,h3,span:not(.rx-cat)){color:var(--t5-tx)!important;text-shadow:none!important}
html body a.rx-foto.t453-rxf2 .rx-cat{color:var(--t5-acc-tx)!important}
html body a.rx-foto.t453-rxf2>.t441-foto{width:48%}
html body .rx-oculto{display:none!important}
html body .splash-card{box-shadow:none!important}
/* login en el tema noche: sus colores, no el azul noche */
:root[data-tema="noche"] .splash-wrap{background:#0A0406!important}
:root[data-tema="noche"]:has(.splash-wrap),:root[data-tema="noche"]:has(.splash-wrap) body{background:#0A0406!important}
:root[data-tema="noche"] .splash-wrap::before{background:radial-gradient(circle,rgba(217,113,75,.22) 0%,rgba(217,113,75,0) 62%)}
:root[data-tema="noche"] .splash-logo-box::before{background:radial-gradient(circle,rgba(217,113,75,.30) 0%,transparent 66%)}
:root[data-tema="noche"] .splash-card{background:#1A0D11!important;border:0!important;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-tema="noche"] .splash-card a.btn-outline,:root[data-tema="noche"] .splash-card .btn-outline{background:transparent;color:#F3E4D8;border-color:rgba(239,163,131,.45)}
:root[data-tema="noche"] .splash-wrap .ge-ir b{color:#EFA383!important}