/* ==================== RESET & BASE ==================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
    --bg-primary:#071320;
    --bg-secondary:#0E1A2D;
    --bg-card:#162338;
    --bg-card2:#1C2B44;
    --accent-blue:#3B82F6;
    --accent-cyan:#38BDF8;
    --accent-green:#22C55E;
    --accent-red:#EF4444;
    --accent-yellow:#F59E0B;
    --text-primary:#F8FAFC;
    --text-secondary:#CBD5E1;
    --text-muted:#94A3B8;
    --border:#25354F;
    --border-light:#314761;
}

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    color:var(--text-primary);
    background:
        radial-gradient(circle at 20% 35%, rgba(59,130,246,.05), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(56,189,248,.04), transparent 40%),
        linear-gradient(180deg, #07111C 0%, #0A1625 45%, #0D1B2D 100%);
    background-attachment: fixed;
}

/* ==================== LAYOUT ==================== */
.app-shell {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 90px 1fr 40px;
    grid-template-columns: 1fr 400px;
    grid-template-areas:
        "topbar topbar"
        "camera sidebar"
        "footer footer";
}

/* ==================== TOPBAR ==================== */
.topbar{
    grid-area: topbar;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:90px;
    gap: 12px;
    padding:0 24px;
    background: rgba(11,21,36,.94);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(59,130,246,0.12);
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.topbar-left{ display:flex; align-items:center; gap:18px; }

.brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.logo-img{
    height: auto;
    width: clamp(120px, 18vw, 220px);
    max-height: 50px;
    display: block;
    object-fit: contain;
}

.topbar-divider{ display:none; }

.clock-display { text-align: right; }

.clock-time{
    font-size:30px;
    font-weight:800;
    color:#fff;
    letter-spacing:-1px;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.clock-date{
    font-size:13px;
    color:#fff;
    font-weight:500;
    margin-top:5px;
    text-transform:none;
}

/* ==================== CAMERA AREA ==================== */
.camera-area {
    grid-area: camera;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 18px 22px;
    overflow: hidden;
}

.camera-frame {
    position: relative;
    width: 100%;
    max-width: 780px;
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, #404040 0%, #363636 55%, #2F2F2F 100%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 30px 90px rgba(0,0,0,.55),
        0 0 45px rgba(59,130,246,.05);
}

#face_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.camera-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 72% 72% at center, transparent 42%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
    z-index: 1;
}

#face_overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* ==================== GUÍA OVAL ==================== */
.face-guide {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -52%);
    width: 210px;
    height: 280px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.18);
    pointer-events: none;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
    z-index: 3;
}

.face-guide.idle {
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 0 18px rgba(255,255,255,.05);
}

.face-guide.detecting {
    border-color: rgba(59,130,246,0.85);
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.12),
        0 0 40px rgba(59,130,246,0.35),
        inset 0 0 40px rgba(59,130,246,0.06);
    animation: oval-pulse-blue 1s ease-in-out infinite;
}

.face-guide.recognized {
    border-color: rgba(16,185,129,0.9);
    box-shadow:
        0 0 0 3px rgba(16,185,129,0.15),
        0 0 50px rgba(16,185,129,0.4),
        inset 0 0 40px rgba(16,185,129,0.07);
    animation: none;
}

.face-guide.error {
    border-color: rgba(239,68,68,.95);
    box-shadow:
        0 0 0 3px rgba(239,68,68,.15),
        0 0 55px rgba(239,68,68,.45),
        inset 0 0 40px rgba(239,68,68,.08);
    animation: none;
}

@keyframes oval-pulse-blue {
    0%,100% { box-shadow: 0 0 0 3px rgba(59,130,246,0.10), 0 0 25px rgba(59,130,246,0.25), inset 0 0 25px rgba(59,130,246,0.04); }
    50%      { box-shadow: 0 0 0 5px rgba(59,130,246,0.18), 0 0 55px rgba(59,130,246,0.50), inset 0 0 50px rgba(59,130,246,0.09); }
}

