/* ============================================
   NUTRILAB | Portal Cliente
   Estética premium minimalista
   ============================================ */

/* ============================================================
   DESIGN TOKENS · NUTRILAB (fuente única de estilo del portal)
   Dark mode minimalista: fondo casi negro, superficies planas con
   borde sutil (sin sombras), tipografía Inter y tres acentos de
   macronutrientes. Cualquier color, tamaño, radio o espaciado del
   portal debe salir de aquí: para retocar el aspecto se cambia el
   token, no el componente.
   ============================================================ */
:root {
  /* ---- Color · fondos y superficies ---- */
  --color-bg: #050506;                 /* fondo de pantalla: gris casi negro */
  --color-bg-end: #000000;             /* …que se degrada a negro */
  --color-surface: #0B0B0D;            /* tarjetas, sheets y modales: gris casi negro */
  --color-surface-end: #020203;        /* …que se degrada a negro */
  --color-surface-2: #121214;          /* recuadros de icono, campos, chips */
  --color-border: #1C1C20;             /* borde de 1px de tarjetas y divisores */
  --color-border-strong: #28282D;      /* borde de controles y avatar */
  --color-track: #212125;              /* pista de barras de progreso y anillo */
  --color-overlay: rgba(0, 0, 0, 0.6); /* velo tras sheets y modales */
  --gradient-bg: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-end) 100%);
  --gradient-surface: linear-gradient(165deg, var(--color-surface) 0%, var(--color-surface-end) 100%);
  --gradient-reco: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-bg-end) 100%);   /* texto de las tarjetas de Recomendaciones */

  /* ---- Fondos de pestaña (imagen / vídeo) y su velo degradado ---- */
  /* Fondos por defecto (mientras llega el aleatorio de la carpeta; ver
     portal-app.js · fondoAleatorio). */
  --bg-image-dieta: url("assets/Images/Fondo%20nutricion/fondo-dieta.png");
  --bg-image-seguimiento: url("assets/Images/Fondo%20seguimiento/Fondo%20portal%20pesta%C3%B1a%20seguimiento.png");
  --bg-shade-angle: 60deg;                    /* de abajo-izquierda hacia la derecha */
  --bg-shade-start: rgba(3, 3, 4, 0.99);   /* abajo a la izquierda: casi opaco */
  --bg-shade-mid: rgba(3, 3, 4, 0.88);
  --bg-shade-mid-stop: 50%;
  --bg-shade-end: rgba(3, 3, 4, 0.42);     /* borde derecho: lo más transparente */

  /* ---- Color · texto ---- */
  --color-text: #FFFFFF;               /* principal */
  --color-brand-from: #FFFFFF;         /* logotipo: brillo superior */
  --color-brand-to: #A4A8B0;           /* logotipo: plata inferior */
  --color-text-secondary: #8E8E93;     /* secundario */
  --color-text-tertiary: #5C5C61;      /* terciario / placeholders */

  /* ---- Color · acentos ---- */
  --color-accent-protein: #4ADE80;     /* proteínas · verde menta */
  --color-accent-carbs: #FBBF24;       /* hidratos · ámbar */
  --color-accent-fat: #F87171;         /* grasas · coral */
  --color-accent-water: #38BDF8;       /* agua · azul */
  --color-link-soft: rgba(74, 222, 128, 0.14);   /* relleno de selectores activos */
  --color-chat: #2563EB;               /* botón de chat y enviar · azul */
  --color-chat-pressed: #1D4ED8;
  --color-link: var(--color-accent-protein);   /* enlaces ("Ver todo") */
  --color-success: var(--color-accent-protein);
  --color-warning: var(--color-accent-carbs);
  --color-danger: var(--color-accent-fat);

  /* ---- Color · botón primario ---- */
  --color-btn-primary-bg: #F2F2F2;
  --color-btn-primary-bg-pressed: #D9D9DC;
  --color-btn-primary-text: #050506;

  /* ---- Tipografía ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --font-brand: 'Michroma', 'Inter', sans-serif;   /* logotipo NUTRILAB */
  --fs-brand: clamp(31px, 9.6vw, 39px);        /* logotipo de cabecera (igual en todas las pestañas) */
  --fs-brand-splash: clamp(34px, 10.6vw, 48px); /* logotipo de la pantalla de carga */
  --fs-display: 44px;      /* cifra grande ("2200") */
  --fs-greeting-home: clamp(21px, 5.9vw, 24px);   /* saludo de Inicio (sin mayúsculas) */
  --fs-greeting: clamp(18px, 5.2vw, 21px);   /* saludo y título de pestaña (en MAYÚSCULAS) */
  --fs-ring: 21px;         /* porcentaje del anillo */
  --fs-title: 15px;        /* títulos de sección (en MAYÚSCULAS) */
  --fs-unit: 17px;         /* unidad junto a la cifra ("kcal") */
  --fs-card-title: 16px;   /* título dentro de tarjeta */
  --fs-item: 15px;         /* nombre de comida */
  --fs-body: 14px;         /* texto base, fecha, botón */
  --fs-detail: 13px;       /* macros y detalles */
  --fs-small: 12px;
  --fs-label: 11px;        /* etiquetas en MAYÚSCULAS */
  --fs-btn: 15px;          /* texto de botones */
  --fs-nav: 10px;          /* rótulos del menú inferior */
  --fs-micro: 9px;
  --fs-sheet-title: 12px;  /* título de sheets y modales (MAYÚSCULAS, muy espaciado) */
  --fs-hero: 24px;         /* dato principal de una ficha (día de la consulta) */
  --tracking-sheet: 0.18em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-label: 1.2px; /* etiquetas en MAYÚSCULAS */
  --tracking-brand: 0.04em;
  --tracking-title: 0.05em; /* títulos en MAYÚSCULAS */
  --lh-tight: 1.15;
  --lh-normal: 1.4;

  /* ---- Formas ---- */
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-thumb: 12px;    /* fotos y recuadros de icono */
  --radius-chip: 10px;
  --radius-pill: 999px;    /* barras de progreso */
  --radius-sheet: 28px;    /* esquinas superiores de sheets y modales */
  --border-width: 1px;
  --border-card: var(--border-width) solid var(--color-border);

  /* ---- Espaciado ---- */
  --space-screen: 20px;    /* padding horizontal de pantalla */
  --space-card: 16px;      /* padding interno de tarjeta */
  --gap-cards: 12px;       /* separación entre tarjetas */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---- Medidas de componente ---- */
  --bar-height: 4px;       /* barras de progreso finas */
  --ring-size: 88px;      /* anillo de "Objetivos de hoy" */
  --ring-stroke: 6;
  --avatar-size: 50px;
  --thumb-size: 60px;      /* foto de comida */
  --icon-box-size: 44px;   /* recuadro de icono de tarjeta */
  --icon-size: 21px;
  --icon-size-sm: 18px;
  --btn-height: 46px;
  --tool-size: 30px;       /* botones de icono de cabecera */
  --nav-plus-size: 40px;   /* botón central "+" */
  --nav-plus-lift: -4px;   /* elevación del "+" sobre el resto */
  --nav-plus-stroke: 0.75; /* trazo fino del "+" (unidades del viewBox 24) */
  --slider-thumb: 13px;
  --rp-hero-h: 270px;      /* alto de la foto en el detalle de receta */
  --obj-ring-size: 92px;   /* anillo del objetivo diario (Nutrición) */
  --splash-line-w: 132px;  /* línea de progreso de la pantalla de carga */
  --fab-size: 52px;        /* botón flotante de chat */
  --fab-peek: 16px;        /* cuánto asoma escondido en el borde */
  --chat-btn-size: 36px;   /* botones dentro de la barra de escribir */
  --tm-ring-size: 96px;    /* anillo de kcal de "Tu menú" */
  --tm-thumb-size: 54px;   /* foto de comida en "Tu menú" */
  --tm-ico-size: 30px;     /* recuadro de icono junto a la foto */
  --news-max-h: 280px;     /* alto de la lista con scroll de Novedades */
  --fade-size: 28px;       /* fundido superior e inferior de listas con scroll */
  --wheel-item-h: 36px;    /* alto de la línea de avisos de Inicio */
  --wheel-travel: 70%;     /* recorrido vertical al entrar / salir */
  --wheel-move: 1.1s;      /* duración del giro */
  --wheel-ease: cubic-bezier(0.45, 0, 0.15, 1);

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-enter: 0.7s;       /* entrada de bloques al abrir una pestaña */
  --enter-step: 55ms;      /* escalonado entre bloques */
  --enter-shift: 14px;     /* subida de la entrada */
  --press-scale: 0.975;    /* pulsación de tarjetas y botones */
  --bg-image-fallback: url("assets/Images/fondo-inicio.png");  /* si el móvil bloquea el vídeo */
  --loader-veil: rgba(0, 0, 0, 0.5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* MARCO FIJO: el documento (html/body) queda clavado al viewport real y
   NUNCA hace scroll ni rebota — el scroll ocurre DENTRO de cada pestaña
   (.screen.active). En la PWA de iOS el navegador restauraba la posición de
   scroll del DOCUMENTO al relanzar la webapp y toda la app aparecía
   desplazada hacia arriba con una franja muerta abajo (que solo se
   "empujaba" deslizando). Con el documento no desplazable ese estado ya no
   puede existir. */
html, body {
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-track); border-radius: 10px; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   APP SHELL
   ============================================ */

/* El shell es el MARCO: altura exacta del viewport (100dvh, dinámica) y
   overflow hidden. Las pestañas (hijas flex) scrollean dentro. */
.app-shell {
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* El menú inferior NO vive aquí: está fuera del shell como hijo directo
     del <body> con position:fixed (mismo layout que index.html), para que
     quede siempre pegado al borde inferior del viewport, también en PWA. */
}

/* ============================================
   SCREENS
   ============================================ */

.screen {
  display: none;
  animation: screenIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.screen.active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;              /* permite encoger dentro del marco y SCROLLEAR */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.screen-content {
  padding: calc(env(safe-area-inset-top) + 24px) 20px calc(120px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============================================
   HEADER
   ============================================ */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 8px;
  margin-bottom: 4px;
}

.header-greeting {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}

.header-subtitle {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  font-weight: 400;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--color-track);
  color: var(--color-text);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn .material-symbols-outlined {
  font-size: 22px;
}

.notification-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb4ab;
  box-shadow: 0 0 8px rgba(255,180,171,0.5);
  display: none;
}

.notification-dot.visible {
  display: block;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  /* Sin animation: los repintados parciales recrean las tarjetas y se
     volverían a animar (parpadeo). Ver bloque .screen.active / .pt-reveal. */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

.card:hover {
  border-color: var(--color-border);
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.card-icon {
  font-size: 20px;
  color: var(--color-text-tertiary);
}

/* ============================================
   PROGRESS CARD
   ============================================ */

.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.progress-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.progress-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.progress-bar-wrap {
  margin-top: 4px;
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-text), var(--color-text), #c6c6c6, #ffffff);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

.progress-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   WEIGHT EVOLUTION
   ============================================ */

.weight-current-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.weight-current {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.weight-delta {
  font-size: 13px;
  color: var(--color-accent-protein);
  font-weight: 500;
}

.weight-delta.negative {
  color: var(--color-accent-protein);
}

.weight-delta.positive {
  color: var(--color-danger);
}

.chart-container {
  position: relative;
  height: 140px;
  width: 100%;
}

/* ============================================
   REGISTER CARD
   ============================================ */

.register-card {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.register-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.register-question {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #1a1c1c;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(255,255,255,0.1);
  white-space: nowrap;
}

.btn-primary:hover {
  /* El acabado negro con destello azul vive en el bloque RESTYLING v2 del
     final del archivo (gana por cascada): aquí solo el relieve. */
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.96);
}

.btn-primary .material-symbols-outlined {
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary:hover {
  background: var(--color-track);
  border-color: var(--color-border-strong);
}

.btn-secondary:active {
  transform: scale(0.96);
}

.btn-secondary .material-symbols-outlined {
  font-size: 16px;
}

.w-full {
  width: 100%;
}

.mt-4 {
  margin-top: 16px;
}

/* ============================================
   ACTIVITY
   ============================================ */

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.activity-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.activity-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.activity-ring-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.activity-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: conic-gradient(var(--color-text) 0%, var(--color-text) 45%, rgba(255,255,255,0.06) 45%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.activity-ring-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0f0f0f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.activity-ring-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.activity-ring-label {
  font-size: 9px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   DIET
   ============================================ */

.diet-meals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.diet-meal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.diet-meal-row:last-child {
  border-bottom: none;
}

.diet-meal-name {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}

.diet-meal-status {
  display: flex;
  align-items: center;
}

.diet-meal-status .material-symbols-outlined {
  font-size: 20px;
}

.diet-meal-status.done {
  color: var(--color-accent-protein);
}

.diet-meal-status.pending {
  color: var(--color-text-tertiary);
}

.diet-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.diet-progress-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.diet-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #6ee7b7);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

.diet-progress-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-protein);
  white-space: nowrap;
}

/* ============================================
   TODAY ACTION
   ============================================ */

.today-card {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.today-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.today-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
}

.today-action-icon .material-symbols-outlined {
  font-size: 20px;
}

.today-action-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.today-action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.today-action-sub {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.today-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.today-action-btn:hover {
  background: var(--color-track);
  color: var(--color-text);
}

.today-action-btn:active {
  transform: scale(0.9);
}

.today-action-btn .material-symbols-outlined {
  font-size: 18px;
}

/* ============================================
   NOTIFICATIONS
   ============================================ */

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 8px;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--color-surface);
}

.notification-item.unread {
  background: var(--color-surface);
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.notification-icon .material-symbols-outlined {
  font-size: 18px;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.notification-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-time {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}

.notification-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ============================================
   SECURE INDICATOR
   ============================================ */

.secure-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
  color: var(--color-text-tertiary);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.secure-indicator .material-symbols-outlined {
  font-size: 14px;
}

/* ============================================
   BOTTOM NAVIGATION (píldora flotante)
   Hijo directo del <body> (fuera del .app-shell) y position:fixed
   anclado al viewport: queda SIEMPRE en el borde inferior de la
   pantalla, también al arrancar instalada como webapp (PWA standalone).

   Diseño de píldora (adaptación del widget de Uiverse.io by asgardOP):
   fila de iconos sobre una píldora flotante. Adaptación NutriLab: la
   píldora blanca pasa a cristal oscuro, el acento magenta al ÍNDIGO de
   la marca (#93a4fa→#a5b4fc) y los SVG por los Material Symbols del
   portal. El item activo (equivalente al :checked del original) se
   ilumina y rellena; el icono de peso conserva su badge "+" verde.
   ============================================ */

.mobile-bottom-nav {
  position: fixed;
  bottom: calc(4px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 40px));
  height: 60px;
  background: rgba(13, 14, 18, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 90;
  -webkit-tap-highlight-color: transparent;
}

/* Item de la píldora (el ".ul .li .svg" del original): icono translúcido
   que se eleva (-4px) y se ilumina al pasar el ratón. */
.nav-pill {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 56px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.nav-pill .material-symbols-outlined {
  font-size: 26px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: color 0.2s ease, font-variation-settings 0.2s ease;
}
/* Hover del original (magenta + elevación) en índigo NutriLab */
.nav-pill:hover {
  color: var(--color-text);
  opacity: 1;
  transform: translateY(-4px);
}
/* Item ACTIVO (el ":checked" del original): icono índigo relleno */
.nav-pill.active {
  color: var(--color-text);
  opacity: 1;
}
/* Puntito azul de "recurso nuevo" en el icono de Recursos (como el punto
   rojo de mensajes del FAB): aparece al publicarse material y se quita al
   entrar en la pestaña. */
.nav-dot {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(13,14,18,.92), 0 0 10px rgba(59,130,246,.9);
  pointer-events: none;
}
.nav-dot[hidden] { display: none; }
.nav-pill.active .material-symbols-outlined {
  color: var(--color-text);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.nav-pill:active { transform: scale(0.92); }
.nav-pill:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Botón central "+" del registro de peso (adaptación del widget de
   Uiverse.io by catraco): círculo con cruz en trazo índigo NutriLab.
   Al pasar el ratón gira 90º y se rellena de índigo profundo; al pulsar
   destella en índigo claro. Abre el sheet de registro (open-weight). */
.nav-plus-svg {
  width: 36px;
  height: 36px;
  stroke: var(--color-text);
  fill: none;
  transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}
.nav-plus-btn:hover .nav-plus-svg {
  transform: rotate(90deg);
  fill: #312e81;
}
.nav-plus-btn:active .nav-plus-svg {
  stroke: var(--color-text);
  fill: var(--color-text);
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill,
  .nav-pill .material-symbols-outlined,
  .nav-plus-svg {
    transition: none;
  }
}

/* ============================================
   BOTTOM SHEET
   ============================================ */

.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bottom-sheet-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(env(safe-area-inset-bottom) + 20px);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85dvh;
  overflow-y: auto;
  /* Contenido fijo: sin desplazamiento lateral del sheet */
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.bottom-sheet-overlay.visible .bottom-sheet {
  transform: translateY(0);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-track);
  margin: 0 auto 16px;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheet-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.sheet-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
}

.sheet-close:hover {
  background: var(--color-track);
  color: var(--color-text);
}

.sheet-close .material-symbols-outlined {
  font-size: 18px;
}

.sheet-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sheet-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

.weight-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.weight-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 56px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  padding: 0 48px;
  outline: none;
  transition: all 0.25s ease;
  -moz-appearance: textfield;
  appearance: textfield;
}

.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.weight-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.weight-input:focus {
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
}

.weight-unit {
  position: absolute;
  right: 16px;
  font-size: 14px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* Igual de ancho (y mismo aspecto) que el resto de cuadros de texto de los
   sheets (.pt-input): ancho completo + border-box, para que el campo de
   fecha no se corte nunca (Chrome/iOS recortan el value de los date inputs
   si no se les quita la apariencia nativa y se les fija el alto interno). */
.date-input {
  display: flex;
  align-items: center; /* centra la fecha en vertical (fix iOS Safari) */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 52px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  font-size: .9rem;
  font-family: inherit;
  padding: 0 14px; /* el centrado vertical lo hace flex */
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  transition: all 0.25s ease;
}

.date-input:focus {
  border-color: rgba(74,222,128,.5);
  background: var(--color-surface-2);
}

/* Chrome/Safari: la fecha no debe ser más alta que la caja ni recortarse.
   El centrado vertical lo hace el flex del propio input (align-items). */
.date-input::-webkit-date-and-time-value {
  min-height: 0;
  text-align: left;
}
.date-input::-webkit-calendar-picker-indicator {
  margin-left: 4px;
  opacity: .65;
  cursor: pointer;
}

/* ============================================
   SKELETON LOADERS
   ============================================ */

.skeleton-card {
  display: none;
}

.skeleton-card.visible {
  display: block;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 16px;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.skeleton-block {
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-chart {
  height: 120px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-row {
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   ERROR STATE
   ============================================ */

.error-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5,5,5,0.95);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.error-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.error-card {
  text-align: center;
  padding: 32px;
  max-width: 320px;
}

.error-icon {
  font-size: 48px;
  color: var(--color-text-tertiary);
  margin-bottom: 16px;
}

.error-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.error-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ============================================
   DIETA SCREEN
   ============================================ */

.day-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.day-selector::-webkit-scrollbar {
  display: none;
}

.day-chip {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-chip .day-name {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.day-chip .day-num {
  font-size: 16px;
  font-weight: 700;
}

.day-chip.active {
  background: var(--color-track);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.day-chip:active {
  transform: scale(0.95);
}

/* Macros */
.macros-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.macro-bar-wrap {
  width: 100%;
}

.macro-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

.macro-bar-label span:last-child {
  color: var(--color-text);
  font-weight: 600;
}

.macro-bar-bg {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.macro-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

.macro-bar-fill.protein {
  background: linear-gradient(90deg, var(--color-text), var(--color-text));
}

.macro-bar-fill.carbs {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.macro-bar-fill.fat {
  background: linear-gradient(90deg, #ec4899, #f472b6);
}

.calories-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.calories-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.calories-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

/* Meals */
.meals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.meal-card.completed {
  border-color: rgba(52,211,153,0.2);
}

.meal-card.modified {
  border-color: rgba(251,191,36,0.2);
}

.meal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.meal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meal-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.meal-icon .material-symbols-outlined {
  font-size: 18px;
}

.meal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.meal-time {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.meal-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
}

.meal-status.pending {
  color: var(--color-text-tertiary);
  background: var(--color-surface-2);
}

.meal-status.completed {
  color: var(--color-accent-protein);
  background: rgba(52,211,153,0.1);
}

.meal-status.modified {
  color: var(--color-accent-carbs);
  background: rgba(251,191,36,0.1);
}

.meal-body {
  padding: 16px 20px;
}

.meal-calories {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.meal-foods {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meal-food {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.meal-food .food-qty {
  color: var(--color-text-tertiary);
}

/* ============================================
   SEGUIMIENTO SCREEN
   ============================================ */

.measurements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.measurement-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.measurement-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.measurement-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.measurement-delta {
  font-size: 11px;
  margin-top: 2px;
}

.measurement-delta.negative {
  color: var(--color-accent-protein);
}

.measurement-delta.positive {
  color: var(--color-danger);
}

/* Goals */
.goal-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goal-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.goal-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.goal-progress {
  margin-top: 8px;
}

.goal-progress-bar-bg {
  height: 8px;
  background: var(--color-surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.goal-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-text), var(--color-text), #c6c6c6, #ffffff);
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

.goal-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

/* ============================================
   ACTIVIDAD SCREEN
   ============================================ */

.activity-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.activity-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.activity-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.activity-stat-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   AJUSTES SCREEN
   ============================================ */

.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-text), var(--color-text));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.profile-email {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.settings-item:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.settings-item:active {
  transform: scale(0.98);
}

.settings-item.danger {
  color: var(--color-danger);
}

.settings-item.danger .settings-icon {
  background: rgba(255,180,171,0.1);
  color: var(--color-danger);
}

.settings-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.settings-icon .material-symbols-outlined {
  font-size: 18px;
}

.settings-label {
  flex: 1;
}

.settings-arrow {
  font-size: 18px;
  color: var(--color-text-tertiary);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
  text-align: center;
  padding: 32px 16px;
}

.empty-state-icon {
  font-size: 40px;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.empty-state-text {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* 320px */
@media (max-width: 340px) {
  .screen-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-greeting {
    font-size: 22px;
  }

  .progress-grid {
    gap: 8px;
  }

  .progress-value {
    font-size: 18px;
  }

  .activity-grid {
    gap: 8px;
  }

  .activity-value {
    font-size: 16px;
  }

  .btn-primary {
    padding: 12px 16px;
    font-size: 13px;
  }

  .register-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .register-content .btn-primary {
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .app-shell {
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    box-shadow: 0 0 80px rgba(0,0,0,0.5);
  }

  .card:hover {
    transform: translateY(-2px);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .app-shell {
    max-width: 480px;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .screen-content {
    padding-top: calc(env(safe-area-inset-top) + 32px);
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================
   COMPONENTES DINÁMICOS DEL PORTAL (pt-*)
   Renderizados desde portal-app.js
   ============================================ */

.mt-3 { margin-top: 12px; }

/* ---------- Secciones ---------- */
.pt-section-title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 22px 2px 10px;
}
.pt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 2px 10px;
}
.pt-section-head .pt-section-title { margin: 0; }
.pt-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.pt-mini-btn .material-symbols-outlined { font-size: 15px; }
.pt-hint {
  font-size: .72rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ---------- Estados vacíos ---------- */
.pt-empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--color-text-secondary);
}
.pt-empty .material-symbols-outlined {
  font-size: 34px;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
.pt-empty p {
  font-size: .78rem;
  line-height: 1.55;
  max-width: 280px;
  margin: 0 auto;
}

/* ---------- Stats ---------- */
.pt-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.pt-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.pt-stat-value {
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-stat-label {
  font-size: .66rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 600;
}
.pt-delta .material-symbols-outlined { font-size: 15px; }
.pt-delta-down { color: var(--color-accent-protein); }
.pt-delta-up { color: var(--color-accent-carbs); }

/* ---------- Selector de planes ---------- */
.pt-plan-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pt-plan-chips::-webkit-scrollbar { display: none; }
.pt-plan-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: .78rem;
  font-weight: 600;
  transition: all .2s ease;
}
.pt-plan-chip .material-symbols-outlined { font-size: 15px; }
.pt-plan-chip.active {
  background: #fff;
  color: #050505;
  border-color: #fff;
}
.pt-plan-chip-name { white-space: nowrap; }

/* ---------- Objetivo nutricional ---------- */
.pt-objetivo-main {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 10px 0 14px;
}
.pt-objetivo-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ---------- Dieta de hoy ---------- */
.pt-diet-today-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.pt-diet-today-row:active { background: var(--color-surface-2); }
.pt-diet-today-row + .pt-diet-today-row { border-top: 1px solid var(--color-border); }
.pt-diet-today-icon { font-size: 20px; color: var(--color-text-tertiary); }
.pt-diet-today-row.done .pt-diet-today-icon { color: var(--color-accent-protein); }
.pt-diet-today-info { flex: 1; min-width: 0; }
.pt-diet-today-name {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-diet-today-sub {
  font-size: .7rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.pt-chevron { font-size: 20px; color: var(--color-text-tertiary); }

/* ---------- Tracking (listas y filas) ---------- */
.pt-tracking-list { display: flex; flex-direction: column; gap: 14px; }
.pt-tracking-row { display: flex; align-items: center; gap: 12px; }
.pt-tracking-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74,222,128,.1);
  color: var(--color-accent-protein);
  flex-shrink: 0;
}
.pt-tracking-icon .material-symbols-outlined { font-size: 18px; }
.pt-tracking-main { flex: 1; min-width: 0; }
.pt-tracking-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.pt-tracking-label { font-size: .8rem; font-weight: 600; }
.pt-tracking-val { font-size: .74rem; color: var(--color-text); }
.pt-tracking-val em { font-style: normal; color: var(--color-text-secondary); }

/* ---------- Acciones rápidas ---------- */
.pt-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 8px;
}
.pt-quick-btn { padding: 14px 10px; font-size: .8rem; }

/* ---------- Contenedores de secciones ---------- */
.pt-exchange-card .pt-exchange-row { /* rows dentro de la card de intercambios */ }
.pt-isak-card { background: rgba(74,222,128,.04); border-color: rgba(74,222,128,.18); }
.pt-objetivo-card { background: linear-gradient(160deg, rgba(74,222,128,.08), rgba(255,255,255,.02) 55%); border-color: rgba(74,222,128,.2); }
.pt-kcal-main {
  font-size: 2rem;
  font-weight: 800;
  margin: 8px 0 16px;
}
.pt-exchange-row { min-width: 0; }

/* ---------- Segmented control (Dieta) ---------- */
.pt-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 4px;
  margin: 16px 0;
}
.pt-segmented-btn {
  padding: 9px 6px;
  border-radius: 9px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: all .2s ease;
}
.pt-segmented-btn.active {
  background: #fff;
  color: #050505;
}

/* ---------- Macro card ---------- */
.pt-macro-card .pt-kcal-main {
  font-size: 2rem;
  font-weight: 800;
  margin: 8px 0 16px;
}
.pt-kcal-unit {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.pt-macro-row { margin-bottom: 12px; }
.pt-macro-row:last-child { margin-bottom: 0; }
.pt-macro-label {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  margin-bottom: 5px;
}
.pt-macro-label span:last-child { color: var(--color-text-secondary); }

/* ---------- Comidas ---------- */
.pt-meals-summary {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--color-text-secondary);
  margin: 2px 2px 10px;
}
.pt-meal-list { display: flex; flex-direction: column; }
.pt-meal-card {
  background: #101010;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.pt-meal-card.done {
  opacity: .78;
  border-color: rgba(74,222,128,.28);
}
.pt-meal-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.pt-meal-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-protein);
  flex-shrink: 0;
}
.pt-meal-icon .material-symbols-outlined { font-size: 20px; }
.pt-meal-title { flex: 1; min-width: 0; }
.pt-meal-name {
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-meal-meta {
  font-size: .7rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.pt-meal-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pt-meal-group {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.pt-meal-group-head { padding: 8px 12px; background: var(--color-surface); }
.pt-meal-group-body { padding: 4px 12px 8px; }
.pt-food-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.pt-food-row + .pt-food-row { border-top: 1px dashed var(--color-border); }
.pt-food-info { flex: 1; min-width: 0; }
.pt-food-name { font-size: .8rem; font-weight: 500; }
.pt-food-measure {
  font-size: .68rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.pt-food-ic {
  font-size: .68rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border-radius: 999px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.pt-food-empty {
  font-size: .72rem;
  color: var(--color-text-tertiary);
  padding: 6px 0;
}
.pt-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--g-color, var(--color-text));
  background: var(--g-bg, rgba(255, 255, 255, 0.12));
  padding: 4px 10px;
  border-radius: 999px;
}
.pt-group-chip-icon { font-size: 13px; }
.pt-group-chip b { font-weight: 800; }
.pt-meal-done {
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.pt-meal-done .material-symbols-outlined { font-size: 16px; }
.pt-meal-done.done {
  color: var(--color-accent-protein);
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.08);
}

/* ---------- Intercambios ---------- */
.pt-exchange-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 14px;
}
.pt-exchange-total b { font-size: .95rem; color: var(--color-text); }
.pt-exchange-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-exchange-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pt-exchange-count {
  font-size: .72rem;
  color: var(--color-text-secondary);
}

/* ---------- Distribución ---------- */
.pt-distrib-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pt-distrib-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--color-surface);
}
.pt-distrib-name {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.pt-distrib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- Composición corporal (ISAK) ---------- */
.pt-isak-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.pt-isak-head .material-symbols-outlined { font-size: 17px; color: var(--color-accent-protein); }

/* ---------- Inputs de tracking editables ---------- */
.pt-tracking-edit { display: flex; flex-direction: column; }
.pt-tracking-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}
.pt-tracking-input-row + .pt-tracking-input-row { border-top: 1px solid var(--color-border); }
.pt-tracking-input-label { font-size: .8rem; font-weight: 600; }
.pt-tracking-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-tracking-inputs input {
  width: 78px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: .8rem;
  font-family: inherit;
  padding: 8px 10px;
  text-align: center;
  outline: none;
}
.pt-tracking-inputs input:focus { border-color: rgba(74,222,128,.5); }
.pt-tracking-input-sep {
  color: var(--color-text-tertiary);
  font-size: .8rem;
}

/* ---------- Inputs genéricos (sheets) ---------- */
.pt-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  font-size: .9rem;
  font-family: inherit;
  padding: 12px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.pt-input:focus { border-color: rgba(74,222,128,.5); }
.pt-input::placeholder { color: var(--color-text-tertiary); }
select.pt-input option { background: #161616; color: var(--color-text); }
.pt-textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
}
.pt-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pt-input-grid .sheet-label { margin-top: 12px; }

/* ---------- Timeline de consultas ---------- */
.pt-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-consult-item {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--color-surface);
}
.pt-consult-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt-consult-icon { font-size: 20px; color: var(--color-accent-protein); }
.pt-consult-date { font-size: .82rem; font-weight: 700; }
.pt-consult-origin {
  font-size: .68rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.pt-consult-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.pt-consult-chip {
  font-size: .66rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text);
}
.pt-mood-good { background: rgba(74,222,128,.12); color: var(--color-accent-protein); }
.pt-mood-mid { background: rgba(251,191,36,.12); color: var(--color-accent-carbs); }
.pt-mood-bad { background: rgba(251,113,133,.12); color: var(--color-danger); }
.pt-consult-notes {
  font-size: .75rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-top: 10px;
}
.pt-consult-accion {
  font-size: .75rem;
  color: var(--color-text);
  line-height: 1.55;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(74,222,128,.07);
  border-left: 2px solid rgba(74,222,128,.5);
  border-radius: 6px;
}

/* ---------- Notificaciones (sheet) ---------- */
.pt-notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.pt-notif-item:last-child { border-bottom: none; }
.pt-notif-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-protein);
  flex-shrink: 0;
}
.pt-notif-icon .material-symbols-outlined { font-size: 17px; }
.pt-notif-body { flex: 1; min-width: 0; }
.pt-notif-title { font-size: .8rem; font-weight: 700; }
.pt-notif-item.unread .pt-notif-title::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #4ade80;
}
.pt-notif-text {
  font-size: .72rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: 1.45;
}
.pt-notif-time {
  font-size: .65rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  display: block;
}
/* Quién hizo la acción (Admin / nombre del paciente), bajo el título */
.pt-notif-author {
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ---------- Suplementación ---------- */
.pt-sup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.pt-sup-row + .pt-sup-row { border-top: 1px solid var(--color-border); }
.pt-sup-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(168,85,247,.12);
  color: #a855f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-sup-icon .material-symbols-outlined { font-size: 17px; }
.pt-sup-info { flex: 1; min-width: 0; }
.pt-sup-name { font-size: .82rem; font-weight: 600; }
.pt-sup-dose {
  font-size: .7rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.pt-sup-time {
  font-size: .7rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border-radius: 999px;
  padding: 3px 10px;
  flex-shrink: 0;
}

/* ---------- Perfil (Ajustes) ---------- */
.pt-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.pt-profile-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
}
.pt-profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt-profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pt-mini-btn-danger {
  border-color: rgba(239,68,68,.35) !important;
  color: var(--color-danger) !important;
}
.pt-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #050505;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-profile-name { font-size: .95rem; font-weight: 700; }
.pt-profile-sub {
  font-size: .72rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.pt-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: .8rem;
}
.pt-data-row + .pt-data-row { border-top: 1px solid var(--color-border); }
.pt-data-row span { color: var(--color-text-secondary); }
.pt-data-row b { font-weight: 600; text-align: right; }
.pt-logout {
  margin: 22px 0 10px;
  color: var(--color-danger);
  border-color: rgba(255,180,171,.3);
}

/* ---------- Toast ---------- */
.pt-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(20px);
  background: #1f1f1f;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 9999;
  max-width: 86vw;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.pt-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pt-toast.error {
  border-color: rgba(255,180,171,.5);
  color: var(--color-danger);
}

/* ---------- Loader (overlay genérico; el contenido es el splash NUTRILAB) ---------- */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,5,5,.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.loader-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   INICIO · DASHBOARD DIARIO (pt-home-*)
   Renderizado desde portal-app.js (renderInicio)
   ============================================ */

/* ---------- Objetivos de hoy (agua / pasos / sueño) ---------- */
.pt-home-goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pt-home-goal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 12px 14px;
  min-width: 0;
}
.pt-home-goal-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-accent, #4ade80);
  background: var(--g-accent-bg, rgba(74,222,128,.12));
  flex-shrink: 0;
}
.pt-home-goal-icon .material-symbols-outlined { font-size: 18px; }
.pt-home-goal-label {
  font-size: .64rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pt-home-goal-val {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.01em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-home-goal-val em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.pt-home-goal-bar {
  width: 100%;
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.pt-home-goal-bar div {
  height: 100%;
  border-radius: 2px;
  background: var(--g-accent, #4ade80);
  transition: width .8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Dieta de hoy (cabecera de progreso + hora) ---------- */
.pt-home-diet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 12px;
}
.pt-home-diet-count {
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-accent-protein);
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.22);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pt-home-diet-bar {
  flex: 1;
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.pt-home-diet-bar div {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #34d399, #6ee7b7);
  transition: width .8s cubic-bezier(0.16, 1, 0.3, 1);
}
.pt-home-meal-time {
  font-size: .68rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Actividad de hoy (entrenamiento) ---------- */
.pt-home-train-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--color-border);
}

/* ---------- Suplementación de hoy (estado del día) ---------- */
.pt-sup-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pt-sup-status .material-symbols-outlined { font-size: 20px; }
.pt-sup-status.done { color: var(--color-accent-protein); }
.pt-sup-status.pending { color: var(--color-text-tertiary); }

/* ---------- Próxima revisión (tarjeta compacta destacada) ---------- */
.pt-home-review {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255,255,255,.02) 60%);
  border-color: var(--color-border-strong);
}
.pt-home-review-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-home-review-info {
  flex: 1;
  min-width: 0;
}
.pt-home-review-date {
  font-size: 1.02rem;
  font-weight: 700;
  margin-top: 3px;
}
.pt-home-review-sub {
  font-size: .72rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-home-review-chip {
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pt-home-review[data-action] { cursor: pointer; }
.pt-home-review[data-action]:hover { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255,255,255,.04) 60%); }
.pt-home-review.empty { border-color: var(--color-border); }
.pt-home-review.empty .pt-home-review-icon { background: var(--color-surface-2); color: var(--color-text-tertiary); }
.pt-home-review.empty .pt-home-review-chip { color: var(--color-text-tertiary); background: var(--color-surface-2); border-color: var(--color-border); }
.pt-home-review.empty .pt-home-review-date { color: var(--color-text-secondary); }

/* ---------- Modal detalle próxima consulta ---------- */
.pt-review-detail { display: flex; flex-direction: column; gap: 10px; }
.pt-review-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}
.pt-review-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-review-row-icon .material-symbols-outlined { font-size: 19px; }
.pt-review-row-info { flex: 1; min-width: 0; }
.pt-review-row-label {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-tertiary);
  margin-bottom: 3px;
}
.pt-review-row-value {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-word;
}
.pt-review-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-accent-carbs);
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 12px;
  padding: 10px 12px;
}
.pt-review-pending .material-symbols-outlined { font-size: 17px; color: var(--color-accent-carbs); }
.pt-review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 6px 4px;
}
.pt-review-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-surface-2);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.pt-review-empty-icon .material-symbols-outlined { font-size: 26px; }
.pt-review-empty-title { font-size: .95rem; font-weight: 700; color: var(--color-text); margin: 0; }
.pt-review-empty-sub {
  font-size: .78rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  max-width: 300px;
}

/* ---------- Novedades (feed de comunicaciones) ---------- */
.pt-home-news-list {
  display: flex;
  flex-direction: column;
}
.pt-home-news-item {
  display: flex;
  gap: 12px;
  padding: 12px 2px;
}
.pt-home-news-item + .pt-home-news-item {
  border-top: 1px solid var(--color-border);
}
.pt-home-news-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-home-news-icon .material-symbols-outlined { font-size: 18px; }
.pt-home-news-item.nueva .pt-home-news-icon {
  background: rgba(74,222,128,.1);
  color: var(--color-accent-protein);
}
.pt-home-news-content {
  flex: 1;
  min-width: 0;
}
.pt-home-news-title {
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.pt-home-news-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
  flex-shrink: 0;
}
.pt-home-news-text {
  font-size: .72rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}
.pt-home-news-time {
  font-size: .66rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}
/* Quién hizo la acción (Admin / nombre del paciente), bajo el título */
.pt-home-news-author {
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ============================================
   SEGUIMIENTO (pt-seg-*)
   Reutiliza la estética de las secciones
   "Composición Corporal" y "Evolución Visual"
   del panel (index.html)
   ============================================ */

/* ---------- Tu progreso (estilo tarjetas Composición Corporal) ---------- */
.pt-seg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pt-seg-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
  min-height: 86px;
}
.pt-seg-stat-label {
  font-size: .6rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.pt-seg-stat-value {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text);
  line-height: 1.1;
}
.pt-seg-stat-unit {
  font-size: .68rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  margin-left: 4px;
}
.pt-seg-stat-date {
  font-size: .92rem;
  font-weight: 700;
}

/* ---------- Evolución: tabs de métricas ---------- */
.pt-seg-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}
.pt-seg-tabs::-webkit-scrollbar { display: none; }
.pt-seg-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: .74rem;
  font-weight: 600;
  transition: all .2s ease;
  cursor: pointer;
}
.pt-seg-tab.active {
  background: #fff;
  color: #050505;
  border-color: #fff;
}

/* ---------- Medidas corporales (estilo Composición Corporal) ---------- */
.pt-seg-measures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pt-seg-measure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.pt-seg-measure-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 700;
}
.pt-seg-measure-delta .material-symbols-outlined { font-size: 15px; }

/* ---------- Fotos de progreso (Evolución Visual) ---------- */
.pt-seg-photos { padding: 16px; }
.pt-seg-gallery { min-height: 120px; }
.pt-seg-gallery-empty {
  padding: 44px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: .28;
}
.pt-seg-gallery-empty .material-symbols-outlined { font-size: 40px; }
.pt-seg-gallery-empty p {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
}

/* Álbumes (tarjetas tipo carpeta, mismo diseño que index.html) */
.pt-seg-albums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.pt-seg-album {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.pt-seg-album:hover { border-color: var(--color-border-strong); background: #222; }
.pt-seg-album-flap {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 48px;
  height: 48px;
  background: var(--color-surface-2);
  transform: rotate(45deg);
  transition: background .25s ease;
}
.pt-seg-album:hover .pt-seg-album-flap { background: var(--color-track); }
.pt-seg-album-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.pt-seg-album-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.pt-seg-album:hover .pt-seg-album-preview img { transform: scale(1.1); }
.pt-seg-album-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #fff;
  color: #000;
  padding: 6px;
  border-radius: 10px;
  display: flex;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
.pt-seg-album-icon .material-symbols-outlined {
  font-size: 15px;
  font-variation-settings: 'FILL' 1;
}
.pt-seg-album-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-seg-album-placeholder .material-symbols-outlined { font-size: 34px; opacity: .2; }
.pt-seg-album-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.95), transparent 60%);
  opacity: .9;
}
.pt-seg-album-count {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--color-text);
  background: var(--color-track);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 999px;
}
.pt-seg-album-meta { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.pt-seg-album-date {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-text);
  line-height: 1.2;
}
.pt-seg-album-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.pt-seg-album-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-tertiary);
  padding-left: 20px;
}
.pt-seg-album-row .material-symbols-outlined { font-size: 13px; transition: transform .25s ease; }
.pt-seg-album:hover .pt-seg-album-row .material-symbols-outlined { transform: translateX(3px); color: var(--color-text); }

/* Vista interior de un álbum */
.pt-seg-folder-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.pt-seg-folder-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  transition: background .2s ease;
  flex-shrink: 0;
}
.pt-seg-folder-back:hover { background: var(--color-track); }
.pt-seg-folder-back .material-symbols-outlined { font-size: 18px; }
.pt-seg-folder-date {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-text);
}
.pt-seg-folder-sub {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.pt-seg-folder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.pt-seg-folder-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  cursor: zoom-in;
}
.pt-seg-folder-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pt-seg-folder-item:hover img { transform: scale(1.06); }

/* ---------- Revisiones (listado de consultas de index.html) ---------- */
.pt-seg-revs { padding: 8px 10px; }
.pt-seg-rev-empty {
  padding: 44px 16px;
  text-align: center;
  font-size: .66rem;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-text-tertiary);
}
.pt-seg-rev-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s ease;
}
.pt-seg-rev-item:hover { background: var(--color-surface-2); }
.pt-seg-rev + .pt-seg-rev .pt-seg-rev-item { border-top: 1px solid var(--color-border); }
.pt-seg-rev-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  transition: color .2s ease;
}
.pt-seg-rev-item:hover .pt-seg-rev-icon { color: var(--color-text); }
.pt-seg-rev-icon .material-symbols-outlined { font-size: 18px; }
.pt-seg-rev-info { flex: 1; min-width: 0; }
.pt-seg-rev-date {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text);
}
.pt-seg-rev-sub {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.pt-seg-rev-chevron {
  font-size: 20px;
  color: var(--color-text-tertiary);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.pt-seg-rev-detail {
  padding: 2px 10px 14px 58px;
}
.pt-seg-rev-detail .pt-consult-accion,
.pt-seg-rev-detail .pt-consult-notes { margin-top: 8px; }

/* ---------- ¿Cómo te encuentras hoy? (diario ultrarrápido) ---------- */
.pt-diario-card { padding-top: 16px; }
.pt-diario-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.pt-diario-status .material-symbols-outlined { font-size: 15px; }
.pt-diario-status.done {
  color: var(--color-accent-protein);
  background: rgba(74,222,128,.08);
  border-color: rgba(74,222,128,.3);
}
.pt-diario-q {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 16px 0 8px;
}
.pt-diario-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pt-diario-chips.pt-diario-moods { grid-template-columns: repeat(4, 1fr); }
.pt-diario-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 6px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pt-diario-chip:active { transform: scale(.94); }
.pt-diario-chip.active {
  background: #fff;
  color: #050505;
  border-color: #fff;
  font-weight: 700;
}
.pt-diario-moods .pt-diario-chip { font-size: 1.35rem; padding: 8px 6px; }
.pt-diario-sueno {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-diario-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 600;
  padding: 11px 12px;
  outline: none;
  cursor: pointer;
  text-align: center;
}
.pt-diario-sueno-sep {
  font-size: .74rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.pt-diario-hist {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.pt-diario-hist-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
.pt-diario-hist-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
}
.pt-diario-hist-row + .pt-diario-hist-row { border-top: 1px dashed var(--color-border); }
.pt-diario-hist-date {
  font-size: .66rem;
  font-weight: 800;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.pt-diario-hist-line {
  font-size: .68rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  min-width: 0;
}

/* ---------- Lightbox de fotos de progreso ---------- */
.pt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  cursor: zoom-out;
}
.pt-lightbox.visible {
  opacity: 1;
  pointer-events: auto;
}
.pt-lightbox img {
  max-width: 94%;
  max-height: 82dvh;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
}
.pt-lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  right: 16px;
  font-size: 26px;
  color: var(--color-text);
  background: var(--color-track);
  border-radius: 50%;
  padding: 8px;
}

/* ============================================
   PREMIUM UPGRADE · PORTAL CLIENTE
   Capa de pulido visual (se añade al final del
   fichero para tener precedencia sobre lo anterior)
   ============================================ */

/* ---- Marca NUTRILAB ---- */
/* Cabecera: solo el logo NUTRILAB, GRANDE y CENTRADO (sin barra) y la foto
   de perfil a la derecha (de ella cuelga el menú). La campana y la
   interrogación ya no viven aquí: están en .header-tools, a la derecha del
   app-header de cada pestaña, a la altura del saludo / título. */
.pt-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  min-height: 40px;
}
.pt-brand .pt-brand-name {
  font-size: 34px;
  letter-spacing: .01em;
}
.pt-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-text), var(--color-text));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255,255,255,.28);
}
.pt-brand-mark .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.pt-brand-name {
  font-family: 'Michroma', sans-serif;
  font-size: 21px;
  letter-spacing: -.02em;
  background: linear-gradient(to bottom, #ffffff, #b9b9b9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pt-brand-tag {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 600;
}
/* Grupo flotante de la cabecera: SOLO la foto de perfil, superpuesta a la
   derecha del logo (el menú de perfil cuelga de ella). */
.pt-brand-float {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 60;
}
/* Foto de perfil: a la DERECHA de la pantalla, dentro del app-header de cada
   pestaña, en la misma línea que el saludo / título ("Buenos días…" en
   Inicio). El menú de perfil cuelga alineado a la derecha. */
.pt-header-ava {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Accesos de la cabecera (campana + interrogación): van DEBAJO del día /
   subtítulo, al principio del contenido de cada pestaña. SIN fondo ni
   desenfoque — solo los iconos — para no competir con el contenido. El
   margen negativo compensa el gap de .screen-content y los pega al día. */
.header-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: -12px;
  margin-left: -6px;
}
.pt-float-btn {
  position: relative;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .15s ease, transform .1s ease;
}
.pt-float-btn:active { transform: scale(.9); }
.pt-float-btn:hover { opacity: 1; }
.pt-float-btn .material-symbols-outlined { font-size: 21px !important; color: var(--color-text); }
.pt-help-btn .material-symbols-outlined { color: var(--color-accent-protein); }
.pt-float-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb4ab;
  box-shadow: 0 0 8px rgba(255, 180, 171, 0.5);
}
.pt-float-dot[hidden] { display: none; }
/* Foto de perfil en la cabecera */
.pt-brand-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.pt-brand-avatar:active { transform: scale(0.94); }
.pt-brand-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt-brand-avatar-initials {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: .02em;
}
/* Modal de perfil (bottom sheet): avatar grande, nombre y las acciones
   Ajustes / Cerrar sesión. El sheet es único para toda la app
   (#perfilSheetOverlay) y se abre desde la foto de la cabecera. */
