/* t448 (18-oct-2026): CORRECCIONES DE DISENO tras la revision t446. Mismo fichero en
   la app de prueba (prueba, Plan Libre, Plan Premium) y en la de clientes. Va
   cargado detras de t441.css en base.html. Regla de Miguel: blanco y azul electrico.
   1) Salud: las 9 tarjetas iguales (icono en cajita de color, numero propio, titulo,
      foto grande a la derecha con degradado y flecha en circulo blanco).
   2) Fuera los naranjas pequenos: barra «Grasa», vinetas y avisos de Aprende a comer.
   4) Plan Libre/Premium: «Mis rutinas» pasa de franja azul oscuro a una linea fina.
   5) El boton «Planes» se aparta de la tarjeta Hoy (lo hace js/t448.js). */
:root{--t448-az:#1F55F0;--t448-az2:#2F6BFF}
:root:not([data-tema="claro"]){--t448-az:#8FB0FF;--t448-az2:#9DB8FF}

/* ---------- 1) Salud ---------- */
#t441-salud .t441-t{min-height:112px;padding:16px 64px 16px 16px;gap:14px;
  background:linear-gradient(90deg,var(--t441-bg) 0,var(--t441-bg) 45%,transparent 100%),var(--t441-bg)}
#t441-salud .t441-foto{width:50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 16%,rgba(0,0,0,.7) 42%,#000 68%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 16%,rgba(0,0,0,.7) 42%,#000 68%)}
#t441-salud .t441-txt{padding-right:34%;gap:4px}
#t441-salud .t441-txt b{font-size:17px}
#t441-salud .t441-txt small{font-size:13px}
/* numero propio: 01, 02... en azul electrico con un trazo fino detras */
#t441-salud .t441-n{display:inline-flex;align-items:center;gap:7px;color:var(--t448-az);font-size:12px;letter-spacing:.14em}
#t441-salud .t441-n::after{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;opacity:.45}
/* cajita del icono: con un aro fino de su color para que no se pierda sobre blanco */
#t441-salud .t441-ico{width:46px;height:46px;border-radius:15px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t441-ico,#2F6BFF) 22%,transparent)}
/* flecha: circulo blanco con un poco mas de sombra para separarla de la foto */
#t441-salud .t441-fl{right:14px;width:38px;height:38px;margin-top:-19px;box-shadow:0 8px 18px -8px rgba(11,27,77,.55),0 0 0 1px rgba(47,107,255,.10)}
#t441-salud .t441-mov{min-height:136px}
#t441-salud .t441-mov .t441-txt{padding-right:30%}
@media (min-width:720px){
  #t441-salud .t441-t{min-height:124px}
  #t441-salud .t441-ancha .t441-txt{padding-right:36%}
  #t441-salud .t441-mov .t441-txt{padding-right:46%}
  #t441-salud .t441-foto{width:48%}
  #t441-salud .t441-mov .t441-foto{width:46%}
}
@media (max-width:359px){#t441-salud .t441-txt{padding-right:26%}}

/* ---------- 2) sin naranjas: Aprende a comer y guias ---------- */
.gn-a-gras{--gn-ac:#2F6BFF;--gn-ac-f:rgba(47,107,255,.14)}
:root[data-tema="claro"] .gn-a-gras{--gn-ac:#1F55F0}
.n7-b-gras{background:#1F55F0!important}
:root:not([data-tema="claro"]) .n7-b-gras{background:#4F7DFF!important}
/* t337-nutri.css va despues: por eso «body» delante */
body .n7-aviso{background:rgba(47,107,255,.08);border-color:rgba(47,107,255,.35)}
body .n7-aviso .n7-ico,:root[data-tema="claro"] body .n7-aviso .n7-ico{--gn-ac:#2F6BFF;--gn-ac-f:rgba(47,107,255,.16)}
:root[data-tema="claro"] body .n7-aviso .n7-ico{--gn-ac:#1F55F0}

/* ---------- 4) «Mis rutinas»: una linea fina blanca y azul ---------- */
a.sp-mis-acceso:not(.sp-bloq){display:flex!important;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding:7px 14px!important;margin-top:8px!important;border-radius:12px!important;
  background:#fff!important;border:1px solid rgba(47,107,255,.28)!important;box-shadow:none!important;
  color:#1F55F0!important;font:700 13.5px/1.25 Manrope,system-ui,sans-serif!important;text-decoration:none!important}
a.sp-mis-acceso:not(.sp-bloq) .t448-mas{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#1F55F0;color:#fff;font:800 14px/1 system-ui,sans-serif}
:root:not([data-tema="claro"]) a.sp-mis-acceso:not(.sp-bloq){background:rgba(125,160,255,.08)!important;
  border-color:rgba(125,160,255,.32)!important;color:#9DB8FF!important}
:root:not([data-tema="claro"]) a.sp-mis-acceso:not(.sp-bloq) .t448-mas{background:#2F6BFF}
@media (hover:hover){a.sp-mis-acceso:not(.sp-bloq):hover{border-color:#2F6BFF!important}}

/* ---------- 5) boton Planes: se aparta deslizandose ---------- */
.sp-dock.t448-aparta{transition:bottom .22s ease}
@media (prefers-reduced-motion:reduce){.sp-dock.t448-aparta{transition:none}}