/* Ver contraseña (plataforma §4.2): el ojo va dentro del campo, a la derecha; el campo conserva su ancho. */
.ver-password { position: relative; display: block; width: 100%; }
.ver-password > input { width: 100%; padding-right: 46px; }
.ver-password-boton {
  position: absolute;
  top: 50%;
  right: 3px;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  opacity: 0.65;
  transform: translateY(-50%);
  cursor: pointer;
}
.ver-password-boton:hover { opacity: 1; }
.ver-password-boton:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: -2px; }
.ver-password-boton svg { display: block; }

/* Botones de passkey y Google (plataforma §4.2): ícono a la izquierda del texto, centrados. */
.boton-acceso { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.icono-acceso { display: block; flex: none; }

/* Google: colores de sus guías de marca para "Sign in with Google" (claro y oscuro); la "G" nunca se recolorea. */
:root {
  --google-fondo: #ffffff;
  --google-borde: #747775;
  --google-texto: #1f1f1f;
}
:root[data-tema="oscuro"] {
  --google-fondo: #131314;
  --google-borde: #8e918f;
  --google-texto: #e3e3e3;
}
.btn.boton-google {
  --bs-btn-color: var(--google-texto);
  --bs-btn-bg: var(--google-fondo);
  --bs-btn-border-color: var(--google-borde);
  --bs-btn-hover-color: var(--google-texto);
  --bs-btn-hover-bg: color-mix(in srgb, var(--google-texto) 8%, var(--google-fondo));
  --bs-btn-hover-border-color: var(--google-borde);
  --bs-btn-active-color: var(--google-texto);
  --bs-btn-active-bg: color-mix(in srgb, var(--google-texto) 12%, var(--google-fondo));
  --bs-btn-active-border-color: var(--google-borde);
  font-weight: 500;
}
.admin-button.boton-google { color: var(--google-texto); border-color: var(--google-borde); background: var(--google-fondo); }
.admin-button.boton-google:hover { background: color-mix(in srgb, var(--google-texto) 8%, var(--google-fondo)); }

/* Mi cuenta: etiquetas y subtítulos de las formas de entrar con su ícono. */
.crud-hero-badges .crud-badge { display: inline-flex; align-items: center; gap: 5px; }
.acceso-subtitulo { display: flex; align-items: center; gap: 8px; }

/* Páginas sin banda (plataforma §4.2): Bootstrap con la marca de Calenda (calenda-marca.css). Sólo en su <body>, para
   no tocar las páginas con banda, que también cargan este archivo. */
body.bg-body-tertiary {
  --bs-body-bg: var(--calenda-fondo);
  --bs-body-color: var(--calenda-texto);
  --bs-emphasis-color: var(--calenda-texto);
  --bs-secondary-color: var(--calenda-tenue);
  --bs-tertiary-bg: var(--calenda-fondo);
  --bs-border-color: var(--calenda-linea-campo);
  --bs-body-font-family: var(--calenda-fuente);
  --bs-link-color: var(--calenda-enlace);
  --bs-link-hover-color: var(--calenda-texto);
  --bs-focus-ring-color: var(--calenda-foco-halo);
  color: var(--calenda-texto);
  background: var(--calenda-fondo) !important;
  font-family: var(--calenda-fuente);
}
body.bg-body-tertiary a { color: var(--calenda-enlace); }
body.bg-body-tertiary a:hover { color: var(--calenda-texto); }
body.bg-body-tertiary .text-muted, body.bg-body-tertiary .text-secondary, body.bg-body-tertiary .form-text { color: var(--calenda-tenue) !important; }
body.bg-body-tertiary .card {
  --bs-card-bg: var(--calenda-superficie);
  --bs-card-border-color: var(--calenda-linea);
  border-radius: var(--calenda-r-lg);
  box-shadow: var(--calenda-sombra-2) !important;
}
body.bg-body-tertiary .form-control { color: var(--calenda-texto); background-color: var(--calenda-superficie); border-color: var(--calenda-linea-campo); }
body.bg-body-tertiary .form-control:focus { border-color: var(--calenda-foco); box-shadow: 0 0 0 4px var(--calenda-foco-halo); }
body.bg-body-tertiary .btn-dark,
[data-bs-theme="dark"] body.bg-body-tertiary .btn-dark {
  --bs-btn-color: var(--calenda-sobre-acento); --bs-btn-bg: var(--calenda-acento); --bs-btn-border-color: var(--calenda-acento);
  --bs-btn-hover-color: var(--calenda-sobre-acento); --bs-btn-hover-bg: var(--calenda-acento-hover); --bs-btn-hover-border-color: var(--calenda-acento-hover);
  --bs-btn-active-color: var(--calenda-sobre-acento); --bs-btn-active-bg: var(--calenda-acento-hover); --bs-btn-active-border-color: var(--calenda-acento-hover);
  --bs-btn-disabled-color: var(--calenda-sobre-acento); --bs-btn-disabled-bg: var(--calenda-acento); --bs-btn-disabled-border-color: var(--calenda-acento);
  font-weight: 500;
}
body.bg-body-tertiary .btn-outline-dark,
[data-bs-theme="dark"] body.bg-body-tertiary .btn-outline-dark {
  --bs-btn-color: var(--calenda-texto); --bs-btn-border-color: var(--calenda-linea-campo);
  --bs-btn-hover-color: var(--calenda-sobre-acento); --bs-btn-hover-bg: var(--calenda-acento); --bs-btn-hover-border-color: var(--calenda-acento);
  --bs-btn-active-color: var(--calenda-sobre-acento); --bs-btn-active-bg: var(--calenda-acento-hover); --bs-btn-active-border-color: var(--calenda-acento-hover);
}
body.bg-body-tertiary .alert-success { --bs-alert-color: var(--calenda-exito-texto); --bs-alert-bg: var(--calenda-exito-fondo); --bs-alert-border-color: var(--calenda-exito-borde); }
body.bg-body-tertiary .alert-warning { --bs-alert-color: var(--calenda-aviso-texto); --bs-alert-bg: var(--calenda-aviso-fondo); --bs-alert-border-color: var(--calenda-aviso-borde); }
body.bg-body-tertiary .alert-danger { --bs-alert-color: var(--calenda-error-texto); --bs-alert-bg: var(--calenda-error-fondo); --bs-alert-border-color: var(--calenda-error-borde); }
body.bg-body-tertiary .alert-info { --bs-alert-color: var(--calenda-info-texto); --bs-alert-bg: var(--calenda-info-fondo); --bs-alert-border-color: var(--calenda-info-borde); }
body.bg-body-tertiary .tema-boton-suelto { color: var(--calenda-texto); background: var(--calenda-superficie); border-color: var(--calenda-linea); }
body.bg-body-tertiary .tema-boton-suelto:focus-visible { outline-color: var(--calenda-foco); }

/* Logotipo y lema arriba del formulario (zona de respeto de 12 px). */
.acceso-marca { margin: 8px 0 24px; text-align: center; }
.acceso-logo { margin: 0; padding: 12px; line-height: 0; }
.acceso-logo img { display: inline-block; width: auto; height: 36px; }
.acceso-lema { margin: 0; color: var(--calenda-tenue); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; }

/* Logotipo claro u oscuro según el tema (también en la banda de admin.). */
.logo-oscuro { display: none !important; }
:root[data-tema="oscuro"] .logo-claro { display: none !important; }
:root[data-tema="oscuro"] .logo-oscuro { display: inline-block !important; }