@font-face {
  font-family: 'Poppins Fon';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope Fon';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope.woff2') format('woff2');
}

:root {
  --bg: #f3f8f8;
  --surface: #ffffff;
  --surface-2: #eaf3f3;
  --border: #d9e6e6;
  --ink: #0a3341;
  --ink-2: #124153;
  --body: #3c5a62;
  --muted: #708f96;
  --accent: #00c4cc;
  --accent-dark: #017d82;
  --accent-soft: #cdf6f5;
  --mint: #12f0cf;
  --lock: #9db0b3;
  --lock-soft: #eef2f2;
  --edu: #f2960a;
  --edu-ink: #7a4c08;
  --edu-soft: #fce4bd;
  --coral: #ff4a3d;
  --coral-ink: #a82a1f;
  --coral-soft: #ffdcd8;
  /* Fijos a propósito: paneles de marca (hero, login, contacto) siempre son oscuros,
     sin importar el tema claro/oscuro del sitio — por eso no usan los tokens de arriba. */
  --brand-1: #082832;
  --brand-2: #00a8ad;
  --shadow: 0 1px 2px rgba(10,51,65,0.05), 0 18px 40px -18px rgba(10,51,65,0.32);
  --glow: 0 0 0 1px rgba(0,196,204,0.16), 0 20px 44px -16px rgba(1,125,130,0.42);
  --radius: 16px;
  --font-display: 'Poppins Fon', ui-rounded, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope Fon', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #071a20; --surface: #0d262d; --surface-2: #10303a; --border: #1d3d45;
    --ink: #eaf6f6; --ink-2: #d7ecec; --body: #b7d2d2; --muted: #83a3a8;
    --accent: #1df3e6; --accent-dark: #6ffaf0; --accent-soft: #0f3f3e; --mint: #8ff9e6;
    --lock: #4c6067; --lock-soft: #142127;
    --edu: #ffb03e; --edu-ink: #ffe3ad; --edu-soft: #3d2c11;
    --coral: #ff9186; --coral-ink: #ffdbd4; --coral-soft: #3a1f1a;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 44px -18px rgba(0,0,0,0.65);
    --glow: 0 0 0 1px rgba(29,243,230,0.2), 0 20px 44px -16px rgba(0,0,0,0.6);
  }
}

