:root {
  --gcl-azul-oscuro:   #211eeb;  
  --gcl-azul-claro:    #2d66eb;  
  --gcl-morado:        #af20f5;  
  --gcl-amarillo:      #fed70d;  
  --gcl-white:         #ffffff;
  --gcl-graph-line:    #5744b0;
  --gcl-radius:        0.8rem;
  --gcl-gap:           1rem;
  --gcl-font:          'Helvetica Neue', Arial, sans-serif;
}

/* ----------------------------
   ESTILOS GLOBALES
   ---------------------------- */

/* Login container z‑index para no solaparse con el popup */
#gcl-login-container {
  position: relative;
  z-index: 1;
}

#gcl-login-container p,
#gcl-register-popup p {
  margin-bottom: 0.75rem;
}

/* Formularios */
#gcl-login-container form,
#gcl-register-popup form {
  display: flex;
  flex-direction: column;
  color: var(--gcl-amarillo);
}

/* Labels en login */
#gcl-login-container label {
  color: var(--gcl-white);
  font-size: 1.25rem;
}

/* Inputs login */
#gcl-login-container input {
  box-sizing: border-box;
  width: 200%;
  padding: 1.5rem 1rem;
  border: 1.5px solid var(--gcl-white);
  border-radius: var(--gcl-radius);
  font-size: 1.25rem;
  background: transparent;
  color: var(--gcl-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.4;
}

/* Placeholder suave */
#gcl-login-container input::placeholder,
#gcl-register-popup input::placeholder {
  color: var(--gcl-amarillo);
}

/* Focus inputs */
#gcl-login-container input:focus,
#gcl-register-popup input:focus {
  outline: none;
  border-color: var(--gcl-azul-oscuro);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.15);
}

/* Botón primario “Entrar” */
#gcl-login-container button[type="submit"],
#gcl-register-popup button[type="submit"] {
  background: transparent;
  color: var(--gcl-white);
  border: 2px solid var(--gcl-white);
  border-radius: var(--gcl-radius);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-right: var(--gcl-gap);
}
#gcl-login-container button[type="submit"]:hover,
#gcl-register-popup button[type="submit"]:hover {
  background: rgba(13, 170, 254, 0.3);
}
#gcl-login-container button[type="submit"]:active,
#gcl-register-popup button[type="submit"]:active {
  transform: scale(0.98);
}


/*------------------------------------------
responsive login
--------------------------------------------*/
@media (max-width: 767px) {
  /* Oculta por completo la columna de imagen */
  .hide-on-mobile {
    display: none !important;
  }

  /* Asegúrate de que la columna del login ocupe todo el ancho */
  .wp-block-column:not(.hide-on-mobile) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Opcional: que el spacer siga visible */
  .wp-block-spacer {
    display: block !important;
  }
}




/* Botón secundario “Registrarse” en login */
.gcl-register-button {
  background: var(--gcl-amarillo);
  color: var(--gcl-morado);
  border: none;
  border-radius: var(--gcl-radius);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.gcl-register-button:hover {
  background: var(--gcl-azul-claro);
  color: #fff;
}

/* Link “Forgot password?” centrado y movido */
#gcl-login-container .gcl-forgot-link {
  display: block;
  text-align: center;
  margin: var(--gcl-gap) auto;
  position: relative;
  left: -80px; /* ajusta según necesites */
  color: var(--gcl-white);
  font-size: 1.25rem;
}

/* Opciones login y register iguales */
#gcl-login-container form p {
  display: flex;
  gap: var(--gcl-gap);
}
#gcl-login-container form p > button {
  flex: 0 0 35.7%;
}


@media (max-width: 767px) {
  /* Contenedor del login: ocupando todo el ancho y centrándolo */
  #gcl-login-container {
    width: 100%;
    padding: 1rem;
  }

  /* Inputs: que no quiebren el layout y usen todo el ancho */
  #gcl-login-container input {
    width: 100% !important;    /* antes tenías 200% en desktop */
    padding: 1rem;
    font-size: 1rem;
  }

  /* Cada párrafo dentro del form pasa a columna */
  #gcl-login-container form p {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  /* Botones: ocupen todo el ancho y separen verticalmente */
  #gcl-login-container form p > button {
    flex: none;
    width: 100%;
    margin: 0.5rem 0 0 0;
  }

  /* Ajusta el link “Forgot” para que no se salga */
  #gcl-login-container .gcl-forgot-link {
    position: static;
    left: auto;
    margin-top: 0.5rem;
  }
}


/* ----------------------------
   POPUP DE REGISTRO
   ---------------------------- */

/* Overlay */
.gcl-modal-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 9999 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.gcl-modal-overlay.visible {
  display: block;
  opacity: 1;
  pointer-events: all;
}

