/*!
 * peig-tienda.css · La tienda con el aspecto de peigganadera.com (4/11/2026)
 * Va DESPUÉS de bootstrap.min.css y peig.css de la web (se cargan de peigganadera.com, ver peig_estilos.aspx).
 * Aquí solo va lo que la web no tiene: cesta, cuenta, modales de pedido, aviso de cookies, ficha de artículo
 * con los datos del ERP, contenidos de las entradas y las herramientas del administrador.
 * Usa siempre las variables --p-* de peig.css, así un cambio de colores o letras en la web llega también aquí.
 */

/* ============ 1. UTILIDADES QUE USAN LOS TROZOS QUE PINTA LA TIENDA (login, cuenta, pedidos) ============ */
.div_iz{text-align:left}
.div_ce{text-align:center}
.div_de{text-align:right}
.div_ju{text-align:justify}
.margin_0{margin:0}
.padding_0{padding:0}
.padding_5{padding:5px}
.padding_10{padding:10px 0}
.padding_15{padding:15px}
.padding_20{padding:20px}
.alto_10{height:10px}
.alto_20{height:20px}
.fl{float:left}
.fr{float:right}
.cur{cursor:pointer;text-decoration:none}
.azul{color:var(--p-verde);cursor:pointer;font-weight:600}
.azul:hover{text-decoration:underline;text-underline-offset:3px}
.texto_blanco{color:#fff}
.ls_invisible{display:none!important}
.ls_visible{display:block!important}
.modal-open{overflow:hidden}
/* Bootstrap 4 → 5: clases antiguas que siguen saliendo en los trozos de la tienda */
.float-left{float:left!important}
.float-right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.ml-auto{margin-left:auto!important}
.mr-auto{margin-right:auto!important}
.form-group{margin-bottom:1rem}

/* Botón «btn» sin color de Bootstrap (login, registro, contacto): como los de la web */
.btn:not([class*="btn-"]){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--p-verde);color:#fff;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer}
.btn:not([class*="btn-"]):hover{background:var(--p-verde-hover);color:#fff}
.btn-success{--bs-btn-bg:var(--p-verde);--bs-btn-border-color:var(--p-verde);--bs-btn-hover-bg:var(--p-verde-hover);--bs-btn-hover-border-color:var(--p-verde-hover)}
.btn-danger,.btn-secondary{--bs-btn-color:var(--p-texto);--bs-btn-bg:#fff;--bs-btn-border-color:var(--p-linea);--bs-btn-hover-color:var(--p-texto);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:var(--p-texto)}
button.p-ver{border:0;background:none;padding:0}

/* ============ 2. CABECERA: CESTA, CUENTA Y FILA DE FAMILIAS ============ */
.p-iconos{align-items:center}
.p-iconos .p-icono{font-family:inherit}
.p-cesta{position:relative}
.p-cesta-panel{display:none;position:absolute;top:100%;right:0;z-index:30;width:min(360px,calc(100vw - 24px));padding:14px;border-radius:var(--p-radio);background:#fff;box-shadow:inset 0 0 0 1px var(--p-linea),var(--p-sombra-alta)}
.p-cesta.abierto .p-cesta-panel{display:block}
@media (hover:hover) and (min-width:768px){.p-cesta:hover .p-cesta-panel,.p-cesta:focus-within .p-cesta-panel{display:block}}
.p-cesta .dropdown-cart-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--p-linea);font-size:14px;font-weight:600;color:var(--p-gris)}
.p-cesta .shopping-list{max-height:min(360px,55vh);overflow-y:auto;margin:0;padding:0;list-style:none}
.p-cesta .shopping-list li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--p-linea)}
.p-cesta .cart-img{display:grid;place-items:center;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--p-hueso)}
.p-cesta .cart-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.p-cesta .nombre{margin:0;font-size:14px;font-weight:600;line-height:1.3}
.p-cesta .quantity{margin:2px 0 0;font-size:13px;color:var(--p-gris)}
.p-cesta .amount{font-weight:700;color:var(--p-texto)}
.p-cesta .remove{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--p-gris);cursor:pointer}
.p-cesta .remove:hover{background:var(--p-hueso);color:var(--p-error)}
.p-cesta .bottom{padding-top:12px}

