/*
 * OneAccount se ve como lo que es: una puerta.
 *
 * Nada de barra lateral, ni menú, ni panel. Quien llega aquí viene de otra
 * aplicación y quiere volver a ella cuanto antes — todo lo que se ponga en el
 * camino es tiempo entre «quiero entrar» y «entré».
 *
 * La hoja se escribe entera desde el principio en vez de copiarse de
 * GastroSquad. Esa es exactamente la deriva que costó una ronda de arreglos
 * allá: ocho pantallas que nacieron copiando el CSS de su vecina y acabaron
 * con cuatro anchos distintos para la misma tarjeta.
 */

:root {
    color-scheme: light dark;

    --tinta: #0f172a;
    --tinta-suave: #64748b;
    --fondo: #f8fafc;
    --papel: #ffffff;
    --borde: #e2e8f0;
    --acento: #2563eb;
    --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .07);
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #e2e8f0;
        --tinta-suave: #94a3b8;
        --fondo: #0b1120;
        --papel: #111827;
        --borde: #1f2937;
        --acento: #60a5fa;
        --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    line-height: 1.6;
}

.marco {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.tarjeta {
    width: 100%;
    max-width: 30rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 20px;
    box-shadow: var(--sombra);
    padding: 2.5rem 2rem;
    text-align: center;
}

.llave {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

h1 {
    font-family: Outfit, Inter, sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
}

.lema {
    margin: 0 0 1.25rem;
    color: var(--tinta-suave);
}

.nota {
    margin: 0;
    font-size: .88rem;
    color: var(--tinta-suave);
    max-width: 34ch;
    margin-inline: auto;
}

a { color: var(--acento); }

.pie {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    font-size: .78rem;
    color: var(--tinta-suave);
    border-top: 1px solid var(--borde);
}

.marca { font-weight: 600; }

.entorno {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    font-size: .68rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acento) 14%, transparent);
    color: var(--acento);
}

/* ── La puerta ──────────────────────────────────────────────────────────
 *
 * Un botón que se ve como un botón y se toca como un botón. `min-height:
 * 44px` no es estética: por debajo de eso un dedo falla, y esta pantalla se
 * usa desde el móvil del dueño tanto como desde el ordenador del local.
 */

.boton,
.boton-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 44px;
    padding: .7rem 1.4rem;
    border-radius: 12px;
    border: 1px solid var(--borde);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.boton {
    background: var(--acento);
    border-color: transparent;
    color: #fff;
}

.boton-google {
    background: var(--papel);
    color: var(--tinta);
    width: 100%;
    max-width: 20rem;
}

.boton:hover,
.boton-google:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}

.boton:focus-visible,
.boton-google:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.aviso {
    margin: 0 0 1.1rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    font-size: .88rem;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    color: var(--acento);
    border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
}

.aviso.es-error {
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #dc2626;
    border-color: color-mix(in srgb, #dc2626 30%, transparent);
}

@media (prefers-color-scheme: dark) {
    .aviso.es-error { color: #fca5a5; }
}

.nota + .nota,
.nota.pequena { margin-top: .9rem; }
.nota.pequena { font-size: .82rem; }

.boton + .nota { margin-top: 1rem; }
.boton-google + .nota { margin-top: 1.25rem; }

/* ── Mi cuenta ──────────────────────────────────────────────────────────
 *
 * Más ancha que la puerta porque muestra listas, no una decisión. La misma
 * tarjeta con un modificador, y no una clase nueva: ocho pantallas que
 * nacieron copiando el CSS de su vecina fue exactamente lo que costó una ronda
 * de arreglos en GastroSquad.
 */

.tarjeta.es-ancha { max-width: 34rem; text-align: left; }
.tarjeta.es-ancha .llave,
.tarjeta.es-ancha h1,
.tarjeta.es-ancha .lema { text-align: center; }

.retrato {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 1rem;
    border: 2px solid var(--borde);
    /* Las fotos de los proveedores no vienen cuadradas siempre, y una cara
     * estirada se nota mucho más que una recortada. */
    object-fit: cover;
    background: var(--fondo);
}

.sello {
    margin-left: .35rem;
    color: #16a34a;
    font-weight: 700;
}

.bloque { margin-top: 1.75rem; }

.bloque h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-suave);
    margin: 0 0 .6rem;
}

.lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.lista li {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .65rem .9rem;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fondo) 60%, transparent);
}

.proveedor { font-weight: 600; text-transform: capitalize; }

.detalle {
    color: var(--tinta-suave);
    font-size: .86rem;
    /* Que un correo largo no empuje la tarjeta a lo ancho. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.marca-sin-verificar {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, #d97706 16%, transparent);
    color: #b45309;
}

@media (prefers-color-scheme: dark) {
    .marca-sin-verificar { color: #fbbf24; }
}

/* El pie de la tarjeta ancha vuelve al centro: las listas se leen a la
 * izquierda, pero «Cerrar sesión» es una acción y una acción descolgada a media
 * altura parece un descuido. */
.tarjeta.es-ancha .nota.pequena { text-align: center; }

/* Quien manda, marcado. No es decoración: es cómo alguien con dos cuentas de
 * Google abiertas nota que entró con la que no era. */
.marca-superadmin {
    margin: .9rem auto 0;
    width: fit-content;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acento) 14%, transparent);
    color: var(--acento);
    border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
}

/* El texto de una lista vacía se alinea con el título de su sección, no con el
 * centro de la tarjeta: si no, parece que pertenece a otra cosa. */
.tarjeta.es-ancha .bloque .nota { text-align: left; margin-inline: 0; max-width: none; }

/* ── La cara de la aplicación que pregunta ──────────────────────────────
 *
 * Dos imágenes y no una: la puerta se pinta clara u oscura según el navegador
 * de quien llega, y un logotipo negro sobre fondo negro no se ve. Se enseña la
 * que toca y la otra ni ocupa sitio.
 */
.marca-app {
    display: flex;
    justify-content: center;
    margin-bottom: 1.15rem;
}

.marca-app img {
    max-width: 88px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* El par claro/oscuro del logotipo de una aplicación. La regla es GENERAL y no
 * va colgada de `.marca-app`: la puerta fue el primer sitio que enseñó
 * logotipos ajenos, el lanzador de `/cuenta` es el segundo, y colgarla de la
 * pantalla que la estrenó obliga a acordarse de ampliarla cada vez — que es
 * como el lanzador enseñaba los dos a la vez. */
.para-oscuro { display: none; }

@media (prefers-color-scheme: dark) {
    .para-claro { display: none; }
    .para-oscuro { display: block; }
}

/* ── El panel del equipo ────────────────────────────────────────────────
 *
 * Otra pantalla y otra forma. La puerta es una tarjeta centrada porque quien
 * llega toma UNA decisión; el panel es una página ancha porque quien llega
 * viene a mirar listas. Forzar la misma caja en las dos habría dejado tablas
 * de treinta centímetros en medio de una pantalla vacía.
 */

.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
}

.barra .marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Outfit, Inter, sans-serif;
    font-weight: 800;
    color: var(--tinta);
    text-decoration: none;
}

.barra-acciones { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .88rem; }
.enlace { color: var(--acento); text-decoration: none; font-weight: 600; }
.enlace:hover { text-decoration: underline; }

.contenido { width: 100%; max-width: 68rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.marco:has(.contenido) { display: block; }

.titulo { font-family: Outfit, Inter, sans-serif; font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.subtitulo { margin: 0 0 1.5rem; color: var(--tinta-suave); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.seccion { font-size: 1.05rem; margin: 1.75rem 0 .75rem; }
.seccion.es-primero { margin-top: 0; }
.migas { margin: 0 0 1rem; font-size: .88rem; }
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: var(--acento); }

.ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: .1rem .45rem;
}

.pestanas { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--borde); margin-bottom: 1.5rem; }

.pestana {
    padding: .6rem .95rem;
    color: var(--tinta-suave);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pestana:hover { color: var(--tinta); }
.pestana.es-activa { color: var(--acento); border-bottom-color: var(--acento); }

.tabla-envoltorio {
    /* La tabla se desplaza DENTRO de su caja: un correo largo no puede empujar
       la página entera a lo ancho en el móvil. */
    overflow-x: auto;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: var(--sombra);
}

.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }

.tabla th {
    text-align: left;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-suave);
    font-weight: 600;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: none; }
.derecha { text-align: right; }
.tenue { color: var(--tinta-suave); }
.tabla .nota.pequena { margin-top: .15rem; }

.tarjeta.es-vacia { text-align: center; padding: 2.5rem 1.5rem; }
.tarjeta { background: var(--papel); border: 1px solid var(--borde); border-radius: 14px; padding: 1.25rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.contenido .tarjeta { max-width: none; text-align: left; }

/* `.nota` nació para la puerta: 34ch y centrada, que es lo que necesita una
 * tarjeta estrecha. En el panel las tarjetas son anchas y el texto va a la
 * izquierda, así que ese mismo párrafo quedaba flotando en el medio, sin
 * alinearse con nada. Aquí se pega al borde y se le da la medida en la que un
 * párrafo se lee sin perder el renglón. */
.contenido .nota {
    margin-inline: 0;
    max-width: 62ch;
    line-height: 1.55;
}

/* Debajo del título de una sección, el párrafo que la explica necesita aire
 * antes del formulario — si no, el texto y el primer campo se leen como una
 * sola cosa. */
.contenido .seccion + .nota { margin-bottom: 1.25rem; }

/* La fila de «Entrada»: etiqueta, campo y botón en una línea que se parte sola
 * en pantallas estrechas, y el campo llevándose el espacio sobrante en vez de
 * quedarse del ancho por defecto de un `input`. */
.ajuste .campo-etiqueta { flex: 0 0 auto; }
.ajuste .campo-texto { flex: 1 1 22rem; max-width: 34rem; }

.buscador { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.buscador .campo-texto { max-width: 26rem; }

.campo-texto {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: .55rem .8rem;
    font: inherit;
    font-size: .9rem;
    background: var(--papel);
    color: var(--tinta);
}

.campo-texto:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }

.boton-secundario {
    border: 1px solid var(--borde);
    background: var(--papel);
    color: var(--tinta);
    border-radius: 12px;
    padding: .55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    min-height: 40px;
    cursor: pointer;
    white-space: nowrap;
}

.boton-secundario:hover { border-color: var(--acento); color: var(--acento); }

/* En una fila de acciones los botones NO se estiran. */
.ajuste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.ajuste .boton, .ajuste .boton-secundario, .formulario .boton { width: auto; max-width: none; margin: 0; }
.ajuste select, .formulario select { border: 1px solid var(--borde); border-radius: 10px; padding: .55rem .7rem; font: inherit; background: var(--papel); color: var(--tinta); }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .9rem; margin-bottom: 1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo-etiqueta { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }

.fila-config { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acciones-app { display: flex; gap: .5rem; flex-wrap: wrap; }
.en-linea { display: inline; }

.enlace-boton {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--tinta-suave);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    text-decoration: underline;
}

.enlace-boton:hover { color: #dc2626; }

.marca-jefe {
    margin-left: .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acento) 16%, transparent);
    color: var(--acento);
}

.marca-estado {
    margin-left: .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, #d97706 16%, transparent);
    color: #b45309;
}

@media (prefers-color-scheme: dark) { .marca-estado { color: #fbbf24; } }

.aviso {
    margin: 0 0 1.25rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    font-size: .89rem;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    color: var(--acento);
    border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
}

.tarjeta.es-secreto { border-color: var(--acento); }

.secreto {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    word-break: break-all;
    background: var(--fondo);
    border: 1px dashed var(--borde);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin: .5rem 0 0;
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--fondo); border: 1px solid var(--borde); border-radius: 5px; padding: .05rem .35rem; }

/* ── La entrada por correo, en la puerta ────────────────────────────────
 *
 * Clase propia —`formulario-puerta`— y no la `.formulario` del panel: aquella
 * es una rejilla de campos para el equipo, y esta es una sola casilla para
 * alguien que quiere entrar. Compartir la clase habría hecho que un retoque en
 * el panel moviera la puerta, que es justo la deriva que esta hoja evita.
 */

.separador {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    max-width: 20rem;
    margin: 1.4rem auto 1.2rem;
    color: var(--tinta-suave);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Las dos rayas se dibujan con pseudoelementos: una imagen o dos `<span>`
 * vacíos serían dos cosas más que mantener para una línea. */
.separador::before,
.separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde);
}

