/* =========================================================================== */
/* CALENDARIO */
/* =========================================================================== */

/* Fondo oscuro del modal */
.modal {
  display: none;               /* oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center; 
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease; /* fade */
}

/* Caja blanca centrada */
.modal-content {
  background: rgb(63, 1, 1); /* #fff;*/
  padding: 1rem;
  border-radius: 8px;
  min-width: 300px;
  max-width: 90%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Animaciones */
.modal.mostrar {
  display: flex;
  opacity: 1;
}
.modal.ocultar {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 10px;
  text-align: center;
  background-color: #070807;
  color: white;
  font-size: 1.2rem;         /* más grande */
  padding: 15px;  
}

.calendario div {
  padding: 12px;             /* más grande cada celda */
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.calendario .hoy {
  background: #ff5733;   /* un naranja intenso */
  color: #fff;
  font-weight: bold;
}

.calendario div:hover {
    background: #444;          /* gris oscuro */
    color: #ffcc00;            /* amarillo en hover */
}

.calendario .header {
  font-weight: bold;
  background: #222;          /* banner más oscura */
  color: #00ffcc;            /* cian */
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cal-header button {
  background: #333;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.cal-header button:hover {
  background: #555;
}

#modal-botones {
  text-align: center; /* centra elementos inline o inline-block */
  margin-top: 15px;   /* opcional, solo para separación */
}

#modal-botones button {
  display: inline-block; /* por si acaso */
}

.modal-footer {
  text-align: center;
  margin-top: 15px;
}

.modal-footer button {
  background: #0077cc;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s, transform 0.1s;
}

.modal-footer button:hover {
  background: #005fa3;
}

.modal-footer button:active {
  transform: scale(0.97);
}

/* Texto descriptivo */
.login-text {
  font-size: 1rem;
  margin-bottom: 15px;
  color: white;
  text-align: center;
}

/* ========================= Errores =====================*/

#codErr {
  width: 90%;
  padding: 10px;
  margin: 8px auto;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border 0.2s, box-shadow 0.2s;
}

#codErr:focus {
  border-color: #0077cc;
  box-shadow: 0 0 5px rgba(0,119,204,0.4);
  outline: none;
}

/* Texto descriptivo */
#error-text {
  font-size: 1rem;
  margin-bottom: 15px;
  color: white;
  text-align: center;
}

#btnErrEnviar {
  background: #0077cc;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 12px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#btnErrEnviar:hover {
  background: #005fa3;
}

#btnErrEnviar:active {
  transform: scale(0.97);
}


/* ============== Inputs =========================*/

#usuario, #clave {
  width: 90%;
  padding: 10px;
  margin: 8px auto;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border 0.2s, box-shadow 0.2s;
}

#usuario:focus, #clave:focus {
  border-color: #0077cc;
  box-shadow: 0 0 5px rgba(0,119,204,0.4);
  outline: none;
}

/* Botón Login */
#btnLoginEnviar {
  background: #0077cc;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 12px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#btnLoginEnviar:hover {
  background: #005fa3;
}

#btnLoginEnviar:active {
  transform: scale(0.97);
}

#btnCerrarModal {
  background: #333;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

#btnCerrarModal:hover {
  background: #555;
}




/* =========================================================================== */
/* LOGIN */
/* =========================================================================== */