.pt-perfil-sheet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 10px;
}
.pt-perfil-sheet-ava {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.pt-perfil-sheet-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt-perfil-sheet-initials {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: .02em;
}
.pt-perfil-sheet-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 12px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pt-perfil-sheet-sub {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin: 3px 0 0;
}
.pt-perfil-sheet-actions { display: flex; flex-direction: column; gap: 6px; }
.pt-perfil-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.pt-perfil-item:active { background: var(--color-surface-2); }
.pt-perfil-item .material-symbols-outlined { font-size: 18px; color: var(--color-text-secondary); }
.pt-perfil-item.danger { color: var(--color-danger); }
.pt-perfil-item.danger .material-symbols-outlined { color: rgba(252, 165, 165, 0.75); }

/* ---- Sliders de Objetivos de hoy (agua / sueño) ---- */
.pt-slider-wrap { position: relative; display: flex; align-items: center; }
.pt-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: var(--color-track);
  outline: none;
  margin: 8px 0;
  cursor: pointer;
}
.pt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sl-accent, var(--color-text));
  border: 2.5px solid #0b0b10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 3px 10px rgba(0,0,0,.45);
  cursor: pointer;
}
.pt-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sl-accent, var(--color-text));
  border: 2.5px solid #0b0b10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 3px 10px rgba(0,0,0,.45);
  cursor: pointer;
}
.pt-slider-goal {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255,255,255,.4);
  pointer-events: none;
}

/* ---- Gráfico con scroll horizontal ---- */
.pt-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 14px;
}
.pt-chart-scroll::-webkit-scrollbar { display: none; }
.pt-chart-inner { position: relative; }

/* ---- Tu nutricionista ---- */
.pt-nutri-card { padding: 16px 18px; }
.pt-nutri-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-text), var(--color-text));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 10px 26px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255,255,255,.28);
}
.pt-nutri-avatar .material-symbols-outlined { color: var(--color-text); font-size: 24px; font-variation-settings: 'FILL' 1; }
.pt-nutri-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-text); }
.pt-nutri-sub { margin: 4px 0 0; font-size: 11px; color: var(--color-text-secondary); line-height: 1.55; }

/* ---- Pagos ---- */
.pt-pay-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.pt-pay-card:active { transform: scale(.985); }
.pt-pay-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(74,222,128,.2), rgba(52,211,153,.08));
  color: var(--color-accent-protein);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.pt-pay-icon .material-symbols-outlined { font-size: 20px; }
.pt-pay-info { flex: 1; min-width: 0; }
.pt-pay-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.pt-pay-sub { margin: 2px 0 0; font-size: 10.5px; color: var(--color-text-tertiary); }

/* ---- Calidad de sueño (Objetivos de hoy) ---- */
.pt-goal-quality { margin-top: 4px; }
.pt-quality-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-quality-chip {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s ease;
  font-family: 'Inter', sans-serif;
}
.pt-quality-chip:active { transform: scale(.95); }
.pt-quality-chip.active {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* ---- Novedades: botón "Ver más" ---- */
.pt-news-more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  padding: 9px 0;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 11px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .2s ease;
}
.pt-news-more:active { transform: scale(.98); }
.pt-news-more .material-symbols-outlined { font-size: 14px; }

/* ---- Splash de carga: rejilla de puntos de fondo (identidad del portal) ---- */
.loader-overlay {
  gap: 0;
  background: var(--color-bg);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility .8s ease;
}
.splash-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.splash-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.45) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(135deg, transparent 40%, black 50%, transparent 60%);
  mask-image: linear-gradient(135deg, transparent 40%, black 50%, transparent 60%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  animation: dots-sweep 5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes dots-sweep {
  0% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; opacity: 0; }
  15% { opacity: 1; }
  45%, 55% { opacity: 1; filter: brightness(1.15); }
  85% { opacity: 1; }
  100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; opacity: 0; }
}
/* ---- Splash · Loader NUTRILAB (uiverse.io Shoh2008, adaptado a la marca:
     rombo giratorio con degradado esmeralda/índigo, núcleo hueco que se
     funde con el fondo negro y el nombre NUTRILAB latiendo debajo) ---- */
.loader-box {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  user-select: none;
  -webkit-user-select: none;
}
.loader {
  width: 48px;
  height: 48px;
  display: block;
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(135deg, #34d399, var(--color-text));
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.45);
  animation: rotationBack 1s ease-in-out infinite reverse;
}
.loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  transform: rotate(45deg);
  background: rgba(52, 211, 153, .55);
  box-shadow: 0 0 14px rgba(52, 211, 153, .35);
}
.loader::after {
  content: '';
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--color-bg);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(0, 0, 0, .6);
}
@keyframes rotationBack {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.loader-name {
  font-family: 'Michroma', sans-serif;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .32em;
  padding-left: .32em; /* compensa el letter-spacing para centrar ópticamente */
  background: linear-gradient(to bottom, #ffffff, #b9b9b9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: loader-name-pulse 2s ease-in-out infinite;
}
@keyframes loader-name-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader-name,
  .splash-grid::after { animation: none !important; }
}

/* ---- Pulido global ---- */
.app-shell {
  background: radial-gradient(1100px 480px at 50% -180px, #0c0c14, #050505 62%);
}
.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 300px at 90% -6%, rgba(255, 255, 255, 0.1), transparent 62%),
    radial-gradient(460px 260px at -12% 26%, rgba(52,211,153,.05), transparent 60%);
  pointer-events: none;
}
.screen { position: relative; z-index: 1; }
.card {
  border-color: var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.32);
}
.header-greeting {
  background: linear-gradient(to bottom, #ffffff, #b9b9b9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Menú inferior: píldora flotante centrada (position:fixed sobre el body,
   60px de alto + safe-area, z-index por debajo de los overlays). Fuera del
   app-shell evita el bug de iOS standalone al arrancar la webapp, que dejaba
   el menú despegado del borde inferior. (El item activo se resalta en el
   bloque BOTTOM NAVIGATION: icono relleno en índigo NutriLab.) */
.meal-card { box-shadow: 0 16px 36px rgba(0,0,0,.26); }
.meal-header:active { background: var(--color-surface-2) !important; }
.meal-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
::selection { background: rgba(255, 255, 255, 0.35); }

/* ---- Entrada de Instrucciones (abre el modal) ---- */
.pt-entry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, background .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.pt-entry-card:active { transform: scale(.985); }
.pt-entry-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.pt-entry-icon .material-symbols-outlined { font-size: 20px; }
.pt-entry-info { flex: 1; min-width: 0; }
.pt-entry-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.pt-entry-sub { margin: 2px 0 0; font-size: 10.5px; color: var(--color-text-tertiary); }
.pt-entry-chevron { color: var(--color-text-tertiary); font-size: 20px; }

/* ---- Lista de la compra ---- */
.pt-buy-card { padding: 4px 18px 10px; }
.pt-buy-sub { margin: 12px 0 0; font-size: 10px; color: var(--color-text-tertiary); }
.pt-buy-cat { padding: 13px 0; border-bottom: 1px solid var(--color-border); }
.pt-buy-cat-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pt-buy-cat-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pt-buy-cat-icon .material-symbols-outlined { font-size: 14px; }
.pt-buy-cat-name { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.pt-buy-cat-count { margin-left: auto; font-size: 10px; color: var(--color-text-tertiary); flex-shrink: 0; }
.pt-buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-left: 35px; }
.pt-buy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  padding: 7px 10px;
}
.pt-buy-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pt-buy-name {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-buy-qty {
  font-size: 9px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
  letter-spacing: .02em;
}

/* ---- Ideas de recetas ---- */
.pt-recipes-head { display: flex; align-items: center; gap: 9px; margin: 20px 2px 9px; }
.pt-recipes-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.pt-recipes-icon .material-symbols-outlined { font-size: 14px; }
.pt-recipes-name { font-size: 12.5px; font-weight: 700; color: var(--color-text); letter-spacing: .01em; }
.pt-recipes-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.09), transparent); }
.pt-recipes-count { font-size: 10px; color: var(--color-text-tertiary); flex-shrink: 0; }
.pt-recipe-list { display: flex; flex-direction: column; gap: 8px; }
.pt-recipe {
  display: flex;
  align-items: center;
  gap: 11px;
  background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-text);
  border-radius: 13px;
  padding: 11px 13px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}
.pt-recipe:active { transform: scale(.985); }
.pt-recipe-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-recipe-icon .material-symbols-outlined { font-size: 17px; }
.pt-recipe-body { flex: 1; min-width: 0; }
.pt-recipe-name { margin: 0; font-size: 12px; font-weight: 600; color: var(--color-text); }
.pt-recipe-desc { margin: 3px 0 0; font-size: 10.5px; color: var(--color-text-secondary); line-height: 1.5; }

/* ---- Modal de Instrucciones ---- */
.pt-sheet-sub { margin: 0 0 16px; font-size: 11px; color: var(--color-text-secondary); line-height: 1.55; }
.pt-timeline { position: relative; }
.pt-timeline-line {
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05));
}
.pt-step { position: relative; display: flex; gap: 12px; padding: 6px 0; }
.pt-step-num {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}
.pt-step-text { margin: 3px 0 0; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.55; }
.pt-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 10.5px;
  line-height: 1.45;
}
.pt-note-green { background: rgba(52,211,153,.05); border: 1px solid rgba(16,185,129,.14); color: var(--color-text-secondary); }
.pt-note .material-symbols-outlined { font-size: 16px; color: var(--color-accent-protein); flex-shrink: 0; }

/* ============================================
   INICIO · OBJETIVOS DE HOY (adaptado a móvil)
   ============================================ */
