/* ── Módulo login: pantalla «Mi cuenta» ────────────────────────────────────────
   apps/Login/views/account.php. docs/DISENO.md. Cero color literal y cero medida
   fuera de la escala: todo sale de los tokens que declara
   public/assets/css/app.css y que redefine el tema activo.

   POR QUÉ EXISTE ESTA HOJA, SIENDO PEQUEÑA
   docs/DISENO.md §12 desaconseja «un CSS por módulo porque es más ordenado», y
   con razón: cada <link> es una petición y una entrada de precacheo. Aquí el
   motivo no es el orden, es la PROPIEDAD. `/cuenta` es una pantalla de `login`,
   pero los campos que la llenan los aporta `social` (género, país, descripción,
   cinco fotos) a través de `Support\AccountFields`. Si la rejilla de la pantalla
   viviera en `apps/Social/assets/css/social.css`, desinstalar `social` —que es
   perfectamente legal: `login` NO depende de él, es al revés— dejaría `/cuenta`
   con el marcado nuevo y sin una sola regla que lo colocara. Y `app.css` no es
   una opción: ya supera su presupuesto de 18 KB (§13, "Decisión pendiente").

   Lo que esta hoja NO hace: no menciona ni una clase de otro módulo. El
   contenedor `.bloque-cuenta__cuerpo` es una columna simple; cómo se presenta
   cada campo dentro es cosa de quien lo registra. Así ninguna de las dos hojas
   necesita saber de la otra.

   ORDEN: componentes alfabéticos (§13). */

/* ── Bloque de la pantalla de cuenta ──────────────────────────────────────────
   Dos secciones dentro de un mismo <form>: «Tu perfil» (lo que ven los demás) y
   «Datos de la cuenta» (lo que solo ve su dueño). No son dos formularios: se
   guardan juntos, y partirlos obligaría a dos botones de guardar — dos acciones
   principales en la misma pantalla, que es justo lo que prohíbe §8.1. La
   separación es visual y semántica (<section> + <h2>), no de envío. */

/* .formulario ya separa a sus hijos --espacio-5; entre SECCIONES la escala pide
   --espacio-6 (§4.1), así que se suma la diferencia en vez de inventar un valor
   nuevo. Solo entre dos bloques: el primero no despega del aviso de arriba. */
.bloque-cuenta + .bloque-cuenta { margin-block-start: var(--espacio-2); }

.bloque-cuenta__titulo {
    /* --tipo-l y no el --tipo-xl por defecto de h2: el <h1> de la pantalla ya
       está en --tipo-2xl y estos son subtítulos, no titulares. */
    margin: 0 0 var(--espacio-2);
    font-size: var(--tipo-l);
}

/* Frase de privacidad de cada bloque (docs/DISENO.md §11.4). Al nivel de sección
   y no repetida campo a campo: la coletilla "esto lo ven los demás" doce veces
   seguidas deja de leerse. El icono nunca va solo — la frase dice lo mismo.
   --texto-suave sobre --fondo: 6,02:1 en claro y 7,05:1 en oscuro (§2.4). */
.bloque-cuenta__texto {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-5);
    color: var(--texto-suave);
    font-size: var(--tipo-sm);
}

/* 1rem y no el 1.25em de .icono: a --tipo-sm el icono se ve más grande que el
   propio texto y descoloca la primera línea. Mismo ajuste que .campo__error. */
.bloque-cuenta__texto .icono {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: .125em;
}

/* Un campo por fila (§8.2). El `gap` es el mismo --espacio-5 de .formulario, así
   que meter los campos en este contenedor no cambia el ritmo vertical que ya
   tenían cuando colgaban del <form> directamente. */
.bloque-cuenta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
}

/* Los datos de solo lectura, como tarjeta de filas con filete. Antes eran seis
   .campo sueltos con el mismo aire que un campo editable, y a 48px de alto cada
   valor (el min-height de .campo__valor, que existe para alinearse con los
   controles de al lado) ocupaban media pantalla para decir seis cosas cortas.
   Aquí no hay ningún control con el que alinearse: se recupera ese espacio. */
.bloque-cuenta__cuerpo--datos {
    gap: 0;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--superficie);
}

.bloque-cuenta__cuerpo--datos .campo {
    gap: var(--espacio-1);
    padding: var(--espacio-3) var(--espacio-4);
}

/* Filete ENTRE filas y no debajo de todas: con border-bottom queda una línea
   suelta pegada al borde inferior de la tarjeta. */
.bloque-cuenta__cuerpo--datos .campo + .campo { border-top: 1px solid var(--linea); }

