/* ═══════════════════════════════════════════════════════════
   Lumanet UI — lenguaje visual común del CRM
   Tomado del módulo ENACOM. Cambiar acá afecta a todo el CRM.
   ═══════════════════════════════════════════════════════════ */
:root{
  --lum-acento:#0891b2;
  --lum-acento-osc:#0e7490;
  --lum-texto:#0f172a;
  --lum-texto-2:#64748b;
  --lum-texto-3:#94a3b8;
  --lum-borde:#e2e8f0;
  --lum-fondo:#fafafa;
  --lum-rojo:#dc2626;
  --lum-verde:#059669;
}

/* ── Tarjetas de indicador ── */
.lum-kpis   { display:grid; gap:14px; }
.lum-kpis-2 { grid-template-columns:repeat(2,1fr); }
.lum-kpis-3 { grid-template-columns:repeat(3,1fr); }
.lum-kpis-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .lum-kpis-3,.lum-kpis-4{grid-template-columns:repeat(2,1fr)} }

.lum-kpi       { background:rgba(255,255,255,.9); backdrop-filter:blur(4px); border:1px solid var(--lum-borde); border-radius:14px; padding:16px 18px; transition:border-color .15s; }
.lum-kpi-top   { display:flex; align-items:center; justify-content:space-between; }
.lum-kpi-label { font-size:11px; font-weight:700; color:var(--lum-texto-2); text-transform:uppercase; letter-spacing:.05em; }
.lum-kpi-icon  { color:var(--lum-texto-3); font-size:15px; }
.lum-kpi-valor { font-size:24px; font-weight:700; color:var(--lum-texto); margin-top:8px; font-variant-numeric:tabular-nums; }
.lum-kpi-sub   { font-size:11px; color:var(--lum-texto-3); margin-top:3px; }

/* Valor con signo contable */
.lum-kpi-valor.debe  { color:var(--lum-rojo); }
.lum-kpi-valor.haber { color:var(--lum-verde); }

/* ── Variante destacada (fondo pleno) ── */
.lum-kpi-main .lum-kpi-valor { color:#374151; }

/* ── Tarjetas de contenido ── */
.lum-card        { background:rgba(255,255,255,.9); backdrop-filter:blur(4px); border:1px solid var(--lum-borde); border-radius:14px; overflow:hidden; }
.lum-card-titulo { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--lum-acento); text-transform:uppercase; letter-spacing:.06em; padding:13px 16px; border-bottom:1px solid var(--lum-borde); background:var(--lum-fondo); }
.lum-card-body   { padding:16px; }

/* ── Tablas ── */
.lum-table              { width:100%; border-collapse:collapse; }
.lum-table thead th     { font-size:10px; font-weight:700; color:var(--lum-texto-2); text-transform:uppercase; letter-spacing:.05em; padding:11px 14px; border-bottom:1px solid var(--lum-borde); text-align:left; background:var(--lum-fondo); }
.lum-table tbody td     { padding:11px 14px; border-bottom:1px solid #f1f5f9; font-size:13px; color:#374151; }
.lum-table tbody tr:hover { background:#ecfeff; }
.lum-table tfoot td     { padding:12px 14px; font-size:13px; font-weight:700; color:var(--lum-texto); background:#f8fafc; border-top:2px solid var(--lum-borde); }

/* ── Etiquetas ── */
.lum-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:700; color:#374151; white-space:nowrap; }
.lum-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ── Números: un solo criterio en todo el CRM ── */
.lum-num { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
#comp_arca_resumen              { font-variant-numeric:tabular-nums; }
#comp_arca_resumen strong       { font-weight:600; }
.lum-name { font-weight:600; color:#1e293b; font-size:13px; }
.lum-tag { display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:10px;font-weight:500;white-space:nowrap; }
.lum-sec { color:#64748b; }

/* ── Modales unificados ─────────────────────────────────────────── */
.u-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.35); backdrop-filter:blur(2px); z-index:9998; display:flex; align-items:center; justify-content:center; padding:16px; }
.u-modal-overlay.hidden { display:none; }
.u-modal { background:#fff; border-radius:16px; max-width:600px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 20px 50px rgba(15,23,42,.18); display:flex; flex-direction:column; }
.u-modal-md { max-width:560px; }
.u-modal-sm { max-width:440px; }
.u-modal-header { padding:10px 18px; background:linear-gradient(135deg,#0891b2,#0e7490); color:#fff; border-radius:16px 16px 0 0; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.u-modal-header h3 { font-size:14px; font-weight:600; margin:0; display:flex; align-items:center; gap:9px; color:#fff; }
.u-modal-header h3 i { color:rgba(255,255,255,.8); font-size:12px; }
.u-modal-header.amber { background:linear-gradient(135deg,#f59e0b,#d97706); }
.u-modal-header .u-modal-close { color:rgba(255,255,255,.75); background:transparent; border:none; cursor:pointer; padding:3px; font-size:15px; }
.u-modal-header .u-modal-close:hover { color:#fff; }
.u-modal-body { padding:20px; overflow:auto; }
.u-modal-footer { padding:12px 20px; border-top:1px solid #f1f5f9; display:flex; justify-content:flex-end; gap:10px; background:#fff; border-radius:0 0 16px 16px; flex-shrink:0; }

/* ── Desplegables (popover estándar) ────────────────────────────── */
.lum-pop { position:fixed; z-index:10001; background:#fff; border:1px solid #e8edf3; border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.15); padding:5px; min-width:180px; display:none; }
.lum-pop-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:12px; color:#374151; cursor:pointer; white-space:nowrap; }
.lum-pop-item:hover { background:#f1f5f9; }
.lum-pop-item.activo { color:#0e7490; }
.lum-pop-item i { font-size:8px; width:9px; color:transparent; }
.lum-pop-item.activo i { color:#0891b2; }
.lum-trigger { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.lum-trigger .fa-chevron-down { font-size:8px; color:#94a3b8; }


/* ═══════════════════════════════════════════════════════════════════════
   CRITERIO TIPOGRAFICO UNICO — no duplicar esto en el HTML de cada página.

   Antes cada pantalla redefinía sus propias clases dentro de su archivo, y
   como el estilo de la página pisa al del sistema, la misma cosa se veía
   distinta en cada tabla. Si hace falta un estilo nuevo, va acá.

   .lum-name  nombre de una persona o empresa
   .lum-num   cualquier número: id, dni, importe, ip, fecha
   .lum-sec   dato secundario, gris
   ═══════════════════════════════════════════════════════════════════════ */

/* Alias: las páginas viejas los usan y tienen que verse igual. */
.lc-name { font-weight:600; color:#1e293b; font-size:13px; }
.lc-sub  { font-size:10px; color:#94a3b8; display:block; }

/* El id de un cliente y el número de un comprobante son números: van con la
   tipografía de números del sistema, no con una monoespaciada aparte. */
.lc-id {
    font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    font-size:12.5px; font-weight:700; color:#475569;
}
/* Misma tipografía que la fecha de emisión —hereda el cuerpo de la tabla— pero
   en negrita: el número es lo que identifica el renglón. */
.comp-id {
    font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    font-weight:700; color:#475569;
}