.pt-goals-card { padding: 16px 18px; }
.pt-goals-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.pt-goals-day-head { display: flex; align-items: center; justify-content: space-between; }
.pt-goals-day-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-secondary);
  font-weight: 700;
}
.pt-goals-day-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  padding: 2px 10px;
  border-radius: 99px;
}
.pt-goals-day-bar {
  height: 5px;
  border-radius: 99px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.pt-goals-day-bar > div {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-text), var(--color-text));
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.pt-goal-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.pt-goal-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.pt-goal-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pt-goal-row-icon .material-symbols-outlined { font-size: 20px; }
.pt-goal-row-main { flex: 1; min-width: 0; }
.pt-goal-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-goal-row-label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.pt-goal-row-val { font-size: 12px; color: var(--color-text); font-weight: 700; }
.pt-goal-row-val em { font-style: normal; font-weight: 400; color: var(--color-text-tertiary); font-size: 11px; }
.pt-goal-row-bar { height: 4px; border-radius: 99px; background: var(--color-surface-2); overflow: hidden; margin: 7px 0 9px; }
.pt-goal-row-bar > div { height: 100%; border-radius: 99px; transition: width .5s cubic-bezier(.16,1,.3,1); }
.pt-goal-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-goal-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s ease;
  font-family: 'Inter', sans-serif;
}
.pt-goal-btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.pt-goal-btn:active { transform: scale(.95); }
.pt-goal-btn.accent {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.pt-goal-hint { font-size: 10px; color: var(--color-text-tertiary); }
.pt-goal-input {
  width: 92px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.pt-goal-input:focus { border-color: var(--color-border-strong); }

/* ---- Evolución: selector de rango + stats ---- */
.pt-range-chips { display: flex; gap: 6px; margin-bottom: 12px; }
.pt-range-chip {
  flex: 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s ease;
  font-family: 'Inter', sans-serif;
}
.pt-range-chip.active {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.pt-wstats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pt-wstat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pt-wstat-head { display: flex; align-items: center; gap: 7px; }
.pt-wstat-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-wstat-icon .material-symbols-outlined { font-size: 13px; }
.pt-wstat-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-tertiary);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-wstat-value {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-wstat-delta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.pt-wstat-delta .material-symbols-outlined { font-size: 13px; }
.pt-wstat-sub {
  margin: 2px 0 0;
  font-size: 9px;
  color: var(--color-text-tertiary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Suplementación de hoy (nombre titular + specs ·) ---- */
.pt-sup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.pt-sup-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.pt-sup-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.pt-sup-icon .material-symbols-outlined { font-size: 20px; }
.pt-sup-info { flex: 1; min-width: 0; }
.pt-sup-name { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.pt-sup-specs {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.pt-sup-dot { margin: 0 4px; color: var(--color-text-tertiary); }

/* Utilidad de visibilidad (usada por modales y vistas del portal) */
.hidden { display: none !important; }

/* ---- Agenda: sheet fijo, no se mueve ---- */
#agendaSheetOverlay .bottom-sheet {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  transform: none !important;
  touch-action: pan-y;
}
#agendaSheetOverlay .sheet-body {
  max-height: 68dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
#instruccionesSheetOverlay .bottom-sheet {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  transform: none !important;
}
#instruccionesSheetOverlay .sheet-body {
  max-height: 62dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- Libro de recetas: sheet fijo, más alto para listar recetas ----
   El ÚNICO scroll es .sheet-body: el sheet es una columna flex y nunca se
   desplaza él mismo. Antes el sheet tenía max-height 85dvh + overflow-y auto
   Y el body max-height 78dvh con `overscroll-behavior: contain`: el gesto no
   encadenaba del body al sheet y el final del contenido (últimas tarjetas y
   nota verde) quedaba inalcanzable. */
#recetasSheetOverlay .bottom-sheet {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
  overflow-y: hidden;
}
#recetasSheetOverlay .sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Un poco más de recorrido al final: lo último nunca queda pegado al borde */
  padding-bottom: 20px;
}
.pt-receta-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Dieta: apartado Recetas (entrada al libro) ---- */
.pt-dieta-tool {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255,255,255,.02) 55%);
  border-color: var(--color-border-strong);
}
.pt-dieta-tool-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pt-dieta-tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-dieta-tool-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.pt-dieta-tool-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* ---- Dieta: Lista de la compra ---- */
.pt-compra-card {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(251,191,36,.08), rgba(255,255,255,.02) 55%);
  border-color: rgba(251,191,36,.16);
}
.pt-compra-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,191,36,.02));
  border-bottom: 1px solid rgba(251,191,36,.14);
}
.pt-compra-head-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pt-compra-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251,191,36,.16);
  color: var(--color-accent-carbs);
  flex-shrink: 0;
}
.pt-compra-icon .material-symbols-outlined { font-size: 22px; }
.pt-compra-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.pt-compra-sub {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin: 2px 0 0;
}
.pt-compra-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pt-compra-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-accent-carbs);
  background: rgba(251,191,36,.14);
  border: 1px solid rgba(251,191,36,.25);
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  transition: all .25s ease;
}
.pt-compra-count.complete {
  color: #052e16;
  background: #34d399;
  border-color: #34d399;
}
.pt-compra-bar {
  width: 74px;
  height: 5px;
  border-radius: 99px;
  background: var(--color-track);
  overflow: hidden;
}
.pt-compra-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #fbbf24, #34d399);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.pt-compra-groups {
  padding: 4px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-compra-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 10px 4px 4px;
}
.pt-compra-cat .material-symbols-outlined {
  font-size: 15px;
  color: var(--cat, #fbbf24);
}
.pt-compra-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.pt-compra-item:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.pt-compra-item:active { transform: scale(.985); }
.pt-compra-item input { display: none; }
.pt-compra-box {
  width: 21px;
  height: 21px;
  border-radius: 7px;
  flex-shrink: 0;
  border: 2px solid var(--color-border-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.pt-compra-box .material-symbols-outlined {
  font-size: 15px;
  color: #052e16;
  font-weight: 700;
  opacity: 0;
  transform: scale(.3) rotate(-30deg);
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.pt-compra-item input:checked ~ .pt-compra-box {
  background: #34d399;
  border-color: #34d399;
}
.pt-compra-item input:checked ~ .pt-compra-box .material-symbols-outlined {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.pt-compra-txt {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--color-text);
  transition: color .2s ease;
}
.pt-compra-qty {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: 3px 9px;
  border-radius: 999px;
  transition: all .2s ease;
}
.pt-compra-item.done {
  background: rgba(52,211,153,.05);
  border-color: rgba(52,211,153,.14);
}
.pt-compra-item.done .pt-compra-txt {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}
.pt-compra-item.done .pt-compra-qty {
  color: rgba(52,211,153,.5);
  background: rgba(52,211,153,.08);
  text-decoration: line-through;
}
.pt-compra-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 16px 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.pt-compra-hint .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-accent-carbs);
  flex-shrink: 0;
}

/* ---- Diario: barra de humor (sustituye a los emojis) ---- */
.pt-diario-humor { display: flex; flex-direction: column; gap: 8px; }
.pt-humor-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(90deg, #f87171 0%, #fbbf24 50%, #4ade80 100%);
}
.pt-humor-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-text);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  cursor: pointer;
}
.pt-humor-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-text);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  cursor: pointer;
}
.pt-humor-label {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  padding: 4px 14px;
  border-radius: 99px;
}

/* ---- Modal: comparar fotos (réplica del modalComparar de index.html) ---- */
.pt-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}
.pt-compare-overlay.visible { opacity: 1; visibility: visible; }
.pt-compare-box {
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  overflow: hidden;
  background: #0d0d11;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  transform: translateY(14px);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.pt-compare-overlay.visible .pt-compare-box { transform: none; }
.pt-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.pt-compare-head-info { min-width: 0; }
.pt-compare-title { font-size: 13px; font-weight: 700; color: var(--color-text); }
.pt-compare-subtitle {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-tertiary);
}
.pt-compare-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pt-compare-switch,
.pt-compare-download {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .2s ease;
  white-space: nowrap;
}
.pt-compare-switch { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.pt-compare-switch:active { background: var(--color-track); }
.pt-compare-download { background: var(--color-surface-2); border: 1px solid var(--color-border-strong); color: var(--color-text); }
.pt-compare-switch .material-symbols-outlined,
.pt-compare-download .material-symbols-outlined { font-size: 15px; }
.pt-compare-close {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); cursor: pointer;
}
.pt-compare-close .material-symbols-outlined { font-size: 18px; }
/* Vista lateral: dos fotos lado a lado con su badge de fecha */
.pt-compare-lateral {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}
.pt-compare-panel {
  position: relative;
  margin: 0;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.pt-compare-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pt-compare-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  z-index: 10;
}
.pt-compare-badge-label {
  font-size: 8.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-secondary);
}
.pt-compare-badge-label.recent { color: var(--color-text); }
.pt-compare-badge-date {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text);
}

/* Vista slider: foto reciente fija + foto anterior recortada con el manillar */
.pt-compare-slider {
  position: relative;
  margin: 14px;
  aspect-ratio: 3/4;
  max-height: 58dvh;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: col-resize;
  touch-action: none;
}
.pt-compare-slider-view { position: absolute; inset: 0; }
.pt-compare-slider-view > img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.pt-compare-slider-top {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  overflow: hidden;
  border-right: 2px solid #fff;
  /* El arrastre lo captura siempre el contenedor (como el
     pointer-events-none de #sliderOverlay en index.html) */
  pointer-events: none;
}
.pt-compare-slider-top > img {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  max-width: none;
  object-fit: contain;
  display: block;
}
.pt-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.5);
  z-index: 20;
  pointer-events: none;
  transform: translateX(-1px);
}
.pt-compare-handle-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.pt-compare-handle-dot .material-symbols-outlined { font-size: 20px; transform: rotate(90deg); }
.pt-compare-slider .pt-compare-badge.right { left: auto; right: 10px; }
/* Sin arrastre nativo de imágenes ni selección al mover el manillar */
.pt-compare-slider img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- Fotos de progreso: herramientas y acciones ---- */
.pt-seg-folder-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pt-seg-tool {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); cursor: pointer;
  transition: all .2s ease;
}
.pt-seg-tool .material-symbols-outlined { font-size: 17px; }
.pt-seg-tool:active { transform: scale(.92); }
.pt-seg-tool.active { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text); }
.pt-seg-tool.danger:active { color: var(--color-danger); border-color: rgba(248,113,113,.4); }
.pt-seg-folder-hint { margin: 8px 0 0; font-size: 10px; color: var(--color-text-tertiary); }
.pt-seg-photo-del {
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(248,113,113,.35);
  color: var(--color-danger);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pt-seg-photo-del .material-symbols-outlined { font-size: 16px; }
.pt-seg-folder-item.selected {
  outline: 3px solid var(--color-text);
  outline-offset: -3px;
  border-radius: 14px;
}
.pt-seg-photo-check {
  position: absolute;
  top: 6px; left: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.pt-seg-photo-check .material-symbols-outlined { font-size: 16px; }
.pt-seg-folder-add {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--color-text-secondary);
  font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all .2s ease;
}
.pt-seg-folder-add:active { transform: scale(.97); }
.pt-seg-folder-add .material-symbols-outlined { font-size: 22px; }
.pt-seg-new {
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 0;
  border-radius: 13px;
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--color-text-secondary);
  font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all .2s ease;
}
.pt-seg-new:active { transform: scale(.98); }
.pt-seg-new .material-symbols-outlined { font-size: 17px; }

/* ---- Galería: barra de herramientas (nuevo registro + comparar) ---- */
.pt-seg-gallery-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pt-seg-gallery-bar .pt-seg-new {
  flex: 1;
  margin-bottom: 0;
  width: auto;
}
/* Barra de modo comparar entre carpetas */
.pt-seg-compare-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 13px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.pt-seg-compare-bar .material-symbols-outlined { font-size: 16px; flex-shrink: 0; }
.pt-seg-compare-bar > span { flex: 1; min-width: 0; }
.pt-seg-compare-bar button {
  flex-shrink: 0;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.pt-seg-compare-bar button:active { transform: scale(.96); }
/* Insignia con el nº de fotos seleccionadas por carpeta */
.pt-seg-album.has-sel { border-color: rgba(255, 255, 255, 0.6); }
.pt-seg-album-sel {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.5);
}
/* Aviso de comparación activa dentro de una carpeta */
.pt-seg-folder-hint.compare { color: var(--color-text); font-weight: 600; }

/* ============================================
   OBJETIVOS DE HOY · ANILLO DE PROGRESO
   ============================================ */
.pt-goals-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Ancla para el botón de información (esquina superior derecha) */
  position: relative;
}
/* Botón "i" de información de Objetivos de hoy (arriba a la derecha de la
   tarjeta): abre un bottom sheet explicando qué se registra y el reinicio
   diario a las 00:00. */
.pt-goals-info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .15s ease;
}
.pt-goals-info .material-symbols-outlined { font-size: 16px; }
.pt-goals-info:active { transform: scale(.92); }
/* Contenido del sheet informativo de Objetivos de hoy */
.pt-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pt-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  padding: 12px 14px;
}
.pt-info-item p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--color-text); }
.pt-info-item p b { color: var(--color-text); font-weight: 700; }
.pt-info-item-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  color: var(--color-text);
}
.pt-info-item-icon .material-symbols-outlined { font-size: 18px; }
.pt-goals-ring-wrap {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 4px auto 10px;
}
.pt-goals-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pt-goals-ring-bg,
.pt-goals-ring-fg {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.pt-goals-ring-bg { stroke: var(--color-text-tertiary); }
.pt-goals-ring-fg {
  stroke: var(--color-text);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
  transition: stroke-dashoffset .5s ease;
}
.pt-goals-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.pt-goals-ring-pct {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}
.pt-goals-ring-cap {
  font-style: normal;
  font-size: 9px;
  color: var(--color-text-tertiary);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pt-goal-meta { padding: 7px 0; }

/* ============================================
   AGENDA · HORA (scroll horizontal bloqueado,
   mismo patrón que el gráfico de registro de peso)
   ============================================ */
.pt-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  margin: 2px -20px 0;
  padding: 4px 20px 6px;
}
.pt-hscroll::-webkit-scrollbar { display: none; }
.pt-hscroll-inner {
  display: flex;
  gap: 8px;
  width: max-content;
}
.pt-hora-chip {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .2s ease;
}
.pt-hora-chip.active {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.pt-hora-chip:active { transform: scale(.96); }

/* ============================================
   DIARIO · BARRAS DE PROGRESO (trasladadas)
   ============================================ */
.pt-diario-progreso {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 12px 12px 6px;
  margin-bottom: 12px;
}
.pt-diario-progreso-title {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ============================================
   REVISIONES · TARJETA DE CONSULTA
   ============================================ */
.pt-seg-rev-card { cursor: pointer; }
.pt-seg-rev-card:hover { background: var(--color-surface-2); }
.pt-seg-rev-card .pt-seg-rev-chevron { color: var(--color-text-tertiary); }

/* ============================================
   MODAL CONSULTA DE SEGUIMIENTO (solo lectura)
   ============================================ */
.pt-consulta-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end; /* modal compacto anclado abajo (bottom sheet) */
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.pt-consulta-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.pt-consulta-modal {
  width: 100%;
  max-width: 480px; /* mismo ancho que el resto de sheets del portal */
  max-height: 76dvh; /* más pequeño: no ocupa toda la pantalla */
  display: flex;
  flex-direction: column;
  background: #0b0b0d;
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  transform: translateY(24px);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.pt-consulta-overlay.visible .pt-consulta-modal { transform: translateY(0); }
.pt-consulta-grip {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-track);
  margin: 10px auto 0;
}
.pt-consulta-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  border-bottom: none;
  background: transparent;
}
.pt-consulta-head-info { flex: 1; min-width: 0; }
.pt-consulta-title {
  margin: 0;
  font-family: 'Michroma', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--color-text);
  text-transform: uppercase;
}
.pt-consulta-subtitle {
  margin: 3px 0 0;
  font-size: 10.5px;
  color: var(--color-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.pt-consulta-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pt-consulta-close .material-symbols-outlined { font-size: 18px; }
.pt-consulta-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 16px 14px;
}
.pt-cons-wrap { display: flex; flex-direction: column; gap: 12px; }

/* ---- Indicador de fases ---- */
.pt-consulta-steps { padding: 0 16px 12px; }
.pt-consulta-steps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pt-consulta-step-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text);
}
.pt-consulta-step-dots { display: flex; align-items: center; gap: 7px; }
.pt-consulta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-track);
  cursor: pointer;
  transition: all .25s ease;
}
.pt-consulta-dot.done { background: rgba(255, 255, 255, 0.45); }
.pt-consulta-dot.active {
  background: var(--color-text);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.65);
  transform: scale(1.15);
}
.pt-consulta-step-bar {
  height: 3px;
  border-radius: 99px;
  background: var(--color-track);
  overflow: hidden;
}
.pt-consulta-step-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-text), var(--color-text));
  transition: width .35s cubic-bezier(.16,1,.3,1);
}

/* ---- Pie de navegación entre fases ---- */
.pt-consulta-foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 16px);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.pt-consulta-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition: all .2s ease;
  font-family: 'Inter', sans-serif;
}
.pt-consulta-nav .material-symbols-outlined { font-size: 16px; }
.pt-consulta-nav.ghost {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.pt-consulta-nav.ghost:disabled { opacity: .35; pointer-events: none; }
.pt-consulta-nav.primary {
  background: #fff;
  color: #000;
  border: 1px solid transparent;
}
.pt-consulta-nav.primary:active { transform: scale(.97); }
.pt-cons-section {
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  padding: 14px;
}
.pt-cons-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.pt-cons-section-head .material-symbols-outlined { font-size: 17px; }
.pt-cons-section-head h3 {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
}
.pt-cons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pt-cons-field.pt-cons-wide { grid-column: 1 / -1; }
.pt-cons-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pt-cons-label b { color: var(--color-text); font-weight: 800; }
.pt-cons-static {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12.5px;
  opacity: .9;
}
.pt-cons-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--color-track);
  overflow: hidden;
}
.pt-cons-bar > div {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-text), var(--color-text));
}
.pt-cons-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-cons-btn {
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
}
.pt-cons-btn.active {
  border-color: rgba(74,222,128,.5);
  background: rgba(74,222,128,.12);
  color: var(--color-accent-protein);
}
.pt-cons-text {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
@media (max-width: 380px) {
  .pt-cons-grid { grid-template-columns: 1fr; }
}
/* Lectura por fases: dentro del modal compacto los campos se apilan en una
   sola columna para que cada fase se vea limpia y sin agobiar. */
.pt-consulta-modal .pt-cons-grid { grid-template-columns: 1fr; }

/* ---- Registro de comidas: galería por día ---- */
.pt-comidas-head { margin-bottom: 4px; }
.pt-comidas-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.pt-comidas-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.pt-comida-day {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 12px;
}
.pt-comida-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pt-comida-day-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: capitalize;
}
.pt-comida-day-count {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-tertiary);
}
.pt-comida-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.pt-comida-strip::-webkit-scrollbar { height: 5px; }
.pt-comida-strip::-webkit-scrollbar-track { background: var(--color-surface-2); border-radius: 99px; }
.pt-comida-strip::-webkit-scrollbar-thumb { background: var(--color-track); border-radius: 99px; }
.pt-comida-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  margin: 0;
}
.pt-comida-day-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pt-comida-day-nav {
  display: flex;
  gap: 6px;
}
.pt-comida-day-nav button {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.pt-comida-day-nav button:hover { color: var(--color-text); background: var(--color-track); }
.pt-comida-day-nav button:active { transform: scale(.94); }
.pt-comida-day-nav .material-symbols-outlined { font-size: 16px; }
.pt-comida-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.pt-comida-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.pt-comida-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(248,113,113,.35);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.pt-comida-item:hover .pt-comida-del { opacity: 1; }
.pt-comida-del .material-symbols-outlined { font-size: 15px; }
.pt-comida-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pt-comida-feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
}
.pt-comida-feedback-tag {
  align-self: flex-start;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
}
.pt-comida-valoracion {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pt-comida-valoracion-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
}
.pt-comida-valoracion b {
  font-size: 12px;
  color: var(--color-accent-carbs);
  font-weight: 800;
}
.pt-comida-comentario {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.5;
}
.pt-comida-comentario .material-symbols-outlined {
  font-size: 15px;
  color: var(--color-text);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- Check-in diario: resumen y bloqueo ---- */
.pt-diario-resumen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(74,222,128,.2);
  background: rgba(74,222,128,.06);
}
.pt-diario-resumen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.pt-diario-resumen-row span { color: var(--color-text-secondary); font-weight: 600; }
.pt-diario-resumen-row b { color: var(--color-text); font-weight: 700; }
.pt-diario-locked {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}
.pt-diario-locked .material-symbols-outlined { font-size: 16px; color: var(--color-text); }

@media (max-width: 380px) {
  .pt-comida-card { width: 132px; }
}

/* ============================================
   CHAT CON EL NUTRICIONISTA (modal + botón flotante)
   Mensajes sincronizados en seguimientos_<id> (tipo 'chat')
   ============================================ */
/* Botón flotante (FAB): escondido asomando por el borde derecho, justo encima
   del menú inferior. Deslizar a la izquierda sobre él lo saca (.visible); a la
   derecha lo vuelve a esconder. Un toque lo saca o abre el chat. */
.pt-fab {
  position: fixed;
  right: -42px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 95;
  width: 56px;
  height: 56px;
  border-radius: 14px 0 0 14px;
  border: none;
  /* Chat en AZUL OSCURO (menos brillante que el lavanda índigo de la marca) */
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(30,58,138,.4);
  transition: right .28s ease, border-radius .28s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.pt-fab.visible {
  right: calc(12px + env(safe-area-inset-right));
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(30,58,138,.5);
}
.pt-fab:active { transform: scale(.92); }
.pt-fab .material-symbols-outlined { font-size: 24px; }
/* Badge de mensajes sin leer: píldora con contador en ROJO (color universal
   de "mensaje nuevo"), texto blanco, anillo del fondo y pop-in. */
.pt-fab-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a7a, #dc2626);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  border: none;
  box-shadow: 0 4px 14px rgba(220,38,38,.5);
  display: none;
  /* Número SIEMPRE centrado en el círculo (horizontal y vertical) */
  align-items: center;
  justify-content: center;
}
.pt-fab-badge.visible {
  display: flex;
  animation: pt-fab-badge-in .38s cubic-bezier(.22,1,.36,1) both;
}
/* Con el FAB escondido (asomando por el borde), el badge se ve en la franja visible */
.pt-fab:not(.visible) .pt-fab-badge { right: auto; left: 4px; top: 6px; }
@keyframes pt-fab-badge-in {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-fab-badge.visible { animation: none; }
}

/* Chat: sin scroll anchoring y sin rebote al llegar al final de la conversación */
#chatOverlayMsgs{
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Modal del chat (bottom sheet a pantalla completa del contenedor) */
.pt-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.pt-chat-overlay.visible { opacity: 1; visibility: visible; }
.pt-chat-sheet {
  width: 100%;
  max-width: 480px;
  height: 82dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  transform: translateY(24px);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.pt-chat-overlay.visible .pt-chat-sheet { transform: translateY(0); }
.pt-chat-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.pt-chat-sheet-title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.pt-chat-sheet-sub { font-size: 10px; color: var(--color-text-tertiary); margin-top: 2px; }
.pt-chat-sheet-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pt-chat-sheet-close .material-symbols-outlined { font-size: 18px; }
.pt-chat-sheet-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 14px);
}
.pt-chat-mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px 12px;
}
.pt-chat-msg {
  max-width: 80%;
  padding: 9px 12px 7px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.pt-chat-msg.yo {
  align-self: flex-end;
  /* Mensajes propios en AZUL OSCURO (antes lavanda #93a4fa→#a5b4fc) */
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  color: var(--color-text);
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 18px rgba(30,58,138,.32);
}
.pt-chat-msg.nutri {
  align-self: flex-start;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-bottom-left-radius: 5px;
}
.pt-chat-msg-time {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  opacity: .65;
  text-align: right;
}
/* Cabecera de día tipo WhatsApp: píldora centrada con la fecha ("Hoy",
   "Ayer" o "12 de septiembre de 2026"), fija arriba al desplazar (sticky)
   mientras se leen los mensajes de ese día. */
.pt-chat-dia {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 6px 0 8px;
}
.pt-chat-dia span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-track);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.pt-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
/* Adjuntos pendientes (miniaturas encima del input) */
.pt-chat-adjpend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.pt-chat-adjpend .chip {
  position: relative;
  width: 46px;
  height: 46px;
}
.pt-chat-adjpend .chip img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
}
.pt-chat-adjpend .chip button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: none;
  background: rgba(220,38,38,.9);
  color: var(--color-text);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.pt-chat-adjpend .chip button .material-symbols-outlined { font-size: 12px; }
/* Adjuntos dentro de los mensajes */
.pt-chat-adj { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.pt-chat-adj img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  cursor: zoom-in;
  object-fit: cover;
}
.pt-chat-adj audio { width: 100%; min-height: 40px; border-radius: 10px; }
.pt-chat-adj video { max-width: 100%; max-height: 240px; border-radius: 12px; }
.pt-chat-adj-nota { font-size: 10px; font-style: italic; opacity: .6; margin: 0; }
/* Botón de adjuntar y selector de archivos */
.pt-chat-adj-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease;
}
.pt-chat-adj-btn:active { transform: scale(.92); }
.pt-chat-file { display: none; }
/* Visor a pantalla completa de fotos del chat */
.pt-chat-zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
}
.pt-chat-zoom img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 25px 80px rgba(0,0,0,.6);
}
.pt-chat-zoom.visible { display: flex; }
.pt-chat-zoom .pt-chat-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--color-track);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pt-chat-input input {
  flex: 1;
  min-width: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 11px 14px;
  color: var(--color-text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .25s ease;
}
.pt-chat-input input:focus { border-color: rgba(59,130,246,.55); }
.pt-chat-input input::placeholder { color: var(--color-text-tertiary); }
.pt-chat-input button {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  border: none;
  /* Enviar: mismo AZUL OSCURO que el FAB y los mensajes propios */
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(30,58,138,.35);
  transition: transform .2s ease;
}
.pt-chat-input button:active { transform: scale(.92); }
.pt-chat-vacio {
  margin: auto;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}
.pt-chat-vacio .material-symbols-outlined { font-size: 34px; opacity: .6; }

/* ============================================
   ACTIVIDAD · Registro de actividad reciente
   Cada entrada: acción + quién la hizo (autor) + hace cuánto
   ============================================ */
.pt-activity-list { display: flex; flex-direction: column; }
.pt-act-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px;
}
.pt-act-item + .pt-act-item { border-top: 1px solid var(--color-border); }
.pt-act-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-act-icon .material-symbols-outlined { font-size: 17px; }
.pt-act-body { flex: 1; min-width: 0; }
.pt-act-title { font-size: .8rem; font-weight: 700; line-height: 1.35; }
.pt-act-who {
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2px;
}
.pt-act-time {
  font-size: .65rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  padding-top: 3px;
  flex-shrink: 0;
}

/* ===========================================================
   FASE 5 · "Comida real" (réplica de index.html en el portal)
   En index.html estas reglas viven dentro de
   #modalResumenDieta .diet-phase-review …  Aquí las
   reescribimos sin ese scope para que apliquen también a la
   pestaña "Dieta" del portal-cliente (portal-app.js →
   renderFase5ComidasReales → buildPhase5CardsHTML).
   =========================================================== */

.diet-phase-review .phase-title{
  font-size:22px;font-weight:700;letter-spacing:0;margin:8px 0 2px;color:var(--color-text);
  display:flex;align-items:center;
}
.diet-phase-review .phase-desc{
  font-size:13px;color:rgba(255,255,255,.35);margin-bottom:16px;
}
.diet-phase-review .phase-icon{
  display:inline-flex;width:36px;height:36px;border-radius:10px;
  align-items:center;justify-content:center;font-size:16px;
  margin-right:10px;flex-shrink:0;
}
.diet-phase-review .glass-card{
  background:var(--color-surface);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:14px;margin-bottom:12px;
  position:relative;overflow:hidden;max-width:100%;
}
.diet-phase-review .glass-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.diet-phase-review .glass-card.green{
  border-color:rgba(16,185,129,.15);background:rgba(16,185,129,.035);
}
.diet-phase-review .glass-card .label{
  font-size:11px;color:rgba(255,255,255,.3);text-transform:uppercase;
  letter-spacing:1px;font-weight:500;margin-bottom:4px;
}
.diet-phase-review .glass-card .value{
  font-size:22px;font-weight:700;letter-spacing:0;color:#fff;
}
.diet-phase-review .glass-card .sub{
  font-size:12px;color:rgba(255,255,255,.4);margin-top:2px;
}

/* Tarjeta de comida (meal-card / meal-icon) */
.diet-phase-review .meal-card{
  background:var(--color-surface);border:1px solid rgba(255,255,255,.05);
  border-radius:10px;margin-bottom:12px;overflow:hidden;
}
.diet-phase-review .meal-header{
  padding:12px 14px;font-weight:600;font-size:12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--color-surface);border-bottom:1px solid rgba(255,255,255,.035);
  color:var(--color-text);
}
.diet-phase-review .meal-icon{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.diet-phase-review .meal-body{padding:10px 14px}
.diet-phase-review .meal-item{
  display:flex;justify-content:space-between;gap:8px;padding:6px 0;
  font-size:12px;color:rgba(255,255,255,.65);
  border-bottom:1px solid var(--color-border);
}
.diet-phase-review .meal-item:last-child{border-bottom:none}

/* Grupo de alimentos desplegable */
.diet-phase-review .meal-group{
  border-bottom:1px solid var(--color-border);padding:4px 0;
}
.diet-phase-review .meal-group:last-child{border-bottom:none}
.diet-phase-review .meal-group-content{padding-left:28px;padding-bottom:6px}
.diet-phase-review .delete-food-btn{
  background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);
  border-radius:4px;color:#ef4444;cursor:pointer;padding:2px 6px;
  font-size:10px;transition:all .3s;display:flex;align-items:center;
  justify-content:center;width:20px;height:20px;flex-shrink:0;
}
.diet-phase-review .delete-food-btn:hover{background:rgba(239,68,68,.25)}
.diet-phase-review .justificacion-content{
  margin-top:8px;padding:10px;background:var(--color-surface-2);
  border:1px solid rgba(129,140,241,.12);border-radius:8px;
  font-size:11px;color:rgba(255,255,255,.6);line-height:1.5;
}
.diet-phase-review .toggle-icon{transition:transform .3s}
.diet-phase-review .meal-toggle-icon{transition:transform .3s}

/* ============================================
   PESTAÑA RECURSOS
   Biblioteca de material de la nutricionista
   ============================================ */

.pt-rec-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

.pt-rec-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-track);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-rec-hero-icon .material-symbols-outlined { font-size: 22px; }

.pt-rec-hero-info { min-width: 0; }
.pt-rec-hero-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-text); letter-spacing: .01em; }
.pt-rec-hero-sub { margin: 3px 0 0; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.4; }

.pt-rec-search-wrap { position: relative; margin: 0 0 12px; }
.pt-rec-search-wrap .material-symbols-outlined {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.pt-rec-search {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
}

.pt-rec-search::placeholder { color: var(--color-text-tertiary); }
.pt-rec-search:focus { border-color: var(--color-border-strong); background: var(--color-surface-2); }

.pt-rec-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scrollbar-width: none;
}
.pt-rec-chips::-webkit-scrollbar { display: none; }

