/* ============================================================================
   El bloque de envio dentro del mini carrito.

   Aparte de checkout.css a proposito: aquel son 55 KB para el formulario del
   checkout y solo se carga alli; esto vive en el cajon del carrito, que esta en
   TODAS las paginas. Por eso aqui solo hay lo que se usa.

   Nombres con prefijo .fliperu-mc para no chocar con .fliperu-envio del
   checkout: son dos sitios con dos anchos muy distintos y no deben compartir
   reglas, o tocar uno rompe el otro.

   ─────────────────────────────────────────────────────────────────────────
   LOS TAMAÑOS Y LOS COLORES SALEN DE LA MAQUETA QUE SE APROBO
   ─────────────────────────────────────────────────────────────────────────
   No son numeros inventados otra vez: son los de minicart.html, el prototipo
   que Cristhian reviso el 4-sep-2026. El azul del punto de la opcion elegida
   es su --accent (#2F5D7C). Se queda en azul y no en el ambar de la tienda a
   proposito: el boton de pagar ya es ambar, y ambar sobre ambar a tres
   centimetros no distingue nada.
   ========================================================================= */

/* EL MARGEN LATERAL, QUE HAY QUE PONERLO A MANO.
   Astra no pone padding en .astra-cart-drawer-content ni en
   .widget_shopping_cart_content: se lo pone a CADA hijo por separado —19,5 px
   la lista de productos, 20,1 px el subtotal y los botones—. Un bloque nuevo
   nace pegado al borde. Medido en produccion el 4-sep-2026.
   Si algun dia se cambia ese espaciado desde el Personalizador, este numero
   hay que traerlo detras. */
.fliperu-mc {
    margin: 0;
    /* 1.34em es EXACTAMENTE lo que usa Astra en .woocommerce-mini-cart__total
       (regla en linea del Personalizador). Se copia la formula y no el pixel
       porque su padding es responsivo: 18,33 px en el movil y 20,1 px en
       escritorio. Con un numero fijo, el bloque se descuadraba en un tamano u
       otro. Por eso tampoco se toca aqui el font-size: el em depende de el, y
       cambiarlo romperia la alineacion con el subtotal de arriba. */
    padding: 12px 1.34em 4px;
    line-height: 1.4;
    box-sizing: border-box;
}


/* ============================================================================
   ETIQUETAS Y CAMPOS  —  «PAÍS», «DISTRITO», «MÉTODO DE ENVÍO»
   ========================================================================= */

.fliperu-mc__lbl {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a9099;
    margin: 0 0 6px;
    line-height: 1.3;
}

.fliperu-mc__lbl--met { margin-top: 18px; }

.fliperu-mc__campo {
    position: relative;
    margin: 0 0 14px;
}

.fliperu-mc__campo select,
.fliperu-mc__campo input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    /* 16px o iOS hace zoom al enfocar y el cajon se descoloca. Es el mismo motivo
       por el que el checkout lo lleva; ver checkout.css. */
    font-size: 16px;
    line-height: 1.3;
    padding: 9px 11px;
    border: 1px solid #dee0e4;
    border-radius: 6px;
    background: #fff;
    color: #1b1d21;
    margin: 0;
    height: auto;
    min-height: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.fliperu-mc__campo select:focus,
.fliperu-mc__campo input[type="text"]:focus {
    outline: 2px solid #2f5d7c;
    outline-offset: 1px;
    border-color: #2f5d7c;
}

/* La flechita del desplegable. Va a mano porque appearance:none quita la del
   navegador, y sin ella el campo de pais no parece un desplegable. */
.fliperu-mc__chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #8a9099;
    font-size: 12px;
    line-height: 1;
}

/* Las sugerencias del buscador de distrito. Van por encima de lo que haya
   debajo, pero DENTRO del flujo del cajon: nada de position fixed, que en el
   cajon lateral de Astra se sale de su contenedor con scroll. */
.fliperu-mc__sugerencias {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid #dee0e4;
    border-radius: 6px;
    background: #fff;
}

.fliperu-mc__sugerencias li { margin: 0; padding: 0; }

