/* ============================================================================
   LX-PRODUCT — Panel de seleccion de producto + modal de formato/tamano.
   Diseno de Rafa (mockup). Prefijo .lxp- A PROPOSITO (clase LIBRE en el repo;
   #lxp id es de partners, no colisiona). Fichero standalone como lx-auth.css /
   lx-site.css: SIN partner SCSS. Vars propias --lxp-* scopeadas a los dos
   contenedores raiz (.lxp-wrap y .lxp-velo) para NO tocar el resto de la app.
   ========================================================================== */
.lxp-wrap,.lxp-velo{
  --lxp-noche:#0D1031; --lxp-noche-2:#1B1F46; --lxp-magenta:#AE419C;
  --lxp-claro:#6ECAE4; --lxp-azul:#1E96D2; --lxp-fondo:#F4F2EF;
  --lxp-txt-2:#4a4959; --lxp-txt-3:#6b6a79; --lxp-borde:#DAD8E0; --lxp-borde-2:#E3E2E8;
}

.lxp-wrap{max-width:1240px;margin:0 auto;padding:clamp(8px,1.6vw,20px) 0 clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:clamp(30px,4vw,52px);font-family:Montserrat,sans-serif;color:var(--lxp-noche);text-align:left}
.lxp-wrap *{box-sizing:border-box}

/* Cabecera de seccion */
.lxp-hero{padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,40px);background:linear-gradient(90deg,var(--lxp-claro) 0%,var(--lxp-azul) 100%);border-radius:6px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:#fff}
/* line-height ajustado: el global (1.3-1.4) creaba cajas de linea altas que
   separaban visualmente las dos frases (el gap no compensa el leading). */
.lxp-hero small{font-size:clamp(13px,1.3vw,15px);font-weight:300;letter-spacing:-.005em;line-height:1.2;text-wrap:pretty}
.lxp-hero strong{font-size:clamp(24px,2.8vw,36px);font-weight:700;letter-spacing:-.01em;line-height:1.08}

/* Rejilla de productos */
.lxp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,24px)}
.lxp-card{padding:0;border:0;background:none;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:16px;font-family:inherit;-webkit-appearance:none;appearance:none}
.lxp-card > .lxp-marco{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;height:242px;padding:24px;border:1px solid var(--lxp-borde);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .16s,box-shadow .16s}
.lxp-card:hover > .lxp-marco{border-color:var(--lxp-magenta);box-shadow:0 10px 26px rgba(13,16,49,.10)}
.lxp-card:focus-visible{outline:2px solid var(--lxp-claro);outline-offset:4px;border-radius:10px}
.lxp-marco img{display:block;width:100%;height:100%;object-fit:contain}
.lxp-txt{display:flex;flex-direction:column;gap:5px}
.lxp-nombre{font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--lxp-magenta)}
.lxp-nota{font-size:14px;font-weight:400;color:var(--lxp-txt-3)}

/* Modal de formato */
.lxp-velo{display:none;position:fixed;inset:0;z-index:1060;background:rgba(13,16,49,.80);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:clamp(12px,3vw,32px);font-family:Montserrat,sans-serif;color:var(--lxp-noche);text-align:left}
.lxp-velo[data-abierto]{display:flex}
.lxp-velo *{box-sizing:border-box}
.lxp-modal{width:100%;max-width:1040px;max-height:92vh;border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.lxp-barra{flex:none;min-height:62px;padding:14px 20px;display:flex;align-items:center;justify-content:flex-end;gap:16px;background:var(--lxp-noche)}
.lxp-x{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:6px;background:none;color:#fff;cursor:pointer;transition:background .16s,border-color .16s;-webkit-appearance:none;appearance:none}
.lxp-x:hover{background:rgba(255,255,255,.10);border-color:var(--lxp-claro);color:var(--lxp-claro)}
.lxp-cuerpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);overflow:auto}
.lxp-izq,.lxp-der{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:22px}
.lxp-der{background:var(--lxp-fondo);border-left:1px solid var(--lxp-borde-2)}
@media (max-width:800px){.lxp-cuerpo{grid-template-columns:minmax(0,1fr)}.lxp-der{border-left:0;border-top:1px solid var(--lxp-borde-2)}}

.lxp-cab{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--lxp-noche)}
.lxp-cab svg{flex:none}
.lxp-cab span{font-size:21px;font-weight:700}
.lxp-intro{margin:0;max-width:46ch;font-size:14px;line-height:1.5;text-wrap:pretty;color:var(--lxp-txt-2)}

