/* ==========================================================================
   SEIKO HABIT TRACKER - DESIGN SYSTEM & STYLES
   ========================================================================== */

:root,
[data-theme="beige"],
[data-theme="light"] {
  /* 1. MODO BEIGE CÁLIDO (Atmósfera Natural Zen) */
  --bg-primary: #EAD8C8;      /* Fondo exterior arena beige cálido y apacible */
  --bg-secondary: #F7E7DA;    /* Fondo tarjetas y paneles lino beige cálido */
  --text-main: #2C1F32;       /* Ciruela carbón profundo, nítido y descansado */
  --text-muted: #826E86;      /* Lavanda suave apagada */
  --white: #F7E7DA;           /* Superficies en tono beige cálido sin reflejo blanco */
  
  --accent-pink: #EC407A;
  --accent-purple: #9C27B0;
  --accent-orange: #FF7043;
  --accent-gold: #D7A15C;
  
  /* Shadow & Borders Warm Tone */
  --shadow-soft: 0 16px 36px rgba(165, 128, 108, 0.24);
  --shadow-card: 0 10px 24px rgba(165, 128, 108, 0.18);
  --shadow-glow: 0 8px 22px rgba(236, 64, 122, 0.22);
  --border-glass: 1px solid rgba(212, 186, 170, 0.85);
  
  /* Habit Cards System (Warm Peach/Beige-Infused Pastels) */
  --purple-bg: #EEDAF1;
  --purple-box: #E2C9E7;
  --purple-accent: #9C27B0;
  --purple-text: #2C1F32;
  --purple-icon: #6A2C7A;

  --teal-bg: #D8EFEA;
  --teal-box: #C2E4DC;
  --teal-accent: #00897B;
  --teal-text: #2C1F32;
  --teal-icon: #13695F;

  --orange-bg: #F8DCD0;
  --orange-box: #F2C8B6;
  --orange-accent: #FF7043;
  --orange-text: #2C1F32;
  --orange-icon: #3F2B50;

  --pink-bg: #F6D8E4;
  --pink-box: #ECC0D2;
  --pink-accent: #EC407A;
  --pink-text: #2C1F32;
  --pink-icon: #4B2754;

  --blue-bg: #DBE8F5;
  --blue-box: #C4DAEE;
  --blue-accent: #1E88E5;
  --blue-text: #2C1F32;
  --blue-icon: #154D82;

  --amber-bg: #F8E7C6;
  --amber-box: #F1D7A4;
  --amber-accent: #FFA000;
  --amber-text: #2C1F32;
  --amber-icon: #7A540E;

  --indigo-bg: #E6DCF5;
  --indigo-box: #D3C2ED;
  --indigo-accent: #673AB7;
  --indigo-text: #2C1F32;
  --indigo-icon: #4E2C85;

  --red-bg: #F8D5D8;
  --red-box: #EEBAC0;
  --red-accent: #E53935;
  --red-text: #2C1F32;
  --red-icon: #8A2225;

  --green-bg: #DBEEDF;
  --green-box: #C4E4CA;
  --green-accent: #43A047;
  --green-text: #2C1F32;
  --green-icon: #236928;

  --cyan-bg: #D7EFF2;
  --cyan-box: #BDE4EA;
  --cyan-accent: #00ACC1;
  --cyan-text: #2C1F32;
  --cyan-icon: #12606C;
  
  --grey-bg: #E7D1C0;
  --grey-box: #D5BCA9;
  --grey-accent: #A58E7E;
  --grey-text: #5A473C;
  
  /* Constants */
  --font-family: 'Outfit', sans-serif;
  --border-radius-xl: 32px;
  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-sm: 10px;
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. MODO BLANCO APERLADO (Pearl White & Soft Pastel - Fiel a la Imagen de Referencia) */
[data-theme="pearl"],
[data-theme="white"] {
  --bg-primary: #FAF5EE;      /* Fondo exterior marfil aperlado pastel, cálido y sedoso */
  --bg-secondary: #FFFDF9;    /* Paneles y tarjetas marfil puro pastel */
  --text-main: #2F213A;       /* Ciruela berenjena suave y nítido */
  --text-muted: #8E7D9A;      /* Lavanda suave apagada */
  --white: #FFFFFF;           /* Blanco puro de tarjetas */
  
  --accent-pink: #EC5E8A;
  --accent-purple: #9570C8;
  --accent-orange: #F5A78E;
  --accent-gold: #E5A338;
  
  /* Shadow & Borders Pearl */
  --shadow-soft: 0 16px 36px rgba(180, 155, 145, 0.12);
  --shadow-card: 0 8px 24px rgba(180, 155, 145, 0.08);
  --shadow-glow: 0 8px 24px rgba(236, 94, 138, 0.16);
  --border-glass: 1px solid rgba(230, 218, 210, 0.65);
  
  /* Habit Cards System (Pasteles Delicados Fieles a la Referencia) */
  --purple-bg: #F3EBF9;
  --purple-box: #E4D5F2;
  --purple-accent: #683E8C;
  --purple-text: #2F213A;
  --purple-icon: #5C367A;

  --teal-bg: #E3F3F1;
  --teal-box: #C8E7E3;
  --teal-accent: #2A837E;
  --teal-text: #2F213A;
  --teal-icon: #1B6560;

  --orange-bg: #FDF1E7;
  --orange-box: #F6DCBF;
  --orange-accent: #E07048;
  --orange-text: #2F213A;
  --orange-icon: #442E54;

  --pink-bg: #FDE8F0;
  --pink-box: #F9D0DF;
  --pink-accent: #E55C8A;
  --pink-text: #2F213A;
  --pink-icon: #4A2855;

  --blue-bg: #EAF3FC;
  --blue-box: #CEE3F9;
  --blue-accent: #3A82D0;
  --blue-text: #2F213A;
  --blue-icon: #1E5186;

  --amber-bg: #FEF7E6;
  --amber-box: #FCE6BA;
  --amber-accent: #D98C15;
  --amber-text: #2F213A;
  --amber-icon: #6F4A0C;

  --indigo-bg: #F0EAF8;
  --indigo-box: #DDD0F3;
  --indigo-accent: #784DB8;
  --indigo-text: #2F213A;
  --indigo-icon: #522E8A;

  --red-bg: #FDEAEB;
  --red-box: #F8CDD0;
  --red-accent: #D9484D;
  --red-text: #2F213A;
  --red-icon: #7A1C20;

  --green-bg: #EDF7EE;
  --green-box: #D4EEDB;
  --green-accent: #3C964B;
  --green-text: #2F213A;
  --green-icon: #1E5E2A;

  --cyan-bg: #E4F6F8;
  --cyan-box: #C6EEF3;
  --cyan-accent: #179EAE;
  --cyan-text: #2F213A;
  --cyan-icon: #115F6A;
  
  --grey-bg: #EFE8E2;
  --grey-box: #DDD1C7;
  --grey-accent: #8E7A6E;
  --grey-text: #4E3E4F;
}

/* 3. MODO OSCURO (Deep Zen & Neon Ambient Glow) */
[data-theme="dark"] {
  --bg-primary: #121016;
  --bg-secondary: #1B1722;
  --text-main: #F1EDFA;
  --text-muted: #9E99AC;
  --white: #1D1926;
  
  --shadow-soft: 0 15px 35px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.2);
  --border-glass: 1px solid rgba(255, 255, 255, 0.05);
  
  /* Habit Cards System - Dark Mode Adjustment */
  --purple-bg: #2C1E3A;
  --purple-accent: #9575CD;
  --purple-text: #F1EDFA;
  --purple-icon: #B39DDB;

  --teal-bg: #1B3533;
  --teal-accent: #4DB6AC;
  --teal-text: #F1EDFA;
  --teal-icon: #80CBC4;

  --orange-bg: #3E2F20;
  --orange-accent: #FFB74D;
  --orange-text: #F1EDFA;
  --orange-icon: #FFCC80;

  --pink-bg: #3C1F2C;
  --pink-accent: #F06292;
  --pink-text: #F1EDFA;
  --pink-icon: #F48FB1;

  --blue-bg: #1A283B;
  --blue-accent: #42A5F5;
  --blue-text: #F1EDFA;
  --blue-icon: #90CAF9;

  --amber-bg: #3B3016;
  --amber-accent: #FFCA28;
  --amber-text: #F1EDFA;
  --amber-icon: #FFE082;

  --indigo-bg: #251B3D;
  --indigo-accent: #7C4DFF;
  --indigo-text: #F1EDFA;
  --indigo-icon: #B388FF;

  --red-bg: #381A1F;
  --red-accent: #EF5350;
  --red-text: #F1EDFA;
  --red-icon: #E57373;

  --green-bg: #1A3525;
  --green-accent: #66BB6A;
  --green-text: #F1EDFA;
  --green-icon: #A5D6A7;

  --cyan-bg: #15323A;
  --cyan-accent: #26C6DA;
  --cyan-text: #F1EDFA;
  --cyan-icon: #80DEEA;
  
  --grey-bg: #2B2635;
  --grey-accent: #9E9E9E;
  --grey-text: #EEEEEE;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

/* App Layout Wrap */
.app-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Responsive Containers */
.app-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 100px 24px; /* Space for mobile navigation at bottom */
  gap: 40px;
  flex: 1;
}

/* Main content wrapper */
.main-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   ⏰ BARRA SUPERIOR GLOBAL (LOGO + RELOJ)
   ========================================================================== */

.global-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px; /* Un poco más de margen lateral */
  background: transparent; /* Fondo completamente transparente */
  position: sticky;
  top: 0;
  z-index: 1000; /* Siempre encima de todo */
  width: 100%;
  pointer-events: none; /* Permite hacer clic "a través" de la barra en el espacio vacío */
}

/* Reactivar clics y dar sombra para legibilidad sobre el contenido que pasa por debajo */
.top-bar-left, 
.seiko-clock-horizontal, 
.top-bar-right {
  pointer-events: auto;
  filter: drop-shadow(0 4px 12px rgba(255,255,255,0.7)); /* Ayuda a que se lea cuando scrolleas sobre otros elementos */
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 16px; /* Más separación logo-texto */
  cursor: pointer;
}

.top-bar-title {
  font-size: 28px; /* Más grande (antes 24) */
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #4A148C 0%, #EC407A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Quick Sync & Version Refresh Button (Authentic Japanese Sakura 🌸) */
.quick-sync-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.quick-sync-btn:hover {
  transform: scale(1.15) rotate(12deg);
  box-shadow: 0 8px 22px rgba(236, 64, 122, 0.38);
  border-color: rgba(236, 64, 122, 0.5);
}

.quick-sync-btn:active {
  transform: scale(0.9) rotate(-10deg);
}

.sakura-sync-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(236, 64, 122, 0.35));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  user-select: none;
}

.quick-sync-btn.syncing {
  border-color: rgba(236, 64, 122, 0.8);
  box-shadow: 0 0 24px rgba(236, 64, 122, 0.5);
}

.quick-sync-btn.syncing .sakura-sync-img {
  animation: sakuraBloomAndSpin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sakuraBloomAndSpin {
  0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 2px 6px rgba(236, 64, 122, 0.35));
  }
  30% {
    transform: rotate(140deg) scale(1.4);
    filter: drop-shadow(0 0 16px rgba(236, 64, 122, 0.85)) drop-shadow(0 0 6px #FFFFFF);
  }
  65% {
    transform: rotate(290deg) scale(0.9);
    filter: drop-shadow(0 0 10px rgba(236, 64, 122, 0.6));
  }
  85% {
    transform: rotate(375deg) scale(1.15);
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: drop-shadow(0 2px 6px rgba(236, 64, 122, 0.35));
  }
}

.sakura-petal-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  font-size: 14px;
  line-height: 1;
  user-select: none;
  animation: floatSakuraPetal 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes floatSakuraPetal {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.4), calc(var(--ty) + 25px)) scale(0.4) rotate(calc(var(--rot) * 1.5));
  }
}

/* ---- Reloj Horizontal en Barra Superior ---- */
.seiko-clock-horizontal {
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Hora grande con gradiente — Tema Pearl (igual a imagen de referencia) */
.clock-time-display {
  font-size: 3.4rem; /* MUCHO más grande (antes 2.2) */
  font-weight: 900;
  letter-spacing: -1.5px;
  background: linear-gradient(155deg, #B39DDB 0%, #F0A0B5 50%, #F9AB74 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* A.M./P.M. con mismo degradado */
.clock-ampm-display {
  font-size: 1.3rem; /* Más grande */
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(155deg, #B39DDB 0%, #F0A0B5 50%, #F9AB74 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.clock-date-row-horiz {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 2px solid rgba(0,0,0,0.1); /* Separador un poco más grueso */
}

.clock-date-display {
  font-size: 18px; /* Más grande (antes 15) */
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.clock-dot-pink {
  font-size: 10px;
  color: #EC407A;
  line-height: 1;
}

.clock-dot-blue {
  font-size: 10px;
  color: #7986CB;
  line-height: 1;
}

/* ==========================================================================
   INTERCAMBIO DE DISEÑO (BARRA SUPERIOR VS MENÚ LATERAL)
   ========================================================================== */

/* Por defecto (Modo Barra Superior) */
.sidebar-mode-only {
  display: none !important;
}

/* Modo Menú Lateral (Aplicado mediante JS con la clase .layout-sidebar en body) */
@media (min-width: 901px) {
  body.layout-sidebar .topbar-mode-only {
    display: none !important;
  }
  
  body.layout-sidebar .sidebar-mode-only {
    display: flex !important;
  }
  
  body.layout-sidebar .sidebar-brand-header {
    justify-content: space-between !important;
  }
  
  /* Ajustar la posición del sidebar si no hay contenido en la barra superior izquierda/centro */
  body.layout-sidebar .desktop-sidebar {
    top: 40px !important;
  }
}

/* ---- Tema: Beige Cálido ---- */
[data-theme="beige"] .clock-time-display,
[data-theme="beige"] .clock-ampm-display {
  background: linear-gradient(135deg, #FFD54F 0%, #F06292 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="beige"] .clock-dot-pink { color: #F06292; }
[data-theme="beige"] .clock-dot-blue { color: #FFB74D; }
[data-theme="beige"] .global-top-bar { background: transparent; }
[data-theme="beige"] .clock-date-row-horiz { border-left-color: rgba(0,0,0,0.1); }
[data-theme="beige"] .top-bar-left, 
[data-theme="beige"] .seiko-clock-horizontal, 
[data-theme="beige"] .top-bar-right {
  filter: drop-shadow(0 4px 12px rgba(255, 253, 240, 0.8));
}

/* ---- Tema: Modo Oscuro ---- */
[data-theme="dark"] .clock-time-display,
[data-theme="dark"] .clock-ampm-display {
  background: linear-gradient(135deg, #40E0D0 0%, #E040FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .clock-date-display { color: rgba(255,255,255,0.8); }
[data-theme="dark"] .clock-dot-pink { color: #E040FB; }
[data-theme="dark"] .clock-dot-blue { color: #40E0D0; }
[data-theme="dark"] .global-top-bar { background: transparent; }
[data-theme="dark"] .clock-date-row-horiz { border-left-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .top-bar-left, 
[data-theme="dark"] .seiko-clock-horizontal, 
[data-theme="dark"] .top-bar-right {
  filter: drop-shadow(0 4px 12px rgba(18,18,18,0.9)); /* Sombra oscura para legibilidad en tema oscuro */
}

/* ==========================================================================
   RELOJ LATERAL (DESKTOP)
   ========================================================================== */
.seiko-clock-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 16px;
  padding-left: 6px;
  width: 100%;
}

.seiko-clock-widget .clock-main-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.seiko-clock-widget .clock-time-display {
  line-height: 1;
}

.seiko-clock-widget .clock-ampm-display {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.seiko-clock-widget .clock-date-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}

/* ==========================================================================
   NAVIGATION (DESKTOP SIDEBAR)
   ========================================================================== */

/* Desktop Sidebar (Floating layout to the right of main content - 100% Estática, Inmóvil y Firme) */
.desktop-sidebar {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  flex-shrink: 0 !important;
  background-color: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 20px 16px;
  box-shadow: var(--shadow-soft);
  height: fit-content;
  max-height: calc(100vh - 40px); /* Nunca desborda la pantalla del monitor */
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: var(--border-glass);
  transform: none !important;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.desktop-sidebar.collapsed {
  padding: 16px 14px;
  gap: 10px;
}

.sidebar-top {
  width: 100%;
  transform: none !important;
}



.sidebar-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 6px;
  user-select: none;
  transform: none !important;
}

.sidebar-brand-left {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--border-radius-md);
  transition: background-color 0.2s ease;
  transform: none !important;
}

.sidebar-brand-left:hover {
  background-color: var(--bg-primary);
  transform: none !important;
}

.sidebar-toggle-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-purple);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  border: 1px solid rgba(212, 186, 170, 0.4);
  cursor: pointer;
  outline: none;
  transform: none !important;
}

[data-theme="dark"] .sidebar-toggle-badge {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-toggle-badge:hover {
  background-color: var(--purple-bg);
  box-shadow: 0 2px 8px rgba(126, 87, 194, 0.2);
  transform: none !important;
}

.sidebar-toggle-badge i {
  width: 17px;
  height: 17px;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.desktop-sidebar.collapsed .sidebar-toggle-badge i {
  transform: rotate(0deg);
}

.desktop-sidebar:not(.collapsed) .sidebar-toggle-badge i {
  transform: rotate(180deg);
}

/* Collapsible Nav Container */
.sidebar-nav-collapsible {
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  width: 100%;
  min-height: 0; /* Permite que el flexbox calcule el scroll correctamente */
  transform: none !important;
}

.desktop-sidebar.collapsed .sidebar-nav-collapsible {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible {
  /* Se adapta dinámicamente a la pantalla disponible */
  flex: 1 1 auto;
  max-height: calc(100vh - 250px);
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 64, 122, 0.6) rgba(0, 0, 0, 0.03);
}

/* Modo compacto: activado desde Configuración */
.desktop-sidebar.sidebar-compact:not(.collapsed) .sidebar-nav-collapsible {
  max-height: 300px;
}


/* Scrollbar WebKit (Chrome, Safari, Edge) */
.desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible::-webkit-scrollbar {
  width: 7px; /* Más ancha para fácil visibilidad y arrastre */
}

.desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(236, 64, 122, 0.65) 0%,
    rgba(126, 87, 194, 0.65) 100%
  );
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  min-height: 32px;
}

.desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(236, 64, 122, 0.9) 0%,
    rgba(126, 87, 194, 0.9) 100%
  );
}

/* Dark mode scrollbar */
[data-theme="dark"] .desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .desktop-sidebar:not(.collapsed) .sidebar-nav-collapsible::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(236, 100, 160, 0.75) 0%,
    rgba(160, 120, 220, 0.75) 100%
  );
  border-color: rgba(255, 255, 255, 0.12);
}



.seiko-logo-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0px 4px 14px rgba(236, 64, 122, 0.3)) drop-shadow(0px 2px 6px rgba(126, 87, 194, 0.2));
  transform: none !important;
}

.sidebar-logo-img {
  width: 58px !important;
  height: 58px !important;
  transform: none !important;
}

.mobile-logo-img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
  transform: none !important;
}

/* ==========================================================================
   ANIMACIÓN 'ENSŌ CENTER SPIN' (Giro 360° Continuo en Todos los Temas)
   ========================================================================== */

/* Rotación continua sobre su eje en 360° */
@keyframes ensoPureCenterSpin {
  0% {
    transform: rotate(8deg);
    filter: drop-shadow(0px 3px 12px rgba(236, 64, 122, 0.28)) drop-shadow(0px 1px 5px rgba(126, 87, 194, 0.18));
  }
  45% {
    filter: drop-shadow(0px 0px 18px rgba(236, 64, 122, 0.88)) 
            drop-shadow(0px 0px 28px rgba(255, 112, 67, 0.6)) 
            drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.65));
  }
  100% {
    transform: rotate(368deg);
    filter: drop-shadow(0px 3px 12px rgba(236, 64, 122, 0.28)) drop-shadow(0px 1px 5px rgba(126, 87, 194, 0.18));
  }
}

/* ==========================================================================
   SISTEMA DE ANIMACIÓN ENSŌ ZEN (Giro 360° Hacia la Izquierda - Visible y Elegante)
   ========================================================================== */

/* Contenedor del logo para efectos de ondas concéntricas */
.enso-logo-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Onda Zen Concéntrica (Ripple Wave) */
.enso-ripple-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  border: 1.5px solid rgba(236, 64, 122, 0.35);
  box-shadow: 0 0 12px rgba(236, 64, 122, 0.25);
  z-index: 0;
}

[data-theme="dark"] .enso-ripple-wave {
  border-color: rgba(255, 77, 136, 0.55);
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.5), inset 0 0 8px rgba(255, 77, 136, 0.3);
}

.draw-enso .enso-ripple-wave,
.logo-animating .enso-ripple-wave {
  animation: ensoRippleExpand 1.15s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

@keyframes ensoRippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.65);
    opacity: 0.85;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.55);
    opacity: 0;
  }
}

/* Rotación 360° Completa Hacia la Izquierda sincronizada con el trazo inverso */
@keyframes ensoPureCenterSpin {
  0% {
    transform: rotate(0deg) scale(0.97);
    filter: drop-shadow(0px 3px 10px rgba(236, 64, 122, 0.25));
  }
  45% {
    transform: rotate(-180deg) scale(1.04);
    filter: drop-shadow(0px 4px 18px rgba(236, 64, 122, 0.45)) drop-shadow(0px 2px 8px rgba(126, 87, 194, 0.25));
  }
  82% {
    transform: rotate(-330deg) scale(1.01);
  }
  100% {
    transform: rotate(-360deg) scale(1);
    filter: drop-shadow(0px 3px 10px rgba(236, 64, 122, 0.25));
  }
}

/* En Modo Oscuro: Giro 360° Completo Hacia la Izquierda sincronizado con el trazo morado -> rosa */
@keyframes ensoPureCenterSpinDark {
  0% {
    transform: rotate(0deg) scale(0.97);
    filter: drop-shadow(0px 0px 10px rgba(255, 77, 136, 0.45));
  }
  45% {
    transform: rotate(-180deg) scale(1.05);
    filter: drop-shadow(0px 0px 18px rgba(255, 77, 136, 0.7)) drop-shadow(0px 0px 24px rgba(147, 51, 234, 0.5));
  }
  82% {
    transform: rotate(-330deg) scale(1.01);
  }
  100% {
    transform: rotate(-360deg) scale(1);
    filter: drop-shadow(0px 0px 10px rgba(255, 77, 136, 0.45));
  }
}

