:root {
  /* ============================================
     PALETA: OCEAN SUNSET
     ============================================ */
  --theme-success: #0F9B8E;   /* Verde menta / turquesa */
  --theme-info:    #2E86AB;   /* Azul océano */
  --theme-danger:  #E4572E;   /* Naranja coral intenso */
  --theme-warning: #F4A259;   /* Naranja melocotón */
  --theme-primary: #1B4965;   /* Azul marino profundo */
  --theme-gray:    #9CAEA9;   /* Gris verdoso suave */
}


/* ============================================
   ESTILO PARA BOTONES
   ============================================ */

.btn-theme-success {
  background-color: var(--theme-success);
  border-color: var(--theme-success);
  color: #fff;
}
.btn-theme-success:hover {
  background-color: color-mix(in srgb, var(--theme-success) 75%, transparent);
}

.btn-theme-info {
  background-color: var(--theme-info);
  border-color: var(--theme-info);
  color: #fff;
}
.btn-theme-info:hover {
  background-color: color-mix(in srgb, var(--theme-info) 75%, transparent);
}

.btn-theme-danger {
  background-color: var(--theme-danger);
  border-color: var(--theme-danger);
  color: #fff;
}
.btn-theme-danger:hover {
  background-color: color-mix(in srgb, var(--theme-danger) 75%, transparent);
}

.btn-theme-warning {
  background-color: var(--theme-warning);
  border-color: var(--theme-warning);
  color: #fff;
}
.btn-theme-warning:hover {
  background-color: color-mix(in srgb, var(--theme-warning) 75%, transparent);
}

.btn-theme-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
}
.btn-theme-primary:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 75%, transparent);
}


/* ============================================
   BOTONES OUTLINE (solo borde)
   ============================================ */

.btn-outline-theme-gray {
  background-color: transparent;
  border: 1px solid var(--theme-gray);
  color: #6c757d;
}

.btn-outline-theme-gray:hover {
  background-color: #e2e6ea;
  color: #495057;
  border-color: var(--theme-gray);
}

.btn-outline-theme-success {
  background-color: transparent;
  border: 2px solid var(--theme-success);
  color: var(--theme-success);
}
.btn-outline-theme-success:hover {
  background-color: var(--theme-success);
  color: #fff;
}

.btn-outline-theme-info {
  background-color: transparent;
  border: 2px solid var(--theme-info);
  color: var(--theme-info);
}
.btn-outline-theme-info:hover {
  background-color: var(--theme-info);
  color: #fff;
}

.btn-outline-theme-danger {
  background-color: transparent;
  border: 2px solid var(--theme-danger);
  color: var(--theme-danger);
}
.btn-outline-theme-danger:hover {
  background-color: var(--theme-danger);
  color: #fff;
}

.btn-outline-theme-warning {
  background-color: transparent;
  border: 2px solid var(--theme-warning);
  color: var(--theme-warning);
}
.btn-outline-theme-warning:hover {
  background-color: var(--theme-warning);
  color: #fff;
}

.btn-outline-theme-primary {
  background-color: transparent;
  border: 2px solid var(--theme-primary);
  color: var(--theme-primary);
}
.btn-outline-theme-primary:hover {
  background-color: var(--theme-primary);
  color: #fff;
}


/* ============================================
   FONDOS
   ============================================ */
.bg-theme-success  { background-color: var(--theme-success); color: #fff; }
.bg-theme-info     { background-color: var(--theme-info); color: #fff; }
.bg-theme-danger   { background-color: var(--theme-danger); color: #fff; }
.bg-theme-warning  { background-color: var(--theme-warning); color: #fff; }
.bg-theme-primary  { background-color: var(--theme-primary); color: #fff; }

/* ============================================
   BORDES
   ============================================ */
.border-theme-success  { border: 2px solid var(--theme-success); }
.border-theme-info     { border: 2px solid var(--theme-info); }
.border-theme-danger   { border: 2px solid var(--theme-danger); }
.border-theme-warning  { border: 2px solid var(--theme-warning); }
.border-theme-primary  { border: 2px solid var(--theme-primary); }

/* ============================================
   TEXTO / ÍCONOS
   ============================================ */
.text-theme-success  { color: var(--theme-success) !important; }
.text-theme-info     { color: var(--theme-info) !important; }
.text-theme-danger   { color: var(--theme-danger) !important; }
.text-theme-warning  { color: var(--theme-warning) !important; }
.text-theme-primary  { color: var(--theme-primary) !important; }


/* ============================================
   TARJETAS DE CARACTERÍSTICAS
   ============================================ */
.feature-card {
  padding: 20px;
  margin: 50px 0;
  text-align: center;
  transition: transform 0.3s;
}
.feature-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  color: var(--theme-primary);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}

.nav-icon {
  color: var(--theme-primary);
}

.title-icon {
  font-size: 1.5rem;
  color: var(--theme-primary);
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.pagination .page-link {
  border-radius: 0.375rem;
  margin-left: 4px;
  margin-right: 4px;
  color: var(--theme-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* ============================================
   LAYOUT GLOBAL — Navbar fijo + Sidebar fijo
   ============================================ */
.content-wrapper {
    padding-top: 60px;
}

#sidebar {
    top: 60px !important;
}

@media (max-width: 768px) {
    .content-wrapper {
        padding-top: 60px !important;
    }
}