/* =========================================
   MenubotIA Styles - v1.1.12 (Fix Tamaños)
   ========================================= */

/* 1. VARIABLES DINÁMICAS
   Definimos las variables base para PC.
   Solo cambiamos si es Móvil o Monitor Ultra-Wide (4K).
*/

/* --- BASE / PC ESTÁNDAR (De 769px a 1920px) --- */

/* Admin bar height (when logged in) */
:root { --mbi-adminbar-h: 0px; }
body.admin-bar { --mbi-adminbar-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --mbi-adminbar-h: 46px; } }



#menubotia {
	--mbi-current-w: var(--mbi-panel-w-pc);
	--mbi-current-h: var(--mbi-panel-h-pc);
	--mbi-current-pad-y: var(--mbi-handle-py-pc);
	--mbi-current-pad-x: var(--mbi-handle-px-pc);
}

/* --- MÓVIL (Hasta 768px) --- */
@media (max-width: 768px) {
	#menubotia {
		--mbi-current-w: var(--mbi-panel-w-mobile);
		--mbi-current-h: var(--mbi-panel-h-mobile);
		--mbi-current-pad-y: var(--mbi-handle-py-mobile);
		--mbi-current-pad-x: var(--mbi-handle-px-mobile);
	}
}

/* --- PANTALLA GIGANTE / 4K (Solo desde 1201px en adelante) --- */
/* Esto evita que un monitor normal se detecte como "Large" */
@media (min-width: 1201px) {
	#menubotia {
		--mbi-current-w: var(--mbi-panel-w-large);
		--mbi-current-h: var(--mbi-panel-h-large);
		--mbi-current-pad-y: var(--mbi-handle-py-large);
		--mbi-current-pad-x: var(--mbi-handle-px-large);
	}
}

/* =========================================
   ESTRUCTURA PRINCIPAL
   ========================================= */

#menubotia.mbi {
	position: fixed;
	z-index: 999999;
	display: flex;
	gap: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	transition: transform .22s ease, opacity .22s ease;
	box-sizing: border-box;
	
    /* IMPORTANTE: Borrar o comentar estas líneas para que el Offset funcione */
	/* bottom: 0; */
	/* top: 0; */
}

#menubotia * {
	box-sizing: border-box;
}

/* =========================================
   POSICIÓN Y OFFSET (CORREGIDO)
   ========================================= */
   
/* Posición Horizontal (X) */
#menubotia.mbi.mbi-side-left { left: var(--mbi-offset-x); right: auto; }
#menubotia.mbi.mbi-side-right { right: var(--mbi-offset-x); left: auto; flex-direction: row-reverse; }

/* Posición Vertical (Y) - ARRIBA */
#menubotia.mbi.mbi-vpos-top { 
    top: var(--mbi-offset-y); 
    bottom: auto; 
}

/* Corrección para Admin Bar cuando está ARRIBA */
body.admin-bar #menubotia.mbi.mbi-vpos-top { 
    top: calc(var(--mbi-offset-y) + var(--mbi-adminbar-h)); 
}

/* Posición Vertical (Y) - ABAJO */
#menubotia.mbi.mbi-vpos-bottom { 
    bottom: var(--mbi-offset-y); 
    top: auto; 
}

/* =========================================
   ALINEACIÓN VERTICAL DINÁMICA
   ========================================= */

/* Cuando está ARRIBA: Alineamos todo al borde SUPERIOR */
#menubotia.mbi.mbi-vpos-top { 
    align-items: flex-start; 
}

/* Cuando está ABAJO: Alineamos todo al borde INFERIOR */
#menubotia.mbi.mbi-vpos-bottom { 
    align-items: flex-end; 
}

/* =========================================
   CORRECCIÓN FINAL DEL BOTÓN (PESTAÑA)
   ========================================= */
#menubotia .mbi-handle {
    /* Forzamos margen vertical 0 para evitar el desfase */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    /* Mantenemos solo el margen lateral */
    margin-left: 5px; 
    margin-right: 5px;

    /* Usamos Flexbox para centrar el texto perfectamente dentro del botón */
    display: flex;
    align-items: center;
    justify-content: center;
}

#menubotia.mbi.mbi-autohide-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
}

/* =========================================
   PESTAÑA (HANDLE)
   ========================================= */
