/* ================================================================
   DARK MODE — Mithraeum
   Estrategia: redefinir las custom properties CSS del :root.
   style.css usa var(--color-neutral*) en todas partes, así que
   basta con reasignar la escala para que todo el UI se adapte.
   Solo se añaden overrides puntuales donde las variables se usan
   de forma ambigua (mismo token para texto Y fondo en contextos
   invertidos).
   ================================================================ */


/* ── Escala de neutrales original (light.css, para referencia) ──
   neutral00: #0D0C11  (casi negro)
   neutral01: #43386a  (morado oscuro)
   neutral02: #1a1a1a  (casi negro — texto)
   neutral03: #262626  (gris muy oscuro — fondo body)
   neutral04: #333333
   neutral05: #404040
   neutral55: #4d4d4d
   neutral06: #999
   neutral07: #ccc
   neutral08: #ddd
   neutral09: #eee     (casi blanco — fondo contenido)
   neutral10: white
   ──────────────────────────────────────────────────────────────── */


/* ── 1. Variables de color en modo oscuro ─────────────────────── */

/* Activado automáticamente según preferencia del SO */
@media (prefers-color-scheme: dark) {
	:root:not(.theme-light) {
		--color-neutral00: #040310;      /* profundo: fondos ultra-oscuros, gradientes */
		--color-neutral01: #a090d0;      /* morado claro: titulares (h1-h5) */
		--color-neutral02: #e0dcee;      /* casi blanco: texto principal */
		--color-neutral03: #ccc8e0;      /* gris claro: texto secundario */
		--color-neutral04: #38354a;      /* gris-morado oscuro: bordes */
		--color-neutral05: #7572a0;      /* medio: texto sutil, botones outline */
		--color-neutral55: #525068;
		--color-neutral06: #7a7890;      /* gris medio (similar al original) */
		--color-neutral07: #2e2c40;      /* oscuro: fondos sutiles, separadores */
		--color-neutral08: #231f32;      /* más oscuro: fondos alternos */
		--color-neutral09: #18162a;      /* casi negro: fondo de contenido (#main, .block) */
		--color-neutral10: #100e1e;      /* negro: fondo profundo */

		--color-accenthigh: #ff3a66;
		--color-complementary: #00b8d4;
		--color-purple: #c05090;
	}
}

/* Forzado por JS (toggle manual, ignora preferencia del SO) */
:root.theme-dark {
	--color-neutral00: #040310;
	--color-neutral01: #a090d0;
	--color-neutral02: #e0dcee;
	--color-neutral03: #ccc8e0;
	--color-neutral04: #38354a;
	--color-neutral05: #7572a0;
	--color-neutral55: #525068;
	--color-neutral06: #7a7890;
	--color-neutral07: #2e2c40;
	--color-neutral08: #231f32;
	--color-neutral09: #18162a;
	--color-neutral10: #100e1e;
	--color-accenthigh: #ff3a66;
	--color-complementary: #00b8d4;
	--color-purple: #c05090;
}

/* Forzado a modo claro (suprime prefers-color-scheme) */
:root.theme-light {
	--color-neutral00: #0D0C11;
	--color-neutral01: #43386a;
	--color-neutral02: #1a1a1a;
	--color-neutral03: #262626;
	--color-neutral04: #333333;
	--color-neutral05: #404040;
	--color-neutral55: #4d4d4d;
	--color-neutral06: #999;
	--color-neutral07: #ccc;
	--color-neutral08: #ddd;
	--color-neutral09: #eee;
	--color-neutral10: white;
	--color-accenthigh: #eb0046;
	--color-complementary: #0087AA;
	--color-purple: #cb4d88;
}


/* ── 2. Overrides puntuales ───────────────────────────────────── */
/*
   Problema principal: en light.css algunos selectores usan neutral03
   como color de TEXTO (sobre fondo neutral09). En dark mode, neutral03
   y neutral09 son ambos muy oscuros → texto invisible.
   Solución: en dark forzar esos textos a neutral02 (claro).
*/

