/*
 * ==========================================================================
 *  LAS PÁGINAS DEL JUEGO: la portada, crear el personaje, el mapa, terrenos
 * ==========================================================================
 *
 * Las piezas salen de `unc_ui.css` (`.j-contador`, `.j-insignia`, `.j-precio`,
 * `.j-redondo`…); acá está cómo se acomodan en cada página. Mismo lenguaje que
 * la casa: fondo índigo (o arena de día), piezas redondas con canto, títulos
 * y números con la letra del juego.
 */

/* ------------------------------------------------------------ comunes */

/* El sello de arriba del título: una pastilla mandarina chiquita. */
.unc-sello {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    height: 26px;
    margin: 0 0 var(--e-2);
    padding: 0 10px;
    border-radius: var(--r-full);
    background: var(--acento-tinte);
    color: var(--acento-texto);
    font: 600 var(--t-1-size)/1 var(--f-juego);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * ==========================================================================
 *  LA CABECERA DE UNA PANTALLA DE MAPA: UNA BANDA, NO UN ENCABEZADO
 * ==========================================================================
 *
 * Medido en `/mundo` a 1366 × 768: esta cabecera medía 109 px y, con la tira
 * del dueño debajo, el bloque de arriba se llevaba 190 de los 646 que tiene la
 * página. El 29 % de la pantalla para un rótulo, un título y dos pastillas,
 * mientras al mapa —que es para lo que existe la pantalla— le quedaban 426.
 *
 * La culpa no era del contenido sino de la FORMA: el rótulo, el título y los
 * datos estaban apilados en una columna, cada uno con su margen, y el título
 * iba en `--t-7` (36 px) con su propio renglón.
 *
 * Ahora es una sola fila: rótulo · título · datos, y el botón principal a la
 * derecha. Se lee igual, dice lo mismo y mide 48. En pantalla angosta la fila
 * se parte sola con `flex-wrap`, que es el comportamiento correcto ahí.
 */
.unc-hub-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e-3);
}

.unc-hub-cabecera > div { min-width: 0; }

.unc-hub-titulos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    flex: 1 1 22rem;
    min-width: 0;
}

.unc-hub-cabecera h1 {
    margin: 0;
    font: 600 var(--t-6-size)/1.1 var(--f-juego);
    letter-spacing: -.015em;
    color: var(--carbon);
}

/* En la fila, el rótulo es la etiqueta de la izquierda y ya no lleva el
   margen de abajo que lo separaba del título cuando estaban apilados. */
.unc-hub-titulos .unc-sello { margin: 0; }

.unc-hub-cabecera .ayuda { margin: 0; max-width: var(--ancho-prosa); }

/* La hora, el clima y los conectados, como piezas del HUD. */
.unc-hub-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin: 0 !important;
    max-width: none !important;
}

/*
 * En una pantalla angosta la fila se parte, y ahí el título vuelve a mandar:
 * ocupa su renglón entero y los datos caen debajo. Es la misma pieza cambiando
 * de densidad, no otra cabecera.
 */
@media (max-width: 768px) {
    .unc-hub-titulos { flex: 1 1 100%; }
    .unc-hub-cabecera h1 { flex: 1 1 100%; }
}

.unc-hub-datos .j-contador small {
    font: 600 var(--t-2-size)/1 var(--f-texto);
    color: var(--carbon-2);
}

.unc-reloj { padding-left: var(--e-3); }

/* El aire de arriba era `--e-6` (32 px en un monitor): entre dos secciones
   seguidas de una columna que ya se desplaza, eso es media ficha perdida por
   sección. `--e-4` separa igual de bien y no cobra peaje. */
.unc-seccion-titulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: var(--e-4) 0 var(--e-2);
    font: 600 var(--t-5-size)/1.2 var(--f-juego);
    color: var(--carbon);
}

.unc-seccion-ficha {
    margin-top: var(--e-4);
    padding: var(--e-3);
    background: var(--sup-1);
    border: 1px solid var(--filo-fuerte);
    border-radius: var(--r-4);
    box-shadow: var(--s-tarjeta), var(--luz-arriba);
}

.unc-seccion-ficha > .unc-seccion-titulo:first-child { margin-top: 0; }

.unc-seccion-ficha h2 {
    margin: 0 0 var(--e-2);
    font: 600 var(--t-5-size)/1.2 var(--f-juego);
    color: var(--carbon);
}

