/* t465 (18-oct-2026): REDISEÑO MODERNO de las 4 apps con el lenguaje de la pestaña Running de las capturas
   de Miguel (la versión buena). Mismo fichero en las dos apps, cargado el ÚLTIMO (después de t461.css).
   - Fondo blanco azulado, títulos de sección en azul, MAYÚSCULAS y espaciados.
   - Tarjeta: icono azul eléctrico en cajita azul clara arriba a la izquierda, título en negrita abajo a la
     izquierda, foto a la derecha que se funde hacia la izquierda y flecha en círculo blanco.
   - Rejilla de 2 columnas en el móvil, 3 en tableta y 4 en ordenador.
   - Iconos SIEMPRE del mismo azul (nada de morado, naranja, verde o rosa en los iconos).
   - Lo que NO se copia de las versiones malas: icono en círculo blanco centrado sobre la foto, multicolor.
   - La pantalla de entrada no cambia. Tema oscuro y noche: mismas formas con sus colores. */

:root{
  --t5-pag:#F3F6FE; --t5-card:#FFFFFF; --t5-borde:#E2E9F7; --t5-tx:#0B1430; --t5-tx2:#5B6782;
  --t5-az:#1F5BFF; --t5-az-tx:#1D4ED8; --t5-suave:#EAF0FF; --t5-blanco:#FFFFFF;
  --t5-sombra:0 1px 2px rgba(16,36,94,.05), 0 14px 30px -18px rgba(16,36,94,.28);
  --t5-sombra2:0 2px 4px rgba(16,36,94,.06), 0 22px 40px -20px rgba(31,91,255,.42);
}
:root:not([data-tema]){
  --t5-pag:#060B1A; --t5-card:#0E1834; --t5-borde:rgba(160,185,255,.14); --t5-tx:#F2F5FF; --t5-tx2:#AEBBDD;
  --t5-az:#4F84FF; --t5-az-tx:#9DB8FF; --t5-suave:rgba(79,132,255,.16); --t5-blanco:#16224A; --t5-sombra:none; --t5-sombra2:none;
}
:root[data-tema="noche"]{
  --t5-pag:#0A0406; --t5-card:#1A0D11; --t5-borde:rgba(255,220,200,.10); --t5-tx:#F3E4D8; --t5-tx2:#C9AC98;
  --t5-az:#D9714B; --t5-az-tx:#EFA383; --t5-suave:rgba(217,113,75,.16); --t5-blanco:#2A161B; --t5-sombra:none; --t5-sombra2:none;
}

/* ============ 1) títulos de sección: azul, mayúsculas, espaciado ============ */
.t465-sec, html body main h2.ini-sub, html body main .ini-sub{
  font:800 12.5px/1.2 Manrope, system-ui, sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase;
  color:var(--t5-az-tx)!important;margin:22px 4px 12px!important;padding:0!important}

/* ============ 2) la tarjeta nueva (t465-t) ============ */
.t465-acc{margin:6px 0 20px}
.t465-acc .t465-sec{margin-top:8px!important}
.t465-rej{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
@media (min-width:640px){.t465-rej{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (min-width:980px){.t465-rej{grid-template-columns:repeat(4, minmax(0, 1fr))}}
.t465-t{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  min-height:138px;padding:14px;border-radius:22px;background:var(--t5-card);border:1px solid var(--t5-borde);
  box-shadow:var(--t5-sombra);color:var(--t5-tx);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .2s ease}
.t465-t:active{transform:scale(.98)}
@media (hover:hover){.t465-t:hover{box-shadow:var(--t5-sombra2)}}
.t465-t:focus-visible{outline:3px solid var(--t5-az);outline-offset:3px}
/* foto a la derecha, fundiéndose hacia la izquierda (la máscara funde la FOTO, así sirve en cualquier tema) */
.t465-foto{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:66%;background:var(--f) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%);
          mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%)}
/* y un velo suave abajo a la izquierda para que el título se lea siempre */
.t465-t::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--t5-card) 0, color-mix(in srgb, var(--t5-card) 70%, transparent) 38%, transparent 62%)}
.t465-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--t5-suave);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t5-card) 70%, transparent)}
.t465-ico .ic-m{width:22px;height:22px;background:var(--t5-az)!important}
.t465-txt{display:flex;flex-direction:column;gap:3px;max-width:72%;margin-top:18px}
.t465-txt b{font:800 15.5px/1.18 Manrope, system-ui, sans-serif;color:var(--t5-tx);letter-spacing:-.01em;
  text-shadow:0 0 10px var(--t5-card), 0 0 2px var(--t5-card)}
