/* ===== Tema CLARO «menta y durazno» (prueba) — se carga DESPUÉS de styles.css ===== */
:root {
  --bg: #eef8f6;
  --bg2: #f6fbfa;
  --panel: rgba(255, 255, 255, .78);
  --panel2: rgba(255, 255, 255, .95);
  --panel3: #e6f4f1;
  --line: rgba(20, 90, 85, .10);
  --line2: rgba(20, 90, 85, .18);
  --text: #17343b;
  --muted: #557178;
  --dim: #7f979c;
  --teal: #12a594;
  --teal2: #0d8a7c;
  --gold: #f08a5d;
  --gold2: #e76f51;
  --rose: #ef5f5f;
  --green: #22a565;
  --blue: #3b82c4;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 12px 34px rgba(24, 92, 88, .12), 0 2px 6px rgba(24, 92, 88, .06);
  --f-display: 'Poppins', 'Inter', system-ui, sans-serif;
}
body {
  background: linear-gradient(135deg, #d8f1ed 0%, #eef8f4 38%, #fdf0e8 70%, #fbd9c8 100%) fixed;
  background-image: none;
  background: linear-gradient(135deg, #d8f1ed 0%, #eef8f4 38%, #fdf0e8 70%, #fbd9c8 100%);
  background-attachment: fixed;
}
a { color: var(--teal2); }
:focus-visible { outline-color: var(--teal); }

/* vidrio: barra, menú lateral y tarjetas */
.topbar { background: rgba(255, 255, 255, .62); border-bottom: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 4px 18px rgba(24, 92, 88, .06); }
.icon-btn, .chip { background: rgba(255, 255, 255, .85); border-color: rgba(20, 90, 85, .10); box-shadow: 0 2px 8px rgba(24, 92, 88, .07); color: var(--text); }
.icon-btn:hover, .chip:hover { background: #fff; }
.brand { color: var(--text); font-weight: 700; }
.brand em, .brand .bi { color: var(--gold2); }
.sidebar { background: rgba(255, 255, 255, .55) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-right: 1px solid rgba(255, 255, 255, .7) !important; }
.card, .hero { background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero::after { background: radial-gradient(circle, rgba(18, 165, 148, .18), transparent 70%); }
.ring .ring-bg { stroke: rgba(20, 90, 85, .12); }
.badge { background: rgba(18, 165, 148, .08); }
.badge.basico, .badge.esencial { color: #15803d; border-color: rgba(21, 128, 61, .25); background: rgba(34, 197, 94, .10); }
.badge.intermedio, .badge.clinico { color: #b45309; border-color: rgba(180, 83, 9, .25); background: rgba(245, 158, 11, .12); }
.badge.avanzado, .badge.ampliado { color: #c2410c; border-color: rgba(194, 65, 12, .25); background: rgba(249, 115, 22, .10); }
.progress { background: rgba(20, 90, 85, .10); }
.lrow .n, .opt .l, .sr-clear, .sr-kind, .ig-chip, .ach .ai { background: rgba(18, 165, 148, .09); }
.sr-clear:hover { background: rgba(18, 165, 148, .16); }
.sr-kind.k-c { background: rgba(139, 92, 246, .12); color: #6d28d9; }
.ig-track { background: rgba(20, 90, 85, .07); }
.ig-table tbody tr:nth-child(odd) td, .g-table tr:nth-child(odd) td { background: rgba(20, 90, 85, .035); }
.ig-chip.warn, .ig-alert { color: #b42318; }

/* botones: verde azulado lleno, redondos, como la referencia */
.btn { border-radius: 999px; }
.btn:not(.ghost) { background: linear-gradient(135deg, #17b3a1, #0e9384); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(14, 147, 132, .28); }
.btn.ghost { background: rgba(255, 255, 255, .7); color: var(--teal2); border-color: rgba(18, 165, 148, .3); }
.searchbox input, input.input, select.input, textarea { background: rgba(255, 255, 255, .9) !important; color: var(--text) !important; border-color: rgba(20, 90, 85, .12) !important; box-shadow: 0 4px 14px rgba(24, 92, 88, .06); border-radius: 18px; }

/* barra de abajo en el celular: blanca con pastilla activa */
@media (max-width: 900px) {
  .tabbar { background: rgba(255, 255, 255, .88) !important; border-top: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: 0 -6px 20px rgba(24, 92, 88, .08); }
  .tabbar a { color: var(--dim); }
  .tabbar a.active { color: var(--teal2); }
  .scrim { background: rgba(23, 52, 59, .35); }
}

/* tarjetas de práctica y respuestas */
.flash .back { background: #ffffff; border-color: rgba(18, 165, 148, .3); color: var(--text); }
.flash .back .ex { border-top-color: rgba(20, 90, 85, .12); }
.flash .front { background: linear-gradient(135deg, #2bb8a8, #12a594); color: #fff; }
.flash-actions .no, .verdict.ko { color: #b42318; background: rgba(239, 95, 95, .10); }
.flash-actions .yes, .verdict.ok { color: #15803d; background: rgba(34, 165, 101, .10); }
.ach.on .ai { background: radial-gradient(circle at 30% 30%, rgba(240, 138, 93, .35), rgba(240, 138, 93, .08)); box-shadow: 0 0 0 1px rgba(240, 138, 93, .35); }
.modal { background: rgba(23, 52, 59, .45); }

/* páginas «gamma» (mapas, manuales): se mantienen oscuras porque sus imágenes tienen fondo oscuro,
   pero con esquinas y sombra del tema claro */
.gamma .g-page, .gamma > section { border-radius: 22px; box-shadow: var(--shadow); }

/* ajustes 2 */
.lvlbox { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); box-shadow: 0 6px 18px rgba(24, 92, 88, .08); }
.card { background: rgba(255, 255, 255, .78); }
.btn.primary, .continue .play, .ig-steps li::before { background: linear-gradient(135deg, #17b3a1, #0e9384); color: #fff; box-shadow: 0 8px 20px rgba(14, 147, 132, .28); }
.btn.gold, .fab-help { background: linear-gradient(135deg, #f6a07a, #ec6f55); color: #fff; }
.nav a { color: var(--muted); border-radius: 14px; }
.nav a.active { background: rgba(18, 165, 148, .12); color: var(--teal2); box-shadow: none; font-weight: 600; }
.modal .box { background: rgba(255, 255, 255, .96); border-color: rgba(255, 255, 255, .9); box-shadow: var(--shadow); }
.lightbox { background: rgba(23, 52, 59, .9); }
.ig-rule { background: linear-gradient(135deg, rgba(18, 165, 148, .10), rgba(240, 138, 93, .12)); }
.m-table th { background: #127e73; }

/* Medical System brand, light theme (2026-11-14) */
.ms-m { color: #1E3A6E; }
.ms-s { color: #1FA9A6; }
.brand .ms-name .bi, .farmi-name.farmi-name-ms em { color: #475569; }
.farmi-mascot.farmi-logo-ms { filter: drop-shadow(0 10px 22px rgba(31, 169, 166, .25)); }