/* N&H LONGEVITY v3.15 - sistema visual basado en el manual de identidad 2026 */
:root {
  color-scheme: light;
  --nh-brand: #00B08A;
  --nh-brand-rgb: 0, 176, 138;
  --nh-brand-dark: #006B55;
  --nh-brand-deep: #004E3F;
  --nh-brand-soft: #E6F7F3;
  --nh-brand-pale: #F3FBF9;
  --nh-white: #FFFFFF;
  --nh-ink: #173B32;
  --nh-muted: #58726B;
  --nh-border: #D2E5DF;
  --nh-canvas: #F3F7F6;
  --nh-danger: #A53A43;
  --nh-warning: #94600B;
  --nh-info: #315F7A;
  --nh-font: "Circular Std", "Avenir Next", "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --nh-focus: rgba(var(--nh-brand-rgb), .34);
  --nh-shadow-sm: 0 6px 18px rgba(0, 78, 63, .06);
  --nh-shadow: 0 16px 42px rgba(0, 78, 63, .10);

  /* Compatibilidad con los nombres usados por los módulos existentes. */
  --nh: var(--nh-brand);
  --nh-light: #64CDB7;
  --nh-dark: var(--nh-brand-dark);
  --nh-soft: var(--nh-brand-soft);
  --cyan: var(--nh-brand);
  --cyan-soft: var(--nh-brand-soft);
  --teal: var(--nh-brand-dark);
  --teal-dark: var(--nh-brand-deep);
  --mint: var(--nh-brand-soft);
  --navy: var(--nh-brand-deep);
  --navy-2: var(--nh-brand-dark);
  --ink: var(--nh-ink);
  --muted: var(--nh-muted);
  --line: var(--nh-border);
  --surface: var(--nh-white);
  --canvas: var(--nh-canvas);
  --green: var(--nh-brand-dark);
  --green-soft: var(--nh-brand-soft);
  --shadow: var(--nh-shadow-sm);
  --nh-ui-shadow: var(--nh-shadow-sm);
  --nh-ui-shadow-raised: var(--nh-shadow);
}

html, body, button, input, select, textarea, dialog {
  font-family: var(--nh-font);
}

body {
  color: var(--nh-ink);
  background: var(--nh-canvas);
}

::selection {
  color: var(--nh-brand-deep);
  background: #BFEADF;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--nh-focus);
  outline-offset: 3px;
}

input:not([type="checkbox"], [type="radio"], [type="range"]),
select,
textarea {
  border-color: #B9D1CA;
  color: var(--nh-ink);
  background: var(--nh-white);
}

input:not([type="checkbox"], [type="radio"], [type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--nh-brand);
  box-shadow: 0 0 0 3px var(--nh-focus);
}

input[type="checkbox"], input[type="radio"], input[type="range"] {
  accent-color: var(--nh-brand-dark);
}

.button,
.button.primary,
button.server-2fa-action,
.server-login-card button[type="submit"] {
  border-color: var(--nh-brand-dark);
  color: var(--nh-white);
  background: var(--nh-brand-dark);
  box-shadow: none;
}

.button:hover,
.button.primary:hover,
button.server-2fa-action:hover,
.server-login-card button[type="submit"]:hover {
  border-color: var(--nh-brand-deep);
  color: var(--nh-white);
  background: var(--nh-brand-deep);
}

.button.secondary,
.button.ghost {
  border: 1px solid #AFCFC6;
  color: var(--nh-brand-deep);
  background: var(--nh-white);
}

.button.secondary:hover,
.button.ghost:hover {
  border-color: var(--nh-brand);
  color: var(--nh-brand-deep);
  background: var(--nh-brand-soft);
}

.card,
.auth,
.record,
dialog,
.dialog-card,
.clinical-card,
.visual-card,
.health-metric {
  border-color: var(--nh-border);
  background-color: var(--nh-white);
  box-shadow: var(--nh-shadow-sm);
}

/* Aplicación profesional */
.welcome-screen {
  position: relative;
  isolation: isolate;
  background: var(--nh-brand);
}

.welcome-screen::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(68vw, 880px);
  aspect-ratio: 1;
  right: -16vw;
  top: -32vw;
  border: clamp(60px, 9vw, 130px) solid rgba(255,255,255,.10);
  border-radius: 50%;
}

.welcome-logo {
  width: min(520px, 86vw);
  filter: none;
}

.welcome-heading h1,
.welcome-heading > p:last-child,
.welcome-kicker,
.welcome-privacy {
  color: #002B23;
}

.welcome-kicker { opacity: .88; }
.welcome-heading > p:last-child, .welcome-privacy { opacity: .82; }

.profile-card {
  border-color: rgba(255,255,255,.64);
  border-radius: 18px;
  background: var(--nh-white);
  box-shadow: var(--nh-shadow);
}

.profile-card:hover {
  border-color: var(--nh-brand-deep);
  box-shadow: 0 22px 52px rgba(0, 78, 63, .22);
}

.profile-avatar {
  color: var(--nh-white);
  background: var(--nh-brand-dark);
}

.app-shell .sidebar {
  border-right: 1px solid var(--nh-border);
  color: var(--nh-ink);
  background: var(--nh-white);
  box-shadow: 10px 0 30px rgba(0, 78, 63, .04);
}

.sidebar-brand-logo {
  display: block;
  width: min(188px, 100%);
  height: auto;
  margin: 3px auto 7px;
  object-fit: contain;
}

