/* ============================================================
   HSH Passômetro — Estilos compartilhados
   ============================================================ */

/* ===== VARIÁVEIS DE COR ===== */
:root {
  /* Paleta Base (Ajustada para máxima legibilidade médica) */
  --bg-dark:      #0f2133;
  --bg-deeper:    #152e45;
  --bg-navy:      #1b3a52;
  --bg-mid:       #2a5070;
  --bg-light:     #f0f4f8;

  --border:       #4a7a9b;
  --border-hover: #6c9db3;
  --border-light: rgba(255,255,255,0.1);

  --blue-light:   #a8d8f0;
  --blue:         #3182ce;
  --blue-hover:   #4299e1;
  --blue-dark:    #2a4365;

  --teal:         #319795;
  --teal-light:   #81e6d9;

  --text-primary: #e2e8f0;
  --text-muted:   #94a3b8;
  --text-white:   #ffffff;

  --red:          #e53e3e;
  --red-dark:     #9b2c2c;
  --green:        #38a169;
  --green-light:  #9ae6b4;

  --accent-warn:  #f6ad55;
  --accent-err:   #fc8181;

  /* ===== Design tokens — escala consistente ===== */
  /* Radii */
  --radius-sm: 3px;    /* chips, dots, small controls */
  --radius-md: 5px;    /* botones, inputs */
  --radius-lg: 8px;    /* modals, cards */
  --radius-pill: 999px;/* píldoras (badges, status) */

  /* Spacing (use estas en padding/gap/margin nuevos) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;

  /* Alturas de controles (botones, inputs) */
  --ctrl-h-xs: 18px;   /* iconos, mini-acciones */
  --ctrl-h-sm: 22px;   /* navbar, controles densos */
  --ctrl-h-md: 28px;   /* modales, formularios */
  --ctrl-h-lg: 36px;   /* CTAs principales */

  /* Tipografía — escala (en pt, manteniendo la métrica original) */
  --fs-xs:   6pt;      /* meta info, badges chicos */
  --fs-sm:   7pt;      /* labels, controles densos */
  --fs-base: 7.5pt;    /* texto general */
  --fs-md:   8.5pt;    /* énfasis, modales */
  --fs-lg:   10pt;     /* títulos secundarios */
  --fs-xl:   13pt;     /* headers, leito-num */

  /* Sombras */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  /* Transiciones */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
}

/* ===== UTILIDADES (clases reutilizables) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--ctrl-h-sm); padding: 0 10px;
  font-size: var(--fs-base); font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-mid); color: var(--text-white);
  cursor: pointer; white-space: nowrap;
  font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover  { background: var(--blue-dark); border-color: var(--border-hover); }
.btn:active { transform: translateY(1px); }

.btn-md { height: var(--ctrl-h-md); padding: 0 14px; font-size: var(--fs-md); border-radius: var(--radius-md); }
.btn-lg { height: var(--ctrl-h-lg); padding: 0 18px; font-size: var(--fs-md); border-radius: var(--radius-md); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn-danger { background: var(--red-dark); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-primary); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text-white); }

.btn-warn { background: var(--accent-warn); border-color: var(--accent-warn); color: #1a1a1a; }
.btn-warn:hover { filter: brightness(0.92); }

.input {
  height: var(--ctrl-h-sm); padding: 0 var(--space-3);
  font-size: var(--fs-base); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-mid); color: var(--text-white); outline: none;
  font-family: inherit;
  transition: border-color var(--t-fast);
}
.input:hover { border-color: var(--border-hover); }
.input:focus { border-color: var(--teal-light); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--ctrl-h-sm); padding: 0 var(--space-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.3px;
  border-radius: var(--radius-pill); white-space: nowrap;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 7pt; background: var(--bg-light); color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "cv11", "ss01"; /* Inter: glifos disambiguados (1 con base, l con cola) */
}

/* Fuente monoespaciada para datos numéricos sensibles (doses, lab values, peso, datas) */
.mono-num,
input[type="number"],
input[type="date"],
#dva-result,
.dva-result,
.bed-table input[inputmode="numeric"],
.par-date, .atb-date-inp, .date-inp,
.leito-num, .ph-meta,
#save-status {
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.hidden { display: none !important; }

/* ===== MATERIAL ICONS ===== */
.mi {
  font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
}
.mi-12 { font-size: 12px; vertical-align: middle; }
.mi-14 { font-size: 14px; vertical-align: middle; }
.mi-16 { font-size: 16px; vertical-align: middle; }
.mi-18 { font-size: 18px; vertical-align: middle; }

/* ===== AUTH OVERLAYS ===== */
#login-overlay,
#andar-selector,
#mapa-login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-dark);
  display: flex; align-items: center; justify-content: center;
}
#login-overlay.hidden,
#andar-selector.hidden { display: none; }

.login-box {
  background: var(--bg-navy); border-radius: 10px; padding: 32px 36px;
  width: 340px; max-width: 94vw; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  color: var(--text-primary);
}
.login-box h2       { font-size: 13pt; color: var(--blue-light); margin-bottom: 2px; text-align: center; }
.login-hospital     { font-size: 9pt; color: var(--blue-light); text-align: center; margin: 0 0 8px; font-weight: 600; letter-spacing: 0.3px; }
.login-subtitle     { font-size: 8pt; color: var(--text-muted); text-align: center; margin-bottom: 20px; }
.login-step         { display: none; }
.login-step.active  { display: block; }

.login-box label {
  display: block; font-size: 8pt; margin-bottom: 3px;
  color: var(--blue-light); margin-top: 12px;
}
.login-box input[type="text"],
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%; padding: 7px 10px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg-dark);
  color: var(--text-white); font-size: 9pt; outline: none;
}
.login-box input:focus { border-color: var(--teal-light); }

.login-btn {
  width: 100%; margin-top: 18px; padding: 9px;
  background: var(--blue); color: var(--text-white);
  border: none; border-radius: 5px;
  font-size: 9.5pt; font-weight: bold; cursor: pointer;
}
.login-btn:hover    { background: var(--blue-hover); }
.login-error        { color: var(--accent-err); font-size: 8pt; margin-top: 8px; text-align: center; min-height: 18px; }
.login-forgot       { background: none; border: none; color: var(--text-muted); font-size: 7.5pt;
                      cursor: pointer; text-decoration: underline; margin-top: 8px; display: block; width: 100%; text-align: center; }
.login-forgot:hover { color: var(--blue-light); }
.login-back-btn     { background: none; border: none; color: var(--text-muted); font-size: 7.5pt;
                      cursor: pointer; text-decoration: underline; margin-top: 10px; display: block; text-align: center; width: 100%; }

/* ===== NAV USER BADGE & BOTÕES ===== */
.nav-user-badge {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg-mid); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px;
  font-size: 7.5pt; color: var(--blue-light); white-space: nowrap;
}
.nav-logout-btn {
  font-size: 7.5pt; padding: 3px 9px; border-radius: 3px;
  border: 1px solid var(--red); background: var(--red-dark);
  color: var(--text-white); cursor: pointer; font-weight: bold; white-space: nowrap;
}
.nav-logout-btn:hover { background: var(--red); }
.nav-logs-btn {
  font-size: 7.5pt; padding: 3px 9px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--bg-mid);
  color: var(--text-white); cursor: pointer; font-weight: bold; white-space: nowrap;
}
.nav-logs-btn:hover { background: #3a6080; }