/* =================================
   ESTILOS CSS - API BDE v5.0
   ================================= */

:root{
  --brand:#003366; --brand-2:#0a66c2; --ink:#0f172a; --muted:#475569; --bg:#f7f9fc; --card:#ffffff; --bc:#dce3ee; --shadow:0 10px 30px rgba(2,8,20,.06);
  --radius:14px; --w:1160px; --sidebarW:300px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--brand-2);text-decoration:none}

/* Header */
header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--bc)}
.top{max-width:var(--w);margin:auto;display:flex;align-items:center;gap:16px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,var(--brand),#2c7be5)}
.brand-title{font-weight:800;color:var(--brand)}
.spacer{flex:1}
.lang{display:flex;align-items:center;gap:6px}
.toggle{position:relative;width:54px;height:28px;background:#e7eef8;border-radius:999px;cursor:pointer;border:1px solid var(--bc)}
.knob{position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;box-shadow:var(--shadow);transition:all .25s}
body[data-mode="en"] .knob{left:28px}

/* Layout */
.wrap{max-width:var(--w);margin:auto;display:grid;grid-template-columns:var(--sidebarW) 1fr;gap:18px;padding:18px 16px}

/* Sidebar */
aside{position:sticky;top:72px;align-self:start;height:calc(100vh - 90px);background:#fff;border:1px solid var(--bc);border-radius:12px;padding:10px 10px;overflow:auto}
.side-title{font-size:12px;color:#5b6b82;font-weight:700;margin:6px 10px}
.menu{display:flex;flex-direction:column;gap:4px}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#23344b;border:1px solid transparent;font-weight:800}
.menu a:hover{background:#f1f6ff}
.menu a.active{background:#eaf2ff;border-color:#d5e6ff;color:#0b3b59}

/* Secciones */
.section{background:var(--card);border:1px solid var(--bc);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
/* h2 usa estilos de bundle.css (.second-title) */
.section h2{margin:0 0 8px 0}
.lead{color:var(--muted)}

/* Banner (estructura tipo Liferay) - USANDO ESTILOS DE BUNDLE.CSS */
.portlet-boundary{display:block}
.portlet{position:relative}
.portlet-content{background:#fff}
.pagetitle-highlight{position:relative;height:80px;border:1px solid var(--bc);border-radius:14px 14px 0 0;
  background:linear-gradient(135deg,#0e3a6d 0%, #0a66c2 100%);
}
/* .container-corp definido en bundle.css */
.row{display:flex;flex-wrap:wrap}
.pagetitle-col-title{display:flex;align-items:flex-end;height:80px}
/* .main-title usa font-family y tamaños de bundle.css */
.main-title{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.pagetitle-col-links{display:flex;align-items:flex-end;justify-content:flex-end;height:180px}
.listcorp{list-style:none;margin:0 0 14px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.listcorp a{color:#fff;font-weight:700;text-decoration:underline}

/* Sub-hero - SOLO ajustes de layout, texto usa bundle.css */
.sub-hero {background:transparent;border:none;display:flex;align-items:center;justify-content:center;padding:16px 16px;}
.sub-hero .inner {max-width:900px;margin:auto;padding:0;}
.sub-hero p {margin:0;text-align:center;} /* color y font-size de bundle.css */

/* Tabs horizontales */
.nav-tabs {
  display: flex;
  border-bottom: 2px solid var(--bc);
  margin: 12px 0;
  gap: 2px;
  list-style: none;
  padding-left: 0;
}
.nav-tabs .nav-item { margin-bottom: -2px; }
.nav-tabs .nav-link {
  display: block;
  padding: 10px 16px;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.nav-tabs .nav-link.active {
  background: #fff;
  border-color: var(--bc) var(--bc) #fff;
  color: var(--brand-2);
}
.tab-content {
  border: 2px solid var(--bc);
  border-radius: 0 0 12px 12px;
  padding: 16px;
  background: #fff;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Acordeón personalizado para maqueta-api-bde-v5.html */
.accordion {
  border: 1px solid var(--bc);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.acc-item {
  border-top: 1px solid var(--bc);
}
.acc-item:first-child {
  border-top: none;
}
.acc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: #f7fbff;
}
.acc-title {
  font-weight: 600;
  color: #0f172a;
}
.acc-body {
  display: none;
  padding: 14px;
  background: #fff;
}
.acc-item.open .acc-body {
  display: block;
}
.acc-item.open .acc-head {
  background: #eef6ff;
}

/* Inputs / botones */
.field{display:flex;flex-direction:column;gap:6px;margin:8px 0}
label{font-size:13px;color:#4b5a72}
input,select,textarea{padding:10px;border:1px solid var(--bc);border-radius:10px;background:#fff;color:#0f172a}
textarea{min-height:80px}
/* Estilo Jupyter Notebook */
.jupyter-cell {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 16px 0;
  overflow: hidden;
}

.jupyter-input {
  display: flex;
  align-items: flex-start;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.jupyter-prompt {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  border-right: 1px solid #e2e8f0;
  min-width: 80px;
  text-align: center;
}

.jupyter-code {
  flex: 1;
  background: #fff;
  color: #0f172a;
  padding: 12px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
}

.jupyter-output {
  display: flex;
  align-items: flex-start;
  background: #fff;
}

.jupyter-output-prompt {
  background: #fef2f2;
  color: #dc2626;
  font-weight: 600;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  border-right: 1px solid #e2e8f0;
  min-width: 80px;
  text-align: center;
}

.jupyter-output-content {
  flex: 1;
  background: #fafafa;
  padding: 12px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  border-top: 1px solid #f1f5f9;
}

/* Sintaxis highlighting para Python */
.py-keyword { color: #0ea5e9; font-weight: 600; }
.py-string { color: #059669; }
.py-comment { color: #64748b; font-style: italic; }
.py-function { color: #7c3aed; }
.py-number { color: #dc2626; }
.py-operator { color: #0f172a; }

/* Tablas en outputs */
.jupyter-output-content table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}

.jupyter-output-content th,
.jupyter-output-content td {
  border: 1px solid #e2e8f0;
  padding: 4px 8px;
  text-align: left;
}

.jupyter-output-content th {
  background: #f8fafc;
  font-weight: 600;
}

pre{background:#ffffff;color:#1f2937;border:1px solid #e2e8f0;border-radius:6px;overflow:auto;padding:12px}
pre code{background:none;padding:0;color:#1f2937;}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#9B814D; background:#fef8ed; padding:2px 6px; border-radius:4px;}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.primary{background:var(--brand-2);color:#fff}
.btn.ghost{background:#fff;border:1px solid var(--bc)}
.btn-small{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bc);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:var(--brand-2);transition:all 0.2s}
.btn-small:hover{background:var(--brand-2);color:#fff}
.pagination-controls{padding:15px;border-top:1px solid var(--bc);background:#f8fafc;border-radius:0 0 10px 10px}
.pagination-controls button:disabled{opacity:0.5;cursor:not-allowed}

/* Tabla de búsqueda - Estilo mejorado */
.search-container {
  background: #fff;
  border: 1px solid var(--bc);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.search-controls {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--bc);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media(min-width: 768px) {
  .search-controls {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: end;
  }
}

.search-meta {
  padding: 12px 16px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--bc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #64748b;
}

.results-table {
  overflow-x: auto;
}

.results-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.results-table th {
  background: #f8fafc;
  padding: 12px 8px;
  text-align: left;
  font-weight: 700;
  color: #334155;
  border-bottom: 2px solid var(--bc);
  white-space: nowrap;
  font-size: 16px;
}

.results-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.results-table th.sortable:hover {
  background: #f1f5f9;
}

.results-table th .arrow {
  margin-left: 4px;
  opacity: 0.5;
  font-size: 12px;
}

.results-table th.sorted .arrow {
  opacity: 1;
  color: var(--brand-2);
}

.results-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

.results-table tr:hover {
  background: #f8fafc;
}

.series-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--brand);
  font-weight: 600;
}

.series-name {
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
}

.freq-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.freq-daily { background: #dbeafe; color: #1e40af; }
.freq-monthly { background: #d1fae5; color: #065f46; }
.freq-quarterly { background: #fef3c7; color: #92400e; }
.freq-annual { background: #fed7d7; color: #c53030; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-vigente { background: #d1fae5; color: #065f46; }
.status-no-vigente { background: #fed7d7; color: #c53030; }

.action-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.btn-small {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--bc);
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-small:hover {
  background: #f8fafc;
  border-color: var(--brand-2);
}

.btn-small.primary {
  background: var(--brand-2);
  color: #fff;
  border-color: var(--brand-2);
}

.btn-small.primary:hover {
  background: #0952a5;
}

/* Estilos para botones de conceptos populares */
.btn-small.macro {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: white;
  border-color: #dc2626;
  font-weight: 700;
  position: relative;
}

.btn-small.macro:hover {
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  border-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.btn-small.macro:before {
  content: "📊";
  margin-right: 4px;
}

.hidden{display:none !important}

/* ======== Descargables (estilo tarjetas con icono) ======== */
.downloads{display:grid;grid-template-columns:1fr;gap:12px}
.dl{display:flex;align-items:center;gap:12px;border:1px solid var(--bc);border-radius:12px;background:#fff;padding:12px}
.dl svg{width:26px;height:26px;color:var(--brand-2)}
.dl .meta{color:#5b6b82;font-size:13px}

@media(max-width:980px){
  .wrap{grid-template-columns:1fr}
  aside{position:static;height:auto}
  .pagetitle-col-links{display:none}
}

/* === Header: buscador + auth === */
.header-actions{display:flex;align-items:center;gap:10px}
.searchbox{display:flex;align-items:center;background:#fff;border:1px solid var(--bc);border-radius:10px;overflow:hidden}
.searchbox input{border:none;outline:none;padding:8px 10px;width:220px}
.searchbox button{border:none;background:#b38a4a;color:#fff;padding:8px 10px;cursor:pointer;font-weight:700}
.btn.login{background:#2f6f8a;color:#fff}
.btn.register{background:#8fb8cc;color:#0b2a4a}
.api-status{font-size:12px;font-weight:600;background:#e6f7ed;color:#0b5f2d;padding:4px 10px;border:1px solid #b5e3c7;border-radius:20px;line-height:1}
.api-status.down{background:#fdecec;color:#8a1010;border-color:#f5b5b5}
#ayuda details{margin-bottom:6px;padding:6px 8px;border:1px solid var(--bc);border-radius:8px;background:#f8fafc}
#ayuda details summary{cursor:pointer;font-weight:600;outline:none}
#ayuda details[open]{background:#eef6ff}

/* === Modal Auth (login/registro) === */
#modalAuth{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.35)}
.modalAuth__box{max-width:840px;margin:40px auto;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden}
.modalAuth__head{display:flex;justify-content:space-between;align-items:center;background:#e7eef3;padding:10px 14px;border-bottom:1px solid var(--bc)}
.modalAuth__title{margin:0;font-weight:800;color:#1f2d3d}
.modalAuth__toggle{display:flex;gap:8px;align-items:center}
.modalAuth__toggle button{background:#b38a4a;color:#fff;border:none;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:700}
.modalAuth__body{padding:14px}
.modalAuth__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modalAuth__panel{border:1px solid var(--bc);border-radius:10px;padding:12px}
.modalAuth__footer{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--bc);padding:10px 0 0;margin-top:8px}
.captcha{border:1px solid var(--bc);border-radius:8px;padding:14px;display:flex;gap:10px;align-items:center}
.captcha .box{width:22px;height:22px;border:1px solid var(--bc);border-radius:4px;background:#fff}
.small-note{color:#4b5a72;font-size:12px}
.success{color:green;font-weight:700}
.error{color:#b30000;font-weight:700}

.enable-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.btn.xl{
  font-size:18px;
  padding:14px 22px;
}

/* === Layout para páginas sin sidebar (sec1 y sec2) === */
.wrap-single {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px;
}

.main-single {
  background: transparent;
}

/* === Tarjetas de recursos (sec2) === */
.resource-card {
  background: #fff;
  border: 1px solid var(--bc);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(2, 8, 20, 0.12);
}

.resource-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-bottom: 8px;
}

.resource-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

.resource-desc {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.resource-link {
  color: var(--brand-2);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.resource-link:hover {
  gap: 8px;
}

/* === Modal genérico === */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  overflow-y: auto;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-dialog {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--bc);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1e293b;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #e2e8f0;
  color: #334155;
}

.modal-body {
  padding: 20px;
}

/* === Info box === */
.info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin: 16px 0;
}

/* === Búsqueda de series === */
.search-series {
  background: #fff;
  border: 1px solid var(--bc);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}