/* =====================================================================
   panel.css — Panel principal: sidebar + secciones
   ===================================================================== */
.pnl-layout { display:flex; min-height:100vh; position:relative; }

/* Sidebar */
.pnl-side {
  width:208px; background:var(--surface); border-right:1px solid var(--border);
  flex-shrink:0; display:flex; flex-direction:column; padding:16px 0;
  position:sticky; top:0; height:100vh;
  transition:width .2s ease, margin-left .2s ease;
}
.pnl-brand { display:flex; align-items:center; gap:10px; padding:4px 18px 14px; }
.pnl-brand > .pnl-bwrap { flex:1; min-width:0; }
/* boton para colapsar a riel (junto a la marca) */
.pnl-collapse { margin-left:auto; background:none; border:0; cursor:pointer; color:var(--faint);
  padding:5px; border-radius:7px; display:flex; align-items:center; transition:background .12s,color .12s; }
.pnl-collapse:hover { background:var(--border-soft); color:var(--ink); }
.pnl-collapse svg { width:18px; height:18px; }
.pnl-logo { width:38px; height:38px; border-radius:11px; background:var(--brand-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pnl-logo svg { width:21px; height:21px; stroke:var(--brand); }
.pnl-bname { font-weight:650; font-size:14px; letter-spacing:-.01em; }
.pnl-bver { font-size:11px; color:var(--faint); margin-top:1px; }

.pnl-nav { flex:1; padding:6px 12px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; }
.pnl-nav button { display:flex; align-items:center; gap:11px; padding:8px 12px; width:100%;
  border:0; background:none; color:var(--ink-soft); font-size:13px; cursor:pointer;
  font-family:inherit; text-align:left; border-radius:var(--radius-sm); font-weight:500;
  line-height:1.2; transition:background .12s,color .12s; }
.pnl-nav button svg { width:17px; height:17px; flex-shrink:0; opacity:.85; }
.pnl-nav button:hover { background:var(--border-soft); color:var(--ink); }
.pnl-nav button:hover svg { opacity:1; }
.pnl-nav button.active { color:var(--brand); background:var(--brand-bg); font-weight:600; }
.pnl-nav button.active svg { opacity:1; }

/* --- Menú agrupado (admin / superadmin) ---
   Items sueltos arriba (separados por una linea) + grupos colapsables. El
   encabezado de grupo es una etiqueta pequeña en mayúsculas con chevron.
   Todos los grupos arrancan desplegados; al plegar se agrega .collapsed. */
.nav-loose { display:flex; flex-direction:column; gap:1px; padding-bottom:5px;
  margin-bottom:3px; border-bottom:1px solid var(--border-soft); }
.nav-group { display:flex; flex-direction:column; margin-top:11px; }
.nav-ghead { display:flex; align-items:center; gap:6px; width:100%; border:0; background:none;
  cursor:pointer; font-family:inherit; padding:6px 12px 5px; color:var(--faint);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.nav-ghead .gh-label { flex:1; text-align:left; }
.nav-ghead:hover { color:var(--muted); }
.nav-ghead-chev { width:13px; height:13px; flex-shrink:0; transition:transform .18s; }
.nav-group.collapsed .nav-ghead-chev { transform:rotate(-90deg); }
.nav-gitems { display:flex; flex-direction:column; gap:1px; overflow:hidden;
  transition:max-height .2s ease, opacity .15s ease; max-height:900px; opacity:1; }
.nav-group.collapsed .nav-gitems { max-height:0; opacity:0; }

/* v5.44 — SUBTITULO DENTRO DE UN GRUPO.
   Sincronizacion es UN area del portal, pero tiene tres partes que no se
   mezclan: lo que se recibe, lo que se envia, y las herramientas. Antes eran
   tres grupos hermanos (parecian tres areas distintas); ahora son divisiones
   de una sola.
   Mas chico y mas apagado que el titulo del grupo: tiene que leerse como una
   division interna, no competir con la cabecera. */
.nav-sub { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint,#94a3b8); padding:9px 12px 3px; user-select:none; }
.nav-sub:first-child { padding-top:2px; }
/* En modo riel (solo iconos) no hay lugar para texto: se convierte en una
   linea divisoria, que cumple la misma funcion de separar. */
.rail .nav-sub { font-size:0; padding:0; margin:6px 10px; height:1px;
  background:var(--border); letter-spacing:0; }

/* v5.48 — ITEM HIJO (cuelga del de arriba).
   Diferencias sale de la Ultima corrida. Antes eran dos entradas hermanas y
   nada decia que una era el resultado de la otra; la pagina aparecia con 5
   casos adentro y el usuario no la relacionaba con la corrida.
   La indentacion y la guia vertical hacen ese trabajo: ninguna etiqueta lo
   lograba tan bien. */
.nav-gitems .nav-child { padding-left:30px; position:relative; font-size:13px; }
.nav-gitems .nav-child::before {
  content:''; position:absolute; left:17px; top:0; bottom:50%;
  border-left:1px solid var(--border);
  border-bottom:1px solid var(--border);
  width:6px; border-bottom-left-radius:4px;
}
/* En modo riel no hay texto ni lugar para la guia: el item vuelve a ser un
   icono mas (la jerarquia se pierde, pero el riel ya no muestra jerarquia de
   ningun tipo). */
.pnl-layout.rail .nav-gitems .nav-child { padding-left:0; }
.pnl-layout.rail .nav-gitems .nav-child::before { display:none; }

/* --- Modo RIEL (solo iconos) ---
   El boton de la marca (#pnlRail) SIGUE visible en riel para poder volver
   a expandir; solo se centra. Sin scroll horizontal: el nav no desborda. */
.pnl-layout.rail .pnl-side { width:64px; }
.pnl-layout.rail .pnl-bname,
.pnl-layout.rail .pnl-bver,
.pnl-layout.rail .pnl-nav button span,
.pnl-layout.rail .gh-label,
.pnl-layout.rail .nav-ghead-chev { display:none; }
.pnl-layout.rail .pnl-brand { justify-content:center; padding:8px 0 14px; gap:0; }
.pnl-layout.rail .pnl-brand > .pnl-bwrap { display:none; }
.pnl-layout.rail .pnl-logo { display:none; }
.pnl-layout.rail .pnl-collapse { margin-left:0; }
/* la flecha del boton apunta a la derecha (expandir) en modo riel */
.pnl-layout.rail .pnl-collapse svg { transform:rotate(180deg); }
.pnl-layout.rail .nav-ghead { justify-content:center; padding:8px 0 4px; pointer-events:none; }
.pnl-layout.rail .nav-ghead::after { content:""; width:18px; height:1px; background:var(--border); }
.pnl-layout.rail .pnl-nav { padding:6px 0; align-items:center; overflow-x:hidden; }
.pnl-layout.rail .nav-loose { padding-bottom:4px; margin-bottom:0; width:100%; align-items:center; }
.pnl-layout.rail .nav-gitems { width:100%; align-items:center; }
.pnl-layout.rail .pnl-nav button { justify-content:center; padding:9px 0; width:44px; position:relative; }
.pnl-layout.rail .nav-gitems { max-height:none !important; opacity:1 !important; }
/* tooltip al pasar el mouse en modo riel (usa data-label del boton) */
.pnl-layout.rail .pnl-nav button[data-label]:hover::after {
  content:attr(data-label); position:absolute; left:calc(100% + 8px); top:50%;
  transform:translateY(-50%); background:var(--ink); color:#fff; font-size:12px; font-weight:500;
  padding:5px 9px; border-radius:6px; white-space:nowrap; z-index:50; box-shadow:0 4px 12px rgba(0,0,0,.18); }

/* --- Modo OCULTO (off-canvas) ---
   El sidebar sale del flujo (position:absolute) y se desplaza fuera de
   pantalla, asi el contenido ocupa todo el ancho sin huecos. Un boton
   flotante arriba a la izquierda lo trae de vuelta. */
.pnl-layout.hidden-nav .pnl-side {
  position:absolute; left:0; top:0; height:100vh;
  transform:translateX(-100%); box-shadow:none; }
.nav-reopen { display:none; position:fixed; top:14px; left:14px; z-index:40;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pnl-layout.hidden-nav .nav-reopen { display:flex; }
.nav-reopen svg { width:20px; height:20px; stroke:var(--ink-soft); }
/* hamburguesa en la topbar (alterna ocultar) */
.pnl-ham { background:none; border:0; cursor:pointer; color:var(--ink-soft); padding:6px; border-radius:7px;
  display:flex; align-items:center; margin-right:auto; }
.pnl-ham:hover { background:var(--border-soft); }
.pnl-ham svg { width:20px; height:20px; }

/* Columna de contenido: topbar + main */
.pnl-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.pnl-topbar { display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:12px 28px; border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:20; }

/* Usuario + logout (topbar superior derecha) */
.pnl-user { display:flex; align-items:center; gap:10px; }
.pnl-avatar { width:36px; height:36px; border-radius:50%; background:var(--brand-bg);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; flex-shrink:0; overflow:hidden; border:1.5px solid var(--border); }
.pnl-avatar img { width:100%; height:100%; object-fit:cover; }
.pnl-uinfo { min-width:0; font-size:13px; text-align:right; line-height:1.25; }
.pnl-uname { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pnl-urole { color:var(--faint); font-size:11.5px; }
.pnl-logout { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--ink-soft); font-size:13px; cursor:pointer; padding:8px 14px; font-family:inherit;
  font-weight:500; white-space:nowrap; display:flex; align-items:center; gap:6px; transition:background .12s; }
.pnl-logout:hover { background:var(--border-soft); }
.pnl-logout svg { width:15px; height:15px; }

/* Main */
.pnl-main { flex:1; padding:26px 28px; min-width:0; }
.pnl-loading { padding:40px; text-align:center; color:var(--muted); }
.pnl-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
.pnl-head h1 { font-size:21px; margin:0 0 4px; font-weight:650; letter-spacing:-.02em; }
.pnl-head p { margin:0; font-size:13.5px; color:var(--faint); }

/* =====================================================================
   CONTROLES (sistema unificado) — inputs, selects, search y botones
   comparten altura --control-h. Definido una sola vez aquí; no
   redefinir altura/padding vertical en otras reglas.
   ===================================================================== */

/* Botones — altura uniforme (--btn-h) en todo el sitio */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:auto; flex:0 0 auto; height:var(--btn-h); box-sizing:border-box;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  padding:0 14px; border-radius:var(--radius-sm); font-size:13px; cursor:pointer;
  font-family:inherit; font-weight:550; white-space:nowrap; transition:background .12s; }
.btn:hover { background:var(--border-soft); }
.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary:disabled { opacity:.6; cursor:default; }
.btn svg { flex-shrink:0; width:15px; height:15px; }

/* Fila de filtros: todos los hijos centrados verticalmente y a misma altura */
.pnl-filters { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.pnl-filters > select { flex:1 1 140px; min-width:140px; }
.pnl-filters > .search { flex:2 1 240px; min-width:200px; }

/* Buscador: contenedor con la MISMA altura que un input, lupa centrada.
   El input llena el contenedor (height:100%) en vez de fijar su propia
   altura, así nunca queda más alto/bajo que los selects de al lado. */
.search { position:relative; height:var(--control-h); box-sizing:border-box; }
.search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--faint); pointer-events:none; z-index:1; }
.search input { width:100%; height:100%; padding:0 14px 0 40px; }

/* Tabla (aireada) */
.tablebox { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-md); }
.tablebox.scroll-x { overflow-x:auto; overflow-y:hidden; }
.tablebox.scroll-x th, .tablebox.scroll-x td { padding-left:13px; padding-right:13px; }
.tablebox table { width:100%; border-collapse:collapse; font-size:13.5px; }
.tablebox th { background:#fbfcfe; font-weight:600; color:var(--ink-soft); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; text-align:left;
  padding:13px 18px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tablebox td { padding:15px 18px; border-bottom:1px solid var(--border-soft);
  vertical-align:middle; text-align:left; }
.tablebox tbody tr:last-child td { border-bottom:0; }
.tablebox tbody tr { transition:background .1s; }
.tablebox tbody tr:hover { background:#fafbfd; }
.tablebox .code { font-weight:650; }
.tablebox .empty { padding:24px; color:var(--muted); text-align:center; }

/* Fila de la quincena en curso (destacada) */
.tablebox tr.row-current td { background:var(--brand-bg); }
.tablebox tr.row-current:hover td { background:var(--brand-bg); }
.tablebox tr.row-current .code { color:var(--brand); }

/* Checkbox de filtro inline (ej. "Ocultar futuras" en Quincenas) */
.pchk { display:inline-flex; align-items:center; gap:8px; height:var(--control-h); box-sizing:border-box;
  padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); font-size:13px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.pchk:hover { background:var(--border-soft); }
.pchk input { width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer; }

/* Columna "Último día de cálculo": tono tranquilo (crema), no rojo */
.tablebox td.hito-cell { background:#fcfbf7; }
.tablebox td.hito-cell .date-num { font-weight:650; color:var(--ink); }

/* Grupo de columnas "Período de pago" (fondo azul tenue) */
.tablebox th.grp, .tablebox td.grp { background:#f7faff; }
.tablebox th.grp-first, .tablebox td.grp-first { border-left:2px solid #dbe7ff; }
.tablebox th.grp-last, .tablebox td.grp-last { border-right:2px solid #dbe7ff; }
.tablebox tbody tr:hover td.grp { background:#eff5ff; }
.tablebox tr.row-current td.grp { background:var(--brand-bg); }
.pp-code { font-family:monospace; font-weight:650; color:var(--brand); }

/* Celda de fecha con día de la semana y chips */
.date-cell { line-height:1.25; }
.date-cell .date-dow { font-size:11px; color:var(--faint); text-transform:capitalize; margin-top:1px; }
.date-cell.weekend .date-dow { color:var(--warn); font-weight:600; }
.date-cell.weekend .date-num { color:var(--warn); }
.dow-badge { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  padding:1px 6px; border-radius:20px; margin-left:6px; background:var(--warn-bg); color:var(--warn); vertical-align:1px; }

/* Renglón gris del mes + días bajo Período/Rango de Pago */
.submonth { font-size:11px; color:var(--faint); text-transform:capitalize; margin-top:2px; }
.submonth .days { color:var(--muted); font-weight:600; }

/* Chip de cuenta regresiva (solo quincena en curso) */
.countdown { display:inline-block; margin-top:5px; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:2px 8px; border-radius:20px; background:var(--brand); color:#fff; white-space:nowrap; }
.countdown.today { background:var(--warn); }
.countdown.soon { background:var(--danger); }

.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:600; }
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.pill-gray::before { display:none; }
.pill-open { background:var(--success-bg); color:#15803d; }
.pill-closed { background:var(--danger-bg); color:#b91c1c; }
.pill-temp { background:var(--warn-bg); color:#92400e; }
.pill-proj { background:var(--brand-bg); color:#1e40af; }
.pill-gray { background:var(--border-soft); color:var(--ink-soft); }
/* Estados temporales de quincenas */
.pill-curr { background:var(--success-bg); color:#15803d; }
.pill-past { background:var(--border-soft); color:var(--muted); }
.pill-past::before { opacity:.5; }
.pill-fut  { background:var(--brand-bg); color:#1e40af; }
.pill-mod  { background:var(--warn-bg); color:var(--warn); }
.estado-wrap { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.ico-ok { color:var(--success); }
.ico-no { color:#cbd5e1; }
.ico-ok svg, .ico-no svg { width:20px; height:20px; vertical-align:middle; }

/* Celda de correo editable */
.email-cell { display:flex; align-items:center; gap:8px; }
.contact-cell { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.contact-lines { display:flex; flex-direction:column; line-height:1.35; }
.email-edit { background:none; border:0; color:var(--faint); cursor:pointer; padding:2px;
  opacity:0; transition:opacity .12s; flex-shrink:0; }
.tablebox tr:hover .email-edit { opacity:1; }
.email-edit:hover { color:var(--brand); }

/* Menú de exportación */
.export-wrap { position:relative; }
.export-menu { position:absolute; right:0; top:calc(100% + 4px); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 6px 20px rgba(0,0,0,0.12);
  z-index:50; min-width:150px; overflow:hidden; }
.export-menu button { display:block; width:100%; text-align:left; border:0; background:none;
  padding:9px 14px; font-size:13px; cursor:pointer; font-family:inherit; color:var(--ink-soft); }
.export-menu button:hover { background:var(--border-soft); }

/* Multi-select de estados (dropdown con checkboxes) */
.ms-wrap { position:relative; flex:1 1 140px; min-width:140px; }
.ms-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; height:var(--control-h); box-sizing:border-box; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); padding:0 12px; border-radius:var(--radius-sm);
  font-size:13px; cursor:pointer; font-family:inherit; text-align:left; }
.ms-toggle:hover { background:var(--border-soft); }
.ms-toggle .ms-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-toggle .ms-caret { width:16px; height:16px; stroke:var(--faint); flex-shrink:0; transition:transform .15s; }
.ms-wrap.open .ms-caret { transform:rotate(90deg); }
.ms-menu { position:absolute; left:0; top:calc(100% + 4px); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 6px 20px rgba(0,0,0,0.12);
  z-index:50; min-width:220px; padding:6px; }
.ms-menu[hidden] { display:none; }
.ms-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px;
  font-size:13px; cursor:pointer; color:var(--ink); }
.ms-opt:hover { background:var(--border-soft); }
.ms-opt input { width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer; flex-shrink:0; }
.ms-opt .ms-count { margin-left:auto; color:var(--faint); font-size:12px; }
.ms-sep { height:1px; background:var(--border-soft); margin:6px 4px; }
.ms-quick { display:flex; gap:6px; padding:2px 6px 6px; }
.ms-quick button { flex:1; border:1px solid var(--border); background:var(--surface); border-radius:6px;
  font-size:11.5px; padding:5px 8px; cursor:pointer; font-family:inherit; color:var(--ink-soft); }
.ms-quick button:hover { background:var(--brand-bg); color:var(--brand); border-color:var(--brand); }

.legend { font-size:12px; color:var(--muted); margin:12px 2px 0; display:flex; gap:18px; }
.legend svg { vertical-align:-3px; margin-right:3px; }

/* Cards / catálogos */
.muted { color:var(--faint); font-weight:400; }
.cards-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.cards-row .card { flex:1; min-width:240px; }
.card { border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px;
  background:var(--surface); margin-bottom:16px; }
.card h3 { margin:0 0 12px; font-size:14px; font-weight:600; }

.tree-zone { display:flex; justify-content:space-between; align-items:center; padding:8px 6px;
  cursor:pointer; border-radius:6px; font-size:13.5px; }
.tree-zone:hover { background:var(--border-soft); }
.tree-zone .zname { display:flex; align-items:center; gap:7px; }
.tree-zone .zname svg { width:15px; height:15px; stroke:var(--muted); transition:transform .15s; }
.tree-zone.open .zname svg { transform:rotate(90deg); }
.tree-subs { display:none; padding:2px 0 6px 28px; }
.tree-subs.open { display:block; }
.tree-sub { display:flex; justify-content:space-between; padding:4px 6px; color:var(--ink-soft); font-size:13px; }

.concepts { display:flex; flex-wrap:wrap; gap:8px; }
.concept-tag { background:var(--border-soft); color:var(--ink-soft); padding:4px 11px;
  border-radius:999px; font-size:12.5px; }

.sync-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }

/* Botones mini (acciones de tabla) — MISMA altura que .btn, solo más estrechos */
.btn-mini { padding:0 11px; font-size:12.5px; margin-left:6px; }
.btn-mini svg { vertical-align:-2px; margin-right:3px; width:13px; height:13px; }

/* Modal */
.modal-ov { position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-box { background:var(--surface); border-radius:var(--radius-lg); padding:22px 24px;
  width:100%; max-width:460px; box-shadow:var(--shadow-lg); animation:modalpop .18s ease;
  max-height:90vh; overflow-y:auto; }
@keyframes modalpop { from { transform:scale(.97); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-head { display:flex; justify-content:space-between; align-items:center;
  font-size:16.5px; font-weight:650; letter-spacing:-.01em;
  /* v6.148: cabecera fija al hacer scroll dentro del modal (solo el título).
     Se pega al tope del .modal-box, con fondo sólido para que el contenido
     pase por debajo. Los márgenes negativos la extienden a los bordes del
     modal (padding 22/24) y el padding propio recompone el espacio. */
  position:sticky; top:0; z-index:3; background:var(--surface);
  margin:-22px -24px 8px; padding:18px 24px 10px; border-bottom:1px solid var(--border-soft); }
.modal-x { background:none; border:0; color:var(--faint); cursor:pointer; padding:4px;
  border-radius:6px; display:flex; font-size:16px; }
.modal-x:hover { color:var(--ink); background:var(--border-soft); }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.flabel { display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }

/* Opciones de contraseña como tarjetas seleccionables */
.radio-row { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; cursor:pointer;
  border:1.5px solid var(--border); border-radius:var(--radius-md); margin-bottom:8px;
  font-size:13.5px; transition:border-color .12s, background .12s; }
.radio-row:hover { border-color:#cbd5e1; }
.radio-row:has(input:checked) { border-color:var(--brand); background:var(--brand-bg); }
.radio-row input { width:18px; height:18px; flex-shrink:0; margin:0; accent-color:var(--brand); cursor:pointer; }

/* Editor de alcance (Permisos) */
.sc-add { display:flex; gap:10px; margin-bottom:14px; align-items:center; }
.sc-add > select { flex:0 0 150px; }
.sc-add > .search { flex:1 1 auto; }
.sc-results { max-height:240px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
.sc-res-row { display:flex; justify-content:space-between; align-items:center; padding:9px 14px;
  font-size:13px; border-bottom:1px solid var(--border-soft); }
.sc-res-row:last-child { border-bottom:0; }
.sc-res-btns { display:flex; gap:6px; flex-shrink:0; }
.sc-res-btns button { border:1px solid var(--border); background:var(--surface); border-radius:6px;
  font-size:11.5px; padding:3px 9px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.sc-inc:hover { background:var(--success-bg); color:#065f46; border-color:var(--success); }
.sc-exc:hover { background:var(--danger-bg); color:#991b1b; border-color:var(--danger); }
.sc-list { min-height:40px; }
.sc-item { display:flex; justify-content:space-between; align-items:center; padding:6px 10px;
  font-size:13px; border-radius:6px; }
.sc-item:hover { background:var(--border-soft); }
.sc-item button { background:none; border:0; color:var(--faint); font-size:14px; cursor:pointer; }
.sc-item button:hover { color:var(--danger); }

/* Mi empresa (vista de tienda) */
.miemp-card { max-width:560px; }
.miemp-code { display:inline-block; font-family:monospace; font-size:13px; font-weight:600;
  color:var(--brand); background:var(--brand-bg); padding:3px 10px; border-radius:6px; }
.miemp-name { font-size:20px; margin:10px 0 18px; font-weight:600; }
.miemp-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.miemp-grid > div { display:flex; flex-direction:column; gap:3px; font-size:14px; }
.miemp-lbl { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:0.4px; }
.badge-soon { background:var(--brand-bg); color:var(--brand); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px; flex-shrink:0; }

/* Configuración (settings) */
.cfg-row { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--border-soft); }
.cfg-row:first-child { padding-top:0; }
.cfg-row:last-child { border-bottom:0; padding-bottom:0; }
.cfg-meta { flex:1; min-width:0; }
.cfg-label { font-size:14px; font-weight:600; }
.cfg-desc { font-size:12.5px; color:var(--faint); margin-top:3px; line-height:1.45; }
.cfg-input { display:flex; gap:8px; align-items:center; flex:0 0 380px; max-width:380px; }
.cfg-input input { flex:1; }
.cfg-secret { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto; }
.cfg-secret-note { font-size:11px; color:var(--faint); }

@media (max-width:720px) {
  /* En pantallas chicas el sidebar arranca oculto; se reabre con la
     hamburguesa de la topbar (no forzamos riel para no pelear con los
     modos manuales). */
  .pnl-side { position:fixed; z-index:45; box-shadow:0 8px 30px rgba(0,0,0,.18); }
}

/* =====================================================================
   REPORTES — tarjetas de seleccion (vista Mi empresa)
   ===================================================================== */
.report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.report-tile { display:flex; gap:14px; align-items:flex-start; text-align:left; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; cursor:pointer;
  font-family:inherit; transition:.14s; box-shadow:0 1px 3px rgba(15,23,42,.04); }
.report-tile:hover:not(.soon) { border-color:var(--brand); box-shadow:0 4px 16px rgba(37,99,235,.12); transform:translateY(-1px); }
.report-tile.soon { opacity:.6; cursor:default; }
.report-tile .rt-ico { font-size:26px; line-height:1; flex-shrink:0; }
.report-tile .rt-body { display:flex; flex-direction:column; gap:4px; }
.report-tile .rt-title { font-weight:650; font-size:15px; display:flex; align-items:center; gap:8px; }
.report-tile .rt-desc { font-size:12.5px; color:var(--muted); line-height:1.45; }
.badge-soon { background:var(--brand-bg); color:var(--brand); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px; flex-shrink:0; }

/* =====================================================================
   WIZARD de incidencias (nucleo compartido)
   ===================================================================== */
.wiz { max-width:940px; margin:0 auto; }
.wiz-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.wiz-exit { font-size:13px; }
.btn-ghost { background:none; border:0; color:var(--muted); cursor:pointer; font-family:inherit; padding:4px 0; }
.btn-ghost:hover { color:var(--brand); }
.wiz .tag { display:inline-block; background:var(--brand-bg); color:var(--brand); font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.5px; }
.wiz-h1 { font-size:21px; margin:0 0 4px; font-weight:650; letter-spacing:-.02em; }
.wiz-sub { color:var(--faint); font-size:13.5px; margin:0 0 4px; }
.now-clock { display:block; text-align:right; font-size:15px; font-weight:500; color:var(--ink-soft); margin:-44px 0 26px; }
.now-clock .nc-tz { color:var(--faint); font-size:12.5px; }

.wiz .steps { display:flex; align-items:center; gap:0; margin-bottom:24px; }
.wiz .step { display:flex; align-items:center; gap:9px; flex:1; }
.wiz .step:last-child { flex:0; }
.wiz .step .dot { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; background:var(--surface);
  border:2px solid var(--border); color:var(--faint); transition:.2s; }
.wiz .step .slabel { font-size:12px; color:var(--faint); font-weight:600; white-space:nowrap; }
.wiz .step.active .dot { background:var(--brand); border-color:var(--brand); color:#fff; }
.wiz .step.active .slabel { color:var(--ink); }
.wiz .step.done .dot { background:var(--success); border-color:var(--success); color:#fff; }
.wiz .step.done .slabel { color:var(--ink-soft); }
.wiz .step .bar { flex:1; height:2px; background:var(--border); margin:0 8px; }
.wiz .step.done .bar { background:var(--success); }

.wiz .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px 26px; box-shadow:0 1px 3px rgba(15,23,42,.04),0 8px 30px rgba(15,23,42,.05); min-height:380px; }
.wiz .card h2 { font-size:16px; margin:0 0 4px; font-weight:650; }
.wiz .hint { font-size:12.5px; color:var(--muted); margin:0 0 20px; line-height:1.5; }
.wiz .flabel { display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.wiz .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wiz .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.wiz-foot { display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.wiz .pnl-loading { padding:40px; text-align:center; color:var(--muted); }

/* subtabs */
.wiz .subtabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.wiz .subtab { padding:9px 16px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.wiz .subtab.on { color:var(--brand); border-bottom-color:var(--brand); }

/* tablas del wizard */
.wiz table { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px; }
.wiz th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.wiz th.sortable { cursor:pointer; user-select:none; }
.wiz th.sortable:hover { color:var(--brand); }
.wiz td { padding:11px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.wiz tbody tr:hover { background:#fafbfd; }
.wiz .chk { width:16px; height:16px; accent-color:var(--brand); cursor:pointer; margin:0; }
.wiz .ced { font-family:monospace; font-weight:600; }
.wiz .empty { text-align:center; color:var(--muted); padding:30px; font-size:13px; }

.wiz .pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; }
.wiz .pill-set { background:var(--success-bg); color:#15803d; }
.wiz .pill-pend { background:var(--warn-bg); color:var(--warn); }
.wiz .pill-out { background:var(--danger-bg); color:#b91c1c; }
.wiz .pill-role { background:var(--brand-bg); color:var(--brand); }
.wiz .time-badge { display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px;
  background:var(--brand-bg); color:var(--brand); font-family:monospace; }
.wiz .x-btn { background:none; border:0; color:var(--faint); cursor:pointer; font-size:15px; padding:2px 6px; border-radius:5px; }
.wiz .x-btn:hover { color:var(--danger); background:var(--danger-bg); }

.wiz .roster-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.wiz .roster-head .search { flex:1; min-width:200px; }
.wiz .roster-info { font-size:12px; color:var(--muted); }

.wiz .picktable-wrap { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; max-height:300px; overflow-y:auto; }
.wiz .picktable { margin:0; }
.wiz .picktable th { position:sticky; top:0; background:#fbfcfe; z-index:2; }
.wiz .picktable td { padding:9px 12px; }
.wiz .picktable tr.added td { opacity:.45; }
.wiz .picktable tr.egresado .pname { color:var(--muted); }

.wiz .dropzone { border:2px dashed var(--border); border-radius:var(--radius-md); padding:34px; text-align:center;
  color:var(--muted); cursor:pointer; transition:.15s; }
.wiz .dropzone:hover { border-color:var(--brand); background:var(--brand-bg); color:var(--brand); }
.wiz .validation { margin-top:16px; border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; font-size:13px; }
.wiz .vrow { display:flex; align-items:center; gap:8px; padding:3px 0; }
.wiz .vrow.ok { color:#15803d; } .wiz .vrow.warn { color:var(--warn); } .wiz .vrow.err { color:var(--danger); }

.wiz .roster-status { display:flex; align-items:center; gap:16px; background:#f9fbff; border:1px solid #e2ecfb;
  border-radius:var(--radius-md); padding:16px 18px; margin-bottom:14px; }
.wiz .roster-status .rs-ico { font-size:26px; }
.wiz .roster-status .rs-main { flex:1; }
.wiz .roster-status .rs-title { font-weight:650; font-size:14px; }
.wiz .roster-status .rs-meta { font-size:12.5px; color:var(--muted); margin-top:2px; }

.wiz .warn-banner { display:flex; align-items:center; gap:12px; background:var(--warn-bg); border:1px solid #f0d9a8;
  border-radius:var(--radius-md); padding:12px 16px; margin-bottom:18px; font-size:13px; color:#92400e; }
.wiz .warn-banner b { color:#7c2d12; }

.wiz .window-info { display:flex; align-items:center; gap:10px; background:#f0f7ff; border:1px solid #d3e2fd;
  border-radius:var(--radius-md); padding:12px 16px; margin-bottom:16px; font-size:12.5px; color:var(--ink-soft); }
.wiz .window-info b { color:var(--brand); }
.wiz .window-info .wi-ico { font-size:18px; }

.wiz .resp-card { border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 15px; display:flex;
  align-items:center; gap:12px; margin-bottom:10px; cursor:pointer; transition:.12s; }
.wiz .resp-card:hover { border-color:var(--brand); background:#fafcff; }
.wiz .resp-card.sel { border-color:var(--brand); background:var(--brand-bg); }
.wiz .resp-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; }
.wiz .resp-card.sel .resp-radio { border-color:var(--brand); background:radial-gradient(var(--brand) 40%, transparent 45%); }
.wiz .resp-info { flex:1; }
.wiz .resp-name { font-weight:600; font-size:14px; }
.wiz .resp-role { font-size:12px; color:var(--muted); }
.wiz .add-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; }
.wiz .add-row .af-field { flex:1; display:flex; flex-direction:column; }
.wiz .add-row .af-field input { width:100%; box-sizing:border-box; }
/* el boton se alinea con los inputs (no con la fila completa): baja el alto
   de la etiqueta + su margen para quedar a la altura del campo de texto */
.wiz .add-row .af-btn { flex:0 0 auto; margin-top:calc(1.4em + 7px); }
.wiz .ced-hint { font-size:11.5px; margin-top:5px; min-height:15px; }
.wiz .ced-hint.ok { color:var(--success); } .wiz .ced-hint.err { color:var(--danger); }

.wiz .selbar { display:flex; align-items:center; gap:12px; background:var(--brand-bg); border:1px solid #d3e2fd;
  border-radius:var(--radius-md); padding:10px 14px; margin-bottom:14px; font-size:13px; }
.wiz .selbar.hidden { display:none; }
.wiz .selbar b { color:var(--brand); }
.wiz .selbar .spacer { flex:1; }

.wiz .sum-box { border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px; }
.wiz .sum-box .sb-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
.wiz .sum-box .sb-val { font-size:14px; font-weight:600; margin-top:2px; }
.wiz .sum-error { margin-top:12px; }
.wiz .sum-error ul { margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--danger); }
.wiz .ok-banner { background:var(--success-bg); color:#15803d; border:1px solid #bbf7d0; border-radius:var(--radius-md);
  padding:16px; text-align:center; font-weight:600; margin-bottom:16px; }
.wiz .ok-banner.warn { background:var(--warn-bg); color:#92400e; border-color:#f0d9a8; }
/* detalle tecnico plegable en el cierre del wizard (errores de osTicket) */
.wiz .done-errors { max-width:560px; margin:0 auto 16px; font-size:12.5px; }
.wiz .done-errors summary { cursor:pointer; color:var(--muted); padding:6px 0; }
.wiz .done-errors ul { margin:6px 0 0; padding-left:18px; color:var(--danger); line-height:1.5; }

.wiz .resp-manage-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.wiz .resp-manage-row:last-child { border-bottom:0; }

/* modales del wizard (reusan .modal-ov global, definen .modal propio) */
.modal-ov .modal { background:var(--surface); border-radius:var(--radius-lg); padding:22px 24px; width:100%; max-width:480px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:90vh; overflow-y:auto; }
.modal-ov .modal h3 { margin:0 0 4px; font-size:16px; }
.modal-ov .modal .who { font-size:12.5px; color:var(--muted); margin:0 0 18px; }
.modal-ov .modal .flabel { display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.modal-ov .modal .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.modal-ov .modal .wiz-foot { display:flex; justify-content:space-between; align-items:center; }
.date-err, .time-err { color:var(--danger); font-size:12px; margin-top:6px; min-height:16px; }

/* =====================================================================
   HISTORIAL de reportes + pantalla de detalle
   Usa el sistema de controles unificado (--control-h) para que selects,
   inputs y buscador queden a la MISMA altura y alineados.
   ===================================================================== */
.hist-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end; }
.hist-filters .fl { display:flex; flex-direction:column; gap:5px; }
.hist-filters .fl label { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.hist-filters .fl select, .hist-filters .fl > input { height:var(--control-h); box-sizing:border-box;
  padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px;
  font-family:inherit; background:var(--surface); outline:none; }
.hist-filters .fl select:focus, .hist-filters .fl > input:focus { border-color:var(--brand); }
.hist-filters .fl-search { flex:1; min-width:220px; }
/* Buscador del historial: caja propia con la MISMA altura (--control-h) que
   selects y fechas; la lupa va centrada y el input llena la caja. */
.hist-filters .hsearch { position:relative; height:var(--control-h); box-sizing:border-box; }
.hist-filters .hsearch svg { position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--faint); pointer-events:none; z-index:1; }
.hist-filters .hsearch input { width:100%; height:100%; box-sizing:border-box; padding:0 14px 0 40px;
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px;
  font-family:inherit; background:var(--surface); outline:none; }
.hist-filters .hsearch input:focus { border-color:var(--brand); }

.chip-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.chip { font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; font-family:inherit; }
.chip.on { background:var(--brand-bg); border-color:var(--brand); color:var(--brand); font-weight:600; }

.col-type { display:flex; align-items:center; gap:9px; }
.col-type .ico { width:34px; height:34px; border-radius:9px; background:var(--brand-bg); display:flex;
  align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.col-type .ttl { font-size:12.5px; color:var(--muted); margin-top:1px; }
.col-type .fol { font-size:14.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.store-cell { font-weight:600; } .store-cell .sub2 { font-weight:400; color:var(--faint); font-size:12px; }
.tablebox .ced { font-family:monospace; }
/* pills del historial SIN viñeta (la palabra + el color bastan) */
.pill-pend { background:var(--warn-bg); color:var(--warn); }
.pill-set { background:var(--success-bg); color:#15803d; }
.pill-out { background:var(--danger-bg); color:#b91c1c; }
.pill-pend::before, .pill-set::before, .pill-out::before { display:none; }
/* pills de origen del reporte */
.pill-origin-admin { background:var(--brand-bg); color:#1e40af; }
.pill-origin-company { background:var(--border-soft); color:var(--ink-soft); }
.pill-origin-admin::before, .pill-origin-company::before { display:none; }
.btn-send { color:var(--brand); border-color:#c7d8f7; }
.btn-send:hover { background:var(--brand-bg); }

.hist-pager { display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-size:13px; color:var(--muted); }
.hist-pager .hp-left { display:flex; align-items:center; gap:14px; }
.hist-pager .hp-per { display:flex; align-items:center; gap:6px; font-size:12.5px; }
.hist-pager .hp-per select { height:32px; padding:0 8px; border:1px solid var(--border); border-radius:7px;
  font-family:inherit; font-size:12.5px; background:var(--surface); }
.hist-pager .pages { display:flex; gap:5px; }
.hist-pager .pages button { min-width:32px; height:32px; border:1px solid var(--border); background:var(--surface);
  border-radius:7px; cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--ink-soft); padding:0 8px; }
.hist-pager .pages button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.hist-pager .pages button:disabled { opacity:.4; cursor:default; }

/* pantalla de detalle */
.rd-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:4px; }
.rd-id { display:flex; align-items:center; gap:12px; }
.rd-ico { width:48px; height:48px; border-radius:12px; background:var(--brand-bg); display:flex;
  align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.rd-title { font-size:26px; margin:0; font-weight:700; letter-spacing:-.02em; }
.rd-subtype { font-size:14px; color:var(--muted); font-weight:500; margin-top:2px; }
.rd-sent { color:var(--faint); font-size:13px; margin:0 0 18px; }
.rd-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px 20px; margin-bottom:22px;
  padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
.rd-meta > div { display:flex; flex-direction:column; gap:3px; }
.rd-lbl { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
.rd-val { font-size:13.5px; font-weight:600; }
.rd-section { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 12px; }
.dtl-table { width:100%; border-collapse:collapse; font-size:13px; }
.dtl-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:9px 12px; border-bottom:1px solid var(--border); background:#fbfcfe; }
.dtl-table td { padding:10px 12px; border-bottom:1px solid var(--border-soft); }
.dtl-table tr:last-child td { border-bottom:0; }
.dtl-table .ced { font-family:monospace; }
.dtl-table .time-badge { display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px;
  background:var(--brand-bg); color:var(--brand); font-family:monospace; }

/* ===================== WIZARD AUSENCIA (paso 4) ===================== */
.type-row { display:flex; gap:14px; align-items:flex-end; margin-bottom:8px; }
.coord-note { display:flex; gap:8px; background:var(--warn-bg); border:1px solid #f3e2bf; border-radius:var(--radius-md);
  padding:11px 14px; margin-bottom:16px; font-size:12.5px; color:var(--warn); }
.window-info { display:flex; align-items:flex-start; gap:9px; background:#f9fbff; border:1px solid #e2ecfb;
  border-radius:var(--radius-md); padding:11px 14px; margin-bottom:18px; font-size:12.5px; color:var(--ink-soft); }

.wcard { border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:14px; }
.wcard-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.wcard-head .wname { font-weight:650; font-size:14px; }
.wcard-head .wced { font-size:12px; color:var(--muted); font-family:monospace; margin-left:8px; }

.doc-box { margin-top:14px; border:1px dashed var(--border); border-radius:var(--radius-md); padding:14px 16px; background:#fbfcfe; }
.doc-box.block { border-color:#f3c2c2; background:#fef7f7; }
.doc-title { font-size:12.5px; font-weight:650; color:var(--ink-soft); margin-bottom:3px; }
.doc-note { font-size:11.5px; color:var(--muted); margin-bottom:10px; line-height:1.5; }
.doc-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.file-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; background:var(--success-bg); color:#15803d;
  padding:4px 10px; border-radius:8px; font-weight:600; }
.file-pill .x { cursor:pointer; color:#15803d; }
.pendwarn { display:flex; align-items:flex-start; gap:8px; background:var(--warn-bg); border:1px solid #f3e2bf;
  border-radius:var(--radius-md); padding:10px 14px; margin-top:10px; font-size:12px; color:var(--warn); }

.pill-ax { background:#eef2f7; color:var(--ink-soft); font-family:monospace; }
.pill-ax::before { display:none; }
.date-badge { display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px;
  background:var(--brand-bg); color:var(--brand); font-family:monospace; }

/* barra de seleccion en bloque (reutiliza estilo de selbar de marcaje si existe) */
.selbar { display:flex; align-items:center; gap:10px; background:var(--brand-bg); border:1px solid #d4e2fb;
  border-radius:var(--radius-md); padding:9px 14px; font-size:13px; color:var(--brand); margin-bottom:12px; }
.selbar.hidden { display:none; }
.selbar .spacer { flex:1; }

/* progreso "X de N configurados" (escala a muchos trabajadores) */
.progress-line { display:flex; align-items:center; gap:10px; margin:4px 0 16px; font-size:12.5px; color:var(--muted); }
.progress-bar { flex:1; height:7px; background:var(--border-soft); border-radius:999px; overflow:hidden; }
.progress-bar > div { height:100%; background:var(--success); width:0%; border-radius:999px; transition:width .25s; }

/* fila ya configurada (tono verde muy tenue) */
.wiz tbody tr.done-row { background:#fcfefd; }
.wiz tbody tr.done-row:hover { background:#f6fbf8; }

/* nombre de archivo recortado dentro del pill (modal de documento) */
.file-pill .fname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }

/* ===================== CONFIGURACION (pestanas) ===================== */
.cfg-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; flex-wrap:wrap; }
.cfg-tab { padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer;
  border:0; background:none; border-bottom:2px solid transparent; font-family:inherit;
  display:flex; align-items:center; gap:7px; }
.cfg-tab:hover { color:var(--ink-soft); }
.cfg-tab.on { color:var(--brand); border-bottom-color:var(--brand); }
.cfg-panel { display:none; }
.cfg-panel.on { display:block; }

.cfg-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; }
.cfg-card-head h3 { margin:0; }
.cfg-saved { font-size:12px; color:#15803d; font-weight:600; display:none; }

/* fila parametro: etiqueta+descripcion a la izquierda, control a la derecha */
.cfg-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--border-soft); }
.cfg-row:last-child { border-bottom:0; }
.cfg-meta { flex:1; min-width:0; }
.cfg-label { font-size:13.5px; font-weight:600; color:var(--ink); }
.cfg-desc { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.cfg-input { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.cfg-input input { width:230px; height:var(--control-h); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0 12px; font-size:13px; font-family:inherit; background:var(--surface); outline:none; }
.cfg-input input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.cfg-input input.narrow { width:120px; }
.cfg-secret { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.cfg-secret-note { font-size:11px; color:var(--faint); }
.cfg-lock { display:flex; align-items:flex-start; gap:9px; background:#f9fbff; border:1px solid #e2ecfb;
  border-radius:var(--radius-md); padding:11px 14px; font-size:12.5px; color:var(--ink-soft);
  margin-bottom:16px; line-height:1.5; }
.cfg-foot { margin-top:18px; display:flex; gap:10px; align-items:center; }

/* tabla de catalogos (tipos de ausencia / causas) */
.cfg-cat-table { width:100%; border-collapse:collapse; font-size:13px; }
.cfg-cat-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:9px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.cfg-cat-table td { padding:10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.cfg-cat-table tr:hover { background:#fafbfd; }
.pill-block { background:var(--danger-bg); color:#b91c1c; }
.pill-warn2 { background:var(--warn-bg); color:var(--warn); }
.pill-opt { background:#eef1f5; color:var(--muted); }
.pill-block::before, .pill-warn2::before, .pill-opt::before { display:none; }
.cfg-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cfg-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* resultado de la prueba de conexion de osTicket */
.cfg-test-result { margin-top:14px; border-radius:var(--radius-md); padding:12px 14px; font-size:13px; line-height:1.5; }
.cfg-test-result.testing { background:#f9fbff; border:1px solid #e2ecfb; color:var(--ink-soft); }
.cfg-test-result.good { background:var(--success-bg); border:1px solid #bbf7d0; color:#15803d; }
.cfg-test-result.bad { background:var(--warn-bg); border:1px solid #f3e2bf; color:var(--warn); }
.cfg-test-msg { font-weight:600; }
.cfg-test-detail { margin-top:6px; font-size:11.5px; opacity:.85; }
.cfg-test-detail code { font-family:monospace; word-break:break-all; }

/* tarjetas resumen (pestana Usuarios osTicket) */
.sum-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.sum-card { border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; background:var(--surface); }
.sum-card .n { font-size:26px; font-weight:700; letter-spacing:-.02em; }
.sum-card .l { font-size:12px; color:var(--muted); margin-top:2px; }
.sum-card.ok .n { color:var(--success); }
.sum-card.pend .n { color:var(--warn); }
.sum-card.none .n { color:var(--faint); }

/* ===================== WIZARD INGRESO (paso 4) =====================
   Modal de alta mas ancho (muchos campos) + secciones y lineas de
   validacion en vivo (banco/operadora/cedula). Reusa .grid2, .flabel,
   .window-info, .progress-line, .date-badge, .done-row del resto. */
.modal-ov .modal.modal-wide { max-width:600px; }
/* banda destacada de la fecha de ingreso (dato principal, arriba) */
.ig-band { background:#f0f7ff; border:1px solid #bcd8fb; border-radius:var(--radius-md); padding:14px 16px; margin-bottom:6px; }
.ig-band-t { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#1e40af; margin-bottom:9px; }
.ig-band input[type=date] { width:100%; height:46px; font-size:15px; font-weight:600; border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0 12px; font-family:inherit; background:var(--surface); outline:none; box-sizing:border-box; }
.ig-band input[type=date]:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.ig-band .hint { font-size:11.5px; color:#3b5b88; }
/* separador de seccion dentro del modal */
.ig-sec { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint);
  margin:16px 0 12px; padding-top:12px; border-top:1px dashed var(--border); }
/* inputs y selects del modal de ingreso (misma altura/estilo que el resto) */
.modal-ov .modal.modal-wide input, .modal-ov .modal.modal-wide select {
  width:100%; height:41px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 11px;
  font-family:inherit; font-size:13px; color:var(--ink); background:var(--surface); outline:none; box-sizing:border-box; }
.modal-ov .modal.modal-wide input:focus, .modal-ov .modal.modal-wide select:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
/* edad calculada (solo lectura) */
.ig-readonly { background:#f1f5f9; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 11px;
  font-size:13px; font-weight:600; color:var(--ink-soft); height:41px; display:flex; align-items:center; }
/* linea de feedback en vivo (banco/operadora/cedula) bajo el input */
.ig-line { font-size:11px; min-height:14px; margin-top:3px; color:var(--muted); }
.ig-line.ok { color:#15803d; }
.ig-line.warn { color:var(--warn); }
/* error de campo (rojo) bajo inputs sin linea propia */
.modal-ov .modal.modal-wide .ferr { color:var(--danger); font-size:11px; min-height:14px; margin-top:3px; }
/* etiqueta "(opcional)" tenue */
.modal-ov .modal.modal-wide .opt { color:var(--faint); font-weight:400; }
/* recaudos del trabajador (adjuntos por documento) en el modal de ingreso */
.docrow { display:flex; align-items:center; gap:10px; justify-content:space-between;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px; margin-bottom:7px; background:var(--surface); }
.docrow-name { font-size:13px; color:var(--ink); }
.docrow-act { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.docrow-foot { margin-top:4px; }
/* ficha solo-lectura del ingreso (Resumen -> Ver detalle): filas etiqueta+valor */
.vr-row { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:7px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.vr-row:last-child { border-bottom:0; }
.vr-lbl { color:var(--muted); flex-shrink:0; }
.vr-val { color:var(--ink); font-weight:500; text-align:right; word-break:break-word; }

/* ===================== CONFIGURACION: menu lateral =====================
   La vista de Configuracion paso de pestanas horizontales a un menu
   lateral izquierdo (escala mejor con muchas secciones). Columna fija a
   la izquierda + panel de contenido a la derecha. En movil colapsa a una
   sola columna (el menu arriba, scrollable en horizontal). */
.cfg-layout { display:flex; gap:22px; align-items:flex-start; }
.cfg-side { flex:0 0 224px; display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--border); border-radius:var(--radius-md); padding:10px; background:var(--surface);
  position:sticky; top:16px; }
.cfg-side-group { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); padding:12px 10px 5px; }
.cfg-side-group:first-child { padding-top:4px; }
.cfg-side-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 11px; border:0; background:none; border-radius:var(--radius-sm); cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:background .12s; }
.cfg-side-item:hover { background:var(--bg-soft, #f5f6f8); color:var(--ink); }
.cfg-side-item.on { background:var(--brand-bg); color:var(--brand); font-weight:650; }
.cfg-side-ic { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.cfg-panel-wrap { flex:1; min-width:0; }

@media (max-width:760px) {
  .cfg-layout { flex-direction:column; }
  /* CLAVE: la regla base trae flex:0 0 224px. En un layout que ahora es
     COLUMNA, ese flex-basis se interpreta como ALTURA -> la barra quedaba de
     224px de alto con los items perdidos en el centro. Se resetea a auto y se
     fuerza altura automatica + items centrados para que sea una barra fina
     scrollable en horizontal. */
  .cfg-side { position:static; flex:0 0 auto; height:auto; align-items:center;
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; width:100%;
    box-sizing:border-box; gap:4px; -webkit-overflow-scrolling:touch; }
  .cfg-side-group { display:none; }
  .cfg-side-item { white-space:nowrap; flex:0 0 auto; width:auto; }
}

/* ===================== WIZARD MODIFICACION (paso 4) =====================
   Modal de modificacion: cedula ancla (siempre va) + una fila por campo
   modificable con deteccion de cambio en vivo (borde azul + badge "cambia")
   + resumen de "lo que viajara". Reusa .modal-wide, .pill, .flabel, .hint,
   .wiz-foot del resto. */

/* Banda de la cedula: identifica al trabajador, no es editable, siempre va. */
.mo-anchor { display:flex; align-items:center; gap:10px; background:#f0f7ff; border:1px solid #bcd8fb;
  border-radius:var(--radius-md); padding:11px 14px; margin-bottom:14px; }
.mo-anchor-lbl { font-size:12.5px; font-weight:700; color:#1e40af; }
.mo-anchor-val { font-family:monospace; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.02em; }

/* Fila de campo: nombre del campo | control | estado | error. El control
   ocupa el centro; el estado (cambia/sin cambio/sin dato) va a la derecha. */
.mo-frow { display:grid; grid-template-columns:150px 1fr 120px; grid-template-areas:"name ctrl status" ". err err";
  gap:6px 12px; align-items:center; padding:11px 12px; border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); margin-bottom:8px; background:var(--surface); transition:border-color .12s, background .12s; }
.mo-frow.changed { border-color:var(--brand); background:var(--brand-bg); }
.mo-fname { grid-area:name; font-size:13px; font-weight:600; color:var(--ink); }
.mo-fname small { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; }
.mo-fctrl { grid-area:ctrl; min-width:0; }
.mo-fstatus { grid-area:status; text-align:right; }
.mo-ferr { grid-area:err; color:var(--danger); font-size:11.5px; min-height:0; }
.mo-ferr:empty { display:none; }
/* el nombre se despliega en 3 sub-campos: ocupa todo el ancho de la fila */
.mo-frow[data-row="nombre"] { grid-template-columns:150px 1fr; grid-template-areas:"name ctrl" ". err"; }
.mo-frow[data-row="nombre"] .mo-fstatus { display:none; }
/* el nombre se despliega en 3 sub-campos APILADOS (uno por linea) para que
   se lean y editen completos (los apellidos no caben en columna). Debajo,
   el nombre completo armado en una banda NO editable. */
.mo-namegrid { display:flex; flex-direction:column; gap:9px; }
.mo-namegrid > div { display:flex; flex-direction:column; gap:3px; }
.mo-namegrid .flabel { font-size:11px; line-height:1.3; color:var(--muted); }
/* nombre completo armado (solo lectura) bajo los 3 campos */
.mo-fullname { display:flex; align-items:baseline; gap:8px; margin-top:2px;
  background:#f1f5f9; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 11px; }
.mo-fullname .l { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--faint); flex-shrink:0; }
.mo-fullname .v { font-size:13.5px; font-weight:600; color:var(--ink); word-break:break-word; }
.mo-fullname .v:empty::after { content:'—'; color:var(--faint); font-weight:400; }
/* estado "sin cambio" / "sin dato" (texto tenue, no pill) */
.mo-same { font-size:11px; color:var(--faint); }
.mo-empty { font-size:11px; color:var(--muted); font-style:italic; }

/* Resumen "lo que viajara a la plantilla" */
.mo-summary { margin-top:14px; border:1px dashed var(--border); border-radius:var(--radius-md);
  padding:12px 14px; background:#fafbfd; }
.mo-sum-title { font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:8px; }
.mo-summary ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mo-summary li { display:flex; align-items:baseline; gap:8px; font-size:12.5px; }
.mo-summary .k { color:var(--muted); flex:0 0 130px; }
.mo-summary .arrow { color:var(--brand); font-weight:700; }
.mo-summary .nv { color:var(--ink); font-weight:600; word-break:break-word; }
.mo-none { font-size:12.5px; color:var(--muted); font-style:italic; }
/* contador de campos a modificar (pie del modal) */
.mo-frow + .mo-frow { margin-top:0; }
.wiz-foot .count { font-size:12.5px; color:var(--muted); }
.wiz-foot .count b { color:var(--brand); }

@media (max-width:560px) {
  .mo-frow { grid-template-columns:1fr; grid-template-areas:"name" "ctrl" "status" "err"; }
  .mo-fstatus { text-align:left; }
  .mo-summary .k { flex-basis:auto; }
}

/* ===================== DOCUMENTOS DEL PERSONAL =====================
   Biblioteca global de modelos/formatos. Lista de tarjetas horizontales
   con icono por tipo, pills de estado/categoria/version y acciones segun
   rol (admin gestiona; tienda solo descarga). Reusa .modal-ov/.modal,
   .pill, .flabel, .btn del resto. */
.pd-list { display:flex; flex-direction:column; gap:11px; }
.pd-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 18px; display:flex; gap:16px; align-items:flex-start; transition:border-color .12s, box-shadow .12s; }
.pd-card:hover { border-color:#cbd9ee; box-shadow:var(--shadow-md); }
.pd-card.arch { opacity:.72; background:#fbfcfd; }
.pd-ic { width:46px; height:46px; border-radius:var(--radius-md); flex-shrink:0; display:flex;
  align-items:center; justify-content:center; background:var(--brand-bg); color:var(--brand); }
.pd-ic.word { background:#e8f0fe; color:#1d4ed8; }
.pd-ic.pdf { background:var(--danger-bg); color:var(--danger); }
.pd-ic.xls { background:var(--success-bg); color:var(--success); }
.pd-main { flex:1; min-width:0; }
.pd-title { font-size:15px; font-weight:650; margin:0 0 3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pd-desc { font-size:12.5px; color:var(--ink-soft); margin:2px 0 9px; line-height:1.5; }
.pd-meta { display:flex; flex-wrap:wrap; gap:5px 16px; font-size:11.5px; color:var(--muted); }
.pd-meta .m { display:inline-flex; align-items:center; gap:5px; }
.pd-meta .m b { color:var(--ink-soft); font-weight:600; }
.pd-file { font-size:11.5px; color:var(--faint); font-family:ui-monospace,Menlo,monospace; margin-top:7px; }
.pd-acts { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
.pd-arow { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pd-danger { color:var(--danger); border-color:#f3c2c2; }
.pd-danger:hover { background:#fef2f2; }
/* pills propias */
.pd-active { background:var(--success-bg); color:var(--success); }
.pd-arch { background:#f1f5f9; color:var(--muted); }
.pd-ver { background:var(--brand-bg); color:var(--brand); }
.pd-cat { background:#f3e8ff; color:#7e22ce; }
/* aviso solo lectura (tienda) */
.pd-ro { background:var(--brand-bg); border:1px solid #bcd8fb; border-radius:var(--radius-md);
  padding:11px 15px; font-size:12.5px; color:#1e40af; margin-bottom:16px; display:flex; align-items:center; gap:9px; }
/* subtitulo de modal */
.pd-sub { font-size:12.5px; color:var(--muted); margin:0 0 18px; }
.modal-ov .modal.wide { max-width:600px; }
.modal-ov .modal textarea { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 11px; font-family:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  outline:none; resize:vertical; min-height:70px; box-sizing:border-box; margin-bottom:2px; }
.modal-ov .modal textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
/* caja informativa de version actual (modal nueva version) */
.pd-curbox { background:var(--brand-bg); border:1px solid #bcd8fb; border-radius:var(--radius-md);
  padding:11px 14px; margin-bottom:14px; font-size:12px; color:#1e40af; }
.pd-warnbox { background:var(--warn-bg); border:1px solid #f5d98a; border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:16px; font-size:12.5px; color:#7a5a12; line-height:1.5; }
/* dropzone */
.pd-drop { border:2px dashed #cbd9ee; border-radius:var(--radius-md); padding:22px; text-align:center;
  color:var(--muted); background:var(--bg); margin-bottom:14px; cursor:pointer; transition:.12s; }
.pd-drop:hover { border-color:var(--brand); background:var(--brand-bg); }
.pd-di { width:38px; height:38px; color:var(--brand); margin:0 auto 8px; }
.pd-drop b { color:var(--ink); font-size:13.5px; display:block; }
.pd-drop small { display:block; font-size:11.5px; margin-top:4px; }
/* historial de versiones */
.pd-ver-row { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.pd-ver-row:last-of-type { border-bottom:0; }
.pd-ver-num { width:34px; height:34px; border-radius:50%; background:var(--brand-bg); color:var(--brand);
  font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pd-ver-num.old { background:#f1f5f9; color:var(--muted); }
.pd-ver-body { flex:1; min-width:0; }
.pd-ver-file { font-size:13px; font-weight:600; color:var(--ink); }
.pd-ver-cmt { font-size:12px; color:var(--ink-soft); margin:3px 0; }
.pd-ver-who { font-size:11px; color:var(--muted); }
/* auditoria */
.pd-aud-row { display:flex; gap:11px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; }
.pd-aud-row:last-of-type { border-bottom:0; }
.pd-aud-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; align-self:flex-start; margin-top:5px; }
.pd-a-create { background:var(--success); } .pd-a-edit { background:var(--brand); }
.pd-a-ver { background:#7e22ce; } .pd-a-arch { background:var(--warn); }
.pd-a-rest { background:var(--success); } .pd-a-dl { background:var(--faint); }
.pd-aud-txt { flex:1; } .pd-aud-txt b { color:var(--ink); }
.pd-aud-when { color:var(--faint); font-size:11px; white-space:nowrap; }

@media (max-width:640px) {
  .pd-card { flex-direction:column; }
  .pd-acts { align-items:stretch; width:100%; }
  .pd-arow { justify-content:flex-start; }
}

/* ----- v1.87: lista AGRUPADA por categoria (secciones colapsables) ----- */
.pd-groups { display:flex; flex-direction:column; gap:14px; }
.pd-grp { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-md); }
.pd-grp.empty { box-shadow:none; opacity:.78; }
.pd-grp-h { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;
  user-select:none; }
.pd-grp-h:hover { background:var(--border-soft); }
.pd-grp-chev { color:var(--faint); transition:transform .15s; font-size:11px; }
.pd-grp.col .pd-grp-chev { transform:rotate(-90deg); }
.pd-grp-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.pd-grp-name { font-weight:650; font-size:14px; }
.pd-grp-count { color:var(--muted); font-size:12px; font-weight:500; }
.pd-grp-body { border-top:1px solid var(--border-soft); padding:12px 14px; display:flex;
  flex-direction:column; gap:11px; }
.pd-grp.col .pd-grp-body { display:none; }
.pd-empty { color:var(--muted); font-size:12.5px; padding:6px 4px; }
/* dentro de un grupo las tarjetas no llevan su propia sombra (la da el grupo) */
.pd-grp-body .pd-card { box-shadow:none; }
.pd-grp-body .pd-card:hover { box-shadow:var(--shadow-sm); }
/* punto de color dentro de la pill de categoria */
.pd-cat { gap:5px; }
.pd-cat .pd-cat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pd-cat::before { display:none; }

/* ----- v1.87: modal de subida/edicion a 2 columnas ----- */
.modal-ov .modal.wide2 { max-width:860px; }
.pd-upgrid { display:grid; grid-template-columns:1fr 1.25fr; gap:22px; }
.pd-upleft .flabel:first-child, .pd-upright .flabel:first-child { margin-top:0; }
.pd-upright { display:flex; flex-direction:column; }
.pd-upgrid input:not([type=checkbox]), .pd-upgrid select { width:100%; height:var(--control-h);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 11px; font-size:13px;
  font-family:inherit; color:var(--ink); background:var(--surface); outline:none; box-sizing:border-box;
  margin-bottom:2px; }
.pd-upgrid input:focus, .pd-upgrid select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.pd-upgrid .pd-drop { margin-bottom:2px; }

/* ----- v1.87: editor enriquecido (RTE) ----- */
.rte { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; flex:1;
  display:flex; flex-direction:column; min-height:190px; }
.rte:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.rte-bar { display:flex; gap:2px; padding:6px; border-bottom:1px solid var(--border);
  background:#fafbfd; flex-wrap:wrap; }
.rte-b { width:30px; height:30px; border:none; background:none; border-radius:6px; cursor:pointer;
  color:var(--ink-soft); font-size:13px; display:flex; align-items:center; justify-content:center;
  font-family:inherit; }
.rte-b:hover { background:var(--border-soft); }
.rte-sep { width:1px; background:var(--border); margin:4px 3px; }
.rte-area { padding:11px 13px; flex:1; font-size:13px; line-height:1.55; color:var(--ink);
  outline:none; overflow:auto; min-height:120px; }
.rte-area:empty:before { content:attr(data-ph); color:var(--faint); }
.rte-area ul, .rte-area ol { margin:6px 0; padding-left:20px; }
.rte-area a { color:var(--brand); }

/* ----- v1.87: confirmacion de nueva version ----- */
.pd-vbox { display:flex; align-items:center; gap:14px; background:var(--warn-bg);
  border:1px solid #f5d98a; border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px; }
.pd-vchip { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; white-space:nowrap; }
.pd-vchip .from { color:var(--muted); }
.pd-vchip .arr, .pd-vchip .to { color:var(--warn); }
.pd-vbox p { margin:0; font-size:12px; color:#7a5a12; line-height:1.5; }
.pd-vconfirm { display:flex; align-items:center; gap:9px; margin:12px 0 2px; font-size:12.5px;
  color:var(--ink-soft); cursor:pointer; }
.pd-vconfirm input { width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer; flex-shrink:0; }

/* ----- v1.87: gestion de categorias ----- */
.pd-catrow { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius-md); margin-bottom:8px; background:var(--surface); }
.pd-catrow.off { opacity:.6; }
.pd-catdot { width:14px; height:14px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--border); }
.pd-catdot:hover { box-shadow:0 0 0 2px var(--brand); }
.pd-catname { font-weight:600; font-size:13.5px; flex:1; }
.pd-catcode { color:var(--faint); font-size:11.5px; font-family:ui-monospace,Menlo,monospace; }
.pd-catacts { display:flex; gap:6px; flex-shrink:0; }
.pd-catadd { display:flex; gap:8px; margin-top:12px; }
.pd-catadd input { flex:1; height:var(--control-h); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0 11px; font-size:13px; font-family:inherit; outline:none;
  background:var(--surface); box-sizing:border-box; }
.pd-catadd input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }

@media (max-width:680px) {
  .pd-upgrid { grid-template-columns:1fr; }
}

/* ===================== FICHAS Y FOTOS DE COLABORADORES =====================
   Grid de tarjetas (una por persona del roster) con su foto tipo carnet y
   modal de subida con previsualizacion + guia de encuadre. Usa los tokens
   del portal; sin onclick inline (la CSP del sitio los bloquea). */
.wp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; }
.wp-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .12s, box-shadow .12s; }
.wp-card:hover { border-color:#cbd9ee; box-shadow:var(--shadow-md); }
.wp-photo { position:relative; aspect-ratio:1/1; background:var(--border-soft); display:flex;
  align-items:center; justify-content:center; cursor:pointer; }
.wp-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.wp-empty { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--faint); }
.wp-empty span { font-size:11.5px; }
/* avatar de iniciales cuando no hay foto (combina con el texto "Sin foto") */
.wp-initials { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; letter-spacing:.02em; line-height:1; }
.wp-nophoto { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--faint); }
.wp-nophoto svg { opacity:.85; }
.wp-badge { position:absolute; top:8px; right:8px; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:20px; }
.wp-badge.has { background:var(--success-bg); color:var(--success); }
.wp-badge.no { background:var(--warn-bg); color:var(--warn); }
/* Placeholder mientras se firma/carga la miniatura (lazy). Spinner discreto
   centrado sobre el fondo gris de la foto. */
.wp-photoload { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.wp-spin { width:26px; height:26px; border-radius:50%; border:3px solid var(--border);
  border-top-color:var(--brand); animation:wpspin .7s linear infinite; }
@keyframes wpspin { to { transform:rotate(360deg); } }
.wp-photo img.wp-fadein { animation:wpfade .25s ease; }
@keyframes wpfade { from { opacity:0; } to { opacity:1; } }
.wp-ov { position:absolute; inset:0; display:flex; flex-direction:column; gap:7px; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; }
.wp-photo:hover .wp-ov { opacity:1; background:rgba(15,23,42,.42); }
.wp-ov span { color:#fff; font-size:12px; font-weight:600; background:var(--brand); padding:7px 12px; border-radius:var(--radius-sm); }
/* Segunda accion del overlay: "Ver foto" (abre el visor grande sin entrar a
   la ficha). Estilo secundario (vidrio) para distinguirlo de "Ver ficha". */
.wp-ov-photo { display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:#fff; padding:7px 12px;
  border-radius:var(--radius-sm); background:rgba(255,255,255,.18); backdrop-filter:blur(2px);
  transition:background .12s; }
.wp-ov-photo:hover { background:rgba(255,255,255,.32); }
.wp-ov-photo svg { width:14px; height:14px; flex-shrink:0; }
.wp-body { padding:11px 13px 13px; display:flex; flex-direction:column; flex:1; }
.wp-name { font-size:13.5px; font-weight:600; line-height:1.25; margin:0 0 3px; color:var(--ink); }
.wp-ced { font-size:12px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
.wp-role { font-size:11.5px; color:var(--faint); margin-top:4px; }
/* espaciador flexible: empuja la fila SEXO/EDAD/ANT al fondo de la tarjeta,
   para que quede a la MISMA altura en todas aunque el cargo ocupe 1 o 2
   lineas o falten datos. */
.wp-spacer { flex:1 1 auto; min-height:6px; }
/* barra de departamento ARRIBA de la tarjeta (encima de la foto). Con
   departamento: etiqueta gris discreta. Sin departamento: accion azul
   clickeable "Asignar departamento". */
.wp-deptbar { display:flex; align-items:center; gap:6px; padding:7px 12px;
  font-size:11px; color:var(--muted); border-bottom:1px solid var(--border-soft);
  line-height:1.2; }
.wp-deptbar svg { flex-shrink:0; opacity:.85; }
.wp-deptbar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-deptbar.assign { color:var(--brand); cursor:pointer; font-weight:600; transition:background .12s; }
.wp-deptbar.assign:hover { background:var(--brand-bg); }

/* Modal (overlay fijo, igual que los demas modales del panel). */
.wp-modal-vp { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex;
  align-items:center; justify-content:center; padding:18px; z-index:1000; }
.wp-modal { background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:440px;
  padding:20px 22px; box-shadow:var(--shadow-lg); max-height:92vh; overflow:auto; position:relative; }
.wp-modal h3 { font-size:16px; font-weight:600; margin:0 0 2px; }
.wp-x { position:absolute; top:14px; right:14px; width:30px; height:30px; border:none;
  background:var(--border-soft); color:var(--ink-soft); border-radius:8px; cursor:pointer;
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s; }
.wp-x:hover { background:#e2e8f0; color:var(--ink); }
.wp-who { font-size:12.5px; color:var(--muted); margin:0 0 16px; }
.wp-who b { color:var(--ink); font-weight:600; }
.wp-help { background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:11px 13px; margin-bottom:16px; display:flex; gap:11px; }
.wp-ex { width:54px; height:54px; border-radius:var(--radius-sm); flex-shrink:0; position:relative;
  overflow:hidden; border:1px solid var(--border); background:#e8eef6; }
.wp-help-txt { font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.wp-help-txt b { color:var(--ink); }
.wp-stage { position:relative; width:230px; height:230px; margin:0 auto 14px; border-radius:var(--radius-md);
  overflow:hidden; background:#0f172a; display:flex; align-items:center; justify-content:center; }
.wp-stage img { width:100%; height:100%; object-fit:cover; }
.wp-ph { color:var(--ink-soft); font-size:12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.wp-guide { position:absolute; inset:0; pointer-events:none; }
.wp-guide-lbl { font-size:11px; color:var(--faint); text-align:center; margin:0 0 8px; }
.wp-meta { font-size:11.5px; color:var(--faint); text-align:center; margin:0 0 16px; min-height:15px; }
.wp-foot { display:flex; gap:8px; align-items:center; }

@media (max-width:560px) {
  .wp-stage { width:200px; height:200px; }
}

/* ===================== PERSONAL — FICHA (pagina) =====================
   Pagina del colaborador dentro de #pnlMain (no modal): barra de empresa,
   cabecera con foto, datos en dos columnas (ver) que se vuelven campos
   (editar). Origen del dato = punto de color (Excel turquesa / Manual
   morado). Sin degradados, sin negritas en valores. */
.wp-ficha { max-width:1000px; }
/* v6.150: "Volver" flotante. Se queda visible al hacer scroll (clave en
   móvil: antes había que subir mucho para volver). Pill con fondo sólido,
   pegado justo debajo de la topbar sticky (~56px). */
.ff-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--soft,#334155);
  background:var(--surface,#fff); border:1px solid var(--border); cursor:pointer; padding:7px 14px;
  margin-bottom:14px; font-family:inherit; border-radius:999px; box-shadow:0 2px 10px rgba(15,23,42,.10);
  position:sticky; top:70px; z-index:15; }
.ff-back:hover { color:var(--ink); border-color:var(--muted); }
.ff-back svg { width:16px; height:16px; }
/* Personal (grilla): mismo comportamiento flotante para su botón Volver. */
#wpBack { position:sticky; top:70px; z-index:15; box-shadow:0 2px 10px rgba(15,23,42,.10); }

/* Barra de empresa (contexto) */
.ff-emp { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 18px; margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px 28px; align-items:center; }
.ff-emp-main { display:flex; align-items:baseline; gap:10px; margin-right:6px; }
.ff-emp-code { font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:15px; color:var(--brand-dark, var(--brand)); }
.ff-emp-name { font-size:14px; font-weight:600; }
.ff-emp-item { font-size:12.5px; color:var(--ink-soft); }
.ff-emp-item .k { color:var(--faint); margin-right:5px; }

/* Tarjeta de la ficha */
.ff-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.ff-top { display:flex; gap:22px; align-items:center; padding:22px 24px; border-bottom:1px solid var(--border-soft); }
.ff-actions { margin-left:auto; align-self:flex-start; display:flex; gap:9px; align-items:center;
  flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.ff-ph { width:104px; height:104px; border-radius:var(--radius-md); flex-shrink:0; overflow:hidden;
  background:var(--bg-soft, #f1f5f9); border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; position:relative; }
.ff-ph img { width:100%; height:100%; object-fit:cover; }
.ff-ph .noimg { color:var(--faint); font-size:11px; text-align:center; line-height:1.3; padding:8px; }
.ff-ph.has { cursor:zoom-in; }
.ff-ph-edit { position:absolute; inset:0; background:rgba(15,23,42,.5); color:#fff; font-size:11.5px;
  font-weight:600; display:none; align-items:center; justify-content:center; cursor:pointer; }
.wp-ficha.editing .ff-ph-edit { display:flex; }
.ff-id h2 { font-size:21px; font-weight:600; line-height:1.2; margin:0 0 6px; color:var(--ink); }
.ff-id .ced { font-family:ui-monospace,Menlo,monospace; font-size:13.5px; color:var(--muted); }
.ff-id .meta { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
/* v5.02: chip largo de estado de publicacion (verde/naranja). En modo
   edicion se OCULTA (la cabecera se llena de botones, .ff-id se comprime y
   el pill de radio 999px envuelto en varias lineas se deformaba en un
   ovalo). En modo vista, si el ancho lo obliga a envolver, pasa a radio de
   tarjeta y texto multilinea sano en vez de huevo. */
.ff-id .meta .ff-chip-status { border-radius:12px; line-height:1.5; white-space:normal;
  text-align:left; max-width:100%; height:auto; }
.wp-ficha.editing .ff-chip-status { display:none; }
.ff-id .meta .pill { background:var(--bg-soft, #f1f5f9); color:var(--ink-soft); }

/* Aviso de campos faltantes */
.ff-note { margin:16px 24px 0; background:var(--warn-bg); color:var(--warn); font-size:12.5px;
  padding:10px 13px; border-radius:var(--radius-sm); display:flex; gap:8px; align-items:flex-start; line-height:1.45; }
.ff-note svg { flex-shrink:0; margin-top:1px; }

/* Cuerpo */
.ff-body { padding:6px 24px 0; }
.ff-sec { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--faint);
  margin:22px 0 6px; display:flex; align-items:center; gap:10px; }
.ff-sec::after { content:''; flex:1; height:1px; background:var(--border); }
.ff-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.ff-row { display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:baseline; padding:10px 0;
  border-bottom:1px solid var(--border-soft); }
.ff-row.full { grid-column:1 / -1; grid-template-columns:160px 1fr; }
.ff-lbl { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.ff-val { font-size:13.5px; color:var(--ink); }
.ff-val.empty { color:var(--faint); font-style:italic; }

/* Origen del dato: punto de color */
.src { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--faint); font-weight:500; }
.src .dot { width:7px; height:7px; border-radius:50%; }
.src.excel .dot { background:#0e7490; }
.src.manual .dot { background:#7e22ce; }

/* Modo edicion: inputs */
.ff-field { display:none; padding:9px 0 11px; border-bottom:1px solid var(--border-soft); }
.ff-field.full { grid-column:1 / -1; }
.wp-ficha.editing .ff-row { display:none; }
.wp-ficha.editing .ff-field { display:block; }
.ff-field label { font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;
  display:flex; align-items:center; gap:6px; }
.ff-field label .opt { font-weight:400; color:var(--faint); }
.ff-field input, .ff-field select { width:100%; padding:9px 11px; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:13.5px; font-family:inherit; color:var(--ink); background:var(--surface);
  box-sizing:border-box; outline:none; }
.ff-field input:focus, .ff-field select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.ff-field input[readonly] { background:var(--bg-soft, #f1f5f9); color:var(--muted); cursor:not-allowed; }
.ff-hint { font-size:11.5px; color:var(--faint); margin-top:5px; min-height:14px; }
.ff-hint.ok { color:var(--success); }
.ff-hint.warn { color:var(--danger); }

/* Pie de acciones */
.ff-foot { display:flex; gap:9px; align-items:center; padding:18px 24px; margin-top:14px; border-top:1px solid var(--border-soft); }
.btn-ghost-danger { color:var(--danger); border-color:#f3c2c2; }
.btn-ghost-danger:hover { background:#fef2f2; }
.ff-legend { font-size:11.5px; color:var(--faint); margin-top:12px; line-height:1.7; }
.ff-legend .src { font-size:11.5px; }

/* Visor de foto ampliada (lightbox) con descargar */
.wp-lb { position:fixed; inset:0; background:rgba(15,23,42,.82); display:none; align-items:center;
  justify-content:center; z-index:1100; padding:30px; cursor:zoom-out; }
.wp-lb.show { display:flex; }
.wp-lb img { max-width:90vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.wp-lb-tools { position:absolute; top:20px; right:24px; display:flex; gap:10px; }
.wp-lb-btn { height:38px; padding:0 14px; border:none; background:rgba(255,255,255,.16); color:#fff;
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center;
  gap:7px; font-family:inherit; }
.wp-lb-btn:hover { background:rgba(255,255,255,.28); }
.wp-lb-btn.icon { width:38px; padding:0; justify-content:center; font-size:18px; }
.wp-lb-btn svg { width:15px; height:15px; }
.wp-lb-cap { position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#fff; font-size:13px; opacity:.85; }

/* Modal de foto: dos columnas (actual + nueva) */
.pm-two { display:flex; gap:18px; align-items:stretch; margin-bottom:14px; }
.pm-col { flex:1; display:flex; flex-direction:column; align-items:center; }
.pm-col-lbl { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.pm-prev { width:100%; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; background:#0f172a;
  display:flex; align-items:center; justify-content:center; position:relative; }
.pm-prev img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.pm-prev .empty { color:var(--ink-soft); font-size:12px; text-align:center; padding:14px; line-height:1.4; }
.pm-help { background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:11px 13px; font-size:11.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:14px; }
.pm-help b { color:var(--ink); }
/* Acceso destacado a la guia de la foto (v3.16): boton de ancho completo
   dentro del bloque de ayuda del modal de foto, para que no quede perdido. */
.pm-guia { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
  margin-top:10px; padding:9px 12px; border:1px solid #bcd8fb; border-radius:var(--radius-sm);
  background:var(--brand-bg); color:var(--brand); font-size:12.5px; font-weight:600;
  text-decoration:none; transition:background .12s, border-color .12s; }
.pm-guia:hover { background:#e0ecff; border-color:var(--brand); }
.pm-guia svg { width:16px; height:16px; flex-shrink:0; }
.pm-guia .pm-guia-arrow { margin-left:auto; font-weight:700; }
.pm-arrow { display:flex; align-items:center; color:var(--faint); font-size:22px; align-self:center; flex-shrink:0; }

@media (max-width:600px) {
  .ff-grid { grid-template-columns:1fr; }
  .ff-row, .ff-row.full { grid-template-columns:130px 1fr; }
  .pm-two { flex-direction:column; }
  .pm-arrow { transform:rotate(90deg); }
  .ff-top { flex-wrap:wrap; }
  .ff-actions { margin-left:0; width:100%; justify-content:flex-start; }
}

/* ===================== GESTION DE LA LISTA DE PERSONAL =====================
   Botones de cabecera (Actualizar lista / Agregar / Limpiar), barra de
   estado del roster, marca "manual", y los modales de carga/alta/limpieza.
   Reusa .wp-modal/.wp-modal-vp/.wp-x/.wp-who/.wp-foot/.wp-help del modal de
   foto y .flabel/.btn del resto. */
.head-actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.wp-btn-danger { color:var(--danger); border-color:#f3c2c2; }
.wp-btn-danger:hover { background:#fef2f2; border-color:#e9a8a8; }
/* barra de estado del roster */
.wp-rosterbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 15px; margin-bottom:14px;
  font-size:12.5px; color:var(--ink-soft); }
.wp-rosterbar .rb-ic { color:var(--faint); }
.wp-rosterbar b { color:var(--ink); }
.wp-rosterbar .rb-sep { width:1px; height:16px; background:var(--border); }
.wp-rosterbar .rb-ok { color:var(--success); font-weight:600; }
.wp-rosterbar .rb-old { color:var(--warn); font-weight:600; }
/* marca "manual" en las tarjetas */
.wp-pill-manual { background:#f3e8ff; color:#7e22ce; }
/* dropzone de carga del Reporte 10 */
.wp-drop { border:2px dashed #cbd9ee; border-radius:var(--radius-md); padding:22px; text-align:center;
  color:var(--muted); background:var(--bg); margin-bottom:14px; cursor:pointer; transition:.12s; }
.wp-drop:hover { border-color:var(--brand); background:var(--brand-bg); }
.wp-di { width:38px; height:38px; color:var(--brand); margin:0 auto 8px; }
.wp-drop b { color:var(--ink); font-size:13.5px; display:block; }
.wp-drop small { display:block; font-size:11.5px; margin-top:4px; }
/* previsualizacion del parseo */
.wp-prev { border-radius:var(--radius-sm); padding:11px 13px; font-size:12.5px; margin-bottom:14px; line-height:1.5; }
.wp-prev.ok { background:var(--success-bg); border:1px solid #b6e3c8; color:#15803d; }
.wp-prev.warn { background:var(--danger-bg); border:1px solid #f3c2c2; color:#991b1b; }
/* banda ancla de cedula (alta manual) */
.wp-ced-anchor { display:flex; align-items:center; gap:10px; background:#f0f7ff; border:1px solid #bcd8fb;
  border-radius:var(--radius-md); padding:10px 14px; margin-bottom:14px; flex-wrap:wrap; }
.wp-ced-anchor .l { font-size:12.5px; font-weight:700; color:#1e40af; white-space:nowrap; }
.wp-ced-anchor input { width:140px; height:38px; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0 11px; font-family:ui-monospace,Menlo,monospace; font-size:14px; outline:none; background:#fff; }
.wp-ced-anchor input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.wp-ced-anchor .hint-side { font-size:11px; color:#1e40af; margin-left:auto; }
/* alta manual: inputs y grid */
.wp-modal .flabel { font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; display:block; }
.wp-modal .flabel .opt { font-weight:400; color:var(--faint); }
.wp-modal > .wp-modal-vp, .wp-modal input[type=text], .wp-modal select { font-family:inherit; }
.wp-modal input[type=text], .wp-modal select { width:100%; height:40px; border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0 11px; font-size:13px; color:var(--ink); background:var(--surface);
  outline:none; margin-bottom:12px; box-sizing:border-box; }
.wp-modal input[type=text]:focus, .wp-modal select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.wp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.wp-namesplit { font-size:11.5px; color:var(--brand); background:var(--brand-bg); border-radius:var(--radius-sm);
  padding:8px 11px; margin:-6px 0 12px; line-height:1.5; }
/* cajas de aviso del modal limpiar */
.wp-dangerbox { background:var(--danger-bg); border:1px solid #f3c2c2; border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:12px; font-size:12.5px; color:#991b1b; line-height:1.5; }
.wp-okbox { background:var(--success-bg); border:1px solid #b6e3c8; border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:16px; font-size:12.5px; color:#15803d; line-height:1.5; }

@media (max-width:600px) {
  .head-actions { width:100%; }
  .head-actions .btn { flex:1; justify-content:center; }
  .wp-grid2 { grid-template-columns:1fr; }
  .wp-ced-anchor .hint-side { margin-left:0; width:100%; }
}

/* ===================== GRILLA DE EMPRESAS — columnas enriquecidas =====
   Columna Codigo: alias grande coloreado por tipo de empresa + data_area
   debajo. Razon social + RIF. Zona/Subzona + Concepto combinados. Columna
   Personal: cantidad + chip de metodo (S/R10/RAX) + frescura + quien. */
/* Codigo: alias grande + data_area chico */
.code-cell .alias { font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:16px; line-height:1.15; }
.code-cell .darea { font-size:11px; color:var(--faint); font-family:ui-monospace,Menlo,monospace; margin-top:2px; }
/* color del alias segun tipo de empresa */
.ty-tienda   { color:#2563eb; }  /* azul   */
.ty-import   { color:#9333ea; }  /* morado */
.ty-externa  { color:#0d9488; }  /* teal   */
.ty-admin    { color:#d97706; }  /* ambar  */
.ty-servicio { color:#dc2626; }  /* rojo   */
.ty-online   { color:#db2777; }  /* rosa   */
/* Razon social + RIF */
.name-cell .nm { font-weight:500; line-height:1.3; }
.name-cell .rif { font-size:11px; color:var(--faint); font-family:ui-monospace,Menlo,monospace; margin-top:1px; }
/* Zona/Subzona + Concepto */
.zc-cell .zc1 { line-height:1.3; }
.zc-cell .zc2 { font-size:11.5px; color:var(--muted); margin-top:1px; }
/* Personal */
.cell-personal { line-height:1.35; }
.cell-personal .l1 { font-weight:700; font-size:15px; }
.cell-personal .l2 { font-size:11px; color:var(--muted); margin-top:1px; line-height:1.5; }
/* chips de metodo de carga del roster */
.m { display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:5px;
  font-size:10.5px; font-weight:700; }
.m-s   { background:#ecfdf5; color:#047857; }  /* Sincronizacion API */
.m-r10 { background:#eff6ff; color:#1d4ed8; }  /* Reporte 10 */
.m-rax { background:#fef3c7; color:#92400e; }  /* Reporte AX excel */
.m-man { background:var(--border-soft); color:var(--muted); }  /* sin carga */
/* frescura de la ultima carga */
.fresh-ok  { color:var(--success); }
.fresh-mid { color:var(--muted); }
.fresh-old { color:var(--warn); }

/* ===================== EMPRESAS — STAT CARDS (estructura) ==============
   Solo en la principal: linea 1 (Empresas/Zonas/Subzonas/Tipos) + linea 2
   con el desglose por tipo (color por tipo via --tc). */
.emp-stats { margin:0 0 16px; }
.emp-srow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.emp-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:13px 16px; }
.emp-stat .k { font-size:11.5px; color:var(--muted); font-weight:600; }
.emp-stat .v { font-size:26px; font-weight:750; letter-spacing:-.02em; margin-top:4px; line-height:1.1; }
.emp-stat .hint { font-size:11px; color:var(--faint); margin-top:2px; }
.emp-types { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:12px; }
.emp-tcard { background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--tc,var(--border)); border-radius:var(--radius-sm); padding:9px 12px; }
.emp-tcard .nm { font-size:10.5px; color:var(--muted); font-weight:600; display:flex; align-items:center;
  gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-tcard .nm .d { width:7px; height:7px; border-radius:50%; background:var(--tc,var(--muted)); flex-shrink:0; }
.emp-tcard .v { font-size:20px; font-weight:750; margin-top:3px; }
@media (max-width:1000px) { .emp-types { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px)  { .emp-srow { grid-template-columns:repeat(2,1fr); } }

/* Pildora de Tipo en la grilla (punto de color + etiqueta) */
.tpill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--ink-soft); padding:3px 9px; border-radius:999px; background:var(--border-soft); white-space:nowrap; }
.tpill .d { width:7px; height:7px; border-radius:50%; background:var(--tc,var(--muted)); }

/* ===================== PERSONAL — CARDS DEMOGRAFICAS (detalle empresa) ===
   Sexo / Edades / Estado civil / Cargos sobre el roster cargado. En no-tienda
   se omite Cargos (3 columnas con .cols3). */
/* v6.110: la fila vuelve a 4 cards (Sexo/Edades/Estado civil/Cargos); la
   Antigüedad pasó a card propia de ancho completo (.wpd-ten), abajo. */
.wpd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.wpd-stats.cols3 { grid-template-columns:repeat(3,1fr); }
.wpd-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:13px 15px 15px; display:flex; flex-direction:column; min-height:150px; }
.wpd-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; row-gap:2px; margin-bottom:11px; }
.wpd-head .t { font-size:12.5px; font-weight:700; color:var(--ink); }
/* v6.109: esquina un tono más fuerte (--muted en vez de --faint) para que se
   lea; el promedio/porcentaje va resaltado en <b>. */
.wpd-head .n { font-size:11px; color:var(--muted); text-align:right; }
.wpd-head .n b { color:var(--ink-soft); font-weight:750; }
.wpd-sexbar { height:26px; border-radius:8px; overflow:hidden; display:flex; background:var(--border-soft); }
.wpd-sexbar i { display:block; height:100%; }
.wpd-sexleg { display:flex; justify-content:space-between; align-items:center; margin-top:11px; font-size:13px; }
.wpd-sexleg .side { display:flex; align-items:center; gap:6px; }
.wpd-sexleg .lab { font-size:13px; font-weight:750; }
.wpd-sexleg .lab.m { color:#2563eb; }
.wpd-sexleg .lab.f { color:#ec4899; }
.wpd-sexleg .pct { font-size:16px; font-weight:750; color:var(--ink); }
.wpd-sexleg .cnt { font-size:12.5px; color:var(--muted); }
.wpd-bars { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.wpd-bar { display:grid; grid-template-columns:54px 1fr 26px; align-items:center; gap:9px; }
.wpd-bl { font-size:11.5px; color:var(--muted); text-align:right; white-space:nowrap; }
.wpd-bt { height:9px; border-radius:6px; background:var(--border-soft); overflow:hidden; }
.wpd-bt i { display:block; height:100%; border-radius:6px; }
.wpd-bn { font-size:11.5px; font-weight:600; text-align:right; color:var(--ink); }
.wpd-empty { font-size:11.5px; color:var(--faint); font-style:italic; margin:auto 0; text-align:center; padding:8px; }
@media (max-width:1000px) { .wpd-stats, .wpd-stats.cols3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .wpd-stats, .wpd-stats.cols3 { grid-template-columns:1fr; } }

/* ===== v6.111: card ANTIGÜEDAD (Variante A · tienda+grupo por cargo + posición) ===== */
.wpd-ten { margin-bottom:14px; min-height:0; }
.wpd-ten-body { display:flex; align-items:stretch; gap:0; }
.wpd-ten-cgs { display:flex; flex-wrap:wrap; gap:24px; }
.wpd-ten-cg { width:168px; }
.wpd-ten-cg .cg-n { font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; }
.wpd-ten-cg .cg-n .cc { color:var(--faint); font-weight:600; font-size:10.5px; margin-left:5px; }
.wpd-ten-cg .cg-stat { display:flex; align-items:baseline; gap:7px; }
.wpd-ten-cg .cg-stat .v { font-size:19px; font-weight:750; color:var(--ink); line-height:1.25; font-variant-numeric:tabular-nums; min-width:44px; }
.wpd-ten-cg .cg-stat.grp .v { font-size:15px; color:#4f46e5; }
.wpd-ten-cg .cg-stat .k { font-size:9px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.03em; }
.wpd-ten-cg .cg-cmp { font-size:10.5px; font-weight:800; white-space:nowrap; margin:6px 0 2px; }
.wpd-ten-cg .cg-cmp.up { color:#0f766e; }
.wpd-ten-cg .cg-cmp.dn { color:#b45309; }
.wpd-ten-cg .cg-cmp .bm { color:var(--faint); font-weight:600; }
.wpd-ten-cg .cg-refs { font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.wpd-ten-cg .cg-refs .rk { color:var(--faint); }
/* paneles de posición (derecha) */
.wpd-pos-wrap { margin-left:auto; display:flex; }
.wpd-pos { padding:0 20px; border-left:1px solid var(--border-soft); display:flex; flex-direction:column; justify-content:center; }
.wpd-pos .cap { font-size:9.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; text-align:center; white-space:nowrap; }
.wpd-pos .cap.cc { color:#4f46e5; }
.wpd-duo { display:flex; gap:16px; text-align:center; }
.wpd-duo .p { min-width:74px; }
.wpd-duo .pk { font-size:9px; font-weight:800; color:var(--faint); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.wpd-duo .pr { font-size:26px; font-weight:800; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.wpd-duo .pr.g { color:#4f46e5; }
.wpd-duo .pr .of { font-size:12px; font-weight:700; color:var(--faint); }
.wpd-duo .pt { font-size:9px; font-weight:800; margin-top:6px; padding:1px 8px; border-radius:999px; display:inline-block; }
.wpd-duo .pt.bad { color:#b45309; background:#fef6e7; }
.wpd-duo .pt.mid { color:var(--muted); background:var(--border-soft); }
.wpd-duo .pt.good { color:#0f766e; background:#e7f7ee; }
.wpd-ten-simple { display:flex; align-items:stretch; gap:10px; }
.wpd-ten-simple .s { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; padding:6px 0; }
.wpd-ten-simple .s.gr { border-left:1px solid var(--border-soft); }
.wpd-ten-simple .l { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
.wpd-ten-simple .v { font-size:22px; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; }
.wpd-ten-simple .s.gr .v { color:#4f46e5; }
/* responsive: los paneles bajan debajo de los cargos */
@media (max-width:1100px) {
  .wpd-ten-body { flex-direction:column; }
  .wpd-pos-wrap { margin-left:0; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-soft); }
  .wpd-pos:first-child { padding-left:0; border-left:0; }
}

/* ===================== SINCRONIZAR TODO (modal de progreso) ============ */
.sa-okbox { background:var(--success-bg); border:1px solid #b6e3c8; color:#15803d;
  border-radius:var(--radius-md); padding:10px 13px; font-size:12.5px; line-height:1.5; }
.sa-bar { height:10px; border-radius:6px; background:var(--border-soft); overflow:hidden; }
.sa-fill { height:100%; width:0%; background:var(--brand); border-radius:6px; transition:width .2s; }
.sa-log { max-height:200px; overflow:auto; border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:4px 8px; margin-top:6px; }
.sa-row { display:flex; justify-content:space-between; gap:10px; padding:3px 2px; font-size:12px;
  border-bottom:1px solid var(--border-soft); }
.sa-row:last-child { border-bottom:none; }
.sa-row .c { font-family:ui-monospace,Menlo,monospace; font-weight:600; }
.sa-row.ok .r { color:var(--success); }
.sa-row.fail .r { color:var(--danger); }

/* ===================== CAMPOS REQUERIDOS SIN LLENAR ==================== */
/* Marca suave para indicar que el campo es obligatorio y aun esta vacio:
   borde rojo punteado (+ rayitas tenues en los inputs). Se quita via JS al
   completarlo. Usado en el modal de marcaje manual. */
input.needfill, select.needfill {
  border:1.5px dashed var(--danger);
}
input.needfill {
  background-image:repeating-linear-gradient(45deg,
    rgba(220,38,38,.07), rgba(220,38,38,.07) 6px,
    transparent 6px, transparent 12px);
}
input.needfill:focus, select.needfill:focus {
  outline:none; border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

/* ===================== TARJETA: mini-stats + cumpleanos ================ */
/* Mini-fila SEXO / EDAD / ANT bajo el cargo. grid-template-columns se setea
   inline segun cuantos datos haya (1 a 3). */
.wp-mini { display:grid; margin-top:8px; border:1px solid var(--border); border-radius:9px;
  overflow:hidden; background:var(--bg-soft, #fcfcfd); }
.wp-mini-c { padding:5px 4px; text-align:center; }
.wp-mini-c + .wp-mini-c { border-left:1px solid var(--border); }
.wp-mini-l { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:1px; }
.wp-mini-v { font-size:12.5px; font-weight:700; line-height:1.1; color:var(--ink); }
.wp-mini-v.m { color:#2563eb; }
.wp-mini-v.f { color:#db2777; }
.wp-mini-v.bday { color:#d97706; }

/* Cumpleanos sobre la foto: aro dorado + cintita + confeti (solo el dia). */
.wp-photo.wp-bday::after { content:""; position:absolute; inset:0; z-index:3;
  box-shadow:inset 0 0 0 3px #f59e0b; pointer-events:none; }
.wp-bflag { position:absolute; top:8px; left:8px; z-index:4; display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:800; color:#fff; padding:2px 8px; border-radius:999px;
  background:linear-gradient(90deg,#ec4899,#f59e0b); box-shadow:0 1px 4px rgba(0,0,0,.2); }
.wp-confetti { position:absolute; inset:0; z-index:2; pointer-events:none; }
.wp-confetti i { position:absolute; width:6px; height:6px; border-radius:1px; opacity:.9; transform:rotate(20deg); }

/* ===================== USUARIOS — GRILLA UNIFICADA (portal + osTicket) ==
   Una sola grilla, solo tiendas. Dos familias de columnas coloreadas:
   portal (azul) y osTicket (verde). Cada celda de estado puede llevar dos
   acciones (mini-botones) alineadas a la derecha. Reusa .sum-cards/.sum-card,
   .pill-*, .tablebox.scroll-x, .btn-mini del resto del panel. */
/* 5a tarjeta-resumen: con clave de acceso osTicket (violeta) */
.sum-card.portal .n { color:var(--brand); }
.sum-card.acc .n { color:#7c3aed; }
/* Grupos de columnas: cabecera y celdas con tinte suave */
.tablebox th.grp-portal, .tablebox td.grp-portal { background:rgba(37,99,235,.04); }
.tablebox th.grp-ost, .tablebox td.grp-ost { background:rgba(22,163,74,.045); }
.tablebox thead th.grp-portal { color:#1d4ed8; }
.tablebox thead th.grp-ost { color:#15803d; }
.tablebox tbody tr:hover td.grp-portal { background:rgba(37,99,235,.07); }
.tablebox tbody tr:hover td.grp-ost { background:rgba(22,163,74,.08); }
/* Estado osTicket: remitente en una linea + estado de clave debajo */
.ost-state { display:flex; flex-direction:column; gap:3px; align-items:flex-start; line-height:1.4; }
/* Primera linea: pill "Remitente" + su #id, alineados y juntos (como el mockup) */
.ost-remit { display:inline-flex; align-items:center; gap:6px; }
.id-tag { font-size:11px; color:var(--faint); }
.acc-line { font-size:11px; color:#7c3aed; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.acc-line svg { width:12px; height:12px; }
.acc-none { font-size:11px; color:var(--faint); }
/* Contenedor de acciones por celda: dos mini-botones, alineados a la derecha */
.cell-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.cell-actions .btn-mini { margin-left:0; }
/* Boton violeta: "Dar acceso" (crear clave osTicket) */
.btn-violet { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.btn-violet:hover { background:#6d28d9; border-color:#6d28d9; }

/* ----- Vista Usuarios COMPACTA (alinea la grilla real al mockup) -----
   Scope exclusivo .u-compact: no afecta otras tablas (Quincenas, Empresas,
   Historial) que usan las medidas globales, mas aireadas. Replica las
   medidas del mockup_usuarios_unificado_v2: celdas 11x14, pills planas sin
   viñeta, botones mini bajos. */
.u-compact.tablebox { box-shadow:none; }
.u-compact table { font-size:13px; }
.u-compact th { padding:11px 14px; font-size:11.5px; }
.u-compact.scroll-x th, .u-compact.scroll-x td { padding-left:14px; padding-right:14px; }
.u-compact td { padding:11px 14px; }
/* pills planas dentro de la grilla de Usuarios (sin punto, mas bajas) */
.u-compact .pill { padding:2px 9px; font-size:11px; gap:0; }
.u-compact .pill::before { display:none; }
/* botones mini mas bajos (altura automatica, como el mockup) */
.u-compact .btn-mini { height:auto; padding:4px 9px; font-size:12px; margin-left:0; }
.u-compact .btn-mini svg { width:12px; height:12px; }
/* filas de accion mas juntas */
.u-compact .cell-actions { gap:5px; }
.u-compact .ost-state { gap:2px; }

/* ===================== EQUIPO — tres grillas por rol =====================
   Fila superadmin destacada + bloques de rol (titulo + StatsCards + grilla).
   Reusa .sum-card, .tablebox.u-compact, .pill-* del resto. */
/* Fila superadmin (fuera de las grillas) */
.su-card { display:flex; align-items:center; gap:16px; background:linear-gradient(180deg,#fbfcff,var(--surface));
  border:1px solid #dbe4f5; border-left:3px solid var(--brand); border-radius:var(--radius-lg);
  padding:16px 18px; margin-bottom:22px; }
.su-av { width:46px; height:46px; border-radius:50%; background:var(--brand-bg); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0; }
.su-info { flex:1; min-width:0; }
.su-name { font-size:15px; font-weight:650; }
.su-sub { font-size:12.5px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.su-user { font-family:ui-monospace,Menlo,monospace; }
.su-acts { display:flex; gap:8px; flex-shrink:0; }

/* Bloque de rol: encabezado + stats + grilla */
.role-block { margin-bottom:30px; }
.role-head { display:flex; align-items:center; gap:10px; margin:0 2px 12px; flex-wrap:wrap; }
.role-title { font-size:16px; font-weight:650; letter-spacing:-.01em; }
.role-badge { font-size:11px; font-weight:700; color:#fff; border-radius:20px; padding:2px 9px; }
.rb-admin { background:var(--brand); } .rb-gestor { background:#7c3aed; } .rb-editor { background:#0d9488; }
.role-desc { font-size:12.5px; color:var(--muted); }

/* StatsCards con numero de columnas fijo (sobreescribe el auto-fit global) */
.sum-cards.c4 { grid-template-columns:repeat(4,1fr); }
.sum-cards.c3 { grid-template-columns:repeat(3,1fr); }
/* colores extra de StatsCards para Equipo */
.sum-card.total .n { color:var(--brand); }
.sum-card.acc .n { color:#7c3aed; }
.sum-card.off .n { color:var(--danger); }

/* Celda de alcance: chips Tiendas / Empresas apilados */
.scope-cell { display:flex; flex-direction:column; gap:3px; line-height:1.35; }
.sc-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft); flex-wrap:wrap; }
.sc-chip .k { color:var(--faint); min-width:58px; }
.sc-chip b { font-weight:650; color:var(--ink); }
.sc-none { font-size:11px; color:var(--faint); }
.sc-plus { color:var(--success); font-weight:600; }
.sc-minus { color:var(--danger); font-weight:600; }

/* pills de rol/cliente en Equipo */
.pill-role { background:var(--brand-bg); color:#1d4ed8; }
.pill-acc { background:#ede9fe; color:#5b21b6; }
.pill-role::before, .pill-acc::before { display:none; }

/* nombre/correo en las grillas de Equipo */
.cell-name { font-weight:500; }
.cell-mail { font-size:12.5px; color:var(--muted); }

/* v5.07: la celda de contacto muestra correo + telefono. El telefono es lo que
   habilita mandarle las credenciales por WhatsApp; "Sin telefono" en gris claro
   deja a la vista a quien falta cargarselo (se hace con el boton Editar). */
.ct-mail { font-size:12.5px; color:var(--muted); }
.ct-tel { font-size:11.5px; color:var(--ink-soft, #475569); margin-top:3px; white-space:nowrap; }
.ct-tel.none { color:var(--faint); font-style:italic; }

/* ===== v5.10: modal de credenciales (Equipo) =====
   Reemplaza los alert() con los que se mostraba la clave. */
.cr-ok { display:flex; gap:9px; align-items:center; background:#f0fdf4; border:1px solid #bbf7d0;
  color:#15803d; border-radius:10px; padding:10px 12px; font-size:12.5px; margin-bottom:16px; font-weight:600; }
.cr-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:14px; }
.cr-r { display:flex; align-items:center; gap:10px; padding:10px 13px;
  border-bottom:1px solid var(--border-soft,#eef0f3); font-size:13px; }
.cr-r:last-child { border-bottom:0; }
.cr-r .k { width:82px; flex:none; font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; }
.cr-r .v { flex:1; min-width:0; font-weight:600; word-break:break-all; }
.cr-r .v.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.cr-r.pw { background:#fffbeb; }
.cr-r.pw .v { color:#92400e; }
.cr-cp { border:1px solid var(--border); background:var(--surface); border-radius:7px; padding:3px 8px;
  font-size:11px; color:var(--muted); cursor:pointer; flex:none; font-family:inherit; }
.cr-cp:hover { background:var(--border-soft,#eef0f3); color:var(--ink); }
.cr-note { display:flex; gap:8px; align-items:flex-start; border-radius:10px; padding:9px 12px;
  font-size:12px; line-height:1.5; margin-bottom:14px; }
.cr-note.temp { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.cr-note.fija { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
.cr-note b { font-weight:800; }
.cr-wa { border:1px solid var(--border); border-radius:12px; padding:12px 13px; background:var(--surface2,#f8fafc); }
.cr-wa-h { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.cr-wa-h .t { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.cr-wa-h .sp { flex:1; }
.cr-wa-h .tel { font-size:12px; color:var(--ink-soft,#334155); font-weight:600; }
.cr-wa-prev { background:#dcf8c6; border-radius:11px 11px 11px 3px; padding:9px 11px; font-size:12px;
  line-height:1.55; white-space:pre-wrap; word-break:break-word; color:#0f172a; max-height:170px; overflow:auto; }
.cr-nophone { display:flex; gap:8px; align-items:flex-start; background:#f8fafc; border:1px dashed var(--border);
  border-radius:10px; padding:11px 12px; font-size:12px; color:var(--muted); line-height:1.5; }
.cr-nophone b { color:var(--ink-soft,#334155); font-weight:700; }
.cr-sent { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; border-radius:10px;
  padding:10px 12px; font-size:12.5px; font-weight:600; }
.btn-wa { background:#25d366; border-color:#25d366; color:#fff; }
.btn-wa:hover { background:#128c7e; border-color:#128c7e; }
.btn-wa:disabled { opacity:.5; }

/* Ultimo acceso al portal (last_login_at): linea gris chica bajo el estado. */
.cell-lastlogin { font-size:10.5px; color:var(--faint); margin-top:4px; white-space:nowrap; }
.cell-lastlogin.none { font-style:italic; }

/* Aviso "que ve el agente en osTicket" dentro del editor de alcance */
.sc-ostinfo { display:flex; align-items:flex-start; gap:10px; background:#f0f7ff;
  border:1px solid #d3e2fd; border-radius:var(--radius-md); padding:12px 16px;
  margin-bottom:16px; font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.sc-ostinfo-ic { font-size:18px; flex-shrink:0; line-height:1.3; }
.sc-ostinfo b { color:var(--ink); }

/* Contador de departamentos dentro del boton "Departamentos" de Empresas */
.dep-count { display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 5px; margin-left:2px; border-radius:9px;
  background:var(--brand-bg); color:var(--brand); font-size:10.5px; font-weight:700;
  line-height:1; vertical-align:middle; }

/* =====================================================================
   MOVIL (<=768px) — BLOQUE 1: ARMAZON
   Telefono y tablet chica. El sidebar se comporta como CAJON deslizante
   (off-canvas) reutilizando la clase .hidden-nav que ya maneja el boton
   hamburguesa. En movil el layout ARRANCA con .hidden-nav (lo pone el JS
   de renderPanel); aqui solo definimos como se ve el cajon, el backdrop
   y la topbar/paddings compactos. Nada de esto afecta al escritorio.
   ===================================================================== */
@media (max-width:768px) {
  /* El sidebar deja de empujar el contenido: pasa a cajon fijo por encima. */
  .pnl-side {
    position:fixed; left:0; top:0; height:100dvh; z-index:120;
    width:270px; max-width:82vw;
    box-shadow:2px 0 22px rgba(0,0,0,.20);
    transition:transform .24s ease;
  }
  /* Cerrado por defecto (fuera de pantalla). El layout arranca en
     .hidden-nav, asi que el estado normal en movil es: cajon oculto. */
  .pnl-layout.hidden-nav .pnl-side { position:fixed; transform:translateX(-100%); box-shadow:none; }
  /* Abierto: cuando NO esta .hidden-nav (el hamburguesa lo quito). */
  .pnl-layout:not(.hidden-nav) .pnl-side { transform:translateX(0); }

  /* En movil no aplica el modo riel: si quedara la clase, se ignora. */
  .pnl-layout.rail .pnl-side { width:270px; max-width:82vw; }
  .pnl-layout.rail .pnl-bname, .pnl-layout.rail .pnl-bver,
  .pnl-layout.rail .pnl-nav button span, .pnl-layout.rail .gh-label,
  .pnl-layout.rail .nav-ghead-chev, .pnl-layout.rail .pnl-logo,
  .pnl-layout.rail .pnl-brand > .pnl-bwrap { display:revert; }

  /* Backdrop oscuro detras del cajon (creado por JS con id=pnlBackdrop).
     Visible solo cuando el cajon esta abierto (layout sin .hidden-nav). */
  #pnlBackdrop {
    position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.42);
    opacity:0; pointer-events:none; transition:opacity .24s ease; }
  .pnl-layout:not(.hidden-nav) ~ #pnlBackdrop,
  body.nav-open #pnlBackdrop { opacity:1; pointer-events:auto; }

  /* El boton flotante .nav-reopen no se usa en movil: abre con el
     hamburguesa de la topbar. Se oculta para no duplicar controles. */
  .pnl-layout.hidden-nav .nav-reopen { display:none; }

  /* Topbar compacta: el hamburguesa a la izquierda, usuario/campana a la
     derecha. Menos padding y datos de usuario mas discretos. */
  .pnl-topbar { padding:10px 14px; gap:10px; }
  .pnl-ham { display:flex; margin-right:auto; }
  .pnl-uinfo { display:none; }            /* nombre/rol ya estan en el cajon */
  .pnl-logout { padding:8px 10px; }
  .pnl-logout span, .pnl-logout { font-size:0; }
  .pnl-logout svg { width:18px; height:18px; }

  /* Contenido a todo el ancho, con respiro reducido. */
  .pnl-content { width:100%; }
  .pnl-main { padding:16px 14px; }
  .pnl-head { flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:18px; }
  .pnl-head h1 { font-size:19px; }

  /* ---------------------------------------------------------------
     BLOQUE 2 — HISTORIAL: tabla -> tarjetas apiladas.
     El JS pinta #hCards en movil y oculta .tablebox. Aqui damos estilo
     a las tarjetas y compactamos filtros/atajos/paginador.
     --------------------------------------------------------------- */
  /* Filtros del historial: apilados, cada control a lo ancho (combos). */
  .hist-filters { flex-direction:column; align-items:stretch; gap:9px; }
  .hist-filters .fl { width:100%; }
  .hist-filters .fl select, .hist-filters .fl > input,
  .hist-filters .hsearch, .hist-filters .hsearch input { width:100%; box-sizing:border-box; }
  .hist-filters .fl-search { min-width:0; }
  /* Atajos (chips): se pueden deslizar, pero sin romper el ancho. */
  .chip-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; margin-bottom:14px; }
  .chip-row .chip { flex:0 0 auto; }
  /* Barra de seleccion multiple: apilada. */
  .hsel-bar { flex-wrap:wrap; gap:8px; }
  .hsel-bar #hSelComment { flex:1 1 100%; }
  /* Paginador: apilado y centrado. */
  .hist-pager { flex-direction:column; align-items:stretch; gap:10px; }
  .hist-pager .hp-left { justify-content:space-between; }
  .hist-pager .pages { justify-content:center; flex-wrap:wrap; }

  /* Contenedor de tarjetas (oculto en escritorio; el JS lo muestra). */
  .hist-cards { display:flex; flex-direction:column; gap:11px; }
  .hc-empty { padding:26px 14px; text-align:center; color:var(--muted);
    border:1px dashed var(--border); border-radius:var(--radius-lg); font-size:13px; }

  /* Tarjeta */
  .hist-card { border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--surface); box-shadow:var(--shadow-md); padding:13px 14px; overflow:hidden; }
  /* Cabecera: (checkbox) + icono + N/tipo + pill de atencion a la derecha */
  .hc-top { display:flex; align-items:center; gap:10px; margin-bottom:11px; min-width:0; }
  .hc-check { width:17px; height:17px; margin:0; accent-color:var(--brand); flex-shrink:0; }
  .hc-ic { width:36px; height:36px; border-radius:10px; background:var(--brand-bg);
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
  .hc-tt { min-width:0; flex:1; }
  .hc-t1 { font-size:14.5px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
  .hc-t2 { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hc-top .pill { flex-shrink:0; }

  /* Datos en pares etiqueta -> valor */
  .hc-grid { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; font-size:13px; align-items:baseline; }
  .hc-k { color:var(--faint); white-space:nowrap; }
  .hc-v { text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .hc-v b { font-weight:650; }
  .hc-sub { font-size:11.5px; color:var(--faint); font-weight:400; margin-top:1px; }

  /* Bloque de gestion (admin): selector de atencion en su fila */
  .hc-manage { margin-top:11px; padding-top:11px; border-top:1px solid var(--border-soft);
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .hc-manage .hc-k { flex-shrink:0; }
  .hc-att { display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
  .hc-att select { flex:1; min-width:0; height:38px; border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:0 10px; font-size:13px; font-family:inherit; background:var(--surface); }
  .hc-manage .att-audit { flex:1 1 100%; }

  /* Acciones: principal (Ver detalle) a lo ancho + iconos */
  .hc-acts { display:flex; gap:7px; margin-top:12px; }
  .hc-acts .hc-detail { flex:1; height:40px; }
  .hc-acts .hc-ib { width:42px; flex:0 0 42px; height:40px; display:flex;
    align-items:center; justify-content:center; padding:0; font-size:17px;
    border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
    color:var(--ink-soft); cursor:pointer; }
  .hc-acts .hc-ib:hover { background:var(--border-soft); }
  .hc-acts2 { margin-top:8px; }
  .hc-acts2 .btn-send { width:100%; }

  /* ---------------------------------------------------------------
     BLOQUE 3 — EMPRESAS: tabla -> tarjetas apiladas.
     El JS (viewTiendas/render) pinta #tCards en movil y oculta .tablebox.
     La tarjeta REUSA las clases .hc-* del bloque 2 (Historial): cabecera
     .hc-top/.hc-ic/.hc-tt, pares .hc-grid/.hc-k/.hc-v y acciones
     .hc-acts/.hc-detail/.hc-ib. Aqui solo definimos lo propio de Empresas:
     el contenedor, el estado vacio, el marco de la tarjeta, el alias
     coloreado dentro de la cabecera y el chip de Acceso; y ademas apilamos
     los filtros (buscador + selects + multi-select de estados).
     --------------------------------------------------------------- */
  /* Filtros de Empresas: apilados, cada control a lo ancho.
     CLAVE: al pasar a columna hay que ANULAR el flex-grow que traen del
     layout horizontal (.pnl-filters>select = flex:1 1 140px; .search =
     flex:2 1 240px). En columna ese grow reparte la ALTURA del contenedor
     entre los items y los estira a cientos de px (los <select> nativos no
     fijan altura propia). Por eso: flex:0 0 auto en todos + altura fija
     (--control-h) en los <select> para que queden como los demas controles. */
  .pnl-filters { flex-direction:column; align-items:stretch; gap:9px; }
  .pnl-filters > .search,
  .pnl-filters > select,
  .pnl-filters > .ms-wrap { flex:0 0 auto; width:100%; box-sizing:border-box; min-width:0; }
  .pnl-filters .search { width:100%; box-sizing:border-box; }
  .pnl-filters .search input { width:100%; box-sizing:border-box; }
  .pnl-filters > select { width:100%; box-sizing:border-box; height:var(--control-h);
    padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
    font-size:13px; font-family:inherit; background:var(--surface); }
  /* Multi-select de estados a lo ancho; su menu se ancla debajo, full width. */
  .pnl-filters .ms-wrap { width:100%; position:relative; }
  .pnl-filters .ms-toggle { width:100%; box-sizing:border-box; justify-content:space-between; }
  .pnl-filters .ms-menu { left:0; right:0; width:auto; }

  /* Contenedor de tarjetas (oculto en escritorio; el JS lo muestra). */
  .emp-cards { display:flex; flex-direction:column; gap:11px; }
  .emp-empty { padding:26px 14px; text-align:center; color:var(--muted);
    border:1px dashed var(--border); border-radius:var(--radius-lg); font-size:13px; }

  /* Tarjeta de empresa (mismo marco visual que .hist-card). */
  .emp-card { border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--surface); box-shadow:var(--shadow-md); padding:13px 14px; overflow:hidden; }
  /* En la cabecera, el icono lleva el alias coloreado por tipo (no un emoji). */
  .emp-card .hc-ic { background:var(--brand-bg); font-family:ui-monospace,Menlo,monospace;
    font-weight:800; font-size:12px; letter-spacing:-.02em; }
  .emp-card .hc-ic .alias { font-family:inherit; font-weight:800; }
  /* Titulo: alias grande coloreado + DataArea chico al lado. */
  .emp-card .hc-t1 { font-family:ui-monospace,Menlo,monospace; }
  .emp-card .hc-t1 .darea { font-size:11px; color:var(--faint); font-weight:600; }
  /* Chip de Acceso dentro de la grilla de pares. */
  .emp-acc { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
  .emp-acc svg { width:15px; height:15px; }
  .emp-acc.yes { color:var(--success); }
  .emp-acc.no { color:var(--faint); }
  /* El contador de departamentos entra tambien en el boton-icono de la tarjeta. */
  .emp-card .hc-ib .dep-count { margin-left:3px; }

  /* ---------------------------------------------------------------
     BLOQUE 4 — USUARIOS: tabla (portal + osTicket) -> tarjetas.
     El JS (usersRenderRows) pinta #uCards en movil y oculta .tablebox.
     La tarjeta reutiliza la cabecera .hc-top/.hc-ic/.hc-tt/.hc-t1/.hc-t2
     del bloque 2, y define debajo el contacto y DOS sub-secciones
     tintadas: "Acceso al portal" (azul) y "osTicket" (verde), cada una
     con su estado (pill) y su fila de acciones. Los filtros ya se apilan
     por el bloque de Empresas (.pnl-filters column + .ms-wrap/.ms-menu).
     --------------------------------------------------------------- */
  .usr-cards { display:flex; flex-direction:column; gap:11px; }
  .usr-empty { padding:26px 14px; text-align:center; color:var(--muted);
    border:1px dashed var(--border); border-radius:var(--radius-lg); font-size:13px; }

  .usr-card { border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--surface); box-shadow:var(--shadow-md); padding:13px 14px; overflow:hidden; }
  /* Icono de cabecera: alias de tienda en azul (misma familia mono). */
  .usr-card .hc-ic { background:var(--brand-bg); font-family:ui-monospace,Menlo,monospace;
    font-weight:800; font-size:12px; letter-spacing:-.02em; }
  .usr-card .hc-ic .alias { font-family:inherit; font-weight:800; }
  .usr-card .hc-t1 { font-family:ui-monospace,Menlo,monospace; }

  /* Contacto (correo + telefono) bajo la cabecera. */
  .usr-contact { display:flex; flex-direction:column; gap:1px; margin:2px 0 11px;
    font-size:12.5px; line-height:1.4; }
  .usr-contact .usr-mail { color:var(--ink-soft); word-break:break-all; }
  .usr-contact .usr-tel { font-size:12px; }

  /* Sub-seccion tintada: cabecera (titulo + estado) y acciones debajo. */
  .usr-sec { border-radius:var(--radius-md); padding:10px 11px; margin-top:8px; }
  .usr-sec.portal { background:rgba(37,99,235,.05); border:1px solid rgba(37,99,235,.12); }
  .usr-sec.ost { background:rgba(22,163,74,.05); border:1px solid rgba(22,163,74,.12); }
  .usr-sec-h { display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-width:0; }
  .usr-sec-t { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    flex-shrink:0; }
  .usr-sec.portal .usr-sec-t { color:#1d4ed8; }
  .usr-sec.ost .usr-sec-t { color:#15803d; }
  /* El estado (pill o .ost-state) va a la derecha; permite dos lineas en osTicket. */
  .usr-sec-h .ost-state { align-items:flex-end; text-align:right; }
  /* Acciones: botones a lo ancho, se envuelven si no caben. */
  .usr-sec-acts { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
  .usr-sec-acts .btn-mini { flex:1 1 auto; justify-content:center; height:36px; }

  /* ---------------------------------------------------------------
     BLOQUE 5 (opcion A, CSS puro) — TABLAS SIMPLES: Quincenas, Feriados
     y "Ultimas ejecuciones" (Sincronizacion). Cada tabla marcada con
     .tbl-cards se APLANA: el thead se oculta y cada fila se vuelve una
     tarjeta con pares etiqueta->valor. La etiqueta sale del data-label
     de cada <td> (robusto: no depende del orden de columnas, que cambia
     con isSuper). No se toca el render en JS salvo agregar data-label.
     --------------------------------------------------------------- */
  .tbl-cards { border:0; box-shadow:none; background:none; overflow:visible; }
  .tbl-cards table { display:block; width:100%; }
  .tbl-cards thead { position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }   /* oculto accesible */
  .tbl-cards tbody { display:flex; flex-direction:column; gap:11px; }
  .tbl-cards tbody tr { display:block; border:1px solid var(--border);
    border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-md);
    padding:6px 14px; }
  /* Fila destacada (quincena en curso): borde de marca. */
  .tbl-cards tbody tr.row-current { border-color:var(--brand); background:var(--brand-bg); }
  .tbl-cards tbody tr.row-current td { background:none; }
  /* Cada celda = una linea etiqueta / valor. */
  .tbl-cards tbody td { display:flex; align-items:baseline; justify-content:space-between;
    gap:14px; padding:7px 0; border:0; border-bottom:1px solid var(--border-soft);
    text-align:right; white-space:normal; }
  .tbl-cards tbody td:last-child { border-bottom:0; }
  .tbl-cards tbody td::before { content:attr(data-label); flex-shrink:0; text-align:left;
    color:var(--faint); font-size:12px; font-weight:600; }
  /* Celda sin data-label (ej. fila de "cargando/vacio" con colspan): centrada,
     sin etiqueta ni layout de par. */
  .tbl-cards tbody td:not([data-label]) { display:block; text-align:center; }
  .tbl-cards tbody td:not([data-label])::before { display:none; }
  /* La primera celda (codigo/quincena/fecha) resalta como titulo de la tarjeta. */
  .tbl-cards tbody td.code { font-weight:700; font-size:14px; }
  /* Los grupos de color (periodo de pago) pierden el borde lateral en tarjeta. */
  .tbl-cards tbody td.grp, .tbl-cards tbody td.grp-first, .tbl-cards tbody td.grp-last,
  .tbl-cards tbody td.hito-cell { border-left:0; border-right:0; }
  /* Acciones: los mini-botones se alinean a la derecha y pueden envolverse. */
  .tbl-cards tbody td[data-label="Acciones"] { flex-wrap:wrap; }
  .tbl-cards tbody td[data-label="Acciones"] .btn-mini { margin-left:6px; }

  /* --- EQUIPO (grillas por rol) dentro de tbl-cards ---
     La celda de acciones no lleva data-label (usa .cell-actcell): se comporta
     como pie de tarjeta con los botones a lo ancho, envolviendose. Ademas, las
     celdas ricas (Alcance/osTicket) traen contenido apilado que no debe
     comprimirse contra la etiqueta: se permite que el valor caiga a la derecha
     con salto. Las StatsCards (sum-cards) se apilan de a 2. */
  .tbl-cards tbody td.cell-actcell { display:block; text-align:left; padding:9px 0 4px; }
  .tbl-cards tbody td.cell-actcell::before { display:none; }
  .tbl-cards tbody td.cell-actcell .cell-actions { display:flex; flex-wrap:wrap; gap:7px;
    justify-content:flex-start; }
  .tbl-cards tbody td.cell-actcell .cell-actions .btn-mini { flex:1 1 auto; justify-content:center;
    margin-left:0; }
  /* Celdas Alcance / osTicket: el valor (bloque .scope-cell / .ost-*) puede ser
     alto; se alinea a la derecha pero puede ocupar su propio ancho. */
  .tbl-cards tbody td[data-label="Alcance"],
  .tbl-cards tbody td[data-label="osTicket"] { align-items:flex-start; }
  .tbl-cards tbody td[data-label="Alcance"] .scope-cell,
  .tbl-cards tbody td[data-label="osTicket"] > * { text-align:right; }
  /* El correo puede ser largo: que rompa en vez de desbordar. */
  .tbl-cards tbody td.cell-mail { word-break:break-all; }
  /* Las tarjetas de resumen por rol (sum-cards c3/c4) se apilan de a 2. */
  .sum-cards.c3, .sum-cards.c4 { grid-template-columns:repeat(2,1fr); }
  /* Fila superadmin: que el boton Resetear baje si no cabe, y el bloque de
     rol respire (titulo + badge + descripcion pueden envolver). */
  .su-card { flex-wrap:wrap; gap:12px 14px; }
  .su-info { flex:1 1 60%; }
  .su-acts { flex:1 1 100%; }
  .su-acts .btn { flex:1 1 auto; justify-content:center; }
  .role-head { gap:7px; }

  /* Config de Sincronizacion: los grid de 3 columnas se apilan. */
  .cfg-grid3 { grid-template-columns:1fr; }
  /* Los grid de 2 columnas de los modales de Config (tipos de ausencia,
     causas de marcaje, etc.) tambien se apilan: en movil los pares
     Nombre+CodigoAX / Codigo+Estado / Documento+Exigencia se salian por la
     derecha. Y el modal en si se acota al viewport. */
  .cfg-grid2 { grid-template-columns:1fr; }
  /* Filas de parametro (Corte y periodos, Constancias, Integraciones): la
     etiqueta+descripcion y el control estaban lado a lado (justify-content:
     space-between) con el input a 230px fijo, y en movil se desbordaban. Se
     apilan: etiqueta arriba, control debajo a ancho completo. */
  .cfg-row { flex-direction:column; align-items:stretch; gap:10px; }
  .cfg-input { flex:0 0 auto; width:100%; max-width:100%; }
  .cfg-input input { width:100%; box-sizing:border-box; }
  .cfg-input input.narrow { width:100%; }
  .cfg-secret { align-items:flex-start; }
  .modal-ov { padding:14px; align-items:flex-start; }
  .modal-box { max-width:100%; width:100%; box-sizing:border-box; max-height:calc(100dvh - 28px); overflow-y:auto; }
  .modal-box input, .modal-box select, .modal-box textarea { max-width:100%; box-sizing:border-box; }

  /* ---------------------------------------------------------------
     BLOQUE 6 — VISTA PERSONAL: barra de acciones a SOLO-ICONO.
     La cabecera de Personal (#wpGridView .head-actions) tiene hasta 6
     botones con texto largo (¿Como tomar la foto?, Recargar, Reporte 10,
     Reporte AX, Sincronizar, Limpiar) que no caben en movil. Se colapsa
     el texto con font-size:0 (el SVG tiene tamano fijo, no depende de la
     fuente) dejando solo el icono; cada boton ya lleva title/aria-label.
     El grid de fotos (.wp-grid) y la ficha ya son responsive por su cuenta.
     --------------------------------------------------------------- */
  #wpGridView .head-actions { gap:8px; }
  #wpGridView .head-actions .btn {
    font-size:0; padding:0; width:var(--btn-h); flex:0 0 auto; justify-content:center; gap:0;
  }
  #wpGridView .head-actions .btn svg { margin:0; }
  /* El boton primario (Sincronizar) y el de peligro (Limpiar) conservan su
     color distintivo aunque queden como icono. */

  /* Barra de roster y barra de seleccion: que envuelvan sin desbordar. */
  #wpGridView .wp-rosterbar { font-size:12px; }
  #wpSelBar { gap:8px; }
  #wpSelBar select { flex:1 1 100%; min-width:0; }

  /* ---------------------------------------------------------------
     BLOQUE 7 — MODAL "Categorias de documentos": en movil los botones
     Renombrar / Desactivar se salian del borde. La fila (.pd-catrow)
     envuelve y la zona de acciones pasa a ancho completo debajo del
     nombre. El modal ancho no debe exceder el viewport.
     --------------------------------------------------------------- */
  .modal-ov .modal.wide, .modal-ov .modal.wide2 { max-width:100%; }
  .pd-catrow { flex-wrap:wrap; }
  .pd-catrow .pd-catname { flex:1 1 100%; }
  .pd-catrow .pd-catacts { flex:1 1 100%; justify-content:flex-start; margin-top:8px; }
  .pd-catrow .pd-catacts .btn { flex:1 1 auto; justify-content:center; }
  /* Alta de categoria: input + boton apilados. */
  .pd-catadd { flex-wrap:wrap; }
  .pd-catadd input { flex:1 1 100%; }
  .pd-catadd .btn { flex:1 1 100%; justify-content:center; }
}

/* ===================================================================
   WRITE-BACK A AX ("cambios sin publicar") — Personal / ficha
   Contador del boton Publicar, badge de pendiente, boton Publicar y el
   lapiz que marca los campos con cambios sin enviar a AX. Naranja =
   pendiente (usa el token warn); el boton Publicar usa el color de marca.
   =================================================================== */

/* Contador (N) dentro del boton "Publicar" de la barra de acciones. */
.wp-pubcount {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:2px;
  border-radius:9px; background:var(--brand); color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}

/* Boton "Publicar" de la barra: queda SIEMPRE visible. Cuando no hay nada
   pendiente va deshabilitado (grisado); el contador tambien se atenua para
   que se lea como "sin pendientes" y no como una alerta activa. */
#wpPublish:disabled {
  opacity:.55; cursor:default;
}
#wpPublish:disabled .wp-pubcount {
  background:var(--muted, #94a3b8);
}

/* Boton "Publicar" (barra y ficha): contorno en color de marca para que
   destaque como accion positiva sin robarle protagonismo a "Actualizar". */
.wp-btn-publish {
  border-color:var(--brand) !important;
  color:var(--brand) !important;
}
.wp-btn-publish:hover { background:var(--brand); color:#fff !important; }

/* Badge "Cambios sin publicar" en la cabecera de la ficha. Pill naranja
   suave (token warn), en linea con el pill del cargo. */
.wp-pill-pending {
  display:inline-flex; align-items:center;
  background:var(--warn-bg, #fff7ed);
  color:var(--warn, #b45309);
  border:1px solid var(--warn-bd, #fed7aa);
  font-weight:600;
}

/* Lapiz naranja junto a un valor de la ficha con cambio sin publicar. */
.ff-pend-ico {
  display:inline-flex; align-items:center;
  color:var(--warn, #b45309);
  margin-left:4px;
}

/* ---------- Columna de acciones PEGAJOSA (v4.33) ----------
   Para tablas anchas cuyo ultimo TD son botones (ej. Empresas): en
   pantallas angostas la tabla scrollea horizontal pero la columna de
   acciones queda SIEMPRE visible, anclada a la derecha, con una sombra
   que separa del contenido que pasa por debajo. Uso: agregar
   `tbl-stickyact` al contenedor .tablebox.scroll-x. */
.tbl-stickyact table { min-width: 100%; }
.tbl-stickyact th:last-child,
.tbl-stickyact td:last-child {
  position: sticky; right: 0;
  background: var(--card, #fff);
  z-index: 2;
  box-shadow: -10px 0 10px -10px rgba(15, 23, 42, .22);
}
.tbl-stickyact thead th:last-child {
  background: var(--thead-bg, #fbfcfe);
  z-index: 3;
}
.tbl-stickyact tbody tr:hover td:last-child { background: var(--row-hover, #fafbfd); }

/* ---------- Chip "% con foto" de la celda Personal (v4.36) ----------
   Opcion C del mockup empresas_personal_foto: pill compacta junto al
   numero de personal, con semaforo de completitud (verde >=90, ambar
   50-89, rojo <50). El conteo exacto "X de Y con foto" vive en el title. */
.ph-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; padding:2px 8px;
  border-radius:999px; margin-left:6px; vertical-align:2px;
  cursor:default;
}
.ph-chip svg { width:11px; height:11px; }
.ph-chip.ph-ok  { background:#e8f7ee; color:var(--ok, #16a34a); }
.ph-chip.ph-mid { background:#fff7ed; color:var(--warn, #b45309); }
.ph-chip.ph-low { background:#fdecec; color:var(--danger, #dc2626); }