/* Acabado visual compartido. Cargar después de los estilos de cada pantalla.
 * Conserva las medidas, rejillas y posiciones del diseño existente. */
:root {
    --apple-black: #172b4d;
    --apple-gray-bg: #f4f7fc;
    --apple-text-sec: #5f6f85;
    --apple-border: #dce4ef;
    --compro-borde: #e0e7f0;
    --compro-suave: #edf3fb;
    --compro-sombra: 0 2px 6px rgba(23, 43, 77, .03), 0 8px 24px rgba(23, 43, 77, .04);
}

body { -webkit-font-smoothing: antialiased; }

.main-header {
    background: rgba(255, 255, 255, .82);
    border-bottom-color: rgba(23, 43, 77, .08);
}
.main-header.es-desplazada {
    border-bottom-color: rgba(23, 43, 77, .12);
    box-shadow: 0 4px 18px rgba(23, 43, 77, .04);
}
.logo-pro { box-shadow: 0 2px 6px rgba(0, 113, 227, .12); }
.distributor-info { background-color: var(--compro-suave); }
.sn-header-btn { border-color: var(--compro-borde); }

.filter-sort-row,
.bottom-nav {
    border-color: rgba(23, 43, 77, .1);
    box-shadow: 0 4px 12px rgba(23, 43, 77, .04), 0 12px 30px rgba(23, 43, 77, .09);
}
.bottom-nav { background: rgba(255, 255, 255, .94); }
.nav-item { color: #63738a; }
.nav-item.active { color: var(--apple-blue); }

.chip:not(.active) { border-color: var(--compro-borde); color: #53657d; }
.chip.active { background: #172b4d; border-color: #172b4d; }
.chip-marca.active { background: var(--apple-blue); border-color: var(--apple-blue); }

.product-card {
    border-color: var(--compro-borde);
    box-shadow: var(--compro-sombra);
}
.card-img-wrapper { background-color: #f5f8fc; }
.card-name { font-weight: 650; }
.card-brand { color: #5f6f85; font-weight: 600; }
.card-price { font-variant-numeric: tabular-nums; }
.qty-control { background: var(--compro-suave); }
.fav-btn-card:not(.active) { color: #65758b; }

#provider-list .provider-choice {
    border-color: var(--compro-borde);
    box-shadow: var(--compro-sombra);
}
#provider-list .provider-description { color: #5f6f85; }
.provider-tools { border-color: var(--compro-borde); box-shadow: 0 2px 6px rgba(23, 43, 77, .02); }
.provider-catalog { box-shadow: 0 3px 8px rgba(0, 113, 227, .12); }
.provider-title h1 { color: var(--apple-black); }

.input-apple { border-color: var(--apple-border); background-color: #fff; }
.input-apple:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .1); }
.input-apple[aria-invalid="true"] { border-color: #d70015; }
.input-apple[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(215, 0, 21, .1); }
.input-apple::placeholder { color: #6b7b91; opacity: 1; }
.search-island-input {
    border-color: var(--compro-borde) !important;
    box-shadow: var(--compro-sombra);
}
.toggle-all-btn:not(.active) {
    border-color: #c2d7f0;
    color: #175a9f;
    box-shadow: 0 2px 8px rgba(23, 43, 77, .03);
}
.toggle-all-btn:not(.active):hover { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .08); }

.modal-wrapper,
.sn-caja { box-shadow: 0 20px 64px rgba(23, 43, 77, .18); }
.glass-overlay { background: var(--apple-gray-bg); }
#auth-overlay > div {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 0 0 1px var(--compro-borde), 0 16px 48px rgba(23, 43, 77, .07);
}
.registro-container,
body > .container,
body > .caja,
.vc-caja {
    background: #fff;
    border-color: var(--compro-borde);
    box-shadow: 0 12px 40px rgba(23, 43, 77, .07);
}
body:has(> .vc-caja) { background: var(--apple-gray-bg); color: var(--apple-black); }
.vc-sub,
.vc-ficha dt,
body > .caja .sub,
body > .caja .aviso,
body > .caja .ficha dt { color: var(--apple-text-sec); }
.vc-ficha,
body > .caja .ficha { background: var(--compro-suave); }
.btn-apple-primary { box-shadow: 0 3px 10px rgba(23, 43, 77, .1); }
.bag-item,
.order-card,
.profile-card { border-color: var(--compro-borde); box-shadow: var(--compro-sombra); }
.profile-row-icon { background: var(--compro-suave); color: #53657d; }

/* Los paneles conservan el mismo armazón y comparten los acabados de la tienda. */
.cp-shell {
    --cp-fondo: #f4f7fc;
    --cp-lateral: #edf2f8;
    --cp-superficie: #fff;
    --cp-borde: #e0e7f0;
    --cp-borde-suave: #e5edf7;
    --cp-texto: #172b4d;
    --cp-texto-2: #53657d;
    --cp-texto-3: #5f6f85;
    --cp-acento: #0071e3;
    --cp-sombra: var(--compro-sombra);
}
.cp-nav-item.es-activo {
    background: #e0edff;
    color: #0059b3;
    box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .1);
}
.cp-tarjeta { box-shadow: var(--compro-sombra); }
.cp-cajon-panel { border-left-color: var(--compro-borde); box-shadow: -12px 0 40px rgba(23, 43, 77, .12); }
.pv-titulos h2,
.pa-cabecera h2 { color: var(--apple-black); }
.pv-kpi { background: #f4f7fc; box-shadow: inset 0 0 0 1px var(--compro-borde); }
.pv-kpi-et { color: #5f6f85; }
.pv-kpi-n { color: var(--apple-black); font-variant-numeric: tabular-nums; }
.pv-select,
.pv-buscador { border-color: var(--compro-borde); }
.pv-tabla th { background: #f4f7fc; color: #53657d; border-bottom-color: var(--compro-borde); }
.pv-tabla td { border-bottom-color: #edf1f7; }
.pv-tabla tbody tr:hover { background: #f4f8fe; }
.pv-btn { background: var(--apple-blue); color: #fff; }
.pv-btn:hover:not(:disabled) { background: #0059b3; }
.pv-btn-sec { background: var(--compro-suave); color: #53657d; }
.pv-btn-sec:hover:not(:disabled) { background: #e0eaf7; }

@media (hover: hover) and (pointer: fine) {
    .product-card:hover,
    #provider-list .provider-choice:hover {
        border-color: #bed3ed;
        box-shadow: 0 6px 14px rgba(23, 43, 77, .04), 0 12px 28px rgba(23, 43, 77, .08);
    }
    .chip:not(.active):hover { background: #f0f5fc; border-color: #bed3ed; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-header,
    .bottom-nav { background: #fff; }
}

/* Estados compartidos por registro, recuperación, invitación y vinculación. */
.auth-page .btn-apple-primary:hover:not(:disabled) { background: #213e66; }
.auth-page .btn-apple-primary:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}
.auth-page .error-msg,
.auth-page .caja .error,
.auth-page .vc-error { color: #b42318; }
.auth-page .vc-aviso { color: var(--apple-text-sec); }
.auth-page .ficha dd,
.auth-page .vc-ficha dd {
    min-width: 0;
    overflow-wrap: anywhere;
}
.auth-page .login-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
@media (max-width: 600px) {
    .auth-page .input-apple,
    .auth-page .vc-input { font-size: 16px; }
}