.t465-txt small{font:600 12px/1.25 Manrope, system-ui, sans-serif;color:var(--t5-tx2);
  text-shadow:0 0 8px var(--t5-card), 0 0 2px var(--t5-card)}
.t465-fl{position:absolute;right:10px;bottom:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--t5-blanco);color:var(--t5-az);box-shadow:0 4px 12px -4px rgba(11,27,77,.35)}
.t465-fl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:359px){.t465-txt b{font-size:14px}.t465-t{min-height:128px}}

/* ============ 3) las tarjetas con foto que ya había (t441: Salud, Recursos, Nutrición...) ============ */
/* En rejilla (t465.js las agrupa si van seguidas): mismo lenguaje que la tarjeta nueva. */
html body main .t465-rej-441{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin:0 0 16px}
@media (min-width:640px){html body main .t465-rej-441{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (min-width:980px){html body main .t465-rej-441{grid-template-columns:repeat(4, minmax(0, 1fr))}}
html body main .t465-rej-441 > .t441-t{margin:0!important;min-height:150px!important;padding:14px!important;
  flex-direction:column!important;justify-content:space-between!important;align-items:flex-start!important;gap:0!important;
  border-radius:22px!important;overflow:hidden}
html body main .t465-rej-441 > .t441-t.t441-grande, html body main .t465-rej-441 > .t441-t.t441-ancha.t465-dos{grid-column:1 / -1}
html body main .t465-rej-441 > .t441-t .t441-foto{left:auto!important;right:0!important;top:0!important;bottom:0!important;
  width:66%!important;height:auto!important;border-radius:0!important;
  -webkit-mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%)!important;
          mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%)!important}
html body main .t465-rej-441 > .t441-t .t441-foto::before, html body main .t465-rej-441 > .t441-t .t441-foto::after{display:none!important}
html body main .t465-rej-441 > .t441-t::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--t5-card) 0, color-mix(in srgb, var(--t5-card) 70%, transparent) 38%, transparent 62%)}
html body main .t465-rej-441 > .t441-t .t441-ico{position:static!important;width:42px!important;height:42px!important;
  background:var(--t5-suave)!important;color:var(--t5-az)!important;border-radius:13px!important}
html body main .t465-rej-441 > .t441-t .t441-txt{max-width:74%!important;margin-top:16px;gap:3px!important}
html body main .t465-rej-441 > .t441-t .t441-txt b{font:800 15.5px/1.18 Manrope, system-ui, sans-serif!important;
  text-shadow:0 0 10px var(--t5-card), 0 0 2px var(--t5-card)}
html body main .t465-rej-441 > .t441-t .t441-txt small{font:600 12px/1.25 Manrope, system-ui, sans-serif!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 0 8px var(--t5-card), 0 0 2px var(--t5-card)}
html body main .t465-rej-441 > .t441-t .t441-n{display:none!important}
html body main .t465-rej-441 > .t441-t .t441-fl{top:auto!important;bottom:10px!important;right:10px!important;margin:0!important;
  width:32px!important;height:32px!important;background:var(--t5-blanco)!important;color:var(--t5-az)!important;
  box-shadow:0 4px 12px -4px rgba(11,27,77,.35)!important}
