/*
 * brand-ui.css — botones y textos de marca con contraste AA (Fase 6, BRP-28).
 *
 * Por qué existe: el tema Morph pinta TODO `.btn` con fondo #d9e3f1 y texto #7b8ab8 (2,63:1) y solo
 * `.btn-primary` / `.btn-outline-primary` tienen color propio, así que `btn-success`, `btn-info` o
 * `btn-warning` salen apagados y `btn-outline-primary` queda azul sobre azul (1,43:1). Aquí se define
 * el par de marca una sola vez, con sus estados, SIN tocar `.btn-*` de Bootstrap/Morph: las reglas
 * valen solo para las clases nuevas `.btn-cb*` y dentro de `.cb-surface` (cuenta, carrito,
 * checkout y pedido).
 *
 * Los pares de esta hoja los verifica `test/ContrasteTest.php`, que LEE los tokens de `:root`.
 * Si cambias un color, corre ese script. Los pares que se prueban se listan allí.
 */

:root {
    /* Azul de marca (acción principal) */
    --cb-blue: #5B6BCF;          /* texto blanco encima: 4,72:1 */
    --cb-blue-hover: #4A5AB8;
    --cb-blue-active: #3F4DA0;
    --cb-blue-ink: #2B3A8C;      /* azul MARINO del logo como TEXTO (títulos, enlaces, íconos, contorno): sobre blanco 10,06:1 */
    --cb-on-blue: #ffffff;

    /* Naranja de marca (acción final: confirmar y pagar). Texto OSCURO: el blanco da 2,59:1 */
    --cb-orange: #E68B3A;
    --cb-orange-hover: #F0A15C;
    --cb-on-orange: #1f2937;
    --cb-orange-soft: #FBE9D9;   /* fondo suave del elemento activo del menú de la cuenta */
    --cb-orange-ink: #9A3412;    /* naranja oscuro como TEXTO (medidor de contraseña: «Débil»); sobre blanco 7,31:1 */

    /* Estados que antes pintaba Morph con texto blanco ilegible */
    --cb-green: #15803d;
    --cb-green-hover: #166534;
    --cb-info: #0e7490;
    --cb-info-hover: #155e75;
    --cb-red: #dc2626;
    --cb-red-hover: #b91c1c;
    --cb-gray: #4b5563;
    --cb-on-solid: #ffffff;

    /* Deshabilitado: legible pero claramente distinto al activo */
    --cb-disabled-bg: #e5e7eb;
    --cb-disabled-ink: #4b5563;

    /* Texto sobre las tarjetas azuladas de Morph (#d9e3f1) y sobre blanco */
    --cb-card: #d9e3f1;
    --cb-card-soft: #e8ebfa;
    --cb-surface: #ffffff;
    --cb-ink: #1f2937;
    --cb-ink-soft: #334155;
    --cb-muted: #475569;
    --cb-green-ink: #166534;
    --cb-red-ink: #b91c1c;
    --cb-focus: #1d4ed8;

    /* Pie de página (fondo oscuro): texto, títulos, íconos y franjas */
    --cb-footer-bg: #0f172a;
    --cb-footer-bar: #0a1020;
    --cb-footer-ink: #d1d5db;
    --cb-footer-title: #ffffff;
    --cb-footer-icon: #a5b4fc;
    --cb-footer-line: #334155;

    /* Avisos (.alert-*): fondo suave sólido + letra oscura */
    --cb-al-secondary-bg: #E9EDF3;  --cb-al-secondary-ink: #334155;
    --cb-al-success-bg: #D1E7DD;    --cb-al-success-ink: #0A3622;
    --cb-al-danger-bg: #F8D7DA;     --cb-al-danger-ink: #58151C;
    --cb-al-warning-bg: #FFF3CD;    --cb-al-warning-ink: #664D03;
    --cb-al-info-bg: #CFF4FC;       --cb-al-info-ink: #055160;
    --cb-al-light-bg: #F8F9FA;      --cb-al-light-ink: #334155;
    --cb-al-dark-bg: #1F2937;       --cb-al-dark-ink: #F9FAFB;
}

