/* ==========================================================
   CHAVES ONLINE — PEDIDOS
   Index + TarjetaProducto + Detalle
   Panadería premium / cálido / elegante
========================================================== */


/* ==========================================================
   CONTENEDOR PRINCIPAL
========================================================== */

.pedidos {
    width: 100%;
}


/* ==========================================================
   TÍTULO DE SECCIÓN
========================================================== */

.seccion > .seccion__titulo {
    margin-bottom: 1.8rem;
}


/* ==========================================================
   INTRODUCCIÓN
========================================================== */

.pedidos__introduccion {
    position: relative;
    width: min(780px, 100%);
    margin: -0.4rem auto 2.5rem;
    padding: 1.6rem 2rem;
    text-align: center;
    background: linear-gradient( 135deg, #FFFDF9, #F5EBDD );
    border: 1px solid rgba(122, 74, 43, 0.18);
    border-radius: 1.2rem;
    box-shadow: 0 8px 24px rgba(74, 44, 29, 0.07);
    overflow: hidden;
}

    .pedidos__introduccion::before {
        content: "";
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--color-dorado), transparent );
        opacity: .5;
    }

    .pedidos__introduccion h2 {
        margin: 0 0 .55rem;
        color: var(--color-pan-oscuro);
        font-size: 1.3rem;
        font-weight: 700;
    }

    .pedidos__introduccion p {
        max-width: 650px;
        margin: 0 auto;
        color: var(--color-texto-suave);
        font-size: .96rem;
        line-height: 1.7;
    }

    .pedidos__introduccion strong {
        color: var(--color-pan);
        font-weight: 700;
    }


/* ==========================================================
   FILTROS
========================================================== */

.filtros {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(180px, 1fr) minmax(150px, .8fr) minmax(150px, .8fr);
    gap: 1rem;
    align-items: end;
    margin-bottom: 2.5rem;
    padding: 1.4rem;
    background: rgba(255, 253, 249, .94);
    border: 1px solid var(--color-borde);
    border-radius: 1.15rem;
    box-shadow: var(--sombra-suave);
    box-sizing: border-box;
}


    /* ==========================================================
   CAMPOS
========================================================== */

    .filtros .campo {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        gap: .45rem;
    }

        .filtros .campo label {
            display: block;
            margin: 0;
            color: var(--color-texto);
            font-size: .82rem;
            font-weight: 700;
            line-height: 1.2;
        }


    /* ==========================================================
   INPUTS Y SELECT
========================================================== */

    .filtros input,
    .filtros select {
        display: block;
        width: 100%;
        height: 44px;
        min-width: 0;
        padding: 0 .85rem;
        box-sizing: border-box;
        color: var(--color-texto);
        background: #FFFFFF;
        border: 1px solid var(--color-borde);
        border-radius: .7rem;
        font-family: inherit;
        font-size: .9rem;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }

        .filtros input::placeholder {
            color: #A99A8B;
        }

        .filtros input:hover,
        .filtros select:hover {
            border-color: rgba(122, 74, 43, .35);
        }

        .filtros input:focus,
        .filtros select:focus {
            border-color: var(--color-pan);
            box-shadow: 0 0 0 3px rgba(122, 74, 43, .10);
            background: #FFFFFF;
        }

    .filtros select {
        cursor: pointer;
    }


    /* ==========================================================
   BOTONES DE FILTROS
========================================================== */

    .filtros .boton {
        height: 44px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .filtros .boton--primario {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding-inline: 1.2rem;
        grid-column: 3;
    }

    .filtros .boton--linea {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline: 1.1rem;
        grid-column: 4;
    }


/* ==========================================================
   GRID DE PRODUCTOS
========================================================== */

.grid-productos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}


/* ==========================================================
   TARJETA DE PRODUCTO
========================================================== */

.tarjeta-producto {
    min-width: 0;
    background: var(--color-card);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

    .tarjeta-producto:hover {
        transform: translateY(-5px);
        background: var(--color-card-hover);
        border-color: rgba(201, 153, 46, .40);
        box-shadow: var(--sombra-media);
    }


/* ==========================================================
   ENLACE DE TARJETA
========================================================== */

.tarjeta-producto__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   IMAGEN DE TARJETA
   SIEMPRE CUADRADA
========================================================== */

.tarjeta-producto__imagen-envoltorio {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-fondo-crema);
    border: 0;
}

.tarjeta-producto__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    transition: transform .35s ease;
}

.tarjeta-producto:hover .tarjeta-producto__imagen {
    transform: scale(1.045);
}

