/* ==========================================================================
   Oráculo - Sistema de Gestión Personal Consciente
   Design System: Movimiento Funcional
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colores - Turquesa (primario) */
  --turquesa-50: #ecfeff;
  --turquesa-100: #cdfffb;
  --turquesa-200: #a5f3fc;
  --turquesa-300: #67e8f9;
  --turquesa-400: #18f8f6;
  --turquesa-500: #06b6d4;
  --turquesa-600: #00bec8;
  --turquesa-700: #088b96;

  /* Colores - Rosa (secundario) */
  --rosa-50: #fff1f2;
  --rosa-100: #ffe4ea;
  --rosa-200: #fecdd3;
  --rosa-300: #fda4af;
  --rosa-400: #fb718f;
  --rosa-500: #f43f5e;
  --rosa-600: #e11d48;
  --rosa-700: #be1238;

  /* Colores - Verde (exito) */
  --verde-50: #ecfdf5;
  --verde-100: #d1fae5;
  --verde-200: #a7f3d0;
  --verde-400: #34d399;
  --verde-500: #10b981;
  --verde-600: #059669;

  /* Colores - Tulip Tree (advertencia) */
  --tulip-tree-50: #fef9e8;
  --tulip-tree-200: #fee28a;
  --tulip-tree-300: #fdd147;
  --tulip-tree-500: #eab308;

  /* Colores - Grises */
  --gris-50: #f9fafb;
  --gris-100: #f3f4f6;
  --gris-200: #e5e7eb;
  --gris-300: #d1d5db;
  --gris-400: #9ca3af;
  --gris-500: #6b7280;
  --gris-600: #4b5563;
  --gris-700: #374151;
  --gris-800: #1f2937;
  --gris-900: #111827;

  /* Colores semanticos */
  --color-primary: var(--turquesa-600);
  --color-primary-hover: var(--turquesa-700);
  --color-secondary: var(--rosa-600);
  --color-success: var(--verde-500);
  --color-success-light: var(--verde-50);
  --color-warning: var(--tulip-tree-500);
  --color-danger: var(--rosa-600);

  /* Tipografía */
  --font-family-headings: 'Righteous', cursive;
  --font-family-body: 'ABeeZee', sans-serif;
  --font-size-3xl: 2.25rem;
  --font-size-2xl: 1.875rem;
  --font-size-xl: 1.5rem;
  --font-size-lg: 1.125rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  /* Espaciado (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Bordes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Dashboard UI Enhancements (v1.6) */
  --dashboard-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --dashboard-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
  --font-size-dashboard-base: 1.0625rem; /* 17px para audiencia 40+ */
  --font-size-dashboard-secondary: 0.9375rem; /* 15px minimo */
  --checkbox-size-lg: 24px;
  --animation-celebration: 0.4s;
}

/* --------------------------------------------------------------------------
   Material Symbols
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Filled variant */
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Icon sizes */
.icon-xs { font-size: 14px; }
.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }
.icon-xl { font-size: 48px; }

/* Icon colors */
.icon-primary { color: var(--color-primary); }
.icon-secondary { color: var(--color-secondary); }
.icon-success { color: var(--color-success); }
.icon-warning { color: var(--color-warning); }
.icon-danger { color: var(--color-danger); }
.icon-muted { color: var(--gris-400); }

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  background-color: var(--gris-100);
  color: var(--gris-900);
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-family-headings);
  margin: 0;
  line-height: 1.2;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

.app-header {
  background: var(--gris-900);
  border-bottom: 1px solid var(--gris-800);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: white;
}

.app-logo .logo-img {
  height: 36px;
  width: auto;
}

.logo-icon {
  font-size: 1.5rem;
  color: var(--turquesa-400);
}

.logo-text {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: #d4a017;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.app-nav {
  display: flex;
  gap: var(--space-1);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--gris-300);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-link:hover {
  background: var(--gris-800);
  color: white;
  text-decoration: none;
}

.nav-link.active {
  background: var(--turquesa-600);
  color: white;
}

.nav-icon {
  font-size: 1.2rem;
}

.nav-text {
  font-size: var(--font-size-sm);
}

.app-main {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.app-footer {
  text-align: center;
  padding: var(--space-3);
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  border-top: 1px solid var(--gris-200);
  background: white;
}

.footer-small {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  margin-top: var(--space-1);
}

.footer-version {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-2);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.footer-version:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

/* Botones deshabilitados - visualmente obvio */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--secondary {
  background: var(--gris-100);
  color: var(--gris-700);
  border: 1px solid var(--gris-300);
}

.btn--secondary:hover {
  background: var(--gris-200);
}

.btn--tertiary {
  background: transparent;
  color: var(--gris-600);
}

.btn--tertiary:hover {
  background: var(--gris-100);
}

.btn--danger {
  background: var(--color-danger);
  color: white;
}

.btn--danger:hover {
  background: var(--rosa-700);
}

.btn--danger-subtle {
  background: transparent;
  color: var(--color-danger);
}

.btn--danger-subtle:hover {
  background: var(--rosa-100);
}

.btn--icon {
  padding: var(--space-1);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: var(--radius-md);
}

.btn--icon:hover {
  background: var(--gris-100);
}

/* Iconos del header sobre fondo oscuro */
.app-header .btn--icon {
  color: var(--gris-300);
}

.app-header .btn--icon:hover {
  background: var(--gris-800);
  color: white;
}

.btn--large {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
}

.btn--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  gap: var(--space-1);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gris-300);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--turquesa-100);
}

.input--small {
  width: auto;
  max-width: 80px;
}

.textarea {
  resize: vertical;
  min-height: 80px;
}

.textarea--large {
  min-height: 200px;
}

.form-group {
  margin-bottom: var(--space-2);
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--gris-700);
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: var(--gris-500);
  font-size: var(--font-size-xs);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.form-section {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gris-200);
}

.form-section:last-of-type {
  border-bottom: none;
}

.form-section h3 {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.modal--large {
  max-width: 700px;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  padding: var(--space-3);
}

.modal-header {
  margin-bottom: var(--space-3);
}

.modal-title {
  font-size: var(--font-size-xl);
  color: var(--gris-900);
  margin-bottom: var(--space-1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

/* Modal de Confirmación (Danger/Warning) */
.confirm-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modal-appear 0.2s ease;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.confirm-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.confirm-modal__content {
  padding: var(--space-4);
  text-align: center;
}

.confirm-modal__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}

.confirm-modal--danger .confirm-modal__icon {
  background: var(--rosa-100);
  color: var(--rosa-600);
}

.confirm-modal--warning .confirm-modal__icon {
  background: var(--amarillo-100);
  color: var(--amarillo-700);
}

.confirm-modal__icon .material-symbols-outlined {
  font-size: 2rem;
}

.confirm-modal__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--gris-900);
  margin: 0 0 var(--space-1) 0;
}

.confirm-modal__message {
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.5;
}

.confirm-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.confirm-modal__actions .btn {
  flex: 1;
  max-width: 150px;
}

/* Botón danger específico */
.btn--danger {
  background: var(--rosa-600);
  color: white;
  border: none;
}

.btn--danger:hover {
  background: var(--rosa-700);
}

.btn--danger:focus {
  outline: 2px solid var(--rosa-300);
  outline-offset: 2px;
}

/* Modal de Volumen Fijo (Daily Setup) */
.modal--setup {
  max-width: 450px;
  background: linear-gradient(180deg, var(--turquesa-50) 0%, white 30%);
}

.setup-content {
  padding: var(--space-4);
}

.setup-header {
  text-align: center;
  margin-bottom: var(--space-2);
  position: relative;
}

/* Botón X para cerrar/omitir Daily Setup */
.setup-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--gris-500);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
}

.setup-close-btn:hover {
  background: var(--gris-100);
  color: var(--gris-700);
}

.setup-close-btn .material-symbols-outlined {
  font-size: 1.5rem;
}

.setup-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.setup-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  color: var(--gris-900);
  margin: 0;
}

.setup-subtitle {
  color: var(--gris-600);
  margin-top: 0;
}

.setup-quote {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.setup-section {
  margin-bottom: var(--space-3);
}

.setup-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
  color: var(--gris-700);
  margin-bottom: var(--space-2);
}

.setup-options {
  display: grid;
  gap: var(--space-2);
}

.time-options {
  grid-template-columns: repeat(4, 1fr);
}

.energy-options {
  grid-template-columns: repeat(3, 1fr);
}

.setup-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.setup-option:hover {
  border-color: var(--color-primary);
  background: var(--turquesa-50);
}

.setup-option.selected {
  border-color: var(--color-primary);
  background: var(--turquesa-100);
}

.setup-option .material-symbols-outlined {
  font-size: 1.5rem;
  color: var(--gris-500);
}

.setup-option.selected .material-symbols-outlined {
  color: var(--color-primary);
}

.energy-option.selected .material-symbols-outlined {
  color: var(--option-color, var(--color-primary));
}

.option-label {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.setup-option.selected .option-label {
  color: var(--gris-900);
  font-weight: 500;
}

/* Mensaje de ayuda inicial (antes de seleccionar) */
.setup-help {
  margin-top: var(--space-3);
}

.help-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gris-100);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gris-400);
}

.help-icon {
  color: var(--gris-500);
  flex-shrink: 0;
  font-size: 20px;
}

.help-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  line-height: 1.5;
}

/* Resultado calculado (después de seleccionar) */
.setup-result {
  margin-top: var(--space-3);
}

.result-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--turquesa-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.result-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.result-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.5;
}

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

/* Responsive para setup modal */
@media (max-width: 480px) {
  .time-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .setup-content {
    padding: var(--space-3);
  }
}

/* ==========================================================================
   Modal Daily Setup - Version 2 Columnas
   ========================================================================== */

/* Container principal con 2 columnas */
.modal--setup-2col .setup-content {
  max-width: 1000px;
  width: 95vw;
  padding: 0;
}

/* Versión página (no modal) */
.setup-2col {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* Solo para el modal, no para la página */
.modal--setup-2col .setup-2col {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* Body con 2 columnas */
.setup-2col__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: 0;
  flex: 1;
}

/* Columna izquierda */
.setup-2col__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.setup-2col__left .setup-header {
  text-align: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.setup-2col__left .setup-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.setup-2col__left .setup-title {
  font-size: var(--font-size-lg);
  margin-bottom: 2px;
}

.setup-2col__left .setup-subtitle {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Grupos de selectores */
.setup-2col .selector-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setup-2col .selector-group__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.setup-2col .selector-group__label .material-symbols-outlined {
  font-size: 16px;
  color: var(--turquesa-600);
}

/* Chips en fila horizontal */
.setup-2col .selector-chips {
  display: flex;
  gap: 4px;
  background: var(--gris-100);
  padding: 4px;
  border-radius: var(--radius-md);
}

.setup-2col .selector-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-width: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.setup-2col .selector-chip:hover {
  background: var(--blanco);
}

.setup-2col .selector-chip[aria-pressed="true"] {
  background: var(--blanco);
  box-shadow: var(--shadow-sm);
}

.setup-2col .selector-chip__icon {
  font-size: 18px;
  color: var(--gris-400);
  transition: color var(--transition-fast);
}

.setup-2col .selector-chip[aria-pressed="true"] .selector-chip__icon {
  color: var(--turquesa-600);
}

/* Colores especiales para energía */
.setup-2col .selector-chip[data-energy="low"][aria-pressed="true"] .selector-chip__icon {
  color: var(--rosa-400);
}

.setup-2col .selector-chip[data-energy="high"][aria-pressed="true"] .selector-chip__icon {
  color: var(--turquesa-600);
}

.setup-2col .selector-chip__label {
  font-size: 10px;
  color: var(--gris-500);
  font-weight: 500;
}

.setup-2col .selector-chip[aria-pressed="true"] .selector-chip__label {
  color: var(--gris-800);
  font-weight: 600;
}

/* Mensaje de ayuda */
.setup-2col .setup-help {
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--gris-300);
}

.setup-2col .setup-help__text {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  line-height: 1.4;
  margin: 0;
}

.setup-2col .setup-help__text .material-symbols-outlined {
  font-size: 18px;
  color: var(--gris-400);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Resultado calculado */
.setup-2col .setup-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--tulip-tree-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--tulip-tree-500);
  opacity: 1;
}

.setup-2col .setup-result__icon {
  font-size: 24px;
  color: var(--tulip-tree-500);
  flex-shrink: 0;
}

.setup-2col .setup-result__text {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.3;
  margin: 0;
}

.setup-2col .setup-result__text strong {
  color: var(--tulip-tree-500);
  font-weight: 600;
}

/* Columna derecha - Lista de tareas */
.setup-2col__right {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gris-200);
  overflow: hidden;
  min-height: 280px;
}

.setup-2col__right .setup-tasks__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
  flex-shrink: 0;
}

.setup-2col__right .setup-tasks__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-700);
  margin: 0;
}

.setup-2col__right .setup-tasks__title .material-symbols-outlined {
  font-size: 20px;
  color: var(--turquesa-600);
}

.setup-2col__right .setup-tasks__counter {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.setup-2col__right .setup-tasks__counter--full {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

/* Lista de tareas scrollable */
.setup-2col__right .setup-tasks__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  min-height: 0;
}

/* Scrollbar personalizada */
.setup-2col__right .setup-tasks__list::-webkit-scrollbar {
  width: 6px;
}

.setup-2col__right .setup-tasks__list::-webkit-scrollbar-track {
  background: var(--gris-100);
  border-radius: 3px;
}

.setup-2col__right .setup-tasks__list::-webkit-scrollbar-thumb {
  background: var(--gris-300);
  border-radius: 3px;
}

/* Task items */
.setup-2col .task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  margin-bottom: 4px;
  animation: fadeIn 0.2s ease backwards;
}

.setup-2col .task-item:last-child {
  margin-bottom: 0;
}

.setup-2col .task-item:hover {
  background: var(--gris-50);
}

.setup-2col .task-item--selected {
  background: var(--turquesa-50);
}

.setup-2col .task-item--in-daily {
  background: var(--turquesa-50);
  opacity: 0.7;
}

/* Checkbox custom */
.setup-2col .task-item__checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.setup-2col .task-item__checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.setup-2col .task-item__check-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gris-300);
  border-radius: var(--radius-sm);
  background: var(--blanco);
  transition: all var(--transition-fast);
}

.setup-2col .task-item__check-visual .material-symbols-outlined {
  font-size: 14px;
  color: transparent;
}

.setup-2col .task-item__checkbox input:checked + .task-item__check-visual {
  background: var(--turquesa-600);
  border-color: var(--turquesa-600);
}

.setup-2col .task-item__checkbox input:checked + .task-item__check-visual .material-symbols-outlined {
  color: var(--blanco);
}

.setup-2col .task-item__checkbox input:disabled + .task-item__check-visual {
  opacity: 0.6;
  cursor: not-allowed;
}

.setup-2col .task-item__checkbox input:focus-visible + .task-item__check-visual {
  outline: 2px solid var(--turquesa-400);
  outline-offset: 2px;
}

/* Contenido de la tarea */
.setup-2col .task-item__content {
  flex: 1;
  min-width: 0;
}

.setup-2col .task-item__text {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.setup-2col .task-item__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.setup-2col .task-item__tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--gris-100);
  color: var(--gris-600);
}

.setup-2col .task-item__tag--project {
  background: var(--project-color, var(--rosa-100));
  color: var(--gris-800);
}

.setup-2col .task-item__tag--in-daily {
  background: var(--turquesa-500);
  color: white;
}
/* Tarea de daily marcada para devolver a su columna original */
.setup-2col .task-item--removing {
  opacity: 0.7;
  border-left: 3px solid var(--amarillo-500);
  background: var(--amarillo-50);
}

.setup-2col .task-item--removing .task-item__check-visual {
  background: var(--amarillo-100);
  border-color: var(--amarillo-400);
}

/* Contador cuando excede el limite */
.setup-2col .setup-tasks__counter--over {
  background: var(--rosa-500);
  color: white;
}

/* Separador entre secciones daily y weekly */
.setup-2col .task-item__separator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin: var(--space-2) 0;
  color: var(--gris-400);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.setup-2col .task-item__separator::before,
.setup-2col .task-item__separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-200);
}

/* Estado vacío */
.setup-2col .setup-tasks__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--gris-500);
  height: 100%;
}

.setup-2col .setup-tasks__empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--gris-300);
  margin-bottom: var(--space-2);
}

.setup-2col .setup-tasks__empty p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.setup-2col .setup-tasks__empty .hint {
  color: var(--gris-400);
  margin-top: 4px;
}

/* Separador de secciones en lista de tareas (v3) */
.setup-tasks__separator {
  list-style: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--gris-100);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

.setup-tasks__separator:first-child {
  margin-top: 0;
}

/* Footer con botones (dentro de columna derecha, arriba de la lista) */
.setup-2col__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.setup-2col__footer .btn--tertiary {
  color: var(--gris-500);
}

.setup-2col__footer .btn--tertiary:hover {
  color: var(--gris-700);
}

.setup-2col__footer .btn--primary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ==========================================================================
   RESPONSIVE: Colapsar a 1 columna en móvil
   ========================================================================== */
@media (max-width: 640px) {
  .modal--setup-2col .setup-content {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .setup-2col {
    height: 100%;
    max-height: 100vh;
  }

  .setup-2col__body {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    overflow-y: auto;
    padding: var(--space-2) 8px; /* Laterales minimos */
  }

  .setup-2col__left {
    gap: var(--space-2);
  }

  .setup-2col__left .setup-header {
    padding-bottom: var(--space-1);
  }

  .setup-2col__left .setup-icon {
    font-size: 28px;
  }

  .setup-2col__left .setup-title {
    font-size: var(--font-size-base);
  }

  .setup-2col__right {
    min-height: 150px;
    padding: var(--space-2) 8px; /* Laterales minimos */
  }

  .setup-2col__right .setup-tasks__list {
    padding: var(--space-1) 4px;
  }

  .setup-obstacles {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }

  .setup-obstacles__summary {
    padding: var(--space-1) 4px;
  }

  .setup-2col__footer {
    order: 99; /* Al final */
    padding: var(--space-2) 8px; /* Laterales minimos */
    flex-direction: column-reverse;
    gap: var(--space-2);
    background: var(--gris-50);
  }

  .setup-2col__footer .btn--primary {
    width: 100%;
    justify-content: center;
  }

  .setup-2col__footer .btn--tertiary {
    width: 100%;
    text-align: center;
  }

  /* Modales con contenido largo en móvil */
  #archive-confirm-modal .modal-content,
  #archived-viewer-modal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header {
  margin-bottom: var(--space-4);
}

.page-title {
  font-size: var(--font-size-2xl);
  color: var(--gris-900);
  margin-bottom: var(--space-1);
}

.page-description {
  color: var(--gris-600);
  max-width: 600px;
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.section-title {
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

.section-limit {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: all 0.2s ease;
}

/* Estado: slots disponibles */
.section-limit--available {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

/* Estado: limite alcanzado */
.section-limit--full {
  background: var(--rosa-100);
  color: var(--rosa-700);
}

.section-description {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Empty State - Diseño acogedor
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--space-4);
  color: var(--gris-600);
  background: var(--gris-50);
  border: 2px dashed var(--gris-200);
  border-radius: var(--radius-md);
}

/* Icono decorativo circular */
.empty-state::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-2);
  background: var(--gris-100);
  border-radius: 50%;
}

.empty-state p {
  font-size: var(--font-size-dashboard-secondary);
  line-height: 1.6;
}

.empty-state--large {
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--gris-300);
}

.empty-state--large::before {
  width: 64px;
  height: 64px;
}

.empty-state h3 {
  color: var(--gris-700);
  margin-bottom: var(--space-2);
}

/* Variantes con colores de acento */
.empty-state--habit {
  border-color: var(--tulip-tree-200);
}

.empty-state--habit::before {
  background: var(--tulip-tree-50);
}

.empty-state--events {
  border-color: var(--gris-200);
}

.empty-state--events::before {
  background: var(--turquesa-50);
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.dashboard {
  display: grid;
  gap: var(--space-3);
}

.dashboard__header {
  margin-bottom: var(--space-2);
}

.dashboard__title {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
}

.dashboard__date {
  color: var(--gris-600);
  text-transform: capitalize;
}

.dashboard__section {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Focus List */
.focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.focus-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--gris-100);
}

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

.focus-item--completed .focus-text {
  text-decoration: line-through;
  color: var(--gris-400);
}

.focus-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  cursor: pointer;
}

.focus-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

.focus-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.focus-item:hover .focus-delete {
  opacity: 1;
}

/* Roca Principal styles - destacada visualmente */
.focus-item--rock {
  background: linear-gradient(135deg,
    var(--turquesa-50) 0%,
    var(--rosa-50) 50%,
    var(--tulip-tree-50) 100%
  );
  border: 2px solid var(--turquesa-400);
  border-left: 5px solid var(--turquesa-500);
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
  position: relative;
}

/* Badge flotante "ROCA PRINCIPAL" */
.focus-item--rock::before {
  content: 'ROCA PRINCIPAL';
  position: absolute;
  top: -10px;
  left: var(--space-2);
  background: var(--turquesa-500);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

.focus-item--rock .focus-text {
  font-weight: 600;
  color: var(--gris-800);
}

/* Icono diamante con sparkle animado */
.icon-rock {
  color: var(--turquesa-500);
  font-size: 1.3rem;
  animation: diamond-sparkle 3s ease-in-out infinite;
}

@keyframes diamond-sparkle {
  0%, 100% {
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 6px var(--turquesa-400));
    transform: scale(1.1);
  }
}

.focus-actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.focus-rock {
  opacity: 0;
  transition: opacity var(--transition-fast);
  color: var(--gris-400);
}

.focus-rock:hover {
  color: var(--color-primary);
}

.focus-rock.active {
  opacity: 1;
  color: var(--color-primary);
}

.focus-item:hover .focus-rock {
  opacity: 1;
}

/* Badge de proyecto en tareas del foco */
.focus-project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 99px;
  background-color: color-mix(in srgb, var(--project-color, var(--gris-400)) 15%, transparent);
  color: var(--project-color, var(--gris-600));
  margin-left: var(--space-1);
  flex-shrink: 0;
}

.focus-project .project-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.add-focus-form {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.add-focus-form .input {
  flex: 1;
}

.limit-message {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

/* Habit Card - Dashboard */
.habit-card {
  background: linear-gradient(135deg, var(--turquesa-50) 0%, white 50%, var(--turquesa-50) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.habit-card--completed {
  border-color: var(--color-success);
  background: linear-gradient(135deg, var(--verde-50) 0%, white 50%, var(--verde-50) 100%);
}

/* Header con identidad */
.habit-card__header {
  margin-bottom: var(--space-1);
}

.habit-identity {
  font-style: italic;
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  /* Truncar a 2 lineas maximo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Body con nombre del habito */
.habit-card__body {
  margin-bottom: var(--space-2);
}

.habit-name {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--gris-800);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.3;
  /* Truncar a 2 lineas maximo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Trigger con icono de contexto */
.habit-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  background: var(--gris-100);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  max-width: 100%;
}

.habit-trigger__icon {
  font-size: 14px;
  flex-shrink: 0;
  color: var(--turquesa-600);
}

.habit-trigger__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer con racha y boton */
.habit-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--turquesa-200);
  flex-wrap: wrap;
  gap: var(--space-1);
}

.habit-streak {
  display: flex;
  align-items: center;
  gap: 4px;
}

.streak-icon {
  font-size: 1.2rem;
}

.streak-count {
  font-weight: 500;
  color: var(--gris-700);
}

.habit-done {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-success);
  font-weight: 500;
}

/* Events List */
.events-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.event-time {
  font-weight: 500;
  color: var(--gris-600);
  min-width: 50px;
}

/* Quote */
.quote {
  font-style: italic;
  color: var(--gris-600);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-2);
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  font-style: normal;
}

/* Quote variants for Burkeman reflections */
.quote--header {
  background: linear-gradient(135deg, var(--turquesa-50), var(--rosa-50));
  border-left: 4px solid var(--color-primary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

.quote--header p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--gris-700);
}

.quote--header cite {
  color: var(--gris-500);
  font-size: var(--font-size-xs);
}

.quote--inline {
  background: var(--turquesa-50);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.quote--inline p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

.quote--inline cite {
  color: var(--color-primary);
}

.quote--secondary {
  background: transparent;
  border-left: 2px solid var(--gris-300);
  padding: var(--space-2);
  margin-top: var(--space-3);
  opacity: 0.9;
}

.quote--secondary p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.quote--secondary cite {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
}

/* Burkeman reflexion container */
.burkeman-reflexion {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

.link-subtle {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  margin-top: var(--space-2);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Values Page
   -------------------------------------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-3);
}

.value-card {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.value-card:hover {
  box-shadow: var(--shadow-md);
}

.value-card--add {
  border: 2px dashed var(--gris-300);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  color: var(--gris-500);
  min-height: 150px;
}

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

.add-icon {
  font-size: 2rem;
}

.value-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.value-icon {
  font-size: 2rem;
}

.value-name {
  font-size: var(--font-size-lg);
  color: var(--gris-900);
}

.value-description {
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  margin: 0;
}

.value-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-2);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.value-card:hover .value-card__actions {
  opacity: 1;
}

.value-examples {
  text-align: left;
  margin-top: var(--space-3);
  padding-left: var(--space-3);
}

.value-examples li {
  margin-bottom: var(--space-1);
  color: var(--gris-600);
}

.values-reflection {
  background: white;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.reflection-prompt {
  font-size: var(--font-size-lg);
  color: var(--gris-700);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-2);
  margin: var(--space-2) 0 0;
}

/* --------------------------------------------------------------------------
   Kanban Board
   -------------------------------------------------------------------------- */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  overflow-x: auto;
}

.kanban-column {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  min-width: 220px;
}

.kanban-column__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--gris-200);
  margin-bottom: var(--space-2);
}

.kanban-column__title {
  font-size: var(--font-size-base);
  color: var(--gris-700);
}

.kanban-column__count {
  font-size: var(--font-size-xs);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.kanban-column__count.count--full {
  background: var(--rosa-100);
  color: var(--rosa-700);
}

.kanban-column__items {
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 100px;
}

.kanban-column__items.drag-over {
  background: var(--turquesa-100);
  border-radius: var(--radius-md);
}

.kanban-item {
  background: var(--gris-50);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  cursor: grab;
  transition: all var(--transition-fast);
}

.kanban-item:hover {
  background: var(--gris-100);
}

.kanban-item.dragging {
  opacity: 0.5;
}

.kanban-item--completed {
  opacity: 0.6;
}

.kanban-item--completed .kanban-item__text {
  text-decoration: line-through;
}

/* Feedback visual al soltar un item después de drag & drop */
.kanban-item--dropped {
  animation: pulse-success 0.6s ease-out;
}

@keyframes pulse-success {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}

.kanban-item__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kanban-item__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  cursor: pointer;
}