.app-shell .brand.brand-manual {
  display: block;
  min-height: 70px;
  padding: 4px 7px 20px;
}

.app-shell .nav-button {
  color: #3E5D55;
  background: transparent;
}

.app-shell .nav-button:hover {
  color: var(--nh-brand-deep);
  background: var(--nh-brand-pale);
}

.app-shell .nav-button.active {
  color: var(--nh-brand-deep);
  background: var(--nh-brand-soft);
  box-shadow: inset 3px 0 0 var(--nh-brand);
}

.app-shell .nav-index,
.app-shell .nav-button.active .nav-index {
  color: var(--nh-brand-deep);
  background: rgba(var(--nh-brand-rgb), .11);
}

.app-shell .privacy-note {
  border-top-color: var(--nh-border);
  color: var(--nh-muted);
}

.app-shell .privacy-note strong { color: var(--nh-brand-deep); }
.app-shell .privacy-dot { background: var(--nh-brand); }

.app-shell .topbar {
  border-bottom: 1px solid var(--nh-border);
  background: rgba(255,255,255,.97);
}

.page-heading .eyebrow,
.module-kicker,
.eyebrow,
.report-eyebrow {
  color: var(--nh-brand-dark);
}

.metric::before,
.lab-category-header > span,
.report-section-heading > span,
.section-icon {
  background: var(--nh-brand);
}

.progress-track span,
.bar i,
.nutrition-day-progress b {
  background: var(--nh-brand);
}

/* Informes y consentimientos */
.report-title {
  color: var(--nh-white);
  background: var(--nh-brand);
}

.report-title .report-eyebrow,
.report-title h2,
.report-title p,
.report-title .report-doctor span,
.report-title .report-doctor strong {
  color: #002B23;
}

.report-title .report-eyebrow,
.report-title p,
.report-title .report-doctor span { opacity: .86; }

.report-logo,
.consent-brand img,
.welcome-logo,
.brand-logo-horizontal,
.patient-login-brand img,
.patient-header-logo,
.server-login-logo,
.nutrition-brand-logo,
.sidebar-brand-logo {
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.consent-paper {
  border-top: 7px solid var(--nh-brand);
  color: var(--nh-ink);
}

.consent-brand span,
.consent-paper h2 { color: var(--nh-brand-dark); }

/* Portales de paciente y administración */
.auth {
  border-top: 5px solid var(--nh-brand);
}

.patient-login-brand h1,
.brand h1,
.legal-card h2 { color: var(--nh-brand-deep); }

.patient-hero {
  color: var(--nh-white);
  background: var(--nh-brand-dark);
  box-shadow: var(--nh-shadow);
}

.patient-hero p,
.eyebrow-light,
.doctor-chip span,
.doctor-chip small { color: rgba(255,255,255,.84); }

.doctor-chip {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.10);
}

.patient-primary-module {
  border-color: #AEDFD3;
  background: linear-gradient(145deg, var(--nh-white), var(--nh-brand-pale));
}

.health-metric::after { background: var(--nh-brand-soft); }
.metric-value, .plan-block h4, .nutrition-selected-food strong { color: var(--nh-brand-deep); }

.patient-app-nav {
  border-top-color: var(--nh-border);
  background: rgba(255,255,255,.98);
}

.patient-app-nav a.active {
  color: var(--nh-brand-deep);
  background: var(--nh-brand-soft);
}

.portal-search,
.profile-toolbar,
.nutrition-entry-form {
  border-color: var(--nh-border);
  background: var(--nh-brand-pale);
}

.portal-legal-links a,
.patient-footer a,
.legal-back,
.legal-card a:not(.button),
.text-link,
.text-button { color: var(--nh-brand-dark); }

/* Módulo Nutrición */
.nutrition-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nutrition-brand-logo {
  display: block;
  width: clamp(190px, 26vw, 286px);
  height: auto;
}

.nutrition-brand-subtitle {
  padding-left: 18px;
  border-left: 1px solid var(--nh-border);
  color: var(--nh-muted);
  font-size: 14px;
  font-weight: 700;
}

.energy-card {
  color: var(--nh-white);
  background: var(--nh-brand-deep);
}

.macro,
.summary,
.week-day.active { border-color: var(--nh-border); }
.macro { border-top-color: var(--nh-brand); }
.week-day.active, .food-option:hover, .food-option.selected { background: var(--nh-brand-soft); }

.tabs button[aria-selected="true"] {
  border-bottom-color: var(--nh-brand);
  color: var(--nh-brand-deep);
}

.toast, .server-sync { background: var(--nh-brand-deep); }

/* La marca conserva siempre su zona de respeto y proporciones. */
.brand-clearspace {
  padding: clamp(8px, 1.2vw, 16px);
}

@media (max-width: 740px) {
  .nutrition-brand { align-items: flex-start; flex-direction: column; gap: 9px; }
  .nutrition-brand-subtitle { padding-left: 0; border-left: 0; }
  .nutrition-brand-logo { width: min(250px, 76vw); }
}

@media (prefers-contrast: more) {
  :root { --nh-border: #8BB9AD; --nh-muted: #3E5B53; }
  .card, .auth, .record, input, select, textarea { border-width: 2px; }
}

@media print {
  :root { --nh-shadow-sm: none; --nh-shadow: none; }
  body { color: #111; background: #fff; }
  .report-title { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-logo, .consent-brand img { max-width: 180px; }
}