/* Dashboard 2 - banco de pruebas de presentacion (experimental).
   Todo con prefijo d2- y SOLO tokens de styles.css: los tres temas
   (clasico / patfood / dark) funcionan sin tocar nada aca. */

#d2-root { display: flex; flex-direction: column; gap: 16px; }

.d2-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}

.d2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- seccion: tarjeta con numero rojo como el mockup ---------- */

.d2-seccion {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 16px 18px; box-shadow: var(--sombra);
}

.d2-titulo {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta); margin-bottom: 14px;
}

.d2-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primario-tenue); color: var(--primario);
  font-size: .8rem; font-weight: 700; letter-spacing: 0;
}

.d2-chip-suave {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--tinta-suave); font-size: .78rem;
}

.d2-sub {
  font-size: .8rem; font-weight: 700; color: var(--tinta);
  margin-bottom: 8px;
}

/* colores de tendencia (reusa la semantica sube/baja de la app; todo
   scopeado a #d2-root: lo experimental no pinta al resto del CIOS) */
.d2-celda-sub.sube, .d2-razon-var.sube, .d2-razon-flecha.sube,
.d2-card-avance.sube, #d2-root b.sube { color: var(--verde-tinta); }
.d2-celda-sub.baja, .d2-razon-var.baja, .d2-razon-flecha.baja,
.d2-card-avance.baja, #d2-root b.baja { color: var(--rojo); }

/* ---------- 1. estado del negocio ---------- */

.d2-estado {
  display: grid; gap: 12px;
  grid-template-columns: minmax(190px, 1.3fr) repeat(4, minmax(140px, 1fr));
  align-items: stretch;
}

.d2-estado-hero { display: flex; align-items: center; justify-content: center; }

.d2-celda {
  border-left: 1px solid var(--borde); padding: 4px 0 4px 16px;
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}

.d2-celda-titulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-suave);
}

.d2-celda-valor { font-size: 1.35rem; font-weight: 700; color: var(--tinta); }

.d2-celda-sub { font-size: .78rem; color: var(--tinta-suave); }

.d2-riesgo {
  align-self: flex-start; padding: 4px 14px; border-radius: 999px;
  font-size: .95rem; font-weight: 700;
}
.d2-riesgo.verde { background: var(--verde-bg); color: var(--verde-tinta); }
.d2-riesgo.ambar { background: var(--ambar-bg); color: var(--ambar-tinta); }
.d2-riesgo.rojo  { background: var(--rojo-bg);  color: var(--rojo); }

.d2-spark { width: 120px; height: 30px; margin-top: 2px; }

/* medidor semicircular */
.d2-gauge { text-align: center; }
.d2-gauge svg { width: 170px; height: 98px; }
.d2-gauge-valor { font-size: 26px; font-weight: 700; fill: var(--tinta); }
.d2-gauge-etiqueta {
  font-size: .78rem; color: var(--tinta-suave); margin-top: 2px;
  display: flex; flex-direction: column; gap: 2px;
}
.d2-gauge-etiqueta span { font-size: .72rem; }

/* ---------- 2. indicadores clave ---------- */

.d2-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.d2-card {
  border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px;
  background: var(--panel); display: flex; flex-direction: column; gap: 3px;
}

.d2-card-top {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 4px;
}

.d2-card-ico {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primario-tenue); color: var(--primario);
}
.d2-card-ico .ico { width: 15px; height: 15px; }

.d2-card-valor { font-size: 1.3rem; font-weight: 700; color: var(--tinta); }
.d2-card-obj { font-size: .76rem; color: var(--tinta-suave); }
.d2-card-avance { font-size: 1.05rem; font-weight: 700; }
.d2-card-pie {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
  font-size: .76rem; color: var(--tinta-suave);
  border-top: 1px dashed var(--borde); padding-top: 6px;
}

.d2-leyenda-sem {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
  font-size: .76rem; color: var(--tinta-suave);
}
.d2-leyenda-sem .punto { margin-right: 4px; }

/* ---------- 3. evolucion ---------- */

.d2-evo-wrap { position: relative; }
.d2-evo-wrap svg { width: 100%; height: auto; display: block; }

.d2-grid { stroke: var(--borde); stroke-width: 1; }
.d2-eje { font-size: 11px; fill: var(--tinta-suave); }
.d2-etq-fin { font-size: 12px; font-weight: 700; fill: var(--tinta); }

.d2-linea-actual {
  fill: none; stroke: var(--grafico-dato); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.d2-linea-obj {
  fill: none; stroke: var(--grafico-ref); stroke-width: 2;
  stroke-dasharray: 6 5;
}
.d2-linea-base {
  fill: none; stroke: var(--grafico-neutro); stroke-width: 2;
  stroke-dasharray: 2 4; stroke-linecap: round;
}
.d2-cursor { stroke: var(--grafico-ref); stroke-width: 1; stroke-dasharray: 3 3; }

.d2-evo-leyenda {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: .76rem; color: var(--tinta-suave);
}
.d2-sw {
  display: inline-block; width: 22px; height: 0; vertical-align: middle;
  border-top: 3px solid var(--grafico-dato); border-radius: 2px; margin-right: 5px;
}
.d2-sw.punteada.ref { border-top: 2px dashed var(--grafico-ref); }
.d2-sw.punteada.neutra { border-top: 2px dotted var(--grafico-neutro); }

.d2-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 8px 10px; font-size: .78rem;
  color: var(--tinta); box-shadow: var(--sombra-alta); line-height: 1.5;
  max-width: 240px;
}

