/* dashboard.css */

/* Contenedor principal del dashboard */
#dashboard-container {
  width: clamp(360px, 95vw, 1440px);
  margin-inline: auto;
  padding-inline: 12px;
}

/* Título + switch de modo */
.title-with-switch {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.mode-switcher {
  display: inline-flex;
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  overflow: hidden;
}
.mode-switcher .seg-btn {
  padding: .45rem .9rem;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}
.mode-switcher .seg-btn.active {
  background: var(--primary-color);
  color: #fff;
}

/* Botón engranaje */
.icon-btn {
  border: 1px solid var(--border-color);
  background: var(--light-gray);
  border-radius: 10px;
  padding: .45rem .6rem;
  cursor: pointer;
}

/* Estilos para los selectores múltiples de los filtros */
#filters-container select[multiple] {
  width: 100%;
  padding: 10px;
  height: 120px;
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 1rem;
}
#filters-container select[multiple]:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Ajustes grilla de filtros */
#filters-container .modal-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Grilla para los gráficos */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin-bottom: 2em;
  align-items: start;
}

/* Media query para apilar los gráficos en pantallas pequeñas */
@media (max-width: 900px) {
  .charts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Contenedor individual de cada gráfico */
.chart-container {
  position: relative;
  background: #2a2a2a;
  padding: 1.5em;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.chart-container h4 {
  margin-top: 0;
  margin-bottom: 1em;
  text-align: center;
  color: var(--primary-color);
}

/* Scroll para la tabla de resultados */
#results-container .table-wrap {
  max-height: 450px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--light-gray);
}

/* Fijar altura de los chart canvas */
.chart-fixed {
  height: clamp(260px, 32vw, 460px);
}
.chart-fixed canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

/* Modal overlay base (ya existía) */
#dashboard-export-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 9999;
}
#dashboard-export-modal.active { /* animación de entrada */
  animation: fadeIn .2s ease-out;
}

/* ====== MODAL NUEVO (popup engranaje mejorado) ====== */
.export-modal {
  width: clamp(320px, 92vw, 980px);
  background: linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.02)
    );
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  color: var(--text-color);
  overflow: hidden;

  /* --- CAMBIOS PARA ENCAJAR EN PANTALLA --- */
  display: flex;
  flex-direction: column;
  /* Altura máxima (90% de la pantalla) y una mínima razonable */
  max-height: 90vh;
  min-height: 400px;
  /* -------------------------------------- */
}

.export-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border-color);
  /* --- CAMBIO --- */
  flex: 0 0 auto; /* Evita que el header se encoja o crezca */
}
.export-modal .modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
}
.export-modal .modal-header .close-btn {
  border: 1px solid var(--border-color);
  background: var(--light-gray);
  border-radius: 10px;
  padding: .4rem .6rem;
  cursor: pointer;
}

.export-modal .modal-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  padding: 1rem;

  /* --- CAMBIOS PARA ENCAJAR EN PANTALLA --- */
  flex: 1 1 auto; /* Permite que el body crezca/encoja */
  overflow-y: auto; /* AÑADE SCROLL SI EL CONTENIDO ES MUY ALTO */
  
  /* --- CAMBIO 1 --- */
  /* Vuelve a ocultar el scroll H del *popup* (el que no quieres) */
  overflow-x: hidden;
  /* -------------------------------------- */
  
  /* --- CAMBIO PARA STICKY --- */
  /* Asegura que los items sticky se alineen correctamente */
  align-items: start;
}
/* AÑADE ESTA NUEVA REGLA COMPLETA en dashboard.css */
.export-preview-area {
  position: sticky;
  top: 0;
  z-index: 1;

  /* --- CAMBIO 2 (La clave de la solución) --- */
  /* Le dice a la columna "no crezcas más de lo debido", 
     forzando al contenido interno a que muestre su propio scroll. */
  min-width: 0;
}

/* --- NUEVA REGLA PARA EL PREVIEW FIJO --- */
.export-preview-area {
  position: sticky;
  top: 0;
  z-index: 1; /* Asegura que se mantenga por encima */

  /* --- CAMBIO 2 --- */
  /* Esta es la clave: le dice a la columna "no crezcas más 
     ancho que el espacio que te di", forzando al contenido 
     interno (el <pre>) a que muestre su *propio* scroll. */
  min-width: 0;
}
/* -------------------------------------- */

@media (max-width: 920px) {
  .export-modal .modal-body {
    grid-template-columns: 1fr;
  }
}

.export-options .section {
  background: var(--container-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .9rem;
  margin-bottom: .9rem;
}
.export-options .section h4 {
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: var(--primary-color);
}

.option-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: .6rem;
}
.option-row > label {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Tabs formato */
.export-tabs {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  overflow: hidden;
}
.export-tabs button {
  padding: .45rem .8rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-color);
}
.export-tabs button.active {
  background: var(--primary-color);
  color: #fff;
}

/* Chips columnas */
.columns-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.columns-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--light-gray);
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
}
.columns-chips .chip input {
  transform: translateY(1px);
}

/* Switch bonito */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}
.form-switch .track {
  width: 36px;
  height: 20px;
  background: var(--border-color);
  border-radius: 999px;
  position: relative;
  transition: background .15s ease;
}
.form-switch .thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 999px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left .15s ease;
}
.form-switch input:checked + .track {
  background: var(--primary-color);
}
.form-switch input:checked + .track .thumb {
  left: 18px;
}

/* Preview */
.export-preview {
  background: var(--container-bg);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: .9rem;
  min-height: 220px;
  max-height: 420px;
  overflow: auto; /* Esto ya permite scroll horizontal y vertical */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
  line-height: 1.35;
  white-space: pre; /* Esto fuerza a que el texto no se ajuste y cree el scroll H */
}

/* Footer */
.export-modal .modal-footer {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
  padding: .8rem 1rem;
  border-top: 1px solid var(--border-color);
  /* --- CAMBIO --- */
  flex: 0 0 auto; /* Evita que el footer se encoja o crezca */
}
.modal-footer .spacer {
  flex: 1 1 auto;
}

/* Utilidades */
.input, .select {
  width: 100%;
  padding: .55rem .6rem;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.btn, .btn-secondary, .btn-primary, .btn-danger {
  padding: .55rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--light-gray);
  color: var(--text-color);
  cursor: pointer;
}
.btn-primary {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}
.btn-danger {
  background: var(--danger-color, #b00020);
  color: #fff;
  border-color: transparent;
}
.btn-ghost {
  background: transparent;
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}