/* Juárez Trade Insights - Centro de Economía y Competitividad (CEC), Desarrollo Económico de Ciudad Juárez AC.
   Desarrollado con asistencia de inteligencia artificial (Claude, de Anthropic), bajo la supervisión del CEC. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin-400.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-latin-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-latin-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin-700.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-latin-800.woff2') format('woff2');}
:root{
  --gris:#303030; --azul:#4e92ce; --verde:#59be9c; --naranja:#e6964b; --violeta:#7a52c7;
  --deficit:#b8672a; --blanco:#fff;
  --txt2:#5c6670; --txt3:#8a949c; --fondo:#f7f8f9; --inactivo:#eef1f3; --claro:#c9cfd4;
  --borde:rgba(48,48,48,.14);
  --expo:var(--azul); --impo:var(--naranja); --sup:var(--verde); --def:var(--deficit);
  --c-juarez:var(--azul); --c-chih:var(--verde); --c-nac:var(--gris);
  --font:'Ciutadella','Montserrat',system-ui,sans-serif;
}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{margin:0;background:var(--fondo);color:var(--gris);font-family:var(--font);font-size:15px}
header.band{position:fixed;top:0;left:0;right:0;height:118px;background:var(--gris);z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;gap:16px}
.band .l{display:flex;align-items:center;gap:14px}
.band .r{display:flex;justify-content:flex-end}
.band img.decj{height:60px;display:block} .band img.cec{height:42px;display:block}
.band .titulo{text-align:center;color:#fff}
.band h1{margin:0;font-size:34px;font-weight:800;white-space:nowrap;letter-spacing:-.2px}
.band .sub{font-size:16px;font-weight:500;color:var(--claro);white-space:nowrap;margin-top:4px}
#menuBtn{display:none;background:none;border:1px solid #5c6670;color:#fff;border-radius:8px;font-size:20px;
  width:40px;height:40px;cursor:pointer}
aside{position:fixed;top:118px;bottom:0;left:0;width:260px;background:#fff;border-right:1px solid var(--borde);
  overflow-y:auto;padding:18px 14px 30px;z-index:20;transition:transform .2s}
aside h4{font-size:11px;font-weight:800;color:var(--txt3);letter-spacing:1.2px;text-transform:uppercase;margin:18px 8px 8px}
aside h4:first-child{margin-top:4px}
aside button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:9px;
  font:500 14px var(--font);color:var(--txt2);cursor:pointer;margin-bottom:2px}
aside button:hover{background:var(--inactivo);color:var(--gris)}
aside button.on{background:var(--gris);color:#fff;font-weight:700}
aside button.pend{opacity:.55}
main{margin:118px 0 0 260px;padding:28px 32px 20px;max-width:1660px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{margin:0;font-size:26px;font-weight:800}
.sec-head .desc{color:var(--txt2);font-size:14px;margin-top:4px}
.filtros{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid var(--borde);
  border-radius:14px;padding:10px 16px}
.filtro label{display:block;font-size:11px;font-weight:800;color:var(--txt3);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px}
.filtro select{font:600 14px var(--font);color:var(--gris);border:1px solid var(--borde);border-radius:8px;padding:6px 10px;background:#fff}
.seg{display:inline-flex;background:var(--inactivo);border-radius:9px;padding:3px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font:600 13px var(--font);color:var(--txt2);cursor:pointer}
.seg button.on{background:var(--gris);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--borde);border-left:5px solid var(--gris);border-radius:14px;padding:14px 16px}
.kpi .lb{font-size:11px;font-weight:800;color:var(--txt3);letter-spacing:1.1px;text-transform:uppercase}
.kpi .v{font-size:clamp(17px,1.3vw,25px);font-weight:800;margin:6px 0 2px;line-height:1.15;white-space:nowrap}
.kpi .v.small{font-size:17px;line-height:1.25;white-space:normal}
.kpi .n{font-size:12.5px;color:var(--txt2)}
.kpi .t{font-size:12.5px;font-weight:700;margin-top:4px}
.up{color:#2f8f6f} .down{color:var(--deficit)}
.grid{display:grid;gap:16px;margin-bottom:16px}
.g2{grid-template-columns:1fr 1fr} .g21{grid-template-columns:2fr 1fr} .g1{grid-template-columns:1fr}
.card{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:14px 18px 16px;min-width:0}
.card h3{margin:0 0 2px;font-size:16px;font-weight:800}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-head .seg button{padding:5px 10px;font-size:12px}
.card .cs{font-size:12.5px;color:var(--txt2);margin-bottom:10px}
.card .src{font-size:11px;color:var(--txt3);margin-top:8px}
.cv{position:relative;width:100%}
.aviso{border-left:5px solid var(--naranja);background:#fff;border-radius:10px;padding:10px 14px;margin-bottom:14px;
  font-size:13.5px;color:var(--gris);border-top:1px solid var(--borde);border-right:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.aviso.error{border-left-color:#c0392b}
.aviso b{font-weight:800} .aviso ul{margin:4px 0 0;padding-left:18px} .aviso li{margin:2px 0}
.pendiente{background:#fff;border:1px dashed var(--txt3);border-radius:14px;padding:40px;text-align:center;color:var(--txt2)}
.pendiente b{display:block;font-size:18px;color:var(--gris);margin-bottom:8px}
.tabla{max-height:470px;overflow:auto;border-radius:10px;border:1px solid var(--borde)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{position:sticky;top:0;background:var(--gris);color:#fff;text-align:left;font-weight:700;padding:8px 10px;font-size:12px}
td{padding:7px 10px;border-bottom:1px solid #eef1f3}
tr:nth-child(even) td{background:#fafbfc} tr:hover td{background:rgba(78,146,206,.08)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.num{font-weight:700}
.barra{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.barra span.b{display:inline-block;height:6px;border-radius:3px;min-width:2px}
tr.resto td{font-style:italic;color:var(--txt2)}
footer{margin-left:260px;padding:18px 32px 16px;color:var(--txt3);font-size:13px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--borde)}
footer .firma{color:var(--txt2);font-weight:600}
footer details{max-width:1000px} footer summary{cursor:pointer;color:var(--txt2);font-weight:700}
footer details p{margin:6px 0;line-height:1.45}
.creditos{margin-left:260px;background:var(--gris);color:var(--claro);font-size:13px;padding:9px 32px;min-height:34px}
@media (max-width:1180px){
  #menuBtn{display:inline-block}
  aside{transform:translateX(-100%);box-shadow:4px 0 20px rgba(0,0,0,.15)} aside.open{transform:none}
  main,footer,.creditos{margin-left:0}
  .band h1{font-size:26px} .band .sub{font-size:13px}
}
@media (max-width:900px){ .g2,.g21{grid-template-columns:1fr} }
@media (max-width:768px){
  header.band{height:86px;padding:0 12px;grid-template-columns:auto 1fr auto}
  aside{top:86px} main{margin-top:86px;padding:16px} .band img.decj{height:34px} .band img.cec{height:24px}
  .band h1{font-size:18px} .band .sub{display:none}
  .kpis{grid-template-columns:1fr 1fr;gap:10px} .kpi{min-width:0;padding:12px} .kpi .v{font-size:18px;white-space:normal;overflow-wrap:anywhere}
  .band .titulo{min-width:0} .band h1{font-size:16px;white-space:normal;line-height:1.15}
  .band .l{gap:8px} .band img.decj{height:30px} .band img.cec{height:21px}
  .seg{flex-wrap:wrap} .filtros{padding:10px 12px;gap:12px}
  .card{padding:12px 12px 14px} .sec-head h2{font-size:22px}
  footer,.creditos{padding-left:16px;padding-right:16px}
}
.grid>*,.kpis>*{min-width:0}
.rk-j td{background:rgba(78,146,206,.12)!important;font-weight:700}
.ley{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;margin-top:8px;color:#5c6670}
.ley i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px}