/* Role theming: applied to BODY as role-ADMIN, role-JEFA, role-CAPTADOR, role-ABOGADO, role-VENTAS
   Objetivo:
   - Que el cambio de rol sea visible inmediatamente (accent/botón/inputs)
   - Mantener overlay premium (flash) + gradientes por rol
*/

body.role-ADMIN{
  --primary:#7aa7ff;
  --primary2:#7bffd6;

  /* Vincula el tema UI al rol */
  --accent: var(--primary);
  --accent2: var(--primary2);
  --focusRing: rgba(122,167,255,.22);
}
body[data-role="ADMIN"]{
  --primary:#7aa7ff;
  --primary2:#7bffd6;

  /* Vincula el tema UI al rol */
  --accent: var(--primary);
  --accent2: var(--primary2);
  --focusRing: rgba(122,167,255,.22);
}

body.role-JEFA{
  --primary:#c49bff;
  --primary2:#7aa7ff;

  --accent: var(--primary);
  --accent2: var(--primary2);
  --focusRing: rgba(196,155,255,.22);
}
body[data-role="JEFA"]{
  --primary:#c49bff;
  --primary2:#7aa7ff;

  --accent: var(--primary);
  --accent2: var(--primary2);
  --focusRing: rgba(196,155,255,.22);
}

body.role-CAPTADOR{
  --primary:#7bffd6;
  --primary2:#ffcf5a;

  --accent: #0F766E;  /* más “legaltech” que el verde muy brillante */
  --accent2: var(--primary2);
  --focusRing: rgba(123,255,214,.18);
}
body[data-role="CAPTADOR"]{
  --primary:#7bffd6;
  --primary2:#ffcf5a;

  --accent: #0F766E;  /* más “legaltech” que el verde muy brillante */
  --accent2: var(--primary2);
  --focusRing: rgba(123,255,214,.18);
}

/* ✅ Abogado: plomo/negro premium (sin “amarillos”) */
body.role-ABOGADO{
  --primary:#111827;
  --primary2:#6b7280;

  --accent: #111827;
  --accent2:#374151;
  --focusRing: rgba(148,163,184,.16);
}
body[data-role="ABOGADO"]{
  --primary:#111827;
  --primary2:#6b7280;

  --accent: #111827;
  --accent2:#374151;
  --focusRing: rgba(148,163,184,.16);
}

body.role-VENTAS{
  --primary:#ff6b6b;
  --primary2:#ffcf5a;

  --accent: #EA580C;
  --accent2:#FB923C;
  --focusRing: rgba(234,88,12,.18);
}
body[data-role="VENTAS"]{
  --primary:#ff6b6b;
  --primary2:#ffcf5a;

  --accent: #EA580C;
  --accent2:#FB923C;
  --focusRing: rgba(234,88,12,.18);
}

/* Botón: sombra se adapta al rol (si el CSS base usa rgba fijo, lo “corrige” acá) */
body.role-ADMIN  .btn{ box-shadow: 0 20px 46px rgba(122,167,255,.34); }
body.role-JEFA   .btn{ box-shadow: 0 20px 46px rgba(196,155,255,.32); }
body.role-CAPTADOR .btn{ box-shadow: 0 20px 46px rgba(15,118,110,.28); }
body.role-ABOGADO .btn{ box-shadow: 0 20px 46px rgba(2,6,23,.55); }
body.role-VENTAS .btn{ box-shadow: 0 20px 46px rgba(234,88,12,.30); }

/* Inputs: borde/hover con color del rol (sutil) */
body.role-ADMIN  .input:focus{ border-color: rgba(122,167,255,.70) !important; }
body.role-JEFA   .input:focus{ border-color: rgba(196,155,255,.70) !important; }
body.role-CAPTADOR .input:focus{ border-color: rgba(15,118,110,.55) !important; }
body.role-VENTAS .input:focus{ border-color: rgba(234,88,12,.60) !important; }

/* Overlays por rol (flash) */
body.role-ADMIN .role-overlay{
  background:
    radial-gradient(900px 600px at 25% 15%, rgba(122,167,255,.30), transparent 62%),
    radial-gradient(900px 600px at 75% 15%, rgba(123,255,214,.20), transparent 62%);
}
body.role-JEFA .role-overlay{
  background:
    radial-gradient(900px 600px at 25% 15%, rgba(196,155,255,.30), transparent 62%),
    radial-gradient(900px 600px at 75% 15%, rgba(122,167,255,.18), transparent 62%);
}
body.role-CAPTADOR .role-overlay{
  background:
    radial-gradient(900px 600px at 25% 15%, rgba(123,255,214,.24), transparent 62%),
    radial-gradient(900px 600px at 75% 15%, rgba(255,207,90,.18), transparent 62%);
}

