:root {
  --brand-primary: #0d47a1;
  --brand-secondary: #1565c0;
}

body {
  background-color: #f4f6f9;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.topbar {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}

.login-bg {
  background: linear-gradient(135deg, var(--brand-primary), #0a2f6b);
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
}

.kpi-card {
  border-radius: 14px;
  transition: transform .15s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
}

.kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 18px;
}

.card {
  border-radius: 14px;
}

.table-danger td {
  vertical-align: middle;
}

.badge {
  font-weight: 500;
}

/* Logo de la empresa: navbar y pantallas de login/recuperación */
.navbar-brand img {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.login-logo {
  height: 80px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

/* Contenedor de gráficos: evita que Chart.js los estire a tamaños enormes.
   maintainAspectRatio:false (definido en cada gráfico) + esta altura fija
   es lo que controla el tamaño real, el atributo height del <canvas> no basta. */
.chart-container {
  position: relative;
  width: 100%;
  height: 190px;
}

.chart-container-sm {
  position: relative;
  width: 100%;
  height: 150px;
}

/* Tabla de Control MC: compacta, tipo hoja de cálculo */
.mc-table {
  font-size: 0.82rem;
}
.mc-table th, .mc-table td {
  white-space: nowrap;
  padding: 0.35rem 0.5rem;
}
.print-header {
  text-align: center;
  padding: 10px 0;
}

/* Impresión: solo se ve la tabla, limpia, sin navbar/botones/formularios */
@media print {
  .no-print, .topbar, footer, .card-header .btn, form {
    display: none !important;
  }
  .print-header {
    display: block !important;
  }
  main {
    padding: 0 !important;
  }
  .card {
    border: none !important;
    box-shadow: none !important;
  }
  .table-responsive {
    overflow: visible !important;
    width: 100% !important;
  }
  .mc-table {
    width: 100% !important;
    font-size: 9px;
    table-layout: fixed;
  }
  .mc-table th, .mc-table td {
    border: 1px solid #000 !important;
    padding: 3px 5px;
    white-space: normal !important;
  }
  @page {
    size: landscape;
    margin: 10mm;
  }
}