.unc-i {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.unc-cara {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    background: var(--sup-2);
    image-rendering: pixelated;
}

.unc-visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.unc-vacio {
    margin: 0;
    color: var(--carbon-3);
    font-size: var(--t-3-size);
}

/* ------------------------------------------------------------ la portada */

.unc-portada { display: block; padding-top: var(--e-3); }

/*
 * ==========================================================================
 *  LA PORTADA SE PLANTA EN LA VENTANA
 * ==========================================================================
 *
 * El panorama medía `68dvh` con tope de 40rem: en una notebook de 768 daba
 * 522 px y abajo quedaban 80 de nada —ni contenido ni respiro, el hueco entre
 * un alto adivinado y el que había—. En un monitor de 1080 el tope de 640 px
 * dejaba 200 vacíos.
 *
 * Es el mismo problema que ya tenía el tablero del mapa y se arregla igual:
 * la página se planta en lo que hay y el panorama se queda con el resto. Nadie
 * calcula un alto; lo descuenta el flex, así que la tira del dueño —que está
 * sólo para el administrador— no rompe la cuenta.
 *
 * Con `min-height` en 20rem queda el piso: por debajo de eso la casa deja de
 * verse y conviene que la página ruede, que es lo que pasa en un teléfono.
 */
@media (min-width: 900px) and (min-height: 600px) {
    .hoja.unc-portada {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: calc(var(--alto-contenido) - var(--aire-pagina) - var(--aire-pagina-abajo));
    }

    .unc-portada > .unc-hero {
        flex: 1 1 auto;
        min-height: 20rem;
    }
}

/*
 * EL PANORAMA. El lienzo del motor ocupa toda la caja; el velo oscurece sólo
 * el costado del texto (a la izquierda en la PC, abajo en el teléfono) para
 * que la casa y el correntino se vean enteros.
 */
.unc-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* `dvh`: en el teléfono `vh` no descuenta la barra del navegador y el
       panorama tapaba lo que va abajo. Ver `unc_responsive.css`. */
    /*
     * EL PISO ES 14rem Y NO 22, Y NO ES PARA QUE SE VEA CHICO.
     *
     * En una computadora el panorama ya no depende de este número: la portada
     * se planta en la ventana y el panorama se queda con lo que sobra (ver más
     * arriba). Acá el piso sólo manda donde ESA regla no corre, que es
     * justamente donde 22rem hacía daño: un teléfono acostado tiene 300 px de
     * alto útil, y un piso de 352 lo obliga a desplazarse por 52 píxeles.
     */
    min-height: clamp(14rem, 62vh, 40rem);
    min-height: clamp(14rem, 62dvh, 40rem);
    padding: var(--e-6) var(--e-7);
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 70% 60%, rgb(255 138 61 / .10), transparent 70%),
        linear-gradient(180deg, #221a47, #140f29);
    border: 1px solid var(--filo-fuerte);
    border-radius: var(--r-4);
    box-shadow: var(--s-tarjeta-alta), var(--luz-arriba);
}

:root[data-theme="light"] .unc-hero {
    background:
        radial-gradient(70% 90% at 70% 60%, rgb(255 255 255 / .6), transparent 70%),
        linear-gradient(180deg, #bfe6ef, #ffe7c7);
}

/*
 * El cielo del panorama: `unc_pintor.js` lo lee de estas variables del lienzo
 * (las mismas que la sala en `juego.css`). Sin ellas pintaba sobre
 * transparente y, de noche con las luces prendidas, el resplandor de la
 * lámpara quedaba como una mancha gris.
 */
.unc-hero-lienzo {
    --unc-cielo-arriba: #2a2152;
    --unc-cielo-abajo: #0f0b21;
    --unc-cielo-calido: rgba(255, 138, 61, 0.20);
    --unc-cielo-frio: rgba(69, 200, 220, 0.12);
    --unc-cielo-piso: rgba(138, 120, 214, 0.26);
    --unc-suelo-sombra: rgba(6, 3, 18, 0.60);

    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

:root[data-theme="light"] .unc-hero-lienzo {
    --unc-cielo-arriba: #fff4e3;
    --unc-cielo-abajo: #efd7b8;
    --unc-cielo-calido: rgba(255, 154, 82, 0.26);
    --unc-cielo-frio: rgba(15, 138, 160, 0.14);
    --unc-cielo-piso: rgba(255, 255, 255, 0.70);
    --unc-suelo-sombra: rgba(92, 58, 30, 0.26);
}

.unc-hero-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgb(20 15 41 / .92) 0%, rgb(20 15 41 / .78) 30%, rgb(20 15 41 / 0) 55%);
    pointer-events: none;
}

:root[data-theme="light"] .unc-hero-velo {
    background:
        linear-gradient(90deg, rgb(255 249 240 / .95) 0%, rgb(255 249 240 / .82) 30%, rgb(255 249 240 / 0) 55%);
}

