/* Integraciones (web/integraciones.js, encargo 201). Solo tokens de mando.css: sigue el tema claro/oscuro sin colores
   propios. La rejilla y la hoja son las compartidas (rejilla-hoja.css); aquí va lo propio: los tres números, las tablas
   de costos e IA y las barras. */
.integraciones .home-head{margin-bottom:18px}
.ig-medido{font-size:.9375rem;font-weight:600;color:var(--tinta-2)}

/* ---- Los tres números (abren lo que cuentan) ---- */
.ig-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1280px;margin:0 auto 22px}
.ig-kpi{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico tit" "val val" "sub sub";align-items:center;gap:4px 10px;min-height:120px;padding:16px 18px;text-align:left;font:inherit;
  color:var(--tinta);background:var(--tarjeta);border:1px solid var(--linea);border-radius:20px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.2,.8,.2,1)}
.ig-kpi:hover{border-color:var(--tinta-2);box-shadow:0 12px 26px -18px rgba(var(--sombra-rgb),.6);transform:translateY(-1px)}
.ig-kpi:active{transform:scale(.98)}
.ig-kpi:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.ig-kpi .i3d{grid-area:ico;width:36px;height:36px}
.ig-kpi-t{grid-area:tit;font-weight:700;font-size:.9375rem;color:var(--tinta-2)}
.ig-kpi b{grid-area:val;font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.15;overflow-wrap:anywhere}
.ig-kpi small{grid-area:sub;font-size:.875rem;font-weight:600;color:var(--tinta-2);line-height:1.3}
.ig-rj{max-width:1280px;margin:0 auto}
.ig-rj-hoja{margin-bottom:6px}

/* ---- Hoja de una integración ---- */
.ig-chips,.ig-llaves{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ig-llaves{margin:10px 0 0}
.ig-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--papel-2);color:var(--tinta);font-size:.875rem;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
a.ig-chip{min-height:44px;border:1px solid var(--linea);background:var(--tarjeta)}
a.ig-chip:hover{border-color:var(--tinta-2)}
.ig-chip.falta{background:var(--chip-naranja-suave);color:var(--chip-naranja-tinta)}
.ig-nota{margin:12px 0 0;font-size:.9375rem;color:var(--tinta-2);line-height:1.45}
/* Sin WireGuard la hoja de una integración solo trae estado y última vez; lo demás, tras «Enciende la VPN» (encargo 205). */
.hj-cont .es-kv + .vpnwall{margin-top:16px}
.ig-nota code{font-size:.875rem}
.ig-ev,.ig-pasos{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.9375rem;line-height:1.45}
.ig-pasos{overflow-wrap:anywhere}
.ig-falta{margin:0 0 8px;font-size:.9375rem;font-weight:600}
.ig-acciones{display:flex;align-items:center;gap:8px;margin-top:16px}
.ig-acciones .btn{min-height:44px}
.ig-pie{margin:16px 0 0;font-size:.9375rem}
.ig-pie a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);font-weight:600}

