/* ══════════════════════════════════════════════════════
   Modo noche.

   Las páginas copiadas de la tienda traen el color pegado en cada
   etiqueta —bg-white, text-slate-900— repartido en cientos de
   lugares. Agregarles a todas su variante `dark:` sería tocar
   doscientas líneas y olvidarse de veinte.

   En vez de eso, acá se redefine qué SIGNIFICA cada una de esas
   clases cuando html lleva .dark. Son treinta reglas y cubren todo,
   incluido lo que se agregue después usando las mismas clases.

   `html.dark .clase` le gana a `.clase` por especificidad, así que
   no hace falta !important ni depender del orden de carga.
   ══════════════════════════════════════════════════════ */

html.dark { color-scheme: dark; }

/* ── Fondos ── */
html.dark body            { background:#0b1220; color:#cbd5e1; }
html.dark .bg-white       { background-color:#111a2b; }
html.dark .bg-gray-100    { background-color:#0b1220; }
html.dark .bg-gray-50,
html.dark .bg-slate-50    { background-color:#16213a; }
html.dark .bg-brand-900   { background-color:#08111e; }
html.dark .bg-green-50    { background-color:rgba(34,197,94,.12); }
html.dark .bg-emerald-100 { background-color:rgba(34,197,94,.18); }

/* ── Texto ── */
html.dark .text-slate-900,
html.dark .text-gray-900,
html.dark .text-brand-900 { color:#e8eefc; }
html.dark .text-slate-800,
html.dark .text-gray-800  { color:#dbe4f5; }
html.dark .text-slate-700,
html.dark .text-gray-700  { color:#c3cfe4; }
html.dark .text-slate-600,
html.dark .text-gray-600  { color:#a8b6cd; }
html.dark .text-slate-500,
html.dark .text-gray-500  { color:#94a3b8; }
html.dark .text-slate-400,
html.dark .text-gray-400  { color:#7c8ca5; }
html.dark .text-slate-300 { color:#94a3b8; }

/* Los verdes de marca se aclaran: sobre fondo oscuro, el 700 se apaga */
html.dark .text-green-700,
html.dark .text-green-800,
html.dark .text-brand-700 { color:#4ade80; }
html.dark .text-emerald-600,
html.dark .text-green-600 { color:#34d399; }
html.dark .text-sky-400,
html.dark .text-sky-500,
html.dark .text-sky-600   { color:#38bdf8; }
html.dark .text-red-600   { color:#f87171; }
html.dark .text-amber-900 { color:#fbbf24; }

/* Los botones verdes se quedan con su color: son la acción */
html.dark .bg-green-700   { background-color:#15803d; }
html.dark .bg-green-800   { background-color:#166534; }

/* ── Bordes ── */
html.dark .border-slate-100,
html.dark .border-gray-100 { border-color:#22304a; }
html.dark .border-slate-200,
html.dark .border-gray-200 { border-color:#2a3a56; }
html.dark .border-white\/10 { border-color:rgba(255,255,255,.08); }

/* ── Sombras ──
   Sobre oscuro una sombra gris se ve como una mancha; van más negras. */
html.dark .shadow-sm { box-shadow:0 1px 3px rgba(0,0,0,.4); }
html.dark .shadow-xl { box-shadow:0 16px 40px rgba(0,0,0,.55); }

/* ── Campos ── */
html.dark input, html.dark textarea, html.dark select {
    color:#e8eefc; background:transparent;
}
html.dark input::placeholder { color:#64748b; }

/* ── La foto del producto ──
   Las cajas vienen con fondo blanco. Sobre una tarjeta oscura eso es un
   rectángulo blanco flotando, así que el panel de la foto se queda claro
   a propósito: la caja se ve como en la vida real. */
html.dark .foto-clara { background:#f1f5f9; }

/* El interruptor del tema */
.btn-tema { display:flex; align-items:center; justify-content:center;
            width:36px; height:36px; border-radius:10px; cursor:pointer;
            border:1px solid transparent; background:transparent;
            color:#94a3b8; transition:background .15s, color .15s; }
.btn-tema:hover { background:#f1f5f9; color:#0f172a; }
html.dark .btn-tema:hover { background:#1b2740; color:#e8eefc; }

/* El menú lateral y el desplegable de la cuenta */
html.dark #menuLateral,
html.dark #menuCuenta { background:#111a2b; border-color:#22304a; }
html.dark .hover\:bg-gray-50:hover  { background-color:#16213a; }
html.dark .hover\:bg-gray-100:hover { background-color:#1b2740; }
html.dark .hover\:bg-green-50:hover { background-color:rgba(34,197,94,.14); }
html.dark .hover\:bg-red-50:hover   { background-color:rgba(248,113,113,.12); }
html.dark .bg-gray-100 { background-color:#0b1220; }
html.dark .shadow-2xl  { box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* ── Bloque de código: se toca y se copia, como en Telegram ──
   El fondo ES la señal de que se puede tocar; no hace falta un botón
   al lado de cada clave. */
.copiable {
    display:inline-block; font-family:'IBM Plex Mono','SF Mono',Menlo,monospace;
    font-size:13px; letter-spacing:.3px; color:#0f172a; word-break:break-all;
    text-align:left; background:#f1f5f9; border:1px solid #e2e8f0;
    border-radius:7px; padding:4px 9px; cursor:pointer;
    -webkit-tap-highlight-color:transparent; transition:background .12s;
}
.copiable:hover  { background:#e2e8f0; }
.copiable:active { background:#dcfce7; border-color:#4ade80; }
html.dark .copiable { background:#16213a; border-color:#2a3a56; color:#e8eefc; }
html.dark .copiable:hover  { background:#1b2740; }
html.dark .copiable:active { background:rgba(34,197,94,.2); border-color:#22c55e; }

/* El aviso de que se copió */
#avisoCopia {
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
    background:#0f172a; color:#fff; font-size:13px; font-weight:700;
    padding:10px 18px; border-radius:11px; z-index:200;
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}
#avisoCopia.visible { opacity:1; transform:translateX(-50%) translateY(0); }
html.dark #avisoCopia { background:#22c55e; color:#062012; }