/* BASTIUM CRM - informes.css
   Cuadro de mando. Se apoya en tokens.css y componentes.css: aqui solo va lo propio
   de la vista de informes. Cero colores a mano, cero SVG, cero emojis. */

/* ============================================================ accesibilidad */

/* Oculta a la vista pero deja el contenido a los lectores de pantalla.
   Se usa en las tablas equivalentes que acompanan a cada grafico. */
.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Al tabular hasta un elemento oculto, se muestra (util para enlaces de salto) */
.solo-lectores.enfocable:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ============================================================ estructura */

.informes {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  min-width: 0;
}

.informes-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  min-width: 0;
}

.informes-superior {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
  gap: var(--e-5);
  align-items: stretch;
  min-width: 0;
}

.informes-medio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
  min-width: 0;
}

/* ============================================================ barra de periodo */

.informes-barra {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-m);
  background: var(--cristal-hondo);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-1);
}

.periodo-fechas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding-left: var(--e-3);
  border-left: 1px solid var(--borde);
}

.periodo-fechas[hidden] { display: none; }

.periodo-fechas .campo-control {
  width: auto;
  min-height: 30px;
  padding: 4px var(--e-3);
  font-size: var(--t-s);
}

.periodo-etiqueta {
  font-size: var(--t-xs);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-4);
}

.selector-persona {
  width: auto;
  min-width: 172px;
  max-width: 240px;
  min-height: 32px;
  padding: 4px var(--e-7) 4px var(--e-3);
  font-size: var(--t-s);
}

/* ============================================================ fila de KPIs */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--e-3);
  min-width: 0;
}

.kpis .kpi { padding: var(--e-4); }
.kpis .kpi-valor { font-size: var(--t-xl); }
.kpis .kpi-pie { justify-content: space-between; gap: var(--e-2); }
.kpis .kpi-pie > :last-child { color: var(--texto-4); font-variant-numeric: tabular-nums; }

/* El delta sin comparativa no lleva triangulo: no hay direccion que ensenar */
.kpis .kpi-delta:not(.sube):not(.baja)::before { display: none; }

/* ============================================================ graficos */

.grafico-panel { min-width: 0; }
.grafico-panel .panel-cuerpo { padding-top: var(--e-3); }

.grafico-caja {
  position: relative;
  width: 100%;
  min-width: 0;
  height: var(--alto-grafico, 260px);
}

.grafico-lienzo {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* ---- tooltip ---- */

.grafico-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: none;
  min-width: 132px;
  max-width: 240px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde-fuerte);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-s);
  background: var(--cristal-hondo);
  backdrop-filter: var(--desenfoque-suave);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  box-shadow: var(--sombra-2);
  pointer-events: none;
  /* La vista lo coloca en el punto de datos: el desplazamiento lo sube por encima */
  transform: translateY(-100%);
}

.grafico-tip.visible { display: block; }

.grafico-tip-titulo {
  margin-bottom: var(--e-2);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: .02em;
  color: var(--texto);
}

.grafico-tip-fila {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  line-height: 1.7;
}

.grafico-tip-punto {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.grafico-tip-etiqueta { color: var(--texto-3); }

.grafico-tip-valor {
  margin-left: auto;
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

/* ---- leyenda ---- */

.leyenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  color: var(--texto-3);
  white-space: nowrap;
}

.leyenda-punto {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* ============================================================ objetivo del mes */

.objetivo-panel { min-width: 0; }

.objetivo-cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  gap: var(--e-4);
}

.objetivo-fila {
  display: flex;
  align-items: flex-start;
  gap: var(--e-5);
  min-width: 0;
}

.objetivo-fila .anillo-progreso { width: 96px; --grosor: 9px; }

.objetivo-detalle {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
  flex: 1 1 auto;
}

.objetivo-cifra {
  font-family: var(--fuente-display);
  font-size: var(--t-2xl);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--oro);
}

.objetivo-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-2);
}

.objetivo-datos > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.objetivo-datos dt {
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-4);
}

