/* ============================================================
   LabsPep — el sitio se ve igual venga de donde venga

   La página siempre es oscura, pero el navegador tiene sus propias
   ideas: en modo oscuro puede reoscurecer lo ya oscuro, y pinta el
   autocompletado, la selección de texto y las barras de desplazamiento
   con sus colores. Aquí se le quitan esas manos de encima.
   ============================================================ */

/* Vale tanto si el sistema está en claro como en oscuro: la página no cambia */
:root,
:root[data-theme],
html { color-scheme: dark; }

/* ---------- Autocompletado ----------
   Chrome pinta los campos autocompletados de azul o amarillo claro, con
   texto oscuro que queda ilegible sobre nuestro fondo. No hay forma de
   cambiar ese fondo: se tapa con una sombra interior del color correcto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #061020 inset;
  box-shadow: 0 0 0 1000px #061020 inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Selección de texto ---------- */
::selection {
  background: rgba(34, 230, 255, 0.28);
  color: #ffffff;
}

/* ---------- Barras de desplazamiento ---------- */
* { scrollbar-color: rgba(120, 200, 255, 0.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 200, 255, 0.24);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 200, 255, 0.4); }

/* ---------- Controles nativos ----------
   Las opciones de un desplegable las dibuja el sistema, no la página.
   Con color-scheme dark ya salen oscuras, pero se fijan los colores para
   que no dependan del tema del sistema operativo. */
option,
optgroup {
  background-color: #0a0f1c;
  color: var(--ink);
}

/* El calendario y las flechas de los campos numéricos, en claro */
::-webkit-calendar-picker-indicator,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { filter: invert(0.85); }

/* ---------- Contra el oscurecimiento forzado ----------
   Algunos navegadores móviles invierten los sitios que consideran claros.
   Esta consulta solo la entienden ellos: le pedimos que no toque nada,
   porque el diseño ya está en oscuro. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}

@media (forced-colors: active) {
  /* Modo de alto contraste de Windows: se respeta la paleta del sistema,
     pero se conservan los bordes para que las tarjetas sigan leyéndose. */
  .panel,
  .producto,
  .producto-admin,
  .meal,
  .stat { border: 1px solid; }
  .btn { border: 1px solid; forced-color-adjust: none; }
}