* { box-sizing: border-box; }
/* El atributo hidden debe ganar siempre, incluso sobre clases que fijan su propio display
   (ej. .divider, .plan-grid) — si no, la regla [hidden] del navegador queda tapada. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; margin: 0; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
svg.icon { display: block; flex-shrink: 0; }

/* ---- Logo mark ---- */
.fonlogo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.fonlogo svg { display: block; flex-shrink: 0; }
.fonlogo .word { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.fonlogo .word .a { color: var(--ink); }
.fonlogo .word .b { color: var(--accent); }

/* ---- Buttons ---- */
.btn { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; border-radius: 100px; padding: 11px 21px; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.btn:disabled { opacity: 0.7; cursor: default; transform: none !important; }
.btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 10px 22px -10px rgba(0,196,204,0.6); }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(0,196,204,0.7); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); transform: translateY(-1px); }
.btn-light { background: #ffffff; color: var(--brand-1); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.4); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(0,0,0,0.45); }
.btn-outline-light { background: transparent; color: #eafbfa; border-color: rgba(234,251,250,0.4); }
.btn-outline-light:hover { border-color: #eafbfa; transform: translateY(-1px); }
.btn-block { width: 100%; padding: 13px; }

/* ---- Nav ---- */
.s-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 6vw; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.s-menu { display: flex; align-items: center; gap: 26px; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
.s-menu a { color: inherit; text-decoration: none; }
.s-menu a:hover { color: var(--accent-dark); }
.nav-toggle { display: none; }

/* ---- Hero ---- */
.s-hero {
  position: relative; overflow: hidden; text-align: center; padding: 90px 6vw 70px;
  background:
    radial-gradient(620px 380px at 18% -10%, rgba(18,240,207,0.35), transparent 60%),
    radial-gradient(520px 360px at 88% 8%, rgba(0,196,204,0.28), transparent 60%),
    linear-gradient(165deg, var(--brand-1) 0%, var(--brand-2) 130%);
}
.s-hero * { position: relative; z-index: 2; }
.eyebrow { font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.s-hero .eyebrow { color: var(--mint); }
.s-hero .eyebrow .dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(18,240,207,0.2); }
.s-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 auto 16px; max-width: 22ch; color: #ffffff; }
.s-hero p.lede { max-width: 58ch; margin: 0 auto 34px; font-size: 1.05rem; color: #cfe8e6; }
.ctas { display: flex; justify-content: center; gap: 12px; margin-bottom: 46px; flex-wrap: wrap; }

.hero-visual { position: relative; width: 190px; height: 190px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.hero-visual .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(234,251,250,0.22); animation: ringpulse 4.5s ease-in-out infinite; }
.hero-visual .ring.r1 { width: 100%; height: 100%; }
.hero-visual .ring.r2 { width: 72%; height: 72%; animation-delay: .5s; }
.hero-visual .ring.r3 { width: 44%; height: 44%; animation-delay: 1s; }
@keyframes ringpulse { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.07); opacity: 1; } }
.hero-visual .mark { filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35)); }

.wave { display: flex; align-items: flex-end; gap: 5px; height: 32px; justify-content: center; margin: 26px auto 0; }
.wave i { width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--mint), var(--accent)); display: block; animation: wavebeat 1.1s ease-in-out infinite; }
.wave i:nth-child(1){ height: 40%; animation-delay: 0s; }
.wave i:nth-child(2){ height: 70%; animation-delay: .1s; }
.wave i:nth-child(3){ height: 100%; animation-delay: .2s; }
.wave i:nth-child(4){ height: 55%; animation-delay: .3s; }
.wave i:nth-child(5){ height: 85%; animation-delay: .4s; }
.wave i:nth-child(6){ height: 45%; animation-delay: .5s; }
.wave i:nth-child(7){ height: 65%; animation-delay: .6s; }
@keyframes wavebeat { 0%, 100% { transform: scaleY(0.5); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }

.pilltags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.pilltags span { font-size: 0.76rem; font-weight: 700; color: #eafbfa; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); padding: 6px 14px; border-radius: 100px; backdrop-filter: blur(2px); }

/* ---- Pulse divider: señal/ECG entre el hero y el resto del sitio ---- */
.pulse-divider { height: 44px; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border); }
.pulse-divider svg { width: 100%; height: 100%; display: block; }
.pulse-divider path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 7; animation: pulse-travel 2.4s linear infinite; }
@keyframes pulse-travel { to { stroke-dashoffset: -280; } }

/* ---- Sections ---- */
.s-section { padding: 76px 6vw; border-top: 1px solid var(--border); max-width: 1180px; margin: 0 auto; }
.s-section .head { text-align: center; margin-bottom: 44px; }
.s-section h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 10px; }
.s-section .head p { max-width: 50ch; margin: 0 auto; font-size: 0.98rem; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 780px; margin: 0 auto; }
.pillar { text-align: center; padding: 22px 16px; border-radius: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--accent-dark); }
.pillar b { display: block; font-size: 0.92rem; color: var(--ink-2); }
.pillar p { margin: 6px 0 0; font-size: 0.84rem; color: var(--muted); }

