/*
  KAMILA HRM — v5.0 Golden Hour
  Light, warm corporate. Precision with hospitality.
  Gold accents. Crisp typography. Generous whitespace.
  Polished and professional, not cold.
*/

/* ═══════════════════════════════════════════════════════════════
   1. FONTS — Outfit display + Plus Jakarta Sans body
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@350;400;450;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   2. DESIGN TOKENS — "Warm Corporate" light theme
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Colors ── */
  --color-void: #1C1917;
  --color-graphite: #1C1E26;
  --color-charcoal: #F5F1EC;
  --color-smoke: #9B948A;
  --color-steel: #78716C;
  --color-fog: #9B948A;
  --color-ash: #B8B0A6;
  --color-chalk: #5C554D;
  --color-snow: #FFFFFF;
  --color-bone: #FAF8F5;
  --color-ink: #1C1917;
  --color-signal-blue: #C2902F;
  --color-arc-blue: #D4A843;
  --color-ring-blue: #E8D5A3;
  --color-mint: #6B9080;
  --color-fern: #527A6A;
  --color-coral: #B5443C;
  --color-ember: #C46A4A;
  --color-iris: #A67B23;

  /* ── Surfaces (elevation levels) ── */
  --surface-page: #FAF8F5;
  --surface-card: #FFFFFF;
  --surface-elevated: #F5F1EC;
  --surface-input: #FFFFFF;
  --surface-sidebar: #1C1E26;
  --surface-sidebar-elevated: #262A36;
  --surface-hover: rgba(28,25,23,0.04);
  --surface-hover-sidebar: rgba(255,255,255,0.05);
  --surface-active: rgba(194,144,47,0.10);
  --surface-active-sidebar: rgba(194,144,47,0.15);
  --surface-modal: #FFFFFF;
  --surface-tooltip: #1C1917;

  /* ── Text ── */
  --text-primary: #1C1917;
  --text-secondary: #5C554D;
  --text-muted: #9B948A;
  --text-placeholder: #B8B0A6;
  --text-inverse: #FFFFFF;
  --text-sidebar: #B8B0A6;
  --text-sidebar-heading: #9B948A;
  --text-sidebar-active: #FFFFFF;
  --text-brand: var(--color-signal-blue);

  /* ── Borders ── */
  --border-default: #E8E3DB;
  --border-light: #F0ECE6;
  --border-strong: #D4CEC4;
  --border-focus: var(--color-ring-blue);
  --border-sidebar: rgba(28,25,23,0.08);

  /* ── Shadows (warm-toned) ── */
  --shadow-xs: 0 1px 2px rgba(28,25,23,0.04);
  --shadow-sm: 0 1px 3px rgba(28,25,23,0.06), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-md: 0 4px 12px rgba(28,25,23,0.06), 0 1px 3px rgba(28,25,23,0.04);
  --shadow-lg: 0 12px 32px rgba(28,25,23,0.08), 0 2px 6px rgba(28,25,23,0.04);
  --shadow-modal: 0 24px 64px rgba(28,25,23,0.15);
  --shadow-dropdown: 0 8px 24px rgba(28,25,23,0.10), 0 0 0 1px rgba(28,25,23,0.06);
  --shadow-brand: 0 0 0 2px rgba(194,144,47,0.20);

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing (base 4px) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --header-height: 60px;
  --content-max: 1160px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease-in-out);
  --transition-base: 200ms var(--ease-in-out);

  /* ── Z-Index ── */
  --z-sidebar: 40;
  --z-header: 50;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ═══ LEGACY ALIASES — backward compat with old code ═══ */
  --primary: var(--color-signal-blue);
  --primary-light: var(--color-arc-blue);
  --primary-dark: var(--color-iris);
  --primary-glass: rgba(194,144,47,0.08);
  --primary-gradient: linear-gradient(135deg, var(--color-iris), var(--color-signal-blue));
  --text-main: var(--text-primary);
  --text-muted: var(--text-muted);
  --text-light: var(--text-secondary);
  --border: var(--border-default);
  --border-light: var(--border-light);
  --bg-body: var(--surface-page);
  --bg-card: var(--surface-card);
  --bg-sidebar: var(--surface-sidebar);
  --danger: var(--color-coral);
  --warning: var(--color-ember);
  --font-primary: var(--font-body);
  --font-heading: var(--font-display);
  --radius-cards: var(--radius-xl);
  --radius-sm: var(--radius-sm);
  --radius: var(--radius-xl);
  --radius-lg: var(--radius-2xl);
  --radius-badges: var(--radius-full);
  --radius-buttons: var(--radius-lg);
  --shadow-xs: var(--shadow-xs);
  --shadow: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-premium: var(--shadow-md);
  --transition: all 0.2s var(--ease-in-out);
  --card-padding: 20px;
  --sidebar-width: 240px;
  --max-content-width: 1160px;
}

/* ═══════════════════════════════════════════════════════════════
   3. RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: 100%;
  background: var(--surface-page);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  letter-spacing: -0.012em;
  font-feature-settings: 'ss01' on, 'ss03' on;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
input, select, textarea, button { font-family: inherit; font-size: inherit; color: var(--text-primary); }

:focus-visible {
  outline: 1.5px solid var(--color-signal-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   4. KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(100%) scale(0.95); } }
@keyframes auroraFloat { 0%,100% { transform: translate(0,0) scale(1) rotate(0deg); } 33% { transform: translate(30px,-30px) scale(1.05) rotate(3deg); } 66% { transform: translate(-20px,20px) scale(0.95) rotate(-2deg); } }

/* ── Utilities ── */
.spin { animation: spin 1s linear infinite; display: inline-block; }
.animate-in { animation: fadeInUp 0.5s var(--ease-out) both; }
.stagger-1 { animation-delay: 0.04s; } .stagger-2 { animation-delay: 0.08s; } .stagger-3 { animation-delay: 0.12s; } .stagger-4 { animation-delay: 0.16s; } .stagger-5 { animation-delay: 0.2s; } .stagger-6 { animation-delay: 0.24s; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ═══════════════════════════════════════════════════════════════
   5. APP SHELL
   ═══════════════════════════════════════════════════════════════ */
#main-app-section { display: none; width: 100%; height: 100%; overflow: hidden; }
#main-app-section[style*="display:block"],
#main-app-section[style*="display: flex"] { display: flex; }

.app-layout { display: flex; height: 100%; width: 100%; }
#sidebar-container { display: flex; height: 100%; flex-shrink: 0; }

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   6. SIDEBAR — dark terminal rail
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width);
  height: 100%;
  background: var(--surface-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: var(--z-sidebar);
  position: relative;
  border-right: 0.5px solid var(--border-sidebar);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-6);
  flex-shrink: 0;
}

.sidebar-brand__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-signal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-snow);
  flex-shrink: 0;
}

.sidebar-brand__text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-sidebar-active);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sidebar-brand__img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.sidebar-brand__sub {
  font-size: 0.625rem;
  color: var(--text-sidebar-heading);
  font-weight: var(--weight-normal);
  display: block;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.company-context {
  position: relative;
  margin: 0 var(--space-3) var(--space-3);
  padding: 10px 11px;
  border: 1px solid rgba(194, 144, 47, 0.24);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(194, 144, 47, 0.12), rgba(255,255,255,0.025)),
    var(--surface-sidebar-elevated);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.company-context[hidden] { display: none; }

.company-context label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #d8b86e;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-context label svg { width: 12px; height: 12px; }

.company-context select {
  width: 100%;
  min-width: 0;
  padding: 0 20px 0 0;
  border: 0;
  outline: 0;
  color: var(--text-sidebar-active);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 580;
  text-overflow: ellipsis;
  cursor: pointer;
}

.company-context select option {
  color: #fff;
  background: var(--surface-sidebar-elevated);
}

.company-context small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-sidebar-heading);
  font-size: 0.625rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company-context.is-switching::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 11px;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-top-color: #d8b86e;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.mobile-company-context {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 14px 16px;
  border: 1px solid rgba(194, 144, 47, .28);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(194, 144, 47, .12), rgba(255,255,255,.9)), var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.mobile-company-context[hidden] { display: none; }
.mobile-company-context-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #7b5717; background: rgba(194,144,47,.16); }
.mobile-company-context-icon svg { width: 20px; height: 20px; }
.mobile-company-context-copy { min-width: 0; }
.mobile-company-context-copy label { display: block; margin-bottom: 2px; color: var(--text-secondary); font-size: .625rem; font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.mobile-company-context-copy select { width: 100%; padding: 2px 24px 2px 0; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold); text-overflow: ellipsis; appearance: none; }
.mobile-company-context-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-secondary); font-size: .6875rem; white-space: nowrap; text-overflow: ellipsis; }
.mobile-company-context-chevron { width: 18px; height: 18px; color: #9a7225; pointer-events: none; }
.mobile-company-context.is-switching { opacity: .7; pointer-events: none; }
.mobile-company-context.is-switching::after { content: ''; position: absolute; right: 16px; width: 16px; height: 16px; border: 2px solid rgba(154,114,37,.2); border-top-color: #9a7225; border-radius: 50%; animation: spin .7s linear infinite; }

.sidebar-section-label {
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: 0.563rem;
  font-weight: var(--weight-medium);
  color: var(--text-sidebar-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  padding: 0 var(--space-2);
  min-height: 0;
}
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar-scroll .sidebar-menu { overflow: visible; }
.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
.sidebar-menu::-webkit-scrollbar { width: 2px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 1px; }
.sidebar-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  color: var(--text-sidebar);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}
.nav-item i, .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--transition-fast); }
.sidebar .nav-item:hover { color: var(--text-sidebar-active); background: var(--surface-hover-sidebar); }
.nav-item:hover i, .nav-item:hover svg { opacity: 0.85; }
.nav-item.active { color: var(--text-sidebar-active); background: var(--surface-active-sidebar); }
.nav-item.active i, .nav-item.active svg { opacity: 1; color: var(--color-signal-blue); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--color-signal-blue);
  border-radius: 0 2px 2px 0;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-3) var(--space-2);
  border-top: 0.5px solid var(--border-sidebar);
  flex-shrink: 0;
}
.sidebar-footer .nav-item { font-size: var(--text-xs); padding: 6px var(--space-3); }
.sidebar-version { text-align: center; padding: var(--space-2); font-size: 0.563rem; color: var(--text-sidebar-heading); letter-spacing: 0.06em; }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: calc(var(--z-sidebar) - 1); display: none; backdrop-filter: blur(2px); }
.sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  flex-shrink: 0;
}