/* Corner brackets */
.corner-guides {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -52%);
    width: 234px; height: 304px;
    pointer-events: none;
    z-index: 4;
}

.corner-guides span {
    position: absolute;
    width: 22px; height: 22px;
    border-color: rgba(255,255,255,0.65);
    border-style: solid;
    transition: border-color 0.5s;
}

.corner-guides span:nth-child(1) { top:0; left:0;  border-width:2.5px 0 0 2.5px; border-radius:5px 0 0 0; }
.corner-guides span:nth-child(2) { top:0; right:0; border-width:2.5px 2.5px 0 0; border-radius:0 5px 0 0; }
.corner-guides span:nth-child(3) { bottom:0; left:0;  border-width:0 0 2.5px 2.5px; border-radius:0 0 0 5px; }
.corner-guides span:nth-child(4) { bottom:0; right:0; border-width:0 2.5px 2.5px 0; border-radius:0 0 5px 0; }

.face-guide.detecting  ~ .corner-guides span { border-color: rgba(59,130,246,0.7); }
.face-guide.recognized ~ .corner-guides span { border-color: rgba(16,185,129,0.8); }
.face-guide.error      ~ .corner-guides span { border-color: rgba(239,68,68,0.7); }

/* Scan line */
.scan-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,0.5) 20%, rgba(59,130,246,1) 50%, rgba(59,130,246,0.5) 80%, transparent 100%);
    filter: drop-shadow(0 0 4px rgba(59,130,246,.45));
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity .4s, background .35s, filter .35s;
}

.face-guide.detecting ~ .scan-line{
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.45), rgba(59,130,246,1), rgba(59,130,246,.45), transparent);
    filter: drop-shadow(0 0 5px rgba(59,130,246,.55));
}

.face-guide.recognized ~ .scan-line{
    background: linear-gradient(90deg, transparent, rgba(16,185,129,.45), rgba(16,185,129,1), rgba(16,185,129,.45), transparent);
    filter: drop-shadow(0 0 8px rgba(16,185,129,.75));
}

.face-guide.error ~ .scan-line{
    background: linear-gradient(90deg, transparent, rgba(239,68,68,.45), rgba(239,68,68,1), rgba(239,68,68,.45), transparent);
    filter: drop-shadow(0 0 7px rgba(239,68,68,.65));
}

.scan-line.active {
    opacity: 1;
    animation: scan 2.4s ease-in-out infinite;
}

@keyframes scan {
    0%   { top: 15%; }
    50%  { top: 78%; }
    100% { top: 15%; }
}

/* Camera hint */
.camera-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 24px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(148,163,184,0.9);
    white-space: nowrap;
    z-index: 6;
    transition: opacity 0.3s, color 0.3s;
    letter-spacing: 0.2px;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 18px 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- Status card ---- */
.status-card {
    background:rgba(22,35,56,.88);
    backdrop-filter:blur(20px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.35s, box-shadow 0.35s;
    flex-shrink: 0;
}

.status-card-inner { display:flex; align-items:center; gap:12px; }

.status-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.35s;
}

.status-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

#face_status {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    transition: color 0.3s;
}