/* La hora de Corrientes: una pastilla del HUD arriba a la derecha. */
.unc-hero-cielo {
    position: absolute;
    top: var(--e-4);
    right: var(--e-4);
    z-index: 2;
    display: flex;
    gap: var(--e-2);
    align-items: center;
    height: 40px;
    padding: 0 var(--e-4);
    background: var(--sup-1);
    border: 1px solid var(--filo-fuerte);
    border-radius: var(--r-full);
    box-shadow: 0 3px 0 var(--canto), var(--luz-arriba);
    font-size: var(--t-2-size);
    color: var(--carbon-2);
}

.unc-hero-hora {
    font: 600 var(--t-4-size)/1 var(--f-numero);
    font-variant-numeric: tabular-nums;
    color: var(--carbon);
}

.unc-hero-clima { color: var(--carbon-2); font-weight: 600; }

.unc-hero-texto {
    position: relative;
    z-index: 2;
    max-width: 34rem;
    animation: j-sube var(--dur-3) var(--curva) both;
}

/*
 * EL TÍTULO DE LA PORTADA BAJÓ DE 57 A 41 PX.
 *
 * «Tu casa en Corrientes» a 57 px son dos renglones de 57, o sea 114 px —el
 * 15 % de una notebook— para una frase que se entiende igual en 41 y que
 * además compite con el dibujo de la casa, que es lo que de verdad vende la
 * pantalla. Sigue siendo, por lejos, la letra más grande del sitio.
 */
.unc-hero-titulo {
    margin: var(--e-1) 0 var(--e-2);
    font: 700 clamp(1.9rem, 3.1vw, 2.6rem)/1.02 var(--f-juego);
    letter-spacing: -.02em;
    color: var(--carbon);
    text-shadow: 0 3px 0 rgb(var(--sombra-tinta) / .35);
}

.unc-hero-bajada {
    margin: 0 0 var(--e-5);
    max-width: 30rem;
    font-size: var(--t-4-size);
    line-height: 1.45;
    color: var(--carbon-2);
}

/* Las cifras: pastillas del HUD con su icono de color. */
.unc-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin: 0 0 var(--e-5);
    padding: 0;
    list-style: none;
}

.unc-cifras .j-contador { height: 40px; }
.unc-cifras .j-contador b { font-weight: 600; }

.unc-cifra-rotulo {
    font: 600 var(--t-2-size)/1 var(--f-texto);
    color: var(--carbon-2);
}

.unc-hero-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/*
 * (18/10) LA TIENDA DE SIXTOL EN LA PORTADA: un renglón dorado debajo de los botones grandes (la moneda, qué es y
 * «Comprar ›»), y el «+» al lado de la plata, como en la barra del juego (`.sx-mas`, sixtol.css).
 */
