/* Clientes (T6) — mockup aprobado por John (08/11/2026): evidencias/p10/mockup-clientes.html.
   Todo encerrado en #seccion-clientes para no tocar el resto del admin. Un solo azul; verde/rojo solo para subir/bajar. */
#seccion-clientes {
  --linea:#E7E9EE; --tinta:#0F172A; --tinta-2:#475467; --tinta-3:#667085; --apagado-fondo:#EEF0F3;
  --marca:#3B5BFD; --marca-suave:#ECF0FF; --marca-tinta:#2A3FC4;
  --bien:#15803D; --atencion:#B45309; --atencion-fondo:#FEF3C7; --problema:#B91C1C; --problema-fondo:#FEE2E2;
  max-width:1280px; color:var(--tinta); font-size:14px;
}
#seccion-clientes * { box-sizing:border-box; }
#seccion-clientes .cli-btn { font:inherit; font-size:13px; font-weight:600; border-radius:10px; padding:8px 14px; border:1px solid var(--linea); background:#fff; color:var(--tinta); cursor:pointer; }
#seccion-clientes .cli-btn:focus-visible, #seccion-clientes .cli-estados button:focus-visible { outline:3px solid var(--marca-suave); outline-offset:1px; }
#seccion-clientes .cli-estados { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
#seccion-clientes .cli-estados button { font:inherit; font-size:12px; padding:5px 12px; border-radius:999px; border:0; background:var(--apagado-fondo); color:var(--tinta-2); cursor:pointer; }
#seccion-clientes .cli-estados button.on { background:var(--marca-suave); color:var(--marca-tinta); font-weight:600; }
#seccion-clientes .cli-aviso { background:var(--atencion-fondo); color:var(--atencion); border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:16px; }
#seccion-clientes .cli-error { background:var(--problema-fondo); color:var(--problema); border-radius:10px; padding:12px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#seccion-clientes .cli-cargando { color:var(--tinta-3); padding:24px 0; }

/* Tarjetas por agencia */
#seccion-clientes .cli-ags { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
#seccion-clientes .cli-ag { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:16px; min-width:0; }
#seccion-clientes .cli-ag h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
#seccion-clientes .cli-grande { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
#seccion-clientes .cli-lin { display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--tinta-2); padding:3px 0; font-variant-numeric:tabular-nums; }
#seccion-clientes .cli-lin.cli-sep { border-top:1px solid var(--linea); margin-top:6px; padding-top:8px; }
#seccion-clientes .cli-barra { height:8px; border-radius:999px; overflow:hidden; background:var(--apagado-fondo); margin:8px 0 4px; }
#seccion-clientes .cli-barra i { display:block; height:100%; background:var(--marca); }
#seccion-clientes .cli-sube { color:var(--bien); font-weight:600; }
#seccion-clientes .cli-baja { color:var(--problema); font-weight:600; }
#seccion-clientes .cli-igual { color:var(--tinta-3); }

/* Tarjeta, tabla y gráfico */
#seccion-clientes .cli-tarjeta { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:16px; margin-bottom:16px; }
#seccion-clientes .cli-tarjeta h2 { font-size:15px; font-weight:600; margin:0 0 8px; }
#seccion-clientes .cli-explica { font-size:12px; color:var(--tinta-3); margin:8px 0 0; }
#seccion-clientes .cli-explica.cli-falta { color:var(--atencion); }
#seccion-clientes .cli-scroll { overflow-x:auto; }
#seccion-clientes .cli-t { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
#seccion-clientes .cli-t th { text-align:right; font-weight:500; color:var(--tinta-3); font-size:12px; padding:8px; border-bottom:1px solid var(--linea); white-space:nowrap; }
#seccion-clientes .cli-t td { text-align:right; padding:8px; border-bottom:1px solid var(--linea); white-space:nowrap; }
#seccion-clientes .cli-t th:first-child, #seccion-clientes .cli-t td:first-child { text-align:left; }
#seccion-clientes .cli-t td small { display:block; font-size:11px; color:var(--tinta-3); }
#seccion-clientes .cli-t td small.cli-curso { display:inline; }
#seccion-clientes .cli-t tfoot td { font-weight:700; border-top:2px solid var(--tinta); border-bottom:0; }
#seccion-clientes .cli-corto { display:none; }
#seccion-clientes .cli-barras { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:6px; align-items:end; height:150px; margin:12px 0 6px; }
#seccion-clientes .cli-col { display:flex; flex-direction:column-reverse; height:100%; }
#seccion-clientes .cli-col span { display:block; }
#seccion-clientes .cli-eje { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:6px; font-size:11px; color:var(--tinta-3); text-align:center; }
#seccion-clientes .cli-leyenda { display:flex; gap:14px; font-size:12px; color:var(--tinta-2); flex-wrap:wrap; margin-top:8px; }
#seccion-clientes .cli-leyenda span::before { content:''; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
#seccion-clientes .cli-c-MV, #seccion-clientes .cli-leyenda .cli-c-MV::before { background:#3B5BFD; }
#seccion-clientes .cli-c-EMV, #seccion-clientes .cli-leyenda .cli-c-EMV::before { background:#7C93FF; }
#seccion-clientes .cli-c-NVA, #seccion-clientes .cli-leyenda .cli-c-NVA::before { background:#B9C6FF; }
#seccion-clientes .cli-c-Moncion, #seccion-clientes .cli-leyenda .cli-c-Moncion::before { background:#24308F; }
#seccion-clientes .cli-leyenda span { background:none !important; }

@media (max-width:900px) {
  #seccion-clientes .cli-ags { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #seccion-clientes .cli-sec { display:none; }
  #seccion-clientes .cli-t th, #seccion-clientes .cli-t td { padding:7px 3px; font-size:12px; }
  #seccion-clientes .cli-tarjeta { padding:12px; }
  #seccion-clientes .cli-t td small { display:none; }
  #seccion-clientes .cli-t td small.cli-curso { display:none; }
  #seccion-clientes .cli-largo { display:none; }
  #seccion-clientes .cli-corto { display:inline; }
}

/* P14 L12 · Top, Segmentos y Para contactar */
#seccion-clientes .l12-filtros { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:12px; font-size:13px; color:var(--tinta-2); }
#seccion-clientes .l12-filtros select { font:inherit; padding:5px 8px; border:1px solid var(--linea); border-radius:8px; background:#fff; margin-left:4px; }
#seccion-clientes .l12-exp { margin-left:auto; }
#seccion-clientes .l12-t th.l12-izq, #seccion-clientes .l12-t td.l12-izq { text-align:left; }
#seccion-clientes .l12-t td.l12-n, #seccion-clientes .l12-t th.l12-n { text-align:right; color:var(--tinta-3); width:32px; }
#seccion-clientes .l12-pct { display:block; font-size:11px; color:var(--tinta-3); }
#seccion-clientes .l12-solo { background:#101828; color:#fff; border-radius:6px; padding:1px 6px; font-size:11px; font-weight:600; vertical-align:middle; }
#seccion-clientes .cli-nd { color:var(--tinta-3); }