@media (prefers-color-scheme: dark) {
	:root:not(.theme-light) body {
		/* light.css usa neutral03 (ahora claro) para bg body → override */
		background-color: var(--color-neutral10);
	}

	/* Texto en áreas de contenido: neutral03 (ahora claro) → OK.
	   Pero body heredaría neutral02 → también OK. Verificar por si acaso. */
	#main, .block, #map {
		color: var(--color-neutral02);
	}

	/* Nav interna: mismo caso */
	#mainnavtabin, #mainin, #maintopin, #mainheaderin, #mainnavin {
		color: var(--color-neutral02);
	}

	/* Texto de contenido: neutral04 en dark = muy oscuro → ilegible */
	article main p, article main blockquote,
	article main li, article main td,
	.block p, .block li,
	#syn p, #syn li, #acta p, #acta li,
	#textmain p, #textmain li {
		color: var(--color-neutral02);
	}

	/* Texto secundario / meta */
	.meta, .firmafecha, .firmafecha2, .socdate,
	.fnota, aside p, aside li {
		color: var(--color-neutral05);
	}

	/* Labels y campos de dato */
	.label, label {
		color: var(--color-neutral05);
	}

	/* Headings en content: neutral01 en dark = lila claro → OK,
	   pero h3 usa neutral55 que en dark puede ser muy oscuro */
	h3 {
		color: var(--color-neutral03);
	}

	aside h3, aside h4 {
		color: var(--color-neutral03);
	}

	/* Article links: neutral03 en dark = claro → legible, pero
	   el hover borde necesita actualizarse */
	#article main a {
		color: var(--color-neutral03) !important;
	}
	#article main a:hover {
		color: var(--color-neutral02) !important;
		border-bottom-color: var(--color-neutral05);
	}

	/* layout.css tiene background-color: white hardcodeado */
	.blockarticle, #blockmain, #article,
	#acta, #syn, #pro, #page, #cohors {
		background-color: var(--color-neutral09);
	}

	/* Nav bar: borde inferior para separarlo de la sección siguiente */
	#blocknav {
		border-bottom: 1px solid var(--color-neutral07);
	}

	/* Footer: neutral02 en dark = lavanda claro → override */
	#blockfooter {
		background-color: var(--color-neutral09);
	}

	#blockfootercentre p {
		color: var(--color-neutral06);
	}

	/* Cajas de texto con bg blanco hardcodeado */
	#fcstxtin {
		background-color: rgba(16, 14, 30, 0.96);
	}
	#fcstxtin p {
		color: var(--color-neutral02);
	}

	/* Sugerencias de búsqueda (hardcodeados en style.css) */
	#suggestions {
		background: var(--color-neutral09);
		border-color: var(--color-neutral07);
		color: var(--color-neutral02);
	}
	.suggestion:hover    { background-color: var(--color-neutral08); }
	.suggestion.active   { background-color: var(--color-neutral07); }

	/* Back-to-top button */
	#backToTop {
		background-color: var(--color-neutral08);
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
	}

	/* TOC nav */
	.tocnav {
		background-color: rgba(16, 14, 30, 0.92);
	}

	/* Actafocus (bg white hardcodeado en style.css) */
	.actafocus {
		background-color: var(--color-neutral09);
		box-shadow: 0 0 .6em rgba(0, 0, 0, 0.5);
	}

	/* Gradientes de texto truncado */
	.comment-truncated .comment-preview::after {
		background: linear-gradient(to bottom, transparent, var(--color-neutral10));
	}
	#acta .comment-truncated .comment-preview::after {
		background: linear-gradient(to bottom, transparent, var(--color-neutral09));
	}
	.txtpreview .framemsg:first-child {
		box-shadow: 0 -50px 50px 20px var(--color-neutral10);
	}
	.txtpreview .framemsg:last-child::before {
		background: linear-gradient(to bottom, transparent, var(--color-neutral10));
	}

	/* Captions (dark.css anterior usaba neutral01 oscuro como bg) */
	.caption {
		background-color: var(--color-neutral08);
	}
	.gal-caption {
		background: var(--color-neutral08);
	}

	/* Visual/gallery: en dark el hover debe aclarar, no oscurecer */
	.gal-single:hover .gal-img-center {
		background: var(--color-neutral07);
	}
	.gal:hover .splide__slide {
		background: var(--color-neutral07);
	}

	/* Blockback (fondo #eee alternativo) */
	#blockback {
		background-color: var(--color-neutral08);
	}

	/* Chat flotante */
	#blockchat {
		background: rgba(16, 14, 30, 0.92);
		border-top-color: var(--color-neutral07);
	}
	#blockchat:hover {
		background: var(--color-neutral09) !important;
	}

	/* Formulario social */
	.socform {
		background: var(--color-neutral09);
		border-color: var(--color-neutral07);
	}
	.socinput {
		color: var(--color-neutral02);
	}

	/* Nav de búsqueda */
	#blocknav {
		background-color: var(--color-neutral08);
	}
	#blocksubnav {
		background-color: var(--color-neutral09);
	}
	#blocknav li a, #blocksubnav li a {
		color: var(--color-neutral03);
	}

	/* Top bar */
	#blocktop, #blocksearch {
		background-color: var(--color-neutral10);
	}

	/* Logged button */
	#logged {
		border-color: var(--color-neutral06);
		color: var(--color-neutral06);
	}
	#logged:hover {
		background: var(--color-neutral09);
		color: var(--color-neutral03);
	}

	/* Section dark (ya era oscura, queda igual o más oscura) */
	.secfull {
		background-color: var(--color-neutral00);
	}

	/* TNM nav tabs */
	#tnmnav, #blocknav {
		background-color: var(--color-neutral09);
	}
	#tnmnav li a {
		color: var(--color-neutral05);
	}
	#tnmnav li a:hover {
		background-color: var(--color-neutral10);
		color: var(--color-neutral03) !important;
	}

	/* Tabs */
	ul#tabs li a {
		border-color: var(--color-neutral07);
		color: var(--color-neutral05);
		background-color: rgba(255, 255, 255, .04);
	}
	ul#tabs li a:hover, #navcontribution {
		background-color: var(--color-neutral07);
		color: var(--color-neutral03);
	}

	/* Label */
	.label {
		color: var(--color-neutral06);
	}

	/* Edition block */
	.edition {
		background-color: var(--color-neutral07) !important;
	}
	.edition header {
		border-bottom-color: var(--color-neutral06);
	}

	/* Buttons */
	.button {
		border-color: var(--color-neutral05);
		color: var(--color-neutral05);
	}
	.button:hover {
		background-color: var(--color-neutral05);
		color: var(--color-neutral09);
	}

	/* Lead text */
	.lead {
		color: var(--color-neutral05);
	}

	/* Visual */
	.visual {
		background-color: var(--color-neutral10);
	}

	/* BtmTop */
	.btntop {
		background-color: var(--color-neutral09);
	}

	/* Blockfooterenkidu */
	#blockfooterenkidu {
		background-color: var(--color-neutral00);
	}

	/* Inscripción romana */
	.inscription {
		border-top-color: rgba(160, 144, 208, 0.6);
		border-bottom-color: rgba(160, 144, 208, 0.4);
		color: rgba(160, 144, 208, 0.9);
	}
	.instrans {
		color: rgba(160, 144, 208, 0.85);
		background: rgba(160, 144, 208, 0.08);
		border-color: rgba(160, 144, 208, 0.5);
	}

	/* Notas amarillas (hardcodeado) */
	.notas {
		background-color: #2a280a;
		color: var(--color-neutral03);
	}

	/* Preview text gradient */
	.framemsg {
		background: var(--color-neutral09);
		border-color: var(--color-neutral07);
	}

	/* Search input */
	#navsearch {
		background-color: var(--color-neutral08);
		border-color: var(--color-neutral07);
		color: var(--color-neutral02);
	}
	#navsearch:focus {
		background-color: var(--color-neutral09);
	}
	#navsearch2 {
		background-color: var(--color-neutral08);
		border-color: var(--color-neutral07);
	}

	/* Selectores de avatar con imagen de fondo */
	.avatar {
		background-color: var(--color-neutral07);
	}

	/* Blockheading gradient */
	.blockheadingblack {
		background-image: linear-gradient(180deg, var(--color-neutral09), var(--color-neutral10));
	}

	/* Preview sociales */
	.socpreview {
		background-color: var(--color-neutral08);
		border-color: var(--color-neutral07);
	}

	/* Paginación */
	.btnpag {
		background-color: var(--color-neutral08);
		color: var(--color-neutral03);
	}
	.btnpag:hover {
		background-color: var(--color-neutral07);
	}
	.btnpagact {
		background-color: var(--color-neutral55);
		color: var(--color-neutral09);
	}

	/* Ref condensed */
	.refcondensed, .r {
		background: var(--color-neutral08);
		border-color: var(--color-neutral07);
		color: var(--color-neutral05);
	}

	/* Yours (editor area) */
	.yours {
		background-color: var(--color-neutral09);
		border-color: var(--color-neutral07);
	}

	/* Imágenes sociales: en dark no las oscurezcamos más */
	.socimage, .videoframe {
		filter: brightness(80%);
	}
	.socimage:hover, .videoframe:hover {
		filter: brightness(100%);
	}

	/* Sa (direcciones de email formateadas) */
	.sa {
		background: var(--color-neutral09);
		border-color: var(--color-neutral07);
		color: var(--color-neutral05);
	}

	/* Actapreview (social preview box) */
	.actinterpost {
		background: var(--color-neutral08);
	}
}