#menubotia .mbi-handle {
	cursor: pointer;
	border-style: solid;
	border-width: var(--mbi-handle-bw);
	border-color: var(--mbi-handle-bc);
	background: var(--mbi-handle-bg);
	color: var(--mbi-handle-color);
	/* Variable dinámica */
	padding: 10px; /* grosor controlado */
	border-radius: 14px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	user-select: none;
	transition: all .2s ease;
	white-space: nowrap;
	margin: 0 5px;
}

#menubotia .mbi-handle .mbi-handle-text {
	display: inline-block;
	padding: 0 14px;
	transform: none; /* Se eliminó el rotate(-90deg) */
	transform-origin: center;
	white-space: nowrap;
}

/* =========================================
   PANEL PRINCIPAL
   ========================================= */
/* =========================================
   PANEL PRINCIPAL (CORREGIDO)
   ========================================= */
#menubotia .mbi-panel {
	/* Ancho dinámico según dispositivo */
	width: var(--mbi-current-w) !important;
	
    /* CORRECCIÓN: Altura máxima calculada (Pantalla - Offset) 
       Esto fuerza al contenido a "chocar" con el borde inferior y activar el scroll */
	height: auto !important;
	max-height: calc(100vh - var(--mbi-offset-y)) !important;
	
	background: var(--mbi-panel-bg);
	border: var(--mbi-panel-bw) solid var(--mbi-panel-bc);
	border-radius: var(--mbi-panel-radius);
	padding: 0;
	box-shadow: 0 10px 28px rgba(0,0,0,.16);
	
	display: flex;
	flex-direction: column;
	overflow: hidden;
	
	transform-origin: left center;
	transition: transform .22s ease, opacity .22s ease;
}

/* Soporte para móviles modernos (barra de navegación dinámica) */
@supports (height: 100dvh) {
	.mbi-panel {
		height: auto !important;
		max-height: calc(100dvh - var(--mbi-offset-y)) !important;
	}
}



#menubotia.mbi-side-right .mbi-panel { transform-origin: right center; }

/* Estados Abierto/Cerrado */
#menubotia.mbi-closed .mbi-panel {
	opacity: 0;
	pointer-events: none;
	transform: scale(.96) translateX(-8px);
	/* Colapsar al cerrar para evitar clicks fantasma */
	width: 0 !important; 
	height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
#menubotia.mbi-open .mbi-panel { 
	opacity: 1; 
	pointer-events: auto; 
	transform: scale(1); 
}

/* =========================================
   CONTENEDOR FLEX (Botones + Lista)
   ========================================= */
#menubotia .mbi-panel-main {
	display: flex;
	width: 100%;
	
    /* CORRECCIÓN: Eliminamos height:100% y usamos flex para que respete los límites */
	/* height: 100%; */ 
    flex: 1;
    min-height: 0; /* Crítico para que el scroll funcione dentro de Flexbox */
	
	gap: 0;
	align-items: center;
	justify-content: space-between;
}

/* Dirección */
#menubotia.mbi-axis-horizontal .mbi-panel-main { flex-direction: row; }
#menubotia.mbi-axis-vertical .mbi-panel-main { flex-direction: column; }

/* =========================================
   VIEWPORT (Área Scrollable)
   ========================================= */
#menubotia .mbi-viewport {
	/* Flex 1: Ocupa el espacio disponible entre botones */
	flex: 1 1 auto; 
	
	width: 100%;
	height: auto;
	min-height: 0; /* Fix crítico flexbox */
	
	overflow: hidden;
	scroll-behavior: smooth;
	position: relative;
	padding: 0 var(--mbi-panel-pad);
}

#menubotia .mbi-viewport::-webkit-scrollbar { display: none; }

/* =========================================
   TRACK (Lista UL)
   ========================================= */
#menubotia .mbi-track {
	margin: 0; padding: 0; list-style: none;
	display: flex; gap: 0; width: 100%;
}

#menubotia.mbi-axis-vertical .mbi-track {
	flex-direction: column;
	height: auto;
}

#menubotia.mbi-axis-horizontal .mbi-track {
	flex-direction: row;
	width: max-content;
	height: 100%;
	align-items: center;
}

/* Items */
#menubotia .mbi-item { 
	margin: 0; padding: 0; flex-shrink: 0; 
	width: 100%; 
}
#menubotia.mbi-axis-horizontal .mbi-item { width: auto; }

