/* =========================================================================
   Panel de pedidos — v2.1
   Mobile-first. Celular: rejilla de 2 columnas + hojas deslizantes.
   Escritorio: filtros | catálogo | carrito fijo.
   ========================================================================= */

.ipp-app {
    /* Paleta ALESAGRO, tomada directamente del logo:
       verde del anillo, oro del listón, rojo de la manzana y crema del fondo. */
    --ipp-verde: #10633C;
    --ipp-verde-oscuro: #0A4629;
    --ipp-verde-suave: #EDF5EF;
    --ipp-verde-borde: #C9E0D2;
    --ipp-oro: #B08F4A;
    --ipp-oro-claro: #D3C372;
    --ipp-oro-suave: #FAF5E8;
    --ipp-naranja: #C8433C;          /* rojo manzana: badges de promoción */
    --ipp-naranja-suave: #FCF0EF;
    --ipp-texto: #14261D;
    --ipp-texto-suave: #5F7268;
    --ipp-borde: #E1E7E1;
    --ipp-fondo: #F6F8F4;
    --ipp-blanco: #ffffff;
    --ipp-rojo: #C0392F;
    --ipp-radio: 14px;
    --ipp-sombra: 0 1px 2px rgba(20, 38, 29, .07);
    --ipp-sombra-alta: 0 12px 34px rgba(20, 38, 29, .18);

    box-sizing: border-box;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 12px 96px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ipp-texto);
    -webkit-font-smoothing: antialiased;
}

.ipp-app *,
.ipp-app *::before,
.ipp-app *::after {
    box-sizing: border-box;
}

/* Los elementos con display propio ignoran el atributo hidden del navegador */
.ipp-app [hidden],
.ipp-exito[hidden],
.ipp-barra-movil[hidden],
.ipp-fondo[hidden] {
    display: none !important;
}

body.ipp-sin-scroll {
    overflow: hidden;
}

/* ---------- Encabezado con logo ---------- */
.ipp-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 0 14px;
}

.ipp-logo {
    flex: 0 0 auto;
    width: auto;
    height: 62px;
    display: block;
    mix-blend-mode: multiply; /* funde el fondo crema del logo con la página */
}

.ipp-header-texto {
    min-width: 0;
}

.ipp-header h1 {
    margin: 0 0 5px;
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.ipp-header p {
    margin: 0;
    font-size: .92rem;
    color: var(--ipp-texto-suave);
}

/* ---------- Barra pegajosa ---------- */
.ipp-barra {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -12px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ipp-borde);
    box-shadow: inset 0 -3px 0 -1px var(--ipp-oro-claro);
}

.ipp-barra-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ipp-buscador {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.ipp-buscador-icono {
    position: absolute;
    left: 13px;
    font-size: .9rem;
    opacity: .55;
    pointer-events: none;
}

.ipp-buscador input {
    width: 100%;
    height: 44px;
    padding: 0 40px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ipp-texto);
    background: var(--ipp-fondo);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
    outline: none;
    transition: border-color .15s, background .15s;
    -webkit-appearance: none;
}

.ipp-buscador input:focus {
    background: var(--ipp-blanco);
    border-color: var(--ipp-verde);
}

.ipp-buscador input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.ipp-limpiar {
    position: absolute;
    right: 7px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: var(--ipp-texto-suave);
    background: var(--ipp-borde);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* Botón de filtros (solo celular/tablet) */
.ipp-boton-filtros {
    position: relative;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: .87rem;
    font-weight: 650;
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.ipp-filtros-activos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: var(--ipp-verde);
    border-radius: 999px;
}

/* En celular el botón de filtros se reduce a su ícono, para dejarle
   todo el ancho posible al buscador */
@media (max-width: 599px) {
    .ipp-filtros-texto { display: none; }
    .ipp-boton-filtros { padding: 0 13px; }
}

/* Selector de vista */
.ipp-vista {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--ipp-fondo);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
}

.ipp-vista-boton {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: var(--ipp-texto-suave);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ipp-vista-boton[aria-pressed="true"] {
    color: #fff;
    background: var(--ipp-verde);
}

/* Chips de categoría */
.ipp-chips {
    display: flex;
    gap: 7px;
    margin-top: 9px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ipp-chips::-webkit-scrollbar {
    display: none;
}

.ipp-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 650;
    white-space: nowrap;
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ipp-chip:hover {
    border-color: var(--ipp-verde);
    color: var(--ipp-verde-oscuro);
}

.ipp-chip-activo {
    color: #fff;
    background: var(--ipp-verde);
    border-color: var(--ipp-verde);
}

/* ---------- Estructura ---------- */
.ipp-layout {
    display: block;
    padding-top: 16px;
}

.ipp-resumen-resultados {
    margin-bottom: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ipp-texto-suave);
}

/* ---------- Títulos de categoría ---------- */
.ipp-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
    padding-bottom: 7px;
    font-size: .78rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ipp-texto-suave);
    border-bottom: 2px solid var(--ipp-oro-claro);
}

