/* ==========================================================================
   STYLES COTIZADOR-1 (antes "cotizador.html")
   Base: hoja de estilos de livostreaming.com (Bootstrap 5 + overrides Livo).
   Solo lo que no existe ya en styles.css: paddings de hero, variantes de
   las tarjetas de escenario y el mini gráfico de barras del simulador.
   La regla .cz-hero-light queda de cuando existía cotizador-claro.html
   (archivado en _archive-cotizadores/); no se usa en cotizador-1.html.
   ========================================================================== */

/* cotizador-1.html ya no tiene hero: la sección del formulario (#simulador)
   es la primera pantalla, así que necesita su propio padding-top para no
   quedar tapada por el nav fijo. Mismos valores que usaba el hero que
   sacamos, para no perder el "aire" que ya tenía la página. */
.cz-first-section {
  padding-top: 8rem;
}
@media (min-width: 992px) {
  .cz-first-section {
    padding-top: 9rem;
  }
}

/* El nav (#mainNav, en styles.css) es transparente en desktop con texto
   blanco hasta que se hace scroll — pensado para flotar sobre un hero
   oscuro. Acá ya no hay hero: el nav arranca directo sobre el fondo
   blanco del formulario, así que los links en blanco quedaban invisibles.
   Antes del scroll (sin .navbar-shrink) queda transparente igual que
   antes, solo se oscurece el texto para que se lea sobre el fondo
   blanco de la página — sin contenedor ni sombra propia. Al scrollear,
   JS agrega .navbar-shrink y ahí sí queda la barra oscura de siempre
   (esa regla no se toca, sigue en styles.css). */
@media (min-width: 992px) {
  #mainNav:not(.navbar-shrink) .navbar-nav .nav-item .nav-link {
    color: var(--bs-dark);
  }
  #mainNav:not(.navbar-shrink) .navbar-nav .nav-item .nav-link:hover {
    color: var(--bs-primary);
  }
  #mainNav:not(.navbar-shrink) .text-white-50 {
    color: var(--bs-gray-600) !important;
  }
}

/* cotizador-claro.html: acá el header no usa .masthead (necesitamos texto
   oscuro sobre fondo claro, no el color:#fff que fuerza esa clase), así que
   el despeje para el nav fijo se define acá. Mismos valores que la versión
   oscura para que ambas opciones respiren igual. */
#inicio.cz-hero-light {
  padding-top: 8rem;
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  #inicio.cz-hero-light {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
}

/* Tarjeta de escenario destacada (lectura principal / alto potencial) */
.cz-scenario-card.is-base {
  border: 2px solid var(--bs-dark) !important;
}
.cz-scenario-card.is-high {
  background: #fff8d8;
}

/* Mini gráfico de barras (frecuencia → GMV, duración → audiencia) */
.cz-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  gap: .65rem;
  align-items: center;
  margin: .6rem 0;
}
.cz-bar-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-gray-700);
}
.cz-bar-track {
  height: 14px;
  border-radius: 50rem;
  background: var(--bs-gray-200);
  overflow: hidden;
}
.cz-bar-fill {
  height: 100%;
  border-radius: 50rem;
  /* Gris por defecto: son datos comparativos (GMV por frecuencia, audiencia
     por duración), no una alerta. El rojo se reserva para la barra activa,
     que funciona como indicador de selección, no como dato en sí. */
  background: var(--bs-gray-400);
  min-width: 4px;
  transition: width .3s ease;
}
.cz-bar-row.is-active .cz-bar-fill {
  background: var(--bs-primary);
}
.cz-bar-row.is-active .cz-bar-label,
.cz-bar-row.is-active .cz-bar-value {
  color: var(--bs-dark);
  font-weight: 700;
}
.cz-bar-value {
  text-align: right;
  font-size: .78rem;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .cz-bar-row {
    grid-template-columns: 74px 1fr 76px;
  }
}

/* -------------------------------------------------------------------------
   DESCARGA EN PDF — mismo enfoque que cotizador-2/3: window.print() + esta
   hoja. Nav, formulario y controles interactivos se ocultan vía
   .d-print-none en el HTML/JS; acá se limpia el look de lo que sí queda.
   ------------------------------------------------------------------------- */
@media print {
  @page {
    margin: 1.5cm;
  }
  body {
    background: #fff !important;
  }
  #simulador {
    padding-top: 0 !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #e2e2e2 !important;
    break-inside: avoid;
  }
  .bg-trama-dark {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #e2e2e2 !important;
  }
  .bg-trama-dark .text-white,
  .bg-trama-dark .text-white-50 {
    color: #000 !important;
  }
  .text-yellow {
    color: #000 !important;
  }
  /* El acordeón de detalle/metodología/fuentes queda colapsado si el
     usuario nunca lo abrió; en el informe impreso se ve siempre entero,
     con el botón de toggle convertido en un título simple. */
  #metodologiaAccordion .accordion-collapse {
    display: block !important;
  }
  #metodologiaAccordion .accordion-button {
    pointer-events: none;
    background: none !important;
    color: #000 !important;
    padding: .5rem 0 !important;
    box-shadow: none !important;
  }
  #metodologiaAccordion .accordion-button::after {
    display: none !important;
  }
  #metodologiaAccordion .accordion-item {
    border: none !important;
  }
}