:root {
  /* SanaMente visual system */
  --sm-green: #036f42;
  --sm-yellow: #feeb73;
  --sm-dark: #01331e;
  --sm-ink: #01331e;
  --sm-muted: #425548;
  --sm-bg: #fffdf4;
  --sm-soft: #fff7ba;
  --sm-card: #ffffff;
  --sm-line: rgba(1,51,30,.18);
  --sm-shadow: 0 14px 34px rgba(1,51,30,.08);

  /* Legacy variable names kept for compatibility */
  --azul: #036f42;
  --azul-dark: #01331e;
  --azul-light: #eaf6ef;
  --amarillo: #feeb73;
  --verde: #036f42;
  --rojo: #b42318;
  --texto: #01331e;
  --texto-suave: #425548;
  --fondo: #fffdf4;
  --blanco: #ffffff;
  --borde: rgba(1,51,30,.18);
  --radio: 14px;
  --sombra: 0 14px 34px rgba(1,51,30,.08);
  --fuente: 'Google Sans Flex','Google Sans Text','Google Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-tit: 'Google Sans','Google Sans Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-h1: 'Gelasio', Georgia, serif;

  --color-primario: #036f42;
  --color-secundario: #feeb73;
  --color-oscuro: #01331e;
  --color-texto: #01331e;
  --color-texto-suave: #425548;
  --color-fondo: #fffdf4;
  --color-fondo-card: #ffffff;
  --color-borde: rgba(1,51,30,.18);
}
.hidden { display:none !important; }
.text-muted { color: var(--texto-suave); }
.text-sm { font-size: .875rem; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.5rem; }
.flex { display:flex; } .flex-wrap { flex-wrap:wrap; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.section-intro { margin-bottom: 1rem; }
.section-intro h1, .section-intro h2 { font-family: var(--fuente-tit); color: var(--texto); margin-bottom: .35rem; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:.2rem .55rem; font-size:.78rem; font-weight:700; }
.badge-verde { background: rgba(3,111,66,.12); color: #036f42; }
.badge-azul { background: rgba(3,111,66,.12); color: var(--azul); }
.badge-amarillo { background: rgba(254,235,115,.42); color: #01331e; }
.badge-rojo { background: rgba(217,64,64,.12); color: #9e2929; }
.badge-gris { background: #eef1f6; color: #586174; }
.empty-state { text-align:center; padding:2rem; color:var(--texto-suave); }
.empty-state-icono { font-size:2rem; margin-bottom:.5rem; }
.panel-link-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.panel-link {
  display:block; background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow: var(--sombra); padding:1rem 1.1rem; color:var(--texto); text-decoration:none;
}
.panel-link:hover { text-decoration:none; border-color:var(--azul); transform: translateY(-1px); }
.panel-link strong { display:block; margin-bottom:.3rem; font-size:1rem; }
.error-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:#fffdf4; font-family:var(--fuente); }
.error-card { background:#fff; padding:2rem; max-width:460px; width:100%; border-radius:16px; box-shadow:var(--sombra); text-align:center; }
.error-code { font-size:3rem; line-height:1; color:var(--azul); font-weight:800; margin-bottom:.75rem; font-family:var(--fuente-tit); }


/* SanaMente — typography and brand consistency */
h1, .section-intro h1, .error-code {
  font-family: var(--fuente-h1);
  letter-spacing: -0.025em;
}
h2, h3, h4, h5, h6, .section-intro h2, .panel-link strong {
  font-family: var(--fuente-tit);
}
.badge-verde, .badge-azul { background: rgba(3,111,66,.10); color: var(--sm-green); }
.badge-amarillo { background: rgba(254,235,115,.50); color: var(--sm-dark); }
.panel-link:hover { border-color: var(--sm-green); }
.error-page { background: var(--sm-bg); }
.error-card { border: 1px solid var(--sm-line); }
.error-code { color: var(--sm-green); }