.formulario-puerta {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
    text-align: left;
}

.formulario-puerta label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.formulario-puerta input {
    width: 100%;
    min-height: 44px;          /* el mismo dedo que pulsa el botón escribe aquí */
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: .7rem .9rem;
    font: inherit;
    font-size: .95rem;
    background: var(--papel);
    color: var(--tinta);
}

.formulario-puerta input:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

/* La clave de seis cifras, en monoespaciada y separada: es lo único de esta
 * pantalla que se copia carácter a carácter desde otra pantalla, y un `0` que
 * se puede confundir con una `O` es un intento perdido de los cinco que hay. */
.formulario-puerta input#clave {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: .35em;
    text-align: center;
    padding-left: 1.2rem;      /* compensa el `letter-spacing` del último dígito */
}

.boton.es-ancho { width: 100%; max-width: 20rem; }

.formulario-puerta + .nota { margin-top: 1.1rem; }

/* ── El retrato en el panel ─────────────────────────────────────────────
 *
 * Modificadores del `.retrato` de siempre, NO una clase nueva: en la pantalla
 * de «Mi cuenta» ese retrato va grande y centrado, y aquí va pequeño y en
 * línea. Copiar la regla para cambiarle dos valores es exactamente la deriva
 * que costó una ronda de arreglos en GastroSquad — ocho pantallas que nacieron
 * copiando el CSS de su vecina.
 *
 * El hueco de «sin foto» no es adorno y se usa mucho: **quien entra por correo
 * no trae ninguna**, porque detrás de un enlace no hay perfil que consultar.
 * Sin repuesto, media tabla serían iconos rotos.
 */

.retrato.es-vacio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
}

.retrato.es-pequeno {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-block;
    margin: 0 .5rem 0 0;
    border-width: 1px;
    vertical-align: middle;
}

.retrato.es-pequeno.es-vacio { display: inline-flex; font-size: .85rem; }

.cabecera-persona {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

/* Dentro de la cabecera manda el flex, así que el margen automático del
 * retrato centrado sobra. */
.cabecera-persona .retrato { margin: 0; }

.titulo.es-pegado { margin: 0 0 .15rem; }
.persona-nombre { vertical-align: middle; }

/* El correo, alineado con el nombre y no con el borde de la celda: colgando
 * del borde, la columna se lee como dos listas desalineadas. */
.celda-persona .nota.es-sangrada { margin-left: 2.25rem; }

.proveedor.es-suave { font-weight: 500; color: var(--tinta-suave); }

/* ── El lanzador: las herramientas de la casa ───────────────────────────
 *
 * Una rejilla que se adapta sola en vez de columnas fijas: aquí hay tres
 * aplicaciones y mañana puede haber siete, y una rejilla con un número escrito
 * a mano es una que hay que acordarse de cambiar el día que entre la cuarta.
 */

.herramientas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    gap: .7rem;
}

.herramienta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .9rem .7rem;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fondo) 60%, transparent);
    text-decoration: none;
    color: var(--tinta);
    text-align: center;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.herramienta:hover {
    transform: translateY(-1px);
    border-color: var(--acento);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

.herramienta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* La que ya usa, marcada por el borde y no por el color del texto: el color
 * solo no lo distingue quien no lo ve. */
.herramienta.la-usa { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }

.herramienta-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
}

