/* ============================================================
   MEDICFLOW · PALETA ÚNICA DE COLORES (modo oscuro y modo claro)
   La usan TODAS las pantallas: nuevas y clásicas.
   Para cambiar un color en todo el sistema, se cambia acá.
   ============================================================ */
:root {
  --bg: #0d1b2a; --bg2: #162032; --bg3: #101f31; --bg4: #1b2a40;
  --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.18);
  --text: #ffffff; --muted: #a5b4c8; --muted2: #7f90a6;
  --blue: #00aaff; --blue2: #0077cc; --blue-text: #7cc8ff; --blue-soft: rgba(0,170,255,.14);
  --ok: #4ade80; --ok-text: #86efac; --ok-soft: rgba(74,222,128,.12); --ok-line: rgba(74,222,128,.55);
  --warn: #fb923c; --warn-text: #fdba74; --warn-soft: rgba(251,146,60,.20);
  --bad: #f87171; --bad-text: #fca5a5; --bad-soft: rgba(248,113,113,.14); --bad-line: rgba(248,113,113,.45);
  --amber-text: #fde68a; --violet-text: #d8ccff; --violet-soft: rgba(196,181,253,.16);
  --off-a: #172638; --off-b: #111d2d;
  --input-bg: #ffffff; --input-text: #0d1b2a; --input-line: transparent;
  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --gold: #DAA520;
}
html[data-theme="light"] {
  --bg: #eef3f8; --bg2: #ffffff; --bg3: #f6f9fc; --bg4: #e6edf5;
  --line: rgba(13,27,42,.12); --line2: rgba(13,27,42,.22);
  --text: #0d1b2a; --muted: #4b5d73; --muted2: #64748b;
  --blue: #0077cc; --blue2: #005fa3; --blue-text: #005fa3; --blue-soft: rgba(0,119,204,.10);
  --ok: #16a34a; --ok-text: #166534; --ok-soft: rgba(22,163,74,.10); --ok-line: rgba(22,163,74,.55);
  --warn: #ea580c; --warn-text: #9a3412; --warn-soft: rgba(234,88,12,.14);
  --bad: #dc2626; --bad-text: #991b1b; --bad-soft: rgba(220,38,38,.09); --bad-line: rgba(220,38,38,.40);
  --amber-text: #92400e; --violet-text: #5b21b6; --violet-soft: rgba(124,58,237,.10);
  --off-a: #e3e9f0; --off-b: #d8e0ea;
  --input-bg: #ffffff; --input-text: #0d1b2a; --input-line: rgba(13,27,42,.25);
  --shadow: 0 20px 60px rgba(13,27,42,.25);
  --gold: #a67c00;
}

/* Nombres viejos de las pantallas clásicas, apuntando a la misma paleta */
:root, html[data-theme="light"] {
  --navy: var(--bg); --navy2: var(--bg2); --silver: var(--muted); --white: var(--text);
  --green: var(--ok); --red: var(--bad); --amber: #f59e0b;
}

/* Botón Sol / Luna */
.mf-tema-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg3);
  color: var(--amber-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mf-tema-btn:hover { border-color: var(--blue); }

/* Pie HASHEM (igual en todas las pantallas) */
.pie-hashem { text-align: center; padding: 30px 16px 40px; margin-top: 40px; font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--line); letter-spacing: .5px; }
.pie-hashem a { color: var(--gold); font-weight: 700; text-decoration: none; }

/* Campos de texto: iguales en todas las pantallas (blancos con texto oscuro) */
html[data-tema-nativo] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
html[data-tema-nativo] select,
html[data-tema-nativo] textarea {
  background: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-line) !important;
}
html[data-tema-nativo] input::placeholder, html[data-tema-nativo] textarea::placeholder { color: #64748b !important; }
html[data-tema-nativo] option, html[data-tema-nativo] optgroup { background: #ffffff; color: #0d1b2a; }