/* ================================================================
   Core-SIT rebrand institucional
   Capa visual solamente: no cambia IDs, eventos ni fórmulas.
   ================================================================ */

:root {
  --inspi-red: #d32f2f;
  --inspi-red-dark: #a6191f;
  --inspi-navy: #0b1d3a;
  --inspi-navy-2: #16335f;
  --inspi-ink: #0e1729;
  --inspi-muted: #5b677a;
  --inspi-line: #d8dee8;
  --inspi-soft-line: #e8edf4;
  --inspi-paper: #ffffff;
  --inspi-bone: #f5f2ec;
  --inspi-panel: #f8fafc;
}

html {
  color: var(--inspi-ink);
  background: var(--inspi-bone);
}

body {
  background: var(--inspi-bone) !important;
  color: var(--inspi-ink);
}

/* Evita "saltos" de layout cuando cargan los íconos */
i[data-lucide] svg {
  display: block;
}

/* Shell */
main {
  padding-top: 1rem !important;
}

.max-w-7xl {
  max-width: 88rem !important;
}

/* Encabezado del proyecto: conserva la imagen, pero deja de sentirse como portada. */
main > div > div:first-child {
  border: 1px solid var(--inspi-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: var(--inspi-navy) !important;
  max-height: 132px;
}

main > div > div:first-child img {
  width: 100%;
  max-height: 132px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.02);
}

/* Tarjeta principal de tabs */
main > div > div:nth-child(2) {
  border: 1px solid var(--inspi-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
}

.tab-button {
  border-radius: 6px 6px 0 0 !important;
  min-height: 38px;
  color: var(--inspi-muted) !important;
}

.tab-button:hover {
  background: #f8fafc !important;
  color: var(--inspi-navy) !important;
}

.tab-button.border-sky-600,
.tab-button.text-sky-900 {
  border-color: var(--inspi-red) !important;
  color: var(--inspi-navy) !important;
  box-shadow: inset 0 -2px 0 var(--inspi-red) !important;
}

.tab-button span:first-child:empty {
  display: none;
}

.tab-section {
  scroll-margin-top: 1rem;
}

/* Contenedor tipo hoja */
main > div > div:nth-child(2) > div:nth-child(2) {
  background: var(--inspi-bone) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1rem !important;
}

/* Componentes base */
.rounded-xl,
.rounded-lg {
  border-radius: 8px !important;
}

.shadow-md,
.shadow-sm,
.shadow-xl,
.shadow-2xl {
  box-shadow: none !important;
}

.border-sky-100,
.border-sky-200,
.border-sky-300,
.border-sky-600 {
  border-color: var(--inspi-line) !important;
}

.bg-sky-50,
.hover\:bg-sky-50:hover,
.hover\:bg-sky-100:hover {
  background-color: var(--inspi-panel) !important;
}

.text-sky-700,
.text-sky-800,
.text-sky-900,
.font-mono.text-sky-800 {
  color: var(--inspi-navy) !important;
}

.focus\:ring-sky-700:focus {
  --tw-ring-color: rgba(211, 47, 47, 0.24) !important;
}

.bg-sky-600,
.bg-sky-700 {
  background-color: var(--inspi-navy) !important;
}

.hover\:bg-sky-700:hover,
.hover\:bg-sky-800:hover {
  background-color: var(--inspi-navy-2) !important;
}

.accent-sky-700 {
  accent-color: var(--inspi-red) !important;
}

.border-l-4.border-sky-700,
.border-t-4.border-sky-700,
.border-l-4.border-sky-600 {
  border-color: var(--inspi-red) !important;
}

button.bg-amber-600,
button.border-amber-600 {
  background: var(--inspi-red) !important;
  border-color: var(--inspi-red) !important;
}

button.bg-amber-600:hover {
  background: var(--inspi-red-dark) !important;
}

/* Simulador: mismo contenido, lectura más compacta. */
#sec-simulador {
  gap: 1rem !important;
}

#sec-simulador > div:first-child {
  background: var(--inspi-paper);
  border: 1px solid var(--inspi-line);
  border-radius: 8px;
  padding: 0.75rem;
}

#sec-simulador section {
  border-color: var(--inspi-line) !important;
}

#sec-simulador .grid {
  min-width: 0;
}

#densidad_big {
  color: var(--inspi-navy) !important;
  letter-spacing: 0 !important;
}

#densidad_slider {
  accent-color: var(--inspi-red) !important;
}

#sim_costos_panel_body,
#sim_embudo_panel_body {
  padding: 1rem !important;
}

#cost_curve_chart,
#production_funnel_chart {
  max-width: 100% !important;
}

#accordion_root > div {
  border-color: var(--inspi-line) !important;
  border-radius: 8px !important;
}

input,
select,
textarea {
  border-color: #cbd5e1 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--inspi-red) !important;
}

table thead {
  background: #eef2f7 !important;
}

footer {
  background: var(--inspi-bone);
}

@media (max-width: 768px) {
  main {
    padding: 0.75rem !important;
  }

  main > div > div:first-child {
    max-height: 92px;
  }

  main > div > div:first-child img {
    max-height: 92px;
  }

  main > div > div:nth-child(2) > div:nth-child(2) {
    padding: 0.75rem !important;
  }

  #sec-simulador section {
    padding: 1rem !important;
  }
}