/* Estilos propios de IAWPARK sobre Unfold. Usan las variables de color de Unfold,
   así respetan la paleta elegida por cada usuario y el tema claro/oscuro. */

.iaw-lectura {
  width: 100%;
  font: 600 2rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--color-primary-600);
  border-radius: 10px;
  background: #fff;
  color: var(--color-base-900);
  outline: none;
}
.iaw-lectura:focus { box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary-500) 30%, transparent); }
.dark .iaw-lectura { background: var(--color-base-900); color: var(--color-base-100); }

.iaw-campo {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 8px;
  background: #fff;
  color: var(--color-base-900);
  font-size: 1rem;
}
.dark .iaw-campo { background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-base-100); }
/* Select con chevron propio, como los de Unfold (gris medio: se ve en claro y oscuro) */
select.iaw-campo,
.dark select.iaw-campo {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
}

.iaw-placa {
  align-self: flex-start;
  display: inline-block;
  font: 800 2.4rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.12em;
  background: #f4c430;
  color: #1a1a1a;
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  padding: 0.35rem 0.9rem;
}

.iaw-monto { font-variant-numeric: tabular-nums; font-weight: 700; }
.iaw-total { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-primary-700); }
.dark .iaw-total { color: var(--color-primary-300); }

.iaw-kbd {
  display: inline-block;
  font: 600 0.75rem ui-monospace, Consolas, monospace;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.8;
  margin-left: 0.4rem;
}

/* Avisos: siempre con ícono y texto, colores del tema de Unfold (claro y oscuro) */
.iaw-aviso, .iaw-bloqueo, .iaw-ok {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border-radius: 8px; padding: 0.7rem 0.9rem; border: 1px solid;
}
.iaw-aviso > .material-symbols-outlined, .iaw-bloqueo > .material-symbols-outlined { font-size: 1.3rem; flex-shrink: 0; }
.iaw-aviso { background: var(--color-orange-50); color: var(--color-orange-800); border-color: var(--color-orange-200); }
.dark .iaw-aviso { background: color-mix(in oklab, var(--color-orange-500) 14%, transparent); color: var(--color-orange-300); border-color: color-mix(in oklab, var(--color-orange-500) 35%, transparent); }
.iaw-bloqueo { background: var(--color-red-50); color: var(--color-red-800); border-color: var(--color-red-200); font-weight: 600; }
.dark .iaw-bloqueo { background: color-mix(in oklab, var(--color-red-500) 14%, transparent); color: var(--color-red-300); border-color: color-mix(in oklab, var(--color-red-500) 35%, transparent); }
.iaw-ok { background: var(--color-green-50); color: var(--color-green-800); border-color: var(--color-green-200); padding: 1.25rem; }
.dark .iaw-ok { background: color-mix(in oklab, var(--color-green-500) 12%, transparent); color: var(--color-green-300); border-color: color-mix(in oklab, var(--color-green-500) 35%, transparent); }
.iaw-ok .iaw-icono-grande { font-size: 2.5rem; }