.kanban-item__checkbox input {
  margin-top: 3px;
}

.kanban-item__text {
  font-size: var(--font-size-sm);
}

.kanban-item__notes {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin: 0;
}

.kanban-item__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: var(--space-1);
  opacity: 0;
}

.kanban-item:hover .kanban-item__actions {
  opacity: 1;
}

.kanban-add-btn {
  width: 100%;
  padding: var(--space-1);
  background: transparent;
  border: 1px dashed var(--gris-300);
  border-radius: var(--radius-md);
  color: var(--gris-500);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.kanban-add-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.kanban-limit-msg {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  text-align: center;
  padding: var(--space-1);
}

.kanban-tips {
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--tulip-tree-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

/* --------------------------------------------------------------------------
   Habits Page
   -------------------------------------------------------------------------- */
.active-habit-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.habit-header {
  margin-bottom: var(--space-3);
}

.habit-formula {
  background: var(--gris-50);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.habit-formula p {
  margin: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.habit-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.stat {
  text-align: center;
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--color-primary);
}

.stat-label {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.habit-calendar h4 {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin-bottom: var(--space-2);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gris-50);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  position: relative;
}

.calendar-day.completed {
  background: var(--turquesa-100);
  color: var(--color-primary);
}

.calendar-day.today {
  border: 2px solid var(--color-primary);
}

.calendar-day.future {
  opacity: 0.4;
}

.day-check {
  font-size: 0.6rem;
  color: var(--color-success);
}

.habit-actions {
  margin-top: var(--space-3);
  text-align: center;
}

.done-message {
  color: var(--color-success);
  font-weight: 500;
}

.habit-secondary-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.laws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.law-card {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  text-align: center;
}

.law-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  font-weight: bold;
  margin-bottom: var(--space-1);
}

.law-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
}

.law-card p {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin: 0;
}

.habits-graduated,
.habits-science {
  margin-top: var(--space-4);
}

.graduated-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.graduated-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
}

.graduated-icon {
  color: var(--color-success);
}

.graduated-name {
  flex: 1;
  font-weight: 500;
}

.graduated-date {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

/* --------------------------------------------------------------------------
   Calendar Page
   -------------------------------------------------------------------------- */
.calendar-navigation {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.week-title {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-lg);
}

.week-current-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--turquesa-700);
  background: var(--turquesa-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.calendar-actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.week-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
}

.day-column {
  min-height: 200px;
  background: var(--gris-50);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}

.day-column--today {
  background: var(--turquesa-100);
}

.day-header {
  text-align: center;
  padding: var(--space-1);
  border-bottom: 1px solid var(--gris-200);
  margin-bottom: var(--space-1);
}

.day-name {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  text-transform: uppercase;
}

.day-number {
  font-weight: bold;
  font-size: var(--font-size-lg);
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  border-left: 3px solid var(--color-primary);
}

.event-item--recurring {
  border-left-color: var(--color-secondary);
}

.event-item:hover {
  background: var(--gris-100);
}

.event-item__content {
  flex: 1;
  min-width: 0;
}

.event-item__gcal {
  opacity: 0;
  padding: 2px;
  min-width: 24px;
  min-height: 24px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--gris-500);
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.event-item:hover .event-item__gcal {
  opacity: 1;
}

.event-item__gcal:hover {
  color: var(--color-primary);
  background: var(--turquesa-100);
}

/* Eventos de sincronía */
.event-item--sincronia {
  background: linear-gradient(135deg, var(--turquesa-50), var(--rosa-50));
  border-left-color: var(--rosa-400);
}

.event-sincronia-icon {
  font-size: 0.9rem;
  color: var(--rosa-500);
  margin-right: 2px;
}

/* Checkbox de sincronía en modales */
.form-group--checkbox {
  padding: var(--space-2);
  background: var(--turquesa-50);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label .material-symbols-outlined {
  color: var(--rosa-500);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin: var(--space-1) 0 0 var(--space-4);
}

.char-counter {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  text-align: right;
  margin-top: var(--space-1);
}

.event-time {
  display: block;
  color: var(--gris-500);
  font-size: 0.65rem;
}

.event-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.days-selector {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.days-selector label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Journal Page
   -------------------------------------------------------------------------- */
.entry-type-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.entry-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.entry-type-btn:hover {
  border-color: var(--color-primary);
  background: var(--turquesa-100);
}

.entry-type-icon {
  font-size: 2rem;
}

.entry-type-name {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

.journal-entries {
  margin-top: var(--space-4);
}

/* === Filtros de búsqueda del diario === */
.journal-filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.journal-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  flex: 1;
  min-width: 200px;
  transition: border-color var(--transition-fast);
}

.journal-search:focus-within {
  border-color: var(--turquesa-500);
}

.journal-search .material-symbols-outlined {
  color: var(--gris-400);
  font-size: 20px;
}

.journal-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-base);
  background: transparent;
}

.journal-search input::placeholder {
  color: var(--gris-400);
}

.journal-search .btn-icon {
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--gris-500);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.journal-search .btn-icon:hover {
  background: var(--gris-100);
  color: var(--gris-700);
}

.journal-search .btn-icon .material-symbols-outlined {
  font-size: 18px;
}

.journal-type-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--blanco);
  min-width: 150px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.journal-type-select:focus {
  outline: none;
  border-color: var(--turquesa-500);
}

.entries-count {
  font-size: var(--font-size-sm);
  font-weight: normal;
  color: var(--gris-500);
}

.entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.entry-card {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.entry-card:hover {
  box-shadow: var(--shadow-md);
}

.entry-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.entry-type-badge {
  font-size: var(--font-size-xs);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.entry-date {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.entry-preview {
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  margin: 0;
  line-height: 1.6;
}

.prompts-label {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin-bottom: var(--space-1);
}

.prompts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.prompt-item {
  background: var(--turquesa-100);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.prompt-item:hover {
  background: var(--turquesa-400);
  color: white;
}

.prompt-item--inserted {
  background: var(--turquesa-500);
  color: white;
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   Journal Editor (Página completa)
   -------------------------------------------------------------------------- */
.journal-editor-page {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.editor-back {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--gris-600);
}

.editor-back:hover {
  color: var(--turquesa-600);
}

.editor-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.entry-type-badge--large {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.editor-date {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
}

.editor-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}

.editor-sidebar {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  height: fit-content;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  position: sticky;
  top: var(--space-2);
}

.editor-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
  color: var(--gris-800);
}

.herramienta-intro {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.prompts-section {
  margin-top: var(--space-2);
}

.prompts-hint {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  font-weight: normal;
}

.editor-main {
  display: flex;
  flex-direction: column;
}

.editor-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.editor-textarea {
  flex: 1;
  min-height: 400px;
  width: 100%;
  padding: var(--space-3);
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.8;
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.editor-textarea:focus {
  outline: none;
  border-color: var(--turquesa-400);
  box-shadow: 0 0 0 3px var(--turquesa-100);
}

.editor-textarea::placeholder {
  color: var(--gris-400);
}

/* Wrapper para textarea + botón dictado */
.editor-textarea-wrapper {
  position: relative;
  flex: 1;
  display: flex;
}

.editor-textarea-wrapper .editor-textarea {
  flex: 1;
}

/* Contenedor de dictado */
.dictation-container {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  z-index: 1;
}

.dictation-container[hidden] {
  display: none;
}

/* Feedback visual del dictado (texto en tiempo real) */
.dictation-feedback {
  background: var(--gris-800);
  color: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  max-width: 280px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.2s ease;
}

.dictation-feedback.hidden {
  display: none;
}

.dictation-status {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--turquesa-300);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dictation-interim {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  margin: 0;
  min-height: 1.4em;
}

/* Botón de dictado (voz a texto) */
.btn-dictation {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--turquesa-500);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-dictation:hover {
  background: var(--turquesa-600);
  transform: scale(1.05);
}

.btn-dictation:active {
  transform: scale(0.95);
}

.btn-dictation.recording {
  background: var(--rosa-500);
  animation: pulse-recording 1.5s ease-in-out infinite;
}

.btn-dictation .material-symbols-outlined {
  font-size: 24px;
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(225, 29, 72, 0); }
}

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

.editor-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

.editor-actions-right {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* Responsive: Editor en móvil */
@media (max-width: 768px) {
  .editor-layout {
    grid-template-columns: 1fr;
  }

  .editor-sidebar {
    position: static;
    max-height: none;
    order: 2;
  }

  .editor-main {
    order: 1;
  }

  .editor-textarea {
    min-height: 300px;
  }

  .editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .editor-meta {
    width: 100%;
    justify-content: space-between;
  }

  .editor-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .editor-actions-right {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Entry cards como links */
a.entry-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.entry-card:hover {
  text-decoration: none;
}

/* Entry type buttons como links */
a.entry-type-btn {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */
.settings-section {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gris-200);
}

.settings-section:last-of-type {
  border-bottom: none;
}

.settings-section h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
}

.settings-section--danger {
  background: var(--rosa-100);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0 0;
}

/* Zona de peligro con borrado parcial */
.danger-zone {
  background: var(--rosa-50);
  border: 1px solid var(--rosa-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-3);
}

.danger-zone h3 {
  color: var(--rosa-700);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
}

.danger-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.danger-buttons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  text-align: center;
}

.danger-buttons button small {
  font-size: var(--font-size-xs);
  opacity: 0.8;
  font-weight: normal;
}

.danger-divider {
  border: none;
  border-top: 1px solid var(--rosa-200);
  margin: var(--space-4) 0;
}

.btn--warning {
  border-color: var(--rosa-400);
  color: var(--rosa-700);
}

.btn--warning:hover {
  background: var(--rosa-100);
  border-color: var(--rosa-500);
}

.settings-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.storage-info {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.storage-bar {
  height: 8px;
  background: var(--gris-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-1);
}

.storage-bar__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--transition-normal);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Notifications
   -------------------------------------------------------------------------- */
.notification {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--gris-800);
  color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition-normal);
  z-index: 1000;
}

.notification--visible {
  transform: translateY(0);
  opacity: 1;
}

.notification--success {
  background: var(--color-success);
}

.notification--warning {
  background: var(--color-warning);
  color: var(--gris-900);
}

.notification--error {
  background: var(--color-danger);
}

/* Toast de actualización del Service Worker */
.notification--update {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--turquesa-600);
  padding: var(--space-3) var(--space-4);
}

.notification__btn {
  background: white;
  color: var(--turquesa-700);
  border: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: inherit;
  font-size: var(--text-sm);
}

.notification__btn:hover {
  background: var(--turquesa-100);
}

/* --------------------------------------------------------------------------
   Loading State
   -------------------------------------------------------------------------- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: var(--gris-500);
}

.error-message {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   Menú Hamburguesa - Botón toggle
   -------------------------------------------------------------------------- */
.app-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ==========================================================================
   Banner de Captura GTD
   Banner fijo debajo del header para capturar "cosas" sin procesarlas
   ========================================================================== */

.capture-banner {
  background: linear-gradient(135deg, var(--turquesa-600) 0%, var(--turquesa-500) 100%);
  padding: var(--space-2) var(--space-3);
  position: sticky;
  top: 64px; /* Altura del header */
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.capture-banner__content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.capture-banner__icon {
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  flex-shrink: 0;
}

.capture-banner__input {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.capture-banner__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.capture-banner__input:focus {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.capture-banner__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: white;
  color: var(--turquesa-600);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.capture-banner__btn:hover {
  background: var(--turquesa-50);
  transform: translateY(-1px);
}

.capture-banner__btn .material-symbols-outlined {
  font-size: 20px;
}

.capture-banner__counter {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--rosa-500);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  flex-shrink: 0;
}

.capture-banner__counter-num {
  font-weight: 700;
}

.capture-banner__counter-label {
  opacity: 0.9;
}

/* Tablet */
@media (max-width: 900px) {
  .capture-banner {
    top: 56px;
    padding: var(--space-2);
  }

  .capture-banner__btn-text {
    display: none;
  }

  .capture-banner__btn {
    padding: 10px;
  }

  .capture-banner__counter-label {
    display: none;
  }
}

/* Móvil */
@media (max-width: 600px) {
  .capture-banner {
    padding: var(--space-2) var(--space-2);
  }

  .capture-banner__icon {
    display: none;
  }

  .capture-banner__input {
    font-size: 14px;
    padding: 8px 12px;
  }

  .capture-banner__btn {
    padding: 8px;
  }

  .capture-banner__counter {
    padding: 4px 8px;
    font-size: 12px;
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: var(--space-2);
  font-size: 28px;
}

.nav-toggle:hover {
  color: var(--turquesa-300);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--turquesa-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tablet y móvil: mostrar hamburguesa, ocultar nav */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-header {
    position: relative;
  }

  .app-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column;
    padding: var(--space-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    z-index: 1000;
  }

  .app-nav.is-open {
    display: flex;
  }

  .app-nav .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .app-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .app-nav .nav-text {
    display: inline;
  }

  .header-actions {
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .app-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .app-nav .nav-link {
    padding: var(--space-2);
  }

  .app-main {
    padding: var(--space-2);
  }

  .kanban-board {
    grid-template-columns: 1fr;
  }

  .week-view {
    grid-template-columns: 1fr;
  }

  .day-column {
    min-height: auto;
  }

  .habit-stats {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal {
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .logo-text {
    display: none;
  }

  .entry-type-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .laws-grid {
    grid-template-columns: 1fr;
  }

  /* ═══════════════════════════════════════════════════════════════
     OPTIMIZACIÓN MÓVIL - Maximizar ancho útil
     ═══════════════════════════════════════════════════════════════ */

  /* --- PRIORIDAD 1: Contenedores Principales --- */

  /* Contenedor principal - padding lateral respirable */
  .app-main {
    padding: var(--space-2) 12px; /* 16px arriba/abajo, 12px lados */
  }

  /* Header - reducir padding lateral */
  .app-header {
    padding: var(--space-1) var(--space-2); /* 8px vert, 16px horiz */
  }

  /* Dashboard - reducir gaps y padding */
  .dashboard {
    gap: var(--space-2); /* 16px entre secciones */
  }

  .dashboard__header {
    margin-bottom: var(--space-2); /* 16px */
    text-align: center;
  }

  .dashboard__section {
    padding: var(--space-2); /* 16px */
    margin-bottom: var(--space-2);
  }

  /* Footer */
  .app-footer {
    padding: var(--space-2); /* 16px */
  }

  /* --- PRIORIDAD 2: Modales --- */

  /* Modales - reducir padding interno */
  .modal-content {
    padding: var(--space-2); /* 16px */
  }

  .modal-header {
    padding: var(--space-2);
  }

  .modal-footer {
    padding: var(--space-2);
  }

  /* Modal setup - ajustar ancho */
  .modal--setup .setup-content {
    padding: var(--space-2);
  }

  /* --- PRIORIDAD 3: Kanban y Tarjetas --- */

  /* Kanban */
  .kanban-sections {
    padding: var(--space-1); /* 8px */
    gap: var(--space-2);
  }

  .kanban-column {
    padding: var(--space-1);
  }

  .kanban-card {
    padding: var(--space-2);
  }

  /* Habits */
  .habit-card {
    padding: var(--space-2);
  }

  /* Projects */
  .project-card {
    padding: var(--space-2);
  }

  /* Values */
  .value-card {
    padding: var(--space-2);
  }

  /* Calendario */
  .calendar-week {
    gap: var(--space-1);
  }

  .calendar-day {
    padding: var(--space-1);
  }

  /* Journal */
  .journal-entry {
    padding: var(--space-2);
  }

  /* Achievements */
  .achievement-card {
    padding: var(--space-2);
  }

  .stats-grid {
    gap: var(--space-2);
  }
}

/* ==========================================================================
   UI/UX IMPROVEMENTS - Phase 7 Polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Focus States - Accesibilidad (WCAG 2.1 AA)
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--turquesa-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.btn:focus-visible {
  outline: 3px solid var(--turquesa-400);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 190, 200, 0.2);
}

.input:focus-visible,
.textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 190, 200, 0.15);
}

.nav-link:focus-visible {
  outline: 3px solid var(--turquesa-400);
  outline-offset: 2px;
  background: var(--turquesa-100);
}

.entry-card:focus-visible,
.value-card--add:focus-visible,
.entry-type-btn:focus-visible {
  outline: 3px solid var(--turquesa-400);
  outline-offset: 2px;
}

/* Skip link para saltar al contenido */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top var(--transition-fast);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* --------------------------------------------------------------------------
   2. Microinteracciones en Checkboxes
   -------------------------------------------------------------------------- */
.focus-checkbox,
.kanban-item__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--gris-300);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.focus-checkbox:hover,
.kanban-item__checkbox input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  background: var(--turquesa-100);
}

.focus-checkbox:checked,
.kanban-item__checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.focus-checkbox::after,
.kanban-item__checkbox input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.focus-checkbox:checked::after,
.kanban-item__checkbox input[type="checkbox"]:checked::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

@keyframes checkbox-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.focus-checkbox:checked,
.kanban-item__checkbox input[type="checkbox"]:checked {
  animation: checkbox-pop 0.3s ease;
}

/* --------------------------------------------------------------------------
   3. Mejoras de Contraste (WCAG AA)
   -------------------------------------------------------------------------- */
.section-description,
.page-description,
.habit-trigger,
.habit-identity,
.event-time,
.entry-date,
.footer-small,
.section-limit,
.storage-info,
.kanban-limit-msg,
.graduated-date,
.prompts-label,
.empty-state {
  color: var(--gris-600);
}

.input::placeholder {
  color: var(--gris-500);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Transiciones de Vista
   -------------------------------------------------------------------------- */
.app-main {
  animation: fadeIn 0.25s ease-out;
}

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

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--gris-600);
}

.loading::before {
  content: '';
  width: 24px;
  height: 24px;
  border: 3px solid var(--gris-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Clase de utilidad para iconos giratorios */
.spin {
  animation: spin 1s linear infinite;
}

.dashboard__section {
  animation: slideUp 0.3s ease-out both;
}

.dashboard__section:nth-child(1) { animation-delay: 0.05s; }
.dashboard__section:nth-child(2) { animation-delay: 0.1s; }
.dashboard__section:nth-child(3) { animation-delay: 0.15s; }
.dashboard__section:nth-child(4) { animation-delay: 0.2s; }

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

/* --------------------------------------------------------------------------
   5. Touch Targets (44px mínimo - WCAG)
   -------------------------------------------------------------------------- */
.btn--icon {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

.focus-label {
  min-height: 44px;
  padding: var(--space-1) 0;
}

@media (max-width: 768px) {
  .nav-link {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-1);
    justify-content: center;
  }

  .focus-delete {
    opacity: 1;
    min-width: 44px;
    min-height: 44px;
  }

  .kanban-item {
    padding: var(--space-2);
    min-height: 56px;
  }

  .kanban-item__actions {
    opacity: 1;
  }

  .entry-type-btn {
    min-height: 80px;
    padding: var(--space-2);
  }

  .days-selector label {
    min-height: 44px;
    padding: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   6. Feedback Drag & Drop
   -------------------------------------------------------------------------- */
.kanban-item.dragging {
  opacity: 0.6;
  transform: rotate(2deg) scale(1.02);
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}

.kanban-column__items.drag-over {
  background: var(--turquesa-100);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-md);
  min-height: 120px;
}

.kanban-column__items.drag-over::before {
  content: 'Soltar aquí';
  display: block;
  text-align: center;
  padding: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.kanban-column__items {
  transition: background var(--transition-fast),
              border var(--transition-fast);
  border: 2px solid transparent;
}

.kanban-item:not(.dragging):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   7. Estados Vacíos Mejorados
   -------------------------------------------------------------------------- */
.empty-state--large {
  padding: var(--space-6);
  background: linear-gradient(135deg, white 0%, var(--turquesa-100) 100%);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--gris-300);
  text-align: center;
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-400) 0%, var(--turquesa-600) 100%);
  border-radius: 50%;
  color: white;
  font-size: 40px;
}

.empty-state h3,
.empty-state__title {
  color: var(--gris-800);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.empty-state p,
.empty-state__description {
  color: var(--gris-600);
  margin-bottom: var(--space-3);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.empty-state__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.empty-state--inline {
  padding: var(--space-3);
  background: var(--gris-100);
  border-radius: var(--radius-md);
}

.empty-state--inline .empty-state__icon {
  width: 48px;
  height: 48px;
  font-size: 24px;
  margin-bottom: var(--space-2);
}

.empty-state--inline .empty-state__title {
  font-size: var(--font-size-base);
}

.empty-state--inline .empty-state__description {
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   8. Hover States Coherentes
   -------------------------------------------------------------------------- */
.value-card,
.entry-card,
.habit-card,
.law-card,
.graduated-item {
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
  will-change: transform;
}

.value-card:hover,
.entry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.habit-card:hover {
  box-shadow: 0 6px 12px rgba(0, 190, 200, 0.15);
}

.value-card--add {
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.value-card--add:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--turquesa-100);
}

/* Ocultar icono de valor cuando hay emoji personalizado */
.value-icon:not(:empty) + .value-icon-symbol {
  display: none;
}

/* ==========================================================================
   PROJECTS MODULE - Phase 8
   ========================================================================== */

/* --------------------------------------------------------------------------
   Projects Page Layout
   -------------------------------------------------------------------------- */
.projects-page {
  max-width: 1000px;
}

.projects-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.projects-count {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin: 0;
}

.limit-warning {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  margin: 0;
  background: var(--tulip-tree-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.projects-section {
  margin-bottom: var(--space-4);
}

.projects-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
  color: var(--gris-700);
  margin-bottom: var(--space-2);
}

.section-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2);
  background: var(--gris-100);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  transition: background var(--transition-fast);
}

.section-toggle:hover {
  background: var(--gris-200);
}

.toggle-icon {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

/* --------------------------------------------------------------------------
   Project Cards Grid
   -------------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.projects-grid--compact {
  gap: var(--space-2);
}

.projects-grid--compact .project-card {
  padding: var(--space-2);
}

/* --------------------------------------------------------------------------
   Project Card
   -------------------------------------------------------------------------- */
.project-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
  border-left: 4px solid var(--project-color, var(--gris-300));
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.project-card--compact {
  padding: var(--space-2);
}

.project-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.project-card__color {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 4px;
}

.project-card__name {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gris-800);
  margin: 0;
  line-height: 1.3;
}

.project-card__menu {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.project-card:hover .project-card__menu {
  opacity: 1;
}

.project-card__description {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card__progress {
  margin-bottom: var(--space-2);
}

.project-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.project-card__value,
.project-card__deadline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.deadline--urgent {
  background: var(--rosa-100);
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   Progress Bar
   -------------------------------------------------------------------------- */
.progress-bar {
  height: 6px;
  background: var(--gris-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-bar--large {
  height: 10px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--transition-normal);
  border-radius: var(--radius-full);
}

.progress-text {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

/* --------------------------------------------------------------------------
   Project Detail Modal
   -------------------------------------------------------------------------- */
.project-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.project-detail__color {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
}

.project-detail__name {
  flex: 1;
  font-size: var(--font-size-xl);
  margin: 0;
}

#close-project-detail {
  margin-left: auto;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--gris-100);
}

.status-badge--active {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

.status-badge--paused {
  background: var(--tulip-tree-100);
  color: var(--tulip-tree-700);
}

.status-badge--completed {
  background: var(--turquesa-100);
  color: var(--color-success);
}

.status-badge--archived {
  background: var(--gris-100);
  color: var(--gris-600);
}

.project-detail__description {
  font-size: var(--font-size-base);
  color: var(--gris-700);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

.project-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.project-detail__progress {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.progress-percentage {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.progress-count {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.project-detail__tasks {
  margin-bottom: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
  padding-right: var(--space-1);
}

.project-detail__tasks::-webkit-scrollbar {
  width: 6px;
}

.project-detail__tasks::-webkit-scrollbar-thumb {
  background: var(--gris-300);
  border-radius: 3px;
}

.project-detail__tasks::-webkit-scrollbar-thumb:hover {
  background: var(--gris-400);
}

.project-detail__tasks h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

/* Formulario inline para crear tarea desde proyecto */
.project-add-task {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.project-add-task-btn {
  width: 100%;
  justify-content: center;
}

.project-add-task-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project-add-task-form .input {
  width: 100%;
}

.project-add-task-form .checkbox-label {
  font-size: var(--font-size-sm);
}

.project-add-task-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

.project-add-task-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

.project-add-task-hint[hidden] {
  display: none;
}

/* Checkbox importante en modales */
.checkbox-label--important {
  cursor: pointer;
  user-select: none;
}

.checkbox-label--important:hover {
  color: var(--rosa-600);
}

.empty-message {
  text-align: center;
  padding: var(--space-3);
  color: var(--gris-600);
  font-size: var(--font-size-sm);
}

.empty-message a {
  color: var(--color-primary);
}

.task-group {
  margin-bottom: var(--space-3);
}

.task-group__title {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin-bottom: var(--space-1);
}

.task-group--completed {
  opacity: 0.7;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
}

.task-item--completed {
  opacity: 0.6;
}

.task-item--completed .task-item__text {
  text-decoration: line-through;
}

.task-item__checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gris-300);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-item__checkbox--checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.task-item__text {
  flex: 1;
  font-size: var(--font-size-sm);
}

.task-item__horizon {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.project-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

/* --------------------------------------------------------------------------
   Color Picker
   -------------------------------------------------------------------------- */
.color-picker {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.color-option {
  width: 32px;
  height: 32px;
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--transition-fast),
              border-color var(--transition-fast);
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  border-color: var(--gris-800);
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Kanban Project Integration
   -------------------------------------------------------------------------- */
.page-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.kanban-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  white-space: nowrap;
}

.input--small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  min-width: 150px;
}

.kanban-item__project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--gris-600);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: var(--space-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Projects Page - Empty State
   -------------------------------------------------------------------------- */
.projects-page .empty-state {
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-lg);
  text-align: center;
}

.projects-page .empty-icon {
  font-size: 64px;
  color: var(--gris-300);
  margin-bottom: var(--space-2);
}

.projects-page .empty-state h3 {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Projects Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card__menu {
    opacity: 1;
  }

  .page-header__top {
    flex-direction: column;
  }

  .kanban-filter {
    width: 100%;
  }

  .input--small {
    flex: 1;
  }

  .project-detail__actions {
    flex-direction: column;
  }

  .project-detail__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Módulo de Logros (Achievements)
   ========================================================================== */

/* Página de logros */
.achievements-page {
  padding: var(--space-3);
  max-width: 1000px;
  margin: 0 auto;
}

/* Selector de período */
.period-selector {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  background: var(--gris-100);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
}

.period-btn {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
}

.period-btn:hover {
  color: var(--gris-800);
  background: var(--gris-50);
}

.period-btn.active {
  background: white;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Resumen de contadores */
.achievements-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.stat-card {
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-card .stat-icon {
  font-size: 28px;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.stat-card .stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: bold;
  font-family: var(--font-family-headings);
  color: var(--gris-900);
}

.stat-card .stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: var(--space-1);
}

/* Secciones de logros */
.achievements-recap,
.achievements-progress,
.achievements-heatmap,
.achievements-graduated {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.achievements-recap h2,
.achievements-progress h2,
.achievements-heatmap h2,
.achievements-graduated h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

/* Tarjeta de recapitulación */
.recap-card {
  background: var(--gris-50);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.recap-card p {
  margin: 0 0 var(--space-1) 0;
}

.recap-card strong {
  color: var(--color-primary);
}

.recap-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

.recap-empty {
  color: var(--gris-500);
  font-style: italic;
}

/* Barras de progreso */
.progress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
}

.progress-label {
  font-weight: 500;
  color: var(--gris-700);
}

.progress-value {
  color: var(--gris-500);
}

.progress-bar {
  height: 8px;
  background: var(--gris-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--turquesa-400), var(--turquesa-600));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

/* Heatmap de actividad */
.heatmap-container {
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.heatmap-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 700px;
}

.heatmap-months {
  display: flex;
  padding-left: 30px;
  gap: 0;
}

.heatmap-months span {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  text-align: center;
}

.heatmap-body {
  display: flex;
  gap: var(--space-1);
}

.heatmap-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 20px;
}

.heatmap-days span {
  height: 12px;
  font-size: 9px;
  color: var(--gris-500);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

.heatmap-grid {
  display: flex;
  gap: 2px;
}

.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.heatmap-day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--gris-200);
  cursor: default;
}

.heatmap-day.level-1 { background: var(--turquesa-100); }
.heatmap-day.level-2 { background: var(--turquesa-400); }
.heatmap-day.level-3 { background: var(--turquesa-600); }
.heatmap-day.level-4 { background: var(--turquesa-700); }
.heatmap-day.today {
  outline: 2px solid var(--gris-600);
  outline-offset: 1px;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.legend-scale {
  display: flex;
  gap: 2px;
}

.legend-scale span {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-scale .level-0 { background: var(--gris-200); }
.legend-scale .level-1 { background: var(--turquesa-100); }
.legend-scale .level-2 { background: var(--turquesa-400); }
.legend-scale .level-3 { background: var(--turquesa-600); }
.legend-scale .level-4 { background: var(--turquesa-700); }

/* Badges de hábitos graduados */
.graduated-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.graduated-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--turquesa-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.graduated-badge .badge-icon {
  color: var(--color-success);
  font-size: 18px;
}

.graduated-badge .badge-name {
  font-weight: 500;
  color: var(--gris-800);
}

.graduated-badge .badge-date {
  color: var(--gris-500);
  font-size: var(--font-size-xs);
}

/* Logros de hoy en Dashboard */
.dashboard__achievements {
  background: var(--gris-50);
}

.today-achievements {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.achievement-item .material-symbols-outlined {
  font-size: 20px;
}

/* ==========================================================================
   Módulo de Configuración (Settings)
   ========================================================================== */

.settings-page {
  padding: var(--space-3);
  max-width: 1000px;
  margin: 0 auto;
}

.settings-section {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.settings-section h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

.settings-section h3 {
  font-size: var(--font-size-base);
  color: var(--gris-700);
  margin-bottom: var(--space-1);
}

.settings-section .section-description {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.settings-section--danger {
  border: 1px solid var(--rosa-100);
  background: var(--gris-50);
}

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

/* Aviso de datos locales */
.local-storage-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--turquesa-50);
  border: 1px solid var(--turquesa-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.local-storage-notice > .material-symbols-outlined {
  font-size: 28px;
  color: var(--turquesa-600);
  flex-shrink: 0;
}

.local-storage-notice strong {
  display: block;
  color: var(--turquesa-700);
  font-size: var(--font-size-base);
  margin-bottom: 4px;
}

.local-storage-notice p {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  line-height: 1.4;
  margin: 0;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Cuadernos anuales */
.settings-section--notebooks {
  border: 2px solid var(--turquesa-100);
  background: linear-gradient(135deg, white, var(--turquesa-100) 150%);
}

/* Respaldo automático */
.backup-status {
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.backup-linked,
.backup-unlinked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-icon {
  font-size: 28px;
}

.status-icon--success {
  color: var(--turquesa-500);
}

.status-icon--warning {
  color: var(--amarillo-500);
}

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

.backup-info strong {
  font-size: var(--font-size-base);
}

.backup-detail {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

/* Sincronización entre dispositivos */
.sync-instructions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.sync-step {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.step-number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--turquesa-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--font-size-base);
}

.step-content {
  flex: 1;
}

.step-content strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--gris-800);
}

.step-content p {
  color: var(--gris-600);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.sync-tip {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: #fef9c3; /* amarillo-100 más visible */
  border-radius: var(--radius-md);
  border-left: 3px solid #facc15; /* amarillo-400 */
  margin-top: var(--space-2);
}

.sync-tip .material-symbols-outlined {
  color: var(--amarillo-600);
  flex-shrink: 0;
  font-size: 20px;
}

.sync-tip p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

.current-notebook {
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.notebook-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notebook-icon {
  font-size: 32px;
  color: var(--color-primary);
}

.notebook-since {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

.summary-mini {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.summary-mini span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notebook-actions {
  margin: var(--space-2) 0;
}

.action-hint {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: var(--space-1);
}

.archived-years {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

.archived-years h3 {
  margin-bottom: var(--space-2);
}

.archived-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.archived-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
}

.archived-info {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.archived-info .material-symbols-outlined {
  color: var(--gris-400);
}

.archived-date {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.archived-summary {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.import-archived {
  margin-top: var(--space-2);
}

/* Modal de confirmación de archivado */
.archive-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
}

.archive-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
}

.archive-warning {
  background: var(--tulip-tree-50);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--tulip-tree-500);
  font-size: var(--font-size-sm);
}

/* Visor de año archivado */
.archived-viewer {
  max-height: 60vh;
  overflow-y: auto;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.viewer-badge {
  background: var(--gris-200);
  color: var(--gris-600);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.viewer-summary {
  background: var(--gris-50);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.viewer-summary h3 {
  margin-bottom: var(--space-2);
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-2);
}

.summary-stat {
  text-align: center;
}

.summary-stat .stat-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-primary);
}

.summary-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.viewer-section {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.viewer-section h3 {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.viewer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.viewer-list li {
  padding: var(--space-1) 0;
}

.viewer-subtitle {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

/* Modal grande */
.modal--large .modal-content {
  max-width: 600px;
}

/* Responsive para logros */
@media (max-width: 768px) {
  .achievements-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card .stat-value {
    font-size: var(--font-size-xl);
  }

  .heatmap-wrapper {
    min-width: 100%;
  }

  .heatmap-months {
    display: none;
  }

  .period-selector {
    flex-wrap: wrap;
  }

  .period-btn {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .current-notebook {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-mini {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Volumen Fijo - Modal de Setup Diario
   -------------------------------------------------------------------------- */
.modal--setup {
  background: transparent;
}

.modal--setup::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.setup-content {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 420px;
  width: 90vw;
  animation: slideUp 0.3s ease;
}

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

.setup-header {
  text-align: center;
  margin-bottom: var(--space-3);
}

.setup-icon {
  font-size: 48px;
  color: var(--turquesa-600);
  margin-bottom: var(--space-1);
}

.setup-title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: var(--gris-800);
  margin-bottom: var(--space-1);
}

.setup-subtitle {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
}

.setup-body {
  margin-bottom: var(--space-3);
}

.setup-question {
  margin-bottom: var(--space-3);
}

.setup-question-title {
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: var(--space-1);
}

.setup-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.setup-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.setup-option:hover {
  border-color: var(--turquesa-400);
  background: var(--turquesa-100);
}

.setup-option.selected {
  border-color: var(--turquesa-600);
  background: var(--turquesa-100);
}

.setup-option-icon {
  font-size: 24px;
  color: var(--gris-500);
  margin-bottom: 4px;
}

.setup-option.selected .setup-option-icon {
  color: var(--turquesa-600);
}

.setup-option-label {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

/* Reglas antiguas de .setup-result eliminadas - usar .setup-2col .setup-result */

.setup-result-text {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--turquesa-700);
  margin-bottom: var(--space-1);
}

.setup-result-limit {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--turquesa-600);
}

.setup-reflection {
  font-style: italic;
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.setup-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

/* Setup Modal - Pasos de navegación */
.setup-step {
  animation: fadeIn 0.3s ease;
}

/* Paso 2: Modo Menú en el Setup */
.modal--setup .setup-content {
  max-width: 520px;
}

.menu-slots-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-100), var(--turquesa-50));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--turquesa-700);
}

.menu-slots-indicator .material-symbols-outlined {
  font-size: 20px;
}

.menu-slots-indicator strong {
  color: var(--turquesa-800);
}

/* Contenedor de tareas en el setup */
#menu-tasks-container {
  max-height: 45vh;
  min-height: 200px;
  overflow-y: auto;
  padding-right: var(--space-1);
  margin-bottom: var(--space-2);
}

#menu-tasks-container::-webkit-scrollbar {
  width: 6px;
}

#menu-tasks-container::-webkit-scrollbar-track {
  background: var(--gris-100);
  border-radius: 3px;
}

#menu-tasks-container::-webkit-scrollbar-thumb {
  background: var(--gris-300);
  border-radius: 3px;
}

/* Secciones del menú */
.menu-section {
  margin-bottom: var(--space-3);
}

.menu-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--type-color, var(--gris-600));
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--type-color, var(--gris-200));
  margin-bottom: var(--space-2);
}

.menu-section__title .material-symbols-outlined {
  font-size: 18px;
}

.menu-section__count {
  margin-left: auto;
  font-weight: 400;
  color: var(--gris-400);
}

.menu-section--current .menu-section__title {
  color: var(--turquesa-600);
  border-color: var(--turquesa-500);
}

.menu-section__title--current {
  color: var(--turquesa-600) !important;
}

/* Items del menú */
.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.menu-item:hover {
  border-color: var(--turquesa-400);
  background: var(--turquesa-50);
}

.menu-item--in-daily {
  background: var(--turquesa-50);
  border-color: var(--turquesa-300);
  opacity: 0.8;
}

.menu-item__select {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  cursor: pointer;
}

.menu-item__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--turquesa-600);
  cursor: pointer;
}

.menu-item__checkbox:disabled {
  cursor: not-allowed;
}

.menu-item__text {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
}

.menu-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.menu-item__horizon {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--gris-100);
  color: var(--gris-600);
  border-radius: var(--radius-sm);
}

.menu-item__project {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--project-color);
  color: white;
  border-radius: var(--radius-sm);
}

.menu-item__badge {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  padding: 2px 6px;
  background: var(--turquesa-600);
  color: white;
  border-radius: var(--radius-sm);
}

/* Estado vacío del menú */
.menu-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--gris-500);
}

.menu-empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--gris-300);
  margin-bottom: var(--space-2);
  display: block;
}

.menu-empty p {
  margin-bottom: var(--space-1);
}

.menu-empty .hint {
  font-size: var(--font-size-sm);
  color: var(--gris-400);
}

/* Ajustes de acciones del modal */
.setup-step .modal-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

/* --------------------------------------------------------------------------
   Temporizador de Calma ("No Hacer Nada")
   -------------------------------------------------------------------------- */
.modal--calm {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 400px;
  width: 90vw;
}

.modal--calm::backdrop {
  background: rgba(17, 24, 39, 0.9);
}

.calm-content {
  background: linear-gradient(180deg, var(--gris-800), var(--gris-900));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: white;
  position: relative;
  text-align: center;
}

.calm-header {
  margin-bottom: var(--space-4);
}

.calm-icon {
  font-size: 56px;
  color: var(--turquesa-400);
  display: block;
  margin-bottom: var(--space-2);
}

.calm-title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: white;
  margin: 0;
}

.calm-instruction {
  color: var(--gris-300);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.calm-timer {
  margin: var(--space-4) 0;
}

.timer-display {
  font-family: var(--font-family-headings);
  font-size: 4rem;
  color: var(--turquesa-400);
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(24, 248, 246, 0.3);
}

.calm-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.calm-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  color: var(--gris-400);
  background: transparent;
}

.calm-close:hover {
  color: white;
  background: transparent;
}

/* Estado completado */
.calm-completed {
  padding: var(--space-3);
}

.calm-done-icon {
  font-size: 64px;
  color: var(--color-success);
  margin-bottom: var(--space-2);
}

.calm-completed h3 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

.calm-reflection {
  font-style: italic;
  color: var(--gris-300);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.calm-journal {
  margin: var(--space-3) 0;
}

.calm-journal-label {
  font-size: var(--font-size-sm);
  color: var(--gris-400);
  margin-bottom: var(--space-1);
}

.calm-journal .textarea {
  background: var(--gris-700);
  border-color: var(--gris-600);
  color: white;
  resize: none;
}

.calm-journal .textarea::placeholder {
  color: var(--gris-400);
}

.calm-journal .textarea:focus {
  border-color: var(--turquesa-400);
  outline: none;
}

.calm-final-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Botón trigger en el Dashboard */
.calm-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--gris-800), var(--gris-900));
  border: none;
  border-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.calm-trigger:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.calm-trigger .material-symbols-outlined {
  font-size: 32px;
  color: var(--turquesa-400);
}

.calm-trigger__content {
  text-align: left;
}

.calm-trigger__title {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: 2px;
}

.calm-trigger__subtitle {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--gris-400);
}

/* Responsive */
@media (max-width: 480px) {
  .setup-options {
    grid-template-columns: 1fr;
  }

  .timer-display {
    font-size: 3rem;
  }

  .calm-content {
    padding: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Modo Menú (Kanban alternativo - Burkeman)
   -------------------------------------------------------------------------- */

/* Toggle de vista */
.kanban-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--gris-100);
  padding: 4px;
  border-radius: var(--radius-md);
}

.view-toggle__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gris-500);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle__btn:hover {
  color: var(--gris-700);
}

.view-toggle__btn.active {
  background: white;
  color: var(--turquesa-600);
  box-shadow: var(--shadow-sm);
}

.view-toggle__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Clase utilitaria para ocultar vistas */
.hidden {
  display: none !important;
}

/* Vista Menú */
.menu-view {
  padding: var(--space-3) 0;
}

.menu-container {
  max-width: 800px;
  margin: 0 auto;
}

.menu-intro {
  text-align: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-100), var(--rosa-100));
  border-radius: var(--radius-lg);
}

.menu-intro__text {
  font-size: var(--font-size-lg);
  color: var(--gris-700);
}

.menu-intro__text strong {
  color: var(--turquesa-700);
  font-weight: 700;
}

/* Secciones del menú */
.menu-section {
  margin-bottom: var(--space-4);
}

.menu-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--type-color, var(--gris-700));
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--type-color, var(--gris-200));
}

.menu-section__title .material-symbols-outlined {
  color: var(--type-color, var(--gris-500));
}

.menu-section__count {
  margin-left: auto;
  background: var(--gris-100);
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.menu-section__title--completed {
  color: var(--color-success);
}

/* Items del menú */
.menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  transition: all var(--transition-fast);
}

.menu-item:hover {
  border-color: var(--turquesa-400);
  box-shadow: var(--shadow-sm);
}

.menu-item--completed {
  opacity: 0.6;
}

.menu-item--completed .menu-item__text {
  text-decoration: line-through;
}

.menu-item__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  flex: 1;
}

.menu-item__checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.menu-item__text {
  font-size: var(--font-size-base);
  color: var(--gris-800);
}

.menu-item__meta {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.menu-item__horizon {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.menu-item__project {
  font-size: var(--font-size-xs);
  color: var(--project-color, var(--gris-600));
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.05);
}

.menu-item__choose {
  flex-shrink: 0;
}

.menu-item__badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--turquesa-600);
  background: var(--turquesa-100);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.menu-items--completed {
  opacity: 0.7;
}

.menu-more {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  font-style: italic;
  margin-top: var(--space-1);
}

/* Botones de tipo de tarea en modal */
.task-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.task-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-md);
  background: white;
  color: var(--gris-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}

.task-type-btn:hover {
  border-color: var(--type-color, var(--gris-400));
  background: var(--gris-50);
}

.task-type-btn.selected {
  border-color: var(--type-color, var(--turquesa-600));
  background: var(--gris-50);
  color: var(--type-color, var(--turquesa-600));
}

.task-type-btn .material-symbols-outlined {
  font-size: 18px;
  color: var(--type-color, var(--gris-500));
}

.task-type-btn.selected .material-symbols-outlined {
  color: var(--type-color, var(--turquesa-600));
}

/* Responsive para Modo Menú */
@media (max-width: 768px) {
  .kanban-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .view-toggle {
    justify-content: center;
  }

  .menu-item {
    flex-wrap: wrap;
  }

  .menu-item__meta {
    width: 100%;
    justify-content: flex-start;
    margin-top: var(--space-1);
  }

  .menu-item__choose {
    width: 100%;
    margin-top: var(--space-1);
  }

  .task-type-options {
    gap: 6px;
  }

  .task-type-btn {
    flex: 1 1 45%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Listas Duales (Backlog + En Foco)
   -------------------------------------------------------------------------- */

/* Columna Backlog - Lista abierta */
.kanban-column--backlog {
  background: linear-gradient(180deg, var(--gris-50), white);
  border-left: 3px solid var(--gris-400);
}

.kanban-column--backlog .kanban-column__title {
  color: var(--gris-600);
}

.kanban-column--backlog .kanban-column__title .material-symbols-outlined {
  color: var(--gris-500);
}

.kanban-column--backlog .count--unlimited {
  background: var(--gris-200);
  color: var(--gris-600);
}

/* Columna En Foco - Lista cerrada */
.kanban-column--focus {
  background: linear-gradient(180deg, var(--turquesa-100), white);
  border-left: 3px solid var(--turquesa-600);
}

.kanban-column--focus .kanban-column__title {
  color: var(--turquesa-700);
}

.kanban-column--focus .kanban-column__title .material-symbols-outlined {
  color: var(--turquesa-600);
}

/* Hints para columnas especiales */
.kanban-column__hint {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  font-style: italic;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.kanban-column__hint--focus {
  color: var(--turquesa-600);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.kanban-column__hint--focus.hint--full {
  color: var(--rosa-500);
}

/* Contador sin límite */
.count--unlimited {
  background: var(--gris-100);
  color: var(--gris-500);
  font-style: italic;
}

.count--unlimited::before {
  content: '∞ ';
  font-weight: bold;
}

/* Ajuste del grid para 5 columnas */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) 0;
  overflow-x: auto;
}

@media (max-width: 1200px) {
  .kanban-board {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Kanban: Layout de 3 Secciones Verticales (Nuevo)
   -------------------------------------------------------------------------- */

/* Contenedor principal de secciones */
/* ===== NUEVO LAYOUT KANBAN: Grid 2 columnas × 3 filas ===== */
.kanban-page--layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-3);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3);
}

/* Pendientes - columna 1, filas 1-2 (span vertical, altura completa) */
.kanban-sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gris-200);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  align-self: stretch; /* Ocupa toda la altura de filas 1-2 */
}

