*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#eef2f7;color:#172033}.kiosk{min-height:100vh;display:flex;align-items:center;justify-content:center;transition:background .25s ease}.kiosk.success-mode{background:#d9fbe5}.kiosk.failure-mode{background:#fde2e2}.kiosk-wrap{width:min(1180px,100vw);min-height:min(900px,100vh);padding:clamp(10px,2vh,24px);display:flex;flex-direction:column;gap:clamp(6px,1.2vh,14px)}.kiosk-header{display:flex;align-items:center;justify-content:center;gap:16px;min-height:86px;text-align:left;flex-shrink:0}.logo{max-height:64px;max-width:240px;object-fit:contain}.kiosk-header h1{font-size:clamp(20px,3.1vh,34px);margin:0;font-weight:700}.kiosk-header p{margin:3px 0 0;color:#667085;font-size:clamp(13px,1.8vh,18px)}.single-capture-layout{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}.capture-box{width:min(88vh,860px,96vw);border:1px solid #111827;background:#fff;padding:clamp(14px,2vh,22px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2vh,12px);box-shadow:0 8px 20px rgba(0,0,0,.10)}.camera-frame{position:relative;width:min(100%,68vh);aspect-ratio:1/1;border:1px solid #111827;overflow:hidden;background:#111}.camera-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}.face-hint{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.70);color:#fff;padding:10px 12px;text-align:center;font-weight:700;font-size:clamp(14px,2vh,18px)}.capture-button{width:min(100%,68vh);min-height:clamp(42px,5.8vh,58px);font-size:clamp(16px,2.3vh,22px);font-weight:700;border:0;background:#1463ff;color:white;cursor:pointer}.capture-button:disabled{opacity:.55;cursor:not-allowed}.status{width:min(100%,68vh);font-size:clamp(15px,2vh,20px);font-weight:700;line-height:1.2;padding:10px 12px;background:#f3f6fb;color:#1f2937;text-align:center;border:1px solid #d8dee9}.status.compact{min-height:44px}.status.ok{background:#dcfce7;color:#166534;border-color:#86efac}.status.err{background:#fee2e2;color:#991b1b;border-color:#fecaca}.status.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}.manual{width:min(100%,68vh);padding:12px;background:#fff;border:1px solid #991b1b}.manual.hidden{display:none}.manual-title{font-size:clamp(15px,2vh,20px);font-weight:700;margin-bottom:8px;text-align:center;color:#991b1b}.manual input{width:100%;font-size:clamp(16px,2.2vh,22px);padding:12px 14px;border:2px solid #d1d5db;margin:6px 0}.manual button{width:100%;margin-top:8px;font-size:clamp(16px,2.2vh,22px);padding:12px;border:0;background:#111827;color:#fff;font-weight:700;cursor:pointer}.last{color:#475467;font-size:clamp(14px,2vh,19px);text-align:center;min-height:24px}footer{text-align:right;color:#667085;font-size:14px}.admin-body{font-family:Arial,Helvetica,sans-serif;margin:24px;background:#fff;color:#172033}.admin-body table{width:100%;border-collapse:collapse;margin:18px 0}.admin-body td,.admin-body th{border:1px solid #ddd;padding:8px;text-align:left}.admin-body th{background:#f3f3f3}.admin-body img{max-width:90px}.bad{background:#fff0f0}.ok{background:#f0fff4}.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.admin-nav a{display:inline-block;padding:10px 12px;background:#f3f6fb;color:#172033;text-decoration:none}.form-card{max-width:760px;background:#f8fafc;border:1px solid #e5e7eb;padding:18px;margin:18px 0}.form-card label{display:block;font-weight:700;margin:12px 0 5px}.form-card input,.form-card select{width:100%;padding:12px;border:1px solid #cbd5e1;font-size:18px}.form-card button{margin-top:16px;padding:14px 18px;border:0;background:#1463ff;color:#fff;font-size:20px;font-weight:800}.msg{padding:12px;background:#eef2ff;margin:12px 0}
@media (max-height:760px){.kiosk-wrap{gap:6px}.kiosk-header{min-height:64px}.logo{max-height:44px}.capture-box{width:min(88vh,820px,96vw);padding:10px}.camera-frame{width:min(100%,60vh)}.capture-button{width:min(100%,60vh);min-height:42px}.status,.manual{width:min(100%,60vh)}.manual input{padding:9px}.manual button{padding:10px}.status{padding:8px}}
@media (max-width:700px){.kiosk-wrap{height:100vh}.kiosk-header{min-height:56px}.capture-box{width:min(94vw,620px)}footer{text-align:center}.kiosk-header{gap:10px}.logo{max-width:150px}}
.manual-actions{display:grid;grid-template-columns:1fr;gap:8px}.manual .secondary{background:#e5e7eb;color:#111827}.camera-frame.manual-active video{filter:grayscale(1) opacity(.45)}.camera-frame.manual-active:after{content:'Identificación manual';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#991b1b;font-weight:700;font-size:clamp(18px,3vh,30px);background:rgba(255,255,255,.35)}
/* v0.3.6: modo manual compacto para pantallas pequeñas y mensajes en zona inferior */
.capture-box.manual-mode .camera-frame,
.capture-box.manual-mode #btnCapture{
display:none;
}
.capture-box.manual-mode{
gap:clamp(8px,1.3vh,14px);
}
.result-banner{
width:min(100%,68vh);
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:10px 12px;
border:1px solid transparent;
font-size:clamp(15px,2vh,21px);
font-weight:700;
color:#475467;
}
.result-banner.ok{
background:#dcfce7;
color:#166534;
border-color:#86efac;
}
.result-banner.err{
background:#fee2e2;
color:#991b1b;
border-color:#fecaca;
}
.result-banner.warn{
background:#fef3c7;
color:#92400e;
border-color:#fde68a;
}
.capture-box.manual-mode .manual{
width:min(100%,68vh);
}
@media (max-height:760px){
.capture-box.manual-mode{padding:10px;justify-content:center;}
.capture-box.manual-mode .status{min-height:auto;}
.capture-box.manual-mode .manual input{padding:10px 12px;}
}
/* v0.3.7: alta de empleado con diseño tipo terminal */
.employee-kiosk .capture-box.employee-box{
width:min(86vh,760px,96vw);
border:1px solid #111827;
}
.employee-form{
width:min(100%,68vh);
display:flex;
flex-direction:column;
gap:6px;
}
.employee-form label{
font-size:clamp(13px,1.8vh,17px);
font-weight:700;
color:#334155;
margin-top:4px;
}
.employee-form input,
.employee-select{
width:100%;
font-size:clamp(16px,2.2vh,22px);
padding:12px 14px;
border:1px solid #cbd5e1;
background:#fff;
border-radius:0;
}
.employee-form button,
.full-link.primary-link{
width:100%;
margin-top:10px;
padding:13px 14px;
border:0;
border-radius:0;
background:#111827;
color:#fff;
font-size:clamp(16px,2.2vh,21px);
font-weight:700;
text-align:center;
text-decoration:none;
cursor:pointer;
}
.employee-links{
width:min(100%,68vh);
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
font-size:14px;
margin-top:4px;
}
.employee-links a{
color:#334155;
text-decoration:none;
border-bottom:1px solid #94a3b8;
}
.employee-kiosk .camera-frame,
.employee-kiosk .capture-button,
.employee-kiosk .status,
.employee-kiosk .employee-select{
width:min(100%,68vh);
}
/* v0.3.8: navbar interno y cámara no disponible */
.top-nav{
position:fixed;
top:0;
left:0;
right:0;
height:44px;
display:flex;
justify-content:center;
align-items:center;
gap:0;
background:#111827;
z-index:50;
border-bottom:1px solid #0b1220;
}
.top-nav a{
color:#e5e7eb;
text-decoration:none;
padding:13px 18px;
font-size:14px;
line-height:1;
border-left:1px solid rgba(255,255,255,.12);
}
.top-nav a:last-child{border-right:1px solid rgba(255,255,255,.12)}
.top-nav a:hover,
.top-nav a.active{background:#374151;color:#fff}
body.internal-page{padding-top:44px;align-items:flex-start}
body.internal-admin{padding-top:60px}
.camera-unavailable{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:12px;
background:#f3f4f6;
color:#6b7280;
font-weight:700;
font-size:clamp(16px,2.4vh,24px);
text-align:center;
z-index:4;
}
.camera-unavailable.hidden{display:none}
.camera-off-icon{
font-size:clamp(54px,10vh,110px);
line-height:1;
filter:grayscale(1);
opacity:.75;
}
.camera-frame.camera-error video,
.camera-frame.camera-error canvas,
.camera-frame.camera-error .face-hint{display:none}
.capture-box.camera-error-mode .capture-button{display:none}
.employee-form select{
width:100%;
font-size:clamp(16px,2.2vh,22px);
padding:12px 14px;
border:1px solid #cbd5e1;
background:#fff;
border-radius:0;
}
@media (max-width:700px){
.top-nav{height:auto;flex-wrap:wrap;position:static}
body.internal-page, body.internal-admin{padding-top:0}
.top-nav a{flex:1 1 50%;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)}
}
/* v0.3.9: navbar claro con marca y cámaras menos altas */
.top-nav{
position:fixed;
top:0;
left:0;
right:0;
min-height:54px;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:6px clamp(12px,2vw,24px);
background:#ffffff;
color:#172033;
z-index:50;
border-bottom:1px solid #d8dee9;
box-shadow:0 2px 10px rgba(15,23,42,.06);
}
.nav-brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.nav-logo{
max-height:38px;
max-width:180px;
object-fit:contain;
display:block;
}
.nav-title{
font-size:18px;
font-weight:700;
color:#172033;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.nav-links{
display:flex;
align-items:center;
gap:4px;
flex-wrap:wrap;
justify-content:flex-end;
}
.top-nav a{
color:#334155;
text-decoration:none;
padding:9px 11px;
font-size:14px;
line-height:1;
border:0;
background:transparent;
}
.top-nav a:last-child{border-right:0}
.top-nav a:hover,
.top-nav a.active{
background:#eef2f7;
color:#111827;
}
body.internal-page{padding-top:66px;align-items:flex-start}
body.internal-admin{padding-top:72px}
/* Menos altura vertical para todas las pantallas con cámara */
.capture-box{
width:min(78vh,820px,94vw);
padding:clamp(12px,1.6vh,18px);
}
.camera-frame{
width:min(100%,62vh,640px);
aspect-ratio:4/3;
}
.capture-button,
.status,
.result-banner,
.manual,
.employee-form,
.employee-select,
.employee-kiosk .camera-frame,
.employee-kiosk .capture-button,
.employee-kiosk .status,
.employee-kiosk .employee-select{
width:min(100%,62vh,640px);
}
.employee-kiosk .capture-box.employee-box{
width:min(78vh,760px,94vw);
}
.kiosk-header{
min-height:72px;
}
.logo{max-height:54px;}
@media (max-height:760px){
.capture-box{width:min(82vh,760px,94vw);padding:9px;}
.camera-frame{width:min(100%,54vh,560px);aspect-ratio:4/3;}
.capture-button,.status,.result-banner,.manual,.employee-form,.employee-select,
.employee-kiosk .camera-frame,.employee-kiosk .capture-button,.employee-kiosk .status,.employee-kiosk .employee-select{width:min(100%,54vh,560px);}
.kiosk-header{min-height:58px;}
}
@media (max-width:700px){
.top-nav{
position:static;
flex-direction:column;
align-items:stretch;
gap:6px;
padding:8px 10px;
}
.nav-brand{justify-content:center;}
.nav-title{text-align:center;}
.nav-links{justify-content:center;}
.top-nav a{flex:0 1 auto;text-align:center;border:0;padding:8px 9px;}
body.internal-page, body.internal-admin{padding-top:0}
.camera-frame{width:min(100%,72vw,520px);aspect-ratio:4/3;}
.capture-button,.status,.result-banner,.manual,.employee-form,.employee-select,
.employee-kiosk .camera-frame,.employee-kiosk .capture-button,.employee-kiosk .status,.employee-kiosk .employee-select{width:min(100%,72vw,520px);}
}
/* v0.4.0: primera captura, búsqueda y varias capturas */
.employee-search{
width:min(100%,62vh,640px);
padding:11px 12px;
border:1px solid #cbd5e1;
font-size:clamp(15px,2vh,18px);
background:#fff;
}
.field-label{
width:min(100%,62vh,640px);
font-weight:700;
font-size:14px;
color:#334155;
margin-bottom:-4px;
}
.capture-count{
width:min(100%,62vh,640px);
text-align:center;
color:#475569;
font-size:14px;
}
.enroll-actions{
width:min(100%,62vh,640px);
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.enroll-actions .capture-button{width:100%;}
.capture-button.small-action{
min-height:44px;
font-size:clamp(15px,2vh,18px);
}
.capture-button.secondary{
background:#111827;
}
.thumb-row{
width:min(100%,62vh,640px);
display:flex;
gap:8px;
justify-content:center;
min-height:48px;
}
.thumb-item{
position:relative;
width:64px;
height:48px;
border:1px solid #cbd5e1;
background:#f8fafc;
}
.thumb-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.thumb-item button{
position:absolute;
top:-7px;
right:-7px;
width:20px;
height:20px;
border:1px solid #991b1b;
background:#fee2e2;
color:#991b1b;
padding:0;
line-height:16px;
cursor:pointer;
}
.bottom-status{margin-top:2px;}
@media (max-height:760px){
.employee-search,.field-label,.capture-count,.enroll-actions,.thumb-row{width:min(100%,54vh,560px);}
.thumb-row{min-height:40px;}
.thumb-item{width:54px;height:40px;}
}
@media (max-width:700px){
.employee-search,.field-label,.capture-count,.enroll-actions,.thumb-row{width:min(100%,72vw,520px);}
}
/* v0.4.1: refinado de primera captura */
body.internal-page .kiosk-wrap{
padding-top:8px;
}
body.internal-page .single-capture-layout{
align-items:flex-start;
}
.enroll-box{
margin-top:0;
gap:10px;
}
.enroll-box .field-label{
display:none;
}
.enroll-box .employee-search{
width:min(100%,62vh,640px);
min-height:46px;
padding:12px 14px;
border:1px solid #94a3b8;
font-size:clamp(17px,2.3vh,22px);
font-weight:600;
}
.enroll-box .capture-count{
margin-top:0;
font-size:14px;
}
.enroll-box .enroll-actions{
gap:18px;
margin-top:2px;
}
.enroll-box .capture-button.small-action{
min-height:48px;
font-size:clamp(15px,2vh,18px);
font-weight:700;
}
.enroll-box .bottom-status{
margin-top:4px;
min-height:0;
padding:0;
border:0;
background:transparent;
color:#475569;
font-size:15px;
font-weight:600;
}
.enroll-box .bottom-status.ok,
.enroll-box .bottom-status.err,
.enroll-box .bottom-status.warn{
padding:8px 10px;
border:1px solid;
}
.enroll-box .face-hint{
font-size:clamp(13px,1.8vh,17px);
font-weight:700;
padding:9px 12px;
}
.enroll-box .face-hint.ok{
background:rgba(22,101,52,.88);
}
.enroll-box .face-hint.err{
background:rgba(153,27,27,.88);
}
.enroll-box .thumb-row{
min-height:42px;
}
.enroll-box .thumb-item{
width:58px;
height:42px;
}
@media (max-height:760px){
body.internal-page .kiosk-wrap{padding-top:4px;gap:4px;}
.enroll-box{gap:7px;padding:8px;}
.enroll-box .employee-search{min-height:40px;padding:9px 11px;}
.enroll-box .enroll-actions{gap:12px;}
.enroll-box .capture-button.small-action{min-height:40px;}
}
/* v0.4.3: separación operativa/gestión */
.wide-page{width:min(95vw,1400px);margin:0 auto 28px auto;padding:18px 0 0 0}.wide-card{background:#fff;border:1px solid #d8dee9;padding:16px;margin:16px 0;box-shadow:0 2px 10px rgba(15,23,42,.04)}.wide-card h2{margin:0 0 14px 0;font-size:22px}.form-wide{padding:18px}.employee-grid-form{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px;align-items:end}.employee-grid-form label{display:flex;flex-direction:column;font-weight:700;color:#334155;gap:6px}.employee-grid-form input,.employee-grid-form select,.toolbar input{font-size:16px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:0;background:#fff}.employee-grid-form .check-line{display:flex;flex-direction:row;align-items:center;gap:8px}.employee-grid-form .check-line input{width:auto}.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.form-actions button,.button-link,.toolbar button{border:0;border-radius:0;background:#111827;color:#fff;font-weight:700;padding:11px 14px;text-decoration:none;cursor:pointer;font-size:15px}.button-link.muted{background:#e5e7eb;color:#111827}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.toolbar form{display:flex;gap:8px;width:min(680px,100%)}.toolbar input{flex:1}.table-scroll{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{border:1px solid #e5e7eb;padding:9px 10px;text-align:left;vertical-align:middle}.data-table th{background:#f8fafc;color:#334155}.muted-row{opacity:.55}.actions-cell{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.actions-cell a{color:#1457d9;text-decoration:none}.actions-cell form{margin:0}.actions-cell button{border:0;background:#fee2e2;color:#991b1b;padding:7px 9px;cursor:pointer}.employee-picker{width:min(100%,520px);position:relative}.employee-search{width:100%;font-size:18px;padding:12px 14px;border:1px solid #cbd5e1;border-radius:0;box-sizing:border-box}.search-results{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#fff;border:1px solid #cbd5e1;z-index:20;box-shadow:0 8px 18px rgba(15,23,42,.12);max-height:260px;overflow:auto}.search-results.hidden{display:none}.search-results button,.search-empty{width:100%;display:block;text-align:left;background:#fff;color:#172033;border:0;border-bottom:1px solid #eef2f7;padding:11px 13px;font-size:16px;cursor:pointer}.search-results button:hover{background:#eef2f7}.search-empty{color:#64748b}.thumb-row{width:min(100%,620px);display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.thumb-item{width:86px;height:70px;border:1px solid #cbd5e1;position:relative;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumb-item img{width:100%;height:100%;object-fit:cover}.thumb-item button{position:absolute;right:0;top:0;border:0;background:#991b1b;color:#fff;width:24px;height:24px;cursor:pointer}.thumb-item span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;text-align:center}.no-thumb{font-size:11px;color:#64748b}.capture-count{font-weight:700;color:#334155}.enroll-actions{display:flex;gap:18px;justify-content:center;width:min(100%,520px)}.enroll-actions .small-action{width:100%;max-width:260px}.employee-box.enroll-box{gap:10px}@media(max-width:900px){.employee-grid-form{grid-template-columns:1fr}.wide-page{width:94vw}.toolbar form{width:100%}.actions-cell{min-width:220px}}
/* v0.4.4: gestión más clara y capturas solo desde empleado */
body.admin-body.internal-admin{
background:#fff;
color:#172033;
}
.wide-page{
width:min(94vw,1360px);
padding-top:18px;
}
.wide-card{
background:#fff;
border:1px solid #dbe4f0;
border-left:4px solid #1463ff;
box-shadow:0 4px 18px rgba(15,23,42,.055);
}
.wide-card h2{
color:#172033;
letter-spacing:.01em;
}
.form-wide{
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.employee-grid-form input,
.employee-grid-form select,
.toolbar input{
border:1px solid #b9c7dc;
background:#fff;
}
.employee-grid-form input:focus,
.employee-grid-form select:focus,
.toolbar input:focus{
outline:2px solid rgba(20,99,255,.18);
border-color:#1463ff;
}
.form-actions button,
.button-link,
.toolbar button{
background:#1463ff;
color:#fff;
}
.button-link.muted{
background:#eef2f7;
color:#334155;
}
.data-table th{
background:#eaf1ff;
color:#172033;
border-color:#cbd7ea;
}
.data-table td{
background:#fff;
}
.data-table tbody tr:nth-child(even) td{
background:#fbfdff;
}
.data-table tbody tr:hover td{
background:#f3f7ff;
}
.actions-cell a{
display:inline-block;
padding:7px 9px;
background:#eef4ff;
color:#1457d9;
border:1px solid #cfe0ff;
}
.actions-cell a[href*="enroll.php"]{
background:#e9fbeF;
color:#166534;
border-color:#bbf7d0;
}
.actions-cell button{
border:1px solid #fecaca;
background:#fff1f2;
color:#991b1b;
}
.result-banner{
border-radius:0!important;
}
.capture-page .top-nav .nav-links a[href="enroll.php"]{display:none;}
.capture-access-denied{
width:min(720px,94vw);
margin:8vh auto 0;
padding:28px;
border:1px solid #dbe4f0;
border-left:4px solid #f59e0b;
background:#fff;
box-shadow:0 4px 18px rgba(15,23,42,.055);
text-align:center;
}
.capture-access-denied h2{margin:0 0 10px;color:#172033;}
.capture-access-denied p{color:#64748b;margin-bottom:18px;}
.selected-employee-card{
width:min(100%,620px);
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
border:1px solid #dbe4f0;
border-left:4px solid #1463ff;
padding:10px 12px;
background:#f8fbff;
box-sizing:border-box;
}
.selected-employee-card .mini-label{
display:block;
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#64748b;
margin-bottom:2px;
}
.selected-employee-card strong{display:block;font-size:18px;color:#172033;}
.selected-employee-card small{display:block;color:#64748b;margin-top:2px;}
.selected-employee-card a{
white-space:nowrap;
text-decoration:none;
background:#eef4ff;
color:#1457d9;
border:1px solid #cfe0ff;
padding:8px 10px;
}
.locked-capture-box{
border-color:#dbe4f0;
box-shadow:0 4px 18px rgba(15,23,42,.055);
}
@media(max-width:780px){
.selected-employee-card{align-items:flex-start;flex-direction:column;}
.selected-employee-card a{width:100%;text-align:center;box-sizing:border-box;}
}
/* v0.4.5: refinado capturas y empleados */
.employee-list-card .section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:18px;
margin-bottom:12px;
border-bottom:1px solid #e6edf7;
padding-bottom:10px;
}
.employee-list-card .section-head h2{
margin:0;
font-size:22px;
color:#172033;
}
.employee-list-card .section-head p{
margin:0;
color:#64748b;
font-size:14px;
text-align:right;
}
body.editing-employee .form-wide{
border-left-color:#f59e0b;
box-shadow:0 4px 22px rgba(245,158,11,.12);
}
body.editing-employee #nombreEmpleado{
border-color:#f59e0b;
outline:2px solid rgba(245,158,11,.18);
}
.enroll-actions{
grid-template-columns:1fr 1fr;
align-items:stretch;
}
.back-button{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
border:1px solid #cbd5e1;
background:#f8fafc;
color:#334155;
font-size:clamp(15px,2vh,18px);
font-weight:700;
box-sizing:border-box;
}
.back-button:hover{
background:#eef2f7;
color:#172033;
}
.enroll-actions .capture-button.small-action{
max-width:none;
}
@media(max-width:780px){
.employee-list-card .section-head{
display:block;
}
.employee-list-card .section-head p{
margin-top:4px;
text-align:left;
}
.enroll-actions{
grid-template-columns:1fr;
}
}
/* v0.4.6: comercios y email de empleado */
.inline-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
.inline-head h2{margin:0;}
.inline-head p{margin:0;color:#64748b;font-size:14px;text-align:right;}
.inline-head strong{color:#1463ff;}
@media(max-width:780px){.inline-head{display:block}.inline-head p{text-align:left;margin-top:4px}}
.small-note{font-size:.92rem;color:#5c6570;margin-top:-.25rem;margin-bottom:1rem}.role-info-card{border-left:4px solid #3f6fb5}.actions-cell .danger-delete-form{display:inline}.actions-cell button.danger{border-color:#a93131;color:#a93131;background:#fff5f5}.actions-cell button.danger:hover{background:#ffe7e7}.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.role-card{border:1px solid #d8e2ef;background:#fff;padding:16px}.role-card h3{margin:0 0 8px;color:#23436c}.role-card ul{margin:8px 0 0;padding-left:18px}.permission-table td:first-child{font-weight:600}.badge-role{display:inline-block;padding:3px 8px;border:1px solid #cbd6e3;background:#f6f9fc;font-size:.86rem}
/* v0.5.0: acceso admin con diseño y ajustes de ámbito */
.auth-body{
margin:0;
min-height:100vh;
background:linear-gradient(180deg,#f8fbff 0%,#ffffff 55%);
color:#172033;
font-family:Arial,Helvetica,sans-serif;
}
.auth-page{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
}
.auth-card{
width:min(94vw,460px);
background:#fff;
border:1px solid #dbe4f0;
border-left:4px solid #1463ff;
padding:26px;
box-shadow:0 8px 26px rgba(15,23,42,.08);
}
.auth-logo{
display:block;
max-width:220px;
max-height:58px;
object-fit:contain;
margin:0 auto 18px auto;
}
.auth-card h1{
margin:0 0 6px 0;
font-size:24px;
text-align:center;
}
.auth-subtitle{
margin:0 0 18px 0;
color:#64748b;
text-align:center;
line-height:1.35;
}
.auth-form{
display:flex;
flex-direction:column;
gap:12px;
}
.auth-form input{
width:100%;
padding:12px 14px;
border:1px solid #b9c7dc;
font-size:17px;
background:#fff;
border-radius:0;
}
.auth-form input:focus{
outline:2px solid rgba(20,99,255,.18);
border-color:#1463ff;
}
.auth-form button{
border:0;
background:#1463ff;
color:#fff;
font-weight:700;
font-size:17px;
padding:12px 14px;
cursor:pointer;
}
.auth-card footer{
margin-top:18px;
text-align:center;
}
.toolbar-form{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.toolbar-form input{
padding:10px 12px;
border:1px solid #b9c7dc;
font-size:16px;
}
.toolbar-form button{
border:0;
background:#1463ff;
color:#fff;
font-weight:700;
padding:11px 14px;
cursor:pointer;
}
/* v0.6.0 QR + foto */
.qr-mode .qr-capture-box{max-width:760px;margin:0 auto;}
.qr-mode .camera-frame{aspect-ratio:4/3;}
.manual-open{margin-top:10px;}
.manual-help{margin:4px 0 12px;color:#555;font-size:.95rem;}
.qr-page .qr-card{max-width:880px;margin:24px auto;}
.qr-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid #e5e7eb;padding-bottom:14px;margin-bottom:18px;}
.qr-head h2{margin:0 0 4px;}
.qr-head p{margin:0;color:#555;}
.qr-print-area{display:flex;gap:28px;align-items:center;justify-content:center;margin:24px 0;flex-wrap:wrap;}
.qr-img{width:340px;height:340px;border:1px solid #ddd;background:#fff;padding:14px;}
.qr-token{font-family:Consolas,monospace;max-width:360px;word-break:break-all;font-size:1rem;background:#f8fafc;border-left:4px solid #2563eb;padding:16px;}
.qr-actions{justify-content:center;}
@media print{.top-nav,.qr-actions,footer,.small-note{display:none!important}.qr-card{box-shadow:none!important;border:0!important}.qr-img{width:420px;height:420px}.qr-print-area{display:block;text-align:center}.qr-token{margin:20px auto;border:0;background:#fff}}
/* ===== v0.6.1 - pantalla QR corregida ===== */
body.kiosk-body.qr-mode{
margin:0;
min-height:100vh;
background:#ffffff;
color:#172033;
font-family:Arial,Helvetica,sans-serif;
}
body.kiosk-body.qr-mode.success-mode{background:#dcfce7;}
body.kiosk-body.qr-mode.failure-mode{background:#fee2e2;}
body.kiosk-body.qr-mode .kiosk{
min-height:100vh;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:14px 16px 10px;
gap:10px;
transition:background .2s ease;
}
body.kiosk-body.qr-mode .kiosk-head{
width:min(760px,96vw);
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:"logo commerce" "logo clock";
column-gap:14px;
align-items:center;
min-height:58px;
}
body.kiosk-body.qr-mode .logo{
grid-area:logo;
max-height:52px;
max-width:180px;
object-fit:contain;
}
body.kiosk-body.qr-mode .commerce{
grid-area:commerce;
font-weight:700;
font-size:clamp(18px,2.4vw,26px);
line-height:1.1;
}
body.kiosk-body.qr-mode .clock{
grid-area:clock;
color:#667085;
font-size:clamp(13px,1.7vw,17px);
margin-top:3px;
}
body.kiosk-body.qr-mode .qr-capture-box{
width:min(760px,96vw);
max-width:760px;
margin:0 auto;
border:1px solid #d0d5dd;
background:#fff;
padding:14px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
box-shadow:0 6px 16px rgba(15,23,42,.08);
}
body.kiosk-body.qr-mode .camera-frame{
position:relative;
width:min(100%,640px);
aspect-ratio:4/3;
border:1px solid #1f2937;
overflow:hidden;
background:#111827;
}
body.kiosk-body.qr-mode .camera-frame video{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:none;
}
body.kiosk-body.qr-mode .hidden{display:none!important;}
body.kiosk-body.qr-mode .face-hint{
position:absolute;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.76);
color:#fff;
padding:9px 12px;
text-align:center;
font-weight:700;
font-size:clamp(14px,1.9vw,18px);
}
body.kiosk-body.qr-mode .capture-btn,
body.kiosk-body.qr-mode .secondary,
body.kiosk-body.qr-mode .manual-actions button{
border:0;
padding:12px 16px;
font-size:clamp(15px,1.9vw,18px);
font-weight:700;
cursor:pointer;
}
body.kiosk-body.qr-mode .capture-btn{
width:min(100%,640px);
background:#2563eb;
color:#fff;
}
body.kiosk-body.qr-mode .capture-btn:disabled{opacity:.55;cursor:not-allowed;}
body.kiosk-body.qr-mode .secondary{
width:min(100%,640px);
background:#eef2ff;
color:#1e3a8a;
border:1px solid #c7d2fe;
}
body.kiosk-body.qr-mode .manual-box{
width:min(100%,640px);
border:1px solid #ef4444;
background:#fff;
padding:14px;
}
body.kiosk-body.qr-mode .manual-title{
margin:0 0 6px;
text-align:center;
font-size:clamp(17px,2vw,22px);
font-weight:800;
color:#991b1b;
}
body.kiosk-body.qr-mode .manual-help{
margin:0 0 10px;
text-align:center;
color:#555;
}
body.kiosk-body.qr-mode .manual-box input{
width:100%;
margin:6px 0;
padding:12px 14px;
border:1px solid #cbd5e1;
font-size:clamp(16px,2vw,20px);
}
body.kiosk-body.qr-mode .manual-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:8px;
}
body.kiosk-body.qr-mode .manual-actions button:first-child{
background:#111827;
color:#fff;
}
body.kiosk-body.qr-mode .manual-actions button.secondary{
width:100%;
background:#f3f4f6;
color:#111827;
border:1px solid #d1d5db;
}
body.kiosk-body.qr-mode .result-banner{
width:min(100%,640px);
min-height:34px;
padding:8px 10px;
text-align:center;
font-size:clamp(15px,2vw,20px);
font-weight:700;
background:#f8fafc;
border:1px solid #e5e7eb;
}
body.kiosk-body.qr-mode .result-banner:empty{
border-color:transparent;
background:transparent;
min-height:18px;
padding:0;
}
body.kiosk-body.qr-mode .result-banner.ok{background:#dcfce7;color:#166534;border-color:#86efac;}
body.kiosk-body.qr-mode .result-banner.err{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
body.kiosk-body.qr-mode footer{
width:min(760px,96vw);
text-align:right;
color:#667085;
font-size:13px;
}
body.kiosk-body.qr-mode .camera-unavailable{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:#f8fafc;
color:#991b1b;
font-weight:800;
text-align:center;
z-index:4;
}
body.kiosk-body.qr-mode .camera-icon{font-size:42px;margin-bottom:8px;}
body.kiosk-body.qr-mode .camera-frame.camera-error video,
body.kiosk-body.qr-mode .camera-frame.camera-error .face-hint{display:none;}
@media(max-height:760px){
body.kiosk-body.qr-mode .kiosk{padding-top:8px;gap:6px;}
body.kiosk-body.qr-mode .kiosk-head{min-height:46px;}
body.kiosk-body.qr-mode .logo{max-height:40px;max-width:140px;}
body.kiosk-body.qr-mode .qr-capture-box{padding:9px;gap:7px;}
body.kiosk-body.qr-mode .camera-frame{width:min(100%,520px);}
body.kiosk-body.qr-mode .capture-btn,
body.kiosk-body.qr-mode .secondary{padding:9px 12px;}
body.kiosk-body.qr-mode .manual-box{padding:10px;}
body.kiosk-body.qr-mode .manual-box input{padding:9px 12px;}
}
@media(max-width:620px){
body.kiosk-body.qr-mode .kiosk-head{
grid-template-columns:1fr;
grid-template-areas:"logo" "commerce" "clock";
text-align:center;
justify-items:center;
}
body.kiosk-body.qr-mode .manual-actions{grid-template-columns:1fr;}
body.kiosk-body.qr-mode footer{text-align:center;}
}
/* v0.6.2 - flujo foto primero, identificación después */
.qr-photo-flow .capture-box{
width:min(820px,94vw);
}
.qr-photo-flow .camera-frame{
width:min(100%,620px);
aspect-ratio:4/3;
}
.qr-photo-flow .capture-btn{
width:min(100%,620px);
}
.qr-photo-flow .capture-btn.small{
min-height:46px;
font-size:clamp(15px,2vh,20px);
}
.photo-preview{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.photo-preview.hidden,
video.hidden,
.hidden{
display:none !important;
}
.identify-box{
width:min(100%,620px);
border:1px solid #d7deea;
background:#f8fafc;
padding:12px;
}
.identify-title{
font-weight:700;
text-align:center;
margin-bottom:10px;
color:#172033;
}
.identify-actions{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
}
.identify-actions .secondary{
min-height:46px;
border:0;
background:#e5e7eb;
color:#111827;
cursor:pointer;
font-weight:700;
}
.qr-photo-flow .manual-box{
width:min(100%,620px);
}
.qr-photo-flow .manual-actions{
grid-template-columns:1fr 1fr;
}
.qr-photo-flow .manual-actions .secondary{
background:#e5e7eb;
color:#111827;
}
.qr-photo-flow .photo-ready .face-hint{
background:rgba(20,99,255,.86);
}
@media (max-width:700px){
.identify-actions{
grid-template-columns:1fr;
}
.qr-photo-flow .manual-actions{
grid-template-columns:1fr;
}
}
/* ===== v0.6.3 - limpieza específica de index.php QR + foto ===== */
body.kiosk-body.qr-photo-flow.v063-index{
margin:0;
min-height:100vh;
background:#ffffff;
color:#172033;
font-family:Arial,Helvetica,sans-serif;
}
body.kiosk-body.qr-photo-flow.v063-index.success-mode{background:#dcfce7;}
body.kiosk-body.qr-photo-flow.v063-index.failure-mode{background:#fee2e2;}
body.kiosk-body.qr-photo-flow.v063-index .kiosk{
min-height:100vh;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:10px 14px 8px;
gap:8px;
background:transparent;
}
body.kiosk-body.qr-photo-flow.v063-index .kiosk-head{
width:min(720px,96vw);
min-height:54px;
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:"logo commerce" "logo clock";
column-gap:14px;
align-items:center;
}
body.kiosk-body.qr-photo-flow.v063-index .logo{
grid-area:logo;
max-height:48px;
max-width:170px;
object-fit:contain;
}
body.kiosk-body.qr-photo-flow.v063-index .commerce{
grid-area:commerce;
font-weight:700;
font-size:clamp(18px,2.3vw,25px);
line-height:1.1;
}
body.kiosk-body.qr-photo-flow.v063-index .clock{
grid-area:clock;
color:#667085;
font-size:clamp(13px,1.6vw,17px);
margin-top:2px;
}
body.kiosk-body.qr-photo-flow.v063-index .qr-capture-box{
width:min(720px,96vw);
margin:0 auto;
border:1px solid #d0d5dd;
background:#fff;
padding:12px;
display:flex;
flex-direction:column;
align-items:center;
gap:9px;
box-shadow:0 6px 14px rgba(15,23,42,.07);
}
body.kiosk-body.qr-photo-flow.v063-index .camera-frame{
position:relative;
width:min(100%,600px);
aspect-ratio:4/3;
border:1px solid #1f2937;
overflow:hidden;
background:#111827;
}
body.kiosk-body.qr-photo-flow.v063-index .camera-frame video,
body.kiosk-body.qr-photo-flow.v063-index .photo-preview{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:none;
}
body.kiosk-body.qr-photo-flow.v063-index .face-hint{
position:absolute;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.76);
color:#fff;
padding:8px 12px;
text-align:center;
font-weight:700;
font-size:clamp(14px,1.8vw,18px);
}
body.kiosk-body.qr-photo-flow.v063-index .capture-btn,
body.kiosk-body.qr-photo-flow.v063-index .secondary,
body.kiosk-body.qr-photo-flow.v063-index .manual-actions button{
border:0;
border-radius:0;
padding:11px 14px;
font-size:clamp(15px,1.8vw,18px);
font-weight:700;
cursor:pointer;
}
body.kiosk-body.qr-photo-flow.v063-index .capture-btn{
width:min(100%,600px);
background:#2563eb;
color:#fff;
}
body.kiosk-body.qr-photo-flow.v063-index .capture-btn:disabled{opacity:.55;cursor:not-allowed;}
body.kiosk-body.qr-photo-flow.v063-index .secondary{
background:#eef2ff;
color:#1e3a8a;
border:1px solid #c7d2fe;
}
body.kiosk-body.qr-photo-flow.v063-index .identify-box,
body.kiosk-body.qr-photo-flow.v063-index .manual-box,
body.kiosk-body.qr-photo-flow.v063-index .result-banner{
width:min(100%,600px);
}
body.kiosk-body.qr-photo-flow.v063-index .identify-box{
border:1px solid #d7deea;
background:#f8fafc;
padding:12px;
}
body.kiosk-body.qr-photo-flow.v063-index .identify-title{
font-weight:700;
text-align:center;
margin:0 0 10px;
color:#172033;
}
body.kiosk-body.qr-photo-flow.v063-index .identify-actions{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
}
body.kiosk-body.qr-photo-flow.v063-index .identify-actions .capture-btn,
body.kiosk-body.qr-photo-flow.v063-index .identify-actions .secondary{
width:100%;
min-height:44px;
}
body.kiosk-body.qr-photo-flow.v063-index .manual-box{
border:1px solid #ef4444;
background:#fff;
padding:12px;
}
body.kiosk-body.qr-photo-flow.v063-index .manual-title{
margin:0 0 6px;
text-align:center;
font-size:clamp(17px,2vw,21px);
font-weight:800;
color:#991b1b;
}
body.kiosk-body.qr-photo-flow.v063-index .manual-help{
margin:0 0 10px;
text-align:center;
color:#555;
}
body.kiosk-body.qr-photo-flow.v063-index .manual-box input{
width:100%;
margin:6px 0;
padding:11px 13px;
border:1px solid #cbd5e1;
border-radius:0;
font-size:clamp(16px,1.9vw,20px);
}
body.kiosk-body.qr-photo-flow.v063-index .manual-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:8px;
}
body.kiosk-body.qr-photo-flow.v063-index .manual-actions button:first-child{
background:#111827;
color:#fff;
}
body.kiosk-body.qr-photo-flow.v063-index .manual-actions button.secondary{
width:100%;
background:#f3f4f6;
color:#111827;
border:1px solid #d1d5db;
}
body.kiosk-body.qr-photo-flow.v063-index .result-banner{
min-height:32px;
padding:8px 10px;
text-align:center;
font-size:clamp(15px,1.9vw,19px);
font-weight:700;
background:#f8fafc;
border:1px solid #e5e7eb;
}
body.kiosk-body.qr-photo-flow.v063-index .result-banner:empty{
border-color:transparent;
background:transparent;
min-height:12px;
padding:0;
}
body.kiosk-body.qr-photo-flow.v063-index .result-banner.ok{background:#dcfce7;color:#166534;border-color:#86efac;}
body.kiosk-body.qr-photo-flow.v063-index .result-banner.err{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
body.kiosk-body.qr-photo-flow.v063-index footer{
width:min(720px,96vw);
text-align:right;
color:#667085;
font-size:13px;
}
body.kiosk-body.qr-photo-flow.v063-index .hidden{display:none!important;}
body.kiosk-body.qr-photo-flow.v063-index .camera-unavailable{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:#f8fafc;
color:#991b1b;
font-weight:800;
text-align:center;
z-index:4;
}
body.kiosk-body.qr-photo-flow.v063-index .camera-icon{font-size:40px;margin-bottom:8px;}
body.kiosk-body.qr-photo-flow.v063-index .camera-frame.camera-error video,
body.kiosk-body.qr-photo-flow.v063-index .camera-frame.camera-error .face-hint{display:none;}
body.kiosk-body.qr-photo-flow.v063-index .photo-ready .face-hint{background:rgba(20,99,255,.86);}
@media(max-height:760px){
body.kiosk-body.qr-photo-flow.v063-index .kiosk{padding-top:6px;gap:5px;}
body.kiosk-body.qr-photo-flow.v063-index .kiosk-head{min-height:44px;}
body.kiosk-body.qr-photo-flow.v063-index .logo{max-height:36px;max-width:140px;}
body.kiosk-body.qr-photo-flow.v063-index .qr-capture-box{padding:8px;gap:6px;}
body.kiosk-body.qr-photo-flow.v063-index .camera-frame{width:min(100%,520px);}
body.kiosk-body.qr-photo-flow.v063-index .capture-btn,
body.kiosk-body.qr-photo-flow.v063-index .secondary{padding:8px 11px;}
body.kiosk-body.qr-photo-flow.v063-index .manual-box{padding:9px;}
body.kiosk-body.qr-photo-flow.v063-index .manual-box input{padding:8px 11px;}
}
@media(max-width:700px){
body.kiosk-body.qr-photo-flow.v063-index .kiosk-head{
grid-template-columns:1fr;
grid-template-areas:"logo" "commerce" "clock";
text-align:center;
justify-items:center;
}
body.kiosk-body.qr-photo-flow.v063-index .identify-actions,
body.kiosk-body.qr-photo-flow.v063-index .manual-actions{grid-template-columns:1fr;}
body.kiosk-body.qr-photo-flow.v063-index footer{text-align:center;}
}
/* v0.6.4 - Pantalla fichaje QR+foto: estados claros y validación de rostro */
body.kiosk-body.qr-photo-flow{
margin:0;
min-height:100vh;
background:#f4f7fb;
color:#172033;
font-family:Arial,Helvetica,sans-serif;
transition:background .18s ease;
}
body.kiosk-body.qr-photo-flow.success-mode{background:#dff7e8;}
body.kiosk-body.qr-photo-flow.failure-mode{background:#fde2e2;}
body.kiosk-body.qr-photo-flow.working-mode{background:#eef2f7;}
body.kiosk-body.qr-photo-flow .kiosk{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:10px 14px 8px;
background:transparent;
}
body.kiosk-body.qr-photo-flow .kiosk-head{
width:min(760px,96vw);
display:flex;
align-items:center;
justify-content:center;
gap:14px;
min-height:58px;
margin:0 0 8px;
text-align:left;
}
body.kiosk-body.qr-photo-flow .logo{
max-height:46px;
max-width:190px;
object-fit:contain;
}
body.kiosk-body.qr-photo-flow .commerce{
font-size:clamp(17px,2.4vh,24px);
font-weight:800;
color:#172033;
}
body.kiosk-body.qr-photo-flow .clock{
margin-left:auto;
font-size:clamp(13px,1.8vh,16px);
color:#667085;
white-space:nowrap;
}
body.kiosk-body.qr-photo-flow .qr-capture-box{
width:min(690px,96vw);
background:#fff;
border:1px solid #cbd5e1;
padding:14px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
box-shadow:0 8px 20px rgba(15,23,42,.08);
}
body.kiosk-body.qr-photo-flow .camera-frame{
position:relative;
width:min(100%,560px);
aspect-ratio:4/3;
background:#111827;
border:1px solid #334155;
overflow:hidden;
}
body.kiosk-body.qr-photo-flow .camera-frame video,
body.kiosk-body.qr-photo-flow .photo-preview{
width:100%;
height:100%;
object-fit:cover;
}
body.kiosk-body.qr-photo-flow .camera-frame video{transform:scaleX(-1);}
body.kiosk-body.qr-photo-flow .face-hint{
position:absolute;
left:0;
right:0;
bottom:0;
padding:9px 12px;
background:rgba(0,0,0,.78);
color:#fff;
text-align:center;
font-size:clamp(15px,2.1vh,18px);
font-weight:700;
}
body.kiosk-body.qr-photo-flow .capture-btn,
body.kiosk-body.qr-photo-flow .secondary,
body.kiosk-body.qr-photo-flow .manual-actions button{
border:0;
cursor:pointer;
min-height:44px;
padding:10px 16px;
font-size:clamp(15px,2vh,18px);
font-weight:700;
}
body.kiosk-body.qr-photo-flow .capture-btn{
width:min(100%,560px);
background:#2563eb;
color:#fff;
}
body.kiosk-body.qr-photo-flow .capture-btn:disabled{opacity:.6;cursor:not-allowed;}
body.kiosk-body.qr-photo-flow .secondary{
background:#e5e7eb;
color:#111827;
}
body.kiosk-body.qr-photo-flow .identify-box{
width:min(100%,560px);
}
body.kiosk-body.qr-photo-flow .identify-title{display:none;}
body.kiosk-body.qr-photo-flow .identify-actions{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
}
body.kiosk-body.qr-photo-flow .identify-actions .capture-btn,
body.kiosk-body.qr-photo-flow .identify-actions .secondary{
width:100%;
}
body.kiosk-body.qr-photo-flow .manual-box{
width:min(100%,560px);
border:1px solid #fecaca;
background:#fff7f7;
padding:12px;
}
body.kiosk-body.qr-photo-flow .manual-title{
margin:0 0 4px;
color:#991b1b;
font-size:18px;
font-weight:800;
text-align:center;
}
body.kiosk-body.qr-photo-flow .manual-help{
margin:0 0 10px;
color:#7f1d1d;
text-align:center;
font-size:14px;
}
body.kiosk-body.qr-photo-flow .manual-box input{
width:100%;
border:1px solid #cbd5e1;
padding:12px;
font-size:18px;
margin:0 0 8px;
background:#fff;
}
body.kiosk-body.qr-photo-flow .manual-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
body.kiosk-body.qr-photo-flow .manual-actions button:first-child{background:#111827;color:#fff;}
body.kiosk-body.qr-photo-flow .manual-actions .secondary{background:#e5e7eb;color:#111827;}
body.kiosk-body.qr-photo-flow .result-banner{
width:min(100%,560px);
min-height:28px;
padding:8px 10px;
text-align:center;
font-weight:700;
color:#475467;
}
body.kiosk-body.qr-photo-flow .result-banner.ok{
color:#166534;
background:#dcfce7;
border:1px solid #86efac;
}
body.kiosk-body.qr-photo-flow .result-banner.err{
color:#991b1b;
background:#fee2e2;
border:1px solid #fecaca;
}
body.kiosk-body.qr-photo-flow .camera-unavailable{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
background:#111827;
font-weight:800;
gap:8px;
}
body.kiosk-body.qr-photo-flow .camera-unavailable .camera-icon{font-size:42px;}
body.kiosk-body.qr-photo-flow .hidden{display:none!important;}
body.kiosk-body.qr-photo-flow footer{
width:min(690px,96vw);
text-align:right;
color:#667085;
font-size:13px;
margin-top:6px;
}
@media (max-height:760px){
body.kiosk-body.qr-photo-flow .kiosk{padding-top:6px;}
body.kiosk-body.qr-photo-flow .kiosk-head{min-height:46px;margin-bottom:5px;}
body.kiosk-body.qr-photo-flow .logo{max-height:36px;}
body.kiosk-body.qr-photo-flow .qr-capture-box{padding:10px;gap:7px;width:min(640px,96vw);}
body.kiosk-body.qr-photo-flow .camera-frame{width:min(100%,500px);}
body.kiosk-body.qr-photo-flow .capture-btn,
body.kiosk-body.qr-photo-flow .secondary,
body.kiosk-body.qr-photo-flow .manual-actions button{min-height:38px;padding:8px 12px;}
body.kiosk-body.qr-photo-flow .manual-box{padding:9px;}
body.kiosk-body.qr-photo-flow .manual-box input{padding:9px;font-size:16px;}
body.kiosk-body.qr-photo-flow .face-hint{padding:7px 10px;}
}
@media (max-width:640px){
body.kiosk-body.qr-photo-flow .kiosk-head{width:96vw;gap:8px;}
body.kiosk-body.qr-photo-flow .commerce{font-size:16px;}
body.kiosk-body.qr-photo-flow .clock{font-size:12px;}
body.kiosk-body.qr-photo-flow .identify-actions{grid-template-columns:1fr;}
body.kiosk-body.qr-photo-flow .manual-actions{grid-template-columns:1fr;}
}
/* v0.6.7: estados visuales y reto de presencia sin biometría */
body.kiosk-body.qr-photo-flow.success-mode{
background:#dcfce7 !important;
}
body.kiosk-body.qr-photo-flow.failure-mode{
background:#fee2e2 !important;
}
body.kiosk-body.qr-photo-flow.working-mode{
background:#eef2ff !important;
}
body.kiosk-body.qr-photo-flow.success-mode .face-hint{
background:rgba(22,101,52,.92);
}
body.kiosk-body.qr-photo-flow.failure-mode .face-hint{
background:rgba(153,27,27,.92);
}
body.kiosk-body.qr-photo-flow.working-mode .face-hint{
background:rgba(30,64,175,.92);
}
body.kiosk-body.qr-photo-flow .photo-preview{
display:block;
transform:scaleX(-1);
}
body.kiosk-body.qr-photo-flow .identify-actions{
margin-top:0;
}
body.kiosk-body.qr-photo-flow .result-banner:empty{
display:none;
}
/* v0.6.9: pantalla pública más discreta, guía de tamaño facial y cabecera limpia */
body.kiosk-body.qr-photo-flow .kiosk-head{
grid-template-columns:auto 1fr;
grid-template-areas:"logo commerce" "logo clock";
align-items:center;
justify-content:center;
column-gap:14px;
row-gap:0;
min-height:58px;
margin-bottom:8px;
}
body.kiosk-body.qr-photo-flow .commerce{
font-size:clamp(18px,2.6vh,28px);
line-height:1.05;
font-weight:800;
color:#172033;
}
body.kiosk-body.qr-photo-flow .clock{
font-size:clamp(13px,1.8vh,16px);
color:#64748b;
line-height:1.2;
}
body.kiosk-body.qr-photo-flow .face-guide{
position:absolute;
inset:0;
pointer-events:none;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
}
body.kiosk-body.qr-photo-flow .face-guide span{
display:block;
width:34%;
height:56%;
min-width:125px;
min-height:170px;
border:2px dashed rgba(255,255,255,.78);
box-shadow:0 0 0 999px rgba(0,0,0,.08);
background:rgba(255,255,255,.035);
}
body.kiosk-body.qr-photo-flow .face-guide:after{
content:'Ajusta tu rostro a la guía';
position:absolute;
bottom:48px;
left:50%;
transform:translateX(-50%);
color:#fff;
background:rgba(0,0,0,.48);
padding:5px 9px;
font-size:13px;
font-weight:700;
white-space:nowrap;
}
body.kiosk-body.qr-photo-flow .photo-ready .face-guide,
body.kiosk-body.qr-photo-flow .manual-mode .face-guide,
body.kiosk-body.qr-photo-flow .qr-mode-active .face-guide,
body.kiosk-body.qr-photo-flow .camera-frame.camera-error .face-guide{
display:none;
}
body.kiosk-body.qr-photo-flow .face-hint{
z-index:4;
}
@media (max-height:760px){
body.kiosk-body.qr-photo-flow .kiosk-head{min-height:42px;margin-bottom:4px;}
body.kiosk-body.qr-photo-flow .face-guide span{width:32%;height:54%;min-height:145px;}
body.kiosk-body.qr-photo-flow .face-guide:after{bottom:42px;font-size:12px;padding:4px 7px;}
}
@media (max-width:640px){
body.kiosk-body.qr-photo-flow .kiosk-head{
grid-template-columns:auto 1fr;
grid-template-areas:"logo commerce" "logo clock";
text-align:left;
}
}
/* v0.6.10: cabecera corregida y guía/instrucción más claras */
body.kiosk-body.qr-photo-flow .kiosk-head{
display:grid !important;
grid-template-columns:auto 1fr;
grid-template-areas:"logo commerce" "logo clock";
align-items:center;
justify-content:center;
column-gap:14px;
row-gap:2px;
width:min(760px,96vw);
min-height:58px;
margin:0 0 8px;
text-align:left;
}
body.kiosk-body.qr-photo-flow .kiosk-head .logo{
grid-area:logo;
}
body.kiosk-body.qr-photo-flow .kiosk-head .commerce{
grid-area:commerce;
display:block;
}
body.kiosk-body.qr-photo-flow .kiosk-head .clock{
grid-area:clock;
display:block;
margin-left:0;
white-space:nowrap;
}
body.kiosk-body.qr-photo-flow .pre-camera-instruction{
width:min(100%,560px);
text-align:center;
color:#334155;
font-size:clamp(13px,1.8vh,16px);
font-weight:700;
margin:-2px 0 2px;
}
body.kiosk-body.qr-photo-flow .face-guide span{
width:38%;
height:60%;
min-width:140px;
min-height:185px;
}
body.kiosk-body.qr-photo-flow .face-guide:after{
content:'';
display:none;
}
body.kiosk-body.qr-photo-flow .photo-ready .pre-camera-instruction,
body.kiosk-body.qr-photo-flow .manual-mode .pre-camera-instruction,
body.kiosk-body.qr-photo-flow .qr-mode-active .pre-camera-instruction,
body.kiosk-body.qr-photo-flow .camera-frame.camera-error ~ .pre-camera-instruction{
display:none;
}
@media (max-height:760px){
body.kiosk-body.qr-photo-flow .kiosk-head{min-height:46px;margin-bottom:5px;row-gap:0;}
body.kiosk-body.qr-photo-flow .pre-camera-instruction{font-size:12px;margin:-2px 0 1px;}
body.kiosk-body.qr-photo-flow .face-guide span{width:36%;height:58%;min-height:158px;}
}
@media (max-width:640px){
body.kiosk-body.qr-photo-flow .kiosk-head{
display:grid !important;
grid-template-columns:auto 1fr;
grid-template-areas:"logo commerce" "logo clock";
text-align:left;
}
}
/* v0.7.0 informes y exportación */
.reports-page .report-filter-card{border-top:4px solid #2563eb;}
.report-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr)) auto;gap:12px;align-items:end;}
.report-filter-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:#334155;}
.report-filter-grid input,.report-filter-grid select{padding:10px;border:1px solid #cbd5e1;background:#fff;font-size:14px;}
.filter-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.report-stat-grid{width:95%;max-width:1400px;margin:0 auto 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.stat-card{background:#fff;border:1px solid #dbe4ef;border-left:4px solid #2563eb;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.05);}
.stat-card strong{display:block;font-size:30px;line-height:1;color:#0f172a;}
.stat-card span{display:block;margin-top:8px;color:#64748b;font-weight:700;}
.stat-card.warn{border-left-color:#dc2626;}
.export-card{border-top:4px solid #0f766e;}
.export-actions{display:flex;gap:10px;flex-wrap:wrap;}
.export-actions .button-link{display:inline-block;text-decoration:none;}
.export-actions .button-link.secondary{background:#eef2ff;color:#1e3a8a;border-color:#c7d2fe;}
@media(max-width:1000px){.report-filter-grid{grid-template-columns:repeat(2,1fr)}.report-stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.report-filter-grid,.report-stat-grid{grid-template-columns:1fr}.filter-actions{align-items:stretch}.filter-actions button,.filter-actions a{width:100%;text-align:center}}
/* v0.7.1 informes refinados */
.report-filter-grid .button-main,
.filter-actions button{
border:0;
border-radius:0;
background:#111827;
color:#fff;
font-weight:700;
padding:11px 16px;
cursor:pointer;
font-size:14px;
min-height:40px;
}
.report-alert{
margin:12px 0 16px;
padding:12px 14px;
border:1px solid #f59e0b;
background:#fffbeb;
color:#92400e;
font-weight:700;
}
.report-alert.danger{
border-color:#fecaca;
background:#fee2e2;
color:#991b1b;
}
.report-photo-thumb{
width:78px;
height:58px;
object-fit:cover;
display:block;
border:1px solid #cbd5e1;
background:#f8fafc;
}
.report-photo-mini{
width:54px;
height:42px;
object-fit:cover;
display:block;
border:1px solid #cbd5e1;
}
.badge-ok,
.badge-danger{
display:inline-block;
padding:3px 8px;
font-size:12px;
font-weight:700;
border:1px solid transparent;
}
.badge-ok{background:#dcfce7;color:#166534;border-color:#86efac;}
.badge-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
.reports-page .data-table tr.bad td{background:#fff5f5;}
/* v0.7.3 */
.danger-button{background:#b42318!important;color:#fff!important;border:1px solid #b42318!important;padding:.55rem .9rem;cursor:pointer}
.danger-button:hover{background:#8f1d15!important}
.report-filter-grid .filter-actions{align-items:end;display:flex;gap:.55rem;flex-wrap:wrap}
.export-card .section-head p strong{font-weight:700}
/* v0.7.5 Correcciones pendientes de aceptación */
.correction-pending-box{ text-align:left; }
.correction-title{ font-weight:700; font-size:1.05rem; margin-bottom:.35rem; }
.correction-text{ margin-bottom:.4rem; }
.correction-detail{ font-size:.92rem; opacity:.95; margin:.15rem 0; }
.correction-actions{ display:flex; gap:.7rem; justify-content:center; margin-top:.8rem; flex-wrap:wrap; }
.correction-actions button{ min-width:120px; }
.report-alert.success{ border-left:4px solid #219653; background:#eefaf2; color:#145c2d; }
.report-alert.warn{ border-left:4px solid #d99000; background:#fff8e6; color:#664200; }
/* v0.7.6: fichaje de emergencia cuando la cámara no está disponible */
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode .camera-frame,
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode #btnCapturePhoto,
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode .identify-box{
display:none !important;
}
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode{
border-color:#dc2626;
}
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode .manual-box{
display:block !important;
border-color:#dc2626;
background:#fff7f7;
}
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode .manual-actions .secondary{
opacity:.55;
}
/* v0.7.7: insistir antes de permitir fichaje de emergencia */
.camera-recovery{
width:min(100%,62vh,640px);
display:flex;
gap:12px;
justify-content:center;
align-items:center;
flex-wrap:wrap;
margin-top:8px;
}
.camera-recovery.hidden{display:none!important;}
.camera-recovery .capture-btn.small,
.camera-recovery .secondary{
min-width:190px;
min-height:44px;
padding:10px 14px;
border-radius:0;
font-size:16px;
font-weight:700;
cursor:pointer;
}
.camera-recovery .secondary{
border:1px solid #991b1b;
background:#fff;
color:#991b1b;
}
.camera-recovery .secondary.hidden{display:none!important;}
body.kiosk-body.qr-photo-flow .capture-box.emergency-mode .camera-recovery{display:none!important;}
/* v0.7.8: aviso de corrección pendiente sin distracciones */
.capture-box.correction-lock{
max-width:min(820px,94vw);
gap:14px;
}
.capture-box.correction-lock .camera-frame,
.capture-box.correction-lock #btnCapturePhoto,
.capture-box.correction-lock #identifyBox,
.capture-box.correction-lock #manualBox,
.capture-box.correction-lock #cameraRecoveryBox{
display:none !important;
}
.correction-pending-box{
width:100%;
max-width:760px;
display:block;
padding:0;
border:0;
background:transparent;
color:#172033;
}
.correction-card{
width:100%;
border:1px solid #f59e0b;
background:#fffaf0;
padding:18px;
text-align:left;
}
.correction-alert{
font-size:clamp(18px,2.4vh,26px);
font-weight:800;
color:#92400e;
text-align:center;
margin-bottom:8px;
}
.correction-intro{
font-size:clamp(14px,1.9vh,18px);
color:#4b5563;
text-align:center;
margin-bottom:14px;
}
.correction-rows{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin:0 auto 16px;
max-width:620px;
}
.correction-rows div{
display:grid;
grid-template-columns:minmax(150px, 42%) 1fr;
gap:10px;
align-items:center;
border:1px solid #fde68a;
background:#fff;
padding:10px 12px;
}
.correction-rows span{
color:#6b7280;
font-size:14px;
font-weight:700;
}
.correction-rows strong{
color:#111827;
font-size:clamp(15px,2vh,18px);
font-weight:800;
}
.correction-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
max-width:620px;
margin:0 auto;
}
.correction-actions button{
min-height:48px;
border:0;
font-size:clamp(15px,2vh,18px);
font-weight:800;
cursor:pointer;
}
.correction-accept{
background:#166534;
color:#fff;
}
.correction-reject{
background:#991b1b;
color:#fff;
}
.correction-actions button:disabled{
opacity:.6;
cursor:not-allowed;
}
@media (max-width:620px){
.correction-rows div{grid-template-columns:1fr;gap:4px;}
.correction-actions{grid-template-columns:1fr;}
}
/* v0.7.12: Fichajes alineado visualmente con Informes */
.fichajes-page .report-filter-card{border-top:4px solid #2563eb;}
.fichajes-page .report-alert.warn{border-left:4px solid #d99000;background:#fff8e6;color:#664200;}
.fichajes-stat-grid .stat-card.warn{border-color:#f59e0b;background:#fffbeb;}
.status-badge{display:inline-block;border:1px solid #cbd5e1;padding:4px 8px;font-weight:800;font-size:12px;white-space:nowrap;}
.status-badge.ok{background:#dcfce7;color:#166534;border-color:#86efac;}
.status-badge.warn{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.status-badge.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
.data-table tr.row-ok td{background:#f6fff8;}
.data-table tr.row-warn td{background:#fff8e6;}
.data-table tr.row-danger td{background:#fff5f5;}
.cell-muted{color:#64748b;font-size:12px;}
.obs-pill{display:inline-block;margin:2px 4px 2px 0;padding:3px 7px;border:1px solid #fecaca;background:#fee2e2;color:#991b1b;font-size:12px;font-weight:700;}
.button-link.small{padding:7px 9px;font-size:13px;}
.fichajes-page .data-table th,.fichajes-page .data-table td{vertical-align:middle;}
/* v0.8.0: portal del empleado y estadísticas */
.employee-nav .nav-title{font-weight:800;color:#0f172a;}
.employee-portal .employee-welcome{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:4px solid #0f766e;}
.employee-portal .employee-welcome h1{margin:0 0 4px;font-size:clamp(24px,3vw,36px);}
.employee-portal .employee-welcome p{margin:0;color:#64748b;font-weight:700;}
.employee-last{min-width:240px;background:#f8fafc;border:1px solid #dbe4ef;padding:12px;text-align:right;}
.employee-last strong,.employee-last span{display:block;}
.employee-last span{margin-top:6px;color:#334155;}
.employee-pending{border-top:4px solid #f59e0b;}
.portal-correction{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid #fde68a;background:#fffbeb;padding:12px;margin:10px 0;}
.portal-correction strong,.portal-correction span,.portal-correction small{display:block;}
.portal-correction span{font-weight:800;color:#111827;margin-top:3px;}
.portal-correction small{color:#64748b;margin-top:3px;}
.portal-correction form{display:flex;gap:8px;flex-wrap:wrap;}
.portal-correction button{border:0;padding:10px 13px;font-weight:800;cursor:pointer;color:#fff;}
.portal-correction .correction-accept{background:#166534;}
.portal-correction .correction-reject{background:#991b1b;}
.employee-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(160px,220px)) auto;gap:12px;align-items:end;}
.employee-filter-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:#334155;}
.employee-filter-grid input{padding:10px;border:1px solid #cbd5e1;background:#fff;font-size:14px;}
.employee-filter-grid button{border:0;background:#111827;color:#fff;font-weight:800;padding:11px 16px;cursor:pointer;}
.employee-stat-grid{margin-top:0;}
.portal-profile{border-top:4px solid #2563eb;}
.profile-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:10px;margin:12px 0 18px;}
.profile-grid div{border:1px solid #dbe4ef;background:#f8fafc;padding:12px;}
.profile-grid strong,.profile-grid span{display:block;}
.profile-grid strong{font-size:12px;text-transform:uppercase;color:#64748b;margin-bottom:5px;}
.profile-grid span{font-weight:800;color:#172033;}
.password-inline{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;border-top:1px solid #e2e8f0;padding-top:16px;}
.password-inline h3{grid-column:1/-1;margin:0;color:#172033;}
.password-inline input{padding:11px;border:1px solid #cbd5e1;}
.password-inline button{border:0;background:#0f766e;color:#fff;font-weight:800;padding:12px 16px;cursor:pointer;}
.portal-placeholder{border-top:4px solid #94a3b8;background:#f8fafc;}
.auth-links{text-align:center;color:#64748b;}
.auth-links a{color:#1d4ed8;font-weight:700;text-decoration:none;}
.stats-page .wide-card{margin-bottom:18px;}
@media(max-width:900px){.employee-portal .employee-welcome{display:block}.employee-last{text-align:left;margin-top:12px}.profile-grid{grid-template-columns:repeat(2,1fr)}.password-inline{grid-template-columns:1fr}.employee-filter-grid{grid-template-columns:1fr}.portal-correction{grid-template-columns:1fr}}
@media(max-width:560px){.profile-grid{grid-template-columns:1fr}}
/* v0.8.1: mejoras portal empleado */
.employee-nav .nav-links a.active{font-weight:900;}
.portal-edit-form{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr)) auto;gap:12px;align-items:end;margin-top:18px;border-top:1px solid #e5e7eb;padding-top:16px;}
.portal-edit-form h3{grid-column:1/-1;margin:0 0 2px;color:#0f172a;}
.portal-edit-form label{display:block;font-weight:800;color:#334155;font-size:13px;}
.portal-edit-form input{width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #cbd5e1;background:#fff;}
.portal-edit-form button{padding:11px 16px;border:0;background:#2563eb;color:#fff;font-weight:900;cursor:pointer;}
.employee-self-qr .qr-print-area{justify-content:center;}
.employee-self-qr .qr-img{background:#fff;padding:12px;border:1px solid #e5e7eb;}
@media(max-width:900px){.portal-edit-form{grid-template-columns:1fr}.portal-edit-form button{width:100%;}}
@media print{.employee-nav,.qr-actions,.employee-self-qr .button-link,footer{display:none!important}.employee-self-qr{box-shadow:none;border:0}.qr-img{width:360px;height:360px}}
/* v0.8.2: portal empleado separado y QR siempre cuadrado */
.qr-img{
display:block;
width:min(340px, 100%);
height:auto!important;
aspect-ratio:1 / 1;
object-fit:contain;
box-sizing:border-box;
}
.employee-self-qr .qr-img{
width:min(420px, 100%);
height:auto!important;
aspect-ratio:1 / 1;
}
.employee-profile-page .portal-profile{margin-top:18px;}
.employee-profile-page .portal-placeholder{margin-top:18px;}
@media print{
.qr-img{width:360px!important;height:auto!important;aspect-ratio:1 / 1;}
}
/* v0.8.3: portal empleado ampliado */
.qr-note{display:block;margin-top:18px;clear:both;}
.employee-docs-page .compact-welcome{margin-top:18px;}
.employee-docs-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:18px;margin-top:18px;}
.portal-module-card{border-top:4px solid #2563eb;min-height:170px;}
.portal-module-card h2{margin-top:0;color:#0f172a;}
.portal-module-card p{color:#475569;line-height:1.5;}
.module-status{display:inline-block;margin-top:12px;padding:7px 10px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-weight:800;font-size:13px;}
@media(max-width:900px){.employee-docs-grid{grid-template-columns:1fr;}}
/* v0.8.4 - Dashboard y auditoría */
.dashboard-page .dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 0 18px;}
.dashboard-head h1{margin:0;font-size:30px;color:#0f172a;}
.dashboard-head p{margin:6px 0 0;color:#64748b;}
.dash-date{font-weight:800;color:#334155;background:#f8fafc;border:1px solid #dbe4ef;padding:10px 12px;white-space:nowrap;}
.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px;}
.dashboard-alert{border-left:5px solid #dc2626;background:#fff7f7;}
.dashboard-alert h2{color:#991b1b;}
.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.compact-table th,.compact-table td{font-size:14px;padding:8px;}
.mini-chart{display:flex;align-items:flex-end;gap:14px;min-height:140px;padding:12px 8px 4px;overflow:auto;}
.bar-item{min-width:58px;text-align:center;color:#475569;}
.bar-item .bar{width:34px;margin:0 auto 8px;background:#2563eb;border:1px solid #1d4ed8;}
.bar-item span{display:block;font-size:12px;}
.bar-item strong{display:block;margin-top:2px;color:#0f172a;}
.audit-table small{color:#64748b;}
.status-badge.info{background:#e0f2fe;color:#075985;border-color:#7dd3fc;}
.primary-button{border:0;background:#2563eb;color:#fff;font-weight:800;padding:11px 14px;cursor:pointer;}
@media(max-width:980px){.dashboard-columns{grid-template-columns:1fr}.dashboard-page .dashboard-head{align-items:flex-start;flex-direction:column}.dash-date{white-space:normal}}
/* v0.8.5 - pulido Panel y Auditoría */
/* Auditoría: botoneras y filtros con el mismo lenguaje visual que Informes */
.auditoria-page .quick-ranges{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:14px 0 16px;
}
.auditoria-page .quick-ranges a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:9px 13px;
border:1px solid #cbd5e1;
background:#f8fafc;
color:#172033;
text-decoration:none;
font-weight:800;
font-size:14px;
}
.auditoria-page .quick-ranges a:hover{
background:#eef2ff;
border-color:#bfdbfe;
color:#1d4ed8;
}
.auditoria-page .filter-actions{
display:flex;
gap:10px;
align-items:end;
flex-wrap:wrap;
}
.auditoria-page .filter-actions .primary-button,
.auditoria-page .filter-actions .button-link{
min-height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
font-size:14px;
border:0;
text-decoration:none;
}
.auditoria-page .filter-actions .button-link.muted{
background:#e5e7eb;
color:#111827;
}
.auditoria-page .audit-table .status-badge.info{
max-width:220px;
overflow:hidden;
text-overflow:ellipsis;
}
/* Panel: tarjetas superiores y gráfico ligero sin dependencia externa */
.dashboard-page .wide-page{
padding-top:14px;
}
.dashboard-page .dashboard-head{
background:#fff;
border:1px solid #d8dee9;
border-left:4px solid #2563eb;
padding:16px 18px;
box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.dashboard-page .dashboard-grid{
display:grid;
grid-template-columns:repeat(6,minmax(150px,1fr));
gap:14px;
margin:0 0 18px;
}
.dashboard-page .stat-card{
min-height:104px;
display:flex;
flex-direction:column;
justify-content:center;
border-left-width:5px;
}
.dashboard-page .stat-card strong{
font-size:clamp(24px,3vw,34px);
}
.dashboard-page .stat-card.warn{
background:#fff7ed;
border-left-color:#f59e0b;
}
.dashboard-page .dashboard-alert{
border:1px solid #fecaca;
border-left:5px solid #dc2626;
background:#fff7f7;
}
.dashboard-page .dashboard-alert h2{
margin:0 0 8px;
}
.dashboard-page .quick-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
}
.dashboard-page .dashboard-columns .section-head,
.dashboard-page .wide-card > .section-head{
display:flex;
justify-content:space-between;
gap:14px;
align-items:flex-start;
margin-bottom:12px;
}
.dashboard-page .dashboard-columns .section-head h2,
.dashboard-page .wide-card > .section-head h2{
margin:0 0 4px;
}
.dashboard-page .dashboard-columns .section-head p,
.dashboard-page .wide-card > .section-head p{
margin:0;
color:#64748b;
}
.dashboard-page .compact-table th,
.dashboard-page .compact-table td{
padding:9px 10px;
}
.dashboard-page .mini-chart{
display:flex;
align-items:flex-end;
gap:16px;
min-height:165px;
padding:18px 12px 8px;
overflow-x:auto;
border:1px solid #e2e8f0;
background:linear-gradient(to top,#f8fafc,#ffffff);
}
.dashboard-page .bar-item{
min-width:64px;
text-align:center;
color:#475569;
}
.dashboard-page .bar-item .bar{
width:34px;
margin:0 auto 9px;
background:#2563eb;
border:1px solid #1d4ed8;
min-height:6px;
}
.dashboard-page .bar-item span{
display:block;
font-size:12px;
color:#64748b;
}
.dashboard-page .bar-item strong{
display:block;
margin-top:2px;
color:#0f172a;
font-size:14px;
}
.dashboard-page .mini-chart:empty::before{
content:'Sin datos recientes';
color:#64748b;
font-weight:700;
}
.dashboard-page .empty-chart-note{
margin:0;
padding:16px;
color:#64748b;
font-weight:700;
}
@media(max-width:1280px){
.dashboard-page .dashboard-grid{grid-template-columns:repeat(3,minmax(180px,1fr));}
}
@media(max-width:760px){
.dashboard-page .dashboard-grid{grid-template-columns:1fr 1fr;}
.auditoria-page .quick-ranges a{flex:1 1 calc(50% - 10px);}
}
@media(max-width:520px){
.dashboard-page .dashboard-grid{grid-template-columns:1fr;}
.dashboard-page .dashboard-columns .section-head,
.dashboard-page .wide-card > .section-head{display:block;}
.dashboard-page .section-head .button-link{margin-top:10px;}
.auditoria-page .quick-ranges a{flex:1 1 100%;}
}
/* v0.8.6 - Panel y Auditoría visibles + cache bust aplicado en PHP */
.auditoria-page .wide-page,
.dashboard-page .wide-page{
width:95%;
max-width:1400px;
margin:0 auto;
}
.auditoria-page .report-filter-card{
background:#ffffff;
border:1px solid #dbe4ef;
border-top:5px solid #2563eb;
box-shadow:0 10px 25px rgba(15,23,42,.06);
}
.auditoria-page .quick-ranges{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
margin:14px 0 18px !important;
}
.auditoria-page .quick-ranges a,
.auditoria-page .quick-ranges .quick-pill{
appearance:none;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:38px !important;
padding:9px 14px !important;
background:#eef2ff !important;
color:#1e3a8a !important;
border:1px solid #c7d2fe !important;
text-decoration:none !important;
font-weight:800 !important;
line-height:1 !important;
}
.auditoria-page .quick-ranges a:hover{
background:#dbeafe !important;
border-color:#93c5fd !important;
}
.auditoria-page .filter-actions{
display:flex !important;
gap:10px !important;
align-items:end !important;
flex-wrap:wrap !important;
}
.auditoria-page .filter-actions button,
.auditoria-page .filter-actions .primary-button{
min-height:41px !important;
border:0 !important;
background:#2563eb !important;
color:#fff !important;
padding:10px 18px !important;
font-weight:800 !important;
cursor:pointer !important;
}
.auditoria-page .filter-actions .button-link,
.auditoria-page .filter-actions a{
min-height:41px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:10px 16px !important;
border:1px solid #cbd5e1 !important;
background:#f8fafc !important;
color:#111827 !important;
text-decoration:none !important;
font-weight:800 !important;
}
.auditoria-page .audit-table th{
background:#f1f5f9 !important;
}
.auditoria-page .audit-table .status-badge.info{
display:inline-block;
background:#e0f2fe !important;
color:#075985 !important;
border:1px solid #7dd3fc !important;
max-width:240px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.dashboard-page .dashboard-head{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:18px !important;
background:#ffffff !important;
border:1px solid #dbe4ef !important;
border-left:5px solid #2563eb !important;
padding:18px 20px !important;
margin:14px 0 18px !important;
box-shadow:0 10px 25px rgba(15,23,42,.06) !important;
}
.dashboard-page .dashboard-head h1{margin:0 !important;color:#0f172a !important;font-size:30px !important;}
.dashboard-page .dashboard-head p{margin:5px 0 0 !important;color:#64748b !important;}
.dashboard-page .dash-date{
background:#f8fafc;
border:1px solid #dbe4ef;
padding:9px 12px;
font-weight:800;
color:#334155;
white-space:nowrap;
}
.dashboard-page .dashboard-grid,
.dashboard-page .dashboard-kpis{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(165px,1fr)) !important;
gap:14px !important;
margin:0 0 18px !important;
}
.dashboard-page .dashboard-grid .stat-card,
.dashboard-page .dashboard-kpis .stat-card{
background:#ffffff !important;
border:1px solid #dbe4ef !important;
border-left:5px solid #2563eb !important;
min-height:100px !important;
padding:16px !important;
box-shadow:0 8px 20px rgba(15,23,42,.055) !important;
}
.dashboard-page .dashboard-grid .stat-card.warn,
.dashboard-page .dashboard-kpis .stat-card.warn{
background:#fff7ed !important;
border-left-color:#f59e0b !important;
}
.dashboard-page .dashboard-grid .stat-card strong,
.dashboard-page .dashboard-kpis .stat-card strong{
display:block !important;
font-size:clamp(25px,3vw,36px) !important;
color:#0f172a !important;
line-height:1 !important;
}
.dashboard-page .dashboard-grid .stat-card span,
.dashboard-page .dashboard-kpis .stat-card span{
display:block !important;
margin-top:8px !important;
font-weight:800 !important;
color:#64748b !important;
}
.dashboard-page .dashboard-alert{
background:#fff7f7 !important;
border:1px solid #fecaca !important;
border-left:5px solid #dc2626 !important;
}
.dashboard-page .dashboard-alert h2{color:#991b1b !important;}
.dashboard-page .dashboard-columns{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:18px !important;
align-items:start !important;
}
.dashboard-page .wide-card > .section-head,
.dashboard-page .dashboard-columns .section-head{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:12px !important;
border-bottom:1px solid #e5e7eb !important;
padding-bottom:12px !important;
margin-bottom:12px !important;
}
.dashboard-page .mini-chart{
min-height:160px !important;
display:flex !important;
align-items:flex-end !important;
gap:14px !important;
padding:18px 10px 8px !important;
overflow:auto !important;
border:1px solid #e5e7eb !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
}
.dashboard-page .bar-item{
min-width:56px !important;
height:128px !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
align-items:center !important;
gap:5px !important;
}
.dashboard-page .bar-item .bar{
width:28px !important;
min-height:8px !important;
background:#2563eb !important;
border:1px solid #1d4ed8 !important;
}
.dashboard-page .bar-item span{font-size:12px !important;color:#64748b !important;font-weight:700 !important;}
.dashboard-page .bar-item strong{font-size:13px !important;color:#0f172a !important;}
.dashboard-page .empty-chart-note{
margin:0 !important;
padding:18px !important;
color:#64748b !important;
font-weight:700 !important;
}
@media(max-width:980px){
.dashboard-page .dashboard-columns{grid-template-columns:1fr !important;}
.dashboard-page .dashboard-head{align-items:flex-start !important;flex-direction:column !important;}
}
@media(max-width:640px){
.auditoria-page .quick-ranges a{flex:1 1 100% !important;}
.auditoria-page .filter-actions button,
.auditoria-page .filter-actions a{width:100% !important;}
}
/* v0.8.8 - Estadísticas ampliadas */
.stats-kpi-grid .stat-card strong{font-size:1.85rem;}
.stats-chart{min-height:150px;align-items:flex-end;}
.stats-chart .bar{background:linear-gradient(180deg,#2563eb,#93c5fd);border-radius:3px 3px 0 0;min-width:22px;}
.stats-columns{align-items:stretch;}
.correction-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px;}
.correction-summary>div{border:1px solid #e5e7eb;background:#f8fafc;padding:16px;text-align:center;}
.correction-summary strong{display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;color:#111827;}
.correction-summary span{font-size:.9rem;color:#475569;}
.correction-summary .warn{background:#fffbeb;border-color:#facc15;}
.correction-summary .danger{background:#fef2f2;border-color:#fca5a5;}
@media (max-width:760px){.correction-summary{grid-template-columns:repeat(2,minmax(0,1fr));}.stats-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* v0.8.8 - Corrección CSS Estadísticas */
.stats-page .quick-ranges{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:14px 0 16px;
}
.stats-page .quick-ranges a,
.stats-page .quick-ranges .quick-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:9px 14px;
border:1px solid #bfdbfe;
background:#eff6ff;
color:#1d4ed8;
text-decoration:none;
font-weight:800;
font-size:14px;
line-height:1.1;
box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.stats-page .quick-ranges a:hover,
.stats-page .quick-ranges .quick-pill:hover{
background:#dbeafe;
border-color:#93c5fd;
}
.stats-page .section-head .button-link,
.stats-page .filter-actions .button-link,
.stats-page .filter-actions .primary-button,
.stats-page .filter-actions button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:10px 15px;
border:0;
background:#111827;
color:#fff;
text-decoration:none;
font-weight:800;
font-size:14px;
cursor:pointer;
box-sizing:border-box;
}
.stats-page .section-head .button-link.muted,
.stats-page .filter-actions .button-link.muted{
background:#e5e7eb;
color:#111827;
}
.stats-page .section-head .button-link:hover,
.stats-page .filter-actions .button-link:hover,
.stats-page .filter-actions .primary-button:hover,
.stats-page .filter-actions button:hover{
filter:brightness(.96);
}
@media(max-width:760px){
.stats-page .quick-ranges a,
.stats-page .quick-ranges .quick-pill{
flex:1 1 calc(50% - 10px);
}
.stats-page .filter-actions{
align-items:stretch;
}
.stats-page .filter-actions button,
.stats-page .filter-actions a{
width:100%;
}
}
@media(max-width:480px){
.stats-page .quick-ranges a,
.stats-page .quick-ranges .quick-pill{
flex:1 1 100%;
}
}
/* v0.9.0: consentimientos */
.employee-consent-page .employee-welcome{border-top:4px solid #2563eb;}
.consent-form .section-head{margin-bottom:12px;}
.consent-item{border:1px solid #dbe4ef;background:#fff;padding:14px;margin:12px 0;}
.consent-item.accepted{border-left:5px solid #16a34a;}
.consent-item.pending{border-left:5px solid #f59e0b;}
.consent-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;}
.consent-head h3{margin:0;font-size:18px;color:#172033;}
.consent-item p{margin:8px 0 10px 0;line-height:1.45;color:#334155;}
.consent-meta{font-size:13px;color:#64748b;margin-bottom:10px;font-weight:700;}
.consent-check{display:flex;align-items:center;gap:8px;font-weight:800;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;padding:10px;}
.consent-check input{width:18px;height:18px;}
.consent-admin-page .report-filter-grid{grid-template-columns:repeat(4,minmax(160px,1fr)) auto;}
.legal-status-card{border-top:4px solid #f59e0b;}
.legal-status-card.ok{border-top-color:#16a34a;}
.legal-status-card .status-badge{margin-left:8px;}
@media(max-width:900px){.consent-head{display:block}.consent-head .status-badge{margin-top:8px}.consent-admin-page .report-filter-grid{grid-template-columns:1fr}}