/* ✅ Abogado: overlay plomo/negro */
body.role-ABOGADO .role-overlay{
  background:
    radial-gradient(900px 600px at 25% 15%, rgba(17,24,39,.40), transparent 62%),
    radial-gradient(900px 600px at 75% 15%, rgba(107,114,128,.26), transparent 62%);
}

body.role-VENTAS .role-overlay{
  background:
    radial-gradient(900px 600px at 25% 15%, rgba(234,88,12,.24), transparent 62%),
    radial-gradient(900px 600px at 75% 15%, rgba(255,207,90,.18), transparent 62%);
}


/* ABOGADO_FORM_FIX — inputs legibles en dark + date/time icons */
body.role-ABOGADO input,
body.role-ABOGADO select,
body.role-ABOGADO textarea{
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(148,163,184,.22) !important;
}
body.role-ABOGADO input::placeholder,
body.role-ABOGADO textarea::placeholder{
  color: rgba(226,232,240,.58) !important;
}
body.role-ABOGADO input:focus,
body.role-ABOGADO select:focus,
body.role-ABOGADO textarea:focus{
  outline: none !important;
  border-color: rgba(125,211,252,.45) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18) !important;
}
body.role-ABOGADO input{
  caret-color: #e5e7eb !important;
}
/* Chrome autofill */
body.role-ABOGADO input:-webkit-autofill,
body.role-ABOGADO textarea:-webkit-autofill,
body.role-ABOGADO select:-webkit-autofill{
  -webkit-text-fill-color:#e5e7eb !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px #0b1220 inset !important;
}
/* date/time pickers */
body.role-ABOGADO input[type="date"],
body.role-ABOGADO input[type="datetime-local"],
body.role-ABOGADO input[type="time"]{
  color-scheme: dark;
}

/* ===== ABOGADO: modal footer y botones coherentes (evita estilos claros de Bootstrap) ===== */
body.role-ABOGADO .modal-foot,
body[data-role="ABOGADO"] .modal-foot,
body.role-ABOGADO .modal-footer,
body[data-role="ABOGADO"] .modal-footer{
  background: rgba(10,14,22,.88) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

body.role-ABOGADO .modal-foot .btn,
body[data-role="ABOGADO"] .modal-foot .btn,
body.role-ABOGADO .modal-footer .btn,
body[data-role="ABOGADO"] .modal-footer .btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

body.role-ABOGADO .modal-foot .btn:hover,
body[data-role="ABOGADO"] .modal-foot .btn:hover,
body.role-ABOGADO .modal-footer .btn:hover,
body[data-role="ABOGADO"] .modal-footer .btn:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}

body.role-ABOGADO .modal-foot .btn.primary,
body[data-role="ABOGADO"] .modal-foot .btn.primary,
body.role-ABOGADO .modal-foot .btn-primary,
body[data-role="ABOGADO"] .modal-foot .btn-primary,
body.role-ABOGADO .modal-footer .btn.primary,
body[data-role="ABOGADO"] .modal-footer .btn.primary,
body.role-ABOGADO .modal-footer .btn-primary,
body[data-role="ABOGADO"] .modal-footer .btn-primary{
  background: color-mix(in oklab, var(--accent) 22%, transparent) !important;
  border-color: color-mix(in oklab, var(--accent) 40%, transparent) !important;
}

/* ABOGADO: evita toolbar clara (prueba03.css) en modales/acciones */
body.role-ABOGADO .toolbar{
  background: rgba(10,14,22,.72) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Role-specific module descriptions (no JS logic) */
.roleCopy [data-role]{ display:none; }
body.role-ADMIN .roleCopy [data-role="ADMIN"]{ display:block; }
body.role-JEFA .roleCopy [data-role="JEFA"]{ display:block; }
body.role-CAPTADOR .roleCopy [data-role="CAPTADOR"]{ display:block; }
body.role-VENTAS .roleCopy [data-role="VENTAS"]{ display:block; }
body.role-ABOGADO .roleCopy [data-role="ABOGADO"]{ display:block; }

/* Ensure muted role copy reads well on dark */
body.role-ABOGADO .roleCopy{ color: rgba(255,255,255,.72); }


/* Reportes: barras simples + estado pill */
.bars{display:flex;flex-direction:column;gap:8px}
.barRow{display:grid;grid-template-columns:140px 1fr 90px;gap:10px;align-items:center}
.barLabel{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barTrack{height:10px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden}
body:not(.role-ABOGADO) .barTrack{background:rgba(0,0,0,.08)}
.barFill{height:10px;background:var(--accent, #4b7fff);border-radius:999px}
.barVal{font-size:12px;opacity:.9;text-align:right;white-space:nowrap}

.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:11px}
body:not(.role-ABOGADO) .pill{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08)}