/* ---------- Botones de marca ---------- */
.btn.btn-cb,
.btn.btn-cb-action,
.btn.btn-cb-success,
.btn.btn-cb-info,
.btn.btn-cb-danger,
.btn.btn-cb-gray {
    border: none;
    font-weight: 600;
    background-image: none;
    text-shadow: none;
}

/* Principal (azul) */
.btn.btn-cb               { background-color: var(--cb-blue);        color: var(--cb-on-blue); }
.btn.btn-cb:hover         { background-color: var(--cb-blue-hover);  color: var(--cb-on-blue); }
.btn.btn-cb:focus         { background-color: var(--cb-blue);        color: var(--cb-on-blue); }
.btn.btn-cb:active,
.btn.btn-cb:active:focus  { background-color: var(--cb-blue-active); color: var(--cb-on-blue); }

/* Acción final (naranja con texto oscuro) */
.btn.btn-cb-action              { background-color: var(--cb-orange);       color: var(--cb-on-orange); }
.btn.btn-cb-action:hover        { background-color: var(--cb-orange-hover); color: var(--cb-on-orange); }
.btn.btn-cb-action:focus        { background-color: var(--cb-orange);       color: var(--cb-on-orange); }
.btn.btn-cb-action:active,
.btn.btn-cb-action:active:focus { background-color: var(--cb-orange);       color: var(--cb-on-orange); }

/* Contorno de marca: texto azul oscuro sobre fondo claro; al pasar el cursor se rellena */
.btn.btn-cb-outline {
    background-color: var(--cb-surface);
    color: var(--cb-blue-ink);
    box-shadow: inset 0 0 0 2px var(--cb-blue-ink);
    font-weight: 600;
}
.btn.btn-cb-outline:hover,
.btn.btn-cb-outline:focus       { background-color: var(--cb-blue-ink);   color: var(--cb-on-blue); box-shadow: inset 0 0 0 2px var(--cb-blue-ink); }
.btn.btn-cb-outline:active,
.btn.btn-cb-outline:active:focus { background-color: var(--cb-blue-hover); color: var(--cb-on-blue); }

/* Estados con fondo sólido y texto blanco (verde, info, rojo, gris) */
.btn.btn-cb-success { background-color: var(--cb-green); color: var(--cb-on-solid); }
.btn.btn-cb-success:hover,
.btn.btn-cb-success:focus,
.btn.btn-cb-success:active,
.btn.btn-cb-success:active:focus { background-color: var(--cb-green-hover); color: var(--cb-on-solid); }
.btn.btn-cb-info { background-color: var(--cb-info); color: var(--cb-on-solid); }
.btn.btn-cb-info:hover,
.btn.btn-cb-info:focus,
.btn.btn-cb-info:active,
.btn.btn-cb-info:active:focus { background-color: var(--cb-info-hover); color: var(--cb-on-solid); }
.btn.btn-cb-danger { background-color: var(--cb-red); color: var(--cb-on-solid); }
.btn.btn-cb-danger:hover,
.btn.btn-cb-danger:focus,
.btn.btn-cb-danger:active,
.btn.btn-cb-danger:active:focus { background-color: var(--cb-red-hover); color: var(--cb-on-solid); }
.btn.btn-cb-gray { background-color: var(--cb-gray); color: var(--cb-on-solid); }
.btn.btn-cb-gray:hover,
.btn.btn-cb-gray:focus,
.btn.btn-cb-gray:active,
.btn.btn-cb-gray:active:focus { background-color: var(--cb-ink-soft); color: var(--cb-on-solid); }

/* Foco visible para teclado: el mismo anillo en todos */
.btn.btn-cb:focus-visible,
.btn.btn-cb-action:focus-visible,
.btn.btn-cb-outline:focus-visible,
.btn.btn-cb-success:focus-visible,
.btn.btn-cb-info:focus-visible,
.btn.btn-cb-danger:focus-visible,
.btn.btn-cb-gray:focus-visible {
    outline: 3px solid var(--cb-focus);
    outline-offset: 2px;
}

