/* ============================================================================ Layout de la app real (a diferencia de styles.css, que trae los componentes visuales del prototipo). Acá NO hay marco de celular de mentira: la app ocupa toda la pantalla en el celular, y queda centrada con un ancho máximo prolijo en desktop/tablet. ============================================================================ */ html, body { height: 100%; /* Evita el "rebote" de scroll (pull-to-refresh / rubber-band) típico de Chrome/WebView en Android — sin esto, un toque de más arrastrando hacia abajo dejaba asomar por una fracción de segundo el fondo real de (el crema de --bg) arriba de todo, incluso en pantallas como el login que no tienen nada para scrollear. Se ve como un recuadro blanco en las esquinas de arriba (bug reportado por Marcelo el 25/09). */ overscroll-behavior-y: none; } /* Cualquier elemento con el atributo "hidden" tiene que quedar oculto de verdad, incluso cuando otra regla de más abajo (como .auth-loading o .app-shell) le pone display:flex a propósito. Sin este !important, esas reglas le ganan a [hidden] y la pantalla de carga queda trabada. */ [hidden] { display: none !important; } body { display: flex; flex-direction: column; min-height: 100dvh; } .app-shell { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100dvh; background: var(--bg); } .app-shell .topbar { padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px; } .app-shell .app-content { padding: 6px 18px 14px; } .app-shell .tabbar { padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); } .logout-btn { /* margin-left:auto — para que quede pegado a la derecha tanto con .greet visible (Inicio/Alertas) como oculto (Club/Perfil, ver cambiarTab() en app.js); si no, con .greet oculto el justify-content:space-between de .topbar lo empuja de vuelta a la izquierda. */ margin-left: auto; border: none; background: var(--surface-2); color: var(--ink-soft); font-size: 11px; font-weight: 700; padding: 7px 11px; border-radius: 10px; cursor: pointer; font-family: "Poppins", sans-serif; } /* ---------- Pantalla de login / registro ---------- */ .auth-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; background: linear-gradient(160deg, var(--accent), var(--brand) 55%, var(--brand-strong)); text-align: center; } /* Además del overscroll-behavior de arriba (que evita el rebote en sí), esto es un segundo cinturón de seguridad: mientras se ve el login o la pantalla de "verificá tu email" (mostrarLogin()/mostrarVerificacionEmail() en app.js les agregan esta clase a , mostrarApp() se la saca), el fondo de pasa a ser EL MISMO degradé de .auth-screen en vez del crema de --bg — así, si por lo que sea llega a asomar un pixel de detrás (esquinas redondeadas del celular, alguna barra de estado que no pinta bien encima), se mimetiza en vez de verse como un recuadro blanco. */ body.pantalla-auth { background: linear-gradient(160deg, var(--accent), var(--brand) 55%, var(--brand-strong)); } .auth-mark { width: 118px; filter: drop-shadow(0 14px 20px rgba(60, 40, 0, .3)); } .auth-mark img { width: 100%; height: auto; display: block; } .auth-title { font-family: "Chewy", "Poppins", cursive; font-size: 30px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .18); line-height: 1.05; } .auth-sub { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .95; margin-top: -12px; } .auth-card { width: 100%; max-width: 340px; background: var(--surface); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35); text-align: left; } .auth-toggle { display: flex; background: var(--surface-2); border-radius: 99px; padding: 3px; gap: 2px; } .auth-toggle button { flex: 1; border: none; background: none; padding: 8px 6px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; font-family: "Poppins", sans-serif; } .auth-toggle button.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px -3px var(--shadow); } .auth-card .form-field input { width: 100%; } /* Pantalla de bloqueo "verificá tu email" (#verificarEmailScreen): reusa .auth-card, pero con un h3/p sueltos en vez del
de login/registro — sin esto, los márgenes por defecto del navegador se sumarían al gap del flex column y quedaría todo separado de más. */ .auth-card h3 { margin: 0; font-size: 16.5px; } .auth-card > p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } .auth-card > p strong { color: var(--ink); } .auth-submit { border: none; background: linear-gradient(120deg, var(--brand), var(--violet)); color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 14px; cursor: pointer; margin-top: 4px; } .auth-submit:disabled { opacity: .6; cursor: default; } .auth-error { font-size: 12px; color: #B3261E; background: #FBE9E7; border-radius: 10px; padding: 9px 11px; line-height: 1.4; } .auth-error[hidden] { display: none; } .auth-info { font-size: 12px; color: #11676A; background: #E3F2F1; border-radius: 10px; padding: 9px 11px; line-height: 1.4; } .auth-info[hidden] { display: none; } .auth-forgot { align-self: flex-end; margin-top: -6px; border: none; background: none; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-family: "Poppins", sans-serif; } .auth-forgot[hidden] { display: none; } /* Link de "Baja / Arrepentimiento" (Disposición 954/2025) — mismo look que .auth-forgot pero SIN su margin-top negativo (pensado para pegarse justo debajo del campo de contraseña), porque este va después, al final del formulario, y ese margen negativo lo pegaría feo contra lo de arriba. */ .auth-baja-link { align-self: center; margin-top: 4px; border: none; background: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-family: "Poppins", sans-serif; } .auth-legal-check { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--ink-soft); text-align: left; margin-top: -2px; cursor: pointer; } .auth-legal-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--brand); } .auth-legal-check a { color: var(--teal-strong); font-weight: 600; text-decoration: none; } .auth-legal-check a:hover { text-decoration: underline; } .auth-legal-check[hidden] { display: none; } .perfil-legal-links { display: flex; justify-content: center; gap: 8px; margin-top: 14px; font-size: 11.5px; color: var(--ink-soft); } .perfil-legal-links a { color: var(--ink-soft); text-decoration: underline; } .auth-loading { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 100dvh; color: var(--ink-soft); font-size: 13px; } /* Campo de contraseña con el ojito para mostrar/ocultar lo que se escribió. */ .password-field { position: relative; width: 100%; } .password-field input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 38px 10px 12px; /* el padding-right deja lugar para que el ojito no tape el texto */ font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--surface); outline: none; } .password-field input:focus { border-color: var(--brand); } .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; font-size: 16px; line-height: 1; padding: 6px; cursor: pointer; opacity: .65; } .password-toggle:hover { opacity: 1; } /* Campo "readonly" del perfil: se ve apagado para dejar claro que hay que tocar "Editar" (y confirmar la contraseña) antes de poder cambiarlo. */ .field .value[readonly] { background: var(--surface-2); color: var(--ink-soft); cursor: default; } .reauth-box { margin-top: 14px; background: var(--surface-2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .reauth-box[hidden] { display: none; } .reauth-box label { font-size: 12px; font-weight: 600; color: var(--ink-soft); } .reauth-box input { width: 100%; } .reauth-actions { display: flex; gap: 8px; margin-top: 2px; } .reauth-actions button { flex: 1; } .geo-status { font-size: 11px; color: var(--ink-faint); line-height: 1.4; } /* ---------- Avistamientos ("👀 Lo vi") ---------- */ .avistamientos-box { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .avistamientos-box[hidden] { display: none; } .avistamientos-titulo { font-size: 12.5px; font-weight: 700; color: var(--ink); } .avistamientos-lista { display: flex; flex-direction: column; gap: 8px; } .avistamiento-item { border-bottom: 1px solid var(--line); padding-bottom: 8px; } .avistamiento-item:last-child { border-bottom: none; padding-bottom: 0; } .avistamiento-cabecera { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer; font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; } .avistamiento-cabecera b { color: var(--ink); } .avistamiento-texto { flex: 1; } .avistamiento-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-2); font-size: 13px; } .avistamiento-avatar img { width: 100%; height: 100%; object-fit: cover; } .avistamiento-chevron { color: var(--ink-faint); font-size: 10px; flex-shrink: 0; } .alert-lovi-btn { margin-top: 8px; width: 100%; font-size: 12.5px; padding: 8px; } .alert-lovi-panel { margin-top: 8px; background: var(--surface-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .alert-lovi-panel[hidden] { display: none; } .alert-lovi-panel label { font-size: 11px; font-weight: 600; color: var(--ink-soft); } .alert-lovi-nota { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--surface); outline: none; } .alert-lovi-nota:focus { border-color: var(--brand); } .alert-lovi-foto-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-soft); } .alert-lovi-foto-label[hidden] { display: none; } .alert-lovi-foto { font-size: 11.5px; color: var(--ink-soft); } .alert-lovi-confirmar { font-size: 12.5px; padding: 9px; } /* ---------- Chat enmascarado de un avistamiento ("Encuentro Seguro") ---------- */ .chat-hilo-contenedor { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-width: 100%; overflow-x: hidden; } .chat-hilo-contenedor[hidden] { display: none; } .chat-mensajes { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; padding: 2px; } .chat-burbuja { max-width: 82%; padding: 7px 10px; border-radius: 12px; font-size: 12px; line-height: 1.35; word-break: break-word; } .chat-burbuja.mia { align-self: flex-end; /* Color fijo (no una variable de tema) a propósito: el naranja de marca con letras oscuras (como estaba antes) se lee mal en una burbuja chica. Este verde azulado oscuro + letras blancas se ve bien tanto en modo claro como oscuro, sin depender de qué tema tenga el celular. */ background: #11676A; color: #FFFFFF; border-bottom-right-radius: 3px; } .chat-burbuja.otra { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 3px; } .chat-hora { display: block; margin-top: 2px; font-size: 9.5px; text-align: right; } .chat-burbuja.mia .chat-hora { color: rgba(255, 255, 255, 0.75); } .chat-burbuja.otra .chat-hora { color: var(--ink-soft); } .chat-foto { display: block; max-width: 100%; max-height: 160px; border-radius: 8px; margin-bottom: 4px; } .chat-escribiendo { font-size: 11px; font-style: italic; color: var(--ink-soft); padding: 0 2px; } .chat-escribiendo[hidden] { display: none; } .chat-input-row { display: flex; gap: 6px; max-width: 100%; } .chat-input { flex: 1 1 0%; /* Sin esto, en algunos navegadores (Chrome/WebView de Android) el campo de texto NO se achica dentro del flex: crece con lo que vas escribiendo y empuja el botón de foto y el de "Enviar" fuera de la pantalla, dejándolos inalcanzables. min-width:0 le permite reducirse hasta el ancho que sobra, que es lo que se espera de un flex item con flex:1. */ min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; background: var(--surface); color: var(--ink); /* .chat-input es un