.p-tienda-ani[aria-current]{background:var(--p-verde-suave);color:var(--p-verde)}
/* los dibujos de veterinaria, ferretería y «Todo» son SVG: en verde, como los animales (PNG verdes de la web) */
.p-tienda-ani svg{color:var(--p-verde)}
.p-tienda-ani.edicion_menu{margin-left:auto;background:#FDECEA;color:var(--p-error)}

/* ============ 3. HERRAMIENTAS DEL ADMINISTRADOR (solo las ve quien entra como administrador) ============ */
.edicion_admin{background:var(--p-error);color:#fff;font-size:14px}
.edicion_admin .container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;min-height:40px}
.edicion_admin button{min-height:36px;padding:0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-weight:600;cursor:pointer}
.edicion_admin button:hover{background:rgba(255,255,255,.28)}
.edicion,.edicion_pie{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--p-error);color:#fff;font-size:17px;cursor:pointer;box-shadow:var(--p-sombra)}
.edicion i,.edicion_pie i{color:#fff;background:none;padding:0;font-size:17px}
main .row>[class*="col"]>.edicion{position:absolute;z-index:3;margin:8px}
main .row>[class*="col"]{position:relative}
.edicion_pie{width:30px;height:30px;font-size:13px;vertical-align:middle}
.ls_aviso_admin{padding:14px 16px;border-radius:var(--p-radio);background:#FDECEA;color:var(--p-error);font-weight:600}
/* recuadros del final de la portada: si solo queda uno, a todo el ancho */
.p-tienda-dos>:only-child{grid-column:1/-1}
/* texto del banner (.p-capitulo): el propio o PeigTienda.BannerPorDefecto, siempre dentro de .p-texto */
.p-capitulo .p-texto{max-width:none}
.p-capitulo .p-texto h2{margin:8px 0 0;font-size:clamp(26px,3vw,36px)}
.p-capitulo .p-texto p{margin:12px 0 0;font-size:17px;line-height:1.6;color:var(--p-gris)}
.p-capitulo .p-texto .p-botones{margin-top:16px}
/* lápiz de cada aviso de la animación (cuando hay más de uno) */
.p-banda{position:relative}
.p-banda-edicion{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;font-size:14px}
/* lápiz de los apartados sin título (animación, banner y recuadros del final) */
.p-admin-bloque{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p-error)}

/* ============ 4. PORTADA Y LISTADOS DE LA TIENDA ============ */
.p-tienda-cab{padding:14px 0}
.p-tienda-intro{padding:22px 0 0}
.p-tienda-intro h2{font-size:clamp(24px,2.6vw,34px);margin:0}
.p-tienda-intro .p-entradilla{margin:8px 0 0;font-size:17px;color:var(--p-gris);max-width:62ch}
.p-barra h2.p-cuenta{margin:0;font-family:var(--p-f-texto);font-size:16px;font-weight:700;letter-spacing:0}
.p-barra h2.p-cuenta small{margin-left:6px;font-weight:500;color:var(--p-gris)}
.p-barra .edicion{margin-left:auto}
.p-tienda-catalogo{padding:22px 0 40px}
.p-producto .p-sinfoto{display:grid;place-items:center;width:100%;height:100%}
/* los nombres del ERP pueden ser muy largos: tres líneas como mucho en la tarjeta (el nombre entero está en la ficha) */
.p-producto h3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.p-producto .p-importe small s{color:var(--p-gris);font-weight:500}
.p-cats--tienda{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
@media (max-width:575.98px){.p-cats--tienda{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.p-cats--tienda .p-cat{padding:14px 6px}.p-cats--tienda .p-cat b{font-size:13px}}
.p-cat-caja{position:relative}
.p-cat-caja>.edicion{position:absolute;top:6px;right:6px;z-index:1;width:32px;height:32px;font-size:14px}
.p-cats--tienda .p-cat{height:100%;background:#fff;box-shadow:inset 0 0 0 1px var(--p-linea)}
.p-cats--tienda .p-cat:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--p-linea),var(--p-sombra)}
.p-cats--tienda .p-cat img{width:72px;height:54px}
.p-cats--tienda .p-cat svg{width:48px;height:54px;color:var(--p-verde)}
.p-cats--tienda .p-cat b{font-size:15px}
.p-especie .p-img img{object-fit:cover}
.p-especie .p-cuerpo p{color:var(--p-verde);font-weight:600}
.p-marca-tienda .p-img{aspect-ratio:3/2;background:#fff}
.p-marca-tienda h3{font-size:16px}
.p-proyecto .p-img img{object-fit:cover}
.p-tienda-avisos{display:grid;gap:16px}
.p-banda .p-texto{max-width:none;font-size:16px}
.p-banda .p-texto h2{margin:0;font-size:clamp(22px,2.6vw,30px)}
.p-banda .p-texto h2+*{margin-top:8px}
/* los textos de la animación y de los banners traen el antetítulo dentro del título: <h2><span>Antetítulo</span>Título</h2> */
.p-banda .p-texto h2>span:first-child,.p-capitulo .p-texto h2>span:first-child,#capa_contenidos .hero-text h2>span:first-child{display:block;margin-bottom:8px;font:700 13px/1.2 var(--p-f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--p-verde)}
#capa_contenidos .hero-text h2>span:first-child{color:var(--p-amarillo)}
/* foto que no carga: se queda el fondo de color, sin el icono de imagen rota */
.p-img img.p-sin-carga,.cart-img img.p-sin-carga{visibility:hidden}
.p-capitulo>img.p-sin-carga,.p-banda>img.p-sin-carga{display:none}
.p-banda img{object-fit:contain}
.p-capitulo .p-texto{font-size:17px}
.p-capitulo h2{margin-top:8px}

/* subfamilias de una familia (píldoras, como los temas del blog de la web) */
.p-subfamilias{padding:16px 0 0}
.p-subfamilias .p-temas{gap:6px}
.p-subfamilias .p-temas a{min-height:40px;padding:0 14px;font-size:14px;background:#fff}
.p-subfamilias .p-temas a:hover{border-color:var(--p-texto)}
.p-subfamilias .p-temas a[aria-current]{background:var(--p-verde);border-color:var(--p-verde);color:#fff}
.p-subfamilias .p-temas small{margin-left:6px;font-size:12px;opacity:.7}
.p-texto-familia{padding:8px 0 0;color:var(--p-gris)}
.p-texto-familia .p-texto{font-size:16px}

/* ============ 5. FICHA DE ARTÍCULO ============ */
/* .p-tienda-ficha y no .p-ficha: el 11/11/2026 la web estrenó .p-ficha (la tarjeta flotante de 290 px de sus dibujos
   con números, position:absolute) y la ficha de la tienda se quedaba estrecha y encima del pie */
.p-tienda-ficha{padding:16px 0 48px}
.p-tienda-ficha .p-galeria .p-principal img{max-height:100%}
.p-tienda-ficha .p-sinfoto{display:grid;place-items:center;width:100%;height:100%;font-size:15px}
.p-compra .p-resumen.p-texto{max-width:none;font-size:16px;color:var(--p-gris)}
.p-compra .p-precio s{font:600 18px var(--p-f-texto);color:var(--p-gris)}
/* «Consultar precio» en la ficha: etiqueta verde (el botón «Pedir presupuesto» va debajo) */
.p-compra .p-consultar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--p-verde-suave);color:var(--p-verde);font:700 18px/1.1 var(--p-f-texto);letter-spacing:0}
.p-compra .p-consultar::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat}
/* «Consultar precio» en las tarjetas: botón de contorno verde que se rellena al pasar por la tarjeta */
.p-consultar-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--p-verde);color:var(--p-verde);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:background .15s ease,color .15s ease}
.p-consultar-btn svg{width:15px;height:15px;flex:none}
.p-producto:hover .p-consultar-btn,.p-producto:focus-visible .p-consultar-btn{background:var(--p-verde);color:#fff}
/* banner sin foto (no se encuentra en el almacén documental): el texto ocupa todo el ancho, sin dejar el hueco */
.p-capitulo.p-capitulo--sin-foto{grid-template-columns:1fr}
.p-variantes{display:grid;gap:4px;margin:14px 0 0;padding:12px 16px;border:0;border-radius:var(--p-radio);background:var(--p-hueso)}
.p-variantes legend{float:none;width:auto;margin:0 0 4px;padding:0;font-size:14px;font-weight:700}
.p-compartir{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px;font-size:14px;color:var(--p-gris)}
.p-compartir a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--p-hueso);color:var(--p-texto);text-decoration:none}
.p-compartir a:hover{background:var(--p-verde-suave);color:var(--p-verde)}
.p-caracteristicas{padding:8px 0 48px}
.p-caracteristicas .p-cabsec h2{font-size:clamp(24px,2.6vw,32px)}
.p-caract-foto{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);overflow:hidden;border-radius:var(--p-radio-lg);background:var(--p-hueso)}
.p-caract-foto .p-cuerpo{padding:24px 28px}
.p-caract-foto h3{font-size:22px;margin:0 0 8px}
.p-caract-foto .p-img{min-height:220px;background-size:cover;background-position:center}
@media (max-width:767.98px){.p-caract-foto{grid-template-columns:1fr}}
.p-caracteristicas .p-faq{max-width:none}
#DatosExternos:empty{display:none}