.ipp-catalogo > .ipp-seccion-titulo:first-child {
    margin-top: 0;
}

.ipp-seccion-icono { font-size: 1rem; }
.ipp-seccion-nombre { flex: 1; min-width: 0; }

.ipp-seccion-conteo {
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--ipp-fondo);
    border-radius: 999px;
}

/* =========================================================================
   VISTA REJILLA
   ========================================================================= */
.ipp-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ipp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: var(--ipp-radio);
    box-shadow: var(--ipp-sombra);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.ipp-card:hover {
    box-shadow: 0 4px 14px rgba(20, 38, 29, .11);
}

.ipp-card-activa {
    border-color: var(--ipp-verde);
    box-shadow: 0 0 0 1px var(--ipp-verde);
}

/* Imagen */
.ipp-card-figura {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ipp-fondo);
    overflow: hidden;
}

.ipp-card-figura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
}

/* Mosaico cuando el producto todavía no tiene foto */
.ipp-mosaico {
    --tono: 140deg;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%,
            hsl(var(--tono) 24% 96%) 0%,
            hsl(var(--tono) 20% 92%) 55%,
            hsl(var(--tono) 18% 88%) 100%);
    box-shadow: inset 0 0 0 1px rgba(176, 143, 74, .14);
}

.ipp-mosaico-icono {
    font-size: 2.4rem;
    line-height: 1;
    opacity: .75;
    filter: saturate(.9);
}

.ipp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    background: var(--ipp-naranja);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(200, 67, 60, .32);
}

/* Cuerpo */
.ipp-card-cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px 6px;
}

.ipp-card-nombre {
    margin: 0;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.32;
    color: var(--ipp-texto);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ipp-card-precios {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

/* El nombre manda arriba y el botón de agregar abajo; lo de en medio
   fluye. Antes el precio se pegaba al fondo con margin-top:auto, y con
   las presentaciones abajo quedaba un hueco raro tras el nombre. */
.ipp-card-cuerpo > :last-child { margin-bottom: auto; }

.ipp-precio {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ipp-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.ipp-precio-anterior {
    font-size: .78rem;
    color: var(--ipp-texto-suave);
    text-decoration-thickness: 1.5px;
    font-variant-numeric: tabular-nums;
}

.ipp-card-unidad {
    font-size: .74rem;
    color: var(--ipp-texto-suave);
}

/* Acción */
.ipp-card-accion {
    padding: 0 11px 11px;
}

.ipp-agregar {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ipp-verde-oscuro);
    background: var(--ipp-verde-suave);
    border: 1.5px solid var(--ipp-verde-borde);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}

.ipp-agregar:hover {
    color: #fff;
    background: var(--ipp-verde);
    border-color: var(--ipp-verde);
}

.ipp-control {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 2px;
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-verde);
    border-radius: 999px;
}

.ipp-paso {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ipp-verde-oscuro);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s, color .12s;
    -webkit-tap-highlight-color: transparent;
}

.ipp-paso:hover {
    color: #fff;
    background: var(--ipp-verde);
}

.ipp-cantidad {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 32px;
    padding: 0;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-align: center;
    color: var(--ipp-texto);
    background: transparent;
    border: 0;
    outline: none;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

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

/* =========================================================================
   VISTA LISTA COMPACTA
   ========================================================================= */
.ipp-modo-lista .ipp-rejilla {
    grid-template-columns: 1fr;
    gap: 7px;
}

.ipp-modo-lista .ipp-card {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 8px 11px 8px 8px;
}

.ipp-modo-lista .ipp-card-figura {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    aspect-ratio: auto;
    border-radius: 10px;
}

.ipp-modo-lista .ipp-card-figura img { padding: 4px; }
.ipp-modo-lista .ipp-mosaico-icono { font-size: 1.5rem; }

.ipp-modo-lista .ipp-badge {
    top: 2px;
    left: 2px;
    padding: 1px 5px;
    font-size: .6rem;
}

.ipp-modo-lista .ipp-card-cuerpo {
    flex: 1;
    min-width: 0;
    padding: 0;
    gap: 2px;
}

.ipp-modo-lista .ipp-card-nombre {
    -webkit-line-clamp: 2;
    font-size: .88rem;
}

.ipp-modo-lista .ipp-card-precios { margin-top: 0; }

.ipp-modo-lista .ipp-card-unidad {
    display: inline;
}

.ipp-modo-lista .ipp-card-accion {
    flex: 0 0 auto;
    padding: 0;
    width: 120px;
}

/* =========================================================================
   FILTROS
   ========================================================================= */
.ipp-filtros {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 86vh;
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    background: var(--ipp-blanco);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--ipp-sombra-alta);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ipp-filtros.ipp-abierto { transform: translateY(0); }

.ipp-filtros-caja { padding: 18px; }

.ipp-filtros-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ipp-filtros-encabezado h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.ipp-filtro-grupo {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ipp-borde);
}

