/* t450 (18-oct-2026): app de CLIENTES con el mismo diseño que la prueba.
   Copia literal de las partes de diseño de t433.css de la prueba (fondos sin
   cortes y el día de hoy en una pastilla azul). Nada de tarifas ni candados. */
:root{--t4-grad:linear-gradient(135deg,#3B7BFF 0%,#1F55F0 50%,#0A36C9 100%)}
/* ===================================================================
   1) FONDOS QUE SE VEIAN COMO RECUADROS CORTADOS
   =================================================================== */
/* a) La M de agua de «Tu semana» (Inicio y Entrenar) se salia por arriba
   (top:-6px) y la tarjeta la cortaba en seco. Ahora va entera, mas pequena y
   se desvanece hacia abajo en vez de cortarse. */
.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}

/* b) Salud: cada tarjeta pequena llevaba un cuadrado de 118 px con el degradado
   de la tarjeta pegado en una esquina (dos reglas de antes se mezclaban). El
   degradado vuelve a ocupar la tarjeta entera. */
.sa-tarj::before,.sa-tarj.ancha::before{inset:0!important;top:0!important;right:0!important;width:auto!important;
  height:auto!important;border-radius:inherit!important;opacity:1!important}

/* c) Progreso: los cuatro indicadores llevaban una mancha de color (morado,
   verde, ambar) cortada por la esquina. Fuera la mancha; queda el degradado
   azul de todas las tarjetas, entero. */
.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}

/* d) «Tu salud»: en ordenador la ola azul de la cabecera era un rectangulo del
   ancho de la columna, cortado a los dos lados. Ahora ocupa toda la pantalla y
   se funde por abajo. */
.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}

/* e) Pestanas que se deslizan (Progreso, Nutricion, Recursos): la sombra del
   boton elegido se cortaba en una linea recta por abajo. */
.pg-rango,.pg-tabs,.n7-tabs,.rx-chapas{padding-top:6px!important;padding-bottom:16px!important;
  margin-top:-6px!important;margin-bottom:-12px!important}
.pg-rango,.rx-chapas{padding-left:4px!important;padding-right:4px!important;margin-left:-4px!important;margin-right:-4px!important}

/* El dia de hoy en «Tu semana» (Entrenar): era un recuadro dentro de otro
   recuadro. Ahora una sola pastilla azul. */
.sc-dia.hoy .sc-toca{background:transparent!important}
:root[data-tema="claro"] .sc-dia.hoy{background:var(--t4-grad)!important;border-color:transparent!important;
  box-shadow:0 8px 18px -8px rgba(31,85,240,.7)}
:root[data-tema="claro"] .sc-dia.hoy,:root[data-tema="claro"] .sc-dia.hoy *{color:#fff!important}