/* Estados de disponibilidad de producto según la sucursal activa. */
/* Este archivo carga ÚLTIMO en el master, por lo que sus reglas ganan sin !important. */

/* ============================================================
   Tokens de marca Casper (referencia)
   MARCA CASPER: negro #373739 · naranja #E96A16 · (navy/verde eran del template Zoro)
   WhatsApp #25d366 (hover #1da851)
   badge otra:      texto #8a6d00 · fondo #fff6d9 · borde #f0d97a
   badge sin-stock: texto #5f5f5f · fondo #f2f2f2 · borde #dddddd
   Fuente: 'Poppins', sans-serif
   ============================================================ */

/* ============================================================
   1. Badge en las cards de listado (index, promociones, home).
   Debe leerse como ETIQUETA (píldora chica), NO como el botón
   "Agregar al carrito".
   ============================================================ */

/* [2026-07-28] Reemplazado: tenía tamaño de botón. Se conserva por referencia (Regla 4).
.disponibilidad-badge {
    display: inline-block;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 3px;
}
*/
.disponibilidad-badge {
    display: inline-block;
    max-width: 100%;
    padding: 2px 9px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 2.4vw, 11px);
    font-weight: 500;
    line-height: 1.5;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.disponibilidad-badge .fa {
    margin-right: 4px;
}

.disponibilidad-badge--otra {
    color: #8a6d00;
    background: #fff6d9;
    border: 1px solid #f0d97a;
}

/* [2026-07-28] Reemplazado: texto #777 no alcanzaba contraste AA.
   Se conserva por referencia (Regla 4).
.disponibilidad-badge--sin-stock {
    color: #777777;
    background: #f2f2f2;
    border: 1px solid #dddddd;
}
*/
.disponibilidad-badge--sin-stock {
    color: #5f5f5f;
    background: #f2f2f2;
    border: 1px solid #dddddd;
}

/* ============================================================
   2. Mensaje en la ficha de detalle (base ámbar) + variante sin-stock.
   ============================================================ */

/* [2026-07-28] Reemplazado: font-size fijo -> clamp. Se conserva por referencia (Regla 4).
.disponibilidad-detalle {
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #8a6d00;
    background: #fff6d9;
    border: 1px solid #f0d97a;
    border-radius: 3px;
}
*/
.disponibilidad-detalle {
    padding: 10px 12px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.4;
    color: #8a6d00;
    background: #fff6d9;
    border: 1px solid #f0d97a;
    border-radius: 4px;
}

.disponibilidad-detalle .fa {
    margin-right: 4px;
}

/* Variante gris AA cuando el producto no tiene stock en ninguna sucursal. */
.disponibilidad-detalle--sin-stock {
    color: #5f5f5f;
    background: #f2f2f2;
    border-color: #dddddd;
}

/* ============================================================
   3. CTA "Consultar por WhatsApp" (sucursal de solo catálogo).
   Antes dependía de .btn_1 (inexistente) y quedaba sin caja.
   Ahora se ve como botón real.
   ============================================================ */

/* [2026-07-28] Reemplazado: no tenía caja propia (dependía de .btn_1 inexistente).
   Se conserva por referencia (Regla 4).
.disponibilidad-consultar {
    display: inline-block;
    background: #25d366;
    border-color: #25d366;
    color: #ffffff;
}
.disponibilidad-consultar:hover {
    background: #1da851;
    border-color: #1da851;
    color: #ffffff;
}
*/
.disponibilidad-consultar {
    display: inline-block;
    margin-top: 8px;
    padding: clamp(8px, 2vw, 10px) clamp(18px, 4.5vw, 24px);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    /* [2026-07-28] Se alinea al CTA "Agregar al carrito" (#373739). El verde success
       (#25d366) rompía el esquema visual del sitio. Valores anteriores (Regla 4):
       background:#25d366; border:1px solid #25d366; hover:#1da851. */
    background: #373739;
    border: 1px solid #373739;
    border-radius: 4px;
    cursor: pointer;
}

.disponibilidad-consultar:hover,
.disponibilidad-consultar:focus {
    color: #373739; /* texto negro sobre el naranja del hover (consistencia negro+naranja) */
    background: #E96A16;
    border-color: #E96A16;
    text-decoration: none;
}