/* Modal */
.gcl-modal {
  display: none;
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.8);
  background: linear-gradient(135deg, var(--gcl-azul-oscuro), var(--gcl-morado));
  padding: 2rem;
  border-radius: var(--gcl-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 10000 !important;
  width: 90%;
  max-width: 400px;
  font-family: var(--gcl-font);
  color: var(--gcl-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.gcl-modal.visible {
  display: block;
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* Botón cerrar */
.gcl-modal-close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--gcl-white);
  cursor: pointer;
}

/* Título del popup */
#gcl-register-popup .register-title {
  font-size: 2.1rem;
  margin-bottom: var(--gcl-gap);
  color: var(--gcl-white);
  text-align: center;
}



.register-header img {
  display: block;
  width: 180px;
  height: auto;
  margin: 0.5rem auto; /* ajusta márgenes arriba/abajo */
}


/* Formulario registro */
#gcl-register-form {
  display: flex;
  flex-direction: column;
}
#gcl-register-form p {
  margin-bottom: var(--gcl-gap);
}
#gcl-register-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--gcl-morado);
  border-radius: var(--gcl-radius);
  background: rgba(255,255,255,0.1);
  color: var(--gcl-white);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
#gcl-register-form input::placeholder {
  color: rgba(255,255,255,0.7);
}
#gcl-register-form input:focus {
  background: rgba(255,255,255,0.2);
  border-color: var(--gcl-amarillo);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

/* Botón Register */
#gcl-register-form button[type="submit"] {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-weight: bold;
  background: var(--gcl-amarillo);
  color: var(--gcl-azul-oscuro);
  border: none;
  border-radius: var(--gcl-radius);
  cursor: pointer;
  transition: background 0.2s;
}
#gcl-register-form button[type="submit"]:hover {
  background: #e6c500;
}

/* Primero anula todas las reglas globales que afectan a los checkbox */
#gcl-register-form input[type="checkbox"] {
  width: auto !important;       /* quítale el 100% */
  height: auto !important;      /* idem */
  padding: 0 !important;        /* quita relleno */
  margin: 0 !important;         /* quita márgenes */
  box-sizing: content-box;      /* que mida solo el cuadro, no padding */
  -webkit-appearance: checkbox;  /* recupera el look del navegador */
  appearance: checkbox;
  flex: none;                   /* no crezcas dentro del inline‑flex */
}

/* Ahora dale el tamaño que quieras */
.gcl-terms-label input[type="checkbox"] {
  width: 2rem;    /* ajusta a tu gusto */
  height: 2rem;   /* igual que ancho */
  
  cursor: pointer;
}
.gcl-terms-label {
  color: var(--gcl-white); /* tu color deseado */
  align-items: center;
}
.gcl-terms-label a {
  color: #acc5ff; /* color de tus links */
}

/* ----------------------------
   POPUP “Forgot Password” ajustes
   ---------------------------- */

/* Títulos en blanco */
#gcl-forgot-popup h4,
#gcl-forgot-popup h5 {
  color: var(--gcl-white);
  margin: 0 0 var(--gcl-gap) 0;
  text-align: center;

}

/* Input de email igual al del login */
#gcl-forgot-popup input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  padding: 1.5rem 1rem;
  border: 1.5px solid var(--gcl-white);
  border-radius: var(--gcl-radius);
  font-size: 1.25rem;
  background: transparent;
  color: var(--gcl-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.4;
}

/* Placeholder en blanco semi‑transparente */
#gcl-forgot-popup input[type="email"]::placeholder {
  color: rgba(255,255,255,0.7);
}

/* Focus en el input */
#gcl-forgot-popup input[type="email"]:focus {
  outline: none;
  border-color: var(--gcl-azul-oscuro);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.15);
}

/* Botón de “Enviar enlace” (opcional: ajuste para que combine) */
#gcl-forgot-popup button[type="submit"] {
  display: block;
  margin: 0 auto;             /* centra el botón */
  background: var(--gcl-amarillo);
  color: var(--gcl-azul-oscuro);
  border: none;
  border-radius: var(--gcl-radius);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

#gcl-forgot-popup button[type="submit"]:hover {
  background: #e6c500;
}



/* ----------------------------
   Dashboard de referidos
   ---------------------------- */

   /* Contenedor de la gráfica */
.gcl-chart-container {
  /*background: #1a0c4b;           fondo oscuro */
  background: rgba(33, 19, 85, 0.75);
  border-radius: var(--gcl-radius);
  padding: 1rem;                /* opcional, para separar canvas de borde */
}


/* Forzar que el canvas ocupe todo el ancho del contenedor */
.gcl-chart-container canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Contenedor principal: apilar cajas con separación */
.gcl-totals-container {
  display: flex;
  flex-direction: column;
  gap: var(--gcl-gap);
  margin: var(--gcl-gap) 0;
}

/* Cada caja */
.gcl-total-box {
  /*background: #1a0c4b;*/
  background: rgba(33, 19, 85, 0.75);
  border-radius: var(--gcl-radius);
  padding: 1.5rem;
  text-align: left;
}