.fliperu-mc__sugerencias button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 8px 11px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    color: #1b1d21;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.fliperu-mc__sugerencias li + li button { border-top: 1px solid #edeef1; }
.fliperu-mc__sugerencias button:hover,
.fliperu-mc__sugerencias button:focus { background: #edeef1; }

.fliperu-mc__sug-nombre  { display: block; font-weight: 600; }
.fliperu-mc__sug-detalle { display: block; font-size: 11.5px; color: #8a9099; margin-top: 1px; }

/* Mientras el servidor responde. Nada de ruleta: es medio segundo, y una ruleta
   llama mas la atencion que el cambio que se esta esperando. */
.fliperu-mc--esperando { opacity: .5; }

.fliperu-mc__espera {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #8a9099;
}

/* Este gris estaba en #8b8f9a y en pantalla no se leia: sobre blanco daba un
   contraste de 3.0:1, por debajo del 4.5:1 que pide la norma para texto
   pequeno. #5c626b llega a 6.0:1 y sigue siendo claramente secundario. */
.fliperu-mc__nota {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #5c626b;
}


/* ============================================================================
   LAS OPCIONES DE ENVIO  —  SE ELIGEN, NO SOLO SE LEEN
   ========================================================================= */

.fliperu-mc__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Y otra vez, con mas peso. La regla de arriba tiene una sola clase y NO gana al
   padding-left de 40 px que el cajon le pone a cualquier <ul>: la lista de
   opciones salia sangrada 40 px respecto a su etiqueta. Medido el 4-sep-2026. */
.fliperu-mc ul.fliperu-mc__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fliperu-mc ul.fliperu-mc__lista > li.fliperu-mc__op {
    list-style: none;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    cursor: pointer;
}

.fliperu-mc__op + .fliperu-mc__op { border-top: 1px dashed #dee0e4; }

.fliperu-mc__op:focus-visible {
    outline: 2px solid #2f5d7c;
    outline-offset: 2px;
    border-radius: 4px;
}

/* El punto. Marcado NO es un relleno: es el borde engordado hasta casi cerrarse,
   que deja un ojo blanco en medio y se lee igual de lejos que un radio del
   sistema sin depender de como lo pinte cada navegador. */
.fliperu-mc__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #dee0e4;
    background: #fff;
    flex: 0 0 auto;
    margin-top: 3px;
    box-sizing: border-box;
}

.fliperu-mc__op[data-on="1"] .fliperu-mc__dot {
    border-color: #2f5d7c;
    border-width: 4.5px;
}

.fliperu-mc__texto {
    flex: 1 1 auto;
    /* El cajon es estrecho: un nombre largo tiene que partir, no ensanchar. */
    min-width: 0;
}

.fliperu-mc__nombre {
    display: block;
    font-weight: 600;
    font-size: 13.2px;
    line-height: 1.3;
    color: #1b1d21;
    overflow-wrap: anywhere;
}

.fliperu-mc__desc {
    display: block;
    margin-top: 2px;
    font-size: 11.9px;
    line-height: 1.4;
    color: #5c626b;
    overflow-wrap: anywhere;
}

.fliperu-mc__extra {
    display: block;
    margin-top: 2px;
    font-size: 11.3px;
    line-height: 1.35;
    color: #8a9099;
    overflow-wrap: anywhere;
}

/* El espacio va como \00a0 y no como espacio normal: al principio de una caja en
   linea un espacio corriente se colapsa y el punto queda pegado a la palabra
   («·Numero»). */
.fliperu-mc__extra::before { content: "\00b7\00a0"; }

/* El punto delante solo tiene sentido cuando el extra es una MARCA corta («Con
   seguimiento»). Cuando es una frase entera —el segundo renglon de Express—
   sobra. */
.fliperu-mc__extra--frase::before { content: none; }
.fliperu-mc__extra--frase { font-size: 11.9px; color: #5c626b; }

.fliperu-mc__precio {
    margin-left: auto;
    flex: 0 0 auto;
    padding-left: 8px;
    font-weight: 600;
    font-size: 13.2px;
    color: #1b1d21;
    white-space: nowrap;
}

/* El detalle de la oficina SOLO en la opcion marcada.
   Con las tres abiertas a la vez la lista se hace larguisima —Trujillo tiene
   cuatro oficinas, o sea cinco renglones— y hay que hacer scroll para llegar al
   total. Y las direcciones de una oficina que no has elegido no le importan a
   nadie. */
.fliperu-mc__detalle {
    display: none;
    margin-top: 8px;
    padding: 8px 9px;
    border-radius: 5px;
    background: #edeef1;
    font-size: 11.4px;
    line-height: 1.45;
    color: #5c626b;
    overflow-wrap: anywhere;
}

.fliperu-mc__op[data-on="1"] .fliperu-mc__detalle { display: block; }
.fliperu-mc__detalle strong { color: #1b1d21; font-weight: 600; }

/* La holgura del tramo. Es lo unico del bloque que vende algo, asi que se ve. */
.fliperu-mc__holgura {
    margin: 12px 0 0;
    padding: 7px 9px;
    border-radius: 6px;
    background: #e7f1ea;
    color: #2c6e49;
    font-size: 11.8px;
    line-height: 1.35;
}


/* ============================================================================
   EL PIE  —  PRODUCTOS / ENVÍO / TOTAL
   ========================================================================= */

/* Ocupa el sitio exacto del «Subtotal:» de Astra, que se esconde mientras dura
   el paso 2. Mismo padding, misma linea de arriba: al cambiar de paso no se
   mueve nada, solo cambia lo que dice. */
.fliperu-mc-tot {
    padding: 0.7em 1.34em;
    border-top: 1px solid var(--ast-border-color, #e6e7ea);
}

.fliperu-mc__fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 12.8px;
    color: #5c626b;
    /* Los digitos en columna: sin esto el «S/ 12.00» y el «S/ 107.00» bailan. */
    font-variant-numeric: tabular-nums;
}

.fliperu-mc__fila--tot {
    padding-top: 5px;
    font-size: 15px;
    font-weight: 600;
    color: #1b1d21;
}


/* ============================================================================
   LOS DOS PASOS

   Paso 1  la bolsa: productos, subtotal y el boton.
   Paso 2  el envio: sustituye a los productos, el subtotal pasa a ser el
           desglose y el boton pasa a ser el de pagar.

   TODO CUELGA DE .fliperu-mc-listo, QUE LA PONE EL JAVASCRIPT.
   Sin esa clase, el cajon se comporta exactamente como antes de este bloque:
   productos, subtotal y el boton de pagar de siempre. O sea que si el script
   falla o no llega a cargar, nadie se queda sin poder comprar; como mucho se
   pierde la pantalla de envio. Es la razon de que las reglas esten escritas
   «al reves» de como se leerian normalmente.
   ========================================================================= */

/* Por defecto —sin JavaScript— ninguna pieza nuestra se ve. */
.fliperu-mc-panel[hidden] { display: none; }
.fliperu-mc-tot { display: none; }
.fliperu-mc__cta { display: none; }

/* --- con el script vivo --- */

/* El boton de pagar pasa a ser el mio, que es el mismo en los dos pasos. El de
   Astra se retira: dos botones «INICIAR PEDIDO» seguidos no tendrian sentido. */
.widget_shopping_cart_content.fliperu-mc-listo .fliperu-mc__cta { display: block; }
.widget_shopping_cart_content.fliperu-mc-listo .woocommerce-mini-cart__buttons a.checkout:not(.fliperu-mc__cta) { display: none; }

/* --- paso 2 ---

   Las dos primeras van con CINCO clases y no con dos, que es lo que pedirian.
   Astra declara en su CSS en linea:

     .woocommerce-js .astra-cart-drawer .astra-cart-drawer-content
     .woocommerce-mini-cart__total { display: flex; ... }

   cuatro clases y, encima, impreso DESPUES de este archivo. Con la regla corta,
   el «Subtotal:» seguia viendose encima del desglose y el pie enseñaba dos
   totales. Visto el 4-sep-2026.

   Las clases de mas se cogen del propio contenedor y del propio <p>, no de la
   cadena de Astra: asi la regla vale igual en el cajon de escritorio y en el de
   movil, que es otro elemento distinto. */
.widget_shopping_cart_content.fliperu-mc-listo.fliperu-mc-en-envio ul.woocommerce-mini-cart.cart_list { display: none; }
.widget_shopping_cart_content.fliperu-mc-listo.fliperu-mc-en-envio p.woocommerce-mini-cart__total.total { display: none; }
.widget_shopping_cart_content.fliperu-mc-listo.fliperu-mc-en-envio .fliperu-mc-tot { display: block; }

/* QUIEN ESTIRA EL CAJON EN EL PASO 2.
   .widget_shopping_cart_content es una columna flex, y el que llevaba el flex:1
   —el que crece y empuja el subtotal y el boton al fondo— era
   ul.woocommerce-mini-cart. En el paso 2 esa lista esta escondida, asi que no
   crecia nadie: el pie subia y quedaba medio cajon en blanco. Ahora el que crece
   es el panel, y ademas se lleva el scroll, que es lo que hace falta cuando el
   distrito tiene cuatro oficinas de Olva.
   min-height:0 no es adorno: sin el, un hijo flex no baja de su alto de
   contenido y el overflow no llega a activarse nunca. */
.widget_shopping_cart_content.fliperu-mc-en-envio .fliperu-mc-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}


/* ============================================================================
   EL BOTON

   Va DENTRO de <p class="woocommerce-mini-cart__buttons"> y con class="checkout",
   que es como se consigue que sea el mismo boton en los dos pasos sin copiar
   ningun numero: el sitio y el margen se los da ese <p>, y la forma —radio de
   5 px, mayusculas, 14 px, peso 600— una regla del Personalizador que solo mira
   dentro de el. Puesto fuera y sin esa clase, como estaba, salia con la forma
   de pastilla del tema y a otra altura.

   El precio de heredar esa regla es que el Personalizador tambien le pone
   font-size:0 y le escribe «INICIAR PEDIDO» en un ::before. En el paso 2 eso es
   justo lo que se quiere. En el paso 1 hay que deshacerlo, y por eso estas dos
   reglas llevan seis clases: el CSS del Personalizador se imprime en linea
   DESPUES de este archivo, asi que a igualdad de peso ganaria el.
   ========================================================================= */

.widget_shopping_cart_content.fliperu-mc-listo:not(.fliperu-mc-en-envio) .woocommerce-mini-cart__buttons a.checkout.fliperu-mc__cta {
    font-size: 14px;
}

.widget_shopping_cart_content.fliperu-mc-listo:not(.fliperu-mc-en-envio) .woocommerce-mini-cart__buttons a.checkout.fliperu-mc__cta::before {
    content: none;
}

/* En el paso 2 el texto lo pone el ::before, asi que la flecha sobra. */
.widget_shopping_cart_content.fliperu-mc-en-envio .fliperu-mc__flecha { display: none; }

/* El margen va aqui y no como un espacio en el HTML: con text-transform:uppercase y
   el hueco entre los dos <span> a merced de como quede el marcado, salia
   «VER OPCIONES DE ENVIO›», pegado. */
.fliperu-mc__flecha { font-size: 1.05em; line-height: 1; margin-left: .35em; }


/* ============================================================================
   LA CABECERA DEL CAJON
   ========================================================================= */

/* LA FLECHA DE VOLVER VA DENTRO DEL TITULO, NO AL LADO.
   La cabecera de Astra —.astra-cart-drawer-header— es un bloque normal: su aspa
   esta en position:absolute y el titulo es un <div>, o sea un bloque. Meter ahi
   un boton hermano mandaba el titulo a un SEGUNDO RENGLON, y la cabecera tiene
   max-height:3.5em, asi que ese renglon se salia y le pasaba por encima la linea
   de abajo. Es lo que se veia el 4-sep-2026: «Envio (1 de 2)» partido por el
   separador. Dentro del titulo la flecha es un elemento en linea mas y todo cabe
   donde debe.

   Su caja mide 1em EXACTO, el mismo alto que el texto, para no estirar el
   renglon; el dibujo se escala dentro. Por eso es un SVG y no un «‹»: la
   tipografia del tema decide cuanto ocupa un caracter, y ahi no hay margen. */
.astra-cart-drawer-title .fliperu-mc__atras {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -.14em;
    margin: 0 .3em 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    opacity: .7;
    line-height: 1;
    min-height: 0;
    cursor: pointer;
}

.astra-cart-drawer-title .fliperu-mc__atras:hover { opacity: 1; }
.astra-cart-drawer-title .fliperu-mc__atras svg { display: block; width: .74em; height: .74em; }

/* «(1 de 2)» junto al titulo: mas apagado, para que no compita con el. */
.fliperu-mc__paso-num { font-weight: 400; color: #8a9099; font-size: .88em; }