/**
 * Estilos de la barra de accesibilidad de URI.
 */

/* Botón fijo para abrir la barra. */
.uri-a11y-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: var(--uri-accent);
	color: var(--uri-accent-contrast);
	border: 2px solid var(--uri-accent-strong);
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.uri-a11y-toggle:hover { background: var(--uri-accent-strong); }
@media (max-width: 480px) {
	.uri-a11y-toggle-text { display: none; }
	.uri-a11y-toggle { padding: 14px; font-size: 1.3rem; }
}

/* Barra superior desplegable. */
.uri-a11y-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9001;
	background: var(--uri-surface);
	border-bottom: 2px solid var(--uri-accent);
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.uri-a11y-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 18px 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}
.uri-a11y-group {
	border: 1px solid var(--uri-border);
	border-radius: 10px;
	padding: 14px;
}
.uri-a11y-title { margin: 0 0 10px; font-size: 1rem; }
.uri-a11y-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.uri-a11y-row label { display: inline-flex; align-items: center; gap: 6px; }
.uri-a11y-row input[type="range"] { flex: 1; min-width: 120px; }

.uri-a11y-btn {
	background: var(--uri-surface-2);
	border: 1px solid var(--uri-border);
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	font: inherit;
	color: var(--uri-text);
}
.uri-a11y-btn:hover { border-color: var(--uri-accent); }
.uri-a11y-note { font-size: .85rem; color: var(--uri-text-soft); margin: 6px 0 0; }
.uri-a11y-result { margin-top: 10px; }
.uri-a11y-result p { margin: 0 0 .6em; }

.uri-a11y-foot {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	border-top: 1px solid var(--uri-border);
	padding-top: 12px;
}

/* Párrafo que se está leyendo en voz alta. */
.uri-tts-active {
	background: rgba(255, 214, 10, .35);
	outline: 2px solid var(--uri-accent);
	border-radius: 4px;
}

/* Lectura biónica. */
.uri-bionic { font-weight: 700; }

/* Regla de lectura. */
.uri-a11y-ruler {
	position: fixed;
	left: 0;
	right: 0;
	height: 32px;
	background: rgba(255, 214, 10, .25);
	border-top: 1px solid rgba(0, 0, 0, .25);
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	pointer-events: none;
	z-index: 8500;
}

/* Máscara de pantalla. */
.uri-a11y-mask {
	position: fixed;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .72);
	pointer-events: none;
	z-index: 8400;
}
#uri-a11y-mask-top { top: 0; }
#uri-a11y-mask-bottom { bottom: 0; top: auto; height: 100vh; }

/* Botón "¿Qué significa?" flotante. */
.uri-a11y-dict-btn {
	position: absolute;
	z-index: 9100;
	background: var(--uri-accent);
	color: var(--uri-accent-contrast);
	border: 0;
	border-radius: 8px;
	padding: 6px 12px;
	cursor: pointer;
	font: inherit;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.uri-a11y-dict {
	position: fixed;
	right: 18px;
	bottom: 84px;
	z-index: 9100;
	max-width: 320px;
	background: var(--uri-surface);
	border: 1px solid var(--uri-border);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.uri-a11y-dict p { margin: 6px 0; }
.uri-a11y-dict-ej { color: var(--uri-text-soft); }

/* ------------------------------------------------------------------ */
/* Esquemas de color de la barra.                                      */
/* ------------------------------------------------------------------ */
.uri-scheme-alto {
	--uri-bg: #000000;
	--uri-surface: #000000;
	--uri-surface-2: #111111;
	--uri-border: #ffffff;
	--uri-text: #ffffff;
	--uri-text-soft: #f2f2f2;
	--uri-accent: #ffd60a;
	--uri-accent-strong: #ffe14d;
	--uri-accent-contrast: #000000;
}
.uri-scheme-crema {
	--uri-bg: #f5ecd7;
	--uri-surface: #fbf5e6;
	--uri-surface-2: #efe3c8;
	--uri-border: #d8c9a3;
	--uri-text: #33312b;
	--uri-text-soft: #5c574a;
	--uri-accent: #7a5c2e;
	--uri-accent-strong: #634a24;
	--uri-accent-contrast: #ffffff;
}
.uri-scheme-tranquilo {
	--uri-bg: #eef1ef;
	--uri-surface: #f6f8f6;
	--uri-surface-2: #e6ebe6;
	--uri-border: #cdd6cd;
	--uri-text: #2c332f;
	--uri-text-soft: #59635c;
	--uri-accent: #5a726f;
	--uri-accent-strong: #475856;
	--uri-accent-contrast: #ffffff;
}
.uri-scheme-tranquilo * { box-shadow: none !important; }

/* Columna angosta de lectura. */
.uri-narrow .uri-reading-area,
.uri-narrow .uri-main .uri-container { max-width: 58ch; }

/* Modo texto plano: ocultar imágenes e íconos decorativos del contenido. */
.uri-plaintext .uri-reading-area img,
.uri-plaintext .uri-entry-body img,
.uri-plaintext .uri-msg-body img,
.uri-plaintext .uri-brand-mark { display: none !important; }