/* css/informes-avanzados.css
   Prestax · Informes avanzados (Paso 6) — base mobile-first.
   Extiende los tokens ya definidos en dist/app.css (--surface, --primary,
   --danger, etc.) — no se redefine la paleta base, solo se añaden los
   acentos semánticos que faltaban para este módulo. */

:root {
  --ia-warning: #f5a623;
  --ia-info: #5b8def;
  --ia-radius: var(--tp-radius, 12px);
}

/* ===== Reclamo en la home (cabecera) ===== */
.home-informes-promo {
  display: flex;
  align-items: center;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  text-align: left;
  justify-content: space-between;
}

.home-informes-promo__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =====================================================================
   REMATE UX P18 (2026-11-01) · Inicio: botón de Informes solo con icono
   a la izquierda del chip de empresa, en la MISMA fila y con su altura.
   - Antes: fila en columna (dist/app.css), botón al 70 % de ancho con
     título y descripción; en escritorio, botón de 320 px (97-desktop.css).
   - El icono es img/app-icons/stats.svg (el de Historial completo).
   - Los textos (.home-informes-promo__title/__desc) se conservan en el DOM
     ocultos solo a la vista: dan nombre accesible al botón y los actualiza
     el JS de carga (dist/bootstrap.js · js/prestax-informes-avanzados.js).
   - Selectores con #id: superan a dist/app.css y a 97-desktop.css sin
     !important. Colores y borde del botón se mantienen.
   ===================================================================== */
#homeHeaderPromoRow.home-header-promo-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 0 4px 6px;
  box-sizing: border-box;
}

#homeHeaderPromoRow .home-header-promo-row__chips {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  justify-content: flex-start;
}

#homeHeaderPromoRow #homeInformesPromoBtn.home-informes-promo {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  min-width: 76px;
  min-height: 60px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  /* La regla base .home-informes-promo trae justify-content:space-between:
     en grid de una sola pista la empuja a la izquierda. */
  justify-content: center;
  align-content: center;
  border-radius: 14px;
  box-sizing: border-box;
  cursor: pointer;
}

#homeHeaderPromoRow #homeInformesPromoBtn:disabled {
  cursor: progress;
  opacity: 0.7;
}

#homeHeaderPromoRow #homeInformesPromoBtn:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.55);
  outline-offset: 2px;
}

#homeHeaderPromoRow .home-informes-promo__icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

#homeHeaderPromoRow .home-informes-promo__icon img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

#homeHeaderPromoRow .home-informes-promo__body {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 380px) {
  #homeHeaderPromoRow #homeInformesPromoBtn.home-informes-promo {
    flex-basis: 58px;
    width: 50px;
    min-width: 50px;
  }

  #homeHeaderPromoRow .home-informes-promo__icon img {
    width: 34px;
    height: 34px;
  }
}

/* ===== Filtros del informe ===== */
.ia-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  position: sticky;
  top: 0;
  z-index: 2;
}

.ia-filters__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ia-filters__group[hidden] {
  display: none !important;
}

.ia-filters select {
  background: var(--input-bg);
  color: var(--input-fg) !important;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
}

