.btn-facilop { border: 1px solid var(--facilop-border); border-radius: var(--facilop-radius-sm); min-height: 38px; padding: .45rem .78rem; display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; background: var(--facilop-surface); color: var(--facilop-text); box-shadow: var(--facilop-shadow-sm); }
.btn-facilop:hover { text-decoration: none; border-color: #b8c5d4; color: var(--facilop-navy); }
.btn-primary-facilop { background: var(--facilop-navy); color: #fff; border-color: var(--facilop-navy); }
.btn-primary-facilop:hover { color: #fff; background: #12375f; }
.btn-icon { width: 38px; justify-content: center; padding: 0; }
.card-facilop { background: var(--facilop-surface); border: 1px solid var(--facilop-border); border-radius: var(--facilop-radius); box-shadow: var(--facilop-shadow-sm); padding: 18px; }
.card-facilop + .card-facilop { margin-top: 16px; }
.module-card { display: grid; gap: 12px; min-height: 184px; color: var(--facilop-text); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.module-card:hover { transform: translateY(-2px); box-shadow: var(--facilop-shadow-md); text-decoration: none; border-color: rgba(30,136,229,.32); }
.module-card .module-icon { width: 44px; height: 44px; border-radius: var(--facilop-radius); display: grid; place-items: center; background: #eaf5ff; color: var(--facilop-blue); }
.module-card .module-icon img { width: 24px; height: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .22rem .6rem; font-weight: 800; font-size: .78rem; border: 1px solid transparent; }
.status-badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.status-muted { background: #eef2f7; color: #334155; border-color: #d8e1ea; }
.status-good { background: #e8f5ee; color: var(--facilop-success); border-color: #bfe2cf; }
.status-warn { background: #fff7e6; color: var(--facilop-warning); border-color: #f3d28b; }
.status-danger { background: #fff0f0; color: var(--facilop-danger); border-color: #f0b8b8; }
.empty-state { min-height: 140px; display: grid; place-items: center; text-align: center; color: var(--facilop-muted); border: 1px dashed var(--facilop-border); border-radius: var(--facilop-radius); background: var(--facilop-surface-alt); padding: 20px; }
.timeline { display: grid; gap: 12px; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--facilop-blue); }
.qr-panel { border: 1px solid var(--facilop-border); border-radius: var(--facilop-radius); background: var(--facilop-surface-alt); padding: 16px; display: grid; gap: 10px; }
.alert-facilop { border: 1px solid var(--facilop-border); border-inline-start: 4px solid var(--facilop-blue); border-radius: var(--facilop-radius); background: var(--facilop-surface); padding: 12px 14px; }