/* Posicionamiento explícito del grid 2×3 */
.kanban-section--focus {
  grid-column: 2;
  grid-row: 1;
}

.kanban-section--weekly {
  grid-column: 2;
  grid-row: 2;
}

.kanban-section--monthly {
  grid-column: 1;
  grid-row: 3;
}

.kanban-section--quarterly {
  grid-column: 2;
  grid-row: 3;
}

.kanban-sidebar__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gris-700);
  margin: 0 0 var(--space-1) 0;
}

.kanban-sidebar__title .material-symbols-outlined {
  color: var(--gris-500);
  font-size: 1.2rem;
}

.kanban-sidebar__hint {
  font-size: 0.8rem;
  color: var(--gris-500);
  font-style: italic;
  margin: 0 0 var(--space-2) 0;
}

.kanban-sidebar__count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gris-500);
  background: var(--gris-200);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--space-1);
}

.kanban-sidebar__count--warning {
  color: var(--tulip-tree-700);
  background: var(--tulip-tree-100);
}

/* Legacy: mantener compatibilidad */
.kanban-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3);
}

/* Sección genérica */
.kanban-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

/* Header de sección */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gris-800);
  margin: 0;
}

.section-title .material-symbols-outlined {
  font-size: 1.3rem;
}

.section-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.85rem;
  color: var(--gris-600);
  margin-bottom: var(--space-2);
}

/* ===== SECCIÓN EN FOCO ===== */
.kanban-section--focus {
  background: linear-gradient(180deg, var(--turquesa-50), white);
  border: 2px solid var(--turquesa-400);
  position: relative;
  overflow: hidden;
}

.kanban-section--focus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--turquesa-500), var(--turquesa-400));
}

.section-header--focus .section-title {
  color: var(--turquesa-700);
}

.section-header--focus .section-title .material-symbols-outlined {
  color: var(--turquesa-500);
}

.slots-indicator {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--turquesa-600);
  background: var(--turquesa-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.slots-indicator.slots--full {
  color: var(--rosa-600);
  background: var(--rosa-100);
}

.section-hint.hint--full {
  color: var(--rosa-600);
}

/* Roca Principal */
.roca-principal {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: linear-gradient(135deg, var(--tulip-tree-50), var(--turquesa-50));
  border: 2px solid var(--tulip-tree-400);
  border-radius: var(--radius-md);
}

.roca-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tulip-tree-700);
  background: var(--tulip-tree-200);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
}

/* Items de En Foco */
.focus-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2) 0;
  min-height: 40px;
}

.focus-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.focus-item:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.focus-item--roca {
  border-color: var(--tulip-tree-300);
  background: white;
}

.focus-item__checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.focus-item__checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.focus-item__check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--gris-400);
  transition: all var(--transition-fast);
}

.focus-item__checkbox:hover .focus-item__check-icon {
  color: var(--turquesa-500);
}

.focus-item__checkbox input:checked + .focus-item__check-icon {
  color: var(--turquesa-500);
}

.focus-item__check-icon .material-symbols-outlined {
  font-size: 28px;
}

.focus-item__content {
  flex: 1;
  min-width: 0;
}

.focus-item__text {
  font-size: 1rem;
  color: var(--gris-800);
  line-height: 1.4;
}

.focus-item__text.text--completed {
  text-decoration: line-through;
  color: var(--gris-500);
}

.focus-item__notes {
  font-size: 0.85rem;
  color: var(--gris-600);
  margin-top: 4px;
  margin-bottom: 0;
}

.focus-item__project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--project-color);
  margin-top: 4px;
}

.focus-item__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.focus-item:hover .focus-item__actions {
  opacity: 1;
}

.kanban-add-btn--focus {
  width: 100%;
  justify-content: center;
  background: var(--turquesa-50);
  border: 2px dashed var(--turquesa-300);
  color: var(--turquesa-600);
}

.kanban-add-btn--focus:hover {
  background: var(--turquesa-100);
  border-color: var(--turquesa-400);
}

/* ===== SECCIONES DEL GRID 2x2 ===== */

/* Semana - arriba derecha */
.kanban-section--weekly {
  background: white;
  border: 1px solid var(--gris-200);
}

.kanban-section--weekly .section-title .material-symbols-outlined {
  color: var(--turquesa-500);
}

/* Mes - abajo izquierda */
.kanban-section--monthly {
  background: white;
  border: 1px solid var(--gris-200);
}

.kanban-section--monthly .section-title .material-symbols-outlined {
  color: var(--gris-600);
}

/* Trimestre - abajo derecha */
.kanban-section--quarterly {
  background: white;
  border: 1px solid var(--gris-200);
}

.kanban-section--quarterly .section-title .material-symbols-outlined {
  color: var(--gris-500);
}

/* ===== SECCIÓN HORIZONTES (legacy) ===== */
.kanban-section--horizons {
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
}

.section-header--horizons .section-title .material-symbols-outlined {
  color: var(--gris-600);
}

.horizons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Columna de horizonte */
.horizon-column {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  border: 1px solid var(--gris-200);
}

.horizon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--gris-100);
}

.horizon-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gris-700);
  margin: 0;
}

.horizon-title .material-symbols-outlined {
  font-size: 1rem;
  color: var(--gris-500);
}

.horizon-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gris-600);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.horizon-count.count--full {
  color: var(--rosa-600);
  background: var(--rosa-100);
}

.horizon-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 60px;
}

.horizon-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  position: relative;
}

.horizon-item:hover {
  background: white;
  box-shadow: var(--shadow-sm);
}

.horizon-item__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  cursor: pointer;
}

.horizon-item__checkbox input {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.horizon-item__text {
  font-size: 0.85rem;
  color: var(--gris-700);
  line-height: 1.3;
}

.horizon-item__project {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  margin-left: auto;
  flex-shrink: 0;
}

/* Item seleccionado */
.horizon-item--selected {
  background: var(--turquesa-50);
  box-shadow: 0 0 0 2px var(--turquesa-400);
}

/* Barra de acciones en header de Horizontes */
.section-header--horizons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.horizons-actions {
  display: flex;
  gap: 4px;
}

.horizons-actions[hidden] {
  display: none;
}

.horizons-actions .btn--icon {
  padding: 4px;
}

.horizons-actions .btn--danger {
  color: var(--rosa-600);
}

.horizons-actions .btn--danger:hover {
  background: var(--rosa-100);
}

/* Estilos comunes para section headers con acciones */
.section-header--focus,
.section-header--backlog {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-actions {
  display: flex;
  gap: 4px;
}

.section-actions[hidden] {
  display: none;
}

.section-actions .btn--icon {
  padding: 4px;
}

.section-actions .btn--danger {
  color: var(--rosa-600);
}

.section-actions .btn--danger:hover {
  background: var(--rosa-100);
}

/* Items seleccionados en Focus y Backlog */
.focus-item--selected {
  background: var(--turquesa-50) !important;
  box-shadow: 0 0 0 2px var(--turquesa-400);
  border-color: var(--turquesa-400) !important;
}

.backlog-item--selected {
  background: var(--turquesa-50);
  box-shadow: 0 0 0 2px var(--turquesa-400);
}

.horizon-add-btn {
  width: 100%;
  padding: var(--space-1);
  margin-top: var(--space-1);
  font-size: 0.8rem;
  background: transparent;
  border: 1px dashed var(--gris-300);
  color: var(--gris-500);
}

.horizon-add-btn:hover {
  background: var(--gris-100);
  border-color: var(--gris-400);
  color: var(--gris-700);
}

/* ===== SECCIÓN BACKLOG ===== */
.kanban-section--backlog {
  background: var(--gris-50);
  border: 1px dashed var(--gris-300);
}

.section-header--backlog {
  cursor: pointer;
}

.section-header--backlog .section-title {
  color: var(--gris-600);
}

.section-header--backlog .section-title .material-symbols-outlined {
  color: var(--gris-500);
}

.backlog-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gris-500);
  background: var(--gris-200);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--space-1);
}

