/* =====================================================================
   LUMEN 2 · Nueva identidad
   Se carga la última. Porcelana, tinta azul profundo y cinco pasteles,
   uno por cada parte de tu vida. Inter Tight para títulos, Inter para leer.
   La única pieza llamativa es la rueda del Inicio: todo lo demás, tranquilo.
   ===================================================================== */

:root {
  /* ---------- Paleta ---------- */
  --porcelana: #FAFAF8;      /* fondo de toda la app */
  --blanco: #FFFFFF;         /* superficies */
  --perla: #F1F2F4;          /* zonas agrupadas, pistas, campos */
  --perla-2: #E7E9ED;        /* hover sobre perla */
  --tinta: #222B3D;          /* texto y botones principales */
  --tinta-2: #5B6475;
  --tinta-3: #8E95A3;

  /* Un pastel por área (suave = fondo, fuerte = texto/acento legible) */
  --salud: #DDE9DF;       --salud-fuerte: #3F6B51;
  --tiempo: #DCEAF7;      --tiempo-fuerte: #2F5D8A;
  --estudio-c: #E7DFF7;   --estudio-c-fuerte: #5B4B8A;
  --personal-c: #F3E1E5;  --personal-c-fuerte: #8A4B5C;
  --imagen-c: #F6E8DA;    --imagen-c-fuerte: #85603A;

  /* ---------- Los nombres antiguos apuntan a la nueva paleta ---------- */
  --hueso: var(--porcelana);
  --hueso-2: var(--perla);
  --crema: var(--blanco);
  --gris-mate: #DADDE3;
  --gris-mate-2: #9AA1AD;
  --cielo: #A9CBE8;
  --cielo-2: #DCEAF7;
  --cielo-3: #7FA9D3;
  --marino: var(--tinta);
  --marino-2: #3A4660;
  --marca: var(--tinta);
  --marca-hover: #141A27;
  --marca-profundo: #141A27;
  --fondo: var(--porcelana);
  --fondo-2: var(--perla);
  --superficie: var(--blanco);
  --linea: #ECEDF0;
  --linea-2: #E1E3E8;
  --vidrio: rgba(250, 250, 248, .72);
  --niebla: var(--perla);
  --niebla-2: var(--perla-2);

  --deporte: var(--salud);          --deporte-fuerte: var(--salud-fuerte);
  --nutricion: #E4EEE6;             --nutricion-fuerte: var(--salud-fuerte);
  --estudio: var(--estudio-c);      --estudio-fuerte: var(--estudio-c-fuerte);
  --personal: var(--personal-c);    --personal-fuerte: var(--personal-c-fuerte);
  --diario: var(--imagen-c);        --diario-fuerte: var(--imagen-c-fuerte);

  /* ---------- Tipografía ---------- */
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulo: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;

  /* ---------- Profundidad: dos niveles, nada más ---------- */
  --sombra-1: 0 1px 1px rgba(34, 43, 61, .03), 0 6px 18px -8px rgba(34, 43, 61, .10);
  --sombra-2: 0 2px 6px rgba(34, 43, 61, .04), 0 28px 60px -24px rgba(34, 43, 61, .28);
  --r-panel: 26px;
  --nav-alto: 64px;
}

html, body { background: var(--porcelana); }
body { color: var(--tinta); }
h1, h2, h3, .modal-titulo, .cal-titulo, .saludo-hoy { font-family: var(--fuente-titulo); letter-spacing: -0.035em; }
::selection { background: var(--tiempo); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 10px; }
input:hover, select:hover, textarea:hover { background: var(--perla-2); }
input:focus, select:focus, textarea:focus { border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(34, 43, 61, .08); }
.cs-ahora, .cs-ahora::before { background: #C96F7E; }

/* ---------------- Navegación: una cápsula de cristal flotante ---------------- */
@media (min-width: 900px) {
  .lateral-app {
    top: 14px; left: 50%; right: auto; transform: translateX(-50%);
    width: min(1120px, calc(100vw - 40px)); height: 56px; padding: 0 10px 0 22px; gap: 18px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -22px rgba(34, 43, 61, .30);
    backdrop-filter: saturate(1.6) blur(22px); -webkit-backdrop-filter: saturate(1.6) blur(22px);
  }
  .lateral-logo { font-family: var(--fuente-titulo); font-size: 18px; font-weight: 600; letter-spacing: -0.04em; }
  .secciones button { font-size: 14px; padding: 8px 14px; color: var(--tinta-2); }
  .secciones .indicador { background: var(--tinta); box-shadow: 0 6px 16px -8px rgba(34, 43, 61, .6); }
  .secciones button.activo { color: #fff; }
  .secciones button.activo .ico { opacity: 1; }
  .contenido { padding-top: calc(var(--nav-alto) + 20px); }
  .cabecera { top: calc(var(--nav-alto) + 14px); }
}

/* Botón de perfil y su menú */
.btn-perfil {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--tinta); color: #fff;
  font: 600 14px/1 var(--fuente-titulo); letter-spacing: -0.02em;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva);
}
.btn-perfil:hover { transform: scale(1.05); box-shadow: 0 8px 20px -8px rgba(34, 43, 61, .6); }
.btn-perfil .ico { width: 20px; height: 20px; }
.menu-perfil {
  position: fixed; z-index: 60; min-width: 230px; padding: 8px; border-radius: 22px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--linea);
  box-shadow: var(--sombra-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid; gap: 2px; transform-origin: top right;
  animation: menu-abre .22s var(--curva-salida);
}
.menu-perfil[hidden] { display: none; }
@keyframes menu-abre { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu-perfil p { padding: 10px 12px 8px; font-size: 13px; color: var(--tinta-3); }
.menu-perfil button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px;
  border: 0; border-radius: 14px; background: transparent; color: var(--tinta); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.menu-perfil button:hover { background: var(--perla); }
.menu-perfil button .ico { width: 18px; height: 18px; color: var(--tinta-2); }
.menu-perfil .oculto { display: none; }

/* Móvil: barra inferior flotante de cristal */
@media (max-width: 899px) {
  .barra {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 40px -20px rgba(34, 43, 61, .35);
  }
  .barra button.activo { color: var(--tinta); }
  .barra button.activo .pastilla { background: var(--tinta); color: #fff; }
  .perfil-movil { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 45; }
}
@media (min-width: 900px) { .perfil-movil { display: none; } }

/* ---------------- Superficies ---------------- */
.panel, .tarjeta-hoy, .vacio, .cal-cuerpo, .kpi { background: var(--blanco); box-shadow: var(--sombra-1); }
.columna { background: var(--perla); }
.btn { background: var(--perla); }
.btn:hover { background: var(--perla-2); }
.btn.primario { background: var(--tinta); }
.btn.suave { background: var(--tiempo); color: var(--tiempo-fuerte); }
.chip.activo { background: var(--tinta); }
.progreso { background: var(--perla) !important; }
.progreso i { background: var(--tinta) !important; }
.subbloques .indicador { background: var(--blanco); }
.tabs .indicador { background: var(--tinta); }
.cabecera .fecha-hoy { color: var(--tinta-3); }

/* =====================================================================
   INICIO
   ===================================================================== */
body.en-inicio .cabecera { display: none; }
body.en-inicio .vista { max-width: 1240px; padding-top: 8px; }

.inicio { display: grid; gap: 28px; }
.inicio-escenario {
  display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 0 12px; align-items: start;
  grid-template-areas: "cab escena" "lado escena";
  grid-template-rows: auto 1fr;
}
.inicio-cab { grid-area: cab; padding-top: 28px; position: relative; z-index: 2; }
.inicio-lado { grid-area: lado; }
.inicio-escena { grid-area: escena; }
@media (max-width: 899px) {
  .inicio-escenario { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "escena" "lado"; grid-template-rows: auto; }
  .inicio-cab { padding-top: 4px; }
  .inicio-lado .hoy-aviso { padding: 12px 16px; font-size: 14px; }
}

/* Columna izquierda: saludo + widgets */
.inicio-lado { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; position: relative; z-index: 2; }
.inicio-fecha { font-size: 14px; color: var(--tinta-3); }
.inicio-saludo {
  font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(40px, 4.6vw, 60px);
  line-height: .98; letter-spacing: -0.05em; margin: 2px 0 10px;
}
.inicio-saludo span { display: block; color: var(--tinta-3); }

.widgets { display: grid; gap: 10px; }
.widget {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 20px; border: 0; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .78); box-shadow: var(--sombra-1); color: var(--tinta); font: inherit;
  transition: transform .35s var(--curva-salida), box-shadow .35s var(--curva-salida), background .2s;
}
.widget:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); background: #fff; }
.widget .w-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--w-suave, var(--perla)); color: var(--w-fuerte, var(--tinta)); }
.widget .w-ico .ico { width: 18px; height: 18px; }
.widget small { display: block; font-size: 12.5px; color: var(--tinta-3); }
.widget b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget .w-dato { font: 600 15px var(--fuente-titulo); letter-spacing: -0.02em; color: var(--tinta-2); }
.widget .w-barra { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: var(--perla); overflow: hidden; }
.widget .w-barra i { display: block; height: 100%; border-radius: 4px; background: var(--w-fuerte, var(--tinta)); transition: width .8s var(--curva-salida); }
.widgets-editar { justify-self: start; border: 0; background: none; color: var(--tinta-3); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 2px; }
.widgets-editar:hover { color: var(--tinta); }
.widgets-panel[hidden] { display: none; }
.widgets-panel { display: grid; gap: 6px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--sombra-1); }
.widgets-panel label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.widgets-panel input { min-height: 0; width: 18px; height: 18px; accent-color: var(--tinta); }

@media (max-width: 899px) {
  .inicio-lado { padding-top: 6px; }
  .widgets { grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
  .widgets::-webkit-scrollbar { display: none; }
  .widget { scroll-snap-align: start; }
}

/* Escena 3D */
.inicio-escena { position: relative; height: clamp(520px, calc(100vh - 110px), 820px); align-self: start; position: sticky; top: 90px; border-radius: 36px; overflow: hidden; }
.inicio-escena canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; outline: none; }
.inicio-escena.arrastrando canvas { cursor: grabbing; }
.inicio-escena .halo {
  position: absolute; inset: 8% 6% 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220, 234, 247, .75), rgba(231, 223, 247, .35) 55%, transparent 75%);
  filter: blur(10px);
}
@media (max-width: 899px) { .inicio-escena { position: relative; top: 0; height: 470px; margin: 0 -16px; border-radius: 0; } }
@media (max-width: 480px) { .inicio-escena { height: 440px; } }

.escena-cargando {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta-3); font-size: 14px;
  transition: opacity .6s var(--curva);
}
.escena-cargando.fuera { opacity: 0; pointer-events: none; }

/* Pie de la escena: la publicación destacada y los controles */
.escena-pie {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--sombra-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  max-width: calc(100% - 24px);
}
.escena-pie[hidden] { display: none; }
.escena-pie .flecha { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.escena-pie .flecha:hover { background: var(--perla); }
.escena-pie .flecha .ico { width: 18px; height: 18px; }
.destacada {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px 0 6px; border-radius: 999px; border: 0;
  background: var(--d-suave, var(--perla)); color: var(--d-fuerte, var(--tinta)); cursor: pointer; font: inherit;
  transition: background .4s var(--curva), color .4s var(--curva), transform .2s;
}
.destacada:hover { transform: scale(1.02); }
.destacada:active { transform: scale(.98); }
.destacada .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #fff; }
.destacada b { font: 600 15px var(--fuente-titulo); letter-spacing: -0.02em; white-space: nowrap; }
.destacada span { font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
@media (max-width: 480px) { .destacada span { display: none; } }

.escena-ayuda { position: absolute; top: 18px; right: 22px; z-index: 3; font-size: 12.5px; color: var(--tinta-3); pointer-events: none; transition: opacity .6s; }
.escena-pausa {
  position: absolute; bottom: 24px; left: 18px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .7); color: var(--tinta-2); display: grid; place-items: center;
}
.escena-pausa .ico { width: 16px; height: 16px; }
.escena-tip {
  position: absolute; z-index: 4; pointer-events: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--tinta); color: #fff; transform: translate(-50%, -140%); opacity: 0; transition: opacity .2s;
  white-space: nowrap;
}
.escena-tip.ver { opacity: 1; }

/* Navegación alternativa (siempre accesible, y la única si no hay 3D) */
.areas { display: flex; flex-wrap: wrap; gap: 8px; }
.area {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 8px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--a-suave); color: var(--a-fuerte); font: 500 14px var(--fuente); transition: transform .2s var(--curva);
}
.area:hover { transform: translateY(-1px); }
.area .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #fff; }
.sin-3d .inicio-escena { display: grid; place-items: center; min-height: 300px; background: radial-gradient(closest-side, var(--tiempo), transparent); }

/* Cortina de la transición al entrar en un área */
.cortina { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: var(--c, #fff); opacity: 0; transition: opacity .35s var(--curva); }
.cortina.ver { opacity: 1; }

/* ---------------- Editor del avatar ---------------- */
.editor-avatar {
  position: absolute; top: 14px; right: 14px; bottom: 14px; z-index: 5; width: min(360px, calc(100% - 28px));
  display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--sombra-2);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  animation: editor-entra .45s var(--curva-salida);
}
@keyframes editor-entra { from { opacity: 0; transform: translateX(24px); } }
.editor-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 8px 22px; }
.editor-cab h3 { font-size: 20px; }
.editor-cab button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--perla); cursor: pointer; display: grid; place-items: center; }
.editor-cab .ico { width: 16px; height: 16px; }
.editor-cuerpo { flex: 1; overflow-y: auto; padding: 6px 22px 16px; display: grid; gap: 18px; align-content: start; }
.editor-grupo h4 { font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 8px; }
.editor-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.op-texto { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--perla); color: var(--tinta-2); font: inherit; font-size: 14px; cursor: pointer; }
.op-texto.activo { background: var(--tinta); color: #fff; }
.op-color { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linea-2); cursor: pointer; padding: 0; background: var(--c); }
.op-color.activo { box-shadow: 0 0 0 2px var(--tinta); }
.editor-pie { display: flex; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--linea); }
.editor-pie .btn { flex: 1; }
.editor-nota { font-size: 12.5px; color: var(--tinta-3); line-height: 1.45; }
.editor-gesto { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; font-size: 12.5px; color: var(--tinta-3); background: rgba(255,255,255,.7); padding: 6px 12px; border-radius: 999px; }
@media (max-width: 899px) {
  .editor-avatar { position: fixed; top: auto; left: 10px; right: 10px; bottom: calc(92px + env(safe-area-inset-bottom)); width: auto; max-height: 44vh; z-index: 46; }
}

@media (prefers-reduced-motion: reduce) {
  .widget, .destacada, .area { transition: none; }
}

/* =====================================================================
   IMAGEN · COMUNIDAD
   ===================================================================== */
