/**
 * VO Reservas — puente de tema.
 *
 * Capa de respaldo para que la cabecera, el pie y el cuerpo del TEMA tomen los
 * colores del plugin. Solo se carga en temas clásicos, y solo con el ajuste
 * «Uniformar el tema» encendido.
 *
 * Hay tres clases y no son lo mismo:
 *
 * - `vor-puente` la lleva cualquier pantalla donde el puente actúa. Bajo ella
 *   solo se toca lo que es de WordPress, no del tema (sección 8).
 * - `vor-puente--generico` la lleva únicamente un tema clásico SIN adaptador.
 *   Casi todo cuelga de ella, porque casi todo es adivinar.
 * - `vor-puente--contenido` la lleva la pantalla cuyo área de contenido NO es
 *   del plugin. En el catálogo y en la ficha esa área es nuestra y el tema no
 *   tiene nada que decir ahí; en el carrito y el pago sí, porque el contenido es
 *   de WooCommerce y su texto tiene que seguir siendo legible.
 *
 * Esta hoja NO es el mecanismo principal. En un tema de bloques manda su
 * theme.json y en un clásico con adaptador mandan sus propios ajustes, y en los
 * dos casos el tema se repinta con sus reglas, que encajan mejor que las de
 * aquí. Lo de abajo es lo que queda para un tema clásico desconocido: los
 * selectores de _s / underscores, de los que desciende buena parte del catálogo
 * clásico. Acierta en la mayoría y no acierta en todos, y por eso el ajuste
 * viene apagado.
 *
 * Los colores de la cabecera, la navegación y el pie llevan !important. No es
 * pereza: un tema clásico escribe su navegación con selectores como
 * `.main-navigation .main-nav ul li a`, que tiene más especificidad que
 * cualquier cosa razonable que se pueda poner aquí, y sin ganarle el texto del
 * menú se queda del color anterior sobre un fondo que ya ha cambiado —es decir,
 * ilegible—. El riesgo está acotado porque estos selectores solo alcanzan el
 * armazón del tema, nunca el marcado del plugin.
 *
 * Se usan exclusivamente tokens que Themes::estilo_inline() garantiza. En una
 * página ajena al plugin frontend.css no se carga, así que cualquier token que
 * solo viva allí (--vor-font, los radios, --vor-shadow) llegaría vacío: los
 * radios se piden con valor de respaldo y las sombras se componen a partir de
 * --vor-shadow-rgb, que sí viaja en la paleta.
 */

/* ==========================================================================
   1. Lienzo del documento
   ========================================================================== */

body.vor-puente--generico {
	background-color: var(--vor-bg);
	color: var(--vor-ink);
}

/**
 * Los contenedores intermedios del tema suelen llevar su propio fondo blanco.
 * Dejarlos transparentes es más seguro que darles color: si el tema no los usa,
 * no pasa nada, y si los usa, deja ver el lienzo de debajo en lugar de tapar la
 * página con un rectángulo del color anterior.
 */
.vor-puente--generico #page,
.vor-puente--generico .site,
.vor-puente--generico #content,
.vor-puente--generico .site-content,
.vor-puente--generico .content-area,
.vor-puente--generico .site-main,
.vor-puente--generico .inside-article,
.vor-puente--generico .hentry,
.vor-puente--generico .entry-content,
.vor-puente--generico .wp-site-blocks {
	background-color: transparent;
}

/* ==========================================================================
   2. Cabecera y navegación
   ========================================================================== */

.vor-puente--generico .site-header,
.vor-puente--generico #masthead,
.vor-puente--generico .inside-header,
.vor-puente--generico .main-navigation,
.vor-puente--generico .site-branding {
	background-color: var(--vor-surface) !important;
	color: var(--vor-ink) !important;
	border-color: var(--vor-line);
}

/**
 * `.main-title` es de GeneratePress y `.site-title` de _s: entre las dos se
 * cubre casi todo el catálogo clásico. El rótulo del sitio es lo primero que se
 * lee, así que vale la pena listar las dos convenciones.
 */
.vor-puente--generico .site-title,
.vor-puente--generico .site-title a,
.vor-puente--generico .main-title,
.vor-puente--generico .main-title a,
.vor-puente--generico .site-header h1 a,
.vor-puente--generico .site-branding a,
.vor-puente--generico .main-navigation a,
.vor-puente--generico .main-navigation .main-nav ul li a,
.vor-puente--generico .main-navigation .menu-toggle,
.vor-puente--generico .menu-toggle,
.vor-puente--generico .nav-menu a,
.vor-puente--generico #site-navigation a {
	color: var(--vor-ink) !important;
}

.vor-puente--generico .site-description,
.vor-puente--generico .site-header .site-description,
.vor-puente--generico .site-tagline {
	color: var(--vor-ink-2) !important;
}