/* ---- Cómo funciona ---- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.process-step { padding: 24px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: transform 0.2s, box-shadow 0.2s; }
.process-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.process-step .num { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; color: var(--accent-dark); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.process-step h3 { font-size: 0.96rem; margin: 0 0 6px; }
.process-step p { font-size: 0.84rem; margin: 0; color: var(--muted); }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 16px; padding: 28px 26px; background: var(--surface); box-shadow: var(--shadow); transition: transform 0.22s, box-shadow 0.22s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.svc-card.edu { border-top-color: var(--edu); }
.svc-card.adulto { border-top-color: var(--coral); }
.svc-card .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--accent-soft); color: var(--accent-dark); }
.svc-card.edu .ic { background: var(--edu-soft); color: var(--edu-ink); }
.svc-card.adulto .ic { background: var(--coral-soft); color: var(--coral-ink); }
.svc-card .tag { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-dark); }
.svc-card.edu .tag { color: var(--edu-ink); }
.svc-card.adulto .tag { color: var(--coral-ink); }
.svc-card h3 { font-size: 1.15rem; margin: 8px 0 10px; }
.svc-card p { font-size: 0.9rem; margin: 0 0 16px; }
.svc-card ul { margin: 0; padding-left: 0; list-style: none; font-size: 0.86rem; }
.svc-card li { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.svc-card li svg { color: var(--accent); flex-shrink: 0; }
.svc-card.edu li svg { color: var(--edu); }
.svc-card.adulto li svg { color: var(--coral); }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.svc-price { display: flex; flex-direction: column; }
.svc-price .amount { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.svc-price .cap { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.svc-featured {
  margin-top: 20px; border-radius: 18px; padding: 32px; display: flex; align-items: center;
  gap: 28px; flex-wrap: wrap; background: linear-gradient(120deg, var(--surface), var(--surface-2));
  border: 1.5px solid var(--accent); box-shadow: var(--glow);
}
.svc-featured .badge-top { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-dark); background: var(--accent-soft); padding: 5px 12px; border-radius: 100px; margin-bottom: 12px; }
.svc-featured .info { flex: 1; min-width: 260px; }
.svc-featured h3 { font-size: 1.3rem; margin: 0 0 8px; }
.svc-featured p { font-size: 0.94rem; margin: 0; color: var(--body); }
.svc-featured .includes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.svc-featured .includes span { font-size: 0.72rem; font-weight: 700; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: 5px 11px; border-radius: 100px; }
.svc-featured .buy { text-align: center; }
.svc-featured .buy .amount { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.svc-featured .buy .cap { display: block; font-size: 0.74rem; color: var(--muted); margin-bottom: 14px; }
.svc-card .btn-primary { background: var(--accent); }
.svc-card.edu .btn-primary { background: var(--edu); box-shadow: 0 10px 20px -10px rgba(242,150,10,0.55); }
.svc-card.edu .btn-primary:hover:not(:disabled) { background: var(--edu-ink); }
.svc-card.adulto .btn-primary { background: var(--coral); box-shadow: 0 10px 20px -10px rgba(255,74,61,0.5); }
.svc-card.adulto .btn-primary:hover:not(:disabled) { background: var(--coral-ink); }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 0.92rem; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.contact-side { background: linear-gradient(165deg, var(--brand-1), var(--brand-2)); color: #eafbfa; border-radius: 16px; padding: 28px; font-size: 0.9rem; box-shadow: var(--glow); }
.contact-side h3 { font-size: 1rem; margin: 0 0 10px; color: #fff; }
.contact-side p { color: #cfe8e6; }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: #eafbfa; text-decoration: none; transition: transform 0.18s, background 0.18s; }
.social-row a:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
.form-note { font-size: 0.82rem; margin-top: 10px; display: none; }
.form-note.ok { color: var(--accent-dark); }

/* ---- Footer ---- */
.s-footer { padding: 34px 6vw; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 0.82rem; color: var(--muted); max-width: 1180px; margin: 0 auto; }
.s-footer .links { display: flex; gap: 18px; }
.s-footer .links a { color: var(--muted); text-decoration: none; }

