/* SIAMAQ Horas · capa visual sobre Mazer (sin dependencias externas) */
:root {
    --siamaq-primary: #3157c8;
    --siamaq-primary-rgb: 49, 87, 200;
    --siamaq-ink: #1c274c;
    --siamaq-muted: #667085;
    --siamaq-canvas: #f4f6fb;
    --siamaq-border: #e4e9f2;
    --siamaq-radius: 1rem;
    --siamaq-shadow: 0 10px 30px rgba(31, 45, 85, .07);
    --siamaq-shadow-hover: 0 16px 38px rgba(31, 45, 85, .12);
}

html { scroll-behavior: smooth; }
body { background: var(--siamaq-canvas); color: var(--siamaq-ink); }

/* Iconografía: caja, línea base y espaciado consistentes */
.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: -.125em;
}
.bi::before { display: block; line-height: 1; vertical-align: 0 !important; }
.btn .bi, .badge .bi, .alert .bi, .form-label .bi { font-size: 1em; }
#sidebar .sidebar-link { display: flex; align-items: center; gap: .75rem; }
#sidebar .sidebar-link > .bi {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0 !important;
    font-size: 1.15rem;
}
.stats-icon > .bi { width: 1em; height: 1em; }

.skip-link {
    position: fixed; top: .75rem; left: .75rem; z-index: 9999;
    padding: .7rem 1rem; border-radius: .65rem; background: #fff; color: var(--siamaq-primary);
    box-shadow: var(--siamaq-shadow); transform: translateY(-160%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Navegación */
#sidebar .sidebar-wrapper { border-right: 1px solid var(--siamaq-border); box-shadow: 8px 0 28px rgba(31, 45, 85, .04); }
#sidebar .sidebar-header { padding-bottom: 1.15rem; }
.siamaq-brand-mark {
    display: grid; place-items: center; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem;
    border-radius: .8rem; color: #fff; background: linear-gradient(145deg, #3157c8, #5d7ce0);
    box-shadow: 0 7px 16px rgba(var(--siamaq-primary-rgb), .28);
}
.siamaq-brand-copy { line-height: 1.05; }
.siamaq-brand-copy small { display: block; margin-top: .25rem; color: #98a2b3; font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; }
#sidebar .sidebar-title { margin-top: 1.1rem; color: #98a2b3; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
#sidebar .sidebar-link { margin-bottom: .25rem; border-radius: .75rem; transition: background .16s ease, transform .16s ease, color .16s ease; }
#sidebar .sidebar-link:hover { transform: translateX(3px); }
#sidebar .sidebar-item.active > .sidebar-link { box-shadow: 0 8px 18px rgba(var(--siamaq-primary-rgb), .22); }

.navbar-top {
    margin: .85rem 1.75rem 0; border: 1px solid rgba(228, 233, 242, .9); border-radius: .95rem;
    background: rgba(255, 255, 255, .9) !important; box-shadow: 0 8px 25px rgba(31, 45, 85, .05);
    backdrop-filter: blur(12px);
}
.siamaq-user-avatar { box-shadow: 0 0 0 4px rgba(var(--siamaq-primary-rgb), .1); }
.siamaq-online-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #20c997; box-shadow: 0 0 0 3px rgba(32, 201, 151, .15); }

/* Encabezado y composición */
#main-content { max-width: 1680px; margin: 0 auto; }
.page-heading { min-height: calc(100vh - 8rem); }
.siamaq-page-head {
    position: relative; overflow: hidden; padding: 1.55rem 1.7rem; border: 1px solid rgba(228, 233, 242, .9);
    border-radius: var(--siamaq-radius); background: linear-gradient(120deg, #fff 0%, #f8faff 70%, #eef3ff 100%);
    box-shadow: var(--siamaq-shadow);
}
.siamaq-page-head::after {
    content: ''; position: absolute; width: 12rem; height: 12rem; top: -8rem; right: -2rem;
    border-radius: 50%; background: rgba(var(--siamaq-primary-rgb), .07);
}
.siamaq-eyebrow { color: var(--siamaq-primary); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.siamaq-page-head h1 { margin: .25rem 0 .35rem; color: var(--siamaq-ink); font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -.025em; }
.siamaq-page-head p { max-width: 760px; margin: 0; color: var(--siamaq-muted); }

/* Tarjetas, métricas y alertas */
.section .card { border: 1px solid var(--siamaq-border); border-radius: var(--siamaq-radius); box-shadow: var(--siamaq-shadow); }
.section .card:not(.modal-content) { transition: box-shadow .18s ease, border-color .18s ease; }
.section .card:hover { border-color: #d8deea; box-shadow: var(--siamaq-shadow-hover); }
.section .card-header { padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--siamaq-border); background: transparent; }
.section .card-body { padding: 1.35rem; }
.card-title { color: var(--siamaq-ink); font-weight: 700; letter-spacing: -.015em; }
.stats-icon, .section .avatar[class*="bg-light-"] { border-radius: .85rem !important; }
.alert { border: 0; border-left: 4px solid currentColor; border-radius: .8rem; box-shadow: 0 7px 20px rgba(31, 45, 85, .05); }

/* Formularios y filtros */
.form-label { margin-bottom: .45rem; color: #344054; font-weight: 650; }
.form-control, .form-select, .input-group-text {
    min-height: 2.75rem; border-color: #d8deea; border-radius: .7rem;
}
.input-group > .input-group-text { color: #667085; background: #f7f9fc; }
.form-control:focus, .form-select:focus {
    border-color: #7793e8; box-shadow: 0 0 0 .22rem rgba(var(--siamaq-primary-rgb), .12);
}
.form-text { margin-top: .45rem; color: #7b8498; }
.form-check-input { width: 1.15rem; height: 1.15rem; border-color: #c7cfdd; }
.form-switch .form-check-input { width: 2.25rem; }
.btn { min-height: 2.45rem; border-radius: .68rem; font-weight: 650; letter-spacing: .005em; }
.btn-sm { min-height: 2.05rem; border-radius: .55rem; }
.btn-primary { border-color: var(--siamaq-primary); background: linear-gradient(135deg, var(--siamaq-primary), #4f6fd5); box-shadow: 0 6px 14px rgba(var(--siamaq-primary-rgb), .18); }
.btn-primary:hover { border-color: #2748ae; background: linear-gradient(135deg, #2748ae, #435fbe); transform: translateY(-1px); }
.btn-outline-primary:hover, .btn-outline-danger:hover, .btn-outline-success:hover, .btn-outline-warning:hover { transform: translateY(-1px); }

/* Tablas de gestión */
.table-responsive { border: 1px solid var(--siamaq-border); border-radius: .85rem; }
.card-body > .table-responsive { margin: -.15rem; }
.table { --bs-table-striped-bg: #f8faff; color: #344054; }
.table > :not(caption) > * > * { padding: .9rem 1rem; border-bottom-color: #e9edf4; }
.table thead th {
    border-bottom: 1px solid #dbe2ed; background: #f6f8fc; color: #667085;
    font-size: .71rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap;
}
.table tbody tr { transition: background-color .14s ease; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f1f5ff; }
.table tbody td[colspan] { padding: 2.8rem 1rem !important; color: #7b8498 !important; }
.table .badge { padding: .45rem .65rem; border-radius: 999px; font-weight: 650; }
.table td .d-inline-flex { padding: .2rem; border: 1px solid #e5e9f1; border-radius: .7rem; background: #fff; }
.table td .d-inline-flex .btn { min-width: 2.15rem; }

/* Modales y utilidades */
.modal-content { overflow: hidden; border: 0; border-radius: 1.1rem; box-shadow: 0 24px 65px rgba(23, 34, 66, .22); }
.modal-header { border-bottom-color: var(--siamaq-border); background: #f8faff; }
.modal-footer { border-top-color: var(--siamaq-border); background: #fbfcfe; }
.badge { letter-spacing: .01em; }
code, .font-monospace { font-variant-numeric: tabular-nums; }
footer { padding-top: 1.5rem; }

/* Login */
body.siamaq-auth { min-height: 100vh; background: #f5f7fc; }
.siamaq-auth #auth-left { max-width: 610px; margin-inline: auto; }
.siamaq-auth .auth-title { color: var(--siamaq-ink); letter-spacing: -.035em; }
.siamaq-auth-panel {
    position: relative; overflow: hidden;
    background: radial-gradient(circle at 80% 18%, rgba(111, 144, 255, .42), transparent 24%), linear-gradient(145deg, #2747a8, #162859 75%) !important;
}
.siamaq-auth-panel::before, .siamaq-auth-panel::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.siamaq-auth-panel::before { width: 28rem; height: 28rem; right: -10rem; bottom: -12rem; }
.siamaq-auth-panel::after { width: 18rem; height: 18rem; left: -8rem; top: -7rem; }
.siamaq-auth-visual { position: relative; z-index: 1; }

/* Dark mode */

/* Responsive */
@media (max-width: 767.98px) {
    .navbar-top { margin: .6rem .75rem 0; padding-inline: .35rem; }
    #main-content { padding: 1rem .8rem; }
    .siamaq-page-head { padding: 1.15rem; }
    .section .card-header, .section .card-body { padding: 1rem; }
    .section .card-header .btn, .section .card-header > .d-flex .btn { width: 100%; }
    .table > :not(caption) > * > * { padding: .78rem .8rem; }
    .table-responsive { max-height: min(68vh, 620px); }
    .table-responsive .table thead { position: sticky; top: 0; z-index: 2; }
    .d-flex.gap-2 > .btn:not(.btn-sm) { flex: 1 1 auto; }
    footer .float-start, footer .float-end { float: none !important; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}