/* Portería: espera (cuando no hay decisión), carga y cifra del cambio */
.iaw-decision:not(:empty) ~ .iaw-espera { display: none; }
.iaw-espera {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
  padding: 2.5rem 1rem; border: 2px dashed var(--color-base-200); border-radius: 8px;
}
.dark .iaw-espera { border-color: var(--color-base-800); }
.iaw-espera .material-symbols-outlined { font-size: 3rem; color: var(--color-primary-600); }
.iaw-cargando { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.iaw-cargando .material-symbols-outlined { font-size: 1.1rem; }
.iaw-cambio { font-size: 2.6rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.iaw-boton:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

.iaw-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 3rem; padding: 0 1.4rem; border-radius: var(--border-radius, 8px); font-weight: 700; font-size: 1.05rem;
  background: var(--color-primary-600); color: #fff; border: 0; cursor: pointer;
}
.iaw-boton:hover { background: var(--color-primary-700); }
.iaw-boton:disabled { opacity: 0.45; cursor: not-allowed; }
.iaw-boton.secundario { background: transparent; color: var(--color-primary-700); border: 2px solid var(--color-primary-600); }
.dark .iaw-boton.secundario { color: var(--color-primary-300); }

.iaw-pila > * + * { margin-top: 1rem; }
.iaw-fila { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.iaw-tabla { width: 100%; border-collapse: collapse; }
.iaw-tabla td, .iaw-tabla th { padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--color-base-200); text-align: left; }
.dark .iaw-tabla td, .dark .iaw-tabla th { border-color: var(--color-base-800); }
.iaw-tabla .derecha { text-align: right; }
.iaw-angosto { max-width: 900px; }

/* Portada: cifra principal de cada indicador, placa pequeña en tablas y leyenda del gráfico */
/* La cifra escala con el ancho de su tarjeta (container query), no con la ventana: nunca se corta */
.iaw-indicador { container-type: inline-size; }
.iaw-detalle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iaw-cifra { font-size: clamp(1.15rem, 14cqi, 1.875rem); white-space: nowrap; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.iaw-placa-chica {
  display: inline-block;
  font: 700 0.85rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  background: #f4c430;
  color: #1a1a1a;
  border: 1.5px solid #1a1a1a;
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
}
.iaw-punto { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 999px; }
.iaw-grafico { height: 260px; }
.iaw-destacada { border-top: 3px solid var(--color-primary-600) !important; }

/* Caja: campo de dinero con "$" fijo y diferencia del arqueo */
.iaw-al-final { align-items: flex-end; }
.iaw-con-pesos { position: relative; }
.iaw-con-pesos::before {
  content: "$"; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--color-base-500); pointer-events: none;
}
.iaw-con-pesos .iaw-campo { padding-left: 1.8rem; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.iaw-diferencia { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* Empresa elegida en "A quién visita" (etiqueta con botón para quitarla) */
.iaw-ficha {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
}
.dark .iaw-ficha { background: var(--color-primary-900); color: var(--color-primary-100); }
.iaw-ficha button { display: inline-flex; border-radius: 999px; padding: 0.1rem; }
.iaw-ficha button:hover { background: var(--color-primary-200); }
.dark .iaw-ficha button:hover { background: var(--color-primary-800); }
.iaw-ficha .material-symbols-outlined { font-size: 1rem; }

/* ---------------------------------------------------------------- Módulo de análisis */
.iaw-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.iaw-rapidos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.iaw-chip {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-base-300);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-base-700);
}
.iaw-chip:hover { border-color: var(--color-primary-500); color: var(--color-primary-700); }
.iaw-chip.activo { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.dark .iaw-chip { border-color: var(--color-base-700); color: var(--color-base-300); }
.dark .iaw-chip:hover { border-color: var(--color-primary-400); color: var(--color-primary-300); }
.dark .iaw-chip.activo { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.iaw-fecha { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; font-weight: 600; color: var(--color-base-500); }
.iaw-fecha .iaw-campo { width: auto; padding: 0.4rem 0.6rem; }

.iaw-pestanas {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-base-200);
}
.dark .iaw-pestanas { border-color: var(--color-base-800); }
.iaw-pestana {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-base-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.iaw-pestana:hover { color: var(--color-base-900); }
.dark .iaw-pestana:hover { color: var(--color-base-100); }
.iaw-pestana.activa { color: var(--color-primary-700); border-bottom-color: var(--color-primary-600); }
.dark .iaw-pestana.activa { color: var(--color-primary-300); border-bottom-color: var(--color-primary-400); }

.iaw-variacion { display: inline-flex; align-items: center; gap: 0.1rem; font-weight: 700; }
.iaw-variacion .material-symbols-outlined { font-size: 0.95rem; }
.iaw-variacion.buena { color: #006300; }
.iaw-variacion.mala { color: #b42318; }
.dark .iaw-variacion.buena { color: #5fd35f; }
.dark .iaw-variacion.mala { color: #f97066; }

.iaw-hallazgos { display: flex; flex-direction: column; gap: 0.75rem; }
.iaw-hallazgo { display: flex; gap: 0.6rem; font-size: 0.9rem; line-height: 1.35; }
.iaw-hallazgo .material-symbols-outlined { color: var(--color-primary-600); flex-shrink: 0; }
.iaw-hallazgo.warning .material-symbols-outlined { color: #b54708; }
.iaw-hallazgo.danger .material-symbols-outlined { color: #b42318; }
.iaw-hallazgo.success .material-symbols-outlined { color: #006300; }
.dark .iaw-hallazgo .material-symbols-outlined { color: var(--color-primary-300); }
.dark .iaw-hallazgo.warning .material-symbols-outlined { color: #fab219; }
.dark .iaw-hallazgo.danger .material-symbols-outlined { color: #f97066; }
.dark .iaw-hallazgo.success .material-symbols-outlined { color: #5fd35f; }

.iaw-datos { margin-top: 0.5rem; font-size: 0.85rem; }
.iaw-datos summary { cursor: pointer; color: var(--color-base-500); font-weight: 600; }
.iaw-datos[open] summary { margin-bottom: 0.5rem; }
/* Tooltip de ApexCharts con los colores del panel */
.apexcharts-tooltip { box-shadow: 0 4px 16px rgb(0 0 0 / 12%) !important; }
.iaw-apex { min-height: 280px; }

/* Ajustes de la revisión de diseño del análisis */
.iaw-pestanas { overflow-y: hidden; scrollbar-width: none; }
.iaw-pestanas::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .iaw-pestanas { mask-image: linear-gradient(to right, #000 85%, transparent); }
}
.dark .iaw-pestana,
.dark .iaw-fecha,
.dark .iaw-datos summary { color: var(--color-base-400); }
.dark .iaw-pestana.activa { color: var(--color-primary-300); }
.dark .iaw-campo { color-scheme: dark; }
.iaw-chip:focus-visible,
.iaw-pestana:focus-visible,
.iaw-datos summary:focus-visible,
.iaw-ver-todos:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.iaw-variacion.igual { color: var(--color-base-500); }
.iaw-monto { white-space: nowrap; }
.iaw-total-fila td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--color-base-300); }
.dark .iaw-total-fila td { border-top-color: var(--color-base-700); }
@media (max-width: 639px) { .iaw-solo-ancho { display: none; } }
.iaw-ver-todos {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-700);
}
.dark .iaw-ver-todos { color: var(--color-primary-300); }
.iaw-ver-todos:hover { text-decoration: underline; }
/* Mientras se recalcula otro período */
[aria-busy="true"] .iaw-contenido-analisis { opacity: 0.5; pointer-events: none; transition: opacity 0.2s; }
/* Escala del mapa de calor */
.iaw-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--color-base-500); }
.dark .iaw-escala { color: var(--color-base-400); }
.iaw-escala span { display: inline-flex; align-items: center; gap: 0.3rem; }
.iaw-escala i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; }
.iaw-calculando { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.iaw-calculando[hidden] { display: none; }