.social-cab { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.social-cab h3 { font-size: 22px; }
.social-usuario { display: flex; gap: 8px; flex: 0 1 360px; }
.social-usuario input { flex: 1; min-width: 0; }
.social-form { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; }
@media (max-width: 640px) { .social-form { grid-template-columns: 1fr; } }
.social-foto {
  aspect-ratio: 4 / 5; border-radius: 22px; background: var(--perla) center / cover no-repeat; cursor: pointer;
  display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--tinta-2); font-weight: 500;
  border: 1.5px dashed var(--linea-2); transition: border-color .2s;
}
.social-foto:hover { border-color: var(--tinta-3); }
.social-foto .ico { width: 28px; height: 28px; }
.social-foto.con-foto { border-style: solid; border-color: transparent; }
.social-foto.con-foto > * { visibility: hidden; }
.social-campos { display: grid; gap: 14px; align-content: start; }
.interruptor { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .pista { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--perla-2); position: relative; transition: background .25s var(--curva); }
.interruptor .pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(34, 43, 61, .2); transition: transform .3s var(--curva-salida); }
.interruptor input:checked + .pista { background: var(--salud-fuerte); }
.interruptor input:checked + .pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--tinta); outline-offset: 3px; }
.interruptor small { display: block; color: var(--tinta-3); font-size: 13px; }
.social-tabs { width: max-content; max-width: 100%; }
.globo { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--personal-c-fuerte); color: #fff; font-size: 11px; font-weight: 700; }
.feed { display: grid; gap: 20px; max-width: 560px; margin: 0 auto; }
.pub { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-1); }
.pub img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--perla); }
.pub-feed header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.pub-feed header small { margin-left: auto; color: var(--tinta-3); }
.pub-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tiempo); color: var(--tiempo-fuerte); font: 600 14px var(--fuente-titulo); flex: none; }
.pub-texto { padding: 12px 16px 16px; color: var(--tinta-2); font-size: 15px; white-space: pre-line; }
.galeria-nube { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pub-pie { padding: 12px 14px 14px; display: grid; gap: 6px; }
.pub-pie .pub-texto { padding: 0; font-size: 14px; }
.pub-pie small { color: var(--tinta-3); font-size: 12.5px; }
.vis { justify-self: start; border: 0; border-radius: 999px; min-height: 28px; padding: 0 12px; font: 600 12.5px var(--fuente); cursor: pointer; }
.vis.privada { background: var(--perla); color: var(--tinta-2); }
.vis.compartida { background: var(--salud); color: var(--salud-fuerte); }
.pub-acciones { display: flex; gap: 14px; }
.personas { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.personas li { display: flex; align-items: center; gap: 10px; }
.personas .acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; }

body.con-creador { overflow: hidden; }


/* =====================================================================
   LUMEN 2.1 · SOFT
   Superficies del mismo gris perla que el fondo, que se elevan o se hunden
   con dos sombras (una blanca arriba a la izquierda, una gris azulada
   abajo a la derecha). Pastillas con un brillo pastel muy leve en el borde.
   Menos iconos, más aire. Va al final para mandar sobre lo anterior.
   ===================================================================== */
:root {
  --porcelana: #EEF0F0;
  --fondo: var(--porcelana);
  --perla: #E8EAEA;
  --perla-2: #E1E4E5;
  --superficie-soft: #F3F4F4;
  --relieve: -12px -12px 28px rgba(255, 255, 255, .95), 12px 14px 30px rgba(13, 39, 80, .075);
  --relieve-suave: -7px -7px 16px rgba(255, 255, 255, .9), 7px 9px 20px rgba(13, 39, 80, .065);
  --hundido: inset 4px 4px 9px rgba(13, 39, 80, .075), inset -4px -4px 9px rgba(255, 255, 255, .95);
  --pastilla: linear-gradient(180deg, #FCFCFD 0%, #ECEEF0 100%);
  --pastilla-sombra: 0 10px 22px -10px rgba(13, 39, 80, .28), 0 2px 4px rgba(13, 39, 80, .05), inset 0 1px 0 #fff, inset 0 -2px 3px rgba(13, 39, 80, .05);
  --brillo: radial-gradient(60% 120% at 50% 0%, rgba(200, 180, 240, .35), rgba(240, 190, 205, .18) 45%, transparent 70%);
  --sombra-1: var(--relieve-suave);
  --sombra-2: var(--relieve);
}
html, body { background: var(--porcelana); }

/* ---------- Navegación: control segmentado ---------- */
@media (min-width: 900px) {
  .lateral-app {
    background: rgba(238, 240, 240, .78);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: var(--relieve-suave);
    height: 62px;
  }
  .secciones {
    flex: 0 1 auto; margin: 0 auto; padding: 4px; gap: 2px; border-radius: 999px;
    background: var(--porcelana); box-shadow: var(--hundido);
  }
  .secciones button { padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--tinta-2); letter-spacing: -0.005em; }
  .secciones button .ico { display: none; }
  .secciones button.activo { color: var(--tinta); font-weight: 600; }
  .secciones .indicador {
    top: 4px; height: calc(100% - 8px); border-radius: 999px;
    background: var(--brillo), var(--pastilla); box-shadow: var(--pastilla-sombra);
    border: 1px solid rgba(255, 255, 255, .9);
  }
}
.btn-perfil { background: var(--pastilla); color: var(--tinta); box-shadow: var(--pastilla-sombra); border: 1px solid rgba(255, 255, 255, .9); }
.btn-perfil:hover { box-shadow: var(--relieve-suave); }
.menu-perfil { background: rgba(243, 244, 244, .92); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--relieve); }
.menu-perfil button .ico { display: none; }

/* Apartados y pestañas: mismo lenguaje */
.subbloques, .tabs {
  display: inline-flex; width: max-content; max-width: 100%; gap: 2px; padding: 4px; border-radius: 999px; border: 0;
  background: var(--porcelana); box-shadow: var(--hundido); margin-top: 16px; overflow-x: auto; scrollbar-width: none;
}
.subbloques button, .tabs button {
  border: 0; background: transparent; min-height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--tinta-2); white-space: nowrap;
}
.subbloques button .ico, .tabs button .ico { display: none; }
.subbloques button.activo, .tabs button.activo { color: var(--tinta); font-weight: 600; background: transparent; }
.subbloques .indicador, .tabs .indicador {
  top: 4px; bottom: auto; height: calc(100% - 8px); border-radius: 999px;
  background: var(--brillo), var(--pastilla); box-shadow: var(--pastilla-sombra); border: 1px solid rgba(255, 255, 255, .9);
}

/* Móvil: barra inferior de cristal con pastilla */
@media (max-width: 899px) {
  .barra { background: rgba(240, 242, 242, .8); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--relieve); }
  .barra button.activo .pastilla { background: var(--pastilla); color: var(--tinta); box-shadow: var(--pastilla-sombra); }
}

/* ---------- Superficies ---------- */
.panel, .tarjeta-hoy, .vacio, .cal-cuerpo, .kpi, .pub, .widgets-panel {
  background: var(--superficie-soft); box-shadow: var(--relieve-suave); border: 1px solid rgba(255, 255, 255, .7);
}
.columna { background: var(--porcelana); box-shadow: var(--hundido); border: 0; }

