/**
 * VIVOOD · Paneles laterales
 *
 * Valores medidos sobre el plugin Off-Canvas Sidebars 0.5.8.5 en producción:
 *   - fondo            #F7F6EF
 *   - padding          97.56px 40px 40px
 *   - z-index          2147483646
 *   - transición       0.3s ease
 *   - anchos           60% / 50% / 40% / 30% / 25% segun breakpoint
 *   - el sitio NO se desplaza (equivale a ocs-style-overlay)
 */

:root {
	--vvp-bg: #f7f6ef;
	--vvp-pad-top: 97.56px;
	--vvp-pad-x: 40px;
	--vvp-pad-bottom: 40px;
	--vvp-z: 2147483646;
	--vvp-dur: 0.3s;
	--vvp-ease: ease;
	/* Comprobar contra Apariencia > CSS adicional: el velo actual se define alli. */
	--vvp-velo: rgba(0, 0, 0, 0.5);
}

/* --- Disparador ---------------------------------------------------------- */

.vvp-trigger {
	cursor: pointer;
}

.vvp-aviso {
	display: inline-block;
	padding: 2px 8px;
	border: 1px dashed #b32d2e;
	color: #b32d2e;
	font-size: 13px;
}

/* --- Velo ---------------------------------------------------------------- */

.vvp-overlay {
	position: fixed;
	inset: 0;
	background: var(--vvp-velo);
	z-index: calc(var(--vvp-z) - 1);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--vvp-dur) var(--vvp-ease);
}

.vvp-overlay[hidden] {
	display: none;
}

html.vvp-abierto .vvp-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Bloqueo de scroll mientras hay un panel abierto. */
html.vvp-abierto,
html.vvp-abierto body {
	overflow: hidden;
	touch-action: none;
}

/* --- Panel --------------------------------------------------------------- */

.vvp-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 30%;
	margin: 0;
	padding: var(--vvp-pad-top) var(--vvp-pad-x) var(--vvp-pad-bottom);
	background: var(--vvp-bg);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	z-index: var(--vvp-z);
	box-sizing: border-box;

	/* Cerrado: fuera de pantalla por la derecha.
	   El original animaba `right` de 0 a su anchura; translateX recorre
	   exactamente lo mismo en pantalla sin provocar reflow.
	   Para volver al comportamiento literal del plugin, sustituir por
	   `right: 0` / `right: 100%` con `margin-right: -100%`. */
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform var(--vvp-dur) var(--vvp-ease),
		visibility 0s linear var(--vvp-dur);
}

.vvp-panel[hidden] {
	display: none;
}

.vvp-panel.is-abierto {
	transform: translateX(0);
	visibility: visible;
	transition:
		transform var(--vvp-dur) var(--vvp-ease),
		visibility 0s linear 0s;
}

/* Escalera de anchos original. */
@media (max-width: 480px) {
	.vvp-panel { width: 60%; }
}
@media (min-width: 481px) {
	.vvp-panel { width: 50%; }
}
@media (min-width: 768px) {
	.vvp-panel { width: 40%; }
}
@media (min-width: 992px) {
	.vvp-panel { width: 30%; }
}
@media (min-width: 1200px) {
	.vvp-panel { width: 25%; }
}

/* Barra de administracion, como hacia el plugin. */
@media screen and (max-width: 600px) {
	html.vvp-abierto #wpadminbar {
		display: none;
		height: 0;
	}
}

/* --- Cierre accesible ---------------------------------------------------- */
/* Oculto visualmente; aparece solo al navegar con teclado. */

.vvp-close {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vvp-close:focus-visible {
	position: absolute;
	top: 12px;
	right: 12px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 6px 12px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: #fff;
	border: 1px solid currentColor;
	cursor: pointer;
	z-index: 1;
}

/* --- Accesibilidad ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vvp-panel,
	.vvp-overlay {
		transition-duration: 0.01ms;
	}
}