@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-display: 'Inter', system-ui, -apple-system, sans-serif;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-sm-plus: 13px;
  --font-size-md: 14px;
  --font-size-md-plus: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-module: 28px;
  --font-size-kpi: 38px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-compact: 1.3;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-soft: -0.015em;
  --tracking-base: 0;
  --tracking-wide: 0.07em;

  --text-primary: #0f172a;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-soft: #9ca3af;

  /* Dark slate como acento principal — feel premium, no blue gimmick */
  --primary: #1e293b;
  --primary-hover: #0f172a;
  --primary-soft: #f1f5f9;
  --primary-deep: #0f172a;

  --accent: #4f46e5;
  --accent-soft: #eef2ff;

  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --teal: #0891b2;

  --bg: #f9fafb;
  --panel: #ffffff;
  --panel-2: #f9fafb;
  --panel-3: #f3f4f6;

  --sidebar-bg: #111827;
  --sidebar-bg-soft: #1f2937;
  --sidebar-text: #f9fafb;
  --sidebar-text-soft: #9ca3af;

  --text: var(--text-primary);
  --text-faint: var(--text-soft);

  --line: #e5e7eb;
  --line-strong: #d1d5db;

  /* Sombras casi planas — profundidad sutil, no dramática */
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);

  /* Radios más contenidos — enterprise look */
  --radius-xl: 12px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background: #ffffff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
p,
span,
small,
label,
input,
select,
textarea,
button,
.subtitle,
.soft,
.message,
td,
th,
li,
a {
  font-family: var(--font-family-base);
}

input,
select,
textarea,
button {
  font: inherit;
}

.hidden,
#loginWrap.hidden,
#dashboard.hidden,
#bootScreen.hidden,
.login-screen.hidden,
.dashboard.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================
   BASE TYPOGRAPHY
========================= */

h1,
h2,
h3,
.brand-title,
.kpi-card strong,
.workspace-title,
.module-nav-title,
.section-title-wrap h4,
.employee-header h2,
.employee-header-card h2,
.employee-form-title-block h3,
.personnel-subcard h5 {
  margin: 0;
  letter-spacing: var(--tracking-soft);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-module);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-compact);
}

h3 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-compact);
}

.subtitle {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: var(--font-size-md-plus);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

.soft {
  color: var(--text-secondary);
  margin: 0;
}

.tiny {
  font-size: var(--font-size-sm-plus);
}

.eyebrow {
  margin: 0 0 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

/* =========================
   BACKGROUND BLURS
========================= */

.bg-blur {
  position: fixed;
  border-radius: 999px;
  filter: blur(110px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.blur-a {
  width: 280px;
  height: 280px;
  top: -90px;
  left: -90px;
  background: rgba(37, 99, 235, 0.45);
}

.blur-b {
  width: 320px;
  height: 320px;
  right: -110px;
  bottom: -110px;
  background: rgba(14, 165, 164, 0.3);
}

/* =========================
   LOGIN
========================= */

.login-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-image: url("./assets/login-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 68, 0.14);
  z-index: 0;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  padding: 28px 30px 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.75);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.login-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 22px;
}

.logo-login {
  width: 250px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.login-header {
  margin-bottom: 22px;
}

/* =========================
   APP LAYOUT
========================= */

.app-shell {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #ffffff;
}

.dashboard {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  column-gap: 0;
  row-gap: 0;
  width: 100%;
  height: 100%;
  background: #f1f5f9;
  overflow: visible;
}

.dashboard > .topbar-pro {
  grid-area: topbar;
}

.dashboard > .sidebar {
  grid-area: sidebar;
}

.dashboard > .main-panel {
  grid-area: main;
}

.main-panel {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 14px 16px 12px 16px;
  box-sizing: border-box;
}

/* =========================
   SIDEBAR
========================= */

.sidebar {
  width: 280px;
  min-width: 280px;
  background: linear-gradient(180deg, #0f172a 0%, #111c31 100%);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  border-radius: 0;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-self: stretch;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-sidebar {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  color: white;
  font-size: 1.4rem;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
  overflow: hidden;
  flex-shrink: 0;
}

.brand-logo.small {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1rem;
}

.brand-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sidebar-text);
  text-transform: uppercase;
}

.brand-subtitle {
  margin: 4px 0 0;
  color: var(--sidebar-text-soft);
  font-size: 0.9rem;
  font-weight: 500;
}

.logo-e {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.03em;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.sidebar-user,
.sidebar-user-card,
.user-summary,
.profile-summary {
  display: none !important;
}

.sidebar-nav,
#moduleNav {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.module-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.035);
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--sidebar-text);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.module-nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);
}

.module-nav-item.active {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(96, 165, 250, 0.32);
}

.module-nav-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.module-nav-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}

.module-nav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.module-nav-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sidebar-text);
}

.module-nav-caret {
  font-size: 0.9rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.18s ease;
  margin-left: 8px;
  flex-shrink: 0;
}

.module-nav-caret.open {
  transform: rotate(180deg);
}

.submodule-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 8px 18px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.submodule-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.74);
  transition: background 0.18s ease, color 0.18s ease;
}

.submodule-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
}

.submodule-nav-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.submodule-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}

.submodule-nav-item.active .submodule-dot {
  background: #ffffff;
}

.submodule-label {
  font-size: 0.88rem;
  font-weight: 500;
}

.sidebar-footer {
  margin-top: auto;
}

/* =========================
   TOPBAR
========================= */

.topbar-pro {
  background: #ffffff;
  border: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 0;
  padding: 0 16px;
  backdrop-filter: blur(16px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  height: 56px;
  min-height: 0;
  overflow: visible;
  z-index: 100;
  position: relative;
}

.topbar:not(.topbar-pro) {
  display: none !important;
}

.topbar-center.topbar-inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.topbar-center.topbar-inline::-webkit-scrollbar {
  display: none;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
}

.topbar-item span {
  font-weight: 700;
  color: var(--text-soft);
  flex-shrink: 0;
}

.topbar-item strong {
  color: var(--text);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-item-company {
  flex: 0 1 230px;
  min-width: 120px;
}

.topbar-item-contract {
  flex: 0 1 190px;
  min-width: 120px;
}

.topbar-item-municipality {
  flex: 2 1 520px;
  min-width: 220px;
}

.topbar-separator {
  color: #cbd5e1;
  font-size: 0.9rem;
  flex-shrink: 0;
}

#topCompany,
#topContract,
#topMunicipality {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#topMunicipality {
  max-width: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.search {
  width: 230px;
  max-width: 100%;
  padding: 9px 12px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  outline: none;
  min-width: 0;
}

.search::placeholder {
  color: var(--text-faint);
}

.search:focus {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.notif {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.user-menu {
  cursor: default;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
}

#topUser {
  font-weight: 600;
  color: var(--text);
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 140px;
}

#companyValue,
#contractValue,
#municipalityValue,
.summary-grid,
.summary-cards,
.dashboard-summary,
.dashboard-cards,
.stats-row,
.resume-summary-row {
  display: none !important;
}

/* =========================
   WORKSPACE / CARDS
========================= */

.workspace,
#workspace {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  flex: 1;
  box-shadow: none;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.workspace-panel {
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: visible;
}

.submodule-content {
  min-width: 0;
  overflow: visible;
}

.summary-card,
.panel-section,
.workspace-panel,
.module-card,
.result-box,
.admin-box,
.admin-user-card,
.info-card,
.personnel-item,
.card,
.personnel-master-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
}

.panel-section,
.info-card,
.card,
.admin-box,
.admin-user-card,
.summary-card,
.personnel-master-card {
  padding: 20px;
}

.workspace-empty {
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.workspace-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}

.workspace-subtitle {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 0.94rem;
  color: var(--text-soft);
  font-weight: 500;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.compact {
  align-items: center;
}

/* =========================
   GRIDS
========================= */

.dashboard-stats,
.personnel-grid,
.training-grid,
.report-grid,
.resume-list,
.resume-docs,
.attendance-list,
.report-list,
.report-metrics,
.main-grid,
.kpi-grid,
.coverage-grid,
.workspace-meta,
.workspace-actions {
  display: grid;
  gap: 14px;
}

.workspace-meta,
.workspace-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.personnel-grid,
.training-grid,
.report-grid,
.main-grid {
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

.coverage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.resume-list,
.attendance-list,
.report-list {
  grid-template-columns: 1fr;
  margin-top: 18px;
}

.resume-docs,
.report-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}

.kpi-card {
  padding: 20px;
  border-radius: 16px;
  color: white;
  border: 1px solid rgba(59, 130, 246, 0.12);
  background: linear-gradient(135deg, #1d4ed8, #0f172a);
}

.kpi-card span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
}

.kpi-card strong {
  display: block;
  font-size: 2rem;
  margin-top: 6px;
}

.info-card h3,
.card h3 {
  margin-bottom: 10px;
}

.info-card p,
.card p {
  margin: 0 0 8px;
  color: var(--text-soft);
  line-height: 1.6;
}

.personnel-item {
  padding: 16px;
  border-radius: 18px;
}

.personnel-item strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.personnel-item p {
  margin: 0 0 6px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* =========================
   FORMS
========================= */

.form-grid,
.figma-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.form-grid.two-cols,
.admin-grid,
.personnel-form,
.resume-filter-form,
.training-form,
.attendance-form,
.report-form,
.admin-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid-1 {
  grid-template-columns: 1fr;
}

.form-grid-2,
.figma-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid-3,
.figma-grid-3,
.form-grid-4,
.form-grid-5,
.form-grid-6,
.figma-grid-4,
.figma-grid-5,
.figma-grid-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid-date-5 {
  grid-template-columns: 56px 56px 80px 1fr 1fr;
  align-items: end;
}

.form-grid-date-6 {
  grid-template-columns: 56px 56px 80px 0.9fr 1.1fr 1.1fr;
  align-items: end;
}

.form-grid-date-5 input,
.form-grid-date-6 input {
  padding: 10px 8px !important;
  text-align: center;
}

.form-grid-date-5 label span,
.form-grid-date-6 label span {
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full,
.wide,
.figma-full {
  grid-column: 1 / -1;
}

.wide-2,
.figma-span-2 {
  grid-column: span 2;
}

label {
  display: grid;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.input-error {
  border-color: #ef4444 !important;
  background: #fff1f2 !important;
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important;
}

/* =========================
   BUTTONS
========================= */

.btn,
button {
  border: none;
  cursor: pointer;
  transition: 0.18s ease;
  font-weight: 700;
}

.btn:hover,
button:hover {
  transform: translateY(-1px);
}

.btn-primary,
.admin-actions button,
button[type="submit"] {
  padding: 14px 18px;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover,
.admin-actions button:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--primary-hover), #2563eb);
}

.btn-secondary {
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn-full {
  width: 100%;
}

.btn-row {
  padding: 8px 12px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.message {
  min-height: 22px;
  margin: 0;
  color: var(--danger);
  font-weight: 600;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================
   TABLES
========================= */

table,
thead,
tbody,
tr,
td,
th {
  font-family: "Inter", sans-serif;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  background: #f8fafc;
}

th {
  font-size: 12px;
  color: #64748b;
  text-align: left;
  padding: 12px 14px;
  font-weight: 700;
}

td {
  padding: 14px;
  border-bottom: 1px solid #edf2f7;
  color: var(--text);
  font-size: 0.92rem;
}

tr:hover {
  background: #fbfdff;
}

.personnel-master-module,
.personnel-master-card {
  width: 100%;
}

.personnel-master-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.personnel-master-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.personnel-toolbar {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(160px, 1fr)) auto;
  gap: 12px;
  margin-bottom: 16px;
}

.personnel-toolbar-search {
  flex: 1 1 180px;
  min-width: 160px;
}

.personnel-table-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: 0.88rem;
}

.personnel-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
}

.personnel-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}

.personnel-table thead th {
  position: sticky;
  top: 0;
  background: #1e293b;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
  border-bottom: 2px solid #334155;
  white-space: nowrap;
}

.personnel-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf2f7;
  color: var(--text);
  font-size: 0.9rem;
  vertical-align: middle;
}

.personnel-table tbody tr:hover {
  background: #fbfdff;
}

.personnel-table-empty {
  padding: 24px 6px;
  text-align: center;
  color: var(--text-soft);
}

.personnel-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================
   PERSONNEL DASHBOARD CARDS
========================= */

.personnel-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.personnel-dashboard-card {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.personnel-dashboard-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 6px;
}

.personnel-dashboard-card strong {
  font-size: 24px;
  color: #0f172a;
}

.personnel-dashboard-card.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.personnel-dashboard-card.warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.personnel-dashboard-card.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

/* =========================
   BADGES / STATUS
========================= */

.pill {
  display: inline-flex;
  align-items: center;
  margin: 4px 6px 0 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #15803d;
  border: 1px solid #bbf7d0;
  font-size: 0.78rem;
  font-weight: 600;
}

.status,
.status-chip,
.role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.status.active {
  background: #dcfce7;
  color: #166534;
}

.status-complete,
.status-chip.success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.status-incomplete,
.status-chip.danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-review,
.status-chip.warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.role-offer {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.role-extra {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

/* =========================
   RESULT / ADMIN
========================= */

.result-box {
  margin-top: 16px;
  padding: 18px;
  border-left: 4px solid var(--primary);
}

.result-box strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.result-box p {
  margin: 0;
  color: var(--text-soft);
}

.result-box.denied {
  border-left-color: var(--danger);
}

.admin-grid {
  grid-template-columns: 0.95fr 1.05fr;
  margin-top: 16px;
}

.admin-box {
  padding: 20px;
}

.admin-user-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-users {
  display: grid;
  gap: 12px;
  max-height: 620px;
  overflow: auto;
  margin-top: 14px;
  padding-right: 4px;
}

.admin-users::-webkit-scrollbar {
  width: 8px;
}

.admin-users::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* =========================
   FORMULARIO CREAR EMPLEADO
========================= */

.personnel-grid {
  grid-template-columns: 1fr;
}

.personnel-figma-shell-dark,
.employee-form-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 110px) !important;
  overflow: hidden !important;
}

.personnel-form-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 20px !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.employee-form-title-block {
  display: none !important;
}

.employee-header,
.employee-header-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 12px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.employee-header-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.emp-name-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #10233f !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
}

.emp-doc-subtitle {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.emp-back-btn {
  flex-shrink: 0 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.emp-back-btn:hover {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

.form-scroll-area {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.employee-header h2,
.employee-header-card h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #10233f;
  text-transform: uppercase;
}

.employee-header p,
.employee-header-card p {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.employee-steps {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 4px !important;
  margin-bottom: 14px;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

.employee-step-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 4px !important;
  border-radius: 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  color: #64748b;
  overflow: hidden;
}

.employee-step-tab.active {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(30,58,138,0.12);
  color: #1e40af;
}

.employee-step-tab:hover:not(.active):not(:disabled) {
  background: rgba(255,255,255,0.7);
  color: #334155;
}

.employee-step-tab.disabled,
.employee-step-tab:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.employee-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.employee-step-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.employee-step-label {
  font-size: 8.5px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

.employee-step-tab.active .employee-step-label {
  color: #1e40af;
}
.employee-step-tab.active .employee-step-icon svg {
  stroke: #1e40af;
}
.tab-saved-check {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  line-height: 1;
  margin-top: 2px;
  text-align: center;
}

.tab-progress {
  margin-left: 4px !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
}

.personnel-form-v2,
.personnel-form-figma {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.personnel-section,
.figma-card-section {
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.personnel-section-soft,
.figma-card-section-soft {
  background: #f8fafc;
}

.section-title-wrap,
.personnel-figma-shell-dark .figma-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.section-title-wrap > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-title-wrap h4,
.personnel-figma-shell-dark .figma-section-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #10233f;
}

.section-header p,
.personnel-form-v2 label span,
.subsection-title,
.section-helper-text,
.personnel-figma-shell-dark .figma-section-head p {
  color: #5b6b82;
}

.section-helper-text {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
}

.section-badge,
.personnel-figma-shell-dark .figma-section-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2f8;
  color: #5b6b82;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-soft {
  background: #eef3f7;
  color: #5b697c;
}

.subsection-title,
.personnel-figma-shell-dark .figma-subtitle {
  margin: 18px 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
}

.personnel-form-v2 label,
.personnel-figma-shell-dark .personnel-form-figma label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.personnel-form-v2 label span,
.personnel-figma-shell-dark .personnel-form-figma label span {
  font-size: 12px;
  font-weight: 600;
  color: #5f6f86;
}

.personnel-form-v2 input,
.personnel-form-v2 select,
.personnel-form-v2 textarea,
.personnel-figma-shell-dark .personnel-form-figma input,
.personnel-figma-shell-dark .personnel-form-figma select,
.personnel-figma-shell-dark .personnel-form-figma textarea {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  background: #f9fbff;
  color: #15263f;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: none;
}

.personnel-form-v2 textarea,
.personnel-figma-shell-dark .personnel-form-figma textarea {
  min-height: 110px;
  resize: vertical;
}

.personnel-form-v2 input:focus,
.personnel-form-v2 select:focus,
.personnel-form-v2 textarea:focus,
.personnel-figma-shell-dark .personnel-form-figma input:focus,
.personnel-figma-shell-dark .personnel-form-figma select:focus,
.personnel-figma-shell-dark .personnel-form-figma textarea:focus {
  border-color: #5c7cfa;
  box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15);
  background: #ffffff;
}

.personnel-figma-shell-dark .personnel-form-figma input[readonly] {
  background: #eef2f8;
  color: #475569;
}

.personnel-form-actions,
.figma-form-actions,
.personnel-figma-shell-dark .figma-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
  padding-top: 6px;
}

.primary-soft-btn,
.figma-btn,
.personnel-figma-shell-dark .figma-btn-primary {
  min-height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.primary-soft-btn:hover,
.figma-btn:hover,
.personnel-figma-shell-dark .figma-btn-primary:hover {
  background: var(--primary-hover);
  opacity: 0.98;
  transform: translateY(-1px);
}

.figma-btn-secondary {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  border: 1px solid #d7e0ea;
  box-shadow: none;
}

.checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fafbfe;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: auto;
  padding: 0;
  margin: 0;
}

.checkbox-row span {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.checkbox-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.personnel-subcard {
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fafbfe;
  padding: 14px;
  margin-top: 18px;
}

.personnel-subcard h5 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
}

.personnel-note-box {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #b9d0fb;
  border-radius: 10px;
  background: #edf4ff;
  color: #24427c;
  font-size: 13px;
}

.study-card {
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  background: #ffffff;
}

.study-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* =========================
   DOCUMENTOS REQUERIDOS
========================= */

.required-docs-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.required-docs-panel h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.required-doc-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.required-doc-item.ok {
  color: #16a34a;
}

.required-doc-item.missing {
  color: #dc2626;
}

.compliance-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* =========================
   BOOT SCREEN
========================= */

.boot-screen {
  min-height: calc(100vh - 32px);
  display: grid;
  place-items: center;
}

.boot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px;
}

.boot-logo {
  width: 140px;
  height: auto;
  display: block;
}

.boot-text {
  margin: 0;
  color: var(--text-soft);
  font-weight: 600;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1280px) {
  .personnel-dashboard-cards {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 1200px) {
  .topbar-pro {
    padding: 12px 14px;
  }

  .search {
    width: 190px;
  }

  .topbar-item-company {
    flex-basis: 180px;
  }

  .topbar-item-contract {
    flex-basis: 160px;
  }

  .topbar-item-municipality {
    flex-basis: 240px;
  }

  .form-grid-3,
  .form-grid-4,
  .form-grid-5,
  .form-grid-6,
  .figma-grid-3,
  .figma-grid-4,
  .figma-grid-5,
  .figma-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid-date-5 {
    grid-template-columns: 48px 48px 72px 1fr 1fr;
  }

  .form-grid-date-6 {
    grid-template-columns: 48px 48px 72px 1fr 1fr 1fr;
  }

  .personnel-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    width: calc(100% - 20px);
    margin: 10px auto;
  }

  .dashboard {
    grid-template-columns: 1fr;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    min-height: auto;
  }

  .main-panel {
    padding-left: 0;
    padding-right: 0;
  }

  .personnel-figma-shell-dark .figma-section-head,
  .section-title-wrap {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .figma-grid-2,
  .figma-grid-3,
  .figma-grid-4,
  .figma-grid-5,
  .figma-grid-6,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4,
  .form-grid-5,
  .form-grid-6,
  .form-grid-date-5,
  .form-grid-date-6 {
    grid-template-columns: 1fr;
  }

  .figma-span-2,
  .wide-2 {
    grid-column: auto;
  }

  .figma-form-actions,
  .personnel-figma-shell-dark .figma-form-actions,
  .personnel-form-actions {
    flex-direction: column;
  }

  .figma-btn,
  .primary-soft-btn,
  .figma-btn-secondary,
  .employee-form-shell .primary-soft-btn {
    width: 100%;
    min-width: 0;
  }

  .employee-header h2,
  .employee-header-card h2 {
    font-size: 22px;
  }

  .employee-header p,
  .employee-header-card p {
    font-size: 13px;
  }

  .employee-steps {
    gap: 6px;
  }

  .employee-steps span,
  .employee-step-tab {
    font-size: 10px !important;
    padding: 0 6px !important;
  }
}

@media (max-width: 900px) {
  .workspace-meta,
  .workspace-actions,
  .dashboard-stats,
  .admin-grid,
  .form-grid.two-cols,
  .personnel-form,
  .resume-filter-form,
  .training-form,
  .attendance-form,
  .report-form,
  .admin-user-form,
  .personnel-grid,
  .training-grid,
  .report-grid,
  .resume-docs,
  .report-metrics,
  .main-grid,
  .kpi-grid,
  .coverage-grid {
    grid-template-columns: 1fr;
  }

  .section-head,
  .admin-user-head,
  .personnel-master-header {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-pro {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .topbar-center.topbar-inline {
    width: 100%;
    padding-bottom: 4px;
  }

  .topbar-item-company,
  .topbar-item-contract,
  .topbar-item-municipality {
    flex: 0 0 auto;
    min-width: 220px;
  }

  .login-card,
  .panel-section,
  .sidebar,
  .workspace-panel,
  .workspace,
  .personnel-figma-shell-dark,
  .personnel-form-card {
    padding: 18px;
  }

  .submodule-list {
    margin-left: 12px;
    padding-left: 10px;
  }

  .module-nav-title {
    font-size: 0.92rem;
  }

  .submodule-label {
    font-size: 0.86rem;
  }

  .personnel-master-actions {
    width: 100%;
  }

  .personnel-master-actions .btn {
    width: 100%;
  }

  .personnel-toolbar {
    grid-template-columns: 1fr;
  }

  .personnel-dashboard-cards {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 820px) {
  .employee-header,
  .employee-header-card,
  .personnel-section,
  .figma-card-section {
    padding: 16px;
  }

  .employee-header h2,
  .employee-header-card h2 {
    font-size: 18px;
  }

  .employee-steps {
    border-radius: 10px;
  }

  .employee-steps span,
  .employee-step-tab {
    min-height: 28px;
  }
}

@media (max-width: 768px) {
  .form-grid,
  .figma-grid {
    grid-template-columns: 1fr !important;
  }

  .personnel-dashboard-cards {
    grid-template-columns: 1fr;
  }

  .search {
    width: 100%;
  }
}

/* =========================================================
   REDISEÑO VISUAL PREMIUM EMPIRIA - OVERRIDE FINAL
========================================================= */

body {
  background: #f4f7fb !important;
}

.app-shell {
  width: calc(100% - 48px) !important;
  margin: 24px auto !important;
  background: transparent !important;
}

.dashboard {
  background: transparent !important;
  gap: 24px !important;
}

.sidebar {
  background: linear-gradient(180deg, #071225 0%, #0f172a 100%) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
}

.module-nav-item {
  background: transparent !important;
  border-radius: 16px !important;
  padding: 14px 14px !important;
}

.module-nav-item.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35) !important;
}

.topbar-pro {
  border-radius: 28px !important;
  min-height: 82px !important;
  padding: 18px 22px !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}

.personnel-master-card,
.workspace-panel,
.info-card,
.card {
  border-radius: 26px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
}

.personnel-master-header {
  padding-bottom: 18px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.personnel-master-header h3,
.personnel-master-header h2 {
  font-size: 22px !important;
  color: #0f172a !important;
}

.personnel-master-header p {
  font-size: 14px !important;
  color: #64748b !important;
}

.personnel-toolbar {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  padding: 14px !important;
}

.personnel-toolbar input,
.personnel-toolbar select,
.search {
  background: #ffffff !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 14px !important;
  height: 44px !important;
}

.personnel-dashboard-cards {
  grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
  gap: 14px !important;
}

.personnel-dashboard-card {
  border-radius: 20px !important;
  padding: 18px !important;
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
}

.personnel-dashboard-card span {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.personnel-dashboard-card strong {
  font-size: 28px !important;
  font-weight: 800 !important;
}

.personnel-dashboard-card.success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.personnel-dashboard-card.warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

.personnel-dashboard-card.danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

.personnel-table-wrap {
  border-radius: 22px !important;
  border: 1px solid #e2e8f0 !important;
}

.personnel-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.personnel-table thead th {
  background: #1e293b !important;
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  border-bottom: 2px solid #334155 !important;
}

.personnel-table tbody td {
  padding: 18px 16px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.personnel-table tbody tr:hover {
  background: #f8fbff !important;
}

.btn-primary {
  border-radius: 14px !important;
  padding: 13px 20px !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28) !important;
}

.btn-secondary {
  border-radius: 14px !important;
  padding: 13px 18px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ef !important;
}

.btn-row {
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ef !important;
  color: #0f172a !important;
}

/* Colored button variants must override the white .btn-row reset */
.btn-primary.btn-row {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
}
.btn-primary.btn-row:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af) !important; }
.btn-danger.btn-row {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}
.btn-danger.btn-row:hover { background: #b91c1c !important; }

/* PDF inline viewer modal */
.pdf-preview-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.88);
  display: flex; flex-direction: column;
  animation: fadeIn 0.15s ease;
}
.pdf-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: #1e293b; color: #f1f5f9; gap: 12px; flex-shrink: 0;
}
.pdf-preview-title { font-size: 14px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-preview-close { background: rgba(255,255,255,0.12); border: none; color: #f1f5f9; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600; }
.pdf-preview-close:hover { background: rgba(255,255,255,0.22); }
.pdf-preview-frame { flex: 1; border: none; width: 100%; min-height: 0; }
.pdf-preview-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; flex:1; color:#cbd5e1; }

.role-chip,
.status-chip {
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.main-panel {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* =========================================================
   GESTIÓN DEL PERSONAL - REDISEÑO PREMIUM REAL
========================================================= */

.personnel-premium-module {
  width: 100%;
}

.personnel-premium-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.personnel-premium-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 0 22px;
  border-bottom: 1px solid #e5e7eb;
}

.personnel-premium-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.personnel-premium-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.personnel-premium-hero p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

.personnel-premium-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.personnel-premium-summary {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.premium-metric {
  min-height: 118px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 18px;
  background: #ffffff;
}

.premium-metric span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-metric strong {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.premium-metric small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.premium-metric.main {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  border-color: transparent;
}

.premium-metric.main span,
.premium-metric.main small {
  color: rgba(255, 255, 255, 0.72);
}

.premium-metric.main strong {
  color: #ffffff;
}

.premium-metric.success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.premium-metric.warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.premium-metric.danger,
.premium-metric.danger-soft {
  background: #fef2f2;
  border-color: #fecaca;
}

.personnel-premium-alerts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #f8fafc;
}

.personnel-premium-alerts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #eef2f7;
}

.personnel-premium-alerts span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.personnel-premium-alerts strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.personnel-premium-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.personnel-toolbar-search {
  flex: 2 1 0;
  min-width: 0;
}

.personnel-premium-filters select {
  flex: 1 1 0;
  min-width: 0;
}

.personnel-premium-filters input,
.personnel-premium-filters select {
  height: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  font-size: 11px;
  padding: 0 6px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personnel-premium-table-card {
  margin-top: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}

.personnel-table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.personnel-table-top h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.personnel-table-top p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.personnel-table-top span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.premium-table-wrap {
  border: none !important;
  border-radius: 0 !important;
  height: calc(100vh - 260px);
  min-height: 300px;
  overflow-y: scroll;
  overflow-x: auto;
}

.premium-table-wrap .personnel-table thead th {
  background: #1e293b !important;
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  border-bottom: 2px solid #334155 !important;
}

.premium-table-wrap .personnel-table tbody td {
  padding: 17px 16px !important;
  font-size: 14px !important;
}

.personnel-name-cell {
  font-weight: 700;
  color: #0f172a;
}

.premium-table-wrap .personnel-table tbody tr:hover {
  background: #f8fbff !important;
}

.premium-table-wrap .btn-row {
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

@media (max-width: 1200px) {
  .personnel-premium-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .personnel-premium-alerts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .personnel-premium-hero {
    flex-direction: column;
  }

  .personnel-premium-actions {
    width: 100%;
  }

  .personnel-premium-actions .btn {
    width: 100%;
  }

  .personnel-premium-summary,
  .personnel-premium-alerts {
    grid-template-columns: 1fr;
  }

}

/* AJUSTE PREMIUM 2 - MÁS LIMPIO Y ELEGANTE */

.personnel-premium-card {
  padding: 28px !important;
  border-radius: 32px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.personnel-premium-summary {
  grid-template-columns: 1.15fr repeat(4, 0.9fr) !important;
}

.premium-metric {
  min-height: 96px !important;
  padding: 16px !important;
  border-radius: 18px !important;
}

.premium-metric strong {
  font-size: 30px !important;
}

.personnel-premium-alerts {
  padding: 10px !important;
  border-radius: 16px !important;
}

.personnel-premium-filters {
  margin-top: 12px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  flex-wrap: nowrap !important;
}

.btn-icon-only {
  flex: 0 0 40px;
  width: 40px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.personnel-premium-table-card {
  border-radius: 22px !important;
}

.premium-table-wrap .personnel-table tbody td {
  padding: 20px 16px !important;
}

.personnel-table-top {
  background: #fbfdff !important;
}

.sidebar {
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
}

.btn-primary {
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24) !important;
}

/* =========================================================
   PANEL PRO DOCUMENTOS EMPIRIA
========================================================= */

.documents-audit-module {
  width: 100%;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.documents-audit-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-sizing: border-box;
}

.documents-audit-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.documents-audit-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.documents-audit-hero p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.documents-audit-summary {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr repeat(2, 0.8fr);
  gap: 10px;
  margin-top: 14px;
  flex-shrink: 0;
}

.documents-audit-score,
.documents-audit-status,
.documents-audit-mini {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 10px 16px;
  background: #ffffff;
}

.documents-audit-score {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  border-color: transparent;
}

.documents-audit-score span,
.documents-audit-score small {
  color: rgba(255, 255, 255, 0.75);
}

.documents-audit-score strong {
  color: #ffffff;
}

.documents-audit-score span,
.documents-audit-status span,
.documents-audit-mini span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.documents-audit-status span,
.documents-audit-mini span {
  color: #64748b;
}

.documents-audit-score strong,
.documents-audit-status strong,
.documents-audit-mini strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.documents-audit-status small,
.documents-audit-score small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}

.documents-audit-status.success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.documents-audit-status.warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.documents-audit-status.danger {
  background: #fef2f2;
  border-color: #fecaca;
}

.documents-upload-card,
.documents-checklist-card {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  overflow: hidden;
}

.documents-upload-card {
  padding: 16px 20px;
  flex-shrink: 0;
}

.documents-checklist-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.documents-upload-card h3,
.documents-checklist-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.documents-upload-card p,
.documents-checklist-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.documents-upload-form {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
}

.documents-upload-form input,
.documents-upload-form select {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
}

.documents-checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fbfdff;
  flex-shrink: 0;
}

.documents-checklist-head span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.documents-checklist {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.documents-checklist-table-header,
.document-check-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 0.9fr 1.2fr;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #edf2f7;
}

.documents-checklist-table-header {
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
}

.documents-checklist-table-header > div {
  padding: 9px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.document-check-row {
  padding: 10px 20px;
}

.document-check-row:last-child {
  border-bottom: none;
}

.document-check-row:hover {
  background: #f8fbff;
}

.document-check-name {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.document-check-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.document-check-icon.success {
  background: #dcfce7;
  color: #166534;
}

.document-check-icon.warning {
  background: #fef3c7;
  color: #92400e;
}

.document-check-icon.danger {
  background: #fee2e2;
  color: #991b1b;
}

.document-check-icon.neutral {
  background: #f1f5f9;
  color: #64748b;
}

.document-check-name strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.document-check-name small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.document-rejection {
  margin: 4px 0 0;
  color: #991b1b;
  font-size: 11px;
  font-weight: 600;
}

.document-reviewed {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 11px;
}

.document-check-conditional,
.document-check-date-cell,
.document-check-status {
  display: flex;
  align-items: center;
}

.document-check-date-cell {
  flex-direction: column;
  align-items: flex-start;
}

.document-check-date-cell strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.doc-na {
  color: #cbd5e1;
  font-size: 12px;
  font-style: italic;
}

.document-check-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.status-chip.neutral {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.btn-danger {
  color: #ffffff !important;
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
}

@media (max-width: 1200px) {
  .documents-audit-summary,
  .documents-upload-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .documents-checklist-table-header,
  .document-check-row {
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 0.8fr 1fr;
  }

  .document-check-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 800px) {
  .documents-audit-hero {
    flex-direction: column;
  }

  .documents-audit-summary,
  .documents-upload-form {
    grid-template-columns: 1fr;
  }

  .documents-audit-hero .btn {
    width: 100%;
  }
}

.premium-metric.danger {
  background: #fff7f7;
  border: 1px solid #fecaca;
}

.premium-metric.danger-soft {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.personnel-table tbody tr {
  transition: all 0.2s ease;
}

.personnel-table tbody tr:hover {
  background: #f8fafc;
  transform: scale(1.002);
}

.personnel-name-cell {
  font-weight: 600;
  color: #0f172a;
}

.personnel-premium-hero h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
}

.personnel-premium-hero p {
  font-size: 14px;
  color: #64748b;
}

.compact-alerts {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.compact-alerts {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.premium-metric.neutral {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
}

.personnel-row-blocked {
  background: #fff7f7 !important;
}

.personnel-row-blocked td:first-child {
  border-left: 4px solid #dc2626;
}

/* =========================================================
   COBERTURA EMPIRIA
========================================================= */

.coverage-module {
  width: 100%;
}

.coverage-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.coverage-hero {
  padding-bottom: 22px;
  border-bottom: 1px solid #e5e7eb;
}

.coverage-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.coverage-hero p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

.coverage-upload-card,
.coverage-table-card,
.coverage-history-card {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
}

.coverage-upload-card {
  margin-top: 18px;
  padding: 20px;
}

.coverage-upload-card h3,
.coverage-table-head h3,
.coverage-history-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.coverage-upload-card p,
.coverage-table-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.coverage-upload-form {
  display: grid;
  grid-template-columns: 180px 180px 1fr auto;
  gap: 12px;
  margin-top: 16px;
}

.coverage-upload-form input,
.coverage-upload-form select {
  height: 46px;
  border-radius: 14px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
}

.coverage-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.coverage-metric {
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 18px;
  background: #ffffff;
}

.coverage-metric.main {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  border-color: transparent;
}

.coverage-metric span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coverage-metric.main span {
  color: rgba(255, 255, 255, 0.75);
}

.coverage-metric strong {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.coverage-metric.main strong {
  color: #ffffff;
}

.coverage-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.coverage-history-card {
  padding: 18px;
  align-self: start;
}

.coverage-history-card h3 {
  margin-bottom: 14px;
}

.coverage-history-item {
  width: 100%;
  text-align: left;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: none;
}

.coverage-history-item:hover {
  background: #f8fbff;
}

.coverage-history-item.active {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.coverage-history-item strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.coverage-history-item span {
  display: block;
  margin-top: 5px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.coverage-history-item small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 11px;
}

.coverage-table-card {
  overflow: hidden;
}

.coverage-table-head {
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fbfdff;
}

@media (max-width: 1100px) {
  .coverage-upload-form,
  .coverage-summary,
  .coverage-layout {
    grid-template-columns: 1fr;
  }
}

.coverage-metric {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 18px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.coverage-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.coverage-metric.main {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  border: none;
}

.coverage-metric.main strong {
  font-size: 36px;
}

.coverage-upload-card {
  margin-top: 18px;
  padding: 22px;
  border-radius: 22px;
  border: 1px dashed #cbd5f5;
  background: #f8fbff;
}

.coverage-history-item {
  border-radius: 14px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.coverage-history-item:hover {
  border-color: #3b82f6;
  background: #f1f5ff;
}

.coverage-history-item.active {
  background: #e0edff;
  border-color: #2563eb;
}

.personnel-table thead {
  background: #1e293b;
}

.personnel-table th {
  font-size: 11px;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.05em;
}

.personnel-table td {
  font-size: 13px;
  color: #0f172a;
}

/* =========================================================
   COBERTURA PRO - EMPIRIA
========================================================= */

/* ── KPI strip compacto ──────────────────────────────────────── */
.cov-kpi-strip {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr) repeat(4, 0.9fr);
  gap: 8px;
  margin-bottom: 4px;
}

.cov-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cov-kpi span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cov-kpi strong {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #0f172a;
}

.cov-kpi-main  { background: linear-gradient(135deg,#0f172a,#1e3a8a); border-color: transparent; }
.cov-kpi-main span   { color: rgba(255,255,255,0.7); }
.cov-kpi-main strong { color: #fff; font-size: 24px; }

.cov-kpi-danger  { background: #fef2f2; border-color: #fecaca; }
.cov-kpi-danger strong  { color: #dc2626; }
.cov-kpi-warning { background: #fffbeb; border-color: #fde68a; }
.cov-kpi-warning strong { color: #d97706; }
.cov-kpi-success { background: #f0fdf4; border-color: #bbf7d0; }
.cov-kpi-success strong { color: #16a34a; }
.cov-kpi-alert   { background: #fff7ed; border-color: #fed7aa; }
.cov-kpi-alert strong   { color: #ea580c; }
.cov-kpi-neutral { background: #f8fafc; border-color: #e2e8f0; }
.cov-kpi-neutral strong { color: #475569; }
.cov-kpi-blue    { background: #eff6ff; border-color: #bfdbfe; }
.cov-kpi-blue strong    { color: #1d4ed8; }

/* ── Barra de acciones ───────────────────────────────────────── */
.cov-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fbfdff;
  flex-wrap: wrap;
}

.cov-action-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cov-record-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cov-file-label {
  font-size: 12px;
  color: #94a3b8;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cov-action-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Historial dropdown ──────────────────────────────────────── */
.cov-hist-wrap {
  position: relative;
}

.cov-hist-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cov-hist-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  min-width: 280px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.12);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.cov-hist-menu.cov-hist-open { display: block; }

.cov-hist-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.14s;
}

.cov-hist-item:hover { background: #f0f7ff; }
.cov-hist-item.active { background: #eff6ff; }

.cov-hist-month {
  grid-column: 1; grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.cov-hist-week {
  grid-column: 2; grid-row: 1;
  font-size: 11px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  align-self: center;
}

.cov-hist-user {
  grid-column: 1 / -1; grid-row: 2;
  font-size: 11px;
  color: #64748b;
}

.cov-hist-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  margin: 0;
}

/* ── Modal subir cobertura ───────────────────────────────────── */
.cov-upload-modal {
  max-width: 480px;
}

.coverage-pro-module {
  width: 100%;
}

.coverage-pro-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.coverage-pro-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e5e7eb;
}

.coverage-pro-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.coverage-pro-header p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

.coverage-pro-current {
  min-width: 220px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.coverage-pro-current span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.coverage-pro-current strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 13px;
}

.coverage-pro-upload {
  margin-top: 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px dashed #bfdbfe;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.coverage-upload-copy h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.coverage-upload-copy p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.coverage-pro-upload-form {
  display: grid;
  grid-template-columns: 170px 170px minmax(260px, 1fr) auto;
  gap: 12px;
  margin-top: 16px;
}

.coverage-pro-upload-form input,
.coverage-pro-upload-form select {
  height: 46px;
  border-radius: 14px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
}

.coverage-pro-metrics {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.coverage-pro-metric {
  min-height: 106px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 18px;
  background: #ffffff;
  transition: all 0.18s ease;
}

.coverage-pro-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.coverage-pro-metric.main {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  border-color: transparent;
}

.coverage-pro-metric span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coverage-pro-metric.main span {
  color: rgba(255, 255, 255, 0.75);
}

.coverage-pro-metric strong {
  display: block;
  margin-top: 12px;
  color: #0f172a;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

.coverage-pro-metric.main strong {
  color: #ffffff;
  font-size: 38px;
}

.coverage-pro-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.coverage-pro-history,
.coverage-pro-detail {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  overflow: hidden;
}

.coverage-pro-history {
  padding: 18px;
  align-self: start;
}

.coverage-pro-section-head,
.coverage-pro-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.coverage-pro-section-head {
  margin-bottom: 14px;
}

.coverage-pro-section-head h3,
.coverage-pro-table-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.coverage-pro-section-head span,
.coverage-pro-table-head span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.coverage-pro-history-item {
  width: 100%;
  text-align: left;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 16px;
  padding: 13px;
  margin-bottom: 10px;
  box-shadow: none;
  transition: all 0.18s ease;
}

.coverage-pro-history-item:hover {
  background: #f8fbff;
  border-color: #93c5fd;
}

.coverage-pro-history-item.active {
  background: #eff6ff;
  border-color: #2563eb;
}

.coverage-pro-history-item strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-pro-history-item span {
  display: block;
  margin-top: 5px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.coverage-pro-history-item small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 11px;
}

.coverage-pro-table-head {
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fbfdff;
}

.coverage-pro-table-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.coverage-pro-table-wrap {
  width: 100%;
  overflow: auto;
}

.coverage-pro-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}

.coverage-pro-table thead th {
  background: #1e293b;
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  padding: 9px 10px;
  border-bottom: 2px solid #334155;
  white-space: nowrap;
}

.coverage-pro-table tbody td {
  padding: 18px 16px;
  border-bottom: 1px solid #edf2f7;
  color: #0f172a;
  font-size: 14px;
  vertical-align: middle;
}

.coverage-pro-table tbody tr:hover {
  background: #f8fbff;
}

.coverage-institution-cell {
  font-weight: 700;
}

.coverage-number-cell {
  font-weight: 900;
  color: #0f172a;
}

.modality-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.modality-ri {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.modality-caa {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.modality-caares {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.modality-default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

@media (max-width: 1200px) {
  .coverage-pro-upload-form,
  .coverage-pro-metrics,
  .coverage-pro-layout {
    grid-template-columns: 1fr;
  }

  .coverage-pro-header {
    flex-direction: column;
  }

  .coverage-pro-current {
    width: 100%;
  }
}


/* =========================================================
   COBERTURA FINAL - OVERRIDE DEFINITIVO
========================================================= */

.coverage-filter-bar {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(150px, 1fr)) auto;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.coverage-filter-bar input,
.coverage-filter-bar select {
  height: 42px;
  border-radius: 12px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  padding: 0 12px;
}

.coverage-card-list {
  display: grid;
  gap: 10px;
  padding: 14px;
  max-height: 620px;
  overflow: auto;
  background: #f8fafc;
}

.coverage-row-card {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) minmax(460px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.coverage-row-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.coverage-row-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.coverage-row-municipality {
  display: inline-flex;
  margin-bottom: 5px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.coverage-row-main h4 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.coverage-row-main p {
  margin: 6px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.25;
}

.coverage-row-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  gap: 8px;
}

.coverage-row-stats div {
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.coverage-row-stats span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.coverage-row-stats strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.coverage-change {
  font-size: 12px !important;
}

.change-up {
  color: #15803d !important;
}

.change-down {
  color: #b91c1c !important;
}

.change-same {
  color: #475569 !important;
}

.change-none {
  color: #94a3b8 !important;
}

@media (max-width: 1200px) {
  .coverage-filter-bar,
  .coverage-row-card,
  .coverage-row-stats {
    grid-template-columns: 1fr;
  }
}

/* HISTORIAL HORIZONTAL */

.coverage-history-horizontal {
  margin: 16px 0;
}

.coverage-history-horizontal h3 {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
}

.coverage-history-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.coverage-history-chip {
  min-width: 140px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.coverage-history-chip.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.coverage-history-chip strong {
  display: block;
  font-size: 12px;
  color: #0f172a;
}

.coverage-history-chip span {
  font-size: 11px;
  color: #64748b;
}

/* =========================================================
   COBERTURA FINAL - HISTORIAL HORIZONTAL + TABLA COMPACTA
========================================================= */

.coverage-pro-detail-full {
  margin-top: 18px !important;
  width: 100% !important;
}

.coverage-history-horizontal {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.coverage-history-horizontal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.coverage-history-horizontal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
}

.coverage-history-horizontal-head span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.coverage-history-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.coverage-history-chip {
  flex: 0 0 160px;
  text-align: left;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: none;
}

.coverage-history-chip:hover {
  background: #f8fbff;
  border-color: #93c5fd;
}

.coverage-history-chip.active {
  background: #eff6ff;
  border-color: #2563eb;
}

.coverage-history-chip strong {
  display: block;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.coverage-history-chip span {
  display: block;
  margin-top: 4px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
}

.coverage-history-chip small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  white-space: nowrap;
}

.coverage-table-wrap {
  width: 100%;
  max-height: 580px;
  overflow: auto;
  background: #ffffff;
}

.coverage-table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  font-size: 11px;
}

.coverage-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #1e293b;
  color: #94a3b8;
  padding: 9px 10px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 2px solid #334155;
  white-space: nowrap;
}

.coverage-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
  line-height: 1.3;
  white-space: nowrap;
}

.coverage-table tr:hover {
  background: #f8fbff;
}

/* Municipio */
.coverage-table td:nth-child(1),
.coverage-table th:nth-child(1) { width: 100px; }

/* Institución */
.coverage-table td:nth-child(2),
.coverage-table th:nth-child(2) { min-width: 200px; max-width: 260px; white-space: normal; }

/* Sede */
.coverage-table td:nth-child(3),
.coverage-table th:nth-child(3) { min-width: 160px; max-width: 220px; white-space: normal; }

/* Mod · Cupos · TC Req · MT Req · TC Cont · MT Cont · Dif TC · Dif MT · Δ Cupos */
.coverage-table td:nth-child(4),
.coverage-table th:nth-child(4)  { width: 64px; text-align: center; }

.coverage-table td:nth-child(5),
.coverage-table td:nth-child(6),
.coverage-table td:nth-child(7),
.coverage-table td:nth-child(8),
.coverage-table td:nth-child(9),
.coverage-table td:nth-child(10),
.coverage-table td:nth-child(11),
.coverage-table td:nth-child(13) { width: 52px; }

.coverage-table th:nth-child(5),
.coverage-table th:nth-child(6),
.coverage-table th:nth-child(7),
.coverage-table th:nth-child(8),
.coverage-table th:nth-child(9),
.coverage-table th:nth-child(10),
.coverage-table th:nth-child(11),
.coverage-table th:nth-child(13) { width: 52px; }

/* Cobertura */
.coverage-table td:nth-child(12),
.coverage-table th:nth-child(12) { width: 88px; }

/* Cambio */
.coverage-table td:nth-child(14),
.coverage-table th:nth-child(14) { width: 52px; text-align: center; }

/* Act */
.coverage-table td:nth-child(15),
.coverage-table th:nth-child(15) { width: 36px; text-align: center; }

.td-strong {
  font-weight: 800;
}

.num {
  text-align: right;
  font-weight: 800;
}

.change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.change-up {
  background: #dcfce7;
  color: #166534 !important;
  border: 1px solid #bbf7d0;
}

.change-down {
  background: #fee2e2;
  color: #991b1b !important;
  border: 1px solid #fecaca;
}

.change-same {
  background: #f1f5f9;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}

.change-none {
  background: #f8fafc;
  color: #94a3b8 !important;
  border: 1px solid #e5e7eb;
}

/* Unicode arrow indicators for coverage change column */
.cov-arrow {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.cov-arrow-up   { color: #16a34a; }
.cov-arrow-down { color: #dc2626; }
.cov-arrow-same { color: #d97706; }
.cov-arrow-none { color: #cbd5e1; }

.change-cell,
.act-cell {
  text-align: center;
  padding: 8px 6px !important;
}

.updated-check-icon {
  display: inline-block;
  vertical-align: middle;
}

.empty {
  text-align: center;
  padding: 28px !important;
  color: #94a3b8 !important;
}

@media (max-width: 1100px) {
  .coverage-filter-bar {
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   COBERTURA COMPACTA (PRO)
=============================== */

.coverage-table-wrap {
  width: 100%;
  max-height: 520px;
  overflow: auto;
  background: #ffffff;
  border-radius: 10px;
}

.coverage-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  font-size: 11px;
}

/* HEADER DELGADO — OSCURO */
.coverage-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #1e293b;
  color: #94a3b8;
  padding: 9px 10px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 2px solid #334155;
  white-space: nowrap;
}

/* FILAS COMPACTAS */
.coverage-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
  line-height: 1.3;
  font-size: 11px;
}

/* HOVER SUAVE */
.coverage-table tr:hover {
  background: #f8fbff;
}

/* COLUMNAS CONTROLADAS */
.coverage-table td:nth-child(1) {
  width: 95px;
  white-space: nowrap;
}

.coverage-table td:nth-child(2) {
  min-width: 220px;
  max-width: 280px;
}

.coverage-table td:nth-child(3) {
  min-width: 200px;
  max-width: 260px;
}

.coverage-table td:nth-child(2),
.coverage-table td:nth-child(3) {
  white-space: normal;
}

/* COLUMNAS NUMÉRICAS */
.coverage-table td:nth-child(4),
.coverage-table td:nth-child(5),
.coverage-table td:nth-child(6),
.coverage-table td:nth-child(7),
.coverage-table td:nth-child(8),
.coverage-table td:nth-child(9) {
  width: 65px;
  white-space: nowrap;
  text-align: right;
}

/* ESTADO */
.coverage-table td:nth-child(10) {
  width: 110px;
}

/* TEXTO IMPORTANTE */
.td-strong {
  font-weight: 700;
  font-size: 11px;
}

/* NÚMEROS */
.num {
  text-align: right;
  font-weight: 700;
  font-size: 11px;
}

/* BADGES MÁS PEQUEÑOS */
.modality-chip {
  font-size: 9px;
  padding: 3px 6px;
  border-radius: 999px;
  font-weight: 700;
}

/* CAMBIO MÁS COMPACTO */
.change {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.change-up {
  background: #dcfce7;
  color: #166534;
}

.change-down {
  background: #fee2e2;
  color: #991b1b;
}

.change-same {
  background: #f1f5f9;
  color: #475569;
}

.change-none {
  background: #f8fafc;
  color: #94a3b8;
}

/* HISTORIAL MÁS DELGADO */
.coverage-history-chip {
  flex: 0 0 140px;
  padding: 8px 10px;
  border-radius: 10px;
}

.coverage-history-chip strong {
  font-size: 11px;
}

.coverage-history-chip span {
  font-size: 10px;
}

.coverage-history-chip small {
  font-size: 9px;
}

/* FILTROS MÁS PEQUEÑOS */
.coverage-filter-bar input,
.coverage-filter-bar select {
  height: 32px;
  font-size: 12px;
  padding: 4px 8px;
}

/* BOTONES MÁS LIMPIOS */
.coverage-filter-bar button {
  height: 32px;
  font-size: 12px;
}

/* EMPTY STATE */
.empty {
  text-align: center;
  padding: 20px !important;
  color: #94a3b8 !important;
  font-size: 12px;
}

/* HISTORIAL COMPACTO HORIZONTAL */

.coverage-history-horizontal {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* HEADER */
.coverage-history-horizontal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.coverage-history-horizontal-head h3 {
  font-size: 13px;
  font-weight: 800;
  margin: 0;
}

/* CONTENEDOR HORIZONTAL */
.coverage-history-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* TARJETAS MÁS PLANAS */
.coverage-history-chip {
  flex: 0 0 130px;
  height: 60px; /* 👈 clave: controla la altura */
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* TEXTO MÁS COMPACTO */
.coverage-history-chip strong {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 2px;
}

.coverage-history-chip span {
  font-size: 10px;
  color: #2563eb;
}

.coverage-history-chip small {
  font-size: 9px;
  color: #64748b;
}

/* ACTIVO */
.coverage-history-chip.active {
  background: #eff6ff;
  border-color: #2563eb;
}

.coverage-table {
  min-width: 1450px !important;
}

.coverage-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.coverage-ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.coverage-missing {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.coverage-extra {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.coverage-none {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.coverage-table {
  min-width: 1450px !important;
}

.coverage-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.coverage-ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.coverage-missing {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.coverage-extra {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.coverage-none {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Ajuste equilibrado tabla cobertura */
.coverage-table {
  min-width: 1420px !important;
}

.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  white-space: normal !important;
}

.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) {
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  white-space: normal !important;
}

.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  white-space: normal !important;
}

.coverage-table th,
.coverage-table td {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* TABLA SIN SCROLL Y BIEN DISTRIBUIDA */
.coverage-table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
}

/* TODAS LAS CELDAS */
.coverage-table th,
.coverage-table td {
  padding: 6px 8px !important;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MUNICIPIO */
.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) {
  width: 90px;
}

/* INSTITUCIÓN */
.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) {
  width: 180px;
  font-weight: 600;
}

/* SEDE */
.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 160px;
}

/* COLUMNAS NUMÉRICAS MÁS PEQUEÑAS */
.coverage-table th:nth-child(n+5),
.coverage-table td:nth-child(n+5) {
  width: 60px;
  text-align: center;
}

/* MODALIDAD */
.coverage-table th:nth-child(4),
.coverage-table td:nth-child(4) {
  width: 50px;
  text-align: center;
}

/* QUE NO CREZCAN LAS FILAS */
.coverage-table td {
  white-space: nowrap;
}

.coverage-table tr:hover {
  background: rgba(0,0,0,0.03);
}

/* CORRECCIÓN RECORTES TABLA COBERTURA */

.coverage-table-wrap {
  overflow: auto !important;
}

.coverage-table {
  min-width: 1550px !important;
}

.coverage-table th,
.coverage-table td {
  overflow: visible !important;
  text-overflow: unset !important;
}

.coverage-table td:nth-child(14),
.coverage-table td:nth-child(16) {
  min-width: 115px !important;
  width: 115px !important;
}

.coverage-status,
.change {
  max-width: none !important;
  white-space: nowrap !important;
}

.coverage-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coverage-table-actions span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.coverage-filter-bar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(160px, 1fr)) auto;
  gap: 10px;
  align-items: center;
}

.coverage-filter-bar input,
.coverage-filter-bar select,
.coverage-filter-bar button {
  width: 100%;
  min-width: 0;
}

.coverage-filter-bar #clearCoverageFilters {
  white-space: nowrap;
  min-width: 110px;
}

@media (max-width: 1200px) {
  .coverage-filter-bar {
    grid-template-columns: 1fr 1fr;
  }
}

/* 🔹 Ajuste columna SEDE en cobertura */
.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 180px;            /* 👈 ancho más pequeño (ajústalo si quieres) */
  max-width: 180px;
  white-space: normal;     /* 👈 permite salto de línea */
  word-break: break-word;  /* 👈 rompe palabras largas */
  line-height: 1.2;
}

/* 🔹 Opcional: compactar filas */
.coverage-table td {
  padding: 6px 8px;
}

/* 🔹 Evitar que la tabla crezca demasiado */
.coverage-table {
  table-layout: fixed;
  width: 100%;
}

.coverage-table td:nth-child(3) {
  font-size: 12px;
}

.coverage-table-wrap {
  overflow-x: visible !important;
}

.coverage-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.coverage-table th,
.coverage-table td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  padding: 6px 6px !important;
  font-size: 11px !important;
}

/* MUNICIPIO */
.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) {
  width: 9% !important;
}

/* INSTITUCIÓN */
.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) {
  width: 18% !important;
}

/* SEDE */
.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 14% !important;
  max-width: 14% !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* MODALIDAD */
.coverage-table th:nth-child(4),
.coverage-table td:nth-child(4) {
  width: 5% !important;
}

/* columnas numéricas */
.coverage-table th:nth-child(n+5),
.coverage-table td:nth-child(n+5) {
  width: 5.2% !important;
  text-align: center !important;
}

.coverage-table-wrap {
  overflow-x: hidden !important;
  width: 100% !important;
}

.coverage-table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

.coverage-table th,
.coverage-table td {
  font-size: 10px !important;
  padding: 5px 4px !important;
}

/* columnas grandes */
.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) {
  width: 8% !important;
}

.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) {
  width: 17% !important;
}

.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 14% !important;
}

/* modalidad */
.coverage-table th:nth-child(4),
.coverage-table td:nth-child(4) {
  width: 4% !important;
}

/* numéricas */
.coverage-table th:nth-child(n+5),
.coverage-table td:nth-child(n+5) {
  width: 4.75% !important;
}

/* 🔥 métricas cobertura en una sola fila */
.coverage-pro-metrics {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  width: 100%;
}

/* 🔹 cada tarjeta */
.coverage-pro-metric {
  flex: 1;
  min-width: 0;
}

/* 🔹 la principal (la azul) más grande */
.coverage-pro-metric.main {
  flex: 1.5;
}

/* 🔹 evitar que se bajen */
.coverage-pro-metrics > * {
  white-space: nowrap;
}

/* =========================================================
   COBERTURA - MÉTRICAS TIPO DASHBOARD PRO
========================================================= */

.coverage-pro-metrics {
  display: grid !important;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

.coverage-pro-metric {
  min-height: 110px;
  padding: 20px 22px !important;
  border-radius: 18px !important;
  border: 1px solid #dbe4f0 !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.coverage-pro-metric span {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b !important;
}

.coverage-pro-metric strong {
  margin-top: 10px;
  font-size: 34px !important;
  line-height: 1;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.coverage-pro-metric.main {
  background: linear-gradient(135deg, #0a1f44, #1d4ed8) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.coverage-pro-metric.main span,
.coverage-pro-metric.main strong {
  color: #ffffff !important;
}

@media (max-width: 1300px) {
  .coverage-pro-metrics {
    grid-template-columns: repeat(5, minmax(160px, 1fr));
  }

  .coverage-pro-metric {
    padding: 16px 18px !important;
  }

  .coverage-pro-metric strong {
    font-size: 28px !important;
  }
}

/* =========================================================
   COBERTURA - TABLA SIN SCROLL
========================================================= */

.coverage-table-wrap {
  overflow-x: hidden !important;
}

.coverage-table {
  width: 100% !important;
  table-layout: fixed !important;
  font-size: 13px;
}

/* Reducir columnas numéricas */
.coverage-table th,
.coverage-table td {
  padding: 6px 8px !important;
}

/* Columnas más pequeñas */
.coverage-table th:nth-child(5),
.coverage-table td:nth-child(5), /* cupos */
.coverage-table th:nth-child(6),
.coverage-table td:nth-child(6), /* base */
.coverage-table th:nth-child(7),
.coverage-table td:nth-child(7), /* TC req */
.coverage-table th:nth-child(8),
.coverage-table td:nth-child(8), /* MT req */
.coverage-table th:nth-child(9),
.coverage-table td:nth-child(9), /* TC cont */
.coverage-table th:nth-child(10),
.coverage-table td:nth-child(10), /* MT cont */
.coverage-table th:nth-child(11),
.coverage-table td:nth-child(11), /* dif TC */
.coverage-table th:nth-child(12),
.coverage-table td:nth-child(12)  /* dif MT */ {
  width: 70px;
  text-align: center;
}

/* Columna sede más pequeña pero en 2 líneas */
.coverage-table td:nth-child(3),
.coverage-table th:nth-child(3) {
  width: 150px;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.2;
}

/* Institución también compacta */
.coverage-table td:nth-child(2),
.coverage-table th:nth-child(2) {
  width: 180px;
  white-space: normal;
}

.update-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.update-new {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.update-old {
  background: rgba(148, 163, 184, 0.22);
  color: #475569;
}

.coverage-row-updated {
  background: #f8fffb;
}

.coverage-row-inherited {
  background: #ffffff;
}

.update-mini {
  display: block;
  width: fit-content;
  margin: 4px auto 0;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.update-new {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.update-old {
  background: rgba(148, 163, 184, 0.22);
  color: #475569;
}
/* =========================
   EMPIRIA - COBERTURA PRO CLEAN
   ========================= */

/* FILA NORMAL (SIN FONDO FUERTE) */
.coverage-faltante,
.coverage-exacto,
.coverage-sobrante {
  background: transparent !important;
  color: inherit !important;
}

/* SOLO RESALTAR CRÍTICOS */
.risk-alto {
  border-left: 5px solid #dc2626;
  background: #fff5f5;
}

.risk-medio {
  border-left: 5px solid #f59e0b;
}

/* =======================================================
   GESTIÓN DE PERSONAL — TABLA CON SCROLL TOTAL (SIN PAGINACIÓN)
======================================================= */

.premium-table-wrap {
  max-height: calc(100vh - 320px) !important;
  min-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border-radius: 0 0 22px 22px !important;
  border: none !important;
}

/* Tabla ancho completo, sin saltos de línea en celdas */
.premium-table-wrap .personnel-table {
  width: 100% !important;
  min-width: 1100px !important;
  table-layout: fixed !important;
}

/* Encabezados sticky */
.premium-table-wrap .personnel-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
  border-bottom: 2px solid #334155 !important;
}

/* Celdas sin salto de línea */
.premium-table-wrap .personnel-table tbody td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 13px 14px !important;
  font-size: 13px !important;
}

/* Tabla sin layout fijo para que las columnas se adapten al contenido */
.premium-table-wrap .personnel-table {
  table-layout: auto !important;
  min-width: 1200px !important;
}

/* Columna Cargo: permite wrap para textos largos */
.premium-table-wrap .personnel-table th:nth-child(3),
.premium-table-wrap .personnel-table td:nth-child(3) {
  white-space: normal !important;
  min-width: 170px;
  max-width: 220px;
  line-height: 1.3 !important;
  word-break: break-word;
}

/* Columna Nombre: un poco más ancha */
.premium-table-wrap .personnel-table th:nth-child(2),
.premium-table-wrap .personnel-table td:nth-child(2) {
  min-width: 180px;
}

/* Columnas estrechas: nowrap */
.premium-table-wrap .personnel-table th:nth-child(1),
.premium-table-wrap .personnel-table td:nth-child(1),
.premium-table-wrap .personnel-table th:nth-child(4),
.premium-table-wrap .personnel-table td:nth-child(4),
.premium-table-wrap .personnel-table th:nth-child(5),
.premium-table-wrap .personnel-table td:nth-child(5) { white-space: nowrap !important; }

/* Columna Acciones: no wrap nunca */
.premium-table-wrap .personnel-table th:nth-child(9),
.premium-table-wrap .personnel-table td:nth-child(9) {
  white-space: nowrap !important;
  min-width: 140px;
}

/* Botones de acciones siempre en una fila */
.premium-table-wrap .personnel-row-actions {
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.premium-table-wrap .personnel-row-actions .btn-row {
  padding: 6px 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Gestor de zona compacto */
.gestor-zona-cell {
  font-size: 12px;
  color: #475569;
}

/* =======================================================
   VERIFICACIÓN DE COBERTURA — ESTILO PROFESIONAL V2
======================================================= */

/* HEADER */
.coverage-pro-header-v2 {
  padding: 26px 28px !important;
  background: linear-gradient(135deg, #0a1128 0%, #0f2158 55%, #1a3a8a 100%) !important;
  border-radius: 22px 22px 0 0 !important;
  border-bottom: none !important;
}

.coverage-pro-header-v2 h2 {
  color: #ffffff !important;
  font-size: 22px !important;
  margin: 8px 0 4px !important;
}

.coverage-pro-header-v2 p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.coverage-pro-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #e0f2fe !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coverage-pro-current-v2 {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 14px !important;
}

.coverage-pro-current-v2 span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.coverage-pro-current-v2 strong {
  color: #ffffff !important;
}

/* INDICADORES DE PUNTO EN MÉTRICAS */
.cov-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.cov-dot-danger  { background: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.18); }
.cov-dot-warning { background: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,0.18); }
.cov-dot-success { background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
.cov-dot-alert   { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.18); }

/* VARIANTES DE COLOR EN MÉTRICAS */
.coverage-pro-metric.cov-danger {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}
.coverage-pro-metric.cov-danger strong {
  color: #dc2626 !important;
}

.coverage-pro-metric.cov-warning {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}
.coverage-pro-metric.cov-warning strong {
  color: #b45309 !important;
}

.coverage-pro-metric.cov-success {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}
.coverage-pro-metric.cov-success strong {
  color: #15803d !important;
}

.coverage-pro-metric.cov-alert {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
}
.coverage-pro-metric.cov-alert strong {
  color: #c2410c !important;
}

.coverage-pro-metric.cov-neutral {
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}
.coverage-pro-metric.cov-neutral strong {
  color: #334155 !important;
}

.coverage-pro-metric.cov-blue {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}
.coverage-pro-metric.cov-blue strong {
  color: #1d4ed8 !important;
}

/* CARD PRINCIPAL DE COBERTURA */
.coverage-pro-card {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(10, 17, 40, 0.12) !important;
}

/* UPLOAD SECTION */
.coverage-pro-upload {
  border: 1px dashed #bfdbfe !important;
  background: linear-gradient(160deg, #f0f6ff 0%, #fafcff 100%) !important;
}

/* FILTROS DE COBERTURA CON FONDO */
.coverage-filter-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
}

/* TABLA COBERTURA — STICKY HEADER FINAL */
.coverage-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  border-bottom: 2px solid #334155 !important;
}

/* TABLA COBERTURA — SCROLL */
.coverage-table-wrap {
  max-height: 580px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* =======================================================
   COBERTURA — GRID MÉTRICAS: PRINCIPAL GRANDE + SECUNDARIAS COMPACTAS
======================================================= */

/* Grid 5 columnas × 2 filas */
.coverage-pro-metrics {
  display: grid !important;
  grid-template-columns: 1.3fr repeat(4, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Métrica principal (Total cupos) ocupa las 2 filas */
.coverage-pro-metrics > .coverage-pro-metric.main {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

/* Métricas grandes — fila 1, columnas 2-5 */
.coverage-pro-metrics > *:nth-child(2) { grid-column: 2; grid-row: 1; }
.coverage-pro-metrics > *:nth-child(3) { grid-column: 3; grid-row: 1; }
.coverage-pro-metrics > *:nth-child(4) { grid-column: 4; grid-row: 1; }
.coverage-pro-metrics > *:nth-child(5) { grid-column: 5; grid-row: 1; }

/* Métricas secundarias — fila 2, columnas 2-5 */
.coverage-pro-metrics > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.coverage-pro-metrics > *:nth-child(7) { grid-column: 3; grid-row: 2; }
.coverage-pro-metrics > *:nth-child(8) { grid-column: 4; grid-row: 2; }
.coverage-pro-metrics > *:nth-child(9) { grid-column: 5; grid-row: 2; }

/* Métricas secundarias: compactas, en fila horizontal */
.cov-metric-sm {
  min-height: auto !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.cov-metric-sm span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  color: #64748b !important;
  text-transform: uppercase !important;
}

.cov-metric-sm strong {
  margin-top: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 1200px) {
  .coverage-pro-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: unset !important;
  }
  .coverage-pro-metrics > .coverage-pro-metric.main,
  .coverage-pro-metrics > *:nth-child(n) {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}

.risk-bajo {
  border-left: 5px solid #16a34a;
}

/* BADGE COBERTURA */
.coverage-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.coverage-badge.coverage-faltante {
  background: #fee2e2;
  color: #b91c1c;
}

.coverage-badge.coverage-exacto {
  background: #fef9c3;
  color: #92400e;
}

.coverage-badge.coverage-sobrante {
  background: #dcfce7;
  color: #166534;
}

/* BADGE RIESGO */
.coverage-risk-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.coverage-risk-badge.risk-alto {
  background: #fee2e2;
  color: #b91c1c;
}

.coverage-risk-badge.risk-medio {
  background: #ffedd5;
  color: #9a3412;
}

.coverage-risk-badge.risk-bajo {
  background: #dcfce7;
  color: #166534;
}

/* HOVER LIMPIO */
.coverage-table tr:hover {
  background: #f9fafb;
  transition: 0.2s;
}

/* =========================
   EMPIRIA - TABLA COBERTURA ORDENADA
   ========================= */

.coverage-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.coverage-table {
  min-width: 1500px;
  table-layout: fixed;
  border-collapse: collapse;
}

.coverage-table th,
.coverage-table td {
  vertical-align: middle;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.2;
}

/* Columnas largas sí pueden partir, pero ordenado */
.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) {
  width: 250px;
  white-space: normal;
}

.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 250px;
  white-space: normal;
}

/* Columnas pequeñas */
.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) {
  width: 110px;
}

.coverage-table th:nth-child(4),
.coverage-table td:nth-child(4) {
  width: 70px;
  text-align: center;
}

.coverage-table th:nth-child(5),
.coverage-table td:nth-child(5),
.coverage-table th:nth-child(6),
.coverage-table td:nth-child(6),
.coverage-table th:nth-child(7),
.coverage-table td:nth-child(7),
.coverage-table th:nth-child(8),
.coverage-table td:nth-child(8),
.coverage-table th:nth-child(9),
.coverage-table td:nth-child(9),
.coverage-table th:nth-child(10),
.coverage-table td:nth-child(10),
.coverage-table th:nth-child(11),
.coverage-table td:nth-child(11),
.coverage-table th:nth-child(12),
.coverage-table td:nth-child(12),
.coverage-table th:nth-child(15),
.coverage-table td:nth-child(15) {
  width: 80px;
  text-align: center;
}

/* Cobertura y riesgo más anchos para que no se rompan */
.coverage-table th:nth-child(13),
.coverage-table td:nth-child(13) {
  width: 130px;
  text-align: center;
}

.coverage-table th:nth-child(14),
.coverage-table td:nth-child(14) {
  width: 110px;
  text-align: center;
}

.coverage-table th:nth-child(16),
.coverage-table td:nth-child(16) {
  width: 120px;
  text-align: center;
}

/* Badges compactos */
.coverage-badge,
.coverage-risk-badge,
.change,
.update-mini,
.modality-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

/* Evita que FALTANTE se parta */
.coverage-badge {
  min-width: 105px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.coverage-risk-badge {
  min-width: 75px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

/* Menos agresivo el borde */
.risk-alto {
  border-left: 4px solid #dc2626 !important;
  background: transparent !important;
}

.risk-medio {
  border-left: 4px solid #f59e0b !important;
  background: transparent !important;
}

.risk-bajo {
  border-left: 4px solid #16a34a !important;
  background: transparent !important;
}

.coverage-table {
  min-width: 1700px !important;
}

.coverage-table th,
.coverage-table td {
  font-size: 11px !important;
  padding: 9px 10px !important;
}

.coverage-table th:nth-child(13),
.coverage-table td:nth-child(13) {
  width: 150px !important;
  min-width: 150px !important;
}

.coverage-table th:nth-child(14),
.coverage-table td:nth-child(14) {
  width: 110px !important;
  min-width: 110px !important;
}

.coverage-badge,
.coverage-risk-badge {
  display: inline-flex !important;
  width: 95px !important;
  min-width: 95px !important;
  height: 26px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  border-radius: 999px !important;
}

.coverage-risk-badge {
  width: 70px !important;
  min-width: 70px !important;
}

.coverage-badge.coverage-faltante {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.coverage-badge.coverage-exacto {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

.coverage-badge.coverage-sobrante {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.coverage-risk-badge.risk-alto {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: none !important;
}

.coverage-risk-badge.risk-medio {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: none !important;
}

.coverage-risk-badge.risk-bajo {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: none !important;
}

.coverage-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.coverage-table {
  width: 100% !important;
  min-width: 1350px !important;
  table-layout: fixed !important;
}

.coverage-table th,
.coverage-table td {
  font-size: 11px !important;
  padding: 9px 8px !important;
  white-space: nowrap !important;
}

.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2),
.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  white-space: normal !important;
}

.coverage-table th:nth-child(13),
.coverage-table td:nth-child(13) {
  width: 130px !important;
}

.coverage-badge {
  width: 95px !important;
  min-width: 95px !important;
  height: 26px !important;
}

/* QUITAR SCROLL HORIZONTAL COBERTURA */
.coverage-table-wrap {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
}

.coverage-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.coverage-table th,
.coverage-table td {
  font-size: 10px !important;
  padding: 8px 6px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Ocultar columnas menos necesarias para que quepa */
.coverage-table th:nth-child(6),
.coverage-table td:nth-child(6),
.coverage-table th:nth-child(14),
.coverage-table td:nth-child(14) {
  display: none !important;
}

/* Anchos principales */
.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) {
  width: 8%;
}

.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) {
  width: 18%;
}

.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) {
  width: 18%;
}

.coverage-table th:nth-child(4),
.coverage-table td:nth-child(4) {
  width: 5%;
  text-align: center;
}

.coverage-table th:nth-child(5),
.coverage-table td:nth-child(5),
.coverage-table th:nth-child(7),
.coverage-table td:nth-child(7),
.coverage-table th:nth-child(8),
.coverage-table td:nth-child(8),
.coverage-table th:nth-child(9),
.coverage-table td:nth-child(9),
.coverage-table th:nth-child(10),
.coverage-table td:nth-child(10),
.coverage-table th:nth-child(11),
.coverage-table td:nth-child(11),
.coverage-table th:nth-child(12),
.coverage-table td:nth-child(12),
.coverage-table th:nth-child(15),
.coverage-table td:nth-child(15) {
  width: 5%;
  text-align: center;
}

.coverage-table th:nth-child(13),
.coverage-table td:nth-child(13) {
  width: 10%;
  text-align: center;
}

.coverage-table th:nth-child(16),
.coverage-table td:nth-child(16) {
  width: 8%;
  text-align: center;
}

.coverage-badge {
  width: auto !important;
  min-width: 78px !important;
  height: 24px !important;
  font-size: 9px !important;
  padding: 0 8px !important;
}

.change,
.update-mini {
  font-size: 8px !important;
  padding: 3px 6px !important;
}
/* ============================================
   COBERTURA: COLUMNAS DEFINITIVAS (15 cols)
   ============================================ */

/* Mostrar columnas que estaban ocultas */
.coverage-table th:nth-child(6),
.coverage-table td:nth-child(6),
.coverage-table th:nth-child(14),
.coverage-table td:nth-child(14) {
  display: table-cell !important;
}

.coverage-table {
  min-width: 1180px !important;
  table-layout: fixed !important;
}

/* Columnas de texto */
.coverage-table th:nth-child(1),
.coverage-table td:nth-child(1) { width: 9% !important; }
.coverage-table th:nth-child(2),
.coverage-table td:nth-child(2) { width: 17% !important; white-space: normal !important; }
.coverage-table th:nth-child(3),
.coverage-table td:nth-child(3) { width: 15% !important; white-space: normal !important; }
.coverage-table th:nth-child(4),
.coverage-table td:nth-child(4) { width: 5% !important; text-align: center !important; }

/* Columnas numéricas uniformes */
.coverage-table th:nth-child(5),  .coverage-table td:nth-child(5),
.coverage-table th:nth-child(6),  .coverage-table td:nth-child(6),
.coverage-table th:nth-child(7),  .coverage-table td:nth-child(7),
.coverage-table th:nth-child(8),  .coverage-table td:nth-child(8),
.coverage-table th:nth-child(9),  .coverage-table td:nth-child(9),
.coverage-table th:nth-child(10), .coverage-table td:nth-child(10),
.coverage-table th:nth-child(11), .coverage-table td:nth-child(11) {
  width: 5% !important;
  text-align: right !important;
}

/* Cobertura (badge) */
.coverage-table th:nth-child(12),
.coverage-table td:nth-child(12) { width: 7% !important; text-align: center !important; }

/* Δ Cupos */
.coverage-table th:nth-child(13),
.coverage-table td:nth-child(13) { width: 4% !important; text-align: right !important; }

/* Cambio (flecha) */
.coverage-table th:nth-child(14),
.coverage-table td:nth-child(14) { width: 4% !important; text-align: center !important; }

/* Act. (chulito) */
.coverage-table th:nth-child(15),
.coverage-table td:nth-child(15) { width: 4% !important; text-align: center !important; }

/* ============================================
   SISTEMA DE TOASTS / NOTIFICACIONES
   ============================================ */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #1e293b;
  color: #f8fafc;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  min-width: 280px;
  max-width: 380px;
  pointer-events: all;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transform: translateX(120%);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
  opacity: 0;
  border-left: 4px solid #475569;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

.toast.toast-success { border-left-color: #22c55e; }
.toast.toast-error   { border-left-color: #ef4444; }
.toast.toast-warning { border-left-color: #f59e0b; }
.toast.toast-info    { border-left-color: #3b82f6; }

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-body { flex: 1; }
.toast-title {
  font-weight: 500;
  font-size: 14px;
  color: #f8fafc;
  margin-bottom: 2px;
}
.toast-message {
  font-size: 13px;
  color: #cbd5e1;
}

.toast-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 4px;
}
.toast-close:hover { color: #f8fafc; }

/* ============================================
   DASHBOARD v2 — PROFESIONAL
   ============================================ */
.db2-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.db2-wrap .personnel-premium-hero {
  margin-bottom: 4px;
}

/* KPI cards */
.db2-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .db2-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .db2-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.db2-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 20px 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.db2-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.db2-kpi-accent-green::before { background: #22c55e; }
.db2-kpi-accent-blue::before  { background: #3b82f6; }
.db2-kpi-accent-amber::before { background: #f59e0b; }
.db2-kpi-accent-red::before   { background: #ef4444; }

.db2-kpi-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.db2-kpi-value {
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.db2-kpi-sub {
  font-size: 11px;
  color: #94a3b8;
}

/* Chart cards */
.db2-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.db2-chart-wide { grid-column: span 1; }
@media (max-width: 800px) {
  .db2-charts-row { grid-template-columns: 1fr; }
}

.db2-chart-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.db2-card-header {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
}
.db2-card-header-sep {
  border-top: 1px solid #e5e7eb;
  margin-top: 2px;
}
.db2-chart-area {
  padding: 14px 16px;
  position: relative;
}

/* Tables */
.db2-tables-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) { .db2-tables-row { grid-template-columns: 1fr; } }

.db2-table-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}

.db2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.db2-table thead tr {
  background: #f8fafc;
}
.db2-table th {
  padding: 8px 12px;
  font-weight: 500;
  color: #6b7280;
  text-align: left;
  border-bottom: 0.5px solid #e2e8f0;
  white-space: nowrap;
}
.db2-table td {
  padding: 8px 12px;
  color: #374151;
  border-bottom: 0.5px solid #f1f5f9;
  vertical-align: middle;
}
.db2-table tbody tr:last-child td { border-bottom: none; }
.db2-table tbody tr:hover td { background: #f8fafc; }

.db2-td-mun {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db2-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Progress bar in table */
.db2-prog-wrap {
  background: #f1f5f9;
  border-radius: 3px;
  height: 6px;
  min-width: 60px;
  overflow: hidden;
}
.db2-prog-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* Badges */
.db2-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.db2-badge-green  { background: #dcfce7; color: #166534; }
.db2-badge-yellow { background: #fef9c3; color: #854d0e; }
.db2-badge-red    { background: #fee2e2; color: #991b1b; }
.db2-badge-blue   { background: #dbeafe; color: #1e40af; }
.db2-badge-gray   { background: #f1f5f9; color: #475569; }

.db2-empty-row {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: 20px !important;
}

/* Refresh note */
.db2-refresh-note {
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
  padding: 0 4px 2px;
}

/* Additional KPI accent colors */
.db2-kpi-accent-teal::before   { background: #0ea5e9; }
.db2-kpi-accent-pink::before   { background: #ec4899; }
.db2-kpi-accent-indigo::before { background: #6366f1; }
.db2-kpi-accent-purple::before { background: #8b5cf6; }

/* 4-col and 2-col KPI rows */
.db2-kpi-row-4 { grid-template-columns: repeat(4, 1fr) !important; }
.db2-kpi-row-2 { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 900px) {
  .db2-kpi-row-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .db2-kpi-row-4, .db2-kpi-row-2 { grid-template-columns: 1fr !important; }
}

/* Inline progress bar inside KPI card */
.db2-kpi-prog {
  margin-top: 8px;
  height: 4px;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
}
.db2-kpi-prog-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* ── Municipality filter chips ── */
.db2-mun-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px;
}
.db2-mun-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.db2-mun-chip:hover {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.db2-mun-chip-active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.35);
}
.db2-mun-chip-active:hover {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  transform: translateY(-1px);
}
.db2-mun-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
  margin-right: 4px;
  white-space: nowrap;
}

/* ── 3-col charts row (donut + donut + pyramid) ── */
.db2-charts-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .db2-charts-3col { grid-template-columns: 1fr 1fr; }
  .db2-charts-3col .db2-chart-card:last-child { grid-column: span 2; }
}
@media (max-width: 700px) {
  .db2-charts-3col { grid-template-columns: 1fr; }
  .db2-charts-3col .db2-chart-card:last-child { grid-column: span 1; }
}

/* Donut center stat */
.db2-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  padding: 12px;
}
.db2-donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.db2-donut-center-val {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}
.db2-donut-center-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}
.db2-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px 12px;
}
.db2-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #374151;
}
.db2-donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db2-donut-legend-val {
  margin-left: auto;
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
}

/* ── Mobile Gestor de Zona interface ── */
.gestor-wrap {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 80px;
}
.gestor-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  border-radius: 16px;
  padding: 20px 18px 16px;
  color: #fff;
}
.gestor-hero h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.gestor-hero p  { margin: 0; font-size: 12px; opacity: 0.80; }
.gestor-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 6px 14px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
}
.gestor-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gestor-stat {
  background: #fff;
  border: 0.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.gestor-stat-num  { font-size: 22px; font-weight: 700; color: #111827; }
.gestor-stat-lbl  { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.gestor-list { display: flex; flex-direction: column; gap: 8px; }
.gestor-card {
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid #e2e8f0;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 6px rgba(15,23,42,0.04);
}
.gestor-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.gestor-card-name { font-size: 14px; font-weight: 600; color: #111827; }
.gestor-card-doc  { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.gestor-card-type { font-size: 12px; color: #374151; margin-top: 6px; }
.gestor-card-meta { font-size: 11px; color: #6b7280; margin-top: 3px; }
.gestor-card-obs  { font-size: 11px; color: #9ca3af; margin-top: 4px; font-style: italic; }
.gestor-status {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gsb-pending  { background: #fef9c3; color: #854d0e; }
.gsb-approved { background: #dcfce7; color: #166534; }
.gsb-rejected { background: #fee2e2; color: #991b1b; }
.gsb-annulled { background: #f1f5f9; color: #475569; }
.gestor-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 14px;
}
.gestor-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.gestor-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #2563eb; color: #fff;
  border: none; border-radius: 50%;
  font-size: 26px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,99,235,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  transition: background 0.15s, transform 0.15s;
}
.gestor-fab:hover { background: #1d4ed8; transform: scale(1.08); }
.gestor-form-sheet {
  background: #fff;
  border-radius: 16px;
  border: 0.5px solid #e2e8f0;
  padding: 18px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08);
}
.gestor-form-title { font-size: 16px; font-weight: 700; color: #111827; margin: 0 0 14px; }
.gestor-form-grid  { display: flex; flex-direction: column; gap: 10px; }
.gestor-label {
  font-size: 12px; font-weight: 500; color: #374151;
  display: flex; flex-direction: column; gap: 4px;
}
.gestor-input, .gestor-select, .gestor-textarea {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  color: #111827;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.gestor-input:focus, .gestor-select:focus, .gestor-textarea:focus { border-color: #3b82f6; }
.gestor-textarea { resize: vertical; min-height: 80px; }
.gestor-btn-row { display: flex; gap: 8px; margin-top: 4px; }

/* ── Payroll summary & calculation UI ── */
.payroll-calc-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payroll-period-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.payroll-total-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .payroll-total-row { grid-template-columns: repeat(2, 1fr); } }
.payroll-total-card {
  background: #fff;
  border: 0.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}
.payroll-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 6px; }
.payroll-total-value { font-size: 20px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.payroll-total-card.accent-green .payroll-total-value { color: #16a34a; }
.payroll-total-card.accent-red   .payroll-total-value { color: #dc2626; }
.payroll-total-card.accent-blue  .payroll-total-value { color: #2563eb; }

.payroll-alert-list { display: flex; flex-direction: column; gap: 6px; }
.payroll-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
}
.payroll-alert-item.alert-warning { background: #fff7ed; border: 1px solid #fed7aa; color: #92400e; }
.payroll-alert-item.alert-error   { background: #fff1f2; border: 1px solid #fecdd3; color: #881337; }
.payroll-alert-item.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.payroll-alert-icon { font-size: 16px; flex-shrink: 0; }
.payroll-alert-body strong { display: block; margin-bottom: 2px; }

.payroll-table-wrap { overflow-x: auto; }
.payroll-calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 900px;
}
.payroll-calc-table thead tr { background: #f8fafc; }
.payroll-calc-table th {
  padding: 8px 10px;
  font-weight: 600;
  color: #475569;
  text-align: left;
  border-bottom: 0.5px solid #e2e8f0;
  white-space: nowrap;
}
.payroll-calc-table th.num { text-align: right; }
.payroll-calc-table td {
  padding: 8px 10px;
  color: #374151;
  border-bottom: 0.5px solid #f1f5f9;
  vertical-align: top;
}
.payroll-calc-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.payroll-calc-table tbody tr:hover td { background: #f8fafc; }
.payroll-calc-table tbody tr.row-alert td { background: #fff7ed; }
.payroll-calc-table tbody tr.row-retiro td { background: #eff6ff; }
.payroll-calc-table tfoot tr td { font-weight: 700; background: #f1f5f9; border-top: 1.5px solid #cbd5e1; }
.payroll-obs-list { list-style: none; margin: 0; padding: 0; }
.payroll-obs-list li { font-size: 10.5px; color: #6b7280; line-height: 1.4; }
.payroll-obs-list li::before { content: "• "; color: #3b82f6; }

.payroll-badge-modal { display: inline-block; padding: 2px 7px; border-radius: 12px; font-size: 10px; font-weight: 600; }
.modal-caares1 { background: #ede9fe; color: #5b21b6; }
.modal-caares2 { background: #f3e8ff; color: #7e22ce; }
.modal-caares3 { background: #ddd6fe; color: #4c1d95; }
.modal-caares4 { background: #e9d5ff; color: #6b21a8; }
.modal-caa1    { background: #dbeafe; color: #1e40af; }
.modal-caa2    { background: #bfdbfe; color: #1d4ed8; }
.modal-ri      { background: #d1fae5; color: #065f46; }

/* Approval buttons in novedades table */
.nov-action-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.15s;
}
.nov-action-btn:hover { opacity: 0.82; }
.nov-btn-approve { background: #dcfce7; color: #15803d; }
.nov-btn-reject  { background: #fee2e2; color: #b91c1c; }
.nov-btn-annul   { background: #f1f5f9; color: #475569; }

/* ============================================
   PAGINACIÓN
   ============================================ */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border-top: 0.5px solid #e2e8f0;
  background: #fafafa;
}

.pagination-pages {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pagination-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 0.5px solid #e2e8f0;
  background: #fff;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.pagination-page-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.pagination-page-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 500;
}

.pagination-btn {
  font-size: 13px;
  padding: 6px 14px !important;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 13px;
  color: #6b7280;
}

/* ============================================
   MÓDULO NÓMINA Y NOVEDADES
   ============================================ */
.payroll-module-wrap {
  padding: 0;
}

.payroll-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px 24px 0;
}

.payroll-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #2563eb;
  display: block;
  margin-bottom: 4px;
}

.payroll-header h2 {
  font-size: 20px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.payroll-header p {
  font-size: 13px;
  color: #6b7280;
}

.payroll-form-card {
  background: #fff;
  border: 0.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin: 0 24px 24px;
}

.payroll-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.payroll-field { display: flex; flex-direction: column; gap: 6px; }
.payroll-field.full-width { grid-column: 1 / -1; }

.payroll-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.payroll-label .req { color: #ef4444; }

.payroll-input, .payroll-select, .payroll-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 0.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.payroll-input:focus, .payroll-select:focus, .payroll-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}

.payroll-textarea { resize: vertical; }

.payroll-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 0.5px solid #f1f5f9;
}

/* Filtros */
.payroll-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 0 24px 16px;
}

/* Tabla */
.payroll-table-wrap {
  margin: 0 24px 24px;
  border: 0.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: calc(100vh - 360px);
  min-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
}

.payroll-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

.payroll-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  border-bottom: 0.5px solid #e2e8f0;
  z-index: 2;
}

.payroll-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: #374151;
  border-bottom: 0.5px solid #f1f5f9;
}

.payroll-table tbody tr:last-child td { border-bottom: none; }
.payroll-table tbody tr:hover { background: #f8fafc; }

.payroll-name-cell { font-weight: 500; color: #111827; }

.payroll-empty {
  text-align: center;
  padding: 40px !important;
  color: #9ca3af;
  font-size: 14px;
}

/* Badges de estado */
.novelty-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
}

.badge-pendiente { background: #fef9c3; color: #854d0e; }
.badge-aprobada  { background: #dcfce7; color: #166534; }
.badge-rechazada { background: #fee2e2; color: #991b1b; }
.badge-anulada   { background: #f1f5f9; color: #475569; }

.novelty-type-chip {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
}

/* Acciones por fila */
.payroll-actions-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-aprobar, .btn-rechazar, .btn-anular {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.15s;
}
.btn-aprobar:hover, .btn-rechazar:hover, .btn-anular:hover { opacity: 0.8; }

.btn-aprobar  { background: #dcfce7; color: #166534; }
.btn-rechazar { background: #fee2e2; color: #991b1b; }
.btn-anular   { background: #f1f5f9; color: #475569; }

@media (max-width: 768px) {
  .payroll-form-grid { grid-template-columns: 1fr; }
  .payroll-header { flex-direction: column; }
  .payroll-form-card, .payroll-table-wrap, .payroll-filters { margin-left: 12px; margin-right: 12px; }
}

/* ============================================================
   DESPRENDIBLES Y CERTIFICACIONES
   ============================================================ */

.desp-preview, .cert-preview {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 32px 40px;
  margin: 20px 24px;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
}

.desp-header-print { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #1e40af; padding-bottom: 16px; }
.desp-empresa, .cert-empresa-nombre { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; }
.desp-titulo, .cert-titulo { font-size: 17px; font-weight: 700; color: #1e40af; margin: 6px 0 2px; }
.desp-periodo { font-size: 13px; color: #475569; }

.desp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  background: #f8fafc;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.desp-label { font-weight: 600; color: #475569; margin-right: 4px; }

.desp-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 12px;
}
.desp-table thead th {
  background: #1e40af;
  color: #fff;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
}
.desp-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #e2e8f0;
}
.desp-table tbody tr:nth-child(even) { background: #f8fafc; }

.desp-empty { color: #94a3b8; text-align: center; padding: 20px 0; }
.desp-generado, .cert-generado { font-size: 10px; color: #94a3b8; text-align: right; margin-top: 16px; }

.desp-firma-grid, .cert-firma-grid {
  display: flex;
  gap: 48px;
  margin-top: 40px;
  padding-top: 16px;
}
.desp-firma-box, .cert-firma-box {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #475569;
}
.desp-firma-line, .cert-firma-line {
  border-top: 1px solid #334155;
  margin-bottom: 8px;
}

.desp-actions { padding: 0 24px 24px; }

/* Certificacion laboral */
.cert-membrete { text-align: center; margin-bottom: 24px; border-bottom: 2px solid #1e40af; padding-bottom: 16px; }
.cert-titulo { font-size: 18px; font-weight: 700; color: #1e40af; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; }
.cert-ciudad { color: #475569; margin-bottom: 20px; font-size: 13px; }
.cert-cuerpo { line-height: 2; margin-bottom: 24px; }
.cert-cuerpo p { margin-bottom: 14px; text-align: justify; }

@media print {
  body > *:not(.desp-preview):not(.cert-preview) { display: none !important; }
  .desp-actions, .desp-actions * { display: none !important; }
  .desp-preview, .cert-preview {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 20px;
    max-width: 100%;
  }
}

/* ============================================================
   COVERAGE TAB NAV
   ============================================================ */

.coverage-tab-nav {
  display: flex;
  gap: 4px;
  padding: 16px 24px 0;
  border-bottom: 2px solid var(--line);
  background: var(--panel);
}

.coverage-tab-btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  letter-spacing: 0.01em;
}

.coverage-tab-btn:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.coverage-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--primary-soft);
}

/* ============================================================
   NOVEDADES DEL PERSONAL
   ============================================================ */

.novedades-section {
  padding: 24px;
}

.novedades-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.novedades-toolbar h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.novedades-count-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--panel-3);
  color: var(--text-soft);
  padding: 3px 10px;
  border-radius: 999px;
}

.novedades-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.novedad-emp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}

.novedad-emp-row:last-of-type {
  border-bottom: none;
}

.novedad-emp-row:hover {
  background: var(--panel-2);
}

.novedad-emp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.novedad-emp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.novedad-emp-meta {
  font-size: 11px;
  color: var(--text-soft);
}

.novedad-emp-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.novedad-emp-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.novedad-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.novedad-badge-none {
  background: var(--panel-3);
  color: var(--text-faint);
}

.novedad-badge.cov-success  { background: #dcfce7; color: #166534; }
.novedad-badge.cov-warning  { background: #fef3c7; color: #92400e; }
.novedad-badge.cov-danger   { background: #fee2e2; color: #991b1b; }

.novedad-count-label {
  font-size: 11px;
  color: var(--text-soft);
}

/* Inline form */
.novedad-form-wrap {
  padding: 16px 18px;
  background: #f0f6ff;
  border-bottom: 1px solid var(--line);
}

.novedad-inline-form { }

.novedad-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.novedad-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.novedad-form-grid label span { font-size: 11px; }

.novedad-form-grid input,
.novedad-form-grid select,
.novedad-form-grid textarea {
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.novedad-form-grid input:focus,
.novedad-form-grid select:focus,
.novedad-form-grid textarea:focus {
  border-color: var(--primary);
}

.novedad-form-full {
  grid-column: 1 / -1;
}

.novedad-form-actions {
  display: flex;
  gap: 8px;
}

/* Detail cards */
.novedad-detail-wrap {
  padding: 12px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.novedad-detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.novedad-detail-card.cov-success { border-left-color: #16a34a; }
.novedad-detail-card.cov-warning { border-left-color: #d97706; }
.novedad-detail-card.cov-danger  { border-left-color: #dc2626; }
.novedad-detail-card.cov-neutral { border-left-color: #94a3b8; }

.novedad-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.novedad-detail-head strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.novedad-detail-date {
  font-size: 11px;
  color: var(--text-soft);
  margin-left: 8px;
}

.novedad-status-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.novedad-status-chip.cov-success { background: #dcfce7; color: #166534; }
.novedad-status-chip.cov-warning { background: #fef3c7; color: #92400e; }
.novedad-status-chip.cov-danger  { background: #fee2e2; color: #991b1b; }
.novedad-status-chip.cov-neutral { background: var(--panel-3); color: var(--text-soft); }

.novedad-detail-desc {
  font-size: 13px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.novedad-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: var(--text-soft);
}

.novedad-doc-link {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.novedad-doc-link:hover { text-decoration: underline; }

.novedad-no-doc {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

.novedad-review-note {
  font-size: 12px;
  color: #92400e;
  background: #fef3c7;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0;
}

.novedad-review-actions {
  display: flex;
  gap: 8px;
}

.novedad-approve-btn {
  font-size: 12px;
  padding: 5px 14px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}

.novedad-approve-btn:hover { opacity: 0.8; }

.novedad-reject-btn {
  font-size: 12px;
  padding: 5px 14px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}

.novedad-reject-btn:hover { opacity: 0.8; }

@media (max-width: 768px) {
  .novedad-emp-row { grid-template-columns: 1fr; gap: 8px; }
  .novedad-form-grid { grid-template-columns: 1fr; }
  .coverage-tab-btn { padding: 8px 14px; font-size: 12px; }
}

/* ============================================================
   CARGO CELL — 2 LÍNEAS
   ============================================================ */
.cargo-cell .role-chip {
  white-space: normal !important;
  max-width: 130px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  line-height: 1.3;
}

/* ============================================================
   ACCIONES CON ICONOS Y TOOLTIP
   ============================================================ */
.personnel-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  position: relative;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.personnel-icon-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.personnel-icon-btn:hover { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }
.personnel-icon-btn.btn-icon-view:hover { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.personnel-icon-btn.btn-icon-edit:hover { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.personnel-icon-btn.btn-icon-docs:hover { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* Tooltip global fijo — nunca recortado por overflow */
#pnl-tooltip {
  position: fixed;
  display: none;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  transform: translateX(-50%) translateY(-100%);
  margin-top: -6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  letter-spacing: 0.01em;
}

/* ============================================================
   MODAL INTERNO (rechazo de documentos, etc.)
   ============================================================ */
.empiria-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInOverlay 0.15s;
}
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
.empiria-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  width: 440px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.empiria-modal h3 { margin: 0 0 6px; font-size: 17px; color: #0f172a; }
.empiria-modal p { margin: 0 0 16px; color: #64748b; font-size: 13px; }
.empiria-modal textarea {
  width: 100%;
  min-height: 80px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.empiria-modal textarea:focus { outline: none; border-color: #6366f1; }
.empiria-modal-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }

/* ============================================================
   ESTUDIOS
   ============================================================ */
.estudios-add-form {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
.estudios-add-form h5 { margin: 0 0 14px; font-size: 13px; color: #1e293b; font-weight: 700; }
.estudios-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.estudio-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.estudio-item-info { flex: 1; }
.estudio-item-info strong { display: block; font-size: 13px; color: #1e293b; font-weight: 700; }
.estudio-item-info span { font-size: 12px; color: #64748b; display: block; margin-top: 2px; }
.btn-remove-estudio {
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px; cursor: pointer;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  flex-shrink: 0; transition: opacity 0.15s;
}
.btn-remove-estudio:hover { opacity: 0.75; }
.food-handling-section {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 20px;
}
.food-handling-section h5 { margin: 0 0 12px; font-size: 13px; color: #166534; font-weight: 700; }

/* ============================================================
   OBSERVACIONES
   ============================================================ */
.obs-history { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.obs-item {
  background: #f8fafc;
  border-left: 3px solid #6366f1;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
}
.obs-item-meta { font-size: 11px; color: #94a3b8; margin-bottom: 5px; }
.obs-item-text { font-size: 13px; color: #1e293b; line-height: 1.5; }
.obs-empty { font-size: 13px; color: #94a3b8; font-style: italic; text-align: center; padding: 16px; }

/* ============================================================
   HOJA DE VIDA (CV VIEW)
   ============================================================ */
.cv-shell {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.cv-shell .cv-header {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.cv-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.cv-header-info h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #ffffff; }
.cv-header-info p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.9); }
.cv-body { padding: 28px 36px; }
.cv-section { margin-bottom: 24px; }
.cv-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: #6366f1;
  border-bottom: 2px solid #e0e7ff;
  padding-bottom: 6px; margin-bottom: 14px;
}
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-field { }
.cv-field span { display: block; font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cv-field strong { display: block; font-size: 13px; color: #1e293b; margin-top: 1px; }
.cv-study-item { padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.cv-study-item:last-child { border: none; }
.cv-study-item strong { display: block; font-size: 13px; color: #1e293b; }
.cv-study-item span { font-size: 12px; color: #64748b; }
.cv-actions { padding: 0 36px 28px; display: flex; gap: 10px; }
.btn-back-cv { }
.cv-page-wrapper {
  padding: 16px;
  height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
}
@media print { .cv-page-wrapper { height: auto; overflow: visible; } }

/* ─── Bloque de firma en hoja de vida ─── */
.cv-signature-block {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid #e2e8f0;
}
.cv-signature-declaration {
  font-size: 12px;
  color: #475569;
  text-align: center;
  margin: 0 auto 40px;
  max-width: 560px;
  line-height: 1.7;
  font-style: italic;
}
.cv-signature-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 260px;
  margin: 0 auto 24px;
}
.cv-signature-line {
  width: 100%;
  height: 1px;
  background: #334155;
  margin-bottom: 8px;
}
.cv-signature-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cv-signature-name {
  font-size: 12px;
  color: #1e293b;
  font-weight: 600;
}
.cv-signature-doc {
  font-size: 11px;
  color: #64748b;
}

@media (max-width: 768px) {
  .cv-header { flex-direction: column; text-align: center; padding: 24px; }
  .cv-body { padding: 20px; }
  .cv-grid { grid-template-columns: 1fr; }
}

/* ─── Badge variants para solicitudes ─── */
.novedad-badge.badge-warning  { background: #fef3c7; color: #92400e; }
.novedad-badge.badge-info     { background: #dbeafe; color: #1e40af; }
.novedad-badge.badge-success  { background: #dcfce7; color: #166534; }
.novedad-badge.badge-danger   { background: #fee2e2; color: #991b1b; }
.novedad-badge.badge-neutral  { background: var(--panel-3); color: var(--text-faint); }

/* ─── data-table ─── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead tr {
  background: var(--panel-2);
}
.data-table th {
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tbody tr:hover {
  background: var(--panel-2);
}

/* ─── Modal card system ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInOverlay .15s;
}
.modal-overlay.hidden { display: none; }
.modal-card {
  background: var(--bg, #fff);
  border-radius: 16px;
  width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 72px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem .8rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-faint, #94a3b8);
  padding: 4px 6px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--panel-2, #f8fafc); }
.modal-body {
  padding: 1.1rem 1.4rem;
  flex: 1;
}
.modal-footer {
  padding: .8rem 1.4rem 1.1rem;
  display: flex;
  gap: .6rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

/* ─── Cargo column — wider ─── */
.cargo-cell .role-chip {
  white-space: normal !important;
  max-width: 200px !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-align: left;
  padding: 3px 8px;
}

/* ─── Tooltip visibility fix ─── */
.personnel-row-actions {
  overflow: visible !important;
}
td:last-child {
  overflow: visible !important;
}

/* ─── Coverage history accordion ─── */
.coverage-history-accordion {
  margin: 16px 0;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}
.coverage-history-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  user-select: none;
  background: var(--panel-2, #f8fafc);
  list-style: none;
}
.coverage-history-accordion[open] .coverage-history-accordion-head {
  border-bottom: 1.5px solid var(--border, #e2e8f0);
}
.coverage-history-accordion-head::-webkit-details-marker { display: none; }
.coverage-history-accordion-head::after {
  content: "⌄";
  transition: transform .2s;
  font-size: 16px;
  color: var(--text-faint);
}
.coverage-history-accordion[open] .coverage-history-accordion-head::after {
  transform: rotate(180deg);
}
.coverage-history-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--panel-3, #eef2f7);
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: auto;
  margin-right: .8rem;
}
.coverage-history-accordion .coverage-history-scroll {
  padding: 12px 16px;
}

/* ─── CV Print ─── */
@media print {
  body > *:not(main) { display: none !important; }
  main > * { display: none !important; }
  #dashboard { display: block !important; }
  .sidebar, .topbar-pro, .cv-actions, .personnel-premium-hero,
  .summary-grid, #moduleNav, .sidebar-footer { display: none !important; }
  .main-panel { padding: 0 !important; }
  .workspace { padding: 0 !important; }
  #cvPrintArea { display: block !important; box-shadow: none !important; }
}

/* ─── Observaciones attachment ─── */
.obs-item-attachment {
  margin-top: 4px;
}
.obs-item-attachment a {
  font-size: 12px;
  color: var(--primary, #2563eb);
  text-decoration: none;
}
.obs-item-attachment a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD COCKPIT  —  prefijo: ck-
   ══════════════════════════════════════════════════════════════════════════════ */

.ck-wrap { display: flex; flex-direction: column; gap: 20px; }

/* Hero + filtros */
.ck-hero { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 0; }
.ck-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-select {
  height: 36px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; color: #374151; background: #fff; cursor: pointer; outline: none; min-width: 180px;
}
.ck-select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* KPI row — 4 tarjetas principales */
.ck-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .ck-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ck-kpi-row { grid-template-columns: 1fr; } }

.ck-kpi-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 18px 18px 14px;
  position: relative; display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  user-select: none; transition: box-shadow 0.15s, transform 0.12s;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05); overflow: hidden;
}
.ck-kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 16px 16px 0 0;
}
.ck-kpi-card:hover  { box-shadow: 0 6px 20px rgba(15,23,42,0.10); transform: translateY(-2px); }
.ck-kpi-card:focus  { outline: 2px solid #6366f1; outline-offset: 2px; }
.ck-kpi-card:active { transform: translateY(0); }

.ck-kpi-green::before  { background: #22c55e; }
.ck-kpi-blue::before   { background: #3b82f6; }
.ck-kpi-amber::before  { background: #f59e0b; }
.ck-kpi-purple::before { background: #8b5cf6; }

.ck-kpi-icon { font-size: 22px; line-height: 1; padding-top: 2px; flex-shrink: 0; }
.ck-kpi-inner { flex: 1; min-width: 0; }
.ck-kpi-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #6b7280; margin-bottom: 6px; }
.ck-kpi-value { font-size: 28px; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 5px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ck-kpi-sub   { font-size: 11px; color: #94a3b8; line-height: 1.4; }
.ck-kpi-prog  { margin-top: 8px; height: 4px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.ck-kpi-prog-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease, background 0.3s; width: 0; }
.ck-kpi-badge {
  position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* KPI row pequeña */
.ck-kpi-row-sm { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 900px) { .ck-kpi-row-sm { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .ck-kpi-row-sm { grid-template-columns: repeat(2, 1fr); } }

.ck-kpi-card-sm {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.ck-kpi-sm-label { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }
.ck-kpi-sm-val   { font-size: 22px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; }
.ck-kpi-sm-sub   { font-size: 10px; color: #94a3b8; }

.ck-kpi-green-sm  { border-left: 3px solid #22c55e; }
.ck-kpi-yellow-sm { border-left: 3px solid #f59e0b; }
.ck-kpi-red-sm    { border-left: 3px solid #ef4444; }
.ck-kpi-teal      { border-left: 3px solid #0ea5e9; }
.ck-kpi-gray      { border-left: 3px solid #94a3b8; }

/* Badges */
.ck-badge-green  { background: #dcfce7; color: #15803d; }
.ck-badge-yellow { background: #fef9c3; color: #92400e; }
.ck-badge-red    { background: #fee2e2; color: #b91c1c; }
.ck-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.ck-badge-gray   { background: #f1f5f9; color: #475569; }

/* Panel */
.ck-panel {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04); display: flex; flex-direction: column;
}
.ck-panel-restricted { opacity: 0.65; }
.ck-panel-hdr {
  padding: 13px 18px; font-size: 13px; font-weight: 600; color: #374151;
  border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between;
  align-items: center; flex-shrink: 0;
}
.ck-panel-body { flex: 1; }
.ck-panel-scroll { overflow-y: auto; max-height: 380px; }
.ck-panel-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.ck-chart-area  { padding: 10px 14px; position: relative; flex: 1; }

/* Mid + bottom rows */
.ck-mid-row    { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.ck-bottom-row { display: grid; grid-template-columns: 1fr 1fr;   gap: 16px; }
@media (max-width: 900px) {
  .ck-mid-row    { grid-template-columns: 1fr; }
  .ck-bottom-row { grid-template-columns: 1fr; }
}

/* Coverage table */
.ck-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ck-table thead tr { background: #f8fafc; }
.ck-table th { padding: 8px 12px; font-weight: 600; color: #6b7280; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; font-size: 11px; }
.ck-th-num { text-align: right; }
.ck-table td { padding: 7px 12px; color: #374151; border-bottom: 0.5px solid #f1f5f9; vertical-align: middle; }
.ck-table tbody tr:last-child td { border-bottom: none; }
.ck-table tbody tr:hover td { background: #fafafa; }
.ck-td-mun { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ck-td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Semáforo */
.ck-sem-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ck-sem-ok       { background: #dcfce7; color: #15803d; }
.ck-sem-warning  { background: #fef9c3; color: #92400e; }
.ck-sem-critical { background: #fee2e2; color: #b91c1c; }
.ck-sem-nodata   { background: #f1f5f9; color: #6b7280; }

/* Mini progress bar */
.ck-mini-bar { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; width: 80px; }
.ck-mini-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

/* Alert items */
.ck-alert-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 0.5px solid #f1f5f9; gap: 10px; }
.ck-alert-item:last-child { border-bottom: none; }
.ck-alert-ok { padding: 20px 18px; font-size: 13px; color: #6b7280; }
.ck-alert-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ck-alert-msg { font-size: 12.5px; color: #374151; line-height: 1.4; }
.ck-alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ck-alert-dot-critical { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.ck-alert-dot-warning  { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.ck-alert-dot-info     { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.ck-alert-dot-ok       { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.ck-alert-action {
  flex-shrink: 0; font-size: 12px; font-weight: 600; color: #6366f1; text-decoration: none;
  padding: 4px 10px; border: 1px solid #e0e7ff; border-radius: 6px; transition: background 0.15s; cursor: pointer;
}
.ck-alert-action:hover { background: #eef2ff; }
.ck-alert-critical { border-left: 3px solid #ef4444; }
.ck-alert-warning  { border-left: 3px solid #f59e0b; }
.ck-alert-info     { border-left: 3px solid #3b82f6; }

/* Activity feed */
.ck-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 0.5px solid #f1f5f9; }
.ck-activity-item:last-child { border-bottom: none; }
.ck-activity-icon { font-size: 16px; line-height: 1.5; flex-shrink: 0; }
.ck-activity-body { flex: 1; min-width: 0; }
.ck-activity-desc { font-size: 12.5px; color: #374151; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-activity-time { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* Empty + footer */
.ck-empty  { padding: 28px 20px; text-align: center; color: #9ca3af; font-size: 13px; }
.ck-footer { font-size: 11px; color: #94a3b8; text-align: right; padding: 4px 0; }

/* Modal */
.ck-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 20px;
}
.ck-modal-overlay[hidden] { display: none; }
.ck-modal {
  background: #fff; border-radius: 18px; max-width: 540px; width: 100%; overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,23,42,0.20); animation: ck-modal-in 0.2s ease;
}
@keyframes ck-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.ck-modal-hdr { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; }
.ck-modal-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.ck-modal-close {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: #f1f5f9;
  color: #374151; font-size: 18px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; line-height: 1; transition: background 0.15s;
}
.ck-modal-close:hover { background: #e2e8f0; }
.ck-modal-body { padding: 22px; }
.ck-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.ck-modal-stat { background: #f8fafc; border-radius: 10px; padding: 12px 14px; text-align: center; }
.ck-modal-stat-val { font-size: 24px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; }
.ck-modal-stat-lbl { font-size: 11px; color: #6b7280; margin-top: 4px; }
.ck-val-warn { color: #d97706; }
.ck-val-crit { color: #dc2626; }
.ck-modal-note { font-size: 11px; color: #94a3b8; margin-top: 14px; padding-top: 10px; border-top: 1px solid #f1f5f9; }

/* ── Dashboard v2 — viewport-locked, scroll solo en tabla cobertura ───────── */

/* Outer shell: empuja hasta el borde del viewport */
.ck-db-shell {
  height: calc(100dvh - var(--topbar-height) - 56px);   /* minus workspace-panel padding */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card: elimina padding lateral extra, ocupa toda la altura */
.ck-db-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 18px !important;
}

/* Wrap principal: columna flex, llena el espacio */
.ck-wrap2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Header (fijo) */
.ck-hdr2 {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.ck-hdr2-title { font-size: 15px; font-weight: 800; color: #111827; letter-spacing: -.3px; }
.ck-hdr2-sub   { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.ck-hdr2-right { display: flex; align-items: center; gap: 8px; }

/* Body grid: main + sidebar, toma el espacio restante */
.ck-body-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 214px;
  gap: 12px;
  overflow: hidden;
}

/* Columna principal: flex column, overflow hidden */
.ck-main2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar: scroll si hace falta, nunca crece */
.ck-sidebar2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

/* Footer (fijo) */
.ck-footer { flex-shrink: 0; }

/* ── KPI row — 3 tarjetas (fijo) ────────── */
.ck-kpi3 {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
}

.ck-kpi3-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 13px; box-shadow: 0 1px 3px rgba(15,23,42,.05);
  position: relative; overflow: hidden;
}
.ck-kpi3-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 10px 10px 0 0;
}
.ck-kpi3-green::before { background: #22c55e; }
.ck-kpi3-blue::before  { background: #3b82f6; }
.ck-kpi3-teal::before  { background: #0ea5e9; }

.ck-kpi3-label     { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; margin-bottom: 4px; }
.ck-kpi3-num       { font-size: 30px; font-weight: 900; color: #111827; letter-spacing: -1.5px; line-height: 1; margin-bottom: 2px; }
.ck-kpi3-sub       { font-size: 10.5px; color: #9ca3af; }
.ck-kpi3-split     { display: flex; gap: 16px; margin-bottom: 7px; }
.ck-kpi3-split-key { font-size: 9.5px; color: #9ca3af; font-weight: 600; text-transform: uppercase; }
.ck-kpi3-split-val { font-size: 22px; font-weight: 900; color: #111827; letter-spacing: -1px; line-height: 1.1; }
.ck-kpi3-prog-track { height: 4px; background: #e9ecef; border-radius: 99px; overflow: hidden; }
.ck-kpi3-prog-fill  { height: 100%; border-radius: 99px; transition: width .4s, background .3s; width: 0; }
.ck-kpi3-prog-label { display: flex; justify-content: space-between; font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* ── Banner 20% TC (fijo) ───────────────── */
.ck-banner-tc {
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px;
  padding: 7px 14px; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #3730a3; font-weight: 500;
  flex-shrink: 0; flex-wrap: wrap;
}
.ck-banner-icon   { font-size: 14px; }
.ck-banner-accent { font-size: 14px; font-weight: 900; }
.ck-banner-sep    { color: #a5b4fc; margin: 0 2px; }
.ck-banner-detail { color: #6366f1; font-size: 11.5px; font-weight: 400; }

/* ── Gender row (fijo) ──────────────────── */
.ck-gender2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  flex-shrink: 0;
}
.ck-gender2-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 9px 13px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.ck-gender2-icon  { font-size: 22px; flex-shrink: 0; }
.ck-gender2-count { font-size: 24px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.ck-gender2-label { font-size: 12px; font-weight: 600; color: #4b5563; }
.ck-gender2-detail { font-size: 10.5px; color: #9ca3af; margin-top: 1px; }
.ck-gender2-f .ck-gender2-icon  { color: #be185d; }
.ck-gender2-f .ck-gender2-count { color: #be185d; }
.ck-gender2-m .ck-gender2-icon  { color: #1d4ed8; }
.ck-gender2-m .ck-gender2-count { color: #1d4ed8; }

/* ── Coverage panel: EXPANDE + scroll interno ── */
.ck-cov-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Header de coverage no se comprime */
.ck-cov-panel .ck-panel-hdr { flex-shrink: 0; }

/* Anular max-height heredado y hacer el scroll interno */
.ck-cov-panel .ck-panel-body.ck-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none !important;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* ── Fila inferior: altura fija ─────────── */
.ck-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
  height: 150px;       /* altura fija compacta */
}
.ck-bottom-row > .ck-panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Panel header fijo en fila inferior */
.ck-bottom-row .ck-panel-hdr { flex-shrink: 0; padding: 7px 12px; }

/* Age distribution */
.ck-age-wrap2 {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  flex: 1; min-height: 0; overflow: hidden;
}
.ck-age-bars2 { flex: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; }
.ck-age2-label-row { display: flex; justify-content: space-between; margin-bottom: 1px; }
.ck-age2-range { font-size: 10.5px; color: #4b5563; font-weight: 500; }
.ck-age2-count { font-size: 10.5px; font-weight: 700; color: #111827; }
.ck-age2-track { height: 5px; background: #e9ecef; border-radius: 99px; overflow: hidden; }
.ck-age2-fill  { height: 100%; border-radius: 99px; }

.ck-donut-wrap { width: 80px; height: 80px; flex-shrink: 0; position: relative; }
.ck-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.ck-donut-center strong { font-size: 14px; font-weight: 900; color: #111827; }
.ck-donut-center span   { font-size: 8.5px; color: #9ca3af; }

/* Cargo list (employees) — scroll, sin barras */
.ck-cargo-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 10px 6px;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}
.ck-cargo-list { display: flex; flex-direction: column; gap: 1px; }
.ck-cargo2-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px; border-bottom: 1px solid #f3f4f6;
}
.ck-cargo2-item:last-child { border-bottom: none; }
.ck-cargo2-label { font-size: 10.5px; color: #374151; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-cargo2-count { font-size: 11px; font-weight: 800; color: #111827; min-width: 28px; text-align: right; }
.ck-cargo2-pct   { font-size: 10px; color: #6b7280; min-width: 32px; text-align: right; font-weight: 600; }

/* ── Sidebar cards ──────────────────────── */
.ck-side-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04); overflow: hidden;
  flex-shrink: 0;
}
.ck-side-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #4b5563; padding: 8px 11px 6px; border-bottom: 1px solid #f3f4f6;
  display: flex; align-items: center;
}
.ck-side-body { padding: 6px 10px; }

/* Birthday card: scroll interno */
.ck-bday-card { display: flex; flex-direction: column; min-height: 0; }
.ck-bday-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  max-height: 200px;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

.ck-bday-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; }
.ck-bday-item:last-child { border-bottom: none; }
.ck-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800; color: #fff; flex-shrink: 0; }
.ck-bday-body { flex: 1; min-width: 0; }
.ck-bday-name { font-size: 11px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-bday-date { font-size: 10px; color: #9ca3af; }
.ck-bday-today    { background: #fef9c3; color: #92400e; font-weight: 700; font-size: 9.5px; padding: 1px 6px; border-radius: 99px; }
.ck-bday-tomorrow { background: #dbeafe; color: #1d4ed8; font-weight: 700; font-size: 9.5px; padding: 1px 6px; border-radius: 99px; }
.ck-bday-meta { font-size: 9.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-age2-pct { font-size: 9.5px; color: #9ca3af; font-weight: 500; margin-left: 3px; }

.ck-event-item { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; align-items: flex-start; }
.ck-event-item:last-child { border-bottom: none; }
.ck-event-day { min-width: 24px; height: 24px; background: #eef2ff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #3b5bdb; flex-shrink: 0; }
.ck-event-title { font-size: 11px; font-weight: 600; color: #111827; }
.ck-event-time  { font-size: 9.5px; color: #9ca3af; }

.ck-side-alerts .ck-side-title { justify-content: space-between; }
.ck-side-alert-item { display: flex; gap: 7px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; align-items: flex-start; }
.ck-side-alert-item:last-child { border-bottom: none; }
.ck-side-alert-body { flex: 1; min-width: 0; }
.ck-side-alert-type { font-size: 10px; font-weight: 700; color: #374151; margin-bottom: 1px; }
.ck-side-alert-desc { font-size: 10px; color: #6b7280; line-height: 1.35; word-break: break-word; }
.ck-empty2 { font-size: 11px; color: #9ca3af; text-align: center; padding: 12px 6px; }

/* Gear button (events config — admin only) */
.ck-evt-gear { background: none; border: none; cursor: pointer; font-size: 13px; color: #9ca3af; padding: 0 0 0 4px; line-height: 1; transition: color .15s; }
.ck-evt-gear:hover { color: #374151; }

/* Event config modal */
.ck-evt-modal-box { max-width: 480px; }
.ck-evt-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow-y: auto; }
.ck-evt-form-title { font-size: 12px; font-weight: 700; color: #374151; }
.ck-evt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-evt-span2 { grid-column: 1 / -1; }
.ck-evt-label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: #4b5563; }
.ck-evt-input { height: 32px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0 10px; font-size: 12px; outline: none; width: 100%; box-sizing: border-box; }
.ck-evt-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.12); }
.ck-evt-form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ck-evt-msg { font-size: 11.5px; }
.ck-evt-msg-ok  { color: #16a34a; }
.ck-evt-msg-err { color: #dc2626; }
.ck-evt-list-title { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; padding-top: 10px; border-top: 1px solid #f1f5f9; margin-top: 2px; }
.ck-evt-manage-list { display: flex; flex-direction: column; gap: 4px; }
.ck-evt-manage-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: #f8fafc; border-radius: 8px; border: 1px solid #e5e7eb; gap: 10px; }
.ck-evt-manage-info { flex: 1; min-width: 0; }
.ck-evt-manage-title { font-size: 12px; font-weight: 600; color: #111827; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-evt-manage-date  { font-size: 10.5px; color: #9ca3af; }
.ck-evt-del-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.ck-evt-del-btn:hover { background: #fee2e2; }

/* Events sidebar card scroll */
.ck-events-card { display: flex; flex-direction: column; }
.ck-events-scroll { overflow-y: auto; max-height: 130px; scrollbar-width: thin; }
.ck-event-day-today { background: #fef9c3 !important; color: #92400e !important; }

/* ═══════════════════════════════════════════════════════════════════
   FASE 7 — Wizard de Períodos de Nómina   (prefix: pw-)
   ═══════════════════════════════════════════════════════════════════ */

.pw-wrap { display: flex; flex-direction: column; gap: 20px; padding: 16px 20px 32px; max-width: 1200px; }

/* Steps bar */
.pw-steps-bar { display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; width: fit-content; }
.pw-step { padding: 8px 22px; font-size: 12px; font-weight: 600; background: #f8fafc; color: #94a3b8; border-right: 1px solid #e2e8f0; white-space: nowrap; }
.pw-step:last-child { border-right: none; }
.pw-step-active { background: #2563eb; color: #fff; }
.pw-step-done { background: #dcfce7; color: #16a34a; }

/* Breadcrumb */
.pw-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.pw-back-btn { background: none; border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 12px; font-size: 12px; color: #374151; cursor: pointer; transition: background 0.15s; }
.pw-back-btn:hover { background: #f1f5f9; }
.pw-bc-sep { color: #d1d5db; }

/* Period badges */
.pw-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.pw-badge-draft      { background: #fef9c3; color: #854d0e; }
.pw-badge-calculated { background: #dbeafe; color: #1d4ed8; }
.pw-badge-closed     { background: #dcfce7; color: #15803d; }

/* Period list grid */
.pw-periods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pw-period-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.pw-period-card:hover { box-shadow: 0 4px 16px rgba(37,99,235,0.10); transform: translateY(-2px); }
.pw-period-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pw-period-label { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.pw-period-dates { font-size: 12px; color: #6b7280; }
.pw-period-footer { margin-top: 4px; }
.pw-open-btn {
  background: #2563eb; color: #fff; border: none; border-radius: 6px;
  padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.pw-open-btn:hover { background: #1d4ed8; }

/* Empty state */
.pw-empty { text-align: center; padding: 48px 20px; color: #6b7280; }
.pw-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.pw-error { background: #fee2e2; color: #991b1b; border-radius: 8px; padding: 12px 16px; font-size: 13px; }

/* Create form */
.pw-create-form {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; padding: 20px 22px;
}
.pw-section-title { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 14px; }
.pw-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pw-field { display: flex; flex-direction: column; gap: 4px; }
.pw-field-full { grid-column: 1 / -1; }
.pw-label { font-size: 11px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.4px; }
.pw-input, .pw-select, .pw-textarea {
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 13px; color: #0f172a; background: #fff; outline: none; transition: border-color 0.15s;
}
.pw-input:focus, .pw-select:focus, .pw-textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.pw-textarea { resize: vertical; min-height: 60px; }
.pw-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* Novelty form (step 2) */
.pw-nov-form { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; }

/* Panel */
.pw-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.pw-panel-hdr { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
.pw-panel-hdr h4 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.pw-table-wrap { overflow-x: auto; }

/* Footer */
.pw-footer-actions { display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.btn-danger {
  background: #dc2626; color: #fff; border: none; border-radius: 8px;
  padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { background: #fca5a5; cursor: not-allowed; }

/* Totals bar (step 3) */
.pw-totals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pw-total-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 16px; text-align: center;
}
.pw-accent-blue { border-color: #bfdbfe; background: #eff6ff; }
.pw-accent-red  { border-color: #fecaca; background: #fef2f2; }
.pw-accent-green { border-color: #bbf7d0; background: #f0fdf4; }
.pw-total-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.pw-total-value { font-size: 16px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; }
.pw-accent-blue  .pw-total-value { color: #1d4ed8; }
.pw-accent-red   .pw-total-value { color: #dc2626; }
.pw-accent-green .pw-total-value { color: #16a34a; }

@media (max-width: 700px) {
  .pw-totals-row { grid-template-columns: 1fr 1fr; }
  .pw-periods-grid { grid-template-columns: 1fr; }
  .pw-form-grid { grid-template-columns: 1fr; }
  .pw-steps-bar { font-size: 11px; }
  .pw-step { padding: 6px 12px; }
}
/* ═══════════════════════════════════════════════════════════════
   MÓDULO CARGOS Y PERFILES (pos- prefix)
   ═══════════════════════════════════════════════════════════════ */

.pos-wrap { display: flex; flex-direction: column; gap: 20px; padding: 4px 0; }

/* ── Filter bar ── */
.pos-filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 18px;
}
.pos-filter-bar select,
.pos-filter-bar input[type="text"] {
  padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 13px; color: #0f172a; background: #fff; outline: none;
  transition: border-color 0.15s; min-width: 130px;
}
.pos-filter-bar select:focus,
.pos-filter-bar input[type="text"]:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.pos-filter-search { flex: 1; min-width: 180px; }

/* ── Table ── */
.pos-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.pos-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.pos-table thead tr { background: #f8fafc; }
.pos-table th {
  padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700;
  color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid #e2e8f0;
}
.pos-table td {
  padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
}
.pos-table tbody tr:last-child td { border-bottom: none; }
.pos-table tbody tr:hover { background: #f8fafc; }
.pos-table .pos-name-cell { font-weight: 600; }
.pos-table .pos-company-cell { color: #374151; }
.pos-table .pos-area-cell { color: #6b7280; font-size: 12px; }

/* ── Category badges ── */
.pos-cat-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.pos-cat-oferta { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.pos-cat-extra  { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.pos-cat-admin  { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.pos-cat-op     { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.pos-cat-pro    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* ── Status badges ── */
.pos-status-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.pos-status-active   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.pos-status-inactive { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

/* ── Bool badge ── */
.pos-bool-badge { font-size: 12px; }
.pos-bool-yes { color: #16a34a; font-weight: 700; }
.pos-bool-no  { color: #9ca3af; }

/* ── Table actions ── */
.pos-table-actions { display: flex; gap: 6px; align-items: center; }
.pos-btn-view {
  background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe;
  border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.pos-btn-view:hover { background: #dbeafe; }
.pos-btn-toggle {
  background: transparent; border: 1px solid #e2e8f0; border-radius: 7px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; transition: all 0.15s; color: #6b7280;
}
.pos-btn-toggle:hover { border-color: #6b7280; color: #0f172a; }

/* ── Toolbar ── */
.pos-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.pos-count { font-size: 13px; color: #6b7280; }

/* ── Empty / error states ── */
.pos-empty { text-align: center; padding: 48px 20px; color: #9ca3af; font-size: 14px; }
.pos-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 14px 18px; color: #dc2626; font-size: 13px; }

/* ══════════════════════════════════════════════
   FORMULARIO CREAR / EDITAR CARGO
   ══════════════════════════════════════════════ */

.pos-form-wrap {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 24px 28px;
}
.pos-form-wrap h3 { margin: 0 0 18px; font-size: 16px; font-weight: 800; color: #0f172a; }
.pos-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 18px;
}
.pos-field { display: flex; flex-direction: column; gap: 5px; }
.pos-field-full { grid-column: 1 / -1; }
.pos-label { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.4px; }
.pos-input, .pos-select, .pos-textarea {
  padding: 8px 11px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 13px; color: #0f172a; background: #fff; outline: none;
  transition: border-color 0.15s;
}
.pos-input:focus, .pos-select:focus, .pos-textarea:focus {
  border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.pos-textarea { resize: vertical; min-height: 72px; }
.pos-check-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pos-check-label { font-size: 13px; color: #374151; font-weight: 500; }
.pos-toggle-input {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 20px; border-radius: 999px;
  background: #d1d5db; transition: background 0.2s; cursor: pointer;
  position: relative; flex-shrink: 0;
}
.pos-toggle-input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 999px; background: #fff;
  transition: left 0.2s;
}
.pos-toggle-input:checked { background: #2563eb; }
.pos-toggle-input:checked::after { left: 21px; }
.pos-form-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ══════════════════════════════════════════════
   DETALLE — tabs
   ══════════════════════════════════════════════ */

.pos-detail-wrap { display: flex; flex-direction: column; gap: 0; }
.pos-detail-hdr {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px 14px 0 0;
  padding: 18px 24px 0; border-bottom: none;
}
.pos-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pos-detail-name { font-size: 20px; font-weight: 800; color: #0f172a; flex: 1; }
.pos-detail-company { font-size: 13px; color: #6b7280; }
.pos-tabs { display: flex; gap: 0; border-bottom: 2px solid #e2e8f0; overflow-x: auto; }
.pos-tab-btn {
  padding: 10px 18px; font-size: 13px; font-weight: 600; color: #6b7280;
  border: none; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.pos-tab-btn:hover { color: #0f172a; }
.pos-tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; }
.pos-tab-panel {
  background: #fff; border: 1px solid #e2e8f0; border-top: none;
  border-radius: 0 0 14px 14px; padding: 24px 28px;
}

/* Datos tab — summary grid */
.pos-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pos-summary-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px;
}
.pos-summary-card .pos-summary-key { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; }
.pos-summary-card .pos-summary-val { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 4px; }

/* Profile tab */
.pos-profile-form { display: flex; flex-direction: column; gap: 16px; }
.pos-profile-field { display: flex; flex-direction: column; gap: 6px; }
.pos-profile-label { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.4px; }
.pos-profile-textarea {
  padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 13px; color: #0f172a; resize: vertical; min-height: 72px;
  font-family: inherit; transition: border-color 0.15s;
}
.pos-profile-textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); outline: none; }
.pos-readonly-val {
  padding: 9px 12px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; font-size: 13px; color: #374151; min-height: 40px; white-space: pre-wrap;
}
.pos-profile-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* Nómina tab — payroll value cards */
.pos-payroll-list { display: flex; flex-direction: column; gap: 14px; }
.pos-payroll-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px;
}
.pos-payroll-card-hdr {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.pos-payroll-card-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.pos-payroll-card-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pos-payroll-card-active   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.pos-payroll-card-inactive { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.pos-payroll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.pos-payroll-item-key { font-size: 11px; color: #6b7280; margin-bottom: 2px; }
.pos-payroll-item-val { font-size: 13px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.pos-payroll-item-val.pos-green { color: #15803d; }
.pos-new-payroll-form {
  background: #fff; border: 2px dashed #d1d5db; border-radius: 12px; padding: 18px 20px;
}
.pos-new-payroll-form h4 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #374151; }
.pos-new-payroll-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pos-new-payroll-grid .pos-field-full { grid-column: 1 / -1; }
.pos-show-form-btn {
  background: transparent; border: 1px dashed #d1d5db; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; color: #6b7280; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.pos-show-form-btn:hover { border-color: #2563eb; color: #2563eb; }

/* Documents tab */
.pos-doc-list { display: flex; flex-direction: column; gap: 0; }
.pos-doc-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.pos-doc-item:last-child { border-bottom: none; }
.pos-doc-checkbox { width: 17px; height: 17px; accent-color: #2563eb; cursor: pointer; }
.pos-doc-name { font-size: 13px; color: #0f172a; flex: 1; }
.pos-doc-required { font-size: 11px; color: #6b7280; }
.pos-doc-saving { font-size: 11px; color: #2563eb; margin-left: 6px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pos-summary-grid  { grid-template-columns: 1fr 1fr; }
  .pos-payroll-grid  { grid-template-columns: 1fr 1fr; }
  .pos-new-payroll-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pos-form-grid     { grid-template-columns: 1fr; }
  .pos-summary-grid  { grid-template-columns: 1fr; }
  .pos-filter-bar    { flex-direction: column; align-items: stretch; }
  .pos-toolbar       { flex-direction: column; align-items: stretch; }
  .pos-tab-btn       { padding: 8px 12px; font-size: 12px; }
  .pos-detail-name   { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   MÓDULO CALCULADORA DE PERSONAL (cc- prefix)
   ═══════════════════════════════════════════════════════════════ */

.cc-wrap { display: flex; flex-direction: column; gap: 22px; padding: 4px 0; max-width: 900px; margin: 0 auto; }
.cc-wrap-full { max-width: 100%; }

/* ── Pestañas ── */
.cc-tabs {
  display: flex; gap: 0;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 6px; overflow: hidden;
}
.cc-tab {
  flex: 1; padding: 10px 20px; font-size: 13px; font-weight: 600;
  color: #64748b; background: none; border: none; border-radius: 10px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.cc-tab:hover { background: #f1f5f9; color: #334155; }
.cc-tab.active { background: #1e40af; color: #fff; }

/* ── Tab panels ── */
.cc-tab-panel { display: none; flex-direction: column; gap: 22px; }
.cc-tab-panel.active { display: flex; }

/* ── Salary calculator grid ── */
.cs-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.cc-input-prefix {
  display: flex; align-items: center; padding: 0 10px;
  font-weight: 700; color: #374151; font-size: 14px;
  border-right: 1px solid #e2e8f0;
}
.cc-input-hint {
  font-size: 11px; color: #94a3b8; margin-top: 2px;
}
.cs-aux-row {
  display: flex; flex-direction: column; gap: 4px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 16px;
}
.cs-aux-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #374151; cursor: pointer;
}
.cs-aux-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ── Salary result panel ── */
.cs-result-inner { display: flex; flex-direction: column; gap: 0; }
.cs-result-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.cs-result-dias  { font-size: 12px; color: #64748b; font-weight: 500; }
.cs-result-section {
  border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 18px; margin-top: 14px;
}
.cs-result-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #64748b; margin-bottom: 10px;
}
.cs-result-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #374151; padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}
.cs-result-row:last-child { border-bottom: none; }
.cs-result-subtotal { font-weight: 700; padding-top: 8px; margin-top: 4px; border-top: 1px solid #e2e8f0; border-bottom: none; }
.cs-ded { color: #dc2626; }
.cs-result-neto {
  display: flex; justify-content: space-between; align-items: center;
  background: #1e40af; color: #fff; border-radius: 12px;
  padding: 16px 20px; margin-top: 14px; font-size: 16px; font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════
   Calculadora de Salario v2 (prefix: cs2-)
   ═══════════════════════════════════════════════════════════════════ */

.cs2-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin: 0 auto; padding: 16px 4px 32px; }

/* Steps */
.cs2-step { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: opacity .2s, filter .2s; }
.cs2-step--locked { opacity: .4; pointer-events: none; filter: grayscale(.3); }
.cs2-step-hdr { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.cs2-step-num { width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs2-step-title { font-size: 14px; font-weight: 700; color: #111827; }
.cs2-step-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* ── Chips de modalidad ── */
.cs2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid #e2e8f0; border-radius: 8px;
  padding: 7px 14px; cursor: pointer;
  transition: border-color .13s, background .13s, color .13s;
  background: #fff; user-select: none;
}
.cs2-chip:hover { border-color: #94a3b8; background: #f8fafc; }
.cs2-chip--active { border-color: currentColor !important; }

.cs2-chip-code { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; }

/* colores por grupo */
.cs2-chip--green .cs2-chip-code { color: #059669; }
.cs2-chip--green:hover            { border-color: #6ee7b7; background: #f0fdf4; }
.cs2-chip--green.cs2-chip--active { background: #f0fdf4; border-color: #059669; }

.cs2-chip--blue .cs2-chip-code  { color: #2563eb; }
.cs2-chip--blue:hover             { border-color: #93c5fd; background: #eff6ff; }
.cs2-chip--blue.cs2-chip--active  { background: #eff6ff; border-color: #2563eb; }

.cs2-chip--amber .cs2-chip-code { color: #d97706; }
.cs2-chip--amber:hover            { border-color: #fcd34d; background: #fffbeb; }
.cs2-chip--amber.cs2-chip--active { background: #fffbeb; border-color: #d97706; }

/* ── Leyenda de modalidades ── */
.cs2-mod-legend { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.cs2-mod-legend-title { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .07em; padding: 9px 14px 7px; border-bottom: 1px solid #e2e8f0; background: #f1f5f9; }
.cs2-mod-legend-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cs2-mod-legend-table thead th { padding: 7px 12px; text-align: left; font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #e2e8f0; }
.cs2-mod-legend-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.cs2-mod-legend-table tbody tr:last-child { border-bottom: none; }
.cs2-mod-legend-table tbody td { padding: 8px 12px; vertical-align: middle; color: #374151; line-height: 1.45; }
.cs2-legend-row--active { background: #f0f9ff !important; }
.cs2-legend-badge { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 2px 8px; color: #fff; white-space: nowrap; }
.cs2-legend-badge--caares { background: #059669; }
.cs2-legend-badge--caa    { background: #2563eb; }
.cs2-legend-badge--ri     { background: #d97706; }
.cs2-legend-jornada { font-size: 11.5px; color: #475569; }

/* Info box */
.cs2-info-box { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 0; overflow: hidden; }

/* Selección info expandida */
.cs2-sel-info { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.cs2-sel-info-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cs2-sel-info-desc { font-size: 12.5px; color: #0369a1; line-height: 1.5; flex: 1; min-width: 0; }
.cs2-sel-info-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cs2-sel-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #0c4a6e; background: rgba(14,165,233,.08); border: 1px solid rgba(14,165,233,.18); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.cs2-sel-pill--salary { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.2); color: #064e3b; }
.cs2-sel-pill strong { font-weight: 700; }

/* Check row */
.cs2-check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #374151; }
.cs2-check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0; }

/* Sub-field (conditional) */
.cs2-sub { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.cs2-field-label { font-size: 12.5px; font-weight: 700; color: #374151; }
.cs2-num-wrap { display: flex; align-items: center; gap: 8px; }
.cs2-num-input { height: 36px; width: 100px; border: 1.5px solid #d1d5db; border-radius: 8px; padding: 0 10px; font-size: 15px; font-weight: 700; text-align: center; outline: none; }
.cs2-num-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.cs2-num-unit { font-size: 13px; color: #6b7280; font-weight: 500; }
.cs2-num-sm { width: 68px; font-size: 13px; }
.cs2-hint { font-size: 11.5px; color: #9ca3af; margin: 0; line-height: 1.4; }

/* Novelties list */
.cs2-nov-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cs2-nov-item { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cs2-nov-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs2-nov-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.cs2-nov-check input[type=checkbox] { width: 16px; height: 16px; margin-top: 3px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0; }
.cs2-nov-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs2-nov-name { font-size: 12.5px; font-weight: 700; color: #111827; }
.cs2-nov-desc { font-size: 11px; color: #6b7280; line-height: 1.4; }
.cs2-nov-badge { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
.cs2-nov-badge--paid   { background: #dcfce7; color: #15803d; }
.cs2-nov-badge--unpaid { background: #fee2e2; color: #dc2626; }
.cs2-nov-days { display: flex; align-items: center; gap: 6px; padding-left: 26px; }

/* Calc row */
.cs2-calc-row { display: flex; justify-content: center; }

/* Result */
.cs2-result-wrap { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.cs2-result-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #1e40af; color: #fff; }
.cs2-result-mod-badge { background: rgba(255,255,255,.2); border-radius: 8px; padding: 3px 12px; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.cs2-result-title { font-size: 14px; font-weight: 700; }
.cs2-result-section { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
.cs2-section-info { background: #f0f9ff; }
.cs2-result-section-title { font-size: 10.5px; font-weight: 800; color: #9ca3af; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.cs2-result-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 0; font-size: 13px; color: #374151; gap: 16px; }
.cs2-result-row span { flex: 1; }
.cs2-result-row strong { flex-shrink: 0; }
.cs2-row-ded strong { color: #dc2626; }
.cs2-result-subtotal { border-top: 1px dashed #e5e7eb; margin-top: 8px; padding-top: 10px; font-weight: 700; color: #111827; }
.cs2-ded-val { color: #dc2626; }
.cs2-covered { color: #15803d; }
.cs2-neto-box { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); color: #fff; }
.cs2-neto-label { font-size: 16px; font-weight: 700; }
.cs2-neto-value { font-size: 30px; font-weight: 900; letter-spacing: -0.5px; }
.cs2-result-note { font-size: 10.5px; color: #9ca3af; padding: 10px 20px 16px; margin: 0; line-height: 1.6; border-top: 1px solid #f1f5f9; }

/* ═══════════════════════════════════════════════════════════════════
   Calculadora de Salario — 3 cards reactivas (prefix: cs3-)
   ═══════════════════════════════════════════════════════════════════ */

/* Layout principal */
.cs3-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px 16px 20px;
  height: 100%;
  align-items: stretch;
  box-sizing: border-box;
}

/* Card base */
.cs3-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* Card header */
.cs3-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.cs3-card-hdr--result {
  background: #1e3a8a;
  border-bottom: none;
}

/* Número de distinción */
.cs3-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: #2563eb; color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cs3-num--result { background: rgba(255,255,255,.25); }

/* Título */
.cs3-card-title { font-size: 13.5px; font-weight: 700; color: #111827; }
.cs3-card-title--result { color: #fff; }

/* Card body */
.cs3-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

/* ── Chips ── */
.cs3-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cs3-chip {
  display: inline-flex; align-items: center;
  border: 2px solid #e2e8f0; border-radius: 8px;
  padding: 6px 13px; cursor: pointer;
  transition: border-color .12s, background .12s;
  background: #fff; user-select: none;
  font-size: 12px; font-weight: 800;
}
.cs3-chip:hover { background: #f8fafc; border-color: #94a3b8; }
.cs3-chip--green { color: #059669; }
.cs3-chip--green:hover, .cs3-chip--green.cs3-chip--active { border-color: #059669; background: #f0fdf4; }
.cs3-chip--blue  { color: #2563eb; }
.cs3-chip--blue:hover, .cs3-chip--blue.cs3-chip--active  { border-color: #2563eb; background: #eff6ff; }
.cs3-chip--amber { color: #d97706; }
.cs3-chip--amber:hover, .cs3-chip--amber.cs3-chip--active { border-color: #d97706; background: #fffbeb; }

/* ── Leyenda modalidades ── */
.cs3-legend { display: flex; flex-direction: column; gap: 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.cs3-legend-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
  transition: background .1s; cursor: default;
}
.cs3-legend-row:last-child { border-bottom: none; }
.cs3-legend-row--active { background: #eff6ff !important; }
.cs3-legend-badge {
  display: inline-block; font-size: 10px; font-weight: 800;
  border-radius: 5px; padding: 2px 7px; color: #fff; white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.cs3-legend-badge--caares { background: #059669; }
.cs3-legend-badge--caa    { background: #2563eb; }
.cs3-legend-badge--ri     { background: #d97706; }
.cs3-legend-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs3-legend-desc { font-size: 11.5px; color: #374151; line-height: 1.4; }
.cs3-legend-meta { font-size: 10.5px; color: #6b7280; }
.cs3-legend-meta strong { font-weight: 700; color: #374151; }

/* ── Opciones de modalidad (card 1) ── */
.cs3-mod-list { display: flex; flex-direction: column; gap: 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.cs3-mod-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; transition: background .1s; user-select: none;
}
.cs3-mod-opt:last-child { border-bottom: none; }
.cs3-mod-opt:hover { background: #f8fafc; }
.cs3-mod-opt--active { background: #eff6ff !important; }
.cs3-mod-radio {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d1d5db;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.cs3-mod-opt--active .cs3-mod-radio {
  border-color: #2563eb; background: #2563eb;
  box-shadow: inset 0 0 0 3px #fff;
}
.cs3-mod-code {
  font-size: 10px; font-weight: 800; border-radius: 5px;
  padding: 2px 7px; color: #fff; white-space: nowrap; flex-shrink: 0;
}
.cs3-mod-code--caares { background: #059669; }
.cs3-mod-code--caa    { background: #2563eb; }
.cs3-mod-code--ri     { background: #d97706; }
.cs3-mod-desc { font-size: 11px; color: #374151; line-height: 1.35; flex: 1; min-width: 0; }
.cs3-mod-salary { font-size: 11.5px; font-weight: 700; color: #0f172a; white-space: nowrap; flex-shrink: 0; }

/* ── Subsección de novedades en resultado ── */
.cs3-rs-subt {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 0 2px; margin-top: 4px;
}
.cs3-rs-subt--red   { color: #dc2626; }
.cs3-rs-subt--amber { color: #d97706; }
.cs3-rs-none-row span { font-size: 11.5px; color: #9ca3af; font-style: italic; }
.cs3-rs-warn b { color: #d97706; }

/* ── Preguntas (card 2) ── */
.cs3-q-block { display: flex; flex-direction: column; gap: 8px; }
.cs3-q-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cs3-checkbox { width: 17px; height: 17px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0; }
.cs3-q-text { font-size: 13px; font-weight: 600; color: #111827; }
.cs3-q-sub {
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-left: 27px;
}
.cs3-q-sublabel { font-size: 11.5px; font-weight: 700; color: #475569; }
.cs3-num-row { display: flex; align-items: center; gap: 8px; }
.cs3-num-input {
  height: 34px; width: 88px; border: 1.5px solid #d1d5db; border-radius: 8px;
  padding: 0 10px; font-size: 14px; font-weight: 700; text-align: center; outline: none;
}
.cs3-num-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.cs3-num-unit { font-size: 12.5px; color: #6b7280; }
.cs3-hint { font-size: 11px; color: #9ca3af; margin: 0; line-height: 1.4; }
.cs3-select {
  width: 100%; height: 34px; border: 1.5px solid #d1d5db; border-radius: 8px;
  padding: 0 10px; font-size: 12.5px; font-weight: 500; outline: none; background: #fff;
}
.cs3-select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.cs3-btn-add {
  align-self: flex-start; padding: 7px 14px; background: #2563eb; color: #fff;
  border: none; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .13s;
}
.cs3-btn-add:hover { background: #1d4ed8; }

/* Novedades agregadas */
.cs3-nov-list { display: flex; flex-direction: column; gap: 6px; }
.cs3-nov-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px;
}
.cs3-nov-item-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cs3-nov-item-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cs3-nov-tag { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.cs3-nov-tag--paid   { background: #dcfce7; color: #15803d; }
.cs3-nov-tag--unpaid { background: #fee2e2; color: #dc2626; }
.cs3-nov-name { font-size: 11.5px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs3-nov-days-badge { font-size: 11px; font-weight: 700; color: #6b7280; background: #f1f5f9; border-radius: 5px; padding: 2px 7px; }
.cs3-nov-remove {
  width: 22px; height: 22px; border: none; background: #fee2e2; color: #dc2626;
  border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.cs3-nov-remove:hover { background: #fecaca; }

/* ── Card resultado (card 3) ── */
.cs3-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 16px; text-align: center; }
.cs3-empty-icon { font-size: 36px; opacity: .4; }
.cs3-empty p { font-size: 13px; color: #9ca3af; margin: 0; line-height: 1.5; }

.cs3-result-inner { display: flex; flex-direction: column; gap: 0; }
.cs3-result-top { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.cs3-result-cfg-name { font-size: 13px; font-weight: 600; color: #374151; }

.cs3-rs { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.cs3-rs--info { background: #f0f9ff; border-color: #bae6fd; }
.cs3-rs-title { font-size: 10.5px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .06em; padding: 7px 12px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.cs3-rs--info .cs3-rs-title { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.cs3-rs-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; font-size: 12.5px; color: #374151; border-bottom: 1px solid #f8fafc; gap: 8px; }
.cs3-rs-row:last-child { border-bottom: none; }
.cs3-rs-row span { flex: 1; }
.cs3-rs-row b { font-weight: 700; flex-shrink: 0; }
.cs3-rs-neg b { color: #dc2626; }
.cs3-rs-sub { background: #f8fafc; font-weight: 700; }
.cs3-rs-sub b { color: #111827; }
.cs3-covered { color: #059669 !important; }
.cs3-ded { color: #dc2626; }

.cs3-neto {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: 12px; color: #fff; margin-bottom: 8px;
}
.cs3-neto-lbl { font-size: 13px; font-weight: 700; }
.cs3-neto-val { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }

.cs3-note { font-size: 10px; color: #9ca3af; margin: 0; line-height: 1.5; text-align: center; }

/* ── Header ── */
.cc-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: linear-gradient(135deg,#eff6ff 0%,#f0fdf4 100%); border: 1px solid #bfdbfe; border-radius: 14px; }
.cc-header-icon { font-size: 36px; flex-shrink: 0; }
.cc-title  { margin: 0 0 4px; font-size: 20px; font-weight: 900; color: #0f172a; }
.cc-subtitle { margin: 0; font-size: 13px; color: #6b7280; }

/* ── Card ── */
.cc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.cc-card-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }

/* ── Section label ── */
.cc-section-label { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Modality selector ── */
.cc-modality-group { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-modality-option { cursor: pointer; }
.cc-modality-option input[type="radio"] { display: none; }
.cc-modality-pill {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 18px; border: 2px solid #e2e8f0; border-radius: 12px;
  background: #f8fafc; transition: all 0.15s; cursor: pointer; min-width: 160px;
}
.cc-modality-option input[type="radio"]:checked + .cc-modality-pill {
  border-color: #2563eb; background: #eff6ff;
}
.cc-modality-name { font-size: 16px; font-weight: 900; color: #0f172a; }
.cc-modality-desc { font-size: 11px; color: #6b7280; }
.cc-modality-option input[type="radio"]:checked + .cc-modality-pill .cc-modality-name { color: #2563eb; }

/* ── Cupos input ── */
.cc-input-row { display: flex; flex-direction: column; gap: 7px; }
.cc-input-label { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; }
.cc-input-wrap { position: relative; display: flex; align-items: center; max-width: 260px; }
.cc-cupos-input {
  width: 100%; padding: 11px 70px 11px 14px; border: 2px solid #d1d5db; border-radius: 10px;
  font-size: 22px; font-weight: 700; color: #0f172a; outline: none; transition: border-color 0.15s;
  font-variant-numeric: tabular-nums;
}
.cc-cupos-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.cc-input-unit { position: absolute; right: 14px; font-size: 12px; color: #9ca3af; font-weight: 600; pointer-events: none; }

/* ── Formula box ── */
.cc-formula-box { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.cc-formula-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; white-space: nowrap; }
.cc-formula-text { font-size: 13px; color: #0f172a; font-family: monospace; }

/* ── Live preview ── */
.cc-preview { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 16px; }
.cc-preview-inner { display: flex; flex-direction: column; gap: 4px; }
.cc-preview-raw { font-size: 13px; color: #374151; }
.cc-preview-final { font-size: 15px; font-weight: 700; color: #15803d; }

/* ── Calculate button ── */
.cc-btn-calc {
  align-self: flex-start; padding: 12px 28px; background: #2563eb; color: #fff;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.cc-btn-calc:hover:not(:disabled) { background: #1d4ed8; }
.cc-btn-calc:disabled { background: #93c5fd; cursor: not-allowed; }

/* ── Result panel ── */
.cc-result-panel { background: #fff; border: 2px solid #2563eb; border-radius: 14px; }
.cc-result-inner { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.cc-result-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-result-cupos { font-size: 14px; color: #6b7280; font-weight: 600; }
.cc-result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.cc-result-card {
  border-radius: 12px; padding: 16px 14px; text-align: center; border: 1px solid transparent;
}
.cc-result-blue  { background: #eff6ff; border-color: #bfdbfe; }
.cc-result-amber { background: #fffbeb; border-color: #fde68a; }
.cc-result-green { background: #f0fdf4; border-color: #bbf7d0; }
.cc-result-gray  { background: #f9fafb; border-color: #e5e7eb; }
.cc-result-card-value { font-size: 32px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; }
.cc-result-blue .cc-result-card-value  { color: #1d4ed8; }
.cc-result-amber .cc-result-card-value { color: #b45309; }
.cc-result-green .cc-result-card-value { color: #15803d; }
.cc-result-gray .cc-result-card-value  { color: #9ca3af; }
.cc-result-card-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.cc-result-summary { font-size: 15px; color: #0f172a; padding: 12px 14px; background: #f8fafc; border-radius: 8px; }
.cc-result-raw { font-size: 12px; color: #9ca3af; }
.cc-result-saved { font-size: 12px; color: #15803d; font-weight: 600; }
.cc-result-error { padding: 14px 18px; color: #dc2626; font-size: 13px; }

/* ── Modality badges ── */
.cc-mod-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.cc-mod-caa    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.cc-mod-caares { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.cc-mod-ri     { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* ── Audit section ── */
.cc-audit-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.cc-audit-hdr { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.cc-audit-title { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.cc-btn-refresh { background: transparent; border: 1px solid #d1d5db; border-radius: 7px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: #374151; transition: all 0.15s; }
.cc-btn-refresh:hover { border-color: #2563eb; color: #2563eb; }
.cc-audit-empty { padding: 28px 20px; color: #9ca3af; font-size: 13px; text-align: center; margin: 0; }
.cc-audit-table-wrap { overflow-x: auto; }
.cc-audit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cc-audit-table th { padding: 9px 12px; text-align: left; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #f1f5f9; background: #fff; }
.cc-audit-table td { padding: 9px 12px; border-bottom: 1px solid #f9fafb; color: #374151; }
.cc-audit-table tbody tr:last-child td { border-bottom: none; }
.cc-audit-table tbody tr:hover { background: #f8fafc; }
.cc-audit-user { font-weight: 600; color: #0f172a; }
.cc-audit-role { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 2px 7px; border-radius: 999px; }
.cc-audit-ip { font-family: monospace; font-size: 11px; color: #9ca3af; }
.cc-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cc-num-blue  { color: #1d4ed8; }
.cc-num-amber { color: #b45309; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .cc-card-body       { padding: 18px 16px; }
  .cc-result-inner    { padding: 18px 16px; }
  .cc-modality-group  { flex-direction: column; }
  .cc-modality-pill   { min-width: unset; }
  .cc-result-grid     { grid-template-columns: 1fr 1fr; }
  .cc-result-grid > .cc-result-green { grid-column: 1 / -1; }
  .cc-cupos-input     { font-size: 18px; }
  .cc-wrap            { gap: 16px; }
}

/* ═══════════════════════════════════════════════
   FIX: Coverage history chip text overflow
   ═══════════════════════════════════════════════ */
.coverage-history-chip {
  flex: 0 0 auto !important;
  min-width: 150px;
  max-width: 210px;
  width: auto;
  white-space: normal;
}
.coverage-history-chip small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.coverage-history-chip strong { white-space: nowrap; }
.coverage-history-chip span   { white-space: nowrap; }

/* ═══════════════════════════════════════════════
   Dashboard: new small KPI card color variants
   ═══════════════════════════════════════════════ */
.ck-kpi-indigo { border-left: 3px solid #6366f1; background: #f5f3ff; }
.ck-kpi-indigo .ck-kpi-sm-val { color: #4338ca; }
.ck-kpi-pink   { border-left: 3px solid #ec4899; background: #fdf2f8; }
.ck-kpi-pink   .ck-kpi-sm-val { color: #be185d; }
.ck-kpi-sky    { border-left: 3px solid #0ea5e9; background: #f0f9ff; }
.ck-kpi-sky    .ck-kpi-sm-val { color: #0369a1; }

/* ═══════════════════════════════════════════════
   Dashboard: age distribution bars
   ═══════════════════════════════════════════════ */
.ck-age-row {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.ck-age-label { font-size: 12px; color: #64748b; font-weight: 600; white-space: nowrap; }
.ck-age-track { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.ck-age-fill  { height: 100%; background: linear-gradient(90deg,#2563eb,#7c3aed); border-radius: 999px; transition: width .4s; }
.ck-age-count { font-size: 12px; font-weight: 700; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   XP — EXPORT PERSONNEL MODAL
   ============================================================ */

/* Modal card overrides */
.xp-modal {
  width: 80vw;
  max-width: 900px;
  height: auto;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.xp-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%);
  border-bottom: none;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.xp-header .modal-close {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
}
.xp-header .modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.2);
}
.xp-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.xp-header-icon {
  font-size: 22px;
  line-height: 1;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.xp-title {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
}
.xp-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
}

/* Toolbar */
.xp-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.xp-sel-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.xp-sel-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}
.xp-counter {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

/* Body — grid de grupos, sin scroll */
.xp-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
  align-content: start;
}

/* Group — card */
.xp-group {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.xp-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.xp-group-icon {
  font-size: 14px;
  line-height: 1;
}
.xp-group-label {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Columns grid — 2 columnas dentro de cada grupo */
.xp-cols-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: #e2e8f0 !important;
  padding: 0 !important;
}

.xp-col-item:hover {
  background: #f0f7ff;
}

/* Hide native checkbox */
.xp-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox */
.xp-check-box {
  width: 17px;
  height: 17px;
  border: 1.8px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.xp-check:checked ~ .xp-check-box {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.xp-check:checked ~ .xp-check-box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.xp-col-label {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.3;
}
.xp-check:checked ~ .xp-check-box + .xp-col-label,
.xp-col-item:has(.xp-check:checked) .xp-col-label {
  color: #1e40af;
  font-weight: 600;
}

/* Filter row — ocupa todo el ancho */
.xp-filter-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 16px;
  flex-wrap: wrap;
}
.xp-filter-field {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.xp-filter-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}
.xp-select {
  padding: 7px 10px;
  font-size: 13px;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  width: 100%;
}
.xp-select:focus {
  border-color: #93c5fd;
  background: #fff;
}
.xp-record-badge {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  white-space: nowrap;
}

/* Footer */
.xp-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
.xp-btn-export {
  flex: 1;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 10px 20px;
  border-radius: 10px;
  transition: opacity 0.15s, transform 0.1s;
}
.xp-btn-export:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.xp-btn-export:not(:disabled):hover {
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 540px) {
  .xp-modal { max-height: 95vh; }
  .xp-cols-grid { grid-template-columns: 1fr 1fr; }
  .xp-filter-row { flex-direction: column; align-items: stretch; }
  .xp-record-badge { text-align: center; }
  .xp-footer { flex-direction: column-reverse; }
  .xp-btn-export { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   MÓDULO DE NÓMINA — nm-* prefix
   ══════════════════════════════════════════════════════════════════ */

.nm-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 48px;
  width: 100%;
  min-width: 0;
}

/* ── Cards ── */
.nm-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
}

.nm-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(to right, #fafbff, #fff);
}

.nm-card-head-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.nm-step-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 6px rgba(37,99,235,.3);
}

.nm-card-title {
  margin: 0 0 3px;
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nm-card-title-icon {
  font-size: 17px;
  line-height: 1;
}

.nm-card-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
}

/* ── Hero steps pill row ── */
.nm-hero-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.nm-hero-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 5px 7px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.nm-hero-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Buttons ── */
.nm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
  text-decoration: none;
}
.nm-btn:disabled { opacity: .5; cursor: not-allowed; }
.nm-btn-primary  { background: #2563eb; color: #fff; border-color: #2563eb; }
.nm-btn-primary:hover:not(:disabled)  { background: #1d4ed8; border-color: #1d4ed8; }
.nm-btn-secondary { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.nm-btn-secondary:hover:not(:disabled) { background: #e2e8f0; }
.nm-btn-ghost    { background: transparent; color: #475569; border-color: #e2e8f0; }
.nm-btn-ghost:hover:not(:disabled) { background: #f8fafc; }
.nm-btn-danger   { background: #dc2626; color: #fff; border-color: #dc2626; }
.nm-btn-danger:hover:not(:disabled) { background: #b91c1c; }
.nm-btn-done     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-size: 12px; padding: 6px 12px; }
.nm-btn-done:hover:not(:disabled) { background: #dcfce7; }

/* ── Forms ── */
.nm-create-form {
  padding: 16px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.nm-create-form.hidden { display: none; }

.nm-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.nm-form-row-5 {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.nm-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nm-label-full { grid-column: 1 / -1; }

.nm-input, .nm-select, .nm-textarea {
  padding: 8px 11px;
  font-size: 13px;
  color: #1e293b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.nm-input:focus, .nm-select:focus, .nm-textarea:focus { border-color: #93c5fd; }
.nm-select { cursor: pointer; }
.nm-select-period { font-size: 13.5px; }
.nm-textarea { resize: vertical; min-height: 60px; }

.nm-req { color: #ef4444; font-size: 11px; }

.nm-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ── Period ── */
.nm-period-selector { padding: 18px 24px; }
.nm-period-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 16px;
}
.nm-period-dates { font-size: 13px; color: #475569; font-weight: 500; }
.nm-period-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nm-ps-borrador  { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.nm-ps-calculado { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.nm-ps-cerrado   { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.nm-empty-hint   { color: #94a3b8; font-size: 13px; padding: 16px 24px; }

/* ── Table ── */
.nm-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 500px;
  padding: 0 20px 20px;
  -webkit-overflow-scrolling: touch;
}
.nm-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.nm-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.nm-table th:first-child { border-radius: 10px 0 0 0; }
.nm-table th:last-child  { border-radius: 0 10px 0 0; }
.nm-table td {
  padding: 11px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  color: #1e293b;
}
.nm-table tr:last-child td { border-bottom: none; }
.nm-table tr:hover td { background: #f8fafc; }
.nm-table-empty {
  text-align: center;
  color: #94a3b8;
  padding: 32px 16px !important;
  font-size: 13px;
}
.nm-name-cell { font-weight: 600; color: #0f172a; }
.nm-doc-cell  { font-size: 11.5px; color: #64748b; margin-top: 1px; }
.nm-num  { font-variant-numeric: tabular-nums; font-weight: 500; }
.nm-neto { font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; }
.nm-review-note { font-size: 11px; color: #ef4444; margin-top: 3px; font-style: italic; }

/* ── Badges ── */
.nm-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.nm-badge-pending  { background: #fef9c3; color: #92400e; border: 1px solid #fde047; }
.nm-badge-approved { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.nm-badge-rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.nm-badge-annulled { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }

/* ── Type / modality chips ── */
.nm-type-chip {
  display: inline-block;
  padding: 3px 8px;
  background: #eff6ff;
  color: #1e40af;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.nm-mod-chip { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.nm-mod-caa    { background: #eff6ff; color: #1e40af; }
.nm-mod-caares { background: #fdf4ff; color: #7e22ce; }
.nm-mod-ri     { background: #fff7ed; color: #c2410c; }

/* ── Action buttons ── */
.nm-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.nm-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s;
}
.nm-action-btn:disabled { opacity: .5; cursor: not-allowed; }
.nm-action-view    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.nm-action-approve { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.nm-action-reject  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.nm-action-detail  { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.nm-action-slip    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ── Municipalities ── */
.nm-municipalities-list {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
}
.nm-mun-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fafbfc;
}
.nm-mun-complete { border-color: #86efac; background: #f0fdf4; }
.nm-mun-pending  { border-color: #e2e8f0; }

.nm-mun-info { flex: 1; min-width: 0; }
.nm-mun-name { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.nm-mun-types { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.nm-mun-type-chip {
  display: inline-block;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.nm-mun-stats { display: flex; gap: 10px; font-size: 12px; color: #64748b; flex-wrap: wrap; }
.nm-mun-stat-pending  { color: #d97706; font-weight: 600; }
.nm-mun-stat-approved { color: #16a34a; font-weight: 600; }
.nm-mun-stat-rejected { color: #dc2626; font-weight: 600; }
.nm-mun-completed-by  { font-size: 11px; color: #16a34a; margin-top: 4px; font-weight: 600; }
.nm-mun-done-badge    { font-size: 12px; font-weight: 700; color: #15803d; white-space: nowrap; }
.nm-mun-pending-label { font-size: 12px; color: #94a3b8; }
.nm-mun-actions       { flex-shrink: 0; }

/* ── Results totals bar ── */
.nm-totals-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 28px;
  background: linear-gradient(to right, #f0f9ff, #f8fafc);
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.nm-total-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px 0 0;
}
.nm-total-sep { width: 1px; height: 36px; background: #e2e8f0; margin: 0 20px 0 0; }
.nm-total-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.nm-total-value { font-size: 17px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.nm-deduction   .nm-total-value { color: #dc2626; }
.nm-total-neto  .nm-total-value { color: #15803d; }
.nm-total-neto-val { font-size: 20px; }
.nm-results-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Confirmation ── */
.nm-confirm-body  { padding: 20px 24px; }
.nm-confirm-done  { display: flex; align-items: center; gap: 16px; }
.nm-confirm-icon  { font-size: 32px; width: 52px; height: 52px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #16a34a; flex-shrink: 0; }
.nm-confirm-title { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.nm-confirm-text  { font-size: 13px; color: #64748b; margin: 0; }
.nm-confirm-warn  { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 14px 16px; font-size: 13px; color: #92400e; margin-bottom: 14px; }
.nm-confirm-actions { display: flex; gap: 8px; }

/* ── Slip modal ── */
.nm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
}
.nm-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(15,23,42,0.25);
}
.nm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.nm-modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.nm-modal-close {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  color: #64748b;
}
.nm-modal-close:hover { background: #f1f5f9; }
.nm-modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.nm-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* ── Payslip layout ── */
.nm-slip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.nm-slip-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}
.nm-slip-section h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.nm-slip-full { grid-column: 1 / -1; }
.nm-slip-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nm-slip-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 8px;
}
.nm-slip-row span:first-child { color: #64748b; }
.nm-slip-row span:last-child  { font-weight: 600; text-align: right; }
.nm-slip-subtotal {
  border-top: 2px solid #e2e8f0;
  border-bottom: none;
  margin-top: 4px;
  padding-top: 6px;
  font-weight: 700;
}
.nm-slip-neto-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  padding: 8px 0 0;
}
.nm-slip-neto-row span:last-child { color: #15803d; font-size: 20px; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .nm-card-head { flex-direction: column; }
  .nm-form-row, .nm-form-row-5 { grid-template-columns: 1fr; }
  .nm-table { font-size: 12px; }
  .nm-table th, .nm-table td { padding: 8px 10px; }
  .nm-slip-grid { grid-template-columns: 1fr; }
  .nm-slip-2col { grid-template-columns: 1fr; }
  .nm-totals-bar { gap: 12px; }
  .nm-total-sep { display: none; }
  .nm-municipalities-list { max-height: none; }
}

/* ══════════════════════════════════════════════════════════════════
   EMPIRIA V1 PRO — Shell & navigation upgrades
   ══════════════════════════════════════════════════════════════════ */

/* ── Sidebar collapse (mini mode) ── */
.dashboard { transition: grid-template-columns .26s cubic-bezier(.4,0,.2,1); }
.dashboard.sidebar-mini { grid-template-columns: 72px minmax(0,1fr); grid-template-rows: 64px auto; }
.sidebar { overflow: visible; transition: width .26s cubic-bezier(.4,0,.2,1), min-width .26s cubic-bezier(.4,0,.2,1); }
.sidebar-mini .sidebar { width: 72px !important; min-width: 72px !important; }
.sidebar-mini .sb-brand-text,
.sidebar-mini .sb-user-details,
.sidebar-mini .module-nav-title,
.sidebar-mini .module-nav-caret,
.sidebar-mini .submodule-list,
.sidebar-mini .sb-logout-text { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; pointer-events: none; }
.sidebar-mini .sidebar-brand { justify-content: center; }
.sidebar-mini .sb-user-info { justify-content: center; padding: 10px 0; }
.sidebar-mini .module-nav-item {
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 !important;
  width: 100% !important;
  position: relative;
}
.sidebar-mini .module-nav-inline {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}
.sidebar-mini .module-nav-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar-mini .module-nav-icon svg {
  width: 32px !important;
  height: 32px !important;
}

/* Tooltip al hover en modo mini */
.sidebar-mini .module-nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,.08);
}
.sidebar-mini .module-nav-item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar-mini .sb-logout-btn { justify-content: center; padding: 10px 0; border-color: transparent; background: transparent; }
.sidebar-mini .tb-ham span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sidebar-mini .tb-ham span:nth-child(2) { opacity: 0; }
.sidebar-mini .tb-ham span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Sidebar: user info block ── */
.sb-user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.sb-user-avatar {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-family: "Plus Jakarta Sans",sans-serif; flex-shrink: 0;
}
.sb-user-details { min-width: 0; flex: 1; }
.sb-user-details strong { display: block; font-size: 13px; font-weight: 700; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-brand-text { min-width: 0; overflow: hidden; }

/* ── Sidebar: logout button ── */
.sb-logout-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  color: #94a3b8; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.sb-logout-btn:hover { background: rgba(220,38,38,.15); color: #fca5a5; border-color: rgba(220,38,38,.25); }
.sb-logout-btn svg { flex-shrink: 0; }
.sb-logout-text { white-space: nowrap; }

/* ── Sidebar: nav improvements ── */
.module-nav-item.active { background: rgba(37,99,235,.22) !important; border-color: rgba(96,165,250,.4) !important; box-shadow: inset 3px 0 0 #3b82f6; }
.module-nav-item:hover:not(.active) { transform: translateX(2px); }

/* ── TOPBAR ── */
.topbar-pro { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 60px; }
.tb-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tb-ham { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px; padding: 0; transition: background .18s; flex-shrink: 0; }
.tb-ham:hover { background: #f1f5f9; }
.tb-ham span { display: block; width: 18px; height: 2px; background: #475569; border-radius: 2px; transition: transform .24s cubic-bezier(.4,0,.2,1), opacity .18s; }
.tb-brand-mark { display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: transparent; border-radius: 0; width: auto; height: 100%; overflow: visible; }
.tb-brand-img { height: 54px; width: auto; object-fit: contain; display: block; background: transparent; }

/* Context chips */
.tb-context { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.tb-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; min-width: 0; max-width: 220px; transition: border-color .18s, background .18s; }
.tb-chip:hover { border-color: #bfdbfe; background: #eff6ff; }
.tb-chip-mun { max-width: 300px; }
.tb-chip-ico { color: #2563eb; flex-shrink: 0; display: flex; align-items: center; }
.tb-chip-body { min-width: 0; flex: 1; }
.tb-chip-lbl { display: block; font-size: 9.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; line-height: 1; margin-bottom: 2px; }
.tb-chip-val { display: block; font-size: 12.5px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ctx-arrow { color: #cbd5e1; flex-shrink: 0; }
.tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tb-search-trigger { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; font-size: 13px; color: #94a3b8; transition: all .18s; white-space: nowrap; }
.tb-search-trigger:hover { border-color: #93c5fd; background: #eff6ff; color: #2563eb; }
.tb-search-trigger kbd { font-size: 10px; font-family: inherit; padding: 2px 6px; background: #e2e8f0; border-radius: 4px; color: #64748b; font-weight: 600; }

.tb-actions-group { display: flex; align-items: center; gap: 4px; }
.tb-icon-btn { width: 36px; height: 36px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; transition: all .18s; position: relative; }
.tb-icon-btn:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; }
.tb-icon-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.tb-icon-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

.tb-user-pill { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: all .18s; max-width: 200px; }
.tb-user-pill:hover { border-color: #93c5fd; background: #eff6ff; }
.tb-avatar { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#2563eb,#3b82f6); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: "Plus Jakarta Sans",sans-serif; }
.tb-user-pill-info { min-width: 0; flex: 1; }
.tb-pill-name { display: block; font-size: 12.5px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* ── Dropdowns ── */
.tb-dd-wrap { position: relative; }
.tb-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 20px 50px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.06); z-index: 1000; overflow: hidden; display: none; }
.tb-dropdown.open { display: block; animation: ddIn .15s ease; }
@keyframes ddIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.tb-dd-head { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-size: 13px; font-weight: 700; color: #0f172a; }
.tb-dd-empty { padding: 24px 16px; text-align: center; color: #94a3b8; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tb-dd-empty p { margin: 0; }
.tb-dd-div { height: 1px; background: #f1f5f9; margin: 4px 0; }
.tb-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: transparent; border: none; cursor: pointer; font-size: 13.5px; color: #334155; text-align: left; transition: background .15s; }
.tb-dd-item:hover { background: #f8fafc; }
.tb-dd-danger { color: #dc2626; }
.tb-dd-danger:hover { background: #fff1f1; }
.tb-user-dd { min-width: 220px; }
.tb-dd-user-head { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f1f5f9; }
.tb-avatar-lg { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg,#2563eb,#3b82f6); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: "Plus Jakarta Sans",sans-serif; }
.tb-dd-user-head strong { display: block; font-size: 14px; color: #0f172a; }
.tb-dd-role { margin: 2px 0 0; font-size: 12px; color: #64748b; }
.tb-qa-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; background: transparent; border: none; cursor: pointer; text-align: left; transition: background .15s; }
.tb-qa-item:hover { background: #f8fafc; }
.tb-qa-item strong { display: block; font-size: 13.5px; color: #0f172a; margin-bottom: 2px; }
.tb-qa-item p { margin: 0; font-size: 11.5px; color: #94a3b8; }
.tb-qa-icon { width: 34px; height: 34px; border-radius: 10px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Global Search ── */
.gs-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; }
.gs-overlay.hidden { display: none !important; }
.gs-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.48); backdrop-filter: blur(4px); }
.gs-modal { position: relative; z-index: 1; width: min(680px,calc(100vw - 32px)); background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 32px 80px rgba(15,23,42,.18); overflow: hidden; }
.gs-modal { animation: gsIn .18s ease; }
@keyframes gsIn { from { opacity:0; transform:scale(.97) translateY(-8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.gs-input-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
.gs-input { flex: 1; border: none; outline: none; font-size: 16px; color: #0f172a; background: transparent; }
.gs-input::placeholder { color: #94a3b8; }
.gs-esc-kbd { font-size: 11px; padding: 3px 7px; background: #f1f5f9; border-radius: 5px; color: #64748b; font-family: inherit; font-weight: 600; flex-shrink: 0; }
.gs-body { padding: 8px 0; max-height: 380px; overflow-y: auto; }
.gs-empty-state { padding: 24px 20px; text-align: center; }
.gs-hint { font-size: 13.5px; color: #94a3b8; margin: 0 0 16px; }
.gs-shortcuts { display: flex; justify-content: center; gap: 16px; font-size: 12px; color: #94a3b8; flex-wrap: wrap; }
.gs-shortcuts kbd { font-size: 11px; padding: 2px 5px; background: #f1f5f9; border-radius: 4px; color: #64748b; font-family: inherit; }
.gs-section-title { padding: 8px 20px 4px; font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }
.gs-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; transition: background .15s; border: none; background: transparent; width: 100%; text-align: left; }
.gs-result-item:hover, .gs-result-item.gs-active { background: #f8fafc; }
.gs-result-ico { width: 32px; height: 32px; border-radius: 8px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.gs-result-main { font-size: 13.5px; font-weight: 600; color: #0f172a; }
.gs-result-sub { font-size: 12px; color: #64748b; margin-top: 1px; }

@media (max-width: 1024px) { .tb-chip-mun { display: none; } }
@media (max-width: 820px) { .tb-context { display: none; } }
@media (max-width: 640px) { .tb-search-trigger span, .tb-search-trigger kbd { display: none; } .tb-search-trigger { width: 36px; height: 36px; padding: 0; justify-content: center; } .topbar-pro { gap: 8px; padding: 8px 12px; } }

/* ── Topbar bug fixes ─────────────────────────────────────────────────────── */

/* Fix 1: topbar — altura fija siempre igual, dropdowns visibles */
.topbar-pro {
  overflow: visible !important;
  position: relative;
  z-index: 100;
  height: 64px !important;
  min-height: unset !important;
  max-height: 64px !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}

/* Fix 2: Dropdowns must always float above module cards */
.tb-dropdown {
  z-index: 9998 !important;
}

/* Fix 3: User info + logout — solo en topbar, no en sidebar */
.sb-user-info {
  display: none !important;
}
.sidebar-footer {
  display: none !important;
}

/* Fix 4: Topbar brand — always visible next to hamburger */
.tb-brand-mark {
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.tb-brand-img {
  height: 54px;
  width: auto;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.tb-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.tb-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: .03em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.tb-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: .02em;
}

/* Fix 5: Context chips — más anchas y legibles */
.tb-chip {
  padding: 9px 18px !important;
  min-width: 140px !important;
  max-width: 320px !important;
  gap: 10px !important;
}
.tb-chip-mun {
  min-width: 180px !important;
  max-width: 420px !important;
}
.tb-chip-lbl {
  font-size: 10.5px !important;
  letter-spacing: .07em !important;
}
.tb-chip-val {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Search trigger — más ancho */
.tb-search-trigger {
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  min-width: 160px !important;
}

/* User pill — más ancho */
.tb-user-pill {
  padding: 7px 14px 7px 7px !important;
  max-width: 260px !important;
  min-width: 130px !important;
}
.tb-pill-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

/* ── Topbar: notificaciones y actividad ────────────────────────────────────── */

/* Badge rojo sobre campanita */
.tb-notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  border: 2px solid #fff;
}
.tb-notif-badge.hidden { display: none; }

/* Botón con badge necesita position:relative */
#notifBtn { position: relative; }

/* Dropdowns más anchos para notif/actividad */
.tb-notif-dd,
.tb-activity-dd {
  width: 340px;
  max-height: 420px;
  flex-direction: column;
}

.tb-notif-dd.open,
.tb-activity-dd.open {
  display: flex;
}

.tb-notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;
}

/* Ítems de notificación */
.tb-notif-item {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .14s;
}
.tb-notif-item:last-child { border-bottom: none; }
.tb-notif-item:hover { background: #f8fafc; }

.tb-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tb-notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.tb-notif-msg {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.4;
  flex: 1;
}

/* Colores semáforo */
.tb-alert-critical { border-left: 3px solid #dc2626; }
.tb-alert-warning  { border-left: 3px solid #d97706; }
.tb-alert-ok       { border-left: 3px solid #16a34a; }
.tb-alert-info     { border-left: 3px solid #3b82f6; }

/* Actividad */
.tb-act-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.tb-act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-act-time { font-size: 11px; color: #94a3b8; }

/* ── Dashboard new layout ──────────────────────────────────────────────────── */

/* Grid principal: mapa (izq) + columna KPIs (der) */
.ck-main-grid {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

/* Columna derecha: 3 filas apiladas */
.ck-right-col {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-items: stretch;
}

/* Mapa: ocupa toda la altura de la columna derecha */
.ck-panel-map {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ck-panel-map .ck-panel-body {
  flex: 1;
  min-height: 0;
}

/* Card personal activo — fila 1 */
.ck-card-active {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px 22px !important;
  cursor: default !important;
}
.ck-card-active .ck-kpi-icon { font-size: 32px; }
.ck-card-active .ck-kpi-value { font-size: 2.6rem; line-height: 1; }
.ck-card-active .ck-kpi-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ck-card-active .ck-kpi-sub { font-size: 12px; opacity: .75; }

/* TC + MT row — fila 2 */
.ck-tc-mt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.ck-tc-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ck-tc-blue { border-top: 3px solid #2563eb; }
.ck-tc-teal { border-top: 3px solid #0d9488; }

.ck-tc-head {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-tc-stats {
  display: flex;
  align-items: center;
  gap: 0;
}
.ck-tc-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ck-tc-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ck-tc-val {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.ck-tc-divider {
  width: 1px;
  height: 36px;
  background: #e2e8f0;
  margin: 0 8px;
  flex-shrink: 0;
}

.ck-tc-pct-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ck-tc-pct {
  font-size: 13px;
  font-weight: 700;
  min-width: 36px;
}

/* 20% TC — fila 3 */
.ck-tc20-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 14px;
  padding: 18px 22px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.ck-tc20-icon { font-size: 28px; flex-shrink: 0; }
.ck-tc20-body { min-width: 0; }
.ck-tc20-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .8; }
.ck-tc20-value { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.ck-tc20-sub { font-size: 12px; opacity: .75; margin-top: 2px; }

/* ── Fila 3: Torta edades + Tabla cargos ───────────────────────────────────── */
.ck-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ck-age-chart-wrap {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
}
.ck-age-donut-container {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.ck-age-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck-age-leg-item {
  display: grid;
  grid-template-columns: 12px 1fr 36px 36px;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.ck-age-leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ck-age-leg-lbl { color: #374151; }
.ck-age-leg-val { font-weight: 700; color: #0f172a; text-align: right; }
.ck-age-leg-pct { color: #94a3b8; text-align: right; }

/* Header cargo con controles */
.ck-cargo-hdr { flex-wrap: wrap; gap: 8px; }
.ck-cargo-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ck-month-input {
  font-size: 12px;
  font-family: inherit;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #374151;
  background: #f8fafc;
  cursor: pointer;
  outline: none;
}
.ck-month-input:focus { border-color: #93c5fd; }

/* Tabs cargo */
.ck-cargo-tabs {
  display: flex;
  gap: 3px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
}
.ck-cargo-tab {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all .15s;
  white-space: nowrap;
}
.ck-cargo-tab.active {
  background: #fff;
  color: #1e40af;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Tabla cargo alineada */
.ck-cargo-table { table-layout: fixed; width: 100%; }
.ck-th-cargo    { width: auto; }
.ck-th-num      { width: 80px; }
.ck-td-cargo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
  color: #374151;
  font-size: 13px;
}
.ck-td-active  { color: #16a34a; font-weight: 700; text-align: right; padding-right: 16px; }
.ck-td-retired { color: #dc2626; font-weight: 600; text-align: right; padding-right: 16px; }

/* Fila inferior */
.ck-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ── Fila 2: Género ─────────────────────────────────────────────────────────── */
.ck-gender-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.ck-gender-card {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 16px;
  padding: 20px 28px;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .18s;
}
.ck-gender-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.ck-gender-female {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border-color: #f9a8d4;
}
.ck-gender-male {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}

.ck-gender-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ck-gender-female .ck-gender-icon {
  background: rgba(236,72,153,.12);
  color: #db2777;
}
.ck-gender-male .ck-gender-icon {
  background: rgba(37,99,235,.12);
  color: #2563eb;
}
.ck-gender-icon svg {
  width: 36px;
  height: 36px;
}

.ck-gender-body {
  min-width: 0;
  flex: 1;
}

.ck-gender-count {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}
.ck-gender-female .ck-gender-count { color: #be185d; }
.ck-gender-male   .ck-gender-count { color: #1d4ed8; }

.ck-gender-lbl {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}
.ck-gender-female .ck-gender-lbl { color: #9d174d; }
.ck-gender-male   .ck-gender-lbl { color: #1e40af; }

.ck-gender-breakdown {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ck-gb-tag {
  font-size: 12.5px;
  border-radius: 6px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ck-gb-active   { background: rgba(22,163,74,.12);  color: #15803d; }
.ck-gb-inactive { background: rgba(100,116,139,.12); color: #475569; }
.ck-gb-tag strong { font-weight: 700; }
.ck-gb-sep { color: #cbd5e1; font-size: 12px; }


/* =========================================================
   EMPIRIA PREMIUM UI OVERRIDE — V1
   Objetivo: SaaS corporativo minimalista sin cambiar lógica
   Pegar al final de public/styles.css o reemplazar usando
   este archivo completo generado.
========================================================= */

:root {
  --primary: #007BFF;
  --primary-hover: #0068d9;
  --primary-soft: #eef6ff;
  --primary-soft-2: #f5f9ff;
  --primary-deep: #0A1F44;
  --success: #00D084;
  --success-soft: #eafff5;
  --warning: #f59e0b;
  --warning-soft: #fff7e8;
  --danger: #ef4444;
  --danger-soft: #fff1f2;
  --teal: #00C288;
  --teal-soft: #ecfffa;

  --bg: #f7f9fc;
  --bg-elevated: #fbfcfe;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #f1f5f9;

  --text: #111827;
  --text-soft: #64748b;
  --text-faint: #94a3b8;
  --line: #e6ebf2;
  --line-strong: #d8e0ea;

  --sidebar-bg: #ffffff;
  --sidebar-text: #172033;
  --sidebar-text-soft: #718096;

  --radius-2xl: 24px;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --shadow: 0 18px 50px rgba(15, 23, 42, 0.055);
  --shadow-soft: 0 8px 26px rgba(15, 23, 42, 0.045);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 36px rgba(15, 23, 42, 0.045);

  --content-max: 1680px;
  --sidebar-width: 252px;
  --topbar-height: 56px;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at top left, rgba(0, 123, 255, 0.055), transparent 30%),
    linear-gradient(180deg, #fbfcff 0%, var(--bg) 42%, #f7f9fc 100%);
  color: var(--text);
  font-family: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

.bg-blur { display: none !important; }

.app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.dashboard {
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  gap: 0;
  background: transparent;
}

.dashboard > .topbar-pro { grid-area: topbar; }
.dashboard > .sidebar { grid-area: sidebar; }
.dashboard > .main-panel { grid-area: main; }

/* ===================== SIDEBAR PREMIUM ===================== */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  padding: 18px 14px;
  border-radius: 0;
  border: 0;
  border-right: 1px solid rgba(164, 186, 218, 0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #071b3a 0%, #081f43 54%, #0a1f44 100%) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar::before {
  content: none;
  display: none;
}

.sb-user-info {
  order: 2;
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.sb-user-avatar,
.tb-avatar,
.tb-avatar-lg {
  background: linear-gradient(135deg, var(--primary), #5b8cff) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 123, 255, 0.18);
}

.sb-user-details strong {
  color: #f8fbff;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.sb-user-role {
  color: rgba(214, 226, 241, 0.72) !important;
  font-size: 0.78rem;
}

.sidebar-nav,
#moduleNav {
  display: grid;
  gap: 4px;
  padding: 0 4px;
}

.module-group { gap: 3px; }

.module-nav-item {
  min-height: 42px;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(226, 235, 247, 0.82);
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.module-nav-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  transform: translateX(1px);
}

.module-nav-item.active {
  background: linear-gradient(180deg, rgba(0,123,255,0.2), rgba(0,123,255,0.12));
  border-color: rgba(86, 163, 255, 0.28);
  color: #ffffff;
  box-shadow: inset 3px 0 0 #4ea2ff;
}

.module-nav-inline { gap: 11px; }
.module-nav-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: rgba(200, 216, 236, 0.8);
}
.module-nav-icon svg { width: 19px; height: 19px; }
.module-nav-item.active .module-nav-icon { color: #ffffff; }

.module-nav-title {
  font-family: "Inter", sans-serif;
  font-size: .91rem;
  font-weight: 650;
  color: inherit;
}

.module-nav-caret { color: #94a3b8; }
.module-nav-item.active .module-nav-caret { color: rgba(255,255,255,0.78); }

.submodule-list {
  margin: 0 0 4px 21px;
  padding: 3px 0 3px 11px;
  border-left: 1px solid rgba(255,255,255,0.12);
  gap: 2px;
}

.submodule-nav-item {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  color: rgba(212, 225, 241, 0.72);
  font-size: .84rem;
}
.submodule-nav-item:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
.submodule-nav-item.active { background: rgba(0,123,255,0.16); color: #ffffff; }
.submodule-dot { background: rgba(203, 213, 225, 0.7); }
.submodule-nav-item.active .submodule-dot { background: #7dc3ff; }

.sidebar-footer { order: 3; margin-top: 10px; padding: 0 4px; }
.sb-logout-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  color: rgba(227,235,246,0.86);
  box-shadow: none;
}
.sb-logout-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); color: #ffffff; }

/* sidebar colapsado */
.dashboard.sidebar-collapsed,
body.sidebar-collapsed .dashboard {
  --sidebar-width: 78px;
}
body.sidebar-collapsed .sidebar::before { content: none; }
body.sidebar-collapsed .module-nav-title,
body.sidebar-collapsed .module-nav-caret,
body.sidebar-collapsed .submodule-list,
body.sidebar-collapsed .sb-user-details,
body.sidebar-collapsed .sb-logout-text { display: none !important; }
body.sidebar-collapsed .module-nav-item { justify-content: center; padding: 11px; }
body.sidebar-collapsed .module-nav-inline { justify-content: center; }
body.sidebar-collapsed .sb-user-info { justify-content: center; padding: 10px; }

/* ===================== TOPBAR PREMIUM ===================== */
.topbar-pro {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--topbar-height);
  padding: 12px 24px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(219, 231, 243, 0.92);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 18px;
}

.tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-brand-mark { display: none !important; }
.tb-ham {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #475569;
}
.tb-ham:hover { background: #f4f7fb; border-color: var(--line); }
.tb-ham span { background: currentColor !important; height: 2px; border-radius: 999px; }

.tb-context {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tb-context::-webkit-scrollbar { display: none; }
.tb-ctx-arrow { display: none; }

.tb-chip {
  min-width: 132px;
  max-width: 240px;
  height: 46px;
  padding: 7px 11px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}
.tb-chip:hover { border-color: #cfe0ef; box-shadow: 0 10px 22px rgba(15,23,42,.06); }
.tb-chip-ico {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}
.tb-chip-lbl {
  color: var(--text-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tb-chip-val {
  color: var(--text);
  font-size: .82rem;
  font-weight: 750;
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tb-payroll-controls {
  display: none;
  align-items: center;
  gap: 10px;
}

.module-nomina .tb-payroll-controls {
  display: flex;
}

.module-nomina .tb-search-trigger,
.module-nomina .tb-actions-group {
  display: none !important;
}

.nmx-topbar-field {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

.nmx-topbar-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f708a;
}

.nmx-topbar-field select {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #dbe7f3;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}
.tb-search-trigger {
  width: min(320px, 22vw);
  height: 42px;
  padding: 0 12px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #64748b;
  box-shadow: none;
}
.tb-search-trigger:hover { border-color: #d7e0ec; background: #fbfcff; }
.tb-search-trigger kbd {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #94a3b8;
  box-shadow: none;
}
.tb-icon-btn,
.tb-user-pill {
  height: 42px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: none;
  color: #475569;
}
.tb-icon-btn { width: 42px; }
.tb-icon-btn:hover,
.tb-user-pill:hover { background: #fbfcff; border-color: #d7e0ec; }
.tb-icon-primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.tb-notif-badge { background: #ef4444 !important; color: #fff !important; }
.tb-user-pill { padding: 5px 8px 5px 5px; gap: 8px; }
.tb-pill-name { max-width: 96px; font-size: .84rem; font-weight: 700; color: var(--text); }

.tb-dropdown,
.gs-modal,
.modal-card,
.empiria-modal {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.13) !important;
}

/* ===================== MAIN WORKSPACE ===================== */
.main-panel {
  width: 100%;
  min-width: 0;
  padding: 24px;
  gap: 20px;
  background: #f5f8fc;
  overflow: visible;
}

.workspace,
.workspace-panel,
.submodule-content {
  width: 100%;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel-section,
.info-card,
.personnel-premium-card,
.personnel-premium-table-card,
.personnel-form-card,
.employee-form-shell,
.payroll-form-card,
.payroll-total-card,
.coverage-pro-card,
.documents-upload-card,
.documents-checklist-card,
.documents-audit-card,
.db2-kpi-card,
.db2-chart-card,
.admin-box,
.report-list,
.report-grid > *,
.cv-section,
.gestor-card,
.novedad-detail-card,
.coverage-pro-upload,
.coverage-pro-detail,
.payroll-alert-list,
.empiria-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--shadow-card) !important;
}

.panel-section,
.info-card,
.personnel-premium-card,
.personnel-premium-table-card,
.personnel-form-card,
.employee-form-shell,
.payroll-form-card,
.coverage-pro-card,
.documents-upload-card,
.documents-checklist-card,
.documents-audit-card,
.db2-chart-card,
.admin-box {
  padding: 22px !important;
}

h1, h2, h3, .workspace-title, .section-title-wrap h4, .employee-form-title-block h3,
.personnel-premium-card h3, .personnel-premium-hero h2, .coverage-pro-card h3 {
  color: var(--text);
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  letter-spacing: -0.035em;
}

.subtitle, .soft, .section-helper-text, .personnel-premium-eyebrow, .db2-kpi-sub {
  color: var(--text-soft) !important;
}

/* ===================== KPI CARDS ===================== */
.summary-grid,
.personnel-premium-summary,
.db2-kpi-row,
.db2-kpi-row-2,
.db2-kpi-row-4,
.coverage-pro-metrics,
.report-metrics,
.gestor-stats-row {
  gap: 16px !important;
}

.kpi-card,
.premium-metric,
.db2-kpi-card,
.coverage-pro-metric,
.payroll-total-card,
.gestor-stat {
  min-height: 116px;
  padding: 20px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  background: #fff !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  position: relative;
}
.kpi-card::after,
.premium-metric::after,
.db2-kpi-card::after,
.coverage-pro-metric::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, rgba(0,123,255,.75), rgba(0,194,136,.55));
  opacity: .18;
}
.kpi-card strong,
.db2-kpi-value,
.premium-metric strong,
.coverage-pro-metric strong,
.payroll-total-value,
.gestor-stat-num {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.05em;
  color: var(--text) !important;
}
.db2-kpi-label,
.payroll-total-label,
.gestor-stat-lbl {
  font-size: .75rem !important;
  color: var(--text-soft) !important;
  font-weight: 750 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ===================== BUTTONS / INPUTS ===================== */
.btn,
button,
input,
select,
textarea,
.gestor-input,
.gestor-select,
.gestor-textarea,
.payroll-input,
.payroll-select,
.payroll-textarea,
.gs-input {
  font-family: "Inter", sans-serif;
}

.btn,
.btn-primary,
.btn-secondary,
.primary-soft-btn,
.btn-row,
.personnel-icon-btn,
.btn-icon-only,
.btn-icon-docs,
.btn-icon-edit,
.btn-icon-view,
.btn-add-novedad,
.btn-ver-novedades,
.btn-aprobar,
.btn-rechazar,
.btn-anular {
  min-height: 40px;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.primary-soft-btn:hover { transform: translateY(-1px); }
.btn-primary,
.primary-soft-btn:not(.btn-secondary) {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--primary-hover) !important; }
.btn-secondary,
.btn-row,
.btn-icon-only,
.personnel-icon-btn {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: #334155 !important;
}
.btn-secondary:hover,
.btn-row:hover,
.btn-icon-only:hover,
.personnel-icon-btn:hover {
  background: #f8fafc !important;
  border-color: #d7e0ec !important;
}

input,
select,
textarea,
.gestor-input,
.gestor-select,
.gestor-textarea,
.payroll-input,
.payroll-select,
.payroll-textarea,
.gs-input {
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--text) !important;
  min-height: 42px;
  box-shadow: none !important;
  outline: none !important;
}
input:focus,
select:focus,
textarea:focus,
.gestor-input:focus,
.gestor-select:focus,
.payroll-input:focus,
.payroll-select:focus,
.gs-input:focus {
  border-color: rgba(0,123,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(0,123,255,.08) !important;
}
label,
.payroll-label,
.gestor-label {
  color: #475569 !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  letter-spacing: .01em;
}

.form-grid,
.payroll-form-grid,
.novedad-form-grid,
.gestor-form-grid,
.report-form {
  gap: 16px !important;
}

.employee-steps,
.personnel-form-topbar,
.novedades-toolbar,
.personnel-table-top,
.coverage-filter-bar,
.payroll-filters,
.personnel-premium-filters {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  border-radius: var(--radius-xl) !important;
  padding: 12px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;
}

.employee-step-tab {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #64748b !important;
  font-weight: 700 !important;
}
.employee-step-tab.active,
.employee-step-tab:hover {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: rgba(0,123,255,.12) !important;
}

/* ===================== TABLES PREMIUM ===================== */
.table-wrap,
.premium-table-wrap,
.personnel-table-wrap,
.payroll-table-wrap,
.coverage-table-wrap,
.coverage-history-scroll,
.documents-checklist,
.resume-docs {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  background: #fff !important;
  box-shadow: var(--shadow-card) !important;
  overflow: auto !important;
}

table,
.data-table,
.personnel-table,
.payroll-table,
.coverage-table,
.payroll-calc-table,
.desp-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
}

th,
.data-table th,
.personnel-table th,
.payroll-table th,
.coverage-table th,
.payroll-calc-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1e293b !important;
  color: #94a3b8 !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid #334155 !important;
  padding: 13px 14px !important;
  white-space: nowrap;
}

td,
.data-table td,
.personnel-table td,
.payroll-table td,
.coverage-table td,
.payroll-calc-table td {
  padding: 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
  color: #243044 !important;
  font-size: .86rem !important;
  vertical-align: middle !important;
}

tr:last-child td { border-bottom: 0 !important; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f8fbff !important; }
.personnel-table tr.selected,
.personnel-table tbody tr.active { background: var(--primary-soft-2) !important; }

.personnel-name-cell,
.payroll-name-cell,
.cargo-cell {
  gap: 10px !important;
}
.cv-avatar,
.personnel-name-cell img,
.payroll-name-cell img {
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(15,23,42,.1) !important;
}

/* ===================== CHIPS / ESTADOS ===================== */
.status-chip,
.pill,
.role-chip,
.coverage-badge,
.novedad-badge,
.novedad-status-chip,
.novelty-badge,
.novelty-type-chip,
.modality-chip,
.ck-panel-badge,
.payroll-badge-modal,
.coverage-history-chip,
.gestor-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  font-size: .73rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.status-chip.success,
.status-chip.active,
.pill.success,
.coverage-badge.success,
.cov-success,
.success,
.gestor-status.success {
  color: #047857 !important;
  background: var(--success-soft) !important;
  border-color: rgba(0,208,132,.18) !important;
}
.status-chip.warning,
.pill.warning,
.coverage-badge.warning,
.cov-warning,
.warning {
  color: #b45309 !important;
  background: var(--warning-soft) !important;
  border-color: rgba(245,158,11,.22) !important;
}
.status-chip.danger,
.status-chip.error,
.pill.danger,
.coverage-badge.danger,
.cov-danger,
.danger {
  color: #dc2626 !important;
  background: var(--danger-soft) !important;
  border-color: rgba(239,68,68,.18) !important;
}
.status-chip.neutral,
.pill.neutral,
.neutral,
.cov-neutral {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* barras de progreso */
.db2-kpi-prog,
.document-check-status progress,
progress {
  accent-color: var(--primary);
}
.db2-kpi-prog,
.db2-kpi-prog-bar {
  border-radius: 999px !important;
  overflow: hidden;
}

/* ===================== MÓDULOS ESPECÍFICOS ===================== */
.personnel-premium-hero,
.documents-audit-hero,
.gestor-hero {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-2xl) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 24px !important;
}

.personnel-premium-module,
.coverage-pro-module,
.payroll-module-wrap,
.documents-audit-module,
.gestor-wrap,
.cv-shell {
  display: grid;
  gap: 18px !important;
}

.personnel-master-header,
.personnel-master-actions,
.document-check-row,
.novedad-emp-row,
.coverage-history-accordion-head,
.tb-qa-item,
.tb-dd-item {
  border-radius: 14px !important;
}

.document-check-row,
.novedad-emp-row,
.tb-qa-item {
  border: 1px solid var(--line) !important;
  background: #fff !important;
}
.document-check-row:hover,
.novedad-emp-row:hover,
.tb-qa-item:hover { background: #f8fbff !important; }

.payroll-alert-item,
.cov-alert,
.compact-alerts > *,
.documents-audit-mini {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.025) !important;
}

.alert-error,
.message.error { background: var(--danger-soft) !important; color: #b91c1c !important; border-color: rgba(239,68,68,.18) !important; }
.message.success { background: var(--success-soft) !important; color: #047857 !important; border-color: rgba(0,208,132,.18) !important; }
.message.warning { background: var(--warning-soft) !important; color: #b45309 !important; border-color: rgba(245,158,11,.2) !important; }

/* login más limpio */
.login-card {
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 28px 80px rgba(10,31,68,.22) !important;
}
.logo-login { max-width: 230px !important; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
  .dashboard { --sidebar-width: 82px; }
  .sidebar::before { content: "E"; justify-content: center; letter-spacing: 0; padding-left: 0; padding-right: 0; }
  .module-nav-title,
  .module-nav-caret,
  .submodule-list,
  .sb-user-details,
  .sb-logout-text { display: none !important; }
  .module-nav-item { justify-content: center; padding: 11px; }
  .module-nav-inline { justify-content: center; }
  .tb-search-trigger { width: 44px; justify-content: center; }
  .tb-search-trigger span,
  .tb-search-trigger kbd { display: none; }
}

@media (max-width: 920px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) auto;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 80;
    width: 280px;
    min-width: 280px;
    height: calc(100vh - var(--topbar-height));
  }
  body.sidebar-open .sidebar,
  .dashboard.sidebar-open .sidebar { transform: translateX(0); }
  .main-panel { padding: 16px; }
  .topbar-pro { padding: 10px 14px; }
  .tb-context { display: none; }
  .tb-user-pill-info { display: none; }
}

@media (max-width: 680px) {
  :root { --topbar-height: 56px; }
  .main-panel { padding: 12px; }
  .panel-section,
  .info-card,
  .personnel-premium-card,
  .personnel-premium-table-card,
  .personnel-form-card,
  .employee-form-shell,
  .payroll-form-card,
  .coverage-pro-card,
  .documents-upload-card,
  .documents-checklist-card,
  .documents-audit-card,
  .db2-chart-card,
  .admin-box { padding: 16px !important; border-radius: 18px !important; }
  .summary-grid,
  .personnel-premium-summary,
  .db2-kpi-row,
  .db2-kpi-row-2,
  .db2-kpi-row-4,
  .coverage-pro-metrics,
  .report-metrics { grid-template-columns: 1fr !important; }
  td, th { padding: 12px !important; }
}

/* =========================
   PERSONAL WORKSPACE 2026
========================= */

.personnel-workspace-shell {
  gap: 22px !important;
  height: calc(100dvh - var(--topbar-height) - 48px);
  min-height: 0;
  max-height: calc(100dvh - var(--topbar-height) - 48px);
  overflow: hidden;
}

.personnel-workspace-header {
  padding: 28px !important;
}

.personnel-workspace-header p {
  max-width: 760px;
}

.personnel-workspace-alerts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.personnel-premium-filters {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.personnel-premium-filters > :first-child {
  grid-column: 1 / -1;
}

.personnel-filter-search-wrap {
  min-width: 0;
}

.personnel-filter-grid {
  display: grid;
  gap: 12px;
}

.personnel-filter-grid-primary {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.personnel-filter-grid-secondary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.personnel-clear-btn {
  min-width: 100px;
}

.personnel-workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, .8fr);
  gap: 22px;
  align-items: start;
  min-height: 0;
  overflow: hidden;
}

.personnel-workspace-main,
.personnel-workspace-table-card {
  min-width: 0;
  min-height: 0;
}

.personnel-workspace-aside {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.personnel-workspace-shell > .personnel-premium-card {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  overflow: hidden;
}

.personnel-workspace-table-card {
  height: 100%;
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.personnel-workspace-table-card .personnel-table-wrap {
  height: 100%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

.personnel-detail-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-card);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.personnel-detail-empty {
  min-height: 420px;
  place-items: center;
  text-align: center;
  align-content: center;
}

.personnel-detail-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eef4fb;
  color: #69809c;
  font-size: 1.5rem;
}

.personnel-detail-head {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.personnel-detail-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
}

.personnel-detail-avatar,
.personnel-avatar,
.employee-header-avatar {
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--personnel-avatar-bg, linear-gradient(135deg, #eef4fb, #dce8f7));
  color: var(--personnel-avatar-fg, #23415f);
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -.04em;
}

.personnel-detail-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
}

.personnel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: .9rem;
  box-shadow: none !important;
}

.personnel-detail-title h3,
.personnel-detail-title p {
  margin: 0;
}

.personnel-detail-eyebrow,
.employee-form-kicker,
.employee-header-eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
  color: #64748b;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.personnel-detail-badges,
.employee-header-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.personnel-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.personnel-detail-section {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #edf2f7;
}

.personnel-detail-section h4,
.personnel-detail-section-head h4 {
  margin: 0;
  font-size: .96rem;
}

.personnel-detail-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.personnel-detail-section-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: .83rem;
}

.personnel-progress-track,
.personnel-mini-progress {
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.personnel-progress-track {
  height: 9px;
}

.personnel-progress-bar,
.personnel-mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f7ae5, #16a34a);
}

.personnel-mini-progress {
  height: 6px;
}

.personnel-detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.personnel-detail-stat-grid > div,
.personnel-detail-inline-stats span {
  padding: 12px;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  background: #fbfdff;
}

.personnel-detail-stat-grid span,
.personnel-detail-inline-stats span {
  display: block;
  color: #64748b;
  font-size: .76rem;
}

.personnel-detail-stat-grid strong,
.personnel-detail-inline-stats strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 1rem;
}

.personnel-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.personnel-detail-list div {
  padding: 12px 14px;
  border-radius: 16px;
  background: #fbfdff;
  border: 1px solid #edf2f7;
}

.personnel-detail-list dt {
  margin-bottom: 6px;
  color: #64748b;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.personnel-detail-list dd {
  margin: 0;
  color: #172033;
  font-weight: 700;
}

.personnel-detail-note {
  padding: 14px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid #e7eef8;
}

.personnel-detail-note strong,
.personnel-detail-note p,
.personnel-detail-note small {
  display: block;
}

.personnel-detail-note p {
  margin: 6px 0;
}

.personnel-detail-inline-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.personnel-table tbody tr[data-select-personnel-id] {
  cursor: pointer;
}

.personnel-employee-cell,
.personnel-stack-cell {
  display: grid;
  gap: 4px;
}

.personnel-employee-cell {
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.personnel-employee-copy strong,
.personnel-stack-cell strong {
  color: #172033;
}

.personnel-employee-copy span,
.personnel-stack-cell span,
.personnel-doc-progress small,
.personnel-meta-inline {
  color: #64748b;
  font-size: .79rem;
}

.personnel-doc-progress {
  display: grid;
  gap: 7px;
  min-width: 150px;
}

.role-chip.role-muted {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

.employee-form-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.personnel-form-topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.employee-header-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 0 12px !important;
  border-radius: 0 !important;
}

.employee-header-avatar {
  width: 64px;
  height: 64px;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.employee-header-copy h2 {
  margin: 0;
  color: #10233f !important;
  text-transform: uppercase !important;
}

.employee-header-copy p {
  margin: 2px 0 0;
  color: #64748b !important;
}

.employee-steps {
  overflow-x: hidden !important;
  gap: 2px !important;
  padding: 4px !important;
}

.employee-step-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 4px !important;
  border-radius: 11px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
}

.employee-step-index {
  display: none;
}

.employee-step-label {
  color: inherit;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  white-space: nowrap !important;
}

@media (max-width: 1280px) {
  .personnel-workspace-shell {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .personnel-workspace-shell > .personnel-premium-card {
    height: auto;
    overflow: visible;
    grid-template-rows: auto;
  }

  .personnel-workspace-body {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .personnel-workspace-aside {
    position: static;
    height: auto;
    overflow: visible;
  }

  .personnel-premium-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .personnel-filter-grid-primary,
  .personnel-filter-grid-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .personnel-workspace-alerts,
  .personnel-detail-stat-grid,
  .personnel-detail-list,
  .personnel-detail-inline-stats,
  .personnel-detail-actions,
  .personnel-premium-filters,
  .personnel-filter-grid-primary,
  .personnel-filter-grid-secondary {
    grid-template-columns: 1fr !important;
  }

  .employee-header-card {
    flex-wrap: wrap !important;
  }

  .employee-header-avatar {
    width: 56px;
    height: 56px;
  }

  .employee-step-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* =========================
   PERSONAL FILTERS SINGLE ROW
========================= */

.personnel-premium-filters {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

.personnel-premium-filters > :first-child {
  grid-column: auto !important;
}

.personnel-filter-search-wrap,
.personnel-filter-grid,
.personnel-filter-grid-primary,
.personnel-filter-grid-secondary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

.personnel-filter-search-wrap {
  width: 340px;
  min-width: 340px;
}

.personnel-filter-search-wrap .personnel-toolbar-search {
  width: 100%;
  min-width: 100%;
}

.personnel-premium-filters select {
  flex: 0 0 158px !important;
  min-width: 158px !important;
}

.personnel-clear-btn {
  flex: 0 0 104px !important;
  min-width: 104px !important;
}

/* ===== shell overrides: module title, sidebar context, logo ===== */
.sidebar::before,
body.sidebar-collapsed .sidebar::before {
  content: none !important;
  display: none !important;
}

.sidebar-brand {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 2px 8px 14px !important;
  margin-bottom: 6px;
  border: 0 !important;
  background: transparent !important;
}

.sb-logo-only {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
  filter: none;
  flex-shrink: 0;
}

.sb-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sb-brand-title {
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.sb-brand-subtitle {
  color: rgba(221, 232, 245, 0.78);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
}

.tb-chip-module {
  min-width: 280px;
  max-width: 360px;
}

.tb-chip-module .tb-chip-val {
  max-width: 240px;
}

.sb-context-card {
  order: 3;
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  display: grid;
  gap: 10px;
}

.sb-context-eyebrow {
  color: rgba(216, 228, 242, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sb-context-primary {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
}

.sb-context-primary strong {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.sb-context-primary span {
  color: rgba(221, 232, 245, 0.72);
  font-size: 0.76rem;
  line-height: 1.3;
}

.sb-context-item {
  display: grid;
  gap: 4px;
}

.sb-context-label {
  color: rgba(216, 228, 242, 0.68);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sb-context-item strong {
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.sb-mun-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
}
.sb-mun-chip {
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.07);
  color: #dde8f5;
  font-size: 0.71rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
}
.sb-mun-chip.sb-mun-free {
  color: rgba(221,232,245,0.55);
  border-color: transparent;
  background: none;
  font-weight: 400;
  font-style: italic;
}

body.sidebar-collapsed .sidebar-brand,
.sidebar-mini .sidebar-brand {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center;
}

body.sidebar-collapsed .sb-logo-only,
.sidebar-mini .sb-logo-only {
  width: 34px;
  height: 34px;
}

body.sidebar-collapsed .sb-brand-copy,
.sidebar-mini .sb-brand-copy {
  display: none !important;
}

body.sidebar-collapsed .sb-context-card,
.sidebar-mini .sb-context-card {
  display: none !important;
}

@media (max-width: 1200px) {
  .sidebar::before {
    content: none !important;
    display: none !important;
  }
}

/* ===== topbar heading ===== */
.tb-context {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  margin-right: auto;
  overflow: hidden;
}

.tb-module-head {
  width: auto;
  display: flex;
  justify-content: flex-start;
}

.tb-module-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tb-module-copy .tb-chip-lbl {
  display: none !important;
}

.tb-module-title {
  color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
}

.tb-module-breadcrumb {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-chip-module,
.tb-module-head .tb-chip,
.tb-module-head .tb-chip-body,
.tb-module-head .tb-chip-ico {
  display: none !important;
}

@media (max-width: 920px) {
  .tb-context {
    display: flex !important;
    justify-content: flex-start;
    margin-right: 0;
    flex: 1 1 auto;
  }

  .tb-module-head {
    justify-content: flex-start;
  }

  .tb-module-title,
  .tb-module-breadcrumb {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .tb-module-title {
    font-size: 1rem;
  }

  .tb-module-breadcrumb {
    display: none;
  }
}

/* ===== remove module title/description inside workspace ===== */
.submodule-content .personnel-premium-hero,
.submodule-content .documents-audit-hero,
.submodule-content .coverage-hero,
.submodule-content .gestor-hero,
.submodule-content .employee-header-card {
  padding-top: 0 !important;
  border-top: 0 !important;
}

.submodule-content .personnel-premium-hero,
.submodule-content .documents-audit-hero,
.submodule-content .coverage-hero,
.submodule-content .gestor-hero {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.submodule-content .personnel-premium-hero > div > .personnel-premium-eyebrow,
.submodule-content .personnel-premium-hero > div > h2,
.submodule-content .personnel-premium-hero > div > p,
.submodule-content .documents-audit-hero > div > .personnel-premium-eyebrow,
.submodule-content .documents-audit-hero > div > h2,
.submodule-content .documents-audit-hero > div > p,
.submodule-content .coverage-hero > div > h2,
.submodule-content .coverage-hero > div > p,
.submodule-content .gestor-hero > h2,
.submodule-content .gestor-hero > p,
.submodule-content .employee-form-kicker,
.submodule-content .employee-header-copy h2,
.submodule-content .employee-header-copy p {
  display: none !important;
}

.submodule-content .personnel-premium-hero > div:empty,
.submodule-content .documents-audit-hero > div:empty {
  display: none !important;
}

/* ===== personnel workspace viewport lock ===== */
.personnel-workspace-shell {
  height: calc(100dvh - var(--topbar-height) - 20px) !important;
  max-height: calc(100dvh - var(--topbar-height) - 20px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.personnel-workspace-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.9fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas:
    "toolbar aside"
    "summary aside"
    "alerts aside"
    "filters aside"
    "body aside";
  gap: 18px !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch;
}

.personnel-workspace-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 44px;
}

.personnel-workspace-toolbar-copy {
  display: none !important;
}

.personnel-workspace-layout > .personnel-premium-summary {
  grid-area: summary;
}

.personnel-workspace-layout > .personnel-premium-alerts {
  grid-area: alerts;
}

.personnel-workspace-layout > .personnel-premium-filters {
  grid-area: filters;
}

.personnel-workspace-body {
  display: contents !important;
}

.personnel-workspace-main {
  grid-area: body;
  min-height: 0;
  overflow: hidden;
}

.personnel-workspace-table-shell,
.personnel-workspace-table-card {
  height: 100%;
  min-height: 0;
}

.personnel-workspace-aside {
  grid-area: aside;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
}

.personnel-detail-card {
  gap: 12px;
  padding: 18px;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.personnel-detail-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: grid;
  gap: 12px;
  padding-right: 2px;
}

.personnel-detail-body::-webkit-scrollbar {
  display: none;
}

.personnel-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.personnel-detail-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
  color: #475569;
  font-size: 0.77rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.personnel-detail-tab:hover {
  border-color: #cfd9e6;
  background: #f4f8fc;
  color: var(--text);
}

.personnel-detail-actions-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personnel-detail-head {
  grid-template-columns: 56px minmax(0, 1fr);
  padding-right: 42px;
}

.personnel-detail-title p {
  color: #64748b;
  font-size: 0.82rem;
}

.personnel-detail-badges {
  gap: 6px;
}

.personnel-detail-section {
  gap: 10px;
  padding-top: 12px;
}

.personnel-detail-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personnel-detail-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.personnel-detail-list div,
.personnel-detail-inline-stats span {
  padding: 10px 12px;
}

.personnel-detail-inline-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personnel-detail-footer {
  padding-top: 4px;
}

.personnel-detail-profile-btn {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 1280px) {
  .personnel-workspace-shell {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .personnel-workspace-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "toolbar"
      "summary"
      "alerts"
      "filters"
      "body"
      "aside";
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .personnel-workspace-main,
  .personnel-workspace-aside,
  .personnel-workspace-table-shell,
  .personnel-workspace-table-card,
  .personnel-detail-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .personnel-detail-body {
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  .personnel-detail-tabs,
  .personnel-detail-actions-compact,
  .personnel-detail-stat-grid,
  .personnel-detail-list,
  .personnel-detail-inline-stats {
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   TYPOGRAPHY SYSTEM
========================= */

.module-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-module);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.module-subtitle {
  font-size: var(--font-size-md-plus);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

.kpi-value {
  font-size: var(--font-size-kpi);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.kpi-label {
  font-size: var(--font-size-sm-plus);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

.kpi-meta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-soft);
}

.table-head {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.table-main {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--text-primary);
}

.table-secondary {
  font-size: var(--font-size-sm-plus);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

.status-chip {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.form-label,
label {
  font-size: var(--font-size-sm-plus);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--text-primary);
}

.form-input,
input,
select,
textarea {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--text-primary);
}

.btn-primary,
.btn-secondary,
.btn {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sidebar-item {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

.sidebar-item-active {
  font-weight: var(--font-weight-semibold);
}

.breadcrumb {
  font-size: var(--font-size-sm-plus);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--text-muted);
}

.alert-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-compact);
  color: var(--text-primary);
}

.alert-description {
  font-size: var(--font-size-sm-plus);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

.employee-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  letter-spacing: var(--tracking-soft);
  color: var(--text-primary);
}

.employee-role {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

body,
button,
input,
select,
textarea,
th,
td,
a,
small,
span,
label,
p,
li {
  font-family: var(--font-family-base) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.workspace-title,
.brand-title,
.section-title-wrap h4,
.employee-header h2,
.employee-header-card h2,
.employee-form-title-block h3,
.personnel-subcard h5,
.tb-module-title,
.personnel-detail-title h3 {
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--tracking-soft) !important;
  color: var(--text-primary);
}

.tb-module-title,
.workspace-title,
.personnel-detail-title h3,
.employee-header-card h2 {
  font-size: var(--font-size-xl) !important;
  line-height: var(--line-height-compact) !important;
}

.tb-module-breadcrumb,
.pw-breadcrumb,
.subtitle,
.soft,
.section-helper-text,
.personnel-premium-eyebrow,
.db2-kpi-sub,
.sb-user-role,
.tb-dd-role,
.employee-role,
.module-subtitle {
  font-size: var(--font-size-sm-plus) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--text-secondary) !important;
}

.personnel-premium-eyebrow,
.eyebrow,
table thead th,
.personnel-table th,
.coverage-table th,
.payroll-table th,
.data-table th,
.table-head,
.module-nav-caret + .submodule-list th {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

td,
.data-table td,
.personnel-table td,
.coverage-table td,
.payroll-table td,
.table-main,
.module-nav-title,
.submodule-label,
.sidebar-item {
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-base) !important;
  color: var(--text-primary);
}

.table-secondary,
.personnel-employee-copy span,
.personnel-stack-cell span,
.personnel-doc-progress small,
.personnel-meta-inline,
.tb-pill-name,
.tb-chip-val,
.kpi-meta {
  font-size: var(--font-size-sm-plus) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-base) !important;
  color: var(--text-secondary) !important;
}

.kpi-card strong,
.db2-kpi-value,
.ck-kpi-value,
.premium-metric strong,
.kpi-value {
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-kpi) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-primary) !important;
}

.kpi-card span,
.db2-kpi-label,
.ck-kpi-label,
.premium-metric span,
.kpi-label {
  font-size: var(--font-size-sm-plus) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-base) !important;
  color: var(--text-secondary) !important;
}

.premium-metric small,
.db2-kpi-sub,
.ck-kpi-sub,
.kpi-meta {
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-base) !important;
  color: var(--text-soft) !important;
}

.status-chip,
.pill,
.role-chip,
.coverage-badge,
.novedad-badge,
.novedad-status-chip,
.novelty-badge,
.novelty-type-chip,
.modality-chip,
.ck-panel-badge,
.payroll-badge-modal,
.coverage-history-chip,
.gestor-status {
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.01em !important;
}

.module-nav-title,
.submodule-label,
.sidebar-item,
.tb-dd-item,
.tb-qa-item strong {
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-medium) !important;
}

.module-nav-item.active .module-nav-title,
.submodule-nav-item.active .submodule-label,
.sidebar-item-active,
.tb-dd-item strong,
.personnel-detail-tab {
  font-weight: var(--font-weight-semibold) !important;
}

.personnel-detail-title h3,
.employee-name {
  font-size: var(--font-size-xl) !important;
  font-weight: var(--font-weight-bold) !important;
}

.personnel-detail-title p,
.employee-role {
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--text-secondary) !important;
}

.tb-avatar,
.tb-avatar-lg,
.sb-user-avatar,
.personnel-detail-avatar,
.personnel-avatar,
.employee-header-avatar {
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-bold) !important;
}

.message h3,
.info-card h3,
.alert-title {
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-compact) !important;
}

.message p,
.info-card p,
.alert-description {
  font-size: var(--font-size-sm-plus) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--text-secondary);
}

@media (max-width: 920px) {
  .module-title,
  h1 {
    font-size: var(--font-size-2xl) !important;
  }

  .kpi-card strong,
  .db2-kpi-value,
  .ck-kpi-value,
  .premium-metric strong,
  .kpi-value {
    font-size: var(--font-size-module) !important;
  }
}

@media (max-width: 680px) {
  body {
    font-size: var(--font-size-sm-plus);
  }

  .tb-module-title,
  .module-title,
  h1,
  h2 {
    font-size: var(--font-size-xl) !important;
  }

  .tb-module-breadcrumb,
  .breadcrumb,
  .module-subtitle {
    font-size: var(--font-size-sm) !important;
  }
}

/* =================================================================
   GESTIÓN DE PERSONAL — MODO FLAT (sin cards, sin sombras)
   ================================================================= */

/* Outer layout card: transparente, sin borde ni sombra */
.personnel-workspace-shell .personnel-premium-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Métricas de resumen: sin caja, solo línea inferior */
.personnel-workspace-shell .premium-metric {
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 4px 14px !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
.personnel-workspace-shell .premium-metric.main {
  background: transparent !important;
  border-bottom-color: #2563eb !important;
}
.personnel-workspace-shell .premium-metric.main span,
.personnel-workspace-shell .premium-metric.main small {
  color: #64748b !important;
}
.personnel-workspace-shell .premium-metric.main strong {
  color: #0f172a !important;
  font-size: 30px !important;
}
.personnel-workspace-shell .premium-metric.success,
.personnel-workspace-shell .premium-metric.warning,
.personnel-workspace-shell .premium-metric.danger,
.personnel-workspace-shell .premium-metric.danger-soft,
.personnel-workspace-shell .premium-metric.neutral {
  background: transparent !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
.personnel-workspace-shell .premium-metric strong {
  font-size: 28px !important;
  color: #0f172a !important;
  margin-top: 6px !important;
}
.personnel-workspace-shell .premium-metric span {
  font-size: 10px !important;
  color: #94a3b8 !important;
}

/* Fila de alertas documentales: sin contenedor */
.personnel-workspace-shell .personnel-premium-alerts {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 10px !important;
}
.personnel-workspace-shell .personnel-premium-alerts div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  border-left: 3px solid #cbd5e1 !important;
}

/* Barra de filtros: sin pill gris */
.personnel-workspace-shell .personnel-premium-filters {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 12px !important;
  margin-top: 0 !important;
}

/* Tabla: sin card envolvente */
.personnel-workspace-shell .personnel-premium-table-card,
.personnel-workspace-shell .personnel-workspace-table-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* Panel de detalle lateral: sin card, separación con línea */
.personnel-workspace-shell .personnel-detail-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-left: 1px solid #e2e8f0 !important;
  padding: 0 0 0 20px !important;
}

/* Celdas de stats del detalle: sin mini-cajas */
.personnel-workspace-shell .personnel-detail-stat-grid > div,
.personnel-workspace-shell .personnel-detail-inline-stats span {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* Lista de datos del detalle: sin mini-cajas */
.personnel-workspace-shell .personnel-detail-list div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* Tabs del detalle: aspecto discreto */
.personnel-workspace-shell .personnel-detail-tab {
  background: transparent !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}
.personnel-workspace-shell .personnel-detail-tab.active,
.personnel-workspace-shell .personnel-detail-tab:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Empty icon del detalle */
.personnel-workspace-shell .personnel-detail-empty-icon {
  background: #f8fafc !important;
}

/* Close button del detalle */
.personnel-workspace-shell .personnel-detail-close {
  background: transparent !important;
  border-color: #e2e8f0 !important;
}

/* =================================================================
   VIEWPORT LOCK — layout fijo al tamaño del navegador
   - La página nunca hace scroll
   - El main-panel scrollea su propio contenido
   - La topbar y sidebar siempre visibles
   ================================================================= */

html {
  height: 100dvh !important;
  overflow: hidden !important;
  min-height: unset !important;
}

body {
  height: 100dvh !important;
  min-height: unset !important;
  overflow: hidden !important;
}

.dashboard {
  height: 100dvh !important;
  min-height: unset !important;
  overflow: hidden !important;
  /* La fila del main usa 1fr para ocupar el espacio restante */
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) !important;
}

/* Main panel: contenedor de scroll para todos los módulos */
.main-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}

/* Módulo de personal: viewport-locked solo en pantallas grandes (≥1281px) */
@media (min-width: 1281px) {
  .personnel-workspace-shell {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Tabla: encabezado sticky con fondo sólido */
.personnel-workspace-shell .premium-table-wrap .personnel-table thead th {
  background: #1e293b !important;
  border-bottom: 2px solid #334155 !important;
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
.personnel-workspace-shell .premium-table-wrap .personnel-table tbody td {
  border-bottom: 1px solid #f1f5f9 !important;
}
.personnel-workspace-shell .premium-table-wrap .personnel-table tbody tr:hover {
  background: #f9fbfd !important;
}
.personnel-workspace-shell .premium-table-wrap .personnel-table tbody tr.selected {
  background: #eff6ff !important;
}

/* ===== payroll premium workspace ===== */
.nmx-shell {
  --nmx-bg: #f5f8fc;
  --nmx-surface: #ffffff;
  --nmx-surface-soft: #f8fbff;
  --nmx-line: #dbe7f3;
  --nmx-line-strong: #cfddeb;
  --nmx-text: #0f172a;
  --nmx-soft: #64748b;
  --nmx-soft-2: #94a3b8;
  --nmx-blue: #007bff;
  --nmx-blue-soft: #eff6ff;
  --nmx-navy: #0a1f44;
  --nmx-green: #00d084;
  --nmx-teal: #00c288;
  height: calc(100dvh - var(--topbar-height) - 20px) !important;
  max-height: calc(100dvh - var(--topbar-height) - 20px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.nmx-layout {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 18px;
  height: 100%;
  min-height: 0;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(0, 123, 255, 0.09), transparent 28%),
    radial-gradient(circle at top right, rgba(0, 194, 136, 0.06), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
  border: 1px solid #e2ebf4;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.nmx-opsbar,
.nmx-actionbar,
.nmx-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.nmx-opsbar {
  justify-content: flex-end;
  padding: 10px 16px;
  border: 1px solid var(--nmx-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  box-shadow: 0 8px 20px rgba(15,23,42,.035);
}

.nmx-opsbar-controls,
.nmx-table-meta,
.nmx-pagination,
.nmx-pagination-pages {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nmx-opsbar-controls,
.nmx-filterbar {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nmx-opsbar-controls::-webkit-scrollbar,
.nmx-filterbar::-webkit-scrollbar,
.nmx-sidebar-scroll::-webkit-scrollbar,
.nmx-table-scroll::-webkit-scrollbar {
  display: none;
}

.nmx-inline-field {
  display: grid;
  gap: 6px;
  min-width: 182px;
}

.nmx-inline-field > span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nmx-inline-field select,
.nmx-filterbar select,
.nmx-advanced-panel select {
  min-height: 42px;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--nmx-line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nmx-icon-button,
.nmx-user-pill,
.nmx-actions-menu > summary,
.nmx-advanced-filters > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid var(--nmx-line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--nmx-text);
}

.nmx-icon-button {
  position: relative;
  width: 42px;
  padding: 0;
  cursor: pointer;
}

.nmx-icon-bell::before {
  content: "\1F514";
  font-size: 14px;
  line-height: 1;
}

.nmx-icon-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2b7fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 123, 255, 0.26);
}

.nmx-user-pill {
  gap: 10px;
  padding: 0 12px 0 8px;
}

.nmx-user-pill-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(10, 31, 68, 0.12), rgba(0, 123, 255, 0.18));
  color: var(--nmx-navy);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nmx-actionbar {
  justify-content: space-between;
}

.nmx-actions-menu,
.nmx-advanced-filters,
.nmx-row-menu,
.nmx-side-disclosure {
  position: relative;
}

.nmx-actions-menu > summary,
.nmx-advanced-filters > summary {
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.nmx-actions-menu > summary::-webkit-details-marker,
.nmx-advanced-filters > summary::-webkit-details-marker,
.nmx-row-menu > summary::-webkit-details-marker,
.nmx-side-disclosure > summary::-webkit-details-marker {
  display: none;
}

.nmx-actions-dropdown,
.nmx-advanced-panel,
.nmx-row-menu-body {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 8;
  min-width: 220px;
  padding: 10px;
  display: grid;
  gap: 6px;
  border-radius: 16px;
  border: 1px solid var(--nmx-line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.nmx-advanced-panel {
  width: min(420px, 80vw);
  grid-template-columns: 1fr 1fr;
}

.nmx-menu-item {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nmx-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.nmx-menu-item:hover {
  background: #f3f8fd;
}

.nmx-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nmx-process-btn {
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a1f44 0%, #007bff 100%);
  border-color: rgba(10, 31, 68, 0.06) !important;
  box-shadow: 0 12px 26px rgba(0, 123, 255, 0.18);
}

.nmx-process-btn:hover:not(:disabled) {
  box-shadow: 0 16px 30px rgba(0, 123, 255, 0.22);
  transform: translateY(-1px);
}

.nmx-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.nmx-kpi-card,
.nmx-table-card,
.nmx-side-card,
.nmx-side-disclosure {
  border-radius: 20px;
  border: 1px solid var(--nmx-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.nmx-kpi-card {
  padding: 18px 18px 20px;
  display: grid;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.nmx-kpi-card .kpi-value {
  font-size: clamp(24px, 2.2vw, 42px);
}

.nmx-kpi-card::after {
  content: "";
  position: absolute;
  inset: auto -16px -34px auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
}

.nmx-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

.nmx-kpi-card:nth-child(1) { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.nmx-kpi-card:nth-child(1)::after { background: rgba(0,123,255,0.08); }
.nmx-kpi-card:nth-child(2) { background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); }
.nmx-kpi-card:nth-child(2)::after { background: rgba(10,31,68,0.07); }
.nmx-kpi-card:nth-child(3) { background: linear-gradient(180deg, #ffffff 0%, #fffaf8 100%); }
.nmx-kpi-card:nth-child(3)::after { background: rgba(251,146,60,0.09); }
.nmx-kpi-card:nth-child(4) { background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%); }
.nmx-kpi-card:nth-child(4)::after { background: rgba(0,208,132,0.08); }
.nmx-kpi-card:nth-child(5) { background: linear-gradient(180deg, #ffffff 0%, #f6fffc 100%); }
.nmx-kpi-card:nth-child(5)::after { background: rgba(0,194,136,0.08); }

.nmx-kpi-icon.soft-blue { background: linear-gradient(135deg, rgba(0, 123, 255, 0.14), rgba(0, 123, 255, 0.24)); }
.nmx-kpi-icon.soft-navy { background: linear-gradient(135deg, rgba(10, 31, 68, 0.12), rgba(10, 31, 68, 0.2)); }
.nmx-kpi-icon.soft-red { background: linear-gradient(135deg, rgba(251, 146, 60, 0.14), rgba(248, 113, 113, 0.18)); }
.nmx-kpi-icon.soft-green { background: linear-gradient(135deg, rgba(0, 208, 132, 0.14), rgba(0, 208, 132, 0.24)); }
.nmx-kpi-icon.soft-teal { background: linear-gradient(135deg, rgba(0, 194, 136, 0.14), rgba(0, 194, 136, 0.24)); }

.nmx-filterbar {
  flex-wrap: nowrap;
  padding-bottom: 2px;
}

.nmx-filterbar > select {
  min-width: 166px;
}

.nmx-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(340px, 0.92fr);
  gap: 18px;
  min-height: 0;
}

.nmx-main,
.nmx-sidebar,
.nmx-table-card {
  min-height: 0;
}

.nmx-table-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: 100%;
  padding: 18px;
  gap: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.nmx-table-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.nmx-table-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.nmx-table-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nmx-table-search {
  position: relative;
  width: 268px;
}

.nmx-table-search .form-input {
  padding-right: 38px;
}

.nmx-table-search-icon,
.nmx-toolbar-bars,
.nmx-toolbar-download,
.nmx-toolbar-dots {
  display: inline-block;
  position: relative;
}

.nmx-table-search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 2px solid #7a8ca7;
  border-radius: 50%;
}

.nmx-table-search-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: #7a8ca7;
  transform: rotate(45deg);
  border-radius: 999px;
}

.nmx-table-tool {
  width: 38px;
  height: 38px;
  border: 1px solid var(--nmx-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--nmx-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.nmx-table-tool:hover {
  background: #f5f9fd;
  border-color: #cfdeec;
}

.nmx-table-tool.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.nmx-toolbar-bars {
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.nmx-toolbar-download {
  width: 14px;
  height: 14px;
}

.nmx-toolbar-download::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 2px;
  height: 8px;
  background: currentColor;
  border-radius: 999px;
}

.nmx-toolbar-download::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.nmx-table-tool[href] .nmx-toolbar-download + * {
  display: none;
}

.nmx-toolbar-dots {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.nmx-table-scroll,
.nmx-sidebar-scroll {
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.nmx-table-scroll {
  border: 1px solid #e5edf5;
  border-radius: 18px;
  background: #fff;
}

.nmx-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
}

.nmx-table th,
.nmx-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
  text-align: left;
}

.nmx-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(244, 248, 252, 0.98));
}

.nmx-table-row:hover td {
  background: #f8fbff;
}

.nmx-check {
  width: 16px;
  height: 16px;
  accent-color: var(--nmx-blue);
}

.nmx-person-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.nmx-person-trigger:disabled {
  cursor: default;
}

.nmx-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--nmx-avatar-bg);
  color: var(--nmx-avatar-fg);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nmx-person-copy {
  display: grid;
  gap: 2px;
}

.nmx-doc-progress {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nmx-doc-progress-bar {
  position: relative;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #e9eff5;
  overflow: hidden;
}

.nmx-doc-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00c288 0%, #00d084 100%);
}

.nmx-money-cell {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nmx-money-positive { color: #0f8f68; }
.nmx-money-negative { color: #c5616d; }
.nmx-money-net { color: var(--nmx-navy); }

.nmx-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.nmx-status-chip.is-success { background: rgba(0, 208, 132, 0.1); color: #0f8f68; border-color: rgba(0, 208, 132, 0.16); }
.nmx-status-chip.is-info { background: rgba(0, 123, 255, 0.1); color: #0f5ec7; border-color: rgba(0, 123, 255, 0.18); }
.nmx-status-chip.is-warning { background: rgba(255, 198, 78, 0.14); color: #9a6700; border-color: rgba(255, 198, 78, 0.24); }
.nmx-status-chip.is-danger { background: rgba(248, 113, 113, 0.12); color: #b42318; border-color: rgba(248, 113, 113, 0.22); }
.nmx-status-chip.is-neutral { background: #f4f7fb; color: #516173; border-color: #e0e8f1; }

.nmx-row-menu {
  display: inline-block;
}

.nmx-row-menu > summary {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--nmx-line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--nmx-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nmx-row-menu > summary:hover {
  background: #f5f9fd;
}

.nmx-row-menu-body {
  right: 0;
  left: auto;
  min-width: 190px;
}

.nmx-table-empty {
  padding: 42px 20px !important;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.nmx-legal-note {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(242, 247, 252, 0.98));
  border: 1px solid #e3edf7;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.nmx-pagination {
  justify-content: space-between;
}

.nmx-page-btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--nmx-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--nmx-soft);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.nmx-page-btn.is-active {
  background: rgba(0, 123, 255, 0.08);
  border-color: rgba(0, 123, 255, 0.18);
  color: var(--nmx-blue);
}

.nmx-sidebar {
  min-height: 0;
}

.nmx-sidebar-scroll {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 14px;
  padding-right: 4px;
}

.nmx-side-card {
  padding: 18px;
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.nmx-side-card-head {
  display: grid;
  gap: 4px;
}

.nmx-summary-list {
  display: grid;
  gap: 12px;
}

.nmx-summary-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.nmx-summary-list div + div {
  border-top: 1px solid #edf2f7;
  padding-top: 12px;
}

.nmx-summary-list strong,
.nmx-donut-legend strong {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--nmx-text);
  font-variant-numeric: tabular-nums;
}

.nmx-summary-list .is-positive { color: #00a86b; }
.nmx-summary-list .is-danger { color: #ef4444; }
.nmx-summary-list .is-primary { color: #0f5eff; }
.nmx-summary-list .is-total strong,
.nmx-summary-list .is-total { font-weight: 600; }

.nmx-donut-wrap {
  display: grid;
  gap: 16px;
}

.nmx-donut {
  position: relative;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  margin: 0 auto;
}

.nmx-donut-core {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
  border: 1px solid #e6eef6;
  display: grid;
  place-items: center;
  text-align: center;
}

.nmx-donut-core strong {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--nmx-navy);
}

.nmx-donut-core span {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.nmx-donut-legend {
  display: grid;
  gap: 10px;
}

.nmx-donut-legend div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nmx-donut-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.nmx-donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.nmx-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.nmx-quick-action {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px 12px 14px;
  border-radius: 16px;
  border: 1px solid #e4edf6;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  color: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  justify-items: center;
}

.nmx-quick-action:hover {
  border-color: #d1e0ef;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.nmx-qa-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}

.nmx-qa-icon::before {
  font-size: 18px;
  line-height: 1;
}

.nmx-qa-icon.qa-green { background: linear-gradient(180deg, rgba(0,208,132,0.14), rgba(0,208,132,0.22)); color: #00a86b; }
.nmx-qa-icon.qa-blue { background: linear-gradient(180deg, rgba(0,123,255,0.14), rgba(0,123,255,0.22)); color: #2563eb; }
.nmx-qa-icon.qa-purple { background: linear-gradient(180deg, rgba(168,85,247,0.12), rgba(168,85,247,0.2)); color: #7c3aed; }
.nmx-qa-icon.qa-orange { background: linear-gradient(180deg, rgba(251,146,60,0.14), rgba(251,146,60,0.22)); color: #ea580c; }
.nmx-qa-icon.qa-green::before { content: "\25A6"; }
.nmx-qa-icon.qa-blue::before { content: "\2398"; }
.nmx-qa-icon.qa-purple::before { content: "\2B73"; }
.nmx-qa-icon.qa-orange::before { content: "\21BA"; }

.nmx-quick-action strong {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--nmx-text);
  line-height: 1.25;
}

.nmx-quick-action span {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.nmx-side-disclosure {
  overflow: hidden;
}

.nmx-side-disclosure > summary {
  padding: 16px 18px;
  list-style: none;
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--nmx-text);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(246, 249, 252, 0.98));
  border-bottom: 1px solid transparent;
}

.nmx-side-disclosure[open] > summary {
  border-bottom-color: var(--nmx-line);
}

.nmx-side-disclosure-body {
  padding: 14px;
  background: #f8fbff;
}

.nmx-side-disclosure-body .nm-card {
  border-radius: 18px;
  border-color: #e8eef5;
  box-shadow: none;
}

.nmx-side-disclosure-body .nm-card-head {
  background: #fff;
}

.nmx-side-disclosure-body .nm-table-wrap,
.nmx-side-disclosure-body .nm-municipalities-list {
  max-height: 280px;
}

.nmx-side-disclosure-body .nm-confirm-body,
.nmx-side-disclosure-body .nm-period-selector {
  padding-inline: 18px;
}

@media (max-width: 1320px) {
  .nmx-shell {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .nmx-layout,
  .nmx-body,
  .nmx-table-card,
  .nmx-sidebar,
  .nmx-sidebar-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .nmx-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .nmx-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nmx-layout {
    padding: 16px;
  }

  .nmx-opsbar,
  .nmx-actionbar {
    flex-direction: column;
    align-items: stretch;
  }

  .nmx-actionbar,
  .nmx-pagination {
    justify-content: space-between;
  }

  .nmx-kpis,
  .nmx-advanced-panel {
    grid-template-columns: 1fr 1fr;
  }

  .nmx-table-headline,
  .nmx-pagination {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .nmx-kpis,
  .nmx-advanced-panel {
    grid-template-columns: 1fr;
  }

  .nmx-donut {
    width: 148px;
    height: 148px;
  }
}

/* ================================================================
   NÓMINA — PREMIUM REDESIGN 2026
   Solo visual / UX. Sin cambios de lógica ni estructura funcional.
   Referencias: Stripe, Rippling, Deel, Ramp.
   ================================================================ */

/* Tokens de color del módulo */
.nmx-shell {
  --nmx-bg:           #f4f7fb;
  --nmx-surface:      #ffffff;
  --nmx-surface-soft: #f8fbff;
  --nmx-line:         #e6edf5;
  --nmx-line-strong:  #ccd8e8;
  --nmx-text:         #0d1b36;
  --nmx-soft:         #56677a;
  --nmx-soft-2:       #8ea0b4;
  --nmx-blue:         #2563eb;
  --nmx-blue-soft:    #eff6ff;
  --nmx-navy:         #071b3a;
  --nmx-green:        #16a34a;
  --nmx-teal:         #0d9488;
}

/* ── Layout ── */
.nmx-layout {
  background: var(--nmx-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 26px !important;
  gap: 18px !important;
}

/* ── Ops bar (selects de contrato/municipio/periodo) ── */
.nmx-opsbar {
  padding: 14px 18px !important;
  background: var(--nmx-surface) !important;
  border-radius: 14px !important;
  border: 1px solid var(--nmx-line) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.04) !important;
}

.nmx-inline-field > span {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--nmx-soft-2) !important;
}

.nmx-inline-field select,
.nmx-filterbar select,
.nmx-advanced-panel select {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--nmx-line) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--nmx-text) !important;
  padding: 0 10px !important;
}

.nmx-icon-button,
.nmx-user-pill,
.nmx-actions-menu > summary,
.nmx-advanced-filters > summary {
  min-height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--nmx-line) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.nmx-user-pill {
  gap: 8px !important;
  padding: 0 14px 0 10px !important;
}

.nmx-user-pill-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* ── Action bar ── */
.nmx-actionbar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.nmx-actions-menu > summary {
  padding: 0 16px !important;
  cursor: pointer !important;
  color: var(--nmx-text) !important;
}

.nmx-actions-menu > summary:hover,
.nmx-advanced-filters > summary:hover {
  background: #f5f8fc !important;
}

/* Botón principal "Procesar nómina" */
.nmx-process-btn {
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #071b3a 0%, #1e3a8a 100%) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(7,27,58,.28), 0 1px 3px rgba(7,27,58,.14) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  transition: box-shadow .18s, transform .14s !important;
}

.nmx-process-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d2754 0%, #1e40af 100%) !important;
  box-shadow: 0 8px 22px rgba(7,27,58,.34), 0 2px 5px rgba(7,27,58,.16) !important;
  transform: translateY(-1px) !important;
}

/* Dropdowns de menú */
.nmx-actions-dropdown,
.nmx-advanced-panel,
.nmx-row-menu-body {
  border-radius: 14px !important;
  border: 1px solid var(--nmx-line) !important;
  box-shadow: 0 8px 30px rgba(15,23,42,.1), 0 2px 6px rgba(15,23,42,.05) !important;
  background: #ffffff !important;
  padding: 8px !important;
}

.nmx-menu-item {
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 12px !important;
  min-height: 36px !important;
}

.nmx-menu-item:hover { background: #f4f8fd !important; }

/* ── KPI Cards ── */
.nmx-kpis { gap: 14px !important; }

.nmx-kpi-card {
  padding: 20px 20px 22px !important;
  border-radius: 16px !important;
  border: 1px solid var(--nmx-line) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.04) !important;
  gap: 10px !important;
  overflow: visible !important;
  position: relative !important;
  transition: box-shadow .2s, transform .15s !important;
}

.nmx-kpi-card:hover {
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.07) !important;
  transform: translateY(-1px) !important;
}

/* Acento de color: línea superior */
.nmx-kpi-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 18px !important;
  right: 18px !important;
  height: 3px !important;
  border-radius: 0 0 4px 4px !important;
  display: block !important;
}

/* Círculo decorativo antiguo: desactivado */
.nmx-kpi-card::after { display: none !important; }

/* Fondos blancos para todas las variantes */
.nmx-kpi-card:nth-child(1),
.nmx-kpi-card:nth-child(2),
.nmx-kpi-card:nth-child(3),
.nmx-kpi-card:nth-child(4),
.nmx-kpi-card:nth-child(5) { background: #ffffff !important; }

/* Acentos de color superior por posición */
.nmx-kpi-card:nth-child(1)::before { background: #3b82f6 !important; }
.nmx-kpi-card:nth-child(2)::before { background: #1e3a8a !important; }
.nmx-kpi-card:nth-child(3)::before { background: #f97316 !important; }
.nmx-kpi-card:nth-child(4)::before { background: #16a34a !important; }
.nmx-kpi-card:nth-child(5)::before { background: #0d9488 !important; }

/* Íconos KPI: pasteles limpios */
.nmx-kpi-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.nmx-kpi-icon.soft-blue  { background: #dbeafe !important; }
.nmx-kpi-icon.soft-navy  { background: #e0e7ff !important; }
.nmx-kpi-icon.soft-red   { background: #ffedd5 !important; }
.nmx-kpi-icon.soft-green { background: #dcfce7 !important; }
.nmx-kpi-icon.soft-teal  { background: #ccfbf1 !important; }

/* Tipografía KPI */
.nmx-kpi-card .kpi-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--nmx-soft-2) !important;
}

.nmx-kpi-card .kpi-value {
  font-size: clamp(20px, 1.8vw, 30px) !important;
  font-weight: 800 !important;
  color: var(--nmx-text) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

.nmx-kpi-card .kpi-meta {
  font-size: 11.5px !important;
  color: var(--nmx-soft-2) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* ── Filter bar ── */
.nmx-filterbar {
  padding: 11px 16px !important;
  background: var(--nmx-surface) !important;
  border-radius: 12px !important;
  border: 1px solid var(--nmx-line) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.03) !important;
  gap: 9px !important;
}

.nmx-filterbar > select {
  min-width: 140px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #eaeff5 !important;
  background: #f8fafc !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--nmx-text) !important;
  padding: 0 8px !important;
}

/* ── Tabla principal ── */
.nmx-table-card {
  border-radius: 16px !important;
  border: 1px solid var(--nmx-line) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.05) !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-rows: auto minmax(0,1fr) auto auto !important;
}

.nmx-table-headline {
  padding: 18px 22px 16px !important;
  border-bottom: 1px solid #f0f5fa !important;
  gap: 12px !important;
}

.nmx-table-headline .module-subtitle {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--nmx-soft-2) !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.nmx-table-headline h3,
.nmx-table-headline .employee-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nmx-text) !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
}

.nmx-table-scroll {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.nmx-table { min-width: 1100px !important; }

/* Encabezado de tabla ultra limpio */
.nmx-table th {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e8eef5 !important;
  color: #8ea0b4 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
}

/* Celdas de la tabla */
.nmx-table td {
  padding: 15px 16px !important;
  border-bottom: 1px solid #f0f5fa !important;
  vertical-align: middle !important;
}

.nmx-table tbody tr:last-child td { border-bottom: none !important; }

.nmx-table-row:hover td { background: #f6fafd !important; }

/* Avatar */
.nmx-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  flex-shrink: 0 !important;
}

/* Tipografía de filas */
.table-main {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  color: var(--nmx-text) !important;
  line-height: 1.3 !important;
}

.table-secondary {
  font-size: 11.5px !important;
  color: var(--nmx-soft-2) !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* Valores monetarios */
.nmx-money-cell {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.nmx-money-positive { color: #0f7a56 !important; }
.nmx-money-negative { color: #b44b4b !important; }
.nmx-money-net { color: #0a1f44 !important; font-size: 14px !important; font-weight: 800 !important; }

/* Status chips */
.nmx-status-chip {
  padding: 3px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.nmx-status-chip.is-success  { background: #f0fdf4 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.nmx-status-chip.is-info     { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.nmx-status-chip.is-warning  { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.nmx-status-chip.is-danger   { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.nmx-status-chip.is-neutral  { background: #f8fafc !important; color: #475569 !important; border-color: #e2e8f0 !important; }

/* Row action button */
.nmx-row-menu > summary {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e8eef5 !important;
  font-size: 15px !important;
  color: #8ea0b4 !important;
}

.nmx-row-menu > summary:hover {
  background: #eef4fb !important;
  color: var(--nmx-text) !important;
}

/* Doc progress bar */
.nmx-doc-progress { margin-top: 8px !important; gap: 8px !important; }
.nmx-doc-progress-bar { background: #e8eef5 !important; width: 72px !important; }
.nmx-doc-progress-bar > span { background: linear-gradient(90deg, #2563eb, #60a5fa) !important; }

/* Nota legal */
.nmx-legal-note {
  margin: 0 !important;
  padding: 11px 22px !important;
  border-radius: 0 0 16px 16px !important;
  background: #f8fafc !important;
  border: none !important;
  border-top: 1px solid #f0f5fa !important;
  font-size: 11px !important;
  color: var(--nmx-soft-2) !important;
  line-height: 1.5 !important;
}

/* Paginación */
.nmx-pagination {
  padding: 12px 22px !important;
  border-top: 1px solid #f0f5fa !important;
}

.nmx-page-btn {
  border-radius: 8px !important;
  background: #f8fafc !important;
  border-color: #e4edf5 !important;
  color: var(--nmx-soft) !important;
  font-weight: 600 !important;
  min-width: 32px !important;
  height: 32px !important;
  font-size: 12.5px !important;
}

.nmx-page-btn.is-active {
  background: var(--nmx-blue) !important;
  border-color: var(--nmx-blue) !important;
  color: #ffffff !important;
}

/* ── Panel lateral derecho ── */
.nmx-sidebar-scroll { gap: 14px !important; }

.nmx-side-card {
  border-radius: 16px !important;
  border: 1px solid var(--nmx-line) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.04) !important;
  padding: 18px !important;
  gap: 14px !important;
}

.nmx-side-card-head { gap: 3px !important; }

.nmx-side-card-head h3,
.nmx-side-card-head .employee-name {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--nmx-text) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.nmx-side-card-head span,
.nmx-side-card-head .employee-role {
  font-size: 11.5px !important;
  color: var(--nmx-soft-2) !important;
  font-weight: 500 !important;
}

/* Summary grid */
.nmx-summary-grid { gap: 9px !important; }

.nmx-summary-grid article {
  padding: 12px 14px !important;
  border-radius: 11px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  gap: 4px !important;
}

.nmx-summary-grid article .kpi-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--nmx-soft-2) !important;
}

.nmx-summary-grid strong,
.nmx-donut-legend strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nmx-text) !important;
  letter-spacing: -0.02em !important;
}

/* Donut chart */
.nmx-donut { width: 156px !important; height: 156px !important; }

.nmx-donut-core {
  inset: 20px !important;
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  box-shadow: none !important;
}

.nmx-donut-core strong {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--nmx-text) !important;
  letter-spacing: -0.03em !important;
}

.nmx-donut-core span {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--nmx-soft-2) !important;
}

.nmx-donut-legend div {
  padding: 5px 0 !important;
  border-bottom: 1px solid #f4f7fb !important;
}

.nmx-donut-legend div:last-child { border-bottom: none !important; }

.nmx-donut-legend span {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--nmx-soft) !important;
}

.nmx-donut-legend i { width: 8px !important; height: 8px !important; }

/* Quick actions */
.nmx-quick-actions { gap: 7px !important; }

.nmx-quick-action {
  padding: 13px 16px 13px 50px !important;
  border-radius: 12px !important;
  border: 1px solid #edf2f7 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  gap: 2px !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}

.nmx-quick-action:hover {
  border-color: #cdddf0 !important;
  background: #f2f8fd !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
}

.nmx-quick-action::before {
  left: 13px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
}

.nmx-quick-action:nth-child(1)::before { background: #dbeafe !important; }
.nmx-quick-action:nth-child(2)::before { background: #dcfce7 !important; }
.nmx-quick-action:nth-child(3)::before { background: #ffedd5 !important; }
.nmx-quick-action:nth-child(4)::before { background: #e0e7ff !important; }

.nmx-quick-action strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--nmx-text) !important;
}

.nmx-quick-action span {
  font-size: 11.5px !important;
  color: var(--nmx-soft-2) !important;
  line-height: 1.4 !important;
}

/* Disclosure sections (Periodo, Novedades, etc.) */
.nmx-side-disclosure {
  border-radius: 14px !important;
  border: 1px solid var(--nmx-line) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.03) !important;
  overflow: hidden !important;
}

.nmx-side-disclosure > summary {
  padding: 14px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--nmx-text) !important;
  background: transparent !important;
}

.nmx-side-disclosure[open] > summary {
  border-bottom-color: var(--nmx-line) !important;
  background: #f8fafc !important;
}

.nmx-side-disclosure-body {
  padding: 14px !important;
  background: #f8fafc !important;
}

/* Badge notificación */
.nmx-icon-badge {
  background: #2563eb !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Fix height para viewport lock */
.nm-wrap.nmx-shell {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 1320px) {
  .nm-wrap.nmx-shell {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ================================================================
   NÓMINA — PRECISION PASS: paleta exacta + dimensiones exactas
   ================================================================ */

/* ── Tokens exactos ── */
.nmx-shell {
  --app-bg:       #f5f8fc;
  --sidebar-bg:   #071b3a;
  --surface:      #ffffff;
  --surface-soft: #f8fbff;
  --primary:      #007bff;
  --primary-dark: #0a1f44;
  --success:      #00d084;
  --teal:         #00c288;
  --warning:      #f59e0b;
  --danger:       #ef4444;
  --border:       #dbe7f3;
  --text-main:    #0f172a;
  --text-muted:   #64748b;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ── Fondo del módulo ── */
.nmx-layout {
  background: var(--app-bg) !important;
  padding: 24px !important;
  gap: 20px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Opsbar ── */
.nmx-opsbar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 14px 20px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
}

.nmx-inline-field > span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.nmx-inline-field select,
.nmx-filterbar select,
.nmx-advanced-panel select {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  font-family: inherit !important;
}

.nmx-icon-button,
.nmx-user-pill,
.nmx-actions-menu > summary,
.nmx-advanced-filters > summary {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}

/* ── Botón principal "Procesar nómina" ── */
.nmx-process-btn {
  height: 46px !important;
  padding: 0 26px !important;
  border-radius: 14px !important;
  background: var(--primary) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 14px rgba(0,123,255,.3) !important;
  transition: background .15s, box-shadow .15s, transform .12s !important;
}

.nmx-process-btn:hover:not(:disabled) {
  background: #0069d9 !important;
  box-shadow: 0 6px 20px rgba(0,123,255,.38) !important;
  transform: translateY(-1px) !important;
}

.nmx-process-btn:disabled {
  background: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Botón "Acciones" */
.nmx-actions-menu > summary {
  padding: 0 18px !important;
  cursor: pointer !important;
  color: var(--text-main) !important;
}

/* ── KPI Cards ── */
.nmx-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.nmx-kpi-card {
  padding: 22px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 0 1px rgba(15,23,42,.06) !important;
  display: grid !important;
  gap: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow .2s, transform .15s !important;
}

.nmx-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,.09), 0 0 1px rgba(15,23,42,.06) !important;
  transform: translateY(-2px) !important;
}

/* Eliminar pseudoelemento anterior */
.nmx-kpi-card::after  { display: none !important; }
.nmx-kpi-card::before { display: none !important; }

/* Ícono circular de KPI */
.nmx-kpi-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

.nmx-kpi-icon.soft-blue  { background: rgba(0,123,255,.13) !important; }
.nmx-kpi-icon.soft-navy  { background: rgba(10,31,68,.13) !important; }
.nmx-kpi-icon.soft-red   { background: rgba(245,158,11,.14) !important; }
.nmx-kpi-icon.soft-green { background: rgba(0,208,132,.14) !important; }
.nmx-kpi-icon.soft-teal  { background: rgba(0,194,136,.14) !important; }

/* Etiqueta KPI */
.nmx-kpi-card .kpi-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-family: inherit !important;
}

/* Valor numérico KPI */
.nmx-kpi-card .kpi-value {
  font-size: clamp(22px, 2vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  font-family: inherit !important;
}

/* Meta / descripción KPI */
.nmx-kpi-card .kpi-meta {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
}

/* ── Filter bar ── */
.nmx-filterbar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 12px 18px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nmx-filterbar > select {
  height: 40px !important;
  min-height: 40px !important;
  min-width: 136px !important;
  border-radius: 10px !important;
  border: 1px solid #e0eaf4 !important;
  background: #f8fafc !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  font-family: inherit !important;
}

/* ── Tabla principal ── */
.nmx-table-card {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05), 0 0 1px rgba(15,23,42,.06) !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.nmx-table-headline {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid #eef3f9 !important;
  align-items: center !important;
}

.nmx-table-headline .module-subtitle {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.nmx-table-headline .employee-name,
.nmx-table-headline h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

.nmx-table-scroll {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Encabezado de tabla */
.nmx-table th {
  background: #f7fafd !important;
  border-bottom: 1px solid #e8f0f8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 13px 18px !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

/* Filas de tabla: mínimo 58px de alto */
.nmx-table td {
  padding: 18px 18px !important;
  min-height: 58px !important;
  border-bottom: 1px solid #eef3f9 !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  font-family: inherit !important;
}

.nmx-table-row { height: 58px !important; }
.nmx-table tbody tr:last-child td { border-bottom: none !important; }
.nmx-table-row:hover td { background: #f5f9fd !important; }

/* Nombre y documento en la tabla */
.table-main {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  line-height: 1.3 !important;
  font-family: inherit !important;
}

.table-secondary {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

/* Avatar empleado */
.nmx-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Celdas de dinero */
.nmx-money-cell {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.nmx-money-positive { color: #0d9488 !important; }
.nmx-money-negative { color: #e05252 !important; }
.nmx-money-net      { color: var(--primary-dark) !important; font-weight: 700 !important; font-size: 15px !important; }

/* ── Status chips exactos ── */
.nmx-status-chip,
.status-chip.nmx-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

/* Pagado / success → verde suave */
.nmx-status-chip.is-success {
  background: rgba(0,208,132,.1) !important;
  color: #0a7a50 !important;
  border-color: rgba(0,208,132,.25) !important;
}

/* Procesado / info → azul suave */
.nmx-status-chip.is-info {
  background: rgba(0,123,255,.1) !important;
  color: #0060cc !important;
  border-color: rgba(0,123,255,.2) !important;
}

/* Pendiente / warning → naranja suave */
.nmx-status-chip.is-warning {
  background: rgba(245,158,11,.1) !important;
  color: #a16207 !important;
  border-color: rgba(245,158,11,.22) !important;
}

/* Error / danger → rojo suave */
.nmx-status-chip.is-danger {
  background: rgba(239,68,68,.1) !important;
  color: #b91c1c !important;
  border-color: rgba(239,68,68,.22) !important;
}

/* Neutral */
.nmx-status-chip.is-neutral {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

/* Row action button (menú "...") */
.nmx-row-menu > summary {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e0eaf4 !important;
  color: var(--text-muted) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.nmx-row-menu > summary:hover {
  background: #e8f1fc !important;
  color: var(--primary) !important;
  border-color: #bdd4f0 !important;
}

/* Progress bar documentos */
.nmx-doc-progress-bar { background: #e2ecf8 !important; width: 76px !important; }
.nmx-doc-progress-bar > span { background: linear-gradient(90deg, var(--primary), #60a5fa) !important; }
.nmx-doc-progress { margin-top: 6px !important; }

/* Nota legal */
.nmx-legal-note {
  padding: 12px 24px !important;
  border-radius: 0 0 20px 20px !important;
  background: #f7fafd !important;
  border: none !important;
  border-top: 1px solid #eef3f9 !important;
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* Paginación */
.nmx-pagination {
  padding: 14px 24px !important;
  border-top: 1px solid #eef3f9 !important;
}

.nmx-page-btn {
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background .12s !important;
}

.nmx-page-btn.is-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* ── Panel lateral derecho ── */
.nmx-side-card {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 0 1px rgba(15,23,42,.05) !important;
  padding: 20px !important;
  gap: 16px !important;
}

.nmx-side-card-head .employee-name,
.nmx-side-card-head h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  font-family: inherit !important;
}

.nmx-side-card-head .employee-role,
.nmx-side-card-head span {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

/* Summary grid */
.nmx-summary-grid article {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: #f5f8fc !important;
  border: 1px solid #e8f0f8 !important;
  gap: 5px !important;
}

.nmx-summary-grid article .kpi-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-family: inherit !important;
}

.nmx-summary-grid strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.02em !important;
  font-family: inherit !important;
}

/* Donut chart */
.nmx-donut      { width: 158px !important; height: 158px !important; }
.nmx-donut-core { inset: 20px !important; background: var(--surface) !important; border-color: #e4edf6 !important; box-shadow: none !important; }
.nmx-donut-core strong { font-size: 20px !important; font-weight: 700 !important; color: var(--text-main) !important; letter-spacing: -0.03em !important; }
.nmx-donut-core span   { font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--text-muted) !important; }
.nmx-donut-legend strong { font-size: 13px !important; font-weight: 700 !important; font-family: inherit !important; }
.nmx-donut-legend span   { font-size: 12.5px !important; font-weight: 400 !important; color: var(--text-muted) !important; }

/* Quick actions */
.nmx-quick-action {
  padding: 15px 16px 15px 52px !important;
  border-radius: 16px !important;
  border: 1px solid #e8f0f8 !important;
  background: #f7fafd !important;
  box-shadow: none !important;
  gap: 3px !important;
  transition: border-color .14s, background .14s, box-shadow .14s !important;
}

.nmx-quick-action:hover {
  border-color: #c8dcf2 !important;
  background: var(--surface) !important;
  box-shadow: 0 4px 16px rgba(0,123,255,.08) !important;
}

.nmx-quick-action::before {
  left: 14px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
}

.nmx-quick-action:nth-child(1)::before { background: rgba(0,123,255,.14) !important; }
.nmx-quick-action:nth-child(2)::before { background: rgba(0,208,132,.14) !important; }
.nmx-quick-action:nth-child(3)::before { background: rgba(245,158,11,.13) !important; }
.nmx-quick-action:nth-child(4)::before { background: rgba(10,31,68,.12) !important; }

.nmx-quick-action strong { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text-main) !important; font-family: inherit !important; }
.nmx-quick-action span   { font-size: 11.5px !important; color: var(--text-muted) !important; line-height: 1.4 !important; font-family: inherit !important; }

/* Disclosures */
.nmx-side-disclosure {
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.04) !important;
}

.nmx-side-disclosure > summary {
  padding: 15px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  background: transparent !important;
  font-family: inherit !important;
}

.nmx-side-disclosure[open] > summary {
  border-bottom-color: var(--border) !important;
  background: #f7fafd !important;
}

.nmx-side-disclosure-body {
  padding: 16px !important;
  background: #f7fafd !important;
}

/* Botones secundarios del módulo (nm-btn) */
.nm-btn {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}

.nm-btn-primary  { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.nm-btn-primary:hover:not(:disabled)  { background: #0069d9 !important; border-color: #0069d9 !important; }

/* Viewport: nómina en pantalla completa */
.nm-wrap.nmx-shell {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 1321px) {
  .nmx-body {
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .88fr) !important;
    gap: 20px !important;
  }
}

/* ===== final payroll/sidebar alignment to reference ===== */
.sidebar-brand {
  align-items: center !important;
  justify-content: flex-start !important;
}

.sb-user-info {
  order: 4 !important;
  margin-top: 12px !important;
}

.sb-context-card {
  order: 3 !important;
}

.nmx-opsbar {
  justify-content: flex-start !important;
}

.nmx-opsbar-controls {
  width: 100%;
  justify-content: flex-start;
}

.nmx-table-headline {
  align-items: center !important;
}

.nmx-table-period {
  padding-top: 2px;
}

.nmx-summary-list {
  gap: 0 !important;
}

.nmx-summary-list div {
  min-height: 30px;
}

.nmx-quick-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.nmx-quick-action {
  min-height: 116px;
}

@media (max-width: 920px) {
  .nmx-table-tools {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .nmx-table-search {
    width: 100%;
  }

  .nmx-table-period {
    flex-direction: column;
    align-items: flex-start;
  }

  .nmx-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .nmx-quick-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ===== forced visual override to match target shell ===== */
.sidebar {
  background: linear-gradient(180deg, #071b3a 0%, #0a1f44 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  padding: 22px 14px 16px !important;
}

.sidebar-brand {
  padding: 0 10px 18px !important;
  margin-bottom: 14px !important;
}

.sb-logo-only {
  width: 42px !important;
  height: 42px !important;
}

.sb-brand-copy {
  display: grid !important;
}

.sb-brand-title {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.sb-brand-subtitle {
  color: rgba(223, 234, 247, 0.78) !important;
  font-size: 0.74rem !important;
}

.module-nav-item {
  min-height: 44px !important;
  border-radius: 12px !important;
  color: rgba(232, 239, 248, 0.9) !important;
}

.module-nav-item.active {
  background: linear-gradient(180deg, rgba(27, 94, 255, 0.92), rgba(18, 73, 204, 0.92)) !important;
  border-color: rgba(103, 167, 255, 0.3) !important;
  box-shadow: none !important;
}

.module-nav-item.active .module-nav-title,
.module-nav-item.active .module-nav-icon {
  color: #ffffff !important;
}

.sb-context-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
}

.sb-user-info {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
}

.sb-logout-btn {
  min-height: 48px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.topbar-pro {
  background: #ffffff !important;
  border-bottom: 1px solid #dbe7f3 !important;
  box-shadow: 0 8px 26px rgba(15,23,42,.05) !important;
}

.nmx-layout {
  padding: 18px !important;
  gap: 16px !important;
  background: #f5f8fc !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nmx-opsbar,
.nmx-actionbar,
.nmx-kpi-card,
.nmx-filterbar,
.nmx-table-card,
.nmx-side-card,
.nmx-side-disclosure {
  box-shadow: 0 10px 24px rgba(15,23,42,.045) !important;
}

.nmx-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.nmx-kpi-card {
  min-height: 116px !important;
  padding: 16px 18px !important;
}

.nmx-table-card {
  border-radius: 18px !important;
}

.nmx-table-scroll {
  border-radius: 16px !important;
}

.nmx-table th {
  background: #ffffff !important;
  border-bottom: 1px solid #e6eef7 !important;
}

.nmx-table td {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.nmx-table-row:hover td {
  background: #f8fbff !important;
}

.nmx-summary-list strong {
  font-size: 1.5rem !important;
}

.nmx-donut {
  width: 138px !important;
  height: 138px !important;
}

.nmx-quick-action {
  min-height: 108px !important;
  padding: 14px 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR LIGHT — rediseño visual (oscuro → blanco)
   ══════════════════════════════════════════════════════════════ */

/* Contenedor principal */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(15,23,42,.05) !important;
}

/* Área de marca */
.sidebar-brand {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 16px !important;
  margin-bottom: 4px !important;
}

.sb-brand-title {
  color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
}

.sb-brand-subtitle {
  color: #64748b !important;
  font-size: 0.73rem !important;
  font-weight: 400 !important;
}

/* Items de navegación */
.module-nav-item {
  color: #475569 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.module-nav-item:hover {
  background: #f1f5f9 !important;
  border-color: transparent !important;
  color: #1e293b !important;
  transform: none !important;
}

.module-nav-icon {
  color: #94a3b8 !important;
}

.module-nav-item:hover .module-nav-icon {
  color: #475569 !important;
}

.module-nav-title {
  color: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}

.module-nav-caret {
  color: #cbd5e1 !important;
}

/* Item activo — pill azul sólido */
.module-nav-item.active {
  background: #007bff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0,123,255,.28) !important;
  color: #ffffff !important;
}

.module-nav-item.active .module-nav-icon,
.module-nav-item.active .module-nav-title,
.module-nav-item.active .module-nav-caret {
  color: #ffffff !important;
}

/* Subítems */
.submodule-list {
  border-left: 1px solid #e2e8f0 !important;
}

.submodule-nav-item {
  color: #64748b !important;
}

.submodule-nav-item:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

.submodule-nav-item.active {
  background: rgba(0,123,255,.1) !important;
  color: #007bff !important;
}

.submodule-dot {
  background: #cbd5e1 !important;
}

.submodule-nav-item.active .submodule-dot {
  background: #007bff !important;
}

/* Card de info de usuario */
.sb-user-info {
  background: #f8fafc !important;
  border: 1px solid #e8f0f8 !important;
  border-radius: 14px !important;
}

.sb-user-details strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.sb-user-role {
  color: #64748b !important;
  font-size: 0.75rem !important;
}

.sb-user-avatar {
  background: linear-gradient(135deg, #007bff, #60a5fa) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,123,255,.2) !important;
}

/* Card de empresa activa */
.sb-context-card {
  background: #f8fafc !important;
  border: 1px solid #e8f0f8 !important;
  border-radius: 14px !important;
}

.sb-context-eyebrow {
  color: #94a3b8 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.sb-context-primary strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.sb-context-primary span,
.sb-context-item .sb-context-label {
  color: #64748b !important;
  font-size: 0.78rem !important;
}

.sb-context-item strong {
  color: #1e293b !important;
}

/* Botón cerrar sesión */
.sb-logout-btn {
  background: transparent !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  border-radius: 12px !important;
}

.sb-logout-btn:hover {
  background: #fff0f0 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

.sb-logout-btn svg {
  color: inherit !important;
}

/* Separadores de grupo de nav */
.module-group-label {
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Sidebar colapsado — mantener tema claro */
body.sidebar-collapsed .sidebar,
.dashboard.sidebar-mini .sidebar,
.sidebar-mini .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
}

/* Scrollbar del sidebar en tema claro */
.sidebar::-webkit-scrollbar-thumb {
  background: #e2e8f0 !important;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1 !important;
}

/* =====================================================================
   EMPIRIA PREMIUM REDESIGN v2
   ===================================================================== */

/* ---- Línea accent de marca + fija el viewport ---- */
html {
  border-top: 3px solid #4f46e5;
  height: 100% !important;
  overflow: hidden !important;
}

body {
  height: 100% !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
}

.bg-blur { display: none !important; }

/* ---- App shell: full bleed, altura total del viewport ---- */
.app-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 59px !important;   /* 3px accent border + 56px topbar */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  background: #f1f5f9 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ---- Topbar: FIXED, ancho total, por encima de todo ---- */
.topbar-pro {
  position: fixed !important;
  top: 3px !important;        /* justo bajo la línea accent del html */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 12px rgba(15,23,42,0.06) !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* ---- Dashboard grid: sin fila de topbar (topbar está fixed) ---- */
.dashboard {
  background: #f1f5f9 !important;
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "sidebar main" !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  margin-top: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* El topbar deja de ocupar espacio en el grid */
.dashboard > .topbar-pro {
  grid-area: auto !important;
  position: fixed !important;
}

/* ---- Sidebar: ocupa toda la altura del dashboard ---- */
.sidebar {
  background: #0f172a !important;
  background-image: linear-gradient(180deg, #0f172a 0%, #0c1322 100%) !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.12) !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  padding: 10px 12px 24px 12px !important;
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

/* Sidebar items con truncado de texto */
.module-nav-title,
.sb-brand-title,
.sb-brand-subtitle,
.submodule-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.module-nav-inline {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}

.module-nav-item {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

/* Activo: acento índigo visible */
.module-nav-item.active {
  background: rgba(99,102,241,0.18) !important;
  border-color: rgba(99,102,241,0.35) !important;
}

.module-nav-item.active .module-nav-title {
  color: #a5b4fc !important;
}

.module-nav-item:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.submodule-nav-item {
  border-radius: 6px !important;
}

.submodule-nav-item.active {
  background: rgba(99,102,241,0.16) !important;
  color: #c7d2fe !important;
}

.submodule-nav-item.active .submodule-dot {
  background: #818cf8 !important;
}

/* Sidebar brand y user */
.sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding-bottom: 14px !important;
}

.sb-user-info {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
}

.sb-user-avatar {
  background: rgba(99,102,241,0.35) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  color: #c7d2fe !important;
  flex-shrink: 0 !important;
}

.sb-context-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.sb-logout-btn {
  border-radius: 8px !important;
  color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;
}

.sb-logout-btn:hover {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.18) !important;
  color: #fca5a5 !important;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 4px !important; }
.sidebar::-webkit-scrollbar-track { background: transparent !important; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; border-radius: 99px !important; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22) !important; }

/* ---- Context card: fluye justo después del último módulo ---- */
.sb-context-card {
  order: 3 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.sb-context-primary {
  border-radius: 6px !important;
  padding: 8px 10px !important;
  gap: 3px !important;
}

.sb-context-primary strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.sb-context-primary span {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}

.sb-context-item {
  gap: 3px !important;
}

.sb-context-item strong {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* Nav: flujo normal, sin flex tricks */
#moduleNav, .sidebar-nav {
  order: 0 !important;
  flex: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Primer grupo de nav: sin margen top extra */
.module-group:first-child { margin-top: 0 !important; }

/* Sidebar colapsado: mantiene dark */
body.sidebar-collapsed .sidebar,
.dashboard.sidebar-mini .sidebar,
.sidebar-mini .sidebar {
  background: #0f172a !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}

/* ---- Panel principal ---- */
.main-panel {
  background: #f1f5f9 !important;
  padding: 16px 24px 12px 16px !important;
  gap: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ---- Workspace: scroll interno ---- */
.workspace,
#workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.workspace-panel {
  min-height: 0 !important;
  height: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTRACT CONFIG — USERS TAB
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Positions filter buttons ── */
.ccp-pos-filters {
  display: flex; gap: 6px;
}
.ccp-pos-filter-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.ccp-pos-filter-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.ccp-pos-filter-btn[data-filter="licitacion"].ccp-pos-filter-active {
  background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}
.ccp-pos-filter-btn[data-filter="real"].ccp-pos-filter-active {
  background: #f0fdf4; border-color: #86efac; color: #15803d;
}

.ccp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ccp-users-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
}

.ccp-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ccp-users-table thead tr {
  background: #1e2a3a;
  border-bottom: none;
}

.ccp-users-table th {
  padding: 11px 14px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #cbd5e1;
  text-align: left;
  white-space: nowrap;
}

.ccp-users-table th:first-child { border-radius: 8px 0 0 0; }
.ccp-users-table th:last-child  { border-radius: 0 8px 0 0; }

.ccp-users-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
  font-size: 13px;
}

.ccp-users-table tbody tr:last-child td { border-bottom: none; }
.ccp-users-table tbody tr:nth-child(even) td { background: #f9fafb; }
.ccp-users-table tbody tr:hover td { background: #f0f7ff !important; }

.ccp-user-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 6px;
  color: #475569;
}

.ccp-users-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ccp-user-edit-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #3b82f6;
  border-radius: 5px;
  background: #eff6ff;
  color: #2563eb;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.ccp-user-edit-btn:hover { background: #dbeafe; }

.ccp-user-deact-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #f97316;
  border-radius: 5px;
  background: #fff7ed;
  color: #c2410c;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.ccp-user-deact-btn:hover { background: #ffedd5; }
.ccp-user-deact-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ccp-loading-row {
  padding: 20px 16px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}

/* ── Permisos por cargo ───────────────────────────────────────────────────── */

.ccp-perms-roles-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.ccp-role-tab {
  padding: 7px 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  background: #f8fafc;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.ccp-role-tab:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.ccp-role-tab-active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.ccp-perms-body {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
}

.ccp-perms-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.ccp-perms-table thead tr {
  background: #1e2a3a;
  border-bottom: none;
}

.ccp-perms-table th {
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #cbd5e1;
  text-align: center;
}

.ccp-perms-mod-col {
  text-align: left !important;
  min-width: 160px;
}
.ccp-perms-mod-col:first-child { border-radius: 8px 0 0 0; }
.ccp-perms-action-col:last-child { border-radius: 0 8px 0 0; }

.ccp-perms-action-col {
  min-width: 68px;
}

.ccp-perms-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 13px;
}

.ccp-perms-table tbody tr:last-child td { border-bottom: none; }
.ccp-perms-table tbody tr:nth-child(even) td { background: #f9fafb; }
.ccp-perms-table tbody tr:hover td { background: #f0f7ff !important; }

.ccp-perms-mod-name {
  font-weight: 600;
  color: #1e293b;
}

.ccp-perms-chk-cell {
  text-align: center;
}

.ccp-perm-chk {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1e3a5f;
}

/* ---- Cards y paneles ---- */
.summary-card,
.panel-section,
.workspace-panel,
.module-card,
.result-box,
.admin-box,
.admin-user-card,
.info-card,
.personnel-item,
.card,
.personnel-master-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.04) !important;
  border-radius: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.workspace-panel {
  border-radius: 10px !important;
  padding: 24px !important;
  overflow: visible !important;
}

.workspace-empty {
  background: #ffffff !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 10px !important;
}

.workspace,
#workspace {
  background: transparent !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Grids internos: siempre con min-width 0 */
.form-grid > *,
.form-grid.two-cols > *,
.admin-grid > *,
.personnel-form > *,
.dashboard-stats > *,
.kpi-grid > *,
.coverage-grid > *,
.main-grid > *,
.personnel-grid > *,
.training-grid > * {
  min-width: 0 !important;
}

/* Tablas: scroll interno, nunca desbordan */
.personnel-table-wrap,
.table-wrap,
[class*="table-wrap"],
[class*="-table"] {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* ---- Botón primario: dark, sin gradiente ---- */
.btn-primary,
.admin-actions button,
button[type="submit"] {
  background: #0f172a !important;
  background-image: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 11px 18px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: background 0.12s ease, box-shadow 0.12s ease !important;
}

.btn-primary:hover,
.admin-actions button:hover,
button[type="submit"]:hover {
  background: #1e293b !important;
  background-image: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transform: none !important;
}

.btn-secondary {
  border-radius: 8px !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  transition: background 0.12s ease, box-shadow 0.12s ease !important;
}

.btn-secondary:hover {
  background: #f9fafb !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  transform: none !important;
}

.btn:hover, button:hover { transform: none !important; }

/* ---- Inputs ---- */
input, select, textarea {
  border-radius: 8px !important;
  border: 1px solid #d1d5db !important;
  padding: 10px 13px !important;
  font-size: 14px !important;
  background: #ffffff !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
}

label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  gap: 6px !important;
}

/* ---- Eyebrow ---- */
.eyebrow {
  color: #6b7280 !important;
  letter-spacing: 0.09em !important;
  font-size: 11px !important;
}

/* ---- KPI cards ---- */
.kpi-card {
  background: #0f172a !important;
  background-image: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ---- Tablas ---- */
thead { background: #f8fafc !important; }

th {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

td {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 13px 14px !important;
  color: #0f172a !important;
  font-size: 13px !important;
}

tr:hover { background: #f8fafc !important; }

/* ---- Login premium ---- */
.login-screen {
  background: #f1f5f9 !important;
  background-image: none !important;
}

.login-screen::before { display: none !important; }

.login-card {
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 40px rgba(15,23,42,0.12) !important;
  backdrop-filter: none !important;
  width: min(100%, 400px) !important;
  padding: 36px 32px !important;
}

/* ---- Topbar elementos ---- */
.tb-search-trigger {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

.tb-search-trigger:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.tb-icon-btn {
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.tb-icon-btn:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.tb-icon-primary {
  background: #0f172a !important;
  border-color: #0f172a !important;
}

.tb-icon-primary:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
}

.tb-user-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

.tb-user-pill:hover { background: #f1f5f9 !important; }

.tb-avatar,
.tb-avatar-lg {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
}

.tb-dropdown {
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.12) !important;
}

/* ---- Search overlay ---- */
.gs-modal {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.16) !important;
}

/* ---- Scrollbar global ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Sección head ---- */
.section-head h3, .workspace-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ---- Boot screen ---- */
.boot-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(15,23,42,0.12) !important;
}

/* ====================================================================
   SIDEBAR v3 — color más vivo, mejor contraste
   ==================================================================== */

/* Fondo: navy rico con ligero gradiente, no negro puro */
.sidebar {
  background: #16213e !important;
  background-image: linear-gradient(180deg, #16213e 0%, #0f3460 100%) !important;
}

body.sidebar-collapsed .sidebar,
.dashboard.sidebar-mini .sidebar,
.sidebar-mini .sidebar {
  background: #16213e !important;
  background-image: linear-gradient(180deg, #16213e 0%, #0f3460 100%) !important;
}

/* Eliminar toda la sección brand del sidebar (logo + texto EMPIRIA) */
.sidebar-brand {
  display: none !important;
}

/* Nav items: contraste mejorado + letra más grande */
.module-nav-title {
  color: rgba(255,255,255,0.92) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.module-nav-item:not(.active) .module-nav-icon svg {
  color: rgba(255,255,255,0.75) !important;
}

.module-nav-caret {
  color: rgba(255,255,255,0.45) !important;
}

.submodule-label {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
}

.submodule-dot {
  background: rgba(255,255,255,0.35) !important;
}

/* Activo: acento índigo brillante sobre navy */
.module-nav-item.active {
  background: rgba(99,102,241,0.22) !important;
  border-color: rgba(129,140,248,0.40) !important;
}

.module-nav-item.active .module-nav-title {
  color: #c7d2fe !important;
}

.module-nav-item.active .module-nav-icon svg {
  color: #818cf8 !important;
}

/* User info en sidebar (si visible) */
.sb-user-details strong {
  color: #f1f5f9 !important;
}

.sb-user-role {
  color: rgba(255,255,255,0.55) !important;
}

/* Context card */
.sb-context-eyebrow {
  color: rgba(255,255,255,0.45) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#sbCompany, #sbContract, #sbMunicipality {
  color: rgba(255,255,255,0.90) !important;
}

.sb-context-label {
  color: rgba(255,255,255,0.50) !important;
  font-size: 11px !important;
}

/* ====================================================================
   TOPBAR v3 — logo + marca completa
   ==================================================================== */

/* Mostrar la marca (estaba explícitamente ocultada en el CSS base) */
.tb-brand-mark {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Logo: abarca las dos filas de texto de forma natural */
.tb-brand-img {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* Texto de marca: dos filas alineadas */
.tb-brand-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
  line-height: 1 !important;
}

.tb-brand-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.tb-brand-sub {
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  text-transform: none !important;
}

/* Separador visual entre marca y nombre del módulo */
.tb-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-right: 1px solid #e2e8f0 !important;
  padding-right: 22px !important;
  margin-right: 6px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

/* ====================================================================
   TOPBAR BREADCRUMB — solo nombre del módulo, nada más
   ==================================================================== */

/* Ocultar el breadcrumb de ruta (Inicio > Módulo > Sub) */
.tb-module-breadcrumb {
  display: none !important;
}

/* Ocultar "Módulo abierto" label (ya debería estar oculto, reforzamos) */
.tb-chip-lbl,
.tb-module-copy .tb-chip-lbl {
  display: none !important;
}

/* Nombre del módulo: más grande y con peso */
.tb-module-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

/* ===================================================================== */

/* ====================================================================
   PERSONNEL MODULE — pnl-* layout (KPIs → Controls → Body)
   ==================================================================== */

/* ── Cadena de altura para que pnl-shell llene exactamente el viewport ── */
/* Quitar el padding del main-panel cuando hay módulo de panel completo */
.main-panel:has(.pnl-shell) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}
.main-panel:has(.pnl-shell) > .summary-grid { display: none !important; }
.main-panel:has(.pnl-shell) > .workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.main-panel:has(.pnl-shell) .workspace-panel {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.main-panel:has(.pnl-shell) .submodule-content {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

/* Shell: columna que ocupa el espacio que le dan los padres vía flex */
.pnl-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 12px !important;
  padding: 16px 20px 12px !important;
  box-sizing: border-box !important;
}

/* 1. KPIs — fila de 5 tarjetas */
.pnl-kpis {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.pnl-kpi {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.pnl-kpi-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #6b7280 !important;
}

.pnl-kpi-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

.pnl-kpi-sub {
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* Variantes de color */
.pnl-kpi-main   .pnl-kpi-value { color: #0f172a !important; }
.pnl-kpi-success .pnl-kpi-value { color: #16a34a !important; }
.pnl-kpi-warning .pnl-kpi-value { color: #d97706 !important; }
.pnl-kpi-neutral .pnl-kpi-value { color: #6366f1 !important; }
.pnl-kpi-danger  .pnl-kpi-value { color: #dc2626 !important; }

.pnl-kpi-main   { border-top: 3px solid #0f172a !important; }
.pnl-kpi-success { border-top: 3px solid #16a34a !important; }
.pnl-kpi-warning { border-top: 3px solid #d97706 !important; }
.pnl-kpi-neutral { border-top: 3px solid #6366f1 !important; }
.pnl-kpi-danger  { border-top: 3px solid #dc2626 !important; }

/* 2. Controls — card con acciones + filtros */
.pnl-controls {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.pnl-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.pnl-count {
  margin-left: auto !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

/* Filtros: fila que ocupa todo el ancho */
.pnl-filters-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
}

.pnl-filters-row select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
  height: 32px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pnl-filters-row .personnel-clear-btn {
  flex: 0 0 auto !important;
  height: 32px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

/* Barra de búsqueda en la fila de acciones */
.pnl-search-input {
  flex: 1 1 180px !important;
  max-width: 280px !important;
  min-width: 140px !important;
  height: 34px !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
}

/* 3. Body — tabla + aside */
.pnl-body {
  display: flex !important;
  gap: 12px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.pnl-table-card {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.pnl-table-card .personnel-table-wrap,
.pnl-table-card .premium-table-wrap {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* ── Panel expediente: overlay de altura completa sobre todo el workspace ── */
.pnl-shell {
  position: relative !important;
}

.pnl-detail {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  width: 440px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(15,23,42,0.16) !important;
  transform: translateX(calc(100% + 20px)) !important;
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
}

.pnl-shell.detail-open .pnl-detail {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ====================================================================
   CV CARD — diseño hoja de vida
   ==================================================================== */

.cv-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Estado vacío */
.cv-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  gap: 12px !important;
  color: #94a3b8 !important;
  padding: 24px !important;
  text-align: center !important;
}
.cv-empty svg { opacity: 0.4 !important; }
.cv-empty p { font-size: 13px !important; }

/* Encabezado con foto — solo para la tarjeta lateral */
.cv-card .cv-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
  padding: 20px 20px 16px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.cv-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.8) !important;
  transition: background 0.15s !important;
}
.cv-close-btn:hover { background: rgba(255,255,255,0.22) !important; }

/* Foto circular */
.cv-photo-wrap {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  cursor: pointer !important;
  margin-bottom: 14px !important;
  border: 3px solid rgba(255,255,255,0.25) !important;
  flex-shrink: 0 !important;
}
.cv-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.cv-photo-initials {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
}
.cv-photo-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.52) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  opacity: 0 !important;
  transition: opacity 0.18s !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.cv-photo-wrap:hover .cv-photo-overlay { opacity: 1 !important; }

/* Textos del encabezado */
.cv-eyebrow {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.cv-name {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 3px !important;
}
.cv-role {
  font-size: 13px !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 0 2px !important;
}
.cv-doc {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 !important;
}

/* Chips de estado */
.cv-header-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 10px !important;
}
.cv-chip {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  letter-spacing: 0.04em !important;
}
.cv-status-active  { background: rgba(22,163,74,0.25) !important; color: #86efac !important; }
.cv-status-inactive { background: rgba(239,68,68,0.25) !important; color: #fca5a5 !important; }
.cv-status-other   { background: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.7) !important; }
.cv-chip-doc  { background: rgba(99,102,241,0.25) !important; color: #c7d2fe !important; }
.cv-chip-muted { background: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.55) !important; }

/* Botones de acción */
.cv-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
}
.cv-actions .btn-sm {
  font-size: 12px !important;
  padding: 6px 14px !important;
  height: auto !important;
}

/* Cuerpo scrollable */
.cv-body {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
}

/* Secciones */
.cv-section {
  padding: 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.cv-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #64748b !important;
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.cv-section-pct {
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Filas de datos */
.cv-rows { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.cv-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 12.5px !important;
}
.cv-row span { color: #6b7280 !important; flex-shrink: 0 !important; }
.cv-row strong { color: #0f172a !important; font-weight: 600 !important; text-align: right !important; }
.cv-ellipsis { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 200px !important; }

/* Barra de progreso documental */
.cv-progress-track {
  height: 6px !important;
  background: #e2e8f0 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}
.cv-progress-bar {
  display: block !important;
  height: 100% !important;
  border-radius: 99px !important;
  transition: width 0.4s ease !important;
}

/* Estadísticas de documentos */
.cv-doc-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  text-align: center !important;
}
.cv-doc-stats div {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  padding: 6px 4px !important;
}
.cv-doc-stats strong { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; }
.cv-doc-stats span { font-size: 10px !important; color: #94a3b8 !important; }

/* Tarjeta de novedad */
.cv-obs-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
.cv-obs-card strong { font-size: 12.5px !important; color: #0f172a !important; display: block !important; margin-bottom: 4px !important; }
.cv-obs-card p { font-size: 12px !important; color: #475569 !important; margin: 0 0 4px !important; }
.cv-obs-card small { font-size: 11px !important; color: #94a3b8 !important; }

/* Footer siempre visible */
.cv-footer {
  flex-shrink: 0 !important;
  padding: 14px 16px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}
.cv-footer .btn { width: 100% !important; }

/* Hide the outer card wrapper that previously wrapped everything */
.personnel-master-module.pnl-shell > .personnel-premium-card {
  display: contents !important;
}

/* Strip container padding so pnl-shell controls its own inset */
.submodule-content:has(.pnl-shell) {
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* pnl-shell fills via flex — height is provided by the parent chain */

/* Nombre clickeable en tabla de personal */
.personnel-name-link {
  cursor: pointer !important;
  color: #1e293b !important;
  transition: color 0.12s !important;
}
.personnel-name-link:hover {
  color: #4f46e5 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ====================================================================
   EXPORT MODAL — arreglar bleeding de reglas globales premium
   ==================================================================== */

/* Modal grande */
.xp-modal,
.modal-card.xp-modal {
  width: 80vw !important;
  max-width: 900px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Cuerpo — grid de 3 columnas, sin scroll */
.xp-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  align-content: start !important;
  padding: 14px 20px 10px !important;
}

/* Checkbox nativo con accent-color — sin spans personalizados */
.xp-check {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: #fff !important;
  accent-color: #1d4ed8 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Items del grid */
.xp-col-item {
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #374151 !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.xp-col-label {
  align-self: center !important;
  line-height: 1.3 !important;
}
.xp-col-item:hover { background: #f0f7ff !important; }
.xp-col-item:has(.xp-check:checked) { background: #eff6ff !important; }
.xp-col-item:has(.xp-check:checked) .xp-col-label { color: #1e40af !important; font-weight: 600 !important; }

/* Grid de 2 columnas dentro de cada grupo — override definitivo */
.xp-cols-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: #e2e8f0 !important;
  padding: 0 !important;
}

/* Fila de filtros ocupa los 3 columnas */
.xp-filter-row {
  grid-column: 1 / -1 !important;
}

/* Selects dentro del modal sin el padding grande del override global */
.xp-modal select,
.xp-select {
  padding: 7px 10px !important;
  font-size: 13px !important;
  height: auto !important;
}

/* Header fijo arriba */
.xp-header {
  flex-shrink: 0 !important;
}

/* Footer fijo abajo */
.xp-footer {
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   PNL — Employee detail side panel (redesign)
   ═══════════════════════════════════════════════════════════ */

.pnl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  gap: 12px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  padding: 32px 24px;
}
.pnl-empty-state svg { opacity: 0.35; }

.pnl-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* ── Header ── */
.pnl-head {
  position: relative;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  padding: 20px 16px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-shrink: 0;
}

.pnl-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.pnl-close-btn:hover { background: rgba(255,255,255,0.22); }

.pnl-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pnl-avatar-wrap .cv-photo-initials {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}
.pnl-avatar-wrap .cv-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pnl-avatar-wrap .cv-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.18s;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: 0.02em;
}
.pnl-avatar-wrap:hover .cv-photo-overlay { opacity: 1; }
.cv-photo-input { display: none; }

.pnl-head-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding-right: 28px;
}
.pnl-head-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-head-role {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-head-doc {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  margin-top: 1px;
}
.pnl-head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.pnl-chip {
  font-size: 10px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pnl-chip-green  { background: rgba(16,185,129,0.20); color: #6ee7b7; }
.pnl-chip-red    { background: rgba(239,68,68,0.22);  color: #fca5a5; }
.pnl-chip-yellow { background: rgba(245,158,11,0.22); color: #fde68a; }
.pnl-chip-gray   { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.65); }

/* ── Auto-computed status badge (licitación tab) ── */
.pnl-status-auto {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 6px 0;
}
.pnl-status-auto-badge {
  display: inline-flex; align-items: center;
  padding: 5px 16px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.pnl-status-auto-active   { background: #dcfce7; color: #15803d; }
.pnl-status-auto-inactive { background: #fee2e2; color: #dc2626; }
.pnl-status-auto-hint {
  font-size: 12px; color: #64748b; font-style: italic;
}

/* ── Action buttons ── */
.pnl-acts {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.pnl-act, .pnl-act-prime {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #374151;
  transition: background 0.15s, border-color 0.15s;
}
.pnl-act:hover { background: #f1f5f9; border-color: #cbd5e1; }
.pnl-act-prime {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.pnl-act-prime:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ── Tab bar ── */
.pnl-tabs {
  display: flex;
  gap: 3px;
  padding: 5px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.pnl-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 46px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: #64748b;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  padding: 4px 2px;
}
.pnl-tab:hover { background: rgba(255,255,255,0.6); color: #334155; }
.pnl-tab-active {
  background: #fff !important;
  color: #2563eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.pnl-tab-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pnl-tab-icon svg { width: 15px; height: 15px; }
.pnl-tab-lbl {
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* ── Body / sections ── */
.pnl-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
.pnl-section { display: none; }
.pnl-sec-active {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* ── Group divider label ── */
.pnl-group-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #94a3b8;
  padding: 8px 0 5px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}
.pnl-group-lbl::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ── Data rows ── */
.pnl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 0;
  border-bottom: 0.5px solid #e2e8f0;
  gap: 8px;
  box-sizing: border-box;
}
.pnl-row:last-child { border-bottom: none; }
.pnl-lbl {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  flex-shrink: 0;
  white-space: nowrap;
}
.pnl-val {
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
  text-align: right;
  min-width: 0;
}
.pnl-val.pnl-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── Docs tab ── */
.pnl-doc-summary {
  padding: 12px 16px 6px;
}
.pnl-doc-pct-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 6px;
}
.pnl-doc-pct-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.pnl-doc-pct-sub {
  font-size: 11px;
  color: #94a3b8;
}
.pnl-doc-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.pnl-doc-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 99px;
  transition: width 0.4s;
}
.pnl-doc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 16px;
}
.pnl-doc-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.pnl-doc-stat-n {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}
.pnl-doc-stat-l {
  font-size: 9.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.pnl-docs-link {
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px;
  padding: 9px;
  text-align: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #2563eb;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pnl-docs-link:hover { background: #dbeafe; }

/* ── Notas tab ── */
.pnl-obs {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.pnl-obs-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.pnl-obs-user {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}
.pnl-obs-date {
  font-size: 10.5px;
  color: #94a3b8;
}
.pnl-obs-text {
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}

.pnl-empty-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 8px;
  color: #94a3b8;
  font-size: 12.5px;
  text-align: center;
}
.pnl-empty-tab svg { opacity: 0.30; margin-bottom: 4px; }

/* =====================================================
   COBERTURA PAE — SCROLL SOLO EN TABLA (SIN SCROLL DE PÁGINA)
   ===================================================== */

/* El módulo ocupa exactamente el área disponible del main-panel */
.coverage-pro-module {
  height: calc(100dvh - var(--topbar-height) - 48px) !important;
  max-height: calc(100dvh - var(--topbar-height) - 48px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* La tarjeta se estira para llenar el módulo */
.coverage-pro-card {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* La sección detalle (barra + filtros + tabla) llena el resto de la tarjeta */
.coverage-pro-detail-full {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-top: 14px !important;
  width: 100% !important;
}

/* Solo la tabla tiene scroll; no la página */
.coverage-table-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  width: 100% !important;
}

/* Botón "Subir cobertura" — btn-row pisaba el azul de btn-primary */
#btnSubirCobertura {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.30) !important;
  font-weight: 700 !important;
}
#btnSubirCobertura:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.40) !important;
  transform: translateY(-1px);
}

/* =====================================================
   MÓDULO CONFIGURACIÓN — CLIENTES (TABLA JERÁRQUICA)
   ===================================================== */

/* Shell */
.cfg-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cfg-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cfg-header-left { display: flex; flex-direction: column; gap: 2px; }

.cfg-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
}
.cfg-subtitle { font-size: 12.5px; color: #64748b; }
.cfg-btn-new  { white-space: nowrap; font-size: 13px !important; padding: 10px 18px !important; }

/* Toolbar */
.cfg-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
}
.cfg-search-wrap { display: flex; align-items: center; gap: 8px; flex: 1; }
.cfg-search-icon  { flex-shrink: 0; width: 16px; height: 16px; }
.cfg-search-input {
  border: none; outline: none; background: transparent;
  font-size: 13px; color: #0f172a; width: 100%;
}
.cfg-search-input::placeholder { color: #94a3b8; }
.cfg-count-badge {
  font-size: 11.5px; font-weight: 700; color: #64748b;
  background: #f1f5f9; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}

/* ── Tabla jerárquica ── */
.cfg-tree-wrap {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  overflow: auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}

.cfg-tree-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 1100px;
}

/* Cabecera */
.cfg-tree-head th {
  padding: 11px 14px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  background: #1e293b;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.10);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cfg-tree-head th:last-child { border-right: none; text-align: center; }

/* Celdas base */
.cfg-tree-cell {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
  line-height: 1.4;
}

/* Colores alternados por empresa */
.cfg-row-even { background-color: #f8faff; }
.cfg-row-odd  { background-color: #fffdf5; }

/* Celdas de empresa (primer nivel) */
.cfg-cell-company {
  font-weight: 800;
  color: #0f172a;
  min-width: 180px;
  max-width: 220px;
  border-left: 4px solid #2563eb;
}
.cfg-row-odd .cfg-cell-company  { border-left-color: #d97706; }

.cfg-company-block { display: flex; flex-direction: column; gap: 2px; }
.cfg-company-name  { font-size: 13px; font-weight: 800; color: #0f172a; line-height: 1.3; }
.cfg-company-since { font-size: 10.5px; color: #94a3b8; }

.cfg-cell-nit { min-width: 110px; }
.cfg-cell-estado { min-width: 90px; text-align: center; }
.cfg-cell-actions { min-width: 130px; text-align: center; }

/* NITs */
.cfg-nit-val {
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
}
.cfg-nit-na {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* Columna sub-empresa */
.cfg-cell-sub     { min-width: 180px; }
.cfg-cell-nit-sub { min-width: 110px; }

.cfg-sub-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1.5;
}
.cfg-sub-company {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}
.cfg-sub-direct {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
  font-style: italic;
}

/* Columnas de contrato */
.cfg-cell-ct-name  { min-width: 220px; color: #1e293b; font-weight: 500; }
.cfg-cell-ct-estado { min-width: 80px; text-align: center; }
.cfg-cell-ct-code  { min-width: 130px; }
.cfg-cell-ct-emp   { min-width: 80px; text-align: center; }
.cfg-cell-empty    { color: #94a3b8; font-style: italic; font-size: 12px; }

.cfg-code {
  font-family: "Courier New", monospace;
  font-size: 11.5px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #334155;
  white-space: nowrap;
}

.cfg-emp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
}

/* Badges de estado */
.cfg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cfg-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.cfg-badge-active   { background: #dcfce7; color: #15803d; }
.cfg-badge-active::before  { background: #22c55e; }
.cfg-badge-inactive { background: #f1f5f9; color: #64748b; }
.cfg-badge-inactive::before { background: #94a3b8; }

/* Botones de acción */
.cfg-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.cfg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 110px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.13s, transform 0.1s;
  white-space: nowrap;
}
.cfg-action-btn:hover { transform: translateY(-1px); }

.cfg-action-edit {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.cfg-action-edit:hover { background: #dbeafe; }

.cfg-action-deactivate {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.cfg-action-deactivate:hover { background: #fee2e2; }

.cfg-action-activate {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}
.cfg-action-activate:hover { background: #dcfce7; }

/* Estados vacío / error / placeholder */
.cfg-empty {
  text-align: center; color: #94a3b8;
  padding: 40px 20px; font-size: 13px;
}
.cfg-error {
  background: #fef2f2; border: 1px solid #fca5a5;
  border-radius: 12px; padding: 16px 20px;
  color: #b91c1c; font-size: 13px;
}
.cfg-muted { color: #94a3b8; font-size: 12px; }
.cfg-placeholder { padding: 40px 24px; text-align: center; color: #64748b; font-size: 14px; }

/* Modal */
.cfg-modal-card { width: 100%; max-width: 440px; }

.cfg-field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: #374151;
}
.cfg-field span em { color: #dc2626; font-style: normal; }
.cfg-field input, .cfg-field select {
  height: 38px; border: 1px solid #dbe3ef; border-radius: 10px;
  padding: 0 12px; font-size: 13px; color: #0f172a; background: #fff;
  outline: none; transition: border-color 0.15s;
}
.cfg-field input:focus, .cfg-field select:focus { border-color: #2563eb; }
.cfg-field-row { flex-direction: row; align-items: center; justify-content: space-between; }
.cfg-field-row select { width: 160px; }

/* Periodo de ejecución columna */
.cfg-cell-ct-periodo { white-space: nowrap; }
.cfg-ct-period-start,
.cfg-ct-period-end { font-size: 11.5px; color: #374151; }
.cfg-ct-period-sep  { font-size: 11px; color: #94a3b8; }

/* Botón editar contrato inline */
.cfg-ct-name-text { display: inline; }
.cfg-ct-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
  vertical-align: middle;
}
.cfg-ct-edit-btn:hover { opacity: 1; background: #e2e8f0; }

/* Botón añadir contrato en ACCIONES */
.cfg-action-add-contract {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #bae6fd;
}
.cfg-action-add-contract:hover { background: #e0f2fe; }

/* ══════════════════════════════════════════════════════════════════════════════
   CONTRACT CONFIG PANEL  (ccp-*)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Cadena de altura: ccp-wrap llena exactamente el viewport ─────────────── */
/* Espeja el patrón :has(.pnl-shell) que ya funciona en el módulo de Personal */
.main-panel:has(.ccp-wrap) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  min-height: unset !important;
}
.main-panel:has(.ccp-wrap) > .summary-grid { display: none !important; }
.main-panel:has(.ccp-wrap) > .workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.main-panel:has(.ccp-wrap) .workspace-panel {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.main-panel:has(.ccp-wrap) .submodule-content {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
/* Eslabón final: submodule-content fija su propio alto para que ccp-wrap resuelva height:100% */
.submodule-content:has(.ccp-wrap) {
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.ccp-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;        /* usa flex en lugar de height:100% — más fiable en cadenas flex */
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: var(--bg, #f1f5f9);
  box-sizing: border-box;
}

/* ── Topbar ── */
.ccp-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid #e8edf5;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
.ccp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.ccp-back-btn:hover { background: #f8fafc; border-color: #94a3b8; color: #1e293b; }
.ccp-topbar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccp-topbar-label { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: .08em; text-transform: uppercase; }
.ccp-topbar-title { font-size: 17px; font-weight: 800; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccp-topbar-company { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tab bar — estilo "underline" coherente con el resto de la app ── */
.ccp-tabs {
  border-radius: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e8edf5 !important;
  border-top: none !important;
  padding: 0 20px !important;
  flex-shrink: 0 !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}
.ccp-tabs .pnl-tab {
  flex: none !important;
  min-width: unset !important;
  height: 50px !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 0 18px !important;
  font-size: 13px;
  border-radius: 0 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  transition: color 0.15s, border-color 0.15s, background 0.15s !important;
}
.ccp-tabs .pnl-tab:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}
.ccp-tabs .pnl-tab-active {
  background: transparent !important;
  color: #1e3a5f !important;
  border-bottom: 2.5px solid #1e3a5f !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.ccp-tabs .pnl-tab-lbl {
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
}
.ccp-tabs .pnl-tab-icon {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.7;
}
.ccp-tabs .pnl-tab-active .pnl-tab-icon { opacity: 1; }
.ccp-tabs .pnl-tab-icon svg { width: 15px !important; height: 15px !important; }

/* ── Tab content panels ── */
.ccp-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #f0f2f7;
}
.ccp-panel {
  display: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ccp-panel-active {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ccp-panel-inner {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: none;        /* sin límite de ancho — ocupa todo el workspace */
  box-sizing: border-box;
}

/* ── Card: contenedor de sección dentro del panel ── */
.ccp-card {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04);
  padding: 24px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ccp-panel-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 18px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  letter-spacing: -0.01em;
}

/* ── Save row ── */
.ccp-save-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: 20px;
}

/* ── Form grid ── */
.ccp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.ccp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}
.ccp-field em    { color: #dc2626; font-style: normal; }
.ccp-field small { font-weight: 400; color: #94a3b8; font-size: 11px; }
.ccp-field input, .ccp-field select {
  height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.ccp-field input:focus, .ccp-field select:focus { border-color: #2563eb; }
.ccp-disabled { background: #f1f5f9 !important; color: #94a3b8 !important; }

/* ── Salary config tab ── */
.ccp-sc-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: #64748b; margin-bottom: 10px; margin-top: 4px;
}

/* Modality cards */
.ccp-sc-mod-list { display: flex; flex-direction: column; gap: 8px; }
.ccp-sc-mod-card {
  border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
  background: #fff;
}
.ccp-sc-mod-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.ccp-sc-mod-badge {
  font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 8px;
  color: #fff; white-space: nowrap; flex-shrink: 0;
}
.ccp-sc-mod-badge--caares { background: #059669; }
.ccp-sc-mod-badge--caa    { background: #2563eb; }
.ccp-sc-mod-badge--ri     { background: #d97706; }
.ccp-sc-mod-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ccp-sc-mod-desc { font-size: 11.5px; color: #374151; line-height: 1.3; }
.ccp-sc-mod-jornada { font-size: 10.5px; color: #94a3b8; }
.ccp-sc-mod-salary-wrap { width: 160px; flex-shrink: 0; }
.ccp-sc-mod-salary-wrap input { width: 100%; }

/* Adicionales por modalidad */
.ccp-sc-mod-adics {
  padding: 8px 14px 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.ccp-sc-adic-row { display: flex; align-items: center; gap: 8px; }
.ccp-sc-adic-label {
  flex: 1; height: 34px; border: 1px solid #dbe3ef; border-radius: 7px;
  padding: 0 10px; font-size: 12.5px; outline: none; color: #0f172a;
  transition: border-color .15s; background: #fff;
}
.ccp-sc-adic-label:focus { border-color: #2563eb; }
.ccp-sc-adic-val-wrap { width: 140px; flex-shrink: 0; }
.ccp-sc-adic-val-wrap input { width: 100%; }
.ccp-sc-adic-del {
  width: 28px; height: 28px; border: none; background: #fee2e2; color: #dc2626;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s;
}
.ccp-sc-adic-del:hover { background: #fecaca; }
.ccp-sc-add-adic-btn {
  align-self: flex-start;
  border: 1.5px dashed #cbd5e1; border-radius: 7px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: #64748b;
  background: none; cursor: pointer; transition: border-color .12s, color .12s;
}
.ccp-sc-add-adic-btn:hover { border-color: #2563eb; color: #2563eb; }

.ccp-salary-cfg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.ccp-salary-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s;
}
.ccp-salary-input-wrap:focus-within { border-color: #2563eb; }
.ccp-salary-prefix {
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  height: 38px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ccp-salary-input-wrap input {
  border: none !important;
  border-radius: 0 !important;
  height: 38px;
  flex: 1;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  background: transparent;
}
.ccp-salary-ref {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  display: block;
}
.ccp-company-display {
  min-height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  background: #f8fafc;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}
.ccp-field-wide   { grid-column: 1 / -1; }
.ccp-field-inline { flex-direction: row; align-items: center; gap: 12px; }
.ccp-field-inline select { width: 160px; }

/* ── Position mode ── */
.ccp-pos-mode-wrap  { margin-bottom: 18px; }
.ccp-pos-mode-label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 10px; }
.ccp-pos-mode-opts  { display: flex; gap: 20px; flex-wrap: wrap; }
.ccp-radio-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #374151; cursor: pointer;
}
.ccp-radio-label input[type="radio"] { accent-color: #2563eb; }

/* ── Position cards ── */
.ccp-pos-empty { color: #94a3b8; font-size: 13px; padding: 12px 0; }
.ccp-pos-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.ccp-pos-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e9eef5;
}
.ccp-pos-name {
  flex: 1; min-width: 0; height: 34px;
  border: 1px solid #dbe3ef; border-radius: 8px;
  padding: 0 10px; font-size: 13px; font-weight: 600;
  color: #0f172a; background: #fff; outline: none;
}
.ccp-pos-name:focus { border-color: #2563eb; }
.ccp-pos-qty {
  width: 72px !important; flex-shrink: 0; height: 34px;
  border: 1px solid #dbe3ef; border-radius: 8px;
  padding: 0 8px; font-size: 13px; font-weight: 600;
  color: #0f172a; background: #fff; outline: none;
  text-align: center;
}
.ccp-pos-qty:focus { border-color: #2563eb; }
.ccp-pos-qty::placeholder { font-weight: 400; color: #94a3b8; font-size: 11.5px; }
.ccp-pos-type {
  width: 140px !important; flex-shrink: 0;
  height: 34px; border: 1px solid #dbe3ef; border-radius: 8px;
  padding: 0 10px; font-size: 12.5px; color: #374151; background: #fff; outline: none;
}
.ccp-pos-del {
  padding: 5px 8px; border: 1px solid #fca5a5; border-radius: 7px;
  background: #fef2f2; color: #dc2626; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
.ccp-pos-del:hover { background: #fee2e2; }

/* ── Position description (licitación only) ── */
.ccp-pos-desc-wrap {
  padding: 10px 14px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.ccp-pos-desc-label {
  display: block;
  font-size: 11.5px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.ccp-pos-desc {
  width: 100%; min-height: 72px;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: #0f172a;
  background: #fff; outline: none; resize: vertical;
  transition: border-color 0.15s;
  font-family: inherit; line-height: 1.45;
}
.ccp-pos-desc:focus { border-color: #2563eb; }
.ccp-pos-card[data-pos-type="real"] .ccp-pos-desc-wrap { display: none; }

/* ── Position documents ── */
.ccp-pos-docs { padding: 12px 14px; }
.ccp-docs-label { font-size: 11.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ccp-doc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ccp-doc-name {
  flex: 1; min-width: 0; height: 32px; border: 1px solid #e2e8f0; border-radius: 7px;
  padding: 0 10px; font-size: 12.5px; color: #0f172a; background: #fff; outline: none;
}
.ccp-doc-name:focus { border-color: #2563eb; }
.ccp-doc-req-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: #475569; white-space: nowrap; cursor: pointer;
}
.ccp-doc-req-label input { accent-color: #2563eb; }
.ccp-doc-del {
  padding: 4px 7px; border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f8fafc; color: #94a3b8; font-size: 11px; cursor: pointer;
}
.ccp-doc-del:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.ccp-add-doc-btn {
  margin-top: 6px; padding: 5px 12px;
  border: 1px dashed #94a3b8; border-radius: 7px;
  background: transparent; color: #64748b; font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.ccp-add-doc-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

/* ── Modules ── */
.ccp-modules-hint { font-size: 12.5px; color: #64748b; margin-bottom: 14px; }
.ccp-modules-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.ccp-module-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ccp-module-row:hover { border-color: #bfdbfe; background: #f0f9ff; }
.ccp-module-label { font-size: 13px; font-weight: 600; color: #0f172a; }

/* ── Toggle switch ── */
.ccp-toggle { position: relative; display: inline-flex; align-items: center; }
.ccp-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ccp-toggle-track {
  width: 40px; height: 22px; border-radius: 11px; background: #cbd5e1;
  transition: background 0.2s; display: flex; align-items: center; padding: 2px; cursor: pointer;
}
.ccp-toggle-on .ccp-toggle-track { background: #2563eb; }
.ccp-toggle-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transform: translateX(0); transition: transform 0.2s;
}
.ccp-toggle-on .ccp-toggle-thumb { transform: translateX(18px); }

/* ── Contract name clickable in table ── */
.cfg-ct-name-btn {
  background: none; border: none; padding: 0;
  font-size: inherit; color: #2563eb; font-weight: 600; cursor: pointer;
  text-align: left; text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color 0.15s, color 0.15s;
}
.cfg-ct-name-btn:hover { color: #1d4ed8; text-decoration-color: #1d4ed8; }


/* ── Personnel context & demo banners ─────────────────────────────────────── */
.personnel-demo-banner {
  margin-bottom: 14px;
  padding: 10px 16px;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 8px;
  font-size: 13px;
  color: #713f12;
}
.personnel-demo-banner strong { font-weight: 700; }

.personnel-ctx-banner {
  margin-bottom: 14px;
  padding: 10px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 13px;
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.personnel-ctx-item { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.personnel-ctx-lbl {
  font-weight: 500; color: #3b82f6;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
}
.personnel-ctx-sep { color: #93c5fd; font-size: 16px; }

/* ── Add-cargo modal: wide & tall ───────────────────────────────────────── */
.ccp-add-pos-modal {
  width: min(820px, 94vw) !important;
  max-width: none !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.ccp-add-pos-modal .modal-body {
  flex: 1;
  overflow-y: auto;
}

/* ── Positions table scroll container ───────────────────────────────────── */
.ccp-ptable-scroll {
  margin-top: 16px;
  max-height: calc(100vh - 340px);
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.ccp-ptable-scroll::-webkit-scrollbar { width: 6px; }
.ccp-ptable-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
.ccp-ptable-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Positions summary table ─────────────────────────────────────────────── */
.ccp-ptable {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.ccp-ptable thead tr {
  border-bottom: 2px solid #e2e8f0;
}
.ccp-ptable th {
  position: sticky; top: 0; z-index: 2;
  background: #f1f5f9;
  padding: 9px 12px; text-align: left;
  font-size: 11.5px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.ccp-ptable td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  color: #1e293b;
  text-align: justify;
  hyphens: auto;
}
.ccp-ptable tbody tr:last-child td { border-bottom: none; }
.ccp-ptable tbody tr:hover td { background: #f8fafc; }
.ccp-ptable-name { font-weight: 700; text-align: left; white-space: nowrap; }
.ccp-ptable-desc { color: #475569; font-size: 12.5px; line-height: 1.55; text-align: justify; }
.ccp-ptable-qty  { text-align: center; font-weight: 700; color: #0f172a; }
.ccp-ptable-type {
  display: inline-block; padding: 2px 10px;
  border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ccp-ptable-type-licitacion { background: #eff6ff; color: #1d4ed8; }
.ccp-ptable-type-real       { background: #f0fdf4; color: #15803d; }

/* ── Icon action buttons ── */
.ccp-ptable-actions { white-space: nowrap; text-align: center; vertical-align: middle; }
.ccp-ptbl-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid;
  cursor: pointer; margin-right: 4px;
  transition: background 0.14s, transform 0.1s;
}
.ccp-ptbl-btn:last-child { margin-right: 0; }
.ccp-ptbl-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ccp-ptbl-btn:active { transform: scale(0.93); }

/* Tooltip */
.ccp-ptbl-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: #1e293b; color: #f8fafc;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 4px 9px; border-radius: 6px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
}
.ccp-ptbl-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
}
.ccp-ptbl-btn:hover .ccp-ptbl-tip { opacity: 1; }

.ccp-ptbl-edit { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.ccp-ptbl-edit:hover { background: #dbeafe; }
.ccp-ptbl-docs { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ccp-ptbl-docs:hover { background: #dcfce7; }
.ccp-ptbl-qty  { background: #fdf4ff; color: #7c3aed; border-color: #e9d5ff; }
.ccp-ptbl-qty:hover  { background: #f3e8ff; }

/* ── Docs modal layout ── */
.ccp-docs-body {
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 24px;
}
.ccp-docs-section {
  display: flex; flex-direction: column; gap: 10px;
}
.ccp-docs-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #64748b;
  padding-bottom: 6px; border-bottom: 1px solid #e2e8f0;
}

/* ── Predefined catalog ── */
.ccp-catalog-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 260px; overflow-y: auto;
  padding-right: 4px;
}
.ccp-catalog-list::-webkit-scrollbar { width: 5px; }
.ccp-catalog-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.ccp-cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  transition: background 0.12s;
}
.ccp-cat-row-added { background: #f0fdf4; border-color: #bbf7d0; }
.ccp-cat-name {
  flex: 1; font-size: 12.5px; color: #1e293b; line-height: 1.4;
}
.ccp-cat-btn {
  flex-shrink: 0;
  padding: 4px 12px; border-radius: 6px;
  border: 1px solid #2563eb; background: #eff6ff; color: #2563eb;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background 0.12s;
}
.ccp-cat-btn:hover:not([disabled]) { background: #dbeafe; }
.ccp-cat-btn-added {
  border-color: #bbf7d0; background: #dcfce7; color: #15803d;
  cursor: default;
}

/* ── Current docs list ── */
.ccp-pdoc-list {
  display: flex; flex-direction: column; gap: 5px;
}
.ccp-pdoc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 7px;
}
.ccp-pdoc-name { flex: 1; font-size: 13px; color: #1e293b; }
.ccp-pdoc-req-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.ccp-pdoc-req { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.ccp-pdoc-req-yes { background: #fef9c3; color: #854d0e; }
.ccp-pdoc-req-no  { background: #f1f5f9; color: #64748b; }
.ccp-pdoc-del {
  padding: 3px 7px; border: 1px solid #fca5a5; border-radius: 5px;
  background: #fef2f2; color: #dc2626; font-size: 11px; cursor: pointer;
}
.ccp-pdoc-del:hover { background: #fee2e2; }

/* ── Custom add row ── */
.ccp-pdoc-custom-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.ccp-pdoc-custom-row input[type="text"] {
  flex: 1; min-width: 0;
  padding: 7px 10px; border: 1px solid #dbe3ef; border-radius: 8px;
  font-size: 13px; color: #1e293b;
}

/* ── Qty modal body ── */
.ccp-qty-body { padding: 20px 24px; }

/* ── Widget personalizer (ccpw-*) ─────────────────────────────────────────── */
.ccpw-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.ccpw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: default;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.ccpw-row-on {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.ccpw-dragging {
  opacity: 0.45;
  border-style: dashed;
}
.ccpw-over {
  border-color: #2563eb;
  background: #dbeafe;
}
.ccpw-drag {
  font-size: 16px; color: #94a3b8; cursor: grab;
  line-height: 1; flex-shrink: 0;
}
.ccpw-drag:active { cursor: grabbing; }
.ccpw-icon { font-size: 18px; flex-shrink: 0; }
.ccpw-label {
  flex: 1; font-size: 13.5px; font-weight: 600; color: #1e293b;
}

/* ── Field personalizer (ccpf-*) ─────────────────────────────────────────── */
.ccpf-module-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ccpf-list { display: flex; flex-direction: column; gap: 0; }
.ccpf-header {
  display: grid;
  grid-template-columns: 1fr 1fr 64px 80px;
  gap: 8px; align-items: center;
  padding: 6px 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px 6px 0 0;
  font-size: 11.5px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ccpf-row {
  display: grid;
  grid-template-columns: 1fr 1fr 64px 80px;
  gap: 8px; align-items: center;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-top: none;
  font-size: 13px;
  background: #fff;
  transition: background 0.1s;
}
.ccpf-row:last-child { border-radius: 0 0 6px 6px; }
.ccpf-row:hover { background: #f8fafc; }
.ccpf-row-base { background: #fafaf9; }
.ccpf-row-base .ccpf-campo { color: #6b7280; }
.ccpf-campo { font-size: 12.5px; color: #374151; }
.ccpf-etiqueta {
  width: 100%; padding: 4px 8px;
  border: 1px solid #e2e8f0; border-radius: 5px;
  font-size: 12.5px; color: #1e293b;
  background: transparent;
  transition: border-color 0.15s;
}
.ccpf-etiqueta:focus { border-color: #2563eb; outline: none; background: #fff; }
.ccpf-col-name  { grid-column: 1; }
.ccpf-col-label { grid-column: 2; }
.ccpf-col-vis   { grid-column: 3; text-align: center; }
.ccpf-col-req   { grid-column: 4; text-align: center; }

/* disabled toggle (base fields) */
.ccp-toggle-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

/* ── Dashboard layout: single-column variants ─────────────────────────────── */
.ck-main-grid.ck-grid-no-left  { grid-template-columns: 1fr; }
.ck-main-grid.ck-grid-no-right { grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════════════════════════
   NÓMINA PAE (nm2-*)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── List view ────────────────────────────────────────────────────────────── */
.nm2-list-hdr          { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.nm2-list-title        { font-size:1.4rem; font-weight:700; color:var(--text-primary,#1e293b); margin:0; }
.nm2-new-period-row    { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nm2-periods-list      { display:flex; flex-direction:column; gap:10px; }
.nm2-period-card       { display:flex; align-items:center; justify-content:space-between; gap:12px;
                         background:#fff; border:1px solid #e2e8f0; border-radius:10px;
                         padding:14px 18px; transition:box-shadow .15s; }
.nm2-period-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); }
.nm2-period-card-left  { display:flex; align-items:center; gap:10px; min-width:0; }
.nm2-period-label      { font-weight:600; color:#1e293b; }
.nm2-period-card-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nm2-period-stat       { font-size:.85rem; color:#64748b; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.nm2-badge             { display:inline-block; padding:2px 9px; border-radius:20px; font-size:.75rem; font-weight:600; }
.nm2-badge--draft      { background:#fef9c3; color:#854d0e; }
.nm2-badge--calculated { background:#dcfce7; color:#166534; }
.nm2-badge--closed     { background:#e0e7ff; color:#3730a3; }

.nm2-mod-badge         { display:inline-block; padding:2px 8px; border-radius:12px; font-size:.72rem; font-weight:700; letter-spacing:.3px; }
.nm2-mod-badge--caares { background:#ede9fe; color:#5b21b6; }
.nm2-mod-badge--caa    { background:#dbeafe; color:#1e40af; }
.nm2-mod-badge--ri     { background:#dcfce7; color:#166534; }

/* ── Detail header ────────────────────────────────────────────────────────── */
.nm2-detail-hdr        { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
                         gap:12px; margin-bottom:18px; }
.nm2-detail-hdr-center { display:flex; align-items:center; gap:10px; }
.nm2-period-title      { font-size:1.25rem; font-weight:700; color:#1e293b; margin:0; }
.nm2-detail-actions    { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.nm2-btn               { display:inline-flex; align-items:center; gap:5px; padding:7px 14px;
                         border-radius:8px; font-size:.85rem; font-weight:600; cursor:pointer;
                         border:none; text-decoration:none; transition:background .15s, opacity .15s; }
.nm2-btn--primary      { background:#2563eb; color:#fff; }
.nm2-btn--primary:hover { background:#1d4ed8; }
.nm2-btn--outline      { background:#fff; border:1.5px solid #94a3b8; color:#334155; }
.nm2-btn--outline:hover { border-color:#2563eb; color:#2563eb; }
.nm2-btn--danger       { background:#dc2626; color:#fff; }
.nm2-btn--danger:hover { background:#b91c1c; }
.nm2-btn--sm           { padding:5px 10px; font-size:.8rem; border:1.5px solid #e2e8f0;
                         background:#fff; color:#475569; border-radius:6px; cursor:pointer; }
.nm2-btn--sm:hover     { border-color:#2563eb; color:#2563eb; }
.nm2-btn-back          { background:none; border:none; color:#2563eb; font-size:.9rem; cursor:pointer;
                         display:flex; align-items:center; gap:4px; padding:0; font-weight:600; }
.nm2-btn-back:hover    { text-decoration:underline; }

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.nm2-filter-bar        { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.nm2-search            { flex:1; padding:8px 12px; border:1.5px solid #e2e8f0; border-radius:8px;
                         font-size:.9rem; outline:none; }
.nm2-search:focus      { border-color:#2563eb; }
.nm2-emp-count         { font-size:.83rem; color:#64748b; flex-shrink:0; }

/* ── Employee rows ────────────────────────────────────────────────────────── */
.nm2-emp-list          { display:flex; flex-direction:column; gap:6px; }
.nm2-emp-row           { background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; overflow:hidden;
                         transition:border-color .15s, box-shadow .15s; }
.nm2-emp-row--open     { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.nm2-emp-header        { display:flex; align-items:center; justify-content:space-between;
                         padding:11px 16px; gap:12px; cursor:default; }
.nm2-emp-info          { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.nm2-emp-name          { font-weight:600; color:#1e293b; font-size:.9rem;
                         white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.nm2-emp-doc           { font-size:.78rem; color:#64748b; white-space:nowrap; }
.nm2-emp-site          { font-size:.78rem; color:#94a3b8; white-space:nowrap;
                         overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.nm2-emp-meta          { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nm2-emp-neto          { font-weight:700; color:#166534; font-size:.9rem; white-space:nowrap; }
.nm2-emp-toggle        { background:none; border:none; cursor:pointer; font-size:.85rem;
                         color:#64748b; padding:2px 6px; border-radius:4px; }
.nm2-emp-toggle:hover  { background:#f1f5f9; }

/* ── Employee detail (expanded) ───────────────────────────────────────────── */
.nm2-emp-detail        { display:grid; grid-template-columns:1fr 280px; gap:20px;
                         padding:16px 18px 18px; border-top:1px solid #f1f5f9; background:#fafbff; }
@media(max-width:700px) { .nm2-emp-detail { grid-template-columns:1fr; } }

.nm2-emp-inputs        { display:flex; flex-direction:column; gap:14px; }
.nm2-input-group       { display:flex; flex-direction:column; gap:4px; }
.nm2-input-label       { font-size:.78rem; font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:.5px; }
.nm2-input-hint        { font-size:.72rem; color:#94a3b8; margin:2px 0 0; }
.nm2-num-row           { display:flex; align-items:center; gap:6px; }
.nm2-num-input         { width:72px; padding:6px 8px; border:1.5px solid #e2e8f0; border-radius:7px;
                         font-size:.9rem; text-align:center; outline:none; }
.nm2-num-input:focus   { border-color:#2563eb; }
.nm2-num-unit          { font-size:.83rem; color:#64748b; }

/* ── Novedades ────────────────────────────────────────────────────────────── */
.nm2-nov-list          { display:flex; flex-direction:column; gap:4px; }
.nm2-nov-empty         { font-size:.8rem; color:#94a3b8; margin:2px 0; }
.nm2-nov-item          { display:flex; align-items:center; gap:7px; padding:4px 0; }
.nm2-nov-tag           { padding:2px 7px; border-radius:12px; font-size:.7rem; font-weight:600; white-space:nowrap; }
.nm2-nov-tag--paid     { background:#dcfce7; color:#166534; }
.nm2-nov-tag--unpaid   { background:#fee2e2; color:#991b1b; }
.nm2-nov-label         { font-size:.83rem; color:#334155; flex:1; }
.nm2-nov-days          { font-size:.8rem; font-weight:600; color:#475569; }
.nm2-nov-del           { background:none; border:none; cursor:pointer; color:#ef4444; font-size:1rem;
                         padding:0 3px; border-radius:4px; }
.nm2-nov-del:hover     { background:#fee2e2; }
.nm2-nov-add-row       { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.nm2-select            { padding:6px 10px; border:1.5px solid #e2e8f0; border-radius:7px;
                         font-size:.84rem; outline:none; background:#fff; }
.nm2-select:focus      { border-color:#2563eb; }
.nm2-btn-add-nov       { padding:5px 10px; background:#2563eb; color:#fff; border:none;
                         border-radius:7px; font-size:.8rem; font-weight:600; cursor:pointer; }
.nm2-btn-add-nov:hover { background:#1d4ed8; }

/* ── Calculation result ───────────────────────────────────────────────────── */
.nm2-emp-result        { /* right column */ }
.nm2-calc              { background:#fff; border:1.5px solid #e2e8f0; border-radius:10px;
                         padding:12px 14px; font-size:.83rem; }
.nm2-calc-section      { margin-bottom:10px; }
.nm2-calc-title        { font-size:.75rem; font-weight:700; color:#64748b; text-transform:uppercase;
                         letter-spacing:.5px; margin-bottom:5px; }
.nm2-calc-row          { display:flex; justify-content:space-between; align-items:center;
                         padding:2px 0; color:#334155; }
.nm2-calc-sub          { border-top:1px solid #f1f5f9; margin-top:4px; padding-top:5px;
                         font-weight:600; color:#1e293b; }
.nm2-ded               { color:#dc2626; }
.nm2-neto              { display:flex; justify-content:space-between; align-items:center;
                         background:#1e293b; color:#fff; border-radius:8px; padding:9px 12px;
                         font-size:.9rem; margin-top:8px; }
.nm2-neto strong       { font-size:1.05rem; }

/* ── Totals bar ───────────────────────────────────────────────────────────── */
.nm2-totals            { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
                         margin-top:16px; padding:12px 18px; background:#f8fafc;
                         border:1.5px solid #e2e8f0; border-radius:10px; font-size:.88rem; }
.nm2-totals-neto       { margin-left:auto; font-size:1rem; color:#166534; }
.nm2-totals b          { color:#1e293b; }

/* ── Empty / misc ─────────────────────────────────────────────────────────── */
.nm2-empty             { text-align:center; color:#94a3b8; padding:40px 20px; font-size:.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   NM3 — Nómina v3 (tabla con scroll, novedades y acciones por fila)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell / layout ──────────────────────────────────────────────────────── */
.nm3-shell             { display:flex; flex-direction:column; height:100%; gap:0; }
.nm3-card              { display:flex; flex-direction:column; background:#fff;
                         border:1.5px solid #e2e8f0; border-radius:12px;
                         overflow:hidden; min-height:0; }
.nm3-card--full        { flex:1; min-height:0; }
.nm3-card-hdr          { display:flex; align-items:center; justify-content:space-between;
                         gap:10px; padding:16px 20px; border-bottom:1.5px solid #e2e8f0;
                         background:#f8fafc; flex-shrink:0; flex-wrap:wrap; }
.nm3-card-body         { flex:1; overflow:auto; padding:16px; }

/* ── Header bar ──────────────────────────────────────────────────────────── */
.nm3-hdr               { display:flex; align-items:center; gap:10px; padding:12px 18px;
                         border-bottom:1.5px solid #e2e8f0; background:#f8fafc;
                         flex-shrink:0; flex-wrap:wrap; }
.nm3-hdr-center        { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.nm3-hdr-actions       { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nm3-hdr-right         { display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; }
.nm3-back              { background:none; border:1.5px solid #cbd5e1; border-radius:8px;
                         padding:5px 10px; font-size:.82rem; cursor:pointer; color:#475569;
                         display:flex; align-items:center; gap:4px; white-space:nowrap; }
.nm3-back:hover        { background:#f1f5f9; border-color:#94a3b8; }
.nm3-period-title      { font-size:1rem; font-weight:700; color:#1e293b; white-space:nowrap;
                         overflow:hidden; text-overflow:ellipsis; }
.nm3-subtitle          { font-size:.78rem; color:#64748b; }
.nm3-title             { font-size:1.05rem; font-weight:700; color:#1e293b; }
.nm3-done-pill         { font-size:.78rem; font-weight:600; padding:3px 10px;
                         border-radius:20px; background:#dcfce7; color:#166534; white-space:nowrap; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.nm3-badge             { display:inline-flex; align-items:center; padding:3px 10px;
                         border-radius:12px; font-size:.72rem; font-weight:700;
                         letter-spacing:.3px; white-space:nowrap; }
.nm3-badge--draft      { background:#fef3c7; color:#92400e; }
.nm3-badge--calc       { background:#dbeafe; color:#1e40af; }
.nm3-badge--closed     { background:#dcfce7; color:#166534; }

/* ── Group tabs ──────────────────────────────────────────────────────────── */
.nm3-group-tabs        { display:flex; gap:6px; padding:10px 18px;
                         border-bottom:1.5px solid #e2e8f0; background:#f8fafc;
                         flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.nm3-group-tabs::-webkit-scrollbar { display:none; }
.nm3-gtab              { display:inline-flex; align-items:center; gap:7px; padding:6px 14px;
                         border:1.5px solid #e2e8f0; border-radius:20px; font-size:.78rem;
                         font-weight:600; cursor:pointer; background:#fff; color:#64748b;
                         white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
                         flex-shrink:0; }
.nm3-gtab:hover        { background:#f1f5f9; border-color:#94a3b8; color:#374151; }
.nm3-gtab--active      { background:#1e293b; border-color:#1e293b; color:#fff; }
.nm3-gtab-count        { font-size:.7rem; font-weight:700; padding:1px 7px;
                         border-radius:10px; background:#f1f5f9; color:#64748b; }
.nm3-gtab--active .nm3-gtab-count { background:rgba(255,255,255,.18); color:#e2e8f0; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.nm3-bar               { display:flex; align-items:center; gap:8px; padding:8px 18px;
                         border-bottom:1px solid #f1f5f9; background:#fff;
                         flex-shrink:0; flex-wrap:wrap; }
.nm3-search            { flex:1; min-width:120px; max-width:220px; padding:6px 10px;
                         border:1.5px solid #e2e8f0; border-radius:8px; font-size:.85rem;
                         outline:none; }
.nm3-search:focus      { border-color:#2563eb; }
.nm3-chk-lbl           { display:flex; align-items:center; gap:6px; font-size:.83rem;
                         color:#475569; cursor:pointer; user-select:none; }
.nm3-count             { margin-left:auto; font-size:.78rem; color:#94a3b8; white-space:nowrap; }
.nm3-fsel              { padding:5px 6px; border:1.5px solid #e2e8f0; border-radius:8px;
                         font-size:.78rem; outline:none; background:#fff; cursor:pointer;
                         color:#374151; min-width:0; max-width:130px; flex-shrink:1; }
.nm3-fsel:focus        { border-color:#2563eb; }
.nm3-fsel--sort        { max-width:110px; }
.nm3-sort-dir-btn      { padding:5px 9px; border:1.5px solid #e2e8f0; border-radius:8px;
                         font-size:.85rem; font-weight:700; cursor:pointer;
                         background:#fff; color:#374151; line-height:1; flex-shrink:0; }
.nm3-sort-dir-btn:hover{ background:#f1f5f9; border-color:#94a3b8; }

/* ── Scrollable table wrapper ────────────────────────────────────────────── */
.nm3-tbl-wrap          { flex:1; overflow:auto; min-height:0; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.nm3-tbl               { width:100%; border-collapse:collapse; font-size:.82rem; }
.nm3-tbl thead th      { position:sticky; top:0; z-index:2; background:#f8fafc;
                         padding:9px 10px; font-weight:700; font-size:.72rem; color:#64748b;
                         text-transform:uppercase; letter-spacing:.4px;
                         border-bottom:2px solid #e2e8f0; white-space:nowrap; }
.nm3-tbl tbody td      { padding:8px 10px; border-bottom:1px solid #f1f5f9;
                         vertical-align:middle; }
.nm3-tr:hover td       { background:#f8fafc; }
.nm3-row--done td      { opacity:.55; }
.nm3-row--done td .nm3-act-ok { opacity:1; }

/* Column widths / alignment */
.nm3-th-n, .nm3-td-n   { width:36px; text-align:center; color:#94a3b8; font-size:.78rem; }
.nm3-th-doc             { min-width:100px; }
.nm3-th-name            { min-width:150px; }
.nm3-th-inst            { min-width:130px; }
.nm3-th-mod             { min-width:90px; }
.nm3-th-nc              { width:80px; text-align:center; }
.nm3-th-nov             { width:100px; text-align:center; }
.nm3-th-dev, .nm3-th-ded, .nm3-th-neto { width:110px; text-align:right; }
.nm3-th-act             { width:100px; text-align:center; }
.nm3-ar                 { text-align:right !important; }
.nm3-td-nc              { text-align:center; }
.nm3-td-nov             { text-align:center; }
.nm3-td-dev, .nm3-td-neto { text-align:right; font-weight:600; }
.nm3-td-ded             { text-align:right; }
.nm3-td-act             { text-align:center; white-space:nowrap; }

/* Cell content helpers */
.nm3-doc-t             { font-size:.68rem; color:#94a3b8; font-weight:600; line-height:1;
                         text-transform:uppercase; letter-spacing:.3px; }
.nm3-doc-v             { font-weight:600; color:#334155; }
.nm3-inst              { font-weight:500; color:#1e293b; font-size:.83rem; line-height:1.2; }
.nm3-sede              { font-size:.72rem; color:#64748b; }
.nm3-green             { color:#15803d; font-weight:700; }
.nm3-red               { color:#dc2626; font-weight:600; }

/* ── Modality pills ──────────────────────────────────────────────────────── */
.nm3-mod               { display:inline-flex; align-items:center; padding:2px 8px;
                         border-radius:20px; font-size:.7rem; font-weight:700;
                         letter-spacing:.3px; white-space:nowrap; }
.nm3-mod--caa          { background:#dbeafe; color:#1e40af; }
.nm3-mod--caares       { background:#ede9fe; color:#5b21b6; }
.nm3-mod--ri           { background:#fce7f3; color:#9d174d; }

/* ── Novedad pill ────────────────────────────────────────────────────────── */
.nm3-nov-pill          { display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
                         border-radius:20px; font-size:.72rem; font-weight:700; cursor:pointer;
                         white-space:nowrap; }
.nm3-nov-pill--has     { background:#fee2e2; color:#991b1b; }
.nm3-nov-pill--none    { background:#f1f5f9; color:#94a3b8; }

/* ── No-clase input ──────────────────────────────────────────────────────── */
.nm3-nc-inp            { width:52px; padding:4px 6px; border:1.5px solid #e2e8f0;
                         border-radius:6px; font-size:.82rem; text-align:center; outline:none; }
.nm3-nc-inp:focus      { border-color:#2563eb; }
.nm3-nc-ro             { width:52px; text-align:center; font-weight:600; color:#334155; }

/* ── Deduction display ───────────────────────────────────────────────────── */
.nm3-ded-main          { font-weight:600; }
.nm3-ded-det           { font-size:.7rem; color:#94a3b8; margin-top:1px; }

/* ── Action buttons ──────────────────────────────────────────────────────── */
.nm3-act               { display:inline-flex; align-items:center; justify-content:center;
                         width:28px; height:28px; border:none; border-radius:7px;
                         cursor:pointer; font-size:.9rem; transition:background .15s; }
.nm3-act-nov           { background:#fee2e2; color:#dc2626; }
.nm3-act-nov:hover     { background:#fca5a5; }
.nm3-act-calc          { background:#dbeafe; color:#1e40af; }
.nm3-act-calc:hover    { background:#93c5fd; }
.nm3-act-ok            { background:#f1f5f9; color:#94a3b8; }
.nm3-act-ok:hover      { background:#dcfce7; color:#15803d; }
.nm3-act-ok--on        { background:#dcfce7 !important; color:#15803d !important; }

/* ── Footer totals ───────────────────────────────────────────────────────── */
.nm3-footer            { flex-shrink:0; border-top:2px solid #e2e8f0; background:#f8fafc; }
.nm3-totals            { display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.nm3-tot               { display:flex; flex-direction:column; align-items:center;
                         padding:10px 18px; border-right:1px solid #e2e8f0; min-width:100px; }
.nm3-tot:last-child    { border-right:none; margin-left:auto; }
.nm3-tot-lbl           { font-size:.68rem; color:#64748b; font-weight:600;
                         text-transform:uppercase; letter-spacing:.4px; }
.nm3-tot-ded           { font-size:1rem; font-weight:700; color:#dc2626; }
.nm3-tot-neto          { font-size:1rem; font-weight:700; color:#15803d; }
.nm3-tot-done          { font-size:1rem; font-weight:700; color:#1e293b; }
.nm3-tot span:not(.nm3-tot-lbl) { font-size:1rem; font-weight:700; color:#1e293b; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.nm3-btn               { display:inline-flex; align-items:center; gap:5px; padding:7px 14px;
                         border-radius:8px; font-size:.83rem; font-weight:600;
                         cursor:pointer; border:none; transition:background .15s; white-space:nowrap; }
.nm3-btn--primary      { background:#2563eb; color:#fff; }
.nm3-btn--primary:hover{ background:#1d4ed8; }
.nm3-btn--outline      { background:#fff; color:#374151; border:1.5px solid #d1d5db; }
.nm3-btn--outline:hover{ background:#f9fafb; }
.nm3-btn--danger       { background:#dc2626; color:#fff; }
.nm3-btn--danger:hover { background:#b91c1c; }
.nm3-btn--sm           { padding:4px 10px; font-size:.78rem; }
.nm3-sel               { padding:6px 10px; border:1.5px solid #e2e8f0; border-radius:8px;
                         font-size:.83rem; outline:none; background:#fff; cursor:pointer; }
.nm3-sel:focus         { border-color:#2563eb; }

/* ── Periods list table ──────────────────────────────────────────────────── */
.nm3-periods-tbl       { width:100%; border-collapse:collapse; font-size:.85rem; }
.nm3-periods-tbl thead th { position:sticky; top:0; background:#f8fafc;
                            padding:10px 14px; font-size:.72rem; font-weight:700;
                            color:#64748b; text-transform:uppercase; letter-spacing:.4px;
                            border-bottom:2px solid #e2e8f0; }
.nm3-periods-tbl tbody td { padding:10px 14px; border-bottom:1px solid #f1f5f9;
                             vertical-align:middle; }
.nm3-period-row:hover td  { background:#f8fafc; cursor:pointer; }
.nm3-period-name       { font-weight:600; color:#1e293b; }

/* ── Tags (novedades list) ───────────────────────────────────────────────── */
.nm3-tag               { display:inline-flex; align-items:center; padding:2px 8px;
                         border-radius:12px; font-size:.7rem; font-weight:600; white-space:nowrap; }
.nm3-tag--paid         { background:#dcfce7; color:#166534; }
.nm3-tag--unpaid       { background:#fee2e2; color:#991b1b; }

/* ── Modal overlay + box ─────────────────────────────────────────────────── */
.nm3-overlay           { display:none; }
.nm3-overlay:not([hidden]) { position:fixed; inset:0; background:rgba(15,23,42,.45);
                         display:flex; align-items:center; justify-content:center;
                         z-index:2000; animation:nm3FadeIn .18s ease; }
@keyframes nm3FadeIn   { from { opacity:0; } to { opacity:1; } }
.nm3-modal             { background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.18);
                         display:flex; flex-direction:column; max-height:90vh;
                         width:520px; animation:nm3SlideUp .2s ease; }
.nm3-modal--wide       { width:min(760px,96vw); }
@keyframes nm3SlideUp  { from { transform:translateY(24px); opacity:0; }
                         to   { transform:translateY(0);    opacity:1; } }
.nm3-modal-hdr         { display:flex; align-items:center; padding:16px 20px 14px;
                         border-bottom:1.5px solid #f1f5f9; flex-shrink:0; }
.nm3-modal-ttl         { font-size:1rem; font-weight:700; color:#1e293b; flex:1; }
.nm3-modal-x           { background:none; border:none; cursor:pointer; font-size:1.2rem;
                         color:#64748b; line-height:1; padding:2px 6px; border-radius:6px; }
.nm3-modal-x:hover     { background:#f1f5f9; color:#1e293b; }
.nm3-modal-body        { flex:1; overflow-y:auto; padding:16px 20px 20px; }

/* ── Novedad modal content ───────────────────────────────────────────────── */
.nm3-nov-wrap          { display:flex; flex-direction:column; gap:12px; }
.nm3-nov-form          { display:flex; flex-direction:column; gap:8px;
                         padding:12px; background:#f8fafc; border-radius:10px;
                         border:1.5px solid #e2e8f0; }
.nm3-nov-form-lbl      { font-size:.78rem; font-weight:700; color:#475569;
                         text-transform:uppercase; letter-spacing:.4px; }
.nm3-nov-form-row      { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nm3-nov-sel           { flex:1; min-width:140px; padding:6px 10px; border:1.5px solid #e2e8f0;
                         border-radius:7px; font-size:.83rem; outline:none; background:#fff; }
.nm3-nov-sel:focus     { border-color:#2563eb; }
.nm3-unit              { font-size:.8rem; color:#64748b; white-space:nowrap; }
.nm3-del-nov           { background:none; border:none; cursor:pointer; color:#ef4444;
                         font-size:.9rem; padding:2px 6px; border-radius:5px; }
.nm3-del-nov:hover     { background:#fee2e2; }

/* ── Calculation modal content ───────────────────────────────────────────── */
.nm3-calc-wrap         { display:flex; flex-direction:column; gap:0; }
.nm3-calc-info         { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px;
                         padding-bottom:12px; border-bottom:1px solid #f1f5f9; }
.nm3-ci                { display:flex; flex-direction:column; gap:2px; }
.nm3-ci span:first-child  { font-size:.7rem; color:#94a3b8; font-weight:600;
                            text-transform:uppercase; letter-spacing:.4px; }
.nm3-ci span:last-child   { font-size:.85rem; color:#1e293b; font-weight:600; }
.nm3-calc-sec          { margin-bottom:8px; }
.nm3-calc-sub          { font-size:.7rem; font-weight:700; color:#64748b;
                         text-transform:uppercase; letter-spacing:.4px;
                         padding:5px 0 3px; border-bottom:1px solid #f1f5f9; margin-bottom:4px; }
.nm3-tbl--calc         { width:100%; border-collapse:collapse; font-size:.82rem; margin-bottom:8px; }
.nm3-tbl--calc td      { padding:4px 6px; color:#334155; }
.nm3-tbl--calc td:last-child { text-align:right; font-weight:600; }
.nm3-tbl--modal        { font-size:.82rem; }
.nm3-calc-neto         { display:flex; justify-content:space-between; align-items:center;
                         background:#1e293b; color:#fff; border-radius:10px;
                         padding:12px 16px; font-size:.95rem; margin-top:10px; }
.nm3-calc-neto strong  { font-size:1.1rem; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.nm3-empty-td          { text-align:center; padding:48px 20px; }
.nm3-empty-state       { display:flex; flex-direction:column; align-items:center; gap:8px;
                         color:#94a3b8; }
.nm3-empty-icon        { font-size:2rem; }
.nm3-empty-hint        { font-size:.82rem; color:#cbd5e1; }

/* ── Workspace overrides for payroll (enable internal scroll) ────────────── */
.main-panel:has(.nm3-shell) > #workspace {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.main-panel:has(.nm3-shell) > #workspace > .submodule-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}
.nm3-shell             { flex: 1; min-height: 0; }

/* ── Hourly group columns ────────────────────────────────────────────────── */
.nm3-th-cargo, .nm3-td-cargo { min-width:120px; max-width:180px; white-space:normal; font-size:.78rem; }
.nm3-th-horas, .nm3-td-horas { width:100px; text-align:center; }
.nm3-th-vh,    .nm3-td-vh    { width:110px; text-align:right; white-space:nowrap; }
.nm3-vh-unit               { font-size:.7rem; color:#94a3b8; margin-left:2px; }

/* ── Horas pill ──────────────────────────────────────────────────────────── */
.nm3-horas-pill            { display:inline-flex; align-items:center; gap:4px; padding:2px 10px;
                             border-radius:20px; font-size:.72rem; font-weight:700; cursor:pointer;
                             border:none; white-space:nowrap; }
.nm3-horas-pill--has       { background:#d1fae5; color:#065f46; }
.nm3-horas-pill--none      { background:#f1f5f9; color:#94a3b8; }

/* ── Horas action button ─────────────────────────────────────────────────── */
.nm3-act-horas             { background:#ecfdf5; color:#059669; }
.nm3-act-horas:hover       { background:#a7f3d0; }

/* ── Turno pill ──────────────────────────────────────────────────────────── */
.nm3-turno-pill            { display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
                             border-radius:20px; font-size:.72rem; font-weight:700; cursor:pointer;
                             border:none; white-space:nowrap; background:none; }
.nm3-turno-pill--has       { background:#ede9fe; color:#5b21b6; }
.nm3-turno-pill--add       { background:#f1f5f9; color:#2563eb; border:1px dashed #93c5fd; }
.nm3-turno-pill--none      { background:#f1f5f9; color:#94a3b8; cursor:default; font-weight:400; }

/* ── Horas modal body ────────────────────────────────────────────────────── */
.nm3-horas-wrap            { display:flex; flex-direction:column; gap:14px; }
.nm3-horas-actions         { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:10px;
                             border-bottom:1px solid #f1f5f9; }
.nm3-horas-grid            { display:grid;
                             grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
                             gap:8px; }
.nm3-horas-day             { display:flex; flex-direction:column; align-items:center; gap:3px;
                             background:#f8fafc; border-radius:8px; padding:6px 4px; }
.nm3-horas-day--wknd       { background:#fef2f2; }
.nm3-horas-dow             { font-size:.65rem; font-weight:700; color:#94a3b8; text-transform:uppercase; }
.nm3-horas-date            { font-size:.78rem; font-weight:600; color:#334155; }
.nm3-horas-inp             { width:48px; text-align:center; border:1px solid #e2e8f0;
                             border-radius:6px; padding:3px 4px; font-size:.82rem;
                             background:#fff; outline:none; }
.nm3-horas-inp:focus       { border-color:#3b82f6; box-shadow:0 0 0 2px #bfdbfe; }
.nm3-horas-day--wknd .nm3-horas-inp { background:#fef2f2; border-color:#fca5a5; }
.nm3-horas-ro              { font-size:.8rem; color:#475569; font-weight:600; }
.nm3-horas-summary         { display:flex; gap:20px; flex-wrap:wrap; padding:10px 14px;
                             background:#f0fdf4; border-radius:10px; font-size:.85rem;
                             color:#374151; border:1px solid #bbf7d0; }

/* =========================
   DASHBOARD PREMIUM WORKSPACE
========================= */

.main-panel:has(.dashboard-workspace-premium) > #workspace {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-panel:has(.dashboard-workspace-premium) > #workspace > .submodule-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.submodule-content:has(.dashboard-workspace-premium) {
  height: 100%;
  min-height: 0;
}

.dashboard-workspace-premium {
  --db-bg: #F7FAFF;
  --db-card: #FFFFFF;
  --db-border: #E5EAF3;
  --db-shadow: 0 10px 28px rgba(11, 27, 58, 0.06);
  --db-radius: 18px;
  --db-blue: #0B7CFF;
  --db-navy: #071B4D;
  --db-green: #2ECF9A;
  --db-yellow: #F7C948;
  --db-red: #FF4D4F;
  --db-purple: #8B5CF6;
  --db-text: #0B1B3A;
  --db-muted: #64748B;
  --db-soft: #EEF5FF;
  --db-track: #EAF0F8;

  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 10px;
  background: var(--db-bg);
  display: grid;
  grid-template-rows: auto minmax(0, 0.88fr) minmax(0, 2fr) minmax(0, 1.12fr);
  gap: 12px;
  overflow: hidden;
  font-family: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--db-text);
}

.dashboard-workspace-premium * {
  box-sizing: border-box;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}

.dashboard-kpi-grid--bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-kpi-card,
.dashboard-card {
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
  min-width: 0;
}

.dashboard-kpi-card {
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  appearance: none;
}

.dashboard-kpi-card span,
.dashboard-card-head p {
  margin: 0;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-muted);
}

.dashboard-kpi-card strong {
  display: block;
  margin: 0;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--db-navy);
}

.dashboard-kpi-card small {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--db-muted);
}

.dashboard-kpi-card select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--db-border);
  background: #FBFDFF;
  color: var(--db-text);
  font-size: 13px;
  font-weight: 600;
  outline: none;
}

.dashboard-kpi-card select:focus {
  border-color: rgba(11, 124, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(11, 124, 255, 0.10);
}

button.dashboard-kpi-card {
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

button.dashboard-kpi-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 124, 255, 0.25);
}

button.dashboard-kpi-card:disabled {
  cursor: wait;
  opacity: 0.72;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.95fr) minmax(420px, 1.35fr) minmax(250px, 0.95fr);
  gap: 12px;
  min-height: 0;
  align-items: stretch;
}

.dashboard-column-stack {
  display: grid;
  gap: 12px;
  min-height: 0;
  align-content: stretch;
}

.dashboard-column-stack > .dashboard-card {
  min-height: 0;
}

.dashboard-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}

.dashboard-card-head h3 {
  margin: 3px 0 0;
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--db-navy);
}

.dashboard-card-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--db-soft);
  color: var(--db-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.dashboard-card-body {
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.dashboard-card-body--state,
.dashboard-card-body--distribution {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  height: 100%;
}

.dashboard-card-body--map {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(210px, 0.75fr);
  gap: 14px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.dashboard-gauge,
.dashboard-donut {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.dashboard-gauge svg,
.dashboard-map {
  display: block;
  width: 100%;
  height: 100%;
}

.dashboard-gauge-center,
.dashboard-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.dashboard-gauge-center strong,
.dashboard-donut-center strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--db-navy);
}

.dashboard-gauge-center span,
.dashboard-donut-center span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--db-muted);
}

.dashboard-donut {
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-donut::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 999px;
  background: var(--db-card);
  box-shadow: inset 0 0 0 1px #EEF3FA;
}

.dashboard-side-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  align-content: start;
}

.dashboard-side-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #EEF3FA;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
}

.dashboard-side-list-label,
.dashboard-side-list-copy {
  min-width: 0;
}

.dashboard-side-list-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--db-text);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-side-list-label > div {
  min-width: 0;
}

.dashboard-side-list-label strong,
.dashboard-side-list-copy strong {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--db-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-side-list-label small,
.dashboard-side-list-copy small,
.dashboard-side-list-value small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--db-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-side-list-value {
  flex: 0 0 auto;
  text-align: right;
}

.dashboard-side-list-value strong {
  display: block;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--db-navy);
}

.dashboard-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
}

.dashboard-date-pill {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--db-soft);
  color: var(--db-blue);
  text-align: center;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-side-list-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 2px;
  color: var(--db-muted);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.dashboard-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.dashboard-map {
  width: 100%;
  min-height: 0;
}

.dashboard-map text {
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
}

.dashboard-map-code,
.dashboard-map-pct {
  fill: var(--db-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.dashboard-map-name {
  fill: var(--db-text);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-bar-chart {
  display: grid;
  gap: 10px;
  min-height: 0;
  align-content: start;
}

.dashboard-bar-row {
  display: grid;
  gap: 6px;
}

.dashboard-bar-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.dashboard-bar-row-head span {
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--db-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-bar-row-head strong {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--db-muted);
}

.dashboard-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--db-track);
  overflow: hidden;
}

.dashboard-bar-fill {
  height: 100%;
  border-radius: inherit;
}

.dashboard-empty-state {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  color: var(--db-muted);
}

.dashboard-empty-state strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--db-navy);
}

.dashboard-empty-state p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--db-muted);
}

@media (max-width: 1280px) {
  .dashboard-workspace-premium {
    grid-template-rows: auto auto auto;
    overflow: auto;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-main-grid > .dashboard-card {
    grid-column: 1 / -1;
  }

  .dashboard-kpi-grid--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .main-panel:has(.dashboard-workspace-premium) > #workspace {
    overflow: auto;
  }

  .main-panel:has(.dashboard-workspace-premium) > #workspace > .submodule-content {
    overflow: visible;
    padding: 10px;
  }

  .dashboard-workspace-premium {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto;
    padding: 0;
    overflow: visible;
  }

  .dashboard-kpi-grid,
  .dashboard-main-grid,
  .dashboard-kpi-grid--bottom {
    grid-template-columns: 1fr;
  }

  .dashboard-card-body--state,
  .dashboard-card-body--distribution,
  .dashboard-card-body--map {
    grid-template-columns: 1fr;
    height: auto;
  }

  .dashboard-card {
    padding: 16px;
  }
}

/* Dashboard visual fix */
.dashboard-workspace-premium {
  grid-template-rows: auto minmax(0, 1.45fr) minmax(0, 0.95fr);
  gap: 14px;
  padding: 12px;
}

.dashboard-kpi-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 220px 170px;
  gap: 14px;
}

.dashboard-kpi-grid--bottom {
  min-height: 0;
}

.dashboard-kpi-grid--bottom > .dashboard-card,
.dashboard-main-grid > .dashboard-card,
.dashboard-column-stack > .dashboard-card {
  min-height: 0;
}

.dashboard-main-grid {
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.55fr) minmax(260px, 0.9fr);
  gap: 14px;
}

.dashboard-column-stack {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-kpi-card {
  padding: 15px 16px;
}

.dashboard-kpi-card strong {
  font-size: clamp(22px, 1.45vw, 30px);
}

.dashboard-kpi-card--action {
  background: linear-gradient(135deg, #0B7CFF 0%, #3295FF 100%);
  border-color: transparent;
  color: #FFFFFF;
}

.dashboard-kpi-card--action span,
.dashboard-kpi-card--action strong,
.dashboard-kpi-card--action small {
  color: #FFFFFF;
}

.dashboard-kpi-card--action strong {
  font-size: 24px;
}

.dashboard-card {
  padding: 18px;
  gap: 14px;
}

.dashboard-card-head h3 {
  font-size: clamp(18px, 1.1vw, 22px);
}

.dashboard-card-body--state,
.dashboard-card-body--distribution {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
}

.dashboard-card-body--map {
  grid-template-columns: minmax(0, 1fr) 265px;
  gap: 16px;
}

.dashboard-map-wrap,
.dashboard-side-panel {
  min-height: 0;
}

.dashboard-map-frame {
  height: 100%;
  min-height: 0;
  padding: 14px;
  border: 1px solid #EEF3FA;
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #FCFEFF 0%, #F6FAFF 100%);
}

.dashboard-map {
  width: 100%;
  height: 100%;
  min-height: 260px;
}

.dashboard-side-list--scroll {
  height: 100%;
  overflow: auto;
  padding-right: 4px;
}

.dashboard-side-list--scroll::-webkit-scrollbar {
  width: 8px;
}

.dashboard-side-list--scroll::-webkit-scrollbar-thumb {
  background: #D9E4F3;
  border-radius: 999px;
}

.dashboard-side-list-item {
  padding: 11px 12px;
}

.dashboard-card--coverage .dashboard-legend {
  margin-top: 0;
  padding-top: 2px;
}

.dashboard-card--coverage .dashboard-side-list-item,
.dashboard-card--birthdays .dashboard-side-list-item,
.dashboard-card--events .dashboard-side-list-item {
  background: #FFFFFF;
}

.dashboard-card--birthdays .dashboard-card-body,
.dashboard-card--events .dashboard-card-body,
.dashboard-kpi-grid--bottom .dashboard-card-body {
  overflow: hidden;
}

.dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-side-list,
.dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-bar-chart {
  height: 100%;
  overflow: auto;
  padding-right: 4px;
}

.dashboard-empty-state {
  min-height: 120px;
}

@media (max-width: 1280px) {
  .dashboard-workspace-premium {
    grid-template-rows: auto auto auto;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-column-stack {
    grid-template-rows: unset;
  }

  .dashboard-card-body--map {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}

@media (max-width: 900px) {
  .dashboard-workspace-premium {
    padding: 0;
  }

  .dashboard-column-stack {
    grid-template-rows: unset;
  }

  .dashboard-map {
    min-height: 220px;
  }

  .dashboard-side-list--scroll,
  .dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-side-list,
  .dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-bar-chart {
    overflow: visible;
    height: auto;
    padding-right: 0;
  }
}

/* Dashboard per-card scroll */
.dashboard-workspace-premium {
  overflow: hidden;
}

.dashboard-kpi-grid,
.dashboard-main-grid,
.dashboard-kpi-grid--bottom,
.dashboard-column-stack {
  min-height: 0;
}

.dashboard-kpi-card,
.dashboard-card {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.dashboard-kpi-card {
  overflow: auto;
  scrollbar-gutter: stable;
}

.dashboard-card-head,
.dashboard-legend {
  flex: 0 0 auto;
}

.dashboard-card-body {
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.dashboard-card-body::-webkit-scrollbar,
.dashboard-kpi-card::-webkit-scrollbar,
.dashboard-map-wrap::-webkit-scrollbar,
.dashboard-side-panel::-webkit-scrollbar,
.dashboard-card-body > .dashboard-side-list::-webkit-scrollbar,
.dashboard-card-body > .dashboard-bar-chart::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dashboard-card-body::-webkit-scrollbar-thumb,
.dashboard-kpi-card::-webkit-scrollbar-thumb,
.dashboard-map-wrap::-webkit-scrollbar-thumb,
.dashboard-side-panel::-webkit-scrollbar-thumb,
.dashboard-card-body > .dashboard-side-list::-webkit-scrollbar-thumb,
.dashboard-card-body > .dashboard-bar-chart::-webkit-scrollbar-thumb {
  background: #D9E4F3;
  border-radius: 999px;
}

.dashboard-card-body--state,
.dashboard-card-body--distribution,
.dashboard-card-body--map {
  overflow: hidden;
}

.dashboard-card-body--state .dashboard-side-list,
.dashboard-card-body--distribution .dashboard-side-list,
.dashboard-card--birthdays .dashboard-card-body > .dashboard-side-list,
.dashboard-card--events .dashboard-card-body > .dashboard-side-list,
.dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-side-list,
.dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-bar-chart {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.dashboard-map-wrap,
.dashboard-side-panel {
  height: 100%;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.dashboard-map-frame {
  min-height: 100%;
}

.dashboard-card--state,
.dashboard-card--gender,
.dashboard-card--birthdays,
.dashboard-card--events,
.dashboard-kpi-grid--bottom > .dashboard-card {
  max-height: 100%;
}

@media (max-width: 900px) {
  .dashboard-card-body,
  .dashboard-kpi-card,
  .dashboard-map-wrap,
  .dashboard-side-panel,
  .dashboard-card-body--state .dashboard-side-list,
  .dashboard-card-body--distribution .dashboard-side-list,
  .dashboard-card--birthdays .dashboard-card-body > .dashboard-side-list,
  .dashboard-card--events .dashboard-card-body > .dashboard-side-list,
  .dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-side-list,
  .dashboard-kpi-grid--bottom .dashboard-card-body > .dashboard-bar-chart {
    overflow: visible;
    height: auto;
    padding-right: 0;
  }
}

/* Dashboard viewport lock */
.main-panel:has(.dashboard-workspace-premium) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  min-height: 0 !important;
}

.main-panel:has(.dashboard-workspace-premium) > .workspace,
.main-panel:has(.dashboard-workspace-premium) > #workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

.main-panel:has(.dashboard-workspace-premium) .workspace-panel,
.main-panel:has(.dashboard-workspace-premium) > #workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.main-panel:has(.dashboard-workspace-premium) .submodule-content {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

.main-panel:has(.dashboard-workspace-premium) .workspace-title,
.main-panel:has(.dashboard-workspace-premium) .workspace-subtitle {
  display: none !important;
}

.submodule-content:has(.dashboard-workspace-premium) {
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.dashboard-workspace-premium {
  flex: 1 1 0 !important;
  width: 100% !important;
  height: calc(100dvh - var(--topbar-height, 72px) - 8px) !important;
  max-height: calc(100dvh - var(--topbar-height, 72px) - 8px) !important;
  min-height: 0 !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.dashboard-main-grid,
.dashboard-kpi-grid--bottom {
  align-items: stretch !important;
}

.dashboard-main-grid > .dashboard-card,
.dashboard-column-stack > .dashboard-card,
.dashboard-kpi-grid--bottom > .dashboard-card {
  height: 100% !important;
  max-height: 100% !important;
}

.dashboard-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.dashboard-card:not(.dashboard-card--coverage):not(.dashboard-card--state):not(.dashboard-card--gender) {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.dashboard-card-body {
  overflow: auto !important;
}

.dashboard-card-body--map {
  min-height: 0 !important;
}

.dashboard-map-wrap,
.dashboard-side-panel,
.dashboard-card-body > .dashboard-side-list,
.dashboard-card-body > .dashboard-bar-chart {
  min-height: 0 !important;
}

@media (max-width: 1280px) {
  .dashboard-workspace-premium {
    height: auto !important;
    max-height: none !important;
  }
}

/* Dashboard final fit */
.dashboard-workspace-premium {
  grid-template-rows: 102px minmax(0, 1.12fr) minmax(0, 0.82fr) !important;
  gap: 12px !important;
  padding: 12px !important;
}

.dashboard-kpi-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 210px 160px !important;
  gap: 12px !important;
  height: 100% !important;
}

.dashboard-kpi-card {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 6px !important;
}

.dashboard-kpi-card span,
.dashboard-card-head p {
  font-size: 10px !important;
}

.dashboard-kpi-card strong {
  font-size: clamp(19px, 1.2vw, 25px) !important;
}

.dashboard-kpi-card small {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.dashboard-kpi-card select {
  padding: 8px 10px !important;
  min-height: 36px !important;
  font-size: 12px !important;
}

.dashboard-kpi-card--action strong {
  font-size: 18px !important;
}

.dashboard-main-grid {
  grid-template-columns: minmax(248px, 0.9fr) minmax(0, 1.62fr) minmax(248px, 0.9fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.dashboard-kpi-grid--bottom {
  gap: 12px !important;
  overflow: hidden !important;
}

.dashboard-column-stack--left {
  grid-template-rows: minmax(0, 1.04fr) minmax(0, 0.96fr) !important;
}

.dashboard-column-stack--right {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.dashboard-card {
  padding: 14px !important;
  gap: 10px !important;
}

.dashboard-card-head {
  gap: 8px !important;
}

.dashboard-card-head h3 {
  font-size: clamp(16px, 1vw, 20px) !important;
  line-height: 1.05 !important;
}

.dashboard-card-pill {
  min-height: 28px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

.dashboard-card-body {
  padding-right: 2px !important;
}

.dashboard-card-body--state,
.dashboard-card-body--distribution {
  grid-template-columns: 126px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.dashboard-card-body--map {
  grid-template-columns: minmax(0, 1fr) 248px !important;
  gap: 12px !important;
}

.dashboard-gauge,
.dashboard-donut {
  width: 116px !important;
  height: 116px !important;
}

.dashboard-gauge-center strong,
.dashboard-donut-center strong {
  font-size: 21px !important;
}

.dashboard-gauge-center span,
.dashboard-donut-center span {
  margin-top: 4px !important;
  font-size: 11px !important;
}

.dashboard-map-frame {
  padding: 10px !important;
  border-radius: 14px !important;
}

.dashboard-map {
  min-height: 220px !important;
}

.dashboard-map-code,
.dashboard-map-pct {
  font-size: 11px !important;
}

.dashboard-map-name {
  font-size: 10px !important;
}

.dashboard-side-list {
  gap: 6px !important;
}

.dashboard-side-list-item {
  align-items: flex-start !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}

.dashboard-side-list-label {
  gap: 7px !important;
  font-size: 12px !important;
}

.dashboard-side-list-label strong,
.dashboard-side-list-copy strong,
.dashboard-side-list-value strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.dashboard-side-list-label small,
.dashboard-side-list-copy small,
.dashboard-side-list-value small {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.dashboard-side-list-copy strong,
.dashboard-side-list-label > div strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dashboard-side-list-copy small,
.dashboard-side-list-label > div small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
}

.dashboard-date-pill {
  min-width: 56px !important;
  padding: 7px 8px !important;
  font-size: 10px !important;
}

.dashboard-dot {
  width: 8px !important;
  height: 8px !important;
  flex-basis: 8px !important;
}

.dashboard-legend {
  gap: 8px 10px !important;
  font-size: 10px !important;
}

.dashboard-bar-chart {
  gap: 8px !important;
}

.dashboard-bar-row {
  gap: 4px !important;
}

.dashboard-bar-row-head span {
  font-size: 12px !important;
}

.dashboard-bar-row-head strong {
  font-size: 11px !important;
}

.dashboard-bar-track {
  height: 8px !important;
}

.dashboard-empty-state {
  min-height: 90px !important;
  padding: 12px !important;
}

.dashboard-empty-state strong {
  font-size: 14px !important;
}

.dashboard-empty-state p {
  font-size: 12px !important;
}

@media (max-width: 1280px) {
  .dashboard-workspace-premium {
    grid-template-rows: auto auto auto !important;
    padding: 10px !important;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-card-body--map {
    grid-template-columns: minmax(0, 1fr) 220px !important;
  }
}

/* Dashboard premium visual refinement */
.dashboard-workspace-premium {
  --db-bg: #f6f9fe;
  --db-card: rgba(255, 255, 255, 0.92);
  --db-border: rgba(148, 163, 184, 0.14);
  --db-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --db-shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --db-soft: #f2f7ff;
  --db-track: #edf2f8;
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.06), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%) !important;
}

.dashboard-kpi-card,
.dashboard-card {
  border: 1px solid var(--db-border) !important;
  box-shadow: var(--db-shadow) !important;
  backdrop-filter: saturate(1.04) blur(3px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dashboard-kpi-card:hover,
.dashboard-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 124, 255, 0.14) !important;
  box-shadow: var(--db-shadow-hover) !important;
}

.dashboard-kpi-grid {
  gap: 14px !important;
}

.dashboard-kpi-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 255, 0.94) 100%) !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
}

.dashboard-kpi-card span {
  color: #7b8aa5 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

.dashboard-kpi-card strong {
  color: #0a1a3f !important;
  font-size: clamp(20px, 1.35vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
}

.dashboard-kpi-card small {
  color: #7a879d !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.dashboard-kpi-card select {
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(248, 251, 255, 0.96) !important;
  color: #102145 !important;
  border-radius: 14px !important;
}

.dashboard-kpi-card--action {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 40%),
    linear-gradient(135deg, #0b7cff 0%, #177fff 54%, #2789ff 100%) !important;
  box-shadow: 0 16px 34px rgba(11, 124, 255, 0.18) !important;
}

.dashboard-kpi-card--action:hover {
  box-shadow: 0 20px 40px rgba(11, 124, 255, 0.24) !important;
}

.dashboard-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 255, 0.94) 100%) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  gap: 12px !important;
}

.dashboard-card-head {
  align-items: flex-start !important;
  margin-bottom: 2px;
}

.dashboard-card-head p {
  color: #8794aa !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

.dashboard-card-head h3 {
  color: #0b1b3a !important;
  margin-top: 5px !important;
  font-size: clamp(17px, 1vw, 20px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.04em !important;
}

.dashboard-card-pill {
  background: rgba(11, 124, 255, 0.08) !important;
  color: #0b68d3 !important;
  border: 1px solid rgba(11, 124, 255, 0.08);
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
}

.dashboard-card--coverage {
  background:
    radial-gradient(circle at top center, rgba(11, 124, 255, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.96) 100%) !important;
}

.dashboard-card--coverage .dashboard-card-head h3 {
  font-size: clamp(18px, 1.08vw, 22px) !important;
}

.dashboard-card-body--state,
.dashboard-card-body--distribution {
  gap: 16px !important;
}

.dashboard-card-body--map {
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 16px !important;
}

.dashboard-map-wrap {
  padding: 2px;
}

.dashboard-map-frame {
  padding: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.05), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
}

.dashboard-map {
  min-height: 236px !important;
}

.dashboard-map-code,
.dashboard-map-pct {
  fill: #0f2049 !important;
  font-weight: 800 !important;
}

.dashboard-map-name {
  fill: #65748d !important;
  font-weight: 700 !important;
}

.dashboard-side-panel {
  border-left: 1px solid rgba(148, 163, 184, 0.12);
  padding-left: 14px;
}

.dashboard-card--coverage .dashboard-side-list-item {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
}

.dashboard-gauge,
.dashboard-donut {
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.06));
}

.dashboard-gauge-center strong,
.dashboard-donut-center strong {
  color: #071b4d !important;
  font-size: 22px !important;
}

.dashboard-gauge-center span,
.dashboard-donut-center span {
  color: #8090a8 !important;
  font-size: 11px !important;
}

.dashboard-side-list {
  gap: 8px !important;
}

.dashboard-side-list-item {
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.09) !important;
  background: rgba(250, 252, 255, 0.84) !important;
  border-radius: 15px !important;
}

.dashboard-side-list-label {
  color: #122347 !important;
}

.dashboard-side-list-label strong,
.dashboard-side-list-copy strong {
  color: #102145 !important;
  font-weight: 700 !important;
}

.dashboard-side-list-label small,
.dashboard-side-list-copy small,
.dashboard-side-list-value small {
  color: #8290a7 !important;
}

.dashboard-side-list-value strong {
  color: #081a44 !important;
}

.dashboard-card--birthdays .dashboard-side-list-item,
.dashboard-card--events .dashboard-side-list-item {
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.86) 0%, rgba(243, 247, 253, 0.72) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.05);
}

.dashboard-date-pill {
  background: rgba(11, 124, 255, 0.08) !important;
  color: #0b68d3 !important;
  border-radius: 12px !important;
  min-width: 58px !important;
}

.dashboard-legend {
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  color: #8a97ad !important;
}

.dashboard-legend i {
  width: 7px !important;
  height: 7px !important;
}

.dashboard-bar-chart {
  gap: 10px !important;
}

.dashboard-bar-row {
  gap: 5px !important;
}

.dashboard-bar-row-head span {
  color: #15284f !important;
  font-weight: 700 !important;
}

.dashboard-bar-row-head strong {
  color: #8694ab !important;
  font-weight: 700 !important;
}

.dashboard-bar-track {
  height: 9px !important;
  background: #eef3f8 !important;
}

.dashboard-bar-fill {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.dashboard-empty-state {
  color: #8a97ad !important;
}

.dashboard-empty-state strong {
  color: #122347 !important;
}

.dashboard-card-body::-webkit-scrollbar,
.dashboard-kpi-card::-webkit-scrollbar,
.dashboard-map-wrap::-webkit-scrollbar,
.dashboard-side-panel::-webkit-scrollbar,
.dashboard-card-body > .dashboard-side-list::-webkit-scrollbar,
.dashboard-card-body > .dashboard-bar-chart::-webkit-scrollbar {
  width: 7px !important;
}

.dashboard-card-body::-webkit-scrollbar-thumb,
.dashboard-kpi-card::-webkit-scrollbar-thumb,
.dashboard-map-wrap::-webkit-scrollbar-thumb,
.dashboard-side-panel::-webkit-scrollbar-thumb,
.dashboard-card-body > .dashboard-side-list::-webkit-scrollbar-thumb,
.dashboard-card-body > .dashboard-bar-chart::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.36) !important;
}

@media (max-width: 1280px) {
  .dashboard-card,
  .dashboard-kpi-card {
    border-radius: 18px !important;
  }

  .dashboard-card-body--map {
    grid-template-columns: minmax(0, 1fr) 228px !important;
  }

  .dashboard-side-panel {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .dashboard-workspace-premium {
    background: linear-gradient(180deg, #f8fbff 0%, #f5f8fd 100%) !important;
  }

  .dashboard-kpi-grid,
  .dashboard-main-grid,
  .dashboard-kpi-grid--bottom {
    gap: 10px !important;
  }

  .dashboard-kpi-card,
  .dashboard-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .dashboard-card-body--map {
    grid-template-columns: 1fr !important;
  }

  .dashboard-map-frame {
    padding: 12px !important;
  }

  .dashboard-map {
    min-height: 220px !important;
  }
}

/* Legacy dashboard visual upgrade */
.main-panel:has(.db2-wrap) {
  background: linear-gradient(180deg, #f7faff 0%, #f3f7fc 100%) !important;
}

.personnel-premium-module:has(.db2-wrap) {
  padding: 0 !important;
  background: transparent !important;
}

.personnel-premium-card:has(.db2-wrap) {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.db2-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 8px 2px 18px !important;
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.05), transparent 26%),
    linear-gradient(180deg, #f7fbff 0%, #f4f8fd 100%) !important;
}

.db2-wrap .personnel-premium-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 6px 4px 0 !important;
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
}

.db2-wrap .personnel-premium-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(11, 124, 255, 0.08) !important;
  color: #0b68d3 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.db2-wrap .personnel-premium-hero h2 {
  margin: 0 0 6px !important;
  color: #0b1b3a !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
}

.db2-wrap .personnel-premium-hero p {
  margin: 0 !important;
  max-width: 620px !important;
  color: #73829b !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#db2-btn-refresh {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(11, 124, 255, 0.12) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
  color: #0b68d3 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

#db2-btn-refresh:hover {
  border-color: rgba(11, 124, 255, 0.22) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}

.db2-mun-filter {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 4px 2px 2px !important;
}

.db2-mun-filter-label {
  color: #8b99ae !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.db2-mun-chip {
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #516178 !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03) !important;
}

.db2-mun-chip:hover {
  background: rgba(246, 250, 255, 0.98) !important;
  color: #0f2049 !important;
  border-color: rgba(11, 124, 255, 0.16) !important;
}

.db2-mun-chip-active {
  background: rgba(11, 124, 255, 0.10) !important;
  color: #0b68d3 !important;
  border-color: rgba(11, 124, 255, 0.16) !important;
}

.db2-kpi-row,
.db2-kpi-row-2,
.db2-kpi-row-4,
.db2-charts-3col {
  gap: 16px !important;
}

.db2-kpi-card,
.db2-chart-card {
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,252,255,.94) 100%) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03) !important;
}

.db2-kpi-card {
  position: relative !important;
  min-height: 132px !important;
  padding: 18px 18px 16px !important;
  overflow: hidden !important;
}

.db2-kpi-card::before {
  left: 18px !important;
  right: auto !important;
  top: 14px !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 999px !important;
  opacity: 0.9 !important;
}

.db2-kpi-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -20px -35px auto !important;
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(11, 124, 255, 0.07), transparent 68%) !important;
  pointer-events: none !important;
}

.db2-kpi-label {
  margin-top: 10px !important;
  color: #8b99ae !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.db2-kpi-value {
  margin-top: 8px !important;
  color: #0b1b3a !important;
  font-size: clamp(26px, 2vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.02 !important;
}

.db2-kpi-sub {
  margin-top: 6px !important;
  color: #8190a7 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

.db2-kpi-prog {
  margin-top: 12px !important;
  height: 6px !important;
  background: #edf2f8 !important;
  border-radius: 999px !important;
}

.db2-kpi-prog-bar {
  border-radius: 999px !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18) !important;
}

.db2-charts-3col {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.25fr) !important;
  align-items: stretch !important;
}

.db2-chart-card {
  padding: 18px !important;
}

.db2-card-header {
  color: #102145 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
}

.db2-donut-wrap {
  height: 260px !important;
  padding: 4px 0 0 !important;
}

.db2-donut-center-val {
  color: #071b4d !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
}

.db2-donut-center-lbl {
  color: #8a97ad !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.db2-donut-legend {
  gap: 10px !important;
  margin-top: 6px !important;
}

.db2-donut-legend-item {
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(248, 251, 255, 0.78) !important;
  font-size: 12px !important;
  color: #54647b !important;
}

.db2-donut-legend-val {
  color: #0f2049 !important;
  font-weight: 700 !important;
}

.db2-chart-area {
  height: 320px !important;
  padding: 12px 10px 6px 6px !important;
}

.db2-refresh-note {
  margin-top: 2px !important;
  padding: 0 4px !important;
  color: #8b99ae !important;
  font-size: 11px !important;
}

@media (max-width: 1280px) {
  .db2-charts-3col {
    grid-template-columns: 1fr 1fr !important;
  }

  .db2-charts-3col .db2-chart-card:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  .db2-wrap {
    gap: 14px !important;
    padding: 4px 0 14px !important;
  }

  .db2-wrap .personnel-premium-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .db2-kpi-card,
  .db2-chart-card {
    border-radius: 18px !important;
  }

  .db2-kpi-row,
  .db2-kpi-row-2,
  .db2-kpi-row-4,
  .db2-charts-3col {
    grid-template-columns: 1fr !important;
  }

  .db2-donut-wrap,
  .db2-chart-area {
    height: 280px !important;
  }
}

/* Dashboard modular active override */
.submodule-content .dashboard-workspace-premium {
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.05), transparent 24%),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.04), transparent 20%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%) !important;
  gap: 18px !important;
  padding: 18px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-grid,
.submodule-content .dashboard-workspace-premium .dashboard-main-grid,
.submodule-content .dashboard-workspace-premium .dashboard-kpi-grid--bottom,
.submodule-content .dashboard-workspace-premium .dashboard-column-stack {
  gap: 18px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card,
.submodule-content .dashboard-workspace-premium .dashboard-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(226, 232, 240, 0.78) !important;
  border-radius: 24px !important;
  box-shadow:
    0 14px 40px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card {
  padding: 18px 20px !important;
  min-height: 134px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card span {
  color: #8a97ad !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card strong {
  color: #081a44 !important;
  font-size: clamp(24px, 1.5vw, 32px) !important;
  letter-spacing: -0.05em !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card small {
  color: #7b8aa2 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card select {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  background: #fbfdff !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card--action {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 44%),
    linear-gradient(135deg, #0b7cff 0%, #2588ff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 38px rgba(11, 124, 255, 0.20) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-card--action span,
.submodule-content .dashboard-workspace-premium .dashboard-kpi-card--action strong,
.submodule-content .dashboard-workspace-premium .dashboard-kpi-card--action small {
  color: #ffffff !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card {
  padding: 20px !important;
  gap: 16px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card-head p {
  color: #90a0b6 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card-head h3 {
  color: #0b1b3a !important;
  font-size: clamp(18px, 1.08vw, 22px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.04em !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card-pill {
  background: rgba(11, 124, 255, 0.08) !important;
  color: #0b68d3 !important;
  border: 1px solid rgba(11, 124, 255, 0.08) !important;
  border-radius: 999px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card--coverage {
  background:
    radial-gradient(circle at top center, rgba(11, 124, 255, 0.05), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.95) 100%) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card-body--map {
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 18px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-map-frame {
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.04), transparent 28%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-map {
  min-height: 280px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-side-panel {
  border-left: 1px solid rgba(226, 232, 240, 0.92) !important;
  padding-left: 16px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-gauge,
.submodule-content .dashboard-workspace-premium .dashboard-donut {
  width: 138px !important;
  height: 138px !important;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.06)) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-gauge-center strong,
.submodule-content .dashboard-workspace-premium .dashboard-donut-center strong {
  font-size: 26px !important;
  color: #071b4d !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-gauge-center span,
.submodule-content .dashboard-workspace-premium .dashboard-donut-center span {
  color: #8391a8 !important;
  font-size: 11px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-side-list {
  gap: 10px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-side-list-item {
  padding: 12px 13px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.72) !important;
  background: rgba(250, 252, 255, 0.88) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-side-list-label strong,
.submodule-content .dashboard-workspace-premium .dashboard-side-list-copy strong,
.submodule-content .dashboard-workspace-premium .dashboard-side-list-value strong {
  color: #102145 !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-side-list-label small,
.submodule-content .dashboard-workspace-premium .dashboard-side-list-copy small,
.submodule-content .dashboard-workspace-premium .dashboard-side-list-value small {
  color: #8795ac !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card--birthdays .dashboard-side-list-item,
.submodule-content .dashboard-workspace-premium .dashboard-card--events .dashboard-side-list-item {
  border: none !important;
  background: linear-gradient(180deg, rgba(248,251,255,.86) 0%, rgba(244,248,253,.72) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.6) !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-date-pill {
  background: rgba(11, 124, 255, 0.08) !important;
  color: #0b68d3 !important;
  border-radius: 12px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-legend {
  margin-top: 4px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.88) !important;
  color: #8a97ad !important;
  font-size: 11px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-bar-chart {
  gap: 12px !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-bar-row-head span {
  color: #16284f !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-bar-row-head strong {
  color: #8795ac !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-bar-track {
  height: 10px !important;
  background: #eef3f8 !important;
}

@media (max-width: 1280px) {
  .submodule-content .dashboard-workspace-premium .dashboard-card-body--map {
    grid-template-columns: minmax(0, 1fr) 236px !important;
  }
}

@media (max-width: 900px) {
  .submodule-content .dashboard-workspace-premium {
    padding: 12px !important;
    gap: 12px !important;
  }

  .submodule-content .dashboard-workspace-premium .dashboard-kpi-grid,
  .submodule-content .dashboard-workspace-premium .dashboard-main-grid,
  .submodule-content .dashboard-workspace-premium .dashboard-kpi-grid--bottom {
    gap: 12px !important;
  }

  .submodule-content .dashboard-workspace-premium .dashboard-kpi-card,
  .submodule-content .dashboard-workspace-premium .dashboard-card {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  .submodule-content .dashboard-workspace-premium .dashboard-card-body--map {
    grid-template-columns: 1fr !important;
  }

  .submodule-content .dashboard-workspace-premium .dashboard-side-panel {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* Dashboard stability override */
.main-panel:has(.dashboard-workspace-premium),
.main-panel:has(.dashboard-workspace-premium) > .workspace,
.main-panel:has(.dashboard-workspace-premium) > #workspace,
.main-panel:has(.dashboard-workspace-premium) .workspace-panel,
.main-panel:has(.dashboard-workspace-premium) .submodule-content,
.submodule-content:has(.dashboard-workspace-premium) {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

.submodule-content .dashboard-workspace-premium {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-kpi-grid,
.submodule-content .dashboard-workspace-premium .dashboard-main-grid,
.submodule-content .dashboard-workspace-premium .dashboard-kpi-grid--bottom {
  align-items: start !important;
  height: auto !important;
  min-height: 0 !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-column-stack {
  grid-template-rows: auto auto !important;
  align-content: start !important;
  height: auto !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-main-grid > .dashboard-card,
.submodule-content .dashboard-workspace-premium .dashboard-column-stack > .dashboard-card,
.submodule-content .dashboard-workspace-premium .dashboard-kpi-grid--bottom > .dashboard-card,
.submodule-content .dashboard-workspace-premium .dashboard-kpi-card {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  overflow: visible !important;
}

.submodule-content .dashboard-workspace-premium .dashboard-card-body,
.submodule-content .dashboard-workspace-premium .dashboard-map-wrap,
.submodule-content .dashboard-workspace-premium .dashboard-side-panel,
.submodule-content .dashboard-workspace-premium .dashboard-side-list--scroll,
.submodule-content .dashboard-workspace-premium .dashboard-card-body > .dashboard-side-list,
.submodule-content .dashboard-workspace-premium .dashboard-card-body > .dashboard-bar-chart {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 1280px) {
  .submodule-content .dashboard-workspace-premium .dashboard-main-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .submodule-content .dashboard-workspace-premium .dashboard-main-grid > .dashboard-card--coverage {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  .submodule-content .dashboard-workspace-premium .dashboard-kpi-grid,
  .submodule-content .dashboard-workspace-premium .dashboard-main-grid,
  .submodule-content .dashboard-workspace-premium .dashboard-kpi-grid--bottom,
  .submodule-content .dashboard-workspace-premium .dashboard-column-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}

/* Dashboard final reset */
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 16px !important;
  padding: 16px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at top left, rgba(11, 124, 255, 0.04), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%) !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  height: auto !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-main-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.45fr) minmax(280px, 0.95fr) !important;
  gap: 16px !important;
  align-items: start !important;
  height: auto !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-grid--bottom {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  height: auto !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-column-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
  align-content: start !important;
  height: auto !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-card,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226, 232, 240, 0.86) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05), 0 2px 5px rgba(15, 23, 42, 0.03) !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-card {
  padding: 18px !important;
  min-height: 126px !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  padding: 18px !important;
  gap: 14px !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-map-wrap,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-side-panel,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body > .dashboard-side-list,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body > .dashboard-bar-chart {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body--state,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body--distribution {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body--map {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
  gap: 16px !important;
  align-items: start !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-map-frame {
  min-height: 280px !important;
  padding: 16px !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-map {
  min-height: 248px !important;
  height: auto !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-side-panel {
  border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
  padding-left: 14px !important;
}

.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-gauge,
.submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-donut {
  width: 132px !important;
  height: 132px !important;
}

@media (max-width: 1280px) {
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-main-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-main-grid > .dashboard-card--coverage {
    grid-column: 1 / -1 !important;
  }

  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-grid--bottom {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 900px) {
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final {
    padding: 12px !important;
    gap: 12px !important;
  }

  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-grid,
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-main-grid,
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-kpi-grid--bottom,
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-column-stack {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }

  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body--state,
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body--distribution,
  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-card-body--map {
    grid-template-columns: 1fr !important;
  }

  .submodule-content .dashboard-workspace-premium.dashboard-workspace-premium--final .dashboard-side-panel {
    border-left: none !important;
    padding-left: 0 !important;
  }
}