.ipp-filtro-grupo h3 {
    margin: 0 0 9px;
    font-size: .74rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ipp-texto-suave);
}

.ipp-radio,
.ipp-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: .88rem;
    cursor: pointer;
    line-height: 1.35;
}

.ipp-radio input,
.ipp-check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--ipp-verde);
    cursor: pointer;
}

.ipp-filtro-categorias {
    max-height: 260px;
    overflow-y: auto;
}

.ipp-boton-secundario {
    width: 100%;
    padding: 11px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 650;
    color: var(--ipp-texto);
    background: var(--ipp-fondo);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 10px;
    cursor: pointer;
}

.ipp-boton-secundario:hover { background: var(--ipp-borde); }

/* =========================================================================
   ESTADOS
   ========================================================================= */
.ipp-cargando,
.ipp-sin-resultados,
.ipp-error,
.ipp-vacio {
    padding: 44px 20px;
    text-align: center;
    color: var(--ipp-texto-suave);
    background: var(--ipp-blanco);
    border: 1.5px dashed var(--ipp-borde);
    border-radius: var(--ipp-radio);
}

.ipp-error {
    color: var(--ipp-rojo);
    background: #fef2f2;
    border-color: #fecaca;
}

.ipp-sin-resultados p:first-child {
    margin: 0 0 4px;
    font-weight: 650;
    color: var(--ipp-texto);
}

.ipp-sin-resultados-tip { margin: 0; }

/* =========================================================================
   CARRITO
   ========================================================================= */
.ipp-carrito-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 88vh;
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    background: var(--ipp-blanco);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--ipp-sombra-alta);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ipp-carrito-panel.ipp-abierto { transform: translateY(0); }

.ipp-carrito-caja { padding: 18px; }

.ipp-carrito-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.ipp-carrito-encabezado h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.ipp-cerrar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--ipp-texto-suave);
    background: var(--ipp-fondo);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.ipp-carrito-items {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.ipp-carrito-vacio {
    margin: 0;
    padding: 22px 0;
    text-align: center;
    font-size: .88rem;
    color: var(--ipp-texto-suave);
}

.ipp-carrito-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ipp-borde);
}

.ipp-carrito-item-textos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ipp-carrito-item-nombre {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
}

.ipp-carrito-item-detalle {
    font-size: .76rem;
    color: var(--ipp-texto-suave);
    font-variant-numeric: tabular-nums;
}

.ipp-carrito-item-derecha {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ipp-carrito-item-subtotal {
    font-size: .88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ipp-quitar {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    color: var(--ipp-texto-suave);
    background: var(--ipp-fondo);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ipp-quitar:hover {
    color: var(--ipp-rojo);
    background: #fee2e2;
}

/* Total */
.ipp-total-caja {
    padding: 13px 14px;
    margin-bottom: 16px;
    background: var(--ipp-verde-suave);
    border: 1.5px solid var(--ipp-verde-borde);
    border-left: 4px solid var(--ipp-oro);
    border-radius: var(--ipp-radio);
}

.ipp-total-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .98rem;
    font-weight: 650;
}

.ipp-total-linea strong {
    font-size: 1.42rem;
    font-weight: 850;
    letter-spacing: -.025em;
    color: var(--ipp-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.ipp-ahorro {
    margin: 6px 0 0;
    padding: 5px 9px;
    font-size: .76rem;
    font-weight: 650;
    color: var(--ipp-naranja);
    background: var(--ipp-naranja-suave);
    border-radius: 7px;
}

.ipp-total-nota {
    margin: 5px 0 0;
    font-size: .74rem;
    color: var(--ipp-texto-suave);
}

/* Formulario */
.ipp-formulario h3 {
    margin: 0 0 11px;
    font-size: .74rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ipp-texto-suave);
}

.ipp-formulario label {
    display: block;
    margin-bottom: 5px;
    font-size: .83rem;
    font-weight: 600;
}

.ipp-opcional {
    font-weight: 400;
    color: var(--ipp-texto-suave);
}

.ipp-formulario input,
.ipp-formulario textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 1rem; /* 16px evita el zoom automático de iOS */
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
}

.ipp-formulario input:focus,
.ipp-formulario textarea:focus {
    border-color: var(--ipp-verde);
}

.ipp-formulario textarea {
    min-height: 60px;
    resize: vertical;
}

.ipp-aviso {
    margin-bottom: 12px;
    padding: 10px 12px;
    font-size: .85rem;
    color: #991b1b;
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 10px;
}

.ipp-boton-enviar {
    width: 100%;
    padding: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--ipp-verde);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.ipp-boton-enviar:hover:not(:disabled) { background: var(--ipp-verde-oscuro); }
.ipp-boton-enviar:active:not(:disabled) { transform: scale(.99); }

.ipp-boton-enviar:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* =========================================================================
   BARRA INFERIOR (celular)
   ========================================================================= */
.ipp-barra-movil {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom));
    background: var(--ipp-blanco);
    border-top: 1.5px solid var(--ipp-borde);
    box-shadow: 0 -4px 20px rgba(20, 38, 29, .11);
}

