:root{
  --bg: #0a0e1a;
  --bg2: #12182b;
  --card: rgba(255,255,255,.10);
  --card2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.18);
  --text: #ffffff;
  --muted: rgba(255,255,255,.75);
  --primary: #00f2fe;
  --primary2: #ff00ca;
  --accent: #ffcc00;
  --success: #39ff14;
  --warn: #ff8c00;
  --danger: #ff355e;
  --gradient1: linear-gradient(135deg, var(--primary), var(--primary2));
  --gradient2: linear-gradient(135deg, var(--primary2), #a029ff);
}

html,body{ height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(0,242,254,.45), transparent 70%),
    radial-gradient(1000px 600px at 85% 20%, rgba(255,0,202,.40), transparent 70%),
    radial-gradient(800px 500px at 50% 80%, rgba(255,204,0,.25), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  overflow-x: hidden;
  font-size: 16px; /* Base para rem */
}

a{ text-decoration:none; color: inherit; }

/* Contenedor principal responsivo */
.container-narrow{
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Glassmorphism cards */
.glass{
  background: var(--card);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 40px rgba(0,242,254,.15);
  transition: all 0.3s ease;
  padding: 1.5rem;
}
.glass:hover{
  transform: translateY(-4px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 60px rgba(0,242,254,.25);
}

.glass-soft{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 1.2rem;
  transition: all 0.3s ease;
}

.brand-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem .85rem; border-radius: 999px;
  border: 1px solid var(--primary);
  background: rgba(0,242,254,.18);
  color: #ffffff;
  font-weight:700;
  box-shadow: 0 0 20px rgba(0,242,254,.3);
  font-size: .9rem;
}

.btn-cti{
  background: var(--gradient1);
  border: 0;
  color: #ffffff;
  border-radius: 16px;
  padding: .75rem 1.5rem;
  font-weight: 700;
  box-shadow:
    0 16px 40px rgba(0,242,254,.35),
    0 0 30px rgba(255,0,202,.25);
  transition: all 0.3s ease;
  font-size: 1rem;
}
.btn-cti:hover{
  filter: brightness(1.15);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 20px 50px rgba(0,242,254,.45),
    0 0 40px rgba(255,0,202,.35);
}
.btn-cti:active{
  transform: translateY(0) scale(0.98);
}

.text-muted2{ color: var(--muted) !important; }

.form-control, .form-select{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.09);
  color: var(--text);
  padding: .75rem 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow:
    0 0 0 .3rem rgba(0,242,254,.35),
    0 0 30px rgba(0,242,254,.25);
  background: rgba(255,255,255,.12);
  outline: none;
}
.form-control::placeholder{ color: rgba(255,255,255,.55); }

.kpi{
  padding: 1.5rem;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,242,254,.4);
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
  text-align: center;
}
.kpi .label{
  color: var(--muted);
  font-size: .95rem;
}
.kpi .value{
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(0,242,254,.6);
}

.hr-soft{
  border:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  margin: 24px 0;
  opacity: .7;
}

.navbar-cti{
  background: rgba(10,14,26,.75);
  border-bottom: 1px solid rgba(0,242,254,.25);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  color: #ffffff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.sidebar{
  position: sticky;
  top: 100px;
  padding: 1rem;
}

.side-link{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  color: #e0faff;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  font-size: .95rem;
}
.side-link:hover{
  background: rgba(0,242,254,.18);
  border-color: rgba(0,242,254,.4);
  color: #ffffff;
  transform: translateX(6px);
}
.side-link.active{
  background: var(--gradient1);
  border-color: var(--primary);
  color: #000000;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0,242,254,.4);
}