.tarjeta-producto__imagen--vacia {
    background: linear-gradient( 135deg, #F5EBDD, #E8D5B8 );
    border: 0;
}


/* ==========================================================
   CUERPO DE TARJETA
========================================================== */

.tarjeta-producto__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem;
}


/* ==========================================================
   NOMBRE
========================================================== */

.tarjeta-producto__nombre {
    display: -webkit-box;
    margin: 0;
    color: var(--color-texto);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================
   PRECIO
========================================================== */

.tarjeta-producto__precio {
    color: var(--color-pan-oscuro);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}


/* ==========================================================
   ANIMACIÓN AL ABRIR DETALLE
========================================================== */

.tarjeta-producto.animando-salida {
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}


/* ==========================================================
   SIN RESULTADOS
========================================================== */

.vacio {
    max-width: 620px;
    margin: 2rem auto;
    padding: 2rem;
    text-align: center;
    color: var(--color-texto-suave);
    background: rgba(255, 253, 249, .78);
    border: 1px dashed rgba(122, 74, 43, .28);
    border-radius: 1rem;
    box-shadow: var(--sombra-suave);
}


/* ==========================================================
   PAGINACIÓN
========================================================== */

.paginacion {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

    .paginacion ul {
        display: flex;
        align-items: center;
        gap: .45rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .paginacion li a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 .75rem;
        color: var(--color-texto);
        background: #FFFDF9;
        border: 1px solid var(--color-borde);
        border-radius: .65rem;
        text-decoration: none;
        font-size: .9rem;
        font-weight: 600;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
    }

        .paginacion li a:hover {
            color: var(--color-pan-oscuro);
            border-color: rgba(122, 74, 43, .35);
            background: var(--color-fondo-crema);
            transform: translateY(-2px);
        }

    .paginacion li.activo a {
        color: #FFFFFF;
        background: var(--color-pan-oscuro);
        border-color: var(--color-pan-oscuro);
        box-shadow: 0 5px 14px rgba(78, 46, 23, .20);
    }


/* ==========================================================
   ==========================================================
   DETALLE DEL PRODUCTO
   ==========================================================
========================================================== */


/* ==========================================================
   CONTENEDOR
========================================================== */

.detalle-producto {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(320px, 420px);
    justify-content: center;
    align-items: start;
    column-gap: 5.5rem;
    padding-top: 4.5rem;
    padding-bottom: 5rem;
}


/* ==========================================================
   GALERÍA
========================================================== */

.detalle-producto__galeria {
    width: 100%;
    max-width: 560px;
    margin-top: 1rem;
}


/* ==========================================================
   IMAGEN PRINCIPAL
   SIN BORDE DECORATIVO
========================================================== */

.detalle-producto__imagen-envoltorio {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-fondo-crema);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    box-shadow: none;
}

.detalle-producto__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: inherit;
}



/* ==========================================================
   SIN IMAGEN
========================================================== */

.detalle-producto__imagen--vacia {
    background: linear-gradient( 135deg, #F5EBDD, #E8D5B8 );
    border: 0;
}


/* ==========================================================
   MINIATURAS
========================================================== */

.detalle-producto__miniaturas {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
}

.detalle-producto__miniatura {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    border: 2px solid transparent;
    border-radius: .7rem;
    cursor: pointer;
    opacity: .72;
    transition: border-color .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .detalle-producto__miniatura:hover {
        opacity: 1;
        transform: translateY(-2px);
        border-color: var(--color-dorado);
        box-shadow: 0 5px 14px rgba(74, 44, 29, .12);
    }

    .detalle-producto__miniatura.activa {
        opacity: 1;
        border-color: var(--color-dorado);
        box-shadow: 0 0 0 2px rgba(201, 153, 46, .15);
    }

    .detalle-producto__miniatura img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
    }


/* ==========================================================
   INFORMACIÓN
========================================================== */

.detalle-producto__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 2.2rem;
}


    /* ==========================================================
   CATEGORÍA
========================================================== */

    .detalle-producto__info .etiqueta {
        align-self: flex-start;
        margin-bottom: 1rem;
    }


/* ==========================================================
   TÍTULO
========================================================== */