/* ---- Login ---- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(420px 300px at 15% 10%, rgba(18,240,207,0.3), transparent 60%),
    radial-gradient(380px 300px at 90% 90%, rgba(0,196,204,0.28), transparent 60%),
    linear-gradient(165deg, var(--brand-1) 0%, var(--brand-2) 130%);
  color: #eafbfa; padding: 52px 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.login-brand > * { position: relative; z-index: 2; }
.login-brand .quote { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.3; max-width: 17ch; margin-top: 44px; }
.login-brand .sub { font-size: 0.92rem; opacity: 0.85; margin-top: 12px; max-width: 32ch; }
.login-brand .wave { justify-content: flex-start; margin: 30px 0 0; }
.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-form-side { width: 100%; max-width: 380px; }
.login-form-side h1 { font-size: 1.6rem; margin: 0 0 8px; }
.login-form-side .sub { font-size: 0.92rem; margin-bottom: 30px; }
.login-actions { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; font-size: 0.84rem; }
.divider { display: flex; align-items: center; gap: 10px; margin: 26px 0 16px; font-size: 0.8rem; color: var(--muted); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.form-error { background: var(--edu-soft); color: var(--edu-ink); border: 1px solid rgba(184,121,31,0.3); border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px; }
.billing-toggle { display: flex; gap: 8px; margin: 4px 0 22px; }
.billing-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.billing-toggle label { flex: 1; text-align: center; padding: 10px 10px; border: 1px solid var(--border); border-radius: 100px; font-size: 0.82rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.billing-toggle input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }
.billing-toggle input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.cancel-sub-btn { font-size: 0.76rem; color: var(--coral-ink); background: none; border: none; text-decoration: underline; cursor: pointer; margin-top: 10px; padding: 0; }
@media (max-width: 780px) { .login-page { grid-template-columns: 1fr; } .login-brand { display: none; } }

/* ---- Dashboard ---- */
.dash-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 6vw; border-bottom: 1px solid var(--border); }
.dash-user { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, var(--accent), var(--ink)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.78rem; }
.dash-body { padding: 48px 6vw; max-width: 1100px; margin: 0 auto; }
.dash-body h1 { font-size: 1.5rem; margin: 0 0 6px; }
.dash-body .sub { font-size: 0.92rem; margin-bottom: 30px; }
.dash-loading { font-size: 0.9rem; color: var(--muted); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.plan-card { border-radius: 16px; padding: 26px; border: 1px solid var(--border); border-top: 4px solid var(--border); background: var(--surface-2); position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.plan-card.active { background: var(--surface); border-color: var(--border); box-shadow: var(--glow); }
.plan-card.active.p-adulto { border-top-color: var(--coral); }
.plan-card.active.p-edu { border-top-color: var(--edu); }
.plan-card.active.p-salud { border-top-color: var(--accent); }
.plan-card.active.p-completo { border-top-color: var(--ink); }
.plan-card:not(.locked):hover { transform: translateY(-3px); }
.plan-card .ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.plan-card.p-adulto .ic { background: var(--coral-soft); color: var(--coral-ink); }
.plan-card.p-edu .ic { background: var(--edu-soft); color: var(--edu-ink); }
.plan-card.p-salud .ic { background: var(--accent-soft); color: var(--accent-dark); }
.plan-card.p-completo .ic { background: var(--surface-2); color: var(--ink); }
.plan-card .badge { display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; }
.plan-card.active .badge { background: var(--accent-soft); color: var(--accent-dark); }
.plan-card.locked .badge { background: var(--lock-soft); color: var(--muted); }
.plan-card h3 { font-size: 1.08rem; margin: 0 0 8px; }
.plan-card p { font-size: 0.87rem; margin: 0 0 18px; }
.plan-card .status { font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.plan-card .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.plan-card.locked { opacity: 0.75; }
.plan-card.locked h3, .plan-card.locked p { color: var(--muted); }
.lock-ic { position: absolute; top: 22px; right: 22px; color: var(--lock); }

/* ---- Portal: protocolos, pacientes, evaluaciones, admin ---- */
.protocol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.protocol-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface-2); }
.protocol-card h3 { font-size: 0.96rem; margin: 0 0 6px; }
.protocol-card p { font-size: 0.85rem; margin: 0; color: var(--muted); }
.area-cta { margin-top: 10px; }

.patients-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.patients-head h1 { margin: 0 0 4px; }

.new-patient-form { max-width: 460px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 26px; }
.new-patient-form textarea { font-family: var(--font-body); font-size: 0.88rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); resize: vertical; }

.patients-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.patient-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
  padding: 14px 18px; background: var(--surface); text-decoration: none; color: inherit;
  border-top: 1px solid var(--border); transition: background 0.15s;
}
.patient-row:first-child { border-top: none; }
.patient-row:hover { background: var(--surface-2); }
.patient-name { font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
.patient-meta { font-size: 0.8rem; color: var(--muted); }
.patient-arrow { color: var(--muted); }

.evals-list { display: flex; flex-direction: column; gap: 10px; }
.eval-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-2);
}
.eval-row > div:first-child { flex: 1; min-width: 200px; }
.eval-protocol { font-weight: 700; font-size: 0.9rem; color: var(--ink-2); }
.eval-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.eval-status { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 100px; }
.eval-status.done { background: var(--accent-soft); color: var(--accent-dark); }
.eval-status.progress { background: var(--edu-soft); color: var(--edu-ink); }

.protocol-modal { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; }
.protocol-modal-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.9rem; color: var(--ink-2); }
#protocol-iframe { flex: 1; width: 100%; border: none; }

@media (max-width: 900px) {
  .s-menu { display: none; }
  .svc-grid, .pillars, .plan-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}