:root {
  --cicla-bg: #F6F7F5;
  --cicla-surface: #FFFFFF;
  --cicla-ink: #1F2A2E;
  --cicla-muted: #5C6B73;
  --cicla-nav: #223339;
  --cicla-nav-ink: #E7EEEC;
  --cicla-accent: #3F8577;
  --cicla-accent-dark: #2E6459;
  --cicla-border: #E3E7E6;
}

body {
  background-color: var(--cicla-bg);
  color: var(--cicla-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------
   Navbar
--------------------------------------------------------------------- */
.cicla-navbar {
  background-color: var(--cicla-nav);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.cicla-navbar .navbar-brand {
  color: var(--cicla-nav-ink);
  font-weight: 700;
  letter-spacing: .02em;
}
.cicla-user-tag {
  color: var(--cicla-nav-ink);
  opacity: .85;
}
.cicla-badge {
  background-color: var(--cicla-accent);
  color: #fff;
  font-weight: 500;
  font-size: .7rem;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Layout: sidebar + main
--------------------------------------------------------------------- */
.cicla-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 56px);
}

.cicla-sidebar {
  width: 220px;
  flex-shrink: 0;
  background-color: var(--cicla-surface);
  border-right: 1px solid var(--cicla-border);
  min-height: calc(100vh - 56px);
}
.cicla-sidebar-title {
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cicla-muted);
  margin-bottom: .5rem;
}
.cicla-sidebar .nav-link {
  color: var(--cicla-muted);
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .92rem;
}
.cicla-sidebar .nav-link:hover,
.cicla-sidebar .nav-link.active {
  background-color: var(--cicla-bg);
  color: var(--cicla-accent-dark);
}

.cicla-main {
  flex-grow: 1;
  padding: 2rem;
}

@media (max-width: 768px) {
  .cicla-layout { flex-direction: column; }
  .cicla-sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid var(--cicla-border); }
}

/* ---------------------------------------------------------------------
   Cards
--------------------------------------------------------------------- */
.cicla-card {
  border: 1px solid var(--cicla-border);
  border-radius: .5rem;
}
.cicla-card-soon {
  opacity: .72;
}
.cicla-badge-soon {
  background-color: var(--cicla-bg);
  color: var(--cicla-muted);
  border: 1px solid var(--cicla-border);
  font-weight: 500;
  font-size: .68rem;
}
.cicla-badge-ok {
  background-color: #E8F3EF;
  color: var(--cicla-accent-dark);
  font-weight: 500;
  font-size: .72rem;
}
.cicla-badge-off {
  background-color: #F3E9E7;
  color: #9C5A4E;
  font-weight: 500;
  font-size: .72rem;
}

/* ---------------------------------------------------------------------
   Tablas y paginado
--------------------------------------------------------------------- */
.cicla-table thead {
  background-color: var(--cicla-bg);
}
.cicla-table th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cicla-muted);
  font-weight: 600;
  border-bottom-width: 1px;
}
.pagination .page-link {
  color: var(--cicla-accent-dark);
}
.pagination .active .page-link {
  background-color: var(--cicla-accent);
  border-color: var(--cicla-accent);
}

/* ---------------------------------------------------------------------
   Login
--------------------------------------------------------------------- */
.auth-shell {
  background-color: var(--cicla-nav);
}
.auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-card {
  background-color: var(--cicla-surface);
  padding: 2.5rem;
  border-radius: .75rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.auth-mark {
  width: 40px;
  height: 40px;
  border-radius: .5rem;
  background-color: var(--cicla-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  margin-bottom: 1rem;
}
.auth-title {
  color: var(--cicla-ink);
  font-weight: 700;
  margin-bottom: .1rem;
}
.auth-subtitle {
  color: var(--cicla-muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.auth-soporte {
  color: var(--cicla-muted);
}
.auth-soporte a {
  color: var(--cicla-accent-dark);
}

/* ---------------------------------------------------------------------
   Controles (reemplaza el azul default de Bootstrap por el acento propio)
--------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--cicla-accent);
  border-color: var(--cicla-accent);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cicla-accent-dark);
  border-color: var(--cicla-accent-dark);
}
.form-control:focus {
  border-color: var(--cicla-accent);
  box-shadow: 0 0 0 .2rem rgba(63, 133, 119, .15);
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.cicla-footer {
  color: var(--cicla-muted);
  border-top: 1px solid var(--cicla-border);
  background-color: var(--cicla-surface);
}