/* 1. Shared brand. Status, warning and error colors retain their meaning. */
app-intranet { --invall-header: 64px; --invall-sidebar: 240px; }
app-intranet, app-intranet input, app-intranet select, app-intranet button {
  font-family: "Segoe UI", Arial, sans-serif; letter-spacing: 0 !important;
}
app-intranet a { color: var(--invall-blue); }
app-intranet a:hover { color: var(--invall-blue-dark); }
app-intranet .selected, app-intranet .txt-blue { color: var(--invall-blue-dark) !important; }
app-intranet .bg-waves {
  background: #edf2ff !important; color: var(--invall-blue-dark) !important;
  text-align: left !important; font-size: 21px; padding: 16px !important;
  border-left: 3px solid var(--invall-blue); border-radius: 0 !important;
}
app-intranet .bg-blue, app-intranet .bg-pink, app-intranet .bg-pink-gradient,
app-intranet .btn-primary, app-intranet .btn-fichar, app-intranet .btn-page.active {
  background: var(--invall-blue) !important; color: #fff !important;
  border-color: var(--invall-blue) !important; box-shadow: none !important;
}
app-intranet .btn:hover { transform: none !important; }
app-intranet .btn:focus-visible { outline: 3px solid #0050ff80; outline-offset: 3px; }
app-intranet .bg-blue:hover:not(:disabled), app-intranet .bg-pink:hover:not(:disabled),
app-intranet .btn-fichar:hover:not(:disabled) { background: var(--invall-blue-dark) !important; }
app-intranet .form-control:focus, app-intranet .form-select:focus {
  border-color: var(--invall-blue) !important; box-shadow: 0 0 0 3px #0050ff20 !important;
}
app-intranet .btn-pagination-arrow, app-intranet .cell-time { color: var(--invall-blue) !important; }
app-intranet .filters-header, app-intranet .results-header { background: #f5f6f8 !important; }
app-intranet .filters-title i, app-intranet .results-title i { color: var(--invall-blue) !important; }
app-intranet .list-title { font-size: 26px !important; letter-spacing: 0 !important; }
app-intranet .filters-card, app-intranet .results-card { border-radius: 6px !important; }

/* 2. One fixed header; sidebar and content begin below it. */
app-intranet > app-header {
  display: block; position: fixed; top: 0; left: 0; right: 0;
  height: var(--invall-header); z-index: 1030; background: #fff;
}
app-header header { position: static !important; height: 64px !important; }
app-header .navbar { flex-wrap: nowrap !important; padding: 0 20px !important; }
app-header .navbar-content { min-width: 0; flex: 1; }
app-header .navbar-brand { margin-right: 20px !important; }
app-header .navbar-brand span { display: inline !important; }
app-header .navbar-brand .invall-logo { width: 44px !important; height: 44px !important; }
app-header .navbar-user { min-width: 0; gap: 16px !important; }
app-header .user-info { min-width: 0; }
app-header .user-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
app-header .navbar-toggler { display: none !important; }
#invall-menu-toggle { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: #fff; color: var(--invall-blue); font-size: 24px; flex-shrink: 0; }
app-intranet .intranet-layout { margin-top: 64px !important; min-height: calc(100vh - 64px) !important; background: var(--invall-background) !important; }
app-intranet .intranet-main { margin-left: 240px !important; min-width: 0; overflow: visible !important; background: var(--invall-background) !important; }
app-menu { --sidebar-width: 240px !important; }
app-menu .sidebar { top: 64px !important; width: 240px !important; z-index: 1020 !important; }
app-menu .sidebar-sticky { padding-top: 12px !important; }
app-menu .nav { flex: 0 0 auto !important; gap: 4px !important; }
app-menu .mt-auto { margin-top: 16px !important; }
app-menu .sidebar .nav-item .nav-link {
  padding: 10px 12px !important; border-left-color: transparent !important;
  background: transparent !important; color: #485261 !important; font-weight: 500 !important;
}
app-menu .sidebar .nav-item .nav-link .feather { color: inherit !important; }
app-menu .sidebar .nav-item .nav-link:not([data-invall-current]) {
  background: transparent !important; color: #485261 !important;
  border-left-color: transparent !important; font-weight: 500 !important;
}
app-menu .sidebar .nav-item .nav-link:not([data-invall-current]) .feather { color: inherit !important; }
app-menu .sidebar .nav-item .nav-link:hover { background: #f0f3f9 !important; }
app-menu .sidebar .nav-item .nav-link[data-invall-current] {
  background: #eaf0ff !important; color: var(--invall-blue-dark) !important;
  border-left-color: var(--invall-blue) !important; font-weight: 600 !important;
}

/* 3. Dashboard: action first, summaries next, compact map last. */
app-home .dashboard-container { padding: 24px !important; gap: 20px !important; min-height: 0 !important; background: transparent !important; }
app-home .dashboard-container::before, app-home .card-fichar::before { display: none !important; }
app-home .dashboard-header { margin-bottom: 0 !important; align-items: center !important; animation: none !important; }
app-home .dashboard-title { font-size: 28px !important; letter-spacing: 0 !important; }
app-home .dashboard-subtitle { font-size: 15px !important; }
app-home .header-time { background: #fff !important; border-left-color: var(--invall-blue) !important; border-radius: 6px !important; padding: 10px 16px !important; }
app-home .time-value { color: var(--invall-blue-dark) !important; font-size: 24px !important; margin-top: 0 !important; }
app-home .dashboard-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; animation: none !important; }
app-home .card { min-width: 0; border-radius: 6px !important; box-shadow: none !important; transform: none !important; }
app-home .card-header { padding: 12px 16px !important; background: #fff !important; }
app-home .card-body { padding: 16px !important; }
app-home .card-fichar { grid-column: 1 !important; grid-row: 1; background: #fff !important; border: 1px solid var(--invall-border) !important; border-top: 3px solid var(--invall-blue) !important; border-image: none !important; }
app-home .card-status { grid-column: 2 !important; grid-row: 1; }
app-home .fichar-body { height: 100%; padding: 20px !important; }
app-home .fichar-icon { animation: none !important; font-size: 26px !important; margin-bottom: 8px !important; }
app-home .fichar-icon, app-home .stat-number { background: none !important; -webkit-text-fill-color: var(--invall-blue) !important; color: var(--invall-blue) !important; }
app-home .fichar-title { font-size: 22px !important; }
app-home .fichar-subtitle { font-size: 14px !important; }
app-home .btn-fichar { margin-top: 16px !important; padding: 10px 32px !important; font-size: 16px !important; transform: none !important; }
app-home .stat-number { font-size: 28px !important; }
app-home .progress-bar { background: var(--invall-blue) !important; }
app-home .card-info { grid-column: auto !important; }
app-home .info-item { gap: 16px; flex-wrap: wrap; }
app-home .info-value { overflow-wrap: anywhere; }
app-home .geolocation-body { padding: 0 !important; }
app-geolocation .geolocation-container { height: auto !important; background: #fff !important; }
app-geolocation .map-wrapper { flex: none !important; }
app-geolocation .map-container { flex: none !important; height: 240px !important; }
app-geolocation .location-info { position: static !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; padding: 12px; }
app-geolocation .info-badge { min-width: 0; border: none !important; padding: 0 !important; box-shadow: none !important; transform: none !important; border-radius: 0 !important; }
app-geolocation .info-badge i { color: var(--invall-blue) !important; font-size: 18px !important; }
app-geolocation .info-label { color: var(--invall-muted) !important; font-size: 10px !important; }
app-geolocation .info-value { font-size: 12px !important; }
app-geolocation .loading-state, app-geolocation .error-state { min-height: 160px !important; }

/* 4. Interior lists and forms. */
app-permisos-user > div:first-child, app-vacaciones-user > div:first-child {
  align-items: flex-start !important; margin: 0 !important; padding: 16px 24px !important;
}
app-permisos-user > div:first-child .btn, app-vacaciones-user > div:first-child .btn {
  margin: 0 !important; padding: 10px 16px !important; box-shadow: none !important;
}
app-permisos-user > hr, app-vacaciones-user > hr { display: none; }
app-intranet .table { font-size: 14px; }
app-intranet .table th { background: #edf0f4; color: #303b4a; padding: 12px 10px; font-size: 12px; vertical-align: middle; }
app-intranet .table td { padding: 10px; vertical-align: middle; }
app-input-filter-range-dates .btn-outline-success,
app-input-filter-range-time .btn-outline-success {
  color: var(--invall-blue) !important; border-color: #a9bce8 !important;
}
app-input-filter-range-dates .btn-outline-success:hover,
app-input-filter-range-time .btn-outline-success:hover { background: #eaf0ff !important; }
.invall-table-scroll { width: 100%; overflow-x: auto; }
.invall-table-scroll > table { min-width: 760px; }
@media (max-width: 1100px) {
  app-home .dashboard-grid { grid-template-columns: minmax(0,1fr) !important; }
  app-home .card-fichar, app-home .card-status, app-home .card-info { grid-column: 1 !important; grid-row: auto; }
}
@media (max-width: 900px) {
  #invall-menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
  app-header .navbar { padding: 0 12px !important; }
  app-header .navbar-content { display: flex !important; position: static !important; flex-direction: row !important; padding: 0 !important; border: 0 !important; width: auto !important; }
  app-header .navbar-user { flex-direction: row !important; justify-content: flex-end; width: 100%; gap: 8px !important; }
  app-header .user-info { display: none !important; }
  app-header .btn-logout { width: 40px !important; height: 40px; padding: 0 !important; justify-content: center; }
  app-header .btn-logout span { display: none !important; }
  app-intranet .intranet-main { margin-left: 0 !important; width: 100% !important; }
  app-menu .sidebar { transform: translateX(-100%) !important; visibility: hidden; transition: transform .2s ease; }
  app-menu .sidebar.invall-open { transform: translateX(0) !important; visibility: visible; box-shadow: 8px 0 24px #0002; }
  app-menu .sidebar .nav-link { justify-content: flex-start !important; }
  app-menu .sidebar .nav-link span, app-menu .sidebar-heading { display: inline !important; }
  app-home .dashboard-container { padding: 16px !important; }
  app-home .dashboard-header { flex-direction: row !important; gap: 12px !important; flex-wrap: wrap; }
  app-home .header-time { width: auto !important; }
  app-home .dashboard-title { font-size: 24px !important; }
  app-home .time-value { font-size: 20px !important; }
}