.objetivo-datos dd {
  font-family: var(--fuente-mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}

/* ============================================================ tabla del equipo */

.equipo-panel .panel-cuerpo { padding-inline: var(--e-4); }

/* Con diez columnas la tabla no se comprime: se desliza dentro de .tabla-scroll */
.equipo-tabla { min-width: 680px; }

.equipo-tabla th { padding: 0; }

.equipo-tabla .orden-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-3);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
}

.equipo-tabla th.derecha .orden-boton { justify-content: flex-end; }
.equipo-tabla .orden-boton:hover { color: var(--texto); background: var(--cristal); }
.equipo-tabla .orden-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.equipo-tabla .orden-boton.activo { color: var(--acento-claro); }

/* Flecha de orden dibujada con bordes, sin iconos */
.equipo-tabla .orden-boton::after {
  content: "";
  width: 0;
  height: 0;
  opacity: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 5px solid currentColor;
  transition: opacity var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}

.equipo-tabla .orden-boton.activo::after { opacity: 1; }
.equipo-tabla .orden-boton.activo.desc::after { transform: rotate(180deg); }

.equipo-persona {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
}

.equipo-punto {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--cristal-2);
}

.equipo-tabla .celda-alerta { color: var(--alerta); }

.celda-objetivo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 148px;
}

.celda-objetivo .barra-progreso { flex: 1 1 auto; min-width: 56px; }

.celda-objetivo-texto {
  flex: 0 0 auto;
  min-width: 46px;
  font-size: var(--t-xs);
  text-align: right;
  color: var(--texto-3);
}

/* ============================================================ lectura del periodo */

.insights-panel { min-width: 0; }

.insights {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: insight;
}

.insight {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--acento-hondo);
  border-radius: var(--r-s);
  background: var(--cristal);
}

.insight:first-child { border-left-color: var(--oro); }

.insight p {
  margin: 0;
  font-size: var(--t-s);
  line-height: var(--interlinea);
  color: var(--texto-2);
}

.insight-marca {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

.insight:first-child .insight-marca {
  background: var(--oro);
  box-shadow: 0 0 0 3px var(--oro-tenue);
}

/* ============================================================ responsive */

@media (max-width: 1180px) {
  .informes-superior { grid-template-columns: minmax(0, 1fr); }
  .objetivo-fila { align-items: center; }
}

@media (max-width: 900px) {
  .informes-medio { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 720px) {
  .informes-barra {
    position: static;
    align-items: stretch;
    flex-direction: column;
    padding: var(--e-3);
  }

  .informes-barra .segmentado {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .informes-barra .segmentado-opcion { flex: 1 0 auto; }
  .informes-barra .empuje { display: none; }

  .periodo-fechas {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--borde);
    padding-top: var(--e-3);
  }

  .periodo-fechas .campo-control { flex: 1 1 0; min-width: 0; }
  .selector-persona { width: 100%; max-width: none; }

  /* En movil los graficos apilan y ganan altura para no perder legibilidad */
  .grafico-caja { height: calc(var(--alto-grafico, 260px) + 20px); }
  .objetivo-fila { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
  .objetivo-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipo-panel .panel-cuerpo { padding-inline: var(--e-3); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi { padding: var(--e-3); }
  .kpis .kpi-valor { font-size: var(--t-l); }
}

/* Ni en el movil mas estrecho se baja a una tarjeta por fila: doce KPIs en columna
   obligarian a scrollear media pantalla antes de ver el primer grafico. */
@media (max-width: 420px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .kpis .kpi { gap: var(--e-1); padding: var(--e-3) var(--e-3) var(--e-4); }
  .kpis .kpi-etiqueta { font-size: 9.5px; letter-spacing: .06em; }
  .kpis .kpi-valor { font-size: var(--t-l); }
  .kpis .kpi-pie { flex-direction: column; align-items: flex-start; gap: 2px; }
  .objetivo-datos { grid-template-columns: minmax(0, 1fr); }
}

/* El tooltip se pega al dedo mas que al raton: en tactil no aporta y se retira */
@media (hover: none) {
  .grafico-tip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .equipo-tabla .orden-boton::after { transition: none; }
  .celda-objetivo .barra-progreso > span { transition: none; }
}