.sidebar-header img,
.logo-text img,
#sidebar-logo,
.sidebar-brand__img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

/* Old logo text matches new brand text */
.logo-text,
#sidebar-company-name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-sidebar-active);
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}

/* ═══════════════════════════════════════════════════════════════
   7. HEADER — thin glass bar
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  height: var(--header-height);
  padding: 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 0.5px solid var(--border-default);
  background: var(--surface-page);
}
.page-heading { font-size: var(--text-lg); font-weight: var(--weight-normal); color: var(--text-primary); letter-spacing: -0.025em; }
.page-subheading { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ── Search ── */
.header-search,
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-elevated);
  border: 0.5px solid var(--border-default);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  width: 240px;
  transition: all var(--transition-fast);
}
.header-search:focus-within,
.search-bar:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-brand); }
.header-search i, .header-search svg,
.search-bar i, .search-bar svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.header-search input,
.search-bar input { border: none; background: transparent; outline: none; width: 100%; font-size: var(--text-sm); color: var(--text-primary); }
.search-bar input::placeholder { color: var(--text-placeholder); }

/* ── User Profile dropdown ── */
.user-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 0.5px solid transparent;
}
.user-profile:hover { border-color: var(--border-default); background: var(--surface-hover); }
.user-profile__avatar {
  width: 30px; height: 30px; border-radius: var(--radius-full);
  background: var(--surface-elevated); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-medium); font-size: var(--text-sm); overflow: hidden;
}
.user-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-profile__info { text-align: right; }
.user-profile__name { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-primary); display: block; line-height: 1.3; }
.user-profile__role { font-size: var(--text-xs); color: var(--text-muted); display: block; line-height: 1.3; }
.user-profile__chevron { width: 14px; height: 14px; color: var(--text-muted); transition: transform var(--transition-fast); }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-elevated); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-medium); overflow: hidden; }
.user-info .name { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-primary); display: block; }
.user-info .role { font-size: var(--text-xs); color: var(--text-muted); display: block; }

.profile-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; width: 200px;
  background: var(--surface-elevated); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown); border: 0.5px solid var(--border-default);
  padding: var(--space-1); display: none; z-index: var(--z-dropdown);
  animation: fadeInScale 0.12s var(--ease-out);
}
.profile-dropdown.active { display: block; }
.profile-dropdown__item,
.profile-dropdown .dropdown-item,
.hero-light {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 8px var(--space-3);
  border: none; background: transparent;
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-normal);
  border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast);
}
.profile-dropdown__item:hover,
.profile-dropdown .dropdown-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.profile-dropdown__item i, .profile-dropdown__item svg,
.profile-dropdown .dropdown-item i, .profile-dropdown .dropdown-item svg { width: 14px; height: 14px; color: var(--text-muted); }
.profile-dropdown__item--danger,
.profile-dropdown__item.logout,
.profile-dropdown .dropdown-item.logout { color: var(--color-coral); }
.profile-dropdown__divider { height: 0.5px; background: var(--border-default); margin: var(--space-1) 0; }
.profile-dropdown .dropdown-divider { height: 0.5px; background: var(--border-default); margin: var(--space-1) 0; }
.user-profile.is-open { background: var(--surface-hover); border-color: var(--border-default); }
.user-profile.is-open .user-profile__chevron,
.user-profile.is-open > [data-lucide="chevron-down"] { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
   8. CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
.content-area,
.content-area-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--space-6) var(--space-8);
  scroll-behavior: smooth;
}
.content-area > .app-view,
.content-area-scroll > .app-view {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  animation: fadeInUp 0.4s var(--ease-out);
}
.app-view { display: none; }
.app-view.active { display: block; }
.content-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4);
}
.section-heading { font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--text-primary); letter-spacing: -0.025em; }

/* ═══════════════════════════════════════════════════════════════
   9. KPI CARDS — stat tiles
   ═══════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.kpi-card {
  background: var(--surface-card); border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5); border: 0.5px solid var(--border-light);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: all var(--transition-base); position: relative;
}
.kpi-card:hover { border-color: var(--border-default); background: var(--surface-elevated); }
.kpi-card.primary-card,
.kpi-card--primary {
  border-color: rgba(194,144,47,0.15);
}
.kpi-card.primary-card .stat-label,
.kpi-card.primary-card .stat-value,
.kpi-card--primary .kpi-card__value,
.kpi-card--primary .kpi-card__label { color: var(--text-primary); }
.kpi-card.primary-card .icon-box,
.kpi-card--primary .kpi-card__icon { background: rgba(194,144,47,0.1); color: var(--color-signal-blue); }

.kpi-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-card__header { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-card__icon,
.icon-box {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-elevated); color: var(--color-signal-blue);
  flex-shrink: 0;
}
.kpi-card__icon i, .kpi-card__icon svg,
.icon-box i, .icon-box svg { width: 18px; height: 18px; }

.kpi-card__value,
.stat-value { font-size: var(--text-3xl); font-weight: var(--weight-normal); color: var(--text-primary); line-height: 1; letter-spacing: -0.04em; }
.kpi-card__label,
.stat-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-normal); text-transform: uppercase; letter-spacing: 0.04em; }

.kpi-card__trend { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); margin-top: auto; padding-top: var(--space-1); }
.kpi-card__trend i, .kpi-card__trend svg { width: 12px; height: 12px; }
.kpi-card__trend--up { color: var(--color-fern); }
.kpi-card__trend--down { color: var(--color-coral); }

.growth-badge { padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.growth-up { background: rgba(107,144,128,0.1); color: var(--color-fern); }
.growth-down { background: rgba(181,68,60,0.1); color: var(--color-coral); }
.growth-neutral { background: var(--surface-hover); color: var(--text-muted); }

.view-link { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-signal-blue); display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; transition: all var(--transition-fast); }
.view-link:hover { gap: var(--space-2); opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════
   10. CARDS — generic panels
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 0.5px solid var(--border-light);
  transition: all var(--transition-base);
}
.card:hover { border-color: var(--border-default); }

.side-stat-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 0.5px solid var(--border-light);
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  transition: all var(--transition-base);
}
.side-stat-card:hover { border-color: var(--border-default); }
.side-stats-container { display: flex; flex-direction: column; gap: var(--space-3); }
.side-val { font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--text-primary); margin: var(--space-1) 0; }

.chart-container, .chart-box {
  background: var(--surface-card); border-radius: var(--radius-xl);
  padding: var(--space-5); border: 0.5px solid var(--border-light);
  min-height: 300px; position: relative; display: flex; flex-direction: column;
}
.chart-header, .chart-box__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.chart-title, .chart-box__title { font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--text-primary); }
.width-100 { width: 100%; height: 100%; flex: 1; position: relative; }

/* ═══════════════════════════════════════════════════════════════
   11. TABLES — data rows
   ═══════════════════════════════════════════════════════════════ */
.table-container { border-radius: var(--radius-xl); border: 0.5px solid var(--border-default); overflow: hidden; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-toolbar { padding: var(--space-3) var(--space-4); border-bottom: 0.5px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.table-toolbar__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }

table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th {
  text-align: left; padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--surface-page); border-bottom: 0.5px solid var(--border-default);
}
td {
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
  color: var(--text-secondary); border-bottom: 0.5px solid var(--border-light);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-hover); }

.table-identity { display: flex; align-items: center; gap: var(--space-3); }
.table-identity__name { font-weight: var(--weight-medium); color: var(--text-primary); display: block; line-height: 1.3; }
.table-identity__sub { font-size: var(--text-xs); color: var(--text-muted); display: block; }
.table-avatar--placeholder {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-medium); font-size: var(--text-sm);
  background: var(--surface-elevated); color: var(--color-signal-blue);
}

/* ═══════════════════════════════════════════════════════════════
   12. FORMS — dark inputs
   ═══════════════════════════════════════════════════════════════ */