.backlog-expand-btn {
  background: transparent;
  border: none;
  color: var(--gris-500);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.backlog-expand-btn:hover {
  background: var(--gris-200);
  color: var(--gris-700);
}

/* Contenido colapsable */
.backlog-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0;
}

.backlog-content.expanded {
  max-height: 600px;
  padding-top: var(--space-2);
}

.section-hint--backlog {
  color: var(--gris-500);
  font-style: italic;
}

.backlog-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2) 0;
  min-height: 40px;
}

.backlog-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.backlog-item:hover {
  border-color: var(--gris-300);
  box-shadow: var(--shadow-sm);
}

.backlog-item__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.backlog-item__text {
  font-size: 0.9rem;
  color: var(--gris-700);
}

.backlog-item__project {
  font-size: 0.7rem;
  color: var(--project-color);
  background: color-mix(in srgb, var(--project-color) 10%, white);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.backlog-item__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.backlog-item:hover .backlog-item__actions {
  opacity: 1;
}

.backlog-add-btn {
  background: white;
  border: 1px dashed var(--gris-300);
  color: var(--gris-600);
}

.backlog-add-btn:hover {
  background: var(--gris-100);
  border-color: var(--gris-400);
}

/* ===== SECCIÓN COMPLETADAS (HISTÓRICO) ===== */
.kanban-section--completed {
  grid-column: 1 / -1; /* Span completo: ambas columnas */
  grid-row: 4;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-top: var(--space-2);
}

/* Toggle de expandir/colapsar */
.completed-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}

.completed-toggle:hover {
  background: var(--gris-100);
}

.completed-toggle .material-symbols-outlined:first-child {
  color: var(--turquesa-500);
  font-size: 1.2rem;
}

.completed-toggle__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gris-700);
}

.completed-toggle__count {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
}

.completed-toggle__arrow {
  color: var(--gris-400);
  transition: transform var(--transition-fast);
}

.completed-toggle[aria-expanded="true"] .completed-toggle__arrow {
  transform: rotate(180deg);
}

/* Contenido expandible */
.completed-content {
  padding: 0 var(--space-3) var(--space-3);
}

.completed-content[hidden] {
  display: none;
}

/* Grupo por semana */
.completed-group {
  margin-bottom: var(--space-3);
}

.completed-group:last-child {
  margin-bottom: 0;
}

.completed-group__date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-500);
  margin: 0 0 var(--space-1) 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--gris-200);
}

.completed-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Item completado */
.completed-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: white;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gris-100);
}

.completed-item__icon {
  color: var(--turquesa-400);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.completed-item__text {
  flex: 1;
  text-decoration: line-through;
  color: var(--gris-500);
  font-size: 0.9rem;
}

.completed-item__origin {
  font-size: 0.75rem;
  color: var(--gris-400);
  background: var(--gris-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Checkbox interactivo para desmarcar */
.completed-item__checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.completed-item__checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.completed-item__checkbox .completed-item__icon {
  transition: color 0.2s ease, transform 0.2s ease;
}

.completed-item__checkbox:hover .completed-item__icon {
  color: var(--turquesa-600);
  transform: scale(1.1);
}

.completed-item__checkbox input:focus-visible + .completed-item__icon {
  outline: 2px solid var(--turquesa-400);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Botón "Ver más semanas" */
.completed-show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2);
  background: white;
  border: 1px dashed var(--gris-300);
  border-radius: var(--radius-md);
  color: var(--gris-600);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.completed-show-more:hover {
  background: var(--gris-100);
  border-color: var(--turquesa-400);
  color: var(--turquesa-700);
}

.completed-show-more .material-symbols-outlined {
  font-size: 1.1rem;
}

/* Estado vacío */
.completed-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--gris-500);
  font-size: 0.9rem;
  font-style: italic;
}

.completed-empty .material-symbols-outlined {
  color: var(--gris-400);
  font-size: 1.2rem;
}

/* ===== RESPONSIVE: NUEVO LAYOUT KANBAN ===== */
@media (max-width: 1100px) {
  .kanban-page--layout {
    grid-template-columns: 280px 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .kanban-page--layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .kanban-sidebar {
    grid-column: 1;
    grid-row: auto;
    position: static;
    max-height: none;
    order: 1; /* Al PRINCIPIO en móvil (captura rápida) */
  }

  /* Las 5 secciones del grid en orden móvil - TODAS con grid-column: 1 */
  .kanban-section--focus { order: 2; grid-column: 1; }
  .kanban-section--weekly { order: 3; grid-column: 1; }
  .kanban-section--monthly { order: 4; grid-column: 1; }
  .kanban-section--quarterly { order: 5; grid-column: 1; }
  .kanban-section--completed { order: 6; grid-column: 1; }

  .horizons-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .horizon-column {
    padding: var(--space-2);
  }
}

@media (max-width: 768px) {
  .kanban-page--layout,
  .kanban-sections {
    padding: var(--space-2);
    gap: var(--space-3);
  }

  .kanban-section {
    padding: var(--space-2);
  }

  .kanban-sidebar {
    padding: var(--space-2);
  }

  .focus-item__check-icon .material-symbols-outlined {
    font-size: 24px;
  }

  .focus-item__check-icon {
    width: 28px;
    height: 28px;
  }

  .focus-item__text {
    font-size: 0.95rem;
  }
}

/* --------------------------------------------------------------------------
   Descanso Atélico (Hábitos)
   -------------------------------------------------------------------------- */
.habits-atelic {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-100), white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--turquesa-400);
}

.atelic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.atelic-header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.atelic-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.atelic-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  transition: all var(--transition-fast);
}

.atelic-item:hover {
  box-shadow: var(--shadow-sm);
}

.atelic-item__icon {
  font-size: 28px;
  color: var(--turquesa-600);
  background: var(--turquesa-100);
  padding: var(--space-1);
  border-radius: var(--radius-md);
}

.atelic-item__content {
  flex: 1;
}

.atelic-item__name {
  display: block;
  font-weight: 500;
  color: var(--gris-800);
}

.atelic-item__date {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.atelic-item__note {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  font-style: italic;
  margin-top: 4px;
}

.atelic-item__duration {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.atelic-item__delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.atelic-item:hover .atelic-item__delete {
  opacity: 1;
}

.atelic-empty {
  text-align: center;
  padding: var(--space-4);
}

.atelic-empty p {
  color: var(--gris-600);
  line-height: 1.6;
}

/* Modal atélico - selector de iconos */
.atelic-icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.atelic-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.atelic-icon-btn:hover {
  border-color: var(--turquesa-400);
  background: var(--turquesa-100);
}

.atelic-icon-btn.selected {
  border-color: var(--turquesa-600);
  background: var(--turquesa-100);
}

.atelic-icon-btn .material-symbols-outlined {
  font-size: 24px;
  color: var(--gris-600);
}

.atelic-icon-btn.selected .material-symbols-outlined {
  color: var(--turquesa-600);
}

.modal-subtitle {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  font-style: italic;
  margin-bottom: var(--space-3);
}

/* Responsive */
@media (max-width: 768px) {
  .atelic-header {
    flex-direction: column;
  }

  .atelic-icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Logros Espontáneos - FAB y Modal
   -------------------------------------------------------------------------- */

/* Botón flotante de acción (FAB) */
.fab {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-500), var(--turquesa-600));
  color: white;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 100;
}

.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
}

.fab:active {
  transform: translateY(0);
}

.fab .material-symbols-outlined {
  font-size: 24px;
}

.fab-label {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.fab--achievement {
  background: linear-gradient(135deg, var(--tulip-tree-500), var(--tulip-tree-600));
}

.fab--achievement:hover {
  box-shadow: 0 8px 25px rgba(228, 176, 53, 0.4);
}

/* Modal de logros espontáneos */
.modal--spontaneous {
  background: transparent;
}

.modal--spontaneous::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.spontaneous-content {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 440px;
  width: 90vw;
  animation: slideUp 0.3s ease;
}

.spontaneous-intro {
  color: var(--gris-600);
  margin-bottom: var(--space-3);
}

/* Selector de mood */
.mood-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  min-width: 72px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mood-btn:hover {
  border-color: var(--tulip-tree-400);
  background: var(--tulip-tree-50);
}

.mood-btn.active {
  border-color: var(--tulip-tree-500);
  background: var(--tulip-tree-100);
}

.mood-btn .material-symbols-outlined {
  font-size: 28px;
  color: var(--gris-500);
}

.mood-btn.active .material-symbols-outlined {
  color: var(--tulip-tree-600);
}

.mood-label {
  font-size: var(--font-size-xs);
  color: var(--gris-600);
}

.mood-btn.active .mood-label {
  color: var(--tulip-tree-700);
  font-weight: 500;
}

/* Sección de logros espontáneos en página de logros */
.achievements-spontaneous {
  background: linear-gradient(135deg, var(--tulip-tree-50), var(--rosa-50));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.achievements-spontaneous h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--tulip-tree-700);
  margin-bottom: var(--space-3);
}

.spontaneous-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spontaneous-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--tulip-tree-200);
  transition: all var(--transition-fast);
}

.spontaneous-item:hover {
  box-shadow: var(--shadow-sm);
}

.spontaneous-item__mood {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--tulip-tree-100);
  border-radius: var(--radius-full);
}

.spontaneous-item__mood .material-symbols-outlined {
  font-size: 24px;
  color: var(--tulip-tree-600);
}

.spontaneous-item__content {
  flex: 1;
  min-width: 0;
}

.spontaneous-item__text {
  color: var(--gris-800);
  line-height: 1.4;
  word-break: break-word;
}

.spontaneous-item__meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: 4px;
}

.spontaneous-item__delete {
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.spontaneous-item:hover .spontaneous-item__delete {
  opacity: 1;
}

.spontaneous-empty {
  text-align: center;
  padding: var(--space-3);
}

.spontaneous-empty .hint {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  font-style: italic;
  margin-top: var(--space-2);
}

/* Stat card especial para espontáneos */
.stat-card--spontaneous {
  background: linear-gradient(135deg, var(--tulip-tree-50), var(--tulip-tree-100));
  border: 1px solid var(--tulip-tree-200);
}

/* Responsive FAB */
@media (max-width: 768px) {
  .fab {
    bottom: var(--space-3);
    right: var(--space-3);
    padding: var(--space-2);
  }

  .fab-label {
    display: none;
  }

  .mood-selector {
    justify-content: center;
  }

  .mood-btn {
    min-width: 60px;
    padding: var(--space-1);
  }

  .mood-btn .material-symbols-outlined {
    font-size: 24px;
  }
}

/* ==========================================================================
   Módulo de Ayuda (Help)
   ========================================================================== */

.help-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-3);
}

/* Header de la página */
.help-page .page-header {
  margin-bottom: var(--space-4);
}

.help-page .quote--header {
  background: linear-gradient(135deg, var(--turquesa-50), var(--rosa-50));
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

/* Secciones */
.help-section {
  margin-bottom: var(--space-4);
}

.help-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xl);
  color: var(--gris-800);
  margin-bottom: var(--space-3);
}

/* Sección destacada (flujo diario) */
.help-section--featured {
  margin-bottom: var(--space-4);
}

/* Cards de ayuda */
.help-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* FAQ Cards - Layout simple: pregunta arriba, respuesta abajo */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-card {
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: all var(--transition-fast);
}

.faq-card:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-100);
}

.faq-question .material-symbols-outlined {
  font-size: 24px;
  color: var(--turquesa-600);
  flex-shrink: 0;
}

.faq-question h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gris-800);
}

.faq-answer {
  color: var(--gris-700);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.faq-answer p {
  margin: var(--space-1) 0;
}

.faq-answer ul,
.faq-answer ol {
  padding-left: var(--space-3);
  margin: var(--space-1) 0;
}

.faq-answer li {
  margin-bottom: 4px;
}


.help-card {
  display: block;
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.help-card:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.help-card--featured {
  background: linear-gradient(180deg, var(--turquesa-50), white);
  border: 2px solid var(--turquesa-400);
}

/* Header de la card (botón expandible) */
.help-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}

.help-card-header:hover {
  background: var(--gris-50);
}

.help-card--featured .help-card-header:hover {
  background: var(--turquesa-100);
}

.help-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.help-card-title .material-symbols-outlined {
  font-size: 28px;
  color: var(--turquesa-600);
}

.help-card-title h2,
.help-card-title h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gris-800);
  margin: 0;
}

.help-card-subtitle {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--gris-500);
}

.help-card-toggle {
  color: var(--gris-400);
  transition: transform var(--transition-fast);
}

/* Contenido de la card */
.help-card-content {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--gris-700);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.help-card-content[hidden] {
  display: none;
}

.help-card-content h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-800);
  margin: var(--space-2) 0 var(--space-1);
}

.help-card-content ul,
.help-card-content ol {
  padding-left: var(--space-3);
  margin: var(--space-1) 0;
}

.help-card-content li {
  margin-bottom: 4px;
}

.help-card-content p {
  margin: var(--space-1) 0;
}

/* Tip dentro de card */
.help-card-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--tulip-tree-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--tulip-tree-500);
}

.help-card-tip .material-symbols-outlined {
  color: var(--tulip-tree-600);
  font-size: 20px;
  flex-shrink: 0;
}

.help-card-tip p {
  margin: 0;
  font-style: italic;
  color: var(--tulip-tree-700);
}

/* Relación con otras secciones */
.help-relation {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--gris-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gris-600);
}

.help-relation .material-symbols-outlined {
  font-size: 16px;
  color: var(--turquesa-600);
}

/* Botón para navegar a la sección */
.help-nav-link {
  margin-top: var(--space-2);
  width: 100%;
  justify-content: center;
}

/* Flujo diario - Pasos */
.help-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.help-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
}

.step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--turquesa-100);
  border-radius: var(--radius-full);
  color: var(--turquesa-600);
}

.step-content {
  flex: 1;
}

.step-content strong {
  display: block;
  color: var(--gris-800);
  margin-bottom: 2px;
}

.step-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

/* Sección de Filosofía */
.help-section--philosophy {
  margin-top: var(--space-4);
}

.help-philosophy {
  background: linear-gradient(135deg, var(--gris-800), var(--gris-900));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: white;
}

.philosophy-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.philosophy-header .material-symbols-outlined {
  font-size: 32px;
  color: var(--turquesa-400);
}

.philosophy-header h2 {
  font-size: var(--font-size-xl);
  margin: 0;
  color: white;
}

.philosophy-intro {
  color: var(--gris-300);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

.philosophy-intro strong {
  color: var(--turquesa-400);
}

/* Pilares - Grid 2x2 fijo */
.philosophy-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.pillar {
  text-align: center;
  padding: var(--space-2);
}

.pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

.pillar-icon .material-symbols-outlined {
  font-size: 28px;
  color: var(--turquesa-400);
}

.pillar h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
  color: white;
}

.pillar p {
  font-size: var(--font-size-sm);
  color: var(--gris-400);
  line-height: 1.5;
  margin: 0;
}

/* Aplicación en Oráculo */
.philosophy-applied {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.philosophy-applied h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
  color: var(--turquesa-400);
}

.philosophy-applied ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.philosophy-applied li {
  padding: var(--space-1) 0;
  color: var(--gris-300);
  font-size: var(--font-size-sm);
}

.philosophy-applied li strong {
  color: white;
}

/* Cita de filosofía - usa turquesa como el resto */
.philosophy-quote {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--turquesa-400);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}

.philosophy-quote p {
  margin: 0 0 var(--space-2) 0;
  color: var(--gris-200);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.philosophy-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--turquesa-400);
  font-weight: 500;
}

/* Tips rápidos */
.help-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-2);
}

.help-tip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  transition: all var(--transition-fast);
}

.help-tip-item:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.help-tip-item .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 24px;
  color: var(--turquesa-600);
}

.help-tip-item p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.4;
}

/* Elemento kbd para teclas de teclado */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--gris-800);
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 white;
  white-space: nowrap;
}

/* Pasos compactos para FAQ */
.help-steps-compact {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.help-steps-compact p {
  margin: var(--space-1) 0;
}

.help-steps-compact ol {
  margin: var(--space-1) 0 var(--space-2);
  padding-left: var(--space-4);
}

.help-steps-compact li {
  margin-bottom: 6px;
  line-height: 1.5;
}

/* Advertencia importante (para datos) */
.help-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-2);
  background: var(--rosa-50);
  border-left: 4px solid var(--rosa-500);
  border-radius: var(--radius-md);
}

.help-warning .material-symbols-outlined {
  color: var(--rosa-600);
  font-size: 20px;
  flex-shrink: 0;
}

.help-warning p {
  margin: 0;
  color: var(--rosa-700);
  font-size: var(--font-size-sm);
}

.help-warning strong {
  color: var(--rosa-800);
}

/* Atajo rápido destacado */
.help-shortcut {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--turquesa-50);
  border: 1px solid var(--turquesa-200);
  border-radius: var(--radius-md);
  margin: var(--space-1) 0;
}

.help-shortcut-label {
  font-size: var(--font-size-xs);
  color: var(--turquesa-700);
  font-weight: 500;
}


/* Footer de ayuda */
.help-section--footer {
  margin-top: var(--space-4);
}

.help-footer-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-lg);
  text-align: center;
}

.help-footer-message .material-symbols-outlined {
  font-size: 24px;
  color: var(--rosa-500);
}

.help-footer-message p {
  margin: 0;
  color: var(--gris-600);
}

.help-footer-message strong {
  color: var(--gris-800);
}

/* Responsive */
@media (max-width: 768px) {
  .help-page {
    padding: var(--space-2);
  }

  .help-cards-grid {
    grid-template-columns: 1fr;
  }

  .help-tips-grid {
    grid-template-columns: 1fr;
  }

  .help-philosophy {
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  .philosophy-pillars {
    grid-template-columns: 1fr;
  }

  .help-card-title h2,
  .help-card-title h3 {
    font-size: var(--font-size-sm);
  }

  .help-steps li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   WELCOME MODAL (Onboarding)
   ========================================================================== */

.modal--welcome {
  max-width: 600px;
  width: 95vw;
  border-radius: var(--radius-xl);
  padding: 0;
  border: none;
  box-shadow: var(--shadow-xl);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.welcome-content {
  padding: var(--space-6);
}

.welcome-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.welcome-logo {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--turquesa-500), var(--turquesa-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.welcome-icon {
  font-size: 32px;
  color: white;
}

.welcome-title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-2xl);
  color: var(--gris-800);
  margin: 0 0 var(--space-1) 0;
}

.welcome-subtitle {
  color: var(--gris-600);
  font-size: var(--font-size-md);
  margin: 0;
}

/* Recomendación destacada */
.welcome-recommendation {
  background: linear-gradient(135deg, var(--turquesa-50), var(--turquesa-100));
  border: 2px solid var(--turquesa-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.welcome-recommendation__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--turquesa-500);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

.welcome-recommendation__badge .material-symbols-outlined {
  font-size: 14px;
}

.welcome-recommendation__title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
  margin: 0 0 var(--space-2) 0;
}

.welcome-recommendation__text {
  color: var(--gris-700);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.5;
}

.welcome-recommendation__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.welcome-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.welcome-step__icon {
  font-size: 24px;
  color: var(--turquesa-600);
}

.welcome-step__content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.welcome-step__content strong {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
}

.welcome-step__content span {
  font-size: var(--font-size-xs);
  color: var(--gris-600);
}

.welcome-step__arrow {
  color: var(--turquesa-400);
}

.welcome-step__arrow .material-symbols-outlined {
  font-size: 20px;
}

/* Selector de modos */
.welcome-modes {
  margin-bottom: var(--space-5);
}

.welcome-modes__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-headings);
  font-size: var(--font-size-md);
  color: var(--gris-800);
  margin: 0 0 var(--space-1) 0;
}

.welcome-modes__title .material-symbols-outlined {
  color: var(--turquesa-600);
}

.welcome-modes__hint {
  color: var(--gris-500);
  font-size: var(--font-size-xs);
  margin: 0 0 var(--space-3) 0;
}

.welcome-modes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.welcome-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
  background: var(--gris-50);
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.welcome-mode-card:hover {
  border-color: var(--turquesa-300);
  background: var(--turquesa-50);
}

.welcome-mode-card--selected {
  border-color: var(--turquesa-500);
  background: var(--turquesa-50);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.welcome-mode-card__icon {
  font-size: 28px;
  color: var(--turquesa-600);
  margin-bottom: var(--space-1);
}

.welcome-mode-card__name {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-sm);
  color: var(--gris-800);
  margin: 0 0 var(--space-1) 0;
}

.welcome-mode-card__desc {
  font-size: var(--font-size-xs);
  color: var(--gris-600);
  margin: 0;
  line-height: 1.4;
}

.welcome-mode-card__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.welcome-mode-card__check .material-symbols-outlined {
  font-size: 20px;
  color: var(--turquesa-600);
}

.welcome-mode-card--selected .welcome-mode-card__check {
  opacity: 1;
  transform: scale(1);
}

/* Footer del modal */
.welcome-footer {
  text-align: center;
}

.welcome-footer .btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
}

/* Responsive welcome modal */
@media (max-width: 600px) {
  .welcome-content {
    padding: var(--space-4);
  }

  .welcome-modes__grid {
    grid-template-columns: 1fr;
  }

  .welcome-recommendation__steps {
    flex-direction: column;
  }

  .welcome-step__arrow {
    transform: rotate(90deg);
  }

  .welcome-step {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   START GUIDE (Por dónde empezar - Help Section)
   ========================================================================== */

.start-guide {
  margin-bottom: var(--space-6);
}

.start-guide__intro {
  background: linear-gradient(135deg, var(--turquesa-50), var(--amarillo-50));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}

.start-guide__intro p {
  color: var(--gris-700);
  font-size: var(--font-size-md);
  margin: 0;
  line-height: 1.6;
}

.start-guide__phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.start-phase {
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.start-phase--highlight {
  border-color: var(--turquesa-300);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.start-phase__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
}

.start-phase--highlight .start-phase__header {
  background: linear-gradient(135deg, var(--turquesa-50), var(--turquesa-100));
  border-bottom-color: var(--turquesa-200);
}

.start-phase__number {
  width: 28px;
  height: 28px;
  background: var(--gris-300);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.start-phase--highlight .start-phase__number {
  background: var(--turquesa-500);
}

.start-phase__title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-md);
  color: var(--gris-800);
  margin: 0;
}

.start-phase__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--turquesa-500);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.start-phase__badge .material-symbols-outlined {
  font-size: 12px;
}

.start-phase__steps {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
}

.start-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  flex: 1;
}

.start-step:hover {
  background: var(--turquesa-50);
  border-color: var(--turquesa-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.start-step:focus {
  outline: none;
  border-color: var(--turquesa-500);
  box-shadow: 0 0 0 3px var(--turquesa-100);
}

.start-step:hover .material-symbols-outlined {
  color: var(--turquesa-700);
}

.start-step__icon {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.start-step__icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--turquesa-600);
}

.start-step__content {
  flex: 1;
}

.start-step__name {
  font-weight: 600;
  color: var(--gris-800);
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}

.start-step__desc {
  color: var(--gris-600);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

/* Versión compacta para la fase 2 */
.start-step--compact {
  padding: var(--space-2) var(--space-3);
  align-items: center;
}

.start-step--compact .material-symbols-outlined {
  font-size: 20px;
  color: var(--gris-500);
}

.start-step--compact:hover .material-symbols-outlined {
  color: var(--turquesa-600);
}

/* Fase 2 con pasos verticales */
.start-phase__steps--vertical {
  flex-direction: column;
  gap: var(--space-2);
}

.start-phase__steps--vertical .start-step {
  flex: none;
}

.start-guide__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--amarillo-50);
  border: 1px solid var(--amarillo-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.start-guide__note .material-symbols-outlined {
  color: var(--amarillo-600);
  font-size: 20px;
  flex-shrink: 0;
}

.start-guide__note p {
  margin: 0;
  color: var(--gris-700);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* ==========================================================================
   USAGE MODES (Formas de usar - Help Section)
   ========================================================================== */

.usage-modes-help {
  margin-bottom: var(--space-6);
}

.usage-modes-help__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.usage-mode-help-card {
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all 0.2s ease;
}

.usage-mode-help-card:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-md);
}

.usage-mode-help-card--active {
  border-color: var(--turquesa-500);
  background: var(--turquesa-50);
}

.usage-mode-help-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.usage-mode-help-card__icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--turquesa-100), var(--turquesa-200));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.usage-mode-help-card__icon .material-symbols-outlined {
  font-size: 22px;
  color: var(--turquesa-700);
}

.usage-mode-help-card__title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-md);
  color: var(--gris-800);
  margin: 0;
}

.usage-mode-help-card__active-badge {
  margin-left: auto;
  background: var(--turquesa-500);
  color: white;
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.usage-mode-help-card__ideal {
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.5;
}

.usage-mode-help-card__includes {
  margin-bottom: var(--space-3);
}

.usage-mode-help-card__includes-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.usage-mode-help-card__includes-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.usage-mode-help-card__includes-list span {
  background: var(--gris-100);
  color: var(--gris-700);
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.usage-mode-help-card--active .usage-mode-help-card__includes-list span {
  background: white;
}

.usage-mode-help-card__action {
  width: 100%;
  padding: var(--space-2);
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  color: var(--gris-700);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.usage-mode-help-card__action:hover {
  background: var(--turquesa-100);
  border-color: var(--turquesa-300);
  color: var(--turquesa-700);
}

.usage-mode-help-card--active .usage-mode-help-card__action {
  background: var(--turquesa-500);
  border-color: var(--turquesa-500);
  color: white;
  cursor: default;
}

.usage-mode-help-card__action .material-symbols-outlined {
  font-size: 16px;
}

.usage-modes-help__note {
  text-align: center;
  color: var(--gris-500);
  font-size: var(--font-size-sm);
}

.usage-modes-help__note a {
  color: var(--turquesa-600);
  text-decoration: none;
}

.usage-modes-help__note a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   CONNECTIONS DIAGRAM (Cómo se conecta todo)
   ========================================================================== */

.connections-diagram {
  margin-bottom: var(--space-6);
}

.connections-diagram__visual {
  background: linear-gradient(180deg, var(--gris-50), white);
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.connection-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.connection-node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  max-width: 400px;
  transition: all 0.2s ease;
}

.connection-node:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-md);
}

.connection-node--highlight {
  border-color: var(--turquesa-400);
  background: var(--turquesa-50);
}

.connection-node__icon {
  width: 44px;
  height: 44px;
  background: var(--gris-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.connection-node--highlight .connection-node__icon {
  background: var(--turquesa-100);
}

.connection-node__icon .material-symbols-outlined {
  font-size: 24px;
  color: var(--turquesa-600);
}

.connection-node__content {
  flex: 1;
}

.connection-node__name {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-md);
  color: var(--gris-800);
  margin-bottom: 2px;
}

.connection-node__role {
  font-size: var(--font-size-xs);
  color: var(--gris-600);
}

.connection-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--turquesa-400);
  padding: var(--space-1) 0;
}

