/*
 * /login (lib/login.php, page-login.php): el formulario es un pop-up del panel
 * (.gm-modal) solo sobre el fondo del panel, con el logo encima, como Loyalty
 * Scan. La piel (campos, botón, distintivo ámbar de los avisos) la da
 * gm-dashboard.css porque el <body> lleva page-template-dashboard. Aquí va
 * sólo lo propio de la página: fondo, sin cabecera ni pie, el centrado y el
 * logo.
 */

body.gm-login-body { background-color: var(--gm-bg, #0a0a0a); }
body.gm-login-body header,
body.gm-login-body #masthead,
body.gm-login-body .elementor-location-header,
body.gm-login-body .elementor-location-footer,
body.gm-login-body footer { display: none !important; }

/* la caja, centrada y un poco por encima del centro (como el escáner) */
body.page-template-dashboard #primary.gm-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px calc(24px + 9vh);
}

/* la caja mide 400 (los pop-ups chicos, 460) */
body.page-template-dashboard .gm-login-page .gm-login {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
/* el logo va dentro de la caja, en una banda centrada con 32 px de aire
   arriba y abajo y una raya a todo el ancho; debajo sigue la cabecera de
   siempre («Iniciar sesión») */
body.page-template-dashboard .gm-login-page .gm-login__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gm-modal-line, #2e2e2e);
}
/* el aire va como margen del logo: el panel deja a cero el padding de todo
   hijo directo de un .gm-modal (gm-dashboard.css) */
body.page-template-dashboard .gm-login-page .gm-login__logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 32px auto;
}

/* el pop-up vive suelto: no lo abre ningún plugin */
body.page-template-dashboard .gm-login-page .gm-login__box {
  --gm-modal-w: 400px;
  display: block !important;
  position: relative;
  width: 100% !important;
  margin: 0;
}

/* Usuario y contraseña, de 44 (los campos de los pop-ups miden 38): la
   página no tiene otra cosa que hacer y se escriben más cómodos. Con el id
   de la página, para ganarle a la regla general de los campos de .gm-modal. */
body.page-template-dashboard #primary.gm-login-page input.gm-login__input { height: 44px; }

/* los enlaces del pie (sesión ya iniciada) son botones */
body.page-template-dashboard .gm-login-page .gm-btn { text-decoration: none; }

