/* ==================================================================== fuentes
Merriweather para los titulos y Plus Jakarta Sans para el texto: las dos de
Google Fonts, licencia OFL.
Servidas desde /static y no desde el CDN de Google a proposito. La app promete
que no sale nada a internet, y un a fonts.gstatic.com lo desmentiria en
la primera carga; ademas asi la tipografia es la misma con y sin conexion.
Son las versiones VARIABLES -de ahi los rangos de peso en cada cara- porque aca se
usan pesos intermedios (450, 480, 550). Con archivos de peso fijo esos valores
redondearian al mas cercano y se perderia el ajuste fino.
Ojo con los rangos: no son iguales. Merriweather va de 300 a 900 -y ademas trae
un eje de ancho, de ahi el font-stretch- y Jakarta de 200 a 800; cada cara
declara lo suyo. Declarar un rango mas ancho del que la
fuente tiene no la hace mas fina ni mas negra: el navegador recorta al limite
real y la declaracion queda mintiendo.
Cada familia viene partida en latin y latin-ext con su unicode-range, tal como
los sirve Google: el navegador baja el segundo solo si la pagina lo necesita. */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300 900;
font-stretch: 87% 112%;
font-display: swap;
src: url('/static/fuentes/merriweather-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300 900;
font-stretch: 87% 112%;
font-display: swap;
src: url('/static/fuentes/merriweather-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/static/fuentes/jakarta-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/static/fuentes/jakarta-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================================
Filmina — vidrio liquido sobre negro.
Tres reglas:
1. El contenido manda. La diapositiva y el guion tienen contraste y tamaño;
todo lo demas (barras, botones) es cromo callado y translucido.
2. Nada de cajas dentro de cajas. Los controles flotan sueltos sobre el
fondo, no dentro de barras que ocupan el ancho entero.
3. Los bordes son pelos de luz, no lineas. La separacion la hace el
desenfoque y la sombra difusa, no el contraste del borde.
Hay dos temas, y ninguna regla de mas abajo sabe cual esta puesto: todo el
color vive en estas dos listas de variables y el resto de la hoja solo las
nombra. El tema claro no es el oscuro invertido: sobre blanco el vidrio no
puede ser un velo de luz (seria invisible), asi que pasa a ser una sombra
finisima, y el muneco, que sobre negro era una esfera blanca, se vuelve
negro. Ya no hay nada que elegir ni nadie que elija: el sitio y el visor
traen "oscuro" escrito en el , sin script antes de pintar y sin ajuste
de tema. La lista clara sigue aca porque la usa .invertido, que es de donde
sale el visor dibujado de la portada.
Un pedazo de pagina puede pedir el tema contrario al puesto: lo que lleve
.invertido se lleva la otra lista entera. Lo usa el sitio para dibujar el
visor, que es negro sobre la pagina blanca y blanco sobre la negra; y como se
lleva la lista COMPLETA, lo de adentro -el muneco, el vidrio del dock, el
puntero- cae solo en el tema que le toca. Las variables se heredan, asi que
la declaracion que cae sobre el elemento mismo le gana a la heredada del
:root por mas especifica que esa sea: no hay ninguna especificidad que pelear.
========================================================================= */
:root,
:root[data-tema="claro"] .invertido {
color-scheme: dark;
--fondo: #000;
--text: #f5f5f7;
--text-2: rgba(245, 245, 247, .72);
--muted: rgba(245, 245, 247, .55);
--faint: rgba(245, 245, 247, .32);
/* El mismo gris, pero macizo. Un icono de trazos que se cruzan no puede
ir en un color transparente: donde dos trazos se pisan el color se
suma y la union se ve, como una soldadura mal hecha. */
--faint-macizo: #4e4e4f;
/* Vidrio: una pelicula casi transparente. El grosor lo da el blur. */
--glass: rgba(255, 255, 255, .015);
--glass-hi: rgba(255, 255, 255, .036);
--glass-hi-2: rgba(255, 255, 255, .07);
--edge: rgba(255, 255, 255, .09);
--edge-hi: rgba(255, 255, 255, .18);
--edge-max: rgba(255, 255, 255, .55);
--halo: rgba(255, 255, 255, .06);
/* El canto superior: la unica linea nitida que tiene una lamina. */
--canto: inset 0 1px 0 rgba(255, 255, 255, .14);
--canto-hi: inset 0 1px 0 rgba(255, 255, 255, .24);
--sombra: 0 10px 34px rgba(0, 0, 0, .5);
--sombra-lg: 0 24px 70px rgba(0, 0, 0, .6);
/* Sobre negro la sombra no se ve (negro sobre negro), asi que el filo lo
dibuja solo el pelo de luz. Y tiene que aguantar el peor caso: una
diapositiva de fondo negro, donde el papel y la pared son el mismo color y
ese pelo es lo unico que las separa. Por eso va 1px entero y no medio: a
.5px el navegador lo reparte entre dos filas de pixeles y lo que queda es
la mitad de brillo, justo en el caso en que mas hace falta. */
--sombra-papel: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .2);
/* Lo opaco: la accion principal, la perilla encendida, la barra llena. */
--solido: #f5f5f7;
--solido-hi: #fff;
--sobre-solido: #000;
--sombra-solido: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .4);
--pista: rgba(255, 255, 255, .14);
--perilla-sombra: 0 1px 3px rgba(0, 0, 0, .45);
--seleccion: rgba(255, 255, 255, .22);
--foco: rgba(255, 255, 255, .75);
--scroll: rgba(235, 235, 245, .2);
--scroll-hi: rgba(235, 235, 245, .38);
/* Laminas que tapan: el panel de ajustes, el menu del desplegable, y el
plan B para el navegador que no sabe desenfocar. */
--panel: rgba(11, 11, 13, .92);
--menu: #1c1c1e;
--opaco: rgba(26, 26, 28, .94);
/* El velo que apaga el fondo cuando algo lo tapa entero. No es opaco: el
fondo tiene que seguir estando, desenfocado, o lo que hay adelante deja de
leerse como una puerta abierta sobre la pagina. */
--velo: rgba(0, 0, 0, .55);
/* El oro de la llave: el unico lugar tibio de la app, y va donde va a
proposito -esto es lo que se compra-. Es el mismo en los dos temas: el oro
no cambia de color con la luz de la pagina. */
--oro: #EFBC3E;
/* Las otras dos piezas de las laminas: el acero de la tuerca y el celeste de
la burbuja. Van al lado del oro por lo mismo: el color es del objeto y no de la
pantalla donde se apoya. */
--acero: #c9ced8;
--celeste: #b9d2e6;
/* Los tres puntos de la burbuja. Oscuros y macizos, que es lo unico que se
lee adentro de una pieza clara. */
--burbuja-punto: #57626f;
/* El profesor. */
--cara-cuerpo: radial-gradient(circle at 31% 25%,
#ffffff, #f1f2f5 34%, #ced1da 72%, #a7abb8 100%);
--cara-sombra: 0 .1em .3em rgba(0, 0, 0, .6), inset 0 -.07em .14em rgba(0, 0, 0, .16);
--cara-ojo: #0b0c10;
--cara-brillo: rgba(255, 255, 255, .6);
--cara-aura: radial-gradient(circle,
rgba(255, 255, 255, .3), rgba(255, 255, 255, .08) 44%, transparent 70%);
--cara-punto: rgba(255, 255, 255, .8);
/* La lagrima. Sobre la esfera blanca tiene que ser un azul con cuerpo: un
azul palido se pierde contra el cuerpo y deja de leerse como agua. */
--cara-lagrima: rgba(86, 148, 224, .92);
/* El puntero sobre la diapositiva. El color se elige en ajustes, asi que sale
como terna aparte: el tema pone las opacidades -que no son las mismas sobre
negro que sobre blanco- y el color elegido solo cambia el tono. */
/* Los tres colores del puntero viven aca, en un solo lugar, porque los usan
tanto el recuadro sobre la diapositiva como los puntitos de ajustes: lo que
se elige es literalmente lo que se ve. */
--tono-azul: 120, 168, 255;
--tono-amarillo: 202, 138, 4;
--tono-violeta: 150, 100, 245;
--marca-tono: var(--tono-azul);
--marca-hondo: 25, 75, 165;
--marca: 0 0 0 2px rgba(var(--marca-tono), .95),
0 0 0 7px rgba(var(--marca-tono), .18),
0 14px 38px rgba(var(--marca-hondo), .22);
/* El verde del hueco acertado. Es el segundo color que tiene la interfaz
ademas del de borrar, y esta por lo mismo que el rojo: en el hueco, lo
unico que se compara es una palabra contra otra, y decir cual de las dos es
con una palabra mas -"bien", "mal"- seria poner un cartel donde alcanza con
el color. Verde y rojo, y nada mas que ahi. */
--acierto: #a9e2b4;
--acierto-borde: rgba(120, 214, 140, .55);
/* Borrar: el otro color de toda la interfaz. */
--peligro: #ffb9b1;
--peligro-hi: #ffd6d1;
--peligro-fondo: rgba(255, 86, 74, .18);
--peligro-fondo-hi: rgba(255, 86, 74, .3);
--peligro-borde: rgba(255, 120, 110, .45);
--blur: saturate(180%) blur(40px);
--blur-sm: saturate(160%) blur(22px);
--ease: cubic-bezier(.32, .72, 0, 1);
--resorte: cubic-bezier(.22, 1.18, .36, 1);
}
/* --------------------------------------------------------------- modo claro */
/* Papel blanco y gris claro. El vidrio deja de ser luz y pasa a ser sombra: la
misma pelicula finisima, pero tintada de negro, que sobre el blanco se lee
como un gris apenas insinuado. Las sombras se aflojan (sobre blanco, una
sombra fuerte ensucia) y todo lo que estaba en blanco solido -el boton de
play, la perilla del interruptor, la barra llena- se da vuelta a negro. */
:root[data-tema="claro"],
:root:not([data-tema="claro"]) .invertido {
color-scheme: light;
--fondo: #fff;
--text: #111113;
--text-2: rgba(17, 17, 19, .74);
--muted: rgba(17, 17, 19, .56);
--faint: rgba(17, 17, 19, .38);
--faint-macizo: #a5a5a6;
--glass: rgba(0, 0, 0, .022);
--glass-hi: rgba(0, 0, 0, .042);
--glass-hi-2: rgba(0, 0, 0, .075);
--edge: rgba(0, 0, 0, .1);
--edge-hi: rgba(0, 0, 0, .2);
--edge-max: rgba(0, 0, 0, .45);
--halo: rgba(0, 0, 0, .05);
--canto: inset 0 1px 0 rgba(255, 255, 255, .9);
--canto-hi: inset 0 1px 0 rgba(255, 255, 255, 1);
--sombra: 0 8px 24px rgba(0, 0, 0, .09);
--sombra-lg: 0 20px 56px rgba(0, 0, 0, .12);
/* Sobre negro la diapositiva se recortaba sola y la sombra no se veia: podia
ser enorme. Sobre blanco es papel blanco sobre pared blanca, y hay que
dibujar el filo a mano.
Lo que manda es que los dos tonos esten separados. Cuando la linea y el
pico de la sombra caen en el mismo gris -una al 8% da #e9e9e9, una sombra
al 7% pegada al lado da #eeeeee- no ves un borde con profundidad debajo:
ves una sola mancha difusa de 25px. La linea al 8% da #eaeaeb, casi un
susurro, y para que igual se siga leyendo como linea la sombra baja con
ella: en los costados su pico queda cerca de #f5f5f5, once niveles mas
clara. Ese hueco entre los dos grises es lo que no se puede cerrar; el
valor absoluto de la linea se puede bajar todo lo que uno quiera mientras
la sombra la acompane, pero aca ya estamos cerca del piso: mas claro que
esto y la diapositiva deja de tener filo. El orden importa: el anillo va
primero para que pinte encima. */
--sombra-papel: 0 0 0 1px rgba(0, 0, 0, .08),
0 2px 6px rgba(0, 0, 0, .03),
0 8px 20px rgba(0, 0, 0, .045);
--solido: #111113;
--solido-hi: #000;
--sobre-solido: #fff;
--sombra-solido: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .06);
--pista: rgba(0, 0, 0, .13);
--perilla-sombra: 0 1px 3px rgba(0, 0, 0, .26);
--seleccion: rgba(0, 0, 0, .14);
--foco: rgba(0, 0, 0, .55);
--scroll: rgba(0, 0, 0, .2);
--scroll-hi: rgba(0, 0, 0, .36);
--panel: rgba(255, 255, 255, .94);
--menu: #fff;
--opaco: rgba(250, 250, 251, .97);
--velo: rgba(245, 245, 247, .6);
/* El muneco negro, con la luz cayendo de arriba a la izquierda igual que
antes: lo que cambia es que ahora aclara el grafito en vez del blanco. */
--cara-cuerpo: radial-gradient(circle at 31% 25%,
#55565e, #35363c 34%, #191a1e 72%, #050507 100%);
--cara-sombra: 0 .09em .26em rgba(0, 0, 0, .3), inset 0 -.07em .14em rgba(0, 0, 0, .45);
--cara-ojo: #f7f8fa;
/* El ojo claro sobre el cuerpo oscuro es la misma imagen dada vuelta, asi que
el brillo tambien se da vuelta: aca el reflejo es el hueco oscuro. */
--cara-brillo: rgba(9, 10, 13, .5);
/* Sobre blanco un resplandor blanco no existe: el aura se vuelve un halo de
sombra, que se abre igual cuando habla. */
--cara-aura: radial-gradient(circle,
rgba(17, 17, 19, .22), rgba(17, 17, 19, .07) 44%, transparent 70%);
--cara-punto: rgba(17, 17, 19, .7);
/* Sobre el muneco negro pasa lo contrario: el azul tiene que ser claro, o la
lagrima se hunde en el cuerpo. */
--cara-lagrima: rgba(146, 198, 255, .95);
--tono-azul: 38, 104, 235;
--tono-violeta: 124, 58, 226;
/* El amarillo no cambia: ya es ambar, y el papel de la diapositiva es blanco
en los dos temas. */
--marca-hondo: 25, 75, 165;
--marca: 0 0 0 2px rgba(var(--marca-tono), .95),
0 0 0 7px rgba(var(--marca-tono), .14),
0 14px 38px rgba(var(--marca-hondo), .16);
--peligro: #c02a1d;
--peligro-hi: #8f1d13;
--peligro-fondo: rgba(255, 86, 74, .12);
--peligro-fondo-hi: rgba(255, 86, 74, .2);
--peligro-borde: rgba(214, 60, 48, .35);
}
/* El color elegido. Van despues de los dos temas para ganarles por orden, y
apuntan al token del tono, asi que cada uno agarra solo la version que
corresponda al tema puesto. La sombra honda es la version oscura del tono. */
:root[data-indicador="amarillo"] { --marca-tono: var(--tono-amarillo); --marca-hondo: 150, 103, 8; }
:root[data-indicador="violeta"] { --marca-tono: var(--tono-violeta); --marca-hondo: 78, 45, 160; }
/* La serif de los titulos es la misma del sitio. Va suelta y no en las listas
de color de mas arriba: no cambia con el tema. */
:root { --serif: "Merriweather", Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
display: flex;
flex-direction: column;
background: var(--fondo);
color: var(--text);
font: 450 14.5px/1.5 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
letter-spacing: -.011em;
overflow: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--seleccion); }
/* ------------------------------------------------------------------ iconos */
.iconos { display: none; }
button svg, .icono-doc, #drop .icono {
display: block;
width: 20px; height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --------------------------------------------------------------- controles */
button, select, input { font: inherit; color: inherit; }
button {
-webkit-appearance: none;
appearance: none;
display: grid;
place-items: center;
background: var(--glass-hi);
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
border: 1px solid var(--edge);
border-radius: 999px;
color: var(--text);
cursor: pointer;
box-shadow: var(--sombra), var(--canto);
transition: background .2s var(--ease), transform .3s var(--resorte),
border-color .2s var(--ease), opacity .2s var(--ease);
}
button:hover:not(:disabled):not(.activo) { background: var(--glass-hi-2); border-color: var(--edge-hi); }
button:active:not(:disabled) { transform: scale(.93); }
button:disabled { opacity: .25; cursor: default; }
.icono-btn { width: 38px; height: 38px; padding: 0; }
/* Encendido: mientras su panel esta abierto, el boton se queda solido.
El hover esta excluido a mano de las reglas de arriba y de las del dock
porque las dos le ganaban en especificidad y le devolvian el fondo
translucido, pero no el color: el icono se quedaba del color del panel
-blanco en claro, negro en oscuro- contra el vidrio, o sea invisible. Y el
mouse esta justo encima siempre que acabas de abrirlo. */
.icono-btn.activo { background: var(--solido); border-color: transparent; color: var(--sobre-solido); }
.icono-btn.activo:hover:not(:disabled) { background: var(--solido-hi); }
/* La accion principal: la unica pieza opaca del cromo. */
button.primary {
background: var(--solido);
border-color: transparent;
color: var(--sobre-solido);
box-shadow: var(--sombra-solido);
}
button.primary:hover:not(:disabled) { background: var(--solido-hi); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb {
background: var(--scroll);
border: 3px solid transparent;
background-clip: content-box;
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
/* --------------------------------------------------------------- el arranque
La primera vez, y una sola vez. Ocupa la ventana entera y no una lamina
flotando sobre la portada: no hay ninguna portada abajo que valga la pena
dejar a la vista -no hay documentos, no hay modelo bajado- y una ventanita
pide que la cierren, que es justo lo contrario de lo que hay que hacer.
Una pantalla por idea, y cada idea se muestra antes de contarse: el dibujo
arriba, el titulo abajo y una sola frase. Lo que no entra en una frase no
es para el primer arranque. */
#onboarding {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 40px 24px 132px;
overflow-y: auto;
text-align: center;
}
/* La clase va en y no en el : la pone el script de la cabecera,
que corre antes de que exista el body. */
html.arrancando #setup, html.arrancando #abajo { display: none; }
/* Una regla por pieza y no un [hidden] global: aca todo lo que se esconde es
un flex, y un display de clase le gana al del atributo. */
#onboarding[hidden], .ob-paso[hidden], .ob-pie button[hidden] { display: none; }
/* ---- el idioma ---- */
/* Debajo de la bajada y en la fila, como un renglon mas de la pantalla. Se
probo flotando -para que la primera midiera lo mismo que las otras cuatro y
el titulo no se moviera al pasar- y no: en una ventana baja el pie lo tapaba
con el boton de seguir. Contando para el alto no lo tapa nunca, porque el
hueco del pie ya esta reservado en el padding de abajo del arranque. */
.ob-idioma {
margin-top: 4px;
display: flex;
align-items: center;
gap: 5px;
color: var(--muted);
animation: llegar .5s var(--ease) both;
}
.ob-idioma svg {
flex-shrink: 0;
width: 15px; height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
/* El mismo desplegable de los ajustes: sin caja, con la flechita dibujada a
mano. Que sea el mismo importa, porque es el mismo ajuste. */
.ob-idioma select {
-webkit-appearance: none;
appearance: none;
padding: 3px 18px 3px 6px;
border: none;
border-radius: 9px;
background: transparent;
color: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 8px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
background-size: 4.5px 4.5px;
background-repeat: no-repeat;
transition: background-color .15s var(--ease), color .15s var(--ease);
}
.ob-idioma:hover { color: var(--text); }
.ob-idioma select:hover { background-color: var(--glass-hi-2); }
.ob-idioma select option { background: var(--menu); color: var(--text); font-weight: 400; }
.ob-paso {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
max-width: 460px;
animation: llegar .5s var(--ease) both;
}
/* Donde se corta el titulo largo va escrito a mano, con un adentro del
texto: librado al ancho de la ventana, en una pantalla grande entra todo en
un renglon larguisimo. El balance se queda para los cortos, que en una
ventana angosta si se parten solos. */
.ob-paso h2 {
margin: 0;
font-family: var(--serif);
font-size: clamp(26px, 3.4vw, 34px);
font-weight: 400;
letter-spacing: -.02em;
line-height: 1.16;
text-wrap: balance;
}
/* La medida esta elegida a mano y no por comodidad: a 29ch las cinco bajadas
caen en tres renglones parejos. Mas ancha, la ultima linea de alguna queda
con dos palabras colgando; mas angosta, dos de ellas se van a cuatro. */
.ob-paso > p {
margin: 0;
max-width: 29ch;
color: var(--muted);
font-size: 14.5px;
line-height: 1.55;
text-wrap: pretty;
}
/* El dibujo vive en una caja de alto fijo: sin eso, cada pantalla mide lo que
mide su dibujo y el titulo salta de lugar en lugar al pasar de una a otra.
Con el alto quieto, lo unico que cambia entre pantallas es lo que se cuenta. */
.ob-arte {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 188px;
margin-bottom: 4px;
}
/* ---- 1. la lamina y su guion ---- */
/* El lector, dibujado en chico: a la izquierda la diapositiva con un bloque
encendido, a la derecha el parrafo que lo explica. Que esten al lado y que
se enciendan juntos es toda la idea del programa. */
.ob-maqueta {
display: flex;
align-items: stretch;
gap: 12px;
width: 100%;
max-width: 340px;
}
.ob-lamina, .ob-guion {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 13px;
border-radius: 14px;
border: 1px solid var(--edge);
background: var(--glass);
}
.ob-lamina { flex: 1.15; }
.ob-guion { flex: 1; justify-content: flex-start; }
/* Las rayas que hacen de texto. Van un poco mas encendidas que una pista
vacia: son el contenido del dibujo, no el fondo por donde algo avanza. */
.ob-bloque, .ob-renglon {
display: block;
height: 6px;
border-radius: 99px;
background: var(--edge-hi);
}
.ob-bloque.ob-tit { height: 9px; width: 70%; background: var(--faint); }
.ob-bloque.corto, .ob-renglon.corto { width: 55%; }
/* El bloque marcado lleva el mismo recuadro que pone el lector de verdad: el
color del indicador, redondeado y con aire alrededor. */
.ob-bloque.marcado {
position: relative;
background: rgba(var(--marca-tono), .5);
}
.ob-bloque.marcado::after {
content: '';
position: absolute;
inset: -5px -6px;
border-radius: 7px;
border: 1px solid rgb(var(--marca-tono));
animation: ob-latir 2.6s var(--ease) infinite;
}
.ob-renglon.activo { background: var(--text-2); }
/* La onda: siete barras que suben y bajan corridas entre si. Es lo unico que
dice "en voz alta" sin escribirlo. */
.ob-onda { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-top: 6px; }
.ob-onda i {
display: block;
width: 3px;
border-radius: 99px;
background: var(--faint);
animation: ob-onda 1.1s var(--ease) infinite;
}
.ob-onda i:nth-child(1) { height: 5px; animation-delay: 0s; }
.ob-onda i:nth-child(2) { height: 11px; animation-delay: .1s; }
.ob-onda i:nth-child(3) { height: 16px; animation-delay: .2s; }
.ob-onda i:nth-child(4) { height: 9px; animation-delay: .3s; }
.ob-onda i:nth-child(5) { height: 14px; animation-delay: .4s; }
.ob-onda i:nth-child(6) { height: 7px; animation-delay: .5s; }
.ob-onda i:nth-child(7) { height: 12px; animation-delay: .6s; }
.ob-onda.grande { height: 22px; gap: 4px; margin-top: 12px; }
.ob-onda.grande i { width: 4px; }
@keyframes ob-onda { 50% { transform: scaleY(.35); } }
@keyframes ob-latir { 50% { opacity: .35; } }
/* ---- 2. la pregunta ---- */
/* La tarjeta que corta la clase, con el hueco a la mitad de la frase. El hueco
es el unico pedazo que no es una raya gris: es lo que hay que contestar. */
.ob-tarjeta {
display: flex;
flex-direction: column;
gap: 9px;
width: 100%;
max-width: 300px;
padding: 18px 18px 16px;
border-radius: 16px;
border: 1px solid var(--edge);
background: var(--glass-hi);
}
.ob-tarjeta .ob-renglon { width: 100%; }
.ob-tarjeta .con-hueco {
display: flex;
align-items: center;
gap: 6px;
width: 80%;
height: 6px;
background: none;
}
.ob-tarjeta .con-hueco::before,
.ob-tarjeta .con-hueco::after {
content: '';
height: 6px;
border-radius: 99px;
background: var(--edge-hi);
}
.ob-tarjeta .con-hueco::before { flex: 1.2; }
.ob-tarjeta .con-hueco::after { flex: .7; }
.ob-hueco {
width: 46px; height: 14px;
border-radius: 5px;
border: 1px dashed rgb(var(--marca-tono));
background: rgba(var(--marca-tono), .14);
animation: ob-latir 2.6s var(--ease) infinite;
}
.ob-opciones { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ob-opcion {
height: 22px;
border-radius: 8px;
border: 1px solid transparent;
background: var(--glass);
}
.ob-opcion.elegida { border-color: var(--edge-hi); background: var(--glass-hi-2); }
/* ---- 3. la carpeta y el candado ---- */
/* Los mismos del sitio. Ahi estan sueltos sobre la franja; aca van juntos y en
diagonal, que es como se ven dos cosas apoyadas sobre una mesa. */
.ob-guardado { position: relative; display: flex; align-items: flex-end; }
.ob-guardado .carpeta {
width: 132px; height: auto;
transform: rotate(-7deg);
filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
}
.ob-guardado .candado {
width: 58px; height: auto;
margin-left: -12px; margin-bottom: -6px;
transform: rotate(9deg);
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
}
.carpeta .c-atras { fill: url(#ob-c-atras); }
.carpeta .c-frente { fill: url(#ob-c-frente); }
.carpeta .s-atras-1 { stop-color: rgb(var(--tono-azul)); stop-opacity: .5; }
.carpeta .s-atras-2 { stop-color: rgb(var(--tono-azul)); stop-opacity: .3; }
.carpeta .s-frente-1 { stop-color: rgb(var(--tono-azul)); stop-opacity: .88; }
.carpeta .s-frente-2 { stop-color: rgb(var(--tono-azul)); stop-opacity: .7; }
.carpeta .s-frente-3 { stop-color: rgb(var(--tono-azul)); stop-opacity: .55; }
.carpeta .c-canto-atras,
.carpeta .c-canto-frente,
.carpeta .c-labio { fill: none; stroke-linecap: round; }
.carpeta .c-canto-atras { stroke: #fff; stroke-opacity: .3; stroke-width: .9; }
.carpeta .c-canto-frente { stroke: #fff; stroke-opacity: .16; stroke-width: .9; }
.carpeta .c-labio { stroke: #fff; stroke-opacity: .5; stroke-width: 1.1; }
.carpeta .c-lustre { fill: #fff; opacity: .1; }
.carpeta .c-lustre-2 { fill: #fff; opacity: .055; }
.carpeta .c-hoja { fill: #fbfbfd; }
.carpeta .c-hoja-2 { fill: #fff; opacity: .45; }
.carpeta .c-renglon { fill: none; stroke: #c9c9cf; stroke-width: 1.4; stroke-linecap: round; }
.candado .k-cuerpo { fill: url(#ob-k-cuerpo); }
.candado .s-k-1 { stop-color: rgb(var(--tono-amarillo)); stop-opacity: .92; }
.candado .s-k-2 { stop-color: rgb(var(--tono-amarillo)); stop-opacity: .76; }
.candado .s-k-3 { stop-color: rgb(var(--tono-amarillo)); stop-opacity: .6; }
.candado .k-arco { fill: none; stroke: url(#ob-k-arco); stroke-width: 5; stroke-linecap: round; }
.candado .s-k-arco-1 { stop-color: #fff; stop-opacity: .5; }
.candado .s-k-arco-2 { stop-color: #fff; stop-opacity: .26; }
.candado .k-arco-luz { fill: none; stroke: #fff; stroke-opacity: .34; stroke-width: 1.1; stroke-linecap: round; }
.candado .k-labio,
.candado .k-canto { fill: none; stroke-linecap: round; }
.candado .k-labio { stroke: #fff; stroke-opacity: .5; stroke-width: 1.1; }
.candado .k-canto { stroke: #fff; stroke-opacity: .2; stroke-width: .9; }
.candado .k-lustre { fill: #fff; opacity: .12; }
.candado .k-lustre-2 { fill: #fff; opacity: .06; }
.candado .k-ojo { fill: #000; fill-opacity: .42; }
/* ---- 4. el que explica ---- */
/* El cerebro con un halo que respira. Mientras se baja no hay nada que mirar
-son varios minutos y una barra- asi que algo tiene que estar vivo. */
.ob-cerebro { position: relative; display: grid; place-items: center; }
.ob-cerebro svg {
position: relative;
width: 74px; height: 74px;
fill: none;
stroke: currentColor;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--text-2);
}
.ob-aura {
position: absolute;
width: 150px; height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--marca-tono), .2), transparent 68%);
animation: ob-respirar 3.4s var(--ease) infinite;
}
@keyframes ob-respirar { 50% { transform: scale(1.14); opacity: .55; } }
.ob-descarga {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
width: 100%;
max-width: 300px;
min-height: 42px;
margin-top: 6px;
}
/* La barra de la descarga del modelo. No es del arranque: la misma descarga se
mira desde dos lados -el arranque y el lector, si le diste a empezar antes de
que terminara- y tiene que verse igual en los dos. */
.descarga-barra {
width: 100%;
height: 3px;
border-radius: 99px;
background: var(--pista);
overflow: hidden;
}
.descarga-barra i {
display: block;
height: 100%;
border-radius: 99px;
background: var(--solido);
transition: width .4s var(--ease);
}
.descarga-cuanto { color: var(--faint); font-size: 12.5px; }
.descarga-cuanto.mal { color: var(--peligro); }
/* La barra y, debajo, los gigas de un lado y el boton del otro. */
.descarga { display: flex; flex-direction: column; gap: 7px; width: 100%; }
/* La corta, para la fila de los ajustes: todo en un renglon y a lo ancho que
sobre, que ahi el nombre del modelo ya se lleva casi todo. Los gigas no van
aca sino en la linea del detalle, debajo del nombre. */
.descarga.corta {
flex-direction: row;
align-items: center;
gap: 8px;
flex: 0 0 auto;
width: 132px;
}
.descarga.corta .descarga-barra { flex: 1; }
.descarga-pie {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* En pausa la barra se apaga a la mitad: quieta y encendida se lee como una
descarga andando que no avanza, que es lo que uno mira preocupado. */
.descarga-barra.quieta i { background: var(--faint); }
/* El boton de pausar. Chico y callado: lo que importa de esta pantalla es
cuanto falta, no lo que se puede hacer con la espera. */
.descarga-pausa {
flex-shrink: 0;
width: 24px; height: 24px;
padding: 0;
background: transparent;
border-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: var(--faint);
}
/* El triangulo del play no esta centrado adentro de su cuadro: va corrido a la
derecha, que es como se dibuja siempre -un triangulo centrado por su caja se
ve corrido a la izquierda- pero en un boton de 24 eso se nota. Se lo devuelve
al medio optico. Las dos barras de la pausa si estan centradas y no se tocan. */
.descarga-pausa svg { width: 13px; height: 13px; }
.descarga-pausa[data-pausa="seguir"] svg { transform: translateX(-.6px); }
.descarga-pausa:hover:not(:disabled) { background: var(--glass-hi); color: var(--text); }
.ob-listo { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
/* El tilde no esta adentro de un boton, asi que las reglas de trazo de los
iconos no lo alcanzan: sin esto se dibuja relleno de negro sobre negro. */
.ob-listo svg {
width: 15px; height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---- 5. el oido ---- */
.ob-micro { position: relative; display: flex; flex-direction: column; align-items: center; }
.ob-micro svg {
width: 52px; height: 52px;
fill: none;
stroke: currentColor;
stroke-width: 1.3;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--text-2);
}
/* A la izquierda, como en los ajustes: son dos renglones que se leen, no un
cartel. Lo de arriba de esta pantalla si va centrado. */
.ob-elegir {
display: flex; flex-direction: column; gap: 6px;
width: 100%; max-width: 340px; margin-top: 8px;
text-align: left;
}
/* Las dos opciones son las mismas filas de los ajustes, pero aca si se eligen,
y una fila que se elige tiene que verse apretable antes de tocarla: canto
dibujado, un poco mas de vidrio y el redondel de la derecha, que es lo unico
que dice "una de las dos" sin escribirlo. En los ajustes no lleva redondel
porque alla no se elige nada: se muestra lo que hay bajado. */
.ob-elegir .voz {
padding: 13px 15px;
border-color: var(--edge);
background: var(--glass-hi);
cursor: pointer;
}
.ob-elegir .voz:hover { background: var(--glass-hi-2); border-color: var(--edge-hi); }
.ob-elegir .voz:active { transform: scale(.985); }
.ob-elegir .voz.elegida { border-color: var(--solido); background: var(--glass-hi-2); }
.ob-marca {
flex-shrink: 0;
width: 19px; height: 19px;
border-radius: 50%;
border: 1.5px solid var(--edge-hi);
transition: border-color .2s var(--ease), background .2s var(--ease);
}
/* Elegida: el anillo se enciende y aparece el punto del medio. Va de degrade
radial y no de un hijo mas: es un solo elemento y una sola transicion. */
.voz.elegida .ob-marca {
border-color: var(--solido);
background: radial-gradient(circle, var(--solido) 0 4.5px, transparent 4.5px);
}
/* ---- el pie ---- */
/* Fijo abajo y no al final de la columna: lo que se sigue esta siempre en el
mismo lugar, aunque una pantalla mida mas que la otra.
No es una tarjeta: no lleva borde ni vidrio ni sombra. Lo unico que hace el
degrade es que el dibujo de arriba no se meta por abajo de los botones. */
.ob-pie {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 41;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px 24px 44px;
background: linear-gradient(to top, var(--fondo) 62%, transparent);
}
html:not(.arrancando) .ob-pie { display: none; }
/* La misma medida que los botones de las preguntas: es el mismo boton de la
misma app, y la mano ya sabe que alto tiene. */
.ob-pie button { padding: 10px 17px; font-size: 13.5px; font-weight: 500; }
.ob-pie .primary { min-width: 132px; }
.ob-secundario {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--faint);
}
.ob-secundario:hover:not(:disabled) { background: var(--glass-hi); color: var(--text); }
/* Cuantas quedan. Cinco pantallas sin saber cuantas son se sienten infinitas. */
.ob-puntos { display: flex; align-items: center; gap: 6px; }
.ob-puntos i {
display: block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--pista);
transition: background .3s var(--ease), width .3s var(--ease);
}
.ob-puntos i.aca { width: 16px; border-radius: 99px; background: var(--muted); }
.ob-puntos i.visto { background: var(--faint); }
@media (max-width: 560px) {
.ob-arte { height: 150px; }
.ob-maqueta { max-width: 280px; }
}
/* ----------------------------------------------------------------- portada */
#setup {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 40px 24px;
overflow-y: auto;
/* Con varios archivos abiertos la lista pasa el borde de abajo de la ventana
y ahi se cortaba en seco, a mitad de un renglon, como si la pantalla se
hubiera quedado sin papel. Esto la apaga en los ultimos milimetros: el
corte deja de ser un tajo y se lee como que sigue.
Va de mascara y no de degradado encima porque encima habria que pintarlo
del color del fondo, y el fondo cambia con el tema; la mascara no pinta
nada, apaga lo que haya. */
--desvanecido: 72px;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--desvanecido)), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--desvanecido)), transparent);
}
/* Nada de la portada se achica para entrar. Es una columna flex, asi que por
defecto todo cede cuando no hay alto suficiente -y la tarjeta, que ademas
recorta lo que se le sale, se comia adentro la flecha y los formatos en
cuanto la ventana era un poco baja. Si no entra, se baja: para eso esta el
scroll de arriba. */
#setup > * { flex-shrink: 0; }
/* Y cuando tampoco entra centrado, el centrado no puede comerse el principio:
'safe center' deja de centrar y arranca de arriba en cuanto hay desborde, asi
la cara y el aire que tiene encima quedan siempre alcanzables con el scroll.
Va aparte por si el navegador no conoce la palabra: el centrado de arriba
sigue valiendo. */
@supports (justify-content: safe center) {
#setup { justify-content: safe center; }
}
.hero {
position: relative; /* el globo se cuelga de aca */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* De que tamano es el profesor de la portada. Va como medida y no como numero
suelto porque el globo lo necesita para saber donde termina la cabeza. */
--cara-portada: clamp(56px, 8vw, 76px);
/* El profesor no arranca pegado al borde: un respiro arriba y la portada
entera baja un poco, que es lo que la hace ver menos apretada. */
margin-top: 28px;
margin-bottom: 14px;
animation: llegar .8s var(--ease) both;
}
/* En la portada el profesor no trabaja: es el que te recibe. Va arriba del
titulo, grande pero sin pasarlo, y de ahi no se mueve -el que viaja entre el
centro y el encabezado es el del lector, que es otra pieza. */
.hero .cara { margin-bottom: 22px; }
.cara[data-lugar="portada"] { font-size: var(--cara-portada, 76px); }
/* Lo que el profesor tiene para decir de lo que acabas de traer. Que el archivo
no es de los que sabe leer, que el PDF esta escaneado, que no se pudo abrir:
todo eso es una respuesta a algo que acabas de hacer, y una respuesta la da
alguien. Antes salia como un renglon gris al pie de la portada, lejos de la
cara y lejos de la tarjeta, y habia que ir a buscarlo.
Sale de la cabeza, a la derecha, con la colita apuntando a la cara. Va
colgado y no en la columna a proposito: asi el titulo no se corre ni la
portada da un salto cada vez que el te contesta algo.
Es opaco, y es la unica pieza de la portada que lo es. El resto son vidrios
-casi transparentes: el fondo se ve a traves-, y ahi la colita no se podria
pegar al globo sin que se marcara el canto de abajo cruzandola. Opaco ademas
es lo que lo hace un globo de historieta y no otra tarjeta mas. */
.globo {
position: absolute;
top: 3px;
left: calc(50% + var(--cara-portada) / 2 + 14px);
width: max-content;
/* Nunca se pasa del borde: lo que hay del centro de la cara para afuera,
menos la cabeza, el hueco y el margen de la portada. */
max-width: min(272px, calc(50vw - var(--cara-portada) / 2 - 62px));
padding: 10px 14px 11px;
border-radius: 15px;
border: 1px solid var(--edge);
background: var(--opaco);
box-shadow: var(--sombra), var(--canto);
font-size: 13.5px;
line-height: 1.45;
color: var(--text);
text-align: left;
text-wrap: pretty;
cursor: default;
/* Crece desde la colita, que es de donde sale. */
transform-origin: 0 22px;
animation: globo .42s var(--resorte) both;
}
/* La colita: un cuadrado girado, con el canto en los dos lados que quedan
para afuera. Monta medio cuerpo sobre el globo, y como el globo es opaco, lo
que tapa queda tapado: no se marca el borde cruzandola por atras. */
.globo::after {
content: '';
position: absolute;
left: -5px; top: 16px;
width: 10px; height: 10px;
background: var(--opaco);
border-left: 1px solid var(--edge);
border-bottom: 1px solid var(--edge);
border-radius: 0 0 0 3px;
transform: rotate(45deg);
}
/* Irse es mas rapido que llegar: lo que dijo ya lo leiste. */
.globo.yendose { animation: globo-apagar .22s var(--ease) both; }
/* Angosto no hay lugar al costado de la cabeza: el globo se pone debajo, en la
columna, y la colita apunta para arriba. Ahi si corre el titulo, pero es eso
o un globo de dos palabras por renglon. */
@media (max-width: 720px) {
.globo {
position: static;
max-width: min(330px, 86vw);
margin: -8px 0 20px;
transform-origin: 50% 0;
animation-name: globo-abajo;
}
.globo::after {
left: 50%; top: -5px;
margin-left: -5px;
border: 0;
border-top: 1px solid var(--edge);
border-left: 1px solid var(--edge);
border-radius: 3px 0 0 0;
}
}
/* La portada no dice como se llama el programa ni que hace: eso ya lo sabe el
que la abrio. Pregunta, que es lo unico que falta contestar, y la respuesta
se contesta soltando el archivo en la tarjeta de abajo.
Va en la serif y no en la Jakarta del resto: es la unica frase de la app que
no es interfaz -no es un boton, ni un cartel, ni un dato- y la serif es lo
que la separa del cromo y la acerca al papel que estas por traer. */
#setup h1 {
margin: 0;
font-family: var(--serif);
font-size: clamp(31px, 4.6vw, 46px);
font-weight: 500;
letter-spacing: -.022em;
line-height: 1.12;
}
/* El ancho y la entrada viven aca, que es lo que se mueve; la tarjeta ocupa la
zona entera y las hojas de formato van adentro de ella, asi que nada asoma
por el borde de abajo y el aire que sigue es el de siempre.
El nombre lleva el apellido a proposito: el sitio tiene su propia .zona -la
tarjeta de la demo de arrastre- y carga esta hoja ademas de la suya. Con el
nombre pelado, el position y el z-index de aca le caian encima y le tapaban
el archivo y el puntero que cruzan la tarjeta, que es justo lo unico que esa
demo tiene para mostrar. Lo que se comparte entre la app y el sitio se
comparte a proposito; esto no. */
.zona-drop {
position: relative;
width: min(580px, 92vw);
z-index: 1;
animation: llegar .8s .06s var(--ease) both;
}
#drop {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
/* El aire de abajo esta nombrado porque las hojas de formato lo usan: se
hunden ese tanto mas unos pixeles, y asi el canto de la tarjeta las tapa
siempre igual, tambien cuando en el telefono el relleno achica. */
--pad-drop: 44px;
--pad-drop-x: 28px;
padding: var(--pad-drop) var(--pad-drop-x);
border-radius: 26px;
border: 1px solid var(--edge);
background: var(--glass);
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
box-shadow: var(--sombra-lg), var(--canto);
cursor: pointer;
overflow: hidden;
transition: background .25s var(--ease), border-color .25s var(--ease),
transform .4s var(--resorte), box-shadow .3s var(--ease);
}
#drop .icono {
width: 26px; height: 26px;
margin-bottom: 12px;
color: var(--faint);
transition: color .25s var(--ease), transform .4s var(--resorte);
}
#drop .big { font-size: 16.5px; font-weight: 550; letter-spacing: -.015em; }
#drop .small { color: var(--muted); font-size: 13.5px; }
#drop:hover { background: var(--glass-hi); border-color: var(--edge-hi); }
#drop:hover .icono { color: var(--text); transform: translateY(-2px); }
#drop.over {
transform: scale(1.015);
border-color: var(--edge-max);
background: var(--glass-hi-2);
box-shadow: var(--sombra-lg), var(--canto-hi), 0 0 0 5px var(--halo);
}
#drop.over .icono { color: var(--text); transform: translateY(-4px); }
/* Con algo adentro deja de ser un selector: no se ilumina al pasar por encima
ni cambia el cursor, porque lo que hay que apretar es el boton. */
#drop.con-archivo { cursor: default; }
#drop.con-archivo:hover { background: var(--glass); border-color: var(--edge); }
/* ---- la tarjeta con lo que trajiste ---- */
/* Mismo ancho y mismo vidrio: no es otra tarjeta, es la misma dada vuelta. */
/* La invitacion no es una caja: sus piezas siguen siendo hijas de la tarjeta y
se apilan como siempre. Lo unico que gana al estar envuelta es poder irse
entera cuando entra la otra cara. Y el hidden hay que escribirlo aca: contra
display:contents, el del navegador pierde por especificidad.
Y no se va del todo: se apaga. Sigue ocupando lo que ocupaba, que es lo que
mantiene la tarjeta del mismo tamano cuando traes un archivo -encogerse al
recibir algo seria al reves de lo que pasa-. La otra cara se apoya encima,
fuera del flujo, y se centra en el alto que la invitacion sostiene. Sale mas
barato que copiar a mano una altura que cambia con el ancho de la ventana. */
#drop .invitacion { display: contents; }
#drop .invitacion[hidden] { visibility: hidden; }
#drop .traido {
position: absolute;
inset: var(--pad-drop) var(--pad-drop-x);
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 14px;
animation: revelar .35s var(--ease) both;
}
#drop .traido[hidden] { display: none; }
#drop .traido .linea {
display: flex; align-items: center; gap: 11px;
min-width: 0;
}
/* El nombre se queda con lo que ocupa y se corta si no entra; lo que sobra del
renglon es del dato de al lado, que asi empieza pegado al nombre en vez de
irse contra la cruz. */
#drop .traido .nombre {
flex: 0 1 auto;
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 16.5px; font-weight: 550; letter-spacing: -.015em;
}
#drop .traido .icono-doc { width: 17px; height: 17px; color: var(--faint); flex-shrink: 0; }
#drop .traido .icono-btn { width: 30px; height: 30px; flex-shrink: 0; }
/* Cuantas diapositivas trajo, al lado del nombre y en el tono de un dato. Es
el mismo lugar donde antes se decia "Convirtiendo...", y no hay barra: no
habia un porcentaje que poner -el servidor convierte de un tiron y contesta
una sola vez, al final-, asi que lo unico cierto es que esta pasando algo.
Eso lo dice el palpito, y se apaga solo cuando la tarjeta queda lista. */
#drop .traido .paso {
/* Crece para empujar la cruz contra el canto, y se achica casi nada: cuando
el renglon no da -un nombre largo en el telefono-, el que se corta es el
nombre, que sigue diciendo cual es con la mitad de las letras. "128
diapositivas" cortado en "128 ..." no dice nada. */
flex: 1 .08 auto;
/* Y por debajo de la cuenta de diapositivas no baja: ese es el piso. Lo unico
mas largo que puede decir es que la version gratis lee hasta cien, y eso si
se corta antes que el nombre entero. */
min-width: 7.5em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--muted); font-size: 13.5px;
}
#drop:not(.listo) .traido .paso { animation: palpito 2.9s var(--ease) infinite; }
#drop #empezar {
margin-top: 12px;
padding: 13px 22px;
border-radius: 500px;
font-size: 15.5px; font-weight: 550; letter-spacing: -.015em;
}
/* Los formatos que entran van adentro del recuadro y debajo del renglon que
dice donde soltar: son lo que hay que traer, y el recuadro es el lugar donde
se sueltan. Asomando por abajo de la tarjeta se leian como una nota al pie;
adentro, la tarjeta entera dice "esto es lo que entra y aca va".
Se hunden por el canto de abajo: se comen el relleno entero y ocho pixeles
mas, que el overflow de la tarjeta corta. Ocho y no mas porque la sigla
tiene que entrar entera -una hoja de color con media palabra cortada no dice
que formato es-, y lo que se pierde es el borde de abajo, que no dice nada.
Tapadas hasta ahi se leen como hojas metidas adentro y no como cuatro iconos
apoyados.
Son parte de la invitacion, asi que se van con ella cuando llega un archivo,
sin regla propia. */
#formatos {
margin-top: 26px;
margin-bottom: calc(var(--pad-drop) * -1 - 8px);
display: flex; align-items: flex-start; justify-content: center;
gap: 17px;
/* Soltar y hacer clic siguen siendo de la tarjeta: las hojas son un dibujo,
no botones. */
pointer-events: none;
}
/* La luz va en el envoltorio y no en el