/* ═══════════════════════════════════════════════════════════════════════
   TEMA de sincronizatutienda.com — claro y oscuro, para las TRES apps
   (cartelera, tiendas y el portal). Lo sirve nginx desde la raíz, igual
   que manifest.json. Se carga en la cabecera de cada página.

   Colores: los de la marca (1_Sincroniza_tu_tienda/Marca/LEEME.md):
   azul + turquesa. Sin morado.

   ⚠️ Los selectores llevan `html[data-tema=…]` A PROPÓSITO: cada pantalla
   trae su propio `:root{--bg:…}` escrito a mano, y este archivo tiene que
   ganarle sin tocar esas líneas. `html[data-tema]` pesa más que `:root`.
   El atributo lo pone /tema.js antes de pintar nada.

   Los nombres viejos (--card, --pa, --bd, --fg, --mut, --ac, --ok, --bg2,
   --ac2, --tv…) se mantienen: el CSS de cada pantalla ya los usa.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-tema=oscuro]{
  color-scheme:dark;
  --bg:#0B1220; --card:#121B2E; --pa:#121B2E; --hondo:#0E1626; --bg2:#0E1626;
  --campo:#0B1220; --sup2:#1B2740; --hover:#17223A; --sel:#172B5E;
  --bd:#26344F; --caja-borde:transparent;
  --fg:#E8EEF8; --mut:#8A9BB5; --enlace:#8FB0FF; --ac2:#8FB0FF;
  --ac:#4C7DFF; --ac-txt:#FFFFFF; --tur:#12E0D2; --tv:#12E0D2;
  --ok:#12E0D2; --ok-fondo:rgba(18,224,210,.10); --ok-borde:rgba(18,224,210,.32); --ok-txt:#7FEDE4;
  --sobre-ok:#04221F;
  --warn:#F5B84B; --warn-fondo:rgba(245,184,75,.10); --warn-borde:rgba(245,184,75,.32); --warn-txt:#F7CD7E;
  --bad:#F2555A; --bad-fondo:rgba(242,85,90,.10); --bad-borde:rgba(242,85,90,.38); --bad-txt:#FFA3A6;
  --bad-fuerte:#C9302C;
  --info-fondo:rgba(76,125,255,.10); --info-borde:rgba(76,125,255,.35); --info-txt:#B5C9FF;
  --velo:rgba(3,7,18,.72); --cab:rgba(11,18,32,.88); --sombra:0 10px 30px rgba(0,0,0,.45);
}
html[data-tema=claro]{
  color-scheme:light;
  --bg:#F5F7FB; --card:#FFFFFF; --pa:#FFFFFF; --hondo:#F5F7FB; --bg2:#F5F7FB;
  --campo:#FFFFFF; --sup2:#EEF2F8; --hover:#EEF2F8; --sel:#E6EDFF;
  --bd:#D5DCE7; --caja-borde:#E4E9F1;
  --fg:#0A2A5E; --mut:#5B6B85; --enlace:#0B3BDB; --ac2:#0B3BDB;
  --ac:#0B3BDB; --ac-txt:#FFFFFF; --tur:#00A79E; --tv:#00A79E;
  --ok:#00A79E; --ok-fondo:#E3F6F4; --ok-borde:#A5DDD8; --ok-txt:#00675F;
  --sobre-ok:#FFFFFF;
  --warn:#C98A00; --warn-fondo:#FFF4DC; --warn-borde:#F0D08E; --warn-txt:#7A4E00;
  --bad:#D93036; --bad-fondo:#FDECEC; --bad-borde:#F3B4B6; --bad-txt:#A8201F;
  --bad-fuerte:#D93036;
  --info-fondo:#EAF0FF; --info-borde:#B8CBFF; --info-txt:#1E3FA8;
  --velo:rgba(10,25,50,.38); --cab:rgba(245,247,251,.92); --sombra:0 10px 30px rgba(10,42,94,.14);
}

/* El icono del calendario: en oscuro se invierte para que se vea; en claro
   ya viene oscuro y no hay que tocarlo. */
html[data-tema=claro] input[type=date]::-webkit-calendar-picker-indicator{filter:none}

/* ─────────── Botón de tema ─────────── */
.temaBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:40px;min-height:40px;padding:0 10px;border-radius:10px;cursor:pointer;
  background:none;border:1px solid var(--bd);color:var(--mut);font:inherit;font-size:14px}
.temaBtn:hover{color:var(--fg)}
.temaBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.temaBtn .temaTxt{display:none}
/* Páginas sin cabecera (entrar, registrarse): el botón va en la esquina. */
.temaBtn.suelto{position:fixed;top:12px;right:12px;z-index:40;background:var(--card)}

/* ─────────── Menú del celular ───────────
   En pantalla ancha la barra se ve entera. En el teléfono se pliega detrás
   de un botón «Menú»: antes eran hasta 12 botones en 4 filas antes de llegar
   al contenido. `!important` porque cada pantalla le da su propio display. */
.menuBtn{display:none}
@media (max-width:760px){
  .menuBtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
    border-radius:10px;border:1px solid var(--bd);background:none;color:var(--fg);
    font:inherit;font-weight:600;font-size:15px;cursor:pointer;margin-left:auto}
  .menuBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .menuPlegable{display:none !important}
  .menuPlegable.abierto{display:flex !important;flex-direction:column;align-items:stretch;
    flex-basis:100%;width:100%;gap:2px;margin:6px 0 0;padding:6px;
    background:var(--card);border:1px solid var(--caja-borde);border-radius:14px}
  .menuPlegable.abierto>*{margin:0 !important}
  .menuPlegable.abierto a,.menuPlegable.abierto>button,.menuPlegable.abierto .temaBtn{
    display:flex !important;align-items:center;justify-content:flex-start;width:100%;
    min-height:48px;padding:0 14px !important;border:0 !important;border-radius:10px;
    background:none !important;color:var(--fg) !important;font-size:16px !important;
    font-weight:500;text-align:left;text-decoration:none;line-height:1.3 !important}
  .menuPlegable.abierto a:hover,.menuPlegable.abierto a:active{background:var(--hover) !important}
  .menuPlegable.abierto .quien{padding:10px 14px 4px;font-size:13px}
  .menuPlegable.abierto .temaTxt{display:inline}
  .menuPlegable.abierto select{margin:4px 0}
}