.form-grid { display: grid; gap: var(--space-4); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-group label,
.form-group__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Expediente Digital: flujo guiado */
.employee-wizard-progress { display:flex; align-items:center; justify-content:center; padding:22px 40px; background:color-mix(in srgb, var(--surface-card) 92%, var(--primary) 8%); border-bottom:1px solid var(--border-light); }
.employee-wizard-step { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface-card); border:1px solid var(--border); color:var(--text-muted); font-size:.75rem; font-weight:800; transition:.25s ease; }
.employee-wizard-step.is-active { color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 15%, transparent); }
.employee-wizard-step.is-complete { color:#fff; background:#15803d; border-color:#15803d; }
.employee-wizard-line { width:clamp(24px, 6vw, 72px); height:1px; background:var(--border); }
.employee-form-step { display:none; animation:employeeStepIn .28s ease both; }
.employee-form-step.is-active { display:block; }
.identity-gate { max-width:680px; margin:16px auto 40px; padding:34px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg, var(--surface-card), color-mix(in srgb, var(--surface-card) 92%, var(--primary) 8%)); box-shadow:var(--shadow-sm); }
.identity-gate__eyebrow { margin-bottom:10px; color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.identity-gate h4 { margin:0 0 10px; color:var(--text-main); font-size:1.55rem; }
.identity-gate p { margin:0 0 26px; color:var(--text-muted); line-height:1.65; }
.identity-gate__input-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.identity-gate__input-row .form-group { margin:0; }
.identity-gate__input-row .form-group:first-child { grid-column:1 / -1; }
.identity-gate__button { min-height:46px; white-space:nowrap; }
.identity-gate__status { display:none; margin-top:18px; padding:12px 14px; border-radius:10px; font-size:.85rem; font-weight:600; }
.identity-gate__status.is-loading { display:block; color:#92400e; background:#fffbeb; border:1px solid #fde68a; }
.identity-gate__status.is-member { display:block; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; }
.identity-gate__status.is-not-member { display:block; color:#334155; background:#f8fafc; border:1px solid #cbd5e1; }
.identity-gate__status.is-error { display:block; color:#991b1b; background:#fef2f2; border:1px solid #fecaca; }
.employee-wizard-actions button { min-width:130px; }
.employee-wizard-actions #btnEmployeeWizardNext,
.employee-wizard-actions #btnEmployeeWizardSubmit { min-height:48px; padding:0 22px; font-weight:800; box-shadow:0 8px 18px rgba(24,39,75,.12); }
.employee-wizard-actions button:disabled { opacity:.62; cursor:wait; transform:none; }
.employee-wizard-actions button[aria-busy="true"] { position:relative; padding-right:46px; }
.employee-wizard-actions button[aria-busy="true"]::after { content:""; position:absolute; right:17px; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:wizardSpin .7s linear infinite; }
@keyframes wizardSpin { to { transform:rotate(360deg); } }
@keyframes employeeStepIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:640px) {
  .employee-wizard-progress { padding:18px 20px; }
  .employee-wizard-body { padding:24px 20px !important; }
  .identity-gate { padding:24px 20px; }
  .identity-gate__input-row { grid-template-columns:1fr; }
  .employee-wizard-actions { padding:14px 16px !important; display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; }
  .employee-wizard-actions #btnEmployeeWizardBack { grid-column:1; }
  .employee-wizard-actions #btnEmployeeWizardNext,
  .employee-wizard-actions #btnEmployeeWizardSubmit { grid-column:2; width:100%; min-width:0; padding:0 12px; }
  .employee-wizard-actions #btnDemoFill { display:none !important; }
}

/* Legacy pages keep the header inside .main-content. Treat it as the same
   application header so profile, search and notifications stay on the right. */
.main-content > header {
  min-height: var(--header-height);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
  background: rgba(250,248,245,0.92);
  border-bottom: 0.5px solid var(--border-default);
  backdrop-filter: blur(12px);
  z-index: var(--z-header);
}
.main-content > header > .header-actions,
body.has-shared-sidebar > header > .header-actions { margin-left: auto; }
.main-content > header .page-title,
body.has-shared-sidebar > header .page-title { min-width: 0; }
.main-content > header .page-title h1,
body.has-shared-sidebar > header .page-title h1 {
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

input, select, textarea {
  padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--surface-elevated); border: 0.5px solid var(--border-default);
  font-size: var(--text-sm); color: var(--text-primary); outline: none;
  transition: all var(--transition-fast); width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1.5px rgba(194,144,47,0.15);
}
input::placeholder { color: var(--text-placeholder); }

/* Legacy input-with-icon */
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon i, .input-with-icon svg { position: absolute; left: 12px; color: var(--text-muted); width: 16px; height: 16px; pointer-events: none; }
.input-with-icon input { width: 100%; padding: 10px 12px 10px 36px; }

/* ═══════════════════════════════════════════════════════════════
   13. BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-primary-white, .btn--primary, .btn--secondary, .btn--outline, .btn--ghost, .btn--danger, .btn--success {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 8px 16px; border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-weight: var(--weight-normal); cursor: pointer;
  transition: all var(--transition-fast); white-space: nowrap; line-height: 1.4;
}
.btn--icon, .icon-btn {
  width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md);
  background: transparent; border: 0.5px solid var(--border-default);
  color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all var(--transition-fast);
}
.btn--icon:hover, .icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); }

/* Primary: Bone pill (off-white on dark) */
.btn-primary, .btn--primary { background: var(--color-bone); color: var(--color-ink); border: none; }
.btn-primary:hover, .btn--primary:hover { background: var(--color-snow); }
.btn-primary:active, .btn--primary:active { transform: scale(0.97); }

/* Secondary: ghost */
.btn--secondary { background: var(--surface-hover); color: var(--text-primary); border: 0.5px solid var(--border-default); }
.btn--secondary:hover { background: rgba(28,25,23,0.08); }

/* Outline */
.btn--outline { background: transparent; border: 0.5px solid var(--border-default); color: var(--text-secondary); }
.btn--outline:hover { border-color: var(--color-signal-blue); color: var(--color-signal-blue); }

/* Ghost */
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Danger */
.btn--danger, .btn-outline-danger { background: transparent; color: var(--color-coral); border: 0.5px solid rgba(181,68,60,0.2); }
.btn--danger:hover, .btn-outline-danger:hover { background: rgba(181,68,60,0.08); }

/* Success */
.btn--success { background: var(--color-fern); color: var(--color-snow); border: none; }
.btn--success:hover { background: #16a34a; }

/* White outline */
.btn-primary-white { background: transparent; color: var(--text-secondary); border: 0.5px solid var(--border-default); }
.btn-primary-white:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* Sizes */
.btn--lg { padding: 10px 24px; font-size: var(--text-base); }
.btn--sm { padding: 4px 10px; font-size: var(--text-xs); }

/* Disabled */
.btn:disabled, .btn-primary:disabled, button:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.btn-action, .btn-icon-action {
  width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--border-default); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition-fast);
}
.btn-action:hover, .btn-icon-action:hover { background: var(--surface-hover); color: var(--text-primary); }

.btn-hero-light { background: rgba(28,25,23,0.08); color: var(--text-primary); border: none; padding: 8px 16px; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--weight-normal); cursor: pointer; transition: all var(--transition-fast); }
.btn-hero-light:hover { background: rgba(28,25,23,0.10); }

/* ═══════════════════════════════════════════════════════════════
   14. BADGES — status indicators
   ═══════════════════════════════════════════════════════════════ */
.badge, .badge-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 8px; border-radius: var(--radius-lg);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
}
.badge--success, .badge-active, .badge-status.status-active { background: rgba(107,144,128,0.12); color: var(--color-fern); }
.badge--warning, .badge-warning, .badge-status.status-warning { background: rgba(196,106,74,0.12); color: var(--color-ember); }
.badge--danger, .badge-inactive, .badge-status.status-expired { background: rgba(181,68,60,0.10); color: var(--color-coral); }
.badge--info { background: rgba(194,144,47,0.12); color: var(--color-signal-blue); }

.badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }

.badge-req-pending, .badge-req-approved, .badge-req-rejected {
  padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.badge-req-pending { background: rgba(196,106,74,0.12); color: var(--color-ember); }
.badge-req-approved { background: rgba(107,144,128,0.12); color: var(--color-fern); }
.badge-req-rejected { background: rgba(181,68,60,0.10); color: var(--color-coral); }

/* ═══════════════════════════════════════════════════════════════
   15. MODALS — elevated panels
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: var(--z-modal); display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); padding: var(--space-4);
}
.modal-overlay.active { display: flex; }
.modal-overlay#modalEmpleado { z-index: 1200; }
.modal-overlay#emailOtpModal { z-index: 20000; }
.modal-overlay#modalEmpleado[aria-busy="true"]::after { content:"Cargando datos del expediente…"; position:absolute; inset:0; display:grid; place-items:center; color:var(--text-main); font-weight:800; background:rgba(255,255,255,.42); backdrop-filter:blur(2px); pointer-events:none; }

.modal, .modal-content {
  background: var(--surface-card); border-radius: var(--radius-2xl);
  width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow-modal); border: 0.5px solid var(--border-default);
  animation: fadeInScale 0.2s var(--ease-out);
}
.modal--sm { max-width: 400px; }
.modal--lg { max-width: 720px; }

.modal__header, .modal-header {
  padding: var(--space-5) var(--space-6); border-bottom: 0.5px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.modal__title { font-size: var(--text-lg); font-weight: var(--weight-normal); color: var(--text-primary); }
.modal__description { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.modal__body { padding: var(--space-6); }
.modal__footer { padding: var(--space-4) var(--space-6); border-top: 0.5px solid var(--border-light); display: flex; justify-content: flex-end; gap: var(--space-2); }

.modal__close, .close-modal {
  width: 28px; height: 28px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all var(--transition-fast);
}
.modal__close:hover, .close-modal:hover { background: var(--surface-hover); color: var(--text-primary); }

input.email-otp-verified {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .11) !important;
  background-image: linear-gradient(90deg, transparent calc(100% - 38px), rgba(16, 185, 129, .10) calc(100% - 38px));
}

/* Editor de colaborador: compacto, seccionado y con acciones siempre visibles */
.edit-employee-modal {
  max-width: 840px !important; height: min(720px, calc(100vh - 32px)); max-height: calc(100vh - 32px) !important;
  padding: 0; overflow: hidden !important; border-radius: 24px; display: flex; flex-direction: column;
}
.edit-employee-form { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.edit-employee-tabs { display: flex; gap: 8px; padding: 12px 28px; border-bottom: 1px solid var(--border-light); background: var(--surface-page); }
.edit-employee-tabs button { border: 0; background: transparent; color: var(--text-muted); padding: 9px 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.edit-employee-tabs button svg { width: 16px; height: 16px; }
.edit-employee-tabs button.is-active { background: var(--surface-card); color: var(--primary); box-shadow: 0 2px 10px rgba(50, 42, 25, .08); }
.edit-employee-body { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px; }
.edit-employee-panel { display: none; }
.edit-employee-panel.is-active { display: block; animation: fadeInScale .16s var(--ease-out); }
.edit-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.edit-section-heading > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(196, 140, 41, .12); color: var(--primary); font-size: .72rem; font-weight: 800; }
.edit-section-heading strong, .edit-section-heading small { display: block; }
.edit-section-heading strong { color: var(--text-main); font-size: 1rem; }
.edit-section-heading small { color: var(--text-muted); margin-top: 2px; }
.edit-employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 20px; }
.bank-edit-callout { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 22px; padding: 13px 15px; border: 1px solid rgba(196, 140, 41, .25); border-radius: 12px; background: rgba(196, 140, 41, .07); color: var(--text-muted); font-size: .8rem; line-height: 1.45; }
.bank-edit-callout svg { width: 18px; flex: 0 0 auto; color: var(--primary); }
.edit-employee-footer { flex: 0 0 auto; padding: 16px 28px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 12px; background: var(--surface-card); box-shadow: 0 -8px 20px rgba(31, 26, 18, .04); }

@media (max-width: 640px) {
  .edit-employee-modal { height: calc(100vh - 16px); max-height: calc(100vh - 16px) !important; }
  .edit-employee-tabs { padding: 10px 14px; }
  .edit-employee-tabs button { flex: 1; justify-content: center; padding: 9px 6px; font-size: .74rem; }
  .edit-employee-body { padding: 20px 16px; }
  .edit-employee-grid { grid-template-columns: 1fr !important; }
  .edit-employee-grid .form-group { grid-column: auto !important; }
  .edit-employee-footer { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   16. TABS
   ═══════════════════════════════════════════════════════════════ */
.tabs, .portal-tab-container { display: flex; border-bottom: 0.5px solid var(--border-default); }
.tab, .portal-tab {
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm);
  font-weight: var(--weight-normal); color: var(--text-muted);
  background: transparent; border: none; cursor: pointer; position: relative;
  transition: all var(--transition-fast);
}
.tab:hover, .portal-tab:hover { color: var(--text-primary); }
.tab.active, .portal-tab.active { color: var(--color-signal-blue); }
.tab.active::after, .portal-tab.active::after {
  content: ''; position: absolute; bottom: -0.5px; left: var(--space-4); right: var(--space-4);
  height: 1.5px; background: var(--color-signal-blue); border-radius: 1px 1px 0 0;
}
.portal-tab-content { animation: fadeIn 0.2s var(--ease-out); }

/* ═══════════════════════════════════════════════════════════════
   17. PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.pagination, .pagination-container { display: flex; justify-content: center; align-items: center; gap: var(--space-1); padding: var(--space-4); }
.page-btn {
  min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--border-default); background: var(--surface-card); color: var(--text-muted);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium);
  cursor: pointer; transition: all var(--transition-fast); padding: 0 var(--space-2);
}
.page-btn:hover { border-color: var(--color-signal-blue); color: var(--color-signal-blue); background: var(--surface-active); }
.page-btn.active { background: var(--color-signal-blue); color: var(--color-snow); border-color: var(--color-signal-blue); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   18. TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
.toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--surface-elevated); border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg); min-width: 300px; max-width: 400px;
  animation: toastIn 0.3s var(--ease-out); pointer-events: auto;
}
.toast--success { border-left: 2px solid var(--color-fern); }
.toast--error { border-left: 2px solid var(--color-coral); }
.toast--warning { border-left: 2px solid var(--color-ember); }
.toast--info { border-left: 2px solid var(--color-signal-blue); }
.toast--removing { animation: toastOut 0.2s var(--ease-in-out) forwards; }
.toast__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast--success .toast__icon { color: var(--color-fern); }
.toast--error .toast__icon { color: var(--color-coral); }
.toast--warning .toast__icon { color: var(--color-ember); }
.toast--info .toast__icon { color: var(--color-signal-blue); }
.toast__content { flex: 1; min-width: 0; }
.toast__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.3; }
.toast__message { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.toast__close { width: 22px; height: 22px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast__close:hover { background: var(--surface-hover); color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   19. SKELETON LOADERS
   ═══════════════════════════════════════════════════════════════ */
.skeleton { position: relative; overflow: hidden; background: var(--surface-elevated); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(28,25,23,0.04) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}
.skeleton--text { height: 12px; margin-bottom: var(--space-2); width: 100%; }
.skeleton--text-sm { height: 10px; width: 50%; }
.skeleton--text-md { height: 12px; width: 75%; }
.skeleton--title { height: 18px; width: 40%; margin-bottom: var(--space-3); }
.skeleton--avatar { width: 32px; height: 32px; border-radius: var(--radius-full); }
.skeleton--icon { width: 36px; height: 36px; border-radius: var(--radius-md); }
.skeleton--card { height: 120px; border-radius: var(--radius-xl); }
.skeleton--kpi { height: 100px; border-radius: var(--radius-xl); }
.skeleton--row { height: 44px; margin-bottom: var(--space-1); border-radius: var(--radius-sm); }
.skeleton--chart { height: 250px; border-radius: var(--radius-xl); }
.skeleton-text { height: 0.9rem; margin-bottom: 0.5rem; width: 100%; }
.skeleton-title { height: 1.4rem; margin-bottom: 1rem; width: 60%; }
.skeleton-card { height: 160px; border-radius: var(--radius); }
.skeleton-circle { border-radius: 50%; width: 44px; height: 44px; }

/* ═══════════════════════════════════════════════════════════════
   20. EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-6); text-align: center; }
.empty-state__icon { width: 48px; height: 48px; border-radius: var(--radius-xl); background: var(--surface-elevated); color: var(--text-muted); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.empty-state__icon i, .empty-state__icon svg { width: 24px; height: 24px; }
.empty-state__title { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: var(--space-2); }
.empty-state__description { font-size: var(--text-sm); color: var(--text-muted); max-width: 320px; }

/* ═══════════════════════════════════════════════════════════════
   21. LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
#login-section {
  min-height: 100vh; display: none; align-items: center; justify-content: center;
  background: var(--surface-page); position: fixed; inset: 0; z-index: 1000; overflow: hidden;
}
.login-aurora-bg { position: absolute; inset: 0; overflow: hidden; }
.aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(120px);
  opacity: 0.15; pointer-events: none;
}
.aurora-blob.blob-1, .aurora-blob--1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--color-signal-blue), transparent 70%); top: -250px; right: -100px; animation: auroraFloat 22s ease-in-out infinite; }
.aurora-blob.blob-2, .aurora-blob--2 { width: 500px; height: 500px; background: radial-gradient(circle, #314ef0, transparent 70%); bottom: -200px; left: -100px; animation: auroraFloat 26s ease-in-out infinite reverse; }
.aurora-blob.blob-3, .aurora-blob--3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(194,144,47,0.2), transparent 70%); top: 45%; left: 55%; animation: auroraFloat 18s ease-in-out infinite 4s; }

.login-container { display: flex; width: 100%; height: 100%; position: relative; z-index: 5; }
.login-visual, .login-visual-panel {
  flex: 1.2; display: flex; align-items: center; justify-content: center;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-10); color: var(--color-snow);
  background:
    radial-gradient(circle at 18% 16%, rgba(194,144,47,.30), transparent 32%),
    radial-gradient(circle at 88% 86%, rgba(82,122,106,.22), transparent 36%),
    linear-gradient(145deg, #262833 0%, #1c1e26 58%, #17181e 100%);
}
.login-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(135deg, #000, transparent 82%);
}
.login-visual__content, .visual-content { max-width: 420px; animation: fadeInUp 0.8s var(--ease-out); }
.login-visual__logo, .visual-logo {
  width: min(250px, 76%); height: auto; margin-bottom: var(--space-8);
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  filter: none; opacity: 1;
}
.login-visual__heading, .visual-title { font-size: var(--text-4xl); font-weight: var(--weight-normal); line-height: 1.1; margin-bottom: var(--space-5); letter-spacing: -0.04em; color: var(--color-snow); }
.login-visual__heading .highlight, .visual-title .highlight { color: var(--color-signal-blue); }
.login-visual__desc, .visual-description { font-size: var(--text-md); color: rgba(255,255,255,.72); opacity: 1; margin-bottom: var(--space-8); line-height: 1.6; }
.login-visual__features, .visual-features { display: flex; flex-direction: column; gap: var(--space-3); }
.login-visual__feature, .feature-item { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); font-size: var(--text-sm); color: rgba(255,255,255,.88); opacity: 1; }
.login-visual__feature i, .login-visual__feature svg, .feature-item i, .feature-item svg { width: 18px; height: 18px; color: var(--color-signal-blue); }

.login-form-panel { flex: 1; background: var(--surface-page); display: flex; align-items: center; justify-content: center; padding: var(--space-8); }
.login-card {
  background: var(--surface-card); border-radius: var(--radius-2xl); padding: var(--space-8);
  width: 100%; max-width: 400px; border: 0.5px solid var(--border-default);
}
.login-card__title { font-size: var(--text-2xl); font-weight: var(--weight-normal); color: var(--text-primary); margin-bottom: var(--space-1); }
.login-card__subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-6); }
.login-card__footer, .login-footer { text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 0.5px solid var(--border-light); }
.mobile-logo { display: none; }

#login-section .login-card label { color: var(--text-primary) !important; }
#login-section .input-with-icon input {
  background: var(--surface-input);
  color: var(--text-primary);
  border-color: var(--border-default);
}
#login-section .input-with-icon input::placeholder { color: var(--text-placeholder); opacity: 1; }
#login-section #link-show-activation { color: var(--color-iris) !important; }
#login-section #link-show-activation:hover { color: var(--color-signal-blue) !important; text-decoration: underline !important; }
#login-section .login-footer p { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   22. MOBILE BOTTOM NAV — hidden on desktop, shown only ≤1024px
   ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav,
#mobile-sidebar-toggle,
.mobile-sidebar-toggle,
.mobile-toggle-btn {
  display: none;
}

.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background: var(--surface-card); backdrop-filter: blur(8px);
  border-top: 0.5px solid var(--border-default); z-index: 500;
  justify-content: space-around; align-items: center;
  padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom));
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-1) 0; text-decoration: none; color: var(--text-muted);
  transition: all var(--transition-fast); position: relative; border: none; background: transparent; cursor: pointer;
}
.bottom-nav-item i, .bottom-nav-item svg { width: 20px; height: 20px; }
.bottom-nav-item span { font-size: 0.563rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.06em; }
.bottom-nav-item.active { color: var(--color-signal-blue); }
.bottom-nav-item.active::before { content: ''; position: absolute; top: -2px; width: 16px; height: 2px; background: var(--color-signal-blue); border-radius: 0 0 2px 2px; }

/* ═══════════════════════════════════════════════════════════════
   23. COMPANY GRID (Super Admin)
   ═══════════════════════════════════════════════════════════════ */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.company-card { background: var(--surface-card); border-radius: var(--radius-xl); border: 0.5px solid var(--border-light); overflow: hidden; transition: all var(--transition-base); }
.company-card:hover { border-color: var(--border-default); background: var(--surface-elevated); }
.company-card__header { padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.company-card__logo { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-medium); font-size: var(--text-lg); color: var(--color-snow); flex-shrink: 0; }
.company-card__name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); }
.company-card__rnc { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.company-card__stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid var(--border-light); }
.company-card__stat { padding: var(--space-3); text-align: center; }
.company-card__stat:first-child { border-right: 0.5px solid var(--border-light); }
.company-card__stat-value { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-primary); display: block; }
.company-card__stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════
   24. DASHBOARD MIDDLE GRID
   ═══════════════════════════════════════════════════════════════ */
.dashboard-split, .dashboard-grid-middle { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 1440px) { .dashboard-split, .dashboard-grid-middle { grid-template-columns: 2fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   25. SPECIALTY COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── License key ── */
.license-key { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--surface-elevated); padding: 2px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); border: 0.5px solid var(--border-light); letter-spacing: 0.03em; }

/* ── System icon (licencias table) ── */
.system-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--surface-elevated); color: var(--color-signal-blue); }

/* ── Plan badge ── */
.plan-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.plan-badge--enterprise { background: rgba(194,144,47,0.08); color: var(--color-signal-blue); }
.plan-badge--pro { background: rgba(194,144,47,0.08); color: var(--color-arc-blue); }
.plan-badge--starter { background: var(--surface-hover); color: var(--text-muted); }

/* ── Wizard steps ── */
.steps { display: flex; gap: 0; margin-bottom: var(--space-6); }
.step { flex: 1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; position: relative; }
.step::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--border-default); }
.step--active::after { background: var(--color-signal-blue); }
.step--complete::after { background: var(--color-fern); }
.step__dot { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--border-default); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-medium); flex-shrink: 0; transition: all var(--transition-base); }
.step--active .step__dot { background: var(--color-signal-blue); color: var(--color-snow); box-shadow: 0 0 0 3px rgba(194,144,47,0.15); }
.step--complete .step__dot { background: var(--color-fern); color: var(--color-snow); }
.step__label { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--text-muted); }
.step--active .step__label { color: var(--text-primary); }
.step--complete .step__label { color: var(--text-secondary); }