/* ============ 6. CONTENIDO DE LAS ENTRADAS (aviso legal, contacto, promociones…) ============ */
.p-entrada{padding:20px 0 40px}
.p-entrada .p-texto{max-width:80ch}
#capa_contenidos .row{--bs-gutter-y:1rem}
#capa_contenidos .tit1,#capa_contenidos .tit2{display:block;font-family:var(--p-f-titulo);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--p-texto)}
#capa_contenidos .tit1{font-size:clamp(26px,3vw,36px)}
#capa_contenidos .tit2{font-size:22px}
#capa_contenidos .det2,#capa_contenidos .ls_seccion_texto{font-size:17px;line-height:1.65;color:var(--p-texto)}
#capa_contenidos .ls_galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
#capa_contenidos .ls_galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--p-radio-sm)}
#capa_contenidos .single-slider{display:flex;align-items:flex-end;min-height:320px;border-radius:var(--p-radio-lg);overflow:hidden;background-size:cover;background-position:center}
#capa_contenidos .fondo_sombra{width:100%;padding:28px;background:linear-gradient(0deg,rgba(24,32,26,.82),rgba(24,32,26,0))}
#capa_contenidos .hero-text,#capa_contenidos .hero-text *{color:#fff}
#capa_contenidos form .form-control,#capa_contenidos textarea{margin-bottom:10px}