.status-card.state-idle .status-icon     { background:rgba(71,85,105,0.15); color:#64748B; }
.status-card.state-loading               { border-color: rgba(59,130,246,0.25); }
.status-card.state-loading .status-icon  { background:rgba(59,130,246,0.12); color:var(--accent-blue); }
.status-card.state-loading #face_status  { color: var(--accent-blue); }
.status-card.state-ready                 { border-color: rgba(16,185,129,0.2); }
.status-card.state-ready .status-icon    { background:rgba(16,185,129,0.1); color:var(--accent-green); }
.status-card.state-ready #face_status    { color: var(--accent-green); }
.status-card.state-detecting             { border-color: rgba(59,130,246,0.35); box-shadow:0 0 18px rgba(59,130,246,0.08); }
.status-card.state-detecting .status-icon{ background:rgba(59,130,246,0.15); color:var(--accent-blue); }
.status-card.state-detecting #face_status{ color: var(--accent-blue); }
.status-card.state-warning               { border-color: rgba(245,158,11,0.25); }
.status-card.state-warning .status-icon  { background:rgba(245,158,11,0.12); color:var(--accent-yellow); }
.status-card.state-warning #face_status  { color: var(--accent-yellow); }
.status-card.state-error                 { border-color: rgba(239,68,68,0.25); }
.status-card.state-error .status-icon    { background:rgba(239,68,68,0.12); color:var(--accent-red); }
.status-card.state-error #face_status    { color: var(--accent-red); }

/* ---- Result card ---- */
.result-card {
    background:rgba(22,35,56,.88);
    backdrop-filter:blur(20px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 18px 20px;
    text-align: center;
    display: none;
    flex-shrink: 0;
    animation: slideUp 0.38s cubic-bezier(0.34,1.4,0.64,1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

@keyframes slideUp {
    from { opacity:0; transform:translateY(24px) scale(0.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.result-card.entrada { border-color: rgba(16,185,129,0.35); box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 30px rgba(16,185,129,0.07); }
.result-card.salida  { border-color: rgba(239,68,68,0.35);  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 30px rgba(239,68,68,0.07); }
.result-card.error   { border-color: rgba(245,158,11,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }

.result-photo-wrap { display:inline-block; position:relative; margin-bottom:14px; }

#result_photo {
    width: 110px; height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: none;
    border: 3px solid transparent;
    outline: 2px solid rgba(255,255,255,0.06);
    outline-offset: 3px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    transition: border-color 0.3s, box-shadow 0.3s;
}

#result_photo_placeholder {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--bg-card2);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.result-card.entrada #result_photo { border-color: var(--accent-green); box-shadow: 0 0 0 4px rgba(16,185,129,0.12), 0 0 24px rgba(16,185,129,0.35); }
.result-card.salida  #result_photo { border-color: var(--accent-red);   box-shadow: 0 0 0 4px rgba(239,68,68,0.12),  0 0 24px rgba(239,68,68,0.3); }
.result-card.error   #result_photo { border-color: var(--accent-yellow); box-shadow: 0 0 0 4px rgba(245,158,11,0.10), 0 0 16px rgba(245,158,11,0.2); }

.result-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.result-card.entrada .result-badge { background: rgba(16,185,129,0.12); color: var(--accent-green);  border: 1px solid rgba(16,185,129,0.28); }
.result-card.salida  .result-badge { background: rgba(239,68,68,0.12);  color: var(--accent-red);    border: 1px solid rgba(239,68,68,0.28); }
.result-card.error   .result-badge { background: rgba(245,158,11,0.12); color: var(--accent-yellow); border: 1px solid rgba(245,158,11,0.25); }

#result_name   { font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:6px; line-height:1.2; }
#result_action { font-size:12px; font-weight:400; color:var(--text-muted);   margin-bottom:10px; line-height:1.4; }
#result_time   { font-size:28px; font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums; line-height:1; }

.result-card.entrada #result_time { color: var(--accent-green); }
.result-card.salida  #result_time { color: var(--accent-red); }
.result-card.error   #result_time { color: var(--text-muted); font-size:13px; letter-spacing:0; font-weight:500; }

#result_label { display:none; }

/* ==================== FOOTER ==================== */
.app-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-top: 1px solid rgba(30,41,59,0.5);
    background: rgba(11,21,36,.65);
    font-size: 10px;
    color:#AEB7C2;
    letter-spacing: 0.2px;
}

/* ==================== TECLADO NUMÉRICO ==================== */
.keypad-card {
    background: rgba(22,35,56,.88);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    flex-shrink: 0;
}

.keypad-display {
    background: rgba(7,19,32,.8);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

.keypad-display-icon{
    font-size:22px;
    color:var(--text-muted);
    transition:color .2s ease;
}

.keypad-display-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}

.keypad-display-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    min-height: 30px;
    word-break: break-all;
}

.keypad-display-value.has-value { color: var(--accent-blue); }

.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.key-btn {
    background: rgba(37,53,79,.7);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 700;
    height: 54px;
    cursor: pointer;
    transition:
    transform .08s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.key-btn:hover { background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.4); }

.key-btn:active,
.key-btn.pressed {
    transform: scale(.96);
    background: rgba(59,130,246,.35);
    border-color: rgba(59,130,246,.7);
    box-shadow: 0 0 12px rgba(59,130,246,.3);
}

.key-btn.key-backspace { background: rgba(71,85,105,.3); font-size:16px; color:var(--text-muted); }

.key-btn.key-backspace:active,
.key-btn.key-backspace.pressed {
    background: rgba(245,158,11,.2);
    border-color: rgba(245,158,11,.5);
    color: var(--accent-yellow);
}

.keypad-actions { display:grid; grid-template-columns:1fr 2fr; gap:8px; }

.key-btn.key-cancel {
    background: rgba(71,85,105,.2);
    border-color: var(--border);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    height: 42px;
    border-radius: 10px;
}

.key-btn.key-cancel:active,
.key-btn.key-cancel.pressed {
    background: rgba(239,68,68,.2);
    border-color: rgba(239,68,68,.5);
    color: var(--accent-red);
    transform: scale(0.95);
}

.key-btn.key-marcar {
    background: linear-gradient(135deg, rgba(59,130,246,.6), rgba(56,189,248,.45));
    border-color: rgba(59,130,246,.8);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    height: 42px;
    border-radius: 10px;
    letter-spacing: 0.5px;
	transition:
    background .20s ease,
    border-color .20s ease,
    box-shadow .20s ease,
    opacity .20s ease,
    transform .08s ease;
}

.key-btn.key-marcar:hover { background: linear-gradient(135deg, rgba(59,130,246,.45), rgba(56,189,248,.35)); }

.key-btn.key-marcar:active,
.key-btn.key-marcar.pressed {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(59,130,246,.6), rgba(56,189,248,.5));
    box-shadow: 0 0 20px rgba(59,130,246,.4);
}

.key-btn.key-marcar:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
    background:rgba(71,85,105,.25);
    border-color:var(--border);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .app-shell {
        grid-template-rows: 90px 1fr auto 38px;
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "camera" "sidebar" "footer";
        height: auto;
        overflow-y: auto;
    }

    html, body { overflow:auto; height:auto; }

    .camera-area { padding:12px; }
    .camera-frame { max-width:100%; aspect-ratio:4/3; }
    .face-guide { width:34vw; height:46vw; transform:translate(-50%,-50%); }
    .corner-guides { width:calc(34vw + 24px); height:calc(46vw + 24px); }
    .scan-line { width:37vw; }

    .sidebar { padding:0 12px 16px; flex-direction:row; flex-wrap:wrap; gap:10px; }
    .status-card, .result-card { flex:1 1 calc(50% - 5px); min-width:180px; }
}

@media (max-width: 500px) {
    .logo-img { width:clamp(100px, 40vw, 160px); }
    .topbar { height:90px; padding:0 14px; }
    .clock-date { font-size:11px; }
    .clock-time { font-size:22px; }
    .sidebar { flex-direction:column; }
    .status-card, .result-card { flex:none; width:100%; }
    .face-guide { display: none; }
    .corner-guides { display: none; }
    .scan-line { display: none; }
    .camera-hint { font-size: 10px; padding: 5px 12px; bottom: 4px; max-width: 90%; }
    .camera-area { padding:8px; }
    .camera-frame { max-width:100%; aspect-ratio:16/10; max-height:30vh; }
    .status-card { padding: 10px 12px; }
    .keypad-card { padding: 10px 12px; }
    .keypad-display { min-height: 40px; margin-bottom: 8px; }
    .key-btn { height: 38px; font-size: 18px; }
    .key-btn.key-cancel, .key-btn.key-marcar { height: 54px; }
    .keypad-grid { gap: 5px; margin-bottom: 5px; }
}