/* ── Day chips (schedule selector) ── */
.day-chip { width: 32px; height: 32px; border-radius: var(--radius-full); border: 0.5px solid var(--border-default); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--transition-fast); background: transparent; color: var(--text-muted); }
.day-check:checked + .day-chip { background: var(--color-signal-blue); color: var(--color-snow); border-color: var(--color-signal-blue); }
.day-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ── Day pills (dias libres modal) ── */
.day-pill, .dl-cpl-pill, .dl-exp-pill { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); background: var(--surface-elevated); padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: all var(--transition-fast); border: 0.5px solid var(--border-default); }
.day-pill:has(input:checked) { background: rgba(194,144,47,0.12); border-color: var(--color-signal-blue); color: var(--color-signal-blue); font-weight: var(--weight-medium); }
.day-pill input { accent-color: var(--color-signal-blue); }
.dl-cpl-pill:has(input:checked), .dl-exp-pill:has(input:checked) { background: rgba(196,106,74,0.08); border-color: var(--color-ember); color: var(--color-ember); font-weight: var(--weight-medium); }
.dl-cpl-pill input, .dl-exp-pill input { accent-color: var(--color-ember); }

/* ── Service estado badges ── */
.estado-badge { padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; display: inline-block; }
.est-disponible { background: rgba(194,144,47,0.08); color: var(--color-arc-blue); }
.est-asignado { background: rgba(196,106,74,0.08); color: var(--color-ember); }
.est-procesando { background: rgba(194,144,47,0.08); color: var(--color-signal-blue); }
.est-terminado { background: rgba(107,144,128,0.08); color: var(--color-fern); }
.est-pagado { background: rgba(212,168,67,0.08); color: var(--color-ring-blue); }

/* ── Role badges ── */
.role-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.role-admin { background: rgba(181,68,60,0.08); color: var(--color-coral); }
.role-manager { background: rgba(196,106,74,0.08); color: var(--color-ember); }
.role-employee { background: rgba(107,144,128,0.08); color: var(--color-fern); }

/* ── Details / expediente accordion ── */
.employee-detail-modal {
  width: min(1000px, calc(100vw - 40px));
  background: var(--surface-page);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}
.employee-detail-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(194, 144, 47, 0.28), transparent 28%),
    linear-gradient(135deg, #172033 0%, #253553 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.detail-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.detail-info-flex {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}
.employee-detail-meta {
  flex-wrap: wrap;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.7fr);
  gap: var(--space-5);
  align-items: start;
}
.employee-detail-card {
  border: 0.5px solid var(--border-default) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045);
}
.employee-detail-card > h4,
.employee-detail-card > div:first-child h4 {
  padding-bottom: var(--space-3);
  border-bottom: 0.5px solid var(--border-light);
}
.detail-org-list > div,
.detail-personal-grid > div,
.detail-stats-grid > div {
  min-width: 0;
}
.detail-personal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}
.detail-personal-grid > div > div,
.detail-stats-grid > div > div,
.detail-org-list > div > div {
  overflow-wrap: anywhere;
}
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.detail-stats-grid > div {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}
.detail-financial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.detail-financial-grid > div {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  border: 0.5px solid var(--border-light);
}
.employee-reference-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.employee-reference-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  border: 0.5px solid var(--border-light);
  min-width: 0;
}
.employee-reference-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.employee-reference-card__details {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.employee-reference-card__details span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}
.employee-reference-card__tag {
  width: fit-content;
  margin-top: var(--space-1);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-active);
  color: var(--color-signal-blue);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#det-deductions-panel {
  margin-top: var(--space-5) !important;
  background: var(--surface-elevated) !important;
  border: 0.5px solid var(--border-default) !important;
}

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-financial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .employee-detail-modal { width: calc(100vw - 16px); }
  .employee-detail-hero { padding: var(--space-5) !important; }
  .detail-grid { padding: var(--space-4) !important; }
  .employee-financial-section { padding: 0 var(--space-4) var(--space-5) !important; }
  .employee-financial-card { padding: var(--space-4) !important; }
  .employee-reference-list { grid-template-columns: 1fr; }
  #det-deductions-panel { padding: var(--space-4) !important; }
}

.expediente-summary::-webkit-details-marker { display: none; }
details[open] .expediente-chevron { transform: rotate(180deg); }
details:not([open]) summary { border-bottom: none; }

/* ── Calendar ── */
.calendar-container { background: var(--surface-card); border-radius: var(--radius-xl); padding: var(--space-4); border: 0.5px solid var(--border-light); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-day-head { text-align: center; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); padding: var(--space-1) 0; text-transform: uppercase; }
.calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); border-radius: var(--radius-sm); cursor: default; transition: all var(--transition-fast); border: 0.5px solid transparent; color: var(--text-secondary); }
.calendar-day.empty { visibility: hidden; }
.calendar-day.today { background: var(--surface-active); color: var(--color-signal-blue); font-weight: var(--weight-medium); }
.calendar-day.holiday { background: rgba(107,144,128,0.06); color: var(--color-fern); font-weight: var(--weight-medium); cursor: pointer; }
.calendar-day.holiday:hover { background: rgba(107,144,128,0.12); }

/* ── Integrity/alert banner ── */
.alert-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 0.5px solid; margin-bottom: var(--space-4); }
.alert-banner--warning { background: rgba(196,106,74,0.06); border-color: rgba(196,106,74,0.15); }
.alert-banner--danger { background: rgba(181,68,60,0.06); border-color: rgba(181,68,60,0.15); }
.alert-banner--info { background: rgba(194,144,47,0.06); border-color: rgba(194,144,47,0.15); }
.alert-banner__icon { width: 16px; height: 16px; flex-shrink: 0; }
.alert-banner--warning .alert-banner__icon { color: var(--color-ember); }
.alert-banner--danger .alert-banner__icon { color: var(--color-coral); }
.alert-banner--info .alert-banner__icon { color: var(--color-signal-blue); }
.alert-banner__text { flex: 1; font-size: var(--text-sm); color: var(--text-secondary); }
.integrity-notice { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); background: rgba(196,106,74,0.06); border: 0.5px solid rgba(196,106,74,0.15); }
.integrity-notice i { color: var(--color-ember); }
.integrity-notice-text { flex: 1; font-size: var(--text-sm); color: var(--text-secondary); }
.integrity-notice-btn { background: var(--color-ember); color: var(--color-snow); border: none; padding: 4px 12px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--transition-fast); }
.integrity-notice-btn:hover { opacity: 0.85; }

/* ── Premium profile card ── */
.premium-profile-card { background: var(--surface-card); color: var(--text-primary); border: 0.5px solid var(--border-default); text-align: center; border-radius: var(--radius-xl); }

/* ── Portal grid ── */
.portal-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); }

.portal-employment-context {
  padding: 22px 24px 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(194, 144, 47, .16), transparent 32%),
    linear-gradient(135deg, #fffdf8 0%, #fff 55%, #f7faf8 100%);
  border-bottom: 1px solid var(--border);
}
.portal-employment-context__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.portal-employment-context__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #9a6b12;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.portal-employment-context h4 { margin: 0; color: var(--text-main); font-size: 1rem; }
.portal-employment-context p { margin: 4px 0 0; color: var(--text-muted); font-size: .76rem; }
.portal-employment-count {
  flex: none;
  padding: 6px 10px;
  border: 1px solid rgba(194, 144, 47, .24);
  border-radius: 999px;
  background: rgba(255, 248, 231, .82);
  color: #7b5510;
  font-size: .7rem;
  font-weight: 800;
}
.portal-employment-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.portal-employment-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid #e4ded2;
  border-radius: 11px;
  background: rgba(255,255,255,.86);
  color: #625b50;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
  transition: .18s ease;
}
.portal-employment-tab:hover { border-color: #c2902f; color: #805a13; transform: translateY(-1px); }
.portal-employment-tab.is-active {
  border-color: #1c604f;
  background: #153f35;
  color: #fff;
  box-shadow: 0 8px 20px rgba(21, 63, 53, .16);
}
.portal-employment-overview { padding: 24px; background: #f8f7f3; }
.portal-employment-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #dce7e2;
  border-radius: 16px;
  background: #fff;
}
.portal-employment-total span { color: var(--text-muted); font-size: .73rem; }
.portal-employment-total strong { display: block; color: #087f5b; font-size: 1.4rem; }
.portal-employment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.portal-employment-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #e3dfd6;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(39, 34, 25, .055);
}
.portal-employment-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #c2902f, #1d7561);
}
.portal-employment-card__company { margin: 0; color: var(--text-main); font-size: .95rem; }
.portal-employment-card__role { margin: 3px 0 15px; color: var(--text-muted); font-size: .7rem; }
.portal-employment-card__amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.portal-employment-card__amounts span { display: block; color: var(--text-muted); font-size: .64rem; text-transform: uppercase; }
.portal-employment-card__amounts strong { color: var(--text-main); font-size: .9rem; }
.portal-employment-card__timeline { height: 7px; margin: 16px 0 7px; overflow: hidden; border-radius: 20px; background: #ecebe7; }
.portal-employment-card__timeline span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c2902f, #1d7561); }
.portal-employment-card__footer { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: .65rem; }
.portal-employment-card__open {
  border: 0;
  background: transparent;
  color: #17634f;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.portal-employment-skeleton { min-height: 185px; animation: portalPulse 1.2s ease-in-out infinite alternate; background: #eeeae2; }
@keyframes portalPulse { to { opacity: .48; } }

@media (max-width: 720px) {
  .portal-employment-context__heading, .portal-employment-total { flex-direction: column; }
  .portal-employment-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   26. RESPONSIVE — desktop-first, 3 breakpoints
   Tablet ≤1024px | Mobile ≤768px | Small ≤480px
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px): sidebar off-canvas, bottom nav visible ── */
@media (max-width: 1024px) {
  /* Sidebar slides in from left */
  .sidebar {
    position: fixed;
    left: calc(-1 * var(--sidebar-width));
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 500;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s var(--ease-out);
  }
  body.sidebar-open .sidebar { transform: translateX(var(--sidebar-width)); }
  body.sidebar-open { overflow: hidden; }

  .sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 499; display: none;
  }
  .sidebar-overlay.active { display: block; }

  /* Mobile bottom nav */
  .mobile-bottom-nav { display: flex; }

  /* Hamburger toggle */
  #mobile-sidebar-toggle,
  .mobile-sidebar-toggle,
  .mobile-toggle-btn {
    display: flex; width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--text-primary); cursor: pointer;
    border-radius: var(--radius-sm); flex-shrink: 0;
  }
  #mobile-sidebar-toggle:hover,
  .mobile-sidebar-toggle:hover,
  .mobile-toggle-btn:hover { background: var(--surface-hover); }

  /* Header */
  .page-header {
    padding: 0 var(--space-4);
    height: 52px;
    border-bottom: 0.5px solid var(--border-default);
  }
  .page-heading { font-size: var(--text-base); }
  .header-search { display: none; }
  .user-profile__info, .user-info { display: none; }

  /* Content area */
  .content-area,
  .content-area-scroll {
    padding: var(--space-4) var(--space-4) 120px;
  }

  /* KPI grid: 2 columns */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  /* Login */
  .login-visual, .login-visual-panel { display: none; }
  #login-section {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .login-container { min-height: 100%; height: auto; }
  .login-form-panel {
    padding: var(--space-4);
    min-height: 100vh;
    min-height: 100dvh;
    background:
      radial-gradient(circle at 90% 8%, rgba(194,144,47,.12), transparent 30%),
      var(--surface-page);
  }
  .login-card {
    background: var(--surface-card);
    border: 0.5px solid var(--border-default);
    box-shadow: var(--shadow-lg);
  }
  .mobile-logo {
    display: block;
    width: min(210px, 68%);
    height: auto !important;
    margin: 0 0 var(--space-5) !important;
    filter: none !important;
  }

  /* Portal grid collapses */
  .portal-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .portal-sidebar-col,
  .portal-main-col { width: 100%; }

  /* Forms single column */
  .form-grid--2, .form-grid--3, .form-grid--4 { grid-template-columns: 1fr; }

  /* Dashboard */
  .dashboard-split, .dashboard-grid-middle { grid-template-columns: 1fr; }

  /* Company grid */
  .company-grid { grid-template-columns: 1fr; }

  /* Schedules */
  .schedules-grid { display: flex; flex-direction: column; gap: var(--space-4); }
}