.connection-arrow .material-symbols-outlined {
  font-size: 24px;
}

.connection-arrow__label {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-top: -4px;
}

.connections-diagram__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.connection-legend-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.connection-legend-item .material-symbols-outlined {
  font-size: 20px;
  color: var(--turquesa-600);
  flex-shrink: 0;
}

.connection-legend-item__text {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.4;
}

.connection-legend-item__text strong {
  color: var(--gris-800);
}

/* ==========================================================================
   CONCEPTUAL FAQ (Preguntas sobre el uso)
   ========================================================================== */

.conceptual-faq {
  margin-bottom: var(--space-6);
}

.conceptual-faq__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}

.faq-item__question:hover {
  background: var(--gris-50);
}

.faq-item__question-text {
  font-weight: 600;
  color: var(--gris-800);
  font-size: var(--font-size-sm);
}

.faq-item__toggle {
  color: var(--gris-400);
  transition: transform 0.2s ease;
}

.faq-item__toggle .material-symbols-outlined {
  font-size: 20px;
}

.faq-item[open] .faq-item__toggle {
  transform: rotate(180deg);
}

.faq-item__answer {
  padding: 0 var(--space-4) var(--space-3);
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.faq-item__answer p {
  margin: 0 0 var(--space-2) 0;
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

.faq-item__answer strong {
  color: var(--gris-800);
}

.faq-item__answer em {
  color: var(--turquesa-700);
  font-style: normal;
}

/* ==========================================================================
   SETTINGS USAGE MODE SELECTOR
   ========================================================================== */

.usage-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.usage-mode-option {
  position: relative;
}

.usage-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.usage-mode-option__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
  background: var(--gris-50);
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.usage-mode-option__label:hover {
  border-color: var(--turquesa-300);
  background: var(--turquesa-50);
}

.usage-mode-option input[type="radio"]:checked + .usage-mode-option__label {
  border-color: var(--turquesa-500);
  background: var(--turquesa-50);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.usage-mode-option input[type="radio"]:focus-visible + .usage-mode-option__label {
  outline: 2px solid var(--turquesa-500);
  outline-offset: 2px;
}

.usage-mode-option__icon {
  font-size: 28px;
  color: var(--turquesa-600);
  margin-bottom: var(--space-1);
}

.usage-mode-option__name {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-sm);
  color: var(--gris-800);
  margin-bottom: var(--space-1);
}

.usage-mode-option__desc {
  font-size: var(--font-size-xs);
  color: var(--gris-600);
  line-height: 1.4;
}

/* Responsive settings */
@media (max-width: 600px) {
  .usage-modes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .usage-modes-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DAILY SETUP PAGE (Volumen Fijo - Página completa)
   ========================================================================== */

.daily-setup-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height, 64px) - var(--footer-height, 48px));
  padding: var(--space-2);
  max-width: 1000px;
  margin: 0 auto;
  overflow-y: auto;
}

/* Header compacto */
.setup-page-header {
  text-align: center;
  padding: var(--space-2) 0;
  flex-shrink: 0;
}

.setup-page-header__icon {
  font-size: 36px;
  color: var(--turquesa-600);
  margin-bottom: var(--space-1);
}

.setup-page-header__title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: var(--gris-800);
  margin: 0 0 4px 0;
}

.setup-page-header__subtitle {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Selectores Compactos (Tiempo + Energía en una fila) */
.setup-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--blanco);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.selector-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.selector-group__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.selector-group__label .material-symbols-outlined {
  font-size: 16px;
  color: var(--turquesa-600);
}

/* Chips de selección */
.selector-chips {
  display: flex;
  gap: 4px;
  background: var(--gris-100);
  padding: 4px;
  border-radius: var(--radius-md);
}

.selector-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1) 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.selector-chip:hover {
  background: var(--blanco);
}

.selector-chip[aria-pressed="true"] {
  background: var(--blanco);
  box-shadow: var(--shadow-sm);
}

.selector-chip__icon {
  font-size: 20px;
  color: var(--gris-400);
  transition: color var(--transition-fast);
}

.selector-chip[aria-pressed="true"] .selector-chip__icon {
  color: var(--turquesa-600);
}

/* Colores especiales para energía */
.selector-chip[data-energy="low"][aria-pressed="true"] .selector-chip__icon {
  color: var(--rosa-400);
}

.selector-chip[data-energy="high"][aria-pressed="true"] .selector-chip__icon {
  color: var(--turquesa-600);
}

.selector-chip__label {
  font-size: 10px;
  color: var(--gris-500);
  font-weight: 500;
}

.selector-chip[aria-pressed="true"] .selector-chip__label {
  color: var(--gris-800);
  font-weight: 600;
}

/* Resultado Calculado */
.setup-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: linear-gradient(135deg, var(--turquesa-100), var(--rosa-100));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s ease;
}

.setup-result.visible {
  opacity: 1;
  transform: translateY(0);
}

.setup-result__icon {
  font-size: 24px;
  color: var(--turquesa-700);
}

.setup-result__text {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

.setup-result__limit {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--turquesa-600);
}

/* Lista de Tareas */
.setup-tasks {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 0;
}

.setup-tasks__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
  flex-shrink: 0;
}

.setup-tasks__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-700);
  margin: 0;
}

.setup-tasks__title .material-symbols-outlined {
  font-size: 20px;
  color: var(--turquesa-600);
}

.setup-tasks__counter {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.setup-tasks__counter--full {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

/* Lista scrollable */
.setup-tasks__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-1);
  list-style: none;
  margin: 0;
  min-height: 0;
}

/* Scrollbar personalizada */
.setup-tasks__list::-webkit-scrollbar {
  width: 4px;
}

.setup-tasks__list::-webkit-scrollbar-track {
  background: transparent;
}

.setup-tasks__list::-webkit-scrollbar-thumb {
  background: var(--gris-300);
  border-radius: 2px;
}

/* Task Item */
.task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  cursor: pointer;
  animation: slideInTask 0.2s ease backwards;
}

.task-item:hover {
  background: var(--gris-50);
}

.task-item--selected {
  background: var(--turquesa-50);
}

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

.task-item:nth-child(1) { animation-delay: 0.05s; }
.task-item:nth-child(2) { animation-delay: 0.1s; }
.task-item:nth-child(3) { animation-delay: 0.15s; }
.task-item:nth-child(4) { animation-delay: 0.2s; }
.task-item:nth-child(5) { animation-delay: 0.25s; }

/* Checkbox custom */
.task-item__checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.task-item__checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.task-item__check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gris-300);
  border-radius: var(--radius-sm);
  background: var(--blanco);
  transition: all var(--transition-fast);
}

.task-item__check-icon .material-symbols-outlined {
  font-size: 14px;
  color: transparent;
}

.task-item__checkbox input:checked + .task-item__check-icon {
  background: var(--turquesa-600);
  border-color: var(--turquesa-600);
}

.task-item__checkbox input:checked + .task-item__check-icon .material-symbols-outlined {
  color: var(--blanco);
}

.task-item__checkbox input:focus-visible + .task-item__check-icon {
  outline: 2px solid var(--turquesa-400);
  outline-offset: 2px;
}

/* Contenido de la tarea */
.task-item__content {
  flex: 1;
  min-width: 0;
}

.task-item__text {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.task-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.task-item__tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--gris-100);
  color: var(--gris-600);
}

.task-item__tag--project {
  background: var(--project-color, var(--rosa-100));
  color: var(--gris-800);
}

/* Estado vacío */
.setup-tasks__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--gris-500);
}

.setup-tasks__empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--gris-300);
  margin-bottom: var(--space-1);
}

.setup-tasks__empty p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Botón de Acción */
.setup-actions {
  padding: var(--space-2) 0;
  flex-shrink: 0;
}

.btn-start {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--turquesa-600);
  color: var(--blanco);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 190, 200, 0.3);
}

.btn-start:hover:not(:disabled) {
  background: var(--turquesa-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 190, 200, 0.4);
}

.btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-start:focus-visible {
  outline: 2px solid var(--turquesa-400);
  outline-offset: 2px;
}

.btn-start .material-symbols-outlined {
  font-size: 20px;
}

.setup-skip {
  display: block;
  text-align: center;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  text-decoration: none;
}

.setup-skip:hover {
  color: var(--gris-700);
  text-decoration: underline;
}

/* Responsive Desktop */
@media (min-width: 768px) {
  .daily-setup-page {
    padding: var(--space-4);
    justify-content: center;
  }

  .setup-page-header {
    padding: var(--space-3) 0;
  }

  .setup-page-header__icon {
    font-size: 48px;
  }

  .setup-page-header__title {
    font-size: var(--font-size-2xl);
  }

  .setup-selectors {
    padding: var(--space-3);
  }

  .selector-chip {
    padding: var(--space-2) var(--space-1);
  }

  .selector-chip__icon {
    font-size: 24px;
  }

  .selector-chip__label {
    font-size: var(--font-size-xs);
  }
}

/* ==========================================================================
   UI/UX IMPROVEMENTS v2.0
   Mejoras de accesibilidad, usabilidad y experiencia visual
   Para mujeres 40+ que quieren organizarse para cuidarse
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ACCESIBILIDAD GLOBAL
   WCAG 2.1 AA: Mejor contraste, focus visible, touch targets
   -------------------------------------------------------------------------- */

/* Focus visible mejorado para todos los elementos interactivos */
:focus-visible {
  outline: 3px solid var(--turquesa-400);
  outline-offset: 2px;
}

/* Animacion de focus suave */
*:focus-visible {
  transition: outline-offset 0.1s ease;
}

/* Skip link para navegacion por teclado */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gris-900);
  color: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  z-index: 9999;
  text-decoration: none;
  font-weight: 500;
}

.skip-link:focus {
  top: var(--space-2);
}

/* Touch targets minimos de 44px para mobile */
@media (max-width: 768px) {
  .btn,
  .nav-link,
  .focus-checkbox,
  .color-option,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Checkboxes mas grandes en mobile */
  .focus-checkbox,
  .menu-item__checkbox,
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
}

/* Mejor contraste de texto para personas con vision reducida */
.page-description,
.section-description,
.form-group small,
.empty-state {
  color: var(--gris-600);
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA MEJORADA
   Legibilidad optimizada para 40+
   -------------------------------------------------------------------------- */

/* Incrementar line-height para mejor legibilidad */
body {
  line-height: 1.6;
}

/* Texto mas grande en contenido principal */
.dashboard__section p,
.journal-page p,
.habits-page p,
.settings-page p {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Headers con mejor espaciado */
.page-title {
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.section-title {
  letter-spacing: -0.01em;
}

/* Texto de botones con mejor peso visual */
.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   3. MEJORAS DEL DASHBOARD
   Centro de calma y claridad
   -------------------------------------------------------------------------- */

/* Header del dashboard con gradiente sutil */
.dashboard__header {
  position: relative;
  padding: var(--space-3);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)) var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-100) 0%, var(--gris-50) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Titulo mas impactante */
.dashboard__title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  background: linear-gradient(135deg, var(--turquesa-600), var(--turquesa-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Fecha con estilo mas elegante */
.dashboard__date {
  font-size: var(--font-size-lg);
  color: var(--gris-700);
  font-weight: 500;
}

/* Secciones del dashboard con sistema visual coherente */
.dashboard__section {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Indicador de categoria mediante borde superior */
.dashboard__section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent-color, var(--gris-300));
}

.dashboard__section:hover {
  transform: translateY(-2px);
  box-shadow: var(--dashboard-card-shadow-hover);
}

/* Seccion de foco - turquesa (prioridades del dia) */
.dashboard__focus {
  --card-accent-color: var(--turquesa-500);
  background: linear-gradient(135deg, white 0%, var(--turquesa-50) 100%);
}

/* Seccion de habito - amarillo/tulip-tree (crecimiento) */
.dashboard__habit {
  --card-accent-color: var(--tulip-tree-500);
  background: linear-gradient(135deg, white 0%, var(--tulip-tree-50) 100%);
}

/* Seccion de eventos - gris (informativo) */
.dashboard__events {
  --card-accent-color: var(--gris-400);
  background: white;
}

/* Seccion de próximas acciones GTD - turquesa */
.dashboard__next-actions {
  --card-accent-color: var(--turquesa-500);
  background: linear-gradient(135deg, var(--turquesa-50) 0%, white 100%);
}

.dashboard__next-actions .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.dashboard__next-actions .section-title .material-symbols-outlined {
  color: var(--turquesa-500);
}

.next-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.next-action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gris-200);
}

.next-action-item .project-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.next-action-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.next-action-project {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  font-weight: 500;
}

.next-action-task {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seccion de logros - verde (celebracion) */
.dashboard__achievements {
  --card-accent-color: var(--verde-500);
  background: linear-gradient(135deg, var(--verde-50) 0%, white 100%);
}

/* Seccion de quote con estilo zen */
.dashboard__quote {
  background: var(--gris-800);
  color: white;
  position: relative;
  overflow: hidden;
}

.dashboard__quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 8rem;
  font-family: Georgia, serif;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}

.dashboard__quote .quote {
  position: relative;
  z-index: 1;
}

.dashboard__quote .quote p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.125rem; /* 18px para mejor legibilidad */
  font-style: italic;
  line-height: 1.8;
}

.dashboard__quote .quote cite {
  color: var(--turquesa-400);
  font-style: normal;
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

/* FAB mejorado con animacion */
.fab {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: #e11d48;
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.5);
  transition: all 0.3s ease;
  z-index: 50;
}

.fab:hover {
  transform: translateY(-3px) scale(1.02);
  background: #be123c;
  box-shadow: 0 8px 28px rgba(225, 29, 72, 0.6);
}

.fab .material-symbols-outlined {
  font-size: 20px;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Botón de reconfigurar día */
.dashboard__reconfigure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  background: var(--gris-100);
  color: var(--gris-600);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dashboard__reconfigure:hover {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

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

/* Focus item mejorado */
.focus-item {
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  margin-bottom: var(--space-1);
  border: 1px solid transparent;
}

.focus-item:hover {
  background: var(--gris-50);
  border-color: var(--gris-200);
}

.focus-item--completed {
  background: var(--gris-50);
}

/* Checkbox estilizado con celebracion */
.focus-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: var(--checkbox-size-lg);
  height: var(--checkbox-size-lg);
  border: 2px solid var(--gris-400);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.focus-checkbox:hover {
  border-color: var(--turquesa-500);
  background: var(--turquesa-50);
}

.focus-checkbox:checked {
  background: var(--turquesa-600);
  border-color: var(--turquesa-500);
  animation: check-celebration var(--animation-celebration) ease-out;
}

/* Animacion de celebracion al marcar */
@keyframes check-celebration {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.focus-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   4. MEJORAS DE NAVEGACION
   Claridad y accesibilidad
   -------------------------------------------------------------------------- */

/* Header con sombra mas pronunciada */
.app-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Nav links con transicion mejorada - tema oscuro */
.nav-link {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--gris-300);
}

.nav-link:hover {
  background: var(--gris-800);
  color: white;
}

.nav-link.active {
  background: var(--turquesa-600);
  color: white;
  font-weight: 600;
}

/* Iconos de navegacion con mejor alineacion */
.nav-icon {
  font-size: 22px;
}

/* Ocultar texto en mobile, solo iconos */
@media (max-width: 768px) {
  .nav-text {
    display: none;
  }

  .nav-link {
    padding: var(--space-2);
  }

  .nav-icon {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   5. MEJORAS DE FORMULARIOS
   Usabilidad y claridad visual
   -------------------------------------------------------------------------- */

/* Inputs con estado visual mejorado */
.input {
  padding: var(--space-2);
  font-size: var(--font-size-base);
  border: 2px solid var(--gris-300);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.input:hover {
  border-color: var(--gris-400);
}

.input:focus {
  border-color: var(--turquesa-500);
  box-shadow: 0 0 0 4px var(--turquesa-100);
}

/* Labels mas visibles */
.form-group label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gris-800);
  margin-bottom: var(--space-1);
}

/* Placeholder con mejor contraste */
.input::placeholder {
  color: var(--gris-500);
}

/* Textarea con mejor redimensionamiento */
.textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. MEJORAS DE MODALES
   Experiencia de dialogo mejorada
   -------------------------------------------------------------------------- */

/* Modal con backdrop mas oscuro */
.modal::backdrop {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(4px);
}

/* Modal con animacion de entrada */
.modal {
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal content con padding generoso */
.modal-content {
  padding: var(--space-4);
}

/* Modal title con mejor jerarquia */
.modal-title {
  font-size: var(--font-size-xl);
  color: var(--gris-900);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--gris-100);
  margin-bottom: var(--space-3);
}

/* Modal actions con mejor espaciado */
.modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

/* --------------------------------------------------------------------------
   7. MEJORAS DEL HABITO CARD
   Visualizacion motivacional
   -------------------------------------------------------------------------- */

/* Habit card con mejor estructura visual */
.habit-card {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--turquesa-100) 0%, white 60%);
  border: 2px solid var(--turquesa-200);
  transition: all 0.3s ease;
}

.habit-card:hover {
  border-color: var(--turquesa-400);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.15);
}

/* Identidad con estilo destacado */
.habit-identity {
  font-style: italic;
  color: var(--turquesa-700);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
  padding-left: var(--space-2);
  border-left: 3px solid var(--turquesa-400);
}

/* Nombre del habito mas prominente */
.habit-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gris-900);
  margin-bottom: var(--space-1);
}

/* Trigger con estilo sutil - contraste mejorado para 40+ */
.habit-trigger {
  color: var(--gris-700);
  font-size: var(--font-size-dashboard-secondary);
}

/* Streak con animacion de fuego mejorada */
.habit-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: linear-gradient(135deg, var(--tulip-tree-50), transparent);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.streak-icon {
  color: var(--tulip-tree-500);
  font-size: 1.4rem;
  animation: flame-flicker 0.8s ease-in-out infinite alternate;
}

/* Animacion de fuego mas dinamica */
@keyframes flame-flicker {
  from {
    transform: scale(1) rotate(-3deg);
    filter: drop-shadow(0 0 2px var(--tulip-tree-300));
  }
  to {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(0 0 4px var(--tulip-tree-500));
  }
}

/* Racha alta (7+ dias) - brillo extra */
.habit-streak--hot .streak-icon {
  filter: drop-shadow(0 0 8px var(--tulip-tree-500));
  animation-duration: 0.5s;
}

.streak-count {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--tulip-tree-700);
}

/* Estado completado */
.habit-done {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. MEJORAS DE CITAS/QUOTES
   Estilo zen y reflexivo
   -------------------------------------------------------------------------- */

/* Quote base mejorado */
.quote {
  position: relative;
  padding: var(--space-3);
  padding-left: var(--space-4);
  margin: 0;
}

.quote p {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--gris-700);
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  font-style: normal;
}

/* Quote en header de pagina */
.quote--header {
  background: linear-gradient(135deg, var(--gris-50), white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--turquesa-400);
  margin-top: var(--space-2);
}

.quote--header p {
  font-style: italic;
}

/* --------------------------------------------------------------------------
   9. MEJORAS DE ESTADOS VACIOS
   Mensajes motivadores y claros
   -------------------------------------------------------------------------- */

/* Empty state con ilustracion */
.empty-state {
  padding: var(--space-4);
  text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gris-50), white);
}

.empty-state .material-symbols-outlined {
  font-size: 48px;
  color: var(--gris-300);
  margin-bottom: var(--space-2);
}

.empty-state p {
  color: var(--gris-600);
  font-size: var(--font-size-base);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto var(--space-2);
}

.empty-state .btn {
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   10. MEJORAS DE CALENDARIO
   Claridad y legibilidad
   -------------------------------------------------------------------------- */

/* Vista semanal con mejor espaciado */
.week-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--gris-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-3);
}

/* Columna de dia con fondo limpio */
.day-column {
  background: white;
  padding: var(--space-2);
  min-height: 150px;
}

/* Dia actual destacado */
.day-column--today {
  background: linear-gradient(180deg, var(--turquesa-50) 0%, white 30%);
}

.day-column--today .day-header {
  color: var(--turquesa-700);
}

/* Header de dia */
.day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--gris-100);
  margin-bottom: var(--space-1);
}

.day-name {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gris-500);
}

.day-number {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--gris-800);
}

.day-column--today .day-number {
  background: var(--turquesa-600);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Eventos en el calendario */
.event-item {
  padding: var(--space-1);
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  background: var(--turquesa-100);
  border-left: 3px solid var(--turquesa-500);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.event-item:hover {
  background: var(--turquesa-200);
  transform: translateX(2px);
}

/* Evento de sincronia (tiempo con otros) */
.event-item--sincronia {
  background: var(--rosa-100);
  border-left-color: var(--rosa-500);
}

.event-item--sincronia:hover {
  background: var(--rosa-200);
}

/* Responsive calendario */
@media (max-width: 768px) {
  .week-view {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    background: transparent;
  }

  .day-column {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-height: auto;
  }

  .day-header {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   11. MEJORAS DEL DIARIO
   Espacio de reflexion calmo
   -------------------------------------------------------------------------- */

/* Botones de tipo de entrada */
.entry-type-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.entry-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.entry-type-btn:hover {
  border-color: var(--turquesa-400);
  background: var(--turquesa-50);
  transform: translateY(-2px);
}

.entry-type-icon {
  font-size: 32px;
}

.entry-type-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gris-700);
}

/* Tarjetas de entrada del diario */
.entry-card {
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gris-200);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.entry-card:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.entry-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.entry-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: var(--gris-100);
  color: var(--gris-700);
}

.entry-date {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.entry-preview {
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

/* Prompts del diario */
.prompts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.prompt-item {
  padding: var(--space-1) var(--space-2);
  background: var(--turquesa-50);
  border: 1px solid var(--turquesa-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--turquesa-700);
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-item:hover {
  background: var(--turquesa-700);
  border-color: var(--turquesa-700);
  color: white;
}

/* Herramientas Mark Manson */
.herramienta-descripcion {
  font-size: var(--font-size-base);
  color: var(--gris-700);
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

.herramienta-instruccion {
  font-size: var(--font-size-sm);
  color: var(--turquesa-700);
  background: var(--turquesa-50);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  border-left: 3px solid var(--turquesa-400);
}

.herramienta-ejemplos {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.herramienta-ejemplos summary {
  cursor: pointer;
  color: var(--gris-500);
  font-weight: 500;
  padding: var(--space-1) 0;
}

.herramienta-ejemplos summary:hover {
  color: var(--gris-700);
}

.herramienta-ejemplos ul {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  color: var(--gris-600);
}

.herramienta-ejemplos li {
  margin-bottom: var(--space-1);
}

/* Listas de control (Control Analysis) */
.control-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (max-width: 480px) {
  .control-lists {
    grid-template-columns: 1fr;
  }
}

.control-list {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.control-list h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.control-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.control-list li {
  padding: var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.control-list--no {
  background: var(--rosa-50);
  border: 1px solid var(--rosa-200);
}

.control-list--no h4 {
  color: var(--rosa-700);
}

.control-list--no li::before {
  content: "✕";
  color: var(--rosa-500);
  font-weight: bold;
}

.control-list--yes {
  background: var(--turquesa-50);
  border: 1px solid var(--turquesa-200);
}

.control-list--yes h4 {
  color: var(--turquesa-700);
}

.control-list--yes li::before {
  content: "✓";
  color: var(--turquesa-500);
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   12. MEJORAS DE LOGROS
   Celebracion y motivacion
   -------------------------------------------------------------------------- */

/* Stat cards con efecto hover */
.stat-card {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  border: 1px solid var(--gris-100);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--turquesa-200);
}

.stat-card .stat-icon {
  font-size: 32px;
  margin-bottom: var(--space-1);
}

.stat-card .stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gris-900);
  font-family: var(--font-family-headings);
}

.stat-card .stat-label {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin-top: 4px;
}

/* Heatmap mejorado */
.heatmap-day {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  transition: transform 0.1s ease;
}

.heatmap-day:hover {
  transform: scale(1.3);
}

/* Badges de habitos graduados */
.graduated-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--turquesa-100), var(--turquesa-50));
  border: 2px solid var(--turquesa-300);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
}

.graduated-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.graduated-badge .badge-icon {
  color: var(--turquesa-600);
}

.graduated-badge .badge-name {
  font-weight: 600;
  color: var(--gris-800);
}

/* --------------------------------------------------------------------------
   13. MEJORAS DE CONFIGURACION
   Claridad y organizacion
   -------------------------------------------------------------------------- */

/* Secciones de configuracion */
.settings-section {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  border: 1px solid var(--gris-200);
  transition: all 0.2s ease;
}

.settings-section:hover {
  box-shadow: var(--shadow-sm);
}

.settings-section h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
  margin-bottom: var(--space-2);
}

/* Seccion de cuadernos con estilo especial */
.settings-section--notebooks {
  background: linear-gradient(135deg, white, var(--turquesa-50));
  border: 2px solid var(--turquesa-200);
}

/* Seccion de peligro */
.settings-section--danger {
  border: 2px solid var(--rosa-200);
  background: linear-gradient(135deg, white, var(--rosa-50));
}

.settings-section--danger h2 {
  color: var(--rosa-600);
}

/* Storage bar mejorada */
.storage-bar {
  height: 8px;
  background: var(--gris-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-1);
}

.storage-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--turquesa-400), var(--turquesa-600));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.storage-bar__fill.warning {
  background: linear-gradient(90deg, var(--tulip-tree-400), var(--rosa-500));
}

/* --------------------------------------------------------------------------
   14. ANIMACIONES Y TRANSICIONES GLOBALES
   Experiencia suave y calma
   -------------------------------------------------------------------------- */

/* Transicion suave para todos los elementos interactivos */
button,
a,
input,
textarea,
select,
.card,
.btn {
  transition: all 0.2s ease;
}

/* Animacion de entrada para elementos de lista */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Aplicar animacion a items nuevos */
.focus-item,
.entry-card,
.project-card,
.event-item {
  animation: slideInFromRight 0.3s ease;
}

/* Animacion de pulso para elementos importantes */
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(6, 182, 212, 0); }
}

