/* ============================================================
   CRM · Gerencia General de Ventas — Fiat Venezuela
   vista-reportes.css · Estilos exclusivos de la vista "Reportes".
   Todas las reglas van prefijadas con .v-reportes
   ============================================================ */

.v-reportes{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.v-reportes .cab-vista{margin-bottom:0;}
.v-reportes .tarjeta__cab>svg{
  width:17px;height:17px;flex:0 0 17px;color:var(--cyan);
}
.v-reportes svg text{font-family:inherit;}

/* ---------------- Selector de período ---------------- */

.v-reportes__barra{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
}
.v-reportes__barra-rot{
  font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--suave);
}
.v-reportes__periodos{
  display:inline-flex;flex-wrap:wrap;gap:4px;
  background:#E9EEF4;padding:4px;border-radius:9px;
}
.v-reportes__tab{
  height:32px;padding:0 15px;border-radius:6px;
  font-size:13px;font-weight:600;color:var(--suave);white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.v-reportes__tab:hover{color:var(--texto);}
.v-reportes__tab[aria-selected="true"]{
  background:var(--panel);color:var(--marca);box-shadow:var(--sombra);
}

.v-reportes__panel{
  display:flex;flex-direction:column;gap:16px;min-width:0;
}
/* los hijos flexibles no deben crecer con su contenido: las tablas y los
   gráficos anchos se desplazan dentro de su propia caja, nunca la página */
.v-reportes__panel>*,
.v-reportes__dos>*,
.v-reportes__zona-caja>*{min-width:0;}
.v-reportes .tarjeta,
.v-reportes .tarjeta__cuerpo{min-width:0;}
.v-reportes__panel:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--radio);}

.v-reportes__rango{
  font-size:12.5px;color:var(--suave);line-height:1.6;
}
.v-reportes__rango strong{color:var(--texto);font-weight:600;}

/* ---------------- Indicadores ---------------- */

