/* =========================
   PALETA IT INNOVA BUSINESS
   ========================= */
:root{
  /* Base */
  --bg:#F6F8FB;
  --card:#ffffff;
  --text:#0F1F2E;            /* tinta ligeramente más profunda que #101828 */
  --muted:#6B7C8F;

  /* Marca (IT Innova) */
  --primary:#004B87;         /* Azul corporativo */
  --primary-600:#003B69;     /* Azul más oscuro para hover/bordes intensos */
  --secondary:#2A94D6;       /* Azul claro */
  --accent:#59C3A6;          /* Verde acento */

  /* Escalas de marca para fondos/sombras ligeras (azules) */
  --brand-50:#F0F6FB;
  --brand-100:#E6F0FA;
  --brand-200:#D2E7F6;
  --brand-300:#B7DAF1;
  --brand-400:#8BC7EA;       /* cerca a secondary suavizado */
  --brand-500:#2A94D6;       /* secondary */
  --brand-600:#004B87;       /* primary */

  /* UI */
  --border:#E5E9F2;
  --stroke:#EEF1F6;
  --chip:#ffffff;
  --success:#12b76a;
  --danger:#ef4444;

  --shadow:0 10px 30px rgba(16,24,40,.06);
}

/* (Opcional) modo oscuro congruente */
:root.dark{
  --bg:#0F1220; --card:#15192c; --text:#E6E8EF; --muted:#9AA0B4;
  --primary:#2A94D6;          /* en dark elevamos el azul claro como primario */
  --primary-600:#1E74AA;
  --border:#232946; --chip:#1b2036;
  --shadow:0 10px 25px rgba(0,0,0,.35);
}

/* =========================
   BASE / RESET
   ========================= */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
}
h1,h2,h3{margin:.2rem 0}
.muted{color:var(--muted)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}

/* Botones y chip */
.btn{
  padding:.6rem .9rem; border-radius:10px;
  border:1px solid var(--border);
  background:#fff; color:var(--text); cursor:pointer;
  box-shadow:var(--shadow); transition:transform .05s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background:var(--primary); color:#fff; border-color:transparent;
}
.btn.primary:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.btn.ghost{ background:transparent; color:var(--text); }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:.35rem .6rem; border:1px solid var(--border);
  border-radius:999px; background:var(--chip);
}
.chip .spinner{width:12px;height:12px;border-width:2px}

/* =========================
   LAYOUT
   ========================= */
.layout{
  display:grid; grid-template-columns:260px 1fr;
  gap:16px; margin-top:16px;
}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
}

/* Sidebar sticky + active */
.sidebar{ position:sticky; top:84px; align-self:start; }
.sidebar h3{margin-top:4px}
.toc{
  list-style:none; padding:0; margin:8px 0 0 0;
  display:grid; gap:8px;
}
.toc li{
  padding:7px 10px; border-radius:10px;
  border:1px dashed transparent;
}
.toc li:hover{
  /* usar azul claro translúcido como highlight */
  background: rgba(42,148,214,.10);
  border-color: rgba(42,148,214,.35);
}
.toc li.active{
  background: rgba(0,75,135,.10);
  border-color: rgba(0,75,135,.35);
  color: var(--primary);
}
.toc a{ color:inherit; text-decoration:none; display:block }

/* =========================
   CARDS / CONTENIDO
   ========================= */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); padding:16px;
}
.content{ display:grid; gap:16px; }

.preview .title-xl{ font-size:28px; font-weight:800; }
.info-base .grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.info-base .grid div{
  background: rgba(42,148,214,.06);  /* tono soft azul claro */
  border:1px solid var(--border);
  border-radius:12px; padding:8px;
}
.info-base span{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }

/* =========================
   WIZARD
   ========================= */
.wizard-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.progress{
  flex:1; height:10px; border-radius:9px; overflow:hidden;
  background:#EEF0FB; border:1px solid var(--border);
}
:root.dark .progress{ background:#1b2036; }
#progress-bar{
  height:100%; width:0%;
  /* gradiente corporativo: azul claro → azul profundo */
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
}

.step label{ display:block }
.step textarea,.step input{
  width:100%; padding:.8rem; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(42,148,214,.06);  /* relleno soft en azul claro */
  color:var(--text);
}
.invalid{ outline:1.5px solid var(--danger) }

.wizard-actions{
  display:flex; gap:8px; justify-content:flex-end; margin-top:8px;
}

/* =========================
   SECCIONES
   ========================= */
.sections .sec{ padding:14px; border-top:1px solid var(--border); }
.sections .sec:first-child{ border-top:none; }
.sections h3{ margin:.2rem 0 6px 0 }
.sections p{ margin:.2rem 0 }

/* =========================
   SKELETONS / SPINNER
   ========================= */
.spinner{
  width:14px; height:14px; border-radius:50%;
  border:3px solid #d5e3ef;
  border-top-color: var(--secondary);
  animation:spin 1s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.skel{
  height:14px; border-radius:6px;
  background: linear-gradient(90deg,#f1f6fa,#e8f1f9,#f1f6fa);
  background-size:200% 100%; animation:shimmer 1.2s infinite;
}
:root.dark .skel{
  background:linear-gradient(90deg,#161a2f,#1b2036,#161a2f);
}
@keyframes shimmer{ 0%{background-position:0 0} 100%{background-position:200% 0} }

/* =========================
   DIALOG / LEAD MODAL
   ========================= */
dialog{ border:none; border-radius:14px; box-shadow:var(--shadow); padding:0; }
.modal-card{ padding:16px 16px 10px 16px; }
.modal-card label{ display:block; margin-bottom:8px; }
.modal-card input{
  width:100%; padding:.7rem; border:1px solid var(--border);
  border-radius:10px; background:#fbfdff;
}
.modal-card menu{
  display:flex; justify-content:flex-end; gap:8px; margin:8px 0 0 0; padding:0;
}

/* =========================
   TABLAS MARKDOWN / CHART WRAP
   ========================= */
.markdown table{ width:100%; border-collapse:collapse; margin:.5rem 0; }
.markdown th,.markdown td{ border:1px solid var(--border); padding:.5rem; text-align:left; }
.markdown thead{ background:#F4F7FB; }
.markdown tr:hover td{ background:#FAFCFF; }

.markdown thead th{
  background:#F1F8FD;              /* encabezado con azul super claro */
  color:#103957;                    /* tinta azulada para contraste */
  border-bottom:1px solid #E2ECF5;
}

.chart-wrap{
  position:relative; height:260px; margin:8px 0 20px;
  background:#fff; border:1px solid var(--stroke);
  border-radius:12px; padding:10px;
}

/* =========================
   TOAST
   ========================= */
.toast{
  position:fixed; right:16px; bottom:16px;
  padding:.7rem 1rem; background:var(--card);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
}

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width: 960px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; height: auto; }
  .info-base .grid{ grid-template-columns: 1fr; }
}
/* Contenedor de marca */
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}

/* *** LÍMITE DEL LOGO *** */
.brand-mark{
  display:block;
  height: 80px;          /* altura fija visible */
  max-height: 80px;      /* NO crecer más que esto */
  width: auto;           /* conserva proporción */
  object-fit: contain;   /* por si es muy ancho */
}

/* Ajustes responsivos del logo */
@media (max-width: 640px){
  .brand-mark{ height: 28px; max-height: 28px; }
  .brand-name{ font-size: 16px; }
  .brand-tagline{ font-size: 11px; }
}

/* (opcional) evita que cualquier img del header herede tamaños raros */
.topbar img{ max-width: 100%; height: auto; }