/* ============================================================
   NEXUS CRM — Sistema de diseño v4 · MARCA NEXUS
   Paleta: Nexus Navy (manual de marca NACG)
   Navy #23395B · Celeste #5686C4 / #86B7E6
   Tipografía: Archivo (UI) + Cormorant Garamond (wordmark)
   Soporte: Modo claro + Modo oscuro (sistema + toggle manual)
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   PALETA NEXUS NAVY — ESCALA COMPLETA (referencia)
   50  #F2F6FB  · 100 #E3ECF6  · 200 #C9D9EC  · 300 #A8C2DF
   400 #86B7E6 (celeste marca dark) · 500 #5686C4 (acento marca)
   600 #3D6398 (links AA) · 700 #2F4E77
   800 #23395B (NAVY marca) · 900 #1B2E4D (sidebar) · 950 #12203A
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TOKENS — MODO CLARO (por defecto)
   ══════════════════════════════════════════════════════════ */
:root {
  /* ── Nexus Navy (alias retrocompat: --tg-* = --ob-*) ── */
  --tg-50:     #F2F6FB;
  --tg-100:    #E3ECF6;
  --tg-200:    #C9D9EC;
  --tg-300:    #A8C2DF;
  --tg-400:    #86B7E6;   /* celeste marca (sobre navy) */
  --tg-500:    #5686C4;   /* acento marca / series      */
  --tg-600:    #3D6398;   /* hover · links (AA)         */
  --tg-700:    #2F4E77;   /* énfasis                    */
  --tg-800:    #23395B;   /* NAVY marca · botón primario*/
  --tg-900:    #1B2E4D;   /* sidebar / login            */
  --tg-950:    #12203A;   /* más profundo               */

  /* ── Ocean Blue (nombres oficiales) ── */
  --ob-50:  var(--tg-50);  --ob-100: var(--tg-100);
  --ob-200: var(--tg-200); --ob-300: var(--tg-300);
  --ob-400: var(--tg-400); --ob-500: var(--tg-500);
  --ob-600: var(--tg-600); --ob-700: var(--tg-700);
  --ob-800: var(--tg-800); --ob-900: var(--tg-900);
  --ob-950: var(--tg-950);

  /* ── Grises neutros (pizarra) ── */
  --sl-50:     #F8FAFC;
  --sl-100:    #F1F5F9;
  --sl-200:    #E2E8F0;
  --sl-300:    #CBD5E1;
  --sl-400:    #94A3B8;
  --sl-500:    #64748B;
  --sl-700:    #3D4F63;
  --sl-800:    #293548;
  --sl-900:    #1A2233;
  --sl-950:    #0D1117;

  /* ── Semánticos fijos ── */
  --danger:    #DC2626;
  --danger-lt: rgba(220,38,38,.09);

  /* ──────────────────────────────────────────────────────
     TOKENS DE INTERFAZ — MODO CLARO
     ────────────────────────────────────────────────────── */
  --bg:         var(--sl-50);        /* fondo de página           */
  --surface:    #FFFFFF;             /* tarjetas, paneles         */
  --border:     var(--sl-200);       /* bordes sutiles            */
  --border-md:  var(--sl-300);       /* bordes medios             */
  --text:       var(--sl-900);       /* texto principal           */
  --text-muted: var(--sl-500);       /* texto secundario          */

  /* ── Nexus Navy activo ── */
  --green:      var(--ob-500);
  --green-dk:   var(--ob-600);
  --green-dkr:  var(--ob-700);
  --green-lt:   rgba(86,134,196,.12);
  --green-ring: rgba(86,134,196,.22);

  /* ── Aliases backward-compat ── */
  --dark:       var(--sl-900);
  --dark-deep:  var(--sl-950);
  --dark-mid:   var(--sl-800);
  --accent:     var(--ob-500);
  --accent-dk:  var(--ob-600);
  --accent-lt:  rgba(86,134,196,.12);
  --muted:      var(--sl-500);
  --steel:      var(--sl-200);
  --steel-lt:   rgba(203,213,225,.25);
  --white:      #FFFFFF;
  --navy:       var(--sl-900);
  --navy-dark:  var(--sl-950);
  --navy-mid:   var(--sl-800);
  --gold:       var(--ob-500);
  --gold-dark:  var(--ob-600);
  --success:    #16A34A;   /* verde semántico — estado OK — no cambia con la paleta */
  --muted-pur:  var(--sl-500);

  /* ── Layout ── */
  --sidebar-w: 224px;
  --header-h:  52px;
  --radius:    7px;
  --radius-lg: 11px;
  --shadow:    0 1px 3px rgba(15,25,40,.06), 0 1px 2px rgba(15,25,40,.04);
  --shadow-lg: 0 4px 20px rgba(15,25,40,.10);
  --shadow-xl: 0 8px 40px rgba(15,25,40,.16);

  /* ── Superficie secundaria (filas alternas, hover suave) ── */
  --surface-2: var(--sl-100);
}

