/*
 * ═══════════════════════════════════════════════════════════════
 *  PORTAL DEL PACIENTE — Design System
 *  Tono: calmado, cálido, moderno, seguro
 *  Prefijo: pt-
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  /* Palette */
  --pt-teal:      #14b8a6;
  --pt-teal-dk:   #0d9488;
  --pt-teal-lt:   #ccfbf1;
  --pt-teal-bg:   #f0fdfa;
  --pt-teal-glow: rgba(20,184,166,.15);

  --pt-text:      #0f172a;
  --pt-text2:     #334155;
  --pt-sub:       #64748b;
  --pt-muted:     #94a3b8;
  --pt-border:    #e2e8f0;
  --pt-border-lt: #f1f5f9;
  --pt-bg:        #f7f8fb;
  --pt-card:      #ffffff;

  --pt-ok:        #10b981;
  --pt-warn:      #f59e0b;
  --pt-err:       #ef4444;
  --pt-blue:      #3b82f6;
  --pt-purple:    #8b5cf6;

  /* Typography */
  --pt-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pt-serif:     Georgia, 'Times New Roman', serif;
  --pt-mono:      ui-monospace, 'SF Mono', monospace;

  /* Radius */
  --pt-r:         12px;
  --pt-r-sm:      8px;
  --pt-r-lg:      18px;
  --pt-r-xl:      24px;
  --pt-r-full:    9999px;

  /* Shadows */
  --pt-shadow:    0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.02);
  --pt-shadow-md: 0 4px 16px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.03);
  --pt-shadow-lg: 0 12px 32px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.04);

  /* Transitions */
  --pt-ease:      cubic-bezier(.4,0,.2,1);
  --pt-bounce:    cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --pt-header-h:  68px;
  --pt-nav-h:     56px;
  --pt-max-w:     960px;

  /* ─── Responsive Foundation (Fase 1) ───────────────────────────
     Comparte los mismos breakpoints del sistema principal.
     Usar en portal con prefijo --pt- para mantener scope del portal.
     sm=480 · md=768 · lg=1024 · xl=1280
  */
  --pt-bp-sm: 480px;
  --pt-bp-md: 768px;
  --pt-bp-lg: 1024px;
  --pt-bp-xl: 1280px;

  /* Escala tipográfica fluida */
  --pt-fs-xs:  clamp(0.72rem, 0.68rem + 0.18vw, 0.80rem);
  --pt-fs-sm:  clamp(0.82rem, 0.78rem + 0.20vw, 0.92rem);
  --pt-fs-md:  clamp(0.92rem, 0.88rem + 0.22vw, 1.02rem);
  --pt-fs-lg:  clamp(1.05rem, 1.00rem + 0.30vw, 1.20rem);
  --pt-fs-xl:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
  --pt-fs-2xl: clamp(1.50rem, 1.30rem + 0.80vw, 1.90rem);
  --pt-fs-3xl: clamp(1.85rem, 1.50rem + 1.40vw, 2.50rem);

  /* Touch target mínimo (WCAG 2.5.5) */
  --pt-touch-min: 44px;

  /* Spacing fluido */
  --pt-pad-content: clamp(12px, 3vw, 24px);
  --pt-pad-card:    clamp(14px, 2.5vw, 22px);
}

/* ── Reset (portal-scoped) ───────────────────────────────────── */
.pt-app *, .pt-app *::before, .pt-app *::after,
.pt-standalone *, .pt-standalone *::before, .pt-standalone *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pt-app, .pt-standalone {
  font-family: var(--pt-font);
  color: var(--pt-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — Portal app shell
 * ═══════════════════════════════════════════════════════════════ */
.pt-app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pt-bg);
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED TOPBAR — Premium header + navigation
   ══════════════════════════════════════════════════════════════ */
.pt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pt-card);
  box-shadow: 0 1px 0 var(--pt-border-lt), 0 4px 20px rgba(15,23,42,.04);
}

.pt-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 1.75rem;
  height: 72px;
  gap: 1.5rem;
}

/* ── Left: Avatar + Greeting ── */
.pt-topbar-left {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  flex-shrink: 0;
}

.pt-topbar-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pt-teal), var(--pt-teal-dk));
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px var(--pt-teal-glow);
  letter-spacing: -.02em;
}

.pt-topbar-user { min-width: 0; }
.pt-topbar-greeting {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pt-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-topbar-date {
  font-size: .72rem;
  font-weight: 600;
  color: var(--pt-muted);
  line-height: 1.3;
  margin-top: 1px;
}

/* ── Center: Navigation tabs with sliding pill ── */
.pt-topbar-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0 auto;
  background: var(--pt-bg);
  border-radius: var(--pt-r);
  padding: 4px;
  position: relative;
}

/* Sliding pill indicator */
.pt-topbar-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background: var(--pt-card);
  border-radius: var(--pt-r-sm);
  box-shadow: 0 1px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform, width;
}
.pt-topbar-pill.pt-pill-ready {
  transition: transform .35s var(--pt-bounce), width .3s var(--pt-ease), opacity .2s;
}

.pt-topbar-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.25rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pt-sub);
  text-decoration: none;
  border-radius: var(--pt-r-sm);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  background: transparent;
  transition: color .25s var(--pt-ease), font-weight .15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pt-topbar-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform .3s var(--pt-bounce), color .25s var(--pt-ease);
}
.pt-topbar-tab span { line-height: 1; }

.pt-topbar-tab:hover {
  color: var(--pt-text);
}

.pt-topbar-tab.active {
  color: var(--pt-teal);
  font-weight: 700;
  background: transparent;
}
.pt-topbar-tab.active svg {
  transform: scale(1.08);
}

.pt-topbar-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pt-r-full);
  background: var(--pt-teal);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px var(--pt-teal-glow);
}

/* ── Right: Actions ── */
.pt-topbar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.pt-topbar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--pt-r-sm);
  border: 1px solid var(--pt-border);
  background: var(--pt-card);
  color: var(--pt-muted);
  cursor: pointer;
  transition: all .2s var(--pt-ease);
}
.pt-topbar-logout svg { width: 16px; height: 16px; }
.pt-topbar-logout:hover {
  color: var(--pt-err);
  border-color: rgba(239,68,68,.2);
  background: #fef2f2;
  transform: translateY(-1px);
}

/* ── Main Content Area ───────────────────────────────────────── */
.pt-main {
  flex: 1;
  width: 100%;
  max-width: var(--pt-max-w);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — Reusable across portal views
 * ═══════════════════════════════════════════════════════════════ */

/* ── Card ────────────────────────────────────────────────────── */
.pt-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border-lt);
  border-radius: var(--pt-r-lg);
  box-shadow: var(--pt-shadow);
  overflow: hidden;
}
.pt-card-pad { padding: 1.25rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.25rem;
  border-radius: var(--pt-r-sm);
  font-size: .85rem;
  font-weight: 700;
  font-family: var(--pt-font);
  cursor: pointer;
  border: none;
  transition: all .2s var(--pt-ease);
  text-decoration: none;
}
.pt-btn svg { width: 15px; height: 15px; }

.pt-btn--primary {
  background: var(--pt-teal);
  color: #fff;
  box-shadow: 0 4px 12px var(--pt-teal-glow);
}
.pt-btn--primary:hover {
  background: var(--pt-teal-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--pt-teal-glow);
}
.pt-btn--primary:active { transform: none; }

.pt-btn--outline {
  background: var(--pt-card);
  color: var(--pt-sub);
  border: 1.5px solid var(--pt-border);
}
.pt-btn--outline:hover {
  color: var(--pt-teal);
  border-color: var(--pt-teal);
  background: var(--pt-teal-bg);
}

.pt-btn--lg { height: 48px; padding: 0 1.5rem; font-size: .9rem; border-radius: var(--pt-r); }
.pt-btn--block { width: 100%; }
.pt-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Form Fields ─────────────────────────────────────────────── */
.pt-field { display: flex; flex-direction: column; gap: .35rem; }
.pt-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--pt-text2);
}
.pt-input {
  height: 44px;
  padding: 0 .85rem;
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-r-sm);
  background: var(--pt-card);
  font-size: .88rem;
  font-weight: 500;
  font-family: var(--pt-font);
  color: var(--pt-text);
  outline: none;
  transition: all .2s var(--pt-ease);
}
.pt-input:focus {
  border-color: var(--pt-teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,.1);
}
.pt-input::placeholder { color: var(--pt-muted); font-weight: 400; }
.pt-input--error { border-color: var(--pt-err); }
.pt-input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

/* ── Alerts / Banners ────────────────────────────────────────── */
.pt-alert {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: var(--pt-r-sm);
  font-size: .82rem;
  font-weight: 600;
}
.pt-alert svg { width: 16px; height: 16px; flex-shrink: 0; }
.pt-alert--success { background: #dcfce7; color: #065f46; border: 1px solid #bbf7d0; }
.pt-alert--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.pt-alert--warning { background: #fefce8; color: #854d0e; border: 1px solid #fef08a; }
.pt-alert--info    { background: var(--pt-teal-bg); color: #0f766e; border: 1px solid var(--pt-teal-lt); }

/* ── Badge / Pill ────────────────────────────────────────────── */
.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: var(--pt-r-full);
  font-size: .68rem;
  font-weight: 700;
}
.pt-pill--teal   { background: var(--pt-teal-lt); color: var(--pt-teal-dk); }

/* ── Empty State ─────────────────────────────────────────────── */
.pt-empty {
  text-align: center;
  padding: 3rem 1.5rem;
}
.pt-empty svg { width: 48px; height: 48px; color: var(--pt-muted); opacity: .3; margin: 0 auto .85rem; display: block; }
.pt-empty-title { font-size: 1rem; font-weight: 700; color: var(--pt-text); margin-bottom: .3rem; }
.pt-empty-desc  { font-size: .85rem; color: var(--pt-muted); max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* ── Loading / Spinner ───────────────────────────────────────── */
.pt-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--pt-teal-lt);
  border-top-color: var(--pt-teal);
  border-radius: 50%;
  animation: pt-spin .6s linear infinite;
  margin: 0 auto;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

/* ── Toast ────────────────────────────────────────────────────── */
.pt-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--pt-text);
  color: #fff;
  padding: .65rem 1.15rem;
  border-radius: var(--pt-r-sm);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--pt-font);
  box-shadow: var(--pt-shadow-lg);
  z-index: 9999;
  opacity: 0;
  transition: all .25s var(--pt-bounce);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.pt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Modal base ──────────────────────────────────────────────── */
.pt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--pt-ease);
}
.pt-modal-overlay.open { opacity: 1; pointer-events: auto; }

.pt-modal {
  background: var(--pt-card);
  border-radius: var(--pt-r-lg);
  width: 100%;
  max-width: min(520px, calc(100vw - 24px));
  max-height: min(85vh, 85dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--pt-shadow-lg);
  transform: scale(.96) translateY(8px);
  transition: transform .3s var(--pt-bounce);
}
.pt-modal-overlay.open .pt-modal { transform: scale(1) translateY(0); }
.pt-modal-header {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--pt-border-lt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.pt-modal-title { font-size: .95rem; font-weight: 800; color: var(--pt-text); }
.pt-modal-close {
  width: 30px;
  height: 30px;
  border-radius: var(--pt-r-sm);
  background: var(--pt-bg);
  border: none;
  color: var(--pt-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.pt-modal-close:hover { background: #fef2f2; color: var(--pt-err); }
.pt-modal-close svg { width: 14px; height: 14px; }
.pt-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pt-week-day.has .pt-week-dot { background: var(--pt-teal); box-shadow: 0 2px 8px var(--pt-teal-glow); }
.pt-week-day.has .pt-week-label { color: var(--pt-teal); }
.pt-week-day.today .pt-week-dot { border-color: var(--pt-teal); }
.pt-week-day.today .pt-week-label { color: var(--pt-text); font-weight: 800; }

/* ── Standalone pages (login, password, terms) ───────────────── */
.pt-standalone {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.pt-standalone-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border-lt);
  border-radius: var(--pt-r-xl);
  box-shadow: var(--pt-shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 2.5rem 2rem;
  position: relative;
  z-index: 1;
}

.pt-standalone-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}
.pt-standalone-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--pt-r-lg);
  background: var(--pt-teal-bg);
  border: 1px solid var(--pt-teal-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  color: var(--pt-teal);
}
.pt-standalone-logo img { width: 36px; height: 36px; object-fit: contain; }
.pt-standalone-logo svg { width: 24px; height: 24px; }
.pt-standalone-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -.02em;
}
.pt-standalone-sub {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: .25rem;
  font-weight: 500;
}

/* Subtle gradient accent behind standalone cards */
.pt-standalone::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.06) 0%, transparent 70%);
  top: -150px;
  right: -100px;
  pointer-events: none;
}
.pt-standalone::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.04) 0%, transparent 70%);
  bottom: -120px;
  left: -80px;
  pointer-events: none;
}
.pt-pgbtn.active { background: var(--pt-teal); color: #fff; border-color: var(--pt-teal); }

/* ═══════════════════════════════════════════════════════════════
   SESSION EXPIRY MODAL
 * ═══════════════════════════════════════════════════════════════ */
.pt-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--pt-ease);
}
.pt-session-overlay.pt-session-show {
  opacity: 1;
  pointer-events: auto;
}
.pt-session-modal {
  background: var(--pt-card);
  border-radius: var(--pt-r-xl);
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--pt-shadow-lg);
  transform: scale(.94) translateY(12px);
  transition: transform .4s var(--pt-bounce);
}
.pt-session-show .pt-session-modal {
  transform: scale(1) translateY(0);
}
.pt-session-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fef3c7;
  border: 2px solid #fde68a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.pt-session-icon svg {
  width: 32px;
  height: 32px;
  color: #d97706;
}
.pt-session-expired .pt-session-icon {
  background: #fef2f2;
  border-color: #fecaca;
}
.pt-session-expired .pt-session-icon svg {
  color: var(--pt-err);
}
.pt-session-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pt-text);
  margin-bottom: .5rem;
}
.pt-session-msg {
  font-size: .88rem;
  color: var(--pt-sub);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.pt-session-msg strong {
  color: var(--pt-text);
  font-weight: 800;
  font-size: 1.05rem;
}
.pt-session-actions {
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .pt-session-modal { padding: 2rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
 * ═══════════════════════════════════════════════════════════════ */
@keyframes pt-fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-slideUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pt-scaleIn  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.pt-animate-in  { animation: pt-slideUp .35s var(--pt-ease) both; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */
/* ── Tab press feedback (all screens) ── */
.pt-topbar-tab {
  position: relative;
}
.pt-topbar-tab:active {
  transform: scale(.94);
  transition: transform .1s;
}
.pt-topbar-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pt-teal);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.pt-topbar-tab:active::after { opacity: .06; }

/* ── Standalone pages: always centered ── */
.pt-standalone {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Portal mobile + iPad portrait: bottom tab bar, date oculto */
@media (max-width: 1023.98px) {
  /* FIX 1: Header — logout stays right-aligned */
  .pt-topbar-inner {
    height: 60px; padding: 0 .85rem; gap: .65rem;
    display: flex; align-items: center; justify-content: space-between;
  }
  .pt-topbar-left { flex: 1; min-width: 0; }
  .pt-topbar-avatar { width: 36px; height: 36px; font-size: .82rem; }
  .pt-topbar-greeting { font-size: .88rem; }
  .pt-topbar-date { display: none; }
  .pt-topbar-right { flex-shrink: 0; }
  .pt-topbar-logout { width: 36px; height: 36px; }

  /* FIX 4: Nav becomes animated bottom tab bar */
  .pt-topbar-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    border-radius: 0;
    background: var(--pt-card);
    border-top: 1px solid var(--pt-border);
    box-shadow: 0 -4px 16px rgba(15,23,42,.06);
    padding: .35rem .5rem;
    margin: 0;
    gap: .25rem;
    animation: ptNavSlideUp .4s var(--pt-ease) both;
  }
  @keyframes ptNavSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  /* Mobile pill adjustments */
  .pt-topbar-pill {
    top: .35rem;
    height: calc(100% - .7rem);
    background: var(--pt-teal-bg);
    box-shadow: none;
  }

  .pt-topbar-tab {
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem .25rem;
    font-size: .62rem;
    border-radius: var(--pt-r-sm);
    transition: color .25s var(--pt-ease);
  }
  .pt-topbar-tab svg {
    width: 20px; height: 20px;
    transition: transform .3s var(--pt-bounce), color .25s var(--pt-ease);
  }
  .pt-topbar-tab.active svg { transform: scale(1.15); }
  .pt-topbar-tab.active {
    background: transparent;
    color: var(--pt-teal);
    box-shadow: none;
  }
  .pt-topbar-badge {
    position: absolute; top: 2px; right: max(.4rem, calc(50% - 22px));
    min-width: 16px; height: 16px; font-size: .55rem;
  }

  .pt-main { padding: 1rem .85rem calc(var(--pt-nav-h) + 1rem); }

  /* FIX 2: Standalone card centered properly */
  .pt-standalone { padding: 1rem; align-items: center; }
  .pt-standalone-card {
    padding: 2rem 1.25rem;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .pt-stats { flex-wrap: wrap; }
  .pt-stat { min-width: calc(50% - .25rem); }
}

@media (max-width: 380px) {
  .pt-main { padding: .75rem .65rem calc(var(--pt-nav-h) + .75rem); }
  .pt-standalone-card { padding: 1.5rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Notes pagination, validation, etc.
 * ═══════════════════════════════════════════════════════════════ */

/* Hidden notes (show-more) */
.db-note-hidden {
  display: none !important;
}

/* "Ver mas" button */
.db-notes-more {
  max-width: 1100px;
  margin: 1.5rem auto 0;
  text-align: center;
}
.db-notes-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  background: var(--pt-card);
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-r-full);
  color: var(--pt-sub);
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--pt-font);
  cursor: pointer;
  transition: all .25s var(--pt-ease);
  box-shadow: var(--pt-shadow);
}
.db-notes-more-btn:hover {
  border-color: var(--pt-teal);
  color: var(--pt-teal);
  background: var(--pt-teal-bg);
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-md);
}
.db-notes-more-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--pt-ease);
}
.db-notes-more-btn:hover svg {
  transform: translateY(2px);
}
.db-notes-more-count {
  font-size: .68rem;
  font-weight: 800;
  background: var(--pt-border-lt);
  color: var(--pt-muted);
  padding: .15rem .5rem;
  border-radius: var(--pt-r-full);
}

/* Modal validation errors */
.db-val-error {
  font-size: .75rem;
  font-weight: 700;
  color: var(--pt-err);
  padding: .4rem 0 0;
  display: flex;
  align-items: center;
  gap: .3rem;
  animation: pt-slideUp .2s var(--pt-ease) both;
}
.db-val-error::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pt-err);
  flex-shrink: 0;
}

/* Emoji grid error state */
.db-emo-grid--error {
  border: 2px solid rgba(239,68,68,.3);
  border-radius: var(--pt-r);
  padding: .5rem;
  background: rgba(239,68,68,.02);
}

/* Writing area error state */
.db-writing-area--error {
  border-color: var(--pt-err) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.08) !important;
}

/* ── Password page — top on desktop, centered on mobile ────── */
.pwd-page {
  display: flex;
  justify-content: center;
  /* El bloque está capado a max-width (1100px vía regla global). Sin
     margin auto quedaba pegado a la izquierda del área de contenido y el
     card aparecía descentrado. Centramos el bloque para que el card quede
     al centro real de la pantalla. */
  margin-inline: auto;
  width: 100%;
  padding-top: 2rem;
}
@media (max-width: 768px) {
  .pwd-page {
    align-items: center;
    min-height: calc(100vh - 72px - var(--pt-nav-h) - 3rem);
    padding-top: 0;
  }
}

/* ── Password form: card, títulos y campos (migrado desde blade <style>) ── */
.pwd-card      { max-width: 480px; width: 100%; }
.pwd-title     { font-size: var(--pt-fs-lg); font-weight: 800; color: var(--pt-text); margin-bottom: .35rem; }
.pwd-sub       { font-size: .82rem; color: var(--pt-muted); margin-bottom: 1.25rem; }
.pwd-alert     { margin-bottom: 1rem; }
.pwd-field     { margin-bottom: 1rem; }
.pwd-field--last { margin-bottom: 1.25rem; }

.pwd-wrap { position: relative; }

/* Input con icono de ojo (password reveal) a la derecha */
.pt-input--with-icon { width: 100%; padding-right: 2.5rem; }

.pwd-str { margin-top: .4rem; }
.pwd-bar {
  height: 4px; border-radius: 3px;
  background: var(--pt-border-lt);
  overflow: hidden; margin-bottom: .25rem;
}
.pwd-fill {
  height: 100%; border-radius: 3px; width: 0;
  transition: width .3s, background .3s;
}
.pwd-fill.s1 { background: #ef4444; width: 25%; }
.pwd-fill.s2 { background: #f97316; width: 50%; }
.pwd-fill.s3 { background: #eab308; width: 75%; }
.pwd-fill.s4 { background: #22c55e; width: 100%; }
.pwd-lbl { font-size: .68rem; font-weight: 700; color: var(--pt-muted); }

.pwd-eye {
  position: absolute; right: .65rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--pt-muted);
  padding: .35rem;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
}
.pwd-eye:hover { color: var(--pt-teal); }
.pwd-eye:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }
.pwd-eye svg { width: 16px; height: 16px; }

/* Logout compact link (usado en password standalone y terms) */
.pwd-logout-row       { margin-top: 1.25rem; text-align: center; }
.pwd-logout-row--sm   { margin-top: 1rem; }
.pwd-logout-btn {
  background: none; border: none;
  font-family: var(--pt-font);
  font-size: .78rem; font-weight: 600;
  color: var(--pt-muted);
  cursor: pointer;
  padding: .5rem 1rem;
  transition: color .15s var(--pt-ease);
}
.pwd-logout-btn:hover { color: var(--pt-text); }
.db-sk-section {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Dashboard: mood selector label ──────────────────────────── */
.db-mood-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  text-align: center;
  margin-bottom: .5rem;
}

/* ── Calm space: stage icon color variants (migrado desde inline) ── */
.calm-stage-icon--checkin    { background: #ede9fe; color: #199c82; }
.calm-stage-icon--grounding  { background: #fef3c7; color: #d97706; margin-bottom: 16px; }

.calm-grounding-intro { margin-bottom: 20px; }
.calm-grounding-list {
  max-height: min(45vh, 45dvh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 10px;
  margin-bottom: 24px;
  text-align: left;
}

/* ── Empty state ocupa toda la grid ──────────────────────────── */
.pt-empty--grid-full { grid-column: 1 / -1; }

/* ── Modifier genérico: card con separación inferior ─────────── */
.pt-card--spaced { margin-bottom: 1rem; }

/* ── Modificador de botón: tamaño compact ───────────────────── */
.pt-btn--sm {
  padding: .35rem .75rem;
  font-size: .78rem;
}

/* ── Tareas show: skeleton actions row (2 botones esqueleto) ── */
.ts-sk-actions-row {
  display: flex;
  gap: .65rem;
}

/* ── Tareas: skeleton layout (rediseño Hero + lista) ───────── */
.tk-sk-hero {
  height: 168px;
  border-radius: var(--pt-r-xl);
  margin-bottom: 1.5rem;
}
.tk-sk-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
@media (max-width: 560px) {
  .tk-sk-hero { height: 210px; }
}

/* ═══════════════════════════════════════════════════════════════
   TAREAS MODULE — Index, Show, Skeleton loading
 * ═══════════════════════════════════════════════════════════════ */

/* ── Skeleton Loading ───────────────────────────────────────── */
@keyframes tk-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.tk-skeleton {
  background: linear-gradient(90deg, var(--pt-border-lt) 25%, #e8edf2 37%, var(--pt-border-lt) 63%);
  background-size: 800px 100%;
  animation: tk-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--pt-r-sm);
}

/* Dashboard skeleton grids */
.db-sk-stats {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.db-sk-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 992px) {
  .db-sk-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
  .db-sk-notes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .db-sk-stats { grid-template-columns: 1fr; gap: 14px; }
  .db-sk-stats .tk-skeleton { height: 140px !important; border-radius: 20px !important; }
  .db-sk-notes .tk-skeleton { height: 200px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TAREAS · ÍNDICE — Rediseño "Hero + lista enfocada"
 * ═══════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.tk-hero2 {
  position: relative;
  overflow: hidden;
  border-radius: var(--pt-r-xl);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
  color: #fff;
  box-shadow: 0 14px 34px var(--pt-teal-glow), 0 4px 12px rgba(15,23,42,.05);
}
.tk-hero2-glow {
  position: absolute;
  top: -45%;
  right: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 65%);
  pointer-events: none;
}
.tk-hero2-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.tk-hero2-intro { min-width: 0; }
.tk-hero2-eyebrow {
  display: inline-block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: .35rem;
}
.tk-hero2-title {
  font-size: clamp(1.45rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.tk-hero2-sub {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  margin-top: .4rem;
  max-width: 30rem;
}

/* Progress ring on hero */
.tk-hero2-progress {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-shrink: 0;
}
.tk-ring2 {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.tk-ring2 svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tk-ring2-track { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 5; }
.tk-ring2-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--pt-ease);
}
.tk-ring2-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}
.tk-ring2-pct small { font-size: .62rem; font-weight: 800; margin-left: 1px; opacity: .85; }
.tk-ring2-info { display: flex; flex-direction: column; gap: .15rem; }
.tk-ring2-label {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.72);
}
.tk-ring2-detail { font-size: .82rem; font-weight: 700; color: #fff; }

/* Stat pills */
.tk-hero2-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: 1.35rem;
}
.tk-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border-radius: var(--pt-r);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.tk-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.tk-pill--active   .tk-pill-dot { background: #fde68a; box-shadow: 0 0 0 3px rgba(253,230,138,.25); }
.tk-pill--progress .tk-pill-dot { background: #bfdbfe; box-shadow: 0 0 0 3px rgba(191,219,254,.25); }
.tk-pill--done     .tk-pill-dot { background: #bbf7d0; box-shadow: 0 0 0 3px rgba(187,247,208,.25); }
.tk-pill--expired  .tk-pill-dot { background: #fecaca; box-shadow: 0 0 0 3px rgba(254,202,202,.25); }
.tk-pill-num { font-size: 1.1rem; font-weight: 900; line-height: 1; color: #fff; }
.tk-pill-lbl {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.8);
  line-height: 1.1;
}

/* ── Section ────────────────────────────────────────────────── */
.tk-section { margin-bottom: 1.6rem; }
.tk-section--history { margin-top: 2rem; }
.tk-section-title {
  font-size: .72rem;
  font-weight: 800;
  color: var(--pt-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tk-section-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.tk-section-title .tk-section-icon { color: var(--pt-teal); }
.tk-section-title::after { content: ''; flex: 1; height: 1px; background: var(--pt-border); }
.tk-section-count {
  font-size: .65rem;
  font-weight: 800;
  background: var(--pt-teal-bg);
  color: var(--pt-teal-dk);
  padding: .15rem .5rem;
  border-radius: var(--pt-r-full);
  flex-shrink: 0;
}

/* ── Task list ──────────────────────────────────────────────── */
.tk-list { display: flex; flex-direction: column; gap: .75rem; }

/* ── Task item (row) ────────────────────────────────────────── */
.tk-item {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1.05rem 1.15rem 1.05rem 1.4rem;
  background: var(--pt-card);
  border: 1px solid var(--pt-border-lt);
  border-radius: var(--pt-r-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--pt-shadow);
  transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease), border-color .2s var(--pt-ease);
  overflow: hidden;
}
.tk-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: var(--pt-muted);
}
.tk-item--pending::before  { background: var(--pt-warn); }
.tk-item--urgent::before   { background: var(--pt-err); }
.tk-item--progress::before { background: var(--pt-blue); }
.tk-item--closed::before   { background: var(--pt-muted); }
.tk-item--expired::before  { background: var(--pt-err); }
.tk-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-lg);
  border-color: var(--pt-border);
}
.tk-item:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}
.tk-item--muted { opacity: .82; }
.tk-item--muted:hover { opacity: 1; }

/* Leading status node */
.tk-item-node {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pt-border-lt);
  color: var(--pt-muted);
}
.tk-item-node svg { width: 20px; height: 20px; }
.tk-item--pending  .tk-item-node { background: #fefce8; color: #b45309; }
.tk-item--urgent   .tk-item-node { background: #fef2f2; color: #dc2626; }
.tk-item--progress .tk-item-node { background: #eff6ff; color: #2563eb; }
.tk-item--closed   .tk-item-node,
.tk-item--expired  .tk-item-node { background: var(--pt-border-lt); color: var(--pt-sub); }

/* Body */
.tk-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.tk-item-head { display: flex; align-items: center; gap: .55rem; }
.tk-item-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pt-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk-item--muted .tk-item-title { color: var(--pt-text2); }
.tk-item-preview {
  font-size: .82rem;
  font-weight: 500;
  color: var(--pt-sub);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row (author + dates inline) */
.tk-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .85rem;
}
.tk-item-author {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--pt-teal-dk);
  background: var(--pt-teal-bg);
  border: 1px solid var(--pt-teal-lt);
  padding: .12rem .55rem;
  border-radius: var(--pt-r-full);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tk-item-author svg { width: 11px; height: 11px; flex-shrink: 0; }
.tk-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--pt-sub);
}
.tk-meta-item svg { width: 13px; height: 13px; color: var(--pt-teal); flex-shrink: 0; }
.tk-meta-item--warn svg { color: var(--pt-warn); }
.tk-meta-item--err { color: var(--pt-err); }
.tk-meta-item--err svg { color: var(--pt-err); }

/* Edits chip */
.tk-item-edits {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 800;
  color: var(--pt-muted);
  margin-left: auto;
}
.tk-item-edits svg { width: 12px; height: 12px; }

/* Badge */
.tk-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  border-radius: var(--pt-r-full);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.tk-badge--pending  { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }
.tk-badge--urgent   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.tk-badge--progress { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.tk-badge--expired  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.tk-badge--closed   { background: var(--pt-border-lt); color: var(--pt-sub); border: 1px solid var(--pt-border); }
.tk-badge--done     { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* CTA */
.tk-item-cta {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 42px;
  padding: 0 1.05rem;
  border-radius: var(--pt-r-sm);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease), background .2s var(--pt-ease);
}
.tk-item-cta svg { width: 15px; height: 15px; transition: transform .2s var(--pt-ease); }
.tk-item:hover .tk-item-cta svg { transform: translateX(2px); }
.tk-item-cta--primary,
.tk-item-cta--teal {
  background: linear-gradient(135deg, var(--pt-teal), var(--pt-teal-dk));
  color: #fff;
  box-shadow: 0 4px 12px var(--pt-teal-glow);
}
.tk-item:hover .tk-item-cta--primary,
.tk-item:hover .tk-item-cta--teal { box-shadow: 0 7px 18px var(--pt-teal-glow); }
.tk-item-cta--ghost {
  background: var(--pt-bg);
  color: var(--pt-sub);
  border: 1px solid var(--pt-border);
}
.tk-item:hover .tk-item-cta--ghost {
  color: var(--pt-teal-dk);
  border-color: var(--pt-teal-lt);
  background: var(--pt-teal-bg);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .tk-hero2-stats { grid-template-columns: repeat(2, 1fr); }
  .tk-hero2-progress { width: 100%; }
  .tk-item {
    flex-wrap: wrap;
    padding: 1rem 1rem 1rem 1.25rem;
  }
  .tk-item-cta {
    width: 100%;
    justify-content: center;
    height: 44px;
    margin-top: .25rem;
  }
}
@media (max-width: 380px) {
  .tk-item-node { display: none; }
}

/* ── Segmento Activas / Historial ───────────────────────────── */
.tk-segment {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  margin-bottom: 1.4rem;
  background: var(--pt-bg);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-r-full);
}
.tk-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem 1rem;
  border: none;
  background: transparent;
  border-radius: var(--pt-r-full);
  font-family: var(--pt-font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--pt-sub);
  cursor: pointer;
  transition: color .2s var(--pt-ease), background .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
}
.tk-seg-btn:hover { color: var(--pt-text2); }
.tk-seg-btn.is-active {
  background: var(--pt-card);
  color: var(--pt-teal-dk);
  box-shadow: var(--pt-shadow);
}
.tk-seg-btn:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}
.tk-seg-count {
  font-size: .68rem;
  font-weight: 800;
  background: var(--pt-border-lt);
  color: var(--pt-sub);
  padding: .05rem .45rem;
  border-radius: var(--pt-r-full);
  transition: color .2s var(--pt-ease), background .2s var(--pt-ease);
}
.tk-seg-btn.is-active .tk-seg-count {
  background: var(--pt-teal-bg);
  color: var(--pt-teal-dk);
}

/* Panes + fade al cambiar de pestaña */
.tk-pane[hidden] { display: none !important; }
@keyframes tk-pane-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tk-pane--anim { animation: tk-pane-fade .28s var(--pt-ease) both; }

@media (max-width: 560px) {
  .tk-segment { display: flex; width: 100%; }
  .tk-seg-btn { flex: 1; justify-content: center; }
}
@media (pointer: coarse) {
  .tk-seg-btn { min-height: 44px; }
}

/* ── Show: Back link ────────────────────────────────────────── */
.ts-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pt-sub);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color .15s;
}
.ts-back:hover { color: var(--pt-teal); }
.ts-back svg { width: 14px; height: 14px; }

/* ── Show: Header ───────────────────────────────────────────── */
.ts-header { margin-bottom: 1.25rem; }
.ts-header h1 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--pt-text);
  line-height: 1.3;
  margin-bottom: .5rem;
}
.ts-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .8rem;
  color: var(--pt-sub);
  font-weight: 600;
}
.ts-meta svg { width: 13px; height: 13px; color: var(--pt-teal); flex-shrink: 0; }
.ts-meta span { display: flex; align-items: center; gap: .35rem; }

/* ── Show: Banners ──────────────────────────────────────────── */
.ts-banner {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-radius: var(--pt-r-sm);
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.ts-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.ts-banner--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ts-banner--info { background: var(--pt-teal-bg); color: #0f766e; border: 1px solid var(--pt-teal-lt); }
.ts-banner--warn { background: #fefce8; color: #92400e; border: 1px solid #fef08a; }

/* ── Show: Objective box ────────────────────────────────────── */
.ts-objective {
  background: var(--pt-teal-bg);
  border: 1px solid var(--pt-teal-lt);
  border-radius: var(--pt-r-sm);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.ts-objective-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pt-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ts-objective-icon svg { width: 16px; height: 16px; }
.ts-objective-body {
  flex: 1;
}
.ts-objective-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pt-teal-dk);
  margin-bottom: .2rem;
}
.ts-objective-text {
  font-size: .82rem;
  font-weight: 600;
  color: var(--pt-text2);
  line-height: 1.45;
}

/* ── Show: Instructions ─────────────────────────────────────── */
.ts-instructions-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pt-muted);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ts-instructions-label svg { width: 13px; height: 13px; color: var(--pt-teal); }
.ts-instructions {
  background: var(--pt-bg);
  padding: 1.25rem;
  border-radius: var(--pt-r-sm);
  border-left: 4px solid var(--pt-teal);
  font-size: .88rem;
  line-height: 1.75;
  color: var(--pt-text2);
  white-space: pre-wrap;
  margin-bottom: 1.5rem;
}

/* ── Show: Response options ─────────────────────────────────── */
.ts-option {
  background: var(--pt-bg);
  border-radius: var(--pt-r-sm);
  padding: 1.15rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pt-border-lt);
}
.ts-option-hdr {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
}
.ts-option-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.ts-option-num--a { background: var(--pt-teal); }
.ts-option-num--b { background: var(--pt-blue); }
.ts-option-title { font-size: .95rem; font-weight: 800; color: var(--pt-text); }
.ts-option-hint {
  font-size: .75rem;
  color: var(--pt-sub);
  font-weight: 500;
  margin-bottom: .65rem;
}

/* ── Show: File drop ────────────────────────────────────────── */
.ts-file-drop {
  border: 2px dashed var(--pt-border);
  border-radius: var(--pt-r-sm);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all .2s;
}
.ts-file-drop:hover {
  border-color: var(--pt-teal);
  background: var(--pt-card);
}
.ts-file-drop svg {
  width: 28px;
  height: 28px;
  color: var(--pt-muted);
  flex-shrink: 0;
  transition: color .2s;
}
.ts-file-drop:hover svg { color: var(--pt-teal); }
.ts-file-drop.has-file {
  border-style: solid;
  border-color: var(--pt-ok);
  background: #f0fdf4;
}
.ts-file-drop.has-file svg { color: var(--pt-ok); }
.ts-file-title { font-size: .88rem; font-weight: 700; color: var(--pt-text); }
.ts-file-hint { font-size: .72rem; color: var(--pt-muted); font-weight: 500; }
#fileNameDisplay {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pt-teal);
  margin-top: .35rem;
}

/* ── Show: Current attachment ───────────────────────────────── */
.ts-attach {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem;
  background: var(--pt-bg);
  border: 1px solid var(--pt-border-lt);
  border-radius: var(--pt-r-sm);
  margin-bottom: .75rem;
}
.ts-attach-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--pt-text);
}
.ts-attach-type {
  font-size: .72rem;
  color: var(--pt-muted);
}

/* ── Show: Actions ──────────────────────────────────────────── */
.ts-actions {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.ts-actions .pt-btn { flex: 1; min-width: 140px; }
.ts-actions .pt-btn--primary { flex: 2; }

/* ── Show: Edit counter ─────────────────────────────────────── */
.ts-edit-counter {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .85rem;
  padding: .6rem .85rem;
  background: var(--pt-border-lt);
  border-radius: var(--pt-r-sm);
  font-size: .75rem;
  font-weight: 600;
  color: var(--pt-sub);
}
.ts-edit-dots {
  display: flex;
  gap: .25rem;
}
.ts-edit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--pt-border);
  transition: all .2s;
}
.ts-edit-dot--used {
  background: var(--pt-teal);
  border-color: var(--pt-teal);
}
.ts-edit-dot--current {
  background: var(--pt-warn);
  border-color: var(--pt-warn);
}

/* ═══════════════════════════════════════════════════════════════
   WORKSHEET — Guided writing area (Show view)
 * ═══════════════════════════════════════════════════════════════ */
.ts-worksheet {
  border: 2px solid var(--pt-border);
  border-radius: var(--pt-r);
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--pt-card);
  transition: border-color .2s var(--pt-ease);
}
.ts-worksheet:focus-within {
  border-color: var(--pt-teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,.08);
}

/* ── Worksheet header ───────────────────────────────────────── */
.ts-worksheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--pt-border-lt);
  gap: .5rem;
}
.ts-worksheet-header-left {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.ts-worksheet-header-left .ts-option-num {
  flex-shrink: 0;
}
.ts-worksheet-title {
  font-size: .88rem;
  font-weight: 800;
  color: var(--pt-text);
  line-height: 1.2;
}
.ts-worksheet-sub {
  font-size: .7rem;
  font-weight: 500;
  color: var(--pt-muted);
  margin-top: 1px;
  line-height: 1.3;
}
.ts-worksheet-header-right svg {
  width: 16px;
  height: 16px;
  color: var(--pt-muted);
  flex-shrink: 0;
}
.ts-worksheet:focus-within .ts-worksheet-header-right svg {
  color: var(--pt-teal);
}

/* ── Worksheet body — lined paper with fixed max height ────── */
.ts-worksheet-body {
  display: flex;
  min-height: 280px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Scrollbar styling */
.ts-worksheet-body::-webkit-scrollbar {
  width: 6px;
}
.ts-worksheet-body::-webkit-scrollbar-track {
  background: var(--pt-border-lt);
}
.ts-worksheet-body::-webkit-scrollbar-thumb {
  background: var(--pt-border);
  border-radius: 3px;
}
.ts-worksheet-body::-webkit-scrollbar-thumb:hover {
  background: var(--pt-muted);
}

/* Left margin gutter (like a real notebook) */
.ts-worksheet-gutter {
  width: 44px;
  flex-shrink: 0;
  background: #fafbfc;
  border-right: 2px solid #e8d5d5;
  position: relative;
}
.ts-worksheet-gutter-line {
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
}

/* Content area with lines */
.ts-worksheet-content {
  flex: 1;
  min-width: 0;
  position: relative;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    #e8ecf1 31px,
    #e8ecf1 32px
  );
  background-position: 0 12px;
}

/* The actual textarea — auto-height via JS, parent scrolls */
.ts-worksheet-textarea {
  width: 100%;
  min-height: 280px;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: var(--pt-font);
  font-size: .92rem;
  font-weight: 500;
  line-height: 32px;
  color: var(--pt-text);
  padding: 12px 20px 16px 16px;
  overflow: hidden;
}
.ts-worksheet-textarea::placeholder {
  color: var(--pt-muted);
  font-weight: 400;
  font-style: italic;
}
.ts-worksheet-textarea[readonly] {
  color: var(--pt-sub);
  cursor: default;
}

/* ── Worksheet footer ───────────────────────────────────────── */
.ts-worksheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem;
  background: #f8fafc;
  border-top: 1px solid var(--pt-border-lt);
  gap: .5rem;
  flex-wrap: wrap;
}
.ts-worksheet-footer-left {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.ts-worksheet-footer-right {
  display: flex;
  align-items: center;
}

/* Character counter */
.ts-worksheet-counter {
  font-size: .68rem;
  font-weight: 700;
  color: var(--pt-muted);
  white-space: nowrap;
  transition: color .2s;
}
.ts-worksheet-counter--warn { color: var(--pt-warn); }
.ts-worksheet-counter--danger { color: var(--pt-err); font-weight: 800; }

/* Progress bar */
.ts-worksheet-bar {
  width: 80px;
  height: 4px;
  background: var(--pt-border-lt);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.ts-worksheet-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--pt-teal);
  border-radius: 2px;
  transition: width .15s var(--pt-ease), background .2s;
}
.ts-worksheet-bar-fill.ts-worksheet-bar--warn {
  background: var(--pt-warn);
}
.ts-worksheet-bar-fill.ts-worksheet-bar--danger {
  background: var(--pt-err);
}

/* Status pill */
.ts-worksheet-status {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: var(--pt-r-full);
  transition: all .2s var(--pt-ease);
}
.ts-worksheet-status svg {
  width: 12px;
  height: 12px;
}
.ts-worksheet-status--ready {
  color: var(--pt-teal-dk);
  background: var(--pt-teal-bg);
}
.ts-worksheet-status--locked {
  color: var(--pt-sub);
  background: var(--pt-border-lt);
}
.ts-worksheet-status--warn {
  color: var(--pt-warn);
  background: #fefce8;
}
.ts-worksheet-status--limit {
  color: var(--pt-err);
  background: #fef2f2;
}

/* Worksheet limit state — border flash */
.ts-worksheet--limit {
  border-color: var(--pt-err);
  box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}
.ts-worksheet--limit .ts-worksheet-header {
  background: #fef8f8;
}

/* ── Tareas responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .tk-hero { text-align: center; justify-content: center; flex-direction: column; gap: .75rem; }
  .tk-hero-left { text-align: center; }
  .tk-stats { grid-template-columns: repeat(2, 1fr); }
  .tk-grid { grid-template-columns: 1fr; }
  .ts-actions { flex-direction: column; }
  .ts-actions .pt-btn { width: 100%; min-width: auto; }
  .ts-meta { gap: .5rem; }
  .ts-worksheet-gutter { width: 32px; }
  .ts-worksheet-textarea { padding-left: 12px; padding-right: 12px; font-size: .88rem; }
  .ts-worksheet-sub { display: none; }
  .ts-worksheet-bar { width: 60px; }
  .ts-worksheet-footer { padding: .45rem .75rem; }
}

@media (max-width: 380px) {
  .tk-stats { grid-template-columns: 1fr 1fr; gap: .35rem; }
  .tk-stat-card { padding: .55rem; }
  .tk-stat-num { font-size: 1.15rem; }
  .ts-worksheet-gutter { width: 24px; }
  .ts-worksheet-textarea { padding-left: 10px; font-size: .85rem; line-height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Hero, Stats, Calm, Notes, Modal, Success, Breathing
 * ═══════════════════════════════════════════════════════════════ */

/* ── Welcome Message (profesional) ─────────────────────────── */
.db-welcome-msg {
  max-width: 760px; margin: 0 auto 1.5rem; padding: 0 1.25rem;
}

/* ── Hero Section ───────────────────────────────────────────── */
.db-hero {
  position: relative; padding: 3rem 1.25rem 2.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 900px; margin: 0 auto 2rem;
  animation: dbFadeIn .7s ease-out both;
}
@keyframes dbFadeIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.db-hero-eyebrow {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pt-teal); margin-bottom: 1.5rem;
  background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-r-full);
  padding: .5rem 1.25rem;
  display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.02);
}
.db-hero-quote {
  font-family: var(--pt-serif);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 600; font-style: italic; color: var(--pt-text);
  line-height: 1.3; margin-bottom: 1.25rem;
}
.db-hero-author {
  font-size: .88rem; font-weight: 500; color: var(--pt-muted);
  letter-spacing: .05em; margin-bottom: 2.5rem;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.db-hero-author::before, .db-hero-author::after {
  content: ''; display: block; width: 30px; height: 1px; background: #cbd5e1;
}
.db-hero-btn {
  background: var(--pt-text); color: #fff; border: none; border-radius: var(--pt-r-full);
  padding: 1rem 2.25rem; font-weight: 700; font-size: 1.02rem; font-family: var(--pt-font);
  cursor: pointer; box-shadow: 0 10px 25px rgba(15,23,42,.25);
  transition: all .3s var(--pt-bounce);
  display: inline-flex; align-items: center; gap: .6rem;
}
.db-hero-btn svg { width: 18px; height: 18px; }
.db-hero-btn:hover {
  transform: translateY(-3px); box-shadow: 0 15px 35px rgba(15,23,42,.35); background: #1e293b;
}

/* ── Stats Cards ────────────────────────────────────────────── */
.db-stats {
  max-width: 1100px; margin: 0 auto 2.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch;
}
.db-stat-card {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.8); border-radius: 24px; padding: 22px 20px;
  box-shadow: 0 10px 40px rgba(31,38,135,.06);
  display: flex; flex-direction: column; gap: 14px; min-height: 178px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.db-stat-card:hover { transform: translateY(-3px); box-shadow: 0 15px 45px rgba(31,38,135,.08); }
.db-stat-head { display: flex; align-items: center; gap: 14px; }
.db-stat-icon {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.04);
}
.db-stat-icon svg { width: 24px; height: 24px; }
.db-stat-icon--fire { color: #f59e0b; background: #fffbeb; }
.db-stat-icon--week { color: #0ea5a4; background: #ecfeff; }
.db-stat-icon--book { color: var(--pt-teal); background: #f0fdfa; }
.db-stat-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.db-stat-val {
  font-size: clamp(1.8rem, 2.6vw, 2.05rem); font-weight: 800;
  color: var(--pt-text); line-height: 1; margin-bottom: 6px;
}
.db-stat-lbl { font-size: .95rem; font-weight: 700; color: var(--pt-text); }
.db-stat-sub { font-size: .78rem; font-weight: 600; color: var(--pt-muted); margin-top: 2px; }
.db-stat-card--week { padding-top: 18px; padding-bottom: 18px; }
.db-stat-card--week .db-stat-head { justify-content: center; text-align: center; }
.db-week-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px; margin-top: auto; width: 100%;
}
.db-wpill {
  min-height: 56px; border-radius: 14px;
  background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: .72rem; font-weight: 700; color: var(--pt-muted);
  transition: all .25s ease; box-shadow: 0 4px 10px rgba(0,0,0,.02);
}
.db-wpill-day { text-transform: uppercase; line-height: 1; }
.db-wpill.done { background: #fff; border-color: rgba(20,184,166,.3); color: var(--pt-teal); box-shadow: 0 8px 15px rgba(20,184,166,.1); }
.db-wpill.today { border-color: var(--pt-teal); border-width: 2px; }
.db-wpill-dot { width: 6px; height: 6px; border-radius: 50%; background: #e2e8f0; }
.db-wpill.done .db-wpill-dot { background: var(--pt-teal); box-shadow: 0 0 8px var(--pt-teal); }

/* ── Calm Trigger ───────────────────────────────────────────── */
.db-calm {
  background: linear-gradient(135deg, rgba(20,184,166,.08) 0%, rgba(20,184,166,.02) 100%);
  border: 1px solid rgba(20,184,166,.2); border-radius: 28px; padding: 24px 32px;
  display: flex; align-items: center; gap: 24px; cursor: pointer; margin-bottom: 40px;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 10px 30px rgba(20,184,166,.05);
  position: relative; overflow: hidden; max-width: 1000px; margin-left: auto; margin-right: auto;
  backdrop-filter: blur(8px);
}
.db-calm:hover {
  transform: translateY(-4px); background: #fff;
  box-shadow: 0 20px 40px rgba(20,184,166,.12); border-color: rgba(20,184,166,.4);
}
.db-calm-ico {
  position: relative; width: 64px; height: 64px; border-radius: 20px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pt-teal), #0d9488);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.db-calm-ico::after {
  content: ''; position: absolute; inset: -4px; border-radius: 24px;
  border: 2px solid var(--pt-teal);
  animation: dbCalmPulse 2s infinite ease-in-out; opacity: .5;
}
@keyframes dbCalmPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
.db-calm-ico svg { width: 28px; height: 28px; }
.db-calm-body { flex: 1; display: flex; align-items: center; gap: 20px; }
.db-calm-title { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0 0 4px; }
.db-calm-desc { font-size: .95rem; color: #64748b; margin: 0; }
.db-calm-arrow {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--pt-teal); padding: 12px 24px; border-radius: 16px;
  font-weight: 700; font-size: .95rem; box-shadow: 0 4px 15px rgba(0,0,0,.05);
  transition: all .3s; border: none; flex-shrink: 0;
}
.db-calm:hover .db-calm-arrow { background: var(--pt-teal); color: #fff; }
.db-calm-arrow svg { width: 16px; height: 16px; }

/* ── Notes Grid ─────────────────────────────────────────────── */
.db-notes-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; max-width: 1100px; margin-left: auto; margin-right: auto;
}
.db-notes-hdr h2 {
  font-size: 1.35rem; font-weight: 800; color: var(--pt-text);
  display: flex; align-items: center; gap: .6rem;
}
.db-notes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  max-width: 1100px; margin: 0 auto;
}
.db-note-card {
  background: var(--pt-card); border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.03);
  display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.03);
  transition: all .3s var(--pt-ease); overflow-wrap: anywhere; word-break: break-word;
  height: 250px;
}
.db-note-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.06); }
.db-note-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem; flex-shrink: 0;
}
.db-note-date {
  font-size: .82rem; font-weight: 600; color: var(--pt-muted);
  display: flex; align-items: center; gap: .4rem;
}
.db-note-emo {
  background: #f8fafc; border: 1px solid #f1f5f9; border-radius: var(--pt-r-full);
  padding: .25rem .75rem; font-size: .92rem; font-weight: 700; color: var(--pt-sub);
  display: flex; align-items: center; gap: .4rem;
}
.db-note-text {
  font-size: .95rem; color: var(--pt-text); line-height: 1.6; flex-grow: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.db-note-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .9rem; border-top: 1px solid #f1f5f9; margin-top: auto; flex-shrink: 0;
}
.db-note-priv {
  padding: .35rem .75rem; border-radius: var(--pt-r-full);
  font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; gap: .4rem;
}
.db-note-priv.shared { background: #dcfce7; color: #166534; }
.db-note-priv.private { background: #fee2e2; color: #991b1b; }
.db-note-edit {
  background: none; border: none; color: var(--pt-muted); font-size: 1rem;
  cursor: pointer; transition: color .2s; padding: .25rem;
}
.db-note-edit:hover { color: var(--pt-teal); }
.db-note-edit svg { width: 16px; height: 16px; }

/* ── FAB ────────────────────────────────────────────────────── */
.db-fab {
  position: fixed; bottom: 30px; right: 30px; z-index: 200;
  background: var(--pt-text); color: #fff; border: none; border-radius: var(--pt-r-full);
  padding: 1rem 2rem; font-weight: 600; font-size: 1.02rem; font-family: var(--pt-font);
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(15,23,42,.3); transition: all .3s var(--pt-bounce);
  letter-spacing: .02em;
}
.db-fab svg { width: 18px; height: 18px; }
.db-fab:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 40px rgba(15,23,42,.4); background: #1e293b;
}

/* ── Note Modal ─────────────────────────────────────────────── */
.db-note-modal .pt-modal { max-width: 580px; border-radius: var(--pt-r-xl); }
.db-note-modal .pt-modal-header { border-bottom: none; padding-bottom: .5rem; }
.db-note-modal .pt-modal-body { padding-top: 0; }
.db-note-modal .pt-modal-title {
  font-family: var(--pt-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.db-emo-grid {
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 1.25rem; padding: .5rem 0;
}
.db-emo-btn {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .4rem; border-radius: var(--pt-r); background: var(--pt-card);
  border: 2px solid var(--pt-border-lt); cursor: pointer; transition: all .25s var(--pt-bounce);
  user-select: none; min-width: 68px;
}
.db-emo-btn:hover { border-color: var(--pt-teal-lt); background: var(--pt-teal-bg); transform: translateY(-3px); }
.db-emo-btn.active {
  border-color: var(--pt-teal); background: var(--pt-teal-bg);
  transform: translateY(-4px); box-shadow: 0 8px 20px var(--pt-teal-glow);
}
.db-emo-icon { font-size: 1.75rem; transition: transform .25s var(--pt-bounce); }
.db-emo-btn.active .db-emo-icon { transform: scale(1.2); }
.db-emo-label { font-size: .6rem; font-weight: 800; color: var(--pt-sub); text-align: center; line-height: 1.15; }
.db-emo-btn.active .db-emo-label { color: var(--pt-teal-dk); }
/* ── Writing area — notebook / diary feel ─────────────────── */
.db-writing-area {
  position: relative;
  background: linear-gradient(180deg, #fffdf6 0%, #fdf6e3 100%);
  border: 1.5px solid #e8e0c8;
  border-radius: var(--pt-r);
  padding: 1.15rem 1.15rem 1.15rem 2.65rem;
  margin-bottom: 1rem;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .55),
    0 2px 12px rgba(15, 23, 42, .04);
  transition: border-color .25s, box-shadow .25s;
  overflow: hidden;
}
/* Diary red margin line (left) */
.db-writing-area::before {
  content: '';
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  left: 2rem;
  width: 1.5px;
  background: rgba(220, 38, 38, .32);
  border-radius: 1px;
  pointer-events: none;
}
.db-writing-area:focus-within {
  border-color: var(--pt-teal-lt);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, .08),
    inset 1px 0 0 rgba(255, 255, 255, .55),
    0 6px 18px rgba(15, 23, 42, .06);
}
.db-writing-prompt {
  font-family: var(--pt-serif);
  font-style: italic;
  font-size: .92rem;
  color: #8a7d5a;
  margin-bottom: .85rem;
  line-height: 1.55;
  letter-spacing: .01em;
  transition: opacity .3s;
}
.db-writing-area:focus-within .db-writing-prompt { opacity: .55; }
.db-writing-textarea {
  display: block;
  width: 100%;
  min-height: 224px; /* 8 lines × 28px */
  height: auto;
  border: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(99, 102, 121, .28) 27px,
    rgba(99, 102, 121, .28) 28px
  );
  background-size: 100% 28px;
  background-position: 0 0;
  background-attachment: local;
  font-family: var(--pt-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--pt-text);
  line-height: 28px;
  letter-spacing: .015em;
  padding: 0;
  margin: 0;
  resize: none;
  overflow: hidden; /* no inner scroll — auto-grows via JS */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.db-writing-textarea::placeholder { color: transparent; }

/* ── Contador de caracteres del diario ─────────────────────── */
.db-writing-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-top: .55rem;
  padding-top: .5rem;
  font-size: .78rem;
  color: var(--pt-muted, #6b7280);
  border-top: 1px dashed rgba(0,0,0,.06);
  flex-wrap: wrap;
  line-height: 1.35;
}
.db-writing-counter__text {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .25s ease;
}
.db-writing-counter__hint {
  font-weight: 500;
  opacity: .9;
  text-align: right;
}
.db-writing-counter.is-near .db-writing-counter__text,
.db-writing-counter.is-near .db-writing-counter__hint {
  color: #b45309; /* amber-700 */
}
.db-writing-counter.is-over .db-writing-counter__text,
.db-writing-counter.is-over .db-writing-counter__hint {
  color: #b91c1c; /* red-700 */
  font-weight: 700;
}
@media (max-width: 480px) {
  .db-writing-counter { font-size: .74rem; gap: .35rem; }
  .db-writing-counter__hint { text-align: left; width: 100%; }
}

.db-priv-row {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem; flex-wrap: wrap;
}
.db-priv-left { display: flex; align-items: center; gap: .65rem; }
.db-priv-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.db-priv-toggle input { opacity: 0; width: 0; height: 0; }
.db-priv-slider {
  position: absolute; cursor: pointer; inset: 0; background: var(--pt-border);
  transition: .3s; border-radius: 24px;
}
.db-priv-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; transition: .3s; border-radius: 50%;
}
.db-priv-toggle input:checked + .db-priv-slider { background: var(--pt-teal); }
.db-priv-toggle input:checked + .db-priv-slider::before { transform: translateX(20px); }
.db-priv-label { font-size: .82rem; font-weight: 700; color: var(--pt-text); }

/* ── Success Overlay ────────────────────────────────────────── */
.db-success {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity .5s;
}
.db-success.show { opacity: 1; pointer-events: auto; }
.db-success-icon {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--pt-teal-bg); border: 3px solid var(--pt-teal-lt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; transform: scale(.5); opacity: 0;
}
.db-success.show .db-success-icon { animation: dbSuccessPop .6s cubic-bezier(.34,1.56,.64,1) .15s forwards; }
.db-success-icon svg { width: 36px; height: 36px; color: var(--pt-teal); }
@keyframes dbSuccessPop { to { transform: scale(1); opacity: 1; } }
.db-success-title {
  font-size: 1.5rem; font-weight: 800; color: var(--pt-text); margin-bottom: .5rem;
  transform: translateY(16px); opacity: 0;
}
.db-success.show .db-success-title { animation: dbSuccessFade .5s ease .35s forwards; }
.db-success-msg {
  font-size: .95rem; color: var(--pt-sub); max-width: 380px; line-height: 1.6;
  font-weight: 500; margin-bottom: 2rem; transform: translateY(16px); opacity: 0;
}
.db-success.show .db-success-msg { animation: dbSuccessFade .5s ease .5s forwards; }
@keyframes dbSuccessFade { to { transform: none; opacity: 1; } }
.db-success.show .db-success-btn { animation: dbSuccessFade .5s ease .65s forwards; }

/* ── Calm Space Modal ───────────────────────────────────────── */
.calm-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15,23,42,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.calm-modal-overlay.open { opacity: 1; pointer-events: auto; }
.calm-modal-box {
  background: #fff; border-radius: 32px; width: 100%; max-width: 500px;
  padding: 40px; text-align: center; position: relative;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.3);
  transform: scale(.95) translateY(20px); transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.calm-modal-overlay.open .calm-modal-box { transform: scale(1) translateY(0); }
.calm-close-btn {
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
  border-radius: 12px; background: #f8fafc; border: none; color: #94a3b8;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.calm-close-btn:hover { background: #fee2e2; color: #ef4444; }
.calm-close-btn svg { width: 16px; height: 16px; }

/* Mute button — sibling of close button */
.calm-mute-btn {
  position: absolute; top: 20px; left: 20px; width: 40px; height: 40px;
  border-radius: 12px; background: #f0fdfa; border: none; color: #0d9488;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.calm-mute-btn:hover { background: #ccfbf1; transform: scale(1.05); }
.calm-mute-btn svg { width: 17px; height: 17px; }
.calm-mute-btn--muted { background: #fef2f2; color: #dc2626; }
.calm-mute-btn--muted:hover { background: #fee2e2; }
.calm-stage { display: none; animation: calmFadeIn .5s ease; }
.calm-stage.active { display: block; }
@keyframes calmFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.calm-stage-icon {
  width: 80px; height: 80px; border-radius: 24px; margin: 0 auto 24px;
  background: #f0fdfa; color: var(--pt-teal); display: flex; align-items: center; justify-content: center;
}
.calm-stage-icon svg { width: 36px; height: 36px; }
.calm-stage h2 { font-size: 1.6rem; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.calm-stage p { font-size: 1.05rem; color: #64748b; line-height: 1.6; margin-bottom: 30px; padding: 0 10px; }
.calm-btn-primary {
  background: var(--pt-teal); color: #fff; border: none; border-radius: 50px;
  padding: 16px 32px; font-size: 1.05rem; font-weight: 700; font-family: var(--pt-font);
  cursor: pointer; box-shadow: 0 10px 25px rgba(20,184,166,.3); transition: all .3s; width: 100%;
}
.calm-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(20,184,166,.4); background: #0d9488; }
.calm-btn-secondary {
  background: transparent; color: #94a3b8; border: none; font-size: .95rem; font-weight: 600;
  cursor: pointer; padding: 10px; margin-top: 20px; transition: color .2s; font-family: var(--pt-font);
}
.calm-btn-secondary:hover { color: #64748b; text-decoration: underline; }

/* Organic breathing */
.organic-container { position: relative; width: 230px; height: 230px; margin: 30px auto 40px; }
.organic-halo {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  transform: translate(-50%,-50%) scale(.8);
  background: radial-gradient(circle, rgba(20,184,166,.2) 0%, transparent 60%);
  border-radius: 50%; opacity: 0; transition: opacity 1s, transform 1s; z-index: 0; filter: blur(10px);
}
.organic-blob-1 {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  transform: translate(-50%,-50%) scale(1) rotate(0deg);
  background: linear-gradient(135deg, rgba(167,243,208,.7), rgba(20,184,166,.6));
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  transition: transform 1s, background 1s, border-radius 1s; z-index: 1; backdrop-filter: blur(4px);
}
.organic-blob-2 {
  position: absolute; top: 50%; left: 50%; width: 90%; height: 90%;
  transform: translate(-50%,-50%) scale(1) rotate(45deg);
  background: linear-gradient(135deg, rgba(199,210,254,.7), rgba(99,102,241,.5));
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition: transform 1s, background 1s, border-radius 1s; z-index: 2;
}
.organic-core {
  position: absolute; top: 50%; left: 50%; width: 135px; height: 135px;
  transform: translate(-50%,-50%); background: #fff; border-radius: 50%;
  box-shadow: 0 10px 25px rgba(20,184,166,.15); z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.br-action { font-size: 1.6rem; font-weight: 800; color: var(--pt-teal); line-height: 1.1; margin-top: -2px; }
.br-instruction { font-size: 1.05rem; font-weight: 500; color: #475569; min-height: 48px; }
.calm-progress-bar { width: 100%; height: 6px; background: #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 10px; }
.calm-progress-fill { height: 100%; background: var(--pt-teal); width: 0%; transition: width 1s linear; }
.calm-options { display: flex; flex-direction: column; gap: 12px; }
.calm-option-btn {
  border: none; border-radius: 16px; padding: 16px 20px; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--pt-font);
}
.calm-option-btn.success { background: #dcfce7; color: #16a34a; }
.calm-option-btn.success:hover { background: #bbf7d0; transform: translateY(-2px); }
.calm-option-btn.neutral { background: #f1f5f9; color: #334155; }
.calm-option-btn.neutral:hover { background: #e2e8f0; transform: translateY(-2px); }
.calm-option-btn.ghost { background: transparent; color: #94a3b8; font-size: .95rem; }
.calm-option-btn.ghost:hover { color: #64748b; text-decoration: underline; }
.grounding-step {
  background: #f8fafc; border-radius: 16px; padding: 18px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 16px; text-align: left;
}
.g-num {
  width: 44px; height: 44px; border-radius: 14px; background: var(--pt-teal-bg);
  color: var(--pt-teal); font-size: 1.3rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.g-text h4 { font-size: .95rem; font-weight: 800; color: #0f172a; margin: 0 0 4px; }
.g-text p { font-size: .85rem; color: #64748b; margin: 0; line-height: 1.4; }

/* ── Dashboard Responsive ───────────────────────────────────── */
@media (max-width: 992px) {
  .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-stat-card--week { grid-column: 1 / -1; }
}
/* iPad portrait: stats en 1 col para que la card "semana" no quede
   desproporcionadamente ancha (bp lg-down) */
@media (max-width: 1023.98px) and (min-width: 641px) {
  .db-stats { grid-template-columns: 1fr; gap: 14px; }
  .db-stat-card--week { grid-column: auto; }
}
@media (max-width: 850px) {
  .db-notes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .db-fab { bottom: calc(var(--pt-nav-h) + .75rem); right: 1rem; }
  .db-emo-grid { gap: .3rem; }
  .db-emo-btn { min-width: 58px; padding: .45rem .3rem; }
  .db-emo-icon { font-size: 1.5rem; }
  .db-emo-label { font-size: .55rem; }
  .db-hero { padding: 2rem 1rem 1.5rem; }
  .db-hero-quote { font-size: 1.5rem; }
  .db-hero-btn { width: 100%; justify-content: center; }
  .db-note-card { height: auto; min-height: 200px; }
  /* Diary writing area — tablet */
  .db-writing-area { padding: 1rem 1rem 1rem 2.25rem; }
  .db-writing-area::before { left: 1.65rem; }
  .db-writing-prompt { font-size: .88rem; margin-bottom: .7rem; }
  .db-writing-textarea {
    min-height: 182px; /* 7 lines × 26px */
    font-size: .95rem;
    line-height: 26px;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 25px,
      rgba(99, 102, 121, .28) 25px,
      rgba(99, 102, 121, .28) 26px
    );
    background-size: 100% 26px;
  }
}
@media (max-width: 640px) {
  .db-stats { grid-template-columns: 1fr; gap: 14px; }
  .db-stat-card { min-height: auto; border-radius: 20px; padding: 18px 16px; }
  .db-stat-card--week { grid-column: auto; }
  .db-stat-icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 14px; }
  .db-wpill { min-height: 52px; border-radius: 12px; font-size: .66rem; }
  .db-week-strip { gap: 6px; }
}
@media (max-width: 600px) {
  .db-calm { flex-direction: column; text-align: center; padding: 24px 20px; gap: 16px; }
  .db-calm-body { flex-direction: column; }
  .db-calm-arrow { margin-left: 0; width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  .db-stat-val { font-size: 2.2rem; }
}
@media (max-width: 480px) {
  /* Diary writing area — phone */
  .db-writing-area { padding: .9rem .9rem .9rem 2rem; }
  .db-writing-area::before { left: 1.4rem; top: .45rem; bottom: .45rem; }
  .db-writing-prompt { font-size: .85rem; margin-bottom: .6rem; }
  .db-writing-textarea {
    min-height: 240px; /* 10 lines × 24px — más espacio para empezar */
    font-size: .95rem;
    line-height: 24px;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 23px,
      rgba(99, 102, 121, .3) 23px,
      rgba(99, 102, 121, .3) 24px
    );
    background-size: 100% 24px;
  }
}

/* ── Note Modal — bottom sheet en móvil ────────────────────
   Convierte el modal en una hoja a pantalla completa anclada
   abajo (estilo iOS sheet). Aprovecha todo el alto del device
   y deja un único contenedor de scroll: .pt-modal-body. */
@media (max-width: 640px) {
  .db-note-modal {
    align-items: flex-end;
    padding: 0;
  }
  .db-note-modal .pt-modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transition: transform .35s var(--pt-bounce);
  }
  .db-note-modal.open .pt-modal { transform: translateY(0); }
  .db-note-modal .pt-modal-header {
    padding-top: max(1.15rem, env(safe-area-inset-top, 0px));
    position: sticky;
    top: 0;
    background: var(--pt-card);
    z-index: 2;
  }
  /* Pequeña agarradera tipo iOS sheet */
  .db-note-modal .pt-modal-header::before {
    content: '';
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: var(--pt-border);
  }
  .db-note-modal .pt-modal-body {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  }
  /* La fila de acción se queda pegada abajo para que “Guardar”
     siempre sea alcanzable sin volver a hacer scroll. */
  .db-note-modal .db-priv-row {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--pt-card) 35%);
    padding: .85rem 0 max(.25rem, env(safe-area-inset-bottom, 0px));
    margin-top: .5rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL LOGIN  —  .plg-*
   Tono: paz, calidez, confianza, acompañamiento
   Inspiración: luminoso, sereno, moderno
   ════════════════════════════════════════════════════════════════ */

/* ── Reset base ──────────────────────────────────────────────── */
html:has(.plg-body),
.plg-body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.plg-root {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--pt-font);
  background: linear-gradient(145deg, #e6faf7 0%, #f0fdfa 20%, #f8fafc 55%, #fdf4ff 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

/* Background glow blobs */
.plg-root::before {
  content: '';
  position: fixed;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.10) 0%, transparent 65%);
  top: -20%; left: -15%;
  pointer-events: none;
  animation: plg-blob1 22s ease-in-out infinite alternate;
}
.plg-root::after {
  content: '';
  position: fixed;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.07) 0%, transparent 65%);
  bottom: -15%; right: -10%;
  pointer-events: none;
  animation: plg-blob2 28s ease-in-out infinite alternate;
}

@keyframes plg-blob1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(30px, 20px) scale(1.06); }
}
@keyframes plg-blob2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-20px, -25px) scale(1.04); }
}

/* ── Split Layout ────────────────────────────────────────────── */
.plg-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3.5rem 2.5rem 3.5rem;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.plg-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 3rem;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ── Left — Top Brand ────────────────────────────────────────── */
.plg-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.plg-brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pt-teal-lt), #fff);
  border: 1.5px solid rgba(20,184,166,.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,184,166,.15);
}

.plg-brand-mark svg {
  width: 20px; height: 20px;
  color: var(--pt-teal-dk);
}

.plg-brand-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -.01em;
}

.plg-brand-sub {
  font-size: .68rem;
  font-weight: 600;
  color: var(--pt-muted);
  margin-top: .05rem;
}

/* ── Left — Hero Content ─────────────────────────────────────── */
.plg-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0 1.5rem;
}

.plg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pt-teal-dk);
  background: rgba(20,184,166,.08);
  border: 1px solid rgba(20,184,166,.2);
  border-radius: 999px;
  padding: .32rem .9rem;
  margin-bottom: 1.75rem;
  width: fit-content;
}

.plg-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pt-teal);
  box-shadow: 0 0 6px var(--pt-teal);
}

.plg-headline {
  font-family: var(--pt-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  font-style: italic;
  color: var(--pt-text);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

.plg-headline em {
  font-style: italic;
  background: linear-gradient(130deg, var(--pt-teal-dk) 0%, #059669 50%, var(--pt-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plg-desc {
  font-size: .9rem;
  color: var(--pt-sub);
  line-height: 1.75;
  font-weight: 500;
  margin-bottom: 2rem;
  max-width: 400px;
}

/* ── Feature Pills ───────────────────────────────────────────── */
.plg-feats {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.plg-feat {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: rgba(255,255,255,.65);
  border-radius: var(--pt-r);
  padding: .85rem 1rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.plg-feat:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(15,23,42,.07);
}

.plg-feat-ico {
  width: 38px; height: 38px;
  border-radius: var(--pt-r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.plg-feat-ico svg { width: 17px; height: 17px; }

.plg-feat-ico.c-teal   { background: var(--pt-teal-bg); color: var(--pt-teal-dk); }
.plg-feat-ico.c-rose   { background: #fff1f2; color: #f43f5e; }
.plg-feat-ico.c-amber  { background: #fffbeb; color: #d97706; }

.plg-feat-title { font-size: .82rem; font-weight: 700; color: var(--pt-text); }
.plg-feat-desc  { font-size: .72rem; font-weight: 500; color: var(--pt-muted); margin-top: .08rem; }

/* ── Left — Quote Rotator ────────────────────────────────────── */
.plg-quotes-block {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(20,184,166,.14);
  border-radius: var(--pt-r-lg);
  padding: 1.75rem 1.75rem 1.25rem;
  backdrop-filter: blur(6px);
  margin-top: auto;
}

.plg-quotes-wrap {
  position: relative;
  min-height: 90px;
  margin-bottom: 1.1rem;
}

.plg-quote {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s ease;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.plg-quote.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.plg-quote-qmark {
  font-size: 3.5rem;
  line-height: .75;
  color: var(--pt-teal);
  font-family: Georgia, serif;
  flex-shrink: 0;
  opacity: .4;
}

.plg-quote-body {}

.plg-quote-text {
  font-family: var(--pt-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--pt-text);
  line-height: 1.7;
  margin-bottom: .5rem;
}

.plg-quote-source {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pt-teal-dk);
}

/* Dots */
.plg-dots {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.plg-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pt-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
}

.plg-dot.is-active {
  background: var(--pt-teal);
  width: 20px;
  border-radius: 3px;
}

/* ── Left — Footer ───────────────────────────────────────────── */
.plg-left-foot {
  font-size: .68rem;
  font-weight: 600;
  color: var(--pt-muted);
}

/* ── Right — Form Card ───────────────────────────────────────── */
.plg-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255,255,255,.95);
  border-radius: 24px;
  padding: 2.75rem 2.25rem;
  box-shadow:
    0 20px 60px rgba(15,23,42,.09),
    0 6px 20px rgba(15,23,42,.05);
  backdrop-filter: blur(12px);
}

/* Mobile icon — hidden on desktop */
.plg-mobile-top {
  display: none;
  text-align: center;
  margin-bottom: 2rem;
}

.plg-mobile-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pt-teal-lt), #fff);
  border: 1.5px solid rgba(20,184,166,.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 6px 20px rgba(20,184,166,.18);
}

.plg-mobile-icon svg {
  width: 32px; height: 32px;
  color: var(--pt-teal-dk);
}

.plg-mobile-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pt-text);
}

.plg-mobile-sub {
  font-size: .75rem;
  font-weight: 500;
  color: var(--pt-muted);
  margin-top: .2rem;
}

/* Card header */
.plg-card-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -.03em;
  margin-bottom: .3rem;
}

.plg-card-sub {
  font-size: .85rem;
  font-weight: 500;
  color: var(--pt-sub);
  line-height: 1.55;
  margin-bottom: 1.75rem;
}

/* Alert spacing */
.plg-card .pt-alert { margin-bottom: 1rem; }

/* ── Floating Label Inputs ───────────────────────────────────── */
.plg-fl {
  position: relative;
  margin-bottom: 1rem;
}

.plg-fl-input {
  width: 100%;
  padding: 1.4rem 2.75rem 0.55rem 1.15rem;
  background: #fff;
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-r);
  color: var(--pt-text);
  /* ≥16px SIEMPRE: bajo 16px iOS Safari hace auto-zoom al enfocar (Regla 8).
     El layout desktop aplica también en iPad landscape (>860px), donde el
     .92rem anterior (14.7px) disparaba el zoom. */
  font-size: 1rem;
  font-family: var(--pt-font);
  font-weight: 600;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.plg-fl-input::placeholder { opacity: 0; }

.plg-fl-input:focus {
  border-color: var(--pt-teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

.plg-fl-input.plg-err {
  border-color: var(--pt-err);
  box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}

.plg-fl-label {
  position: absolute;
  left: 1.15rem; top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  font-weight: 600;
  color: var(--pt-muted);
  pointer-events: none;
  display: flex; align-items: center; gap: .4rem;
  transition: top .2s ease, transform .2s ease, font-size .2s ease,
              color .2s ease, letter-spacing .2s ease;
}

.plg-fl-label svg { width: 14px; height: 14px; flex-shrink: 0; }

.plg-fl-input:focus + .plg-fl-label,
.plg-fl-input:not(:placeholder-shown) + .plg-fl-label,
.plg-fl-input:-webkit-autofill + .plg-fl-label {
  top: .7rem; transform: none;
  font-size: .6rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--pt-teal-dk);
}

.plg-fl-input.plg-err:not(:focus) + .plg-fl-label { color: var(--pt-err); }

/* WebKit/iOS (Regla 12): cuando el navegador/gestor de contraseñas hace
   autofill, a veces NO dispara :placeholder-shown, dejando el label
   ("Usuario"/"Contraseña") ENCIMA del valor autocompletado. Forzamos el estado
   flotado en :-webkit-autofill (regla de arriba) y normalizamos el fondo
   amarillo de autofill para que el campo y el label queden legibles. El estado
   normal (sin autofill) NO se ve afectado: estos selectores solo aplican cuando
   el navegador realmente autocompleta. */
.plg-fl-input:-webkit-autofill,
.plg-fl-input:-webkit-autofill:hover,
.plg-fl-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pt-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--pt-text);
}

/* Password eye */
.plg-eye {
  position: absolute;
  right: .8rem; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--pt-muted);
  cursor: pointer; padding: .4rem;
  border-radius: var(--pt-r-sm);
  transition: color .15s, background .15s;
  display: flex; align-items: center;
}

.plg-eye:hover { color: var(--pt-teal); background: var(--pt-teal-bg); }
.plg-eye svg { width: 16px; height: 16px; }

/* Caps lock */
.plg-caps {
  font-size: .7rem; color: var(--pt-warn); font-weight: 600;
  margin-top: -.5rem; margin-bottom: .5rem;
  display: none; align-items: center; gap: .3rem;
}
.plg-caps.show { display: flex; }
.plg-caps svg { width: 12px; height: 12px; }

/* ── Remember ────────────────────────────────────────────────── */
.plg-remember {
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 600;
  color: var(--pt-sub); cursor: pointer;
  margin-bottom: .25rem; user-select: none;
}

.plg-remember input {
  width: 15px; height: 15px;
  accent-color: var(--pt-teal); cursor: pointer;
}

/* ── Submit ──────────────────────────────────────────────────── */
.plg-submit {
  width: 100%; margin-top: 1.25rem; height: 52px;
  background: var(--pt-text);
  color: #fff; border: none;
  border-radius: var(--pt-r);
  font-size: .95rem; font-weight: 800;
  font-family: var(--pt-font); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

.plg-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,.28);
  background: #1e293b;
}

.plg-submit:active  { transform: none; }
.plg-submit:disabled { opacity: .6; pointer-events: none; }
.plg-submit svg { width: 16px; height: 16px; }

.plg-submit-label { display: flex; align-items: center; gap: .5rem; }
.plg-submit.is-loading .plg-submit-label { display: none; }
.plg-submit.is-loading .plg-submit-spin  { display: block; }
.plg-submit-spin {
  display: none; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: pt-spin .6s linear infinite;
}

/* ── Trust pills ─────────────────────────────────────────────── */
.plg-trust {
  display: flex; gap: .4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.plg-trust-pill {
  display: flex; align-items: center; gap: .35rem;
  background: var(--pt-bg);
  border: 1px solid var(--pt-border-lt);
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .68rem; font-weight: 700;
  color: var(--pt-muted);
}

.plg-trust-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.plg-tp-teal { color: var(--pt-teal-dk); }
.plg-tp-rose { color: #f43f5e; }
.plg-tp-blue { color: var(--pt-blue); }

/* ── Note ────────────────────────────────────────────────────── */
.plg-note {
  text-align: center; margin-top: 1.25rem;
  font-size: .78rem; font-weight: 600;
  color: var(--pt-muted); line-height: 1.55;
}

/* ── Terms link ──────────────────────────────────────────────── */
.plg-terms {
  text-align: center;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--pt-border-lt);
}

.plg-terms a {
  font-size: .73rem;
  font-weight: 600;
  color: var(--pt-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .2s ease;
}

.plg-terms a svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
}

.plg-terms a:hover { color: var(--pt-teal-dk); }

/* ── Hidden util ─────────────────────────────────────────────── */
.plg-hidden { display: none !important; }

/* ── Shake animation ─────────────────────────────────────────── */
@keyframes plg-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.plg-card.plg-do-shake { animation: plg-shake .42s ease; }

/* ── Responsive desktop adjustments ─────────────────────────── */
@media (max-width: 1100px) {
  .plg-left  { padding: 2.5rem 2.5rem 2rem; }
  .plg-right { padding: 2rem 2rem; }
}

@media (max-width: 960px) {
  .plg-left  { padding: 2rem 2rem 1.75rem; }
  .plg-right { padding: 2rem 1.5rem; }
  .plg-headline { font-size: clamp(1.7rem, 2.5vw, 2.2rem); }
}

/* Split desktop en alturas limitadas (iPad landscape 834/768, laptops bajas):
   el panel izquierdo sumaba más alto que el viewport y, con el root en
   overflow:hidden, la cita y el © quedaban RECORTADOS. Compacta espaciados
   para que todo el contenido entre sin scroll. */
@media (min-width: 861px) and (max-height: 900px) {
  .plg-left        { padding: 1.75rem 2.5rem 1.25rem; }
  .plg-hero        { padding: 1rem 0 .75rem; }
  .plg-eyebrow     { margin-bottom: 1rem; }
  .plg-headline    { margin-bottom: .85rem; }
  .plg-desc        { margin-bottom: 1.25rem; }
  .plg-feat        { padding: .7rem .9rem; }
  .plg-quotes-block { padding: 1.25rem 1.5rem 1rem; }
  .plg-quotes-wrap { margin-bottom: .8rem; }
}

@media (min-width: 861px) and (max-height: 800px) {
  .plg-headline    { font-size: clamp(1.7rem, 2.2vw, 2.1rem); }
  .plg-desc        { margin-bottom: 1rem; }
  .plg-feats       { gap: .45rem; }
  .plg-feat        { padding: .55rem .85rem; }
  .plg-quotes-wrap { min-height: 74px; }
  .plg-quote-text  { font-size: .95rem; line-height: 1.6; }
}

/* ═══════════════════════════════════════════════════════════════
 *  MOBILE / TABLET — "Diario de bienestar"
 *  Filosofía:
 *   - Ambiente cálido, suave, como papel — NO corporativo ni fintech
 *   - Fondo único (crema-menta), sin banner oscuro ni "sheet"
 *   - Marca como tipografía ligera arriba, no como bloque
 *   - Welcome como titular serif grande (íntimo, editorial)
 *   - Inputs como renglones que "flotan" (subtle surface)
 *   - Confianza mostrada con texto + viñetas, no cápsulas rígidas
 *   - Decoración: una sola mancha aureada muy difusa de fondo
 *
 *  La segunda condición (≤1000px de ancho Y ≤520px de alto) captura los
 *  MÓVILES EN LANDSCAPE (932×430, 844×390…): superan los 860px de ancho
 *  pero el split desktop ahí recortaba la tarjeta sin scroll posible
 *  (body overflow:hidden) → login imposible. iPad landscape (alto ≥768)
 *  conserva el split desktop.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px), (max-width: 1000px) and (max-height: 520px) {

  /* Scroll natural en móvil — el navegador respira con el teclado virtual */
  html:has(.plg-body),
  .plg-body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .plg-body {
    background:
      radial-gradient(1200px 500px at 50% -10%, rgba(20,184,166,.10) 0%, transparent 60%),
      radial-gradient(900px 500px at 110% 90%, rgba(251,191,146,.08) 0%, transparent 60%),
      #faf8f4;
  }

  .plg-root {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    background: transparent;
  }

  /* Panel izquierdo (hero desktop) — oculto */
  .plg-left { display: none; }

  /* Header propio del card (antes oculto en móvil) — reactivamos */
  .plg-mobile-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1.25rem;
  }
  .plg-mobile-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--pt-border);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .85rem;
    color: var(--pt-teal-dk);
    box-shadow: 0 6px 18px rgba(15,118,110,.10);
  }
  .plg-mobile-icon svg { width: 22px; height: 22px; }
  .plg-mobile-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--pt-teal-dk);
    text-transform: uppercase;
    letter-spacing: .16em;
  }
  .plg-mobile-sub {
    display: none;                 /* tagline redundante, se elimina */
  }

  /* ── Panel derecho: es todo el canvas, sin banners ni curvas ── */
  .plg-right {
    flex: 1;
    min-height: 100dvh;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    padding: 1.5rem 1.25rem 2.5rem;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* Card: papel cálido con sombra muy sutil */
  .plg-card {
    max-width: 440px;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(226,232,240,.8);
    border-radius: 22px;
    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 14px 44px -20px rgba(15,118,110,.18);
    padding: 1.75rem 1.5rem 2rem;
    /* Centrado vertical overflow-safe: los margin auto absorben el espacio
       libre (pantallas altas) y colapsan a 0 cuando el teclado virtual
       achica el viewport → vuelve el scroll natural desde arriba. */
    margin: auto 0;
  }

  /* ── Welcome: titular serif íntimo ─────────────────────────── */
  .plg-card-title {
    font-family: var(--pt-serif);
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.015em;
    text-align: left;
    color: var(--pt-text);
    margin: .25rem 0 .5rem;
  }
  .plg-card-sub {
    text-align: left;
    font-size: .88rem;
    color: var(--pt-sub);
    line-height: 1.55;
    margin-bottom: 1.75rem;
  }

  /* ── Inputs: superficie cálida (mint muy pálido) ───────────── */
  .plg-fl { margin-bottom: .85rem; }
  .plg-fl-input {
    font-size: 16px;               /* evita zoom auto iOS */
    /* Top padding generoso para dar aire al floating label cuando el input
       tiene valor (label salta a top:.7rem). Right padding reserva el
       espacio del ícono ojo. Con font-size 16px necesita ≥1.4rem arriba. */
    padding: 1.5rem 2.75rem .55rem 1rem;
    background: #f7faf9;
    border: 1px solid var(--pt-border-lt);
    border-radius: 14px;
  }
  /* Empuja también el label flotado un pelín más arriba en móvil
     para separarlo con claridad del texto escrito. */
  .plg-fl-input:focus + .plg-fl-label,
  .plg-fl-input:not(:placeholder-shown) + .plg-fl-label,
  .plg-fl-input:-webkit-autofill + .plg-fl-label {
    top: .5rem;
  }
  .plg-fl-input:focus {
    background: #ffffff;
    border-color: var(--pt-teal);
    box-shadow: 0 0 0 4px var(--pt-teal-glow);
  }

  /* ── Remember + submit: más aire y cercanía ────────────────── */
  .plg-remember {
    margin: .5rem 0 1.25rem;
    font-size: .85rem;
    color: var(--pt-sub);
  }
  .plg-submit {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    border-radius: 14px;
  }

  /* ── Trust: viñetas tipográficas, no cápsulas ──────────────── */
  .plg-trust {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--pt-border-lt);
    gap: 0;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .plg-trust-pill {
    background: transparent;
    border: none;
    padding: 0 .7rem;
    font-size: .72rem;
    color: var(--pt-sub);
    font-weight: 500;
    gap: .35rem;
    position: relative;
  }
  .plg-trust-pill + .plg-trust-pill::before {
    content: '';
    position: absolute;
    left: -1px; top: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--pt-muted);
    transform: translateY(-50%);
  }
  .plg-trust-pill svg { width: 12px; height: 12px; }
  .plg-tp-teal { color: var(--pt-teal-dk); }
  .plg-tp-rose { color: #e11d48; }
  .plg-tp-blue { color: #2563eb; }

  /* ── Nota + términos: footer tipográfico ───────────────────── */
  .plg-note  {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .82rem;
    color: var(--pt-sub);
    line-height: 1.6;
  }
  .plg-terms {
    margin-top: 1rem;
    justify-content: center;
    padding-top: .85rem;
  }
  .plg-terms a {
    font-size: .78rem;
    color: var(--pt-muted);
  }
  .plg-terms a:hover { color: var(--pt-teal-dk); }
}

/* ── Móvil pequeño (≤480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  .plg-right      { padding: 1.25rem 1rem 2rem; }
  .plg-card       { padding: 1.5rem 1.25rem 1.75rem; border-radius: 20px; }
  .plg-mobile-top { margin-bottom: 1.6rem; padding-top: .75rem; }
  .plg-mobile-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: .75rem; }
  .plg-mobile-icon svg { width: 20px; height: 20px; }
  .plg-mobile-label { font-size: .68rem; letter-spacing: .14em; }

  .plg-card-title { font-size: 1.65rem; }
  .plg-card-sub   { font-size: .85rem; margin-bottom: 1.5rem; }

  .plg-fl-input   { padding: 1.45rem 2.75rem .55rem .95rem; border-radius: 12px; }
  .plg-submit     { padding: .95rem 1rem; border-radius: 12px; }

  .plg-trust      { flex-wrap: wrap; row-gap: .4rem; }
  .plg-trust-pill { font-size: .7rem; padding: 0 .55rem; }
}

/* ── Móvil MUY pequeño (≤360px) ──────────────────────────────── */
@media (max-width: 360px) {
  .plg-card-title { font-size: 1.45rem; }
  .plg-trust-pill { font-size: .66rem; padding: 0 .45rem; }
}

/* ── Móvil en LANDSCAPE (viewport bajito) — compacta el encabezado
      para que el formulario entre con el mínimo de scroll ───────── */
@media (max-width: 1000px) and (max-height: 520px) {
  .plg-right      { padding: 1.25rem 1.25rem 2rem; }
  .plg-mobile-top { padding-top: .5rem; margin-bottom: 1.25rem; }
  .plg-card-title { font-size: 1.5rem; }
  .plg-card-sub   { margin-bottom: 1.25rem; }
}

/* ── Tablet mid-range (600px-860px) ──────────────────────────── */
@media (min-width: 600px) and (max-width: 860px) {
  .plg-right      { padding: 3rem 2rem 3rem; }
  .plg-card       { max-width: 460px; padding: 2.25rem 2.25rem 2.25rem; border-radius: 26px; }
  .plg-mobile-top { margin-bottom: 2.25rem; }
  .plg-mobile-icon { width: 52px; height: 52px; border-radius: 16px; }
  .plg-mobile-icon svg { width: 26px; height: 26px; }
  .plg-card-title { font-size: 2.1rem; }
  .plg-card-sub   { font-size: .95rem; }
}

@media (max-width: 767.98px)  { }
@media (max-width: 1023.98px) { }
@media (min-width: 768px)     { }
@media (min-width: 1024px)    { }
@media (min-width: 1024px) {
}

.pt-modal-shell.is-open {
  display: flex;
  animation: ptModalShellFadeIn .22s var(--pt-ease) both;
}

@media (max-width: 480px) {
}

/* Variante "sheet" (bottom-sheet) en móvil */
@media (max-width: 480px) {
  .pt-modal-shell--sheet { align-items: flex-end; padding: 0; }
  .pt-modal-shell--sheet .pt-modal-shell__box {
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    animation: ptModalShellSheetUp .32s var(--pt-ease) both;
  }
}

@keyframes ptModalShellFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ptModalShellSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ptModalShellSheetUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-modal-shell.is-open,
  .pt-modal-shell__box { animation: none; }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  FASE 9 — iPad portrait (834px) ajustes UX portal paciente
 * ═══════════════════════════════════════════════════════════════
 */
/* Tareas grid: 1 col en iPad portrait (más respirable que 2 apretadas) */
@media (max-width: 1023.98px) and (min-width: 769px) {
  .tk-grid { grid-template-columns: 1fr; }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  OLA A — Calm Space rediseño (Intro + Técnicas + Extras)
 * ═══════════════════════════════════════════════════════════════
 */
@keyframes calmHeroHalo {
  0%,100% { transform: scale(1); opacity: .7; }
  50%     { transform: scale(1.15); opacity: 1; }
}
@keyframes calmRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Modal widening for the new intro layout */
.calm-modal-box { max-width: 560px; }
.calm-modal-box:has(#calmStageIntro.active) {
  max-width: 560px;
  padding: 32px 32px 28px;
  text-align: left;
}

/* ── Hero ──────────────────────────────────────────────────── */
.calm-hero { text-align: center; margin-bottom: 24px; }
.calm-hero-ico {
  position: relative;
  width: 68px; height: 68px; border-radius: 22px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
  color: var(--pt-teal-dk);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -6px rgba(20,184,166,.25);
}
.calm-hero-ico svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.calm-hero-halo {
  position: absolute; inset: -4px; border-radius: 26px;
  background: radial-gradient(circle, rgba(20,184,166,.25), transparent 70%);
  animation: calmHeroHalo 3.5s ease-in-out infinite;
  z-index: 0;
}
.calm-hero-title {
  font-size: 1.55rem !important; font-weight: 800 !important;
  color: var(--pt-text) !important; margin: 0 0 8px !important;
  letter-spacing: -.015em; line-height: 1.15;
}
.calm-hero-sub {
  font-size: .96rem !important; color: var(--pt-sub) !important;
  line-height: 1.55 !important; max-width: 380px;
  margin: 0 auto !important; padding: 0 !important;
}

/* ── Techniques list ──────────────────────────────────────── */
.calm-tech-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 24px;
}
.calm-tech-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: var(--pt-card); border: 1px solid var(--pt-border-lt);
  border-radius: 16px;
  cursor: pointer; font-family: var(--pt-font); text-align: left;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  animation: calmRowIn .4s ease both;
  position: relative;
}
.calm-tech-row:nth-child(1) { animation-delay: .02s; }
.calm-tech-row:nth-child(2) { animation-delay: .06s; }
.calm-tech-row:nth-child(3) { animation-delay: .1s; }
.calm-tech-row:nth-child(4) { animation-delay: .14s; }
.calm-tech-row:nth-child(5) { animation-delay: .18s; }
.calm-tech-row:hover {
  border-color: var(--pt-teal);
  box-shadow: 0 8px 20px -8px rgba(20,184,166,.2);
  transform: translateY(-2px);
}
.calm-tech-row:hover .calm-tech-arrow { transform: translateX(3px); color: var(--pt-teal); }
.calm-tech-row:focus-visible { outline: none; border-color: var(--pt-teal); box-shadow: 0 0 0 3px var(--pt-teal-glow); }
.calm-tech-row:active { transform: translateY(0); }

.calm-tech-ico {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.calm-tech-row:hover .calm-tech-ico { transform: scale(1.06) rotate(-3deg); }
.calm-tech-ico svg { width: 21px; height: 21px; }
.calm-tech-ico--breath { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
.calm-tech-ico--ground { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.calm-tech-ico--scan   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
.calm-tech-ico--viz    { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }
.calm-tech-ico--heart  { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; }

.calm-tech-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.calm-tech-title {
  font-size: .98rem; font-weight: 700; color: var(--pt-text);
  line-height: 1.25; letter-spacing: -.005em;
}
.calm-tech-desc {
  font-size: .82rem; color: var(--pt-sub); line-height: 1.35;
}

.calm-tech-dur {
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--pt-teal-bg);
  color: var(--pt-teal-dk);
  border-radius: 9999px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
}
.calm-tech-arrow {
  width: 16px; height: 16px; color: #cbd5e1;
  flex-shrink: 0; transition: all .22s;
}

/* ── Extras divider + cards ───────────────────────────────── */
.calm-extras { margin-bottom: 22px; }
.calm-extras-label {
  display: flex; align-items: center; gap: 10px;
  font-size: .75rem; font-weight: 700;
  color: var(--pt-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
  padding: 0 2px;
}
.calm-extras-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pt-border), transparent);
}
.calm-extras-list { display: flex; flex-direction: column; gap: 6px; }
.calm-extra-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--pt-card); border: 1px solid var(--pt-border-lt);
  border-radius: 16px;
  text-decoration: none; color: inherit;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.calm-extra-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(15,23,42,.08);
}
.calm-extra-card:hover .calm-tech-arrow { transform: translateX(3px); }
.calm-extra-card--plan:hover { border-color: #5eead4; box-shadow: 0 8px 20px -8px rgba(20,184,166,.2); }
.calm-extra-card--plan:hover .calm-tech-arrow { color: var(--pt-teal); }
.calm-extra-card:not(.calm-extra-card--plan):hover { border-color: #f9a8d4; box-shadow: 0 8px 20px -8px rgba(219,39,119,.18); }
.calm-extra-card:not(.calm-extra-card--plan):hover .calm-tech-arrow { color: #db2777; }

.calm-extra-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.calm-extra-ico svg { width: 19px; height: 19px; }
.calm-extra-ico--plan  { background: linear-gradient(135deg, #ccfbf1, #99f6e4); color: #0d9488; }
.calm-extra-ico--apoyo { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; }

.calm-extra-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.calm-extra-title { font-size: .95rem; font-weight: 700; color: var(--pt-text); line-height: 1.25; }
.calm-extra-desc  { font-size: .8rem; color: var(--pt-sub); line-height: 1.3; }

/* ── Safety note (subtle, not alarming) ───────────────────── */
.calm-safety-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid var(--pt-border-lt);
  border-radius: 12px;
  font-size: .78rem; color: var(--pt-sub);
  line-height: 1.5; text-align: left;
}
.calm-safety-note svg { width: 15px; height: 15px; color: #94a3b8; flex-shrink: 0; margin-top: 1px; }
.calm-safety-note strong { color: var(--pt-text2); font-weight: 600; }

/*
 * ═══════════════════════════════════════════════════════════════
 *  OLA A — Recordatorio amable del día  (restaurado QA 2026-07-10)
 *  Card teal, coherente con .db-eco / .db-checkin. La doctora lo
 *  agenda desde el admin; el paciente lo ve aquí. #dbReminder lo
 *  auto-marca visto (3s) y lo descarta vía dbDismissReminder().
 * ═══════════════════════════════════════════════════════════════
 */
.db-reminder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto 1.25rem;
  padding: 16px 52px 16px 18px;
  background: linear-gradient(145deg, var(--pt-teal-bg), #ffffff);
  border: 1px solid #99f6e4;
  border-radius: 20px;
  box-shadow: 0 6px 18px -10px rgba(20, 184, 166, .35);
}
.db-reminder__ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pt-teal);
  color: #fff;
}
.db-reminder__ico svg { width: 22px; height: 22px; }
.db-reminder__body { flex: 1; min-width: 0; }
.db-reminder__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pt-teal-dk); margin-bottom: 3px;
}
.db-reminder__msg {
  font-size: .98rem; line-height: 1.5; color: var(--pt-text);
  margin: 0; overflow-wrap: anywhere;
}
.db-reminder__from {
  margin-top: 6px; font-size: .82rem; color: var(--pt-sub); font-style: italic;
}
.db-reminder__close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 10px; background: transparent;
  color: var(--pt-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.db-reminder__close:hover { background: rgba(15, 23, 42, .06); color: var(--pt-text); }
.db-reminder__close svg { width: 18px; height: 18px; }

@media (max-width: 500px) {
  /* En móvil, alineamos el ícono arriba (en vez de al centro del bloque
     de texto) para que acompañe visualmente al título. */
  .db-reminder {
    align-items: flex-start;
    padding: 14px 46px 14px 14px;
    gap: 12px;
  }
}
.db-checkin-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; background: #f8fafc; border: 1.5px solid transparent;
  border-radius: 16px; cursor: pointer; transition: all .2s; font-family: var(--pt-font);
}
.db-checkin-btn:hover:not(:disabled) {
  background: var(--pt-teal-bg); border-color: var(--pt-teal); transform: translateY(-3px);
  box-shadow: 0 8px 18px -6px rgba(20,184,166,.25);
}
.db-checkin-btn.selected {
  background: var(--pt-teal); border-color: var(--pt-teal); color: #fff;
  transform: scale(.96);
}
.db-checkin-btn.selected .db-checkin-label { color: #fff; }
.db-checkin-btn:disabled:not(.selected) { opacity: .35; cursor: default; }

.db-checkin-done { display: flex; align-items: center; gap: 14px; }
.db-checkin-done-ico {
  width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
  background: #dcfce7; color: #16a34a;
  display: flex; align-items: center; justify-content: center;
}
.db-checkin-done-ico svg { width: 20px; height: 20px; }
.db-checkin-done-body { flex: 1; }
.db-checkin-done-title { font-size: .82rem; font-weight: 700; color: var(--pt-sub); letter-spacing: .04em; text-transform: uppercase; }
.db-checkin-done-sub { font-size: 1rem; color: var(--pt-text); margin-top: 2px; }
.db-checkin-done-sub strong { color: var(--pt-teal-dk); }
.db-checkin-done-meta { font-size: .78rem; color: var(--pt-muted); }

@media (max-width: 520px) {
  .db-checkin-btn { padding: 10px 4px; }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  OLA B — Eco post-sesión
 * ═══════════════════════════════════════════════════════════════
 */
.db-eco {
  background: linear-gradient(145deg, #eef2ff, #fff);
  border: 1px solid #c7d2fe; border-radius: 24px;
  padding: 20px 22px;
  /* Alinear con .db-calm / .db-hero: bloque capado y centrado en la
     columna de contenido. Sin max-width + margin auto quedaba a ancho
     intrinseco y pegado a la izquierda, descentrado respecto a sus
     hermanos (.db-calm usa el mismo max-width:1000px centrado). */
  width: 100%; max-width: 1000px; margin: 0 auto 20px;
  box-shadow: 0 8px 22px -6px rgba(99,102,241,.15);
}
.db-eco-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.db-eco-ico {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  background: #e0e7ff; color: #4338ca;
  display: flex; align-items: center; justify-content: center;
}
.db-eco-ico svg { width: 20px; height: 20px; }
.db-eco-label { font-size: .75rem; font-weight: 700; color: #4338ca; text-transform: uppercase; letter-spacing: .05em; }
.db-eco-title { font-size: 1.15rem; font-weight: 700; color: var(--pt-text); margin-top: 2px; }
.db-eco-close {
  margin-left: auto; width: 30px; height: 30px; border: none; background: transparent;
  color: #9ca3af; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.db-eco-close:hover { background: #e5e7eb; color: #4b5563; }
.db-eco-close svg { width: 14px; height: 14px; }
.db-eco-sub { font-size: .9rem; color: var(--pt-sub); margin: 0 0 12px; line-height: 1.5; }
.db-eco-text {
  width: 100%; padding: 12px 14px; border: 1.5px solid #c7d2fe; border-radius: 14px;
  font-family: var(--pt-font); font-size: .95rem; color: var(--pt-text);
  background: #fff; resize: vertical; min-height: 60px; transition: all .2s;
}
.db-eco-text:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.db-eco-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

.db-eco-done { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.db-eco-done-ico { width: 36px; height: 36px; border-radius: 12px; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; }
.db-eco-done-ico svg { width: 18px; height: 18px; }
.db-eco-done-title { font-size: .88rem; font-weight: 700; color: var(--pt-text); }
.db-eco-done-sub { font-size: .82rem; color: var(--pt-sub); }

/* Extra stage icon variants */
.calm-stage-icon--scan { background: #dbeafe; color: #2563eb; margin-bottom: 16px; }
.calm-stage-icon--viz  { background: #ede9fe; color: #7c3aed; margin-bottom: 16px; }

/* ─── Body Scan ─── */
.calm-bs-head { margin-bottom: 8px; }
.calm-bs-head h2 { margin-bottom: 6px; }
.calm-bs-sub { font-size: .95rem; color: #64748b; margin-bottom: 18px !important; padding: 0 8px !important; }
.calm-bs-stage {
  position: relative; width: 180px; height: 180px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}
.calm-bs-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 70%);
  animation: bsBreathe 4s ease-in-out infinite;
}
@keyframes bsBreathe {
  0%,100% { transform: scale(.85); opacity: .6; }
  50%     { transform: scale(1.1); opacity: 1; }
}
.calm-bs-part {
  position: relative; font-size: 1.4rem; font-weight: 800; color: #2563eb;
  z-index: 2; padding: 0 !important; margin: 0 !important;
}
.calm-bs-prompt {
  font-size: 1rem; color: #475569; line-height: 1.55;
  min-height: 60px; margin-bottom: 16px !important; padding: 0 10px !important;
  transition: opacity .4s;
}

/* ─── Visualización lugar seguro ─── */
.calm-viz-head { margin-bottom: 12px; }
.calm-viz-head h2 { margin-bottom: 0; }
.calm-viz-scene {
  width: 100%; height: 140px; border-radius: 20px; margin-bottom: 18px;
  transition: background 2.5s ease; position: relative; overflow: hidden;
}
.calm-viz-scene::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 80%, rgba(255,255,255,.25), transparent 60%);
}
.calm-viz-scene.viz-dawn   { background: linear-gradient(180deg, #fde68a 0%, #fca5a5 60%, #c084fc 100%); }
.calm-viz-scene.viz-day    { background: linear-gradient(180deg, #93c5fd 0%, #a7f3d0 70%, #86efac 100%); }
.calm-viz-scene.viz-golden { background: linear-gradient(180deg, #fbbf24 0%, #fb923c 60%, #f472b6 100%); }
.calm-viz-scene.viz-dusk   { background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); }
.calm-viz-text {
  font-size: 1.02rem; color: #334155; line-height: 1.6;
  min-height: 85px; margin-bottom: 16px !important; padding: 0 10px !important;
}

/* ─── Auto-compasión ─── */
.calm-ac-head { margin-bottom: 16px; }
.calm-ac-head h2 { margin-bottom: 8px; }
.calm-ac-sub { font-size: .95rem; color: #64748b; margin-bottom: 24px !important; padding: 0 10px !important; }
.calm-ac-heart {
  width: 70px; height: 70px; margin: 0 auto 16px;
  color: #db2777; display: flex; align-items: center; justify-content: center;
  animation: acHeartPulse 2.4s ease-in-out infinite;
}
.calm-ac-heart svg { width: 54px; height: 54px; filter: drop-shadow(0 4px 14px rgba(219,39,119,.35)); }
@keyframes acHeartPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}
.calm-ac-phrase-wrap {
  min-height: 100px; display: flex; align-items: center; justify-content: center;
  padding: 24px 20px; background: #fff7fb; border: 1px solid #fce7f3;
  border-radius: 20px; margin-bottom: 20px;
}
.calm-ac-phrase {
  font-size: 1.25rem; font-weight: 600; color: #831843;
  line-height: 1.5; margin: 0 !important; padding: 0 !important;
  transition: opacity .35s ease;
}

/* ─── Responsive: Intro modal on mobile ─── */
@media (max-width: 600px) {
  .calm-modal-box { padding: 28px 22px; }
  .calm-modal-box:has(#calmStageIntro.active) { max-width: 100%; padding: 26px 20px 22px; }
  .calm-hero-ico { width: 60px; height: 60px; border-radius: 20px; }
  .calm-hero-ico svg { width: 28px; height: 28px; }
  .calm-hero-title { font-size: 1.35rem !important; }
  .calm-hero-sub { font-size: .9rem !important; }
  .calm-tech-row { padding: 11px 12px; gap: 12px; }
  .calm-tech-ico { width: 40px; height: 40px; border-radius: 12px; }
  .calm-tech-ico svg { width: 19px; height: 19px; }
  .calm-tech-title { font-size: .92rem; }
  .calm-tech-desc { font-size: .77rem; }
  .calm-tech-dur { font-size: .68rem; padding: 3px 8px; }
  .calm-extra-card { padding: 11px 12px; }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  OLA A — Red de Apoyo
 * ═══════════════════════════════════════════════════════════════
 */
.ra-wrap { max-width: 760px; margin: 0 auto; padding: 8px 0 80px; }
.ra-hero { text-align: center; margin-bottom: 32px; }
.ra-hero-ico {
  width: 72px; height: 72px; border-radius: 24px; margin: 0 auto 18px;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #db2777; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px rgba(219,39,119,.15);
}
.ra-hero-ico svg { width: 34px; height: 34px; }
.ra-hero h1 { font-size: 1.7rem; font-weight: 800; color: var(--pt-text); margin: 0 0 10px; letter-spacing: -.01em; }
.ra-hero-sub { color: var(--pt-sub); font-size: .98rem; line-height: 1.55; max-width: 520px; margin: 0 auto; }

.ra-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.ra-card {
  background: var(--pt-card); border: 1px solid var(--pt-border-lt);
  border-radius: 20px; padding: 18px; transition: all .2s;
}
.ra-card:hover { border-color: var(--pt-border); box-shadow: var(--pt-shadow-md); transform: translateY(-2px); }
.ra-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ra-card-avatar {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pt-teal-lt), var(--pt-teal));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}
.ra-card-info { flex: 1; min-width: 0; }
.ra-card-name { font-weight: 700; color: var(--pt-text); font-size: 1rem; line-height: 1.2; }
.ra-card-rel  { font-size: .85rem; color: var(--pt-sub); margin-top: 3px; }
.ra-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ra-icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent;
  color: var(--pt-muted); cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.ra-icon-btn:hover { background: #f1f5f9; color: var(--pt-text2); }
.ra-icon-btn svg { width: 15px; height: 15px; }
.ra-icon-btn--danger:hover { background: #fee2e2; color: #ef4444; }

.ra-card-phone {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: #f0fdfa; color: var(--pt-teal); border-radius: var(--pt-r-full);
  font-weight: 600; font-size: .92rem; text-decoration: none; transition: all .2s;
}
.ra-card-phone:hover { background: var(--pt-teal); color: #fff; transform: translateY(-1px); }
.ra-card-phone svg { width: 14px; height: 14px; }
.ra-card-notas {
  margin: 12px 0 0; font-size: .88rem; color: var(--pt-sub);
  line-height: 1.5; padding-top: 12px; border-top: 1px dashed var(--pt-border-lt);
}

.ra-empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 24px;
  background: var(--pt-card); border: 2px dashed var(--pt-border); border-radius: 24px;
}
.ra-empty svg { width: 48px; height: 48px; color: #fbcfe8; margin: 0 auto 14px; }
.ra-empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--pt-text2); margin: 0 0 8px; }
.ra-empty p { font-size: .92rem; color: var(--pt-sub); max-width: 380px; margin: 0 auto; line-height: 1.5; }

.ra-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 auto; padding: 14px 28px;
  background: var(--pt-teal); color: #fff; border: none; border-radius: var(--pt-r-full);
  font-weight: 700; font-size: 1rem; font-family: var(--pt-font);
  cursor: pointer; transition: all .25s;
  box-shadow: 0 8px 22px -4px rgba(20,184,166,.35);
}
.ra-add-btn:hover { background: var(--pt-teal-dk); transform: translateY(-2px); box-shadow: 0 12px 28px -4px rgba(20,184,166,.45); }
.ra-add-btn svg { width: 16px; height: 16px; }
.ra-limit { text-align: center; color: var(--pt-sub); font-size: .92rem; padding: 16px; }

/* ── Form fields inside Red de Apoyo modal (minimal) ────── */
.ra-field { display: block; margin-bottom: 14px; }
.ra-field-label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--pt-text2); margin-bottom: 7px; letter-spacing: .005em;
}
.ra-field-hint { font-weight: 400; color: var(--pt-muted); font-size: .78rem; margin-left: 2px; }
.ra-req { color: var(--pt-teal); font-weight: 700; margin-left: 2px; }

.ra-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--pt-border-lt);
  border-radius: 11px;
  font-family: var(--pt-font);
  font-size: .94rem;
  color: var(--pt-text);
  background: var(--pt-card);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ra-input::placeholder { color: var(--pt-muted); opacity: 1; }
.ra-input:hover { border-color: var(--pt-border); }
.ra-input:focus {
  outline: none;
  border-color: var(--pt-teal);
  box-shadow: 0 0 0 3px var(--pt-teal-glow);
}
.ra-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

.ra-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pt-border-lt);
}

/* ── Variante minimalista del .pt-modal para Red de Apoyo ── */
.ra-modal .pt-modal {
  max-width: min(440px, calc(100vw - 24px));
  border-radius: 18px;
  box-shadow:
    0 24px 60px -16px rgba(15,23,42,.22),
    0 4px 16px rgba(15,23,42,.05);
}
.ra-modal .pt-modal-header {
  padding: 1.35rem 1.5rem .55rem;
  border-bottom: none;
}
.ra-modal .pt-modal-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--pt-text);
  margin: 0;
}
.ra-modal .pt-modal-close {
  width: 30px; height: 30px;
  background: transparent;
  border-radius: 9px;
  color: var(--pt-muted);
}
.ra-modal .pt-modal-close:hover {
  background: var(--pt-bg);
  color: var(--pt-text2);
}
.ra-modal .pt-modal-close svg { width: 15px; height: 15px; }
.ra-modal .pt-modal-body { padding: .85rem 1.5rem 1.4rem; }

@media (max-width: 600px) {
  .ra-list { grid-template-columns: 1fr; }
  .ra-hero h1 { font-size: 1.45rem; }
}

@media (max-width: 480px) {
  .ra-modal .pt-modal-header { padding: 1.15rem 1.15rem .35rem; }
  .ra-modal .pt-modal-body   { padding: .65rem 1.15rem 1.1rem; }
  .ra-form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .ra-form-actions > .pt-btn { width: 100%; justify-content: center; }
}

/*
 * ═══════════════════════════════════════════════════════════════
 *  OLA A — Plan de Seguridad (portal, orientado al paciente)
 *  Prefijo: psp- (Plan de Seguridad Portal)
 * ═══════════════════════════════════════════════════════════════
 */
@keyframes pspFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pspSoftPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.3); }
  50%     { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
}
@keyframes pspCrisisPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
  50%     { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

.psp-wrap {
  max-width: 720px; margin: 0 auto;
  padding: 4px 0 140px;
  animation: pspFadeUp .5s ease both;
}

/* ─── Intro narrativa ─────────────────────────────────────── */
.psp-intro {
  position: relative; overflow: hidden;
  padding: 28px 26px 24px;
  background: linear-gradient(145deg, #f0fdfa 0%, #ecfeff 55%, #eef2ff 100%);
  border: 1px solid #c7d2fe; border-radius: 28px;
  margin-bottom: 20px;
}
.psp-intro::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.12), transparent 65%);
}
.psp-intro::after {
  content: ''; position: absolute; bottom: -40px; left: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.12), transparent 65%);
}
.psp-intro-inner { position: relative; z-index: 1; }
.psp-intro-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 9999px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(99,102,241,.2);
  font-size: .72rem; font-weight: 700; color: #4338ca;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 14px;
}
.psp-intro-eyebrow svg { width: 12px; height: 12px; }
.psp-intro h1 {
  font-size: 1.55rem; font-weight: 800; color: var(--pt-text);
  line-height: 1.25; letter-spacing: -.01em; margin: 0 0 10px;
}
.psp-intro-text {
  font-size: .98rem; color: var(--pt-text2); line-height: 1.6;
  max-width: 540px; margin: 0;
}
.psp-intro-text strong { color: var(--pt-text); }

/* ─── Quick access chips ──────────────────────────────────── */
.psp-quick {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 4px; margin-bottom: 24px;
}
.psp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9999px;
  background: var(--pt-card); border: 1.5px solid var(--pt-border-lt);
  color: var(--pt-text2); font-family: var(--pt-font);
  font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .22s cubic-bezier(.4,0,.2,1);
}
.psp-chip:hover {
  transform: translateY(-2px); border-color: var(--pt-teal);
  color: var(--pt-teal-dk); box-shadow: 0 6px 14px -4px rgba(20,184,166,.2);
}
.psp-chip svg { width: 14px; height: 14px; }
.psp-chip--crisis {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.psp-chip--crisis:hover { background: #fee2e2; color: #991b1b; border-color: #f87171; box-shadow: 0 6px 14px -4px rgba(239,68,68,.25); }

/* ─── Therapist letter ────────────────────────────────────── */
.psp-letter {
  position: relative;
  padding: 22px 24px 18px;
  background: linear-gradient(155deg, #fff7fb 0%, #fffafc 100%);
  border: 1px solid #fce7f3; border-radius: 22px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px -6px rgba(219,39,119,.12);
}
.psp-letter-seal {
  position: absolute; top: -12px; left: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #db2777);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(219,39,119,.35);
  color: #fff;
}
.psp-letter-seal svg { width: 18px; height: 18px; }
.psp-letter-label {
  display: block; font-size: .72rem; font-weight: 700;
  color: #be185d; text-transform: uppercase; letter-spacing: .06em;
  margin: 6px 0 8px 44px;
}
.psp-letter-body {
  font-size: 1.02rem; color: #831843; line-height: 1.65;
  font-style: italic; margin: 0; font-family: var(--pt-serif);
}
.psp-letter-sign {
  display: block; margin-top: 12px; font-size: .82rem;
  color: #be185d; font-style: normal; font-family: var(--pt-font);
  letter-spacing: .02em;
}

/* ─── Moment section ──────────────────────────────────────── */
.psp-moment {
  background: var(--pt-card);
  border: 1px solid var(--pt-border-lt);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 14px;
  transition: box-shadow .25s;
}
.psp-moment:hover { box-shadow: 0 4px 18px -6px rgba(15,23,42,.06); }

.psp-moment-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 16px;
}
.psp-moment-num {
  width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; color: #fff;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  letter-spacing: -.02em;
}
.psp-moment-num--warn { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.psp-moment-num--care { background: linear-gradient(135deg, #34d399, #10b981); }
.psp-moment-num--places{ background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.psp-moment-num--people{ background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.psp-moment-num--pro   { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.psp-moment-num--commit{ background: linear-gradient(135deg, #fb7185, #e11d48); }

.psp-moment-title {
  font-size: 1.15rem; font-weight: 700; color: var(--pt-text);
  margin: 0 0 4px; line-height: 1.3;
}
.psp-moment-hint {
  font-size: .9rem; color: var(--pt-sub);
  line-height: 1.5; margin: 0;
}

/* ─── Lists (warnings + coping) ───────────────────────────── */
.psp-items { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.psp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: .98rem; color: var(--pt-text2); line-height: 1.5;
}
.psp-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.psp-item--warn { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.psp-item--warn .psp-item-dot {
  background: #f59e0b; box-shadow: 0 0 0 0 rgba(251,191,36,.3);
  animation: pspSoftPulse 2.8s ease-in-out infinite;
}
.psp-item--care { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.psp-item--care .psp-item-dot { background: #10b981; }

/* ─── Places grid (distracción) ───────────────────────────── */
.psp-places {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.psp-place {
  padding: 14px 16px;
  background: linear-gradient(145deg, #faf5ff 0%, #f5f3ff 100%);
  border: 1px solid #e9d5ff; border-radius: 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.psp-place-ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: #ede9fe; color: #7c3aed;
  display: flex; align-items: center; justify-content: center;
}
.psp-place-ico svg { width: 16px; height: 16px; }
.psp-place-body { flex: 1; min-width: 0; }
.psp-place-name { font-size: .96rem; font-weight: 700; color: #581c87; line-height: 1.3; margin: 0 0 2px; }
.psp-place-ctx  { font-size: .85rem; color: #7c3aed; line-height: 1.4; }

/* ─── Contacts (people + professionals) ───────────────────── */
.psp-contacts { display: flex; flex-direction: column; gap: 10px; }
.psp-contact {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--pt-card); border: 1px solid var(--pt-border-lt);
  border-radius: 18px; transition: all .22s;
}
.psp-contact:hover { box-shadow: 0 6px 18px -6px rgba(15,23,42,.08); transform: translateY(-1px); }
.psp-contact--people { background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%); border-color: #99f6e4; }
.psp-contact--self   { background: linear-gradient(135deg, #fdf2f8 0%, #fff 100%); border-color: #fbcfe8; }
.psp-contact--pro    { background: linear-gradient(135deg, #eef2ff 0%, #fff 100%); border-color: #c7d2fe; }

.psp-contact-avatar {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
}
.psp-contact-avatar--people { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.psp-contact-avatar--self   { background: linear-gradient(135deg, #f472b6, #db2777); }
.psp-contact-avatar--pro    { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.psp-contact-avatar--pro svg { width: 22px; height: 22px; }

.psp-contact-body { flex: 1; min-width: 0; }
.psp-contact-name { font-size: 1rem; font-weight: 700; color: var(--pt-text); line-height: 1.25; margin: 0; }
.psp-contact-rel  { font-size: .82rem; color: var(--pt-sub); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.psp-contact-rel-tag {
  padding: 2px 8px; border-radius: 9999px; font-size: .7rem; font-weight: 700;
  background: #fce7f3; color: #be185d; letter-spacing: .02em;
}

.psp-contact-call {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9999px;
  background: var(--pt-teal); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .88rem;
  transition: all .22s; flex-shrink: 0;
  box-shadow: 0 4px 10px -3px rgba(20,184,166,.35);
}
.psp-contact-call:hover { background: var(--pt-teal-dk); transform: translateY(-2px); box-shadow: 0 6px 14px -3px rgba(20,184,166,.45); }
.psp-contact-call svg { width: 14px; height: 14px; }
.psp-contact--pro .psp-contact-call {
  background: #4f46e5; box-shadow: 0 4px 10px -3px rgba(79,70,229,.35);
}
.psp-contact--pro .psp-contact-call:hover { background: #4338ca; }

/* Manage red apoyo link */
.psp-manage {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: .88rem; color: var(--pt-teal);
  text-decoration: none; font-weight: 600;
  padding: 4px 2px;
}
.psp-manage:hover { color: var(--pt-teal-dk); }
.psp-manage svg { width: 14px; height: 14px; transition: transform .2s; }
.psp-manage:hover svg { transform: translateX(3px); }

/* ─── Crisis line block ───────────────────────────────────── */
.psp-crisis {
  margin-top: 18px; padding: 18px 20px;
  background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #fecaca; border-radius: 20px;
  display: flex; align-items: center; gap: 14px;
}
.psp-crisis-ico {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: #fecaca; color: #b91c1c;
  display: flex; align-items: center; justify-content: center;
  animation: pspCrisisPulse 2.4s ease-in-out infinite;
}
.psp-crisis-ico svg { width: 22px; height: 22px; }
.psp-crisis-body { flex: 1; min-width: 0; }
.psp-crisis-label { font-size: .72rem; font-weight: 700; color: #991b1b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.psp-crisis-num { font-size: 1.15rem; font-weight: 800; color: #7f1d1d; line-height: 1.2; }
.psp-crisis-call {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
  border-radius: 9999px; background: #dc2626; color: #fff;
  text-decoration: none; font-weight: 700; font-size: .88rem;
  transition: all .22s; flex-shrink: 0;
  box-shadow: 0 4px 12px -3px rgba(220,38,38,.4);
}
.psp-crisis-call:hover { background: #b91c1c; transform: translateY(-1px); }
.psp-crisis-call svg { width: 14px; height: 14px; }

/* ─── Commitment (your own words) ─────────────────────────── */
.psp-commit {
  position: relative; padding: 22px 22px 22px 48px;
  background: linear-gradient(145deg, #fff1f2 0%, #fefce8 100%);
  border: 1px solid #fecdd3; border-radius: 18px;
}
.psp-commit::before {
  content: '“'; position: absolute; left: 14px; top: -4px;
  font-size: 3.5rem; color: #fb7185; font-family: Georgia, serif;
  line-height: 1; font-weight: 700;
}
.psp-commit-text {
  font-size: 1rem; color: #881337; line-height: 1.7;
  font-family: var(--pt-serif); font-style: italic;
  margin: 0; white-space: pre-wrap;
}

/* ─── Closing ─────────────────────────────────────────────── */
.psp-close {
  text-align: center; padding: 28px 20px 16px;
  color: var(--pt-sub); font-size: .95rem; line-height: 1.6;
}
.psp-close strong { color: var(--pt-text); }
.psp-close-heart { color: #ec4899; font-size: 1.3rem; }

/* ─── Floating crisis SOS (sticky bottom) ────────────────── */
.psp-sos {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 9999px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border: 1px solid #fecaca;
  box-shadow: 0 12px 28px -6px rgba(15,23,42,.15), 0 4px 10px -3px rgba(239,68,68,.2);
  text-decoration: none; font-weight: 700; font-size: .85rem; color: #b91c1c;
  transition: all .22s;
}
.psp-sos:hover { background: #fef2f2; transform: translateX(-50%) translateY(-3px); }
.psp-sos-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  animation: pspCrisisPulse 1.8s ease-in-out infinite;
}
.psp-sos svg { width: 14px; height: 14px; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .psp-intro { padding: 22px 18px 20px; }
  .psp-intro h1 { font-size: 1.3rem; }
  .psp-moment { padding: 18px 16px; border-radius: 20px; }
  .psp-moment-title { font-size: 1.02rem; }
  .psp-contact { flex-wrap: wrap; padding: 12px 14px; }
  .psp-contact-call { margin-left: auto; }
  .psp-crisis { flex-wrap: wrap; }
  .psp-crisis-call { margin-left: auto; }
  .psp-quick { gap: 6px; }
  .psp-chip { padding: 8px 12px; font-size: .82rem; }
  .psp-letter-body { font-size: .96rem; }
  .psp-sos { font-size: .78rem; padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   Portal Guide — Guía visual del portal para pacientes
   Prefix: pg-
═══════════════════════════════════════════════════════════════ */

@keyframes pgFadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pgFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
@keyframes pgPulseRing {
  0%   { transform: scale(1);   opacity: .4; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes pgShimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ─── Page base ───────────────────────────────────────────── */
.pg-page {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f8fdfc;
  color: #0f172a;
  min-height: 100vh;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* ─── Scroll-reveal ───────────────────────────────────────── */
.pg-observe {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.pg-observe.is-visible { opacity: 1; transform: translateY(0); }
.pg-observe.delay-1 { transition-delay: .1s; }
.pg-observe.delay-2 { transition-delay: .2s; }
.pg-observe.delay-3 { transition-delay: .32s; }
.pg-observe.delay-4 { transition-delay: .44s; }

/* ─── Navigation dots ─────────────────────────────────────── */
.pg-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 90;
}
.pg-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
  flex-shrink: 0;
}
.pg-nav-dot.is-active {
  background: #199c82;
  transform: scale(1.55);
  box-shadow: 0 0 0 3px rgba(25, 156, 130, .18);
}
.pg-nav-dot:hover:not(.is-active) { background: #94a3b8; transform: scale(1.2); }
@media (max-width: 640px) { .pg-nav { display: none; } }

/* ─── Hero ────────────────────────────────────────────────── */
.pg-hero {
  background: linear-gradient(145deg, #064e3b 0%, #0d6e5a 25%, #199c82 60%, #1db896 82%, #38c9a8 100%);
  position: relative;
  overflow: hidden;
  padding: 90px 24px 110px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pg-hero-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  pointer-events: none;
}
.pg-hero-circle--1 { width: 420px; height: 420px; top: -120px; right: -100px; }
.pg-hero-circle--2 { width: 290px; height: 290px; bottom: -80px; left: -60px; background: rgba(255,255,255,.06); }
.pg-hero-circle--3 { width: 180px; height: 180px; top: 38%; left: 4%; }

.pg-hero-orb {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 30px;
  animation: pgFloat 3.6s ease-in-out infinite;
}
.pg-hero-orb-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
  animation: pgPulseRing 2.8s ease-out infinite;
}
.pg-hero-orb-ring:last-of-type { animation-delay: 1.4s; }
.pg-hero-orb-core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.pg-hero-orb-core svg { width: 44px; height: 44px; stroke: rgba(255, 255, 255, .92); }
.pg-hero-badge {
  display: inline-block;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 20px;
}
.pg-hero-title {
  color: #fff;
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 16px;
  letter-spacing: -.025em;
  animation: pgFadeInUp .8s ease both;
}
.pg-hero-sub {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.95rem, 2vw, 1.08rem);
  line-height: 1.72;
  max-width: 500px;
  margin: 0 auto 40px;
  font-weight: 400;
  animation: pgFadeInUp .8s .15s ease both;
}
.pg-hero-cards-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
  animation: pgFadeInUp .8s .3s ease both;
}
.pg-hero-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  padding: 14px 20px;
  min-width: 78px;
  backdrop-filter: blur(6px);
  cursor: default;
  transition: all .25s ease;
}
.pg-hero-mini-card svg  { width: 26px; height: 26px; stroke: rgba(255, 255, 255, .92); }
.pg-hero-mini-card span {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .03em;
}
.pg-hero-mini-card:hover { background: rgba(255, 255, 255, .22); transform: translateY(-3px); }
.pg-hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: pgFloat 2.2s ease-in-out infinite;
}
.pg-hero-scroll svg { width: 18px; height: 18px; }

/* ─── Section wrappers ────────────────────────────────────── */
.pg-section { padding: 80px 24px; max-width: 820px; margin: 0 auto; }
.pg-section--alt { background: #f0fdf9; padding: 80px 24px; }
.pg-section--alt-inner { max-width: 820px; margin: 0 auto; }
.pg-section--closing {
  background: linear-gradient(145deg, #064e3b 0%, #0d6e5a 50%, #199c82 100%);
  padding: 88px 24px;
  text-align: center;
}

/* ─── Labels & headings ───────────────────────────────────── */
.pg-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #199c82;
  margin-bottom: 12px;
}
.pg-label-dot { width: 6px; height: 6px; border-radius: 50%; background: #199c82; flex-shrink: 0; }
.pg-title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
.pg-title--light { color: #fff; }
.pg-sub {
  color: #64748b;
  font-size: .97rem;
  line-height: 1.75;
  margin: 0 0 40px;
  max-width: 540px;
}
.pg-sub--light { color: rgba(255,255,255,.75); max-width: 500px; margin: 0 auto 40px; }

/* ─── What-is card ────────────────────────────────────────── */
.pg-what-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: 0 4px 24px -8px rgba(15, 23, 42, .1);
  border: 1px solid #e2e8f0;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.pg-what-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-what-icon svg { width: 32px; height: 32px; stroke: #059669; }
.pg-what-body h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.pg-what-body p  { font-size: .92rem; color: #475569; line-height: 1.72; margin: 0; }
@media (max-width: 520px) { .pg-what-card { flex-direction: column; gap: 16px; padding: 22px 20px; } }

/* ─── Pillars ─────────────────────────────────────────────── */
.pg-pillars-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pg-pillar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fdf9;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 12px 16px;
  flex: 1;
  min-width: 155px;
}
.pg-pillar-icon  { display: flex; align-items: center; flex-shrink: 0; }
.pg-pillar-icon svg { width: 20px; height: 20px; stroke: #059669; }
.pg-pillar-label { font-size: .82rem; font-weight: 600; color: #0f172a; }

/* ─── Steps ───────────────────────────────────────────────── */
.pg-steps { display: flex; flex-direction: column; }
.pg-step { display: flex; gap: 20px; position: relative; padding-bottom: 36px; }
.pg-step:last-child { padding-bottom: 0; }
.pg-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 46px;
  width: 2px;
  height: calc(100% - 46px);
  background: linear-gradient(to bottom, #a7f3d0 60%, transparent);
}
.pg-step-num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #199c82, #0d9488);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(25, 156, 130, .3);
  margin-top: 2px;
}
.pg-step-content { flex: 1; }
.pg-step-content h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 4px 0 6px; }
.pg-step-content p  { font-size: .88rem; color: #64748b; line-height: 1.72; margin: 0; }
.pg-step-visual {
  margin-top: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pg-step-visual-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pg-step-visual-icon svg { width: 18px; height: 18px; stroke: #0284c7; }
.pg-step-visual-text          { font-size: .82rem; color: #475569; line-height: 1.5; }
.pg-step-visual-text strong   { display: block; color: #0f172a; font-weight: 600; font-size: .85rem; margin-bottom: 2px; }

/* ─── Feature cards ───────────────────────────────────────── */
.pg-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.pg-feature-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, .07);
  transition: all .28s ease;
}
.pg-feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px -8px rgba(15, 23, 42, .14); border-color: #a7f3d0; }
.pg-feature-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.pg-feature-card-icon svg { width: 24px; height: 24px; }
.pg-feature-card-icon--teal   { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.pg-feature-card-icon--blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.pg-feature-card-icon--purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.pg-feature-card-icon--amber  { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.pg-feature-card-icon--teal svg   { stroke: #059669; }
.pg-feature-card-icon--blue svg   { stroke: #2563eb; }
.pg-feature-card-icon--purple svg { stroke: #7c3aed; }
.pg-feature-card-icon--amber svg  { stroke: #d97706; }
.pg-feature-card h3 { font-size: .9rem; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.pg-feature-card p  { font-size: .82rem; color: #64748b; line-height: 1.65; margin: 0; }

/* ─── Mockup ──────────────────────────────────────────────── */
.pg-mockup {
  margin-top: 36px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px -10px rgba(15, 23, 42, .12);
  overflow: hidden;
  max-width: 460px;
}
.pg-mockup-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 16px;
}
.pg-mockup-dot             { width: 10px; height: 10px; border-radius: 50%; background: #fca5a5; }
.pg-mockup-dot:nth-child(2){ background: #fde68a; }
.pg-mockup-dot:nth-child(3){ background: #a7f3d0; }
.pg-mockup-title           { margin-left: 8px; font-size: .78rem; font-weight: 600; color: #94a3b8; }
.pg-mockup-note            { padding: 20px 20px 24px; }
.pg-mockup-note-top        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pg-mockup-emo             { display: flex; align-items: center; }
.pg-mockup-emo svg         { width: 22px; height: 22px; stroke: #64748b; }
.pg-mockup-date            { font-size: .78rem; color: #94a3b8; font-weight: 500; }
.pg-mockup-text            { font-size: .9rem; color: #334155; line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.pg-mockup-shimmer {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: pgShimmer 1.6s linear infinite;
}

/* ─── Task flow ───────────────────────────────────────────── */
.pg-task-flow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.pg-task-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 18px;
  padding: 26px 20px;
  border: 1px solid #e2e8f0;
  flex: 1;
  min-width: 175px;
  text-align: center;
  transition: all .25s ease;
}
.pg-task-step:hover { border-color: #a7f3d0; transform: translateY(-2px); box-shadow: 0 6px 20px -6px rgba(15, 23, 42, .1); }
.pg-task-step-ico                { display: flex; align-items: center; justify-content: center; }
.pg-task-step-ico svg            { width: 30px; height: 30px; stroke: #199c82; }
.pg-task-step-body               { display: flex; flex-direction: column; gap: 5px; }
.pg-task-step-body strong        { font-size: .9rem; font-weight: 700; color: #0f172a; }
.pg-task-step-body span          { font-size: .8rem; color: #64748b; line-height: 1.55; }
.pg-task-arrow                   { color: #94a3b8; flex-shrink: 0; }
.pg-task-arrow svg               { width: 22px; height: 22px; }
.pg-task-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 16px 20px;
}
.pg-task-tip svg { width: 18px; height: 18px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.pg-task-tip p   { margin: 0; font-size: .87rem; color: #78350f; line-height: 1.65; }

/* ─── Tools grid ──────────────────────────────────────────── */
.pg-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pg-tool {
  background: #fff;
  border-radius: 18px;
  padding: 24px 20px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .28s ease;
}
.pg-tool:hover { transform: translateY(-2px); box-shadow: 0 6px 20px -6px rgba(15, 23, 42, .12); border-color: #a7f3d0; }
.pg-tool-icon     { display: flex; align-items: center; }
.pg-tool-icon svg { width: 28px; height: 28px; stroke: #199c82; }
.pg-tool h3    { font-size: .9rem; font-weight: 700; color: #0f172a; margin: 0; }
.pg-tool p     { font-size: .82rem; color: #64748b; line-height: 1.65; margin: 0; flex: 1; }
.pg-tool-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 8px;
  background: #f0fdf9;
  color: #059669;
  align-self: flex-start;
}

/* ─── Closing ─────────────────────────────────────────────── */
.pg-closing-icon     { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.pg-closing-icon svg { width: 52px; height: 52px; stroke: rgba(255, 255, 255, .85); }
.pg-closing-title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.pg-closing-sub {
  color: rgba(255, 255, 255, .78);
  font-size: .97rem;
  line-height: 1.75;
  margin: 0 auto 40px;
  max-width: 480px;
}
.pg-closing-quote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 430px;
  margin: 0 auto;
}
.pg-closing-quote-text   { font-size: .95rem; color: rgba(255, 255, 255, .88); font-style: italic; line-height: 1.72; }
.pg-closing-quote-author { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin-top: 4px; }
.pg-closing-access       { margin-top: 40px; }
.pg-closing-access > p   { color: rgba(255, 255, 255, .52); font-size: .85rem; margin: 0 0 12px; }
.pg-closing-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  padding: 12px 24px;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
}
.pg-closing-link:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); color: #fff; }
.pg-closing-link svg    { width: 16px; height: 16px; }
.pg-closing-dots { display: flex; justify-content: center; gap: 10px; margin-top: 52px; }
.pg-closing-dot  { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.pg-closing-dot:nth-child(2) { background: rgba(255, 255, 255, .5); width: 22px; border-radius: 3px; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .pg-hero       { min-height: 100svh; padding: 60px 20px 80px; }
  .pg-section    { padding: 60px 20px; }
  .pg-section--alt     { padding: 60px 20px; }
  .pg-section--closing { padding: 60px 20px; }
  .pg-feature-grid     { grid-template-columns: 1fr 1fr; }
  .pg-tools-grid       { grid-template-columns: 1fr 1fr; }
  .pg-task-flow        { flex-direction: column; }
  .pg-task-arrow       { transform: rotate(90deg); }
  .pg-closing-quote    { padding: 20px 22px; }
  .pg-hero-cards-row   { gap: 8px; }
}
@media (max-width: 420px) {
  .pg-feature-grid  { grid-template-columns: 1fr; }
  .pg-tools-grid    { grid-template-columns: 1fr; }
  .pg-hero-mini-card{ padding: 10px 12px; min-width: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Portal Footer — V2 Identity Strip
   ══════════════════════════════════════════════════════════════════════ */
.pt-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 20px;
    border-top: 1px solid rgba(0,0,0,.07);
    background: transparent;
    flex-shrink: 0;
    opacity: 0;
    animation: ptFooterIn .5s ease .4s forwards;
}
.pt-footer__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pt-footer__item {
    font-size: 11px;
    font-weight: 500;
    color: rgba(100,116,139,.55);
    letter-spacing: .015em;
    white-space: nowrap;
    transition: color .25s ease;
}
.pt-footer:hover .pt-footer__item {
    color: rgba(100,116,139,.9);
}
.pt-footer__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0,0,0,.13);
    flex-shrink: 0;
}
.pt-footer__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(25,156,130,.07);
    color: rgba(25,156,130,.6);
    border: 1px solid rgba(25,156,130,.18);
    transition: all .25s ease;
    user-select: none;
}
.pt-footer:hover .pt-footer__badge {
    background: rgba(25,156,130,.13);
    color: var(--pt-brand-primary, #199c82);
    border-color: rgba(25,156,130,.28);
    box-shadow: 0 0 8px rgba(25,156,130,.14);
}
@keyframes ptFooterIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    .pt-footer { height: 30px; padding: 0 16px; }
    .pt-footer__item { font-size: 10px; }
    .pt-footer__badge { font-size: 9px; padding: 1.5px 6px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Portal — Terms & Conditions screen
   Fase 3: extraido del <style> inline de resources/views/portal/terms.blade.php
   (regla CLAUDE.md: CSS centralizado, sin inline). Las custom-properties
   --pt-* viven mas arriba en este mismo archivo; aqui solo se consumen.
   ───────────────────────────────────────────────────────────────────────── */

.terms-card {
    max-width: 680px;
    padding: 0;
    overflow: hidden;
}

.terms-header {
    padding: 2rem 2rem 1.25rem;
    border-bottom: 1px solid var(--pt-border-lt);
}
.terms-header-ico {
    width: 48px;
    height: 48px;
    border-radius: var(--pt-r);
    background: var(--pt-teal-bg);
    border: 1px solid var(--pt-teal-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}
.terms-header-ico svg {
    width: 22px;
    height: 22px;
    color: var(--pt-teal);
}
.terms-header h1 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--pt-text);
    margin-bottom: .3rem;
}
.terms-header p {
    font-size: .85rem;
    color: var(--pt-sub);
    font-weight: 500;
    line-height: 1.5;
}

.terms-scroll {
    max-height: 380px;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    font-size: .85rem;
    line-height: 1.75;
    color: var(--pt-sub);
    scroll-behavior: smooth;
}
.terms-scroll h2 {
    font-size: .95rem;
    font-weight: 800;
    color: var(--pt-text);
    margin: 0 0 .5rem;
}
.terms-scroll h3 {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pt-text);
    margin: 1.25rem 0 .35rem;
}
.terms-scroll p {
    margin-bottom: .75rem;
}
.terms-scroll::-webkit-scrollbar {
    width: 4px;
}
.terms-scroll::-webkit-scrollbar-thumb {
    background: var(--pt-border);
    border-radius: 2px;
}

/* Helper para etiqueta de version cuando se renderiza customContent */
.terms-version-tag {
    margin-top: 1.5rem;
    font-size: .72rem;
    color: var(--pt-muted);
}

.terms-hint {
    text-align: center;
    font-size: .72rem;
    color: var(--pt-muted);
    font-weight: 600;
    padding: .5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: opacity .3s;
}
.terms-hint.hidden {
    opacity: 0;
    pointer-events: none;
}
.terms-hint svg {
    width: 13px;
    height: 13px;
}

.terms-footer {
    padding: 1.25rem 2rem 2rem;
    border-top: 1px solid var(--pt-border-lt);
    background: var(--pt-bg);
}

.terms-chk-wrap {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--pt-teal-bg);
    border: 1.5px solid rgba(20, 184, 166, .2);
    border-radius: var(--pt-r-sm);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: opacity .2s;
}
.terms-chk-wrap.locked {
    opacity: .4;
    pointer-events: none;
}
.terms-chk-wrap input {
    width: 17px;
    height: 17px;
    accent-color: var(--pt-teal);
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}
.terms-chk-wrap label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pt-sub);
    cursor: pointer;
    line-height: 1.45;
}
.terms-chk-wrap label strong {
    color: var(--pt-text);
}

@media (max-width: 600px) {
    .terms-header,
    .terms-scroll,
    .terms-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .terms-scroll {
        max-height: 280px;
    }
    .terms-card {
        border-radius: var(--pt-r-lg);
    }
}

/* ════════════════════════════════════════════════════════════════════
   === PORTAL V2 ===
   Fase 1 — Quick wins visuales + personalización inmediata
   Bloque autocontenido. Para revertir: borrar todo desde este marcador
   hasta el final del archivo.
   ════════════════════════════════════════════════════════════════════ */

/* Tokens propios de V2 (no pisan los originales) */
.pt-app .db-hero-v2 {
  --v2-accent:        var(--pt-brand-primary, var(--pt-teal));
  --v2-accent-dk:     var(--pt-teal-dk);
  --v2-accent-soft:   var(--pt-teal-bg);
  --v2-accent-lt:     var(--pt-teal-lt);
  --v2-warm:          #f59e0b;
  --v2-warm-soft:     #fef3c7;
  --v2-warm-text:     #92400e;
  --v2-card:          #ffffff;
  --v2-border:        #e2e8f0;
  --v2-ink:           #0f172a;
  --v2-ink-sub:       #475569;
  --v2-ink-muted:     #64748b;
  --v2-radius:        20px;
  --v2-radius-pill:   9999px;
  --v2-shadow:        0 1px 3px rgba(15,23,42,.04), 0 6px 24px rgba(15,23,42,.05);
  --v2-shadow-cta:    0 6px 18px rgba(20,184,166,.28);
  --v2-shadow-cta-hv: 0 10px 28px rgba(20,184,166,.36);
  --v2-trans:         200ms cubic-bezier(.4,0,.2,1);
}

/* CTA principal — TEAL, 3 estados */
.db-hero-v2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.85rem;
  min-height: var(--pt-touch-min, 44px);
  border: none;
  border-radius: var(--v2-radius-pill);
  font-family: var(--pt-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  background: linear-gradient(180deg, var(--v2-accent) 0%, var(--v2-accent-dk) 100%);
  color: #fff;
  box-shadow: var(--v2-shadow-cta);
  transition: transform var(--v2-trans), box-shadow var(--v2-trans), background var(--v2-trans);
}

/* Estado: ya escribió hoy → más sutil, no pulsa */
.db-hero-v2__cta--done {
  background: #fff;
  color: var(--v2-accent-dk);
  border: 1.5px solid var(--v2-accent-lt);
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}

/* Estado: racha rota → tono cálido, no urgente */
.db-hero-v2__cta--broken {
  background: linear-gradient(180deg, var(--v2-accent) 0%, #0891b2 100%);
}

/* Pulso muy sutil cuando no hay nota hoy (estado fresh) */
@keyframes db-v2-pulse {
  0%, 100% { box-shadow: var(--v2-shadow-cta); }
  50%      { box-shadow: 0 8px 22px rgba(20,184,166,.40); }
}

/* Skeleton hero V2 */
.db-sk-hero-v2 {
  max-width: 760px;
  margin: 0 auto 1.75rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
}
.db-sk-hero-v2__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.db-sk-hero-v2__greet { flex: 1; }

/* Hero original (.db-hero) restaurado a pedido del usuario — el V2 hero
   (.db-hero-v2) ya no se renderiza desde el Blade. Mantenemos oculto el
   banner de bienvenida legacy (.db-welcome-msg) para no duplicar si en algun
   rollback parcial reaparece.
   NOTA (QA 2026-07-10): .db-reminder se SACÓ de este hide — es una feature
   viva (recordatorio amable de la doctora) que quedó sin render por error.
   Restaurada con su propio markup + estilos arriba. */
.db-welcome-msg { display: none !important; }

/* ── Responsive Hero V2 ─────────────────────────────────────── */
@media (max-width: 600px) {
  .db-hero-v2 {
    padding: 1.25rem 1rem;
    border-radius: 18px;
  }
  .db-hero-v2__head {
    gap: .7rem;
    margin-bottom: .9rem;
  }
  .db-hero-v2__avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
  .db-hero-v2__hello { font-size: 1.15rem; }
  .db-hero-v2__date  { font-size: .78rem; }
  .db-hero-v2__chips { gap: .35rem; }
  .db-chip { font-size: .72rem; padding: .3rem .6rem; }
  .db-hero-v2__quote { font-size: 1rem; margin: .9rem auto 1.1rem; }
  .db-hero-v2__cta {
    width: 100%;
    max-width: 320px;
    padding: .9rem 1.2rem;
    font-size: .95rem;
  }
  .db-hero-v2__prompt { font-size: .82rem; }
  .db-hero-v2__calm-hint {
    width: 100%;
    max-width: 320px;
    padding: .65rem 1rem;
  }
  .db-hero-v2__inline-msg { padding: .7rem .85rem; font-size: .86rem; }
}

@media (max-width: 380px) {
}

/* ── Respetar reduced-motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-hero-v2__cta,
  .db-hero-v2__cta--fresh,
  .db-hero-v2__calm-hint { animation: none !important; transition: none !important; }
  .db-hero-v2__cta:hover { transform: none; }
}

/* ── Topbar: ajuste de tabs (Mi red agregada — 4 tabs) ─────────
   Desktop / tablet horizontal: aprieta padding y baja un poco la
   tipografía para que 4 tabs no rompan línea. NO toca móvil porque
   el diseño existente (≤768) ya stackea icono + label como bottom-bar
   y eso ya funciona con N tabs.
*/
@media (min-width: 769px) and (max-width: 1100px) {
  .pt-topbar-nav { gap: .15rem; }
  .pt-topbar-nav .pt-topbar-tab {
    padding: .55rem .9rem;
    font-size: .78rem;
    gap: .35rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   === PORTAL V2: INTERACTIONS ===
   Fase 2 — Microanimaciones, empty state, Mi red widget, insight,
   stroke-draw del CTA done, heart-beat mood, ripple pill hoy.
   Para revertir: borrar desde aqui hasta END PORTAL V2 INTERACTIONS.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Staggered fade-up al cargar el dashboard ───────────────
   Aprovecha la clase ya existente .pt-animate-in. Reforzamos solo
   transform/opacity para que la entrada sea mas suave (240ms, ease).
*/
@keyframes v2-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.pt-app .db-hero-v2.pt-animate-in,
.pt-app .db-calm.pt-animate-in,
.pt-app .db-month-insight.pt-animate-in,
.pt-app .db-mired.pt-animate-in,
.pt-app .db-stats .pt-animate-in {
  animation: v2-fade-up 240ms cubic-bezier(.4,0,.2,1) both;
}

/* ── 2. Pulso del CTA fresh — ya definido en V2 base. Reduced-motion
       desactivado en el mismo bloque V2 base. Nada que agregar aqui. */

/* ── 3. Check stroke-draw cuando CTA pasa a estado 'done' ──────
   El SVG del check tiene 9 nodos en la polyline (20 6 9 17 4 12);
   con stroke-dasharray ~36 cubrimos todo el trazo. Animacion solo
   en --done, una sola vez al render.
*/
@keyframes v2-stroke-draw {
  from { stroke-dashoffset: 36; }
  to   { stroke-dashoffset: 0; }
}

/* ── 4. Ripple sutil en el pill "hoy" de la racha ──────────────
   Una sola pulsacion al cargar — invita la mirada sin distraer.
*/
.db-wpill.v2-ripple-on-load {
  position: relative;
}
.db-wpill.v2-ripple-on-load::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--pt-teal);
  opacity: 0;
  pointer-events: none;
  animation: v2-ripple 1400ms cubic-bezier(.4,0,.2,1) 600ms 1 forwards;
}
@keyframes v2-ripple {
  0%   { opacity: 0; transform: scale(.85); }
  40%  { opacity: .55; }
  100% { opacity: 0; transform: scale(1.25); }
}

/* ── 5. Heart-beat 200ms al seleccionar mood ──────────────────
   Se aplica a la clase .v2-beat que el JS V2 agrega/quita al click.
   Funciona en check-in (.db-checkin-btn) y en modal de nota
   (.db-emo-btn). 200ms, ligero overshoot.
*/
@keyframes v2-beat {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.db-emo-btn.v2-beat,
.db-checkin-btn.v2-beat {
  animation: v2-beat 200ms cubic-bezier(.34,1.56,.64,1);
}
/* Sutil glow del icono mientras se activa */
.db-emo-btn.v2-beat .db-emo-icon,
.db-checkin-btn.v2-beat .db-checkin-emoji {
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1);
}

/* ── 6. Empty state ilustrado del diario ──────────────────────
   Reemplaza pt-empty cuando incluye .db-diary-empty.
*/
.db-diary-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem 2.5rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--pt-teal-bg) 100%);
  border: 1px solid var(--pt-border);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 24px rgba(15,23,42,.05);
  grid-column: 1 / -1;
}
.db-diary-empty__art {
  width: 100%;
  max-width: 220px;
  margin: 0 auto .9rem;
  color: var(--pt-teal-dk);
}
.db-diary-empty__art svg { width: 100%; height: auto; display: block; }
.db-diary-empty__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pt-text);
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.db-diary-empty__desc {
  font-size: .95rem;
  color: var(--pt-sub);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 0 1.2rem;
}
.db-diary-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  min-height: 44px;
  background: linear-gradient(180deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .95rem;
  font-family: var(--pt-font);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20,184,166,.28);
  transition: transform 200ms cubic-bezier(.4,0,.2,1), box-shadow 200ms cubic-bezier(.4,0,.2,1);
}
.db-diary-empty__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,184,166,.36); }
.db-diary-empty__cta:focus-visible { outline: 3px solid var(--pt-teal-lt); outline-offset: 2px; }
.db-diary-empty__cta svg { width: 16px; height: 16px; }

/* ── 7. Widget "Mi red" en dashboard ──────────────────────────── */
.db-mired {
  max-width: 1000px;
  margin: 1.5rem auto 1.75rem;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 24px rgba(15,23,42,.05);
}
.db-mired-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}
.db-mired-hdr h2 {
  display: flex; align-items: center; gap: .55rem;
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--pt-text);
  letter-spacing: -.005em;
}
.db-mired-hdr h2 svg { width: 18px; height: 18px; color: var(--pt-teal); }
.db-mired-more {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .82rem; font-weight: 600; color: var(--pt-teal-dk);
  text-decoration: none;
  padding: .35rem .65rem; border-radius: 9999px;
  transition: background 200ms cubic-bezier(.4,0,.2,1);
}
.db-mired-more:hover { background: var(--pt-teal-bg); }
.db-mired-more svg { width: 13px; height: 13px; }
.db-mired-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.db-mired-card {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem .85rem;
  background: #fafbfc;
  border: 1px solid var(--pt-border-lt);
  border-radius: 14px;
  transition: border-color 200ms cubic-bezier(.4,0,.2,1), background 200ms cubic-bezier(.4,0,.2,1);
}
.db-mired-card:hover { background: #fff; border-color: var(--pt-teal-lt); }
.db-mired-avatar {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .88rem;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.db-mired-body { min-width: 0; flex: 1; }
.db-mired-name { font-size: .92rem; font-weight: 600; color: var(--pt-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-mired-rel { font-size: .76rem; color: var(--pt-muted); margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-mired-actions { display: flex; gap: .3rem; }
.db-mired-act {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  color: var(--pt-text2);
  background: #fff;
  border: 1px solid var(--pt-border);
  text-decoration: none;
  transition: background 200ms cubic-bezier(.4,0,.2,1), color 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}
.db-mired-act svg { width: 14px; height: 14px; }
.db-mired-act:hover { background: var(--pt-teal-bg); color: var(--pt-teal-dk); border-color: var(--pt-teal-lt); transform: translateY(-1px); }
.db-mired-act--wa:hover { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.db-mired-act:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }

/* Empty state Mi red */
.db-mired-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.5rem 1rem 1.75rem;
  background: var(--pt-teal-bg);
  border-radius: 14px;
  border: 1px dashed var(--pt-teal-lt);
}
.db-mired-empty svg { width: 38px; height: 38px; color: var(--pt-teal-dk); margin-bottom: .55rem; }
.db-mired-empty-title { font-size: 1rem; font-weight: 700; color: var(--pt-text); margin: 0 0 .15rem; }
.db-mired-empty-desc { font-size: .85rem; color: var(--pt-sub); line-height: 1.5; max-width: 340px; margin: 0 0 .9rem; }
.db-mired-empty-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; min-height: 40px;
  background: var(--pt-teal-dk); color: #fff;
  border-radius: 9999px; font-size: .85rem; font-weight: 600;
  text-decoration: none;
  transition: background 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}
.db-mired-empty-cta:hover { background: var(--pt-teal); transform: translateY(-1px); }
.db-mired-empty-cta svg { width: 14px; height: 14px; }

/* ── 8. Insight "Tu mes en una línea" ────────────────────────── */
.db-month-insight {
  max-width: 760px;
  margin: 1rem auto 1.25rem;
  padding: .8rem 1.1rem;
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 9999px;
  font-size: .9rem; color: var(--pt-text2);
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  /* Centra el bloque a si mismo (inline-flex con max-width) */
  display: flex;
}
.db-month-insight svg { width: 16px; height: 16px; color: var(--pt-teal-dk); flex: 0 0 auto; }
.db-month-insight strong { color: var(--pt-text); font-weight: 700; }

/* ── 10. Consolidacion de breakpoints — V2 dashboard ───────────
   Los breakpoints canonicos del portal V2 son 480 / 768 / 1024 / 1280.
   Estas reglas estandarizan el comportamiento de los componentes V2
   nuevos en esos cuatro cortes. Las reglas legacy (db-stats, db-calm,
   note-modal) viven en su CSS original y NO se tocan en esta fase
   (riesgo de regresion vs beneficio cosmetico: dejar a Fase 3).
*/

/* ≤ 480px — móviles pequeños */
@media (max-width: 480px) {
  .db-mired { padding: 1rem 1rem 1.1rem; border-radius: 16px; }
  .db-mired-grid { grid-template-columns: 1fr; gap: .55rem; }
  .db-mired-card { padding: .65rem .7rem; }
  .db-mired-act { width: 38px; height: 38px; }  /* touch >= 44 nos lo da hover area */
  .db-mired-act svg { width: 15px; height: 15px; }
  .db-month-insight { font-size: .82rem; padding: .65rem .9rem; }
  .db-diary-empty { padding: 1.5rem 1rem 1.75rem; }
  .db-diary-empty__art { max-width: 180px; }
  .db-diary-empty__title { font-size: 1.05rem; }
  .db-diary-empty__desc { font-size: .88rem; }
  .db-diary-empty__cta { width: 100%; max-width: 280px; justify-content: center; }
}

/* 481px – 768px — tablet vertical */
@media (min-width: 481px) and (max-width: 768px) {
  .db-mired { padding: 1.1rem 1.2rem 1.3rem; }
  .db-mired-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}

/* 769px – 1024px — tablet horizontal / laptop pequeña */
@media (min-width: 769px) and (max-width: 1024px) {
  .db-mired-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 1280px — desktop amplio */
@media (min-width: 1280px) {
  .db-mired { max-width: 1100px; }
}

/* ── 11. Reduced motion — desactiva animaciones nuevas ─────────
   Las animaciones nuevas (fade-up, stroke-draw, ripple, beat) se
   desactivan. Las clases se mantienen para que el estado visual
   final sea correcto, solo se quita el movimiento.
*/
@media (prefers-reduced-motion: reduce) {
  .pt-app .db-hero-v2.pt-animate-in,
  .pt-app .db-calm.pt-animate-in,
  .pt-app .db-month-insight.pt-animate-in,
  .pt-app .db-mired.pt-animate-in,
  .pt-app .db-stats .pt-animate-in { animation: none !important; }
  .db-hero-v2__cta--done svg polyline {
    stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important;
  }
  .db-wpill.v2-ripple-on-load::after { animation: none !important; opacity: 0; }
  .db-emo-btn.v2-beat,
  .db-checkin-btn.v2-beat { animation: none !important; }
  .db-diary-empty__cta:hover,
  .db-mired-act:hover,
  .db-mired-empty-cta:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL V2 INTERACTIONS ===
   ════════════════════════════════════════════════════════════════════ */

/* ─── PORTAL V2: CALM_TRIGGER_COMPACT ─────────────────────────────────
   Móvil: row compacta y sobria. Icono pequeño (38px), título único, chevron
   discreto. La key del fix: `gap: .85rem` en `.db-calm-body` para separar
   icono del título. Sin gradientes exagerados, sin respiración, sin
   microcopy extra. Desktop intacto.
*/
@media (max-width: 600px) {
  .db-calm {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: .75rem .9rem;
    gap: .85rem;
    margin: 0 auto 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20,184,166,.08) 0%, rgba(20,184,166,.02) 100%);
    border: 1px solid rgba(20,184,166,.18);
    box-shadow: 0 1px 3px rgba(20,184,166,.05);
    backdrop-filter: none;
  }
  .db-calm-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
  }
  .db-calm-ico svg { width: 17px; height: 17px; }
  .db-calm-ico::after { display: none; } /* sin halo pulsante en móvil */

  .db-calm-body {
    flex: 1;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: .85rem;        /* ← key fix: separación entre icono y título */
    min-width: 0;
  }
  /* Solo el text-block (no el icono) recibe flex:1.
     Si esto se aplicara al .db-calm-ico el icono se estiraría como banda. */
  .db-calm-body > div:not(.db-calm-ico) { min-width: 0; flex: 1; }

  .db-calm-title {
    font-size: .92rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.005em;
  }
  .db-calm-desc { display: none; } /* descripción larga oculta en móvil */

  .db-calm-arrow {
    margin-left: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255,255,255,.8);
    color: var(--pt-teal-dk);
    border-radius: 9999px;
    justify-content: center;
    box-shadow: none;
    flex-shrink: 0;
    gap: 0;
  }
  .db-calm-arrow__label { display: none; } /* oculta "Entrar" en móvil */
  .db-calm-arrow svg { width: 14px; height: 14px; }
}
/* === END PORTAL V2: CALM_TRIGGER_COMPACT === */

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL V2 ===
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   === PORTAL V3 — WAVE A ===
   Fase 3 / Wave A — Heatmap, Acción recomendada, Memory chip, Tema hora.
   Cada bloque interno marcado con su feature flag.
   Para revertir TODA Wave A: borrar desde aqui hasta END PORTAL V3 WAVE A.
   ════════════════════════════════════════════════════════════════════ */


/* ─── PORTAL V3: TIME_THEME ─────────────────────────────────────────
   Tema cromatico sutil por hora del dia. Solo cambia el gradiente del
   borde superior del hero + un wash de fondo muy bajo. Contraste de
   texto se preserva (siempre fondo blanco). No depende de prefers-
   color-scheme — el usuario no eligio dark mode, es horario.
*/
.db-hero-v2[data-time-band="morning"]::before {
  background: linear-gradient(90deg, #fbbf24 0%, var(--pt-teal) 100%);
  opacity: .8;
}
@media (max-width: 480px) {
}
/* === END PORTAL V3: MEMORY_CHIP === */


/* ─── PORTAL V3: RECOMMENDED_ACTION ────────────────────────────────
   Card de "Para ti, ahora" — invitacion, NUNCA prescripcion.
   Tono variable por kind (write/breath/calm/rest/keep) en bandita
   lateral. Cuerpo principal siempre blanco (legibilidad).
*/
.db-rec-action {
  position: relative;
  max-width: 760px;
  margin: 1rem auto 1.5rem;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem 1rem 1.25rem;
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 24px rgba(15,23,42,.05);
  overflow: hidden;
}
.db-rec-action::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--pt-teal);
}

.db-rec-action__ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pt-teal-bg);
  color: var(--pt-teal-dk);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.db-rec-action__ico svg { width: 22px; height: 22px; }
.db-rec-action--breath .db-rec-action__ico { background: #ecfeff; color: #0e7490; }
.db-rec-action--calm   .db-rec-action__ico { background: #f5f3ff; color: #6d28d9; }
.db-rec-action--rest   .db-rec-action__ico { background: #eef2ff; color: #4338ca; }

.db-rec-action__body { min-width: 0; }
.db-rec-action__eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pt-muted);
  margin: 0 0 .15rem;
}
.db-rec-action__title {
  margin: 0 0 .15rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pt-text);
  line-height: 1.25;
  letter-spacing: -.005em;
}
.db-rec-action__desc {
  margin: 0;
  font-size: .85rem;
  color: var(--pt-sub);
  line-height: 1.45;
}

.db-rec-action__actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
  flex: 0 0 auto;
}
.db-rec-action__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem 1.05rem; min-height: 40px;
  background: linear-gradient(180deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-family: var(--pt-font);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,184,166,.22);
  transition: transform 200ms cubic-bezier(.4,0,.2,1), box-shadow 200ms cubic-bezier(.4,0,.2,1);
}
.db-rec-action__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,184,166,.32); }
.db-rec-action__cta:focus-visible { outline: 3px solid var(--pt-teal-lt); outline-offset: 2px; }
.db-rec-action__cta svg { width: 13px; height: 13px; }
.db-rec-action__dismiss {
  background: transparent;
  border: none;
  color: var(--pt-muted);
  font-family: var(--pt-font);
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 9999px;
  transition: color 200ms cubic-bezier(.4,0,.2,1), background 200ms cubic-bezier(.4,0,.2,1);
}
.db-rec-action__dismiss:hover { color: var(--pt-text2); background: var(--pt-border-lt); }
.db-rec-action__dismiss:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }

@media (max-width: 600px) {
  .db-rec-action {
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "ico body"
      "actions actions";
    padding: .9rem 1rem;
    gap: .75rem;
    border-radius: 16px;
  }
  .db-rec-action__ico { grid-area: ico; width: 40px; height: 40px; }
  .db-rec-action__ico svg { width: 18px; height: 18px; }
  .db-rec-action__body { grid-area: body; }
  .db-rec-action__actions {
    grid-area: actions;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: .25rem;
  }
  .db-rec-action__cta { flex: 1; justify-content: center; }
}
/* === END PORTAL V3: RECOMMENDED_ACTION === */


/* ─── PORTAL V3: HEATMAP ───────────────────────────────────────────
   Heatmap mensual de notas. Paleta teal de 4 niveles (0/1/2/3+).
   Cero rojo. Cero "fallaste". Hueco neutro para dias sin notas.
*/
.db-heatmap {
  max-width: 760px;
  margin: 1.25rem auto 1.5rem;
  padding: 1.25rem 1.4rem 1.1rem;
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 24px rgba(15,23,42,.05);
}
.db-heatmap__hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.db-heatmap__title {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--pt-text);
  letter-spacing: -.005em;
}
.db-heatmap__title svg { width: 18px; height: 18px; color: var(--pt-teal); }
.db-heatmap__month {
  font-size: .82rem;
  font-weight: 600;
  color: var(--pt-muted);
}
.db-heatmap__empty {
  margin: -.25rem 0 .9rem;
  font-size: .88rem;
  color: var(--pt-sub);
  line-height: 1.45;
}

.db-heatmap__grid {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .5rem .65rem;
  align-items: start;
}
.db-heatmap__dows {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: .3rem;
  font-size: .65rem;
  font-weight: 700;
  color: var(--pt-muted);
  text-align: center;
  letter-spacing: .02em;
  padding-top: 2px;
}
.db-heatmap__dow { line-height: 28px; }
.db-heatmap__weeks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .3rem;
}
.db-heatmap__week {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: .3rem;
}
.db-heatmap__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  font-weight: 600;
  color: transparent;             /* el dia se muestra solo en hover/focus visibles */
  transition: transform 160ms cubic-bezier(.4,0,.2,1);
}
.db-heatmap__cell--out { background: transparent; border: none; }
.db-heatmap__cell--lvl-0 {
  background: var(--pt-border-lt);
  border: 1px solid var(--pt-border);
}
.db-heatmap__cell--lvl-1 {
  background: #ccfbf1;
  border: 1px solid #99f6e4;
}
.db-heatmap__cell--lvl-2 {
  background: #5eead4;
  border: 1px solid #2dd4bf;
}
.db-heatmap__cell--lvl-3 {
  background: var(--pt-teal-dk);
  border: 1px solid #0f766e;
}
.db-heatmap__cell.is-today {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}
.db-heatmap__cell.is-future {
  opacity: .35;
}
.db-heatmap__cell:hover:not(.db-heatmap__cell--out) {
  transform: scale(1.12);
  color: var(--pt-text);
}
.db-heatmap__cell--lvl-2:hover .db-heatmap__day,
.db-heatmap__cell--lvl-3:hover .db-heatmap__day { color: #fff; }

.db-heatmap__legend {
  display: flex; align-items: center; gap: .3rem;
  justify-content: flex-end;
  margin-top: 1rem;
  font-size: .7rem;
  color: var(--pt-muted);
}
.db-heatmap__legend .db-heatmap__cell {
  width: 14px; height: 14px; min-height: 14px;
  border-radius: 3px;
}
.db-heatmap__legend-label { padding: 0 .25rem; }

@media (max-width: 600px) {
  .db-heatmap { padding: 1rem 1rem 1rem; border-radius: 16px; }
  .db-heatmap__cell { min-height: 22px; border-radius: 4px; }
  .db-heatmap__dow  { line-height: 22px; font-size: .6rem; }
  .db-heatmap__grid { gap: .35rem .45rem; }
  .db-heatmap__weeks { gap: .25rem; }
  .db-heatmap__week { gap: .25rem; }
}
@media (max-width: 380px) {
  .db-heatmap__hdr { flex-direction: column; align-items: flex-start; gap: .25rem; }
}
/* === END PORTAL V3: HEATMAP === */


/* ─── PORTAL V3: REDUCED_MOTION ────────────────────────────────────
   Bloque transversal Wave A.
*/
@media (prefers-reduced-motion: reduce) {
  .db-rec-action__cta:hover { transform: none; }
  .db-heatmap__cell:hover { transform: none; }
  .db-rec-action.pt-animate-in,
  .db-heatmap.pt-animate-in { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL V3 WAVE A ===
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   === PORTAL V3 — WAVE B ===
   Fase 3 / Wave B — Símbolo personal, Meta semanal, Categoría prompts,
   Favoritos Calm. Bloque autocontenido. Para revertir Wave B completa:
   borrar entre este marcador y END PORTAL V3 WAVE B.
   ════════════════════════════════════════════════════════════════════ */


/* ─── PORTAL V3: PERSONAL_SYMBOL ────────────────────────────────────
   Símbolo personal pequeño al lado del nombre en el hero. Decorativo,
   no clínico. Color heredado del avatar para coherencia.
*/
.db-hero-v2__hello { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
@media (max-width: 480px) {
}
/* === END PORTAL V3: PERSONAL_SYMBOL === */


/* ─── PORTAL V3: PERSONAL_GOALS ────────────────────────────────────
   Pill de meta semanal con barra de progreso. Sin "fracaso" — el
   máximo se llena suavemente y mensaje siempre positivo.
*/
.db-goal {
  max-width: 760px;
  margin: 1rem auto 1.25rem;
  padding: .95rem 1.15rem;
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.db-goal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}
.db-goal__title {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 700; color: var(--pt-text);
}
.db-goal__title svg { width: 16px; height: 16px; color: var(--pt-teal-dk); flex: 0 0 auto; }
.db-goal__count {
  font-size: .82rem;
  color: var(--pt-sub);
  font-weight: 500;
}
.db-goal__count strong { color: var(--pt-text); font-weight: 700; }
.db-goal__bar {
  width: 100%;
  height: 8px;
  background: var(--pt-border-lt);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: .55rem;
}
.db-goal__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
  border-radius: 9999px;
  transition: width 400ms cubic-bezier(.4,0,.2,1);
}
.db-goal__hint {
  margin: 0;
  font-size: .82rem;
  color: var(--pt-sub);
  line-height: 1.4;
}
@media (max-width: 480px) {
  .db-goal { padding: .85rem 1rem; border-radius: 14px; }
  .db-goal__head { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
/* === END PORTAL V3: PERSONAL_GOALS === */


/* ─── PORTAL V3: WAVE_B PROFILE PICKERS (shared base) ──────────────
   UI uniforme para los 4 selectores en el perfil. Convención: opciones
   en grid, estado seleccionado con borde teal + fondo claro. Touch
   targets >= 44px.
*/
.v3-prefs-card { margin-bottom: 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.v3-symbol-opt.is-on {
  border-color: var(--pt-teal);
  background: var(--pt-teal-bg);
}
.v3-goal-opt.is-on {
  border-color: var(--pt-teal);
  background: var(--pt-teal-bg);
}
@media (min-width: 768px) {
}
.v3-cat-opt.is-on {
  border-color: var(--pt-teal);
  background: var(--pt-teal-bg);
}


/* Favoritos de Calm (multi-select, max 3) */
.v3-favs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 600px) {
}
.v3-fav-opt.is-on::before {
  background: var(--pt-teal);
  border-color: var(--pt-teal-dk);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
}
.v3-fav-opt.is-on {
  border-color: var(--pt-teal);
  background: var(--pt-teal-bg);
}
.v3-fav-opt.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}


/* Reduced motion para Wave B */
@media (prefers-reduced-motion: reduce) {
  .v3-symbol-opt:hover,
  .v3-goal-opt:hover,
  .v3-cat-opt:hover,
  .v3-pref-submit:hover { transform: none; }
  .db-goal__fill { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL V3 WAVE B ===
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   === PORTAL V3 — WAVE C ===
   Fase 3 / Wave C — Calm: recomendación (Item 8), favoritos visual
   (Item 3), mood pre/post (Item 4). Bloque autocontenido. Para revertir
   Wave C completa: borrar entre este marcador y END PORTAL V3 WAVE C.
   ════════════════════════════════════════════════════════════════════ */


/* ─── PORTAL V3: CALM_RECOMMENDATIONS ──────────────────────────────
   Banner "Para ti, hoy" arriba de la lista de técnicas. Tono cálido,
   con eyebrow + título + razón explicable. CTA toda la card (es un
   <button> nativo que llama a calmStart).
*/
.calm-reco {
  display: flex; flex-direction: column; gap: .25rem;
  width: 100%;
  margin: 0 auto 1.25rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
  border: 1.5px solid var(--pt-teal-lt);
  border-radius: 16px;
  color: var(--pt-teal-dk);
  text-align: left;
  font-family: var(--pt-font);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.4,0,.2,1), box-shadow 200ms cubic-bezier(.4,0,.2,1);
}
.calm-reco:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20,184,166,.18);
}
.calm-reco:focus-visible { outline: 3px solid var(--pt-teal); outline-offset: 2px; }
.calm-reco__eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0e7490;
  opacity: .85;
}
.calm-reco__title {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pt-text);
  line-height: 1.25;
}
.calm-reco__title svg { width: 13px; height: 13px; color: var(--pt-teal-dk); }
.calm-reco__reason {
  font-size: .82rem;
  color: var(--pt-text2);
  line-height: 1.4;
}
@media (max-width: 480px) {
  .calm-reco { padding: .85rem 1rem; border-radius: 14px; }
  .calm-reco__title { font-size: .92rem; }
  .calm-reco__reason { font-size: .78rem; }
}
/* === END PORTAL V3: CALM_RECOMMENDATIONS === */


/* ─── PORTAL V3: CALM_FAVORITES ────────────────────────────────────
   Marker visual en técnicas favoritas. NO altera ni desplaza el layout
   existente — solo añade una estrellita y un borde sutil.
*/
.calm-tech-row.v3-fav {
  background: linear-gradient(180deg, #fff 0%, var(--pt-teal-bg) 100%);
  border-color: var(--pt-teal-lt);
}
.calm-tech-row.v3-fav::after {
  content: '';
  position: absolute;
  top: .5rem; right: 2.2rem;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d9488' stroke='%230d9488' stroke-width='1.5'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: .85;
}
/* === END PORTAL V3: CALM_FAVORITES === */


/* ─── PORTAL V3: CALM_MOOD_TRACKING (mood after) ───────────────────
   Bloque inline en el stage Checkin. Opt-in: el paciente puede ignorarlo
   y seguir con los 3 botones existentes (Mejor / Otra técnica / Cerrar).
*/
.calm-mood-after {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  margin: 1rem auto 1.25rem;
  padding: .85rem 1rem;
  background: var(--pt-card);
  border: 1px dashed var(--pt-border);
  border-radius: 14px;
  max-width: 480px;
}
.calm-mood-after__label {
  font-size: .82rem;
  color: var(--pt-sub);
  text-align: center;
  line-height: 1.4;
}
.calm-mood-after__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  width: 100%;
}
.calm-mood-after__btn {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem .3rem;
  min-height: 60px;
  background: var(--pt-bg);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: var(--pt-font);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 200ms cubic-bezier(.4,0,.2,1), border-color 200ms cubic-bezier(.4,0,.2,1), transform 160ms cubic-bezier(.4,0,.2,1);
}
.calm-mood-after__btn:hover { background: #fff; border-color: var(--pt-teal-lt); transform: translateY(-1px); }
.calm-mood-after__btn.is-on {
  background: var(--pt-teal-bg);
  border-color: var(--pt-teal);
}
.calm-mood-after__btn:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }
.calm-mood-after__btn-lbl {
  font-size: .65rem;
  font-weight: 600;
  color: var(--pt-sub);
  text-transform: lowercase;
}
.calm-mood-after__btn.is-on .calm-mood-after__btn-lbl { color: var(--pt-teal-dk); }

@media (max-width: 480px) {
  .calm-mood-after { padding: .7rem .85rem; }
  .calm-mood-after__btn { font-size: 1.1rem; min-height: 52px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .calm-reco:hover,
  .calm-mood-after__btn:hover { transform: none; }
}
/* === END PORTAL V3: CALM_MOOD_TRACKING === */

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL V3 WAVE C ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL BOTTOM NAV V2 ===
   Auto-hide bottom navigation flotante tipo cápsula (estilo Instagram
   adaptado a HealthTech). Solo visible en móvil (<=768px). Oculta el
   nav legacy `.pt-topbar-nav` en mobile para no duplicar.
   Para revertir: borrar entre PORTAL BOTTOM NAV V2 y END PORTAL BOTTOM NAV V2.
   ════════════════════════════════════════════════════════════════════ */

/* Default: oculto en desktop/tablet (>768px) */
.portal-bottom-nav { display: none; }

@media (max-width: 768px) {
  /* Esconder el nav legacy del topbar para evitar doble navegación.
     El header (avatar + saludo + logout) sigue visible arriba. */
  .pt-topbar-nav,
  .pt-topbar-pill { display: none !important; }

  /* Padding bottom al contenido para que el nav flotante no tape
     el final del scroll. Suma altura aprox del nav + safe area. */
  .pt-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Cápsula flotante ─────────────────────────────────────── */
  .portal-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;

    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(0);
    z-index: 60;

    width: calc(100% - 24px);
    max-width: 380px;

    padding: 8px;

    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);

    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 9999px;

    box-shadow:
      0 8px 24px rgba(15, 23, 42, 0.12),
      0 2px 6px rgba(15, 23, 42, 0.05);

    transition:
      transform 220ms cubic-bezier(.4,0,.2,1),
      padding 220ms cubic-bezier(.4,0,.2,1),
      opacity 200ms cubic-bezier(.4,0,.2,1);
  }

  /* Entrada suave al cargar */
  .portal-bottom-nav { animation: portalBnavEnter 320ms cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes portalBnavEnter {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* Items */
  .portal-bnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    position: relative;
    text-decoration: none;
    color: var(--pt-sub, #64748b);
    border-radius: 9999px;
    padding: 8px 4px;
    min-height: 44px;

    transition:
      background 220ms cubic-bezier(.4,0,.2,1),
      color 220ms cubic-bezier(.4,0,.2,1),
      padding 220ms cubic-bezier(.4,0,.2,1);

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .portal-bnav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .portal-bnav__icon svg {
    width: 22px;
    height: 22px;
    display: block;
    transition: stroke-width 200ms cubic-bezier(.4,0,.2,1),
                transform 220ms cubic-bezier(.34,1.56,.64,1);
  }

  .portal-bnav__label {
    font-family: var(--pt-font, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: opacity 200ms cubic-bezier(.4,0,.2,1),
                height 220ms cubic-bezier(.4,0,.2,1);
  }

  /* Estado activo: pill teal suave */
  .portal-bnav__item.is-active {
    background: var(--pt-teal-bg, #f0fdfa);
    color: var(--pt-teal-dk, #0d9488);
    padding-left: 14px;
    padding-right: 14px;
  }
  .portal-bnav__item.is-active .portal-bnav__icon svg {
    stroke-width: 2.4;
    transform: scale(1.05);
  }
  .portal-bnav__item.is-active .portal-bnav__label {
    color: var(--pt-teal-dk, #0d9488);
    font-weight: 700;
  }

  /* Focus visible para teclado */
  .portal-bnav__item:focus-visible {
    outline: 2px solid var(--pt-teal, #14b8a6);
    outline-offset: 2px;
  }

  /* Hover sutil en dispositivos no-touch */
  @media (hover: hover) {
    .portal-bnav__item:hover:not(.is-active) {
      color: var(--pt-text, #0f172a);
      background: rgba(15, 23, 42, 0.04);
    }
  }

  /* Feedback al cambiar de pestana: pulse + tinte teal mientras navega.
     La clase la pone el JS en portal.js (BNAV TRANSITIONS) durante el
     fade-out del contenido. */
  .portal-bnav__item.is-navigating {
    color: var(--pt-teal-dk, #0d9488);
  }
  .portal-bnav__item.is-navigating .portal-bnav__icon {
    animation: pt-bnav-tap-pulse 280ms cubic-bezier(.34, 1.4, .64, 1);
  }
  .portal-bnav__item.is-navigating .portal-bnav__label {
    opacity: 0.65;
  }
  @keyframes pt-bnav-tap-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .portal-bnav__item.is-navigating .portal-bnav__icon {
      animation: none;
    }
  }

  /* Badge contador */
  .portal-bnav__badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--pt-teal, #14b8a6);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35);
  }

  /* ── Estado compacto (scroll bajando) ─────────────────────── */
  .portal-bottom-nav[data-state="compact"] {
    padding: 4px;
  }
  .portal-bottom-nav[data-state="compact"] .portal-bnav__item {
    padding: 4px 4px;
    gap: 0;
    min-height: 40px;
  }
  .portal-bottom-nav[data-state="compact"] .portal-bnav__label {
    opacity: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .portal-bottom-nav[data-state="compact"] .portal-bnav__item.is-active {
    padding-left: 12px;
    padding-right: 12px;
  }
  .portal-bottom-nav[data-state="compact"] .portal-bnav__badge {
    top: 2px;
    right: 4px;
  }
}

/* iPhone SE y similares — apretar margen lateral */
@media (max-width: 360px) {
  .portal-bottom-nav {
    width: calc(100% - 16px);
    max-width: 100%;
  }
  .portal-bnav__label { font-size: 9.5px; }
}

/* Reduced motion: sin transforms ni animaciones grandes */
@media (prefers-reduced-motion: reduce) {
  .portal-bottom-nav,
  .portal-bnav__item,
  .portal-bnav__icon svg,
  .portal-bnav__label {
    transition: none !important;
    animation: none !important;
  }
  .portal-bnav__item.is-active .portal-bnav__icon svg {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL BOTTOM NAV V2 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL DESKTOP NAV V2 ===
   Rediseño del topbar para desktop/tablet. Todo scopeado al modificador
   `.pt-topbar--v2`. NO se activa en móvil (<=768px) — ahí sigue mandando
   el bottom-nav-v2 + las reglas legacy del topbar mobile.
   Para revertir: borrar entre PORTAL DESKTOP NAV V2 y END PORTAL DESKTOP NAV V2.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

  /* ── Outer header: fondo glass cálido + borde inferior sutil ─── */
  .pt-topbar--v2 {
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--pt-border-lt);
    box-shadow: 0 1px 0 rgba(15,23,42,0.02);
  }
  .pt-topbar--v2 .pt-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: 68px;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
  }

  /* ── Izquierda: avatar + saludo + fecha ─────────────────────── */
  .pt-topbar--v2 .pt-topbar-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
  }
  .pt-topbar--v2 .pt-topbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.96rem;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
    color: #fff;
    box-shadow:
      0 0 0 3px rgba(20,184,166,0.10),
      inset 0 1px 0 rgba(255,255,255,0.30);
    transition: transform 220ms cubic-bezier(.4,0,.2,1),
                box-shadow 220ms cubic-bezier(.4,0,.2,1);
  }
  .pt-topbar--v2 .pt-topbar-avatar:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 3px rgba(20,184,166,0.16),
      inset 0 1px 0 rgba(255,255,255,0.30);
  }
  .pt-topbar--v2 .pt-topbar-user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
  }
  .pt-topbar--v2 .pt-topbar-greeting {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pt-text);
    letter-spacing: -.005em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pt-topbar--v2 .pt-topbar-date {
    font-size: 0.74rem;
    color: var(--pt-muted);
    font-weight: 500;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }
  /* Pequeño punto teal antes de la fecha — sensación de "estás aquí, hoy" */
  .pt-topbar--v2 .pt-topbar-date::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pt-teal);
    box-shadow: 0 0 0 2px rgba(20,184,166,0.18);
    flex: 0 0 auto;
  }

  /* ── Centro: navegación con cápsula tipo segmented ──────────── */
  .pt-topbar--v2 .pt-topbar-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    background: rgba(15,23,42,0.035);
    border: 1px solid rgba(15,23,42,0.04);
    border-radius: 14px;
    padding: 5px;
    position: relative;
  }
  .pt-topbar--v2 .pt-topbar-pill {
    position: absolute;
    top: 5px;
    height: calc(100% - 10px);
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(20,184,166,0.12);
    box-shadow:
      0 1px 3px rgba(15,23,42,0.06),
      0 1px 2px rgba(15,23,42,0.04),
      0 0 0 0 rgba(20,184,166,0.10);
    z-index: 0;
    opacity: 0;
  }
  .pt-topbar--v2 .pt-topbar-pill.pt-pill-ready {
    transition:
      transform .35s cubic-bezier(.34,1.56,.64,1),
      width .3s cubic-bezier(.4,0,.2,1),
      opacity .2s,
      box-shadow .25s;
  }

  .pt-topbar--v2 .pt-topbar-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.52rem 1.05rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--pt-sub);
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    background: transparent;
    transition: color 200ms cubic-bezier(.4,0,.2,1);
    letter-spacing: -.005em;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .pt-topbar--v2 .pt-topbar-tab svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(.34,1.56,.64,1),
                color 200ms cubic-bezier(.4,0,.2,1);
  }
  .pt-topbar--v2 .pt-topbar-tab:hover {
    color: var(--pt-text);
  }
  .pt-topbar--v2 .pt-topbar-tab.active {
    color: var(--pt-teal-dk);
    font-weight: 700;
  }
  .pt-topbar--v2 .pt-topbar-tab.active svg {
    transform: scale(1.08);
    color: var(--pt-teal-dk);
  }
  .pt-topbar--v2 .pt-topbar-tab:focus-visible {
    outline: 2px solid var(--pt-teal);
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* Badge dentro del tab (Mis Tareas pendientes) */
  .pt-topbar--v2 .pt-topbar-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--pt-teal);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(20,184,166,0.30);
  }

  /* ── Derecha: logout integrado ───────────────────────────────── */
  .pt-topbar--v2 .pt-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
  }
  .pt-topbar--v2 .pt-topbar-logout {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgba(15,23,42,0.035);
    border: 1px solid rgba(15,23,42,0.05);
    color: var(--pt-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background 200ms cubic-bezier(.4,0,.2,1),
      color 200ms cubic-bezier(.4,0,.2,1),
      transform 200ms cubic-bezier(.4,0,.2,1),
      border-color 200ms cubic-bezier(.4,0,.2,1);
  }
  .pt-topbar--v2 .pt-topbar-logout svg { width: 17px; height: 17px; }
  .pt-topbar--v2 .pt-topbar-logout:hover {
    background: #ffffff;
    color: var(--pt-text);
    border-color: var(--pt-border);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  }
  .pt-topbar--v2 .pt-topbar-logout:focus-visible {
    outline: 3px solid rgba(20,184,166,0.22);
    outline-offset: 2px;
  }

}  /* end @media (min-width: 769px) */

/* ── Tablet 769-1023px: compactar — esconder saludo, reducir pill ─── */
@media (min-width: 769px) and (max-width: 1023px) {
  .pt-topbar--v2 .pt-topbar-inner {
    padding: 0 1rem;
    gap: 1rem;
    height: 64px;
  }
  .pt-topbar--v2 .pt-topbar-user {
    display: none;
  }
  .pt-topbar--v2 .pt-topbar-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.88rem;
  }
  .pt-topbar--v2 .pt-topbar-tab {
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }
  .pt-topbar--v2 .pt-topbar-tab svg {
    width: 14px;
    height: 14px;
  }
  .pt-topbar--v2 .pt-topbar-logout {
    width: 36px;
    height: 36px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pt-topbar--v2 .pt-topbar-avatar,
  .pt-topbar--v2 .pt-topbar-tab,
  .pt-topbar--v2 .pt-topbar-tab svg,
  .pt-topbar--v2 .pt-topbar-logout {
    transition: none !important;
  }
  .pt-topbar--v2 .pt-topbar-avatar:hover,
  .pt-topbar--v2 .pt-topbar-logout:hover {
    transform: none;
  }
  .pt-topbar--v2 .pt-topbar-tab.active svg {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL DESKTOP NAV V2 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL MOBILE TOP/BOTTOM FIX ===
   Resuelve 2 problemas en móvil:
     1. Top bar muy plano → glass sticky, dot indicator, microcopy real.
     2. FAB "Escribir" colisiona con bottom-nav-v2 → reposicionado arriba,
        círculo icon-only sin "Escribir" (el CTA de texto vive en el hero).
   Para revertir: borrar entre PORTAL MOBILE TOP/BOTTOM FIX y END.
   ════════════════════════════════════════════════════════════════════ */

/* ── Variables CSS para layout math limpia ──────────────────────── */
:root {
  --portal-safe-bottom:      env(safe-area-inset-bottom, 0px);
  --portal-bottom-nav-h:     64px;   /* altura cápsula bottom-nav-v2 */
  --portal-bottom-nav-gap:   12px;   /* gap entre nav y borde inferior */
  --portal-floating-cta-h:   56px;   /* altura FAB circular en móvil */
  --portal-cta-nav-gap:      14px;   /* gap entre FAB y top de la cápsula */
}

@media (max-width: 768px) {

  /* ════════════════════════════════════════════════════════════════
     1 · TOP BAR MÓVIL REDISEÑADO (--v2)
     ──────────────────────────────────────────────────────────────── */

  /* Header: sticky con glass + borde sutil. La regla legacy ya hace
     position: sticky pero sin blur — reforzamos sólo en --v2 para
     no afectar pacientes que no tengan ese modificador. */
  .pt-topbar--v2 {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  }

  /* Contenedor: padding más generoso para respiración */
  .pt-topbar--v2 .pt-topbar-inner {
    padding: 12px 16px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: .85rem;
  }

  /* Avatar 38px con gradient + glow teal (más premium que el plano teal) */
  .pt-topbar--v2 .pt-topbar-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
    color: #fff;
    box-shadow:
      0 0 0 3px rgba(20, 184, 166, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
  }

  /* User block: saludo + fecha visibles, jerarquía limpia */
  .pt-topbar--v2 .pt-topbar-user {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.15;
  }
  .pt-topbar--v2 .pt-topbar-greeting {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pt-text);
    letter-spacing: -0.005em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Re-mostrar la fecha en móvil (la legacy la oculta) con dot indicator */
  .pt-topbar--v2 .pt-topbar-date {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--pt-muted);
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pt-topbar--v2 .pt-topbar-date::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pt-teal);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
    flex: 0 0 auto;
  }

  /* Logout: círculo completo (combina con avatar circular + FAB circular) */
  .pt-topbar--v2 .pt-topbar-right { flex-shrink: 0; }
  .pt-topbar--v2 .pt-topbar-logout {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: var(--pt-sub);
    transition:
      background 200ms cubic-bezier(.4, 0, .2, 1),
      color 200ms cubic-bezier(.4, 0, .2, 1),
      transform 200ms cubic-bezier(.4, 0, .2, 1);
  }
  .pt-topbar--v2 .pt-topbar-logout svg { width: 16px; height: 16px; }
  .pt-topbar--v2 .pt-topbar-logout:active {
    background: #ffffff;
    transform: scale(.96);
  }


  /* ════════════════════════════════════════════════════════════════
     2 · FAB ESCRIBIR — COLISIÓN RESUELTA
     ──────────────────────────────────────────────────────────────── */

  /* Círculo icon-only. El label "Escribir" se oculta para que en móvil
     el FAB tenga menos peso visual y no compita con el bottom nav.
     El texto sigue accesible por aria-label. */
  .db-fab {
    /* Posición: arriba del bottom-nav-v2.
       Math:
         bottom = safe + gap-borde + nav-h + gap-cta-nav
       Con valores defaults: 0 + 12 + 64 + 14 = 90px */
    bottom: calc(
      var(--portal-safe-bottom) +
      var(--portal-bottom-nav-gap) +
      var(--portal-bottom-nav-h) +
      var(--portal-cta-nav-gap)
    );
    right: 16px;

    /* Geometría circular */
    width: var(--portal-floating-cta-h);
    height: var(--portal-floating-cta-h);
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;

    /* Tono: teal en vez de negro — coherente con paleta y menos pesado
       junto al bottom-nav (que tiene activo teal). */
    background: linear-gradient(135deg, var(--pt-teal-dk) 0%, var(--pt-text) 100%);
    box-shadow:
      0 6px 20px rgba(15, 23, 42, 0.22),
      0 2px 6px rgba(15, 23, 42, 0.10);

    /* Tap target adecuado (56px > 44px WCAG) */
    min-width: var(--portal-floating-cta-h);
    min-height: var(--portal-floating-cta-h);
  }
  .db-fab__label {
    /* Oculto visualmente en móvil — el aria-label cubre accesibilidad */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .db-fab svg {
    width: 22px;
    height: 22px;
  }
  .db-fab:active {
    transform: scale(.94);
    box-shadow:
      0 4px 14px rgba(15, 23, 42, 0.20),
      0 2px 4px rgba(15, 23, 42, 0.08);
  }

  /* Padding-bottom del contenido para que el último elemento del scroll
     no quede tapado ni por el nav ni por el FAB.
     Math: nav-h + gap-borde + cta-h + gap-cta-nav + safe + cushion */
  .pt-main {
    padding-bottom: calc(
      var(--portal-bottom-nav-h) +
      var(--portal-bottom-nav-gap) +
      var(--portal-floating-cta-h) +
      var(--portal-cta-nav-gap) +
      var(--portal-safe-bottom) +
      16px
    );
  }

}  /* end @media (max-width: 768px) */


/* ── Pantalla móvil pequeña: apretar avatar y micro-text ─────────── */
@media (max-width: 380px) {
  .pt-topbar--v2 .pt-topbar-inner {
    padding: 10px 14px;
    gap: .7rem;
  }
  .pt-topbar--v2 .pt-topbar-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.86rem;
  }
  .pt-topbar--v2 .pt-topbar-logout {
    width: 34px;
    height: 34px;
  }
  .pt-topbar--v2 .pt-topbar-greeting { font-size: 0.86rem; }
  .pt-topbar--v2 .pt-topbar-date { font-size: 0.68rem; }
  .db-fab { right: 12px; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .pt-topbar--v2 .pt-topbar-logout,
  .db-fab { transition: none !important; }
  .pt-topbar--v2 .pt-topbar-logout:active,
  .db-fab:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL MOBILE TOP/BOTTOM FIX ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL SECURITY PROFILE V2 ===
   Rediseño de /portal/perfil/seguridad. Todo scopeado al wrapper
   `.pwd-page--v2`. Las clases legacy (pwd-eye, pwd-str, pwd-bar, pwd-fill,
   pwd-lbl) se preservan para que el JS de strength bar siga funcionando.
   Para revertir: borrar entre PORTAL SECURITY PROFILE V2 y END.
   ════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────── */
/* FIX: el legacy `.pwd-page { display: flex }
/* Override de la regla legacy mobile que ponía min-height: 100vh-... y
   padding-top: 0 — eso rompía el spacing del header v2 en móvil. */
@media (max-width: 768px) {
  .pwd-page--v2 {
    min-height: auto;
    padding: 1rem .9rem 2rem;
    align-items: stretch;
  }
}
@media (min-width: 820px) {
}

/* Strength bar V2 (envuelve .pwd-str legacy) */
.sec-v2-str {
  margin-top: .55rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.pwd-page--v2 .pwd-fill {
  height: 100%;
  width: 0;
  border-radius: 9999px;
  background: #cbd5e1;
  transition: width 220ms cubic-bezier(.4,0,.2,1), background 220ms cubic-bezier(.4,0,.2,1);
}
.pwd-page--v2 .pwd-fill.s1 { width: 25%; background: #ef4444; }
.pwd-page--v2 .pwd-fill.s2 { width: 50%; background: #f59e0b; }
.pwd-page--v2 .pwd-fill.s3 { width: 75%; background: var(--pt-teal); }
.pwd-page--v2 .pwd-fill.s4 { width: 100%; background: var(--pt-teal-dk); }
@keyframes secV2AlertIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 820px) {
}

/* ── Ocultar estilos legacy redundantes dentro de --v2 ────────── */
/* Las clases .pwd-card / .pwd-title / .pwd-sub legacy quedan
   "neutralizadas" dentro del nuevo wrapper para que el rediseño visual
   no compita con el card grande viejo. Si por algún rollback el wrapper
   no se aplica, el legacy vuelve solo. */
.pwd-page--v2 .pwd-card,
.pwd-page--v2 .pwd-title,
.pwd-page--v2 .pwd-sub,
.pwd-page--v2 .pwd-alert,
.pwd-page--v2 .pwd-wrap,
.pwd-page--v2 .pwd-field {
  all: unset;
  display: revert;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pwd-page--v2 { padding: 1rem .85rem 2rem; }
  .sec-v2-header { margin-bottom: 1.1rem; gap: .7rem; }
  .sec-v2-header__ico { width: 40px; height: 40px; border-radius: 12px; }
  .sec-v2-card { padding: 1rem 1.05rem 1.25rem; border-radius: 16px; }
  .sec-v2-card__ico { width: 36px; height: 36px; border-radius: 10px; }
  .sec-v2-actions { justify-content: stretch; }
  .sec-v2-btn { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sec-v2-input,
  .sec-v2-eye,
  .sec-v2-btn,
  .sec-v2-alert,
  .pwd-page--v2 .pwd-fill { transition: none !important; animation: none !important; }
  .sec-v2-btn--primary:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL SECURITY PROFILE V2 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL NOTE MODAL V2 ===
   Rediseño del modal "Nueva nota" — mobile-first, bottom sheet en móvil,
   modal centrado compacto en desktop. Mantiene estética de cuaderno
   (papel + líneas + spine). Todo scopeado al modificador `.db-note-modal--v2`
   para que el legacy `.db-note-modal` siga existiendo intacto si por
   algún rollback no se aplica el modificador.

   Para revertir: borrar entre PORTAL NOTE MODAL V2 y END.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens locales (no contaminan otras zonas) ───────────────── */
.db-note-modal--v2 {
  --nm-paper-bg:     #fffdf6;
  --nm-paper-line:   #e7e3d4;
  --nm-paper-spine:  #f5b7a1;
  --nm-paper-text:   #1f2937;
  --nm-radius:       18px;
  --nm-radius-lg:    24px;
  --nm-trans:        220ms cubic-bezier(.4,0,.2,1);
}

/* ── Overlay backdrop más suave ───────────────────────────────── */
.db-note-modal--v2 {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  padding: 0;            /* control del padding lo lleva .nm-v2 */
  align-items: flex-end; /* default mobile: bottom sheet */
}

/* ── Modal container (.nm-v2) ─────────────────────────────────── */
.db-note-modal--v2 .nm-v2 {
  max-width: none;
  width: 100%;
  max-height: 92dvh;
  border-radius: var(--nm-radius-lg) var(--nm-radius-lg) 0 0;
  box-shadow:
    0 -8px 32px rgba(15, 23, 42, 0.18),
    0 -2px 8px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;

  /* Animación: slide from bottom (override del legacy scale) */
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.34, 1.4, .64, 1);
}
.db-note-modal--v2.open .nm-v2 {
  transform: translateY(0);
}

/* Drag handle visible solo en móvil */
.db-note-modal--v2 .nm-v2__handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  background: rgba(15, 23, 42, 0.18);
  border-radius: 9999px;
  flex: 0 0 auto;
}

/* ── Header compacto ──────────────────────────────────────────── */
.db-note-modal--v2 .nm-v2__head {
  padding: 0.85rem 1.1rem 0.7rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex: 0 0 auto;
}
.db-note-modal--v2 .nm-v2__head-text { min-width: 0; flex: 1; }
.db-note-modal--v2 .nm-v2__title {
  font-family: var(--pt-font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pt-text);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
}
.db-note-modal--v2 .nm-v2__sub {
  font-size: 0.72rem;
  color: var(--pt-muted);
  margin-top: 1px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.db-note-modal--v2 .nm-v2__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.05);
  color: var(--pt-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--nm-trans), color var(--nm-trans), transform var(--nm-trans);
}
.db-note-modal--v2 .nm-v2__close svg { width: 16px; height: 16px; }
.db-note-modal--v2 .nm-v2__close:hover { background: #ffffff; color: var(--pt-text); border-color: var(--pt-border); }
.db-note-modal--v2 .nm-v2__close:active { transform: scale(.94); }
.db-note-modal--v2 .nm-v2__close:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}

/* ── Body scrollable ──────────────────────────────────────────── */
.db-note-modal--v2 .nm-v2__body {
  padding: 0.85rem 1rem 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0; /* importante para que flex-children con overflow funcionen */
}

/* ── Mood selector (grid 5×2 compacto) ────────────────────────── */
.db-note-modal--v2 .nm-v2__moods { display: block; flex: 0 0 auto; }
.db-note-modal--v2 .nm-v2__moods-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pt-text2);
  margin: 0 0 0.55rem;
  letter-spacing: 0.01em;
}
/* Grid 5x2 — override del legacy .db-emo-grid { display: flex; flex-wrap: wrap } */
.db-note-modal--v2 .nm-v2__moods-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  flex-wrap: nowrap;
  overflow: visible;
  padding: 0;
  margin: 0;
  scroll-snap-type: none;
  justify-content: stretch;
}

/* Pill mood compacta — emoji arriba, texto abajo (más limpio que horizontal) */
.db-note-modal--v2 .nm-v2__mood {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px 8px;
  min-width: 0;
  min-height: 58px;
  background: #ffffff;
  border: 1.5px solid var(--pt-border-lt);
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--nm-trans), border-color var(--nm-trans), transform var(--nm-trans), box-shadow var(--nm-trans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: var(--pt-font);
}
.db-note-modal--v2 .nm-v2__mood-emoji {
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  transition: transform var(--nm-trans);
}
.db-note-modal--v2 .nm-v2__mood-text {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--pt-sub);
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.db-note-modal--v2 .nm-v2__mood:hover {
  border-color: var(--pt-teal-lt);
  background: var(--pt-teal-bg);
}
.db-note-modal--v2 .nm-v2__mood.active {
  background: var(--pt-teal-bg);
  border-color: var(--pt-teal);
  box-shadow: 0 4px 14px rgba(20, 184, 166, .22);
  transform: translateY(-1px);
}
.db-note-modal--v2 .nm-v2__mood.active .nm-v2__mood-text { color: var(--pt-teal-dk); }
.db-note-modal--v2 .nm-v2__mood.active .nm-v2__mood-emoji { transform: scale(1.12); }
.db-note-modal--v2 .nm-v2__mood:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}

/* Error state preservado del legacy — el JS togglea .db-emo-grid--error */
.db-note-modal--v2 .nm-v2__moods-list.db-emo-grid--error .nm-v2__mood {
  border-color: rgba(239, 68, 68, 0.35);
}

/* ── Notebook (cuaderno) — flex-grow para llenar body ─────────── */
.db-note-modal--v2 .nm-v2__notebook {
  display: flex;
  flex: 1 1 auto;
  min-height: 200px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Paper: hoja con líneas horizontales + spine teal a la izquierda */
.db-note-modal--v2 .nm-v2__notebook-paper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--nm-paper-bg);
  border: 1px solid var(--nm-paper-line);
  border-radius: var(--nm-radius);
  padding: 0.95rem 1.1rem 1.1rem 2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 10px rgba(15, 23, 42, 0.05);
  transition: border-color var(--nm-trans), box-shadow var(--nm-trans);
}
/* Spine teal (línea vertical izquierda como cuaderno) */
.db-note-modal--v2 .nm-v2__notebook-paper::before {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1.4rem;
  width: 2px;
  background: var(--nm-paper-spine);
  border-radius: 2px;
  opacity: 0.55;
  pointer-events: none;
}
/* Focus state del cuaderno */
.db-note-modal--v2 .nm-v2__notebook:focus-within .nm-v2__notebook-paper {
  border-color: var(--pt-teal-lt);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(20, 184, 166, 0.10),
    0 2px 10px rgba(15, 23, 42, 0.05);
}

/* Prompt encima del textarea */
.db-note-modal--v2 .nm-v2__prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.55rem;
  font-family: var(--pt-serif, Georgia, serif);
  font-size: 0.82rem;
  font-style: italic;
  color: #6b5d3a;
  opacity: 0.85;
  padding: 0;
  background: transparent;
  border: none;
  line-height: 1.4;
  transition: opacity var(--nm-trans);
}
.db-note-modal--v2 .nm-v2__prompt svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.7; }
.db-note-modal--v2 .nm-v2__notebook:focus-within .nm-v2__prompt { opacity: 0.55; }

/* Textarea con líneas horizontales tipo cuaderno — flex-grow */
.db-note-modal--v2 .nm-v2__paper-area {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
  resize: none;
  border: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(231, 227, 212, 0.65) 27px,
      rgba(231, 227, 212, 0.65) 28px
    );
  background-attachment: local;
  background-position: 0 4px;
  padding: 0;
  font-family: var(--pt-serif, Georgia, serif);
  font-size: 1rem;
  line-height: 28px; /* match line height del bg pattern */
  color: var(--nm-paper-text);
  outline: none;
  caret-color: var(--pt-teal-dk);
}
.db-note-modal--v2 .nm-v2__paper-area::placeholder {
  color: #b8a98a;
  font-style: italic;
  opacity: 1;
}

/* Error state preservado del legacy */
.db-note-modal--v2 .nm-v2__notebook.db-writing-area--error .nm-v2__notebook-paper {
  border-color: rgba(239, 68, 68, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(239, 68, 68, 0.10);
}

/* ── Footer sticky con switch + botón ─────────────────────────── */
.db-note-modal--v2 .nm-v2__footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
.db-note-modal--v2 .nm-v2__share {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}
.db-note-modal--v2 .nm-v2__switch {
  flex: 0 0 auto;
  /* mantiene la geometría del legacy .db-priv-toggle (44x24) */
}
.db-note-modal--v2 .nm-v2__share-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.db-note-modal--v2 .nm-v2__share-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pt-text);
  letter-spacing: -.005em;
}
.db-note-modal--v2 .nm-v2__share-hint {
  font-size: 0.68rem;
  color: var(--pt-muted);
  margin-top: 1px;
  font-weight: 500;
}

/* Botón guardar */
.db-note-modal--v2 .nm-v2__save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  font-family: var(--pt-font);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -.005em;
  background: linear-gradient(180deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.30);
  transition: transform var(--nm-trans), box-shadow var(--nm-trans);
}
.db-note-modal--v2 .nm-v2__save svg { width: 15px; height: 15px; }
.db-note-modal--v2 .nm-v2__save:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 184, 166, 0.38); }
.db-note-modal--v2 .nm-v2__save:active { transform: translateY(0); }
.db-note-modal--v2 .nm-v2__save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.db-note-modal--v2 .nm-v2__save:focus-visible { outline: 3px solid rgba(20, 184, 166, 0.30); outline-offset: 2px; }

/* sr-only para accesibilidad del input checkbox */
.db-note-modal--v2 .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── DESKTOP (>= 768px): modal centrado, NO bottom sheet ──────── */
@media (min-width: 768px) {
  .db-note-modal--v2 {
    align-items: center;
    padding: 1.5rem;
  }
  .db-note-modal--v2 .nm-v2 {
    max-width: 560px;
    max-height: min(85vh, 85dvh);
    border-radius: var(--nm-radius-lg);
    transform: scale(.96) translateY(8px);
    transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
  }
  .db-note-modal--v2.open .nm-v2 {
    transform: scale(1) translateY(0);
  }
  .db-note-modal--v2 .nm-v2__handle { display: none; }

  .db-note-modal--v2 .nm-v2__head { padding: 1.1rem 1.35rem 0.85rem; }
  .db-note-modal--v2 .nm-v2__title { font-size: 1.15rem; }
  .db-note-modal--v2 .nm-v2__sub { font-size: 0.76rem; }
  .db-note-modal--v2 .nm-v2__body { padding: 1rem 1.35rem 0.5rem; gap: 1.1rem; }

  /* En desktop: mood grid 5xN un poco más generosa */
  .db-note-modal--v2 .nm-v2__mood {
    padding: 9px 5px 10px;
    min-height: 66px;
    gap: 4px;
  }
  .db-note-modal--v2 .nm-v2__mood-emoji { font-size: 1.45rem; }
  .db-note-modal--v2 .nm-v2__mood-text { font-size: 0.66rem; }

  .db-note-modal--v2 .nm-v2__notebook-paper { padding: 1.15rem 1.25rem 1.25rem 2.4rem; }
  .db-note-modal--v2 .nm-v2__paper-area { min-height: 220px; max-height: 40dvh; }

  .db-note-modal--v2 .nm-v2__footer { padding: 1rem 1.35rem; }
  .db-note-modal--v2 .nm-v2__save { padding: 0.7rem 1.4rem; font-size: 0.92rem; }
}

/* ── Móvil pequeño (≤380px): apretar pero seguir cómodo ───────── */
@media (max-width: 380px) {
  .db-note-modal--v2 .nm-v2__head { padding: 0.7rem 0.9rem 0.55rem; }
  .db-note-modal--v2 .nm-v2__title { font-size: 0.98rem; }
  .db-note-modal--v2 .nm-v2__sub { font-size: 0.66rem; }
  .db-note-modal--v2 .nm-v2__close { width: 32px; height: 32px; }
  .db-note-modal--v2 .nm-v2__body { padding: 0.75rem 0.85rem 0.4rem; gap: 0.85rem; }
  .db-note-modal--v2 .nm-v2__moods-label { font-size: 0.74rem; }
  .db-note-modal--v2 .nm-v2__mood { padding: 0.45rem 0.75rem 0.45rem 0.55rem; min-height: 36px; }
  .db-note-modal--v2 .nm-v2__mood-text { font-size: 0.72rem; }
  .db-note-modal--v2 .nm-v2__notebook-paper { padding: 0.85rem 0.95rem 1rem 1.85rem; }
  .db-note-modal--v2 .nm-v2__notebook-paper::before { left: 1.15rem; }
  .db-note-modal--v2 .nm-v2__paper-area { min-height: 150px; font-size: 0.95rem; }
  .db-note-modal--v2 .nm-v2__footer { padding: 0.75rem 0.9rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); gap: 0.55rem; }
  .db-note-modal--v2 .nm-v2__share-hint { display: none; }
  .db-note-modal--v2 .nm-v2__save { padding: 0.6rem 0.95rem; font-size: 0.82rem; }
  .db-note-modal--v2 .nm-v2__save span { display: none; }
  .db-note-modal--v2 .nm-v2__save svg { width: 17px; height: 17px; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-note-modal--v2 .nm-v2,
  .db-note-modal--v2 .nm-v2__mood,
  .db-note-modal--v2 .nm-v2__mood-emoji,
  .db-note-modal--v2 .nm-v2__close,
  .db-note-modal--v2 .nm-v2__save,
  .db-note-modal--v2 .nm-v2__notebook-paper { transition: none !important; }
  .db-note-modal--v2 .nm-v2__save:hover { transform: none; }
  .db-note-modal--v2 .nm-v2__mood.active .nm-v2__mood-emoji { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL NOTE MODAL V2 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL JOURNAL CARDS V2 ===
   Rediseño compacto, moderno, mobile-first de las notas del diario.
   Patrón signature: accent lateral 3px coloreado por mood (data-mood) +
   tipografía serif en el body + footer con metadata muted.
   Todo scopeado a `.db-note-card--v2` y `.db-notes-grid--v2` — las
   clases legacy quedan intactas si el modificador no se aplica.
   Para revertir: borrar entre PORTAL JOURNAL CARDS V2 y END.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────── */
.db-note-card--v2 {
  --nc-bg:        #ffffff;
  --nc-border:    rgba(15, 23, 42, 0.06);
  --nc-radius:    16px;
  --nc-accent:    var(--pt-teal);
  --nc-trans:     200ms cubic-bezier(.4, 0, .2, 1);
  --nc-text:      var(--pt-text);
}

/* ── Grid responsive — denser que el legacy ──────────────────────── */
.db-notes-grid--v2 {
  display: grid !important;
  grid-template-columns: 1fr;        /* mobile: 1 col */
  gap: 0.6rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .db-notes-grid--v2 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
@media (min-width: 1024px) {
  .db-notes-grid--v2 { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
}

/* ── Card container ──────────────────────────────────────────────── */
.db-note-card--v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;

  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  padding: 0.85rem 1rem 0.8rem 1.15rem;

  /* Override del legacy height: 250px fijo */
  height: auto;
  min-height: 0;

  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: transform var(--nc-trans), border-color var(--nc-trans), box-shadow var(--nc-trans);
}

/* Signature: accent lateral 3px por mood */
.db-note-card--v2::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  background: var(--nc-accent);
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
  transition: opacity var(--nc-trans);
}

/* Mood palette — paleta sobria, no chillona, coherente con healthtech */
.db-note-card--v2[data-mood^="contento"]      { --nc-accent: #f59e0b; } /* warm amber */
.db-note-card--v2[data-mood^="tranquilo"]     { --nc-accent: var(--pt-teal); }
.db-note-card--v2[data-mood^="triste"]        { --nc-accent: #6366f1; } /* soft indigo */
.db-note-card--v2[data-mood^="frustrado"]     { --nc-accent: #f97316; } /* warm orange */
.db-note-card--v2[data-mood^="ansioso"]       { --nc-accent: #a78bfa; } /* lavender */
.db-note-card--v2[data-mood^="emocionado"]    { --nc-accent: #ec4899; } /* soft pink */
.db-note-card--v2[data-mood^="cansado"]       { --nc-accent: #64748b; } /* slate */
.db-note-card--v2[data-mood^="vac"]           { --nc-accent: #94a3b8; }
.db-note-card--v2[data-mood^="agradecido"]    { --nc-accent: var(--pt-teal-dk); }
.db-note-card--v2[data-mood^="enojado"]       { --nc-accent: #ef4444; }
.db-note-card--v2[data-mood^="motivado"]      { --nc-accent: #0ea5e9; }
.db-note-card--v2[data-mood="none"]           { --nc-accent: #cbd5e1; }

.db-note-card--v2:hover {
  border-color: rgba(20, 184, 166, 0.20);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 6px 20px rgba(15, 23, 42, 0.05);
}
.db-note-card--v2:hover::before { opacity: 1; }
.db-note-card--v2:focus-within {
  border-color: rgba(20, 184, 166, 0.30);
}

/* ── Eyebrow: fecha + mood ───────────────────────────────────────── */
.db-note-card--v2 .nc-v2__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;          /* override legacy margin-bottom: 1rem */
  flex-shrink: 0;
}

.db-note-card--v2 .nc-v2__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pt-muted);
  padding: 0;
  background: transparent;
  border: none;
}
.db-note-card--v2 .nc-v2__date svg {
  width: 11px;
  height: 11px;
  opacity: 0.55;
  flex: 0 0 auto;
}

/* Mood chip — refinado, mute */
.db-note-card--v2 .nc-v2__mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  background: rgba(15, 23, 42, 0.045);
  border: none;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--pt-text2);
  letter-spacing: -0.005em;
  max-width: 58%;
  overflow: hidden;
  white-space: nowrap;
  flex: 0 0 auto;
}
.db-note-card--v2 .nc-v2__mood-emoji {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  flex: 0 0 auto;
}
.db-note-card--v2 .nc-v2__mood-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Body: serif diario, line-clamp 3 ─────────────────────────────── */
.db-note-card--v2 .nc-v2__body {
  margin: 0;
  font-family: var(--pt-serif, Georgia, 'Times New Roman', serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--nc-text);

  /* Truncado a 3 líneas con elegancia */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Strings sin espacios no rompen layout */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  flex: 1 1 auto;
  min-height: 0;
}

/* ── Footer: privacy + edit ──────────────────────────────────────── */
.db-note-card--v2 .nc-v2__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0;       /* override legacy padding-top: .9rem + border-top */
  border-top: none;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

/* Privacy pill — metadata muted, NO red alert para "Solo yo" */
.db-note-card--v2 .nc-v2__priv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  border: 1px solid transparent;
}
.db-note-card--v2 .nc-v2__priv svg {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}
/* Solo yo: ámbar cálido suave (NO rojo alarmante) */
.db-note-card--v2 .nc-v2__priv--private {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.15);
}
/* Compartida: teal suave */
.db-note-card--v2 .nc-v2__priv--shared {
  background: var(--pt-teal-bg);
  color: var(--pt-teal-dk);
  border-color: rgba(20, 184, 166, 0.18);
}

/* Edit icon button — discreto */
.db-note-card--v2 .nc-v2__edit {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--pt-muted);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  margin-right: -4px;
  flex: 0 0 auto;
  transition: background var(--nc-trans), color var(--nc-trans), transform var(--nc-trans);
}
.db-note-card--v2 .nc-v2__edit svg { width: 14px; height: 14px; }
.db-note-card--v2 .nc-v2__edit:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--pt-text);
}
.db-note-card--v2 .nc-v2__edit:active { transform: scale(.92); }
.db-note-card--v2 .nc-v2__edit:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}

/* ── Mobile (≤480) — densidad máxima cómoda ──────────────────────── */
@media (max-width: 480px) {
  .db-note-card--v2 {
    padding: 0.75rem 0.9rem 0.7rem 1.05rem;
    border-radius: 14px;
    gap: 0.5rem;
  }
  .db-note-card--v2::before { top: 10px; bottom: 10px; width: 3px; }
  .db-note-card--v2 .nc-v2__date { font-size: 0.66rem; }
  .db-note-card--v2 .nc-v2__mood { max-width: 55%; font-size: 0.66rem; padding: 2px 8px 2px 5px; }
  .db-note-card--v2 .nc-v2__mood-emoji { font-size: 0.88rem; }
  .db-note-card--v2 .nc-v2__body {
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .db-note-card--v2 .nc-v2__priv { font-size: 0.62rem; padding: 2px 8px 2px 6px; }
  .db-note-card--v2 .nc-v2__edit { width: 28px; height: 28px; }
}

/* ── Móvil ultra pequeño ─────────────────────────────────────────── */
@media (max-width: 360px) {
  .db-note-card--v2 .nc-v2__mood-text {
    /* En 360px el mood text largo se trunca para no chocar con la fecha */
    max-width: 90px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-note-card--v2,
  .db-note-card--v2::before,
  .db-note-card--v2 .nc-v2__edit { transition: none !important; }
  .db-note-card--v2 .nc-v2__edit:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL JOURNAL CARDS V2 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === STITCH PORTAL DASHBOARD V1 ===
   Fase B + C de la integración del diseño Stitch (propuesta 2 como base).
   Fase B: tokens visuales nuevos (cero cambios visuales hasta usarlos).
   Fase C: hero del dashboard refinado con tipografía Hanken Grotesk,
   sombras ambient y blob decorativo sutil.
   Sin Tailwind, sin Material Symbols. Vanilla CSS scopeado.
   Para revertir: borrar entre STITCH PORTAL DASHBOARD V1 y END.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fase B · Tokens visuales nuevos (no pisan los originales) ─────── */
:root {
  /* Acentos opcionales — indigo profundo del DESIGN.md Stitch.
     NO reemplaza --pt-text. Se usa solo para eyebrows / títulos especiales. */
  --pt-text-indigo:        #1A237E;
  --pt-text-secondary-cool:#5C6B89;

  /* Soft warm white card surface (entre nuestro --pt-card #fff y --pt-bg) */
  --pt-surface-warm:       #FAFAFA;

  /* Sombras Stitch — ambient (resting) + floating (interactive).
     Tono indigo en el alpha para coherencia con el color de marca. */
  --pt-shadow-ambient:     0 4px 20px rgba(26, 35, 126, 0.04);
  --pt-shadow-floating:    0 10px 30px rgba(26, 35, 126, 0.08);

  /* Tipografía display — Hanken Grotesk para títulos hero (Inter sigue
     siendo el body universal). Fallback robusto a Inter si no cargó. */
  --pt-font-display:       'Hanken Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
}


/* ─── Fase D · Stat cards refinement ──────────────────────────────
   Aplica warm white + ambient shadow + Hanken Grotesk para el número
   grande, y para la card de Racha añade un SVG progress ring alrededor
   del icono. Todo scopeado a `.db-stat-card--stitch`.
*/

.db-stats--stitch {
  /* Wrapper modifier — sin cambios estructurales, solo marca el scope. */
}

/* Card base — warm white + ambient shadow + radius más amplio */
.db-stat-card.db-stat-card--stitch {
  background: var(--pt-surface-warm);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 20px;
  box-shadow: var(--pt-shadow-ambient);
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 220ms cubic-bezier(.4, 0, .2, 1);
}
.db-stat-card.db-stat-card--stitch:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-floating);
}

/* Número grande con Hanken — más impacto, menos peso */
.db-stat-card.db-stat-card--stitch .db-stat-val {
  font-family: var(--pt-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--pt-text-indigo);
}

/* Label — tipografía consistente con el resto */
.db-stat-card.db-stat-card--stitch .db-stat-lbl {
  color: var(--pt-text2);
  font-weight: 600;
}

/* Sub — gris cool más sutil */
.db-stat-card.db-stat-card--stitch .db-stat-sub {
  color: var(--pt-text-secondary-cool);
}

/* Icono normal — ya tiene su estilo, solo aire extra */
.db-stat-card.db-stat-card--stitch .db-stat-icon { flex: 0 0 auto; }


/* SVG Progress Ring alrededor del icono de Racha (cherry-pick Propuesta 2) */
.db-stat-icon.db-stat-icon--ring {
  position: relative;
  width: 64px;
  height: 64px;
  background: rgba(245, 158, 11, 0.10) !important; /* warm amber suave */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Anillo SVG ocupa todo el contenedor; rotado -90° para que el progreso
   empiece arriba en lugar de a las 3 en punto. */
.db-stat-icon--ring .db-stat-ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 1;
}
.db-stat-ring__track {
  color: rgba(15, 23, 42, 0.06);
}
.db-stat-ring__fill {
  color: var(--pt-teal-dk);
  transition: stroke-dasharray 600ms cubic-bezier(.4, 0, .2, 1);
}

/* Icono del fuego centrado encima del ring */
.db-stat-icon--ring .db-stat-ico {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  color: #b45309; /* warm amber dark — coherente con el fondo del icono */
}

/* Responsive — móvil más compacto */
@media (max-width: 480px) {
  .db-stat-card.db-stat-card--stitch { border-radius: 16px; }
  .db-stat-icon.db-stat-icon--ring { width: 56px; height: 56px; }
  .db-stat-icon--ring .db-stat-ico { width: 22px; height: 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .db-stat-card.db-stat-card--stitch { transition: none !important; }
  .db-stat-card.db-stat-card--stitch:hover { transform: none; }
  .db-stat-ring__fill { transition: none !important; }
}


/* ─── Fase E · Journal cards refinement ──────────────────────────
   Cherry-pick de Propuesta 1 (Journal Premium): date plaque lateral
   con día grande + mes en uppercase. El plaque toma el color del mood
   (reemplaza al accent lateral 3px de v2 para no duplicar señal).
   Tipografía Hanken Grotesk para el número del día.
*/

.db-note-card.db-note-card--stitch {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-areas:
    "plaque top"
    "plaque body"
    "plaque foot";
  gap: 0 0.95rem;
  align-items: start;
  padding: 0.95rem 1.1rem 0.95rem 0.95rem;
}

/* El accent lateral 3px ya no compite con el plaque — lo ocultamos.
   La señal de mood ahora la lleva el background del plaque. */
.db-note-card.db-note-card--stitch::before { display: none; }

/* ── Date plaque ── */
.db-note-card--stitch .nc-st__plaque {
  grid-area: plaque;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 8px 4px;
  background: color-mix(in srgb, var(--nc-accent) 12%, white);
  border: 1px solid color-mix(in srgb, var(--nc-accent) 22%, transparent);
  border-radius: 12px;
  align-self: stretch;
  min-height: 60px;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}
.db-note-card--stitch:hover .nc-st__plaque {
  background: color-mix(in srgb, var(--nc-accent) 18%, white);
}
.nc-st__plaque-day {
  font-family: var(--pt-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: color-mix(in srgb, var(--nc-accent) 75%, black);
}
.nc-st__plaque-month {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nc-accent) 60%, black);
  opacity: 0.85;
  margin-top: 2px;
}

/* Asignar áreas a los hijos existentes — el grid los reposiciona sin
   cambiar markup. */
.db-note-card--stitch .nc-v2__top  { grid-area: top; }
.db-note-card--stitch .nc-v2__body { grid-area: body; }
.db-note-card--stitch .nc-v2__foot { grid-area: foot; }

/* Como el plaque ya muestra fecha, la fecha del eyebrow se oculta
   en stitch. El mood chip sigue visible. */
.db-note-card--stitch .nc-v2__date { display: none; }

/* El eyebrow ahora solo tiene mood chip — alinéalo a la derecha */
.db-note-card--stitch .nc-v2__top {
  justify-content: flex-end;
  min-height: 24px;
}
.db-note-card--stitch .nc-v2__top:empty {
  display: none;
}

/* Body un pelín más cómodo con la plaque al lado */
.db-note-card--stitch .nc-v2__body {
  font-family: var(--pt-font-display);
  font-weight: 400;
  font-style: normal; /* override serif italic legacy */
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--pt-text);
}

/* Fallback browsers sin color-mix (Safari 15.4-, Firefox 113-) ─────
   En esos navegadores las custom properties con color-mix son inválidas
   y el plaque queda transparente. Hacemos override usando el accent
   directo con alpha forzado vía rgba (menos elegante pero seguro). */
@supports not (color: color-mix(in srgb, red, blue)) {
  .db-note-card--stitch .nc-st__plaque {
    background: #f3f4f6;
    border-color: #e5e7eb;
  }
  .nc-st__plaque-day { color: var(--pt-text-indigo); }
  .nc-st__plaque-month { color: var(--pt-text2); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .db-note-card.db-note-card--stitch {
    grid-template-columns: 52px 1fr;
    gap: 0 0.8rem;
    padding: 0.85rem 0.95rem;
  }
  .db-note-card--stitch .nc-st__plaque {
    min-height: 52px;
    padding: 6px 3px;
  }
  .nc-st__plaque-day { font-size: 1.3rem; }
  .nc-st__plaque-month { font-size: 0.58rem; }
}

/* iPhone SE / muy pequeño — plaque más compacto */
@media (max-width: 360px) {
  .db-note-card.db-note-card--stitch {
    grid-template-columns: 46px 1fr;
    gap: 0 0.7rem;
  }
  .db-note-card--stitch .nc-st__plaque { min-height: 46px; }
  .nc-st__plaque-day { font-size: 1.15rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .db-note-card--stitch .nc-st__plaque { transition: none !important; }
}


/* ─── Fase G · Bento bottom — Tareas + Mi Red ────────────────────
   Cherry-pick de Propuesta 2 desktop: bento 2-col con Tareas a la
   izquierda + Mi Red a la derecha. Móvil stackea 1-col. Ambas cards
   con warm white surface, ambient shadow, Hanken titles.
*/

/* Wrapper bento — 2 columnas en desktop, 1 en móvil */
.db-bento--stitch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  max-width: 1100px;
  margin: 1.25rem auto 1.5rem;
}
@media (min-width: 880px) {
  .db-bento--stitch {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* ── Tareas snippet card ── */
.db-tasks-st {
  background: var(--pt-surface-warm);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 18px;
  box-shadow: var(--pt-shadow-ambient);
  padding: 1.1rem 1.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 220ms cubic-bezier(.4, 0, .2, 1);
}
.db-tasks-st:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-floating);
}

.db-tasks-st__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.db-tasks-st__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--pt-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--pt-text);
}
.db-tasks-st__title svg {
  width: 18px;
  height: 18px;
  color: var(--pt-teal-dk);
  flex: 0 0 auto;
}
.db-tasks-st__more {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pt-teal-dk);
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: 9999px;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}
.db-tasks-st__more:hover { background: var(--pt-teal-bg); }
.db-tasks-st__more svg { width: 13px; height: 13px; }

.db-tasks-st__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.db-tasks-st__item { margin: 0; }
.db-tasks-st__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 12px;
  text-decoration: none;
  color: var(--pt-text);
  transition: background 200ms cubic-bezier(.4, 0, .2, 1),
              border-color 200ms cubic-bezier(.4, 0, .2, 1),
              transform 200ms cubic-bezier(.4, 0, .2, 1);
}
.db-tasks-st__link:hover {
  background: var(--pt-teal-bg);
  border-color: var(--pt-teal-lt);
  transform: translateX(2px);
}
.db-tasks-st__link:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}

.db-tasks-st__bullet {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pt-teal-lt);
  background: #ffffff;
  flex: 0 0 auto;
  position: relative;
  transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}
.db-tasks-st__link:hover .db-tasks-st__bullet { border-color: var(--pt-teal); }

.db-tasks-st__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.db-tasks-st__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pt-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-tasks-st__due {
  font-size: 0.7rem;
  color: var(--pt-muted);
  margin-top: 2px;
  font-weight: 500;
}
.db-tasks-st__due.is-overdue {
  color: #b45309;
  font-weight: 600;
}
.db-tasks-st__arrow {
  width: 14px;
  height: 14px;
  color: var(--pt-muted);
  flex: 0 0 auto;
}
.db-tasks-st__rest {
  margin: 0;
  font-size: 0.74rem;
  color: var(--pt-muted);
  text-align: center;
  font-weight: 500;
}

.db-tasks-st__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 1rem 0.5rem;
  color: var(--pt-sub);
}
.db-tasks-st__empty svg {
  width: 36px;
  height: 36px;
  color: var(--pt-teal-dk);
  background: var(--pt-teal-bg);
  border: 1px solid var(--pt-teal-lt);
  border-radius: 50%;
  padding: 7px;
  margin-bottom: 0.5rem;
}
.db-tasks-st__empty-title {
  font-family: var(--pt-font-display);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--pt-text);
}
.db-tasks-st__empty-desc {
  font-size: 0.78rem;
  color: var(--pt-muted);
  margin-top: 2px;
}


/* ── Mi Red — refinamiento stitch ── */
.db-mired.db-mired--stitch {
  background: var(--pt-surface-warm);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 18px;
  box-shadow: var(--pt-shadow-ambient);
  margin: 0;
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 220ms cubic-bezier(.4, 0, .2, 1);
}
.db-mired.db-mired--stitch:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-floating);
}
.db-mired.db-mired--stitch .db-mired-hdr h2 {
  font-family: var(--pt-font-display);
  letter-spacing: -0.005em;
}

/* Mobile compacto — los bento cards mantienen su altura natural */
@media (max-width: 480px) {
  .db-bento--stitch { margin-left: 0; margin-right: 0; }
  .db-tasks-st { padding: 0.95rem 1rem; border-radius: 16px; }
  .db-tasks-st__title { font-size: 0.96rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .db-tasks-st,
  .db-mired.db-mired--stitch,
  .db-tasks-st__link { transition: none !important; }
  .db-tasks-st:hover,
  .db-mired.db-mired--stitch:hover,
  .db-tasks-st__link:hover { transform: none; }
}


/* ─── Fase H · Bottom nav móvil refinement ───────────────────────
   Cherry-pick de Propuesta 2 mobile: sombra indigo más visible, glass
   blur más limpio, inactive items en indigo profundo (no slate), pill
   activa con tinte teal sutil. Scopeado a `portal-bottom-nav--stitch`
   y dentro del media query móvil — desktop no se afecta.
*/

@media (max-width: 768px) {
  /* Override de la sombra base — tinte indigo coherente con Stitch */
  .portal-bottom-nav.portal-bottom-nav--stitch {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow:
      var(--pt-shadow-floating),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  /* Inactive — indigo profundo (más clínico que el slate genérico) */
  .portal-bottom-nav--stitch .portal-bnav__item {
    color: var(--pt-text-indigo);
    opacity: 0.62;
  }
  .portal-bottom-nav--stitch .portal-bnav__label {
    font-family: var(--pt-font-display);
    font-weight: 600;
    letter-spacing: 0.005em;
  }

  /* Hover en dispositivos no-touch — sutil bg + bring color back to full */
  @media (hover: hover) {
    .portal-bottom-nav--stitch .portal-bnav__item:hover:not(.is-active) {
      background: rgba(15, 23, 42, 0.04);
      color: var(--pt-text-indigo);
      opacity: 1;
    }
  }

  /* Active — pill teal-bg sólida + sombra teal sutil debajo del pill */
  .portal-bottom-nav--stitch .portal-bnav__item.is-active {
    background: var(--pt-teal-bg);
    color: var(--pt-teal-dk);
    opacity: 1;
    box-shadow:
      inset 0 0 0 1px rgba(20, 184, 166, 0.18),
      0 2px 8px rgba(20, 184, 166, 0.15);
  }
  .portal-bottom-nav--stitch .portal-bnav__item.is-active .portal-bnav__icon svg {
    stroke-width: 2.4;
    transform: scale(1.04);
  }
  .portal-bottom-nav--stitch .portal-bnav__item.is-active .portal-bnav__label {
    color: var(--pt-teal-dk);
    font-weight: 700;
  }

  /* Focus visible — mejor visibilidad sobre el glass blur */
  .portal-bottom-nav--stitch .portal-bnav__item:focus-visible {
    outline: 2px solid var(--pt-teal);
    outline-offset: 2px;
    opacity: 1;
  }

  /* Badge contador — más refinado con borde glass */
  .portal-bottom-nav--stitch .portal-bnav__badge {
    box-shadow:
      0 2px 6px rgba(20, 184, 166, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

/* Reduced motion */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .portal-bottom-nav--stitch .portal-bnav__item,
  .portal-bottom-nav--stitch .portal-bnav__item.is-active .portal-bnav__icon svg {
    transition: none !important;
  }
  .portal-bottom-nav--stitch .portal-bnav__item.is-active .portal-bnav__icon svg {
    transform: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   === END STITCH PORTAL DASHBOARD V1 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === NOTE READ MODAL ===
   Modal de lectura para que el paciente pueda releer una nota guardada.
   Diseño calm + reading-first: tipografía generosa, line-height
   relajado, contraste suave para sesiones largas. Mobile-first
   (sheet abajo) + desktop centered.
   Para revertir: borrar entre NOTE READ MODAL y END NOTE READ MODAL.
   ════════════════════════════════════════════════════════════════════ */

/* Cursor pointer en cards de notas — señal de clickabilidad */
.db-note-card.db-note-card--v2 {
  cursor: pointer;
}
/* El edit button no debe heredar el cursor de la card */
.db-note-card.db-note-card--v2 .db-note-edit {
  cursor: pointer; /* explicit — el botón tiene su propio cursor */
}
/* Focus visible del card (teclado) */
.db-note-card.db-note-card--v2:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 3px;
}
/* Hover refinado — la card responde al click */
.db-note-card.db-note-card--v2:hover {
  border-color: rgba(20, 184, 166, 0.30);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06);
}
.db-note-card.db-note-card--v2:active {
  transform: scale(.995);
}

/* ── Overlay ─────────────────────────────────────────────────────── */
.db-note-read {
  /* Hereda base del .pt-modal-overlay legacy */
  background: rgba(15, 23, 42, 0.50);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  padding: 0;
  align-items: flex-end; /* mobile default: bottom sheet */
}

/* ── Modal container ─────────────────────────────────────────────── */
.db-note-read .db-note-read__box {
  max-width: none;
  width: 100%;
  max-height: 88dvh;
  border-radius: 24px 24px 0 0;
  background: #fffdf6; /* warm paper feel para reading */
  box-shadow:
    0 -8px 32px rgba(15, 23, 42, 0.18),
    0 -2px 8px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Slide from bottom */
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.34, 1.4, .64, 1);
}
.db-note-read.open .db-note-read__box {
  transform: translateY(0);
}

/* ── Header ──────────────────────────────────────────────────────── */
.db-note-read__head {
  padding: 1rem 1.2rem 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex: 0 0 auto;
}
.db-note-read__head-left {
  min-width: 0;
  flex: 1;
}
.db-note-read__date {
  font-family: var(--pt-font);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--pt-text);
  letter-spacing: -.005em;
  line-height: 1.2;
}
.db-note-read__rel {
  font-size: 0.74rem;
  color: var(--pt-muted);
  margin-top: 2px;
  font-weight: 500;
}
.db-note-read__head-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Priv chip cuando vive en el header — mas compacto que en el footer */
.db-note-read__head-right .db-note-read__priv {
  padding: 3px 8px 3px 7px;
  font-size: 0.68rem;
}
.db-note-read__head-right .db-note-read__priv:empty {
  display: none;
}
.db-note-read__head-right .db-note-read__mood:empty {
  display: none;
}
.db-note-read__mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 7px;
  background: rgba(15, 23, 42, 0.045);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pt-text2);
  letter-spacing: -.005em;
  white-space: nowrap;
}
.db-note-read__mood span:first-child {
  font-size: 1rem;
  line-height: 1;
}
.db-note-read__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.05);
  color: var(--pt-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1),
              color 200ms cubic-bezier(.4, 0, .2, 1),
              transform 200ms cubic-bezier(.4, 0, .2, 1);
}
.db-note-read__close svg { width: 16px; height: 16px; }
.db-note-read__close:hover { background: #ffffff; color: var(--pt-text); }
.db-note-read__close:active { transform: scale(.94); }
.db-note-read__close:focus-visible {
  outline: 2px solid var(--pt-teal);
  outline-offset: 2px;
}

/* ── Body: contenido reading ─────────────────────────────────────── */
.db-note-read__body {
  padding: 1.3rem 1.4rem 1.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  background: #fffdf6;
  position: relative;
}
/* Línea vertical sutil como spine de cuaderno */
.db-note-read__body::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: rgba(245, 183, 161, 0.35);
  border-radius: 2px;
  pointer-events: none;
}
.db-note-read__content {
  margin: 0;
  padding-left: 0.85rem;
  font-family: var(--pt-serif, Georgia, 'Times New Roman', serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: #1f2937;
  white-space: pre-wrap;       /* preserva line breaks del paciente */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ── Footer: priv chip + acciones ────────────────────────────────── */
.db-note-read__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1.2rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  background: #ffffff;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.db-note-read__priv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.db-note-read__priv svg { width: 11px; height: 11px; flex: 0 0 auto; }
.db-note-read__priv--private {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.15);
}
.db-note-read__priv--shared {
  background: var(--pt-teal-bg);
  color: var(--pt-teal-dk);
  border-color: rgba(20, 184, 166, 0.18);
}

.db-note-read__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}
.db-note-read__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0.55rem 1rem;
  font-family: var(--pt-font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -.005em;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 200ms cubic-bezier(.4, 0, .2, 1),
              background 200ms cubic-bezier(.4, 0, .2, 1),
              color 200ms cubic-bezier(.4, 0, .2, 1);
}
.db-note-read__btn svg { width: 14px; height: 14px; }
.db-note-read__btn--ghost {
  background: transparent;
  color: var(--pt-sub);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.db-note-read__btn--ghost:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--pt-text);
}
.db-note-read__btn--primary {
  background: linear-gradient(180deg, var(--pt-teal) 0%, var(--pt-teal-dk) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.28);
}
.db-note-read__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 184, 166, 0.36);
}
.db-note-read__btn:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.30);
  outline-offset: 2px;
}

/* ── Grab handle visual (solo bottom sheet mobile) ─ affordance de swipe */
@media (max-width: 767px) {
  .db-note-read__box::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.18);
    margin: 8px auto 0;
    flex: 0 0 auto;
  }
}

/* ── Desktop (≥768px): modal centrado, no bottom sheet ───────────── */
@media (min-width: 768px) {
  .db-note-read {
    align-items: center;
    padding: 1.5rem;
  }
  .db-note-read .db-note-read__box {
    max-width: 600px;
    max-height: min(82vh, 82dvh);
    border-radius: 24px;
    transform: scale(.96) translateY(8px);
    transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
  }
  .db-note-read.open .db-note-read__box {
    transform: scale(1) translateY(0);
  }

  .db-note-read__head { padding: 1.15rem 1.4rem 0.95rem; }
  .db-note-read__body { padding: 1.5rem 1.6rem 1.6rem; }
  .db-note-read__content { font-size: 1.1rem; line-height: 1.8; padding-left: 1rem; }
  .db-note-read__foot { padding: 1rem 1.4rem; }
}

/* ── Móvil pequeño (≤380px) ─────────────────────────────────────── */
@media (max-width: 380px) {
  .db-note-read__head { padding: 0.85rem 1rem 0.7rem; gap: 0.65rem; }
  .db-note-read__date { font-size: 0.96rem; }
  .db-note-read__rel  { font-size: 0.68rem; }
  .db-note-read__close { width: 32px; height: 32px; }
  .db-note-read__body { padding: 1.1rem 1.1rem 1.2rem; }
  .db-note-read__body::before { left: 0.9rem; }
  .db-note-read__content { font-size: 1rem; line-height: 1.7; padding-left: 0.75rem; }
  .db-note-read__foot { padding: 0.75rem 1rem; gap: 0.55rem; }
  .db-note-read__btn { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-note-read .db-note-read__box,
  .db-note-read__close,
  .db-note-read__btn,
  .db-note-card.db-note-card--v2 { transition: none !important; }
  .db-note-read__btn--primary:hover { transform: none; }
  .db-note-card.db-note-card--v2:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   === END NOTE READ MODAL ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL RESPONSIVE FIXES V1 ===
   Auditoria responsive completa del portal del paciente. Fixes
   aplicados sobre CSS existente, sin tocar Blade/JS/BD/rutas.

   Cubre: dashboard, modal nota, nav (top/bottom), tareas, mi-red,
   perfil/seguridad, plan-seguridad, calm-space, modales globales y
   defensa anti-overflow horizontal.

   Dispositivos validados (lectura): 1440 / 1366 / 1280 / 1200 / 1024
   / 834 / 820 / 768 / 440 (16PM) / 430 (15PM) / 390 / 375 / 360 / 320.

   Para rollback: borrar entre PORTAL RESPONSIVE FIXES V1 y END.
   Backup adicional: public/css/portal.css.bak
   ════════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · Defensa anti-overflow horizontal global ────────────────
   Regla obligatoria CLAUDE.md: cero scroll horizontal en portal.
   `.pt-app` envuelve TODO el portal autenticado. `.pt-standalone`
   envuelve las pantallas standalone (login, password, terms).
   Forzamos overflow-x:hidden defensivo + max-width:100% en el main.
*/
.pt-app,
.pt-standalone {
  max-width: 100%;
  overflow-x: hidden;
}
.pt-main {
  max-width: 100%;
  min-width: 0;
}
/* Cualquier hijo directo en mobile que tenga un max-width 760/1100 sigue
   centrado, pero ningun child puede expandir el padre. */
@media (max-width: 768px) {
  .pt-app > * { max-width: 100%; }
  .pt-main > * { max-width: 100%; }
}


/* ─── FIX 2 · Inputs sin zoom auto en iOS Safari ─────────────────────
   Safari iOS hace zoom-to-focus si el input tiene font-size < 16px.
   En desktop respetamos los tamanos finos del diseno; en mobile
   forzamos minimo 16px solo al hacer focus visual no se degrada
   porque mantenemos el padding/height.
*/
@media (max-width: 768px) {
  .pt-input,
  .pt-textarea,
  .sec-v2-input,
  .ra-input,
  .db-eco-text,
  .ts-worksheet-textarea,
  .db-writing-textarea,
  .nm-v2__paper-area,
  .plg-fl-input {
    font-size: 16px;
  }
  /* La password muestra un caracter especial — mantener legible */
  .sec-v2-input[type="password"] {
    letter-spacing: 0.04em;
  }
}


/* ─── FIX 3 · psp-sos vs bottom-nav (plan-seguridad) ─────────────────
   Bug critico: el boton SOS flotante esta en `bottom: 16px` sin
   considerar el bottom-nav movil. Queda TAPADO en mobile. Lo
   reposicionamos arriba del nav usando las variables ya definidas.
   Desktop mantiene su posicion (no hay bottom-nav).
*/
@media (max-width: 768px) {
  .psp-sos {
    bottom: calc(
      var(--portal-safe-bottom, env(safe-area-inset-bottom, 0px)) +
      var(--portal-bottom-nav-h, 64px) +
      var(--portal-bottom-nav-gap, 12px) +
      8px
    );
    z-index: 65; /* sobre el bottom-nav (60) */
  }
  /* El padding-bottom del wrap tambien necesita extenderse para que
     el ultimo contenido (commitment / closing) no quede tapado. */
  .psp-wrap {
    padding-bottom: calc(
      var(--portal-bottom-nav-h, 64px) +
      var(--portal-bottom-nav-gap, 12px) +
      var(--portal-safe-bottom, env(safe-area-inset-bottom, 0px)) +
      80px
    );
  }
}


/* ─── FIX 4 · ra-wrap (mi-red) padding-bottom suficiente ─────────────
   El padding actual `8px 0 80px` no considera bottom-nav. El boton
   "Agregar contacto" queda al borde y puede ser tapado.
*/
@media (max-width: 768px) {
  .ra-wrap {
    padding-bottom: calc(
      var(--portal-bottom-nav-h, 64px) +
      var(--portal-bottom-nav-gap, 12px) +
      var(--portal-safe-bottom, env(safe-area-inset-bottom, 0px)) +
      32px
    );
  }
}


/* ─── FIX 5 · pwd-page--v2 (perfil/seguridad) padding-bottom mobile ──
   El header v2 + cards de password/nombre se ven correctas, pero el
   boton "Guardar" del fondo puede quedar a 1px del bottom-nav.
   Anadimos margen seguro.
*/
@media (max-width: 768px) {
  .pwd-page--v2 {
    padding-bottom: calc(
      var(--portal-bottom-nav-h, 64px) +
      var(--portal-bottom-nav-gap, 12px) +
      var(--portal-safe-bottom, env(safe-area-inset-bottom, 0px)) +
      24px
    );
  }
}


/* ─── FIX 6 · ra-card layout — nombre largo no rompe layout ──────────
   El `.ra-card-info` esta en flex pero sin min-width:0 — un nombre
   largo o relacion larga puede empujar las acciones fuera del card.
*/
.ra-card-info {
  min-width: 0;
  overflow: hidden;
}
.ra-card-name,
.ra-card-rel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ra-card-top {
  min-width: 0;
}
/* En mobile pequeno apretamos las acciones para que entren con el
   nombre + avatar sin necesidad de truncar agresivamente. */
@media (max-width: 380px) {
  .ra-icon-btn { width: 32px; height: 32px; }
  .ra-icon-btn svg { width: 14px; height: 14px; }
  .ra-card { padding: 16px; }
  .ra-card-avatar { width: 40px; height: 40px; font-size: 1rem; }
}


/* ─── FIX 7 · tk-card (tareas) — textos largos no rompen card ────────
   `.tk-card` usa grid auto-fill minmax(300px, 1fr) — en mobile el
   media query ya pasa a 1fr, pero falta `min-width: 0` para que
   contenidos con palabras sin espacios no expandan la card y
   provoquen overflow horizontal en el body.
*/
.tk-card { min-width: 0; }
.tk-card h3,
.tk-card-preview,
.tk-card-author {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tk-grid { min-width: 0; }


/* ─── FIX 8 · calm-modal controls respetan safe-area iOS notch ───────
   Los botones cerrar/mute estan en `top: 20px`. En iPhones con notch
   en orientacion portrait dentro de WebView pueden quedar parcialmente
   tapados. Anadimos safe-area-inset-top.
*/
@media (max-width: 600px) {
  .calm-close-btn {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
  }
  .calm-mute-btn {
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 12px;
  }
  /* Compactamos el modal en ultra-pequenos */
  .calm-modal-box { padding: 24px 18px; }
}
@media (max-width: 360px) {
  .calm-modal-box { padding: 20px 14px; border-radius: 24px; }
  .calm-stage-icon { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px; }
  .calm-stage-icon svg { width: 28px; height: 28px; }
  .calm-stage h2 { font-size: 1.35rem; }
  .calm-stage p { font-size: .95rem; }
  .organic-container { width: 190px; height: 190px; }
  .organic-core { width: 115px; height: 115px; }
}


/* ─── FIX 9 · db-month-insight conflicto display flex/inline-flex ────
   El bloque legacy declara `display: inline-flex` y luego `display: flex`
   (override en el comentario). Esto rompe el centrado con max-width.
   Normalizamos a flex centrado.
*/
.db-month-insight {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* ─── FIX 10 · ts-worksheet-body max-height fluida ───────────────────
   En mobile pequeno (altura < 600) el `max-height: 520px` puede
   forzar un area mas grande que el viewport util. Limitamos con dvh.
*/
@media (max-width: 768px) {
  .ts-worksheet-body {
    max-height: min(520px, 55dvh);
  }
}


/* ─── FIX 11 · Modales: lock body scroll cuando estan abiertos ───────
   Defensive — cuando .pt-modal-overlay.open esta visible, prevenir
   que el body siga scrolleando detras (el modal V2 ya tiene scroll
   interno controlado). Solo si el browser no lo evita ya.
*/
.pt-modal-overlay.open ~ * { /* placeholder no-op para futura extension */ }


/* ─── FIX 12 · .pt-main padding-bottom mobile (fab + bottom-nav) ─────
   La regla legacy de .pt-main para mobile establece el padding-bottom
   considerando bottom-nav + fab. Sin embargo en paginas que NO tienen
   fab (tareas, mi-red, perfil) el padding queda excesivo. Reglas mas
   finas para tipo de pagina via body-class no son posibles sin tocar
   Blade; sin embargo el extra padding (que sobra unos 70px en pages
   sin fab) no rompe nada — solo deja un poco mas de espacio.
   No-op: documentado como decision intencional. */


/* ─── FIX 13 · pt-toast respetar bottom-nav movil ────────────────────
   `.pt-toast` esta en `bottom: 1.25rem` — en mobile queda detras del
   bottom-nav. Reposicionar arriba del nav.
*/
@media (max-width: 768px) {
  .pt-toast {
    bottom: calc(
      var(--portal-safe-bottom, env(safe-area-inset-bottom, 0px)) +
      var(--portal-bottom-nav-h, 64px) +
      var(--portal-bottom-nav-gap, 12px) +
      14px
    );
    z-index: 9999;
  }
}


/* ─── FIX 14 · pt-modal y pt-modal-shell — no se salen del viewport ──
   Defensive: cap a calc(100vw - margen) y altura dvh para que en
   landscape de movil + teclado virtual no queden cortados.
*/
.pt-modal {
  max-width: min(520px, calc(100vw - 24px));
  max-height: min(85dvh, 85vh);
}
.pt-modal-overlay {
  padding: max(.75rem, env(safe-area-inset-top, 0px))
           max(.75rem, env(safe-area-inset-right, 0px))
           max(.75rem, env(safe-area-inset-bottom, 0px))
           max(.75rem, env(safe-area-inset-left, 0px));
}


/* ─── FIX 15 · Topbar nav v2 — entre 769-900px aprieta tabs ──────────
   En tablet 800-900px las 4 tabs (Diario, Tareas, Mi red, Perfil) +
   avatar + logout pueden generar wrap del nav central. La regla
   1024-down ya esconde el saludo, pero las tabs siguen demandando
   espacio. Reducimos el padding lateral del tab en ese rango.
*/
@media (min-width: 769px) and (max-width: 900px) {
  .pt-topbar--v2 .pt-topbar-inner { padding: 0 .85rem; gap: .75rem; }
  .pt-topbar--v2 .pt-topbar-tab {
    padding: .5rem .65rem;
    font-size: .76rem;
  }
  .pt-topbar--v2 .pt-topbar-tab svg { width: 13px; height: 13px; }
  .pt-topbar--v2 .pt-topbar-tab span {
    display: inline-block;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ─── FIX 16 · Skeleton hero V2 con ancho responsive ─────────────────
   `.db-sk-hero-v2` tiene `max-width: 760px` pero en mobile carece de
   ajuste de padding lateral propio. El padre `.pt-main` ya da
   padding lateral, asi que solo aseguramos max-width: 100%.
*/
.db-sk-hero-v2 { max-width: min(760px, 100%); }


/* ─── FIX 17 · plg-root (login) en mobile — height fix ───────────────
   `.plg-root` declara `min-height: 100dvh` pero el media (max-width:860)
   abre el flujo con `overflow-y: auto` en body. Defensive: el root
   debe poder crecer sin overflow horizontal.
*/
.plg-root { max-width: 100%; overflow-x: hidden; }
@media (max-width: 480px) {
  .plg-root { display: block; }
  .plg-right { padding: 1rem .75rem 2rem; }
}


/* ─── FIX 18 · sec-v2-grid en iPad portrait (768-820) ────────────────
   La grid de seguridad es `1fr` hasta 819px, `1fr 1fr` desde 820px.
   En iPad portrait justo en el corte queda apretada. Forzamos break
   en 880px para mas aire.
*/
@media (min-width: 820px) and (max-width: 879px) {
  .sec-v2-grid { grid-template-columns: 1fr; }
}


/* ─── FIX 19 · pt-card-pad mobile ───────────────────────────────────
   Cards genericas en mobile pequeno tienen 1.25rem padding que en
   320px deja muy poco espacio para contenido. Reducimos a 1rem.
*/
@media (max-width: 380px) {
  .pt-card-pad { padding: 1rem; }
}


/* ─── FIX 20 · Modales con headers/footers sticky en mobile ──────────
   `.pt-modal-header` y `.pt-modal-body` ya tienen scroll interno; en
   mobile cuando el modal ocupa casi todo el viewport, el header
   puede quedar afuera de la zona visible si hay teclado. Reforzamos
   con sticky el header.
*/
@media (max-width: 600px) {
  .pt-modal { max-height: min(90dvh, 90vh); }
  .pt-modal-header {
    position: sticky;
    top: 0;
    background: var(--pt-card);
    z-index: 2;
  }
}


/* ─── FIX 21 · Texto largo en cards de notas y tareas no rompe ───────
   Cubre tanto V2 (db-note-card--v2) como cards de tareas (tk-card).
*/
.db-note-card,
.db-note-card--v2,
.db-note-card.db-note-card--stitch {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ─── FIX 22 · ts-actions en mobile mas pequeno ──────────────────────
   La regla `(max-width: 768px) .ts-actions { flex-direction: column }`
   ya esta, pero los botones internos sin width:100% siguen apretados.
   Forzamos full-width explicito en mobile.
*/
@media (max-width: 600px) {
  .ts-actions { flex-direction: column; gap: .5rem; }
  .ts-actions .pt-btn,
  .ts-actions .pt-btn--primary {
    width: 100%;
    min-width: 0;
    flex: none;
  }
}


/* ─── FIX 23 · Reduced motion final guard ────────────────────────────
   Las animaciones nuevas (FIX V1) tambien deben respetar
   prefers-reduced-motion. Las nuevas reglas no introducen animaciones
   propias pero modifican variables — no-op aqui, documentado por
   trazabilidad.
*/
/* (sin reglas — placeholder) */


/* ─── FIX 24 · db-fab desktop — no chocar con scrollbar ──────────────
   `.db-fab` desktop esta en `right: 30px`. En desktops con scrollbar
   visible (Windows clasico) puede quedar parcialmente bajo el
   scrollbar. Subir a 36px que es la ancho tipico.
*/
@media (min-width: 769px) {
  .db-fab { right: 36px; }
}


/* ─── FIX 25 · pg-page (guia) — overflow defensivo ───────────────────
   La pagina de guia tiene gradients y blobs decorativos que pueden
   desbordar lateralmente en mobile si el navegador no contiene los
   absolute children. Defensive overflow-x hidden.
*/
.pg-page { max-width: 100%; overflow-x: hidden; }
.pg-hero { overflow: hidden; }


/* ─── FIX 26 · plan-seguridad — main padding-bottom mobile ──────────
   El padre `.pt-main` tiene padding-bottom para fab+bottom-nav, pero
   plan-seguridad NO tiene fab. Aseguramos que el flujo termine con
   espacio respirable y el SOS reposicionado queda 8px sobre nav.
*/
@media (max-width: 768px) {
  /* La regla esta arriba en FIX 3 — el psp-sos tiene su propio
     padding-bottom calculado. */
}


/* ─── FIX 27 · pt-input legacy — touch target en mobile ─────────────
   `.pt-input` height 44px ya cumple WCAG 2.5.5. OK por defecto. */


/* ─── FIX 28 · db-checkin-btn — touch friendly en mobile pequeno ────
   El grid es repeat(5, 1fr). En 320px cada boton queda ~50px de
   ancho con 6px gap — touch ok pero apretado. Reducimos gap.
*/
@media (max-width: 380px) {
  .db-checkin-grid { gap: 4px; }
  .db-checkin-btn { padding: 8px 2px; min-height: 56px; }
  .db-checkin-emoji { font-size: 1.25rem; }
  .db-checkin-label { font-size: .62rem; line-height: 1.05; }
}


/* ─── FIX 29 · Calm tech list pulida en mobile pequeno ──────────────
   El espacio horizontal en 320px para las tech rows del calm hace
   que `.calm-tech-dur` (badge "5 min") corra el texto. Apretamos.
*/
@media (max-width: 380px) {
  .calm-tech-row { padding: 10px 11px; gap: 10px; }
  .calm-tech-ico { width: 36px; height: 36px; border-radius: 11px; }
  .calm-tech-ico svg { width: 17px; height: 17px; }
  .calm-tech-title { font-size: .88rem; }
  .calm-tech-desc { font-size: .72rem; }
  .calm-tech-dur { padding: 2px 7px; font-size: .65rem; }
}


/* ─── FIX 30 · Recordatorios bottom (footer-portal) en mobile ─────── */
@media (max-width: 768px) {
  .pt-footer { display: none; }
  /* El footer-portal compite con el bottom-nav. En mobile se oculta;
     en desktop sigue visible normalmente. */
}


/* ─── FIX 31 · plan-seguridad letter / quote spacing mobile ────────── */
@media (max-width: 480px) {
  .psp-letter { padding: 18px 18px 16px; }
  .psp-letter-seal { left: 18px; }
  .psp-letter-label { margin-left: 38px; font-size: .68rem; }
  .psp-letter-body { font-size: .92rem; line-height: 1.6; }
  .psp-commit { padding: 18px 18px 18px 40px; }
  .psp-commit::before { left: 10px; font-size: 2.8rem; }
}


/* ─── FIX 32 · db-mired-grid en mobile pequeno ──────────────────────
   La regla existente para ≤480 ya pone 1 col. OK. Pero la card
   contenido (avatar+name+rel+actions) en 320px queda apretada.
*/
@media (max-width: 360px) {
  .db-mired-card { padding: .6rem .65rem; gap: .55rem; }
  .db-mired-avatar { width: 32px; height: 32px; font-size: .8rem; }
  .db-mired-actions { gap: .25rem; }
  .db-mired-act { width: 34px; height: 34px; }
}


/* ─── FIX 33 · Modal V2 nota — soporte de teclado virtual ───────────
   En mobile con teclado virtual abierto, el viewport efectivo se
   reduce. Apoyamos en dvh y aseguramos que el textarea no haga
   overflow del modal.
*/
.db-note-modal--v2 .nm-v2 {
  max-height: min(92dvh, 92vh);
}
@media (max-width: 600px) {
  .db-note-modal--v2 .nm-v2__paper-area {
    min-height: 120px;
    max-height: 40dvh;
  }
}


/* ─── FIX 34 · Tablas con wrapper responsive (tareas pdf no afecta) ──
   Si en el futuro se introducen tablas, el `.pt-table-wrapper` ya
   existe y debe usarse. Documentado por trazabilidad. */


/* ─── FIX 35 · Hero del dashboard original — comprobacion 320px ─────
   .db-hero original (.db-hero-v2 ya esta retirado) tiene
   `padding: 3rem 1.25rem 2.5rem` y eso en 320px queda OK. El
   `.db-hero-quote` con clamp() responsive. Sin cambios.
   Documentado por trazabilidad. */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL RESPONSIVE FIXES V1.1 — Containment de raiz ===
   El V1 puso `overflow-x:hidden` en `.pt-app`, pero eso solo RECORTA
   visualmente; no impide que un texto largo (ej. nota del paciente
   "Hqjxbxnxmxmxmc...") empuje el ancho del `.pt-main` mas alla del
   viewport y arrastre cards como `.db-bento--stitch` o `.db-mired`.

   Causa raiz: `.pt-app` es flex column. Sus flex items (incluido
   `.pt-main`) tienen `min-width: auto` por defecto, lo que los hace
   tomar el min-content de sus hijos. Una palabra sin espacios fuerza
   ese min-content arriba del viewport.

   Fix: forzar `min-width: 0` en wrappers + hijos clave, y reforzar
   word-break en TODO contenedor de texto del paciente (notas, eco,
   commitment, reminder, mood text, etc.).
   ════════════════════════════════════════════════════════════════════ */

/* ─── FIX V1.1 · #1 — min-width: 0 en wrappers raiz ──────────────── */
.pt-app,
.pt-main,
.pt-standalone {
  min-width: 0;
}

/* Hijos directos del main no se expanden mas alla del viewport.
   Aplicado SIEMPRE (no solo mobile) — un nombre largo en desktop
   tambien puede expandir un card. */
.pt-main > * {
  min-width: 0;
  max-width: 100%;
}

/* Grids y flex containers internos: sus items tambien necesitan
   min-width:0 para no expandirse por contenido. */
.db-bento--stitch,
.db-stats,
.db-bento--stitch > *,
.db-stats > *,
.db-notes-grid,
.db-notes-grid > *,
.db-notes-grid--v2,
.db-notes-grid--v2 > *,
.db-mired-grid,
.db-mired-grid > *,
.tk-grid,
.tk-grid > *,
.tk-stats,
.tk-stats > *,
.ra-list,
.ra-list > * {
  min-width: 0;
  max-width: 100%;
}


/* ─── FIX V1.1 · #2 — Texto del paciente con wrap robusto ────────────
   Cualquier campo libre que rellene el paciente: notas, eco, commit
   plan-seguridad, contacto red apoyo, recordatorio inline.
*/
.db-note-text,
.nc-v2__body,
.db-note-read__content,
.db-tasks-st__name,
.db-mired-name,
.db-mired-rel,
.ra-card-name,
.ra-card-rel,
.ra-card-notas,
.psp-commit-text,
.psp-letter-body,
.psp-contact-name,
.psp-contact-rel,
.psp-place-name,
.psp-place-ctx,
.tk-card h3,
.tk-card-preview,
.ts-objective-text,
.ts-instructions,
.db-eco-text,
.db-mood-after__btn-lbl,
.calm-tech-title,
.calm-tech-desc,
.calm-extra-title,
.calm-extra-desc {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}


/* ─── FIX V1.1 · #3 — Containers con max-width fijo no exceden ──────
   Estos containers declaran `max-width: NNNpx` y `margin: auto`. En
   mobile NO deben exceder el ancho del padre incluso si algun hijo
   intenta empujar. Reforzamos con `width: auto` (en lugar de
   `width: 100%`) para preservar el `margin: auto` que los centra,
   pero anclado con `max-width: 100%`.
*/
.db-bento--stitch,
.db-stats,
.db-notes-grid,
.db-notes-grid--v2,
.db-mired,
.db-mired--stitch,
.db-heatmap,
.db-month-insight,
.db-goal,
.db-rec-action,
.db-checkin,
.db-eco,
.db-memory-chip,
.db-reminder,
.db-welcome-msg,
.db-calm,
.db-hero,
.db-hero-v2,
.db-sk-hero,
.db-sk-hero-v2,
.db-sk-section,
.db-sk-stats,
.db-notes-hdr,
.db-fab,
.tk-hero,
.psp-wrap,
.ra-wrap,
.pwd-page,
.pwd-page--v2 {
  max-width: min(100%, var(--__max, 1100px));
}
/* Nota: la variable --__max no esta seteada en el CSS — el min()
   resuelve al primer valor finito = 100%. Esto preserva los
   max-widths originales de cada componente porque cada uno ya
   declara su propio max-width arriba y aqui solo capamos al 100%. */


/* ─── FIX V1.1 · #4 — db-bento--stitch no excede en mobile ──────────
   El wrapper tiene `max-width: 1100px` + `margin: auto`. En mobile
   ese max-width no aplica (viewport < 1100), pero declaramos
   explicitamente width: 100% y min-width: 0 para evitar cualquier
   expansion por children con texto largo. Y el padding extra que
   le dimos via `.pt-main` deja aire lateral.
*/
.db-bento--stitch {
  width: 100%;
  min-width: 0;
}
.db-tasks-st,
.db-mired,
.db-mired--stitch {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

/* Header de db-tasks-st: el ".db-tasks-st__more" puede ser largo
   ("Ver todas →"). Forzamos no wrap, pero el contenedor permite
   shrink. */
.db-tasks-st__hdr {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: .4rem;
}
.db-tasks-st__title { min-width: 0; flex: 1; }
.db-tasks-st__more { flex-shrink: 0; }
.db-tasks-st__link { min-width: 0; }
.db-tasks-st__text { min-width: 0; }


/* ─── FIX V1.1 · #5 — db-mired header tambien wrap ──────────────── */
.db-mired-hdr { flex-wrap: wrap; row-gap: .4rem; min-width: 0; }
.db-mired-hdr h2 { min-width: 0; flex: 1; }
.db-mired-more { flex-shrink: 0; }
.db-mired-card { min-width: 0; }
.db-mired-body { min-width: 0; flex: 1; }
.db-mired-actions { flex-shrink: 0; }


/* ─── FIX V1.1 · #6 — Notas legacy con texto sin espacios ──────────
   `.db-note-card` legacy ya tiene `overflow-wrap: anywhere`, pero
   el body `.db-note-text` (line-clamp) puede mantener un width
   minimo en min-content. Forzamos word-break agresivo.
*/
.db-note-card,
.db-note-card--v2 {
  min-width: 0;
  width: auto;
}
.db-note-card .db-note-text,
.db-note-card--v2 .nc-v2__body {
  min-width: 0;
  /* anywhere permite romper en cualquier punto si la palabra es
     mas larga que el container — clave para texto sin espacios. */
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ─── FIX V1.1 · #7 — Cards de tareas (tareas/index) wrap ─────────── */
.tk-card,
.tk-card h3,
.tk-card-preview { min-width: 0; }
.tk-card-top { min-width: 0; flex-wrap: wrap; row-gap: .35rem; }
.tk-card-top > * { min-width: 0; }


/* ─── FIX V1.1 · #8 — Calm modal contenidos wrap ──────────────────── */
.calm-tech-meta,
.calm-extra-meta { min-width: 0; }
.calm-tech-row,
.calm-extra-card { min-width: 0; }


/* ─── FIX V1.1 · #9 — Red apoyo card con notas largas ─────────────── */
.ra-card { min-width: 0; }
.ra-card-info { min-width: 0; flex: 1; }
.ra-card-phone { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ─── FIX V1.1 · #10 — Plan seguridad contenedores ────────────────── */
.psp-moment,
.psp-letter,
.psp-commit,
.psp-contact,
.psp-place,
.psp-crisis,
.psp-intro { min-width: 0; }
.psp-contact-body,
.psp-place-body,
.psp-crisis-body { min-width: 0; flex: 1; }


/* ─── FIX V1.1 · #12 — Guard final: cualquier text-block del portal ─
   Una palabra sin espacios NUNCA debe empujar el layout. Esta es
   la red final: si un autor del Blade olvido poner wrap en algun
   p/span con texto del paciente, esta regla lo cubre.
*/
.pt-app p,
.pt-app h1,
.pt-app h2,
.pt-app h3,
.pt-app h4,
.pt-app h5,
.pt-app h6,
.pt-app span,
.pt-app strong,
.pt-app em,
.pt-app li {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Excepciones: numeros grandes (no son texto del paciente) y
   labels de UI con texto controlado por el sistema. */
.pt-app .db-stat-val,
.pt-app .tk-stat-num,
.pt-app .nc-st__plaque-day,
.pt-app .db-checkin-emoji,
.pt-app .calm-mood-after__btn {
  word-break: normal;
  overflow-wrap: normal;
}


/* ─── FIX V1.1 · #13 — pt-app no es flex item de body ───────────────
   `body { display: block }` por defecto, pero el reset del portal
   no establece overflow-x en body/html. Defensive para casos donde
   un script inyecte algo al body fuera de `.pt-app`.
*/
html, body {
  max-width: 100%;
  overflow-x: clip; /* clip es mejor que hidden: no crea scroll context
                       y respeta position:sticky. Fallback hidden si
                       el browser no soporta clip. */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}


/* ─── FIX V1.1 · #14 — pt-main padding lateral defensivo ─────────────
   Si el padding lateral del main cae a 0 por algun fix anterior, las
   cards quedan pegadas al borde. Aseguramos minimo .85rem siempre.
*/
@media (max-width: 768px) {
  .pt-main {
    padding-left: max(.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(.85rem, env(safe-area-inset-right, 0px));
  }
}


/* ════════════════════════════════════════════════════════════════════
   === END PORTAL RESPONSIVE FIXES V1.1 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL BNAV ANIMATED PILL V1 ===
   Pill teal del bottom-nav se DESLIZA suavemente entre pestanas al
   cambiar de tab (en vez de saltar). Solo mobile (donde se ve el
   bottom-nav). Animado con `transform` + `width` (compositor GPU).

   Sin librerias. Sin tocar Blade. JS minimo (~70 lineas) inyecta un
   <span> .portal-bnav__pill dentro del nav al cargar.

   Para revertir:
     1. Borrar este bloque CSS hasta END PORTAL BNAV ANIMATED PILL V1.
     2. Borrar el bloque JS homonimo en public/js/portal.js.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* El nav ya esta `position: fixed`, asi que el pill absolute se
     ancla a el. Los items existentes quedan por encima. */
  .portal-bottom-nav { position: fixed; }

  .portal-bnav__pill {
    position: absolute;
    top: 8px;
    left: 0;
    height: calc(100% - 16px);
    width: 0;
    border-radius: 9999px;
    background: var(--pt-teal-bg, #f0fdfa);
    box-shadow:
      inset 0 0 0 1px rgba(20, 184, 166, 0.18),
      0 2px 8px rgba(20, 184, 166, 0.15);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    /* No transition hasta is-ready — evita "salto" al cargar. */
  }
  .portal-bnav__pill.is-ready {
    opacity: 1;
    transition:
      transform .38s cubic-bezier(.34, 1.56, .64, 1),
      width .32s cubic-bezier(.4, 0, .2, 1);
  }

  /* Compact state: el nav reduce su padding interno — el pill
     ajusta su top/height para seguir centrado verticalmente. */
  .portal-bottom-nav[data-state="compact"] .portal-bnav__pill {
    top: 4px;
    height: calc(100% - 8px);
  }

  /* Items siempre por encima del pill */
  .portal-bnav__item { position: relative; z-index: 1; }

  /* Override del active: el background y la sombra ahora viven en
     el pill flotante, no en cada item. Mantenemos color/peso del
     active (label + icono). */
  .portal-bottom-nav .portal-bnav__item.is-active,
  .portal-bottom-nav--stitch .portal-bnav__item.is-active {
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-bnav__pill.is-ready { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL BNAV ANIMATED PILL V1 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === END PORTAL RESPONSIVE FIXES V1 ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === PORTAL BOTTOM NAV OPTIMIZATION ===
   Refinamientos puntuales sobre el bottom-nav v2 existente:
     1. Floor de separacion vertical (no quedar pegado al borde en
        Android sin safe-area-inset).
     2. Max-width mas generoso para iPhones grandes (430-440px) sin
        romper iPhone SE (320-360px).
     3. Active state con borde teal mas refinado sobre el glass blur.
     4. Compact state con transicion suavizada (curve menos abrupta).
     5. Hide automatico cuando hay modal abierto (uso de :has() en
        navegadores modernos) o teclado activo (clase via JS).
     6. Focus-visible mas contrastado sobre fondo glass.
   No toca Blade ni controllers. Backup: portal.css.bak.bnav-optimization
   Para revertir: borrar este bloque hasta END PORTAL BOTTOM NAV
   OPTIMIZATION y restaurar el .bak.
   ════════════════════════════════════════════════════════════════════ */

/* Variables refinadas con FLOOR de separacion para Android (sin notch).
   Si el dispositivo NO reporta safe-area-inset-bottom, garantizamos
   un colchon visual minimo para que la capsula no quede pegada al
   borde del viewport. */
:root {
  --portal-bnav-edge-floor: 16px;   /* gap minimo al borde inferior */
  --portal-bnav-tablet-show: 0;      /* placeholder por si en el futuro
                                        se quiere mostrar en tablet */
}

@media (max-width: 768px) {
  /* 1 · Geometria de la capsula refinada
     ─────────────────────────────────────────────────────────────── */
  .portal-bottom-nav.portal-bottom-nav--stitch {
    /* Floor: max() entre el safe-area y nuestro minimo. En iPhone con
       home-indicator el safe-area domina (~34px). En Android domina
       nuestro floor (16px). Ya no queda pegado al borde. */
    bottom: max(
      var(--portal-bnav-edge-floor),
      calc(var(--portal-bottom-nav-gap) + env(safe-area-inset-bottom, 0px))
    );

    /* Ancho mas generoso para iPhones grandes. En 320-360 cae al
       calc(100% - 16px) que ya esta declarado abajo. */
    max-width: 420px;

    /* Transicion suavizada — menos abrupta al compactar */
    transition:
      transform 280ms cubic-bezier(.22, 1, .36, 1),
      padding 260ms cubic-bezier(.22, 1, .36, 1),
      opacity 220ms cubic-bezier(.4, 0, .2, 1),
      bottom 260ms cubic-bezier(.22, 1, .36, 1);

    /* will-change para promover a layer compuesta (mejor jank) */
    will-change: transform, opacity;
  }

  /* 2 · Active state refinado sobre glass blur
     ─────────────────────────────────────────────────────────────── */
  .portal-bottom-nav--stitch .portal-bnav__item.is-active {
    /* El pill animado vive en .portal-bnav__pill — aqui solo
       reforzamos jerarquia tipografica del item activo. */
    color: var(--pt-teal-dk, #0d9488);
  }

  /* 3 · Focus visible — mejor contraste sobre fondo glass blur */
  .portal-bottom-nav--stitch .portal-bnav__item:focus-visible {
    outline: 2px solid var(--pt-teal, #14b8a6);
    outline-offset: 3px;
    border-radius: 9999px;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18);
  }

  /* 4 · Labels mas legibles — tipografia con tabular-nums para que
     el badge no empuje el layout cuando el contador cambia. */
  .portal-bottom-nav--stitch .portal-bnav__badge {
    font-variant-numeric: tabular-nums;
  }

  /* 5 · Compact state — transicion mas suave del label
     ─────────────────────────────────────────────────────────────── */
  .portal-bottom-nav[data-state="compact"] .portal-bnav__label {
    transition:
      opacity 200ms cubic-bezier(.4, 0, .2, 1),
      height 240ms cubic-bezier(.22, 1, .36, 1);
  }

  /* 6 · Anti-overflow defensivo — nunca expandir mas de 100vw */
  .portal-bottom-nav {
    max-width: min(420px, calc(100vw - 24px));
  }
}

/* 7 · iPhones grandes (390-440px) — capsula con respiro lateral
   coherente y ancho equilibrado (no demasiado estrecha, no edge-to-edge). */
@media (min-width: 390px) and (max-width: 480px) {
  .portal-bottom-nav.portal-bottom-nav--stitch {
    width: calc(100% - 32px);
    max-width: 420px;
  }
}

/* 8 · Telefonos pequenos (321-360px) — apretamos margen pero
   mantenemos tap targets. */
@media (min-width: 321px) and (max-width: 360px) {
  .portal-bottom-nav.portal-bottom-nav--stitch {
    width: calc(100% - 16px);
    padding: 6px;
  }
  .portal-bnav__item { padding: 6px 2px; }
  .portal-bnav__icon svg { width: 21px; height: 21px; }
  .portal-bnav__label { font-size: 9.5px; letter-spacing: 0; }
}

/* 9 · iPhone SE 1st gen y similares (<=320px) — defensa critica
   contra overflow horizontal y labels apretados. */
@media (max-width: 320px) {
  .portal-bottom-nav.portal-bottom-nav--stitch {
    width: calc(100% - 12px);
    max-width: 100%;
    padding: 6px 4px;
    gap: 2px;
  }
  .portal-bnav__item {
    padding: 6px 2px;
    min-height: 42px;
  }
  .portal-bnav__icon svg { width: 20px; height: 20px; }
  .portal-bnav__label { font-size: 9px; letter-spacing: 0; }
  .portal-bnav__badge {
    min-width: 14px;
    height: 14px;
    font-size: 8.5px;
    right: 4px;
    top: 2px;
  }
}

/* 10 · Tablet (769-1024) — defensa anti-aparicion accidental.
   El bottom-nav no debe verse en tablet (ya se oculta por default
   con display:none fuera del @media 768). Reforzamos explicito. */
@media (min-width: 769px) {
  .portal-bottom-nav { display: none !important; }
}

/* 11 · Keyboard activo (iOS Safari, Android) — ocultar bottom-nav
   para que no flote sobre el contenido cuando el usuario escribe.
   La clase `bnav-keyboard-open` la setea el JS en <body> via
   visualViewport. Si el navegador no soporta visualViewport (raro),
   el nav simplemente sigue visible — fallback seguro. */
body.bnav-keyboard-open .portal-bottom-nav {
  transform: translateX(-50%) translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    transform 200ms cubic-bezier(.4, 0, 1, 1),
    opacity 160ms cubic-bezier(.4, 0, 1, 1) !important;
}

/* 12 · Modales del portal abiertos — ocultar nav SOLO en mobile.
   Los modales tienen z-index >= 200 (nav es 60), por lo que
   funcionalmente no compiten; pero visualmente queda un glass-blur
   asomando bajo el modal. Lo ocultamos para experiencia mas limpia.
   Usa :has() — Safari 15.4+, Chrome 105+, Firefox 121+. Navegadores
   sin soporte simplemente muestran el nav debajo del modal (sin
   romper nada, el modal lo cubre con su overlay). */
@media (max-width: 768px) {
  .pt-app:has(.pt-modal-overlay.open) .portal-bottom-nav,
  .pt-app:has(.calm-modal-overlay.open) .portal-bottom-nav,
  .pt-app:has(.db-note-modal--v2.open) .portal-bottom-nav,
  .pt-app:has(.db-note-read.open) .portal-bottom-nav,
  .pt-app:has(.pt-session-overlay.pt-session-show) .portal-bottom-nav {
    transform: translateX(-50%) translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      transform 220ms cubic-bezier(.4, 0, 1, 1),
      opacity 160ms cubic-bezier(.4, 0, 1, 1) !important;
  }
}

/* 13 · Reduced motion — desactiva las nuevas transiciones tambien */
@media (prefers-reduced-motion: reduce) {
  body.bnav-keyboard-open .portal-bottom-nav,
  .pt-app:has(.pt-modal-overlay.open) .portal-bottom-nav,
  .pt-app:has(.calm-modal-overlay.open) .portal-bottom-nav,
  .pt-app:has(.db-note-modal--v2.open) .portal-bottom-nav,
  .pt-app:has(.db-note-read.open) .portal-bottom-nav,
  .pt-app:has(.pt-session-overlay.pt-session-show) .portal-bottom-nav {
    transition: none !important;
  }
  .portal-bottom-nav.portal-bottom-nav--stitch {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   === END PORTAL BOTTOM NAV OPTIMIZATION ===
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   === CALM MODAL VIEWPORT FIX ===
   Bug observado en iPhone 14 Pro Max (iOS Safari): el modal Espacio
   de Calma se sobresale del viewport — la disclaimer "Si estas en
   peligro..." queda parcialmente tapada por la chrome inferior de
   Safari, y no hay forma de scrollear el modal para ver el resto.

   Causas raiz:
     1. .calm-modal-overlay usa `position: fixed; inset: 0;` — en iOS
        esto se extiende DETRAS de la barra inferior dinamica.
     2. .calm-modal-box no tiene max-height ni overflow-y: auto, asi
        que cuando el contenido excede el viewport, simplemente se
        clipea fuera de la pantalla.
     3. .calm-modal-overlay tampoco scrollea (`overflow: visible` por
        default en un flex container) — el contenido queda atrapado.
     4. `align-items: center` en flex con overflow causa clipping del
        TOP cuando el contenido excede (problema clasico de flexbox).
     5. No respeta safe-area-inset-top/bottom (notch, home indicator).

   Fix (CSS only, scopeado al modal Calm):
     A. Overlay con altura `100dvh` (fallback `100vh`) — respeta la
        chrome dinamica de iOS Safari.
     B. Overlay con `overflow-y: auto` + momentum scrolling iOS.
     C. Overlay con padding safe-area para notch y home indicator.
     D. `align-items: safe center` para fallback automatico a
        flex-start cuando el contenido excede el viewport
        (Safari 16.4+ / Chrome 102+ / FF 86+; en navegadores viejos
        comportamiento identico al actual — no regresion).
     E. Box: sin max-height (deja crecer naturalmente), pero con
        `margin: auto` para centrado vertical correcto cuando cabe.
     F. Close/mute buttons: `position: fixed` en mobile para que
        sigan visibles cuando el usuario scrollea el overlay (el
        overlay tiene backdrop-filter, lo que crea containing block
        para los fixed children — quedan anclados al overlay = al
        viewport, ya que el overlay ocupa todo el viewport).

   No toca BD, controllers, rutas ni Blade.
   Backup: portal.css.bak.calm-modal-fix
   Para revertir: borrar este bloque hasta END CALM MODAL VIEWPORT FIX
   y restaurar el .bak.
   ════════════════════════════════════════════════════════════════════ */

/* ── A · B · C · D · Overlay scrollable + safe-area + dvh ─────────── */
.calm-modal-overlay {
  /* Override de la altura: 100dvh respeta la chrome dinamica de iOS.
     Fallback automatico a 100vh si dvh no esta soportado. */
  height: 100vh;
  height: 100dvh;

  /* Permitir scroll cuando el contenido excede el viewport */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* no propaga al body */

  /* Padding con safe-area (notch arriba, home indicator abajo) */
  padding: max(20px, env(safe-area-inset-top, 0px))
           max(20px, env(safe-area-inset-right, 0px))
           max(20px, env(safe-area-inset-bottom, 0px))
           max(20px, env(safe-area-inset-left, 0px));

  /* `safe center`: centra cuando cabe, cae a flex-start (top) cuando
     el contenido excede el viewport. Sin clipping del top. */
  align-items: safe center;
  justify-content: safe center;
}

/* ── E · Modal box ────────────────────────────────────────────────── */
.calm-modal-box {
  /* Forzar margen auto para centrado vertical cuando el contenido
     cabe. Cuando excede, el overlay scrollea y el box queda en flujo
     natural desde arriba (gracias al `safe center` del overlay). */
  margin-top: auto;
  margin-bottom: auto;

  /* No fijar max-height: dejamos que crezca naturalmente. El scroll
     vive en el overlay, no en el box (asi el close button sigue
     pintandose en su posicion original sobre el box). */
  max-height: none;

  /* Defensa: no encoger por flexbox */
  flex-shrink: 0;
}

/* ── F · Close + mute buttons fijos en viewport (mobile) ──────────── */
@media (max-width: 768px) {
  /* Pinned al viewport para que sigan accesibles cuando el usuario
     scrollea el overlay con contenido largo. Como el overlay tiene
     backdrop-filter, crea containing block: position:fixed dentro
     se ancla al overlay (que ocupa todo el viewport = mismo efecto
     que anclarse al viewport). */
  .calm-modal-overlay .calm-close-btn {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 510; /* sobre el overlay (500) */
  }
  .calm-modal-overlay .calm-mute-btn {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
    z-index: 510;
  }
}

/* ── G · Desktop / tablet: respetar el padding original ───────────── */
/* En pantallas grandes el modal cabe siempre — mantenemos centrado
   tradicional sin safe-area (no aplica). El padding generoso del
   overlay original (20px) ya cubre los casos. align-items: safe
   center se comporta como center cuando cabe. No-op intencional. */

/* ── H · Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .calm-modal-overlay {
    -webkit-overflow-scrolling: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   === END CALM MODAL VIEWPORT FIX ===
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * LOW-POWER DEVICE SAFETY LAYER — Portal paciente
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Espejo de la capa equivalente en app.css. El portal es la cara mas
 * sensible: pacientes adultos mayores o con dispositivos antiguos lo
 * abren desde el navegador que tengan a mano (Android economico, iPhone
 * viejo, navegadores webview). NO podemos asumir GPU moderna ni red rapida.
 *
 * Misma politica de viewports y misma estrategia que app.css. Ver doc
 * extendida ahi. Este bloque DEBE ser el ultimo del archivo.
 */

/* Tier 1 — Tablets y menores: backdrop-filter off
 * Limite 1280px cubre Lenovo M10/M11/Tab 11" en landscape (modelo del bug original). */
@media (max-width: 1280px) {
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Tier 2 — Tablet/movil: filtros blur decorativos off */
@media (max-width: 900px) {
    [class*="-blob"],
    [class*="-glow"],
    [class*="bg-orb"],
    [class*="-aura"] {
        filter: none !important;
        opacity: 0 !important;
    }
}

/* Tier 3 — prefers-reduced-motion: refuerzo global */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Tier 4 — Movil pequeno: pausar animaciones decorativas infinitas */
@media (max-width: 480px) {
    [class*="-pulse"]:not([class*="skel"]):not([class*="skeleton"]),
    [class*="-float"],
    [class*="-aura"],
    [class*="-glow"] {
        animation: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   PORTAL DEMO — Modo demostración (servido desde /admin/portal-pacientes/demo)
   Prefijos:
     .pt-demo-*  → indicadores compartidos con el portal real (badge, chip, banner)
     .ptd-*      → layout y componentes EXCLUSIVOS del portal demo

   Se aísla del portal real para que NO afecte clases existentes.
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   Altura canónica del banner demo. La definimos como CSS variable
   en el <body class="pt-body--demo"> para que la topbar sticky
   del portal real pueda offsetearse EXACTAMENTE bajo el banner
   sin gaps ni overlaps en ningún breakpoint. Cambiar el valor
   por breakpoint propaga el ajuste sin tocar más reglas.
   ───────────────────────────────────────────────────────────── */
.pt-body--demo {
  --pt-demo-banner-h: 60px;
  margin: 0;
}
@keyframes ptDemoPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.25); }
  50%      { box-shadow: 0 0 0 8px rgba(245,158,11,.10); }
}

/* Tablet — quitamos sub, dejamos solo el headline */
@media (max-width: 900px) {
  .pt-body--demo { --pt-demo-banner-h: 52px; }
  .pt-demo-banner-sub { display: none; }
}

/* Móvil — back button icon-only, hit target 44x44 (WCAG 2.5.5) */
@media (max-width: 560px) {
  .pt-body--demo { --pt-demo-banner-h: 48px; }
  .pt-demo-banner-inner { gap: 8px; padding: 6px 12px; }
  .pt-demo-banner-back span { display: none; }
  .pt-demo-banner-back { min-width: 44px; min-height: 44px; padding: 0; }
  .pt-demo-banner-back svg { width: 16px; height: 16px; }
  .pt-demo-banner-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
}

/* Reduce motion: respeta WCAG 2.3.3 — sin pulso */
@media (prefers-reduced-motion: reduce) {
  .pt-demo-banner-dot { animation: none; }
}

/* ── Topbar sticky del portal real bajo el banner ──────────── */
/* La topbar del portal (`.pt-topbar`) usa `position: sticky; top: 0;`
   por defecto. En demo desplazamos su `top` exactamente la altura
   del banner via CSS variable — robusto en cualquier breakpoint. */
.pt-body--demo .pt-topbar {
  top: var(--pt-demo-banner-h);
}

/* Skin del .pt-app cuando estamos en demo. Reservamos espacio del
   banner para que el bottom nav móvil + viewport no salten. */
.pt-app--demo {
  background: var(--pt-bg);
  min-height: calc(100vh - var(--pt-demo-banner-h));
}

/* ═══════════════════════════════════════════════════════════════
   Respuesta de la doctora dentro de la nota — Portal del paciente
   - Card diferenciada calida, no de chat informal.
   - Aparece debajo del contenido de la nota en el modal de lectura.
   - Chip discreto en la card de la nota para señalizar que existe.
   - Responsive: mobile / tablet / desktop sin overflow ni clamps.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BADGE "1" de respuesta — minimalista, tipo notification dot
   - Pildora compacta a la izquierda del chip de mood.
   - Sin sombra, sin overshoot, sin gradient: forma + color y nada mas.
   - flex-shrink: 0 en chip mood para evitar truncamientos.
   ═══════════════════════════════════════════════════════════════ */
.db-note-card { position: relative; }

.db-note-top__right {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
  min-width: 0;
  flex-shrink: 0;
}

.db-note-reply-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--pt-accent, #199c82);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  letter-spacing: 0;
  flex-shrink: 0;
  user-select: none;
  animation: dbReplyPipFade .25s ease-out both;
}

@keyframes dbReplyPipFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* El chip de mood acompaña al badge sin truncarse — soltamos el
   max-width heredado de .nc-v2__mood (58%) que era para cuando estaba
   solo. Dentro del wrapper, deja que use lo que necesite. */
.db-note-top__right .db-note-emo,
.db-note-top__right .nc-v2__mood {
  max-width: none;
  flex-shrink: 0;
}

/* Halo sutil teal en la card cuando tiene respuesta */
.db-note-card--replied {
  box-shadow: 0 0 0 1px rgba(25, 156, 130, .18), 0 8px 24px rgba(15, 23, 42, .04);
}
.db-note-card--replied:hover {
  box-shadow: 0 0 0 1px rgba(25, 156, 130, .3), 0 10px 28px rgba(25, 156, 130, .08);
}

/* Mobile: badge igual de discreto */
@media (max-width: 480px) {
  .db-note-reply-pip {
    min-width: 17px;
    height: 17px;
    font-size: .62rem;
    padding: 0 4px;
  }
  .db-note-top__right { gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .db-note-reply-pip { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ONE-SHOT NOTICE — "Tu profesional puede responder tus notas"
   Modal calido, no invasivo, marcable como visto. Vive arriba del
   resto del dashboard, fade-in suave. Una sola vez por paciente.
   ═══════════════════════════════════════════════════════════════ */
.pt-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ptNoticeOverlayIn .25s ease-out both;
}
.pt-notice-overlay--closing {
  animation: ptNoticeOverlayOut .22s ease-in both;
  pointer-events: none;
}
@keyframes ptNoticeOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ptNoticeOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.pt-notice-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem 1.65rem 1.5rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25), 0 0 0 1px rgba(25, 156, 130, .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  animation: ptNoticeCardIn .35s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes ptNoticeCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pt-notice-overlay--closing .pt-notice-card {
  animation: ptNoticeCardOut .2s ease-in both;
}
@keyframes ptNoticeCardOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(.97); }
}

.pt-notice-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #199c82 0%, #14b8a6 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(25, 156, 130, .32);
  margin-bottom: .35rem;
}
.pt-notice-icon svg { width: 26px; height: 26px; }

.pt-notice-eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pt-accent, #199c82);
}

.pt-notice-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pt-text, #0f172a);
  line-height: 1.3;
  letter-spacing: -.005em;
}

.pt-notice-text {
  margin: 0;
  font-size: .92rem;
  color: var(--pt-text-muted, #475569);
  line-height: 1.6;
  max-width: 38ch;
}

.pt-notice-actions {
  margin-top: .85rem;
  display: flex;
  gap: .5rem;
  width: 100%;
  justify-content: center;
}

.pt-notice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.6rem;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.pt-notice-btn--primary {
  background: var(--pt-accent, #199c82);
  color: #fff;
  box-shadow: 0 4px 14px rgba(25, 156, 130, .28);
  min-width: 140px;
}
.pt-notice-btn--primary:hover { background: #157a67; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(25, 156, 130, .35); }
.pt-notice-btn--primary:active { transform: translateY(0); }
.pt-notice-btn--primary:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Mobile */
@media (max-width: 480px) {
  .pt-notice-card { padding: 1.45rem 1.25rem 1.25rem; border-radius: 18px; }
  .pt-notice-icon { width: 48px; height: 48px; }
  .pt-notice-icon svg { width: 22px; height: 22px; }
  .pt-notice-title { font-size: 1.05rem; }
  .pt-notice-text { font-size: .86rem; }
  .pt-notice-btn--primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-notice-overlay, .pt-notice-card { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DEL MODAL DE LECTURA (mobile-first refactor)
   El header original usaba `flex space-between`, lo cual en
   viewports < 600px compactaba la fecha hasta partirla en 2 lineas
   y los chips (Compartida + Cansado/a) se solapaban con la fecha.
   Reorganizamos asi:
     - Fecha + "hace X dias" en su propia fila (top)
     - Chips (priv + mood) en una 2da fila, flex-wrap natural
     - Boton close anclado absoluto en la esquina top-right
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .db-note-read__head {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    position: relative;
    padding: .95rem 3.25rem .85rem 1.05rem;
  }

  .db-note-read__head-left {
    width: 100%;
    flex: none;
  }
  .db-note-read__date {
    font-size: .94rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .db-note-read__rel {
    font-size: .7rem;
    margin-top: 1px;
  }

  .db-note-read__head-right {
    width: 100%;
    justify-content: flex-start;
    gap: .35rem;
    flex-wrap: wrap;
  }
  .db-note-read__head-right .db-note-read__priv,
  .db-note-read__head-right .db-note-read__mood {
    font-size: .68rem;
    padding: 3px 8px 3px 7px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .db-note-read__head-right .db-note-read__mood span:first-child {
    font-size: .92rem;
  }

  /* Boton X anclado en la esquina top-right, fuera del flujo */
  .db-note-read__close {
    position: absolute;
    top: .65rem;
    right: .75rem;
    width: 34px;
    height: 34px;
  }

  /* Body: mas aire, scroll suave */
  .db-note-read__body {
    padding: 1.1rem 1.05rem 1.25rem;
  }
  .db-note-read__content {
    font-size: 1.02rem;
    line-height: 1.7;
  }

  /* Foot: cerrar centrado a ancho completo */
  .db-note-read__foot {
    padding: .85rem 1.05rem;
  }
}

/* Reglas extra para ultra-narrow (≤380px) — la fecha sigue completa
   gracias al `text-overflow: ellipsis` mas arriba. */
@media (max-width: 380px) {
  .db-note-read__head {
    padding: .85rem 3rem .75rem .95rem;
  }
  .db-note-read__date { font-size: .88rem; }
  .db-note-read__rel  { font-size: .65rem; }
  .db-note-read__close { top: .6rem; right: .7rem; width: 32px; height: 32px; }
  .db-note-read__head-right .db-note-read__priv,
  .db-note-read__head-right .db-note-read__mood { font-size: .64rem; padding: 2px 7px; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DE LECTURA — UNA SOLA COLUMNA
   Stack vertical en TODOS los breakpoints. La nota completa arriba,
   la respuesta de la doctora abajo, con scroll PRINCIPAL del modal
   (sin paneles laterales ni scrolls anidados). Lectura clinica,
   ancho razonable para que las lineas no sean larguisimas.
   ═══════════════════════════════════════════════════════════════ */
.db-note-read__note-pane {
  min-width: 0;
}

.db-note-read__note-pane .db-note-read__content {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════
   BLOQUE DE RESPUESTA DE LA DOCTORA dentro del modal
   - Card teal con borde-left mas grueso (acento clinico).
   - Header: icono circular + titulo + autor/fecha.
   - Contenido: tipografia comoda (line-height 1.75, max 68ch).
   - Sin scroll interno: el modal entero scrollea.
   - Animacion sutil de entrada.
   ═══════════════════════════════════════════════════════════════ */
/* CRÍTICO: el atributo [hidden] DEBE ganar al display:flex de abajo. Sin
   esta guarda, `replyWrap.hidden = true` no oculta nada (regla de autor pisa
   la de UA) y TODA nota sin responder mostraba un "Tu profesional te
   respondió" fantasma (vacío o con texto heredado de otra nota). */
.db-note-reply[hidden] { display: none !important; }
.db-note-reply {
  margin-top: 1.6rem;
  padding: 1.35rem 1.4rem 1.45rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(25, 156, 130, .07) 0%, rgba(25, 156, 130, .02) 100%);
  border: 1px solid rgba(25, 156, 130, .2);
  border-left: 4px solid var(--pt-accent, #199c82);
  display: flex;
  flex-direction: column;
  gap: .95rem;
  position: relative;
  animation: dbReplyFadeIn .35s ease-out;
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

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

.db-note-reply__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(25, 156, 130, .15);
}

.db-note-reply__ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: #fff;
  background: var(--pt-accent, #199c82);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(25, 156, 130, .28);
}
.db-note-reply__ico svg {
  width: 18px;
  height: 18px;
}

.db-note-reply__head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* Titulo conversacional: "[Nombre] te respondió" — sin uppercase, sin
   tracking exagerado. El nombre va en bold, el "te respondió" en regular
   para que se lea como saludo, no como label de sistema. */
.db-note-reply__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--pt-text, #0f172a);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.db-note-reply__title #noteReadReplyAuthor {
  font-weight: 800;
  color: var(--pt-accent, #199c82);
}

/* Meta sutil "Hace 14 minutos" */
.db-note-reply__meta {
  margin: 2px 0 0;
  font-size: .76rem;
  color: var(--pt-text-muted, #64748b);
  font-weight: 500;
  line-height: 1.4;
}

.db-note-reply__content {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pt-text, #1e293b);
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 500;
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .db-note-reply {
    padding: 1.15rem 1.2rem 1.25rem;
    gap: .85rem;
  }
  .db-note-reply__content {
    font-size: .96rem;
    line-height: 1.72;
  }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
  .db-note-reply {
    margin-top: 1.25rem;
    padding: 1rem 1rem 1.1rem;
    border-radius: 14px;
    border-left-width: 3px;
    gap: .7rem;
  }
  .db-note-reply__head {
    padding-bottom: .7rem;
    gap: .7rem;
  }
  .db-note-reply__ico {
    width: 34px;
    height: 34px;
  }
  .db-note-reply__ico svg {
    width: 16px;
    height: 16px;
  }
  .db-note-reply__title { font-size: .94rem; }
  .db-note-reply__meta { font-size: .72rem; }
  .db-note-reply__content { font-size: .94rem; line-height: 1.7; }
}

/* Ultra-narrow (≤380px) */
@media (max-width: 380px) {
  .db-note-reply { padding: .9rem .9rem 1rem; }
  .db-note-reply__ico { width: 30px; height: 30px; }
  .db-note-reply__ico svg { width: 14px; height: 14px; }
  .db-note-reply__title { font-size: .9rem; }
  .db-note-reply__meta { font-size: .68rem; }
  .db-note-reply__content { font-size: .9rem; line-height: 1.68; }
}

/* Desktop ≥1280px — tipografia un punto mas comoda */
@media (min-width: 1280px) {
  .db-note-reply { padding: 1.5rem 1.5rem 1.55rem; }
  .db-note-reply__content { font-size: 1.02rem; line-height: 1.78; }
}

/* Dark mode opcional */
@media (prefers-color-scheme: dark) {
  .db-note-reply {
    background: linear-gradient(180deg, rgba(25, 156, 130, .12) 0%, rgba(25, 156, 130, .04) 100%);
    border-color: rgba(25, 156, 130, .35);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DEMO comercial del portal — chip "Modo demostración" + tour guiado.
 * Reutiliza el motor demo-tour.js. Paleta teal, con fallbacks por si el portal
 * no define las variables. (Espejo de los estilos en app.css.)
 * ═══════════════════════════════════════════════════════════════════════════ */
/* Dock de la demo del portal: apila el acceso a Seguridad SOBRE el chip
   "Modo demostración" reutilizando UNA sola posición fija (para no duplicar la
   lógica de elevación sobre la bottom-nav en móvil). El chip conserva su look;
   solo se le neutraliza el posicionamiento dentro del dock. */
.demo-dock{
    position:fixed; z-index:40;
    left:max(14px, env(safe-area-inset-left, 0px));
    bottom:max(14px, env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; align-items:flex-start; gap:9px;
    pointer-events:none; /* el dock no captura clicks; los chips sí (abajo) */
}
.demo-dock > *{ pointer-events:auto; }
.demo-dock .demo-chip{ position:static; left:auto; bottom:auto; }

/* Chip compacto de Seguridad y Privacidad (encima del chip demo). */
.demo-secchip{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 13px; border-radius:999px;
    background:#0f3d34; color:#eafaf6; text-decoration:none;
    font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1;
    box-shadow:0 4px 14px rgba(16,24,40,.18);
    border:1px solid rgba(94,234,212,.38);
    transition:background .15s, transform .12s, box-shadow .15s;
}
.demo-secchip:hover{ background:#12564a; transform:translateY(-1px); box-shadow:0 10px 24px rgba(9,43,36,.30); }
.demo-secchip:focus-visible{ outline:2px solid #5eead4; outline-offset:2px; }
.demo-secchip svg{ width:14px; height:14px; flex:none; color:#5eead4; }

.demo-chip{
    position:fixed; z-index:40;
    left:max(14px, env(safe-area-inset-left, 0px));
    bottom:max(14px, env(safe-area-inset-bottom, 0px));
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 13px; border-radius:999px;
    background:#0f3d34; color:#eafaf6;
    font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1;
    box-shadow:0 4px 14px rgba(16,24,40,.18);
    border:1px solid rgba(255,255,255,.14);
    pointer-events:auto; user-select:none; cursor:pointer; text-decoration:none;
    transition:background .15s, transform .12s, box-shadow .15s;
}
.demo-chip:hover{ background:#12564a; transform:translateY(-1px); box-shadow:0 10px 24px rgba(9,43,36,.30); }
.demo-chip:focus-visible{ outline:2px solid #5eead4; outline-offset:2px; }
.demo-chip__dot{
    width:8px; height:8px; border-radius:50%;
    background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.25); flex:none;
}
.demo-chip__sep{ width:1px; height:14px; background:rgba(255,255,255,.18); flex:none; }
.demo-chip__action{ display:inline-flex; align-items:center; gap:5px; color:#5eead4; font-weight:700; }
.demo-chip__action svg{ width:13px; height:13px; flex:none; }
/* Variante "Vista profesional": vista previa efímera con datos de ejemplo.
   Ámbar sobrio (paleta warning) para diferenciarla del chip demo (verde).
   Es informativa (no navegable): la doctora cierra la pestaña para salir. */
.demo-chip--preview{ background:#7c4a03; border-color:rgba(255,255,255,.16); cursor:default; }
.demo-chip--preview:hover{ background:#7c4a03; transform:none; box-shadow:0 4px 14px rgba(16,24,40,.18); }
.demo-chip--preview .demo-chip__dot{ background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.25); }
.demo-chip--preview .demo-chip__action{ color:#fcd34d; }
/* En móvil el portal tiene una barra de navegación inferior flotante
   (.portal-bottom-nav, <=768px). Elevamos el chip por ENCIMA de ella para que
   no lo tape — mismo patrón/variables que el FAB "Escribir". */
@media (max-width: 768px){
    .demo-chip, .demo-dock{
        left:14px; right:auto;
        bottom:calc(
            var(--portal-safe-bottom, env(safe-area-inset-bottom, 0px)) +
            var(--portal-bottom-nav-gap, 12px) +
            var(--portal-bottom-nav-h, 64px) +
            12px
        );
    }
    /* Dentro del dock el chip es estático; el dock lleva la elevación. */
    .demo-dock .demo-chip{ bottom:auto; left:auto; }
}
@media (max-width: 480px){
    .demo-chip, .demo-dock{
        left:max(10px, env(safe-area-inset-left, 0px));
    }
    .demo-dock .demo-chip{ left:auto; }
    .demo-chip{ padding:6px 11px; font-size:11.5px; }
    /* En móvil, compacto: solo el punto + "Cambiar vista". */
    .demo-chip__text, .demo-chip__sep{ display:none; }
    /* Seguridad: compacta a solo el icono para no robar ancho. */
    .demo-secchip__text{ display:none; }
    .demo-secchip{ padding:8px; }
}

.dtour[hidden]{ display:none; }
.dtour{ position:fixed; inset:0; z-index:99990; }
.dtour__backdrop{ position:fixed; inset:0; z-index:99990; background:transparent; }
.dtour--center .dtour__backdrop{ background:rgba(9,43,36,.62); }
.dtour__hole{
    position:fixed; z-index:99991; display:none;
    border-radius:12px; border:2px solid var(--pt-brand-primary,#199c82);
    box-shadow:0 0 0 9999px rgba(9,43,36,.58); pointer-events:none;
    transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.dtour__pop{
    position:fixed; z-index:99993; box-sizing:border-box;
    width:min(340px, calc(100vw - 24px));
    background:#fff; color:#1e293b;
    border:1px solid rgba(15,23,42,.08); border-radius:14px;
    box-shadow:0 18px 48px rgba(9,43,36,.28);
    padding:16px 16px 14px;
}
.dtour--center .dtour__pop{ left:50%; top:50%; transform:translate(-50%,-50%); }
.dtour__pop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dtour__step{
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--pt-brand-primary,#199c82); background:rgba(25,156,130,.10);
    padding:3px 9px; border-radius:999px;
}
.dtour__close{
    width:26px; height:26px; border:none; background:transparent; cursor:pointer;
    font-size:22px; line-height:1; color:#94a3b8; border-radius:7px;
    display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s;
}
.dtour__close:hover{ background:rgba(15,23,42,.06); color:#1e293b; }
.dtour__title{ font-size:16.5px; font-weight:700; margin:0 0 6px; line-height:1.3; color:#1e293b; }
.dtour__body{ font-size:14px; line-height:1.55; margin:0 0 14px; color:#475569; }
.dtour__try{
    display:block; width:100%; margin:0 0 10px; height:40px; padding:0 14px;
    border-radius:9px; background:rgba(25,156,130,.10); color:var(--pt-brand-primary,#199c82);
    border:1px solid rgba(25,156,130,.32); font-size:14px; font-weight:700; cursor:pointer;
    line-height:1; transition:background .14s,border-color .14s,transform .1s; -webkit-appearance:none; appearance:none;
}
.dtour__try:hover{ background:rgba(25,156,130,.18); border-color:rgba(25,156,130,.5); }
.dtour__try:active{ transform:translateY(1px); }
.dtour__try[hidden]{ display:none; }
.dtour__nav{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.dtour__btn{
    height:36px; padding:0 16px; border-radius:9px; font-size:13.5px; font-weight:600;
    cursor:pointer; line-height:1; border:1px solid transparent;
    transition:background .14s,border-color .14s,transform .1s; -webkit-appearance:none; appearance:none;
}
.dtour__btn:active{ transform:translateY(1px); }
.dtour__btn--ghost{ background:transparent; color:#475569; border-color:rgba(15,23,42,.14); }
.dtour__btn--ghost:hover{ background:rgba(15,23,42,.05); }
.dtour__btn--solid{ background:var(--pt-brand-primary,#199c82); color:#fff; }
.dtour__btn--solid:hover{ filter:brightness(.94); }
@media (max-width: 640px){
    .dtour__pop{ width:calc(100vw - 24px); }
    .dtour__title{ font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Rueda de Plutchik (.pw-*) — vía secundaria del selector de ánimo
   del modal "Nueva Nota". Catálogo: App\Services\Portal\EmotionCatalog.
   Los colores por familia llegan como CSS vars inline (--pw-soft /
   --pw-strong) desde el Blade — semántica cromática canónica de
   Plutchik; el contenedor sigue los tokens del sistema.
   ═══════════════════════════════════════════════════════════════ */

@keyframes pwFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Vistas del body: principal (ánimo+nota) ⇄ rueda enfocada ──
   Solo una visible a la vez. El `[hidden]` debe ganar al display:flex. */
.db-note-modal--v2 .nm-v2__view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.db-note-modal--v2 .nm-v2__view[hidden] { display: none; }
.db-note-modal--v2 .nm-v2__view--main { gap: 0.85rem; }
.db-note-modal--v2 .nm-v2__view--wheel { gap: 0.7rem; animation: pwFadeIn .28s ease both; }
/* El escenario de la rueda toma el alto disponible del cuerpo y CENTRA la
   rueda verticalmente. En el bottom-sheet móvil (alto fijo ~92dvh) esto elimina
   el bloque blanco debajo de la rueda; en desktop el modal es content-sized, así
   que no hay espacio extra que llenar → sin efecto adverso. Mantiene la "altura
   estable" (no salta al cambiar entre nota y rueda). */
.db-note-modal--v2 .nm-v2__view--wheel .pw-wheel-box { flex: 1 1 auto; }

/* Mientras se elige en la rueda, el footer (Guardar) se oculta: el único
   objetivo del paso es elegir la emoción; al elegir intensidad auto-vuelve. */
.db-note-modal--v2 .nm-v2--picking .nm-v2__footer { display: none; }

/* ── Trigger a la rueda (dentro del picker) ── */
.db-note-modal--v2 .nm-v2__wheel-trigger {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  margin-top: .6rem; padding: .6rem .8rem;
  background: var(--pt-teal-bg); border: 1.5px dashed var(--pt-teal-lt);
  border-radius: var(--pt-r); cursor: pointer; text-align: left;
  color: var(--pt-text2); font-size: .8rem; font-weight: 600;
  font-family: inherit; line-height: 1.3;
  transition: border-color .2s ease, background .2s ease;
}
.db-note-modal--v2 .nm-v2__wheel-trigger:hover { border-color: var(--pt-teal); background: #e6faf5; }
.db-note-modal--v2 .nm-v2__wheel-trigger:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }
.db-note-modal--v2 .nm-v2__wheel-trigger strong { color: var(--pt-teal-dk); font-weight: 800; }
.db-note-modal--v2 .nm-v2__wheel-trigger-ico {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--pt-teal-lt);
  display: flex; align-items: center; justify-content: center; color: var(--pt-teal-dk);
}
.db-note-modal--v2 .nm-v2__wheel-trigger-ico svg { width: 18px; height: 18px; }
.db-note-modal--v2 .nm-v2__wheel-trigger-txt { flex: 1; min-width: 0; }
.db-note-modal--v2 .nm-v2__wheel-trigger-chev { flex-shrink: 0; width: 16px; height: 16px; color: var(--pt-sub); }

/* ── Chip de resumen (estado "elegido") ── */
.db-note-modal--v2 .nm-v2__summary {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: var(--pt-r);
  background: var(--pt-teal-bg); border: 1.5px solid var(--pt-teal-lt);
  animation: pwFadeIn .24s ease both;
}
.db-note-modal--v2 .nm-v2__summary[hidden] { display: none; }
.db-note-modal--v2 .nm-v2__summary-emoji { font-size: 1.65rem; flex-shrink: 0; line-height: 1; }
.db-note-modal--v2 .nm-v2__summary-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.db-note-modal--v2 .nm-v2__summary-eyebrow {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pt-teal-dk);
}
.db-note-modal--v2 .nm-v2__summary-label { font-size: .96rem; font-weight: 800; color: var(--pt-text); line-height: 1.2; }
.db-note-modal--v2 .nm-v2__summary-change {
  flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .7rem; min-height: 38px; background: #fff; border: 1px solid var(--pt-teal-lt);
  border-radius: 999px; color: var(--pt-teal-dk); font-family: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.db-note-modal--v2 .nm-v2__summary-change:hover { background: var(--pt-teal-lt); }
.db-note-modal--v2 .nm-v2__summary-change svg { width: 13px; height: 13px; }
.db-note-modal--v2 .nm-v2__summary-change:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }

/* ── Sub-header de la vista de rueda (volver + título + paso) ── */
.nmw-head { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.nmw-back {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .8rem .45rem .55rem; min-height: 40px;
  background: var(--pt-teal-bg); border: 1px solid var(--pt-teal-lt);
  border-radius: 999px; color: var(--pt-teal-dk); font-family: inherit;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.nmw-back:hover { background: var(--pt-teal-lt); }
.nmw-back:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }
.nmw-back svg { width: 16px; height: 16px; }
.nmw-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nmw-title { font-size: .92rem; font-weight: 800; color: var(--pt-text); }
.nmw-step { font-size: .72rem; font-weight: 600; color: var(--pt-teal-dk); }

/* ── Rueda SVG (8 pétalos = familias primarias) ──
   Colores por familia via CSS vars inline (--pw-soft / --pw-strong). */
.pw-wheel-box { display: flex; justify-content: center; align-items: center; margin: .1rem 0 .3rem; flex: 0 0 auto; }
.pw-wheel {
  width: min(100%, 344px); height: auto; display: block;
  /* CRÍTICO: bloquear el aspecto 1:1. Sin esto, en algunos móviles el <svg>
     (vacío hasta que JS lo llena) se estira al alto del flex → la rueda sale
     ovalada/aplastada y los sectores de arriba/abajo se vuelven invisibles.
     aspect-ratio + preserveAspectRatio (en el markup) lo hacen a prueba de
     dispositivo/DPR. */
  aspect-ratio: 1 / 1; flex: 0 0 auto; align-self: center;
  transform-origin: 50% 50%;
  transition: opacity .22s ease, transform .24s cubic-bezier(.34,1.2,.64,1);
}
/* Animación de entrada de cada nivel (controlada + compositor-friendly:
   solo opacity/transform en el <svg>, NUNCA en los <path> internos — WebKit).
   La clase se pone al reconstruir y se quita en el frame siguiente. */
.pw-wheel--enter { opacity: 0; transform: scale(.92); }
.pw-petal { cursor: pointer; outline: none; }
.pw-petal-shape {
  fill: var(--pw-soft); stroke: #fff; stroke-width: 3px;
  transition: opacity .25s ease, stroke .2s ease, stroke-width .2s ease;
}
.pw-petal:hover .pw-petal-shape { stroke: var(--pw-strong); stroke-width: 3.5px; }
.pw-petal:focus-visible .pw-petal-shape { stroke: var(--pt-text); stroke-width: 3.5px; }
.pw-petal.active .pw-petal-shape { stroke: var(--pw-strong); stroke-width: 4px; }
/* Al elegir familia, las demás se atenúan (foco sin re-layout — NO
   transform/scale en SVG: comportamiento inconsistente en WebKit). */
.pw--family-active .pw-petal:not(.active) { opacity: .4; }
.pw--family-active .pw-petal:not(.active):hover,
.pw--family-active .pw-petal:not(.active):focus-visible { opacity: .78; }
.pw-petal-emoji {
  font-size: 27px; text-anchor: middle; dominant-baseline: central;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.pw-petal-label {
  font-size: 12px; font-weight: 800; fill: #475569;
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  font-family: var(--pt-font);
}
/* Hub central vivo: hint por defecto, emoji+nombre al hover/seleccionar. */
.pw-center { fill: #ffffff; stroke: var(--pt-border); stroke-width: 2px; transition: stroke .2s ease; }
.pw-hub--sel .pw-center { stroke: var(--pt-teal-lt); }
.pw-center-hint { font-size: 12.5px; font-weight: 700; fill: var(--pt-muted); transition: opacity .2s ease; }
.pw-hub--sel .pw-center-hint { opacity: 0; }
.pw-center-emoji {
  font-size: 34px; dominant-baseline: central; opacity: 0;
  user-select: none; -webkit-user-select: none; transition: opacity .2s ease;
}
.pw-center-label {
  font-size: 11.5px; font-weight: 800; fill: var(--pt-text2); dominant-baseline: central;
  opacity: 0; transition: opacity .2s ease; font-family: var(--pt-font);
}
.pw-hub--sel .pw-center-emoji, .pw-hub--sel .pw-center-label { opacity: 1; }
/* Etiquetas de sub-niveles (sub-emoción / matiz): horizontales y centradas,
   más peso para legibilidad; variante --sm para palabras largas sin espacio. */
.pw-petal-label--sub { font-size: 12.5px; font-weight: 800; fill: var(--pt-text); }
.pw-petal-label--sm  { font-size: 10.5px; }

/* ── Chips de intensidad (leve / media / intensa) ── */
.pw-intensity { width: 100%; max-width: 480px; margin: 0 auto; animation: pwFadeIn .3s ease both; flex: 0 0 auto; }
.pw-int-title { font-size: .86rem; font-weight: 700; color: var(--pt-text2); text-align: center; margin: 0 0 .65rem; }
.pw-chip {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  min-height: 58px; padding: .65rem .85rem; margin-bottom: .5rem;
  background: var(--pt-card); border: 2px solid var(--pt-border-lt);
  border-radius: var(--pt-r); cursor: pointer; text-align: left;
  font-family: inherit; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pw-chip:hover { border-color: var(--pw-strong); transform: translateY(-1px); }
.pw-chip:focus-visible { outline: 2px solid var(--pw-strong); outline-offset: 2px; }
.pw-chip.active { border-color: var(--pw-strong); box-shadow: 0 6px 18px rgba(15, 23, 42, .09); }
.pw-chip-emoji { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.pw-chip-body { flex: 1; min-width: 0; }
.pw-chip-name { display: block; font-size: .9rem; font-weight: 800; color: var(--pt-text); line-height: 1.25; }
.pw-chip-desc { display: block; font-size: .76rem; font-weight: 500; color: var(--pt-sub); line-height: 1.35; margin-top: .1rem; }
.pw-chip-level {
  flex-shrink: 0; margin-left: auto; white-space: nowrap;
  font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pw-strong); background: var(--pw-soft);
  padding: .3rem .6rem; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.pw-chip.active .pw-chip-level { background: var(--pw-strong); color: #fff; }

/* ── Rueda de emociones: niveles 2 (secundarias) y 3 (terciarias) ──
   Drill-in: nunca se muestran las 108 emociones a la vez; solo el grupo del
   núcleo/secundaria activa. Los grupos se togglean con el atributo `hidden`. */
.pw-levels { width: 100%; max-width: 480px; margin: 0 auto; animation: pwFadeIn .3s ease both; flex: 0 0 auto; }
.pw-crumb {
  display: block; text-align: center; margin: 0 0 .7rem;
  font-size: .82rem; font-weight: 800; color: var(--pt-text2); letter-spacing: .01em;
}
.pw-crumb:empty { display: none; }
.pw-chips { width: 100%; }
.pw-chip-group {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: .5rem; width: 100%;
}
/* [hidden] DEBE ganar al display:grid de autor (gotcha recurrente del portal). */
.pw-chip-group[hidden] { display: none !important; }
/* Chips compactos (sin desc/level): reajustan el .pw-chip base para la rueda. */
.pw-chip-group .pw-chip { min-height: 48px; margin-bottom: 0; padding: .6rem .75rem; gap: .4rem; }
.pw-chip--branch { justify-content: space-between; }
.pw-chip--leaf { justify-content: center; text-align: center; }
.pw-chip--leaf .pw-chip-name { text-align: center; }
.pw-chip-chev { width: 16px; height: 16px; flex: none; color: var(--pw-strong); opacity: .75; }

/* ── Desktop: rueda un poco más generosa ── */
@media (min-width: 768px) {
  .pw-wheel { width: min(100%, 360px); }
}
/* ── Móvil pequeño: rueda compacta ── */
@media (max-width: 420px) {
  .pw-wheel { width: min(100%, 292px); }
  .pw-petal-emoji { font-size: 24px; }
  .pw-petal-label { font-size: 11px; }
  .pw-chip-desc { font-size: .72rem; }
  .nm-v2__wheel-trigger-txt { font-size: .77rem; }
}
/* ── Viewport bajo (móvil/tablet landscape): rueda más pequeña para que
   los chips quepan sin scroll excesivo dentro del body. ── */
@media (max-height: 560px) and (orientation: landscape) {
  .pw-wheel { width: min(58vh, 260px); }
}
/* ── Reduced motion: sin fades de vista ── */
@media (prefers-reduced-motion: reduce) {
  .db-note-modal--v2 .nm-v2__view--wheel,
  .db-note-modal--v2 .nm-v2__summary,
  .pw-intensity { animation: none; }
  .pw-wheel { transition: none; }
  .pw-wheel--enter { opacity: 1; transform: none; }
}

/* ── Nudge al Espacio de Calma (success overlay) ── */
.db-success-calm {
  max-width: 420px; margin-top: -0.5rem;
  transform: translateY(16px); opacity: 0;
}
.db-success.show .db-success-calm:not([hidden]) { animation: dbSuccessFade .5s ease .65s forwards; }
.db-success-calm-msg { font-size: .9rem; color: var(--pt-text2); font-weight: 600; line-height: 1.55; margin: 0 0 1.1rem; }
.db-success-calm-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.db-success-calm-go {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.35rem; min-height: 48px;
  background: var(--pt-teal); color: #fff; border: none; border-radius: 999px;
  font-family: inherit; font-size: .88rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px var(--pt-teal-glow);
  transition: background .2s ease, transform .2s ease;
}
.db-success-calm-go:hover { background: var(--pt-teal-dk); transform: translateY(-1px); }
.db-success-calm-go:focus-visible { outline: 2px solid var(--pt-teal-dk); outline-offset: 3px; }
.db-success-calm-go svg { width: 18px; height: 18px; }
.db-success-calm-skip {
  padding: .75rem 1.1rem; min-height: 48px;
  background: transparent; color: var(--pt-sub); border: 1.5px solid var(--pt-border);
  border-radius: 999px; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.db-success-calm-skip:hover { border-color: var(--pt-muted); color: var(--pt-text2); }
.db-success-calm-skip:focus-visible { outline: 2px solid var(--pt-muted); outline-offset: 2px; }

/* ── Acentos de card por emoción de la rueda (por familia) ──
   Complementan los acentos de quick moods de la sección journal-cards-v2.
   Slug = Str::slug(estado_emocional) — ver dashboard.blade (data-mood). */
.db-note-card--v2[data-mood="serenidad"],
.db-note-card--v2[data-mood="alegria"],
.db-note-card--v2[data-mood="euforia"]        { --nc-accent: #d97706; } /* alegría */
.db-note-card--v2[data-mood="aceptacion"],
.db-note-card--v2[data-mood="confianza"],
.db-note-card--v2[data-mood="admiracion"]     { --nc-accent: #65a30d; } /* confianza */
.db-note-card--v2[data-mood="inquietud"],
.db-note-card--v2[data-mood="miedo"],
.db-note-card--v2[data-mood="panico"]         { --nc-accent: #059669; } /* miedo */
.db-note-card--v2[data-mood="distraccion"],
.db-note-card--v2[data-mood="sorpresa"],
.db-note-card--v2[data-mood="asombro"]        { --nc-accent: #0284c7; } /* sorpresa */
.db-note-card--v2[data-mood="melancolia"],
.db-note-card--v2[data-mood="tristeza"],
.db-note-card--v2[data-mood="pena-profunda"]  { --nc-accent: #4f46e5; } /* tristeza */
.db-note-card--v2[data-mood="aburrimiento"],
.db-note-card--v2[data-mood="disgusto"],
.db-note-card--v2[data-mood="rechazo"]        { --nc-accent: #7c3aed; } /* aversión */
.db-note-card--v2[data-mood="fastidio"],
.db-note-card--v2[data-mood="enojo"],
.db-note-card--v2[data-mood="furia"]          { --nc-accent: #dc2626; } /* ira */
.db-note-card--v2[data-mood="interes"],
.db-note-card--v2[data-mood="expectativa"],
.db-note-card--v2[data-mood="impaciencia"]    { --nc-accent: #ea580c; } /* anticipación */

/* ── Acentos por NÚCLEO — rueda de Ekman/Roberts (data-mood = slug del núcleo).
   Van DESPUÉS del bloque anterior para GANAR a los slugs que colisionan
   (miedo/sorpresa/tristeza eran familias de Plutchik). ── */
.db-note-card--v2[data-mood="ira"]            { --nc-accent: #dc2626; } /* ira */
.db-note-card--v2[data-mood="desagrado"]      { --nc-accent: #059669; } /* desagrado */
.db-note-card--v2[data-mood="tristeza"]       { --nc-accent: #7c3aed; } /* tristeza */
.db-note-card--v2[data-mood="felicidad"]      { --nc-accent: #ea580c; } /* felicidad */
.db-note-card--v2[data-mood="sorpresa"]       { --nc-accent: #ca8a04; } /* sorpresa */
.db-note-card--v2[data-mood="miedo"]          { --nc-accent: #6b7280; } /* miedo */