:root{
  --bcb-ink:#08314C;
  --bcb-blue:#2F5D73;
  --bcb-steel:#2F5D73;
  --bcb-steel-dark:#24485A;
  --bcb-gold:#846D41;
  --bcb-band:#EAF3F7;
  --bcb-soft:#F6F8FB;
  --bcb-card:#FFFFFF;
  --bcb-border:rgba(8,49,76,.12);
  --bcb-border-strong:rgba(8,49,76,.18);
  --bcb-muted:rgba(8,49,76,.72);
  --bcb-muted-2:rgba(8,49,76,.56);
  --bcb-shadow:0 10px 22px rgba(11,79,135,.10);

  --bg:transparent;
  --panel:var(--bcb-card);
  --panel-2:var(--bcb-soft);
  --line:var(--bcb-border);
  --accent:var(--bcb-steel);
  --accent-strong:var(--bcb-ink);
  --chart:var(--bcb-blue);
  --text:var(--bcb-ink);
  --muted:var(--bcb-muted);
  --muted-2:var(--bcb-muted-2);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;max-width:100%;}
html{background:#fff;overflow-x:hidden;}
body{
  background:#fff;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:0;
  width:100%;
  display:block;
  padding:0;
  overflow-x:hidden;
}
button,select,input{font:inherit;}

.card{
  position:relative;
  width:100%;
  max-width:none;
  background:var(--panel);
  border:0;
  border-radius:0;
  padding:12px 14px 10px;
  box-shadow:none;
  overflow:visible;
}

.component-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
}
.component-heading{min-width:0;}
.component-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  color:var(--bcb-muted);
  font-size:9.8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.component-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--bcb-gold);
  box-shadow:0 0 0 3px rgba(132,109,65,.14);
  flex:0 0 auto;
}
.component-title{
  margin:0;
  color:var(--bcb-ink);
  font-size:13.5px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.series-field{margin-bottom:4px;}
.eyebrow{
  display:block;
  font-size:11px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--bcb-steel);
  margin:0 0 6px;
}

.var-select{
  appearance:none;
  -webkit-appearance:none;
  width:min(100%,680px);
  background:#fff;
  border:1px solid var(--bcb-border-strong);
  color:var(--bcb-ink);
  font-size:14px;
  font-weight:750;
  line-height:1.25;
  padding:10px 38px 10px 12px;
  border-radius:10px;
  margin:0;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%232F5D73' stroke-width='2' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.var-select:hover{border-color:rgba(47,93,115,.38);background-color:#FBFCFD;}
.var-select:focus{outline:2px solid rgba(47,93,115,.24);outline-offset:2px;border-color:var(--bcb-steel);}

.unidad{
  color:var(--bcb-muted);
  font-size:12px;
  line-height:1.4;
  margin:0;
}

.header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.download-menu-wrap{position:relative;flex:0 0 auto;}
.download-btn,
.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  background:rgba(47,93,115,.08);
  border:1px solid rgba(47,93,115,.18);
  color:var(--bcb-ink);
  font-size:11.5px;
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s;
}
.download-btn:hover,.nav-btn:hover{
  background:rgba(132,109,65,.10);
  border-color:rgba(132,109,65,.30);
}
.download-btn:active,.nav-btn:active{transform:scale(.98);}
.download-btn svg{width:14px;height:14px;flex:0 0 auto;}
.nav-btn .nav-icon{width:16px;height:16px;flex:0 0 auto;}