/* ══════════════════════════════════════════════════════════
   TOKENS — MODO OSCURO (preferencia de sistema)
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0D1117;
    --surface:    #1A2233;
    --border:     #2A3548;
    --border-md:  #3D4F63;
    --text:       #E2E8F0;
    --text-muted: #94A3B8;

    --green:      var(--ob-400);
    --green-dk:   var(--ob-500);
    --green-dkr:  var(--ob-600);
    --green-lt:   rgba(134,183,230,.14);
    --green-ring: rgba(134,183,230,.22);

    --dark:       #E2E8F0;
    --dark-deep:  #F8FAFC;
    --dark-mid:   #CBD5E1;
    --accent:     var(--ob-400);
    --accent-dk:  var(--ob-500);
    --accent-lt:  rgba(134,183,230,.14);
    --muted:      #94A3B8;
    --steel:      #2A3548;
    --steel-lt:   rgba(42,53,72,.5);
    --white:      #1A2233;

    --shadow:    0 1px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.20);
    --shadow-lg: 0 4px 20px rgba(0,0,0,.38);
    --shadow-xl: 0 8px 40px rgba(0,0,0,.50);

    --surface-2: #222D3F;
  }
}

/* ══════════════════════════════════════════════════════════
   TOKENS — MODO OSCURO (toggle manual)
   JS: document.documentElement.setAttribute('data-theme','dark')
       document.documentElement.setAttribute('data-theme','light')
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:         #0D1117;
  --surface:    #1A2233;
  --border:     #2A3548;
  --border-md:  #3D4F63;
  --text:       #E2E8F0;
  --text-muted: #94A3B8;

  --green:      #86B7E6;
  --green-dk:   #5686C4;
  --green-dkr:  #3D6398;
  --green-lt:   rgba(134,183,230,.14);
  --green-ring: rgba(134,183,230,.22);

  --dark:       #E2E8F0;
  --dark-deep:  #F8FAFC;
  --dark-mid:   #CBD5E1;
  --accent:     #86B7E6;
  --accent-dk:  #5686C4;
  --accent-lt:  rgba(134,183,230,.14);
  --muted:      #94A3B8;
  --steel:      #2A3548;
  --steel-lt:   rgba(42,53,72,.5);
  --white:      #1A2233;

  --shadow:    0 1px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.20);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.38);
  --shadow-xl: 0 8px 40px rgba(0,0,0,.50);

  --surface-2: #222D3F;
}

/* ══════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }

/* ══════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--tg-900);
  background-image:
    radial-gradient(ellipse at 22% 78%, rgba(86,134,196,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 15%, rgba(86,134,196,.10) 0%, transparent 48%);
}

.login-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 378px;
  box-shadow: 0 12px 48px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.18);
  border-top: 3px solid var(--tg-500);
}

.login-logo { text-align: center; margin-bottom: 28px; }

.login-form .field { margin-bottom: 14px; }

.login-form label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--sl-500);
  margin-bottom: 5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--sl-200);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--sl-50);
  color: var(--sl-900);
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.login-form input:focus {
  outline: none;
  border-color: var(--ob-500);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(86,134,196,.25);
}

.login-form .btn-primary,
.login-form .btn {
  background: var(--tg-800);
  color: #FFFFFF;
  font-weight: 700;
  border: none;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.login-form .btn-primary:hover,
.login-form .btn:hover {
  background: var(--tg-700);
  box-shadow: 0 3px 12px rgba(35,57,91,.35);
}
.login-form .btn-primary:active,
.login-form .btn:active { transform: scale(.98); }

.login-error {
  color: #DC2626;
  font-size: .78rem;
  margin-top: 10px;
  text-align: center;
  display: none;
}
.login-error.visible { display: block; }

/* ══════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--tg-900) 0%, var(--tg-950) 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform .25s;
}

/* ── Encabezado de marca: NACGSuite → NEXUS + badge + empresa (patrón HELEVAS) ── */
.sidebar-logo {
  padding: 15px 14px 12px;
  border-bottom: 1px solid rgba(134,183,230,.14);
}
.sb-suite { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.sb-ico   { width: 22px; height: 22px; border-radius: 6px; background: var(--tg-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-ico svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; }
.sb-nacg  { font-size: .85rem; font-weight: 800; letter-spacing: -.02em; color: #FFFFFF; }
.sb-ste   { font-size: .85rem; font-weight: 800; letter-spacing: -.02em; color: var(--tg-400); }
.sb-prod  { display: flex; align-items: center; gap: 8px; }
.sb-word  { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.38rem; letter-spacing: .13em; color: #FFFFFF; line-height: 1; }
.sb-word .x { color: var(--tg-400); }
.sb-badge { font-size: .55rem; font-weight: 800; letter-spacing: .08em; color: var(--tg-400); border: 1px solid rgba(134,183,230,.5); border-radius: 4px; padding: 1px 6px; text-transform: uppercase; }
.sb-emp   { font-size: .63rem; color: rgba(255,255,255,.42); margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(134,183,230,.1); }
.sb-emp small { display: block; font-size: .53rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.24); margin-bottom: 1px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 0; }

.nav-section {
  padding: 12px 14px 3px;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.20);
}

.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  color: rgba(255,255,255,.46);
  font-size: .82rem;
  transition: background .12s, color .12s;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.nav-item:hover  { background: rgba(255,255,255,.05); color: rgba(255,255,255,.80); }
.nav-item.active {
  background: rgba(134,183,230,.14);
  color: #FFFFFF;
  border-left-color: var(--ob-400);
  font-weight: 600;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

.sidebar-footer { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.06); }

.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}
.user-chip:hover { background: rgba(255,255,255,.09); }

.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tg-700);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  color: var(--tg-200);
  flex-shrink: 0;
}
.user-chip .info { flex: 1; overflow: hidden; }
.user-chip .info span  { display: block; font-size: .78rem; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .info small { font-size: .65rem; color: rgba(255,255,255,.32); }
.user-chip .logout-icon { color: rgba(255,255,255,.20); transition: color .15s; }
.user-chip:hover .logout-icon { color: var(--danger); }

/* ── Main area ── */
.main-area {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ── */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky; top: 0; z-index: 50;
  transition: background .2s, border-color .2s;
}
.topbar-title   { font-size: .95rem; font-weight: 700; color: var(--text); flex: 1; }
.topbar-actions { display: flex; gap: 7px; }
/* Hamburguesa — oculta en escritorio, visible solo en móvil (≤768px) */
.sb-toggle { display: none; width: 40px; height: 40px; margin-left: -6px; border: none; background: none;
  color: var(--text); border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sb-toggle:active { background: var(--bg); }
/* Backdrop del cajón lateral (solo actúa en móvil, cuando .on) */
.sb-backdrop { position: fixed; inset: 0; background: rgba(12,22,40,.5); z-index: 99;
  opacity: 0; visibility: hidden; transition: opacity .25s; }
.sb-backdrop.on { opacity: 1; visibility: visible; }

/* ── Page content ── */
.page { padding: 16px 20px; flex: 1; }

/* ═══════════════════════════════════════════════════════════
   TIMER WIDGET — siempre visible en el topbar
   ═══════════════════════════════════════════════════════════ */
.timer-widget { display:flex; align-items:center; gap:6px; flex-shrink:0; position:relative; }

.timer-btn-start {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--tg-800,#23395B); border:none;
  border-radius:10px; padding:7px 15px 7px 7px;
  font-size:.8rem; font-weight:700; color:#fff;
  cursor:pointer; transition:background .15s; white-space:nowrap;
  box-shadow:0 1px 2px rgba(20,40,70,.14);
}
.timer-btn-start:hover { background:#2c4570; }
.timer-btn-start .tb-badge { width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:0 0 auto; }
.timer-btn-start .tb-lbl { display:flex; flex-direction:column; text-align:left; line-height:1.05; }
.timer-btn-start .tb-lbl small { font-weight:400; font-size:.62rem; color:#b9cbe6; line-height:1; margin-top:2px; }
.timer-btn-start svg   { flex-shrink:0; }

.timer-activo {
  display:flex; align-items:center; gap:10px;
  background:#fef2f2; border:1.5px solid #fca5a5;
  border-radius:9px; padding:6px 12px;
}
.timer-dot {
  width:8px; height:8px; border-radius:50%;
  background:#ef4444; flex-shrink:0;
  animation:timer-pulse 1.2s ease-in-out infinite;
}
@keyframes timer-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }
.timer-display {
  font-size:1.08rem; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
  color:#dc2626; min-width:74px;
}
.timer-info-text {
  display:flex; flex-direction:column; line-height:1.15;
  max-width:190px; cursor:pointer;
}
.timer-info-text .timer-cli { font-size:.76rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
.timer-info-text .timer-svc { font-size:.68rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
/* Editor de descripción mientras el cronómetro corre */
.timer-run-pop { position:absolute; top:calc(100% + 6px); right:0; z-index:401; width:280px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 22px rgba(20,40,70,.16); }
.timer-run-pop label { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
.timer-run-pop textarea { width:100%; min-height:60px; resize:vertical; font-family:inherit; font-size:.83rem; padding:7px 9px; border:1.5px solid var(--border); border-radius:8px; color:var(--text); background:var(--bg); }
.timer-run-pop textarea:focus { outline:none; border-color:var(--tg-500); box-shadow:0 0 0 3px var(--green-ring); }
.timer-run-hint { font-size:.68rem; color:var(--text-muted); margin-top:5px; }
.timer-btn-stop {
  background:#ef4444; color:#fff; border:none;
  border-radius:12px; padding:3px 10px;
  font-size:.7rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.timer-btn-stop:hover { background:#dc2626; }
.timer-btn-discard {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:3px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.timer-btn-discard:hover { color:#ef4444; }

/* Panel de inicio rápido */
.timer-panel {
  position:fixed; top:calc(var(--header-h) + 6px);
  right:20px; z-index:400;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.14);
  width:320px; padding:16px;
}
.timer-panel-title { font-size:.84rem; font-weight:700; margin-bottom:12px; color:var(--text); }
.timer-panel .form-field { margin-bottom:9px; }
.timer-panel .form-field label {
  font-size:.72rem; font-weight:600; color:var(--text-muted);
  display:block; margin-bottom:3px; text-transform:uppercase; letter-spacing:.03em;
}
.timer-panel-actions { display:flex; gap:8px; margin-top:12px; }
.timer-panel-overlay { position:fixed; inset:0; z-index:399; }
.timer-facturable-row { display:flex; align-items:center; gap:7px; font-size:.8rem; cursor:pointer; }

/* Nota "trabajo interno de la Firma" (servicio Administrative en Tiempo) */
.timer-interno-note {
  font-size:.76rem; line-height:1.45; color:var(--tg-700,#2F4E77);
  background:#EAF2FB; border:1px solid #D3E3F5; border-radius:8px;
  padding:8px 11px; margin-bottom:9px;
}
.timer-interno-note b { color:var(--tg-800,#23395B); }

/* ══════════ Módulo To-Do / Pendientes ══════════ */
#seccionTodo .td-head{margin-bottom:12px}
#seccionTodo .td-h1{font-size:1.15rem;margin:0 0 2px;color:var(--text)}
#seccionTodo .td-sub{color:var(--text-muted);font-size:.82rem;margin:0}
#seccionTodo .td-tbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#seccionTodo .td-spacer{flex:1}
#seccionTodo .td-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px}
#seccionTodo .td-seg button{border:0;background:transparent;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text-muted);padding:6px 12px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:6px}
#seccionTodo .td-seg button.on{background:var(--surface);color:var(--tg-800);box-shadow:0 1px 3px rgba(15,25,40,.12)}
/* Contador de pestaña: solo se muestra si hay tareas (>0); píldora navy → se ve de un vistazo dónde hay trabajo */
#seccionTodo .td-seg .cnt{font-size:.64rem;font-weight:800;background:var(--tg-800);color:#fff;border:0;border-radius:10px;padding:1px 6px;min-width:17px;text-align:center;line-height:1.5}
/* Toolbar To-Do — familia coherente: todos los controles a la MISMA altura, tipografía y radio; navy reservado al botón primario */
#seccionTodo .td-seg,#seccionTodo .td-vtog,#seccionTodo .td-tbar>.btn{box-sizing:border-box;height:34px;border-radius:9px}
/* Toggle de vista Kanban/Tabla: mismo segmento sutil que las pestañas (.td-seg) */
#seccionTodo .td-vtog{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);padding:3px}
#seccionTodo .td-vtog button{border:0;background:transparent;font-family:inherit;font-size:.8rem;font-weight:600;line-height:1;color:var(--text-muted);padding:0 12px;height:100%;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
#seccionTodo .td-vtog button.on{background:var(--surface);color:var(--tg-800);box-shadow:0 1px 3px rgba(15,25,40,.12)}
#seccionTodo .td-seg{align-items:center}
#seccionTodo .td-seg button{line-height:1}
/* Botones de acción del toolbar (Columnas / Nueva tarea): misma caja que los segmentos */
#seccionTodo .td-tbar>.btn{padding:0 14px;font-size:.8rem;font-weight:600;line-height:1}
/* "Columnas" oculto por decisión de Oscar (jul 2026); re-habilitar quitando esta línea */
#seccionTodo #tdColsBtn{display:none}
#seccionTodo .td-fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
#seccionTodo .td-fsearch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-md,#CBD5E1);border-radius:9px;padding:0 10px;background:var(--surface)}
#seccionTodo .td-fsearch input{border:0;outline:none;padding:8px 2px;font-family:inherit;font-size:.82rem;min-width:220px;background:transparent;color:var(--text)}
#seccionTodo .td-fbar select{border:1px solid var(--border-md,#CBD5E1);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:.8rem;background:var(--surface);color:var(--text)}
#seccionTodo .td-lnk{border:0;background:transparent;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--tg-600);cursor:pointer}
#seccionTodo .td-board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
#seccionTodo .td-col{flex:1 0 250px;max-width:340px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:8px}
#seccionTodo .td-col-h{display:flex;align-items:center;gap:6px;padding:4px 6px 9px}
#seccionTodo .td-cdot{width:8px;height:8px;border-radius:50%}
#seccionTodo .td-nm{font-size:.74rem;font-weight:800;color:var(--tg-800);text-transform:uppercase;letter-spacing:.03em}
#seccionTodo .td-col-h .td-cnt{font-size:.62rem;font-weight:700;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0 6px}
#seccionTodo .td-colmap{font-size:.6rem;font-weight:600;color:var(--tg-500);background:var(--tg-50);border:1px solid #D9E6F5;border-radius:20px;padding:1px 7px;margin-left:auto}
/* Editor ⚙ Columnas */
#tdColsModal .td-cols-hint{font-size:.8rem;line-height:1.5;color:var(--text-muted);margin:0 0 14px}
#tdColsModal .td-cols-list{display:flex;flex-direction:column;gap:8px}
#tdColsModal .td-colrow{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:7px 9px}
#tdColsModal .td-colrow-ord{display:flex;flex-direction:column;gap:2px}
#tdColsModal .td-colrow-ord .td-mvb{width:20px;height:15px;line-height:1;border:1px solid var(--border);background:var(--surface);border-radius:5px;font-size:.6rem;color:var(--text-muted);cursor:pointer;padding:0}
#tdColsModal .td-colrow-ord .td-mvb:disabled{opacity:.35;cursor:default}
#tdColsModal .td-colname{flex:1;min-width:0;font-size:.82rem;font-weight:600;padding:6px 9px;border:1px solid var(--border-md,#CBD5E1);border-radius:8px;font-family:inherit;color:var(--text)}
#tdColsModal .td-colrow-canon{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--text-muted);white-space:nowrap}
#tdColsModal .td-colrow-canon.base{color:var(--text)}
#tdColsModal .td-colrow-lock{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tg-500);background:var(--tg-50);border:1px solid #D9E6F5;border-radius:20px;padding:1px 6px}
#tdColsModal .td-colcanon{font-size:.76rem;font-family:inherit;padding:4px 6px;border:1px solid var(--border-md,#CBD5E1);border-radius:7px;color:var(--text);background:var(--surface)}
#tdColsModal .td-colrow-del{border:0;background:transparent;color:var(--text-muted);cursor:pointer;padding:3px;display:inline-flex;border-radius:6px}
#tdColsModal .td-colrow-del:hover{color:#DC2626;background:#FDECEC}
#tdColsModal .td-cols-add{margin-top:12px;width:100%;border:1px dashed var(--border-md,#CBD5E1);background:transparent;color:var(--tg-700);font-family:inherit;font-size:.8rem;font-weight:700;padding:9px;border-radius:9px;cursor:pointer}
#tdColsModal .td-cols-add:hover{background:var(--tg-50);border-color:var(--tg-500)}
#seccionTodo .td-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(15,25,40,.05);cursor:pointer}
#seccionTodo .td-card:hover{border-color:var(--tg-500)}
#seccionTodo .td-c-top{display:flex;align-items:flex-start;gap:7px}
#seccionTodo .td-prio{width:9px;height:9px;border-radius:50%;margin-top:4px;flex:0 0 auto}
#seccionTodo .td-prio.urgente{background:#DC2626}#seccionTodo .td-prio.alta{background:#D97706}#seccionTodo .td-prio.normal{background:#94A3B8}
#seccionTodo .td-c-tit{font-size:.82rem;font-weight:700;line-height:1.3;color:var(--text)}
#seccionTodo .td-c-meta{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 6px;align-items:center}
#seccionTodo .td-chip{font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
#seccionTodo .td-chip.cli{background:var(--tg-50,#F2F6FB);color:var(--tg-700)}
#seccionTodo .td-chip.per{background:var(--surface-2);color:var(--text-muted)}
#seccionTodo .td-chip.venc{background:#FDECEC;color:#DC2626}
#seccionTodo .td-chip.hoy{background:#FEF3E2;color:#D97706}
#seccionTodo .td-chip.fut{background:var(--surface-2);color:var(--text-muted)}
#seccionTodo .td-chip.com{background:var(--surface-2);color:var(--text-muted)}
#seccionTodo .td-chip.fact,#tdDetModal .td-chip.fact{background:#E9F7EF;color:#0F9D58}
#tdFactBody .td-fact-note{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:11px 13px;font-size:.82rem;line-height:1.5;color:var(--text)}
#tdFactBody .td-fact-f{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#seccionTodo .td-c-bot{display:flex;align-items:center;gap:6px;margin-top:4px;border-top:1px solid var(--border);padding-top:7px}
#seccionTodo .td-ava{width:22px;height:22px;border-radius:50%;background:var(--tg-500);color:#fff;font-size:.6rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
#seccionTodo .td-asg{font-size:.64rem;color:var(--text-muted)}#seccionTodo .td-asg b{color:var(--tg-700)}
#seccionTodo .td-mv{margin-left:auto;display:flex;gap:3px}
#seccionTodo .td-mvb{width:27px;height:24px;border:1px solid var(--border-md,#CBD9EC);background:var(--surface-2);border-radius:6px;color:var(--text);cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
#seccionTodo .td-mvb svg{display:block}
#seccionTodo .td-mvb:hover:not(:disabled){background:var(--tg-50,#F2F6FB);color:var(--tg-700);border-color:#86B7E6}
#seccionTodo .td-mvb:disabled{opacity:.3;cursor:default}
#seccionTodo .td-empty{font-size:.72rem;color:var(--text-muted);text-align:center;padding:14px 6px;font-style:italic}
#seccionTodo .td-grid thead th{background:var(--tg-800);color:#fff}
#seccionTodo .td-grid tbody tr{cursor:pointer}
#seccionTodo .td-grid tr.td-canc .td-tarea{text-decoration:line-through;color:var(--text-muted)}
#seccionTodo .td-prio-l{display:inline-flex;align-items:center;gap:6px;text-transform:capitalize}
#seccionTodo .td-prio-l .td-prio{margin-top:0}
#seccionTodo .td-estp{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text);white-space:nowrap}
#seccionTodo .td-estp:hover{background:var(--surface-2)}
#seccionTodo .td-estp-ro,#tdDetModal .td-estp-ro{cursor:default}
#seccionTodo .td-estp-ro:hover,#tdDetModal .td-estp-ro:hover{background:var(--surface)}
#seccionTodo .td-edot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
#seccionTodo .td-caret{color:var(--text-muted);font-size:.6rem}
.td-estmenu{position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 28px rgba(15,25,40,.18);padding:5px;min-width:165px}
.td-estmenu .td-estopt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-size:.8rem;cursor:pointer;color:var(--text)}
.td-estmenu .td-estopt:hover{background:var(--surface-2)}
.td-estmenu .td-check{margin-left:auto;color:#16A34A;font-weight:800}
.td-estmenu .td-edot{width:8px;height:8px;border-radius:50%}
#seccionTodo .td-combolist{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 22px rgba(15,25,40,.14);z-index:30;max-height:190px;overflow:auto;display:none;margin-top:2px}
#seccionTodo .td-comboit{padding:7px 10px;font-size:.82rem;cursor:pointer}#seccionTodo .td-comboit:hover{background:var(--surface-2)}
#seccionTodo .td-comboe{padding:7px 10px;font-size:.76rem;color:var(--text-muted)}
/* Detalle de tarea (F2) */
#tdDetModal .td-detmodal{max-width:620px}
/* Detalle de tarea: meta como lista etiquetada (LABEL : valor), densa */
#tdDetModal .td-det-meta{display:grid;grid-template-columns:104px 1fr;column-gap:0;margin:2px 0 14px}
#tdDetModal .td-det-meta dt{display:flex;align-items:center;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:6px 12px 6px 0;white-space:nowrap}
#tdDetModal .td-det-meta dd{margin:0;padding:6px 0;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.8rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}
#tdDetModal .td-det-meta dt:nth-of-type(n+2),#tdDetModal .td-det-meta dd:nth-of-type(n+2){border-top:1px solid var(--border)}
#tdDetModal .td-mv-empty{color:var(--text-muted);font-weight:500}
#tdDetModal .td-mv-fecha{color:var(--text)}
#tdDetModal .td-det-meta .td-ava{width:20px;height:20px;background:var(--tg-50,#F2F6FB);color:var(--tg-700);border:1px solid var(--border);font-size:.56rem;font-weight:800}
#tdDetModal .td-mv-resp{color:var(--text);font-weight:600}
#tdDetModal .td-mv-de{color:var(--text-muted);font-weight:500;font-size:.72rem}
#tdDetModal .td-mv-de b{color:var(--tg-700);font-weight:700}
/* ── Subtareas (checklist con dueño) ── */
#tdDetSubt{margin:0 0 14px}
#tdDetSubt .td-subt-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
#tdDetSubt .td-subt-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
#tdDetSubt .td-subt-prog{font-size:.72rem;font-weight:800;color:var(--tg-700)}
#tdDetSubt .td-subt-empty{font-size:.74rem;color:var(--text-muted)}
#tdDetSubt .td-subt-bar{flex:1;height:6px;background:var(--surface-2);border-radius:20px;overflow:hidden}
#tdDetSubt .td-subt-bar i{display:block;height:100%;background:var(--tg-800);transition:width .2s}
#tdDetSubt .td-subt-head,#tdDetSubt .td-subt-i{display:grid;grid-template-columns:18px 1fr 158px 96px 20px;align-items:center;gap:9px;padding-left:9px;padding-right:9px}
#tdDetSubt .td-subt-head{padding-top:7px;padding-bottom:7px;background:var(--tg-800);border-radius:8px 8px 0 0}
#tdDetSubt .td-subt-head span{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tdDetSubt .td-subt-i{padding-top:7px;padding-bottom:7px;border-top:1px solid var(--border)}
#tdDetSubt .td-subt-list{border:1px solid var(--border);border-top:0;border-radius:0 0 8px 8px;box-sizing:border-box}
#tdDetSubt .td-subt-head{box-sizing:border-box;border-left:1px solid var(--tg-800);border-right:1px solid var(--tg-800)}
#tdDetSubt .td-subt-list .td-subt-i:first-child{border-top:0}
#tdDetSubt .td-subt-i input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--tg-800);justify-self:center}
#tdDetSubt .td-subt-t{font-size:.84rem;color:var(--text);min-width:0;overflow-wrap:anywhere}
#tdDetSubt .td-subt-i>.td-subt-asg,#tdDetSubt .td-subt-i>.td-subt-due{justify-self:start}
#tdDetSubt .td-subt-i>.td-subt-del{justify-self:center}
#tdDetSubt .td-subt-i.done .td-subt-t{text-decoration:line-through;color:var(--text-muted)}
#tdDetSubt .td-subt-asg{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--tg-700);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2px 9px 2px 3px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
#tdDetSubt .td-subt-asg.none{color:var(--text-muted);padding-left:9px}
#tdDetSubt .td-subt-asg.ro,#tdDetSubt .td-subt-due.ro{cursor:default}
#tdDetSubt .td-subt-i input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}
#tdDetSubt .td-subt-asg .td-ava{width:16px;height:16px;font-size:.5rem;background:var(--tg-50,#F2F6FB);color:var(--tg-700);border:1px solid var(--border)}
#tdDetSubt .td-subt-due{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}
#tdDetSubt .td-subt-due input[type=date]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;bottom:0;left:8px}
#tdDetSubt .td-subt-due-add{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2px 9px;white-space:nowrap}
#tdDetSubt .td-subt-due-chip{font-size:.66rem;font-weight:700;background:var(--surface-2);color:var(--text-muted);border-radius:6px;padding:2px 7px}
#tdDetSubt .td-subt-due-chip.venc{background:#FDECEC;color:#DC2626}
#tdDetSubt .td-subt-due-chip.hoy{background:#FEF3E2;color:#D97706}
#tdDetSubt .td-subt-del{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.9rem;padding:2px 4px;opacity:.45;flex:0 0 auto}
#tdDetSubt .td-subt-del:hover{opacity:1;color:#DC2626}
#tdDetSubt .td-subt-add{display:flex;gap:7px;margin-top:9px}
#tdDetSubt .td-subt-add input{flex:1;font-family:inherit;font-size:.82rem;padding:7px 10px;border:1px solid var(--border-md,#CBD9EC);border-radius:8px;background:var(--surface);color:var(--text)}
#tdDetSubt .td-subt-add input:focus{outline:0;border-color:var(--tg-500)}
#tdDetSubt .td-subt-add .btn{border-radius:8px}
#seccionTodo .td-chip.subt{background:var(--surface-2);color:var(--text-muted)}
/* popover de asignar responsable (se monta en <body>) */
.td-subt-pop{position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--border-md,#CBD9EC);border-radius:9px;box-shadow:0 8px 24px rgba(20,35,60,.18);padding:5px;min-width:184px;max-height:260px;overflow:auto}
.td-subt-pop button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;font-family:inherit;font-size:.8rem;color:var(--text);padding:7px 9px;border-radius:6px;cursor:pointer;text-align:left}
.td-subt-pop button:hover{background:var(--surface-2)}
.td-subt-pop button.none{color:var(--text-muted)}
.td-subt-pop .td-ava{width:18px;height:18px;border-radius:50%;font-size:.52rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;background:var(--tg-50,#F2F6FB);color:var(--tg-700);border:1px solid var(--border);flex:0 0 auto}
#tdDetModal .td-det-desc{font-size:.85rem;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;margin-bottom:14px;line-height:1.45}
#tdDetModal .td-det-tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:12px}
#tdDetModal .td-det-tabs button{border:0;background:transparent;font-family:inherit;font-size:.76rem;font-weight:600;color:var(--text-muted);padding:5px 12px;border-radius:7px;cursor:pointer}
#tdDetModal .td-det-tabs button.on{background:var(--surface);color:var(--tg-800);box-shadow:0 1px 3px rgba(15,25,40,.12)}
#tdDetModal .td-chip{font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
#tdDetModal .td-chip.cli{background:var(--tg-50,#F2F6FB);color:var(--tg-700)}#tdDetModal .td-chip.per{background:var(--surface-2);color:var(--text-muted)}#tdDetModal .td-chip.fut{background:var(--surface-2);color:var(--text-muted)}#tdDetModal .td-chip.venc{background:#FDECEC;color:#DC2626}#tdDetModal .td-chip.hoy{background:#FEF3E2;color:#D97706}
#tdDetModal .td-ava{width:22px;height:22px;border-radius:50%;background:var(--tg-500);color:#fff;font-size:.6rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
#tdDetModal .td-asg{font-size:.72rem;color:var(--text-muted)}#tdDetModal .td-asg b{color:var(--tg-700)}
#tdDetModal .td-estp{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text)}
#tdDetModal .td-edot{width:8px;height:8px;border-radius:50%}#tdDetModal .td-caret{color:var(--text-muted);font-size:.6rem}
#tdDetModal .td-prio{width:9px;height:9px;border-radius:50%}#tdDetModal .td-prio.urgente{background:#DC2626}#tdDetModal .td-prio.alta{background:#D97706}#tdDetModal .td-prio.normal{background:#94A3B8}
/* comentarios (clon Payroll) */
#tdPaneCom .td-cmt{margin-bottom:9px}
#tdPaneCom .td-cmt .td-cmt{margin-top:9px}   /* separar la respuesta anidada de su comentario padre */
#tdPaneCom .td-cmt-row{display:flex;gap:9px}
#tdPaneCom .td-cmt-body{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 11px}
#tdPaneCom .td-cmt-top{display:flex;align-items:center;gap:7px;margin-bottom:2px}
#tdPaneCom .td-cmt-au{font-weight:700;font-size:.77rem;color:var(--text)}
#tdPaneCom .td-cmt-ts{font-size:.62rem;color:var(--text-muted)}
#tdPaneCom .td-cmt-tx{font-size:.82rem;line-height:1.42;color:var(--text)}
#tdPaneCom .td-cmt-lap{font-size:.76rem;color:var(--text-muted);font-style:italic}
#tdPaneCom .td-cmt-acts{display:flex;gap:12px;margin-top:5px}
#tdPaneCom .td-cmt-acts button{border:0;background:transparent;font-size:.67rem;font-weight:700;color:var(--text-muted);cursor:pointer;padding:0}
#tdPaneCom .td-cmt-acts button:hover{color:var(--tg-700)}#tdPaneCom .td-cmt-acts button.danger:hover{color:#DC2626}
#tdPaneCom .td-cmt-ebox,#tdPaneCom .td-cmt-rbox{margin-top:6px}
#tdPaneCom .td-cmt-ebox textarea,#tdPaneCom .td-cmt-rbox textarea{width:100%;min-height:36px;font-size:.8rem;padding:6px 9px;border:1px solid var(--border-md,#CBD5E1);border-radius:8px;font-family:inherit;resize:vertical}
#tdPaneCom .td-cmt-rbtns{display:flex;gap:6px;margin-top:5px}
#tdPaneCom .td-cmt-send{border:0;background:var(--tg-800);color:#fff;border-radius:7px;padding:5px 12px;font-family:inherit;font-size:.75rem;font-weight:700;cursor:pointer}
#tdPaneCom .td-cmt-cancel{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:7px;padding:5px 12px;font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
#tdPaneCom .td-cmt-new{margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
#tdPaneCom .td-cmt-newrow{display:flex;gap:8px;align-items:flex-end}
#tdPaneCom .td-cmt-new textarea{flex:1;min-height:42px;font-size:.82rem;padding:8px 10px;border:1px solid var(--border-md,#CBD5E1);border-radius:9px;font-family:inherit;resize:vertical}
/* F4a: barra de herramientas del composer (formato + @ + adjuntar) */
#tdPaneCom .td-cmt-tools{display:flex;align-items:center;gap:4px;margin-bottom:6px}
#tdPaneCom .td-cmt-tools .fmt-bar{margin-bottom:0}
#tdPaneCom .td-cmt-tbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;border:1px solid var(--border-md,#CBD5E1);background:var(--surface);border-radius:6px;cursor:pointer;color:var(--text-muted);font-size:.9rem;font-weight:700;padding:0}
#tdPaneCom .td-cmt-tbtn:hover{background:var(--tg-800);color:#fff;border-color:var(--tg-800)}
/* menciones resaltadas en el texto del comentario */
#tdPaneCom .td-men{background:var(--tg-50);color:var(--tg-700);font-weight:700;border-radius:5px;padding:0 3px}
/* adjuntos dentro de un comentario */
#tdPaneCom .td-adj-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#tdPaneCom .td-adj-img{width:84px;height:84px;object-fit:cover;border:1px solid var(--border);border-radius:8px;cursor:pointer}
#tdPaneCom .td-adj-file{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;text-decoration:none;color:var(--text);max-width:230px}
#tdPaneCom .td-adj-file:hover{border-color:var(--tg-500)}
#tdPaneCom .td-adj-file .td-adj-nm{font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
#tdPaneCom .td-adj-file small{font-size:.64rem;color:var(--text-muted)}
/* fila de adjuntos pendientes en el composer */
#tdPaneCom .td-adjbar{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
#tdPaneCom .td-adjchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:4px 6px 4px 8px;font-size:.72rem}
#tdPaneCom .td-adjchip b{font-weight:600;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tdPaneCom .td-adjchip small{color:var(--text-muted)}
#tdPaneCom .td-adjchip button{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:0 2px}
#tdPaneCom .td-adjchip button:hover{color:#DC2626}
/* picker de @menciones (fixed, sobre el textarea) */
.td-atpick{position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(15,25,40,.18);padding:5px;display:none;max-height:230px;overflow:auto}
.td-atpick button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;border-radius:7px;padding:6px 9px;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text);text-align:left}
.td-atpick button:hover,.td-atpick button.hi{background:var(--tg-50)}

/* ── @menciones COMPARTIDAS (menciones.js): Payroll/Bookkeeping/Notas… ── */
.men-tag{background:var(--tg-50,#F2F6FB);color:var(--tg-700);font-weight:700;border-radius:5px;padding:0 3px}
.men-atpick{position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(15,25,40,.18);padding:5px;display:none;max-height:230px;overflow:auto}
.men-atpick button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;border-radius:7px;padding:6px 9px;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text);text-align:left}
.men-atpick button:hover,.men-atpick button.hi{background:var(--tg-50,#F2F6FB)}
.men-ava{width:20px;height:20px;border-radius:50%;background:var(--tg-500);color:#fff;font-size:.52rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
/* Botón @ del compositor de comentarios de Payroll */
:is(#seccionPayroll, #seccionSalesTax, #modalAuditoria) .pcmt-at{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--border-md,#CBD5E1);background:var(--surface);border-radius:7px;cursor:pointer;color:var(--text-muted);font-size:.95rem;font-weight:700;padding:0;flex:0 0 auto}
:is(#seccionPayroll, #seccionSalesTax, #modalAuditoria) .pcmt-at:hover{background:var(--tg-800);color:#fff;border-color:var(--tg-800)}
/* lightbox de imágenes */
.td-lightbox{position:fixed;inset:0;background:rgba(15,25,40,.82);display:none;align-items:center;justify-content:center;z-index:1300;padding:30px;cursor:zoom-out}
.td-lightbox.open{display:flex}
.td-lightbox img{max-width:92%;max-height:92%;border-radius:10px}
/* F4b: preferencias de notificación de tareas (Config → Mi cuenta) */
#cfgNotifPrefs .cfg-notif-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 2px;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text)}
#cfgNotifPrefs .cfg-notif-row.master{border-bottom:2px solid var(--border-md,#CBD5E1);font-size:.88rem;margin-bottom:2px}
#cfgNotifPrefs .cfg-notif-row:last-child{border-bottom:0}
#cfgNotifPrefs .cfg-notif-list.off{opacity:.45}
/* Aire vertical entre bloques del formulario de tarea (antes se veían apilados) */
#tdModal #formTodo{display:flex;flex-direction:column;gap:16px}
#tdModal #formTodo .form-field{gap:6px}
/* F4e: recurrencia en el modal de tarea */
#tdModal .td-rec-ult{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text);margin:2px 0 0;cursor:pointer}
#tdModal .td-rec-preview{margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--tg-700);background:var(--tg-50);border:1px solid #D9E6F5;border-radius:9px;padding:9px 12px}
#tdPaneHist .td-hist{font-size:.77rem;color:var(--text-muted);padding:6px 0;border-bottom:1px dashed var(--border);display:flex;gap:7px;align-items:center}
#tdPaneHist .td-hist b{color:var(--text)}

/* Combobox predictivo (cliente en registro de tiempo) */
.combo { position: relative; }
.combo-input { width: 100%; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .83rem; color: var(--text); background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.combo-input:focus { outline: none; border-color: var(--tg-500); background: var(--surface); box-shadow: 0 0 0 3px var(--green-ring); }
.combo-list { display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 30; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 20px rgba(20,40,70,.14); }
.combo-item { padding: 7px 10px; font-size: .82rem; color: var(--text); cursor: pointer; }
.combo-item:hover { background: var(--tg-50, #eef4fc); }
.combo-sub { color: var(--text-muted); font-size: .76rem; }
.combo-empty { padding: 9px 10px; font-size: .8rem; color: var(--text-muted); }
/* Fila "Crear nuevo cliente" dentro del combo (pop-up en sitio) */
.combo-create { display: flex; align-items: center; gap: 9px; padding: 9px 10px; cursor: pointer; border-top: 1px solid var(--border); background: var(--tg-50, #f4f8fd); }
.combo-create:hover { background: var(--tg-100, #e9f1fb); }
.cc-plus { width: 20px; height: 20px; border-radius: 6px; background: var(--tg-800, #23395B); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: .9rem; }
.cc-txt { font-size: .82rem; font-weight: 700; color: var(--tg-800, #23395B); }
.cc-q { color: var(--text-muted); font-weight: 400; }

/* Ayuda "?" con leyenda al pasar el mouse / enfocar (para Servicio / Actividad) */
.help-tip { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:5px; border-radius:50%; border:1px solid var(--border); color:var(--text-muted); font-size:.6rem; font-weight:700; cursor:pointer; position:relative; vertical-align:middle; }
.help-tip:hover, .help-tip.open { background:var(--tg-500); color:#fff; border-color:var(--tg-500); }
.help-pop { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:60; width:300px; padding:13px 15px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 22px rgba(20,40,70,.16); font-size:.75rem; font-weight:400; line-height:1.55; color:var(--text); text-transform:none; letter-spacing:0; white-space:normal; }
.help-tip:hover .help-pop, .help-tip.open .help-pop { display:block; }
.help-pop .help-h { display:block; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:0 0 9px; }
.help-pop p { margin:0 0 11px; }
.help-pop p:last-child { margin-bottom:0; }
.help-pop b { display:block; color:var(--tg-800, #23395B); font-weight:700; margin-bottom:2px; }
/* Descripción como área de texto (varias líneas visibles) en el panel del timer */
.timer-panel textarea { width:100%; min-height:64px; resize:vertical; font-family:inherit; }

/* ═══════════════════════════════════════════════════════════
   MÓDULO TIEMPO — sección principal
   ═══════════════════════════════════════════════════════════ */
.duracion-badge {
  font-variant-numeric:tabular-nums; font-weight:700;
  font-size:.78rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:6px;
  padding:2px 8px; color:var(--text); white-space:nowrap;
}
.tiempo-total-row {
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding:8px 12px; font-size:.82rem;
  color:var(--text-muted); border-top:2px solid var(--border);
  font-weight:600;
}
.resumen-grupos {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:16px;
}
.resumen-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
}
.resumen-card h4 {
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em;
}
.resumen-row { display:flex; align-items:center; gap:6px; margin-bottom:7px; font-size:.76rem; }
.resumen-label {
  width:110px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; flex-shrink:0; color:var(--text);
}
.resumen-bar-wrap {
  flex:1; height:5px; background:var(--border);
  border-radius:3px; overflow:hidden;
}
.resumen-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }
.resumen-dur { font-weight:700; min-width:58px; text-align:right; flex-shrink:0; }
.resumen-pct { color:var(--text-muted); min-width:30px; text-align:right; flex-shrink:0; font-size:.7rem; }

/* Tabla tiempo */
#tiempoTbody tr:hover { background:var(--surface-2); }

/* Entradas manuales */
tr.entry-manual { background:rgba(250,204,21,.06); }
tr.entry-manual:hover { background:rgba(250,204,21,.12); }
.badge-manual {
  display:inline-block; font-size:.65rem; font-weight:700;
  background:#fef9c3; color:#92400e; border:1px solid #fde68a;
  border-radius:3px; padding:1px 5px; margin-top:2px;
  white-space:nowrap;
}
.page-section { display: none; }
.page-section.active { display: block; }

/* ══════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: .8rem; font-weight: 600;
  border: none;
  transition: background .12s, box-shadow .12s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary       { background: var(--tg-800); color: #FFFFFF; }
.btn-primary:hover { background: var(--tg-700); box-shadow: 0 2px 8px rgba(35,57,91,.35); }

.btn-accent        { background: var(--tg-500); color: #FFFFFF; }
.btn-accent:hover  { background: var(--tg-600); }
.btn-gold          { background: var(--tg-500); color: #FFFFFF; }
.btn-gold:hover    { background: var(--tg-600); }

.btn-outline       { background: transparent; color: var(--text); border: 1.5px solid var(--border-md); }
.btn-outline:hover { border-color: var(--text); background: var(--bg); }

.btn-danger        { background: var(--danger); color: #FFFFFF; }

.btn-sm            { padding: 4px 10px; font-size: .74rem; }
.btn-icon          { padding: 6px; border-radius: var(--radius); background: transparent; border: none; color: var(--text-muted); transition: background .12s, color .12s; }
.btn-icon:hover    { background: var(--bg); color: var(--text); }

/* ══════════════════════════════════════════════════════════
   TARJETAS
   ══════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: .88rem; font-weight: 700; color: var(--text); }
.card-body { padding: 14px 16px; }

/* ══════════════════════════════════════════════════════════
   STATS ROW
   ══════════════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow .15s;
}
.stat-card:hover        { box-shadow: var(--shadow-lg); }
.stat-card .stat-label  { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.stat-card .stat-value  { font-size: 1.65rem; font-weight: 800; color: var(--text); line-height: 1; }
.stat-card .stat-sub    { font-size: .68rem; color: var(--text-muted); }

.stat-card.gold,
.stat-card.accent,
.stat-card.green  { border-left: 3px solid var(--tg-500); }
.stat-card.blue,
.stat-card.steel  { border-left: 3px solid var(--sl-400); }
.stat-card.dark   { border-left: 3px solid var(--tg-800); }
.stat-card.red,
.stat-card.muted  { border-left: 3px solid var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   TABLA
   ══════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
thead th {
  background: var(--bg);
  padding: 8px 13px;
  text-align: left;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:hover { background: var(--tg-50); }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 8px 13px; vertical-align: middle; }
tbody td .cell-primary { font-weight: 600; color: var(--text); font-size: .82rem; }
tbody td .cell-sub     { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }

@media (prefers-color-scheme: dark) {
  tbody tr:hover { background: rgba(134,183,230,.08); }
}
[data-theme="dark"] tbody tr:hover { background: rgba(134,183,230,.08); }

/* ══════════════════════════════════════════════════════════
   GRID COMPACTO (estilo Excel moderno) — usado en Clientes
   ══════════════════════════════════════════════════════════ */
.grid-tabla { font-size: .78rem; }
.grid-tabla thead th {
  text-transform: none;
  letter-spacing: 0;
  text-align: center;               /* encabezados CENTRADOS (convención de tabla) — datos NO */
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--tg-800);        /* navy de marca — jerarquía del encabezado */
  padding: 7px 10px;
  border-bottom: none;
}
.grid-tabla thead th:first-child { border-top-left-radius: 8px; }
.grid-tabla thead th:last-child  { border-top-right-radius: 8px; }
.grid-tabla thead th[data-sort] { cursor: pointer; }
.grid-tabla thead th[data-sort]:hover { background: var(--tg-900); }
.grid-tabla thead th + th,
.grid-tabla tbody td + td { border-left: 1px solid var(--border); }
.grid-tabla thead th + th { border-left-color: rgba(255,255,255,.15); }
.grid-tabla tbody td { padding: 5px 10px; font-size: .78rem; }
.grid-tabla tbody tr { border-bottom: 1px solid var(--border); }
.grid-tabla tbody tr:nth-child(even) { background: var(--bg); }
.grid-tabla tbody tr:hover { background: var(--tg-50); }
[data-theme="dark"] .grid-tabla tbody tr:hover { background: rgba(134,183,230,.08); }
.grid-tabla td.col-nombre { font-weight: 500; color: var(--text); }
.grid-tabla td.muted { color: var(--text-muted); }
.grid-tabla td.cap   { text-transform: capitalize; }

/* punto de estado (reemplaza los badges de colores) */
.estado-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 0; background: #94A3B8;
}
.estado-dot.activo      { background: #16A34A; }
.estado-dot.prospecto   { background: #D97706; }
.estado-dot.inactivo    { background: #94A3B8; }
.estado-dot.archivado   { background: #CBD5E1; }
.estado-dot.pausado     { background: #D97706; }
.estado-dot.en-cierre   { background: #94A3B8; }
.estado-dot.cancelacion { background: #DC2626; }
/* Servicios: minuta de cambios + alineación de columnas */
.grid-tabla td.num { text-align: right; white-space: nowrap; }   /* datos numéricos a la derecha */
.grid-tabla th.num { text-align: right; white-space: nowrap; }   /* su encabezado TAMBIÉN a la derecha (alineado sobre las cifras) — texto va centrado */
.grid-tabla td.acciones { text-align: right; white-space: nowrap; }
.svc-cambios { margin-top: 5px; }
.svc-cambios summary { font-size: .68rem; color: var(--text-muted); cursor: pointer; font-weight: 400; }
.svc-cambio { font-size: .68rem; color: var(--text-muted); padding: 3px 0 0; line-height: 1.4; }
.svc-cambio b { font-weight: 500; color: var(--text); }
.svc-cambio .precio { color: #15803D; }
.svc-cambio .efec { color: #15803D; }
.precio-prox { font-size: .66rem; color: #B45309; margin-top: 1px; white-space: nowrap; font-weight: 400; }
/* ── Tareas: estados, prioridad, menú de estado y actividad ── */
.estado-dot.pendiente    { background: #5686C4; }
.estado-dot.en-progreso  { background: #D97706; }
.estado-dot.completada   { background: #16A34A; }
.estado-dot.cancelada    { background: #94A3B8; }
.estado-dot.prio-normal  { background: #CBD5E1; }
.estado-dot.prio-alta    { background: #D97706; }
.estado-dot.prio-urgente { background: #DC2626; }
.tarea-desc { font-size: .72rem; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.vence-vencida { color: #DC2626; font-weight: 500; }
.tarea-vieja { color: #B45309; font-weight: 500; }
.grid-tabla tbody tr.fila-tenue td { color: var(--text-muted); }
.grid-tabla tbody tr.fila-tenue .col-nombre { text-decoration: line-through; }
.tarea-acciones { display: inline-flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.grid-tabla tbody tr:hover .tarea-acciones { opacity: 1; }
/* Tabla de Servicios del cliente: ancho fijo al 75% de la pantalla,
   encabezados centrados + iconos de acción SIEMPRE visibles (no solo al hover). */
.grid-tabla.svc-grid { width: 75%; max-width: 100%; }
.grid-tabla.svc-grid thead th { text-align: center; }
.svc-grid .tarea-acciones { opacity: 1; }
.t-accion { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 5px; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; background: transparent; padding: 0; }
.t-accion:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.estado-cell { position: relative; cursor: pointer; }
/* El estado del servicio es un BOTÓN: pill con borde + caret que resalta al pasar el
   mouse, para que se vea que ahí se hace clic (pausar / cancelar / reanudar). */
.estado-cell .estado-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--border-md); border-radius: 15px; background: var(--surface);
  cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.estado-cell:hover .estado-btn { border-color: var(--tg-500); background: var(--bg); box-shadow: 0 0 0 3px var(--green-ring); }
.estado-cell .caret { color: var(--text-muted); margin-left: 1px; font-size: .72em; }
.estado-cell:hover .caret { color: var(--tg-600); }
.estado-menu { position: absolute; top: 100%; left: 8px; z-index: 30; margin-top: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; min-width: 165px; }
.estado-opt { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 6px; font-size: .78rem; color: var(--text); cursor: pointer; }
.estado-opt:hover { background: var(--bg); }
.estado-opt .check { margin-left: auto; color: #16A34A; font-weight: 700; }
.tarea-act { margin-top: 6px; }
.tarea-act summary { font-size: .68rem; color: var(--text-muted); cursor: pointer; font-weight: 400; }
.act-add { display: flex; gap: 6px; margin: 7px 0 4px; max-width: 460px; }
.act-add input { flex: 1; font-size: .72rem; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.act-item { font-size: .7rem; color: var(--text); padding: 3px 0; line-height: 1.45; }
.act-item .quien { font-weight: 500; }
.act-item.cambio { color: var(--text-muted); }
/* ── Historial: timeline sobrio (sin emojis) ── */
.hist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.hist-item { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.hist-item:last-child { border-bottom: none; }
.hist-item:hover { background: var(--bg); }
.hist-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.hist-dot.crear  { background: #16A34A; }
.hist-dot.editar { background: #5686C4; }
.hist-dot.estado { background: #D97706; }
.hist-dot.anular { background: #DC2626; }
.hist-dot.ver    { background: #94A3B8; }
.hist-accion { font-size: .8rem; color: var(--text); line-height: 1.4; }
.hist-accion b { font-weight: 500; }
.hist-meta { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.hist-muted { color: var(--text-muted); }

/* columnas ordenables */
.grid-tabla th[data-sort] { cursor: pointer; user-select: none; }
.grid-tabla th[data-sort]:hover { color: var(--text); }
.grid-tabla th[data-sort]::after { content: '↕'; margin-left: 5px; opacity: .3; font-size: .85em; }
.grid-tabla th.orden-activo[data-dir="asc"]::after  { content: '↑'; opacity: .75; }
.grid-tabla th.orden-activo[data-dir="desc"]::after { content: '↓'; opacity: .75; }

/* conteo de registros junto al título */
.conteo-registros { font-weight: 400; font-size: .76rem; color: var(--text-muted); margin-left: 6px; }

/* ══════════════════════════════════════════════════════════
   DIÁLOGO DE LA APP (reemplaza confirm/alert del navegador)
   ══════════════════════════════════════════════════════════ */
.ui-dialog-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity .18s ease;
}
.ui-dialog-overlay.abierto { opacity: 1; }
.ui-dialog {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
  transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.ui-dialog-overlay.abierto .ui-dialog { transform: none; }
.ui-dialog-head { display: flex; align-items: center; gap: 11px; padding: 18px 18px 0; }
.ui-dialog-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ui-dialog-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.ui-dialog-msg { padding: 12px 18px 4px; font-size: .85rem; line-height: 1.6; color: var(--text-muted); white-space: pre-line; }
.ui-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px 18px; }
.ui-dialog-btn { font-size: .82rem; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; border: none; transition: filter .12s, background .12s; }
.ui-dialog-cancel { background: transparent; border: 1px solid var(--border-md); color: var(--text-muted); }
.ui-dialog-cancel:hover { background: var(--bg); }
.ui-dialog-ok { color: #fff; }
.ui-dialog-ok:hover { filter: brightness(.94); }

/* ══════════════════════════════════════════════════════════
   HOJA DE TRABAJO — encabezado e info (estilo limpio)
   ══════════════════════════════════════════════════════════ */
.hoja-meta-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--text); margin-top: 4px; }
.hoja-meta-contacto { font-size: .77rem; color: var(--text-muted); margin-top: 6px; }
.hoja-meta-linea .sep, .hoja-meta-contacto .sep { color: var(--text-muted); opacity: .55; }

/* La ficha de Información no ocupa todo el ancho: queda como un formulario cómodo a la izquierda. */
#tabDatos .card { max-width: 640px; }
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; }
.ficha-label { font-size: .7rem; color: var(--text-muted); margin-bottom: 3px; }
.ficha-val { font-size: .85rem; color: var(--text); }
.ficha-val.vacio { color: var(--text-muted); }
.btn-ver-idf { font-size: .7rem; padding: 2px 9px; border: 1px solid var(--border-md); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; vertical-align: middle; }
.btn-ver-idf:hover { background: var(--bg); }
@media (max-width: 640px) { .ficha-grid { grid-template-columns: 1fr; } }

/* ── Notas: bitácora compacta ── */
#tabNotas { max-width: 920px; }
.nota-textarea {
  width: 100%; box-sizing: border-box; border: none; outline: none; resize: none;
  background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
  font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--text); min-height: 80px;
}
.nota-textarea::placeholder { color: var(--text-muted); }
.nota-textarea:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-md); }

/* ── Barra de formato B / I / U (notas + chat) ── */
.fmt-bar { display: flex; gap: 3px; margin-bottom: 5px; }
.fmt-btn { width: 28px; height: 26px; border: 1px solid var(--border-md, #c7d2e0); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--text); font-size: .85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fmt-btn:hover { background: var(--tg-800); color: #fff; border-color: var(--tg-800); }
.fmt-btn b { font-weight: 800; } .fmt-btn i { font-style: italic; font-family: Georgia, serif; } .fmt-btn u { text-decoration: underline; }
/* Fase 2 (editor rico): estado ACTIVO — botón encendido cuando el caret está en ese formato */
.fmt-btn.on, .fmt-color-btn.on { background: var(--tg-800); color: #fff; border-color: var(--tg-800); }
/* Color de texto: botón "A" + paleta */
.fmt-color-wrap { position: relative; display: inline-flex; }
.fmt-color-btn { height: 26px; padding: 0 6px; border: 1px solid var(--border-md, #c7d2e0); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.fmt-color-btn:hover { background: var(--tg-800); color: #fff; border-color: var(--tg-800); }
.fmt-color-btn b { font-weight: 800; font-size: .85rem; }
.fmt-color-bar { width: 12px; height: 3px; border-radius: 2px; background: #DC2626; display: inline-block; }
.fmt-color-caret { font-size: .6rem; opacity: .7; }
.fmt-palette { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 60; display: none; gap: 6px; background: var(--surface); border: 1px solid var(--border-md, #c7d2e0); border-radius: 8px; padding: 7px; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.fmt-palette.on { display: flex; }
.fmt-sw { width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; padding: 0; }
.fmt-sw:hover { transform: scale(1.12); }
.fmt-sw-negro { background: #111827; box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--border-md, #c7d2e0); }
/* Fase 2 (editor rico): anillo del swatch cuyo color tiene el caret */
.fmt-sw.sel, .fmt-sw-negro.sel { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--tg-600); }
/* ── Fase 4: color de fuente del chat POR TEMA. El dato guardado es el TOKEN (data-c);
   solo cambia la presentación. Claro = tono -600; oscuro = tono -400 (legible sobre navy). ── */
:root { --chat-c-rojo:#DC2626; --chat-c-verde:#16A34A; --chat-c-azul:#2563EB; --chat-c-naranja:#D97706; --chat-c-morado:#7C3AED; }
@media (prefers-color-scheme: dark) {
  :root { --chat-c-rojo:#F87171; --chat-c-verde:#4ADE80; --chat-c-azul:#60A5FA; --chat-c-naranja:#FBBF24; --chat-c-morado:#A78BFA; }
}
[data-theme="dark"]  { --chat-c-rojo:#F87171; --chat-c-verde:#4ADE80; --chat-c-azul:#60A5FA; --chat-c-naranja:#FBBF24; --chat-c-morado:#A78BFA; }
[data-theme="light"] { --chat-c-rojo:#DC2626; --chat-c-verde:#16A34A; --chat-c-azul:#2563EB; --chat-c-naranja:#D97706; --chat-c-morado:#7C3AED; }
/* Formato renderizado (marcas → b/i/u) en notas y chat */
.bitacora-cont b, .nota-version .vcont b, #seccionChat .chat-texto b { font-weight: 700; }
.bitacora-cont i, .nota-version .vcont i, #seccionChat .chat-texto i { font-style: italic; }
.bitacora-cont u, .nota-version .vcont u, #seccionChat .chat-texto u { text-decoration: underline; }

/* ── Notas de Accesos (credenciales estructuradas) ── */
.acc-form { margin-bottom: 10px; }
.acc-form .acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.acc-form .acc-fld { margin-bottom: 8px; }
.acc-form .acc-fld label { display: block; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); margin-bottom: 3px; }
.acc-form .acc-fld input, .acc-form .acc-fld textarea { width: 100%; box-sizing: border-box; height: 29px; border: 1px solid var(--border-md, #c7d2e0); border-radius: 6px; padding: 0 8px; font-family: inherit; font-size: .8rem; background: var(--surface); color: var(--text); }
.acc-form .acc-fld textarea { height: auto; min-height: 52px; padding: 6px 8px; line-height: 1.35; resize: vertical; }
.acc-form .acc-fld input:focus, .acc-form .acc-fld textarea:focus { outline: none; border-color: var(--accent, #5686C4); box-shadow: 0 0 0 3px rgba(86,134,196,.15); }
.acc-pw { position: relative; }
.acc-pw input { padding-right: 32px; }
.acc-eye { position: absolute; right: 3px; top: 3px; width: 23px; height: 23px; border: none; background: none; border-radius: 5px; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; }
.acc-eye:hover, .acc-eye.on { color: var(--tg-800); background: var(--surface-2); }
@media (max-width: 640px) { .acc-form .acc-row { grid-template-columns: 1fr; } }
/* Tarjeta de acceso guardado en la bitácora */
.acc-card { border: 1px solid var(--border); border-left: 3px solid var(--tg-800); border-radius: 7px; padding: 8px 11px; margin-top: 3px; background: var(--surface); }
.acc-title { font-weight: 700; font-size: .84rem; display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.acc-title svg { color: var(--tg-800); }
.acc-grid { display: grid; grid-template-columns: 76px 1fr; gap: 2px 10px; font-size: .8rem; align-items: center; }
.acc-k { color: var(--text-muted); font-size: .7rem; font-weight: 600; }
.acc-v { display: flex; align-items: center; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums; }
.acc-v .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-v.acc-nota-v { align-items: flex-start; align-self: start; }
.acc-nota-k { align-self: start; padding-top: 1px; }
.acc-v .val.acc-nota { white-space: pre-wrap; overflow: visible; text-overflow: clip; word-break: break-word; }
.acc-ico { width: 22px; height: 22px; border: none; background: none; border-radius: 5px; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-ico:hover, .acc-ico.on { color: var(--tg-800); background: var(--surface-2); }
.nota-vis-hint { font-size: .72rem; color: var(--text-muted); }
.nota-campo-label { font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.bitacora { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.bitacora-fila { padding: 7px 14px; border-bottom: 1px solid var(--border); }
.bitacora-fila:last-child { border-bottom: none; }
.bitacora-fila:hover { background: var(--bg); }
/* Cabecera de la nota: texto a la izquierda, acciones SIEMPRE a la derecha */
.bitacora-meta { display: flex; align-items: center; gap: 10px; font-size: .72rem; color: var(--text-muted); }
.bitacora-meta-txt { flex: 1; min-width: 0; }
.bitacora-cont { font-size: .82rem; line-height: 1.45; color: var(--text); margin-top: 1px; white-space: pre-wrap; }
.bitacora-confid { color: #DC2626; }
/* Acciones por fila (cobrar / editar / anular): justificadas a la derecha, fijas y visibles */
.bitacora-fila { position: relative; }
.bitacora-acciones { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.nota-accion { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 6px; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; background: var(--surface); padding: 0; transition: background .12s, border-color .12s, color .12s; }
.nota-accion:hover { background: var(--bg); border-color: var(--border-md); color: var(--text); }
.nota-accion.peligro:hover { color: #DC2626; border-color: #f3c0c0; background: #fff5f5; }
/* Botón "Cobrar" (con texto): pill visible, sigue siendo neutro salvo al pasar el mouse */
.nota-cobrar { width: auto; height: 26px; padding: 0 11px; gap: 5px; font-size: .72rem; font-weight: 600; font-family: inherit; white-space: nowrap; }
.nota-cobrar:hover { color: var(--tg-700); border-color: var(--tg-500); background: var(--green-lt); }
.nota-cobrada { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.nota-editada { color: var(--text-muted); }
/* Editor en línea */
.nota-editor { padding: 10px 14px 12px; background: var(--bg); border-radius: 8px; margin-top: 2px; }
.nota-editor .nota-textarea { min-height: 60px; margin-bottom: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.nota-editor-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nota-editor-campos { display: flex; gap: 14px; flex-wrap: wrap; }
.nota-editor-acts { display: flex; gap: 8px; }
.nota-versiones { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; }
.nota-versiones summary { font-size: .72rem; color: var(--text-muted); cursor: pointer; }
.nota-version { font-size: .72rem; color: var(--text-muted); padding: 6px 0 0; }
.nota-version .vcont { color: var(--text); }
/* Nota anulada — no se borra, queda tachada */
.bitacora-fila.anulada { background: #fff7f7; }
.bitacora-fila.anulada .bitacora-cont { text-decoration: line-through; font-style: italic; color: var(--text-muted); }
.nota-badge-anulada { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .04em; color: #DC2626;
  border: 1px solid #f0bcbc; background: #fdecec; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.nota-anulada-meta { font-size: .7rem; color: #b4564f; margin-top: 3px; }

/* ══════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .67rem; font-weight: 700;
  white-space: nowrap;
  letter-spacing: .02em;
}

.badge-green,
.badge-success,
.badge-activo,
.badge-facturado {
  background: rgba(22,163,74,.11);
  color: #15803d;
  border: 1px solid rgba(22,163,74,.28);
}

.badge-blue,
.badge-info,
.badge-proceso,
.badge-steel {
  background: var(--steel-lt);
  color: var(--text);
  border: 1px solid var(--border-md);
}

.badge-red,
.badge-danger,
.badge-urgente {
  background: rgba(220,38,38,.10);
  color: #DC2626;
  border: 1px solid rgba(220,38,38,.28);
}

.badge-dark {
  background: var(--tg-900);
  color: var(--tg-300);
  border: 1px solid var(--tg-800);
}

.badge-yellow,
.badge-warning,
.badge-pendiente {
  background: rgba(245,158,11,.10);
  color: #92400e;
  border: 1px solid rgba(245,158,11,.30);
}

.badge-gray,
.badge-muted,
.badge-navy,
.badge-inactivo {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════════════════ */
.form-grid   { display: grid; gap: 12px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field  { display: flex; flex-direction: column; gap: 4px; }

.form-field label {
  font-size: .67rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .83rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--tg-500);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--green-ring);
}
.form-field textarea { resize: vertical; min-height: 68px; }
.form-field.required label::after { content: " *"; color: var(--danger); }
/* Modal de servicio: alinea los INPUTS de cada fila aunque una etiqueta ocupe 2
   líneas (etiqueta arriba, campo abajo) — p.ej. "Fecha de inicio" vs "Precio mensual". */
#modalServicio .form-grid-2 > .form-field { justify-content: space-between; }

/* ── Barra de búsqueda ── */
.search-bar {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0 10px;
  flex: 1; max-width: 320px;
  transition: border-color .15s, box-shadow .15s;
}
.search-bar:focus-within {
  border-color: var(--tg-500);
  box-shadow: 0 0 0 3px var(--green-ring);
}
.search-bar svg   { color: var(--text-muted); width: 14px; flex-shrink: 0; }
.search-bar input { border: none; background: none; padding: 7px 0; font-size: .83rem; width: 100%; color: var(--text); }
.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--text-muted); }

/* ── Filtros ── */
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-select {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .8rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.filter-select:focus {
  outline: none;
  border-color: var(--tg-500);
  box-shadow: 0 0 0 3px var(--green-ring);
}

/* ══════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12,24,12,.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateY(6px) scale(.98);
  transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: .92rem; font-weight: 700; color: var(--text); }
.modal-body      { padding: 16px 20px; }
.modal-footer    { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ── Editor de precio del servicio: historial + quitar entrada ── */
#modalPrecioServicio .prec-hist       { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
#modalPrecioServicio .prec-hist-h     { font-size: .67rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
#modalPrecioServicio .prec-hist-list  { display: flex; flex-direction: column; gap: 6px; }
#modalPrecioServicio .prec-hist-row   { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
#modalPrecioServicio .prec-hist-main  { flex: 1; min-width: 0; }
#modalPrecioServicio .prec-hist-amt   { font-size: .85rem; font-weight: 700; color: var(--text); }
#modalPrecioServicio .prec-hist-eff   { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
#modalPrecioServicio .prec-hist-meta  { font-size: .7rem; color: var(--muted); margin-top: 2px; }
#modalPrecioServicio .prec-hist-rm    { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; }
#modalPrecioServicio .prec-hist-rm:hover { background: var(--danger-lt); border-color: rgba(220,38,38,.25); color: var(--danger); }
#modalPrecioServicio .prec-hist-empty { font-size: .8rem; color: var(--muted); padding: 8px 2px; }

/* ══════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 8px 14px;
  font-size: .8rem; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.tab:hover  { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--tg-500); }

/* ══════════════════════════════════════════════════════════
   ALERTAS
   ══════════════════════════════════════════════════════════ */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .8rem;
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 14px;
  border-left: 3px solid;
}
.alert-info    { background: var(--steel-lt); color: var(--text); border-color: var(--border-md); }
.alert-success { background: rgba(22,163,74,.10); color: #15803d; border-color: #16a34a; }
.alert-warning { background: var(--bg); color: var(--text); border-color: var(--text-muted); }
.alert-danger  { background: var(--danger-lt); color: var(--danger); border-color: var(--danger); }

/* ══════════════════════════════════════════════════════════
   SPINNER
   ══════════════════════════════════════════════════════════ */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(86,134,196,.24);
  border-top-color: var(--ob-500);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   ESTADO VACÍO
   ══════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .3; display: block; }
.empty-state p   { font-size: .82rem; }

/* ══════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════ */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 7px; }
.toast {
  background: var(--tg-900);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: .8rem;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px;
  animation: slideIn .22s ease;
  max-width: 320px;
}
.toast.success { background: var(--tg-950); border-left: 3px solid var(--tg-500); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--tg-800); }
@keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══════════════════════════════════════════════════════════
   HOJA DE CLIENTE
   ══════════════════════════════════════════════════════════ */
.client-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; align-items: flex-start; gap: 14px;
}
.client-avatar-lg {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tg-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800;
  color: var(--tg-400);
  flex-shrink: 0;
}
.client-header-info { flex: 1; }
.client-header-info h2   { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.client-header-info .sub { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.client-header-meta      { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.client-header-actions   { display: flex; gap: 6px; }

/* ── Info básica del cliente ── */
.info-grid { display: flex; flex-direction: column; gap: 0; }
.info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted); font-weight: 500; }
.info-val   { color: var(--text); }

/* ── Notas ── */
.note-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 7px;
  background: var(--surface);
  transition: box-shadow .12s;
}
.note-item:hover { box-shadow: var(--shadow); }
.note-meta    { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: var(--text-muted); margin-bottom: 5px; }
.note-content { font-size: .82rem; line-height: 1.5; white-space: pre-wrap; color: var(--text); }

/* ── Tags de servicio ── */
.service-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius);
  font-size: .72rem; font-weight: 600;
  border: 1px solid;
}
.service-tag.activo    { background: rgba(22,163,74,.10); color: #15803d; border-color: rgba(22,163,74,.28); }
.service-tag.inactivo  { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
.service-tag.pausado   { background: var(--steel-lt); color: var(--text); border-color: var(--border-md); }
.service-tag.en-cierre { background: var(--bg); color: var(--text); border-color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   TOGGLE MODO OSCURO (utilidad opcional)
   JS: const h = document.documentElement;
       h.setAttribute('data-theme', h.dataset.theme==='dark' ? 'light' : 'dark');
   ══════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-md);
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem; font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.theme-toggle:hover { background: var(--bg); color: var(--text); border-color: var(--text-muted); }
.theme-toggle svg   { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════
   MÓDULO CLIENTES — EXTENSIONES
   ══════════════════════════════════════════════════════════ */

/* ── Contador en tabs ── */
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--tg-500);
  color: #fff;
  font-size: .65rem; font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}
.tab-count:empty { display: none; }

/* ── Servicios activos en header del cliente ── */
.svc-activos-row {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}
.svc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid;
}
.svc-chip.bk   { background:rgba(86,134,196,.12); color:#3D6398; border-color:rgba(86,134,196,.32); }
.svc-chip.pr   { background:rgba(168,85,247,.10); color:#6b21a8; border-color:rgba(168,85,247,.28); }
.svc-chip.tx   { background:rgba(245,158,11,.10); color:#92400e; border-color:rgba(245,158,11,.28); }
.svc-chip.lic  { background:rgba(20,184,166,.10); color:#0f766e; border-color:rgba(20,184,166,.28); }
.svc-chip.gen  { background:var(--bg); color:var(--text-muted); border-color:var(--border); }
.svc-chip.cierre { opacity: .6; text-decoration: line-through; }

/* ── Links a módulos desde la hoja ── */
.modulos-links {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.modulo-link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-md);
  background: var(--surface);
  color: var(--text);
  font-size: .72rem; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.modulo-link-btn:hover { background: var(--tg-50); border-color: var(--tg-300); color: var(--tg-700); }
.modulo-link-label { font-size: .68rem; color: var(--text-muted); font-weight: 500; }

/* ── Tarjeta de servicio mejorada ── */
.svc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .12s;
}
.svc-card:hover { box-shadow: var(--shadow); }
.svc-card-body {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
}
.svc-card-info { flex: 1; min-width: 0; }
.svc-card-title { font-weight: 700; font-size: .88rem; }
.svc-card-meta  { font-size: .73rem; color: var(--text-muted); margin-top: 3px; }
.svc-card-price {
  font-size: .8rem; font-weight: 700;
  color: var(--tg-600);
  background: var(--tg-50);
  border: 1px solid var(--tg-200);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.svc-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Tareas ── */
.tarea-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 11px 14px;
  margin-bottom: 8px;
  display: flex; align-items: flex-start; gap: 10px;
  transition: box-shadow .12s;
}
.tarea-item:hover { box-shadow: var(--shadow); }
.tarea-item.completada { opacity: .55; }
.tarea-item.vencida   { border-left: 3px solid var(--danger); }
.tarea-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--border-md);
  background: var(--bg);
  cursor: pointer;
  flex-shrink: 0; margin-top: 1px;
  transition: background .12s, border-color .12s;
  display: flex; align-items: center; justify-content: center;
}
.tarea-check.done { background: var(--tg-500); border-color: var(--tg-500); }
.tarea-check.done::after { content: '✓'; color:#fff; font-size:.65rem; font-weight:800; }
.tarea-body { flex: 1; min-width: 0; }
.tarea-titulo { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.tarea-titulo.done { text-decoration: line-through; color: var(--text-muted); }
.tarea-meta  { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.tarea-desc  { font-size: .75rem; color: var(--text-muted); margin-top: 3px; }

.prioridad-normal  { }
.prioridad-alta    { color: #d97706; }
.prioridad-urgente { color: var(--danger); font-weight: 700; }

/* ── Historial de auditoría ── */
.historial-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.historial-item:last-child { border-bottom: none; }
.historial-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0; margin-top: 1px;
}
.historial-body { flex: 1; min-width: 0; }
.historial-accion { font-size: .8rem; font-weight: 600; }
.historial-detalle { font-size: .73rem; color: var(--text-muted); margin-top: 2px; }
.historial-tiempo  { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }

/* ── Alerta de situación cliente ── */
.cliente-alerta {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: .76rem; font-weight: 600;
  margin-bottom: 10px;
}
.cliente-alerta.urgente { background: rgba(220,38,38,.08); color: var(--danger); border: 1px solid rgba(220,38,38,.2); }
.cliente-alerta.aviso   { background: rgba(245,158,11,.08); color: #b45309;     border: 1px solid rgba(245,158,11,.2); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Shell móvil ── */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; box-shadow: 14px 0 44px -8px rgba(0,0,0,.45); }
  .main-area { margin-left: 0; min-width: 0; }   /* min-width:0 → el ítem flex no crece al ancho de la tabla */
  .sb-toggle { display: inline-flex; }
  .topbar { padding: 0 12px; }
  /* ── Legibilidad global (Fase 2) ── */
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }   /* formularios a 1 columna */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 12px 14px; min-width: 0; }
  /* Contención de overflow: lo ancho (tablas) scrollea DENTRO de su caja; la página no se desborda */
  .table-wrap { max-width: 100%; }
  /* Modales casi a pantalla completa */
  .modal-overlay { padding: 10px; }
  .modal { max-height: 94vh; }
  /* Inputs a 16px → iOS no hace zoom al enfocar */
  input, select, textarea { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   FACTURACIÓN — tablero de control (aislado bajo #seccionFacturacion)
   Regla: color solo para estados; nombres/botones neutros.
   ═══════════════════════════════════════════════════════════ */
/* Filas cliente / servicio */
#seccionFacturacion .fila-cli { cursor: pointer; }
/* Fila del CLIENTE = banda con tinte navy claro + borde superior (jerarquía sobre sus servicios) */
#seccionFacturacion .fila-cli > td { background: var(--tg-50); font-weight: 600; border-top: 2px solid var(--border); }
#seccionFacturacion .fila-cli .caret { color: var(--text-muted); margin-right: 6px; font-size: .8em; }
#seccionFacturacion .cli-cont { color: var(--text-muted); font-weight: 400; font-size: .78rem; }
/* Total del cliente PROMOVIDO (negrita, mayor, oscuro) para distinguirlo de los montos de línea */
#seccionFacturacion .fila-cli .col-total { font-weight: 700; color: var(--text); font-size: .86rem; }
/* Filas de SERVICIO neutras (blanco) + monto de línea ATENUADO */
#seccionFacturacion .svc-sub td { background: var(--surface); }
#seccionFacturacion .svc-sub td:first-child { padding-left: 30px; color: var(--text); }
#seccionFacturacion .svc-sub td.num { color: var(--text-muted); }
#seccionFacturacion .col-nombre { font-weight: 600; color: var(--text); }
/* Barra buscador + filtro (espejo de la .rd-bar de Reportes de Tiempo) */
#seccionFacturacion .fact-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--tg-50); }
#seccionFacturacion .fact-bar .fld { display: flex; flex-direction: column; gap: 4px; }
#seccionFacturacion .fact-bar label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
#seccionFacturacion .fact-bar .combo { min-width: 280px; }
/* Enlaces disimulados (sin azul fijo; color/subrayado solo en hover) */
#seccionFacturacion .cli-link { color: var(--text); cursor: pointer; font-weight: 600; }
#seccionFacturacion .svc-link { color: inherit; cursor: pointer; }
#seccionFacturacion .cli-link:hover,
#seccionFacturacion .svc-link:hover { text-decoration: underline; }
/* Estado (semáforo) en Mes actual */
#seccionFacturacion .fact-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#seccionFacturacion .fact-dot.facturado { background: #16A34A; }
#seccionFacturacion .fact-dot.pendiente { background: #D97706; }
/* Barra de progreso */
#seccionFacturacion .prog { display: inline-flex; align-items: center; gap: 7px; }
#seccionFacturacion .prog-track { width: 96px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
#seccionFacturacion .prog-fill { display: block; height: 100%; border-radius: 3px; transition: width .2s; }
#seccionFacturacion .prog-pct { font-size: .72rem; color: var(--text-muted); min-width: 30px; }
/* Botones de acción: neutros en reposo, color semántico solo en hover */
#seccionFacturacion .acc-cell { display: inline-flex; gap: 6px; justify-content: flex-end; }
#seccionFacturacion .fact-ico { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: .9rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#seccionFacturacion .fact-ico-spacer { display: inline-block; width: 26px; height: 24px; }
/* Tablero acotado: la info no se "pierde" estirada a todo el ancho de la página */
#seccionFacturacion #factTabMes { max-width: 1120px; }
#seccionFacturacion .fact-ico:hover { background: var(--bg); }
#seccionFacturacion .fact-ico.do:hover { background: #ecfdf3; color: #16A34A; border-color: #bbf7d0; }
#seccionFacturacion .fact-ico.undo:hover { background: #fff7ed; color: #B45309; border-color: #fed7aa; }
/* Matriz anual */
#seccionFacturacion .mtx { width: 100%; border-collapse: collapse; font-size: .78rem; }
#seccionFacturacion .mtx th, #seccionFacturacion .mtx td { border: 1px solid var(--border); padding: 5px 4px; text-align: center; }
#seccionFacturacion .mtx thead th { background: var(--tg-800); color: #fff; font-weight: 700; font-size: .7rem; border-color: rgba(255,255,255,.18); }
#seccionFacturacion .mtx th.col-srv, #seccionFacturacion .mtx td.col-srv { text-align: left; padding: 7px 10px; min-width: 220px; }
#seccionFacturacion .mtx th.mes-actual { background: var(--accent-dk); color: #fff; font-weight: 700; }
#seccionFacturacion .mtx td.mes-actual { background: var(--bg); }
#seccionFacturacion .mtx .fila-cli > td { background: var(--bg); }
#seccionFacturacion .cel-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#seccionFacturacion .cel-na { color: #516074; font-weight: 700; opacity: .85; }
#seccionFacturacion .leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); margin-top: 10px; }
#seccionFacturacion .dotleg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ── Matriz anual: medidor por celda (fila cliente) + glifos ✓/✕ (servicios) ── */
#seccionFacturacion .mtx td.mtx-med { padding: 3px 4px; }
#seccionFacturacion .mtx-med-track { display: block; height: 15px; border-radius: 3px; background: var(--surface-2); border: .5px solid var(--border-md); overflow: hidden; }
#seccionFacturacion .mtx-med-fill { display: block; height: 100%; background: #16A34A; border-radius: 2px; }
#seccionFacturacion .mtx td.mtx-med-full .mtx-med-track { border-color: #16A34A; }
#seccionFacturacion .mtx .mtx-gl { font-size: .9rem; font-weight: 700; line-height: 1; }
#seccionFacturacion .mtx .mtx-gl-ok { color: #16A34A; }
#seccionFacturacion .mtx .mtx-gl-no { color: #D97706; }
#seccionFacturacion .mtx .fila-cli .cli-link { font-weight: 700; }
#seccionFacturacion .mtx .svc-sub td.col-srv { color: var(--text-muted); }
#seccionFacturacion .mtx .svc-sub .svc-link { color: var(--text); }
#seccionFacturacion .mtx-legmed { display: inline-block; width: 26px; height: 12px; border-radius: 3px; background: var(--surface-2); border: .5px solid var(--border-md); overflow: hidden; vertical-align: middle; }
#seccionFacturacion .mtx-legmed .mtx-med-fill { border-radius: 2px; }

/* ══════════════════════════════════════════════════════════
   BOOKKEEPING — matriz árbol (cliente = medidor · cuenta = iconos)
   ══════════════════════════════════════════════════════════ */
#seccionBookkeeping .bk-mtx { width: 100%; border-collapse: collapse; font-size: .78rem; }
#seccionBookkeeping .bk-mtx th, #seccionBookkeeping .bk-mtx td { border: 1px solid var(--border); padding: 4px 5px; text-align: center; }
#seccionBookkeeping .bk-mtx thead th { background: var(--tg-800); color: #fff; font-weight: 700; font-size: .7rem; border-color: rgba(255,255,255,.18); }
#seccionBookkeeping .bk-mtx th.bk-col-cli, #seccionBookkeeping .bk-mtx td.bk-col-cli { text-align: left; padding: 7px 10px; min-width: 230px; }
#seccionBookkeeping .bk-mtx th.bk-col-resp, #seccionBookkeeping .bk-mtx td.bk-col-resp { width: 48px; }
#seccionBookkeeping .bk-mtx th.mes-actual { background: var(--accent-dk); color: #fff; font-weight: 700; }
#seccionBookkeeping .bk-mtx td.mes-actual { background: var(--bg); }
#seccionBookkeeping .bk-cli { cursor: pointer; }
#seccionBookkeeping .bk-cli > td { background: var(--bg); }
#seccionBookkeeping .bk-cli .caret { color: var(--text-muted); margin-right: 6px; font-size: .8em; }
#seccionBookkeeping .bk-cli-nom { font-weight: 700; color: var(--text); }
#seccionBookkeeping .bk-ctas-count { font-size: .66rem; color: var(--text-muted); background: var(--surface-2); border: .5px solid var(--border); border-radius: 20px; padding: 0 7px; margin-left: 6px; }
#seccionBookkeeping .bk-cta .bk-col-cli { padding-left: 30px; }
#seccionBookkeeping .bk-cta-nom { color: var(--text); }
#seccionBookkeeping .bk-cta-meta { font-size: .7rem; color: var(--text-muted); }
#seccionBookkeeping .bk-cta-cerr { font-size: .66rem; color: var(--text-muted); font-style: italic; margin-left: 4px; }
#seccionBookkeeping .bk-cel { cursor: pointer; position: relative; }
#seccionBookkeeping .bk-cel:hover { background: var(--surface-2); }
/* Indicador de comentario en la celda (triángulo esquina, estilo Excel) */
#seccionBookkeeping .bk-cel.has-cmt::after { content: ''; position: absolute; top: 1px; right: 1px; border-width: 0 6px 6px 0; border-style: solid; border-color: transparent var(--tg-600) transparent transparent; }
#seccionBookkeeping .bk-off { background: var(--surface-2); cursor: default; }
#seccionBookkeeping .bk-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: .5px solid var(--border-md); font-size: .62rem; font-weight: 700; color: var(--text-muted); }
#seccionBookkeeping td.bk-med { padding: 3px 4px; }
#seccionBookkeeping .bk-med-track { display: block; height: 15px; border-radius: 3px; background: var(--surface-2); border: .5px solid var(--border-md); overflow: hidden; }
#seccionBookkeeping .bk-med-fill { display: block; height: 100%; background: #16A34A; border-radius: 2px; }
#seccionBookkeeping td.bk-med-full .bk-med-track { border-color: #16A34A; }
#seccionBookkeeping .cel-na { color: #516074; font-weight: 700; opacity: .85; }
#seccionBookkeeping .bk-addrow > td { text-align: left; padding: 6px 10px 6px 30px; background: var(--surface); }
#seccionBookkeeping .bk-add-btn { background: none; border: 1px dashed var(--border-md); color: var(--text-muted); border-radius: var(--radius); padding: 4px 10px; font-size: .74rem; cursor: pointer; }
#seccionBookkeeping .bk-add-btn:hover { color: var(--text); border-color: var(--text-muted); }
#seccionBookkeeping .bk-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); margin-top: 12px; align-items: center; }
#seccionBookkeeping .bk-legmed { display: inline-block; width: 26px; height: 12px; border-radius: 3px; background: var(--surface-2); border: .5px solid var(--border-md); overflow: hidden; vertical-align: middle; }

/* Iconos de estado (globales: se usan en la matriz Y en el menú) */
.bk-st { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 16px; }
.bk-st svg { display: block; }
.bk-st-done { color: #16A34A; font-weight: 700; font-size: .95rem; }
.bk-st-pend { color: #D97706; font-weight: 700; font-size: .95rem; }
.bk-st-wip  { color: #3D6398; }

/* Menú de estado + comentarios (se monta en body) */
.bk-menu { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--border-md); border-radius: 10px; box-shadow: var(--shadow-lg); width: 284px; padding: 0; overflow: hidden; }
.bk-menu-sec { padding: 5px; }
.bk-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 6px; font-size: .8rem; color: var(--text); cursor: pointer; font-family: inherit; }
.bk-menu-item:hover { background: var(--surface-2); }
.bk-menu-item.actual { font-weight: 700; background: var(--surface-2); }
.bk-menu-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; }

/* Sección de comentarios dentro del menú */
.bk-cmt-wrap { border-top: 1px solid var(--border); background: var(--surface-2); padding: 10px 12px; }
.bk-cmt-h { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-700); margin-bottom: 7px; }
.bk-cmt-list { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow: auto; margin-bottom: 8px; }
.bk-cmt { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: .78rem; }
.bk-cmt-meta { font-size: .64rem; color: var(--text-muted); margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.bk-cmt-txt { white-space: pre-wrap; word-break: break-word; }
.bk-cmt-act { display: flex; gap: 6px; flex: none; }
.bk-cmt-act button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: .66rem; font-family: inherit; padding: 0; }
.bk-cmt-act button:hover { color: var(--tg-600); text-decoration: underline; }
.bk-cmt-empty { font-size: .75rem; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.bk-cmt-add { display: flex; gap: 6px; align-items: flex-end; }
.bk-cmt-add textarea { flex: 1; border: 1px solid var(--border-md); border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: .78rem; resize: vertical; min-height: 34px; background: var(--surface); color: var(--text); }
.bk-cmt-note { font-size: .66rem; color: var(--text-muted); margin-top: 6px; }
/* Autoría del último cambio de estado de la celda (quién y cuándo) */
.bk-cmt-sello { font-size: .66rem; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; }
/* @menciones + responder en comentarios de Bookkeeping */
.bk-cmt-addbtns { display: flex; flex-direction: column; gap: 4px; }
.bk-cmt-rbox { margin-top: 6px; }
.bk-cmt-rbox textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-md); border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: .78rem; resize: vertical; min-height: 30px; background: var(--surface); color: var(--text); }
.bk-cmt-rbtns { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.bkcmt-at { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-md); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: .9rem; font-weight: 700; padding: 0; flex: 0 0 auto; }
.bkcmt-at:hover { background: var(--tg-800); color: #fff; border-color: var(--tg-800); }
/* Responder en la bitácora de Notas */
.nota-reply-box { margin: 6px 0 2px; }
.nota-reply-box textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-md); border-radius: 8px; padding: 7px 9px; font-family: inherit; font-size: .84rem; resize: vertical; min-height: 32px; background: var(--surface); color: var(--text); }
.nota-reply-btns { display: flex; gap: 7px; align-items: center; margin-top: 6px; }

/* Tooltip de comentarios al pasar el mouse (solo lectura) */
.bk-cmt-tip { position: fixed; z-index: 3200; background: #1A2233; color: #EAF0F7; border-radius: 9px; box-shadow: 0 10px 30px rgba(10,18,30,.35); padding: 10px 12px; max-width: 280px; font-size: .78rem; pointer-events: none; opacity: 0; transition: opacity .1s; }
.bk-cmt-tip.show { opacity: 1; }
.bk-cmt-tip .tt-h { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: #8FB0D6; font-weight: 700; margin-bottom: 6px; }
.bk-cmt-tip .tt-item { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.1); }
.bk-cmt-tip .tt-item:first-of-type { border-top: none; }
.bk-cmt-tip .tt-meta { font-size: .64rem; color: #9DB4D0; margin-bottom: 2px; }
.bk-cmt-tip .tt-empty { color: #9DB4D0; font-style: italic; }

/* ═══ Matriz por colores (Payroll / Sales Tax) — celdas tipo Excel ═══ */
/* Colores apagados, acordes al CRM (aprobados en mockup matriz-colores) */
:root { --mx-done:#2F9E74; --mx-todo:#B0433F; --mx-prog:#C0862E; --mx-qb:#4E7CB0; --mx-ntl:#7E5AA6; --mx-na:#EDF0F4; --pay-na:#CBD5E1; --pay-na-tx:#475569; }
[data-theme="dark"] { --mx-na:#2A3444; --pay-na:#475569; --pay-na-tx:#E2E8F0; }
.mx-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-width:50px; min-height:38px; box-sizing:border-box; padding:3px 4px; border-radius:6px; border:1px solid #111; cursor:pointer; color:#fff; line-height:1.05; overflow:hidden; transition:transform .06s ease, filter .1s ease; }
.mx-cell:hover { transform:translateY(-1px); filter:brightness(1.06); }
.mx-cell.done { background:var(--mx-done); padding:0; justify-content:flex-start; }
.mx-cell.done::before { content:''; flex:1; }                  /* verde arriba (Opción C) */
.mx-cell.todo { background:var(--mx-todo); }
.mx-cell.prog { background:var(--mx-prog); }
.mx-cell.qb   { background:var(--mx-qb); }
.mx-cell.ntl  { background:var(--mx-ntl); }
/* No aplica: gris más marcado + trama diagonal + "–" en negrita → se distingue del vacío */
.mx-cell.na   { background:#DDE4EE; color:#516074; border-color:var(--border-md); cursor:default;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(81,96,116,.10) 4px,rgba(81,96,116,.10) 8px); }
.mx-cell.na::before { content:'–'; font-weight:800; font-size:.8rem; color:#516074; }
[data-theme="dark"] .mx-cell.na { background:#2A3444; color:#9DB4D0; }
[data-theme="dark"] .mx-cell.na::before { color:#9DB4D0; }
.mx-cell.soon { background:#DDE4EE; color:#516074; }   /* en periodo pero aún no vencido: gris, clicable */
.mx-cell.off  { background:#F1F4F8; color:#94A3B8; border:1px dashed var(--border-md); cursor:default; }  /* fuera de contrato: borde punteado + "–" visible */

/* Control segmentado — tamaño de texto (accesibilidad, Configuración → Mi cuenta) */
.seg-text { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:4px; gap:3px; }
.seg-text button { border:none; background:transparent; font-family:inherit; font-size:.82rem; font-weight:600; color:var(--text-muted); padding:7px 16px; border-radius:7px; cursor:pointer; }
.seg-text button:hover { color:var(--text); }
.seg-text button.on { background:var(--surface); color:var(--tg-800); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.mx-cell.na:hover, .mx-cell.off:hover { transform:none; filter:none; }
.mx-cell.soon:hover { filter:brightness(.98); }
.mx-lbl { font-weight:700; font-size:.63rem; letter-spacing:.01em; text-align:center; }
/* Fecha en la casilla verde (Opción C): franja blanca inferior, número NEGRO y sin negrita */
.mx-cell.done .mx-dt { width:100%; box-sizing:border-box; background:#fff; color:#111; font-weight:500; font-size:.7rem; padding:2px 0; border-top:1px solid #111; font-variant-numeric:tabular-nums; text-align:center; }

/* Popover de estado con calendario (se monta en body) */
.mx-pop { position:fixed; z-index:3000; background:var(--surface); border:1px solid var(--border-md); border-radius:9px; box-shadow:var(--shadow-lg); padding:6px; min-width:192px; }
.mx-opt { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none; padding:7px 9px; border-radius:6px; font-size:.82rem; font-family:inherit; color:var(--text); cursor:pointer; }
.mx-opt:hover { background:var(--surface-2); }
.mx-opt.actual { font-weight:700; background:var(--surface-2); }
.mx-sw { width:15px; height:15px; border-radius:4px; flex-shrink:0; }
.mx-cal { border-top:1px solid var(--border); margin-top:5px; padding-top:8px; }
.mx-cal label { display:block; font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:4px; }
.mx-cal input[type=date] { width:100%; box-sizing:border-box; height:32px; border:1px solid var(--border-md); border-radius:6px; padding:0 8px; font-family:inherit; font-size:.82rem; background:var(--surface); color:var(--text); }
.mx-cal-btns { display:flex; gap:6px; margin-top:8px; }

/* Leyenda con muestras de color */
.mx-leg { display:flex; gap:15px; flex-wrap:wrap; font-size:.74rem; color:var(--text-muted); margin-top:12px; align-items:center; }
.mx-leg span { display:inline-flex; align-items:center; gap:6px; }
.mx-leg small { font-size:.66rem; opacity:.8; }
.mx-chip { width:15px; height:15px; border-radius:4px; display:inline-block; flex-shrink:0; }
.mx-chip.done { background:var(--mx-done); } .mx-chip.todo { background:var(--mx-todo); }
.mx-chip.prog { background:var(--mx-prog); } .mx-chip.qb { background:var(--mx-qb); }
.mx-chip.ntl { background:var(--mx-ntl); }
.mx-chip.na { background:var(--mx-na); box-shadow:inset 0 0 0 1px var(--border); }

/* Columnas ajustables tipo Excel (.grid-tabla) — cursor durante el arrastre */
body.cr-dragging, body.cr-dragging * { cursor: col-resize !important; user-select: none !important; }

/* Editor de permisos del rol (Configuración › Roles) — estilo v2 (mockup aprobado) */
/* Plantilla base como segmento */
.perm-plseg { display: flex; background: #eef1f6; border-radius: 9px; padding: 3px; height: 40px; box-sizing: border-box; }
[data-theme="dark"] .perm-plseg { background: var(--surface-2); }
.perm-plseg button { flex: 1; border: none; background: none; font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--text-muted); border-radius: 7px; cursor: pointer; transition: all .14s; }
.perm-plseg button.on { background: var(--surface); color: var(--tg-800); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
/* Secciones */
.perm-sec-h { display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.perm-sec-h .perm-shield { display: inline-flex; opacity: .6; }
.perm-sec-sub { font-size: .76rem; color: var(--text-muted); margin: 0 0 10px; }
/* Fila de módulo */
.perm-mod { display: flex; align-items: center; gap: 13px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.perm-mod:last-child { border-bottom: none; }
.perm-ic { width: 19px; height: 19px; color: #64748b; flex-shrink: 0; display: inline-flex; }
.perm-ic svg { width: 19px; height: 19px; }
.perm-n { flex: 1; font-size: .9rem; color: var(--text); font-weight: 500; }
/* Segmento Sin acceso / Solo ver / Editar (estilo iOS) */
.perm-seg { display: inline-flex; background: #eef1f6; border-radius: 9px; padding: 3px; gap: 2px; flex-shrink: 0; }
[data-theme="dark"] .perm-seg, [data-theme="dark"] .perm-mini { background: var(--surface-2); }
.perm-seg-b { border: none; background: none; font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--text-muted); padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all .14s; white-space: nowrap; }
.perm-seg-b:hover { color: var(--text); }
.perm-seg-b.on { background: var(--surface); box-shadow: 0 1px 3px rgba(15,23,42,.16); }
.perm-seg-b.on.v-no  { color: var(--text-muted); }
.perm-seg-b.on.v-lec { color: #2c6ecb; }
.perm-seg-b.on.v-ed  { color: #268264; }
/* Capacidades sensibles — switches */
.perm-cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
.perm-cap:last-child { border-bottom: none; }
.perm-cap-n { display: block; font-size: .88rem; color: var(--text); font-weight: 500; }
.perm-cap-d { display: block; font-size: .73rem; color: var(--text-muted); margin-top: 1px; }
.perm-sw { position: relative; width: 40px; height: 23px; border-radius: 20px; background: #cbd5e1; flex-shrink: 0; transition: background .16s; }
.perm-sw::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s; }
.perm-sw.on { background: var(--tg-700); }
.perm-sw.on::after { transform: translateX(17px); }
.perm-mini { display: inline-flex; background: #eef1f6; border-radius: 8px; padding: 3px; flex-shrink: 0; }
.perm-mini-b { border: none; background: none; font-family: inherit; font-size: .74rem; font-weight: 600; color: var(--text-muted); padding: 4px 11px; border-radius: 6px; cursor: pointer; }
.perm-mini-b.on { background: var(--surface); color: var(--tg-800); box-shadow: 0 1px 3px rgba(15,23,42,.16); }
/* Módulos en preparación (no disponibles) — fila bloqueada en Sin acceso */
.perm-mod.soon { opacity: .72; }
.perm-mod.soon .perm-ic { color: var(--text-muted); }
.perm-mod.soon .perm-n { color: var(--text-muted); font-weight: 500; }
.perm-soon-tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 20px; background: rgba(86,134,196,.14); color: var(--accent); white-space: nowrap; }
.perm-soon-chip { flex-shrink: 0; font-size: .76rem; font-weight: 600; color: var(--text-muted); background: #eef1f6; padding: 5px 12px; border-radius: 8px; }
[data-theme="dark"] .perm-soon-chip { background: var(--surface-2); }
/* Capacidades sensibles agrupadas por área */
.perm-capgrupo { margin-top: 14px; }
.perm-capgrupo:first-of-type { margin-top: 4px; }
.perm-capgrupo-t { font-size: .78rem; font-weight: 700; color: var(--text); margin: 0 0 2px; }
/* Editor de EXCEPCIONES por usuario: piso del rol bloqueado + marcado de excepción */
.perm-seg-b:disabled { opacity: .34; cursor: not-allowed; }
.perm-mini-b:disabled { opacity: .34; cursor: not-allowed; }
.perm-mod.exc, .perm-cap.exc { background: rgba(86,134,196,.08); border-radius: 8px; }
.perm-exc-tag { display: inline-block; margin-left: 8px; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 20px; background: rgba(86,134,196,.18); color: var(--accent); vertical-align: middle; }
.perm-fromrole { display: inline-block; margin-left: 6px; font-size: .62rem; font-weight: 600; color: var(--text-muted); }
.perm-sw.locked { opacity: .5; cursor: not-allowed; }
.cfg-exc-chip { display: inline-block; margin-left: 6px; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: rgba(86,134,196,.16); color: var(--accent); }
/* F2.2 — Clientes en solo-lectura: ocultar botones de escritura (crear/editar cliente y servicios) */
body.ro-clientes .cli-w { display: none !important; }
/* F2.5 — Facturación sin permiso de marcar facturado: ocultar botones de marcar/revertir/cobrar */
body.ro-facturacion .fact-ico.do, body.ro-facturacion .fact-ico.undo, body.ro-facturacion .fact-w { display: none !important; }
/* F2.5 — Matrices en solo-lectura: las celdas no se ven interactivas (el clic ya no abre menú ni escribe) */
body.ro-salestax .pay-mc, body.ro-payroll .pay-mc, body.ro-bookkeeping .bk-cel { cursor: default !important; }

/* Candado de edición concurrente — otro usuario está editando este cliente.
   Color SOLO para el estado (ámbar); el resto neutro. */
#seccionHoja.hoja-locked .cli-w { opacity: .45; pointer-events: none; }
.hoja-lockmsg { font-size: .78rem; color: #b07d1a; display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; white-space: nowrap; }
.hoja-lockmsg .lk { font-size: .85rem; }
.hoja-lock-force { color: var(--muted); cursor: pointer; border-bottom: 1px dotted currentColor; margin-left: 4px; }
.hoja-lock-force:hover { color: var(--tg-800, #23395B); }

/* Cuentas bancarias dentro del formulario de servicio (Bookkeeping) */
.sv-badge-bk { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; background: rgba(86,134,196,.14); color: var(--accent); }
.sv-cta-head, .sv-cta-fila { display: grid; grid-template-columns: 1.6fr .7fr .9fr 104px 28px; gap: 8px; align-items: center; }
.sv-cta-head { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; padding: 0 2px; }
.sv-cta-fila { margin-bottom: 8px; }
.sv-cta-fila input, .sv-cta-fila select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--border-md); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: .82rem; font-family: inherit; }
.sv-cta-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; }
.sv-cta-del:hover { color: var(--danger); }
/* Cuenta cerrada desde un mes: conserva historial, fila atenuada + acción por fila */
.sv-cta-fila.cerrada input, .sv-cta-fila.cerrada select { background: var(--bg); color: var(--text-muted); cursor: default; }
.sv-cta-cerrar { background: none; border: 1px solid var(--border-md); color: var(--text-muted); border-radius: var(--radius); padding: 5px 8px; font-size: .72rem; font-family: inherit; cursor: pointer; white-space: nowrap; }
.sv-cta-cerrar:hover { color: var(--danger); border-color: var(--danger); }
.sv-cta-cerrtag { font-size: .66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-hint { font-size: .8rem; color: var(--text-muted); margin: 0 0 14px; }
.sv-add-cta { margin-top: 8px; background: none; border: 1px dashed var(--border-md); color: var(--text-muted); border-radius: var(--radius); padding: 6px 12px; font-size: .78rem; cursor: pointer; }
.sv-add-cta:hover { color: var(--text); border-color: var(--text-muted); }

/* Selector de responsables (usuarios de la empresa) en el formulario de servicio */
.sv-resp-box { display: flex; flex-wrap: wrap; gap: 7px 16px; border: 1px solid var(--border-md); border-radius: var(--radius); padding: 9px 11px; max-height: 130px; overflow-y: auto; }
.sv-resp-item { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text); cursor: pointer; }
.sv-resp-item input { width: auto; height: auto; margin: 0; }
.sv-resp-empty { font-size: .8rem; color: var(--text-muted); }

/* Responsables: lista desplegable de selección múltiple */
.sv-multi { position: relative; }
.sv-multi-btn { width: 100%; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border-md, #c7d2e0); border-radius: var(--radius); padding: 0 11px; background: var(--surface); color: var(--text); font-family: inherit; font-size: .84rem; cursor: pointer; }
.sv-multi-btn:hover { border-color: var(--accent, #5686C4); }
.sv-multi-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-multi-txt.placeholder { color: var(--text-muted); }
.sv-multi-caret { color: var(--text-muted); font-size: .7rem; flex-shrink: 0; }
.sv-multi-panel { display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px); background: var(--surface); border: 1px solid var(--border-md); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); padding: 5px; max-height: 220px; overflow-y: auto; }
.sv-multi-panel .sv-resp-item { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; }
.sv-multi-panel .sv-resp-item:hover { background: var(--surface-2); }

/* Spinner dentro de un botón (guardar servicio, etc.) */
.btn-spin { display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnspin .6s linear infinite; opacity: .9; }
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Nombre de cliente clickeable en Bookkeeping */
#seccionBookkeeping .bk-cli-link { cursor: pointer; }
#seccionBookkeeping .bk-cli-link:hover { color: var(--accent); text-decoration: underline; }
#seccionBookkeeping .bk-col-resp { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   TIEMPO — vista "Mi tiempo" (personal)
   ══════════════════════════════════════════════════════════ */
/* KPIs (tarjetas) */
#seccionTiempo .tv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
#seccionTiempo .tv-kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; overflow: hidden; }
#seccionTiempo .tv-k-acc { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tg-500); }
#seccionTiempo .tv-kpi.k-today .tv-k-acc { background: var(--tg-800); }
#seccionTiempo .tv-kpi.k-month .tv-k-acc { background: var(--tg-300); }
#seccionTiempo .tv-kpi.k-bill .tv-k-acc { background: #16A34A; }
#seccionTiempo .tv-k-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#seccionTiempo .tv-k-val { font-size: 1.6rem; font-weight: 700; line-height: 1.1; margin-top: 5px; letter-spacing: -.01em; }
#seccionTiempo .tv-kpi.k-bill .tv-k-val { color: #16A34A; }
#seccionTiempo .tv-k-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
/* Gráfica de barras */
#seccionTiempo .tv-chart-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
#seccionTiempo .tv-chart-t { font-size: .82rem; font-weight: 700; color: var(--tg-800); }
#seccionTiempo .tv-chart-tot { font-size: .76rem; color: var(--text-muted); }
#seccionTiempo .tv-chart-tot b { color: var(--text); }
#seccionTiempo .tv-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; align-items: end; height: 150px; padding-top: 8px; border-bottom: 2px solid var(--border); }
#seccionTiempo .tv-wd { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
#seccionTiempo .tv-bar { width: 60%; max-width: 40px; background: linear-gradient(180deg, var(--tg-500), var(--tg-800)); border-radius: 6px 6px 0 0; min-height: 3px; transition: filter .12s; }
#seccionTiempo .tv-wd:hover .tv-bar { filter: brightness(1.12); }
#seccionTiempo .tv-wd.today .tv-bar { background: linear-gradient(180deg, #2BB673, #16A34A); }
#seccionTiempo .tv-bar-empty { width: 60%; max-width: 40px; height: 3px; background: var(--border); border-radius: 3px; }
#seccionTiempo .tv-bar-val { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .12s; }
#seccionTiempo .tv-wd:hover .tv-bar-val { opacity: 1; }
#seccionTiempo .tv-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 8px; }
#seccionTiempo .tv-week-days > span { text-align: center; font-size: .7rem; color: var(--text-muted); font-weight: 600; }
#seccionTiempo .tv-week-days > span.today { color: #16A34A; font-weight: 800; }
/* Filtro multiselección de clientes (#3) */
.msel { position: relative; }
.msel-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; min-width: 160px; }
.msel-btn .msel-cnt { margin-left: auto; font-weight: 700; color: var(--tg-800); background: var(--tg-50, #eef3fa); border-radius: 20px; padding: 1px 8px; font-size: .72rem; }
.msel-btn svg { color: var(--text-muted); flex: 0 0 auto; }
.msel-pop { position: absolute; top: calc(100% + 4px); left: 0; width: 270px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; }
.msel-pop[hidden] { display: none; }
.msel-srch { padding: 9px 9px 6px; }
.msel-srch input { width: 100%; height: 32px; border: 1px solid var(--border-md); border-radius: 7px; padding: 0 10px; font-size: .82rem; background: var(--surface); color: var(--text); outline: none; }
.msel-srch input:focus { border-color: var(--tg-500); box-shadow: 0 0 0 3px rgba(86, 134, 196, .16); }
.msel-acts { display: flex; gap: 14px; padding: 0 11px 8px; border-bottom: 1px solid var(--border); }
.msel-acts a { font-size: .76rem; font-weight: 600; color: var(--tg-600, #5686C4); cursor: pointer; }
.msel-list { max-height: 230px; overflow: auto; padding: 6px; }
.msel-it { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: .82rem; }
.msel-it:hover { background: var(--tg-50, #eef3fa); }
.msel-it input { width: 15px; height: 15px; accent-color: var(--tg-800); cursor: pointer; flex: 0 0 auto; }
.msel-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-it .int { margin-left: auto; flex: 0 0 auto; font-size: .62rem; font-weight: 700; color: var(--mx-prog, #C0862E); background: #fdf3e2; border-radius: 20px; padding: 1px 6px; }
.msel-empty { padding: 10px; color: var(--text-muted); font-size: .78rem; }
#seccionTiempo .tv-day { display: flex; justify-content: space-between; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; padding: 10px 2px 6px; border-bottom: 1px solid var(--border); }
#seccionTiempo .tv-entry { display: grid; grid-template-columns: 148px 1fr auto auto auto; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: .82rem; }
#seccionTiempo .tv-hora { color: var(--text-muted); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#seccionTiempo .tv-que b { font-weight: 700; }
#seccionTiempo .tv-desc { color: var(--text-muted); font-size: .76rem; }
#seccionTiempo .tv-fact { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
#seccionTiempo .tv-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
#seccionTiempo .tv-fact.no .tv-dot { background: var(--sl-400); }
#seccionTiempo .tv-dur { font-weight: 700; font-variant-numeric: tabular-nums; }
#seccionTiempo .tv-go { border: 1px solid var(--border-md); background: none; color: var(--text-muted); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: .68rem; }
#seccionTiempo .tv-go:hover { color: #16A34A; border-color: #16A34A; }
#seccionTiempo .tv-acts { display: inline-flex; align-items: center; gap: 5px; }
#seccionTiempo .tv-lock { font-size: .82rem; opacity: .7; }

/* Pestañas de la sección Tiempo */
#seccionTiempo .tt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
#seccionTiempo .tt-tab { padding: 8px 14px; font-size: .86rem; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
#seccionTiempo .tt-tab.active { color: var(--text); font-weight: 700; border-bottom-color: var(--text); }

/* Reportes */
#seccionTiempo .rep-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
#seccionTiempo .rep-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
#seccionTiempo .rep-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#seccionTiempo .rep-val { font-size: 1.15rem; font-weight: 700; }
#seccionTiempo .rep-sub { font-size: .72rem; color: var(--text-muted); }
#seccionTiempo .rep-row { display: grid; grid-template-columns: 210px 1fr 90px 46px; gap: 10px; align-items: center; font-size: .82rem; padding: 5px 0; }
#seccionTiempo .rep-rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#seccionTiempo .rep-bw { height: 13px; background: var(--surface-2); border: .5px solid var(--border); border-radius: 3px; overflow: hidden; }
#seccionTiempo .rep-bw i { display: block; height: 100%; background: #16A34A; opacity: .85; }
#seccionTiempo .rep-rd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#seccionTiempo .rep-rp { text-align: right; color: var(--text-muted); font-size: .74rem; }

/* ── E3 · Cobros adicionales (Facturación) ── */
#seccionFacturacion .fact-ico.del:hover { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
#seccionFacturacion tr.cobro-hecho { opacity: .6; }

/* ── Cargos puntuales: bandeja de aprobaciones + etiqueta ── */
#factTabs .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; vertical-align: middle; }
#seccionFacturacion .cargo-tag { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 20px; background: var(--accent-lt, rgba(134,183,230,.16)); color: var(--accent-dk, #23395B); margin-right: 6px; vertical-align: middle; }
#seccionFacturacion .apr-precio { width: 110px; height: 32px; border: 1px solid var(--border-md, #c7d2e0); border-radius: 7px; padding: 0 9px; font-size: .85rem; font-family: inherit; text-align: right; }
#seccionFacturacion .apr-precio:focus { outline: none; border-color: var(--accent, #5686C4); box-shadow: 0 0 0 3px rgba(86,134,196,.15); }

/* ── E3 · Modal Crear cobro ── */
#modalCobro .cbr-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
#modalCobro .cbr-list { max-height: 260px; overflow-y: auto; margin-bottom: 6px; }
#modalCobro .cbr-ent { display: grid; grid-template-columns: 20px 78px 1fr auto; gap: 10px; align-items: center; font-size: .82rem; padding: 7px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
#modalCobro .cbr-ent input { margin: 0; }
#modalCobro .cbr-f { color: var(--text-muted); font-size: .74rem; white-space: nowrap; }
#modalCobro .cbr-q b { font-weight: 700; }
#modalCobro .cbr-desc { color: var(--text-muted); }
#modalCobro .cbr-d { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
#modalCobro .cbr-tar { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
#modalCobro .cbr-fld label { display: block; font-size: .7rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
#modalCobro .cbr-h { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#modalCobro .cbr-tot-wrap { margin-left: auto; text-align: right; }
#modalCobro .cbr-tot { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════
   GRÁFICOS SVG (charts.js) — globales, reutilizables
   ════════════════════════════════════════════════════════ */
.ch { display: block; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-ax { fill: var(--text-muted); font-size: 10px; }
.ch-vlbl { fill: var(--text); font-size: 10px; font-weight: 600; }
.ch-bar { fill: var(--sl-400); }
.ch-bar.acc { fill: var(--accent); }
.ch-bar.otros { fill: var(--sl-300); }
.ch-cumline { fill: none; stroke: var(--accent); stroke-width: 2; }
.ch-cumdot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.ch-cumlbl { fill: var(--accent); font-size: 10px; }
.ch-ref80 { stroke: #D97706; stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.ch-donut-track { fill: none; stroke: var(--surface-2); stroke-width: 20; }
.ch-donut-ok { fill: none; stroke: var(--success); stroke-width: 20; stroke-linecap: butt; }
.ch-donut-big { fill: var(--text); font-size: 22px; font-weight: 700; }
.ch-sw-ok { fill: var(--success); }
.ch-sw-no { fill: var(--sl-400); }
.ch-hlbl { fill: var(--text); font-size: 11px; }
.ch-hval { fill: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.ch-hbar { fill: var(--sl-400); }
.ch-hbar.acc { fill: var(--accent); }
.ch-hbar-row:hover .ch-hbar { fill: var(--accent); }

/* ════════════════════════════════════════════════════════
   REPORTES · Dashboard (rd-*)  — dentro de #seccionTiempo
   ════════════════════════════════════════════════════════ */
#seccionTiempo .rd-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
#seccionTiempo .rd-seg { display: inline-flex; border: 1px solid var(--border-md); border-radius: 7px; overflow: hidden; }
#seccionTiempo .rd-seg button { border: 0; background: var(--surface); color: var(--text-muted); padding: 7px 15px; font-size: .83rem; font-weight: 600; cursor: pointer; border-right: 1px solid var(--border-md); display: inline-flex; align-items: center; gap: 6px; }
#seccionTiempo .rd-seg button:last-child { border-right: 0; }
#seccionTiempo .rd-seg button.on { background: var(--sl-900); color: #fff; }
#seccionTiempo .rd-seg button:disabled { cursor: default; color: var(--sl-400); }
#seccionTiempo .rd-lk { font-size: .62rem; font-weight: 700; color: #D97706; background: rgba(217,119,6,.12); border-radius: 20px; padding: 0 6px; }
#seccionTiempo .rd-crumb { font-size: .8rem; color: var(--text-muted); margin: 0 2px 12px; display: flex; align-items: center; gap: 8px; min-height: 16px; }
#seccionTiempo .rd-crumb b { color: var(--text); }
#seccionTiempo .rd-crumb .rd-back { cursor: pointer; border: 1px solid var(--border-md); border-radius: 5px; padding: 1px 7px; font-size: .72rem; }
#seccionTiempo .rd-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
#seccionTiempo .rd-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; box-shadow: 0 1px 3px rgba(15,25,40,.05); }
#seccionTiempo .rd-kpi .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seccionTiempo .rd-kpi .v { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
#seccionTiempo .rd-kpi .v.ok { color: var(--success); }
#seccionTiempo .rd-kpi .s { font-size: .7rem; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seccionTiempo .rd-grid2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin-bottom: 12px; }
#seccionTiempo .rd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 1px 3px rgba(15,25,40,.05); padding: 12px 14px; margin-bottom: 12px; }
#seccionTiempo .rd-card h4 { font-size: .86rem; margin: 0 0 2px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#seccionTiempo .rd-card h4 .sub { font-size: .7rem; color: var(--text-muted); font-weight: 400; }
#seccionTiempo .rd-cap { font-size: .72rem; color: var(--text-muted); margin: 0 0 8px; }
#seccionTiempo .rd-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--text-muted); margin-top: 6px; }
#seccionTiempo .rd-legend span { display: inline-flex; align-items: center; gap: 5px; }
#seccionTiempo .rd-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#seccionTiempo .rd-empty { border: 1px dashed var(--border-md); border-radius: 11px; padding: 30px 18px; text-align: center; color: var(--text-muted); font-size: .85rem; }
#seccionTiempo .rd-empty b { color: var(--text); }
#seccionTiempo .rd-b2 { display: inline-block; font-size: .62rem; font-weight: 700; color: #D97706; background: rgba(217,119,6,.12); border-radius: 20px; padding: 1px 8px; }
#seccionTiempo .rd-faded { opacity: .4; pointer-events: none; }
@media (max-width: 900px){ #seccionTiempo .rd-kpis { grid-template-columns: repeat(3,1fr); } #seccionTiempo .rd-grid2 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════
   CONFIGURACIÓN · Fase 1 (cfg-*)
   ════════════════════════════════════════════════════════ */
#seccionConfig .cfg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
#seccionConfig .cfg-tab { padding: 8px 14px; font-size: .86rem; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
#seccionConfig .cfg-tab.active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.cfg-nota { font-size: .74rem; color: var(--text-muted); border-left: 3px solid var(--border-md); padding: 4px 11px; }
#seccionConfig .cfg-nota { margin: 10px 14px 12px; }
#seccionConfig .cfg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 13px; }
#seccionConfig .cfg-pad { padding: 13px 15px; }
#seccionConfig .cfg-pad h4 { font-size: .86rem; margin: 0 0 4px; }
#seccionConfig .cfg-sub { font-size: .76rem; color: var(--text-muted); margin: 0 0 10px; }
#seccionConfig .cfg-tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 14px; }
#seccionConfig .cfg-tpl-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; background: var(--surface); }
#seccionConfig .cfg-tpl-card h5 { margin: 0 0 5px; font-size: .8rem; }
#seccionConfig .cfg-tpl-card ul { margin: 0; padding-left: 15px; font-size: .7rem; color: var(--text-muted); }
#seccionConfig .cfg-tpl-card li { margin-bottom: 2px; }
#seccionConfig .cfg-perfil td { padding: 6px 10px 6px 0; border: 0; font-size: .84rem; }
#seccionConfig .cfg-perfil td:first-child { color: var(--text-muted); font-size: .76rem; width: 110px; }
#seccionConfig table .num { text-align: right; white-space: nowrap; }
.cfg-tpl { font-size: .62rem; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-md); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.cfg-owner { font-size: .58rem; font-weight: 800; letter-spacing: .06em; color: var(--accent-dk); border: 1px solid var(--tg-200); background: var(--tg-50); border-radius: 4px; padding: 1px 6px; margin-left: 7px; text-transform: uppercase; }
.cfg-you { font-size: .68rem; color: var(--text-muted); margin-left: 6px; }
.cfg-mut { color: var(--text-muted); font-size: .8rem; }
.cfg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cfg-dot.ok { background: var(--success); } .cfg-dot.off { background: var(--sl-400); } .cfg-dot.warn { background: #D97706; }
/* Toggle compacto (permiso aprobar cargos) */
.cfg-switch { position: relative; display: inline-block; width: 38px; height: 20px; vertical-align: middle; }
.cfg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-switch .cfg-slider { position: absolute; inset: 0; background: var(--sl-400, #94a3b8); border-radius: 20px; cursor: pointer; transition: background .15s; }
.cfg-switch .cfg-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.cfg-switch input:checked + .cfg-slider { background: var(--accent, #23CE6B); }
.cfg-switch input:checked + .cfg-slider::before { transform: translateX(18px); }
.cfg-switch input:disabled + .cfg-slider { opacity: .5; cursor: not-allowed; }
.cfg-off { color: var(--danger) !important; }
.cfg-on { color: var(--success) !important; }
.cfg-linkbox { display: flex; gap: 8px; }
.cfg-linkbox input { flex: 1; height: 30px; padding: 0 10px; border: 1px dashed var(--border-md); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: .74rem; font-family: inherit; }
.cfg-nota.ok { border-left-color: var(--success) !important; }
.cfg-nota.warn { border-left-color: var(--warning, #b8860b) !important; }
.cfg-ro { display:inline-block; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg-muted,#eef1f4); border:1px solid var(--border-md); border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
/* Preferencias · Localización (Fase 3a.1) */
#seccionConfig .cfg-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
#seccionConfig .pref-base { padding-bottom:14px; border-bottom:1px dashed var(--border-md); }
.pref-adj { display:none; font-size:.56rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--warning,#b8860b); border:1px solid #F0D9B0; background:#FFFBF2; border-radius:4px; padding:0 5px; margin-left:6px; vertical-align:middle; }
#seccionConfig .pref-prev { margin-top:16px; border:1px solid var(--border-md); border-radius:9px; overflow:hidden; }
#seccionConfig .pref-prev-h { font-size:.63rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; padding:8px 13px; border-bottom:1px solid var(--border-md); background:var(--surface-2,#f5f8fc); }
#seccionConfig .pref-prev-g { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-md); }
#seccionConfig .pref-pv { background:var(--surface,#fff); padding:11px 13px; }
#seccionConfig .pref-pv .l { font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:3px; }
#seccionConfig .pref-pv .v { font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; }
#seccionConfig .cfg-months { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; max-width:560px; }
#seccionConfig .cfg-mo { border:1px solid var(--border-md); border-radius:6px; padding:8px 0; text-align:center; font-size:.8rem; cursor:pointer; background:var(--surface); color:var(--text-muted); user-select:none; transition:border-color .08s; }
#seccionConfig .cfg-mo:hover { border-color:var(--nx-500,#5686C4); }
#seccionConfig .cfg-mo.on { background:var(--nx-800,#23395B); border-color:var(--nx-800,#23395B); color:#fff; font-weight:700; }
@media (max-width:900px){ #seccionConfig .cfg-grid3 { grid-template-columns:1fr; } #seccionConfig .pref-prev-g { grid-template-columns:repeat(2,1fr); } #seccionConfig .cfg-months { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 900px){ #seccionConfig .cfg-tpl-grid { grid-template-columns: repeat(2,1fr); } #seccionConfig .cfg-grid2 { grid-template-columns: 1fr; } }

/* ── Mi cuenta · sub-pestañas (segmentado, 2º nivel) ── */
#cfgCuenta .mc-subtabs { display:inline-flex; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:4px; margin:2px 0 18px; flex-wrap:wrap; }
#cfgCuenta .mc-subtab { border:none; background:transparent; font-family:inherit; font-size:.83rem; font-weight:600; color:var(--text-muted); padding:8px 18px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
#cfgCuenta .mc-subtab:hover { color:var(--text); }
#cfgCuenta .mc-subtab.on { background:var(--surface); color:var(--tg-800); box-shadow:0 1px 3px rgba(0,0,0,.08); }
#cfgCuenta .mc-subtab svg { width:15px; height:15px; }
#cfgCuenta .mc-pane { display:none; }
#cfgCuenta .mc-pane.on { display:block; }
#cfgCuenta .mc-pane .card + .card { margin-top:14px; }

/* ── Detalle de miembro (Eliminar de la firma + trazabilidad) ── */
.cfg-name-link { background:none; border:none; font:inherit; color:var(--accent-dk,var(--tg-800)); font-weight:700; cursor:pointer; padding:0; }
.cfg-name-link:hover { text-decoration:underline; }
#modalMiembro .mm-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
#modalMiembro .mm-head .n { font-size:1.05rem; font-weight:800; }
#modalMiembro .mm-sect { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; margin:0 0 6px; }
#modalMiembro .mc-trace { list-style:none; margin:0 0 18px; padding:0; }
#modalMiembro .mc-trace li { display:flex; justify-content:space-between; gap:16px; padding:10px 2px; border-bottom:1px solid var(--border); font-size:.85rem; }
#modalMiembro .mc-trace li:last-child { border-bottom:0; }
#modalMiembro .mc-trace .l { color:var(--text-muted); }
#modalMiembro .mc-trace .v { font-weight:600; color:var(--text); text-align:right; }
#modalMiembro .mc-trace .v small { display:block; font-weight:400; color:var(--text-muted); font-size:.75rem; }
#modalMiembro .mc-adminzone { display:grid; gap:12px; }
#modalMiembro .mc-actrow { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:13px 15px; border:1px solid var(--border); border-radius:10px; }
#modalMiembro .mc-actrow.danger { border-color:var(--danger,#dc2626); background:rgba(220,38,38,.035); }
#modalMiembro .mc-actrow .ttl { font-size:.86rem; font-weight:700; margin:0 0 3px; }
#modalMiembro .mc-actrow.danger .ttl { color:var(--danger,#dc2626); }
#modalMiembro .mc-actrow .desc { font-size:.76rem; color:var(--text-muted); margin:0; max-width:440px; line-height:1.45; }
.btn-nx-danger { background:var(--danger,#dc2626); border:1px solid var(--danger,#dc2626); color:#fff; font-family:inherit; font-weight:600; font-size:.8rem; padding:7px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.btn-nx-danger:hover { filter:brightness(.94); }

/* ── Fase 3 · breadcrumb clickeable + tabla de detalle ── */
#seccionTiempo .rd-crumb { flex-wrap: wrap; }
#seccionTiempo .rd-cseg { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: .82rem; }
#seccionTiempo .rd-cseg:hover { background: var(--surface-2); color: var(--text); }
#seccionTiempo .rd-cseg.cur { color: var(--text); font-weight: 700; background: var(--surface-2); cursor: default; }
#seccionTiempo .rd-cdot { width: 8px; height: 8px; border-radius: 2px; }
#seccionTiempo .rd-csep { color: var(--sl-300); }
#seccionTiempo .rd-dtwrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 440px; }
#seccionTiempo .rd-dt { width: 100%; border-collapse: collapse; font-size: .82rem; }
#seccionTiempo .rd-dt th { position: sticky; top: 0; background: var(--surface); font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
#seccionTiempo .rd-dt td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
#seccionTiempo .rd-dt tbody tr:nth-child(even) { background: var(--surface-2); }
#seccionTiempo .rd-dt .num { text-align: right; font-variant-numeric: tabular-nums; }
#seccionTiempo .rd-dt .rd-mut { color: var(--text-muted); }
#seccionTiempo .rd-dt .rd-grp { background: var(--surface-2); font-weight: 700; }
#seccionTiempo .rd-dt .rd-grp td { border-top: 1px solid var(--border-md); }
#seccionTiempo .rd-dt .rd-tot td { border-top: 2px solid var(--border-md); font-weight: 700; background: var(--surface); }
#seccionTiempo .rd-fdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
#seccionTiempo .rd-fdot.si { background: var(--success); }
#seccionTiempo .rd-fdot.no { background: var(--sl-400); }

/* ════════════════════════════════════════════════════════
   MODAL Gestionar equipos (eqm-*) — globales
   ════════════════════════════════════════════════════════ */
#modalEquipos .eqm-subt { font-size: .8rem; color: var(--text-muted); margin: 0 0 12px; }
#modalEquipos .eqm-count { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text-muted); margin-bottom: 8px; }
#modalEquipos .eqm-pill-warn { font-size: .7rem; font-weight: 700; color: #D97706; background: rgba(217,119,6,.12); border-radius: 20px; padding: 2px 10px; cursor: pointer; }
#modalEquipos .eqm-pill-ok { font-size: .7rem; font-weight: 700; color: var(--success); background: rgba(22,163,74,.12); border-radius: 20px; padding: 2px 10px; }
#modalEquipos .eqm-add { display: flex; gap: 8px; margin-bottom: 10px; }
#modalEquipos .eqm-teamlist { border: 1px solid var(--border); border-radius: var(--radius); max-height: 158px; overflow-y: auto; }
#modalEquipos .eqm-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: .82rem; }
#modalEquipos .eqm-trow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: .84rem; }
#modalEquipos .eqm-trow:last-child { border-bottom: 0; }
#modalEquipos .eqm-tdot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
#modalEquipos .eqm-tname { font-weight: 600; flex: 1; cursor: text; }
#modalEquipos .eqm-tmeta { color: var(--text-muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modalEquipos .eqm-tdel { opacity: 0; color: var(--text-muted); background: none; border: 0; cursor: pointer; padding: 2px; display: inline-flex; }
#modalEquipos .eqm-trow:hover .eqm-tdel { opacity: 1; }
#modalEquipos .eqm-tdel:hover { color: var(--danger); }
#modalEquipos .eqm-div { height: 1px; background: var(--border); margin: 16px 0; }
#modalEquipos .eqm-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
#modalEquipos .eqm-bulk { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; }
#modalEquipos .eqm-tablewrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 320px; }
#modalEquipos .eqm-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
#modalEquipos .eqm-table th { position: sticky; top: 0; background: var(--surface); font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
#modalEquipos .eqm-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
#modalEquipos .eqm-table tbody tr:nth-child(even) { background: var(--surface-2); }
#modalEquipos .eqm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#modalEquipos .eqm-sub { font-size: .62rem; color: var(--text-muted); border: 1px solid var(--border-md); border-radius: 4px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
#modalEquipos .eqm-foot { display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--text-muted); margin-top: 8px; }
#modalEquipos .eqm-dotw { width: 8px; height: 8px; border-radius: 50%; background: #D97706; display: inline-block; }
#modalEquipos .eqm-dotg { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }
.eqm-link { border: 1px solid var(--border-md); border-radius: 5px; padding: 1px 8px; font-size: .72rem; cursor: pointer; background: var(--surface); color: var(--text); margin-left: 6px; }

/* ══════════════════════════════════════════════════════════
   PAYROLL v2 — tablero de cumplimiento + pagos e impuestos
   (patrón medidor+iconos de Bookkeeping; color solo estados)
   ══════════════════════════════════════════════════════════ */
:is(#seccionPayroll, #seccionSalesTax) .pay-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex: 1; min-width: 300px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-tab { padding: 8px 14px; font-size: .85rem; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-tab.active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }

/* Tablero: fila por cliente */
:is(#seccionPayroll, #seccionSalesTax) .pay-drow { display: grid; grid-template-columns: 1fr 170px 210px 120px; gap: 12px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--border); cursor: pointer; }
:is(#seccionPayroll, #seccionSalesTax) .pay-drow:last-child { border-bottom: none; }
:is(#seccionPayroll, #seccionSalesTax) .pay-drow:hover { background: var(--surface-2); }
:is(#seccionPayroll, #seccionSalesTax) .pay-drow.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
:is(#seccionPayroll, #seccionSalesTax) .pay-cli { font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 7px; min-width: 0; }
:is(#seccionPayroll, #seccionSalesTax) .pay-cli .caret { color: var(--text-muted); font-size: .75em; }
:is(#seccionPayroll, #seccionSalesTax) .pay-cli-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#seccionPayroll, #seccionSalesTax) .pay-cli-nom:hover { text-decoration: underline; }
:is(#seccionPayroll, #seccionSalesTax) .pay-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.pay-chip { font-size: .6rem; font-weight: 700; letter-spacing: .03em; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; border: 1px solid var(--border-md); background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.pay-chip.g { border-color: #BBE6C9; background: #F0FAF3; color: #15803D; }
:is(#seccionPayroll, #seccionSalesTax) .pay-meter { display: flex; align-items: center; gap: 8px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-meter .bk-med-track { display: block; flex: 1; height: 9px; border-radius: 5px; background: var(--surface-2); border: .5px solid var(--border-md); overflow: hidden; }
:is(#seccionPayroll, #seccionSalesTax) .pay-meter .bk-med-fill { display: block; height: 100%; background: #16A34A; border-radius: 4px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-pct { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.pay-estado { font-size: .72rem; font-weight: 700; text-align: right; white-space: nowrap; }
.pay-estado.ok { color: #16A34A; }
.pay-estado.pend { color: #D97706; }

/* Rediseño v3 · lista → detalle con pestañas */
:is(#seccionPayroll, #seccionSalesTax) .pay-h { font-size: 1.2rem; font-weight: 800; margin: 0; }
:is(#seccionPayroll, #seccionSalesTax) .pay-count { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin-left: 6px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-pnav { display: flex; gap: 6px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dethead { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
:is(#seccionPayroll, #seccionSalesTax) .pay-dethead h3 { margin: 0; font-size: 1rem; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dethead .pay-estado { margin-left: auto; }
:is(#seccionPayroll, #seccionSalesTax) .pay-detficha { font-size: .78rem; cursor: pointer; white-space: nowrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-subtabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); }
:is(#seccionPayroll, #seccionSalesTax) .pay-subtab { padding: 8px 16px; font-size: .82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: none; }
:is(#seccionPayroll, #seccionSalesTax) .pay-subtab:hover { color: var(--text); }
:is(#seccionPayroll, #seccionSalesTax) .pay-subtab.active { color: var(--accent-dk); background: var(--surface-2); border-color: var(--border); }
:is(#seccionPayroll, #seccionSalesTax) .pay-subbody { padding: 16px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-subbody .pay-ritems { padding: 2px 0 11px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-subbody .pay-avh { margin-top: 6px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-subbody .pay-avbtns { justify-content: flex-start; flex-wrap: wrap; align-items: center; margin-top: 14px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-subbody table.pay-av { max-width: 580px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-pagos-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-draftlb { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); font-weight: 600; }
:is(#seccionPayroll, #seccionSalesTax) .pay-draftlb input { height: 30px; border: 1px solid var(--border-md); border-radius: 6px; padding: 0 8px; font-family: inherit; font-size: .8rem; background: var(--surface); color: var(--text); }
:is(#seccionPayroll, #seccionSalesTax) .pay-copmsg { font-size: .74rem; color: #16A34A; font-weight: 600; align-self: center; }
:is(#seccionPayroll, #seccionSalesTax) .pay-imgprev { margin-top: 14px; padding: 12px; border: 1px dashed var(--border-md); border-radius: 8px; max-width: 580px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-imgprev p { margin: 0 0 8px; font-size: .72rem; color: var(--text-muted); }
:is(#seccionPayroll, #seccionSalesTax) .pay-imgprev img { border: 1px solid var(--border); border-radius: 4px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-badge { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: #F0FAF3; color: #15803D; margin-left: 4px; }
:is(#seccionPayroll, #seccionSalesTax) .bk-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); margin-top: 12px; align-items: center; }

/* Matriz del cliente — celdas de color separadas (tipo Excel) */
:is(#seccionPayroll, #seccionSalesTax) .pay-mtx { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
:is(#seccionPayroll, #seccionSalesTax) .pay-mtx thead th { background: var(--tg-800); color: #fff; font-weight: 700; font-size: .68rem; padding: 6px 4px; border-radius: 6px; text-align: center; }
:is(#seccionPayroll, #seccionSalesTax) .pay-mtx th.pay-oblh { text-align: left; padding: 7px 10px; min-width: 210px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-mtx th.mes-actual { background: var(--accent-dk); }
:is(#seccionPayroll, #seccionSalesTax) .pay-mtx td.pay-mc { padding: 0; }
:is(#seccionPayroll, #seccionSalesTax) .pay-band td { background: var(--dark-mid); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 5px 10px; border-radius: 5px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-obl { text-align: left; padding: 7px 10px; font-weight: 600; white-space: nowrap; font-size: .76rem; }
:is(#seccionPayroll, #seccionSalesTax) .pay-obl small { font-weight: 400; color: var(--text-muted); margin-left: 6px; font-size: .68rem; }
:is(#seccionPayroll, #seccionSalesTax) .cel-na { color: #516074; font-weight: 700; opacity: .85; }

/* Estados (iconos) */
.pay-st { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 17px; min-width: 17px; font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 4px; }
.pay-st svg { display: block; }
.pay-done { color: #16A34A; }
.pay-qb { color: #fff; background: #2563EB; padding: 1px 5px; font-size: .6rem; letter-spacing: .02em; }
.pay-ntl { color: #fff; background: var(--mx-ntl); padding: 1px 5px; font-size: .6rem; letter-spacing: .02em; }
.pay-prog { color: #D97706; border: 1px solid #F0D9B0; background: #FFFBF2; padding: 1px 5px; }
.pay-todo { color: var(--text-muted); opacity: .75; }

/* Panel de depósitos (semiweekly) */
:is(#seccionPayroll, #seccionSalesTax) .pay-deppanel { margin-top: 14px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-deplist { max-width: 560px; padding: 4px 14px 0; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep { display: grid; grid-template-columns: 150px 1fr 120px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: .82rem; cursor: pointer; border-radius: 5px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep:hover { background: var(--green-lt); }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep.pd-head { background: none; cursor: default; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--border-md); }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep .pd-f { font-weight: 600; white-space: nowrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep .pd-m { font-variant-numeric: tabular-nums; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep-add { display: flex; gap: 8px; align-items: center; padding: 12px 14px 14px; flex-wrap: wrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep-add input { height: 32px; border: 1px solid var(--border-md); border-radius: var(--radius); padding: 0 9px; font-family: inherit; font-size: .8rem; background: var(--surface); color: var(--text); }
:is(#seccionPayroll, #seccionSalesTax) .pay-dep-add input[type="number"] { width: 150px; }

/* ── Depósitos Semiweekly · rediseño v3.1 (tarjeta + tabla + estado desplegable) ── */
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 14px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(0deg, var(--surface), var(--tg-50)); }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--tg-800); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-head h3 { margin: 0; font-size: .95rem; font-weight: 700; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-sub { font-size: .74rem; color: var(--text-muted); }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-total { font-size: .74rem; color: var(--text-muted); }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-total b { color: var(--text); font-variant-numeric: tabular-nums; }
:is(#seccionPayroll, #seccionSalesTax) table.pay-sw-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl thead th { background: var(--tg-800); color: #fff; font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 8px 14px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl thead th.num { text-align: right; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl tbody td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl tbody tr:last-child td { border-bottom: none; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl tbody tr:hover { background: var(--surface-2); }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-fecha { font-weight: 600; white-space: nowrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-periodo { color: var(--tg-700); font-weight: 600; white-space: nowrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: .85rem; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-foot { padding: 11px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-actcell { width: 70px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-acts { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
:is(#seccionPayroll, #seccionSalesTax) .pay-sw-tbl tbody tr:hover .pay-acts { opacity: 1; }
:is(#seccionPayroll, #seccionSalesTax) .pay-icobtn { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
:is(#seccionPayroll, #seccionSalesTax) .pay-icobtn:hover { background: var(--surface-2); color: var(--text); }
:is(#seccionPayroll, #seccionSalesTax) .pay-icobtn.danger:hover { color: var(--danger); border-color: #F3C6C6; }

/* Chip de estado RECTANGULAR (abre el desplegable) */
.pay-estpill { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; font-family: inherit; font-size: .74rem; font-weight: 700; color: #fff; padding: 4px 11px; border-radius: 5px; position: relative; line-height: 1.2; }
.pay-estpill .car { opacity: .85; font-size: .58rem; }
.pay-estpill.done { background: var(--mx-done); }
.pay-estpill.qb   { background: var(--mx-qb); }
.pay-estpill.prog { background: var(--mx-prog); }
.pay-estpill.todo { background: var(--mx-todo); }
.pay-estpill.has-cmt::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--tg-800); border: 1.5px solid var(--surface); }

/* Popover de estado del depósito + sección de comentarios (reusa .mx-pop / .bk-cmt-*) */
.mx-pop.pay-pop { padding: 0; width: 280px; }
.mx-pop-sec { padding: 0; }                       /* menú matriz: el padding lo pone .mx-pop */
.mx-pop.pay-pop .mx-pop-sec { padding: 6px; }     /* pay-pop: .mx-pop tiene padding 0, aquí sí */
.mx-pop.pay-pop .bk-cmt-wrap { margin: 0; }
/* En el menú de matriz (con padding) la sección de comentarios va de borde a borde */
#payMenuEstado .bk-cmt-wrap { margin: 6px -6px -6px; }

/* Indicador de comentario en la celda de la matriz (triángulo esquina superior) */
:is(#seccionPayroll, #seccionSalesTax) .mx-cell.has-cmt { position: relative; }
:is(#seccionPayroll, #seccionSalesTax) .mx-cell.has-cmt::after { content: ''; position: absolute; top: 2px; right: 2px; border-width: 0 6px 6px 0; border-style: solid; border-color: transparent rgba(255,255,255,.92) transparent transparent; }

/* Modal de depósito */

/* Pagos e impuestos */
:is(#seccionPayroll, #seccionSalesTax) .pay-run2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; }
:is(#seccionPayroll, #seccionSalesTax) .pay-draftlbl { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--text-muted); font-weight: 600; }
:is(#seccionPayroll, #seccionSalesTax) .pay-draftlbl input { height: 30px; border: 1px solid var(--border-md); border-radius: 6px; padding: 0 8px; font-family: inherit; font-size: .8rem; background: var(--surface); color: var(--text); }
:is(#seccionPayroll, #seccionSalesTax) .pay-rcli { border-bottom: 1px solid var(--border); }
:is(#seccionPayroll, #seccionSalesTax) .pay-rcli:last-child { border-bottom: none; }
:is(#seccionPayroll, #seccionSalesTax) .pay-rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; cursor: pointer; }
:is(#seccionPayroll, #seccionSalesTax) .pay-rhead:hover { background: var(--surface-2); }
:is(#seccionPayroll, #seccionSalesTax) .pay-rhead.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
:is(#seccionPayroll, #seccionSalesTax) .pr-nm { font-weight: 700; font-size: .85rem; }
:is(#seccionPayroll, #seccionSalesTax) .pr-em { font-size: .68rem; color: var(--text-muted); }
.pay-sent { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.pay-sent.ok { color: #15803D; background: #F0FAF3; border: 1px solid #BBE6C9; }
.pay-sent.no { color: #D97706; background: #FFFBF2; border: 1px solid #F0D9B0; }
:is(#seccionPayroll, #seccionSalesTax) .pay-ritems { padding: 2px 13px 11px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-ritem { display: grid; grid-template-columns: 1fr 92px 110px; gap: 10px; align-items: center; padding: 4px 0; font-size: .8rem; }
:is(#seccionPayroll, #seccionSalesTax) .pay-ritem.pr-head { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
:is(#seccionPayroll, #seccionSalesTax) .pay-ritem input { height: 28px; border: 1px solid var(--border-md); border-radius: 6px; font-family: inherit; font-size: .8rem; padding: 0 8px; text-align: right; width: 100%; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--text); }
:is(#seccionPayroll, #seccionSalesTax) .pr-per { font-size: .72rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
:is(#seccionPayroll, #seccionSalesTax) .pay-rnote { font-size: .68rem; color: var(--text-muted); padding: 6px 0 2px; }
:is(#seccionPayroll, #seccionSalesTax) .pay-aviso { position: sticky; top: 10px; }

/* Aviso al cliente (tabla estilo soporte del Excel) */
.pay-avh { text-align: center; margin-bottom: 10px; }
.pay-avh .f { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dk); font-weight: 700; }
.pay-avh .c { font-size: .92rem; font-weight: 700; }
.pay-avh .e { font-size: .7rem; color: var(--text-muted); }
table.pay-av { width: 100%; border-collapse: collapse; font-size: .78rem; }
.pay-av th { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--tg-800); font-weight: 700; text-align: left; padding: 6px 9px; }
.pay-av th.n, .pay-av td.n { text-align: right; font-variant-numeric: tabular-nums; }
.pay-av td { padding: 6px 9px; border-bottom: 1px solid var(--border); }
.pay-av tr.sub td { font-weight: 700; background: var(--surface-2); }
.pay-av tr.tot td { font-weight: 800; background: var(--surface-2); border-top: 2px solid var(--tg-800); }
.pay-avbtns { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }

/* Config Payroll en el modal de servicio (limpio y directo) */
.svp-sec { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-dk); margin: 4px 0 9px; }
.svp-sec-obl { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-md); }
.svp-sec-obl select { height: 28px; border: 1px solid var(--border-md); border-radius: 6px; font-family: inherit; font-size: .78rem; padding: 0 8px; background: var(--surface); color: var(--text); }
.svp-perfil { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.svp-perfil-chk { display: flex; gap: 9px; align-items: center; padding: 9px 13px; border: 1px solid var(--border-md); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .84rem; flex: 1; min-width: 140px; }
.svp-perfil-chk:hover { border-color: var(--accent); }
.svp-perfil-chk input { width: 15px; height: 15px; accent-color: var(--accent-dk); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svp-grp { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--dark-mid); border-radius: 5px; padding: 3px 9px; margin: 12px 0 4px; display: inline-block; }
.svp-row { display: grid; grid-template-columns: 1fr 168px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.svp-row:last-of-type { border-bottom: none; }
.svp-row.off { opacity: .42; }
.svp-chk { display: flex; align-items: center; gap: 9px; cursor: pointer; min-width: 0; }
.svp-chk input { width: 15px; height: 15px; accent-color: var(--accent-dk); flex-shrink: 0; }
.svp-chk span { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svp-ctrl select { width: 100%; height: 30px; border: 1px solid var(--border-md); border-radius: 6px; font-family: inherit; font-size: .76rem; padding: 0 7px; background: var(--surface); color: var(--text); }
.svp-sigue { font-size: .72rem; color: #2563EB; text-align: right; display: block; padding-right: 4px; font-weight: 600; }
.svp-count { font-size: .74rem; color: var(--text-muted); margin-top: 12px; border-top: 1px dashed var(--border-md); padding-top: 10px; }
.svp-count b { color: var(--accent-dk); }
.svp-empty { color: var(--text-muted); font-size: .82rem; padding: 10px 0; text-align: center; }

@media (max-width: 1000px) {
  :is(#seccionPayroll, #seccionSalesTax) .pay-dnav { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════
   SALES TAX
   ══════════════════════════════════════════════════════════ */
#seccionSalesTax .pay-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
#seccionSalesTax .st-htitle { font-size: 1.15rem; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 9px; }
#seccionSalesTax .st-count { font-size: .78rem; font-weight: 500; color: var(--text-muted); }

/* Barra de herramientas: buscar + segmentos + orden */
#seccionSalesTax .st-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
#seccionSalesTax .st-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--border-md); border-radius: 8px; background: var(--surface); color: var(--text-muted); flex: 1; min-width: 200px; }
#seccionSalesTax .st-search input { border: none; background: none; outline: none; font-family: inherit; font-size: .82rem; color: var(--text); width: 100%; }
#seccionSalesTax .st-segs { display: flex; gap: 3px; }
.st-seg { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border-md); background: var(--surface); border-radius: 8px; font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.st-seg:hover { border-color: var(--accent); }
.st-seg.on { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.st-seg .n { font-size: .72rem; font-weight: 700; opacity: .75; }
#seccionSalesTax .st-ord { height: 34px; border: 1px solid var(--border-md); border-radius: 8px; font-family: inherit; font-size: .8rem; padding: 0 9px; background: var(--surface); color: var(--text); cursor: pointer; }

/* Cabecera y filas de la lista */
#seccionSalesTax .st-lhead,
#seccionSalesTax .st-lrow { display: grid; grid-template-columns: 1fr 92px 168px 108px 20px; gap: 12px; align-items: center; }
#seccionSalesTax .st-lhead { padding: 8px 13px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--tg-800); border-bottom: none; border-radius: 8px 8px 0 0; }
#seccionSalesTax .st-lrow { padding: 11px 13px; border-bottom: 1px solid var(--border); cursor: pointer; }
#seccionSalesTax .st-lrow:last-child { border-bottom: none; }
#seccionSalesTax .st-lrow:hover { background: var(--surface-2); }
#seccionSalesTax .st-cli { min-width: 0; }
#seccionSalesTax .st-cli-nom { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seccionSalesTax .st-cli-sub { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: #D97706; margin-top: 3px; }
#seccionSalesTax .st-cli-sub svg { flex-shrink: 0; }

/* Mini-columnas de obligaciones (puntos) */
#seccionSalesTax .st-dots { display: flex; gap: 0; justify-content: space-around; }
#seccionSalesTax .st-lhead .st-dots { align-items: center; }
#seccionSalesTax .st-dcol { flex: 1; text-align: center; font-size: .6rem; }
#seccionSalesTax .st-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#seccionSalesTax .st-dot.on { background: var(--accent-dk); }
#seccionSalesTax .st-dot.off { background: var(--border-md); }

/* Medidor de cumplimiento */
#seccionSalesTax .st-meter { display: flex; align-items: center; gap: 8px; }
#seccionSalesTax .st-meter .bk-med-track { display: block; flex: 1; height: 9px; border-radius: 5px; background: var(--surface-2); border: .5px solid var(--border-md); overflow: hidden; }
#seccionSalesTax .st-meter .bk-med-fill { display: block; height: 100%; background: #16A34A; border-radius: 4px; }
#seccionSalesTax .st-pct { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.st-estado { font-size: .74rem; font-weight: 700; text-align: right; white-space: nowrap; }
.st-estado.ok { color: #16A34A; }
.st-estado.pend { color: #D97706; }
#seccionSalesTax .st-chev { color: var(--text-muted); font-size: 1.2rem; text-align: center; }

/* Detalle — navegación */
#seccionSalesTax .st-dnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#seccionSalesTax .st-pnav { display: flex; gap: 6px; }
#seccionSalesTax .st-pnav .btn[disabled] { opacity: .4; cursor: default; }

/* Detalle — chips de periodos */
#seccionSalesTax .st-detcfg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
#seccionSalesTax .st-per-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; padding: 5px 10px; border: 1px solid var(--border-md); border-radius: 20px; background: var(--surface-2); }
#seccionSalesTax .st-per-chip b { color: var(--accent-dk); }
#seccionSalesTax .st-k { font-size: .64rem; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border-md); color: var(--text-muted); }
.st-per-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 4px; }
.st-per-badge.act { background: #F0FAF3; color: #15803D; border: 1px solid #BBE6C9; }
.st-per-badge.cer { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-md); }

/* Detalle — matriz por colores (separada, encabezado navy) */
#seccionSalesTax .st-mtx { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
#seccionSalesTax .st-mtx thead th { background: var(--tg-800); color: #fff; font-weight: 700; font-size: .68rem; padding: 6px 4px; border-radius: 6px; text-align: center; }
#seccionSalesTax .st-mtx th.st-oblh { text-align: left; padding: 7px 10px; min-width: 200px; }
#seccionSalesTax .st-mtx th.mes-actual { background: var(--accent-dk); }
#seccionSalesTax .st-mtx td.st-mc { padding: 0; }
#seccionSalesTax .st-bandrow th { background: transparent; padding: 0 0 2px; }
#seccionSalesTax .st-band { font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 4px; color: #fff; border-radius: 5px; text-align: center; }
#seccionSalesTax .st-band.gap { background: var(--surface-2); color: var(--text-muted); }
#seccionSalesTax .st-band.p1 { background: var(--accent-dk); }
#seccionSalesTax .st-band.p2 { background: #5686C4; }
#seccionSalesTax .st-obl { text-align: left; padding: 7px 10px; font-weight: 600; white-space: nowrap; font-size: .76rem; }
#seccionSalesTax .st-obl small { display: block; font-weight: 400; color: var(--text-muted); font-size: .66rem; margin-top: 1px; }
#seccionSalesTax .cel-na { color: #516074; font-weight: 700; opacity: .85; }
#seccionSalesTax .bk-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); margin-top: 12px; align-items: center; }

/* Estados (iconos de celda) — global */
.st-st { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 17px; min-width: 17px; font-size: .8rem; font-weight: 700; border-radius: 4px; }
.st-st svg { display: block; }
.st-done { color: #16A34A; }
.st-prog { color: #D97706; border: 1px solid #F0D9B0; background: #FFFBF2; padding: 1px 6px; }
.st-todo { color: #94A3B8; }

/* Config del servicio en la ficha (modal) — periodos/tramos */
.svst-hint { font-size: .74rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.4; }
.svst-tramo { border: 1px solid var(--border-md); border-radius: 10px; padding: 12px 13px; margin-bottom: 10px; }
.svst-tramo.act { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.svst-thead { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.svst-tnum { font-weight: 700; font-size: .82rem; }
.svst-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 4px; }
.svst-badge.act { background: #F0FAF3; color: #15803D; border: 1px solid #BBE6C9; }
.svst-badge.cer { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-md); }
.svst-del { margin-left: auto; width: 24px; height: 24px; border: 1px solid var(--border-md); border-radius: 6px; background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: .8rem; line-height: 1; }
.svst-del:hover { border-color: var(--danger); color: var(--danger); }
.svst-fechas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.svst-fechas label { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--text); }
.svst-fechas input[type=month] { height: 30px; border: 1px solid var(--border-md); border-radius: 6px; font-family: inherit; font-size: .78rem; padding: 0 8px; background: var(--surface); color: var(--text); }
.svst-cerrar, .svst-reab { height: 30px; padding: 0 11px; border: 1px solid var(--border-md); border-radius: 6px; background: var(--surface); font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--text); cursor: pointer; }
.svst-cerrar:hover { border-color: #D97706; color: #D97706; }
.svst-reab:hover { border-color: var(--accent); color: var(--accent-dk); }
.svst-imps { border-top: 1px dashed var(--border-md); padding-top: 8px; }
.svst-obr { display: grid; grid-template-columns: 1fr 168px; gap: 8px; align-items: center; padding: 6px 0; }
.svst-obr.off { opacity: .45; }
.svst-chk { display: flex; align-items: center; gap: 9px; cursor: pointer; min-width: 0; }
.svst-chk input { width: 15px; height: 15px; accent-color: var(--accent-dk); flex-shrink: 0; }
.svst-chk span { font-size: .82rem; font-weight: 600; }
.svst-ctrl select { width: 100%; height: 30px; border: 1px solid var(--border-md); border-radius: 6px; font-family: inherit; font-size: .76rem; padding: 0 7px; background: var(--surface); color: var(--text); }
.svst-react { width: 100%; padding: 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--green-lt); color: var(--accent-dk); font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.svst-react:hover { background: var(--surface-2); }

@media (max-width: 1000px) {
  #seccionSalesTax .st-lhead,
  #seccionSalesTax .st-lrow { grid-template-columns: 1fr 80px 100px; }
  #seccionSalesTax .st-lhead > span:nth-child(4),
  #seccionSalesTax .st-lhead > span:nth-child(5),
  #seccionSalesTax .st-lrow .st-estado,
  #seccionSalesTax .st-lrow .st-chev { display: none; }
}

/* ══════════════════════════════════════════════════════════
   CHAT INTERNO — F2 (DMs)
   ══════════════════════════════════════════════════════════ */
.nav-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .64rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: auto; }

#seccionChat .chat-frame { display: grid; grid-template-columns: 300px 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; height: calc(100vh - 128px); min-height: 420px; }
#seccionChat .chat-lst { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#seccionChat .chat-lst-top { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); align-items: center; }
#seccionChat .chat-lst-top input { flex: 1; height: 32px; border: 1px solid var(--border-md); border-radius: 7px; padding: 0 9px; font-family: inherit; font-size: .8rem; background: var(--surface); color: var(--text); min-width: 0; }
#seccionChat .chat-btn-new { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--accent-dk); background: var(--accent-dk); color: #fff; font-size: 1.05rem; cursor: pointer; flex-shrink: 0; line-height: 1; }
#seccionChat .chat-lst-body { flex: 1; overflow-y: auto; }
#seccionChat .chat-conv { display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--border); align-items: center; }
#seccionChat .chat-conv:hover { background: var(--surface-2); }
/* Sin leer (estilo WhatsApp): barra lateral fuerte + nombre/vista previa/hora resaltados. */
#seccionChat .chat-conv.unread { background: var(--accent-lt); box-shadow: inset 4px 0 0 var(--accent-dk); }
#seccionChat .chat-conv.unread:hover { background: var(--accent-lt); }
#seccionChat .chat-conv.unread .chat-cv-nom { font-weight: 800; color: var(--text); }
#seccionChat .chat-conv.unread .chat-cv-prev { color: var(--text); font-weight: 600; }
#seccionChat .chat-conv.unread .chat-cv-hora { color: var(--accent-dk); font-weight: 700; }
/* La conversación abierta (.on) gana visualmente sobre el estado sin-leer (incl. texto y hover). */
#seccionChat .chat-conv.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
#seccionChat .chat-conv.on:hover { background: var(--surface-2); }
#seccionChat .chat-conv.on .chat-cv-nom { font-weight: 700; color: var(--text); }
#seccionChat .chat-conv.on .chat-cv-prev { color: var(--text-muted); font-weight: 400; }
#seccionChat .chat-conv.on .chat-cv-hora { color: var(--text-muted); font-weight: 400; }
.chat-av { width: 34px; height: 34px; border-radius: 50%; background: var(--green-lt); color: var(--accent-dk); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; flex-shrink: 0; }
.chat-avw { position: relative; width: 34px; height: 34px; flex-shrink: 0; display: inline-block; }
.chat-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: var(--border-md); }
.chat-dot.on { background: #16A34A; }
.chat-dot.away { background: #D97706; }
.chat-sub-on { color: #16A34A; font-weight: 700; }
.chat-sub-away { color: #D97706; font-weight: 700; }
/* F4 · grupos */
.chat-av.sq { border-radius: 9px; }
.chat-av.sq svg { width: 16px; height: 16px; }
#seccionChat .chat-ico-tipo { display: inline-flex; margin-right: 4px; color: var(--text-muted); vertical-align: -1px; }
#seccionChat .chat-sub-link { cursor: pointer; }
#seccionChat .chat-sub-link:hover { color: var(--accent-dk); text-decoration: underline; }
.chat-newmenu { position: absolute; top: 36px; right: 0; background: var(--surface); border: 1px solid var(--border-md); border-radius: 8px; box-shadow: var(--shadow-lg); min-width: 190px; z-index: 60; display: none; }
.chat-newmenu button { display: block; width: 100%; border: none; background: none; font-family: inherit; font-size: .8rem; padding: 8px 12px; cursor: pointer; color: var(--text); text-align: left; }
.chat-newmenu button:hover { background: var(--surface-2); }
.ng-vis { display: flex; gap: 16px; font-size: .84rem; }
.ng-vis label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ng-lista { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.ng-user { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.ng-user:hover { background: var(--surface-2); }
.ng-user input { width: 15px; height: 15px; accent-color: var(--accent-dk); }
.gp-row { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.gp-row:last-child { border-bottom: none; }
.gp-row .ndm-nom { flex: 1; min-width: 0; }
.gm-nom-row { display: flex; gap: 8px; align-items: center; }
.gm-nom-row input, .gm-nom-row select { flex: 1; height: 33px; border: 1px solid var(--border-md); border-radius: var(--radius); padding: 0 9px; font-family: inherit; font-size: .82rem; background: var(--surface); color: var(--text); min-width: 0; }

/* F5-F8 · difusión, reply/@/emoji/editar, adjuntos, búsqueda */
#seccionChat .chat-msg { position: relative; }
#seccionChat .chat-m-body { min-width: 0; }
/* Barra de acciones con iconos AL COSTADO del globo: ajeno (izquierda) → abre a su
   derecha; propio (derecha) → abre a su izquierda (override en .chat-msg.propio) */
#seccionChat .chat-tools { position: absolute; top: 0; left: calc(100% + 6px); white-space: nowrap; background: var(--surface); border: 1px solid var(--border-md); border-radius: 7px; box-shadow: var(--shadow); display: none; z-index: 10; }
#seccionChat .chat-msg:hover .chat-tools { display: flex; }
#seccionChat .chat-tools button { display: flex; align-items: center; justify-content: center; border: none; background: none; width: 28px; height: 24px; cursor: pointer; color: var(--text-muted); }
#seccionChat .chat-tools button:hover { color: var(--accent-dk); background: var(--surface-2); }
#seccionChat .chat-tools button.peligro:hover { color: var(--danger); }

/* Reacciones con emoji */
#seccionChat .chat-reacc { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
#seccionChat .reacc-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border-md); border-radius: 20px; padding: 1px 8px 1px 6px; font-size: .8rem; line-height: 1.6; cursor: pointer; }
#seccionChat .reacc-chip:hover { border-color: var(--accent); }
#seccionChat .reacc-chip.mia { background: var(--tg-100); border-color: var(--accent); color: var(--tg-800); font-weight: 700; }
#seccionChat .reacc-chip .reacc-n { font-size: .72rem; font-variant-numeric: tabular-nums; }
.chat-emoji-pop { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--border-md); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; gap: 2px; }
.chat-emoji-pop button { border: none; background: none; cursor: pointer; font-size: 1.25rem; width: 38px; height: 38px; border-radius: 9px; }
.chat-emoji-pop button:hover { background: var(--surface-2); transform: scale(1.15); }
#seccionChat .chat-cita { border-left: 3px solid var(--accent); background: var(--green-lt); border-radius: 0 6px 6px 0; padding: 4px 9px; margin: 2px 0 4px; font-size: .74rem; cursor: pointer; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#seccionChat .chat-cita b { font-size: .66rem; color: var(--accent-dk); display: block; }
#seccionChat .chat-men { background: var(--green-ring); color: var(--accent-dkr); font-weight: 700; border-radius: 4px; padding: 0 3px; }
#seccionChat .chat-msg.flash { background: var(--green-ring); transition: background 1.2s; }
#seccionChat .chat-msg.busq-hit { background: rgba(217,119,6,.10); box-shadow: inset 2px 0 0 #D97706; }
#seccionChat .chat-adj-img { max-width: 260px; max-height: 220px; border-radius: 9px; border: 1px solid var(--border); display: block; margin: 4px 0; cursor: zoom-in; }
#seccionChat .chat-adj-file { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--border-md); background: var(--surface); border-radius: 8px; padding: 7px 11px; margin: 4px 6px 0 0; font-size: .78rem; color: var(--text); text-decoration: none; }
#seccionChat .chat-adj-file:hover { border-color: var(--accent); }
#seccionChat .chat-adj-file svg { color: var(--accent-dk); flex-shrink: 0; }
#seccionChat .chat-adj-file small { display: block; color: var(--text-muted); font-size: .64rem; }
#seccionChat .chat-cbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-md); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
#seccionChat .chat-cbtn:hover { color: var(--accent-dk); border-color: var(--accent); }
#seccionChat .chat-replybar { display: flex; justify-content: space-between; align-items: center; background: var(--green-lt); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 4px 9px; margin-bottom: 7px; font-size: .72rem; }
#seccionChat .chat-replybar.edit { border-left-color: #D97706; background: rgba(217,119,6,.08); }
#seccionChat .chat-replybar b { color: var(--accent-dk); font-size: .64rem; display: block; }
#seccionChat .chat-replybar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#seccionChat .chat-replybar button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: .8rem; }
#seccionChat .chat-adjbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
#seccionChat .chat-adjchip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border-md); background: var(--surface-2); border-radius: 7px; padding: 4px 8px; font-size: .72rem; }
#seccionChat .chat-adjchip svg { width: 13px; height: 13px; color: var(--accent-dk); }
#seccionChat .chat-adjchip small { color: var(--text-muted); }
#seccionChat .chat-adjchip button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: .74rem; padding: 0 2px; }
#seccionChat .chat-atpick { position: absolute; bottom: 42px; left: 0; background: var(--surface); border: 1px solid var(--border-md); border-radius: 9px; box-shadow: var(--shadow-lg); min-width: 220px; z-index: 60; display: none; }
#seccionChat .chat-atpick button { display: flex; gap: 8px; align-items: center; width: 100%; border: none; background: none; font-family: inherit; font-size: .8rem; padding: 7px 10px; cursor: pointer; color: var(--text); text-align: left; }
#seccionChat .chat-atpick button:hover { background: var(--surface-2); }
#seccionChat .chat-emojipick { position: absolute; bottom: 40px; right: 0; background: var(--surface); border: 1px solid var(--border-md); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; display: none; grid-template-columns: repeat(8, 30px); gap: 2px; z-index: 60; }
#seccionChat .chat-emojipick span { font-size: 1.05rem; cursor: pointer; text-align: center; border-radius: 5px; padding: 2px; }
#seccionChat .chat-emojipick span:hover { background: var(--surface-2); }
#seccionChat .chat-bloq { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; font-size: .8rem; color: var(--text-muted); background: var(--surface-2); }
#seccionChat .chat-bloq svg { color: #D97706; width: 15px; height: 15px; }
#seccionChat .chat-h-lupa { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--border-md); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
#seccionChat .chat-h-lupa:hover, #seccionChat .chat-h-lupa.on { color: var(--accent-dk); border-color: var(--accent); }
#seccionChat .chat-busq { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
#seccionChat .chat-busq input { flex: 1; height: 30px; border: 1px solid var(--border-md); border-radius: 7px; padding: 0 9px; font-family: inherit; font-size: .8rem; background: var(--surface); color: var(--text); min-width: 0; }
#seccionChat .chat-busq span { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
#seccionChat .chat-hilo { position: relative; }
#seccionChat .chat-nuevos { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); border: 1px solid var(--accent-dk); background: var(--accent-dk); color: #fff; border-radius: 16px; padding: 5px 14px; font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 20; }
.chat-lightbox { position: fixed; inset: 0; background: rgba(15,23,42,.88); z-index: 4000; display: none; align-items: center; justify-content: center; }
.chat-lb-stage { max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-out; }
.chat-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform-origin: center center; transition: transform .04s linear; will-change: transform; user-select: none; -webkit-user-drag: none; }
.chat-lb-bar { position: absolute; top: 14px; right: 16px; z-index: 4001; display: flex; gap: 6px; background: rgba(20,24,31,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 5px; }
.chat-lb-bar button { all: unset; cursor: pointer; color: #e8eaed; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 1.05rem; line-height: 1; }
.chat-lb-bar button:hover { background: rgba(255,255,255,.12); }
.chat-lb-pct { color: #e8eaed; font-size: .78rem; min-width: 46px; text-align: center; align-self: center; }
.chat-lb-hint { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 4001; text-align: center; color: #aeb4bd; font-size: .72rem; pointer-events: none; }
.chat-typing { align-items: center; gap: 7px; padding: 3px 12px 1px; font-size: .72rem; color: var(--text-muted); font-style: italic; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); display: inline-block; animation: chatTypingBounce 1.2s infinite ease-in-out; }
.chat-typing-dots span:nth-child(2) { animation-delay: .18s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes chatTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
/* Arrastrar-y-soltar: aviso sobre el hilo del chat */
#seccionChat .chat-hilo { position: relative; }
.chat-drop-ov { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(35,57,91,.14); pointer-events: none; }
.chat-drop-ov.on { display: flex; }
.chat-drop-card { border: 2px dashed #5686C4; border-radius: 12px; background: var(--surface-2, #fff); padding: 22px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); text-align: center; }
.chat-drop-card svg { color: #23395B; }
.chat-drop-card b { font-size: .95rem; color: #23395B; font-weight: 700; }
.chat-drop-card span { font-size: .74rem; color: var(--text-muted); }
#seccionChat .chat-cv-mid { min-width: 0; }
#seccionChat .chat-cv-nom { font-weight: 700; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seccionChat .chat-cv-prev { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#seccionChat .chat-cv-hint { font-style: italic; opacity: .85; }
#seccionChat .chat-lista-sep { font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); padding: 11px 12px 5px; background: var(--surface); }
/* Encabezado de sección de la lista de chat (Directos / Grupos) */
#seccionChat .chat-sec { display: flex; align-items: center; gap: 7px; padding: 8px 12px 6px; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
#seccionChat .chat-sec-ico { display: inline-flex; color: var(--accent-dk); }
#seccionChat .chat-sec-t { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-dk); }
#seccionChat .chat-sec-n { font-size: .6rem; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px; }
#seccionChat .chat-cv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#seccionChat .chat-cv-hora { font-size: .64rem; color: var(--text-muted); white-space: nowrap; }
.chat-pill { min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent-dk); color: #fff; font-size: .64rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.chat-pill.men { background: var(--danger); }

/* Aviso "usuario retirado de la firma" (solo lectura) + acción de archivar */
#seccionChat .chat-bloq-retirado { flex-direction: column; gap: 9px; text-align: center; line-height: 1.45; padding: 16px 14px; }
#seccionChat .chat-bloq-retirado .chat-bloq-txt { max-width: 44ch; }

/* Sección "Archived" (colapsable) + fila con botón desarchivar */
#seccionChat .chat-sec-arch { cursor: pointer; user-select: none; }
#seccionChat .chat-sec-arch:hover { background: var(--surface); }
#seccionChat .chat-sec-caret { color: var(--text-muted); transition: transform .15s ease; flex: 0 0 auto; }
#seccionChat .chat-sec-arch.open .chat-sec-caret { transform: rotate(90deg); }
#seccionChat .chat-unarch { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
#seccionChat .chat-unarch:hover { color: var(--accent-dk); border-color: var(--accent-dk); background: var(--surface-2); }

#seccionChat .chat-hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
#seccionChat .chat-msgs { min-height: 0; }
#seccionChat .chat-vacio { min-height: 260px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); text-align: center; padding: 30px 20px; }
#seccionChat .chat-vacio svg { opacity: .45; }
#seccionChat .chat-vacio p { font-size: .82rem; max-width: 240px; }
#seccionChat .chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); min-height: 55px; }
#seccionChat .chat-h-nom { font-weight: 800; font-size: .92rem; }
#seccionChat .chat-h-sub { font-size: .7rem; color: var(--text-muted); }
#seccionChat .chat-msgs { flex: 1; overflow-y: auto; padding: 12px 16px; }
#seccionChat .chat-dia { text-align: center; margin: 10px 0 12px; }
#seccionChat .chat-dia span { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px; }
#seccionChat .chat-mas { text-align: center; margin: 4px 0 10px; }
#seccionChat .chat-mas button { border: 1px solid var(--border-md); background: var(--surface); color: var(--text-muted); border-radius: 14px; padding: 3px 13px; font-family: inherit; font-size: .72rem; cursor: pointer; }
#seccionChat .chat-mas button:hover { color: var(--accent-dk); border-color: var(--accent); }
/* Globos todos a la izquierda (lectura en pantallas anchas): azul = propio, blanco = ajeno */
#seccionChat .chat-msg { display: flex; gap: 8px; padding: 1px 4px; border-radius: 8px; margin-bottom: 3px; justify-content: flex-start; }
#seccionChat .chat-av-m { align-self: flex-start; }
#seccionChat .chat-msg.compact .chat-av-m { visibility: hidden; height: 0; }
#seccionChat .chat-burbuja { position: relative; max-width: min(68%, 560px); padding: 6px 10px 4px; border-radius: 12px; border-top-left-radius: 4px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 1px rgba(20,35,60,.05); }
#seccionChat .chat-msg.propio .chat-burbuja { background: var(--green-lt); border-color: var(--green-ring); }
/* Mensajes PROPIOS a la derecha (estilo chat estándar): burbuja pegada a la derecha, sin avatar propio, cola arriba-derecha */
#seccionChat .chat-msg.propio { flex-direction: row-reverse; }
#seccionChat .chat-msg.propio .chat-av-m { display: none; }
#seccionChat .chat-msg.propio .chat-burbuja { border-top-left-radius: 12px; border-top-right-radius: 4px; }
/* Globo propio alineado a la derecha: la barra de acciones abre al costado IZQUIERDO (a la derecha no hay hueco) y el reply-quote/reacciones se alinean a la derecha */
#seccionChat .chat-msg.propio .chat-tools { left: auto; right: calc(100% + 6px); }
#seccionChat .chat-msg.propio .chat-reacc { justify-content: flex-end; }
#seccionChat .chat-msg.propio .chat-cita { border-left: 0; border-right: 3px solid var(--accent); border-radius: 6px 0 0 6px; text-align: right; }
#seccionChat .chat-msg.compact .chat-burbuja { border-radius: 12px; }
#seccionChat .chat-b-autor { font-size: .68rem; font-weight: 700; color: var(--accent-dk); margin-bottom: 1px; }
#seccionChat .chat-b-hora { display: block; text-align: right; font-size: .6rem; color: var(--text-muted); margin-top: 2px; line-height: 1; }
/* Read receipt (DM): "Seen HH:MM" bajo mi último mensaje leído */
#seccionChat .chat-seen { text-align: right; font-size: .62rem; font-weight: 600; color: var(--text-muted); padding: 0 6px; margin: 1px 6px 6px; }
.chatw-seen { text-align: right; font-size: .62rem; font-weight: 600; color: var(--text-muted); padding: 2px 8px 2px; }
#seccionChat .chat-texto { font-size: .84rem; white-space: pre-wrap; word-break: break-word; }
#seccionChat .chat-del { font-size: .8rem; color: var(--text-muted); font-style: italic; }

#seccionChat .chat-comp { border-top: 1px solid var(--border); background: var(--surface); padding: 9px 12px; }
#seccionChat .chat-comp-row { display: flex; gap: 8px; align-items: flex-end; }
#seccionChat .chat-comp-row textarea { flex: 1; width: 100%; box-sizing: border-box; display: block; border: 1px solid var(--border-md); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: .84rem; resize: none; max-height: 120px; background: var(--surface); color: var(--text); }
/* Editor enriquecido del chat (Fase 1): mismo aspecto que el textarea, pero editable con formato */
#seccionChat .chat-comp-row .chat-ce { flex: 1; width: 100%; box-sizing: border-box; display: block; border: 1px solid var(--border-md); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: .84rem; min-height: 37px; max-height: 120px; overflow-y: auto; background: var(--surface); color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
#seccionChat .chat-comp-row .chat-ce:focus { outline: none; border-color: var(--accent); }
#seccionChat .chat-comp-row .chat-ce:empty::before { content: attr(data-ph); color: var(--text-muted); pointer-events: none; }
#seccionChat .chat-send { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--accent-dk); background: var(--accent-dk); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#seccionChat .chat-send svg { width: 16px; height: 16px; stroke: #fff; }

#modalNuevoDM .ndm-user { display: flex; gap: 10px; align-items: center; width: 100%; border: none; background: none; font-family: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); }
#modalNuevoDM .ndm-user:hover { background: var(--surface-2); }
#modalNuevoDM .ndm-nom { font-weight: 600; font-size: .86rem; }
#modalNuevoDM .ndm-nom small { display: block; font-weight: 400; color: var(--text-muted); font-size: .7rem; }

/* Botón "volver a conversaciones" del hilo — solo visible en móvil */
#seccionChat .chat-mob-back { display: none; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; border: none; border-bottom: 1px solid var(--border); background: var(--surface);
  color: var(--tg-800, #23395B); font-family: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
#seccionChat .chat-mob-back:active { background: var(--bg); }

@media (max-width: 768px) {
  /* Chat de PANEL ÚNICO: por defecto se ve la LISTA; al abrir una conversación el hilo
     entra deslizando por encima, y el botón "atrás" (‹ Conversaciones) regresa a la lista. */
  #seccionChat .chat-frame { grid-template-columns: 1fr; position: relative;
    height: calc(100vh - 112px);          /* fallback */
    height: calc(100dvh - 112px); }       /* móvil: viewport dinámico (no se corta por la barra de direcciones) */
  #seccionChat .chat-hilo { position: absolute; inset: 0; z-index: 3; background: var(--bg);
    transform: translateX(100%); visibility: hidden; transition: transform .22s ease; }
  #seccionChat .chat-frame.mob-hilo .chat-hilo { transform: none; visibility: visible; }
  #seccionChat .chat-mob-back { display: flex; }
  #seccionChat .chat-comp-row textarea,
  #seccionChat .chat-comp-row .chat-ce { font-size: 16px; }   /* evita el zoom de iOS al enfocar */
}
/* Fase 4: mismo anti-zoom en tablets táctiles (iPad ~810px, fuera del breakpoint de móvil) */
@media (hover: none) and (pointer: coarse) {
  #seccionChat .chat-comp-row textarea,
  #seccionChat .chat-comp-row .chat-ce { font-size: 16px; }
}

/* ── Banner: validar correo (solo dueño no verificado) ── */
.banner-verif { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(217,119,6,.12); border-bottom: 1px solid rgba(217,119,6,.4); color: var(--text); font-size: .82rem; }
.banner-verif > svg { color: #D97706; flex-shrink: 0; }
.banner-verif-txt { flex: 1; }
.banner-verif-btn { border: 1px solid #D97706; background: #D97706; color: #fff; border-radius: 7px; padding: 5px 12px; font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.banner-verif-btn:hover:not(:disabled) { background: #b45f05; border-color: #b45f05; }
.banner-verif-btn:disabled { opacity: .65; cursor: default; }
.banner-verif-x { border: none; background: none; color: var(--text-muted); font-size: .95rem; line-height: 1; cursor: pointer; padding: 4px 6px; opacity: .7; }
.banner-verif-x:hover { opacity: 1; }

/* ══ Payroll form v2 (multi-estado) ══ */
.pf-hint { font-size:.7rem; color:var(--muted); margin:4px 0 0; }
.pf-ms { position:relative; }
.pf-ms-control { min-height:38px; border:1px solid var(--border-md); border-radius:8px; background:var(--surface); padding:5px 32px 5px 8px; cursor:pointer; display:flex; flex-wrap:wrap; gap:6px; align-items:center; position:relative; }
.pf-ms-control:hover { border-color:var(--tg-600, #3D6398); }
.pf-ms.open .pf-ms-control { border-color:var(--tg-600, #3D6398); box-shadow:0 0 0 3px rgba(86,134,196,.15); }
.pf-ms-ph { color:var(--muted); font-size:.85rem; }
.pf-ms-arrow { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.7rem; pointer-events:none; }
.pf-ms-tag { display:inline-flex; align-items:center; gap:6px; background:var(--tg-800); color:#fff; border-radius:6px; padding:3px 6px 3px 9px; font-size:.8rem; font-weight:600; }
.pf-ms-tag .rm { cursor:pointer; font-size:.9rem; line-height:1; opacity:.8; }
.pf-ms-tag .rm:hover { opacity:1; }
.pf-ms-panel { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--surface); border:1px solid var(--border-md); border-radius:10px; box-shadow:0 12px 30px rgba(15,25,40,.16); overflow:hidden; }
.pf-ms-search { width:100%; border:none; border-bottom:1px solid var(--border); border-radius:0; padding:9px 12px; font-family:inherit; font-size:.85rem; background:var(--surface); color:var(--text); }
.pf-ms-search:focus { outline:none; }
.pf-ms-list { max-height:230px; overflow-y:auto; padding:4px; }
.pf-ms-opt { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:6px; cursor:pointer; font-size:.85rem; }
.pf-ms-opt:hover { background:var(--surface-2); }
.pf-ms-opt input { width:15px; height:15px; accent-color:var(--tg-700, #2F4E77); }
.pf-ms-opt .code { font-weight:700; width:32px; }
.pf-ms-opt .pend { margin-left:auto; font-size:.66rem; color:var(--muted); font-style:italic; }
.pf-ms-none { padding:12px; text-align:center; color:var(--muted); font-size:.8rem; }
.pf-blk { border:1px solid var(--border); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.pf-blk-h { display:flex; align-items:center; gap:8px; padding:8px 12px; font-weight:700; font-size:.84rem; background:var(--tg-800); color:#fff; }
.pf-blk-h.fed { background:var(--mx-ntl, #7E5AA6); }
.pf-blk-h.pend { background:var(--muted); }
.pf-blk-h .pf-tag { margin-left:auto; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:rgba(255,255,255,.22); padding:2px 8px; border-radius:20px; }
.pf-grp { padding:4px 0; }
.pf-grp-t { font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:8px 14px 3px; }
.pf-oi { display:flex; align-items:center; gap:10px; padding:6px 14px; }
.pf-oi:hover { background:var(--surface-2); }
.pf-oi label { display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; font-size:.85rem; }
.pf-oi input[type=checkbox] { width:15px; height:15px; accent-color:var(--tg-700, #2F4E77); flex:none; }
.pf-oi select { width:auto; min-width:130px; padding:5px 8px; font-size:.8rem; border:1px solid var(--border-md); border-radius:7px; font-family:inherit; background:var(--surface); color:var(--text); }
.pf-oi .pf-cad { font-size:.72rem; color:var(--muted); font-weight:600; min-width:96px; text-align:right; }
.pf-oi-parent label { font-weight:700; }
.pf-oi-child { padding-left:40px; position:relative; }
.pf-oi-child::before { content:''; position:absolute; left:22px; top:0; bottom:0; border-left:2px solid var(--border); }
.pf-oi-child label { font-size:.84rem; }
.pf-empty { padding:12px 14px; font-size:.78rem; color:var(--muted); }

/* ══ Payroll matriz v2 (bandas + celdas contador/chip) ══ */
.pay-mtx .pay-sub td { background:var(--surface-2); color:var(--tg-700,#2F4E77); font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px 4px 24px; }
.pay-mtx tbody td.pay-mc[onclick] { cursor:pointer; }
.pay-mtx tbody td.pay-mc[onclick]:hover { outline:2px solid var(--tg-500,#5686C4); outline-offset:-2px; border-radius:6px; }
.mx-cell.empty { color:var(--sl-300,#CBD5E1); font-weight:700; background:transparent; border:none; }
.pay-cnt { display:flex; align-items:center; justify-content:center; width:100%; min-height:38px; box-sizing:border-box; border-radius:6px; color:#fff; font-weight:700; font-size:.72rem; cursor:pointer; transition:filter .1s ease; }
.pay-cnt:hover, .pay-chip:hover { filter:brightness(1.06); }
.pay-cnt.full { background:var(--mx-done,#2F9E74); }
.pay-cnt.part { background:var(--mx-prog,#C0862E); }
.pay-chip { display:flex; width:100%; min-height:38px; box-sizing:border-box; border-radius:6px; cursor:pointer; transition:filter .1s ease; }
.pay-chip.done { background:var(--mx-done,#2F9E74); }
.pay-chip.todo { background:var(--mx-todo,#B0433F); }
.pay-chip.prog { background:var(--mx-prog,#C0862E); }
.pay-chip.na   { background:var(--pay-na,#CBD5E1); color:var(--pay-na-tx,#475569); align-items:center; justify-content:center; font-size:.62rem; font-weight:800; letter-spacing:.03em; }
.pay-chip.ntl  { background:var(--mx-ntl,#7E5AA6); }
/* Semáforo simplificado: swatch de NA (gris más fuerte) para la leyenda del payroll */
.pay-na-strong { width:15px; height:15px; border-radius:4px; display:inline-block; flex-shrink:0; background:var(--pay-na,#CBD5E1); box-shadow:inset 0 0 0 1px var(--border); }
.pay-cnt.haslock, .pay-chip.haslock { box-shadow:0 0 0 2px var(--mx-prog,#C0862E); }
/* Mes aún no vencido (posterior al mes actual): sombreado, no clickeable */
.pay-mtx td.pay-mc-off { background:repeating-linear-gradient(45deg,#F4F6F9,#F4F6F9 5px,#EEF1F5 5px,#EEF1F5 10px); cursor:default; }
.pay-mtx td.pay-mc-off .pay-off { display:flex; align-items:center; justify-content:center; height:34px; color:#9aa6b6; font-weight:700; }
/* Candado como marca de agua sobre la casilla bloqueada (reportada al cliente) */
.pay-mtx td.pay-mc { position:relative; }
.pay-lockwm { position:absolute; pointer-events:none; line-height:1; }
.pay-lockwm.center { inset:0; display:flex; align-items:center; justify-content:center; font-size:1rem; text-shadow:0 1px 2px rgba(0,0,0,.35); filter:grayscale(.2); }
.pay-lockwm.corner { top:0; right:2px; font-size:.72rem; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* Pending por DEFAULT (vencido + sin registrar): mismo chip rojo pero rayado/atenuado para distinguir del que puso el usuario */
.pay-chip.pay-def { opacity:.5; border:1.5px dashed rgba(255,255,255,.85); }
.mx-chip.pay-def { opacity:.5; border:1.5px dashed rgba(0,0,0,.25); }

/* ══ Payroll · popover de celda (F3) ══ */
.cpop { position:fixed; z-index:60; background:var(--surface); border:1px solid var(--border-md); border-radius:11px; box-shadow:0 16px 40px rgba(15,25,40,.22); width:560px; max-width:94vw; overflow:hidden; }
/* Mientras un popover de depósitos (.cpop de Payroll/Sales Tax) esté abierto, oculta el chat
   flotante para que NO tape el botón "Done" del pie. Reactivo: reaparece al cerrar el popover. */
body:has(.cpop) .chatw-fab, body:has(.cpop) .chatw-panel { display:none !important; }
.cpop .cp-h { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--tg-800); color:#fff; font-size:.86rem; font-weight:700; }
.cpop .cp-x { margin-left:auto; cursor:pointer; opacity:.85; font-size:1rem; }
.cpop .cp-x:hover { opacity:1; }
.cpop .cp-mid { padding:10px 12px; max-height:64vh; overflow-y:auto; }
table.cp { width:100%; border-collapse:collapse; font-size:.8rem; table-layout:fixed; }
table.cp th { text-align:left; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:2px 6px 6px; white-space:nowrap; }
table.cp td { padding:3px 5px; border-top:1px solid var(--border); }
table.cp input, table.cp select, .dcard input, .dcard select { width:100%; border:1px solid var(--border-md); border-radius:6px; padding:5px 6px; font-family:inherit; font-size:.78rem; background:var(--surface); color:var(--text); box-sizing:border-box; }
.cpop .amt-wrap { display:flex; align-items:center; gap:1px; border:1px solid var(--border-md); border-radius:6px; padding:0 6px; background:var(--surface); }
.cpop .amt-cur { color:var(--muted); font-size:.76rem; }
.cpop .amt-wrap input { border:none !important; padding:5px 2px !important; text-align:right; }
.cpop .amt-wrap input:focus { outline:none; }
.cp-rm { border:none; background:transparent; color:var(--mx-todo,#B0433F); cursor:pointer; font-size:.95rem; padding:2px 4px; }
.cp-rm:hover { color:#7f1d1d; }
.cp-add { margin-top:8px; border:1px dashed var(--border-md); background:var(--surface-2); border-radius:8px; padding:7px 12px; font-family:inherit; font-size:.78rem; font-weight:600; color:var(--tg-700,#2F4E77); cursor:pointer; width:100%; }
.cp-add:hover { background:var(--tg-50,#F2F6FB); }
tr.cp-tot td { font-weight:800; border-top:2px solid var(--border-md); padding-top:6px; color:var(--tg-800); }
tr.cp-tot td.amt { text-align:right; }
.cpop .cp-foot { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface-2); }
.cpop .cp-k { font-size:.76rem; color:var(--muted); }
.cpop .cp-foot .btn { margin-left:auto; }
.pay-lockic { font-size:.9rem; cursor:default; }
.cp tr.locked input, .cp tr.locked select, .dcard.locked input, .dcard.locked select { pointer-events:none; background:var(--surface-2); color:var(--muted); }
/* status con fondo de color (Plaky/Monday) */
table.cp td.st select, .dc-st select { min-width:120px; font-weight:700; border-radius:6px; }
td.st select.st-done, .dc-st select.st-done { background:var(--mx-done,#2F9E74); border-color:var(--mx-done,#2F9E74); color:#fff; }
td.st select.st-pending, .dc-st select.st-pending { background:var(--mx-todo,#B0433F); border-color:var(--mx-todo,#B0433F); color:#fff; }
td.st select.st-inproc, .dc-st select.st-inproc { background:var(--mx-prog,#C0862E); border-color:var(--mx-prog,#C0862E); color:#fff; }
td.st select.st-na, .dc-st select.st-na { background:var(--mx-na,#94A3B8); border-color:var(--mx-na,#94A3B8); color:#fff; }
td.st select.st-ntl, .dc-st select.st-ntl { background:var(--mx-ntl,#7E5AA6); border-color:var(--mx-ntl,#7E5AA6); color:#fff; }
td.st select option, .dc-st select option { background:#fff; color:#1A2233; }
/* tarjetas de componentes (State Withholding) */
.dcards { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.dcard { border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.dcard-top { display:flex; align-items:flex-end; gap:10px; }
.dc-f { display:flex; flex-direction:column; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); gap:3px; }
.dc-f > input, .dc-f > span > select, .dc-f > span > input { font-weight:400; text-transform:none; color:var(--text); }
.dcard-top .cp-rm, .dcard-top .pay-lockic { margin-left:auto; align-self:center; }
.dcard-comps { margin-top:8px; border-top:1px dashed var(--border); padding-top:8px; display:flex; flex-direction:column; gap:5px; max-width:300px; }
.dc-line { display:flex; align-items:center; gap:8px; }
.dc-lbl { flex:1; font-size:.82rem; color:var(--text); }
.dc-line .amt-wrap { width:120px; flex:none; }
.dc-tot { border-top:1px solid var(--border); padding-top:5px; }
.dc-tot .dc-lbl { font-weight:800; color:var(--tg-800); }
.dc-totv { width:120px; text-align:right; font-weight:800; color:var(--tg-800); padding-right:6px; }
.cp-grand { text-align:right; font-size:.92rem; padding:6px 2px; border-top:2px solid var(--border-md); margin-top:2px; }
.cp-grand b { color:var(--tg-800); }
/* comentarios por celda (F4) */
.cp-cmts { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.pcmt-h { display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tg-700,#2F4E77); }
.pcmt-h .pcmt-n { color:var(--muted); font-weight:600; }
.pcmt-note { font-size:.66rem; color:var(--muted); margin:2px 0 8px; }
.pcmt-new { display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; }
.pcmt-new textarea, .pcmt-ebox textarea, .pcmt-rbox textarea { flex:1; width:100%; border:1px solid var(--border-md); border-radius:8px; padding:6px 8px; font-family:inherit; font-size:.8rem; resize:vertical; min-height:34px; background:var(--surface); color:var(--text); box-sizing:border-box; }
.cp-send { border:1px solid var(--tg-800); background:var(--tg-800); color:#fff; border-radius:8px; padding:6px 12px; font-family:inherit; font-size:.76rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.cp-cancel { border:1px solid var(--border-md); background:var(--surface); color:var(--text); border-radius:8px; padding:6px 12px; font-family:inherit; font-size:.76rem; cursor:pointer; }
.pcmt-list { display:flex; flex-direction:column; gap:8px; }
.pcmt-item { border-left:2px solid var(--border); padding:2px 0 2px 10px; }
.pcmt-meta { font-size:.74rem; } .pcmt-meta b { color:var(--text); }
.pcmt-ts { color:var(--muted); font-size:.7rem; }
.pcmt-ed { color:var(--muted); font-size:.66rem; font-style:italic; }
.pcmt-text { font-size:.82rem; margin:2px 0 3px; white-space:pre-wrap; }
.pcmt-actions { display:flex; gap:14px; margin-top:2px; }
.pcmt-a { border:none; background:transparent; font-family:inherit; font-size:.72rem; font-weight:700; cursor:pointer; padding:0; color:var(--tg-600,#3D6398); }
.pcmt-a:hover { text-decoration:underline; }
.pcmt-a.danger { color:var(--mx-todo,#B0433F); }
.pcmt-ebox, .pcmt-rbox { margin-top:6px; }
.pcmt-rbtns { display:flex; gap:6px; margin-top:5px; }
.pcmt-empty { font-size:.78rem; color:var(--muted); padding:6px 0; }

/* ═══ v2 · F5/F6 — Soporte (Undeposited Funds) + Histórico ═══ */
/* Barra "+ Crear soporte" arriba de la matriz de Control */
.pay-ctrlbar { display:flex; justify-content:flex-end; padding:0 0 10px; }
.btn-soporte { border:1px solid var(--tg-800,#23395B); background:var(--tg-800,#23395B); color:#fff; border-radius:8px; padding:7px 14px; font-family:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
.btn-soporte:hover { background:var(--tg-900,#1B2E4D); }

/* Modal Crear soporte */
.sop-overlay { position:fixed; inset:0; background:rgba(15,25,40,.45); z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.sop-modal { background:var(--surface,#fff); border-radius:12px; width:920px; max-width:96vw; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 50px rgba(15,25,40,.3); }
.sop-h { display:flex; align-items:center; padding:13px 18px; background:var(--tg-800,#23395B); color:#fff; }
.sop-h h3 { margin:0; font-size:1rem; font-weight:700; }
.sop-h .x { margin-left:auto; cursor:pointer; opacity:.85; font-size:1.05rem; }
.sop-h .x:hover { opacity:1; }
.sop-body { padding:14px 18px; overflow-y:auto; }
.sop-top { display:flex; align-items:flex-end; gap:14px; margin-bottom:12px; }
.sop-top label { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--tg-700,#2F4E77); display:flex; flex-direction:column; gap:4px; }
.sop-top input { border:1px solid var(--border-md); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:.86rem; text-transform:none; font-weight:400; }
.sop-hint { font-size:.76rem; color:var(--muted); padding-bottom:4px; }
.sop-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sop-subh { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
.sop-lhead { display:flex; gap:9px; align-items:center; padding:2px 10px 6px 34px; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sop-lh-lbl { flex:1; }
.sop-lh-per { width:60px; text-align:center; }
.sop-lh-dt { width:124px; text-align:center; }
.sop-lh-amt { min-width:80px; text-align:right; }
.sop-grp { margin-bottom:10px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.sop-grp-h { background:var(--dark-mid,#334155); color:#fff; font-size:.7rem; font-weight:800; padding:5px 10px; display:flex; align-items:center; gap:7px; }
.sop-grp-tag { font-size:.56rem; font-weight:800; letter-spacing:.06em; background:rgba(255,255,255,.22); padding:1px 6px; border-radius:20px; }
.sop-item { display:flex; align-items:center; gap:9px; padding:7px 10px; border-top:1px solid var(--border); font-size:.82rem; }
.sop-item:first-of-type { border-top:none; }
.sop-item:hover { background:var(--tg-50,#F2F6FB); }
.sop-item input[type=checkbox] { width:15px; height:15px; accent-color:var(--tg-700,#2F4E77); }
.sop-it-sel { flex:1; display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0; }
.sop-it-lbl { flex:1; overflow:hidden; text-overflow:ellipsis; }
.sop-it-per { color:var(--muted); font-size:.74rem; min-width:56px; text-align:right; }
.sop-it-amt { font-weight:700; font-variant-numeric:tabular-nums; min-width:80px; text-align:right; }
.sop-it-per-inp, .sop-it-dt-inp { box-sizing:border-box; font:inherit; font-size:.74rem; padding:3px 5px; border:1px solid var(--border); border-radius:6px; background:#fff; color:var(--text,#1A2233); }
.sop-it-per-inp { width:60px; text-align:center; }
.sop-it-dt-inp { width:124px; }
.sop-it-hint { width:193px; text-align:right; font-style:italic; color:var(--muted); font-size:.7rem; }
.sop-item-parent .sop-it-lbl { font-weight:600; }
.sop-item-sub { padding-left:34px; background:var(--tg-50,#FAFCFE); }
.sop-item-sub .sop-it-lbl { color:#475569; }
.sop-empty { padding:16px; text-align:center; color:var(--muted); font-size:.82rem; border:1px dashed var(--border-md); border-radius:8px; }
.sop-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-2); }
.sop-foot .btn[disabled] { opacity:.5; cursor:not-allowed; }

/* Aviso al cliente (entregable) */
.pay-notice { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.pn-h { text-align:center; padding:10px; border-bottom:1px solid var(--border); }
.pn-f { font-weight:800; font-size:.92rem; color:#0f172a; }
.pn-c { font-size:.8rem; color:#475569; }
.pn-e { font-size:.74rem; color:#64748b; }
.pn-draft { padding:6px 12px; font-size:.8rem; background:var(--tg-50,#F2F6FB); border-bottom:1px solid var(--border); }
table.pn-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
table.pn-tbl th { background:var(--tg-800,#23395B); color:#fff; text-align:left; padding:7px 12px; font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; }
table.pn-tbl th.num, table.pn-tbl td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.pn-tbl td.per { color:var(--text-muted); font-size:.9em; white-space:nowrap; }
table.pn-tbl td.dt { text-align:center; color:var(--text-muted); font-size:.9em; white-space:nowrap; }
table.pn-tbl th.dt { text-align:center; }

/* ── Chat flotante (widget) — body-level (sobrevive navTo), oculto en móvil ── */
.chatw-fab { position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%; background:var(--tg-800,#23395B); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(15,23,42,.32); z-index:1200; transition:transform .12s, background .12s; }
.chatw-fab:hover { transform:translateY(-2px); background:var(--tg-900,#1E3050); }
.chatw-fab svg { width:25px; height:25px; }
.chatw-fab-badge { position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; border-radius:12px; background:#EF4444; color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--bg,#EDF5FC); }
.chatw-panel { position:fixed; right:22px; bottom:22px; width:336px; height:474px; max-height:calc(100vh - 44px); background:#fff; border-radius:14px; overflow:hidden; z-index:1200; box-shadow:0 18px 50px rgba(15,23,42,.34); display:flex; flex-direction:column; border:1px solid var(--border,#E2E8F0); }
.chatw-head { background:var(--tg-800,#23395B); color:#fff; display:flex; align-items:center; gap:10px; padding:11px 14px; flex:none; }
.chatw-ttl { font-weight:700; flex:1; display:flex; align-items:center; gap:6px; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatw-back, .chatw-x { cursor:pointer; opacity:.9; flex:none; }
.chatw-x { font-size:1.05rem; line-height:1; }
.chatw-body { flex:1; overflow-y:auto; background:#fff; display:flex; flex-direction:column; min-height:0; }
.chatw-list { display:flex; flex-direction:column; }
.chatw-item { display:flex; align-items:center; gap:11px; padding:9px 12px; cursor:pointer; border-bottom:1px solid #F1F5F9; }
.chatw-item:hover { background:var(--tg-50,#F2F6FB); }
.chatw-av { width:38px; height:38px; border-radius:50%; background:var(--blue,#5686C4); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex:none; position:relative; }
.chatw-mid { flex:1; min-width:0; }
.chatw-name { font-weight:600; font-size:.86rem; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.chatw-name .chatw-t { font-weight:400; color:var(--muted,#64748B); font-size:.7rem; flex:none; }
.chatw-snip { color:var(--muted,#64748B); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatw-snip.un { color:var(--text,#1A2233); font-weight:600; }
.chatw-badge { min-width:18px; height:18px; border-radius:10px; background:var(--tg-800,#23395B); color:#fff; font-size:.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; flex:none; }
.chatw-empty { color:var(--muted,#64748B); font-size:.82rem; text-align:center; padding:22px 12px; }
.chatw-msgs { flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:8px; background:#FBFCFE; min-height:0; }
.chatw-msg { max-width:78%; padding:8px 11px; border-radius:13px; font-size:.85rem; line-height:1.35; overflow-wrap:anywhere; }
.chatw-msg.them { align-self:flex-start; background:#EEF2F7; color:var(--text,#1A2233); border-bottom-left-radius:4px; }
.chatw-msg.me { align-self:flex-end; background:var(--tg-800,#23395B); color:#fff; border-bottom-right-radius:4px; }
.chatw-msg .chatw-h { display:block; font-size:.62rem; opacity:.6; margin-top:3px; text-align:right; }
.chatw-adj { font-size:.78rem; opacity:.85; margin-top:3px; }
.chatw-comp { flex:none; display:flex; align-items:center; gap:8px; padding:9px 10px; border-top:1px solid var(--border,#E2E8F0); background:#fff; }
.chatw-comp input { flex:1; border:1px solid var(--border-md,#D9E2EC); border-radius:20px; padding:8px 13px; font:inherit; font-size:.85rem; background:var(--tg-50,#F2F6FB); }
.chatw-send { width:36px; height:36px; border-radius:50%; background:var(--tg-800,#23395B); color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.chatw-send:hover { background:var(--tg-900,#1E3050); }
.chatw-blocked { flex:none; padding:10px 12px; font-size:.8rem; color:var(--muted,#64748B); text-align:center; border-top:1px solid var(--border,#E2E8F0); }
/* puntos de presencia reutilizados (_dotHTML) — el CSS del módulo está scoped a #seccionChat, así que los re-declaro aquí */
.chatw-av .chat-dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; border:2px solid #fff; background:#CBD5E1; }
.chatw-av .chat-dot.on { background:#16A34A; }
.chatw-av .chat-dot.away { background:#D97706; }
.chatw-ttl .chat-dot { width:8px; height:8px; border-radius:50%; background:#CBD5E1; flex:none; }
.chatw-ttl .chat-dot.on { background:#22C55E; }
.chatw-ttl .chat-dot.away { background:#D97706; }
@media (max-width:768px) { .chatw-fab, .chatw-panel { display:none !important; } }
table.pn-tbl td { padding:6px 12px; border-bottom:1px solid var(--border); }
tr.nt-grp td { background:var(--surface-2); font-weight:700; }
tr.nt-sub td:first-child { padding-left:26px; color:var(--sl-700,#293548); }
tr.nt-subtot td { font-weight:700; border-bottom:1px solid var(--border-md); }
tr.nt-tot td { background:var(--tg-800,#23395B); color:#fff; font-weight:800; font-size:.9rem; padding-top:9px; padding-bottom:9px; }
tr.nt-tot td.num { color:#fff; }

/* Histórico de soportes (tabla) */
.hist-tbl .hist-acth { text-align:right; }
.hist-act { text-align:right; white-space:nowrap; }
.hist-btn { border:1px solid var(--border-md); background:var(--surface); border-radius:7px; padding:4px 10px; font-family:inherit; font-size:.76rem; font-weight:600; cursor:pointer; color:var(--sl-700,#293548); }
.hist-btn:hover { background:var(--surface-2); }
.hist-btn.danger { color:var(--mx-todo,#B0433F); border-color:var(--mx-todo,#B0433F); }
.hist-btn.danger:hover { background:var(--mx-todo,#B0433F); color:#fff; }
.sop-anulado td { color:var(--muted); }
.sop-anulado td:nth-child(3) { text-decoration:line-through; }
.pay-badge.anul { background:#F3E8E8; color:var(--mx-todo,#B0433F); border-radius:20px; font-size:.6rem; font-weight:800; padding:1px 7px; }

/* Filtros de la lista principal de Payroll: búsqueda predictiva + periodicidad */
.pay-filtros { display:flex; gap:10px; align-items:center; margin:0 0 12px; flex-wrap:wrap; }
.pay-buscar { flex:1 1 240px; max-width:360px; border:1px solid var(--border-md); border-radius:8px; padding:7px 12px; font-family:inherit; font-size:.85rem; background:var(--surface); color:var(--text); }
.pay-buscar::placeholder { color:var(--muted); }
.pay-buscar:focus { outline:none; border-color:var(--tg-500,#5686C4); box-shadow:0 0 0 3px rgba(86,134,196,.15); }

/* ============================================================
   Candado por inactividad (PIN) — bloqueo.js
   Overlay + teclado tipo teléfono. El chat sigue accesible.
   ============================================================ */
.nexlock-ov {
  position:fixed; inset:0; z-index:9000;
  display:none; align-items:center; justify-content:center;
  background:linear-gradient(160deg,rgba(27,46,77,.62),rgba(15,25,40,.7));
  backdrop-filter:blur(9px) saturate(.85); -webkit-backdrop-filter:blur(9px) saturate(.85);
}
.nexlock-card {
  position:relative; width:340px; max-width:92vw; background:var(--surface);
  border-radius:18px; box-shadow:0 24px 60px rgba(15,25,40,.45);
  padding:26px 26px 20px; text-align:center; animation:nexlockPop .18s ease;
}
@keyframes nexlockPop { from{transform:scale(.94);opacity:.4} to{transform:scale(1);opacity:1} }
.nexlock-x {
  position:absolute; top:12px; right:14px; width:26px; height:26px; line-height:26px;
  border-radius:50%; color:var(--text-muted); font-size:.95rem; cursor:pointer; user-select:none;
}
.nexlock-x:hover { background:var(--surface-2); color:var(--text); }
.nexlock-ic {
  width:54px; height:54px; border-radius:50%; background:var(--tg-50);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--tg-700);
}
.nexlock-h { font-size:1.05rem; font-weight:800; margin:0; color:var(--text); }
.nexlock-s { font-size:.8rem; color:var(--text-muted); margin:5px 0 0; line-height:1.4; }
.nexlock-dots { display:flex; gap:14px; justify-content:center; margin:20px 0 6px; }
.nexlock-dot { width:15px; height:15px; border-radius:50%; border:2px solid var(--border-md); transition:all .12s; }
.nexlock-dot.full { background:var(--tg-700); border-color:var(--tg-700); }
.nexlock-dots.err .nexlock-dot { border-color:var(--danger); }
.nexlock-dots.err { animation:nexlockShake .3s; }
@keyframes nexlockShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
.nexlock-msg { min-height:18px; font-size:.74rem; margin:2px 0 8px; color:var(--text-muted); }
.nexlock-msg.err { color:var(--danger); font-weight:600; }
.nexlock-msg.ok  { color:var(--success); font-weight:700; }
.nexlock-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 2px; }
.nexlock-key {
  height:52px; border:1px solid var(--border); background:var(--surface); border-radius:12px;
  font-family:inherit; font-size:1.3rem; font-weight:600; color:var(--text); cursor:pointer; transition:all .08s;
}
.nexlock-key:hover { background:var(--surface-2); }
.nexlock-key:active { transform:scale(.95); background:var(--tg-50); }
.nexlock-key.ghost { border:none; background:transparent; cursor:default; }
.nexlock-key.act { font-size:.9rem; color:var(--text-muted); }
.nexlock-pass { display:flex; gap:8px; margin:8px 0 2px; }
.nexlock-pass[hidden] { display:none; }
.nexlock-pass input {
  flex:1; border:1px solid var(--border-md); border-radius:10px; padding:9px 12px;
  font-family:inherit; font-size:.85rem; background:var(--surface); color:var(--text);
}
.nexlock-pass input:focus { outline:none; border-color:var(--tg-500,#5686C4); box-shadow:0 0 0 3px rgba(86,134,196,.15); }
.nexlock-passbtn { border:none; background:var(--tg-700); color:#fff; border-radius:10px; padding:0 16px; font-family:inherit; font-weight:700; cursor:pointer; }
.nexlock-passbtn:hover { background:var(--tg-600); }
.nexlock-foot { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:9px; }
.nexlock-forgot { font-size:.72rem; color:var(--text-muted); cursor:pointer; background:none; border:none; font-family:inherit; }
.nexlock-forgot:hover { color:var(--tg-700); text-decoration:underline; }

/* Aviso único de bienvenida para activar las notificaciones de chat */
.nex-push-nudge {
  position:fixed; right:20px; bottom:20px; z-index:8000; width:340px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--tg-600);
  border-radius:12px; box-shadow:0 14px 40px rgba(15,25,40,.24);
  padding:14px 15px; display:grid; grid-template-columns:auto 1fr; gap:10px 12px;
  animation:npnIn .22s ease;
}
@keyframes npnIn { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.nex-push-nudge .npn-ico { font-size:1.4rem; line-height:1; }
.nex-push-nudge .npn-txt { display:flex; flex-direction:column; gap:3px; }
.nex-push-nudge .npn-txt b { font-size:.86rem; color:var(--text); }
.nex-push-nudge .npn-txt span { font-size:.76rem; color:var(--text-muted); line-height:1.35; }
.nex-push-nudge .npn-acc { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px; margin-top:2px; }
.nex-push-nudge .npn-si {
  border:none; background:var(--tg-700); color:#fff; border-radius:8px; padding:7px 16px;
  font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
}
.nex-push-nudge .npn-si:hover { background:var(--tg-600); }
.nex-push-nudge .npn-no {
  border:1px solid var(--border-md); background:var(--surface); color:var(--text-muted); border-radius:8px;
  padding:7px 14px; font-family:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
}
.nex-push-nudge .npn-no:hover { background:var(--surface-2); color:var(--text); }

/* ============================================================
   Bookkeeping — popover de celda (estado + fecha + comentarios)
   Las celdas siguen con iconos ✓/✗/en proceso; el popover se abre al hacer clic.
   ============================================================ */
/* Tooltip al pasar el mouse: SOLO la fecha de conciliación */
.bk-fecha-tip { position:fixed; transform:translate(-50%,-100%); background:#fff; color:var(--text); font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:7px; white-space:nowrap; pointer-events:none; z-index:3200; border:1px solid var(--border-md); box-shadow:0 6px 18px rgba(15,25,40,.18); opacity:0; transition:opacity .1s; }
.bk-fecha-tip.show { opacity:1; }
.bk-fecha-tip::after { content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#fff; }
/* Popover de celda (estilo Payroll) */
.bk-pop { position:fixed; z-index:3000; width:320px; max-width:92vw; background:var(--surface); border:1px solid var(--border-md); border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden; }
.bk-pop-h { display:flex; align-items:center; gap:8px; padding:10px 13px; background:linear-gradient(0deg,var(--surface),var(--tg-50)); border-bottom:1px solid var(--border); }
.bk-pop-h .t { font-weight:700; font-size:.84rem; }
.bk-pop-h .x { margin-left:auto; cursor:pointer; color:var(--text-muted); font-size:.95rem; line-height:1; padding:2px 5px; border-radius:5px; }
.bk-pop-h .x:hover { background:var(--surface-2); color:var(--text); }
.bk-pop-body { padding:12px 13px; }
.bk-pop-fld { margin-bottom:10px; }
.bk-pop-lbl { display:block; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
.bk-sel { width:100%; height:33px; border:1px solid var(--border-md); border-radius:8px; padding:0 10px; font-family:inherit; font-size:.84rem; font-weight:700; background:var(--surface); color:var(--text); cursor:pointer; }
.bk-sel.bk-c-done { border-left:5px solid var(--mx-done,#2F9E74); }
.bk-sel.bk-c-pend { border-left:5px solid var(--mx-todo,#B0433F); }
.bk-sel.bk-c-proc { border-left:5px solid var(--mx-prog,#C0862E); }
.bk-sel.bk-c-na   { border-left:5px solid var(--mx-na,#94A3B8); }
/* Campo de fecha MM/DD/YYYY (componente usdate): texto autoformateado + botón calendario + input nativo oculto */
.usd { position:relative; display:flex; gap:7px; align-items:center; }
.usd-inp { flex:1; width:100%; height:33px; border:1px solid var(--border-md); border-radius:8px; padding:0 10px; font-family:inherit; font-size:.84rem; letter-spacing:.3px; background:var(--surface); color:var(--text); }
.usd-inp::placeholder { color:var(--text-muted); letter-spacing:normal; }
.usd-inp.good { border-color:var(--mx-done,#2F9E74); }
.usd-inp.bad  { border-color:var(--mx-todo,#B0433F); box-shadow:0 0 0 3px rgba(176,67,63,.12); }
.usd-cal { flex:0 0 auto; width:36px; height:33px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-md); border-radius:8px; background:var(--surface-2); color:var(--tg-700); cursor:pointer; }
.usd-cal:hover { background:var(--bg); border-color:var(--text); }
.usd-native { position:absolute; right:0; bottom:0; width:36px; height:33px; opacity:0; pointer-events:none; }
.bk-fecha.req .usd-inp { border-color:var(--mx-todo,#B0433F); box-shadow:0 0 0 3px rgba(176,67,63,.12); }
.bk-req { color:var(--mx-todo,#B0433F); }
.bk-fecha .bk-must { display:none; font-size:.7rem; color:var(--mx-todo,#B0433F); font-weight:600; margin-top:5px; }
.bk-fecha.req .bk-must { display:block; }
/* Botón Guardar del bloque estado + confirmación "Guardado" */
.bk-pop-save { display:flex; align-items:center; gap:10px; margin-top:4px; }
.bk-saved { display:none; align-items:center; gap:4px; color:var(--mx-done,#2F9E74); font-weight:700; font-size:.74rem; }
.bk-saved.show { display:inline-flex; animation:bkSavedPop .25s ease; }
@keyframes bkSavedPop { from{opacity:0; transform:scale(.85)} to{opacity:1; transform:scale(1)} }
.bk-fecha.bk-shake { animation:bkShake .3s ease; }
@keyframes bkShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.bk-pop #bkMenuCmt { border-top:1px solid var(--border); }

/* ══════════════════════════════════════════════════════════
   AUDITORÍAS (Audits) — tabla .grid-tabla (global) + widgets propios
   ══════════════════════════════════════════════════════════ */
#seccionAuditorias .pay-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
#seccionAuditorias .pay-h { font-size:1.2rem; font-weight:800; margin:0; }
#seccionAuditorias .pay-count { font-size:.8rem; color:var(--text-muted); font-weight:600; margin-left:6px; }
#seccionAuditorias .pay-filtros { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
#seccionAuditorias .pay-buscar { height:34px; border:1.5px solid var(--border-md); border-radius:8px; padding:0 12px; font:inherit; font-size:.83rem; background:var(--surface); color:var(--text); min-width:230px; flex:0 1 300px; }
#seccionAuditorias .pay-buscar:focus { outline:none; border-color:var(--tg-500); box-shadow:0 0 0 3px var(--green-ring); }
.aud-badge { display:inline-flex; align-items:center; padding:1px 7px; border-radius:5px; font-size:.65rem; font-weight:700; }
.aud-badge.wc { background:#EAF1FB; color:#2c4670; } .aud-badge.gl { background:#F0ECFB; color:#5b3fa0; }
.aud-due { display:inline-flex; align-items:center; gap:6px; }
.aud-due .sig { width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#CBD5E1; }
.aud-due.red .sig { background:#DC2626; box-shadow:0 0 0 3px #FCEBEB; } .aud-due.red b { color:#DC2626; }
.aud-due.amber .sig { background:#D97706; box-shadow:0 0 0 3px #FDF3E7; }
.aud-due.green .sig { background:#16A34A; box-shadow:0 0 0 3px #E7F6ED; }
.aud-pill { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:20px; font-size:.66rem; font-weight:600; line-height:1.25; border:1px solid transparent; white-space:nowrap; }
.aud-pill .dot { width:6px; height:6px; border-radius:50%; }
.aud-pill.click { cursor:pointer; } .aud-pill.click:hover { box-shadow:0 0 0 2px rgba(86,134,196,.22); }
.aud-pill .aud-cv { font-size:.55rem; opacity:.5; margin-left:1px; }
.aud-pill.s-req { background:var(--surface-2); color:#475569; border-color:var(--border); } .aud-pill.s-req .dot { background:#94A3B8; }
.aud-pill.s-prep { background:#EAF1FB; color:#2c4670; border-color:#D5E2F5; } .aud-pill.s-prep .dot { background:#5686C4; }
.aud-pill.s-sent, .aud-pill.s-result { background:#E7F6ED; color:#0f7a37; border-color:#CBEBD6; } .aud-pill.s-sent .dot, .aud-pill.s-result .dot { background:#16A34A; }
.aud-pill.s-disp { background:#FDF3E7; color:#9a5a06; border-color:#F3DCB8; } .aud-pill.s-disp .dot { background:#D97706; }
.aud-pill.s-closed { background:#EEF2F6; color:#475569; border-color:var(--border); } .aud-pill.s-closed .dot { background:#0f7a37; }
.aud-owner { display:inline-flex; align-items:center; gap:6px; }
.aud-owner .av { width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:.5rem; font-weight:700; color:#fff; flex:0 0 16px; }
.aud-res { font-variant-numeric:tabular-nums; font-weight:600; }
.aud-res.add { color:#DC2626; } .aud-res.ref { color:#16A34A; } .aud-res.pend { color:var(--text-muted); font-weight:500; }
.aud-icd { cursor:pointer; color:var(--text-muted); font-size:.82rem; display:inline-flex; align-items:center; gap:3px; }
.aud-icd .n { font-weight:700; font-size:.66rem; }
.aud-acts { display:flex; gap:2px; justify-content:center; }
.aud-iact { width:22px; height:20px; border:none; background:none; border-radius:4px; cursor:pointer; color:var(--text-muted); font-size:.85rem; display:grid; place-items:center; }
.aud-iact:hover { background:var(--surface-2); color:var(--tg-800); }
.aud-iact.bill:hover { color:#16A34A; background:#E7F6ED; }
.aud-iact.billed { color:#16A34A; cursor:default; } .aud-iact[disabled] { opacity:.45; cursor:default; }
/* popover de estado (se agrega al body → sin scope de sección) */
.aud-stpop { position:fixed; z-index:80; background:var(--surface); border:1px solid var(--border-md); border-radius:10px; box-shadow:var(--shadow-lg); padding:5px; min-width:190px; }
.aud-stpop .hd { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; padding:6px 8px 5px; }
.aud-stpop .opt { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:.78rem; color:var(--text); }
.aud-stpop .opt:hover { background:var(--surface-2); }
.aud-stpop .opt.on { font-weight:700; } .aud-stpop .opt.on::after { content:'✓'; margin-left:auto; color:#16A34A; }
.aud-stpop .opt .dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
/* separador de sección dentro de un formulario (reutilizable) */
.form-sec { font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--tg-800); margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:7px; }
.form-sec .hint { margin-left:auto; font-weight:500; color:var(--text-muted); text-transform:none; letter-spacing:0; font-size:.7rem; }
/* grupo de monto ($ + input) en el formulario de auditoría */
.aud-amt { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.aud-amt:focus-within { border-color:var(--tg-500); background:var(--surface); box-shadow:0 0 0 3px var(--green-ring); }
.aud-amt > span { padding:0 9px; color:var(--text-muted); font-weight:600; font-size:.83rem; border-right:1.5px solid var(--border); align-self:stretch; display:grid; place-items:center; }
.aud-amt input { border:none !important; box-shadow:none !important; background:none !important; flex:1; min-width:0; }
.aud-newhint { margin-top:14px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; font-size:.78rem; color:var(--text-muted); }
#modalAuditoria .aud-cmt { margin-top:2px; }
#modalAuditoria .pcmt-n { color:var(--text-muted); font-weight:600; }
#modalAuditoria #adCmtList { margin-top:6px; }
/* Adjuntos (A5) — chips estilo chat/To-Do */
#modalAuditoria .aud-files { display:flex; flex-direction:column; gap:7px; }
#modalAuditoria .aud-file { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
#modalAuditoria .aud-file:hover { border-color:var(--tg-500); }
.aud-file-ic { width:30px; height:30px; border-radius:6px; display:grid; place-items:center; font-size:.53rem; font-weight:800; color:#fff; flex:0 0 30px; letter-spacing:.02em; }
.aud-file-ic.pdf { background:#DC2626; } .aud-file-ic.xls { background:#16A34A; } .aud-file-ic.img { background:#7C3AED; } .aud-file-ic.doc { background:#2563EB; } .aud-file-ic.gen { background:#64748B; }
.aud-file-info { flex:1; min-width:0; }
.aud-file-nm { font-size:.8rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aud-file-meta { font-size:.68rem; color:var(--text-muted); margin-top:1px; }
.aud-file-act { width:26px; height:26px; border:none; background:none; border-radius:6px; color:var(--text-muted); cursor:pointer; display:grid; place-items:center; flex:0 0 26px; text-decoration:none; }
.aud-file-act:hover { background:var(--surface-2); color:var(--tg-800); }
.aud-file-act.rm:hover { color:#DC2626; background:#FCEBEB; }
.aud-file-act svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.9; }
.aud-file-empty { font-size:.78rem; color:var(--text-muted); padding:2px 0; }
#modalAuditoria .aud-drop { display:flex; align-items:center; justify-content:center; gap:7px; border:1.5px dashed var(--border-md); border-radius:8px; padding:11px; color:var(--text-muted); font-size:.78rem; cursor:pointer; margin-top:7px; transition:.15s; }
#modalAuditoria .aud-drop:hover { border-color:var(--tg-500); color:var(--tg-800); background:var(--tg-50, #F7FAFD); }
#modalAuditoria .aud-drop.busy { opacity:.6; pointer-events:none; }