/* ========================================================================== oauth.css — boton del proveedor y pantallas de cuentas conectadas. Depende de los tokens de base.css (--e-*, --r-*, --t-*, --n-*, --txt, ...). Quien la enlaza es la PAGINA, no el parcial del boton. En las pantallas de autenticacion la pide views/layout/auth.php en el ; en el panel la pide views/panel/conexiones.php. views/auth/_boton_google.php ya no la enlaza: cuando lo hacia, /entrar y /registro se llevaban la hoja dos veces y la segunda etiqueta caia dentro del , bloqueando el pintado a mitad de camino. Si aparece una pagina nueva con el boton, se enlaza desde su layout; nunca desde el parcial, que no sabe en que documento va a caer. Regla del archivo: cero pixeles arbitrarios y cero colores en duro, SALVO los del boton de Google. Esos son de su guia de marca y no se tocan: no salen de nuestros tokens ni cambian con el tema del panel. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Boton "Continuar con Google" Especificacion de Google: fondo blanco, borde hairline #DADCE0, texto #3C4043 con peso medio, logo de 18px y separacion de 12px. Aca ademas se fija el alto en 44px, que es el area tactil minima del sistema (§7). -------------------------------------------------------------------------- */ .gauth { display: inline-flex; margin: 0; } .gauth--bloque { display: flex; width: 100%; } .gauth--bloque .gbtn { width: 100%; } .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3); /* 44px exactos: el boton ES el area tactil, no necesita el ::after de .btn */ height: 44px; min-height: 44px; padding: 0 var(--e-4); max-width: 100%; border: var(--b-fino) solid #dadce0; border-radius: var(--r-md); background: #ffffff; color: #3c4043; font-family: var(--fuente); font-size: var(--t-sm); font-weight: var(--peso-enfasis); line-height: 1; text-align: center; cursor: pointer; transition: background-color var(--ms-instantaneo) var(--ease-ambos), box-shadow var(--ms-instantaneo) var(--ease-ambos); } .gbtn:hover { background: #f7f8f8; box-shadow: var(--sombra-1); } .gbtn:active { background: #f1f3f4; box-shadow: none; } /* Doble anillo: el boton es blanco y puede caer sobre cualquier fondo, asi que un solo outline claro se pierde y uno oscuro tambien. */ .gbtn:focus-visible { outline: var(--b-grueso) solid #1a73e8; outline-offset: 2px; box-shadow: 0 0 0 4px rgb(26 115 232 / .22); } .gbtn:disabled, .gbtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; } .gbtn__logo { display: inline-flex; flex: none; width: 18px; height: 18px; } .gbtn__logo svg { display: block; width: 18px; height: 18px; } .gbtn__texto { /* El aleman y el español estiran el texto: se recorta antes de romper el boton en dos lineas y desalinear el logo. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Alto contraste: el borde hairline desaparece y el boton se ve flotando. */ @media (forced-colors: active) { .gbtn { border-color: ButtonBorder; } } /* -------------------------------------------------------------------------- 2. Separador "o" Lo usa la pantalla de login entre el formulario y el boton del proveedor. -------------------------------------------------------------------------- */ .oauth-o { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-5) 0; color: var(--txt-3); font-size: var(--t-xs); line-height: var(--lh-xs); text-transform: lowercase; } .oauth-o::before, .oauth-o::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--borde); } /* -------------------------------------------------------------------------- 3. Pantalla de vinculacion (views/auth/vincular.php) -------------------------------------------------------------------------- */ .oauth-pantalla { display: flex; flex-direction: column; gap: var(--e-4); width: 100%; max-width: 420px; margin: 0 auto; padding: var(--e-5) var(--e-4); } .oauth-titulo { margin: 0; font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: var(--peso-titulo); color: var(--txt); } .oauth-subtitulo { margin: 0 0 var(--e-2); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--peso-titulo); color: var(--txt); } .oauth-texto { margin: 0; color: var(--txt-2); font-size: var(--t-base); line-height: var(--lh-base); } .oauth-texto--sm { font-size: var(--t-sm); line-height: var(--lh-sm); } .oauth-cuenta { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding: var(--e-3) var(--e-4); border: var(--b-fino) solid var(--borde); border-radius: var(--r-md); background: var(--sup-1); } .oauth-cuenta__correo { font-weight: var(--peso-enfasis); color: var(--txt); overflow-wrap: anywhere; } .oauth-cuenta__nombre { color: var(--txt-2); font-size: var(--t-sm); line-height: var(--lh-sm); } .oauth-form { display: flex; flex-direction: column; gap: var(--e-4); margin: 0; } .oauth-form--cancelar { margin-top: var(--e-1); } .oauth-aviso { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); border: var(--b-fino) solid var(--aviso); border-radius: var(--r-md); background: var(--aviso-suave); color: var(--txt); } .oauth-aviso__titulo { margin: 0; font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--peso-titulo); } .oauth-aviso p { margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); } /* -------------------------------------------------------------------------- 4. Panel: cuentas conectadas (views/panel/conexiones.php) -------------------------------------------------------------------------- */ .oauth-panel { display: flex; flex-direction: column; gap: var(--e-5); width: 100%; max-width: 760px; } .oauth-panel__cabecera { display: flex; flex-direction: column; gap: var(--e-2); } .oauth-acceso { margin: 0; } .oauth-lista { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; } .oauth-item { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: var(--b-fino) solid var(--borde); border-radius: var(--r-md); background: var(--sup-1); } .oauth-item__avatar { flex: none; width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover; background: var(--sup-2); } .oauth-item__avatar--vacio { display: block; border: var(--b-fino) solid var(--borde); } .oauth-item__datos { flex: 1 1 auto; min-width: 0; } .oauth-item__correo { margin: 0; font-weight: var(--peso-enfasis); color: var(--txt); } .oauth-item__nombre, .oauth-item__meta { margin: 0; } .oauth-item__accion { flex: none; margin: 0; } .oauth-nota { margin: 0; padding: var(--e-3) var(--e-4); border-inline-start: var(--b-grueso) solid var(--aviso); border-radius: var(--r-sm); background: var(--aviso-suave); color: var(--txt); font-size: var(--t-sm); line-height: var(--lh-sm); } .oauth-conectar { display: flex; } .oauth-tarjeta { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5) var(--e-4); border: var(--b-fino) solid var(--borde); border-radius: var(--r-md); background: var(--sup-1); box-shadow: var(--sombra-1); } .oauth-tarjeta .oauth-form { max-width: 420px; } /* -------------------------------------------------------------------------- 5. Movil Regla del tramo compacto: se quita, no se encoge. La letra no baja de 13px y los controles siguen midiendo 44px; lo que cambia es que la fila de cada cuenta se apila para que el correo no quede recortado a tres letras. -------------------------------------------------------------------------- */ @media (max-width: 640px) { .oauth-pantalla { padding: var(--e-4); } .oauth-panel { gap: var(--e-4); } } @media (max-width: 380px) { .oauth-item { flex-wrap: wrap; padding: var(--e-3); } .oauth-item__datos { flex-basis: calc(100% - 40px - var(--e-3)); } .oauth-item__accion { flex-basis: 100%; display: flex; justify-content: flex-end; } .oauth-pantalla { padding: var(--e-3); } }