/* Aplicar pulso a elementos que necesitan atencion */
.focus-item--rock,
.habit-card--needs-attention {
  animation: gentle-pulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   15. MEJORAS RESPONSIVE AVANZADAS
   Optimizado para diferentes dispositivos
   -------------------------------------------------------------------------- */

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard__header,
  .dashboard__quote {
    grid-column: 1 / -1;
  }
}

/* Desktop grande */
@media (min-width: 1200px) {
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard__header,
  .dashboard__focus,
  .dashboard__quote {
    grid-column: 1 / -1;
  }
}

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Modo oscuro automatico (preparacion futura) */
@media (prefers-color-scheme: dark) {
  /* Placeholder para dark mode - no activado aun */
}

/* --------------------------------------------------------------------------
   15.1 ACCESIBILIDAD DASHBOARD
   Mejoras WCAG 2.1 AA para audiencia 40+
   -------------------------------------------------------------------------- */

/* Focus visible mejorado para elementos del dashboard */
.focus-checkbox:focus-visible,
.calm-trigger:focus-visible,
.evening-trigger:focus-visible {
  outline: 3px solid var(--turquesa-400);
  outline-offset: 3px;
}

.dashboard__section:focus-within {
  outline: 2px solid var(--turquesa-300);
  outline-offset: 2px;
}

/* Areas tactiles expandidas (minimo 44px) */
.focus-delete,
.focus-rock {
  padding: 10px;
  margin: -10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Label del checkbox expande area clickeable */
.focus-label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Boton de habito con area tactil adecuada */
#habit-check-today {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
}

/* Indicador visual de seccion activa */
.dashboard__section[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--turquesa-400);
}

/* --------------------------------------------------------------------------
   16. UTILIDADES
   Clases de ayuda reutilizables
   -------------------------------------------------------------------------- */

/* Visualmente oculto pero accesible para screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Texto truncado */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flex center */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gap utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

/* Margin utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }

/* Link sutil mejorado */
.link-subtle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: var(--space-2);
}

.link-subtle:hover {
  color: var(--turquesa-600);
  text-decoration: none;
}

/* ==========================================================================
   MEJORAS ESPECIFICAS POR MODULO v2.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   VALORES - Brujula interior
   -------------------------------------------------------------------------- */

.values-page {
  max-width: 1000px;
  margin: 0 auto;
}
/* ==========================================================================
   VALORES - Layout 2 columnas con sidebar
   ========================================================================== */

/* Layout con sidebar */
.values-page--layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-4);
  max-width: 1200px;
}

.values-sidebar {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  height: fit-content;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  position: sticky;
  top: var(--space-2);
  border: 1px solid var(--gris-200);
}

.values-main {
  min-width: 0;
}

/* Ocultar versión móvil en PC */
.values-page--layout .values-guide--mobile {
  display: none;
}

/* ==========================================================================
   VALORES - Sidebar de Guía (Mark Manson)
   ========================================================================== */

.values-guide-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.values-guide-sidebar__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
  margin: 0;
}

.values-guide-sidebar__title .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 24px;
}

.values-guide-sidebar__quote {
  font-style: italic;
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--turquesa-400);
}

.values-guide-sidebar__comparison {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.values-guide-sidebar__column {
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.values-guide-sidebar__column--good {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.values-guide-sidebar__column--bad {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.values-guide-sidebar__column h4 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  color: var(--gris-800);
}

.values-guide-sidebar__column h4 .material-symbols-outlined {
  font-size: 18px;
}

.values-guide-sidebar__column--good h4 .material-symbols-outlined {
  color: var(--verde-600);
}

.values-guide-sidebar__column--bad h4 .material-symbols-outlined {
  color: var(--amarillo-600);
}

.values-guide-sidebar__column ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.values-guide-sidebar__column li {
  padding: var(--space-1) 0;
  color: var(--gris-700);
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.values-guide-sidebar__column li::before {
  content: '•';
  color: var(--gris-400);
  font-weight: bold;
}

.values-guide-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.values-guide-sidebar__footer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

.values-guide-sidebar__footer .material-symbols-outlined {
  font-size: 14px;
  color: var(--turquesa-500);
}

/* ==========================================================================
   VALORES - Responsive
   ========================================================================== */

/* Tablet: sidebar arriba, comparación horizontal */
@media (max-width: 1024px) {
  .values-page--layout {
    grid-template-columns: 1fr;
    max-width: 800px;
  }

  .values-sidebar {
    position: static;
    max-height: none;
  }

  .values-guide-sidebar__comparison {
    flex-direction: row;
    gap: var(--space-3);
  }

  .values-guide-sidebar__column {
    flex: 1;
  }
}

/* Móvil: sidebar oculto, colapsable visible */
@media (max-width: 600px) {
  .values-sidebar {
    display: none;
  }

  .values-page--layout .values-guide--mobile {
    display: block;
  }
}



/* Puente hacia Rueda de la Vida */
.values-bridge {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  border: 1px solid var(--gris-200);
}

.values-bridge .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 22px;
  flex-shrink: 0;
}

.values-bridge p {
  margin: 0;
  line-height: 1.5;
}

.values-bridge a {
  color: var(--turquesa-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.values-bridge a:hover {
  color: var(--turquesa-600);
}

.values-bridge a:focus-visible {
  outline: 2px solid var(--turquesa-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Version prominente para estado vacio */
.values-bridge--prominent {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--turquesa-50) 0%, var(--gris-50) 100%);
  border-left: 4px solid var(--turquesa-500);
  border-color: var(--turquesa-200);
  font-size: var(--font-size-base);
}

.values-bridge--prominent .values-bridge__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.values-bridge--prominent .material-symbols-outlined {
  font-size: 32px;
  color: var(--turquesa-600);
  margin-bottom: var(--space-2);
}

.values-bridge--prominent strong {
  display: block;
  color: var(--gris-800);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-headings);
  margin-bottom: var(--space-1);
}

.values-bridge--prominent p {
  color: var(--gris-700);
  line-height: 1.6;
}

/* Guía de buenos/malos valores (Mark Manson) */
.values-guide {
  margin-top: var(--space-3);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  background: white;
}

.values-guide summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--turquesa-700);
  font-weight: 500;
  font-size: var(--font-size-base);
  min-height: 48px;
  list-style: none;
}

.values-guide summary::-webkit-details-marker {
  display: none;
}

.values-guide summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gris-400);
  border-bottom: 2px solid var(--gris-400);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.values-guide[open] summary::after {
  transform: rotate(-135deg);
}

.values-guide summary .material-symbols-outlined {
  font-size: 20px;
}

.values-guide summary:hover {
  background: var(--gris-50);
}

.values-guide summary:focus-visible {
  outline: 2px solid var(--turquesa-500);
  outline-offset: 2px;
}

.values-guide[open] summary {
  border-bottom: 1px solid var(--gris-200);
}

.values-guide__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--gris-50);
}

.values-guide__content h4 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}

.values-guide__content h4 .material-symbols-outlined {
  font-size: 20px;
}

.values-guide__subtitle {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin: 0 0 var(--space-2) 0;
}

.values-guide__content ul {
  margin: 0;
  padding-left: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.6;
}

.values-guide__content li {
  margin-bottom: var(--space-1);
  padding-left: 4px;
}

.good-values h4 {
  color: var(--verde-600);
}

.good-values h4 .material-symbols-outlined {
  color: var(--verde-500);
}

.bad-values h4 {
  color: var(--rosa-600);
}

.bad-values h4 .material-symbols-outlined {
  color: var(--rosa-500);
}

@media (max-width: 500px) {
  .values-guide__content {
    grid-template-columns: 1fr;
  }
}

/* Grid de valores con mejor adaptabilidad */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Tarjeta de valor mejorada */
.value-card {
  position: relative;
  background: white;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gris-200);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  overflow: hidden;
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--turquesa-400), var(--rosa-400));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--turquesa-300);
}

.value-card:hover::before {
  opacity: 1;
}

/* Icono de valor mas grande y decorativo */
.value-icon {
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Nombre del valor con gradiente sutil */
.value-name {
  font-size: var(--font-size-xl);
  color: var(--gris-900);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gris-900), var(--gris-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Descripcion con mejor legibilidad */
.value-description {
  color: var(--gris-600);
  font-size: var(--font-size-base);
  line-height: 1.7;
  margin-top: var(--space-2);
}

/* Boton de agregar valor mejorado */
.value-card--add {
  border: 2px dashed var(--gris-300);
  background: linear-gradient(135deg, var(--gris-50), white);
  min-height: 200px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.value-card--add:hover {
  border-color: var(--turquesa-400);
  background: linear-gradient(135deg, var(--turquesa-50), white);
  transform: translateY(-4px);
}

.value-card--add:hover .material-symbols-outlined {
  color: var(--turquesa-500);
  transform: scale(1.1);
}

.value-card--add .material-symbols-outlined {
  transition: all 0.3s ease;
}

/* Seccion de reflexion mejorada */
.values-reflection {
  background: linear-gradient(135deg, white, var(--turquesa-50));
  border: 2px solid var(--turquesa-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

.values-reflection h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--turquesa-700);
}

.values-reflection h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: var(--turquesa-600);
  border-radius: 2px;
}

.reflection-prompt {
  font-size: var(--font-size-lg);
  color: var(--gris-800);
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--turquesa-500);
  margin: var(--space-2) 0;
  line-height: 1.7;
}

.reflection-prompt strong {
  color: var(--turquesa-700);
}

/* Ejemplos de valores con estilo de lista */
.value-examples {
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}

.value-examples li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  background: white;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.value-examples li:hover {
  background: var(--turquesa-50);
  transform: translateX(4px);
}

.value-examples li strong {
  color: var(--turquesa-700);
  min-width: 100px;
}

/* --------------------------------------------------------------------------
   PROYECTOS - Gestion de iniciativas
   -------------------------------------------------------------------------- */

.projects-page {
  max-width: 1000px;
  margin: 0 auto;
}

/* Grid de proyectos */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Tarjeta de proyecto mejorada */
.project-card {
  position: relative;
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gris-200);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--project-color, var(--gris-300));
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--project-color, var(--gris-400));
}

/* Estado del proyecto */
.project-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: var(--radius-full);
}

.project-status--active {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

.project-status--paused {
  background: var(--tulip-tree-100);
  color: var(--tulip-tree-700);
}

.project-status--completed {
  background: var(--gris-100);
  color: var(--gris-600);
}

/* Barra de progreso del proyecto */
.project-progress {
  margin-top: var(--space-2);
}

.project-progress__bar {
  height: 8px;
  background: var(--gris-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.project-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--project-color, var(--turquesa-400)), var(--turquesa-500));
  transition: width 0.5s ease;
}

.project-progress__text {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: 4px;
  text-align: right;
}

/* --------------------------------------------------------------------------
   HABITOS - Laboratorio de cambio
   -------------------------------------------------------------------------- */

.habits-page {
  max-width: 1000px;
  margin: 0 auto;
}

/* Tarjeta de habito activo mejorada */
.habit-active-card {
  background: linear-gradient(135deg, var(--turquesa-100), white);
  border: 2px solid var(--turquesa-300);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

.habit-active-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--turquesa-400), var(--tulip-tree-400));
}

/* Identidad del habito */
.habit-active-card .habit-identity {
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--turquesa-700);
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
  border-left: 4px solid var(--turquesa-400);
  background: white;
  padding: var(--space-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Las 4 leyes visualizadas */
.habit-laws {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.habit-law {
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gris-300);
}

.habit-law--obvio { border-left-color: var(--turquesa-500); }
.habit-law--atractivo { border-left-color: var(--rosa-500); }
.habit-law--facil { border-left-color: var(--tulip-tree-500); }
.habit-law--satisfactorio { border-left-color: var(--color-success); }

.habit-law__title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-bottom: 4px;
}

.habit-law__content {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

/* Calendario de habito (tracking) */
.habit-calendar {
  margin-top: var(--space-3);
}

.habit-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.habit-calendar__day {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--gris-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  transition: all 0.2s ease;
}

.habit-calendar__day--completed {
  background: var(--turquesa-400);
  color: white;
}

.habit-calendar__day--today {
  border: 2px solid var(--turquesa-600);
}

/* === Heatmap de hábitos (90 días) === */
.habit-heatmap {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.habit-heatmap__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.habit-heatmap__header h4 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin: 0;
}

.habit-heatmap__header h4 .material-symbols-outlined {
  font-size: 18px;
  color: var(--gris-400);
}

.habit-heatmap__stats {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.habit-heatmap__container {
  overflow-x: auto;
  padding: var(--space-1) 0;
}

.habit-heatmap__grid {
  display: flex;
  gap: 3px;
  min-width: max-content;
}

/* Reutilizamos las clases del heatmap general */
.habit-heatmap .heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.habit-heatmap .heatmap-day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--gris-200);
  cursor: default;
}

.habit-heatmap .heatmap-day.level-4 {
  background: var(--turquesa-500);
}

.habit-heatmap .heatmap-day.today,
.habit-heatmap .heatmap-day--today {
  outline: 2px solid var(--turquesa-600);
  outline-offset: 1px;
}

/* Indicador pulsante para el día de hoy sin completar */
.habit-heatmap .heatmap-day--today.level-0 {
  animation: pulse-today 2s ease-in-out infinite;
}

@keyframes pulse-today {
  0%, 100% { outline-color: var(--turquesa-600); }
  50% { outline-color: var(--rosa-400); }
}

.habit-heatmap__legend {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

.habit-heatmap__legend .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.habit-heatmap__legend .legend-item span:first-child {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.habit-heatmap__legend .level-0 {
  background: var(--gris-200);
}

.habit-heatmap__legend .level-4 {
  background: var(--turquesa-500);
}

/* Actividades atelicas */
.atelic-activities {
  background: linear-gradient(135deg, var(--tulip-tree-50), white);
  border: 1px solid var(--tulip-tree-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.atelic-activities h3 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--tulip-tree-700);
  margin-bottom: var(--space-2);
}

.atelic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-2);
}

.atelic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all 0.2s ease;
}

.atelic-item:hover {
  border-color: var(--tulip-tree-400);
  background: var(--tulip-tree-50);
  transform: translateY(-2px);
}

.atelic-item__icon {
  font-size: 24px;
}

.atelic-item__name {
  font-size: var(--font-size-xs);
  color: var(--gris-600);
  text-align: center;
}

/* --------------------------------------------------------------------------
   SUGERENCIAS DE HÁBITOS (Mark Manson)
   -------------------------------------------------------------------------- */

.habit-suggestions {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--turquesa-50) 0%, var(--rosa-50) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--turquesa-200);
}

.habit-suggestions__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.habit-suggestions__header > .material-symbols-outlined {
  font-size: 36px;
  color: var(--turquesa-600);
  flex-shrink: 0;
}

.habit-suggestions__header h3 {
  margin: 0 0 var(--space-1) 0;
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: var(--gris-800);
}

.habit-suggestions__header p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--gris-700);
  line-height: 1.5;
}

.habit-suggestions .suggestion-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.habit-suggestions .suggestion-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: white;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gris-100);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  min-height: 200px;
  box-shadow: var(--shadow-sm);
}

.habit-suggestions .suggestion-card:hover {
  border-color: var(--turquesa-400);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.habit-suggestions .suggestion-card:focus-visible {
  outline: 3px solid var(--turquesa-500);
  outline-offset: 2px;
}

.habit-suggestions .suggestion-card__icon {
  font-size: 40px;
  color: var(--turquesa-600);
}

.habit-suggestions .suggestion-card__name {
  margin: 0;
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

.habit-suggestions .suggestion-card__desc {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--gris-700);
  line-height: 1.5;
  flex-grow: 1;
}

.habit-suggestions .suggestion-card__benefits {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.habit-suggestions .benefit-tag {
  font-size: var(--font-size-sm);
  padding: 4px 12px;
  background: var(--turquesa-100);
  color: var(--turquesa-700);
  border-radius: var(--radius-full);
  font-weight: 500;
}

.habit-suggestions .suggestion-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-top: 1px solid var(--gris-100);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--turquesa-700);
  min-height: 44px;
}

.habit-suggestions .suggestion-card:hover .suggestion-card__cta {
  color: var(--turquesa-600);
  background: var(--turquesa-50);
  border-radius: var(--radius-md);
}

@media (max-width: 600px) {
  .habit-suggestions {
    padding: var(--space-3);
  }

  .habit-suggestions__header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .habit-suggestions .suggestion-cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .habit-suggestions .suggestion-card {
    min-height: auto;
    padding: var(--space-3);
  }

  .habit-suggestions .suggestion-card__icon {
    font-size: 32px;
  }

  .habit-suggestions .suggestion-card__name {
    font-size: var(--font-size-base);
  }

  .habit-suggestions .suggestion-card__desc {
    font-size: var(--font-size-sm);
  }

  .habit-suggestions .suggestion-card__cta {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   WIZARD Y AUDITORIA DE HABITOS (v1.5)
   -------------------------------------------------------------------------- */

/* Página completa del wizard/auditoría */
.wizard-page,
.audit-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gris-50);
}

/* Header del wizard */
.wizard-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: white;
  border-bottom: 1px solid var(--gris-200);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wizard-progress {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.wizard-step {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gris-300);
  transition: all 0.3s ease;
}

.wizard-step.active {
  background: var(--turquesa-600);
  transform: scale(1.2);
}

.wizard-step.completed {
  background: var(--turquesa-400);
}

.wizard-progress-label {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  min-width: 80px;
  text-align: right;
}

/* Contenido del wizard */
.wizard-content {
  flex: 1;
  padding: var(--space-4);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.wizard-title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-2xl);
  color: var(--gris-800);
  margin-bottom: var(--space-2);
  text-align: center;
}

.wizard-subtitle {
  font-size: var(--font-size-base);
  color: var(--gris-600);
  text-align: center;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Grid de áreas de vida */
.wizard-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.wizard-area-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.wizard-area-card:hover {
  border-color: var(--turquesa-300);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wizard-area-card.selected {
  border-color: var(--turquesa-500);
  background: var(--turquesa-50);
}

.wizard-area-icon {
  font-size: 40px;
  color: var(--turquesa-500);
}

.wizard-area-name {
  font-weight: 600;
  color: var(--gris-800);
}

.wizard-area-desc {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

/* Formulario del wizard */
.wizard-form-group {
  margin-bottom: var(--space-4);
}

.wizard-form-group label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: var(--space-1);
}

.wizard-examples,
.wizard-hint {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  margin-top: var(--space-1);
}

.input--large {
  font-size: var(--font-size-lg);
  padding: var(--space-3);
}

/* Badge de ley */
.wizard-law-badge {
  display: inline-block;
  background: var(--turquesa-100);
  color: var(--turquesa-700);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.wizard-law-badge.small {
  font-size: var(--font-size-xs);
  padding: 4px var(--space-2);
  margin-bottom: var(--space-1);
}

/* Opciones de duración */
.wizard-duration-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wizard-duration-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: white;
  border: 2px solid var(--gris-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-duration-option:hover {
  border-color: var(--turquesa-300);
}

.wizard-duration-option.selected {
  border-color: var(--turquesa-500);
  background: var(--turquesa-50);
}

.wizard-duration-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--turquesa-500);
}

.wizard-duration-value {
  font-weight: 600;
  color: var(--gris-800);
  min-width: 100px;
}

.wizard-duration-desc {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

/* Resumen del wizard */
.wizard-summary {
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.wizard-summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--turquesa-600);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.wizard-summary-habit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-summary-habit strong {
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

.wizard-summary-habit span {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

/* Quote en wizard */
.quote--wizard {
  background: var(--turquesa-50);
  border-left-color: var(--turquesa-400);
  margin-top: var(--space-3);
}

/* Footer del wizard */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: white;
  border-top: 1px solid var(--gris-200);
  position: sticky;
  bottom: 0;
}

.wizard-nav {
  display: flex;
  gap: var(--space-2);
}

/* Progress dots */
.wizard-progress-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gris-300);
  transition: all 0.3s ease;
}

.wizard-dot.active {
  background: var(--turquesa-600);
  transform: scale(1.3);
}

.wizard-dot.completed {
  background: var(--turquesa-400);
}

/* Progress bar */
.wizard-progress-bar {
  height: 4px;
  background: var(--gris-200);
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
  max-width: 200px;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--turquesa-600);
  transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   WIZARD - Guia expandida de leyes (Habitos Atomicos v2.0)
   -------------------------------------------------------------------------- */

/* Bloque de guia por ley en el wizard */
.wizard-law-guide {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gris-100);
}

.wizard-law-guide:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.wizard-law-principle {
  font-style: italic;
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

/* Tips expandibles del libro */
.wizard-law-tips {
  margin-top: var(--space-2);
}

.wizard-law-tips summary {
  cursor: pointer;
  color: var(--turquesa-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.wizard-law-tips summary:hover {
  color: var(--turquesa-700);
}

.wizard-law-tips ul {
  padding-left: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  line-height: 1.6;
}

.wizard-law-tips li {
  margin-bottom: 4px;
}

.wizard-law-tips li strong {
  color: var(--gris-700);
}

/* --------------------------------------------------------------------------
   WIZARD - Paso de obstaculos
   -------------------------------------------------------------------------- */

.wizard-obstacles-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wizard-obstacle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
}

.wizard-obstacle-row label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-600);
}

.wizard-quote {
  margin-top: var(--space-3);
}

@media (max-width: 480px) {
  .wizard-obstacle-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   TARJETA HABITO - Matriz de 4 Leyes
   -------------------------------------------------------------------------- */

.habit-laws-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.law-card {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--gris-50);
  border-left: 3px solid var(--gris-300);
}

.law-card .law-icon {
  font-size: 18px;
  margin-bottom: 4px;
  display: block;
}

.law-card .law-label {
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--gris-500);
  letter-spacing: 0.5px;
}

.law-card .law-strategy {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  margin-top: 4px;
  line-height: 1.4;
}

.law-card .law-strategy em {
  color: var(--gris-400);
}

.law-card .law-detail {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Colores por ley */
.law--obvio {
  border-left-color: var(--turquesa-500);
}

.law--obvio .law-icon {
  color: var(--turquesa-500);
}

.law--atractivo {
  border-left-color: var(--rosa-500);
}

.law--atractivo .law-icon {
  color: var(--rosa-500);
}

.law--facil {
  border-left-color: var(--tulip-tree-500);
}

.law--facil .law-icon {
  color: var(--tulip-tree-500);
}

.law--satisfactorio {
  border-left-color: var(--color-success);
}

.law--satisfactorio .law-icon {
  color: var(--color-success);
}

@media (max-width: 480px) {
  .habit-laws-matrix {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   TARJETA HABITO - Obstaculos
   -------------------------------------------------------------------------- */

.habit-obstacles {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.habit-obstacles h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-600);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-1);
}

.obstacle-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--gris-100);
}

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

.obstacle-if {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

.obstacle-then {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gris-700);
}

/* --------------------------------------------------------------------------
   MENSAJE "NUNCA FALLES DOS VECES"
   -------------------------------------------------------------------------- */

.streak-encouragement {
  font-size: var(--font-size-sm);
  color: var(--turquesa-600);
  font-style: italic;
  padding: var(--space-2);
  background: var(--turquesa-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

/* --------------------------------------------------------------------------
   EVALUACION RUEDA DE LA VIDA - Diseno Minimalista
   -------------------------------------------------------------------------- */

.evaluation-page {
  background: var(--gris-50);
  min-height: 100vh;
  /* Usar scroll natural del navegador */
}

.evaluation-page .wizard-content {
  padding: var(--space-4) 20px;
  padding-bottom: var(--space-6);
  /* Sin overflow, fluye con scroll del navegador */
}

/* Header del wizard de evaluacion - con navegacion integrada */
.evaluation-page .wizard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: white;
  border-bottom: 1px solid var(--gris-200);
  /* Sin sticky - fluye con scroll natural */
}

.evaluation-page .wizard-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.evaluation-page .wizard-header-center {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.evaluation-page .wizard-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Ocultar footer en evaluation-page */
.evaluation-page .wizard-footer {
  display: none;
}

/* Responsive: en movil, botones debajo */
@media (max-width: 640px) {
  .evaluation-page .wizard-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .evaluation-page .wizard-header-left {
    width: 100%;
    justify-content: space-between;
  }

  .evaluation-page .wizard-header-center {
    width: 100%;
    justify-content: center;
  }

  .evaluation-page .wizard-header-right {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Paso de evaluacion - layout compacto */
.eval-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Sin max-width - ocupa todo el ancho disponible */
}

/* Header del area - inline compacto */
.eval-area-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: white;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--area-color);
  box-shadow: var(--shadow-sm);
}

.eval-area-header::after {
  display: none;
}

.eval-area-icon {
  font-size: 28px !important;
  color: var(--area-color);
  flex-shrink: 0;
}

.eval-area-info {
  flex: 1;
  min-width: 0;
}

.eval-area-title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
  margin: 0;
  line-height: 1.2;
}

.eval-area-subtitle {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin: 2px 0 0 0;
}

/* Sliders - layout compacto */
.eval-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: white;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.eval-slider-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--turquesa-400);
}

.eval-slider-group--desired {
  border-left-color: var(--rosa-400);
}

.eval-slider-label {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: var(--gris-700);
  font-size: var(--font-size-sm);
}

.eval-slider-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--turquesa-600);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-base);
  border-radius: 50%;
}

.eval-slider-value--desired {
  background: var(--rosa-600);
}

.eval-slider-container {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eval-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--gris-200);
  outline: none;
  cursor: pointer;
}

.eval-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--turquesa-600);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid white;
}

.eval-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.eval-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--turquesa-100);
}

.eval-slider--desired::-webkit-slider-thumb {
  background: var(--rosa-600);
}

.eval-slider--desired:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--rosa-100);
}

/* Firefox support */
.eval-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--turquesa-600);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid white;
}

.eval-slider--desired::-moz-range-thumb {
  background: var(--rosa-600);
}

.eval-slider-hints {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--gris-400);
  padding: 0;
}

/* Reflexiones - compactas */
.eval-reflections {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.eval-reflections-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-headings);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.eval-reflections-title .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 18px;
}

.eval-reflection-card {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}

.eval-reflection-card:focus-within {
  box-shadow: 0 0 0 2px var(--turquesa-400);
}

.eval-reflection-card label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--gris-600);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
}

.eval-reflection-card .material-symbols-outlined {
  color: var(--gris-400);
  font-size: 16px;
}

.eval-reflection-card textarea {
  min-height: 60px;
  resize: vertical;
  font-size: var(--font-size-sm);
}

.eval-reflections label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--gris-600);
  margin-bottom: var(--space-2);
}

.eval-reflections .material-symbols-outlined {
  color: var(--gris-400);
  font-size: 16px;
}

/* Resumen de evaluacion */
.eval-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.eval-summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: var(--gris-800);
  text-align: center;
}

.eval-summary-title .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 28px;
}