.unc-tienda {
    display: flex; align-items: center; gap: var(--e-3);
    width: fit-content; max-width: 100%; margin-top: var(--e-4); min-height: 52px;
    padding: var(--e-2) var(--e-3) var(--e-2) var(--e-2);
    border: 1px solid color-mix(in srgb, var(--sol, #ffd05a) 55%, transparent); border-radius: var(--r-full);
    background: color-mix(in srgb, var(--sol, #ffd05a) 12%, var(--sup-1));
    color: var(--carbon); text-decoration: none;
    box-shadow: 0 3px 0 var(--canto), var(--luz-arriba);
    transition: transform var(--dur-1, .12s) ease, border-color var(--dur-1, .12s) ease;
}
.unc-tienda:hover, .unc-tienda:focus-visible { transform: translateY(-2px); border-color: var(--sol, #ffd05a); text-decoration: none; }
.unc-tienda:focus-visible { outline: 3px solid var(--sol, #ffd05a); outline-offset: 2px; }
.unc-tienda-moneda {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-full);
    background: var(--sol, #ffd05a); color: #3d2600;
}
.unc-tienda-textos { display: grid; gap: 1px; min-width: 0; }
.unc-tienda-textos b { font: 700 var(--t-3-size)/1.2 var(--f-texto); }
.unc-tienda-textos small { color: var(--carbon-2); font-size: var(--t-1-size); line-height: 1.3; }
.unc-tienda-ir {
    flex: none; padding: 6px 12px; border-radius: var(--r-full);
    background: var(--sol, #ffd05a); color: #3d2600; font: 800 var(--t-2-size)/1 var(--f-texto); white-space: nowrap;
}
/* La portada no carga sixtol.css: el «+» lleva su forma acá (la misma que `.sx-mas` del juego). */
.unc-cifra-mas {
    display: inline-grid; place-items: center; flex: none;
    width: 22px; height: 22px; margin: 0 -4px 0 2px; border-radius: var(--r-full);
    background: var(--sol, #ffd05a); color: #3d2600; font: 900 16px/1 var(--f-texto); text-decoration: none;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--sol, #ffd05a) 55%, #000);
}
.unc-cifra-mas:hover, .unc-cifra-mas:focus-visible { filter: brightness(1.1); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .unc-tienda { transition: none; }
    .unc-tienda:hover, .unc-tienda:focus-visible { transform: none; }
}

/* «Entrar a mi casa»: el botón más grande del sitio, con un brillo. */
.unc-jugar {
    min-width: 15rem;
    font-size: var(--t-5-size);
    /* El fondo de `.btn-1` es SÓLO un degradé (`--grad-luz`): donde no se
       pinta —la foto del panel del dueño, un navegador viejo— el botón
       quedaba transparente, con la letra marrón sobre el cielo oscuro, y no se
       veía. El naranja liso abajo lo deja siempre a la vista. */
    background-color: var(--p-mandarina, #ff7a26);
    box-shadow: 0 4px 0 var(--canto-acento), var(--brillo), var(--luz-arriba);
}

.unc-jugar .unc-i { width: 24px; height: 24px; }

.unc-hero-botones .unc-i { width: 22px; height: 22px; }

/* Cuántos hay conectados: abajo a la derecha, sobre el panorama. */
.unc-hero-gente {
    position: absolute;
    right: var(--e-4);
    bottom: var(--e-4);
    z-index: 2;
    margin: 0;
    height: 40px;
}

.unc-hero-gente span:last-child {
    font: 600 var(--t-2-size)/1 var(--f-texto);
    color: var(--carbon-2);
}

/* Acá vivían `.unc-teja*`, las tres fichas grandes de la portada. Se fueron
   con las tejas: eran los mismos tres destinos que ya están en el panorama y
   en la barra de arriba. Setenta líneas de estilo para nueve enlaces
   repetidos. Ver la nota en `Vistas/bienvenida.php`. */

/*
 * APILAR EL PANORAMA PIDE ALTO, NO SÓLO POCO ANCHO.
 *
 * Esta regla miraba únicamente el ancho, así que un teléfono ACOSTADO
 * —844 × 390, que de ancho tiene de sobra— también recibía el diseño apilado:
 * el hueco para ver la casa arriba y el texto abajo, en 390 px de alto. Medido:
 * la portada se salía 183 px y el botón de entrar quedaba abajo del borde.
 *
 * Con el `min-height` en el corte, una pantalla baja y ancha se queda con la
 * composición de dos costados, que es la que le sirve: el texto a la izquierda
 * y la casa a la derecha.
 */
@media (max-width: 899px) and (min-height: 560px) {
    /* En la tableta y el teléfono: el dibujo arriba, el texto abajo. */
    .unc-hero {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        min-height: 0;
        /* Mismo criterio que el corte de abajo: el hueco para ver la casa pide
           17rem donde hay alto y cede donde no. En una tableta de 1024 no
           cambia nada; en un teléfono acostado evita que el texto arranque
           debajo del borde. */
        padding: min(17rem, 34dvh) var(--e-5) var(--e-5);
    }

    .unc-hero-velo,
    :root[data-theme="light"] .unc-hero-velo {
        background: linear-gradient(0deg, var(--sup-1) 0%, var(--sup-1) 45%, transparent 72%);
    }

    .unc-hero-texto { max-width: none; }

    .unc-hero-gente {
        position: absolute;
        top: var(--e-4);
        bottom: auto;
        left: var(--e-4);
        right: auto;
    }
}

@media (max-width: 40rem) and (min-height: 560px) {
    .unc-portada { padding-top: var(--e-2); }

    /*
     * EL HUECO DE ARRIBA ES PARA VER LA CASA, Y AHORA MIDE LO QUE HAY.
     *
     * Eran `13rem` clavados —208 px— en un teléfono de 667 px de alto, donde
     * el panorama entero tiene que entrar en unos 560. Medido en un 375 × 667:
     * la portada se salía 261 px por abajo y el botón «Entrar a mi casa»
     * quedaba fuera de la pantalla.
     *
     * Con `min()` el hueco pide 13rem donde sobra alto y baja a un tercio de
     * la pantalla donde no: en un 375 × 667 son 186 px de casa a la vista, que
     * sigue siendo el dibujo entero, y el botón entra.
     */
    .unc-hero {
        padding: min(13rem, 28dvh) var(--e-4) var(--e-4);
        border-radius: var(--r-3);
    }

    .unc-hero-titulo { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
    .unc-hero-bajada { font-size: var(--t-2-size); margin-bottom: var(--e-3); }
    .unc-hero-botones > * { flex: 1 1 100%; }
    .unc-jugar { min-width: 0; }
    /*
     * LAS TRES CIFRAS, A LA VISTA ENTERAS.
     *
     * Antes iban en una tira que se corría de costado con el borde esfumado:
     * en un teléfono de 392 px «en el bolsillo» quedaba cortado al medio y
     * «visitas» directamente fuera de la pantalla, y nadie sabe que una tira
     * se desliza si no se lo dicen. El dueño lo pidió: que se vea todo.
     *
     * Ahora cada pastilla pone el rótulo DEBAJO del número (la mitad de
     * ancho que «1.101 sixtol en el bolsillo» en un renglón) y, si igual no
     * entran, la que sobra baja de renglón en vez de esconderse. `flex: 1`
     * las estira para que el renglón quede parejo de borde a borde.
     */
    .unc-cifras {
        gap: 6px;
        margin-bottom: var(--e-3);
    }

    .unc-cifras > * { flex: 1 1 auto; }

    .unc-cifras .j-contador {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 6px;
        row-gap: 2px;
        align-content: center;
        height: 44px;
        padding: 0 12px 0 6px;
    }

    .unc-cifras .j-contador__icono { grid-row: 1 / 3; }
    .unc-cifras .j-contador b { font-size: var(--t-3-size); line-height: 1; }
    .unc-cifras .unc-cifra-rotulo { font-size: 11px; line-height: 1; }
    /*
     * (19/10) EL «+» DE LA PLATA, ADENTRO DE SU PASTILLA. La grilla de arriba
     * tiene dos columnas (icono | número y rótulo): el «+» no tenía lugar y
     * caía solo a un TERCER renglón, abajo del icono, saliéndose de la
     * pastilla de 44 px (el dueño lo vio en el celu). Ahora la de la plata
     * tiene una tercera columna a la derecha para el «+», centrado en alto.
     */
    .unc-cifras .j-contador--plata { grid-template-columns: auto 1fr auto; padding-right: 8px; }
    .unc-cifras .unc-cifra-mas { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0 0 0 4px; }
    .unc-hero-cielo { top: var(--e-3); right: var(--e-3); height: 36px; padding: 0 var(--e-3); }
    .unc-hero-gente { top: var(--e-3); left: var(--e-3); height: 36px; }
    .unc-hero-gente span:last-child { display: none; }
}

/* ------------------------------------------------------------ crear el personaje */

.unc-crear-pagina { display: block; }

.unc-crear {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    max-width: 66rem;
    margin: 0 auto;
    background: var(--sup-1);
    border: 1px solid var(--filo-fuerte);
    border-radius: var(--r-4);
    box-shadow: var(--s-tarjeta-alta), var(--luz-arriba);
    overflow: hidden;
}

/* El escenario de la izquierda: cielo, baldosa y el personaje grande. */
.unc-crear-escena {
    position: relative;
    display: grid;
    place-items: center;
    align-content: end;
    min-height: 32rem;
    padding: var(--e-6) var(--e-4) var(--e-5);
    background:
        radial-gradient(60% 45% at 50% 78%, rgb(255 138 61 / .28), transparent 70%),
        radial-gradient(2px 2px at 20% 20%, rgb(255 244 228 / .7), transparent 60%),
        radial-gradient(1.5px 1.5px at 72% 14%, rgb(255 244 228 / .6), transparent 60%),
        radial-gradient(1.5px 1.5px at 84% 38%, rgb(255 244 228 / .5), transparent 60%),
        linear-gradient(180deg, #221a47 0%, #3a2c66 70%, #4c3670 100%);
}

:root[data-theme="light"] .unc-crear-escena {
    background:
        radial-gradient(60% 45% at 50% 78%, rgb(255 255 255 / .7), transparent 70%),
        linear-gradient(180deg, #9fd8e8 0%, #cdebf0 55%, #ffe2bd 100%);
}

.unc-crear-previa {
    --escala: 3.2;

    position: relative;
    z-index: 1;
    width: calc(120px * var(--escala));
    height: calc(112px * var(--escala));
    max-width: 100%;
    /* los pies del dibujo quedan a un tercio de la hoja del borde de abajo:
       se bajan hasta el centro de la baldosa */
    margin-bottom: -100px;
    background-image: var(--hoja);
    background-repeat: no-repeat;
    background-size: calc(960px * var(--escala)) calc(112px * var(--escala));
    background-position: calc(-120px * var(--cuadro) * var(--escala)) 0;
    image-rendering: pixelated;
}

/* La baldosa donde está parado. */
.unc-crear-baldosa {
    width: 260px;
    height: 130px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background:
        repeating-linear-gradient(26.57deg, transparent 0 30px, rgb(0 0 0 / .14) 30px 32px),
        repeating-linear-gradient(-26.57deg, transparent 0 30px, rgb(0 0 0 / .14) 30px 32px),
        linear-gradient(180deg, #8a67a0, #5e4478);
    box-shadow: 0 10px 0 #3a2a55;
}

:root[data-theme="light"] .unc-crear-baldosa {
    background:
        repeating-linear-gradient(26.57deg, transparent 0 30px, rgb(92 58 30 / .14) 30px 32px),
        repeating-linear-gradient(-26.57deg, transparent 0 30px, rgb(92 58 30 / .14) 30px 32px),
        linear-gradient(180deg, #f6d6a6, #e2b27a);
}

/* El globito va justo arriba de la cabeza: el margen negativo se come el
   aire transparente de la parte de arriba de la hoja. */
.unc-crear-globo {
    position: relative;
    z-index: 2;
    max-width: calc(100% - 32px);
    margin: 0 0 -48px;
    padding: 10px 16px;
    border-radius: var(--r-3);
    background: #fff9f0;
    color: #2e2140;
    font: 600 var(--t-4-size)/1.2 var(--f-juego);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 0 rgb(8 4 22 / .25);
}

.unc-crear-globo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.unc-crear-girar {
    display: flex;
    gap: var(--e-2);
    margin-top: var(--e-5);
}

.unc-crear-panel {
    display: grid;
    align-content: start;
    gap: var(--e-2);
    padding: clamp(var(--e-5), 3.5vw, var(--e-6));
}

.unc-crear-titulo {
    margin: 0;
    font: 600 var(--t-7-size)/1.05 var(--f-juego);
    letter-spacing: -.015em;
}

.unc-crear-panel > .ayuda { margin: 0 0 var(--e-3); }

/* El número del paso, en una ficha redonda. */
.unc-paso {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0 0 var(--e-2);
    padding: 0;
    font: 600 var(--t-4-size)/1.2 var(--f-juego);
    color: var(--carbon);
}

.unc-paso > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--grad-luz);
    color: var(--sobre-acento);
    font: 700 var(--t-2-size)/1 var(--f-numero);
    box-shadow: 0 2px 0 var(--canto-acento);
}

.unc-looks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--e-3);
    margin: var(--e-3) 0 var(--e-4);
    padding: 0;
    border: 0;
}

.unc-looks > legend { grid-column: 1 / -1; float: left; width: 100%; }

.unc-look {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    align-items: stretch;
    margin: 0;
    padding: 6px 6px var(--e-3);
    background: var(--sup-2);
    border: 2px solid transparent;
    border-radius: var(--r-3);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--canto), var(--luz-arriba);
    transition:
        transform var(--dur-2) var(--curva-rebote),
        border-color var(--dur-2) var(--curva),
        box-shadow var(--dur-2) var(--curva);
}

.unc-look input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
}

.unc-look-escena {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: calc(var(--r-3) - 6px);
    background:
        radial-gradient(70% 60% at 50% 40%, rgb(255 244 228 / .12), transparent 70%),
        linear-gradient(180deg, var(--sup-3), var(--sup-1));
}

:root[data-theme="light"] .unc-look-escena {
    background:
        radial-gradient(70% 60% at 50% 40%, #ffffff, transparent 72%),
        linear-gradient(180deg, #fff3e2, #f6e3c8);
}

.unc-look-muneco {
    width: 120px;
    height: 112px;
    max-width: 100%;
    background-image: var(--hoja);
    background-position: -360px 0;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transition: transform var(--dur-3) var(--curva-rebote);
}

.unc-look:hover .unc-look-muneco { transform: scale(1.08); }

.unc-look-nombre {
    font: 600 var(--t-2-size)/1.2 var(--f-juego);
    color: var(--carbon-2);
}

.unc-look:hover { transform: translateY(-2px); border-color: var(--trazo); }

.unc-look:has(input:checked) {
    border-color: var(--acento);
    box-shadow: 0 3px 0 var(--canto-acento), 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
    transform: translateY(-2px);
}

.unc-look:has(input:checked) .unc-look-nombre { color: var(--acento-texto); }
.unc-look:has(input:focus-visible) { box-shadow: var(--foco); }

.unc-generos {
    margin: 0 0 var(--e-4);
    padding: 0;
    border: 0;
}

.unc-generos > legend { float: left; width: 100%; }

.unc-generos-fila {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

.unc-generos .ayuda { margin: var(--e-2) 0 0; }

.unc-genero {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--h-2);
    margin: 0;
    padding: 0 var(--e-4);
    background: var(--sup-2);
    border: 2px solid transparent;
    border-radius: var(--r-full);
    color: var(--carbon-2);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--canto), var(--luz-arriba);
    transition: border-color var(--dur-2) var(--curva), background-color var(--dur-2) var(--curva), transform var(--dur-1) var(--curva);
}

.unc-genero input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
}

.unc-genero b { font: 600 var(--t-3-size)/1.2 var(--f-juego); }

.unc-genero:hover { border-color: var(--trazo); color: var(--carbon); }
.unc-genero:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--canto); }

.unc-genero:has(input:checked) {
    background: var(--acento-tinte);
    border-color: var(--acento);
    color: var(--acento-texto);
}

.unc-genero:has(input:focus-visible) { box-shadow: var(--foco); }

.unc-campo {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 var(--e-4);
}

.unc-campo input.j-campo { height: var(--h-3); max-width: none; font-size: var(--t-4-size); }

@media (max-width: 860px) {
    .unc-crear { grid-template-columns: 1fr; max-width: 36rem; }

    .unc-crear-escena { min-height: 0; padding: var(--e-6) var(--e-4) var(--e-3); }
    .unc-crear-previa { --escala: 2; margin-bottom: -68px; }
    .unc-crear-baldosa { width: 180px; height: 90px; }
    .unc-crear-globo { margin-bottom: -26px; font-size: var(--t-3-size); }
    .unc-crear-girar { position: absolute; bottom: var(--e-4); right: var(--e-4); margin: 0; flex-direction: column; }

    /* El título de «¿Quién sos en Corrientes?» apilado sobre la escena: con
       `--t-7` son dos renglones de 29 px arriba de un formulario de tres
       pasos que ya viene justo en un teléfono. */
    .unc-crear-titulo { font-size: var(--t-6-size); }
}

/*
 * EN UN TELÉFONO, EL MUÑECO CEDE ANTES QUE EL FORMULARIO.
 *
 * Medido en un 390 × 844: la escena pedía 293 px y el panel 695, o sea 988
 * para 766 de pantalla. Los dos son necesarios —hay que VER el modelo que se
 * elige— pero no valen lo mismo: el formulario es la tarea, el muñeco es la
 * confirmación de lo que se eligió.
 *
 * Así que la escena pasa a medir un cuarto de la pantalla en vez de un tercio.
 * El muñeco sigue entero: lo que se recorta es el aire de arriba, que estaba
 * puesto para que el globito de «¡Hola! Soy…» quedara centrado.
 */
@media (max-width: 560px) {
    .unc-crear-escena {
        max-height: 26dvh;
        padding-top: var(--e-4);
    }

    .unc-crear-previa { --escala: 1.7; margin-bottom: -58px; }
    .unc-crear-baldosa { width: 150px; height: 75px; }
    .unc-crear-panel { padding: var(--e-4); }
}

/* ------------------------------------------------------------ el mapa: destinos */

.unc-mapa-pagina { display: block; }

.unc-destinos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--e-2);
}

/*
 * UN DESTINO: la ficha de un lugar del mapa. Su color arriba (el icono), el
 * nombre, una línea de qué es, cuánta gente hay y el botón de ir. La casa
 * propia va en río; el lugar donde estás, con borde de monte.
 */
.unc-destino {
    --tono: var(--lapacho);
    --sobre-tono: #2a0a1c;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icono cabeza"
        "icono texto"
        "pie pie"
        "boton boton";
    /* el texto se estira: así los botones de una fila quedan alineados
       aunque un nombre ocupe dos renglones */
    grid-template-rows: auto 1fr auto auto;
    column-gap: var(--e-2);
    row-gap: 2px;
    padding: var(--e-3);
    background: var(--sup-1);
    border: 2px solid transparent;
    border-radius: var(--r-3);
    box-shadow: 0 4px 0 var(--canto), var(--luz-arriba);
    transition: transform var(--dur-2) var(--curva-rebote), border-color var(--dur-2) var(--curva);
}

.unc-destino:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tono) 45%, transparent); }

.unc-destino[data-tono="rio"], .unc-destino[data-tono="casa"] { --tono: var(--rio); --sobre-tono: #04262c; }
.unc-destino[data-tono="sol"] { --tono: var(--sol); --sobre-tono: #3d2600; }
.unc-destino[data-tono="verde"] { --tono: var(--verde); --sobre-tono: #06261a; }
.unc-destino[data-tono="acento"] { --tono: var(--acento); --sobre-tono: var(--sobre-acento); }

.unc-destino.propia { background: color-mix(in srgb, var(--rio) 9%, var(--sup-1)); }

.unc-destino.aca {
    border-color: var(--verde);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--verde) 45%, var(--canto)), 0 0 0 4px color-mix(in srgb, var(--verde) 18%, transparent);
}

.unc-destino-icono {
    grid-area: icono;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-2);
    background: var(--tono);
    color: var(--sobre-tono);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tono) 55%, #000), inset 0 1px 0 rgb(255 255 255 / .35);
}

.unc-destino-icono .unc-i { width: 20px; height: 20px; }

.unc-destino-cabeza {
    grid-area: cabeza;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--e-2);
    min-width: 0;
}

.unc-destino strong {
    font: 600 var(--t-4-size)/1.2 var(--f-juego);
    color: var(--carbon);
}

.unc-destino-texto {
    grid-area: texto;
    font-size: var(--t-2-size);
    line-height: 1.4;
    color: var(--carbon-2);
}

.unc-destino-pie {
    grid-area: pie;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin: var(--e-2) 0 var(--e-1);
    min-height: 24px;
}

.unc-destino-gente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-2-size);
    font-weight: 600;
    color: var(--carbon-3);
}