/* las chips de «Movilidad» y similares, dentro de la tarjeta ancha */
html body main .t465-rej-441 > .t441-t .t441-txt :is(.t441-chips, ul){margin-top:6px}

/* ============ 4) iconos: un solo azul en todas las cajitas ============ */
html body main :is(.t441-t, .t453-t, .t461-op, .mg-cabt, .fx-fila, .n7-sec) :is(.t441-ico, .t453-ico, .fx-ico, .n7-ico){
  --t441-ico:var(--t5-az);--t441-ico-f:var(--t5-suave);background:var(--t5-suave)!important;color:var(--t5-az)!important}
html body main :is(.t441-ico, .t453-ico, .fx-ico, .n7-ico, .mv-ico, .sa-ico, .r10-ico, .r10-kico, .t457-ico) .ic-m{background:var(--t5-az)!important}
html body main .t441-t[data-tono]{--t441-ico:var(--t5-az)!important;--t441-ico-f:var(--t5-suave)!important}

/* ============ 5) «¿En qué momento estás?» (Mi ciclo): icono en círculo azul y flecha en círculo blanco ============ */
html body .t461-op .t461-op-ilus{background:var(--t5-suave)!important;color:var(--t5-az)!important}
html body .t461-op{padding-right:56px!important;box-shadow:var(--t5-sombra)}
html body .t461-op .t461-radio{order:-1}
html body .t461-op::after{content:"";position:absolute;right:12px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  background:var(--t5-blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%231F5BFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 4px 12px -4px rgba(11,27,77,.30);border:1px solid var(--t5-borde)}

/* ============ 6) tarjetas generales: un pelo más modernas ============ */
html body main :is(.card, .t461-card, .hoy-card, .pg-kpi, .md-card, .pf-card){border-radius:24px!important}
html:not(:has(.splash-wrap)) body{background:var(--t5-pag)!important}

/* ============ 7) Running: la rejilla va primero; lo de abajo sigue igual ============ */
html body main .ru-hero .ru-hero-chips{display:none}  /* sus 4 atajos ya están en la rejilla de arriba */

@media (prefers-reduced-motion:reduce){.t465-t{transition:none}}

/* ============ 8) tarjeta con candado (prueba: lo que se desbloquea al comprar) ============ */
/* El candado de la prueba centraba la tarjeta: aquí sigue la misma forma y el candado va de chapa arriba a la derecha. */
html body main a.t465-t.sp-bloq{display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:space-between!important;gap:0!important;padding:14px!important;border-radius:22px!important;
  background:var(--t5-card)!important;border:1px solid var(--t5-borde)!important;min-height:138px}
html body main a.t465-t.sp-bloq > .sp-candado{position:absolute;top:10px;right:10px;width:30px!important;height:30px!important;
  padding:6px;border-radius:50%;background:var(--t5-blanco);color:var(--t5-az);filter:none!important;
  box-shadow:0 4px 12px -4px rgba(11,27,77,.35);z-index:2}
html body main a.t465-t.sp-bloq{filter:none!important;color:var(--t5-tx)!important;box-shadow:var(--t5-sombra)!important}
html body main .t465-rej-441 > .t441-t.t441-ancha:not(.t465-dos){grid-column:auto!important}
html body main .t465-rej-441 > .t441-t.t465-dos{grid-column:1 / -1!important}
html body main .t465-rej-441 > .t441-t .t441-txt{max-width:none!important;width:auto!important;padding-right:34px!important;flex:none!important}
html body main .t465-rej-441 > .t441-t:not(.t465-dos) .t441-txt{max-width:100%!important}
html body main .t465-rej-441 > .t441-t.t465-dos .t441-txt{max-width:58%!important;padding-right:0!important}
html body main .t465-rej-441 > .t441-t .t441-chips{display:flex!important;flex-wrap:wrap;gap:6px}
html body main .t465-rej-441 > .t441-t .t441-chips > span{margin:0!important}
html body .t461-op:has(input:checked) .t461-op-ilus{background:var(--t5-blanco)!important}