.ia-filters button.ia-nav-btn {
  background: var(--btn-soft-bg);
  color: var(--btn-soft-fg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
}

.ia-filters button.ia-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ia-filters__range {
  font-size: 12.5px;
  color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ia-filters__range[hidden] {
  display: none !important;
}

.ia-filters__range strong {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-transform: capitalize;
}

.ia-filters__range span {
  font-size: 11px;
  color: var(--text-muted);
}

.ia-filters__empresa {
  font-size: 12px;
  color: var(--text-muted);
}

.ia-refresh-btn {
  margin-left: auto;
  background: var(--btn-soft-bg);
  color: var(--btn-soft-fg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.ia-status-msg {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ===== Bento grid (mobile: una columna, orden natural) ===== */
.ia-bento {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "big"
    "med1"
    "med2"
    "med7"
    "med3"
    "med4"
    "med9"
    "med8"
    "med5"
    "med6"
    "sm1"
    "sm2"
    "sm3"
    "sm4";
  gap: 12px;
  padding: 12px;
  align-content: start;
}

/* ===== Tarjetas ===== */
.ia-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--ia-radius);
  padding: 14px;
  box-shadow: var(--tp-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  animation: iaCardIn 0.25s ease both;
}

@keyframes iaCardIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ia-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ia-card__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.ia-card__bignum {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: opacity 0.15s ease;
}

.ia-card__bignum--sm {
  font-size: 22px;
}

.ia-card__sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

.ia-card__subrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ia-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.ia-tag--ok {
  background: rgba(21, 132, 63, 0.18);
  color: #4ade80;
}

.ia-tag--warn {
  background: rgba(245, 166, 35, 0.16);
  color: var(--ia-warning);
}

.ia-tag--info {
  background: rgba(91, 141, 239, 0.16);
  color: var(--ia-info);
}

.ia-badge--warn {
  font-size: 11px;
  font-weight: 700;
  color: var(--ia-warning);
  background: rgba(245, 166, 35, 0.14);
  padding: 3px 8px;
  border-radius: 999px;
}

.ia-badge--medio {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ia-warning);
  background: rgba(245, 166, 35, 0.16);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.ia-badge--alto {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--danger);
  background: rgba(248, 113, 113, 0.16);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ===== Lista de riesgo de impago (Fase 3) ===== */
.ia-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ia-risk-item {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.ia-risk-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.ia-risk-item__name {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ia-risk-item__reason {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

.ia-card__chart-wrap {
  height: 130px;
  position: relative;
}

.ia-card__chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ia-card__chart-wrap--sm {
  height: 100px;
}

.ia-card__chart-wrap--legend {
  height: 170px;
}

.ia-card__saldo {
  font-size: 13px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

.ia-card__saldo--ok strong {
  color: #4ade80;
}

.ia-card__saldo--danger strong {
  color: var(--danger);
}

/* ===== Deltas ===== */
.ia-delta {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ia-delta--up {
  color: #4ade80;
}

.ia-delta--down {
  color: var(--danger);
}

.ia-delta--flat,
.ia-delta--neutral {
  color: var(--text-muted);
}

/* ===== Chips (facturas por estado, con reenvío a Cartera de cobros) ===== */
.ia-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ia-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  flex: 1 1 100px;
}

.ia-chip:hover {
  transform: translateY(-1px);
}

.ia-chip--danger {
  border-color: rgba(248, 113, 113, 0.4);
}

.ia-chip--warn {
  border-color: rgba(245, 166, 35, 0.4);
}

.ia-chip__label {
  font-size: 10.5px;
  color: var(--text-muted);
}

.ia-chip__count {
  font-size: 15px;
  font-weight: 700;
}

.ia-chip__amount {
  font-size: 11px;
  color: var(--text-muted);
}

/* ===== Desplegables de detalle (Fase 5) ===== */
.ia-details {
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}

.ia-details summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ia-info);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ia-details summary::-webkit-details-marker {
  display: none;
}

.ia-details summary::before {
  content: "▶";
  font-size: 8px;
  transition: transform 0.15s ease;
}

.ia-details[open] summary::before {
  transform: rotate(90deg);
}

.ia-detail-grid {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.ia-detail-grid dt {
  font-size: 10.5px;
  color: var(--text-muted);
  margin: 0;
}

.ia-detail-grid dd {
  font-size: 12.5px;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.ia-provider-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.ia-provider-detail {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.ia-provider-detail strong {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}

.ia-provider-detail .ia-detail-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ===== Barras de gasto por centro de coste (Fase 2) ===== */
.ia-costbar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ia-costbar__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.ia-costbar__name {
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ia-costbar__val {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 11.5px;
}

.ia-costbar__track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface3);
  overflow: hidden;
}

.ia-costbar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #4ade80);
  transition: width 0.4s ease;
}

/* ===== Leyenda (concentración de clientes) ===== */
.ia-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ia-legend li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  gap: 8px;
}

.ia-legend__name {
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ia-legend__val {
  color: var(--text-muted);
  white-space: nowrap;
}

/* Conteo animado al recalcular (transición suave, no salto brusco) */
.ia-card__bignum.is-updating {
  opacity: 0.35;
}

/* ===== Estado vacío (cuenta sin ningún documento todavía) =====
   Sustituye el grid completo por un único panel. `.ia-bento--empty`
   neutraliza `grid-template-areas` (mobile Y desktop) para que este panel
   sin grid-area no se pierda o se encoja dentro de las áreas nombradas del
   Bento — display:block hace que el resto de reglas de grid-template no
   tengan efecto, sin tocar el invariante de grid-area de las 14 tarjetas
   reales. */
.ia-bento--empty {
  display: block !important;
}

.ia-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 52px 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--ia-radius);
  animation: iaCardIn 0.25s ease both;
}

.ia-empty-state__icon {
  font-size: 30px;
  line-height: 1;
}

.ia-empty-state__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.ia-empty-state__desc {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ia-empty-state__cta {
  margin-top: 6px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.ia-empty-state__cta:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
}

/* P13 · Acciones del informe agrupadas y estables en móvil */
.ia-filters__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.ia-filters__actions .ia-refresh-btn {
  margin-left: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ia-filters__actions {
    flex: 1 0 100%;
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ia-filters__actions .ia-refresh-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
}

/* =========================================================
   RESP1.2D / Informes avanzados: targets tactiles <=979.98
   El escritorio fino >=980 conserva su densidad compacta.
   ========================================================= */
@media (max-width: 979.98px) {
  #informesAvanzadosModal #closeInformesAvanzadosBtn,
  #informesAvanzadosModal .ia-filters select,
  #informesAvanzadosModal .ia-filters__actions .ia-refresh-btn,
  #informesAvanzadosModal .ia-details summary {
    min-height: 44px;
    box-sizing: border-box;
  }

  #informesAvanzadosModal .ia-filters button.ia-nav-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  #informesAvanzadosModal #closeInformesAvanzadosBtn {
    min-width: 44px;
  }
}