/* el autocompletado del navegador no pinta el campo de blanco */
body.page-template-dashboard .gm-login-page input:-webkit-autofill,
body.page-template-dashboard .gm-login-page input:-webkit-autofill:hover,
body.page-template-dashboard .gm-login-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--gm-modal-field, #1b1b1b) inset !important;
  box-shadow: 0 0 0 1000px var(--gm-modal-field, #1b1b1b) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

/* en el móvil la caja, con el logo dentro, va centrada en la pantalla */
@media (max-width: 767px) {
  body.page-template-dashboard #primary.gm-login-page { padding: 24px 12px; }
  /* el panel fija los pop-ups al viewport en el móvil (12 px por lado): aquí
     la caja vuelve al flujo */
  body.page-template-dashboard .gm-login-page .gm-login__box {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 18px;
  }
  body.page-template-dashboard .gm-login-page .gm-login__box .gm-modal__body,
  body.page-template-dashboard .gm-login-page .gm-login__box .gm-modal__main { min-height: 0; height: auto; }
  body.page-template-dashboard .gm-login-page .gm-login__box .gm-modal__body { height: auto; max-height: none; }
  body.page-template-dashboard .gm-login-page .gm-login__box .gm-modal__scroll { overflow: visible; }
}

/* /oauth/authorize (lib/oauth.php): el consentimiento para conectar un
   asistente usa la misma caja que el login; esto es lo propio del texto */
body.page-template-dashboard .gm-login-page .gm-oauth__texto,
body.page-template-dashboard .gm-login-page .gm-oauth__meta { margin: 0; color: var(--gm-modal-text, #afafaf); line-height: 1.5; }
body.page-template-dashboard .gm-login-page .gm-oauth__texto strong,
body.page-template-dashboard .gm-login-page .gm-oauth__meta strong { color: var(--gm-modal-title, #fff); font-weight: 500; }
body.page-template-dashboard .gm-login-page .gm-oauth__meta { font-size: 13px; }
body.page-template-dashboard .gm-login-page .gm-oauth__meta a { color: var(--gm-modal-title, #fff); text-decoration: underline; }
body.page-template-dashboard .gm-login-page .gm-oauth__permisos { margin: 0; padding-left: 18px; color: var(--gm-modal-title, #fff); line-height: 1.5; }
body.page-template-dashboard .gm-login-page .gm-oauth__permisos li { border: 0; padding: 0; margin: 0; }
/* la casilla de editar lee como el resto del texto, no como la etiqueta de un campo */
/* «¿Falta una marca? Agrégala»: un botón del formulario que se ve como enlace */
body.page-template-dashboard .gm-login-page button.gm-oauth__link { display: inline; padding: 0; margin: 0; border: 0; background: none; color: var(--gm-modal-title, #fff); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; height: auto; min-height: 0; box-shadow: none; }
body.page-template-dashboard .gm-login-page .gm-oauth__meta a { text-underline-offset: 3px; }

/* «Gourmedia × Claude»: la banda del logo lleva al asistente con su logo, como
   las portadas de las guías de integración POS (assets/docs/integracion-pos) */
body.page-template-dashboard .gm-login-page .gm-oauth__pareja { gap: 14px; padding: 0 20px; }
body.page-template-dashboard .gm-login-page .gm-oauth__pareja .gm-login__logo { width: 104px; margin: 30px 0; }
body.page-template-dashboard .gm-login-page .gm-oauth__x { color: var(--gm-modal-text, #afafaf); font-size: 15px; line-height: 1; }
/* el wordmark de cada uno (assets/img/oauth), a la altura óptica del de Gourmedia */
body.page-template-dashboard .gm-login-page .gm-oauth__app { display: block; width: auto; max-width: none; flex: none; }
body.page-template-dashboard .gm-login-page .gm-oauth__app--claude { height: 23px; }
body.page-template-dashboard .gm-login-page .gm-oauth__app--chatgpt { height: 18px; }

/* el texto con su lista, y los dos avisos de abajo: un bloque cada uno, sin raya entre medio */
body.page-template-dashboard .gm-login-page .gm-oauth__bloque { display: flex; flex-direction: column; gap: 10px; }
body.page-template-dashboard .gm-login-page .gm-oauth__bloque > .gm-oauth__meta + .gm-oauth__meta { margin-top: -2px; }

/* las marcas de la conexión: logo, nombre y el visto de las que entran */
body.page-template-dashboard .gm-login-page .gm-oauth__marcas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
body.page-template-dashboard .gm-login-page .gm-oauth__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--gm-modal-line, #2e2e2e);
  border-radius: 12px;
  background: var(--gm-modal-field, #1b1b1b);
}
/* el logo con aire dentro de su recuadro (pegado a los bordes se veía apretado) */
body.page-template-dashboard .gm-login-page .gm-oauth__marca-logo {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 6px;
  border-radius: 10px;
  object-fit: contain;
  background: #111;
}
body.page-template-dashboard .gm-login-page .gm-oauth__marca-inicial { display: grid; place-items: center; background: #2c2c2c; color: #fff; font-size: 15px; font-weight: 600; }
body.page-template-dashboard .gm-login-page .gm-oauth__marca-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.page-template-dashboard .gm-login-page .gm-oauth__marca-nombre { overflow: hidden; color: var(--gm-modal-title, #fff); font-size: 14px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
body.page-template-dashboard .gm-login-page .gm-oauth__marca-nota { color: var(--gm-modal-text, #afafaf); font-size: 12px; line-height: 1.4; }
body.page-template-dashboard .gm-login-page .gm-oauth__marca-ok { width: 16px; height: 16px; flex: none; color: var(--gm-ok, #34d399); }
/* la que no entra (sin activar, o con el MCP apagado y sin ser su dueño), atenuada */
body.page-template-dashboard .gm-login-page .gm-oauth__marca.is-fuera { background: none; }
body.page-template-dashboard .gm-login-page .gm-oauth__marca.is-fuera .gm-oauth__marca-logo { opacity: .45; }
body.page-template-dashboard .gm-login-page .gm-oauth__marca.is-fuera .gm-oauth__marca-nombre { color: var(--gm-modal-text, #afafaf); }

/* los botones del pie, uno al lado del otro y a la derecha (el error los apilaba) */
body.page-template-dashboard.gm-oauth-body .gm-login-page .gm-modal__foot { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px; }

/* la maqueta (/oauth/authorize/?maqueta=claude): un aviso sobre la caja */
body.page-template-dashboard .gm-login-page .gm-oauth__maqueta {
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 1px dashed var(--gm-border-hi, #4a4a4a);
  border-radius: 999px;
  color: var(--gm-modal-text, #afafaf);
  font-size: 12px;
  line-height: 1.4;
}