.ipp-barra-movil-info {
    display: flex;
    flex-direction: column;
    line-height: 1.22;
}

.ipp-barra-movil-info span {
    font-size: .76rem;
    color: var(--ipp-texto-suave);
}

.ipp-barra-movil-info strong {
    font-size: 1.14rem;
    font-weight: 850;
    color: var(--ipp-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.ipp-barra-movil-boton {
    flex: 0 0 auto;
    padding: 12px 22px;
    font-family: inherit;
    font-size: .93rem;
    font-weight: 700;
    color: #fff;
    background: var(--ipp-verde);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.ipp-barra-movil-boton:hover { background: var(--ipp-verde-oscuro); }

.ipp-fondo {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(20, 38, 29, .48);
}

/* =========================================================================
   CONFIRMACIÓN
   ========================================================================= */
.ipp-exito {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 38, 29, .62);
}

.ipp-exito-caja {
    width: 100%;
    max-width: 380px;
    padding: 32px 26px;
    text-align: center;
    background: var(--ipp-blanco);
    border-radius: 18px;
    box-shadow: var(--ipp-sombra-alta);
}

.ipp-exito-icono {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    font-weight: 700;
    color: #fff;
    background: var(--ipp-verde);
    border-radius: 50%;
}

.ipp-exito-caja h2 {
    margin: 0 0 8px;
    font-size: 1.32rem;
    font-weight: 750;
}

.ipp-exito-caja p {
    margin: 0 0 4px;
    font-size: .9rem;
    color: var(--ipp-texto-suave);
}

.ipp-exito-folio {
    margin: 10px 0 14px !important;
    padding: 12px;
    font-size: 1.12rem !important;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--ipp-verde-oscuro) !important;
    background: var(--ipp-verde-suave);
    border-radius: 10px;
}

.ipp-exito-nota { margin-bottom: 20px !important; }

/* =========================================================================
   TABLET — 600px+
   ========================================================================= */
@media (min-width: 600px) {
    .ipp-app { padding-left: 18px; padding-right: 18px; }
    .ipp-barra { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
    .ipp-header h1 { font-size: 1.85rem; }

    .ipp-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ipp-modo-lista .ipp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   ESCRITORIO CHICO — 900px+  (catálogo + carrito fijo)
   ========================================================================= */
@media (min-width: 900px) {
    .ipp-app { padding-bottom: 40px; }

    .ipp-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 24px;
        align-items: start;
    }

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

    /* El carrito pasa a ser columna fija */
    .ipp-carrito-panel {
        position: sticky;
        top: 122px;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 10;
        max-height: calc(100vh - 145px);
        transform: none;
        border: 1.5px solid var(--ipp-borde);
        border-radius: var(--ipp-radio);
        box-shadow: var(--ipp-sombra);
    }

    .ipp-carrito-panel .ipp-cerrar,
    .ipp-barra-movil,
    .ipp-fondo {
        display: none !important;
    }
}

/* =========================================================================
   ESCRITORIO — 1200px+  (filtros | catálogo | carrito)
   ========================================================================= */
@media (min-width: 1200px) {
    .ipp-layout {
        grid-template-columns: 218px minmax(0, 1fr) 330px;
    }

    .ipp-filtros {
        position: sticky;
        top: 122px;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 10;
        max-height: calc(100vh - 145px);
        transform: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .ipp-filtros-caja {
        padding: 0;
    }

    .ipp-filtros-encabezado { display: none; }

    /* Con filtros a la vista, el botón y los chips sobran */
    .ipp-boton-filtros,
    .ipp-chips {
        display: none !important;
    }

    .ipp-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ipp-modo-lista .ipp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .ipp-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Accesibilidad ---------- */
.ipp-app button:focus-visible,
.ipp-app input:focus-visible,
.ipp-app textarea:focus-visible {
    outline: 2px solid var(--ipp-verde);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ipp-app *,
    .ipp-carrito-panel,
    .ipp-filtros {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================================
   v3.0 — Cuenta del cliente, presentaciones e inventario
   ========================================================================= */

/* Botón de entrar (encabezado) */
.ipp-entrar {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 9px 16px;
    font-size: .85rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--ipp-verde-oscuro);
    background: var(--ipp-verde-suave);
    border: 1.5px solid var(--ipp-verde-borde);
    border-radius: 999px;
    white-space: nowrap;
}

.ipp-entrar:hover {
    color: #fff;
    background: var(--ipp-verde);
    border-color: var(--ipp-verde);
}

/* Barra de la cuenta */
.ipp-cuenta {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--ipp-verde-suave);
    border: 1.5px solid var(--ipp-verde-borde);
    border-left: 4px solid var(--ipp-oro);
    border-radius: var(--ipp-radio);
}

.ipp-cuenta-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ipp-cuenta-saludo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ipp-cuenta-etiqueta {
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ipp-texto-suave);
}

.ipp-cuenta-saludo strong {
    font-size: 1rem;
    font-weight: 750;
    color: var(--ipp-verde-oscuro);
}

.ipp-cuenta-acciones {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.ipp-cuenta-boton {
    padding: 8px 14px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.ipp-cuenta-boton:hover {
    border-color: var(--ipp-verde);
    color: var(--ipp-verde-oscuro);
}

.ipp-cuenta-alerta {
    margin-top: 10px;
    padding: 9px 12px;
    font-size: .85rem;
    font-weight: 650;
    color: #8A1F11;
    background: var(--ipp-naranja-suave);
    border: 1.5px solid #F2C9C6;
    border-radius: 10px;
    cursor: pointer;
}

/* Selector de presentación en la tarjeta */

/* Aviso de "te falta" sobre la foto */
.ipp-badge-stock {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    background: var(--ipp-naranja);
    border-radius: 999px;
}

.ipp-modo-lista .ipp-badge-stock {
    top: 2px;
    right: 2px;
    padding: 1px 5px;
    font-size: .58rem;
}

/* =========================================================================
   PORTAL DEL CLIENTE — página propia (/mi-inventario)
   Separado del panel de pedidos y del admin de WordPress.
   ========================================================================= */

.ipp-portal {
    --ipp-verde: #10633C;
    --ipp-verde-oscuro: #0A4629;
    --ipp-verde-suave: #EDF5EF;
    --ipp-verde-borde: #C9E0D2;
    --ipp-oro: #B08F4A;
    --ipp-oro-claro: #D3C372;
    --ipp-rojo: #C8433C;
    --ipp-rojo-suave: #FCF0EF;
    --ipp-ambar: #D19A1E;
    --ipp-ambar-suave: #FEF9EC;
    --ipp-texto: #14261D;
    --ipp-texto-suave: #5F7268;
    --ipp-borde: #E1E7E1;
    --ipp-fondo: #F6F8F4;
    --ipp-blanco: #fff;

    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 14px 50px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ipp-texto);
    -webkit-font-smoothing: antialiased;
}

.ipp-portal *,
.ipp-portal *::before,
.ipp-portal *::after { box-sizing: border-box; }

/* ---------- Encabezado ---------- */
.ipp-portal-cab {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 0 16px;
    border-bottom: 2px solid var(--ipp-oro-claro);
    margin-bottom: 20px;
}

.ipp-portal-logo {
    flex: 0 0 auto;
    height: 58px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
}

.ipp-portal-cab-datos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ipp-portal-etiqueta {
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ipp-texto-suave);
}

.ipp-portal-cab-datos strong {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--ipp-verde-oscuro);
    line-height: 1.25;
}

.ipp-portal-salir {
    flex: 0 0 auto;
    padding: 8px 15px;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
}

.ipp-portal-salir:hover {
    border-color: var(--ipp-verde);
    color: var(--ipp-verde-oscuro);
}

/* ---------- Acceso ---------- */
.ipp-portal-acceso {
    max-width: 400px;
    margin: 10px auto 0;
    padding: 26px 22px;
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 38, 29, .07);
}

.ipp-portal-acceso h1 {
    margin: 0 0 6px;
    font-size: 1.28rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.ipp-portal-intro {
    margin: 0 0 20px;
    font-size: .9rem;
    color: var(--ipp-texto-suave);
}

.ipp-portal-form label {
    display: block;
    margin-bottom: 5px;
    font-size: .84rem;
    font-weight: 600;
}

.ipp-portal-form input[type="text"],
.ipp-portal-form input[type="password"] {
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
}

.ipp-portal-form input:focus { border-color: var(--ipp-verde); }

.ipp-portal-recordar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .84rem;
    font-weight: 400 !important;
    cursor: pointer;
}

.ipp-portal-recordar input { width: 17px; height: 17px; margin: 0; accent-color: var(--ipp-verde); }

.ipp-portal-boton {
    display: inline-block;
    width: 100%;
    padding: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--ipp-verde);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s;
}