.pt-rec-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}

.pt-rec-chip:active { transform: scale(.96); }
.pt-rec-chip.active { background: #fff; border-color: #fff; color: #1a1c1c; }
.pt-rec-chip-count { font-size: 10px; font-weight: 700; opacity: .6; }

.pt-rec-card { padding: 15px; margin-bottom: 12px; }
/* Recurso nuevo: puntito azul junto al título (misma marca que el icono de
   la pestaña). Se quita al descargar/abrir el material. */
.pt-rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,.9);
  margin-right: 7px;
  vertical-align: 1px;
}

.pt-rec-head { display: flex; gap: 12px; align-items: flex-start; }

.pt-rec-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-rec-icon .material-symbols-outlined { font-size: 21px; }
.pt-rec-icon.news { background: rgba(96,165,250,.12); color: #93c5fd; }
.pt-rec-icon.art { background: rgba(74,222,128,.12); color: #86efac; }
.pt-rec-icon.soc { background: rgba(244,114,182,.12); color: #f9a8d4; }
.pt-rec-icon.gen { background: var(--color-surface-2); color: var(--color-text-secondary); }

.pt-rec-info { min-width: 0; }
.pt-rec-title { margin: 1px 0 0; font-size: 13.5px; font-weight: 700; color: var(--color-text); line-height: 1.3; overflow-wrap: anywhere; }
.pt-rec-desc { margin: 4px 0 0; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.45; }

.pt-rec-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--color-border);
}

.pt-rec-cat {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 4px 9px;
  border-radius: 999px;
}
.pt-rec-cat.news { background: rgba(96,165,250,.12); color: #93c5fd; }
.pt-rec-cat.art { background: rgba(74,222,128,.12); color: #86efac; }
.pt-rec-cat.soc { background: rgba(244,114,182,.12); color: #f9a8d4; }
.pt-rec-cat.gen { background: var(--color-surface-2); color: var(--color-text-secondary); }

.pt-rec-date { font-size: 10px; color: var(--color-text-tertiary); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.pt-rec-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #ffffff;
  color: #1a1c1c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(255,255,255,.08);
  font-family: inherit;
}
.pt-rec-dl:active { transform: scale(.97); }
.pt-rec-dl .material-symbols-outlined { font-size: 17px; }

.pt-rec-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.pt-rec-note .material-symbols-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ============================================
   AVISO DE MENSAJES DE LA NUTRICIONISTA (Inicio)
   Tira discreta bajo el saludo (no una tarjeta): con mensajes sin leer se
   resalta sutilmente en verde menta y abre el chat al tocarla; sin mensajes,
   una nota neutra de una línea.
   ============================================ */
.pt-aviso-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  animation: pt-aviso-in .4s ease both;
}
button.pt-aviso-chat { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.pt-aviso-chat:active { transform: scale(.99); }
.pt-aviso-chat.nuevo {
  border-color: rgba(52,211,153,.22);
  background: rgba(52,211,153,.07);
  color: var(--color-text);
}
.pt-aviso-chat-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.pt-aviso-chat.nuevo .pt-aviso-chat-icon { background: rgba(52,211,153,.14); color: var(--color-accent-protein); }
.pt-aviso-chat-icon .material-symbols-outlined { font-size: 17px; }
.pt-aviso-chat-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  animation: pt-aviso-pulso 1.6s ease-out infinite;
}
.pt-aviso-chat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-aviso-chat-txt b { font-size: .78rem; font-weight: 600; line-height: 1.35; letter-spacing: .01em; }
.pt-aviso-chat-txt small { font-size: .7rem; color: rgba(110,231,183,.7); line-height: 1.35; }
.pt-aviso-chat-arrow { font-size: 18px; color: rgba(110,231,183,.6); flex-shrink: 0; }
@keyframes pt-aviso-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes pt-aviso-pulso {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,.40); }
  70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-aviso-chat { animation: none; }
  .pt-aviso-chat-dot { animation: none; }
}

/* Variantes de los avisos de contenido nuevo (Inicio): plan nuevo en acento
   índigo NutriLab y recurso nuevo en verde menta (reutiliza .nuevo). Mismo
   formato que el aviso de mensajes; solo cambia la paleta. */
.pt-aviso-chat.indigo {
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.pt-aviso-chat.indigo .pt-aviso-chat-icon { background: var(--color-surface-2); color: var(--color-text); }
.pt-aviso-chat.indigo .pt-aviso-chat-dot {
  background: var(--color-text);
  animation-name: pt-aviso-pulso-indigo;
}
.pt-aviso-chat.indigo .pt-aviso-chat-txt small { color: var(--color-text); }
.pt-aviso-chat.indigo .pt-aviso-chat-arrow { color: var(--color-text); }
@keyframes pt-aviso-pulso-indigo {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-aviso-chat.indigo .pt-aviso-chat-dot { animation: none; }
}

/* Ajustes · tarjetas auxiliares */
.pt-notif-desc { font-size: .78rem; color: var(--color-text-secondary); line-height: 1.5; margin: 2px 0 10px; }
.pt-mini-btn:disabled { opacity: .45; pointer-events: none; }

/* ============================================
   CHECK-IN DIARIO · "Ver todo" (historial completo)
   ============================================ */
.pt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pt-section-head .pt-section-title { margin-bottom: 0; }
.pt-ver-todo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: var(--color-accent-protein);
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.18);
  border-radius: 999px;
  padding: 5px 8px 5px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .15s ease;
}
.pt-ver-todo .material-symbols-outlined { font-size: 16px; }
.pt-ver-todo:active { transform: scale(.96); }
.pt-diario-todo-item {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.pt-diario-todo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pt-diario-todo-fecha { font-size: .85rem; font-weight: 700; color: var(--color-text); text-transform: capitalize; }
.pt-diario-todo-hoy {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent-protein);
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 999px;
  padding: 2px 8px;
}
.pt-diario-todo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-diario-todo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
}
.pt-diario-todo-chip .material-symbols-outlined { font-size: 14px; color: var(--color-text-tertiary); }
.pt-diario-todo-chip b { color: var(--color-text); font-weight: 600; }
/* Objetivo dentro del chip (valor / meta) y chip cumplido (verde) */
.pt-diario-todo-chip em { font-style: normal; color: var(--color-text-tertiary); }
.pt-diario-todo-chip.ok {
  border-color: rgba(52,211,153,.35);
  background: rgba(52,211,153,.08);
  color: var(--color-accent-protein);
}
.pt-diario-todo-chip.ok .material-symbols-outlined,
.pt-diario-todo-chip.ok b { color: var(--color-accent-protein); }
.pt-diario-todo-chip.ok em { color: rgba(110,231,183,.55); }
/* Sello "Objetivos cumplidos" del historial de objetivos */
.pt-obj-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent-protein);
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 999px;
  padding: 2px 8px;
}
.pt-obj-ok .material-symbols-outlined { font-size: 13px; }

/* ============================================
   TUTORIAL: TOUR GUIADO POR PESTAÑAS (spotlight)
   Un foco recorta el elemento destacado y oscurece el resto; una tarjeta
   anclada explica para qué sirve y cómo se usa. El tour salta de pestaña
   en pestaña navegando solo (goTo).
   ============================================ */
.pt-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 262;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  /* NUNCA bloquea toques: el menú inferior y el FAB siguen siendo pulsables
     en mitad del tour; solo la tarjeta (.pt-tour-tip) captura toques. */
  pointer-events: none;
}
.pt-tour-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}
/* Recorte: el elemento señalado queda "iluminado" y todo lo demás oscurecido
   (truco del box-shadow gigante). Ni el foco ni el overlay capturan toques:
   solo la tarjeta (.pt-tour-tip) lo hace, así el menú inferior sigue usable. */
.pt-tour-spot {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  border: 2px solid rgba(52,211,153,.9);
  box-shadow: 0 0 0 4px rgba(52,211,153,.16), 0 0 0 9999px rgba(0,0,0,.82);
  opacity: 0;
  transition: left .32s cubic-bezier(.22,1,.36,1), top .32s cubic-bezier(.22,1,.36,1),
    width .32s cubic-bezier(.22,1,.36,1), height .32s cubic-bezier(.22,1,.36,1),
    opacity .25s ease;
  pointer-events: none;
}
/* Tarjeta explicativa anclada al elemento (encima o debajo).
   Es lo ÚNICO del tour que captura toques (botones Siguiente/Anterior/Saltar). */
.pt-tour-tip {
  position: fixed;
  pointer-events: auto;
  width: 330px;
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);
  max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  background: linear-gradient(160deg, #14141d, #0b0b10);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
  padding: 16px 16px 14px;
  opacity: 0;
  transition: opacity .25s ease, left .32s cubic-bezier(.22,1,.36,1), top .32s cubic-bezier(.22,1,.36,1);
  z-index: 1;
}
.pt-tour-tip-top { display: flex; align-items: center; gap: 10px; }
.pt-tour-tip-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-tour-tip-icon .material-symbols-outlined { font-size: 21px; }
.pt-tour-tip-count {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pt-tour-tip-title {
  margin-top: 10px;
  font-family: 'Michroma', 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--color-text);
}
.pt-tour-tip-text {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.pt-tour-tip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.pt-tour-tip-nav { display: flex; align-items: center; gap: 8px; }
.pt-tour-skip {
  border: none;
  background: none;
  padding: 8px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pt-tour-skip:active { color: var(--color-text); }
.pt-tour-back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pt-tour-back .material-symbols-outlined { font-size: 18px; }
.pt-tour-back:active { transform: scale(.94); }

/* Bloqueo de scroll durante el tour: la página queda congelada para que el
   foco y la tarjeta no se muevan con el arrastre del dedo. */
html.pt-tour-lock, html.pt-tour-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* Con el MARCO FIJO el scroll vive en la pestaña activa: el bloqueo se aplica
   también (y sobre todo) a ese contenedor. */
.screen.active.pt-tour-lock {
  overflow: hidden !important;
}

/* ===== Inicio · Medicación del paciente (tratamiento desde index.html) ===== */
.pt-med-card { display: flex; flex-direction: column; gap: 12px; }
.pt-med-row { display: flex; align-items: flex-start; gap: 12px; }
.pt-med-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-med-icon .material-symbols-outlined { font-size: 21px; }
.pt-med-info { flex: 1; min-width: 0; }
.pt-med-name { font-size: 15px; font-weight: 700; color: var(--color-text); line-height: 1.35; }
.pt-med-posologia {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  padding: 6px 10px;
}
.pt-med-hist { margin-top: 3px; font-size: 11px; color: var(--color-text-secondary); }

/* Iconos de cabecera SIN tarjeta: solo el glifo, sin caja ni borde */
.icon-btn.pt-ghost {
  background: transparent;
  border: none;
  border-radius: 12px;
  width: 40px;
  height: 40px;
}
.icon-btn.pt-ghost:hover { background: var(--color-surface-2); }

/* Botón "?" del tutorial: vive en el grupo de accesos de la cabecera
   (.header-tools: campana · ?), a la derecha del saludo / título, sin fondo. */
.pt-help-btn .material-symbols-outlined { font-size: 20px !important; color: var(--color-accent-protein); }
@media (prefers-reduced-motion: reduce) {
  .pt-tour-spot,
  .pt-tour-tip { transition: none; }
}

/* ===== Inicio · Estado de las solicitudes de consulta ("Mis solicitudes") ===== */
.pt-sol-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.pt-sol-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.pt-sol-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-sol-icon .material-symbols-outlined { font-size: 18px; color: var(--color-text); }
.pt-sol-info { flex: 1; min-width: 0; }
.pt-sol-fecha { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0; }
.pt-sol-motivo { font-size: 11px; color: var(--color-text-secondary); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sol-sub { font-size: 10.5px; color: var(--color-text-tertiary); margin: 3px 0 0; font-style: italic; }
.pt-sol-chip { flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid; }
.pt-sol-chip.pendiente { color: var(--color-accent-carbs); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.pt-sol-chip.aceptada { color: var(--color-accent-protein); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.pt-sol-chip.rechazada { color: var(--color-danger); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }

/* ============================================
   RECETAS (módulo compartido assets/js/recetas-ia.js)
   Las tarjetas (.nl-receta-card) y el modal de detalle (.nl-receta-modal)
   usan EXACTAMENTE el mismo módulo y el mismo diseño que crear-dieta.html
   (Fase 5) y que el modal "Resumen de Plan Nutricional" de index.html.
   Aquí solo se ajusta el TAMAÑO y el SAFE-AREA para el portal (pantallas
   pequeñas / notch / PWA): modal más compacto y siempre dentro del área
   segura. El interior del modal sigue intacto.
   NOTA: el módulo pinta los estilos en línea, por eso se usa !important.
   ============================================ */
#nlRecetaModal {
  padding:
    calc(env(safe-area-inset-top, 0px) + 10px)
    calc(env(safe-area-inset-right, 0px) + 10px)
    calc(env(safe-area-inset-bottom, 0px) + 10px)
    calc(env(safe-area-inset-left, 0px) + 10px) !important;
  /* Fundido del fondo al cerrar (lo activa .nl-receta-overlay-closing). */
  transition: opacity .24s ease !important;
}
#nlRecetaModal.nl-receta-overlay-closing {
  opacity: 0 !important;
}
#nlRecetaModal .nl-receta-modal {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  /* Altura contenida: nunca sale del safe-area ni tapa la nav inferior. */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px) !important;
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px) !important;
  border-radius: 16px !important;
  margin: 0 auto !important;
}
#nlRecetaModal .nl-receta-modal > div:nth-child(2) {
  /* Cuerpo con scroll propio: la cabecera y el pie quedan siempre visibles. */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 230px) !important;
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 230px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}
@media (max-height: 700px) {
  #nlRecetaModal .nl-receta-modal {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 60px) !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 60px) !important;
  }
}
/* En el portal no se puede borrar alimentos (es solo lectura): se oculta el
   botón de la papelera de la fase 5 para que no lance errores al pulsarlo. */
.diet-phase-review .delete-food-btn {
  display: none !important;
}

/* Modal de receta: evitar scroll lateral y que el texto se parta en varias
   líneas cuando no quepa, tanto en el detalle como en las tarjetas del libro.
   FIX iPhone (iOS Safari): con `word-break: break-word` los flex items con
   flex:1 colapsan a su ancho mínimo y las palabras (p. ej. "arroz", los
   ingredientes) se pintaban UNA LETRA POR FILA. La combinación correcta es
   word-break:normal + overflow-wrap:break-word + min-width:0 en los items. */
#nlRecetaModal .nl-receta-modal,
#nlRecetaModal .nl-receta-modal h2,
#nlRecetaModal .nl-receta-card,
#nlRecetaModal .nl-receta-card [style*="flex:1"] {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-orientation: mixed !important;
  writing-mode: horizontal-tb !important;
  min-width: 0 !important;
}

/* Asegurar que ningún elemento del modal se muestra en vertical */
#nlRecetaModal * {
  text-orientation: mixed !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
#nlRecetaModal .nl-receta-modal {
  overflow-x: hidden !important;
}
/* Filas del modal (ingredientes, pasos, info rápida): los spans flex:1 no
   deben poder encoger por debajo del ancho de su palabra más larga, pero el
   contenedor sí reparte el espacio sobrante (evita el colapso de iOS). */
#nlRecetaModal .nl-receta-modal div[style*="display:flex"] > span[style*="flex:1"],
#nlRecetaModal .nl-receta-modal div[style*="display:flex"] > h2 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.pt-receta-empty-list {
  text-align: center;
  padding: 26px 14px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.pt-receta-empty-list .material-symbols-outlined {
  font-size: 36px;
  color: var(--color-text-tertiary);
  display: block;
  margin: 0 auto 8px;
}

/* ============================================
   DIETA · CREADOR DE MENÚS (pt-mc-*)
   Sección visual bajo los desplegables de comidas: pestañas por comida,
   grupos con alimentos tocables y resumen "Tu menú" con kcal/macros.
   ============================================ */
.pt-mc-card {
  background: linear-gradient(160deg, rgba(52, 211, 153, 0.08), rgba(255, 255, 255, 0.02) 55%);
  border-color: rgba(52, 211, 153, 0.16);
}
.pt-mc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pt-mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--color-accent-protein);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-mc-head-info { min-width: 0; }
.pt-mc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.pt-mc-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 3px 0 0;
}
/* Pestañas de comidas (Desayuno, Comida, Cena…) */
.pt-mc-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pt-mc-tabs::-webkit-scrollbar { display: none; }
.pt-mc-tab {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pt-mc-tab.active {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--color-accent-protein);
}
/* Grupo de intercambio: cabecera + carrusel de alimentos */
.pt-mc-group { margin-top: 14px; }
.pt-mc-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pt-mc-prog {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pt-mc-prog.ok {
  color: var(--color-accent-protein);
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
}
.pt-mc-prog.over {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.28);
}
.pt-mc-opts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pt-mc-opts::-webkit-scrollbar { display: none; }
.pt-mc-opt {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 13px;
  padding: 10px 11px 9px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.pt-mc-opt:active { transform: scale(0.97); }
.pt-mc-opt.sel {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.1);
}
.pt-mc-opt-add {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-track);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-mc-opt-add .material-symbols-outlined { font-size: 13px; color: var(--color-text-secondary); }
/* Círculo verde con el check: DENTRO de la tarjeta, en la misma esquina y a la
   misma altura que el "+" del estado sin seleccionar. Antes asomaba fuera
   (top:-7px; right:-5px) y el carrusel de opciones (.pt-mc-opts tiene
   overflow-x:auto, que en iOS/WebKit recorta en el borde de la caja) le cortaba
   la parte de arriba. Dentro entra siempre completo, sin depender de padding
   ni del recorte del scroll. */
.pt-mc-opt-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  background: #10b981;
  color: #04150e;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pt-mc-opt-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  /* 30px > ancho del badge (20px) + su separación (7px): el texto nunca entra
     bajo el check de la esquina superior derecha. */
  padding-right: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-mc-opt.sel .pt-mc-opt-name { color: #a7f3d0; }
.pt-mc-opt-meta {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Resumen "Tu menú" */
.pt-mc-resumen {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  padding: 12px 12px 11px;
}
.pt-mc-resumen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pt-mc-resumen-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-mc-resumen-kcal {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent-protein);
  white-space: nowrap;
}
.pt-mc-resumen-kcal small {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(110, 231, 183, 0.6);
}
.pt-mc-vacio {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  margin: 2px 0 4px;
}
.pt-mc-vacio b { color: var(--color-text-secondary); }
.pt-mc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.pt-mc-row:last-of-type { border-bottom: none; }
.pt-mc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pt-mc-row-info { flex: 1 1 0; min-width: 0; }
.pt-mc-row-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-mc-row-sub {
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-mc-row-kcal {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.pt-mc-row-del {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: rgba(252, 165, 165, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.pt-mc-row-del .material-symbols-outlined { font-size: 15px; }
.pt-mc-macros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
}
.pt-mc-macros span {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: 999px;
}
.pt-mc-macros span b { color: var(--color-text); font-weight: 700; }
.pt-mc-macros .pt-mc-ic {
  color: rgba(110, 231, 183, 0.65);
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.22);
}
.pt-mc-objetivo { margin-top: 10px; }
.pt-mc-objetivo-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.pt-mc-objetivo-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 0.3s;
}
.pt-mc-objetivo p {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  margin: 6px 0 0;
}
.pt-mc-objetivo p b { color: var(--color-text); }
.pt-mc-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.pt-mc-actions .btn-secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
}
.pt-mc-actions .btn-secondary .material-symbols-outlined { font-size: 17px; }
.pt-mc-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  margin: 12px 0 0;
}
.pt-mc-note .material-symbols-outlined { font-size: 14px; color: rgba(110, 231, 183, 0.5); }

/* ---- Creador de menús: minimizar grupo, Guardar y slots ---- */
.pt-mc-collapse {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pt-mc-collapse:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.pt-mc-collapse:active { transform: scale(0.94); }
.pt-mc-collapse .material-symbols-outlined {
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-mc-group.collapsed .pt-mc-collapse .material-symbols-outlined { transform: rotate(-180deg); }
.pt-mc-group.collapsed { padding-bottom: 4px; border-bottom: 1px dashed var(--color-border); }
.pt-mc-group-min {
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  margin: 4px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}
/* Al completar el objetivo del grupo, el resto de opciones se atenúan y
   quedan sin interacción (mcPick además lo bloquea por código). */
.pt-mc-opt.maxed {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.4);
}
.pt-mc-save {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}
.pt-mc-save .material-symbols-outlined { font-size: 17px; }
.pt-mc-slots { margin-top: 14px; }
.pt-mc-slots-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}
.pt-mc-slots-title .material-symbols-outlined { font-size: 15px; color: var(--color-text); }
.pt-mc-slot {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-mc-slot:hover { border-color: var(--color-border-strong); }
.pt-mc-slot-head { display: flex; align-items: flex-start; gap: 8px; }
.pt-mc-slot-head-info { flex: 1 1 0; min-width: 0; }
.pt-mc-slot-name { font-size: 12.5px; font-weight: 700; color: var(--color-text); margin: 0; }
.pt-mc-slot-name em {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-left: 4px;
}
.pt-mc-slot-sub { font-size: 10.5px; color: var(--color-text-secondary); margin: 2px 0 0; }
.pt-mc-slot-sub b { color: rgba(110, 231, 183, 0.85); }
.pt-mc-slot-del {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: rgba(252, 165, 165, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pt-mc-slot-del .material-symbols-outlined { font-size: 14px; }
.pt-mc-slot-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pt-mc-slot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: 999px;
}
.pt-mc-slot-item i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pt-mc-slot-load {
  width: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-mc-slot-load:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.pt-mc-slot-load:active { transform: scale(0.98); }
.pt-mc-slot-load .material-symbols-outlined { font-size: 14px; }

/* ============================================
   RESTYLING FUTURISTA · NUTRILAB (SOLO ESTÉTICA)
   Negro profundo con aurora de brillos + rejilla sutil, superficies de
   cristal, halo índigo/menta y transiciones suaves estilo Apple
   (cubic-bezier(.22,1,.36,1)). Capa añadida al FINAL del archivo:
   gana la cascada de forma segura sin alterar ninguna regla funcional
   anterior (no cambia selectores, ni JS, ni comportamiento).
   ============================================ */

html, body { background: var(--color-bg); }

/* Fondo vivo: aurora índigo/menta + rejilla técnica desvanecida */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 38% at 50% -8%, rgba(255, 255, 255, 0.16), transparent 65%),
    radial-gradient(42% 30% at 90% 108%, rgba(16, 185, 129, 0.07), transparent 62%),
    radial-gradient(28% 20% at 4% 62%, rgba(255, 255, 255, 0.05), transparent 65%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(85% 60% at 50% 18%, #000 25%, transparent 85%);
  mask-image: radial-gradient(85% 60% at 50% 18%, #000 25%, transparent 85%);
}
.app-shell { background: transparent; position: relative; z-index: 1; }

/* Entradas de pantalla con fundido + elevación (Apple-like) */
@keyframes pt-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen.active {
  animation: pt-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* NOTA: no hay animación de entrada en .card a propósito. Los repintados
   parciales recrean las tarjetas (innerHTML) y una animación con "both" las
   dejaría invisibles hasta terminar → parpadeo al pulsar cualquier botón.
   La entrada escalonada la hace el sistema .pt-reveal (solo al abrir pestaña). */
.screen.active .card:nth-of-type(6) { animation-delay: 0.25s; }

/* Tarjetas glass (estilo glass-card): brillo superior y lateral */
.card {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(255, 255, 255, 0.04);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3));
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 22px rgba(255, 255, 255, 0.05);
}

/* Botones con profundidad y resplandor (acabado negro + destello azul: el
   bloque RESTYLING v2 del final gana por cascada y fija color/borde). */
.btn-primary {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-primary:hover {
  filter: none;
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97); }
.btn-secondary {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.btn-secondary:active { transform: scale(0.97); }

/* Logo NUTRILAB con halo que respira */
@keyframes pt-breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.22)); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.48)); }
}
.pt-brand-name { animation: pt-breathe 5.5s ease-in-out infinite; }
.header-greeting { filter: drop-shadow(0 2px 16px rgba(255, 255, 255, 0.16)); }

/* Píldora de navegación con aura */
.mobile-bottom-nav {
  background: rgba(10, 10, 15, 0.78);
  border-color: var(--color-border);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.7), 0 0 34px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Campos enfocados con aro de luz */
.weight-input:focus,
#chatInput:focus {
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .screen.active,
  .screen.active .card,
  .pt-brand-name {
    animation: none;
  }
}

/* ---- Foto de perfil arriba a la DERECHA (el menú cuelga a la derecha) ---- */
.pt-header-ava { position: relative; }

/* Badge de selección del creador: icono check centrado */
.pt-mc-opt-badge { padding: 0; }
.pt-mc-opt-badge .material-symbols-outlined {
  font-size: 13px;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

/* ============================================
   LOADER "BANTER" (adaptación de Uiverse.io by Nawsome)
   9 cajitas en coreografía con la paleta índigo NutriLab.
   ============================================ */
.banter-loader {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
}

.banter-loader__box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.banter-loader__box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-text), var(--color-text));
  border-radius: 5px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}

.banter-loader__box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

.banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
  margin-left: 26px;
}

.banter-loader__box:nth-child(3):before {
  margin-top: 52px;
}

.banter-loader__box:last-child {
  margin-bottom: 0;
}

