/* Panel administrativo: menú gris grafito como el mockup, contenido claro. */

.logo-block { display: flex; align-items: center; gap: .6rem; font-family: var(--font-cond); font-weight: 700; font-size: 1.1rem; }
.logo-mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--plate); color: #000;
  border: 2px solid #000; border-radius: 4px; font-size: .9rem; letter-spacing: .04em; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(380px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; }

.app { display: flex; min-height: 100vh; }
.sidebar { background: var(--graphite); color: #fff; }
@media (min-width: 992px) {
  .sidebar.offcanvas-lg { background-color: var(--graphite) !important; color: #fff; }
  .sidebar { width: 250px; flex: 0 0 250px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
}
.sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--graphite); --bs-offcanvas-color: #fff; --bs-offcanvas-width: 270px; }
.menu { flex: 1; overflow-y: auto; padding: .25rem 0 1rem; }
.menu-group { margin-top: .9rem; }
.menu a {
  display: flex; align-items: center; gap: .5rem; padding: .42rem 1.25rem; color: #e9eaec; text-decoration: none;
  font-weight: 500; border-left: 4px solid transparent;
}
.menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); border-left-color: var(--plate); color: #fff; font-weight: 700; }
.menu .count { margin-left: auto; background: var(--urgent); color: #fff; border-radius: 10px; font-size: .75rem; padding: 0 .45rem; font-weight: 700; }
.menu .count.is-quiet { background: rgba(255, 255, 255, .25); }
.sidebar-foot { padding: .8rem 1.25rem; color: #c8cacd; border-top: 1px solid rgba(255, 255, 255, .12); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; background: #d9dbde; padding: .8rem 1.25rem; position: sticky; top: 0; z-index: 10; }
.topbar h1 { font-family: var(--font-cond); font-weight: 700; font-size: 1.35rem; }
.view { padding: 1.25rem; max-width: 1400px; width: 100%; }
.view:focus { outline: none; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.panel h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
.panel h3 { font-size: .95rem; font-weight: 700; margin: .75rem 0 .4rem; }
.lead-line { color: var(--ink-soft); margin-bottom: 1rem; max-width: 72ch; }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.btn-dark { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); }
.table { --bs-table-bg: transparent; }
.table th { font-size: .82rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tareas */
.todo { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 1rem; align-items: start;
  border: 1px solid var(--line); border-left: 6px solid var(--prio); border-radius: 4px; padding: .7rem .9rem; background: #fff; margin-bottom: .5rem; }
.todo.p-alta { --prio: var(--urgent); }
.todo.p-media { --prio: var(--warn); }
.todo.p-baja { --prio: var(--none); }
.todo .title { font-weight: 700; }
.todo .detail { color: var(--ink-soft); font-size: .9rem; }
.todo .when { color: var(--ink-soft); font-size: .8rem; white-space: nowrap; }
.todo .actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.prio { font-family: var(--font-cond); font-weight: 700; font-size: .8rem; padding: .05rem .45rem; border-radius: 3px; background: var(--prio); color: #fff; }
.p-media .prio { color: #1b1d20; }

/* Tablero general */
.zone-col .zbox { border: 3px solid var(--st); border-radius: 4px; background: #fff; height: 100%; }
.zone-col .zbox-h { background: var(--st); color: var(--st-ink); padding: .4rem .7rem; font-family: var(--font-cond); font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.zone-col .zbox-h span:last-child { margin-left: auto; font-weight: 600; }
.qbike { padding: .6rem .7rem; border-bottom: 1px solid #e3e5e8; }
.qbike:last-child { border-bottom: 0; }
.qbike .meta { font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mini-bar { height: 6px; background: #e3e5e8; } .mini-bar i { display: block; height: 100%; background: var(--ink); }

/* Recepción */
.checklist .form-check { padding: .35rem .35rem .35rem 2rem; border-radius: 4px; }
.checklist .form-check:hover { background: #f4f5f7; }
.checklist .form-check-input { width: 1.2em; height: 1.2em; }
pre.msg { white-space: pre-wrap; background: #f4f5f7; border: 1px solid var(--line); border-radius: 4px; padding: .7rem; font-family: var(--font); font-size: .9rem; margin: 0; }

/* Reportes */
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; height: 100%; }
.kpi .k-label { color: var(--ink-soft); font-size: .9rem; }
.kpi .k-value { font-family: var(--font-cond); font-weight: 700; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .k-sub { color: var(--ink-soft); font-size: .8rem; }
.hbar { display: grid; grid-template-columns: 9rem 1fr 7.5rem; gap: .6rem; align-items: center; margin-bottom: .45rem; }
.hbar .track { background: #eef0f2; height: 1rem; }
.hbar .track i { display: block; height: 100%; background: var(--ink); }

.total-row td { font-weight: 700; border-top: 2px solid var(--ink); }
.empty { color: var(--ink-soft); padding: .5rem 0; }