:root {
  --theme-success: #176D4A;   /* Verde botella */
  --theme-info:    #B6425F;   /* Rojo frambuesa */
  --theme-danger:  #4D0F24;   /* Ciruela oscuro */
  --theme-warning: #6D4B17;   /* Mostaza quemado */
  --theme-primary: #691932;
  --theme-gray:    #adb5bd;   /* Rojo vino (tu color principal) */
}


/*Estilo para botones */


.btn-theme-success {
  background-color: var(--theme-success);
  border-color: var(--theme-success);
  color: #fff;
}
.btn-theme-success:hover {
  background-color: rgba(23, 109, 74, 0.75);
}

.btn-theme-info {
  background-color: var(--theme-info);
  border-color: var(--theme-info);
  color: #fff;
}
.btn-theme-info:hover {
  background-color: rgba(182, 66, 95, 0.75);
}

.btn-theme-danger {
  background-color: var(--theme-danger);
  border-color: var(--theme-danger);
  color: #fff;
}
.btn-theme-danger:hover {
  background-color: rgba(77, 15, 36, 0.75);
}

.btn-theme-warning {
  background-color: var(--theme-warning);
  border-color: var(--theme-warning);
  color: #fff;
}
.btn-theme-warning:hover {
  background-color: rgba(109, 75, 23, 0.75);
}

.btn-theme-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
}
.btn-theme-primary:hover {
  background-color: rgba(109, 23, 50, 0.75);
}


/* Botones con solo el borde (outline buttons) */
.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: #adb5bd;
}

.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; }







 .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); /* Color que coincide con tu esquema */
}

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

.nav-icon {
  
    color: var(--theme-primary); /* Color que coincide con tu esquema */
}

.title-icon {

    font-size: 1.5rem;
    color: var(--theme-primary); /* Color que coincide con tu esquema */
}
.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);
}