/* Botones: pastillas claras; el principal, tinta suave */
.btn { background: var(--pastilla); color: var(--tinta); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--pastilla-sombra); }
.btn:hover { background: var(--brillo), var(--pastilla); }
.btn:active { box-shadow: var(--hundido); }
.btn.primario { background: linear-gradient(180deg, #333B4D, #222B3D); color: #fff; border: 1px solid #1d2433; box-shadow: 0 12px 24px -12px rgba(34, 43, 61, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn.primario:hover { background: linear-gradient(180deg, #3A4356, #262F42); }
.btn.suave { background: var(--pastilla); color: var(--tinta); }
.chip { box-shadow: none; }
.chip.activo { background: var(--brillo), var(--pastilla); color: var(--tinta); box-shadow: var(--pastilla-sombra); }

/* Campos: hundidos */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  background: var(--porcelana); border-color: transparent; box-shadow: var(--hundido);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):hover, select:hover, textarea:hover { background: var(--porcelana); }
input:focus, select:focus, textarea:focus { border-color: rgba(34, 43, 61, .25); box-shadow: var(--hundido), 0 0 0 4px rgba(34, 43, 61, .05); }

/* Interruptor: pista hundida, botón en relieve */
.interruptor .pista { background: var(--porcelana); box-shadow: var(--hundido); }
.interruptor .pista::after { background: var(--pastilla); box-shadow: 0 3px 6px rgba(13, 39, 80, .18), inset 0 1px 0 #fff; }
.interruptor input:checked + .pista { background: #CFE0D3; }

/* ---------- Inicio ---------- */
.inicio-saludo { font-weight: 500; letter-spacing: -0.055em; }
.inicio-saludo span { color: #A3A9B4; }
.widgets { gap: 14px; }
.widget {
  grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 20px; border-radius: 24px;
  background: var(--superficie-soft); box-shadow: var(--relieve-suave); border: 1px solid rgba(255, 255, 255, .7);
}
.widget:hover { transform: translateY(-1px); background: var(--superficie-soft); box-shadow: var(--relieve); }
.widget:active { box-shadow: var(--hundido); transform: none; }
.widget .w-ico { display: none; }
.widget small { font-size: 12px; letter-spacing: .02em; color: var(--tinta-3); display: flex; align-items: center; gap: 7px; }
.widget small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--w-fuerte); opacity: .55; }
.widget b { font-size: 15.5px; font-weight: 500; margin-top: 2px; }
.widget .w-barra { grid-column: 1 / 3; height: 4px; margin-top: 8px; background: var(--porcelana); box-shadow: var(--hundido); }
.widget .w-barra i { opacity: .55; }
.widgets-editar { color: var(--tinta-3); }
.hoy-aviso { background: var(--superficie-soft) !important; box-shadow: var(--relieve-suave); border: 1px solid rgba(255, 255, 255, .7); }

/* Pie de la escena: cristal */
.escena-pie {
  background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 40px -18px rgba(13, 39, 80, .25), 0 4px 18px -6px rgba(170, 190, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.escena-pie .flecha { color: var(--tinta-2); }
.escena-pie .flecha:hover { background: rgba(255, 255, 255, .6); }
.destacada {
  background: var(--brillo), var(--pastilla); color: var(--tinta); box-shadow: var(--pastilla-sombra); border: 1px solid rgba(255, 255, 255, .9);
  padding: 0 20px 0 16px;
}
.destacada .d-ico { width: 8px; height: 8px; border-radius: 50%; background: var(--d-fuerte); opacity: .6; flex: none; }
.destacada .d-ico .ico { display: none; }
.destacada b { font-weight: 600; }
.destacada span { color: var(--tinta-3); opacity: 1; }
.escena-ayuda { color: #A3A9B4; }
.escena-tip { background: rgba(255, 255, 255, .85); color: var(--tinta); box-shadow: var(--relieve-suave); backdrop-filter: blur(12px); }
.inicio-escena .halo { opacity: .55; }

.areas { gap: 10px; }
.area { background: var(--pastilla); color: var(--tinta); box-shadow: var(--pastilla-sombra); border: 1px solid rgba(255, 255, 255, .9); padding: 0 18px; font-weight: 500; }
.area .ico { display: none; }
.area::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--a-fuerte); opacity: .55; }


/* =====================================================================
   LUMEN 3.0 · tokens, tipografía editorial y componentes refinados
   ===================================================================== */
:root {
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  /* Escala tipográfica (fluida) */
  --t-display: clamp(40px, 4.4vw, 58px);
  --t-h1: clamp(32px, 3.3vw, 46px);
  --t-h2: clamp(20px, 1.8vw, 24px);
  --t-h3: 17px;
  --t-cuerpo: 15px;
  --t-pequeno: 13px;
  --t-mini: 11.5px;
  --tracking-titulo: -0.045em;
  /* Espaciado */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  /* Radios */
  --r-s: 12px; --r-m: 18px; --r-l: 24px; --r-xl: 32px; --r-pildora: 999px;
  /* Elevación (más sutil que la 2.1: relieve solo donde aporta) */
  --elev-0: 0 0 0 1px rgba(13, 39, 80, .045);
  --elev-1: 0 1px 2px rgba(13, 39, 80, .04), 0 8px 24px -14px rgba(13, 39, 80, .18);
  --elev-2: 0 2px 6px rgba(13, 39, 80, .05), 0 24px 48px -24px rgba(13, 39, 80, .28);
  /* Movimiento */
  --m-rapido: .18s; --m-medio: .32s; --m-lento: .6s;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Tipografía ---------- */
body { font-family: var(--fuente); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .modal-titulo, .cal-titulo, .saludo-hoy { font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: -0.03em; }
.cabecera h1, .cabecera.compacta h1 { font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: var(--tracking-titulo); font-stretch: normal; }
@media (min-width: 900px) { .cabecera h1 { font-size: var(--t-h1); line-height: 1.02; } }
.cabecera .lema { font-size: 16px; font-weight: 400; color: var(--tinta-2); letter-spacing: -0.01em; }
.cabecera .fecha-hoy { font-size: var(--t-pequeno); font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }
.inicio-saludo { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.05em; line-height: .98; }
.inicio-saludo span { font-weight: 500; }
.panel h2, .panel h3, .tarjeta-hoy h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }

/* ---------- Botones: elevación ligera, no relieve en todo ---------- */
.btn { box-shadow: var(--elev-0), 0 1px 2px rgba(13, 39, 80, .05); background: #FAFAFA; border: 0; transition: transform var(--m-rapido) var(--curva), box-shadow var(--m-rapido), background var(--m-rapido); }
.btn:hover { background: #FFFFFF; box-shadow: var(--elev-0), var(--elev-1); }
.btn:active { transform: scale(.98); box-shadow: var(--elev-0); }
.btn.primario { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 22px -12px rgba(34, 43, 61, .6); }
.btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ---------- Widgets de Inicio: compactos y ligeros ---------- */
.widgets { gap: 8px; }
.widget { padding: 12px 16px; border-radius: var(--r-m); box-shadow: var(--elev-0), 0 1px 2px rgba(13, 39, 80, .03); background: rgba(255, 255, 255, .55); border: 0; }
.widget:hover { box-shadow: var(--elev-0), var(--elev-1); background: rgba(255, 255, 255, .85); }
.widget small { font-size: var(--t-mini); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.widget b { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.hoy-aviso { box-shadow: var(--elev-0) !important; background: rgba(255, 255, 255, .55) !important; border: 0 !important; }

/* Botón de pausa: símbolo claro de pausa/reproducir */
.escena-pie [data-pausa] svg { width: 16px; height: 16px; }

/* ---------- Publicación ampliada ---------- */
.pf { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px; transition: opacity var(--m-medio) var(--curva); }
.pf.entrando, .pf.saliendo { opacity: 0; }
.pf-fondo { position: absolute; inset: 0; background: rgba(238, 240, 240, .55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.pf-post {
  position: relative; width: min(470px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  background: #FFFFFF; border-radius: 28px; box-shadow: var(--elev-2), var(--elev-0);
  transition: transform var(--m-medio) var(--curva); scrollbar-width: none;
}
.pf.entrando .pf-post, .pf.saliendo .pf-post { transform: translateY(14px) scale(.97); }
.pf-cab { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; }
.pf-foto { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--fuente-titulo); color: var(--tinta);
  background: linear-gradient(135deg, var(--a-suave), #fff); box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .1); }
.pf-foto.invitado { background: #E3E5E8 radial-gradient(circle at 50% 38%, #AEB4BE 0 5px, transparent 5.5px); }
.pf-cab b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.pf-cab small { display: block; font-size: 12px; color: var(--tinta-3); }
.pf-icono { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--tinta); border-radius: 50%; cursor: pointer; transition: background var(--m-rapido), transform var(--m-rapido); }
.pf-icono:hover { background: rgba(13, 39, 80, .05); }
.pf-icono:active { transform: scale(.9); }
.pf-icono svg { width: 24px; height: 24px; }
.pf-menu { position: absolute; right: 52px; top: 50px; z-index: 2; display: grid; min-width: 200px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: var(--elev-2), var(--elev-0); }
.pf-menu[hidden] { display: none; }
.pf-menu button { text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; font: 500 14px var(--fuente); color: var(--tinta); cursor: pointer; }
.pf-menu button:hover { background: var(--porcelana); }
.pf-media { display: block; width: 100%; padding: 0; border: 0; background: var(--perla); cursor: pointer; }
.pf-media canvas { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 840; }
.pf-barra { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; padding: 4px 6px 0; }
.pf-like.activo { color: #E5484D; }
.pf-like.activo svg { fill: #E5484D; }
.pf-like.late svg { animation: pf-late .45s var(--curva); }
@keyframes pf-late { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 65% { transform: scale(.94); } 100% { transform: scale(1); } }
.pf-guardar.activo svg { fill: var(--tinta); }
.pf-texto { padding: 2px 18px 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.pf-texto p { margin: 0; }
.pf-likes { font-weight: 600; }
.pf-tenue { color: var(--tinta-3); }
.pf-vercom { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--tinta-3); font: inherit; cursor: pointer; }
.pf-coms { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.pf-coms[hidden] { display: none; }
.pf-coms li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.pf-coms li p { grid-column: 1 / 3; }
.pf-coms small { color: var(--tinta-3); font-size: 12px; }
.pf-borrar { border: 0; background: none; color: var(--tinta-3); font: 500 12px var(--fuente); cursor: pointer; padding: 0; }
.pf-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(13, 39, 80, .06); }
.pf-form input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0; font: inherit; }
.pf-publicar { border: 0; background: none; font: 600 14px var(--fuente); color: var(--tiempo-fuerte); cursor: pointer; }
.pf-publicar:disabled { opacity: .35; cursor: default; }
.pf-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.pf-pie small { font-size: 11px; letter-spacing: .06em; color: var(--tinta-3); }
.pf-entrar { display: inline-flex; align-items: center; gap: 8px; }
.pf-entrar svg { width: 16px; height: 16px; }
.pf-aviso { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 10px); margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 13px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.pf-aviso.ver { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px) { .pf { padding: 0; place-items: end center; } .pf-post { border-radius: 26px 26px 0 0; max-height: 92dvh; } }
@media (prefers-reduced-motion: reduce) { .pf, .pf-post { transition: none; } .pf-like.late svg { animation: none; } }
.pf-vercom[hidden] { display: none; }

/* ---------- Recetas ---------- */
.rec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.rec-busca { display: flex; gap: var(--e-2); }
.rec-busca input { flex: 1; min-width: 0; min-height: 46px; border-radius: var(--r-pildora); padding: 0 20px; font-size: 15px; }
.rec-btn-filtros { min-height: 46px; padding: 0 18px; white-space: nowrap; }
.segmento-suave { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--porcelana); box-shadow: var(--hundido); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmento-suave button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font: 500 14px var(--fuente); color: var(--tinta-2); cursor: pointer; white-space: nowrap; transition: color var(--m-rapido); }
.segmento-suave button.activo { color: var(--tinta); font-weight: 600; background: var(--brillo), var(--pastilla); box-shadow: var(--pastilla-sombra); }
.rec-objetivos { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-filtros { display: grid; gap: var(--e-5); padding: var(--e-5); border-radius: var(--r-l); background: rgba(255, 255, 255, .6); box-shadow: var(--elev-0), var(--elev-1); }
.rec-filtros[hidden] { display: none; }
.rec-grupo h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 0 0 10px; font-weight: 600; }
.rec-rangos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4) var(--e-5); }
.rec-rango { display: grid; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.rec-rango input { accent-color: var(--tinta); }
.rec-textos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4); }
.rec-textos label { display: grid; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.rec-pie-filtros { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rec-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.rec-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--tinta); }
.rec-cuenta { margin: 0; font-size: 13px; }
.rec-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--e-4); }
.rec-tarjeta { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px 10px 14px; border-radius: var(--r-l); background: rgba(255, 255, 255, .65); box-shadow: var(--elev-0); cursor: pointer; transition: transform var(--m-medio) var(--curva), box-shadow var(--m-medio); }
.rec-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--elev-0), var(--elev-1); }
.rec-tarjeta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.rec-portada { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-m); background-color: #EEF0F0; display: grid; place-items: end start; padding: 10px; overflow: hidden; }
.rec-portada::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent 55%, rgba(238, 240, 240, .9) 56%); pointer-events: none; }
.rec-portada span { position: relative; z-index: 1; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); background: rgba(255, 255, 255, .8); padding: 4px 8px; border-radius: 999px; }
.rec-tarjeta h4 { margin: 6px 4px 0; font: 600 15px/1.3 var(--fuente-titulo); letter-spacing: -0.015em; }
.rec-meta { display: flex; gap: 10px; margin: 0 4px; font-size: 12.5px; color: var(--tinta-3); flex-wrap: wrap; }
.rec-meta b { color: var(--tinta); font-weight: 600; }
.rec-tengo { margin: 0 4px; font-size: 12.5px; color: var(--salud-fuerte); font-weight: 500; }
.rec-etq { display: flex; gap: 6px; margin: 2px 4px 0; flex-wrap: wrap; }
.rec-etq span, .rec-etiquetas span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--porcelana); color: var(--tinta-2); }
.rec-fav { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .85); cursor: pointer; color: var(--tinta-2); }
.rec-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rec-fav.activo { color: #E5484D; } .rec-fav.activo svg { fill: #E5484D; }
.rec-mas { display: grid; place-items: center; }
.rec-mas [hidden] { display: none; }
.rec-fuente { font-size: 12px; color: var(--tinta-3); margin: 0; }
.rec-vacio { grid-column: 1 / -1; }
.rec-ficha h3 { font-size: 16px; margin: 22px 0 10px; }
.rec-desc { color: var(--tinta-2); margin: 0 0 12px; }
.rec-ficha-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--tinta-2); }
.rec-ficha-meta > span:not(.rec-raciones) { padding: 5px 12px; border-radius: 999px; background: var(--porcelana); }
.rec-raciones { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rec-raciones .btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.rec-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.rec-macros div { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-m); background: var(--porcelana); text-align: center; }
.rec-macros b { font: 600 18px var(--fuente-titulo); letter-spacing: -0.02em; }
.rec-macros span { font-size: 11.5px; color: var(--tinta-3); }
.rec-nota { font-size: 12px; color: var(--tinta-3); margin: 8px 0 0; }
.rec-ings { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.rec-ings li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(13, 39, 80, .06); font-size: 14px; }
.rec-ings b { font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.rec-pasos { padding-left: 20px; margin: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.rec-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-sus { padding-left: 18px; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.rec-aviso { font-size: 12px; margin-top: 16px; }
.rec-acciones { flex-wrap: wrap; }
.rec-plan { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
.rec-plan[hidden] { display: none; }
.rec-plan label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.plan-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plan-dia { padding: 14px; border-radius: var(--r-m); background: var(--porcelana); }
.plan-dia h4 { margin: 0 0 8px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; text-transform: capitalize; }
.plan-dia h4 span { font-weight: 500; color: var(--tinta-3); font-size: 12px; text-transform: none; }
.plan-dia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-dia li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; font-size: 13.5px; }
.plan-dia li small { grid-column: 1 / 3; color: var(--tinta-3); text-transform: capitalize; font-size: 11.5px; }
.compra-seccion { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 14px 0 6px; }
.compra { list-style: none; padding: 0; margin: 0; }
.compra label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(13, 39, 80, .06); font-size: 14px; cursor: pointer; }
.compra input { width: 18px; height: 18px; min-height: 0; accent-color: var(--tinta); }
.compra input:checked + span { text-decoration: line-through; color: var(--tinta-3); }
.compra b { font-weight: 500; color: var(--tinta-2); }
@media (max-width: 600px) { .rec-macros { grid-template-columns: repeat(2, 1fr); } .rec-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rec-tarjeta h4 { font-size: 14px; } }
.rec-filtros { grid-template-columns: minmax(0, 1fr); }
.rec-grupo .chips { flex-wrap: wrap; overflow: visible; }

/* ---------- Comunidad 3.0 ---------- */
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.sp-tabs { flex: 0 1 auto; min-width: 0; }
.sp-tabs button { position: relative; }
.sp-globo { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #E5484D; color: #fff; font: 600 10.5px var(--fuente); vertical-align: 1px; }
.sp-globo[hidden] { display: none; }
.sp-nueva { flex: none; }
.sp-aviso-v2 { margin: 0 0 var(--e-4); padding: 12px 16px; border-radius: var(--r-m); background: var(--perla); color: var(--tinta-2); font-size: var(--t-pequeno); line-height: 1.45; }
.sp-aviso-v2 code { font-size: 12px; background: #fff; padding: 1px 6px; border-radius: 6px; }
.sp-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.sp-cargando { padding: var(--e-6) 0; text-align: center; }

/* Publicación */
.sp-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); width: min(520px, 100%); margin: 0 auto; }
.sp { background: #fff; border-radius: var(--r-l); box-shadow: var(--elev-1), var(--elev-0); overflow: hidden; }
.sp-cab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 6px 10px 12px; }
.sp-autor { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--tinta); cursor: pointer; text-align: left; }
.sp-autor b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-autor small { display: block; font-size: 12px; color: var(--tinta-3); }
.sp-foto { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--fuente-titulo); color: var(--tinta);
  background: linear-gradient(135deg, var(--a-suave, #E8EEF8), #fff); box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .1); text-transform: uppercase; }
.sp-vis { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--porcelana); color: var(--tinta-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.sp-vis svg { width: 13px; height: 13px; }
.sp-icono { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--tinta); border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1;
  transition: background var(--m-rapido), transform var(--m-rapido); -webkit-tap-highlight-color: transparent; }
.sp-icono:hover { background: rgba(13, 39, 80, .05); }
.sp-icono:active { transform: scale(.9); }
.sp-icono svg { width: 24px; height: 24px; }
.sp-menu { position: absolute; right: 10px; top: 50px; z-index: 3; display: grid; min-width: 210px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: var(--elev-2), var(--elev-0); }
.sp-menu[hidden] { display: none; }
.sp-menu button { text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; font: 500 14px var(--fuente); color: var(--tinta); cursor: pointer; }
.sp-menu button:hover { background: var(--porcelana); }
.sp-menu .peligro, .sp-borrar-com:hover { color: #D13438; }
.sp-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--perla); }
.sp-sin { background: linear-gradient(135deg, var(--perla), var(--porcelana)); }
.sp-barra { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; padding: 4px 6px 0; }
.sp-like.activo { color: #E5484D; }
.sp-like.activo svg { fill: #E5484D; }
.sp-like.late svg { animation: pf-late .45s var(--curva); }
.sp-guardar.activo svg { fill: var(--tinta); }
.sp-texto { display: grid; gap: 4px; padding: 2px 16px 16px; font-size: 14px; line-height: 1.45; }
.sp-texto p { margin: 0; overflow-wrap: anywhere; }
.sp-texto > small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-top: 4px; }
.sp-likes { font-weight: 600; }
.sp-vercom { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--tinta-3); font: inherit; cursor: pointer; }
.sp-coms[hidden] { display: none; }
.sp-coms ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.sp-coms li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.sp-coms li p { grid-column: 1 / 3; }
.sp-coms small { color: var(--tinta-3); font-size: 12px; }
.sp-borrar-com { border: 0; background: none; color: var(--tinta-3); font: 500 12px var(--fuente); cursor: pointer; padding: 0; }
.sp-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(13, 39, 80, .06); }
.sp-form input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0; font: inherit; }
.sp-form button { border: 0; background: none; font: 600 14px var(--fuente); color: var(--tiempo-fuerte, #2F6FEB); cursor: pointer; }
.sp-form button:disabled { opacity: .35; cursor: default; }

/* Estados vacíos */
.sp-vacio { display: grid; justify-items: center; gap: 8px; text-align: center; padding: var(--e-7) var(--e-5); width: min(460px, 100%); margin: 0 auto; }
.sp-vacio-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: var(--elev-1), var(--elev-0); color: var(--tinta-2); margin-bottom: 6px; }
.sp-vacio-ico svg { width: 28px; height: 28px; }
.sp-vacio h3 { margin: 0; font: 600 var(--t-h2) / 1.2 var(--fuente-titulo); letter-spacing: -0.02em; }
.sp-vacio p { margin: 0 0 8px; color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }

/* Personas y Explorar */
.sp-h { margin: var(--e-3) 0 0; font: 600 12px var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.sp-personas { list-style: none; margin: 0; padding: 4px; display: grid; background: #fff; border-radius: var(--r-l); box-shadow: var(--elev-1), var(--elev-0); }
.sp-personas:empty { display: none; }
.sp-persona { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 16px; }
.sp-persona + .sp-persona { border-top: 1px solid rgba(13, 39, 80, .05); }
.sp-persona .sp-foto { width: 42px; height: 42px; font-size: 16px; }
.sp-persona .acciones { display: flex; gap: 6px; flex: none; }
.sp-nadie { padding: 14px; text-align: center; }
.sp-busca input { width: 100%; min-height: 46px; border-radius: var(--r-pildora); padding: 0 20px; font-size: 15px; }
.sp-rejilla { max-width: 760px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: var(--r-m); overflow: hidden; }
.sp-celda { aspect-ratio: 1; padding: 0; border: 0; background: var(--perla); cursor: pointer; overflow: hidden; }
.sp-celda img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--m-medio) var(--curva); }
.sp-celda:hover img { transform: scale(1.04); }

/* Perfil */
.sp-perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-5); align-items: center; padding: var(--e-5); background: #fff; border-radius: var(--r-xl); box-shadow: var(--elev-1), var(--elev-0); }
.sp-perfil-foto { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font: 500 38px var(--fuente-titulo); color: var(--tinta); text-transform: uppercase;
  background: linear-gradient(135deg, var(--a-suave, #E8EEF8), #fff); box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .1), var(--elev-1); }
.sp-perfil-datos h2 { margin: 0; font: 600 var(--t-h2) / 1.15 var(--fuente-titulo); letter-spacing: -0.02em; }
.sp-usuario { margin: 2px 0 0; color: var(--tinta-3); font-size: 14px; }
.sp-bio { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.sp-contadores { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: 13.5px; color: var(--tinta-2); }
.sp-contadores b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-perfil-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sp-sub { margin: 0 auto; }
.sp-nota { margin: 0; text-align: center; color: var(--tinta-3); font-size: 13px; line-height: 1.45; }

/* Actividad */
.sp-eventos { list-style: none; margin: 0; padding: 4px; display: grid; background: #fff; border-radius: var(--r-l); box-shadow: var(--elev-1), var(--elev-0); }
.sp-eventos li { display: flex; gap: 12px; align-items: flex-start; padding: 10px; }
.sp-eventos li + li { border-top: 1px solid rgba(13, 39, 80, .05); }
.sp-eventos p { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.sp-eventos small { display: block; color: var(--tinta-3); font-size: 12px; margin-top: 2px; }

/* Hojas */
.sp-hoja-fondo { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 20px; background: rgba(238, 240, 240, .55);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity var(--m-medio) var(--curva); }
.sp-hoja-fondo.ver { opacity: 1; }
.sp-hoja { width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; background: #fff; border-radius: 28px;
  box-shadow: var(--elev-2), var(--elev-0); transform: translateY(14px) scale(.98); transition: transform var(--m-medio) var(--curva); }
.sp-hoja-fondo.ver .sp-hoja { transform: none; }
.sp-hoja header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-hoja h3 { margin: 0; font: 600 18px var(--fuente-titulo); letter-spacing: -0.02em; }
.sp-nueva-form { display: grid; gap: 14px; }
.sp-nueva-form .social-foto { aspect-ratio: auto; min-height: 0; height: clamp(160px, 32dvh, 280px); }
.sp-visibilidad { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-visibilidad legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tinta-2); }
.sp-visibilidad label { cursor: pointer; }
.sp-visibilidad input { position: absolute; opacity: 0; pointer-events: none; }
.sp-visibilidad span { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--porcelana); transition: box-shadow var(--m-rapido), background var(--m-rapido); }
.sp-visibilidad span svg { width: 18px; height: 18px; grid-row: 1 / 3; color: var(--tinta-2); }
.sp-visibilidad b { font-size: 14px; font-weight: 600; }
.sp-visibilidad small { font-size: 12.5px; color: var(--tinta-3); }
.sp-visibilidad input:checked + span { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tinta), var(--elev-1); }
.sp-visibilidad input:focus-visible + span { outline: 2px solid var(--tiempo-fuerte, #2F6FEB); outline-offset: 2px; }

@media (max-width: 640px) {
  .sp-top { gap: var(--e-2); }
  .sp-tabs { flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sp-nueva { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; }
  .sp-nueva::before { content: '+'; font: 300 26px/1 var(--fuente); margin-top: -2px; }
  .sp-feed { gap: var(--e-4); }
  .sp-perfil { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--e-5) var(--e-4); }
  .sp-contadores, .sp-perfil-acciones { justify-content: center; }
  .sp-perfil-foto { width: 84px; height: 84px; font-size: 32px; }
  .sp-hoja-fondo { padding: 0; place-items: end center; }
  .sp-hoja { border-radius: 26px 26px 0 0; max-height: 92dvh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .sp-persona .acciones .btn { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sp-hoja-fondo, .sp-hoja, .sp-celda img { transition: none; } .sp-like.late svg { animation: none; } }

/* La cabecera cambia de alto al compactarse; el "scroll anchoring" del navegador compensaba ese cambio
   moviendo el scroll, lo que volvía a abrir/cerrar la cabecera (temblor en Estudios y trabajo). */
html, body { overflow-anchor: none; }

/* ---------- Tu avatar (personalización) ---------- */
.ta { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "cab cab" "escena panel"; background: radial-gradient(120% 90% at 40% 30%, #FAFBFB 0%, var(--porcelana) 55%, #E6E9EC 100%);
  transition: opacity var(--m-medio) var(--curva), transform var(--m-medio) var(--curva); }
.ta.entrando, .ta.saliendo { opacity: 0; transform: scale(.985); }
.ta-cab { grid-area: cab; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 0 32px; }
.ta-cab h2 { margin: 0; font: 600 var(--t-h2) / 1.15 var(--fuente-titulo); letter-spacing: -0.02em; }
.ta-cab p { margin: 2px 0 0; color: var(--tinta-3); font-size: var(--t-pequeno); }
.ta-icono { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--tinta); cursor: pointer; box-shadow: var(--elev-1), var(--elev-0); }
.ta-icono svg { width: 20px; height: 20px; }
.ta-escenario { grid-area: escena; position: relative; min-height: 0; }
.ta-escenario canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.ta-escenario canvas:active { cursor: grabbing; }
.ta-modo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(255, 255, 255, .7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ta-pista { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); font-size: var(--t-mini); color: var(--tinta-3); letter-spacing: .02em; pointer-events: none; }
.ta-cargando { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--tinta-3); font-size: var(--t-pequeno); pointer-events: none; }
.ta-cargando[hidden] { display: none; }
@keyframes ta-gira { to { transform: rotate(360deg); } }
.ta-panel { grid-area: panel; align-self: center; margin: 0 28px 0 0; padding: 22px; display: grid; gap: 18px; background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border-radius: var(--r-xl); box-shadow: var(--elev-2), var(--elev-0); }
.ta-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ta-opcion { display: grid; justify-items: center; gap: 8px; padding: 10px 6px 12px; border: 0; border-radius: 20px; background: transparent; cursor: pointer; font: inherit; color: var(--tinta-2);
  transition: background var(--m-rapido), box-shadow var(--m-rapido), color var(--m-rapido); }
.ta-opcion:hover { background: rgba(13, 39, 80, .035); }
.ta-opcion b { font-size: 13.5px; font-weight: 500; }
.ta-opcion.activo { background: #fff; color: var(--tinta); box-shadow: var(--elev-1), inset 0 0 0 1.5px var(--tinta); }
.ta-opcion.activo b { font-weight: 600; }
.ta-retrato { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #F4F5F6, #E3E6EA) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .08); color: var(--tinta-3); }
.ta-retrato.con-foto { background-color: #ECEEF0; }
.ta-retrato svg { width: 22px; height: 22px; }
.ta-propio { display: grid; gap: 12px; }
.ta-propio[hidden] { display: none; }
.ta-propio p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
.ta-propio a { color: var(--tinta); font-weight: 600; }
.ta-subir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ta-subir svg { width: 17px; height: 17px; }
.ta-error { color: #C93A3E !important; }
.ta-error[hidden] { display: none; }
.ta-usar { min-height: 50px; }
.ta-usar:disabled { opacity: .55; cursor: default; }
@media (max-width: 899px) {
  .ta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "cab" "escena" "panel"; }
  .ta-cab { padding: calc(env(safe-area-inset-top) + 14px) 16px 0 20px; }
  .ta-panel { margin: 0; border-radius: 28px 28px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); gap: 14px; }
  .ta-retrato { width: 60px; height: 60px; }
  .ta-modo { bottom: 14px; }
  .ta-pista { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ta { transition: none; } }

/* =====================================================================
   LUMEN 3.1 · identidad: wordmark propio y titulares grabados
   Titulares: Bricolage Grotesque (SIL OFL, alojada con la app), estrecha y con carácter.
   Acabado "grabado": la tinta se hunde en el papel (más oscura arriba) con un filo de luz debajo.
   ===================================================================== */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --fuente-display: 'Bricolage Grotesque', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --display-ajustes: 'opsz' 96, 'wdth' 96;
  --display-peso: 560;
  --display-tracking: -0.026em;
  --t-saludo: clamp(38px, 4.5vw, 66px);
  --t-titulo: clamp(34px, 3.4vw, 50px);
  --tinta-grabado: linear-gradient(180deg, #11151E 0%, #262E3E 42%, #3B4357 100%);
}
.grabado, .inicio-saludo, .cabecera h1 {
  font-family: var(--fuente-display); font-weight: var(--display-peso); font-variation-settings: var(--display-ajustes);
  letter-spacing: var(--display-tracking); font-stretch: normal;
  color: var(--tinta); background: var(--tinta-grabado); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -.5px 0 rgba(17, 21, 30, .16));
}
@media (forced-colors: active) { .grabado, .inicio-saludo, .cabecera h1 { -webkit-text-fill-color: currentColor; background: none; filter: none; } }

/* Saludo del Inicio: en una línea; el nombre, si lo hay, debajo y más claro */
.inicio-saludo { font-size: var(--t-saludo); line-height: 1; margin: 4px 0 6px; white-space: nowrap; width: max-content; max-width: none; }
.inicio-saludo span { display: block; background: linear-gradient(180deg, #8C93A1, #AEB4BF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 480; }
.inicio-fecha { font-size: var(--t-pequeno); font-weight: 500; letter-spacing: .01em; color: var(--tinta-3); margin: 0; }
.inicio-cab { padding-top: 34px; }
@media (max-width: 899px) {
  .inicio-saludo { font-size: clamp(30px, 10.4vw, 46px); }
  .inicio-cab { padding-top: 6px; }
}

/* Títulos de sección: misma voz, mismos márgenes en todas las pantallas */
.cabecera h1 { font-size: var(--t-titulo); line-height: 1.02; margin: 2px 0 0; }
.cabecera .fecha-hoy { font-size: var(--t-pequeno); font-weight: 500; color: var(--tinta-3); letter-spacing: .01em; }
.cabecera .lema { margin-top: 8px; font-size: 15.5px; color: var(--tinta-2); letter-spacing: -0.005em; }
.cabecera.compacta h1 { font-size: 22px; letter-spacing: -0.03em; }
@media (max-width: 899px) { .cabecera h1 { font-size: clamp(32px, 9vw, 40px); } }

/* Marca en la navegación y en el acceso */
.lateral-logo { display: flex; align-items: center; padding: 0 6px 0 4px; line-height: 0; }
.logo-marca { height: 25px; width: auto; display: block; }
.login-marca { margin: 0 0 14px; line-height: 0; }
.logo-login { height: 38px; width: auto; display: block; }
/* En móvil no hay barra lateral: la marca abre el Inicio */
.inicio-marca { display: none; }
@media (max-width: 899px) {
  .inicio-marca { display: block; height: 22px; width: auto; margin: 4px 0 18px; }
}

/* =====================================================================
   SALUD · Centro corporal: el avatar en el centro y tus datos a su alrededor
   ===================================================================== */
.cs {
  --cs-acento: #6E87B5; --cs-proteina: #7F9BD6; --cs-hidratos: #D9B26F; --cs-grasa: #D99595; --cs-flex: #7FBFA8;
  --cs-hilo: rgba(84, 102, 138, .34);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); margin-top: var(--e-2);
}
.cs-escena {
  position: relative; display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 300px);
  grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--e-4);
  min-height: clamp(600px, calc(100svh - 320px), 820px); padding: var(--e-5) var(--e-5) var(--e-4);
  border-radius: 40px; isolation: isolate;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F4F5F6 0%, #ECEEF0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(34, 43, 61, .04), 0 30px 60px -40px rgba(13, 39, 80, .25);
}
.cs-centro { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.cs-lienzo { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--curva); }
.cs-lienzo.listo { opacity: 1; }
.cs-lienzo canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.cs-lienzo.arrastrando canvas { cursor: grabbing; }
.cs-hilos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.cs-hilos path { fill: none; stroke: var(--cs-hilo); stroke-width: 1; }
.cs-hilos circle { fill: #fff; stroke: var(--cs-acento); stroke-width: 1.4; }
.cs-hilos circle.aro { fill: none; stroke: rgba(110, 135, 181, .35); stroke-width: 1; animation: cs-aro 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.cs-hilos circle.fin { fill: var(--cs-acento); stroke: none; }
@keyframes cs-aro { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.cs-orbita { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; perspective: 1400px; align-self: center; }
.cs-izq { grid-column: 1; grid-row: 1; }
.cs-der { grid-column: 3; grid-row: 1; }
.cs-base { position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; }
.cs-base:empty { display: none; }
.cs-pista { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; margin: 0; font-size: var(--t-mini); color: var(--tinta-3); letter-spacing: .02em; pointer-events: none; }
.cs-base:not(:empty) ~ .cs-pista { display: none; }

/* Tarjetas de cristal, con un ligero arco hacia el avatar */
.cs-tarjeta {
  --arco: 0; position: relative; padding: 14px 16px 15px; border-radius: 22px;
  background: rgba(255, 255, 255, .7); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 2px rgba(13, 39, 80, .04), 0 18px 36px -24px rgba(13, 39, 80, .3);
  transition: transform var(--m-medio) var(--curva), box-shadow var(--m-medio) var(--curva);
}
.cs-izq .cs-tarjeta { transform: translateX(calc(var(--arco) * 1px)) rotateY(6deg); transform-origin: left center; }
.cs-der .cs-tarjeta { transform: translateX(calc(var(--arco) * -1px)) rotateY(-6deg); transform-origin: right center; }
.cs-orbita .cs-tarjeta:hover, .cs-orbita .cs-tarjeta:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(110, 135, 181, .28), 0 24px 44px -26px rgba(13, 39, 80, .4); }
.cs-izq .cs-tarjeta:focus-within, .cs-izq .cs-tarjeta:hover { transform: translateX(calc(var(--arco) * 1px + 4px)) rotateY(2deg); }
.cs-der .cs-tarjeta:focus-within, .cs-der .cs-tarjeta:hover { transform: translateX(calc(var(--arco) * -1px - 4px)) rotateY(-2deg); }
.cs-tarjeta header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cs-tarjeta h3 { margin: 0; font: 600 11.5px var(--fuente); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
.cs-tarjeta header span { font-size: 11.5px; color: var(--tinta-3); text-align: right; }
.cs-destacada { background: rgba(255, 255, 255, .86); }
.cs.entra .cs-tarjeta { animation: cs-entra .75s var(--curva-salida, cubic-bezier(.2, .8, .2, 1)) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
.cs.entra .cs-izq .cs-tarjeta { --desde: -22px; }
.cs.entra .cs-der .cs-tarjeta { --desde: 22px; }
@keyframes cs-entra { from { opacity: 0; translate: var(--desde, 0) 6px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }
.cs.entra .cs-base { animation: cs-entra .7s .35s both; }

/* Contenido de las tarjetas */
.cs-dato { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.cs-dato b { font: 560 30px/1.05 var(--fuente-display); font-variation-settings: var(--display-ajustes); letter-spacing: -0.03em; color: var(--tinta); }
.cs-dato span { font-size: 13px; color: var(--tinta-3); }
.cs-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tinta-3); }
.cs-texto { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); }
.cs-tarjeta .progreso { margin-top: 10px; height: 4px; }
.cs-accion { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; padding: 0; border: 0; background: none; font: 600 13px var(--fuente); color: var(--tinta); cursor: pointer; }
.cs-accion svg { width: 15px; height: 15px; transition: transform var(--m-rapido); }
.cs-accion:hover svg { transform: translateX(2px); }
.cs-accion:focus-visible { outline: 2px solid var(--cs-acento); outline-offset: 3px; border-radius: 6px; }

/* Campos del perfil, editables alrededor del avatar */
.cs-campo { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 6px; }
.cs-campo label { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; }
.cs-campo input, .cs-objetivo input {
  width: 100%; min-width: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center;
  font: 560 30px/1.1 var(--fuente-display); font-variation-settings: var(--display-ajustes); letter-spacing: -0.03em; color: var(--tinta); -moz-appearance: textfield;
}
.cs-campo input::-webkit-outer-spin-button, .cs-campo input::-webkit-inner-spin-button, .cs-objetivo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-campo input:focus, .cs-objetivo input:focus { outline: none; }
.cs-campo label:focus-within { box-shadow: 0 1.5px 0 var(--cs-acento); }
.cs-campo label span, .cs-objetivo span { font-size: 13px; color: var(--tinta-3); }
.cs-paso { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(34, 43, 61, .05); color: var(--tinta); font: 400 18px/1 var(--fuente); cursor: pointer; transition: background var(--m-rapido), transform var(--m-rapido); }
.cs-paso:hover { background: rgba(34, 43, 61, .09); }
.cs-paso:active { transform: scale(.92); }
.cs-seg { width: 100%; }
.cs-seg button { flex: 1; }
.cs-select { width: 100%; min-height: 40px; border-radius: 12px; font-size: 14px; }
.cs-objetivo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cs-objetivo label { display: flex; align-items: baseline; gap: 4px; }
.cs-objetivo input { text-align: left; font-size: 26px; }
.cs-objetivo .cs-select { width: auto; min-height: 36px; }
.cs-plan { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.cs-plan p { margin: 0; }
.cs-plan .btn { margin-top: 6px; }
.cs-escala { position: relative; height: 6px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, #C9D6EC 0%, #A9D3BF 22%, #A9D3BF 50%, #E7CF9C 70%, #E5A9A3 100%); }
.cs-escala i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--tinta), 0 2px 6px rgba(13, 39, 80, .25); transform: translate(-50%, -50%); transition: left var(--m-medio) var(--curva); }
.cs-escala-txt { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: var(--tinta-3); }
.cs-kpis { display: flex; gap: 6px; padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 #fff, 0 18px 36px -24px rgba(13, 39, 80, .3); }
.cs-kpis div { display: grid; gap: 2px; min-width: 150px; padding: 8px 18px; text-align: center; }
.cs-kpis div + div { border-left: 1px solid rgba(34, 43, 61, .07); }
.cs-kpis span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.cs-kpis b { font: 560 24px/1.1 var(--fuente-display); font-variation-settings: var(--display-ajustes); letter-spacing: -0.02em; }
.cs-kpis small { font-size: 11.5px; color: var(--tinta-3); }

/* Visualizaciones */
.cs-anillo { position: relative; width: 112px; height: 112px; margin: 2px auto 0; }
.cs-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cs-anillo circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.cs-anillo .fondo { stroke: rgba(34, 43, 61, .07); }
.cs-anillo .valor { transition: stroke-dasharray 1s var(--curva); }
.cs-anillo > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cs-anillo b { font: 560 24px/1 var(--fuente-display); font-variation-settings: var(--display-ajustes); letter-spacing: -0.02em; }
.cs-anillo small { margin-top: 3px; font-size: 11px; color: var(--tinta-3); }
.cs-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.cs-macro { display: grid; justify-items: center; gap: 2px; }
.cs-macro .cs-anillo { width: 70px; height: 70px; }
.cs-macro .cs-anillo b { font-size: 17px; }
.cs-macro .cs-anillo small { font-size: 9.5px; }
.cs-macro > span { font-size: 11.5px; color: var(--tinta-2); }
.cs-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 70px; margin-top: 12px; }
.cs-barras div { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; gap: 4px; }
.cs-barras i { align-self: end; display: block; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #AFC0DD, #8BA2CB); }
.cs-barras div:last-child i { background: linear-gradient(180deg, #6E87B5, #4F6A9C); }
.cs-barras small { font-size: 9.5px; color: var(--tinta-3); text-align: center; white-space: nowrap; overflow: hidden; }
.cs-puntos { display: flex; gap: 6px; margin-top: 4px; }
.cs-puntos i { width: 100%; height: 6px; border-radius: 99px; background: rgba(34, 43, 61, .08); }
.cs-puntos i.lleno { background: var(--cs-acento); }
.cs-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cs-semana i { aspect-ratio: 1; border-radius: 50%; background: rgba(34, 43, 61, .07); }
.cs-semana i.lleno { background: var(--cs-flex); }
.cs-semana i.medio { background: linear-gradient(90deg, var(--cs-flex) 50%, rgba(34, 43, 61, .07) 50%); }
.cs-semana i.futuro { background: transparent; box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .08); }
.cs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cs-lista li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--tinta-2); }
.cs-lista li b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cs-lista small { color: var(--tinta-3); white-space: nowrap; }
.cs-rutina li { position: relative; padding-left: 18px; }
.cs-rutina li::before { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(34, 43, 61, .2); }
.cs-rutina li.hecho::before { background: var(--cs-flex); box-shadow: none; }
.cs-rutina li.hecho span { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: rgba(34, 43, 61, .25); }
.cs-zonas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cs-zonas li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; align-items: center; gap: 10px; font-size: 13px; color: var(--tinta-2); }
.cs-zonas li .progreso { margin: 0; }
.cs-zonas li b { text-align: right; font-variant-numeric: tabular-nums; }
.cs-receta { display: grid; gap: 3px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #F7F4EC, #EEF2F0); text-align: left; cursor: pointer; font: inherit; color: var(--tinta); transition: transform var(--m-rapido); }
.cs-receta:hover { transform: translateY(-1px); }
.cs-receta b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cs-receta span { font-size: 12px; color: var(--tinta-3); }

/* Debajo: las herramientas de siempre */
.cs-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); min-width: 0; }
.cs-detalle-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.cs-detalle-cab h2 { margin: 0; font: var(--display-peso) 30px/1 var(--fuente-display); font-variation-settings: var(--display-ajustes); letter-spacing: -0.025em; }
.cs-detalle-cab p { flex: 1; margin: 0; color: var(--tinta-3); font-size: 14px; }
.cs-pestanas { display: flex; min-width: 0; max-width: 100%; }
.cs-pestanas .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cs-pestanas .tabs { margin: 0; }
.cs-contenido { min-width: 0; }

/* Sin 3D: los paneles se quedan, sin avatar */
.cs.sin-3d .cs-escena { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs.sin-3d .cs-izq { grid-column: 1; } .cs.sin-3d .cs-der { grid-column: 2; }
.cs.sin-3d .cs-pista, .cs.sin-3d .cs-hilos { display: none; }

@media (max-width: 1180px) and (min-width: 900px) {
  .cs-escena { grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(230px, 260px); padding: var(--e-4); }
}
@media (max-width: 899px) {
  .cs { gap: var(--e-5); }
  .cs-escena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; gap: 10px; min-height: 0; padding: 0 10px 12px; border-radius: 30px; margin: 0 -4px; }
  .cs-centro { position: relative; grid-column: 1 / -1; height: clamp(380px, 62vh, 470px); inset: auto; margin: 0 -10px; }
  .cs-hilos { display: none; }
  .cs-orbita { display: contents; }
  .cs-tarjeta, .cs-izq .cs-tarjeta, .cs-der .cs-tarjeta, .cs-izq .cs-tarjeta:hover, .cs-der .cs-tarjeta:hover, .cs-izq .cs-tarjeta:focus-within, .cs-der .cs-tarjeta:focus-within { transform: none; grid-column: 1 / -1; margin: 0; }
  .cs-tarjeta.cs-mitad { grid-column: span 1; }
  .cs-base { grid-row: auto; padding: 0; }
  .cs-kpis { width: 100%; }
  .cs-kpis div { min-width: 0; flex: 1; padding: 6px 6px; }
  .cs-kpis b { font-size: 19px; }
  .cs-pista { top: calc(clamp(380px, 62vh, 470px) - 30px); bottom: auto; }
  .cs-dato b, .cs-campo input { font-size: 26px; }
  .cs-campo { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 2px; }
  .cs-paso { width: 30px; height: 30px; }
  .cs-anillo { width: 96px; height: 96px; }
}
@media (max-width: 380px) { .cs-escena { grid-template-columns: minmax(0, 1fr); } .cs-tarjeta.cs-mitad { grid-column: 1 / -1; } }
@media (max-width: 899px) { .cs-detalle-cab { flex-direction: column; align-items: stretch; } .cs-pestanas { width: 100%; } .cs-detalle-cab p { flex: none; } }
@media (prefers-reduced-motion: reduce) {
  .cs.entra .cs-tarjeta, .cs.entra .cs-base { animation: none; }
  .cs-hilos circle.aro { animation: none; opacity: 0; }
  .cs-tarjeta, .cs-lienzo { transition: none; }
}

/* Portada de receta: plato con el reparto de calorías (proteína, hidratos, grasa) etiquetado dentro */
.rec-portada { place-items: center; background: radial-gradient(70% 70% at 50% 45%, #FBFBFA, #EEF0F0); }
.rec-portada::after { display: none; }
.rec-portada > span { position: absolute; left: 10px; top: 10px; }
.rec-plato { position: relative; width: min(74%, 170px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 10px 24px -14px rgba(13, 39, 80, .35), inset 0 0 0 4px rgba(255, 255, 255, .55); }
.rec-plato::before { content: ''; position: absolute; inset: 27%; border-radius: 50%; background: #FAFAF8; box-shadow: inset 0 2px 6px rgba(13, 39, 80, .08); }
.rec-plato i { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; font: 600 9.5px/1.05 var(--fuente); font-style: normal; letter-spacing: .02em; color: #1F2633; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); white-space: nowrap; pointer-events: none; }
.rec-plato i b { font-size: 11.5px; font-weight: 700; }
.rec-plato em { position: absolute; inset: 27%; display: grid; place-content: center; text-align: center; font: 560 17px/1 var(--fuente-display); font-variation-settings: var(--display-ajustes); font-style: normal; color: var(--tinta); }
.rec-plato em small { font: 500 10px var(--fuente); color: var(--tinta-3); }

/* Tu avatar: aspecto (piel y pelo) y pasos para escanear tu cara */
.ta-aspecto { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(34, 43, 61, .07); }
.ta-aspecto > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; }
.ta-aspecto span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.ta-muestras { display: flex; flex-wrap: wrap; gap: 7px; }
.ta-muestras button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .12), 0 2px 6px -3px rgba(13, 39, 80, .3); transition: transform var(--m-rapido), box-shadow var(--m-rapido); }
.ta-muestras button.original { background: conic-gradient(from 45deg, #F1D8C6, #B98A6E, #5A3D2A, #C9A66E, #F1D8C6); }
.ta-muestras button:hover { transform: scale(1.08); }
.ta-muestras button.activo { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tinta); }
.ta-propio h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px var(--fuente); }
.ta-propio h3 svg { width: 22px; height: 22px; color: var(--tinta-2); }
.ta-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 8px; }
.ta-pasos li { counter-increment: paso; position: relative; padding-left: 30px; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.ta-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font: 600 11px var(--fuente); }
.ta-pasos b { color: var(--tinta); font-weight: 600; }
.ta-pasos i { font-style: normal; font-weight: 600; color: var(--tinta); }
.ta-propio-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ta-propio-acciones .btn { justify-content: center; text-align: center; text-decoration: none; }
@media (max-width: 899px) { .ta-panel { max-height: 58dvh; overflow-y: auto; } }

/* Bienvenida: crea tu avatar */
.bv { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; background: rgba(238, 240, 240, .6); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity var(--m-medio) var(--curva); }
.bv.ver { opacity: 1; }
.bv-hoja { width: min(440px, 100%); padding: 28px 26px 22px; border-radius: 30px; background: #fff; text-align: center; box-shadow: var(--elev-2), var(--elev-0); transform: translateY(14px) scale(.98); transition: transform var(--m-medio) var(--curva); }
.bv.ver .bv-hoja { transform: none; }
.bv-arte { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; display: grid; place-items: center; }
.bv-arte img { width: 42px; height: auto; position: relative; z-index: 1; }
.bv-arte i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(110, 135, 181, .35); animation: cs-aro 2.6s ease-out infinite; }
.bv-arte i:nth-child(3) { animation-delay: .85s; } .bv-arte i:nth-child(4) { animation-delay: 1.7s; }
.bv-hoja h2 { margin: 0 0 8px; font: var(--display-peso) 28px/1.1 var(--fuente-display); font-variation-settings: var(--display-ajustes); letter-spacing: -0.025em; }
.bv-hoja p { margin: 0 0 20px; color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }
.bv-acciones { display: grid; gap: 8px; }
.bv-acciones .btn { min-height: 48px; justify-content: center; }
.bv-luego { border: 0; background: none; padding: 8px; font: 500 14px var(--fuente); color: var(--tinta-3); cursor: pointer; }
@media (max-width: 520px) { .bv { place-items: end center; padding: 0; } .bv-hoja { border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .bv-arte i { animation: none; } }

/* Marca SYNCO: el isotipo de cuatro trazos y el nombre */
.marca-synco { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.marca-synco img { display: block; height: 19px; width: auto; }
.marca-synco span { font: 640 19px/1 var(--fuente-display); font-variation-settings: 'opsz' 96, 'wdth' 92; letter-spacing: 0.04em; color: var(--tinta); }
.lateral-logo.marca-synco { padding: 0 6px 0 4px; }
.login-marca.marca-synco { gap: 12px; margin: 0 0 14px; }
.login-marca.marca-synco img { height: 30px; }
.login-marca.marca-synco span { font-size: 30px; }
.inicio-marca.marca-synco { display: none; }
@media (max-width: 899px) { .inicio-marca.marca-synco { display: inline-flex; height: auto; width: auto; margin: 4px 0 18px; } .inicio-marca.marca-synco img { height: 17px; } .inicio-marca.marca-synco span { font-size: 17px; } }

/* ---------- SYNCO en movimiento: cargador, arranque y transición ---------- */
/* Los cuatro trazos del logo, de pie; al cargar caen uno tras otro (como fichas de dominó) hasta formar el logo */
.sy-barras { --l: 22px; --g: 5px; position: relative; display: inline-block; width: calc(var(--l) * 2.36 + var(--g)); height: var(--l); flex: none; }
.sy-barras i { position: absolute; bottom: 0; width: var(--g); height: var(--h); border-radius: 99px; background: var(--tinta);
  transform-origin: 50% calc(100% - var(--g) / 2); animation: var(--anim) 2s infinite; }
/* Caen una tras otra, forman el logo y vuelven a la vez a vertical (sin cascada de vuelta) */
.sy-barras i:nth-child(1) { left: 0;   --h: calc(var(--l) * .74); --a: 65deg; --anim: sy-cae-1; }
.sy-barras i:nth-child(2) { left: calc(var(--l) * .86); --h: calc(var(--l) * .77); --a: 45deg; --anim: sy-cae-2; }
.sy-barras i:nth-child(3) { left: calc(var(--l) * 1.6); --h: calc(var(--l) * .86); --a: 25deg; --anim: sy-cae-3; }
.sy-barras i:nth-child(4) { left: calc(var(--l) * 2.36); --h: var(--l); --a: 0deg; --anim: none; }
@keyframes sy-cae-1 {
  0%, 5% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  25% { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  29% { transform: rotate(calc(var(--a) * .9)); }
  33%, 72% { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.5, 0, .3, 1.25); }
  78%, 100% { transform: rotate(0deg); }
}
@keyframes sy-cae-2 {
  0%, 11% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  31% { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  35% { transform: rotate(calc(var(--a) * .9)); }
  39%, 72% { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.5, 0, .3, 1.25); }
  78%, 100% { transform: rotate(0deg); }
}
@keyframes sy-cae-3 {
  0%, 17% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  37% { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  41% { transform: rotate(calc(var(--a) * .9)); }
  45%, 72% { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.5, 0, .3, 1.25); }
  78%, 100% { transform: rotate(0deg); }
}
.sy-barras.grande { --l: 54px; --g: 12px; }
.sy-carga { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 36px 0; color: var(--tinta-3); font-size: var(--t-pequeno); text-align: center; }
.sy-carga .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cs-tarjeta .sy-carga { padding: 10px 0; align-items: flex-start; flex-direction: row; gap: 12px; }
.cs-tarjeta .sy-barras { --l: 16px; --g: 4px; }
.ta-cargando .sy-carga, .escena-cargando .sy-carga { padding: 0; }

/* Arranque */
.arranque { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(60% 50% at 50% 45%, #FAFBFB, #ECEEF0); transition: opacity .55s var(--curva), visibility .55s; }
.arranque b { font: 640 22px/1 var(--fuente-display); font-variation-settings: 'opsz' 96, 'wdth' 92; letter-spacing: .14em; color: var(--tinta); opacity: .9; }
.arranque.fuera { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) { .sy-barras i { animation: none; transform: rotate(var(--a)); } }

/* ================= Transiciones entre pantallas (View Transitions, al estilo next-view-transitions) =================
   Solo se nombran la cabecera y el contenido: el menú se queda quieto y lo demás no parpadea.
   Sección: la pantalla vieja se aleja hacia un lado, encoge y se desenfoca; la nueva entra deslizándose desde el otro.
   Pestaña: un deslizamiento más corto solo del contenido, hacia el lado de la pestaña elegida. */
.cabecera { view-transition-name: vt-cabecera; }
#vista { view-transition-name: vt-vista; }
#tabs { view-transition-name: vt-tabs; }   /* las pestañas no se deslizan con el contenido */
::view-transition-group(vt-tabs) { animation-duration: .3s; }
:root[data-vt="pestana"]::view-transition-old(vt-tabs), :root[data-vt="pestana"]::view-transition-new(vt-tabs) { animation-duration: .18s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(vt-vista), ::view-transition-group(vt-cabecera) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-image-pair(vt-vista) { isolation: auto; }

:root[data-vt="seccion"]::view-transition-old(vt-vista) { animation: vt-sale .32s cubic-bezier(.4, 0, .9, .6) both; }
:root[data-vt="seccion"]::view-transition-new(vt-vista) { animation: vt-entra .62s cubic-bezier(.16, 1, .3, 1) .08s both; }
:root[data-vt="seccion"]::view-transition-old(vt-cabecera) { animation: vt-titulo-sale .25s ease-in both; }
:root[data-vt="seccion"]::view-transition-new(vt-cabecera) { animation: vt-titulo-entra .55s cubic-bezier(.16, 1, .3, 1) .06s both; }

:root[data-vt="pestana"]::view-transition-old(vt-vista) { animation: vt-pest-sale .22s ease-in both; }
:root[data-vt="pestana"]::view-transition-new(vt-vista) { animation: vt-pest-entra .45s cubic-bezier(.16, 1, .3, 1) both; }
:root[data-vt="pestana"]::view-transition-old(vt-cabecera), :root[data-vt="pestana"]::view-transition-new(vt-cabecera) { animation-duration: .2s; }

/* Hacia atrás, todo al revés */
:root { --vt-x: 1; }
:root[data-vt-dir="atras"] { --vt-x: -1; }
@keyframes vt-sale { to { opacity: 0; transform: translateX(calc(var(--vt-x) * -64px)) scale(.96); filter: blur(6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateX(calc(var(--vt-x) * 90px)) scale(.985); filter: blur(4px); } }
@keyframes vt-titulo-sale { to { opacity: 0; transform: translateY(-14px); filter: blur(3px); } }
@keyframes vt-titulo-entra { from { opacity: 0; transform: translateY(18px); filter: blur(3px); } }
@keyframes vt-pest-sale { to { opacity: 0; transform: translateX(calc(var(--vt-x) * -28px)); } }
@keyframes vt-pest-entra { from { opacity: 0; transform: translateX(calc(var(--vt-x) * 40px)); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================= Tu avatar: pestañas Avatar · Cuerpo · Ropa ================= */
.ta-pestanas { justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); }
.ta-hoja { display: grid; gap: 14px; }
.ta-hoja[hidden] { display: none; }
.ta-fila { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; }
.ta-fila > span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.ta-fila[hidden] { display: none; }
.ta-rango { display: grid; gap: 8px; }
.ta-rango > span { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.ta-rango b { font: 600 14px var(--fuente-titulo); letter-spacing: -0.01em; text-transform: none; color: var(--tinta); }
.ta-rango small { display: flex; justify-content: space-between; margin-top: -4px; font-size: 11.5px; color: var(--tinta-3); }
.ta-rango small i { font-style: normal; }
.ta-rango input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; min-height: 0; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; }
.ta-rango input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(34, 43, 61, .12); }
.ta-rango input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(34, 43, 61, .12); }
.ta-rango input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--tinta), 0 2px 8px rgba(34, 43, 61, .2); }
.ta-rango input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--tinta), 0 2px 8px rgba(34, 43, 61, .2); }
.ta-rango input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 8px; }
.ta-gorros { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-gorros button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--perla); color: var(--tinta-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.ta-gorros button.activo { background: var(--tinta); color: #fff; }
.ta-escanear { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; }
.ta-escanear svg { width: 19px; height: 19px; }
.ta-subir-enlace { justify-self: center; font-size: 13px; color: var(--tinta-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ta-subir-enlace i { font-style: normal; }
.ta-subir-enlace:hover { color: var(--tinta); }
@media (max-width: 899px) {
  .ta-panel { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
  .ta-fila { grid-template-columns: 64px minmax(0, 1fr); }
}

/* Escáner de cara (Avaturn embebido) */
.esc { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 12px); background: var(--porcelana, #F2F3F4);
  opacity: 0; transform: translateY(12px); transition: opacity .28s var(--curva), transform .28s var(--curva); }
.esc.ver { opacity: 1; transform: none; }
.esc-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; max-width: 1100px; width: 100%; margin: 0 auto; }
.esc-cab h2 { margin: 0; font: 600 var(--t-h2) / 1.15 var(--fuente-titulo); letter-spacing: -0.02em; }
.esc-cab p { margin: 3px 0 0; font-size: var(--t-pequeno); color: var(--tinta-3); }
.esc-marco { position: relative; max-width: 1100px; width: 100%; margin: 0 auto; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: var(--elev-2, 0 10px 30px rgba(34,43,61,.12)); }
.esc-iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
.esc-cargando { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
.esc-cargando.sobre { z-index: 2; background: rgba(255, 255, 255, .92); }
.esc-fallo { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: #fff; }
.esc-fallo p { max-width: 380px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.esc-fallo i { font-style: normal; font-weight: 600; }
.esc-pie { max-width: 1100px; width: 100%; margin: 0 auto; font-size: 12.5px; line-height: 1.45; color: var(--tinta-3); text-align: center; }
.esc-pie b { color: var(--tinta); }
@media (max-width: 899px) { .esc { padding-inline: 10px; gap: 8px; } .esc-marco { border-radius: 18px; } .esc-cab { padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .esc { transition: none; } }
.ta-pestanas { width: 100%; }
.ta-pestanas button { justify-content: center; }
@media (max-width: 899px) {
  .ta-usar { position: sticky; bottom: 0; box-shadow: 0 -10px 18px 6px rgba(255, 255, 255, .9); }
}

/* ================= Calendario: editar al tocar, colores libres, arrastrar y estirar ================= */
.ev-colores { display: flex; flex-wrap: wrap; gap: 7px; }
.ev-color { position: relative; width: 28px; height: 28px; cursor: pointer; }
.ev-color input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ev-color span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); pointer-events: none;
  transition: transform .15s var(--curva), box-shadow .15s var(--curva); }
.ev-color:hover span { transform: scale(1.08); }
.ev-color input:checked + span, .ev-color.elegido span { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tinta); }
.ev-color input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 3px; }
.ev-color.tipo span { background: conic-gradient(var(--c) 0 50%, #fff 0); box-shadow: inset 0 0 0 1.5px var(--c); }
.ev-color.tipo input:checked + span { box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 2px #fff, 0 0 0 3.5px var(--tinta); }
.ev-color.libre span { background: var(--c, conic-gradient(#D2574A, #E08A3C, #C9A227, #7FA650, #3E8E9B, #4F78A8, #8E5BB8, #D46FA0, #D2574A)); }
.ev-rapido { gap: 14px; }
.ev-rapido .ev-titulo { font-size: 20px; }
.ev-cuando { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .ev-cuando { grid-template-columns: 1fr 1fr; } .ev-cuando .campo:first-child { grid-column: 1 / -1; } }
.ev-repite { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--tinta-2); }
.ev-repite .ico { width: 16px; height: 16px; flex: none; color: var(--tinta-3); }
.ev-guardar { display: grid; gap: 8px; }
.ev-guardar.doble { grid-template-columns: 1fr 1.25fr; }
.ev-guardar .btn { justify-content: center; min-height: 46px; }
.ev-rapido .ev-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-rapido .ev-borrar { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ev-alcance { display: grid; gap: 16px; }
.ev-alcance p { margin: 0; color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 420px) { .ev-guardar.doble { grid-template-columns: 1fr; } }

/* Tirador para alargar o acortar (abajo de cada actividad) */
.cal-tirador { position: absolute; left: 0; right: 0; bottom: -2px; height: 9px; cursor: ns-resize; touch-action: none; }
.cal-tirador::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px;
  background: color-mix(in srgb, var(--c) 55%, transparent); opacity: 0; transition: opacity .15s; }
.cal-ev:hover .cal-tirador::after, .cal-ev.estirando .cal-tirador::after { opacity: 1; }
.cal-ev.movible { cursor: grab; }
.cal-ev.estirando { z-index: 5; transition: none; box-shadow: inset 3px 0 0 var(--c), 0 10px 24px -10px rgba(14, 26, 63, .4); }
@media (pointer: coarse) { .cal-tirador { height: 14px; } .cal-tirador::after { opacity: .8; } }
.cal-ev { -webkit-user-select: none; user-select: none; }
.ta-vestuario { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 12px 14px; border: 0; border-radius: 18px; background: var(--perla); color: var(--tinta); font: inherit; cursor: pointer; transition: background .2s; }
.ta-vestuario:hover { background: var(--perla-2, #E6E9EC); }
.ta-vestuario span { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.ta-vestuario span svg { width: 22px; height: 22px; }
.ta-vestuario b { font-size: 14px; font-weight: 600; }
.ta-vestuario small { font-size: 12px; line-height: 1.35; color: var(--tinta-3); }
@media (min-width: 900px) { .ta-panel { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; } }

/* ================= RUNNING: plan claro y minimalista ================= */
.rn { --serie: #D2574A; --tempo: #C98A1B; --easy: #3E8E9B; --larga: #5B4B8A; --carrera: #2D3B5C; display: grid; gap: 18px; }
.rn .rn-pt.series, .rn-dia.con.series i, .rn-hoy.series { --c: var(--serie); }
.rn .rn-pt.tempo, .rn-dia.con.tempo i, .rn-hoy.tempo { --c: var(--tempo); }
.rn .rn-pt.easy, .rn-dia.con.easy i, .rn-hoy.easy { --c: var(--easy); }
.rn .rn-pt.larga, .rn-dia.con.larga i, .rn-hoy.larga { --c: var(--larga); }
.rn-cab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: start; }
.rn-cab > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: var(--sombra-1); }
.rn-cab small { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.rn-cab b { font: 650 22px/1.1 var(--fuente-titulo); letter-spacing: -0.02em; color: var(--tinta); }
.rn-cab b i { font-style: normal; font-weight: 500; font-size: 14px; color: var(--tinta-3); }
.rn-cab span { font-size: 12.5px; color: var(--tinta-2); }
.rn-icono { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); display: grid; place-items: center; cursor: pointer; color: var(--tinta); }
.rn-icono .ico { width: 20px; height: 20px; }
@media (max-width: 620px) {
  .rn-cab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-cab > div { padding: 11px 12px; border-radius: 16px; }
  .rn-cab b { font-size: 18px; }
  .rn-icono { display: none; }
}
/* Tira de la semana */
.rn-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rn-dia { position: relative; display: grid; justify-items: center; gap: 2px; padding: 9px 0 12px; border: 0; border-radius: 16px; background: transparent; color: var(--tinta-2); font: inherit; cursor: pointer; transition: background .2s; }
.rn-dia:hover { background: rgba(255, 255, 255, .6); }
.rn-dia small { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); }
.rn-dia b { font: 600 17px/1.2 var(--fuente-titulo); }
.rn-dia i { width: 7px; height: 7px; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.rn-dia.con i { background: var(--c); }
.rn-dia.hecha i { width: 16px; height: 16px; color: #fff; }
.rn-dia.hecha i .ico { width: 11px; height: 11px; stroke-width: 3; }
.rn-dia.falta i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.rn-dia.hoy b { color: var(--tinta); }
.rn-dia.hoy::after { content: ''; position: absolute; top: 5px; right: 50%; margin-right: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--tinta); }
.rn-dia.sel { background: #fff; color: var(--tinta); box-shadow: var(--sombra-1); }
/* La sesión del día */
.rn-hoy { position: relative; padding: 24px 26px 22px; border-radius: 28px; background: #fff; box-shadow: var(--sombra-1); overflow: hidden; }
.rn-hoy::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--tinta-3)); }
.rn-hoy.descanso::before { background: var(--perla-2, #E3E6EA); }
.rn-cuando { margin: 0; font-size: 13px; font-weight: 600; color: var(--c, var(--tinta-3)); letter-spacing: .02em; }
.rn-hoy h2 { margin: 2px 0 0; font: 600 var(--t-h2, 26px) / 1.15 var(--fuente-titulo); letter-spacing: -0.02em; }
.rn-clave { margin-top: 10px; font: 650 clamp(38px, 7vw, 54px)/1 var(--fuente-display, var(--fuente-titulo)); letter-spacing: -0.035em; color: var(--tinta); }
.rn-detalle { margin: 8px 0 0; font-size: 16px; color: var(--tinta-2); line-height: 1.45; }
.rn-pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(34, 43, 61, .07); }
.rn-pasos li { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(34, 43, 61, .07); font-size: 14.5px; }
.rn-pasos b { font-weight: 600; color: var(--tinta); }
.rn-pasos span { color: var(--tinta-2); }
.rn-pasos em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.rn-pasos li.fuerte b, .rn-pasos li.fuerte em { color: var(--c); }
@media (max-width: 520px) { .rn-pasos li { grid-template-columns: minmax(0, 1fr) auto; } .rn-pasos span { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; } .rn-hoy { padding: 20px 18px 18px; } }
.rn-nota { margin: 14px 0 0; font-size: 13.5px; color: var(--tinta-3); line-height: 1.5; }
.rn-total { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.rn-sig { margin: 14px 0 0; font-size: 14px; color: var(--tinta-2); }
.rn-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rn-acciones .btn { min-height: 46px; padding-inline: 22px; }
.rn-hecho { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--c) 9%, #fff); font-size: 14px; color: var(--tinta-2); }
.rn-hecho span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rn-hecho .ico { width: 18px; height: 18px; color: var(--c); stroke-width: 2.4; }
.rn-hecho b { color: var(--tinta); }
.rn-hoy.hecha .rn-clave { color: color-mix(in srgb, var(--tinta) 55%, transparent); }
/* Ajuste semanal */
.rn-adapta { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 13px 16px; border-radius: 18px; background: rgba(255, 255, 255, .6); font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
.rn-adapta .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--tinta); }
.rn-adapta b { color: var(--tinta); }
/* Ritmos */
.rn-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rn-tit h3 { margin: 0; font: 600 18px var(--fuente-titulo); letter-spacing: -0.01em; }
.rn-tit > span { font-size: 13px; color: var(--tinta-3); }
.rn-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.rn-chip { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: var(--sombra-1); border-top: 3px solid var(--c, transparent); }
.rn-chip.easy { --c: var(--easy); } .rn-chip.tempo { --c: var(--tempo); } .rn-chip.series { --c: var(--serie); } .rn-chip.carrera { --c: var(--carrera); }
.rn-chip small { font-size: 12px; color: var(--tinta-3); }
.rn-chip b { font: 650 19px/1.15 var(--fuente-titulo); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rn-chip b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.rn-nivel { margin: 10px 0 0; font-size: 13px; color: var(--tinta-3); }
.rn-nivel b { color: var(--tinta); }
/* La semana y el historial */
.rn-semana ul, .rn-hist ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rn-semana li button, .rn-hist li button { width: 100%; display: grid; grid-template-columns: 10px 36px minmax(0, auto) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--sombra-1); font: inherit; font-size: 14px; color: var(--tinta); text-align: left; cursor: pointer; }
.rn-semana li button:hover, .rn-hist li button:hover { box-shadow: var(--sombra-2); }
.rn-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--tinta-3)); }
.rn-li-dia { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); text-transform: capitalize; }
.rn-li-clave { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-semana li em, .rn-hist li em { font-style: normal; font-size: 13px; color: var(--tinta-3); display: flex; }
.rn-semana li em .ico { width: 17px; height: 17px; color: var(--easy); stroke-width: 2.4; }
.rn-hist li em .ico { width: 16px; height: 16px; }
.rn-semana li.hecha b { color: var(--tinta-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.rn-semana li.falta .rn-pt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
@media (max-width: 520px) { .rn-semana li button, .rn-hist li button { grid-template-columns: 10px 34px minmax(0, 1fr) auto; } .rn-li-clave { grid-column: 3; grid-row: 2; font-size: 13px; } }
.rn-hist h4 { display: flex; justify-content: space-between; margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.rn-hist + .rn-hist { margin-top: 4px; }
.rn-hist .rn-pt.series { --c: var(--serie); } .rn-hist .rn-pt.tempo { --c: var(--tempo); } .rn-hist .rn-pt.easy { --c: var(--easy); } .rn-hist .rn-pt.larga { --c: var(--larga); }
/* Alta del plan */
.rn-alta-cab h2 { margin: 0; font: 600 var(--t-h2, 26px)/1.15 var(--fuente-titulo); letter-spacing: -0.02em; }
.rn-alta-cab p { margin: 6px 0 0; color: var(--tinta-2); }
.rn-form { display: grid; gap: 14px; }
.rn-form fieldset { margin: 0; padding: 20px 22px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--sombra-1); display: grid; gap: 12px; }
.rn-form legend { float: left; display: flex; align-items: center; gap: 10px; padding: 0; font: 600 17px var(--fuente-titulo); }
.rn-form legend span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font: 600 12px var(--fuente); }
.rn-opc { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-opc label { position: relative; cursor: pointer; }
.rn-opc input, .rn-diasel input { position: absolute; opacity: 0; pointer-events: none; }
.rn-opc span { display: block; padding: 9px 15px; border-radius: 999px; background: var(--perla); color: var(--tinta-2); font-size: 14px; transition: background .15s, color .15s; }
.rn-opc input:checked + span { background: var(--tinta); color: #fff; }
.rn-opc input:focus-visible + span, .rn-diasel input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.rn-opc.grande { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rn-opc.grande span { border-radius: 18px; padding: 13px 16px; display: grid; gap: 2px; }
.rn-opc.grande b { font-weight: 600; font-size: 14.5px; }
.rn-opc.grande small { font-size: 12.5px; opacity: .75; }
.rn-marca { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-form.con-marca .rn-marca { display: grid; }
.rn-ayuda { margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.rn-diasel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.rn-diasel label { position: relative; cursor: pointer; }
.rn-diasel span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--perla); font-weight: 600; font-size: 14px; color: var(--tinta-2); }
.rn-diasel input:checked + span { background: var(--tinta); color: #fff; }
.rn-carrera small { color: var(--tinta-3); font-weight: 400; }
.rn-alta-acciones { display: flex; justify-content: flex-end; gap: 8px; }
.rn-alta-acciones .btn { min-height: 48px; padding-inline: 26px; }
/* Formularios de salida y test */
.rn-salida .rn-s-si { display: none; }
.rn-salida[data-tipo="series"] .rn-s-si { display: grid; }
.rn-f3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.rn-f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .rn-f3 { grid-template-columns: 1fr 1fr; } .rn-f3 .campo:first-child { grid-column: 1 / -1; } .rn-f4 { grid-template-columns: 1fr 1fr; } }
.rn-rpe b { float: right; font-weight: 600; color: var(--tinta); }
.rn-rpe input { width: 100%; accent-color: var(--tinta); }
.rn-rpe small { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta-3); }
.rn-rpe small i { font-style: normal; }
.rn-prev { margin: 0; font-size: 14px; color: var(--tinta-2); min-height: 1.2em; }
.rn-prev b { color: var(--tinta); }
.rn-test .rn-t-metros { display: none; }
.rn-test[data-tipo="12min"] .rn-t-metros { display: grid; }
.rn-test[data-tipo="12min"] .rn-t-tiempo, .rn-test[data-tipo="12min"] .rn-t-dist, .rn-test[data-tipo="5k"] .rn-t-dist { display: none; }
.rn-prevs .rn-chip { box-shadow: none; background: var(--perla); }

.rn-foco { margin: 4px 0 0; font-size: 13px; color: var(--tinta-3); line-height: 1.45; }

/* Tu avatar: recorrido único (foto → base → ajustes), todo se guarda solo */
.ta-foto { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, #22293A, #3A4560); color: #fff; }
.ta-foto-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); }
.ta-foto-ico svg { width: 22px; height: 22px; }
.ta-foto b { display: block; font-size: 15px; font-weight: 600; }
.ta-foto small { display: block; font-size: 12.5px; line-height: 1.4; opacity: .75; }
.ta-foto .btn { grid-column: 1 / -1; margin-top: 8px; min-height: 46px; justify-content: center; background: #fff; color: var(--tinta); }
.ta-foto .btn:hover { background: #F1F2F4; }
.ta-base { display: grid; gap: 6px; }
.ta-base > span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.ta-base .ta-retrato { width: 56px; height: 56px; }
.ta-base .ta-opcion { padding: 6px 4px 8px; gap: 4px; }
.ta-nota { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-3); }
.ta-pie { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.ta-guardado { flex: 1; font-size: 12.5px; color: #3F8F6B; font-weight: 600; min-height: 1em; }
.ta-pie .ta-subir-enlace { justify-self: auto; font-size: 12.5px; }
.ta-pie .ta-usar { min-height: 46px; padding-inline: 28px; }
@media (max-width: 899px) { .ta-pie { position: sticky; bottom: 0; background: rgba(255,255,255,.94); margin: 0 -16px; padding: 10px 16px 0; } .ta-pie .ta-usar { box-shadow: none; } }
@media (max-width: 899px) { .ta-pie { z-index: 3; } .ta-panel { padding-bottom: 0; } }

/* ================= Calendario: lateral (ordenador) y hora sin ruedas ================= */
.cal-mini, .cal-lado-tit { display: none; }
@media (min-width: 1100px) {
  .cal { grid-template-columns: 236px minmax(0, 1fr); align-items: start; column-gap: 20px; }
  .cal-barra { grid-column: 2; }
  .cal-lado { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 96px; display: grid; gap: 14px; }
  .cal-cuerpo { grid-column: 2; }
  .cal-mini { display: block; padding: 14px 12px 12px; border-radius: 22px; background: #fff; box-shadow: var(--sombra-1); }
  .cal-lado-tit { display: block; margin: 6px 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
  .cal-filtros { flex-direction: column; overflow: visible; gap: 2px; padding: 6px; border-radius: 22px; background: #fff; box-shadow: var(--sombra-1); }
  .cal-filtro { width: 100%; justify-content: flex-start; min-height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font-weight: 500; font-size: 14px; color: var(--tinta); }
  .cal-filtro:hover { background: var(--perla); }
  .cal-filtro i { width: 12px; height: 12px; border-radius: 4px; }
  .cal-filtro em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
  .cal-filtro.apagado { opacity: .5; }
  .cal-filtro.apagado i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); transform: none; }
}
.cal-filtro em:empty { display: none; }
@media (max-width: 1099px) { .cal-filtro em { display: none; } }
.cm2-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px 6px; }
.cm2-cab b { font: 600 14px var(--fuente-titulo); }
.cm2-cab span { display: flex; }
.cm2-cab .btn-icono { width: 28px; height: 28px; }
.cm2-cab .btn-icono .ico { width: 15px; height: 15px; }
.cm2-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cm2-rejilla span { font-size: 10.5px; font-weight: 600; color: var(--tinta-3); padding-bottom: 4px; }
.cm2-rejilla button { position: relative; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font: inherit; font-size: 12.5px; color: var(--tinta); cursor: pointer; font-variant-numeric: tabular-nums; }
.cm2-rejilla button:hover { background: var(--perla); }
.cm2-rejilla button.fuera { color: var(--tinta-3); opacity: .55; }
.cm2-rejilla button.en-vista { background: rgba(79, 120, 168, .1); border-radius: 8px; }
.cm2-rejilla button.hoy { background: var(--tinta); color: #fff; font-weight: 600; border-radius: 50%; }
.cm2-rejilla button.con::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: currentColor; opacity: .5; }

/* Hora: inicio en rejilla y final por duración */
.hs { display: grid; gap: 10px; }
.hs-fila { display: flex; align-items: center; gap: 10px; }
.hs-campo { flex: 1; display: grid; gap: 2px; padding: 9px 14px; border: 0; border-radius: 16px; background: var(--perla); text-align: left; font: inherit; color: var(--tinta); }
button.hs-campo { cursor: pointer; transition: box-shadow .15s; }
button.hs-campo:hover, button.hs-campo[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.hs-campo.fijo { background: transparent; box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .1); }
.hs-campo small { font-size: 11.5px; color: var(--tinta-3); }
.hs-campo b { font: 600 22px/1.1 var(--fuente-titulo); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hs-flecha { color: var(--tinta-3); }
.hs-panel { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 43, 61, .08), 0 10px 30px -12px rgba(34, 43, 61, .25); }
.hs-panel[hidden] { display: none; }
.hs-horas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.hs-horas button { min-height: 38px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--tinta); cursor: pointer; }
.hs-horas button:hover { background: var(--perla); }
.hs-horas button.temprano { display: none; }
.hs-panel.con-temprano .hs-horas button.temprano { display: block; color: var(--tinta-3); }
.hs-horas button.activo, .hs-min button.activo { background: var(--tinta); color: #fff; }
.hs-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.hs-madrugada { font-size: 12.5px; }
.hs-min { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--perla); }
.hs-min button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--tinta-2); }
.hs-dur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-dur small { width: 100%; font-size: 12px; color: var(--tinta-3); }
.hs-dur button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--perla); font: inherit; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; }
.hs-dur button.activo { background: var(--tinta); color: #fff; }
.hs-otra { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tinta-3); }
.hs-otra input { width: 64px; min-height: 32px; padding: 0 8px; border-radius: 999px; text-align: center; }
.hs-otra.activo input { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.ev-form.sin-horas .ev-horas { display: none; }
.ev-mas { display: grid; gap: 12px; }
.ev-mas > summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tinta-2); padding: 6px 0; }
.ev-mas > summary::-webkit-details-marker { display: none; }
.ev-mas > summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--perla); font-weight: 500; }
.ev-mas[open] > summary::before { content: '–'; }
.ev-mas[open] { gap: 12px; }
.ev-mas > :not(summary) { margin-top: 10px; }

/* ================= Concentración: métodos de estudio y reloj de hojas ================= */
.fo { display: grid; gap: 14px; }
.fo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fo-cab h3 { margin: 0; }
.fo-cab small { font-size: 12.5px; color: var(--tinta-3); }
.fo-metodos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fo-metodos button { display: grid; gap: 1px; padding: 9px 10px; border: 0; border-radius: 14px; background: var(--perla); text-align: left; font: inherit; color: var(--tinta-2); cursor: pointer; transition: background .15s; }
.fo-metodos button b { font-size: 13.5px; font-weight: 600; }
.fo-metodos button small { font-size: 11.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-metodos button.activo { background: var(--tinta); color: #fff; }
@media (max-width: 560px) { .fo-metodos { grid-template-columns: 1fr 1fr; } }
.fo-explica { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
.fo-reloj { display: grid; justify-items: center; gap: 12px; padding: 18px 12px 16px; border-radius: 24px; background: #F7F7F6; }
.fo-reloj.descanso { background: #EEF5F1; }
.fo-fase { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--tinta-2); }
.fo-hojas { display: flex; gap: 12px; }
/* Hoja: dos mitades; al cambiar, la de arriba cae y descubre el número nuevo */
.flip { --a: clamp(96px, 16vw, 132px); position: relative; width: calc(var(--a) * 1.05); height: var(--a); perspective: 600px; font: 650 calc(var(--a) * 0.66) / 1 var(--fuente-display, var(--fuente-titulo)); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #2A2E35; }
.flip-mitad, .flip-hoja { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #E9EAEB; }
.flip-mitad.sup, .flip-hoja.sup { top: 0; border-radius: 22px 22px 0 0; transform-origin: 50% 100%; }
.flip-mitad.inf, .flip-hoja.inf { bottom: 0; border-radius: 0 0 22px 22px; transform-origin: 50% 0; background: #EFF0F1; }
.flip-mitad span, .flip-hoja span { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; }
.flip-mitad.sup span, .flip-hoja.sup span { top: 0; }
.flip-mitad.inf span, .flip-hoja.inf span { bottom: 0; }
.flip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: rgba(42, 46, 53, .18); z-index: 3; }
.flip { filter: drop-shadow(0 6px 14px rgba(34, 43, 61, .1)); }
.flip-hoja { z-index: 2; backface-visibility: hidden; }
.flip-hoja.sup { animation: flip-cae .32s cubic-bezier(.5, 0, .9, .5) both; }
.flip-hoja.inf { transform: rotateX(90deg); animation: flip-llega .32s cubic-bezier(.1, .5, .5, 1) .3s both; }
@keyframes flip-cae { to { transform: rotateX(-90deg); filter: brightness(.88); } }
@keyframes flip-llega { from { transform: rotateX(90deg); filter: brightness(1.1); } to { transform: rotateX(0); } }
.fo-progreso { width: min(260px, 80%); height: 4px; border-radius: 4px; background: rgba(34, 43, 61, .08); overflow: hidden; }
.fo-progreso i { display: block; height: 100%; border-radius: 4px; background: var(--tinta); transition: width .25s linear; }
.fo-reloj.flujo .fo-progreso i { background: linear-gradient(90deg, #4E8F5E, #6FAE77); animation: fo-pulso 2.4s ease-in-out infinite; }
@keyframes fo-pulso { 50% { opacity: .5; } }
.fo-controles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fo-controles .btn { min-height: 44px; padding-inline: 22px; }
.fo-tiempos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fo-tiempos button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: var(--tinta-2); cursor: pointer; }
.fo-tiempos button.activo { background: var(--tinta); color: #fff; }
.fo-arbol svg { width: 120px; height: 120px; display: block; }
.arbol { transition: filter .6s; }
.arbol.seco { filter: grayscale(.4); }
.fo-bosque small { font-size: 12px; color: var(--tinta-3); }
.fo-bosque > div { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; }
.fo-bosque .arbol { width: 34px; height: 34px; }
.fo-bosque-vacio { margin: 0; font-size: 13px; color: var(--tinta-3); text-align: center; }
/* Leitner */
.lt { display: grid; gap: 14px; }
.lt-mazos { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-mazos button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--perla); font: inherit; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; }
.lt-mazos button.activo { background: var(--tinta); color: #fff; }
.lt-mazos .lt-nuevo { background: transparent; box-shadow: inset 0 0 0 1px rgba(34, 43, 61, .15); }
.lt-cajas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lt-caja { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 16px; background: #F7F7F6; overflow: hidden; }
.lt-caja i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(79, 120, 168, .12); }
.lt-caja b { position: relative; font: 650 22px var(--fuente-titulo); }
.lt-caja small, .lt-caja em { position: relative; font-size: 11px; color: var(--tinta-3); font-style: normal; text-align: center; }
.lt-caja small { font-weight: 600; color: var(--tinta-2); }
.lt-repaso { display: grid; gap: 14px; }
.lt-cuenta { margin: 0; font-size: 13px; color: var(--tinta-3); text-align: center; }
.lt-carta { position: relative; min-height: 200px; perspective: 1000px; }
.lt-cara { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; border-radius: 22px; background: #F7F7F6; font-size: 19px; line-height: 1.45; text-align: center; backface-visibility: hidden; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.lt-cara.reverso { transform: rotateY(180deg); background: #EEF5F1; }
.lt-carta.girada .frente { transform: rotateY(-180deg); }
.lt-carta.girada .reverso { transform: rotateY(0); }
.lt-fin { display: grid; justify-items: center; gap: 8px; padding: 20px 0; text-align: center; }
.lt-fin b { font: 650 34px var(--fuente-titulo); }
.lt-fin p { margin: 0; color: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) { .flip-hoja { animation: none !important; } .lt-cara { transition: none; } }
.fo-controles[hidden] { display: none; }

/* ===== Tareas: tablero por estado × prioridad ===== */
.pr-tablero { --c-todo: #E4572E; --c-curso: #E5AE1E; --c-hecho: #3A9E5C;
  display: grid; grid-template-columns: 128px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 4px; }
.pr-cab { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 10px; border-bottom: 3px solid var(--c); }
.pr-cab.todo, .pr-celda.todo, .pr-tarjeta.todo, .pr-pest.todo { --c: var(--c-todo, #E4572E); }
.pr-cab.curso, .pr-celda.curso, .pr-tarjeta.curso, .pr-pest.curso { --c: var(--c-curso, #E5AE1E); }
.pr-cab.hecho, .pr-celda.hecho, .pr-tarjeta.hecho, .pr-pest.hecho { --c: var(--c-hecho, #3A9E5C); }
.pr-cab h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.pr-cab span, .pr-fila-nombre b { font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.pr-fila-nombre { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 4px; border-top: 1px solid rgba(17, 21, 30, .08); }
.pr-fila-nombre span { font-size: 14px; font-weight: 650; line-height: 1.2; display: flex; align-items: center; gap: 7px; }
.pr-fila-nombre span::before, .pr-p::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--p); flex: none; }
.pr-fila-nombre.alta, .pr-p.alta { --p: #D9443A; }
.pr-fila-nombre.media, .pr-p.media { --p: #E5AE1E; }
.pr-fila-nombre.baja, .pr-p.baja { --p: #8D96A5; }
.pr-celda { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 104px; border-radius: 16px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(17, 21, 30, .06); transition: background .15s, box-shadow .15s; }
.pr-celda.encima { background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.pr-celda-pr { display: none; }
.pr-tarjeta { background: #fff; border: 1.5px solid var(--c); border-radius: 12px; padding: 10px 12px; cursor: grab; display: grid; gap: 6px;
  box-shadow: 0 1px 2px rgba(17, 21, 30, .06); transition: transform .15s, box-shadow .15s; outline-offset: 2px; }
.pr-tarjeta:hover { box-shadow: 0 4px 14px rgba(17, 21, 30, .08); }
.pr-tarjeta.arrastrando { opacity: .4; }
.pr-tarjeta p { margin: 0; font-weight: 560; font-size: 14.5px; line-height: 1.35; }
.pr-tarjeta.hecho p { color: var(--tinta-3); text-decoration: line-through; }
.pr-opciones { display: none; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 6px; border-top: 1px solid rgba(17, 21, 30, .07); }
.pr-tarjeta.abierta { cursor: default; }
.pr-tarjeta.abierta .pr-opciones { display: flex; }
.pr-grupo { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(17, 21, 30, .05); }
.pr-grupo button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 560; padding: 5px 9px; border-radius: 999px; color: var(--tinta-2); cursor: pointer; display: flex; align-items: center; gap: 5px; }
.pr-grupo button.activo { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(17, 21, 30, .12); }
.pr-opciones .btn-icono { margin-left: auto; width: 32px; height: 32px; }
.pr-mas { margin-top: auto; align-self: flex-start; border: 0; background: none; color: var(--tinta-3); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
.pr-mas svg { width: 18px; height: 18px; }
.pr-celda:hover .pr-mas, .pr-mas:focus-visible { opacity: 1; }
.pr-mas:hover { background: rgba(17, 21, 30, .06); }
.pr-nueva input { width: 100%; border: 1.5px dashed var(--c); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; }
.pr-nueva input:focus { outline: none; border-style: solid; }
.pr-elegir { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-elegir label { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 21, 30, .1); font-size: 13.5px; font-weight: 560; cursor: pointer; }
.pr-elegir label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--p); }
.pr-elegir input { position: absolute; opacity: 0; pointer-events: none; }
.pr-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pr-pestanas { display: none; }
@media (max-width: 760px) {
  .pr-tablero { grid-template-columns: 1fr; gap: 10px; }
  .pr-esquina, .pr-cab, .pr-fila-nombre { display: none; }
  .pr-tablero[data-ver="todo"] .pr-celda:not(.todo), .pr-tablero[data-ver="curso"] .pr-celda:not(.curso), .pr-tablero[data-ver="hecho"] .pr-celda:not(.hecho) { display: none; }
  .pr-celda { min-height: 0; }
  .pr-celda-pr { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--tinta-2); }
  .pr-celda.todo .pr-celda-pr::before, .pr-celda.curso .pr-celda-pr::before, .pr-celda.hecho .pr-celda-pr::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--p); }
  .pr-celda[data-prioridad="alta"] { --p: #D9443A; } .pr-celda[data-prioridad="media"] { --p: #E5AE1E; } .pr-celda[data-prioridad="baja"] { --p: #8D96A5; }
  .pr-mas { opacity: 1; }
  .pr-pestanas { display: flex; width: 100%; gap: 4px; padding: 3px; border-radius: 14px; background: rgba(17, 21, 30, .05); }
  .pr-pest { flex: 1; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 4px; border-radius: 11px; color: var(--tinta-2); border-bottom: 3px solid transparent; }
  .pr-pest b { color: var(--tinta-3); font-weight: 600; }
  .pr-pest[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(17, 21, 30, .1); border-bottom-color: var(--c); }
}

/* ===== Nota rápida: botón flotante y hoja ===== */
.nr-fab { position: fixed; right: 24px; bottom: 28px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #2B3346, #11151E);
  box-shadow: 0 10px 26px rgba(17, 21, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.nr-fab svg { width: 24px; height: 24px; }
.nr-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px rgba(17, 21, 30, .32); }
.nr-fab:active { transform: scale(.94); }
@media (max-width: 899px) { .nr-fab { right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); width: 52px; height: 52px; } }
.sin-scroll .nr-fab { display: none; }

.nr { position: fixed; inset: 0; z-index: 200; background: rgba(17, 21, 30, 0); display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; transition: background .25s; }
.nr.ver { background: rgba(17, 21, 30, .34); }
.nr-hoja { width: min(620px, 100%); max-height: 84vh; display: flex; flex-direction: column; background: #FAFAF8; border-radius: 26px;
  box-shadow: 0 30px 80px rgba(17, 21, 30, .3); overflow: hidden; transform: translateY(14px) scale(.98); opacity: 0;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s; }
.nr.ver .nr-hoja { transform: none; opacity: 1; }
@media (max-width: 640px) {
  .nr { align-items: flex-end; padding: 0; }
  .nr-hoja { max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.nr-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 4px 18px; }
.nr-pestanas { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(17, 21, 30, .055); }
.nr-pestanas button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 10px; color: var(--tinta-2); cursor: pointer; }
.nr-pestanas button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(17, 21, 30, .12); }
.nr-pestanas b { font-weight: 600; color: var(--tinta-3); }
.nr-x { border: 0; background: rgba(17, 21, 30, .05); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--tinta-2); }
.nr-x svg { width: 18px; height: 18px; }
.nr-nueva, .nr-lista { overflow: auto; padding: 10px 18px 18px; display: grid; gap: 12px; align-content: start; }
.nr-escribir { position: relative; }
.nr-escribir textarea { width: 100%; min-height: 104px; resize: vertical; border: 0; border-radius: 18px; padding: 14px 58px 14px 16px; font: inherit; font-size: 17px; line-height: 1.45;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 21, 30, .08); color: var(--tinta); }
.nr-escribir textarea:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(17, 21, 30, .7); }
.nr-mic { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(17, 21, 30, .06); color: var(--tinta); transition: background .2s, color .2s; }
.nr-mic svg { width: 21px; height: 21px; }
.nr-mic.activo { background: #D9443A; color: #fff; animation: nr-latido 1.3s ease-in-out infinite; }
@keyframes nr-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 68, 58, .45); } 50% { box-shadow: 0 0 0 9px rgba(217, 68, 58, 0); } }
.nr-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.nr-ejemplos button { border: 0; font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 999px; background: rgba(17, 21, 30, .05); color: var(--tinta-2); cursor: pointer; }
.nr-ejemplos button:hover { background: rgba(17, 21, 30, .09); }
.nr-titulo { margin: 4px 2px -4px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.nr-prev { display: grid; gap: 10px; }
.nr-prev:empty { display: none; }
.nr-accion { background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(17, 21, 30, .06), inset 0 0 0 1px rgba(17, 21, 30, .06);
  border-left: 4px solid var(--acc, #8D96A5); animation: nr-entra .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes nr-entra { from { opacity: 0; transform: translateY(6px); } }
.nr-accion.evento { --acc: #4F78A8; } .nr-accion.tarea { --acc: #E4572E; } .nr-accion.lista { --acc: #B39A78; }
.nr-accion.gym { --acc: #2D3B5C; } .nr-accion.run { --acc: #3A9E5C; } .nr-accion.nota { --acc: #B4BAC4; }
.nr-accion-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nr-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, #fff); }
.nr-ico svg { width: 17px; height: 17px; }
.nr-accion-cab select { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 650; color: var(--tinta); padding: 4px 2px; cursor: pointer; }
.nr-quitar { margin-left: auto; border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta-3); cursor: pointer; }
.nr-quitar:hover { background: rgba(17, 21, 30, .06); }
.nr-quitar svg { width: 16px; height: 16px; }
.nr-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 10px; align-items: end; }
.nr-campo { display: grid; gap: 3px; min-width: 0; }
.nr-campo.ancho { grid-column: 1 / -1; }
.nr-campo > span { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); }
.nr-campo input, .nr-campo select { width: 100%; min-width: 0; border: 0; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14.5px; background: #F3F4F4; color: var(--tinta); box-shadow: none; }
.nr-campo input:focus, .nr-campo select:focus { outline: 2px solid rgba(17, 21, 30, .5); outline-offset: 0; background: #fff; }
.nr-check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--tinta-2); padding-bottom: 8px; }
.nr-detalle { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--tinta-2); white-space: pre-wrap; }
.nr-aviso { font-size: 13.5px; color: var(--tinta-3); }
.nr-pie { display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: -18px; padding: 10px 0 2px; background: linear-gradient(180deg, rgba(250, 250, 248, 0), #FAFAF8 30%); }
.nr-pie .btn { min-height: 44px; }
.nr-nota { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(17, 21, 30, .06); cursor: pointer; display: grid; gap: 4px; }
.nr-nota h4 { margin: 0; font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-nota.abierta h4 { white-space: normal; }
.nr-nota p { margin: 0; font-size: 13.5px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-nota.abierta p { white-space: normal; color: var(--tinta-2); }
.nr-nota time { font-weight: 600; color: var(--tinta-2); margin-right: 4px; }
.nr-hechos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.nr-hechos span { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(58, 158, 92, .1); color: #2D7A47; }
.nr-nota-acc { display: none; gap: 14px; margin-top: 4px; }
.nr-nota.abierta .nr-nota-acc { display: flex; }
.nr-nota-acc button { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tinta); padding: 4px 0; cursor: pointer; }
.nr-nota-acc [data-borrar-nota] { color: #C2453B; }
.nr-vacio { text-align: center; color: var(--tinta-3); padding: 28px 8px; margin: 0; }
.nr-ejemplos[hidden] { display: none; }
.nr .nr-accion-cab select { background: none; box-shadow: none; width: auto; min-height: 0; height: auto; border-radius: 8px; padding: 4px 6px; }
.nr .nr-accion-cab select:hover { background: rgba(17, 21, 30, .05); }
.nr .nr-campo input, .nr .nr-campo select { box-shadow: none; min-height: 38px; height: 38px; background: #F3F4F4; }
.nr .nr-check input { appearance: auto; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; box-shadow: none; accent-color: #11151E; flex: none; }
.nr .nr-check { white-space: nowrap; }
.nr [data-vista][hidden] { display: none; }