/* ============ 7. MODALES (pedido, cuenta, acceso, avisos) ============ */
.modal-content{border:0;border-radius:var(--p-radio-lg);box-shadow:var(--p-sombra-alta)}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--p-linea)}
.modal-header .modal-title{margin:0;font-size:22px}
.modal-body{padding:18px 22px}
.modal-footer{gap:8px;padding:14px 22px;border-top:1px solid var(--p-linea)}
.modal-footer>*{margin:0}
.modal-footer .p-btn{min-height:44px}
.modal-footer .p-btn:disabled{opacity:.45;cursor:default}
/* «Previsualizar» del editor: a la derecha, junto a la X (la X de Bootstrap 5 también lleva margin-left:auto y
   el botón se quedaba en medio de la cabecera), verde con el texto en blanco */
.modal-header .ls_btn_ver{display:inline-flex;align-items:center;gap:6px;min-height:38px;margin-left:auto!important;margin-right:10px!important;padding:0 16px;border:0;border-radius:999px;background:var(--p-verde);color:#fff!important;font-size:14px;font-weight:700}
.modal-header .ls_btn_ver:hover,.modal-header .ls_btn_ver:focus-visible{background:var(--p-verde-hover);color:#fff!important}
.modal-header .ls_btn_ver i{color:#fff}
.modal-header .ls_btn_ver~.btn-close{margin-left:0}
.modal table{font-size:14px}
.modal .table>:not(caption)>*>*{padding:.55rem .6rem}
#ModalAlert .modal-content{background:var(--p-texto);color:#fff;border-radius:var(--p-radio)}
#ModalAlert .modal-body{padding:16px 18px;font-weight:600;text-align:center}
#ModalAlert i{color:var(--p-amarillo)}
/* pestañas de «Mi cuenta» con el aspecto de las de la web */
.p-cuenta-pestanas{gap:4px;margin-bottom:8px;border-bottom:2px solid var(--p-linea)}
.p-cuenta-pestanas .nav-link{min-height:44px;display:flex;align-items:center;margin-bottom:-2px;padding:0 14px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;color:var(--p-gris);font-weight:700;cursor:pointer}
.p-cuenta-pestanas .nav-link:hover{color:var(--p-texto)}
.p-cuenta-pestanas .nav-link.active{color:var(--p-texto);background:none;border-bottom-color:var(--p-verde)}

/* ============ 7b. LO DE DENTRO DE LOS MODALES (5/11/2026): acceso, cesta, confirmar pedido, direcciones y Mi cuenta ============
   Los pintan ayudas/listarusuarios.aspx, tienda/pedidos.aspx y ayudas/ayudas.aspx con los componentes de la web
   (.p-campo, .p-check, .p-opcion, .p-cantidad, .p-tabla, .p-alerta); aquí solo su colocación. */
.p-enlace{padding:0;border:0;background:none;color:var(--p-verde);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.p-enlace:hover{color:var(--p-verde-hover)}
/* acceso y registro */
.p-acceso{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start}
.p-acceso-t{margin:0 0 4px;font-size:22px}
.p-acceso .p-nota{margin:0 0 16px}
.p-acceso-lado{padding:22px;border-radius:var(--p-radio);background:var(--p-hueso)}
.p-acceso-ventajas{display:grid;gap:14px;margin:14px 0 20px;padding:0;list-style:none}
.p-acceso-ventajas li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--p-gris)}
.p-acceso-ventajas svg{flex:none;width:38px;height:38px;padding:9px;border-radius:12px;background:#fff;color:var(--p-verde);box-shadow:inset 0 0 0 1px var(--p-linea)}
.p-acceso-ventajas b{display:block;font-size:15px;color:var(--p-texto)}
.p-acceso-olvido{justify-self:center;font-size:14px;font-weight:600;color:var(--p-verde);text-align:center}
.p-captcha{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.p-captcha img{display:block;border-radius:var(--p-radio-sm);background:#fff;box-shadow:0 0 0 1px var(--p-linea)}
.p-captcha .p-enlace{font-size:14px}
.p-check a{color:var(--p-verde);font-weight:600}
#mensaje_alerta{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--p-radio-sm);background:#FDECEA;color:var(--p-error);font-size:14px;font-weight:600}
#mensaje_alerta:empty{display:none}
/* cesta: una fila por artículo */
.p-lineas{margin:0;padding:0;list-style:none}
.p-linea{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px 14px;padding:14px 0;border-bottom:1px solid var(--p-linea)}
.p-linea:first-child{padding-top:0}
.p-linea-txt b{display:block;font-size:15px;line-height:1.3}
.p-linea-txt span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--p-gris)}
.p-linea-txt small{display:block;margin-top:3px;font-size:13px;color:var(--p-gris)}
.p-cantidad--linea button{width:40px;height:40px;font-size:18px}
.p-cantidad--linea button:disabled{opacity:.3;cursor:default}
.p-cantidad--linea output{min-width:34px;font-weight:700;text-align:center}
.p-linea-importe{min-width:86px;font-size:16px;text-align:right;white-space:nowrap}
.p-linea-quitar{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--p-gris);cursor:pointer}
.p-linea-quitar:hover{background:#FDECEA;color:var(--p-error)}
.p-linea-quitar svg{width:20px;height:20px}
.p-lineas-suma{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 0;font-weight:700}
.p-lineas-suma small{display:block;font-size:13px;font-weight:400;color:var(--p-gris)}
.p-lineas-suma b{font-size:20px;white-space:nowrap}
.p-vacia{display:flex;gap:16px;align-items:center;padding:22px;border-radius:var(--p-radio);background:var(--p-hueso)}
.p-vacia svg{flex:none;width:40px;height:40px;color:var(--p-verde)}
.p-vacia p{margin:0;font-size:14px;color:var(--p-gris)}
.p-vacia b{display:block;font-size:16px;color:var(--p-texto)}
/* confirmar pedido, por pasos */
.p-terminar{display:grid;gap:22px}
.p-paso{display:grid;gap:12px;min-width:0}
.p-paso+.p-paso{padding-top:22px;border-top:1px solid var(--p-linea)}
.p-paso-t{display:flex;align-items:center;gap:10px;margin:0;font-size:19px}
.p-paso-t span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--p-verde);color:#fff;font:700 14px var(--p-f-texto)}
.p-paso-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.p-paso-fila .p-campo{flex:1 1 280px}
.p-direccion{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 18px;margin:0;padding:16px 18px;border-radius:var(--p-radio);background:var(--p-hueso)}
.p-direccion dt{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--p-gris)}
.p-direccion dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.p-tabla .div_de{text-align:right}
.p-tabla--pedido{min-width:560px}
.p-tabla--col th:last-child,.p-tabla--col td:last-child{padding-right:0}
.p-tabla--pedido td small{display:block;font-size:13px;color:var(--p-gris)}
.p-totales{display:grid;gap:6px;width:min(100%,400px);margin:2px 0 0 auto;font-size:15px}
.p-totales div{display:flex;justify-content:space-between;gap:16px}
.p-totales dt{font-weight:500;color:var(--p-gris)}
.p-totales dd{margin:0;font-weight:600;white-space:nowrap}
.p-totales-total{padding-top:8px;border-top:1px solid var(--p-linea)}
.p-totales .p-totales-total dt,.p-totales .p-totales-total dd{font-weight:700;color:var(--p-texto)}
.p-terminar .p-opciones{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.p-total-pedido{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--p-radio);background:var(--p-verde-suave)}
.p-total-pedido>span{font-weight:700}
.p-total-pedido small{display:block;font-size:13px;font-weight:400;color:var(--p-gris)}
.p-total-pedido b{font:800 26px/1 var(--p-f-titulo);letter-spacing:-.02em;white-space:nowrap}
/* direcciones y Mi cuenta */
.p-direcciones{display:grid;gap:10px}
.p-direcciones .p-nota{margin:0}
#capa_cuenta{padding:16px 0 0}
#capa_cuenta>.p-nota{margin:14px 0 0}
.p-pedido-cab{display:grid;gap:6px;margin-bottom:10px}
.p-pedido-cab .p-enlace{justify-self:start;font-size:14px}
.p-tabla--pedidos{min-width:660px}
.p-estado{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--p-hueso);font-size:13px;font-weight:600}
.p-pedido-doc{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--p-verde);text-decoration:none}
.p-pedido-doc:hover{text-decoration:underline;text-underline-offset:3px}
.p-pedido-doc svg{width:18px;height:18px}
/* «Mis pedidos»: el PDF del pedido y sus facturas de NetOffice (App_Code/PeigFacturas.cs) */
.p-pedido-docs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.p-pedido-fra{font-size:14px;color:var(--p-gris);white-space:nowrap}
.p-estado--facturado{background:var(--p-verde-suave);color:var(--p-verde)}
@media (max-width:767.98px){
  .p-acceso{grid-template-columns:1fr;gap:20px}
}
@media (max-width:575.98px){
  .p-linea{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt quitar" "cant importe"}
  .p-linea-txt{grid-area:txt}
  .p-linea-quitar{grid-area:quitar;align-self:start}
  .p-cantidad--linea{grid-area:cant;justify-self:start}
  .p-linea-importe{grid-area:importe}
  .p-total-pedido b{font-size:22px}
  /* en el móvil las tablas del pedido pasan a fichas: sin desplazamiento lateral */
  .p-tabla-ancha .p-tabla--pedido,.p-tabla-ancha .p-tabla--pedidos{min-width:0}
  .p-tabla--pedido thead,.p-tabla--pedidos thead{display:none}
  .p-tabla--pedido tr,.p-tabla--pedidos tr{display:grid;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--p-linea)}
  .p-tabla--pedido td,.p-tabla--pedidos td{padding:0;border:0;text-align:left}
  .p-tabla--pedido tr{grid-template-columns:auto auto auto 1fr;align-items:baseline}
  .p-tabla--pedido td:nth-child(1){grid-column:1/-1}
  .p-tabla--pedido td:nth-child(2),.p-tabla--pedido td:nth-child(3),.p-tabla--pedido td:nth-child(4){font-size:13px;font-weight:500;color:var(--p-gris)}
  .p-tabla--pedido td:nth-child(2)::after{content:" ud. ×"}
  .p-tabla--pedido td:nth-child(4)::before{content:"dto. "}
  .p-tabla--pedido td.p-sin-dto{visibility:hidden}
  .p-tabla--pedido td:nth-child(5){font-weight:700;text-align:right}
  .p-tabla--pedidos tr{grid-template-columns:minmax(0,1fr) auto}
  .p-tabla--pedidos td:nth-child(1){grid-column:1;grid-row:1}
  .p-tabla--pedidos td:nth-child(3){grid-column:2;grid-row:1;font-weight:700;text-align:right}
  .p-tabla--pedidos td:nth-child(2){grid-column:1;grid-row:2;font-size:13px;color:var(--p-gris)}
  .p-tabla--pedidos td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  .p-tabla--pedidos td:nth-child(5),.p-tabla--pedidos td:nth-child(6){grid-column:1/-1;font-size:14px}
  .p-tabla--pedidos td:empty{display:none}
}