@keyframes moveBox-1 {
  9.0909090909% { transform: translate(-26px, 0); }
  18.1818181818% { transform: translate(0px, 0); }
  27.2727272727% { transform: translate(0px, 0); }
  36.3636363636% { transform: translate(26px, 0); }
  45.4545454545% { transform: translate(26px, 26px); }
  54.5454545455% { transform: translate(26px, 26px); }
  63.6363636364% { transform: translate(26px, 26px); }
  72.7272727273% { transform: translate(26px, 0px); }
  81.8181818182% { transform: translate(0px, 0px); }
  90.9090909091% { transform: translate(-26px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(1) { animation: moveBox-1 4s infinite; }

@keyframes moveBox-2 {
  9.0909090909% { transform: translate(0, 0); }
  18.1818181818% { transform: translate(26px, 0); }
  27.2727272727% { transform: translate(0px, 0); }
  36.3636363636% { transform: translate(26px, 0); }
  45.4545454545% { transform: translate(26px, 26px); }
  54.5454545455% { transform: translate(26px, 26px); }
  63.6363636364% { transform: translate(26px, 26px); }
  72.7272727273% { transform: translate(26px, 26px); }
  81.8181818182% { transform: translate(0px, 26px); }
  90.9090909091% { transform: translate(0px, 26px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(2) { animation: moveBox-2 4s infinite; }

@keyframes moveBox-3 {
  9.0909090909% { transform: translate(-26px, 0); }
  18.1818181818% { transform: translate(-26px, 0); }
  27.2727272727% { transform: translate(0px, 0); }
  36.3636363636% { transform: translate(-26px, 0); }
  45.4545454545% { transform: translate(-26px, 0); }
  54.5454545455% { transform: translate(-26px, 0); }
  63.6363636364% { transform: translate(-26px, 0); }
  72.7272727273% { transform: translate(-26px, 0); }
  81.8181818182% { transform: translate(-26px, -26px); }
  90.9090909091% { transform: translate(0px, -26px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(3) { animation: moveBox-3 4s infinite; }

@keyframes moveBox-4 {
  9.0909090909% { transform: translate(-26px, 0); }
  18.1818181818% { transform: translate(-26px, 0); }
  27.2727272727% { transform: translate(-26px, -26px); }
  36.3636363636% { transform: translate(0px, -26px); }
  45.4545454545% { transform: translate(0px, 0px); }
  54.5454545455% { transform: translate(0px, -26px); }
  63.6363636364% { transform: translate(0px, -26px); }
  72.7272727273% { transform: translate(0px, -26px); }
  81.8181818182% { transform: translate(-26px, -26px); }
  90.9090909091% { transform: translate(-26px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(4) { animation: moveBox-4 4s infinite; }

@keyframes moveBox-5 {
  9.0909090909% { transform: translate(0, 0); }
  18.1818181818% { transform: translate(0, 0); }
  27.2727272727% { transform: translate(0, 0); }
  36.3636363636% { transform: translate(26px, 0); }
  45.4545454545% { transform: translate(26px, 0); }
  54.5454545455% { transform: translate(26px, 0); }
  63.6363636364% { transform: translate(26px, 0); }
  72.7272727273% { transform: translate(26px, 0); }
  81.8181818182% { transform: translate(26px, -26px); }
  90.9090909091% { transform: translate(0px, -26px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(5) { animation: moveBox-5 4s infinite; }

@keyframes moveBox-6 {
  9.0909090909% { transform: translate(0, 0); }
  18.1818181818% { transform: translate(-26px, 0); }
  27.2727272727% { transform: translate(-26px, 0); }
  36.3636363636% { transform: translate(0px, 0); }
  45.4545454545% { transform: translate(0px, 0); }
  54.5454545455% { transform: translate(0px, 0); }
  63.6363636364% { transform: translate(0px, 0); }
  72.7272727273% { transform: translate(0px, 26px); }
  81.8181818182% { transform: translate(-26px, 26px); }
  90.9090909091% { transform: translate(-26px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(6) { animation: moveBox-6 4s infinite; }

@keyframes moveBox-7 {
  9.0909090909% { transform: translate(26px, 0); }
  18.1818181818% { transform: translate(26px, 0); }
  27.2727272727% { transform: translate(26px, 0); }
  36.3636363636% { transform: translate(0px, 0); }
  45.4545454545% { transform: translate(0px, -26px); }
  54.5454545455% { transform: translate(26px, -26px); }
  63.6363636364% { transform: translate(0px, -26px); }
  72.7272727273% { transform: translate(0px, -26px); }
  81.8181818182% { transform: translate(0px, 0px); }
  90.9090909091% { transform: translate(26px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(7) { animation: moveBox-7 4s infinite; }

@keyframes moveBox-8 {
  9.0909090909% { transform: translate(0, 0); }
  18.1818181818% { transform: translate(-26px, 0); }
  27.2727272727% { transform: translate(-26px, -26px); }
  36.3636363636% { transform: translate(0px, -26px); }
  45.4545454545% { transform: translate(0px, -26px); }
  54.5454545455% { transform: translate(0px, -26px); }
  63.6363636364% { transform: translate(0px, -26px); }
  72.7272727273% { transform: translate(0px, -26px); }
  81.8181818182% { transform: translate(26px, -26px); }
  90.9090909091% { transform: translate(26px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.banter-loader__box:nth-child(8) { animation: moveBox-8 4s infinite; }

@keyframes moveBox-9 {
  9.0909090909% { transform: translate(-26px, 0); }
  18.1818181818% { transform: translate(-26px, 0); }
  27.2727272727% { transform: translate(0px, 0); }
  36.3636363636% { transform: translate(-26px, 0); }
  45.4545454545% { transform: translate(0px, 0); }
  54.5454545455% { transform: translate(0px, 0); }
  63.6363636364% { transform: translate(-26px, 0); }
  72.7272727273% { transform: translate(-26px, 0); }
  81.8181818182% { transform: translate(-52px, 0); }
  90.9090909091% { transform: translate(-26px, 0); }
  100% { transform: translate(0px, 0); }
}

.banter-loader__box:nth-child(9) { animation: moveBox-9 4s infinite; }
/* ============================================
   RESTYLING v2 · NUTRILAB (SOLO ESTÉTICA)
   · Tarjetas de cristal con degradado del azul de marca y borde invisible
     (sin iluminar el borde al pasar el ratón ni al pulsar)
   · Azul de marca más claro y discreto (ya aplicado al conjunto de reglas)
   · Aparición con fundido suave al hacer scroll (estilo Apple)
   · Creador de menús plegable + selector de comidas "Tu menú"
   Capa añadida al FINAL del archivo: gana la cascada sin tocar selectores
   ni comportamiento (no cambia nada funcional).
   ============================================ */

/* ---------- Fondo: negro con patrón minimalista y degradados azules ---------- */
html, body { background-color: var(--color-bg); }
body::before {
  background:
    radial-gradient(55% 38% at 50% -8%, rgba(255, 255, 255, 0.13), transparent 65%),
    radial-gradient(42% 30% at 90% 108%, rgba(16, 185, 129, 0.05), transparent 62%),
    radial-gradient(28% 20% at 4% 62%, rgba(255, 255, 255, 0.045), transparent 65%),
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(180deg, #05060d 0%, #04040a 55%, #06070f 100%);
  background-size: auto, auto, auto, 20px 20px, 36px 36px, 36px 36px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* La barra de marca y el menú inferior leen mejor sobre negro puro */
.brand-bar, .app-header { position: relative; z-index: 2; }

/* Creador de menús: aire en el carrusel de opciones para que los círculos de
   selección / "+" (que van dentro de la tarjeta) nunca toquen el recorte del
   scroll y se vean siempre completos. */
.pt-mc-opts { padding: 6px 8px 8px 2px; }
.pt-mc-group-head { margin-bottom: 4px; }

/* ---------- Tarjetas: cristal transparente con reflejo azul degradado ---------- */
/* Cristal transparente (NO azul en masa): el fondo deja ver el negro + patrón
   de la app. El color solo aparece como un ligero reflejo brillante azul que
   nace arriba a la izquierda y pierde opacidad al extenderse (look reflejo). */
.card,
.today-card,
.register-card,
.pt-meal-card,
.pt-distrib-card,
.pt-profile-card,
.pt-rec-card,
.pt-med-card,
.pt-diario-card,
.pt-pay-card,
.pt-seg-rev-card,
.pt-comida-card,
.pt-receta-card,
.meal-card,
.pt-compra-card,
.pt-mc-card,
.pt-tumenu-card,
.pt-nutri-card,
.pt-goals-card,
.pt-entry-card,
.pt-tuhome-card,
.pt-mc-slot,
.pt-tumenu-slot,
.pt-tumenu-picker,
.pt-mc-opt,
.pt-mc-tabs,
.pt-tumenu-wheel {
  position: relative;
  border-color: transparent !important;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(130% 95% at 0% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.07) 22%,
      rgba(255, 255, 255, 0.015) 46%,
      transparent 68%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.028),
      rgba(255, 255, 255, 0.008) 55%,
      rgba(255, 255, 255, 0.014) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease,
    background-image 0.5s ease;
}
/* ---------- Menú inferior: píldora FLOTANTE (anclada al viewport) ---------- */
/* Vive FUERA del app-shell como hijo directo del <body>: si entrara en el flujo
   normal (position:relative) se colocaría DEBAJO del shell y crearía altura
   extra en el documento (ese era el "margen" que aparecía al abrir la app y que
   solo desaparecía al desplazar). Con position:fixed queda flotante, separado
   del borde inferior, y el documento no gana centímetros de scroll. */
.mobile-bottom-nav {
  position: fixed;
  bottom: calc(4px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent !important;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(130% 95% at 0% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.07) 22%,
      rgba(255, 255, 255, 0.015) 46%,
      transparent 68%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.028),
      rgba(255, 255, 255, 0.008) 55%,
      rgba(255, 255, 255, 0.014) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* Al pasar el ratón o pulsar: el borde NO se ilumina (sigue transparente) */
.card:hover,
.card:active,
.card:focus,
.card:focus-visible,
.card:focus-within,
.today-card:hover,
.register-card:hover,
.pt-meal-card:hover,
.pt-distrib-card:hover,
.pt-profile-card:hover,
.pt-rec-card:hover,
.pt-med-card:hover,
.pt-diario-card:hover,
.pt-pay-card:hover,
.pt-seg-rev-card:hover,
.pt-comida-card:hover,
.pt-receta-card:hover,
.meal-card:hover,
.pt-compra-card:hover,
.pt-mc-card:hover,
.pt-tumenu-card:hover,
.pt-tuhome-card:hover,
.pt-mc-slot:hover,
.pt-tumenu-slot:hover {
  border-color: transparent !important;
}
.card:hover {
  transform: translateY(-2px);
  border-color: transparent !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
/* Reflejo superior: ligerísimo destello brillante azul que nace arriba a la
   izquierda y pierde opacidad al extenderse (look reflejo sobre el cristal).
   Reflejo CONTENIDO: el halo solo ocupa la esquina (46% ancho x 42% alto) y
   se apaga rápido para que nunca parezca una tarjeta azul.
   SIN filter: blur() — en iOS (WebKit) un pseudo-elemento con filtro crea su
   propia capa y el border-radius del padre NO lo recorta: el halo se veía
   CUADRADO en el móvil aunque en escritorio se recortaba bien. El degradado
   radial ya es suave por sí mismo, así que se quita el filtro y se fuerza el
   redondeo heredado del padre. */
.card::before {
  top: 0;
  left: 0;
  width: 46%;
  height: 42%;
  right: auto;
  border-radius: inherit;
  background:
    radial-gradient(100% 100% at 0% 0%,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.16) 30%,
      rgba(255, 255, 255, 0.05) 58%,
      transparent 78%);
}
/* Reflejo lateral izquierdo: el destello azul nace arriba y se apaga abajo
   (muy contenido: no compite con el reflejo de la esquina). */
.card::after {
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 28%, transparent 52%);
}

/* Botones de acción: negros con destello azul, distintos entre sí.
   Base ÚNICA para todos los estados (hover/active/focus/táctil): el botón
   NUNCA se pone blanco al pasar el dedo o el ratón por encima. */
.btn-primary,
.pt-mc-save,
.btn-primary:hover,
.pt-mc-save:hover,
.btn-primary:active,
.pt-mc-save:active,
.btn-primary:focus,
.pt-mc-save:focus,
.btn-primary:focus-visible,
.pt-mc-save:focus-visible {
  background: linear-gradient(135deg, #0b0d16 0%, #161b31 46%, #232b52 52%, #161b31 58%, #0b0d16 100%);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  outline: none;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 20px rgba(255, 255, 255, 0.08);
}
.btn-primary:active,
.pt-mc-save:active { transform: scale(0.97); }
/* Halo azul al apoyar (ratón o táctil): el destello se intensifica, pero el
   fondo sigue siendo negro. */
.btn-primary:hover,
.pt-mc-save:hover {
  border-color: var(--color-border-strong);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 22px rgba(255, 255, 255, 0.14);
}
.btn-primary .material-symbols-outlined,
.pt-mc-save .material-symbols-outlined { color: var(--color-text); }
/* En pantallas táctiles el :hover se queda "pegado" tras pulsar: se iguala al
   estado base para que el botón nunca parezca blanco. */
@media (hover: none) {
  .btn-primary:hover,
  .pt-mc-save:hover {
    background: linear-gradient(135deg, #0b0d16 0%, #161b31 46%, #232b52 52%, #161b31 58%, #0b0d16 100%);
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -8px 20px rgba(255, 255, 255, 0.08);
  }
}
.btn-secondary {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-secondary:hover {
  background: var(--color-track);
  border-color: var(--color-border-strong);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ---------- Modales y sheets: mismo cristal transparente que las tarjetas ---------- */
/* Mismo efecto que .card (cristal transparente + ligerísimo reflejo azul que
   nace arriba a la izquierda y se degrada). Sin ::before/::after aquí porque
   los sheets tienen scroll propio y el overflow los recortaría: el reflejo va
   en el background-image. El borde queda transparente (no se ilumina). Aplica
   a TODOS los flotantes del portal: sheets inferiores, chat, consulta,
   tour, modal de receta y toast. */
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal,
.pt-tour-tip,
#nlRecetaModal .nl-receta-modal,
.pt-toast {
  border-color: transparent !important;
  background-color: rgba(10, 12, 20, 0.72);
  background-image:
    radial-gradient(130% 90% at 0% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.07) 24%,
      rgba(255, 255, 255, 0.015) 48%,
      transparent 70%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.015) 55%,
      rgba(255, 255, 255, 0.025) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* ---------- Modales de receta (recetas-ia.js) con el mismo cristal ---------- */
/* El modal de receta lo crea assets/js/recetas-ia.js con sus propios estilos
   inline (fondo casi opaco). Aquí solo se pinta con el mismo cristal que las
   tarjetas: fondo translúcido, reflejo azul degradado arriba a la izquierda y
   borde transparente. NO cambia ninguna funcionalidad ni su estructura. */
#nlRecetaModal .nl-receta-modal {
  background-color: rgba(10, 12, 20, 0.72) !important;
  background-image:
    radial-gradient(130% 90% at 0% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.07) 24%,
      rgba(255, 255, 255, 0.015) 48%,
      transparent 70%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.015) 55%,
      rgba(255, 255, 255, 0.025) 100%) !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  /* El brillo degradado (background-image) no redondea sus esquinas: se
     recorta con el mismo radio del modal, en móvil y en escritorio. */
  border-radius: 18px;
  overflow: hidden;
}
/* Las cabeceras de los sheets dejan ver el cristal (sin pastilla opaca). */
.pt-chat-sheet-head,
.sheet-header {
  background: transparent;
}

/* ---- Rectángulos redondeados en móvil (bug de iOS/WebKit) ----
   Con `backdrop-filter` + `border-radius`, Safari/iOS compone la capa del
   desenfoque SIN recortarla al radio: las esquinas se veían cuadradas (en
   escritorio no, porque el desenfoque se recorta bien). Forzar una máscara
   opaca devuelve el recorte redondeado. Se aplica a todo lo que lleva cristal:
   tarjetas, píldora de navegación, sheets y modales. */
.card,
.today-card,
.register-card,
.pt-meal-card,
.pt-distrib-card,
.pt-profile-card,
.pt-rec-card,
.pt-med-card,
.pt-diario-card,
.pt-pay-card,
.pt-seg-rev-card,
.pt-comida-card,
.pt-receta-card,
.meal-card,
.pt-compra-card,
.pt-mc-card,
.pt-tumenu-card,
.pt-nutri-card,
.pt-goals-card,
.pt-entry-card,
.pt-tuhome-card,
.pt-mc-slot,
.pt-mc-opt,
.pt-mc-tabs,
.pt-tumenu-slot,
.pt-tumenu-picker,
.pt-tumenu-wheel,
.mobile-bottom-nav,
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal,
.pt-tour-tip,
#nlRecetaModal .nl-receta-modal,
.pt-toast {
  -webkit-mask-image: linear-gradient(#fff, #fff); /* máscara opaca: solo fuerza el clip redondeado */
          mask-image: linear-gradient(#fff, #fff);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  isolation: isolate;
}
/* Las cabeceras / pies pegados al borde superior o inferior del sheet siguen
   el radio del contenedor: sin esquinas vivas dentro del cristal. */
.sheet-header {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.sheet-body {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/* (El fondo negro + patrón y los halos azules viven en el bloque FONDO de
   más arriba: una sola declaración de body::before para toda la app.) */

/* ---------- Aparición con fundido al hacer scroll (Apple-like) ---------- */
.pt-reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.992);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.pt-reveal.pt-in { opacity: 1; transform: none; }
/* Las tarjetas con reveal las controla el fundido (no la entrada de pantalla) */
.screen.active .card.pt-reveal { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .pt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ---------- Creador de menús: plegar / desplegar el bloque completo ---------- */
.pt-mc-head .pt-mc-card-toggle { margin-left: auto; }
.pt-mc-card-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-mc-card-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
.pt-mc-card-toggle:active { transform: scale(0.94); }
.pt-mc-card-toggle .material-symbols-outlined {
  font-size: 19px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#mcPanel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#mcPanel.pt-mc-collapsed { grid-template-rows: 0fr; }
.pt-mc-panel-inner {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.45s ease;
}
#mcPanel.pt-mc-collapsed .pt-mc-panel-inner { opacity: 0; }

/* ============================================
   TARJETA "TU MENÚ" (pestaña Dieta)
   Selector de comidas con scroll tipo iPhone (rueda con snap) + lo que
   queda cargado para el paciente de la comida seleccionada.
   ============================================ */
.pt-tumenu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pt-tumenu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-tumenu-head-info { min-width: 0; }
.pt-tumenu-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.pt-tumenu-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 3px 0 0;
}

/* Rueda tipo iPhone: 3 filas visibles, la central marca la comida activa */
.pt-tumenu-picker {
  position: relative;
  height: 132px;
  margin: 2px 0 10px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.pt-tumenu-picker::before,
.pt-tumenu-picker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  z-index: 3;
}
.pt-tumenu-picker::before {
  top: 0;
  background: linear-gradient(180deg, rgba(4, 6, 14, 0.9), rgba(4, 6, 14, 0));
}
.pt-tumenu-picker::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(4, 6, 14, 0.9), rgba(4, 6, 14, 0));
}
.pt-tumenu-wheel {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 44px 0;
  position: relative;
  z-index: 2;
}
.pt-tumenu-wheel::-webkit-scrollbar { display: none; }
/* El selector va libre (sin tarjeta) y NUNCA se desplaza en horizontal: solo
   responde al gesto vertical de la rueda. */
.pt-tumenu-wheel {
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.pt-tumenu-wheel-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pt-tumenu-picker { touch-action: pan-y; }
.pt-tumenu-wheel { overscroll-behavior-y: contain; }
.pt-tumenu-wheel-item {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  scroll-snap-align: center;
  background: none;
  border: 0;
  padding: 0 10px;
  cursor: pointer;
  color: var(--color-text-secondary);
  opacity: 0.6;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: inherit;
  transition:
    color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-tumenu-wheel-item.active {
  color: var(--color-text);
  opacity: 1;
  transform: scale(1.07);
}
.pt-tumenu-wheel-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pt-tumenu-band {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 13px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Mensaje + comidas cargadas para el paciente */
.pt-tumenu-patient {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border-radius: 12px;
  padding: 9px 11px;
  margin: 0 0 10px;
}
.pt-tumenu-patient .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-text);
  flex-shrink: 0;
  margin-top: 1px;
}
.pt-tumenu-patient b { color: var(--color-text); font-weight: 700; }
.pt-tumenu-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding: 12px 2px 2px;
  margin: 0;
}
.pt-tumenu-empty .material-symbols-outlined { font-size: 18px; color: var(--color-text-secondary); }
.pt-tumenu-slot {
  border-radius: 16px;
  padding: 12px 13px;
  margin-top: 10px;
  border: 1px solid transparent;
  background-image: linear-gradient(152deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 100%);
  animation: pt-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pt-tumenu-slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pt-tumenu-slot-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.pt-tumenu-slot-name em {
  font-style: normal;
  font-weight: 600;
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  margin-left: 5px;
}
.pt-tumenu-slot-kcal {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text);
  white-space: nowrap;
}
.pt-tumenu-slot-sub {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  margin: 3px 0 0;
}
.pt-tumenu-slot-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.pt-tumenu-slot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: 4px 9px;
  border-radius: 999px;
}
.pt-tumenu-slot-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pt-tumenu-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  margin: 12px 0 0;
}
.pt-tumenu-note .material-symbols-outlined { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pt-tumenu-wheel-item,
  #mcPanel,
  .pt-mc-panel-inner,
  .pt-tumenu-slot {
    transition: none;
    animation: none;
  }
}

/* ============================================
   TU MENÚ EN INICIO (solo lectura)
   Resumen estético del menú cargado, encima de "Objetivos de hoy".
   ============================================ */
.pt-tuhome-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.pt-tuhome-total {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.pt-tuhome-total small {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.pt-tuhome-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-2);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.pt-tuhome-list { display: flex; flex-direction: column; }
.pt-tuhome-group {
  border-bottom: 1px solid var(--color-border);
}
.pt-tuhome-group:last-child { border-bottom: 0; }
.pt-tuhome-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease;
}
.pt-tuhome-group-head:active { opacity: 0.7; }
.pt-tuhome-group-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-tuhome-group-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pt-tuhome-group-sub {
  font-size: 10.5px;
  color: var(--color-text-secondary);
}
.pt-tuhome-group-kcal {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text);
  white-space: nowrap;
}
.pt-tuhome-group-kcal small { font-size: 10px; font-weight: 600; color: var(--color-text-secondary); }
.pt-tuhome-chev {
  font-size: 20px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-tuhome-group.open .pt-tuhome-chev { transform: rotate(180deg); }
.pt-tuhome-items {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    padding-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-tuhome-group.open .pt-tuhome-items {
  max-height: 620px;
  opacity: 1;
  padding-bottom: 10px;
}
.pt-tuhome-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 47px;
  font-size: 12.5px;
  line-height: 1.9;
}
.pt-tuhome-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  transform: translateY(-1px);
}
.pt-tuhome-item-name {
  color: var(--color-text);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pt-tuhome-item-amt {
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.pt-tuhome-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  margin: 14px 0 0;
}
.pt-tuhome-foot .material-symbols-outlined { font-size: 14px; }
/* El botón "Editar" de Tu menú viste el azul de marca (no el verde de otros
   "Ver todo" de la app). */
.pt-section-head .pt-ver-todo.pt-tuhome-edit {
  color: var(--color-text);
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}
.pt-section-head .pt-ver-todo.pt-tuhome-edit:active { background: var(--color-surface-2); }

/* ============================================================
   AJUSTES FINALES (prevalecen sobre lo anterior)
   ============================================================ */

/* ---------- Menú inferior: PÍLDORA FLOTANTE ---------- */
/* Píldora flotante, pero PEGADA al borde (8px + safe-area) como pidió el
   usuario: casi sin hueco bajo la píldora, que sigue leyéndose como un
   elemento que flota sobre el contenido gracias a su sombra. Unificado con las
   reglas de arriba (base y bloque de cristal). */
.mobile-bottom-nav {
  position: fixed;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  border-radius: 40px;
}

/* ---------- iOS/Safari: esquinas redondeadas de verdad ---------- */
/* En iOS el brillo (background-image) y el cristal se pintan sin recortar si
   el navegador no aplica el radio al fondo. Forzamos el recorte con
   -webkit-mask-image + isolation para que las tarjetas dejen de verse
   cuadradas en iPhone/móvil. En escritorio no cambia nada. */
.card,
.today-card,
.register-card,
.pt-meal-card,
.pt-distrib-card,
.pt-profile-card,
.pt-rec-card,
.pt-med-card,
.pt-diario-card,
.pt-pay-card,
.pt-seg-rev-card,
.pt-comida-card,
.pt-receta-card,
.meal-card,
.pt-compra-card,
.pt-mc-card,
.pt-tumenu-card,
.pt-nutri-card,
.pt-goals-card,
.pt-entry-card,
.pt-tuhome-card,
.pt-mc-slot,
.pt-tumenu-slot,
.pt-tumenu-picker,
.pt-mc-opt,
.pt-mc-tabs,
.pt-tumenu-wheel,
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal,
.pt-tour-tip,
#nlRecetaModal .nl-receta-modal,
.pt-toast,
.mobile-bottom-nav {
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}
.mobile-bottom-nav { -webkit-mask-image: none; mask-image: none; }

/* ---------- Modales de recetas: mismo cristal que las tarjetas ---------- */
/* Mismo reflejo azul degradado desde arriba a la izquierda, esquinas
   redondeadas y borde transparente. NO se toca ninguna funcionalidad. */
#nlRecetaModal .nl-receta-modal {
  border-radius: 20px !important;
  overflow: hidden !important;
  background-color: rgba(10, 12, 20, 0.78) !important;
  background-image:
    radial-gradient(130% 90% at 0% 0%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.08) 24%,
      rgba(255, 255, 255, 0.02) 48%,
      transparent 70%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.015) 55%,
      rgba(255, 255, 255, 0.025) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* Cabecera interna del modal (construida con estilos en línea por
   recetas-ia.js): se deja transparente para que se vea el cristal de fondo y
   solo quede el separador inferior. NO se toca ninguna funcionalidad. */
#nlRecetaModal .nl-receta-modal > header {
  background: transparent !important;
  border-bottom-color: var(--color-border) !important;
}


/* ============================================================
   RECOMENDACIONES (Inicio · debajo de "Tu menú")
   Carrusel con SCROLL-SNAP y BUCLE INFINITO: contenedor con scroll
   horizontal (sin scrollbar) y snap centrado; la lista va triplicada
   (copia · real · copia) y al alcanzar una copia se salta al tramo
   real sin que se note, así que no hay principio ni fin. Cada
   tarjeta se ve ENTERA (sin escalados que recorten contenido).
   Sin flechas: se desliza y el snap encaja en la receta siguiente
   (con ratón, arrastre propio). Autoplay cada 7 s. Tarjeta
   "rectángulo partido": foto arriba (mitad superior) y nombre +
   tags + kcal + macros (mitad inferior), cristal sobrio SIN
   resplandor, flotando sobre el fondo (sección transparente).
   ============================================================ */
/* Sección y cabecera: transparentes (ninguna tarjeta contenedora). */
.pt-recos,
.pt-recos .pt-section-head,
.pt-recos-stage {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.pt-recos-stage { position: relative; }
/* Distancia del degradado que difumina las tarjetas laterales. */
.pt-recos { --reco-fade: 64px; }
/* Carrusel: scroll horizontal con snap y scrollbar oculta (se navega
   deslizando; con ratón, arrastrando). Cada tarjeta queda centrada
   al encajar. */
.pt-recos-container {
  overflow: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.pt-recos-container::-webkit-scrollbar { display: none; }
/* Degradado lateral: las tarjetas de antes/después se desvanecen
   hacia los bordes en vez de cortarse en seco. */
.pt-recos-container {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 var(--reco-fade),
    #000 calc(100% - var(--reco-fade)),
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 var(--reco-fade),
    #000 calc(100% - var(--reco-fade)),
    transparent 100%);
}
/* Mientras se arrastra con el ratón: sin snap (sigue al puntero). */
.pt-recos-container.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* Tarjeta de receta: glass suave SIN resplandor, mitad foto y mitad
   contenido (el "rectángulo partido por la mitad"). */
.pt-reco-card {
  flex: 0 0 200px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0;
  margin: 0 7px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transition: opacity 0.35s ease, border-color 0.25s ease, transform 0.15s ease, filter 0.35s ease;
}
/* Tarjetas laterales (antes/después) difuminadas: solo la receta del
   centro se ve nítida. */
.pt-reco-card { opacity: 0.55; filter: blur(2px); }
.pt-reco-card.is-reco-center { opacity: 1; filter: none; }
/* Efecto firma del carrusel Uiverse: al pasar por una tarjeta, las
   demás se atenúan (solo con puntero fino; en móvil no hay hover). */
@media (hover: hover) {
  .pt-recos-container:hover > :not(:hover) { opacity: 0.25; }
}
.pt-reco-card:hover { border-color: var(--color-border-strong); }
.pt-reco-card:active { transform: scale(0.98); }
/* Mitad superior: la foto. */
.pt-reco-photo {
  display: block;
  width: 100%;
  height: 148px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.pt-reco-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
}
/* Placeholder cuando la receta aún no tiene foto. */
.pt-reco-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-secondary);
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      transparent 70%),
    rgba(255, 255, 255, 0.03);
}
.pt-reco-photo-empty .material-symbols-outlined { font-size: 32px; }
/* Mitad inferior: nombre + tags + kcal + gramos de macros. */
.pt-reco-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 148px; /* espejo de la mitad superior (crece si hace falta) */
  flex: 1;
  padding: 12px 12px 14px;
}
/* Nombre de la receta: hasta dos líneas centradas (no se corta; solo
   con puntos suspensivos si tampoco cabe en la segunda). */
.pt-reco-title {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
/* Tags debajo del nombre. */
.pt-reco-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.pt-reco-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
}
/* kcal + gramos de macros. */
.pt-reco-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.pt-reco-kcal {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}
.pt-reco-kcal small {
  font-size: 9.5px;
  font-weight: 600;
  margin-left: 3px;
  color: var(--color-text);
}
.pt-reco-macros {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
}
/* Pantallas anchas: tarjetas un punto mayores (siguen pequeñas). */
@media (min-width: 700px) {
  .pt-recos { --reco-fade: 100px; }
  .pt-reco-card { flex-basis: 216px; }
  .pt-reco-photo { height: 158px; }
  .pt-reco-info { min-height: 158px; }
}
/* Movimiento reducido: sin animaciones. */
@media (prefers-reduced-motion: reduce) {
  .pt-reco-card { transition: none; }
}


/* ============================================
   CHECKBOX "TOMADO HOY" · Suplementación de hoy
   (adaptación de Uiverse.io by boryanakrasteva al tema oscuro del portal:
   sin fondo verde al marcar, check verde con brillo y rotación a 45º)
   ============================================ */
.checkbox-btn {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  align-self: center;
}

/* Oculta el checkbox nativo del navegador */
.checkbox-btn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-btn label { cursor: pointer; font-size: 14px; }

/* Checkbox personalizado */
.checkbox-btn .checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 25px;
  width: 25px;
  border: 2.5px solid var(--color-border-strong);
  transition: .2s linear;
  transform: translateY(-50%);
}

/* Marca de verificación (oculta cuando no está marcado) */
.checkbox-btn .checkmark:after {
  content: "";
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  top: 40%;
  width: 10px;
  height: 14px;
  border: 2px solid #0ea021;
  filter: drop-shadow(0px 0px 10px #0ea021);
  border-width: 0 2.5px 2.5px 0;
  transition: .2s linear;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.2);
}

/* Marcado */
.checkbox-btn input:checked ~ .checkmark {
  transform: translateY(-50%) rotate(45deg);
  border: none;
}
.checkbox-btn input:checked ~ .checkmark:after {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  animation: pt-sup-check-pulse 1s ease-in;
}

@keyframes pt-sup-check-pulse {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50%      { transform: translate(-50%, -50%) rotate(0deg) scale(1.6); }
}

/* Filas de suplementación: botón toggle a la derecha de la fila */
.pt-sup-row { gap: 10px; }
.pt-sup-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(73, 216, 154, .30);
  background: rgba(73, 216, 154, .06);
  color: var(--nl-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.pt-sup-btn.tomado {
  border: 1.5px solid var(--nl-green);
  background: var(--nl-green);
  color: var(--color-text);
  box-shadow: 0 0 0 4px rgba(73, 216, 154, 0.16);
}
.pt-sup-btn:active { transform: scale(.96); }
.pt-sup-btn.tomado:active { transform: scale(.94); }

/* Respeto del movimiento reducido (igual que el resto del portal) */
@media (prefers-reduced-motion: reduce) {
  .pt-sup-btn { transition: none; }
}

/* Selector de tiempo de comida del creador de menús: transparente, sin el
   efecto cristal/brillo del bloque global (degradado radial, blur y sombras).
   Solo conserva el separador inferior sutil de la barra. */
.pt-mc-tabs {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.pt-mc-tabs::-webkit-scrollbar { display: none; }

/* ============================================
   TU MENÚ (pestaña Dieta) · rueda integrada
   El selector tipo rueda ya no va dentro de una "tarjeta" de cristal:
   sin relleno, sin borde y sin resplandor. Los degradados de difuminado
   de los extremos se suavizan para que no se lean como una tarjeta y la
   rueda parezca flotar dentro de la sección. Override al final: gana la
   cascada sin tocar las reglas funcionales (scroll-snap, touch-action…).
   ============================================ */
.pt-tumenu-picker {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  overflow: visible;
}
/* Sin elemento rectangular alguno: se retira la banda central del selector
   (era la franja rectangular que se veía detrás de la fila activa) y también
   los degradados de difuminado de los extremos. La rueda queda totalmente
   limpia: solo el texto, con la fila activa resaltada por tamaño/opacidad. */
.pt-tumenu-band { display: none !important; }
.pt-tumenu-picker::before,
.pt-tumenu-picker::after { content: none !important; }
/* La rueda en sí: transparente (sin relleno, sin borde, sin máscara). */
.pt-tumenu-wheel {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* ============================================
   SEGUIMIENTO · ICC y alertas de riesgo (cintura)
   Código de colores: verde = riesgo bajo, ámbar = riesgo elevado.
   Umbrales: ICC <0,90 H / <0,85 M · Cintura <94 cm H / <80 cm M.
   ============================================ */
.pt-icc-card { margin-top: 10px; padding: 16px; }
.pt-icc-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pt-icc-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-icc-icon.bajo {
  background: rgba(52, 211, 153, 0.14);
  color: var(--color-accent-protein);
}
.pt-icc-icon.alto {
  background: rgba(251, 191, 36, 0.14);
  color: var(--color-accent-carbs);
}
.pt-icc-icon .material-symbols-outlined { font-size: 22px; }
.pt-icc-info { flex: 1; min-width: 0; }
.pt-icc-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
}
.pt-icc-sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--color-text-secondary);
}
.pt-icc-valor {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.pt-icc-valor.bajo { color: var(--color-accent-protein); }
.pt-icc-valor.alto { color: var(--color-accent-carbs); }
.pt-icc-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
}
.pt-icc-estado .material-symbols-outlined { font-size: 17px; }
.pt-icc-estado.bajo {
  background: rgba(52, 211, 153, 0.10);
  color: var(--color-accent-protein);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.pt-icc-estado.alto {
  background: rgba(251, 191, 36, 0.10);
  color: var(--color-accent-carbs);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
/* Banda de alerta dentro de las mini-tarjetas de Medidas corporales */
.pt-seg-riesgo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.pt-seg-riesgo .material-symbols-outlined { font-size: 14px; }
.pt-seg-riesgo.bajo {
  background: rgba(52, 211, 153, 0.10);
  color: var(--color-accent-protein);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.pt-seg-riesgo.alto {
  background: rgba(251, 191, 36, 0.10);
  color: var(--color-accent-carbs);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ============================================================
   MENÚ DE REGISTRO DEL BOTÓN "+" (3 BURBUJAS)
   ------------------------------------------------------------
   Capa por DEBAJO del menú inferior (z-index 89 < 90): así el botón "+"
   sigue siendo pulsable con la lista abierta y vuelve a cerrarla, mientras
   el fondo atenúa el contenido y la hoja de burbujas sube por encima del
   menú (margin-bottom = alto del menú + safe-area).
   Cada burbuja es un círculo de cristal índigo con el icono de su medida;
   la lista entra escalonada (stagger) desde abajo.
   ============================================================ */

.add-menu {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}

.add-menu.visible {
  visibility: visible;
  pointer-events: auto;
}

.add-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.add-menu.visible .add-menu-backdrop { opacity: 1; }

.add-menu-sheet {
  position: relative;
  width: min(400px, calc(100vw - 32px));
  /* 60px del menú + 8px de hueco + 16px de aire + safe-area */
  margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  padding: 14px 14px 12px;
  border-radius: 26px;
  background-color: rgba(10, 12, 20, 0.92);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}
.add-menu.visible .add-menu-sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.add-menu-handle {
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-track);
  margin: 0 auto 10px;
}

.add-menu-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.add-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-menu-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.add-menu.visible .add-menu-opt { opacity: 1; transform: translateY(0); }
.add-menu.visible .add-menu-opt:nth-child(1) { transition-delay: 0.04s; }
.add-menu.visible .add-menu-opt:nth-child(2) { transition-delay: 0.10s; }
.add-menu.visible .add-menu-opt:nth-child(3) { transition-delay: 0.16s; }

.add-menu-opt:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}
.add-menu-opt:active { transform: scale(0.985); }
.add-menu-opt:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
/* Peso bloqueado por la pauta de pesaje: burbuja atenuada (no pulsable) */
.add-menu-opt.is-locked,
.add-menu-opt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.add-menu-bubble {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background-image: radial-gradient(120% 120% at 30% 20%,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.16) 55%,
    rgba(49, 46, 129, 0.28) 100%);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}
.add-menu-bubble .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.add-menu-txt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.add-menu-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text);
}
.add-menu-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--color-text-secondary);
}
.add-menu-chev {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--color-text-tertiary);
}

.add-menu-cancel {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.add-menu-cancel:hover { background: var(--color-track); color: var(--color-text); }

/* Estado ABIERTO del botón "+": gira 45º (la cruz pasa a aspa) y se ilumina */
.nav-plus-btn.is-open .nav-plus-svg {
  transform: rotate(45deg);
  stroke: var(--color-text);
  fill: rgba(49, 46, 129, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .add-menu-backdrop,
  .add-menu-sheet,
  .add-menu-opt,
  .nav-plus-btn.is-open .nav-plus-svg {
    transition: none;
  }
}

/* ============================================
   FONDO DE VÍDEO FIJO (Inicio/Recetas/Recursos/Ajustes)
   El HTML pinta <div class="pt-inicio-bg"> con el <video>
   .pt-inicio-bg-video + velo .pt-inicio-bg-shade. Sin estas
   reglas el <video> quedaba en flujo y empujaba todo el
   contenido hacia abajo (pantalla rota). Fijo al viewport,
   limitado al ancho del shell (480px), detrás del contenido.
   ============================================ */
.pt-inicio-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--color-bg);
}
.pt-inicio-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt-inicio-bg-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.25) 35%, rgba(5,5,5,.78) 100%);
}
/* El contenido hace scroll POR ENCIMA del vídeo fijo. */
.screen-content {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pt-inicio-bg-video { display: none; }
}



/* ============================================================
   RESTYLING v3 · DARK MINIMAL (SOLO ESTÉTICA)
   Capa FINAL del archivo: gana la cascada sobre los restylings
   anteriores (aurora, cristal, halo índigo) sin tocar selectores
   funcionales ni JS. Estilo plano tipo app de salud: fondo casi
   negro, tarjetas con borde de 1px y SIN sombras, iconos de línea
   fina y tres acentos de macros.
   REGLA: aquí no hay colores ni medidas sueltas; todo sale de los
   design tokens del :root (principio del archivo).
   ============================================================ */

/* ---------- Base: fondo plano, sin aurora, rejilla ni vídeo ---------- */
html, body {
  background: var(--color-bg);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}
body::before,
body::after { content: none; background: none; }
.app-shell { background: var(--color-bg); }
.app-shell::before,
.app-shell::after { content: none; background: none; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
::selection { background: var(--color-border-strong); color: var(--color-text); }

.screen-content {
  position: relative;
  padding-left: var(--space-screen);
  padding-right: var(--space-screen);
  gap: var(--gap-cards);
}

/* ---------- Fondos de pestaña: vídeo (Inicio) e imagen (Nutrición · Progreso) ----------
   La capa se queda pegada arriba de la pestaña (sticky) mientras el
   contenido hace scroll por encima: ocupa el alto del viewport y un margen
   negativo igual le quita su hueco en el flujo. Sticky (y no fixed) porque la
   pestaña activa lleva transform de entrada y un fixed se desplazaría con
   el scroll. El velo .pt-inicio-bg-shade degrada el fondo: más opaco abajo a
   la izquierda y cada vez más transparente hacia el borde derecho. */
.pt-inicio-bg {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: none;
  height: var(--app-h, 100dvh);
  margin-bottom: calc(var(--app-h, 100dvh) * -1);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--color-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@supports not (height: 100dvh) {
  .pt-inicio-bg { height: var(--app-h, 100vh); margin-bottom: calc(var(--app-h, 100vh) * -1); }
}
.pt-bg-dieta { background-image: var(--bg-image-dieta); }
.pt-bg-seguimiento { background-image: var(--bg-image-seguimiento); }
.pt-inicio-bg-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-inicio-bg-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--bg-shade-angle),
    var(--bg-shade-start) 0%,
    var(--bg-shade-mid) var(--bg-shade-mid-stop),
    var(--bg-shade-end) 100%);
}
.screen-content { z-index: 1; }

/* ---------- Tarjetas: superficie plana + borde sutil, sin sombras ---------- */
.card,
.today-card,
.register-card,
.pt-meal-card,
.pt-distrib-card,
.pt-profile-card,
.pt-rec-card,
.pt-med-card,
.pt-diario-card,
.pt-pay-card,
.pt-seg-rev-card,
.pt-comida-card,
.pt-receta-card,
.meal-card,
.pt-compra-card,
.pt-mc-card,
.pt-tumenu-card,
.pt-nutri-card,
.pt-entry-card,
.pt-tuhome-card,
.pt-mc-slot,
.pt-tumenu-slot,
.pt-tumenu-picker,
.pt-mc-opt,
.pt-mc-tabs {
  background-color: var(--color-surface);
  background-image: none;
  border: var(--border-card) !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  transition: border-color var(--dur) ease, background-color var(--dur) ease;
}
.card,
.today-card,
.register-card,
.pt-meal-card,
.pt-distrib-card,
.pt-profile-card,
.pt-rec-card,
.pt-med-card,
.pt-diario-card,
.pt-pay-card,
.pt-compra-card,
.pt-mc-card,
.pt-tumenu-card,
.pt-nutri-card,
.pt-entry-card,
.pt-tuhome-card {
  border-radius: var(--radius-card);
}
.card { padding: var(--space-card); }
.card::before,
.card::after { content: none; display: none; }
.card:hover,
.card:active,
.card:focus,
.card:focus-visible,
.card:focus-within,
.today-card:hover,
.register-card:hover,
.pt-meal-card:hover,
.pt-distrib-card:hover,
.pt-profile-card:hover,
.pt-rec-card:hover,
.pt-med-card:hover,
.pt-diario-card:hover,
.pt-pay-card:hover,
.pt-seg-rev-card:hover,
.pt-comida-card:hover,
.pt-receta-card:hover,
.meal-card:hover,
.pt-compra-card:hover,
.pt-mc-card:hover,
.pt-tumenu-card:hover,
.pt-tuhome-card:hover,
.pt-mc-slot:hover,
.pt-tumenu-slot:hover {
  border-color: var(--color-border) !important;
  box-shadow: none;
  transform: none;
}
.card[data-action]:active,
.pt-pay-card:active,
.pt-seg-rev-card:active { background-color: var(--color-surface-2); }
/* La rueda de "Tu menú" flota sin tarjeta (como antes), pero sin cristal */
.pt-tumenu-wheel {
  background-image: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Etiquetas de sección en MAYÚSCULAS ("OBJETIVO DIARIO", "PRÓXIMA REVISIÓN") */
.card-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.card-icon { color: var(--color-text-secondary); }

/* Títulos de sección ("Objetivos de hoy") + enlace "Ver todo" */
.pt-section-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.pt-section-head { align-items: center; margin-bottom: var(--space-3); }
.pt-section-head .pt-section-title { margin-bottom: 0; }
.pt-ver-todo,
.pt-section-head .pt-ver-todo.pt-tuhome-edit {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-1) 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-link);
  gap: var(--space-1);
}
.pt-ver-todo .material-symbols-outlined { font-size: var(--icon-size-sm); color: var(--color-link); }
.pt-ver-todo:hover,
.pt-ver-todo:active,
.pt-section-head .pt-ver-todo.pt-tuhome-edit:hover { background: none; border: 0; box-shadow: none; opacity: .8; }

/* Textos de apoyo */
.pt-hint,
.pt-goal-hint { color: var(--color-text-tertiary); font-size: var(--fs-label); }

/* ---------- Barras de progreso: finas y totalmente redondeadas ---------- */
.progress-bar-bg,
.pt-goal-row-bar,
.pt-compra-bar,
.pt-goals-day-bar,
.pt-cons-bar,
.pt-consulta-step-bar {
  height: var(--bar-height);
  border-radius: var(--radius-pill);
  background: var(--color-track);
  overflow: hidden;
}
.progress-bar-fill,
.pt-goal-row-bar > div,
.pt-compra-bar > span,
.pt-goals-day-bar > div,
.pt-cons-bar > div,
.pt-consulta-step-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  box-shadow: none;
}

/* ---------- Botones ---------- */
/* Primario: blanco roto con texto negro (todos los estados, también táctil) */
.btn-primary,
.pt-mc-save,
.btn-primary:hover,
.pt-mc-save:hover,
.btn-primary:focus,
.pt-mc-save:focus,
.btn-primary:focus-visible,
.pt-mc-save:focus-visible {
  background: var(--color-btn-primary-bg);
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  border: var(--border-width) solid var(--color-btn-primary-bg);
  border-radius: var(--radius-btn);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.btn-primary:active,
.pt-mc-save:active {
  background: var(--color-btn-primary-bg-pressed);
  background-color: var(--color-btn-primary-bg-pressed);
  border-color: var(--color-btn-primary-bg-pressed);
  color: var(--color-btn-primary-text);
  box-shadow: none;
  transform: scale(0.98);
}
.btn-primary .material-symbols-outlined,
.pt-mc-save .material-symbols-outlined { color: var(--color-btn-primary-text); font-size: var(--icon-size-sm); }
@media (hover: none) {
  .btn-primary:hover,
  .pt-mc-save:hover {
    background: var(--color-btn-primary-bg);
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border-color: var(--color-btn-primary-bg);
    box-shadow: none;
  }
}
.btn-primary,
.btn-secondary { min-height: var(--btn-height); padding-top: 0; padding-bottom: 0; }
.btn-primary:disabled,
.btn-primary[disabled] { opacity: .45; }
/* Botón ancho de llamada a la acción: icono + texto centrados y chevron a la derecha */
.btn-primary.pt-btn-cta {
  position: relative;
  min-height: var(--btn-height);
  gap: var(--space-3);
  padding: 0 var(--space-6);
}
.pt-btn-cta .pt-btn-chev {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
/* Secundario: superficie con borde */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  box-shadow: none;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}
.btn-secondary:active { background: var(--color-track); }
.btn-secondary .material-symbols-outlined { color: var(--color-text); }

/* Chips (rangos, métricas, planes, filtros, calidad de sueño) */
.pt-range-chip,
.pt-quality-chip,
.pt-plan-chip,
.pt-libro-chip {
  background: var(--color-surface);
  background-image: none;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-secondary);
  box-shadow: none;
}
.pt-range-chip.active,
.pt-quality-chip.active,
.pt-plan-chip.active,
.pt-libro-chip.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
  box-shadow: none;
}
.pt-plan-chip.active .material-symbols-outlined { color: var(--color-bg); }

/* Campos */
.pt-input,
.date-input,
.weight-input,
.pt-textarea {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  box-shadow: none;
}
.pt-input::placeholder,
.weight-input::placeholder,
.pt-textarea::placeholder { color: var(--color-text-tertiary); }
.pt-input:focus,
.date-input:focus,
.weight-input:focus,
.pt-textarea:focus { border-color: var(--color-text-secondary); box-shadow: none; outline: none; }

/* ---------- Sheets, modales y avisos flotantes: planos ---------- */
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal,
.pt-tour-tip,
.add-menu-sheet,
.pt-visor-sheet,
.pt-toast,
.error-card {
  background-color: var(--color-surface);
  background-image: none;
  border: var(--border-card);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
#nlRecetaModal .nl-receta-modal {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border: var(--border-card);
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.bottom-sheet-overlay,
.pt-chat-overlay,
.pt-consulta-overlay,
.pt-visor-overlay,
.add-menu-backdrop { background: var(--color-overlay); }
.sheet-title { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--color-text); }
.sheet-handle,
.add-menu-handle { background: var(--color-border-strong); }
.loader-overlay,
.error-overlay { background: var(--color-bg); }
.splash-grid { display: none; }
.loader-name { font-family: var(--font-brand); color: var(--color-text); letter-spacing: var(--tracking-brand); }
/* Avatares con iniciales: superficie neutra (antes degradado de marca) */
.profile-avatar,
.pt-nutri-avatar,
.pt-brand-mark {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  box-shadow: none;
  color: var(--color-text);
}

/* ============================================================
   CABECERA (todas las pestañas con logotipo)
   ============================================================ */
/* Logotipo NUTRILAB: mayúsculas, trazo fino, ancho, centrado y en blanco */
.pt-brand { margin-bottom: var(--space-3); min-height: var(--tool-size); }
.pt-brand .pt-brand-name,
.pt-brand-name {
  font-family: var(--font-brand);
  font-size: var(--fs-brand);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-brand);
  line-height: 1;
  text-transform: uppercase;
  /* Ligeramente plateado: degradado vertical de blanco a plata sobre el texto */
  background: linear-gradient(180deg, var(--color-brand-from) 20%, var(--color-brand-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-brand-to);
  animation: none;
  filter: none;
  text-shadow: none;
}
/* Saludo + fecha a la izquierda, avatar circular a la derecha */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.header-greeting {
  font-size: var(--fs-greeting);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  color: var(--color-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: none;
}
.header-subtitle {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}
.header-subtitle.pt-date::first-letter { text-transform: uppercase; }
.pt-header-ava { position: relative; }
.pt-brand-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface-2);
  box-shadow: none;
}
.pt-brand-avatar-initials {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
/* Accesos (notificaciones · tutorial): iconos de línea DEBAJO de la fecha /
   subtítulo, al principio del contenido. El margen negativo compensa el gap
   de .screen-content y los pega a la fecha. */
.header-tools {
  position: relative;
  height: var(--tool-size);
  margin: calc(var(--space-2) * -1) 0 0 calc(var(--space-1) * -1);
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  z-index: 2;
}
.pt-float-btn { opacity: 1; margin: 0; }
.pt-float-btn .material-symbols-outlined,
.pt-help-btn .material-symbols-outlined { color: var(--color-text-secondary); }
.pt-float-dot { background: var(--color-danger); box-shadow: none; }

/* ============================================================
   INICIO
   ============================================================ */
/* Fila de mensajes: campana + texto + chevron, con línea fina inferior */
.pt-aviso-chat,
.pt-aviso-chat.nuevo,
.pt-aviso-chat.indigo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-1) var(--space-4);
  margin: 0;
  background: none;
  border: 0;
  border-bottom: var(--border-card);
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  text-align: left;
  animation: none;
}
button.pt-aviso-chat:active { opacity: .7; transform: none; }
.pt-aviso-chat-icon,
.pt-aviso-chat.nuevo .pt-aviso-chat-icon,
.pt-aviso-chat.indigo .pt-aviso-chat-icon {
  position: relative;
  width: var(--tool-size);
  height: var(--tool-size);
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--color-text);
}
.pt-aviso-chat-icon .material-symbols-outlined { font-size: var(--icon-size); }
.pt-aviso-chat.nuevo .pt-aviso-chat-icon,
.pt-aviso-chat.indigo .pt-aviso-chat-icon { color: var(--color-link); }
.pt-aviso-chat-dot,
.pt-aviso-chat.indigo .pt-aviso-chat-dot { background: var(--color-link); box-shadow: 0 0 0 2px var(--color-bg); }
.pt-aviso-chat-txt { flex: 1; min-width: 0; }
.pt-aviso-chat-txt b {
  display: block;
  max-width: 12.5em;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
}
.pt-aviso-chat.nuevo .pt-aviso-chat-txt b,
.pt-aviso-chat.indigo .pt-aviso-chat-txt b { max-width: none; font-weight: var(--fw-semibold); }
.pt-aviso-chat-txt small,
.pt-aviso-chat.indigo .pt-aviso-chat-txt small { font-size: var(--fs-small); color: var(--color-text-secondary); }
.pt-aviso-chat-arrow,
.pt-aviso-chat.indigo .pt-aviso-chat-arrow { font-size: var(--icon-size); color: var(--color-text-secondary); }

/* Tarjeta "PRÓXIMA REVISIÓN": recuadro de icono + título + descripción + chevron */
.pt-home-review,
.pt-home-review.empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-card);
  border-color: var(--color-border) !important;
}
.pt-home-review-icon,
.pt-home-review.empty .pt-home-review-icon {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-thumb);
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: none;
}
.pt-home-review-icon .material-symbols-outlined { font-size: var(--icon-size); }
.pt-home-review-info { flex: 1; min-width: 0; }
.pt-home-review-date,
.pt-home-review.empty .pt-home-review-date {
  margin-top: var(--space-1);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.pt-home-review-sub {
  margin-top: var(--space-1);
  font-size: var(--fs-detail);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.pt-home-review-chip {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--fs-label);
  box-shadow: none;
}
.pt-home-review.empty .pt-home-review-chip { display: none; }
.pt-home-review-chev { flex-shrink: 0; font-size: var(--icon-size); color: var(--color-text-secondary); }

/* "Objetivos de hoy": anillo a la izquierda y filas con barra fina a la derecha */
.pt-goals-card {
  display: block;
  position: relative;
  padding: var(--space-1) 0 0;
  background: none;
  background-image: none;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.pt-goals-main { display: flex; align-items: center; gap: var(--space-4); }
.pt-goals-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: 0;
}
.pt-goals-ring-bg,
.pt-goals-ring-fg { stroke-width: var(--ring-stroke); }
.pt-goals-ring-bg { stroke: var(--color-track); }
.pt-goals-ring-fg { stroke: var(--color-text); filter: none; }
.pt-goals-ring-pct { font-size: var(--fs-ring); font-weight: var(--fw-bold); color: var(--color-text); }
.pt-goals-ring-cap {
  margin-top: var(--space-1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pt-goals-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pt-goal-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  border: 0;
}
.pt-goal-row-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--color-text);
}
.pt-goal-row-icon .material-symbols-outlined { font-size: var(--icon-size-sm); }
.pt-goal-row-main { flex: 1; min-width: 0; }
.pt-goal-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0; }
.pt-goal-row-label { font-size: var(--fs-detail); font-weight: var(--fw-regular); color: var(--color-text); }
.pt-goal-row-val { font-size: var(--fs-detail); font-weight: var(--fw-regular); color: var(--color-text); white-space: nowrap; }
.pt-goal-row:not(:last-child) { border-bottom: 0; }
.pt-goal-row-val em { font-style: normal; font-size: inherit; font-weight: inherit; color: var(--color-text); }
/* La barra fina ES el slider: relleno del color de la fila hasta --sl-fill */
.pt-goals-card .pt-slider-wrap { height: var(--space-5); }
.pt-goals-card .pt-slider {
  height: var(--bar-height);
  margin: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--goal-accent) var(--sl-fill, 0%), var(--color-track) var(--sl-fill, 0%));
}
.pt-goals-card .pt-slider::-webkit-slider-thumb {
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  background: var(--color-text);
  border: 0;
  box-shadow: 0 0 0 3px var(--color-bg);
}
.pt-goals-card .pt-slider::-moz-range-thumb {
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  background: var(--color-text);
  border: 0;
  box-shadow: 0 0 0 3px var(--color-bg);
}
.pt-goals-hint { margin-top: var(--space-3); }
.pt-goal-quality { margin-top: var(--space-4); padding: 0; border: 0; }
.pt-goal-quality-label { display: block; margin-bottom: var(--space-2); }
.pt-goals-info {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: var(--space-2);
  vertical-align: middle;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--color-text-tertiary);
}
.pt-goals-info .material-symbols-outlined { font-size: var(--icon-size-sm); }