.ipp-portal-boton:hover { background: var(--ipp-verde-oscuro); color: #fff; }

.ipp-portal-boton-linea {
    color: var(--ipp-verde-oscuro);
    background: var(--ipp-verde-suave);
    border: 1.5px solid var(--ipp-verde-borde);
}

.ipp-portal-error {
    margin-bottom: 16px;
    padding: 11px 13px;
    font-size: .87rem;
    color: #8A1F11;
    background: var(--ipp-rojo-suave);
    border: 1.5px solid #F2C9C6;
    border-radius: 10px;
}

.ipp-portal-ayuda {
    margin: 14px 0 0;
    font-size: .84rem;
    color: var(--ipp-texto-suave);
    text-align: center;
}

.ipp-portal-ayuda a { color: var(--ipp-verde-oscuro); font-weight: 600; }

/* ---------- Resumen del semáforo ---------- */
.ipp-portal-resumen {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ipp-portal-tarjeta {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 15px;
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-left: 4px solid var(--ipp-borde);
    border-radius: 11px;
}

.ipp-portal-tarjeta.ipp-portal-rojo { border-left-color: var(--ipp-rojo); background: var(--ipp-rojo-suave); }
.ipp-portal-tarjeta.ipp-portal-amarillo { border-left-color: var(--ipp-ambar); background: var(--ipp-ambar-suave); }
.ipp-portal-tarjeta.ipp-portal-verde { border-left-color: var(--ipp-verde); background: var(--ipp-verde-suave); }

.ipp-portal-tarjeta-num { font-size: 1.32rem; font-weight: 800; line-height: 1.1; }
.ipp-portal-tarjeta-txt { font-size: .75rem; font-weight: 600; color: var(--ipp-texto-suave); }

/* ---------- Secciones ---------- */
.ipp-portal-seccion { margin-bottom: 28px; }

.ipp-portal-seccion-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--ipp-oro-claro);
}