.unc-destino-gente .unc-i { width: 18px; height: 18px; }

/* Con gente: la cuenta se prende en lapacho, el color de lo social. */
.unc-destino.vivo .unc-destino-gente { color: var(--carbon); }
.unc-destino.vivo .unc-destino-gente .unc-i { color: var(--lapacho); }

.unc-destino-gente b {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--lapacho);
    color: #2a0a1c;
    font: 700 var(--t-2-size)/1 var(--f-numero);
}

.unc-destino-estado {
    font-size: var(--t-2-size);
    font-style: normal;
    font-weight: 600;
    color: var(--carbon-3);
}

.unc-destino .btn { grid-area: boton; width: 100%; }

@media (max-width: 560px) {
    .unc-destinos { grid-template-columns: 1fr; gap: var(--e-2); }

    /* En el teléfono cada destino es un renglón: el botón va a la derecha,
       así la lista de lugares no mide tres pantallas. */
    .unc-destino {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "icono cabeza boton"
            "icono texto boton"
            "pie pie pie";
        grid-template-rows: auto auto auto;
        padding: var(--e-3);
    }

    .unc-destino .btn { width: auto; min-width: 64px; align-self: center; }
    .unc-destino-pie { margin: var(--e-2) 0 0; min-height: 0; }
    .unc-destino-icono { width: 40px; height: 40px; }
    .unc-hub-cabecera > .btn-1 { width: 100%; }
}

