/* Identidad compartida: las pantallas conservan su distribución, pero ninguna
   de sus hojas locales debe cambiar las proporciones del logo de inicio. */
@font-face {
    font-family: 'ComPRO Brand';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

.compro-brand {
    --compro-logo-size: 23px;
    --compro-badge-size: 16px;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: 'ComPRO Brand', system-ui, -apple-system, sans-serif !important;
    font-size: var(--compro-logo-size) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: -1.1px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}
.compro-brand > .compro-brand-com,
.compro-brand > .compro-brand-pro {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}
.compro-brand > .compro-brand-com {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: var(--compro-logo-size) !important;
    letter-spacing: -1.1px !important;
}
.compro-brand > .compro-brand-pro {
    margin: 0 0 0 1px !important;
    padding: 1px 5px !important;
    border-radius: 7px !important;
    background: #0066ff !important;
    color: #fff !important;
    font-size: var(--compro-badge-size) !important;
    letter-spacing: -.5px !important;
}

/* El mismo logo necesita una superficie clara sobre los fondos oscuros. */
.footer-logo .compro-brand,
:root[data-theme="dark"] .marca .compro-brand {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #fff !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .marca .compro-brand {
        padding: 4px 8px !important;
        border-radius: 8px !important;
        background: #fff !important;
    }
}
@media (max-width: 767px) {
    .compro-brand { --compro-logo-size: 21px; --compro-badge-size: 15px; }
}
@media (max-width: 480px) {
    .compro-brand { --compro-logo-size: 20px; }
}

/* Desplegables (28/10): cada hoja dejaba la flecha nativa pegada al borde y con
   un hueco distinto; aquí todos llevan la misma flecha, a 12 px del borde, y el
   texto nunca pasa por debajo. !important porque las reglas de cada pantalla
   usan `background:` y `padding:` abreviados, que la borrarían. Las etiquetas
   de segmento de Mi mercado (.pv-mk-seg) ya dibujan la suya a su tamaño. */
select:not([multiple]):not([size]):not(.pv-mk-seg) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
    padding-right: 34px !important;
    text-overflow: ellipsis;
}

/* El buscador de direcciones de Google con la pinta de los demás campos (08/11):
   sin esto salía cuadrado y con borde negro. Google solo deja tocar en el
   elemento borde, esquinas, fondo y letra. */
gmp-place-autocomplete {
    border: 1px solid var(--apple-border, #dce4ef);
    border-radius: 12px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
}