/*
  PRUEBA CLARO / OSCURO · Mi trabajo, Prints y Descargas
  El botón de abajo a la derecha (js/tema.js) agrega data-tema="oscuro" en <html>
  y la elección se mantiene al pasar de una página a otra.
  Fine Art queda siempre en claro.
*/
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #121210; --fondo-2: #1C1C19; --texto: #EEEAE0; --texto-suave: #A29E94; --linea: #34332E;
  --menu-fondo: rgba(18, 18, 16, 0.94); --menu-texto: #EEE9DF; --menu-suave: #C9C4B9;
  --menu-linea: #2A2925; --menu-hover: #24241F; --menu-logo: none;
}
:root[data-tema="oscuro"] body { background: var(--fondo); color: var(--texto); }
:root[data-tema="oscuro"] .sub,
:root[data-tema="oscuro"] .sitio.abierto .nav-lista { background: rgba(18, 18, 16, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* El bloque negro de Haciendo Historia se separa del fondo con un borde fino */
:root[data-tema="oscuro"] .destacado { box-shadow: inset 0 0 0 1px #34332E; }

.boton-tema {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  font: 600 13px/1 var(--fuente); letter-spacing: .04em; cursor: pointer;
  color: var(--fondo); background: var(--texto); border: 0; border-radius: 999px; padding: 13px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .2s;
}
.boton-tema:hover { opacity: .85; }
.boton-tema:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }