/* ════════════════════════════════════════════════════════════════════════
   MODO OSCURO — overrides de utilidades Tailwind
   --------------------------------------------------------------------------
   Estrategia: NO se editan las vistas. Se redefine en `.dark` el color al que
   resuelven las clases de Tailwind realmente usadas (inventariadas: 56 de gris
   + ~277 de color). Como `.dark .clase` tiene más especificidad que `.clase`,
   gana sin tocar el HTML. Se usa !important para ganar también a estilos
   inline de superficie (background:#fff) sin afectar a los colores de marca
   (esos van por `.bg-primary` / variables, que NO se tocan aquí).

   Ámbito: solo se enlaza en los layouts internos (main.php = CRM, sistema.php
   = superadmin). Las vistas de impresión, login, portal y landing NO lo cargan
   → se quedan en claro.

   IMPORTANTE: `text-white` NO se redefine a propósito (es texto sobre botones
   de color de marca y debe seguir blanco). Tampoco `bg-primary` ni las
   variables de color de clínica.
   ════════════════════════════════════════════════════════════════════════ */

/* Lienzo base + controles nativos (scrollbars, inputs) en oscuro */
.dark { color-scheme: dark; }
.dark body { background-color: #131519; color: #d4d8de; }

/* ── Superficies (fondos) ──────────────────────────────────────────────── */
/* Página = lo más oscuro; tarjetas (bg-white) un punto más claras → relieve. */
.dark .bg-white        { background-color: #1c1f26 !important; }
.dark .bg-gray-50      { background-color: #131519 !important; }
.dark .bg-gray-100     { background-color: #23272f !important; }
.dark .bg-gray-200     { background-color: #2b303a !important; }
.dark .bg-gray-300     { background-color: #353b45 !important; }
.dark .bg-gray-400     { background-color: #4b515b !important; }
.dark .bg-gray-500     { background-color: #6b717b !important; }
/* Elementos "oscuros" (tooltips/badges sobre fondo claro): los dejamos muy
   oscuros para que su texto blanco siga legible sobre el fondo del tema. */
.dark .bg-gray-700     { background-color: #14161a !important; }
.dark .bg-gray-800     { background-color: #101216 !important; }
.dark .bg-gray-900     { background-color: #0c0e11 !important; }
/* bg-black (overlays/backdrops con opacidad) se deja tal cual. */

/* ── Texto ─────────────────────────────────────────────────────────────── */
.dark .text-gray-900   { color: #f5f6f8 !important; }
.dark .text-gray-800   { color: #e7e9ec !important; }
.dark .text-gray-700   { color: #d4d8de !important; }
.dark .text-gray-600   { color: #aab0ba !important; }
.dark .text-gray-500   { color: #8b919c !important; }
.dark .text-gray-400   { color: #71777f !important; }
.dark .text-gray-300   { color: #5a606a !important; }
.dark .text-gray-200   { color: #474d56 !important; }
.dark .text-gray-100   { color: #3a3f48 !important; }

/* ── Bordes y divisores ────────────────────────────────────────────────── */
.dark .border-white    { border-color: #1c1f26 !important; }
.dark .border-gray-50  { border-color: #20232a !important; }
.dark .border-gray-100 { border-color: #262a31 !important; }
.dark .border-gray-200 { border-color: #30343c !important; }
.dark .border-gray-300 { border-color: #3a3f49 !important; }
.dark .border-gray-400 { border-color: #4b515b !important; }
.dark .border-gray-500 { border-color: #5c626c !important; }
.dark .border-gray-700 { border-color: #2a2e35 !important; }
.dark .divide-white   > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-100> :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200> :not([hidden]) ~ :not([hidden]) { border-color: #2a2e35 !important; }

/* ── Rings de foco grises (los de color, ring-*-500, se dejan) ─────────── */
.dark .ring-white      { --tw-ring-color: #2b303a !important; }
.dark .ring-gray-100   { --tw-ring-color: #262a31 !important; }
.dark .ring-gray-200   { --tw-ring-color: #30343c !important; }
.dark .ring-gray-500   { --tw-ring-color: #5c626c !important; }

/* ── Estados hover (superficies un punto más claras, texto más claro) ──── */
.dark .hover\:bg-white:hover     { background-color: #23272f !important; }
.dark .hover\:bg-gray-50:hover   { background-color: #20242b !important; }
.dark .hover\:bg-gray-100:hover  { background-color: #282d37 !important; }
.dark .hover\:bg-gray-200:hover  { background-color: #30353f !important; }
.dark .hover\:bg-gray-300:hover  { background-color: #3a4049 !important; }
.dark .hover\:bg-gray-700:hover  { background-color: #1a1c21 !important; }
.dark .hover\:bg-gray-800:hover  { background-color: #141619 !important; }
.dark .hover\:bg-gray-900:hover  { background-color: #0e1013 !important; }
.dark .hover\:text-gray-600:hover{ color: #c0c5cd !important; }
.dark .hover\:text-gray-700:hover{ color: #dfe2e7 !important; }
.dark .hover\:text-gray-800:hover{ color: #eceef1 !important; }
.dark .hover\:text-gray-900:hover{ color: #f5f6f8 !important; }
.dark .hover\:text-gray-200:hover{ color: #474d56 !important; }
.dark .hover\:border-gray-200:hover { border-color: #30343c !important; }
.dark .hover\:border-gray-300:hover { border-color: #3a3f49 !important; }
.dark .hover\:border-gray-400:hover { border-color: #4b515b !important; }
.dark .hover\:border-gray-500:hover { border-color: #5c626c !important; }

/* ════════════════════════════════════════════════════════════════════════
   COLORES SEMÁNTICOS (badges, alertas, estados)
   Receta por familia: fondos -50/-100/-200 → tinte oscuro de ese color;
   textos -500..-900 → tono claro (~-300); bordes -200/-300 → color medio-oscuro.
   ════════════════════════════════════════════════════════════════════════ */

/* BLUE (info, enlaces) */
.dark .bg-blue-50{background-color:#16263f!important}.dark .bg-blue-100{background-color:#1c3252!important}.dark .bg-blue-200{background-color:#244069!important}
.dark .text-blue-500,.dark .text-blue-600,.dark .text-blue-700,.dark .text-blue-800,.dark .text-blue-900{color:#93c5fd!important}
.dark .text-blue-400{color:#bfdbfe!important}
.dark .border-blue-100{border-color:#1c3252!important}.dark .border-blue-200{border-color:#2c4a73!important}.dark .border-blue-300{border-color:#345a8a!important}
.dark .hover\:text-blue-600:hover,.dark .hover\:text-blue-700:hover{color:#bfdbfe!important}
.dark .hover\:bg-blue-50:hover{background-color:#1c3252!important}.dark .hover\:bg-blue-100:hover{background-color:#244069!important}

/* RED (error, peligro) */
.dark .bg-red-50{background-color:#3a1b1d!important}.dark .bg-red-100{background-color:#4a2225!important}.dark .bg-red-200{background-color:#5e2b2e!important}
.dark .text-red-500,.dark .text-red-600,.dark .text-red-700,.dark .text-red-800,.dark .text-red-900{color:#fca5a5!important}
.dark .text-red-400{color:#fecaca!important}
.dark .border-red-100{border-color:#4a2225!important}.dark .border-red-200{border-color:#6b2e30!important}.dark .border-red-300{border-color:#853a3c!important}
.dark .hover\:text-red-600:hover,.dark .hover\:text-red-700:hover{color:#fecaca!important}
.dark .hover\:bg-red-50:hover{background-color:#4a2225!important}.dark .hover\:bg-red-100:hover{background-color:#5e2b2e!important}

/* AMBER (aviso) */
.dark .bg-amber-50{background-color:#3a2e12!important}.dark .bg-amber-100{background-color:#4a3a16!important}.dark .bg-amber-200{background-color:#5e491c!important}
.dark .text-amber-500,.dark .text-amber-600,.dark .text-amber-700,.dark .text-amber-800,.dark .text-amber-900{color:#fcd34d!important}
.dark .text-amber-400{color:#fde68a!important}
.dark .border-amber-100{border-color:#4a3a16!important}.dark .border-amber-200{border-color:#6b5320!important}.dark .border-amber-300{border-color:#856828!important}
.dark .hover\:bg-amber-50:hover{background-color:#4a3a16!important}.dark .hover\:bg-amber-100:hover{background-color:#5e491c!important}

/* GREEN (éxito) */
.dark .bg-green-50{background-color:#13301f!important}.dark .bg-green-100{background-color:#173d27!important}.dark .bg-green-200{background-color:#1d4d31!important}
.dark .text-green-500,.dark .text-green-600,.dark .text-green-700,.dark .text-green-800,.dark .text-green-900{color:#86efac!important}
.dark .text-green-400{color:#bbf7d0!important}
.dark .border-green-100{border-color:#173d27!important}.dark .border-green-200{border-color:#246b42!important}.dark .border-green-300{border-color:#2d8553!important}
.dark .hover\:bg-green-50:hover{background-color:#173d27!important}.dark .hover\:bg-green-100:hover{background-color:#1d4d31!important}

/* EMERALD */
.dark .bg-emerald-50{background-color:#0f2e25!important}.dark .bg-emerald-100{background-color:#143b30!important}.dark .bg-emerald-200{background-color:#1a4d3e!important}
.dark .text-emerald-500,.dark .text-emerald-600,.dark .text-emerald-700,.dark .text-emerald-800,.dark .text-emerald-900{color:#6ee7b7!important}
.dark .border-emerald-100{border-color:#143b30!important}.dark .border-emerald-200{border-color:#1f6b56!important}

/* TEAL */
.dark .bg-teal-50{background-color:#0f3030!important}.dark .bg-teal-100{background-color:#143d3d!important}
.dark .text-teal-500,.dark .text-teal-600,.dark .text-teal-700,.dark .text-teal-800{color:#5eead4!important}
.dark .border-teal-200{border-color:#1f6b6b!important}

/* CYAN */
.dark .bg-cyan-50{background-color:#13303a!important}.dark .bg-cyan-100{background-color:#173d4a!important}
.dark .text-cyan-500,.dark .text-cyan-600,.dark .text-cyan-700,.dark .text-cyan-800{color:#67e8f9!important}
.dark .border-cyan-200{border-color:#246b7a!important}

/* SKY */
.dark .bg-sky-50{background-color:#13283f!important}.dark .bg-sky-100{background-color:#173552!important}
.dark .text-sky-500,.dark .text-sky-600,.dark .text-sky-700,.dark .text-sky-800{color:#7dd3fc!important}
.dark .border-sky-200{border-color:#256b8a!important}

/* INDIGO */
.dark .bg-indigo-50{background-color:#1e1f44!important}.dark .bg-indigo-100{background-color:#262859!important}.dark .bg-indigo-200{background-color:#2f3270!important}
.dark .text-indigo-500,.dark .text-indigo-600,.dark .text-indigo-700,.dark .text-indigo-800,.dark .text-indigo-900{color:#a5b4fc!important}
.dark .border-indigo-200{border-color:#3a3d7a!important}.dark .border-indigo-300{border-color:#474b95!important}

/* VIOLET (citas grupales, etc.) */
.dark .bg-violet-50{background-color:#241844!important}.dark .bg-violet-100{background-color:#2e2059!important}.dark .bg-violet-200{background-color:#3a2a70!important}
.dark .text-violet-500,.dark .text-violet-600,.dark .text-violet-700,.dark .text-violet-800,.dark .text-violet-900{color:#c4b5fd!important}
.dark .border-violet-200{border-color:#46307a!important}.dark .border-violet-300{border-color:#573c95!important}

/* PURPLE */
.dark .bg-purple-50{background-color:#2a1640!important}.dark .bg-purple-100{background-color:#371d52!important}.dark .bg-purple-200{background-color:#452569!important}
.dark .text-purple-500,.dark .text-purple-600,.dark .text-purple-700,.dark .text-purple-800,.dark .text-purple-900{color:#d8b4fe!important}
.dark .border-purple-200{border-color:#5a2e7a!important}.dark .border-purple-300{border-color:#6e3895!important}

/* PINK */
.dark .bg-pink-50{background-color:#3a162a!important}.dark .bg-pink-100{background-color:#4a1c36!important}
.dark .text-pink-500,.dark .text-pink-600,.dark .text-pink-700,.dark .text-pink-800{color:#f9a8d4!important}
.dark .border-pink-200{border-color:#6b2e52!important}

/* ROSE */
.dark .bg-rose-50{background-color:#3a1620!important}.dark .bg-rose-100{background-color:#4a1c29!important}
.dark .text-rose-500,.dark .text-rose-600,.dark .text-rose-700,.dark .text-rose-800{color:#fda4af!important}
.dark .border-rose-200{border-color:#6b2e3a!important}

/* ORANGE */
.dark .bg-orange-50{background-color:#3a2412!important}.dark .bg-orange-100{background-color:#4a2f16!important}.dark .bg-orange-200{background-color:#5e3b1c!important}
.dark .text-orange-500,.dark .text-orange-600,.dark .text-orange-700,.dark .text-orange-800,.dark .text-orange-900{color:#fdba74!important}
.dark .border-orange-200{border-color:#6b4520!important}.dark .border-orange-300{border-color:#855628!important}

/* YELLOW */
.dark .bg-yellow-50{background-color:#3a3512!important}.dark .bg-yellow-100{background-color:#4a4416!important}.dark .bg-yellow-200{background-color:#5e561c!important}
.dark .text-yellow-500,.dark .text-yellow-600,.dark .text-yellow-700,.dark .text-yellow-800,.dark .text-yellow-900{color:#fde047!important}
.dark .border-yellow-200{border-color:#6b6320!important}

/* LIME */
.dark .bg-lime-50{background-color:#1f3012!important}.dark .bg-lime-100{background-color:#283d16!important}
.dark .text-lime-500,.dark .text-lime-600,.dark .text-lime-700,.dark .text-lime-800{color:#bef264!important}
.dark .border-lime-200{border-color:#3a6b20!important}

/* ── Gradientes: oscurecer las paradas claras (-50) que usan los banners.
      Las saturadas (-500..-700, p.ej. heros) se dejan: lucen bien en oscuro. */
.dark .from-blue-50  {--tw-gradient-from:#16263f var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(22 38 63/0) var(--tw-gradient-to-position)!important}
.dark .to-blue-50    {--tw-gradient-to:#16263f var(--tw-gradient-to-position)!important}
.dark .from-indigo-50{--tw-gradient-from:#1e1f44 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(30 31 68/0) var(--tw-gradient-to-position)!important}
.dark .to-indigo-50  {--tw-gradient-to:#1e1f44 var(--tw-gradient-to-position)!important}
.dark .from-violet-50{--tw-gradient-from:#241844 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(36 24 68/0) var(--tw-gradient-to-position)!important}
.dark .from-purple-50{--tw-gradient-from:#2a1640 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(42 22 64/0) var(--tw-gradient-to-position)!important}
.dark .to-purple-50  {--tw-gradient-to:#2a1640 var(--tw-gradient-to-position)!important}
.dark .from-amber-50 {--tw-gradient-from:#3a2e12 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(58 46 18/0) var(--tw-gradient-to-position)!important}
.dark .to-amber-50   {--tw-gradient-to:#3a2e12 var(--tw-gradient-to-position)!important}
.dark .from-orange-50{--tw-gradient-from:#3a2412 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(58 36 18/0) var(--tw-gradient-to-position)!important}
.dark .to-orange-50  {--tw-gradient-to:#3a2412 var(--tw-gradient-to-position)!important}
.dark .from-red-50   {--tw-gradient-from:#3a1b1d var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(58 27 29/0) var(--tw-gradient-to-position)!important}
.dark .from-green-50 {--tw-gradient-from:#13301f var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(19 48 31/0) var(--tw-gradient-to-position)!important}
.dark .to-green-50   {--tw-gradient-to:#13301f var(--tw-gradient-to-position)!important}
.dark .to-emerald-50 {--tw-gradient-to:#0f2e25 var(--tw-gradient-to-position)!important}
.dark .from-pink-50  {--tw-gradient-from:#3a162a var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(58 22 42/0) var(--tw-gradient-to-position)!important}
.dark .to-rose-50    {--tw-gradient-to:#3a1620 var(--tw-gradient-to-position)!important}

/* ── Sombras: en oscuro las sombras claras casi no se ven; reforzamos ──── */
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }
.dark .shadow,
.dark .shadow-md { box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important; }
.dark .shadow-lg,
.dark .shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; }