/* ============ 8. AVISO DE COOKIES: igual que el de peigganadera.com (12/11/2026: barra con tres botones y el panel de su aviso) ============ */
.mensajecookies{display:none!important}
.p-cookies{position:fixed;left:0;right:0;bottom:0;z-index:1018;background:#fff;border-top:1px solid var(--p-linea);box-shadow:0 -10px 28px -14px rgba(24,32,26,.3);color:var(--p-texto)}
.p-cookies .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;padding-block:8px}
.p-cookies p{margin:0;font-size:13.5px;line-height:1.4}
.p-cookies-botones{display:flex;flex:none;gap:8px}
.p-cookies-botones .p-btn{min-height:36px;padding:0 18px;font-size:13.5px}
body.p-cookies-visible{padding-bottom:var(--p-cookies-alto,64px)}
/* panel de ajustes, como el de la web: logo y categorías a la izquierda; texto, interruptor y botones sobre gris a la derecha */
body.p-cookies-abierto .modal-backdrop.show{opacity:.9}
#p-cookies-ajustes .modal-dialog{max-width:820px}
#p-cookies-ajustes .modal-content{display:grid;grid-template-columns:40% 60%;min-height:min(600px,calc(100vh - 3.5rem));border-radius:10px;color:#000}
.p-cookies-cerrar{position:absolute;top:-30px;right:-30px;z-index:2;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:var(--p-verde);color:#fff;cursor:pointer}
.p-cookies-cerrar:hover{background:var(--p-verde-hover)}
.p-cookies-cerrar svg{width:26px;height:26px}
.p-cookies-izq{padding:30px;border-radius:10px 0 0 10px;background:#fff;box-shadow:0 0 30px 0 rgba(35,35,35,.1)}
.p-cookies-logo{display:block;width:auto;max-width:70%;height:auto;margin:0 0 25px}
.p-cookies-menu{flex-direction:column;gap:7px;overflow:visible;border-bottom:0}
.p-cookies-menu button[role="tab"]{min-height:43px;margin:0;padding:13px 20px;border:1px solid #F1F1F1;border-radius:5px;background:#F1F1F1;color:var(--p-verde);font-size:14px;font-weight:400;line-height:1.1;text-align:left;text-transform:uppercase;white-space:normal}
.p-cookies-menu button[role="tab"][aria-selected="true"]{background:#fff;color:#000}
.p-cookies-der{display:flex;flex-direction:column;min-width:0;padding:40px 30px 37px;border-radius:0 10px 10px 0;background:#F1F1F1}
.p-cookies-panel h3{margin:0 0 25px;font-family:Figtree,system-ui,sans-serif;font-size:28px;font-weight:400;line-height:1.2;letter-spacing:normal;color:#000}
.p-cookies-panel p{margin:0 0 18px;font-size:16px;line-height:1.4;color:#000}
.p-cookies-panel ul{margin:0 0 18px;padding-left:20px}
.p-cookies-panel li{margin-bottom:12px;font-size:15px;color:#000}
.p-cookies-panel a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.p-cookies-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:auto;padding-top:30px;border-top:1px solid #D9D9D9}
.p-cookies-pie .p-btn{min-height:42px;padding:0 30px;font-size:14px;font-weight:400}
/* interruptor como el de la web: rojo y «Desactivadas» en rojo; verde y «Activadas» en verde */
.p-interruptor{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;font-weight:700;cursor:pointer}
.p-interruptor input{appearance:none;position:relative;flex:none;width:50px;height:30px;margin:0;border-radius:34px;background:#FF0000;cursor:pointer;transition:background .2s ease}
.p-interruptor input::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.p-interruptor input:checked{background:var(--p-verde)}
.p-interruptor input:checked::after{transform:translateX(20px)}
.p-interruptor input:disabled{background:#B0B0B0;cursor:not-allowed}
.p-interruptor input:focus-visible{outline:3px solid var(--p-verde);outline-offset:2px}
.p-interruptor span{color:#C00000}
.p-interruptor input:checked + span{color:var(--p-verde)}
@media (max-width:767.98px){
  /* en el móvil, una columna: logo y categorías arriba, el texto debajo y los botones al final */
  #p-cookies-ajustes .modal-content{grid-template-columns:1fr;min-height:0}
  .p-cookies-cerrar{top:10px;right:10px;width:40px;height:40px}
  .p-cookies-cerrar svg{width:20px;height:20px}
  .p-cookies-izq{padding:20px 20px 10px;border-radius:10px 10px 0 0;box-shadow:none}
  .p-cookies-logo{max-width:110px;margin-bottom:15px}
  .p-cookies-menu button[role="tab"]{min-height:40px;padding:10px 14px}
  .p-cookies-der{padding:20px;border-radius:0 0 10px 10px}
  .p-cookies-panel h3{margin-bottom:12px;font-size:22px}
  .p-cookies-panel p{font-size:15px}
  .p-cookies-pie{padding-top:20px}
  .p-cookies-pie .p-btn{flex:1;padding:0 16px}
  .p-cookies .container{justify-content:flex-start}
  .p-cookies-botones{width:100%}
  .p-cookies-botones .p-btn{flex:1;padding:0 10px}
}

/* ============ 9. CARGANDO (el botón de WhatsApp se quitó el 11/11/2026: la web no lo lleva) ============ */
#dialog_carga.cargando{position:fixed;inset:0;z-index:2000000;background:rgba(255,255,255,.6)}
#dialog_carga.cargando::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:4px solid var(--p-verde-claro);border-top-color:var(--p-verde);border-radius:50%;animation:p-gira .8s linear infinite}
@keyframes p-gira{to{transform:rotate(360deg)}}

/* ============ 10. PIE: páginas legales (las de la web) y «Configurar cookies» ============ */
.p-legal-tienda a,.p-legal-tienda button{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.p-legal-tienda a:hover,.p-legal-tienda button:hover{color:var(--p-verde)}
.p-pie button.p-ver,.p-pie a[onclick]{cursor:pointer}

/* ============ 11. MÓVIL ============ */
@media (max-width:767.98px){
  /* en la tienda el buscador ocupa su propia fila (logo, cuenta y cesta arriba) */
  .p-cab .p-busca{order:10;flex:1 1 100%;margin-top:2px}
  .p-cab .p-iconos{margin-left:auto}
  .p-tienda-cab h1{font-size:20px}
  .p-subfamilias .p-temas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .p-subfamilias .p-temas::-webkit-scrollbar{display:none}
  .p-subfamilias .p-temas a{flex:none;white-space:nowrap}
  .modal-footer{justify-content:stretch}
  .modal-footer .p-btn{flex:1}
}

/* «Ver más» de los listados largos (js/peig-tienda.js) */
.p-mas{display:flex;justify-content:center;margin-top:24px}
/* botones «btn d-block» de los trozos antiguos (acceder, registrarse): el texto centrado en el botón */
.btn.d-block:not([class*="btn-"]){display:flex!important}
/* la cabecera de la tienda lleva un icono más que la web (la cesta): entre 1200 y 1300 px se aprieta un poco el menú para que quepa */
@media (min-width:1200px) and (max-width:1299.98px){
  .p-cab .p-nav-item>a,.p-cab .p-nav-item>button{padding:0 7px}
  .p-cab .p-icono{min-width:46px}
  .p-cab .container{gap:12px}
}

/* ============ 14. LISTADO (encargo de PEIG del 6/11/2026, punto 3; App_Code/PeigListado.cs) ============
   Columna de filtros (aside.p-filtros de peig.css) con el árbol de familias, Marca y Disponibilidad; barra con
   «Ordenar por»; páginas (.p-paginas). En el móvil, «Filtrar y ordenar» abre el panel desde abajo. */
@media (min-width:992px){.p-listado .p-filtros{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}}
.p-filtros .p-filtros-cab{gap:8px;min-height:48px}
.p-filtros .p-filtros-cab h2{margin-right:auto}
.p-filtros-borra{color:var(--p-verde);font-weight:600;font-size:14px;text-decoration:none}
.p-filtros-borra:hover{text-decoration:underline}
.p-filtros .p-filtros-cab .p-filtros-cierra{display:none}
.p-filtro .p-check small,.p-arbol small{margin-left:auto;padding-left:8px;font-size:13px;font-weight:500;color:var(--p-gris)}
.p-check--radio input{border-radius:50%}
.p-filtros-n{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 6px;border-radius:999px;background:var(--p-verde);color:#fff;font-size:13px;line-height:1}
.p-arbol ul{list-style:none;margin:0;padding:0}
.p-arbol ul ul{margin:2px 0 4px 12px;padding-left:8px;border-left:2px solid var(--p-linea)}
.p-rama-cab{display:flex;align-items:center;gap:2px}
.p-arbol a{flex:1;display:flex;align-items:center;min-height:38px;padding:4px 8px;border-radius:10px;color:var(--p-texto);font-size:15px;line-height:1.25;text-decoration:none}
.p-arbol a:hover{background:var(--p-hueso)}
.p-arbol a[aria-current]{background:var(--p-verde-suave);color:var(--p-verde);font-weight:700}
.p-arbol a[aria-current] small{color:var(--p-verde)}
.p-rama-abre{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:none;color:var(--p-gris);cursor:pointer}
.p-rama-abre::before{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.p-rama-abre[aria-expanded="false"]::before{margin-top:0;margin-left:-4px;transform:rotate(-45deg)}
.p-rama-abre:hover{background:var(--p-hueso);color:var(--p-texto)}
.p-filtro--orden{display:none}
.p-filtros-pie{padding:14px 0 6px}
.p-filtros form.p-con-js .p-filtros-pie{display:none}
.p-barra small{font-weight:500;color:var(--p-gris)}
.p-listado .p-paginas{margin-top:28px}
.p-llamadas .p-llamada{height:100%;grid-template-columns:1fr;align-content:center}
.p-vistos .p-cabsec h2{font-size:clamp(24px,2.6vw,32px)}
@media (max-width:991.98px){
  .p-barra .p-orden{display:none}
  .p-filtro--orden{display:block}
  .p-filtros.abierto{position:fixed;left:0;right:0;bottom:0;z-index:1060;max-height:85vh;margin:0;padding:0 20px;overflow-y:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0;box-shadow:0 0 0 100vmax rgba(24,32,26,.45)}
  .p-filtros .p-filtros-cab{position:sticky;top:0;z-index:1;padding-top:8px;background:#fff}
  .p-filtros .p-filtros-cab .p-filtros-cierra{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;padding:0;color:var(--p-texto);font-size:30px;font-weight:400;line-height:1}
  .p-filtros form.p-con-js .p-filtros-pie{display:block;position:sticky;bottom:0;padding:12px 0 16px;border-top:1px solid var(--p-linea);background:#fff}
  body.p-sin-scroll{overflow:hidden}
}

/* ============ 15. FICHA (encargo de PEIG del 6/11/2026, punto 4) ============ */
.p-compra .p-ref a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.p-compra .p-ref a:hover{color:var(--p-verde)}
.p-compra .p-resumen a{color:var(--p-verde);font-weight:600;white-space:nowrap}
/* variantes de un artículo agrupado, como las tallas */
.p-tallas{padding:14px 16px}
.p-tallas-lista{display:flex;flex-wrap:wrap;gap:8px}
.p-talla{position:relative;margin:0;cursor:pointer}
.p-talla input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.p-talla span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:2px solid var(--p-linea);border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--p-texto);transition:border-color .15s,background .15s}
.p-talla:hover span{border-color:var(--p-texto)}
.p-talla input:checked+span{border-color:var(--p-verde);background:var(--p-verde-suave);color:var(--p-verde)}
.p-talla input:focus-visible+span{outline:3px solid var(--p-verde);outline-offset:2px}
.p-descripcion{max-width:820px}

/* ============ 16. ARAVIANA, la asistente de la web (10/11/2026) ============
   Su botón ocupa la esquina de abajo a la derecha, como en peigganadera.com. */
/* con el aviso de cookies abajo, Araviana sube lo que mide el aviso (--p-cookies-alto, lo pone peig-cookies.js) */
body.p-cookies-visible .ara{bottom:calc(var(--p-cookies-alto,64px) + 12px)}
body.p-cookies-visible .ara-pestana{bottom:calc(var(--p-cookies-alto,64px) + 20px)}

/* ============ 17. ADMINISTRADOR: lápiz de familias y aviso de guardado (10/11/2026) ============ */
.p-rama-editar{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:2px;padding:0;border:0;border-radius:50%;background:var(--p-error);color:#fff;font-size:13px;cursor:pointer}
.p-rama-editar i{color:#fff}
.p-admin-familia{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.p-admin-familia .edicion{flex:none;width:34px;height:34px;font-size:15px}
.p-aviso-guardado{position:fixed;top:16px;left:50%;z-index:2000;transform:translateX(-50%);width:max-content;max-width:min(680px,calc(100vw - 32px));padding:12px 18px;border-radius:12px;background:var(--p-verde);color:#fff;font-weight:600;line-height:1.4;box-shadow:var(--p-sombra);cursor:pointer}
.p-aviso-guardado::before{content:"\2713  "}
.p-aviso-guardado--error{background:var(--p-error)}
.p-aviso-guardado--error::before{content:"!  "}
.p-aviso-guardado--info{background:var(--p-texto)}
.p-aviso-guardado--info::before{content:"i  "}
.p-aviso-guardado[hidden]{display:none}
/* barra del administrador: «Actualizar XML», «Enviar XML» y el estado de sitemap.xml (App_Code/PeigSitemap.cs) */
.p-admin-xml{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.p-admin-xml button[disabled]{opacity:.7;cursor:wait}
.p-admin-xml a{color:#fff;font-size:12px;opacity:.85;text-decoration:underline;text-underline-offset:2px}
.p-admin-xml a:hover{opacity:1;color:#fff}
/* fila de familias con sesión de administrador: «Editar familias» al principio y un lápiz junto a cada familia */
.p-tienda-ani.edicion_menu{margin-left:0;flex:0 0 auto}
.p-tienda-ani-caja{display:inline-flex;align-items:center;flex:0 0 auto;gap:2px}
.p-tienda-ani-editar{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--p-error);color:#fff;font-size:12px;cursor:pointer}
.p-tienda-ani-editar i{color:#fff}