.detalle-producto__titulo {
    margin: 0 0 1rem;
    color: var(--color-pan-oscuro);
    font-size: clamp(2.2rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}


/* ==========================================================
   PRECIO
========================================================== */

.detalle-producto__precio {
    margin: 0 0 2rem;
    color: var(--color-pan);
    font-size: 1.9rem;
    font-weight: 700;
}


/* ==========================================================
   DESCRIPCIÓN
========================================================== */

.detalle-producto__descripcion {
    max-width: 410px;
    margin: 0;
    color: var(--color-texto-suave);
    font-size: 1rem;
    line-height: 1.8;
}


/* ==========================================================
   FORMULARIO DE COMPRA
========================================================== */

.detalle-producto__formulario {
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
    margin-top: 3.5rem;
}


/* ==========================================================
   SELECTOR DE CANTIDAD
   −  CANTIDAD  +
========================================================== */

.selector-cantidad--grande {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background: var(--color-fondo-claro);
    border: 1px solid rgba(78, 46, 23, .18);
    border-radius: .7rem;
    overflow: hidden;
}


/* BOTONES + Y - */

.selector-cantidad__boton {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--color-fondo-crema);
    color: var(--color-pan-oscuro);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

    .selector-cantidad__boton:hover {
        background: var(--color-pan);
        color: var(--color-texto-claro);
    }


/* INPUT DE CANTIDAD */

.selector-cantidad__input {
    width: 60px;
    height: 50px;
    flex: 1;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--color-texto);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    appearance: textfield;
}

    .selector-cantidad__input::-webkit-inner-spin-button,
    .selector-cantidad__input::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }


/* ==========================================================
   BOTÓN AGREGAR / COMPRAR
========================================================== */

.detalle-producto__formulario .boton-agregar {
    width: 100%;
    max-width: none;
    min-height: 52px;
    border-radius: .7rem;
    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================
   VOLVER
========================================================== */

.detalle-producto__volver {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: .6rem 1.1rem;
    color: var(--color-pan-oscuro);
    background: #FFFDF9;
    border: 1px solid var(--color-borde);
    border-radius: .7rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sombra-suave);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

    .detalle-producto__volver:hover {
        color: #FFFFFF;
        background: var(--color-pan-oscuro);
        border-color: var(--color-pan-oscuro);
        transform: translateX(-2px);
    }
/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 1100px) {

    .filtros {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .filtros .boton--primario,
        .filtros .boton--linea {
            grid-column: auto;
        }

    .grid-productos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================
   DETALLE — TABLET
========================================================== */

@media (max-width: 950px) {

    .detalle-producto {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
        column-gap: 3rem;
        padding-top: 3.5rem;
    }

    .detalle-producto__formulario {
        width: 100%;
    }
}


/* ==========================================================
   TABLET PEQUEÑA
========================================================== */

@media (max-width: 800px) {

    .filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .9rem;
    }

    .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------
       DETALLE
    ------------------------------------------ */

    .detalle-producto {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2rem;
        padding-bottom: 3rem;
        box-sizing: border-box;
    }

    .detalle-producto__galeria {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }
    .detalle-producto__imagen-envoltorio {
        width: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: var(--color-fondo-crema);
        border: 1px solid var(--color-borde);
        border-radius: 1rem;
        box-shadow: none;
    }

    .detalle-producto__imagen {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border: 0;
        border-radius: inherit;
    }



    /* ------------------------------------------
   MINIATURAS — MÓVIL
------------------------------------------ */

    .detalle-producto__miniaturas {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: .55rem;
        margin-top: 1rem;
        padding: 0;
        box-sizing: border-box;
    }

    .detalle-producto__miniatura {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: .6rem;
    }

        .detalle-producto__miniatura img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* ------------------------------------------
       INFORMACIÓN
    ------------------------------------------ */

    .detalle-producto__info {
        width: 100%;
        padding-top: 2rem;
    }

        .detalle-producto__info .etiqueta {
            margin-bottom: .7rem;
        }

    .detalle-producto__titulo {
        margin-bottom: .8rem;
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        line-height: 1.15;
    }

    .detalle-producto__precio {
        margin-bottom: 1.3rem;
        font-size: 1.6rem;
    }

    .detalle-producto__descripcion {
        max-width: none;
        font-size: .95rem;
        line-height: 1.7;
    }


    /* ------------------------------------------
       FORMULARIO
    ------------------------------------------ */

    .detalle-producto__formulario {
        width: 100%;
        margin-top: 2.2rem;
        align-items: stretch;
        gap: .7rem;
    }

    .selector-cantidad--grande {
        width: 100%;
        height: 50px;
    }

    .selector-cantidad__boton {
        width: 50px;
        flex-basis: 50px;
    }

    .detalle-producto__formulario .boton-agregar {
        width: 100%;
        max-width: none;
        min-height: 52px;
    }

    .detalle-producto__volver {
        margin-top: 1.3rem;
        font-size: .95rem;
    }
}


/* ==========================================================
   MÓVIL — PEDIDOS
   2 COLUMNAS
========================================================== */

@media (max-width: 560px) {

    .seccion > .seccion__titulo {
        margin-bottom: 1.4rem;
    }


    /* ------------------------------------------
       INTRODUCCIÓN
    ------------------------------------------ */

    .pedidos__introduccion {
        margin-bottom: 2rem;
        padding: 1.3rem 1rem;
        border-radius: 1rem;
    }

        .pedidos__introduccion h2 {
            font-size: 1.15rem;
        }

        .pedidos__introduccion p {
            font-size: .9rem;
            line-height: 1.6;
        }


    /* ------------------------------------------
       FILTROS
    ------------------------------------------ */

    .filtros {
        grid-template-columns: 1fr;
        gap: .85rem;
        margin-bottom: 2rem;
        padding: 1rem;
        border-radius: 1rem;
    }

        .filtros .campo {
            width: 100%;
        }

        .filtros .boton {
            width: 100%;
        }


    /* ------------------------------------------
       PRODUCTOS
       EXACTAMENTE 2 COLUMNAS
    ------------------------------------------ */

    .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-top: 1.5rem;
    }

    .tarjeta-producto {
        border-radius: .8rem;
    }

    .tarjeta-producto__imagen-envoltorio {
        aspect-ratio: 1 / 1;
    }

    .tarjeta-producto__cuerpo {
        gap: .3rem;
        padding: .75rem;
    }

    .tarjeta-producto__nombre {
        font-size: .88rem;
        line-height: 1.3;
    }

    .tarjeta-producto__precio {
        font-size: .92rem;
    }


    /* ------------------------------------------
       PAGINACIÓN
    ------------------------------------------ */

    .paginacion {
        margin-top: 2.3rem;
    }

        .paginacion ul {
            gap: .3rem;
        }

        .paginacion li a {
            min-width: 36px;
            height: 36px;
            padding: 0 .55rem;
            font-size: .85rem;
        }
}