.unidad-actions-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:5px 0 10px;
}
.unidad-actions-row .unidad{margin:0;}
.nav-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.top-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:8px 11px;
  margin-bottom:7px;
  background:var(--bcb-soft);
  border:1px solid rgba(8,49,76,.09);
  border-radius:12px;
}
.readout{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0;}
.readout .valor{
  color:var(--bcb-ink);
  font-size:30px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.readout .fecha{
  font-size:12px;
  font-weight:650;
  color:var(--bcb-muted);
  border-left:1px solid var(--bcb-border-strong);
  padding-left:14px;
}

.tipo-toggle{
  display:flex;
  background:#fff;
  border:1px solid var(--bcb-border-strong);
  border-radius:999px;
  padding:3px;
  flex:0 0 auto;
}
.tipo-toggle button{
  border:0;
  background:transparent;
  color:var(--bcb-muted);
  font-size:11.5px;
  font-weight:850;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.tipo-toggle button.active{background:var(--bcb-ink);color:#fff;}
.tipo-toggle button:not(.active):hover{background:rgba(47,93,115,.08);color:var(--bcb-ink);}

.chart-wrap{
  position:relative;
  width:100%;
  min-width:0;
  padding:3px 2px 0;
}
svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;}
.grid-line{stroke:rgba(8,49,76,.11);stroke-width:1;}
.zero-line{stroke:rgba(8,49,76,.40);stroke-width:1.4;}
.zero-label{fill:var(--bcb-ink);font-weight:800;}
.axis-label{font-family:inherit;font-size:11px;fill:rgba(8,49,76,.78);}
.area-fill{fill:var(--chart);fill-opacity:.14;}
.line-path{fill:none;stroke:var(--chart);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.bar-rect{fill:var(--chart);opacity:.86;}
.cursor-dot{fill:var(--chart);stroke:#fff;stroke-width:2.5;}
.hover-line{stroke:rgba(8,49,76,.46);stroke-width:1;stroke-dasharray:3,4;opacity:0;}
.tooltip{
  position:absolute;
  pointer-events:none;
  background:var(--bcb-ink);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  padding:7px 10px;
  font-size:11.5px;
  font-weight:650;
  color:#fff;
  box-shadow:0 8px 20px rgba(8,49,76,.18);
  transform:translate(-50%,-115%);
  opacity:0;
  transition:opacity .1s;
  white-space:nowrap;
  z-index:8;
}
.tooltip b{color:#fff;font-weight:950;font-variant-numeric:tabular-nums;}

.leyenda{
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  margin-top:6px;
  padding:7px 9px;
  background:rgba(47,93,115,.045);
  border:1px solid rgba(47,93,115,.10);
  border-radius:10px;
  font-size:10.8px;
  line-height:1.35;
  color:var(--bcb-ink);
}
.leyenda-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.leyenda-color{display:inline-block;width:10px;height:10px;border-radius:999px;flex:0 0 auto;box-shadow:0 0 0 2px rgba(8,49,76,.06);}

.range-select{margin-top:9px;}
.range-select-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
  font-size:10.8px;
  color:var(--bcb-muted);
}
.range-select-header .rango-fechas{font-variant-numeric:tabular-nums;color:var(--bcb-ink);font-weight:700;}
.range-reset{
  background:transparent;
  border:0;
  color:var(--bcb-steel);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  padding:2px 4px;
  text-decoration:underline;
  text-underline-offset:2px;
  flex:0 0 auto;
}
.range-reset:disabled{color:var(--bcb-muted-2);text-decoration:none;cursor:default;}
.range-track-wrap{position:relative;height:18px;display:flex;align-items:center;touch-action:none;}
.range-track{position:relative;width:100%;height:5px;background:rgba(47,93,115,.10);border:1px solid rgba(47,93,115,.12);border-radius:999px;cursor:pointer;}
.range-fill{position:absolute;top:-1px;bottom:-1px;background:var(--bcb-steel);opacity:.44;border-radius:999px;pointer-events:none;}
.range-handle{
  position:absolute;
  top:50%;
  width:16px;height:16px;
  background:var(--bcb-steel);
  border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(8,49,76,.18);
  border-radius:50%;
  transform:translate(-50%,-50%);
  cursor:grab;
  touch-action:none;
}
.range-handle:active{cursor:grabbing;}
.range-handle:focus-visible{outline:2px solid rgba(47,93,115,.35);outline-offset:3px;}
.range-drag-tooltip{
  position:absolute;
  bottom:26px;
  transform:translateX(-50%);
  background:var(--bcb-ink);
  border-radius:7px;
  padding:4px 8px;
  font-size:11px;
  font-weight:750;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .1s;
  z-index:6;
}
.range-drag-tooltip.visible{opacity:1;}

.controls{display:flex;align-items:center;gap:8px;margin-top:8px;}
button.play{
  background:var(--bcb-ink);
  color:#fff;
  border:0;
  width:30px;height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  font-size:12px;
  box-shadow:0 5px 12px rgba(8,49,76,.15);
}
button.play:hover{background:var(--bcb-blue);}
button.play:active{transform:scale(.95);}
input[type=range]{flex:1 1 180px;min-width:0;accent-color:var(--bcb-steel);}
.scrub-label{font-size:11px;color:var(--bcb-muted);min-width:58px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}

.footnote{
  margin:7px 0 0;
  padding:7px 0 0;
  border-top:1px dashed rgba(8,49,76,.14);
  font-size:9.8px;
  line-height:1.4;
  color:var(--bcb-muted);
}

.download-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  display:none;
  flex-direction:column;
  gap:2px;
  min-width:160px;
  background:#fff;
  border:1px solid var(--bcb-border-strong);
  border-radius:10px;
  box-shadow:0 14px 28px rgba(8,49,76,.16);
  padding:6px;
  z-index:20;
}
.download-menu.open{display:flex;}
.download-menu button,
.download-menu a{
  display:block;
  background:transparent;
  border:0;
  color:var(--bcb-ink);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  text-decoration:none;
  padding:8px 10px;
  border-radius:7px;
  cursor:pointer;
}
.download-menu button:hover,
.download-menu a:hover{background:rgba(47,93,115,.08);color:var(--bcb-ink);text-decoration:none;}
.download-menu .menu-nota{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--bcb-muted);padding:5px 10px 3px;}

.fullscreen-btn{
  position:static;
  flex:0 0 auto;
  width:36px;height:36px;
  border-radius:999px;
  background:rgba(47,93,115,.08);
  border:1px solid rgba(47,93,115,.18);
  color:var(--bcb-steel);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.fullscreen-btn:hover{background:rgba(132,109,65,.10);border-color:rgba(132,109,65,.30);color:var(--bcb-ink);}
.fullscreen-btn:active{transform:scale(.96);}
.fullscreen-btn svg{width:15px;height:15px;}

.aviso-error{font-size:13px;color:var(--bcb-muted);text-align:center;margin:0;padding:40px 0;}

/* Fullscreen cross-browser: el elemento fullscreen es <html>, no la tarjeta. */
html:fullscreen,
html:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
  overflow:hidden !important;
}
html:fullscreen::backdrop,
html:-webkit-full-screen::backdrop{background:#fff !important;}
html:fullscreen body,
html:-webkit-full-screen body{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}
html:fullscreen .card,
html:-webkit-full-screen .card{
  box-sizing:border-box;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:18px clamp(18px,3vw,48px) 14px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:block !important;
}
html:fullscreen .chart-wrap,
html:-webkit-full-screen .chart-wrap{
  /* JS fija height/min-height/max-height al mismo valor en PX una sola vez. */
  position:relative;
  width:100%;
  overflow:hidden;
  padding:0;
  flex:none !important;
}
html:fullscreen #chart,
html:-webkit-full-screen #chart{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
}
html.bcb-fullscreen-activo,
body.bcb-fullscreen-activo{
  background:#fff !important;
  overflow:hidden !important;
}
.fullscreen-btn.fullscreen-error{
  outline:2px solid #b42318;
  outline-offset:2px;
}

button:focus-visible,select:focus-visible,input:focus-visible,.range-handle:focus-visible{
  outline:2px solid rgba(47,93,115,.35);
  outline-offset:2px;
}

@media (max-width:900px){
  .card{padding:11px 12px 9px;}
  .unidad-actions-row{align-items:flex-start;}
  .nav-buttons{margin-left:auto;}
}

@media (max-width:720px){
  .component-head{align-items:flex-start;}
  .header-actions{margin-left:auto;}
  .unidad-actions-row{display:block;margin-bottom:8px;}
  .unidad-actions-row .unidad{margin-bottom:6px;}
  .nav-buttons{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .nav-btn{min-width:0;}
  .top-row{align-items:center;gap:12px;}
  .readout{gap:10px 12px;}
  .readout .fecha{padding-left:12px;}
  .leyenda{gap:7px 12px;}
}

@media (max-width:560px){
  .card{padding:10px 10px 8px;}
  .component-head{gap:8px;margin-bottom:7px;}
  .component-kicker{font-size:9.5px;}
  .component-title{font-size:12.5px;}
  .download-btn{min-height:34px;font-size:10.5px;padding:7px 10px;}
  .download-menu{right:0;max-width:calc(100vw - 28px);}
  .eyebrow{font-size:10px;}
  .var-select{width:100%;font-size:13px;padding:9px 34px 9px 10px;border-radius:9px;}
  .unidad-actions-row{margin:4px 0 8px;}
  .unidad-actions-row .unidad{font-size:10.8px;line-height:1.35;}
  .nav-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-btn{width:100%;min-height:32px;padding:6px 8px;font-size:9.8px;}
  .top-row{display:flex;grid-template-columns:none;padding:7px 9px;margin-bottom:6px;border-radius:10px;}
  .readout{justify-content:space-between;width:100%;gap:8px;}
  .readout .valor{font-size:25px;}
  .readout .fecha{font-size:11px;padding-left:10px;}
  .tipo-toggle{width:100%;}
  .tipo-toggle button{flex:1 1 50%;padding:7px 10px;font-size:10.8px;}
  .axis-label{font-size:9.7px;}
  .leyenda{font-size:9.2px;line-height:1.2;margin-top:5px;padding:6px 8px;}
  .leyenda-item{white-space:normal;align-items:flex-start;}
  .range-select{margin-top:7px;}
  .range-select-header{align-items:flex-start;font-size:10px;gap:8px;}
  .range-select-header .rango-fechas{line-height:1.3;}
  .range-reset{font-size:10px;text-align:right;}
  .controls{gap:7px;margin-top:7px;}
  button.play{width:30px;height:30px;}
  .scrub-label{min-width:50px;font-size:10px;}
  .footnote{margin-top:6px;padding:6px 0 0;font-size:8.9px;line-height:1.25;}
  .fullscreen-btn{width:34px;height:34px;}
  .fullscreen-btn svg{width:13px;height:13px;}
}

@media (max-width:380px){
  .card{padding-left:10px;padding-right:10px;}
  .component-head{display:grid;grid-template-columns:minmax(0,1fr) auto;}
  .readout{display:block;}
  .readout .valor{display:block;margin-bottom:4px;}
  .readout .fecha{display:block;border-left:0;padding-left:0;}
}

/* Modo portada: prioriza que todos los controles queden visibles sin scroll interno */
@media (min-width:721px){
  .series-field{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;}
  .series-field .eyebrow{margin:0;}
  .unidad-actions-row{flex-wrap:nowrap;}
}

/* Integración visual específica con Portada Split v4. */
.card{padding:13px 18px 10px;}
.component-title{color:var(--bcb-blue);}
.component-kicker::before{background:var(--bcb-gold);box-shadow:0 0 0 3px rgba(170,137,65,.15);}
.download-btn:hover,.nav-btn:hover,.fullscreen-btn:hover{background:rgba(11,79,135,.11);border-color:rgba(11,79,135,.28);}
@media(max-width:640px){.card{padding:11px 11px 9px;}}