/* ============================================================
   tokens.css — ÚNICA fuente de verdad del diseño (landing, panel, login y admin).
   Colores como componentes HSL ("H S% L%") para poder hacer hsl(var(--c-red) / .2).
   Claro por defecto; oscuro por preferencia del sistema o por data-theme (assets/js/theme.js).
   ============================================================ */
:root {
	--c-bg: 40 33% 97%;
	--c-surface: 0 0% 100%;
	--c-surface-2: 40 25% 94%;
	--c-field: var(--c-bg); /* fondo de los campos de texto (Admin → Branding → inputs) */
	--c-ink: 222 45% 11%;
	--c-muted: 222 14% 36%;
	--c-line: 222 20% 87%;
	--c-red: 356 80% 45%;
	--c-red-strong: 356 82% 38%;
	--c-red-soft: 356 90% 96%;
	--c-on-red: 0 0% 100%;
	--c-navy: 222 47% 12%;
	--c-on-navy: 40 30% 96%;
	--c-ok: 152 55% 30%;
	--c-warn-soft: 38 95% 92%;
	--c-warn: 28 90% 30%;
	--c-shadow: 222 40% 10%;

	--font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Movimiento: entradas con ease-out fuerte, "spring" para rebotes cortos */
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--dur-fast: .15s;
	--dur: .25s;
	--dur-slow: .6s;
	color-scheme: light dark;
	interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-bg: 222 32% 8%; --c-surface: 222 26% 12%; --c-surface-2: 222 24% 15%;
		--c-ink: 40 25% 94%; --c-muted: 222 12% 70%; --c-line: 222 16% 23%;
		--c-red: 356 82% 52%; --c-red-strong: 356 84% 60%; --c-red-soft: 356 40% 17%;
		--c-navy: 222 40% 6%;
		--c-ok: 152 50% 55%; --c-warn-soft: 28 40% 17%; --c-warn: 34 90% 68%; --c-shadow: 0 0% 0%;
	}
}
:root[data-theme="dark"] {
	--c-bg: 222 32% 8%; --c-surface: 222 26% 12%; --c-surface-2: 222 24% 15%;
	--c-ink: 40 25% 94%; --c-muted: 222 12% 70%; --c-line: 222 16% 23%;
	--c-red: 356 82% 52%; --c-red-strong: 356 84% 60%; --c-red-soft: 356 40% 17%;
	--c-navy: 222 40% 6%;
	--c-ok: 152 50% 55%; --c-warn-soft: 28 40% 17%; --c-warn: 34 90% 68%; --c-shadow: 0 0% 0%;
	color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Transición suave entre páginas (navegadores que lo soportan; el resto navega normal) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Botón de tema (flotante en login, dentro de la barra en el resto) */
.theme-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
	background: hsl(var(--c-surface-2)); color: hsl(var(--c-ink)); font-size: 17px;
	transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.theme-btn:hover { background: hsl(var(--c-line)); }
.theme-btn:active { transform: scale(.92); }
.theme-btn:focus-visible { outline: 3px solid hsl(var(--c-red)); outline-offset: 2px; }
.theme-btn .i-sun, .theme-btn .i-moon { transition: transform .4s var(--ease-spring), opacity .2s; }
:root[data-theme="dark"] .theme-btn .i-moon, :root:not([data-theme="dark"]) .theme-btn .i-sun { display: none; }
.theme-fab { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 60; box-shadow: 0 1px 2px hsl(var(--c-shadow) / .12), 0 8px 20px -8px hsl(var(--c-shadow) / .3); background: hsl(var(--c-surface)); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Selector de idioma (details, sin JS) */
.langsel { position: relative; }
.langsel summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: hsl(var(--c-surface-2)); color: hsl(var(--c-ink)); font: 700 13px/1 var(--font-body); user-select: none; transition: background-color var(--dur-fast), transform var(--dur-fast); }
.langsel summary::-webkit-details-marker { display: none; }
.langsel summary:hover { background: hsl(var(--c-line)); }
.langsel summary:active { transform: scale(.96); }
.langsel summary:focus-visible { outline: 3px solid hsl(var(--c-red)); outline-offset: 2px; }
.langsel[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 70; cursor: default; } /* un clic afuera cierra */
.langsel ul { list-style: none; margin: 8px 0 0; padding: 6px; position: absolute; inset-inline-end: 0; top: 100%; z-index: 80; min-width: 170px; max-height: 70vh; overflow: auto;
	background: hsl(var(--c-surface)); border-radius: 14px; box-shadow: 0 0 0 1px hsl(var(--c-line)), 0 18px 40px -12px hsl(var(--c-shadow) / .45); animation: lang-in .22s var(--ease-out); }
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.langsel li a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: hsl(var(--c-ink)); text-decoration: none; font: 600 15px/1 var(--font-body); }
.langsel li a:hover { background: hsl(var(--c-surface-2)); text-decoration: none; }
.langsel li a[aria-current="true"] { background: hsl(var(--c-red-soft)); color: hsl(var(--c-red-strong)); }
.chrome-fab { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 60; display: flex; gap: 8px; align-items: center; }
.chrome-fab .langsel summary, .chrome-fab .theme-btn { background: hsl(var(--c-surface)); box-shadow: 0 1px 2px hsl(var(--c-shadow) / .12), 0 8px 20px -8px hsl(var(--c-shadow) / .3); }
.theme-fab { position: static; box-shadow: none; }

/* Texto que siempre se lee de izquierda a derecha dentro de páginas RTL (teléfonos, códigos, fechas, mails) */
code, .codebox, .num, input[type="tel"], input[type="email"], input[type="date"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { text-align: right; }
/* Flechas direccionales de Bootstrap Icons se invierten en RTL */
[dir="rtl"] .bi-arrow-left::before { content: "\f138"; }
[dir="rtl"] .bi-arrow-right::before { content: "\f12f"; }

/* Pantallas grandes (monitor 2K/4K a pantalla completa): se agranda toda la interfaz en vez de dejarla chica y pegada a un costado.
   --z es el factor; las alturas de pantalla completa se dividen por --z para que no se pasen. */
:root { --z: 1; }
@media (min-width: 1900px) { :root { --z: 1.2; zoom: 1.2; } }
@media (min-width: 2300px) { :root { --z: 1.4; zoom: 1.4; } }
@media (min-width: 3000px) { :root { --z: 1.7; zoom: 1.7; } }
@media print { :root { --z: 1; zoom: 1; } }

/* Páginas de acceso: volver a la página principal (arriba a la izquierda, espejo de idioma/tema) */
.home-fab { position: fixed; top: 16px; inset-inline-start: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: hsl(var(--c-surface)); color: hsl(var(--c-ink)); font: 700 14px/1 var(--font-body); text-decoration: none; box-shadow: 0 1px 2px hsl(var(--c-shadow) / .12), 0 8px 20px -8px hsl(var(--c-shadow) / .3); transition: transform .12s var(--ease-out), background-color .15s; }
.home-fab:hover { background: hsl(var(--c-surface-2)); }
.home-fab:active { transform: scale(.97); }
.home-fab:focus-visible { outline: 3px solid hsl(var(--c-red) / .55); outline-offset: 2px; }
[dir="rtl"] .home-fab i { transform: scaleX(-1); }
@media (max-width: 420px) { .home-fab span { display: none; } .home-fab { width: 44px; padding: 0; justify-content: center; } }