/**
 * Proyecto: control-presencia-codilogic
 * Autor: Codilogic
 * Archivo: public/assets/css/app.css
 * Descripción: Estilos visuales principales de la aplicación.
 */
:root{
    --cp-bg:#f4f6fb;
    --cp-dark:#111827;
    --cp-muted:#6b7280;
    --cp-primary:#2563eb;
    --cp-card:#ffffff;
    --cp-border:#e5e7eb;
    --cp-radius:24px;
}

body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cp-dark)}
.public-body{background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 45%,#e0f2fe 100%);min-height:100vh}
.hero-section,.login-section,.clock-section{min-height:100vh;display:flex;align-items:center}
.eyebrow{display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;background:#e0e7ff;color:#3730a3;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.hero-title{font-size:clamp(2.4rem,6vw,4.8rem);font-weight:850;letter-spacing:-.05em;line-height:1}
.hero-subtitle{font-size:1.2rem;color:var(--cp-muted);max-width:760px;margin:1rem auto 0}
.access-card,.login-card,.clock-card,.content-card{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.65);box-shadow:0 24px 80px rgba(15,23,42,.12);border-radius:var(--cp-radius);padding:32px}
.access-card h2{font-weight:800}.access-card p{color:var(--cp-muted)}
.access-icon{width:56px;height:56px;border-radius:18px;background:var(--cp-dark);color:white;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:20px}.primary-card .access-icon{background:var(--cp-primary)}
.login-card{padding:40px}.clock-card{padding:40px}.clock-now{font-size:2rem;font-weight:850;text-align:center;background:#f8fafc;border:1px solid var(--cp-border);border-radius:20px;padding:18px;letter-spacing:-.03em}
.admin-body{background:var(--cp-bg)}.admin-shell{display:flex;min-height:100vh}.admin-sidebar{width:280px;background:#0f172a;color:white;padding:24px;position:fixed;inset:0 auto 0 0}.admin-main{margin-left:280px;min-height:100vh;width:calc(100% - 280px)}
.brand-block{display:flex;gap:14px;align-items:center;margin-bottom:32px}.brand-mark{width:48px;height:48px;border-radius:16px;background:#2563eb;display:flex;align-items:center;justify-content:center;font-weight:900}.brand-block span{display:block;color:#94a3b8;font-size:.85rem}.sidebar-nav{display:flex;flex-direction:column;gap:8px}.sidebar-nav a{color:#cbd5e1;text-decoration:none;padding:13px 14px;border-radius:14px;font-weight:650}.sidebar-nav a:hover{background:#1e293b;color:white}.admin-topbar{height:96px;background:white;border-bottom:1px solid var(--cp-border);display:flex;align-items:center;justify-content:space-between;padding:0 32px}.admin-topbar h1{font-size:1.6rem;font-weight:850;margin:0}.admin-topbar p{margin:0;color:var(--cp-muted)}.admin-content{padding:32px}.content-card{box-shadow:0 12px 40px rgba(15,23,42,.07);padding:28px;border:1px solid var(--cp-border)}
.stat-card{background:white;border:1px solid var(--cp-border);border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.stat-card span{display:block;color:var(--cp-muted);font-weight:650}.stat-card strong{display:block;font-size:2rem;letter-spacing:-.04em;margin-top:8px}.stat-card.warning{border-color:#fde68a;background:#fffbeb}.stat-card.success{border-color:#bbf7d0;background:#f0fdf4}
.table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;border-bottom:1px solid var(--cp-border)}.form-control,.form-select{border-radius:14px;border-color:#dbe2ea}.btn{border-radius:14px;font-weight:700}.btn-primary{background:var(--cp-primary);border-color:var(--cp-primary)}
@media(max-width:991px){.admin-sidebar{position:static;width:100%;border-radius:0}.admin-shell{display:block}.admin-main{margin-left:0;width:100%}.admin-topbar{height:auto;padding:20px;gap:16px;align-items:flex-start;flex-direction:column}.admin-content{padding:20px}}
.main-logo {
    max-width: 520px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.sidebar-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 24px;
}

.login-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 24px auto;
}