:root {
    --navy: #0b2341;
    --navy-light: #173d68;
    --ink: #10243d;
    --muted: #718197;
    --line: #e7edf4;
    --surface: #ffffff;
    --canvas: #f5f8fc;
    --green: #0e9f6e;
    --blue: #2563eb;
    --orange: #ea8a16;
    --red: #d64045;
    --shadow: 0 14px 38px rgba(13, 37, 65, .09);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { min-height: 100vh; margin: 0; background: var(--canvas); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; }
.app-container { max-width: 1320px; margin: 0 auto; padding-left: 26px; padding-right: 26px; }

.topbar { background: var(--navy); border-bottom: 3px solid #f2b84b; color: #fff; }
.topbar-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; letter-spacing: .1px; }
.brand:hover, .brand:focus { color: #fff; text-decoration: none; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; background: #f2b84b; color: var(--navy); font-size: 22px; }
.brand strong { display: block; font-size: 19px; font-weight: 800; line-height: 18px; letter-spacing: 1.2px; }
.brand small { display: block; margin-top: 4px; color: #b9c9db; font-size: 11px; letter-spacing: .25px; }
.topbar-status { display: flex; align-items: center; gap: 13px; font-size: 13px; color: #dce7f5; }
.connection-status { font-weight: 600; }
.connection-status i { font-size: 9px; color: #efbd45; }
.connection-status.is-online i { color: #40d39a; }.connection-status.is-offline i { color: #ff6b6f; }
.separator { display: block; width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.clock { min-width: 68px; color: #fff; font-family: Consolas, "Courier New", monospace; font-weight: 700; font-size: 16px; }

.welcome-row { display: flex; gap: 28px; align-items: end; justify-content: space-between; padding: 36px 0 26px; }.welcome-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.eyebrow { margin: 0 0 6px; color: #527090; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.eyebrow .fa { color: var(--green); margin-right: 4px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: 33px; line-height: 1.14; font-weight: 800; letter-spacing: -.7px; }
h1 span { color: var(--green); }
.welcome-copy { max-width: 630px; margin-bottom: 0; color: #66778c; line-height: 1.55; }
.btn-report { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid #d7e1ec; border-radius: 9px; background: #fff; color: #34516f; font-size: 13px; font-weight: 700; text-decoration: none; transition: .2s ease; }
.btn-report:hover, .btn-report:focus { border-color: var(--navy); box-shadow: 0 5px 15px rgba(13,37,65,.12); color: var(--navy); text-decoration: none; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.54fr) minmax(320px, .76fr); gap: 22px; }
.scan-card, .dni-card, .last-record-card, .summary-section, .activity-section { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.scan-card { overflow: hidden; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; }
.step-tag { display: inline-block; margin-bottom: 7px; color: #8393a6; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; }
.card-heading h2, .section-heading h2 { margin-bottom: 5px; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.2px; }
.card-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.camera-badge { flex-shrink: 0; margin-top: 7px; padding: 6px 9px; border-radius: 99px; background: #edf1f5; color: #657386; font-size: 11px; font-weight: 700; }
.camera-badge.is-on { background: #e4f8f0; color: #087858; }.camera-badge.is-on .fa { color: var(--green); }

.camera-shell { position: relative; min-height: 245px; margin: 0 26px; overflow: hidden; border-radius: 12px; background: #07192c; }
#preview { display: block; width: 100%; min-height: 245px; max-height: 320px; object-fit: cover; background: #07192c; }
.camera-placeholder { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #e7eff8; text-align: center; }
.camera-placeholder strong { font-size: 17px; }.camera-placeholder small { color: #9cb1c7; }
.placeholder-icon { display: grid; width: 54px; height: 54px; margin-bottom: 3px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.08); font-size: 25px; }
.camera-placeholder.hidden { display: none; }
.scanner-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.corner { position: absolute; width: 36px; height: 36px; border-color: #f7bf4c; border-style: solid; filter: drop-shadow(0 0 4px rgba(247,191,76,.4)); }
.corner-tl { top: 14%; left: 16%; border-width: 4px 0 0 4px; border-radius: 6px 0 0; }.corner-tr { top: 14%; right: 16%; border-width: 4px 4px 0 0; border-radius: 0 6px 0 0; }
.corner-bl { bottom: 14%; left: 16%; border-width: 0 0 4px 4px; border-radius: 0 0 0 6px; }.corner-br { right: 16%; bottom: 14%; border-width: 0 4px 4px 0; border-radius: 0 0 6px 0; }
.scan-line { position: absolute; top: 24%; right: 18%; left: 18%; height: 2px; background: linear-gradient(90deg, transparent, #ffdb84, transparent); box-shadow: 0 0 12px #ffd466; animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(150px); opacity: 1; } }
.camera-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 17px 26px; }
.btn-camera { min-width: 128px; border-radius: 7px; font-weight: 700; font-size: 13px; }.btn-camera .fa { margin-right: 4px; }
.btn-primary { border-color: var(--navy-light); background: var(--navy-light); }.btn-primary:hover, .btn-primary:focus { border-color: var(--navy); background: var(--navy); }
.camera-select-wrap { display: flex; align-items: center; max-width: 225px; height: 34px; padding: 0 8px; border: 1px solid #d6e0ea; border-radius: 6px; color: #70839a; background: #fff; }
.camera-select-wrap .fa { margin-right: 5px; }.camera-select-wrap select { width: 100%; border: 0; outline: 0; background: transparent; color: #405871; font-size: 12px; }
.usb-reader { display: grid; grid-template-columns: auto 1fr minmax(180px, 250px); align-items: center; gap: 10px; padding: 14px 26px 18px; border-top: 1px solid #edf1f5; background: #fbfcfe; }
.usb-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #e8eef7; color: #3d5e82; }.usb-reader strong { display: block; color: #445d78; font-size: 12px; }.usb-reader small { color: #8998a9; font-size: 11px; }
.usb-reader input { height: 34px; border: 1px solid #d7e1eb; border-radius: 6px; outline-color: var(--green); padding: 6px 10px; color: #294968; font-size: 12px; }

.side-column { display: grid; grid-template-rows: auto 1fr; gap: 22px; }
.dni-card { padding-bottom: 18px; }.compact-heading { padding-bottom: 15px; }.dni-card form { padding: 0 24px; }.dni-card label { display: block; margin-bottom: 8px; color: #54687e; font-size: 12px; font-weight: 700; }
.dni-input-group { display: flex; align-items: center; height: 53px; padding: 0 14px; border: 1px solid #cbd7e4; border-radius: 8px; background: #fff; transition: border-color .18s, box-shadow .18s; }.dni-input-group:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14,159,110,.11); }.dni-input-group .fa { margin-right: 10px; color: #6a84a0; font-size: 18px; }.dni-input-group input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: 3px; }.dni-input-group input::placeholder { color: #b7c1cc; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.btn-register { width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-weight: 800; box-shadow: 0 8px 15px rgba(14,159,110,.2); transition: transform .15s, background .15s; }.btn-register:hover, .btn-register:focus { background: #087e57; color: #fff; transform: translateY(-1px); }.btn-register[disabled] { opacity: .65; transform: none; }.btn-register .fa { margin-right: 5px; }
.btn-register.is-exit { background: var(--blue); box-shadow: 0 8px 15px rgba(37,99,235,.2); }.btn-register.is-exit:hover, .btn-register.is-exit:focus { background: #1d4ed8; }
.next-action { display: block; margin: 9px 24px 0; color: #718399; font-size: 11px; text-align: center; }.next-action .fa { margin-right: 3px; color: var(--green); }.next-action.is-exit { color: #315b9c; }.next-action.is-exit .fa { color: var(--blue); }.next-action.is-complete { color: #68798d; }.next-action.is-complete .fa { color: var(--green); }
.photo-note { margin: 12px 24px 0; color: #8796a8; font-size: 11px; text-align: center; }.photo-note .fa { color: #6380a0; margin-right: 3px; }
.last-record-card { display: flex; flex-direction: column; padding: 20px 22px; }.last-title { display: flex; align-items: center; justify-content: space-between; color: #425b76; font-size: 12px; font-weight: 800; }.last-title .fa { color: #6684a3; margin-right: 4px; }.status-dot { padding: 4px 7px; border-radius: 12px; background: #f1f4f7; color: #8190a1; font-size: 10px; }.status-dot.is-success { background: #e3f8ef; color: #087b57; }
.last-empty { flex: 1; display: flex; min-height: 92px; align-items: center; justify-content: center; gap: 9px; color: #95a3b2; font-size: 12px; text-align: center; }.last-empty .fa { font-size: 18px; }.hidden { display: none !important; }
.last-record { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 16px; }.last-photo { width: 48px; height: 48px; border: 2px solid #dcebe6; border-radius: 50%; object-fit: cover; background: #e9eef4; }.last-person { min-width: 0; }.last-person strong { display: block; overflow: hidden; color: #243e5a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.last-person small { display: block; overflow: hidden; margin-top: 3px; color: #8594a5; font-size: 10px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.last-time { min-width: 57px; text-align: right; }.last-time b { display: block; color: var(--green); font-family: Consolas, monospace; font-size: 14px; }.last-time span { display: inline-block; margin-top: 3px; padding: 2px 5px; border-radius: 4px; background: #eef3f8; color: #61758c; font-size: 9px; font-weight: 800; }

.summary-section, .activity-section { margin-top: 22px; padding: 23px 25px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 17px; }.section-heading h2 { margin-bottom: 0; }.summary-date { color: #6d8197; font-size: 12px; font-weight: 700; }.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.stat-card { display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 14px; border: 1px solid #edf1f5; border-radius: 11px; background: #fff; }.stat-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 10px; font-size: 18px; }.stat-card span { display: block; margin-bottom: 1px; color: #7b8d9f; font-size: 11px; font-weight: 600; }.stat-card strong { display: block; color: #263f5b; font-size: 25px; font-weight: 800; line-height: 1; }.stat-navy .stat-icon { background: #e8eef7; color: var(--navy-light); }.stat-green .stat-icon { background: #e4f8f0; color: var(--green); }.stat-blue .stat-icon { background: #e6efff; color: var(--blue); }.stat-orange .stat-icon { background: #fff3dd; color: var(--orange); }

.activity-section { margin-bottom: 28px; }.activity-heading { margin-bottom: 8px; }.activity-search { display: flex; align-items: center; flex: 1 1 420px; gap: 10px; max-width: 650px; }.activity-search > label { margin: 0; color: #111; font-size: 20px; font-weight: 500; white-space: nowrap; }.search-field { display: flex; align-items: center; flex: 1; min-width: 180px; height: 40px; padding: 0 12px; border: 2px solid #43a832; border-radius: 8px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }.search-field:focus-within { border-color: #2c8b22; box-shadow: 0 0 0 3px rgba(67,168,50,.14); }.search-field .fa { margin-right: 8px; color: #43a832; font-size: 13px; }.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: #274862; background: transparent; font-size: 13px; }.search-field input::placeholder { color: #9aa8b5; }.search-count { min-width: 38px; color: #71869a; font-size: 10px; font-weight: 700; white-space: nowrap; }.activity-tools { display: flex; align-items: center; gap: 10px; }.table-hint { color: #8193a4; font-size: 10px; font-weight: 700; }.table-hint .fa { margin-right: 3px; color: var(--blue); }.activity-heading .btn-link { padding: 4px; color: #527393; font-size: 12px; font-weight: 700; text-decoration: none; }.activity-heading .btn-link:hover { color: var(--navy); }.activity-list { border-top: 1px solid #edf1f5; }.activity-row { display: grid; grid-template-columns: 40px minmax(150px, 1.2fr) minmax(90px, .6fr) minmax(70px, .45fr) minmax(76px, .4fr) 74px; align-items: center; gap: 12px; min-height: 63px; padding: 8px 2px; border-bottom: 1px solid #eef2f6; }.activity-row:last-child { border-bottom: 0; }.activity-photo, .activity-avatar { width: 39px; height: 39px; border-radius: 50%; object-fit: cover; background: #e7edf4; }.activity-avatar { display: grid; place-items: center; color: #63809e; font-size: 15px; }.activity-name strong { display: block; overflow: hidden; color: #31506e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.activity-name small, .activity-cargo { display: block; overflow: hidden; margin-top: 3px; color: #8b9aaa; font-size: 10px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.activity-badge { display: inline-block; width: fit-content; padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; }.activity-badge.entry { background: #e4f8f0; color: #087d58; }.activity-badge.exit { background: #edf2f7; color: #4d6680; }.activity-method { color: #718399; font-size: 11px; font-weight: 700; }.activity-time { color: #2d516f; font-family: Consolas, monospace; font-size: 12px; font-weight: 700; text-align: right; }.activity-empty { padding: 25px; color: #8b9aab; font-size: 12px; text-align: center; }.activity-empty .fa { margin-right: 5px; }
.attendance-table-wrap { overflow-x: auto; border: 1px solid #b9ddec; border-radius: 8px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); scrollbar-color: #8292a1 #edf4f8; scrollbar-width: thin; }
.attendance-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; color: #18364f; font-size: 12px; table-layout: auto; }
.attendance-table thead th { position: sticky; top: 0; z-index: 1; height: 41px; padding: 9px 10px; border-right: 1px solid #b6d8ec; border-bottom: 1px solid #9dc9e5; background: linear-gradient(#f2f9ff, #dcecf9); color: #1c2d3d; font-size: 11px; font-weight: 800; letter-spacing: .25px; text-align: left; white-space: nowrap; }
.attendance-table thead th:first-child { border-top-left-radius: 7px; }.attendance-table thead th:last-child { border-right: 0; border-top-right-radius: 7px; }.attendance-table th.col-name { min-width: 270px; }
.attendance-table tbody td { height: 39px; padding: 8px 10px; border-right: 1px solid #afd8eb; border-bottom: 1px solid #a9d7e9; white-space: nowrap; }.attendance-table tbody td:last-child { border-right: 0; }.attendance-table tbody tr:nth-child(odd) { background: #d9f8f8; }.attendance-table tbody tr:nth-child(even) { background: #f7fdfe; }.attendance-table tbody tr:hover { background: #c6eff2; }.attendance-table tbody tr.is-no-day { background: #f3f5f7; color: #8896a4; }
.attendance-table .cell-id { color: #07517c; font-family: Consolas, monospace; font-size: 11px; text-align: center; }.attendance-table .cell-code, .attendance-table .cell-dni { font-family: Consolas, monospace; }.attendance-table .cell-date { color: #60778b; font-size: 11px; }.attendance-table .cell-time { color: #36546c; font-family: Consolas, monospace; text-align: center; }.attendance-table .cell-time.registered { color: #087d66; font-weight: 800; }.attendance-table .cell-name { max-width: 330px; overflow: hidden; color: #173c5e; font-weight: 700; text-overflow: ellipsis; }.attendance-table .cell-center { text-align: center; }.attendance-table .cell-ta { color: #536d81; font-weight: 800; }.attendance-table .level-pri { color: #087d66; font-weight: 800; }.attendance-table .level-sec { color: #295a98; font-weight: 800; }
.attendance-status { display: inline-flex; min-width: 76px; justify-content: center; padding: 5px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .2px; }.attendance-status.is-present { background: #d8f7e9; color: #087952; }.attendance-status.is-late { background: #fff0d3; color: #a55c00; }.attendance-status.is-absence { background: #fde3e5; color: #bd3039; }.attendance-status.is-pending { background: #eef2f5; color: #718093; }.attendance-status.is-none { background: #e5e9ed; color: #7a8794; }.table-loading, .table-empty { height: 112px !important; color: #8292a1; text-align: center !important; }.table-loading .fa, .table-empty .fa { margin-right: 5px; }
.app-footer { padding: 18px 0; border-top: 1px solid #e1e8f0; color: #788a9d; background: #eef3f8; font-size: 11px; }.app-footer > div { display: flex; justify-content: space-between; gap: 12px; }.app-footer .fa { margin-right: 3px; color: #5c7590; }

.swal2-popup { border-radius: 16px !important; font-family: "Segoe UI", Arial, sans-serif !important; }.swal2-title { color: var(--ink) !important; font-weight: 800 !important; }.result-card { margin-top: 5px; padding: 9px 5px; text-align: left; }.result-card b { display: block; color: #183c62; font-size: 19px; }.result-card span { display: block; margin-top: 4px; color: #6f8192; font-size: 13px; }.result-time { margin-top: 13px; color: var(--green); font-family: Consolas, monospace; font-size: 31px; font-weight: 800; text-align: center; }.result-type { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 5px; background: #e6f8f0; color: #087a56; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.result-schedule { margin-top: 12px; padding: 8px 10px; border-radius: 7px; background: #f6f9fc; color: #4f6a84; font-size: 11px; text-align: center; }.result-schedule .fa { margin-right: 4px; color: var(--blue); }.result-schedule small { display: block; margin-top: 3px; color: #8191a1; font-size: 10px; }

@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; }.side-column { grid-template-columns: 1fr 1fr; grid-template-rows: none; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.last-empty { min-height: 104px; }.last-record-card { min-height: 197px; } }
@media (max-width: 640px) { .app-container { padding-right: 15px; padding-left: 15px; }.topbar-inner { min-height: 66px; }.brand strong { font-size: 17px; }.topbar-status { gap: 8px; }.connection-status { font-size: 0; }.connection-status .fa { font-size: 10px; }.separator { margin: 0 2px; }.welcome-row { align-items: flex-start; flex-direction: column; gap: 15px; padding: 25px 0 20px; } h1 { font-size: 27px; }.welcome-copy { font-size: 13px; }.welcome-actions { width: 100%; flex-direction: column; }.btn-report { width: 100%; justify-content: center; }.card-heading { padding: 20px 17px 15px; }.camera-shell { min-height: 220px; margin: 0 17px; } #preview { min-height: 220px; }.corner-tl,.corner-tr { top: 16%; }.corner-bl,.corner-br { bottom: 16%; }.corner-tl,.corner-bl { left: 10%; }.corner-tr,.corner-br { right: 10%; }.scan-line { right: 12%; left: 12%; }.camera-controls { padding: 14px 17px; }.btn-camera { flex: 1; min-width: 0; }.camera-select-wrap { max-width: none; flex: 1 0 100%; }.usb-reader { grid-template-columns: auto 1fr; padding: 13px 17px 17px; }.usb-reader input { grid-column: 1 / -1; }.side-column { grid-template-columns: 1fr; }.last-record-card { min-height: 0; }.dni-card form { padding: 0 18px; }.photo-note { margin-right: 18px; margin-left: 18px; }.summary-section,.activity-section { padding: 20px 17px; }.stats-grid { gap: 9px; }.stat-card { min-height: 70px; padding: 10px; gap: 9px; }.stat-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 15px; }.stat-card strong { font-size: 21px; }.stat-card span { font-size: 10px; }.activity-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; }.activity-cargo,.activity-method { display: none; }.activity-row > .activity-badge { grid-column: 2; grid-row: 2; }.activity-time { grid-column: 3; grid-row: 1 / span 2; }.app-footer > div { align-items: center; flex-direction: column; text-align: center; }.app-footer { padding: 14px 0; } }
.attendance-table tbody tr.attendance-row { cursor: zoom-in; }
.attendance-table tbody tr.attendance-row:hover { background: #f5fbff; }
.attendance-photo-person { margin: -5px 0 16px; color: #5b7188; font-size: 11px; text-align: left; }
.attendance-photo-person strong { display: block; color: #294965; font-size: 13px; }
.attendance-photo-person span { display: block; margin-top: 3px; }
.attendance-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.attendance-photo-grid figure { margin: 0; overflow: hidden; border: 1px solid #e0e8ef; border-radius: 10px; background: #f4f7fa; }
.attendance-photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.attendance-photo-grid figcaption { padding: 7px; color: #57718a; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.attendance-photo-swal .swal2-html-container { margin: 0 1.2em 1.2em; }
@media (max-width: 430px) { .attendance-photo-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .activity-heading { align-items: flex-start; flex-wrap: wrap; }.activity-search { flex: 1 0 100%; max-width: none; order: 2; }.activity-tools { width: 100%; justify-content: space-between; order: 3; } }