/* ── 3. Clase .dark (mirror de media query, para toggle JS) ──── */

:root.theme-dark body             { background-color: var(--color-neutral10); }
:root.theme-dark #main,
:root.theme-dark .block,
:root.theme-dark #map             { color: var(--color-neutral02); }
:root.theme-dark article main p,
:root.theme-dark article main blockquote,
:root.theme-dark article main li,
:root.theme-dark .block p,
:root.theme-dark .block li,
:root.theme-dark #syn p,
:root.theme-dark #syn li,
:root.theme-dark #acta p,
:root.theme-dark #acta li,
:root.theme-dark #textmain p,
:root.theme-dark #textmain li     { color: var(--color-neutral02); }
:root.theme-dark .meta,
:root.theme-dark .firmafecha,
:root.theme-dark .firmafecha2,
:root.theme-dark .socdate,
:root.theme-dark .fnota,
:root.theme-dark aside p,
:root.theme-dark aside li         { color: var(--color-neutral05); }
:root.theme-dark .label,
:root.theme-dark label            { color: var(--color-neutral05); }
:root.theme-dark h3               { color: var(--color-neutral03); }
:root.theme-dark aside h3,
:root.theme-dark aside h4         { color: var(--color-neutral03); }
:root.theme-dark #mainnavtabin,
:root.theme-dark #mainin,
:root.theme-dark #maintopin,
:root.theme-dark #mainheaderin,
:root.theme-dark #mainnavin       { color: var(--color-neutral02); }
:root.theme-dark .blockarticle,
:root.theme-dark #blockmain,
:root.theme-dark #article,
:root.theme-dark #acta,
:root.theme-dark #syn,
:root.theme-dark #pro,
:root.theme-dark #page,
:root.theme-dark #cohors          { background-color: var(--color-neutral09); }
:root.theme-dark #blocknav        { border-bottom: 1px solid var(--color-neutral07); }
:root.theme-dark #blockfooter     { background-color: var(--color-neutral09); }
:root.theme-dark #blockfootercentre p { color: var(--color-neutral06); }
:root.theme-dark #article main a  { color: var(--color-neutral03) !important; }
:root.theme-dark #article main a:hover { color: var(--color-neutral02) !important; }
:root.theme-dark #fcstxtin        { background-color: rgba(16, 14, 30, 0.96); }
:root.theme-dark #fcstxtin p      { color: var(--color-neutral02); }
:root.theme-dark #suggestions     { background: var(--color-neutral09); border-color: var(--color-neutral07); color: var(--color-neutral02); }
:root.theme-dark .suggestion:hover { background-color: var(--color-neutral08); }
:root.theme-dark .suggestion.active { background-color: var(--color-neutral07); }
:root.theme-dark #backToTop       { background-color: var(--color-neutral08); }
:root.theme-dark .tocnav          { background-color: rgba(16, 14, 30, 0.92); }
:root.theme-dark .actafocus       { background-color: var(--color-neutral09); box-shadow: 0 0 .6em rgba(0,0,0,.5); }
:root.theme-dark .comment-truncated .comment-preview::after { background: linear-gradient(to bottom, transparent, var(--color-neutral10)); }
:root.theme-dark #acta .comment-truncated .comment-preview::after { background: linear-gradient(to bottom, transparent, var(--color-neutral09)); }
:root.theme-dark .txtpreview .framemsg:first-child { box-shadow: 0 -50px 50px 20px var(--color-neutral10); }
:root.theme-dark .txtpreview .framemsg:last-child::before { background: linear-gradient(to bottom, transparent, var(--color-neutral10)); }
:root.theme-dark .caption         { background-color: var(--color-neutral08); }
:root.theme-dark .gal-caption     { background: var(--color-neutral08); }
:root.theme-dark .gal-single:hover .gal-img-center { background: var(--color-neutral07); }
:root.theme-dark .gal:hover .splide__slide { background: var(--color-neutral07); }
:root.theme-dark #blockback       { background-color: var(--color-neutral08); }
:root.theme-dark #blockchat       { background: rgba(16, 14, 30, 0.92); border-top-color: var(--color-neutral07); }
:root.theme-dark #blockchat:hover { background: var(--color-neutral09) !important; }
:root.theme-dark .socform         { background: var(--color-neutral09); border-color: var(--color-neutral07); }
:root.theme-dark .socinput        { color: var(--color-neutral02); }
:root.theme-dark #blocknav        { background-color: var(--color-neutral08); }
:root.theme-dark #blocksubnav     { background-color: var(--color-neutral09); }
:root.theme-dark #blocknav li a,
:root.theme-dark #blocksubnav li a { color: var(--color-neutral03); }
:root.theme-dark #blocktop,
:root.theme-dark #blocksearch     { background-color: var(--color-neutral10); }
:root.theme-dark .secfull         { background-color: var(--color-neutral00); }
:root.theme-dark #tnmnav,
:root.theme-dark #blocknav        { background-color: var(--color-neutral09); }
:root.theme-dark #tnmnav li a     { color: var(--color-neutral05); }
:root.theme-dark #tnmnav li a:hover { background-color: var(--color-neutral10); color: var(--color-neutral03) !important; }
:root.theme-dark ul#tabs li a     { border-color: var(--color-neutral07); color: var(--color-neutral05); background-color: rgba(255,255,255,.04); }
:root.theme-dark ul#tabs li a:hover,
:root.theme-dark #navcontribution { background-color: var(--color-neutral07); color: var(--color-neutral03); }
:root.theme-dark .edition         { background-color: var(--color-neutral07) !important; }
:root.theme-dark .edition header  { border-bottom-color: var(--color-neutral06); }
:root.theme-dark .button          { border-color: var(--color-neutral05); color: var(--color-neutral05); }
:root.theme-dark .button:hover    { background-color: var(--color-neutral05); color: var(--color-neutral09); }
:root.theme-dark .lead            { color: var(--color-neutral05); }
:root.theme-dark .visual          { background-color: var(--color-neutral10); }
:root.theme-dark .btntop          { background-color: var(--color-neutral09); }
:root.theme-dark #blockfooterenkidu { background-color: var(--color-neutral00); }
:root.theme-dark .notas           { background-color: #2a280a; color: var(--color-neutral03); }
:root.theme-dark .framemsg        { background: var(--color-neutral09); border-color: var(--color-neutral07); }
:root.theme-dark #navsearch       { background-color: var(--color-neutral08); border-color: var(--color-neutral07); color: var(--color-neutral02); }
:root.theme-dark #navsearch:focus { background-color: var(--color-neutral09); }
:root.theme-dark #navsearch2      { background-color: var(--color-neutral08); }
:root.theme-dark .socpreview      { background-color: var(--color-neutral08); border-color: var(--color-neutral07); }
:root.theme-dark .btnpag          { background-color: var(--color-neutral08); color: var(--color-neutral03); }
:root.theme-dark .btnpag:hover    { background-color: var(--color-neutral07); }
:root.theme-dark .btnpagact       { background-color: var(--color-neutral55); color: var(--color-neutral09); }
:root.theme-dark .refcondensed,
:root.theme-dark .r               { background: var(--color-neutral08); border-color: var(--color-neutral07); color: var(--color-neutral05); }
:root.theme-dark .yours           { background-color: var(--color-neutral09); border-color: var(--color-neutral07); }
:root.theme-dark .sa              { background: var(--color-neutral09); border-color: var(--color-neutral07); color: var(--color-neutral05); }
:root.theme-dark .actinterpost    { background: var(--color-neutral08); }
:root.theme-dark .inscription     { border-color: rgba(160,144,208,.5); color: rgba(160,144,208,.9); }
:root.theme-dark .instrans        { color: rgba(160,144,208,.85); background: rgba(160,144,208,.08); border-color: rgba(160,144,208,.5); }
:root.theme-dark #logged          { border-color: var(--color-neutral06); color: var(--color-neutral06); }
:root.theme-dark #logged:hover    { background: var(--color-neutral09); color: var(--color-neutral03); }


/* ── 4. Toggle button UI ─────────────────────────────────────── */

#theme-toggle {
	/* Fuera del flujo para no reducir el espacio del logo */
	position: fixed;
	bottom: 5em;
	right: 1em;
	z-index: 500;

	/* Colores fijos para ser visible tanto en light como en dark */
	background: rgba(100, 90, 140, 0.85);
	border: .1em solid rgba(255, 255, 255, 0.25);
	border-radius: 2em;
	color: #fff;
	cursor: pointer;
	font-size: .9em;
	font-family: var(--font-label);
	padding: .3em .8em;
	line-height: 1.6em;
	transition: background .2s, opacity .2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(4px);
	opacity: .75;
}

#theme-toggle:hover {
	background: rgba(100, 90, 140, 1);
	opacity: 1;
}