* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; background:#f4f6f8; color:#2c3e50; display:flex; flex-direction:column; min-height:100vh; }

/* ---------- Header ---------- */
.app-header { background:#0b3d91; color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.15); flex-shrink:0; }
.app-header__inner { display:flex; justify-content:space-between; align-items:center; padding:10px 24px; }
.app-header__brand { display:flex; align-items:center; gap:10px; }
.app-header__shield { height:34px; }
.app-header__logo { height:26px; }
.app-header__title { font-weight:700; font-size:16px; margin-left:8px; }
.app-header__user { display:flex; align-items:center; gap:10px; font-size:14px; }
.app-header__name { font-weight:600; }
.app-header__rol { background:#1f6feb; color:#fff; padding:2px 8px; border-radius:10px; text-transform:uppercase; font-size:11px; }
.app-header__logout { color:#cfe2ff; text-decoration:none; margin-left:6px; }
.app-header__logout:hover { color:#fff; }

/* ---------- Layout: sidebar + main ---------- */
.app-layout { display:flex; flex:1 0 auto; min-height:0; }
.app-sidebar { width:240px; flex-shrink:0; background:#fff; border-right:1px solid #e1e4e8; padding:16px 0; display:flex; flex-direction:column; }
.app-sidebar__nav { display:flex; flex-direction:column; }
.app-sidebar__link { display:flex; align-items:center; gap:12px; padding:11px 20px; color:#44566e; text-decoration:none; font-weight:600; font-size:14px; border-left:3px solid transparent; }
.app-sidebar__link i { width:18px; text-align:center; color:#7a869a; }
.app-sidebar__link:hover { background:#eef2f7; color:#0b3d91; }
.app-sidebar__link.is-active { background:#e8f0fe; color:#0b3d91; border-left-color:#0b3d91; }
.app-sidebar__link.is-active i { color:#0b3d91; }

.app-main { flex:1 1 auto; padding:24px; min-width:0; overflow-x:hidden; }

/* ---------- Filtro en sidebar ---------- */
.app-filter { margin:18px 16px 0; padding:16px; background:#f7f9fc; border:1px solid #e1e4e8; border-radius:8px; }
.app-filter__title { margin:0 0 12px; font-size:13px; font-weight:700; color:#3c4858; text-transform:uppercase; letter-spacing:.03em; }
.app-filter label { display:block; font-size:12px; font-weight:600; color:#3c4858; margin:10px 0 4px; }
.app-filter input[type=date] { width:100%; padding:8px 10px; border:1px solid #cfd6e4; border-radius:5px; font-size:13px; box-sizing:border-box; }
.app-filter input[type=date]:focus { outline:none; border-color:#0b3d91; box-shadow:0 0 0 3px rgba(11,61,145,.12); }
.app-filter .btn-consultar { width:100%; margin-top:14px; }

/* ---------- Dashboard ---------- */
.app-dashboard__title { font-size:26px; font-weight:700; margin:0 0 4px; }
.app-dashboard__subtitle { color:#667; margin:0 0 22px; }
.app-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.app-card { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #e1e4e8; border-radius:8px; padding:20px; text-decoration:none; color:#2c3e50; transition:box-shadow .15s, transform .15s; }
.app-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.1); transform:translateY(-2px); border-color:#0b3d91; }
.app-card__icon { width:54px; height:54px; border-radius:10px; background:#e8f0fe; color:#0b3d91; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.app-card__body h3 { margin:0 0 4px; font-size:17px; }
.app-card__body p { margin:0; font-size:13px; color:#7a869a; }

/* ---------- Reporte ---------- */
.app-report__head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.app-report__title { font-size:24px; font-weight:700; margin:0; }
.app-report__subtitle { color:#667; margin:4px 0 0; }
.app-report__actions { display:flex; gap:10px; }
.app-report__table { background:#fff; border:1px solid #e1e4e8; border-radius:8px; padding:14px; overflow-x:auto; }
.app-report__table td a { color:#0563c1; }
.app-report__table td, .app-report__table th { word-break: break-word; }
.app-report__table .cell-url { word-break: break-all; }
.app-report__table table.dataTable { table-layout: fixed; width: 100% !important; }
.app-report__table .dataTables_wrapper { width: 100%; }

/* ---------- Botones ---------- */
.btn { display:inline-block; padding:10px 16px; border-radius:5px; text-decoration:none; font-weight:600; font-size:14px; border:none; cursor:pointer; }
.btn-volver { background:#6c757d; color:#fff; }
.btn-volver:hover { background:#5a6268; color:#fff; }
.btn-consultar { background:#0b3d91; color:#fff; }
.btn-consultar:hover { background:#082f6f; color:#fff; }
.btn-export { background:#1a8a3a; color:#fff; }
.btn-export:hover { background:#15702f; color:#fff; }

/* ---------- Footer ---------- */
.app-footer { background:#0b3d91; color:#cfe2ff; text-align:center; padding:14px 0; font-size:13px; flex-shrink:0; }
.app-footer p { margin:0; }