/* Keyframes: Trazo Inverso (Nace en la zona MORADA y se cierra hacia la zona ROSA) */
@keyframes ensoStrokePurpleToPink {
  0% {
    stroke-dashoffset: 235;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Keyframes: Aparición suave de las partículas doradas al completarse el trazo */
@keyframes ensoGoldReveal {
  0%, 55% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ensoGoldRevealDark {
  0%, 55% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 8px #F59E0B) drop-shadow(0 0 14px #FFE082);
  }
}

/* Destello en el punto dorado de la O de SEIKO al terminar la vuelta */
@keyframes goldDotOFlash {
  0%, 75% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  88% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 6px #FFB300) drop-shadow(0 0 12px #FFA000);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
}

.draw-enso .logo-o-dot,
.draw-enso + * .logo-o-dot,
.logo-animating .logo-o-dot {
  animation: goldDotOFlash 1.15s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

/* Canvas del logo Ensō: Centrado perfecto sobre su eje */
.enso-logo-canvas {
  background: transparent !important;
  overflow: visible;
  display: inline-block;
  vertical-align: middle;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0px 3px 10px rgba(236, 64, 122, 0.25));
  transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform, filter;
  position: relative;
  z-index: 1;
}

.enso-logo-canvas:hover {
  transform: rotate(-10deg) scale(1.04);
  filter: drop-shadow(0px 5px 16px rgba(236, 64, 122, 0.45));
}

[data-theme="dark"] .enso-logo-canvas {
  filter: drop-shadow(0px 0px 10px rgba(255, 77, 136, 0.45));
}

.enso-logo-source {
  background: transparent !important;
  transform: none !important;
}

/* Estado base de la máscara del Ensō: Alineado al sector morado */
.enso-mask-arc {
  stroke-dasharray: 235;
  stroke-dashoffset: 0;
  transform: rotate(70deg);
  transform-origin: 50px 50px;
}

.enso-mask-gold {
  opacity: 1;
  transform-origin: 73px 35px;
}

.enso-mask-gold-left {
  opacity: 1;
  transform-origin: 27px 35px;
}

/* Disparo de Giro 360° Hacia la Izquierda con Trazo Morado -> Rosa */
.draw-enso .enso-logo-canvas,
.draw-enso.enso-logo-canvas,
.logo-animating .enso-logo-canvas,
.logo-animating.enso-logo-canvas {
  animation: ensoPureCenterSpin 1.15s cubic-bezier(0.25, 1, 0.35, 1) forwards;
  transform-origin: 50% 50%;
}

[data-theme="dark"] .draw-enso .enso-logo-canvas,
[data-theme="dark"] .draw-enso.enso-logo-canvas,
[data-theme="dark"] .logo-animating .enso-logo-canvas,
[data-theme="dark"] .logo-animating.enso-logo-canvas {
  animation: ensoPureCenterSpinDark 1.15s cubic-bezier(0.25, 1, 0.35, 1) forwards;
  transform-origin: 50% 50%;
}

.draw-enso .enso-mask-arc,
.draw-enso.enso-logo-canvas .enso-mask-arc,
.logo-animating .enso-mask-arc,
.logo-animating.enso-logo-canvas .enso-mask-arc {
  stroke-dasharray: 235;
  stroke-dashoffset: 235;
  transform: rotate(70deg);
  transform-origin: 50px 50px;
  animation: ensoStrokePurpleToPink 1.15s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

.draw-enso .enso-mask-gold,
.draw-enso.enso-logo-canvas .enso-mask-gold,
.logo-animating .enso-mask-gold,
.logo-animating.enso-logo-canvas .enso-mask-gold,
.draw-enso .enso-mask-gold-left,
.draw-enso.enso-logo-canvas .enso-mask-gold-left,
.logo-animating .enso-mask-gold-left,
.logo-animating.enso-logo-canvas .enso-mask-gold-left {
  animation: ensoGoldReveal 1.15s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

[data-theme="dark"] .draw-enso .enso-mask-gold,
[data-theme="dark"] .draw-enso.enso-logo-canvas .enso-mask-gold,
[data-theme="dark"] .logo-animating .enso-mask-gold,
[data-theme="dark"] .logo-animating.enso-logo-canvas .enso-mask-gold,
[data-theme="dark"] .draw-enso .enso-mask-gold-left,
[data-theme="dark"] .draw-enso.enso-logo-canvas .enso-mask-gold-left,
[data-theme="dark"] .logo-animating .enso-mask-gold-left,
[data-theme="dark"] .logo-animating.enso-logo-canvas .enso-mask-gold-left {
  animation: ensoGoldRevealDark 1.15s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

/* Textos SEIKO 100% fijos y estáticos */
.sidebar-brand-name,
.logo-text,
#mobile-view-title {
  transform: none !important;
  animation: none !important;
}

.sidebar-logo-img {
  width: 58px;
  height: 58px;
}

.mobile-logo-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.seiko-logo-svg {
  filter: drop-shadow(0px 4px 10px rgba(156, 39, 176, 0.18)) drop-shadow(0px 2px 5px rgba(236, 64, 122, 0.12));
  transition: filter 0.3s ease;
}

.seiko-logo-svg:hover {
  filter: drop-shadow(0px 6px 16px rgba(156, 39, 176, 0.28)) drop-shadow(0px 3px 8px rgba(236, 64, 122, 0.2));
}

.sidebar-brand-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 4.5px;
  background: linear-gradient(135deg, #BA68C8 0%, #EC407A 50%, #F48FB1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
}

/* Gold dot inside the O of SEIKO — matches official brand identity */
.logo-o-dot {
  position: relative;
  display: inline-block;
}

.logo-o-dot::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 30% 30%, #FFE082 0%, #F59E0B 60%, #B45309 100%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}

.sidebar-o-dot::after {
  width: 5px;
  height: 5px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sidebar Nav Item Button */
.nav-item-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 0 18px;
  height: 52px;
  box-sizing: border-box;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
  transform: none !important;
}

.nav-item-btn:hover {
  background-color: var(--bg-primary);
  color: var(--text-main);
  transform: none !important;
}

.nav-item-btn.active {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--text-main);
  font-weight: 600;
}

[data-theme="dark"] .nav-item-btn.active {
  background-color: rgba(255, 255, 255, 0.08);
}

:root:not([data-theme="dark"]) .nav-item-btn.active .nav-icon {
  filter: brightness(0.9); /* Oscurece ligeramente el ícono en modo claro */
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* Sidebar Nav Icons in Light Mode (Matching Reference Guide) */
:root:not([data-theme="dark"]) .nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-normal);
  flex-shrink: 0;
}

:root:not([data-theme="dark"]) #sidebar-btn-tasks .nav-icon {
  background-color: rgba(255, 152, 0, 0.15);
  color: #FF9800;
}
:root:not([data-theme="dark"]) #mobile-btn-tasks .nav-icon {
  background-color: rgba(255, 152, 0, 0.15);
  color: #FF9800;
}
:root:not([data-theme="dark"]) #sidebar-btn-inicio .nav-icon {
  background-color: rgba(142, 36, 170, 0.12);
  color: #8E24AA;
}
:root:not([data-theme="dark"]) #sidebar-btn-habitos .nav-icon {
  background-color: rgba(0, 137, 123, 0.12);
  color: #00897B;
}
:root:not([data-theme="dark"]) #sidebar-btn-calendario .nav-icon {
  background-color: rgba(236, 64, 122, 0.12);
  color: #EC407A;
}
:root:not([data-theme="dark"]) #sidebar-btn-alarmas .nav-icon {
  background-color: rgba(255, 160, 0, 0.12);
  color: #FFA000;
}
:root:not([data-theme="dark"]) #sidebar-btn-mood .nav-icon {
  background-color: rgba(76, 175, 80, 0.12);
  color: #4CAF50;
}
:root:not([data-theme="dark"]) #sidebar-btn-diario .nav-icon {
  background-color: rgba(233, 30, 99, 0.12);
  color: #E91E63;
}
:root:not([data-theme="dark"]) #sidebar-btn-resumen .nav-icon {
  background-color: rgba(30, 136, 229, 0.12);
  color: #1E88E5;
}
:root:not([data-theme="dark"]) #sidebar-btn-config .nav-icon {
  background-color: rgba(142, 36, 170, 0.12);
  color: #8E24AA;
}

/* Sidebar Custom "+ Nuevo Hábito" button */
.nav-item-btn.add-habit {
  background-color: var(--bg-secondary);
  padding: 0 16px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 40px;
  color: var(--text-main);
}

.nav-item-btn.add-habit:hover {
  background-color: var(--purple-bg);
  box-shadow: 0 6px 15px rgba(126, 87, 194, 0.1);
  transform: none !important;
}

.btn-circle-plus {
  background-color: var(--accent-pink);
  color: var(--white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root:not([data-theme="dark"]) .btn-circle-plus {
  background: linear-gradient(135deg, #EC407A 0%, #AB47BC 100%);
  color: #FFFFFF;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.35);
  transition: var(--transition-normal);
}

.nav-item-btn.add-habit:hover .btn-circle-plus {
  transform: rotate(90deg);
}

/* Mobile Top Header */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: var(--white);
  border-bottom: var(--border-glass);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark-small {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #4A148C 0%, #EC407A 50%, #FFA726 100%);
  border-radius: 50%;
  display: inline-block;
}

.mobile-header h1 {
  font-size: 20px;
  font-weight: 700;
}

.mobile-profile {
  cursor: pointer;
}

.profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--accent-purple);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(126, 87, 194, 0.2);
}

/* Mobile Bottom Navigation Bar */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.04);
  z-index: 100;
  border-top: var(--border-glass);
  justify-content: space-around;
  padding: 10px 0 15px 0;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  gap: 4px;
  cursor: pointer;
  flex: 1;
}

.mobile-nav-item i {
  width: 22px;
  height: 22px;
  transition: var(--transition-bounce);
}

.mobile-nav-item.active {
  color: var(--accent-purple);
}

.mobile-nav-item.active i {
  transform: translateY(-3px) scale(1.1);
}

/* ==========================================================================
   VIEWS (COMMON LAYOUT)
   ========================================================================== */

.app-view {
  display: none;
  animation: viewFadeIn 0.4s ease-out;
}

.app-view.active-view {
  display: block;
}

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

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

.view-header h2 {
  font-size: 28px;
  font-weight: 700;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}

.action-btn-header {
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  transition: var(--transition-normal);
}

.action-btn-header:hover {
  background-color: var(--bg-secondary);
  transform: scale(1.05);
}

/* Card Styling */
.card {
  background-color: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
  margin-bottom: 24px;
  transition: var(--transition-normal);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 20px;
}

.card-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 15px;
}

/* ==========================================================================
   TOP STREAK NOTIFICATION BANNER (Notificación Diaria con Flama y Días de Racha)
   ========================================================================== */

.streak-notification-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--border-radius-md);
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.12) 0%, rgba(236, 64, 122, 0.08) 100%);
  border: 1px solid rgba(255, 112, 67, 0.35);
  border-left: 4.5px solid #FF6D00;
  box-shadow: 0 4px 16px rgba(255, 112, 67, 0.08);
  cursor: pointer;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, border-color 0.25s ease;
}

[data-theme="dark"] .streak-notification-banner {
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.18) 0%, rgba(236, 64, 122, 0.12) 100%);
  border-color: rgba(255, 112, 67, 0.4);
  border-left-color: #FF5722;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.streak-notification-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 112, 67, 0.18);
  border-color: #FF6D00;
}

.streak-flame-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF3E0, #FFE0B2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 109, 0, 0.25);
  border: 1.5px solid rgba(255, 152, 0, 0.4);
}

[data-theme="dark"] .streak-flame-wrapper {
  background: radial-gradient(circle at 35% 35%, #3E2723, #211512);
  border-color: rgba(255, 112, 67, 0.5);
  box-shadow: 0 0 16px rgba(255, 87, 34, 0.4);
}

.streak-flame-icon {
  font-size: 24px;
  display: inline-block;
  animation: flamePulse 2s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes flamePulse {
  0% {
    transform: scale(1) rotate(-3deg);
    filter: drop-shadow(0 0 4px rgba(255, 112, 67, 0.5));
  }
  50% {
    transform: scale(1.22) rotate(4deg);
    filter: drop-shadow(0 0 14px rgba(255, 64, 129, 0.9)) drop-shadow(0 0 6px rgba(255, 171, 0, 0.8));
  }
  100% {
    transform: scale(1) rotate(-3deg);
    filter: drop-shadow(0 0 4px rgba(255, 112, 67, 0.5));
  }
}

.streak-text-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.streak-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.streak-count-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.streak-badge-tag {
  background: linear-gradient(135deg, #FF6D00, #FF3D00);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(255, 61, 0, 0.35);
  white-space: nowrap;
}

.streak-subtext {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.streak-action-arrow {
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
}

.streak-notification-banner:hover .streak-action-arrow {
  transform: translateX(4px);
  color: #FF6D00;
}

/* Mobile Header Right & Streak Pill */
.mobile-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-streak-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.18), rgba(236, 64, 122, 0.15));
  border: 1px solid rgba(255, 112, 67, 0.4);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 112, 67, 0.15);
  transition: transform 0.2s ease;
}

.mobile-streak-pill:hover {
  transform: scale(1.06);
}

.mobile-streak-pill .flame-emoji {
  font-size: 14px;
  animation: flamePulse 2s ease-in-out infinite;
}

/* ==========================================================================
   VIEW: INICIO (DASHBOARD VIEWS)
   ========================================================================== */

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

.brand-section {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.logo-text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 6.5px;
  color: var(--text-main);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  transition: var(--transition-normal);
}

[data-theme="dark"] .logo-text {
  color: #FFFFFF;
  text-shadow: 0 0 16px rgba(236, 64, 122, 0.25);
}

.user-greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
}

.gold-dot {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #FFE082, #F59E0B, #D97706);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* Weekly Progress Chart Card (Hero Focal Point) */
.weekly-progress-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: var(--border-glass);
  padding: 26px 24px 28px 24px;
  box-shadow: 0 10px 30px rgba(126, 87, 194, 0.06);
}

[data-theme="dark"] .weekly-progress-card {
  background: radial-gradient(circle at 50% 25%, rgba(126, 87, 194, 0.12) 0%, var(--bg-card) 75%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}

.chart-card-header {
  margin-bottom: 6px;
}

.chart-card-header .card-title {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

/* Chart Container (Más espacioso y alto para mayor protagonismo) */
.weekly-chart-container {
  width: 100%;
  height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#weekly-line-chart {
  width: 100%;
  height: 240px;
  overflow: visible;
}

.chart-grid-line {
  stroke: rgba(212, 186, 170, 0.25);
}

[data-theme="dark"] .chart-grid-line {
  stroke: rgba(255, 255, 255, 0.05);
}

.weekly-chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px 0 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.6px;
}

.weekly-chart-labels span {
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  text-align: center;
}

.weekly-chart-labels span:hover {
  color: var(--accent-purple);
  transform: translateY(-2px);
}

/* Active Day Highlight in Light Mode (Matches Image: bold deep purple/berry) */
.weekly-chart-labels span.active-day-label {
  color: #3C1F48;
  font-weight: 900;
  transform: scale(1.2);
}

/* Active Day Highlight in Dark Mode (Matches Image 1: luminous coral glow) */
[data-theme="dark"] .weekly-chart-labels span.active-day-label {
  color: #FF5252;
  font-weight: 900;
  transform: scale(1.2);
  text-shadow: 0 0 12px rgba(255, 82, 82, 0.6);
}

/* Today Progress Banner — Reference Style */
.today-progress-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 24px 20px 24px 28px;
  margin: 30px 0 0 0;
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
  position: relative;
  overflow: hidden;
}

.today-progress-banner::after {
  content: '';
  position: absolute;
  top: -40px;
  right: 100px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(126, 87, 194, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.today-banner-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.today-banner-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.today-banner-pct {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #7E57C2 0%, #EC407A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -2px;
}

.today-banner-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.today-banner-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Today title row (below the banner) */
.today-title-row {
  margin: 28px 0 16px 0;
}

.today-title-row h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* Progress ring container — Ensō, big and dramatic */
.progress-ring-container {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Aura de luz zen difusa detrás del anillo */
.enso-glow-aura {
  position: absolute;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 64, 122, 0.16) 0%, rgba(186, 104, 200, 0.08) 55%, transparent 75%);
  filter: blur(8px);
  pointer-events: none;
  animation: ensoAuraBreathe 4s ease-in-out infinite alternate;
}

@keyframes ensoAuraBreathe {
  0% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.08);
    opacity: 0.95;
  }
}

.enso-progress-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(217, 38, 148, 0.20));
}

.enso-track-bg {
  stroke: rgba(212, 186, 170, 0.32);
  transition: stroke 0.3s ease;
}

[data-theme="pearl"] .enso-track-bg,
[data-theme="white"] .enso-track-bg {
  stroke: rgba(220, 210, 202, 0.45);
}

[data-theme="dark"] .enso-track-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.enso-circle {
  transition: stroke-dashoffset 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: round;
}

/* Glifo central zen */
.enso-center-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-pink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transition: all 0.35s ease;
}

[data-theme="dark"] .enso-center-glyph {
  background: rgba(255, 255, 255, 0.08);
  color: #F06292;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.enso-center-glyph.completed {
  background: linear-gradient(135deg, #BA68C8, #EC407A);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.4);
  transform: translate(-50%, -50%) scale(1.08);
}

.enso-center-glyph i,
.enso-center-glyph svg {
  width: 15px;
  height: 15px;
}

/* Gold dot accent at stroke end con pulso y brillo */
.enso-end-dot {
  display: none !important;
}

/* Habits list */
.habits-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

/* Habit Card Item */
.habit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 15px rgba(226, 208, 199, 0.1);
  transition: var(--transition-bounce);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.habit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(226, 208, 199, 0.2);
}

.habit-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.habit-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: var(--transition-normal);
  flex-shrink: 0;
}

.habit-icon-wrapper svg,
.habit-icon-wrapper i,
.habit-icon-wrapper .lucide {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2px !important;
  stroke: currentColor !important;
  color: inherit !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.habit-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.habit-name-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  transition: var(--transition-normal);
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.35;
}

.habit-time-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Habit Checkbox Toggle on right */
.habit-checkbox {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
}