.bloque-cuenta__cuerpo--datos .campo__valor {
    min-height: 0;
    padding: 0;
    /* Un correo largo y su etiqueta "Verificado" no caben en una línea a 320px:
       que baje, no que desborde. Y `anywhere` porque un correo no tiene espacios
       donde partir. */
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

/* A partir de móvil grande, etiqueta y valor en la MISMA línea: son pares
   cortos, y en columna se leen como doce cosas en vez de como seis. Por debajo
   de 30rem sigue apilado, que es lo único que cabe. */
@media (min-width: 30rem) {
    .bloque-cuenta__cuerpo--datos .campo {
        display: grid;
        grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
        align-items: baseline;
        column-gap: var(--espacio-4);
    }
}

/* ── Pantalla de cuenta ───────────────────────────────────────────────────────
   La columna de app (30rem) y centrada, como el resto del producto (§4.4: "en
   escritorio la app no se estira: se centra"). .formulario ya limita a 30rem
   pero no centra, así que a 1280px la pantalla entera quedaba pegada al borde
   izquierdo del contenedor de 62rem, con el <h1> del layout descolgado encima. */

.cuenta {
    max-width: var(--ancho-app);
    margin-inline: auto;
}

.cuenta__titulo { margin: 0 0 var(--espacio-5); }

/* Barra de acción pegajosa. Con las cinco casillas de foto el formulario mide
   más de dos pantallas en un móvil, y el botón de guardar quedaba al final de
   todo: se editaba el nombre, se bajaba a buscar el botón y por el camino se
   perdía de vista qué se había cambiado.

   `sticky` y no `fixed` (§12): el elemento sigue ocupando su sitio en el flujo,
   se despega solo mientras el formulario está en pantalla y se va con él al
   terminar — no hay que reservarle hueco al final de la página ni pelearse con
   el teclado de Android. Fondo --fondo (el del lienzo) para que el contenido que
   pasa por debajo no se transparente. */
.cuenta__acciones {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--espacio-3);
    padding-block: var(--espacio-3);
    /* El gesto de inicio de Android y la barra de iOS se comen la franja de
       abajo; sin esto el botón queda medio tapado en la TWA. */
    padding-bottom: calc(var(--espacio-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea);
    background: var(--fondo);
}

/* A ancho completo con una mano; a partir de móvil grande, al ancho de su texto:
   un botón de 480px de largo para dos palabras parece un error. */
.cuenta__acciones .boton { flex: 1 1 auto; }

@media (min-width: 30rem) {
    .cuenta__acciones .boton { flex: 0 1 auto; }
}

/* Cerrar sesión: fuera del formulario de guardado y detrás de un filete. No es
   un campo más de la cuenta, y pegado al botón de guardar se pulsa por error.
   El aire de --espacio-6 es el de "separación entre secciones" (§4.1). */
.cuenta__salir {
    margin-block-start: var(--espacio-6);
    padding-block-start: var(--espacio-5);
    border-top: 1px solid var(--linea);
}

/* ── Separador «o» de la pantalla de acceso ───────────────────────────────────
   apps/Login/views/signin.php. Dos formas de entrar —contraseña y Google— que son
   alternativas, no pasos: el filete con la palabra en medio es lo que lo dice de
   un vistazo.

   Vive en esta hoja y no en app.css porque es de una pantalla de este módulo, y
   app.css ya supera su presupuesto de 18 KB (docs/DISENO.md §13).

   La palabra la lee un lector de pantalla como ruido —«o» suelto entre dos
   botones no significa nada—, así que la vista la marca con aria-hidden y aquí
   solo se resuelve el aspecto. Cero color literal y cero medida fuera de la
   escala, como el resto del archivo. */
.acceso__separador {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    /* Sin margin propio: ahora es un hijo más de .formulario, que ya separa a los
       suyos con --espacio-5. Un margin-block aquí se SUMARÍA a ese gap y el
       separador quedaría con el doble de aire que los botones de al lado. */
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--tipo-sm);
    text-transform: lowercase;
}

/* Los dos filetes se generan aquí y no con un borde del propio elemento: así la
   palabra queda centrada entre ellos sin depender del ancho del texto. --linea
   es el token decorativo (1.31:1): correcto para un filete, y por eso mismo
   NUNCA para el borde de un control. */
.acceso__separador::before,
.acceso__separador::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--linea);
}

/* «Entrar» (principal) y «Entrar con Google» (secundario) son alternativas del
   MISMO peso: el color y el grosor de letra marcan la jerarquía —un solo botón
   principal por pantalla, docs/DISENO.md §8.1— pero la caja tiene que ser
   idéntica. Un botón más bajo y con letra más pequeña al lado del otro se lee
   como una opción de segunda, y no lo es. Se igualan min-height, relleno y cuerpo
   a los de .boton--principal; el resto (fondo, borde, peso) sigue
   distinguiéndolos.

   El selector cubre `<button>` y `<a>` porque el de Google ha sido las dos cosas:
   `<button type=submit>` mientras compartió formulario con la casilla de
   consentimiento, y `<a>` otra vez desde el 2026-08-29, cuando esa casilla se
   mudó a `/registro`. `.boton--secundario.boton--bloque` describe el botón por lo
   que es, no por su etiqueta, así que sobrevive al siguiente cambio de marcado.

   Acotado a la pantalla de acceso: fuera de ahí —«volver a entrar» en
   `verify-sent`, o cualquier otra pantalla— un botón secundario es más discreto a
   propósito. */
.pagina-acceso .formulario .boton--secundario.boton--bloque {
    min-height: var(--toque-comodo);
    padding-inline: var(--espacio-5);
    font-size: var(--tipo-base);
}

/* «¿Todavía no tienes cuenta?» cierra el formulario y no es un campo más: se
   separa hasta --espacio-6, el aire de «separación entre bloques» (§4.1), sumando
   la diferencia sobre el --espacio-5 que .formulario ya pone entre sus hijos.
   Mismo recurso que `.bloque-cuenta + .bloque-cuenta` en esta misma hoja. */
.pagina-acceso .acceso__alta { margin-block-start: var(--espacio-2); }