/* =====================================================================
   Eagle Market - Estilos (estilo comercial)
   ===================================================================== */
:root{
  --navy:#10264a; --navy-2:#1b3a6b; --amber:#ffb400; --amber-2:#f2a100;
  --bg:#eef1f5; --card:#fff; --ink:#1b2333; --muted:#6b7385; --line:#e3e7ee;
  --green:#00a650; --red:#d93a2f; --blue:#2463eb; --warn:#b85c00;
  --radius:10px; --shadow:0 1px 2px rgba(16,38,74,.06),0 2px 8px rgba(16,38,74,.06);
  --shadow-h:0 6px 22px rgba(16,38,74,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
main.wrap{padding-top:22px;padding-bottom:48px;min-height:65vh}
h1{font-size:1.55rem;margin:.1em 0 .7em;line-height:1.25} h2{font-size:1.2rem;margin:1.3em 0 .7em}
.muted{color:var(--muted)} .right{text-align:right} .inline{display:inline} .center{text-align:center}
.ico{vertical-align:middle;flex-shrink:0}
.sr{position:absolute;left:-9999px}

/* ---------------- Encabezado ---------------- */
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.top a{color:#fff}
.top-row{display:flex;gap:20px;align-items:center;padding-top:12px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.3rem;letter-spacing:-.3px;white-space:nowrap}
.logo .ico{color:var(--amber)} .logo b{color:var(--amber);font-weight:800}
.logo:hover{text-decoration:none}
.search{flex:1;display:flex;max-width:640px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.search input{flex:1;border:0;padding:11px 14px;font-size:15px;outline:none;min-width:0}
.search button{border-radius:0;background:var(--amber);color:var(--navy);padding:0 18px}
.search button:hover{background:var(--amber-2)}
.acciones{display:flex;gap:18px;align-items:center;margin-left:auto;font-size:14px}
.acciones a,.acciones button.link{display:flex;align-items:center;gap:6px;color:#fff;white-space:nowrap}
.acciones button.link{color:#fff}
.cart{position:relative}
.cart b{position:absolute;top:-8px;left:14px;background:var(--amber);color:var(--navy);border-radius:99px;font-size:11px;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 4px}
.subnav{background:var(--navy-2);font-size:14px}
.subnav .wrap{display:flex;gap:22px;align-items:center;height:40px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.subnav a{color:#dfe7f5;display:flex;gap:6px;align-items:center}
.subnav a:hover{color:#fff;text-decoration:none}
.subnav .destino{color:#fff;opacity:.9;border-right:1px solid rgba(255,255,255,.2);padding-right:18px}

/* ---------------- Botones y formularios ---------------- */
button,.btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button:hover,.btn:hover{filter:brightness(.94);text-decoration:none}
.btn.amber,button.amber{background:var(--amber);color:var(--navy)}
.btn.sec,button.sec{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.block,button.block{width:100%;padding:13px}
.btn.lg{padding:13px 26px;font-size:16px}
button.link{background:none;padding:0;color:var(--blue);font-weight:400}
form.card label,.campo label{display:block;margin:12px 0 5px;font-weight:600;font-size:13.5px}
input,select,textarea{width:100%;border:1px solid #cfd5df;border-radius:8px;padding:10px 12px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #b9cdfa;border-color:var(--blue)}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:110px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 12px}
.narrow{max-width:460px;margin:0 auto}
.medio{max-width:720px;margin:0 auto}
.ayuda{font-size:13px;color:var(--muted);margin:4px 0 0}

/* ---------------- Tarjetas ---------------- */
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h2:first-child,.card h3:first-child,.card>h2:first-of-type,.card>h3:first-of-type{margin-top:0}
td.cop,th.cop{white-space:nowrap}
.seccion-titulo{display:flex;justify-content:space-between;align-items:baseline;margin:30px 0 14px}
.seccion-titulo h2{margin:0;font-size:1.3rem}

/* ---------------- Portada ---------------- */
.hero{border-radius:14px;overflow:hidden;background:linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 55%,#2b5aa6 100%);color:#fff;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;min-height:250px;position:relative}
.hero .txt{padding:36px 40px;position:relative;z-index:1}
.hero h1{font-size:2.1rem;margin:0 0 10px;line-height:1.15}
.hero h1 span{color:var(--amber)}
.hero p{font-size:1.05rem;opacity:.9;margin:0 0 20px;max-width:460px}
.hero .arte{height:100%;position:relative}
.hero .arte .c1,.hero .arte .c2,.hero .arte .c3{position:absolute;border-radius:50%}
.hero .arte .c1{width:260px;height:260px;background:var(--amber);opacity:.95;right:40px;top:-40px}
.hero .arte .c2{width:170px;height:170px;background:#fff;opacity:.12;right:230px;bottom:-50px}
.hero .arte .c3{width:90px;height:90px;border:10px solid rgba(255,255,255,.25);right:24px;bottom:22px}
.hero .arte .ico{position:absolute;right:105px;top:40px;color:var(--navy);width:130px;height:130px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:22px}
.cat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 10px;text-align:center;color:var(--ink);transition:.15s}
.cat:hover{box-shadow:var(--shadow-h);text-decoration:none;transform:translateY(-2px)}
.cat .circ{width:56px;height:56px;border-radius:50%;background:#eaf0fb;color:var(--navy-2);display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.cat span{font-size:14px;font-weight:600}
.confianza{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.confianza div{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;gap:12px;align-items:center;font-size:14px}
.confianza .ico{color:var(--blue)}
.confianza b{display:block;font-size:14.5px}
.banda-vender{margin-top:34px;background:var(--amber);border-radius:14px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--navy)}
.banda-vender h2{margin:0 0 4px}

/* ---------------- Productos ---------------- */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px}
.product{background:#fff;border-radius:var(--radius);overflow:hidden;color:var(--ink);display:flex;flex-direction:column;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
.product:hover{box-shadow:var(--shadow-h);text-decoration:none;transform:translateY(-2px)}
.product .foto{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #f0f2f6}
.product img{width:100%;height:100%;object-fit:contain}
.product .info{padding:12px 14px 14px}
.product .precio{font-size:1.3rem;font-weight:600;letter-spacing:-.3px}
.product .nombre{font-size:14px;line-height:1.35;color:#3a4256;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;margin-top:2px}
.product .envio{color:var(--green);font-size:13px;font-weight:600;margin-top:6px;display:flex;gap:4px;align-items:center}
.product .tienda{font-size:12.5px;color:var(--muted);margin-top:4px}
.chip{display:inline-block;font-size:11.5px;font-weight:600;border-radius:4px;padding:1px 6px;background:#eef2f9;color:var(--navy-2)}

/* Listado con filtros */
.listado{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.filtros{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.filtros h3{font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.filtros a{display:block;padding:5px 0;color:var(--ink);font-size:14px}
.filtros a.act{font-weight:700;color:var(--blue)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.breadcrumb a{color:var(--muted)}

/* Detalle de producto */
.detalle{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.detalle .principal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:76px 1fr;gap:16px}
.galeria-mini{display:flex;flex-direction:column;gap:8px}
.galeria-mini img{width:72px;height:72px;object-fit:contain;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#fff}
.galeria-mini img:hover,.galeria-mini img.act{border-color:var(--blue)}
.galeria-grande img{width:100%;aspect-ratio:1/1;object-fit:contain}
.descripcion{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}
.compra{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:sticky;top:120px}
.compra .estado{font-size:13px;color:var(--muted)}
.compra h1{font-size:1.35rem;margin:6px 0 10px}
.precio-grande{font-size:2.2rem;font-weight:400;letter-spacing:-.5px;margin:4px 0 14px}
.cotizador{border:1px solid var(--line);border-radius:8px;padding:12px;margin:14px 0;font-size:14px}
.cotizador .res{margin-top:8px;font-weight:600}
.cotizador .res.ok{color:var(--green)}
.vendedor-box{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.vendedor-box .ico{color:var(--navy-2)}
.garantias{list-style:none;padding:0;margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.garantias li{display:flex;gap:8px;align-items:center;margin:6px 0}

/* ---------------- Tablas ---------------- */
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;background:#fafbfd}
.tabla{border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow);background:#fff}
td input,td select{padding:7px 9px}

/* ---------------- Carrito / checkout ---------------- */
.resumen{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.resumen .lateral{position:sticky;top:120px}
.grupo{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.grupo-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);font-size:14px;background:#fafbfd}
.grupo-head b{display:flex;gap:8px;align-items:center}
.item{display:grid;grid-template-columns:72px 1fr 110px 120px;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid #f1f3f7}
.item img{width:72px;height:72px;object-fit:contain;border-radius:6px;border:1px solid #f0f2f6}
.grupo-foot{display:flex;justify-content:space-between;padding:12px 18px;font-size:14px}
.envio-gratis{color:var(--green);font-weight:600}
.fila-total{display:flex;justify-content:space-between;margin:7px 0;gap:10px}
.fila-total span:last-child{white-space:nowrap}
.fila-total.total{font-size:1.25rem;font-weight:700;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.destino-box{background:#f5f8fe;border:1px dashed #b9cdfa;border-radius:8px;padding:12px;margin-bottom:14px;font-size:14px}

/* ---------------- Estados y alertas ---------------- */
.badge{display:inline-block;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.ok{background:#e3f6ec;color:#0a7a40} .badge.warn{background:#fff1dc;color:var(--warn)}
.badge.bad{background:#fde7e5;color:var(--red)} .badge.info{background:#e5eeff;color:var(--blue)}
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;border-left:4px solid;background:#fff;box-shadow:var(--shadow)}
.alert.ok{border-color:var(--green)} .alert.error{border-color:var(--red)} .alert.info{border-color:var(--blue)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .n{font-size:1.6rem;font-weight:700}
.panel-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.panel-nav a{background:#fff;border-radius:8px;padding:9px 14px;box-shadow:var(--shadow);color:var(--ink);display:flex;gap:8px;align-items:center;font-size:14px}
.panel-nav a.act{background:var(--navy);color:#fff}
.panel-nav a:hover{text-decoration:none}

/* ---------------- Pie ---------------- */
.foot{background:var(--navy);color:#c7d2e5;font-size:14px;margin-top:20px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding-top:34px;padding-bottom:24px}
.foot h4{color:#fff;margin:0 0 10px;font-size:14px}
.foot a{color:#c7d2e5;display:block;margin:5px 0}
.foot .legal{border-top:1px solid rgba(255,255,255,.12);padding:14px 16px;font-size:12.5px;text-align:center}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .detalle,.resumen,.listado{grid-template-columns:1fr}
  .compra,.resumen .lateral{position:static}
  .confianza{grid-template-columns:1fr 1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
  .filtros{display:none}
}
@media (max-width:720px){
  .top-row{flex-wrap:wrap;gap:10px}
  .search{order:3;flex-basis:100%;max-width:none}
  .acciones .txt{display:none}
  .hero{grid-template-columns:1fr} .hero .arte{display:none} .hero .txt{padding:26px}
  .hero h1{font-size:1.6rem}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(2,1fr);gap:10px}
  .cats{grid-template-columns:repeat(3,1fr);gap:10px} .cat{padding:12px 6px} .cat .circ{width:46px;height:46px}
  .confianza{grid-template-columns:1fr}
  .detalle .principal{grid-template-columns:1fr}
  .galeria-mini{flex-direction:row;order:2}
  .item{grid-template-columns:60px 1fr;}
  .item .cant,.item .tot{grid-column:2}
  .banda-vender{flex-direction:column;align-items:flex-start}
}

/* ---------------- Mis direcciones ---------------- */
.direcciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.dir-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;border:2px solid transparent}
.dir-card.principal{border-color:#b9cdfa}
.dir-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dir-top b{display:flex;gap:6px;align-items:center;font-size:15.5px}
.dir-acciones{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.dir-opcion{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer;font-weight:400 !important}
.dir-opcion:has(input:checked){border-color:var(--blue);background:#f5f8fe}
.dir-opcion input{margin-top:4px}
.dir-opcion .muted{font-size:13.5px}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset[disabled]{display:none}

/* ---------------- Seguridad ---------------- */
.codigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
.codigos code{background:#f5f8fe;border:1px dashed #b9cdfa;border-radius:6px;padding:8px;text-align:center;font-size:15px;letter-spacing:1px}
.qr{width:210px;height:210px;margin:12px 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.qr svg{width:100%;height:100%}
ol.pasos li{margin-bottom:12px}
code{font-family:Consolas,"Courier New",monospace}
details summary{font-size:14px}