/* =============================
   Estilos base y variables tema
   ============================= */
:root{
  --oc-bg:#ffffff;
  --oc-text:#0f172a;   /* slate-900 */
  --oc-muted:#475569;  /* slate-600 */
  --oc-card:#f1f5f9;   /* slate-100 */
  --oc-border:#e2e8f0; /* slate-200 */
}
:root.oc-dark{
  --oc-bg:#0b1220;     /* fondo oscuro profundo */
  --oc-text:#e5e7eb;   /* zinc-200 */
  --oc-muted:#9aa4b2;  /* gris medio */
  --oc-card:#0f172a;   /* slate-900 */
  --oc-border:#1f2937; /* slate-800 */
}

/* Aplicación genérica del tema */
html, body{ background:var(--oc-bg) !important; color:var(--oc-text) !important; }

/* Elementos comunes */
a{ color:inherit; }
input, select, textarea, button{ background:var(--oc-card); color:var(--oc-text); border:1px solid var(--oc-border); }
hr{ border-color:var(--oc-border); }

/* Transiciones suaves */
html, body, input, select, textarea, button{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* =============================
   Botón flotante del interruptor
   ============================= */
.ocd-wrap{ position:fixed; z-index:99999; }
.ocd-top-left{ top:16px; left:16px; }
.ocd-top-right{ top:16px; right:16px; }
.ocd-bottom-left{ bottom:16px; left:16px; }
.ocd-bottom-right{ bottom:16px; right:16px; }

.ocd-toggle{ display:inline-flex; align-items:center; gap:8px; font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif; background:var(--oc-card); color:var(--oc-text); border:1px solid var(--oc-border); padding:10px 12px; border-radius:999px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.ocd-toggle:focus{ outline:2px solid var(--oc-border); outline-offset:2px; }
.ocd-toggle[data-style="icon"] .ocd-label{ display:none; }

.ocd-sun{ display:block; }
.ocd-moon{ display:none; }
.oc-dark .ocd-sun{ display:none; }
.oc-dark .ocd-moon{ display:block; }

/* Imágenes sin invertir (evita efectos indeseados) */
.oc-dark img{ filter:none; }