/* Constante · colores de toda la web, en claro y en oscuro, y el botón que cambia de uno a otro. Es el único sitio con
   colores: lo cargan todas las páginas, después de fuentes.css y antes de su hoja (portada.css o constante.css).
   Modo claro por defecto. El oscuro, solo si el visitante lo elige con el botón «Modo oscuro» (js/tema.js pone
   data-theme="dark" y lo recuerda en este navegador). Al imprimir o guardar en PDF siempre salen los colores claros. */

:root{
  /* Textos de color y grises con contraste AA (4,5:1) sobre todos los fondos, chips y avisos incluidos */
  --papel:#F1F4F0; --papel-2:#E6ECE6; --hoja:#FFFFFF; --linea:#D2DBD4; --linea-2:#E4EAE5; --zona:#E6ECE6;
  --tinta:#13251E; --tinta-2:#45554E; --tinta-3:#5E6C64; --sobre-tinta:#F1F4F0;
  --verde:#127050; --verde-suave:#DCEDE3;
  --rojo:#B9372A; --rojo-suave:#F8E2DE;
  --ambar:#8C600B; --ambar-suave:#F4EAD0;
  --banda:#10221B; --banda-tinta:#E6EFE9; --banda-tinta-2:#A7BCB1; --banda-borde:#10221B; --guilloche:rgba(166,214,190,.16);
  --sombra:0 1px 2px rgba(19,37,30,.05),0 18px 40px -18px rgba(19,37,30,.22);
  /* Datos del titular que faltan en las páginas legales: amarillo de rotulador, que salte a la vista en los dos modos */
  --marcador:#FFE45C; --marcador-tinta:#3D2E00;
}
@media screen{
  :root[data-theme="dark"]{
    --papel:#0C1612; --papel-2:#13211B; --hoja:#15241E; --linea:#2A3B33; --linea-2:#1E2E27; --zona:#1E3129;
    --tinta:#E3ECE6; --tinta-2:#A9B9B0; --tinta-3:#8C9D95; --sobre-tinta:#0C1612;
    --verde:#46C08D; --verde-suave:#163A2B;
    --rojo:#F2705F; --rojo-suave:#3C1C17;
    --ambar:#E0AE4C; --ambar-suave:#382C12;
    --banda:#07110D; --banda-tinta:#E3ECE6; --banda-tinta-2:#93AA9E; --banda-borde:#22352C; --guilloche:rgba(120,200,160,.13);
    --sombra:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.6);
    --marcador:#FFE45C; --marcador-tinta:#2A1F00;
    color-scheme:dark;
  }
}

/* Botón «Modo oscuro» de la cabecera. En pantallas estrechas queda solo el icono (su nombre sigue en aria-label); en Mi caja
   y en la calculadora, con sus tres pestañas, ya por debajo de 880 px (css/cabecera.css). */
.tema{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid transparent;color:var(--tinta-2);font:inherit;font-size:14.5px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.tema svg{width:17px;height:17px;flex:none}
@media (hover:hover){ .tema:hover{background:var(--papel-2);color:var(--tinta)} }
.tema:active{transform:scale(.96)}
@media (max-width:620px){
  .tema .tema-txt{display:none}
  .tema{padding:8px}
}
@media print{ .tema{display:none!important} }