/*
 * LOS DESTINOS DE LA COLUMNA DEL MAPA, EN RENGLONES COMPACTOS.
 *
 * Antes cada destino era una ficha alta (icono, nombre, texto, pie y un botón
 * de ancho completo, ~150 px) y en la columna lateral —que ya se desplaza
 * adentro— lo de abajo («Las casas de tus amigos») quedaba escondido. Ahora
 * es el mismo renglón que ya usaba el teléfono: icono a la izquierda, tres
 * líneas de texto y el botón a la derecha; mide la mitad y entran más.
 */
.unc-tablero-lado .unc-destinos { grid-template-columns: 1fr; gap: var(--e-1); }

.unc-tablero-lado .unc-destino {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icono cabeza boton"
        "icono texto boton"
        "icono pie boton";
    grid-template-rows: auto auto auto;
    align-items: center;
    padding: var(--e-2);
    box-shadow: 0 2px 0 var(--canto), var(--luz-arriba);
}

.unc-tablero-lado .unc-destino .btn { width: auto; min-width: 64px; align-self: center; }
.unc-tablero-lado .unc-destino-pie { margin: 0; min-height: 0; justify-content: flex-start; }
.unc-tablero-lado .unc-destino-icono { width: 34px; height: 34px; }

/* El texto largo se corta con puntos en vez de agrandar la ficha. */
.unc-tablero-lado .unc-destino-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * QUE LA COLUMNA ENTRE SIN DESPLAZARSE: SE ACHICA SEGÚN EL ALTO DE LA VENTANA.
 *
 * El dueño pidió que no haya barra: todo tiene que verse en cualquier
 * resolución. Cuanto menos alto hay, más se le saca a cada renglón, de lo
 * menos importante a lo más: primero aire y la explicación de «amigos», después
 * la descripción del destino, y al final el estado y el tamaño de los botones.
 * (La barra sigue siendo la red de seguridad si aun así no entra —una ventana
 * diminuta o muchísimos amigos—, para no dejar nada inalcanzable.)
 */
@media (min-width: 700px) and (max-height: 900px) {
    .unc-tablero-lado .unc-seccion-titulo { font-size: var(--t-4-size); margin: var(--e-1) 0; }
    .unc-tablero-lado .ayuda { display: none; }
    .unc-tablero-lado .unc-seccion-ficha { padding: var(--e-2); margin-top: var(--e-2); }
    .unc-tablero-lado .unc-destino { padding: var(--e-1) var(--e-2); }
}

@media (min-width: 700px) and (max-height: 760px) {
    .unc-tablero-lado .unc-destino-texto { display: none; }
    .unc-tablero-lado .unc-destino { grid-template-areas: "icono cabeza boton" "icono pie boton"; grid-template-rows: auto auto; }
}

@media (min-width: 700px) and (max-height: 620px) {
    .unc-tablero-lado .unc-destino-pie { display: none; }
    .unc-tablero-lado .unc-destino { grid-template-areas: "icono cabeza boton"; grid-template-rows: auto; }
    .unc-tablero-lado .unc-destino-icono { width: 28px; height: 28px; }
    .unc-tablero-lado .unc-destino .btn { min-width: 0; padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .unc-destino:hover, .unc-look:hover { transform: none; }
}