.habit-checkbox i,
.habit-checkbox svg,
.habit-checkbox .lucide {
  width: 16px;
  height: 16px;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  stroke-width: 3px;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

/* Habit Item - Checked States: ILUMINADO, TACHADO Y CON PALOMITA */
.habit-card.checked {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.habit-card.checked .habit-name-text {
  text-decoration: line-through;
  opacity: 0.65;
}

.habit-card.checked .habit-time-text {
  opacity: 0.45;
}

.habit-card.checked .habit-checkbox {
  background-color: currentColor;
  transform: scale(1.06);
}

.habit-card.checked .habit-checkbox i,
.habit-card.checked .habit-checkbox svg,
.habit-card.checked .habit-checkbox .lucide {
  opacity: 1 !important;
  transform: scale(1) !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Categories coloring mappings */

/* 1. MODO BEIGE CÁLIDO Y DEFAULT: ICONOS CIRCULARES CON GRADIENTES SATURADOS Y GLIFOS BLANCOS (Fiel a la referencia original) */
.habit-card.cat-purple .habit-icon-wrapper {
  background: linear-gradient(135deg, #8E24AA 0%, #AB47BC 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(142, 36, 170, 0.25);
}
.habit-card.cat-purple {
  background-color: var(--purple-bg);
  border-color: rgba(142, 36, 170, 0.12);
}
.habit-card.cat-purple .habit-checkbox {
  border-color: var(--purple-accent);
  color: var(--purple-accent);
}
.habit-card.cat-purple.checked {
  border-color: var(--purple-accent);
  box-shadow: 0 8px 25px rgba(142, 36, 170, 0.25);
}

.habit-card.cat-teal .habit-icon-wrapper {
  background: linear-gradient(135deg, #00897B 0%, #26A69A 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 137, 123, 0.25);
}
.habit-card.cat-teal {
  background-color: var(--teal-bg);
  border-color: rgba(0, 137, 123, 0.12);
}
.habit-card.cat-teal .habit-checkbox {
  border-color: var(--teal-accent);
  color: var(--teal-accent);
}
.habit-card.cat-teal.checked {
  border-color: var(--teal-accent);
  box-shadow: 0 8px 25px rgba(0, 137, 123, 0.25);
}

.habit-card.cat-orange .habit-icon-wrapper {
  background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.25);
}
.habit-card.cat-orange {
  background-color: var(--orange-bg);
  border-color: rgba(255, 112, 67, 0.12);
}
.habit-card.cat-orange .habit-checkbox {
  border-color: #D48BA0;
  color: var(--orange-accent);
}
.habit-card.cat-orange.checked {
  border-color: var(--orange-accent);
  box-shadow: 0 8px 25px rgba(255, 112, 67, 0.25);
}

.habit-card.cat-pink .habit-icon-wrapper {
  background: linear-gradient(135deg, #D81B60 0%, #EC407A 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(236, 64, 122, 0.25);
}
.habit-card.cat-pink {
  background-color: var(--pink-bg);
  border-color: rgba(236, 64, 122, 0.12);
}
.habit-card.cat-pink .habit-checkbox {
  border-color: #B587A8;
  color: var(--pink-accent);
}
.habit-card.cat-pink.checked {
  border-color: var(--pink-accent);
  box-shadow: 0 8px 25px rgba(236, 64, 122, 0.25);
}

.habit-card.cat-blue .habit-icon-wrapper {
  background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(25, 118, 210, 0.25);
}
.habit-card.cat-blue {
  background-color: var(--blue-bg);
  border-color: rgba(30, 136, 229, 0.12);
}
.habit-card.cat-blue .habit-checkbox {
  border-color: var(--blue-accent);
  color: var(--blue-accent);
}
.habit-card.cat-blue.checked {
  border-color: var(--blue-accent);
  box-shadow: 0 8px 25px rgba(30, 136, 229, 0.25);
}

.habit-card.cat-amber .habit-icon-wrapper {
  background: linear-gradient(135deg, #F57F17 0%, #FFA000 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(245, 127, 23, 0.25);
}
.habit-card.cat-amber {
  background-color: var(--amber-bg);
  border-color: rgba(255, 160, 0, 0.12);
}
.habit-card.cat-amber .habit-checkbox {
  border-color: var(--amber-accent);
  color: var(--amber-accent);
}
.habit-card.cat-amber.checked {
  border-color: var(--amber-accent);
  box-shadow: 0 8px 25px rgba(255, 160, 0, 0.25);
}

.habit-card.cat-indigo .habit-icon-wrapper {
  background: linear-gradient(135deg, #5E35B1 0%, #7E57C2 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(94, 53, 177, 0.25);
}
.habit-card.cat-indigo {
  background-color: var(--indigo-bg);
  border-color: rgba(103, 58, 183, 0.12);
}
.habit-card.cat-indigo .habit-checkbox {
  border-color: var(--indigo-accent);
  color: var(--indigo-accent);
}
.habit-card.cat-indigo.checked {
  border-color: var(--indigo-accent);
  box-shadow: 0 8px 25px rgba(103, 58, 183, 0.25);
}

.habit-card.cat-red .habit-icon-wrapper {
  background: linear-gradient(135deg, #D32F2F 0%, #EF5350 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(211, 47, 47, 0.25);
}
.habit-card.cat-red {
  background-color: var(--red-bg);
  border-color: rgba(229, 57, 53, 0.12);
}
.habit-card.cat-red .habit-checkbox {
  border-color: var(--red-accent);
  color: var(--red-accent);
}
.habit-card.cat-red.checked {
  border-color: var(--red-accent);
  box-shadow: 0 8px 25px rgba(229, 57, 53, 0.25);
}

.habit-card.cat-green .habit-icon-wrapper {
  background: linear-gradient(135deg, #388E3C 0%, #66BB6A 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(56, 142, 60, 0.25);
}
.habit-card.cat-green {
  background-color: var(--green-bg);
  border-color: rgba(67, 160, 71, 0.12);
}
.habit-card.cat-green .habit-checkbox {
  border-color: var(--green-accent);
  color: var(--green-accent);
}
.habit-card.cat-green.checked {
  border-color: var(--green-accent);
  box-shadow: 0 8px 25px rgba(67, 160, 71, 0.25);
}

.habit-card.cat-cyan .habit-icon-wrapper {
  background: linear-gradient(135deg, #0097A7 0%, #26C6DA 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 151, 167, 0.25);
}
.habit-card.cat-cyan {
  background-color: var(--cyan-bg);
  border-color: rgba(0, 172, 193, 0.12);
}
.habit-card.cat-cyan .habit-checkbox {
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
}
.habit-card.cat-cyan.checked {
  border-color: var(--cyan-accent);
  box-shadow: 0 8px 25px rgba(0, 172, 193, 0.25);
}

/* 2. MODO BLANCO APERLADO: CAJAS PASTEL SQUIRCLE CON ICONOS DE LÍNEA EN TONO DE COLOR (Fiel a la referencia de modo blanco) */
[data-theme="pearl"] .habit-icon-wrapper,
[data-theme="white"] .habit-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 16px !important;
}

[data-theme="pearl"] .habit-card.cat-purple .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-purple .habit-icon-wrapper {
  background: var(--purple-box) !important;
  color: var(--purple-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-teal .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-teal .habit-icon-wrapper {
  background: var(--teal-box) !important;
  color: var(--teal-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-orange .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-orange .habit-icon-wrapper {
  background: var(--orange-box) !important;
  color: var(--orange-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-pink .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-pink .habit-icon-wrapper {
  background: var(--pink-box) !important;
  color: var(--pink-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-blue .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-blue .habit-icon-wrapper {
  background: var(--blue-box) !important;
  color: var(--blue-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-amber .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-amber .habit-icon-wrapper {
  background: var(--amber-box) !important;
  color: var(--amber-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-indigo .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-indigo .habit-icon-wrapper {
  background: var(--indigo-box) !important;
  color: var(--indigo-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-red .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-red .habit-icon-wrapper {
  background: var(--red-box) !important;
  color: var(--red-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-green .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-green .habit-icon-wrapper {
  background: var(--green-box) !important;
  color: var(--green-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[data-theme="pearl"] .habit-card.cat-cyan .habit-icon-wrapper,
[data-theme="white"] .habit-card.cat-cyan .habit-icon-wrapper {
  background: var(--cyan-box) !important;
  color: var(--cyan-icon) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* 3. MODO OSCURO: ICONOS TRANSLÚCIDOS RESPLANDECIENTES */
[data-theme="dark"] .habit-icon-wrapper {
  border-radius: 16px !important;
}
[data-theme="dark"] .habit-card.cat-purple .habit-icon-wrapper { background: rgba(126, 87, 194, 0.22) !important; color: var(--purple-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-teal .habit-icon-wrapper { background: rgba(38, 166, 154, 0.22) !important; color: var(--teal-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-orange .habit-icon-wrapper { background: rgba(255, 167, 38, 0.22) !important; color: var(--orange-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-pink .habit-icon-wrapper { background: rgba(236, 64, 122, 0.22) !important; color: var(--pink-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-blue .habit-icon-wrapper { background: rgba(66, 165, 245, 0.22) !important; color: var(--blue-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-amber .habit-icon-wrapper { background: rgba(255, 202, 40, 0.22) !important; color: var(--amber-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-indigo .habit-icon-wrapper { background: rgba(124, 77, 255, 0.22) !important; color: var(--indigo-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-red .habit-icon-wrapper { background: rgba(239, 83, 80, 0.22) !important; color: var(--red-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-green .habit-icon-wrapper { background: rgba(102, 187, 106, 0.22) !important; color: var(--green-icon) !important; box-shadow: none !important; }
[data-theme="dark"] .habit-card.cat-cyan .habit-icon-wrapper { background: rgba(0, 188, 212, 0.22) !important; color: var(--cyan-icon) !important; box-shadow: none !important; }

/* Edit / Delete menu on Habit Cards (for Habits View) */
.habit-card-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: var(--transition-normal);
}

.habit-card:hover .habit-card-actions {
  opacity: 1;
}

.card-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background-color: rgba(255, 255, 255, 0.5);
  transition: var(--transition-normal);
}

.card-action-btn:hover {
  background-color: var(--white);
  color: var(--text-main);
  transform: scale(1.1);
}

.card-action-btn.delete-btn:hover {
  color: var(--accent-pink);
}

/* Quote box — Zen minimalist strip, premium and delicate */
.quote-box-card {
  background: linear-gradient(135deg, #FBF0E6 0%, #F5E5D8 100%);
  border-radius: var(--border-radius-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(165, 128, 108, 0.12);
  border: 1px solid rgba(212, 186, 170, 0.7);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.quote-box-top {
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 8px 26px rgba(165, 128, 108, 0.16);
  border: 1.5px solid rgba(212, 186, 170, 0.85);
}

.quote-box-top .quote-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.quote-box-top .quote-spark-icon {
  width: 22px;
  height: 22px;
}

.quote-text-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.quote-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #D7A15C;
}

.quote-box-top .quote-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.quote-box-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(165, 128, 108, 0.25);
}

.quote-box-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #D7A15C 0%, #EC407A 100%);
  border-radius: 5px 0 0 5px;
}

[data-theme="dark"] .quote-box-card {
  background: linear-gradient(135deg, #1E1A14 0%, #272124 100%);
  border-color: rgba(215, 161, 92, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .quote-box-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
}

.quote-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.quote-icon-wrapper {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, rgba(215, 161, 92, 0.22) 0%, rgba(236, 64, 122, 0.18) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(215, 161, 92, 0.35);
}

.quote-spark-icon {
  color: #D7A15C;
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 6px rgba(215, 161, 92, 0.5));
}

.quote-text {
  font-size: 14px;
  font-weight: 500;
  color: #4A3528;
  line-height: 1.5;
  letter-spacing: 0.1px;
  font-style: italic;
  transition: opacity 0.25s ease;
}

[data-theme="dark"] .quote-text {
  color: #E2D2C6;
}

.quote-enso-container {
  display: flex;
  align-items: center;
  opacity: 0.35;
  flex-shrink: 0;
}

/* ==========================================================================
   VIEW: MIS HÁBITOS (PREMIUM REDESIGN - IMPACTANTE & LIMPIO)
   ========================================================================== */

.habits-view-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Hero Summary Card */
.habits-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, var(--white) 0%, var(--bg-card) 100%);
  padding: 24px 28px;
  border-radius: var(--border-radius-lg);
  border: var(--border-glass);
  box-shadow: 0 10px 30px rgba(126, 87, 194, 0.08);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .habits-hero-card {
  background: radial-gradient(circle at 75% 25%, rgba(126, 87, 194, 0.15) 0%, var(--bg-card) 75%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.habits-hero-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.habits-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--accent-purple);
  text-transform: uppercase;
}

.habits-hero-heading {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin: 2px 0 0 0;
  letter-spacing: -0.4px;
}

.habits-stats-grid {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.habits-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--bg-primary);
  border: 1px solid rgba(212, 186, 170, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .habits-stat-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.habits-stat-pill .stat-icon {
  font-size: 16px;
}

.habits-stat-pill .stat-meta {
  display: flex;
  flex-direction: column;
}

.habits-stat-pill .stat-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
}

.habits-stat-pill .stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.habits-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.large-progress-ring-container {
  position: relative;
  width: 124px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.large-progress-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#habits-view-percentage {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.large-progress-text .subtext {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Filter Chips Bar */
.habits-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.habit-filter-btn {
  background: var(--white);
  border: 1px solid rgba(212, 186, 170, 0.4);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

[data-theme="dark"] .habit-filter-btn {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.08);
}

.habit-filter-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-main);
}

.habit-filter-btn.active {
  background: linear-gradient(135deg, #BA68C8, #EC407A);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.3);
}

/* Redesigned Habit Card (Impactante & Limpio) */
.habit-card-main-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.habit-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.habit-header-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.habit-cat-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
}

[data-theme="dark"] .habit-cat-pill {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.habit-streak-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.18), rgba(255, 61, 0, 0.18));
  color: #FF5722;
  border: 1px solid rgba(255, 112, 67, 0.35);
}

.habit-meta-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.habit-meta-line span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.habit-meta-line svg, .habit-meta-line i {
  width: 13px;
  height: 13px;
}

/* 7-Day Weekly Dot Tracker */
.habit-weekly-tracker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(212, 186, 170, 0.3);
}

[data-theme="dark"] .habit-weekly-tracker {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.habit-week-dot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.habit-week-dot-letter {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.habit-week-dot-bubble {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 186, 170, 0.5);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  transition: all 0.2s ease;
}

[data-theme="dark"] .habit-week-dot-bubble {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.habit-week-dot-bubble.is-today {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px rgba(186, 104, 200, 0.25);
}

.habit-week-dot-bubble.completed {
  background: linear-gradient(135deg, #BA68C8, #EC407A);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(236, 64, 122, 0.35);
}

.habit-week-dot-bubble.not-scheduled {
  opacity: 0.3;
  border-style: dashed;
}

/* Habit Card Actions & Hover Buttons */
.habit-card-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.habit-checkbox-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(212, 186, 170, 0.7);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .habit-checkbox-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.habit-checkbox-toggle i {
  width: 16px;
  height: 16px;
  stroke: #FFFFFF;
  stroke-width: 3px;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.habit-card.checked .habit-checkbox-toggle {
  background: linear-gradient(135deg, #10B981, #059669);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
  transform: scale(1.06);
}

.habit-card.checked .habit-checkbox-toggle i {
  opacity: 1;
  transform: scale(1);
}

.habit-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-action-btn {
  background: var(--white);
  border: 1px solid rgba(212, 186, 170, 0.4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

[data-theme="dark"] .card-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.card-action-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-main);
  transform: scale(1.1);
}

.card-action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.add-habit-pill-btn, .add-alarm-pill-btn {
  background: linear-gradient(135deg, rgba(186, 104, 200, 0.15), rgba(236, 64, 122, 0.15));
  border: 1.5px dashed rgba(186, 104, 200, 0.5);
  padding: 16px;
  border-radius: 40px;
  color: var(--accent-purple);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 15px auto;
  width: 100%;
  max-width: 340px;
  box-shadow: var(--shadow-card);
  transition: var(--transition-bounce);
}

.add-habit-pill-btn:hover, .add-alarm-pill-btn:hover {
  background: linear-gradient(135deg, #BA68C8, #EC407A);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(236, 64, 122, 0.3);
  transform: translateY(-2px);
}

/* ==========================================================================
   VIEW: CALENDARIO
   ========================================================================== */

.calendar-view-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.month-selector-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  padding: 16px 24px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
}

.month-selector-card h3 {
  font-size: 18px;
  font-weight: 700;
}

.month-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary);
  color: var(--text-main);
  transition: var(--transition-normal);
}

.month-nav-btn:hover {
  background-color: var(--bg-secondary);
}

/* Top Controls Layout (Month Selector + Traffic Toggle Card) */
.calendar-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.calendar-top-controls .month-selector-card {
  flex: 1;
  min-width: 260px;
}

.calendar-traffic-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background-color: var(--white);
  padding: 12px 20px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
}

.calendar-traffic-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.traffic-toggle-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
}

.traffic-toggle-texts {
  display: flex;
  flex-direction: column;
}

.traffic-toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.traffic-toggle-desc {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Switch Toggle UI */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(212, 186, 170, 0.5);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 24px;
}

[data-theme="dark"] .slider-round {
  background-color: rgba(255, 255, 255, 0.15);
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.switch-toggle input:checked + .slider-round {
  background: linear-gradient(135deg, #81C784, #4CAF50);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}

.switch-toggle input:checked + .slider-round:before {
  transform: translateX(20px);
}

.calendar-card {
  background-color: var(--white);
  padding: 24px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 12px;
  text-align: center;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
  width: 38px;
  height: 38px;
  transition: var(--transition-bounce);
  color: var(--text-main);
}

.calendar-day.empty {
  opacity: 0.15;
  cursor: default;
}

.calendar-day:hover:not(.empty) {
  background-color: var(--bg-primary);
}

/* Highlights for habit completion (Original Mode) */
.calendar-day.completed-partial {
  background-color: var(--purple-bg);
  color: #8E24AA;
  font-weight: 700;
}

.calendar-day.completed-full {
  background: linear-gradient(135deg, #8E24AA 0%, #AB47BC 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(142, 36, 170, 0.25);
}

.calendar-day.active-today {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.calendar-day.active-today.completed-full {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  border: none;
}

/* Traffic Light Mode Classes (Verde Pastel Suave / Rojo Pastel Suave - Bajo Contraste Zen) */
.calendar-day.traffic-green {
  background: linear-gradient(135deg, #D4EDDA 0%, #C3E6CB 100%) !important;
  color: #1E6B37 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(46, 125, 50, 0.25) !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.12) !important;
}

.calendar-day.traffic-red {
  background: linear-gradient(135deg, #FCE8E6 0%, #FAD2CF 100%) !important;
  color: #C53929 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(217, 48, 37, 0.22) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.10) !important;
}

.calendar-day.traffic-green.active-today {
  box-shadow: 0 0 0 2px #F59E0B, 0 3px 10px rgba(76, 175, 80, 0.25) !important;
  border-color: #F59E0B !important;
}

.calendar-day.traffic-red.active-today {
  box-shadow: 0 0 0 2px #F59E0B, 0 3px 10px rgba(239, 68, 68, 0.25) !important;
  border-color: #F59E0B !important;
}

.calendar-day.traffic-future {
  opacity: 0.45;
  color: var(--text-muted) !important;
}

/* Modo Oscuro - Tonos translúcidos y aterciopelados de bajo contraste */
[data-theme="dark"] .calendar-day.traffic-green {
  background: rgba(46, 125, 50, 0.24) !important;
  color: #81C784 !important;
  border: 1px solid rgba(129, 199, 132, 0.35) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .calendar-day.traffic-red {
  background: rgba(198, 40, 40, 0.22) !important;
  color: #E57373 !important;
  border: 1px solid rgba(229, 115, 115, 0.32) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* ===== MAPA DE ÁNIMO — Clases de color para cada estado ===== */

/* Estructura interna del día en modo ánimo */
.calendar-day.mood-cal-genial,
.calendar-day.mood-cal-bien,
.calendar-day.mood-cal-normal,
.calendar-day.mood-cal-cansado,
.calendar-day.mood-cal-mal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 11px;
}

.mood-cal-num {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.mood-cal-dot {
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
}

/* Colores por estado (modo claro) */
.calendar-day.mood-cal-genial {
  background: linear-gradient(135deg, #F8BBD0 0%, #F48FB1 100%) !important;
  color: #880E4F !important;
  border: 1px solid rgba(236, 64, 122, 0.35) !important;
}
.calendar-day.mood-cal-bien {
  background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%) !important;
  color: #E65100 !important;
  border: 1px solid rgba(255, 160, 0, 0.35) !important;
}
.calendar-day.mood-cal-normal {
  background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%) !important;
  color: #1B5E20 !important;
  border: 1px solid rgba(76, 175, 80, 0.35) !important;
}
.calendar-day.mood-cal-cansado {
  background: linear-gradient(135deg, #B2EBF2 0%, #80DEEA 100%) !important;
  color: #00838F !important;
  border: 1px solid rgba(0, 172, 193, 0.35) !important;
}
.calendar-day.mood-cal-mal {
  background: linear-gradient(135deg, #E1BEE7 0%, #CE93D8 100%) !important;
  color: #4A148C !important;
  border: 1px solid rgba(142, 36, 170, 0.35) !important;
}

/* Sin registro de ánimo ese día (pasado sin dato) */
.calendar-day.mood-cal-empty {
  opacity: 0.45;
  color: var(--text-muted) !important;
}

/* Hoy con ánimo */
.calendar-day.mood-cal-genial.active-today,
.calendar-day.mood-cal-bien.active-today,
.calendar-day.mood-cal-normal.active-today,
.calendar-day.mood-cal-cansado.active-today,
.calendar-day.mood-cal-mal.active-today {
  box-shadow: 0 0 0 2.5px #F59E0B, 0 3px 12px rgba(0,0,0,0.18) !important;
  border-color: #F59E0B !important;
}

/* Dark mode */
[data-theme="dark"] .calendar-day.mood-cal-genial {
  background: rgba(236, 64, 122, 0.25) !important;
  color: #F48FB1 !important;
  border: 1px solid rgba(244, 143, 177, 0.35) !important;
}
[data-theme="dark"] .calendar-day.mood-cal-bien {
  background: rgba(255, 160, 0, 0.22) !important;
  color: #FFCC80 !important;
  border: 1px solid rgba(255, 204, 128, 0.35) !important;
}
[data-theme="dark"] .calendar-day.mood-cal-normal {
  background: rgba(76, 175, 80, 0.22) !important;
  color: #A5D6A7 !important;
  border: 1px solid rgba(165, 214, 167, 0.35) !important;
}
[data-theme="dark"] .calendar-day.mood-cal-cansado {
  background: rgba(0, 172, 193, 0.22) !important;
  color: #80DEEA !important;
  border: 1px solid rgba(128, 222, 234, 0.35) !important;
}
[data-theme="dark"] .calendar-day.mood-cal-mal {
  background: rgba(142, 36, 170, 0.25) !important;
  color: #CE93D8 !important;
  border: 1px solid rgba(206, 147, 216, 0.35) !important;
}



[data-theme="dark"] .calendar-day.completed-full {
  background: #7E57C2;
  color: #FFFFFF;
  box-shadow: none;
}

[data-theme="dark"] .calendar-day.completed-partial {
  background-color: var(--purple-bg);
  color: var(--purple-icon);
}

[data-theme="dark"] .calendar-day.active-today {
  border: 2.5px solid #D7A15C;
  color: #D7A15C;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .calendar-day.active-today.completed-full {
  background-color: #D7A15C;
  color: #FFFFFF;
  border: none;
}

/* Bar Chart Card (Performance) */
.bar-chart-container {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 15px;
}

.bar-chart-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 180px;
  padding: 0 10px;
  border-bottom: 2px solid var(--bg-primary);
}

.bar-col {
  flex: 1;
  max-width: 36px;
  background: linear-gradient(180deg, #EC407A 0%, #AB47BC 100%);
  border-radius: 10px 10px 0 0;
  height: 0%;
  transition: height 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  cursor: pointer;
  opacity: 0.85;
}
.bar-col:hover {
  opacity: 1;
  transform: scaleX(1.06);
}

/* Individual Bar Day Colors in Light Mode */
:root:not([data-theme="dark"]) .bar-col.day-col-0 { background: linear-gradient(180deg, #BA68C8 0%, #8E24AA 100%); }
:root:not([data-theme="dark"]) .bar-col.day-col-1 { background: linear-gradient(180deg, #F06292 0%, #D81B60 100%); }
:root:not([data-theme="dark"]) .bar-col.day-col-2 { background: linear-gradient(180deg, #FF8A65 0%, #E64A19 100%); }
:root:not([data-theme="dark"]) .bar-col.day-col-3 { background: linear-gradient(180deg, #FFD54F 0%, #FFA000 100%); }
:root:not([data-theme="dark"]) .bar-col.day-col-4 { background: linear-gradient(180deg, #4DB6AC 0%, #00897B 100%); }
:root:not([data-theme="dark"]) .bar-col.day-col-5 { background: linear-gradient(180deg, #FFCA28 0%, #EC407A 100%); }
:root:not([data-theme="dark"]) .bar-col.day-col-6 { background: linear-gradient(180deg, #4DD0E1 0%, #00ACC1 100%); }

.bar-tooltip {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--text-main);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: var(--transition-normal);
  pointer-events: none;
  white-space: nowrap;
}

.bar-col:hover .bar-tooltip {
  opacity: 1;
}

.bar-chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 0 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   VIEW: ALARMAS
   ========================================================================== */

.alarms-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alarm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  padding: 20px 24px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
}

.alarm-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alarm-habit-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.alarm-time {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
}

.alarm-days-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.alarm-day-indicator {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.alarm-day-indicator.active {
  color: var(--accent-purple);
}

/* Custom Switch Toggle */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E2DBD6;
  transition: .4s;
  border-radius: 34px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

input:checked + .switch-slider {
  background: linear-gradient(135deg, #7E57C2 0%, #EC407A 100%);
}

input:checked + .switch-slider:before {
  transform: translateX(22px);
}

/* ==========================================================================
   VIEW: ESTADO DE ÁNIMO (MOOD TRACKER)
   ========================================================================== */

.mood-view-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.mood-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.mood-display-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.mood-emoji-large-container {
  width: 100px;
  height: 100px;
}

.active-mood-emoji-graphic {
  width: 100%;
  height: 100%;
}

.mood-buttons-grid {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  margin-bottom: 35px;
}

.mood-btn {
  background: none;
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  opacity: 0.6;
  transition: var(--transition-bounce);
}

.mood-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.mood-btn.active {
  opacity: 1;
  transform: scale(1.1);
}

.mood-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: var(--transition-normal);
}

.mood-btn.active .mood-icon {
  box-shadow: var(--shadow-soft);
}

/* Colors for mood states */
:root:not([data-theme="dark"]) .mood-icon.genial { background: linear-gradient(135deg, #F06292 0%, #EC407A 100%); color: #FFFFFF; }
:root:not([data-theme="dark"]) .mood-icon.bien { background: linear-gradient(135deg, #FFB74D 0%, #FFA000 100%); color: #FFFFFF; }
:root:not([data-theme="dark"]) .mood-icon.normal { background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%); color: #FFFFFF; }
:root:not([data-theme="dark"]) .mood-icon.cansado { background: linear-gradient(135deg, #4DD0E1 0%, #00ACC1 100%); color: #FFFFFF; }
:root:not([data-theme="dark"]) .mood-icon.mal { background: linear-gradient(135deg, #BA68C8 0%, #8E24AA 100%); color: #FFFFFF; }

[data-theme="dark"] .mood-icon.genial { background-color: var(--pink-bg); color: var(--pink-accent); }
[data-theme="dark"] .mood-icon.bien { background-color: var(--orange-bg); color: var(--orange-accent); }
[data-theme="dark"] .mood-icon.normal { background-color: #1A3525; color: #81C784; }
[data-theme="dark"] .mood-icon.cansado { background-color: var(--teal-bg); color: var(--teal-accent); }
[data-theme="dark"] .mood-icon.mal { background-color: var(--purple-bg); color: #BA68C8; }

.mood-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.mood-btn.active .mood-label {
  color: var(--text-main);
}

.mood-note-input-container {
  width: 100%;
  text-align: left;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-journal-card {
  background-color: var(--white);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.journal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.journal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-purple);
}

.journal-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.journal-date-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background-color: var(--bg-primary);
  color: var(--text-muted);
  border: 1px solid rgba(212, 186, 170, 0.4);
}

[data-theme="dark"] .journal-date-badge {
  border-color: rgba(255, 255, 255, 0.08);
}

.mood-note-input-container textarea {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid rgba(212, 186, 170, 0.6);
  border-radius: var(--border-radius-md);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
  resize: none;
  transition: var(--transition-normal);
}

[data-theme="dark"] .mood-note-input-container textarea {
  background-color: var(--bg-secondary);
  border-color: rgba(255, 255, 255, 0.08);
}

.mood-note-input-container textarea:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(142, 36, 170, 0.15);
}

.journal-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.save-mood-pill-btn {
  background: linear-gradient(135deg, #8E24AA 0%, #EC407A 100%);
  color: #FFFFFF;
  border: none;
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: var(--transition-bounce);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.save-mood-pill-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(236, 64, 122, 0.35);
}

/* ==========================================================================
   VIEW: RESUMEN (STATS & CHARTS)
   ========================================================================== */

.resumen-view-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tabs-selector {
  display: flex;
  background-color: var(--white);
  padding: 6px;
  border-radius: 40px;
  box-shadow: var(--shadow-card);
  border: var(--border-glass);
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-normal);
}

.tab-btn.active {
  background-color: var(--accent-purple);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(126, 87, 194, 0.25);
}

/* ==========================================================================
   MODERN STREAK & FOCUS CARD (MINIMALIST & THEME-CONGRUENT)
   ========================================================================== */

.streak-card.modern-streak-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: var(--white);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg, 24px);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: var(--transition-normal);
}

.streak-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.streak-header-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.streak-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #FF5722;
  background: rgba(255, 87, 34, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
}

.streak-tag-badge i,
.streak-tag-badge svg {
  width: 13px;
  height: 13px;
  stroke: #FF5722;
}

.streak-status-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-purple, #AB47BC);
  background: rgba(171, 71, 188, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(171, 71, 188, 0.2);
}

.streak-value-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.streak-flame-glow-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.16), rgba(255, 64, 129, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 87, 34, 0.18);
  flex-shrink: 0;
}

.streak-flame-icon {
  width: 26px;
  height: 26px;
  color: #FF5722;
  fill: #FF5722;
  filter: drop-shadow(0 2px 5px rgba(255, 87, 34, 0.35));
}

.streak-number-col {
  display: flex;
  align-items: center;
}

.streak-number {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

/* Micro stats chips */
.streak-micro-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.streak-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-main);
  background: rgba(150, 140, 160, 0.08);
  padding: 5px 11px;
  border-radius: 12px;
  border: 1px solid rgba(150, 140, 160, 0.15);
}

.stat-chip-lbl {
  color: var(--text-muted);
  font-weight: 500;
}

.stat-chip-pct {
  color: var(--accent-pink, #EC407A);
  font-weight: 700;
}

/* Weekly Consistency Strip */
.streak-week-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.streak-week-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.streak-week-dot-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.streak-week-dot-col.is-today .streak-week-dot-label {
  color: var(--accent-purple, #AB47BC);
  font-weight: 900;
}

.streak-week-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(150, 140, 160, 0.1);
  border: 1.5px solid rgba(150, 140, 160, 0.18);
  font-size: 11px;
  font-weight: 800;
  transition: var(--transition-normal);
}

.streak-week-dot.perfect {
  background: linear-gradient(135deg, #EC407A, #AB47BC);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(171, 71, 188, 0.35);
}

.streak-week-dot.partial {
  background: linear-gradient(135deg, #FFA726, #FB8C00);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(251, 140, 0, 0.35);
}

.streak-week-dot.missed {
  background: rgba(150, 140, 160, 0.05);
  border-color: rgba(150, 140, 160, 0.15);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.streak-week-dot.future {
  background: transparent;
  border-style: dashed;
  border-color: rgba(150, 140, 160, 0.2);
}

.streak-week-dot-col.is-today .streak-week-dot {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent-purple, #AB47BC);
}

.dot-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* Streak Right - Star Progress Widget */
.streak-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.star-progress-widget {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.star-progress-aura {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 64, 122, 0.12) 0%, rgba(171, 71, 188, 0.06) 55%, transparent 75%);
  pointer-events: none;
  animation: auraPulse 3.5s ease-in-out infinite alternate;
}

@keyframes auraPulse {
  0% { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1.05); opacity: 1; }
}

.star-progress-svg {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.star-ring-track {
  color: rgba(180, 160, 150, 0.2);
  transition: color 0.3s ease;
}

[data-theme="dark"] .star-ring-track {
  color: rgba(255, 255, 255, 0.08);
}

[data-theme="beige"] .star-ring-track {
  color: rgba(165, 128, 108, 0.22);
}

[data-theme="pearl"] .star-ring-track {
  color: rgba(210, 195, 185, 0.3);
}

#star-progress-arc {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.star-progress-center-node {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--white);
  border: var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  z-index: 2;
}

.star-sparkle-icon {
  filter: drop-shadow(0 2px 5px rgba(236, 64, 122, 0.45));
}

.star-progress-label-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: -2px;
}

.star-pct-number {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-main);
}

.star-pct-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

@media (max-width: 540px) {
  .streak-card.modern-streak-card {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
    padding: 20px 18px;
    gap: 18px;
  }
  .streak-left {
    align-items: center;
  }
  .streak-header-tag,
  .streak-micro-stats,
  .streak-week-strip {
    justify-content: center;
  }
  .streak-value-row {
    justify-content: center;
  }
}

/* Completed Habits stats */
.summary-completed-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-completed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.completion-rate-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.completion-rate-pct {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-main);
}

.completion-rate-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.weekly-completion-chart-container {
  width: 100%;
  height: 120px;
}

#summary-line-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ==========================================================================
   VIEW: CONFIGURACIÓN
   ========================================================================== */

.config-view-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.form-group input, .form-group select {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid rgba(226, 208, 199, 0.4);
  border-radius: var(--border-radius-md);
  padding: 14px 16px;
  font-size: 15px;
  transition: var(--transition-normal);
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.1);
}

.config-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-primary);
}

.config-option:last-child {
  border-bottom: none;
}

.config-option span {
  font-size: 15px;
  font-weight: 600;
}

/* Theme Selector in Configuration */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.theme-card-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--border-radius-md);
  border: 2px solid rgba(212, 186, 170, 0.45);
  background-color: var(--white);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  user-select: none;
}

[data-theme="pearl"] .theme-card-option,
[data-theme="white"] .theme-card-option {
  border-color: rgba(220, 210, 202, 0.6);
  background-color: #FFFFFF;
}

[data-theme="dark"] .theme-card-option {
  border-color: rgba(255, 255, 255, 0.08);
  background-color: var(--bg-secondary);
}

.theme-card-option:hover {
  transform: translateY(-2px);
  border-color: var(--accent-purple);
  box-shadow: 0 6px 18px rgba(126, 87, 194, 0.12);
}

.theme-card-option.active {
  border-color: #EC407A;
  background-color: var(--pink-bg);
  box-shadow: 0 6px 20px rgba(236, 64, 122, 0.20);
}

[data-theme="dark"] .theme-card-option.active {
  border-color: #F06292;
  background-color: rgba(236, 64, 122, 0.14);
}

.theme-preview-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

[data-theme="dark"] .theme-preview-dots {
  background: rgba(255, 255, 255, 0.06);
}

.preview-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.preview-dark .dot-bg { background: #121016; }
.preview-dark .dot-card { background: #1D1926; }
.preview-dark .dot-accent { background: #EC407A; }

.preview-beige .dot-bg { background: #EAD8C8; }
.preview-beige .dot-card { background: #F7E7DA; }
.preview-beige .dot-accent { background: #9C27B0; }

.preview-pearl .dot-bg { background: #FAF6F2; }
.preview-pearl .dot-card { background: #FFFFFF; }
.preview-pearl .dot-accent { background: #F06292; }

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

.theme-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.theme-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.theme-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EC407A;
  color: #FFFFFF;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-check-icon i {
  width: 14px;
  height: 14px;
}

.theme-card-option.active .theme-check-icon {
  display: flex;
}

.danger-zone {
  border: 1px solid rgba(236, 64, 122, 0.2);
}

.danger-zone h3 {
  color: var(--accent-pink);
}

.danger-zone p {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.reset-data-btn {
  background-color: rgba(236, 64, 122, 0.08);
  border: 1.5px solid var(--accent-pink);
  color: var(--accent-pink);
  padding: 14px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-bounce);
}

.reset-data-btn:hover {
  background-color: var(--accent-pink);
  color: var(--white);
  transform: translateY(-2px);
}

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(46, 42, 58, 0.4);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background-color: var(--white);
  width: 90%;
  max-width: 460px;
  border-radius: var(--border-radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  border: var(--border-glass);
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

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

.modal-header h3 {
  font-size: 20px;
  font-weight: 700;
}

.close-modal-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}

/* Form selectors for category/color radio dots */
.category-selectors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 5px;
}

.category-radio {
  cursor: pointer;
  position: relative;
  display: inline-flex;
}

.category-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
  box-sizing: border-box;
}

.category-radio input:checked + .radio-dot {
  transform: scale(1.12);
  border-color: #FFFFFF;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.purple-dot { background-color: var(--purple-bg); color: var(--purple-icon); }
.teal-dot   { background-color: var(--teal-bg); color: var(--teal-icon); }
.orange-dot { background-color: var(--orange-bg); color: var(--orange-icon); }
.pink-dot   { background-color: var(--pink-bg); color: var(--pink-icon); }
.blue-dot   { background-color: var(--blue-bg); color: var(--blue-icon); }
.amber-dot  { background-color: var(--amber-bg); color: var(--amber-icon); }
.indigo-dot { background-color: var(--indigo-bg); color: var(--indigo-icon); }
.red-dot    { background-color: var(--red-bg); color: var(--red-icon); }
.green-dot  { background-color: var(--green-bg); color: var(--green-icon); }
.cyan-dot   { background-color: var(--cyan-bg); color: var(--cyan-icon); }

/* ==========================================================================
   WHEEL TIME PICKER (DISEÑO TUMBLER / RELOJ ZEN CON A.M. / P.M.)
   ====================================/* ==========================================================================
   WHEEL TIME PICKER (DISEÑO TUMBLER / RELOJ ZEN CON A.M. / P.M.)
   ========================================================================== */

.wheel-time-picker-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 6px 0 12px 0;
}

/* 1. Modo Beige Cálido (Default / Base): Fondo Morado con 2 tonos más de cuerpo */
.wheel-time-picker {
  background: linear-gradient(180deg, #E0CEF2 0%, #D2BCED 100%);
  border: 1.5px solid rgba(142, 36, 170, 0.35);
  border-radius: 18px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(142, 36, 170, 0.12), 0 4px 14px rgba(142, 36, 170, 0.14);
  user-select: none;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  outline: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Vignettes superiores e inferiores en Modo Beige: Morado Claro Calibrado */
.wheel-time-picker::before,
.wheel-time-picker::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 4;
}

.wheel-time-picker::before {
  top: 0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  background: linear-gradient(to bottom, #E0CEF2 25%, rgba(224, 206, 242, 0) 100%);
}

.wheel-time-picker::after {
  bottom: 0;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  background: linear-gradient(to top, #D2BCED 25%, rgba(210, 188, 237, 0) 100%);
}

/* Banda central de selección */
.wheel-center-band {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 48px;
  transform: translateY(-50%);
  border-top: 1.5px solid rgba(142, 36, 170, 0.40);
  border-bottom: 1.5px solid rgba(142, 36, 170, 0.40);
  pointer-events: none;
  z-index: 1;
}

.wheel-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  position: relative;
  z-index: 2;
  outline: none;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.wheel-column:focus {
  background-color: rgba(142, 36, 170, 0.08);
}

.wheel-column-ampm {
  width: 80px;
}

.wheel-scroll-track {
  height: 144px; /* 3 elementos visibles * 48px */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  padding: 48px 0; /* Padding for center snap */
  box-sizing: border-box;
}

.wheel-scroll-track::-webkit-scrollbar {
  display: none;
}

.wheel-item {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 24px;
  font-weight: 500;
  color: #5E1F7A;
  opacity: 0.50;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  letter-spacing: 0.5px;
}

/* Fila activa en el centro en Modo Beige: Morado Profundo Elegante */
.wheel-item.active {
  font-size: 32px;
  font-weight: 800;
  color: #4A148C;
  opacity: 1;
  transform: scale(1.06);
  text-shadow: 0 0 10px rgba(74, 20, 140, 0.25);
}

.wheel-item-ampm {
  font-size: 20px;
  font-weight: 600;
  text-transform: lowercase;
}

.wheel-item-ampm.active {
  font-size: 24px;
  font-weight: 800;
  color: #4A148C;
}

/* 2. Modo Blanco Aperlado: Fondo Morado Pastel Suave con Números Morados Fuertes para Alto Contraste */
[data-theme="pearl"] .wheel-time-picker,
[data-theme="white"] .wheel-time-picker {
  background: linear-gradient(180deg, #FAF5FF 0%, #F5EEF8 100%);
  border: 1.5px solid rgba(186, 104, 200, 0.35);
  box-shadow: inset 0 2px 6px rgba(186, 104, 200, 0.06), 0 4px 14px rgba(186, 104, 200, 0.10);
}

[data-theme="pearl"] .wheel-time-picker::before,
[data-theme="white"] .wheel-time-picker::before {
  background: linear-gradient(to bottom, #FAF5FF 25%, rgba(250, 245, 255, 0) 100%);
}

[data-theme="pearl"] .wheel-time-picker::after,
[data-theme="white"] .wheel-time-picker::after {
  background: linear-gradient(to top, #F5EEF8 25%, rgba(245, 238, 248, 0) 100%);
}

[data-theme="pearl"] .wheel-center-band,
[data-theme="white"] .wheel-center-band {
  border-top-color: rgba(142, 36, 170, 0.38);
  border-bottom-color: rgba(142, 36, 170, 0.38);
}

[data-theme="pearl"] .wheel-item,
[data-theme="white"] .wheel-item {
  color: #581C87;
  opacity: 0.52;
  font-weight: 600;
}

[data-theme="pearl"] .wheel-item.active,
[data-theme="white"] .wheel-item.active {
  color: #6B21A8;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(107, 33, 168, 0.28);
}

[data-theme="pearl"] .wheel-item-ampm.active,
[data-theme="white"] .wheel-item-ampm.active {
  color: #6B21A8;
  font-weight: 800;
}

/* 3. Modo Oscuro: Fondo Azul Fuerte / Azul Noche con Números Morados Neón */
[data-theme="dark"] .wheel-time-picker {
  background: linear-gradient(180deg, #0A0F24 0%, #0F172A 100%) !important;
  border: 1.5px solid rgba(186, 104, 200, 0.35) !important;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(10, 15, 36, 0.5) !important;
}

[data-theme="dark"] .wheel-time-picker::before {
  background: linear-gradient(to bottom, #0A0F24 25%, rgba(10, 15, 36, 0) 100%) !important;
}

[data-theme="dark"] .wheel-time-picker::after {
  background: linear-gradient(to top, #0F172A 25%, rgba(15, 23, 42, 0) 100%) !important;
}

[data-theme="dark"] .wheel-center-band {
  border-top: 1.5px solid rgba(186, 104, 200, 0.35) !important;
  border-bottom: 1.5px solid rgba(186, 104, 200, 0.35) !important;
}

[data-theme="dark"] .wheel-item {
  color: #C084FC !important;
  opacity: 0.45 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .wheel-item.active {
  color: #E879F9 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(232, 121, 249, 0.6), 0 0 24px rgba(186, 104, 200, 0.4) !important;
}

[data-theme="dark"] .wheel-item-ampm.active {
  color: #E879F9 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(232, 121, 249, 0.6), 0 0 24px rgba(186, 104, 200, 0.4) !important;
}

.days-selectors-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 5px;
}

.day-checkbox {
  cursor: pointer;
  position: relative;
}

.day-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.day-checkbox span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--bg-primary);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  transition: var(--transition-bounce);
}

.day-checkbox input:checked + span {
  background-color: var(--accent-purple);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(126, 87, 194, 0.2);
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 30px;
}

.btn-secondary {
  background-color: var(--bg-primary);
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-secondary:hover {
  background-color: var(--bg-secondary);
}

.btn-primary {
  background: linear-gradient(135deg, #7E57C2 0%, #EC407A 100%);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: var(--transition-bounce);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(236, 64, 122, 0.3);
}

/* ==========================================================================
   TOAST NOTIFICATION
   ========================================================================== */

.toast {
  position: fixed;
  bottom: 85px; /* Stay clear of mobile navbar */
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--text-main);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  z-index: 2000;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

.toast-icon {
  color: #FFA726;
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   RESPONSIVE DESIGN MEDIA QUERIES
   ========================================================================== */

/* Tablet & Mobile Screens (Switching to Mobile layout) */
@media (max-width: 900px) {
  body {
    background-color: var(--bg-primary); /* Use solid color on mobile */
  }

  .app-container {
    flex-direction: column;
    padding: 20px 16px 90px 16px;
    gap: 20px;
  }

  .desktop-sidebar {
    display: none; /* Hide desktop menu */
  }

  .desktop-sidebar {
    display: none; /* Hide desktop menu */
  }

  /* Ajustes barra superior transparente y sticky en móvil */
  .global-top-bar {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(236, 64, 122, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }

  [data-theme="beige"] .global-top-bar {
    background: rgba(247, 240, 233, 0.82) !important;
    border-bottom-color: rgba(212, 186, 170, 0.45) !important;
  }

  [data-theme="dark"] .global-top-bar {
    background: rgba(22, 20, 28, 0.84) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  }
  
  .top-bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 2;
  }

  .top-bar-title {
    display: none; /* Ocultar texto SEIKO en móvil para ahorrar espacio */
  }

  /* Reducir ligeramente el logo en móvil */
  .top-bar-left svg {
    width: 40px !important;
    height: 40px !important;
  }

  .top-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    z-index: 2;
  }

  .top-bar-right .quick-sync-btn {
    width: 32px !important;
    height: 32px !important;
  }

  .top-bar-right .sakura-sync-img {
    width: 20px !important;
    height: 20px !important;
  }

  .top-bar-right .mobile-streak-pill {
    padding: 3px 6px !important;
    font-size: 12px !important;
    transform: scale(1) !important;
  }

  .top-bar-right .mobile-profile {
    transform: scale(1) !important;
  }

  .top-bar-right .profile-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .seiko-clock-horizontal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 4px !important;
    z-index: 1;
    pointer-events: none;
    display: flex !important;
    align-items: baseline !important;
  }

  .clock-time-display {
    font-size: 2.25rem !important; /* Mucho más grande, claro y visible */
    font-weight: 900 !important;
    letter-spacing: -1.2px !important;
    line-height: 1 !important;
  }

  .clock-ampm-display {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
  }

  .clock-date-row-horiz {
    display: none; /* Ocultar fecha en móvil porque no cabe en la barra superior */
  }

  .seiko-clock-mobile {
    display: none; /* Ya no se usa */
  }

  .mobile-nav {
    display: flex; /* Show mobile bottom navigation */
  }
  
  .dashboard-header {
    display: none; /* Hide redundant desktop header */
  }

  .today-title-col h2 {
    font-size: 26px;
  }

  .today-progress-card {
    padding: 6px 16px 6px 6px;
  }

  .progress-ring-container {
    width: 52px;
    height: 52px;
  }
  
  .progress-ring-container svg {
    width: 52px;
    height: 52px;
  }

  .card {
    padding: 18px;
    border-radius: var(--border-radius-md);
  }

  .weekly-chart-container {
    height: 180px;
  }
  
  #weekly-line-chart {
    height: 140px;
  }

  .weekly-chart-labels {
    padding: 8px 10px 0 10px;
  }
  
  .modal-card {
    padding: 24px;
    width: 95%;
  }

  .toast {
    bottom: 85px;
  }
  
  .mobile-only {
    display: flex !important;
  }
}

/* Desktop sizing optimizations */
@media (min-width: 901px) {
  .mobile-only {
    display: none !important;
  }
  
  /* Restrict dashboard max content width */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Additional aesthetics */
.emoji-svg {
  width: 100%;
  height: 100%;
  transition: var(--transition-bounce);
}

.emoji-svg circle {
  transition: stroke 0.4s ease;
}

/* ==========================================================================
   FASE 2: MEJORAS VISUALES - ENSO Y GRÁFICOS
   ========================================================================== */

/* Ensō circles (organic brush strokes) */
.enso-circle {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: url(#enso-brush);
  transform-origin: center;
  stroke-linecap: round;
}

/* Today's main progress circle — crisp, vivid, no blurry brush effect */
#today-progress-circle {
  filter: drop-shadow(0 0 8px rgba(236, 64, 122, 0.35)) drop-shadow(0 0 16px rgba(126, 87, 194, 0.25));
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  stroke-linecap: round;
}

.enso-bg-circle {
  filter: url(#enso-brush);
  opacity: 0.35;
  transform-origin: center;
  stroke-linecap: round;
}

/* Smooth line chart curve transitions */
#chart-line-path, 
#chart-area-path, 
#summary-line-path {
  transition: d 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   MODAL — CREAR / EDITAR HÁBITO Y ALARMA
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 20px;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  border: var(--border-glass);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.show .modal-card {
  transform: translateY(0) scale(1);
}

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

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.close-modal-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.close-modal-btn:hover {
  background: var(--grey-bg);
  color: var(--text-main);
}

.modal-card .form-group {
  margin-bottom: 18px;
}

.modal-card .form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.modal-card .form-group input[type="text"],
.modal-card .form-group input[type="time"],
.modal-card .form-group select {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  border: 1.5px solid rgba(126, 87, 194, 0.18);
  background: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-card .form-group input:focus,
.modal-card .form-group select:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.15);
}

/* Categoría / Color selectors */
.category-selectors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.category-radio {
  cursor: pointer;
}

.category-radio input[type="radio"] {
  display: none;
}

.radio-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
}

.category-radio input:checked + .radio-dot {
  border-color: var(--text-main);
  transform: scale(1.12);
}

.purple-dot  { background: var(--purple-bg);  color: var(--purple-icon); }
.teal-dot    { background: var(--teal-bg);    color: var(--teal-icon); }
.orange-dot  { background: var(--orange-bg);  color: var(--orange-icon); }
.pink-dot    { background: var(--pink-bg);    color: var(--pink-icon); }

.category-icon-small {
  width: 20px;
  height: 20px;
}

/* Días de la semana */
.days-selectors-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.day-checkbox {
  cursor: pointer;
}

.day-checkbox input[type="checkbox"] {
  display: none;
}

.day-checkbox span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(126, 87, 194, 0.2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.2s;
}

.day-checkbox input:checked + span {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

/* Modal footer buttons */
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.btn-primary {
  padding: 11px 24px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #7E57C2, #EC407A);
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-secondary {
  padding: 11px 20px;
  border-radius: 50px;
  border: 1.5px solid rgba(126, 87, 194, 0.25);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--grey-bg);
  color: var(--text-main);
}

/* ==========================================================================
   TOAST NOTIFICATION
   ========================================================================== */

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: linear-gradient(135deg, #7E57C2, #EC407A);
  color: #fff;
  border-radius: 50px;
  padding: 13px 28px;
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(126, 87, 194, 0.4);
  z-index: 99999;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==========================================================================
   EDITAR / REORDENAR HÁBITOS — Drag handle + action buttons
   ========================================================================== */

/* Handle de arrastre — optimizado para mouse y pantallas táctiles (móvil) */
.habit-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 100%;
  color: var(--text-muted);
  cursor: grab;
  opacity: 0.6;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s, color 0.2s, transform 0.15s;
  flex-shrink: 0;
  margin-right: 4px;
}

.habit-drag-handle:active {
  cursor: grabbing;
  opacity: 1;
  color: var(--accent-pink, #EC407A);
  transform: scale(1.18);
}

.habit-drag-handle i {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Mostrar handle al pasar el mouse sobre la tarjeta */
.habit-card:hover .habit-drag-handle {
  opacity: 0.95;
  color: var(--accent-pink, #EC407A);
}

/* Grupo de botones para reordenar (Subir, Bajar, Hasta Arriba, Hasta Abajo) */
.habit-reorder-group {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  margin-right: 12px;
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.habit-card:hover .habit-reorder-group {
  opacity: 1;
}

.habit-reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .habit-reorder-btn {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.habit-reorder-btn:hover {
  background: var(--bg-card);
  color: var(--accent-pink, #EC407A);
  border-color: rgba(236, 64, 122, 0.4);
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.habit-reorder-btn i {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Contenedor de botones editar + eliminar */
.habit-card-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.habit-card-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.15s;
  opacity: 0;
}

/* Mostrar botones al pasar el cursor sobre la tarjeta */
.habit-card:hover .habit-card-actions button {
  opacity: 1;
}

.habit-card-actions .edit-btn {
  color: var(--accent-purple);
}

.habit-card-actions .edit-btn:hover {
  background: var(--purple-bg);
  transform: scale(1.1);
}

.habit-card-actions .delete-btn {
  color: var(--pink-icon);
}

.habit-card-actions .delete-btn:hover {
  background: var(--pink-bg);
  transform: scale(1.1);
}

.card-action-btn.sound-test-btn {
  color: #D7A15C;
}

.card-action-btn.sound-test-btn:hover {
  background: rgba(215, 161, 92, 0.15);
  transform: scale(1.1);
}

.habit-card-actions button i {
  width: 17px;
  height: 17px;
  pointer-events: none;
}

/* Estado de arrastre activo — tarjeta que se mueve */
.habit-card.dragging {
  opacity: 0.35;
  transform: scale(0.97);
  box-shadow: none !important;
}

.habit-card.is-being-dragged {
  display: none !important;
}

/* Tarjeta Flotante Virtual (Ghost Clone con aceleración por GPU) */
.habit-floating-ghost {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28), 0 6px 20px rgba(236, 64, 122, 0.35) !important;
  opacity: 0.98;
  border-radius: var(--border-radius-md);
  margin: 0 !important;
  border: 1.5px solid var(--accent-pink, #EC407A) !important;
  touch-action: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Espacio / Hueco limpio y natural que se abre en la lista (sin rayitas) */
.habit-card-placeholder {
  height: 74px;
  border-radius: var(--border-radius-md);
  background: transparent;
  border: none;
  box-sizing: border-box;
  margin-bottom: 0;
  pointer-events: none;
  transition: height 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.habit-card.drag-over {
  border-top: 3px solid var(--accent-pink, #EC407A) !important;
  transform: translateY(3px);
  transition: transform 0.15s ease;
}

/* ==========================================================================
   VIEW: DIARIO PERSONAL (PERSONAL JOURNAL)
   ========================================================================== */

.journal-view-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.journal-date-navigator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  margin-bottom: 0;
}

.journal-nav-arrow-btn {
  background: var(--bg-primary);
  border: 1px solid rgba(212, 186, 170, 0.5);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: var(--transition-bounce);
}

[data-theme="dark"] .journal-nav-arrow-btn {
  border-color: rgba(255, 255, 255, 0.08);
}

.journal-nav-arrow-btn:hover {
  background-color: var(--purple-bg);
  color: var(--purple-accent);
  transform: scale(1.08);
}

/* ==========================================================================
   DIGITAL NOTEBOOK / CUADERNO DIGITAL (Fiel a la Referencia)
   ========================================================================== */

.notebook-outer-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 10px 0 30px;
}

.notebook-device-mockup {
  display: flex;
  width: 100%;
  max-width: 920px;
  min-height: 820px;
  background-color: transparent;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(60, 31, 72, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .notebook-device-mockup {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* Hoja Principal del Cuaderno */
.notebook-sheet-container {
  flex: 1;
  background-color: #FFFFFF;
  border-radius: 14px 0 0 14px;
  box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.03), -2px 0 10px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(212, 186, 170, 0.45);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 820px;
}

[data-theme="dark"] .notebook-sheet-container {
  background-color: #1E1B24;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="beige"] .notebook-sheet-container {
  background-color: #FAF6F0;
}

[data-theme="pearl"] .notebook-sheet-container {
  background-color: #FAFAFC;
}

/* Barra superior del cuaderno */
.notebook-top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px 20px;
  border-bottom: 1px solid rgba(212, 186, 170, 0.35);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  gap: 12px;
  flex-wrap: wrap;
  z-index: 25;
}

[data-theme="dark"] .notebook-top-bar {
  background-color: rgba(30, 27, 36, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.notebook-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.notebook-home-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid rgba(212, 186, 170, 0.5);
  background: var(--bg-primary);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notebook-home-btn:hover {
  background: var(--purple-bg);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: scale(1.08);
}

/* Selector de 5 Estilos de Hoja */
.notebook-style-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(212, 186, 170, 0.18);
  padding: 3px;
  border-radius: 20px;
  border: 1px solid rgba(212, 186, 170, 0.35);
}

[data-theme="dark"] .notebook-style-selector {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.paper-style-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 14px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.paper-style-pill:hover {
  color: var(--text-main);
}

.paper-style-pill.active {
  background-color: #3C1F48;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(60, 31, 72, 0.25);
}

[data-theme="dark"] .paper-style-pill.active {
  background-color: var(--accent-purple);
}

.paper-style-pill i {
  width: 13px;
  height: 13px;
}

/* Pen / Drawing Mode Toggle Button in Top Bar */
.notebook-pen-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(124, 58, 237, 0.4);
  background: var(--bg-primary);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notebook-pen-toggle-btn:hover {
  background-color: var(--purple-bg);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: translateY(-1px);
}

.notebook-pen-toggle-btn.active {
  background: linear-gradient(135deg, #7C3AED, #9C27B0);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}

.notebook-pen-toggle-btn i {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   SELECTOR Y ESTILOS DE TIPOGRAFÍA DEL DIARIO (5 Estilos + Outfit)
   ========================================================================== */

.notebook-font-picker {
  position: static;
  display: inline-flex;
  align-items: center;
}

.notebook-font-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(224, 142, 121, 0.4);
  background: var(--bg-primary);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .notebook-font-trigger {
  border-color: rgba(255, 77, 136, 0.35);
}

.notebook-font-trigger:hover {
  border-color: var(--accent-pink, #EC407A);
  color: var(--accent-pink, #EC407A);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(236, 64, 122, 0.2);
}

.notebook-font-trigger i {
  width: 14px;
  height: 14px;
  color: var(--accent-pink, #EC407A);
}

.notebook-font-trigger .font-chevron {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.notebook-font-picker.open .font-chevron {
  transform: rotate(180deg);
}

.notebook-font-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 20px; /* Exactamente al ras de la parte derecha de la hoja del diario */
  left: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 295px;
  max-width: calc(100vw - 32px);
  z-index: 350;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fontDropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fontDropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-theme="dark"] .notebook-font-dropdown {
  background: rgba(24, 26, 38, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.font-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
}

.font-option-btn:hover {
  background: rgba(236, 64, 122, 0.08);
}

[data-theme="dark"] .font-option-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.font-option-btn.active {
  background: rgba(236, 64, 122, 0.14);
  color: var(--accent-pink, #EC407A);
  font-weight: 700;
}

[data-theme="dark"] .font-option-btn.active {
  background: rgba(255, 77, 136, 0.22);
  color: #FF4D88;
}

.font-preview {
  font-size: 15px;
  white-space: nowrap;
  flex: 1;
}

.font-preview.font-greatvibes {
  font-size: 21px !important;
  line-height: 1.2;
}

.font-preview.font-caveat {
  font-size: 17px !important;
}

.font-preview.font-cormorant {
  font-size: 16px !important;
}

.font-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  white-space: nowrap;
}

[data-theme="dark"] .font-tag {
  background: rgba(255, 255, 255, 0.08);
}

/* 1. Cursiva con Ondas (Great Vibes) */
.font-greatvibes,
[data-notebook-font="greatvibes"] .notebook-page-canvas textarea,
[data-notebook-font="greatvibes"] .notebook-page-canvas input {
  font-family: 'Great Vibes', 'Dancing Script', cursive, sans-serif !important;
  font-size: 26px !important;
  line-height: 34px !important;
  letter-spacing: 0.5px;
}
[data-notebook-font="greatvibes"] .notebook-page-title-input {
  font-size: 32px !important;
  font-weight: 400 !important;
}

/* 2. Manuscrita Zen (Caveat) */
.font-caveat,
[data-notebook-font="caveat"] .notebook-page-canvas textarea,
[data-notebook-font="caveat"] .notebook-page-canvas input {
  font-family: 'Caveat', cursive, sans-serif !important;
  font-size: 21px !important;
  line-height: 32px !important;
  letter-spacing: 0.3px;
}
[data-notebook-font="caveat"] .notebook-page-title-input {
  font-size: 27px !important;
  font-weight: 700 !important;
}

/* 3. Elegante Novela / Caligrafía (Cormorant Garamond) */
.font-cormorant,
[data-notebook-font="cormorant"] .notebook-page-canvas textarea,
[data-notebook-font="cormorant"] .notebook-page-canvas input {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  line-height: 32px !important;
}
[data-notebook-font="cormorant"] .notebook-page-title-input {
  font-size: 25px !important;
  font-weight: 600 !important;
}

/* 4. Máquina de Escribir Vintage (Courier Prime) */
.font-courier,
[data-notebook-font="courier"] .notebook-page-canvas textarea,
[data-notebook-font="courier"] .notebook-page-canvas input {
  font-family: 'Courier Prime', Courier, monospace !important;
  font-size: 15px !important;
  line-height: 32px !important;
}
[data-notebook-font="courier"] .notebook-page-title-input {
  font-size: 21px !important;
  font-weight: 700 !important;
}

/* 5. Libreta Escolar / Notas a Mano (Patrick Hand) */
.font-patrick,
[data-notebook-font="patrick"] .notebook-page-canvas textarea,
[data-notebook-font="patrick"] .notebook-page-canvas input {
  font-family: 'Patrick Hand', cursive, sans-serif !important;
  font-size: 18px !important;
  line-height: 32px !important;
  letter-spacing: 0.2px;
}
[data-notebook-font="patrick"] .notebook-page-title-input {
  font-size: 24px !important;
  font-weight: 700 !important;
}

/* 6. Moderna Suave y Redondeada (Quicksand) */
.font-quicksand,
[data-notebook-font="quicksand"] .notebook-page-canvas textarea,
[data-notebook-font="quicksand"] .notebook-page-canvas input {
  font-family: 'Quicksand', 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 32px !important;
  font-weight: 500;
}
[data-notebook-font="quicksand"] .notebook-page-title-input {
  font-size: 21px !important;
  font-weight: 700 !important;
}

/* 7. Outfit (Por Defecto Seiko) */
.font-outfit,
[data-notebook-font="outfit"] .notebook-page-canvas textarea,
[data-notebook-font="outfit"] .notebook-page-canvas input {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 32px !important;
}

/* Floating / Attached Pen Ribbon (Tools, Colors, Sizes, Actions) */
.notebook-pen-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(248, 245, 255, 0.95));
  border-bottom: 1px solid rgba(212, 186, 170, 0.4);
  gap: 14px;
  flex-wrap: wrap;
  z-index: 6;
  animation: slideDownRibbon 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .notebook-pen-ribbon {
  background: linear-gradient(to right, rgba(35, 30, 44, 0.95), rgba(28, 24, 36, 0.95));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

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

.pen-tools-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(212, 186, 170, 0.2);
  padding: 3px;
  border-radius: 12px;
}

[data-theme="dark"] .pen-tools-group {
  background: rgba(255, 255, 255, 0.05);
}

.pen-tool-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pen-tool-btn:hover {
  color: var(--text-main);
}

.pen-tool-btn.active {
  background: var(--white);
  color: var(--accent-purple);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .pen-tool-btn.active {
  background: var(--accent-purple);
  color: #FFFFFF;
}

.pen-tool-btn i {
  width: 14px;
  height: 14px;
}

/* Color Swatches */
.pen-colors-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pen-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pen-color-dot:hover {
  transform: scale(1.25);
}

.pen-color-dot.active {
  transform: scale(1.3);
  box-shadow: 0 0 0 2.5px var(--accent-purple), 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* --- Botón Rueda Arcoíris con '+' --- */
.custom-color-wheel-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pen-color-wheel-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(#FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF, #FF0000);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.pen-color-wheel-btn:hover {
  transform: scale(1.25);
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.35);
}

.pen-color-wheel-btn.active {
  transform: scale(1.3);
  box-shadow: 0 0 0 2.5px var(--accent-pink, #EC407A), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.wheel-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .wheel-ring {
  background: #1E1B24;
}

.wheel-center-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2D3436;
}

[data-theme="dark"] .wheel-center-plus {
  color: #FFFFFF;
}

.wheel-center-plus i {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}

/* Backdrop para cerrar al tocar afuera */
.custom-color-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
}

/* --- Modal Popover Selector Completo de Colores (Fiel a la Referencia) --- */
.custom-color-picker-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 32px);
  max-width: 320px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: colorPickerPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .custom-color-picker-modal {
  background: rgba(30, 27, 36, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6);
}

@keyframes colorPickerPop {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Floating Mode Pill for Mobile (Alternar entre Dibujar y Desplazar) */
.notebook-floating-mode-pill {
  position: fixed;
  bottom: 84px;
  right: 18px;
  background: linear-gradient(135deg, var(--accent-purple, #7C3AED), var(--accent-pink, #EC407A));
  color: #FFFFFF;
  padding: 8px 14px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
  z-index: 800;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notebook-floating-mode-pill:active {
  transform: scale(0.92);
}

.notebook-floating-mode-pill.pan-mode {
  background: linear-gradient(135deg, #00B894, #00CEC9);
  box-shadow: 0 4px 16px rgba(0, 184, 148, 0.4);
}

.notebook-floating-mode-pill i {
  width: 15px;
  height: 15px;
}

@media (min-width: 1024px) {
  .notebook-floating-mode-pill {
    display: none !important;
  }
}

.picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .picker-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.picker-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.picker-header-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.picker-header-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.picker-close-x-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

[data-theme="dark"] .picker-close-x-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.picker-close-x-btn:hover {
  background: rgba(244, 67, 54, 0.15);
  color: #F44336;
}

.picker-close-x-btn i {
  width: 15px;
  height: 15px;
}

@keyframes colorPickerSlideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.picker-2d-spectrum {
  position: relative;
  width: 100%;
  height: 145px;
  border-radius: 12px;
  background-color: #FF0000;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}

.picker-2d-white-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #FFFFFF, transparent);
}

.picker-2d-black-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000000, transparent);
}

.picker-2d-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  top: 15%;
  left: 85%;
}

.picker-hue-bar-wrapper {
  width: 100%;
  padding: 2px 0;
}

.picker-hue-slider {
  width: 100%;
  height: 14px;
  border-radius: 99px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: linear-gradient(to right, #FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%);
  cursor: pointer;
}

.picker-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transform: scale(1.1);
}

.picker-hue-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.picker-bottom-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.picker-swatch-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.picker-hex-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  padding: 0 10px;
  transition: border-color 0.2s ease;
}

.picker-hex-input-wrap:focus-within {
  border-color: var(--accent-pink, #EC407A);
  background: #FFFFFF;
}

[data-theme="dark"] .picker-hex-input-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .picker-hex-input-wrap:focus-within {
  background: rgba(255, 255, 255, 0.12);
}

.picker-hex-input {
  width: 100%;
  height: 36px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.picker-eyedropper-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .picker-eyedropper-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.picker-eyedropper-btn:hover {
  background: var(--purple-bg);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: scale(1.08);
}

.picker-eyedropper-btn i {
  width: 17px;
  height: 17px;
  pointer-events: none;
}

.picker-quick-presets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .picker-quick-presets {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.picker-preset-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.picker-preset-dot:hover {
  transform: scale(1.25);
}

.picker-confirm-btn {
  width: 100%;
  height: 38px;
  background: linear-gradient(135deg, var(--accent-purple, #7C3AED), var(--accent-pink, #EC407A));
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  transition: all 0.2s ease;
}

.picker-confirm-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.picker-confirm-btn i {
  width: 16px;
  height: 16px;
}

/* Size Buttons */
.pen-size-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pen-size-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background: var(--bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pen-size-btn:hover {
  background: var(--purple-bg);
  border-color: var(--accent-purple);
}

.pen-size-btn.active {
  background: var(--purple-bg);
  border: 2px solid var(--accent-purple);
}

.size-circle {
  background-color: var(--text-main);
  border-radius: 50%;
  display: block;
}

.size-circle.size-s { width: 3px; height: 3px; }
.size-circle.size-m { width: 6px; height: 6px; }
.size-circle.size-l { width: 10px; height: 10px; }

/* Actions (Undo, Redo, Clear) */
.pen-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pen-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pen-action-btn:hover {
  background: var(--purple-bg);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: translateY(-1px);
}

.pen-action-btn.clear-btn:hover {
  background: rgba(244, 67, 54, 0.12);
  color: #F44336;
  border-color: rgba(244, 67, 54, 0.3);
}

.pen-action-btn i {
  width: 14px;
  height: 14px;
}

/* Layered Notebook Canvas Wrapper */
.notebook-page-canvas-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}

/* Overlay Drawing Canvas */
.notebook-drawing-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  touch-action: none;
  mix-blend-mode: multiply;
}

[data-theme="dark"] .notebook-drawing-canvas {
  mix-blend-mode: screen !important;
}

.notebook-drawing-canvas.pen-active {
  pointer-events: auto;
  cursor: crosshair;
}

.notebook-drawing-canvas.eraser-active {
  pointer-events: auto;
  cursor: cell;
}

.notebook-drawing-canvas.pan-active {
  pointer-events: none !important;
  cursor: grab;
}

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

/* Controles de Paginación */
.notebook-page-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 2px 6px;
  border: 1px solid rgba(212, 186, 170, 0.4);
}

[data-theme="dark"] .notebook-page-nav {
  border-color: rgba(255, 255, 255, 0.08);
}

.page-nav-arrow {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.page-nav-arrow:hover {
  background-color: rgba(126, 87, 194, 0.15);
  color: var(--accent-purple);
}

.page-nav-arrow i {
  width: 15px;
  height: 15px;
}

.notebook-page-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.notebook-page-tag input {
  width: 32px;
  text-align: center;
  border: 1px solid rgba(212, 186, 170, 0.5);
  background: var(--white);
  color: var(--text-main);
  border-radius: 4px;
  font-weight: 800;
  font-size: 12px;
  padding: 2px 0;
  outline: none;
}

[data-theme="dark"] .notebook-page-tag input {
  background-color: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.12);
}

.notebook-tool-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.notebook-tool-btn:hover {
  background: var(--purple-bg);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: translateY(-1px);
}

.notebook-tool-btn.delete-btn:hover {
  background: rgba(244, 67, 54, 0.12);
  color: #F44336;
  border-color: rgba(244, 67, 54, 0.3);
}

.notebook-tool-btn i {
  width: 15px;
  height: 15px;
}

/* Solapas Laterales de Colores (12 Tabs a la Derecha) */
.notebook-tabs-column {
  width: 44px;
  display: flex;
  flex-direction: column;
  padding: 24px 0 20px 0;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.notebook-tab-item {
  height: 48px;
  width: 55px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-left: none;
  user-select: none;
}

.notebook-tab-item:hover {
  width: 44px;
  transform: translateX(4px);
  filter: brightness(1.08);
}

.notebook-tab-item.active {
  width: 46px;
  transform: translateX(6px);
  box-shadow: 4px 3px 12px rgba(0, 0, 0, 0.25);
  filter: brightness(1.12);
}

/* Área de Lienzo / Páginas */
.notebook-canvas-area {
  flex: 1;
  padding: 30px 40px 40px 40px;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .notebook-canvas-area {
    padding: 20px 16px 30px 16px;
  }
}

/* ==========================================================================
   VISTA 1: ÍNDICE INTERACTIVO (Table of Contents)
   ========================================================================== */

.notebook-index-view {
  display: flex;
  flex-direction: column;
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.notebook-index-header {
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #E08E79;
}

.notebook-index-header h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  color: #4A3B32;
  margin: 0;
}

[data-theme="dark"] .notebook-index-header h1 {
  color: #EDE0D8;
}

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

.notebook-index-row {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid rgba(212, 186, 170, 0.3);
  background-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .notebook-index-row {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.notebook-index-row:hover {
  background-color: rgba(126, 87, 194, 0.08);
  border-color: var(--accent-purple);
  transform: translateX(4px);
}

.notebook-index-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.notebook-index-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

.notebook-index-input:focus {
  cursor: text;
}

.notebook-index-arrow {
  color: var(--text-muted);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.notebook-index-row:hover .notebook-index-arrow {
  transform: translateX(4px);
  color: var(--accent-purple);
}

/* ==========================================================================
   VISTA 2: PORTADA DE TEMA
   ========================================================================== */

.notebook-cover-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 600px;
  padding: 20px;
}

.notebook-cover-card {
  width: 100%;
  max-width: 520px;
  min-height: 520px;
  border-radius: 12px;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  position: relative;
}

.notebook-cover-label {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.notebook-cover-title-input {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  padding: 8px 0;
  outline: none;
  width: 100%;
  margin-bottom: 24px;
  font-family: inherit;
}

.notebook-cover-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.notebook-cover-line {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}

.notebook-cover-btn {
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.95);
  color: #3C1F48;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notebook-cover-btn:hover {
  transform: translateY(-2px) scale(1.03);
  background-color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   VISTA 3: PÁGINAS DE ESCRITURA Y 5 ESTILOS DE HOJA
   ========================================================================== */

.notebook-page-canvas {
  width: 100%;
  flex: 1;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}

.notebook-page-title-input {
  width: 100%;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #E08E79;
  padding: 4px 0 10px 0;
  margin-bottom: 20px;
  outline: none;
  font-family: inherit;
}

/* 1. Estilo Rayada (Ruled / Lined) con margen vertical */
.paper-style-ruled {
  width: 100%;
  flex: 1;
  min-height: 580px;
  background-color: transparent;
  background-image: 
    linear-gradient(90deg, transparent 48px, rgba(224, 142, 121, 0.4) 48px, transparent 50px),
    repeating-linear-gradient(to bottom, transparent, transparent 31px, rgba(160, 180, 200, 0.35) 32px);
  padding-left: 60px;
  padding-top: 4px;
  line-height: 32px;
  font-size: 15px;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-main);
  font-family: inherit;
}

[data-theme="dark"] .paper-style-ruled {
  background-image: 
    linear-gradient(90deg, transparent 48px, rgba(236, 64, 122, 0.4) 48px, transparent 50px),
    repeating-linear-gradient(to bottom, transparent, transparent 31px, rgba(255, 255, 255, 0.08) 32px);
}

/* 2. Estilo Cuadriculada (Grid) */
.paper-style-grid {
  width: 100%;
  flex: 1;
  min-height: 580px;
  background-color: transparent;
  background-image: 
    linear-gradient(to right, rgba(160, 180, 200, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160, 180, 200, 0.22) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 12px;
  line-height: 24px;
  font-size: 15px;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-main);
  font-family: inherit;
}

[data-theme="dark"] .paper-style-grid {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

/* 3. Estilo Puntos (Dots / Bullet Journal) */
.paper-style-dots {
  width: 100%;
  flex: 1;
  min-height: 580px;
  background-color: transparent;
  background-image: radial-gradient(rgba(140, 130, 150, 0.4) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  padding: 12px;
  line-height: 24px;
  font-size: 15px;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-main);
  font-family: inherit;
}

[data-theme="dark"] .paper-style-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
}

/* 4. Estilo En Blanco (Blank) */
.paper-style-blank {
  width: 100%;
  flex: 1;
  min-height: 580px;
  background: transparent;
  padding: 12px;
  line-height: 28px;
  font-size: 15px;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-main);
  font-family: inherit;
}

/* 5. Estilo LISTAS (2 Columnas con Checkboxes - Fiel a la Imagen 2) */
.paper-style-lists-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  flex: 1;
}

@media (max-width: 600px) {
  .paper-style-lists-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

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

.lists-column-header {
  margin-bottom: 8px;
}

.lists-column-title-input {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--text-main);
  padding: 4px 0;
  width: 100%;
  outline: none;
  font-family: inherit;
}

.checklist-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  border-bottom: 1px dotted rgba(160, 180, 200, 0.45);
}

[data-theme="dark"] .checklist-item-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.checklist-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid #9E9E9E;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.checklist-checkbox-box:hover {
  border-color: var(--accent-purple);
  transform: scale(1.1);
}

.checklist-checkbox-box.checked {
  background-color: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #FFFFFF;
}

.checklist-checkbox-box i {
  width: 11px;
  height: 11px;
}

.checklist-text-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
}

.checklist-text-input.checked {
  text-decoration: line-through;
  opacity: 0.55;
}

/* Estado de zona de destino — donde se va a soltar */
.habit-card.drag-over {
  border: 2px dashed var(--accent-purple) !important;
  background: var(--purple-bg) !important;
  transform: scale(1.01);
}

/* ==========================================================================
   ALARM SOUND SELECTOR STYLING
   ========================================================================== */

.alarm-sound-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 480px) {
  .alarm-sound-options-grid {
    grid-template-columns: 1fr;
  }
}

.alarm-sound-card-option {
  position: relative;
  cursor: pointer;
  display: block;
}

.alarm-sound-card-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.alarm-sound-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--border-radius-md);
  background-color: var(--bg-primary);
  border: 1.5px solid rgba(212, 186, 170, 0.5);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .alarm-sound-card-inner {
  background-color: var(--bg-secondary);
  border-color: rgba(255, 255, 255, 0.08);
}

.alarm-sound-card-option input[type="radio"]:checked + .alarm-sound-card-inner {
  border-color: var(--accent-purple);
  background-color: var(--purple-bg);
  box-shadow: 0 4px 14px rgba(126, 87, 194, 0.15);
  transform: translateY(-2px);
}

.alarm-sound-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alarm-sound-icon {
  font-size: 18px;
  line-height: 1;
}

.alarm-sound-texts {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.alarm-sound-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.alarm-sound-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.alarm-sound-preview-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-purple);
  background-color: rgba(142, 36, 170, 0.1);
  cursor: pointer;
  transition: var(--transition-bounce);
  padding: 0;
  flex-shrink: 0;
}

.alarm-sound-preview-btn:hover {
  background-color: var(--accent-purple);
  color: #FFFFFF;
  transform: scale(1.15);
}

.alarm-sound-preview-btn i {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

/* ==========================================================================
   HABIT REPORTS / WEEKLY MATRIX TRACKER (Estilo Referencia)
   ========================================================================== */

.habit-report-card {
  padding: 24px;
  background-color: var(--white);
  border-radius: var(--border-radius-lg);
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.habit-report-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.habit-report-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-deco-icon {
  font-size: 20px;
}

.habit-report-title {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #EC407A 0%, #AB47BC 50%, #FFB74D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: inherit;
  letter-spacing: 0.5px;
}

.habit-report-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.report-week-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  background-color: var(--bg-primary);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(212, 186, 170, 0.5);
}

[data-theme="dark"] .report-week-nav {
  border-color: rgba(255, 255, 255, 0.08);
}

.report-week-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: var(--transition-bounce);
}

.report-week-btn:hover {
  background-color: var(--purple-bg);
  color: var(--purple-accent);
  transform: scale(1.15);
}

.report-week-btn i {
  width: 16px;
  height: 16px;
}

.report-week-range {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #D81B60;
  letter-spacing: 0.3px;
}

[data-theme="dark"] .report-week-range {
  color: #FF80AB;
}

.week-dot {
  font-size: 10px;
  color: #EC407A;
}

.habit-report-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.habit-report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  min-width: 540px;
}

.habit-report-table th {
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.habit-report-table th.col-habit-header {
  text-align: left;
  padding-left: 8px;
  min-width: 160px;
}

.habit-report-table th.col-rank-header {
  text-align: center;
  min-width: 90px;
}

.report-habit-row {
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-md);
  transition: background-color 0.2s ease;
}

[data-theme="dark"] .report-habit-row {
  background-color: var(--bg-secondary);
}

.report-habit-row td {
  padding: 10px 4px;
  vertical-align: middle;
  text-align: center;
}

.report-habit-row td:first-child {
  border-radius: 12px 0 0 12px;
  padding-left: 12px;
  text-align: left;
}

.report-habit-row td:last-child {
  border-radius: 0 12px 12px 0;
  padding-right: 12px;
}

.report-habit-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-habit-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.report-habit-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.matrix-check-pill {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background-color: rgba(255, 255, 255, 0.6);
  color: transparent;
}

[data-theme="dark"] .matrix-check-pill {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.matrix-check-pill.completed {
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.matrix-check-pill.not-scheduled {
  opacity: 0.22;
  cursor: default;
  background: transparent;
  border-style: dashed;
}

.matrix-check-pill i {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

/* Category colors for completed matrix pills */
.matrix-check-pill.cat-purple.completed { background: linear-gradient(135deg, #7E57C2, #9C27B0); }
.matrix-check-pill.cat-teal.completed { background: linear-gradient(135deg, #00B4D8, #0077B6); }
.matrix-check-pill.cat-orange.completed { background: linear-gradient(135deg, #FF9800, #F57C00); }
.matrix-check-pill.cat-pink.completed { background: linear-gradient(135deg, #EC407A, #D81B60); }
.matrix-check-pill.cat-blue.completed { background: linear-gradient(135deg, #2196F3, #1976D2); }
.matrix-check-pill.cat-amber.completed { background: linear-gradient(135deg, #FFB300, #FFA000); }
.matrix-check-pill.cat-indigo.completed { background: linear-gradient(135deg, #5C6BC0, #3949AB); }
.matrix-check-pill.cat-red.completed { background: linear-gradient(135deg, #E53935, #C62828); }
.matrix-check-pill.cat-green.completed { background: linear-gradient(135deg, #43A047, #2E7D32); }
.matrix-check-pill.cat-cyan.completed { background: linear-gradient(135deg, #00ACC1, #00838F); }

.report-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background-color: var(--white);
  border: 1px solid rgba(212, 186, 170, 0.5);
  color: var(--text-main);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .report-rank-badge {
  background-color: var(--bg-primary);
  border-color: rgba(255, 255, 255, 0.08);
}

.best-day-row td {
  padding: 10px 4px;
  vertical-align: middle;
  text-align: center;
}

.best-day-label-col {
  text-align: left;
  padding-left: 12px;
}

.best-day-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  color: #E65100;
  border: 1px solid rgba(255, 183, 77, 0.5);
  display: inline-block;
}

[data-theme="dark"] .best-day-badge {
  background: linear-gradient(135deg, #3E2723, #4E342E);
  color: #FFB74D;
  border-color: rgba(255, 183, 77, 0.2);
}

.best-day-icon-col {
  font-size: 18px;
  line-height: 1;
}

.habit-report-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(212, 186, 170, 0.4);
}

[data-theme="dark"] .habit-report-kpis-grid {
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 600px) {
  .habit-report-kpis-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.report-kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(212, 186, 170, 0.4);
  text-align: center;
}

[data-theme="dark"] .report-kpi-item {
  background-color: var(--bg-secondary);
  border-color: rgba(255, 255, 255, 0.08);
}

.report-kpi-item .kpi-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.report-kpi-item .kpi-unit {
  font-size: 14px;
  font-weight: 700;
}

.report-kpi-item .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-met .kpi-value { color: #E91E63; }
.kpi-bestday .kpi-value { color: #0288D1; }
.kpi-total .kpi-value { color: #00897B; }
.kpi-streak .kpi-value { color: #FB8C00; }

/* Sticky columns and responsive styles for Monthly & Yearly Reports */
.habit-report-table th.col-habit-header,
.report-habit-row td:first-child,
.best-day-label-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--bg-primary);
}

[data-theme="dark"] .habit-report-table th.col-habit-header,
[data-theme="dark"] .report-habit-row td:first-child,
[data-theme="dark"] .best-day-label-col {
  background-color: var(--bg-secondary);
}

.yearly-month-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

[data-theme="dark"] .yearly-month-pill {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.yearly-month-pill.completed-perfect {
  background: linear-gradient(135deg, #7E57C2, #9C27B0);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(126, 87, 194, 0.2);
}

.yearly-month-pill.completed-high {
  background: rgba(126, 87, 194, 0.18);
  color: var(--accent-purple);
  border-color: rgba(126, 87, 194, 0.35);
  font-weight: 800;
}

.yearly-month-pill.completed-med {
  background: rgba(236, 64, 122, 0.12);
  color: #D81B60;
  border-color: rgba(236, 64, 122, 0.25);
}

.yearly-month-pill.completed-low {
  background: rgba(255, 160, 0, 0.12);
  color: #F57C00;
  border-color: rgba(255, 160, 0, 0.25);
}

.yearly-month-pill.completed-none {
  opacity: 0.3;
}

/* ==========================================================================
   DASHBOARD ZEN QUICK HUB (CALENDARIO, ALARMAS, ESTADO DEL DÍA)
   ========================================================================== */

.dashboard-quick-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 10px 0;
  width: 100%;
}

@media (max-width: 680px) {
  .dashboard-quick-hub {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.quick-hub-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--border-radius-md);
  background-color: var(--white);
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
}

.quick-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(126, 87, 194, 0.15);
  border-color: var(--accent-purple);
}

.quick-card-left-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-card-calendar .quick-card-icon {
  background: rgba(33, 150, 243, 0.14);
  color: #1976D2;
}

.quick-card-alarms .quick-card-icon {
  background: rgba(255, 152, 0, 0.14);
  color: #F57C00;
}

.quick-card-mood .quick-card-icon {
  background: rgba(236, 64, 122, 0.14);
  color: #EC407A;
}

.quick-card-icon i {
  width: 18px;
  height: 18px;
}

.quick-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.quick-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.quick-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.quick-card-arrow {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.quick-hub-card:hover .quick-card-arrow {
  transform: translateX(3px);
  color: var(--accent-purple);
}

/* Dashboard Quick Mood Emojis Strip (1-Tap Mood Selector) */
.dashboard-mood-quick-strip {
  background: var(--white);
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  margin: 6px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mood-quick-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.mood-quick-emojis {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mood-quick-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 18px;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 13px;
}

.mood-quick-btn small {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.mood-quick-btn:hover {
  transform: scale(1.08);
  border-color: var(--accent-purple);
  background-color: var(--purple-bg);
}

.mood-quick-btn.active {
  background: linear-gradient(135deg, #7E57C2, #EC407A);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(236, 64, 122, 0.3);
}

.mood-quick-btn.active small {
  color: #FFFFFF;
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVA INTEGRAL MÓVIL (PANTALLAS <= 900px & <= 768px)
   ========================================================================== */

@media (max-width: 900px) {
  .desktop-sidebar {
    display: none !important;
  }
  
  .mobile-header {
    display: flex !important;
    padding: 12px 16px;
  }

  .mobile-header h1 {
    font-size: 18px;
  }
  
  .mobile-nav {
    display: flex !important;
    padding: 6px 2px 10px 2px;
    gap: 1px;
    background-color: var(--white);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: var(--border-glass);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    z-index: 1000;
  }

  .mobile-nav-item {
    font-size: 9.5px;
    gap: 2px;
    padding: 4px 1px;
    flex: 1;
    min-width: 0;
  }

  .mobile-nav-item i {
    width: 18px;
    height: 18px;
  }

  .mobile-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
  }

  .app-container {
    padding: 12px 12px 80px 12px !important;
    gap: 0;
  }

  .main-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .dashboard-header {
    display: none !important;
  }
}

/* --- CUADERNO DIGITAL / DIARIO MÓVIL (100% VISIBLE Y FUNCIONAL) --- */
@media (max-width: 768px) {
  .notebook-outer-container {
    padding: 0 0 20px 0 !important;
    width: 100% !important;
  }

  .notebook-device-mockup {
    flex-direction: column !important;
    width: 100% !important;
    min-height: auto !important;
    box-shadow: var(--shadow-card) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .notebook-sheet-container {
    border-radius: 16px 16px 0 0 !important;
    border-right: 1px solid rgba(212, 186, 170, 0.45) !important;
    min-height: 520px !important;
    width: 100% !important;
  }

  /* Las 12 Solapas convertidas en tira horizontal táctil con scroll suave */
  .notebook-tabs-column {
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px 10px 10px 10px !important;
    background: var(--bg-primary) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    scrollbar-width: none !important;
    border-top: 1px solid rgba(212, 186, 170, 0.3) !important;
    border-radius: 0 0 16px 16px !important;
  }

  .notebook-tabs-column::-webkit-scrollbar {
    display: none;
  }

  .notebook-tab-item {
    height: 34px !important;
    width: auto !important;
    min-width: 52px !important;
    padding: 0 10px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transform: none !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  .notebook-tab-item:hover {
    transform: none !important;
    width: auto !important;
  }

  .notebook-tab-item.active {
    transform: scale(1.06) !important;
    width: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }

  /* Barra de Herramientas del Cuaderno Móvil */
  .notebook-top-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .notebook-top-left {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 4px !important;
  }

  .notebook-style-selector {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    padding: 3px !important;
  }

  .notebook-style-selector::-webkit-scrollbar {
    display: none;
  }

  .paper-style-pill {
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .notebook-pen-ribbon {
    padding: 6px 8px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
  }

  .notebook-pen-ribbon::-webkit-scrollbar {
    display: none;
  }

  .notebook-canvas-area {
    padding: 12px 10px 20px 10px !important;
  }

  .notebook-page-canvas textarea {
    min-height: 440px !important;
    font-size: 16px !important;
    padding: 6px 4px !important;
  }

  .notebook-page-title-input {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .custom-color-picker-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    z-index: 9999 !important;
  }

  .notebook-font-dropdown {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    z-index: 9999 !important;
  }

  /* Calendario Móvil */
  .calendar-top-controls {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .calendar-card {
    padding: 14px 8px !important;
  }

  .calendar-weekdays {
    gap: 2px !important;
    font-size: 10.5px !important;
  }

  .calendar-days-grid {
    gap: 3px !important;
  }

  .calendar-day-cell {
    min-height: 36px !important;
    padding: 2px !important;
    font-size: 12px !important;
  }

  /* Alarmas Móvil */
  .alarm-card {
    padding: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .alarm-left {
    width: 100% !important;
  }

  .alarm-right {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Estado de Ánimo Móvil */
  .mood-buttons-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }

  .mood-btn {
    padding: 6px 2px !important;
  }

  .mood-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .mood-label {
    font-size: 10px !important;
  }

  /* --- HABIT TRACKER / MATRIZ DE PROGRESO MÓVIL (100% COMPLETA Y VISIBLE) --- */
  .habit-report-card {
    padding: 14px 8px 18px 8px !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .habit-report-title {
    font-size: 20px !important;
  }

  .habit-report-subtitle {
    font-size: 11.5px !important;
  }

  .report-week-nav {
    padding: 4px 10px !important;
    margin-top: 6px !important;
  }

  .report-week-range {
    font-size: 11.5px !important;
    gap: 5px !important;
  }

  .habit-report-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    margin: 10px 0 6px 0 !important;
    padding-bottom: 6px !important;
  }

  .habit-report-table {
    width: 100% !important;
    min-width: 100% !important;
    border-spacing: 0 5px !important;
  }

  /* Columna de Hábito: Compacta y Pegajosa (Sticky) para que nunca se pierda */
  .habit-report-table th.col-habit-header,
  .report-habit-row td:first-child,
  .best-day-label-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    min-width: 94px !important;
    max-width: 102px !important;
    width: 98px !important;
    padding-left: 6px !important;
    padding-right: 4px !important;
    background-color: var(--white) !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
  }

  [data-theme="dark"] .habit-report-table th.col-habit-header,
  [data-theme="dark"] .report-habit-row td:first-child,
  [data-theme="dark"] .best-day-label-col {
    background-color: var(--bg-secondary) !important;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35) !important;
  }

  .report-habit-info {
    gap: 5px !important;
  }

  .report-habit-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }

  .report-habit-name {
    font-size: 11px !important;
    max-width: 66px !important;
    line-height: 1.2 !important;
  }

  /* Columnas de Días (L, M, M, J, V, S, D): Perfectamente dimensionadas */
  .habit-report-table th.col-day-header {
    padding: 3px 1px !important;
    font-size: 10.5px !important;
    min-width: 25px !important;
  }

  .habit-report-table th.col-day-header div:last-child {
    font-size: 8.5px !important;
  }

  .report-habit-row td {
    padding: 5px 1px !important;
  }

  .matrix-check-pill {
    width: 23px !important;
    height: 23px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
  }

  .matrix-check-pill i {
    width: 11px !important;
    height: 11px !important;
    stroke-width: 2.8 !important;
  }

  /* Columna de Progreso / Rango */
  .habit-report-table th.col-rank-header,
  .report-habit-row td:last-child {
    min-width: 44px !important;
    padding-right: 4px !important;
    padding-left: 2px !important;
  }

  .report-rank-badge {
    font-size: 9px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }

  /* Tarjetas KPI de Progreso Inferior */
  .habit-report-kpis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding-top: 14px !important;
  }

  .report-kpi-item {
    padding: 8px 6px !important;
  }

  .report-kpi-item .kpi-value {
    font-size: 18px !important;
  }

  .report-kpi-item .kpi-label {
    font-size: 9px !important;
  }
}


/* Sidebar Reorder Mode */
.sidebar-drag-handle {
  display: none;
  margin-left: auto;
  color: var(--text-muted);
  cursor: grab;
  padding: 4px;
}

.sidebar-drag-handle:active {
  cursor: grabbing;
}

body.sidebar-reorder-mode .sidebar-drag-handle {
  display: flex;
}

/* Permitimos clics en los botones aunque estemos en modo reordenar */
body.sidebar-reorder-mode .nav-item-btn {
  /* pointer-events eliminado para permitir navegar */
}

/* Floating Ghost for Sidebar Reorder */
.sidebar-floating-ghost {
  position: fixed !important;
  top: 0 !important;
  z-index: 100000 !important;
  pointer-events: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  background-color: var(--bg-primary) !important;
  border-radius: var(--border-radius-md) !important;
  opacity: 0.95 !important;
  margin: 0 !important;
  transition: box-shadow 0.2s ease !important;
}

.nav-item-placeholder {
  border: 2px dashed var(--accent-pink) !important;
  border-radius: var(--border-radius-md) !important;
  margin-bottom: 10px !important;
  background-color: rgba(236, 64, 122, 0.05) !important;
}


/* ==========================================
   TASKS VIEW STYLES
   ========================================== */
.tasks-view-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

.tasks-hero {
  display: flex;
  background: var(--bg-card-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  align-items: center;
}

.tasks-hero-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tasks-hero-chart h3 {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 600;
}

.tasks-bar-container {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 120px;
}

.task-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.task-bar-fill {
  width: 100%;
  background: linear-gradient(to top, var(--accent-orange), var(--accent-pink));
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}

.task-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.tasks-hero-ring {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px dashed var(--border-color);
  padding-left: 20px;
}

.tasks-ring-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
}

.tasks-ring-content {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tasks-ring-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.tasks-ring-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Tareas List Styles */
.tasks-list-container {
  display: grid;
  gap: 12px;
}

.task-card {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.task-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--card-accent, var(--text-muted));
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.task-card.checked {
  opacity: 0.6;
  transform: scale(0.98);
}

.task-details {
  flex: 1;
  padding-left: 12px;
}

.task-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.task-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-checkbox-square {
  width: 28px;
  height: 28px;
  border: 2px solid var(--card-accent, var(--text-muted));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.task-checkbox-square:hover {
  background: rgba(0,0,0,0.05);
}

.task-checkbox-square i, .task-checkbox-square svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
  color: var(--card-accent, var(--text-main));
}

.task-card.checked .task-checkbox-square i, .task-checkbox-square svg {
  opacity: 1;
  transform: scale(1);
}

.task-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  margin-left: 10px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.task-delete-btn:hover {
  color: var(--danger-color);
  background: rgba(255,0,0,0.05);
}

/* Category Accents for Tasks */
.task-card.cat-purple { --card-accent: #8E65D1; }
.task-card.cat-teal { --card-accent: #26A69A; }
.task-card.cat-orange { --card-accent: #FFA726; }
.task-card.cat-pink { --card-accent: #EC407A; }
.task-card.cat-indigo { --card-accent: #5C6BC0; }

@media (max-width: 600px) {
  .tasks-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .tasks-hero-ring {
    border-left: none;
    border-top: 1px dashed var(--border-color);
    padding-left: 0;
    padding-top: 20px;
    align-items: center;
  }
}

.task-checkbox-square i, .task-checkbox-square svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: var(--card-accent, var(--text-main));
}

.task-card.checked .task-checkbox-square {
  background: var(--card-accent, var(--text-main));
  border-color: var(--card-accent, var(--text-main));
}

.task-card.checked .task-checkbox-square i, .task-card.checked .task-checkbox-square svg {
  opacity: 1;
  transform: scale(1);
  color: #FFFFFF;
}

.tasks-hero {
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  display: flex;
  gap: 20px;
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.add-task-btn-massive {
  width: 100%;
  background: linear-gradient(135deg, var(--purple-accent), var(--blue-accent));
  color: white;
  border: none;
  border-radius: var(--border-radius-lg);
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 25px rgba(142, 36, 170, 0.25);
}
.add-task-btn-massive:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(142, 36, 170, 0.35);
}
.add-task-btn-massive svg {
  width: 24px;
  height: 24px;
}

/* --- REDISEÑO VISTA DE TAREAS (MOCKUP STYLE) --- */

.mockup-tasks-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 10px 100px 10px;
  position: relative;
}

.mockup-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

.mockup-subtitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mockup-quick-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.mockup-input-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.mockup-input-wrap input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 14px 45px 14px 20px;
  font-size: 15px;
  color: var(--text-main);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-theme="dark"] .mockup-input-wrap input {
  border-color: rgba(255,255,255,0.08);
}
.mockup-input-wrap input:focus {
  outline: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border-color: #FF9800;
}

.mockup-input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #FF9800; /* pink/orange from mockup */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.mockup-input-icon:hover {
  opacity: 1;
}

.mockup-add-btn {
  background: linear-gradient(135deg, #FFB74D, #FF8A65);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 15px rgba(255, 138, 101, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mockup-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 138, 101, 0.4);
}

/* CHART */
.mockup-chart-section {
  margin-bottom: 50px;
}

.mockup-chart-grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  height: 160px;
  position: relative;
}

/* Subtle vertical grid lines can be pseudo-elements on the columns */
.mockup-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  width: 40px;
}
.mockup-chart-col::after {
  content: '';
  position: absolute;
  right: -15px;
  bottom: 25px; /* above label */
  top: 20px; /* below number */
  width: 1px;
  background: rgba(0,0,0,0.04);
}
.mockup-chart-col:last-child::after {
  display: none;
}

[data-theme="dark"] .mockup-chart-col::after {
  background: rgba(255,255,255,0.04);
}

.mockup-chart-num {
  font-size: 18px;
  color: #F48FB1;
  font-weight: 500;
  margin-bottom: 8px;
}

.mockup-chart-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: transparent;
  padding-bottom: 8px;
}

.mockup-chart-bar-fill {
  width: 100%;
  background: linear-gradient(to bottom, #B39DDB, #FFCC80); /* Purple to soft orange */
  border-radius: 6px;
  transition: height 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mockup-chart-lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  text-transform: uppercase;
}

/* TASKS GRID */
.mockup-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.mockup-task-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .mockup-task-card {
  border-color: rgba(255,255,255,0.05);
}

.mockup-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.mockup-task-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mockup-task-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: transparent;
  transition: all 0.2s ease;
}
[data-theme="dark"] .mockup-task-check {
  border-color: rgba(255,255,255,0.2);
}

.mockup-task-check:hover {
  background: rgba(0,0,0,0.03);
}

.mockup-task-card.checked .mockup-task-check {
  background: #FFB74D;
  border-color: #FFB74D;
  color: white;
}
.mockup-task-card.checked .mockup-task-check i,
.mockup-task-card.checked .mockup-task-check svg {
  opacity: 1;
  transform: scale(1);
  color: white;
}
.mockup-task-check i, .mockup-task-check svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Decoración estilo confetti */
.mockup-bg-dots {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: 
    radial-gradient(circle at 10% 20%, #F48FB1 4px, transparent 5px),
    radial-gradient(circle at 85% 30%, #90CAF9 4px, transparent 5px),
    radial-gradient(circle at 15% 70%, #90CAF9 3px, transparent 4px),
    radial-gradient(circle at 80% 80%, #F48FB1 3px, transparent 4px),
    radial-gradient(circle at 50% 10%, #FFCC80 3px, transparent 4px),
    radial-gradient(circle at 95% 55%, #CE93D8 4px, transparent 5px),
    radial-gradient(circle at 5% 45%, #CE93D8 3px, transparent 4px);
  opacity: 0.6;
}
[data-theme="dark"] .mockup-bg-dots {
  opacity: 0.15;
}

@media (max-width: 768px) {
  .mockup-quick-add {
    flex-direction: column;
    gap: 12px;
  }
  .mockup-input-wrap {
    max-width: 100%;
  }
  .mockup-add-btn {
    width: 100%;
  }
  .mockup-chart-grid {
    gap: 12px;
  }
  .mockup-chart-col::after {
    right: -6px;
  }
}

/* TASK MODAL CALENDAR */
.task-mode-toggle {
  display: flex;
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 3px;
}
.t-mode-lbl {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.2s ease;
}
.t-mode-lbl input {
  display: none;
}
.t-mode-lbl.active {
  background: var(--white);
  color: var(--accent-orange, #FF9800);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
[data-theme="dark"] .t-mode-lbl.active {
  background: var(--bg-card);
}

.mini-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--text-main);
  font-weight: 600;
  font-size: 14px;
}
.mini-calendar-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-calendar-header button:hover {
  color: var(--accent-orange, #FF9800);
}

.mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mini-cal-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.mini-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-main);
  background: var(--bg-primary);
  transition: all 0.2s ease;
}
.mini-cal-cell:hover {
  background: var(--bg-secondary);
}
.mini-cal-cell.selected {
  background: linear-gradient(135deg, #FFB74D, #FF8A65);
  color: white;
  font-weight: bold;
}
.mini-cal-cell.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.mini-cal-footer {
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  font-weight: 500;
}

.priority-radio input:checked + .prio-btn {
  background: var(--white) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-weight: 600;
  border: 1px solid var(--accent-orange, #FF9800);
}
[data-theme="dark"] .priority-radio input:checked + .prio-btn {
  background: var(--bg-card) !important;
  border-color: #FFA726;
}
.prio-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--bg-primary);
  margin-left: 8px;
  color: var(--text-muted);
}
.prio-badge.high { color: #E53935; background: rgba(229, 57, 53, 0.1); }
.prio-badge.medium { color: #F57C00; background: rgba(245, 124, 0, 0.1); }
.prio-badge.low { color: #43A047; background: rgba(67, 160, 71, 0.1); }

/* Completed Tasks Section */
.mockup-completed-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}
.mockup-completed-card {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.7;
}
.mockup-completed-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.mockup-restore-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.mockup-restore-btn:hover {
  background: var(--bg-card);
  color: var(--accent-purple);
}

/* TASK FILTERS */
.task-filters {
  display: flex;
  gap: 8px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.task-filter-btn {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.task-filter-btn:hover {
  color: var(--text-main);
}
.task-filter-btn.active {
  background: var(--white);
  color: var(--accent-orange, #FF9800);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
[data-theme="dark"] .task-filter-btn.active {
  background: var(--bg-card);
  color: #FFB74D;
}

/* TASK EDIT BUTTON */
.mockup-task-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s ease;
  padding: 6px;
  border-radius: 8px;
}
.mockup-task-card:hover .mockup-task-edit-btn {
  opacity: 0.6;
  transform: translateX(0);
}
.mockup-task-edit-btn:hover {
  opacity: 1 !important;
  background: var(--bg-primary);
  color: var(--accent-purple);
}

/* DUE DATES & OVERDUE */
.mockup-task-card.overdue {
  border-left: 4px solid #F44336;
}
.mockup-task-card.due-today {
  border-left: 4px solid #FF9800;
}
.color-overdue {
  color: #F44336;
}
.color-due-today {
  color: #FF9800;
}
.color-muted {
  color: var(--text-muted);
}

/* ---- Bar chart tooltip & today highlight ---- */
.bar-col .bar-tooltip {
  display: none;
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.bar-col:hover .bar-tooltip {
  display: block;
}
.bar-col.bar-today {
  box-shadow: 0 0 0 2px rgba(236, 64, 122, 0.5);
  opacity: 1 !important;
}
/* Ensure label wrapper spans full width */
.bar-chart-labels {
  display: flex;
  justify-content: space-around;
  padding: 8px 10px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
/* ===== HORA PRODUCTIVA DEL D�A ===== */
.productive-hour-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(236, 64, 122, 0.15);
  margin-bottom: 4px;
}
.productive-hour-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.productive-hour-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(236,64,122,0.12), rgba(171,71,188,0.12));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.productive-hour-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.productive-hour-peak {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-pink, #EC407A);
  margin-top: 2px;
}
.productive-hour-chart-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.productive-hour-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
[data-theme="dark"] .productive-hour-card {
  border-color: rgba(236, 64, 122, 0.2);
}

/* ==========================================================================
   MOBILE NEUROMARKETING NAVIGATION & BOTTOM HUB DRAWER
   ========================================================================== */
/* ==========================================================================
   MOBILE NAVIGATION (3 KEY ACTIONS) & HORIZONTAL LATERAL EDGE PANEL (SAMSUNG/HUAWEI STYLE)
   ========================================================================== */

/* 1. Mobile 3-Item Bottom Dock */
@media (max-width: 900px) {
  .mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 6px 20px calc(8px + env(safe-area-inset-bottom, 0px)) 20px;
    background: var(--bg-card);
    background-color: var(--white);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-top: 1px solid rgba(171, 71, 188, 0.15);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  [data-theme="dark"] .mobile-nav {
    background: rgba(26, 20, 35, 0.92) !important;
    border-top-color: rgba(236, 64, 122, 0.2) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
  }

  [data-theme="beige"] .mobile-nav {
    background: rgba(247, 240, 233, 0.94) !important;
    border-top-color: rgba(212, 186, 170, 0.5) !important;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    gap: 3px;
    cursor: pointer;
    flex: 1;
    max-width: 105px;
    padding: 4px 6px;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .mobile-nav-item .nav-icon-bubble {
    width: 40px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .mobile-nav-item i {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .mobile-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
    line-height: 1;
  }

  /* Active state with dopamine glow & bounce */
  .mobile-nav-item.active {
    color: var(--accent-pink, #EC407A);
  }

  .mobile-nav-item.active .nav-icon-bubble {
    background: linear-gradient(135deg, rgba(236, 64, 122, 0.16), rgba(171, 71, 188, 0.22));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 64, 122, 0.2);
  }

  .mobile-nav-item.active i {
    color: var(--accent-pink, #EC407A);
    transform: scale(1.12);
  }

  /* Center Prominent Add Habit Button */
  .mobile-nav-add-btn {
    position: relative;
    top: -6px;
  }

  .mobile-nav-add-btn .nav-bubble-add {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EC407A 0%, #AB47BC 100%);
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.45), 0 0 12px rgba(171, 71, 188, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.3);
  }

  .mobile-nav-add-btn .nav-bubble-add i {
    width: 24px;
    height: 24px;
    color: #FFFFFF !important;
    stroke-width: 2.6;
  }

  .mobile-nav-add-btn:hover .nav-bubble-add,
  .mobile-nav-add-btn:active .nav-bubble-add {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 24px rgba(236, 64, 122, 0.65);
  }

  .mobile-nav-add-btn span {
    font-weight: 800;
    color: var(--text-main);
  }

  /* Safe scrolling area on mobile so content never gets covered */
  .app-container {
    padding: 16px 14px 100px 14px !important;
  }
}

/* 2. Mobile Lateral Right Edge Panel (Samsung / Huawei style Edge Drawer) */
.mobile-edge-container {
  display: block;
}

@media (min-width: 901px) {
  .mobile-edge-container {
    display: none !important;
  }
}

/* Edge Handle (when collapsed) */
.mobile-edge-handle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1390;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 0.3s ease;
}

.edge-handle-inner {
  width: 26px;
  height: 64px;
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.88), rgba(171, 71, 188, 0.88));
  border-radius: 16px 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -4px 0 16px rgba(236, 64, 122, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  transition: width 0.2s ease, background 0.2s ease;
}

.edge-handle-inner:hover,
.edge-handle-inner:active {
  width: 32px;
  background: linear-gradient(135deg, #EC407A, #AB47BC);
  box-shadow: -6px 0 22px rgba(236, 64, 122, 0.65);
}

.edge-arrow-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.8;
  color: #FFFFFF;
  animation: pulseEdgeArrow 2.4s ease-in-out infinite;
}

@keyframes pulseEdgeArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

.mobile-edge-container.open .mobile-edge-handle {
  transform: translateY(-50%) translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* Backdrop */
.mobile-edge-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1450;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.mobile-edge-container.open .mobile-edge-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Edge Panel Body (Horizontal Slide-Out from Right) */
.mobile-edge-panel {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(115%);
  width: 86px;
  max-height: 82vh;
  background: rgba(26, 20, 35, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 28px 0 0 28px;
  border: 1px solid rgba(236, 64, 122, 0.3);
  border-right: none;
  box-shadow: -12px 0 35px rgba(0, 0, 0, 0.45);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px 14px 10px;
  gap: 8px;
  box-sizing: border-box;
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.15);
  overflow: hidden;
}

[data-theme="light"] .mobile-edge-panel,
[data-theme="pearl"] .mobile-edge-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(236, 64, 122, 0.25) !important;
  box-shadow: -12px 0 35px rgba(236, 64, 122, 0.18) !important;
}

[data-theme="beige"] .mobile-edge-panel {
  background: rgba(247, 240, 233, 0.96) !important;
  border-color: rgba(212, 186, 170, 0.6) !important;
  box-shadow: -12px 0 35px rgba(0, 0, 0, 0.2) !important;
}

.mobile-edge-container.open .mobile-edge-panel {
  transform: translateY(-50%) translateX(0);
}

/* Header inside Edge Panel */
.edge-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .edge-panel-header,
[data-theme="beige"] .edge-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.edge-logo-wrap {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.3);
}

.edge-logo-wrap:active {
  transform: scale(0.9) rotate(20deg);
}

.edge-seiko-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(236, 64, 122, 0.4));
}

.edge-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edge-close-btn i {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.edge-close-btn:active {
  transform: scale(0.88);
  background: rgba(236, 64, 122, 0.3);
  color: #EC407A;
}

/* Shortcuts Scroll Area */
.edge-panel-items-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 4px;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.edge-panel-items-scroll::-webkit-scrollbar {
  display: none;
}

/* Edge Shortcut Item Button */
.edge-item-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.edge-item-btn:active {
  transform: scale(0.88);
}

.edge-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

.edge-icon-circle i {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.edge-item-btn.active .edge-icon-circle {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(236, 64, 122, 0.5);
  outline: 2px solid var(--accent-pink, #EC407A);
  outline-offset: 2px;
}

/* Category Colors for Edge Panel (Modern App Vibe matching Webtoon/Spotify/Notes in screenshot) */
.edge-cat-pink {
  background: linear-gradient(135deg, #EC407A, #F06292);
}

.edge-cat-teal {
  background: linear-gradient(135deg, #00BFA5, #26A69A);
}

.edge-cat-orange {
  background: linear-gradient(135deg, #FF7043, #FFA726);
}

.edge-cat-amber {
  background: linear-gradient(135deg, #FFB300, #FDD835);
}

.edge-cat-purple {
  background: linear-gradient(135deg, #AB47BC, #BA68C8);
}

.edge-cat-indigo {
  background: linear-gradient(135deg, #5C6BC0, #7E57C2);
}

.edge-cat-slate {
  background: linear-gradient(135deg, #78909C, #90A4AE);
}

.edge-item-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.1;
  text-align: center;
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}

/* ==========================================================================
   HIGH-DEFINITION HORA MÁS PRODUCTIVA (NEUROMARKETING VISUALS)
   ========================================================================== */

.peak-hours-master-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Hero Banner */
.peak-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--bg-primary);
  border-radius: 20px;
  border: 1px solid rgba(236, 64, 122, 0.18);
  gap: 16px;
  flex-wrap: wrap;
}

.peak-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.peak-icon-pulse {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(236, 64, 122, 0.25);
}

.peak-hero-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.peak-hero-time {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #FF4081, #AB47BC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.peak-chrono-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 5px;
}

.chrono-morning   { background: rgba(255, 152, 0, 0.15); color: #FF9800; }
.chrono-midday    { background: rgba(245, 124, 0, 0.15); color: #F57C00; }
.chrono-afternoon { background: rgba(171, 71, 188, 0.15); color: #AB47BC; }
.chrono-night     { background: rgba(236, 64, 122, 0.15); color: #EC407A; }

.peak-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.peak-count-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--bg-card);
  background-color: var(--white);
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid rgba(236, 64, 122, 0.15);
}

.peak-count-big {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
}

.peak-count-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.peak-tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  max-width: 260px;
  line-height: 1.3;
}

/* 2. Three Periods Grid (Mañana / Tarde / Noche) */
.peak-periods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.period-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(171, 71, 188, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.period-card-dominant {
  border-color: rgba(236, 64, 122, 0.4);
  box-shadow: 0 4px 18px rgba(236, 64, 122, 0.12);
  background: linear-gradient(180deg, var(--bg-primary), rgba(236, 64, 122, 0.05));
}

.period-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.period-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(150, 140, 160, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.period-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.period-fill-morning   { background: linear-gradient(90deg, #FFB74D, #FF9800); }
.period-fill-afternoon { background: linear-gradient(90deg, #BA68C8, #AB47BC); }
.period-fill-night     { background: linear-gradient(90deg, #FF4081, #EC407A); }

.period-card-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* 3. Timeline Box & SVG Chart */
.peak-timeline-box {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(171, 71, 188, 0.12);
}

.timeline-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.timeline-box-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.legend-dot-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dot-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-peak   { background: linear-gradient(135deg, #FF4081, #AB47BC); }
.dot-active { background: linear-gradient(135deg, #FFB74D, #FF9800); }

.timeline-svg-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 2px 0;
}

.peak-timeline-svg {
  width: 100%;
  min-width: 480px;
  height: 110px;
  display: block;
}

.timeline-bar {
  transition: all 0.3s ease;
  cursor: pointer;
}

.timeline-bar:hover {
  filter: brightness(1.2);
  transform-origin: bottom;
}

.timeline-peak-bar {
  filter: drop-shadow(0 4px 10px rgba(236, 64, 122, 0.4));
}

/* 4. Ranking Section (Top 3 Momentos) */
.peak-ranking-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.ranking-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.ranking-tiles-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peak-rank-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-radius: 16px;
  border: 1px solid rgba(171, 71, 188, 0.1);
  transition: transform 0.2s ease;
}

.peak-rank-tile:hover {
  transform: translateX(4px);
}

.rank-gold {
  border-color: rgba(255, 183, 77, 0.35);
  background: linear-gradient(90deg, var(--bg-primary), rgba(255, 183, 77, 0.08));
}

.rank-silver {
  border-color: rgba(189, 189, 189, 0.35);
}

.rank-bronze {
  border-color: rgba(205, 127, 50, 0.3);
}

.rank-tile-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rank-badge-pill {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
}

.rank-hour-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.rank-habit-sample {
  font-size: 11px;
  color: var(--text-muted);
}

.rank-tile-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rank-count-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--accent-pink, #EC407A);
}

.rank-count-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 5. Zen Tip Box */
.peak-zen-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(171, 71, 188, 0.08), rgba(236, 64, 122, 0.06));
  border-radius: 16px;
  border: 1px solid rgba(171, 71, 188, 0.15);
}

.zen-tip-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.zen-tip-content {
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.45;
}

/* 6. Zero State */
.peak-hours-zero-state {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.peak-zero-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.15), rgba(171, 71, 188, 0.15));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.peak-zero-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.peak-zero-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 4px 0;
}

.peak-zero-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .peak-hero-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .peak-hero-right {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  .peak-periods-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   SEIKO CLEAN UNIFIED PEAK HOURS CARD (MINIMALIST & ELEGANT)
   ========================================================================== */

.seiko-peak-card-unified {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

/* 1. Header */
.peak-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

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

.peak-ambient-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.18), rgba(171, 71, 188, 0.22));
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(236, 64, 122, 0.2);
}

.peak-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.peak-mini-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.peak-main-time {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-pink, #EC407A);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.peak-chrono-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(236, 64, 122, 0.14);
  color: var(--accent-pink, #EC407A);
}

.peak-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}

.peak-count-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.peak-count-big {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
}

.peak-count-text {
  font-size: 12px;
  font-weight: 600;
}

.peak-micro-tagline {
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 240px;
  line-height: 1.3;
}

/* 2. Continuous Segmented Period Bar */
.peak-periods-bar-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peak-periods-bar {
  width: 100%;
  height: 7px;
  border-radius: 6px;
  background: rgba(150, 140, 160, 0.12);
  display: flex;
  overflow: hidden;
  gap: 2px;
}

.period-seg-morning   { background: linear-gradient(90deg, #FFB74D, #FF9800); border-radius: 4px; transition: width 0.6s ease; }
.period-seg-afternoon { background: linear-gradient(90deg, #BA68C8, #AB47BC); border-radius: 4px; transition: width 0.6s ease; }
.period-seg-night     { background: linear-gradient(90deg, #FF4081, #EC407A); border-radius: 4px; transition: width 0.6s ease; }

.peak-periods-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 6px;
}

.period-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.period-legend-item.dominant {
  color: var(--text-main);
  font-weight: 700;
}

.legend-circle {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.legend-circle.morning   { background: #FF9800; }
.legend-circle.afternoon { background: #AB47BC; }
.legend-circle.night     { background: #EC407A; }

/* 3. Equalizer Timeline Chart */
.peak-equalizer-wrapper {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 10px 8px 6px 8px;
  border: 1px solid rgba(171, 71, 188, 0.08);
}

[data-theme="dark"] .peak-equalizer-wrapper {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="beige"] .peak-equalizer-wrapper {
  background: rgba(212, 186, 170, 0.2);
  border-color: rgba(212, 186, 170, 0.4);
}

.equalizer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
}

.eq-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.2s;
}

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

.eq-count-tag {
  font-size: 8.5px;
  font-weight: 800;
  height: 12px;
  color: var(--text-muted);
  line-height: 1;
}

.eq-col-peak .eq-count-tag {
  color: var(--accent-pink, #EC407A);
  font-weight: 900;
  font-size: 9.5px;
}

.eq-track {
  width: 100%;
  max-width: 20px;
  height: 52px;
  border-radius: 5px;
  background: rgba(150, 140, 160, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.eq-fill {
  width: 100%;
  border-radius: 5px;
  transition: height 0.5s ease;
}

.eq-fill-active {
  background: linear-gradient(180deg, #FFB74D, #FF9800);
}

.eq-fill-peak {
  background: linear-gradient(180deg, #FF4081, #AB47BC);
  box-shadow: 0 0 10px rgba(236, 64, 122, 0.4);
}

.eq-hour-lbl {
  font-size: 8px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1;
}

.eq-lbl-peak {
  color: var(--accent-pink, #EC407A);
  font-weight: 800;
  font-size: 9px;
}

/* 4. Footer Habits Tags */
.peak-habits-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.peak-tags-intro {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
}

.peak-tags-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.peak-habit-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(236, 64, 122, 0.12);
  color: var(--accent-pink, #EC407A);
  border: 1px solid rgba(236, 64, 122, 0.2);
}

@media (max-width: 600px) {
  .peak-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .peak-header-right {
    align-items: flex-start;
    text-align: left;
  }
  .peak-periods-legend-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   HABIT GRID & SYNCHRONIZED ACTIVITY WAVE (REFERENCE DESIGN)
   ========================================================================== */

/* 1. Habit Grid Table Enhancements */
.habit-report-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}

.habit-report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.habit-report-table th.col-habit-header {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  min-width: 160px;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 2;
}

.col-day-header {
  text-align: center;
  padding: 8px 4px;
  min-width: 38px;
  font-weight: 700;
  color: var(--text-muted);
}

.col-day-header.col-month-day {
  min-width: 26px;
  padding: 6px 1px;
}

.col-day-header .day-letter-lbl {
  font-size: 11px;
  line-height: 1;
}

.col-day-header .day-num-lbl {
  font-size: 9.5px;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 2px;
}

.col-day-header.col-day-today {
  color: var(--accent-pink, #EC407A);
  font-weight: 900;
}

.col-day-header.col-day-today .day-num-lbl {
  opacity: 1;
  color: var(--accent-pink, #EC407A);
  font-weight: 800;
}

.col-rank-header {
  text-align: center;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Habit Rows */
.report-habit-row {
  transition: background 0.15s;
}

.report-habit-row:hover {
  background: rgba(171, 71, 188, 0.04);
}

.col-habit-info {
  padding: 8px 12px;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 2;
  border-radius: 12px 0 0 12px;
}

[data-theme="dark"] .col-habit-info,
[data-theme="dark"] .habit-report-table th.col-habit-header {
  background: var(--bg-card) !important;
}

.habit-info-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-cat-dot {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.habit-cat-dot i {
  width: 13px;
  height: 13px;
}

.matrix-habit-row .habit-name-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 150px !important;
}

.col-day-cell {
  text-align: center;
  padding: 4px 2px;
  vertical-align: middle;
}

.col-habit-pct {
  text-align: center;
  padding: 4px 8px;
  vertical-align: middle;
  border-radius: 0 12px 12px 0;
}

/* Glowing Checkmark Pill Buttons */
.grid-pill-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(150, 140, 160, 0.15);
  background: var(--bg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.grid-pill-btn:active {
  transform: scale(0.88);
}

.grid-pill-btn.grid-pill-month {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.grid-empty-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(150, 140, 160, 0.25);
}

.grid-pill-btn.checked {
  background: linear-gradient(135deg, #00E5FF, #00B0FF);
  border-color: transparent;
  color: #002B36;
  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.35);
}

[data-theme="dark"] .grid-pill-btn.checked {
  background: linear-gradient(135deg, #00E5FF, #00B0FF) !important;
  color: #001E26 !important;
  box-shadow: 0 2px 12px rgba(0, 229, 255, 0.45) !important;
}

.grid-check-icon {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.grid-pill-month .grid-check-icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.habit-progress-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--bg-primary);
  color: var(--text-muted);
}

.habit-progress-badge.badge-perfect {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 176, 255, 0.2));
  color: #00B0FF;
  border: 1px solid rgba(0, 229, 255, 0.25);
}

/* Totals Footer Row */
.report-totals-row td {
  padding: 8px 2px;
  vertical-align: middle;
  border-top: 1px dashed rgba(150, 140, 160, 0.18);
}

.totals-row-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.day-total-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(150, 140, 160, 0.12);
  color: var(--text-muted);
}

.day-total-badge.badge-some {
  background: rgba(0, 229, 255, 0.12);
  color: #00B0FF;
}

.day-total-badge.badge-all {
  background: linear-gradient(135deg, #00E5FF, #00B0FF);
  color: #002B36;
  font-weight: 900;
}

/* 2. Synchronized Activity Wave Chart Section */
.habit-activity-chart-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(171, 71, 188, 0.18);
}

.activity-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-chart-heading {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
}

.activity-avg-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(236, 64, 122, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(236, 64, 122, 0.2);
}

.activity-avg-num {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent-pink, #EC407A);
}

.activity-avg-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.activity-chart-svg-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

.activity-synced-svg {
  width: 100%;
  min-width: 540px;
  height: 120px;
  display: block;
}

.chart-node-dot {
  transition: all 0.2s ease;
}

.chart-node-group:hover .chart-node-dot {
  r: 6.5;
  fill: #EC407A !important;
  stroke: #FFFFFF !important;
  filter: drop-shadow(0 0 6px rgba(236, 64, 122, 0.8));
}

/* ==========================================================================
   CATEGORY-COLORED CHECKBOXES & CLEAN CONTINUOUS ACTIVITY WAVE
   ========================================================================== */

/* Unchecked Checkbox Box - Soft & Clean */
.grid-pill-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(150, 140, 160, 0.15);
  background: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .grid-pill-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="beige"] .grid-pill-btn {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(212, 186, 170, 0.4);
}

.grid-pill-btn:hover {
  transform: scale(1.06);
  border-color: rgba(171, 71, 188, 0.3);
}

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

.grid-pill-btn.grid-pill-month {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.grid-check-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.8;
  color: #FFFFFF;
}

.grid-pill-month .grid-check-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}

/* Category Specific Checkbox Colors (Restored exactly to original theme colors) */
.grid-pill-btn.checked {
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* 1. Purple (Lectura / Estudio) */
.grid-pill-btn.btn-cat-purple.checked {
  background: linear-gradient(135deg, #8E24AA, #AB47BC) !important;
  box-shadow: 0 3px 10px rgba(142, 36, 170, 0.35) !important;
}

/* 2. Teal / Cyan (Hidratación / Agua) */
.grid-pill-btn.btn-cat-teal.checked {
  background: linear-gradient(135deg, #00897B, #00ACC1) !important;
  box-shadow: 0 3px 10px rgba(0, 137, 123, 0.35) !important;
}
.grid-pill-btn.btn-cat-cyan.checked {
  background: linear-gradient(135deg, #00ACC1, #26C6DA) !important;
  box-shadow: 0 3px 10px rgba(0, 172, 193, 0.35) !important;
}

/* 3. Orange (Ejercicio / Movimiento) */
.grid-pill-btn.btn-cat-orange.checked {
  background: linear-gradient(135deg, #FF6D00, #FFA726) !important;
  box-shadow: 0 3px 10px rgba(255, 109, 0, 0.35) !important;
}

/* 4. Pink (Bienestar / Autocuidado) */
.grid-pill-btn.btn-cat-pink.checked {
  background: linear-gradient(135deg, #D81B60, #EC407A) !important;
  box-shadow: 0 3px 10px rgba(216, 27, 96, 0.35) !important;
}

/* 5. Indigo / Blue (Arte & Programación) */
.grid-pill-btn.btn-cat-indigo.checked {
  background: linear-gradient(135deg, #3F51B5, #5C6BC0) !important;
  box-shadow: 0 3px 10px rgba(63, 81, 181, 0.35) !important;
}
.grid-pill-btn.btn-cat-blue.checked {
  background: linear-gradient(135deg, #1E88E5, #42A5F5) !important;
  box-shadow: 0 3px 10px rgba(30, 136, 229, 0.35) !important;
}

/* 6. Green / Red / Amber */
.grid-pill-btn.btn-cat-green.checked {
  background: linear-gradient(135deg, #43A047, #66BB6A) !important;
  box-shadow: 0 3px 10px rgba(67, 160, 71, 0.35) !important;
}
.grid-pill-btn.btn-cat-red.checked {
  background: linear-gradient(135deg, #E53935, #EF5350) !important;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.35) !important;
}
.grid-pill-btn.btn-cat-amber.checked {
  background: linear-gradient(135deg, #FF8F00, #FFB300) !important;
  box-shadow: 0 3px 10px rgba(255, 143, 0, 0.35) !important;
}

/* Clean Continuous Activity Wave (No circle bubbles on the line) */
.activity-synced-svg {
  width: 100%;
  min-width: 500px;
  height: 120px;
  display: block;
}

#summary-line-path {
  filter: drop-shadow(0 3px 8px rgba(236, 64, 122, 0.35));
}

/* ==========================================================================
   ORIGINAL CATEGORY MATRIX PILLS & VIBRANT PEAK HOURS CHART
   ========================================================================== */

.matrix-check-pill {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .matrix-check-pill {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme="beige"] .matrix-check-pill {
  background-color: rgba(255, 250, 245, 0.65) !important;
  border-color: rgba(212, 186, 170, 0.45) !important;
}

.matrix-check-pill:hover {
  transform: scale(1.08);
}

.matrix-check-pill.completed {
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16) !important;
  transform: scale(1.05);
}

.matrix-check-pill-month {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
}

.matrix-check-pill svg,
.matrix-check-pill i {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  fill: none !important;
}

/* Exact Category Colors for Completed Pills */
.matrix-check-pill.cat-purple.completed  { background: linear-gradient(135deg, #7E57C2, #9C27B0) !important; }
.matrix-check-pill.cat-teal.completed    { background: linear-gradient(135deg, #00B4D8, #0077B6) !important; }
.matrix-check-pill.cat-cyan.completed    { background: linear-gradient(135deg, #00ACC1, #26C6DA) !important; }
.matrix-check-pill.cat-orange.completed  { background: linear-gradient(135deg, #FF9800, #F57C00) !important; }
.matrix-check-pill.cat-pink.completed    { background: linear-gradient(135deg, #EC407A, #D81B60) !important; }
.matrix-check-pill.cat-indigo.completed  { background: linear-gradient(135deg, #5C6BC0, #3F51B5) !important; }
.matrix-check-pill.cat-blue.completed    { background: linear-gradient(135deg, #42A5F5, #1E88E5) !important; }
.matrix-check-pill.cat-green.completed   { background: linear-gradient(135deg, #66BB6A, #43A047) !important; }
.matrix-check-pill.cat-red.completed     { background: linear-gradient(135deg, #EF5350, #E53935) !important; }
.matrix-check-pill.cat-amber.completed   { background: linear-gradient(135deg, #FFB300, #FB8C00) !important; }

/* Vibrant Solid Peak Hours Box */
.peak-vibrant-chart-box {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  padding: 12px 10px 4px 10px;
  border: 1px solid rgba(171, 71, 188, 0.1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .peak-vibrant-chart-box {
  background: rgba(0, 0, 0, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="beige"] .peak-vibrant-chart-box {
  background: rgba(212, 186, 170, 0.22) !important;
}

.peak-vibrant-svg {
  width: 100%;
  min-width: 500px;
  height: 95px;
  display: block;
}

.vibrant-bar {
  transition: all 0.25s ease;
  cursor: pointer;
}

.vibrant-bar:hover {
  filter: brightness(1.2);
}

.vibrant-bar-peak {
  filter: drop-shadow(0 4px 12px rgba(236, 64, 122, 0.45));
}

/* ==========================================================================
   INSPECTOR INTERACTIVO DE HORA Y HÁBITOS (PEAK HOUR INSPECTOR) - DISEÑO PREMIUM
   ========================================================================== */

.vibrant-bar.selected-bar {
  filter: drop-shadow(0 0 12px rgba(236, 64, 122, 0.95)) brightness(1.35) !important;
  stroke: #FFFFFF !important;
  stroke-width: 2px !important;
}

.peak-hour-inspector {
  margin-top: 16px;
  background: var(--white);
  border: 1.5px solid rgba(236, 64, 122, 0.28);
  border-radius: 18px;
  padding: 16px 18px;
  animation: inspectorSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(236, 64, 122, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  scroll-margin-top: 90px;
  scroll-margin-bottom: 70px;
  touch-action: pan-y;
  position: relative;
  z-index: 10;
}

[data-theme="dark"] .peak-hour-inspector {
  background: rgba(26, 20, 32, 0.96);
  border-color: rgba(236, 64, 122, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(236, 64, 122, 0.15);
}

[data-theme="beige"] .peak-hour-inspector {
  background: var(--bg-card);
  border-color: rgba(212, 186, 170, 0.5);
  box-shadow: 0 8px 24px rgba(180, 150, 130, 0.12);
}

@keyframes inspectorSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.inspector-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(150, 140, 160, 0.14);
}

.inspector-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inspector-clock-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.18), rgba(171, 71, 188, 0.22));
  border: 1px solid rgba(236, 64, 122, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.15);
}

.inspector-hero-time {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.2;
}

.inspector-hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.inspector-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(236, 64, 122, 0.12);
  color: var(--accent-pink, #EC407A);
}

.inspector-close-btn {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
  flex-shrink: 0;
}

.inspector-close-btn:hover {
  background: rgba(236, 64, 122, 0.2);
  color: var(--accent-pink, #EC407A);
  transform: scale(1.12);
}

.inspector-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.inspector-habit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-primary);
  border-radius: 13px;
  border: 1px solid rgba(150, 140, 160, 0.14);
  gap: 12px;
  transition: all 0.2s ease;
}

[data-theme="dark"] .inspector-habit-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.inspector-habit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  border-color: rgba(236, 64, 122, 0.35);
}

.inspector-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.inspector-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #FFFFFF;
}

.inspector-icon-circle.cat-purple { background: linear-gradient(135deg, #AB47BC, #7E57C2); }
.inspector-icon-circle.cat-teal   { background: linear-gradient(135deg, #26A69A, #00897B); }
.inspector-icon-circle.cat-orange { background: linear-gradient(135deg, #FFA726, #FB8C00); }
.inspector-icon-circle.cat-pink   { background: linear-gradient(135deg, #EC407A, #D81B60); }
.inspector-icon-circle.cat-blue   { background: linear-gradient(135deg, #42A5F5, #1E88E5); }
.inspector-icon-circle.cat-amber  { background: linear-gradient(135deg, #FFB74D, #FFA000); }
.inspector-icon-circle.cat-indigo { background: linear-gradient(135deg, #7E57C2, #5E35B1); }
.inspector-icon-circle.cat-red    { background: linear-gradient(135deg, #EF5350, #E53935); }
.inspector-icon-circle.cat-green  { background: linear-gradient(135deg, #66BB6A, #43A047); }
.inspector-icon-circle.cat-cyan   { background: linear-gradient(135deg, #26C6DA, #00ACC1); }

.inspector-card-texts {
  min-width: 0;
}

.inspector-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.inspector-card-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

/* CÁPSULA LUMINOSA DE HORA EXACTA (DESTACADA Y ELEGANTE) */
.inspector-time-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.12), rgba(171, 71, 188, 0.16));
  border: 1.5px solid rgba(236, 64, 122, 0.35);
  padding: 5px 11px;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(236, 64, 122, 0.15);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.inspector-time-capsule:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.3);
}

.inspector-time-capsule .capsule-icon {
  font-size: 12px;
}

.inspector-time-capsule .capsule-time {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--accent-pink, #EC407A);
}

[data-theme="dark"] .inspector-time-capsule {
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.25), rgba(171, 71, 188, 0.25));
  border-color: rgba(236, 64, 122, 0.5);
  box-shadow: 0 0 12px rgba(236, 64, 122, 0.28);
}

[data-theme="dark"] .inspector-time-capsule .capsule-time {
  color: #FF80AB;
  text-shadow: 0 0 8px rgba(255, 64, 129, 0.45);
}

/* ==========================================================================
   ENSURE MATRIX CHECKMARKS ARE ALWAYS VISIBLE AS CRISP WHITE (SVG & I)
   ========================================================================== */

.matrix-check-pill.completed {
  color: #FFFFFF !important;
}

.matrix-check-pill.completed svg,
.matrix-check-pill.completed i,
.matrix-check-pill.completed .lucide,
.matrix-check-pill.completed .lucide-check {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  fill: none !important;
  display: block !important;
  stroke-width: 3 !important;
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.matrix-check-pill-month.completed svg,
.matrix-check-pill-month.completed i,
.matrix-check-pill-month.completed .lucide,
.matrix-check-pill-month.completed .lucide-check {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 3.2 !important;
}

/* ==========================================================================
   DASHBOARD UNIFIED MOOD & TASK LISTS ROW (50 / 50 SPLIT)
   ========================================================================== */

.dashboard-mood-and-lists-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 20px 0;
  align-items: stretch;
}

.dashboard-mood-col,
.dashboard-lists-col {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 14px 16px;
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  transition: var(--transition-normal);
}

.dashboard-split-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.dashboard-split-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.dashboard-mood-col .mood-quick-emojis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dashboard-mood-col .mood-quick-emojis::-webkit-scrollbar {
  display: none;
}

.dashboard-mood-col .mood-quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 12px;
  border: 1px solid rgba(212, 186, 170, 0.4);
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dashboard-mood-col .mood-quick-btn span {
  font-size: 16px;
  line-height: 1;
}

.dashboard-mood-col .mood-quick-btn small {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
}

.dashboard-mood-col .mood-quick-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent-purple);
  background-color: var(--purple-bg);
}

.dashboard-mood-col .mood-quick-btn.active {
  background: linear-gradient(135deg, #7E57C2, #EC407A);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(236, 64, 122, 0.3);
}

.dashboard-mood-col .mood-quick-btn.active small {
  color: #FFFFFF;
}

.btn-new-task-list {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, #EC407A 0%, #AB47BC 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(236, 64, 122, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.btn-new-task-list:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(236, 64, 122, 0.38);
}

.btn-new-task-list i,
.btn-new-task-list svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5px;
}

.task-lists-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px 2px;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.task-lists-chips-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.task-list-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-primary);
  border: 1px solid rgba(212, 186, 170, 0.4);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
}

.task-list-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent-purple);
  box-shadow: 0 4px 12px rgba(171, 71, 188, 0.15);
}

.task-list-chip.active {
  background: var(--white);
  border-color: var(--accent-pink);
  box-shadow: 0 4px 15px rgba(236, 64, 122, 0.22);
  transform: scale(1.03);
}

.task-list-chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.task-list-chip-icon svg,
.task-list-chip-icon i,
.task-list-chip-icon .lucide {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2px;
}

.task-list-chip-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.task-list-chip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.task-list-chip-progress {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.task-list-chip-add {
  border: 1.5px dashed rgba(236, 64, 122, 0.45);
  background: transparent;
  color: var(--accent-pink);
}

.task-list-chip-add:hover {
  background: rgba(236, 64, 122, 0.08);
  border-color: var(--accent-pink);
}

/* ==========================================================================
   DEDICATED TASK LISTS VIEW (CATALOG & SPECIFIC LIST DETAIL)
   ========================================================================== */

/* ── 1. Vista Catálogo de Todas las Listas ── */
.task-lists-catalog-screen {
  animation: fadeInPanel 0.3s ease;
}

.task-lists-stats-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 16px 20px;
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

.task-lists-stats-banner .stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.task-lists-stats-banner .stat-number {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.task-lists-stats-banner .stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-lists-stats-banner .stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(212, 186, 170, 0.4);
}

.task-lists-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.task-list-card-item {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 18px 20px;
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.task-list-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

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

.list-card-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.list-card-icon-badge svg,
.list-card-icon-badge i {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  stroke-width: 2.2px;
}

.list-card-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: all 0.2s ease;
}

.list-card-delete-btn:hover {
  opacity: 1;
  color: #EF5350;
  background: rgba(239, 83, 80, 0.12);
}

.list-card-delete-btn svg {
  width: 16px;
  height: 16px;
}

.list-card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 4px 0;
}

.list-card-count-txt {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.list-card-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(212, 186, 170, 0.3);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}

.list-card-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.list-card-preview-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 186, 170, 0.25);
}

.list-card-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-main);
}

.list-card-preview-item.done {
  color: var(--text-muted);
  text-decoration: line-through;
}

.preview-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.list-card-preview-item.done .preview-item-dot {
  background: #4CAF50;
}

.list-card-preview-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.list-card-preview-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-pink);
  margin-top: 2px;
}

.task-list-card-new-action {
  border: 2px dashed rgba(236, 64, 122, 0.4);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.task-list-card-new-action:hover {
  background: rgba(236, 64, 122, 0.05);
  border-color: var(--accent-pink);
  transform: translateY(-4px);
}

.create-card-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EC407A 0%, #AB47BC 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.3);
}

.create-card-icon-circle svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.5px;
}

.task-list-card-new-action h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.task-list-card-new-action p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  max-width: 220px;
  line-height: 1.4;
}

/* ── 2. Vista Detallada de una Lista Específica ── */
.task-list-detail-screen {
  animation: fadeInPanel 0.3s ease;
}

.task-list-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.btn-back-to-lists {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white);
  border: var(--border-glass);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}

.btn-back-to-lists:hover {
  background: var(--bg-primary);
  transform: translateX(-3px);
  color: var(--accent-pink);
}

.btn-back-to-lists svg {
  width: 16px;
  height: 16px;
}

.btn-delete-list-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.25);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #EF5350;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delete-list-full:hover {
  background: #EF5350;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 83, 80, 0.3);
}

.btn-delete-list-full svg {
  width: 14px;
  height: 14px;
}

.task-list-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 20px 24px;
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.hero-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-banner-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.hero-banner-badge svg,
.hero-banner-badge i {
  width: 26px;
  height: 26px;
  stroke: #ffffff;
  stroke-width: 2.2px;
}

.hero-banner-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--accent-pink);
  text-transform: uppercase;
}

.hero-banner-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  margin: 2px 0 4px 0;
}

.hero-banner-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.hero-progress-pill {
  padding: 8px 16px;
  background: var(--bg-primary);
  border: 1px solid rgba(212, 186, 170, 0.5);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.task-list-quick-add-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.quick-add-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.quick-add-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--accent-pink);
  pointer-events: none;
}

.quick-add-input-wrapper input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: var(--white);
  border: 1px solid rgba(212, 186, 170, 0.5);
  border-radius: 16px;
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-add-input-wrapper input:focus {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.18);
}

.btn-add-task-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #EC407A 0%, #AB47BC 100%);
  color: #ffffff;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(236, 64, 122, 0.35);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.btn-add-task-item:hover {
  transform: scale(1.03);
}

.btn-add-task-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5px;
}

.task-list-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
}

.empty-state-emoji {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
}

.task-list-empty-state h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.task-list-empty-state p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Category gradients for chips, badges, and progress fills */
.task-list-chip-icon.cat-purple, .list-card-icon-badge.cat-purple, .hero-banner-badge.cat-purple, .list-card-progress-fill.cat-purple { background: linear-gradient(135deg, #8E24AA, #AB47BC); color: #fff; }
.task-list-chip-icon.cat-teal, .list-card-icon-badge.cat-teal, .hero-banner-badge.cat-teal, .list-card-progress-fill.cat-teal { background: linear-gradient(135deg, #00ACC1, #26C6DA); color: #fff; }
.task-list-chip-icon.cat-orange, .list-card-icon-badge.cat-orange, .hero-banner-badge.cat-orange, .list-card-progress-fill.cat-orange { background: linear-gradient(135deg, #FF9800, #FFA726); color: #fff; }
.task-list-chip-icon.cat-pink, .list-card-icon-badge.cat-pink, .hero-banner-badge.cat-pink, .list-card-progress-fill.cat-pink { background: linear-gradient(135deg, #EC407A, #F06292); color: #fff; }
.task-list-chip-icon.cat-blue, .list-card-icon-badge.cat-blue, .hero-banner-badge.cat-blue, .list-card-progress-fill.cat-blue { background: linear-gradient(135deg, #1E88E5, #42A5F5); color: #fff; }
.task-list-chip-icon.cat-amber, .list-card-icon-badge.cat-amber, .hero-banner-badge.cat-amber, .list-card-progress-fill.cat-amber { background: linear-gradient(135deg, #FFB300, #FFCA28); color: #fff; }
.task-list-chip-icon.cat-indigo, .list-card-icon-badge.cat-indigo, .hero-banner-badge.cat-indigo, .list-card-progress-fill.cat-indigo { background: linear-gradient(135deg, #3949AB, #5C6BC0); color: #fff; }
.task-list-chip-icon.cat-red, .list-card-icon-badge.cat-red, .hero-banner-badge.cat-red, .list-card-progress-fill.cat-red { background: linear-gradient(135deg, #E53935, #EF5350); color: #fff; }
.task-list-chip-icon.cat-green, .list-card-icon-badge.cat-green, .hero-banner-badge.cat-green, .list-card-progress-fill.cat-green { background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; }
.task-list-chip-icon.cat-cyan, .list-card-icon-badge.cat-cyan, .hero-banner-badge.cat-cyan, .list-card-progress-fill.cat-cyan { background: linear-gradient(135deg, #0097A7, #00BCD4); color: #fff; }

/* Category selection dots for modal */
.radio-dot.purple-dot { background: #F3E5F5; color: #8E24AA; }
.radio-dot.teal-dot { background: #E0F2F1; color: #00897B; }
.radio-dot.orange-dot { background: #FFF3E0; color: #FB8C00; }
.radio-dot.pink-dot { background: #FCE4EC; color: #D81B60; }
.radio-dot.blue-dot { background: #E3F2FD; color: #1E88E5; }
.radio-dot.amber-dot { background: #FFF8E1; color: #F57F17; }
.radio-dot.indigo-dot { background: #E8EAF6; color: #3949AB; }
.radio-dot.red-dot { background: #FFEBEE; color: #E53935; }
.radio-dot.green-dot { background: #E8F5E9; color: #43A047; }
.radio-dot.cyan-dot { background: #E0F7FA; color: #00ACC1; }

.category-radio input[type="radio"]:checked + .radio-dot.purple-dot { background: linear-gradient(135deg, #8E24AA, #AB47BC); color: #fff; border-color: #8E24AA; }
.category-radio input[type="radio"]:checked + .radio-dot.teal-dot { background: linear-gradient(135deg, #00ACC1, #26C6DA); color: #fff; border-color: #00ACC1; }
.category-radio input[type="radio"]:checked + .radio-dot.orange-dot { background: linear-gradient(135deg, #FF9800, #FFA726); color: #fff; border-color: #FF9800; }
.category-radio input[type="radio"]:checked + .radio-dot.pink-dot { background: linear-gradient(135deg, #EC407A, #F06292); color: #fff; border-color: #EC407A; }
.category-radio input[type="radio"]:checked + .radio-dot.blue-dot { background: linear-gradient(135deg, #1E88E5, #42A5F5); color: #fff; border-color: #1E88E5; }
.category-radio input[type="radio"]:checked + .radio-dot.amber-dot { background: linear-gradient(135deg, #FFB300, #FFCA28); color: #fff; border-color: #FFB300; }
.category-radio input[type="radio"]:checked + .radio-dot.indigo-dot { background: linear-gradient(135deg, #3949AB, #5C6BC0); color: #fff; border-color: #3949AB; }
.category-radio input[type="radio"]:checked + .radio-dot.red-dot { background: linear-gradient(135deg, #E53935, #EF5350); color: #fff; border-color: #E53935; }
.category-radio input[type="radio"]:checked + .radio-dot.green-dot { background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; border-color: #43A047; }
.category-radio input[type="radio"]:checked + .radio-dot.cyan-dot { background: linear-gradient(135deg, #0097A7, #00BCD4); color: #fff; border-color: #0097A7; }

/* Modal overlay guarantee */
#new-tasklist-modal.active,
#new-tasklist-modal.show,
#new-task-item-modal.active,
#new-task-item-modal.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 10000 !important;
}

.add-task-item-pill-btn {
  margin-top: 14px;
  margin-bottom: 24px;
}

/* ── Botones de acción en Tarea (Editar / Eliminar) visibles al pasar el cursor ── */
.task-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  margin-right: 4px;
}

.habit-card:hover .task-card-actions,
.habit-card:focus-within .task-card-actions {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (hover: none) {
  .task-card-actions {
    opacity: 0.75;
    visibility: visible;
    transform: translateX(0);
  }
}

.task-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.task-action-btn svg,
.task-action-btn i {
  width: 15px;
  height: 15px;
  stroke-width: 2.2px;
}

.task-action-btn.task-btn-edit:hover {
  color: var(--accent-purple, #AB47BC);
  background: rgba(171, 71, 188, 0.12);
  transform: scale(1.1);
}

.task-action-btn.task-btn-del:hover {
  color: #EF5350;
  background: rgba(239, 83, 80, 0.12);
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED TASKS & LISTS VIEW (SEGMENTED SWITCHER & QUICK ACCESS)
   ══════════════════════════════════════════════════════════════ */
#add-task-modal.active,
#add-task-modal.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 10000 !important;
}

.tasks-unified-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .tasks-unified-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.tasks-header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tasks-header-main-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.tasks-header-sub {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.tasks-tab-switcher {
  display: inline-flex;
  background: rgba(212, 186, 170, 0.25);
  padding: 4px;
  border-radius: 16px;
  gap: 4px;
  border: 1px solid rgba(212, 186, 170, 0.35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .tasks-tab-switcher {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.tasks-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tasks-tab-btn svg,
.tasks-tab-btn i {
  width: 16px;
  height: 16px;
}

.tasks-tab-btn:hover {
  color: var(--text-main);
}

.tasks-tab-btn.active {
  background: var(--white);
  color: var(--accent-purple, #AB47BC);
  box-shadow: 0 4px 14px rgba(171, 71, 188, 0.18);
  transform: scale(1.02);
}

[data-theme="dark"] .tasks-tab-btn.active {
  background: var(--bg-card);
  color: var(--accent-pink, #EC407A);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.tasks-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px;
  background: rgba(171, 71, 188, 0.15);
  color: var(--accent-purple, #AB47BC);
}

.tasks-tab-btn.active .tasks-tab-badge {
  background: linear-gradient(135deg, #EC407A, #AB47BC);
  color: #ffffff;
}

/* Strip de acceso rápido a Listas en la pestaña de Mis Tareas */
.tasks-lists-quick-access {
  background: var(--white);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

[data-theme="dark"] .tasks-lists-quick-access {
  background: var(--bg-card);
}

.quick-access-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.quick-access-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-access-title svg,
.quick-access-title i {
  width: 14px;
  height: 14px;
  color: var(--accent-pink);
}

.btn-new-task-list-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-pink);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-new-task-list-mini:hover {
  background: rgba(236, 64, 122, 0.1);
  transform: scale(1.03);
}

.btn-new-task-list-mini svg,
.btn-new-task-list-mini i {
  width: 13px;
  height: 13px;
}



@media (max-width: 768px) {
  .dashboard-mood-and-lists-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .task-lists-grid-container {
    grid-template-columns: 1fr;
  }
  .task-list-hero-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hero-progress-pill {
    align-self: flex-start;
  }
}

/* ==========================================================================
   CONFIGURACIÓN: PERFIL DE USUARIO PERSONALIZABLE (AVATARES, EMOJIS & FOTOS)
   ========================================================================== */
.profile-customizer-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.profile-avatar-large-wrapper {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.profile-avatar-large {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-pink, #EC407A), var(--accent-purple, #AB47BC));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(171, 71, 188, 0.3);
  border: 3px solid var(--white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: var(--transition-normal);
}

.profile-avatar-large.has-image {
  background-color: transparent;
}

.profile-input-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-style-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.avatar-style-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(150, 140, 160, 0.08);
  border: 1px solid rgba(150, 140, 160, 0.18);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-normal);
}

.avatar-style-tab:hover {
  background: rgba(150, 140, 160, 0.15);
}

.avatar-style-tab.active {
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.16), rgba(171, 71, 188, 0.16));
  border-color: var(--accent-pink, #EC407A);
  color: var(--accent-pink, #EC407A);
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.15);
}

.avatar-emoji-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  background: rgba(150, 140, 160, 0.06);
  border-radius: 16px;
  border: 1px solid rgba(150, 140, 160, 0.12);
  margin-top: 10px;
}

.avatar-emoji-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid rgba(150, 140, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: var(--transition-normal);
}

.avatar-emoji-item:hover {
  transform: scale(1.18);
  box-shadow: 0 4px 12px rgba(236, 64, 122, 0.25);
  border-color: var(--accent-pink, #EC407A);
}

.avatar-emoji-item.selected {
  border-color: var(--accent-pink, #EC407A);
  background: linear-gradient(135deg, rgba(236, 64, 122, 0.15), rgba(171, 71, 188, 0.15));
  box-shadow: 0 0 0 2px var(--accent-pink, #EC407A);
  transform: scale(1.1);
}

.avatar-image-upload-area {
  padding: 16px;
  background: rgba(150, 140, 160, 0.06);
  border-radius: 16px;
  border: 1px dashed rgba(150, 140, 160, 0.25);
  margin-top: 10px;
}

.avatar-upload-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-avatar-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EC407A, #AB47BC);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(236, 64, 122, 0.25);
  transition: var(--transition-normal);
}

.btn-avatar-upload:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(236, 64, 122, 0.35);
}

.btn-avatar-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 87, 34, 0.1);
  border: 1px solid rgba(255, 87, 34, 0.2);
  color: #FF5722;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-avatar-remove:hover {
  background: rgba(255, 87, 34, 0.2);
}

.avatar-upload-tip {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.4;
}

.profile-avatar.has-image {
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}