/* =====================================================================
   ABACO-PWA-001 — capa APP (móvil/tablet) sobre el sitio existente.
   Nada de este archivo aplica por encima de 1000px (mismo corte en el que
   el Header ya cambia a menú burger): desktop queda igual.
   Colores y tipografía: tokens de abaco-home.css (--abaco-*).
   ===================================================================== */

.abaco-appnav,
.abaco-appnav-spacer,
.abaco-quick,
.abaco-install,
.abaco-ios-sheet,
.abaco-mobile-install,
.abaco-app-back{display:none}

@media (max-width:1000px){
	:root{--abaco-appnav-h:62px;--abaco-safe-b:env(safe-area-inset-bottom,0px)}

	/* ---------- App Bar: el Header existente queda fijo arriba ---------- */
	.abaco-header{position:sticky;top:0}
	/* Con el Header fijo, los saltos a anclas (#buscar, #abaco-vehicle-interest,
	   errores de Gravity Forms…) se detienen debajo de él, no detrás. */
	html{scroll-padding-top:96px}

	/* ---------- Barra inferior ---------- */
	.abaco-appnav{
		display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;
		position:fixed;left:0;right:0;bottom:0;z-index:250;
		height:calc(var(--abaco-appnav-h) + var(--abaco-safe-b));
		padding:0 4px var(--abaco-safe-b);
		background:#fff;border-top:1px solid var(--abaco-gray2);box-shadow:0 -8px 24px rgba(0,0,0,.08);
		transition:transform .2s ease;
	}
	.abaco-appnav>a,
	.abaco-appnav>button{
		display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
		min-width:0;height:var(--abaco-appnav-h);padding:0;margin:0;background:none;border:0;border-radius:0;
		font-family:inherit;font-size:10px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.2px;
		color:#5c5c61;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
	}
	.abaco-appnav-ico{display:grid;place-items:center;width:28px;height:24px}
	.abaco-appnav-ico svg{width:22px;height:22px}
	.abaco-appnav>.is-active{color:var(--abaco-red)}
	.abaco-appnav>a:focus-visible,
	.abaco-appnav>button:focus-visible{outline:2px solid var(--abaco-red);outline-offset:-4px}
	.abaco-appnav>.abaco-appnav-cta{color:var(--abaco-red);justify-content:flex-end;padding-bottom:9px}
	.abaco-appnav-cta-ico{
		display:grid;place-items:center;width:54px;height:54px;margin-top:-30px;border-radius:50%;
		background:var(--abaco-red);color:#fff;border:4px solid #fff;box-shadow:0 8px 20px rgba(215,25,32,.35);
	}
	.abaco-appnav-cta-ico svg{width:24px;height:24px;stroke-width:2.6}
	.abaco-appnav>.abaco-appnav-cta.is-active .abaco-appnav-cta-ico{background:var(--abaco-red-dark)}

	/* Teclado abierto (campo de formulario enfocado): la barra se retira. */
	html.abaco-kbd .abaco-appnav{transform:translateY(110%)}

	/* Espacio al final de la página para que la barra nunca tape el Footer. */
	.abaco-appnav-spacer{display:block;height:calc(var(--abaco-appnav-h) + var(--abaco-safe-b));background:var(--abaco-black)}

	/* El CTA flotante "Precalifícate" (Footer de Elementor / fallback PHP)
	   queda dentro de la barra inferior: se oculta para no duplicarlo ni tapar contenido. */
	.elementor-element-rw.elementor-widget-button,
	.abaco-float-cta{display:none!important}

	/* Banner de geolocalización: por encima de la barra, no encima de ella; y
	   mientras el menú móvil está abierto se aparta (su z-index 9999 lo ponía
	   sobre los enlaces del menú). Al cerrar el menú vuelve a mostrarse. */
	.abaco-geo-banner.is-visible{bottom:calc(var(--abaco-appnav-h) + 12px + var(--abaco-safe-b))}
	body:has(#abaco-mobile-menu.abaco-open) .abaco-geo-banner{visibility:hidden;pointer-events:none}

	/* ---------- Aviso de instalación ---------- */
	.abaco-install{
		display:grid;grid-template-columns:44px 1fr 32px;grid-template-areas:"ico txt close" "btn btn btn";gap:12px 12px;align-items:center;
		position:fixed;left:12px;right:12px;z-index:260;bottom:calc(var(--abaco-appnav-h) + 12px + var(--abaco-safe-b));
		max-width:480px;margin:0 auto;padding:14px;border-radius:12px;
		background:var(--abaco-black);color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.35);border-top:3px solid var(--abaco-red);
		opacity:0;transform:translateY(16px);transition:opacity .25s ease,transform .25s ease;
	}
	.abaco-install[hidden]{display:none}
	.abaco-install.is-visible{opacity:1;transform:none}
	.abaco-install img{grid-area:ico;width:44px;height:44px;border-radius:10px;display:block}
	.abaco-install-text{grid-area:txt;min-width:0}
	.abaco-install-text strong{display:block;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.2px;margin-bottom:3px}
	.abaco-install-text span{display:block;font-size:12px;line-height:1.4;color:#cfcfd2}
	.abaco-install-close{grid-area:close;align-self:start;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#2a2a2e;color:#fff;font-size:20px;line-height:1;cursor:pointer}
	.abaco-install-btn{grid-area:btn;width:100%;min-height:46px}
	html.abaco-kbd .abaco-install{display:none}

	/* ---------- Guía iOS / iPadOS ---------- */
	.abaco-ios-sheet{display:block;position:fixed;inset:0;z-index:400}
	.abaco-ios-sheet[hidden]{display:none}
	.abaco-ios-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
	.abaco-ios-panel{
		position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
		padding:24px 22px calc(22px + var(--abaco-safe-b));border-radius:16px 16px 0 0;
		background:#fff;color:var(--abaco-text);text-align:center;box-shadow:0 -12px 40px rgba(0,0,0,.25);
	}
	.abaco-ios-panel img{width:56px;height:56px;border-radius:12px;border:1px solid var(--abaco-gray2);margin:0 auto 12px;display:block}
	.abaco-ios-panel h2{font-size:20px;line-height:1.15;text-transform:uppercase;margin:0 0 16px;color:var(--abaco-black)}
	.abaco-ios-panel ol{list-style:none;margin:0 0 18px;padding:0;text-align:left}
	.abaco-ios-panel li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eee;font-size:14px;line-height:1.35}
	.abaco-ios-panel li:last-child{border-bottom:0}
	.abaco-ios-panel li>span:nth-child(2){flex:1}
	.abaco-ios-panel li svg{width:24px;height:24px;color:#007aff;flex:0 0 auto}
	.abaco-ios-n{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--abaco-red);color:#fff;font-size:13px;font-weight:900}
	.abaco-ios-panel .abaco-btn{width:100%;min-height:48px}
	html.abaco-sheet-open{overflow:hidden}

	/* ---------- Entrada "Instalar app ABACO" en el menú móvil ---------- */
	.abaco-mobile-install{
		display:block;width:100%;margin-top:20px;padding:14px 0;background:none;border:1px solid rgba(255,255,255,.35);border-radius:5px;
		color:#fff;font-family:inherit;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;cursor:pointer;
	}
}

/* =====================================================================
   Teléfonos (<=767px): accesos rápidos del Home y ajustes táctiles.
   ===================================================================== */
@media (max-width:767px){
	.abaco-quick{
		display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 16px;
		background:#fff;border-bottom:1px solid var(--abaco-gray2);
	}
	.abaco-quick[hidden]{display:none}
	.abaco-quick a{
		display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;height:70px;padding:0 4px;
		border:1px solid var(--abaco-gray2);border-radius:10px;background:#fff;color:var(--abaco-black);text-decoration:none;
		font-size:10px;font-weight:800;letter-spacing:0;text-align:center;line-height:1.1;
	}
	.abaco-quick a:first-child{border-color:var(--abaco-red);color:var(--abaco-red);background:#fff8f8}
	.abaco-quick a svg{width:22px;height:22px;flex:0 0 auto}
	.abaco-quick a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	/* La tarjeta de búsqueda del Home se superpone al Hero con margin-top
	   negativo (ABACO-WEB-016); con los accesos rápidos entre ambos, ese
	   solape los taparía: en teléfono la tarjeta queda debajo de ellos. */
	.abaco-quick + .elementor-section .abaco-search-wrap{margin-top:0}

	/* Catálogo: tarjetas con radio APP y controles de al menos 44px. */
	.abaco-inv-wrap .stm-directory-grid-loop{border-radius:10px}
	.abaco-inv-wrap .stm-view-by a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
	.abaco-inv-wrap .stm_ajax_pagination a,
	.abaco-inv-wrap .stm_ajax_pagination span{min-width:44px;height:44px}
	.abaco-inv-filter-toggle{min-height:48px}
}

/* Teléfonos (<=640px): App Bar compacta. La franja superior de contacto se
   retira; su teléfono y WhatsApp siguen en "Más" (menú móvil) y las redes en el Footer. */
@media (max-width:640px){
	.abaco-top{display:none}
}

/* =====================================================================
   Modo standalone (app instalada).
   ===================================================================== */
@media (max-width:1000px){
	html.abaco-standalone .abaco-top{display:none}
	html.abaco-standalone .abaco-header{padding-top:env(safe-area-inset-top,0px)}
	html.abaco-standalone .abaco-mobile-menu{padding-top:calc(20px + env(safe-area-inset-top,0px))}
	html.abaco-standalone body{overscroll-behavior-y:none}
	.abaco-app-back{
		display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;margin-right:-12px;padding:0;
		background:none;border:0;color:#fff;font-size:32px;line-height:1;cursor:pointer;
	}
}

/* =====================================================================
   ABACO-PWA-005 — Botones de Motors y foco de teclado (solo controles PWA).
   Motors (app.css "1.1 Buttons") da a todo <button> box-shadow:0 2px 0 #567ab4
   (línea azul bajo "Más" con área segura, arco bajo la × del aviso, línea en
   "Instalar app ABACO" y "Regresar") y anula todo contorno de foco con
   "button,:focus{outline:none!important}", por eso el :focus-visible de 1.0.3
   no se veía. Aquí se anula la sombra y se restituye el foco solo con
   :focus-visible (teclado): con toque o ratón no cambia nada.
   ===================================================================== */
@media (max-width:1000px){
	.abaco-appnav>button,
	.abaco-install-close,
	.abaco-mobile-install,
	.abaco-app-back{box-shadow:none}

	.abaco-appnav>a:focus-visible,
	.abaco-appnav>button:focus-visible{outline:2px solid var(--abaco-red)!important;outline-offset:-4px}
	.abaco-quick a:focus-visible{outline:2px solid var(--abaco-red)!important;outline-offset:2px}
	.abaco-install-close:focus-visible,
	.abaco-install-btn:focus-visible,
	.abaco-mobile-install:focus-visible,
	.abaco-app-back:focus-visible{outline:2px solid #fff!important;outline-offset:2px}
	.abaco-ios-panel .abaco-btn:focus-visible{outline:2px solid var(--abaco-black)!important;outline-offset:2px}
}