/* Opciones sociales compartidas por la ventana de acceso y entrar.html.
   Familia Cocuyo (29-sep-2026): sobre negro, las marcas van en píldoras
   claras de 48 px — el estilo «blanco» que Apple exige en fondos oscuros
   (logotipo negro, texto negro) y el botón oficial de Google en su tema
   claro, escalado a la misma altura. La lima queda para «Continuar». */
.acceso-social { width: 100%; min-width: 0; margin: 0; font-family: var(--fuente, sans-serif); }
.acceso-social [hidden] { display: none !important; }
.acceso-social-opciones { display: grid; gap: 10px; }
.acceso-social-opcion { min-width: 0; }
.acceso-social .acceso-social-boton { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 10px 44px; border: 0; border-radius: 999px; background: var(--blanco-luz); color: var(--tinta-sobre-verde); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; text-align: center; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.acceso-social .acceso-social-boton:hover:not(:disabled) { background: color-mix(in srgb, var(--blanco-luz) 88%, var(--negro-abismo)); }
.acceso-social .acceso-social-boton:active:not(:disabled) { transform: scale(.99); }
.acceso-social .acceso-social-boton:disabled { cursor: default; opacity: .55; }
.acceso-social .acceso-social-boton:focus-visible, .acceso-social-reintentar:focus-visible, .acceso-social-vincular:focus-visible, .acceso-social-cancelar:focus-visible { outline: 2px solid var(--verde-cocuyo); outline-offset: 3px; }
.acceso-social-icono { display: flex; flex: 0 0 20px; align-items: center; width: 20px; height: 20px; }
.acceso-social-icono svg { display: block; width: 20px; height: 20px; }
/* Logotipo a la izquierda, texto centrado (guía de Apple y de Google). */
.acceso-social-boton .acceso-social-icono { position: absolute; left: 18px; }
.acceso-social-boton[data-social-proveedor="apple"] .acceso-social-icono svg { width: 19px; height: 19px; margin-top: -2px; }
.acceso-social-label { min-width: 0; }
.acceso-social-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.acceso-social-estado:empty { display: none; }
/* Botón oficial de Google Identity Services (40 px) → 48 px sin deformar. */
.acceso-social-google { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; min-height: 48px; overflow: hidden; border-radius: 999px; background: var(--blanco-luz); }
.acceso-social-google-sdk { display: flex; justify-content: center; flex-shrink: 0; transform: scale(1.2); transform-origin: center; }
.acceso-social-google[inert] { opacity: .55; pointer-events: none; }
/* Hueco reservado mientras el servidor confirma las opciones (sin saltos). */
.acceso-social-esqueleto { height: 48px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--blanco-luz) 5%, transparent) 0%, color-mix(in srgb, var(--blanco-luz) 9%, transparent) 50%, color-mix(in srgb, var(--blanco-luz) 5%, transparent) 100%); background-size: 200% 100%; animation: acceso-social-brillo 1.4s ease-in-out infinite; }
@keyframes acceso-social-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.acceso-social .acceso-social-nota { margin: 10px 0 0; color: color-mix(in srgb, var(--blanco-luz) 62%, var(--negro-abismo)); font-size: 13px; line-height: 1.55; text-align: center; overflow-wrap: anywhere; }
.acceso-social .acceso-social-nota:empty { display: none; }
.acceso-social .acceso-social-reintentar, .acceso-social .acceso-social-cancelar { display: block; min-height: 44px; margin: 2px auto 0; padding: 8px 14px; border: 0; background: transparent; color: var(--blanco-luz); font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--blanco-luz) 35%, transparent); cursor: pointer; }
.acceso-social .acceso-social-reintentar:hover, .acceso-social .acceso-social-cancelar:hover { text-decoration-color: currentColor; }
.acceso-social .acceso-social-vincular { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 4px 0 0; padding: 8px 10px; color: var(--verde-cocuyo); font-size: 13px; line-height: 1.5; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.acceso-social .acceso-social-separador { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: color-mix(in srgb, var(--blanco-luz) 45%, var(--negro-abismo)); font-size: 12px; line-height: 1.5; text-align: center; }
.acceso-social .acceso-social-separador::before, .acceso-social .acceso-social-separador::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--blanco-luz) 9%, transparent); }
@media (max-width: 370px) {
  .acceso-social .acceso-social-boton { gap: 7px; padding-inline: 40px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso-social-esqueleto { animation: none; }
  .acceso-social .acceso-social-boton { transition: none; }
}