/* ============================================================
   TEMA OSCURO — solo redefine los tokens de base.css.
   Para retocar el gris oscuro, tocá únicamente este archivo.
============================================================ */
html[data-tema="oscuro"]{
  --fondo:#15171C;
  --panel:#1D2027;
  --tinta:#E8EAF0;
  --gris:#9BA3B4;
  --linea:#2D3240;
  --azul:#5B79FF;
  --azul-oscuro:#3D5AE0;
  --rojo:#FF4D5A;
  --amarillo:#FFD500;
  --ok:#3DD183;
  --error:#FF6B6B;

  /* Las contrapartidas oscuras de los tokens de superficie y estado.
     Mientras los módulos usen estas variables y no hex sueltos, el
     modo oscuro no se rompe al agregar pantallas nuevas. */
  --suave:#191C24;
  --resalte:#252A38;
  --ok-bg:#16321F;      --ok-fg:#4DD68C;
  --warn-bg:#33301A;    --warn-fg:#E8C36A;
  --error-bg:#2E1B1D;   --error-fg:#FF8F94;
  --info-bg:#1E2540;    --info-fg:#A9BAFF;
  --lila-bg:#241E33;    --lila-fg:#C3A9FF;
  --naranja-bg:#2E2117; --naranja-fg:#E8A76A;
}

/* Ajustes puntuales donde había colores fijos pensados para fondo claro */
html[data-tema="oscuro"] input,
html[data-tema="oscuro"] select,
html[data-tema="oscuro"] textarea{
  background:#12141A; color:var(--tinta); border-color:var(--linea);
}
html[data-tema="oscuro"] input[readonly]{background:#191C23}
html[data-tema="oscuro"] input::placeholder,
html[data-tema="oscuro"] textarea::placeholder{color:#6D7488}

html[data-tema="oscuro"] td{border-bottom-color:#252A35}
html[data-tema="oscuro"] .btn-sec{background:transparent}
html[data-tema="oscuro"] .btn-sec:hover{background:#252A38}
html[data-tema="oscuro"] .saludo{background:#232838; color:#A9BAFF}
html[data-tema="oscuro"] .aviso{background:#2A2617; border-left-color:#8A7100}
html[data-tema="oscuro"] .aviso b{color:#E8C36A}
html[data-tema="oscuro"] .aviso-parcial{background:#2E1B1D; border-left-color:var(--error)}
html[data-tema="oscuro"] .sug:hover,
html[data-tema="oscuro"] .prod-row:hover,
html[data-tema="oscuro"] .guardada:hover{background:#252A38}
html[data-tema="oscuro"] .prod-row.sel{background:#252A38}
html[data-tema="oscuro"] .slot.vacio{background:#191C24}
html[data-tema="oscuro"] .slot.vacio:hover{background:#232838}
html[data-tema="oscuro"] .slot.vacio.deshab{background:#16181E}
html[data-tema="oscuro"] .slot.lleno{background:var(--panel)}
html[data-tema="oscuro"] #pizarra-texto{background:#1A1B14; color:var(--tinta)}
html[data-tema="oscuro"] .chip-plan{background:transparent}
html[data-tema="oscuro"] .chip-plan.activo{color:#fff}
html[data-tema="oscuro"] .badge.falta{background:#242833; color:var(--gris)}
html[data-tema="oscuro"] .card-tool:hover{box-shadow:0 8px 24px rgba(0,0,0,.5)}
html[data-tema="oscuro"] #vista-login{box-shadow:0 8px 30px rgba(0,0,0,.45)}

/* ---------- Botón de la barra ----------
   Mismo lenguaje visual que .mf-boton y el chip del clima. */
.btn-tema{
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:none; color:var(--gris);
  border:1px solid var(--linea); cursor:pointer;
  font-size:16px; line-height:1;
  transition:border-color .15s, color .15s;
}
.btn-tema:hover{border-color:var(--azul); color:var(--azul)}
.btn-tema:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* ---------- Botón flotante (respaldo: páginas sin barra) ---------- */
.fab-tema{
  position:fixed; right:18px; bottom:18px; z-index:900;
  width:44px; height:44px; border-radius:50%;
  background:var(--panel); color:var(--tinta);
  border:1px solid var(--linea); cursor:pointer;
  font-size:19px; line-height:1;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .15s, box-shadow .15s;
}
.fab-tema:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.24)}
@media (max-width:600px){ .fab-tema{right:12px; bottom:12px} }