/*
 Theme Name:     Hello Elementor Child
 Theme URI:      https://tu-sitio.com
 Description:    Tema hijo de Hello Elementor
 Author:         Tu nombre
 Author URI:     https://tu-sitio.com
 Template:       hello-elementor
 Version:        1.0.0
 Text Domain:    hello-elementor-child
*/

/* Aquí puedes agregar CSS personalizado */

/* Estilos para la paginación de libros */
.wp-books-pagination {
    text-align: center;
    margin: 30px 0;
}

.wp-books-pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

.wp-books-pagination li {
    display: inline-block;
}

.wp-books-pagination a,
.wp-books-pagination span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid  #0073aa;
    border-radius: 4px;
    color:  #0073aa;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

.wp-books-pagination a:hover {
    background-color: #FFFFFF;
    color: #0073aa;
}

.wp-books-pagination .current {
    background-color: #FFFFFF;
    color: #0073aa;
    font-weight: bold;
    border-color: #0073aa;
}


body .wbg-parent-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/*CSS Rango biblioteca------*/

.rango-biblioteca-completo {
  max-width: 420px;
  font-family: 'Poppins', sans-serif;
  margin: 10px 0;
}

.rango-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #e9f4ff;
  border: 1px solid #c9e2f2;
  border-radius: 25px;
  padding: 12px 16px;
  box-shadow: 0 4px 10px rgba(29, 111, 165, 0.1);
}

.rango-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 50%;
}

.rango-info {
  display: flex;
  flex-direction: column;
}

.rango-nombre {
  font-size: 16px;
  font-weight: 600;
  color: #1d6fa5;
  text-transform: capitalize;
}

.rango-mensaje {
  font-size: 13px;
  color: #0d4a72;
  margin-top: 2px;
}

/* ===== BARRA ULTRA PRO ===== */
.barra-fondo {
  width: 100%;
  height: 28px;
  background: #d9edf7;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
}

.barra-progreso {
  height: 100%;
  width: 0; /* Se ajusta dinámicamente con PHP */
  border-radius: 14px 0 0 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: barra-llenado 1.5s ease-out forwards;
  background: linear-gradient(270deg, #ff4d4d, #ffcc00, #4da6ff);
  background-size: 600% 100%;
}

/* Gradiente en movimiento */
.barra-progreso {
  animation: barra-llenado 1.5s ease-out forwards, barra-gradiente 3s linear infinite;
}

.barra-texto {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
}

/* Animaciones */
@keyframes barra-gradiente {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

@keyframes barra-llenado {
  from { width: 0; }
  to { width: var(--progreso); }
}

/*--------*/

/* CSS Iniciar sesión */

.um.um-login {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Etiquetas de los campos */
.um-field-label {
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
}

/* Campos de entrada */
.um-field-area input[type="text"],
.um-field-area input[type="password"],
.um-field-area input[type="email"] {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.um-field-area input:focus {
  border-color: #0073aa;
  box-shadow: 0 0 6px rgba(0, 115, 170, 0.5);
  background: #fff;
}

/* Botones de acción */
.um-login .um-button {
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.um-login .um-button.um-button-primary {
  background: linear-gradient(135deg, #0073aa, #0098d1);
  border: none;
  color: #fff;
}

.um-login .um-button.um-button-primary:hover {
  background: linear-gradient(135deg, #0098d1, #0073aa);
  transform: scale(1.03);
}

/* Botón secundario (Registro) */
.um-login .um-button.um-alt {
  background: rgba(255, 255, 255, 0.9);
  color: #0073aa;
  border: 1px solid #0073aa;
}

.um-login .um-button.um-alt:hover {
  background: #0073aa;
  color: #fff;
}

/* Checkbox */
.um-login .um-field-checkbox,
.um-login .um-field-checkbox label,
.um-login .um-field-checkbox span {
  color: #fff !important;
  font-size: 14px;
}

/* Enlace "¿Has olvidado tu contraseña?" */
.um-login a.um-link,
.um-login .um-link {
  color: #fff !important;
  font-size: 14px;
  transition: color 0.3s ease;
  text-decoration: none !important;
}

.um-login a.um-link:hover,
.um-login .um-link:hover {
  color: #00bfff !important;
  text-decoration: underline !important;
}

/* Icono del ojo - negro permanente */
.um-field-area .um-toggle-password,
.um-field-area .um-toggle-password i {
  color: #111 !important; /* negro */
  opacity: 0.9 !important;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.um-field-area .um-toggle-password:hover,
.um-field-area .um-toggle-password i:hover {
  opacity: 1 !important; /* un poco más visible al pasar el mouse */
}


/*CSS registro */

/* CSS Registro de usuario - coherente con el login */

/* Contenedor general */
.um.um-register {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 40px 30px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Etiquetas */
.um-register .um-field-label {
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
}

/* Campos de entrada */
.um-register .um-field-area input[type="text"],
.um-register .um-field-area input[type="password"],
.um-register .um-field-area input[type="email"],
.um-register .um-field-area input[type="tel"] {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.um-register .um-field-area input:focus {
  border-color: #0073aa;
  box-shadow: 0 0 6px rgba(0, 115, 170, 0.5);
  background: #fff;
}

/* Botón principal */
.um-register .um-button.um-button-primary {
  background: linear-gradient(135deg, #0073aa, #0098d1);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  transition: all 0.3s ease;
  text-transform: none;
}

.um-register .um-button.um-button-primary:hover {
  background: linear-gradient(135deg, #0098d1, #0073aa);
  transform: scale(1.03);
}

/* Botón alternativo (por si aparece "Iniciar sesión") */
.um-register .um-button.um-alt {
  background: rgba(255, 255, 255, 0.9);
  color: #0073aa;
  border: 1px solid #0073aa;
  border-radius: 8px;
  font-weight: 600;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.um-register .um-button.um-alt:hover {
  background: #0073aa;
  color: #fff;
}

/* Checkbox, términos, y enlaces */
.um-register .um-field-checkbox,
.um-register .um-field-checkbox label,
.um-register .um-field-checkbox span {
  color: #fff !important;
  font-size: 14px;
}

.um-register .um-field-checkbox a,
.um-register a.um-link {
  color: #00bfff !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.um-register .um-field-checkbox a:hover,
.um-register a.um-link:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Icono*