.table{
  color: var(--text);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th{
  background: rgba(0,242,254,.20);
  color: #ffffff;
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
  padding: 1rem;
}
.table td, .table th{
  border-top: 1px solid rgba(255,255,255,.15);
  padding: .75rem 1rem;
}
.table td{
  color: #f0f8ff;
}

/* Tablas responsivas: scroll horizontal en móvil */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.badge-soft{
  border: 1px solid var(--primary);
  background: rgba(0,242,254,.20);
  color: #ffffff;
  border-radius: 999px;
  padding: .4rem .75rem;
  font-weight: 800;
  font-size: .82rem;
  box-shadow: 0 0 20px rgba(0,242,254,.25);
}

.footer{
  color: var(--muted);
  font-size: .95rem;
  padding: 32px 0;
  border-top: 1px solid rgba(0,242,254,.2);
  text-align: center;
}

.stepper{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap: wrap;
}
.step{
  display:flex;
  align-items:center;
  gap:12px;
  flex: 1;
  min-width: 180px;
}
.step .dot{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  background: var(--gradient1);
  color: #000000;
  box-shadow: 0 8px 20px rgba(0,242,254,.3);
}
.step .txt .t{
  font-weight:700;
  color: var(--text);
}
.step .txt .s{
  font-size:.88rem;
  opacity:.8;
}
.step.active .dot{
  transform: scale(1.15);
}
.line{
  flex:1;
  height:2px;
  background: var(--gradient1);
  opacity: .4;
}

/* Light mode */
body.light{
  --bg:#f8fbff;
  --bg2:#ffffff;
  --card: rgba(10,20,40,.08);
  --card2: rgba(10,20,40,.10);
  --stroke: rgba(0,242,254,.30);
  --text: #0a0e1a;
  --muted: rgba(10,14,26,.70);
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(0,242,254,.30), transparent 70%),
    radial-gradient(1000px 600px at 85% 20%, rgba(255,0,202,.25), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
body.light .brand-badge,
body.light .badge-soft{
  color: #0a0e1a;
  background: rgba(0,242,254,.25);
}
body.light .side-link.active{
  color: #ffffff;
}
body.light .table thead th{
  background: rgba(0,242,254,.25);
  color: #0a0e1a;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 991px) {
  .sidebar {
    position: static;
    margin-top: 2rem;
  }
  
  .stepper {
    flex-direction: column;
  }
  .step {
    min-width: auto;
  }
  .line {
    width: 2px;
    height: 40px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }
  
  .container-narrow {
    width: 95%;
    padding: 0 .75rem;
  }
  
  .kpi .value {
    font-size: 1.8rem;
  }
  
  .brand-badge {
    font-size: .85rem;
    padding: .4rem .75rem;
  }
  
  .btn-cti {
    padding: .65rem 1.3rem;
    font-size: .95rem;
  }
  
  .glass, .glass-soft {
    padding: 1.2rem;
  }
  
  .navbar-cti {
    padding: .8rem 0;
  }
  
  .table thead {
    display: none; /* Ocultar header en móvil si es muy complejo */
  }
  
  .table tr {
    display: block;
    margin-bottom: 1rem;
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    padding: 1rem;
  }
  
  .table td {
    display: block;
    text-align: right;
    padding: .5rem 0;
    border: none;
  }
  
  .table td::before {
    content: attr(data-label);
    float: left;
    font-weight: 700;
    color: var(--primary);
  }
}

@media (max-width: 480px) {
  .kpi .value {
    font-size: 1.6rem;
  }
  
  .step .dot {
    width: 32px;
    height: 32px;
    font-size: .9rem;
  }
  
  .hr-soft {
    margin: 20px 0;
  }
  
  .footer {
    padding: 24px 0;
    font-size: .9rem;
  }
}
/* =========================
   KPI PRO (anti overflow)
========================= */
.kpi{
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);

  /* PRO: centra y da altura cómoda */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px;
}

.kpi .label{
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.kpi .value{
  /* PRO: tamaño responsive */
  font-size: clamp(1.05rem, 1.5vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;

  /* PRO: evita que se salga */
  white-space: normal;
  overflow-wrap: anywhere;   /* rompe palabras largas */
  word-break: break-word;
  hyphens: auto;
  text-wrap: balance;        /* mejora el “corte” (si el navegador soporta) */
}

/* Variante para tarjetas pequeñas (las de 2 columnas) */
.kpi.kpi-sm{
  min-height: 88px;
}
.kpi.kpi-sm .value{
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  line-height: 1.15;
}

/* Si quieres que en móviles no se vean “gigantes” */
@media (max-width: 576px){
  .kpi{ min-height: 84px; }
  .kpi .value{ font-size: 1.15rem; }
}

/* ====== USERS TABLE: evita que se desarme ====== */
.users-table {
  min-width: 1150px;         /* fuerza scroll horizontal en pantallas pequeñas */
}

.users-table th { white-space: nowrap; }
.users-table td { padding-top: .95rem; padding-bottom: .95rem; }

.users-table .text-nowrap { white-space: nowrap; }

/* opcional: que el nombre tenga espacio y no empuje todo */
.users-table td:nth-child(3) { min-width: 280px; white-space: normal; }
/* ====== USERS TABLE FIX (SIEMPRE LEGIBLE) ====== */

.users-scope .table-responsive{
  overflow-x: auto;
}

/* Bootstrap usa variables CSS en tablas: esto es lo más efectivo */
.users-scope .users-table{
  --bs-table-color: #0f172a;            /* texto */
  --bs-table-bg: rgba(255,255,255,.55);/* fondo suave (glass) */
  --bs-table-striped-color: #0f172a;
  --bs-table-striped-bg: rgba(15,23,42,.04);
  --bs-table-hover-color: #0f172a;
  --bs-table-hover-bg: rgba(15,23,42,.06);

  min-width: 980px;                     /* tamaño estable */
  border-collapse: separate;
  border-spacing: 0;
}

/* Fuerza color real en TODAS las celdas (por si tu tema mete color blanco) */
.users-scope .users-table > :not(caption) > * > *{
  color: var(--bs-table-color) !important;
}

/* Header legible */
.users-scope .users-table thead th{
  white-space: nowrap;
  color: #0f172a !important;            /* NO blanco */
  font-weight: 800;
}

/* Muted dentro de tabla */
.users-scope .users-table .text-muted2{
  color: rgba(15, 23, 42, .65) !important;
}

/* Columnas */
.users-scope .users-table td:nth-child(3){ /* Nombre */
  min-width: 220px;
  white-space: normal;
}
.users-scope .users-table td:nth-child(5){ /* Correo */
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}

/* Acciones y badges */
.users-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.5rem;
}
.users-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

/* Mantén badges/btn con tu estilo pero texto legible */
.users-scope .users-table .badge-soft,
.users-scope .users-table .btn{
  color: #0f172a !important;
}
/* =========================================================
   ADMIN DOCS (Firmar documentos) - FIX LEGIBILIDAD
   Solo afecta a la vista que tenga .admin-docs-scope
========================================================= */

/* 1) Fuerza texto oscuro legible dentro de toda el área */
.admin-docs-scope,
.admin-docs-scope .table,
.admin-docs-scope .table th,
.admin-docs-scope .table td,
.admin-docs-scope .glass-soft,
.admin-docs-scope .glass-soft *{
  color: #0f172a !important; /* texto oscuro */
}

/* 2) Tu clase text-muted2 se ve muy clara: la hacemos “muted” pero legible */
.admin-docs-scope .text-muted2{
  color: rgba(15, 23, 42, .72) !important;
}

/* 3) Cabecera de tabla más clara (sin perder contraste) */
.admin-docs-scope table thead th,
.admin-docs-scope table thead tr{
  color: rgba(15, 23, 42, .80) !important;
  font-weight: 700;
}

/* 4) Links dentro de tabla: heredan color oscuro (no celeste pálido) */
.admin-docs-scope a{
  color: inherit !important;
}

/* 5) Botones y badges “soft” no deben quedar blancos */
.admin-docs-scope .badge-soft,
.admin-docs-scope .btn.glass-soft{
  color: #0f172a !important;
}

/* 6) El botón principal (gradiente) debe mantenerse blanco */
.admin-docs-scope .btn-cti{
  color: #ffffff !important;
}

/* 7) Placeholders (cuando no escribes) para que se vean */
.admin-docs-scope input::placeholder,
.admin-docs-scope textarea::placeholder{
  color: rgba(15, 23, 42, .45) !important;
}