.vor-puente--generico .main-navigation a:hover,
.vor-puente--generico .main-navigation a:focus-visible,
.vor-puente--generico .main-navigation .main-nav ul li:hover > a,
.vor-puente--generico .main-navigation .current-menu-item > a,
.vor-puente--generico .main-navigation .main-nav ul li[class*='current-menu-'] > a,
.vor-puente--generico .main-navigation .current_page_item > a {
	color: var(--vor-accent) !important;
}

/**
 * Los submenús son un panel flotante: si se quedan con el fondo del tema
 * anterior aparece un rectángulo blanco sobre una cabecera oscura, que es el
 * síntoma más visible de un repintado a medias.
 */
.vor-puente--generico .main-navigation ul ul,
.vor-puente--generico .main-navigation .sub-menu,
.vor-puente--generico .menu-item-has-children .sub-menu {
	background-color: var(--vor-surface-2) !important;
	border-color: var(--vor-line);
	box-shadow: 0 12px 32px rgb(var(--vor-shadow-rgb) / .38);
}

/* ==========================================================================
   3. Pie
   ========================================================================== */

.vor-puente--generico .site-footer,
.vor-puente--generico #colophon,
.vor-puente--generico .site-info,
.vor-puente--generico .footer-widgets,
.vor-puente--generico .inside-site-info {
	background-color: var(--vor-surface) !important;
	color: var(--vor-ink-2) !important;
	border-color: var(--vor-line);
}

.vor-puente--generico .site-footer a,
.vor-puente--generico #colophon a,
.vor-puente--generico .site-info a {
	color: var(--vor-accent) !important;
}

/* ==========================================================================
   4. Contenido ajeno al plugin
   ========================================================================== */

/**
 * Solo donde el contenido no es del plugin. Un tema clásico pinta los enlaces
 * del contenido con selectores como `.inside-article a`, que tienen más
 * especificidad que `.vor-btn--primario`: aplicados en el catálogo, el rótulo
 * del botón de reservar se queda dorado sobre dorado. Se comprobó en pruebas.
 */
.vor-puente--generico.vor-puente--contenido .entry-title,
.vor-puente--generico.vor-puente--contenido .entry-title a,
.vor-puente--generico.vor-puente--contenido .page-title,
.vor-puente--generico.vor-puente--contenido h1,
.vor-puente--generico.vor-puente--contenido h2,
.vor-puente--generico.vor-puente--contenido h3,
.vor-puente--generico.vor-puente--contenido h4,
.vor-puente--generico.vor-puente--contenido h5,
.vor-puente--generico.vor-puente--contenido h6 {
	color: var(--vor-ink);
}

.vor-puente--generico.vor-puente--contenido .entry-meta,
.vor-puente--generico.vor-puente--contenido .entry-meta a,
.vor-puente--generico.vor-puente--contenido .post-meta,
.vor-puente--generico.vor-puente--contenido figcaption,
.vor-puente--generico.vor-puente--contenido .wp-element-caption {
	color: var(--vor-ink-2);
}

.vor-puente--generico.vor-puente--contenido .entry-content a,
.vor-puente--generico.vor-puente--contenido .page-content a,
.vor-puente--generico.vor-puente--contenido .wp-block-post-content a {
	color: var(--vor-accent);
}

.vor-puente--generico.vor-puente--contenido .entry-content a:hover,
.vor-puente--generico.vor-puente--contenido .page-content a:hover {
	color: var(--vor-accent-hi);
}

.vor-puente--generico.vor-puente--contenido hr,
.vor-puente--generico.vor-puente--contenido .wp-block-separator {
	border-color: var(--vor-line);
	color: var(--vor-line);
}

.vor-puente--generico.vor-puente--contenido blockquote,
.vor-puente--generico.vor-puente--contenido .wp-block-quote {
	border-color: var(--vor-accent);
	color: var(--vor-ink-2);
}

.vor-puente--generico.vor-puente--contenido code,
.vor-puente--generico.vor-puente--contenido pre,
.vor-puente--generico.vor-puente--contenido .wp-block-code,
.vor-puente--generico.vor-puente--contenido .wp-block-table th {
	background-color: var(--vor-surface-2);
	color: var(--vor-ink);
}

.vor-puente--generico.vor-puente--contenido .wp-block-table td,
.vor-puente--generico.vor-puente--contenido .wp-block-table th,
.vor-puente--generico.vor-puente--contenido table th,
.vor-puente--generico.vor-puente--contenido table td {
	border-color: var(--vor-line);
}

/* ==========================================================================
   5. Barras laterales y widgets
   ========================================================================== */

.vor-puente--generico .widget-area,
.vor-puente--generico .sidebar,
.vor-puente--generico .widget,
.vor-puente--generico .wp-block-search__input {
	background-color: var(--vor-surface);
	color: var(--vor-ink-2);
	border-color: var(--vor-line);
}

.vor-puente--generico .widget-title,
.vor-puente--generico .widget h2,
.vor-puente--generico .wp-block-heading {
	color: var(--vor-ink);
}

