/* ==========================================================================
   REDISEÑO CON LAS 10 CAPTURAS DE REFERENCIA DE MIGUEL (16-oct-2026)
   Va el ULTIMO de las hojas para mandar sin tocar las de antes: si algo de
   aqui no gusta, se quita esta hoja (y su <link> en base.html) y la app vuelve
   a como estaba. Es solo estetica: candados y grises de bloqueo siguen siendo
   cosa de semana_prueba.py y solo salen en la app de prueba.

   Reglas comunes:
   - margen lateral 18px en toda la app (el de .wrap), nada pegado al borde.
   - iconos de linea fina dentro de un cuadrado redondeado azul oscuro con un
     brillo suave; en filas de lista, circulo con borde azul brillante.
   - tarjetas oscuras con borde azul fino; destacados en azul brillante.
   Lo decorativo (brillos, olas) solo en el tema oscuro, que es el de las
   capturas; en claro y noche se queda lo estructural.
   ========================================================================== */

:root{
  --r10-azul:#2F6BFF;
  --r10-azul-vivo:#3D7BFF;
  --r10-borde:rgba(91,146,255,.26);
  --r10-borde-vivo:rgba(91,146,255,.62);
  --r10-ico-fondo:linear-gradient(160deg,#18337A 0%,#0C1D4A 100%);
  --r10-margen:18px;
}

/* ---------- margenes: lo que iba pegado al borde ---------- */
.inst-tira{margin-left:var(--r10-margen)!important;margin-right:var(--r10-margen)!important;border-radius:16px}
.sp-mis-acceso{margin-left:var(--r10-margen)!important;margin-right:var(--r10-margen)!important}

/* ---------- iconos: cuadrado azul oscuro con brillo ---------- */
:root:not([data-tema]) .fx-ico,
:root:not([data-tema]) .sa-ico,
:root:not([data-tema]) .r10-ico{
  background:var(--r10-ico-fondo);
  box-shadow:inset 0 0 0 1px rgba(110,155,255,.38), inset 0 1px 0 rgba(255,255,255,.10), 0 0 16px rgba(47,107,255,.22);
}
.r10-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(var(--pri-rgb),.16)}
.r10-ico .ic-m{width:22px;height:22px;background:var(--azul-txt)}
.r10-ico svg{width:22px;height:22px;fill:none;stroke:var(--azul-txt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* circulo con borde azul brillante (filas de Mi nutricion, Avisos...) */
.fx-ico.redondo{border-radius:50%}
:root:not([data-tema]) .fx-ico.redondo{
  background:radial-gradient(circle at 50% 35%,#16306E 0%,#0A1636 100%);
  box-shadow:inset 0 0 0 1.5px rgba(96,150,255,.95), 0 0 14px rgba(47,107,255,.38);
}
:root:not([data-tema]) .fx-ico.redondo .ic-m{background:#BFD3FF}

/* ---------- tarjetas oscuras con borde azul fino ---------- */
:root:not([data-tema]) .card,
:root:not([data-tema]) .fx-fila,
:root:not([data-tema]) .rx-fila{
  box-shadow:inset 0 0 0 1px var(--r10-borde), 0 10px 28px rgba(0,0,0,.22);
}
:root:not([data-tema]) .card{border-color:var(--r10-borde)}
.mg-rot{letter-spacing:.09em}
.mg-tt{font-weight:750}

/* ---------- botón circular › (filas) ---------- */
.fx-chev{border-radius:50%}
:root:not([data-tema]) .fx-chev{box-shadow:inset 0 0 0 1px var(--r10-borde-vivo);background:rgba(47,107,255,.10)}

/* ==========================================================================
   1) RECURSOS
   ========================================================================== */
.rx-cab h1{font-size:30px;letter-spacing:-.02em}
.rx-chapa.on{background:var(--r10-azul);border-color:var(--r10-azul)}
.rx-grande{min-height:200px;border-color:var(--r10-borde)}
:root:not([data-tema]) .rx-grande{
  background:radial-gradient(120% 120% at 85% 40%,rgba(47,107,255,.32) 0%,rgba(10,18,38,0) 60%),var(--n2);
  box-shadow:inset 0 0 0 1px var(--r10-borde),0 16px 36px rgba(0,0,0,.28);
}
/* la ilustracion 3D a la derecha (Habitos), sin degradado encima */
.rx-grande.r10-con-ilus::after{display:none}
.rx-ilus{position:absolute;right:0;top:50%;transform:translateY(-50%);width:46%;max-width:180px;height:auto;pointer-events:none}
.rx-grande.r10-con-ilus .rx-grande-txt{max-width:60%}
.rx-boton{background:var(--r10-azul);padding:11px 12px 11px 16px;white-space:nowrap}
.rx-boton .fx-chev{width:24px;height:24px;display:inline-grid;place-items:center;background:rgba(0,0,0,.28);box-shadow:none}

/* las de foto: foto a sangre con degradado oscuro por los lados y abajo */
.rx-foto{aspect-ratio:4/5;border-color:var(--r10-borde)}
.rx-foto::after{
  background:
    linear-gradient(0deg, rgba(4,8,20,.95) 0%, rgba(4,8,20,.62) 30%, rgba(4,8,20,0) 60%),
    linear-gradient(90deg, rgba(4,8,20,.55) 0%, rgba(4,8,20,0) 22%, rgba(4,8,20,0) 78%, rgba(4,8,20,.55) 100%);
}
.rx-foto .rx-cat,.rx-grande .rx-cat{color:#6F9BFF;letter-spacing:.12em;font-size:10px}
.rx-foto-txt b{font-size:15.5px;font-weight:750}
.rx-play{width:34px;height:34px;background:rgba(47,107,255,.85);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.rx-play .ic-m{width:13px;height:13px;margin-left:2px}

.rx-mas-cab{align-items:center;text-decoration:none;color:inherit}
.rx-mas-cab b{font-size:17px}
.rx-mas-cab .r10-mas-fl{margin-left:6px;color:var(--azul-txt);font-weight:700}

/* ==========================================================================
   2) INICIO (pantalla de Miguel): «Te toca», tarjetas, explicado
   ========================================================================== */
:root:not([data-tema="noche"]) .mg-accion{
  background:linear-gradient(135deg,#4C7DFF 0%,#2F6BFF 45%,#1747D8 100%);
  box-shadow:0 14px 34px rgba(47,107,255,.40), inset 0 1px 0 rgba(255,255,255,.22);
  padding:16px;border-radius:20px;
}
.r10-accion-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.30)}
.r10-accion-ico .ic-m{width:23px;height:23px;background:#fff}
.mg-accion .mg-flecha.r10-circ{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);font-size:17px}
.mg-recursos .rx-mini{width:64px;height:52px;border-radius:12px}
.mg-recursos .rx-mini img.r10-mini-ilus{object-fit:contain;padding:3px;background:radial-gradient(circle,#1B3A8A 0%,#0A1636 100%)}
.mg-vertodos{border-color:var(--r10-borde-vivo)!important}

/* ==========================================================================
   3) SALUD
   ========================================================================== */
.r10-sa-cab{position:relative;isolation:isolate;padding:6px 0 4px}
.r10-ola{position:absolute;z-index:-1;left:calc(-1 * var(--r10-margen));right:calc(-1 * var(--r10-margen));top:-26px;height:150px;pointer-events:none;overflow:hidden}
.r10-ola svg{width:100%;height:100%;display:block}
:root[data-tema] .r10-ola{opacity:.35}
.r10-sa-cab h1{font-size:30px;letter-spacing:-.02em}

.sa-hero.r10-hero{padding:20px 150px 20px 18px;min-height:150px;border-radius:22px;overflow:hidden;border-color:var(--r10-borde)}
:root:not([data-tema]) .sa-hero.r10-hero{
  background:radial-gradient(90% 120% at 90% 50%,rgba(47,107,255,.34) 0%,rgba(10,18,38,0) 60%),linear-gradient(140deg,#0E1C44,#0A1226 70%);
  box-shadow:inset 0 0 0 1px var(--r10-borde),0 16px 36px rgba(0,0,0,.28);
}
.r10-hero .sa-et{color:#7FA6FF}
.r10-hero b{font-size:28px}
.r10-hero .r10-corazon{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:146px;height:146px;pointer-events:none}
.r10-hero .sa-flecha{display:none}
.r10-hero .r10-hero-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 14px;border-radius:999px;
  background:var(--r10-azul);color:#fff;font-size:13px;font-weight:700}

/* tarjetas de color suave por area */
:root:not([data-tema]) .sa-tarj[data-tono]{
  background:linear-gradient(150deg,color-mix(in srgb,var(--tono) 20%,#0A1226) 0%,#0A1226 72%);
  border-color:color-mix(in srgb,var(--tono) 38%,transparent);
}
.sa-tarj[data-tono="naranja"]{--tono:#FF9A4D;--tono-glow:rgba(255,154,77,.26)}
:root[data-tema="claro"] .sa-tarj[data-tono="naranja"]{--tono:#B65A12;--tono-glow:rgba(182,90,18,.16)}
.sa-tarj[data-tono] .sa-ico{border-radius:12px}
:root:not([data-tema]) .sa-tarj[data-tono] .sa-ico{
  background:color-mix(in srgb,var(--tono) 22%,#0A1226);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tono) 55%,transparent),0 0 14px var(--tono-glow);
}
.sa-tarj[data-tono] .sa-ico .ic-m{background:var(--tono)}
/* las anchas son filas: icono + titulo + descripcion + › */
.sa-tarj.ancha{padding:13px 14px}
.sa-tarj.ancha .r10-txt{flex:1;min-width:0}
.sa-tarj.ancha .r10-txt b{margin:0}
.sa-tarj.ancha .r10-fl{flex:none;color:var(--texto-3);font-size:22px;line-height:1}

/* grafico de pasos: barras azules */
.vida-barras.pasos i{background:linear-gradient(180deg,#5B92FF,#2F6BFF)!important;opacity:.9}
.vida-barras.pasos i.vacia{background:rgba(91,146,255,.18)!important}
.vida-barras.pasos i.hoy{box-shadow:0 0 10px rgba(47,107,255,.6)}

/* ==========================================================================
   4) PROGRESO: 2x2 con icono en circulo azul, pestañas en pildora
   ========================================================================== */
.pg-kpi{padding-top:14px}
.pg-kpi .r10-kico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin:0 0 9px;
  background:radial-gradient(circle at 50% 35%,#2F6BFF,#1238B8);box-shadow:0 0 14px rgba(47,107,255,.40)}
.pg-kpi .r10-kico .ic-m{width:17px;height:17px;background:#fff}
.pg-kpi .k-v{font-size:26px}
.pg-kpi[data-tono] .k-t{color:var(--texto-2)}
.pg-tabs{border-radius:999px;padding:4px}
.pg-tabs a{border-radius:999px}
.pg-tabs a.on{background:var(--r10-azul);color:#fff;box-shadow:0 6px 16px rgba(47,107,255,.35)}
.pg-r{border-radius:999px}

/* ==========================================================================
   5) MI NUTRICION / ALIMENTACION / ¿CUANTO ES ESO?
   ========================================================================== */
.fx-fila{padding:16px 15px;border-radius:20px}
.fx-fila .fx-ico.redondo{width:48px;height:48px}
.fx-fila b{font-size:16px}
/* macros con iconos de colores */
.gr-macros span{display:inline-flex;align-items:center;gap:5px}
.gr-macros .r10-mac::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--c) var(--i) center/10px 10px no-repeat;box-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent)}
.r10-mac.kcal{--c:#FF8A3D;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 4 5 5.5 5 10a5 5 0 0 1-10 0c0-2.5 1.5-3.5 2-5 1 1.5 1.5 2 2 2 0-3-.5-5 1-7z'/%3E%3C/svg%3E")}
.r10-mac.prot{--c:#FF5C7A;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4a5 5 0 0 1 3 9l-6 6-3-3 6-6'/%3E%3Cpath d='M9 16l-3 3'/%3E%3C/svg%3E")}
.r10-mac.hc{--c:#F5C33B;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V8M12 8c-3 0-4-3-4-5 2 0 4 1 4 5zM12 8c3 0 4-3 4-5-2 0-4 1-4 5zM12 14c-3 0-4-3-4-5 2 0 4 1 4 5zM12 14c3 0 4-3 4-5-2 0-4 1-4 5z'/%3E%3C/svg%3E")}
.r10-mac.gras{--c:#3DD68C;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E")}
.gr-foto{border-radius:16px;box-shadow:inset 0 0 0 1px var(--r10-borde)}

/* ==========================================================================
   6) AVISOS y 7) AYUDA
   ========================================================================== */
.ay-num,.ay-paso-n{font-variant-numeric:tabular-nums}

@media (max-width:359px){
  .sa-hero.r10-hero{padding-right:118px}
  .r10-hero .r10-corazon{width:116px;height:116px}
  .rx-grande.r10-con-ilus .rx-grande-txt{max-width:64%}
}

/* las cuatro chapas de Recursos caben enteras a 390 px (Todos, Hábitos, Comida, Calentamiento) */
.rx-chapas{gap:6px}
.rx-chapa{padding:9px 12px;font-size:13px}
@media (max-width:389px){.rx-chapa{padding:8px 10px;font-size:12.5px}}

/* Perfil: «Elegir de la galería» se salía 3 px por la derecha a 390 px */
.pf-foto-btns{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.pf-foto-btns .btn{min-width:0;padding-left:10px;padding-right:10px;gap:8px;font-size:14px;white-space:nowrap}