/* ============================================================
   NUTRICIÓN
   ============================================================ */
/* Cabecera: atrás · título centrado en MAYÚSCULAS · accesos */
.pt-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--tool-size);
}
.pt-topbar-btn {
  justify-self: start;
  width: var(--tool-size);
  height: var(--tool-size);
  margin-left: calc(var(--space-2) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}
.pt-topbar-btn .material-symbols-outlined { font-size: calc(var(--icon-size) + var(--space-1)); }
.pt-topbar-btn:active { opacity: .6; }
.pt-topbar-title {
  font-size: var(--fs-item);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.pt-topbar .header-tools {
  position: static;
  margin: 0;
  justify-self: end;
  width: auto;
  height: auto;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--space-1);
  pointer-events: auto;
}
.pt-topbar-sub {
  margin-top: calc(var(--space-2) * -1);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-card);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

/* Tarjeta "OBJETIVO DIARIO": llama + etiqueta, cifra grande y tres macros */
.pt-macro-card { padding: var(--space-card); }
.pt-macro-card .card-header { margin-bottom: var(--space-3); }
.pt-label-icon { display: inline-flex; align-items: center; gap: var(--space-2); }
.pt-label-icon .material-symbols-outlined { font-size: var(--icon-size); color: var(--color-text-secondary); }
.pt-kcal-main,
.pt-macro-card .pt-kcal-main {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.pt-kcal-main.pt-kcal-na { color: var(--color-text-tertiary); }
.pt-kcal-unit {
  margin-left: var(--space-1);
  font-size: var(--fs-unit);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--color-text-secondary);
}
.pt-macro-row { margin-bottom: var(--space-4); }
.pt-macro-row:last-child { margin-bottom: 0; }
.pt-macro-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--fs-body);
}
.pt-macro-label span:first-child { font-weight: var(--fw-medium); }
.pt-macro-label span:last-child { font-size: var(--fs-detail); font-weight: var(--fw-regular); color: var(--color-text-secondary); }

/* Sin dieta: estado vacío discreto */
.pt-dieta-empty { text-align: center; border-style: dashed !important; }
.pt-dieta-empty .material-symbols-outlined { display: block; margin-bottom: var(--space-2); font-size: calc(var(--icon-size) + var(--space-2)); color: var(--color-text-tertiary); }
.pt-dieta-empty-title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.pt-dieta-empty-sub { margin-top: var(--space-1); font-size: var(--fs-label); color: var(--color-text-tertiary); }

/* Lista de comidas: foto cuadrada redondeada + nombre + macros + chevron */
.diet-phase-review { display: flex; flex-direction: column; gap: var(--space-3); }
.meal-card.pt-nutri-meal {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.pt-nutri-meal .meal-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.pt-nutri-meal-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-thumb);
  background: var(--color-surface-2);
}
.pt-nutri-meal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-nutri-meal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pt-nutri-meal-name {
  font-size: var(--fs-item);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-nutri-meal-macros { font-size: var(--fs-detail); color: var(--color-text-secondary); }
.pt-nutri-meal .pt-menu-chev {
  flex-shrink: 0;
  font-size: var(--fs-detail);
  color: var(--color-text-secondary);
  transition: transform var(--dur) ease;
}
.pt-nutri-meal .meal-body { padding: 0 var(--space-4) var(--space-3); border-top: var(--border-card); }

/* ============================================================
   MENÚ INFERIOR: barra a todo el ancho con borde superior sutil
   ============================================================ */
.mobile-bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0;
  padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  background-color: var(--color-bg);
  background-image: none;
  border: 0 !important;
  border-top: var(--border-card) !important;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.nav-pill {
  flex: 1 1 0;
  max-width: none;
  height: auto;
  min-height: var(--nav-plus-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-1) 0;
  color: var(--color-text-secondary);
  opacity: 1;
  transform: none;
}
.nav-pill .material-symbols-outlined {
  font-size: calc(var(--icon-size) + 2px);
  color: var(--color-text-secondary);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.nav-pill .nav-label {
  display: block;
  font-size: var(--fs-nav);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--color-text-secondary);
}
.nav-pill:hover { color: var(--color-text-secondary); transform: none; }
.nav-pill.active,
.nav-pill.active .material-symbols-outlined,
.nav-pill.active .nav-label { color: var(--color-text); }
.nav-pill.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.nav-pill.active .nav-label { font-weight: var(--fw-semibold); }
.nav-pill:focus-visible { outline: var(--border-width) solid var(--color-text-secondary); outline-offset: 2px; }
.nav-dot { background: var(--color-link); box-shadow: 0 0 0 2px var(--color-bg); }
/* Botón central "+": círculo solo con borde blanco fino, algo elevado */
.nav-plus-btn { transform: translateY(var(--nav-plus-lift)); }
.nav-plus-btn:hover,
.nav-plus-btn:active { transform: translateY(var(--nav-plus-lift)); }
.nav-plus-svg {
  width: var(--nav-plus-size);
  height: var(--nav-plus-size);
  stroke: var(--color-text);
  fill: none;
  filter: none;
}
.nav-plus-svg path { stroke-width: var(--nav-plus-stroke); }
.nav-plus-btn:hover .nav-plus-svg { transform: none; fill: none; stroke: var(--color-text); }
.nav-plus-btn:active .nav-plus-svg { fill: var(--color-surface-2); stroke: var(--color-text); }

/* Botón flotante del chat: plano */
.pt-fab {
  background: var(--color-surface-2);
  background-image: none;
  border: var(--border-width) solid var(--color-border-strong);
  box-shadow: none;
  color: var(--color-text);
}
.pt-fab .material-symbols-outlined { color: var(--color-text); }

/* ---------- Restos de azul de marca: "+" abierto, chat y burbujas ---------- */
.nav-plus-btn.is-open .nav-plus-svg { fill: var(--color-surface-2); stroke: var(--color-text); }
.add-menu-opt {
  background: var(--color-surface);
  background-image: none;
  border: var(--border-card);
  box-shadow: none;
}
.add-menu-bubble {
  background: var(--color-surface-2);
  background-image: none;
  border: var(--border-width) solid var(--color-border-strong);
  box-shadow: none;
  color: var(--color-text);
}
.add-menu-bubble .material-symbols-outlined { color: var(--color-text); }
.add-menu-cancel {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  box-shadow: none;
}
/* Chat: enviar = botón primario; adjuntar = secundario; mensajes propios en claro */
.pt-chat-input button,
.pt-chat-msg.yo {
  background: var(--color-btn-primary-bg);
  background-image: none;
  border: 0;
  box-shadow: none;
  color: var(--color-btn-primary-text);
}
.pt-chat-input button .material-symbols-outlined { color: var(--color-btn-primary-text); }
.pt-chat-input .pt-chat-adj-btn {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
}
.pt-chat-input .pt-chat-adj-btn .material-symbols-outlined { color: var(--color-text); }
.pt-chat-input input {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  box-shadow: none;
  color: var(--color-text);
}
.pt-chat-input input:focus { border-color: var(--color-text-secondary); box-shadow: none; outline: none; }
.pt-fab-badge { background: var(--color-danger); box-shadow: none; }
.pt-chat-msg.yo .pt-chat-msg-time { color: var(--color-text-tertiary); }
.pt-rec-dot { background: var(--color-link); box-shadow: none; }


/* ============================================================
   INICIO · logotipo algo mayor y RUEDA VERTICAL DE AVISOS
   ============================================================ */
/* (El logotipo mide lo mismo en todas las pestañas: --fs-brand.) */

/* Rueda en bucle de UNA línea: solo se ve el aviso actual. Cada 5 s
   (portal-app.js · avisosIniciar) sale hacia arriba fundiéndose y el
   siguiente entra desde abajo, siempre en el mismo sentido. Solo informa:
   sin flecha, sin segunda línea y sin pulsación. */
.pt-avisos {
  position: relative;
  height: var(--wheel-item-h);
  overflow: hidden;
}
.pt-avisos .pt-avisos-item,
.pt-avisos .pt-avisos-item.nuevo {
  position: absolute;
  inset: 0;
  height: var(--wheel-item-h);
  padding: 0 var(--space-1);
  border-bottom: 0;
  cursor: default;
  transition:
    transform var(--wheel-move) var(--wheel-ease),
    opacity var(--wheel-move) var(--wheel-ease);
  will-change: transform, opacity;
}
.pt-avisos .pt-avisos-item.no-anim { transition: none; }
.pt-avisos-item[data-pos="0"] { transform: translateY(0); opacity: 1; }
.pt-avisos-item[data-pos="-1"] { transform: translateY(calc(var(--wheel-travel) * -1)); opacity: 0; }
.pt-avisos-item[data-pos="1"] { transform: translateY(var(--wheel-travel)); opacity: 0; }
.pt-avisos-item .pt-aviso-chat-txt b {
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .pt-avisos .pt-avisos-item { transition: none; }
}


/* ============================================================
   INICIO · próxima revisión solo con borde, solicitudes sin tarjeta
   y "Objetivos de hoy" en solo lectura
   ============================================================ */
.pt-home-review,
.pt-home-review.empty { background-color: transparent; }
/* Con cita: el aviso "Quedan N días" va arriba a la derecha, en la línea de
   la etiqueta, para no estrechar el texto. */
.pt-home-review { position: relative; }
.pt-home-review-chip {
  position: absolute;
  top: var(--space-card);
  right: var(--space-card);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.pt-home-review .card-label { white-space: nowrap; }
.pt-sol-list { background: none; border: 0; padding: 0; }
.pt-sol-list .pt-sol-item:first-child { padding-top: 0; }

/* Solo resultado: una barra fina por objetivo, a todo el ancho, sin anillo
   ni deslizadores (el registro está en la pestaña Progreso). */
.pt-goals-ro .pt-goals-rows { gap: var(--space-4); }
.pt-goals-card .pt-goal-row-bar { margin-top: var(--space-2); }
.pt-goals-card .pt-goal-row-bar > div { background: var(--goal-accent); }


/* ============================================================
   MIS SOLICITUDES · filas pulsables y detalle en el sheet
   ============================================================ */
.pt-sol-item[data-action] { cursor: pointer; transition: opacity var(--dur-fast) ease; }
.pt-sol-item[data-action]:active { opacity: .6; }
.pt-sol-detail-estado {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-1);
}
.pt-sol-detail-estado p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-secondary); }
/* El creador de menús queda bajo la cabecera al llegar desde "Editar" */
#dietaContent .pt-mc-card { scroll-margin-top: var(--space-6); }


