/* N&H LONGEVITY 3.6 · sistema visual compacto y profesional */
:root {
  --nh-ui-radius: 10px;
  --nh-ui-radius-lg: 14px;
  --nh-ui-shadow: 0 6px 22px rgba(17, 107, 92, .075);
  --nh-ui-shadow-raised: 0 14px 38px rgba(17, 107, 92, .14);
}

button, a, input, select, textarea { transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(82, 196, 172, .38);
  outline-offset: 2px;
}

/* Aplicación profesional */
.app-shell { grid-template-columns: 228px minmax(0, 1fr); }
.app-shell .sidebar { padding: 18px 12px; }
.app-shell .brand { gap: 10px; padding: 0 6px 18px; }
.app-shell .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; }
.app-shell .brand strong { font-size: .94rem; }
.app-shell .brand small { font-size: .7rem; }
.app-shell #main-nav { gap: 3px; }
.app-shell .nav-button { min-height: 38px; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: .84rem; font-weight: 650; }
.app-shell .nav-index { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: rgba(255,255,255,.055); color: #a9bac7; font-size: .62rem; font-weight: 800; }
.app-shell .nav-button.active .nav-index { background: rgba(23,166,160,.2); color: #8ee5df; }
.app-shell .privacy-note { padding: 12px 8px 0; }
.app-shell .topbar { min-height: 64px; gap: 14px; padding: 9px 22px; }
.app-shell .workspace-switchers { gap: 12px; }
.app-shell .practitioner-switcher, .app-shell .patient-switcher { gap: 7px; }
.app-shell .practitioner-switcher select { min-width: 224px; }
.app-shell .patient-switcher select { min-width: 190px; }
.app-shell #app-content { padding: 26px; }
.app-shell .page-heading { gap: 18px; margin-bottom: 19px; }
.app-shell .page-heading h1 { font-size: clamp(1.55rem, 2vw, 2.05rem); }
.app-shell .lead { margin-top: 6px; font-size: .9rem; }
.app-shell .button { min-height: 38px; padding: 8px 13px; border-radius: 8px; font-size: .84rem; }
.app-shell .button.compact { min-height: 32px; padding: 5px 9px; border-radius: 7px; font-size: .76rem; }
.app-shell select, .app-shell input, .app-shell textarea { min-height: 39px; padding: 8px 10px; border-radius: 8px; }
.app-shell textarea { min-height: 88px; }
.app-shell .card { border-radius: 12px; box-shadow: var(--nh-ui-shadow); }
.app-shell .card-header { min-height: 52px; gap: 16px; padding: 14px 17px; }
.app-shell .card-body { padding: 17px; }

.nutrition-optin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:28px}
.nutrition-optin h2{margin:12px 0 8px}.nutrition-optin p{max-width:760px;color:#526d64}
.service-status{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.service-status.inactive{background:#eef2f1;color:#536863}.service-status.active{background:#d9f5ea;color:#0b6f58}
.nutrition-prefill{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}
.nutrition-prefill>div{display:grid;gap:3px;padding:12px 14px;border:1px solid #dbe8e3;border-radius:10px;background:#f8fbfa}
.nutrition-prefill span{font-size:12px;color:#647a73}.nutrition-prefill strong{font-size:15px;color:#173f35}
.nutrition-statusbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:14px;padding:13px 16px;border:1px solid #cfe5dc;border-radius:12px;background:#f1faf6;color:#234b40}
.nutrition-statusbar>div{display:flex;align-items:center;gap:12px}.nutrition-statusbar small{color:#5d746d}
.nutrition-frame{display:block;width:100%;height:min(1220px,calc(100vh - 160px));min-height:760px;border:1px solid #d5e3de;border-radius:16px;background:#f6faf8;box-shadow:0 12px 34px rgba(19,62,50,.08)}
.nutrition-professional-card{margin:0 0 18px}.nutrition-professional-card .card-header p{margin:4px 0 0}.professional-nutrition-heading{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:14px}.professional-nutrition-heading>span{color:#5d746d;font-size:12px;font-weight:800}.professional-nutrition-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.professional-nutrition-metrics>div{display:grid;gap:4px;padding:13px;border:1px solid #d8e8e2;border-radius:11px;background:#f8fcfa}.professional-nutrition-metrics span,.professional-nutrition-metrics small{color:#637a72;font-size:11px}.professional-nutrition-metrics strong{color:#174c3e;font-size:18px}.professional-nutrition-metrics i{height:6px;overflow:hidden;border-radius:99px;background:#dcebe6}.professional-nutrition-metrics b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#17b091,#40cfb7)}.nutrition-subheading{margin:22px 0 10px}.professional-nutrition-days{height:155px;display:flex;align-items:end;gap:7px;padding:15px 12px 0;border:1px solid #dce9e5;border-radius:12px;background:linear-gradient(#fbfdfc,#f3faf7)}.professional-nutrition-days>div{height:100%;flex:1;display:flex;align-items:end;justify-content:end;flex-direction:column;gap:5px}.professional-nutrition-days i{width:100%;min-width:7px;border-radius:5px 5px 2px 2px;background:linear-gradient(#40cfb7,#126d5e)}.professional-nutrition-days span{align-self:center;color:#6a7f78;font-size:9px;white-space:nowrap}.review-chip{border:0;border-radius:999px;padding:6px 10px;font-weight:850;font-size:11px}.review-chip.reviewed{background:#e4f5ed;color:#26704e}.review-chip.pending{background:#fff1d1;color:#8a5a0a}.nutrition-professional-card table{min-width:760px;margin-top:18px}
@media(max-width:900px){.nutrition-optin{grid-template-columns:1fr}.nutrition-prefill{grid-template-columns:repeat(2,minmax(0,1fr))}.nutrition-statusbar{align-items:flex-start;flex-direction:column}.nutrition-frame{min-height:900px;height:calc(100vh - 130px)}}
@media(max-width:760px){.professional-nutrition-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.professional-nutrition-heading{align-items:flex-start;flex-direction:column}.professional-nutrition-days{gap:3px}.professional-nutrition-days span{font-size:8px}}
.app-shell .form-card, .app-shell .history-panel, .app-shell .longitudinal-card { margin-bottom: 15px; }
.app-shell .form-grid { gap: 14px; }
.app-shell .form-actions { margin-top: 16px; padding-top: 15px; }
.app-shell .metrics { gap: 11px; margin-bottom: 15px; }
.app-shell .metric { min-height: 108px; padding: 15px; }
.app-shell .metric::after { width: 54px; height: 54px; right: -17px; top: -18px; }
.app-shell .metric-value { margin-top: 9px; font-size: 1.25rem; }
.app-shell .metric-note { margin-top: 5px; }
.app-shell .dashboard-grid { gap: 15px; }
.app-shell .history-panel { border-radius: 12px; box-shadow: var(--nh-ui-shadow); }
.app-shell .history-toolbar { gap: 14px; padding: 14px 17px; }
.app-shell .history-list { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; padding: 12px 17px 16px; }
.app-shell .history-entry { min-height: 68px; gap: 3px; padding: 10px 11px; border-radius: 9px; }
.app-shell .selected-record-note { margin-bottom: 15px; padding: 10px 13px; }
.app-shell .trend-chart { height: 210px; }
.app-shell .record-detail-grid { gap: 9px; }
.app-shell .record-detail { padding: 10px; border-radius: 9px; }
.app-shell .lab-category-grid { gap: 13px; }
.app-shell .lab-category { padding: 16px; border-radius: 11px; }
.app-shell .lab-category-header { margin-bottom: 13px; padding-bottom: 11px; }
.app-shell .lab-category-header > span { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; font-size: .65rem; }
.app-shell .lab-analyte { padding: 10px; border-radius: 9px; }
.app-shell .patient-search { gap: 9px; padding: 12px 17px; }
.app-shell .patient-search input { padding: 8px 10px; }
.app-shell .patient-actions { min-width: 205px; gap: 5px; }
.app-shell .section-tab { padding: 7px 10px; border-radius: 7px; }
.app-shell table thead th { position: sticky; top: 0; z-index: 1; background: #f7fafb; box-shadow: inset 0 -1px 0 var(--line); }
.app-shell th, .app-shell td { padding: 10px 11px; }
.app-shell tbody tr { transition: background-color .14s ease; }
.app-shell tbody tr:hover { background: #f7fbfb; }
.app-shell .professional-consultations { gap: 12px; }
.app-shell .professional-consultation { padding: 16px; border-radius: 11px; box-shadow: var(--nh-ui-shadow); }
.app-shell .professional-consultation h3 { margin: 6px 0; }
.app-shell .professional-consultation-message { padding: 11px; border-radius: 8px; }
.app-shell .professional-consultation-editor { grid-template-columns: minmax(0,1fr) 170px auto; gap: 10px; margin-top: 13px; }
.app-shell .professional-consultation-editor textarea { min-height: 78px; }
.app-shell .consultation-badge, .app-shell .review-badge, .app-shell .lab-status { padding: 4px 8px; font-size: .68rem; }

/* Portal del paciente y gestión del portal */
body:not(:has(.app-shell)) { color: #163C35; }
.shell { width: min(1220px, calc(100% - 32px)); padding: 20px 0 42px; }
.topbar { gap: 12px; margin-bottom: 18px; }
.brand { gap: 10px; }
.brand-logo-horizontal { display: block; width: 205px; max-width: 48vw; height: auto; flex: 0 0 auto; object-fit: contain; background: transparent; }
.auth-brand:has(.brand-logo-horizontal) { align-items: flex-start; flex-direction: column; gap: 15px; }
.auth-brand .brand-logo-horizontal { width: min(300px, 86%); max-width: none; }
.patient-topbar .brand-logo-horizontal { width: 190px; max-width: 42vw; }
.patient-login-brand { display: grid; justify-items: center; gap: 8px; text-align: center; }
.patient-login-brand img { display: block; width: min(340px, 92%); height: auto; margin: 0 auto 10px; object-fit: contain; background: transparent; }
.patient-login-brand h1 { margin: 0; color: #006B55; font-size: 1.7rem; }
.patient-login-brand p { max-width: 330px; margin: 0; color: #4f6b63; font-size: .88rem; line-height: 1.5; }
.patient-login-intro { max-width: 390px; margin: 22px auto 10px; text-align: center; line-height: 1.55; }
.patient-header-brand { min-width: 0; padding: 0; }
.patient-header-logo { display: block; width: 185px; max-width: 36vw; height: auto; object-fit: contain; background: transparent; }
.mark { width: 38px; height: 38px; border-radius: 10px; font-size: .82rem; }
.brand h1 { font-size: 18px; }
.brand p { font-size: 12px; }
.actions { gap: 7px; }
.button { min-height: 38px; padding: 8px 13px; border-radius: 8px; font-size: .82rem; }
.grid { gap: 14px; }
.card { padding: 18px; border-radius: var(--nh-ui-radius-lg); box-shadow: var(--nh-ui-shadow); }
.auth { margin: 7vh auto; padding: 26px; border: 1px solid #D5E6E1; border-top: 4px solid #00B08A; border-radius: 18px; box-shadow: var(--nh-ui-shadow-raised); }
.auth h1 { font-size: 1.65rem; }
.auth-intro { margin: 19px 0 7px; }
.field { gap: 5px; margin: 13px 0; font-size: .86rem; }
.field input, .field textarea, .field select { min-height: 40px; padding: 9px 10px; border-radius: 8px; }
.field textarea { min-height: 96px; }
.security-note { margin-top: 19px; padding: 11px 12px; border-radius: 9px; }
.security-icon { position: relative; width: 17px; height: 14px; flex: 0 0 17px; margin-top: 3px; border: 2px solid #53737d; border-radius: 3px; }
.security-icon::before { content: ""; position: absolute; left: 3px; top: -9px; width: 7px; height: 8px; border: 2px solid #53737d; border-bottom: 0; border-radius: 7px 7px 0 0; }
.dialog-card { padding: 20px; border-radius: 16px; }
.icon-button { width: 32px; height: 32px; border-radius: 7px; font-size: 17px; }
.record { padding: 12px; border-radius: 10px; }
th, td { padding: 10px 9px; }
thead th { position: sticky; top: 0; z-index: 1; background: #f8fbfb; }
tbody tr:hover { background: #f8fbfb; }
.profile-entry { top: 18px; right: 20px; gap: 8px; padding: 8px 12px; font-size: 12px; }
.profile-entry strong { width: 20px; height: 20px; font-size: 12px; }
.patient-shell { width: min(1240px, calc(100% - 32px)); }
.patient-topbar { margin-bottom: 15px; }
.patient-hero { gap: 20px; padding: 24px; border-radius: 18px; background: linear-gradient(120deg,#006B55,#00866A 58%,#00B08A); box-shadow: var(--nh-ui-shadow-raised); }
.patient-hero h2 { font-size: clamp(26px, 4vw, 36px); }
.doctor-chip { min-width: 215px; padding: 11px 13px; border-radius: 11px; }
.metric-grid { gap: 10px; margin: 14px 0; }
.health-metric { padding: 14px; border-radius: 12px; box-shadow: var(--nh-ui-shadow); }
.health-metric::after { width: 54px; height: 54px; right: -18px; top: -19px; }
.health-metric .metric-value { font-size: 21px; }
.patient-layout { gap: 14px; }
.patient-layout > .card { padding: 20px; }
.section-heading { gap: 10px; margin-bottom: 16px; }
.section-heading p { font-size: .85rem; }
.section-icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 8px; font-size: 10px; }
.personal-grid { gap: 9px; }
.personal-item { padding: 11px; border-radius: 9px; }
.visual-grid { gap: 12px; }
.visual-card { min-height: 230px; padding: 15px; border-radius: 12px; }
.line-chart { height: 155px; }
.chart-empty { height: 155px; }
.risk-gauge { width: 136px; height: 69px; }
.risk-gauge::after { left: 21px; right: 21px; height: 47px; }
.gauge-needle { height: 52px; }
.gauge-value { margin-top: 34px; font-size: 20px; }
.clinical-grid { gap: 11px; }
.clinical-card { padding: 15px; border-radius: 11px; }
.clinical-card-head { margin-bottom: 11px; }
.result-row { padding: 7px 0; }
.portal-search { gap: 8px; padding: 11px; border-radius: 9px; }
.portal-search input { min-height: 39px; padding: 8px 10px; border-radius: 8px; }
.admin-patient { gap: 11px; padding: 11px 0; }
.admin-controls { gap: 6px; }
.consultation-form { padding: 14px; border-radius: 10px; }
.consultation-list { gap: 10px; margin-top: 16px; }
.consultation-item { padding: 14px; border-radius: 10px; }
.consultation-reply { padding: 11px; border-radius: 8px; }
.install-patient-app { width: 100%; margin-top: 10px; }
.patient-topbar .install-patient-app { width: auto; margin-top: 0; }
.connection-status { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 30; width: min(520px, calc(100% - 28px)); transform: translateX(-50%); padding: 10px 13px; border: 1px solid #e4c77e; border-radius: 9px; background: #fff7df; box-shadow: 0 10px 28px rgba(23,52,66,.16); color: #76520b; font-size: .78rem; font-weight: 750; text-align: center; }
.portal-legal-links, .patient-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.portal-legal-links { margin-top: 15px; font-size: .76rem; }
.portal-legal-links a, .patient-footer a, .legal-card a:not(.button) { color: #176c70; font-weight: 700; }
.patient-footer { padding: 8px 12px 2px; color: #607985; font-size: .76rem; text-align: center; }
.patient-footer p { margin: 0 0 8px; }
.legal-page { width: min(820px, calc(100% - 28px)); margin: 28px auto 48px; }
.legal-back { display: inline-block; margin: 0 0 12px; color: #176c70; font-size: .84rem; font-weight: 750; text-decoration: none; }
.legal-card { padding: clamp(20px, 4vw, 38px); }
.legal-card h1 { margin: 0; font-size: clamp(1.55rem, 4vw, 2rem); }
.legal-card h2 { margin: 25px 0 7px; color: #163C35; font-size: 1.02rem; }
.legal-card p, .legal-card li { color: #496672; line-height: 1.65; }
.legal-card ol { padding-left: 22px; }
.legal-updated { margin-top: 20px; font-size: .78rem; }
.legal-action { display: inline-flex; width: auto; margin-top: 6px; text-decoration: none; }

@media (display-mode: standalone) {
  .professional-entry { display: none !important; }
  .patient-shell { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .install-patient-app { display: none !important; }
}

@media (max-width: 1100px) {
  .app-shell .topbar { padding-inline: 17px; }
  .app-shell #app-content { padding: 21px; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell .sidebar { width: 228px; }
  .app-shell .topbar { min-height: 58px; }
  .app-shell #app-content { padding: 17px; }
  .app-shell .professional-consultation-editor { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .brand-logo-horizontal { width: 175px; max-width: 72vw; }
  .auth-brand .brand-logo-horizontal { width: min(260px, 82vw); }
  .patient-topbar .brand-logo-horizontal { width: 170px; max-width: 70vw; }
  .patient-login-brand img { width: min(290px, 88%); }
  .patient-header-logo { width: 155px; max-width: 68vw; }
  .profile-entry { top: 10px; right: 10px; padding: 7px 10px; }
  .auth-wide { margin-top: 62px; }
  .patient-shell { width: min(100% - 16px, 1240px); }
  .patient-hero { padding: 19px; }
  .patient-layout > .card { padding: 16px; }
  .section-heading { align-items: center; }
  .shell { width: min(100% - 16px, 1220px); padding-top: 12px; }
  .card { padding: 15px; }
  .auth { margin: 16px auto; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .app-shell .card, .card { box-shadow: none; }
}