:root { --promo-azul:#0086d7;
     --promo-texto:#18213a; 
     --promo-borde:#dbe5ee; }
* { box-sizing:border-box; }

body { 
    margin:0; position:relative; 
    isolation:isolate; 
    background:#fff; 
    color:var(--promo-texto); 
    font-family:'Montserrat',sans-serif; }

body::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:clamp(240px, 19vw, 300px);
    background:
        linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
        url(img/fondo.jpg);
    background-position:center top, left top;
    background-size:100% 100%, clamp(260px, 40vw, 440px) auto;
    background-repeat:no-repeat, repeat;
    filter:blur(6px);
    pointer-events:none;
    z-index:-1;
}

button, input, select { font:inherit; }

button, a, input, select { -webkit-tap-highlight-color:transparent; }

.promociones a { 
     color:var(--promo-azul);
     text-decoration:none; }

a:hover { text-decoration:underline; }

button { cursor:pointer; }

:focus-visible { 
    outline:3px solid #222160; 
    outline-offset:4px; }

.promociones { 
    max-width:1240px; 
    width:calc(100% - 100px); 
    margin:0 auto; padding:20px 0 35px; 
    display:grid; grid-template-columns:minmax(0,2fr) minmax(230px,.9fr); 
    column-gap:34px; }