.eval-summary-wheel {
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.eval-summary-scores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  width: 100%;
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.eval-summary-score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--gris-50);
  border-left: 3px solid var(--area-color);
  transition: background 0.15s ease;
}

.eval-summary-score:hover {
  background: var(--gris-100);
}

.eval-summary-score .material-symbols-outlined {
  color: var(--area-color);
  font-size: 18px;
}

.eval-summary-score .name {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--gris-600);
}

.eval-summary-score .scores {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
}

.eval-summary-score .current {
  font-weight: 600;
  color: var(--gris-500);
}

.eval-summary-score .arrow {
  color: var(--gris-300);
  font-size: 10px;
}

.eval-summary-score .desired {
  font-weight: 600;
  color: var(--rosa-600);
}

.eval-summary-score .diff {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
}

.eval-summary-score .diff.positive {
  background: var(--turquesa-100);
  color: var(--turquesa-700);
}

.eval-summary-score .diff.negative {
  background: var(--rosa-100);
  color: var(--rosa-600);
}

/* Triangulo de la Felicidad - Insight de Mark Manson */
.triangle-insight {
  width: 100%;
  background: linear-gradient(135deg, var(--turquesa-50), var(--gris-50));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--turquesa-500);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.triangle-insight__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.triangle-insight__header .material-symbols-outlined {
  font-size: 28px;
  color: var(--turquesa-600);
}

.triangle-insight__header h3 {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-headings);
  font-weight: 600;
  color: var(--gris-800);
  margin: 0;
}

.triangle-insight__area {
  font-size: var(--font-size-base);
  color: var(--gris-700);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.6;
}

.triangle-insight__area strong {
  color: var(--turquesa-700);
  font-weight: 600;
}

.triangle-insight__quote {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin: 0;
  font-style: italic;
  border: 1px solid var(--gris-100);
}

.triangle-insight__quote p {
  margin: 0 0 var(--space-2) 0;
  color: var(--gris-700);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.triangle-insight__quote cite {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  font-style: normal;
  font-weight: 500;
}

/* Triangulo de la Felicidad - Vista principal */
.triangle-section {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--turquesa-50) 0%, var(--rosa-50) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--turquesa-200);
}

.triangle-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: var(--turquesa-700);
}

.triangle-section h3 .material-symbols-outlined {
  font-size: 28px;
  color: var(--turquesa-600);
}

.triangle-section > p {
  margin: 0 0 var(--space-4) 0;
  color: var(--gris-700);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.triangle-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.triangle-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gris-100);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 160px;
}

.triangle-pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.triangle-pillar:focus-visible {
  outline: 3px solid var(--turquesa-500);
  outline-offset: 2px;
}

.triangle-pillar .material-symbols-outlined {
  font-size: 36px;
}

.triangle-pillar.salud .material-symbols-outlined {
  color: var(--verde-500);
}

.triangle-pillar.salud {
  border-top: 3px solid var(--verde-400);
}

.triangle-pillar.relaciones .material-symbols-outlined {
  color: var(--rosa-500);
}

.triangle-pillar.relaciones {
  border-top: 3px solid var(--rosa-400);
}

.triangle-pillar.libertad .material-symbols-outlined {
  color: var(--turquesa-500);
}

.triangle-pillar.libertad {
  border-top: 3px solid var(--turquesa-400);
}

.triangle-pillar h4 {
  margin: 0;
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

.triangle-pillar .pillar-score {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gris-800);
}

.triangle-pillar .pillar-areas {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  text-align: center;
  line-height: 1.4;
}

.triangle-connection {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--gris-700);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
  border: 1px solid var(--gris-100);
}

@media (max-width: 600px) {
  .triangle-section {
    padding: var(--space-3);
  }

  .triangle-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .triangle-pillar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    min-height: auto;
  }

  .triangle-pillar .material-symbols-outlined {
    font-size: 32px;
    flex-shrink: 0;
  }

  .triangle-pillar h4 {
    flex: 1;
    font-size: var(--font-size-base);
  }

  .triangle-pillar .pillar-score {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
  }

  .triangle-pillar .pillar-areas {
    display: none;
  }
}

.eval-overall-reflection {
  width: 100%;
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (max-width: 480px) {
  .evaluation-page .wizard-content {
    padding: var(--space-3);
  }

  .eval-step {
    gap: var(--space-2);
  }

  .eval-area-header {
    padding: var(--space-2) var(--space-3);
  }

  .eval-area-icon {
    font-size: 24px !important;
  }

  .eval-area-title {
    font-size: var(--font-size-base);
  }

  .eval-sliders {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .eval-slider-group {
    padding: var(--space-2);
  }

  .eval-slider-value {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
  }

  .eval-slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }

  .eval-reflection-card {
    padding: var(--space-2);
  }

  .eval-reflection-card textarea {
    min-height: 50px;
  }

  .eval-summary-scores {
    grid-template-columns: 1fr;
  }

  .eval-summary-title {
    font-size: var(--font-size-lg);
  }

  .eval-summary-title .material-symbols-outlined {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   AUDITORIA DE HABITOS
   -------------------------------------------------------------------------- */

/* Lista de actividades en auditoría */
.audit-activities-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.audit-activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
}

.audit-activity-name {
  flex: 1;
  color: var(--gris-700);
}

/* Formulario para añadir actividad */
.audit-add-form {
  display: flex;
  gap: var(--space-2);
}

.audit-add-form .input {
  flex: 1;
}

.audit-empty-hint {
  text-align: center;
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

/* Lista de evaluación */
.audit-evaluate-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.audit-evaluate-item {
  background: white;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.audit-evaluate-name {
  display: block;
  font-weight: 600;
  color: var(--gris-800);
  margin-bottom: var(--space-2);
}

.audit-evaluate-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Botones de evaluación */
.btn--eval {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-2);
  border: 2px solid var(--gris-300);
  border-radius: var(--radius-md);
  background: white;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--eval:hover {
  border-color: var(--gris-400);
}

.btn--eval.selected.maintain {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

.btn--eval.selected.change {
  background: var(--rosa-100);
  border-color: var(--rosa-500);
  color: var(--rosa-600);
}

.btn--eval.selected.indifferent {
  background: var(--gris-100);
  border-color: var(--gris-400);
  color: var(--gris-600);
}

/* Lista de selección */
.audit-select-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.audit-select-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: white;
  border: 2px solid var(--rosa-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}

.audit-select-item:hover {
  border-color: var(--rosa-400);
  background: var(--rosa-50);
  transform: translateX(4px);
}

.audit-select-item span:first-child {
  color: var(--rosa-500);
}

.audit-select-item span:last-child {
  margin-left: auto;
  color: var(--gris-400);
}

/* Sin cambios en auditoría */
.audit-no-changes {
  text-align: center;
  padding: var(--space-4);
}

.audit-no-changes p {
  color: var(--gris-600);
  margin: var(--space-2) 0;
}

/* --------------------------------------------------------------------------
   MEJORAS EN TARJETA DE HABITO ACTIVO (v1.5)
   -------------------------------------------------------------------------- */

/* Badge de área de vida */
.habit-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--turquesa-100);
  color: var(--turquesa-700);
  padding: 4px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

/* Cuándo y dónde */
.habit-when-where {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--gris-500);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

.habit-when-where span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Empty state mejorado para hábitos */
.empty-state--habits {
  text-align: center;
  padding: var(--space-6);
}

.empty-state--habits h3 {
  font-family: var(--font-family-headings);
  color: var(--gris-700);
  margin: var(--space-2) 0;
}

.empty-state-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (min-width: 480px) {
  .empty-state-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   LOGROS - Celebracion y recapitulacion
   -------------------------------------------------------------------------- */

.achievements-page {
  max-width: 1000px;
  margin: 0 auto;
}

/* Selector de periodo mejorado */
.period-selector {
  display: flex;
  gap: 4px;
  background: var(--gris-100);
  padding: 4px;
  border-radius: var(--radius-full);
  width: fit-content;
  margin: var(--space-3) auto;
}

.period-btn {
  padding: var(--space-1) var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-weight: 500;
  color: var(--gris-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn:hover {
  color: var(--gris-800);
}

.period-btn.active {
  background: white;
  color: var(--turquesa-700);
  box-shadow: var(--shadow-sm);
}

/* Grid de estadisticas mejorado */
.achievements-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Card de recapitulacion */
.recap-card {
  background: linear-gradient(135deg, white, var(--turquesa-50));
  border: 1px solid var(--turquesa-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--gris-700);
}

.recap-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--tulip-tree-100);
  border-radius: var(--radius-md);
  color: var(--tulip-tree-800);
  font-weight: 500;
}

/* Heatmap contenedor */
.heatmap-container {
  background: white;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.heatmap-wrapper {
  min-width: 700px;
}

/* Estilos de intensidad del heatmap */
.heatmap-day--level-0 { background: var(--gris-100); }
.heatmap-day--level-1 { background: var(--turquesa-200); }
.heatmap-day--level-2 { background: var(--turquesa-400); }
.heatmap-day--level-3 { background: var(--turquesa-600); }
.heatmap-day--level-4 { background: var(--turquesa-600); }

/* Seccion de logros espontaneos */
.achievements-spontaneous {
  background: linear-gradient(135deg, var(--tulip-tree-50), white);
  border: 1px solid var(--tulip-tree-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.spontaneous-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spontaneous-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  transition: all 0.2s ease;
}

.spontaneous-item:hover {
  box-shadow: var(--shadow-sm);
}

.spontaneous-item__mood {
  font-size: 24px;
}

.spontaneous-item__text {
  flex: 1;
  color: var(--gris-800);
}

.spontaneous-item__date {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

/* --------------------------------------------------------------------------
   KANBAN - Horizontes temporales
   -------------------------------------------------------------------------- */

.kanban-page {
  max-width: 100%;
}

/* Header del kanban con controles */
.kanban-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Tarjeta de tarea en kanban */
.kanban-item {
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  margin-bottom: var(--space-1);
  cursor: grab;
  transition: all 0.2s ease;
}

.kanban-item:hover {
  border-color: var(--turquesa-300);
  box-shadow: var(--shadow-sm);
}

.kanban-item:active {
  cursor: grabbing;
  box-shadow: var(--shadow-md);
}

.kanban-item--dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.kanban-item__text {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
  line-height: 1.5;
}

.kanban-item__project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--project-color, var(--gris-600));
  margin-top: var(--space-1);
  padding: 2px 6px;
  background: rgba(0,0,0,0.05);
  border-radius: var(--radius-sm);
}

/* Columnas de kanban */
.kanban-column {
  background: var(--gris-50);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  min-height: 300px;
}

.kanban-column__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

.kanban-column__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gris-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.kanban-column__count {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  background: var(--gris-200);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   FIN DE MEJORAS UI/UX v2.0
   -------------------------------------------------------------------------- */

/* ==========================================================================
   RUEDA DE LA VIDA (v1.4)
   ========================================================================== */

/* Página principal */
.life-wheel-page {
  padding: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Life Wheel Layout 2 Columnas --- */
.life-wheel-page--layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4);
  min-height: calc(100vh - 200px);
}

.life-wheel-sidebar {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  height: fit-content;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  position: sticky;
  top: var(--space-2);
}

.life-wheel-main {
  /* Contenido principal */
}

/* Triángulo en sidebar (compacto) */
.triangle-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.triangle-sidebar__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-md);
  margin: 0;
  color: var(--gris-800);
  font-family: var(--font-headings);
}

.triangle-sidebar__title .material-symbols-outlined {
  color: var(--turquesa-600);
}

.triangle-sidebar__quote {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--gris-600);
  margin: 0;
  padding: var(--space-2);
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--turquesa-500);
}

.triangle-sidebar__areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.triangle-sidebar__area {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.triangle-sidebar__area:hover {
  border-color: var(--turquesa-300);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.1);
}

.triangle-sidebar__area .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.triangle-sidebar__area-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.triangle-sidebar__area-content strong {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
}

.triangle-sidebar__area-content span {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  line-height: 1.3;
}

.triangle-sidebar__footer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  margin: var(--space-2) 0 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

/* Ocultar versión móvil del triángulo en PC */
.life-wheel-page--layout .happiness-triangle--mobile {
  display: none;
}

/* Responsive: tablet y móvil */
@media (max-width: 1024px) {
  .life-wheel-page--layout {
    grid-template-columns: 1fr;
  }

  .life-wheel-sidebar {
    position: static;
    max-height: none;
  }

  .triangle-sidebar__areas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .triangle-sidebar__area {
    flex: 1 1 calc(33.33% - var(--space-2));
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .triangle-sidebar__area {
    flex: 1 1 calc(50% - var(--space-2));
    min-width: 180px;
  }
}

@media (max-width: 600px) {
  .life-wheel-sidebar {
    display: none;
  }

  /* Mostrar versión móvil del triángulo */
  .life-wheel-page--layout .happiness-triangle--mobile {
    display: block;
  }
}

.life-wheel-page .page-header {
  margin-bottom: var(--space-4);
}

.life-wheel-page .page-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Acciones principales */
.wheel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gris-200);
}

.view-toggle {
  display: flex;
  gap: var(--space-1);
  background: var(--gris-100);
  padding: 4px;
  border-radius: var(--radius-lg);
}

.view-toggle .btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

.view-toggle .btn.active {
  background: white;
  box-shadow: var(--shadow-sm);
}

/* Contenido principal */
.wheel-content {
  min-height: 400px;
}

/* Vista de la rueda */
.wheel-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.wheel-chart-container {
  max-width: 500px;
  width: 100%;
}

/* Leyenda */
.wheel-legend {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  font-size: var(--font-size-sm);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.legend-color {
  width: 24px;
  height: 4px;
  border-radius: 2px;
}

.legend-color--current {
  background: var(--turquesa-600);
}

.legend-color--desired {
  background: var(--turquesa-300);
  background: repeating-linear-gradient(
    90deg,
    var(--turquesa-300) 0,
    var(--turquesa-300) 8px,
    transparent 8px,
    transparent 12px
  );
}

/* Grid de puntuaciones */
.wheel-scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  width: 100%;
  max-width: 800px;
}

.score-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--area-color, var(--gris-300));
  transition: box-shadow var(--transition-fast);
}

.score-card:hover {
  box-shadow: var(--shadow-md);
}

.score-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.score-card__header .material-symbols-outlined {
  color: var(--area-color, var(--gris-500));
}

.score-card__name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

.score-card__scores {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.score-current {
  color: var(--gris-700);
}

.score-arrow {
  color: var(--gris-400);
  font-size: var(--font-size-sm);
}

.score-desired {
  color: var(--turquesa-600);
}

.score-diff {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
}

.score-diff--positive {
  background: var(--verde-100);
  color: var(--verde-700);
}

.score-card__details {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
}

/* Reflexión general */
.overall-reflection {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  width: 100%;
  max-width: 600px;
}

.overall-reflection h3 {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  color: var(--gris-600);
}

.overall-reflection p {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.6;
}

/* Selector de evaluación */
.evaluation-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.evaluation-selector label {
  font-size: var(--font-size-sm);
  color: var(--gris-600);
}

.evaluation-selector select {
  min-width: 200px;
}

/* Reflexión de Burkeman */
.wheel-reflection {
  margin: var(--space-4) 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Gestión de áreas */
.wheel-areas-management {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gris-200);
}

.wheel-areas-management h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.areas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.area-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.area-item__order {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  width: 20px;
}

.area-item__icon {
  color: var(--turquesa-500);
}

.area-item__name {
  flex: 1;
  font-weight: 500;
}

.area-item__value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--turquesa-600);
  background: var(--turquesa-50);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.area-item__edit {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.area-item:hover .area-item__edit {
  opacity: 1;
}

/* Estado vacío */
.wheel-empty {
  text-align: center;
  padding: var(--space-6);
}

.wheel-empty h3 {
  margin-bottom: var(--space-3);
}

.wheel-preview {
  max-width: 350px;
  margin: var(--space-4) auto;
  opacity: 0.6;
}

/* ==========================================================================
   WIZARD DE EVALUACIÓN
   ========================================================================== */

.modal--large {
  max-width: 700px;
  width: 95%;
}

.evaluation-wizard {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.wizard-header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gris-200);
  margin-bottom: var(--space-4);
}

.wizard-progress {
  margin-top: var(--space-2);
}

.wizard-step-indicator {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  margin-bottom: var(--space-2);
  display: block;
}

.wizard-progress-bar {
  height: 4px;
  background: var(--gris-200);
  border-radius: 2px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--turquesa-600);
  transition: width 0.3s ease;
}

.wizard-content {
  flex: 1;
  overflow-y: auto;
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
  margin-top: var(--space-4);
}

/* Contenedor para botón siguiente + hint */
.wizard-footer__next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

/* Hint pequeño para botones deshabilitados */
.hint--small {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin: 0;
  text-align: right;
}

.wizard-nav {
  display: flex;
  gap: var(--space-2);
}

/* Paso de área */
.wizard-step--area {
  padding: var(--space-2);
}

.wizard-area-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--area-color, var(--turquesa-500)) 0%, color-mix(in srgb, var(--area-color, var(--turquesa-500)) 80%, black) 100%);
  border-radius: var(--radius-lg);
  color: white;
  margin-bottom: var(--space-4);
}

.wizard-area-header .icon-xl {
  font-size: 48px;
}

.wizard-area-header h3 {
  margin: 0;
  font-size: var(--font-size-xl);
}

/* Sliders */
.wizard-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.slider-group {
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.slider-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.slider-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--turquesa-600);
  min-width: 30px;
  text-align: center;
}

.slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--gris-200);
  appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--turquesa-600);
  border: 3px solid white;
  box-shadow: var(--shadow-md);
  cursor: grab;
}

.slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: var(--space-1);
}

/* Reflexiones del wizard */
.wizard-reflections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wizard-reflections .form-group {
  margin-bottom: 0;
}

.wizard-reflections label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.wizard-reflections textarea {
  font-size: var(--font-size-sm);
}

/* Paso de resumen */
.wizard-step--summary {
  text-align: center;
}

.wizard-step--summary h3 {
  margin-bottom: var(--space-3);
}

.summary-wheel {
  max-width: 350px;
  margin: 0 auto var(--space-4);
}

.summary-scores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  text-align: left;
}

.summary-score-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.summary-score-item .name {
  flex: 1;
}

.summary-score-item .scores {
  font-weight: 600;
  color: var(--turquesa-600);
}

/* ==========================================================================
   GRÁFICOS SVG
   ========================================================================== */

/* Gráfico de rueda */
.wheel-chart {
  width: 100%;
  height: auto;
}

.wheel-grid-circle {
  stroke: var(--gris-200);
}

.wheel-grid-label {
  fill: var(--gris-400);
  font-size: 10px;
}

.wheel-axis {
  stroke: var(--gris-200);
}

.wheel-current-path {
  transition: d 0.3s ease;
}

.wheel-desired-path {
  opacity: 0.7;
}

.wheel-point {
  cursor: pointer;
  transition: r 0.2s ease;
}

.wheel-point:hover {
  r: 10;
}

.wheel-label {
  font-size: 11px;
  font-weight: 500;
  fill: var(--gris-700);
}

.wheel-area-icon {
  display: block;
}

/* Gráfico de evolución */
.evolution-view {
  width: 100%;
}

.evolution-chart-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-3);
}

.evolution-chart {
  min-width: 500px;
  width: 100%;
  height: auto;
}

.evolution-grid-line {
  stroke: var(--gris-200);
}

.evolution-line {
  transition: stroke-width 0.2s ease;
}

.evolution-area-group:hover .evolution-line {
  stroke-width: 4;
}

.evolution-point {
  cursor: pointer;
  transition: r 0.2s ease;
}

.evolution-point:hover {
  r: 8;
}

.evolution-y-label,
.evolution-x-label {
  fill: var(--gris-600);
}

.evolution-axis-title {
  fill: var(--gris-500);
}

/* Leyenda de evolución */
.evolution-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  padding: var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-md);
}

.evolution-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.evolution-legend-item input {
  margin: 0;
}

.evolution-legend-item .legend-color {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

/* Vista de comparación */
.compare-view {
  width: 100%;
}

.compare-selectors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.compare-vs {
  font-weight: 600;
  color: var(--gris-500);
}

.compare-wheels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.compare-wheel {
  text-align: center;
}

.compare-wheel h4 {
  margin-bottom: var(--space-2);
  color: var(--gris-600);
}

.compare-diff {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.compare-diff h4 {
  margin-bottom: var(--space-3);
  text-align: center;
}

.compare-diff-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--gris-200);
}

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

.compare-diff-item .name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.compare-diff-item .diff {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.diff--positive {
  background: var(--verde-100);
  color: var(--verde-700);
}

.diff--negative {
  background: var(--rosa-100);
  color: var(--rosa-700);
}

.diff--neutral {
  background: var(--gris-100);
  color: var(--gris-600);
}

/* Sparkline */
.sparkline {
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   RESPONSIVE - RUEDA DE LA VIDA
   ========================================================================== */

@media (max-width: 768px) {
  .wheel-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .view-toggle {
    justify-content: center;
  }

  .wheel-scores-grid {
    grid-template-columns: 1fr;
  }

  .compare-wheels {
    grid-template-columns: 1fr;
  }

  .summary-scores {
    grid-template-columns: 1fr;
  }

  .wizard-area-header .icon-xl {
    font-size: 36px;
  }

  .modal--large {
    max-width: 100%;
    margin: var(--space-2);
  }

  .evaluation-wizard {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .life-wheel-page {
    padding: var(--space-2);
  }

  .wheel-legend {
    flex-direction: column;
    align-items: center;
  }

  .evolution-legend {
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-selectors {
    flex-direction: column;
  }

  .wizard-nav {
    flex-direction: column;
    width: 100%;
  }

  .wizard-nav .btn {
    width: 100%;
  }
}

/* ===== EVALUADOR DE PROYECTOS ===== */

/* Modal wrapper - oculto por defecto */
.objective-evaluator-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* Sobrescribir estilos de .modal generico */
  width: 100%;
  max-width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.objective-evaluator-modal.modal--visible {
  display: flex;
  justify-content: center;
  align-items: center;
}

.objective-evaluator-modal .modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.objective-evaluator-modal .modal__content {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

.objective-evaluator {
  max-width: 640px;
  width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Móvil: Fullscreen */
@media (max-width: 600px) {
  .objective-evaluator {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .objective-evaluator-modal .modal__content {
    border-radius: 0;
  }
}

.evaluator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--gris-200);
  flex-shrink: 0;
}

.evaluator-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.evaluator-title h2 {
  margin: 0;
  font-size: 1.25rem;
}

.evaluator-title .material-symbols-outlined {
  color: var(--turquesa-500);
  font-size: 28px;
}

.evaluator-objective-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--gris-50);
  font-weight: 500;
  flex-shrink: 0;
}

.evaluator-objective-name .material-symbols-outlined {
  color: var(--turquesa-500);
}

.evaluator-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.evaluator-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--gris-200);
  flex-shrink: 0;
}

/* Intro */
.evaluator-intro {
  margin-bottom: var(--space-4);
}

.evaluator-intro p {
  margin: 0;
  color: var(--gris-600);
}

.evaluator-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--amarillo-50);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.evaluator-hint .material-symbols-outlined {
  color: var(--amarillo-600);
  font-size: 18px;
}

/* Lista de criterios */
.criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Criterios - Diseño minimalista */
.criterion-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gris-100);
}

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

.criterion-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.criterion-icon {
  font-size: 20px;
  color: var(--turquesa-500);
  flex-shrink: 0;
}

.criterion-info {
  flex: 1;
  min-width: 0;
}

.criterion-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gris-800);
}

.criterion-description {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--gris-500);
  line-height: 1.3;
}

.criterion-weight {
  flex-shrink: 0;
  margin-left: auto;
}

.weight-badge {
  font-size: 0.7rem;
  color: var(--gris-400);
  font-weight: 500;
}

/* Slider del criterio */
.criterion-slider {
  padding: 0 var(--space-2);
}

.criterion-slider .slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--slider-color, var(--turquesa-500)) 0%,
    var(--slider-color, var(--turquesa-500)) var(--slider-fill, 50%),
    var(--gris-200) var(--slider-fill, 50%),
    var(--gris-200) 100%
  );
  border-radius: 4px;
  cursor: pointer;
}

.criterion-slider .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid var(--slider-color, var(--turquesa-500));
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
}

.criterion-slider .slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.criterion-slider .slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-1);
  font-size: 0.75rem;
  color: var(--gris-400);
}

.slider-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gris-700);
}

/* Resultado */
.evaluator-result {
  text-align: center;
}

.result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.result-icon {
  font-size: 64px;
}

.result--proceed .result-icon {
  color: var(--verde-500);
}

.result--review .result-icon {
  color: var(--amarillo-500);
}

.result--reconsider .result-icon {
  color: var(--rosa-500);
}

.result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-value {
  font-size: 2.5rem;
  font-weight: 700;
}

.result--proceed .score-value {
  color: var(--verde-600);
}

.result--review .score-value {
  color: var(--amarillo-600);
}

.result--reconsider .score-value {
  color: var(--rosa-600);
}

.score-label {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-description {
  max-width: 500px;
  margin: 0 auto var(--space-4);
  color: var(--gris-600);
  line-height: 1.6;
}

.result-quote {
  margin: 0 auto var(--space-6);
  padding: var(--space-3) var(--space-4);
  max-width: 400px;
  background: var(--gris-50);
  border-left: 4px solid var(--turquesa-500);
  font-style: italic;
  color: var(--gris-600);
  text-align: left;
}

/* Desglose */
.result-breakdown {
  text-align: left;
  margin-bottom: var(--space-4);
}

.result-breakdown h4 {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.breakdown-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.breakdown-icon {
  font-size: 18px;
  color: var(--gris-400);
}

.breakdown--high .breakdown-icon {
  color: var(--verde-500);
}

.breakdown--medium .breakdown-icon {
  color: var(--amarillo-500);
}

.breakdown--low .breakdown-icon {
  color: var(--rosa-500);
}

.breakdown-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gris-600);
}

.breakdown-score {
  font-weight: 600;
  color: var(--gris-700);
}

.breakdown-bar {
  grid-column: 2 / -1;
  height: 4px;
  background: var(--gris-200);
  border-radius: 2px;
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.breakdown--high .breakdown-fill {
  background: var(--verde-500);
}

.breakdown--medium .breakdown-fill {
  background: var(--amarillo-500);
}

.breakdown--low .breakdown-fill {
  background: var(--rosa-500);
}

/* Paginación del evaluador */
.evaluator-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--gris-100);
}

.pagination-dots {
  display: flex;
  gap: 6px;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gris-300);
  transition: all 0.2s;
}

.pagination-dot.active {
  background: var(--turquesa-500);
  width: 24px;
  border-radius: 4px;
}

.pagination-label {
  font-size: 0.75rem;
  color: var(--gris-500);
  margin-left: var(--space-2);
}