.d2-tabla-det { margin-top: 10px; font-size: .8rem; }
.d2-tabla-det summary { cursor: pointer; color: var(--tinta-suave); }
.d2-tabla { margin-top: 8px; border-collapse: collapse; width: 100%; }
.d2-tabla th, .d2-tabla td {
  padding: 4px 10px; border-bottom: 1px solid var(--borde); text-align: left;
}
.d2-tabla th { background: var(--th-bg); font-size: .72rem; text-transform: uppercase; }
.d2-tabla td.num, .d2-rk-vend .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 4. diagnostico ---------- */

.d2-diag {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px;
  align-items: start;
}
.d2-diag-head { font-size: .88rem; color: var(--tinta); margin-bottom: 10px; }
.d2-diag-proy {
  border-left: 1px solid var(--borde); padding-left: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.d2-diag-proy .d2-sub { align-self: flex-start; }

.d2-razones { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.d2-razon {
  display: flex; align-items: center; gap: 10px; font-size: .84rem;
  padding: 5px 8px; border-radius: 8px; background: var(--hover-fila);
}
.d2-razon-flecha { font-size: .7rem; flex: none; }
.d2-razon-nombre { flex: 1; color: var(--tinta); }
.d2-razon-var { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 5. oportunidades ---------- */

.d2-ops {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.d2-op {
  border: 1px solid var(--borde); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
}
.d2-op-rank {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutro-bg); color: var(--tinta-suave);
  font-size: .78rem; font-weight: 700;
}
.d2-op-titulo { font-size: .82rem; font-weight: 700; color: var(--tinta); padding-right: 28px; }
.d2-op-valor { font-size: 1.5rem; font-weight: 700; color: var(--tinta); }
.d2-op-valor span { font-size: .8rem; font-weight: 500; color: var(--tinta-suave); }
.d2-op-valor.grande { font-size: 1.9rem; }
.d2-op-btn { margin-top: auto; }
.d2-op-total { background: var(--primario-tenue); border-color: var(--primario-tenue-borde); }

/* ---------- 6. torre de control ---------- */

.d2-torre-resumen {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: .8rem; color: var(--tinta-suave);
}
.d2-torre {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.d2-torre-tile {
  border: 1px solid var(--borde); border-left-width: 4px; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel);
}
.d2-torre-tile.verde { border-left-color: var(--verde); }
.d2-torre-tile.ambar { border-left-color: var(--ambar); }
.d2-torre-tile.rojo  { border-left-color: var(--rojo); }
.d2-torre-tile.neutro { border-left-color: var(--grafico-neutro); }

.d2-torre-cab { display: flex; align-items: center; gap: 8px; }
.d2-torre-luz { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.d2-torre-luz.verde { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-bg); }
.d2-torre-luz.ambar { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-bg); }
.d2-torre-luz.rojo  { background: var(--rojo);  box-shadow: 0 0 0 3px var(--rojo-bg); }
.d2-torre-luz.neutro { background: var(--grafico-neutro); }
.d2-torre-nombre { flex: 1; font-weight: 700; color: var(--tinta); }

.d2-torre-kg { font-size: 1.35rem; font-weight: 700; color: var(--tinta); }
.d2-torre-kg small { font-size: .78rem; font-weight: 500; color: var(--tinta-suave); }

.d2-torre-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: .78rem; border-top: 1px dashed var(--borde); padding-top: 8px;
  font-variant-numeric: tabular-nums;
}
.d2-torre-alerta { color: var(--rojo); font-weight: 600; }

/* ---------- 7. ranking de equipos ---------- */

.d2-rks { list-style: none; display: flex; flex-direction: column; gap: 4px; }

.d2-rk-fila {
  display: grid; width: 100%;
  grid-template-columns: 26px minmax(120px, 1.1fr) 2fr auto auto;
  align-items: center; gap: 12px; padding: 8px 10px;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; color: var(--tinta); text-align: left;
}
.d2-rk-fila:hover { background: var(--hover-fila); }

.d2-rk-pos {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutro-bg); color: var(--tinta-suave);
  font-size: .74rem; font-weight: 700;
}
.d2-rk-nombre { font-weight: 600; display: flex; flex-direction: column; }
.d2-rk-nombre small { font-weight: 400; color: var(--ambar-tinta); font-size: .72rem; }
.d2-rk-barra {
  height: 8px; border-radius: 4px; background: var(--neutro-bg); overflow: hidden;
}
.d2-rk-barra i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--grafico-dato); min-width: 2px;
}
.d2-rk-kg { font-variant-numeric: tabular-nums; font-size: .84rem; }

.d2-rk-detalle {
  list-style: none; margin: 2px 0 8px 48px; display: flex;
  flex-direction: column; gap: 2px;
}
.d2-rk-vend {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  font-size: .8rem; padding: 4px 10px; border-radius: 6px;
  background: var(--hover-fila); color: var(--tinta);
}

/* ---------- 7. senales ---------- */

.d2-senales { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.d2-senal {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-radius: 8px; font-size: .84rem; color: var(--tinta);
}
.d2-senal.rojo { background: var(--rojo-bg-suave); }
.d2-senal.ambar { background: var(--ambar-bg); }
.d2-senal-ico { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.d2-senal.rojo .d2-senal-ico { background: var(--rojo); }
.d2-senal.ambar .d2-senal-ico { background: var(--ambar); }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .d2-estado { grid-template-columns: 1fr 1fr; }
  .d2-estado-hero { grid-column: 1 / -1; }
  .d2-celda { border-left: 0; border-top: 1px solid var(--borde); padding: 10px 0 0; }
  .d2-diag { grid-template-columns: 1fr; }
  .d2-diag-proy { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde); padding-top: 14px; }
}

@media (max-width: 640px) {
  .d2-estado { grid-template-columns: 1fr; }
  .d2-rk-fila { grid-template-columns: 26px 1fr auto; }
  .d2-rk-barra { display: none; }
  .d2-rk-kg { display: none; }
}