.ipp-portal-seccion-cab h2 {
    margin: 0;
    font-size: .8rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ipp-texto-suave);
}

.ipp-portal-recargar {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--ipp-texto-suave);
    background: var(--ipp-fondo);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 50%;
    cursor: pointer;
}

.ipp-portal-recargar:hover { border-color: var(--ipp-verde); color: var(--ipp-verde-oscuro); }
.ipp-portal-recargar:disabled { opacity: .5; cursor: wait; }

.ipp-portal-nota {
    margin: 0 0 14px;
    font-size: .86rem;
    color: var(--ipp-texto-suave);
}

/* ---------- Filtros ---------- */
.ipp-portal-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.ipp-portal-filtros input[type="search"] {
    flex: 1 1 190px;
    min-width: 0;
    height: 42px;
    padding: 0 15px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--ipp-fondo);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 999px;
    outline: none;
    -webkit-appearance: none;
}

.ipp-portal-filtros input[type="search"]:focus {
    background: var(--ipp-blanco);
    border-color: var(--ipp-verde);
}

.ipp-portal-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ipp-portal-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--ipp-verde); }

/* ---------- Filas de inventario ---------- */
.ipp-portal-fila {
    padding: 13px;
    margin-bottom: 10px;
    background: var(--ipp-fondo);
    border: 1.5px solid var(--ipp-borde);
    border-left: 4px solid var(--ipp-borde);
    border-radius: 12px;
}

.ipp-portal-fila.ipp-portal-rojo { border-left-color: var(--ipp-rojo); background: var(--ipp-rojo-suave); }
.ipp-portal-fila.ipp-portal-amarillo { border-left-color: var(--ipp-ambar); background: var(--ipp-ambar-suave); }
.ipp-portal-fila.ipp-portal-verde { border-left-color: var(--ipp-verde); background: var(--ipp-verde-suave); }

.ipp-portal-fila-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ipp-portal-emoji { font-size: 1rem; }

.ipp-portal-nombre {
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.3;
}

.ipp-portal-detalle {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: .79rem;
    color: var(--ipp-texto-suave);
}

.ipp-portal-falta { font-weight: 700; color: var(--ipp-rojo); }

.ipp-portal-control {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.ipp-portal-control label { font-size: .84rem; font-weight: 600; }

.ipp-portal-campo {
    width: 100px;
    padding: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--ipp-texto);
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-radius: 9px;
    outline: none;
    -webkit-appearance: none;
}

.ipp-portal-campo:focus { border-color: var(--ipp-verde); }
.ipp-portal-unidad { font-size: .82rem; color: var(--ipp-texto-suave); }

.ipp-portal-guardar {
    margin-left: auto;
    padding: 10px 18px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--ipp-verde);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.ipp-portal-guardar:hover { background: var(--ipp-verde-oscuro); }
.ipp-portal-guardar:disabled { background: #A9BBB0; cursor: wait; }

/* ---------- Pedidos ---------- */
.ipp-portal-pedido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ipp-borde);
}

.ipp-portal-pedido:last-child { border-bottom: 0; }

.ipp-portal-pedido-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ipp-portal-pedido-folio { font-size: .89rem; font-weight: 700; }
.ipp-portal-pedido-fecha { font-size: .78rem; color: var(--ipp-texto-suave); }