/* ── Mobile (≤768px): single column, table cards, full-width ── */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { padding: var(--space-4); }

  /* Content */
  .content-area,
  .content-area-scroll {
    padding: var(--space-3) var(--space-3) 100px;
  }

  /* Tables → cards — catches both .table-wrap and direct table */
  .table-container { border: none; background: transparent; overflow-x: visible; }
  .table-wrap { overflow-x: visible; }
  .table-wrap table,
  .table-container > table { border-collapse: separate; border-spacing: 0; }
  .table-wrap thead,
  .table-container > table thead { display: none; }
  .table-wrap tbody,
  .table-container > table tbody { display: flex; flex-direction: column; gap: var(--space-3); }
  .table-wrap tr,
  .table-container > table tr {
    display: flex; flex-direction: column;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 0.5px solid var(--border-default);
  }
  .table-wrap tr:hover,
  .table-container > table tr:hover { background: var(--surface-card); }
  .table-wrap td,
  .table-container > table td {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-2) 0; border: none; gap: var(--space-2);
    text-align: right; font-size: var(--text-sm);
    border-bottom: 0.5px solid var(--border-light);
  }
  .table-wrap td:last-child,
  .table-container > table td:last-child { border-bottom: none; }
  .table-wrap td::before,
  .table-container > table td::before {
    content: attr(data-label);
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.05em; flex-shrink: 0; text-align: left;
  }

  /* Modals full-width */
  .modal, .modal-content {
    margin: var(--space-2);
    width: calc(100% - var(--space-4));
    max-height: 85vh;
    border-radius: var(--radius-xl);
  }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-overlay.active { align-items: center; }
  .modal__header, .modal-header { padding: var(--space-4); }
  .modal__body { padding: var(--space-4); }
  .modal__footer {
    padding: var(--space-3) var(--space-4);
    flex-direction: column; gap: var(--space-2);
  }
  .modal__footer .btn, .modal__footer button { width: 100%; }

  /* Page header */
  .page-heading { font-size: var(--text-base); }

  /* KPI values smaller */
  .kpi-card__value, .stat-value { font-size: var(--text-2xl); }

  /* Detail grids single column */
  .detail-grid, .detail-personal-grid,
  .detail-financial-grid, .detail-stats-grid {
    grid-template-columns: 1fr;
  }
  .detail-header-flex { flex-direction: column; gap: var(--space-3); }
  .detail-info-flex { flex-direction: column; align-items: flex-start; }

  /* Portal */
  .portal-financial-dashboard { grid-template-columns: 1fr; }

  /* Buttons full width in mobile */
  .btn-primary, .btn--primary, .btn--secondary,
  .btn-primary-white { width: 100%; justify-content: center; }

  /* Sidebar overlay darker for mobile */
  .sidebar-overlay.active { background: rgba(0,0,0,0.6); }
}

/* ── Small phones (≤480px) ── */
@media (max-width: 480px) {
  .page-heading { font-size: 0.938rem; }
  .section-heading { font-size: var(--text-lg); }
  .kpi-card__value, .stat-value { font-size: var(--text-xl); }
  .content-area,
  .content-area-scroll { padding: var(--space-2) var(--space-2) 100px; }

  /* Tighter cards */
  .card { padding: var(--space-4); }
  .kpi-card { padding: var(--space-3); }

  /* Even smaller modals */
  .modal, .modal-content { border-radius: var(--radius-lg); }

  /* Compact tables */
  .table-wrap tr { padding: var(--space-3); }

  /* Button sizes */
  .btn, .btn-primary, .btn--primary { font-size: var(--text-sm); padding: 8px 12px; }
}

/* ── Large desktop (≥1440px): wider charts ── */
@media (min-width: 1440px) {
  .dashboard-split, .dashboard-grid-middle { grid-template-columns: 2fr 1fr; }
  .content-area > .app-view,
  .content-area-scroll > .app-view { max-width: 1280px; }
}

@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .dashboard-split, .dashboard-grid-middle { grid-template-columns: 1fr; }
  .content-area, .content-area-scroll { padding: var(--space-3) var(--space-3) 120px; }
  .table-wrap thead { display: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr { display: block; }
  .table-wrap tr { background: var(--surface-card); border-radius: var(--radius-xl); padding: var(--space-3); margin-bottom: var(--space-2); border: 0.5px solid var(--border-default); }
  .table-wrap td { padding: var(--space-1) 0; border: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
  .table-wrap td::before { content: attr(data-label); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
  .modal, .modal-content { margin: var(--space-3); width: calc(100% - var(--space-6)); max-height: 80vh; border-radius: var(--radius-xl); }
  .modal__header, .modal-header { padding: var(--space-4); }
  .modal__body { padding: var(--space-4); }
  .modal__footer { padding: var(--space-3) var(--space-4); flex-direction: column; }
  .modal__footer .btn { width: 100%; }
  .user-profile__info, .user-info { display: none; }
  .portal-grid { display: block; }
  .portal-sidebar-col, .portal-main-col { width: 100%; margin-bottom: var(--space-6); }
}

@media (max-width: 480px) {
  .page-heading { font-size: var(--text-base); }
  .kpi-card__value, .stat-value { font-size: var(--text-2xl); }
  .content-area, .content-area-scroll { padding: var(--space-2) var(--space-2) 120px; }
}

/* ═══════════════════════════════════════════════════════════════
   28. PORTAL INFO ROWS — clean employee data display
   ═══════════════════════════════════════════════════════════════ */
.portal-info-rows { display: flex; flex-direction: column; }
.portal-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 0.5px solid var(--border-light);
}
.portal-info-row:last-child { border-bottom: none; }
.portal-info-label { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--text-muted); flex-shrink: 0; }
.portal-info-value { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); text-align: right; word-break: break-all; max-width: 60%; }

