@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  font-family: "DM Sans", sans-serif;
  color: #172b3a;
  background: #f3f6f9;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #102a43;
  --blue: #2878c7;
  --muted: #718096;
  --line: #e6ecf1;
  --green: #16835d;
  --red: #c34a4a;
  --shadow: 0 16px 42px rgba(22, 43, 61, 0.08);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  background: #fff;
}
.login-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 6vw, 88px);
  color: #fff;
  background:
    radial-gradient(ellipse at 18% 82%, rgba(52, 150, 203, .45), transparent 38%),
    linear-gradient(145deg, #102a43 5%, #16446b 100%);
}
.brand { display: flex; align-items: center; gap: 12px; font: 800 24px Manrope, sans-serif; letter-spacing: .03em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #3a91d1; font: 800 17px Manrope, sans-serif; }
.brand-logo { display: block; width: min(100%, 190px); height: auto; }
.login-art h1 { max-width: 560px; margin: 0 0 18px; font: 700 clamp(38px, 5vw, 64px)/1.08 Manrope, sans-serif; letter-spacing: -.05em; }
.login-art p { max-width: 460px; color: #d7e8f4; font-size: 17px; line-height: 1.7; }
.art-foot { color: #b6d0e2; font-size: 13px; }
.login-side { display: grid; place-items: center; padding: 32px; }
.login-card { width: min(100%, 420px); }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.login-card h2 { margin: 10px 0 8px; color: var(--navy); font: 800 30px Manrope, sans-serif; letter-spacing: -.04em; }
.subtle { color: var(--muted); line-height: 1.55; }
.field { display: grid; gap: 7px; margin-top: 20px; }
.field label { color: #394e60; font-size: 13px; font-weight: 700; }
.field input, .field select, .toolbar input, .toolbar select {
  width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #dce5ec; border-radius: 9px;
  outline: 0; color: #20384b; background: #fff;
}
.field input:focus, .field select:focus, .toolbar input:focus, .toolbar select:focus { border-color: #5da0d3; box-shadow: 0 0 0 3px rgba(40, 120, 199, .12); }
.button { min-height: 44px; padding: 0 17px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-weight: 700; transition: .15s ease; }
.button:hover { background: #1d67ae; transform: translateY(-1px); }
.button:disabled { opacity: .6; cursor: wait; transform: none; }
.button.full { width: 100%; margin-top: 24px; }
.button.secondary { color: #26445c; background: #edf3f7; }
.button.secondary:hover { background: #e0eaf1; }
.button.outline { color: var(--blue); background: #fff; border: 1px solid #cfe0ee; }
.button.danger { background: #fff0ef; color: #a53d3d; }
.demo-box { margin-top: 24px; padding: 13px 15px; border: 1px solid #e6edf2; border-radius: 10px; background: #f7fafc; color: #627587; font-size: 12px; line-height: 1.6; }
.demo-box strong { color: #344b5e; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; padding: 27px 18px; color: #dbe8f1; background: var(--navy); }
.sidebar .brand { padding: 0 5px 32px; font-size: 21px; }
.sidebar .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.sidebar .brand-logo { width: 190px; }
.nav-label { padding: 0 12px; margin-bottom: 10px; color: #91a8ba; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav { display: grid; gap: 6px; }
.nav button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border: 0; border-radius: 9px; color: #c5d5e0; background: transparent; text-align: left; font-weight: 600; }
.nav button:hover, .nav button.active { color: #fff; background: #1d4666; }
.nav-icon { width: 19px; text-align: center; font-size: 17px; }
.sidebar-spacer { flex: 1; }
.side-note { padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #bbccda; font-size: 12px; line-height: 1.5; }
.profile { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 15px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #16446b; background: #d7eafb; font-weight: 800; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { color: white; font-size: 12px; }
.profile-copy span { margin-top: 3px; color: #a8bece; font-size: 11px; }
.logout { width: 34px; height: 34px; border: 0; border-radius: 8px; color: #c6d6e0; background: #23445f; }
.main { min-width: 0; padding: 30px clamp(20px, 4vw, 54px) 48px; }
.topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 29px; }
.topline h1 { margin: 0; color: var(--navy); font: 800 28px Manrope, sans-serif; letter-spacing: -.045em; }
.topline p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.today { color: #647a8b; font-size: 13px; text-align: right; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 22px; }
.stat-card, .panel, .punch-card { border: 1px solid #e8edf1; border-radius: 13px; background: #fff; box-shadow: 0 5px 20px rgba(20,48,70,.025); }
.stat-card { min-height: 123px; padding: 19px; }
.stat-head { display: flex; align-items: center; justify-content: space-between; color: #6b7f90; font-size: 12px; font-weight: 600; }
.stat-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #2672b3; background: #eaf4fb; }
.stat-value { margin-top: 14px; color: var(--navy); font: 800 28px Manrope, sans-serif; letter-spacing: -.04em; }
.panel { overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 21px; border-bottom: 1px solid #edf1f4; }
.panel-head h2 { margin: 0; color: var(--navy); font: 700 16px Manrope, sans-serif; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.panel-body { padding: 20px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(245px, 0.78fr) minmax(0, 2fr); align-items: start; gap: 18px; }
.dashboard-status { min-width: 0; }
.dashboard-status .panel-head { padding: 16px; }
.dashboard-status .panel-head h2 { font-size: 13px; text-transform: uppercase; }
.dashboard-gear { color: #8a9aa6; }
.status-groups { padding: 4px 16px 13px; }
.status-group { padding: 13px 0 12px; border-bottom: 1px solid #edf1f4; }
.status-group:last-child { border-bottom: 0; }
.status-group-heading { display: flex; align-items: center; gap: 8px; color: #45596a; font-size: 12px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 2px; background: #8998a4; }
.status-group.working .status-dot { background: #4a8056; }
.status-group.finished .status-dot { background: #8c2849; }
.status-group.not-started .status-dot { background: #d3a633; }
.status-avatars { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.status-person { width: 51px; display: flex; align-items: center; flex-direction: column; gap: 4px; }
.status-person .avatar { width: 29px; height: 29px; font-size: 10px; }
.status-person small { width: 100%; overflow: hidden; color: #647888; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.status-empty { margin: 10px 0 0; color: #7d8d99; font-size: 10px; }
.dashboard-main { display: grid; min-width: 0; gap: 16px; }
.dashboard-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-summary-card { min-width: 0; padding: 16px; border: 1px solid #e8edf1; border-radius: 11px; background: #fff; box-shadow: 0 5px 20px rgba(20,48,70,.025); }
.dashboard-card-title { display: flex; align-items: center; gap: 8px; color: #5e7384; font-size: 11px; font-weight: 700; }
.summary-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #eef4f7; }
.summary-icon.blue { color: #3976a8; background: #eaf4fb; }
.summary-icon.green { color: #398451; background: #e9f5ed; }
.summary-icon.amber { color: #b57c19; background: #fff5e3; }
.dashboard-summary-card > strong { display: block; margin-top: 11px; color: var(--navy); font: 800 26px Manrope, sans-serif; letter-spacing: -.04em; }
.dashboard-summary-card > small { display: block; min-height: 28px; margin-top: 3px; color: #7a8b98; font-size: 10px; line-height: 1.4; }
.progress-track { height: 5px; overflow: hidden; margin-top: 11px; border-radius: 9px; background: #edf1f4; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #4a9b70; }
.summary-link { margin-top: 7px; padding: 0; border: 0; color: #3979a9; background: transparent; font-size: 10px; font-weight: 700; }
.summary-link:hover { text-decoration: underline; }
.dashboard-roster .panel-head { padding: 16px; }
.dashboard-roster .panel-head h2 { font-size: 13px; text-transform: uppercase; }
.dashboard-roster .panel-head .button { min-height: 34px; padding: 0 10px; font-size: 11px; }
.employee-table { min-width: 910px; }
.employee-table th { padding: 10px 11px; font-size: 9px; letter-spacing: .04em; }
.employee-table td { padding: 10px 11px; font-size: 10px; }
.employee-table .avatar { width: 28px; height: 28px; font-size: 9px; }
.employee-name { display: flex; max-width: 150px; align-items: center; gap: 8px; }
.employee-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-code { display: block; margin-top: 3px; color: #788b9a; font-size: 9px; }
.client-project-name { display: inline-flex; align-items: center; gap: 5px; margin: 2px 6px 2px 0; }
.client-project-name small { color: #788b9a; font-size: 10px; }
.client-add-project { min-height: 34px; padding-inline: 10px; font-size: 11px; white-space: nowrap; }
.employee-table .badge { padding: 5px 7px; font-size: 9px; }
.badge.rose { color: #8c2849; background: #fae9ef; }
.muted-cell { color: #8997a2; }
.time-marks { display: flex; flex-direction: column; gap: 4px; }
.time-mark { width: fit-content; padding: 3px 6px; border-radius: 10px; font-size: 9px; }
.time-mark.in { color: #39784c; background: #e8f4eb; }
.time-mark.out { color: #8c2849; background: #f8e9ef; }
.duration-pill { display: inline-block; padding: 4px 7px; border: 1px solid #cce5d2; border-radius: 12px; color: #39784c; background: #eef8f0; font-size: 9px; white-space: nowrap; }
.location-link { display: inline-flex; max-width: 250px; align-items: flex-start; gap: 5px; color: #637785; font-size: 10px; line-height: 1.4; text-decoration: none; }
.location-link > span:last-child { overflow-wrap: anywhere; }
.mark-cell { white-space: normal; }
.mark-evidence { display: flex; min-width: 270px; align-items: center; justify-content: space-between; gap: 12px; }
.mark-evidence > div { min-width: 0; }
.mark-evidence .location-link { max-width: 360px; font-size: 14px; }
.mark-evidence .evidence-thumb { width: 38px; height: 44px; flex: 0 0 38px; }
.mark-time { display: block; margin-bottom: 4px; white-space: nowrap; }
.missing-evidence { color: #8997a2; font-size: 11px; }
.location-pin { position: relative; width: 12px; height: 14px; flex: 0 0 12px; color: #74828b; }
.location-pin::before { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; background: currentColor; content: ""; transform: rotate(-45deg); }
.location-pin::after { position: absolute; top: 4px; left: 4px; width: 4px; height: 4px; border-radius: 50%; background: #fff; content: ""; }
.location-link:hover { color: var(--blue); text-decoration: underline; }
.photo-thumbnails { display: flex; align-items: center; gap: 5px; }
.evidence-thumb { width: 32px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #dfe7ec; border-radius: 6px; background: #f3f6f9; cursor: pointer; }
.evidence-thumb:hover { border-color: #5893c0; box-shadow: 0 0 0 2px rgba(40, 120, 199, .13); }
.evidence-thumb:focus-visible { outline: 2px solid #3982bb; outline-offset: 2px; }
.evidence-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar input, .toolbar select { width: auto; min-width: 150px; min-height: 39px; font-size: 12px; }
.toolbar .button { min-height: 39px; font-size: 12px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 11px 15px; color: #788b9a; background: #f8fafb; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
td { padding: 14px 15px; border-top: 1px solid #edf1f4; color: #3b5365; font-size: 12px; white-space: nowrap; }
td strong { color: #243c50; font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.badge.green { color: #147251; background: #e7f6ef; }
.badge.gray { color: #657888; background: #eef2f5; }
.badge.red { color: #a53d3d; background: #fff0ef; }
.empty { padding: 35px 20px; color: #8293a0; text-align: center; font-size: 13px; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tech-card { padding: 17px; border: 1px solid #e8edf1; border-radius: 11px; background: #fff; }
.tech-card-top { display: flex; align-items: center; gap: 11px; }
.tech-card h3 { margin: 0; color: #2a4357; font-size: 13px; }
.tech-card p { margin: 4px 0 0; color: #788b9a; font-size: 11px; }
.tech-card .badge { margin-top: 14px; }
.tech-schedule { margin-top: 12px; color: #6e8291; font-size: 11px; }
.tech-card .schedule-tech { width: 100%; min-height: 36px; margin-top: 10px; }

.punch-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 18px; }
.punch-card { padding: clamp(20px, 3vw, 30px); }
.punch-status { display: flex; align-items: center; gap: 14px; padding: 14px 17px; border: 2px solid #dfe7ec; border-radius: 17px; }
.punch-status-icon { width: 52px; height: 52px; display: grid; flex: 0 0 auto; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 19px; }
.punch-status strong, .punch-status small { display: block; }
.punch-status strong { color: #31485b; font-size: 19px; font-weight: 500; }
.punch-status small { margin-top: 2px; color: #718096; font-size: 13px; }
.punch-status.working { color: #458255; }
.punch-status.off-duty { color: #8c2849; }
.punch-status.off-duty .punch-status-icon { font-size: 15px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-row h2 { margin: 0; color: var(--navy); font: 700 18px Manrope, sans-serif; }
.clock { margin: 24px 0 4px; color: var(--navy); font: 800 clamp(42px, 6vw, 62px)/1 Manrope, sans-serif; letter-spacing: -.065em; text-align: center; }
.clock-date { margin-bottom: 18px; color: var(--muted); font-size: 13px; text-align: center; }
.punch-actions { display: flex; min-height: 230px; align-items: center; justify-content: center; }
.punch-cta { display: flex; align-items: center; flex-direction: column; gap: 15px; padding: 10px 24px; border: 0; color: #283f50; background: transparent; font-size: 15px; transition: transform .16s ease; }
.punch-cta:hover { transform: translateY(-3px); }
.punch-cta:focus-visible { outline: 3px solid #8cc4e8; outline-offset: 4px; border-radius: 12px; }
.punch-cta-icon { width: 146px; height: 146px; display: grid; place-items: center; border: 5px solid currentColor; border-radius: 50%; font-size: 60px; line-height: 1; }
.punch-start .punch-cta-icon { color: #4a8056; }
.punch-start .punch-cta-icon { padding-left: 8px; }
.punch-finish .punch-cta-icon { color: #8c2849; font-size: 49px; }
.punch-cta strong { font-size: 17px; }
.privacy-note { margin: 18px 0 0; color: #80909c; font-size: 11px; line-height: 1.6; }
.record-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf1f4; }
.record-item:last-child { border-bottom: 0; }
.record-item strong { display: block; color: #344d60; font-size: 12px; }
.record-item span { display: block; margin-top: 4px; color: #81919d; font-size: 11px; }
.record-item a { color: var(--blue); font-size: 11px; text-decoration: none; }
.report-summary { display: flex; flex-wrap: wrap; gap: 16px; padding: 15px 20px; color: #667c8d; font-size: 12px; border-top: 1px solid #edf1f4; }
.report-summary strong { color: #26445b; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(420px, calc(100vw - 44px)); padding: 13px 17px; border-radius: 10px; color: #fff; background: #183e5c; box-shadow: var(--shadow); font-size: 13px; }
.toast.error { background: #a63d3d; }
.loading { opacity: .65; pointer-events: none; }
.warning { margin-top: 18px; padding: 12px 14px; border: 1px solid #f1d8a6; border-radius: 9px; color: #846323; background: #fff8e9; font-size: 12px; line-height: 1.55; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(15,35,52,.48); }
.modal { width: min(100%, 440px); padding: 24px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.modal h2 { margin: 0 0 7px; color: var(--navy); font: 800 20px Manrope, sans-serif; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 23px; }
.photo-modal img { display: block; width: 100%; max-height: 65vh; margin-top: 15px; border-radius: 9px; object-fit: contain; background: #f3f6f9; }
.reports-workspace { display: grid; gap: 14px; }
.report-switcher { display: flex; width: fit-content; gap: 4px; padding: 4px; border: 1px solid #e4ebf0; border-radius: 9px; background: #fff; }
.report-switcher button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; color: #647a8b; background: transparent; font-size: 12px; font-weight: 700; }
.report-switcher button.active { color: #fff; background: var(--blue); }
.report-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.compact-field { min-width: 185px; gap: 6px; margin: 0; }
.compact-field > span { color: #718493; font-size: 11px; font-weight: 700; }
.compact-field input, .compact-field select { min-height: 39px; padding: 0 10px; border: 1px solid #dce5ec; border-radius: 8px; color: #344d60; background: #fff; font-size: 12px; }
.panel tfoot th { border-top: 1px solid #e4ebf0; color: #345068; background: #f4f8fa; font-size: 11px; letter-spacing: 0; text-transform: none; }
.project-toggle { min-height: 32px; padding: 0 9px; font-size: 10px; }
.modal select, .modal input { width: 100%; min-height: 43px; padding: 0 11px; border: 1px solid #dce5ec; border-radius: 8px; color: #344d60; background: #fff; }
.modal textarea { width: 100%; min-height: 86px; padding: 11px; border: 1px solid #dce5ec; border-radius: 8px; color: #344d60; resize: vertical; }
.field-hint { color: #788b9a; font-size: 11px; }
.correction-modal { max-height: min(90vh, 850px); overflow-y: auto; }
.records-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-record { min-height: 32px; padding: 0 9px; font-size: 11px; }
.correction-reason { display: block; max-width: 180px; overflow: hidden; margin-top: 5px; color: #718493; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.text-button { padding: 5px 0; border: 0; color: var(--blue); background: transparent; font-size: 10px; text-align: left; }
.correction-history-list { display: grid; max-height: 55vh; gap: 10px; overflow-y: auto; margin-top: 16px; }
.correction-history-list article { padding: 12px; border: 1px solid #e6ecf1; border-radius: 9px; background: #f8fafb; }
.correction-history-list strong, .correction-history-list small { display: block; }
.correction-history-list strong { color: #29455a; font-size: 12px; }
.correction-history-list small { margin-top: 4px; color: #81919d; font-size: 10px; }
.correction-history-list p { margin: 8px 0 0; color: #4b6172; font-size: 12px; line-height: 1.5; }
.correction-history-list ul { display: grid; gap: 5px; padding-left: 18px; color: #4b6172; font-size: 11px; }
.correction-history-list li strong { display: inline; }
.badge.amber { color: #815d1e; background: #fff1d2; }
.schedule-days { display: flex; flex-wrap: wrap; gap: 7px; }
.schedule-days label { position: relative; }
.schedule-days input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.schedule-days span { display: grid; width: 39px; height: 36px; place-items: center; border: 1px solid #dce5ec; border-radius: 8px; color: #627587; background: #fff; font-size: 11px; font-weight: 700; }
.schedule-days input:checked + span { border-color: var(--blue); color: #fff; background: var(--blue); }
.schedule-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.schedule-hours .field { min-width: 0; }
.reminder-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 19px; border: 1px solid #dce8f0; border-radius: 12px; background: #fff; }
.reminder-card strong { color: #29455a; font-size: 13px; }
.reminder-card p { margin: 5px 0 0; color: #718493; font-size: 12px; line-height: 1.5; }
.calendar-panel { overflow: hidden; }
.calendar-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid #edf1f4; background: #fff; }
.calendar-filter, .calendar-date-picker { display: grid; min-width: 150px; gap: 5px; }
.calendar-filter > span, .calendar-date-picker > span { color: #788b9a; font-size: 10px; font-weight: 700; }
.calendar-filter select, .calendar-date-picker input { min-height: 36px; padding: 0 10px; border: 1px solid #dce5ec; border-radius: 7px; color: #3b5365; background: #fff; font-size: 11px; }
.calendar-navigation { display: flex; align-items: center; gap: 8px; }
.calendar-navigation > strong { min-width: 165px; color: #344d60; font-size: 12px; text-align: center; text-transform: capitalize; }
.calendar-arrow { width: 34px; height: 34px; border: 1px solid #e1e9ee; border-radius: 7px; color: #486273; background: #fff; font-size: 23px; line-height: 1; }
.calendar-arrow:hover { border-color: #9dc2dc; color: var(--blue); }
.calendar-today { min-height: 34px; padding: 0 10px; font-size: 11px; }
.calendar-modes { display: flex; padding: 3px; border: 1px solid #e3eaf0; border-radius: 8px; background: #f6f8fa; }
.calendar-modes button { min-height: 29px; padding: 0 9px; border: 0; border-radius: 6px; color: #697e8e; background: transparent; font-size: 10px; font-weight: 700; }
.calendar-modes button.active { color: #fff; background: #2878c7; box-shadow: 0 2px 6px rgba(40,120,199,.2); }
.calendar-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 16px; border-bottom: 1px solid #edf1f4; color: #718493; font-size: 11px; }
.calendar-summary strong { margin-right: 4px; color: #29455a; }
.calendar-scroll { overflow: auto; }
.calendar-time-grid, .calendar-day-row { display: grid; min-width: 1250px; grid-template-columns: 205px minmax(1040px, 1fr); }
.calendar-fixed-head { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; padding: 0 14px; border-right: 1px solid #e9eef2; border-bottom: 1px solid #e7edf1; color: #758997; background: #f8fafb; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.calendar-hours { display: grid; height: 39px; grid-template-columns: repeat(24, minmax(0, 1fr)); border-bottom: 1px solid #e7edf1; background: #f8fafb; }
.calendar-hours span { display: flex; align-items: center; justify-content: center; border-left: 1px solid #e9eef2; color: #758997; font-size: 9px; }
.calendar-day-row { min-height: 59px; }
.calendar-employee { position: sticky; left: 0; z-index: 2; display: grid; align-content: center; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; padding: 8px 12px; border-right: 1px solid #edf1f4; border-bottom: 1px solid #edf1f4; background: #fff; }
.calendar-employee .avatar { width: 28px; height: 28px; grid-row: span 2; font-size: 9px; }
.calendar-employee strong { overflow: hidden; align-self: end; color: #344d60; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-employee small { align-self: start; margin-top: 2px; color: #8897a2; font-size: 9px; }
.calendar-hour-track { position: relative; min-height: 59px; overflow: hidden; border-bottom: 1px solid #edf1f4; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 24 - 1px), #edf1f4 calc(100% / 24 - 1px), #edf1f4 calc(100% / 24)); }
.calendar-event { position: absolute; top: 13px; z-index: 1; display: flex; height: 32px; min-width: 78px; align-items: center; overflow: hidden; padding: 0 10px; border: 0; border-radius: 6px; color: #fff; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.working { background: #438653; }
.calendar-event.finished { background: #2878c7; }
.calendar-event:hover { filter: brightness(.93); }
.calendar-event span { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.calendar-no-record { position: absolute; top: 22px; left: 12px; color: #c0cbd2; font-size: 11px; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; padding: 11px 3px; color: #718493; font-size: 10px; }
.calendar-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; background: #438653; }
.legend-dot.finished { background: #2878c7; }
.calendar-range-table { padding-bottom: 5px; }
.calendar-range-table table { min-width: 1000px; }
.calendar-range-table td { min-width: 105px; padding: 8px; text-align: center; }
.calendar-range-table td:first-child { min-width: 175px; text-align: left; }
.calendar-day-table td { min-width: 150px; padding: 10px 14px; }
.calendar-day-table td:first-child { width: 220px; }
.calendar-day-shift { display: inline-flex; min-width: 175px; align-items: center; gap: 8px; margin: 3px 6px 3px 0; padding: 6px 8px; border: 1px solid #e6edf1; border-radius: 7px; background: #fff; }
.calendar-day-shift:hover { border-color: #9dc2dc; background: #f8fbfd; }
.calendar-day-shift small { color: #788b9a; font-size: 9px; }
.calendar-day-link { padding: 5px; border: 0; color: #526a7c; background: transparent; font-size: 10px; font-weight: 700; text-transform: capitalize; }
.calendar-day-link:hover { color: var(--blue); }
.calendar-week-cell { display: grid; width: 100%; min-height: 40px; justify-items: center; gap: 3px; padding: 5px; border: 0; border-radius: 6px; color: #9aa8b2; background: transparent; font-size: 10px; }
.calendar-week-cell.has-record { color: #39784c; background: #eef7f0; }
.calendar-week-cell strong { font-size: 9px; }
.calendar-week-cell small { color: #758997; font-size: 9px; }
.calendar-week-cell:hover, .month-cell:hover, .year-month-card:hover { outline: 1px solid #aacce2; }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 1px; background: #e7edf1; }
.month-weekday { display: grid; min-height: 32px; place-items: center; color: #718493; background: #f8fafb; font-size: 10px; font-weight: 700; }
.month-cell { display: flex; min-width: 0; min-height: 85px; align-items: flex-start; flex-direction: column; gap: 6px; padding: 9px; border: 0; color: #3d5669; background: #fff; text-align: left; }
.month-cell > span { font-size: 11px; font-weight: 700; }
.month-cell > strong { color: #39784c; font-size: 10px; }
.month-cell > small { color: #7d8f9d; font-size: 9px; }
.month-cell.outside { background: #f8fafb; }
.month-cell.selected { box-shadow: inset 0 0 0 2px #3982bb; }
.calendar-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.year-month-card { display: grid; min-height: 100px; align-content: center; justify-items: start; gap: 7px; padding: 14px; border: 1px solid #e7edf1; border-radius: 9px; color: #4a6375; background: #fff; text-align: left; }
.year-month-card strong { color: #2e4a5e; font-size: 12px; text-transform: capitalize; }
.year-month-card span { color: #39784c; font-size: 11px; font-weight: 700; }
.year-month-card small { color: #81919d; font-size: 10px; }
.calendar-record-modal { max-height: min(80vh, 700px); overflow-y: auto; }
.calendar-record-modal h2 { text-transform: capitalize; }
.calendar-mark-detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1f4; }
.calendar-mark-detail strong, .calendar-mark-detail small, .calendar-mark-detail a { display: block; }
.calendar-mark-detail strong { color: #344d60; font-size: 12px; }
.calendar-mark-detail small { max-width: 270px; margin-top: 5px; color: #7b8d9a; font-size: 10px; line-height: 1.5; }
.calendar-mark-detail a { margin-top: 5px; color: var(--blue); font-size: 10px; text-decoration: none; }
.calendar-mark-detail img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 7px; object-fit: cover; }

@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .punch-layout { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-status { order: 2; }
  .dashboard-main { order: 1; }
}
@media (max-width: 680px) {
  .login-page { grid-template-columns: 1fr; }
  .login-art { min-height: 260px; padding: 26px; }
  .login-art h1 { margin-top: 38px; font-size: 37px; }
  .login-art p { margin-bottom: 0; font-size: 14px; }
  .art-foot { display: none; }
  .login-side { padding: 32px 22px 42px; }
  .shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 5; display: block; padding: 10px 13px; }
  .sidebar .brand { display: inline-flex; padding: 0; vertical-align: middle; }
  .sidebar .brand-mark { width: 30px; height: 30px; }
  .sidebar .brand-logo { width: 100px; }
  .nav-label, .sidebar-spacer, .side-note, .profile { display: none; }
  .nav { display: inline-flex; float: right; gap: 3px; }
  .nav button { width: 30px; height: 38px; justify-content: center; padding: 0; font-size: 0; }
  .nav-icon { font-size: 16px; }
  .main { padding: 23px 16px 36px; }
  .topline { margin-bottom: 20px; }
  .topline h1 { font-size: 23px; }
  .today { max-width: 112px; font-size: 11px; }
  .cards { gap: 9px; margin-bottom: 14px; }
  .stat-card { min-height: 102px; padding: 13px; }
  .stat-value { margin-top: 11px; font-size: 24px; }
  .stat-head { font-size: 10px; }
  .stat-icon { width: 27px; height: 27px; }
  .panel-head { align-items: flex-start; padding: 15px; }
  .records-actions { justify-content: flex-end; }
  .records-actions .button { min-height: 34px; padding-inline: 8px; font-size: 10px; }
  .panel-body { padding: 14px; }
  .punch-layout { gap: 12px; }
  .dashboard-summary { grid-template-columns: 1fr; }
  .calendar-toolbar { align-items: stretch; flex-wrap: wrap; }
  .calendar-navigation { order: 0; justify-content: space-between; }
  .calendar-filter, .calendar-date-picker { flex: 1; }
  .calendar-modes { justify-content: center; }
  .calendar-date-picker { min-width: 120px; }
  .calendar-navigation > strong { min-width: 120px; font-size: 10px; }
  .calendar-modes button { flex: 1; padding-inline: 5px; font-size: 9px; }
  .month-cell { min-height: 65px; padding: 5px; }
  .dashboard-summary-card { padding: 14px; }
  .dashboard-summary-card > small { min-height: 0; }
  .report-switcher { width: 100%; }
  .report-switcher button { flex: 1; padding-inline: 8px; font-size: 11px; }
  .report-filters { align-items: stretch; }
  .compact-field { flex: 1; min-width: 145px; }
  .calendar-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-groups { padding-inline: 13px; }
  .punch-status { padding: 12px; }
  .punch-actions { min-height: 200px; }
  .punch-cta-icon { width: 128px; height: 128px; font-size: 53px; }
  .punch-finish .punch-cta-icon { font-size: 43px; }
  .panel-head .button { min-height: 35px; padding: 0 10px; font-size: 11px; }
  td { padding: 12px 10px; }
  th { padding: 10px; }
  .toolbar { align-items: stretch; }
  .toolbar input, .toolbar select { flex: 1; min-width: 125px; }
  .reminder-card { align-items: flex-start; flex-direction: column; padding: 14px; }
  .schedule-hours { gap: 8px; }
}
@media (max-width: 380px) {
  .sidebar .brand { gap: 6px; }
  .sidebar .brand-mark { width: 24px; height: 24px; }
  .sidebar .brand-logo { width: 82px; }
  .nav { gap: 2px; }
  .nav button { width: 27px; height: 34px; }
}

/* Feriados y jornadas por revisar en reportes */
.button.small { min-height: 32px; padding: 0 11px; font-size: 12px; }
.holiday-panel { margin-top: 18px; }
.holiday-panel .panel-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.holiday-double { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #344d60; }
.holiday-add { border-top: 1px solid #edf1f4; }
.holiday-name-field { flex: 1; min-width: 220px; }
.review-notice { margin: 14px 21px; }
.review-notice ul { margin: 8px 0 0; padding-left: 18px; }
.review-notice li { margin: 2px 0; }

/* Sesión en el servidor: carga, cambio de contraseña y acciones de técnicos */
.loading-page { display: grid; place-items: center; min-height: 100vh; }
.login-help { margin: 14px 0 0; font-size: 12px; text-align: center; }
.link-button { display: inline; padding: 0; border: 0; background: none; color: #8ac8f2; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-button:hover { color: #fff; }
.profile-copy .link-button { margin-top: 3px; }
.tech-card-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.tech-card-actions .link-button { color: var(--blue); }
.tech-card-actions .link-button:hover { color: var(--navy); }
.mobile-account { display: none; }
@media (max-width: 680px) {
  .mobile-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e3eaf0; color: #667c8d; font-size: 12px; }
  .mobile-account > span:last-child { display: flex; gap: 16px; }
  .mobile-account .link-button { color: var(--blue); font-size: 12px; }
}