/* ============================================================
   INICIO · "TU MENÚ" (modelo de referencia)
   Resumen con anillo de kcal/día y reparto de macros; debajo, una
   tarjeta por comida: foto + icono + nombre y nº de alimentos +
   kcal y macros + chevron (se despliega al tocar); y una nota final.
   ============================================================ */
.pt-tuhome-card.pt-tm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  background: none;
  border: 0 !important;
  border-radius: 0;
}
/* Resumen */
.pt-tm-summary { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-card); }
.pt-tm-ring-wrap { position: relative; flex-shrink: 0; width: var(--tm-ring-size); height: var(--tm-ring-size); }
.pt-tm-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-tm-ring-bg,
.pt-tm-ring-fg { fill: none; stroke-width: var(--ring-stroke); stroke-linecap: round; }
.pt-tm-ring-bg { stroke: var(--color-track); }
.pt-tm-ring-fg { stroke: var(--color-accent-protein); transition: stroke-dashoffset var(--dur) ease; }
.pt-tm-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.pt-tm-ring-num { font-size: var(--fs-greeting); font-weight: var(--fw-bold); line-height: 1; color: var(--color-text); }
.pt-tm-ring-cap { font-style: normal; font-size: var(--fs-label); color: var(--color-text-secondary); }
.pt-tm-macro-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pt-tm-macro { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-detail); color: var(--color-text); }
.pt-tm-macro-dot { width: var(--space-2); height: var(--space-2); flex-shrink: 0; border-radius: var(--radius-pill); background: var(--macro-accent); }
.pt-tm-macro-name { flex: 1; min-width: 0; }
.pt-tm-macro-pct { width: 3em; text-align: right; color: var(--color-text-secondary); }
.pt-tm-macro-g { width: 3.6em; text-align: right; color: var(--color-text-secondary); }
/* Tarjetas de comida */
.pt-tm-list { display: flex; flex-direction: column; gap: var(--space-2); }
.pt-tm-list .pt-tuhome-group.pt-tm-meal { padding: 0; border-bottom: var(--border-card) !important; overflow: hidden; }
.pt-tm-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  background: none;
  border: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.pt-tm-thumb {
  width: var(--tm-thumb-size);
  height: var(--tm-thumb-size);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-thumb);
  background: var(--color-surface-2);
}
.pt-tm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-tm-ico {
  width: var(--tm-ico-size);
  height: var(--tm-ico-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-chip);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}
.pt-tm-ico .material-symbols-outlined { font-size: var(--icon-size-sm); }
.pt-tm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pt-tm-name {
  font-size: var(--fs-detail);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-tm-sub { font-size: var(--fs-label); color: var(--color-text-secondary); }
.pt-tm-nums { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.pt-tm-kcal { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-link); white-space: nowrap; }
.pt-tm-macros { font-size: var(--fs-label); color: var(--color-text-tertiary); white-space: nowrap; }
.pt-tm-head .pt-tm-chev { flex-shrink: 0; font-size: var(--icon-size-sm); color: var(--color-text-secondary); transition: transform var(--dur) ease; }
.pt-tuhome-group.open .pt-tm-chev { transform: rotate(90deg); }
.pt-tm-meal .pt-tuhome-items { padding-left: var(--space-4); padding-right: var(--space-4); }
/* Nota final */
.pt-tm-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.pt-tm-foot > .material-symbols-outlined { flex-shrink: 0; font-size: var(--icon-size); color: var(--color-text-secondary); }
.pt-tm-foot-title { margin: 0; font-size: var(--fs-detail); font-weight: var(--fw-medium); color: var(--color-text); }
.pt-tm-foot-sub { margin: var(--space-1) 0 0; font-size: var(--fs-label); color: var(--color-text-secondary); }
/* En pantallas muy estrechas se prescinde del recuadro de icono */
@media (max-width: 359px) {
  .pt-tm-ico { display: none; }
  .pt-tm-summary { gap: var(--space-4); }
}


/* ============================================================
   TÍTULOS EN MAYÚSCULAS (secciones, pestañas, sheets y modales)
   ============================================================ */
.pt-section-title,
.header-greeting,
.sheet-title,
.pt-chat-sheet-title,
.pt-consulta-title,
.pt-libro-title,
.pt-compare-title,
.pt-visor-title {
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
}
.header-greeting { letter-spacing: 0.02em; }
/* Los iconos son ligaduras de texto: nunca se transforman */
.material-symbols-outlined { text-transform: none; letter-spacing: normal; }

/* ============================================================
   TU MENÚ · alimentos del desplegable sin cortar palabras
   Nombre en una línea (salta de línea entera si no cabe) y debajo
   la medida, en gris: nada se recorta con puntos suspensivos.
   ============================================================ */
.pt-tm-meal .pt-tuhome-items { padding-left: var(--space-4); padding-right: var(--space-4); }
.pt-tm-meal.open .pt-tuhome-items { padding-top: var(--space-1); padding-bottom: var(--space-3); max-height: 1200px; }
.pt-tm-meal .pt-tuhome-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: start;
  margin: 0;
  padding: var(--space-2) 0;
  border-top: var(--border-card);
  font-size: var(--fs-detail);
  line-height: var(--lh-normal);
}
.pt-tm-meal .pt-tuhome-item-dot { grid-row: 1 / span 2; margin-top: 0.5em; transform: none; }
.pt-tm-meal .pt-tuhome-item-name,
.pt-tm-meal .pt-tuhome-item-amt {
  grid-column: 2;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.pt-tm-meal .pt-tuhome-item-name { font-weight: var(--fw-medium); color: var(--color-text); }
.pt-tm-meal .pt-tuhome-item-amt { font-size: var(--fs-label); font-weight: var(--fw-regular); color: var(--color-text-secondary); }

/* ============================================================
   TU PROGRESO · gráfico sin tarjeta y selectores en verde
   ============================================================ */
.card.pt-evol-flat,
.card.pt-evol-flat:hover {
  padding: 0;
  background: none;
  border: 0 !important;
  border-radius: 0;
  overflow: visible;
}
.pt-range-chip.active {
  background: var(--color-link-soft);
  border-color: var(--color-link);
  color: var(--color-link);
}


/* ============================================================
   INICIO · Suplementación y Medicación solo con borde
   ============================================================ */
.card.pt-card-outline,
.card.pt-card-outline:hover { background: none; background-color: transparent; }

/* ============================================================
   INICIO · Novedades sin tarjeta, con scroll propio y fundido
   La lista hace scroll dentro de su caja (sin arrastrar la página al
   llegar al tope) y se funde con el fondo arriba y abajo.
   ============================================================ */
.card.pt-news-flat,
.card.pt-news-flat:hover {
  padding: 0;
  background: none;
  border: 0 !important;
  border-radius: 0;
  overflow: visible;
}
.pt-news-scroll {
  max-height: var(--news-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--fade-size) 0;
  margin: calc(var(--space-2) * -1) 0 0;
  scrollbar-width: none;
  outline: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--color-bg) var(--fade-size), var(--color-bg) calc(100% - var(--fade-size)), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, var(--color-bg) var(--fade-size), var(--color-bg) calc(100% - var(--fade-size)), transparent 100%);
}
.pt-news-scroll::-webkit-scrollbar { display: none; }


/* ============================================================
   INICIO · el saludo ("Buenas tardes, Juan") NO va en mayúsculas
   ============================================================ */
#inicioContent .header-greeting {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: var(--fs-greeting-home);
}

/* ============================================================
   CHAT · botón flotante circular y azul (sin halo) y barra de
   escribir ovalada con adjuntar y enviar integrados
   ============================================================ */
/* Siempre circular: escondido asoma un trozo del círculo por el borde. */
.pt-fab,
.pt-fab.visible {
  width: var(--fab-size);
  height: var(--fab-size);
  border: 0;
  border-radius: 50%;
  background: var(--color-chat);
  background-image: none;
  box-shadow: none;
  color: var(--color-text);
}
.pt-fab { right: calc(var(--fab-peek) - var(--fab-size)); transition: right .28s ease, transform .2s ease; }
.pt-fab.visible { right: calc(var(--space-3) + env(safe-area-inset-right)); }
.pt-fab:active { background: var(--color-chat-pressed); }
.pt-fab .material-symbols-outlined { color: var(--color-text); font-size: var(--icon-size); }
.pt-fab:not(.visible) .pt-fab-badge { left: 0; top: 0; }

/* La barra entera es el óvalo; dentro, adjuntar (izquierda), el campo sin
   borde y enviar (derecha, azul). */
.pt-chat-input {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-1);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) ease;
}
.pt-chat-input:focus-within { border-color: var(--color-text-secondary); }
.pt-chat-input input,
.pt-chat-input input:focus {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  font-size: var(--fs-body);
  color: var(--color-text);
}
#chatInput,
#chatInput:focus { border: 0 !important; box-shadow: none; outline: none; }
.pt-chat-input button,
.pt-chat-input .pt-chat-adj-btn {
  width: var(--chat-btn-size);
  height: var(--chat-btn-size);
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}
.pt-chat-input .pt-chat-adj-btn { background: none; color: var(--color-text-secondary); }
.pt-chat-input .pt-chat-adj-btn .material-symbols-outlined { color: var(--color-text-secondary); }
.pt-chat-input .pt-chat-adj-btn:active { background: var(--color-track); }
.pt-chat-input button[data-action="chat-send"] { background: var(--color-chat); color: var(--color-text); }
.pt-chat-input button[data-action="chat-send"]:active { background: var(--color-chat-pressed); }
.pt-chat-input button[data-action="chat-send"] .material-symbols-outlined { color: var(--color-text); font-size: var(--icon-size-sm) !important; }


/* ============================================================
   VÍDEO DE FONDO · sin controles nativos
   Si el móvil bloquea el autoplay (Modo de bajo consumo de iOS) pinta
   un botón de play encima del vídeo: se oculta, y el vídeo arranca solo
   con el primer toque en la pantalla (ver portal-cliente.html).
   ============================================================ */
.pt-inicio-bg-video::-webkit-media-controls,
.pt-inicio-bg-video::-webkit-media-controls-panel,
.pt-inicio-bg-video::-webkit-media-controls-play-button,
.pt-inicio-bg-video::-webkit-media-controls-start-playback-button,
.pt-inicio-bg-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
}
.pt-inicio-bg-video { pointer-events: none; }


/* ============================================================
   CHAT · sin recuadro claro al escribir y fechas sin apilarse
   ============================================================ */
.pt-chat-input:focus-within { border-color: var(--color-border-strong); }
/* Las fechas van en su sitio dentro de la conversación (ya no se quedan
   pegadas arriba ni se amontonan unas sobre otras al hacer scroll). */
.pt-chat-dia { position: static; z-index: auto; }
.pt-chat-dia span {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-secondary);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
   PANTALLA DE CARGA · logotipo grande con destello + línea fina
   ============================================================ */
.loader-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.loader-name {
  padding: 0;
  font-family: var(--font-brand);
  font-size: var(--fs-brand-splash);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-brand);
  line-height: 1;
  color: var(--color-brand-to);
  /* Plata con una franja de brillo que cruza el logotipo */
  background: linear-gradient(100deg,
    var(--color-brand-to) 0%,
    var(--color-brand-to) 38%,
    var(--color-brand-from) 50%,
    var(--color-brand-to) 62%,
    var(--color-brand-to) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pt-splash-in 0.9s var(--ease) both, pt-splash-shine 2.6s ease-in-out 0.4s infinite;
}
.loader-line {
  position: relative;
  width: var(--splash-line-w);
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  animation: pt-splash-in 0.9s var(--ease) 0.15s both;
}
.loader-line i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: var(--radius-pill);
  background: var(--color-brand-from);
  animation: pt-splash-line 1.5s cubic-bezier(0.45, 0, 0.15, 1) infinite;
}
@keyframes pt-splash-in {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.14em; }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pt-splash-shine {
  0% { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}
@keyframes pt-splash-line {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-name, .loader-line, .loader-line i { animation: none; }
  .loader-line i { width: 100%; opacity: .5; }
}

/* ============================================================
   NUTRICIÓN · objetivo diario FLOTANTE (sin tarjeta)
   Anillo con las kcal objetivo, repartido por macros, y a la derecha
   cada macro con gramos, kcal y %.
   ============================================================ */
.pt-macro-card.pt-obj {
  padding: var(--space-1) 0 var(--space-2);
  background: none;
  border: 0;
  border-radius: 0;
}
.pt-obj > .card-label { margin: 0 0 var(--space-3); }
.pt-obj-main { display: flex; align-items: center; gap: var(--space-3); }
.pt-obj-ring-wrap { position: relative; flex-shrink: 0; width: var(--obj-ring-size); height: var(--obj-ring-size); }
.pt-obj-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-obj-ring-bg,
.pt-obj-ring-seg { fill: none; stroke-width: var(--ring-stroke); }
.pt-obj-ring-bg { stroke: var(--color-track); }
.pt-obj-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.pt-obj-ring-num { font-size: var(--fs-ring); font-weight: var(--fw-bold); line-height: 1; color: var(--color-text); }
.pt-obj.na .pt-obj-ring-num { color: var(--color-text-tertiary); }
.pt-obj-ring-cap { font-style: normal; font-size: var(--fs-label); color: var(--color-text-secondary); }
.pt-obj-macros { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pt-obj-macro { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-detail); color: var(--color-text); white-space: nowrap; }
.pt-obj-macro-dot { width: var(--space-2); height: var(--space-2); flex-shrink: 0; border-radius: var(--radius-pill); background: var(--macro-accent); }
.pt-obj-macro-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pt-obj-macro-g { width: 3.2em; text-align: right; }
.pt-obj-macro-kcal { width: 4.6em; text-align: right; color: var(--color-text-secondary); }
.pt-obj-macro-pct { width: 2.6em; text-align: right; color: var(--color-text-secondary); }


/* ============================================================
   GRÁFICO · tarjetas de inicial / actual / diferencia solo con borde
   ============================================================ */
.pt-stat-cell {
  background: none;
  background-color: transparent;
  border: var(--border-card);
  box-shadow: none;
}

/* ============================================================
   NUTRICIÓN · grupos de alimentos de cada comida (sin ic ni kcal)
   ============================================================ */
.pt-nutri-meal .meal-body { padding: var(--space-1) var(--space-4) var(--space-2); }
.pt-ng { border-bottom: var(--border-card); }
.pt-ng:last-child { border-bottom: 0; }
.pt-ng-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
}
.pt-ng-ico {
  width: var(--tm-ico-size);
  height: var(--tm-ico-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-chip);
  font-size: var(--fs-label);
}
.pt-ng-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-detail);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.pt-ng-macros { flex-shrink: 0; font-size: var(--fs-label); color: var(--color-text-secondary); white-space: nowrap; }
.pt-ng-chev { flex-shrink: 0; font-size: var(--fs-micro); color: var(--color-text-tertiary); transition: transform var(--dur) ease; }
.pt-ng-content { padding: 0 0 var(--space-3) calc(var(--tm-ico-size) + var(--space-3)); }
.pt-ng-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-chip);
  background: var(--color-surface-2);
}
.pt-ng-item:last-child { margin-bottom: 0; }
.pt-ng-item-name { font-size: var(--fs-detail); color: var(--color-text); }
.pt-ng-item-amt { font-size: var(--fs-label); color: var(--color-text-secondary); }

/* ============================================================
   NUTRICIÓN · "Construye tu menú" sin tarjeta y pestañas sin recuadro
   ============================================================ */
.card.pt-mc-card,
.card.pt-mc-card:hover {
  padding: 0;
  background: none;
  border: 0 !important;
  border-radius: 0;
  overflow: visible;
}
.pt-mc-tabs {
  padding: 0;
  background: none;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   NUTRICIÓN · "Tu menú": selector de comida en chips (sin rueda)
   ============================================================ */
.pt-tumenu-chips {
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(var(--space-screen) * -1) var(--space-3);
  padding: 0 var(--space-screen);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pt-tumenu-chips::-webkit-scrollbar { display: none; }
.pt-tumenu-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-detail);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}
.pt-tumenu-chip.active {
  background: var(--color-link-soft);
  border-color: var(--color-link);
  color: var(--color-link);
}
.pt-tumenu-chip-count {
  min-width: 1.5em;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-track);
  color: var(--color-text);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  text-align: center;
}


/* ============================================================
   NUTRICIÓN · entrada al libro de recetas (fila sin tarjeta)
   ============================================================ */
.pt-libro-entry {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.pt-libro-entry:active { opacity: .6; }
.pt-libro-entry .pt-dieta-tool-icon {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: var(--radius-thumb);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.pt-libro-entry-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pt-libro-entry .pt-dieta-tool-name { margin: 0; font-size: var(--fs-item); font-weight: var(--fw-semibold); color: var(--color-text); }
.pt-libro-entry .pt-dieta-tool-sub { margin: 0; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-secondary); }
.pt-libro-entry-chev { flex-shrink: 0; font-size: var(--icon-size); color: var(--color-text-secondary); }

/* ============================================================
   LIBRO DE RECETAS · página (modelo de referencia)
   Barra superior (volver · NUTRILAB · buscar), título, dos filas de
   chips de filtro y la lista de tarjetas con foto.
   ============================================================ */
.pt-libro-screen { gap: var(--space-4); }
.pt-libro-topbar {
  display: grid;
  grid-template-columns: var(--tool-size) 1fr var(--tool-size);
  align-items: center;
  min-height: var(--tool-size);
}
.pt-libro-back,
.pt-libro-iconbtn {
  width: var(--tool-size);
  height: var(--tool-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}
.pt-libro-back { margin-left: calc(var(--space-2) * -1); }
.pt-libro-back .material-symbols-outlined { font-size: calc(var(--icon-size) + var(--space-1)); }
.pt-libro-iconbtn .material-symbols-outlined { font-size: var(--icon-size); }
.pt-libro-back:active,
.pt-libro-iconbtn:active { opacity: .6; }
.pt-libro-brand {
  justify-self: center;
  font-family: var(--font-brand);
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-brand);
  background: linear-gradient(180deg, var(--color-brand-from) 20%, var(--color-brand-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-brand-to);
}
.pt-libro-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  min-height: var(--btn-height);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}
.pt-libro-search[hidden] { display: none; }
.pt-libro-search .material-symbols-outlined { font-size: var(--icon-size-sm); color: var(--color-text-secondary); }
.pt-libro-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}
.pt-libro-search input::placeholder { color: var(--color-text-tertiary); }
.pt-libro-body { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-libro-title { margin: 0; font-size: var(--fs-greeting); font-weight: var(--fw-bold); color: var(--color-text); }
.pt-libro-sub { margin: calc(var(--space-1) * -1) 0 var(--space-1); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-secondary); }
.pt-libro-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 calc(var(--space-screen) * -1);
  padding: 0 var(--space-screen);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pt-libro-filters::-webkit-scrollbar { display: none; }
.pt-libro-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-detail);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}
.pt-libro-chip.active {
  background: var(--color-link-soft);
  border-color: var(--color-link);
  color: var(--color-link);
}
.pt-libro-filterbtn {
  margin-left: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.pt-libro-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-1); }
/* Tarjetas del módulo compartido (formato libro) con los tokens del portal */
.pt-libro-list .nl-receta-card[data-portal-libro] {
  margin: 0 !important;
  background: var(--color-surface) !important;
  border: var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.pt-libro-list .nl-libro-thumb {
  width: calc(var(--thumb-size) + var(--space-6)) !important;
  min-height: calc(var(--thumb-size) + var(--space-6)) !important;
  margin: var(--space-2) 0 var(--space-2) var(--space-2) !important;
  border: 0 !important;
  border-radius: var(--radius-thumb) !important;
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-tertiary) !important;
}
.pt-libro-list .nl-libro-thumb img { border-radius: var(--radius-thumb) !important; }
.pt-receta-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--fs-detail);
  color: var(--color-text-secondary);
}
.pt-receta-empty-list .material-symbols-outlined { font-size: calc(var(--icon-size) + var(--space-2)); color: var(--color-text-tertiary); }


/* ============================================================
   COLOR · gris casi negro con degradado a negro
   Fondo y superficies (tarjetas, sheets, modales y menú inferior)
   usan --gradient-bg / --gradient-surface en lugar del gris grafito.
   ============================================================ */
html, body, .app-shell, .loader-overlay, .error-overlay { background: var(--color-bg-end); background-image: var(--gradient-bg); }
.card,
.today-card,
.register-card,
.pt-meal-card,
.pt-distrib-card,
.pt-profile-card,
.pt-rec-card,
.pt-med-card,
.pt-diario-card,
.pt-pay-card,
.pt-seg-rev-card,
.pt-comida-card,
.pt-receta-card,
.meal-card,
.pt-compra-card,
.pt-tumenu-card,
.pt-nutri-card,
.pt-entry-card,
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal,
.pt-tour-tip,
.add-menu-sheet,
.pt-visor-sheet,
.pt-toast,
.error-card,
.pt-libro-list .nl-receta-card[data-portal-libro] {
  background-image: var(--gradient-surface) !important;
}
#nlRecetaModal .nl-receta-modal { background-image: var(--gradient-surface) !important; }
.mobile-bottom-nav { background-color: var(--color-bg-end); }
/* Las que van SIN relleno (solo borde o flotando) siguen transparentes */
.card.pt-card-outline,
.card.pt-evol-flat,
.card.pt-news-flat,
.card.pt-mc-card,
.card.pt-home-review,
.pt-tuhome-card.pt-tm,
.meal-card.pt-nutri-meal {
  background: none !important;
  background-image: none !important;
}

/* ============================================================
   NUTRICIÓN · desplegables de comidas sin tarjeta (transparentes)
   ============================================================ */
.diet-phase-review { gap: 0; }
.meal-card.pt-nutri-meal,
.meal-card.pt-nutri-meal:hover {
  border: 0 !important;
  border-bottom: var(--border-card) !important;
  border-radius: 0;
  overflow: visible;
}
.diet-phase-review .pt-nutri-meal:last-child { border-bottom: 0 !important; }
.pt-nutri-meal .meal-header { padding: var(--space-3) 0; }
.pt-nutri-meal .meal-body { padding: 0 0 var(--space-2) calc(var(--thumb-size) + var(--space-3)); border-top: 0; }
.pt-ng-item { background: none; padding: var(--space-1) 0; margin: 0; border-radius: 0; }

/* ============================================================
   CONSTRUYE TU MENÚ · flechas de plegar sin recuadro y tarjetas
   del menú creado solo con borde
   ============================================================ */
.pt-mc-card-toggle,
.pt-mc-card-toggle:hover,
.pt-mc-collapse,
.pt-mc-collapse:hover {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--color-text-secondary);
}
.pt-mc-card-toggle:active,
.pt-mc-collapse:active { opacity: .6; }
.pt-mc-resumen,
.pt-mc-slot,
.pt-tumenu-slot,
.pt-mc-slot:hover,
.pt-tumenu-slot:hover {
  background: none !important;
  background-image: none !important;
  border: var(--border-card) !important;
  box-shadow: none;
}


/* ============================================================
   NUTRICIÓN · grupos y alimentos de cada comida alineados al borde
   izquierdo (sin sangría)
   ============================================================ */
.pt-nutri-meal .meal-body { padding-left: 0; }
.pt-ng-content { padding-left: 0; }

/* ============================================================
   DETALLE DE RECETA · página (modelo de referencia)
   ============================================================ */
.pt-rp { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.pt-rp-hero {
  position: relative;
  height: calc(var(--rp-hero-h) + env(safe-area-inset-top));
  overflow: hidden;
  background: var(--color-surface-2);
}
.pt-rp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-rp-hero.sin-foto { display: flex; align-items: center; justify-content: center; }
.pt-rp-hero.sin-foto > .material-symbols-outlined { font-size: calc(var(--icon-size) * 3); color: var(--color-text-tertiary); }
.pt-rp-back {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--space-4));
  left: var(--space-4);
  width: calc(var(--tool-size) + var(--space-2));
  height: calc(var(--tool-size) + var(--space-2));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-overlay);
  color: var(--color-text);
  cursor: pointer;
}
.pt-rp-back .material-symbols-outlined { font-size: calc(var(--icon-size) + var(--space-1)); }
.pt-rp-back:active { opacity: .6; }
/* El contenido monta sobre la foto con las esquinas superiores redondeadas */
.pt-rp-body {
  position: relative;
  margin-top: calc(var(--radius-card) * -1);
  padding: var(--space-5) var(--space-screen) 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-bg);
}
.pt-rp-title { margin: 0; font-size: var(--fs-greeting-home); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-text); }
.pt-rp-sub { margin: var(--space-2) 0 0; font-size: var(--fs-detail); line-height: var(--lh-normal); color: var(--color-text-secondary); }
.pt-rp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.pt-rp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.pt-rp-chip.tipo { background: var(--color-link-soft); border-color: var(--color-link); color: var(--color-link); }
.pt-rp-chip .material-symbols-outlined { font-size: var(--fs-detail); }
.pt-rp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.pt-rp-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border: var(--border-card);
  border-radius: var(--radius-thumb);
}
.pt-rp-stat > .material-symbols-outlined { flex-shrink: 0; font-size: var(--icon-size-sm); color: var(--stat-accent); }
.pt-rp-stat-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-rp-stat-txt b { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; }
.pt-rp-stat-txt em { font-style: normal; font-size: var(--fs-micro); color: var(--color-text-secondary); white-space: nowrap; }
.pt-rp-h { margin: var(--space-6) 0 var(--space-2); }
.pt-rp-ing { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: var(--border-card); }
.pt-rp-ing:last-child { border-bottom: 0; }
.pt-rp-ing-name { font-size: var(--fs-body); color: var(--color-text); }
.pt-rp-ing-amt { font-size: var(--fs-small); color: var(--color-text-secondary); }
.pt-rp-pasos { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.pt-rp-paso { display: flex; align-items: flex-start; gap: var(--space-3); }
.pt-rp-paso-num {
  width: calc(var(--icon-size) + var(--space-1));
  height: calc(var(--icon-size) + var(--space-1));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 50%;
  font-size: var(--fs-small);
  color: var(--color-text);
}
.pt-rp-paso-txt { margin: 0; padding-top: 2px; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); }


