/*
 * compact.css — Optimización para 1366×768
 * Reduce fuentes 2pt, aprieta márgenes, unifica inputs/selects.
 * Cargado DESPUÉS de todos los demás CSS para que tenga precedencia.
 */

/* ── Variables de layout ───────────────────────────────────────────────────── */
:root {
  --topbar-h:  50px;
  --sidebar-w: 220px;
  --radius:    8px;
}

/* ── Base tipográfica ──────────────────────────────────────────────────────── */
html {
  font-size: 14px;
}

body {
  font-size: 13px;
  line-height: 1.4;
}

/* ── Inputs, selects y textareas — fuente unificada ───────────────────────── */
input,
select,
textarea,
.field > input,
.field > select,
.topbar select,
.topbar .field select,
.filter-bar input,
.filter-bar select,
.hh-table input,
.table-asistencia td input,
.table-compact input {
  font-family: var(--font) !important;
  font-size:   12px !important;
  padding:     3px 7px !important;
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
.topbar {
  min-height: var(--topbar-h);
}

.topbar-content {
  gap: 8px;
}

.logo,
.sidebar-brand .logo {
  width:  32px;
  height: 32px;
  font-size: 14px;
}

.title,
.sidebar-brand .title {
  font-size: 13px;
}

.subtitle,
.sidebar-brand .subtitle {
  font-size: 9px;
}

.topbar-title {
  font-size: 13px;
}

.topbar select {
  max-width: 160px;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar-header {
  padding: 10px 14px;
}

.nav-item {
  padding:   8px 14px;
  font-size: 12px;
}

.nav-item .nav-icon {
  font-size: 14px;
  width: 24px;
}

/* ── Botones ───────────────────────────────────────────────────────────────── */
.btn {
  padding:   6px 14px !important;
  font-size: 11px !important;
  gap:       5px;
}

.btn-sm {
  padding:   4px 10px !important;
  font-size: 10px !important;
}

.btn-link {
  font-size: 11px;
}

.btn-icon-profile {
  width:  28px;
  height: 28px;
  font-size: 13px;
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs {
  gap: 4px;
}

.tab-btn,
.tab {
  padding:   5px 12px;
  font-size: 11px;
}

/* ── Paneles y cards ───────────────────────────────────────────────────────── */
.inner,
.inner-panel,
.panel-inner {
  padding: 12px;
}

.panel-head h2 {
  font-size: 14px;
}

.inner-head h3 {
  font-size: 12px;
}

.hint {
  font-size: 10px;
}

/* ── KPI cards ─────────────────────────────────────────────────────────────── */
.kpi-grid {
  gap: 8px;
  margin-top: 8px;
}

.kpi-card {
  padding:       12px;
  border-radius: 10px;
}

.kpi-big-card {
  padding: 14px;
}

.kpi-label {
  font-size: 9px;
}

.kpi-value {
  font-size: clamp(20px, 2.5vw, 26px);
  margin:    5px 0;
}

.kpi-val-sm {
  font-size: clamp(15px, 2vw, 20px);
}

.kpi-lbl-sm {
  font-size: 9px;
}

.kpi-foot {
  font-size: 10px;
}

.kpi-split {
  margin-top: 6px;
  gap:        8px;
}

/* ── Tablas ────────────────────────────────────────────────────────────────── */
.table {
  font-size: 11px;
}

.table th {
  padding:   7px 8px;
  font-size: 10px;
}

.table td {
  padding: 7px 8px;
}

.table .btn-link {
  padding: 3px 6px;
}

.tbl-occ-kpi {
  font-size: 11px;
}

.tbl-occ-kpi th {
  padding:   6px 8px;
  font-size: 10px;
}

.tbl-occ-kpi td {
  padding:   5px 8px;
  font-size: 11px;
}

.tbl-occ-kpi tfoot tr td {
  padding: 6px 8px;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  font-size: 10px;
  padding:   2px 6px;
  gap:       4px;
}

/* ── Filtros y formularios ─────────────────────────────────────────────────── */
.filter-bar {
  gap: 8px;
}

.filters {
  gap: 6px;
}

.filters-group {
  gap: 6px;
}

.field {
  font-size: 9px;
  gap:       1px;
}

.form-grid {
  gap: 8px;
}

/* ── Modales ───────────────────────────────────────────────────────────────── */
.modal-head {
  padding:    10px 18px;
  min-height: 44px;
  gap:        8px;
}

.modal-title {
  font-size: clamp(13px, 2vw, 16px);
}

.modal-sub,
.modal-subtitle {
  font-size: 11px;
}

.modal-body {
  padding: 16px;
}

.modal-foot {
  padding: 10px 18px;
  gap:     8px;
}

/* ── Accordion ─────────────────────────────────────────────────────────────── */
.acc-item {
  padding:       8px 14px;
  border-radius: 10px;
}

.acc-title {
  font-size: 12px;
}

.acc-meta {
  font-size: 10px;
}

.acc-panel {
  padding: 14px;
}

/* ── Secciones de contenido (main area) ────────────────────────────────────── */
.section,
.content-section {
  padding: 10px 14px;
}

/* ── Gráficos: altura ajustada ─────────────────────────────────────────────── */
.chart-container {
  height: 190px;
}

/* ── P6 / Gantt ────────────────────────────────────────────────────────────── */
:root {
  --p6-row-h: 24px;
}

.p6-container {
  height: calc(100vh - 58px);
}

.p6-mode-btn {
  width:     32px;
  height:    32px;
  font-size: 14px;
}

.p6-tab {
  font-size: 11px;
  padding:   3px 8px;
}

.p6-input {
  font-size:   12px !important;
  font-family: var(--font) !important;
  padding:     3px 7px !important;
}

/* ── Tabla de asistencia — columna Total ──────────────────────────────────── */
.table-asistencia td[data-day],
.table-asistencia td[data-row-total],
.table-asistencia td[data-col-total] {
  text-align: center;
}

.table-asistencia td.asis-row-total,
.table-asistencia td.asis-col-total {
  border-left: 2px solid var(--border);
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
  background: rgba(247, 148, 113, 0.06);
}

.table-asistencia .row-available td.asis-col-total {
  color: var(--accent);
}

/* ── KPI histórico — scroll charts ─────────────────────────────────────────── */
#backlogHHHistScroll,
#backlogCumplPlanHistScroll,
#backlogCumplPlanNumHistScroll,
#programacionHHHistScroll,
#cumplHistScroll,
#cumplHistNumScroll {
  height: 210px;
}

#backlogHHHistInner,
#backlogCumplPlanHistInner,
#backlogCumplPlanNumHistInner,
#programacionHHHistInner,
#cumplHistInner,
#cumplHistNumInner {
  height: 192px;
}