.herramienta-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Sin logotipo, la inicial. Se lee; un hueco, no. */
.herramienta-marca.es-vacia {
    border-radius: 12px;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    color: var(--acento);
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.herramienta-nombre { font-weight: 600; font-size: .92rem; line-height: 1.2; }

.herramienta-nota {
    font-size: .72rem;
    color: var(--tinta-suave);
    line-height: 1.3;
}

.herramienta-nota.es-invitacion { color: var(--acento); }

/* ── Las páginas de texto, y el paso del permiso ────────────────────────
 *
 * Se leen, no se ojean. Medida de línea más corta que la pantalla y párrafos
 * con aire: un texto legal a lo ancho de un monitor es un texto que nadie
 * termina — y una autorización sobre algo que no se leyó es una autorización
 * de mentira aunque tenga el botón pulsado.
 */

.tarjeta.es-legal {
    max-width: 42rem;
    text-align: left;
}

.tarjeta.es-legal h1,
.tarjeta.es-legal .lema { text-align: left; }
.tarjeta.es-legal .lema { color: var(--tinta-suave); font-size: .85rem; }

.parrafo {
    margin: 0 0 .8rem;
    line-height: 1.65;
    font-size: .95rem;
    max-width: 34rem;      /* ~70 caracteres: la medida en la que se lee sin perder el renglón */
}

.tarjeta.es-legal .nota { margin-inline: 0; max-width: 34rem; text-align: left; }
.tarjeta.es-legal .lista li { align-items: flex-start; }

/* El resumen del permiso, en la pantalla y no solo detrás de un enlace. */
.resumen-permiso {
    margin: 1.1rem 0;
    text-align: left;
}

.resumen-permiso .lista li { align-items: flex-start; }
.resumen-permiso .detalle { color: var(--tinta-suave); }

/* «No acepto» tiene que estar a la vista y no parecer el camino bueno: si la
 * única salida fuera cerrar la pestaña, aceptar no sería una decisión.
 *
 * Reusa el `.enlace-boton` del panel con un modificador, sin redefinirlo: allá
 * el rojo al pasar por encima significa «esto quita algo» y aquí no quita nada.
 * Pisarlo habría cambiado el aviso de la otra pantalla sin que nadie lo pidiera
 * — que es exactamente lo que pasó al escribir esto la primera vez. */
.enlace-boton.es-centrado {
    margin-left: 0;
    padding: 0;
}

.enlace-boton.es-centrado:hover { color: var(--acento); }

.formulario-puerta.es-pegada { margin-top: .8rem; align-items: center; }

/* ── El permiso para una IA: «ChatGPT quiere usar tu Presupeso» ──────────
 *
 * La misma tarjeta de la puerta, con una sola cosa nueva arriba: la pareja de
 * insignias —tu IA ↔ tu aplicación— que cuenta qué va a pasar antes de leer.
 * El resto reusa lo de siempre (`.lema`, `.formulario-puerta`, `.boton`).
 */

.tarjeta.es-permiso { max-width: 28rem; }

.pareja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    color: var(--tinta-suave);
}

.insignia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 16px;
    font-family: Outfit, Inter, sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    border: 1px solid var(--borde);
    background: var(--papel);
    color: var(--tinta);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.insignia.es-app {
    background: color-mix(in srgb, var(--acento) 12%, var(--papel));
    color: var(--acento);
    border-color: color-mix(in srgb, var(--acento) 30%, var(--borde));
}

.insignia.con-logo { background: var(--papel); padding: .45rem; }
.insignia.con-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.puente { display: inline-flex; }

.titulo-permiso {
    font-size: 1.55rem;
    line-height: 1.25;
    /* El nombre de la app puede ser largo; que parta la línea y no la tarjeta. */
    overflow-wrap: anywhere;
}

.puntos-permiso {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    text-align: left;
}

.puntos-permiso li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .75rem .85rem;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fondo) 60%, transparent);
}

.icono-punto {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    color: var(--acento);
}

.texto-punto {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--tinta-suave);
    min-width: 0;
    overflow-wrap: anywhere;
}

.texto-punto strong { color: var(--tinta); font-weight: 600; }
.texto-punto .correo { color: var(--tinta); font-weight: 500; }

/* 48 px de alto en las decisiones: es la pantalla que más se abre desde el
 * teléfono, con el pulgar, y la que más cuesta repetir si el dedo falla. */
.es-alto { min-height: 48px; font-size: 1rem; }