.vor-puente--generico .widget a,
.vor-puente--generico .widget-area a {
	color: var(--vor-accent);
}

/* ==========================================================================
   6. Formularios y botones del tema
   ========================================================================== */

/**
 * No se toca nada dentro de nuestras pantallas: los formularios del catálogo,
 * de la ficha y del pago son del plugin y ya están resueltos.
 */
.vor-puente--generico.vor-puente--contenido input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
.vor-puente--generico.vor-puente--contenido select,
.vor-puente--generico.vor-puente--contenido textarea {
	background-color: var(--vor-surface-2);
	color: var(--vor-ink);
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-s, 8px);
}

.vor-puente--generico.vor-puente--contenido input::placeholder,
.vor-puente--generico.vor-puente--contenido textarea::placeholder {
	color: var(--vor-ink-3);
}

.vor-puente--generico.vor-puente--contenido input:focus-visible,
.vor-puente--generico.vor-puente--contenido select:focus-visible,
.vor-puente--generico.vor-puente--contenido textarea:focus-visible {
	border-color: var(--vor-accent);
	outline: 2px solid var(--vor-accent);
	outline-offset: 1px;
}

.vor-puente--generico.vor-puente--contenido button:not(.vor-btn),
.vor-puente--generico.vor-puente--contenido input[type='submit'],
.vor-puente--generico.vor-puente--contenido input[type='button'],
.vor-puente--generico.vor-puente--contenido .wp-block-button__link,
.vor-puente--generico.vor-puente--contenido .button:not(.vor-btn) {
	background-color: var(--vor-accent);
	color: var(--vor-accent-ink);
	border-color: var(--vor-accent);
}

.vor-puente--generico.vor-puente--contenido button:not(.vor-btn):hover,
.vor-puente--generico.vor-puente--contenido input[type='submit']:hover,
.vor-puente--generico.vor-puente--contenido .wp-block-button__link:hover,
.vor-puente--generico.vor-puente--contenido .button:not(.vor-btn):hover {
	background-color: var(--vor-accent-hi);
	color: var(--vor-accent-ink);
	border-color: var(--vor-accent-hi);
}

/* ==========================================================================
   7. Piezas del propio WordPress
   ========================================================================== */

/**
 * La barra de administración conserva su color a propósito: es la del panel, no
 * la del sitio, y quien la ve es siempre alguien con sesión abierta que espera
 * verla como en el resto de WordPress.
 */

.vor-puente--generico .skip-link,
.vor-puente--generico .screen-reader-text:focus {
	background-color: var(--vor-surface-2);
	color: var(--vor-ink);
}

/**
 * El paginador de comentarios y de archivo son de los pocos sitios donde el
 * tema pinta texto sobre un fondo que aquí cambia de polaridad sin declarar
 * color propio.
 */
.vor-puente--generico .nav-links,
.vor-puente--generico .page-numbers,
.vor-puente--generico .comment-metadata,
.vor-puente--generico .comment-author {
	color: var(--vor-ink-2);
}

.vor-puente--generico .page-numbers.current,
.vor-puente--generico .nav-links a {
	color: var(--vor-accent);
}

/* ==========================================================================
   8. Bloques de WordPress en un tema clásico
   ========================================================================== */

/**
 * Esta sección sí se aplica siempre que el tema sea clásico, con adaptador o
 * sin él, porque no repinta nada del tema: repinta piezas del propio WordPress.
 *
 * El motivo es concreto. La inyección en theme.json también declara los estilos
 * de elemento (`styles.elements.button`), pero WordPress solo compila ese trozo
 * de los estilos globales cuando el tema TIENE un theme.json. En un tema clásico
 * el botón de un bloque se queda con el gris #32373c que trae la biblioteca de
 * bloques, y ni el ajuste de botones del tema lo alcanza porque su selector no
 * contempla `.wp-block-search__button`.
 */
.vor-puente .wp-block-button__link,
.vor-puente .wp-element-button,
.vor-puente .wp-block-search__button,
.vor-puente .wp-block-file__button {
	background-color: var(--vor-accent);
	color: var(--vor-accent-ink);
	border-color: var(--vor-accent);
}

.vor-puente .wp-block-button__link:hover,
.vor-puente .wp-element-button:hover,
.vor-puente .wp-block-search__button:hover {
	background-color: var(--vor-accent-hi);
	color: var(--vor-accent-ink);
}

.vor-puente .wp-block-search__input,
.vor-puente .wp-block-search .wp-block-search__input {
	background-color: var(--vor-surface-2);
	color: var(--vor-ink);
	border-color: var(--vor-line);
}

/**
 * El botón esquematizado es el único que va sin relleno: darle el fondo del
 * acento lo convertiría en el botón normal y se perdería la distinción.
 */
.vor-puente .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: var(--vor-accent);
}