.promociones__encabezado { grid-column:1/-1; padding-left:48px; margin-bottom:14px; }
h1 { font-size:clamp(27px,3.3vw,40px); font-weight:800; letter-spacing:-1.2px; line-height:1.24; margin:0 0 10px; color:#111827; }
.promociones__encabezado p { color:#777b86; font-size:14px; line-height:1.6; margin:0; }
.busqueda { margin-left:48px; }
.busqueda__campo { display:flex; border:1px solid #cfd4dc; border-radius:6px; height:40px; background:#ffffffed; }
.busqueda__icono { padding:0 11px; display:grid; place-items:center; background:none; border:0; color:#939aa8; }
.busqueda__icono svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.busqueda input { border:0; outline:none; width:100%; min-width:0; background:none; color:var(--promo-texto); font-size:max(14px, 12px); padding:0 12px 0 0; }
.busqueda__campo:focus-within { outline:2px solid var(--promo-azul); outline-offset:2px; }
.busqueda input::placeholder { color:#8991a2; }
.descargar { display:flex; align-items:center; gap:12px; font-size:max(14px, 12px); }
.descargar svg { width:22px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; }
.herramientas { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:18px; margin:14px 9px 13px; }
.descuentos { display:flex; gap:12px; flex-wrap:wrap; }
.descuentos a { color:var(--promo-azul); border:1px solid #4eacf0; border-radius:5px; font-size:max(14px, 11px); font-weight:600; padding:7px 14px; white-space:nowrap; }
.descuentos a[aria-current] { color:white; background:linear-gradient(#078ed2,#007abc); border-color:var(--promo-azul); }
.orden { display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.control-etiqueta { color:#69748a; font-size:max(14px, 11px); white-space:nowrap; }
.orden select { padding:8px 28px 8px 10px; border:1px solid #d6dae0; border-radius:6px; font-size:max(14px, 11px); color:#45454b; background:white; max-width:230px; }
.orden #por-pagina { max-width:145px; }
.orden__aplicar { border:0; color:var(--promo-azul); background:transparent; padding:8px 2px; font-size:max(14px, 11px); }
.seleccion { grid-column:1/-1; min-width:0; }
.tabla-contenedor { border:1px solid var(--promo-borde); border-radius:7px; overflow:auto; }
table { border-collapse:collapse; width:100%; table-layout:auto; font-size:max(14px, 11px); }
thead { background:#f1f7fc; }
th { font-weight:600; font-size:max(14px, 11px); padding:10px 12px; text-align:left; border-bottom:1px solid var(--promo-borde); }
td { padding:12px; line-height:1.55; border-bottom:1px solid #e8eff5; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) { background:#f7fbff; }
tbody tr:hover, tbody tr.fila-seleccionada { background:#eef7fe; }
.col-seleccion { width:54px; text-align:center; }
.col-producto { width:38%; }
.col-precio { white-space:nowrap; }
.codigo { white-space:nowrap; font-size:max(14px, 12px); }
input[type=checkbox] { width:16px; height:16px; margin:0; accent-color:#0088cf; vertical-align:middle; cursor:pointer; }
.precio { color:#0086df; font-size:max(14px, 13px); font-weight:600; white-space:nowrap; }
.col-accion { text-align:center; width:125px; }
.boton-seleccionar { color:white; background:linear-gradient(#078ed2,#007abc); border:1px solid #2394ce; border-radius:4px; padding:7px 11px; font-size:max(14px, 10px); font-weight:600; }
.boton-seleccionar:hover { background:#006ca9; }
.paginacion { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:9px; padding:12px 0; font-size:max(14px, 12px); }
.paginacion a,.paginacion span { padding:6px 8px; }
.paginacion a[aria-current] { color:white; background:linear-gradient(#078ed2,#007abc); border-radius:4px; }
.paginacion [aria-disabled] { color:#a8adb7; }
.acciones-seleccion { display:flex; gap:12px; justify-content:space-between; align-items:center; padding-top:16px; flex-wrap:wrap; }
.boton-secundario,.boton-cotizacion { border:1px solid #4eacf0; border-radius:5px; padding:10px 13px; font-size:max(14px, 11px); color:#0076bc; background:white; }
.boton-cotizacion { background:#007fbe; color:white; font-weight:600; }
.boton-secundario:disabled { opacity:.5; cursor:default; }
.lista-pie { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; color:#69748a; font-size:max(14px, 11px); }
.nota { grid-column:1/-1; color:#6d788a; font-size:max(14px, 11px); line-height:1.7; margin:8px 0 0; }
.mensaje { grid-column:1/-1; margin:0 0 14px; padding:12px 15px; background:#eff8f4; border-left:3px solid #358664; font-size:max(14px, 12px); line-height:1.6; }
.mensaje--error { background:#fff1ee; border-color:#a63b35; }
.mensaje a { font-weight:600; margin-left:6px; }
.sin-resultados { text-align:center; padding:35px; }
.solo-lectores { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:1000px) {
    .promociones { width:calc(100% - 40px); column-gap:20px; }
    .promociones__encabezado { padding-left:0; }
    .busqueda { margin-left:0; }
    .herramientas { margin-left:0; margin-right:0; flex-wrap:wrap; }
    th,td { padding:10px 8px; }
}
@media(max-width:650px) {
    body::before { height:285px; }
    .promociones { width:calc(100% - 28px); padding-top:28px; grid-template-columns:1fr; }
    h1 { font-size:29px; letter-spacing:-.8px; }
    .promociones__encabezado p { font-size:max(14px, 13px); }
    .descargar { margin:17px 0 4px; }
    .descuentos { gap:6px; }
    .descuentos a { font-size:max(14px, 9px); padding:8px; }
    .orden { width:100%; justify-content:flex-start; }
    table { min-width:870px; }
    .acciones-seleccion { align-items:stretch; flex-direction:column; }
    .boton-cotizacion { text-align:center; }
    .paginacion { gap:0; font-size:max(14px, 11px); }
    .paginacion a,.paginacion span { padding:7px; }
}

/* Ajustes finos para controles y contenido en pantallas angostas */
.promociones, .seleccion, .tabla-contenedor { min-width: 0; max-width: 100%; }
.tabla-contenedor { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lista-pie { flex-wrap: wrap; gap: 10px 18px; }
.lista-pie p { min-width: 0; overflow-wrap: anywhere; }
.descargar { min-width: 0; max-width: 100%; }

@media (max-width: 650px) {
    .promociones { display: grid; grid-template-columns: minmax(0, 1fr); }
    .promociones__encabezado, .busqueda, .descargar, .herramientas, .seleccion, .paginacion, .lista-pie, .nota { min-width: 0; }
    .promociones__encabezado { padding: 0; }
    .promociones__encabezado h1 { font-size: clamp(25px, 7vw, 32px); line-height: 1.15; overflow-wrap: anywhere; }
    .descargar { align-items: flex-start; }
    .herramientas { align-items: stretch; }
    .descuentos { width: 100%; }
    .descuentos a { flex: 1 1 auto; text-align: center; white-space: normal; }
    .orden { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .orden select { width: 100%; max-width: none; min-width: 0; }
    .orden__aplicar { justify-self: start; }
    .lista-pie { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
    .promociones { width: calc(100% - 24px); }
    .descargar { font-size: max(14px, 11px); }
    .paginacion { flex-wrap: wrap; }
    .tabla-contenedor { border-radius: 5px; }
}

@media (min-width: 1800px) {
    .promociones { width: 92vw; max-width: none; padding: 2vw 0 3vw; column-gap: 2vw; grid-template-columns: minmax(0, 2fr) minmax(18vw, 0.9fr); }
    .promociones__encabezado { padding-left: 2.5vw; margin-bottom: 1vw; }
    .promociones__encabezado h1 { font-size: clamp(48px, 2.5vw, 112px); }
    .promociones__encabezado p { font-size: clamp(15px, 0.8vw, 36px); }
    .busqueda { margin-left: 2.5vw; }
    .busqueda__campo { height: clamp(40px, 2.4vw, 110px); }
    .busqueda input, .descargar { font-size: max(14px, clamp(12px, 0.68vw, 30px)); }
    .herramientas { gap: 1vw; margin: 1vw; }
    .descuentos a, .orden select, .orden__aplicar { font-size: max(14px, clamp(11px, 0.62vw, 28px)); padding: 0.5vw 0.8vw; }
    th { font-size: max(14px, clamp(11px, 0.62vw, 28px)); padding: 0.65vw; }
    td { font-size: max(14px, clamp(11px, 0.62vw, 28px)); padding: 0.7vw; }
    .codigo, .precio { font-size: max(14px, clamp(12px, 0.68vw, 30px)); }
    .boton-seleccionar { font-size: max(14px, clamp(10px, 0.58vw, 26px)); padding: 0.45vw 0.65vw; }
    .paginacion, .lista-pie, .nota { font-size: max(14px, clamp(12px, 0.68vw, 30px)); }
}