/* Título de lagrafica */
.gcl-chart-title {

  color: var(--gcl-white);

}

/* Título grande y blanco */
.gcl-total-title {
  margin: 0 0 0.5rem;
  font-size: 2rem;       /* ajusta tamaño */
  color: #ffffff;
  font-weight: 600;
}

/* Valor: número grande en amarillo + divisa en blanco */
.gcl-total-value {
  margin: 0;
  font-size: 1.75rem;        /* un poco menor que el título */
  line-height: 1;
}

.gcl-total-value .gcl-amount {
  color: var(--gcl-amarillo);
  font-weight: 700;
}

.gcl-total-value .gcl-currency {
  color: #ffffff;
  font-weight: 400;
  font-size: 1.5rem;          /* opcional, que “CAD” se vea más pequeño */
  vertical-align: super;    /* sube ligeramente el texto */
}



/* Contenedor de la tabla con fondo y bordes redondeados */
.gcl-referrals-table {
  width: 100%;
  border-collapse: collapse;
  /* background: #1a0c4e;          caja de fondo oscuro */
  background: rgba(33, 19, 85, 0.75);
  border-radius: var(--gcl-radius);
  overflow: hidden;             /* para que el border-radius recorte las celdas */
  margin-top: var(--gcl-gap);
}

/* Encabezados en amarillo, grid color púrpura */
.gcl-referrals-table th {
  color: var(--gcl-amarillo);   /* títulos en amarillo */
  background: transparent;      /* quita cualquier fondo */
  padding: 0.75rem 1rem;
  text-align: left;
   border: 1px solid #5744b0 !important; 

}

/* Filas / celdas en blanco, misma línea púrpura */
.gcl-referrals-table td {
  color: #ffffff;               /* texto en blanco */
  padding: 0.75rem 1rem;
  border: 1px solid #5744b0 !important; 

}



/* Quitar línea extra al final */
.gcl-referrals-table tr:last-child td {
  border-bottom: none;
}


.gcl-empty-message {
  color: var(--gcl-white) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}



/* ----------------------------
   tabla del dashboard
   ---------------------------- */


/* por defecto mostramos solo la tabla */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* versiones collapsed */
.gcl-referral-item {
  margin-bottom: var(--gcl-gap);
  background: #1a0c4e;
  border-radius: var(--gcl-radius);
  overflow: hidden;
}
.gcl-referral-item summary {
  padding: 0.75rem 1rem;
  background: var(--gcl-morado);
  color: var(--gcl-white);
  font-weight: 600;
  cursor: pointer;
}
.gcl-referral-details {
  padding: 0.75rem 1rem;
 /* background: #211355;*/
  background: rgba(33, 19, 85, 0.75);
  color: #ffffff;
  font-size: 0.95rem;
}
.gcl-referral-details p {
  margin: 0.25rem 0;
}

/* sólo móviles */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
}





/* ----------------------------
   Settings Popup
   ---------------------------- */


/* Título “Settings” y icono en amarillo */
#gcl-settings-popup h2 {
  color: var(--gcl-amarillo) !important;
}
#gcl-settings-popup h2 .fa-cog {
  color: var(--gcl-amarillo) !important;
}


/* Botón “Update Data” en amarillo con texto morado y borde */
#gcl-settings-popup button#gcl-update-btn {
  background: var(--gcl-amarillo) !important;
  color: var(--gcl-morado) !important;
  border: 2px solid var(--gcl-morado) !important;
  padding: 0.75rem 1.25rem !important;    /* espacio interior */
  font-size: 1.1rem !important;           /* texto más grande */
  font-weight: 600 !important;            /* texto en negrita */
  border-radius: var(--gcl-radius) !important;  /* bordes redondeados */
  transition: background 0.2s, opacity 0.2s;
}

/* Inputs en Settings: borde blanco, fondo transparente, texto blanco */
#gcl-settings-popup input {
  border: 1px solid #ffffff !important;
  border-radius: var(--gcl-radius) !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;       /* ajusta espacio interno */
  font-size: 1rem !important;             /* tamaño legible */
}

#gcl-settings-popup button#gcl-update-btn:hover {
  color: rgba(255,255,255,0.7) !important;
}

/* Overlay por encima de todo */
#gcl-settings-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
}

/* Popup arriba del overlay */
#gcl-settings-popup {
  position: fixed !important;
  z-index: 100000 !important;
}





/*-----------------------------------------------
Responsive
-------------------------------------------------*/

@media (max-width: 767px) {
  /* Oculta todos los bloques de Spacer en pantallas pequeñas */
  .wp-block-spacer {
    display: none !important;
  }
  /* Pero al spacer con clase .reduce-mobile le damos 75px de alto */
  .reduce-mobile {
    display: block !important;   /* lo volvemos visible */
    height: 75px !important;     /* altura móvil deseada */
  }
}