/* Navegación entre páginas */
.evaluator-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--gris-100);
  background: var(--gris-50);
}

.evaluator-nav .btn {
  min-height: 44px;
}

.page-indicator {
  font-size: 0.875rem;
  color: var(--gris-500);
  font-weight: 500;
}

/* Insights */
.result-insights {
  text-align: left;
}

.insight {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.insight .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 24px;
}

.insight p {
  margin: 0;
}

.insight ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

.insight li {
  margin-bottom: var(--space-1);
}

.insight--positive {
  background: var(--verde-50);
  color: var(--verde-700);
}

.insight--positive .material-symbols-outlined {
  color: var(--verde-500);
}

.insight--attention {
  background: var(--amarillo-50);
  color: var(--amarillo-800);
}

.insight--attention .material-symbols-outlined {
  color: var(--amarillo-500);
}

/* Badge de evaluación para tarjetas */
.evaluation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.evaluation-badge .material-symbols-outlined {
  font-size: 16px;
}

.evaluation-badge.result--proceed {
  background: var(--verde-100);
  color: var(--verde-600);
}

.evaluation-badge.result--review {
  background: var(--amarillo-100);
  color: var(--amarillo-600);
}

.evaluation-badge.result--reconsider {
  background: var(--rosa-100);
  color: var(--rosa-600);
}

/* Responsive */
@media (max-width: 600px) {
  .objective-evaluator {
    max-width: 100%;
    margin: var(--space-2);
    max-height: calc(100vh - var(--space-4));
  }

  .breakdown-grid {
    grid-template-columns: 1fr;
  }

  .criterion-header {
    flex-wrap: wrap;
  }

  .evaluator-footer {
    flex-direction: column;
  }

  .evaluator-footer .btn {
    width: 100%;
  }
}

/* ===== MEJORAS KANBAN PARA EVALUACIÓN ===== */

.focus-item__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.horizon-item__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.backlog-item__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Botón evaluar en acciones */
.item-evaluate {
  color: var(--violeta-500);
}

.item-evaluate:hover {
  color: var(--violeta-600);
  background: var(--violeta-50);
}

/* ===== CONEXIÓN RUEDA-VALORES ===== */

/* Áreas vinculadas en tarjeta de valor */
.value-linked-areas {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-100);
}

.linked-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  color: var(--gris-500);
  margin-bottom: var(--space-2);
}

.linked-label .material-symbols-outlined {
  font-size: 14px;
  color: var(--turquesa-500);
}

.linked-areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.linked-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--turquesa-50);
  color: var(--turquesa-700);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
}

.linked-area-tag .material-symbols-outlined {
  font-size: 12px;
}

/* Sugerencias desde la rueda */
.wheel-suggestions {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--violeta-50), var(--turquesa-50));
  border-radius: var(--radius-xl);
  border: 1px solid var(--violeta-100);
}

.suggestions-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.suggestions-header .material-symbols-outlined {
  color: var(--amarillo-500);
  font-size: 28px;
}

.suggestions-header h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--gris-800);
}

.suggestions-intro {
  color: var(--gris-600);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.wheel-suggestions .suggestion-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.suggestion-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.suggestion-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--turquesa-100);
  color: var(--turquesa-600);
  border-radius: var(--radius-md);
  font-size: 24px;
}

.suggestion-header h4 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  color: var(--gris-800);
}

.suggestion-gap {
  font-size: 0.875rem;
  color: var(--gris-500);
}

.suggestion-reflection {
  font-style: italic;
  color: var(--gris-600);
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--turquesa-400);
}

.suggestions-footer {
  text-align: center;
  margin: 0;
}

.suggestions-footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--turquesa-600);
  text-decoration: none;
  font-weight: 500;
}

.suggestions-footer a:hover {
  color: var(--turquesa-700);
  text-decoration: underline;
}

/* Responsive sugerencias */
@media (max-width: 600px) {
  .wheel-suggestions {
    padding: var(--space-4);
  }

  .suggestions-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   HABITS PAGE - LAYOUT 2 COLUMNAS (Similar al Diario)
   ============================================================ */

.habits-page--layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-4);
  min-height: calc(100vh - 200px);
}

.habits-sidebar {
  background: var(--gris-50);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  height: fit-content;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  position: sticky;
  top: var(--space-2);
}

.habits-sidebar__section {
  margin-bottom: var(--space-4);
}

.habits-sidebar__section:last-child {
  margin-bottom: 0;
}

.habits-sidebar__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-md);
  margin: 0 0 var(--space-2) 0;
  color: var(--gris-800);
  font-weight: 600;
}

.habits-sidebar__title .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 1.25rem;
}

.habits-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.habits-sidebar__hint {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  font-style: italic;
  margin: 0 0 var(--space-2) 0;
}

.habits-sidebar__empty {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  margin: 0;
  line-height: 1.5;
}

/* Lista de las 4 Leyes (sidebar compacto) */
.laws-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.law-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.law-item__number {
  width: 24px;
  height: 24px;
  background: var(--turquesa-100);
  color: var(--turquesa-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.law-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.law-item__content strong {
  font-size: var(--font-size-sm);
  color: var(--gris-800);
}

.law-item__content span {
  font-size: var(--font-size-xs);
  color: var(--gris-500);
}

/* Mini lista de actividades atélicas */
.atelic-mini-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.atelic-mini-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--gris-700);
}

.atelic-mini-item .material-symbols-outlined {
  color: var(--turquesa-500);
}

/* Sección de ocio en sidebar */
.habits-sidebar__section--atelic {
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

/* Contenido principal */
.habits-main {
  min-width: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .habits-page--layout {
    grid-template-columns: 1fr;
  }

  .habits-sidebar {
    position: static;
    max-height: none;
    order: 2;
  }

  .habits-main {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   v1.6 - Anticipación de Obstáculos (Daily Setup)
   -------------------------------------------------------------------------- */
.setup-obstacles {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

.setup-obstacles__summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  list-style: none;
  transition: color var(--transition-fast);
}

.setup-obstacles__summary::-webkit-details-marker {
  display: none;
}

.setup-obstacles__summary:hover {
  color: var(--turquesa-600);
}

.setup-obstacles__summary .material-symbols-outlined {
  font-size: 18px;
  color: var(--turquesa-500);
}

.setup-obstacles__optional {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  font-style: italic;
  margin-left: auto;
}

.setup-obstacles__content {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  animation: fadeIn 0.2s ease;
}

/* Responsive: reducir padding en móvil para evitar corte */
@media (max-width: 480px) {
  .setup-obstacles__content {
    padding-left: var(--space-2);
    padding-right: var(--space-1);
  }
}

.setup-obstacles[open] .setup-obstacles__summary {
  color: var(--turquesa-600);
  margin-bottom: var(--space-1);
}

.form-group--compact {
  margin-bottom: var(--space-2);
}

.form-label--sm {
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  margin-bottom: 4px;
  display: block;
}

.form-textarea--sm {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gris-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  resize: none;
  transition: all var(--transition-fast);
}

.form-textarea--sm:focus {
  outline: none;
  border-color: var(--turquesa-500);
  box-shadow: 0 0 0 3px var(--turquesa-100);
}

.form-textarea--sm::placeholder {
  color: var(--gris-400);
}

/* --------------------------------------------------------------------------
   v1.6 - Evening Check-in Modal
   -------------------------------------------------------------------------- */
.modal--evening {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 500px;
  width: 90vw;
}

.modal--evening::backdrop {
  background: rgba(30, 41, 59, 0.85);
}

.evening-content {
  background: linear-gradient(180deg, var(--gris-50), white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}

.evening-header {
  text-align: center;
  margin-bottom: var(--space-3);
  position: relative;
}

.evening-close {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--gris-400);
  background: transparent;
}

.evening-close:hover {
  color: var(--gris-600);
  background: var(--gris-100);
}

.evening-icon {
  font-size: 48px;
  color: var(--tulip-tree-400); /* Warm amber for evening ambiance */
  display: block;
  margin-bottom: var(--space-2);
}

.evening-title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-xl);
  color: var(--gris-800);
  margin: 0 0 var(--space-1) 0;
}

.evening-subtitle {
  color: var(--gris-500);
  font-size: var(--font-size-sm);
}

.evening-form .form-group {
  margin-bottom: var(--space-3);
}

.evening-form .form-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
  color: var(--gris-700);
  margin-bottom: var(--space-1);
}

.evening-form .form-label .material-symbols-outlined {
  font-size: 18px;
  color: var(--tulip-tree-500); /* Warm amber to match evening theme */
}

.evening-form .form-textarea {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--gris-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  resize: vertical;
  min-height: 80px;
  transition: all var(--transition-fast);
}

.evening-form .form-textarea:focus {
  outline: none;
  border-color: var(--tulip-tree-400);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15); /* Warm amber glow */
}

.evening-form .form-textarea::placeholder {
  color: var(--gris-400);
}

.quote--evening {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  background: var(--gris-100);
  border-left: 3px solid var(--gris-400);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--font-size-sm);
}

.quote--evening p {
  color: var(--gris-600);
  margin: 0;
}

.quote--evening cite {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: var(--space-1);
}

.evening-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gris-200);
}

/* Botón trigger en el Dashboard */
.evening-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--gris-700), var(--gris-800));
  border: none;
  border-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.evening-trigger:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.evening-trigger .material-symbols-outlined {
  font-size: 32px;
  color: var(--tulip-tree-400);
}

.evening-trigger__content {
  text-align: left;
}

.evening-trigger__title {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: 2px;
}

.evening-trigger__subtitle {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--gris-300); /* Improved contrast: ~5.5:1 on dark bg */
  opacity: 0.9;
}

/* Responsive Evening */
@media (max-width: 480px) {
  .evening-content {
    padding: var(--space-3);
  }

  .evening-form .form-textarea {
    min-height: 60px;
  }

  .evening-actions {
    flex-direction: column;
  }

  .evening-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   MARK MANSON INTEGRATION
   Estilos para las secciones de filosofía Mark Manson
   ========================================================================== */

/* --- Sugerencias de Hábitos (habits.js) --- */

.habits-suggestions {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.habits-suggestions h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.habits-suggestions .section-description {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  font-style: italic;
}

.suggestion-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.suggestion-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.suggestion-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.suggestion-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--shadow-md);
}

.suggestion-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.suggestion-icon .material-symbols-outlined {
  font-size: 24px;
  color: var(--color-primary);
}

.suggestion-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.suggestion-desc {
  flex-grow: 1;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.suggestion-micro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.suggestion-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.benefit-tag {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-success-subtle);
  color: var(--color-success);
  border-radius: var(--radius-full);
}

/* --- Guía de Valores (values.js) --- */

.values-guide {
  margin-top: var(--space-6);
}

.values-guide__details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.values-guide__details summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.values-guide__details summary::after {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  font-size: 24px;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.values-guide__details[open] summary::after {
  transform: rotate(180deg);
}

.values-guide__details summary:hover {
  background: var(--color-bg-hover);
}

.values-guide__details summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.values-guide__details[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.values-guide__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.values-guide__intro {
  font-style: italic;
  color: var(--color-text-muted);
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.values-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .values-comparison {
    grid-template-columns: 1fr;
  }
}

.values-column {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.values-column--good {
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success);
}

.values-column--bad {
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning);
}

.values-column h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.values-traits {
  margin: 0 0 var(--space-3) var(--space-4);
  padding: 0;
}

.values-traits li {
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
}

.examples-label {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

.values-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.value-tag {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.value-tag--good {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success);
}

.value-tag--bad {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e; /* amber-800 para mejor contraste WCAG */
}

/* --- Triángulo de la Felicidad (life-wheel.js) --- */

.happiness-triangle {
  margin-top: var(--space-6);
}

.happiness-triangle__details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.happiness-triangle__details summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.happiness-triangle__details summary::after {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  font-size: 24px;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.happiness-triangle__details[open] summary::after {
  transform: rotate(180deg);
}

.happiness-triangle__details summary:hover {
  background: var(--color-bg-hover);
}

.happiness-triangle__details summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.happiness-triangle__details[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.happiness-triangle__content {
  padding: var(--space-4);
}

.happiness-triangle__intro {
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.triangle-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.triangle-area {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.triangle-icon {
  font-size: 32px;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.triangle-area h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.triangle-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.triangle-insight {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  padding: var(--space-2);
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
}

/* Responsive: Triángulo de la Felicidad - breakpoints progresivos */
@media (max-width: 768px) {
  .happiness-triangle__content {
    padding: var(--space-3);
  }

  .triangle-areas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .triangle-area {
    padding: var(--space-3);
  }

  .happiness-triangle__intro {
    padding: var(--space-2);
  }
}

@media (max-width: 480px) {
  .happiness-triangle__content {
    padding: var(--space-2);
  }

  .triangle-areas {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .triangle-area {
    padding: var(--space-2);
  }

  .happiness-triangle__intro {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   v1.6 - Voice Capture (Dictado Universal)
   -------------------------------------------------------------------------- */

/* Botón de voz en header */
.btn--voice {
  position: relative;
  transition: all var(--transition-fast);
}

.btn--voice:hover {
  color: var(--turquesa-400) !important;
}

/* Estado: Escuchando (animación pulso) */
.btn--listening {
  color: var(--turquesa-400) !important;
  animation: voice-btn-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-btn-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(6, 182, 212, 0);
  }
}

/* Estado: No soportado */
.btn--voice.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--voice.btn--disabled:hover {
  color: var(--gris-400) !important;
  background: transparent;
}

/* Ocultar en móvil/tablet - usar micrófono del teclado nativo */
@media (max-width: 1024px) {
  #global-voice-btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Global Save Button - Auto-Backup
   -------------------------------------------------------------------------- */
#global-save-btn {
  position: relative;
}

/* Estado: Guardando */
#global-save-btn.saving .material-symbols-outlined {
  animation: spin 1s linear infinite;
}

#global-save-btn.saving .material-symbols-outlined::before {
  content: 'sync';
}

/* Estado: Guardado exitoso */
#global-save-btn.saved {
  color: var(--turquesa-500);
}

#global-save-btn.saved .material-symbols-outlined::before {
  content: 'cloud_done';
}

/* Estado: Sin carpeta vinculada (indicador sutil) */
#global-save-btn.unlinked {
  opacity: 0.7;
}

/* Estado: Error */
#global-save-btn.error {
  color: var(--rosa-500);
}

/* Animación de rotación */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Ocultar en móvil/tablet - File System API no funciona */
@media (max-width: 1024px) {
  #global-save-btn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Voice Capture Modal
   -------------------------------------------------------------------------- */
.voice-capture-modal {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 440px;
  width: 90vw;
}

.voice-capture-modal::backdrop {
  background: rgba(30, 41, 59, 0.85);
}

.voice-capture-content {
  background: linear-gradient(180deg, var(--turquesa-50), white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}

.voice-capture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.voice-capture-header .modal-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-headings);
  font-size: var(--font-size-lg);
  color: var(--gris-800);
  margin: 0;
}

.voice-capture-header .modal-title .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 24px;
}

.voice-capture-close {
  color: var(--gris-400);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.voice-capture-close:hover {
  color: var(--gris-600);
  background: var(--gris-100);
}

/* Estados del micrófono */
.voice-capture-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.voice-capture-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

.voice-capture-state.hidden {
  display: none;
}

/* Botón grande de micrófono */
.voice-capture-mic-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--turquesa-600);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  position: relative;
}

.voice-capture-mic-btn:hover {
  background: var(--turquesa-700);
  transform: scale(1.05);
}

.voice-capture-mic-btn .material-symbols-outlined {
  font-size: 36px;
  color: white;
}

/* Estado: Escuchando */
.voice-capture-mic-btn--listening {
  cursor: default;
  background: var(--turquesa-500);
}

.voice-capture-mic-btn--listening:hover {
  transform: none;
}

/* Animación de pulso */
.voice-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid var(--turquesa-400);
  animation: voice-pulse-ring 1.5s ease-out infinite;
}

@keyframes voice-pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Estado: Deshabilitado */
.voice-capture-mic-btn--disabled {
  background: var(--gris-300);
  cursor: not-allowed;
}

.voice-capture-mic-btn--disabled:hover {
  background: var(--gris-300);
  transform: none;
}

.voice-capture-mic-btn--disabled .material-symbols-outlined {
  color: var(--gris-500);
}

/* Hint y texto */
.voice-capture-hint {
  color: var(--gris-600);
  font-size: var(--font-size-sm);
  text-align: center;
  margin: 0;
}

.voice-capture-hint--error {
  color: var(--rosa-600);
}

/* Texto interim (mientras se habla) */
.voice-capture-interim {
  color: var(--gris-400);
  font-style: italic;
  font-size: var(--font-size-sm);
  text-align: center;
  min-height: 1.5em;
  margin: 0;
  animation: voice-interim-fade 0.5s ease-in-out infinite alternate;
}

@keyframes voice-interim-fade {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* Área de texto */
.voice-capture-text-area {
  width: 100%;
}

.voice-capture-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--gris-600);
  margin-bottom: var(--space-1);
}

.voice-capture-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-2);
  border: 1px solid var(--gris-300);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.voice-capture-textarea:focus {
  outline: none;
  border-color: var(--turquesa-500);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.voice-capture-textarea::placeholder {
  color: var(--gris-400);
}

/* Footer con botones */
.voice-capture-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-200);
}

/* Responsive */
@media (max-width: 480px) {
  .voice-capture-content {
    padding: var(--space-3);
  }

  .voice-capture-mic-btn {
    width: 70px;
    height: 70px;
  }

  .voice-capture-mic-btn .material-symbols-outlined {
    font-size: 32px;
  }

  .voice-capture-footer {
    flex-direction: column;
  }

  .voice-capture-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Pendientes - Límite Suave (10+ items)
   -------------------------------------------------------------------------- */

/* Badge contador con warning */
.backlog-count--warning {
  background: var(--tulip-tree-200) !important;
  color: var(--gris-800) !important;
}

/* Aviso amable */
.backlog-soft-limit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  background: var(--tulip-tree-50);
  border: 1px solid var(--tulip-tree-200);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--tulip-tree-500);
}

.backlog-soft-limit .material-symbols-outlined {
  color: var(--tulip-tree-500);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.backlog-soft-limit p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gris-700);
  line-height: 1.4;
}

.backlog-process-link {
  color: var(--turquesa-600);
  font-weight: 500;
  text-decoration: none;
}

.backlog-process-link:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINT 360px - Móviles muy pequeños (iPhone SE, Galaxy A)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  /* Contenedor principal - mínimo indispensable */
  .app-main {
    padding: 6px;
  }

  /* Header - compacto */
  .app-header {
    padding: 6px 8px;
  }

  /* Dashboard */
  .dashboard__section {
    padding: 12px;
  }

  /* Modales - pantalla completa */
  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    margin: 0;
  }

  .modal-content {
    padding: 12px;
  }

  /* Kanban - máximo aprovechamiento */
  .kanban-sections {
    padding: 4px;
  }

  .kanban-column {
    padding: 4px;
  }

  /* Tarjetas */
  .kanban-card,
  .habit-card,
  .project-card,
  .value-card,
  .journal-entry,
  .achievement-card {
    padding: 12px;
  }

  /* Tipografía reducida */
  .section-title {
    font-size: 1.1rem;
  }

  .dashboard__title {
    font-size: 1.25rem;
  }

  /* Footer compacto */
  .app-footer {
    padding: 12px;
  }

  /* Stats */
  .stats-grid {
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }
}

/* Preview de tareas en tarjeta de proyecto */
.project-card__tasks {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.project-card__task {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--gris-600);
  line-height: 1.3;
}

.project-card__task .material-symbols-outlined {
  flex-shrink: 0;
  color: var(--gris-400);
  margin-top: 1px;
}

.project-card__task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.project-card__task--more {
  color: var(--gris-400);
  font-style: italic;
}

/* Próxima Acción GTD en tarjeta de proyecto */
.project-card__next-action {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: linear-gradient(135deg, var(--turquesa-50), var(--turquesa-100));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--turquesa-500);
  margin-top: var(--space-2);
}

.project-card__next-action .material-symbols-outlined {
  color: var(--turquesa-600);
  font-size: 16px;
}

.project-card__next-action .next-action-text {
  font-size: var(--font-size-sm);
  color: var(--turquesa-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Próxima Acción en vista detalle de proyecto */
.task-item--next-action {
  background: var(--turquesa-50);
  border-left: 3px solid var(--turquesa-500);
  padding-left: var(--space-2);
  border-radius: var(--radius-sm);
}

.task-item--next-action .material-symbols-outlined {
  color: var(--amarillo-500);
}

.set-next-action {
  flex-shrink: 0;
}

.set-next-action .material-symbols-outlined {
  color: var(--gris-400);
  transition: color 0.2s ease;
}

.set-next-action:hover .material-symbols-outlined {
  color: var(--amarillo-500);
}

.task-item--next-action .set-next-action .material-symbols-outlined {
  color: var(--amarillo-500);
}

.task-group__hint {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
  font-weight: 400;
  margin-left: var(--space-2);
}


/* ==========================================================================
   MEJORAS UX v1.7 - Auditoría Diciembre 2025
   ========================================================================== */

/* --------------------------------------------------------------------------
   Estados Vacíos Mejorados - Mayor Prominencia Visual
   -------------------------------------------------------------------------- */

/* Sobrescribir círculo decorativo con mejor gradiente */
.empty-state::before {
  background: linear-gradient(135deg, var(--gris-200) 0%, var(--gris-300) 100%) !important;
  width: 56px !important;
  height: 56px !important;
  opacity: 0.75;
}

/* Iconos Material Symbols en estados vacíos */
.empty-state > .material-symbols-outlined:first-child,
.empty-state .empty-state__icon-material {
  font-size: 48px !important;
  color: var(--turquesa-400) !important;
  display: block;
  margin: 0 auto var(--space-2);
  opacity: 0.7;
}

/* Ocultar círculo cuando hay icono */
.empty-state:has(> .material-symbols-outlined:first-child)::before,
.empty-state:has(.empty-state__icon-material)::before {
  display: none !important;
}

/* Estados vacíos del Dashboard - Más acogedores */
.dashboard__habit .empty-state,
.dashboard__events .empty-state {
  border-color: var(--turquesa-200);
  background: linear-gradient(135deg, white 0%, var(--turquesa-50) 100%);
}

/* Empty state para logros */
.dashboard__achievements .empty-state {
  border-color: var(--tulip-tree-200);
  background: linear-gradient(135deg, white 0%, var(--tulip-tree-50) 100%);
}


/* Badge de límite para página de valores y otros módulos */
.page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.page-limit-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--turquesa-100);
  color: var(--turquesa-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-body);
}

.page-limit-badge--full {
  background: var(--tulip-tree-200);
  color: var(--gris-800);
}


/* Sublabels para chips del Daily Setup - v1.7 */
.selector-chip__sublabel {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gris-500);
  margin-top: 2px;
  font-weight: 400;
  opacity: 0.85;
}

.selector-chip[aria-pressed="true"] .selector-chip__sublabel {
  color: var(--turquesa-200);
}


/* ==========================================================================
   REVISIÓN SEMANAL GTD
   Modal wizard y recordatorio en dashboard
   ========================================================================== */

/* Modal de revisión */
.modal--review {
  max-width: 650px;
}

.review-content {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.review-header {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gris-200);
}

.review-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--turquesa-600);
}

.review-subtitle {
  margin: var(--space-2) 0 0;
  color: var(--gris-500);
}

/* Progress indicator */
.review-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gris-200);
}

.review-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--gris-400);
  transition: all 0.2s ease;
}

.review-step:hover {
  background: var(--gris-100);
}

.review-step--active {
  color: var(--turquesa-600);
  background: var(--turquesa-50);
}

.review-step--completed {
  color: var(--verde-600);
}

.review-step__title {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Body */
.review-body {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.review-step-content h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--gris-800);
}

.review-hint {
  color: var(--gris-500);
  margin-bottom: var(--space-3);
}

.review-empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--gris-500);
}

.review-empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--verde-500);
  margin-bottom: var(--space-2);
}

.review-empty-text {
  color: var(--gris-400);
  font-style: italic;
}

/* Lista de items */
.review-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
}

.review-item__text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-action-select {
  padding: 4px 8px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* Horizontes */
.review-horizons {
  display: grid;
  gap: var(--space-4);
}

.review-horizon h4 {
  margin: 0 0 var(--space-2);
  color: var(--gris-700);
}

.review-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
}

.review-check-item label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.review-check-hint {
  font-size: var(--font-size-xs);
  color: var(--gris-400);
}

/* Proyectos */
.review-projects-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-project {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
}

.review-project--ok {
  background: var(--verde-50);
}

.review-project--needs-action {
  background: var(--amarillo-50);
  border: 1px solid var(--amarillo-200);
}

.review-project__name {
  flex: 1;
}

.review-project__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--gris-500);
}

.review-project__status .icon-success {
  color: var(--verde-500);
}

.review-project__status .icon-warning {
  color: var(--amarillo-600);
}

/* Prioridades */
.review-priorities-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-priority-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gris-50);
  border-radius: var(--radius-sm);
}

.review-priority-item .material-symbols-outlined {
  color: var(--turquesa-500);
}

.review-priority-more {
  color: var(--gris-400);
  font-style: italic;
  padding: var(--space-2);
}

/* Mensaje de completado */
.review-complete-message {
  text-align: center;
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: linear-gradient(135deg, var(--verde-50), var(--turquesa-50));
  border-radius: var(--radius-md);
}

.review-complete-message .material-symbols-outlined {
  font-size: 48px;
  color: var(--verde-500);
}

.review-complete-hint {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  margin-top: var(--space-1);
}

/* Footer */
.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gris-200);
}

.review-footer__right {
  display: flex;
  gap: var(--space-2);
}

/* Recordatorio en Dashboard */
.dashboard__review-reminder {
  background: linear-gradient(135deg, var(--turquesa-50) 0%, var(--amarillo-50) 100%);
}

.review-reminder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--turquesa-200);
  max-width: 320px;
  margin: 0 auto;
}

.review-reminder__icon {
  font-size: 48px;
  color: var(--turquesa-500);
}

.review-reminder__title {
  font-size: var(--font-size-lg);
  color: var(--gris-800);
}

.review-reminder__text {
  font-size: var(--font-size-sm);
  color: var(--gris-500);
  margin: 0;
  line-height: 1.5;
}

.review-reminder__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}

.review-reminder__actions .btn--primary {
  width: 100%;
}

.review-reminder__actions .btn--ghost {
  color: var(--gris-400);
}

/* Responsive */
@media (max-width: 600px) {
  .review-progress {
    gap: 0;
  }

  .review-step {
    padding: var(--space-1) var(--space-2);
  }

  .review-step__title {
    display: none;
  }
}