.lxp-formatos{margin-top:30px;display:grid;gap:14px}
.lxp-col{display:flex;flex-direction:column;gap:10px}
.lxp-hoja{position:relative;height:148px;display:grid;place-items:center;border:1px solid var(--lxp-borde-2);border-radius:6px;background:#f7f5f7;cursor:pointer;transition:border-color .16s;-webkit-appearance:none;appearance:none}
.lxp-hoja:hover{border-color:var(--lxp-magenta)}
.lxp-hoja[aria-pressed="true"]{border-color:var(--lxp-magenta);box-shadow:inset 0 0 0 1px var(--lxp-magenta)}
.lxp-hoja i{display:block;background:#a6a6ae}
.lxp-hoja u{position:absolute;background:var(--lxp-noche)}
.lxp-rotulo{font-size:10px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:#8a8996;text-align:center}
.lxp-forma{font-size:15px;font-weight:500;text-align:center}
.lxp-tallas{display:flex;flex-direction:column;gap:8px}
.lxp-talla{height:34px;border:1px solid var(--lxp-borde-2);border-radius:6px;background:#fff;color:var(--lxp-magenta);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .16s,border-color .16s,color .16s;-webkit-appearance:none;appearance:none}
.lxp-talla:hover{border-color:var(--lxp-magenta)}
.lxp-talla[aria-pressed="true"]{background:var(--lxp-magenta);border-color:var(--lxp-magenta);color:#fff}
.lxp-crear{height:50px;border:0;border-radius:6px;background:var(--lxp-noche);color:#fff;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .16s;-webkit-appearance:none;appearance:none}
.lxp-crear:hover{background:var(--lxp-noche-2)}
.lxp-crear[disabled]{opacity:.55;cursor:default}

/* min-height:28px + centrado = misma altura que .lxp-cab (icono 28px) de la
   columna izquierda, para que ambos bordes inferiores queden alineados y el
   bloque derecho suba a su sitio. Aplica a los 4 productos. */
.lxp-titulo{margin-top:0;min-height:28px;display:flex;align-items:center;padding-bottom:12px;border-bottom:2px solid var(--lxp-noche);font-size:21px;font-weight:700}
.lxp-bloque{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.lxp-lista-plana{display:flex;flex-direction:column;gap:4px}
.lxp-lista-plana span,.lxp-der li,.lxp-der p{font-size:14px;font-weight:400;color:var(--lxp-txt-2)}
.lxp-lista-plana span{line-height:1.7}
.lxp-der ul{margin:0;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.lxp-der li{line-height:1.6}
.lxp-der p{margin:0;line-height:1.75;text-wrap:pretty}
.lxp-etiqueta{font-size:14px;font-weight:500;color:var(--lxp-noche)}

/* ---- Boton "Mostrar partners" en la barra del area de cliente (#header-dashboard,
   FUERA del scope .lxp-wrap: usa colores literales, no --lxp-*) ---- */
/* Mismo estilo que el boton hamburguesa (.lxc-burger): fondo transparente, borde
   transparente en reposo + texto blanco; al activar (hover/pulsar) borde y texto
   cian; sin halo ni :focus persistente (no se queda coloreado tras el clic). */
.lxp-topbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border:1px solid transparent;border-radius:6px;background:none;color:#fff;font-family:'Montserrat',system-ui,sans-serif;font-size:13px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;outline:none;box-shadow:none;transition:color .16s,border-color .16s;-webkit-appearance:none;appearance:none;text-decoration:none}
.lxp-topbtn:focus{outline:none;box-shadow:none}
.lxp-topbtn:hover,.lxp-topbtn:active,.lxp-topbtn:focus-visible{background:none;border-color:#6ECAE4;color:#6ECAE4}
.lxp-topbtn[aria-pressed="true"]{background:#0D1031}

/* ---- Seccion "Imprime con un partner de LIBROOX" (toggle) ---- */
.lxp-partners[hidden]{display:none}
/* Sube TODO el bloque de partners acercandolo a los productos SIN tocar la
   separacion de los botones de seleccion (esa la da el gap del .lxp-wrap): el
   margin-top negativo cancela ese gap y deja ~16px reales entre grid y partners. */
.lxp-partners{display:flex;flex-direction:column;gap:16px;margin-top:calc(-19px - clamp(30px,4vw,52px))}
.lxp-partners-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--lxp-claro)}
.lxp-partners-head h4{margin:0;font-size:19px;font-weight:500;color:var(--lxp-noche)}
.lxp-partners-vertodos{font-size:14px;font-weight:500;color:var(--lxp-magenta);text-decoration:none;white-space:nowrap;cursor:default;user-select:none}
.lxp-partners-intro{margin:0;max-width:70ch;font-size:14px;font-weight:400;line-height:1.6;color:var(--lxp-txt-2)}
/* Fila: carrusel (crece) + tarjeta "Ser partner" fija a la derecha. */
.lxp-partners-row{display:flex;gap:16px;align-items:stretch}
.lxp-partners-carru{flex:1 1 auto;min-width:0;overflow:hidden}
.lxp-partners-track{display:flex;gap:16px;transition:transform .5s ease;will-change:transform}
.lxp-partners-track .lxp-partner-card{flex:0 0 200px}
@media (max-width:640px){.lxp-partners-row{flex-wrap:wrap}.lxp-partners-carru{flex-basis:100%}.lxp-partner-cta{flex-basis:100%}}
.lxp-partner-card{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px;padding:18px;border:1px solid var(--lxp-borde-2);border-radius:10px;background:#fff;text-align:left;transition:border-color .16s,box-shadow .16s}
.lxp-partner-card:hover{border-color:var(--lxp-magenta);box-shadow:0 8px 20px rgba(13,16,49,.08)}
.lxp-partner-card img{max-width:100%;max-height:56px;object-fit:contain;object-position:left center}
.lxp-partner-nombre{font-size:15px;font-weight:500;color:var(--lxp-noche)}
.lxp-partner-ciudad{font-size:13px;font-weight:400;color:var(--lxp-txt-3)}
.lxp-partner-cta{flex:0 0 220px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:118px;padding:18px;border:1px dashed var(--lxp-magenta);border-radius:10px;background:#fff;text-decoration:none;transition:background .16s}
.lxp-partner-cta:hover{background:#faf4f9}
.lxp-partner-cta strong{font-size:15px;font-weight:600;color:var(--lxp-magenta)}
.lxp-partner-cta span{font-size:13px;font-weight:400;color:var(--lxp-txt-3)}
.lxp-partners-vacio{font-size:14px;font-weight:400;color:var(--lxp-txt-3)}