@media (max-width: 768px) {
  .portal-info-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .portal-info-value { text-align: left; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   29. LIGHT THEME NORMALIZATION
   Ensures all surfaces use light tokens consistently.
   ═══════════════════════════════════════════════════════════════ */

/* Surfaces */
.card, .modal, .modal-content, .modal-body, .detail-grid,
.premium-profile-card, .chart-box, .side-stat-card, .bottom-section,
.expediente-summary, details summary, .modal-header, .modal__header,
.modal__footer, .detail-personal-grid, .detail-financial-grid,
.info-grid-simple, .info-grid-simple > div, #payroll-progress-section {
  background: var(--surface-card);
}

/* Tables */
.table-container, .table-container table,
details.table-container, details.table-container summary {
  background: var(--surface-card);
}
th, thead th { background: #F5F1EC; }
tr:hover td { background: var(--surface-hover); }

/* Inputs */
input, select, textarea {
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-brand);
}

/* Primary buttons — gold */
.btn-primary, .btn--primary { background: var(--color-signal-blue); color: var(--text-inverse); border: none; }
.btn-primary:hover, .btn--primary:hover { background: var(--color-iris); }
.btn-primary-white { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }
.btn-primary-white:hover { background: var(--surface-hover); }

/* ── Employee table avatar ── */
.emp-info { display: flex; align-items: center; gap: 12px; }
.emp-avatar { width: 36px; height: 36px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.emp-name { font-weight: var(--weight-medium); color: var(--text-primary); display: block; font-size: var(--text-sm); }
.emp-code { font-size: var(--text-xs); color: var(--text-muted); }
.badge-incomplete { background: rgba(196,106,74,0.10); color: var(--color-ember); font-size: 0.563rem; font-weight: var(--weight-medium); padding: 2px 6px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; display: inline-flex; align-items: center; }
.sensitive-value { font-family: var(--font-mono); }
.badge-status { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border-radius: var(--radius-lg); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.badge-active, .badge-status.badge-active { background: rgba(107,144,128,0.12); color: var(--color-fern); }
.badge-inactive, .badge-status.badge-inactive { background: rgba(181,68,60,0.10); color: var(--color-coral); }

/* ═══════════════════════════════════════════════════════════════
   27. GLOBAL LAYOUT NORMALIZATION
   Handles ALL page structures: new (app-layout), old (direct),
   standalone, and dashboard-body patterns.
   ═══════════════════════════════════════════════════════════════ */

/* Ensure body is always full-height flex for sidebar+main layouts */
body.dashboard-body,
body:has(.sidebar),
body:has(#main-app-section) {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Main app section — visible when JS sets display */
#main-app-section {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#main-app-section[style*="display:block"],
#main-app-section[style*="display: flex"],
#main-app-section[style*="display:flex"] {
  display: flex;
}

/* App layout wrapper (new pattern) */
.app-layout {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Sidebar — works in any parent context */
.sidebar {
  width: var(--sidebar-width);
  height: 100%;
  background: var(--surface-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: var(--z-sidebar);
  position: relative;
  border-right: 0.5px solid var(--border-default);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar container for shared component */
#sidebar-container {
  display: flex;
  height: 100%;
  flex-shrink: 0;
}

/* Main content — fills remaining space */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Scrolling content area — handles overflow */
.content-area,
.content-area-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--space-6) var(--space-8);
  scroll-behavior: smooth;
}

/* View containers */
.app-view { display: none; }
.app-view.active { display: block; }
.content-area > .app-view,
.content-area-scroll > .app-view {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  animation: fadeInUp 0.4s var(--ease-out);
}

/* Header title area */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Section heading — weight 400 whisper-style */
.section-heading,
.page-heading {
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  color: var(--text-primary);
  letter-spacing: -0.025em;
}
.page-subheading {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Force old sidebar logo text to use new tokens */
.logo-text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.logo-text img {
  display: inline-block;
  vertical-align: middle;
}

/* Fix tables in legacy pages — ensure dark background */
.table-container table {
  background: var(--surface-card);
}

/* Fix any isolated body content */
body > .main-content:only-child {
  margin: 0;
}

/* Fix pages that put content directly in body without wrappers */
body > .sidebar + .main-content {
  height: 100vh;
}

/* ================================================================
   30. RESPONSIVE APP SHELL
   Unifies shared-sidebar pages and legacy standalone screens.
   ================================================================ */
body.has-shared-sidebar {
  display: grid !important;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.has-shared-sidebar > #sidebar-container {
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
}
body.has-shared-sidebar > header {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: var(--header-height);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: rgba(250,248,245,0.92);
  border-bottom: 0.5px solid var(--border-default);
  backdrop-filter: blur(12px);
  z-index: var(--z-header);
}
.bottom-nav-item:focus-visible { outline:3px solid color-mix(in srgb, var(--color-signal-blue) 45%, transparent); outline-offset:-3px; }
body:has(#modalEmpleado.active) .mobile-bottom-nav { z-index: 1100; pointer-events:none; }

@media (min-width: 1025px) {
  /* Some legacy pages used an off-canvas sidebar at every viewport size. */
  #sidebar-container .sidebar,
  #main-app-section > #sidebar-container .sidebar {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    height: 100% !important;
  }
}
body.has-shared-sidebar > nav:not(.mobile-bottom-nav) { display: none; }
body.has-shared-sidebar > main,
body.has-shared-sidebar > .container {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  max-width: none;
  overflow: auto;
  padding: var(--space-6);
  scrollbar-gutter: stable;
}

/* Fluid defaults for content authored before the shared component system. */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.header-content,
.content-header,
.section-header,
.card-header,
.toolbar,
.filters-row,
.filter-bar,
.header-actions-group { min-width: 0; }
.header-actions,
.header-actions-group,
.toolbar,
.filters-row,
.filter-bar { flex-wrap: wrap; }
.card,
.kpi-card,
.chart-card,
.modal-content,
.form-group { min-width: 0; }
canvas, video, iframe { max-width: 100%; }
input, select, textarea { max-width: 100%; }

@media (max-width: 1024px) {
  /* The sidebar mount must not reserve its desktop width in the mobile flex shell. */
  #sidebar-container {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    overflow: visible !important;
    z-index: 500;
  }
  .app-layout {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
  }
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }
  .main-content > header {
    min-height: 56px;
    padding-inline: var(--space-4);
  }
  #main-app-section {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /* Mobile navigation is the primary control; the desktop sidebar stays desktop-only. */
  #mobile-sidebar-toggle,
  .mobile-sidebar-toggle,
  .mobile-toggle-btn { display: none !important; }
  body.sidebar-open { overflow: auto; }
  body.sidebar-open .sidebar { transform: translateX(-105%); }
  .sidebar-overlay.active { display: none !important; }

  body.has-shared-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  body.has-shared-sidebar > #sidebar-container {
    position: fixed;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    z-index: 500;
  }
  body.has-shared-sidebar > header,
  body.has-shared-sidebar > main,
  body.has-shared-sidebar > .container {
    grid-column: 1;
  }
  body.has-shared-sidebar > header {
    padding-inline: var(--space-4);
    min-height: 56px;
  }
  body.has-shared-sidebar > main,
  body.has-shared-sidebar > .container {
    padding: var(--space-4) var(--space-4) calc(96px + env(safe-area-inset-bottom));
  }

  .sidebar {
    left: 0;
    width: min(300px, 86vw);
    max-width: 86vw;
    transform: translateX(-105%);
    transition: transform 260ms var(--ease-out);
    box-shadow: 20px 0 60px rgba(0,0,0,0.20);
    overflow: hidden;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-brand { padding: var(--space-5) var(--space-4) var(--space-4); }
  .sidebar-scroll { padding-bottom: var(--space-3); }
  .sidebar-menu { gap: 3px; }
  .sidebar .nav-item { min-height: 42px; padding: 10px var(--space-3); font-size: var(--text-base); }
  .sidebar .nav-item i, .sidebar .nav-item svg { width: 18px; height: 18px; }

  .dashboard-split,
  .dashboard-grid-middle,
  .portal-grid,
  .attendance-stats,
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  html { overflow-x: hidden; }
  body { min-width: 0; }

  body.has-shared-sidebar > header {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }
  body.has-shared-sidebar > header .logo-container img { max-width: 132px; height: 30px !important; }
  body.has-shared-sidebar > main,
  body.has-shared-sidebar > .container,
  .content-area,
  .content-area-scroll {
    padding-inline: var(--space-3);
  }

  .header-content,
  .content-header,
  .section-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
  }
  .header-actions-group,
  .toolbar,
  .filters-row,
  .filter-bar {
    width: 100%;
    align-items: stretch;
  }
  .header-actions-group > *,
  .toolbar > *,
  .filters-row > *,
  .filter-bar > * { min-width: 0; flex: 1 1 160px; }

  .dashboard-split,
  .dashboard-grid-middle,
  .portal-grid,
  .attendance-stats,
  .stats-grid,
  .kpi-grid,
  .company-grid { grid-template-columns: 1fr !important; }

  /* Tables remain real tables: reliable even when old markup has no data-label. */
  .table-container,
  .table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
  }
  .table-container > table,
  .table-wrap > table,
  .table-wrap table {
    display: table !important;
    width: 100%;
    min-width: 680px;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  .table-container thead,
  .table-wrap thead { display: table-header-group !important; }
  .table-container tbody,
  .table-wrap tbody { display: table-row-group !important; }
  .table-container tr,
  .table-wrap tr {
    display: table-row !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .table-container th,
  .table-container td,
  .table-wrap th,
  .table-wrap td {
    display: table-cell !important;
    padding: 11px 12px !important;
    text-align: left !important;
    white-space: nowrap;
    border-bottom: 0.5px solid var(--border-light) !important;
  }
  .table-container td::before,
  .table-wrap td::before { content: none !important; }

  .modal-overlay,
  .custom-modal-overlay { padding: var(--space-3) !important; }
  .modal,
  .modal-content,
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--space-6)) !important;
    margin: 0 !important;
    overflow-y: auto;
  }

  .mobile-bottom-nav {
    left: 50%;
    width: min(100%, 640px);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    justify-content: stretch;
    padding: 7px max(var(--space-2), env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.94);
    border: 0.5px solid var(--border-default);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 35px rgba(28,25,23,0.10);
    backdrop-filter: blur(18px) saturate(1.2);
  }
  .bottom-nav-item {
    min-width: 0;
    min-height: 50px;
    padding: 5px 2px;
    gap: 3px;
    border-radius: var(--radius-lg);
  }
  .bottom-nav-item i,
  .bottom-nav-item svg {
    width: 19px;
    height: 19px;
    transition: transform var(--transition-fast);
  }
  .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.54rem;
    letter-spacing: 0.035em;
    white-space: nowrap;
  }
  .bottom-nav-item.active {
    color: var(--color-iris);
    background: var(--surface-active);
  }
  .bottom-nav-item.active::before { display: none; }
  .bottom-nav-item.active i,
  .bottom-nav-item.active svg { transform: translateY(-1px); }
}

@media (max-width: 480px) {
  body.has-shared-sidebar > main,
  body.has-shared-sidebar > .container,
  .content-area,
  .content-area-scroll { padding-inline: var(--space-2); }

  .header-actions { gap: var(--space-1); }
  .header-actions .icon-btn,
  .header-actions .btn--icon { width: 34px; height: 34px; }
  .user-profile { padding: var(--space-1); }
  .profile-dropdown {
    position: fixed;
    top: 60px;
    right: var(--space-2);
    left: var(--space-2);
    width: auto;
  }
  .form-grid,
  .form-grid--2,
  .form-grid--3,
  .form-grid--4 { grid-template-columns: 1fr !important; }
}

/* Module-level responsive coverage for legacy pages. */
@media (max-width: 1024px) {
  .config-layout,
  .access-grid,
  .report-grid,
  .chart-grid,
  .payroll-grid,
  .payroll-summary-grid,
  .payroll-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-4) !important;
  }
  .config-layout,
  .payroll-grid,
  .payroll-details-grid { grid-template-columns: 1fr !important; }
  .config-card { position: static !important; }
  .config-nav {
    flex-direction: row !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
  }
  .config-nav-item { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 768px) {
  .config-layout,
  .access-grid,
  .report-grid,
  .chart-grid,
  .stats-row,
  .payroll-grid,
  .payroll-summary-grid,
  .payroll-details-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  .filter-header,
  main > div[style*="justify-content: space-between"],
  main > section[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
  }
  .filter-header > div,
  main > div[style*="justify-content: space-between"] > div {
    min-width: 0;
    flex-wrap: wrap;
  }

  .tabs-navigation,
  .tabs-reports,
  .tabs,
  .tab-list {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    gap: var(--space-4) !important;
  }
  .tabs-navigation::-webkit-scrollbar,
  .tabs-reports::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .tab-list::-webkit-scrollbar { display: none; }
  .tab-btn,
  .tab-report { flex: 0 0 auto; }

  .step-indicator,
  .steps {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    align-items: center;
  }
  .step { min-width: max-content; }
  .step-indicator .line { min-width: 28px; }

  .otp-input-container { gap: 6px !important; }
  .otp-digit {
    width: clamp(38px, 12vw, 50px) !important;
    height: clamp(48px, 14vw, 60px) !important;
    font-size: 1.2rem !important;
  }

  .section-card,
  .filter-section,
  .table-responsive,
  .schedule-card { padding: var(--space-4) !important; }
  .desc-truncate { max-width: min(52vw, 300px) !important; }

  .chart-container,
  .chart-wrapper,
  .map-container { min-height: 280px; }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .stat-card-colored { padding: var(--space-4) !important; }
  .section-card,
  .filter-section,
  .table-responsive,
  .schedule-card { padding: var(--space-3) !important; }
}

