/* t441 (17-oct-2026): TARJETAS CON FOTO. Mismo fichero en la app de prueba y
   en la de clientes. Va cargado el ultimo de base.html.
   Tarjeta blanca (o azul noche en oscuro), icono en cajita de color suave, numero
   en color, titulo en negrita y la foto entrando por la derecha con un degradado
   que la funde con la tarjeta (mascara: nunca se ve un recuadro). La flecha va en
   un circulo blanco encima de la foto. */
:root{--t441-bg:#FFFFFF;--t441-borde:rgba(47,107,255,.14);--t441-tx:#0E1729;--t441-tx2:#56637F;
  --t441-sombra:0 1px 2px rgba(11,27,77,.05),0 14px 34px -18px rgba(11,27,77,.30);
  --t441-az:#2F6BFF;--t441-ring:rgba(47,107,255,.35)}
:root:not([data-tema="claro"]){--t441-bg:#0F1B3D;--t441-borde:rgba(125,160,255,.20);--t441-tx:#F2F5FF;
  --t441-tx2:#A9B6D8;--t441-sombra:0 16px 34px -18px rgba(0,0,0,.75)}

/* ---------- la tarjeta ---------- */
.t441-rej{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 6px}
.t441-t{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
  min-height:96px;padding:16px 16px 16px 16px;border-radius:24px;background:var(--t441-bg);
  border:1px solid var(--t441-borde);box-shadow:var(--t441-sombra);color:var(--t441-tx);text-decoration:none;
  overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease}
.t441-t:active{transform:scale(.985)}
@media (hover:hover){.t441-t:hover{box-shadow:0 1px 2px rgba(11,27,77,.05),0 20px 40px -18px rgba(31,85,240,.40)}}
.t441-t:focus-visible{outline:2px solid var(--t441-az);outline-offset:3px}
.t441-ancha{grid-column:1/-1;flex-direction:row;align-items:center;min-height:104px;gap:14px}
.t441-grande{min-height:0;justify-content:flex-end;padding-top:118px}

/* la foto: entra desde el lado blanco con degradado */
.t441-foto{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:50%;background:var(--f) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 22%,rgba(0,0,0,.85) 52%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 22%,rgba(0,0,0,.85) 52%,#000 72%)}
.t441-ancha .t441-foto{width:46%}
/* en las grandes la foto ocupa la parte de arriba y baja fundiendose hacia el texto */
.t441-grande .t441-foto{left:0;right:0;width:auto;bottom:auto;height:128px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,rgba(0,0,0,.55) 70%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 40%,rgba(0,0,0,.55) 70%,transparent 100%)}

.t441-ico{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--t441-ico-f,rgba(47,107,255,.12));color:var(--t441-ico,#2F6BFF);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.t441-ico .ic-m{width:22px;height:22px;background:currentColor}
.t441-grande .t441-ico{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);
  box-shadow:0 6px 16px -8px rgba(11,27,77,.5);backdrop-filter:blur(6px)}
:root:not([data-tema="claro"]) .t441-grande .t441-ico{background:rgba(15,27,61,.82)}
.t441-t[data-tono="verde"]{--t441-ico:#0E9F6E;--t441-ico-f:rgba(16,185,129,.14)}
.t441-t[data-tono="violeta"]{--t441-ico:#6B4EFF;--t441-ico-f:rgba(124,92,255,.14)}
.t441-t[data-tono="naranja"]{--t441-ico:#1D4ED8;--t441-ico-f:rgba(37,99,235,.14)}  /* t447: sin naranja, regla blanco y azul */
.t441-t[data-tono="cian"]{--t441-ico:#0891B2;--t441-ico-f:rgba(6,182,212,.15)}
:root:not([data-tema="claro"]) .t441-t{--t441-ico:#8FB0FF}
:root:not([data-tema="claro"]) .t441-t[data-tono="verde"]{--t441-ico:#5EE0B0}
:root:not([data-tema="claro"]) .t441-t[data-tono="violeta"]{--t441-ico:#B4A4FF}
:root:not([data-tema="claro"]) .t441-t[data-tono="naranja"]{--t441-ico:#8FB0FF}  /* t447 */
:root:not([data-tema="claro"]) .t441-t[data-tono="cian"]{--t441-ico:#67D8EE}

.t441-txt{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:58%}
.t441-ancha .t441-txt{flex:1;max-width:none;padding-right:30%}
.t441-grande .t441-txt{max-width:100%;padding-right:42px}
.t441-n{font:800 11.5px/1 Manrope,system-ui,sans-serif;font-style:normal;letter-spacing:.12em;color:var(--t441-ico,#2F6BFF)}
.t441-txt b{font:800 16.5px/1.25 Manrope,system-ui,sans-serif;letter-spacing:-.01em;color:var(--t441-tx)}
.t441-grande .t441-txt b{font-size:17.5px}
.t441-txt small{font:500 13.5px/1.35 Manrope,system-ui,sans-serif;color:var(--t441-tx2)}
.t441-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.t441-chips span{padding:4px 10px;border-radius:999px;background:rgba(47,107,255,.10);color:var(--t441-az);font:700 12px/1.3 Manrope,system-ui,sans-serif}
:root:not([data-tema="claro"]) .t441-chips span{color:#9DB8FF;background:rgba(125,160,255,.14)}
.t441-mov{min-height:132px}

/* flecha en circulo blanco encima de la foto */
.t441-fl{position:absolute;right:14px;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;
  border-radius:50%;background:#fff;color:#1F55F0;box-shadow:0 6px 16px -6px rgba(11,27,77,.45)}
.t441-grande .t441-fl{top:auto;bottom:14px;margin-top:0;width:32px;height:32px}
.t441-fl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.t441-credito{margin:10px 2px 18px;text-align:center;font:500 12px/1.4 Manrope,system-ui,sans-serif}
.t441-credito a{color:var(--t441-tx2);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:8px}

@media (min-width:720px){
  .t441-rej{grid-template-columns:repeat(4,1fr);gap:14px}
  .t441-ancha{grid-column:span 2}
  .t441-mov{grid-column:1/-1}
  .t441-grande{padding-top:150px}
  .t441-grande .t441-foto{height:160px}
  .t441-ancha .t441-txt{padding-right:40%}
}
@media (max-width:359px){.t441-rej{grid-template-columns:1fr}.t441-txt{max-width:62%}}

/* ---------- Aprende a comer: las 12 secciones ---------- */
.n7-sec.t441-sec{position:relative;isolation:isolate;background:var(--t441-bg);border-color:var(--t441-borde);box-shadow:var(--t441-sombra)}
.n7-sec.t441-sec>summary{position:relative;min-height:104px;padding:16px 64px 16px 16px}
.n7-sec.t441-sec>summary .n7-sec-tit{max-width:56%;flex:none;width:56%}
.n7-sec.t441-sec .n7-chev{display:none}
.n7-sec.t441-sec .t441-fl{transition:transform .25s ease}
.n7-sec.t441-sec[open] .t441-fl{transform:rotate(90deg)}
.n7-sec.t441-sec>summary .t441-foto{width:48%}
.n7-sec.t441-sec[open]>summary .t441-foto{opacity:.9}
@media (min-width:720px){.n7-sec.t441-sec>summary{min-height:116px}.n7-sec.t441-sec>summary .t441-foto{width:40%}}
/* errores tipicos: foto partida, mal (rojo) y bien (verde) */
.t441-dos{display:flex;background:none}
.t441-dos i{position:relative;flex:1;background:var(--f) center/cover no-repeat}
.t441-dos i+i{margin-left:2px}
.t441-marcas{position:absolute;right:0;bottom:12px;width:48%;height:24px;pointer-events:none}
@media (min-width:720px){.t441-marcas{width:40%}}
.t441-marcas em{position:absolute;top:0;width:24px;height:24px;margin-left:-12px;border-radius:50%;display:grid;place-items:center;
  font:900 13px/1 system-ui,sans-serif;font-style:normal;color:#fff;box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(0,0,0,.4)}
.t441-marcas .t441-mal{left:25%;background:#E5484D}
.t441-marcas .t441-bien{left:75%;background:#12A150}
.t441-partida .t441-fl{top:28%}
@media (prefers-reduced-motion:reduce){.n7-sec.t441-sec .t441-fl,.t441-t{transition:none}}

/* ---------- Habitos: foto de cada uno (manteniendo pulsado se amplia) ---------- */
.hb-item{position:relative}
.t441-hb-foto{order:3;flex:none;width:58px;height:58px;border-radius:16px;background:var(--f) center/cover no-repeat;
  box-shadow:0 6px 14px -8px rgba(11,27,77,.55);margin-left:auto;-webkit-touch-callout:none;user-select:none}
.t441-zoom{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:rgba(6,12,30,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:t441-in .16s ease}
.t441-zoom figure{margin:0;max-width:min(92vw,520px);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.t441-zoom img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover}
.t441-zoom figcaption{padding:12px 16px 14px;font:800 16px/1.3 Manrope,system-ui,sans-serif;color:#0E1729}
.t441-zoom figcaption small{display:block;font-weight:500;font-size:12.5px;color:#56637F;margin-top:2px}
@keyframes t441-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.t441-zoom{animation:none}}

/* ---------- Filas y tarjetas que decora t441.js (Mi nutricion, Inicio, Progreso) ---------- */
.fx-fila.t441-fila{position:relative;isolation:isolate;overflow:hidden;min-height:96px;padding-right:62px}
.fx-fila.t441-fila .fx-fila-cuerpo{max-width:56%}
.fx-fila.t441-fila>.t441-foto{width:46%}
.fx-fila.t441-fila>.fx-chev{display:none}
.fx-fila.t441-fila>.t441-fl{right:12px}
.pg-kpi.t441-k{position:relative;isolation:isolate;overflow:hidden}
.t441-fila2{position:relative;isolation:isolate;overflow:hidden}
.t441-fila2>.t441-foto{width:42%}
.pg-kpi.t441-k>.t441-foto{width:52%;bottom:auto;height:66%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70%),linear-gradient(180deg,#000 30%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 70%),linear-gradient(180deg,#000 30%,transparent 100%);
  mask-composite:intersect;opacity:.9}
.pg-kpi.t441-k::before{display:none!important}

/* ---------- Creditos ---------- */
.t441-cred{list-style:none;margin:16px 0 30px;padding:0;display:grid;gap:10px}
.t441-cred li{display:flex;gap:12px;align-items:center;padding:10px;border-radius:18px;background:var(--t441-bg);border:1px solid var(--t441-borde)}
.t441-cred img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.t441-cred b{display:block;font:700 13.5px/1.3 Manrope,system-ui,sans-serif;color:var(--t441-tx);word-break:break-word}
.t441-cred small{font:500 12.5px/1.35 Manrope,system-ui,sans-serif;color:var(--t441-tx2)}
.t441-cred a{color:var(--t441-az)}

/* ---------- Fondos sin cortes (lo de t433 en la prueba, tambien en clientes) ---------- */
.sem-card.sem-cal::before,.sem-card:not(.sem-cal)::before{
  top:22px!important;width:176px!important;height:156px!important;
  -webkit-mask:url("../assets/logo-m-silueta.png") center/contain no-repeat,linear-gradient(#000 45%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask:url("../assets/logo-m-silueta.png") center/contain no-repeat,linear-gradient(#000 45%,transparent 100%);
  mask-composite:intersect}
:root[data-tema="claro"] .sem-card.sem-cal::before,:root[data-tema="claro"] .sem-card:not(.sem-cal)::before{opacity:.06!important}
.pg-kpi::before{top:0!important;right:0!important;width:auto!important;height:auto!important;inset:0!important;
  border-radius:inherit!important;opacity:1!important;
  background:linear-gradient(160deg,rgba(91,146,255,.10) 0%,rgba(91,146,255,.02) 40%,transparent 70%)!important}
.r10-sa-cab .r10-ola{left:50%!important;right:auto!important;width:100vw!important;transform:translateX(-50%);
  -webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
html,body{overflow-x:clip}
.pg-rango,.pg-tabs,.n7-tabs,.rx-chapas{padding-top:6px!important;padding-bottom:16px!important;
  margin-top:-6px!important;margin-bottom:-12px!important}

/* ---------- Pantalla de entrada (logo M) ----------
   En claro el fondo azul noche era una columna de 684 px en una pagina blanca:
   se veia como un recuadro. Ahora el azul noche llega a los bordes. Y dos textos
   de la guia «Primera vez» salian casi negros sobre azul noche. */
html:has(.splash-wrap),html:has(.splash-wrap) body{background:#070C1B!important}
.splash-wrap .ge-tit{color:#F1F5FB!important}
.splash-wrap .ge-ir b{color:#9DB8FF!important}

/* Entrenar, «Hoy te toca»: el brillo azul del boton Empezar se cortaba en un
   rectangulo (la caja de dentro corta lo que sobresale). Se le da aire. */
.dia .dia-cuerpo>div{padding:0 22px 26px;margin:0 -22px -26px}