/* Ventas por canal (ventasPorCanal.php). Base visual: ../catalogosAsucursales/platillos.css (.pl). */
.vc {
  --vc-surface: var(--pl-surface);
  --vc-borde: var(--pl-borde);
  --vc-borde-2: var(--pl-borde-2);
  --vc-texto: var(--pl-texto);
  --vc-texto-2: var(--pl-texto-2);
  --vc-muted: var(--pl-muted);
  --vc-acento: var(--pl-acento);
  --vc-acento-suave: var(--pl-acento-suave);
  --vc-grupo: #f7f9fc;
  /* Colores de serie (paleta categórica validada: CVD y visión normal, pares adyacentes y cierre de la dona).
     Cada entidad tiene SIEMPRE su color: no depende del orden ni del filtro. */
  --vc-s1: #2a78d6;   /* azul: Mesa / Entradas */
  --vc-s2: #eb6834;   /* naranja: Llevar / Platos fuertes / Cocina */
  --vc-s3: #1baf7a;   /* aqua: Domicilio / Bebidas */
  --vc-s4: #eda100;   /* amarillo: Uber / Postres */
  --vc-s5: #e87ba4;   /* magenta: Rappi */
  --vc-s6: #008300;   /* verde: Delibot */
  --vc-s7: #4a3aa7;   /* violeta: Delivery / Barra / otros grupos */
  --vc-neutro: #6f6d66; /* Sin asignar / Sin grupo / Otros (gris oscuro: el claro se confunde con el magenta) */
  color: var(--vc-texto);
}

.vc [hidden] { display: none !important; }
.demo, #demo-setting { display: none !important; }

.vc .vc-muted { color: var(--vc-muted); }
.vc-head.pl-head { display: block; }
.vc-head .page-title { margin: 0 0 4px; }

.vc-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-borde);
  border-radius: var(--pl-radio);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.vc-titulo { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--vc-texto); }
.vc-titulo small { font-weight: 400; margin-left: 6px; font-size: 12px; }
.vc-nota { margin: 10px 0 0; font-size: 11px; }

