body {
      background-color: #f5f7fa;
    }
    header, footer {
      background: linear-gradient(90deg, #43A047, #00ACC1);
      color: white;
    }
    .wrapper {
      min-height: 100%;          /* ocupa toda la altura de la pantalla */
      display: flex;
      flex-direction: column;    /* organiza header, main y footer verticalmente */
      }
    header {
      
      height: 55px;           /* 👈 altura fija baja */
      padding: 0 12px;        /* 👈 casi sin padding */
    }
    footer {
      padding: 15px;
      text-align: center;
    }
    .logo {
      width: 140px; /* 👈 más pequeño */
      height: auto;
    }
    .btn-menu {
      padding: 4px 8px; /* 👈 botón más compacto */
      font-size: 1.2rem;
    }

footer.footer {
  margin-top: auto;    /* empuja el footer hacia abajo */
}


/* 🎨 Paleta de Colores */
:root {
  --color-rojo: #E53935;        /* Rojo */
  --color-amarillo: #FBC02D;    /* Amarillo */
  --color-verde-oscuro: #43A047  ; /* Verde oscuro #388E3C */
  --color-verde: #4CAF50;       /* Verde #43A047    #4CAF50 (hoja) */
  --color-calipso: #00ACC1;     /* Calipso / Azul verdoso */

  --color-rojo-rgb: 229, 57, 53;
  --color-amarillo-rgb: 251, 192, 45;
  --color-verde-rgb: 67, 160, 71;
  --color-calipso-rgb: 0, 172, 193;
}

/* 🔹 Helpers */
.bg-rojo { background-color: var(--color-rojo); }
.bg-amarillo { background-color: var(--color-amarillo); }
.bg-verde { background-color: var(--color-verde); }
.bg-verde-oscuro { background-color: var(--color-verde-oscuro); }
.bg-calipso { background-color: var(--color-calipso); }

.text-rojo { color: var(--color-rojo); }
.text-amarillo { color: var(--color-amarillo); }
.text-verde { color: var(--color-verde); }
.text-verde-oscuro { color: var(--color-verde-oscuro); }
.text-calipso { color: var(--color-calipso); }

.card-custom {
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #fff;
  transition: transform 0.2s ease-in-out;
}
.card-custom:hover {
  transform: translateY(-5px);
}


  /* Fondo degradado personalizado */
  .login-offcanvas {
    background: linear-gradient(180deg, var(--color-calipso), var(--color-verde-oscuro));
  }
  
  /* Inputs más modernos */
  .login-offcanvas .form-control {
    border: none;
  }
  .login-offcanvas .form-control:focus {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  }

  /* Efecto hover */
  .menu-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
    transition: all 0.2s ease-in-out;
  }


  /* Mensajes con auto-desaparición */
.auto-dismiss {
  animation: fadeOut 1s ease forwards;
  animation-delay: 4s; /* visible 4s antes de desaparecer */
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
  }
}



  .pagination .page-item.active .page-link {
    background-color:#4CAF50 !important; /* Verde */
    border-color: #4CAF50 !important;
    color: white !important;
  }

  .pagination .page-link {
    color: #4CAF50 !important;      /* Texto verde en botones normales */
    border-color: #28a74540;
  }

  .pagination .page-link:hover {
    background-color: #4CAF50 !important;
    color: white !important;
    border-color: #28a745 !important;
  }

.msg-popup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 🔹Exacto al centro */
  z-index: 99999;
  width: 90%;
  max-width: 400px;
  text-align: center;
  animation: fadeIn 0.7s ease-out;
}

/* Estilo calipso */
.msg-box{
  background-color: #E53935;       
  color: white;
  padding: 18px;
  border-radius: 10px;
  font-size: 1.1rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  position: relative;
}

/* Suave animación entrada */
@keyframes fadeIn{
  from{ opacity:0; transform: translate(-50%, -60%) scale(.9); }
  to{ opacity:1; transform: translate(-50%, -50%) scale(1); }
}