/* Deshabilitado: gris claro con texto gris oscuro, sin sombra (el activo siempre tiene color) */
.btn.btn-cb:disabled,         .btn.btn-cb.disabled,
.btn.btn-cb-action:disabled,  .btn.btn-cb-action.disabled,
.btn.btn-cb-outline:disabled, .btn.btn-cb-outline.disabled,
.btn.btn-cb-success:disabled, .btn.btn-cb-success.disabled,
.btn.btn-cb-info:disabled,    .btn.btn-cb-info.disabled,
.btn.btn-cb-danger:disabled,  .btn.btn-cb-danger.disabled,
.btn.btn-cb-gray:disabled,    .btn.btn-cb-gray.disabled {
    background-color: var(--cb-disabled-bg);
    color: var(--cb-disabled-ink);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

/* ---------- Texto legible sobre las tarjetas azuladas (solo en estas pantallas) ---------- */
.cb-surface {
    --bs-body-color: var(--cb-ink-soft);
    --bs-secondary-color: var(--cb-muted);
    --bs-heading-color: var(--cb-blue-ink);
    --bs-link-color: var(--cb-blue-ink);
    --bs-link-hover-color: var(--cb-blue-hover);
    color: var(--cb-ink-soft);
}
.cb-surface .text-muted,
.cb-surface small.text-muted,
.cb-surface .form-text {
    color: var(--cb-muted) !important;
}
.cb-surface .text-success { color: var(--cb-green-ink) !important; }
.cb-surface .text-danger  { color: var(--cb-red-ink) !important; }
.cb-surface .text-primary { color: var(--cb-blue-ink) !important; }

/* Insignias: el texto blanco sobre el verde/cian de Morph daba 2,28:1 y 2,43:1 */
.cb-surface .badge.bg-success   { background-color: var(--cb-green) !important; color: var(--cb-on-solid); }
.cb-surface .badge.bg-info      { background-color: var(--cb-info) !important;  color: var(--cb-on-solid); }
.cb-surface .badge.bg-danger    { background-color: var(--cb-red) !important;   color: var(--cb-on-solid); }
.cb-surface .badge.bg-secondary { background-color: var(--cb-gray) !important;  color: var(--cb-on-solid); }
.cb-surface .badge.bg-primary   { background-color: var(--cb-blue) !important;  color: var(--cb-on-blue); }
.cb-surface .badge.bg-warning   { background-color: var(--cb-orange) !important; color: var(--cb-on-orange); }

/* Insignias con la variante `text-bg-*` de Bootstrap 5.3 (p. ej. «Rechazado» en el comprobante): mismos pares que `.badge.bg-*` */
.cb-surface .text-bg-success   { background-color: var(--cb-green) !important;  color: var(--cb-on-solid) !important; }
.cb-surface .text-bg-info      { background-color: var(--cb-info) !important;   color: var(--cb-on-solid) !important; }
.cb-surface .text-bg-danger    { background-color: var(--cb-red) !important;    color: var(--cb-on-solid) !important; }
.cb-surface .text-bg-secondary { background-color: var(--cb-gray) !important;   color: var(--cb-on-solid) !important; }
.cb-surface .text-bg-primary   { background-color: var(--cb-blue) !important;   color: var(--cb-on-blue) !important; }
.cb-surface .text-bg-warning   { background-color: var(--cb-orange) !important; color: var(--cb-on-orange) !important; }

/* Avisos (`.alert-*`): Morph los pinta con colores saturados al 75 % de opacidad (info 2,94:1, danger 4,06:1,
 * light 3,18:1, dark 1,99:1). Aquí cada variante lleva un fondo suave sólido y letra oscura. */
.cb-surface .alert-primary   { background-color: var(--cb-card-soft);      color: var(--cb-blue-ink);      border-color: #c5cbf0; }
.cb-surface .alert-secondary { background-color: var(--cb-al-secondary-bg); color: var(--cb-al-secondary-ink); border-color: #cfd6e0; }
.cb-surface .alert-success   { background-color: var(--cb-al-success-bg);   color: var(--cb-al-success-ink);   border-color: #a3cfbb; }
.cb-surface .alert-danger    { background-color: var(--cb-al-danger-bg);    color: var(--cb-al-danger-ink);    border-color: #f1aeb5; }
.cb-surface .alert-warning   { background-color: var(--cb-al-warning-bg);   color: var(--cb-al-warning-ink);   border-color: #ffe69c; }
.cb-surface .alert-info      { background-color: var(--cb-al-info-bg);      color: var(--cb-al-info-ink);      border-color: #9eeaf9; }
.cb-surface .alert-light     { background-color: var(--cb-al-light-bg);     color: var(--cb-al-light-ink);     border-color: #e2e6ea; }
.cb-surface .alert-dark      { background-color: var(--cb-al-dark-bg);      color: var(--cb-al-dark-ink);      border-color: #374151; }
/* Dentro de un aviso, el texto tenue y los enlaces heredan el color del aviso (el gris tenue no se lee sobre su fondo) */
.cb-surface .alert .text-muted,
.cb-surface .alert small.text-muted { color: inherit !important; }
.cb-surface .alert .alert-link { color: inherit; text-decoration: underline; font-weight: 600; }

/* ---------- Botones neutros dentro de las pantallas de compra ----------
 * Morph los deja en #7b8ab8 sobre #d9e3f1 (2,63:1) y repite ese color en hover/foco/pulsado. */
.cb-surface .btn-outline-secondary,
.cb-surface .btn-secondary,
.cb-surface .btn-light {
    color: var(--cb-ink-soft);
}
.cb-surface .btn-outline-secondary:focus,
.cb-surface .btn-secondary:hover,
.cb-surface .btn-secondary:focus,
.cb-surface .btn-secondary:active,
.cb-surface .btn-secondary:active:focus,
.cb-surface .btn-light:hover,
.cb-surface .btn-light:focus,
.cb-surface .btn-light:active,
.cb-surface .btn-light:active:focus {
    color: var(--cb-ink);
}
.cb-surface .btn-link,
.cb-surface .btn-link:focus {
    color: var(--cb-blue-ink);
}
.cb-surface .btn-link:hover,
.cb-surface .btn-link:active,
.cb-surface .btn-link:active:focus {
    color: var(--cb-blue-hover);
}

/* Método de pago NO elegido: Morph tiene `.btn-check:not(:checked) + .btn` (gris pálido, 2,63:1) y le gana a `.btn-cb-outline`;
 * aquí se repite el estilo de contorno con más especificidad, y se rellena en hover y pulsado. */
.cb-surface .btn-check:not(:checked) + .btn.btn-cb-outline {
    background-color: var(--cb-surface);
    color: var(--cb-blue-ink);
    box-shadow: inset 0 0 0 2px var(--cb-blue-ink);
}
.cb-surface .btn-check:not(:checked) + .btn.btn-cb-outline:hover,
.cb-surface .btn-check:not(:checked) + .btn.btn-cb-outline:active {
    background-color: var(--cb-blue-ink);
    color: var(--cb-on-blue);
}

/* Método de pago elegido (radio `.btn-check` + etiqueta de contorno): se rellena para que se note cuál está activo */
.cb-surface .btn-check:checked + .btn.btn-cb-outline,
.cb-surface .btn-check:checked + .btn.btn-cb-outline:hover,
.cb-surface .btn-check:checked + .btn.btn-cb-outline:focus {
    background-color: var(--cb-blue-ink);
    color: var(--cb-on-blue);
    box-shadow: inset 0 0 0 2px var(--cb-blue-ink);
}
.cb-surface .btn-check:focus-visible + .btn.btn-cb-outline {
    outline: 3px solid var(--cb-focus);
    outline-offset: 2px;
}

/* Migas de pan: el enlace de Morph/Bootstrap sale a 2,74:1 sobre la barra azulada */
.cb-surface .breadcrumb-item a { color: var(--cb-blue-ink); }
.cb-surface .breadcrumb-item.active { color: var(--cb-ink-soft); }

/* Texto de ejemplo (placeholder) de los campos: Morph lo deja en un azul pálido ilegible */
.cb-surface .form-control::placeholder,
.cb-surface .form-select::placeholder,
.cb-surface textarea::placeholder {
    color: var(--cb-muted);
    opacity: 1;
}

/* Hover y pulsado del contorno neutro («Repetir»): Morph lo rellena de gris oscuro, así que la letra pasa a blanco */
.cb-surface .btn-outline-secondary:hover,
.cb-surface .btn-outline-secondary:active,
.cb-surface .btn-outline-secondary:active:focus {
    background-color: var(--cb-gray);
    color: var(--cb-on-solid);
}

/* `btn-primary` (Realizar pedido, Ver productos): Morph le pone letra #7b8ab8 en hover y foco sobre el azul oscuro (1,79:1) */
.cb-surface .btn-primary:hover,
.cb-surface .btn-primary:focus,
.cb-surface .btn-primary:active,
.cb-surface .btn-primary:active:focus {
    color: var(--cb-on-blue);
}

/* Íconos del menú lateral (cuenta): azul y rojo de marca como TEXTO sobre blanco, con contraste AA */
.cb-ink { color: var(--cb-blue-ink); }
.cb-danger-ink { color: var(--cb-red-hover); }

/* Pie: franja de «vistos recientemente» (fondo #efefef); el text-muted de Bootstrap da 2,17:1 (diseno-front-marca, Fase 2) */
.recent-views-section .text-muted {
    color: var(--cb-muted) !important;
}

/* ---------- Portada, catálogo y modal de contacto (diseno-front-marca, Fase 5) ----------
 * La portada y el catálogo llevan `.cb-surface` en su contenedor; aquí van solo las reglas que
 * `.cb-surface` aún no cubría. Ninguna toca las reglas globales de Morph. */

/* Precio de oferta (`text-warning`, naranja #E68B3A = 2,00:1 sobre blanco): texto en el naranja oscuro de marca.
 * Los íconos (`<i>`) conservan su naranja: no son texto. */
.cb-surface .text-warning:not(i) { color: var(--cb-orange-ink) !important; }

/* Contorno azul (botón «Filtros»): mismo estilo que `.btn-cb-outline` */
.cb-surface .btn-outline-primary {
    background-color: var(--cb-surface);
    color: var(--cb-blue-ink);
    box-shadow: inset 0 0 0 2px var(--cb-blue-ink);
}
.cb-surface .btn-outline-primary:hover,
.cb-surface .btn-outline-primary:focus,
.cb-surface .btn-outline-primary:active,
.cb-surface .btn-outline-primary:active:focus {
    background-color: var(--cb-blue-ink);
    color: var(--cb-on-blue);
    box-shadow: inset 0 0 0 2px var(--cb-blue-ink);
}

/* Encabezado: teléfono (4,48:1) en el azul marino, y barra del día especial.
 * La barra trae un degradado configurado en el admin (blanco sobre su extremo claro = 1,61:1): el nombre
 * va dentro de una píldora de color sólido, así el contraste no depende del color que se elija allí. */
a.contact-link-top { color: var(--cb-blue-ink); }
a.contact-link-top:hover { color: var(--cb-blue-hover); }
.special-day-bar .special-day-link {
    display: inline-block;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    background-color: var(--cb-footer-bg);
    color: var(--cb-footer-title) !important;
}

/* Pie, bloque de sucursales (fondo oscuro, tarjetas blancas) */
.map-card .card-header { background: var(--cb-blue-ink); color: var(--cb-on-blue); }
.map-card .card-header strong { color: var(--cb-on-blue); }
.map-card .badge.bg-primary   { background-color: var(--cb-blue) !important; color: var(--cb-on-blue); }
.map-card .badge.bg-secondary { background-color: var(--cb-gray) !important; color: var(--cb-on-solid); }
.map-card .btn-outline-primary {
    background-color: var(--cb-surface);
    color: var(--cb-blue-ink);
    box-shadow: inset 0 0 0 2px var(--cb-blue-ink);
}
.map-card .btn-outline-primary:hover,
.map-card .btn-outline-primary:focus {
    background-color: var(--cb-blue-ink);
    color: var(--cb-on-blue);
}
.contact-buttons-section .btn-success,
.contact-buttons-section .btn-success:hover,
.contact-buttons-section .btn-success:focus {
    background: var(--cb-green);
    color: var(--cb-on-solid);
}
.contact-buttons-section .btn-success:hover { background: var(--cb-green-hover); }
.contact-buttons-section .btn-primary,
.contact-buttons-section .btn-primary:hover,
.contact-buttons-section .btn-primary:focus {
    background: var(--cb-blue);
    color: var(--cb-on-blue);
}
.contact-buttons-section .btn-primary:hover { background: var(--cb-blue-hover); }

/* Portada, franja de cifras: el texto blanco al 90 % sobre el fondo de la franja daba 4,16:1 */
.proof-text { color: var(--cb-on-solid); }

/* Modal de contacto: encabezado de color sólido de marca (era blanco sobre naranja, 2,59:1) */
.cb-modal-header {
    background-color: var(--cb-blue-ink);
    color: var(--cb-on-blue);
}
.cb-modal-header .modal-title { color: var(--cb-on-blue); }

/* Barra de apoyo bajo el hero («Categorías», «Ofertas», «Día de la Madre», ayuda): Morph pinta «Categorías» a 2,10:1
 * y el hover de las dos píldoras es blanco sobre un degradado (naranja claro 3,2:1). Texto de marca y hover sólido. */
.support-navbar .btn-link,
.support-navbar .btn-link:focus { color: var(--cb-blue-ink); }
.support-navbar .btn-link:hover,
.support-navbar .btn-link:active { color: var(--cb-blue-hover); }
.support-nav-link.highlight { color: var(--cb-orange-ink); }
.support-nav-link.highlight:hover { background: var(--cb-orange-ink); color: var(--cb-on-solid); }
.support-nav-link.special { color: var(--cb-blue-ink); }
.support-nav-link.special:hover { background: var(--cb-blue-ink); color: var(--cb-on-blue); }
.nav-help-text,
.benefit-detail { color: var(--cb-muted); }
.cb-surface .badge.bg-light,
.cb-surface .text-bg-light { color: var(--cb-ink-soft); }

/* ---------- /contacto y ficha de producto (diseno-front-marca, Fase 7) ----------
 * Ambas páginas llevan `.cb-surface` en su contenedor; aquí solo lo que `.cb-surface` no cubría. */

/* Encabezado de /contacto: azul marino liso (antes degradado `--gradient-mixed`, que no daba 4,5:1 con el título blanco) */
.cb-surface .contact-hero { background: var(--cb-blue-ink) !important; }

/* «Consulta WhatsApp» (contorno verde) y «Ver todos…» (enlace de sección) */
.cb-surface .btn-outline-success {
    background-color: var(--cb-surface);
    color: var(--cb-green-ink);
    box-shadow: inset 0 0 0 2px var(--cb-green-ink);
}
.cb-surface .btn-outline-success:hover,
.cb-surface .btn-outline-success:focus,
.cb-surface .btn-outline-success:active {
    background-color: var(--cb-green);
    color: var(--cb-on-solid);
}
.cb-surface .view-all-link { color: var(--cb-blue-ink); }
.cb-surface .view-all-link:hover { color: var(--cb-blue-hover); }

/* Flechas de los carruseles: en el celular se salían 4 px del contenedor y la página se desplazaba de lado */
@media (max-width: 575.98px) {
    .cb-surface .carousel-control-prev { left: 0; }
    .cb-surface .carousel-control-next { right: 0; }
}