/* Enlaces */
#menubotia .mbi-link {
	display: flex; align-items: center; gap: 10px;
	color: var(--mbi-panel-text); text-decoration: none;
	padding: 8px 10px; 
	transition: background .15s ease, color .15s ease;
	white-space: nowrap;
	width: 100%;
}
#menubotia .mbi-link:hover {
	color: var(--mbi-panel-hover); background: rgba(0,0,0,.04); 
}

#menubotia .mbi-icon {
	font-size: var(--mbi-icon-size); width: var(--mbi-icon-size);
	height: var(--mbi-icon-size); line-height: var(--mbi-icon-size);
	flex-shrink: 0;
}

/* Separadores */
#menubotia.mbi-axis-vertical .mbi-item + .mbi-item .mbi-link { border-top: var(--mbi-sep-w) solid var(--mbi-sep-c); }
#menubotia.mbi-axis-horizontal .mbi-item + .mbi-item .mbi-link { border-left: var(--mbi-sep-w) solid var(--mbi-sep-c); }

/* =========================================
   ANIMACIONES
   ========================================= */
#menubotia.mbi-anim .mbi-track {
	will-change: transform;
	animation-duration: var(--mbi-anim-dur);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
#menubotia.mbi-anim.mbi-axis-vertical.mbi-dir-up .mbi-track { animation-name: mbiUp; }
#menubotia.mbi-anim.mbi-axis-vertical.mbi-dir-down .mbi-track { animation-name: mbiDown; }
#menubotia.mbi-anim.mbi-axis-horizontal.mbi-dir-left .mbi-track { animation-name: mbiLeft; }
#menubotia.mbi-anim.mbi-axis-horizontal.mbi-dir-right .mbi-track { animation-name: mbiRight; }

@keyframes mbiUp   { from { transform: translateY(0); }   to { transform: translateY(-50%); } }
@keyframes mbiDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes mbiLeft { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
@keyframes mbiRight{ from { transform: translateX(-50%); } to { transform: translateX(0); } }

#menubotia.mbi-pause-hover .mbi-viewport:hover .mbi-track { animation-play-state: paused; }

/* =========================================
   BOTONES DE SCROLL
   ========================================= */
#menubotia .mbi-scroll-btn {
	width: var(--mbi-scroll-btn-w);
	height: var(--mbi-scroll-btn-h);
	box-sizing: border-box;
	flex: 0 0 auto; /* Importante: no estirar */
	border-width: var(--mbi-scroll-btn-bw);
	border-style: solid;
	border-color: var(--mbi-scroll-btn-bc);
	background: var(--mbi-scroll-btn-bg);
	color: var(--mbi-scroll-btn-icon-color);
	border-radius: var(--mbi-scroll-btn-radius);
	padding: var(--mbi-scroll-btn-pt) var(--mbi-scroll-btn-pr) var(--mbi-scroll-btn-pb) var(--mbi-scroll-btn-pl);
	font-size: var(--mbi-scroll-btn-icon-size);
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	z-index: 10;
	margin: 0;
}
#menubotia .mbi-scroll-btn:hover { background: var(--mbi-panel-hover); color: #fff; border-color: transparent; }
#menubotia .mbi-scroll-btn:disabled { opacity: 0.3; cursor: not-allowed; }
#menubotia.mbi-axis-vertical .mbi-scroll-btn .mbi-btn-arrow {
    display: inline-block;
    transform: rotate(90deg);
}

/* =========================================
   MODO DOCK
   ========================================= */
#menubotia.mbi-dock.mbi-closed .mbi-handle {
	width: var(--mbi-dock-w); padding-left: 0; padding-right: 0; text-indent: -9999px;
}
#menubotia.mbi-dock.mbi-closed .mbi-handle::after {
	content: ""; display: block; height: 38px; width: 4px; margin: 0 auto;
	border-radius: 99px; background: rgba(255,255,255,.85);
}
#menubotia.mbi-dock.mbi-closed .mbi-handle:hover {
	width: var(--mbi-dock-expand); 
	padding-left: var(--mbi-current-pad-x); 
	padding-right: var(--mbi-current-pad-x); 
	text-indent: 0;
}
#menubotia.mbi-dock.mbi-closed .mbi-handle:hover::after { display: none; }

/* Forzar posicionamiento Fijo via Shortcode */
#menubotia.mbi.mbi-sticky {
    position: fixed !important;
}