/* Filtros y barra de la vista (campos, botones y select2 los da platillos.css) */
.vc-filtros, .vc-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; }
.vc-campo { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.vc-campo > label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vc-muted); }
/* select2 de varias sucursales (platillos.css solo trae el sencillo) */
.vc .select2-container .select2-selection--multiple { min-height: 36px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; }
.vc .select2-container--focus .select2-selection--multiple, .vc .select2-container--open .select2-selection--multiple { border-color: var(--vc-acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.vc .select2-selection--multiple .select2-selection__rendered { padding: 3px 6px !important; }
.vc .select2-selection--multiple .select2-selection__choice { position: relative; margin: 3px 4px 0 0 !important; padding: 1px 22px 1px 9px !important; border: 1px solid #c7d7fb !important; border-radius: 999px !important; background: var(--vc-acento-suave) !important; color: var(--vc-acento) !important; font-size: 12px; font-weight: 600; }
/* SmartAdmin la pone absoluta a la derecha: se le deja espacio en la etiqueta */
.vc .select2-selection--multiple .select2-selection__choice__remove { top: 50% !important; right: 4px !important; transform: translateY(-50%); padding: 0 !important; min-width: 0 !important; min-height: 0 !important; color: var(--vc-acento) !important; opacity: .7; }
.vc .select2-selection--multiple .select2-selection__choice__remove:hover { background: none !important; opacity: 1; }
.vc .select2-selection--multiple .select2-selection__choice__remove::before { font-size: 13px; }
.vc .select2-selection--multiple .select2-search__field { margin-top: 5px !important; font-size: 13px; }
.vc-campo-suc { flex: 1 1 320px; max-width: 560px; }
.vc-campo-buscar { flex: 1 1 200px; max-width: 280px; }
.vc-campo-vista-suc { min-width: 220px; }
.vc-campo-btn { flex-direction: row; align-self: flex-end; gap: 6px; }
.vc-atajos { display: flex; flex-wrap: wrap; gap: 4px; }

.vc-segmento { display: inline-flex; height: 36px; border: 1px solid #d5dce6; border-radius: 6px; overflow: hidden; background: #fff; }
.vc-segmento label { display: flex; align-items: center; position: relative; margin: 0; padding: 0 14px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--vc-texto-2); white-space: nowrap; }
.vc-segmento label + label { border-left: 1px solid #d5dce6; }
.vc-segmento input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.vc-segmento label.sel { background: var(--vc-acento-suave); color: var(--vc-acento); }
.vc-segmento label:focus-within { outline: 2px solid var(--vc-acento); outline-offset: -2px; }

/* Avisos */
.vc-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-radius: var(--pl-radio); margin-bottom: 10px;
  border: 1px solid #f6d7a7; background: var(--pl-alerta-suave); color: var(--pl-alerta);
}
.vc-aviso .fa { margin-top: 3px; }
.vc-aviso.error { border-color: #f5c2c2; background: var(--pl-peligro-suave); color: var(--pl-peligro); }
.vc-vacio { text-align: center; padding: 40px 16px; color: var(--vc-muted); }
.vc-vacio .fa { font-size: 36px; margin-bottom: 10px; color: #cbd5e1; }

/* KPIs por canal (como .pl-stat) */
.vc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.vc-kpi { --k: #94a3b8; position: relative; background: var(--vc-surface); border: 1px solid var(--vc-borde); border-radius: var(--pl-radio); padding: 12px 16px 12px 18px; }
.vc-kpi::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.vc-kpi .et { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vc-muted); }
.vc-kpi .val { margin-top: 2px; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--vc-texto); font-variant-numeric: tabular-nums; }
.vc-kpi .sub { margin-top: 2px; font-size: 12px; color: var(--vc-texto-2); font-variant-numeric: tabular-nums; }
.vc-kpi .barra-pct { height: 4px; background: var(--vc-borde-2); border-radius: 2px; margin-top: 8px; }
.vc-kpi .barra-pct > div { height: 4px; background: var(--vc-acento); border-radius: 2px; }
.vc-kpi.total { --k: var(--vc-acento); }

/* Tablas */
.vc-tabla-wrap { overflow-x: auto; }
.vc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.vc-tabla th, .vc-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--vc-borde-2); white-space: nowrap; }
.vc-tabla thead th { padding: 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vc-muted); background: #fbfcfd; border-bottom: 1px solid var(--vc-borde); position: sticky; top: 0; }
.vc-tabla tbody tr:hover td { background: #fafbfe; }
.vc-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.vc-tabla .total { font-weight: 700; background: #fafbfc; }
.vc-tabla td.cero { color: #c9ced4; }
.vc-tabla tr.grupo td { background: var(--vc-grupo); font-weight: 700; cursor: pointer; }
.vc-tabla tr.grupo:hover td { background: #eef1f4; }
.vc-tabla tr.grupo .fa { width: 12px; color: var(--vc-texto-2); }
.vc-tabla tr.platillo td:first-child { padding-left: 30px; }
.vc-tabla tr.pie td { font-weight: 700; border-top: 2px solid var(--vc-borde); border-bottom: 0; }
.vc-tabla td.nombre { white-space: normal; min-width: 180px; }

/* Área: punto con el color de la serie (mismo que en la dona) y texto en tinta normal */
.vc-area { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--vc-texto-2); white-space: nowrap; }
.vc-area::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-neutro); }
.vc-area.barra::before { background: var(--vc-s7); }
.vc-area.cocina::before { background: var(--vc-s2); }

/* Donas de participación */
.vc-donas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; }
.vc-dona { margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Una dona por canal (small multiples): tarjetas más angostas, leyenda debajo */
.vc-donas-chicas { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vc-donas-chicas .vc-dona { border: 1px solid var(--vc-borde-2); border-radius: 6px; padding: 10px; }
.vc-donas-chicas .vc-leyenda { flex-basis: 100%; min-width: 0; }
.vc-dona figcaption { font-size: 12px; font-weight: 700; color: var(--vc-texto-2); }
/* La leyenda baja debajo de la dona cuando no caben lado a lado (nombres sin recortar) */
.vc-dona-cuerpo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.vc-dona svg { flex: 0 0 auto; overflow: visible; }
.vc-dona svg path { cursor: pointer; transition: opacity .15s; }
.vc-dona.enfoque svg path:not(.activo) { opacity: .25; }
.vc-dona .centro-val { font-size: 15px; font-weight: 700; fill: var(--vc-texto); font-variant-numeric: tabular-nums; }
.vc-dona .centro-et { font-size: 10px; fill: var(--vc-muted); }
.vc-dona .vacia { fill: none; stroke: var(--vc-borde-2); }
.vc-leyenda { list-style: none; margin: 0; padding: 0; flex: 1 1 190px; min-width: 190px; font-size: 12px; }
.vc-leyenda li { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; cursor: default; }
.vc-leyenda li:hover, .vc-leyenda li.activo { background: var(--vc-grupo); }
.vc-leyenda .sw { width: 10px; height: 10px; border-radius: 2px; }
.vc-leyenda .nom { color: var(--vc-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-leyenda .val { color: var(--vc-texto-2); text-align: right; font-variant-numeric: tabular-nums; }
.vc-leyenda .pct { color: var(--vc-texto); font-weight: 700; text-align: right; min-width: 44px; font-variant-numeric: tabular-nums; }
.vc-dona-vacia { color: var(--vc-muted); font-size: 12px; padding: 20px 0; }
.vc-tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: #1f2328; color: #fff; border-radius: 4px; padding: 6px 10px; font-size: 12px; line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); white-space: nowrap;
}
.vc-tooltip b { font-variant-numeric: tabular-nums; }

/* Impresoras */
.vc-imp-suc { margin-bottom: 14px; }
.vc-imp-suc:last-child { margin-bottom: 0; }
.vc-imp-suc h5 { margin: 0 0 6px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-imp-suc select, .pl .vc-imp-suc select.form-control { height: 30px !important; padding: 3px 8px; font-size: 12px !important; min-width: 130px; }
.vc-imp-estado { font-size: 11px; font-weight: 400; }
.vc-pred { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--vc-acento-suave); color: var(--vc-acento); font-size: 10px; font-weight: 600; }

@media (max-width: 767px) {
  #content.pl { padding: 14px 12px 32px; }
  .vc-campo-suc, .vc-campo-buscar { max-width: none; flex-basis: 100%; }
  .vc-segmento label { padding: 0 8px; }
}