.boton-secundario.es-ancho {
    width: 100%;
    max-width: 20rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.formulario-puerta.es-pegada .boton-secundario.es-ancho { width: 100%; }

.tarjeta.es-permiso .formulario-puerta + .nota { margin-top: 1.2rem; }

@media (max-width: 420px) {
    .tarjeta.es-permiso { padding: 1.75rem 1.1rem; }
    .titulo-permiso { font-size: 1.35rem; }
}

/* ── «Continuar con Google», el botón que más se ve ─────────────────────
 *
 * Antes era papel sobre papel: en el tema oscuro, un texto suelto. Ahora sigue
 * la guía de marca de Google (developers.google.com/identity/branding-
 * guidelines): fondo BLANCO sólido con borde #747775, texto #1F1F1F en Roboto
 * Medium y el logotipo de colores sin tocar. Blanco también en oscuro, a
 * propósito: la guía lo admite y es lo que lo hace el botón más visible de la
 * pantalla en los dos temas. Contraste del texto: 16:1.
 *
 * Va al final de la hoja para pisar la regla compartida con `.boton` de
 * arriba sin tocarla.
 */
.boton-google {
    width: 100%;
    max-width: 20rem;
    min-height: 48px;
    padding: .7rem 1.2rem;
    gap: .75rem;
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #747775;
    border-radius: 12px;
    font-family: Roboto, Inter, system-ui, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.boton-google:hover { background: #f2f2f2; }
.boton-google svg { flex: 0 0 auto; }

/* El segundo nivel: el correo. Tono suave con borde, nunca el azul sólido de
 * la acción principal — así Google y el correo no compiten. Contraste del
 * texto: 4,7:1 en claro y más de 6:1 en oscuro. */
.boton-suave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 44px;
    padding: .7rem 1.2rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
    background: color-mix(in srgb, var(--acento) 8%, var(--papel));
    color: var(--acento);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.boton-suave:hover {
    background: color-mix(in srgb, var(--acento) 14%, var(--papel));
    border-color: var(--acento);
}

.boton-suave:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton-suave.es-ancho { width: 100%; max-width: 20rem; }

/* El enlace a la entrada de revisión: está, pero no llama. */
.enlace-discreto { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 2px; }
.enlace-discreto:hover { color: var(--acento); }

/* El azul de la acción principal, legible en oscuro. En oscuro `--acento` se
 * aclara (#60a5fa) para que los enlaces se lean sobre fondo negro, y el texto
 * blanco encima de ese azul claro se quedaba en 2,5:1 — por debajo de WCAG AA.
 * El botón conserva el azul de siempre (#2563eb): blanco sobre él es 5,2:1. */
@media (prefers-color-scheme: dark) {
    .boton { background: #2563eb; }
    .boton:hover { background: #1d4ed8; }
}

/* «Cancelar» y los demás secundarios anchos: el borde se ve también en oscuro,
 * donde `--borde` casi se funde con el papel. */
.boton-secundario.es-ancho { border-color: color-mix(in srgb, var(--tinta-suave) 45%, var(--borde)); }

/* ── Aplicaciones: su cara (nombre, logotipos) ──────────────────────────
 * Se ve el logotipo tal como lo verá la gente, y si falta, la letra en su
 * cuadro con «Sin logotipo» al lado, para que no pase desapercibido. */
.app-cabeza { display: flex; align-items: center; gap: .65rem; }
.app-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: 0 0 auto; }
.app-logo.es-letra { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
img.app-logo.para-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
    img.app-logo.para-claro { display: none; }
    img.app-logo.para-oscuro { display: block; }
}
.presentacion { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: .75rem; }
.presentacion summary {
    cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; border: 1px solid var(--borde); border-radius: 10px; color: var(--acento);
    list-style: none;
}
.presentacion summary::-webkit-details-marker { display: none; }
.presentacion summary::after { content: ""; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.presentacion[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.presentacion summary:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.presentacion summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.presentacion .presentacion-cerrar, .presentacion[open] .presentacion-abrir { display: none; }
.presentacion[open] .presentacion-cerrar { display: inline; }
.presentacion[open] summary { margin-bottom: .75rem; }
.muestras-logo { display: flex; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.muestra { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--borde); font-size: .8rem; }
.muestra img { width: 64px; height: 64px; object-fit: contain; }
.muestra.es-clara { background: #ffffff; color: #334155; }
.muestra.es-oscura { background: #0b1220; color: #cbd5e1; }