/* ================================================================
   31. MOBILE MODULE HUB — organizational navigation
   ================================================================ */
.more-menu-container {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: var(--space-8);
}
.more-menu-logo-box {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-2xl);
  color: var(--text-inverse);
  background:
    radial-gradient(circle at 85% 15%, rgba(212,168,67,.34), transparent 34%),
    linear-gradient(135deg, #24262f, var(--surface-sidebar));
  box-shadow: var(--shadow-lg);
}
.more-menu-logo-box::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  right: -56px;
  top: -72px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.more-menu-logo-box > * { position: relative; z-index: 1; color: var(--text-inverse) !important; }
.more-company-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.more-company-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.more-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
  background: rgba(255,255,255,.96);
}
.more-company-logo span {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse);
}
.more-company-copy { min-width: 0; }
.more-company-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse);
  letter-spacing: -0.025em;
}
.more-company-copy > span {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.62);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.more-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.more-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 2px var(--space-1);
  border-bottom: 0.5px solid var(--border-light);
}
.more-section-title:first-child { padding-top: 0; }
.more-section-title span {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.more-section-title small { font-size: var(--text-xs); color: var(--text-muted); }
.more-item {
  position: relative;
  min-width: 0;
  min-height: 102px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.more-item:hover,
.more-item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-signal-blue);
  box-shadow: var(--shadow-md);
}
.more-item i,
.more-item svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: var(--radius-md);
  color: var(--color-iris);
  background: var(--primary-glass);
}
.more-item span {
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--text-primary);
}
.more-item.logout {
  border-color: rgba(181,68,60,.18) !important;
  background: rgba(181,68,60,.055) !important;
}

#module-development-screen { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:24px; background:rgba(250,248,245,.96); backdrop-filter:blur(16px); }
.module-development-card { width:min(520px,100%); padding:40px; text-align:center; background:var(--surface-card); border:1px solid var(--border-default); border-radius:24px; box-shadow:var(--shadow-modal); }
.module-development-icon { font-size:42px; margin-bottom:14px; }
.module-development-card > span { font-size:.65rem; font-weight:700; letter-spacing:.16em; color:var(--color-signal-blue); }
.module-development-card h1 { margin:8px 0 12px; font-size:var(--text-3xl); }
.module-development-card p { color:var(--text-secondary); line-height:1.7; margin-bottom:24px; }
.module-development-card a { display:inline-flex; padding:10px 18px; border-radius:10px; background:var(--color-signal-blue); color:#fff; font-weight:600; }

@media (max-width: 768px) {
  #view-more-menu.active { padding-top: var(--space-1); }
  .more-menu-container { padding: 0 2px var(--space-6); }
  .more-menu-logo-box { min-height: 104px; margin-bottom: var(--space-3); padding: var(--space-4); }
  .more-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .more-section-title { padding-top: var(--space-5); }
  .more-section-title small { display: none; }
  .more-item { min-height: 94px; padding: var(--space-3); gap: var(--space-3); }
}

@media (max-width: 360px) {
  .more-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.module-hidden-by-platform {
    display: none !important;
}

/* Employee portal: attendance and requests */
#view-employee-portal,
#view-employee-portal .portal-grid,
#view-employee-portal .portal-main-col {
  min-width: 0;
  max-width: 100%;
}

.portal-section-card {
  margin-top: var(--space-5) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 18px !important;
  background: var(--surface-card) !important;
  box-shadow: 0 10px 28px rgba(32, 25, 20, .045) !important;
}
.portal-section-summary {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 38px 20px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px !important;
  cursor: pointer;
  list-style: none;
  background: var(--surface-card) !important;
}
.portal-section-copy {
  min-width: 0;
}
.portal-section-copy h3,
.portal-section-copy p {
  overflow-wrap: anywhere;
}
.portal-section-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.portal-section-icon--attendance {
  color: #16794b;
  background: #e9f7ef;
}
.portal-section-icon--requests {
  color: #9a5a13;
  background: #fff4dc;
}
.portal-section-refresh.btn-primary-white {
  position: relative;
  z-index: 2;
  width: 38px !important;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 11px;
}
.portal-section-refresh svg {
  width: 15px;
  height: 15px;
}
.portal-section-refresh:hover svg {
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.portal-attendance-calendar {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 18px 20px 12px;
}
.portal-attendance-calendar > p {
  grid-column: 1 / -1;
}
.portal-attendance-day {
  position: relative;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  aspect-ratio: 1;
}
.portal-attendance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 2px 20px 12px;
  color: var(--text-muted);
  font-size: .7rem;
}
.portal-attendance-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.portal-attendance-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.att-dot--present{background:#22c55e;}
.att-dot--free{background:#6366f1;}
.att-dot--missing{background:#ef4444;}
.att-dot--weekend{background:#cbd5e1;}
.portal-attendance-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 18px;
  color: var(--text-secondary);
  font-size: .76rem;
}
.portal-attendance-stats span {
  padding: 6px 9px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface-page);
}

.portal-requests-content {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.portal-requests-table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
}
.portal-requests-table th:nth-child(1){width:20%;}
.portal-requests-table th:nth-child(2){width:18%;}
.portal-requests-table th:nth-child(3){width:44%;}
.portal-requests-table th:nth-child(4){width:18%;}
.portal-requests-table td {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .portal-section-card {
    margin-top: var(--space-3) !important;
    border-radius: 16px !important;
  }
  .portal-section-summary {
    grid-template-columns: 38px minmax(0, 1fr) 36px 18px;
    gap: 9px;
    padding: 15px 14px !important;
  }
  .portal-section-icon {
    width: 38px;
    height: 38px;
  }
  .portal-section-copy h3 { font-size: .9rem !important; line-height: 1.15; }
  .portal-section-copy p { margin-top: 3px !important; font-size: .7rem !important; line-height: 1.35; }
  .portal-section-refresh.btn-primary-white {
    width: 36px !important;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .portal-attendance-calendar {
    gap: 6px;
    padding: 15px 14px 10px;
  }
  .portal-attendance-day {
    border-radius: 9px !important;
    font-size: .7rem !important;
  }
  .portal-attendance-legend { padding: 2px 14px 12px; gap: 7px 12px; }
  .portal-attendance-stats { padding: 0 14px 16px; gap: 6px; }
  .portal-attendance-stats span { flex: 1 1 calc(50% - 6px); text-align: center; }

  .portal-requests-content {
    overflow: visible;
    padding: 12px;
  }
  .portal-requests-table,
  .portal-requests-table tbody,
  .portal-requests-table tr,
  .portal-requests-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .portal-requests-table thead { display: none !important; }
  .portal-requests-table tbody {
    display: grid !important;
    gap: 10px;
  }
  .portal-requests-table tr {
    margin: 0 !important;
    padding: 13px !important;
    overflow: hidden;
    border: 1px solid var(--border-default) !important;
    border-radius: 14px !important;
    background: var(--surface-card) !important;
    box-shadow: 0 4px 14px rgba(32,25,20,.04);
  }
  .portal-requests-table td {
    min-height: 30px;
    padding: 7px 0 !important;
    border: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .portal-requests-table td:not(.card-header-row) {
    display: grid !important;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }
  .portal-requests-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .portal-requests-table td.card-header-row {
    margin-bottom: 3px;
    padding-top: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  .portal-requests-table td.card-header-row::before,
  .portal-requests-table td[colspan]::before { display:none; }
  .portal-requests-table td[colspan] { padding: 24px 12px !important; text-align:center !important; }
  #portal-requests-pagination { padding: 4px 12px 14px; }
}

@media (max-width: 380px) {
  .portal-section-summary {
    grid-template-columns: 36px minmax(0, 1fr) 34px 16px;
    gap: 7px;
    padding: 13px 11px !important;
  }
  .portal-section-icon { width:36px;height:36px; }
  .portal-attendance-calendar { gap:4px;padding-inline:11px; }
  .portal-attendance-stats span { flex-basis:100%; }
}

/* Employee portal — digital identity record */
.portal-documents-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding:22px;
  background:var(--surface-card);
}
.doc-preview-card {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(155deg,#fff 0%,#f8fbfd 100%);
  box-shadow:0 10px 26px rgba(15,23,42,.055);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.doc-preview-card:hover {
  transform:translateY(-2px);
  border-color:#7dd3fc;
  box-shadow:0 14px 32px rgba(14,165,233,.12);
}
.doc-preview-card__image {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1.58/1;
  overflow:hidden;
  background:linear-gradient(135deg,#eef6f9,#f8fafc);
  border-bottom:1px solid var(--border);
}
.doc-preview-card--foto_perfil .doc-preview-card__image { aspect-ratio:1/1; }
.doc-preview-card__image img {
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .25s ease;
}
.doc-preview-card--foto_perfil .doc-preview-card__image img { object-fit:cover; }
.doc-preview-card__image img.is-loaded { opacity:1; }
.doc-preview-card__label {
  display:block;
  padding:12px 14px;
  color:var(--text-main);
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
  text-align:center;
}
@media (max-width:768px) {
  .portal-documents-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px;
  }
  .doc-preview-card--foto_perfil {
    grid-column:1/-1;
    width:min(210px,100%);
    justify-self:center;
  }
}
@media (max-width:420px) {
  .portal-documents-gallery { grid-template-columns:1fr; }
  .doc-preview-card--foto_perfil { grid-column:auto;width:100%; }
  .doc-preview-card--foto_perfil .doc-preview-card__image { aspect-ratio:1.58/1; }
  .doc-preview-card--foto_perfil .doc-preview-card__image img { object-fit:contain; }
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  z-index: 2;
  width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.input-with-icon:has(.password-toggle) input { padding-right: 42px; }
.phone-field-group { display:flex; align-items:stretch; width:100%; }
.phone-field-group select { width:42%; min-width:145px; border:1px solid var(--border); border-right:0; border-radius:10px 0 0 10px; background:var(--surface-card); padding:0 8px; color:var(--text-main); }
.phone-field-group input { flex:1; min-width:0; border-radius:0 10px 10px 0; }