.v-reportes__kpis{
  display:grid;gap:14px;grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){
  .v-reportes__kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1080px){
  .v-reportes__kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.v-reportes__kpi-linea{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;
}
.v-reportes__delta{font-variant-numeric:tabular-nums;}
.v-reportes__delta svg{width:12px;height:12px;flex:0 0 12px;}

/* ---------------- Lectura del período ---------------- */

.v-reportes__lectura{display:flex;flex-direction:column;gap:10px;}
.v-reportes__lectura li{
  display:flex;gap:9px;font-size:13px;line-height:1.6;color:var(--texto);
}
.v-reportes__lectura li svg{
  width:15px;height:15px;flex:0 0 15px;color:var(--cyan);margin-top:3px;
}
.v-reportes__lectura strong{font-weight:600;color:var(--marca);}

/* ---------------- Embudo ---------------- */

.v-reportes__embudo{display:flex;flex-direction:column;gap:15px;}
.v-reportes__etapa{display:flex;flex-direction:column;gap:7px;min-width:0;}
.v-reportes__etapa-cab{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-width:0;
}
.v-reportes__etapa-nom{font-size:13.5px;font-weight:600;}
.v-reportes__etapa-val{
  margin-left:auto;font-size:18px;font-weight:700;color:var(--marca);letter-spacing:-.3px;
}
.v-reportes__conv{font-variant-numeric:tabular-nums;}
.v-reportes__conv svg{width:11px;height:11px;flex:0 0 11px;}
.v-reportes__pista{
  height:14px;border-radius:999px;background:#EEF2F7;overflow:hidden;width:100%;
}
.v-reportes__relleno{
  display:block;height:100%;border-radius:999px;transition:width .35s ease;
}
.v-reportes__etapa-pie{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 14px;
  font-size:11.5px;color:var(--suave);
}
.v-reportes__caida{color:#96291D;font-weight:500;}
.v-reportes__etapa-badge{margin-left:auto;}

/* ---------------- Celdas de tabla ---------------- */

.v-reportes__celda-nom{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;
}
.v-reportes__celda-nom .menor{flex:1 1 100%;}

.v-reportes__medida{
  display:flex;flex-direction:column;gap:5px;min-width:112px;
}
.v-reportes__medida>span:first-child{
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.v-reportes__medida .barra-progreso{display:block;}
.v-reportes__medida .barra-progreso__relleno{display:block;}

.v-reportes__canal{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;}
.v-reportes__canal .menor{flex:1 1 100%;padding-left:34px;}
.v-reportes__canal-ico{
  width:26px;height:26px;flex:0 0 26px;border-radius:7px;
  background:rgba(0,141,212,.12);color:#02689B;
  display:inline-flex;align-items:center;justify-content:center;
}
.v-reportes__canal-ico svg{width:15px;height:15px;}

.v-reportes .tabla tfoot th,
.v-reportes .tabla tfoot td{
  padding:10px 12px;border-top:1px solid var(--linea);background:#FBFCFD;
  font-size:12.5px;font-weight:700;color:var(--marca);
}
.v-reportes .tabla tfoot th{text-align:left;}
.v-reportes .tabla tfoot td{text-align:right;font-variant-numeric:tabular-nums;}

/* ---------------- Zonas: mapa + cuadro ---------------- */

/* El mapa va encima del cuadro: a lo ancho de la tarjeta siempre entra
   completo, sin recortar ninguna zona ni obligar a desplazarlo. */
.v-reportes__zona-caja{
  display:flex;flex-direction:column;gap:18px;padding-bottom:0;
}
.v-reportes__zona-tabla{min-width:0;margin:0 -16px;}

.v-reportes__figura{margin:0;min-width:0;}
.v-reportes__lienzo{
  overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;
}
.v-reportes__lienzo>svg{
  width:100%;min-width:600px;max-width:760px;height:auto;
}
.v-reportes__lienzo--mapa>svg{min-width:520px;max-width:720px;margin:0 auto;}

.v-reportes__m-nom{font-size:13px;font-weight:600;fill:var(--texto);}
.v-reportes__m-nom.es-claro{fill:#FFFFFF;}
.v-reportes__m-val{font-size:10.5px;fill:rgba(20,32,43,.78);}
.v-reportes__m-val.es-claro{fill:rgba(255,255,255,.88);}

.v-reportes__pie-fig{
  display:flex;flex-direction:column;gap:7px;margin-top:11px;
  font-size:11.5px;color:var(--suave);line-height:1.55;
}
.v-reportes__leyenda{display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.v-reportes__muestra{
  width:22px;height:10px;border-radius:3px;display:inline-block;
  border:1px solid rgba(16,32,48,.10);
}

/* ---------------- Gráfico de modelos ---------------- */

.v-reportes__leyenda-grafico{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px;
}
.v-reportes__marca-leyenda{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--suave);
}
.v-reportes__marca-leyenda i{
  width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 11px;
}
.v-reportes__marca-leyenda i.es-ok{background:var(--ok);}
.v-reportes__marca-leyenda i.es-cyan{background:var(--cyan);}
.v-reportes__marca-leyenda i.es-rojo{background:var(--peligro);}

.v-reportes__g-nom{font-size:12.5px;font-weight:600;fill:var(--texto);}
.v-reportes__g-val{font-size:11px;fill:var(--suave);}
.v-reportes__g-ok{fill:var(--ok);}
.v-reportes__g-cyan{fill:var(--cyan);}
.v-reportes__g-rojo{fill:var(--peligro);}
.v-reportes__g-nulo{fill:#D8E0E9;}

/* ---------------- Dos columnas ---------------- */

.v-reportes__dos{
  display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start;
}
@media (min-width:1000px){
  .v-reportes__dos{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.v-reportes__dos .tabla{min-width:360px;}

/* ---------------- Modal del método ---------------- */

.v-reportes__metodo{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;font-size:13px;
}
@media (min-width:520px){
  .v-reportes__metodo{grid-template-columns:158px minmax(0,1fr);}
}
.v-reportes__metodo dt{font-weight:600;color:var(--marca);}
.v-reportes__metodo dd{margin:0 0 9px;color:var(--suave);line-height:1.55;}