:root {
    --ink: #101a18;
    --ink-soft: #4f5f59;
    --blue: #00733d;
    --blue-dark: #005d31;
    --blue-soft: #edf8f2;
    --cyan: #d4a20b;
    --green: #078144;
    --green-dark: #006536;
    --green-soft: #ecf8f1;
    --gold: #c89100;
    --gold-dark: #a97500;
    --gold-soft: #fff9e9;
    --orange: #d72d36;
    --orange-soft: #fff1f2;
    --line: #d9e2dc;
    --line-strong: #c5d3ca;
    --muted: #75817d;
    --surface: #fff;
    --canvas: #f7faf8;
    --shadow: 0 5px 16px rgba(22, 63, 42, .07), 0 1px 3px rgba(22, 63, 42, .05);
    --radius: 18px;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 50% 7%, rgba(7, 84, 216, .035), transparent 34rem),
        var(--canvas);
    color: var(--ink);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1; }
.container-fluid { max-width: 1536px; }

.app-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 9px rgba(22, 48, 79, .055);
    backdrop-filter: blur(14px);
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 24px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand:hover, .brand:focus { color: var(--ink); }
.brand > strong { font-size: 25px; font-weight: 850; letter-spacing: -.035em; }
.brand-pin { position: relative; display: grid; place-items: center; width: 42px; height: 49px; flex: 0 0 42px; border-radius: 22px 22px 22px 6px; background: linear-gradient(145deg, #208bea, #0961ce); color: #fff; transform: rotate(-2deg); box-shadow: 0 7px 17px rgba(7,84,216,.19); }
.brand-pin::after { content: ""; position: absolute; inset: 7px; border: 2px solid rgba(255,255,255,.88); border-radius: 50%; }
.brand-pin span { position: relative; z-index: 1; font-size: 23px; font-weight: 850; transform: rotate(2deg); }
.header-divider { width: 1px; height: 40px; background: var(--line); }
.institution-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.institution-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--ink-soft); font-size: 20px; }
.institution-name strong { overflow: hidden; max-width: 530px; font-size: 18px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.report-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 16px; border: 1px solid #cfd9e8; border-radius: 12px; background: #fff; color: var(--blue); font-size: 14px; font-weight: 750; text-decoration: none; transition: .2s ease; }
.report-link:hover { border-color: #a9c2e9; background: #f7faff; color: var(--blue-dark); transform: translateY(-1px); }
.report-link i { font-size: 20px; }
.terminal-profile { display: flex; align-items: center; gap: 10px; }
.profile-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d7e1ec; border-radius: 50%; background: linear-gradient(145deg, #edf4fd, #dce9f8); color: var(--ink); }
.profile-copy { display: flex; flex-direction: column; line-height: 1.1; }
.profile-copy small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.profile-copy strong { margin-top: 3px; color: var(--ink); font-size: 13px; }

.content-wrap { padding: 19px 50px 24px; }
.page-intro { display: grid; grid-template-columns: 1fr minmax(420px, auto) 1fr; align-items: center; min-height: 95px; }
.intro-date, .intro-clock { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 17px; font-weight: 520; }
.intro-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--blue); font-size: 25px; }
.intro-title { text-align: center; }
.intro-title h1 { margin: 0; color: var(--ink); font-size: clamp(27px, 2.35vw, 36px); font-weight: 850; letter-spacing: -.035em; line-height: 1.1; }
.intro-title p { margin: 7px 0 0; color: var(--ink-soft); font-size: 15px; }
.intro-clock { justify-content: flex-end; color: var(--ink); font-size: 22px; font-variant-numeric: tabular-nums; }
.intro-clock > i { color: var(--blue); font-size: 26px; }
.intro-clock time { font-weight: 650; }
.intro-clock small { font-size: .72em; }

.work-grid { display: grid; grid-template-columns: minmax(475px, .98fr) minmax(525px, 1.02fr); gap: 18px; align-items: stretch; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.scanner-panel { padding: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.panel-title { display: flex; align-items: center; gap: 11px; }
.panel-title h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 800; }
.title-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 19px; box-shadow: 0 6px 13px rgba(7,84,216,.18); }
.camera-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #f6f8fb; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.camera-status .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ba9ba; }
.camera-status.is-on { border-color: #bfe8d6; background: var(--green-soft); color: var(--green-dark); }
.camera-status.is-on .status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(7,152,91,.09); }
.camera-status.is-error { border-color: #f0c7c9; background: #fff2f2; color: #b53238; }
.camera-status.is-error .status-dot { background: #d84a50; }

.camera-frame { position: relative; overflow: hidden; min-height: 225px; aspect-ratio: 16 / 6.2; border-radius: 14px; background: #10213b; isolation: isolate; }
.qr-reader { position: absolute; inset: 0; overflow: hidden; }
.qr-reader video, .qr-reader canvas { width: 100% !important; height: 100% !important; border: 0 !important; object-fit: cover !important; }
.camera-placeholder { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(145deg, #edf5ff, #dce9f7); text-align: center; }
.camera-placeholder::before, .camera-placeholder::after { content: ""; position: absolute; width: 74%; height: 55%; border: 2px solid rgba(7,84,216,.09); transform: skew(-18deg); }
.camera-placeholder::after { width: 54%; height: 42%; transform: skew(13deg); }
.camera-placeholder.is-hidden { display: none; }
.placeholder-qr { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 15px; background: #fff; color: var(--blue); font-size: 30px; box-shadow: 0 9px 26px rgba(7,84,216,.13); }
.camera-placeholder strong, .camera-placeholder small, .btn-camera-start { position: relative; z-index: 1; }
.camera-placeholder strong { color: var(--ink); font-size: 15px; }
.camera-placeholder small { margin-top: 4px; color: var(--ink-soft); font-size: 11px; }
.btn-camera-start { margin-top: 14px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 750; box-shadow: 0 7px 17px rgba(7,84,216,.2); }
.scan-target { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(190px, 38%); aspect-ratio: 1.38; transform: translate(-50%, -55%); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.camera-frame.is-active .scan-target { opacity: 1; }
.target-corner { position: absolute; width: 37px; height: 37px; border-color: #22d5ff; border-style: solid; filter: drop-shadow(0 0 5px rgba(34,213,255,.9)); }
.target-tl { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 9px 0 0; }
.target-tr { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 9px 0 0; }
.target-bl { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 9px; }
.target-br { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 9px; }
.scan-beam { position: absolute; left: 9px; right: 9px; top: 12px; height: 2px; border-radius: 5px; background: linear-gradient(90deg, transparent, #25dafd 18%, #fff 50%, #25dafd 82%, transparent); box-shadow: 0 0 12px #25dafd; animation: scanBeam 2.3s ease-in-out infinite; }
@keyframes scanBeam { 0%,100% { transform: translateY(0); opacity:.55; } 50% { transform: translateY(98px); opacity:1; } }
.camera-instruction { position: absolute; z-index: 4; left: 50%; bottom: 7px; display: flex; align-items: center; gap: 13px; min-width: 275px; padding: 8px 22px; border-radius: 10px; background: rgba(9,17,27,.75); color: #fff; font-size: 13px; justify-content: center; transform: translateX(-50%); backdrop-filter: blur(5px); }
.camera-instruction i { font-size: 19px; }
.processing-overlay { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; background: rgba(8,24,45,.83); color: #fff; backdrop-filter: blur(4px); }
.processing-overlay .spinner-border { color: #3adbb3; }

.camera-controls { display: flex; justify-content: flex-end; gap: 8px; min-height: 26px; margin-top: 7px; }
.camera-picker { position: relative; display: inline-flex; align-items: center; max-width: 220px; color: var(--muted); font-size: 10px; }
.camera-picker i { position: absolute; left: 8px; pointer-events: none; }
.camera-picker select { max-width: 220px; height: 27px; padding: 2px 24px 2px 25px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink-soft); font-size: 10px; }
.btn-camera-stop { height: 27px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 650; }
.camera-picker select:disabled, .btn-camera-stop:disabled { opacity: .48; }
.option-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; color: var(--ink-soft); font-size: 12px; }
.option-divider::before, .option-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.dni-form { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dni-field { position: relative; }
.dni-field > i { position: absolute; top: 50%; left: 17px; color: #9ca8b7; transform: translateY(-50%); }
.dni-field input { width: 100%; height: 42px; padding: 8px 60px 8px 48px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; color: var(--ink); font-size: 14px; letter-spacing: .08em; transition: .18s ease; }
.dni-field input:focus { border-color: #7aa9ed; box-shadow: 0 0 0 3px rgba(7,84,216,.09); }
.dni-field > span { position: absolute; top: 50%; right: 13px; color: #99a7b8; font-size: 9px; transform: translateY(-50%); }
.btn-register { height: 43px; border: 0; border-radius: 9px; background: linear-gradient(90deg, #0952ce, #0864de); color: #fff; font-size: 13px; font-weight: 780; box-shadow: 0 7px 14px rgba(7,84,216,.14); }
.btn-register:hover { background: linear-gradient(90deg, #0646bd, #0757c9); }
.btn-register:disabled { background: #98add0; box-shadow: none; }
.btn-register i { margin-right: 10px; }
.movement-status { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 11px; }
.movement-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.movement-option > span { text-align: center; }
.movement-option.is-active { border-color: #23ae79; background: linear-gradient(90deg, #f7fffb, var(--green-soft)); color: var(--green); }
.movement-option.is-active > i:last-child::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.movement-option.is-exit-active { border-color: #efb867; background: var(--orange-soft); color: var(--orange); }

.right-column { display: grid; grid-template-rows: minmax(190px, .78fr) minmax(260px, 1.22fr); gap: 18px; }
.station-panel { display: grid; grid-template-columns: minmax(310px, 1fr) minmax(250px, .82fr); overflow: hidden; padding: 15px; }
.station-panel { transition: border-color .2s ease, box-shadow .2s ease; }
.station-panel.is-verified { border-color: #b9e5d0; }
.station-panel.is-unverified { border-color: #efc0c3; box-shadow: 0 4px 12px rgba(174,48,55,.08); }
.station-copy { padding: 5px 10px; }
.station-title { display: flex; align-items: center; gap: 14px; }
.station-marker { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 27px; }
.station-eyebrow { display: block; color: var(--green-dark); font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.station-title h2 { margin: 3px 0 0; color: var(--green-dark); font-size: 22px; font-weight: 830; letter-spacing: -.025em; }
.station-panel.is-unverified .station-marker { background: #fff0f1; color: #c33d44; }
.station-panel.is-unverified .station-eyebrow,
.station-panel.is-unverified .station-title h2,
.station-panel.is-unverified .station-copy > p { color: #a82f36; }
.station-verify-btn { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; margin-left: auto; border: 1px solid #cce7da; border-radius: 9px; background: #f6fdf9; color: var(--green); font-size: 11px; transition: .18s ease; }
.station-verify-btn:hover { border-color: #9fd5bb; background: var(--green-soft); }
.station-verify-btn:disabled { opacity: .7; }
.station-verify-btn.is-loading i { animation: verifySpin .8s linear infinite; }
@keyframes verifySpin { to { transform: rotate(360deg); } }
.station-copy > p { margin: 16px 0 13px; color: var(--green-dark); font-size: 13px; font-weight: 700; }
.station-details { display: grid; gap: 8px; margin: 0; }
.station-details > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.station-details dt { color: var(--ink-soft); font-size: 11px; font-weight: 550; }
.station-details dt i { width: 23px; color: #71829a; }
.station-details dd { margin: 0; color: var(--green-dark); font-size: 11px; font-weight: 760; text-align: right; }
.station-details dd.is-online { color: var(--green); }
.station-details dd.is-offline { color: #c53e43; }
.station-checked { display: block; margin-top: 9px; color: #91a0b2; font-size: 8px; font-weight: 650; }
.station-map { position: relative; overflow: hidden; min-height: 180px; border-radius: 14px; background: #f3f3ef; }
.station-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45)); }
.map-road { position: absolute; z-index: 1; display: block; background: #fff; box-shadow: 0 0 0 1px #e2e3dd; }
.road-a { top: -8%; left: 22%; width: 22px; height: 120%; transform: rotate(6deg); }
.road-b { top: -10%; left: 65%; width: 18px; height: 130%; transform: rotate(28deg); }
.road-c { top: 34%; left: -5%; width: 112%; height: 22px; transform: rotate(8deg); }
.road-d { top: 73%; left: -8%; width: 118%; height: 18px; transform: rotate(-14deg); }
.map-block { position: absolute; z-index: 0; display: block; border-radius: 4px; background: #e1e6df; }
.block-a { top: 12%; left: 7%; width: 70px; height: 45px; transform: rotate(7deg); }
.block-b { right: 8%; bottom: 10%; width: 80px; height: 50px; transform: rotate(-12deg); }
.block-c { top: 49%; left: 43%; width: 95px; height: 54px; transform: rotate(6deg); }
.map-radius { position: absolute; z-index: 2; top: 50%; left: 52%; width: 135px; height: 135px; border: 1.5px solid #14b66d; border-radius: 50%; background: rgba(16,185,111,.08); transform: translate(-50%,-50%); }
.map-pin { position: absolute; z-index: 3; top: 50%; left: 52%; display: grid; place-items: center; width: 42px; height: 50px; border-radius: 24px 24px 24px 7px; background: linear-gradient(145deg, #0aae68, #07894f); color: #fff; font-size: 16px; transform: translate(-50%,-58%) rotate(-3deg); box-shadow: 0 6px 15px rgba(7,137,79,.23); }
.map-pin i { transform: rotate(3deg); }
.station-panel.is-unverified .map-radius { border-color: #d65359; background: rgba(214,83,89,.07); }
.station-panel.is-unverified .map-pin { background: linear-gradient(145deg, #d9555b, #b63137); box-shadow: 0 6px 15px rgba(182,49,55,.2); }

.identified-panel { padding: 19px 21px; border-color: #b9e5d0; }
.identified-label { color: var(--green-dark); font-size: 12px; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
.identified-label i { margin-right: 7px; }
.identified-empty { min-height: 215px; display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 20px; padding: 15px 12px; }
.waiting-avatar { display: grid; place-items: center; width: 86px; height: 86px; border: 2px dashed #9ed7be; border-radius: 50%; background: var(--green-soft); color: #50aa81; font-size: 31px; }
.identified-empty strong { display: block; color: var(--ink); font-size: 21px; }
.identified-empty p { max-width: 390px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.waiting-status { align-self: center; padding: 8px 12px; border-radius: 999px; background: #f0f4f8; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.identified-person { min-height: 215px; display: grid; grid-template-columns: 138px minmax(0,1fr) 168px; align-items: center; gap: 20px; padding-top: 9px; }
.identified-photo-wrap { position: relative; width: 132px; height: 132px; }
.identified-photo-wrap img { width: 100%; height: 100%; border: 3px solid var(--green); border-radius: 50%; background: var(--green-soft); object-fit: cover; }
.photo-check { position: absolute; right: 1px; bottom: 6px; display: grid; place-items: center; width: 31px; height: 31px; border: 3px solid #fff; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; }
.identified-data { position: relative; min-width: 0; }
.identified-data h3 { overflow: hidden; margin: 0 0 9px; color: var(--ink); font-size: clamp(20px, 2vw, 27px); font-weight: 850; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.identified-data p { margin: 6px 0; color: var(--ink); font-size: 12px; }
.identified-data p i { width: 25px; color: #506a91; font-size: 15px; }
.identified-data p strong { font-weight: 650; }
.identified-data time { display: inline-block; margin: 1px 0 0 25px; color: var(--green); font-size: 23px; font-weight: 850; font-variant-numeric: tabular-nums; }
.role-label { position: absolute; top: 39px; right: 0; padding: 4px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .06em; }
.registered-success { min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; border: 1px solid #c8ead9; border-radius: 13px; background: linear-gradient(145deg, #f8fffb, #eaf9f2); color: var(--green-dark); text-align: center; }
.registered-success > span { display: grid; place-items: center; width: 61px; height: 61px; margin-bottom: 12px; border-radius: 50%; background: var(--green); color: #fff; font-size: 28px; box-shadow: 0 8px 18px rgba(7,152,91,.2); }
.registered-success strong { font-size: 12px; line-height: 1.45; }
.registered-success small { margin-top: 7px; color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: .09em; }

.recent-panel { overflow: hidden; margin-top: 16px; }
body.is-mobile-or-tablet #recentRecords { display: none !important; }
.recent-heading { display: grid; grid-template-columns: minmax(210px,.75fr) minmax(420px,1.25fr) auto; align-items: center; gap: 20px; min-height: 78px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.recent-title-block small { display: block; margin-bottom: 3px; color: #52709a; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.recent-heading h2 { margin: 0; color: var(--ink); font-size: 19px; font-weight: 850; }
.attendance-search { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; margin: 0; color: var(--ink); font-size: 13px; font-weight: 800; }
.attendance-search-field { position: relative; display: block; }
.attendance-search-field i { position: absolute; top: 50%; left: 14px; color: var(--green); font-size: 11px; transform: translateY(-50%); }
.attendance-search-field input { width: 100%; height: 38px; padding: 7px 14px 7px 37px; border: 1.5px solid #41a956; border-radius: 9px; outline: none; color: var(--ink); font-size: 11px; font-weight: 500; }
.attendance-search-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(7,152,91,.1); }
.recent-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: #58739b; white-space: nowrap; }
.recent-actions > span { color: var(--muted); font-size: 8px; }
.recent-actions small { font-size: 8px; font-weight: 700; }
.recent-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: #52709a; font-size: 9px; font-weight: 750; }
.recent-actions button:hover { background: var(--blue-soft); color: var(--blue); }
.attendance-table-wrap { max-height: 430px; }
.attendance-table { min-width: 1360px; color: var(--ink); font-size: 14px; line-height: 1.35; }
.attendance-table thead { position: sticky; top: 0; z-index: 2; }
.attendance-table thead th { padding: 13px 11px; border: 1px solid #b6dcec; background: #e8f4fc; color: #09284c; font-size: 12px; font-weight: 850; text-align: center; white-space: nowrap; }
.attendance-table tbody td { padding: 12px 11px; border: 1px solid #b5dbea; color: #11365a; white-space: nowrap; }
.attendance-table tbody tr { background: #f7fcfd; transition: background .15s ease; }
.attendance-table tbody tr.is-alt { background: #d9f5f4; }
.attendance-table tbody tr:hover { background: #c5edf0; }
.attendance-table tbody tr.has-photo { cursor: zoom-in; }
.attendance-table tbody tr:last-child td { border-bottom: 0; }
.attendance-table .cell-id, .attendance-table .cell-code, .attendance-table .cell-date,
.attendance-table .cell-time, .attendance-table .cell-dni, .attendance-table .cell-center { text-align: center; font-variant-numeric: tabular-nums; }
.attendance-table .cell-id, .attendance-table .cell-code, .attendance-table .cell-time { font-family: Consolas, "SFMono-Regular", monospace; }
.attendance-table .cell-registered { color: #007b52; font-weight: 850; }
.attendance-table .cell-name { min-width: 330px; color: #062f57; font-size: 14px; font-weight: 820; }
.level-code { color: #0b5e99; font-weight: 900; }
.level-code.level-pri { color: #007c5c; }
.attendance-state { display: inline-flex; min-width: 96px; justify-content: center; padding: 7px 10px; border-radius: 7px; background: #eef2f6; color: #708094; font-size: 11px; font-weight: 850; }
.attendance-state.is-complete { background: #dff7eb; color: #08784d; }
.attendance-state.is-late { background: #fff0d8; color: #a85e00; }
.attendance-state.is-absent { background: #ffe5e7; color: #b63038; }
.attendance-state.is-off { background: #edf0f4; color: #798493; }
.person-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.person-avatar { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid #d4dfec; border-radius: 50%; background: linear-gradient(145deg, #eaf2fb, #d7e6f5); color: var(--ink); font-size: 9px; font-weight: 850; }
.person-details { display: flex; min-width: 0; flex-direction: column; }
.person-details strong { overflow: hidden; max-width: 300px; color: var(--ink); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.person-details small { display: none; }
.movement-pill, .method-pill, .state-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #c7ead9; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-weight: 700; white-space: nowrap; }
.movement-pill::before { content: "\f090"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.movement-pill.is-exit { border-color: #f1d6ad; background: var(--orange-soft); color: #b66a0e; }
.movement-pill.is-exit::before { content: "\f08b"; }
.method-pill { border-color: var(--line); background: #f5f7fa; color: var(--ink-soft); }
.state-pill::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.state-pill.is-late { border-color: #f0d3a8; background: var(--orange-soft); color: #a7610b; }
.table-message { padding: 24px !important; color: var(--muted) !important; text-align: center; }

.app-footer { min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid var(--line); background: #eff5fb; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.app-footer i { font-size: 3px; }

.swal2-popup { border-radius: 20px !important; font-family: Inter, "Segoe UI", sans-serif !important; }
.swal2-title { color: var(--ink) !important; font-size: 23px !important; }
.swal2-html-container { color: var(--ink-soft) !important; font-size: 14px !important; }
.swal-result { padding: 3px 2px; text-align: center; }
.swal-result .result-name { display: block; margin-bottom: 4px; color: var(--ink); font-size: 18px; font-weight: 850; }
.swal-result .result-role { display: inline-block; margin-bottom: 13px; padding: 5px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; font-weight: 850; }
.swal-result .result-meta { display: flex; justify-content: center; gap: 18px; }
.swal-result .result-meta span { display: flex; flex-direction: column; }
.swal-result .result-meta small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.swal-result .result-meta strong { color: var(--ink); font-size: 14px; }

/* Identidad institucional verde y dorada del módulo de marcación */
body {
    background:
        radial-gradient(circle at 52% 4%, rgba(0, 115, 61, .045), transparent 35rem),
        linear-gradient(180deg, #fbfdfc 0, var(--canvas) 52%, #f4f8f5 100%);
}
.app-header { border-bottom-color: #e8dfc7; box-shadow: 0 2px 10px rgba(38, 69, 51, .07); }
.header-inner { min-height: 82px; }
.brand { gap: 13px; }
.brand-pin { width: 46px; height: 54px; flex-basis: 46px; background: linear-gradient(150deg, #078144, #005e31); box-shadow: 0 7px 17px rgba(0, 99, 52, .2); }
.brand-pin::after { inset: 8px; border-color: rgba(255,255,255,.76); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { color: #111b18; font-size: 27px; font-weight: 880; letter-spacing: -.04em; }
.brand-copy small { margin-top: 8px; color: var(--green-dark); font-size: 9px; font-weight: 850; letter-spacing: .045em; }
.header-divider { height: 48px; background: #d7ded9; }
.institution-icon { width: 48px; height: 55px; overflow: hidden; border-radius: 0; }
.institution-icon img { width: 45px; height: 52px; object-fit: contain; }
.institution-name strong { color: #111a17; font-size: 19px; font-weight: 780; }
.header-actions { gap: 24px; }
.report-link { min-height: 50px; border: 1.5px solid #d4aa39; background: #fffdf8; color: var(--gold-dark); box-shadow: 0 3px 8px rgba(170, 119, 0, .06); }
.report-link:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-dark); }
.terminal-profile { position: relative; display: flex; align-items: center; gap: 11px; padding-left: 22px; border-left: 1px solid #d8ded9; color: var(--ink); text-decoration: none; }
.terminal-profile:hover { color: var(--green-dark); }
.profile-avatar { position: relative; width: 48px; height: 48px; border-color: #cad8cf; background: linear-gradient(145deg, #f8faf9, #e5eee8); color: #17221e; font-size: 20px; }
.profile-online { position: absolute; right: -1px; bottom: 2px; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--green); }
.profile-copy small { color: var(--green-dark); }
.profile-chevron { margin-left: 4px; color: #24322c; font-size: 10px; }
.content-wrap { padding-top: 16px; }
.page-intro { grid-template-columns: minmax(320px,1fr) minmax(560px,1.7fr) minmax(300px,1fr); min-height: 120px; gap: 22px; }
.intro-date { width: fit-content; min-height: 66px; padding: 11px 22px; border: 1px solid #b9d9c7; border-radius: 16px; background: #f7fcf9; color: #075e34; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.intro-icon { color: var(--green); }
.intro-title h1 { color: #111a17; font-size: clamp(31px,2.55vw,42px); }
.intro-title p { color: #626d68; font-size: 16px; }
.intro-clock { justify-self: end; min-width: 285px; min-height: 76px; padding: 10px 22px; border: 1px solid #dfe2de; border-radius: 16px; background: #fff; font-size: 28px; box-shadow: var(--shadow); }
.intro-clock > i { color: var(--gold); font-size: 40px; }
.work-grid { grid-template-columns: minmax(500px,.98fr) minmax(560px,1.02fr); gap: 20px; }
.panel { border-color: #dbe3de; border-radius: 16px; }
.scanner-panel { padding: 19px 20px 17px; border-color: #e2d6b6; }
.panel-heading { align-items: flex-start; margin-bottom: 10px; }
.panel-title { align-items: flex-start; }
.title-icon { width: 35px; height: 35px; border: 1.5px solid #31a66a; border-radius: 9px; background: #f5fcf8; color: var(--green); box-shadow: none; }
.panel-title-copy { display: flex; flex-direction: column; }
.panel-title-copy small { color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: .055em; }
.panel-title-copy h2 { margin-top: 8px; color: #101816; font-size: 22px; }
.camera-status { margin-top: 8px; border: 0; background: transparent; color: var(--green-dark); }
.camera-status.is-on { border: 0; background: transparent; }
.camera-frame { min-height: 300px; aspect-ratio: 16 / 7.7; border: 1px solid #d4ded7; background: #102019; }
.camera-placeholder { background: linear-gradient(145deg, #eef8f2, #dfeee5); }
.camera-placeholder::before,.camera-placeholder::after { border-color: rgba(0,115,61,.1); }
.placeholder-qr { color: var(--green); box-shadow: 0 9px 26px rgba(0,115,61,.13); }
.btn-camera-start { background: linear-gradient(90deg,#05723c,#008447); box-shadow: 0 7px 17px rgba(0,115,61,.2); }
.target-corner { border-color: #f0c62c; filter: drop-shadow(0 0 5px rgba(240,198,44,.88)); }
.scan-beam { background: linear-gradient(90deg,transparent,#e2b309 18%,#fff 50%,#e2b309 82%,transparent); box-shadow: 0 0 12px #e2b309; }
.camera-instruction { background: rgba(0,67,35,.84); }
.camera-picker select:focus,.dni-field input:focus { border-color: #4baa76; box-shadow: 0 0 0 3px rgba(0,115,61,.09); }
.option-divider { color: #4e5f57; }
.btn-register { background: linear-gradient(90deg,#006b38,#008445); box-shadow: 0 7px 14px rgba(0,104,55,.17); }
.btn-register:hover { background: linear-gradient(90deg,#005d31,#00753e); }
.btn-register:disabled { background: #91b5a2; }
.movement-option.is-active { border-color: #28a66a; background: linear-gradient(90deg,#f9fffb,#eaf8f0); color: #087342; }
.movement-option.is-exit-active { border-color: #ef6d73; background: #fff6f6; color: #d52631; }
.right-column { grid-template-rows: minmax(250px,.94fr) minmax(250px,1.06fr); gap: 20px; }
.station-panel { border-color: #b9ddc9; background: linear-gradient(145deg,#fff,#fbfefc); }
.station-marker { background: linear-gradient(145deg,#0b8d4b,#006b38); color: #fff; box-shadow: 0 7px 15px rgba(0,107,56,.16); }
.station-eyebrow { color: #137042; }
.station-title h2 { color: #08713e; }
.station-copy > p { margin: 10px 0; color: #3e5449; }
.station-gps-summary { display: grid; grid-template-columns:1fr 1fr; gap: 8px; margin: 8px 0 10px; }
.station-gps-summary>div { display:flex; min-height:55px; align-items:center; gap:10px; padding:8px 10px; border:1px solid #d9e3dd; border-radius:10px; background:#fff; }
.station-gps-summary>div>i { width:27px; color:#31483d; font-size:20px; text-align:center; }
.station-gps-summary span { display:flex; flex-direction:column; color:#64716b; font-size:8px; }
.station-gps-summary strong { margin-top:3px; color:var(--green-dark); font-size:15px; }
.station-details { grid-template-columns:1fr 1fr; gap:6px 12px; }
.station-details>div { display:grid; min-width:0; grid-template-columns:70px minmax(0,1fr); gap:4px; }
.station-details dt { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.station-details dd { overflow:hidden; font-size:8px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.station-map { min-height: 225px; border: 1px solid #e4e6e1; }
.map-gps-badge { position:absolute; z-index:5; top:11px; right:11px; padding:6px 9px; border:1px solid #dce4df; border-radius:999px; background:rgba(255,255,255,.92); color:var(--green-dark); font-size:8px; font-weight:800; box-shadow:0 3px 8px rgba(31,63,47,.08); }
.map-gps-badge i { margin-right:4px; }
.map-radius { width: 165px; height: 165px; border-color: #087b44; background: rgba(8,123,68,.08); }
.map-pin { border:2px solid #e1b51f; background:linear-gradient(145deg,#087d43,#006433); }
.identified-panel { border-color:#b7ddc8; background:linear-gradient(145deg,#fff,#fcfffd); }
.identified-label { color:#08733f; }
.identified-photo-wrap img { border-color:#0b8a4a; box-shadow:0 0 0 2px #ddb220; }
.identified-data h3 { color:#101816; }
.identified-data p i { color:#30463b; }
.identified-data time { color:#078245; }
.role-label { background:var(--gold-soft); color:#8b6500; }
.registered-success { border-color:#c3e4d1; background:linear-gradient(145deg,#f9fffb,#eef9f3); color:#08723e; }
.registered-success>span { background:linear-gradient(145deg,#078b49,#006735); }
.recent-panel { border-color:#d7e2dc; }
.recent-title-block small { color:#08723e; }
.attendance-table thead th { border-color:#a8d1ba; background:#e5f4eb; color:#06482a; }
.attendance-table tbody td { border-color:#c7dfd1; color:#1b4230; }
.attendance-table tbody tr { background:#fbfefc; }
.attendance-table tbody tr.is-alt { background:#eef8f2; }
.attendance-table tbody tr:hover { background:#dff1e7; }
.attendance-table .cell-name { color:#073d25; }
.app-footer { border-top-color:#d6e1da; background:#edf6f1; color:#315342; }

@media (max-width: 1199.98px) {
    .content-wrap { padding-inline: 24px; }
    .page-intro { grid-template-columns: .8fr 1.4fr .8fr; }
    .intro-date { font-size: 14px; }
    .intro-clock { font-size: 18px; }
    .work-grid { grid-template-columns: minmax(430px,.95fr) minmax(470px,1.05fr); }
    .station-panel { grid-template-columns: 1fr 230px; }
    .identified-person { grid-template-columns: 112px minmax(0,1fr) 145px; gap: 14px; }
    .identified-photo-wrap { width: 106px; height: 106px; }
}

@media (max-width: 991.98px) {
    .header-inner { gap: 18px; }
    .institution-name strong { max-width: 320px; font-size: 15px; }
    .profile-copy { display: none; }
    .brand-copy small { display: none; }
    .page-intro { grid-template-columns: 1fr 1fr; gap: 5px 20px; padding: 16px 0; }
    .intro-title { grid-column: 1 / 3; grid-row: 1; }
    .intro-date { grid-column: 1; grid-row: 2; }
    .intro-clock { grid-column: 2; grid-row: 2; }
    .work-grid { grid-template-columns: 1fr; }
    .right-column { grid-template-columns: 1fr 1.35fr; grid-template-rows: auto; }
    .station-panel { grid-template-columns: 1fr; }
    .station-map { display: none; }
    .identified-person { grid-template-columns: 104px 1fr; }
    .registered-success { grid-column: 1 / 3; min-height: 74px; flex-direction: row; gap: 12px; }
    .registered-success > span { width: 42px; height: 42px; flex: 0 0 42px; margin: 0; font-size: 18px; }
    .registered-success small { margin: 0; }
}

@media (max-width: 1024px) and (pointer: coarse) {
    #recentRecords { display: none !important; }
}

@media (max-width: 767.98px) {
    .header-inner { min-height: 68px; padding-inline: 16px; }
    .brand-copy strong { font-size: 20px; }
    .brand-pin { width: 36px; height: 42px; flex-basis: 36px; }
    .institution-name, .header-divider { display: none; }
    .header-actions { gap: 10px; }
    .report-link { min-height: 41px; padding: 8px 11px; }
    .report-link span { display: none; }
    .terminal-profile { padding-left: 10px; }
    .profile-avatar { width: 38px; height: 38px; }
    .content-wrap { padding: 12px 15px 20px; }
    .page-intro { min-height: 120px; }
    .intro-title h1 { font-size: 25px; }
    .intro-title p { font-size: 12px; }
    .intro-date { min-height: 48px; padding: 7px 10px; font-size: 12px; }
    .intro-clock { min-width: 0; min-height: 52px; padding: 7px 11px; font-size: 16px; }
    .intro-clock > i, .intro-icon { font-size: 20px; }
    .right-column { grid-template-columns: 1fr; }
    .station-panel { grid-template-columns: 1fr minmax(180px,.65fr); }
    .station-map { display: block; min-height: 165px; }
    .identified-empty { grid-template-columns: 66px 1fr; min-height: 160px; }
    .waiting-avatar { width: 64px; height: 64px; font-size: 23px; }
    .waiting-status { grid-column: 1 / 3; justify-self: start; }
    .identified-person { grid-template-columns: 100px 1fr; }
    .identified-photo-wrap { width: 94px; height: 94px; }
    .identified-data h3 { font-size: 20px; }
    .role-label { position: static; display: inline-flex; margin: 6px 0 0 25px; }
}

@media (max-width: 575.98px) {
    .brand { gap: 8px; }
    .brand-pin { width: 34px; height: 40px; flex-basis: 34px; }
    .brand-copy strong { font-size: 17px; }
    .header-actions { gap: 7px; }
    .report-link { min-height: 38px; padding: 7px 9px; }
    .profile-avatar { width: 38px; height: 38px; font-size: 16px; }
    .profile-chevron { display: none; }
    .page-intro { grid-template-columns: 1fr auto; }
    .intro-title { text-align: left; }
    .intro-title h1 { max-width: 310px; font-size: 22px; }
    .intro-title p { max-width: 310px; }
    .intro-date { gap: 4px; }
    .intro-icon { width: 25px; }
    .intro-date #currentDate { max-width: 175px; }
    .panel { border-radius: 14px; }
    .scanner-panel { padding: 14px; }
    .panel-title h2 { font-size: 15px; }
    .panel-title-copy small { font-size: 8px; }
    .panel-title-copy h2 { font-size: 14px; white-space: nowrap; }
    .title-icon { width: 34px; height: 34px; font-size: 16px; }
    .camera-status { padding: 6px 8px; font-size: 9px; }
    .camera-frame { min-height: 205px; aspect-ratio: 4 / 2.65; }
    .scan-target { width: min(175px,55%); aspect-ratio: 1.2; }
    @keyframes scanBeam { 0%,100% { transform: translateY(0); opacity:.55; } 50% { transform: translateY(105px); opacity:1; } }
    .camera-instruction { min-width: 230px; padding-inline: 12px; font-size: 11px; }
    .movement-option { padding-inline: 9px; font-size: 10px; }
    .station-panel { grid-template-columns: 1fr; }
    .station-gps-summary,.station-details { grid-template-columns: 1fr; }
    .station-map { min-height: 145px; }
    .identified-panel { padding: 15px; }
    .identified-person { grid-template-columns: 82px minmax(0,1fr); gap: 10px; }
    .identified-photo-wrap { width: 78px; height: 78px; }
    .identified-data h3 { font-size: 17px; }
    .identified-data p { font-size: 10px; }
    .identified-data time { font-size: 19px; }
    .registered-success { grid-column: 1 / 3; padding: 10px; }
    .registered-success > span { display: none; }
    .recent-heading { grid-template-columns: 1fr; gap: 10px; padding-block: 14px; }
    .attendance-search { grid-template-columns: 1fr; gap: 5px; }
    .recent-actions { justify-content: space-between; }
    .recent-actions > span, .recent-actions small { display: none; }
    .attendance-table thead th, .attendance-table tbody td { padding-inline: 8px; }
    .person-cell { min-width: 170px; }
    .person-details strong { max-width: 180px; }
}

@media print {
    .app-header, .scanner-panel, .station-panel, .app-footer, #refreshStatus { display: none !important; }
    body { background: #fff; }
    .content-wrap { padding: 0; }
    .page-intro { min-height: 80px; }
    .work-grid { display: block; }
    .identified-panel { margin-bottom: 15px; box-shadow: none; }
    .recent-panel { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}