:root{
  --orange:#ea6a2a;
  --orange2:#f07a41;
  --orangeDark:#d85b21;
}

/* Topbar naranja */
.topbar{
  background: linear-gradient(90deg, var(--orange), var(--orange2));
  color:#fff;
}

.fw-black{ font-weight: 900; }

/* Botones naranjas: visibles en hosting compartido (forzamos !important) */
.btn-orange,
.btn-kpi-orange{
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}
.btn-orange:hover,
.btn-kpi-orange:hover{
  background-color: var(--orangeDark) !important;
  border-color: var(--orangeDark) !important;
  color:#fff !important;
}
.btn-orange:focus,
.btn-kpi-orange:focus{
  box-shadow: 0 0 0 .25rem rgba(234, 106, 42, .35) !important;
}

.btn-kpi-orange-outline{
  background-color: transparent !important;
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}
.btn-kpi-orange-outline:hover{
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

/* Sidebar de días */
.day-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.day-grid button{
  border:1px solid #d7dbe2;
  border-radius:10px;
  height:36px;
  font-weight:900;
  background:#f8f9fa;
  cursor:pointer;
}
.day-grid button:hover{
  background:#fff;
}
.day-grid button.is-active{
  background:#ffe0cf;
  border-color: var(--orange);
}

/* Charts */
.chart-wrap{ height:320px; }
.chart-wrap canvas{ width:100% !important; height:100% !important; }

/* Compatibilidad con formularios legacy */
.input{
  width:100%;
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  background:#fff;
}

.notice{
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-weight: 700;
}
.notice.error{
  border-color: #f5c2c7;
  background: #f8d7da;
}

/* Login layout helper */
.login-wrap{
  min-height: calc(100vh - 90px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}


/* ===== Topbar buttons (gris / negro) ===== */
.btn-topbar{
  background:#6b7280 !important; /* gris */
  border-color:#6b7280 !important;
  color:#fff !important;
  font-weight:900 !important;
}
.btn-topbar:hover{
  background:#4b5563 !important;
  border-color:#4b5563 !important;
  color:#fff !important;
}
.btn-topbar.btn-topbar-active,
.btn-topbar.active{
  background:#111827 !important; /* negro */
  border-color:#111827 !important;
  color:#fff !important;
}

.app-footer{
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

/* ===== Tarjetas mini KPI por servicio ===== */
.kpi-mini-title{
  font-weight: 900;
  color: #4b5563;
  font-size: 12px;
  letter-spacing: .2px;
}
.kpi-mini-value{
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  margin-top: 6px;
}
.kpi-mini-sub{
  margin-top: 6px;
  font-size: 13px;
  color: #111827;
}
.kpi-mini-sub b{ font-weight: 900; }

/* Encabezados de secciones */
.report-head__title{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.2px;
  margin:0;
}
.report-head__sub{
  margin-top:2px;
}

/* Filtros alineados + botón pequeño */
.filter-row .form-label{ margin-bottom: .25rem; }
.filter-row .form-control{ height: 36px; }              /* mismo alto en month/date */
.filter-row .form-control-sm{ padding-top:.35rem; padding-bottom:.35rem; }

.filter-btn{
  height: 36px;
  padding: .35rem .9rem;                                 /* más compacto */
  min-width: 110px;                                      /* tamaño consistente */
  width: auto !important;                                /* evita w-100 */
}


/* Tarjeta grande contenedora */
.section-card{
  border: 1px solid rgba(0,0,0,.06);
}

/* Opcional: separa visualmente del fondo */
.section-card .card-body{
  padding: 1.1rem;
}