.ipp-portal-pedido-total {
    font-size: .95rem;
    font-weight: 800;
    color: var(--ipp-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

/* ---------- Estados ---------- */
.ipp-portal-cargando,
.ipp-portal-vacio {
    padding: 34px 18px;
    text-align: center;
    font-size: .89rem;
    color: var(--ipp-texto-suave);
    background: var(--ipp-blanco);
    border: 1.5px dashed var(--ipp-borde);
    border-radius: 12px;
}

.ipp-portal-vacio p { margin: 0 0 4px; }
.ipp-portal-vacio p:first-child { font-weight: 650; color: var(--ipp-texto); }
.ipp-portal-vacio-tip { font-size: .84rem; }

.ipp-portal-aviso-caja {
    padding: 26px 22px;
    margin-bottom: 24px;
    background: var(--ipp-blanco);
    border: 1.5px solid var(--ipp-borde);
    border-left: 4px solid var(--ipp-oro);
    border-radius: 14px;
}

.ipp-portal-aviso-caja h1 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 750; }
.ipp-portal-aviso-caja p { margin: 0 0 10px; font-size: .92rem; color: var(--ipp-texto-suave); }

.ipp-portal-cta { margin-top: 26px; }

.ipp-portal-pie {
    margin-top: 30px;
    padding-top: 16px;
    text-align: center;
    font-size: .78rem;
    color: var(--ipp-texto-suave);
    border-top: 1px solid var(--ipp-borde);
}

.ipp-portal button:focus-visible,
.ipp-portal input:focus-visible,
.ipp-portal a:focus-visible {
    outline: 2px solid var(--ipp-verde);
    outline-offset: 2px;
}

/* =========================================================================
   PRESENTACIONES Y MADURACIÓN
   Se muestran como botones, no como menú desplegable: el cliente ve de un
   golpe todas las formas de pedir el producto sin tener que abrir nada.
   ========================================================================= */

.ipp-opciones-titulo {
    display: block;
    margin: 12px 0 5px;
    font-size: .7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ipp-texto-suave, #5F7268);
}

.ipp-opciones-titulo-oro { color: var(--ipp-oro, #B08F4A); }

.ipp-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ipp-opcion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 84px;
    padding: 7px 10px;
    font: inherit;
    text-align: left;
    color: var(--ipp-texto, #14261D);
    background: #fff;
    border: 1.5px solid var(--ipp-borde, #E1E7E1);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}

.ipp-opcion:hover { border-color: var(--ipp-verde-borde, #C9E0D2); background: #FAFCFA; }

.ipp-opcion-nombre {
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.25;
}

.ipp-opcion-precio {
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ipp-verde, #10633C);
}

/* La que está elegida */
.ipp-opcion-activa {
    background: var(--ipp-verde-suave, #EDF5EF);
    border-color: var(--ipp-verde, #10633C);
    box-shadow: inset 0 0 0 1px var(--ipp-verde, #10633C);
}

.ipp-opcion-activa .ipp-opcion-nombre { color: var(--ipp-verde-oscuro, #0A4629); font-weight: 750; }

.ipp-opcion:focus-visible {
    outline: 2px solid var(--ipp-verde, #10633C);
    outline-offset: 2px;
}

/* Maduración: los grados se aprietan más entre sí que las presentaciones */
.ipp-opciones-madurez { gap: 5px; }

/* -------------------------------------------------------------------------
   COLOR SEGÚN EL PUNTO DE MADURACIÓN

   Una escala de verde (tierno) a naranja (listo para comerse), para que el
   botón diga lo mismo que la palabra sin tener que leerla:

     t1 verde        · Verde
     t2 verde lima   · Más verde que amarillo
     t3 lima         · Entrado, Punta verde, Pintón, Sazón
     t4 ámbar        · Amarillo, Rallada
     t5 naranja      · Maduro, Lista para partir
     tn neutro       · cualquier otra palabra que escribas

   Los tonos activos son oscuros a propósito: el texto blanco encima tiene
   que leerse bien también en la calle, con el sol pegando en el celular.
   ------------------------------------------------------------------------- */

.ipp-opcion-madurez.ipp-mad-t1 { background: #E6F4EA; border-color: #86C29A; }
.ipp-opcion-madurez.ipp-mad-t1 .ipp-opcion-nombre { color: #14532D; }
.ipp-opcion-madurez.ipp-mad-t1:hover { border-color: #4E9C69; background: #DBEEE1; }

.ipp-opcion-madurez.ipp-mad-t2 { background: #EDF5DC; border-color: #A8C765; }
.ipp-opcion-madurez.ipp-mad-t2 .ipp-opcion-nombre { color: #33501A; }
.ipp-opcion-madurez.ipp-mad-t2:hover { border-color: #7EA33C; background: #E5F0CD; }

.ipp-opcion-madurez.ipp-mad-t3 { background: #F7F6DA; border-color: #CFCC5F; }
.ipp-opcion-madurez.ipp-mad-t3 .ipp-opcion-nombre { color: #57530F; }
.ipp-opcion-madurez.ipp-mad-t3:hover { border-color: #A8A425; background: #F2F0C8; }

.ipp-opcion-madurez.ipp-mad-t4 { background: #FDF3D7; border-color: #E8C25E; }
.ipp-opcion-madurez.ipp-mad-t4 .ipp-opcion-nombre { color: #6B4E10; }
.ipp-opcion-madurez.ipp-mad-t4:hover { border-color: #C79C25; background: #FBECC4; }

.ipp-opcion-madurez.ipp-mad-t5 { background: #FBE9DA; border-color: #E3A272; }
.ipp-opcion-madurez.ipp-mad-t5 .ipp-opcion-nombre { color: #7A3B10; }
.ipp-opcion-madurez.ipp-mad-t5:hover { border-color: #C4703A; background: #F8DEC8; }

/* ---- El que está elegido: relleno sólido y texto blanco ---- */

.ipp-opcion-madurez.ipp-mad-t1.ipp-opcion-activa {
    background: #1E6B33; border-color: #1E6B33; box-shadow: inset 0 0 0 1px #1E6B33;
}
.ipp-opcion-madurez.ipp-mad-t2.ipp-opcion-activa {
    background: #4A7C1F; border-color: #4A7C1F; box-shadow: inset 0 0 0 1px #4A7C1F;
}
.ipp-opcion-madurez.ipp-mad-t3.ipp-opcion-activa {
    background: #7A7A18; border-color: #7A7A18; box-shadow: inset 0 0 0 1px #7A7A18;
}
.ipp-opcion-madurez.ipp-mad-t4.ipp-opcion-activa {
    background: #9A6B00; border-color: #9A6B00; box-shadow: inset 0 0 0 1px #9A6B00;
}
.ipp-opcion-madurez.ipp-mad-t5.ipp-opcion-activa {
    background: #B05012; border-color: #B05012; box-shadow: inset 0 0 0 1px #B05012;
}

.ipp-opcion-madurez.ipp-opcion-activa[class*="ipp-mad-t"] .ipp-opcion-nombre {
    color: #fff;
    font-weight: 750;
}

/* Puntito de color antes del texto, para reforzar la lectura */
.ipp-opcion-madurez[class*="ipp-mad-t"] .ipp-opcion-nombre::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 1px;
    background: currentColor;
    opacity: .85;
}

/* Etiqueta del grado en el resumen del pedido, con su mismo color */
.ipp-carrito-item-madurez.ipp-mad-t1 { color: #14532D; background: #E6F4EA; border-color: #86C29A; }
.ipp-carrito-item-madurez.ipp-mad-t2 { color: #33501A; background: #EDF5DC; border-color: #A8C765; }
.ipp-carrito-item-madurez.ipp-mad-t3 { color: #57530F; background: #F7F6DA; border-color: #CFCC5F; }
.ipp-carrito-item-madurez.ipp-mad-t4 { color: #6B4E10; background: #FDF3D7; border-color: #E8C25E; }
.ipp-carrito-item-madurez.ipp-mad-t5 { color: #7A3B10; background: #FBE9DA; border-color: #E3A272; }

/* Maduración: mismos botones, en tono oro y en una sola línea */
.ipp-opcion-madurez {
    flex: 0 1 auto;
    min-width: 0;
    padding: 6px 12px;
    border-radius: 999px;
}

.ipp-opcion-madurez .ipp-opcion-nombre { font-size: .78rem; }

.ipp-opcion-madurez:hover { border-color: var(--ipp-oro-claro, #D3C372); background: #FEFCF6; }

.ipp-opcion-madurez.ipp-opcion-activa {
    background: #FBF7EC;
    border-color: var(--ipp-oro, #B08F4A);
    box-shadow: inset 0 0 0 1px var(--ipp-oro, #B08F4A);
}

.ipp-opcion-madurez.ipp-opcion-activa .ipp-opcion-nombre { color: #6E5A26; }

/* En vista de lista compacta los botones no deben crecer de más */
.ipp-modo-lista .ipp-opciones { gap: 5px; }
.ipp-modo-lista .ipp-opcion { flex: 0 1 auto; min-width: 0; padding: 5px 9px; }
.ipp-modo-lista .ipp-opcion-nombre { font-size: .74rem; }
.ipp-modo-lista .ipp-opcion-precio { font-size: .74rem; }
.ipp-modo-lista .ipp-opciones-titulo { margin: 8px 0 4px; }

/* En pantallas chicas: dos por renglón, para que se puedan tocar bien */
@media (max-width: 420px) {
    .ipp-opcion { min-width: calc(50% - 3px); }
    .ipp-opcion-madurez { min-width: 0; }
}

/* Etiqueta del grado dentro del resumen del pedido */
.ipp-carrito-item-madurez {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
    color: #6E5A26;
    background: #FBF7EC;
    border: 1px solid #E8DCBB;
    border-radius: 999px;
}