/* Una misma cabecera en inicio, presentación de proveedores y tienda. */
:root {
    --compro-header-width: 1152px;
    --compro-header-height: 60px;
    --compro-header-top: 12px;
    --compro-header-gutter: 16px;
    --compro-header-padding: 24px;
}
body .compro-topbar:is(.home-navbar, .main-header, .nav) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    width: min(var(--compro-header-width), calc(100% - 2 * var(--compro-header-gutter)));
    max-width: var(--compro-header-width);
    height: var(--compro-header-height);
    min-height: var(--compro-header-height);
    padding: 7px var(--compro-header-padding);
    border: 1px solid #e2e8f0cc;
    border-radius: 999px;
    background: #fffffff2;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 6px -1px #0f172a12, 0 2px 4px -2px #0f172a12;
}
.home-page .home-header {
    top: 0;
    height: calc(var(--compro-header-height) + 2 * var(--compro-header-top));
    padding: var(--compro-header-top) 0;
}
.home-page .home-navbar.compro-topbar { margin: 0 auto; }
body .main-header.compro-topbar { top: var(--compro-header-top); margin: var(--compro-header-top) auto; }
body .nav.compro-topbar { top: var(--compro-header-top); }

/* Muesca del teléfono en horizontal. La tienda e inicio piden
   `viewport-fit=cover` para que la barra de abajo respete la raya de inicio
   del iPhone, y con eso la página llega hasta debajo de la muesca: el logo,
   las categorías y las tarjetas del borde quedaban tapados (auditoría móvil
   del 29/09). El margen va en el body, así que lo que va con la página
   —cabecera incluida, que es pegajosa— se aparta solo; lo fijo lo hace cada
   pieza en su hoja (shell.css, app-design.css, product-detail-design.css,
   styles.css). Sin muesca los márgenes valen 0 y no cambia nada. */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.compro-topbar .nav-logo { display: inline-flex; align-items: center; margin: 0; }
.compro-topbar .nav-links { margin-inline: auto; }
.compro-topbar .nav-links a { font-size: 12px; }
.compro-topbar .nav-login { min-height: 44px; margin-left: auto; padding: 8px 0; font-size: 12px; }
.compro-topbar .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 9px 17px; font-size: 11px; white-space: nowrap; }

@media (max-width: 1023px) {
    .compro-topbar .nav-links { display: none; }
}
@media (max-width: 767px) {
    :root { --compro-header-gutter: 12px; --compro-header-padding: 14px; }
    body .compro-topbar:is(.home-navbar, .main-header, .nav) { gap: 8px; }
    .compro-topbar .nav-login { font-size: 11px; }
    .compro-topbar .nav-cta { padding-inline: 12px; font-size: 10px; }
    .compro-topbar .sn-header-txt, .compro-topbar .sn-header-caret { display: none; }
    /* El buscador se coloca debajo para que la barra conserve su altura. */
    body.exploring-providers .main-header.compro-topbar {
        margin-bottom: 72px;
    }
    body.exploring-providers .compro-topbar .marketplace-search {
        position: absolute; top: calc(100% + 12px); left: 0; right: 0;
        flex: none; width: 100%; max-width: none; margin: 0;
    }
    body.exploring-providers .compro-topbar #provider-search-input { min-height: 44px; }
}

/* La navegación mantiene las mismas medidas al cambiar de sección. */
body .bottom-nav {
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px));
    height: 74px;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 8px 16px;
}
body .bottom-nav .nav-item {
    min-height: 56px;
    font-size: 12px;
    border-radius: 999px;
}
body .bottom-nav .nav-item.active { color: #0066ff; background: #e5eeff; }
body .bottom-nav [data-nav="fav"].active svg { fill: currentColor; }
body .bottom-nav .fav-badge { background: #0066ff; }
@media (max-width: 600px) {
    body .bottom-nav { width: calc(100% - 24px); padding-inline: 8px; }
    body .bottom-nav .nav-item { font-size: 11px; }
}