/* Capacidad instalada (capacidadInstalada.php). Usa también ventasPorCanal.css (tarjetas, tablas, colores --vc-*). */
.ci {
  /* Rampa secuencial azul (paleta de referencia) para el mapa; estado crítico para "rebasa la capacidad" */
  --ci-r100: #cde2fb; --ci-r200: #9ec5f4; --ci-r300: #6da7ec; --ci-r400: #3987e5;
  --ci-r500: #256abf; --ci-r600: #184f95; --ci-r700: #0d366b;
  --ci-critico: #d03b3b;
}

.ci-semana { display: flex; gap: 4px; }
.ci-semana input { min-width: 0; }

/* Configuración */
.ci-config-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ci-config-acciones { display: flex; align-items: center; gap: 10px; }
.ci-tabs { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--vc-borde); }
.ci-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 12px; color: var(--vc-texto-2); font-weight: 600; margin-bottom: -1px; }
.ci-tabs button.activo { color: var(--vc-s1); border-bottom-color: var(--vc-s1); }
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.ci-grid label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; font-weight: 600; color: var(--vc-texto-2); }
.ci-grid label small { font-weight: 400; color: var(--vc-muted); line-height: 1.2; }
.ci-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ci-dos h5 { margin: 0 0 6px; font-weight: 700; }
.ci-config .vc-tabla input[type="number"] { width: 90px; height: 28px; padding: 2px 6px; text-align: right; }
.ci-config .vc-tabla .select2-container { min-width: 260px; }
.ci-config [hidden] { display: none !important; }

.ci-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ci-card-head .vc-titulo { margin: 0; }

/* Mapa semana: horas × días */
.ci-mapa { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: 100%; }
.ci-mapa th { font-size: 11px; color: var(--vc-texto-2); font-weight: 600; text-align: center; padding: 4px 6px; white-space: nowrap; }
.ci-mapa thead th { cursor: pointer; border-radius: 4px; }
.ci-mapa thead th:hover, .ci-mapa thead th.sel { background: var(--vc-grupo); color: var(--vc-texto); }
.ci-mapa thead th.sel { box-shadow: inset 0 -2px 0 var(--vc-s1); }
.ci-mapa th.hora { text-align: right; width: 56px; }
.ci-mapa td { height: 30px; min-width: 70px; text-align: center; border-radius: 3px; font-variant-numeric: tabular-nums; cursor: pointer; background: #f2f3f4; color: var(--vc-texto); }
.ci-mapa td:hover { outline: 2px solid var(--vc-texto); outline-offset: -2px; }
.ci-mapa td.vacia { color: var(--vc-muted); background: #f7f8f9; }
.ci-mapa td.oscura { color: #fff; }
.ci-mapa td.rebasa { background: var(--ci-critico); color: #fff; font-weight: 700; }
.ci-mapa tfoot th { border-top: 1px solid var(--vc-borde); }
.ci-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--vc-texto-2); }
.ci-escala .rampa { display: inline-flex; border-radius: 3px; overflow: hidden; }
.ci-escala .rampa span { width: 22px; height: 10px; }
.ci-escala .chip { display: inline-flex; align-items: center; gap: 4px; }
.ci-escala .chip i.sw { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }

/* Gráfica del día */
.ci-grafica { margin-bottom: 12px; }
.ci-grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.ci-grafica .eje text { font-size: 11px; fill: var(--vc-texto-2); }
.ci-grafica .rejilla line { stroke: var(--vc-borde-2); }
.ci-grafica .base { stroke: var(--vc-borde); }
.ci-grafica .cruz { stroke: var(--vc-texto-2); stroke-width: 1; }
.ci-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--vc-texto-2); margin-bottom: 6px; }
.ci-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ci-leyenda i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; }
.ci-leyenda i.punteada { border-top-style: dashed; }
.ci-leyenda i.barra { height: 10px; border: 0; border-radius: 2px; }

/* Tablas del día y de áreas */
.vc-tabla td.rebasa { color: var(--vc-texto); font-weight: 700; }
.vc-tabla td.rebasa::before { content: "\f071"; font-family: FontAwesome; color: var(--ci-critico); margin-right: 4px; }
.vc-tabla .perdida { color: var(--vc-texto-2); }
.ci .vc-tabla td.sub { font-size: 11px; color: var(--vc-muted); }

/* Selector del mapa: en pantallas angostas se parte en dos renglones en vez de salirse */
.ci .ci-card-head .vc-segmento { flex-wrap: wrap; max-width: 100%; }