.disponibilidad-consultar .fa {
    margin-right: 5px;
    font-size: 1.2em; /* ícono de WhatsApp ligeramente más grande que el texto */
    vertical-align: -1px;
}

/* ============================================================
   4. Estado vacío del catálogo por sucursal / filtros.
   Bloque con jerarquía: icono, título, texto y CTA navy (abre el
   modal de sucursal).
   ============================================================ */

/* [2026-07-28] Reemplazado: solo texto plano. Se conserva por referencia (Regla 4).
.catalogo-vacio {
    padding: 30px 15px;
    text-align: center;
    color: #666666;
    font-size: 15px;
}
*/
.catalogo-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 8vw, 56px) 16px;
    text-align: center;
}

.catalogo-vacio__icono {
    margin-bottom: clamp(12px, 3vw, 18px);
    font-size: clamp(40px, 12vw, 64px);
    line-height: 1;
    color: #cfcfcf;
}

.catalogo-vacio__titulo {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(16px, 4.5vw, 22px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
    color: #373739;
}

.catalogo-vacio__texto {
    margin: 0 0 clamp(16px, 4vw, 22px);
    max-width: 460px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 3.2vw, 15px);
    line-height: 1.5;
    color: #666666;
}

.catalogo-vacio__cta {
    display: inline-block;
    padding: clamp(9px, 2.2vw, 11px) clamp(20px, 5vw, 28px);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    background: #373739;
    border: 1px solid #373739;
    border-radius: 4px;
    cursor: pointer;
}

.catalogo-vacio__cta:hover,
.catalogo-vacio__cta:focus {
    color: #373739; /* texto negro sobre el naranja del hover (consistencia negro+naranja) */
    background: #E96A16;
    border-color: #E96A16;
    text-decoration: none;
}

/* ============================================================
   5. Aviso en la página del carrito (sucursal de solo catálogo).
   Debe leerse como ALERTA amarilla, con CTA navy al modal de sucursal.
   ============================================================ */

/* [2026-07-28] Reemplazado: nota pasiva -> alerta con jerarquía. Se conserva (Regla 4).
.checkout-solo-catalogo {
    padding: 12px 14px;
    color: #8a6d00;
    background: #fff6d9;
    border: 1px solid #f0d97a;
    border-radius: 3px;
}
*/
.checkout-solo-catalogo {
    padding: clamp(12px, 3vw, 16px);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 3.2vw, 15px);
    line-height: 1.5;
    color: #8a6d00;
    background: #fff6d9;
    border: 1px solid #f0d97a;
    border-left-width: 4px;
    border-radius: 4px;
}

.checkout-solo-catalogo .fa {
    margin-right: 6px;
}

.checkout-solo-catalogo__cta {
    display: inline-block;
    margin-top: 10px;
    padding: clamp(8px, 2vw, 10px) clamp(18px, 4.5vw, 24px);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    background: #373739;
    border: 1px solid #373739;
    border-radius: 4px;
    cursor: pointer;
}

.checkout-solo-catalogo__cta:hover,
.checkout-solo-catalogo__cta:focus {
    color: #373739; /* texto negro sobre el naranja del hover (consistencia negro+naranja) */
    background: #E96A16;
    border-color: #E96A16;
    text-decoration: none;
}

/* ============================================================
   6. Indicador de checkout deshabilitado en el mini-carrito (header).
   Antes era texto desvaído (opacity .7); ahora badge chico legible AA.
   ============================================================ */

/* [2026-07-28] Reemplazado: opacity .7 no daba contraste AA. Se conserva (Regla 4).
.checkout-catalogo {
    opacity: 0.7;
    cursor: default;
}
*/
.checkout-catalogo {
    display: inline-block;
    max-width: 100%;
    padding: 2px 9px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 2.4vw, 11px);
    font-weight: 500;
    line-height: 1.5;
    color: #5f5f5f;
    background: #f2f2f2;
    border: 1px solid #dddddd;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

/* ============================================================
   7. Wrapper del slot de acción de la card (lo agrega otro agente en Blade).
   Iguala la altura de las acciones para que las cards de una fila
   queden alineadas al fondo.
   ============================================================ */
.producto-accion {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(64px, 10vw, 86px);
}