/* ==========================================================
   TELÉFONOS PEQUEÑOS
========================================================== */

@media (max-width: 420px) {

    .detalle-producto {
        padding-top: 1.5rem;
    }

    .detalle-producto__titulo {
        font-size: 1.9rem;
    }

    .detalle-producto__precio {
        font-size: 1.5rem;
    }

    .detalle-producto__miniatura {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }
}


/* ==========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================== */

@media (max-width: 360px) {

    .grid-productos {
        gap: .6rem;
    }

    .tarjeta-producto__cuerpo {
        padding: .65rem;
    }

    .tarjeta-producto__nombre {
        font-size: .82rem;
    }

    .tarjeta-producto__precio {
        font-size: .86rem;
    }
}

/* ==========================================================
   PEDIDO DIRECTO POR WHATSAPP (detalle de Pedido)
========================================================== */

.detalle-producto__pedido {
    width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 2.2rem;
}


/* AVISO DE ANTICIPACIÓN Y ADELANTO */

.detalle-producto__aviso {
    margin: 0 0 .6rem;
    padding: .9rem 1rem;
    color: var(--color-texto-suave);
    background: var(--color-fondo-crema);
    border: 1px solid var(--color-borde);
    border-left: 3px solid var(--color-dorado);
    border-radius: .7rem;
    font-size: .9rem;
    line-height: 1.6;
}


/* ETIQUETA Y CAMPO DE FECHA */

.detalle-producto__pedido label {
    color: var(--color-texto);
    font-size: .85rem;
    font-weight: 700;
}

.detalle-producto__pedido input[type="date"] {
    width: 100%;
    height: 50px;
    padding: 0 .9rem;
    box-sizing: border-box;
    color: var(--color-texto);
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: .7rem;
    font-family: inherit;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .detalle-producto__pedido input[type="date"]:hover {
        border-color: rgba(122, 74, 43, .35);
    }

    .detalle-producto__pedido input[type="date"]:focus {
        border-color: var(--color-pan);
        box-shadow: 0 0 0 3px rgba(122, 74, 43, .10);
    }


/* MENSAJE DE ERROR DE FECHA */

.detalle-producto__error {
    margin: 0;
    padding: .65rem .85rem;
    color: #9B2C2C;
    background: #FDF0EE;
    border: 1px solid rgba(155, 44, 44, .25);
    border-radius: .6rem;
    font-size: .85rem;
    line-height: 1.5;
}

    .detalle-producto__error[hidden] {
        display: none;
    }


/* BOTÓN PEDIR POR WHATSAPP */

.detalle-producto__comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 1.2rem;
    box-sizing: border-box;
    color: #FFFFFF;
    background: #1E9E52;
    border: 0;
    border-radius: .7rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

    .detalle-producto__comprar:hover {
        background: #17803F;
        transform: translateY(-2px);
    }