/* =====================================================================
   Control Camiones — Tema corporativo (azul), optimizado para escritorio.
   Se carga después de Bootstrap y sobrescribe lo necesario.
   ===================================================================== */
:root {
  --cc-navy-900: #0e2440;
  --cc-navy-800: #143156;
  --cc-navy-700: #1b3f6e;
  --cc-primary:  #1d5fa8;
  --cc-primary-dark: #17497f;
  --cc-primary-soft: #e8f1fb;
  --cc-bg: #eef1f6;
  --cc-surface: #ffffff;
  --cc-border: #dbe1ea;
  --cc-text: #1f2a37;
  --cc-muted: #667085;
  --cc-radius: .6rem;
  --cc-shadow: 0 1px 2px rgba(16,32,64,.06), 0 2px 8px rgba(16,32,64,.06);
}

body {
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
}

/* ---------- Barra superior ---------- */
.cc-navbar {
  background: linear-gradient(90deg, var(--cc-navy-900), var(--cc-navy-700));
  box-shadow: 0 2px 10px rgba(14,36,64,.18);
  padding-top: .5rem; padding-bottom: .5rem;
}
.cc-navbar .navbar-brand {
  font-weight: 700; letter-spacing: .2px; color: #fff; gap: .6rem;
}
.cc-navbar .navbar-brand img { border-radius: 4px; background:#fff; padding:2px; }
.cc-navbar .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500; padding: .5rem .85rem !important; border-radius: .4rem;
  transition: background .15s, color .15s;
}
.cc-navbar .nav-link:hover { color:#fff !important; background: rgba(255,255,255,.10); }
.cc-navbar .nav-link.active {
  color:#fff !important; background: rgba(255,255,255,.16);
}
.cc-navbar .dropdown-menu { border:none; box-shadow: var(--cc-shadow); border-radius:.5rem; }
.cc-navbar .navbar-text { font-size:.85rem; }
.cc-chip-base {
  background: rgba(255,255,255,.14); color:#fff; border-radius: 2rem;
  padding: .15rem .7rem; font-size:.8rem; font-weight:600;
}

/* ---------- Encabezado de página ---------- */
.cc-page-head { margin: .25rem 0 1.25rem; }
.cc-page-head h1 { font-size: 1.5rem; font-weight: 700; margin:0; color: var(--cc-navy-800); }
.cc-page-head .sub { color: var(--cc-muted); font-size:.9rem; }

/* ---------- Tarjetas ---------- */
.card {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
}
.card-header {
  background: #f7f9fc; border-bottom: 1px solid var(--cc-border);
  font-weight: 600; color: var(--cc-navy-800);
}

/* ---------- Tarjetas de indicadores (dashboard) ---------- */
.stat {
  border-radius: var(--cc-radius); padding: 1.1rem 1.25rem; color:#fff;
  box-shadow: var(--cc-shadow); position: relative; overflow: hidden; height:100%;
}
.stat .stat-label { font-size:.72rem; text-transform: uppercase; letter-spacing:.06em; opacity:.9; }
.stat .stat-value { font-size: 2.4rem; font-weight: 800; line-height:1.1; }
.stat .stat-foot { font-size:.78rem; opacity:.9; }
.stat-primary { background: linear-gradient(135deg, var(--cc-primary), var(--cc-primary-dark)); }
.stat-teal    { background: linear-gradient(135deg, #0f8a7e, #0b6b62); }
.stat-slate   { background: linear-gradient(135deg, #45566e, #313e52); }
.stat-danger  { background: linear-gradient(135deg, #c0392b, #97281c); }
.stat-neutral { background: #fff; color: var(--cc-text); border:1px solid var(--cc-border); }
.stat-neutral .stat-label { color: var(--cc-muted); }

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-bg: var(--cc-primary); --bs-btn-border-color: var(--cc-primary);
  --bs-btn-hover-bg: var(--cc-primary-dark); --bs-btn-hover-border-color: var(--cc-primary-dark);
  --bs-btn-active-bg: var(--cc-primary-dark); --bs-btn-active-border-color: var(--cc-primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--cc-primary); --bs-btn-border-color: var(--cc-primary);
  --bs-btn-hover-bg: var(--cc-primary); --bs-btn-hover-border-color: var(--cc-primary);
}
.text-bg-primary { background-color: var(--cc-primary) !important; }
a { color: var(--cc-primary); }

/* ---------- Tablas ---------- */
.table { --bs-table-hover-bg: var(--cc-primary-soft); }
.table > thead th {
  background: #f0f4f9; color: var(--cc-navy-800);
  text-transform: uppercase; font-size:.72rem; letter-spacing:.04em;
  border-bottom: 2px solid var(--cc-border);
}
.table.table-dark > thead th, thead.table-dark th {
  background: var(--cc-navy-800); color:#fff;
}

/* ---------- Formularios ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 .2rem rgba(29,95,168,.18);
}
.form-label { font-weight: 600; font-size:.85rem; color: var(--cc-navy-800); }

/* ---------- Login ---------- */
.cc-login-wrap { min-height: calc(100vh - 3rem); display:flex; align-items:center; }
.cc-login-card { border:none; box-shadow: 0 10px 40px rgba(14,36,64,.18); overflow:hidden; }
.cc-login-head {
  background: linear-gradient(135deg, var(--cc-navy-900), var(--cc-primary));
  color:#fff; padding: 1.5rem; text-align:center;
}
.cc-login-head .brand { font-size:1.35rem; font-weight:800; letter-spacing:.3px; }
.cc-login-head .brand small { display:block; font-weight:500; opacity:.85; font-size:.8rem; }

/* ---------- Utilidades ---------- */
.badge { font-weight: 600; }
footer.cc-foot { color: var(--cc-muted); font-size:.8rem; padding: 1.5rem 0; text-align:center; }