/* ============================================================
   PANTALLA DE CARGA · vídeo de fondo tras el logotipo
   ============================================================ */
.loader-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.loader-bg .pt-inicio-bg-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   LISTA DE LA COMPRA · flotante (sin tarjetas) y plegable
   ============================================================ */
.pt-compra-card.pt-compra-flat {
  padding: 0;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.pt-compra-flat .pt-compra-head {
  padding: 0 0 var(--space-3);
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.pt-compra-flat .pt-compra-item,
.pt-compra-flat .pt-compra-item:hover {
  padding: var(--space-2) 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: var(--border-card);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.pt-compra-flat .pt-compra-group .pt-compra-item:last-child { border-bottom: 0; }
.pt-compra-flat .pt-compra-qty { background: none; border: 0; padding: 0; color: var(--color-text-secondary); }
.pt-compra-flat .pt-compra-hint { background: none; border: 0; padding-left: 0; padding-right: 0; }
/* Plegada: solo queda la cabecera con el contador */
.pt-compra-flat.collapsed .pt-compra-groups,
.pt-compra-flat.collapsed .pt-compra-hint { display: none; }
.pt-compra-flat.collapsed .pt-compra-head { padding-bottom: 0; }


/* ============================================================
   PROGRESO · secciones flotantes (sin tarjeta exterior)
   Fotos de progreso, registro de comidas, check-in diario, revisiones
   e historial de objetivos.
   ============================================================ */
.card.pt-flat,
.card.pt-flat:hover {
  padding: 0;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* Revisiones: se conserva la tarjeta interior de cada consulta */
.pt-seg-revs.pt-flat { display: flex; flex-direction: column; gap: var(--space-2); }
/* Historial de objetivos: días sin tarjeta, separados por una línea */
.pt-seg-objhist.pt-flat .pt-diario-todo-item {
  padding: var(--space-3) 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: var(--border-card);
  border-radius: 0;
  box-shadow: none;
}
.pt-seg-objhist.pt-flat .pt-diario-todo-item:first-child { padding-top: 0; }
.pt-seg-objhist.pt-flat .pt-diario-todo-item:last-child { border-bottom: 0; padding-bottom: 0; }

/* ============================================================
   PROGRESO · Objetivos de hoy: solo el porcentaje, centrado en el anillo
   ============================================================ */
.pt-goals-ring-center { gap: 0; }
.pt-goals-ring-pct { font-size: var(--fs-greeting-home); line-height: 1; }

/* ============================================================
   PROGRESO · Medidas corporales (nuevo diseño)
   Una fila por medida, sin tarjeta: a la izquierda el nombre y su
   variación; a la derecha el valor actual en grande.
   ============================================================ */
.pt-seg-measures { display: flex; flex-direction: column; gap: 0; }
.pt-seg-measure.pt-md {
  display: flex;
  flex-direction: row;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: var(--border-card);
  border-radius: 0;
  box-shadow: none;
}
.pt-seg-measure.pt-md:first-child { padding-top: 0; }
.pt-seg-measure.pt-md:last-child { border-bottom: 0; padding-bottom: 0; }
.pt-md-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.pt-md-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pt-md-delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.pt-md-delta .material-symbols-outlined { font-size: var(--icon-size-sm); }
.pt-md-value {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--fs-greeting-home);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.pt-md-unit { margin-left: var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-text-secondary); }


/* ============================================================
   CONSULTAS · botón "Añadir al calendario" en los detalles
   ============================================================ */
.pt-cal-btn { margin: var(--space-4) 0 var(--space-2); gap: var(--space-2); }


/* ============================================================
   ARRANQUE LIMPIO · velo de carga sobre el vídeo y entrada del contenido
   (las reglas críticas van además en línea en portal-cliente.html)
   ============================================================ */
.loader-overlay {
  background: var(--loader-veil);
  background-image: radial-gradient(120% 80% at 50% 50%, var(--loader-veil) 0%, var(--color-bg-end) 100%);
  transition: opacity 0.7s var(--ease), visibility 0.7s ease;
}
.screen-content,
.mobile-bottom-nav,
.pt-fab { transition: opacity 0.6s var(--ease); }
.mobile-bottom-nav { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

/* Fondos de vídeo: invisibles hasta que se reproducen; entonces, fundido */
.pt-inicio-bg-video { opacity: 0; transition: opacity 0.9s ease; }
.pt-inicio-bg-video.is-playing { opacity: 1; }
.pt-inicio-bg.pt-bg-fallback,
.loader-bg.pt-bg-fallback { background-image: var(--bg-image-fallback); background-size: cover; background-position: center; }
@media (prefers-reduced-motion: reduce) {
  .pt-inicio-bg-video { transition: none; }
}

/* ============================================================
   ANIMACIONES SUAVES (aspecto premium)
   · entrada escalonada de los bloques al abrir una pestaña
   · pulsación con leve encogido en todo lo que se puede tocar
   · barras y anillos que se llenan al aparecer
   · desplegables que se abren con fundido
   Todo se desactiva con "reducir movimiento" del sistema.
   ============================================================ */
/* La pestaña ya no entra en bloque: lo hacen sus secciones, una tras otra */
.screen.active { animation: none; }
@keyframes pt-enter {
  from { opacity: 0; transform: translateY(var(--enter-shift)); }
  to { opacity: 1; transform: none; }
}
.pt-enter,
.screen.active .pt-enter,
.screen.active .card.pt-enter,
.screen.active .card.pt-reveal.pt-enter {
  animation: pt-enter var(--dur-enter) var(--ease) both;
  animation-delay: calc(var(--pt-enter-i, 0) * var(--enter-step));
}

/* Pulsación */
.card[data-action],
.btn-primary,
.btn-secondary,
.pt-tm-head,
.pt-nutri-meal .meal-header,
.pt-ng-head,
.pt-libro-entry,
.pt-sol-item[data-action],
.pt-range-chip,
.pt-quality-chip,
.pt-plan-chip,
.pt-libro-chip,
.pt-tumenu-chip,
.pt-mc-tab,
.pt-mc-opt,
.pt-ver-todo,
.pt-brand-avatar,
.pt-libro-list .nl-receta-card,
.pt-seg-rev-card,
.add-menu-opt {
  transition:
    transform 0.28s var(--ease),
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    color var(--dur) ease,
    opacity var(--dur) ease;
  -webkit-tap-highlight-color: transparent;
}
.card[data-action]:active,
.btn-primary:active,
.btn-secondary:active,
.pt-tm-head:active,
.pt-nutri-meal .meal-header:active,
.pt-ng-head:active,
.pt-libro-entry:active,
.pt-sol-item[data-action]:active,
.pt-range-chip:active,
.pt-quality-chip:active,
.pt-plan-chip:active,
.pt-libro-chip:active,
.pt-tumenu-chip:active,
.pt-mc-tab:active,
.pt-mc-opt:active,
.pt-brand-avatar:active,
.pt-libro-list .nl-receta-card:active,
.pt-seg-rev-card:active,
.add-menu-opt:active { transform: scale(var(--press-scale)); }

/* Menú inferior: el icono activo cambia con suavidad */
.nav-pill,
.nav-pill .material-symbols-outlined,
.nav-pill .nav-label { transition: color 0.3s ease, font-variation-settings 0.3s ease, transform 0.28s var(--ease); }
.nav-pill:active { transform: scale(0.92); }
.nav-plus-svg { transition: transform 0.4s var(--ease), fill 0.3s ease; }

/* Barras que se llenan al aparecer */
@keyframes pt-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress-bar-fill,
.pt-goal-row-bar > div,
.pt-compra-bar > span,
.pt-mc-objetivo-bar > span {
  transform-origin: left center;
  animation: pt-bar-in 0.9s var(--ease) 0.15s both;
  transition: width 0.5s var(--ease);
}
/* Anillos que se dibujan al aparecer (hasta el valor que marca el propio SVG) */
@keyframes pt-ring-in { from { stroke-dashoffset: 195; } }
.pt-tm-ring-fg { animation: pt-ring-in 1.1s var(--ease) 0.15s both; }
.pt-goals-ring-fg { transition: stroke-dashoffset 0.6s var(--ease); }
@keyframes pt-seg-in { from { opacity: 0; } to { opacity: 1; } }
.pt-obj-ring-seg { animation: pt-seg-in 0.6s ease both; }
.pt-obj-ring-seg:nth-of-type(3) { animation-delay: 0.12s; }
.pt-obj-ring-seg:nth-of-type(4) { animation-delay: 0.24s; }

/* Desplegables: el contenido aparece con fundido y un pequeño descenso */
@keyframes pt-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.pt-nutri-meal .meal-body,
.pt-ng-content,
.pt-mc-opts,
.pt-compra-groups,
#tuMenuLoaded > *,
#recetasList > * { animation: pt-drop-in 0.4s var(--ease) both; }
#recetasList > *:nth-child(2) { animation-delay: 0.05s; }
#recetasList > *:nth-child(3) { animation-delay: 0.10s; }
#recetasList > *:nth-child(4) { animation-delay: 0.15s; }
#recetasList > *:nth-child(n+5) { animation-delay: 0.20s; }
/* Página de receta: la foto y el cuerpo entran con suavidad */
@keyframes pt-hero-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.pt-rp-hero img { animation: pt-hero-in 0.8s var(--ease) both; }
.pt-rp-body > * { animation: pt-enter 0.6s var(--ease) both; }
.pt-rp-body > *:nth-child(2) { animation-delay: 0.05s; }
.pt-rp-body > *:nth-child(3) { animation-delay: 0.10s; }
.pt-rp-body > *:nth-child(4) { animation-delay: 0.15s; }
.pt-rp-body > *:nth-child(n+5) { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
  .pt-enter,
  .progress-bar-fill,
  .pt-goal-row-bar > div,
  .pt-compra-bar > span,
  .pt-mc-objetivo-bar > span,
  .pt-tm-ring-fg,
  .pt-obj-ring-seg,
  .pt-nutri-meal .meal-body,
  .pt-ng-content,
  .pt-mc-opts,
  .pt-compra-groups,
  #tuMenuLoaded > *,
  #recetasList > *,
  .pt-rp-hero img,
  .pt-rp-body > * { animation: none; }
}


/* ============================================================
   RECOMENDACIONES · la mitad de texto de cada tarjeta va sobre un
   degradado NEGRO (antes, gris oscuro plano)
   ============================================================ */
.pt-reco-card {
  background: var(--color-bg-end);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.pt-reco-info { background: var(--gradient-reco); }
/* Las fotos se pintan nítidas (sin suavizado extra al escalar) */
.pt-reco-photo img,
.pt-libro-list .nl-libro-thumb img,
.pt-rp-hero img { image-rendering: auto; }


/* Fondos aleatorios de Nutrición y Progreso: el cambio de imagen se funde */
.pt-bg-dieta,
.pt-bg-seguimiento { transition: background-image 0.6s ease; }


/* ============================================================
   MODALES Y SHEETS · estilo de FICHA (no una pila de tarjetas)
   Superficie única con un filo plateado arriba, cabecera sobria en
   mayúsculas espaciadas, y el contenido como lista editorial: dato
   principal en grande y el resto en filas separadas por líneas finas,
   sin recuadros dentro del modal.
   ============================================================ */
.bottom-sheet-overlay,
.pt-chat-overlay,
.pt-consulta-overlay,
.pt-visor-overlay {
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal,
.pt-visor-sheet,
.add-menu-sheet {
  position: relative;
  border: 0 !important;
  border-top: var(--border-width) solid var(--color-border-strong) !important;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}
/* Filo de luz plateado en el borde superior */
.bottom-sheet::before,
.pt-chat-sheet::before,
.pt-consulta-modal::before,
.add-menu-sheet::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand-to), transparent);
  opacity: .7;
  pointer-events: none;
}
.bottom-sheet { padding: var(--space-3) var(--space-6) calc(env(safe-area-inset-bottom) + var(--space-6)); }
.sheet-handle,
.add-menu-handle,
.pt-consulta-grip {
  width: 36px;
  height: 3px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}
/* Cabecera: título pequeño en mayúsculas muy espaciadas + cerrar discreto */
.sheet-header {
  align-items: center;
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-4);
  border-bottom: var(--border-card);
}
.sheet-title,
.pt-chat-sheet-title,
.pt-consulta-title,
.pt-visor-title,
.add-menu-title {
  font-size: var(--fs-sheet-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-sheet);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.sheet-close,
.pt-chat-sheet-close,
.pt-consulta-close,
.pt-visor-close {
  width: var(--tool-size);
  height: var(--tool-size);
  border-radius: 50%;
  background: none;
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text-secondary);
  box-shadow: none;
}
.sheet-close .material-symbols-outlined,
.pt-chat-sheet-close .material-symbols-outlined,
.pt-consulta-close .material-symbols-outlined,
.pt-visor-close .material-symbols-outlined { font-size: var(--icon-size-sm); }
.sheet-close:active,
.pt-chat-sheet-close:active,
.pt-consulta-close:active { background: var(--color-surface-2); transform: scale(.94); }
.pt-chat-sheet-head { background: none; border-bottom: var(--border-card); padding: var(--space-5) var(--space-5) var(--space-4); }
.pt-sheet-sub,
.pt-chat-sheet-sub { margin: 0 0 var(--space-5); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-secondary); }

/* Campos y etiquetas dentro de los sheets */
.sheet-label {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.sheet-body > .sheet-label:first-child { margin-top: 0; }
.bottom-sheet .pt-input,
.bottom-sheet .date-input,
.bottom-sheet .pt-textarea {
  min-height: var(--btn-height);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  background: none;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
}
.bottom-sheet .weight-input-wrap { background: none; border: 0; border-bottom: var(--border-width) solid var(--color-border-strong); border-radius: 0; }
.bottom-sheet .weight-input { background: none; border: 0; box-shadow: none; }
/* Acciones al pie: el botón secundario es una acción discreta, sin relleno */
.bottom-sheet .btn-secondary,
.add-menu-cancel {
  background: none;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-secondary);
}
.bottom-sheet .btn-primary { margin-top: var(--space-5); }

/* ---------- FICHA de detalle (próxima consulta · solicitud) ---------- */
.pt-dl { display: flex; flex-direction: column; }
.pt-dl-hero { padding: var(--space-1) 0 var(--space-5); }
.pt-dl-eyebrow {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-sheet);
  text-transform: uppercase;
  color: var(--color-link);
}
.pt-dl-date {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.pt-dl-date::first-letter { text-transform: uppercase; }
.pt-dl-time {
  margin: var(--space-2) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.pt-dl-time span { font-size: var(--fs-detail); font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.pt-dl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.pt-dl-chip .material-symbols-outlined { font-size: var(--fs-body); }
.pt-dl-chip.ok { border-color: var(--color-link); color: var(--color-link); background: var(--color-link-soft); }
.pt-dl-chip.pendiente { border-color: var(--color-accent-carbs); color: var(--color-accent-carbs); }
.pt-dl-chip.no { border-color: var(--color-danger); color: var(--color-danger); }
.pt-dl-note { margin: var(--space-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-secondary); }
.pt-dl-list { margin: 0; border-top: var(--border-card); }
.pt-dl-row {
  display: grid;
  grid-template-columns: 7.2em 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--border-card);
}
.pt-dl-row dt {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.pt-dl-row dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); word-break: break-word; }
.pt-dl-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.pt-dl-actions .btn-primary,
.pt-dl-actions .pt-cal-btn { margin: 0; }

/* ---------- Listas dentro de sheets: filas con línea fina, sin recuadros ---------- */
.pt-review-row,
.pt-info-item,
.bottom-sheet .pt-diario-todo-item,
.bottom-sheet .pt-seg-rev-card,
.add-menu-opt {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: var(--border-card) !important;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: var(--space-4) 0;
}
.pt-review-detail,
.pt-info-list,
.add-menu-list { gap: 0; }
.pt-info-list > :last-child,
.add-menu-list > :last-child,
.bottom-sheet .sheet-body > .pt-diario-todo-item:last-child { border-bottom: 0 !important; }
/* Iconos de fila: de línea, sin caja */
.pt-review-row-icon,
.pt-info-item-icon,
.pt-notif-icon,
.add-menu-bubble,
.pt-sol-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  background: none !important;
  background-image: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text-secondary);
}
.pt-review-row-icon .material-symbols-outlined,
.pt-info-item-icon .material-symbols-outlined,
.pt-notif-icon .material-symbols-outlined,
.add-menu-bubble .material-symbols-outlined { font-size: var(--icon-size); color: var(--color-text-secondary); }
.pt-notif-item.unread .pt-notif-icon .material-symbols-outlined { color: var(--color-link); }
.pt-info-item p { font-size: var(--fs-detail); line-height: 1.6; color: var(--color-text-secondary); }
.pt-info-item p b { color: var(--color-text); font-weight: var(--fw-semibold); }
.add-menu-name { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.add-menu-sub { color: var(--color-text-secondary); }
.pt-review-pending {
  padding: 0 0 var(--space-3);
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: var(--fw-medium);
}
/* Instrucciones: pasos numerados finos, sin línea vertical */
.pt-timeline-line { display: none; }
.pt-step { gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-card); }
.pt-step:last-child { border-bottom: 0; }
.pt-step-num {
  width: var(--icon-size);
  height: var(--icon-size);
  background: none;
  border: var(--border-width) solid var(--color-border-strong);
  box-shadow: none;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.pt-step-text { font-size: var(--fs-detail); line-height: 1.55; color: var(--color-text); }
/* Notas al pie de los sheets: texto, no caja */
.bottom-sheet .pt-note { background: none; border: 0; border-top: var(--border-card); border-radius: 0; padding: var(--space-4) 0 0; margin-top: var(--space-4); color: var(--color-text-secondary); }
.bottom-sheet .pt-note .material-symbols-outlined { color: var(--color-link); }
/* Perfil: acciones como filas */
.pt-perfil-sheet-head { border-bottom: var(--border-card); }
.pt-perfil-item {
  background: none !important;
  border: 0 !important;
  border-bottom: var(--border-card) !important;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-4) 0;
}
.pt-perfil-sheet-actions > :last-child { border-bottom: 0 !important; }


/* ============================================================
   FUNCIONES AÑADIDAS · racha, semana, compra, comidas hechas,
   favoritas, compartir, modo cocina, meta de peso y buscadores
   ============================================================ */
/* Racha de objetivos */
.pt-racha { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--color-text-secondary); }
.pt-racha .material-symbols-outlined { font-size: var(--icon-size-sm); color: var(--color-accent-carbs); }
.pt-racha b { color: var(--color-text); font-weight: var(--fw-semibold); }
/* Tu semana */
/* Lista de la compra: selector de días */
.pt-compra-dias { margin: 0 0 var(--space-3); }
/* Comidas hechas */
.pt-tm-hechas { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--color-text-secondary); }
.pt-tm-hechas .material-symbols-outlined { font-size: var(--icon-size-sm); color: var(--color-link); }
.pt-tm-hechas b { color: var(--color-text); font-weight: var(--fw-semibold); }
.pt-tm-check {
  width: var(--tm-ico-size);
  height: var(--tm-ico-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, transform 0.28s var(--ease);
}
.pt-tm-check .material-symbols-outlined { font-size: var(--icon-size-sm); }
.pt-tm-check:active { transform: scale(0.88); }
.pt-tm-check.on { background: var(--color-link); border-color: var(--color-link); color: var(--color-bg); }
.pt-tm-meal.hecha .pt-tm-name { color: var(--color-text-secondary); text-decoration: line-through; }
/* Favoritas */
.pt-libro-list .nl-receta-card[data-portal-libro] { position: relative; }
.pt-fav-btn {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: var(--tool-size);
  height: var(--tool-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-overlay);
  color: var(--color-text);
  cursor: pointer;
}
.pt-fav-btn .material-symbols-outlined { font-size: var(--icon-size-sm); }
.pt-fav-btn.on .material-symbols-outlined,
.pt-rp-fav.on .material-symbols-outlined { color: var(--color-accent-fat); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
/* Página de receta: favorita y compartir */
.pt-rp-tools { position: absolute; top: calc(env(safe-area-inset-top) + var(--space-4)); right: var(--space-4); display: flex; gap: var(--space-2); }
.pt-rp-tools .pt-rp-back { position: static; }
.pt-rp-tools .pt-rp-back .material-symbols-outlined { font-size: var(--icon-size); }
.pt-rp-h.pt-section-head { margin: var(--space-6) 0 var(--space-2); }
.pt-rp-h.pt-section-head .pt-ver-todo { font-size: var(--fs-detail); gap: var(--space-2); }
/* Modo cocina */
.pt-cocina {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + var(--space-5)) var(--space-6) calc(env(safe-area-inset-bottom) + var(--space-6));
  background: var(--color-bg-end);
  background-image: var(--gradient-bg);
  opacity: 0;
  transition: opacity var(--dur) ease;
}
.pt-cocina.visible { opacity: 1; }
.pt-cocina-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pt-cocina-titulo { min-width: 0; font-size: var(--fs-sheet-title); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-sheet); text-transform: uppercase; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-cocina-barra { height: 2px; margin-top: var(--space-5); border-radius: var(--radius-pill); background: var(--color-track); overflow: hidden; }
.pt-cocina-barra span { display: block; height: 100%; background: var(--color-link); transition: width 0.4s var(--ease); }
.pt-cocina-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); overflow-y: auto; }
.pt-cocina-num { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-link); }
.pt-cocina-texto { margin: 0; font-size: clamp(22px, 6.4vw, 30px); font-weight: var(--fw-medium); line-height: 1.35; color: var(--color-text); }
.pt-cocina-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pt-cocina-nav button { gap: var(--space-2); }
.pt-cocina-nav button:disabled { opacity: .35; }
/* Meta de peso */
.pt-meta-peso { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.pt-meta-peso > .material-symbols-outlined { flex-shrink: 0; font-size: var(--icon-size-sm); color: var(--color-text-tertiary); }
.pt-meta-peso-txt { flex: 1; min-width: 0; }
.pt-meta-peso-txt b { color: var(--color-text); font-weight: var(--fw-semibold); }
.pt-meta-peso .pt-ver-todo { font-size: var(--fs-small); }
/* Buscadores */
.pt-buscador { margin-bottom: var(--space-3); min-height: calc(var(--btn-height) - var(--space-1)); }
.pt-chat-head-tools { display: flex; align-items: center; gap: var(--space-2); }
.pt-chat-buscador { margin: var(--space-3) var(--space-5) 0; }
.pt-chat-mensajes.buscando .pt-chat-dia { display: none; }

/* Buscadores: sin el aspa nativa del navegador */
#newsSearch::-webkit-search-cancel-button, #chatSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Botón central: al abrir el menú, el "+" gira 45º y queda como una "×" */
.nav-plus-svg { transform-origin: 50% 50%; transition: transform var(--dur-plus-giro, 0.3s) var(--ease, ease), fill 0.3s ease; }
.nav-plus-btn.is-open .nav-plus-svg,
.nav-plus-btn.is-open:hover .nav-plus-svg,
.nav-plus-btn.is-open:active .nav-plus-svg { transform: rotate(45deg); }

/* Chat: marcador de mensajes nuevos (línea con etiqueta centrada) */
.pt-chat-nuevos { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; color: var(--color-chat-nuevos, #60A5FA); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.pt-chat-nuevos::before, .pt-chat-nuevos::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.pt-chat-mensajes.buscando .pt-chat-nuevos { display: none; }

/* Objetivos de hoy (Progreso): anillo y calidad de sueño en verde, como el
   resto de selectores activos */
.pt-goals-ring-fg { stroke: var(--color-link); }
.pt-quality-chip.active,
.pt-quality-chip.active:active {
  background: var(--color-link-soft);
  border-color: var(--color-link);
  color: var(--color-link);
}

/* ============================================================
   PULIDO DE MOVIMIENTO (04-oct-2026) · criterio de Emil Kowalski
   ------------------------------------------------------------
   Capa final que AJUSTA las animaciones existentes (no añade
   pantallas ni cambia lógica):
   · curvas fuertes de salida en vez de las suaves de serie;
   · pestañas (se cambian decenas de veces al día): entrada más
     corta y discreta;
   · pulsación a 160 ms; sheets que abren con curva tipo iOS y
     cierran más rápido de lo que abren;
   · el menú "+" crece desde su botón; toast sin "transition: all";
   · efectos de hover solo con ratón (en táctil se quedaban pegados);
   · foco visible con teclado.
   Para deshacer: borrar este bloque.
   ============================================================ */
:root {
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* salida fuerte para UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* sheets estilo iOS */
  --dur-press: 160ms;
  --dur-enter: 0.42s;      /* antes 0.7s: las pestañas se abren muchas veces */
  --enter-step: 40ms;      /* antes 55ms */
  --enter-shift: 8px;      /* antes 14px */
  --press-scale: 0.97;
}

/* Pulsación: respuesta inmediata (antes 0.28s) */
.card[data-action],
.btn-primary,
.btn-secondary,
.pt-tm-head,
.pt-nutri-meal .meal-header,
.pt-ng-head,
.pt-libro-entry,
.pt-sol-item[data-action],
.pt-range-chip,
.pt-quality-chip,
.pt-plan-chip,
.pt-libro-chip,
.pt-tumenu-chip,
.pt-mc-tab,
.pt-mc-opt,
.pt-ver-todo,
.pt-brand-avatar,
.pt-libro-list .nl-receta-card,
.pt-seg-rev-card,
.add-menu-opt {
  transition:
    transform var(--dur-press) var(--ease),
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    color var(--dur) ease,
    opacity var(--dur) ease;
}
/* Menú inferior: se toca constantemente → cambio rápido y encogido leve */
.nav-pill,
.nav-pill .material-symbols-outlined,
.nav-pill .nav-label {
  transition: color 0.2s ease, font-variation-settings 0.2s ease, transform var(--dur-press) var(--ease);
}
.nav-pill:active { transform: scale(0.95); }

/* Barras y anillos: se llenan igual, pero sin hacer esperar (antes 0,9–1,1 s) */
.progress-bar-fill,
.pt-goal-row-bar > div,
.pt-compra-bar > span,
.pt-mc-objetivo-bar > span { animation-duration: 0.6s; animation-delay: 0.08s; }
.pt-tm-ring-fg { animation-duration: 0.7s; animation-delay: 0.08s; }

/* Desplegables (comidas, grupos, recetas): 240 ms en vez de 400 */
.pt-nutri-meal .meal-body,
.pt-ng-content,
.pt-mc-opts,
.pt-compra-groups,
#tuMenuLoaded > *,
#recetasList > * { animation-duration: 0.24s; }
#recetasList > *:nth-child(2) { animation-delay: 0.04s; }
#recetasList > *:nth-child(3) { animation-delay: 0.08s; }
#recetasList > *:nth-child(4) { animation-delay: 0.12s; }
#recetasList > *:nth-child(n+5) { animation-delay: 0.16s; }
.pt-rp-hero img { animation-duration: 0.5s; }
.pt-rp-body > * { animation-duration: 0.4s; }

/* Sheets y modales: abren con curva tipo iOS y cierran más deprisa */
.bottom-sheet-overlay,
.pt-chat-overlay,
.pt-consulta-overlay { transition-duration: 0.2s; }
.bottom-sheet-overlay.visible,
.pt-chat-overlay.visible,
.pt-consulta-overlay.visible { transition-duration: 0.28s; }
.bottom-sheet,
.pt-chat-sheet,
.pt-consulta-modal { transition: transform 0.24s var(--ease); }
.bottom-sheet-overlay.visible .bottom-sheet,
.pt-chat-overlay.visible .pt-chat-sheet,
.pt-consulta-overlay.visible .pt-consulta-modal { transition: transform 0.44s var(--ease-drawer); }

/* Menú "+": nace del botón central, no del centro de la tarjeta */
.add-menu-sheet {
  transform-origin: 50% 100%;
  transition: transform 0.18s var(--ease), opacity 0.14s ease;
}
.add-menu.visible .add-menu-sheet { transition: transform 0.3s var(--ease), opacity 0.2s ease; }
.add-menu-backdrop { transition: opacity 0.2s ease; }

/* Toast: propiedades concretas (antes "all"); entra desde abajo y se va rápido */
.pt-toast { transition: opacity 0.18s ease, transform 0.18s var(--ease); }
.pt-toast.visible { transition: opacity 0.24s ease, transform 0.32s var(--ease); }

/* Casilla de suplementos: el latido arrancaba lento (ease-in) */
.checkbox-btn input:checked ~ .checkmark:after { animation-duration: 0.5s; animation-timing-function: var(--ease); }

/* Hover con movimiento solo con ratón: en el móvil se quedaba "pegado" tras tocar */
@media (hover: none), (pointer: coarse) {
  .pt-seg-album:hover .pt-seg-album-preview img,
  .pt-seg-folder-item:hover img,
  .pt-seg-album:hover .pt-seg-album-row .material-symbols-outlined { transform: none; }
}

/* Foco visible solo con teclado */
.screen button:focus-visible,
.screen [role="button"]:focus-visible,
.screen a:focus-visible,
#bottomNav button:focus-visible,
.bottom-sheet button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

/* Detalles de lectura: títulos sin palabras sueltas en la última línea */
.screen h1, .screen h2, .screen h3,
.pt-home-review-date, .card-title { text-wrap: balance; }

/* Reducir movimiento: se mantienen los fundidos, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .nav-pill:active,
  .add-menu-sheet,
  .add-menu.visible .add-menu-sheet { transform: none; }
  .bottom-sheet,
  .pt-chat-sheet,
  .pt-consulta-modal { transition-duration: 0.01s; }
}