/* ============================================================
   Vista «Tablero» · reglas propias, todas bajo .v-tablero
   ============================================================ */

.v-tablero > * + * { margin-top: 14px; }
.v-tablero > .cab-vista { margin-bottom: 0; }

/* iconos de las cabeceras de tarjeta */
.v-tablero .tarjeta__cab > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--marca); }

/* ---------------- KPI ---------------- */
.v-tablero__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
  gap: 14px;
}
.v-tablero__kpi-fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.v-tablero__kpi .kpi__nota { line-height: 1.45; }
.v-tablero__var { align-self: center; }

/* ---------------- contenedores de gráficos ---------------- */
.v-tablero__scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.v-tablero__grafico { width: 100%; min-width: 820px; height: auto; display: block; font-family: inherit; }
.v-tablero__scroll--chico .v-tablero__grafico { min-width: 330px; }

/* textos dentro de los SVG */
.v-tablero__t-cifra { font-size: 21px; font-weight: 700; fill: var(--texto); font-variant-numeric: tabular-nums; }
.v-tablero__t-cifra--rojo { fill: var(--peligro); }
.v-tablero__t-etapa { font-size: 12px; font-weight: 600; fill: #41546A; }
.v-tablero__t-conv { font-size: 13.5px; font-weight: 600; fill: #41546A; font-variant-numeric: tabular-nums; }
.v-tablero__t-conv--rojo { fill: var(--peligro); }
.v-tablero__t-menor { font-size: 10.5px; fill: #8496A8; font-variant-numeric: tabular-nums; }
.v-tablero__t-valor { font-size: 15px; font-weight: 700; fill: var(--marca); font-variant-numeric: tabular-nums; }
.v-tablero__t-etiq { font-size: 12px; font-weight: 600; fill: var(--texto); }
.v-tablero__t-dentro { font-size: 11px; font-weight: 700; fill: #FFFFFF; }
.v-tablero__eje { stroke: var(--linea); stroke-width: 1; }
.v-tablero__corte { stroke: #C6D2DE; stroke-width: 1; stroke-dasharray: 4 5; }

/* ---------------- embudo ---------------- */
.v-tablero__pie-embudo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between;
}
.v-tablero__pie-embudo p { flex: 1 1 300px; min-width: 0; line-height: 1.5; }

/* ---------------- rejilla de dos tarjetas ---------------- */
.v-tablero__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.v-tablero__par > .tarjeta { display: flex; flex-direction: column; height: 100%; }
.v-tablero__par > .tarjeta > .tarjeta__cuerpo { flex: 1 1 auto; }

/* ---------------- cifras grandes de «Su día» y «Fugas» ---------------- */
.v-tablero__cifras { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.v-tablero__cifra {
  flex: 1 1 132px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--fondo);
}
.v-tablero__cifra-num {
  font-size: 25px; font-weight: 700; line-height: 1.12; letter-spacing: -.5px;
  color: var(--marca); font-variant-numeric: tabular-nums;
}
.v-tablero__cifra-num--monto { font-size: 18px; letter-spacing: -.2px; }
.v-tablero__cifra-txt { font-size: 11.5px; color: var(--suave); line-height: 1.4; }
.v-tablero__cifra--peligro { background: rgba(192, 57, 43, .06); border-color: rgba(192, 57, 43, .2); }
.v-tablero__cifra--peligro .v-tablero__cifra-num { color: var(--peligro); }
.v-tablero__cifra--cyan .v-tablero__cifra-num { color: var(--cyan); }

.v-tablero__btn-grande { width: 100%; height: 40px; font-size: 13.5px; }

/* ---------------- agenda de «Su día» ---------------- */
.v-tablero__agenda { display: flex; flex-direction: column; }
.v-tablero__agenda-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--linea);
}
.v-tablero__canal {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 141, 212, .1); color: #02689B;
}
.v-tablero__canal svg { width: 15px; height: 15px; }
.v-tablero__canal--vencida { background: rgba(192, 57, 43, .1); color: var(--peligro); }
.v-tablero__agenda-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v-tablero__agenda-nombre { font-size: 13px; font-weight: 600; }
.v-tablero__agenda-nota {
  font-size: 11.5px; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v-tablero__agenda-lado { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.v-tablero__agenda-quien { font-size: 11px; font-weight: 700; color: var(--suave); letter-spacing: .3px; }

/* ---------------- tarjeta de fugas ---------------- */
.v-tablero__fugas .tarjeta__cab { background: rgba(192, 57, 43, .05); border-bottom-color: rgba(192, 57, 43, .18); }
.v-tablero__fugas .tarjeta__cab > svg { color: var(--peligro); }
.v-tablero__fugas-lista { display: flex; flex-direction: column; }
.v-tablero__fuga {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 6px; border-top: 1px solid var(--linea); border-radius: var(--radio-sm);
  transition: background .14s ease;
}
.v-tablero__fuga:hover { background: #F8FAFC; }
.v-tablero__fuga-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v-tablero__fuga-nombre { font-size: 13px; font-weight: 600; }
.v-tablero__fuga-menor {
  font-size: 11.5px; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------- leyendas ---------------- */
.v-tablero__leyenda {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 11px; color: var(--suave);
}
.v-tablero__pto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.v-tablero__leyenda > .v-tablero__pto:first-child { margin-left: 0; }
.v-tablero__pto--cyan { background: var(--cyan); }
.v-tablero__pto--ok { background: var(--ok); }
.v-tablero__pto--peligro { background: var(--peligro); }
.v-tablero__pto--suave { background: rgba(0, 141, 212, .3); }

/* ---------------- rendimiento del equipo ---------------- */
.v-tablero__persona { display: flex; flex-direction: column; min-width: 0; }
.v-tablero__persona .principal { font-weight: 600; }
.v-tablero__persona .menor { font-size: 11.5px; color: var(--suave); }
.v-tablero__col-barra { min-width: 176px; }
.v-tablero__col-barra .menor { display: block; margin-top: 5px; font-size: 11px; color: var(--suave); }
.v-tablero__meta { position: relative; overflow: hidden; }
.v-tablero__meta > span { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; }
.v-tablero__meta-proy { background: rgba(0, 141, 212, .38); }
.v-tablero__fila-total td { background: #FBFCFD; border-top: 2px solid var(--linea); }
.v-tablero__tabla-equipo { min-width: 760px; }
.v-tablero__tabla-equipo tbody tr:last-child td { border-bottom: 0; }
.v-tablero__tabla-equipo th:first-child,
.v-tablero__tabla-equipo td:first-child { min-width: 250px; }
.v-tablero__tabla-equipo .linea-flex { flex-wrap: nowrap; }
.v-tablero__persona .principal,
.v-tablero__persona .menor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- ficha rápida (se dibuja dentro del modal) ---------------- */
.v-tablero__ficha-nombre { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.v-tablero__ficha-nota { font-size: 12px; color: var(--suave); line-height: 1.5; margin-bottom: 6px; }
.v-tablero__ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.v-tablero__ficha dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--suave);
  margin-bottom: 2px;
}
.v-tablero__ficha dd { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------------- adaptación ---------------- */
@media (max-width: 1080px) {
  .v-tablero__par { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .v-tablero__kpis { grid-template-columns: minmax(0, 1fr); }
  .v-tablero__cifra { flex: 1 1 100%; }
  .v-tablero__agenda-quien { display: none; }
  .v-tablero__pie-embudo p { flex: 1 1 100%; }
}