/* ---- Totales y tablas ---- */
.ig-totales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
.ig-total{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:var(--tarjeta);border:1px solid var(--linea);min-width:0}
.ig-total span{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:700;color:var(--tinta-2)}
.ig-total b{font-family:var(--display);font-weight:800;font-size:1.375rem;line-height:1.2;overflow-wrap:anywhere}
.ig-total small{font-size:.875rem;color:var(--tinta-2);font-weight:600}
.ig-total.ig-est{border-style:dashed}
.ig-tabla{width:100%;border-collapse:collapse;font-size:.9375rem;margin:6px 0 4px;table-layout:fixed}
.ig-tabla thead th{text-align:left;font-weight:700;font-size:.875rem;color:var(--tinta-2);padding:8px 6px;border-bottom:1px solid var(--linea)}
.ig-tabla thead th:not(:first-child){width:27%;text-align:right}
.ig-tabla-3 thead th:not(:first-child){width:23%}
.ig-tabla tbody th{text-align:left;font-weight:600;padding:10px 6px;border-bottom:1px solid var(--linea);vertical-align:top}
.ig-tabla td{padding:10px 6px;border-bottom:1px solid var(--linea);vertical-align:top;text-align:right;overflow-wrap:anywhere}
.ig-concepto{display:block;overflow-wrap:anywhere}
.ig-uso{display:block;margin-top:2px;font-weight:500;font-size:.875rem;color:var(--tinta-2);overflow-wrap:anywhere}
.ig-monto{font-variant-numeric:tabular-nums;font-weight:700}
.ig-fuente{margin-top:2px;font-weight:500}
.ig-fuente summary{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:600;color:var(--tinta-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ig-fuente p{margin:0 0 6px;font-size:.875rem;color:var(--tinta-2);line-height:1.45}
.ig-cert{display:table;margin:6px 0 0 auto;padding:3px 10px;border-radius:999px;font-size:.875rem;font-weight:700;background:var(--chip-gris-suave);color:var(--chip-gris-tinta);white-space:nowrap}
.ig-cert[data-c="confirmado"],.ig-cert[data-c="gratis"]{background:var(--ok-suave);color:var(--ok-tinta)}
.ig-cert[data-c="por_confirmar"]{background:var(--chip-naranja-suave);color:var(--chip-naranja-tinta)}
.ig-cert[data-c="por_conectar"]{background:var(--chip-azul-suave);color:var(--chip-azul-tinta)}
.ig-proy{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--tinta);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.ig-proy:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;border-radius:6px}
.ig-usar[data-e="sin_medir"],.ig-usar[data-e="sin_detectar"]{font-weight:600;color:var(--tinta-2)}
.ig-usar[data-e="medido"]{font-variant-numeric:tabular-nums;font-weight:700}
.ig-vent{margin:0 0 12px;max-width:none}
.ig-sinmedir{margin:0 0 10px;padding:12px 14px;border-radius:14px;border:2px dashed var(--chip-naranja-filo);background:var(--chip-naranja-suave);color:var(--chip-naranja-tinta);font-size:.9375rem;line-height:1.45}
.ig-sinmedir[data-e="sin_detectar"]{border-color:var(--linea);background:var(--tarjeta);color:var(--tinta-2)}
.ig-cuenta+.ig-cuenta{margin-top:22px;padding-top:6px;border-top:1px solid var(--linea)}

/* ---- Barras: una serie, un color; el valor en la punta; texto en tinta, nunca en el color del dato ---- */
.ig-grafica{position:relative;margin:4px 0 10px;min-width:0}
.ig-barras{display:block;max-width:100%;overflow:visible}
.ig-eje{stroke:var(--linea);stroke-width:1}
.ig-barra{fill:var(--ig-barra)}
.ig-toque{fill:transparent}
.ig-nombre{font-size:14px;font-weight:600;fill:var(--tinta)}
.ig-valor{font-size:14px;font-weight:700;fill:var(--tinta-2);font-variant-numeric:tabular-nums}
.ig-fila{outline:none;cursor:default}
.ig-fila:hover .ig-barra,.ig-fila:focus-visible .ig-barra{filter:brightness(1.18)}
.ig-fila:focus-visible .ig-toque{stroke:var(--tinta);stroke-width:2}
.ig-fila:hover .ig-valor,.ig-fila:focus-visible .ig-valor{fill:var(--tinta)}
.ig-tip{position:absolute;z-index:2;max-width:220px;padding:8px 12px;border-radius:12px;background:var(--tinta);color:var(--sobre-tinta);font-size:.875rem;line-height:1.35;pointer-events:none;box-shadow:0 12px 24px -12px rgba(var(--sombra-rgb),.6)}
.ig-tip b{display:block;font-size:.9375rem}
.ig-tip[hidden]{display:none}

@media (max-width:820px){
  .ig-kpis{grid-template-columns:1fr;gap:8px}
  .ig-kpi{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico tit val" "ico sub sub";min-height:76px;padding:12px 14px;border-radius:16px}
  .ig-kpi b{font-size:1.25rem;text-align:right}
}
@media (max-width:520px){
  .ig-totales{grid-template-columns:1fr}
  .ig-tabla thead th:not(:first-child){width:36%}
  .ig-tabla-3 thead th:not(:first-child),.ig-tabla-ia thead th:not(:first-child){width:28%}
}
@media (prefers-reduced-motion:reduce){
  .ig-kpi,.ig-kpi:hover,.ig-kpi:active{transition:none;transform:none}
}