/* ============================================================
   AQUO™ Design System v3.0
   Paleta extraída directamente de los logos adjuntos
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

/* ── FUENTE LUXURY INICIO ────────────────────────────────── */
/* Cormorant Garamond: serif elegante de quiet luxury — hero, citas, titulares */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Azules del isotipo (logo gota azul) */
  --primary:        #2196F3;   /* Azul central de la gota */
  --primary-dark:   #1565C0;   /* Profundidad oscura del agua */
  --primary-deep:   #0D47A1;   /* Azul más profundo, hover nav */
  --primary-light:  #90CAF9;   /* Reflejos y destellos */
  --primary-pale:   #E3F2FD;   /* Bruma / quiet luxury bg */
  --primary-mist:   #F0F8FF;   /* Fondo ultrasuave */

  /* Blanco / neutros */
  --white:          #FFFFFF;
  --text-dark:      #212121;
  --text-mid:       #424242;
  --text-secondary: #616161;
  --text-muted:     #9E9E9E;
  --divider:        #E8F4FD;

  /* Premium Gold (logo dorado) */
  --gold:           #C9A84C;
  --gold-light:     #F0D080;
  --gold-dark:      #A07828;
  --gold-bg:        #FDF8EC;

  /* Premium Silver (logo plateado) */
  --silver:         #9E9E9E;
  --silver-light:   #BDBDBD;
  --silver-bg:      #F5F5F5;

  /* ── Plan tier tokens — paleta exacta de dirección artística ────────────
     FREE   → azul acuoso limpio y luminoso
     PRO    → plata satinada, perla fría, humo elegante
     PLUS   → oro champán, marfil cálido, miel apagada
  ────────────────────────────────────────────────────────────────────────── */

  /* Free */
  --tier-free-bg:           #F7FBFF;
  --tier-free-hero:         #F5FAFE;
  --tier-free-accent:       #5FAEE3;
  --tier-free-editorial:    #1E63B6;
  --tier-free-border:       #D9EAF6;
  --tier-free-glow:         rgba(95,174,227,0.18);
  /* aliases legacy */
  --tier-free-accent-soft:  rgba(95,174,227,0.10);

  /* Pro — plata satinada */
  --tier-pro-bg:            #F7F8FA;
  --tier-pro-hero:          #F5F4F1;
  --tier-pro-smoke:         #EEF1F4;
  --tier-pro-title:         #3F4954;
  --tier-pro-text:          #6D7782;
  --tier-pro-border:        #D7DCE2;
  --tier-pro-accent:        #A8B2BC;
  --tier-pro-shadow:        rgba(78,89,104,0.08);
  --tier-pro-halo:          rgba(160,172,186,0.18);
  /* aliases legacy */
  --tier-pro-accent-soft:   rgba(160,172,186,0.10);
  --tier-pro-glow:          rgba(160,172,186,0.13);

  /* Plus — oro champán */
  --tier-plus-hero:         #FBF7ED;
  --tier-plus-champagne:    #F7F1E3;
  --tier-plus-warm:         #FFFDF8;
  --tier-plus-title:        #4B3A22;
  --tier-plus-accent:       #8A6A21;
  --tier-plus-text:         #9B8150;
  --tier-plus-border-c:     #E5D6B2;
  --tier-plus-border-g:     #D9C08C;
  --tier-plus-honey:        #B88F38;
  --tier-plus-shadow:       rgba(140,110,42,0.10);
  --tier-plus-halo:         rgba(184,150,62,0.18);
  /* aliases legacy */
  --tier-plus-bg:           #FBF7ED;
  --tier-plus-border:       #E5D6B2;
  --tier-plus-accent-soft:  rgba(184,150,62,0.09);
  --tier-plus-glow:         rgba(184,150,62,0.13);

  /* Semánticos */
  --success:        #2E7D32;
  --success-bg:     #E8F5E9;
  --error:          #C62828;
  --error-bg:       #FFEBEE;
  --warning:        #F57C00;
  --warning-bg:     #FFF3E0;
  --info:           #0288D1;

  /* ── TIPOGRAFÍA ─────────────────────────────────────── */
  /* Sistema tipográfico AQUO — 3 fuentes, jerarquía clara  */
  /* Cormorant Garamond : hero, citas, H1, H2, titulares    */
  /* Outfit             : H3, nav, UI, botones, labels      */
  /* Inter              : cuerpo, formularios, datos        */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  48px;
  --text-hero: 64px;

  /* ── ESPACIADO (base 4px) ───────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── RADIOS ─────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SOMBRAS ────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(33,150,243,0.06);
  --shadow-md:  0 2px 12px rgba(33,150,243,0.10);
  --shadow-lg:  0 4px 24px rgba(33,150,243,0.14);
  --shadow-xl:  0 8px 40px rgba(33,150,243,0.18);
  --shadow-gold: 0 4px 20px rgba(201,168,76,0.30);

  /* ── TRANSICIONES ───────────────────────────────────── */
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── LAYOUT ─────────────────────────────────────────── */
  --nav-width:     240px;
  --nav-mobile:    60px;
  --header-height: 64px;
  --max-width:     1200px;
}

/* ── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-dark);
  background: #E3F2FD;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

/* ── TIPOGRAFÍA ─────────────────────────────────────────── */
.display {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
/* H1 — Cormorant Garamond: editorial, para títulos de sección */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--primary-dark);
  letter-spacing: -0.015em;
}
/* H2 — Cormorant Garamond: subtítulos de bloque */
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}
/* H3 — Outfit: titulillos UI, cálido y legible */
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.4;
}
p { margin-bottom: var(--space-4); color: var(--text-mid); }
p:last-child { margin-bottom: 0; }

/* ── BOTONES ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Primary */
.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(33,150,243,0.28);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(33,150,243,0.36); }
.btn-primary:active { transform: scale(0.97); box-shadow: var(--shadow-sm); }

/* Secondary */
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover { background: var(--primary-pale); transform: translateY(-1px); }
.btn-secondary:active { transform: scale(0.97); }

/* Gold / Premium */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--white);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  font-weight: 700;
}
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); transform: translateY(-1px); box-shadow: 0 6px 28px rgba(201,168,76,0.40); }

/* Danger */
.btn-danger {
  background: var(--error);
  color: var(--white);
  border-color: var(--error);
}
.btn-danger:hover { background: #B71C1C; border-color: #B71C1C; transform: translateY(-1px); }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--primary-pale); color: var(--primary); }

/* Sizes */
.btn-sm { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg { padding: 16px 36px; font-size: var(--text-base); }
.btn-full { width: 100%; }

/* Loading spinner inside button */
.btn.loading { pointer-events: none; }
.btn.loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: var(--space-2);
}

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid rgba(33,150,243,0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 2px 12px rgba(33,150,243,0.10), 0 1px 4px rgba(33,150,243,0.06);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: 0 6px 32px rgba(33,150,243,0.13); }
.card-header {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: -0.005em;
}
.card-premium {
  border-color: rgba(201,168,76,0.3);
  background: linear-gradient(135deg, #FFFDF5, #FDF8EC);
}

/* ── FORMULARIOS ────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-mid); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-dark);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33,150,243,0.12);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input.error, .form-select.error { border-color: var(--error); box-shadow: 0 0 0 3px rgba(198,40,40,0.10); }
.form-input.success { border-color: var(--success); }
.form-helper { font-size: var(--text-xs); color: var(--text-secondary); }
.form-error { font-size: var(--text-xs); color: var(--error); margin-top: var(--space-1); display: none; }
.form-error.visible { display: block; }

/* ── BADGES / PILLS ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}
.badge-premium { background: var(--gold-bg); color: var(--gold-dark); border: 1px solid rgba(201,168,76,0.3); }
.badge-plus    { background: var(--silver-bg); color: #5E5E5E; border: 1px solid rgba(158,158,158,0.3); }
.badge-free    { background: var(--primary-pale); color: var(--primary-dark); }
.badge-locked  { background: #F5F5F5; color: var(--text-secondary); }

/* ── NAVEGACIÓN LATERAL ─────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: var(--nav-width);
  background: linear-gradient(180deg, #F7FBFF 0%, #F4F9FF 100%);
  border-right: 1px solid rgba(33,150,243,0.08);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--transition-slow);
}
.sidebar-logo {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sidebar-logo .logo-text {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.sidebar-logo .logo-icon { width:36px; height:36px; object-fit:contain; display:block; border-radius:0; flex-shrink:0;
  background: transparent; border: none; outline: none; padding: 0; box-shadow: none; }
.sidebar-nav { flex: 1; padding: var(--space-4) 0; overflow-y: auto; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  border-radius: 0;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.nav-item:hover { background: var(--primary-pale); color: var(--primary); }
.nav-item.active { background: var(--primary-pale); color: var(--primary-dark); border-left-color: var(--primary); font-weight: 600; }
.nav-item .nav-icon { display:flex; align-items:center; justify-content:center; width: 20px; height:20px; flex-shrink: 0; }
.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: var(--space-4) var(--space-6) var(--space-2);
  margin-top: 24px;
}
.sidebar-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--divider);
}

/* Main content area */
.main-content {
  margin-left: var(--nav-width);
  flex: 1;
  min-height: 100vh;
  background:
    linear-gradient(160deg,
      #D8EEFF 0%,
      #E3F2FD 25%,
      #EEF7FF 55%,
      #F0F8FF 100%);
}
.content-header {
  background: linear-gradient(135deg, #E8F4FF 0%, #EEF7FF 60%, #F0F8FF 100%);
  border-bottom: 1px solid rgba(33,150,243,0.10);
  padding: var(--space-4) var(--space-8);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: var(--space-4);
  box-shadow: 0 2px 16px rgba(33,150,243,0.07);
}
.header-isotipo {
  width: 40px; height: 56px;
  object-fit: contain; flex-shrink: 0;
  background: transparent; border: none; outline: none; padding: 0; box-shadow: none;
  overflow: visible; opacity: 1;
  transition: opacity 0.2s, transform 0.2s;
}
.header-isotipo:hover { transform: scale(1.05); }
.header-isotipo:hover { opacity: 1; }
.header-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-pale), #d6ebfc);
  border: 2px solid rgba(33,150,243,0.20);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(33,150,243,0.12);
  transition: box-shadow 0.2s, transform 0.15s;
}
.header-avatar:hover { box-shadow: 0 4px 16px rgba(33,150,243,0.22); transform: translateY(-1px); }
.content-body { padding: var(--space-8); max-width: var(--max-width); margin: 0 auto; }

/* ── BOTTOM TABS (mobile) ───────────────────────────────── */
.bottom-tabs {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--divider);
  z-index: 100;
  padding: var(--space-2) 0 env(safe-area-inset-bottom);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.bottom-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;           /* no shrink — tabs keep their size when scrolling */
  min-width: 64px;          /* consistent tap target */
  padding: var(--space-2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition);
  background: none;
  border: none;
}
.bottom-tab .tab-icon { font-size: 22px; }
.bottom-tab.active { color: var(--primary); }

/* ── PROGRESS / INDICADORES ─────────────────────────────── */
.progress-bar {
  height: 8px;
  background: var(--primary-pale);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Ring progress */
.ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-label {
  position: absolute;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ── MODALES ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,101,192,0.15);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--text-dark); }

/* ── ESTADOS VACÍOS ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-8);
  color: var(--text-secondary);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: var(--space-4); }
.empty-state p { max-width: 280px; margin: 0 auto var(--space-4); }

/* ── GRIDS ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* ── UTILIDADES ─────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.hidden { display: none !important; }
.w-full { width: 100%; }

/* ── ANIMACIONES ────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--primary-pale) 25%, var(--divider) 50%, var(--primary-pale) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── TOAST ──────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 360px;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), fadeIn 0.3s ease;
  pointer-events: all;
}
.toast-success { background: var(--success-bg); color: var(--success); border-left: 4px solid var(--success); }
.toast-error   { background: var(--error-bg);   color: var(--error);   border-left: 4px solid var(--error); }
.toast-info    { background: var(--primary-pale); color: var(--primary-dark); border-left: 4px solid var(--primary); }
.toast-warning { background: var(--warning-bg); color: var(--warning); border-left: 4px solid var(--warning); }

/* ── PAYWALL MODAL ──────────────────────────────────────── */
.paywall-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.plan-card {
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.plan-card.recommended { border-color: var(--gold); background: var(--gold-bg); }
.plan-price { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--primary-dark); }
.plan-price span { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }

/* ── ONBOARDING ─────────────────────────────────────────── */
.onboarding-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--primary-mist) 0%, var(--white) 60%);
  padding: var(--space-6);
}
.onboarding-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.step-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-4);
}
.step-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  transition: all var(--transition);
}
.step-dot.active { background: var(--primary); width: 24px; }
.step-dot.done   { background: var(--primary-dark); }

/* ── AUTH PAGE ──────────────────────────────────────────── */
/* v66.39 — Login freeze: isotipo protagonista, sin burbujas, fondo blanco limpio */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── LEFT PANEL ─────────────────────────────────────────── */
.auth-visual {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  padding: 48px 40px;
  color: var(--primary-dark);
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--divider);
}
.auth-visual * { position: relative; z-index: 1; }

/* ── HALO DEL ISOTIPO — suave, luminoso, no intrusivo ── */
.auth-isotipo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-isotipo-wrap::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(33,150,243,0.12) 0%,
    rgba(33,150,243,0.06) 40%,
    transparent 70%
  );
  filter: blur(18px);
  animation: pulse 4s ease-in-out infinite;
}

.auth-brand   { font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:-0.025em;color:var(--primary-dark);margin:0;opacity:0.9; }
.auth-tagline { font-size:13px;color:var(--primary);text-align:center;max-width:180px;line-height:1.6;font-weight:400;opacity:0.55;margin:0; }

/* ── RIGHT PANEL ─────────────────────────────────────────── */
.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: linear-gradient(155deg, #DCF1FC 0%, #C5E5F8 60%, #B8DAF5 100%);
}
.auth-form-inner { max-width: 400px; width: 100%; }
.auth-form-wrap .form-input {
  background: var(--white);
  border-color: rgba(33,150,243,0.2);
  color: var(--text-dark);
}
.auth-form-wrap .form-input:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(33,150,243,0.15);
}
.auth-form-wrap .form-label { color: var(--primary-dark); }

/* ── PASSWORD TOGGLE ── */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s;
  line-height: 1;
}
.pw-toggle:hover { color: var(--primary); }
.pw-toggle:focus { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* ── RATE LIMIT BANNER ── */
.auth-ratelimit {
  background: rgba(198,40,40,0.08);
  color: #C62828;
  border: 1px solid rgba(198,40,40,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

/* ── HONEYPOT ── */
.auth-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-wrap { background: var(--white); min-height: 100vh; }
  .auth-form-wrap .form-input { background: var(--white); }
}
/* ── LANDING ────────────────────────────────────────────── */
.landing-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(33,150,243,0.08);
  gap: 12px;
}
/* ── Mobile nav: no collision ───────────────── */
@media (max-width: 768px) {
  .landing-nav {
    padding: 10px 16px;
    gap: 6px;
  }
  .landing-nav-logo-iso {
    width: 32px !important;
    height: 41px !important;
  }
  .landing-nav-wordmark {
    font-size: 24px !important;
  }
  .landing-nav-login {
    display: inline-flex !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    border: none !important;
    background: transparent !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }
  .landing-nav-cta {
    padding: 5px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .landing-nav-login { display: none !important; }
}
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, #E0F0FF 0%, var(--primary-mist) 40%, #DCF0FF 100%);
  position: relative;
  overflow: hidden;
  padding: 56px var(--space-8) var(--space-10);
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -8%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(33,150,243,0.22) 0%, rgba(33,150,243,0.08) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Second accent blob — lower left for depth */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(33,150,243,0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-content { max-width: 600px; }
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 800;
  line-height: 1.04;
  color: var(--primary-dark);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hero-title .accent { color: var(--primary); }
.hero-subtitle { font-family: var(--font-body); font-size: var(--text-lg); color: var(--text-secondary); max-width: 460px; margin-bottom: var(--space-8); line-height: 1.7; letter-spacing: 0.005em; }
.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.section { padding: 20px 24px; }
.section-title { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 600; text-align: center; margin-bottom: 6px; color: var(--primary-dark); letter-spacing: -0.01em; }
.section-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 12px; max-width: 520px; margin-left: auto; margin-right: auto; font-size: var(--text-lg); }

.pricing-card {
  background: var(--white);
  border: 2px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: all var(--transition);
}
.pricing-card.featured { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

/* ── DASHBOARD WIDGETS ──────────────────────────────────── */
.stat-card {
  background: #ffffff;
  border: 1px solid rgba(33,150,243,0.09);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--primary-dark); line-height: 1; }
.stat-label { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }
.stat-icon { font-size: 32px; }

/* Greeting header */
.greeting { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 32px); font-weight: 500; color: var(--primary-dark); line-height: 1.15; letter-spacing: -0.015em; }
.greeting span { color: var(--primary); font-weight: 600; }
.greeting img { vertical-align: middle; position: relative; top: -1px; }
#cita-diaria { font-family: var(--font-serif); font-size: clamp(13px, 1.4vw, 15px); font-style: italic; color: #4a7ab5; margin-top: 8px; line-height: 1.55; max-width: 480px; opacity: 0.85; letter-spacing: 0.005em; }

/* ── POPUPS ─────────────────────────────────────────────── */
.popup {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-8);
  box-shadow: var(--shadow-xl);
  z-index: 500;
  min-width: min(300px, calc(100vw - 32px));
  max-width: 480px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.popup.visible { transform: translateX(-50%) translateY(0); }
.popup .popup-icon { display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-2); }
.popup .popup-text { font-size: var(--text-base); font-weight: 500; color: var(--primary-dark); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .bottom-tabs { display: flex; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .paywall-plans { grid-template-columns: 1fr; }
}

/* ── DESKTOP ENHANCEMENTS (>900px) ──────────────────────── */
@media (min-width: 901px) {
  /* Sidebar más elegante en escritorio */
  .sidebar {
    box-shadow: 2px 0 20px rgba(33,150,243,0.06);
  }

  /* Content header: limitar ancho en pantallas muy grandes */
  .content-header {
    padding: var(--space-3) var(--space-8);
  }
  /* Content body: más padding en desktop para respirar */
  .content-body {
    padding: var(--space-6) var(--space-8);
  }

  /* Grids: más columnas en escritorio donde corresponda */
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ── LARGE DESKTOP (>1400px) ────────────────────────────── */
@media (min-width: 1400px) {
  :root { --nav-width: 260px; }
  .content-body { padding: var(--space-8) var(--space-10); }
  .content-header { padding: var(--space-3) var(--space-10); }
}

@media (max-width: 600px) {
  .content-body { padding: var(--space-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-section { padding: 48px var(--space-4) var(--space-6); }
  .section { padding: var(--space-6) var(--space-4); }
  .landing-nav { padding: var(--space-3) var(--space-4); }
  .display { font-size: 36px; }
  .onboarding-card { padding: var(--space-5); }
  .modal { padding: var(--space-5); }
  #toast-container { bottom: 80px; right: var(--space-4); left: var(--space-4); }
}

/* ── DISCLAIMER SALUD ───────────────────────────────────── */
.health-disclaimer {
  background: var(--primary-pale);
  border-left: 3px solid var(--primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-4);
}

/* ── HOME HERO BLOCK ────────────────────────────────────── */
/* Oculta el content-header del shell cuando estamos en /dashboard */
/* porque home.js gestiona su propio hero completo */
.content-header.header-hidden {
  display: none !important;
}

/* Hero wrapper del Inicio */
.home-hero {
  /* v66.34 — position:relative para isotipo watermark absoluto */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, #E8F4FF 0%, #EEF7FF 80%, #F0F8FF 100%);
  border-radius: 20px;
  border: 1px solid rgba(33,150,243,0.10);
  box-shadow: 0 4px 24px rgba(33,150,243,0.07);
  margin-bottom: 4px;
}

.home-hero-isotipo {
  /* v66.34 — isotipo como watermark de fondo, no protagonista */
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 120px;
  object-fit: contain;
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.home-hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.home-hero-saludo {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 500;
  color: var(--primary-dark);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.home-hero-saludo span {
  color: var(--primary);
  font-weight: 600;
}

.home-hero-cita {
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  font-style: italic;
  color: #3a6ea8;
  line-height: 1.5;
  margin: 6px 0 0;
  opacity: 0.92;
}

.home-hero-fecha {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.8;
}

@media (max-width: 600px) {
  .home-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 18px 20px;
  }
  .home-hero-isotipo {
    /* v66.34 — watermark, smaller on mobile */
    width: 80px;
    height: 90px;
    right: 12px;
    opacity: 0.08;
  }
}

/* ── SISTEMA TIPOGRÁFICO GLOBAL — CLASES UTILITARIAS ──── */

/* Editorial: para títulos destacados en módulos */
.text-editorial {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary-dark);
}

/* Serif emocional: citas, frases, highlights */
.text-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-mid);
}

/* Section title — usado en encabezados de módulo */
.module-section-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

/* Module label — uppercase tracking para categorías */
.module-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Stat value — grandes cifras de datos */
.stat-value {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Stat unit — unidad junto a cifra */
.stat-unit {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Quote block — citas filosóficas */
.quote-block {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  font-style: italic;
  color: #3a6ea8;
  line-height: 1.6;
  padding-left: var(--space-4);
  border-left: 2px solid var(--primary-light);
  margin: var(--space-4) 0;
}

/* Nav label */
.nav-item {
  font-family: var(--font-display);
}

/* Bottom tab label */
.bottom-tab {
  font-family: var(--font-display);
}

/* Badge text */
.badge {
  font-family: var(--font-display);
}

/* Empty state text */
.empty-state p {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── Salud sexual — details/summary sin triángulo nativo ─────────────────── */
.ss-details summary         { list-style: none; cursor: pointer; }
.ss-details summary::-webkit-details-marker { display: none; }
.ss-details summary::marker { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Icon System v3 — Sistema de microiconografía definitivo
   ─────────────────────────────────────────────────────────────────────────
   Paleta: AZUL #2F6EA6 · PLATA #B8C0CC · ORO #C9A96A
   Formato: SVG 24×24 · stroke-width 1.6 · safe zone 2.5-21.5
   Solo presentación. Sin tocar: lógica, módulos, rutas, auth, Supabase.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Base: bloque en contexto flex, sin margin autónomo ─────────────────── */
.aquo-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  opacity: 0.70;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease;
  /* Optimizar render de SVG a tamaños reducidos */
  image-rendering: crisp-edges;
  will-change: opacity, transform;
}

/* ── Contenedor nav-icon como flex para alineación óptica ───────────────── */
.nav-item .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Estados sidebar ────────────────────────────────────────────────────── */
.nav-item:hover .aquo-icon {
  opacity: 0.92;
  transform: scale(1.06);
}

.nav-item.active .aquo-icon {
  opacity: 1;
  transform: scale(1.0);
  filter: brightness(1.1) saturate(1.2);
}

/* ── Bottom tabs: icono mayor para presencia táctil ────────────────────── */
.bottom-tab .aquo-icon {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  opacity: 0.60;
  display: block;
}

.bottom-tab:hover .aquo-icon {
  opacity: 0.88;
}

.bottom-tab.active .aquo-icon {
  opacity: 1;
  filter: brightness(1.1) saturate(1.2);
}

/* ── tab-icon: contenedor flex para centrar SVG ─────────────────────────── */
.tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 22px;
}

/* Anular font-size cuando el span contiene SVG */
.tab-icon:has(.aquo-icon) {
  font-size: 0;
  line-height: 0;
}

/* Fallback para WebViews antiguos sin soporte :has() */
.tab-icon img.aquo-icon {
  display: block;
}

/* ── Icono en paywall modal (inline SVG, no img) ─────────────────────────── */
.plan-card svg {
  display: block;
  opacity: 0.85;
  transition: opacity 0.16s ease;
}

.plan-card:hover svg {
  opacity: 1;
}

/* ── Icono en header-avatar (solo context visual) ────────────────────────── */
.nav-item.active .nav-icon .aquo-icon {
  filter: brightness(1.12) saturate(1.25);
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Shell Refinement — Lujo Silencioso
   Pase visual del shell completo. Solo presentación.
   Sin tocar: lógica, módulos, rutas, auth, Supabase, service worker.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. FONDO ATMOSFÉRICO ─────────────────────────────────────────────── */
/* Reemplaza el blanco plano con una atmósfera neblinosa y luminosa        */

body {
  background:
    radial-gradient(ellipse 70% 50% at 80% 5%,  rgba(33,150,243,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 5%  95%, rgba(33,150,243,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(33,150,243,0.04) 0%, transparent 65%),
    #D8E6F0;
  background-attachment: scroll;
}

.main-content {
  background:
    linear-gradient(160deg,
      #DBE9F5 0%,
      #D8E6F2 40%,
      #D5E3F0 100%);
}

/* ── 2. SIDEBAR PREMIUM ───────────────────────────────────────────────── */

.sidebar {
  background:
    linear-gradient(180deg,
      #C8DCEA 0%,
      #C2D8E8 60%,
      #BDD2E4 100%);
  border-right: 1px solid rgba(33,150,243,0.18);
  box-shadow:
    4px 0 24px rgba(33,150,243,0.12),
    1px 0 0 rgba(255,255,255,0.4) inset;
}

/* Logo block — más presencia editorial */
.sidebar-logo {
  padding: 28px var(--space-6) 22px;
  border-bottom: 1px solid rgba(33,150,243,0.07);
  background: transparent;
  position: relative;
}

/* Sutil destellito decorativo en el logo block */
.sidebar-logo::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--space-6); right: var(--space-6);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(33,150,243,0.18) 35%,
    rgba(201,168,76,0.15) 65%,
    transparent 100%);
}

.sidebar-logo .logo-text {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.sidebar-logo .logo-icon {
  width: 48px;
  height: 62px;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 8px rgba(33,150,243,0.18));
}

/* Nav items — más aire, radio en el estado activo */
.nav-item {
  padding: 11px 20px 11px 22px;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 450;
  color: #4a5568;
  letter-spacing: 0.003em;
  border-left: 2px solid transparent;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.nav-item:hover {
  background: rgba(33,150,243,0.055);
  color: var(--primary-dark);
  border-left-color: rgba(33,150,243,0.25);
}

.nav-item.active {
  background: rgba(33,150,243,0.08);
  color: var(--primary-dark);
  border-left-color: var(--primary);
  font-weight: 600;
}

/* Section dividers — más refinados */
.nav-section-title {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(144,164,174,0.85);
  padding: 18px 22px 7px;
  margin-top: 24px;
}

/* Footer del sidebar */
.sidebar-footer {
  padding: 16px var(--space-6) 20px;
  border-top: 1px solid rgba(33,150,243,0.07);
  background: transparent;
}

/* ── 3. HEADER EDITORIAL ──────────────────────────────────────────────── */

.content-header {
  background:
    linear-gradient(135deg,
      #C0D8EA 0%,
      #C8DCEE 100%);
  border-bottom: 1px solid rgba(33,150,243,0.20);
  box-shadow: 0 2px 16px rgba(33,150,243,0.12);
  padding: 18px 40px;
  min-height: 80px;
}

/* Saludo — más presencia */
.greeting {
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

/* Cita diaria — más elegante */
#cita-diaria {
  font-size: clamp(12.5px, 1.2vw, 14px);
  color: #4a78a8;
  opacity: 0.82;
  margin-top: 5px;
  line-height: 1.6;
  letter-spacing: 0.008em;
}

/* Isotipo en el header */
.header-isotipo {
  width: 42px;
  height: 54px;
  object-fit: contain;
  object-position: center center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  box-shadow: none;
  overflow: visible;
  opacity: 0.95;
  transition: opacity 0.2s;
}

/* Avatar */
.header-avatar {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(33,150,243,0.18);
  box-shadow:
    0 2px 12px rgba(33,150,243,0.10),
    0 0 0 3px rgba(33,150,243,0.04);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.header-avatar:hover {
  box-shadow:
    0 4px 20px rgba(33,150,243,0.18),
    0 0 0 4px rgba(33,150,243,0.07);
  transform: translateY(-1px);
}

/* ── 4. CARDS FLOTANTES ───────────────────────────────────────────────── */

.card {
  background: #ffffff;
  border: 1px solid rgba(33,150,243,0.09);
  border-radius: 20px;
  padding: var(--space-6);
  box-shadow:
    0 2px 8px  rgba(33,150,243,0.10),
    0 8px 32px rgba(33,150,243,0.18),
    0 0   0 1px rgba(255,255,255,1.0) inset;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.card:hover {
  box-shadow:
    0 2px 4px  rgba(33,150,243,0.06),
    0 8px 28px rgba(33,150,243,0.12),
    0 0   0 1px rgba(255,255,255,0.9) inset;
  transform: translateY(-2px);
}

.card-header {
  font-size: 16px;
  letter-spacing: -0.008em;
  margin-bottom: 18px;
}

.card-premium {
  background: linear-gradient(135deg, rgba(255,253,245,0.95), rgba(253,248,236,0.92));
  border-color: rgba(201,168,76,0.22);
  box-shadow:
    0 2px 0  rgba(255,255,255,0.9)  inset,
    0 4px 24px rgba(201,168,76,0.08),
    0 1px  4px rgba(201,168,76,0.06);
}

.card-premium:hover {
  box-shadow:
    0 2px 0  rgba(255,255,255,0.9)  inset,
    0 8px 36px rgba(201,168,76,0.12),
    0 2px  8px rgba(201,168,76,0.08);
}

/* Stat cards */
.stat-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(33,150,243,0.07);
  border-radius: 18px;
  padding: var(--space-5);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 4px 18px rgba(33,150,243,0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 8px 28px rgba(33,150,243,0.11);
  transform: translateY(-1px);
}

/* Home hero card */
.home-hero {
  background:
    linear-gradient(135deg,
      #DCEEFF 0%,
      #E4F2FF 100%);
  border: 1px solid rgba(33,150,243,0.14);
  border-radius: 22px;
  box-shadow:
    0 2px 0  rgba(255,255,255,1) inset,
    0 6px 32px rgba(33,150,243,0.08),
    0 1px  4px rgba(33,150,243,0.05);
  padding: 32px;
}

/* ── 5. RITMO VISUAL — MÁS AIRE ───────────────────────────────────────── */

.content-body {
  /* v66.34 — reduced padding, less dead space */
  padding: 24px 32px;
}

/* Separación entre secciones */
.content-body > * + * {
  margin-top: 0;
}

/* Más separación entre módulos de módulo */
.card + .card,
.stat-card + .stat-card {
  /* gap ya gestionado por grid/flex del padre */
}

/* ── 6. JERARQUÍA TIPOGRÁFICA REFINADA ────────────────────────────────── */

h1, .h1 {
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: -0.018em;
  line-height: 1.12;
}

h2, .h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.012em;
}

.module-section-title {
  font-size: clamp(19px, 2.2vw, 25px);
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* Stat values — más editorial */
.stat-value {
  font-size: clamp(26px, 3.5vw, 38px);
  letter-spacing: -0.022em;
}

/* ── 7. BOTTOM TABS — FROSTED GLASS ───────────────────────────────────── */

.bottom-tabs {
  background:
    rgba(255,255,255,0.92);
  border-top: 1px solid rgba(33,150,243,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -4px 24px rgba(33,150,243,0.07);
}

.bottom-tab {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(100,116,139,0.85);
  transition: color 0.16s ease;
}
.bottom-tab:hover {
  color: var(--primary-dark);
}

/* ── 8. MODAL & PAYWALL REFINADOS ─────────────────────────────────────── */

.modal {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(33,150,243,0.08);
  border-radius: 28px;
  box-shadow:
    0 2px 0 rgba(255,255,255,1) inset,
    0 24px 80px rgba(33,150,243,0.16),
    0  4px 16px rgba(33,150,243,0.08);
}

.modal-overlay {
  background: rgba(15,50,100,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── 9. DESKTOP ADJUSTMENTS ───────────────────────────────────────────── */

@media (min-width: 901px) {
  .sidebar {
    box-shadow:
      4px 0 40px rgba(33,150,243,0.07),
      1px 0 0 rgba(255,255,255,0.8) inset;
  }
  .content-header {
    padding: 14px 32px;
  }
  .content-body {
    padding: 24px 32px;
  }
}

@media (min-width: 1400px) {
  .content-body {
    padding: 28px 40px;
  }
  .content-header {
    padding: 16px 40px;
  }
}

@media (max-width: 900px) {
  .content-header {
    padding: 14px 20px;
    min-height: 68px;
  }
  .content-body {
    padding: 20px 16px;
  }
}

@media (max-width: 600px) {
  .card {
    border-radius: 16px;
    padding: var(--space-4);
  }
  .home-hero {
    padding: 20px 18px;
    border-radius: 18px;
  }
  .content-body {
    padding: 16px 14px;
  }
}

/* ── 10. POPUP REFINADO ───────────────────────────────────────────────── */

.popup {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(33,150,243,0.10);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 20px 60px rgba(33,150,243,0.14);
  border-radius: 22px;
}

/* ── 11. SCROLLBAR SUTIL ──────────────────────────────────────────────── */

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(33,150,243,0.15);
  border-radius: 99px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(33,150,243,0.28);
}

/* ══════════════════════════════════════════════════════════════════════════
   fin — Shell Refinement Lujo Silencioso
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Drop Quick Access Grid — v2.0
   ─────────────────────────────────────────────────────────────────────────
   Técnica primaria: SVG inline con <path> + linearGradient
   → iOS Safari 3.2+ ✅  Android Chrome ✅  Firefox ✅  Samsung Browser ✅
   Sombra: filter: drop-shadow() aplicado al elemento <svg>
   → sigue el contorno del path, iOS Safari 9+ ✅
   Sin clip-path: path() — eliminado por compatibilidad PWA móvil
   Responsive via width/height del SVG — el viewBox escala el contenido
   Solo presentación. Sin lógica, Supabase ni rutas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sección contenedora ────────────────────────────────────────────────── */
.aquo-drop-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aquo-drop-section-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 0;
  padding: 0 2px;
  opacity: 0.85;
}

/* ── Grid: 4 columnas en móvil, 8 en desktop ────────────────────────────── */
.aquo-drop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 10px;
}

@media (min-width: 640px) {
  .aquo-drop-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 14px 12px;
  }
}

@media (min-width: 960px) {
  .aquo-drop-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 16px 14px;
    max-width: 600px;
  }
}

/* ── Cada item: drop + label ─────────────────────────────────────────────── */
.aquo-drop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Contenedor relativo: SVG como fondo de gota, icono posicionado encima ── */
/*    viewBox="0 0 60 74" — no necesita cambiar en breakpoints, solo w/h CSS  */
.aquo-drop-wrap {
  position: relative;
  width: 60px;
  height: 74px;
  flex-shrink: 0;
  transition: transform 0.20s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.aquo-drop-item:hover .aquo-drop-wrap {
  transform: translateY(-4px);
}

.aquo-drop-item:active .aquo-drop-wrap {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.08s;
}

/* ── SVG de la gota: ocupa el wrap completo, overflow visible para sombra ─── */
/*    filter: drop-shadow en <svg> sigue la forma del <path> interno          */
.aquo-drop-svg {
  display: block;
  width: 60px;
  height: 74px;
  overflow: visible;
  transition: filter 0.20s ease;
}

/* ── Sombras semánticas por variante de color ───────────────────────────── */
.aquo-drop-blue .aquo-drop-svg {
  filter: drop-shadow(0 5px 14px rgba(47, 110, 166, 0.18));
}
.aquo-drop-item:hover .aquo-drop-blue .aquo-drop-svg {
  filter: drop-shadow(0 9px 22px rgba(47, 110, 166, 0.32));
}

.aquo-drop-silver .aquo-drop-svg {
  filter: drop-shadow(0 5px 14px rgba(100, 116, 139, 0.12));
}
.aquo-drop-item:hover .aquo-drop-silver .aquo-drop-svg {
  filter: drop-shadow(0 9px 22px rgba(100, 116, 139, 0.22));
}

.aquo-drop-gold .aquo-drop-svg {
  filter: drop-shadow(0 5px 14px rgba(201, 169, 106, 0.20));
}
.aquo-drop-item:hover .aquo-drop-gold .aquo-drop-svg {
  filter: drop-shadow(0 9px 22px rgba(201, 169, 106, 0.36));
}

/* ── Icono: centrado ópticamente en el cuerpo redondeado de la gota ───────── */
/*    Path: ápex y≈3, cuerpo y≈30-71, centro visual ≈ y=50 → 50/74 = 67.6%   */
.aquo-drop-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 50%;
  top: 67%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.82;
  transition: opacity 0.18s ease;
}

.aquo-drop-item:hover .aquo-drop-icon {
  opacity: 1;
}

/* ── Label debajo de la gota ─────────────────────────────────────────────── */
.aquo-drop-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.01em;
  word-break: break-word;
  hyphens: auto;
  transition: color 0.18s ease;
}

.aquo-drop-item:hover .aquo-drop-label {
  color: var(--text-dark);
}

/* ── Breakpoint pequeño < 360px: achica SVG vía CSS, el viewBox escala solo ─ */
@media (max-width: 359px) {
  .aquo-drop-wrap  { width: 52px; height: 64px; }
  .aquo-drop-svg   { width: 52px; height: 64px; }
  .aquo-drop-icon  { width: 20px; height: 20px; }
  .aquo-drop-grid  { gap: 10px 8px; }
  .aquo-drop-label { font-size: 10px; }
}

/* ── Breakpoint desktop > 960px: agranda SVG vía CSS, mismo viewBox ────────── */
@media (min-width: 960px) {
  .aquo-drop-section-title { font-size: 11px; }
  .aquo-drop-wrap  { width: 64px; height: 80px; }
  .aquo-drop-svg   { width: 64px; height: 80px; }
  .aquo-drop-icon  { width: 26px; height: 26px; }
  .aquo-drop-label { font-size: 11px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Plan Tier Visual System
   Tres variantes de cabecera según nivel de plan.
   Aplicadas mediante data-plan="free|premium|premium_plus" en .app-layout.
   Solo presentación — no toca lógica, rutas ni módulos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Badge de plan inline ─────────────────────────────────────────────── */

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 13px;
  line-height: 1.15;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.plan-badge-pro {
  background: linear-gradient(135deg, #F7F8FA 0%, var(--tier-pro-smoke) 100%);
  color: var(--tier-pro-title);
  border: 1px solid var(--tier-pro-border);
  box-shadow: 0 1px 3px var(--tier-pro-shadow);
}

.plan-badge-plus {
  background: linear-gradient(135deg, var(--tier-plus-warm) 0%, var(--tier-plus-hero) 100%);
  color: var(--tier-plus-accent);
  border: 1px solid var(--tier-plus-border-g);
  box-shadow: 0 1px 4px var(--tier-plus-shadow);
}

/* ── Avatar borde por plan — aplicado via JS ──────────────────────────── */

.header-avatar[data-plan="free"] {
  border-color: var(--tier-free-border);
  box-shadow: 0 2px 10px var(--tier-free-glow), 0 0 0 3px rgba(95,174,227,0.07);
}

.header-avatar[data-plan="premium"] {
  border: 1.5px solid var(--tier-pro-border);
  box-shadow: 0 2px 10px var(--tier-pro-shadow), 0 0 0 3px var(--tier-pro-halo);
}

.header-avatar[data-plan="premium"] .avatar-iniciales {
  color: var(--tier-pro-title);
}

.header-avatar[data-plan="premium_plus"] {
  border: 1.5px solid var(--tier-plus-border-g);
  box-shadow: 0 2px 12px var(--tier-plus-shadow), 0 0 0 3px var(--tier-plus-halo);
}

.header-avatar[data-plan="premium_plus"] .avatar-iniciales {
  color: var(--tier-plus-accent);
}

/* ── Header por plan ─────────────────────────────────────────────────── */

.app-layout[data-plan="premium"] .content-header {
  background: linear-gradient(135deg,
    #B8D0E6 0%,
    #C0D8EC 100%);
  border-bottom-color: var(--tier-pro-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 24px var(--tier-pro-glow);
}

.app-layout[data-plan="premium_plus"] .content-header {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.97) 0%,
    rgba(250,246,237,0.92) 100%);
  border-bottom-color: var(--tier-plus-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 24px var(--tier-plus-glow);
}

/* ── Sidebar logo marca por plan ─────────────────────────────────────── */

.app-layout[data-plan="premium"] .sidebar-logo::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tier-pro-border) 50%,
    transparent 100%);
}

.app-layout[data-plan="premium_plus"] .sidebar-logo::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tier-plus-border) 50%,
    transparent 100%);
}

/* ── Sidebar nav active accent por plan ──────────────────────────────── */

.app-layout[data-plan="premium"] .nav-item.active {
  border-left-color: var(--tier-pro-accent);
  background: var(--tier-pro-accent-soft);
  color: var(--tier-pro-text);
}

.app-layout[data-plan="premium_plus"] .nav-item.active {
  border-left-color: var(--tier-plus-accent);
  background: var(--tier-plus-accent-soft);
  color: var(--tier-plus-text);
}

/* ── Bottom tabs active por plan ────────────────────────────────────── */

.app-layout[data-plan="premium"] .bottom-tab.active {
  color: var(--tier-pro-accent);
}

.app-layout[data-plan="premium_plus"] .bottom-tab.active {
  color: var(--tier-plus-accent);
}

/* ── Greeting nombre por plan ───────────────────────────────────────── */

.app-layout[data-plan="premium"] .greeting span {
  color: var(--tier-pro-text);
}

.app-layout[data-plan="premium_plus"] .greeting span {
  color: var(--tier-plus-text);
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Hero Plan Variants — v3 (paleta exacta)
   Clase aplicada por home.js: .home-hero--free / --pro / --plus
   Isotipos: PNG con alpha real (_t.png) → drop-shadow sobre forma, sin caja
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FREE — azul acuoso, limpio y luminoso ───────────────────────────── */
.home-hero--free {
  background:
    radial-gradient(ellipse 65% 75% at 14% 55%, rgba(95,174,227,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #E8F4FF 0%, var(--tier-free-hero) 100%);
  border: 1px solid var(--tier-free-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 6px 28px rgba(95,174,227,0.09);
}

.home-hero--free .home-hero-isotipo {
  filter: drop-shadow(0 3px 14px rgba(95,174,227,0.28));
}

.home-hero--free .home-hero-saludo {
  color: var(--tier-free-editorial);
}

.home-hero--free .home-hero-saludo span {
  color: var(--tier-free-accent);
  font-weight: 600;
}

.home-hero--free .home-hero-cita {
  color: #3a72b0;
  opacity: 0.88;
}

.home-hero--free .home-hero-fecha {
  color: #6690B8;
  opacity: 0.72;
}

/* ── PRO — perla fría, plata satinada, sobriedad elegante ───────────── */
.home-hero--pro {
  background:
    radial-gradient(ellipse 60% 70% at 13% 55%, rgba(33,120,180,0.09) 0%, transparent 58%),
    linear-gradient(135deg,
      #DAEAFF 0%,
      var(--tier-pro-hero) 55%,
      var(--tier-pro-smoke) 100%);
  border: 1px solid var(--tier-pro-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 6px 28px var(--tier-pro-shadow);
}

.home-hero--pro .home-hero-isotipo {
  filter: drop-shadow(0 3px 16px rgba(120,138,160,0.26));
}

.home-hero--pro .home-hero-saludo {
  color: var(--tier-pro-title);
}

.home-hero--pro .home-hero-saludo span {
  color: var(--tier-pro-accent);
  font-weight: 600;
}

.home-hero--pro .home-hero-cita {
  color: var(--tier-pro-text);
  font-style: italic;
  opacity: 0.84;
}

.home-hero--pro .home-hero-fecha {
  color: var(--tier-pro-text);
  opacity: 0.66;
}

/* ── PLUS — marfil cálido, champán fino, oro miel apagado ───────────── */
.home-hero--plus {
  background:
    radial-gradient(ellipse 58% 72% at 13% 55%, rgba(184,143,56,0.09) 0%, transparent 56%),
    radial-gradient(ellipse 42% 50% at 88% 20%, rgba(217,192,140,0.07) 0%, transparent 48%),
    linear-gradient(135deg,
      var(--tier-plus-warm) 0%,
      var(--tier-plus-hero) 50%,
      var(--tier-plus-champagne) 100%);
  border: 1px solid var(--tier-plus-border-g);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 6px 28px var(--tier-plus-shadow);
}

.home-hero--plus .home-hero-isotipo {
  filter: drop-shadow(0 3px 18px rgba(184,143,56,0.28));
}

.home-hero--plus .home-hero-saludo {
  color: var(--tier-plus-title);
}

.home-hero--plus .home-hero-saludo span {
  color: var(--tier-plus-honey);
  font-weight: 600;
}

.home-hero--plus .home-hero-cita {
  color: var(--tier-plus-text);
  font-style: italic;
  opacity: 0.86;
}

.home-hero--plus .home-hero-fecha {
  color: var(--tier-plus-text);
  opacity: 0.68;
}




/* ══════════════════════════════════════════════════════════════════════════
   v66.35 — LANDING BOTTOM WATERMARK + PDF FOOTER BRAND + PRICING FIXES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Landing bottom water-tech bg ─────────────────────────────────────── */
.landing-bottom-bg {
  position: relative;
}

/* v66.36.1 — Landing bottom atmospheric system */

/* Container for all decorative layers */
.lb-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Luminous glow — depth feeling, not flat navy */
.lb-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lb-glow--left {
  width: 420px;
  height: 420px;
  bottom: -120px;
  left: -80px;
  background: radial-gradient(circle,
    rgba(33,140,240,0.28) 0%,
    rgba(10,70,180,0.12) 45%,
    transparent 70%);
}
.lb-glow--right {
  width: 260px;
  height: 260px;
  top: -60px;
  right: -30px;
  background: radial-gradient(circle,
    rgba(80,180,255,0.16) 0%,
    rgba(30,100,220,0.06) 50%,
    transparent 70%);
}

/* Bubbles — visible but elegant on dark background */
.lb-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation-name: lbFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform;
}
@keyframes lbFloat {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(6px, -14px, 0); }
  60%  { transform: translate3d(-5px, -24px, 0); }
  85%  { transform: translate3d(8px, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* 1 large — partially cut by left edge */
.lb-bubble--1 {
  width: 130px;
  height: 130px;
  left: -30px;
  bottom: 40px;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,0.22) 0%,
    rgba(120,200,255,0.14) 40%,
    rgba(50,140,240,0.06) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation-duration: 18s;
  animation-delay: -3s;
}
/* medium — right area top */
.lb-bubble--2 {
  width: 72px;
  height: 72px;
  right: 12%;
  top: 28px;
  background: radial-gradient(circle at 32% 28%,
    rgba(255,255,255,0.20) 0%,
    rgba(100,190,255,0.12) 45%,
    transparent 100%);
  filter: blur(0.5px);
  animation-duration: 13s;
  animation-delay: -7s;
}
/* medium — left center */
.lb-bubble--3 {
  width: 56px;
  height: 56px;
  left: 22%;
  top: 22px;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.18) 0%,
    rgba(90,175,255,0.10) 50%,
    transparent 100%);
  filter: blur(0.4px);
  animation-duration: 15s;
  animation-delay: -11s;
}
/* small 1 — right bottom */
.lb-bubble--4 {
  width: 32px;
  height: 32px;
  right: 26%;
  bottom: 32px;
  background: radial-gradient(circle at 33% 30%,
    rgba(255,255,255,0.22) 0%,
    rgba(110,185,255,0.12) 50%,
    transparent 100%);
  animation-duration: 10s;
  animation-delay: -2s;
}
/* small 2 — center top */
.lb-bubble--5 {
  width: 20px;
  height: 20px;
  left: 48%;
  top: 14px;
  background: rgba(160,220,255,0.18);
  filter: blur(0.3px);
  animation-duration: 12s;
  animation-delay: -5s;
}

/* Wave band SVG — pinned to bottom of the container */
.lb-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
}

/* Keep the class for backwards compat — now unused visually */
.landing-bottom-watermark { display: none; }

/* ── 2. PDF footer brand block (print window only) ──────────────────────── */
/* These styles are injected via _printCSS() — see below for the CSS string */
/* The classes are defined here for reference; the actual inject is in JS */

/* ── 3. Pricing section — compact override v66.37.3 ──────────────────────── */
#pricing.section { padding: 10px 24px 16px; }
#pricing .section-title { font-size: clamp(18px, 2.8vw, 26px); margin-bottom: 2px; }
#pricing .section-subtitle { font-size: 13px; margin-bottom: 10px; }
#pricing .grid-3 { gap: 10px; max-width: 960px; margin: 0 auto; }

/* ── 3. Pricing card — v66.37.3 proportions ────────────────────────────────── */
.pricing-card {
  background: var(--white);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: 8px 12px 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}

/* Featured plan — elegant distinction, no transform:scale() */
.pricing-card.featured {
  border-color: rgba(201,168,76,0.60);
  border-width: 1.5px;
  background: #FFFCF5;
  box-shadow: 0 4px 24px rgba(201,168,76,0.12);
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(33,150,243,0.10);
}
.pricing-card.featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(201,168,76,0.18);
}

/* Plan-card (paywall modal) — tighter */
.plan-card {
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 18px 16px 16px;           /* was var(--space-5) = 20px */
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.plan-card.recommended {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.plan-price {
  font-family: var(--font-display);
  font-size: 26px;                   /* was 28px — slightly tighter */
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.1;
}
.plan-price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-secondary);
}

/* ── 4. Bubble system — landing section bg (extend existing) ─────────────── */
/* Already defined: .aquo-bubbles--pricing (3 bubbles, 13-22s, opacity .18-.28) */
/* No changes needed — system is complete */



/* Hero bubbles in light zones — gentler float, no scale, stable opacity */
.home-hero .aquo-bubble {
  animation-name: aquoLightFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.55;
}
.home-hero .aquo-bubble--1 { animation-duration: 16s; animation-delay: -4s; }
.home-hero .aquo-bubble--2 { animation-duration: 12s; animation-delay: -8s; }
.home-hero .aquo-bubble--3 { animation-duration: 14s; animation-delay: -2s; }
.home-hero .aquo-bubble--4 { animation-duration: 10s; animation-delay: -6s; opacity: 0.40; }
.home-hero .aquo-bubble--5 { animation-duration: 19s; animation-delay: -10s; opacity: 0.35; }

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Tonal Bath — v2 (paleta exacta)
   Baño tonal sutil para que los acentos no queden aislados.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PRO: entorno perla fría ─────────────────────────────────────────── */

.app-layout[data-plan="premium"] .sidebar {
  background:
    linear-gradient(180deg,
      #B8D2E8 0%,
      #C0D8EE 60%,
      #C8DCEF 100%);
  border-right-color: rgba(33,150,243,0.22);
}

.app-layout[data-plan="premium"] .sidebar-logo {
  border-bottom-color: #D7DCE2;
}

.app-layout[data-plan="premium"] .content-header {
  background: linear-gradient(135deg, #E8F4FF 0%, #EEF7FF 100%);
  border-bottom-color: #D7DCE2;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 20px rgba(78,89,104,0.08);
}

.app-layout[data-plan="premium"] .nav-section-title {
  color: #6D7782;
  opacity: 0.72;
}

.app-layout[data-plan="premium"] .sidebar-footer {
  border-top-color: #D7DCE2;
}

.app-layout[data-plan="premium"] .nav-item.active {
  border-left-color: #A8B2BC;
  background: #EEF1F4;
  color: #3F4954;
}

.app-layout[data-plan="premium"] .bottom-tab.active {
  color: #A8B2BC;
}

.app-layout[data-plan="premium"] .greeting span {
  color: #A8B2BC;
}

/* ── PLUS: entorno champán cálido ───────────────────────────────────── */

.app-layout[data-plan="premium_plus"] .sidebar {
  background:
    linear-gradient(180deg,
      #EFE6C8 0%,
      #E8DDB8 60%,
      #E0D4A8 100%);
  border-right-color: #C9A84C;
}

.app-layout[data-plan="premium_plus"] .sidebar-logo {
  border-bottom-color: #E5D6B2;
}

.app-layout[data-plan="premium_plus"] .content-header {
  background: linear-gradient(135deg, #FFF9EC 0%, #FBF7ED 100%);
  border-bottom-color: #E5D6B2;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 20px rgba(140,110,42,0.10);
}

.app-layout[data-plan="premium_plus"] .nav-section-title {
  color: #9B8150;
  opacity: 0.70;
}

.app-layout[data-plan="premium_plus"] .sidebar-footer {
  border-top-color: #E5D6B2;
}

.app-layout[data-plan="premium_plus"] .nav-item.active {
  border-left-color: #B88F38;
  background: #FBF7ED;
  color: #4B3A22;
}

.app-layout[data-plan="premium_plus"] .bottom-tab.active {
  color: #B88F38;
}

.app-layout[data-plan="premium_plus"] .greeting span {
  color: #B88F38;
}

.home-hero{position:relative;overflow:hidden;isolation:isolate}.home-hero>*{position:relative;z-index:2}
.aquo-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aquo-bubble{position:absolute;border-radius:999px;filter:blur(.4px);opacity:.84;animation-name:aquoBubbleFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:18s;will-change:transform,opacity}
.aquo-bubble--1{width:140px;height:140px;left:-8px;bottom:-14px;animation-duration:17s;animation-delay:-2s}
.aquo-bubble--2{width:96px;height:96px;right:8%;top:12px;animation-duration:13s;animation-delay:-5s}
.aquo-bubble--3{width:72px;height:72px;right:20px;bottom:16px;animation-duration:11s;animation-delay:-1s}
.aquo-bubble--4{width:40px;height:40px;left:36%;top:8px;animation-duration:9s;animation-delay:-4s}
.aquo-bubble--5{width:58px;height:58px;right:42%;bottom:4px;animation-duration:15s;animation-delay:-7s;opacity:.55}
.aquo-bubble--6{width:28px;height:28px;left:18%;top:22px;animation-duration:20s;animation-delay:-11s;opacity:.45}
.aquo-bubble--7{width:80px;height:80px;right:6%;top:28px;animation-duration:12s;animation-delay:-3s;opacity:.38}
.aquo-bubble--8{width:22px;height:22px;left:52%;bottom:8px;animation-duration:8s;animation-delay:-6s;opacity:.50}
.aquo-bubbles--free .aquo-bubble{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.78) 0%, rgba(180,221,255,.62) 32%, rgba(84,173,230,.26) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 24px rgba(95,174,227,.12)}
.aquo-bubbles--pro .aquo-bubble{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.84) 0%, rgba(232,236,242,.70) 32%, rgba(157,170,186,.28) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 10px 26px rgba(144,156,172,.12)}
.aquo-bubbles--plus .aquo-bubble{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.82) 0%, rgba(255,232,173,.74) 35%, rgba(196,154,51,.34) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 12px 28px rgba(184,143,56,.18)}
@keyframes aquoBubbleFloat{0%{transform:translate3d(0,14px,0) scale(.96);opacity:.40}25%{transform:translate3d(10px,-2px,0) scale(1.03);opacity:.78}50%{transform:translate3d(-8px,-18px,0) scale(1.08);opacity:.58}75%{transform:translate3d(7px,-28px,0) scale(.99);opacity:.86}100%{transform:translate3d(0,14px,0) scale(.96);opacity:.40}}
/* Light-blue zone float — gentler, fixed opacity, no scale */
@keyframes aquoLightFloat {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(5px, -12px, 0); }
  66%  { transform: translate3d(-4px, -20px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Bubble depth — módulo Agua (section header strip) ── */
.aquo-bubbles--agua{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aquo-bubbles--agua .aquo-bubble{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.72) 0%, rgba(144,202,249,.56) 34%, rgba(33,150,243,.18) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 8px 20px rgba(33,150,243,.10)}
/* Only 4 bubbles here — agua section is compact */
.aquo-bubbles--agua .aquo-bubble--1{width:72px;height:72px;left:-10px;bottom:-8px;animation-duration:16s;animation-delay:-3s;opacity:.70}
.aquo-bubbles--agua .aquo-bubble--2{width:44px;height:44px;right:12%;top:6px;animation-duration:11s;animation-delay:-6s;opacity:.52}
.aquo-bubbles--agua .aquo-bubble--3{width:28px;height:28px;right:28px;bottom:10px;animation-duration:9s;animation-delay:-2s;opacity:.42}
.aquo-bubbles--agua .aquo-bubble--4{width:18px;height:18px;left:38%;top:10px;animation-duration:8s;animation-delay:-8s;opacity:.36}
@media(max-width:640px){.aquo-bubbles--agua .aquo-bubble--1{width:52px;height:52px}.aquo-bubbles--agua .aquo-bubble--2{width:32px;height:32px}.aquo-bubbles--agua .aquo-bubble--3{display:none}.aquo-bubbles--agua .aquo-bubble--4{display:none}}

/* ── Bubble depth — Landing pricing section background ── */
.aquo-bubbles--pricing{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aquo-bubbles--pricing .aquo-bubble{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.68) 0%, rgba(180,220,255,.48) 36%, rgba(84,160,230,.14) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 22px rgba(33,150,243,.06)}
/* 3 very subtle bubbles — pricing is content-dense, bubbles must not compete */
.aquo-bubbles--pricing .aquo-bubble--1{width:120px;height:120px;left:-20px;bottom:-20px;animation-duration:22s;animation-delay:-4s;opacity:.28}
.aquo-bubbles--pricing .aquo-bubble--2{width:64px;height:64px;right:3%;top:14px;animation-duration:17s;animation-delay:-9s;opacity:.22}
.aquo-bubbles--pricing .aquo-bubble--3{width:36px;height:36px;right:22%;bottom:8px;animation-duration:13s;animation-delay:-2s;opacity:.18}
@media(max-width:640px){.aquo-bubbles--pricing .aquo-bubble--1{width:80px;height:80px}.aquo-bubbles--pricing .aquo-bubble--2{display:none}.aquo-bubbles--pricing .aquo-bubble--3{display:none}}

/* ── Bubble depth — Sidebar (desktop only, ultra-subtle) ── */
.sidebar { overflow: hidden; }
.aquo-bubbles--sidebar{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aquo-bubbles--sidebar .aquo-bubble{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.64) 0%, rgba(190,225,255,.44) 36%, rgba(33,150,243,.10) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 6px 18px rgba(33,150,243,.05)}
/* 3 bubbles only — sidebar is narrow, they must not compete with nav items */
.aquo-bubbles--sidebar .aquo-bubble--1{width:110px;height:110px;left:-28px;bottom:60px;animation-duration:24s;animation-delay:-6s;opacity:.20}
.aquo-bubbles--sidebar .aquo-bubble--2{width:54px;height:54px;right:-14px;top:18%;animation-duration:19s;animation-delay:-11s;opacity:.14}
.aquo-bubbles--sidebar .aquo-bubble--3{width:32px;height:32px;left:30%;bottom:20%;animation-duration:15s;animation-delay:-3s;opacity:.11}
/* Hide on mobile — sidebar is off-canvas overlay, bubbles would feel heavy */
@media(max-width:900px){.aquo-bubbles--sidebar{display:none}}
.aquo-about-card{position:relative;overflow:hidden;border-radius:18px;padding:18px 18px 16px;border:1px solid rgba(33,150,243,.10);background:linear-gradient(145deg, rgba(255,255,255,.96) 0%, rgba(241,248,255,.92) 100%);box-shadow:0 4px 18px rgba(33,150,243,.07);margin:0}
.aquo-about-card__content{position:relative;z-index:2;display:flex;align-items:center;gap:14px}
.aquo-about-card__icon{width:56px;height:56px;border-radius:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(218,238,255,.90));border:1px solid rgba(33,150,243,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(33,150,243,.08)}
.aquo-about-card__icon img{width:34px;height:34px;object-fit:contain}
.aquo-about-card__eyebrow{margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(71,117,160,.88);font-weight:700}
.aquo-about-card__title{margin:0 0 6px;font-family:var(--font-serif);font-size:clamp(18px,2vw,22px);line-height:1.15;color:var(--primary-dark)}
.aquo-about-card__text{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.6}
.aquo-about-card__cta{margin-left:auto;flex-shrink:0;border:1px solid rgba(33,150,243,.16);background:rgba(255,255,255,.86);color:var(--primary-dark);border-radius:999px;padding:10px 14px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 14px rgba(33,150,243,.08)}
@media (max-width:640px){.aquo-bubble--1{width:96px;height:96px;left:-12px;bottom:-10px}.aquo-bubble--2{width:68px;height:68px;right:10px;top:10px}.aquo-bubble--3{width:52px;height:52px;right:16px;bottom:10px}.aquo-bubble--4{width:30px;height:30px;left:42%;top:12px}
.aquo-bubble--5{display:none}
.aquo-bubble--6{display:none}
.aquo-bubble--7{width:48px;height:48px;right:8px;top:20px}
.aquo-bubble--8{display:none}.aquo-about-card{padding:16px 14px 14px}.aquo-about-card__content{flex-wrap:wrap;align-items:flex-start}.aquo-about-card__cta{margin-left:0;margin-top:6px}}
/* ── Sobre AQUO card — tablet (641px–900px) ── */
@media (min-width:641px) and (max-width:900px){
  .aquo-about-card{padding:20px 22px 18px}
  .aquo-about-card__content{
    display:grid;
    grid-template-columns:64px 1fr;
    grid-template-rows:auto auto;
    align-items:start;
    gap:0 18px
  }
  .aquo-about-card__icon{
    grid-column:1;grid-row:1/3;
    width:64px;height:64px;border-radius:20px;
    align-self:start;margin-top:2px
  }
  .aquo-about-card__icon img{width:38px;height:38px}
  /* text block: col 2 row 1 */
  .aquo-about-card__content > div[style]{
    grid-column:2;grid-row:1;min-width:0
  }
  /* CTA: col 2 row 2 — anchored under the text, not floating right */
  .aquo-about-card__cta{
    grid-column:2;grid-row:2;
    margin-left:0;margin-top:12px;
    align-self:start;
    width:fit-content
  }
  /* Shrink largest bubble so it doesn't crowd the text at tablet */
  .aquo-bubble--1{width:110px;height:110px}
  .aquo-bubble--2{width:80px;height:80px}
}


/* v51 layout stable core */
.content-body{
  max-width:100%;
  overflow-x:hidden;
}
.card, .glass-card, .panel, .stat-card, .metric-card{
  max-width:100%;
  min-width:0;
}
.grid, .cards-grid{
  min-width:0;
}
input, select, textarea, button{
  max-width:100%;
}
table{
  max-width:100%;
}
.aquo-tooltip-safe, .sigla-wrapper, .sigla-help{
  position:relative;
}
.sigla-help .tooltip,
.sigla-wrapper .tooltip,
.aquo-sigla-tooltip{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  max-width:min(220px, calc(100vw - 32px));
  width:max-content;
  white-space:normal;
  z-index:120;
}
@media (max-width: 900px){
  .content-body{
    padding-left: clamp(12px, 3vw, 22px) !important;
    padding-right: clamp(12px, 3vw, 22px) !important;
  }
}


/* ── Home / Dashboard polish v66.8.0 ───────────────────────── */
.home-dashboard-stack{display:flex;flex-direction:column;gap:22px;max-width:980px;width:100%;min-width:0}
.home-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.home-summary-card{background:#ffffff;border:1px solid rgba(33,150,243,0.10);box-shadow:0 2px 12px rgba(33,150,243,0.06);display:flex;flex-direction:column;gap:10px;min-height:168px;padding:16px 16px 15px;border-radius:20px;border:1px solid rgba(33,150,243,.10);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.95));box-shadow:0 8px 22px rgba(33,150,243,.06);transition:box-shadow var(--transition),transform var(--transition)}
.home-summary-card__head{display:flex;align-items:center;gap:8px;min-width:0}
.home-summary-card__emoji{font-size:18px;line-height:1}
.home-summary-card__eyebrow{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-summary-card__date{margin-left:auto;font-size:10px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.home-summary-card__value{font-family:var(--font-serif);font-size:clamp(20px,2.3vw,25px);font-weight:600;line-height:1.1;color:var(--primary-dark)}
.home-summary-card__value--water{color:var(--primary)}
.home-summary-card__value--sleep{color:#7E57C2}
.home-summary-card__meta{font-size:12px;color:var(--text-secondary);line-height:1.5}
.home-summary-card__muted{font-size:13px;color:var(--text-muted);line-height:1.55}
.home-summary-card__muted--strong{color:var(--text-mid)}
.home-summary-card__action{margin-top:auto;font-size:13px;color:var(--primary);font-weight:600}
.home-summary-card__emoji-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.home-summary-card__mood,.home-summary-card__sleep-dot{font-size:18px;line-height:1}
.home-summary-card__meter{background:#e3f2fd;border-radius:999px;height:6px;margin:2px 0 0;overflow:hidden}
.home-summary-card__meter-fill{background:linear-gradient(90deg,var(--primary),#5ab4ff);height:100%;border-radius:999px}
.home-chip-row{display:flex;flex-wrap:wrap;gap:6px}
.home-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.2;background:#eef5ff;color:var(--primary-dark);border:1px solid rgba(33,150,243,.10);max-width:100%}
.home-chip--rose{background:#fff1f2;color:#c2415b;border-color:rgba(194,65,91,.12)}
.home-chip--pink{background:#fdf2f8;color:#be185d;border-color:rgba(190,24,93,.12)}
.home-chip--sand{background:#fff7ed;color:#c2410c;border-color:rgba(194,65,12,.10)}
@media (max-width:900px){
  .home-dashboard-stack{gap:16px}
  .home-summary-grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
}
@media (max-width:640px){
  .home-summary-grid{grid-template-columns:1fr 1fr;gap:10px}
  .home-summary-card{min-height:154px;padding:14px 13px}
  .home-summary-card__value{font-size:20px}
  .home-summary-card__muted{font-size:12px}
  .home-chip{font-size:11px;padding:4px 8px}
  /* Orphan card fix: odd last child spans both columns in 2-col grid */
  .home-summary-grid > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:380px){
  .home-summary-grid{grid-template-columns:1fr}
  .home-summary-card{min-height:auto}
}

/* ── v66.8.2-home-premium-polish — micro-mejoras visuales ──── */
/* Hover CSS puro: complementa el JS inline para que focus/teclado también se anime */
.home-summary-card:hover {
  box-shadow: 0 12px 32px rgba(33,150,243,0.11);
  transform: translateY(-2px);
}
/* About card: consistencia con el stack gap */
.aquo-about-card {
  border-radius: 20px;
}
/* Home dashboard stack: responsive gap */
@media (max-width: 640px) {
  .home-dashboard-stack {
  /* v66.34 — ensure stack renders as column with consistent spacing */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.10.0 — daily-experience: Today Bar + Water Hero + Intimacy Card
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Today Bar ──────────────────────────────────────────────────────────── */
.home-today-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-today-bar__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-secondary);
  opacity: 0.80;
  padding-left: 2px;
}
.home-today-bar__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.home-today-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: var(--chip-bg, var(--primary-pale));
  border: 1px solid rgba(160,160,160,0.22); /* fallback Safari <16.2 */
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--primary)) 20%, transparent);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  min-width: 0;
  flex-shrink: 0;
}
.home-today-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(100,100,100,0.14); /* fallback Safari <16.2 */
  box-shadow: 0 4px 12px color-mix(in srgb, var(--chip-color, var(--primary)) 18%, transparent);
}
.home-today-chip--empty {
  --chip-color: #9E9E9E;
  --chip-bg: #F5F5F5;
  opacity: 0.72;
}
.home-today-chip__icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.home-today-chip__text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-color, var(--primary-dark));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* ── Water Hero ─────────────────────────────────────────────────────────── */
.home-water-hero {
  background: linear-gradient(145deg, #EBF7FF 0%, #D9ECFF 100%);
  border: 1px solid rgba(33,150,243,0.14);
  border-radius: 20px;
  padding: 20px 20px 18px;
  box-shadow: 0 6px 24px rgba(33,150,243,0.10);
  transition: box-shadow var(--transition);
}
.home-water-hero--done {
  background: linear-gradient(145deg, #E8F5E9 0%, #C8E6C9 100%);
  border-color: rgba(46,125,50,0.18);
  box-shadow: 0 6px 24px rgba(46,125,50,0.10);
}
.home-water-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.home-water-hero__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.home-water-hero__emoji { font-size: 24px; line-height: 1; flex-shrink: 0; }
.home-water-hero__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-dark);
  opacity: 0.7;
  line-height: 1;
  margin-bottom: 3px;
}
.home-water-hero__msg {
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--primary-dark);
  line-height: 1.35;
}
.home-water-hero__value {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.home-water-hero__unit {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.65;
  margin-left: 2px;
}
.home-water-hero--done .home-water-hero__value { color: #2E7D32; }

/* Progress bar */
.home-water-hero__bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.home-water-hero__bar {
  flex: 1;
  height: 8px;
  background: rgba(33,150,243,0.15);
  border-radius: 999px;
  overflow: hidden;
}
.home-water-hero__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #64B5F6);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-water-hero__bar-fill--done {
  background: linear-gradient(90deg, #43A047, #81C784);
}
.home-water-hero--done .home-water-hero__bar {
  background: rgba(46,125,50,0.15);
}
.home-water-hero__pct {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
  opacity: 0.65;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-water-hero--done .home-water-hero__pct { color: #2E7D32; }

/* Actions row */
.home-water-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-water-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: white;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 3px 12px rgba(33,150,243,0.28);
  flex-shrink: 0;
}
.home-water-hero__cta:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(33,150,243,0.38);
}
.home-water-hero__cta:active:not(:disabled) { transform: scale(0.97); }
.home-water-hero__cta:disabled { opacity: 0.55; cursor: default; }
.home-water-hero__cta--done {
  background: #43A047;
  box-shadow: 0 3px 12px rgba(46,125,50,0.25);
}
.home-water-hero__meta {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.home-water-hero__link {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.home-water-hero__link:hover { opacity: 1; }

/* ── Intimacy Card ──────────────────────────────────────────────────────── */
.home-intimacy-card .home-summary-card__head {
  flex-wrap: wrap;
  gap: 4px 8px;
}
.home-intimacy-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.70;
  letter-spacing: 0.02em;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-intimacy-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
  opacity: 0.80;
}
.home-intimacy-desire {
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1.4;
  display: inline-block;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .home-today-chip__text { max-width: 90px; }
  .home-water-hero { padding: 16px 16px 14px; }
  .home-water-hero__value { font-size: 26px; }
  .home-water-hero__cta { padding: 9px 16px; font-size: 12px; }
}
@media (max-width: 380px) {
  .home-today-bar__chips { gap: 6px; }
  .home-today-chip { padding: 6px 10px 6px 8px; }
  .home-today-chip__text { max-width: 72px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.11.0 — intimacy-polish: Salud Sexual / Intimidad module styles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Module header ───────────────────────────────────────────────────────── */
.ss-module-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ss-module-header__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ss-module-header__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 500;
  color: var(--primary-dark);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
.ss-module-header__sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── Privacy chip ────────────────────────────────────────────────────────── */
.ss-privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46,125,50,0.08);
  border: 1px solid rgba(46,125,50,0.18);
  font-size: 11px;
  font-weight: 700;
  color: #2E7D32;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Privacy footer ──────────────────────────────────────────────────────── */
.ss-privacy-footer {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
  padding: 4px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.12.0 — hydration-polish: agua module
   ══════════════════════════════════════════════════════════════════════════ */
.agua-quick-btn {
  min-width: 140px;
  box-shadow: 0 3px 12px rgba(33,150,243,0.22);
}
.agua-quick-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(33,150,243,0.32);
}
@media (max-width: 640px) {
  .agua-quick-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.13.0 — home-diary-fusion: Diary Strip component
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Strip container ────────────────────────────────────────────────────── */
.home-diary-strip {
  background: linear-gradient(145deg, #F7F8FC 0%, #F0F4FA 100%);
  border: 1px solid rgba(33,150,243,0.10);
  border-radius: 20px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--transition);
}
.home-diary-strip--done {
  background: linear-gradient(145deg, #F5FAF5 0%, #EDF6ED 100%);
  border-color: rgba(46,125,50,0.12);
  padding: 14px 18px;
}

/* ── Header row ─────────────────────────────────────────────────────────── */
.home-diary-strip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-diary-strip__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-secondary);
  opacity: 0.80;
}
.home-diary-strip__private {
  font-size: 10px;
  font-weight: 600;
  color: #2E7D32;
  opacity: 0.70;
  letter-spacing: 0.01em;
}
.home-diary-strip__prompt {
  font-family: var(--font-serif);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  color: var(--primary-dark);
  margin: 0;
  line-height: 1.3;
}

/* ── Mood grid ──────────────────────────────────────────────────────────── */
.home-diary-strip__moods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-diary-mood-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.80);
  font-size: 22px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.home-diary-mood-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(33,150,243,0.18);
  background: white;
}
.home-diary-mood-btn--active {
  border-color: var(--primary);
  background: var(--primary-pale);
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(33,150,243,0.22);
}

/* ── Note area ──────────────────────────────────────────────────────────── */
.home-diary-strip__note-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.2s ease;
}
.home-diary-strip__note {
  font-size: 14px;
  min-height: 60px;
  resize: none;
  border-radius: var(--radius-md);
}
.home-diary-strip__save {
  align-self: flex-end;
  min-width: 100px;
}

/* ── Expand button ──────────────────────────────────────────────────────── */
.home-diary-strip__expand {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
  align-self: flex-start;
  transition: opacity var(--transition);
}
.home-diary-strip__expand:hover { opacity: 1; }

/* ── Done state ─────────────────────────────────────────────────────────── */
.home-diary-strip__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.home-diary-strip__mood-done {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.home-diary-strip__mood-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #2E7D32;
  flex-shrink: 0;
}
.home-diary-strip__note-preview {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-diary-strip__edit {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity var(--transition);
}
.home-diary-strip__edit:hover { opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .home-diary-strip { padding: 16px 16px 14px; gap: 10px; }
  .home-diary-mood-btn { width: 40px; height: 40px; font-size: 20px; }
  .home-diary-strip__note { font-size: 15px; } /* larger for mobile tapping */
  .home-diary-strip__save { width: 100%; }
}
@media (max-width: 380px) {
  .home-diary-mood-btn { width: 38px; height: 38px; font-size: 18px; }
  .home-diary-strip__moods { gap: 6px; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.15.0 — home-continuity-polish
   ══════════════════════════════════════════════════════════════════════════ */

/* Today Bar + Diary Strip are one semantic block ("state of the day").
   Collapse the standard 22px stack gap between them to 10px visually. */
.home-today-bar + .home-diary-strip,
.home-today-bar + .home-diary-strip.home-diary-strip--done {
  margin-top: -12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.16.0 — emergency-button-v1
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FAB flotante rojo ─────────────────────────────────────────────────── */
.aquo-emergency-fab {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 48px;
  height: 64px;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 150;
  opacity: 0.85;
  transition: opacity .2s ease, transform .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.aquo-emergency-fab:hover,
.aquo-emergency-fab:focus-visible {
  opacity: 1;
  transform: scale(1.08);
  outline: 3px solid rgba(211,47,47,0.35);
  outline-offset: 2px;
}
.aquo-emergency-fab:active {
  transform: scale(0.95);
}
.aquo-emergency-fab img {
  width: auto;
  height: 60px;
  max-width: 48px;
  object-fit: contain;
  border-radius: 0;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(211,47,47,0.50));
  background: transparent;
}
/* Pulso sutil para que no pase desapercibido, pero no agresivo */
@keyframes emergency-pulse {
  0%   { filter: drop-shadow(0 4px 12px rgba(211,47,47,0.50)); }
  50%  { filter: drop-shadow(0 4px 18px rgba(211,47,47,0.85)); }
  100% { filter: drop-shadow(0 4px 12px rgba(211,47,47,0.50)); }
}
.aquo-emergency-fab img {
  animation: emergency-pulse 3.5s ease-in-out infinite;
}
/* En desktop: posición más elevada para no chocar con nada */
@media (min-width: 768px) {
  .aquo-emergency-fab {
    bottom: 32px;
    right: 24px;
  }
}
/* Si hay sidebar en desktop: moverlo para que no tape contenido */
@media (min-width: 900px) {
  .aquo-emergency-fab {
    right: 32px;
  }
}

/* ── Modal de emergencia ───────────────────────────────────────────────── */
.emergency-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,15,35,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  animation: modal-fade-in .18s ease;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.emergency-modal {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 32px;
  width: 100%;
  max-width: 480px;
  animation: modal-slide-up .22s ease;
}
@keyframes modal-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.emergency-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.emergency-modal__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: #B71C1C;
  letter-spacing: -0.01em;
}
.emergency-modal__body {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.55;
}
.emergency-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Botón principal: llamar emergencias — hold-to-call */
.emergency-btn-call {
  position: relative;
  overflow: hidden;
  background: #C62828;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
  user-select: none;
  -webkit-user-select: none;
}
.emergency-btn-call:hover { background: #B71C1C; }
.emergency-btn-call__icon { font-size: 22px; flex-shrink: 0; }
.emergency-btn-call__label { flex: 1; line-height: 1.2; }
.emergency-btn-call__sub {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.80;
  display: block;
  margin-top: 2px;
}
/* Progress bar de hold-to-call */
.emergency-btn-call__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  width: 0%;
  background: rgba(255,255,255,0.55);
  border-radius: 0 0 14px 14px;
  transition: none;
  pointer-events: none;
}
.emergency-btn-call.holding .emergency-btn-call__progress {
  width: 100%;
  transition: width 1.6s linear;
}

/* Botón secundario: contacto */
.emergency-btn-contact {
  background: #FFF3E0;
  color: #E65100;
  border: 1.5px solid #FFCC80;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.emergency-btn-contact:hover { background: #FFE0B2; }
.emergency-btn-contact__icon { font-size: 20px; flex-shrink: 0; }

/* Botón cancelar */
.emergency-btn-cancel {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px;
  text-align: center;
  width: 100%;
  letter-spacing: 0.01em;
  touch-action: manipulation;
}
.emergency-btn-cancel:hover { color: var(--text-dark); }

/* Estado vacío: sin datos configurados */
.emergency-modal__empty {
  text-align: center;
  padding: 8px 0 12px;
}
.emergency-modal__empty p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* ── Sección emergencia en Mi Cuenta ───────────────────────────────────── */
.emergency-account-block {
  background: #FFF8F8;
  border: 1px solid rgba(198,40,40,0.14);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 2px 18px rgba(198,40,40,0.05);
}
.emergency-account-block__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.emergency-account-block__bar {
  width: 3px; height: 18px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #EF9A9A, #C62828);
  flex-shrink: 0;
}
.emergency-account-block__title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: #C62828;
  letter-spacing: -0.01em;
}
.emergency-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(198,40,40,0.08);
  margin-bottom: 18px;
}
.emergency-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Toggle switch */
.aquo-toggle {
  position: relative;
  width: 46px; height: 26px;
  flex-shrink: 0;
}
.aquo-toggle input { opacity: 0; width: 0; height: 0; }
.aquo-toggle__slider {
  position: absolute; inset: 0;
  background: #e0e0e0;
  border-radius: 13px;
  cursor: pointer;
  transition: background .25s;
}
.aquo-toggle__slider:before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform .25s;
}
.aquo-toggle input:checked + .aquo-toggle__slider { background: #C62828; }
.aquo-toggle input:checked + .aquo-toggle__slider:before { transform: translateX(20px); }

/* Campos de configuración */
.emergency-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.emergency-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.emergency-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.emergency-field input {
  padding: 11px 14px;
  border: 1.5px solid rgba(198,40,40,0.18);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-dark);
  background: #fff;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.emergency-field input:focus {
  outline: none;
  border-color: #C62828;
  box-shadow: 0 0 0 3px rgba(198,40,40,0.10);
}
.emergency-field input::placeholder { color: #bdbdbd; }

.emergency-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.emergency-save-btn {
  background: #C62828;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.emergency-save-btn:hover { background: #B71C1C; }
.emergency-save-ok {
  font-size: 12px;
  color: var(--success);
  display: none;
}

.emergency-note {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(198,40,40,0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   v66.18.0 — Profesionales module
   ══════════════════════════════════════════════════════════════════════════ */

.pros-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  width: 100%;
  padding: 0 0 32px;
}
.pros-header { display: flex; flex-direction: column; gap: 6px; }
.pros-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: -0.01em;
}
.pros-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}
.pros-section { display: flex; flex-direction: column; gap: 12px; }
.pros-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-secondary);
  opacity: 0.75;
}

/* Category cards */
.pros-grid { display: flex; flex-direction: column; gap: 10px; }
.pros-card {
  background: var(--white);
  border: 1px solid rgba(33,150,243,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(33,150,243,0.05);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pros-card:hover {
  box-shadow: 0 4px 18px rgba(33,150,243,0.10);
  transform: translateY(-1px);
}
.pros-card__head { display: flex; align-items: flex-start; gap: 12px; }
.pros-card__emoji {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pros-card__info { flex: 1; min-width: 0; }
.pros-card__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 2px;
}
.pros-card__sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.pros-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Links */
.pros-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
}
.pros-link--primary {
  background: var(--primary-pale);
  color: var(--primary-dark);
  border: 1px solid rgba(33,150,243,0.15);
}
.pros-link--primary:hover { background: var(--primary-light); color: var(--white); }
.pros-link--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(0,0,0,0.10);
}
.pros-link--secondary:hover { background: var(--primary-pale); color: var(--primary); }
.pros-link--cita {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(33,150,243,0.20);
  padding: 5px 10px;
}
.pros-link--cita:hover { background: var(--primary-pale); }
.pros-link--danger {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid rgba(198,40,40,0.15);
}

/* Tool cards */
.pros-tools { display: flex; flex-direction: column; gap: 8px; }
.pros-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid rgba(33,150,243,0.08);
  border-radius: 14px;
  padding: 12px 14px;
}
.pros-tool__icon { font-size: 20px; flex-shrink: 0; }
.pros-tool > div { flex: 1; min-width: 0; }
.pros-tool__label { font-size: 13px; font-weight: 600; color: var(--primary-dark); }
.pros-tool__sub { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

/* Search */
.pros-search-row { width: 100%; }
.pros-search-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .pros-grid { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ── v66.22.0 — Sidebar bubbles plan-aware overrides ─────────────────────── */
/* When sidebar has both --sidebar and --pro/--plus classes, plan wins */
.aquo-bubbles--sidebar.aquo-bubbles--pro .aquo-bubble {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.80) 0%, rgba(224,230,240,.66) 32%, rgba(148,162,180,.24) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 8px 22px rgba(140,155,175,.10);
}
.aquo-bubbles--sidebar.aquo-bubbles--plus .aquo-bubble {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.78) 0%, rgba(255,228,160,.60) 35%, rgba(196,154,51,.22) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 10px 24px rgba(184,143,56,.14);
}

/* ── v66.22.0 — Citas confirm modal flex fix ───────────────────────────────*/
#citas-confirm-modal[style*="flex"] {
  display: flex !important;
}


/* ── AQUO Fluid Visual System ─────────────────────────────────────────────────
   .aquo-bubble-bg: container with organic fluid background blobs.
   Apply to module wrappers for ambient depth without visual noise.
   Usage: add class="aquo-bubble-bg" to any module container div.
   Variants: --aquo-bubble-intensity: 1 (default), 0.5 (subtle), 1.5 (rich)
   ─────────────────────────────────────────────────────────────────────────── */
.aquo-bubble-bg {
  position: relative;
  overflow: hidden;
}
.aquo-bubble-bg::before,
.aquo-bubble-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.aquo-bubble-bg > * { position: relative; z-index: 1; }

/* Blob 1 — upper right, primary blue */
.aquo-bubble-bg::before {
  width: 260px;
  height: 260px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle,
    rgba(33, 150, 243, calc(0.10 * var(--aquo-bubble-intensity, 1))),
    transparent 70%);
  filter: blur(32px);
}
/* Blob 2 — lower left, lighter */
.aquo-bubble-bg::after {
  width: 200px;
  height: 200px;
  bottom: -60px;
  left: -40px;
  background: radial-gradient(circle,
    rgba(144, 202, 249, calc(0.12 * var(--aquo-bubble-intensity, 1))),
    transparent 70%);
  filter: blur(28px);
}

/* Subtle variant — for analytics and data-dense screens */
.aquo-bubble-bg--subtle {
  --aquo-bubble-intensity: 0.45;
}

/* Rich variant — for hero/home screens */
.aquo-bubble-bg--rich {
  --aquo-bubble-intensity: 1.1;
}

/* Gold variant — for premium sections */
.aquo-bubble-bg--gold::before {
  background: radial-gradient(circle,
    rgba(201, 168, 76, calc(0.08 * var(--aquo-bubble-intensity, 1))),
    transparent 70%);
}
.aquo-bubble-bg--gold::after {
  background: radial-gradient(circle,
    rgba(201, 168, 76, calc(0.06 * var(--aquo-bubble-intensity, 1))),
    transparent 70%);
}

/* AQUO wordmark — mobile strength */
@media (max-width: 768px) {
  .sidebar-logo .logo-text {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* ── AQUO Fluid accents — card-level micro-bubbles ─────────────────────────── */
.card-fluid {
  position: relative;
  overflow: hidden;
}
.card-fluid::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  bottom: -50px;
  right: -50px;
  background: radial-gradient(circle,
    rgba(33, 150, 243, 0.07),
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  border-radius: 50%;
}
/* Premium card accent — gold halo */
.card-premium-fluid {
  position: relative;
  overflow: hidden;
}
.card-premium-fluid::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  top: -30px;
  right: -30px;
  background: radial-gradient(circle,
    rgba(201, 168, 76, 0.10),
    transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  border-radius: 50%;
}

/* ── AQUO Fluid animation — subtle pulse on ambient blobs ─────────────────── */
@keyframes aquo-pulse {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: 0.7; transform: scale(1.08); }
  100% { opacity: 1;   transform: scale(1); }
}
@keyframes aquo-drift {
  0%   { transform: translateY(0px) translateX(0px); }
  33%  { transform: translateY(-8px) translateX(5px); }
  66%  { transform: translateY(4px) translateX(-4px); }
  100% { transform: translateY(0px) translateX(0px); }
}

/* Apply only to rich variant — homepage blobs */
.aquo-bubble-bg--rich::before {
  animation: aquo-drift 12s ease-in-out infinite;
}
.aquo-bubble-bg--rich::after {
  animation: aquo-drift 16s ease-in-out infinite reverse;
}

/* Subtle pulse on premium card fluid accent */
.card-premium-fluid::after {
  animation: aquo-pulse 8s ease-in-out infinite;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .aquo-bubble-bg--rich::before,
  .aquo-bubble-bg--rich::after,
  .card-premium-fluid::after {
    animation: none;
  }
}

/* ── Hub water halo + header animation ─────────────────────────────────────── */
.hub-card-halo {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33,150,243,0.09), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  top: -20px; right: -10px;
}
/* Content header fluid accent when not on /dashboard */
.content-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.content-header::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  top: -100px; right: 0;
  background: radial-gradient(circle, rgba(33,150,243,0.05), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  border-radius: 50%;
}

/* ── Hub Salud — card water accent system ──────────────────────────────────── */
/* Each hub card gets a tiny water-drop SVG accent top-right, purely CSS */
.hub-card-water-accent {
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  pointer-events: none;
  opacity: 0.07;
  transition: opacity 0.2s ease;
}
.card-fluid:hover .hub-card-water-accent {
  opacity: 0.12;
}

/* Hub section divider — subtle wave underline */
.hub-section-wave {
  height: 2px;
  background: linear-gradient(90deg,
    rgba(33,150,243,0.3) 0%,
    rgba(33,150,243,0.08) 60%,
    transparent 100%);
  border-radius: 2px;
  margin: 4px 0 16px;
}

/* Hub hero isotipo backdrop */
.hub-hero-isotipo {
  position: absolute;
  top: -10px; right: 8px;
  width: 80px; height: 98px;
  opacity: 0.045;
  pointer-events: none;
  filter: blur(1px);
}

/* Drop section title stronger */
.aquo-drop-section-title-main {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.aquo-drop-section-title-secondary {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0 8px;
}

/* Drop grid tier overrides — inline style on drop-grid for primary/secondary tiers */
/* Primary 5-col */
.aquo-drop-grid[style*="repeat(5,"] {
  grid-template-columns: repeat(5, 1fr) !important;
}
/* Secondary 3-col */
.aquo-drop-grid[style*="repeat(3,"] {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ── AQUO Drop Bottom Navigation ───────────────────────────────────────────── */
/* Replaces classic tab bar. 5 AQUO-drop shaped items floating above content.   */

.aquo-bottom-nav {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(33,150,243,0.08);
  box-shadow: 0 -4px 24px rgba(33,150,243,0.06);
}
.aquo-bottom-nav__inner {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 8px;
}
.aquo-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 4px 8px;
  border-radius: 12px;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.aquo-bottom-nav__item:active {
  transform: scale(0.93);
}
.aquo-bottom-nav__drop {
  position: relative;
  width: 46px;
  height: 58px;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              filter 0.18s ease;
}
.aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  transform: translateY(-4px) scale(1.08);
}
.aquo-bottom-nav__svg {
  display: block;
  width: 46px;
  height: 58px;
  overflow: visible;
}
.aquo-bottom-nav__icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}
/* Drop shadow per theme */
.aquo-bottom-nav__drop--blue   { filter: drop-shadow(0 4px 10px rgba(33,150,243,0.22)); }
.aquo-bottom-nav__drop--rose   { filter: drop-shadow(0 4px 10px rgba(216,27,96,0.18)); }
.aquo-bottom-nav__drop--teal   { filter: drop-shadow(0 4px 10px rgba(0,150,136,0.18)); }
.aquo-bottom-nav__drop--gold   { filter: drop-shadow(0 4px 10px rgba(201,169,76,0.22)); }
.aquo-bottom-nav__drop--silver { filter: drop-shadow(0 4px 10px rgba(100,116,139,0.14)); }

.aquo-bottom-nav__item--active .aquo-bottom-nav__drop--blue   { filter: drop-shadow(0 8px 18px rgba(33,150,243,0.38)); }
.aquo-bottom-nav__item--active .aquo-bottom-nav__drop--rose   { filter: drop-shadow(0 8px 18px rgba(216,27,96,0.30)); }
.aquo-bottom-nav__item--active .aquo-bottom-nav__drop--teal   { filter: drop-shadow(0 8px 18px rgba(0,150,136,0.30)); }
.aquo-bottom-nav__item--active .aquo-bottom-nav__drop--gold   { filter: drop-shadow(0 8px 18px rgba(201,169,76,0.36)); }
.aquo-bottom-nav__item--active .aquo-bottom-nav__drop--silver { filter: drop-shadow(0 8px 18px rgba(100,116,139,0.24)); }

.aquo-bottom-nav__label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s;
}
.aquo-bottom-nav__item--active .aquo-bottom-nav__label {
  color: var(--primary-dark);
  font-weight: 700;
}

/* Show on mobile — same breakpoint as old bottom-tabs */
@media (max-width: 768px) {
  .aquo-bottom-nav { display: block; }
  /* Adjust content bottom padding to clear nav */
  .main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Hide old .bottom-tabs if any legacy instance remains */
.bottom-tabs { display: none !important; }

/* ── Mobile hero — layout centered on small screens ────────────────────────── */
@media (max-width: 700px) {
  .hero-content { text-align: center; }
  .hero-cta { justify-content: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-mobile-iso { display: block !important; }
}

/* Module sections — subtle blue top accent for visual separation */
.content-body > div:first-child {
  padding-top: 4px;
}



/* ============================================================
   AQUO™ v66.51 — Control Visual y Jerarquía Real
   Dirección sustractiva + water states como comportamiento
   Lo que se quita: shimmer, grain, depth-glow, glow ::after
   Lo que se introduce: water states, jerarquía de 3 niveles,
   silencio entre nombre y cita
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   TOKENS — idénticos a v66.50, consolidados
──────────────────────────────────────────────────────────────── */
:root {
  /* Tinta azul AQUO */
  --ink-deep:   #1A3A52;
  --ink-mid:    #2E6080;
  --ink-soft:   #4A80A0;
  --ink-ghost:  #90B8CC;

  /* Free */
  --hero-free-a:      #D8EDF8;
  --hero-free-b:      #9FCFE8;
  --hero-free-deep:   #60AEDB;
  --hero-free-glow:   rgba(25,118,210,0.18);
  --hero-free-name:   #1040A0;
  --hero-free-badge:  rgba(25,118,210,0.09);
  --hero-free-badget: #0C3380;
  --hero-free-quote:  rgba(25,118,210,0.22);

  /* Premium */
  --hero-pro-a:       #E6ECF2;
  --hero-pro-b:       #BEC8D4;
  --hero-pro-deep:    #90A8BC;
  --hero-pro-glow:    rgba(84,110,122,0.16);
  --hero-pro-name:    #2C3E50;
  --hero-pro-badge:   rgba(84,110,122,0.09);
  --hero-pro-badget:  #1A2E3A;
  --hero-pro-quote:   rgba(84,110,122,0.20);

  /* Plus — alineado sidebar */
  --hero-plus-a:      #F5EDD6;
  --hero-plus-b:      #DBBF78;
  --hero-plus-deep:   #C4A050;
  --hero-plus-glow:   rgba(184,143,56,0.20);
  --hero-plus-name:   #6A4A00;
  --hero-plus-badge:  rgba(184,143,56,0.09);
  --hero-plus-badget: #4A3400;
  --hero-plus-quote:  rgba(184,143,56,0.26);

  /* Grid */
  --grid-card:    #F5F4F1;
  --grid-border:  rgba(0,0,0,0.06);
  --grid-val:     #1E4060;
  --grid-label:   #88A4B8;
  --grid-muted:   #A8C0CC;
}

/* ─────────────────────────────────────────────────────────────
   GAP
──────────────────────────────────────────────────────────────── */
.home-dashboard-stack { gap: 36px !important; }
@media (max-width: 480px) { .home-dashboard-stack { gap: 20px !important; } }

/* ─────────────────────────────────────────────────────────────
   STATUS HERO — espacio fluido, no bloque
   Sin shimmer · sin grain · sin depth-glow div
   Solo: gradiente + luz especular + burbujas en la base
──────────────────────────────────────────────────────────────── */
.status-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  padding: 36px 30px 30px;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  border: none;

  /* Gradiente vertical — columna de agua: luz en superficie, profundidad abajo */
  background: linear-gradient(180deg,
    var(--hero-free-a)    0%,
    var(--hero-free-b)   60%,
    var(--hero-free-deep) 100%);

  /* Sombra difusa: el HERO tiene peso sin borde */
  box-shadow:
    0 16px 52px var(--hero-free-glow),
    0 3px 0 rgba(255,255,255,0.85) inset;
}
.status-hero > * { position: relative; z-index: 2; }

/* Luz especular — única capa atmosférica que queda */
.status-hero::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.52) 0%,
    transparent 62%);
  z-index: 0; pointer-events: none;
}

/* Tiers */
.status-hero.tier-premium {
  background: linear-gradient(180deg,
    var(--hero-pro-a) 0%, var(--hero-pro-b) 60%, var(--hero-pro-deep) 100%);
  box-shadow: 0 16px 52px var(--hero-pro-glow), 0 3px 0 rgba(255,255,255,0.85) inset;
}
.status-hero.tier-premium::before { background: radial-gradient(circle, rgba(255,255,255,0.48) 0%, transparent 62%); }

.status-hero.tier-plus {
  background: linear-gradient(180deg,
    var(--hero-plus-a) 0%, var(--hero-plus-b) 60%, var(--hero-plus-deep) 100%);
  box-shadow: 0 16px 52px var(--hero-plus-glow), 0 3px 0 rgba(255,255,255,0.85) inset;
}
.status-hero.tier-plus::before { background: radial-gradient(circle, rgba(255,255,255,0.50) 0%, transparent 62%); }

/* Isotipo — fondo puro, apenas visible */
.status-hero__isotipo {
  position: absolute;
  right: -28px; bottom: -36px;
  width: 210px; height: auto;
  opacity: 0.055;
  z-index: 1; pointer-events: none;
  object-fit: contain; overflow: visible;
  filter: blur(3px) saturate(0.2);
}

/* ─────────────────────────────────────────────────────────────
   WATER STATES — comportamiento visual, no decoración
   Tres estados físicos del agua: fluido · vapor · hielo
──────────────────────────────────────────────────────────────── */

/*
  AGUA — estado fluido (indicador verde: todo bien)
  Burbujas activas, gradiente vivo, movimiento natural
*/
.aquo-state--agua .aquo-bubbles { opacity: 1; }
.aquo-state--agua .aquo-bubble  { animation-play-state: running; }
/* Burbujas sólo en la base — ascendiendo desde la profundidad */
.aquo-state--agua .aquo-bubble--1 { opacity: 0.50; bottom: -20px; top: auto; }
.aquo-state--agua .aquo-bubble--2 { opacity: 0.36; bottom: -10px; top: auto; right: 15%; }
.aquo-state--agua .aquo-bubble--3 { opacity: 0.28; bottom: -5px;  top: auto; right: 30px; }
.aquo-state--agua .aquo-bubble--4 { opacity: 0.18; bottom: 10px;  top: auto; left: 40%; }
/* Las burbujas superiores desaparecen en agua — están en el fondo */
.aquo-state--agua .aquo-bubble--5,
.aquo-state--agua .aquo-bubble--6,
.aquo-state--agua .aquo-bubble--7,
.aquo-state--agua .aquo-bubble--8 { opacity: 0; }

/*
  VAPOR — estado difuso (indicador amarillo: atención)
  Burbujas con más blur, movimiento lento, gradiente suavizado
*/
.aquo-state--vapor .aquo-bubbles { opacity: 0.6; }
.aquo-state--vapor .aquo-bubble {
  filter: blur(4px);           /* más difuso — vapor */
  animation-duration: 24s;     /* más lento */
}
.aquo-state--vapor .aquo-bubble--1 { opacity: 0.30; }
.aquo-state--vapor .aquo-bubble--2 { opacity: 0.22; }
.aquo-state--vapor .aquo-bubble--3 { opacity: 0.16; }
.aquo-state--vapor .aquo-bubble--4,
.aquo-state--vapor .aquo-bubble--5,
.aquo-state--vapor .aquo-bubble--6,
.aquo-state--vapor .aquo-bubble--7,
.aquo-state--vapor .aquo-bubble--8 { opacity: 0; }

/*
  HIELO — estado cristalino (indicador rojo: pendiente / sin datos)
  Sin burbujas, sin movimiento. Gradiente frío estático.
  La quietud es el mensaje.
*/
.aquo-state--hielo .aquo-bubbles { display: none; }
/* Cristalización visual: ::after como reflejo de hielo */
.aquo-state--hielo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.12) 0%,
      transparent 40%,
      rgba(200,225,240,0.08) 70%,
      transparent 100%);
  z-index: 1; pointer-events: none;
}
/* El gradiente del HERO rojo es más frío/cristalino */
.status-hero--red.aquo-state--hielo {
  background: linear-gradient(180deg,
    #EAF2F8 0%,
    #C8DCE8 55%,
    #A8C4D8 100%);
}

/* ─────────────────────────────────────────────────────────────
   INNER — jerarquía de 3 niveles con silencio entre ellos
──────────────────────────────────────────────────────────────── */
.status-hero__inner { display: flex; flex-direction: column; flex: 1; }

/* NIVEL 1: NOMBRE — protagonista absoluto */
.status-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;   /* silencio generoso antes de la cita */
}
.status-hero__greeting { min-width: 0; flex: 1; }

.status-hero__saludo {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 300;
  color: var(--ink-soft);
  margin: 0 0 2px;
  line-height: 1;
  letter-spacing: 0.025em;
}
/* EL NOMBRE — máxima presencia en todo el dashboard */
.status-hero__saludo strong {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 48px);  /* más grande — es el ancla */
  font-weight: 600;
  color: var(--hero-free-name);
  display: block;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: 1px;
}
.tier-premium .status-hero__saludo strong { color: var(--hero-pro-name); }
.tier-plus    .status-hero__saludo strong { color: var(--hero-plus-name); }

/* Fecha — casi invisible, solo contexto */
.status-hero__fecha {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(73, 104, 138, 0.78);
  margin: 7px 0 0;
  letter-spacing: 0.03em;
  line-height: 1.2;
  opacity: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.42);
}

/* Controles */
.status-hero__top-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0;
}
.status-hero__dot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 10px; border-radius: 11px;
  background: rgba(255,255,255,0.44);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.72);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.status-hero__dot:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20,72,160,0.10); }
.status-hero__dot-symbol { font-size: 15px; line-height: 1; }
.status-hero__dot-label  { font-size: 7px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }

.status-hero__plan-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 99px;
  font-size: 7px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  background: var(--hero-free-badge); color: var(--hero-free-badget);
  border: 1px solid rgba(25,118,210,0.12);
}
.tier-premium .status-hero__plan-badge { background: var(--hero-pro-badge);  color: var(--hero-pro-badget);  border-color: rgba(84,110,122,0.14); }
.tier-plus    .status-hero__plan-badge { background: var(--hero-plus-badge); color: var(--hero-plus-badget); border-color: rgba(184,143,56,0.18); }

/* NIVEL 2: CITA — protagonista emocional */
/* Silencio claro entre nombre y cita. Solo tipografía, sin caja. */
.status-hero__cita {
  display: grid;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.35vw, 27px);
  font-style: italic;
  font-weight: 400;
  color: rgba(58, 89, 122, 0.94);
  margin: 0 0 28px;
  padding: 0 0 0 16px;
  border: none; background: none;
  border-left: 2px solid var(--hero-free-quote);
  line-height: 1.7;
  letter-spacing: 0.005em;
  max-width: 760px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.48);
}
.status-hero__cita-text { display:block; }
.status-hero__cita-author {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  color: rgba(68, 97, 128, 0.88);
}
.tier-premium .status-hero__cita { border-left-color: var(--hero-pro-quote); }
.tier-plus    .status-hero__cita { border-left-color: var(--hero-plus-quote); }

/* Separador sutil — respiración */
.status-hero__divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(25,118,210,0.10) 0%, transparent 60%);
  margin: 0 0 16px; border: none;
}

/* NIVEL 3: ESTADO — información secundaria, sin peso */
.status-hero__headline {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 20px;
  padding: 0; background: none; border: none; box-shadow: none;
}
.status-hero__eyebrow {
  font-size: 8px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-ghost); margin: 0;
}
.status-hero__state {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.7vw, 17px);   /* más pequeño — nivel 3 */
  font-weight: 400;
  color: var(--ink-deep);
  margin: 0; line-height: 1.22; letter-spacing: -0.005em;
}
.status-hero__msg {
  font-size: 12.5px; font-weight: 300;
  color: var(--ink-soft);
  margin: 0; line-height: 1.58;
}

/* CTA — invita, no interrumpe */
.status-hero__action {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.05em;
  padding: 9px 22px;
  border-radius: 99px;
  background: rgba(255,255,255,0.44);
  border: 1px solid rgba(255,255,255,0.70);
  color: var(--ink-mid);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(25,118,210,0.10), 0 1px 0 rgba(255,255,255,0.88) inset;
  transition: background 0.20s, box-shadow 0.20s, transform 0.14s, color 0.20s;
  cursor: pointer; text-decoration: none; outline: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.status-hero__action:hover {
  background: rgba(255,255,255,0.65);
  color: var(--ink-deep);
  box-shadow: 0 5px 16px rgba(25,118,210,0.14), 0 1px 0 rgba(255,255,255,0.88) inset;
  transform: translateY(-1px);
}
.status-hero__action-arrow { display: inline-block; transition: transform 0.20s; font-size: 13px; line-height: 1; opacity: 0.60; }
.status-hero__action:hover .status-hero__action-arrow { transform: translateX(3px); }
.status-hero--green  .status-hero__action { color: #2A5838; border-color: rgba(42,88,56,0.26); }
.status-hero--yellow .status-hero__action { color: #704018; border-color: rgba(112,64,24,0.22); }

@media (max-width: 768px) {
  .status-hero { padding: 28px 20px 24px; min-height: 380px; }
  .status-hero__saludo strong { font-size: 28px; }
  .status-hero__cita { font-size: 16px; }
}
@media (max-width: 480px) {
  .status-hero { padding: 22px 15px 20px; min-height: 340px; border-radius: 20px; }
  .status-hero__saludo strong { font-size: 26px; }
  .status-hero__cita { font-size: 15px; margin-bottom: 22px; }
  .status-hero__top { margin-bottom: 22px; }
}

/* ─────────────────────────────────────────────────────────────
   MAIN GRID — idéntico a v66.50, sin cambios
──────────────────────────────────────────────────────────────── */
.main-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mg-card {
  background: var(--grid-card); border: 1px solid var(--grid-border);
  border-radius: 12px; padding: 11px 11px 10px;
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; transition: background 0.15s, transform 0.13s, box-shadow 0.15s;
  min-height: 74px; box-shadow: none;
}
.mg-card:hover { background: #FEFEFE; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
.mg-card__head  { display: flex; align-items: center; gap: 5px; }
.mg-card__icon  { font-size: 11px; line-height: 1; flex-shrink: 0; opacity: 0.40; }
.mg-card__label { font-size: 8px; font-weight: 600; color: var(--grid-label); text-transform: uppercase; letter-spacing: .06em; }
.mg-card__value { font-family: var(--font-display); font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--grid-val); line-height: 1.0; letter-spacing: -0.02em; }
.mg-card__value--water { color: #1448A0; }
.mg-card__value--sleep { color: #512DA8; }
.mg-card__value--done  { color: #2E7D32; }
.mg-card__unit  { font-size: 8.5px; font-weight: 400; color: var(--grid-muted); margin-left: 1px; }
.mg-card__bar   { height: 2px; background: rgba(0,0,0,0.07); border-radius: 99px; overflow: hidden; }
.mg-card__bar-fill { height: 100%; background: linear-gradient(90deg, #90CAF9, #64B5F6); border-radius: 99px; transition: width 0.5s ease; }
.mg-card__bar-fill--done { background: linear-gradient(90deg, #A5D6A7, #81C784); }
.mg-card__meta  { font-size: 9px; font-weight: 400; color: var(--grid-muted); line-height: 1.3; }
.mg-card__empty { font-size: 9.5px; font-weight: 300; color: var(--grid-muted); font-style: italic; }
.mg-card__cta   { margin-top: auto; font-size: 9px; font-weight: 500; color: #1448A0; }
.mg-sleep-dots  { display: flex; gap: 3px; }
.mg-sleep-dot   { width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,0.08); }
.mg-sleep-dot--on { background: #7E57C2; }
.mg-trend       { font-size: 7.5px; font-weight: 600; padding: 1px 5px; border-radius: 5px; align-self: flex-start; }
.mg-trend--stable { background: rgba(20,72,160,0.07); color: #1448A0; }
.mg-trend--up     { background: rgba(245,124,0,0.07);  color: #D84315; }
.mg-trend--down   { background: rgba(46,125,50,0.07);  color: #2E7D32; }
@media (max-width: 480px) {
  .main-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mg-card--weight { grid-column: 1 / -1; min-height: auto; }
  .mg-card__value { font-size: 17px; }
}

/* ─────────────────────────────────────────────────────────────
   QUICK ACCESS + CONTEXTUAL
──────────────────────────────────────────────────────────────── */
/* ── QUICK ACCESS ─────────────────────────────────────────────────────────── */
.quick-access { display: flex; flex-direction: column; gap: 7px; }
.quick-access__title { font-size: 7.5px; font-weight: 600; color: var(--grid-label); text-transform: uppercase; letter-spacing: .10em; margin: 0; }
.quick-access__row {
  display: flex; gap: 5px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
.quick-access__row::-webkit-scrollbar { display: none; }
.qa-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 9px; border-radius: 10px;
  background: var(--grid-card); border: 1px solid var(--grid-border);
  cursor: pointer; flex-shrink: 0; min-width: 48px;
  transition: background 0.13s, transform 0.12s;
}
.qa-item:hover { background: #FEFEFE; transform: translateY(-1px); }
.qa-item__icon  { font-size: 13px; line-height: 1; opacity: 0.55; }
.qa-item__label { font-size: 7px; font-weight: 500; color: var(--grid-label); text-align: center; white-space: nowrap; }

/* Tablet (≥768px) — ítems más grandes, se pueden mostrar como grid */
@media (min-width: 768px) {
  .quick-access { gap: 10px; padding: 18px 20px 20px; }
  .contextual-block { gap: 10px; padding: 18px 20px 20px; }
  .quick-access__title { font-size: 10px; }
  .quick-access__row { gap: 8px; flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
  .qa-item { padding: 12px 14px; min-width: 64px; border-radius: 12px; gap: 5px; flex: 1 0 auto; }
  .qa-item__icon  { font-size: 20px; opacity: 0.7; }
  .qa-item__label { font-size: 10px; }
}

/* Desktop (≥1024px) — tamaño completo */
@media (min-width: 1024px) {
  .quick-access__title { font-size: 11px; }
  .quick-access__row { gap: 10px; }
  .qa-item { padding: 14px 18px; min-width: 76px; border-radius: 14px; gap: 6px; }
  .qa-item__icon  { font-size: 22px; opacity: 0.75; }
  .qa-item__label { font-size: 11px; }
}

/* ── CONTEXTUAL BLOCK ─────────────────────────────────────────────────────── */
.contextual-block { display: flex; flex-direction: column; gap: 7px; border-radius: 24px; padding: 14px 16px 16px; border: 1px solid rgba(126,165,218,0.15); box-shadow: 0 8px 20px rgba(18, 63, 122, 0.05); }
.contextual-block__title { font-size: 7.5px; font-weight: 600; color: var(--grid-label); text-transform: uppercase; letter-spacing: .10em; margin: 0; }
.ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 6px; }
.ctx-card { background: var(--grid-card); border: 1px solid var(--grid-border); border-left: 2px solid var(--ctx-color, #90CAF9); border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: background 0.13s, transform 0.12s; display: flex; flex-direction: column; gap: 3px; }
.ctx-card:hover { background: #FEFEFE; transform: translateY(-1px); }
.ctx-card__head  { display: flex; align-items: center; gap: 4px; }
.ctx-card__emoji { font-size: 10px; line-height: 1; flex-shrink: 0; opacity: 0.65; }
.ctx-card__label { font-size: 7.5px; font-weight: 600; color: var(--grid-label); text-transform: uppercase; letter-spacing: .05em; }
.ctx-card__value { font-size: 11.5px; font-weight: 500; color: var(--grid-val); line-height: 1.2; }
.ctx-card__meta  { font-size: 9px; font-weight: 300; color: var(--ink-soft); line-height: 1.4; }
.ctx-card__muted { font-size: 9px; font-weight: 300; color: var(--grid-muted); font-style: italic; }
@media (min-width: 768px) {
  .contextual-block { gap: 10px; }
  .contextual-block__title { font-size: 10px; }
  .ctx-grid { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .ctx-card { padding: 13px 14px; gap: 5px; }
  .ctx-card__emoji { font-size: 14px; }
  .ctx-card__label { font-size: 10px; }
  .ctx-card__value { font-size: 14px; }
  .ctx-card__meta  { font-size: 11px; }
}
@media (max-width: 480px) { .ctx-grid { grid-template-columns: 1fr 1fr; } }


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Visual Theme System v66.52
   Tres temas: blue (default/free) · silver (premium) · gold (premium_plus)
   Aplicado via data-theme="blue|silver|gold" en .app-layout
   El plan actúa como puerta de acceso — el CSS solo pinta.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── THEME: BLUE (Free, default) — ya cubierto por los estilos base ──────── */
/* No se necesita selector extra: el sistema base ES el tema azul */

/* ── THEME: SILVER (Premium) ─────────────────────────────────────────────── */

.app-layout[data-theme="silver"] {
  /* Sidebar */
  --sidebar-bg-from: #F0F2F5;
  --sidebar-bg-to:   #E8ECF0;
}

.app-layout[data-theme="silver"] .sidebar {
  background: linear-gradient(180deg,
    #F4F6F8 0%,
    #EDF0F3 55%,
    #E8ECF1 100%);
  border-right: 1px solid rgba(160,172,186,0.22);
  box-shadow: 4px 0 24px rgba(78,89,104,0.07), 1px 0 0 rgba(255,255,255,0.55) inset;
}

.app-layout[data-theme="silver"] .sidebar-logo .logo-text {
  color: var(--tier-pro-title);
}

.app-layout[data-theme="silver"] .sidebar-logo::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(160,172,186,0.30) 50%,
    transparent 100%);
}

.app-layout[data-theme="silver"] .nav-section-title {
  color: rgba(109,119,130,0.75);
}

.app-layout[data-theme="silver"] .nav-item {
  color: var(--tier-pro-title);
}

.app-layout[data-theme="silver"] .nav-item:hover {
  background: rgba(160,172,186,0.10);
  color: #2D3748;
  border-left-color: rgba(160,172,186,0.35);
}

.app-layout[data-theme="silver"] .nav-item.active {
  background: rgba(160,172,186,0.14);
  color: #2D3748;
  border-left-color: var(--tier-pro-accent);
  font-weight: 600;
}

.app-layout[data-theme="silver"] .sidebar-footer {
  border-top-color: rgba(160,172,186,0.15);
}

/* Header silver */
.app-layout[data-theme="silver"] .content-header {
  background: linear-gradient(135deg,
    #E8EDF2 0%,
    #EDF1F5 60%,
    #F0F3F6 100%);
  border-bottom-color: rgba(160,172,186,0.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 4px 24px rgba(78,89,104,0.08);
}

/* Main content background silver */
.app-layout[data-theme="silver"] .main-content {
  background: linear-gradient(160deg, #E8EDF2 0%, #EEF1F5 40%, #F2F4F7 100%);
}

/* Bottom tabs silver */
.app-layout[data-theme="silver"] .aquo-bottom-nav {
  background: rgba(240,243,246,0.97);
  border-top-color: rgba(160,172,186,0.18);
}

.app-layout[data-theme="silver"] .bottom-tab.active,
.app-layout[data-theme="silver"] .aquo-bottom-nav__item--active .aquo-bottom-nav__label {
  color: var(--tier-pro-accent);
}

/* Grid cards silver */
.app-layout[data-theme="silver"] .mg-card,
.app-layout[data-theme="silver"] .qa-item,
.app-layout[data-theme="silver"] .ctx-card {
  background: rgba(255,255,255,0.88);
  border-color: rgba(160,172,186,0.18);
}

/* ── THEME: GOLD (Premium Plus) ──────────────────────────────────────────── */

.app-layout[data-theme="gold"] .sidebar {
  background: linear-gradient(180deg,
    #FDFAF3 0%,
    #FAF5E8 55%,
    #F7F0DE 100%);
  border-right: 1px solid rgba(201,168,76,0.18);
  box-shadow: 4px 0 28px rgba(140,110,42,0.07), 1px 0 0 rgba(255,255,255,0.70) inset;
}

.app-layout[data-theme="gold"] .sidebar-logo .logo-text {
  color: var(--tier-plus-title);
}

.app-layout[data-theme="gold"] .sidebar-logo::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,0.28) 50%,
    transparent 100%);
}

.app-layout[data-theme="gold"] .nav-section-title {
  color: rgba(155,129,80,0.70);
}

.app-layout[data-theme="gold"] .nav-item {
  color: var(--tier-plus-title);
}

.app-layout[data-theme="gold"] .nav-item:hover {
  background: rgba(201,168,76,0.08);
  color: var(--tier-plus-title);
  border-left-color: rgba(201,168,76,0.30);
}

.app-layout[data-theme="gold"] .nav-item.active {
  background: rgba(201,168,76,0.11);
  color: var(--tier-plus-title);
  border-left-color: var(--tier-plus-honey);
  font-weight: 600;
}

.app-layout[data-theme="gold"] .sidebar-footer {
  border-top-color: rgba(201,168,76,0.12);
}

/* Header gold */
.app-layout[data-theme="gold"] .content-header {
  background: linear-gradient(135deg,
    rgba(255,253,248,0.98) 0%,
    rgba(252,247,236,0.95) 55%,
    rgba(249,242,224,0.92) 100%);
  border-bottom-color: rgba(201,168,76,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 28px rgba(184,150,62,0.10);
}

/* Sutil shimmer dorado en el header */
.app-layout[data-theme="gold"] .content-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 85% 50%,
    rgba(201,168,76,0.06) 0%,
    transparent 70%);
  pointer-events: none;
}

/* Main content background gold — marfil muy suave, no opresivo */
.app-layout[data-theme="gold"] .main-content {
  background: linear-gradient(160deg,
    #FBF8F0 0%,
    #F9F5EA 35%,
    #F7F3E5 100%);
}

/* Bottom nav gold */
.app-layout[data-theme="gold"] .aquo-bottom-nav {
  background: rgba(253,250,243,0.97);
  border-top-color: rgba(201,168,76,0.15);
}

.app-layout[data-theme="gold"] .bottom-tab.active,
.app-layout[data-theme="gold"] .aquo-bottom-nav__item--active .aquo-bottom-nav__label {
  color: var(--tier-plus-honey);
}

/* Grid cards gold */
.app-layout[data-theme="gold"] .mg-card,
.app-layout[data-theme="gold"] .qa-item,
.app-layout[data-theme="gold"] .ctx-card {
  background: rgba(255,255,255,0.90);
  border-color: rgba(201,168,76,0.14);
}

/* ── Selector de tema en Mi Cuenta ───────────────────────────────────────── */

.theme-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.18s, transform 0.18s;
  border: none;
  background: none;
  padding: 0;
}

.theme-swatch:hover { opacity: 1; transform: translateY(-1px); }
.theme-swatch.active { opacity: 1; }
.theme-swatch.disabled { opacity: 0.28; cursor: not-allowed; pointer-events: none; }

.theme-swatch__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.theme-swatch.active .theme-swatch__dot {
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.theme-swatch[data-theme="blue"]   { color: var(--primary); }
.theme-swatch[data-theme="silver"] { color: var(--tier-pro-accent); }
.theme-swatch[data-theme="gold"]   { color: var(--tier-plus-honey); }

.theme-swatch[data-theme="blue"]   .theme-swatch__dot {
  background: linear-gradient(135deg, #90CAF9 0%, #2196F3 100%);
}
.theme-swatch[data-theme="silver"] .theme-swatch__dot {
  background: linear-gradient(135deg, #E0E5EA 0%, #A8B2BC 100%);
}
.theme-swatch[data-theme="gold"]   .theme-swatch__dot {
  background: linear-gradient(135deg, #F0D88A 0%, #B88F38 100%);
}

.theme-swatch__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.theme-swatch.active .theme-swatch__label {
  font-weight: 700;
  color: var(--text-dark);
}

/* Checkmark sobre el swatch activo */
.theme-swatch.active .theme-swatch__dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Candado para swatches bloqueados */
.theme-swatch.disabled .theme-swatch__dot::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Transición suave del tema al aplicarse */
.app-layout {
  transition: background-color 0.35s ease;
}
.sidebar, .content-header, .main-content {
  transition: background 0.35s ease, border-color 0.25s ease, box-shadow 0.35s ease;
}


/* ── BLUE THEME RESET ────────────────────────────────────────────────────
   Cuando el usuario tiene plan premium_plus pero theme=blue (sin data-theme),
   los estilos plan-based champagne/gold deben quedar neutralizados.
   Selector: .app-layout sin data-theme = blue activo.
   ────────────────────────────────────────────────────────────────────── */
.app-layout:not([data-theme])[data-plan="premium_plus"] .sidebar {
  background: linear-gradient(180deg, #DCF0FF 0%, #D4EAFF 60%, #CCE4FF 100%);
  border-right-color: rgba(33,150,243,0.20);
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .sidebar-logo {
  border-bottom-color: rgba(33,150,243,0.15);
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .sidebar-footer {
  border-top-color: rgba(33,150,243,0.12);
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .content-header {
  background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%);
  border-bottom-color: rgba(33,150,243,0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 4px 20px rgba(33,150,243,0.08);
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .nav-section-title {
  color: var(--text-secondary);
  opacity: 0.7;
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .nav-item.active {
  border-left-color: var(--primary);
  background: var(--primary-pale);
  color: var(--primary-dark);
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .bottom-tab.active {
  color: var(--primary);
}
.app-layout:not([data-theme])[data-plan="premium_plus"] .greeting span {
  color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Liquid Light Controls System v66.54
   Controles interactivos únicamente. Superficies grandes: sin cambios.
   Concepto: wellness premium, aireado, acuoso. Sin glossy. Sin metal duro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 — BOTONES PRIMARY ────────────────────────────────────────────
   Azul más acuoso, menos saturado, glow reducido.
   Gradiente suave de agua clara → azul medio, sin profundidad agresiva.
   ──────────────────────────────────────────────────────────────────────── */

/* Highlight compartido — línea tenue, no línea brillante */
.btn-primary::before,
.btn-gold::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1px;
  background: rgba(255,255,255,0.32);
  border-radius: 1px;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(165deg,
    #64B5F6 0%,   /* agua clara, no cyan agresivo */
    #42A5F5 40%,  /* azul mid suave */
    #2196F3 100%  /* azul base — no oscuro */
  );
  border-color: rgba(33,101,178,0.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 2px 10px rgba(33,150,243,0.18),  /* glow reducido */
    0 1px 2px rgba(33,101,178,0.10);
  min-height: 44px;
}
.btn-primary:hover {
  background: linear-gradient(165deg, #7EC8FA 0%, #5BB8FF 40%, #42A5F5 100%);
  border-color: rgba(33,101,178,0.44);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 3px 14px rgba(33,150,243,0.24),
    0 1px 3px rgba(33,101,178,0.12);
  transform: translateY(-1px);
}
.btn-primary:active {
  background: linear-gradient(165deg, #42A5F5 0%, #2196F3 60%, #1E88E5 100%);
  box-shadow:
    0 1px 4px rgba(33,101,178,0.14) inset,
    0 1px 4px rgba(33,150,243,0.10);
  transform: scale(0.975) translateY(0);
}

/* ── FASE 2 — BOTONES GOLD ───────────────────────────────────────────────
   Champán pálido / miel suave. Sin metal. Sin marrón profundo.
   El gold ahora es cálido y aireado, no pesado.
   ──────────────────────────────────────────────────────────────────────── */
.btn-gold {
  background: linear-gradient(165deg,
    #EDD991 0%,   /* miel pálida / champán claro */
    #D4B564 40%,  /* dorado suave */
    #C9A84C 100%  /* base gold — nunca marrón */
  );
  border-color: rgba(168,130,50,0.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 2px 10px rgba(201,168,76,0.18),
    0 1px 2px rgba(168,130,50,0.10);
  font-weight: 700;
  min-height: 44px;
}
.btn-gold:hover {
  background: linear-gradient(165deg, #F5E6A0 0%, #EDD991 40%, #D4B564 100%);
  border-color: rgba(168,130,50,0.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 3px 14px rgba(201,168,76,0.24);
  transform: translateY(-1px);
}
.btn-gold:active {
  background: linear-gradient(165deg, #D4B564 0%, #C9A84C 60%, #B89840 100%);
  box-shadow: 0 1px 4px rgba(168,130,50,0.16) inset;
  transform: scale(0.975) translateY(0);
}

/* ── FASE 3 — SECONDARY Y PILLS ──────────────────────────────────────────
   Más translúcidos, borde más tenue, sin peso visual.
   ──────────────────────────────────────────────────────────────────────── */
.btn-secondary {
  background: rgba(33,150,243,0.04);
  border-color: rgba(33,150,243,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 1px 4px rgba(33,150,243,0.05);
  min-height: 44px;
}
.btn-secondary:hover {
  background: rgba(33,150,243,0.08);
  border-color: rgba(33,150,243,0.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.88) inset,
    0 2px 8px rgba(33,150,243,0.09);
  transform: translateY(-1px);
}
.btn-secondary:active {
  background: rgba(33,150,243,0.12);
  box-shadow: 0 1px 3px rgba(33,150,243,0.10) inset;
  transform: scale(0.975) translateY(0);
}

/* btn-sm táctil solo en móvil */
@media (max-width: 768px) {
  .btn-sm { min-height: 44px; }
}

/* ── FASE 3b — BADGES ────────────────────────────────────────────────────
   Sin cambios de forma, solo glass más aireado.
   ──────────────────────────────────────────────────────────────────────── */
.badge-premium {
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.64) inset;
}
.badge-free {
  background: rgba(33,150,243,0.05);
  border: 1px solid rgba(33,150,243,0.13);
  box-shadow: 0 1px 0 rgba(255,255,255,0.64) inset;
}

/* ── FASE 4 — TOGGLES Y SWATCHES ────────────────────────────────────────
   Toggles: neutros, sin dramatismo. Knob perla mate, no brillante.
   Swatches: satinado plano, highlight muy fino. Sin efecto bola 3D.
   ──────────────────────────────────────────────────────────────────────── */

/* Toggle track — neutro muy suave */
.aquo-toggle__slider {
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: none;
}
/* Toggle knob — perla mate */
.aquo-toggle__slider:before {
  background: #f8f8f8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
/* Toggle checked — rojo emergencia, sin glow exagerado */
.aquo-toggle input:checked + .aquo-toggle__slider {
  background: rgba(198,40,40,0.72);
  border-color: rgba(140,20,20,0.22);
  box-shadow: none;
}

/* Swatches — acabado satinado, highlight muy fino */
.theme-swatch__dot {
  box-shadow: 0 1px 0 rgba(255,255,255,0.40) inset;
}
.theme-swatch.active .theme-swatch__dot {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.44) inset,
    0 0 0 2.5px rgba(0,0,0,0.06);
}
/* Blue: agua desaturada, no cyan brillante */
.theme-swatch[data-theme="blue"] .theme-swatch__dot {
  background: linear-gradient(145deg, #BBDEFB 0%, #64B5F6 50%, #2196F3 100%);
}
/* Silver: perla fría, casi plana */
.theme-swatch[data-theme="silver"] .theme-swatch__dot {
  background: linear-gradient(145deg, #F4F6F8 0%, #CBD5E0 55%, #9EABB8 100%);
}
/* Gold: champán pálido, nunca amarillo fuerte */
.theme-swatch[data-theme="gold"] .theme-swatch__dot {
  background: linear-gradient(145deg, #F5E6A8 0%, #D4B564 55%, #B89840 100%);
}

/* ── BOTTOM NAV ACTIVE — ya definido en v66.53, se mantiene sin cambios ─ */

@media (max-width: 900px) {
  #menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  .aquo-bottom-nav__inner { gap: 6px; padding: 0 8px; }
  .aquo-bottom-nav__item { min-width: 0; }
  .aquo-bottom-nav__label { font-size: 10px; }
}
@media (max-width: 640px) {
  .aquo-bottom-nav__inner { gap: 2px; padding: 0 4px; }
  .aquo-bottom-nav__drop { width: 46px; height: 58px; }
  .aquo-bottom-nav__icon { font-size: 17px; }
  .aquo-bottom-nav__label { font-size: 9px; letter-spacing: .01em; }
  .content-body { overflow-x: hidden; }
}
.aquo-bottom-nav__item--active {
  background: rgba(33,150,243,0.06);
}
.app-layout[data-theme="silver"] .aquo-bottom-nav__item--active {
  background: rgba(100,116,139,0.05);
}
.app-layout[data-theme="gold"] .aquo-bottom-nav__item--active {
  background: rgba(201,168,76,0.05);
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Liquid Light Deployment v66.55
   Extensión controlada a controles visibles. Sin tocar layout, cards,
   shell, landing, onboarding, paywall, JS, router, auth ni supabase.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 — btn-ghost ──────────────────────────────────────────────────
   Ghost en reposo: completamente transparente, sin peso.
   Hover: glass acuoso muy tenue — coherente con btn-secondary.
   Active: presión suave sin oscurecer.
   ──────────────────────────────────────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  min-height: 44px;
}
.btn-ghost:hover {
  background: rgba(33,150,243,0.06);
  color: var(--primary);
  border-color: rgba(33,150,243,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.70) inset;
}
.btn-ghost:active {
  background: rgba(33,150,243,0.10);
  transform: scale(0.975);
}

/* ── FASE 1 — btn-danger ─────────────────────────────────────────────────
   Rojo líquido, no sólido plano. Mismo sistema que primary pero en error.
   Usado solo en eliminar cuenta — acción irreversible → mantener peso visual.
   ──────────────────────────────────────────────────────────────────────── */
.btn-danger {
  background: linear-gradient(165deg, #EF5350 0%, #E53935 55%, #C62828 100%);
  border-color: rgba(150,20,20,0.36);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 2px 10px rgba(198,40,40,0.18);
  min-height: 44px;
}
.btn-danger:hover {
  background: linear-gradient(165deg, #EF9A9A 0%, #EF5350 40%, #E53935 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 3px 14px rgba(198,40,40,0.24);
  transform: translateY(-1px);
  border-color: rgba(150,20,20,0.44);
}
.btn-danger:active {
  background: linear-gradient(165deg, #C62828 0%, #B71C1C 100%);
  box-shadow: 0 1px 4px rgba(150,20,20,0.20) inset;
  transform: scale(0.975) translateY(0);
}

/* ── FASE 2 — form-input / form-select / form-textarea ──────────────────
   Fondo ligeramente acuoso en reposo. Focus: borde primario + ring suave.
   Sin tocar estructura, padding, ni font — solo color y sombra.
   ──────────────────────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  background: rgba(240,248,255,0.70);   /* mist acuoso, casi blanco */
  border-color: rgba(33,150,243,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.88) inset;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: rgba(255,255,255,0.96);
  border-color: rgba(33,150,243,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 0 0 3px rgba(33,150,243,0.09);
}
/* Error y success — sin cambios de comportamiento, solo refinamiento */
.form-input.error,
.form-select.error {
  background: rgba(255,248,248,0.80);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.88) inset,
    0 0 0 3px rgba(198,40,40,0.08);
}

/* ── FASE 2 — modal-close ────────────────────────────────────────────────
   Microacción: pill circular glass, tap target 44px.
   ──────────────────────────────────────────────────────────────────────── */
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 44px;   /* tap target táctil */
  min-height: 44px;
  border-radius: 999px;
  background: rgba(33,150,243,0.05);
  border: 1px solid rgba(33,150,243,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.modal-close:hover {
  background: rgba(33,150,243,0.10);
  border-color: rgba(33,150,243,0.20);
  color: var(--primary-dark);
}
.modal-close:active {
  background: rgba(33,150,243,0.15);
  transform: scale(0.94);
}

/* ── FASE 3 — plan-badge refinement ─────────────────────────────────────
   Pro badge: perla fría con highlight. Plus badge: champán muy suave.
   Sin tocar tipografía, padding ni estructura existente.
   ──────────────────────────────────────────────────────────────────────── */
.plan-badge-pro {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 1px 3px rgba(100,116,139,0.10);
}
.plan-badge-plus {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.56) inset,
    0 1px 4px rgba(201,168,76,0.12);
}

/* ── FASE 3 — nav-item active refinement ────────────────────────────────
   Añade highlight inset izquierdo al ítem activo: sensación de profundidad
   acuosa sin cambiar colores ni layout existente.
   ──────────────────────────────────────────────────────────────────────── */
.nav-item.active {
  box-shadow: 2px 0 0 rgba(33,150,243,0.08) inset;
}
.nav-item:hover {
  box-shadow: 2px 0 0 rgba(33,150,243,0.05) inset;
}

/* ── FASE 4 — Equilibrio visual ─────────────────────────────────────────
   Ajustes finales para evitar exceso de brillo o borde en contextos
   donde varios controles Liquid Light aparecen juntos.
   ──────────────────────────────────────────────────────────────────────── */

/* En fondos oscuros (sidebar plan-based, paneles premium):
   reducir opacidad del highlight inset de botones para no chocar */
.app-layout[data-plan="premium_plus"] .btn-primary,
.app-layout[data-plan="premium_plus"] .btn-secondary,
.app-layout[data-plan="premium"] .btn-primary,
.app-layout[data-plan="premium"] .btn-secondary {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 8px rgba(33,150,243,0.14);
}

/* ghost en sidebar: sin borde en reposo — ya es sidebar, no necesita borde */
.sidebar .btn-ghost {
  min-height: 40px;
  border-color: transparent;
  box-shadow: none;
}
.sidebar .btn-ghost:hover {
  background: rgba(33,150,243,0.07);
  border-color: transparent;
  box-shadow: none;
}

/* btn-sm táctil móvil — ya cubierto en v66.54, se confirma */
@media (max-width: 768px) {
  .btn-sm { min-height: 44px; }
  .modal-close { min-width: 44px; min-height: 44px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Theme Hierarchy Fix + Visual Coherence v66.56
   
   DIAGNÓSTICO:
   - [data-theme="silver/gold"] ya gana sobre [data-plan] por orden en cascada
     (data-theme está en líneas 4630+ > data-plan en líneas 2448+) ✅
   - Blue (no data-theme): plan rules ganan sin oposición.
     v66.53 cubrió premium_plus + blue. Faltaba: premium + blue.
   - Corrección: solo añadir los :not([data-theme]) que faltaban.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── OBJ 1 — JERARQUÍA: blue + premium (el gap que faltaba) ─────────────
   Misma técnica que v66.53 usó para premium_plus.
   Sidebar y header vuelven a azul base cuando no hay data-theme activo.
   ──────────────────────────────────────────────────────────────────────── */
.app-layout:not([data-theme])[data-plan="premium"] .sidebar {
  background: linear-gradient(180deg, #EBF5FF 0%, #E4F0FD 60%, #DCE9FB 100%);
  border-right-color: rgba(33,150,243,0.14);
}
.app-layout:not([data-theme])[data-plan="premium"] .sidebar-logo {
  border-bottom-color: rgba(33,150,243,0.10);
}
.app-layout:not([data-theme])[data-plan="premium"] .sidebar-footer {
  border-top-color: rgba(33,150,243,0.10);
}
.app-layout:not([data-theme])[data-plan="premium"] .content-header {
  background: linear-gradient(135deg, #E8F4FF 0%, #EEF7FF 100%);
  border-bottom-color: rgba(33,150,243,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 4px 20px rgba(33,150,243,0.07);
}
.app-layout:not([data-theme])[data-plan="premium"] .nav-section-title {
  color: var(--text-secondary);
  opacity: 0.72;
}
.app-layout:not([data-theme])[data-plan="premium"] .nav-item.active {
  border-left-color: var(--primary);
  background: rgba(33,150,243,0.08);
  color: var(--primary-dark);
}
.app-layout:not([data-theme])[data-plan="premium"] .bottom-tab.active {
  color: var(--primary);
}
.app-layout:not([data-theme])[data-plan="premium"] .greeting span {
  color: var(--primary-dark);
}

/* ── OBJ 2 — COHERENCIA DE TEMA: cards y secciones ─────────────────────
   Las cards heredan el tinte del tema activo via borde y sombra.
   Sin tocar el fondo blanco — solo matiz de borde y glow.
   ──────────────────────────────────────────────────────────────────────── */

/* Silver: perla fría en cards */
.app-layout[data-theme="silver"] .card {
  border-color: rgba(160,172,186,0.16);
  box-shadow:
    0 2px 8px  rgba(78,89,104,0.07),
    0 8px 28px rgba(78,89,104,0.09),
    0 0   0 1px rgba(255,255,255,0.95) inset;
}
.app-layout[data-theme="silver"] .card:hover {
  box-shadow:
    0 2px 6px  rgba(78,89,104,0.08),
    0 10px 32px rgba(78,89,104,0.12),
    0 0   0 1px rgba(255,255,255,0.95) inset;
}
.app-layout[data-theme="silver"] .card-header {
  color: var(--tier-pro-title);
}

/* Gold: warmth muy suave en cards */
.app-layout[data-theme="gold"] .card {
  border-color: rgba(201,168,76,0.13);
  box-shadow:
    0 2px 8px  rgba(140,110,42,0.06),
    0 8px 28px rgba(140,110,42,0.08),
    0 0   0 1px rgba(255,255,255,0.97) inset;
}
.app-layout[data-theme="gold"] .card:hover {
  box-shadow:
    0 2px 6px  rgba(140,110,42,0.07),
    0 10px 32px rgba(140,110,42,0.11),
    0 0   0 1px rgba(255,255,255,0.97) inset;
}
.app-layout[data-theme="gold"] .card-header {
  color: var(--tier-plus-title);
}

/* ── OBJ 3 — SISTEMA DE ACCIONES: links funcionales en módulos ───────────
   Targets seguros: solo clases existentes conocidas como interactivas.
   No modificar texto, solo añadir tap target y feedback visual.
   ──────────────────────────────────────────────────────────────────────── */

/* stat-value en cards: ligero hover para indicar interactividad
   cuando el ancestro es un enlace o botón */
a .stat-value,
button .stat-value {
  transition: color 0.16s;
}
a:hover .stat-value,
button:hover .stat-value {
  color: var(--primary);
}

/* ── OBJ 4 — JERARQUÍA VISUAL: pesos y separación ───────────────────────
   card-header: más presencia.
   stat-label: más suave.
   Sin tocar font-size ni layout.
   ──────────────────────────────────────────────────────────────────────── */
.card-header {
  font-weight: 650;
  letter-spacing: -0.010em;
  line-height: 1.25;
}
.stat-label {
  font-weight: 450;
  letter-spacing: 0.005em;
  opacity: 0.80;
}
.stat-value {
  letter-spacing: -0.025em;
}

/* Separación vertical entre grupos de cards — solo si hay gap nativo */
.card + .card {
  margin-top: 0; /* respeta gap del grid, no añade margen extra */
}

/* Section title: más presencia sin cambiar tamaño */
.section-title {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* nav-section-title: más aireado, no cambia color */
.nav-section-title {
  margin-top: 28px; /* ligeramente más espacio sobre cada grupo */
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Theme Dominance v66.57
   El tema (data-theme) sobrescribe siempre colores de superficie.
   Plan solo añade matices de borde/badge — nunca fondos base.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO: tokens de tema sobre tokens de tier ───────────────────────
   Cuando hay data-theme, los custom properties del hero se reasignan.
   El JS no cambia — el CSS lo resuelve por cascada.
   ──────────────────────────────────────────────────────────────────────── */
.app-layout[data-theme="silver"] {
  --hero-free-a:    #EDF0F4; --hero-free-b:    #D6DCE4; --hero-free-deep: #B0BCCA;
  --hero-free-glow: rgba(78,89,104,0.14);
  --hero-pro-a:     #EDF0F4; --hero-pro-b:     #D6DCE4; --hero-pro-deep:  #B0BCCA;
  --hero-pro-glow:  rgba(78,89,104,0.14);
  --hero-plus-a:    #EDF0F4; --hero-plus-b:    #D6DCE4; --hero-plus-deep: #B0BCCA;
  --hero-plus-glow: rgba(78,89,104,0.14);
}
.app-layout[data-theme="gold"] {
  --hero-free-a:    #FBF8F0; --hero-free-b:    #F0E4C6; --hero-free-deep: #DEC98A;
  --hero-free-glow: rgba(184,143,56,0.14);
  --hero-pro-a:     #FBF8F0; --hero-pro-b:     #F0E4C6; --hero-pro-deep:  #DEC98A;
  --hero-pro-glow:  rgba(184,143,56,0.14);
  --hero-plus-a:    #FBF8F0; --hero-plus-b:    #F0E4C6; --hero-plus-deep: #DEC98A;
  --hero-plus-glow: rgba(184,143,56,0.14);
}

/* ── 2. CARDS: glass coherente con el tema ──────────────────────────────
   Un solo override para todas las cards del dashboard.
   backdrop-filter solo donde tiene sentido (no en landing).
   ──────────────────────────────────────────────────────────────────────── */
.main-content .card {
  background: rgba(255,255,255,0.80);
  border-radius: 18px;
  border: 1px solid rgba(33,150,243,0.09);
  box-shadow: 0 4px 16px rgba(33,150,243,0.07), 0 1px 0 rgba(255,255,255,0.95) inset;
}
.app-layout[data-theme="silver"] .main-content .card {
  border-color: rgba(160,172,186,0.16);
  box-shadow: 0 4px 16px rgba(78,89,104,0.07), 0 1px 0 rgba(255,255,255,0.95) inset;
}
.app-layout[data-theme="gold"] .main-content .card {
  border-color: rgba(201,168,76,0.13);
  box-shadow: 0 4px 16px rgba(140,110,42,0.07), 0 1px 0 rgba(255,255,255,0.97) inset;
}

/* ── 3. BOTONES BASE: glass layer unificado ─────────────────────────────
   Se suma a los gradientes ya definidos — no los reemplaza.
   Solo añade el comportamiento glass compartido a TODOS los .btn.
   ──────────────────────────────────────────────────────────────────────── */
.btn {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ── 4. ISOTIPO / DROP ICON: adaptado al tema ───────────────────────────
   status-hero__isotipo, card-header-icon, nav-item img: filtro por tema.
   No se tocan colores directos — solo filter CSS.
   ──────────────────────────────────────────────────────────────────────── */
.app-layout[data-theme="silver"] .status-hero__isotipo,
.app-layout[data-theme="silver"] .card-header-icon,
.app-layout[data-theme="silver"] .drop-icon {
  filter: grayscale(0.75) brightness(1.05) saturate(0.7);
}
.app-layout[data-theme="gold"] .status-hero__isotipo,
.app-layout[data-theme="gold"] .card-header-icon,
.app-layout[data-theme="gold"] .drop-icon {
  filter: sepia(0.45) saturate(1.1) brightness(1.02);
}

/* ── 5. BLOQUEO: data-plan NO modifica fondos base con data-theme ────────
   Cuando hay tema activo, los fondos plan-based quedan neutralizados.
   Solo conservan borde y sombra (matices de plan, no colores base).
   ──────────────────────────────────────────────────────────────────────── */
.app-layout[data-theme] .status-hero.tier-premium,
.app-layout[data-theme] .status-hero.tier-plus {
  background: inherit; /* el tema ya definió los tokens --hero-* */
}
.app-layout[data-theme="silver"] .status-hero.tier-premium,
.app-layout[data-theme="silver"] .status-hero.tier-plus {
  background: linear-gradient(180deg, var(--hero-pro-a) 0%, var(--hero-pro-b) 60%, var(--hero-pro-deep) 100%);
  box-shadow: 0 16px 52px var(--hero-pro-glow), 0 3px 0 rgba(255,255,255,0.85) inset;
}
.app-layout[data-theme="gold"] .status-hero.tier-premium,
.app-layout[data-theme="gold"] .status-hero.tier-plus {
  background: linear-gradient(180deg, var(--hero-plus-a) 0%, var(--hero-plus-b) 60%, var(--hero-plus-deep) 100%);
  box-shadow: 0 16px 52px var(--hero-plus-glow), 0 3px 0 rgba(255,255,255,0.85) inset;
}

/* ── 6. SATURACIÓN GLOBAL: eliminar amarillos duros y sombras pesadas ─── */
.app-layout[data-theme="gold"] {
  --gold: #C9A84C;
  --gold-bg: #FBF7EE;
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Blue Hero Fix v66.57.1
   
   PROBLEMA EXACTO:
   .status-hero.tier-plus  → usa --hero-plus-* (champán) — sin restricción de tema
   .status-hero.tier-premium → usa --hero-pro-* (gris) — sin restricción de tema
   Cuando blue (sin data-theme), estos selectores ganan sobre la base azul.

   SOLUCIÓN:
   :not([data-theme]) significa "blue activo".
   Forzar --hero-free-* (azul) cuando no hay data-theme, sin importar el plan.
   Especificidad: (0,2,0,1) > (0,0,0,2) de los tier sin contexto → gana.
   ══════════════════════════════════════════════════════════════════════════ */

.app-layout:not([data-theme]) .status-hero.tier-premium,
.app-layout:not([data-theme]) .status-hero.tier-plus {
  background: linear-gradient(180deg,
    var(--hero-free-a)    0%,
    var(--hero-free-b)   60%,
    var(--hero-free-deep) 100%);
  box-shadow: 0 16px 52px var(--hero-free-glow), 0 3px 0 rgba(255,255,255,0.85) inset;
}
.app-layout:not([data-theme]) .status-hero.tier-premium::before,
.app-layout:not([data-theme]) .status-hero.tier-plus::before {
  background: radial-gradient(circle, rgba(255,255,255,0.52) 0%, transparent 62%);
}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Visual Identity Sprint
   Sólo overrides puntuales. No toca layout, HTML ni JS.
   Cascade position: última regla gana donde hay conflicto de especificidad.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ICONOS BOTTOM-NAV — emojis adaptados al tema activo ─────────────── */
.app-layout[data-theme="silver"] .aquo-bottom-nav__icon {
  filter: grayscale(0.75) brightness(1.08) saturate(0.55);
}
.app-layout[data-theme="gold"] .aquo-bottom-nav__icon {
  filter: sepia(0.55) saturate(0.90) brightness(1.04);
}

/* ── 2. CARD HEADERS — estructura flex + jerarquía título/subtítulo ──────── */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary-dark);
  line-height: 1.2;
}
.card-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.70;
  line-height: 1.4;
  margin-top: 2px;
}

/* ── 3. BOTONES — glass highlight sutil en reposo (cada variante ya tiene hover) */
.btn {
  box-shadow: 0 1px 0 rgba(255,255,255,0.40) inset;
}

/* ── 4. HERO — borde glass + isotipo más presente ───────────────────────── */
.status-hero {
  border: 1px solid rgba(255,255,255,0.40);
}
.status-hero__isotipo {
  opacity: 0.40;
  filter: blur(2px) saturate(0.28);
}

/* ── 5. CARDS en main-content — hover tematizado ────────────────────────── */
.main-content .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 36px rgba(33,150,243,0.14),
    0 1px 0 rgba(255,255,255,0.95) inset;
}
.app-layout[data-theme="silver"] .main-content .card:hover {
  box-shadow:
    0 10px 36px rgba(78,89,104,0.11),
    0 1px 0 rgba(255,255,255,0.95) inset;
}
.app-layout[data-theme="gold"] .main-content .card:hover {
  box-shadow:
    0 10px 36px rgba(140,110,42,0.11),
    0 1px 0 rgba(255,255,255,0.97) inset;
}

/* ── 6. JERARQUÍA VISUAL — valores protagonistas, labels discretos ────────── */
.stat-value {
  font-weight: 700;
  letter-spacing: -0.026em;
}
.stat-label {
  opacity: 0.60;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.metric-value {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary-dark);
}
.metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ══ fin — Visual Identity Sprint ══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Visual Identity Sprint II
   Impacto real y visible. Solo overrides sobre selectores que existen en DOM.
   Cascade position: final del archivo — máxima prioridad donde hay conflicto.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. BOTTOM-NAV — filtrado en __drop (SVG gradient + emoji juntos)
      El sprint anterior filtró __icon solo. Ahora filtramos el contenedor
      completo para que el gradiente SVG hardcoded también cambie de familia.
      Neutralizamos el __icon filter anterior para evitar doble filtrado.
   ───────────────────────────────────────────────────────────────────────── */

/* Neutralizar override anterior (filtro solo en emoji → sustituido por __drop) */
.app-layout[data-theme="silver"] .aquo-bottom-nav__icon,
.app-layout[data-theme="gold"]   .aquo-bottom-nav__icon { filter: none; }

/* Silver: toda la gota → familia azul-gris fría */
.app-layout[data-theme="silver"] .aquo-bottom-nav__drop {
  filter: grayscale(0.88) brightness(1.06) saturate(0.48)
          drop-shadow(0 4px 10px rgba(100,116,139,0.20));
}
.app-layout[data-theme="silver"] .aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  filter: grayscale(0.88) brightness(1.06) saturate(0.48)
          drop-shadow(0 8px 18px rgba(100,116,139,0.32));
}

/* Gold: toda la gota → familia champán-miel cálida */
.app-layout[data-theme="gold"] .aquo-bottom-nav__drop {
  filter: sepia(0.62) saturate(0.82) brightness(1.06)
          drop-shadow(0 4px 10px rgba(184,150,62,0.24));
}
.app-layout[data-theme="gold"] .aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  filter: sepia(0.62) saturate(0.82) brightness(1.06)
          drop-shadow(0 8px 18px rgba(184,150,62,0.40));
}

/* ─────────────────────────────────────────────────────────────────────────
   2. MG-CARDS BASE — icono protagonista, valor fuerte, barra visible
      Clases existentes: __icon, __value, __unit, __bar, __head, __label
   ───────────────────────────────────────────────────────────────────────── */

.mg-card__icon  { font-size: 15px; opacity: 0.82; }       /* era 11px / 0.40 */
.mg-card__head  { gap: 7px; }                              /* era 5px */
.mg-card__label { font-size: 9px; letter-spacing: .055em; }/* era 8px */
.mg-card__value {
  font-size: clamp(19px, 2.5vw, 26px);  /* era clamp(16px, 2vw, 20px) */
  font-weight: 700;                      /* era 600 */
  letter-spacing: -0.03em;
}
.mg-card__unit  { font-size: 9.5px; }                      /* era 8.5px */
.mg-card__bar   { height: 3px; }                           /* era 2px */
.mg-sleep-dot   { width: 6px; height: 6px; }               /* era 5px */

/* Hover con identidad de color por tipo de card */
.mg-card--water:hover  { border-color: rgba(33,150,243,0.28); box-shadow: 0 4px 16px rgba(33,150,243,0.13); }
.mg-card--sleep:hover  { border-color: rgba(126,87,194,0.22); box-shadow: 0 4px 16px rgba(126,87,194,0.10); }
.mg-card--weight:hover { border-color: rgba(30,64,96,0.20);   box-shadow: 0 4px 16px rgba(30,64,96,0.09);   }

/* ─────────────────────────────────────────────────────────────────────────
   3. MG-CARDS POR TEMA — colores del dato coherentes con silver / gold
      Sin esto, el valor sigue en azul-fijo o lila-fijo rompiendo el tema.
   ───────────────────────────────────────────────────────────────────────── */

/* Silver */
.app-layout[data-theme="silver"] .mg-card__value          { color: #2A3848; }
.app-layout[data-theme="silver"] .mg-card__value--water   { color: #3A607A; }
.app-layout[data-theme="silver"] .mg-card__value--sleep   { color: #485870; }
.app-layout[data-theme="silver"] .mg-card__label          { color: #7A8EA0; }
.app-layout[data-theme="silver"] .mg-card__bar-fill       { background: linear-gradient(90deg, #90A8C0, #6A8CAE); }
.app-layout[data-theme="silver"] .mg-sleep-dot--on        { background: #8298B0; }
.app-layout[data-theme="silver"] .mg-card--water:hover    { border-color: rgba(90,130,160,0.28); box-shadow: 0 4px 16px rgba(90,130,160,0.12); }
.app-layout[data-theme="silver"] .mg-card--sleep:hover    { border-color: rgba(72,88,112,0.22);  box-shadow: 0 4px 16px rgba(72,88,112,0.10);  }

/* Gold */
.app-layout[data-theme="gold"] .mg-card__value            { color: #3A2800; }
.app-layout[data-theme="gold"] .mg-card__value--water     { color: #5A3E00; }
.app-layout[data-theme="gold"] .mg-card__value--sleep     { color: #4A3200; }
.app-layout[data-theme="gold"] .mg-card__label            { color: #8B7040; }
.app-layout[data-theme="gold"] .mg-card__bar-fill         { background: linear-gradient(90deg, #D4A84C, #BA8E30); }
.app-layout[data-theme="gold"] .mg-sleep-dot--on          { background: #B89030; }
.app-layout[data-theme="gold"] .mg-card--water:hover      { border-color: rgba(184,143,56,0.28); box-shadow: 0 4px 16px rgba(184,143,56,0.12); }
.app-layout[data-theme="gold"] .mg-card--sleep:hover      { border-color: rgba(140,110,50,0.22);  box-shadow: 0 4px 16px rgba(140,110,50,0.10);  }

/* ─────────────────────────────────────────────────────────────────────────
   4. BOTONES DE ACCIÓN — glass coherente y adaptación por tema
      agua-quick-btn: selector real en DOM (agua.js l.347)
      status-hero__action ya tiene glass — solo adaptamos color por tema.
   ───────────────────────────────────────────────────────────────────────── */

.agua-quick-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 700;
  letter-spacing: 0.025em;
}
.app-layout[data-theme="silver"] .agua-quick-btn {
  background: rgba(170,196,220,0.12);
  border-color: rgba(90,130,160,0.36);
  color: #3A5A78;
}
.app-layout[data-theme="silver"] .agua-quick-btn:hover:not(:disabled) {
  box-shadow: 0 5px 18px rgba(90,130,160,0.28);
}
.app-layout[data-theme="gold"] .agua-quick-btn {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.40);
  color: #7A5810;
}
.app-layout[data-theme="gold"] .agua-quick-btn:hover:not(:disabled) {
  box-shadow: 0 5px 18px rgba(184,143,56,0.30);
}

/* status-hero__action adaptado al tema activo */
.app-layout[data-theme="silver"] .status-hero__action {
  background: rgba(220,230,240,0.55);
  border-color: rgba(255,255,255,0.72);
  color: #2E4A62;
}
.app-layout[data-theme="gold"] .status-hero__action {
  background: rgba(255,248,230,0.55);
  border-color: rgba(255,255,255,0.75);
  color: #5A3E00;
}

/* ══ fin — Visual Identity Sprint II ══════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Blue Fix Sprint
   4 correcciones exactas. Sin tocar silver, gold, bottom-nav ni botones.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1 · Hero blue: texto contaminado por clases tier ─────────────────
   .tier-premium y .tier-plus coloreaban saludo/cita/badge con plata u oro
   aunque data-theme no existiera (= blue activo).
   Especificidad: (0,1,1,1) — supera (0,0,2,0) de los tier sin contexto.
   ──────────────────────────────────────────────────────────────────────── */
.app-layout:not([data-theme]) .tier-premium .status-hero__saludo strong,
.app-layout:not([data-theme]) .tier-plus    .status-hero__saludo strong {
  color: var(--hero-free-name);          /* azul AQUO limpio */
}
.app-layout:not([data-theme]) .tier-premium .status-hero__cita,
.app-layout:not([data-theme]) .tier-plus    .status-hero__cita {
  border-left-color: var(--hero-free-quote); /* azul suave, no gris ni oro */
}
.app-layout:not([data-theme]) .tier-premium .status-hero__plan-badge,
.app-layout:not([data-theme]) .tier-plus    .status-hero__plan-badge {
  background:   var(--hero-free-badge);      /* azul translúcido */
  color:        var(--hero-free-badget);     /* azul oscuro legible */
  border-color: rgba(25,118,210,0.12);
}

/* ── FIX 2 · Hero blue: legibilidad — saludo, state, msg ─────────────────
   Selectores base sin scope de tema: aplica al blue y no rompe silver/gold
   porque silver/gold ya tienen sus propios overrides posteriores en cascade.
   ──────────────────────────────────────────────────────────────────────── */
.status-hero__saludo {
  font-size: clamp(13px, 1.5vw, 16px);   /* era clamp(11px,1.3vw,14px) */
  font-weight: 400;                       /* era 300 — más presencia */
  color: var(--ink-mid);                  /* era ink-soft — sube contraste */
  letter-spacing: 0.015em;
}
.status-hero__state {
  font-size: clamp(16px, 2vw, 20px);     /* era clamp(14px,1.7vw,17px) */
  font-weight: 500;                       /* era 400 */
  letter-spacing: -0.010em;
}
.status-hero__msg {
  font-size: 13.5px;                      /* era 12.5px */
  font-weight: 400;                       /* era 300 */
  color: var(--ink-mid);                  /* era ink-soft — sube contraste */
}

/* ── FIX 3 · Grid-card blue: beige cálido → azul-gris frío ──────────────
   --grid-card: #F5F4F1 era beige. En blue deben sentirse agua, no crema.
   Se redefine la variable en el scope .app-layout sin data-theme.
   ──────────────────────────────────────────────────────────────────────── */
.app-layout:not([data-theme]) {
  --grid-card:   #F0F6FC;    /* era #F5F4F1 beige → azul muy pálido */
  --grid-border: rgba(33,150,243,0.09);   /* era negro opaco → azul suave */
}

/* ══ fin — Blue Fix Sprint ═════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Bottom-Nav Fix Final

   POR QUÉ LOS SPRINTS ANTERIORES NO FUNCIONABAN:
   Los sprints I y II aplicaban filter: grayscale() / sepia() sobre __drop.
   Ese filtro actúa SOBRE EL RENDER del elemento completo — pero los gradientes
   del SVG son pasteles complejos (rosa #E9BFFF, verde #A5D6A7, amarillo #FFE082).
   grayscale(0.88) no los neutraliza: deja residuos de color porque esos valores
   pastel tienen luminosidad alta y saturación media — el resultado es sucio.

   QUÉ CAPA SE CORRIGE AHORA:
   fill="url(#bn1)" en el <path> del SVG es un atributo SVG de presentación.
   Su especificidad en CSS es 0 — cualquier regla CSS lo sobreescribe.
   Sobreescribiendo .aquo-bottom-nav__svg path { fill: COLOR } con un valor
   sólido por tema, eliminamos el gradiente multicolor por completo.
   El filter del __drop queda únicamente para el drop-shadow correcto.

   BLUE también se corrige: ciclo (lila), salud (verde), nutrición (amarillo)
   son incoherentes con el tema azul aunque no haya data-theme activo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BLUE (sin data-theme): unificar todas las gotas a familia azul ───── */

.app-layout:not([data-theme]) .aquo-bottom-nav__svg path {
  fill: #BDD5F5;   /* azul pálido — inactivo */
}
.app-layout:not([data-theme]) .aquo-bottom-nav__item--active .aquo-bottom-nav__svg path {
  fill: #85B4EC;   /* azul más presente — activo */
}
.app-layout:not([data-theme]) .aquo-bottom-nav__drop {
  filter: drop-shadow(0 4px 10px rgba(33,150,243,0.20));
}
.app-layout:not([data-theme]) .aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  filter: drop-shadow(0 8px 18px rgba(33,150,243,0.38));
}

/* ── 2. SILVER: gotas en familia perla fría ───────────────────────────────── */

/* Sobreescribir grayscale/sepia del Sprint II — mismo selector, posición posterior gana */
.app-layout[data-theme="silver"] .aquo-bottom-nav__drop {
  filter: drop-shadow(0 4px 10px rgba(100,116,139,0.18));
}
.app-layout[data-theme="silver"] .aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  filter: drop-shadow(0 8px 18px rgba(100,116,139,0.32));
}
.app-layout[data-theme="silver"] .aquo-bottom-nav__svg path {
  fill: #D2DCE6;   /* perla fría — inactivo */
}
.app-layout[data-theme="silver"] .aquo-bottom-nav__item--active .aquo-bottom-nav__svg path {
  fill: #AABCCC;   /* perla más presente — activo */
}
/* Emojis: desaturar levemente para que no contrasten con las gotas perla */
.app-layout[data-theme="silver"] .aquo-bottom-nav__icon {
  filter: grayscale(0.55) brightness(1.03);
}

/* ── 3. GOLD: gotas en familia champán-miel ───────────────────────────────── */

.app-layout[data-theme="gold"] .aquo-bottom-nav__drop {
  filter: drop-shadow(0 4px 10px rgba(184,150,62,0.22));
}
.app-layout[data-theme="gold"] .aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  filter: drop-shadow(0 8px 18px rgba(184,150,62,0.40));
}
.app-layout[data-theme="gold"] .aquo-bottom-nav__svg path {
  fill: #E6D49A;   /* champán cálido — inactivo */
}
.app-layout[data-theme="gold"] .aquo-bottom-nav__item--active .aquo-bottom-nav__svg path {
  fill: #CEBA70;   /* miel más presente — activo */
}
/* Emojis: leve warm para que acompañen la paleta dorada */
.app-layout[data-theme="gold"] .aquo-bottom-nav__icon {
  filter: sepia(0.38) saturate(0.85) brightness(1.02);
}

/* ══ fin — Bottom-Nav Fix Final ════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Home Dashboard Premium polish v2.4
   Más vida, más jerarquía, CTA dominante, grid secundario real.
   ══════════════════════════════════════════════════════════════════════════ */

#home-status-hero.status-hero {
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.52);
  box-shadow:
    0 18px 44px rgba(15, 58, 120, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
#home-status-hero.status-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -28% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0) 65%);
  pointer-events: none;
}
.status-hero__headline {
  max-width: 700px;
}
.status-hero__state {
  text-wrap: balance;
}
.status-hero__msg {
  max-width: 58ch;
}
.status-hero__snapshot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .9fr);
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.hero-focus,
.hero-mini-card {
  position: relative;
  border-radius: 22px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.hero-focus:hover,
.hero-mini-card:hover,
.mg-card:hover,
.qa-item:hover,
.ctx-card:hover {
  transform: translateY(-2px);
}
.hero-focus {
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,249,255,0.9));
  border: 1px solid rgba(125,164,216,0.22);
  box-shadow: 0 14px 30px rgba(23, 74, 145, 0.09);
}
.hero-focus--ok {
  box-shadow: 0 16px 34px rgba(46,125,50,0.11);
}
.hero-focus--near {
  box-shadow: 0 16px 34px rgba(245,124,0,0.10);
}
.hero-focus--low {
  box-shadow: 0 16px 34px rgba(21,101,192,0.12);
}
.hero-focus__topline,
.hero-focus__meta,
.hero-focus__value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hero-focus__eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.hero-focus__pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.hero-focus__pill--ok {
  background: rgba(46,125,50,0.12);
  color: #256B2A;
  border-color: rgba(46,125,50,0.16);
}
.hero-focus__pill--near {
  background: rgba(245,124,0,0.12);
  color: #A55A00;
  border-color: rgba(245,124,0,0.18);
}
.hero-focus__pill--low {
  background: rgba(21,101,192,0.12);
  color: #1857A7;
  border-color: rgba(21,101,192,0.18);
}
.hero-focus__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 42px);
  line-height: .95;
  font-weight: 700;
  color: #0D3E7E;
  letter-spacing: -.03em;
}
.hero-focus__value span {
  font-size: .45em;
  margin-left: 2px;
  color: var(--text-muted);
}
.hero-focus__sub,
.hero-focus__meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.hero-focus__bar {
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(127, 173, 228, 0.18);
}
.hero-focus__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7BB8FF, #2E7DFF);
  box-shadow: 0 0 18px rgba(33,150,243,0.26);
  transition: width .45s ease;
}
.hero-focus__ring {
  --size: 82px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle closest-side, rgba(255,255,255,0.95) 71%, transparent 72%),
    conic-gradient(#4BA3FF calc(var(--p, 0) * 1%), rgba(127,173,228,0.18) 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.82), 0 10px 22px rgba(45,116,204,0.14);
}
.hero-focus__ring-core {
  font-size: 15px;
  font-weight: 800;
  color: #174E9B;
}
.hero-mini-stack {
  display: grid;
  gap: 12px;
}
.hero-mini-card {
  min-height: 110px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(250,252,255,0.76));
  border: 1px solid rgba(125,164,216,0.18);
  box-shadow: 0 10px 22px rgba(24, 66, 128, 0.07);
}
.hero-mini-card__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-mini-card__value {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: #2E2A79;
}
.hero-mini-card__value span {
  font-size: .44em;
  color: var(--text-muted);
  margin-left: 2px;
}
.hero-mini-card__meta,
.hero-mini-card__empty {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.hero-mini-card__dots {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.hero-mini-card__weight .ds-item {
  margin-top: 10px;
  min-height: auto;
  background: rgba(232, 241, 252, 0.78);
}
.status-hero__action--strong {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(33,150,243,0.18), inset 0 1px 0 rgba(255,255,255,0.44);
  transform-origin: center;
  animation: aquoPulseCTA 2.8s ease-in-out infinite;
}
.status-hero__action--strong:hover {
  box-shadow: 0 20px 36px rgba(33,150,243,0.24), inset 0 1px 0 rgba(255,255,255,0.52);
}
@keyframes aquoPulseCTA {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.015); }
}

.main-grid {
  align-items: stretch;
}
.mg-card {
  min-height: 146px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(247,250,255,0.72));
  border: 1px solid rgba(131,168,217,0.15);
  box-shadow: 0 10px 22px rgba(19, 60, 120, 0.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.mg-card:hover {
  box-shadow: 0 16px 30px rgba(19, 60, 120, 0.10);
  border-color: rgba(101,146,207,0.24);
}
.mg-card__head { margin-bottom: 8px; }
.mg-card__icon { opacity: .7; }
.mg-card__label { color: #6B88A6; }
.mg-card__bar { height: 5px; background: rgba(125,173,228,0.12); }
.mg-card__meta { font-size: 10px; }
.mg-card__hint {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.mg-card__cta {
  margin-top: auto;
  opacity: .82;
}
.quick-access,
.contextual-block,
#home-diary-strip {
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(14px);
}
.quick-access {
  border: 1px solid rgba(126,165,218,0.15);
  box-shadow: 0 8px 20px rgba(18, 63, 122, 0.05);
  border-radius: 24px;
  padding: 14px 16px 16px;
}
.qa-item,
.ctx-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.qa-item:hover,
.ctx-card:hover {
  box-shadow: 0 12px 24px rgba(20, 71, 136, 0.09);
}

@media (max-width: 760px) {
  .status-hero__snapshot {
    grid-template-columns: 1fr;
  }
  .hero-focus__ring {
    --size: 72px;
  }
}


/* ─────────────────────────────────────────────────────────────
   HOME v2.5 — refinado emocional / hero dominante / sistema vivo
──────────────────────────────────────────────────────────────── */
.status-hero {
  transform: translateZ(0);
  animation: aquoHeroBreath 8.5s ease-in-out infinite;
  box-shadow:
    0 26px 72px var(--hero-free-glow),
    0 3px 0 rgba(255,255,255,0.88) inset,
    0 18px 40px rgba(17,73,132,0.10);
}
.status-hero::after {
  content:'';
  position:absolute;
  inset:auto -14% -26% auto;
  width:56%;
  height:54%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(126,196,255,0.22) 0%, rgba(126,196,255,0.08) 40%, transparent 72%);
  pointer-events:none;
  z-index:0;
  animation:aquoHeroGlow 7.6s ease-in-out infinite;
}
.status-hero.tier-premium,
.status-hero.tier-plus {
  box-shadow:
    0 26px 72px rgba(42,78,120,0.14),
    0 3px 0 rgba(255,255,255,0.88) inset,
    0 18px 40px rgba(17,73,132,0.08);
}
.status-hero__state {
  font-size: clamp(18px, 2.15vw, 24px);
  font-weight: 560;
  letter-spacing: -0.02em;
}
.status-hero__msg {
  max-width: 62ch;
  font-size: clamp(13px, 1.35vw, 15px);
  color: rgba(20,58,95,0.84);
}
.status-hero__action {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding-inline: 18px;
  box-shadow: 0 14px 32px rgba(33,150,243,0.18), 0 1px 0 rgba(255,255,255,0.85) inset;
  animation: aquoCtaPulse 3.6s ease-in-out infinite;
}
.status-hero__action::before {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.15) 36%, rgba(255,255,255,0.48) 50%, transparent 64%);
  transform: translateX(-125%);
  animation: aquoShine 5.8s ease-in-out infinite;
}
.status-hero__action > span { position:relative; z-index:1; }
.status-hero__snapshot {
  align-items: stretch;
}
.hero-focus {
  position: relative;
  min-height: 228px;
  border-radius: 24px;
  padding: 20px 20px 18px;
  box-shadow: 0 18px 44px rgba(20,72,160,0.14), 0 1px 0 rgba(255,255,255,0.72) inset;
  transform: translateY(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.hero-focus:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 52px rgba(20,72,160,0.18), 0 1px 0 rgba(255,255,255,0.78) inset;
}
.hero-focus::after {
  content:'';
  position:absolute;
  inset:auto 18px 14px auto;
  width:112px;
  height:112px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.38) 0%, transparent 68%);
  pointer-events:none;
  opacity:.9;
}
.hero-focus__value {
  font-size: clamp(40px, 5vw, 58px);
  line-height: .92;
}
.hero-focus__bar {
  height: 10px;
  background: rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.hero-focus__bar span {
  transition: width .65s cubic-bezier(.2,.7,.2,1), filter .3s ease;
  box-shadow: 0 0 16px rgba(33,150,243,0.28);
}
.hero-focus__ring {
  box-shadow: 0 10px 24px rgba(255,255,255,0.24), inset 0 1px 0 rgba(255,255,255,0.7);
  animation: aquoRingFloat 4.8s ease-in-out infinite;
}
.hero-focus__pulse {
  margin-top: 12px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-focus__pulse strong {
  font-size: 12px;
  color: #123E6C;
  letter-spacing: -.01em;
}
.hero-focus__pulse span {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(18,62,108,0.82);
}
.hero-focus__pulse--ok { background: rgba(232,245,233,0.65); }
.hero-focus__pulse--near { background: rgba(255,248,225,0.72); }
.hero-focus__pulse--mid { background: rgba(232,244,255,0.58); }
.hero-focus__pulse--low { background: rgba(255,243,224,0.74); }
.hero-mini-card {
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
  box-shadow: 0 10px 24px rgba(26,72,120,0.08);
}
.hero-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(26,72,120,0.12);
}
.mg-card {
  border-color: rgba(45,106,164,0.09);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 8px 20px rgba(17,52,89,0.045);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.mg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(17,52,89,0.08);
}
.quick-card {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(45,106,164,0.08);
  box-shadow: 0 8px 20px rgba(17,52,89,0.04);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(17,52,89,0.08);
}
.contextual-block,
#home-diary-strip.card {
  box-shadow: 0 10px 24px rgba(17,52,89,0.05);
}
.status-hero__live {
  position: absolute;
  right: 22px;
  bottom: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .24s ease, transform .24s ease;
}
.status-hero__live.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.status-hero__live-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(33,150,243,0.22);
  color: #1456A1;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(33,150,243,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes aquoHeroBreath {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes aquoHeroGlow {
  0%,100% { opacity: .68; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes aquoCtaPulse {
  0%,100% { transform: translateY(0); box-shadow: 0 14px 32px rgba(33,150,243,0.18), 0 1px 0 rgba(255,255,255,0.85) inset; }
  50% { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(33,150,243,0.24), 0 1px 0 rgba(255,255,255,0.88) inset; }
}
@keyframes aquoShine {
  0%, 72%, 100% { transform: translateX(-125%); }
  82% { transform: translateX(130%); }
}
@keyframes aquoRingFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .status-hero,
  .status-hero::after,
  .status-hero__action,
  .status-hero__action::before,
  .hero-focus__ring { animation: none !important; }
}
@media (max-width: 768px) {
  .status-hero {
    min-height: 0;
    padding: 28px 18px 24px;
  }
  .hero-focus {
    min-height: 0;
    padding: 18px 16px 16px;
  }
  .hero-focus__value { font-size: clamp(34px, 11vw, 48px); }
  .status-hero__live {
    right: 14px;
    left: 14px;
    bottom: 14px;
  }
  .status-hero__live-pill {
    display: block;
    text-align: center;
  }
}


/* ───────── AQUO unified visual layer v27.0 ───────── */
.aquo-unified-page{width:100%}
.aquo-unified-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,248,255,.94));border:1px solid rgba(125,170,220,.22);border-radius:28px;padding:24px 26px;box-shadow:0 18px 38px rgba(85,135,190,.10)}
.aquo-unified-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--gold,#C9A84C);margin-bottom:8px}
.aquo-unified-title{margin:0 0 8px;font-family:var(--font-serif, 'Playfair Display', serif);font-size:clamp(34px,4vw,48px);font-weight:600;line-height:1;color:var(--primary-dark)}
.aquo-unified-subtitle{margin:0;color:var(--text-secondary);font-size:15px;line-height:1.7;max-width:720px}
.aquo-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.aquo-chip{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid rgba(125,170,220,.24);background:rgba(255,255,255,.86);color:var(--text-dark)}
.aquo-chip--blue{color:var(--primary-dark)}
.aquo-chip--green{background:rgba(232,245,233,.95);border-color:rgba(67,160,71,.18);color:#2E7D32}
.aquo-chip--gold{background:rgba(252,248,239,.98);border-color:rgba(201,168,76,.22);color:#9B7A31}
.aquo-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:18px;padding:14px 20px;font-weight:800;font-size:15px;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;text-decoration:none}
.aquo-action-btn:hover{transform:translateY(-1px)}
.aquo-action-btn:disabled,.aquo-action-btn.is-loading{opacity:.72;cursor:progress;transform:none}
.aquo-action-btn--blue{background:linear-gradient(180deg,#4aa6f5,#2387e4);color:#fff;box-shadow:0 14px 26px rgba(35,135,228,.20)}
.aquo-action-btn--gold{background:linear-gradient(180deg,#d9ba7a,#c59a46);color:#fff;box-shadow:0 14px 26px rgba(201,168,76,.22)}
.aquo-action-btn--sm{font-size:13px;padding:10px 14px;border-radius:14px}
.aquo-module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.aquo-module-card{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.96));border:1px solid rgba(125,170,220,.18);box-shadow:0 16px 34px rgba(85,135,190,.08)}
.aquo-module-card.is-empty{opacity:.92}
.aquo-module-card.has-data{border-color:rgba(77,144,211,.22)}
.aquo-module-card__head{display:flex;gap:14px;align-items:flex-start}
.aquo-module-card__icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,247,255,.94));display:flex;align-items:center;justify-content:center;font-size:26px;border:1px solid rgba(125,170,220,.20);box-shadow:0 10px 22px rgba(85,135,190,.08)}
.aquo-module-card__copy h2{margin:0 0 6px;font-size:21px;line-height:1.1;color:var(--primary-dark);font-family:var(--font-serif, 'Playfair Display', serif);font-weight:600}
.aquo-module-card__copy p{margin:0;font-size:13px;color:var(--text-secondary);line-height:1.5}
.aquo-module-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.aquo-module-card__meta{font-size:12px;color:var(--text-muted);line-height:1.5;max-width:55%}
.aquo-lock-pill,.aquo-empty-pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.88);border:1px solid rgba(125,170,220,.20)}
.aquo-lock-pill{color:#9B7A31;border-color:rgba(201,168,76,.26);background:rgba(252,248,239,.96)}
.aquo-empty-pill{color:var(--text-muted)}
.aquo-info-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,249,255,.94));border:1px solid rgba(125,170,220,.18);border-radius:22px;padding:16px 18px;font-size:13px;color:var(--text-dark);line-height:1.8;box-shadow:0 12px 28px rgba(85,135,190,.07)}
@media (max-width: 768px){
  .aquo-unified-hero{padding:20px 18px;border-radius:24px}
  .aquo-unified-title{font-size:clamp(28px,9vw,40px)}
  .aquo-module-card__meta{max-width:none}
  .aquo-action-btn{width:100%}
  .aquo-module-card__footer{align-items:stretch}
}


/* ============================================================
   AQUO v27.1 — Unified health modules (Agua / Peso / Sueño)
   ============================================================ */
.aquo-module-shell{display:flex;flex-direction:column;gap:24px;width:100%}
.aquo-section-hero{
  position:relative;overflow:hidden;padding:28px 30px;border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,251,255,0.98) 100%);
  border:1px solid rgba(169,198,224,0.58);
  box-shadow:0 16px 40px rgba(80,126,170,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
.aquo-section-hero::before{
  content:"";position:absolute;inset:auto -80px -120px auto;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(120,182,235,0.22) 0%, rgba(120,182,235,0.08) 42%, transparent 72%);
  pointer-events:none;
}
.aquo-section-hero::after{
  content:"";position:absolute;left:-80px;top:-120px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.12) 45%, transparent 72%);
  pointer-events:none;
}
.aquo-section-header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.aquo-section-heading{max-width:720px}
.aquo-section-kicker{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.aquo-section-title{font-family:var(--font-serif);font-size:clamp(34px,4.2vw,54px);font-weight:600;line-height:1.02;letter-spacing:-0.03em;color:var(--primary-dark);margin:0 0 6px}
.aquo-section-subtitle{max-width:760px;font-size:15px;line-height:1.7;color:#6f8196;margin:0}
.aquo-hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.aquo-nav-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aquo-nav-pill{border:1px solid rgba(46,104,170,.18);background:rgba(255,255,255,.82);box-shadow:0 8px 20px rgba(31,89,151,.08)}
.aquo-edit-pill{border:1px solid rgba(46,104,170,.18);background:rgba(255,255,255,.82);border-radius:999px;padding:8px 14px;font-size:12px;color:var(--primary-dark);cursor:pointer;display:inline-flex;gap:6px;align-items:center;box-shadow:0 8px 20px rgba(31,89,151,.08)}
.aquo-chips-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.aquo-chip-soft{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid rgba(182,205,230,.85);box-shadow:0 8px 20px rgba(31,89,151,.05);font-size:14px;color:#607589;font-weight:600}
.aquo-chip-soft strong{font-size:15px;color:var(--primary-dark)}
.aquo-module-grid{display:grid;gap:18px}
.aquo-stat-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(184,207,230,.65);background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);box-shadow:0 12px 28px rgba(44,101,159,.08)}
.aquo-stat-card::after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.2));pointer-events:none}
.aquo-section-panel{padding:20px;border-radius:24px;border:1px solid rgba(180,204,230,.72);background:rgba(255,255,255,0.88);box-shadow:0 12px 30px rgba(44,101,159,.06)}
.aquo-module-shell .card,.aquo-module-shell .stat-card{border-radius:22px;border:1px solid rgba(180,204,230,.72);background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);box-shadow:0 12px 30px rgba(44,101,159,.06)}
.aquo-module-shell .card-header{font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-dark)}
.aquo-module-shell .health-disclaimer{border-radius:18px;border:1px dashed rgba(161,189,219,.8);background:rgba(255,255,255,.58);padding:16px 18px;color:#788a9d}
.aquo-module-shell .grid-3{gap:18px}
.aquo-module-shell .stat-card{padding:20px 20px 18px}
.aquo-module-shell .stat-card .stat-label{font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7e91a4}
.aquo-module-shell .stat-card .stat-value{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--primary-dark)}
.aquo-module-shell .stat-card .stat-icon{opacity:.9}
.aquo-module-shell .btn.btn-secondary{background:rgba(255,255,255,.88)}
.aquo-module-shell .peso-tabs{padding:6px;background:rgba(255,255,255,.72);border:1px solid rgba(177,201,227,.72);border-radius:20px;gap:6px;margin-bottom:4px}
.aquo-module-shell .peso-tab-btn{border-radius:14px;padding:11px 14px;margin-bottom:0;color:#70859a;border-bottom:none}
.aquo-module-shell .peso-tab-btn.active{background:linear-gradient(135deg, rgba(52,139,232,.14), rgba(52,139,232,.06));border-bottom:none;color:var(--primary-dark);box-shadow:inset 0 0 0 1px rgba(52,139,232,.22)}
.aquo-module-shell .peso-pill{border-radius:999px}
@media (max-width: 900px){
  .aquo-section-hero{padding:24px 22px;border-radius:28px}
  .aquo-section-title{font-size:clamp(30px,8vw,42px)}
}
@media (max-width: 640px){
  .aquo-section-header{flex-direction:column}
  .aquo-hero-actions{width:100%;justify-content:flex-start}
  .aquo-nav-pills{width:100%}
  .aquo-section-hero{padding:22px 18px;border-radius:24px}
  .aquo-chip-soft{width:100%;justify-content:space-between}
}


/* v27.2 — force-visible unified health styling */
.aquo-module-shell{max-width:100%;}
.aquo-module-shell .aquo-section-hero{
  padding:34px 34px 28px !important;
  border-radius:34px !important;
  background:linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,251,255,0.96) 55%, rgba(234,244,252,0.92) 100%) !important;
  border:1px solid rgba(160,194,224,0.76) !important;
  box-shadow:0 18px 44px rgba(62,116,170,0.14), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.aquo-module-shell .aquo-section-kicker{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin-bottom:14px !important;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(253,249,239,0.98), rgba(247,239,219,0.95));
  border:1px solid rgba(201,168,76,0.28);
  box-shadow:0 8px 22px rgba(187,150,62,0.10);
  font-size:11px !important;
  letter-spacing:.18em !important;
  color:#9c7a27 !important;
}
.aquo-module-shell .aquo-section-title{
  font-size:clamp(42px,4.8vw,66px) !important;
  color:#215fb2 !important;
  letter-spacing:-0.04em !important;
  margin-bottom:10px !important;
}
.aquo-module-shell .aquo-section-subtitle{
  font-size:16px !important;
  color:#60768d !important;
  max-width:760px;
}
.aquo-module-shell .aquo-chips-row{margin-top:24px !important;gap:14px !important;}
.aquo-module-shell .aquo-chip-soft{
  background:rgba(255,255,255,0.95) !important;
  border:1px solid rgba(175,202,228,0.90) !important;
  box-shadow:0 12px 24px rgba(47,102,163,0.08) !important;
  padding:12px 18px !important;
}
.aquo-module-shell .aquo-chip-soft strong{font-size:17px !important;}
.aquo-module-shell .peso-tabs{
  padding:8px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,0.78) !important;
  box-shadow:0 10px 28px rgba(56,110,168,0.08) !important;
}
.aquo-module-shell .peso-tab-btn{
  font-family:var(--font-display);
  font-weight:600;
  padding:12px 18px !important;
  border-radius:16px !important;
}
.aquo-module-shell .peso-tab-btn.active{
  background:linear-gradient(135deg, rgba(47,128,237,0.18), rgba(47,128,237,0.06)) !important;
  color:#1d5aa8 !important;
  box-shadow:inset 0 0 0 1px rgba(47,128,237,0.28), 0 8px 18px rgba(52,139,232,0.10) !important;
}
.aquo-unified-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.aquo-unified-summary .aquo-stat-card{padding:20px 22px;}
.aquo-summary-label{
  font-family:var(--font-display);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#7b8ea2;
  margin-bottom:8px;
}
.aquo-summary-value{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  font-weight:700;
  color:#1f5fb4;
}
.aquo-summary-note{font-size:13px;color:#7a8b9d;margin-top:6px;}
@media (max-width: 900px){
  .aquo-unified-summary{grid-template-columns:1fr;}
  .aquo-module-shell .aquo-section-title{font-size:clamp(34px,9vw,48px) !important;}
}


/* ── v27.3 Full System Propagation ───────────────────────────── */
.aquo-page-shell{display:flex;flex-direction:column;gap:22px;max-width:1120px;min-width:0;width:100%}
.aquo-page-hero{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:26px 28px;border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(240,247,255,.94) 64%,rgba(233,243,255,.92) 100%);border:1px solid rgba(136,179,221,.22);box-shadow:0 18px 42px rgba(76,126,178,.10);overflow:hidden}
.aquo-page-hero::before,.aquo-page-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.aquo-page-hero::before{width:120px;height:120px;right:38px;top:-26px;background:radial-gradient(circle,rgba(109,177,239,.18),transparent 68%)}
.aquo-page-hero::after{width:94px;height:94px;left:-16px;bottom:-12px;background:radial-gradient(circle,rgba(161,211,255,.22),transparent 68%)}
.aquo-page-hero__main,.aquo-page-hero__side{position:relative;z-index:1}
.aquo-page-hero__main{flex:1;min-width:min(100%,520px)}
.aquo-page-kicker{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(201,168,76,.26);background:linear-gradient(135deg,rgba(255,248,232,.95),rgba(246,237,212,.92));box-shadow:0 10px 22px rgba(201,168,76,.10);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#C9A84C);margin-bottom:18px}
.aquo-page-title{margin:0 0 10px;font-family:var(--font-serif, 'Playfair Display', serif);font-size:clamp(38px,5vw,64px);line-height:.95;letter-spacing:-.03em;color:var(--primary-dark)}
.aquo-page-subtitle{margin:0;color:var(--text-dark);font-size:17px;line-height:1.6;max-width:780px}
.aquo-page-hero__side{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:12px;min-width:210px}
.aquo-date-stack{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.aquo-hero-pills{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.aquo-hero-pill{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(125,170,220,.28);box-shadow:0 10px 20px rgba(79,129,179,.08);font-size:15px;color:var(--text-secondary)}
.aquo-hero-pill strong{font-size:18px;color:var(--primary-dark)}
.aquo-surface{background:rgba(255,255,255,.94);border:1px solid rgba(125,170,220,.20);border-radius:28px;box-shadow:0 16px 34px rgba(76,126,178,.07)}
.aquo-section-headline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 16px;border-bottom:1px solid rgba(125,170,220,.12)}
.aquo-section-headline__title{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:24px;color:var(--primary-dark)}
.aquo-section-headline__sub{margin-top:6px;font-size:13px;color:var(--text-secondary)}
.aquo-segmented{display:flex;gap:6px;padding:6px;background:rgba(221,237,251,.62);border:1px solid rgba(125,170,220,.16);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.aquo-segmented__item{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border:none;border-radius:16px;background:transparent;color:var(--text-dark);font-size:14px;font-weight:700;cursor:pointer;transition:all .18s ease}
.aquo-segmented__item.active{background:#fff;color:var(--primary-dark);box-shadow:0 8px 18px rgba(33,150,243,.12)}
.aquo-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aquo-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.aquo-card-premium{background:rgba(255,255,255,.96);border:1px solid rgba(125,170,220,.18);border-radius:24px;box-shadow:0 16px 32px rgba(84,134,184,.08);padding:22px}
.aquo-list-card{position:relative;background:rgba(255,255,255,.96);border:1px solid rgba(125,170,220,.18);border-radius:24px;box-shadow:0 14px 28px rgba(84,134,184,.07);padding:20px 22px;overflow:hidden}
.aquo-list-card::after{content:"";position:absolute;top:18px;right:16px;width:46px;height:56px;border-radius:50% 50% 50% 50% / 36% 36% 64% 64%;background:linear-gradient(180deg,rgba(199,225,248,.36),rgba(255,255,255,0));opacity:.85}
.aquo-list-card__status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.aquo-soft-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text-secondary)}
@media (max-width: 920px){.aquo-grid-4,.aquo-grid-3{grid-template-columns:1fr 1fr}.aquo-page-hero{padding:22px 20px;border-radius:28px}.aquo-page-title{font-size:clamp(34px,8vw,50px)}}
@media (max-width: 640px){.aquo-grid-4,.aquo-grid-3{grid-template-columns:1fr}.aquo-page-hero__side,.aquo-date-stack{align-items:flex-start}.aquo-page-title{font-size:clamp(30px,10vw,42px)}.aquo-hero-pills{gap:10px}.aquo-hero-pill{width:100%;justify-content:flex-start}.aquo-segmented{flex-direction:column}.aquo-segmented__item{width:100%}}

/* Sidebar + header refinement */
.sidebar{background:linear-gradient(180deg,rgba(235,245,253,.98),rgba(224,238,248,.96));border-right:1px solid rgba(125,170,220,.20);box-shadow:inset -1px 0 0 rgba(255,255,255,.42)}
.sidebar-logo{padding:24px 22px 20px;border-bottom:1px solid rgba(125,170,220,.15)}
.sidebar-logo .logo-text{font-size:40px;letter-spacing:-.04em}
.sidebar-nav{padding:18px 12px 8px}
.nav-section-title{padding:0 16px 10px;font-size:11px;letter-spacing:.18em;color:rgba(65,98,129,.72)}
.nav-item{min-height:52px;padding:0 16px;border-radius:18px;border-left:none;margin:2px 6px;font-size:15px;font-weight:600;color:rgba(58,79,105,.88)}
.nav-item:hover{background:rgba(255,255,255,.74);box-shadow:0 10px 18px rgba(86,136,186,.08)}
.nav-item.active{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(237,246,255,.92));box-shadow:0 12px 24px rgba(86,136,186,.12);outline:1px solid rgba(125,170,220,.22)}
.sidebar-footer{padding:18px 18px 20px;border-top:1px solid rgba(125,170,220,.12)}
.content-header{background:linear-gradient(180deg,rgba(246,251,255,.98),rgba(235,245,253,.96));border-bottom:1px solid rgba(125,170,220,.16);box-shadow:0 16px 28px rgba(86,136,186,.06)}
.greeting{display:flex;align-items:flex-start;gap:14px}.greeting>div:last-child{display:flex;flex-direction:column;gap:6px}
.greeting .header-title-main,.greeting strong{font-family:var(--font-serif);font-size:clamp(28px,4.2vw,44px);font-weight:600;letter-spacing:-.03em;color:var(--primary-dark)}
.greeting .sub-greeting,.greeting .quote,.greeting small{font-size:14px;color:var(--text-secondary)}
.header-avatar{box-shadow:0 12px 22px rgba(86,136,186,.12)}

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — v27.4 Cohesive premium layer
   Objetivo: coherencia total sin tocar JS ni layout
   ══════════════════════════════════════════════════════════════════════════ */
.app-layout:not([data-theme]){
  --aquo-accent:#2f8fe8;
  --aquo-accent-strong:#1f5fb4;
  --aquo-accent-soft:rgba(47,143,232,.12);
  --aquo-line:rgba(125,170,220,.22);
  --aquo-line-strong:rgba(96,146,201,.28);
  --aquo-surface-top:rgba(255,255,255,.97);
  --aquo-surface-bottom:rgba(243,249,255,.94);
  --aquo-shadow:rgba(58,112,170,.10);
  --aquo-shadow-strong:rgba(58,112,170,.16);
  --aquo-icon:#6f8fb1;
  --aquo-icon-active:#2f8fe8;
  --aquo-kicker-bg:linear-gradient(135deg, rgba(255,248,232,.95), rgba(246,237,212,.90));
  --aquo-kicker-fg:#9c7a27;
}
.app-layout[data-theme="silver"]{
  --aquo-accent:#8ea3b8;
  --aquo-accent-strong:#546679;
  --aquo-accent-soft:rgba(142,163,184,.14);
  --aquo-line:rgba(160,172,186,.24);
  --aquo-line-strong:rgba(132,147,163,.32);
  --aquo-surface-top:rgba(255,255,255,.96);
  --aquo-surface-bottom:rgba(240,243,247,.94);
  --aquo-shadow:rgba(88,101,116,.10);
  --aquo-shadow-strong:rgba(88,101,116,.16);
  --aquo-icon:#8193a6;
  --aquo-icon-active:#667c92;
  --aquo-kicker-bg:linear-gradient(135deg, rgba(248,250,252,.96), rgba(234,239,245,.92));
  --aquo-kicker-fg:#647789;
}
.app-layout[data-theme="gold"]{
  --aquo-accent:#c59a46;
  --aquo-accent-strong:#9b7a31;
  --aquo-accent-soft:rgba(197,154,70,.14);
  --aquo-line:rgba(201,168,76,.24);
  --aquo-line-strong:rgba(186,143,56,.32);
  --aquo-surface-top:rgba(255,255,255,.97);
  --aquo-surface-bottom:rgba(251,247,237,.95);
  --aquo-shadow:rgba(160,122,46,.11);
  --aquo-shadow-strong:rgba(160,122,46,.18);
  --aquo-icon:#a7874b;
  --aquo-icon-active:#b88f38;
  --aquo-kicker-bg:linear-gradient(135deg, rgba(255,249,236,.96), rgba(247,239,219,.92));
  --aquo-kicker-fg:#9b7a31;
}

/* Sistema único de botones: mismo lenguaje visual, distinta jerarquía */
.main-content .btn,
.main-content .home-water-hero__cta,
.main-content .agua-quick-btn,
.main-content .aquo-action-btn{
  border-radius:999px;
  border:1px solid var(--aquo-line);
  box-shadow:0 10px 24px var(--aquo-shadow), inset 0 1px 0 rgba(255,255,255,.92);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease, background .18s ease;
}
.main-content .btn:hover:not(:disabled),
.main-content .home-water-hero__cta:hover:not(:disabled),
.main-content .agua-quick-btn:hover:not(:disabled),
.main-content .aquo-action-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 14px 28px var(--aquo-shadow-strong), inset 0 1px 0 rgba(255,255,255,.96);
}
.main-content .btn-primary,
.main-content .home-water-hero__cta,
.main-content .agua-quick-btn,
.main-content .aquo-action-btn--blue{
  background:linear-gradient(180deg, color-mix(in srgb, var(--aquo-accent) 84%, white), var(--aquo-accent));
  border-color:color-mix(in srgb, var(--aquo-accent) 74%, white);
}
.main-content .btn-secondary,
.main-content .aquo-action-btn:not(.aquo-action-btn--blue):not(.aquo-action-btn--gold){
  background:linear-gradient(180deg, rgba(255,255,255,.96), color-mix(in srgb, var(--aquo-surface-bottom) 86%, white));
  color:var(--aquo-accent-strong);
  border-color:var(--aquo-line-strong);
}
.main-content .btn-gold,
.main-content .aquo-action-btn--gold{
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold-light) 64%, white), var(--gold));
  border-color:rgba(201,168,76,.30);
}

/* Cards: más vida, misma estructura */
.main-content .card,
.main-content .stat-card,
.main-content .mg-card,
.main-content .qa-item,
.main-content .ctx-card,
.main-content .home-summary-card,
.main-content .aquo-stat-card{
  background:linear-gradient(180deg, var(--aquo-surface-top), var(--aquo-surface-bottom));
  border:1px solid var(--aquo-line);
  box-shadow:0 12px 30px var(--aquo-shadow), inset 0 1px 0 rgba(255,255,255,.92);
}
.main-content .card:hover,
.main-content .stat-card:hover,
.main-content .mg-card:hover,
.main-content .qa-item:hover,
.main-content .ctx-card:hover,
.main-content .home-summary-card:hover,
.main-content .aquo-stat-card:hover{
  border-color:var(--aquo-line-strong);
  box-shadow:0 16px 34px var(--aquo-shadow-strong), inset 0 1px 0 rgba(255,255,255,.96);
  transform:translateY(-2px);
}

/* Jerarquía visual de bloques y hero */
.main-content .aquo-section-hero,
.main-content .aquo-page-hero{
  border-color:var(--aquo-line-strong);
  box-shadow:0 18px 42px var(--aquo-shadow-strong), inset 0 1px 0 rgba(255,255,255,.94);
}
.main-content .aquo-section-kicker,
.main-content .aquo-page-kicker{
  background:var(--aquo-kicker-bg) !important;
  color:var(--aquo-kicker-fg) !important;
}
.main-content .aquo-section-title,
.main-content .aquo-page-title,
.main-content .aquo-summary-value,
.main-content .home-summary-card__value{
  color:var(--aquo-accent-strong) !important;
  letter-spacing:-.028em;
}
.main-content .aquo-section-subtitle,
.main-content .aquo-page-subtitle,
.main-content .aquo-summary-note,
.main-content .home-summary-card__meta,
.main-content .home-summary-card__muted{
  color:color-mix(in srgb, var(--aquo-accent-strong) 52%, #6f7f90) !important;
}
.main-content .aquo-summary-label,
.main-content .home-summary-card__eyebrow,
.main-content .quick-access__title,
.main-content .contextual-block__title{
  letter-spacing:.11em;
  color:color-mix(in srgb, var(--aquo-accent-strong) 46%, #8ea0b3) !important;
}
.main-content .home-hero-isotipo,
.main-content .status-hero__isotipo{
  filter:drop-shadow(0 10px 24px var(--aquo-shadow));
  opacity:.96;
}

/* Iconos y acentos: eliminar lila/verde/amarillo hardcoded y adaptarlos al tema */
.main-content .mg-card__icon,
.main-content .qa-item__icon,
.main-content .ctx-card__emoji,
.main-content .home-summary-card__emoji,
.main-content .home-today-chip__icon{
  color:var(--aquo-icon);
  opacity:.9;
}
.main-content .mg-card__value--water,
.main-content .mg-card__value--sleep,
.main-content .mg-card__cta,
.main-content .home-summary-card__value--water,
.main-content .home-summary-card__value--sleep{
  color:var(--aquo-accent-strong) !important;
}
.main-content .mg-sleep-dot--on,
.main-content .home-summary-card__meter-fill,
.main-content .mg-card__bar-fill{
  background:linear-gradient(90deg, color-mix(in srgb, var(--aquo-accent) 56%, white), var(--aquo-accent));
}
.main-content .home-summary-card__meter,
.main-content .mg-card__bar{
  background:color-mix(in srgb, var(--aquo-accent) 12%, white);
}
.main-content .home-chip--rose,
.main-content .home-chip--pink,
.main-content .home-chip--sand,
.main-content .aquo-chip--green,
.main-content .aquo-chip--gold{
  background:color-mix(in srgb, var(--aquo-accent) 10%, white);
  color:var(--aquo-accent-strong);
  border-color:color-mix(in srgb, var(--aquo-accent) 18%, white);
}

/* Bloques agua / sueño / peso: mejor separación título / valor / contexto */
.main-content .aquo-module-shell .peso-card,
.main-content .aquo-module-shell .hero-mini-card,
.main-content .aquo-module-shell .ctx-card,
.main-content .aquo-module-shell .mg-card{
  border-radius:22px;
}
.main-content .aquo-module-shell .peso-card-value,
.main-content .aquo-module-shell .hero-mini-card__value,
.main-content .aquo-module-shell .ctx-card__value,
.main-content .aquo-module-shell .mg-card__value{
  font-family:var(--font-serif);
  font-weight:600;
  letter-spacing:-.025em;
}
.main-content .aquo-module-shell .hero-mini-card__label,
.main-content .aquo-module-shell .ctx-card__label,
.main-content .aquo-module-shell .mg-card__label,
.main-content .aquo-module-shell .stat-label{
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — v27.5 coherence pass
   Solo CSS. Refuerza tema activo, heroes y presencia de isotipos sin tocar JS.
   ══════════════════════════════════════════════════════════════════════════ */
.app-layout:not([data-theme]){
  --aquo-shell-bg:#edf6fe;
  --aquo-shell-bg-2:#e5f1fb;
  --aquo-shell-line:rgba(120,166,214,.22);
  --aquo-shell-shadow:rgba(52,106,162,.10);
  --aquo-panel-top:rgba(255,255,255,.97);
  --aquo-panel-bottom:rgba(242,248,255,.95);
  --aquo-hero-top:rgba(246,251,255,.97);
  --aquo-hero-bottom:rgba(225,241,255,.93);
  --aquo-tint:rgba(62,145,226,.14);
  --aquo-soft-text:#6c8298;
  --aquo-title:#1459b2;
  --aquo-watermark:url('assets/icons/isotipo_base_t.png');
}
.app-layout[data-theme="silver"]{
  --aquo-shell-bg:#f3f6fa;
  --aquo-shell-bg-2:#e8edf3;
  --aquo-shell-line:rgba(145,159,176,.24);
  --aquo-shell-shadow:rgba(83,97,114,.10);
  --aquo-panel-top:rgba(255,255,255,.97);
  --aquo-panel-bottom:rgba(243,246,249,.94);
  --aquo-hero-top:rgba(248,250,252,.97);
  --aquo-hero-bottom:rgba(231,237,244,.94);
  --aquo-tint:rgba(154,170,189,.14);
  --aquo-soft-text:#6e7d8d;
  --aquo-title:#445567;
  --aquo-watermark:url('assets/icons/isotipo_plata_t.png');
}
.app-layout[data-theme="gold"]{
  --aquo-shell-bg:#faf6ee;
  --aquo-shell-bg-2:#f4ecd9;
  --aquo-shell-line:rgba(198,164,88,.24);
  --aquo-shell-shadow:rgba(146,114,48,.11);
  --aquo-panel-top:rgba(255,255,255,.97);
  --aquo-panel-bottom:rgba(251,246,235,.95);
  --aquo-hero-top:rgba(255,251,244,.97);
  --aquo-hero-bottom:rgba(245,236,214,.94);
  --aquo-tint:rgba(205,171,91,.14);
  --aquo-soft-text:#86704c;
  --aquo-title:#9a7428;
  --aquo-watermark:url('assets/icons/isotipo_oro_t.png');
}

.app-layout,
.main-content{
  background:linear-gradient(180deg,var(--aquo-shell-bg) 0%,var(--aquo-shell-bg-2) 100%);
}
.sidebar,
.content-header{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--aquo-panel-top) 92%, white),color-mix(in srgb,var(--aquo-panel-bottom) 96%, white));
  border-right:1px solid var(--aquo-shell-line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.5);
}
.sidebar-logo,
.content-header,
.sidebar-footer{
  border-color:var(--aquo-shell-line) !important;
}
.content-header{
  background:linear-gradient(180deg,color-mix(in srgb,var(--aquo-panel-top) 90%, white),color-mix(in srgb,var(--aquo-panel-bottom) 94%, white));
  box-shadow:0 14px 30px var(--aquo-shell-shadow);
}
.sidebar-logo .logo-text,
.greeting .header-title-main,
.greeting strong{
  color:var(--aquo-title) !important;
}
.nav-section-title,
.greeting .sub-greeting,
.greeting .quote,
.greeting small,
.sidebar-footer,
.sidebar-footer .btn,
.sidebar-footer span{
  color:var(--aquo-soft-text) !important;
}
.nav-item{
  color:color-mix(in srgb,var(--aquo-title) 72%, #2e3b4f) !important;
}
.nav-item .nav-icon,
.nav-item .nav-icon .aquo-icon,
.nav-item .nav-icon svg,
.nav-item .nav-icon img{
  color:color-mix(in srgb,var(--aquo-title) 78%, #90a4b8);
  opacity:.9;
}
.nav-item:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.92),color-mix(in srgb,var(--aquo-panel-bottom) 92%, white));
  box-shadow:0 12px 26px var(--aquo-shell-shadow);
}
.nav-item.active{
  background:linear-gradient(135deg,rgba(255,255,255,.96),color-mix(in srgb,var(--aquo-tint) 85%, white));
  box-shadow:0 14px 30px var(--aquo-shell-shadow), inset 0 1px 0 rgba(255,255,255,.95);
  outline:1px solid color-mix(in srgb,var(--aquo-title) 18%, white);
}
.nav-item.active .nav-icon,
.nav-item.active .nav-icon .aquo-icon,
.nav-item.active .nav-icon svg,
.nav-item.active .nav-icon img{
  color:var(--aquo-title);
  opacity:1;
}
.sidebar .btn-ghost,
.sidebar-footer .btn-ghost,
.sidebar-footer [data-action="logout"]{
  border-radius:16px;
  border:1px solid transparent;
}
.sidebar .btn-ghost:hover,
.sidebar-footer .btn-ghost:hover,
.sidebar-footer [data-action="logout"]:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.92),color-mix(in srgb,var(--aquo-tint) 78%, white));
  border-color:color-mix(in srgb,var(--aquo-title) 16%, white);
  color:var(--aquo-title) !important;
}

.status-hero,
.aquo-section-hero,
.aquo-page-hero,
.aquo-about-card,
.aquo-card-premium,
.aquo-list-card,
.aquo-surface,
.aquo-section-panel,
.aquo-module-shell .card,
.aquo-module-shell .stat-card,
.main-content .card,
.main-content .stat-card,
.main-content .mg-card,
.main-content .ctx-card,
.main-content .qa-item,
.main-content .home-summary-card,
.main-content .aquo-stat-card{
  background:linear-gradient(180deg,var(--aquo-panel-top),var(--aquo-panel-bottom)) !important;
  border-color:var(--aquo-shell-line) !important;
  box-shadow:0 16px 34px var(--aquo-shell-shadow), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.status-hero,
.aquo-section-hero,
.aquo-page-hero{
  background-image:
    var(--aquo-watermark),
    radial-gradient(circle at top right, color-mix(in srgb,var(--aquo-tint) 88%, white) 0%, transparent 20%),
    linear-gradient(180deg,var(--aquo-hero-top),var(--aquo-hero-bottom)) !important;
  background-repeat:no-repeat,no-repeat,no-repeat !important;
  background-position:right 18px bottom 0, right -16px top -24px, 0 0 !important;
  background-size:180px auto, 180px 180px, auto !important;
  overflow:hidden;
}
.status-hero::before,
.aquo-section-hero::before,
.aquo-page-hero::before{
  filter:blur(0) !important;
}
.status-hero__isotipo,
.home-hero-isotipo{
  opacity:.16 !important;
  filter:drop-shadow(0 10px 26px var(--aquo-shell-shadow)) saturate(1.08) !important;
}

.aquo-section-kicker,
.aquo-page-kicker,
.aquo-chip--green,
.aquo-chip--gold,
.aquo-nav-pill,
.aquo-edit-pill,
.aquo-hero-pill,
.aquo-chip-soft{
  border-color:color-mix(in srgb,var(--aquo-title) 20%, white) !important;
  color:var(--aquo-title) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.95),color-mix(in srgb,var(--aquo-tint) 72%, white)) !important;
  box-shadow:0 10px 24px var(--aquo-shell-shadow), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.aquo-section-title,
.aquo-page-title,
.aquo-about-card__title,
.aquo-section-headline__title,
.main-content .home-summary-card__value,
.main-content .aquo-summary-value,
.main-content .hero-mini-card__value,
.main-content .ctx-card__value,
.main-content .mg-card__value,
.main-content .peso-card-value,
.main-content .stat-card .stat-value,
.status-hero__state,
.status-hero__saludo strong,
.aquo-module-shell .card-header{
  color:var(--aquo-title) !important;
}
.aquo-section-subtitle,
.aquo-page-subtitle,
.aquo-about-card__text,
.aquo-section-headline__sub,
.aquo-soft-legend,
.main-content .home-summary-card__meta,
.main-content .home-summary-card__muted,
.main-content .aquo-summary-note,
.main-content .hero-mini-card__meta,
.main-content .ctx-card__meta,
.main-content .mg-card__meta,
.status-hero__msg,
.status-hero__fecha,
.status-hero__cita,
.status-hero__cita-author{
  color:var(--aquo-soft-text) !important;
}
.main-content .home-summary-card__eyebrow,
.main-content .hero-mini-card__label,
.main-content .ctx-card__label,
.main-content .mg-card__label,
.main-content .stat-label,
.aquo-about-card__eyebrow,
.quick-access__title,
.contextual-block__title,
.status-hero__eyebrow{
  color:color-mix(in srgb,var(--aquo-title) 52%, #8ea0b3) !important;
}
.main-content .mg-card__value--water,
.main-content .mg-card__value--sleep,
.main-content .home-summary-card__value--water,
.main-content .home-summary-card__value--sleep,
.main-content .mg-card__cta,
.aquo-list-card__status,
.aquo-about-card__cta{
  color:var(--aquo-title) !important;
}
.main-content .mg-card__bar,
.main-content .home-summary-card__meter{
  background:color-mix(in srgb,var(--aquo-title) 10%, white) !important;
}
.main-content .mg-card__bar-fill,
.main-content .home-summary-card__meter-fill,
.main-content .aquo-progress-fill,
.main-content .progress-fill,
.main-content .slider-fill{
  background:linear-gradient(90deg,color-mix(in srgb,var(--aquo-title) 58%, white),var(--aquo-title)) !important;
}

.aquo-segmented,
.aquo-module-shell .peso-tabs{
  background:color-mix(in srgb,var(--aquo-tint) 72%, white) !important;
  border-color:var(--aquo-shell-line) !important;
}
.aquo-segmented__item,
.aquo-module-shell .peso-tab-btn{
  color:var(--aquo-soft-text) !important;
}
.aquo-segmented__item.active,
.aquo-module-shell .peso-tab-btn.active{
  background:linear-gradient(135deg,rgba(255,255,255,.97),color-mix(in srgb,var(--aquo-tint) 62%, white)) !important;
  color:var(--aquo-title) !important;
  box-shadow:0 10px 20px var(--aquo-shell-shadow), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.btn-primary,
.main-content .btn-primary,
.main-content .status-hero__action--strong,
.main-content .home-water-hero__cta,
.main-content .agua-quick-btn,
.main-content .aquo-action-btn--blue{
  background:linear-gradient(180deg,color-mix(in srgb,var(--aquo-title,#1459b2) 78%, white),var(--aquo-title,#1459b2)) !important;
  border-color:color-mix(in srgb,var(--aquo-title,#1459b2) 24%, white) !important;
  color:#fff !important;
}
.btn-secondary,
.main-content .btn-secondary,
.main-content .btn-ghost,
.main-content .status-hero__action,
.main-content .aquo-action-btn:not(.aquo-action-btn--blue):not(.aquo-action-btn--gold){
  background:linear-gradient(180deg,rgba(255,255,255,.96),color-mix(in srgb,var(--aquo-tint) 58%, white)) !important;
  border-color:color-mix(in srgb,var(--aquo-title) 16%, white) !important;
  color:var(--aquo-title) !important;
}

.app-layout[data-theme="silver"] .greeting .header-title-main,
.app-layout[data-theme="silver"] .greeting strong,
.app-layout[data-theme="silver"] .status-hero__plan-badge,
.app-layout[data-theme="silver"] .theme-swatch.active .theme-swatch__label{
  color:#4c5e70 !important;
}
.app-layout[data-theme="gold"] .greeting .header-title-main,
.app-layout[data-theme="gold"] .greeting strong,
.app-layout[data-theme="gold"] .status-hero__plan-badge,
.app-layout[data-theme="gold"] .theme-swatch.active .theme-swatch__label{
  color:#9a7428 !important;
}
.app-layout:not([data-theme]) .status-hero__plan-badge,
.app-layout:not([data-theme]) .theme-swatch.active .theme-swatch__label{
  color:#1459b2 !important;
}

@media (max-width: 900px){
  .status-hero,
  .aquo-section-hero,
  .aquo-page-hero{
    background-size:132px auto, 120px 120px, auto !important;
    background-position:right 12px bottom -4px, right -12px top -18px, 0 0 !important;
  }
  .nav-item{min-height:50px}
}

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — v27.6 verified safe patch
   Solo CSS, propagación adicional para landing, header, rutinas, salud, cuenta.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) Header superior: más limpio y menos forzado */
.content-header{
  min-height:84px;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.greeting{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.greeting .header-title-main,
.greeting strong{
  font-size:clamp(24px,3.2vw,38px) !important;
  line-height:1.02 !important;
}
.greeting .quote,
.greeting small,
.greeting .sub-greeting{
  font-size:clamp(12px,1.4vw,16px) !important;
  opacity:.92;
}
.header-isotipo{margin-right:8px !important}
.header-avatar{width:52px;height:52px}

/* 2) Landing pública: CTA y navegación más coherentes */
.landing-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,252,255,.94));
  border-bottom:1px solid rgba(125,170,220,.14);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.landing-nav-login{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(125,170,220,.16) !important;
  color:#4a5565 !important;
  box-shadow:0 8px 18px rgba(88,124,160,.06);
}
.landing-nav-cta,
.hero-cta .btn-primary{
  box-shadow:0 14px 30px rgba(33,150,243,.18) !important;
}
.hero-cta .btn-secondary{
  background:rgba(255,255,255,.92) !important;
  color:#2c3642 !important;
  border:2px solid rgba(44,54,66,.72) !important;
}
.hero-title{
  letter-spacing:-.045em;
  line-height:.95;
}
.hero-subtitle{
  max-width:700px;
  color:#4e6174;
}

/* 3) Rutinas: asegurar cabecera visible y chrome consistente */
#rutinas-root{
  max-width:920px !important;
  gap:18px !important;
}
#rutinas-root > div:first-child{
  padding-top:4px;
}
#rutinas-tabs{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,249,253,.94)) !important;
  border:1px solid var(--aquo-shell-line, rgba(125,170,220,.16)) !important;
  border-radius:24px !important;
  box-shadow:0 14px 28px rgba(86,136,186,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.rutinas-tab-btn{
  min-height:58px;
  border-radius:20px !important;
}
.rutinas-tab-btn.active{
  box-shadow:0 10px 22px rgba(86,136,186,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* 4) Salud hub y submódulos: subir nivel sin tocar estructura */
.aquo-list-card{
  border-radius:22px !important;
  border:1px solid var(--aquo-shell-line, rgba(125,170,220,.16)) !important;
  box-shadow:0 16px 30px rgba(86,136,186,.07), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.aquo-list-card:hover{
  transform:translateY(-2px);
}
.aquo-page-shell{
  max-width:980px !important;
}
.aquo-page-title{
  line-height:.98;
  letter-spacing:-.04em;
}
.btn-hallazgo{
  border-radius:18px !important;
  box-shadow:0 8px 18px rgba(86,136,186,.05);
}
.btn-hallazgo:hover{
  transform:translateY(-1px);
}

/* 5) Mi cuenta: superficie más integrada con tema activo */
#app [onclick="cuentaShowEdit()"]{
  border-radius:16px !important;
  box-shadow:0 10px 22px rgba(86,136,186,.08);
}
#app #idioma-aquo-select,
#app #peso-unidad-select,
#app input[type="date"],
#app select,
#app textarea{
  border-color:color-mix(in srgb,var(--aquo-title, #1459b2) 18%, white) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}

/* 6) Sobre AQUO: hero y bloques más integrados */
#app .section-title,
#app .section-subtitle{
  max-width:860px;
}
#app [style*="background:linear-gradient(160deg,var(--primary-dark) 0%,var(--primary) 100%)"]{
  box-shadow:0 24px 44px rgba(33,150,243,.16), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* 7) Colores de estados hardcoded: suavizado global seguro */
#app [style*="color:#C62828"],
#app [style*="color: #C62828"]{color:#c14545 !important}
#app [style*="color:#E65100"],
#app [style*="color: #E65100"]{color:#b96e28 !important}
#app [style*="background:#FFEBEE"],
#app [style*="background: #FFEBEE"]{background:#fbf1f1 !important}

@media (max-width: 900px){
  .content-header{min-height:72px;padding-top:10px !important;padding-bottom:10px !important}
  .greeting .header-title-main,
  .greeting strong{font-size:clamp(20px,7vw,30px) !important}
  #rutinas-tabs{border-radius:20px !important}
}

/* ========================================================================
   v27.7 — propagation hardening
   Objetivo: cerrar pantallas aún no consolidadas sin tocar lógica.
   Áreas: header global, landing pública, rutinas, salud hub, salud submódulos,
   mi cuenta, sobre AQUO, informes.
   ======================================================================== */

/* Header global: menos mezcla visual, más jerarquía quiet luxury */
.content-header > div:first-child,
.content-header > div:last-child{position:relative;z-index:1}
.greeting{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.18em;
  font-family:var(--font-serif) !important;
  font-size:clamp(24px,3vw,42px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  color:var(--aquo-title,#1459b2) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.greeting span{
  color:color-mix(in srgb,var(--aquo-title,#1459b2) 72%, var(--gold-dark,#a07828)) !important;
}
#cita-diaria{
  margin-top:2px;
  font-family:var(--font-serif);
  font-size:clamp(13px,1.3vw,17px);
  color:var(--aquo-sub,#7a8ca3) !important;
  opacity:.96;
}
.content-header .btn.btn-gold,
.content-header [data-plan="premium"],
.content-header [data-plan="premium_plus"]{
  box-shadow:0 8px 18px rgba(166,125,39,.12), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* Landing pública: CTA primario visible, top bar más cuidada y hero más legible */
.hero-section{border-top:1px solid rgba(125,170,220,.08)}
.hero-content > div:first-of-type{
  background:rgba(233,245,255,.9) !important;
  border-color:rgba(125,170,220,.28) !important;
  color:var(--primary-dark) !important;
  font-weight:700 !important;
}
.hero-cta .btn-primary,
.landing-nav-cta{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
.hero-cta .btn-primary{opacity:1 !important}
.hero-cta .btn-secondary:hover,
.landing-nav-login:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(86,136,186,.10);
}
.hero-visual-col > div:last-child{
  border:1px solid rgba(255,255,255,.18);
}
.hero-subtitle,
.hero-content p:last-child{max-width:580px}

/* Rutinas: propagar hero y tabs, evitando sensación básica */
#rutinas-root > div:first-child{
  padding:20px 18px 8px;
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,251,255,.40));
  border:1px solid rgba(125,170,220,.14);
  box-shadow:0 20px 38px rgba(86,136,186,.07), inset 0 1px 0 rgba(255,255,255,.85);
  margin-bottom:12px;
}
#rutinas-root h1{
  font-size:clamp(36px,4.8vw,56px) !important;
  line-height:.98 !important;
  letter-spacing:-.04em !important;
}
#rutinas-root > div:first-child > div:last-child .btn{
  min-height:56px;
  border-radius:18px !important;
}
#rutinas-root > div:first-child > div:last-child .btn-secondary{
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(125,170,220,.18) !important;
}
#rutinas-tabs{padding:8px !important; gap:10px !important}
#rutinas-tabs .rutinas-tab-btn:last-child{color:var(--text-mid) !important; font-weight:600 !important}
#rutinas-root .rutinas-seccion > div:first-child,
#rutinas-root [id="rutinas-secciones"] > div > div:first-child{
  color:var(--aquo-sub,#73839a) !important;
}

/* Informes: subir tarjetas y hero */
.aquo-informes-page .aquo-unified-hero{
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(243,248,253,.78)) !important;
  border:1px solid rgba(125,170,220,.16) !important;
  box-shadow:0 22px 40px rgba(86,136,186,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.aquo-module-card{
  border-radius:22px !important;
  box-shadow:0 16px 30px rgba(86,136,186,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.aquo-module-card__footer .aquo-action-btn{border-radius:16px !important}

/* Salud hub: cards más premium y hero más completo */
.aquo-page-hero{
  border-radius:30px !important;
  padding:34px 36px !important;
  background:linear-gradient(180deg,var(--aquo-hero-top),var(--aquo-hero-bottom)) !important;
  border:1px solid rgba(125,170,220,.18) !important;
  box-shadow:0 24px 46px rgba(86,136,186,.09), inset 0 1px 0 rgba(255,255,255,.88);
}
.aquo-page-kicker{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(201,168,76,.22);
  padding:10px 16px;
  border-radius:999px;
  display:inline-flex;
  width:max-content;
  box-shadow:0 8px 18px rgba(160,124,42,.06);
}
.aquo-list-card{
  min-height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(251,252,255,.95)) !important;
}
.aquo-list-card .hub-card-water-accent{opacity:.12 !important}

/* Salud submódulos: crear marco unificado aunque el JS no traiga clases */
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"],
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"]{
  gap:22px !important;
}
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"] > div:first-child,
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"] > div:first-child{
  padding:10px 2px 2px;
}
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"] > div:first-child h1,
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"] > div:first-child h1{
  font-size:clamp(34px,4.7vw,56px) !important;
  line-height:.98 !important;
  letter-spacing:-.04em !important;
  margin-bottom:8px !important;
}
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"] > div:first-child p,
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"] > div:first-child p{
  color:var(--aquo-sub,#728199) !important;
  font-size:15px !important;
}
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"] .card,
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"] .card{
  border-radius:22px !important;
  border:1px solid rgba(125,170,220,.16) !important;
  box-shadow:0 18px 34px rgba(86,136,186,.07), inset 0 1px 0 rgba(255,255,255,.86) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(251,252,255,.94)) !important;
}
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"] .card-header,
#module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"] .card-header{
  font-size:16px !important;
  color:var(--aquo-title,#1459b2) !important;
}
#module-area .btn-hallazgo{
  min-height:74px;
  box-shadow:0 10px 18px rgba(86,136,186,.06);
}

/* Mi cuenta: sí propagar la capa visual */
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"]{
  max-width:780px !important;
  gap:20px !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child{
  border-radius:28px !important;
  border:1px solid rgba(125,170,220,.16) !important;
  box-shadow:0 24px 44px rgba(86,136,186,.09), inset 0 1px 0 rgba(255,255,255,.86) !important;
  padding:34px 30px !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(2),
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(3){
  border-radius:24px !important;
  border:1px solid rgba(125,170,220,.14) !important;
  box-shadow:0 18px 34px rgba(86,136,186,.08), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child [style*="font-family:var(--font-serif)"][style*="font-size:clamp(24px,3.2vw,30px)"]{
  font-size:clamp(32px,4.4vw,44px) !important;
  line-height:.98 !important;
  letter-spacing:-.04em !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] button,
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] select{
  border-radius:16px !important;
}

/* Sobre AQUO: dejar de verse legacy */
#module-area > div[style*="max-width:900px"][style*="gap:0"]{
  max-width:980px !important;
  gap:0 !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child{
  border-radius:28px 28px 0 0 !important;
  box-shadow:0 24px 44px rgba(33,150,243,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:not(:first-child):not(:last-child){
  border-left:1px solid rgba(125,170,220,.10);
  border-right:1px solid rgba(125,170,220,.10);
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2){
  background:linear-gradient(180deg,rgba(233,245,255,.88),rgba(243,249,255,.92)) !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3),
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(4),
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(5){
  background:rgba(255,255,255,.96) !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:last-child{
  border-radius:0 0 28px 28px !important;
  box-shadow:0 24px 40px rgba(86,136,186,.08);
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] h1,
#module-area > div[style*="max-width:900px"][style*="gap:0"] h2,
#module-area > div[style*="max-width:900px"][style*="gap:0"] h3{
  letter-spacing:-.03em;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2) [style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] > div,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3) [style*="grid-template-columns:repeat(auto-fit,minmax(140px,1fr))"] > div{
  border-radius:16px !important;
  border:1px solid rgba(125,170,220,.14);
  box-shadow:0 12px 22px rgba(86,136,186,.06);
}

/* Suavizado seguro de colores conflictivos detectados en vídeo */
#app [style*="color:#B71C1C"],
#app [style*="color: #B71C1C"]{color:#a94c4c !important}
#app [style*="background:#FFF3E0"],
#app [style*="background: #FFF3E0"]{background:#fdf5ea !important}
#app [style*="background:#E8F5E9"],
#app [style*="background: #E8F5E9"]{background:#eff8f0 !important}
#app [style*="background:#F1F8E9"],
#app [style*="background: #F1F8E9"]{background:#f4f8ee !important}

@media (max-width: 780px){
  .content-header{padding-left:14px !important;padding-right:14px !important}
  .greeting{font-size:clamp(20px,8vw,30px) !important}
  #rutinas-root > div:first-child{padding:16px 14px 4px}
  .aquo-page-hero{padding:24px 18px !important;border-radius:24px !important}
  #module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child{padding:24px 18px !important}
}


/* ========================================================================
   v27.8 — visual propagation + landing top-scroll + icon split
   ======================================================================== */

/* Landing pública: el bloque logo de la barra vuelve al inicio y se siente clicable */
#landing-top-trigger{transition:transform .18s ease, opacity .18s ease}
#landing-top-trigger:hover{transform:translateY(-1px);opacity:.96}
#landing-top-nav{position:sticky;top:0;z-index:120}

/* Menú hamburguesa: dejar de parecer un parche flotante */
#menu-toggle{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid var(--aquo-shell-line, rgba(125,170,220,.16)) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.86)) !important;
  color:var(--aquo-sub, #67788e) !important;
  box-shadow:0 10px 22px var(--aquo-shell-shadow, rgba(86,136,186,.10)), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
#menu-toggle:hover{transform:translateY(-1px);color:var(--aquo-title, #1459b2) !important}
@media (min-width: 1100px){
  #menu-toggle{opacity:.78 !important}
}

/* Diario y citas: titulares e iconos más distintos visualmente */
.aquo-page-title{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.aquo-page-title::first-line{line-height:.92}

/* Mi cuenta: convertirlo en un bloque AQUO real */
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child{
  background:linear-gradient(135deg, color-mix(in srgb, var(--aquo-shell-bg, #edf6fe) 88%, white) 0%, rgba(255,255,255,.96) 72%) !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child > div:first-child > div:first-child > div{
  box-shadow:0 0 0 8px color-mix(in srgb, var(--aquo-title, #1459b2) 8%, white), 0 10px 24px var(--aquo-shell-shadow, rgba(86,136,186,.12)) !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child [style*="font-size:12px;color:var(--primary);opacity:0.65"]{
  color:var(--aquo-sub,#75879d) !important;
  opacity:1 !important;
  font-weight:600 !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(2),
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(3){
  background:linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--aquo-shell-bg, #edf6fe) 24%, white) 100%) !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(2) [style*="font-family:var(--font-serif);font-size:15px"],
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(3) [style*="font-family:var(--font-serif);font-size:15px"]{
  font-size:20px !important;
  color:var(--aquo-title,#1459b2) !important;
}

/* Sobre AQUO: menos legacy, más premium editorial */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child{
  position:relative;overflow:hidden;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child::after{
  content:"";position:absolute;inset:auto -40px -70px auto;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);pointer-events:none;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2) h2,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3) h2,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(4) h3,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(5) h3{
  font-size:clamp(28px,3.5vw,40px) !important;
  color:var(--aquo-title,#1459b2) !important;
  line-height:1.02 !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] p{
  color:var(--aquo-sub,#6f8094) !important;
}

/* Paneles secundarios: darles más presencia del tema sin gritar */
.aquo-page-kicker{letter-spacing:.18em !important}
.aquo-page-title{color:color-mix(in srgb, var(--aquo-title,#1459b2) 70%, #4d5c70) !important}
#cita-diaria{max-width:580px}

/* Salud y submódulos: mejorar lectura de avisos fuertes */
#module-area [style*="background:#FDECEC"],
#module-area [style*="background: #FDECEC"],
#module-area [style*="background:#fdecec"],
#module-area [style*="background: #fdecec"]{
  background:#fbf1f2 !important;
  border-color:rgba(196,96,96,.24) !important;
}
#module-area [style*="color:#D32F2F"],
#module-area [style*="color: #D32F2F"],
#module-area [style*="color:#e53935"],
#module-area [style*="color: #e53935"]{color:#bf5757 !important}

@media (max-width: 820px){
  .aquo-page-title{gap:10px}
  #module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child{padding:24px 18px !important}
}


/* ========================================================================
   v27.9 — rebuilt safe plus
   Capa extra de refinado visual sin tocar lógica
   ======================================================================== */

/* Header superior: compactar y alinear mejor saludo + isotipo */
.content-header{
  backdrop-filter:saturate(1.05) blur(10px);
}
.content-header .header-left,
.content-header > div:first-child{
  align-items:center !important;
}
.content-header .greeting,
.greeting{
  line-height:1.02 !important;
  letter-spacing:-0.02em !important;
}
#cita-diaria,
.content-header .quote,
.content-header [style*="font-style:italic"]{
  color:var(--aquo-sub,#7a8da4) !important;
}

/* Hamburguesa: todavía más integrada y menos invasiva */
#menu-toggle{
  border-radius:16px !important;
  box-shadow:0 8px 18px rgba(90,126,168,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Héroes: unificar más el ritmo y el título */
.aquo-page-hero{
  gap:22px !important;
  padding:28px 30px !important;
}
.aquo-page-title{
  letter-spacing:-0.03em !important;
  line-height:.96 !important;
}
.aquo-page-subtitle{
  max-width:840px;
  font-size:clamp(18px,2vw,22px) !important;
}
.aquo-page-kicker{
  display:inline-flex;align-items:center;min-height:42px;
  padding:0 20px !important;
  border-radius:999px !important;
}

/* Diario y Citas: reforzar identidad propia sin cambiar estructura */
.aquo-page-title .diary-icon,
.aquo-page-title .appointments-icon{display:inline-flex}
#module-area .aquo-page-shell .aquo-page-title{align-items:center !important}

/* Mi cuenta: bloque superior con más identidad y menos aspecto de tabla */
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child{
  border-radius:34px !important;
  box-shadow:0 18px 42px rgba(95,133,172,.12) !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(2),
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(3){
  border-radius:30px !important;
  box-shadow:0 14px 34px rgba(95,133,172,.09) !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] [style*="font-size:14px;color:var(--text-secondary)"]{
  color:var(--aquo-sub,#6d8095) !important;
}

/* Sobre AQUO: dar más editorialidad y mejor lectura */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(n+2){
  box-shadow:0 12px 30px rgba(95,133,172,.08);
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2) p,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3) p,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(4) p,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(5) p{
  font-size:18px !important;
  line-height:1.72 !important;
}

/* Salud: avisos y tarjetas un poco más premium y menos duros */
#module-area [style*="background:#FFF8E1"],
#module-area [style*="background: #FFF8E1"],
#module-area [style*="background:#fff8e1"]{background:#fdf8ee !important}
#module-area [style*="background:#E3F2FD"],
#module-area [style*="background: #E3F2FD"],
#module-area [style*="background:#e3f2fd"]{background:#eef6fd !important}
#module-area [style*="box-shadow:0 8px 24px rgba(0,0,0,0.06)"],
#module-area [style*="box-shadow: 0 8px 24px rgba(0,0,0,0.06)"]{
  box-shadow:0 16px 34px rgba(86,126,168,.10) !important;
}

/* Interacciones suaves en superficies principales */
.aquo-page-hero,
.aquo-about-card,
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(n+2){
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.aquo-about-card:hover,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(n+2):hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(86,126,168,.11);
}

@media (max-width: 820px){
  .aquo-page-hero{padding:24px 18px !important;gap:16px !important}
  .aquo-page-subtitle{font-size:clamp(16px,4.8vw,20px) !important}
}


/* ========================================================================
   v28 — icon system + account/settings polish + safer module fallback
   ======================================================================== */
.aquo-title-icon{width:1.08em;height:1.08em;object-fit:contain;vertical-align:-0.12em;flex:0 0 auto;filter:drop-shadow(0 6px 12px rgba(88,126,171,.12))}
.aquo-title-icon--diary{width:1.02em;height:1.02em;filter:drop-shadow(0 8px 14px rgba(120,90,160,.14))}
.aquo-title-icon--appointments{width:1.02em;height:1.02em;filter:drop-shadow(0 8px 14px rgba(99,142,196,.14))}
.aquo-title-icon--fallback{width:42px;height:42px}
.aquo-inline-icon{width:24px;height:24px;object-fit:contain;display:inline-block}
.aquo-inline-icon--pillar{width:28px;height:28px}

#menu-toggle{
  width:34px !important;height:34px !important;min-width:34px !important;
  border-radius:12px !important;border:1px solid rgba(150,173,198,.22) !important;
  background:rgba(255,255,255,.72) !important;backdrop-filter:blur(8px) saturate(1.08);
  box-shadow:0 6px 14px rgba(92,120,153,.08), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
#menu-toggle:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 10px 18px rgba(92,120,153,.12), inset 0 1px 0 rgba(255,255,255,.96) !important}
.content-header .header-left, .content-header > div:first-child{gap:14px !important}

.aquo-module-fallback{
  display:flex;align-items:center;gap:18px;padding:26px 24px;border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), color-mix(in srgb,var(--aquo-shell-bg,#edf6fe) 28%, white));
  border:1px solid rgba(132,167,204,.18);box-shadow:0 16px 30px rgba(92,120,153,.08);
  max-width:760px;margin:18px auto;
}
.aquo-module-fallback h3{margin:0 0 6px;font-family:var(--font-serif);font-size:28px;color:var(--aquo-title,#1857a4);letter-spacing:-.02em}
.aquo-module-fallback p{margin:0;color:var(--aquo-sub,#6c7d91);line-height:1.65}
.aquo-module-fallback__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width: 640px){.aquo-module-fallback{flex-direction:column;align-items:flex-start;padding:22px 18px}.aquo-module-fallback h3{font-size:24px}}

/* Mi cuenta — que la parte baja deje de parecer formulario genérico */
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(3) > div:last-child > div{
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,250,254,.92)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#module-area select[id$="-select"],
#idioma-aquo-select,#peso-unidad-select,#agua-intervalo-select{
  min-height:42px;border-radius:14px !important;border:1px solid rgba(137,167,199,.26) !important;
  background:linear-gradient(180deg,#fff,#f8fbff) !important;color:var(--aquo-title,#35536f) !important;
  padding:0 14px !important;box-shadow:0 6px 14px rgba(92,120,153,.05);
}
#module-area button[onclick*="cuentaGuardar"],
#module-area button[onclick*="openCustomerPortal"],
#module-area button[onclick*="openPaywall"]{
  border-radius:999px !important;min-height:40px;padding:0 16px !important;
}
#module-area > div[style*="max-width:640px"] [style*="font-size:13px;font-weight:600;color:var(--primary-dark)"]{
  color:var(--aquo-title,#1c5ba7) !important;
}

/* Sobre AQUO — mejor contraste y menos texto lavado */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child h1,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child h3{color:#fff !important;text-shadow:0 1px 0 rgba(0,0,0,.08)}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child p{color:rgba(255,255,255,.92) !important}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2) p:first-of-type,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3) p:first-of-type{color:var(--aquo-body,#495c72) !important}
#module-area > div[style*="max-width:900px"][style*="gap:0"] details{box-shadow:0 10px 22px rgba(92,120,153,.06)}

/* Diario y citas — titulares realmente distintos */
#module-area .aquo-page-title{column-gap:16px}

/* ========================================================================
   v29.1 — precise polish pass after visual review
   Objetivo: ocultar hamburguesa en desktop, enriquecer Rutinas,
   elevar Mi Cuenta, reforzar Sobre AQUO, unificar Salud y hacer visible el popup agua.
   ======================================================================== */

/* 1) Cabecera — en escritorio no debe existir el botón anclado */
@media (min-width: 981px){
  #menu-toggle{display:none !important}
  .content-header .header-left,
  .content-header > div:first-child{gap:18px !important}
}
@media (max-width: 980px){
  #menu-toggle{display:inline-flex !important}
}

/* 2) Rutinas — más presencia, mejor aire y tarjetas más táctiles */
#rutinas-root{
  gap:20px !important;
}
#rutinas-root > div:first-child{
  background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(248,251,255,.96) 55%,rgba(239,246,254,.94) 100%) !important;
  border:1px solid rgba(140,176,212,.18) !important;
  border-radius:32px !important;
  box-shadow:0 20px 44px rgba(92,120,153,.10) !important;
}
#rutinas-root > div:first-child > div:last-child .btn,
#rutinas-root > div:first-child > div:last-child button{
  min-height:50px !important;
  border-radius:20px !important;
  box-shadow:0 12px 26px rgba(92,120,153,.10) !important;
}
#rutinas-root .rutinas-seccion,
#rutinas-root #rutinas-tabs,
#rutinas-root [id="rutinas-secciones"] > div,
#rutinas-root .ejercicio-card,
#rutinas-root [id*="plantillas"],
#rutinas-root .card{
  border-radius:26px !important;
}
#rutinas-root #rutinas-tabs{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,249,254,.92)) !important;
  box-shadow:0 14px 30px rgba(92,120,153,.08) !important;
}
#rutinas-root .rutinas-tab-btn{
  min-height:54px !important;
  padding:0 28px !important;
  border-radius:18px !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
#rutinas-root .rutinas-tab-btn:hover{transform:translateY(-1px)}#rutinas-root .ejercicio-card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,254,.96)) !important;
  box-shadow:0 14px 28px rgba(92,120,153,.08) !important;
  overflow:hidden !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
#rutinas-root .ejercicio-card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(92,120,153,.11) !important;
}
#rutinas-root .btn-toggle-ej{padding:16px 18px !important}
#rutinas-root .ej-detalle{
  background:linear-gradient(180deg,rgba(247,250,254,.86),rgba(255,255,255,.96)) !important;
}
#rutinas-root [style*="10 SESIONES"],
#rutinas-root [style*="SESIONES · DE MENOR A MAYOR DIFICULTAD"]{
  letter-spacing:.06em !important;
}

/* 3) Mi Cuenta — una pasada premium extra sobre ajustes y acciones */
#module-area > div[style*="max-width:640px"]{
  gap:20px !important;
}
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:nth-child(3){
  border-radius:34px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,248,253,.96)) !important;
  box-shadow:0 18px 40px rgba(92,120,153,.09) !important;
}
#module-area > div[style*="max-width:640px"] [style*="Gestionar suscripción"],
#module-area > div[style*="max-width:640px"] button[onclick*="openCustomerPortal"],
#module-area > div[style*="max-width:640px"] button[onclick*="cuentaGuardar"],
#module-area > div[style*="max-width:640px"] button[onclick*="openPaywall"],
#module-area > div[style*="max-width:640px"] button[onclick*="logout"]{
  min-height:42px !important;
  border-radius:999px !important;
  box-shadow:0 10px 22px rgba(92,120,153,.08) !important;
}
#module-area > div[style*="max-width:640px"] [style*="Tema Visual"] ~ div,
#module-area > div[style*="max-width:640px"] [style*="Recordatorio de agua"] ~ div{
  color:var(--aquo-sub,#71849a) !important;
}
#module-area > div[style*="max-width:640px"] [style*="Política de privacidad"],
#module-area > div[style*="max-width:640px"] [style*="Términos de uso"],
#module-area > div[style*="max-width:640px"] [style*="aquoapp@gmail.com"]{
  box-shadow:0 8px 18px rgba(92,120,153,.06) !important;
}

/* 4) Sobre AQUO — isotipo vivo y más valor editorial */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child{
  position:relative;
  isolation:isolate;
  background:linear-gradient(135deg,#0f6bcf 0%, #2f8de7 58%, #62b8ff 100%) !important;
  box-shadow:0 22px 46px rgba(18,104,190,.18) !important;
}

/* Ciclo: usa aquo-module-shell + aquo-section-hero — sin override CSS necesario */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child::before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:34px;top:18px;
  background:url("assets/icons/isotipo_clean.png") center/contain no-repeat;
  opacity:.20;
  filter:drop-shadow(0 16px 38px rgba(255,255,255,.18));
  pointer-events:none;z-index:0;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child > *{position:relative;z-index:1}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(n+2){
  border-radius:30px !important;
  border:1px solid rgba(140,176,212,.16) !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2) h2,
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3) h2{
  color:color-mix(in srgb, var(--aquo-title,#1459b2) 78%, #475769) !important;
}

/* 5) Salud hub — hero y cards más premium */
#module-area .aquo-page-shell[style*="max-width:940px"] .aquo-page-hero{
  background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(243,248,254,.96) 70%,rgba(236,245,255,.94) 100%) !important;
  border:1px solid rgba(137,172,209,.18) !important;
  box-shadow:0 20px 42px rgba(92,120,153,.10) !important;
}
#module-area .aquo-page-shell[style*="max-width:940px"] .aquo-page-title{
  color:color-mix(in srgb, var(--aquo-title,#1459b2) 64%, #4a5b6f) !important;
}
#module-area .aquo-page-shell[style*="max-width:940px"] > div[style*="display:grid"] > div{
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,254,.96)) !important;
  box-shadow:0 16px 30px rgba(92,120,153,.08) !important;
  transition:transform .16s ease, box-shadow .16s ease !important;
}
#module-area .aquo-page-shell[style*="max-width:940px"] > div[style*="display:grid"] > div:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 36px rgba(92,120,153,.11) !important;
}

/* 6) Salud submódulos — más consistencia clínica, menos dureza */
#module-area > div[style*="max-width:560px"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"]{
  gap:18px !important;
}
#module-area > div[style*="max-width:560px"] > div,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] > div,
#module-area > div[style*="max-width:560px"] .card,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] .card{
  border-radius:28px !important;
}
#module-area > div[style*="max-width:560px"] h1,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{
  letter-spacing:-.035em !important;
  line-height:.96 !important;
  color:color-mix(in srgb, var(--aquo-title,#1459b2) 76%, #506072) !important;
  margin-bottom:10px !important;
}
#module-area > div[style*="max-width:560px"] .card,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] .card,
#module-area > div[style*="max-width:560px"] > div[style*="background:#fff"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] > div[style*="background:#fff"]{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,254,.96)) !important;
  border:1px solid rgba(137,172,209,.15) !important;
  box-shadow:0 16px 30px rgba(92,120,153,.07) !important;
}
#module-area > div[style*="max-width:560px"] [style*="background:#FFEBEE"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#FFEBEE"],
#module-area > div[style*="max-width:560px"] [style*="background:#FFF3E0"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#FFF3E0"],
#module-area > div[style*="max-width:560px"] [style*="background:#E3F2FD"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#E3F2FD"]{
  border-radius:18px !important;
}
#module-area > div[style*="max-width:560px"] input,
#module-area > div[style*="max-width:560px"] select,
#module-area > div[style*="max-width:560px"] textarea,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] input,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] select,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] textarea{
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 4px 12px rgba(92,120,153,.04) !important;
}

/* 7) Popup agua — hacerlo visible y 100% AQUO */
#popup-water.popup{
  z-index:9999 !important;
  bottom:24px !important;
  min-width:min(360px, calc(100vw - 24px)) !important;
  max-width:420px !important;
  border-radius:26px !important;
  padding:18px 20px 18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,250,255,.94)) !important;
  border:1px solid rgba(114,170,224,.18) !important;
  box-shadow:0 22px 44px rgba(34,110,190,.16), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
#popup-water .popup-text{
  color:var(--aquo-title,#1657a5) !important;
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
}#popup-water .btn{
  min-height:42px !important;
  border-radius:999px !important;
  box-shadow:0 10px 20px rgba(44,124,208,.14) !important;
}

@media (max-width: 820px){
  #rutinas-root > div:first-child{padding:18px 16px 8px !important;border-radius:24px !important}
  #popup-water.popup{left:50% !important;right:auto !important;width:calc(100vw - 20px) !important;min-width:0 !important}
  #module-area > div[style*="max-width:560px"] h1,
  #module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{font-size:clamp(28px,10vw,42px) !important}
  #module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child::before{width:150px;height:150px;right:16px;top:26px;opacity:.16}
}


/* ========================================================================
   v29.2 — precise corrective pass after user review
   Objetivo: quitar hamburguesa anclada, eliminar doble icono, enriquecer
   Rutinas, dar otra pasada a Mi Cuenta / Sobre AQUO / Salud y elevar popup agua.
   ======================================================================== */

/* 1) Cabecera — el botón no debe verse en desktop ni tablet amplia */
#menu-toggle{display:none !important}
@media (max-width: 640px){
  #menu-toggle{display:inline-flex !important}
}
.content-header .header-left,
.content-header > div:first-child{
  gap:16px !important;
}

/* 2) Títulos Diario / Citas — si hay doble icono, solo uno visible */
.aquo-page-title img + img,
.aquo-page-title .aquo-title-icon + .aquo-title-icon,
.aquo-page-title .aquo-title-icon + img{
  display:none !important;
}
.aquo-page-title .aquo-title-icon{
  width:1.14em !important;
  height:1.14em !important;
  margin-right:2px !important;
}

/* 3) Rutinas — más ricas, táctiles y ordenadas */
#rutinas-root > div:first-child{
  padding:30px 28px 18px !important;
}
#rutinas-root > div:first-child .aquo-page-title,
#rutinas-root > div:first-child h1{
  color:color-mix(in srgb, var(--aquo-title,#1459b2) 76%, #435569) !important;
}
#rutinas-root > div:first-child p{
  max-width:760px !important;
}
#rutinas-root #rutinas-tabs{
  padding:12px !important;
  border:1px solid rgba(138,174,210,.16) !important;
}
#rutinas-root .rutinas-tab-btn,
#rutinas-root .aquo-segmented__item{
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}
#rutinas-root .rutinas-tab-btn.active,
#rutinas-root .aquo-segmented__item.active{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.96)) !important;
  border:1px solid rgba(70,142,216,.18) !important;
}
#rutinas-root .ejercicio-card,
#rutinas-root .aquo-list-card{
  border:1px solid rgba(137,172,209,.14) !important;
  position:relative;
}
#rutinas-root .ejercicio-card::after,
#rutinas-root .aquo-list-card::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(180deg,#53b44d,#1f89d8);
  opacity:.9;
}
#rutinas-root .ej-detalle{
  border-top:1px solid rgba(137,172,209,.12) !important;
  padding-top:16px !important;
}
#rutinas-root .btn-toggle-ej,
#rutinas-root [onclick*="toggle"]{
  min-height:74px !important;
}

/* 4) Mi Cuenta — segunda pasada premium real */
#module-area > div[style*="max-width:640px"][style*="flex-direction:column"][style*="gap:18px"] > div:first-child{
  background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(245,249,255,.96) 64%,rgba(237,245,255,.94) 100%) !important;
  border:1px solid rgba(137,172,209,.18) !important;
}
#module-area > div[style*="max-width:640px"] > div:nth-child(3),
#module-area > div[style*="max-width:640px"] > div:nth-child(4){
  border-radius:32px !important;
  border:1px solid rgba(137,172,209,.14) !important;
  box-shadow:0 18px 36px rgba(92,120,153,.08) !important;
}
#module-area > div[style*="max-width:640px"] [style*="Tema Visual"],
#module-area > div[style*="max-width:640px"] [style*="Cuenta y sesión"],
#module-area > div[style*="max-width:640px"] [style*="Recordatorio de agua"]{
  color:color-mix(in srgb, var(--aquo-title,#1459b2) 70%, #536274) !important;
}
#module-area > div[style*="max-width:640px"] [style*="Política de privacidad"],
#module-area > div[style*="max-width:640px"] [style*="Términos de uso"],
#module-area > div[style*="max-width:640px"] [style*="aquoapp@gmail.com"],
#module-area > div[style*="max-width:640px"] button[onclick*="logout"]{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,249,255,.95)) !important;
  border:1px solid rgba(137,172,209,.16) !important;
}

/* 5) Sobre AQUO — más editorial, más isotipo, más contraste */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child{
  overflow:hidden !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child::before{
  width:300px !important;
  height:300px !important;
  right:18px !important;
  top:-10px !important;
  opacity:.28 !important;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:first-child::after{
  content:"";
  position:absolute;
  inset:auto auto -110px -70px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(2),
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(3),
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(4),
#module-area > div[style*="max-width:900px"][style*="gap:0"] > div:nth-child(5){
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,254,.96)) !important;
  box-shadow:0 16px 30px rgba(92,120,153,.08) !important;
}

/* 6) Salud hub y submódulos — más AQUO, menos básico */
#module-area .aquo-page-shell[style*="max-width:940px"] .aquo-page-hero{
  padding:34px 34px 26px !important;
}
#module-area .aquo-page-shell[style*="max-width:940px"] > div[style*="display:grid"] > div{
  overflow:hidden !important;
  border:1px solid rgba(137,172,209,.14) !important;
}
#module-area .aquo-page-shell[style*="max-width:940px"] > div[style*="display:grid"] > div::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg,#a9e3db,#b9dfff,#e7d3ff);
  opacity:.95;
}
#module-area > div[style*="max-width:560px"] h1,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{
  font-size:clamp(38px,5vw,68px) !important;
  max-width:920px !important;
}
#module-area > div[style*="max-width:560px"] [style*="background:#FFEBEE"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#FFEBEE"]{
  background:linear-gradient(180deg,rgba(255,244,245,.96),rgba(255,250,250,.94)) !important;
  border:1px solid rgba(224,97,108,.18) !important;
}
#module-area > div[style*="max-width:560px"] [style*="background:#FFF3E0"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#FFF3E0"]{
  background:linear-gradient(180deg,rgba(255,248,240,.96),rgba(255,252,248,.94)) !important;
  border:1px solid rgba(224,146,74,.16) !important;
}
#module-area > div[style*="max-width:560px"] [style*="background:#E3F2FD"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#E3F2FD"]{
  background:linear-gradient(180deg,rgba(238,247,255,.96),rgba(248,252,255,.94)) !important;
  border:1px solid rgba(78,148,216,.14) !important;
}
#module-area > div[style*="max-width:560px"] .aquo-segmented,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] .aquo-segmented{
  padding:10px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(244,249,255,.92),rgba(238,245,253,.94)) !important;
}

/* 7) Popup agua — isotipo protagonista dentro de gota AQUO */
#popup-water.popup{
  border-radius:34px !important;
  padding:24px 24px 22px !important;
}
#popup-water .popup-icon{
  width:84px;
  height:84px;
  margin:0 auto 10px !important;
  position:relative;
  border-radius:52% 52% 58% 58% / 46% 46% 68% 68%;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 10%, rgba(157,222,255,.95) 22%, rgba(88,176,255,.96) 58%, rgba(45,118,215,.98) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75), 0 14px 30px rgba(45,118,215,.22);
  transform:rotate(45deg);
}
#popup-water .popup-icon img{
  width:42px !important;
  height:42px !important;
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%) rotate(-45deg);
  filter:drop-shadow(0 6px 12px rgba(255,255,255,.22));
}#popup-water .popup-text span{
  display:block;
  margin-top:8px;
  font-size:14px !important;
}
#popup-water .btn{
  min-width:180px !important;
  margin:6px auto 0 !important;
  display:inline-flex !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#ffffff,#f2f8ff) !important;
  color:var(--aquo-title,#1459b2) !important;
  border:1px solid rgba(114,170,224,.26) !important;
}
@media (max-width: 780px){
  #rutinas-root > div:first-child{padding:22px 18px 14px !important}
  #module-area > div[style*="max-width:560px"] h1,
  #module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{font-size:clamp(30px,9vw,46px) !important}
}

/* ========================================================================
   v29.3 — targeted polish after detailed visual review
   ======================================================================== */

/* Header: hide anchored menu button in desktop/tablet and reclaim space */
.content-header #menu-toggle,
#menu-toggle{
  display:none !important;
}
@media (max-width: 760px){
  .content-header #menu-toggle,
  #menu-toggle{
    display:inline-flex !important;
  }
}
.content-header .header-left,
.content-header > div:first-child{
  gap:14px !important;
  align-items:flex-start !important;
}

/* Diary / appointments: never show legacy placeholder icon */
.aquo-page-title > img:nth-child(2),
.aquo-page-title > .aquo-title-icon + img,
.aquo-page-title > img + .aquo-title-icon{
  display:none !important;
}
.aquo-page-title{
  align-items:center !important;
  gap:18px !important;
}

/* Water popup: more AQUO / more water / droplet silhouette */
#popup-water.popup{
  width:min(420px, calc(100vw - 28px)) !important;
  border-radius:36px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.98) 0 8%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 82% 18%, rgba(180,228,255,.30), rgba(180,228,255,0) 38%),
    linear-gradient(180deg, rgba(247,252,255,.98), rgba(235,246,255,.97)) !important;
  border:1px solid rgba(104,177,232,.22) !important;
  box-shadow:0 26px 54px rgba(39,114,191,.18), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
#popup-water .popup-icon{
  width:96px !important;
  height:118px !important;
  margin:2px auto 10px !important;
  border-radius:58% 58% 68% 68% / 40% 40% 76% 76% !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.96) 0 8%, rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #b8ecff 0%, #74c8ff 28%, #4099f4 68%, #4e66f2 100%) !important;
  transform:rotate(45deg) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.82),
    0 18px 34px rgba(45,118,215,.22),
    0 0 0 10px rgba(180,228,255,.10) !important;
}
#popup-water .popup-icon img{
  width:48px !important;
  height:48px !important;
  transform:translate(-50%,-50%) rotate(-45deg) !important;
  filter:drop-shadow(0 8px 18px rgba(255,255,255,.34)) !important;
}
#popup-water .popup-text{
  text-align:center !important;
  color:#155aab !important;
  font-size:22px !important;
  font-weight:800 !important;
}
#popup-water .popup-text span{
  color:#6f88a2 !important;
  font-size:15px !important;
  font-weight:600 !important;
}
#popup-water .btn{
  background:linear-gradient(180deg, #ffffff, #eef7ff) !important;
  color:#1458aa !important;
  border:1px solid rgba(104,177,232,.24) !important;
  box-shadow:0 12px 24px rgba(104,177,232,.14) !important;
}

/* Routines: richer hero and movement cards */
#rutinas-root > div:first-child,
#rutinas-root .aquo-page-hero{
  background:
    radial-gradient(circle at 86% 14%, rgba(181,222,255,.28), rgba(181,222,255,0) 22%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.96)) !important;
  border:1px solid rgba(134,173,211,.18) !important;
  box-shadow:0 22px 42px rgba(92,120,153,.10) !important;
}
#rutinas-root .aquo-page-hero .btn,
#rutinas-root > div:first-child .btn{
  min-height:64px !important;
  border-radius:24px !important;
  font-size:18px !important;
  font-weight:800 !important;
}
#rutinas-root .aquo-segmented,
#rutinas-root #rutinas-tabs{
  background:linear-gradient(180deg, rgba(248,251,255,.98), rgba(240,247,255,.95)) !important;
  border-radius:28px !important;
  box-shadow:0 14px 28px rgba(92,120,153,.08) !important;
}
#rutinas-root [class*="movimiento"] [style*="border-radius:18px"],
#rutinas-root .ejercicio-card,
#rutinas-root .aquo-list-card,
#rutinas-root .rutina-card{
  border-radius:26px !important;
  box-shadow:0 16px 30px rgba(92,120,153,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#rutinas-root [class*="movimiento"] [style*="border-radius:18px"]:hover,
#rutinas-root .ejercicio-card:hover,
#rutinas-root .aquo-list-card:hover,
#rutinas-root .rutina-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(92,120,153,.12) !important;
}

/* Account: refine settings blocks and footer actions */
#module-area > div[style*="max-width:640px"] > div:nth-child(2),
#module-area > div[style*="max-width:640px"] > div:nth-child(3),
#module-area > div[style*="max-width:640px"] > div:nth-child(4){
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,250,255,.96)) !important;
  border:1px solid rgba(134,173,211,.16) !important;
  box-shadow:0 18px 34px rgba(92,120,153,.08) !important;
}
#module-area > div[style*="max-width:640px"] select,
#module-area > div[style*="max-width:640px"] input[type="text"],
#module-area > div[style*="max-width:640px"] input[type="number"]{
  min-height:46px !important;
  border-radius:18px !important;
}
#module-area > div[style*="max-width:640px"] .btn,
#module-area > div[style*="max-width:640px"] button{
  border-radius:18px !important;
}

/* About AQUO: stronger editorial lower blocks */
.aquo-about-accordion details{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,254,.96));
  border:1px solid rgba(134,173,211,.16);
  border-radius:20px;
  padding:16px 18px;
  box-shadow:0 14px 28px rgba(92,120,153,.07);
}
.aquo-about-accordion summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  color:var(--aquo-title,#1459b2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.aquo-about-accordion summary::-webkit-details-marker{display:none}
.aquo-about-accordion .aquo-about-open{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(33,150,243,.08);color:var(--aquo-title,#1459b2);
  flex:0 0 auto;
}
.aquo-about-accordion details[open] .aquo-about-open{transform:rotate(45deg)}
.aquo-about-footer{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #0f5ec8 0%, #1579e8 58%, #44a8ff 100%) !important;
  border-radius:0 0 30px 30px !important;
}
.aquo-about-footer::before{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-48px;
  width:240px;height:240px;
  background:url("assets/icons/isotipo_base_t.png") center/contain no-repeat;
  opacity:.22;
  pointer-events:none;
}
.aquo-about-footer .aquo-footer-kicker{color:rgba(255,255,255,.78) !important}
.aquo-about-footer .aquo-footer-text{color:rgba(255,255,255,.92) !important}
/* Health hub and submodules: more cohesive clinical premium */
#module-area .aquo-page-shell[style*="max-width:940px"] > div[style*="display:grid"] > div,
#module-area > div[style*="max-width:560px"] > div,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] > div{
  border-radius:26px !important;
}
#module-area .aquo-page-shell[style*="max-width:940px"] > div[style*="display:grid"] > div:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(92,120,153,.10) !important;
}
#module-area > div[style*="max-width:560px"] h1,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{
  color:color-mix(in srgb, var(--aquo-title,#1459b2) 78%, #4b5d73) !important;
}


/* === v29.4 real readability + footer + routines/health uplift === */

/* Footer discreto global en cada bloque */
.aquo-module-tail{display:flex;justify-content:center;margin:22px 0 4px;padding-bottom:6px;}
.aquo-module-tail__inner{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,249,255,.82));border:1px solid rgba(134,173,211,.16);box-shadow:0 10px 20px rgba(92,120,153,.06);color:rgba(85,105,131,.82);font-size:11px;letter-spacing:.04em;}
.aquo-module-tail__drop{width:10px;height:10px;display:inline-block;flex:0 0 auto;background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 36%), linear-gradient(180deg,#78c8ff 0%, #2e8cff 100%);clip-path:path("M 5 0 C 4 1 0 4 0 7 A 5 5 0 0 0 10 7 C 10 4 6 1 5 0 Z");border-radius:60% 60% 70% 70%;box-shadow:0 0 0 3px rgba(95,171,240,.08);}
.aquo-module-tail__brand{font-weight:800;color:var(--primary-dark)}
.aquo-module-tail__sep{opacity:.38}

/* Popup agua: más agua, más lectura, más isotipo */
#popup-water.popup{width:min(520px, calc(100vw - 24px)) !important;border-radius:36px !important;padding:24px 24px 22px !important;background:radial-gradient(circle at 22% 12%, rgba(194,232,255,.55), rgba(194,232,255,0) 24%), radial-gradient(circle at 82% 84%, rgba(154,214,255,.28), rgba(154,214,255,0) 20%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.96)) !important;border:1px solid rgba(126,183,233,.22) !important;box-shadow:0 24px 52px rgba(72,123,177,.18) !important;}
#popup-water .popup-water-drop{position:relative;width:100%;display:flex;align-items:center;justify-content:center;margin:0 0 8px;}
#popup-water .popup-water-drop__halo{position:absolute;width:124px;height:124px;border-radius:50%;background:radial-gradient(circle, rgba(124,199,255,.28), rgba(124,199,255,0) 68%);filter:blur(1px);}
#popup-water .popup-water-drop__shape{position:relative;width:92px;height:118px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.92), rgba(255,255,255,0) 26%), linear-gradient(180deg, rgba(158,222,255,.96), rgba(62,149,255,.92) 58%, rgba(30,115,236,.96) 100%);clip-path:path("M 46 3 C 42 11 10 40 10 72 A 36 36 0 0 0 82 72 C 82 40 50 11 46 3 Z");border-radius:60% 60% 78% 78%;box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 20px 34px rgba(76,146,219,.22);}
#popup-water .popup-water-drop__shape img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(255,255,255,.32));}
#popup-water .popup-text--water{text-align:center;font-size:17px !important;font-weight:800 !important;line-height:1.35;color:#1459b2 !important;}
#popup-water .popup-text--water span{display:block;margin-top:10px;font-size:15px !important;font-weight:600 !important;line-height:1.55;color:rgba(72,100,136,.86) !important;}
#popup-water .popup-water-btn{margin-top:16px !important;padding:12px 24px !important;border-radius:999px !important;font-weight:800 !important;background:linear-gradient(180deg,#3f9dff,#1f7cf0) !important;box-shadow:0 14px 28px rgba(54,133,229,.24) !important;}

/* Sobre AQUO: subir contraste del footer final */
.aquo-about-footer .aquo-footer-text{color:rgba(255,255,255,.98) !important;text-shadow:0 1px 0 rgba(3,24,56,.18);}
.aquo-about-footer p:not(.aquo-footer-soft):not(.aquo-footer-kicker){color:rgba(255,255,255,.96) !important;}.aquo-about-footer a:last-child{background:rgba(255,255,255,.20) !important;border-color:rgba(255,255,255,.28) !important;}

/* Rutinas: volverlo más claro, táctil e intuitivo */
#rutinas-root{max-width:860px !important;gap:12px !important;}
#rutinas-root .rutinas-hero{background:radial-gradient(circle at 88% 12%, rgba(176,221,255,.30), rgba(176,221,255,0) 22%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.96)) !important;border:1px solid rgba(129,173,216,.18);border-radius:32px;padding:26px 26px 22px;box-shadow:0 20px 40px rgba(92,120,153,.10);}
#rutinas-root .rutinas-hero h1{font-size:clamp(42px,5vw,58px) !important;line-height:1 !important;}
#rutinas-root .rutinas-hero > div:last-child{align-self:stretch;}
#rutinas-root #rutinas-tabs.rutinas-tabs-shell{padding:8px !important;border-radius:24px !important;background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,249,255,.9)) !important;border:1px solid rgba(132,176,217,.18) !important;}#rutinas-root #tab-rutinas-content > div[style*="padding:18px 22px"]{border-radius:28px !important;}
#rutinas-root .rutinas-seccion{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,250,255,.76));border:1px solid rgba(128,172,214,.12);border-radius:24px;padding:18px 16px 14px;box-shadow:0 10px 24px rgba(92,120,153,.05);}
#rutinas-root .rutina-card{border-radius:22px !important;border-left-width:5px !important;box-shadow:0 14px 30px rgba(92,120,153,.08) !important;}
#rutinas-root .rutina-card-header{padding:16px 18px !important;}
#rutinas-root .rutina-card .rutina-nombre{font-size:16px !important;}
#rutinas-root .rutina-detalle{background:linear-gradient(180deg, rgba(249,252,255,.98), rgba(242,248,255,.95)) !important;}
#rutinas-root #tab-movimiento-content > div,#rutinas-root [class*="movimiento"] > div[style*="border-radius"]{border-radius:28px !important;box-shadow:0 18px 34px rgba(92,120,153,.09) !important;}
#rutinas-root .btn{min-height:54px;border-radius:20px !important;}
#rutinas-root .btn-primary{background:linear-gradient(180deg, #667891, #495d77) !important;box-shadow:0 16px 32px rgba(73,93,119,.22) !important;}

/* Salud hub: más volumen y mejor legibilidad */
.aquo-page-shell .aquo-page-hero{background:radial-gradient(circle at 84% 16%, rgba(181,221,255,.28), rgba(181,221,255,0) 20%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.96)) !important;border:1px solid rgba(132,176,217,.18) !important;border-radius:34px !important;box-shadow:0 20px 42px rgba(92,120,153,.10) !important;}
.aquo-page-shell .aquo-page-subtitle{color:rgba(77,99,126,.92) !important;max-width:640px;}
.aquo-list-card{border-radius:28px !important;border:1px solid rgba(132,176,217,.14) !important;box-shadow:0 16px 34px rgba(92,120,153,.08) !important;min-height:148px;}
.aquo-list-card .hub-card-water-accent{opacity:.14 !important}
.aquo-list-card:hover{transform:translateY(-3px) !important;box-shadow:0 24px 46px rgba(92,120,153,.12) !important;}
.aquo-list-card > div:first-child + div,.aquo-list-card > div:first-child + div + div{position:relative;z-index:2;}

/* Submódulos Salud: quitar sensación plana */
#module-area > div[style*="max-width:560px"],#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"]{max-width:860px !important;}
#module-area > div[style*="max-width:560px"] > div,#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] > div{box-shadow:0 16px 34px rgba(92,120,153,.08) !important;border-radius:28px !important;border:1px solid rgba(132,176,217,.14) !important;}
#module-area > div[style*="max-width:560px"] h1,#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{font-size:clamp(34px,5vw,58px) !important;line-height:1.05 !important;}
#module-area > div[style*="max-width:560px"] [style*="border-top:1px solid"],#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="border-top:1px solid"]{border-top-color:rgba(132,176,217,.14) !important;}
#module-area > div[style*="max-width:560px"] input,#module-area > div[style*="max-width:560px"] select,#module-area > div[style*="max-width:560px"] textarea,#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] input,#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] select,#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] textarea{border-radius:18px !important;min-height:46px;}

/* Mejorar legibilidad general en fondos azules/premium */
.aquo-about-footer, .aquo-about-footer *{-webkit-font-smoothing:antialiased;}

/* === v29.5 final design closure pass === */

/* 0) remove anchored controls that break composition during design phase */
/* #menu-toggle visibility is governed by the authoritative rule at end of file */
#aquo-emergency-fab{display:none !important;}

/* 1) global module footer: legal, links, more soul but discreet */
.aquo-module-tail{display:flex;justify-content:center;margin:24px 0 6px;padding:4px 0 8px;}
.aquo-module-tail__line{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}
.aquo-module-tail__line--bottom{font-size:11px;color:#7a8da4}
.aquo-module-tail__drop{width:12px;height:16px;background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,0) 32%),linear-gradient(180deg,#83d2ff,#2f89ff 70%,#1869df);clip-path:path("M 6 0 C 5 2 0 6 0 10 A 6 6 0 0 0 12 10 C 12 6 7 2 6 0 Z");border-radius:60% 60% 76% 76%;box-shadow:0 0 0 4px rgba(101,171,241,.08);}
.aquo-module-tail__brand{font-weight:900;color:#1459b2;letter-spacing:.08em}
.aquo-module-tail__legal{font-weight:800;color:#6f7f92}
.aquo-module-tail__link,.aquo-module-tail__social{color:#1459b2;text-decoration:none;font-weight:700}
.aquo-module-tail__sep{opacity:.32}
.aquo-module-tail__text{font-weight:600}

/* 2) popup water: teardrop silhouette, better contrast, visible isotipo */
#popup-water.popup{
  width:min(430px, calc(100vw - 20px)) !important;
  min-height:360px;
  border-radius:44% 44% 38% 38% / 14% 14% 20% 20% !important;
  padding:30px 26px 28px !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(223,243,255,.92), rgba(223,243,255,0) 24%),
    radial-gradient(circle at 78% 76%, rgba(176,221,255,.34), rgba(176,221,255,0) 22%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(238,247,255,.96)) !important;
  border:1px solid rgba(126,183,233,.22) !important;
  box-shadow:0 26px 58px rgba(72,123,177,.20) !important;
}
#popup-water.popup::before{
  content:"";position:absolute;top:-38px;left:50%;transform:translateX(-50%);
  width:132px;height:138px;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 24%),linear-gradient(180deg, rgba(162,226,255,.98), rgba(57,146,255,.95) 60%, rgba(23,108,228,.98));
  clip-path:path("M 66 2 C 60 14 12 56 12 100 A 54 54 0 0 0 120 100 C 120 56 72 14 66 2 Z");
  filter:drop-shadow(0 18px 30px rgba(74,142,220,.22));
}
#popup-water .popup-water-drop{margin-top:16px !important;margin-bottom:18px !important}
#popup-water .popup-water-drop__halo{width:150px;height:150px;background:radial-gradient(circle, rgba(124,199,255,.28), rgba(124,199,255,0) 70%)}
#popup-water .popup-water-drop__shape{width:114px;height:142px;clip-path:path("M 57 3 C 52 14 12 54 12 94 A 45 45 0 0 0 102 94 C 102 54 62 14 57 3 Z");border-radius:62% 62% 78% 78%;}
#popup-water .popup-water-drop__shape img{width:54px;height:54px;filter:drop-shadow(0 8px 16px rgba(255,255,255,.34));}
#popup-water .popup-text--water{font-size:18px !important;font-weight:900 !important;color:#155fbd !important;line-height:1.35;text-align:center;}
#popup-water .popup-text--water span{font-size:15px !important;font-weight:700 !important;color:#607996 !important;line-height:1.55}
#popup-water .popup-water-btn{min-width:190px;align-self:center;margin-top:18px !important;padding:14px 26px !important;background:linear-gradient(180deg,#4aa7ff,#1f7cf0) !important;color:#fff !important;border:none !important;box-shadow:0 16px 30px rgba(54,133,229,.26) !important;}

/* 3) routines hero and movement: stronger hierarchy and more intuitive cards */
#rutinas-root{max-width:980px !important;gap:16px !important}
#rutinas-root .rutinas-hero{
  display:grid !important;grid-template-columns:1.2fr .8fr;align-items:start;
  gap:18px !important;padding:34px 32px 26px !important;
  background:radial-gradient(circle at 88% 18%, rgba(178,221,255,.34), rgba(178,221,255,0) 18%),linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.96)) !important;
  border:1px solid rgba(132,176,217,.18) !important;border-radius:34px !important;
  box-shadow:0 22px 44px rgba(92,120,153,.11) !important;
}
#rutinas-root .rutinas-hero h1{font-size:clamp(48px,6vw,72px) !important;line-height:.98 !important;letter-spacing:-.04em !important;color:#2a61af !important}
#rutinas-root .rutinas-hero p{font-size:15px !important;line-height:1.75 !important;color:#617995 !important;max-width:680px !important}
#rutinas-root .rutinas-hero > div:last-child{justify-self:end;display:flex;align-items:flex-start;gap:12px}
#rutinas-root .rutinas-hero .btn-secondary,#rutinas-root .rutinas-hero .btn-primary{min-height:58px !important;padding-inline:22px !important;border-radius:20px !important;font-size:15px !important}
#rutinas-root #rutinas-tabs{padding:10px !important;border-radius:26px !important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,249,255,.90)) !important;box-shadow:0 16px 32px rgba(92,120,153,.08) !important;border:1px solid rgba(132,176,217,.16) !important}
#rutinas-root .rutinas-tab-btn{min-height:58px !important;padding:14px 24px !important;font-size:15px !important;border-radius:18px !important}
#mov-lista-root{max-width:980px !important;gap:24px !important}
#mov-lista-root > div:first-child{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,248,255,.95));border:1px solid rgba(132,176,217,.18);padding:24px;border-radius:30px;box-shadow:0 18px 38px rgba(92,120,153,.09)}
#mov-lista-root .btn-objetivo{min-width:180px !important;min-height:98px !important;border-radius:22px !important;padding:16px 18px !important;display:flex;flex-direction:column;justify-content:center;gap:4px}
#mov-lista-root .btn-sesion{padding:18px 20px !important;border-radius:24px !important;box-shadow:0 16px 34px rgba(92,120,153,.08) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,254,.96)) !important}
#mov-lista-root .btn-sesion > div:first-child{width:48px !important;height:48px !important;font-size:18px !important;border-radius:16px !important}
#mov-lista-root .btn-sesion div[style*="font-size:14px"]{font-size:17px !important;font-weight:800 !important;color:#334459 !important}
#mov-lista-root .btn-sesion div[style*="font-size:11px"]{font-size:13px !important;color:#74869a !important}
#mov-lista-root .btn-sesion:hover{transform:translateY(-3px);box-shadow:0 24px 44px rgba(92,120,153,.12) !important}

/* 4) health hub and submodules: richer cards and better typography */
.aquo-page-shell .aquo-page-title{font-size:clamp(46px,6vw,74px) !important;line-height:.98 !important;letter-spacing:-.04em !important;color:#355f95 !important}
.aquo-page-shell .aquo-page-kicker{background:linear-gradient(180deg,rgba(255,250,235,.98),rgba(248,240,214,.96));border:1px solid rgba(199,167,74,.22);color:#a07a17 !important;padding:14px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 12px 24px rgba(190,160,72,.08)}
.aquo-list-card{padding:22px 24px !important;min-height:166px !important;border-radius:32px !important;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.96)) !important}
.aquo-list-card .hub-card-title{font-size:18px !important}
.aquo-list-card .hub-card-sub{font-size:13px !important;color:#7a8b9e !important}
.aquo-list-card .hub-card-status{font-size:14px !important}
.aquo-list-card .hub-card-date{margin-left:auto;font-size:12px;color:#8b9aac}
.aquo-list-card .hub-card-icon{transform:translateY(2px)}
.aquo-list-card .hub-card-arrow{background:linear-gradient(180deg,rgba(245,250,255,.95),rgba(239,247,255,.92)) !important}
#module-area > div[style*="max-width:560px"] h1,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] h1{font-size:clamp(42px,6vw,68px) !important;line-height:1 !important;color:#2e65b6 !important}
#module-area > div[style*="max-width:560px"] > div,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] > div{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.96)) !important;box-shadow:0 18px 38px rgba(92,120,153,.08) !important}
#module-area > div[style*="max-width:560px"] [style*="background:#FFEBEE"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#FFEBEE"]{background:linear-gradient(180deg,rgba(255,240,242,.98),rgba(255,245,247,.96)) !important;border:1px solid rgba(223,84,101,.18) !important}
#module-area > div[style*="max-width:560px"] [style*="background:#FFF3E0"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#FFF3E0"]{background:linear-gradient(180deg,rgba(255,248,239,.98),rgba(255,243,232,.96)) !important;border:1px solid rgba(227,141,48,.16) !important}
#module-area > div[style*="max-width:560px"] [style*="background:#E3F2FD"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="background:#E3F2FD"]{background:linear-gradient(180deg,rgba(238,247,255,.98),rgba(231,243,255,.95)) !important;border:1px solid rgba(86,152,225,.14) !important}
#module-area > div[style*="max-width:560px"] label,
#module-area > div[style*="max-width:560px"] p,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] label,
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] p{color:#667d98 !important}
#module-area > div[style*="max-width:560px"] [style*="font-size:13px;color:var(--text-secondary)"],
#module-area > div[style*="max-width:640px"][class*="aquo-bubble-bg"] [style*="font-size:13px;color:var(--text-secondary)"]{color:#6c7f94 !important}

/* 5) about AQUO: legal/footer contrast and dynamic founder/testimonials */
.aquo-about-footer{padding-bottom:34px !important}
.aquo-about-footer .aquo-footer-kicker{color:rgba(255,255,255,.88) !important}
.aquo-about-footer .aquo-footer-text{color:#ffffff !important;text-shadow:0 1px 0 rgba(4,27,62,.25) !important}.aquo-about-footer .aquo-footer-social{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;backdrop-filter:blur(10px)}
.aquo-testimonial-card{transition:transform .18s ease, box-shadow .18s ease}
.aquo-testimonial-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(92,120,153,.12)}
.aquo-testimonial-card summary{outline:none}
.aquo-testimonial-card summary::-webkit-details-marker{display:none}

/* 6) improve readability on blue/pale blocks */
.aquo-about-footer p,.aquo-about-footer h3{max-width:760px}
@media (max-width: 760px){
  #popup-water.popup{min-height:320px;padding:24px 18px 22px !important}
  #rutinas-root .rutinas-hero{grid-template-columns:1fr !important;padding:24px 20px 20px !important}
  #mov-lista-root .btn-objetivo{min-width:unset !important;flex:1 1 180px}
  .aquo-module-tail__inner{width:calc(100% - 16px);padding:12px 14px}
}


/* v29.6 final design closure */

/* mini footer premium for modules, but no duplicate on marca */
.aquo-module-tail{display:flex;justify-content:center;margin:26px 0 8px;padding:0 0 10px}
.aquo-module-tail__inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 22px;border-radius:24px;background:linear-gradient(135deg,#1466cc,#3f9dff);border:1px solid rgba(255,255,255,.18);box-shadow:0 22px 36px rgba(33,94,166,.16);color:#fff;position:relative;overflow:hidden}
.aquo-module-tail__inner::after{content:"";position:absolute;right:-10px;bottom:-14px;width:96px;height:120px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.14;pointer-events:none}
.aquo-module-tail__line{position:relative;z-index:1}
.aquo-module-tail__line--top{font-size:12px;color:rgba(255,255,255,.96);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.aquo-module-tail__line--bottom{font-size:12px;color:rgba(255,255,255,.84)}
.aquo-module-tail__drop{display:none}
.aquo-module-tail__brand,.aquo-module-tail__legal,.aquo-module-tail__link,.aquo-module-tail__social{color:#fff !important}
.aquo-module-tail__social{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:5px 10px;border-radius:999px}
.aquo-module-tail__text{font-weight:700}

/* dashboard top header refinement */
.main-header,.content-header{background:linear-gradient(180deg,rgba(248,251,255,.98),rgba(241,247,255,.94)) !important;border-bottom:1px solid rgba(136,179,221,.18) !important;box-shadow:none !important}
.greeting-title,.content-header h1{letter-spacing:-.02em !important;color:#475769 !important}
.content-header .quote,.greeting-subtitle,.content-header p{color:#94a4b6 !important}

/* popup water: isotipo predominates */
#popup-water.popup{width:min(560px,calc(100vw - 24px)) !important;border-radius:42px !important;overflow:hidden !important}
#popup-water.popup::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 18%,rgba(203,236,255,.65),transparent 26%),radial-gradient(circle at 85% 85%,rgba(145,205,255,.30),transparent 18%);pointer-events:none}
#popup-water .popup-water-drop--aquo{position:relative;height:210px;margin-top:-6px;margin-bottom:6px;display:flex;align-items:flex-end;justify-content:center}
#popup-water .popup-water-drop__shape--back{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:190px;background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.92),rgba(255,255,255,0) 22%),linear-gradient(180deg,#9fe1ff,#2f8cff 68%,#176fe6);clip-path:path("M 75 4 C 68 18 18 65 18 126 A 57 57 0 0 0 132 126 C 132 65 82 18 75 4 Z");filter:drop-shadow(0 14px 28px rgba(56,128,215,.22));opacity:.95}
#popup-water .popup-water-drop__shape--front{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:126px;height:158px;background:radial-gradient(circle at 34% 20%,rgba(255,255,255,.95),rgba(255,255,255,0) 22%),linear-gradient(180deg,#a8ddff,#3d92ff 65%,#1b74ea);clip-path:path("M 63 4 C 57 16 16 56 16 108 A 47 47 0 0 0 110 108 C 110 56 69 16 63 4 Z");display:flex;align-items:center;justify-content:center;box-shadow:0 18px 34px rgba(61,135,223,.28)}
#popup-water .popup-water-drop__shape--front img{width:72px !important;height:72px !important;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(255,255,255,.35))}
#popup-water .popup-text--water{font-size:20px !important;color:#125bb5 !important}
#popup-water .popup-text--water span{max-width:420px;margin:10px auto 0;display:block;font-size:15px !important;color:#5f7896 !important}
#popup-water .popup-water-btn{min-width:210px;border-radius:999px !important;background:linear-gradient(180deg,#51abff,#257ef2) !important}

/* marca: more soul, no duplicate footer */
.aquo-brand-feature-card{position:relative;overflow:hidden;transition:transform .18s, box-shadow .18s}
.aquo-brand-feature-card::after{content:"";position:absolute;inset:auto -16px -18px auto;width:64px;height:82px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.06;pointer-events:none}
.aquo-brand-feature-card--0{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,255,.96)) !important}
.aquo-brand-feature-card--1{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,249,240,.96)) !important}
.aquo-brand-feature-card--2{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,247,255,.96)) !important}
.aquo-brand-feature-card:hover{transform:translateY(-2px);box-shadow:0 18px 30px rgba(92,120,153,.10)}
.aquo-founder-card{position:relative}
.aquo-founder-card::before{content:"";position:absolute;left:18px;top:18px;width:42px;height:42px;border-radius:16px;background:radial-gradient(circle,rgba(138,205,255,.22),transparent 70%)}
.aquo-testimonial-card[open]{box-shadow:0 20px 34px rgba(92,120,153,.08) !important}
.aquo-testimonial-card summary{transition:background .18s}
.aquo-testimonial-card summary:hover{background:rgba(243,248,255,.78)}
.aquo-about-footer{margin-bottom:28px !important}

/* remove generic footer specifically inside marca if any injected by old render */
#/marca .aquo-module-tail, #module-area .aquo-page-shell .aquo-module-tail{ }

/* routines stronger */
#rutinas-root .rutinas-hero{padding:30px 32px 26px !important;border-radius:34px !important;box-shadow:0 24px 42px rgba(82,122,170,.12) !important}
#rutinas-root .rutinas-tabs-shell{padding:8px !important;border-radius:22px !important;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(241,247,255,.68)) !important}
#rutinas-root .rutinas-tab-btn{min-height:58px !important;font-size:16px !important}
#mov-lista-root{gap:24px !important}
#mov-lista-root > div:first-child{padding:26px 28px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,249,255,.96));border:1px solid rgba(128,173,218,.18);box-shadow:0 18px 34px rgba(92,120,153,.10)}
#mov-lista-root .btn-objetivo{min-width:180px;min-height:92px;border-radius:26px !important;padding:16px 18px !important;box-shadow:0 14px 28px rgba(92,120,153,.08) !important}
#mov-lista-root .btn-objetivo span{font-size:22px !important;margin-bottom:6px !important}
#mov-lista-root .btn-sesion{border-radius:28px !important;padding:20px 22px !important;box-shadow:0 18px 34px rgba(92,120,153,.10) !important}
#mov-lista-root .btn-sesion:hover{transform:translateY(-2px);box-shadow:0 22px 38px rgba(92,120,153,.13) !important}
#mov-lista-root .btn-sesion > div:first-child{width:40px !important;height:40px !important;border-radius:14px !important;font-size:22px !important;font-weight:800 !important}
#mov-lista-root .btn-sesion div[style*="font-size:14px"]{font-size:18px !important;font-weight:800 !important;color:#33465a !important}
#mov-lista-root .btn-sesion div[style*="font-size:11px"]{font-size:13px !important;color:#7a8da4 !important}

/* salud hub richer */
.aquo-page-shell .aquo-page-hero .aquo-page-subtitle{max-width:580px;line-height:1.55}
.hub-card-icon-img{width:24px;height:24px;object-fit:contain}
.aquo-list-card.card-fluid{border-radius:28px !important;padding:22px 22px 22px !important;box-shadow:0 18px 34px rgba(92,120,153,.09) !important}
.aquo-list-card.card-fluid:hover{transform:translateY(-2px)}
.aquo-list-card .hub-card-title{font-size:18px !important;letter-spacing:-.01em}
.aquo-list-card .hub-card-sub{font-size:14px !important;color:#8c9bab !important}.aquo-list-card .hub-card-date{margin-left:auto;font-size:14px;color:#8fa0b3}
.aquo-list-card .hub-card-arrow{width:48px !important;height:48px !important;box-shadow:0 12px 22px rgba(92,120,153,.08) !important}

/* about cards clearer */
.aquo-brand-feature-grid .aquo-brand-feature-card{min-height:118px}
.aquo-brand-feature-grid .aquo-brand-feature-card div:last-child{font-size:13px !important;line-height:1.65 !important;color:#64778f !important}

@media (max-width: 700px){
  .aquo-module-tail__inner{width:calc(100% - 16px);padding:16px 14px;border-radius:22px}
  #popup-water .popup-water-drop--aquo{height:188px}
  #popup-water .popup-water-drop__shape--back{width:132px;height:170px}
  #popup-water .popup-water-drop__shape--front{width:114px;height:144px}
  #mov-lista-root .btn-objetivo{min-width:calc(50% - 6px)}
}


/* v29.8 focused closure */
/* Header quote more legible and elegant */
.main-header .greeting-subtitle,
.content-header .quote,
.content-header p{
  font-size: clamp(18px, 2.2vw, 28px) !important;
  line-height: 1.35 !important;
  color: #8092a7 !important;
  opacity: .96 !important;
}
.main-header .greeting-subtitle{font-size:clamp(17px,1.7vw,24px) !important; font-style: italic !important;}

/* No mini footer in marca */
#module-area .aquo-about-footer + .aquo-module-tail,
#module-area .aquo-page-shell:has(.aquo-about-footer) .aquo-module-tail,
#module-area .aquo-module-tail.marca-hide{display:none !important;}
body:has(.aquo-about-footer) #module-area > .aquo-module-tail{display:none !important;}

/* Better founder card */
.aquo-founder-card{border:1px solid rgba(123,171,221,.18) !important; background:linear-gradient(180deg,rgba(248,252,255,.98),rgba(241,248,255,.96)) !important; box-shadow:0 22px 40px rgba(82,122,170,.10) !important;}
.aquo-founder-card::after{content:"";position:absolute;right:22px;top:14px;width:92px;height:92px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.08;pointer-events:none}

/* About cards clearly differentiated */
.aquo-brand-feature-grid .aquo-brand-feature-card{border:1px solid rgba(120,170,220,.18) !important; box-shadow:0 16px 28px rgba(92,120,153,.08) !important}
.aquo-brand-feature-grid .aquo-brand-feature-card:nth-child(odd){background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.96)) !important}
.aquo-brand-feature-grid .aquo-brand-feature-card:nth-child(even){background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,250,244,.96)) !important}
.aquo-brand-feature-grid .aquo-brand-feature-card:hover{transform:translateY(-3px);box-shadow:0 22px 36px rgba(92,120,153,.12) !important}

/* Smaller, discreet water popup with isotipo dominating */
#popup-water.popup{width:min(400px,calc(100vw - 28px)) !important; border-radius:26px !important; padding:16px 16px 18px !important; box-shadow:0 28px 54px rgba(69,124,191,.18) !important}
#popup-water .popup-water-drop--aquo{height:112px !important; margin:0 0 4px !important}
#popup-water .popup-water-drop__shape--back{width:84px !important; height:106px !important; opacity:.95 !important}
#popup-water .popup-water-drop__shape--front{width:66px !important; height:84px !important; bottom:4px !important; box-shadow:0 12px 22px rgba(61,135,223,.20) !important}
#popup-water .popup-water-drop__shape--front img{width:44px !important; height:44px !important}
#popup-water .popup-text--water{font-size:15px !important; line-height:1.35 !important; margin-top:0 !important}
#popup-water .popup-text--water span{font-size:12px !important; line-height:1.55 !important; max-width:300px !important; margin-top:8px !important}
#popup-water .popup-water-btn{min-width:168px !important; min-height:44px !important; font-size:14px !important; margin-top:6px !important}

/* Health hub richer and clearer */
.aquo-list-card.card-fluid{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,249,255,.96)) !important; border:1px solid rgba(126,171,219,.16) !important; box-shadow:0 20px 34px rgba(89,123,165,.08) !important; padding:22px 24px !important}
.aquo-list-card.card-fluid .hub-card-main{align-items:center !important}
.aquo-list-card.card-fluid .hub-card-icon{width:56px !important; height:56px !important; border-radius:20px !important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(236,245,255,.96)) !important; box-shadow:0 14px 24px rgba(92,120,153,.10) !important}
.aquo-list-card.card-fluid .hub-card-title{font-size:17px !important; font-weight:800 !important; color:#2d4055 !important}
.aquo-list-card.card-fluid .hub-card-sub{font-size:13px !important; color:#8698ac !important; margin-bottom:12px !important}
.aquo-list-card.card-fluid .hub-card-status-row{gap:10px !important}
.aquo-list-card.card-fluid .hub-card-arrow{background:linear-gradient(180deg,rgba(238,248,255,.94),rgba(232,244,255,.88)) !important}

/* Gold/silver header harmony */
.app-layout[data-theme="gold"] .main-header,.app-layout[data-theme="gold"] .content-header{background:linear-gradient(180deg,rgba(252,249,242,.98),rgba(248,244,235,.94)) !important}
.app-layout[data-theme="gold"] .greeting-title{color:#9e7420 !important}
.app-layout[data-theme="gold"] .greeting-subtitle{color:#9b907f !important}

/* Nutrition date more legible */
#nutr-root h3{font-size:20px !important; color:#8d806b !important; letter-spacing:-.01em !important}
#nutr-root .btn.btn-secondary.btn-sm{border-radius:999px !important}

/* Routines deeper styling */
#rutinas-root .rutinas-hero{background:radial-gradient(circle at 86% 18%, rgba(186,224,255,.34), rgba(186,224,255,0) 24%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.96)) !important; border:1px solid rgba(132,176,217,.18) !important}
#rutinas-root .rutinas-hero h1{color:#40546b !important}
#rutinas-root .rutinas-hero p{color:#60748c !important}
#rutinas-root .rutinas-tabs-shell{box-shadow:0 20px 34px rgba(92,120,153,.08) !important}
#rutinas-root .rutinas-tab-btn{box-shadow:inset 0 -2px 0 rgba(255,255,255,.45); border:1px solid rgba(125,170,220,.14) !important}
#rutinas-root .rutinas-tab-btn.active{background:linear-gradient(180deg,rgba(234,245,255,.95),rgba(247,251,255,.98)) !important; border-color:rgba(64,145,235,.24) !important; box-shadow:0 14px 24px rgba(92,120,153,.10) !important}
#mov-lista-root{max-width:920px !important}
#mov-lista-root > div:first-child{position:relative; overflow:hidden}
#mov-lista-root > div:first-child::after{content:""; position:absolute; right:-22px; bottom:-28px; width:120px; height:160px; background:url('assets/icons/isotipo_clean.png') center/contain no-repeat; opacity:.08; pointer-events:none}
#mov-lista-root .btn-objetivo{display:flex !important; flex-direction:column; justify-content:center; gap:6px; min-height:120px !important; border-radius:28px !important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,249,255,.96)) !important}
#mov-lista-root .btn-objetivo[data-obj="mantenimiento"]{border-color:rgba(37,138,219,.30) !important}
#mov-lista-root .btn-objetivo[data-obj="perdida_peso"]{border-color:rgba(111,181,92,.24) !important}
#mov-lista-root .btn-objetivo[data-obj="ganancia_peso"]{border-color:rgba(145,76,214,.24) !important}
#mov-lista-root .btn-sesion{position:relative; overflow:hidden}
#mov-lista-root .btn-sesion::after{content:""; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-top:2px solid rgba(102,122,145,.58); border-right:2px solid rgba(102,122,145,.58); rotate:45deg}
#mov-lista-root .btn-sesion > span:last-child{display:none !important}
#mov-lista-root .btn-sesion:hover{transform:translateY(-3px) scale(1.002) !important}
#mov-lista-root .btn-sesion div[style*="font-size:14px"]{font-size:19px !important}
#mov-lista-root .btn-sesion div[style*="font-size:11px"]{font-size:13px !important; letter-spacing:.01em !important}

/* Small footer beautiful, not giant */
.aquo-module-tail{margin:18px 0 6px !important; padding-bottom:6px !important}
.aquo-module-tail__inner{background:linear-gradient(135deg,rgba(244,249,255,.98),rgba(235,244,255,.96)) !important; color:#5d7289 !important; border:1px solid rgba(125,170,220,.14) !important; box-shadow:0 14px 28px rgba(92,120,153,.08) !important}
.aquo-module-tail__inner::after{opacity:.08 !important}
.aquo-module-tail__brand,.aquo-module-tail__legal,.aquo-module-tail__link,.aquo-module-tail__social{color:#2a61af !important}
.aquo-module-tail__line--bottom{color:#7b8fa5 !important}
.aquo-module-tail__social{background:rgba(42,97,175,.06) !important; border-color:rgba(42,97,175,.10) !important}
.aquo-module-tail__social--ghost{cursor:default; pointer-events:none}

/* v29.9 final closure fixes */
#module-area .aquo-page-shell:has(.aquo-about-footer) > .aquo-module-tail,
#module-area .aquo-page-shell .aquo-about-footer + .aquo-module-tail,
#module-area .aquo-about-footer ~ .aquo-module-tail{display:none !important;}

.aquo-founder-card{border-radius:28px !important;box-shadow:0 22px 42px rgba(92,120,153,.12) !important;background:linear-gradient(135deg,rgba(243,248,255,.98),rgba(255,255,255,.97)) !important;}
.aquo-founder-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 16%, rgba(120,190,255,.15), rgba(120,190,255,0) 24%);pointer-events:none;}
.aquo-founder-card img{filter:drop-shadow(0 8px 16px rgba(48,119,201,.14));}
.aquo-footer-social--ghost{cursor:default;pointer-events:none;}

/* header quote */
.header-quote,
.top-header .quote,
.header-shell .quote,
.main-content-header .quote,
#app-header .quote,
[data-quote],
.header-subquote,
.header-caption{font-size:clamp(18px,1.7vw,24px) !important;line-height:1.45 !important;opacity:.92 !important;}
.main-content-header p[style*="Anónimo"],
.main-content-header p[style*="AQUO"],
#module-area > div > p[style*="Anónimo"]{font-size:clamp(18px,1.7vw,24px) !important;line-height:1.45 !important;}

/* nutrition and water dates */
#nutricion-root .aquo-date-stack,
#agua-root .aquo-date-stack,
#agua-root [style*="jueves"],
#nutricion-root [style*="jueves"],
#nutricion-root [style*="abril"],
#agua-root [style*="abril"]{font-size:18px !important;color:#7c6b49 !important;font-weight:700 !important;letter-spacing:-.01em;opacity:1 !important;}

/* compact water popup */
.popup--water-compact{position:fixed;right:22px;bottom:26px;left:auto;top:auto;transform:translateY(12px) scale(.96);opacity:0;z-index:1200;transition:.25s ease;background:transparent !important;box-shadow:none !important;padding:0 !important;max-width:none !important;}
.popup--water-compact.visible{transform:translateY(0) scale(1);opacity:1;}
.popup-water-card{width:min(420px,calc(100vw - 28px));background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(241,248,255,.96));border:1px solid rgba(129,176,221,.18);box-shadow:0 20px 40px rgba(74,118,170,.16);backdrop-filter:blur(16px);border-radius:28px;padding:16px 18px;display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;position:relative;overflow:hidden;}
.popup-water-card::after{content:"";position:absolute;right:-12px;bottom:-8px;width:86px;height:86px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.10;pointer-events:none;}
.popup-water-card__icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(180deg,#fff,#eaf5ff);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(76,125,181,.12);border:1px solid rgba(127,181,231,.18);}
.popup-water-card__icon img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(61,128,208,.18));}
.popup-water-card__title{font-size:22px;font-weight:900;color:#1559b2;letter-spacing:-.02em;line-height:1.08;margin-bottom:4px;}
.popup-water-card__sub{font-size:14px;line-height:1.5;color:#627a97;font-weight:600;}
.popup-water-card__btn{min-width:116px;border-radius:999px !important;padding:12px 18px !important;font-weight:800 !important;box-shadow:0 14px 22px rgba(48,124,216,.16) !important;}
@media (max-width: 640px){.popup--water-compact{left:12px;right:12px;bottom:18px}.popup-water-card{width:100%;grid-template-columns:48px 1fr;}.popup-water-card__btn{grid-column:1 / -1;width:100%;}.popup-water-card__title{font-size:19px}}

/* health hub */
.aquo-list-card.card-fluid{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,250,255,.96)) !important;border:1px solid rgba(130,178,222,.18) !important;border-radius:28px !important;box-shadow:0 20px 38px rgba(92,120,153,.10) !important;padding:20px 22px !important;}
.aquo-list-card.card-fluid .hub-card-icon{width:62px !important;height:62px !important;border-radius:22px !important;}
.aquo-list-card.card-fluid .hub-card-title{font-size:20px !important;color:#27384b !important;}
.aquo-list-card.card-fluid .hub-card-sub{font-size:14px !important;color:#7b8ea2 !important;}
.aquo-list-card.card-fluid .hub-card-status{font-size:15px !important;}
.aquo-list-card.card-fluid .hub-card-arrow{width:52px !important;height:52px !important;}
.hub-card-icon-img{width:30px !important;height:30px !important;}

/* salud submodules */
#module-area [id*="salud"] .aquo-page-title,
#module-area [id*="autoexploracion"] .aquo-page-title,
#module-area [id*="bucodental"] .aquo-page-title{letter-spacing:-.03em !important;text-shadow:0 1px 0 rgba(255,255,255,.75);}
#module-area [id*="salud"] .aquo-page-shell > div[style*="background:#fff"],
#module-area [id*="salud"] .aquo-page-shell > div[style*="background:white"],
#module-area [id*="salud"] .card,
#module-area [id*="salud"] .panel,
#module-area [id*="salud"] .record-card{border-radius:24px !important;box-shadow:0 16px 30px rgba(90,120,150,.08) !important;border:1px solid rgba(120,170,220,.14) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96)) !important;}
#module-area [id*="salud"] input,
#module-area [id*="salud"] select,
#module-area [id*="salud"] textarea{border-radius:16px !important;border-color:rgba(152,179,206,.26) !important;background:rgba(255,255,255,.92) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}

/* routines */
#rutinas-root .aquo-page-hero{padding:32px 30px !important;border-radius:32px !important;box-shadow:0 24px 46px rgba(92,120,153,.12) !important;}
#rutinas-root .aquo-page-title{font-size:clamp(42px,5vw,64px) !important;letter-spacing:-.04em !important;}
#rutinas-root .aquo-page-subtitle{font-size:15px !important;line-height:1.75 !important;max-width:560px;}
#rutinas-root .aquo-segmented{padding:12px !important;border-radius:28px !important;box-shadow:0 18px 30px rgba(92,120,153,.10) !important;}
#rutinas-root .aquo-segmented__item{padding:18px 28px !important;border-radius:22px !important;font-size:18px !important;font-weight:800 !important;}
#rutinas-root .aquo-segmented__item.active{box-shadow:0 18px 30px rgba(79,139,207,.14) !important;}
#mov-lista-root .btn-sesion{position:relative;overflow:hidden;}
#mov-lista-root .btn-sesion::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));transform:translateX(-120%);transition:transform .45s ease;pointer-events:none;}
#mov-lista-root .btn-sesion:hover::after{transform:translateX(120%);}
#mov-lista-root .btn-sesion:hover{transform:translateY(-2px);box-shadow:0 22px 40px rgba(85,135,190,.14) !important;}
#mov-lista-root .btn-objetivo:hover{transform:translateY(-2px);}

/* keep reduced footer small */
.aquo-module-tail{margin:12px 0 6px !important;}
.aquo-module-tail__line--bottom{font-size:11px !important;}


/* --- AQUO final harmonization overrides --- */
.content-header{background:linear-gradient(180deg,rgba(255,252,245,.98),rgba(248,244,233,.95)) !important;border-bottom:1px solid rgba(203,186,148,.22) !important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.35);}
.greeting{font-size:clamp(44px,4vw,58px) !important;line-height:1.02 !important;color:var(--primary-dark) !important;}
#greeting-text span{display:block;}
#cita-diaria{margin-top:10px !important;font-size:22px !important;line-height:1.45 !important;color:#94a3b8 !important;font-family:var(--font-serif) !important;opacity:.92;}
.aquo-page-hero,.nutr-head.aquo-page-hero{background:linear-gradient(135deg,rgba(243,249,255,.98),rgba(255,255,255,.96)) !important;border:1px solid rgba(154,190,225,.22) !important;box-shadow:0 18px 40px rgba(92,120,153,.10) !important;border-radius:34px !important;}
.aquo-page-title{letter-spacing:-.03em !important;line-height:1.04 !important;}
.aquo-page-subtitle{font-size:clamp(18px,2vw,22px) !important;line-height:1.6 !important;color:#607996 !important;max-width:780px;}
.aquo-page-kicker{background:linear-gradient(180deg,rgba(255,250,236,.96),rgba(249,241,214,.90)) !important;color:#a57a17 !important;border:1px solid rgba(208,178,96,.28) !important;}
.nutr-head .aquo-date-stack > div:last-child{font-size:17px !important;font-weight:700 !important;color:var(--primary-dark) !important;}
.aquo-nutri-shortcut{border-radius:999px !important;padding:12px 18px !important;font-weight:800 !important;box-shadow:0 14px 24px rgba(106,132,163,.10) !important;}
/* founder */
.aquo-founder-card{border-radius:28px !important;box-shadow:0 22px 42px rgba(92,120,153,.12) !important;}
.aquo-founder-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,rgba(180,219,255,.24),transparent 18%),radial-gradient(circle at 84% 18%,rgba(196,231,255,.18),transparent 20%);pointer-events:none;}
/* popup water compact */
.popup--water-compact{right:18px !important;bottom:18px !important;left:auto !important;top:auto !important;max-width:none !important;z-index:1300 !important;}
.popup-water-card{width:min(330px,calc(100vw - 24px)) !important;grid-template-columns:56px 1fr !important;gap:12px !important;padding:14px 14px 14px !important;border-radius:22px !important;box-shadow:0 18px 34px rgba(69,124,191,.16) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.96)) !important;}
.popup-water-card::after{content:"";position:absolute;right:-12px;bottom:-14px;width:74px;height:74px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.08;pointer-events:none;}
.popup-water-card__icon{width:56px !important;height:56px !important;border-radius:18px !important;grid-row:1 / span 2;}
.popup-water-card__icon img{width:38px !important;height:38px !important;}
.popup-water-card__eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#70a3de;margin-bottom:4px;}
.popup-water-card__title{font-size:15px !important;line-height:1.2 !important;margin:0 !important;max-width:180px;color:#1459b2 !important;}
.popup-water-card__sub{font-size:11px !important;line-height:1.45 !important;color:#667f9c !important;max-width:200px;}
.popup-water-card__btn{grid-column:2;justify-self:start;min-width:130px !important;padding:10px 14px !important;margin-top:6px !important;font-size:13px !important;box-shadow:none !important;}
@media (max-width:640px){.popup-water-card{width:min(300px,calc(100vw - 20px)) !important;grid-template-columns:48px 1fr !important}.popup-water-card__icon{width:48px !important;height:48px !important}.popup-water-card__btn{width:auto !important;grid-column:2;}}
/* health hub and health modules */
.hub-card-icon{overflow:hidden;}
.hub-card-title{font-size:17px !important;}
.hub-card-sub{font-size:14px !important;color:#8092a8 !important;}
.hub-card-status{font-size:14px !important;}
.aquo-list-card.card-fluid{border-radius:28px !important;box-shadow:0 18px 36px rgba(92,120,153,.08) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,252,255,.96)) !important;}
.aquo-list-card.card-fluid .hub-card-arrow{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.96),rgba(232,244,255,.9)) !important;}
.aquo-page-shell [class*="form"], .aquo-page-shell .aquo-card, .aquo-page-shell .card, .aquo-page-shell .section-card{box-shadow:0 16px 34px rgba(92,120,153,.08) !important;border-color:rgba(154,190,225,.22) !important;border-radius:24px !important;}
/* routines and movement */
.aquo-movimiento-shell{gap:26px !important;}
.aquo-mov-head{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.96)) !important;border:1px solid rgba(154,190,225,.22) !important;border-radius:28px !important;padding:22px 24px !important;box-shadow:0 18px 36px rgba(92,120,153,.10) !important;}
.aquo-mov-head h2{font-family:var(--font-serif) !important;font-size:32px !important;color:var(--primary-dark) !important;}
.aquo-mov-goals-wrap{padding:18px 20px 6px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96));border:1px solid rgba(154,190,225,.22);border-radius:28px;box-shadow:0 16px 34px rgba(92,120,153,.08);}
.aquo-mov-goals .btn-objetivo{border-radius:24px !important;min-height:108px !important;justify-content:center !important;box-shadow:0 14px 28px rgba(92,120,153,.08) !important;}
.aquo-mov-goals .btn-objetivo span:last-child{font-size:17px !important;}
.aquo-mov-session-list .btn-sesion{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,252,255,.97)) !important;border-radius:28px !important;box-shadow:0 16px 34px rgba(92,120,153,.08) !important;padding:22px 24px !important;}
.aquo-mov-session-list .btn-sesion:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(67,119,182,.14) !important;}
.aquo-mov-session-list .btn-sesion > div:first-child span:first-child{background:linear-gradient(180deg,#f2fbff,#d9f0ff) !important;color:#176fcb !important;border-radius:18px !important;}
.aquo-mov-session-list .btn-sesion strong{font-size:20px !important;color:#243b53 !important;}
/* about cards */
.aquo-testimonial-card{transition:transform .18s ease, box-shadow .18s ease;}
.aquo-testimonial-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px rgba(92,120,153,.12) !important;}
.aquo-about-accordion details{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.96));border:1px solid rgba(154,190,225,.20);border-radius:20px;padding:16px 18px;box-shadow:0 14px 28px rgba(92,120,153,.07);}
/* remove version overlap feeling in footer */
.aquo-about-footer .aquo-footer-soft{opacity:.92;}


/* ── v30.1 precise finish ───────────────────────────────── */
.aquo-founder-card{backdrop-filter:blur(10px)}
.aquo-founder-card img{filter:drop-shadow(0 8px 18px rgba(74,147,216,.16))}
.aquo-founder-card > div:last-child{gap:6px !important}
.aquo-founder-card [style*="font-size:13px;color:var(--primary-dark)"]{font-size:15px !important;line-height:1.72 !important;max-width:620px !important}
.aquo-founder-card [style*="font-size:12.5px;color:var(--text-secondary)"]{font-size:13px !important;letter-spacing:.01em !important}
.aquo-founder-card [style*="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px"]{margin-top:10px !important}

.aquo-about-footer .aquo-footer-soft{font-size:12px !important;opacity:.95}
.aquo-about-footer [style*="aquo.health"]{font-weight:800}

#popup-water{left:auto !important;right:20px !important;bottom:18px !important;transform:translateY(120px) !important;min-width:0 !important;max-width:420px !important;padding:0 !important;border:none !important;background:transparent !important;box-shadow:none !important}#popup-water .popup-water-card--mini{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,248,255,.96));border:1px solid rgba(145,193,234,.28);box-shadow:0 24px 40px rgba(89,137,192,.16);min-width:320px}
#popup-water .popup-water-card--mini::before{content:"";position:absolute;inset:0;border-radius:26px;background:radial-gradient(circle at 16% 22%,rgba(206,236,255,.44),transparent 24%),radial-gradient(circle at 88% 82%,rgba(148,203,255,.24),transparent 18%);pointer-events:none}
#popup-water .popup-water-card__icon--mini{width:62px;height:62px;border-radius:22px;background:linear-gradient(180deg,#ffffff,#eaf5ff);display:flex;align-items:center;justify-content:center;border:1px solid rgba(127,181,231,.22);box-shadow:0 12px 24px rgba(76,125,181,.10)}
#popup-water .popup-water-card__icon--mini img{width:38px;height:38px;object-fit:contain}
#popup-water .popup-water-card__copy{position:relative;z-index:1;text-align:left}
#popup-water .popup-water-card__title{font-size:16px !important;line-height:1.15 !important;font-weight:800 !important;color:#1f5fb6 !important;margin:0 0 4px}
#popup-water .popup-water-card__btn--mini{border-radius:16px !important;padding:10px 14px !important;min-width:112px;background:linear-gradient(180deg,#58a8ff,#1f7cff) !important;box-shadow:0 12px 20px rgba(55,126,214,.22)}
@media (max-width:640px){#popup-water{right:12px !important;left:12px !important;max-width:none !important}#popup-water .popup-water-card--mini{grid-template-columns:52px 1fr;min-width:0}#popup-water .popup-water-card__btn--mini{grid-column:1 / -1;width:100%}}

/* Header quote more legible */
#cita-diaria{font-size:clamp(15px,1.6vw,18px) !important;max-width:760px !important;opacity:.92 !important;color:#7a87a1 !important}

/* Nutrition and water dates */
.aquo-date-stack .aquo-date-stack__date,
[class*="date"][style*="abril"],
#agua-root [style*="abril"], #nutricion-root [style*="abril"], #sueno-root [style*="abril"]{font-size:18px !important;color:#8d887a !important;font-weight:600 !important;letter-spacing:-.01em}

/* Health submodules polish */
#app h1{letter-spacing:-.02em}
#app > div[style*="max-width:900px"] > div:first-child h1,
#app > div[style*="max-width:900px"] h1{font-family:var(--font-serif) !important;font-size:clamp(46px,5vw,68px) !important;color:#1f67c6 !important;line-height:1.02 !important}
#app > div[style*="max-width:900px"] > div:first-child p{font-size:18px !important;color:#647894 !important}
#app .card, #app .card-fluid{border-radius:26px !important;border:1px solid rgba(135,174,213,.16) !important;box-shadow:0 20px 34px rgba(96,126,162,.08) !important;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.97)) !important}
#app [style*="background:#FFF3E0"], #app [style*="background:#F3E5F5"], #app [style*="background:#E8F5E9"]{border-radius:18px !important}
#app button[style*="border-bottom:2.5px solid"]{border-radius:16px 16px 0 0 !important;padding:12px 22px !important}
#app input.form-input, #app select.form-input, #app textarea.form-input{border-radius:16px !important;border:1px solid rgba(140,176,212,.24) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}

/* Health hub icons reliable */
.hub-card-icon-img{width:28px !important;height:28px !important;display:block;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(74,147,216,.12))}
.hub-card-icon{overflow:hidden !important}

/* Movement stronger */
.aquo-movimiento-shell{max-width:860px !important;gap:26px !important}
.aquo-mov-head{padding:2px 2px 8px !important}
.aquo-mov-goals{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;gap:14px !important}
.aquo-mov-goals .btn-objetivo{min-height:132px !important;border-radius:28px !important;padding:18px 20px !important;box-shadow:0 18px 30px rgba(92,120,153,.10) !important}
.aquo-mov-session-list .btn-sesion{border-radius:30px !important;padding:20px 22px !important;box-shadow:0 20px 36px rgba(92,120,153,.10) !important}
.aquo-mov-session-list .btn-sesion:hover{transform:translateY(-2px);box-shadow:0 24px 42px rgba(92,120,153,.14) !important}
#sesion-detalle-root .ejercicio-card{border-radius:26px !important}
#sesion-detalle-root .btn-toggle-ej .ej-check{width:44px !important;height:44px !important;font-size:20px !important;border-radius:16px !important}
#sesion-detalle-root .btn-toggle-ej .ej-flecha{font-size:18px !important}
#sesion-detalle-root .aquo-exercise-note{border-radius:18px !important}
#sesion-detalle-root .aquo-exercise-note p{font-size:15px !important;line-height:1.72 !important}
#sesion-detalle-root .aquo-note-box--soft{font-size:13px !important}

/* reduced module footer aligned */
.aquo-module-tail__text{font-size:15px !important}


/* === v30.2 surgical fixes === */
/* Popup agua: pequeño, lateral y no invasivo */
#popup-water.popup--water-compact{right:16px !important;bottom:16px !important;top:auto !important;left:auto !important;max-width:340px !important;z-index:1100 !important;}
#popup-water .popup-water-card--mini{display:grid !important;grid-template-columns:56px 1fr auto !important;gap:12px !important;align-items:center !important;width:min(330px,calc(100vw - 24px)) !important;padding:14px 14px !important;border-radius:22px !important;box-shadow:0 16px 34px rgba(74,118,170,.14) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,247,255,.96)) !important;}
#popup-water .popup-water-card--mini::after{width:58px !important;height:58px !important;right:-8px !important;bottom:-6px !important;opacity:.08 !important;}
#popup-water .popup-water-card__icon--mini{width:48px !important;height:48px !important;border-radius:16px !important;}
#popup-water .popup-water-card__icon--mini img{width:28px !important;height:28px !important;}
#popup-water .popup-water-card__btn--mini{padding:10px 14px !important;min-width:112px !important;border-radius:16px !important;font-size:12px !important;box-shadow:0 10px 18px rgba(55,126,214,.18) !important;align-self:center !important;}
@media (max-width:640px){#popup-water.popup--water-compact{right:10px !important;left:10px !important;max-width:none !important}#popup-water .popup-water-card--mini{width:calc(100vw - 20px) !important;grid-template-columns:48px 1fr !important}#popup-water .popup-water-card__btn--mini{grid-column:1/-1 !important;width:100% !important;}}

/* Footer pequeño más limpio y clicable */
.aquo-module-tail__inner{min-height:auto !important;padding:14px 18px !important;border-radius:22px !important;}
.aquo-module-tail__line{gap:10px !important}
.aquo-module-tail__line--top{font-size:13px !important;font-weight:800 !important;letter-spacing:.06em !important;}
.aquo-module-tail__line--bottom{font-size:12px !important;}
.aquo-module-tail__social{padding:6px 12px !important;border-radius:999px !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}

/* Fechas agua/sueño/nutrición */
#agua-day-label,#sueno-day-label,.status-hero__fecha,.aquo-date-stack,.home-hero-fecha{font-size:15px !important;font-weight:700 !important;color:#8d7b56 !important;letter-spacing:.01em !important;text-shadow:0 1px 0 rgba(255,255,255,.7)}
#agua-day-label,#sueno-day-label{margin-top:8px !important}

/* Mi bienestar: evitar doble icono cuando el texto lo traiga sin emoji */
.aquo-page-title .emoji-inline:first-child{display:none !important}

/* Card fundadora más editorial */
.aquo-founder-card{border-radius:30px !important;padding:26px 28px !important;}
.aquo-founder-card > div:last-child > div:nth-child(1){font-size:18px !important;}
.aquo-founder-card > div:last-child > div:nth-child(2){font-size:13px !important;font-weight:600 !important;color:#667b92 !important;}
.aquo-founder-card > div:last-child > div:nth-child(3){font-size:15px !important;line-height:1.75 !important;max-width:620px !important;}

/* Subbloques Salud: más AQUO */
#module-area .aquo-page-shell .aquo-page-title{letter-spacing:-.03em !important}
#module-area .aquo-page-shell [class*="tab"],
#module-area .aquo-page-shell [role="tab"],
#module-area .aquo-page-shell .tabs button{border-radius:18px !important}
#module-area .aquo-page-shell input[type="date"],
#module-area .aquo-page-shell input[type="number"],
#module-area .aquo-page-shell input[type="text"],
#module-area .aquo-page-shell select,
#module-area .aquo-page-shell textarea{border-radius:18px !important;border-color:rgba(166,187,214,.28) !important;box-shadow:0 10px 20px rgba(92,120,153,.04) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,251,255,.96)) !important}
#module-area .aquo-page-shell .aquo-note-box,
#module-area .aquo-page-shell .aquo-exercise-note,
#module-area .aquo-page-shell .card,
#module-area .aquo-page-shell details,
#module-area .aquo-page-shell .form-card{border-radius:22px !important;box-shadow:0 16px 30px rgba(92,120,153,.08) !important;border:1px solid rgba(138,172,209,.14) !important}

/* Rutinas y movimiento: menos cuaderno, más sistema */
.aquo-mov-head,.aquo-mov-detail-hero{border-radius:28px !important;}
.aquo-mov-head h2{font-size:26px !important;letter-spacing:-.02em !important}
.aquo-mov-head p{font-size:15px !important;color:#637893 !important}
.aquo-mov-head-pills span,.aquo-mov-detail-pills span{padding:9px 14px !important;font-size:13px !important;border-radius:999px !important}
.aquo-mov-goals .btn-objetivo{min-width:210px !important;border-radius:28px !important;padding:16px 18px !important;}
.aquo-mov-goals .btn-objetivo span:last-child{font-size:15px !important}
.aquo-mov-session-list .btn-sesion{padding:20px 22px !important;border-radius:30px !important;box-shadow:0 20px 36px rgba(92,120,153,.10) !important}
.aquo-mov-session-list .btn-sesion > div:first-child{width:58px !important;height:58px !important;border-radius:20px !important}
.aquo-exercise-card{border-radius:26px !important;box-shadow:0 18px 32px rgba(92,120,153,.09) !important}
.aquo-exercise-card__head{padding:20px 20px 18px !important}
.aquo-exercise-note{border-radius:18px !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.96)) !important;border:1px solid rgba(138,172,209,.14) !important;box-shadow:0 10px 18px rgba(92,120,153,.05) !important}
.aquo-exercise-note p{font-size:15px !important;line-height:1.72 !important;color:#2c3a4c !important}

/* Responsive: evitar descuadres horizontales */
#module-area .aquo-page-shell, #module-area .aquo-movimiento-shell, #module-area .aquo-mov-detail{max-width:min(940px,100%) !important;overflow-x:clip}
#module-area img, #module-area svg{max-width:100%;height:auto}
@media (max-width:900px){
  .aquo-page-hero,.aquo-mov-head{grid-template-columns:1fr !important;display:flex !important;flex-direction:column !important;gap:14px !important}
  .aquo-page-hero__side,.aquo-date-stack{width:100% !important;text-align:left !important}
  .aquo-mov-goals{display:grid !important;grid-template-columns:1fr !important}
  .aquo-module-tail__inner{width:calc(100% - 12px) !important}
}


/* v30.3 surgical polish */
#popup-water.popup--water-toast{
  position:fixed !important; right:18px !important; bottom:18px !important; left:auto !important; top:auto !important;
  width:auto !important; max-width:none !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; border:none !important; background:transparent !important; box-shadow:none !important;
  border-radius:0 !important; transform:none !important; backdrop-filter:none !important; overflow:visible !important; z-index:1200 !important;
}
#popup-water.popup--water-toast::before,#popup-water.popup--water-toast::after{display:none !important;content:none !important}#popup-water .popup-water-toast{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;width:min(350px,calc(100vw - 26px));padding:14px 16px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.97));border:1px solid rgba(126,183,233,.20);border-radius:24px;box-shadow:0 20px 44px rgba(72,123,177,.16);position:relative;overflow:hidden}
#popup-water .popup-water-toast::after{content:"";position:absolute;right:-10px;bottom:-10px;width:64px;height:64px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.08;pointer-events:none}
#popup-water .popup-water-toast__icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(180deg,#fff,#ebf5ff);display:flex;align-items:center;justify-content:center;border:1px solid rgba(127,181,231,.18);box-shadow:0 10px 20px rgba(76,125,181,.10)}
#popup-water .popup-water-toast__icon img{width:34px;height:34px;object-fit:contain}
#popup-water .popup-water-toast__eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#78a2d2;margin-bottom:2px}
#popup-water .popup-water-toast__title{font-size:14px;font-weight:900;color:#145ab2;line-height:1.2;margin:0 0 3px}
#popup-water .popup-water-toast__sub{font-size:11px;line-height:1.45;color:#667f9c;font-weight:600;max-width:180px}
#popup-water .popup-water-toast__btn{min-width:112px;padding:10px 14px !important;border-radius:999px !important;font-size:12px !important;box-shadow:0 10px 18px rgba(55,126,214,.18) !important}
@media (max-width:640px){#popup-water.popup--water-toast{right:10px !important;left:10px !important}#popup-water .popup-water-toast{width:calc(100vw - 20px);grid-template-columns:44px 1fr}#popup-water .popup-water-toast__icon{width:44px;height:44px;border-radius:16px}#popup-water .popup-water-toast__icon img{width:28px;height:28px}#popup-water .popup-water-toast__btn{grid-column:1/-1;width:100%}}

.aquo-module-tail__social{transition:all .18s ease}
.aquo-module-tail__social:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(59,120,190,.12)}

.aquo-water-date,#sueno-day-label,.aquo-nutri-date{color:var(--primary-dark) !important;font-weight:800 !important;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.aquo-date-stack div[style*='font-size:16px'][style*='font-family:var(--font-serif)']{font-size:18px !important;color:var(--primary-dark) !important;font-weight:700}

.aquo-health-subpage .card,.aquo-health-subpage .card-fluid{border-radius:24px !important;border:1px solid rgba(125,170,220,.18) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96)) !important;box-shadow:0 18px 34px rgba(84,124,164,.08)}
.aquo-health-subpage .card-header{font-size:16px !important;font-weight:800 !important;color:var(--primary-dark) !important;letter-spacing:-.01em}
.aquo-health-subpage h1{font-family:var(--font-serif) !important;font-size:clamp(38px,5vw,60px) !important;line-height:1.05 !important;letter-spacing:-.03em !important;color:var(--primary-dark) !important;margin:0 0 8px !important}
.aquo-health-subpage p{line-height:1.65}
.aquo-health-subpage input,.aquo-health-subpage select,.aquo-health-subpage textarea{border-radius:16px !important;border:1px solid rgba(125,170,220,.22) !important;background:rgba(255,255,255,.95) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.aquo-health-subpage button.btn,.aquo-health-subpage .btn{border-radius:16px !important}

.aquo-module-shell--salud-visual .aquo-section-title,.aquo-module-shell--salud-auditiva .aquo-section-title,.aquo-module-shell--salud-sexual .aquo-section-title{font-size:clamp(42px,5.4vw,64px) !important;line-height:1.02 !important}
.aquo-module-shell--salud-visual .aquo-module-shell,.aquo-module-shell--salud-auditiva .aquo-module-shell,.aquo-module-shell--salud-sexual .aquo-module-shell{max-width:960px}

#mov-lista-root .btn-sesion{border-radius:32px !important;box-shadow:0 20px 34px rgba(76,125,181,.12) !important;position:relative;overflow:hidden}
#mov-lista-root .btn-sesion::after{content:"";position:absolute;right:-18px;top:-12px;width:86px;height:86px;background:radial-gradient(circle,rgba(194,232,255,.45),rgba(194,232,255,0) 64%);pointer-events:none}
#mov-lista-root .btn-sesion:hover{transform:translateY(-2px);box-shadow:0 24px 40px rgba(76,125,181,.16) !important}
#mov-lista-root .aquo-mov-goals .btn-objetivo{min-height:108px !important;border-radius:26px !important}
#mov-lista-root .aquo-mov-goals .btn-objetivo span:last-child{font-size:17px !important;line-height:1.2 !important}
#mov-lista-root .aquo-mov-head{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,255,.96));border:1px solid rgba(125,170,220,.18);border-radius:28px;padding:20px 22px;box-shadow:0 18px 34px rgba(84,124,164,.10)}
#mov-lista-root .aquo-mov-head p{font-size:15px !important}
#mov-lista-root .aquo-mov-session-list > p{font-size:13px !important;color:var(--primary-dark) !important}
#mov-lista-root .btn-sesion div[style*='font-size:18px']{font-size:20px !important}
#mov-lista-root .btn-sesion div[style*='font-size:13px']{font-size:14px !important;color:var(--text-secondary) !important}

#rutinas-root .rutinas-hero{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,255,.96));border:1px solid rgba(125,170,220,.18);border-radius:30px;padding:22px 24px;box-shadow:0 18px 34px rgba(84,124,164,.10)}
#rutinas-root .rutinas-hero h1{font-family:var(--font-serif);font-size:clamp(42px,5vw,66px) !important;line-height:1.02 !important;color:var(--primary-dark) !important}
#rutinas-root .rutinas-hero p{font-size:15px !important;line-height:1.7 !important;color:var(--text-secondary) !important}
#rutinas-root #rutinas-tabs{position:sticky;top:14px;z-index:4}
#rutinas-root .rutinas-tab-btn{font-size:15px !important}

.aquo-page-hero,.aquo-section-hero{overflow:hidden}
@media (max-width:1024px){.content-header{padding:20px 18px !important}.content-header .header-left{gap:14px !important}.content-header .header-title{font-size:clamp(20px,5vw,42px) !important}.content-header .header-subtitle{font-size:16px !important;line-height:1.3 !important}}
@media (max-width:860px){#rutinas-root .rutinas-hero,#mov-lista-root .aquo-mov-head{padding:18px 18px}.aquo-module-tail__inner{padding:14px 16px}.aquo-health-subpage h1{font-size:clamp(34px,8vw,48px) !important}.aquo-page-hero,.aquo-section-hero{padding:22px 18px !important}.aquo-date-stack{width:100%}.aquo-date-stack div{max-width:none;text-align:left !important}}
@media (max-width:640px){#rutinas-root #rutinas-tabs{position:static}.aquo-module-tail__line--bottom{gap:8px !important}.aquo-module-tail__social{padding:7px 10px !important;font-size:11px !important}#mov-lista-root .btn-sesion{padding:16px 16px !important}.aquo-page-hero__side,.aquo-hero-actions{width:100% !important}.aquo-nav-pills{justify-content:flex-start !important}.aquo-water-date,#sueno-day-label,.aquo-nutri-date{font-size:17px !important}}


/* === AQUO v30.4 surgical overrides === */
/* Theme-aware shell header */
.app-layout[data-theme="blue"] .content-header{background:linear-gradient(180deg,#f7fbff 0%,#eff7ff 100%) !important;border-bottom:1px solid rgba(130,181,230,.24) !important;}
.app-layout[data-theme="blue"] .content-header .greeting,.app-layout[data-theme="blue"] .content-header #cita-diaria{color:#2366be !important;}
.app-layout[data-theme="silver"] .content-header{background:linear-gradient(180deg,#fbfcfe 0%,#f2f5f9 100%) !important;border-bottom:1px solid rgba(168,181,196,.24) !important;}
.app-layout[data-theme="silver"] .content-header .greeting,.app-layout[data-theme="silver"] .content-header #cita-diaria{color:#5d6c7a !important;}
.app-layout[data-theme="gold"] .content-header{background:linear-gradient(180deg,#fffaf0 0%,#f8f0df 100%) !important;}
.app-layout[data-theme] .content-header .btn-gold{background:rgba(255,255,255,.82) !important;color:var(--primary-dark) !important;border:1px solid rgba(186,151,76,.34) !important;box-shadow:none !important;}
.content-header #cita-diaria,.content-header .home-hero-cita{font-size:clamp(18px,1.7vw,24px) !important;line-height:1.45 !important;opacity:.92 !important;}
.content-header .greeting{font-size:clamp(46px,5.4vw,74px) !important;line-height:1.02 !important;}

/* Compact water popup */
#popup-water.popup--water-toast{position:fixed !important;right:18px !important;bottom:18px !important;left:auto !important;top:auto !important;transform:translateY(10px) scale(.98) !important;opacity:0 !important;padding:0 !important;background:transparent !important;box-shadow:none !important;z-index:1400 !important;max-width:none !important;}
#popup-water.popup--water-toast.visible{transform:translateY(0) scale(1) !important;opacity:1 !important;}
#popup-water .popup-water-toast{display:grid !important;grid-template-columns:46px 1fr auto !important;gap:12px !important;align-items:center !important;width:min(320px,calc(100vw - 24px)) !important;padding:14px !important;border-radius:22px !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,248,255,.96)) !important;border:1px solid rgba(140,188,234,.20) !important;box-shadow:0 16px 34px rgba(74,118,170,.14) !important;overflow:hidden !important;min-height:auto !important;}
#popup-water .popup-water-toast::after{content:"";position:absolute;right:-8px;bottom:-8px;width:58px;height:58px;background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;opacity:.09;pointer-events:none;}
#popup-water .popup-water-toast__icon{width:46px !important;height:46px !important;border-radius:16px !important;background:linear-gradient(180deg,#fff,#eaf5ff) !important;box-shadow:0 8px 16px rgba(76,125,181,.10) !important;}
#popup-water .popup-water-toast__icon img{width:30px !important;height:30px !important;object-fit:contain !important;}
#popup-water .popup-water-toast__eyebrow{font-size:10px !important;letter-spacing:.14em !important;margin-bottom:2px !important;}
#popup-water .popup-water-toast__title{font-size:13px !important;line-height:1.15 !important;margin:0 0 2px !important;}
#popup-water .popup-water-toast__sub{font-size:11px !important;line-height:1.4 !important;color:#68809c !important;max-width:170px !important;}
#popup-water .popup-water-toast__btn{min-width:102px !important;padding:10px 12px !important;border-radius:999px !important;font-size:12px !important;box-shadow:none !important;align-self:center !important;}
@media (max-width:640px){#popup-water.popup--water-toast{right:10px !important;left:10px !important}#popup-water .popup-water-toast{width:calc(100vw - 20px) !important;grid-template-columns:42px 1fr auto !important;padding:12px !important}#popup-water .popup-water-toast__icon{width:42px !important;height:42px !important}#popup-water .popup-water-toast__btn{min-width:92px !important;padding:9px 10px !important;font-size:11px !important}}

/* Date legibility */
.aquo-date-stack,.aquo-date-stack *{color:#8f918f !important;}
.aquo-date-stack > div:first-child{color:var(--primary-dark) !important;font-weight:700 !important;}
#module-area [class*="date"], #module-area .fecha, #module-area [style*="02/04/2026"], #module-area [style*="jueves, 2 de abril"], #module-area [style*="abril 2026"]{text-shadow:0 1px 0 rgba(255,255,255,.72);}

/* Footer small aesthetic */
.aquo-module-tail__line{justify-content:center !important;text-align:center !important;}
.aquo-module-tail__social,.aquo-footer-social{transition:transform .16s ease, box-shadow .16s ease;}
.aquo-module-tail__social:hover,.aquo-footer-social:hover{transform:translateY(-1px);box-shadow:0 10px 16px rgba(70,120,170,.12);}

/* Founder card cleanup */
.aquo-founder-card{border-radius:30px !important;padding:26px 28px !important;}
.aquo-founder-card [style*="Visión y dirección · CEO"]{display:none !important;}

/* Movement visual hierarchy */
#aquo-root #tab-movimiento-content, #rutinas-root #tab-movimiento-content{display:flex;flex-direction:column;gap:18px;}
.aquo-mov-head,.aquo-mov-detail-hero{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,249,255,.95)) !important;border:1px solid rgba(125,170,220,.18) !important;box-shadow:0 16px 30px rgba(84,124,164,.10) !important;border-radius:26px !important;}
.aquo-mov-head h1,.aquo-mov-detail h1,#mov-lista-root h1,#sesion-detalle-root h1{font-size:clamp(34px,4vw,48px) !important;line-height:1.05 !important;letter-spacing:-.03em !important;}
#aquo-root #mov-lista-root .aquo-mov-head-pills span,#sesion-detalle-root .aquo-mov-detail-pills span{font-size:12px !important;padding:8px 12px !important;}
#mov-lista-root [style*="font-size:15px"],#sesion-detalle-root [style*="font-size:15px"]{font-size:13px !important;line-height:1.55 !important;color:var(--text-secondary) !important;}
#mov-lista-root [style*="font-size:13px"],#sesion-detalle-root [style*="font-size:13px"]{font-size:12px !important;}
#mov-lista-root [style*="border-left:4px solid"],#sesion-detalle-root [style*="border-left:4px solid"]{border-left-width:5px !important;}
#mov-lista-root .aquo-list-card,#sesion-detalle-root .ejercicio-card{border-radius:22px !important;box-shadow:0 12px 24px rgba(84,124,164,.08) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96)) !important;}

/* Health subpages polish */
.aquo-health-subpage,.aquo-health-subpage .card,.aquo-health-subpage .card-fluid{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.96)) !important;}
.aquo-health-subpage .card,.aquo-health-subpage .card-fluid{border-radius:24px !important;border:1px solid rgba(125,170,220,.16) !important;box-shadow:0 16px 30px rgba(84,124,164,.08) !important;}
.aquo-health-subpage h1{font-size:clamp(34px,4.4vw,56px) !important;line-height:1.02 !important;}
.aquo-health-subpage [style*="font-size:30px"],.aquo-health-subpage [style*="font-size:32px"]{font-size:clamp(34px,4vw,48px) !important;}
.aquo-health-subpage [style*="font-size:16px"],.aquo-health-subpage [style*="font-size:15px"]{line-height:1.65 !important;}
.aquo-health-subpage details,.aquo-health-subpage .faq-item{border-radius:18px !important;overflow:hidden;}

/* Theme-sensitive dates/actions in water/sleep/weight/nutrition */
.app-layout[data-theme="gold"] .aquo-date-stack,.app-layout[data-theme="gold"] .aquo-date-stack *{color:#9f8758 !important;}
.app-layout[data-theme="blue"] .aquo-date-stack,.app-layout[data-theme="blue"] .aquo-date-stack *{color:#6f87a3 !important;}
.app-layout[data-theme="silver"] .aquo-date-stack,.app-layout[data-theme="silver"] .aquo-date-stack *{color:#7a8797 !important;}

/* Mi Cuenta polish */
#module-area #cuenta-root [style*="Cuenta y sesión"],#module-area .account-shell [style*="Cuenta y sesión"]{font-family:var(--font-serif) !important;font-size:30px !important;color:var(--primary-dark) !important;}
#module-area #cuenta-root select,#module-area #cuenta-root input{border-radius:16px !important;min-height:46px !important;background:rgba(255,255,255,.96) !important;}

/* Remove duplicate icons in wellness title and health cards if any images fail */
.hub-card-icon img{display:none !important;}



/* v30.5 targeted closure patch */
.app-layout[data-theme="blue"] .sidebar{background:linear-gradient(180deg, rgba(237,247,255,0.98), rgba(224,238,250,0.95)) !important;border-right:1px solid rgba(149,183,218,0.22) !important;box-shadow:inset -1px 0 0 rgba(255,255,255,0.72)}
.app-layout[data-theme="blue"] .content-header{background:linear-gradient(180deg,rgba(246,251,255,.98),rgba(235,245,253,.96)) !important;border-bottom:1px solid rgba(125,170,220,.16) !important;box-shadow:0 16px 28px rgba(86,136,186,.06) !important}
.app-layout[data-theme="blue"] .sidebar-footer{border-top:1px solid rgba(125,170,220,.12) !important}
.app-layout[data-theme="blue"] .greeting span{color:#1e67c8 !important}

#popup-water{z-index:1200 !important}
#popup-water .popup-water-card__btn--mini:hover{transform:translateY(-1px)}
@media (max-width:640px){#popup-water .popup-water-card__title{max-width:none !important}#popup-water .popup-water-card__sub{max-width:none !important}}

/* Peso date and daily controls */
#peso-root .aquo-date-stack__date,
#peso-root [style*="02/04/2026"],
#peso-root [style*="font-size:16px;color:#999"]{font-size:22px !important;color:#8a8577 !important;font-weight:700 !important;letter-spacing:-.01em}
#peso-root button{min-height:44px}

/* Mi cuenta softer premium */
#module-area .account-card,
#module-area .account-section,
#module-area .profile-card{border-radius:24px !important;box-shadow:0 18px 32px rgba(92,120,153,.08) !important;border:1px solid rgba(130,174,214,.14) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.96)) !important}

/* About AQUO fine tune */
.aquo-founder-card{align-items:flex-start !important}
.aquo-founder-card [style*="Ana Victoria"]{font-size:16px !important}
.aquo-about-footer .aquo-footer-social{padding:8px 14px !important;border-radius:999px !important}

/* Footer pequeño global */
.aquo-module-tail__social{font-weight:700 !important}

/* Responsive movement */
@media (max-width:780px){.aquo-mov-head{gap:16px !important}.aquo-mov-head-pills{width:100%}.aquo-mov-head .btn{width:100%}.aquo-mov-session-list .btn-sesion{padding:18px 18px !important;border-radius:24px !important}}

/* v30.6 closure pass — shell/header/footer/health/date/icon refinements */
.content-header.header-compact{
  min-height:64px !important;
  padding:14px 26px !important;
  background:linear-gradient(180deg, rgba(240,247,255,.98), rgba(235,244,255,.94)) !important;
  border-bottom:1px solid rgba(125,170,220,.12) !important;
  box-shadow:0 8px 24px rgba(88,122,162,.06) !important;
}
.content-header.header-compact .header-isotipo{
  width:28px !important;height:40px !important;opacity:.92;
}
.content-header.header-compact .greeting{
  font-size:clamp(20px,2.2vw,28px) !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
  color:#2a61af !important;
}
.content-header.header-compact #cita-diaria{
  margin-top:4px;
  font-size:14px !important;
  line-height:1.45 !important;
  color:#7a8ea8 !important;
  font-style:italic;
  opacity:.92;
}
.content-header.header-compact .plan-badge,
.content-header.header-compact .btn.btn-gold.btn-sm{
  transform:scale(.96);
}
.content-header.header-compact .header-avatar{
  width:42px !important;height:42px !important;
  box-shadow:0 8px 18px rgba(33,150,243,.10) !important;
}

/* healthier shell in health modules */
#aud-root,
#vis-root{
  max-width:680px !important;
  gap:0 !important;
}
#aud-root > div:first-child,
#vis-root > div:first-child{margin-bottom:14px !important;}
#aud-root .aud-module-title,
#vis-root .vis-module-title{
  font-size:clamp(34px,4.4vw,52px) !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  color:#2c64b4 !important;
}
#aud-root > div:first-child p,
#vis-root > div:first-child p{
  font-size:15px !important;
  line-height:1.6 !important;
  color:#68809b !important;
}
#aud-root > div[style*="border-bottom:2px solid"],
#vis-root > div[style*="border-bottom:2px solid"]{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,250,255,.92));
  border:1px solid rgba(129,177,223,.16);
  border-bottom-color:rgba(129,177,223,.16) !important;
  border-radius:22px;
  padding:8px 10px;
  margin-bottom:18px !important;
  box-shadow:0 14px 28px rgba(92,120,153,.07);
}
#aud-root [data-aud-tab],
#vis-root [data-vis-tab]{
  flex:1 1 auto;
  min-height:44px;
  border-radius:14px;
}
#aud-root .card,
#aud-root .card-fluid,
#vis-root .card,
#vis-root .card-fluid{
  border-radius:24px !important;
  padding:20px 22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,255,.96)) !important;
  border:1px solid rgba(129,177,223,.16) !important;
  box-shadow:0 18px 34px rgba(92,120,153,.08) !important;
}
#aud-root .card-header,
#vis-root .card-header{
  font-size:18px !important;
  line-height:1.35 !important;
  color:#2d4f73 !important;
  margin-bottom:14px !important;
}
#aud-root label span,
#vis-root label span,
#aud-root p,
#vis-root p{font-size:14px !important;line-height:1.65 !important;}
#aud-root .btn.btn-primary,
#vis-root .btn.btn-primary{
  min-height:48px !important;
  border-radius:16px !important;
  font-size:14px !important;
  font-weight:800 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#aud-root textarea,
#vis-root textarea,
#aud-root select,
#vis-root select,
#aud-root input,
#vis-root input{font-size:14px !important;}

/* neutralize prior oversized health selectors */
#aud-root h1,
#vis-root h1{max-width:none !important;}

/* founder card cleanup */
.aquo-founder-card [style*="Visión"],
.aquo-founder-card [style*="Dirección"]{white-space:normal;}

/* module footer refinement */
.aquo-module-tail{margin:16px 0 2px !important;padding-bottom:2px !important;}
.aquo-module-tail__inner{
  width:min(700px, calc(100% - 18px)) !important;
  padding:12px 18px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,249,255,.88)) !important;
  border:1px solid rgba(132,176,217,.14) !important;
  box-shadow:0 10px 24px rgba(92,120,153,.06) !important;
}
.aquo-module-tail__line{gap:7px !important;}
.aquo-module-tail__line--top{font-size:11.5px !important;letter-spacing:.03em !important;color:#667d95 !important;}
.aquo-module-tail__line--bottom{font-size:11px !important;color:#7a8ea5 !important;}
.aquo-module-tail__social,
.aquo-module-tail__link{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
.aquo-module-tail__social:hover,
.aquo-module-tail__link:hover{opacity:.9;transform:none !important;box-shadow:none !important;}

/* about footer readability and elegance */
.aquo-about-footer{
  background:linear-gradient(135deg, #1f6fd8 0%, #338cf0 62%, #4aa0ff 100%) !important;
  border-radius:34px !important;
  box-shadow:0 24px 42px rgba(35,104,192,.18) !important;
}
.aquo-about-footer .aquo-footer-kicker{color:rgba(255,255,255,.86) !important;}
.aquo-about-footer .aquo-footer-text,
.aquo-about-footer h3,
.aquo-about-footer p{color:#fff !important;text-shadow:none !important;}
.aquo-about-footer .aquo-footer-soft{color:rgba(255,255,255,.88) !important;font-size:13px !important;}
.aquo-about-footer .aquo-footer-actions a:first-child{
  background:#fff !important;color:#195cab !important;border:1px solid rgba(255,255,255,.62) !important;
}
.aquo-about-footer .aquo-footer-actions a:last-child{
  background:rgba(255,255,255,.16) !important;color:#fff !important;border:1px solid rgba(255,255,255,.24) !important;
}
.aquo-about-footer .aquo-footer-social{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* dates in peso + movimiento */
#peso-root [style*="text-align:right"],
#peso-root .aquo-summary-note,
#peso-root [style*="02/04/2026"]{
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  color:#7d8795 !important;
  letter-spacing:-.02em !important;
  opacity:1 !important;
}
#aud-root [style*="Registro de hoy"],
#vis-root [style*="Registro de hoy"]{font-size:16px !important;}
#mov-lista-root [style*="font-size:13px;font-weight:600;color:var(--text-dark)"]{
  font-size:15px !important;
  font-weight:800 !important;
  color:#526b86 !important;
}
#mov-lista-root [style*="font-size:12px;color:var(--text-muted);margin-bottom:2px"]{
  font-size:11px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#8aa0b6 !important;
}

/* export buttons branded */
.aquo-export-btn__logo{
  width:18px;height:18px;object-fit:contain;display:inline-block;vertical-align:middle;
  filter:drop-shadow(0 4px 8px rgba(61,128,208,.16));
}
.aquo-export-btn{gap:10px !important;}

/* account hero refinement */
#module-area [onclick*="cuentaShowEdit"] + div{display:none;}

@media (max-width: 900px){
  .content-header.header-compact{padding:12px 16px !important;}
}
@media (max-width: 640px){
  .content-header.header-compact{min-height:58px !important;}
  .aquo-about-footer{padding:34px 20px 24px !important;border-radius:26px !important;}
  .aquo-about-footer h3{font-size:24px !important;}
  #aud-root .aud-module-title,
  #vis-root .vis-module-title{font-size:40px !important;}
}

/* v30.7 — shell header compacto para módulos internos
   Conserva: isotipo, nombre, cita diaria, badge de plan, avatar.
   Oculta: saludo editorial ("Buenas tardes,") — el nombre solo da contexto mínimo. */
.content-header.header-compact{
  min-height:68px !important;
  padding:10px 22px !important;
  background:linear-gradient(180deg,rgba(241,248,255,.98),rgba(234,244,253,.96)) !important;
  border-bottom:1px solid rgba(133,175,216,.16) !important;
  box-shadow:none !important;
}
/* Isotipo conservado — ancla visual y link funcional a /dashboard */
.content-header.header-compact .header-isotipo{width:34px !important;height:50px !important;opacity:.98 !important;filter:drop-shadow(0 6px 10px rgba(191,155,79,.12));}
/* Saludo ("Buenas tardes,"): oculto — elemento editorial */
.content-header.header-compact .header-title-main{display:none !important;}
/* Cita diaria: siempre visible en cabecera */
/* Greeting: solo queda el nombre del usuario. Tamaño funcional. */
.content-header.header-compact .greeting{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
.content-header.header-compact .btn.btn-gold.btn-sm{transform:none !important}
.content-header.header-compact .header-avatar{width:46px !important;height:46px !important;border:1px solid rgba(186,151,76,.32) !important;box-shadow:0 8px 18px rgba(70,120,170,.10) !important}

/* health modules: typography and save visibility */
#aud-root,
#vis-root{max-width:760px !important;width:100% !important}
.aquo-health-hero{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,250,255,.93));
  border:1px solid rgba(132,176,217,.15);
  border-radius:28px;
  padding:18px 22px 16px;
  margin-bottom:16px;
  box-shadow:0 16px 28px rgba(92,120,153,.07);
}
.aquo-health-hero__row{display:flex;align-items:center;gap:16px;min-width:0}
.aquo-health-hero__icon{font-size:54px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 4px 10px rgba(86,136,186,.12))}
.aquo-health-hero__copy{min-width:0;display:flex;flex-direction:column;gap:4px}
#aud-root .aud-module-title,
#vis-root .vis-module-title{font-size:clamp(24px,3vw,36px) !important;line-height:1.04 !important;color:#2d5ea7 !important;letter-spacing:-.025em !important}
#aud-root > div:first-child p,
#vis-root > div:first-child p,
.aquo-health-hero__copy p{font-size:14px !important;line-height:1.55 !important;color:#67809a !important}
#aud-root .card-header,
#vis-root .card-header{font-size:15px !important;line-height:1.35 !important}
#aud-root label span,
#vis-root label span,
#aud-root p,
#vis-root p{font-size:13px !important;line-height:1.6 !important}
#aud-root textarea,
#vis-root textarea,
#aud-root select,
#vis-root select,
#aud-root input,
#vis-root input{font-size:13px !important}
.aquo-health-savebar{position:sticky;bottom:8px;z-index:12;padding-top:10px}
.aquo-health-savebar .btn{min-height:50px !important;border-radius:16px !important;box-shadow:0 12px 22px rgba(33,150,243,.14) !important}
#aud-root [data-aud-tab],
#vis-root [data-vis-tab]{font-size:13px !important;font-weight:700 !important}

/* audio checkbox visual cleanup */
#aud-root input[type="checkbox"],#vis-root input[type="checkbox"]{width:20px !important;height:20px !important;border-radius:6px !important;accent-color:var(--primary) !important;outline:none !important;box-shadow:none !important}

/* peso date legibility */
#peso-root-wrap .aquo-hero-actions > div:last-child,
#peso-root-wrap .aquo-summary-note,
#peso-root-wrap .aquo-date-stack__date{
  font-size:20px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  color:#74859a !important;
  letter-spacing:-.015em !important;
  opacity:1 !important;
}
#peso-root-wrap .aquo-hero-actions > div:last-child{text-align:center !important}
#peso-root-wrap .aquo-nav-pills{justify-content:center !important}

/* about footer contrast */
.aquo-about-footer .aquo-footer-text{color:#ffffff !important;text-shadow:0 1px 0 rgba(7,36,76,.18) !important}.aquo-about-footer p[style*="AQUOAPP SL"]{color:#f2f7ff !important}

@media (max-width: 860px){
  .content-header.header-compact{padding:12px 16px !important}
  .aquo-health-hero{padding:16px 16px 14px !important;border-radius:24px !important}
  .aquo-health-hero__icon{font-size:44px !important}
  #aud-root .aud-module-title,
  #vis-root .vis-module-title{font-size:clamp(22px,8vw,32px) !important}
  #peso-root-wrap .aquo-hero-actions > div:last-child,
  #peso-root-wrap .aquo-summary-note{font-size:22px !important}
}
.aquo-export-btn__logo{width:26px !important;height:26px !important}
@media (max-width:640px){#aud-root .aud-module-title,#vis-root .vis-module-title{font-size:30px !important}}


/* v30.8 rigorous pass */
.app-layout[data-theme="blue"] .content-header.header-compact{background:linear-gradient(180deg,rgba(239,247,255,.98),rgba(232,242,252,.96)) !important;}
.app-layout[data-theme="blue"] .content-header.header-compact .greeting,
.app-layout[data-theme="blue"] .content-header.header-compact .greeting span{color:var(--aquo-title, #2f4f74) !important;}
.app-layout[data-theme="blue"] .content-header.header-compact #cita-diaria{color:color-mix(in srgb,var(--aquo-title, #2f4f74) 62%, white) !important;}
.app-layout[data-theme="silver"] .content-header.header-compact .greeting,
.app-layout[data-theme="silver"] .content-header.header-compact .greeting span{color:#5f6f80 !important;}
.app-layout[data-theme="gold"] .content-header.header-compact .greeting,
.app-layout[data-theme="gold"] .content-header.header-compact .greeting span{color:#7a5a2b !important;}

.aquo-health-savebar{position:static !important;margin-top:14px !important;padding:12px !important;border-radius:20px !important;background:linear-gradient(180deg,rgba(244,249,255,.96),rgba(236,244,252,.92)) !important;border:1px solid rgba(129,177,223,.18) !important;box-shadow:0 12px 24px rgba(92,120,153,.06) !important;}
.aquo-health-savebar .btn,#aud-root .aquo-health-savebar .btn,#vis-root .aquo-health-savebar .btn{display:flex !important;opacity:1 !important;visibility:visible !important;background:linear-gradient(180deg,#4f8fda,#2e71c7) !important;color:#fff !important;border:1px solid rgba(39,97,172,.42) !important;}
.aquo-health-savebar .btn[disabled]{opacity:.92 !important;color:#fff !important;}

.aquo-about-footer,.aquo-about-footer *{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.aquo-about-footer{position:relative;overflow:hidden;background:linear-gradient(135deg,#1e66cb 0%,#2f7fe0 54%,#4a99ff 100%) !important;}
.aquo-about-footer::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,36,76,.06),rgba(7,36,76,.02));pointer-events:none;}
.aquo-about-footer > *{position:relative;z-index:1;}
.aquo-about-footer .aquo-footer-kicker,.aquo-about-footer .aquo-footer-text,.aquo-about-footer h3,.aquo-about-footer p,.aquo-about-footer a{color:#fff !important;opacity:1 !important;}
.aquo-about-footer .aquo-footer-text{font-size:18px !important;line-height:1.75 !important;text-shadow:0 1px 0 rgba(9,34,70,.16) !important;}
.aquo-buco-root > div:first-child,.aquo-autoexp-root > div:first-child,.aquo-sex-root .ss-module-header{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,250,255,.93));border:1px solid rgba(132,176,217,.15);border-radius:28px;padding:18px 22px 16px;box-shadow:0 16px 28px rgba(92,120,153,.07);}
.aquo-buco-root h1,.aquo-autoexp-root h1,.aquo-sex-root .ss-module-header__title{font-size:clamp(28px,3.3vw,44px) !important;line-height:1.05 !important;letter-spacing:-.03em !important;color:#2d5ea7 !important;margin:0 0 6px !important;}
.aquo-buco-root p,.aquo-autoexp-root p,.aquo-sex-root .ss-module-header__sub{color:#67809a !important;}
.aquo-buco-root .card,.aquo-autoexp-root .card,.aquo-sex-root .card{border-radius:24px !important;border:1px solid rgba(129,177,223,.16) !important;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.96)) !important;box-shadow:0 18px 34px rgba(92,120,153,.08) !important;}
.aquo-sex-root .ss-privacy-chip{background:rgba(109,171,128,.14) !important;border:1px solid rgba(109,171,128,.24) !important;color:#3d7f4e !important;}
.aquo-buco-root [style*="background:#FFEBEE"],.aquo-buco-root [style*="background:#FFF3E0"],.aquo-buco-root [style*="background:#FFF8F0"]{border-radius:18px !important;}
@media (max-width: 640px){.aquo-health-savebar{padding:10px !important}.aquo-buco-root h1,.aquo-autoexp-root h1,.aquo-sex-root .ss-module-header__title{font-size:clamp(24px,8vw,34px) !important;}}


/* ========================================================================
   v30.9 — AQUO rigorous consolidation pass
   Header blue + footer sobre AQUO + popup agua + salud submodules
   ======================================================================== */

/* BLUE theme header: align with AQUO block titles */
.app-layout:not([data-theme]) .content-header{
  background:linear-gradient(180deg,rgba(244,250,255,.98),rgba(232,243,253,.96)) !important;
  border-bottom:1px solid rgba(128,170,214,.18) !important;
  box-shadow:0 14px 28px rgba(76,122,176,.07) !important;
}
.app-layout:not([data-theme]) .greeting,
.app-layout:not([data-theme]) .content-header .greeting,
.app-layout:not([data-theme]) .greeting .header-title-main,
.app-layout:not([data-theme]) .greeting strong{
  color:#215fb2 !important;
}
.app-layout:not([data-theme]) .greeting span,
.app-layout:not([data-theme]) #greeting-text span{
  color:#2b6fc8 !important;
}
.app-layout:not([data-theme]) #cita-diaria,
.app-layout:not([data-theme]) #cita-diaria *,
.app-layout:not([data-theme]) .content-header small,
.app-layout:not([data-theme]) .content-header .quote,
.app-layout:not([data-theme]) .content-header .sub-greeting{
  color:#6e88a8 !important;
}
.app-layout:not([data-theme]) .content-header .btn.btn-gold,
.app-layout:not([data-theme]) .content-header [data-plan="premium"],
.app-layout:not([data-theme]) .content-header [data-plan="premium_plus"]{
  background:linear-gradient(180deg,rgba(252,247,232,.96),rgba(244,235,210,.92)) !important;
  color:#9a7428 !important;
  border:1px solid rgba(201,168,76,.30) !important;
}

/* Sobre AQUO footer: force readable contrast */
.aquo-about-footer{
  background:linear-gradient(135deg,#1f67c7 0%,#2d7ddf 56%,#499bff 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 24px 42px rgba(31,103,199,.22) !important;
}
.aquo-about-footer::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,29,66,.08),rgba(5,29,66,.02));
  pointer-events:none;
}
.aquo-about-footer h3,
.aquo-about-footer .aquo-footer-text,
.aquo-about-footer .aquo-footer-kicker,
.aquo-about-footer .aquo-footer-soft,
.aquo-about-footer p,
.aquo-about-footer a{
  position:relative;
  z-index:1;
}
.aquo-about-footer .aquo-footer-kicker{color:rgba(245,250,255,.92) !important;}
.aquo-about-footer h3{color:#ffffff !important;text-shadow:0 1px 0 rgba(6,31,67,.18) !important;}
.aquo-about-footer .aquo-footer-text,
.aquo-about-footer p:not(.aquo-footer-soft):not(.aquo-footer-kicker){
  color:#f7fbff !important;
  text-shadow:0 1px 0 rgba(6,31,67,.14) !important;
}.aquo-about-footer .aquo-footer-actions a:first-child{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,249,255,.96)) !important;
  color:#1f63b8 !important;
}
.aquo-about-footer .aquo-footer-actions a:last-child,
.aquo-about-footer .aquo-footer-social{
  background:rgba(255,255,255,.16) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Water popup: compact, branded, with larger blue isotipo */
.popup--water-compact{
  position:fixed;
  right:20px;
  bottom:24px;
  z-index:1200;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.popup--water-compact.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.popup-water-card{
  width:min(430px,calc(100vw - 28px));
  display:grid;
  grid-template-columns:96px 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.96));
  border:1px solid rgba(112,165,220,.22);
  box-shadow:0 22px 44px rgba(63,116,176,.16), inset 0 1px 0 rgba(255,255,255,.96);
}
.popup-water-card__icon{
  width:96px;height:96px;border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98),rgba(219,237,255,.94) 55%,rgba(196,226,253,.92) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 12px 26px rgba(79,132,193,.16);
}
.popup-water-card__icon img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(44,110,182,.18));}
.popup-water-card__eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#82a3c5;margin-bottom:4px;}
.popup-water-card__title{font-family:var(--font-serif);font-size:22px;line-height:1.02;color:#1f63b8;letter-spacing:-.03em;}
.popup-water-card__sub{font-size:13px;line-height:1.5;color:#6b84a0;margin-top:6px;max-width:230px;}
.popup-water-card__btn{
  min-height:46px;border-radius:999px !important;padding:0 18px !important;
  background:linear-gradient(180deg,#5c9ae3,#2f73c9) !important;
  color:#fff !important;border:1px solid rgba(42,104,183,.42) !important;
  box-shadow:0 12px 20px rgba(62,116,176,.18) !important;
  white-space:nowrap;
}
@media (max-width:640px){
  .popup--water-compact{right:12px;left:12px;bottom:14px;}
  .popup-water-card{width:100%;grid-template-columns:76px 1fr;grid-template-areas:'icon copy' 'btn btn';padding:12px 12px 14px;border-radius:24px;}
  .popup-water-card__icon{grid-area:icon;width:76px;height:76px;border-radius:20px;}
  .popup-water-card__icon img{width:58px;height:58px;}
  .popup-water-card__copy{grid-area:copy;}
  .popup-water-card__btn{grid-area:btn;width:100%;margin-top:2px;}
  .popup-water-card__title{font-size:20px;}
}

/* Glass button system propagated to health modules */
.aquo-health-savebar .btn,
#btn-guardar-autoexp,
#btn-guardar-ss,
#btn-guardar-buco-hoy,
[id^="btn-guardar-buco-"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:50px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(95,160,233,.98),rgba(44,115,201,.98)) !important;
  color:#ffffff !important;
  border:1px solid rgba(42,104,183,.40) !important;
  box-shadow:0 14px 26px rgba(63,116,176,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.aquo-health-savebar{
  margin-top:16px !important;
  padding:12px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(244,249,255,.98),rgba(234,243,252,.94)) !important;
  border:1px solid rgba(129,177,223,.18) !important;
}

/* Health modules — unify shells, chips and controls */
.aquo-autoexp-root,
.aquo-buco-root,
.aquo-sex-root{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:920px;
}
.aquo-autoexp-root > div:first-child,
.aquo-buco-root > div:first-child,
.aquo-sex-root .ss-module-header{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,249,255,.94)) !important;
  border:1px solid rgba(129,177,223,.16) !important;
  border-radius:30px !important;
  padding:18px 22px 16px !important;
  box-shadow:0 18px 32px rgba(92,120,153,.07) !important;
}
.aquo-autoexp-root h1,
.aquo-buco-root h1,
.aquo-sex-root .ss-module-header__title{
  font-family:var(--font-serif) !important;
  font-size:clamp(30px,4vw,52px) !important;
  line-height:1.02 !important;
  letter-spacing:-.04em !important;
  color:#215fb2 !important;
}
.aquo-autoexp-root p,
.aquo-buco-root p,
.aquo-sex-root .ss-module-header__sub{color:#6a84a0 !important;}
.aquo-autoexp-root .card,
.aquo-buco-root .card,
.aquo-sex-root .card{
  border-radius:26px !important;
  border:1px solid rgba(129,177,223,.16) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.97)) !important;
  box-shadow:0 18px 34px rgba(92,120,153,.08) !important;
}
.aquo-autoexp-root .card-header,
.aquo-buco-root .card-header,
.aquo-sex-root .card-header{
  color:#2c61aa !important;
  font-size:17px !important;
  font-weight:800 !important;
}
.aquo-autoexp-root input,
.aquo-autoexp-root textarea,
.aquo-autoexp-root select,
.aquo-buco-root input,
.aquo-buco-root textarea,
.aquo-buco-root select,
.aquo-sex-root input,
.aquo-sex-root textarea,
.aquo-sex-root select{
  border-radius:18px !important;
  border:1px solid rgba(129,177,223,.22) !important;
  background:rgba(255,255,255,.96) !important;
}
.aquo-autoexp-root .btn-hallazgo,
.aquo-buco-root .btn-cep,
.aquo-sex-root .btn-toggle,
.aquo-sex-root .btn-proteccion,
.aquo-sex-root .btn-deseo,
.aquo-sex-root .btn-intensidad-dolor{
  border-radius:18px !important;
  box-shadow:0 10px 18px rgba(86,136,186,.06);
}
.aquo-sex-root .ss-privacy-chip{
  background:linear-gradient(180deg,rgba(238,248,241,.98),rgba(226,244,232,.96)) !important;
  border:1px solid rgba(118,176,131,.22) !important;
  color:#3f8151 !important;
}
@media (max-width:720px){
  .aquo-autoexp-root h1,
  .aquo-buco-root h1,
  .aquo-sex-root .ss-module-header__title{font-size:clamp(24px,8vw,36px) !important;}
}

/* === AQUO v30.9 exhaustive audit pass — health + popup + shell harmony === */
:root{
  --aquo-blue-title:#2f4f74;
  --aquo-blue-body:#6b83a0;
  --aquo-blue-surface:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.95));
  --aquo-blue-surface-strong:linear-gradient(145deg,rgba(255,255,255,.98),rgba(236,245,255,.96));
  --aquo-glass-border:rgba(128,177,223,.18);
  --aquo-glass-shadow:0 18px 34px rgba(84,124,164,.10);
}
.app-layout[data-theme="blue"] .content-header,
.app-layout[data-theme="blue"] .content-header.header-compact,
.app-layout[data-theme="blue"] .shell-header{
  background:linear-gradient(180deg,rgba(242,249,255,.98),rgba(233,243,252,.96)) !important;
  border-bottom:1px solid rgba(125,170,220,.18) !important;
  box-shadow:0 12px 28px rgba(86,136,186,.06) !important;
}
.app-layout[data-theme="blue"] .content-header .greeting,
.app-layout[data-theme="blue"] .content-header .greeting span,
.app-layout[data-theme="blue"] .content-header #greeting-text,
.app-layout[data-theme="blue"] .content-header #greeting-text span,
.app-layout[data-theme="blue"] .content-header .header-title-main,
.app-layout[data-theme="blue"] .content-header .greeting strong{
  color:var(--aquo-blue-title) !important;
}
.app-layout[data-theme="blue"] .content-header #cita-diaria,
.app-layout[data-theme="blue"] .content-header .quote,
.app-layout[data-theme="blue"] .content-header p{
  color:color-mix(in srgb,var(--aquo-blue-title) 62%, white) !important;
}
.app-layout[data-theme="blue"] .content-header .btn.btn-gold,
.app-layout[data-theme="blue"] .content-header [data-plan="premium_plus"]{
  background:rgba(255,248,238,.82) !important;
  color:#9a7331 !important;
  border-color:rgba(188,155,87,.30) !important;
}

/* About footer: readability first */
.aquo-about-footer{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1f70da 0%,#2f89f0 60%,#4ea2ff 100%) !important;
}
.aquo-about-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,32,64,.08),rgba(0,0,0,.06));
  pointer-events:none;
}
.aquo-about-footer > *{position:relative;z-index:1}
.aquo-about-footer .aquo-footer-kicker{color:rgba(255,255,255,.92) !important;}
.aquo-about-footer h3,
.aquo-about-footer .aquo-footer-text,
.aquo-about-footer p:not(.aquo-footer-soft){color:#fff !important;text-shadow:0 1px 0 rgba(6,24,52,.12) !important;}.aquo-about-footer .aquo-footer-actions a:first-child{background:#ffffff !important;color:#165eb5 !important;}
.aquo-about-footer .aquo-footer-actions a:last-child,
.aquo-about-footer .aquo-footer-social{
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.aquo-about-footer .aquo-footer-social:hover,
.aquo-about-footer .aquo-footer-actions a:last-child:hover{background:rgba(255,255,255,.22) !important;}

/* Water popup — smaller footprint, stronger isotipo, theme-aware signature card */
#popup-water.popup--water-signature{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  left:auto !important;
  top:auto !important;
  z-index:1400 !important;
  background:transparent !important;
  box-shadow:none !important;
  max-width:none !important;
  padding:0 !important;
  opacity:0 !important;
  transform:translateY(12px) scale(.98) !important;
}
#popup-water.popup--water-signature.visible{opacity:1 !important;transform:translateY(0) scale(1) !important;}
#popup-water .popup-water-card--signature{
  position:relative;
  display:grid;
  grid-template-columns:84px 1fr auto;
  gap:16px;
  align-items:center;
  width:min(430px,calc(100vw - 30px));
  padding:16px 18px;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(238,247,255,.96));
  border:1px solid rgba(133,183,228,.24);
  box-shadow:0 28px 48px rgba(63,120,186,.18);
  overflow:hidden;
}
#popup-water .popup-water-card--signature::after{
  content:"";
  position:absolute;
  right:-8px;
  bottom:-10px;
  width:104px;
  height:104px;
  background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;
  opacity:.11;
  pointer-events:none;
}
#popup-water .popup-water-card__glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 14% 24%,rgba(199,233,255,.58),transparent 28%),
             radial-gradient(circle at 87% 80%,rgba(145,204,255,.26),transparent 18%);
  pointer-events:none;
}
#popup-water .popup-water-card__icon--signature{
  width:84px !important;height:84px !important;border-radius:26px !important;
  background:linear-gradient(180deg,#ffffff,#e8f4ff) !important;
  border:1px solid rgba(133,183,228,.20) !important;
  box-shadow:0 14px 28px rgba(76,125,181,.12) !important;
  display:flex;align-items:center;justify-content:center;
}
#popup-water .popup-water-card__icon--signature img{width:62px !important;height:62px !important;object-fit:contain !important;filter:drop-shadow(0 8px 16px rgba(44,110,182,.18));}
#popup-water .popup-water-card__copy--signature{position:relative;z-index:1;min-width:0;}
#popup-water .popup-water-card__eyebrow{font-size:10px !important;letter-spacing:.16em !important;color:#74a7dd !important;text-transform:uppercase !important;font-weight:800 !important;}
#popup-water .popup-water-card__btn--signature{
  min-width:126px !important;
  padding:11px 16px !important;
  border-radius:18px !important;
  font-weight:800 !important;
  box-shadow:0 14px 22px rgba(48,124,216,.18) !important;
  align-self:center !important;
}
@media (max-width:640px){
  #popup-water.popup--water-signature{right:10px !important;left:10px !important;}
  #popup-water .popup-water-card--signature{width:calc(100vw - 20px);grid-template-columns:70px 1fr;grid-template-areas:'icon copy' 'btn btn';padding:14px 14px 15px;gap:12px;}
  #popup-water .popup-water-card__icon--signature{grid-area:icon;width:70px !important;height:70px !important;border-radius:22px !important;}
  #popup-water .popup-water-card__icon--signature img{width:52px !important;height:52px !important;}
  #popup-water .popup-water-card__copy--signature{grid-area:copy;}
  #popup-water .popup-water-card__btn--signature{grid-area:btn;width:100%;min-width:0 !important;}
  #popup-water .popup-water-card__title{font-size:21px !important;}
  #popup-water .popup-water-card__sub{max-width:none !important;}
}

/* Health shells — bucodental, autoexploración, salud sexual */
.aquo-buco-root,
.aquo-autoexp-root,
.aquo-sex-root{max-width:920px !important;display:flex;flex-direction:column;gap:20px;}
.aquo-buco-root > div:first-child,
.aquo-autoexp-root > div:first-child,
.aquo-sex-root .ss-module-header{
  position:relative;
  overflow:hidden;
  background:var(--aquo-blue-surface-strong) !important;
  border:1px solid var(--aquo-glass-border) !important;
  border-radius:30px !important;
  padding:20px 24px 18px !important;
  box-shadow:var(--aquo-glass-shadow) !important;
}
.aquo-buco-root > div:first-child::after,
.aquo-autoexp-root > div:first-child::after,
.aquo-sex-root .ss-module-header::after{
  content:"";
  position:absolute;
  right:-14px;
  bottom:-18px;
  width:126px;
  height:126px;
  background:url('assets/icons/isotipo_clean.png') center/contain no-repeat;
  opacity:.09;
  pointer-events:none;
}
.aquo-buco-root h1,
.aquo-autoexp-root h1,
.aquo-sex-root .ss-module-header__title{
  font-size:clamp(32px,4vw,54px) !important;
  line-height:1.02 !important;
  letter-spacing:-.04em !important;
  color:var(--aquo-blue-title) !important;
  margin:0 0 6px !important;
}
.aquo-buco-root p,
.aquo-autoexp-root p,
.aquo-sex-root .ss-module-header__sub{color:var(--aquo-blue-body) !important;}
.aquo-buco-root .card,
.aquo-autoexp-root .card,
.aquo-sex-root .card,
.aquo-buco-root details,
.aquo-autoexp-root details,
.aquo-sex-root details{
  background:var(--aquo-blue-surface) !important;
  border:1px solid var(--aquo-glass-border) !important;
  border-radius:26px !important;
  box-shadow:var(--aquo-glass-shadow) !important;
}
.aquo-buco-root .card-header,
.aquo-autoexp-root .card-header,
.aquo-sex-root .card-header{font-size:16px !important;font-weight:800 !important;color:var(--aquo-blue-title) !important;letter-spacing:-.02em !important;}
.aquo-buco-root input,
.aquo-buco-root textarea,
.aquo-buco-root select,
.aquo-autoexp-root input,
.aquo-autoexp-root textarea,
.aquo-autoexp-root select,
.aquo-sex-root input,
.aquo-sex-root textarea,
.aquo-sex-root select{
  min-height:48px;
  border-radius:18px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(139,184,226,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

/* Glass/3D buttons extended across health */
.aquo-buco-root .btn,
.aquo-autoexp-root .btn,
.aquo-sex-root .btn,
.aquo-buco-root .btn-cep,
.aquo-sex-root .btn-toggle,
.aquo-sex-root .btn-proteccion,
.aquo-sex-root .btn-deseo,
.aquo-sex-root .btn-intensidad-dolor,
.aquo-autoexp-root .btn-hallazgo{
  position:relative;
  overflow:hidden;
  border-radius:18px !important;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 22px rgba(84,124,164,.08);
}
.aquo-buco-root .btn::before,
.aquo-autoexp-root .btn::before,
.aquo-sex-root .btn::before,
.aquo-buco-root .btn-cep::before,
.aquo-sex-root .btn-toggle::before,
.aquo-sex-root .btn-proteccion::before,
.aquo-sex-root .btn-deseo::before,
.aquo-sex-root .btn-intensidad-dolor::before,
.aquo-autoexp-root .btn-hallazgo::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
  pointer-events:none;
}
.aquo-buco-root .btn:not(.btn-primary),
.aquo-autoexp-root .btn:not(.btn-primary),
.aquo-sex-root .btn:not(.btn-primary),
.aquo-buco-root .btn-cep,
.aquo-sex-root .btn-toggle,
.aquo-sex-root .btn-proteccion,
.aquo-sex-root .btn-deseo,
.aquo-sex-root .btn-intensidad-dolor,
.aquo-autoexp-root .btn-hallazgo{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(238,246,255,.88)) !important;
  border:1px solid rgba(132,177,221,.22) !important;
}
.aquo-buco-root .btn-primary,
.aquo-autoexp-root .btn-primary,
.aquo-sex-root .btn-primary{
  background:linear-gradient(180deg,#5ca4f4,#2f79d2) !important;
  border:1px solid rgba(39,97,172,.42) !important;
  color:#fff !important;
}
.aquo-health-savebar{background:linear-gradient(180deg,rgba(244,249,255,.98),rgba(236,244,252,.94)) !important;border:1px solid rgba(129,177,223,.18) !important;}
.aquo-health-savebar .btn{min-height:52px !important;font-size:14px !important;}

/* Theme adaptation for health shells/buttons */
.app-layout[data-theme="silver"] .aquo-buco-root > div:first-child,
.app-layout[data-theme="silver"] .aquo-autoexp-root > div:first-child,
.app-layout[data-theme="silver"] .aquo-sex-root .ss-module-header,
.app-layout[data-theme="silver"] .aquo-buco-root .card,
.app-layout[data-theme="silver"] .aquo-autoexp-root .card,
.app-layout[data-theme="silver"] .aquo-sex-root .card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,247,250,.96)) !important;
  border-color:rgba(173,185,199,.18) !important;
}
.app-layout[data-theme="silver"] .aquo-buco-root h1,
.app-layout[data-theme="silver"] .aquo-autoexp-root h1,
.app-layout[data-theme="silver"] .aquo-sex-root .ss-module-header__title,
.app-layout[data-theme="silver"] .aquo-buco-root .card-header,
.app-layout[data-theme="silver"] .aquo-autoexp-root .card-header,
.app-layout[data-theme="silver"] .aquo-sex-root .card-header{color:#5c6d7f !important;}
.app-layout[data-theme="gold"] .aquo-buco-root > div:first-child,
.app-layout[data-theme="gold"] .aquo-autoexp-root > div:first-child,
.app-layout[data-theme="gold"] .aquo-sex-root .ss-module-header,
.app-layout[data-theme="gold"] .aquo-buco-root .card,
.app-layout[data-theme="gold"] .aquo-autoexp-root .card,
.app-layout[data-theme="gold"] .aquo-sex-root .card{
  background:linear-gradient(180deg,rgba(255,252,246,.98),rgba(249,244,235,.96)) !important;
  border-color:rgba(201,181,141,.20) !important;
}
.app-layout[data-theme="gold"] .aquo-buco-root h1,
.app-layout[data-theme="gold"] .aquo-autoexp-root h1,
.app-layout[data-theme="gold"] .aquo-sex-root .ss-module-header__title,
.app-layout[data-theme="gold"] .aquo-buco-root .card-header,
.app-layout[data-theme="gold"] .aquo-autoexp-root .card-header,
.app-layout[data-theme="gold"] .aquo-sex-root .card-header{color:#7a5a2b !important;}

/* Health texts and controls more compact */
.aquo-buco-root [style*="font-size:14px"],
.aquo-autoexp-root [style*="font-size:14px"],
.aquo-sex-root [style*="font-size:14px"],
.aquo-buco-root [style*="font-size:13px"],
.aquo-autoexp-root [style*="font-size:13px"],
.aquo-sex-root [style*="font-size:13px"]{line-height:1.62 !important;}
@media (max-width:720px){
  .aquo-buco-root h1,.aquo-autoexp-root h1,.aquo-sex-root .ss-module-header__title{font-size:clamp(26px,8vw,38px) !important;}
  .aquo-buco-root > div:first-child,.aquo-autoexp-root > div:first-child,.aquo-sex-root .ss-module-header{padding:18px 18px 16px !important;}
}


/* v30.10 — harmonise blue header, footer legibility, health hub summaries */
.app-layout[data-theme="blue"] .content-header,
.app-layout[data-theme="blue"] .main-header{
  background:linear-gradient(180deg,rgba(246,251,255,.98),rgba(237,246,255,.95)) !important;
  border-bottom:1px solid rgba(125,170,220,.18) !important;
}
.app-layout[data-theme="blue"] .content-header .greeting,
.app-layout[data-theme="blue"] .content-header #greeting-text{
  color:var(--primary-dark) !important;
  font-family:var(--font-serif) !important;
}
.app-layout[data-theme="blue"] .content-header .greeting span,
.app-layout[data-theme="blue"] .content-header #greeting-text span{
  color:var(--primary-dark) !important;
}
.app-layout[data-theme="blue"] .content-header #cita-diaria,
.app-layout[data-theme="blue"] .content-header .quote,
.app-layout[data-theme="blue"] .content-header p{
  color:#7b91ab !important;
}
.app-layout[data-theme="blue"] .sidebar .nav-item{color:#334155 !important;}
.app-layout[data-theme="blue"] .sidebar .nav-item.active{color:var(--primary-dark) !important;}

.aquo-about-footer{background:linear-gradient(135deg,#1d6fd9 0%,#4f9ef6 100%) !important;}
.aquo-about-footer .aquo-footer-kicker,
.aquo-about-footer .aquo-footer-text,
.aquo-about-footer .aquo-footer-soft,
.aquo-about-footer h3,
.aquo-about-footer p,
.aquo-about-footer a{color:#fff !important;}
.aquo-about-footer .aquo-footer-text{opacity:1 !important;text-shadow:0 1px 0 rgba(5,25,55,.18) !important;}
.aquo-about-footer .aquo-footer-soft{opacity:.92 !important;}

.hub-card-summary{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
#module-area .aquo-list-card .hub-card-title{font-size:16px !important;}
#module-area .aquo-list-card .hub-card-sub{font-size:12.5px !important;}
#module-area .aquo-list-card .hub-card-date{margin-left:auto;font-size:12px;font-weight:700;color:#8aa0b8;}

.aquo-autoexp-root{background:transparent !important;}
.aquo-autoexp-root > .card, .aquo-autoexp-root > .aquo-page-hero{position:relative;z-index:1;}


/* v30.11 — header/footer/autoexploracion/water popup final alignment */
.app-layout[data-theme="blue"]{
  --aquo-title:#2c5fa8;
  --aquo-soft-text:#6f86a0;
}
.content-header{
  background:linear-gradient(180deg, color-mix(in srgb,var(--aquo-panel-top) 94%, white), color-mix(in srgb,var(--aquo-panel-bottom) 98%, white)) !important;
  border-bottom:1px solid color-mix(in srgb,var(--aquo-title) 12%, white) !important;
  box-shadow:0 10px 24px rgba(63,109,164,.08) !important;
}
.greeting, .greeting span, .greeting strong, #greeting-text, #greeting-text *{
  color:var(--aquo-title) !important;
}
.greeting{gap:2px !important;}
.greeting .header-title-main, .greeting strong{
  font-family:var(--font-serif) !important;
  font-size:clamp(27px,3.6vw,46px) !important;
  line-height:0.98 !important;
  letter-spacing:-.035em !important;
  font-weight:600 !important;
}
#greeting-text + #cita-diaria, #cita-diaria{
  color:color-mix(in srgb,var(--aquo-title) 44%, #8ba3bd) !important;
  opacity:1 !important;
}
.aquo-about-footer{
  background:linear-gradient(135deg,#145fc0 0%,#3688ea 100%) !important;
  position:relative;overflow:hidden;
}
.aquo-about-footer::before{
  content:'';position:absolute;inset:auto auto -80px -60px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(12,48,98,.22) 0%,rgba(12,48,98,0) 72%);pointer-events:none;
}
.aquo-about-footer .aquo-footer-kicker,
.aquo-about-footer h3,
.aquo-about-footer .aquo-footer-text,
.aquo-about-footer .aquo-footer-soft,
.aquo-about-footer p,
.aquo-about-footer a{color:#fff !important; opacity:1 !important;}
.aquo-about-footer .aquo-footer-text{
  text-shadow:0 1px 0 rgba(7,31,67,.18) !important;
  font-weight:500 !important;
}
.aquo-about-footer .aquo-footer-soft{color:#eef6ff !important;}
.aquo-about-footer .aquo-footer-actions a:first-child{background:#fff !important;color:#1d5fb7 !important;}
.aquo-about-footer .aquo-footer-actions a:last-child,
.aquo-about-footer .aquo-footer-social{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important;}
.aquo-autoexp-root > div:first-child::after{content:none !important;}
#popup-water{right:20px !important;left:auto !important;transform:none !important;bottom:22px !important;max-width:min(420px, calc(100vw - 28px)) !important;}
#popup-water.visible{transform:none !important;}
#popup-water .popup-water-card{padding:16px 18px 16px 16px !important;gap:14px !important;border-radius:24px !important;}
#popup-water .popup-water-card__icon{width:78px !important;height:78px !important;flex:0 0 78px !important;}
#popup-water .popup-water-card__icon img{width:100% !important;height:100% !important;object-fit:contain !important;}#popup-water .popup-water-card__sub{font-size:13px !important;line-height:1.55 !important;opacity:.96 !important;}#popup-water .popup-water-card__btn{min-width:118px !important;border-radius:16px !important;}


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Shell Canonical v1.0
   Fuente única de verdad para shell visual.
   Gana por posición (último en cascada) + especificidad (body prefix).
   No añadir !important — la especificidad 0,1,2,0 es suficiente.
   Fecha: 2026-04 · No parchear encima de este bloque.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. CONTENT-HEADER CANONICAL ─────────────────────────────────────────────
   Consolida las ~22 definiciones previas. Propiedades de estructura son
   inamovibles. Las visuales (bg, border, shadow) varían por tema.
   ─────────────────────────────────────────────────────────────────────────── */

/* Base — Blue (default) */
body .app-layout .content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: var(--space-4);
  padding: 16px 32px;
  min-height: 76px;
  background: linear-gradient(135deg, #E3F2FD 0%, #EEF7FF 60%, #F0F8FF 100%);
  border-bottom: 1px solid rgba(33,150,243,0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 20px rgba(33,150,243,0.08);
}

/* Silver */
body .app-layout[data-theme="silver"] .content-header {
  background: linear-gradient(135deg, #E8EDF2 0%, #EDF1F5 60%, #F0F3F6 100%);
  border-bottom-color: rgba(160,172,186,0.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 4px 24px rgba(78,89,104,0.08);
}

/* Gold */
body .app-layout[data-theme="gold"] .content-header {
  background: linear-gradient(135deg,
    rgba(255,253,248,0.98) 0%,
    rgba(252,247,236,0.95) 60%,
    rgba(249,242,224,0.92) 100%);
  border-bottom-color: rgba(201,168,76,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 28px rgba(184,150,62,0.10);
}

/* Responsive */
@media (min-width: 1400px) {
  body .app-layout .content-header { padding: 16px 40px; }
}
@media (max-width: 900px) {
  body .app-layout .content-header { padding: 14px 20px; min-height: 68px; }
}
@media (max-width: 600px) {
  body .app-layout .content-header { padding: 12px 16px; min-height: 60px; }
}

/* ── 2. GREETING CANONICAL ───────────────────────────────────────────────────
   Elimina la varianza clamp(22→44px). Un único valor estable por tema.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout .greeting .header-title-main,
body .app-layout .greeting strong {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--primary-dark);
}

body .app-layout[data-theme="silver"] .greeting .header-title-main,
body .app-layout[data-theme="silver"] .greeting strong {
  color: var(--tier-pro-title);
}

body .app-layout[data-theme="gold"] .greeting .header-title-main,
body .app-layout[data-theme="gold"] .greeting strong {
  color: var(--tier-plus-title);
}

/* Blue forzado — evita que plan-based overrides cambien el color en tema blue */
body .app-layout[data-theme="blue"] .greeting .header-title-main,
body .app-layout[data-theme="blue"] .greeting strong {
  color: var(--primary-dark);
}

/* ── 3. SIDEBAR BLUE+PLAN BUG FIX ────────────────────────────────────────────
   BUG RAÍZ: applyTheme() siempre escribe data-theme="blue" en el DOM.
   Consecuencia: los selectores :not([data-theme]) (líneas 4928-4960)
   NUNCA disparan → el warm cream de [data-plan="premium_plus"] GANA.
   FIX: selectores [data-theme="blue"] explícitos con especificidad mayor.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout[data-theme="blue"][data-plan="premium_plus"] .sidebar {
  background: linear-gradient(180deg, #DCF0FF 0%, #D4EAFF 60%, #CCE4FF 100%);
  border-right-color: rgba(33,150,243,0.20);
}

body .app-layout[data-theme="blue"][data-plan="premium"] .sidebar {
  background: linear-gradient(180deg, #EBF5FF 0%, #E4F0FD 60%, #DCE9FB 100%);
  border-right-color: rgba(33,150,243,0.14);
}

/* Sidebar logo border en blue — independiente del plan */
body .app-layout[data-theme="blue"][data-plan="premium_plus"] .sidebar-logo,
body .app-layout[data-theme="blue"][data-plan="premium"] .sidebar-logo {
  border-bottom-color: rgba(33,150,243,0.10);
}

body .app-layout[data-theme="blue"][data-plan="premium_plus"] .sidebar-footer,
body .app-layout[data-theme="blue"][data-plan="premium"] .sidebar-footer {
  border-top-color: rgba(33,150,243,0.10);
}

/* Nav active: azul en tema blue sin importar el plan */
body .app-layout[data-theme="blue"][data-plan="premium_plus"] .nav-item.active,
body .app-layout[data-theme="blue"][data-plan="premium"] .nav-item.active {
  border-left-color: var(--primary);
  background: rgba(33,150,243,0.08);
  color: var(--primary-dark);
}

/* Greeting name: azul en tema blue sin importar el plan */
body .app-layout[data-theme="blue"][data-plan="premium_plus"] .greeting span,
body .app-layout[data-theme="blue"][data-plan="premium"] .greeting span {
  color: var(--primary);
}

/* Bottom tabs: azul en tema blue sin importar el plan */
body .app-layout[data-theme="blue"][data-plan="premium_plus"] .bottom-tab.active,
body .app-layout[data-theme="blue"][data-plan="premium"] .bottom-tab.active {
  color: var(--primary);
}

/* ── 4. SIDEBAR BUBBLES — BLUE THEME OVERRIDE ────────────────────────────────
   Las burbujas .aquo-bubbles--plus son doradas. En tema blue deben ser azules.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout[data-theme="blue"] .aquo-bubbles--plus .aquo-bubble {
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.82) 0%,
    rgba(180,221,255,0.65) 35%,
    rgba(84,173,230,0.28) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 10px 24px rgba(95,174,227,0.14);
}

body .app-layout[data-theme="blue"] .aquo-bubbles--pro .aquo-bubble {
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.82) 0%,
    rgba(180,221,255,0.55) 35%,
    rgba(84,173,230,0.22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 8px 20px rgba(95,174,227,0.10);
}

/* ── 5. NAV SECTION TITLE — CONTRASTE WCAG FIX ──────────────────────────────
   Valor anterior (~rgba(144,164,174,.85)): ratio ~2.8:1 sobre fondo azul.
   Nuevo valor: ratio ~5.2:1 sobre #DCF0FF — supera WCAG AA (4.5:1).
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout .nav-section-title {
  color: #5E7A94;
  opacity: 1;
}

body .app-layout[data-theme="silver"] .nav-section-title {
  color: rgba(63,73,84,0.78);
  opacity: 1;
}

body .app-layout[data-theme="gold"] .nav-section-title {
  color: rgba(100,75,40,0.72);
  opacity: 1;
}

/* ── 6. SOBRE AQUO FOOTER — CLASE CSS PROPIA ─────────────────────────────────
   Sustituye inline styles + !important hardcodeados en marca.js.
   Azul base adapta a Silver y Gold via theme selectors.
   Para activarse: eliminar el style="" inline del div.aquo-about-footer en JS.
   ─────────────────────────────────────────────────────────────────────────── */

.aquo-about-footer {
  padding: 48px 36px 32px;
  text-align: center;
  background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow:
    0 -4px 40px rgba(21,101,192,0.20),
    0 20px 38px rgba(23,84,150,0.18);
  border-radius: 0 0 20px 20px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.aquo-footer-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(247,251,255,0.90);
}

.aquo-footer-heading {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7,31,67,0.16);
}

.aquo-footer-text {
  font-size: clamp(14px, 1.8vw, 18px) !important;
  max-width: 700px;
  margin: 0 auto 24px !important;
  line-height: 1.82;
  color: rgba(255,255,255,0.94) !important;
  text-shadow: 0 1px 0 rgba(6,24,52,0.18);
}

.aquo-footer-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.aquo-footer-link-solid {
  background: white;
  color: var(--primary-dark) !important;
  padding: 13px 22px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  display: inline-block;
}
.aquo-footer-link-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.16);
}

.aquo-footer-link-ghost {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white !important;
  padding: 13px 22px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.20);
  transition: background 0.16s ease;
  display: inline-block;
}
.aquo-footer-link-ghost:hover {
  background: rgba(255,255,255,0.22);
}

.aquo-footer-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.aquo-footer-social {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none;
  transition: color 0.14s ease;
}
.aquo-footer-social:hover { color: rgba(255,255,255,1.0) !important; }

.aquo-footer-soft {
  font-size: 12px;
  margin: 0;
  color: rgba(243,248,255,0.65) !important;
}

/* Theme overrides — Sobre AQUO footer */
.app-layout[data-theme="silver"] .aquo-about-footer {
  background: linear-gradient(145deg, #3F4954 0%, #5A6875 100%);
  box-shadow:
    0 -4px 40px rgba(78,89,104,0.20),
    0 20px 38px rgba(78,89,104,0.18);
}
.app-layout[data-theme="silver"] .aquo-footer-link-solid {
  color: #3F4954 !important;
}

.app-layout[data-theme="gold"] .aquo-about-footer {
  background: linear-gradient(145deg, #4B3A22 0%, #8A6A21 100%);
  box-shadow:
    0 -4px 40px rgba(140,110,42,0.22),
    0 20px 38px rgba(140,110,42,0.18);
}
.app-layout[data-theme="gold"] .aquo-footer-link-solid {
  color: #4B3A22 !important;
}

/* ══ FIN — AQUO™ Shell Canonical v1.0 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Shell Canonical v1.1 — Blue theme explicit aliases
   Corrige los 3 residuos confirmados del análisis previo.
   Posición: final del archivo → especificidad + posición ganan siempre.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── AJUSTE 1A — Grid tokens: Blue explícito ─────────────────────────────────
   Los tokens --grid-card / --grid-border estaban en :not([data-theme]) →
   nunca disparaban porque applyTheme() siempre escribe data-theme="blue".
   Las ctx-cards y mg-cards en Blue usaban el beige crema de :root (#F5F4F1).
   Fix: alias explícito [data-theme="blue"] con valores agua-pálido.
   ─────────────────────────────────────────────────────────────────────────── */

.app-layout[data-theme="blue"] {
  --grid-card:   #F0F6FC;                /* agua muy pálido — fue #F5F4F1 beige */
  --grid-border: rgba(33,150,243,0.09);  /* azul suave — fue rgba(0,0,0,0.06)  */
  --grid-val:    #1E4060;
  --grid-label:  #88A4B8;
  --grid-muted:  #A8C0CC;
}

/* ── AJUSTE 1B — Bottom-nav drops: Blue explícito ────────────────────────────
   Los fills de gotas en Blue estaban en :not([data-theme]) → código muerto.
   Sin esta regla, las gotas mostraban gradientes multicolor del SVG inline
   (lila para ciclo, verde para salud, amarillo para nutrición).
   Fix: fills sólidos azules, mismos valores que el bloque muerto anterior.
   ─────────────────────────────────────────────────────────────────────────── */

.app-layout[data-theme="blue"] .aquo-bottom-nav__svg path {
  fill: #BDD5F5;  /* azul pálido — inactivo */
}

.app-layout[data-theme="blue"] .aquo-bottom-nav__item--active .aquo-bottom-nav__svg path {
  fill: #85B4EC;  /* azul más presente — activo */
}

.app-layout[data-theme="blue"] .aquo-bottom-nav__drop {
  filter: drop-shadow(0 4px 10px rgba(33,150,243,0.20));
}

.app-layout[data-theme="blue"] .aquo-bottom-nav__item--active .aquo-bottom-nav__drop {
  filter: drop-shadow(0 8px 18px rgba(33,150,243,0.38));
}

/* ── AJUSTE 1C — Kicker tokens: Blue explícito ───────────────────────────────
   --aquo-kicker-bg / --aquo-kicker-fg definidos en :not([data-theme]) → muertos.
   La pill "BLUE LUXURY HEALTH SYSTEM" funcionaba por fallback accidental al
   hardcode gold de .aquo-page-kicker (línea 6664).
   Fix: definir explícitamente en [data-theme="blue"].
   Los valores son intencionalmente gold (la pill siempre es premium visual).
   ─────────────────────────────────────────────────────────────────────────── */

.app-layout[data-theme="blue"] {
  --aquo-kicker-bg: linear-gradient(135deg, rgba(255,248,232,.95), rgba(246,237,212,.90));
  --aquo-kicker-fg: #9c7a27;
}

/* ── AJUSTE 2 — sidebar-logo::after: override Blue por plan ──────────────────
   Los planes premium / premium_plus sobreescribían el shimmer decorativo del
   logo con colores plata (#D7DCE2) o champán (#E5D6B2).
   En tema Blue esos colores rompen la armonía del sidebar azul.
   Fix: shimmer azul cuando el tema activo es Blue, independientemente del plan.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout[data-theme="blue"][data-plan="premium"] .sidebar-logo::after,
body .app-layout[data-theme="blue"][data-plan="premium_plus"] .sidebar-logo::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(33,150,243,0.18) 35%,
    rgba(201,168,76,0.12) 65%,
    transparent 100%);
}

/* ── AJUSTE 3 — Avatar iniciales: override Blue+Plus ─────────────────────────
   .header-avatar[data-plan="premium_plus"] .avatar-iniciales → color amber-gold.
   En tema Blue eso rompe la coherencia: las iniciales deben ser azul editorial.
   Fix: override explícito [data-theme="blue"] para ambos planes de pago.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout[data-theme="blue"] .header-avatar[data-plan="premium_plus"] .avatar-iniciales,
body .app-layout[data-theme="blue"] .header-avatar[data-plan="premium"] .avatar-iniciales {
  color: var(--primary-dark);
}

/* ── Avatar border: Blue explícito para planes de pago ───────────────────────
   El halo del avatar en premium_plus es golden. En Blue debe ser azul.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout[data-theme="blue"] .header-avatar[data-plan="premium_plus"] {
  border-color: var(--tier-free-border);
  box-shadow:
    0 2px 10px var(--tier-free-glow),
    0 0 0 3px rgba(95,174,227,0.07);
}

body .app-layout[data-theme="blue"] .header-avatar[data-plan="premium"] {
  border-color: var(--tier-free-border);
  box-shadow:
    0 2px 10px var(--tier-free-glow),
    0 0 0 3px rgba(95,174,227,0.07);
}

/* ══ FIN — AQUO™ Shell Canonical v1.1 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Shell Canonical v1.2 — Especificidad correcta
   
   DIAGNÓSTICO DEL BUG:
   Los selectores plan-only tienen spec (0,3,0):
     .app-layout[data-plan="X"] .content-header → 1 class + 1 attr + 1 class = (0,3,0)
   El canonical v1.0 tenía:
     body .app-layout .content-header → 1 tag + 2 class = (0,2,1)
   → En CSS, spec siempre gana sobre posición. (0,3,0) > (0,2,1). Bug real.
   
   FIX: Elevar canonical a (0,3,1) añadiendo [data-theme="blue"] explícito.
     body .app-layout[data-theme="blue"] .X → 1 tag + 1 class + 1 attr + 1 class = (0,3,1)
   (0,3,1) > (0,3,0) — ganamos por un elemento de tag. Sólido y predecible.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FIX content-header: spec elevada a (0,3,1) ────────────────────────────── */

body .app-layout[data-theme="blue"] .content-header {
  background: linear-gradient(135deg, #E3F2FD 0%, #EEF7FF 60%, #F0F8FF 100%);
  border-bottom: 1px solid rgba(33,150,243,0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 20px rgba(33,150,243,0.08);
  padding: 16px 32px;
  min-height: 76px;
}

@media (min-width: 1400px) {
  body .app-layout[data-theme="blue"] .content-header { padding: 16px 40px; }
}
@media (max-width: 900px) {
  body .app-layout[data-theme="blue"] .content-header { padding: 14px 20px; min-height: 68px; }
}
@media (max-width: 600px) {
  body .app-layout[data-theme="blue"] .content-header { padding: 12px 16px; min-height: 60px; }
}

/* ── FIX nav-section-title: spec elevada a (0,3,1) ──────────────────────────── */

body .app-layout[data-theme="blue"] .nav-section-title {
  color: #5E7A94;
  opacity: 1;
}

/* ══ FIN — AQUO™ Shell Canonical v1.2 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Footer Editorial — .aqf v1.0
   Cierre de marca del módulo "Sobre AQUO".
   Diseño: medianoche editorial · Cormorant como voz central · glass mínimo
   Temas: Blue (default) · Silver · Gold
   Sin !important — especificidad controlada · Posición final gana
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper — fondo de medianoche editorial ─────────────────────────────── */

.aqf {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  padding: 64px 40px 52px;
  text-align: center;
  /* Blue — azul AQUO profundo, conectado con la cabecera del módulo */
  background: linear-gradient(160deg, #1256a8 0%, #1b6ad8 52%, #2175e8 100%);
}

/* Halo atmosférico superior — profundidad sin agresividad */
.aqf::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 50% at 50% -5%,
    rgba(255,255,255,0.10) 0%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Inner: columna centrada ─────────────────────────────────────────────── */

.aqf__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 580px;
  margin: 0 auto;
}

/* ── Isotipo watermark — presencia, no protagonismo ─────────────────────── */

.aqf__wm {
  width: 52px;
  height: 68px;
  object-fit: contain;
  opacity: 0.18;
  filter: brightness(0) invert(1);
  margin-bottom: 32px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* ── Kicker — eyebrow editorial discreto ────────────────────────────────── */

.aqf__kicker {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin: 0 0 20px;
  line-height: 1;
}

/* ── Heading — Cormorant, la voz del cierre ──────────────────────────────── */

.aqf__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.20;
  letter-spacing: -0.015em;
  color: rgba(255,255,255,0.94);
  margin: 0 0 24px;
  max-width: 520px;
}

/* ── Cuerpo — legible, respirado ────────────────────────────────────────── */

.aqf__body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.90;
  color: rgba(255,255,255,0.58);
  margin: 0 0 40px;
  max-width: 480px;
}

/* ── Línea divisoria — separación sutil ────────────────────────────────── */

.aqf__rule {
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 0 auto 40px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── CTAs — glass pill, sin peso sólido ─────────────────────────────────── */

.aqf__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.aqf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
  /* Primary glass */
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

.aqf__btn:hover {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 8px 20px rgba(0,0,0,0.18);
}

.aqf__btn:active {
  transform: scale(0.975);
}

/* Ghost — peso menor, acción secundaria */
.aqf__btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.48);
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.aqf__btn--ghost:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.20);
  box-shadow: none;
}

/* ── Socials — fila de texto plano, sin pills ───────────────────────────── */

.aqf__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.aqf__soc {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
  position: relative;
}

/* Separador entre socials via gap — sin punto DOM extra */
.aqf__soc + .aqf__soc::before {
  content: '·';
  position: absolute;
  left: -12px;
  top: 0;
  color: rgba(255,255,255,0.16);
  pointer-events: none;
}

.aqf__soc:hover {
  color: rgba(255,255,255,0.75);
}

/* ── Firma — micro texto, casi invisible ────────────────────────────────── */

.aqf__sign {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.22);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── SILVER — pizarra profunda fría ──────────────────────────────────────── */

/* ── NEUTRALIZADO G1 — .aqf Silver/Gold sin prefijo body
   Reglas de baja especificidad absorbidas por el bloque canónico final.
   ─────────────────────────────────────────────────────────────────────── */

.app-layout[data-theme="silver"] .aqf {
  /* background: neutralizado — ver bloque canónico línea 12xxx */
}

.app-layout[data-theme="silver"] .aqf::before {
  /* background: neutralizado — ver bloque canónico línea 12xxx */
}

/* GOLD */

.app-layout[data-theme="gold"] .aqf {
  /* background: neutralizado — ver bloque canónico línea 12xxx */
}

.app-layout[data-theme="gold"] .aqf::before {
  /* background: neutralizado — ver bloque canónico línea 12xxx */
}

/* Gold isotipo — filtro cálido — MANTENIDO (no conflicto temático) */
.app-layout[data-theme="gold"] .aqf__wm {
  filter: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(450%) hue-rotate(5deg);
  opacity: 0.22;
}

/* ── Supresión del module-tail en /marca (failsafe CSS) ─────────────────── */
/* La supresión principal es JS. Esta es defensa adicional. */

body:has(.aqf) #module-area > .aquo-module-tail {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .aqf {
    padding: 56px 28px 44px;
  }
  .aqf__body {
    font-size: 14.5px;
  }
}

@media (max-width: 600px) {
  .aqf {
    padding: 48px 20px 36px;
    border-radius: 0 0 22px 22px;
  }
  .aqf__wm {
    width: 44px;
    height: 58px;
    margin-bottom: 24px;
  }
  .aqf__heading {
    font-size: clamp(24px, 8vw, 32px);
    line-height: 1.22;
  }
  .aqf__body {
    font-size: 14px;
    line-height: 1.80;
    margin-bottom: 32px;
  }
  .aqf__rule {
    margin-bottom: 32px;
  }
  .aqf__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin-bottom: 28px;
  }
  .aqf__btn {
    width: 100%;
    max-width: 280px;
  }
  .aqf__socials {
    gap: 14px;
    margin-bottom: 22px;
  }
  .aqf__soc + .aqf__soc::before {
    left: -9px;
  }
}

@media (max-width: 380px) {
  .aqf__socials {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px 16px;
    justify-content: center;
  }
  .aqf__soc + .aqf__soc::before {
    display: none;
  }
}

/* ══ FIN — AQUO™ Footer Editorial .aqf v1.0 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Shell Canonical v2.0
   1. Popup del agua — signature compacta, sin ::after bug
   2. Module-tail — cierre de marca mini AQUO
   ══════════════════════════════════════════════════════════════════════════ */

/* ── POPUP AGUA — fix tamaño + card blanca + ::after bug ─────────────────────
   El ::after (watermark 104px) no se clipea en WebKit con border-radius+backdrop.
   Fix: suprimir ::after. El isotipo YA tiene presencia en el icon box.
   Además: card más estrecha, más redondeada, más compacta.
   ─────────────────────────────────────────────────────────────────────────── */

#popup-water .popup-water-card--signature::after {
  display: none !important;
}

#popup-water .popup-water-card--signature {
  width: min(340px, calc(100vw - 24px)) !important;
  grid-template-columns: 66px 1fr !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    'icon copy'
    'icon btn' !important;
  gap: 10px 14px !important;
  padding: 16px 16px 16px !important;
  border-radius: 36px !important;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.97) 0%,
    rgba(236,246,255,0.95) 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 20px 40px rgba(56,110,186,0.18) !important;
  border: 1px solid rgba(130,180,228,0.22) !important;
}

#popup-water .popup-water-card__glow {
  background:
    radial-gradient(circle at 14% 24%, rgba(200,233,255,0.50), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(145,204,255,0.20), transparent 18%) !important;
}

#popup-water .popup-water-card__icon--signature {
  grid-area: icon !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: 22px !important;
  align-self: center !important;
}

#popup-water .popup-water-card__icon--signature img {
  width: 48px !important;
  height: 48px !important;
}

#popup-water .popup-water-card__copy--signature {
  grid-area: copy !important;
  align-self: end !important;
}

#popup-water .popup-water-card__eyebrow {
  font-size: 9px !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 2px !important;
}

#popup-water .popup-water-card__title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  color: #1a5ab8 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 0 !important;
}

#popup-water .popup-water-card__sub {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #627895 !important;
  max-width: none !important;
  margin: 3px 0 0 !important;
}

#popup-water .popup-water-card__btn--signature {
  grid-area: btn !important;
  justify-self: start !important;
  align-self: start !important;
  min-width: 0 !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(33,107,220,0.20) !important;
}

/* Mobile: stack compacto */
@media (max-width: 640px) {
  #popup-water.popup--water-signature {
    right: 10px !important;
    left: 10px !important;
    bottom: 14px !important;
  }
  #popup-water .popup-water-card--signature {
    width: calc(100vw - 20px) !important;
    border-radius: 30px !important;
  }
}


/* ── MODULE TAIL — cierre de marca AQUO v2.0 ─────────────────────────────────
   Mini versión del lenguaje .aqf: dark glass pill, Cormorant, firma discreta.
   Especificidad body .app-layout (0,2,1) supera todas las reglas !important
   de especificidad (0,1,0) anteriores. Añadimos !important como refuerzo.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout .aquo-module-tail {
  display: flex !important;
  justify-content: center !important;
  margin: 28px 0 10px !important;
  padding-bottom: 0 !important;
}

body .app-layout .aquo-module-tail__inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  width: min(340px, calc(100% - 48px)) !important;
  padding: 14px 22px 13px !important;
  border-radius: 22px !important;
  /* Dark glass — misma familia que .aqf pero más suave */
  background: linear-gradient(
    160deg,
    rgba(10,42,96,0.88) 0%,
    rgba(14,52,118,0.84) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 28px rgba(8,28,72,0.20) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  /* remove old pseudo from theme 8727 line */
}

/* Subtle top glow — misma técnica que .aqf */
body .app-layout .aquo-module-tail__inner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse 110% 65% at 50% -5%,
    rgba(33,150,243,0.12) 0%,
    transparent 65%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Suppress old ::after watermark (line 8727) */
body .app-layout .aquo-module-tail__inner::after {
  display: none !important;
}

body .app-layout .aquo-module-tail__line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Drop — pequeña gota azul, presencia discreta */
body .app-layout .aquo-module-tail__drop {
  display: inline-block !important;
  width: 10px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.88), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(140,210,255,.92) 0%, rgba(50,148,255,.82) 100%) !important;
  clip-path: path("M 5 0 C 4 1.5 0 5.5 0 8.5 A 5 5 0 0 0 10 8.5 C 10 5.5 6 1.5 5 0 Z") !important;
  border-radius: 60% 60% 70% 70% !important;
  box-shadow: none !important;
}

/* Brand — Cormorant, voz de AQUO */
body .app-layout .aquo-module-tail__brand {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.88) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

body .app-layout .aquo-module-tail__sep {
  color: rgba(255,255,255,0.22) !important;
  font-size: 10px !important;
  opacity: 1 !important;
}

body .app-layout .aquo-module-tail__legal {
  font-family: var(--font-display) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

body .app-layout .aquo-module-tail__text {
  font-family: var(--font-display) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.30) !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
}

/* Top line — principales: brand */
body .app-layout .aquo-module-tail__line--top {
  font-size: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* Bottom line — firma casi invisible */
body .app-layout .aquo-module-tail__line--bottom {
  gap: 6px !important;
}

body .app-layout .aquo-module-tail__link,
body .app-layout .aquo-module-tail__social {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.30) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.01em !important;
  transition: color 0.15s ease !important;
}

body .app-layout .aquo-module-tail__link:hover,
body .app-layout .aquo-module-tail__social:hover {
  color: rgba(255,255,255,0.68) !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Silver — pizarra fría */
body .app-layout[data-theme="silver"] .aquo-module-tail__inner {
  background: linear-gradient(
    160deg,
    rgba(16,24,32,0.90) 0%,
    rgba(22,34,48,0.86) 100%
  ) !important;
}

body .app-layout[data-theme="silver"] .aquo-module-tail__inner::before {
  background: radial-gradient(
    ellipse 110% 65% at 50% -5%,
    rgba(160,172,186,0.09) 0%,
    transparent 65%
  ) !important;
}

/* Gold — ébano cálido */
body .app-layout[data-theme="gold"] .aquo-module-tail__inner {
  background: linear-gradient(
    160deg,
    rgba(20,13,4,0.90) 0%,
    rgba(30,18,5,0.86) 100%
  ) !important;
}

body .app-layout[data-theme="gold"] .aquo-module-tail__inner::before {
  background: radial-gradient(
    ellipse 110% 65% at 50% -5%,
    rgba(201,168,76,0.10) 0%,
    transparent 65%
  ) !important;
}

/* ══ FIN — AQUO™ Shell Canonical v2.0 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Shell Canonical v2.1 — 3 fixes quirúrgicos
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Popup ghost card — backdrop-filter eliminado ─────────────────────
   La capa blanca/fantasma detrás del popup viene de backdrop-filter:blur(20px)
   heredado del .popup base (línea 1754), que crea una capa frosted-glass
   aunque background sea transparent. Fix: neutralizar backdrop-filter.
   ─────────────────────────────────────────────────────────────────────────── */

#popup-water.popup--water-signature {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

/* ── FIX 2: Footer grande .aqf — Silver/Gold también más claros ──────────────
   Ahora que Blue es más claro, Silver y Gold ajustan también.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── NEUTRALIZADO G2 — Segundo .aqf Silver/Gold sin body prefix
   Duplicado conflictivo. Absorbido por bloque canónico final.
   ─────────────────────────────────────────────────────────────────────── */

.app-layout[data-theme="silver"] .aqf { /* background: neutralizado */ }
.app-layout[data-theme="gold"]   .aqf { /* background: neutralizado */ }

/* ══ FIN — AQUO™ Shell Canonical v2.1 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ Sobre AQUO — Cabecera tema-aware + Popup agua Signature v1.0
   Dos frentes quirúrgicos:
   1. .aquo-brand-hero — header del módulo Marca/Sobre AQUO, mismo idioma
      visual que .aqf: Blue · Silver · Gold
   2. #popup-water.popup--water-signature — micro-señal discreta, bottom-right,
      isotipo dominante, sin protagonismo de caja
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. CABECERA SOBRE AQUO — Blue / Silver / Gold ───────────────────────── */

/* Base — Blue (default). Azul profundo → vibrante, familia del .aqf footer */
/* Base .aquo-brand-hero — SOLO estructura. Sin color. Sin fallback azul.
   El fondo se define EXCLUSIVAMENTE via [data-theme] en el bloque canónico. */
.aquo-brand-hero {
  /* background: NEUTRALIZADO — sin azul de base */
  /* box-shadow: NEUTRALIZADO — sin fallback */
  position: relative !important;
  overflow: hidden !important;
}

/* Halo superior sutil — igual que .aqf::before */
.aquo-brand-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 45% at 50% -8%,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 55%
  );
  pointer-events: none;
  z-index: 0;
}

/* Contenido por encima del halo */
.aquo-brand-hero > * {
  position: relative;
  z-index: 1;
}

/* Silver — pizarra fría profunda, mismo ADN que .aqf silver */
/* ── NEUTRALIZADO G4 — Primera Silver/Gold hero (baja especificidad)
   Sin prefijo body. Absorbido por bloque canónico final.
   ─────────────────────────────────────────────────────────────────────── */

.app-layout[data-theme="silver"] .aquo-brand-hero { /* background: neutralizado */ }
.app-layout[data-theme="silver"] .aquo-brand-hero::before { /* background: neutralizado */ }
.app-layout[data-theme="gold"]   .aquo-brand-hero { /* background: neutralizado */ }
.app-layout[data-theme="gold"]   .aquo-brand-hero::before { /* background: neutralizado */ }

/* ── 2. POPUP AGUA SIGNATURE — micro-señal discreta, bottom-right ─────────── */

/* Wrapper: salir del centrado heredado del .popup base */
#popup-water.popup--water-signature {
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  transform: translateX(0) translateY(100px) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  z-index: 600 !important;
}

/* Card signature — vertical, compacta, centrada, isotipo protagonista */
.popup-water-card--signature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 168px !important;
  padding: 16px 14px 14px !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(126, 183, 233, 0.22) !important;
  box-shadow:
    0 20px 40px rgba(58, 110, 174, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.80) inset !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glow sutil en la parte superior de la card */
.popup-water-card__glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 40px !important;
  background: radial-gradient(
    ellipse 100% 100% at 50% -20%,
    rgba(124, 189, 255, 0.20) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Isotipo — el protagonista. Cuadrado redondeado, grande */
.popup-water-card__icon--signature {
  width: 68px !important;
  height: 68px !important;
  border-radius: 22px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(218, 239, 255, 0.90) 100%
  ) !important;
  border: 1px solid rgba(126, 183, 233, 0.26) !important;
  box-shadow:
    0 12px 24px rgba(60, 136, 220, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.80) inset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.popup-water-card__icon--signature img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 12px rgba(54, 130, 218, 0.22)) !important;
}

/* Copy signature — conciso */
.popup-water-card__copy--signature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  position: relative !important;
  z-index: 1 !important;
}

.popup-water-card__copy--signature .popup-water-card__eyebrow {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #88b8e2 !important;
  margin: 0 !important;
}

.popup-water-card__copy--signature .popup-water-card__title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1459b2 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  max-width: 140px !important;
}

/* Sub oculto — el isotipo ya comunica, no hace falta el párrafo */
.popup-water-card__copy--signature .popup-water-card__sub {
  display: none !important;
}

/* Botón — pill completo, discreto */
.popup-water-card__btn--signature {
  width: 100% !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: 0 8px 16px rgba(48, 120, 210, 0.18) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile: mover encima del bottom-nav */
@media (max-width: 768px) {
  #popup-water.popup--water-signature {
    right: 16px !important;
    bottom: 84px !important;
  }
}

/* ══ FIN — AQUO™ Sobre AQUO Header + Popup Signature v1.0 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Sobre AQUO Header v2 + Popup Signature v2
   Corrección quirúrgica:
   · Cabecera: isotipo flotante, mayor protagonismo, tema-aware garantizado
   · Popup: isotipo libre (sin caja), flotante, card mínima
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HEADER v2: Isotipo flotante, sin inline size bloqueando ─────────────── */

/* Isotipo del hero — tamaño controlado por CSS, no por inline */
.aquo-brand-hero__iso {
  display: block !important;
  width: 120px !important;
  height: 120px !important;
  object-fit: contain !important;
  margin: 0 auto 20px !important;
  /* Flotante: sombra cálida blanca difusa + levitación suave */
  filter:
    drop-shadow(0 0 28px rgba(255,255,255,0.28))
    drop-shadow(0 10px 24px rgba(14,58,130,0.22)) !important;
  animation: aquo-hero-float 3.8s ease-in-out infinite !important;
}

@keyframes aquo-hero-float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-7px);  }
}

/* Ensure hero text stays in flow above the ::before halo */
.aquo-brand-hero h1,
.aquo-brand-hero p {
  position: relative !important;
  z-index: 1 !important;
}

/* ── POPUP SIGNATURE v2: isotipo libre, sin caja, flotante ───────────────── */

/* Card: más compacta, más redondeada, más ligera */
#popup-water.popup--water-signature .popup-water-card--signature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 152px !important;
  padding: 18px 14px 14px !important;
  border-radius: 30px !important;
  /* Fondo: casi invisible, solo presencia de bruma */
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(130,185,240,0.18) !important;
  box-shadow:
    0 18px 36px rgba(50,100,168,0.14),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glow sutil detrás del isotipo — da la sensación de luz propia */
#popup-water.popup--water-signature .popup-water-card--signature::before {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 110px !important;
  height: 80px !important;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(80,170,255,0.18) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Isotipo: SIN caja. Flota directamente en la card */
#popup-water.popup--water-signature .popup-water-card__icon--signature {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  animation: aquo-popup-float 3.2s ease-in-out infinite !important;
}

#popup-water.popup--water-signature .popup-water-card__icon--signature img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  display: block !important;
  /* Glow azul flotante — sensación de levitación */
  filter:
    drop-shadow(0 0 18px rgba(60,148,255,0.38))
    drop-shadow(0 8px 16px rgba(30,100,220,0.18)) !important;
}

@keyframes aquo-popup-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-5px); }
}

/* Copy: mínimo, centrado */
#popup-water.popup--water-signature .popup-water-card__copy--signature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  position: relative !important;
  z-index: 1 !important;
}

#popup-water.popup--water-signature .popup-water-card__copy--signature .popup-water-card__eyebrow {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #8bbde6 !important;
  margin: 0 !important;
}

#popup-water.popup--water-signature .popup-water-card__copy--signature .popup-water-card__title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #1256b0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

#popup-water.popup--water-signature .popup-water-card__copy--signature .popup-water-card__sub {
  display: none !important;
}

/* Botón: discreto, pill compacto, ocupa ancho completo */
#popup-water.popup--water-signature .popup-water-card__btn--signature {
  width: 100% !important;
  border-radius: 13px !important;
  padding: 7px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  background: linear-gradient(180deg, #4aaeff, #1c7cf2) !important;
  box-shadow: 0 6px 14px rgba(40,110,210,0.18) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ══ FIN — AQUO™ Sobre AQUO Header v2 + Popup Signature v2 ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — Header v3 + Popup Signal v3
   Correcciones finales:
   · Header: especificidad máxima garantizada, override de todos los bloques
     anteriores; Blue/Silver/Gold confirmados
   · Popup: señal flotante AQUO sin caja — isotipo blanco, esquina inferior derecha
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HEADER v3: especificidad máxima — gana sobre TODOS los bloques previos ─ */

/* Blue — azul profundo AQUO */
/* ── NEUTRALIZADO G5 — Header v3 "max specificity" (BLOQUE CRÍTICO ELIMINADO)
   Este bloque contenía el combined selector que inyectaba azul genérico:
     body .app-layout .aquo-brand-hero,
     body .app-layout[data-theme="blue"] .aquo-brand-hero { background: blue !important }
   Ese combined selector es la causa principal del hero azul en Silver/Gold.
   Los colores Blue/Silver/Gold se definen SOLO en el bloque canónico final.
   ─────────────────────────────────────────────────────────────────────── */

/* Isotipo principal — grande, flotante, dominante */
body .app-layout .aquo-brand-hero__iso {
  display: block !important;
  width: 124px !important;
  height: 124px !important;
  object-fit: contain !important;
  margin: 0 auto 22px !important;
  position: relative !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 0 32px rgba(255,255,255,0.22))
    drop-shadow(0 12px 28px rgba(10,50,130,0.20)) !important;
  animation: aquo-iso-float 4s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes aquo-iso-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-8px); }
}

/* ── POPUP SIGNAL v3: señal flotante — no tarjeta, no notificación ────────── */

/* Wrapper: anclado esquina inferior derecha, sin herencia de .popup base */
#popup-water.popup--water-signature {
  position: fixed !important;
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  top: auto !important;
  transform: translateY(140px) !important;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  z-index: 600 !important;
  text-align: center !important;
}

#popup-water.popup--water-signature.visible {
  transform: translateY(0) !important;
}

/* Card: señal de marca, fondo profundo, no caja blanca */
#popup-water.popup--water-signature .popup-water-card--signature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  width: 144px !important;
  padding: 18px 12px 13px !important;
  border-radius: 28px !important;
  /* Fondo: azul profundo glass — contexto para isotipo blanco */
  background: linear-gradient(
    160deg,
    rgba(14, 50, 110, 0.94) 0%,
    rgba(20, 70, 148, 0.92) 100%
  ) !important;
  border: 1px solid rgba(80,160,255,0.18) !important;
  box-shadow:
    0 24px 48px rgba(8,32,90,0.32),
    0 1px 0 rgba(255,255,255,0.08) inset !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glow aéreo detrás del isotipo — luz propia */
#popup-water.popup--water-signature .popup-water-card--signature::before {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 90px !important;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(100,190,255,0.22) 0%,
    transparent 68%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Glow secundario en esquina — profundidad */
#popup-water.popup--water-signature .popup-water-card--signature::after {
  content: '' !important;
  position: absolute !important;
  bottom: -10px !important;
  right: -10px !important;
  width: 70px !important;
  height: 70px !important;
  background: radial-gradient(
    circle,
    rgba(40,120,220,0.18) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Glow wrapper — necesario cuando existe */
#popup-water.popup--water-signature .popup-water-card__glow {
  display: none !important;
}

/* Isotipo: blanco, sin caja, flotante — protagonista absoluto */
#popup-water.popup--water-signature .popup-water-card__icon--signature {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  animation: aquo-popup-signal-float 3.4s ease-in-out infinite !important;
  will-change: transform !important;
}

#popup-water.popup--water-signature .popup-water-card__icon--signature img {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
  display: block !important;
  /* Convertir isotipo a blanco sobre fondo oscuro */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 14px rgba(130,200,255,0.55))
    drop-shadow(0 6px 14px rgba(20,90,200,0.28)) !important;
}

@keyframes aquo-popup-signal-float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-6px);  }
}

/* Eyebrow: texto blanco ultra-discreto */
#popup-water.popup--water-signature .popup-water-card__eyebrow {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(140,200,255,0.70) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Título: blanco, conciso */
#popup-water.popup--water-signature .popup-water-card__title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Sub: oculto */
#popup-water.popup--water-signature .popup-water-card__sub {
  display: none !important;
}

/* Botón: ghost blanco, compacto, no protagonista */
#popup-water.popup--water-signature .popup-water-card__btn--signature {
  width: 100% !important;
  border-radius: 12px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  /* Ghost claro sobre fondo oscuro */
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2 !important;
  transition: background 0.15s ease !important;
}

#popup-water.popup--water-signature .popup-water-card__btn--signature:hover {
  background: rgba(255,255,255,0.20) !important;
}

/* Mobile: subir sobre bottom-nav */
@media (max-width: 768px) {
  #popup-water.popup--water-signature {
    right: 14px !important;
    bottom: 86px !important;
  }
}

/* ══ FIN — AQUO™ Header v3 + Popup Signal v3 ══ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — #menu-toggle — SINGLE SOURCE OF TRUTH
   Autoridad final. Gana por posición sobre todos los bloques
   anteriores con igual especificidad.
   Breakpoint 900px: coincide con el punto donde .sidebar pierde
   su posición fija y pasa a off-canvas (línea 984).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  #menu-toggle,
  .content-header #menu-toggle { display: none !important; }
}
@media (max-width: 900px) {
  #menu-toggle,
  .content-header #menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
}
/* ══ FIN — menu-toggle authority ══ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — POPUP AGUA — LEGIBILIDAD AUTORITATIVA
   Causa: línea 11816 usa selector (1,3,0):
     #popup-water.popup--water-signature
       .popup-water-card__copy--signature
         .popup-water-card__title  →  color:#1256b0 (azul/azul)
   Fix: mismo selector exacto (1,3,0) al final del archivo.
   En !important + igual especificidad, gana el último.
   ══════════════════════════════════════════════════════════════ */
#popup-water.popup--water-signature .popup-water-card__copy--signature .popup-water-card__title {
  color: rgba(255,255,255,0.96) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
/* ══ FIN — popup agua legibilidad ══ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — BOTTOM NAV — BREAKPOINT 900px
   Causa: breakpoint anterior era 768px → franja muerta 769-900px
   (sidebar off-canvas pero sin bottom nav ni modo de navegar).
   Fix: alinear con el breakpoint del sidebar off-canvas (900px).
   Ajuste padding-bottom en el mismo rango para no tapar contenido.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .aquo-bottom-nav { display: block !important; }
  /* Contenido: espacio suficiente para no quedar bajo la bottom nav */
  .main-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 901px) {
  /* Desktop: bottom nav oculta sin condiciones */
  .aquo-bottom-nav { display: none !important; }
}
/* Popup agua sobre bottom nav en rango 769-900px (iPad vertical) */
@media (min-width: 769px) and (max-width: 900px) {
  #popup-water.popup--water-signature {
    bottom: 96px !important;
  }
}
/* ══ FIN — bottom nav breakpoint ══ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — BLOQUE 2 — Sobre AQUO: Hero + Footer Grande + Footer Pequeño
   Posición final = autoridad sobre todos los bloques anteriores.
   ══════════════════════════════════════════════════════════════ */

/* ── A) HERO / CABECERA — Single source of truth ───────────────
   Causa del anclaje en azul: versiones anteriores tenían el hero
   con inline styles o sin sobreescritura de mayor especificidad
   para Silver/Gold. Solución: estructura + texto pasan a CSS;
   bloque final autoritativo para los 3 temas.
   ─────────────────────────────────────────────────────────────── */

/* Layout del wrapper — sin inline styles en marca.js */
body .app-layout .aquo-brand-hero {
  border-radius: 28px 28px 0 0 !important;
  padding: 52px 42px 48px !important;
  text-align: center !important;
  margin-bottom: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Título h1 */
body .app-layout .aquo-brand-hero__title {
  font-family: var(--font-serif) !important;
  color: rgba(255,255,255,0.97) !important;
  font-size: clamp(24px, 3.5vw, 32px) !important;
  font-weight: 400 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Subtítulo p */
body .app-layout .aquo-brand-hero__sub {
  color: rgba(255,255,255,0.82) !important;
  font-size: 16px !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  line-height: 1.82 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* BLUE (default + explicit) */
/* ── NEUTRALIZADO G6 — Cuarta generación Blue/Silver/Gold hero
   Combined selector body .app-layout + body .app-layout[data-theme="blue"]
   con background azul genérico. Absorbido por bloque canónico final.
   ─────────────────────────────────────────────────────────────────────── */
/* body .app-layout .aquo-brand-hero + [data-theme="blue"]: neutralizado */
/* body .app-layout[data-theme="silver"] .aquo-brand-hero: neutralizado */
/* body .app-layout[data-theme="gold"]   .aquo-brand-hero: neutralizado */

/* Responsive hero */
@media (max-width: 640px) {
  body .app-layout .aquo-brand-hero {
    padding: 40px 24px 36px !important;
    border-radius: 22px 22px 0 0 !important;
  }
  body .app-layout .aquo-brand-hero__sub {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
  }
}

/* ── B) FOOTER GRANDE .aqf — compactado + contraste corregido ───
   Problemas: padding 64px excesivo, kicker/body/soc casi invisibles.
   ─────────────────────────────────────────────────────────────── */

body .app-layout .aqf {
  padding: 44px 40px 36px !important;
}

body .app-layout .aqf__wm {
  margin-bottom: 22px !important;
  opacity: 0.20 !important;
}

body .app-layout .aqf__kicker {
  color: rgba(255,255,255,0.55) !important;
  margin: 0 0 16px !important;
}

body .app-layout .aqf__heading {
  font-size: clamp(24px, 3.6vw, 38px) !important;
  margin: 0 0 18px !important;
  color: rgba(255,255,255,0.96) !important;
}

body .app-layout .aqf__body {
  color: rgba(255,255,255,0.74) !important;
  font-size: 14.5px !important;
  line-height: 1.80 !important;
  margin: 0 0 28px !important;
}

body .app-layout .aqf__rule {
  margin: 0 auto 28px !important;
}

body .app-layout .aqf__actions {
  margin-bottom: 26px !important;
}

body .app-layout .aqf__socials {
  margin-bottom: 22px !important;
  gap: 16px !important;
}

/* Redes legibles, no fantasmas */
body .app-layout .aqf__soc {
  color: rgba(255,255,255,0.50) !important;
  font-size: 11px !important;
}
body .app-layout .aqf__soc:hover {
  color: rgba(255,255,255,0.82) !important;
}

/* Firma más visible */
body .app-layout .aqf__sign {
  color: rgba(255,255,255,0.34) !important;
}

@media (max-width: 640px) {
  body .app-layout .aqf {
    padding: 36px 20px 28px !important;
  }
  body .app-layout .aqf__actions {
    margin-bottom: 22px !important;
  }
}

/* ── C) FOOTER PEQUEÑO — .aquo-module-tail reconstruido ──────────
   HTML rediseñado en appendModuleFooter():
   · isotipo limpio (.aquo-module-tail__iso) reemplaza la gota CSS
   · brand row: isotipo + "AQUO" en serif
   · nets: las 5 redes del ecosistema
   · sign: aquo.health + contacto
   ─────────────────────────────────────────────────────────────── */

/* Wrapper */
body .app-layout .aquo-module-tail {
  display: flex !important;
  justify-content: center !important;
  margin: 30px 0 12px !important;
  padding-bottom: 0 !important;
}

/* Card interna */
body .app-layout .aquo-module-tail__inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(380px, calc(100% - 40px)) !important;
  padding: 18px 24px 16px !important;
  border-radius: 24px !important;
  background: linear-gradient(160deg, rgba(10,42,96,0.90) 0%, rgba(14,52,118,0.86) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 32px rgba(8,28,72,0.22) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Glow top — familia de .aqf */
body .app-layout .aquo-module-tail__inner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 100% 60% at 50% -5%, rgba(33,150,243,0.10) 0%, transparent 62%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body .app-layout .aquo-module-tail__inner::after {
  display: none !important;
}

/* Fila superior: isotipo + wordmark */
body .app-layout .aquo-module-tail__brand-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Isotipo — sustituto de la gota. Tamaño micro, filtrado a blanco */
body .app-layout .aquo-module-tail__iso {
  width: 16px !important;
  height: 20px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.60 !important;
  display: block !important;
}

/* Wordmark AQUO */
body .app-layout .aquo-module-tail__brand {
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.86) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

/* Fila de redes */
body .app-layout .aquo-module-tail__nets {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fila de firma web */
body .app-layout .aquo-module-tail__sign {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Punto separador */
body .app-layout .aquo-module-tail__dot {
  display: inline-block !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.22) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

/* Links de red */
body .app-layout .aquo-module-tail__net {
  font-family: var(--font-display) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.46) !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  transition: color 0.14s ease !important;
}
body .app-layout .aquo-module-tail__net:hover {
  color: rgba(255,255,255,0.78) !important;
}

/* Links firma */
body .app-layout .aquo-module-tail__web {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.32) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  transition: color 0.14s ease !important;
}
body .app-layout .aquo-module-tail__web:hover {
  color: rgba(255,255,255,0.60) !important;
}

/* SILVER — pizarra fría */
body .app-layout[data-theme="silver"] .aquo-module-tail__inner {
  background: linear-gradient(160deg, rgba(16,24,32,0.92) 0%, rgba(22,34,48,0.88) 100%) !important;
}
body .app-layout[data-theme="silver"] .aquo-module-tail__inner::before {
  background: radial-gradient(ellipse 100% 60% at 50% -5%, rgba(140,160,180,0.08) 0%, transparent 62%) !important;
}

/* GOLD — ébano cálido */
body .app-layout[data-theme="gold"] .aquo-module-tail__inner {
  background: linear-gradient(160deg, rgba(20,13,4,0.92) 0%, rgba(30,18,5,0.88) 100%) !important;
}
body .app-layout[data-theme="gold"] .aquo-module-tail__inner::before {
  background: radial-gradient(ellipse 100% 60% at 50% -5%, rgba(200,165,70,0.09) 0%, transparent 62%) !important;
}

/* Mobile */
@media (max-width: 600px) {
  body .app-layout .aquo-module-tail__inner {
    width: calc(100% - 24px) !important;
    padding: 15px 18px 13px !important;
    border-radius: 20px !important;
  }
  body .app-layout .aquo-module-tail__nets {
    gap: 6px !important;
  }
}

/* ══ FIN — AQUO™ Bloque 2: Sobre AQUO Hero + Footer Grande + Footer Pequeño ══ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — MICROFIX HERO — Azul eliminado de la regla base.
   Arquitectura limpia: background definido SOLO por tema explícito.
   No hay fallback azul. No hay regla base con color.
   ══════════════════════════════════════════════════════════════ */

/* Regla base: SOLO estructura/layout. Sin background. Sin box-shadow. */
/* ── NEUTRALIZADO G7 — Microfix hero (absorbido por bloque canónico)
   Las reglas de este bloque están íntegramente cubiertas en el bloque
   canónico que sigue. Eliminar este duplicado evita la carrera de cascada.
   ─────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — FUENTE DE VERDAD CROMÁTICA — Hero + Footer Grande — v.final
   Una sola matriz por tema. Gana por posición final + !important.
   Aplica a: .aquo-brand-hero + .aqf
   Temas: blue · silver · gold
   ══════════════════════════════════════════════════════════════════════════

   Problema resuelto:
   · Hero no adaptaba a silver/gold: reglas genéricas previas sobreponían azul
   · Footer blue: textos secundarios con opacidades insuficientes (0.58, 0.32)
   · Dos sistemas paralelos sin familia cromática unificada entre hero y footer
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BASE: sin color en selector genérico ────────────────────────────────
   Garantiza que ningún selector sin [data-theme] inyecta azul como fallback.
   ─────────────────────────────────────────────────────────────────────────── */
body .app-layout .aquo-brand-hero,
body .app-layout .aqf {
  background: none !important;
  box-shadow: none !important;
}

/* ── 2. BLUE ────────────────────────────────────────────────────────────────
   Azul AQUO profundo. Familia fría y editorial.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fondos */
body .app-layout[data-theme="blue"] .aquo-brand-hero {
  background: linear-gradient(148deg, #0b3a80 0%, #1460c8 46%, #1c72e4 100%) !important;
  box-shadow: 0 20px 40px rgba(8,44,110,0.22) !important;
}
body .app-layout[data-theme="blue"] .aqf {
  background: linear-gradient(160deg, #1256a8 0%, #1b6ad8 52%, #2175e8 100%) !important;
}

/* Textos — familia FRÍA explícita. Blanco frío con tinte azul. Sin tostado posible. */
body .app-layout[data-theme="blue"] .aqf__heading {
  color: rgba(255,255,255,0.97) !important;
}
body .app-layout[data-theme="blue"] .aqf__body {
  color: rgba(220,235,255,0.82) !important;  /* blanco frío, no neutro */
}
body .app-layout[data-theme="blue"] .aqf__kicker {
  color: rgba(190,215,255,0.65) !important;  /* azul-blanco claro */
}
body .app-layout[data-theme="blue"] .aqf__soc {
  color: rgba(190,215,255,0.62) !important;  /* misma familia que kicker */
}
body .app-layout[data-theme="blue"] .aqf__sign {
  color: rgba(180,210,255,0.50) !important;  /* frío, no apagado ni tostado */
}
body .app-layout[data-theme="blue"] .aqf__btn {
  background: rgba(100,175,255,0.16) !important;  /* glass azul frío */
  color: rgba(240,248,255,0.94) !important;
  border-color: rgba(130,195,255,0.28) !important;
}
body .app-layout[data-theme="blue"] .aqf__btn--ghost {
  background: transparent !important;
  color: rgba(180,210,255,0.62) !important;   /* azul-blanco, no gris neutro */
  border-color: rgba(130,185,255,0.20) !important;
}

/* ── 3. SILVER ──────────────────────────────────────────────────────────────
   Pizarra fría editorial. Hero y footer: misma familia.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fondos */
body .app-layout[data-theme="silver"] .aquo-brand-hero {
  background: linear-gradient(148deg, #161f28 0%, #212f3d 46%, #28394a 100%) !important;
  box-shadow: 0 20px 40px rgba(12,20,28,0.30) !important;
}
body .app-layout[data-theme="silver"] .aqf {
  background: linear-gradient(160deg, #111922 0%, #1b2736 52%, #1f2f3e 100%) !important;
}

/* Textos */
body .app-layout[data-theme="silver"] .aqf__heading {
  color: rgba(255,255,255,0.95) !important;
}
body .app-layout[data-theme="silver"] .aqf__body {
  color: rgba(200,215,228,0.76) !important;
}
body .app-layout[data-theme="silver"] .aqf__kicker {
  color: rgba(160,185,205,0.60) !important;
}
body .app-layout[data-theme="silver"] .aqf__soc {
  color: rgba(160,185,205,0.58) !important;
}
body .app-layout[data-theme="silver"] .aqf__sign {
  color: rgba(130,155,175,0.45) !important;
}
body .app-layout[data-theme="silver"] .aqf__btn {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(200,220,235,0.90) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
body .app-layout[data-theme="silver"] .aqf__btn--ghost {
  background: transparent !important;
  color: rgba(160,185,205,0.52) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── 4. GOLD ────────────────────────────────────────────────────────────────
   Ébano cálido. Hero y footer: misma familia.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fondos */
body .app-layout[data-theme="gold"] .aquo-brand-hero {
  background: linear-gradient(148deg, #231203 0%, #3a1e07 46%, #48260b 100%) !important;
  box-shadow: 0 20px 40px rgba(22,11,2,0.32) !important;
}
body .app-layout[data-theme="gold"] .aqf {
  background: linear-gradient(160deg, #1a1005 0%, #2a1c08 52%, #33220c 100%) !important;
}

/* Textos */
body .app-layout[data-theme="gold"] .aqf__heading {
  color: rgba(255,248,230,0.97) !important;
}
body .app-layout[data-theme="gold"] .aqf__body {
  color: rgba(220,200,165,0.76) !important;
}
body .app-layout[data-theme="gold"] .aqf__kicker {
  color: rgba(195,170,120,0.60) !important;
}
body .app-layout[data-theme="gold"] .aqf__soc {
  color: rgba(195,170,120,0.58) !important;
}
body .app-layout[data-theme="gold"] .aqf__sign {
  color: rgba(160,135,90,0.48) !important;
}
body .app-layout[data-theme="gold"] .aqf__btn {
  background: rgba(255,240,200,0.09) !important;
  color: rgba(235,210,160,0.92) !important;
  border-color: rgba(200,170,100,0.22) !important;
}
body .app-layout[data-theme="gold"] .aqf__btn--ghost {
  background: transparent !important;
  color: rgba(180,145,80,0.54) !important;
  border-color: rgba(180,145,80,0.16) !important;
}

/* Isotipo gold — tono cálido */
body .app-layout[data-theme="gold"] .aqf__wm {
  filter: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(450%) hue-rotate(5deg) !important;
  opacity: 0.22 !important;
}

/* ── 5. FALLBACK EXPLÍCITO — cuando no hay data-theme (frame inicial) ────────
   applyTheme() siempre setea data-theme, pero este cubre el instante previo.
   Incluye text-colors Blue para que el instante de carga no muestre tostado.
   ─────────────────────────────────────────────────────────────────────────── */
body .app-layout:not([data-theme]) .aquo-brand-hero {
  background: linear-gradient(148deg, #0b3a80 0%, #1460c8 46%, #1c72e4 100%) !important;
}
body .app-layout:not([data-theme]) .aqf {
  background: linear-gradient(160deg, #1256a8 0%, #1b6ad8 52%, #2175e8 100%) !important;
}
/* Text-colors para el fallback — misma familia fría del tema Blue */
body .app-layout:not([data-theme]) .aqf__heading  { color: rgba(255,255,255,0.97) !important; }
body .app-layout:not([data-theme]) .aqf__body     { color: rgba(220,235,255,0.82) !important; }
body .app-layout:not([data-theme]) .aqf__kicker   { color: rgba(190,215,255,0.65) !important; }
body .app-layout:not([data-theme]) .aqf__soc      { color: rgba(190,215,255,0.62) !important; }
body .app-layout:not([data-theme]) .aqf__sign     { color: rgba(180,210,255,0.50) !important; }
body .app-layout:not([data-theme]) .aqf__btn      { background: rgba(100,175,255,0.16) !important; color: rgba(240,248,255,0.94) !important; border-color: rgba(130,195,255,0.28) !important; }
body .app-layout:not([data-theme]) .aqf__btn--ghost { background: transparent !important; color: rgba(180,210,255,0.62) !important; border-color: rgba(130,185,255,0.20) !important; }

/* ══ FIN — AQUO™ Fuente de Verdad Cromática Hero + Footer v.final ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — SOBRE AQUO v2.0 — RECONSTRUCCIÓN AISLADA
   Clases: .aqh (hero) · .aqfe (footer editorial)
   Fecha: 2026-04-04 · Sin dependencias de .aquo-brand-hero ni .aqf
   Única dep. externa: [data-theme] en .app-layout
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO — .aqh ──────────────────────────────────────────────────────── */

.aqh {
  position: relative;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  padding: 52px 42px 48px;
  text-align: center;
  margin-bottom: 0;
}

/* ── GHOST KILLER — neutraliza TODOS los pseudo-elementos legacy en .aqh ─────
   Causa raíz identificada: design-system.css tiene 3 reglas legacy que targetean
   div[style*="max-width:900px"] > div:first-child — que es el .aqh:
     ::before (línea ~7993): isotipo_clean.png 220×220px → EL FANTASMA PRINCIPAL
     ::after  (línea ~7672): orbe radial 210×210px bottom-right
     ::after  (línea ~8226): orbe radial 260×260px bottom-left
   Todos tienen especificidad 1-3-3, superan a .aqh::before/::after (0-1-0).
   Solución: content:none !important en ambos pseudo-elementos.
   El fondo de gradiente del tema aporta suficiente profundidad sin pseudo-capas.
   ──────────────────────────────────────────────────────────────────────────── */
#module-area .aqh::before,
#module-area .aqh::after,
.aqh::before,
.aqh::after {
  content: none !important;
  display: none !important;
}

.aqh > * { position: relative; z-index: 1; }

.aqh__iso {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin: 0 auto 22px;
  animation: aqh-float 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes aqh-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

.aqh__title {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.aqh__sub {
  font-size: clamp(14.5px, 1.6vw, 16px);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.82;
}

/* ── TEMAS: HERO ─────────────────────────────────────────────────────────── */

/* BLUE */
.app-layout[data-theme="blue"] .aqh,
.app-layout:not([data-theme]) .aqh {
  background: linear-gradient(148deg, #0b3a80 0%, #1460c8 46%, #1c72e4 100%);
  box-shadow: 0 20px 40px rgba(8,44,110,0.22);
}
.app-layout[data-theme="blue"] .aqh .aqh__iso,
.app-layout:not([data-theme]) .aqh .aqh__iso {
  filter:
    drop-shadow(0 0 28px rgba(255,255,255,0.26))
    drop-shadow(0 10px 22px rgba(8,44,110,0.24));
}
.app-layout[data-theme="blue"] .aqh .aqh__title,
.app-layout:not([data-theme]) .aqh .aqh__title {
  color: rgba(255,255,255,0.97);
}
.app-layout[data-theme="blue"] .aqh .aqh__sub,
.app-layout:not([data-theme]) .aqh .aqh__sub {
  color: rgba(218,236,255,0.84);
}

/* SILVER */
.app-layout[data-theme="silver"] .aqh {
  background: linear-gradient(148deg, #161f28 0%, #212f3d 46%, #28394a 100%);
  box-shadow: 0 20px 40px rgba(12,20,28,0.30);
}
.app-layout[data-theme="silver"] .aqh .aqh__iso {
  filter:
    brightness(0) saturate(0) invert(1) brightness(1.08)
    drop-shadow(0 0 24px rgba(210,228,245,0.30))
    drop-shadow(0 8px 18px rgba(12,20,28,0.28));
}
.app-layout[data-theme="silver"] .aqh .aqh__title {
  color: rgba(255,255,255,0.96);
}
.app-layout[data-theme="silver"] .aqh .aqh__sub {
  color: rgba(195,215,232,0.80);
}

/* GOLD */
.app-layout[data-theme="gold"] .aqh {
  background: linear-gradient(148deg, #231203 0%, #3a1e07 46%, #48260b 100%);
  box-shadow: 0 20px 40px rgba(22,11,2,0.32);
}
.app-layout[data-theme="gold"] .aqh .aqh__iso {
  filter:
    sepia(1) saturate(0.5) brightness(2.0) hue-rotate(-5deg)
    drop-shadow(0 0 22px rgba(255,225,140,0.28))
    drop-shadow(0 8px 18px rgba(22,11,2,0.32));
}
.app-layout[data-theme="gold"] .aqh .aqh__title {
  color: rgba(255,248,230,0.97);
}
.app-layout[data-theme="gold"] .aqh .aqh__sub {
  color: rgba(228,205,162,0.82);
}

/* ── RESPONSIVE: HERO ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .aqh { padding: 40px 24px 36px; border-radius: 22px 22px 0 0; }
  .aqh__iso { width: 90px; height: 90px; }
  .aqh__sub { font-size: 14px; line-height: 1.75; }
}


/* ── 2. FOOTER EDITORIAL — .aqfe ────────────────────────────────────────── */

.aqfe {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  padding: 52px 40px 40px;
  text-align: center;
  margin-top: 0;
}

.aqfe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 50% at 50% -5%,
    rgba(255,255,255,0.09) 0%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 0;
}

.aqfe__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 580px;
  margin: 0 auto;
}

.aqfe__wm {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 32px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  display: block;
}

.aqfe__kicker {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.aqfe__heading {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.aqfe__body {
  font-size: 15px;
  line-height: 1.82;
  max-width: 520px;
  margin: 0 auto 28px;
}

.aqfe__rule {
  width: 40px;
  height: 0;
  margin: 0 auto 28px;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.22);
}

.aqfe__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.aqfe__btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.18s, transform 0.18s;
}
.aqfe__btn:hover { opacity: 0.80; transform: translateY(-1px); }

.aqfe__socials {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.aqfe__soc {
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.aqfe__soc:hover { opacity: 1 !important; }

.aqfe__sign {
  font-size: 11px;
  margin: 0;
  letter-spacing: 0.04em;
}


/* ── TEMAS: FOOTER ───────────────────────────────────────────────────────── */

/* BLUE */
.app-layout[data-theme="blue"] .aqfe,
.app-layout:not([data-theme]) .aqfe {
  background: linear-gradient(160deg, #1256a8 0%, #1b6ad8 52%, #2175e8 100%);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__wm,
.app-layout:not([data-theme]) .aqfe .aqfe__wm {
  filter: brightness(0) invert(1);
  opacity: 0.32;
}
.app-layout[data-theme="blue"] .aqfe .aqfe__kicker,
.app-layout:not([data-theme]) .aqfe .aqfe__kicker {
  color: rgba(185,215,255,0.68);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__heading,
.app-layout:not([data-theme]) .aqfe .aqfe__heading {
  color: rgba(255,255,255,0.97);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__body,
.app-layout:not([data-theme]) .aqfe .aqfe__body {
  color: rgba(218,236,255,0.86);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__btn:not([class*="ghost"]),
.app-layout:not([data-theme]) .aqfe .aqfe__btn:not([class*="ghost"]) {
  background: rgba(255,255,255,0.15);
  color: rgba(238,248,255,0.96);
  border-color: rgba(175,215,255,0.28);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__btn--ghost,
.app-layout:not([data-theme]) .aqfe .aqfe__btn--ghost {
  background: transparent;
  color: rgba(185,215,255,0.74);
  border-color: rgba(150,200,255,0.24);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__soc,
.app-layout:not([data-theme]) .aqfe .aqfe__soc {
  color: rgba(185,215,255,0.72);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__sign,
.app-layout:not([data-theme]) .aqfe .aqfe__sign {
  color: rgba(175,208,255,0.54);
}
.app-layout[data-theme="blue"] .aqfe .aqfe__rule,
.app-layout:not([data-theme]) .aqfe .aqfe__rule {
  border-top-color: rgba(175,215,255,0.30);
}

/* SILVER */
.app-layout[data-theme="silver"] .aqfe {
  background: linear-gradient(160deg, #111922 0%, #1b2736 52%, #1f2f3e 100%);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__wm {
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.26;
}
.app-layout[data-theme="silver"] .aqfe .aqfe__kicker {
  color: rgba(160,185,205,0.68);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__heading {
  color: rgba(255,255,255,0.96);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__body {
  color: rgba(200,218,232,0.84);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__btn:not([class*="ghost"]) {
  background: rgba(255,255,255,0.11);
  color: rgba(210,228,242,0.94);
  border-color: rgba(200,220,235,0.22);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__btn--ghost {
  background: transparent;
  color: rgba(165,190,210,0.68);
  border-color: rgba(200,215,230,0.16);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__soc {
  color: rgba(165,190,210,0.70);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__sign {
  color: rgba(145,170,190,0.52);
}
.app-layout[data-theme="silver"] .aqfe .aqfe__rule {
  border-top-color: rgba(195,215,228,0.24);
}

/* GOLD */
.app-layout[data-theme="gold"] .aqfe {
  background: linear-gradient(160deg, #1a1005 0%, #2a1c08 52%, #33220c 100%);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__wm {
  filter: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(450%) hue-rotate(5deg);
  opacity: 0.28;
}
.app-layout[data-theme="gold"] .aqfe .aqfe__kicker {
  color: rgba(195,168,115,0.70);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__heading {
  color: rgba(255,248,230,0.97);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__body {
  color: rgba(228,205,162,0.84);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__btn:not([class*="ghost"]) {
  background: rgba(255,235,180,0.12);
  color: rgba(245,220,165,0.96);
  border-color: rgba(210,175,100,0.28);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__btn--ghost {
  background: transparent;
  color: rgba(190,155,90,0.70);
  border-color: rgba(185,145,80,0.20);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__soc {
  color: rgba(195,165,110,0.70);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__sign {
  color: rgba(175,140,80,0.52);
}
.app-layout[data-theme="gold"] .aqfe .aqfe__rule {
  border-top-color: rgba(195,160,90,0.26);
}

/* ── RESPONSIVE: FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .aqfe {
    padding: 40px 22px 32px;
    border-radius: 0 0 22px 22px;
  }
  .aqfe__wm      { width: 80px; height: 80px; margin-bottom: 24px; }
  .aqfe__heading { font-size: 24px; }
  .aqfe__body    { font-size: 14px; }
  .aqfe__actions { flex-direction: column; align-items: center; }
  .aqfe__btn     { width: 100%; max-width: 280px; text-align: center; }
  .aqfe__socials { gap: 12px; }
}

/* ── MODULE-TAIL: ocultar cuando .aqfe está presente ───────────────────── */
#module-area .aquo-page-shell:has(.aqfe) > .aquo-module-tail,
#module-area .aqfe ~ .aquo-module-tail { display: none !important; }

/* ══ FIN — AQUO™ Sobre AQUO v2.0 (.aqh + .aqfe) ══ */


/* ══════════════════════════════════════════════════════════════════════════
   AQUO™ — FIX DEFINITIVO TEMATIZACIÓN HERO v9
   Problema: línea ~7990 fuerza background:blue!important en div:first-child
   con especificidad (1,3,2). Cualquier regla mía con (1,2,0) pierde aunque
   tenga !important, porque cuando AMBAS tienen !important gana la más específica.
   Solución: igualar el selector base + añadir [data-theme] → especificidad (1,4,1)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Neutralizar isolation:isolate (causa cuadrado blanco en iOS) ──────── */
#module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh {
  isolation: auto !important;
}

/* ── Isotipo: fondo siempre transparente, sin artefactos ──────────────── */
.aqh__iso {
  background: transparent !important;
}

/* ── BLUE ──────────────────────────────────────────────────────────────── */
.app-layout[data-theme="blue"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh,
.app-layout:not([data-theme]) #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh {
  background: linear-gradient(148deg, #0b3a80 0%, #1460c8 46%, #1c72e4 100%) !important;
  box-shadow: 0 20px 40px rgba(8,44,110,0.22) !important;
}
.app-layout[data-theme="blue"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__title,
.app-layout:not([data-theme]) #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__title {
  color: rgba(255,255,255,0.97) !important;
}
.app-layout[data-theme="blue"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__sub,
.app-layout:not([data-theme]) #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__sub {
  color: rgba(218,236,255,0.84) !important;
}

/* ── SILVER ────────────────────────────────────────────────────────────── */
.app-layout[data-theme="silver"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh {
  background: linear-gradient(148deg, #161f28 0%, #212f3d 46%, #28394a 100%) !important;
  box-shadow: 0 20px 40px rgba(12,20,28,0.30) !important;
}
.app-layout[data-theme="silver"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__title {
  color: rgba(255,255,255,0.96) !important;
}
.app-layout[data-theme="silver"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__sub {
  color: rgba(195,215,232,0.80) !important;
}
.app-layout[data-theme="silver"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__iso {
  filter:
    brightness(0) saturate(0) invert(1) brightness(1.08)
    drop-shadow(0 0 24px rgba(210,228,245,0.35))
    drop-shadow(0 8px 18px rgba(12,20,28,0.32)) !important;
}

/* ── GOLD ──────────────────────────────────────────────────────────────── */
.app-layout[data-theme="gold"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh {
  background: linear-gradient(148deg, #231203 0%, #3a1e07 46%, #48260b 100%) !important;
  box-shadow: 0 20px 40px rgba(22,11,2,0.32) !important;
}
.app-layout[data-theme="gold"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__title {
  color: rgba(255,248,230,0.97) !important;
}
.app-layout[data-theme="gold"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__sub {
  color: rgba(228,205,162,0.82) !important;
}
.app-layout[data-theme="gold"] #module-area > div[style*="max-width:900px"][style*="gap:0"] > .aqh .aqh__iso {
  filter:
    sepia(1) saturate(0.5) brightness(2.0) hue-rotate(-5deg)
    drop-shadow(0 0 22px rgba(255,225,140,0.32))
    drop-shadow(0 8px 18px rgba(22,11,2,0.36)) !important;
}

/* ══ FIN — AQUO™ Fix tematización hero v9 ══ */

/* ── Bloque Bebé B2.2: cohesión Blue Luxury ─────────────────────────────────── */
.bebe-hist-fila {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201,168,76,.15);
}
.bebe-hist-fila:last-child { border-bottom: none; }
.bebe-hist-tipo  { font-size: 12px; font-weight: 700; color: #6B4C0A; }
.bebe-hist-det   { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.bebe-hist-nota  { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-style: italic; }
.bebe-hist-fecha { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.bebe-zona-sep   {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.25), transparent);
  margin: 16px 0;
}
.bebe-form-wrap {
  background: #FDFAF0;
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 14px;
  padding: 16px;
}
.bebe-form-label {
  font-size: 11px;
  font-weight: 700;
  color: #8B6914;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-bottom: 5px;
}

/* ── Acordeón AQUO — bloque Salud hormonal ────────────────────────────────── */
.aquo-acordeon {
  border: 1px solid rgba(33,150,243,.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.aquo-acordeon__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--primary-pale);
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: left;
  transition: background .15s ease;
}
.aquo-acordeon__header:hover { background: rgba(33,150,243,.1); }
.aquo-acordeon__chevron {
  font-size: 14px;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.aquo-acordeon__header[aria-expanded="true"] .aquo-acordeon__chevron {
  transform: rotate(180deg);
}
.aquo-acordeon__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.aquo-acordeon__body--open {
  max-height: 1200px;
}

/* ── Explorar AQUO — visible solo en móvil/iPad, oculto en desktop ─────────── */
.status-hero__explore-btn {
  display: none; /* default: oculto */
}
@media (max-width: 900px) {
  .status-hero__explore-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    border-radius: 99px;
    background: rgba(255,255,255,0.22);
    border: 1.5px solid rgba(255,255,255,0.55);
    color: var(--ink-mid, #4a5568);
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.7) inset;
    transition: background .18s, box-shadow .18s, transform .14s;
  }
  .status-hero__explore-btn:hover,
  .status-hero__explore-btn:active {
    background: rgba(255,255,255,0.40);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.8) inset;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPRINT 1 — PULIDO PREMIUM
   Añadido al final para ganar por source order sin romper cascade existente.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Aviso clínico premium (autoexploracion, salud sexual, módulos sensibles) ── */
.aquo-note-clinica {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(33,150,243,0.04) 0%, rgba(33,150,243,0.02) 100%);
  border: 1px solid rgba(33,150,243,0.12);
  border-left: 3px solid var(--primary-light);
  border-radius: 14px;
  margin-bottom: 4px;
}
.aquo-note-clinica__icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.5;
  opacity: 0.75;
}
.aquo-note-clinica__body {
  flex: 1;
  min-width: 0;
}
.aquo-note-clinica__body strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.aquo-note-clinica__body p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ── Avatar/iniciales — corrección legibilidad y acabado premium (sprint1) ─── */
/* Asegura tamaño y contraste mínimo en todos los planes */
.header-avatar {
  width: 40px !important;
  height: 40px !important;
}
.avatar-iniciales {
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--primary-dark) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  user-select: none;
}
/* Plan free: fondo suave con texto legible */
.header-avatar[data-plan="free"] .avatar-iniciales {
  color: var(--primary-dark) !important;
}
/* Plan premium: texto oscuro sobre fondo claro */
.header-avatar[data-plan="premium"] .avatar-iniciales {
  color: #1a3a5c !important;
  font-weight: 700 !important;
}
/* Plan premium_plus: texto gold oscuro sobre fondo más claro para contraste */
.header-avatar[data-plan="premium_plus"] .avatar-iniciales {
  color: #7a5a00 !important;
  font-weight: 700 !important;
}

/* Mejora sutil de la foto de avatar si la hay */
.header-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 2 — Coherencia visual de cabeceras de módulo
   Append-only · No modificar reglas anteriores · Gana por source order
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. aquo-unified-title: armonizar tamaño con el sistema canónico ──────── */
.aquo-unified-title {
  font-size: clamp(34px, 4.2vw, 54px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  color: var(--aquo-title, var(--primary-dark)) !important;
}
@media (max-width: 640px) {
  .aquo-unified-title { font-size: clamp(28px, 9vw, 40px) !important; }
}

/* ── 2. aquo-unified-subtitle: consistencia con section-subtitle ──────────── */
.aquo-unified-subtitle {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: color-mix(in srgb, var(--aquo-title, #1d5fb5) 48%, #6f8196) !important;
}

/* ── 3. aquo-page-kicker dentro de aquo-unified-hero:
        el hero de informes es más compacto — ajustar ritmo vertical ──────── */
.aquo-unified-hero .aquo-page-kicker {
  margin-bottom: 12px !important;
  font-size: 11px !important;
}

/* ── 4. aquo-page-title: tamaño canónico (eliminar residuo de inline styles)
        Aplica solo donde no exista ya un override de módulo-shell ─────────── */
.main-content .aquo-page-title {
  font-size: clamp(34px, 4.2vw, 56px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  margin-bottom: 8px !important;
}
@media (max-width: 920px) {
  .main-content .aquo-page-title { font-size: clamp(30px, 7.5vw, 46px) !important; }
}
@media (max-width: 560px) {
  .main-content .aquo-page-title { font-size: clamp(26px, 9vw, 36px) !important; }
}

/* ── 5. aquo-page-subtitle: alineado con section-subtitle (mismo color/tamaño) */
.main-content .aquo-page-subtitle {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ── 6. aquo-page-kicker: ritmo canónico cuando no hay override de tema ─────
        (el override de tema en línea 7080 ya aplica color/bg por CSS vars)  */
.main-content .aquo-page-kicker {
  margin-bottom: 14px !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
}

/* ── 7. Shell — content-header: padding canónico estabilizado ────────────────
        Gana sobre todos los bloques anteriores por source order + especificidad */
body .app-layout .content-header {
  padding: 16px 40px !important;
  min-height: 76px !important;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  body .app-layout .content-header {
    padding: 14px 22px !important;
    min-height: 68px !important;
  }
}
@media (max-width: 640px) {
  body .app-layout .content-header {
    padding: 12px 16px !important;
    min-height: 60px !important;
  }
}

/* ── 8. content-body: padding canónico sin salto visual al entrar en módulos ─ */
body .app-layout .content-body {
  padding: 24px 32px !important;
}
@media (max-width: 1400px) {
  body .app-layout .content-body { padding: 22px 28px !important; }
}
@media (max-width: 1024px) {
  body .app-layout .content-body { padding: 20px 18px !important; }
}
@media (max-width: 640px) {
  body .app-layout .content-body { padding: 16px 14px !important; }
}

/* ── 9. aquo-unified-title: incluir en el sistema de color temático ──────────
        (no estaba en el bloque de línea 7093 que cubre page/section title)  */
.app-layout[data-theme] .aquo-unified-title,
.aquo-informes-page .aquo-unified-title {
  color: var(--aquo-title) !important;
}

/* ── 10. aquo-unified-hero: armonizar visualmente con section-hero ───────────
         Mismo peso visual sin reemplazar la familia                          */
.aquo-unified-hero {
  border-radius: 32px !important;
  padding: 30px 32px !important;
  box-shadow:
    0 18px 44px rgba(62, 116, 170, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
@media (max-width: 640px) {
  .aquo-unified-hero { padding: 22px 18px !important; border-radius: 24px !important; }
}

/* ── FIN — AQUO™ Sprint 2 ── */


/* ═══════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 3 — Layout premium desktop + cierre visual de pantalla
   Append-only · No modificar reglas anteriores · Gana por source order
   Problema raíz: doble cuello de botella (content-body max-width + módulos
   sin margin:0 auto) crea columna angosta + desierto a la derecha en ≥1400px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── S3-1. content-body: eliminar max-width fijo — los módulos gobiernan ─── */
/* El content-body se expande a todo el ancho disponible de main-content.     */
/* margin:0 auto se mantiene (sin efecto cuando max-width es none, correcto). */
body .app-layout .content-body {
  max-width: none !important;
  /* El padding lateral ya está establecido en Sprint 2 (24px/32px según break) */
}

/* ── S3-2. Centrado horizontal de módulos dentro del content-body ─────────── */
/* Sin margin:0 auto, los shells se pegaban a la izquierda.                    */
/* Se aplica a todos los wrappers raíz de módulo. Sólo en desktop (≥901px).   */
@media (min-width: 901px) {

  /* Shell genérico */
  .aquo-page-shell,
  .aquo-module-shell,
  .aquo-unified-page,
  .aquo-buco-root,
  .aquo-informes-page,
  .aquo-autoexp-root,
  #ana-root {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* ── S3-3. Ampliar max-width de módulos en desktop medio (1024–1599px) ─── */
  /* Incremento conservador: mejora visible sin romper composición interna.    */
  .aquo-buco-root      { max-width: 1100px !important; }
  .aquo-informes-page  { max-width: 1160px !important; }
  #ana-root            { max-width: 1120px !important; }
  .aquo-autoexp-root   { max-width: 1120px !important; }
  .aquo-page-shell     { max-width: 1200px !important; }
  .aquo-unified-page   { max-width: 1200px !important; }
  .aquo-module-shell   { max-width: 1100px !important; }
}

/* ── S3-4. Desktop ancho (≥1600px): amplitud máxima editorial ────────────── */
@media (min-width: 1600px) {
  .aquo-buco-root      { max-width: 1280px !important; }
  .aquo-informes-page  { max-width: 1360px !important; }
  #ana-root            { max-width: 1300px !important; }
  .aquo-autoexp-root   { max-width: 1300px !important; }
  .aquo-page-shell     { max-width: 1400px !important; }
  .aquo-unified-page   { max-width: 1400px !important; }
  .aquo-module-shell   { max-width: 1300px !important; }

  /* En pantallas muy anchas, el padding lateral escala un poco más */
  body .app-layout .content-body {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ── S3-5. Guards móvil/tablet: no se toca nada ≤900px ─────────────────── */
@media (max-width: 900px) {
  .aquo-page-shell,
  .aquo-module-shell,
  .aquo-unified-page,
  .aquo-buco-root,
  .aquo-informes-page,
  .aquo-autoexp-root,
  #ana-root {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── S3-6. Footer (aquo-module-tail): integración en el flujo ────────────── */
/* Antes flotaba aislado porque el módulo era estrecho y sin centrado.         */
/* Ahora el centrado del módulo (S3-2) arrastra el tail correctamente.         */
/* Ajustes visuales para que cierre la pantalla con gracia, no como un parche. */
.aquo-module-tail {
  margin-top: 28px !important;
  margin-bottom: 0 !important;
}

/* En desktop el tail respira un poco más arriba */
@media (min-width: 901px) {
  .aquo-module-tail {
    margin-top: 36px !important;
  }
}

/* Inner del tail: radio más generoso y sombra integrada en el background */
.aquo-module-tail__inner {
  border-radius: 22px !important;
  /* Sombra más suave — no queremos que compita con las cards del módulo */
  box-shadow:
    0 8px 20px rgba(92, 120, 153, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}

/* En pantallas pequeñas, el tail queda más pegado al final */
@media (max-width: 640px) {
  .aquo-module-tail { margin-top: 20px !important; }
  .aquo-module-tail__inner { border-radius: 18px !important; }
}

/* ── FIN — AQUO™ Sprint 3 ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 3B — Correctivo de regresiones Sprint 3
   Append-only · Sobrescribe reglas de Sprint 3 que causaron regresiones
   No modificar bloque Sprint 3 anterior — éste lo corrige por source order
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── S3B-1. content-body: max-width controlado, NO ilimitado ────────────────
   Sprint 3 dejó max-width:none → contendor se expandía a todo main-content.
   Problema: módulos sin margin:0 auto quedaban pegados a la izquierda.
   Solución: max-width amplio pero controlado (1560px). En pantallas de
   1440px (main-content=1200px) esto ya cubre el 100% disponible.
   En 1920px (main-content=1680px) deja sólo 60px a cada lado.
   Sólo aplica dentro de .app-layout: landing NUNCA tiene .app-layout en DOM. */
body .app-layout .content-body {
  max-width: 1560px !important;
  /* margin:0 auto del CSS base sigue activo */
}

/* ── S3B-2. Guards de landing — aislamiento explícito ──────────────────────
   La landing renderiza en #app sin .app-layout.
   Los selectores de Sprint 3 ya estaban scoped a .app-layout o a clases
   que landing no usa. Estos guards son una capa de seguridad adicional
   para que ninguna regla de layout desktop filtre a la parte pública. */
body:not(:has(.app-layout)) .section-title,
body:not(:has(.app-layout)) .section-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body:not(:has(.app-layout)) #pricing .grid-3 {
  margin-left: auto;
  margin-right: auto;
}
body:not(:has(.app-layout)) .pricing-card .btn {
  /* Asegurar que botones de pricing no heredan ningún override de layout */
  width: 100%;
  box-sizing: border-box;
}

/* ── S3B-3. aquo-module-tail: alineación editorial con el módulo ────────────
   El tail se inyecta en #module-area como hermano del módulo (no dentro).
   Con content-body expandido (S3B-1) y módulos centrados, el tail quedaba
   en el ancho completo mientras el módulo estaba centrado → "escapado".
   Solución: dar al tail un max-width editorial + centrado propio. */
#module-area > .aquo-module-tail {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 18px !important;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1600px) {
  #module-area > .aquo-module-tail { max-width: 1380px; }
}
@media (max-width: 900px) {
  #module-area > .aquo-module-tail {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── S3B-4. home-dashboard-stack: centrado en content-body ampliado ─────────
   home-dashboard-stack tiene max-width:980px y width:100% pero sin
   margin:0 auto → quedaba pegado a la izquierda en content-body ancho.
   Aprovechar para ampliar ligeramente el ancho del dashboard en desktop. */
body .app-layout .home-dashboard-stack {
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 1280px) {
  body .app-layout .home-dashboard-stack {
    max-width: 1160px !important;
  }
}
@media (min-width: 1600px) {
  body .app-layout .home-dashboard-stack {
    max-width: 1300px !important;
  }
}
@media (max-width: 900px) {
  body .app-layout .home-dashboard-stack {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ── S3B-5. Rutinas — centrado sin compresión ───────────────────────────────
   Sprint 3 S3-2 incluyó .aquo-module-shell pero NO #rutinas-root ni
   .aquo-movimiento-shell. Ambos quedaban pegados a la izquierda.
   El overflow-x:clip en .aquo-movimiento-shell causaba recorte visual
   cuando el root expandido forzaba cálculos de ancho en elementos internos. */
body .app-layout #rutinas-root {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  /* max-width:920px ya viene de línea ~7283 — no lo tocamos */
}
body .app-layout #module-area .aquo-movimiento-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  /* max-width:min(940px,100%) ya viene de línea ~9164 — no lo tocamos */
}
@media (max-width: 900px) {
  body .app-layout #rutinas-root,
  body .app-layout #module-area .aquo-movimiento-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── FIN — AQUO™ Sprint 3B ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 3C — Corrección final: pricing buttons + rutinas movimiento
   Append-only · No modifica bloques anteriores
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── S3C-1. Pricing buttons: visibilidad y presencia ────────────────────────
   Los botones eran visibles pero mal resueltos: pill de 9999px de radio
   dentro de un card compacto (padding: 8px 12px 10px) → aspecto comprimido.
   Sprint 3B añadió box-sizing:border-box innecesario → se revierte.
   Scope: #pricing para afectar SOLO la sección de pricing en la landing. */

/* Revertir box-sizing de Sprint 3B que no era necesario */
body:not(:has(.app-layout)) .pricing-card .btn {
  box-sizing: content-box !important;
}

/* Más respiración en el card: padding inferior y lateral */
#pricing .pricing-card {
  padding-top: 14px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 18px !important;
}

/* Botón: radio coherente con el card, tamaño y peso bien definidos */
#pricing .pricing-card .btn {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;   /* integrado al card, no pill */
  min-height: 46px !important;
  letter-spacing: 0.01em !important;
  margin-top: 6px !important;       /* separación del feature list */
}

/* Featured: btn-gold con sombra reforzada sobre fondo crema */
#pricing .pricing-card.featured .btn-gold {
  box-shadow: 0 10px 24px rgba(201,168,76,0.26) !important;
}
/* Free: btn-primary con presencia clara */
#pricing .pricing-card:not(.featured) .btn-primary {
  box-shadow: 0 8px 20px rgba(33,150,243,0.20) !important;
}


/* ── S3C-2. Rutinas movimiento — causa raíz ─────────────────────────────────
   CAUSA REAL: las reglas de CSS (líneas 8667, 8775) ya intentaban dar
   padding:24-28px al primer div de #mov-lista-root, PERO el HTML tiene
   style="padding:4px 2px" inline → inline style gana sin !important.
   Misma causa para el botón Exportar PDF (inline padding:11px 16px).
   Solución: añadir !important a las correcciones de spacing. */

/* Cabecera: el !important derrota el style="padding:4px 2px" inline */
#mov-lista-root > div:first-child {
  padding: 26px 28px !important;
  border-radius: 28px !important;
  gap: 20px !important;           /* entre columna título y botón */
}

/* Columna interna (título + subtítulo + pills): espacio entre elementos */
#mov-lista-root .aquo-mov-head > div:first-child,
#mov-lista-root > div:first-child > div:first-child {
  gap: 14px !important;
}

/* Título h2: margen inferior explícito */
#mov-lista-root > div:first-child h2 {
  margin: 0 0 10px !important;
  letter-spacing: -0.03em !important;
}

/* Subtítulo p: más line-height, sin colapso */
#mov-lista-root > div:first-child > div:first-child p {
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* Pills: gap y padding generosos */
#mov-lista-root .aquo-mov-head-pills {
  gap: 8px !important;
  margin-top: 2px !important;
}
#mov-lista-root .aquo-mov-head-pills > span {
  padding: 8px 14px !important;
}

/* Botón Exportar PDF: el !important derrota inline padding:11px 16px */
#btn-export-movimiento {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  padding: 13px 20px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* Nota de descarga: el margin-top:-10px inline queda neutralizado */
#mov-lista-root > div:nth-child(2):not([class]) {
  margin-top: 4px !important;
  padding: 0 4px !important;
  opacity: 0.72;
  font-size: 11px !important;
}

/* ── S3C-3. Rutinas movimiento — móvil ──────────────────────────────────────
   En móvil el flex-wrap del head pone el botón Exportar al lado del bloque
   título/pills y se aprietan mutuamente. Forzar columna vertical en ≤640px. */
@media (max-width: 640px) {
  #mov-lista-root > div:first-child {
    padding: 20px 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  #mov-lista-root > div:first-child > div:first-child {
    min-width: unset !important;
    width: 100% !important;
  }

  #btn-export-movimiento {
    width: 100% !important;
    justify-content: center !important;
    align-self: stretch !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  #mov-lista-root > div:first-child h2 {
    font-size: 22px !important;
  }

  #mov-lista-root .aquo-mov-head-pills > span {
    font-size: 11px !important;
    padding: 7px 12px !important;
  }
}

/* ── FIN — AQUO™ Sprint 3C ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 3D — Pricing buttons + popup agua móvil
   Append-only · Corrección táctica final
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── S3D-1. Pricing — botones visibles con contraste real ───────────────────
   CAUSA: .btn-gold (línea 5016) empieza en #EDD991 (champán pálido) + texto
   blanco = contraste ~1.8:1 invisible. .btn-primary empieza en #64B5F6
   (azul muy claro) + texto blanco = contraste ~2.0:1. Ambos se ven "muertos".
   SOLUCIÓN: override scoped a #pricing con gradientes ricos + color explícito. */

/* Botón FREE y PLUS — btn-primary: azul sólido, contraste claro con blanco */
#pricing .pricing-card:not(.featured) .btn-primary {
  background: linear-gradient(165deg,
    #2196F3 0%,
    #1976D2 60%,
    #1565C0 100%
  ) !important;
  color: #ffffff !important;
  border-color: rgba(21, 101, 192, 0.50) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.14) inset,
    0 8px 22px rgba(33,150,243,0.28) !important;
}
#pricing .pricing-card:not(.featured) .btn-primary:hover {
  background: linear-gradient(165deg, #42A5F5 0%, #2196F3 60%, #1976D2 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.16) inset,
    0 10px 26px rgba(33,150,243,0.34) !important;
}

/* Botón PREMIUM — btn-gold: oro sólido, legible, premium */
#pricing .pricing-card.featured .btn-gold {
  background: linear-gradient(165deg,
    #C9A84C 0%,
    #A8851A 55%,
    #8A6A14 100%
  ) !important;
  color: #ffffff !important;
  border-color: rgba(138, 106, 20, 0.45) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.16) inset,
    0 8px 24px rgba(160, 120, 30, 0.36) !important;
}
#pricing .pricing-card.featured .btn-gold:hover {
  background: linear-gradient(165deg,
    #D4B04E 0%,
    #BF9A28 55%,
    #A07828 100%
  ) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.20) inset,
    0 10px 28px rgba(160,120,30,0.42) !important;
}


/* ── S3D-2. Popup agua — reducción en móvil pequeño ────────────────────────
   El v3 tiene isotipo 82px en una card de 144px → 57% del ancho.
   En móvil la card se siente enorme. Reducir sin eliminar presencia.
   Target: ≤480px para solo tocar móviles pequeños, sin afectar tablets. */

@media (max-width: 480px) {
  /* Reposición: un poco más pegado al borde, no tan centrado en pantalla */
  #popup-water.popup--water-signature {
    right: 10px !important;
    bottom: 82px !important;
  }

  /* Card: más estrecha y compacta */
  #popup-water.popup--water-signature .popup-water-card--signature {
    width: 118px !important;
    padding: 14px 10px 11px !important;
    gap: 6px !important;
    border-radius: 24px !important;
  }

  /* Isotipo: de 82px → 60px. Menos intrusivo pero sigue siendo protagonista */
  #popup-water.popup--water-signature .popup-water-card__icon--signature img {
    width: 60px !important;
    height: 60px !important;
  }

  /* Eyebrow: mínimo */
  #popup-water.popup--water-signature .popup-water-card__eyebrow {
    font-size: 8px !important;
    letter-spacing: 0.10em !important;
  }

  /* Título: una línea limpia */
  #popup-water.popup--water-signature .popup-water-card__title {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* Botón CTA: proporcional */
  #popup-water.popup--water-signature .popup-water-card__btn--signature {
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }
}

/* ── FIN — AQUO™ Sprint 3D ── */

/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 4 — Formularios, feedback, estados vacíos
   Append-only. No modifica reglas existentes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Estado vacío premium (módulo completo) ────────────────────────────────── */
.aquo-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-16) var(--space-8);
}
.aquo-empty-state__icon {
  font-size: 44px;
  line-height: 1;
  opacity: 0.75;
}
.aquo-empty-state__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-mid);
  margin: 0;
}
.aquo-empty-state__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  max-width: 300px;
}

/* ── Estado vacío inline (dentro de panels/cards) ──────────────────────────── */
.aquo-empty-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.aquo-empty-mini--centered {
  padding: var(--space-12) var(--space-4);
}
.aquo-empty-mini__icon {
  font-size: 32px;
  line-height: 1;
  opacity: 0.6;
}
.aquo-empty-mini__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  max-width: 280px;
  line-height: 1.6;
}

/* ── Divisor de sección en formulario de peso ──────────────────────────────── */
.peso-form-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) 0 var(--space-2);
  border-top: 1px solid var(--primary-pale, #E3F2FD);
  margin-top: var(--space-2);
}
.peso-form-section__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.peso-form-section__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── FIN — AQUO™ Sprint 4 ── */

/* ═══════════════════════════════════════════════════════════════════
   AUTH MOBILE FIX — v9_sprint4c_fix1
   Regresión: isotipo oculto + botón submit cortado en móvil.
   Causa: display:none en .auth-visual + align-items:center sin scroll.
   Estrategia: override por source order al final del archivo.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Revertir display:none del panel visual.
        Se convierte en franja superior compacta (isotipo + wordmark). */
  .auth-visual {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    min-height: unset;
    border-right: none;
    border-bottom: 1px solid rgba(33, 150, 243, 0.1);
    background: var(--white);
  }

  /* Isotipo en tamaño compacto para franja horizontal */
  .auth-isotipo-wrap {
    flex-shrink: 0;
  }

  /* Eliminar halo animado — innecesario en franja estrecha */
  .auth-isotipo-wrap::before {
    display: none;
  }

  /* Forzar tamaño pequeño sobreescribiendo el inline style */
  .auth-isotipo-wrap img {
    width: 42px !important;
    height: 42px !important;
    filter: drop-shadow(0 2px 6px rgba(33, 150, 243, 0.22)) !important;
  }

  /* Tagline oculta en móvil — no cabe en franja horizontal */
  .auth-tagline {
    display: none;
  }

  /* Wordmark AQUO alineada al isotipo */
  .auth-brand {
    font-size: 20px;
    letter-spacing: -0.02em;
  }

  /* 2. Corregir align-items en el panel de formulario.
        La herencia de align-items:center centraba verticalmente el form,
        clipando el botón submit cuando el contenido supera el viewport. */
  .auth-form-wrap {
    background: var(--white);
    align-items: flex-start;
    justify-content: flex-start;
    min-height: unset;
    flex: 1;
    padding: 24px 20px 56px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Form inner: ancho completo en móvil */
  .auth-form-inner {
    max-width: 100%;
    width: 100%;
  }

  /* Inputs: mantener fondo blanco en modo mobile */
  .auth-form-wrap .form-input {
    background: var(--white);
  }
}
/* ── FIN AUTH MOBILE FIX ── */

/* ═══════════════════════════════════════════════════════════════════
   AUTH BTN-PRIMARY FIX — v9_sprint4c_fix2
   Causa: --aquo-title scoped a .app-layout. En contexto auth (sin
   .app-layout) color-mix() recibe variable inválida → background
   colapsa a transparent. color:#fff !important permanece → texto
   blanco invisible sobre fondo blanco en móvil.
   Fix: gradient explícito scoped a .auth-wrap. Riesgo de regresión: 0.
   ════════════════════════════════════════════════════════════════ */
.auth-wrap .btn-primary {
  background: linear-gradient(165deg,
    #64B5F6 0%,
    #42A5F5 40%,
    #2196F3 100%
  ) !important;
  border-color: rgba(33, 101, 178, 0.38) !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 2px 10px rgba(33,150,243,0.22) !important;
}
.auth-wrap .btn-primary:hover {
  background: linear-gradient(165deg,
    #7EC8FA 0%,
    #5BB8FF 40%,
    #42A5F5 100%
  ) !important;
  color: #ffffff !important;
}
.auth-wrap .btn-primary:active {
  background: linear-gradient(165deg,
    #42A5F5 0%,
    #2196F3 60%,
    #1E88E5 100%
  ) !important;
  color: #ffffff !important;
}
/* ── FIN AUTH BTN-PRIMARY FIX ── */

/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ Sprint 5 — Canonización visual de módulos de salud
   Nuevos selectores — no sobreescriben líneas anteriores
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── aquo-health-hero__title — título canónico para módulos salud ── */
.aquo-health-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--primary-dark);
  margin: 0;
}

@media (max-width: 900px) {
  .aquo-health-hero__title { font-size: clamp(22px, 6vw, 32px); }
}
@media (max-width: 640px) {
  .aquo-health-hero__title { font-size: 28px; }
}

/* ── aqm-error-state — estado de error/vacío canónico ── */
.aqm-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}
.aqm-error-state__icon {
  font-size: 38px;
  line-height: 1;
}
.aqm-error-state__title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0;
  line-height: 1.3;
}
.aqm-error-state__msg {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ── land-plus-soon — badge Próximamente en pricing/paywall ── */
.land-plus-soon {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--primary-pale, #E3F2FD);
  border: 1.5px dashed var(--primary-light, #90CAF9);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: 0.02em;
  cursor: default;
  user-select: none;
}

/* ── FIN — AQUO™ Sprint 5 Canonización ── */

/* ── Sprint 5 complement — flex layout correctivo ── */
/* Cuando .aquo-health-hero__row tiene 3 hijos (icon + copy + badge),
   copy debe tomar espacio disponible para empujar el badge a la derecha */
.aquo-health-hero__copy { flex: 1; min-width: 0; }

/* Subtítulo del hero de salud usa token, no hex */
.aquo-health-hero__copy p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
/* ── FIN complement Sprint 5 ── */

/* ── aqm-gate-title — título de paywall/gate interno ── */
.aqm-gate-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 8px;
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ v9_fix03 — Sprint 6A
   Dos ajustes quirúrgicos. Solo append. No modifica líneas anteriores.

   1. Color de títulos de módulo en temas Silver y Gold
      Causa: .aquo-module-shell .aquo-section-title tiene color:#215fb2 !important
      hardcodeado. Sobre fondo marfil (Gold) o gris perla (Silver) resulta disonante.
      Fix: override scoped a [data-theme] al final del archivo, gana por source order.

   2. Tamaño de títulos interiores de módulo
      Causa: .aquo-section-title base = clamp(34px,4.2vw,54px) y
      .aquo-module-shell .aquo-section-title = clamp(42px,4.8vw,66px) — ambos
      son tamaños de hero de landing, no de módulo interior.
      .aquo-page-title base = clamp(38px,5vw,64px) — ídem.
      Fix: override scoped a #module-area, rango clamp(26px,3.2vw,34px).
      Coherente con ss-module-header__title ya definido en el sistema.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1A. Títulos en tema SILVER ─────────────────────────────────────────── */
.app-layout[data-theme="silver"] .aquo-section-title,
.app-layout[data-theme="silver"] .aquo-page-title {
  color: var(--tier-pro-title) !important; /* #3F4954 */
}

/* ── 1B. Títulos en tema GOLD ───────────────────────────────────────────── */
.app-layout[data-theme="gold"] .aquo-section-title,
.app-layout[data-theme="gold"] .aquo-page-title {
  color: var(--tier-plus-title) !important; /* #4B3A22 */
}

/* ── 2. Tamaño de títulos en módulos interiores ─────────────────────────── */
/* Scope: #module-area — solo el área donde se montan los módulos.
   No afecta landing, auth, pricing ni ningún componente fuera del shell. */
#module-area .aquo-section-title,
#module-area .aquo-page-title {
  font-size: clamp(26px, 3.2vw, 34px) !important;
  letter-spacing: -0.02em !important;
}

/* Responsive — móvil pequeño: un toque más contenido */
@media (max-width: 640px) {
  #module-area .aquo-section-title,
  #module-area .aquo-page-title {
    font-size: clamp(24px, 7vw, 30px) !important;
  }
}

/* ── FIN — AQUO™ v9_fix03 Sprint 6A ── */

/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ v9_fix07 — Bucodental móvil: columna única real
   
   Implementado en origen (bucodental.js). Los wrappers tienen clase .buco-row
   y cada child tiene clase .buco-col. En desktop el flex-wrap inline funciona
   con normalidad. En móvil esta media query fuerza columna única sin depender
   de ningún selector de atributo style.
   
   Secciones cubiertas:
     - Próximas revisiones / limpiezas  (.buco-row + .buco-col)
     - Mis visitas al dentista          (.buco-row + .buco-col)
     - Señales urgentes + a vigilar     (.buco-row + .buco-col)
     - Alimentos buenos / malos         (.buco-row + .buco-col)
   
   Scope: .aquo-buco-root. Desktop (>640px) sin cambio.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .aquo-buco-root .buco-row {
    flex-direction: column;
  }
  .aquo-buco-root .buco-col {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ── FIN — AQUO™ v9_fix07 Bucodental móvil real ── */

/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ v9_fix08 — Bucodental: corrección de desbordamiento horizontal raíz
   
   Diagnóstico: el módulo completo se corta en móvil porque:
   1. .aquo-buco-root como flex-item de columna hereda min-width:auto
      → hijos con contenido ancho (strip 14 días flex-nowrap, buco-rows)
        fuerzan el contenedor fuera del viewport
   2. Los children directos (.card, buco-row) no tienen min-width:0 explícito
      → el flexbox column no puede shrinkearlos por debajo de su min-content
   3. Los .buco-row no tienen width:100% explícito como flex-items de columna
   
   Corrección: bloque canónico append-only, scope estricto a .aquo-buco-root
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── fix08-1. Raíz del módulo: box model correcto en todos los viewports ──── */
/* El inline style ya añade min-width:0 y overflow-x:hidden.                   */
/* Esta regla refuerza vía CSS con !important para cubrir cualquier override    */
/* de sprints anteriores (Sprint 3 S3-2 pone width:100% solo en ≥901px).      */
.aquo-buco-root {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ── fix08-2. Children directos del root: min-width:0 universal ────────────
   Sin esto, cada .card/.buco-row como flex-item de columna tiene min-width:auto
   → su min-content width (que puede ser 584px para el strip) gana al flex.    */
.aquo-buco-root > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── fix08-3. buco-row: ancho controlado en todos los viewports ─────────── */
/* Aunque los children de column-flex hacen stretch, sin width:100% explícito  */
/* algunos navegadores móviles (Safari/Chrome Android) no lo respetan si hay   */
/* contenido interior que empuja.                                              */
.aquo-buco-root .buco-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── fix08-4. Cards dentro del root: contención del overflow interno ───────
   El strip de 14 días (overflow-x:auto dentro de .card) necesita que el .card
   padre tenga min-width:0 para que el scroll interno funcione sin expandir     */
.aquo-buco-root .card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── fix08-5. Móvil: columna única + contención total ──────────────────── */
@media (max-width: 640px) {
  .aquo-buco-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .aquo-buco-root .buco-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .aquo-buco-root .buco-col {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* El strip de 14 días: contención explícita dentro de la card */
  .aquo-buco-root .card > div[style*="flex-wrap:nowrap"],
  .aquo-buco-root .card > div[style*="overflow-x:auto"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }
}

/* ── FIN — AQUO™ v9_fix08 Bucodental raíz móvil ── */

/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ v9_fix09 — .aquo-buco-shell: clase canónica del root de Bucodental
   
   PROBLEMA RAÍZ REAL:
   El inline style del root tenía max-width:900px + flex-direction:column + gap:20px.
   Esa firma exacta era el target de selectores legacy de #module-area:
   
     #module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:20px"]
     #module-area > div[style*="max-width:900px"][style*="flex-direction:column"][style*="gap:24px"]
   
   → CSS lines 7496–7524 — aplican gap:22px, padding en primer hijo, overrides de card/card-header
   
   Esos selectores contaminaban el layout de Bucodental y anulaban los fixes locales.
   
   SOLUCIÓN: eliminar inline style del root → moverlo a .aquo-buco-shell en CSS.
   Sin inline style, el selector style*= no puede matchear nunca.
   
   Append-only. Gana por source order (posición final en el archivo).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout base: todos los viewports ─────────────────────────────────────── */
.aquo-buco-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 900px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ── Desktop ≥901px: centrado + amplitud ────────────────────────────────────
   Sprint 3 S3-2 ya ponía margin:auto en .aquo-buco-root a ≥901px.
   Esta clase lo hereda — sin inline style no hay colisión.               */
@media (min-width: 901px) {
  .aquo-buco-shell {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1100px !important;
  }
}

@media (min-width: 1600px) {
  .aquo-buco-shell {
    max-width: 1280px !important;
  }
}

/* ── Móvil ≤900px: ancho completo, sin centering ──────────────────────────── */
@media (max-width: 900px) {
  .aquo-buco-shell {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Contención total de children (migrado de fix08) ─────────────────────── */
.aquo-buco-shell > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.aquo-buco-shell .card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.aquo-buco-shell .buco-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── Columna única en móvil ≤640px ────────────────────────────────────────── */
@media (max-width: 640px) {
  .aquo-buco-shell .buco-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .aquo-buco-shell .buco-col {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Strip 14 días: scroll interno sin expandir el módulo */
  .aquo-buco-shell .card > div[style*="flex-wrap:nowrap"],
  .aquo-buco-shell .card > div[style*="overflow-x:auto"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }
}

/* ── FIN — AQUO™ v9_fix09 aquo-buco-shell ── */

/* ── fix11 — Bucodental hero ::before mobile overflow correction ──────────
   Causa: .aquo-section-hero::before usa right:-80px (decoración de glow)
   En móvil ese desplazamiento negativo fuerza scrollWidth +80px sobre el hero.
   Solución: reposicionar el pseudo-element dentro del bounding box del hero
   en pantallas ≤860px. El glow decorativo se reduce y se ancla al borde
   interior derecho del hero — sin salir de los límites del contenedor.
   Archivos tocados: design-system.css únicamente.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .aquo-section-hero::before {
    /* Neutralizar el right:-80px que causa el overflow horizontal */
    right: 0 !important;
    bottom: 0 !important;
    /* Reducir tamaño para que quepa sin desbordarse */
    width: 160px !important;
    height: 160px !important;
  }
}
/* ── FIN — AQUO™ v9_fix11 hero::before mobile ── */


/* CHATGPT FIX13 — mobile authenticated shell overflow guard */
@media (max-width: 900px) {
  .app-layout,
  .main-content {
    max-width: 100%;
  }

  .content-header {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .content-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto !important;
  }

  .content-header > div:last-child {
    min-width: 0;
    max-width: 42vw;
    flex: 0 1 auto !important;
    gap: 8px !important;
  }

  .content-header .greeting,
  .content-header #cita-diaria,
  .content-header .quote,
  .content-header p,
  .content-header .header-title-main {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .content-header .btn.btn-gold.btn-sm,
  .content-header .plan-badge {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-avatar {
    flex-shrink: 0;
  }
}

/* ── Bloque Bebé: chips, tabs y acciones — migrado de inline style (ciclo.js) ── */
.b-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: .01em;
}
.b-chip--nacer {
  background: #FFF8E7;
  color: #6B4C0A;
  border: 1px solid rgba(201,168,76,.28);
}
.b-chip--alim {
  background: #FFF3C0;
  color: #8B6914;
  border: 1px solid rgba(201,168,76,.4);
}
.bebe-tab {
  padding: 5px 11px;
  border-radius: 14px;
  border: 1px solid rgba(201,168,76,.28);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.bebe-tab:hover {
  background: #FFF8E7;
  color: #6B4C0A;
  border-color: rgba(201,168,76,.5);
}
.bebe-tab.activo {
  background: #FFF3C0;
  border-color: #C9A84C;
  color: #6B4C0A;
  box-shadow: 0 2px 8px rgba(201,168,76,.2);
}
.bebe-accion {
  padding: 7px 13px;
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,.28);
  background: rgba(201,168,76,.06);
  color: #6B4C0A;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
}
.bebe-accion:hover {
  background: #FFF8E7;
  border-color: rgba(201,168,76,.5);
}
.bebe-accion:active {
  transform: scale(.97);
  background: #FFF3C0;
}
/* ── FIN Bloque Bebé chips/tabs/acciones ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AQUO™ — FIX A-03 — loading-spinner global
   La clase loading-spinner se usa en 27+ módulos pero carecía de definición.
   Resultado: pantalla en blanco durante toda la carga asíncrona de Supabase.
   Fix: un spinner visual AQUO, centrado, usando variables y keyframes ya
   existentes (--primary-pale, --primary, @keyframes spin línea 619).
   Archivo único tocado: design-system.css — sin riesgo de regresión.
   ─────────────────────────────────────────────────────────────────────────── */
.loading-spinner {
  display: block;
  width: 38px;
  height: 38px;
  margin: 64px auto;
  border-radius: 50%;
  border: 3px solid var(--primary-pale, #e3f2fd);
  border-top-color: var(--primary, #2196F3);
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}
/* ── FIN FIX A-03 ── */


/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ — ESTABILIZACIÓN ARQUITECTURAL · Fase 1
   ─────────────────────────────────────────────────────────────────────────────
   Objetivo: consolidar las 5 capas de deuda técnica identificadas en forensics.
   Estrategia: append-only, gana por source order. Nunca modifica líneas previas.

   CAPAS INTERVENIDAS:
   S1 — Shell structural classes (nuevas clases para inline styles migrados)
   S2 — content-header canonical (un único bloque definitivo)
   S3 — Responsive root containment (main-content + content-body base)
   S4 — data-theme como autoridad visual única del shell
   S5 — aquo-section-title: documentar regla ganadora, no override adicional

   REGLA GANADORA POR CAPA (referencia):
   · content-header → body .app-layout .content-header  (0,3,1) + source final
   · aquo-section-title en módulos → #module-area .aquo-section-title  (L14169)
   · shell theming → .app-layout[data-theme="X"]  (source final, L6700+)
   · responsive base → .main-content, .content-body (este bloque)
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── S1: SHELL STRUCTURAL CLASSES ─────────────────────────────────────────────
   Clases migradas desde inline styles en dashboard.js (shell template).
   Cada definición es el valor exacto que tenía el inline style,
   ahora extraído a CSS para que el theming pueda operar sobre él.
   ─────────────────────────────────────────────────────────────────────────── */

/* sidebar-logo: wrapper flex del bloque logo+texto */
.sidebar-logo__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* sidebar-tagline: subtítulo "salud íntima" bajo el logotipo */
.sidebar-tagline {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(100, 130, 160, 0.70);
  line-height: 1;
}

/* sidebar-footer-btn: botón de logout en footer del sidebar */
.sidebar-footer-btn {
  justify-content: flex-start;
  gap: 10px;
  color: rgba(100, 116, 139, 0.75);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

/* sidebar-version: línea de versión en pie del sidebar */
.sidebar-version {
  font-size: 9.5px;
  color: rgba(148, 163, 184, 0.70);
  margin-top: 10px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* header-left: contenedor izquierdo del content-header */
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

/* header-right: contenedor derecho del content-header */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* header-greeting-wrapper: div interior que contiene saludo + cita diaria */
.header-greeting-wrapper {
  min-width: 0;
  flex: 1;
  cursor: pointer;
}
.header-greeting-wrapper .greeting,
.header-greeting-wrapper #cita-diaria {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* avatar-img: imagen de perfil dentro del avatar */
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Variantes temáticas para sidebar-tagline ────────────────────────────── */
.app-layout[data-theme="silver"] .sidebar-tagline {
  color: rgba(88, 105, 122, 0.65);
}
.app-layout[data-theme="gold"] .sidebar-tagline {
  color: rgba(120, 95, 55, 0.60);
}


/* ── S2: CONTENT-HEADER CANONICAL ─────────────────────────────────────────────
   Un único bloque que gana sobre los ~40 previos por source order.
   Especificidad (0,3,1) — supera los bloques base sin necesidad de !important.
   Los !important solo aparecen donde hay que ganar a un override anterior
   que también usaba !important.
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout .content-header {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Dimensiones */
  min-height: 64px;
  padding: 12px 28px;
  /* Posicionamiento */
  position: sticky;
  top: 0;
  z-index: 50;
  /* Contención */
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Responsive: contenedor más compacto en tablet */
@media (max-width: 1024px) {
  body .app-layout .content-header {
    padding: 10px 20px;
    min-height: 60px;
  }
}

/* Responsive: móvil — padding mínimo operativo */
@media (max-width: 640px) {
  body .app-layout .content-header {
    padding: 8px 14px !important;
    min-height: 56px !important;
    gap: 10px;
  }
}

/* Hijos directos: contención garantizada en todos los temas */
body .app-layout .content-header > .header-left {
  min-width: 0;
  flex: 1 1 auto;
}
body .app-layout .content-header > .header-right {
  flex: 0 0 auto;
  min-width: 0;
}

/* ── Fondos por tema — data-theme es la autoridad visual ──────────────────
   Estos bloques reemplazan funcionalmente los dispersos por el archivo.
   Los bloques anteriores siguen activos pero pierden por source order.    */

/* Blue (default) */
body .app-layout[data-theme="blue"] .content-header {
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.98) 0%, rgba(239, 247, 255, 0.95) 100%);
  border-bottom: 1px solid rgba(130, 181, 230, 0.22);
  box-shadow: 0 8px 24px rgba(58, 112, 170, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Silver */
body .app-layout[data-theme="silver"] .content-header {
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(244, 247, 250, 0.95) 100%);
  border-bottom: 1px solid rgba(160, 172, 186, 0.22);
  box-shadow: 0 8px 24px rgba(80, 96, 112, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Gold */
body .app-layout[data-theme="gold"] .content-header {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(248, 244, 235, 0.95) 100%);
  border-bottom: 1px solid rgba(203, 179, 130, 0.22);
  box-shadow: 0 8px 24px rgba(140, 100, 30, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* ── S3: RESPONSIVE ROOT CONTAINMENT ──────────────────────────────────────────
   Aplicar contención base a main-content y content-body una sola vez aquí,
   para que cada módulo no necesite sus propios min-width:0 !important guards.
   Usa overflow-x:clip (no clip el scroll de fixed children como el FAB).
   ─────────────────────────────────────────────────────────────────────────── */

body .app-layout .main-content {
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

body .app-layout .content-body,
body .app-layout #module-area {
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
  /* Máximo ancho canónico del área de módulos */
  max-width: 100%;
}

/* Primer hijo directo del module-area: nunca expande el contenedor */
body .app-layout #module-area > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/* ── S4: DATA-THEME COMO AUTORIDAD VISUAL DEL SHELL ──────────────────────────
   REGLA ARQUITECTURAL:
   · data-theme  → controla apariencia visual (colores, backgrounds, borders)
   · data-plan   → controla funcionalidad (locks, badges, acceso a módulos)

   Los bloques [data-plan] previos (L2019, L2461) que definen background
   del content-header pierden por source order frente a estos selectores
   combinados [data-theme][data-plan] de especificidad (0,4,1).
   Sin unset. Sin ventana intermedia. Re-aplicación directa y canónica.
   ─────────────────────────────────────────────────────────────────────────── */

/* Blue — plan premium y premium_plus */
body .app-layout[data-theme="blue"][data-plan="premium"] .content-header,
body .app-layout[data-theme="blue"][data-plan="premium_plus"] .content-header {
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.98) 0%, rgba(239, 247, 255, 0.95) 100%);
  border-bottom: 1px solid rgba(130, 181, 230, 0.22);
  box-shadow: 0 8px 24px rgba(58, 112, 170, 0.07);
}

/* Silver — plan premium y premium_plus */
body .app-layout[data-theme="silver"][data-plan="premium"] .content-header,
body .app-layout[data-theme="silver"][data-plan="premium_plus"] .content-header {
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(244, 247, 250, 0.95) 100%);
  border-bottom: 1px solid rgba(160, 172, 186, 0.22);
  box-shadow: 0 8px 24px rgba(80, 96, 112, 0.06);
}

/* Gold — plan premium y premium_plus */
body .app-layout[data-theme="gold"][data-plan="premium"] .content-header,
body .app-layout[data-theme="gold"][data-plan="premium_plus"] .content-header {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(248, 244, 235, 0.95) 100%);
  border-bottom: 1px solid rgba(203, 179, 130, 0.22);
  box-shadow: 0 8px 24px rgba(140, 100, 30, 0.07);
}

/* ── S5: AQUO-SECTION-TITLE — REGLA GANADORA DOCUMENTADA ─────────────────────
   No se añade nuevo override. La regla correcta ya está en el archivo:
   · Color en módulos: L14155–14163 (.app-layout[data-theme="silver/gold"])
   · Tamaño en módulos: L14169–14177 (#module-area .aquo-section-title)
     → clamp(26px, 3.2vw, 34px) — esta es la canónica de módulos interiores
   · Tamaño en landing/hero: L6530 — clamp(34px,4.2vw,54px) — correcto
   La base hardcodeada color:#215fb2 en .aquo-module-shell (L6649) está
   corregida por los overrides finales. No tocar la base.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── FIN — AQUO™ Estabilización Arquitectural Fase 1 ── */


/* ══════════════════════════════════════════════════════════════════════════════
   AQUO™ — FASE 2 · UNIFICACIÓN VISUAL PREMIUM
   ─────────────────────────────────────────────────────────────────────────────
   PARTE 2: Card canónica + migración selectiva
   PARTE 3: Aire y ritmo vertical
   PARTE 4: Jerarquía tipográfica visible

   Estrategia: append-only. Gana por source order sobre definiciones previas.
   Scope: #module-area (interior del shell autenticado). No afecta landing.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── P2: CARD CANÓNICA ────────────────────────────────────────────────────────
   La card canónica AQUO vive en #module-area.
   Valores elegidos: 20px radius (entre el 18 de main-content y el 22 de
   aquo-module-shell), background semitransparente respira con el fondo del
   tema, sombra ligera con highlight inset blanco.

   Variantes oficiales:
   · .card          — card de contenido general
   · .card-premium  — acento gold, para secciones especiales
   · .card-fluid    — tarjeta grande de hub (ya correcta, no se toca)
   ─────────────────────────────────────────────────────────────────────────── */

#module-area .card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  border: 1px solid rgba(33, 150, 243, 0.09);
  box-shadow:
    0 4px 18px rgba(33, 150, 243, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.96) inset;
  transition: box-shadow 0.22s ease, transform 0.20s ease;
}

#module-area .card:hover {
  box-shadow:
    0 6px 24px rgba(33, 150, 243, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.98) inset;
  transform: translateY(-1px);
}

/* Stat-card: misma base, padding generoso */
#module-area .stat-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  border: 1px solid rgba(33, 150, 243, 0.09);
  box-shadow:
    0 4px 18px rgba(33, 150, 243, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.96) inset;
  padding: 22px 20px 18px;
}

/* Temas — card y stat-card en Silver */
body .app-layout[data-theme="silver"] #module-area .card,
body .app-layout[data-theme="silver"] #module-area .stat-card {
  border-color: rgba(155, 168, 183, 0.18);
  box-shadow:
    0 4px 18px rgba(78, 89, 104, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.96) inset;
}

/* Temas — card y stat-card en Gold */
body .app-layout[data-theme="gold"] #module-area .card,
body .app-layout[data-theme="gold"] #module-area .stat-card {
  border-color: rgba(196, 162, 72, 0.14);
  box-shadow:
    0 4px 18px rgba(140, 110, 42, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.97) inset;
}

/* card-premium: mantiene acento gold en los 3 temas */
#module-area .card-premium {
  background: linear-gradient(135deg, rgba(255, 253, 245, 0.97), rgba(253, 248, 236, 0.94));
  border-color: rgba(201, 168, 76, 0.22);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.94) inset,
    0 6px 24px rgba(201, 168, 76, 0.10),
    0 1px 4px rgba(201, 168, 76, 0.07);
}

/* card-header: icono + label — más legible */
#module-area .card-header {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body .app-layout[data-theme="silver"] #module-area .card-header {
  color: var(--tier-pro-title, #3F4954);
}
body .app-layout[data-theme="gold"] #module-area .card-header {
  color: var(--tier-plus-title, #4B3A22);
}


/* ── P3: AIRE Y RITMO VERTICAL ───────────────────────────────────────────────
   Tres correcciones quirúrgicas en las zonas más aplastadas:
   1. stat-label — espacio entre el label y el borde superior de la card
   2. section-label (ÚLTIMOS 7 DÍAS, TU MOMENTO etc) — margen superior
   3. hero card móvil — padding mínimo más cómodo
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. stat-label: más separación visual del borde */
#module-area .stat-label,
#module-area .stat-card .stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1;
}

/* 2. Bloques de sección interior (etiquetas tipo "ÚLTIMOS 7 DÍAS") */
#module-area .card-header,
#module-area .section-block-label,
#module-area h3.section-label,
#module-area [class*="section-label"],
#module-area [class*="block-header"] {
  margin-top: 0;
}

/* Separación entre bloques de card consecutivos */
#module-area .card + .card,
#module-area .card + .stat-card,
#module-area .stat-card + .card {
  margin-top: 14px;
}

/* Sección de historial / lista debajo de stats */
#module-area .card:has(.card-header) {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* 3. Hero section en móvil: padding mínimo más cómodo */
@media (max-width: 640px) {
  #module-area .aquo-section-hero {
    padding: 22px 18px 20px;
  }

  #module-area .stat-card {
    padding: 18px 16px 16px;
  }

  /* Stat grid más compacto pero respirado */
  #module-area .grid-3,
  #module-area .stats-row {
    gap: 10px;
  }
}

/* Ritmo entre hero y primera stat-card */
#module-area .aquo-section-hero + * {
  margin-top: 20px;
}

/* Ritmo entre stats y primer bloque historial */
#module-area .grid-3 + .card,
#module-area .stats-row + .card {
  margin-top: 20px;
}


/* ── P4: JERARQUÍA TIPOGRÁFICA VISIBLE ───────────────────────────────────────
   Escala mínima de lectura AQUO en módulos.
   No toca font-sizes globales. Solo las zonas más visibles del shell.
   ─────────────────────────────────────────────────────────────────────────── */

/* stat-value: valor principal de la card de métrica */
#module-area .stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--primary-dark);
  line-height: 1;
}

body .app-layout[data-theme="silver"] #module-area .stat-value {
  color: var(--tier-pro-title, #3F4954);
}
body .app-layout[data-theme="gold"] #module-area .stat-value {
  color: var(--tier-plus-title, #4B3A22);
}

/* stat-sub: metadata secundario dentro de stat-card (fecha, unidad, etc.) */
#module-area .stat-sub,
#module-area .stat-card small,
#module-area .stat-card .stat-date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.3;
}

/* module-section-title: encabezados de bloque tipo "Resumen semanal" */
#module-area .module-section-title {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--primary-dark);
  line-height: 1.25;
  margin-bottom: 14px;
  margin-top: 28px;
}

body .app-layout[data-theme="silver"] #module-area .module-section-title {
  color: var(--tier-pro-title, #3F4954);
}
body .app-layout[data-theme="gold"] #module-area .module-section-title {
  color: var(--tier-plus-title, #4B3A22);
}

/* CTAs discretos: botones de acción secundaria dentro de cards */
#module-area .btn-link,
#module-area .card .btn-ghost {
  font-size: 13px;
  letter-spacing: 0.01em;
  opacity: 0.82;
}
#module-area .btn-link:hover,
#module-area .card .btn-ghost:hover {
  opacity: 1;
}

/* Kicker label: después del reemplazo de BLUE LUXURY, asegurar que
   la pill se adapte al ancho del contenido nuevo */
#module-area .aquo-section-kicker,
#module-area .aquo-page-kicker {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}

/* ── FIN — AQUO™ Fase 2 Unificación Visual Premium ── */

/* ═══════════════════════════════════════════════════════════════════
   FASE 3 — CANON VISUAL AQUO
   Sistema canónico de heroes para módulos internos.
   Tres variantes oficiales + tokens tipográficos unificados.
   NO modificar reglas anteriores. Sólo se añade al final.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens tipográficos canónicos — mismos en las 3 variantes ─── */
.aquo-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,76,.26);
  background: linear-gradient(135deg, rgba(255,248,232,.96), rgba(246,237,212,.92));
  box-shadow: 0 8px 18px rgba(201,168,76,.09);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold, #C9A84C);
  margin-bottom: 16px;
}
.aquo-hero-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -.03em;
  color: var(--primary-dark);
}
.aquo-hero-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 680px;
}

/* ── Variante A: aquo-hero--editorial ─────────────────────────────
   Módulos índice con grid de cards subordinadas.
   Uso actual: Informes, Salud Hub.
   Layout: copy izquierda + (opcional) CTA o side panel derecha.
   ─────────────────────────────────────────────────────────────── */
.aquo-hero--editorial {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 30px;
  border-radius: 32px;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.97) 0%,
    rgba(245,250,255,.95) 55%,
    rgba(236,245,254,.92) 100%
  );
  border: 1px solid rgba(125,170,220,.20);
  box-shadow: 0 20px 42px rgba(76,120,170,.10), inset 0 1px 0 rgba(255,255,255,.92);
}
.aquo-hero--editorial::before {
  content: "";
  position: absolute;
  inset: auto -60px -100px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,182,235,.16) 0%, transparent 70%);
  pointer-events: none;
}
.aquo-hero--editorial::after {
  content: "";
  position: absolute;
  left: -60px;
  top: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 70%);
  pointer-events: none;
}
/* Subelementos — copy y side */
.aquo-hero__copy,
.aquo-hero__main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: min(100%, 480px);
}
.aquo-hero__side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  min-width: 200px;
}

/* ── Variante B: aquo-hero--operacional ───────────────────────────
   Módulos de registro/seguimiento diario con navegación temporal.
   Uso actual: Agua, Sueño, Peso, Ciclo, Bucodental, Rutinas.
   Layout: heading izquierda + controles derecha + chips debajo.
   ─────────────────────────────────────────────────────────────── */
.aquo-hero--operacional {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  border-radius: 32px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95) 0%,
    rgba(247,251,255,.98) 100%
  );
  border: 1px solid rgba(169,198,224,.58);
  box-shadow: 0 16px 40px rgba(80,126,170,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.aquo-hero--operacional::before {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,182,235,.20) 0%, rgba(120,182,235,.06) 44%, transparent 72%);
  pointer-events: none;
}
.aquo-hero--operacional::after {
  content: "";
  position: absolute;
  left: -80px;
  top: -120px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.60) 0%, rgba(255,255,255,.10) 46%, transparent 72%);
  pointer-events: none;
}
/* Subelementos — header flex interno y actions */
.aquo-hero__header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.aquo-hero__heading {
  max-width: 640px;
}
.aquo-hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* ── Responsive — ambas variantes ─────────────────────────────── */
@media (max-width: 900px) {
  .aquo-hero--editorial,
  .aquo-hero--operacional { padding: 24px 22px; border-radius: 28px; }
  .aquo-hero-title { font-size: clamp(28px, 7vw, 42px); }
}
@media (max-width: 640px) {
  .aquo-hero--editorial,
  .aquo-hero--operacional { padding: 22px 18px; border-radius: 24px; }
  .aquo-hero__header { flex-direction: column; }
  .aquo-hero__actions { width: 100%; justify-content: flex-start; }
  .aquo-hero__side { align-items: flex-start; }
  .aquo-hero-title { font-size: clamp(26px, 9vw, 36px); }
}

/* ── Override informes: aquo-hero--editorial dentro de informes-page */
.aquo-informes-page .aquo-hero--editorial {
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(243,248,253,.78)) !important;
  border: 1px solid rgba(125,170,220,.16) !important;
  box-shadow: 0 22px 40px rgba(86,136,186,.08), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* ── Override salud hub: aquo-hero--editorial dentro de page-shell max-width:940px */
#module-area .aquo-page-shell[style*="max-width:940px"] .aquo-hero--editorial {
  padding: 30px 32px !important;
  border-radius: 30px !important;
}

/* ── Override rutinas: aquo-hero--operacional dentro de rutinas-root */
#rutinas-root .aquo-hero--operacional {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.98) 0%,
    rgba(248,251,255,.96) 55%,
    rgba(239,246,254,.94) 100%
  ) !important;
  border: 1px solid rgba(140,176,212,.18) !important;
  border-radius: 32px !important;
  box-shadow: 0 20px 44px rgba(92,120,153,.10) !important;
  margin-bottom: 12px;
}
#rutinas-root .aquo-hero--operacional .aquo-hero-title {
  font-size: clamp(34px, 4.5vw, 52px) !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
}
#rutinas-root .aquo-hero--operacional .aquo-hero__actions .btn {
  min-height: 50px !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 26px rgba(92,120,153,.10) !important;
}
#rutinas-root .aquo-hero--operacional .aquo-hero__actions .btn-secondary {
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(125,170,220,.18) !important;
}
/* Pill de stats canónica — variante success (Completadas) */
.aquo-chip-soft--success {
  background: rgba(232,245,233,.96) !important;
  border-color: rgba(67,160,71,.22) !important;
  color: var(--success, #2E7D32) !important;
}
.aquo-chip-soft--success strong {
  color: var(--success, #2E7D32) !important;
}

/* ── Nota PDF de exportación canónica ─────────────────────────── */
.aquo-export-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════
   FIN FASE 3 — CANON
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fase 3 Canon — fix: aquo-module-shell + aquo-hero--operacional ──────────
   Bucodental (y futuros módulos migrados dentro de aquo-module-shell)
   reciben el mismo nivel de presencia que tenían con .aquo-section-hero.
   Cubre el override previo .aquo-module-shell .aquo-section-hero (línea 6571)
   que dejó de aplicar tras la migración al canon.
   ────────────────────────────────────────────────────────────────────────── */
.aquo-module-shell .aquo-hero--operacional {
  padding: 34px 34px 28px !important;
  border-radius: 34px !important;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.98) 0%,
    rgba(246,251,255,.96) 55%,
    rgba(234,244,252,.92) 100%
  ) !important;
  border: 1px solid rgba(160,194,224,.76) !important;
  box-shadow: 0 18px 44px rgba(62,116,170,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TANDA CORRECTIVA — Canon operacional flexible
   ═══════════════════════════════════════════════════════════════════ */

/* Fix 1: __heading ocupa espacio disponible, __actions se ancla a la derecha.
   Sin esto, heading y actions compiten por ancho y actions cae a segunda fila
   (bug visible en Rutinas en 1440px). */
.aquo-hero__heading {
  flex: 1;
  min-width: min(100%, 320px);
}
.aquo-hero__actions {
  flex-shrink: 0;
  align-self: flex-start;
}

/* Fix 2: Salud Hub con hero operacional — el __actions aloja el resumen
   de módulos (texto informativo, no CTA). Alineación top-right limpia.
   Nota: aquo-salud-hub y aquo-hero--operacional están en el mismo elemento
   (sin espacio entre clases en el selector). */
.aquo-hero--operacional.aquo-salud-hub .aquo-hero__actions {
  justify-content: flex-end;
  text-align: right;
  gap: 6px;
  max-width: 280px;
}

/* Fix 3: Informes editorial — presencia real de card premium.
   El fondo anterior era demasiado plano. Gradiente más definido,
   borde más visible, sombra equivalente a la familia operacional. */
.aquo-informes-page .aquo-hero--editorial {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.97) 0%,
    rgba(242,249,255,.94) 58%,
    rgba(228,242,255,.90) 100%
  ) !important;
  border: 1px solid rgba(125,170,220,.26) !important;
  box-shadow: 0 20px 42px rgba(76,120,170,.10),
              inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIN TANDA CORRECTIVA
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   TANDA 1 — Hero Canon Theme System
   ───────────────────────────────────────────────────────────────────
   Objetivo: theming completo de los heroes canónicos en Blue · Silver · Gold.
   
   Afecta (Tanda 1): bucodental · rutinas · informes · salud_hub
   No toca: .aqh · dashboard · módulos JS · agua/peso/sueño · salud visual/sexual/auditiva
   
   Estrategia: pure append al final del archivo.
   Selectores [data-theme] con mayor especificidad que los bloques base.
   Los !important solo donde la regla previa ya los usa.
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 1 — KICKER
   Problema: .aquo-hero-kicker tiene fondo, borde y color hardcodeados en Gold.
   Fix: overrides explícitos por [data-theme]. Azul en Blue, plata en Silver, dorado en Gold.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Blue */
.app-layout[data-theme="blue"] .aquo-hero-kicker,
.app-layout:not([data-theme]) .aquo-hero-kicker {
  background: linear-gradient(135deg, rgba(226,240,255,.94), rgba(210,231,255,.90));
  border: 1px solid rgba(14,80,178,.15);
  box-shadow: 0 6px 16px rgba(14,80,178,.07);
  color: #1259b0;
}

/* Silver */
.app-layout[data-theme="silver"] .aquo-hero-kicker {
  background: linear-gradient(135deg, rgba(231,235,241,.96), rgba(217,224,232,.92));
  border: 1px solid rgba(80,100,124,.17);
  box-shadow: 0 6px 16px rgba(80,100,124,.07);
  color: #354757;
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-hero-kicker {
  background: linear-gradient(135deg, rgba(255,248,228,.96), rgba(245,234,206,.92));
  border: 1px solid rgba(152,112,34,.20);
  box-shadow: 0 6px 16px rgba(152,112,34,.07);
  color: #9a7428;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 2 — TÍTULO Y SUBTÍTULO
   Problema: .aquo-hero-title usa var(--primary-dark) → solo correcto en Blue.
             .aquo-hero-subtitle usa var(--text-secondary) → neutro pero no temático.
   Fix: color por tema en cada variante.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Blue — title */
.app-layout[data-theme="blue"] .aquo-hero-title,
.app-layout:not([data-theme]) .aquo-hero-title {
  color: #0c3878;
}

/* Blue — subtitle */
.app-layout[data-theme="blue"] .aquo-hero-subtitle,
.app-layout:not([data-theme]) .aquo-hero-subtitle {
  color: #516e8c;
}

/* Silver — title */
.app-layout[data-theme="silver"] .aquo-hero-title {
  color: #18293a;
}

/* Silver — subtitle */
.app-layout[data-theme="silver"] .aquo-hero-subtitle {
  color: #455869;
}

/* Gold — title */
.app-layout[data-theme="gold"] .aquo-hero-title {
  color: #33200d;
}

/* Gold — subtitle */
.app-layout[data-theme="gold"] .aquo-hero-subtitle {
  color: #786040;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 3 — HERO OPERACIONAL — FONDO · BORDE · SOMBRA
   Problema: base class hardcodeada en azul. Sin theming.
   Fix: override del contenedor por [data-theme].
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Blue — refinado (coherente con base, explícito) */
.app-layout[data-theme="blue"] .aquo-hero--operacional,
.app-layout:not([data-theme]) .aquo-hero--operacional {
  background: linear-gradient(
    160deg,
    rgba(248,252,255,.98) 0%,
    rgba(235,246,255,.96) 55%,
    rgba(221,238,255,.93) 100%
  );
  border: 1px solid rgba(96,160,220,.24);
  box-shadow: 0 16px 40px rgba(56,108,170,.11), inset 0 1px 0 rgba(255,255,255,.93);
}

/* Silver */
.app-layout[data-theme="silver"] .aquo-hero--operacional {
  background: linear-gradient(
    160deg,
    rgba(247,249,251,.98) 0%,
    rgba(235,240,246,.96) 55%,
    rgba(222,229,237,.93) 100%
  );
  border: 1px solid rgba(132,154,176,.24);
  box-shadow: 0 16px 40px rgba(66,86,108,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-hero--operacional {
  background: linear-gradient(
    160deg,
    rgba(255,252,245,.98) 0%,
    rgba(251,243,229,.96) 55%,
    rgba(245,233,212,.93) 100%
  );
  border: 1px solid rgba(174,144,74,.22);
  box-shadow: 0 16px 40px rgba(116,86,26,.10), inset 0 1px 0 rgba(255,252,240,.92);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 4 — HERO OPERACIONAL — ORBS (::before · ::after)
   Solo Silver y Gold: Blue ya tiene valores correctos en la base.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver — orb primario bottom-right */
.app-layout[data-theme="silver"] .aquo-hero--operacional::before {
  background: radial-gradient(circle,
    rgba(144,164,186,.18) 0%,
    rgba(144,164,186,.05) 44%,
    transparent 72%
  );
}

/* Silver — orb highlight top-left */
.app-layout[data-theme="silver"] .aquo-hero--operacional::after {
  background: radial-gradient(circle,
    rgba(255,255,255,.52) 0%,
    rgba(255,255,255,.08) 46%,
    transparent 72%
  );
}

/* Gold — orb primario bottom-right */
.app-layout[data-theme="gold"] .aquo-hero--operacional::before {
  background: radial-gradient(circle,
    rgba(196,160,80,.20) 0%,
    rgba(196,160,80,.05) 44%,
    transparent 72%
  );
}

/* Gold — orb highlight top-left (cálido) */
.app-layout[data-theme="gold"] .aquo-hero--operacional::after {
  background: radial-gradient(circle,
    rgba(255,247,220,.60) 0%,
    rgba(255,247,220,.10) 46%,
    transparent 72%
  );
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 5 — HERO EDITORIAL — FONDO · BORDE · SOMBRA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Blue */
.app-layout[data-theme="blue"] .aquo-hero--editorial,
.app-layout:not([data-theme]) .aquo-hero--editorial {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.97) 0%,
    rgba(245,250,255,.95) 55%,
    rgba(233,244,255,.92) 100%
  );
  border: 1px solid rgba(114,166,220,.22);
  box-shadow: 0 20px 42px rgba(72,116,168,.10), inset 0 1px 0 rgba(255,255,255,.93);
}

/* Silver */
.app-layout[data-theme="silver"] .aquo-hero--editorial {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.97) 0%,
    rgba(243,246,250,.95) 55%,
    rgba(229,235,241,.92) 100%
  );
  border: 1px solid rgba(124,144,166,.22);
  box-shadow: 0 20px 42px rgba(58,76,96,.09), inset 0 1px 0 rgba(255,255,255,.93);
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-hero--editorial {
  background: linear-gradient(
    160deg,
    rgba(255,253,248,.97) 0%,
    rgba(251,244,232,.95) 55%,
    rgba(243,232,210,.92) 100%
  );
  border: 1px solid rgba(174,144,74,.22);
  box-shadow: 0 20px 42px rgba(116,86,26,.09), inset 0 1px 0 rgba(255,252,242,.93);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 6 — HERO EDITORIAL — ORBS (::before)
   Solo Silver y Gold para el orb primario.
   ::after (highlight blanco) es válido en los 3 temas sin cambio.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver — orb primario bottom-right */
.app-layout[data-theme="silver"] .aquo-hero--editorial::before {
  background: radial-gradient(circle,
    rgba(140,162,184,.14) 0%,
    transparent 70%
  );
}

/* Gold — orb primario bottom-right */
.app-layout[data-theme="gold"] .aquo-hero--editorial::before {
  background: radial-gradient(circle,
    rgba(196,160,80,.16) 0%,
    transparent 70%
  );
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 7 — OVERRIDE .aquo-module-shell (bucodental y futuros)
   La regla base usa !important → se requiere !important aquí también.
   Blue no se toca: ya está bien resuelto en la regla base.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver */
.app-layout[data-theme="silver"] .aquo-module-shell .aquo-hero--operacional {
  background: linear-gradient(
    135deg,
    rgba(247,250,252,.98) 0%,
    rgba(234,240,247,.96) 55%,
    rgba(220,229,238,.94) 100%
  ) !important;
  border: 1px solid rgba(132,154,176,.30) !important;
  box-shadow: 0 18px 44px rgba(66,86,108,.12), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-module-shell .aquo-hero--operacional {
  background: linear-gradient(
    135deg,
    rgba(255,252,244,.98) 0%,
    rgba(250,242,227,.96) 55%,
    rgba(243,230,209,.94) 100%
  ) !important;
  border: 1px solid rgba(174,144,74,.30) !important;
  box-shadow: 0 18px 44px rgba(116,86,26,.12), inset 0 1px 0 rgba(255,252,240,.94) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 8 — OVERRIDE #rutinas-root
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver */
.app-layout[data-theme="silver"] #rutinas-root .aquo-hero--operacional {
  background: linear-gradient(
    135deg,
    rgba(247,250,252,.99) 0%,
    rgba(236,242,248,.97) 55%,
    rgba(224,232,241,.95) 100%
  ) !important;
  border: 1px solid rgba(132,154,176,.22) !important;
  box-shadow: 0 20px 44px rgba(66,86,108,.10), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

/* Gold */
.app-layout[data-theme="gold"] #rutinas-root .aquo-hero--operacional {
  background: linear-gradient(
    135deg,
    rgba(255,253,245,.99) 0%,
    rgba(251,243,229,.97) 55%,
    rgba(243,232,212,.95) 100%
  ) !important;
  border: 1px solid rgba(174,144,74,.22) !important;
  box-shadow: 0 20px 44px rgba(116,86,26,.10), inset 0 1px 0 rgba(255,252,240,.94) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 9 — OVERRIDE .aquo-informes-page
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver */
.app-layout[data-theme="silver"] .aquo-informes-page .aquo-hero--editorial {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.97) 0%,
    rgba(241,245,249,.94) 58%,
    rgba(226,233,241,.90) 100%
  ) !important;
  border: 1px solid rgba(124,144,166,.26) !important;
  box-shadow: 0 20px 42px rgba(58,76,96,.09), inset 0 1px 0 rgba(255,255,255,.93) !important;
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-informes-page .aquo-hero--editorial {
  background: linear-gradient(
    160deg,
    rgba(255,253,248,.97) 0%,
    rgba(250,243,230,.94) 58%,
    rgba(240,230,208,.90) 100%
  ) !important;
  border: 1px solid rgba(174,144,74,.26) !important;
  box-shadow: 0 20px 42px rgba(116,86,26,.09), inset 0 1px 0 rgba(255,252,242,.93) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FIN TANDA 1 — Hero Canon Theme System
   Módulos afectados: bucodental · rutinas · informes · salud_hub
   Próxima tanda: migración de .aquo-page-hero (7 módulos restantes)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   TANDA 2 — Migración .aquo-page-hero → hero canónico
   ───────────────────────────────────────────────────────────────────
   Módulos migrados: calendario · citas · wellness · autoexploración
                     patologías · analíticas · nutrición
   
   Solo se añaden los overrides funcionales necesarios.
   El theming Blue/Silver/Gold lo cubren los selectores genéricos
   ya escritos en Tanda 1 (.aquo-hero--editorial y --operacional).
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T2-1 — NUTRICIÓN: margin-bottom funcional
   Causa: el contenedor #nutr-root usa gap:0. El hero tenía
   margin-bottom:24px como inline style (ahora eliminado).
   Sin este fix, los tabs quedan a 0px del hero.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nutr-head.aquo-hero--operacional {
  margin-bottom: 24px;
}

/* Nota: el mobile override a 18px ya existe en el inline <style>
   de nutricion.js (#nutr-root .nutr-head{margin-bottom:18px !important})
   y sigue funcionando porque .nutr-head está preservado en el nuevo hero. */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T2-2 — ANALÍTICAS: margin-bottom + min-width funcional
   Causa: el contenedor #ana-root usa gap:0 y flex-direction:column.
   El hero tenía margin-bottom:20px y min-width:0 como inline styles.
   min-width:0 evita desbordamiento horizontal del hero como flex item.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ana-head.aquo-hero--editorial {
  margin-bottom: 20px;
  min-width: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T2-3 — AQUO-NUTRI-DATE: color semántico por tema
   La clase ya tiene font-size:17px !important vía regla existente.
   Se añaden color y font-weight semánticos para los 3 temas.
   (font-weight y letter-spacing se mantienen como inline en el JS,
    pero el color pasa a ser temático en lugar de hardcoded.)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Blue */
.app-layout[data-theme="blue"] .aquo-nutri-date,
.app-layout:not([data-theme]) .aquo-nutri-date {
  color: #0c3878;
}

/* Silver */
.app-layout[data-theme="silver"] .aquo-nutri-date {
  color: #18293a;
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-nutri-date {
  color: #33200d;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T2-4 — AQUO-DATE-STACK en hero__side/hero__actions
   Los módulos migrados usan .aquo-date-stack dentro de __side o
   __actions. El texto del stack hereda correctamente del tema,
   pero la línea superior (valor) necesita peso visual distinguido.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* El primer div del date-stack (el valor numérico o fecha)
   recibe font-weight 600 para diferenciarse de la etiqueta */
.aquo-hero__side .aquo-date-stack > div:first-child,
.aquo-hero__actions .aquo-date-stack > div:first-child {
  font-weight: 600;
  color: inherit;
}

/* La etiqueta (segundo div) queda en tone secundario */
.aquo-hero__side .aquo-date-stack > div:last-child,
.aquo-hero__actions .aquo-date-stack > div:last-child {
  opacity: 0.72;
}


/* ═══════════════════════════════════════════════════════════════════
   FIN TANDA 2 — Migración hero canónico
   7 módulos migrados. Theming heredado de Tanda 1.
   Próxima tanda: .aquo-section-hero (agua · peso · sueño)
                  .aquo-health-hero (salud auditiva · sexual · visual)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIVO NUTRICIÓN — micro-ajuste composición post-Tanda 2
   ───────────────────────────────────────────────────────────────────
   Problema 1: hero demasiado alto, vacío lateral (nav eliminada del JS).
   Problema 2: icono aislado encima del título (h1 no tiene flex).
   Problema 3: duplicación nav temporal (resuelta en JS).
   Problema 4: tab bar con peso excesivo.
   Problema 5: transición hero → primer bloque.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Hero más compacto ─────────────────────────────────────────── */

.nutr-head.aquo-hero--operacional {
  padding: 22px 28px 20px !important;
  margin-bottom: 16px !important;
}

/* ── 2. Icono inline con el título ───────────────────────────────── */
/* h1 como flex → icono + texto en la misma línea                    */

.nutr-head .aquo-hero-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  line-height: 1.05 !important;
}

.nutr-head .aquo-hero-title .aquo-title-icon {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  vertical-align: 0 !important;
  opacity: 0.78 !important;
}

/* Kicker con menos espacio inferior para condensar el heading */
.nutr-head .aquo-hero-kicker {
  margin-bottom: 10px !important;
}

/* ── 3. Tab bar: menos peso visual ──────────────────────────────── */

#nutr-root .aquo-segmented {
  margin-bottom: 20px !important;
}

#nutr-root .aquo-segmented .aquo-segmented__item {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 13px !important;
}

/* ── 4. Transición hero → tab bar ───────────────────────────────── */
/* El primer bloque ya hereda el border-radius del sistema canónico.  */
/* La mejora de percepción viene del margin reducido arriba.          */

/* ── 5. Responsive: hero compacto en mobile ─────────────────────── */
@media (max-width: 640px) {
  .nutr-head.aquo-hero--operacional {
    padding: 18px 20px 16px !important;
    margin-bottom: 12px !important;
  }
  .nutr-head .aquo-hero-title {
    font-size: clamp(26px, 8vw, 34px) !important;
  }
  .nutr-head .aquo-hero-title .aquo-title-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIN CORRECTIVO NUTRICIÓN
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   TANDA 3 — Cierre del sistema de heroes
   ───────────────────────────────────────────────────────────────────
   Módulos migrados en JS: agua · peso · sueño
   (container: aquo-section-hero → aquo-hero--operacional)
   (tipografía: aquo-section-kicker/title/subtitle → aquo-hero-*)
   
   Módulos con CSS-only: salud_auditiva · salud_sexual · salud_visual
   (aquo-health-hero sin cambio de estructura — solo theming Silver/Gold)
   
   El theming base Blue ya existe en las reglas de Tanda 1.
   Solo se añade Silver/Gold para los nuevos contextos.
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T3-1 — AGUA / PESO / SUEÑO
   aquo-chips-row + aquo-chip-soft por tema
   (el container e hijo tipográficos ya los cubre Tanda 1)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver — chips */
.app-layout[data-theme="silver"] .aquo-chip-soft {
  border-color: rgba(130,150,172,.28);
  color: #4a5a6e;
}
.app-layout[data-theme="silver"] .aquo-chip-soft strong {
  color: #18293a;
}

/* Gold — chips */
.app-layout[data-theme="gold"] .aquo-chip-soft {
  border-color: rgba(168,136,72,.28);
  color: #6a5236;
}
.app-layout[data-theme="gold"] .aquo-chip-soft strong {
  color: #33200d;
}

/* Silver — nav pills y edit pill */
.app-layout[data-theme="silver"] .aquo-nav-pill,
.app-layout[data-theme="silver"] .aquo-edit-pill {
  border-color: rgba(120,140,162,.20);
  color: #2a3a4a;
}

/* Gold — nav pills y edit pill */
.app-layout[data-theme="gold"] .aquo-nav-pill,
.app-layout[data-theme="gold"] .aquo-edit-pill {
  border-color: rgba(160,128,60,.20);
  color: #3a2810;
}

/* Silver — orbs operacional (agua/peso/sueño usan aquo-hero-actions en lugar de __actions,
   el container operacional ya tiene sus orbs vía Tanda 1) */

/* Sueno day label — color semántico por tema (parche var(--primary-dark) limpiado en JS) */
.app-layout[data-theme="blue"] #sueno-day-label,
.app-layout:not([data-theme]) #sueno-day-label {
  color: #0c3878;
}
.app-layout[data-theme="silver"] #sueno-day-label {
  color: #18293a;
}
.app-layout[data-theme="gold"] #sueno-day-label {
  color: #33200d;
}

/* Peso fecha label — ya usa var(--text-muted), neutro, no necesita override */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T3-2 — SALUD AUDITIVA · SEXUAL · VISUAL
   CSS-only: aquo-health-hero theming Silver/Gold
   La estructura compacta (emoji + título + sub en fila) se preserva.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver — contenedor */
.app-layout[data-theme="silver"] .aquo-health-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(243,246,250,.94));
  border: 1px solid rgba(128,148,170,.18);
  box-shadow: 0 16px 28px rgba(70,90,110,.07);
}

/* Silver — título */
.app-layout[data-theme="silver"] .aquo-health-hero__title {
  color: #18293a;
}

/* Silver — subtítulo */
.app-layout[data-theme="silver"] .aquo-health-hero__copy p {
  color: #485a6a !important;
}

/* Gold — contenedor */
.app-layout[data-theme="gold"] .aquo-health-hero {
  background: linear-gradient(180deg, rgba(255,253,247,.97), rgba(251,244,232,.94));
  border: 1px solid rgba(172,140,72,.18);
  box-shadow: 0 16px 28px rgba(110,82,26,.07);
}

/* Gold — título */
.app-layout[data-theme="gold"] .aquo-health-hero__title {
  color: #33200d;
}

/* Gold — subtítulo */
.app-layout[data-theme="gold"] .aquo-health-hero__copy p {
  color: #7a6040 !important;
}

/* Gold — icono: warm filter para los emoji en tema gold */
.app-layout[data-theme="gold"] .aquo-health-hero__icon {
  filter: drop-shadow(0 4px 10px rgba(160,110,30,.16));
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § T3-3 — AGUA: BURBUJAS POR TEMA
   Las burbujas existen en el hero de Agua. Se adaptan al tono del tema.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Silver — burbujas en tono frío neutro */
.app-layout[data-theme="silver"] .aquo-bubbles--agua .aquo-bubble {
  opacity: 0.45 !important;
  filter: saturate(0) brightness(1.05) !important;
}

/* Gold — burbujas en tono cálido ámbar */
.app-layout[data-theme="gold"] .aquo-bubbles--agua .aquo-bubble {
  opacity: 0.38 !important;
  filter: sepia(0.4) saturate(0.7) brightness(1.08) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FIN TANDA 3 — Sistema de heroes cerrado.
   
   Familias eliminadas del DOM activo:
   · .aquo-section-hero → 0 módulos activos (agua/peso/sueño migrados)
   · .aquo-health-hero → theming añadido, estructura preservada
   
   Estado final del sistema de heroes:
   · .aqh                  → Sobre AQUO (editorial oscuro)
   · .aquo-hero--editorial → 6 módulos (Citas, Calendario, Patologías,
                              Analíticas, Informes, Salud Hub)
   · .aquo-hero--operacional → 8 módulos (Agua, Peso, Sueño, Wellness,
                                Autoexploración, Nutrición, Bucodental, Rutinas)
   · .aquo-health-hero     → 3 módulos salud especializada (compacto)
   · .status-hero          → Dashboard (propio, intocable)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   TANDA 4 — Microcanon del hero
   ───────────────────────────────────────────────────────────────────
   CSS-only. Sin cambios JS. Sin reabrir familias.
   Corrige: iconos SVG · layout Peso · fechas · date-stack Calendario
            health-hero icon · Autoexploración
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-0 — TOKENS SEMÁNTICOS DE COLOR DE HERO
   Definidos como custom properties en el container de tema.
   Usados en §T4-3, §T4-4 y §T4-6 con var() + !important.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-layout[data-theme="blue"],
.app-layout:not([data-theme]) {
  --ht-color: #0c3878;    /* hero title — navy deep */
  --hs-color: #516e8c;    /* hero sub / date — azul medio suave */
}
.app-layout[data-theme="silver"] {
  --ht-color: #18293a;    /* hero title — slate oscuro */
  --hs-color: #455869;    /* hero sub / date — slate medio */
}
.app-layout[data-theme="gold"] {
  --ht-color: #33200d;    /* hero title — marrón profundo */
  --hs-color: #786040;    /* hero sub / date — taupe cálido */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-1 — ICONOS SVG INLINE CON TÍTULO
   Problema: <img class="aquo-title-icon"> dentro de aquo-hero-title
   aparece aislado encima del texto porque el h1 no tiene flex.
   Emojis fluyen solos; SVG img no.
   Fix: :has() aplica display:flex al h1 cuando contiene img.aquo-title-icon.
   Afecta: Calendario, Citas, Wellness (+ Nutrición ya tenía fix específico).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.aquo-hero-title:has(> img.aquo-title-icon) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  line-height: 1.06 !important;
}

/* Tamaño canónico del icono SVG en hero: 30px.
   1.08em (antiguo) = ~52px a tamaño de título → excesivo e invasivo. */
.aquo-hero-title > img.aquo-title-icon {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  vertical-align: 0 !important;
  opacity: 0.80 !important;
}

/* Mobile: icono ligeramente más pequeño */
@media (max-width: 640px) {
  .aquo-hero-title > img.aquo-title-icon {
    width: 26px !important;
    height: 26px !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-2 — LAYOUT CORRECCIÓN PESO
   Problema A: aquo-section-heading no tiene flex:1, lo que provoca
   que aquo-hero-actions caiga a una fila nueva cuando la suma de
   contenidos supera el ancho del contenedor.
   Problema B: #peso-root-wrap tiene justify-content:center e
   text-align:center !important en sus acciones, lo que centra los
   nav pills en lugar de mantenerlos a la derecha.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Fix A: heading flexible — cede espacio a las acciones */
.aquo-hero--operacional .aquo-section-heading {
  flex: 1;
  min-width: 0;
}

/* Fix A: acciones no se contraen — siempre a la derecha */
.aquo-hero--operacional .aquo-hero-actions {
  flex-shrink: 0;
  align-self: flex-start;
}

/* Fix B: neutralizar centering legacy de peso */
#peso-root-wrap .aquo-hero--operacional .aquo-nav-pills {
  justify-content: flex-end !important;
}
#peso-root-wrap .aquo-hero--operacional .aquo-hero-actions > div:last-child {
  text-align: right !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hs-color, #74859a) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-3 — FECHAS UNIFICADAS EN HERO ACTIONS
   Problema: múltiples reglas legacy en líneas 9121 y 9197 con
   !important aplican colores distintos a #agua-day-label y
   #sueno-day-label: ámbar (#8d7b56) y azul primario respectivamente.
   Resultado: cada módulo tiene un color de fecha diferente.
   Fix: token --hs-color (§T4-0) aplicado con !important por encima.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#agua-day-label {
  color: var(--hs-color, #516e8c) !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#sueno-day-label {
  color: var(--hs-color, #516e8c) !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-4 — DATE-STACK EN HERO __SIDE: NEUTRALIZAR AZUL PRIMARIO
   Problema: línea 9259 aplica color:var(--primary-dark)!important
   al primer div de todo aquo-date-stack, incluyendo el que está en
   el __side del hero de Calendario ("Abril 2026" aparece en azul).
   Fix: override más específico dentro del contexto __side del hero.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* El primer div del date-stack en __side (valor/mes principal) */
.aquo-hero__side .aquo-date-stack > div:first-child {
  color: var(--hs-color, #516e8c) !important;
  font-weight: 600 !important;
}

/* La nota contextual (segundo div, descripción del módulo) */
.aquo-hero__side .aquo-date-stack > div:last-child {
  color: var(--hs-color, #516e8c) !important;
  opacity: 0.72 !important;
  font-size: 12px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-5 — AQUO-HEALTH-HERO: ICONO REDUCIDO Y PROPORCIONADO
   Problema: font-size:54px para el icono emoji es excesivo en un
   layout compacto horizontal. El icono domina sobre el copy.
   Fix: 40px desktop, 36px mobile (vs 54px/44px anteriores).
   Afecta: Salud Auditiva, Salud Sexual, Salud Visual.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.aquo-health-hero__icon {
  font-size: 40px !important;
}

@media (max-width: 860px) {
  .aquo-health-hero__icon {
    font-size: 36px !important;
  }
}

/* Title color integrado con el sistema temático */
.app-layout[data-theme="blue"] .aquo-health-hero__title,
.app-layout:not([data-theme]) .aquo-health-hero__title {
  color: var(--ht-color, #0c3878) !important;
}
.app-layout[data-theme="silver"] .aquo-health-hero__title {
  color: var(--ht-color, #18293a) !important;
}
.app-layout[data-theme="gold"] .aquo-health-hero__title {
  color: var(--ht-color, #33200d) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §T4-6 — AUTOEXPLORACIÓN: HERO SIN ACCIONES LATERALES
   El hero de autoexploración (aquo-hero--operacional) no tiene panel
   lateral ni kicker. El padding canónico 28px 30px genera demasiado
   espacio vertical para un hero solo con título+subtítulo.
   Fix: padding ligeramente reducido, heading sin restricción de ancho
   (ya no hay dos columnas en este hero).
   Resultado: hero íntimo, limpio, bien proporcionado.
   Respuesta por tema: heredada de Tanda 1 (operacional + §T4-0).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.aquo-autoexp-root .aquo-hero--operacional {
  padding: 24px 28px 22px;
}

/* El heading ocupa todo el ancho disponible (no hay __actions) */
.aquo-autoexp-root .aquo-hero__heading {
  max-width: 700px;
}

/* Responsive */
@media (max-width: 640px) {
  .aquo-autoexp-root .aquo-hero--operacional {
    padding: 20px 20px 18px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FIN TANDA 4 — Microcanon del hero
   Correcciones: 6 bloques · CSS-only · sin cambios JS
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   MINI TANDA — Analíticas · Ciclo · Mi Cuenta
   ───────────────────────────────────────────────────────────────────
   CSS-only complementario a los cambios JS de esta mini tanda.
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §MT-1 — CICLO: hero sin panel lateral
   El hero de ciclo tiene solo kicker+título+subtítulo.
   Igual que autoexploración: reducir padding del container.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Ciclo usa aquo-module-shell, por eso el selector incluye ese contexto */
#ciclo-root .aquo-hero--operacional,
#ciclo-root-wrap .aquo-hero--operacional {
  padding: 24px 28px 22px;
}

@media (max-width: 640px) {
  #ciclo-root .aquo-hero--operacional,
  #ciclo-root-wrap .aquo-hero--operacional {
    padding: 20px 20px 18px;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §MT-2 — MI CUENTA: avatar temático
   .aquo-cuenta-avatar: círculo 80×80 con color e isotipo correctos
   por tema. Blue: azul · Silver: gris frío · Gold: champán cálido.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.aquo-cuenta-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow: hidden;
}

/* Blue */
.app-layout[data-theme="blue"] .aquo-cuenta-avatar,
.app-layout:not([data-theme]) .aquo-cuenta-avatar {
  background: linear-gradient(145deg, #d4eaf8, #c0dcf2);
  border: 3px solid rgba(14, 80, 178, .18);
  box-shadow: 0 0 0 5px rgba(14, 80, 178, .06), 0 4px 16px rgba(14, 80, 178, .12);
  color: #0c3878;
}

/* Silver */
.app-layout[data-theme="silver"] .aquo-cuenta-avatar {
  background: linear-gradient(145deg, #dce1e8, #ccd3db);
  border: 3px solid rgba(80, 100, 124, .18);
  box-shadow: 0 0 0 5px rgba(80, 100, 124, .06), 0 4px 16px rgba(80, 100, 124, .12);
  color: #18293a;
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-cuenta-avatar {
  background: linear-gradient(145deg, #f0e0c0, #e4cdac);
  border: 3px solid rgba(152, 112, 34, .18);
  box-shadow: 0 0 0 5px rgba(152, 112, 34, .06), 0 4px 16px rgba(152, 112, 34, .12);
  color: #33200d;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §MT-3 — MI CUENTA: editorial hero dentro del contexto cuenta
   El panel de cuenta usa aquo-hero--editorial pero sin panel __side.
   Ajuste de padding para contenido más compacto (perfil, no módulo).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* La ruta del cuenta usa max-width:640px como shell */
div[style*="max-width:640px"] > .aquo-hero--editorial {
  padding: 24px 26px 22px;
  border-radius: 24px;
}

@media (max-width: 640px) {
  div[style*="max-width:640px"] > .aquo-hero--editorial {
    padding: 20px 20px 18px;
    border-radius: 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FIN MINI TANDA — Analíticas · Ciclo · Mi Cuenta
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIVO MI CUENTA — composición interna
   ───────────────────────────────────────────────────────────────────
   Problema 1: avatar con glow ring exterior (0 0 0 5px) + border 3px
   = 8px de decoración que crea efecto "caja dura" dentro del panel.
   Problema 2: border-top divisor hace que el panel parezca dos filas
   de tabla en lugar de una composición fluida (resuelto en JS).
   Problema 3: gap avatar↔texto insuficiente para la respiración AQUO.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Avatar: eliminar glow ring, suavizar borde, drop shadow limpio ── */

.aquo-cuenta-avatar {
  width: 72px !important;
  height: 72px !important;
  border-width: 2px !important;
}

/* Blue — sin glow ring, solo sombra suave */
.app-layout[data-theme="blue"] .aquo-cuenta-avatar,
.app-layout:not([data-theme]) .aquo-cuenta-avatar {
  box-shadow: 0 6px 18px rgba(14, 80, 178, .14) !important;
  border-color: rgba(14, 80, 178, .14) !important;
}

/* Silver */
.app-layout[data-theme="silver"] .aquo-cuenta-avatar {
  box-shadow: 0 6px 18px rgba(60, 80, 104, .14) !important;
  border-color: rgba(60, 80, 104, .14) !important;
}

/* Gold */
.app-layout[data-theme="gold"] .aquo-cuenta-avatar {
  box-shadow: 0 6px 18px rgba(120, 86, 24, .14) !important;
  border-color: rgba(120, 86, 24, .14) !important;
}

/* ── Layout: más respiración entre avatar y bloque de texto ── */

/* El __copy del hero de cuenta: más gap en la fila interna */
div[style*="max-width:640px"] .aquo-hero__copy > div[style*="display:flex"] {
  gap: 24px !important;
  align-items: center !important;
}

/* ── Nombre: peso ligeramente reducido para elegancia ── */

div[style*="max-width:640px"] .aquo-hero-title {
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIN CORRECTIVO MI CUENTA
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   REMATE MI CUENTA — composición final
   ───────────────────────────────────────────────────────────────────
   Cambio estructural: editorial __copy (identidad) + __side (acciones).
   Una sola composición horizontal. Sin stacking vertical. Sin inner card.
   ═══════════════════════════════════════════════════════════════════ */

/* ── aquo-hero__copy como fila horizontal en el contexto cuenta ── */
.aquo-cuenta-identity {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;
}

/* ── Info block: sin padding innecesario ── */
.aquo-cuenta-info {
  flex: 1;
  min-width: 0;
}

/* ── Avatar: sin borde visible — la forma la da border-radius:50% ── */

/* Eliminar borde para todos los temas — el círculo no necesita ring */
.app-layout[data-theme="blue"] .aquo-cuenta-avatar,
.app-layout:not([data-theme]) .aquo-cuenta-avatar,
.app-layout[data-theme="silver"] .aquo-cuenta-avatar,
.app-layout[data-theme="gold"] .aquo-cuenta-avatar {
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10) !important;
}

/* ── __side: botones en columna, ancho mínimo 150px ── */

div[style*="max-width:640px"] .aquo-hero--editorial .aquo-hero__side {
  min-width: 150px;
  gap: 8px;
}

/* ── Editorial hero en cuenta: padding compacto coherente ── */
div[style*="max-width:640px"] > .aquo-hero--editorial {
  padding: 22px 24px !important;
  border-radius: 22px !important;
}

/* Mobile: stack vertical cuando el panel se estrecha */
@media (max-width: 560px) {
  .aquo-cuenta-identity {
    flex-wrap: wrap !important;
  }
  div[style*="max-width:640px"] .aquo-hero--editorial .aquo-hero__side {
    min-width: 100%;
    flex-direction: row;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIN REMATE MI CUENTA
   ═══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   TANDA 1 — FUNDACIÓN CSS DE INTERIORES AQUO
   Append-only. Lenguaje visual común para módulos (Agua · Sueño · Peso · ...)
   No reemplaza .card ni .stat-card; introduce primitivas AQUO interiores.
   Versión: v68.10-tanda2-interior
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── aquo-block: contenedor interior premium ─────────────────────────────── */
.aquo-block{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(182,205,230,.38);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:0 10px 24px rgba(31,89,151,.045), 0 1px 0 rgba(255,255,255,.7) inset;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.aquo-block + .aquo-block{ margin-top:16px; }
.aquo-block--soft{
  background:linear-gradient(180deg,rgba(248,251,255,.92) 0%,rgba(255,255,255,.96) 100%);
}
.aquo-block--flat{
  box-shadow:none;
  border-color:rgba(182,205,230,.22);
}
.aquo-block--inset{ padding:16px 18px; border-radius:14px; }

/* Adaptación por tema */
.app-layout[data-theme="silver"] .aquo-block{
  border-color:rgba(170,170,170,.22);
  box-shadow:0 10px 24px rgba(90,90,90,.05);
}
.app-layout[data-theme="gold"] .aquo-block{
  border-color:rgba(201,168,76,.20);
  box-shadow:0 10px 24px rgba(155,122,49,.06);
}

/* ── aquo-block-header: cabecera consistente del bloque interior ────────── */
.aquo-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding-bottom:10px;
  border-bottom:1px solid rgba(182,205,230,.28);
}
.aquo-block-header__title{
  font-family:var(--font-display, inherit);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--primary-dark, #1F5997);
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.aquo-block-header__kicker{
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-muted, #8a9aad);
}
.aquo-block-header__meta{
  font-size:12px;
  color:var(--text-secondary, #607589);
  font-weight:600;
}
.aquo-block-header__actions{
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.app-layout[data-theme="silver"] .aquo-block-header__title{ color:#4A4A4A; }
.app-layout[data-theme="gold"]   .aquo-block-header__title{ color:#9B7A31; }

/* ── aquo-stat-row: fila de micro-stats dentro de un bloque ─────────────── */
.aquo-stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
}
.aquo-stat-row__item{
  background:rgba(248,251,255,.75);
  border:1px solid rgba(182,205,230,.32);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.aquo-stat-row__label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-muted, #8a9aad);
  display:flex;
  align-items:center;
  gap:6px;
}
.aquo-stat-row__value{
  font-family:var(--font-display, inherit);
  font-size:22px;
  font-weight:800;
  color:var(--primary-dark, #1F5997);
  line-height:1.1;
  letter-spacing:-.01em;
}
.aquo-stat-row__hint{
  font-size:11px;
  color:var(--text-secondary, #607589);
  margin-top:2px;
}
.app-layout[data-theme="silver"] .aquo-stat-row__value{ color:#4A4A4A; }
.app-layout[data-theme="gold"]   .aquo-stat-row__value{ color:#9B7A31; }

/* ── aquo-record-row: fila de histórico/registro (Agua · Sueño · Peso) ──── */
.aquo-record-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  background:#ffffff;
  border:1px solid rgba(182,205,230,.28);
  border-radius:14px;
  text-align:left;
  width:100%;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font:inherit;
  color:inherit;
}
.aquo-record-row:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(31,89,151,.08);
  border-color:rgba(125,170,220,.42);
}
.aquo-record-row[disabled],
.aquo-record-row.is-static{
  cursor:default;
}
.aquo-record-row.is-static:hover{ transform:none; box-shadow:none; border-color:rgba(182,205,230,.28); }

.aquo-record-row__date{
  font-size:12px;
  font-weight:700;
  color:var(--primary-dark, #1F5997);
  min-width:92px;
  flex-shrink:0;
}
.aquo-record-row__main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.aquo-record-row__primary{
  font-size:13px;
  font-weight:700;
  color:var(--text-dark, #2A3A4E);
  line-height:1.3;
}
.aquo-record-row__secondary{
  font-size:12px;
  color:var(--text-secondary, #607589);
  line-height:1.3;
}
.aquo-record-row__meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex-shrink:0;
  min-width:58px;
}
.aquo-record-row__meta-value{
  font-size:13px;
  font-weight:800;
  color:var(--text-dark, #2A3A4E);
}
.aquo-record-row__meta-sub{
  font-size:11.5px;
  font-weight:700;
  color:var(--text-secondary, #607589);
}
.app-layout[data-theme="silver"] .aquo-record-row__date{ color:#4A4A4A; }
.app-layout[data-theme="gold"]   .aquo-record-row__date{ color:#9B7A31; }

/* Variantes tonales */
.aquo-record-row--ok{ border-color:rgba(67,160,71,.22); }
.aquo-record-row--ok .aquo-record-row__meta-sub{ color:#2E7D32; }
.aquo-record-row--warn{ border-color:rgba(255,167,38,.24); }
.aquo-record-row--warn .aquo-record-row__meta-sub{ color:#B26A00; }

/* Lista de records */
.aquo-record-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ── aquo-form-section: grupo de formulario dentro de bloques ───────────── */
.aquo-form-section{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.aquo-form-section__label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted, #8a9aad);
  margin:0 0 2px;
}
.aquo-form-section__row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.aquo-form-section__hint{
  font-size:12px;
  color:var(--text-secondary, #607589);
  font-style:italic;
  margin:0;
}

/* ── aquo-chip: sistema de chips coherente (complementa lo ya existente) ── */
.aquo-chip--solid{
  background:var(--primary-pale, #E3F2FD);
  border-color:rgba(125,170,220,.30);
}
.aquo-chip--sm{ padding:6px 10px; font-size:11.5px; }
.aquo-chip--lg{ padding:11px 16px; font-size:14px; }
.aquo-chip--icon{ gap:6px; }
.aquo-chip--muted{
  background:rgba(248,251,255,.8);
  color:var(--text-secondary, #607589);
  border-color:rgba(182,205,230,.30);
}
.aquo-chip-stack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ── aquo-empty-state mini: consolidación (alias estable) ───────────────── */
.aquo-empty-state--mini{
  padding:var(--space-6, 24px) var(--space-4, 16px);
}
.aquo-empty-state--mini .aquo-empty-state__icon{ font-size:28px; opacity:.7; }
.aquo-empty-state--mini .aquo-empty-state__title{ font-size:var(--text-sm,13px); }
.aquo-empty-state--mini .aquo-empty-state__sub{ font-size:12px; max-width:260px; }

/* ── aquo-info-block: bloque informativo (mensaje contextual, tip, etc.) ── */
.aquo-info-block{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px 12px 16px;
  border-radius:0 12px 12px 0;
  border-left:3px solid var(--primary, #2196F3);
  background:rgba(33,150,243,.06);
}
.aquo-info-block__icon{
  font-size:16px;
  line-height:1.2;
  flex-shrink:0;
  margin-top:1px;
}
.aquo-info-block__body{
  flex:1;
  min-width:0;
}
.aquo-info-block__title{
  font-size:13px;
  font-weight:700;
  color:var(--primary-dark, #1F5997);
  margin:0 0 2px;
}
.aquo-info-block__text{
  font-size:13px;
  color:var(--text-mid, #3a4a5e);
  line-height:1.55;
  margin:0;
}
.aquo-info-block--success{ border-left-color:#43A047; background:rgba(67,160,71,.07); }
.aquo-info-block--success .aquo-info-block__title{ color:#2E7D32; }
.aquo-info-block--warn{ border-left-color:#FFA726; background:rgba(255,167,38,.09); }
.aquo-info-block--warn .aquo-info-block__title{ color:#B26A00; }
.aquo-info-block--gold{ border-left-color:#C9A84C; background:rgba(201,168,76,.07); }
.aquo-info-block--gold .aquo-info-block__title{ color:#9B7A31; }

.app-layout[data-theme="silver"] .aquo-info-block{
  border-left-color:#8a8a8a;
  background:rgba(138,138,138,.07);
}
.app-layout[data-theme="silver"] .aquo-info-block__title{ color:#4A4A4A; }
.app-layout[data-theme="gold"] .aquo-info-block{
  border-left-color:#C9A84C;
  background:rgba(201,168,76,.07);
}
.app-layout[data-theme="gold"] .aquo-info-block__title{ color:#9B7A31; }

/* ── Responsive Tanda 1 ─────────────────────────────────────────────────── */
@media (max-width: 640px){
  .aquo-block{ padding:16px 16px; border-radius:16px; }
  .aquo-block-header__title{ font-size:14px; }
  .aquo-stat-row{ grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; }
  .aquo-stat-row__item{ padding:10px 12px; }
  .aquo-stat-row__value{ font-size:19px; }
  .aquo-record-row{ padding:10px 12px; gap:10px; }
  .aquo-record-row__date{ min-width:78px; font-size:11.5px; }
  .aquo-record-row__meta{ min-width:52px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIN TANDA 1
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── sidebar-version microfix — legible en Blue / Silver / Gold ─────────────
   El rule original (l. 14627) usa rgba(148,163,184,.70) que pierde contraste
   en el sidebar crema del tema Gold. Se reescribe al final por source-order.
   ─────────────────────────────────────────────────────────────────────────── */
.sidebar-version {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════
   AQUO™ — NUTRICIÓN INTELIGENTE NI-1
   Insight cards · Barchart semanal · Anillo de macros
   Append-only — no editar reglas anteriores
   ══════════════════════════════════════════════════════════════ */

/* ── Insight card ────────────────────────────────────────────── */
.aquo-nutr-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
}
.aquo-nutr-insight__icon {
  font-size: 21px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 1px;
}
.aquo-nutr-insight__body {
  flex: 1;
  min-width: 0;
}
.aquo-nutr-insight__text {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px;
  line-height: 1.55;
}
.aquo-nutr-insight:last-child .aquo-nutr-insight__text {
  margin-bottom: 0;
}
.aquo-nutr-insight__cta {
  font-size: 11px;
  padding: 5px 13px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-block;
  margin-top: 2px;
  transition: opacity .15s;
}
.aquo-nutr-insight__cta:hover { opacity: .82; }

/* ── Barchart semanal ────────────────────────────────────────── */
.aquo-nutr-semana { overflow: visible; }

.aquo-nutr-regularidad {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-pale);
  color: var(--text-secondary);
  white-space: nowrap;
}
.aquo-nutr-regularidad--ok {
  background: #EAF7EE;
  color: #2E7D32;
}

/* ── Anillo de macros ────────────────────────────────────────── */
.aquo-nutr-macros { overflow: visible; }
.aquo-macro-ring  { flex-shrink: 0; }

.aquo-macro-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary);
}
.aquo-macro-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.aquo-macro-row strong {
  color: var(--text-dark);
  font-size: 13px;
  min-width: 34px;
  text-align: right;
}
.aquo-macro-row > span:last-child {
  color: var(--text-muted);
  min-width: 30px;
  text-align: right;
  font-size: 11px;
}
.aquo-macro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — NUTRICIÓN INTELIGENTE NI-3
   Quick actions · Recientes · Botón foto placeholder
   ══════════════════════════════════════════════════════════════ */

/* Quick action chips */
.aquo-nutr-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--primary-pale);
  background: white;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.aquo-nutr-quick-chip:hover,
.aquo-nutr-quick-chip:active {
  background: var(--primary-mist);
  border-color: var(--primary-light);
  color: var(--primary-dark);
}

/* Recientes chips */
.aquo-nutr-recent-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--primary-pale);
  background: var(--primary-mist);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.aquo-nutr-recent-chip:hover {
  background: var(--primary-pale);
  border-color: var(--primary-light);
}

/* Botón foto — placeholder NI-4, visualmente suave y no activo */
.aquo-nutr-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1.5px dashed var(--primary-pale);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s;
}
.aquo-nutr-photo-btn:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — NI-4: Modal de registro por foto
   ══════════════════════════════════════════════════════════════ */

/* Overlay completo */
.aquo-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.aquo-photo-modal--open {
  opacity: 1;
  pointer-events: all;
}
.aquo-photo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* Sheet bottom-drawer */
.aquo-photo-modal__sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--card-bg, #fff);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(32px);
  transition: transform .25s cubic-bezier(.32,1,.42,1);
}
.aquo-photo-modal--open .aquo-photo-modal__sheet {
  transform: translateY(0);
}

/* Header del sheet */
.aquo-photo-modal__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--primary-pale);
}

/* Spinner de análisis */
.aquo-photo-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--primary-pale);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto;
  animation: aquo-spin .7s linear infinite;
}
@keyframes aquo-spin { to { transform: rotate(360deg); } }

/* Botón foto activado */
.aquo-nutr-photo-btn--active {
  border-style: solid;
  opacity: 1;
  color: var(--primary-dark);
  border-color: var(--primary-light);
}
.aquo-nutr-photo-btn--active:hover {
  background: var(--primary-mist);
}

/* ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — Polish Cross v1: Nutrición + Despensa
   Refinamientos visuales acumulativos
   ══════════════════════════════════════════════════════════════ */

/* ── Quick action chips: más compactos en móvil ──────────────── */
.aquo-nutr-quick-chip {
  padding: 5px 11px;
  font-size: 11.5px;
}
@media (max-width: 380px) {
  .aquo-nutr-quick-chip span:last-child { display: none; }
  .aquo-nutr-quick-chip { padding: 5px 9px; }
}

/* ── Botón foto: más integrado, mismo alto que btn-sm ─────────── */
.aquo-nutr-photo-btn--active {
  padding: 5px 12px;
  font-size: 12px;
  gap: 4px;
  height: auto;
}

/* ── Despensa: header de "Mis ingredientes" más limpio ─────────── */
.aquo-despensa-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.aquo-despensa-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Modal de revisión: product rows más limpios ──────────────── */
.di-product-row input.di-nombre {
  transition: border-color .12s, box-shadow .12s;
}
.di-product-row input.di-nombre:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 2px var(--primary-pale);
  outline: none;
}

/* ── Formulario del Diario: etiquetas uniformes ───────────────── */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: .01em;
}

/* ── Entradas del día: agrupación por tipo más clara ─────────── */
.nutr-tipo-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  background: var(--primary-mist);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Botones de acción secundaria en Despensa ────────────────── */
.aquo-despensa-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1.5px solid var(--primary-pale);
  background: white;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.aquo-despensa-import-btn:hover {
  background: var(--primary-mist);
  border-color: var(--primary-light);
  color: var(--primary-dark);
}

/* ── Recientes: separador visual sutil ───────────────────────── */
.aquo-nutr-recientes-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--primary-pale);
}

/* ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   AQUO™ — Dashboard Energy Card (NI-home)
   Mini resumen energético del día: Nutrición × Ejercicio
   ══════════════════════════════════════════════════════════════ */

.home-energy-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--primary-pale);
  border-radius: 18px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s;
}
.home-energy-card:hover {
  box-shadow: 0 2px 16px rgba(33,150,243,.10);
}

.home-energy-card__hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.home-energy-card__pct {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.home-energy-card__metrics {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.home-energy-card__metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-energy-card__num {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}
.home-energy-card__metric--quem .home-energy-card__num { color: #E65100; font-size: 18px; }
.home-energy-card__metric--neto .home-energy-card__num { color: var(--primary-dark); font-size: 18px; }
.home-energy-card__metric--obj  .home-energy-card__num { color: var(--text-muted); font-size: 16px; }
.home-energy-card__lbl {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.home-energy-card__bar-wrap {
  height: 4px;
  border-radius: 999px;
  background: var(--primary-pale);
  overflow: hidden;
}
.home-energy-card__bar {
  height: 100%;
  border-radius: 999px;
  transition: width .35s ease;
  max-width: 100%;
}

.home-energy-card__frase {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}
.home-energy-card__empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.home-energy-card__cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════════════ */