/* Aula de bienvenida · Semilla Bitcoin Mismo sistema grafico que coldcard.semillabitcoin.com: Coolvetica para lo titular, azul de marca, tarjeta blanca sobre blanco con borde fino. */ @font-face{ font-family:'Coolvetica'; src:url(/static/Coolvetica-Regular.otf) format('opentype'); font-weight:normal;font-style:normal;font-display:swap; } :root{ --azul:#3A4FC0; --tinta:#14161A; --gris:#F5F5F5; --blanco:#FFFFFF; --linea:#E6E6E6; --dim:#6E6E6E; --ok:#279445; --warn:#DB9A00; --bad:#C43A2F; --fondo:#FFFFFF; /* el papel; --blanco es la tarjeta encima */ --azul-solido:var(--azul); /* azul que lleva texto blanco encima */ --sombra:rgba(20,22,26,.04); --ambar:#8A6300; /* «sin guardar», «ojo con esto» */ --aviso-borde:#E3C982; --aviso-fondo:#FDF8EB; --mal-borde:#E5B3AC; --mal-fondo:#FCF1EF; --azul-tenue:#F4F6FD; /* el recuadro del aviso a exalumnos */ } /* Modo oscuro. Gris oscuro, no negro: el negro puro con texto claro deslumbra y cansa, y encima deja las tarjetas sin manera de despegarse del fondo. Aquí el papel es #1B1D21 y la tarjeta un peldaño por encima, que es lo que devuelve la jerarquía que en claro daba la sombra. Va por `prefers-color-scheme`, o sea que sigue al sistema y no hace falta guardar ninguna preferencia ni añadir un botón — ni JavaScript en la parte del alumno, que no tiene ni una línea. Ojo con el azul: el de marca (#3A4FC0) sobre gris oscuro no llega al contraste mínimo para texto, así que se aclara. Pero un azul claro con texto blanco encima tampoco se lee: por eso los RELLENOS usan --azul-solido, que en oscuro se queda oscuro. Y el logo no necesita fichero nuevo: es un SVG en línea con fill="currentColor", así que sigue al color que le diga esto. */ /* Tres estados, no dos: sin elegir nada se sigue al sistema, y en cuanto el alumno toca el botón se fija en claro o en oscuro y ahí se queda. El servidor escribe `data-tema` en el a partir de una cookie, así que esto funciona SIN JavaScript — que en la parte del alumno no hay ni una línea. Los mismos valores aparecen dos veces, y no hay forma de evitarlo en CSS: un `@media` y un selector de atributo no se pueden juntar en una sola regla. Hay una prueba que compara los dos bloques y salta si alguien toca uno y se olvida del otro. */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --azul:#93A3F2; /* acento: texto, enlaces, bordes */ --azul-solido:#4457C4; /* relleno: lleva blanco encima */ --tinta:#E6E8EE; --fondo:#1B1D21; --blanco:#24272C; --gris:#2B2E34; --linea:#373B43; --dim:#9AA1AD; --sombra:rgba(0,0,0,.30); --ok:#56C077; --warn:#E0B341; --bad:#E97A70; --ambar:#E0B341; --aviso-borde:#5B4A22; --aviso-fondo:#2A2519; --mal-borde:#6E3E38; --mal-fondo:#2C1F1D; --azul-tenue:#22273B; } /* Cuando el verde o el rojo hacen de RELLENO, el blanco encima no contrasta: aclarados para leerse como texto, piden tinta oscura encima. */ :root:not([data-tema="claro"]) .pill.si,.res.ok .band{color:#10241A} /* La banda negra sobre un fondo ya oscuro no separa nada; se sube un peldaño. */ :root:not([data-tema="claro"]) .alert-band{background:#101216} } :root[data-tema="oscuro"]{ --azul:#93A3F2; /* acento: texto, enlaces, bordes */ --azul-solido:#4457C4; /* relleno: lleva blanco encima */ --tinta:#E6E8EE; --fondo:#1B1D21; --blanco:#24272C; --gris:#2B2E34; --linea:#373B43; --dim:#9AA1AD; --sombra:rgba(0,0,0,.30); --ok:#56C077; --warn:#E0B341; --bad:#E97A70; --ambar:#E0B341; --aviso-borde:#5B4A22; --aviso-fondo:#2A2519; --mal-borde:#6E3E38; --mal-fondo:#2C1F1D; --azul-tenue:#22273B; } /* Cuando el verde o el rojo hacen de RELLENO, el blanco encima no contrasta: aclarados para leerse como texto, piden tinta oscura encima. */ [data-tema="oscuro"] .pill.si,.res.ok .band{color:#10241A} /* La banda negra sobre un fondo ya oscuro no separa nada; se sube un peldaño. */ [data-tema="oscuro"] .alert-band{background:#101216} /* ── el botón de sol/luna ───────────────────────────────────────────────────── Mismo tamaño y forma que el sobre del feedback. En el panel van los dos: el sobre abajo del todo y este justo encima. En la parte del alumno solo está este, y ocupa el sitio de abajo. */ .tema{position:fixed;right:20px;bottom:20px;z-index:70;margin:0} .tema.arriba{bottom:78px} .tema button{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer; background:var(--azul-solido);color:#fff;display:flex;align-items:center; justify-content:center;padding:0; box-shadow:0 3px 12px rgba(58,79,192,.35)} .tema button:hover{box-shadow:0 4px 16px rgba(58,79,192,.5)} .tema button:active{transform:translateY(1px)} .tema svg{width:20px;height:20px} /* Se pintan los dos iconos y el CSS enseña el que toca. Así el botón dice la verdad incluso cuando nadie ha elegido nada y se está siguiendo al sistema, que es algo que el servidor no puede saber. */ .tema .luna{display:flex} .tema .sol{display:none} @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]) .tema .luna{display:none} :root:not([data-tema="claro"]) .tema .sol{display:flex} } :root[data-tema="oscuro"] .tema .luna{display:none} :root[data-tema="oscuro"] .tema .sol{display:flex} /* En el móvil, sin círculo: el icono suelto arriba a la derecha, en la barra del logo (vive ahí en la plantilla; en el ordenador lo saca flotando el `fixed`). Un botón azul flotante tapaba lo de abajo, como el campo del correo en la landing. */ @media(max-width:520px){ .tema,.tema.arriba{position:static;margin:0 0 0 2px;flex:none;align-self:center} .tema button{width:38px;height:38px;background:none;box-shadow:none;color:var(--dim)} .tema button:hover{box-shadow:none;color:var(--tinta)} .tema svg{width:22px;height:22px} } *{box-sizing:border-box} /* Se reserva SIEMPRE el hueco de la barra de desplazamiento. Sin esto, una página larga saca la barra, el ancho útil encoge ~15 px y todo lo centrado —logo, cabecera y tarjetas— se desplaza a la izquierda respecto a una página corta. Y ese hueco SIEMPRE tiene dentro una barra, aunque no haya nada que desplazar: ese es el `min-height`. Sin él, en una página corta el hueco se queda vacío y se ve un carril blanco justo al lado de la barra azul del aviso, que llega hasta ahí y no más — ese carril lo pinta el navegador y ninguna página puede llegar: está medido, ni el fondo del documento ni un degradado propagado desde el body lo alcanzan (lo mismo que le pasa a la capa oscura del visor de imágenes). Con la barra dentro, el hueco parece lo que es. Se paga con un píxel de desplazamiento en las páginas que caben enteras. */ html{background:var(--fondo);scrollbar-gutter:stable;min-height:calc(100vh + 1px)} @supports not (scrollbar-gutter: stable){ html{overflow-y:scroll} } body{margin:0;background:var(--fondo);color:var(--tinta); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; padding:28px 16px 64px; /* Una palabra sin espacios más ancha que su hueco —una clave pública extendida, una dirección, un hash— no tiene por dónde partirse, así que se sale de la tarjeta y arrastra a toda la página a desplazarse en horizontal. Medido antes de esto: 721 px fuera de la tarjeta en un móvil de 420, y la página entera corriéndose 709. Va en `body` y no solo en `.prosa` porque el texto largo aparece en más sitios —una respuesta abierta que alguien pega, un alias, una celda de tabla—, y aquí la regla que se quiere es «nada puede reventar el ancho». `anywhere` y no `break-word`: el primero además impide que la palabra fuerce el ancho mínimo de un contenedor flex o de rejilla, que es justo lo que empujaba la tarjeta. Solo parte cuando si no se saldría; una palabra que cabe no se toca. */ overflow-wrap:anywhere} .wrap{max-width:680px;margin:0 auto} .ancho{max-width:960px} .display{font-family:'Coolvetica',"Arial Narrow",-apple-system,sans-serif; font-weight:normal;letter-spacing:.01em} /* ---------------------------------------------------------------- cabecera */ header{margin-bottom:26px} .topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px} .brandrow{display:flex;align-items:center;gap:10px;text-decoration:none; background:none;border:none;padding:0;font:inherit;cursor:pointer; -webkit-tap-highlight-color:transparent} .brandrow:hover{opacity:.72} .brandrow:focus-visible{outline:2px solid var(--azul);outline-offset:4px;border-radius:6px} .logo{width:34px;height:34px;color:var(--azul);flex:none} .wordmark{font-size:.95rem;letter-spacing:.14em;color:var(--azul);text-transform:uppercase} .topright{margin-left:auto;display:flex;align-items:baseline;justify-content:flex-end; gap:18px} .fecha{color:var(--dim);font-size:.82rem;white-space:nowrap} /* Solo actúa cuando el titular se parte, y sirve para que no quede una palabra sola en el último renglón: en el móvil, «…visitarás hoy?» dejaba «hoy?» colgando (medido: 296+56 px con `balance`, 190+162 con `pretty`). `balance` no lo arreglaba porque reparte las líneas, no evita el huérfano. */ h1{font-size:2.15rem;margin:0 0 18px;line-height:1.08;color:var(--tinta); text-wrap:pretty} /* El aire entre las dos frases del saludo de la entrada va aquí y NO en el `line-height` del h1: subir la interlínea empuja también la PRIMERA línea hacia abajo (media interlínea por arriba), y eso descuadraría el saludo respecto al del aula, que es lo que hace que nada se mueva al entrar. */ h1 .segunda{display:block;margin-top:8px} .sub{color:var(--dim);font-size:.92rem} @media(max-width:520px){ h1{font-size:1.7rem} .fecha{font-size:.68rem} /* En el móvil la esquina se queda solo con las acciones: el nombre de la mentoría ya está en el subtítulo, y ocultar la esquina entera dejaba al alumno sin forma de salir del Aula desde el teléfono. */ .topright .fecha{display:none} .wordmark{font-size:.8rem;letter-spacing:.1em} .topbar{gap:8px} } /* ---------------------------------------------------------------- tarjetas */ .card{background:var(--blanco);border:1px solid var(--linea);border-radius:14px; padding:24px;margin-bottom:16px;box-shadow:0 1px 3px var(--sombra)} @media(max-width:520px){.card{padding:18px}} .paso{display:block;font-size:1rem;color:var(--azul);letter-spacing:.12em; text-transform:uppercase;margin-bottom:8px} .q{font-size:1.18rem;font-weight:650;margin:0 0 6px;line-height:1.35} .hint{color:var(--dim);font-size:.9rem;margin:0 0 18px} .alert{background:var(--blanco);border:1px solid var(--linea);border-radius:14px; overflow:hidden;margin:18px 0;box-shadow:0 1px 3px var(--sombra)} .alert-band{background:#000;color:#fff;padding:10px 24px; font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em} .alert-body{padding:16px 24px 22px} /* ----------------------------------------------------------------- opciones */ .opt{display:block;width:100%;text-align:left;background:var(--blanco); color:var(--tinta);border:1px solid var(--linea);border-radius:10px; padding:14px 16px;margin-bottom:10px;cursor:pointer;font-size:1rem; font-family:inherit;line-height:1.45; transition:border-color .12s,box-shadow .12s,transform .06s} .opt:hover{border-color:var(--azul);box-shadow:0 2px 8px rgba(58,79,192,.12)} .opt:active{transform:translateY(1px)} .opt small{display:block;color:var(--dim);font-size:.85rem;margin-top:3px} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--azul);outline-offset:2px} /* opcion con casilla: la casilla real queda oculta y manda el borde */ label.opt{position:relative;padding-left:46px} label.opt input{position:absolute;opacity:0;width:0;height:0} label.opt::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px; border:1.5px solid var(--linea);border-radius:5px;background:var(--blanco)} label.opt::after{content:"";position:absolute;left:21px;top:19px;width:8px;height:13px; border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.4); opacity:0;transition:opacity .1s,transform .1s} label.opt:has(input:checked){border-color:var(--azul); box-shadow:0 2px 8px rgba(58,79,192,.12)} label.opt:has(input:checked)::before{background:var(--azul-solido);border-color:var(--azul)} label.opt:has(input:checked)::after{opacity:1;transform:rotate(45deg) scale(1)} label.opt:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px} /* sin :has (navegadores viejos) la casilla vuelve a verse y todo sigue funcionando */ @supports not selector(:has(*)){ label.opt{padding-left:16px} label.opt::before,label.opt::after{display:none} label.opt input{position:static;opacity:1;width:auto;height:auto;margin-right:10px} } /* --------------------------------------------------------------- formulario */ input[type=email],input[type=text],input[type=password],textarea{ width:100%;font:inherit;color:var(--tinta);background:var(--blanco); border:1px solid var(--linea);border-radius:10px;padding:13px 15px} input:focus,textarea:focus{border-color:var(--azul);outline:none; box-shadow:0 2px 8px rgba(58,79,192,.12)} textarea{min-height:150px;resize:vertical;line-height:1.55} .campo{margin-bottom:14px} .etiq{display:block;font-size:.9rem;color:var(--dim);margin-bottom:7px} .cta{display:block;width:100%;margin-top:18px;background:var(--blanco); color:var(--azul);border:1px solid var(--linea);border-radius:10px; padding:14px 16px;cursor:pointer;text-align:center;text-decoration:none; font-family:'Coolvetica',"Arial Narrow",-apple-system,sans-serif; font-size:1.15rem;letter-spacing:.03em;line-height:1.45; transition:border-color .12s,box-shadow .12s,transform .06s} .cta:hover{border-color:var(--azul);box-shadow:0 2px 8px rgba(58,79,192,.12)} .cta:active{transform:translateY(1px)} .cta.solida{background:var(--azul-solido);color:#fff;border-color:var(--azul-solido)} .cta.solida:hover{box-shadow:0 2px 10px rgba(58,79,192,.3)} /* ------------------------------------------------------------------- escala */ .escala{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:6px} .escala button{aspect-ratio:1/1;border:1px solid var(--linea);border-radius:10px; background:var(--blanco);color:var(--tinta);cursor:pointer; font-family:'Coolvetica',"Arial Narrow",sans-serif;font-size:1.1rem; transition:border-color .12s,box-shadow .12s,transform .06s} .escala button:hover{border-color:var(--azul);box-shadow:0 2px 8px rgba(58,79,192,.12)} .escala button:active{transform:translateY(1px)} .escala button.on{background:var(--azul-solido);color:#fff;border-color:var(--azul-solido)} .escala-pies{display:flex;justify-content:space-between;color:var(--dim);font-size:.78rem} @media(max-width:520px){ .escala{grid-template-columns:repeat(5,1fr)} .escala button{font-size:1rem} } /* ------------------------------------------------------------ navegacion */ .nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px} .back{background:none;border:none;color:var(--dim);cursor:pointer; font-size:.9rem;font-family:inherit;padding:6px 0;text-decoration:underline} .back:hover{color:var(--azul)} .step{color:var(--dim);font-size:.82rem} .barra{height:3px;background:var(--linea);border-radius:2px;margin-bottom:22px;overflow:hidden} .barra i{display:block;height:100%;background:var(--azul-solido);transition:width .2s} /* ------------------------------------------------------------------ avisos */ /* Sin barras de acento a la izquierda en ninguna parte: el aviso se distingue por su borde y su fondo, no por una raya lateral. */ .aviso{border:1px solid var(--aviso-borde);border-radius:10px;padding:13px 16px; margin-bottom:16px;font-size:.93rem;background:var(--aviso-fondo)} .aviso.mal{border-color:var(--mal-borde);background:var(--mal-fondo)} /* ------------------------------------------------------------------- panel */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px; margin-bottom:20px} .kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:16px} .kpi b{display:block;font-family:'Coolvetica',"Arial Narrow",sans-serif; font-size:2rem;line-height:1.1;color:var(--azul)} .kpi span{font-size:.8rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase} .bar{display:grid;grid-template-columns:1fr 34px;gap:10px;align-items:center; margin-bottom:7px;font-size:.92rem} .bar .track{background:var(--gris);border-radius:6px;overflow:hidden;position:relative; padding:5px 9px} .bar .track i{position:absolute;inset:0;background:rgba(58,79,192,.16); border-right:2px solid var(--azul)} .bar .track span{position:relative} .bar .n{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums} .bar.cero .track i{border-right:none} .mini{width:100%;border-collapse:collapse;font-size:.9rem} .mini th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);font-weight:600;padding:0 10px 8px 0;border-bottom:1px solid var(--linea)} .mini td{padding:10px 10px 10px 0;border-bottom:1px solid var(--linea);vertical-align:top} .mini tr:last-child td{border-bottom:none} .mini a{text-decoration:none} .mini a:hover{text-decoration:underline} .pill{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:20px;border:1px solid var(--linea);color:var(--dim); white-space:nowrap} .pill.si{background:var(--ok);border-color:var(--ok);color:#fff} .pill.medias{background:var(--warn);border-color:var(--warn);color:var(--tinta)} .cita{background:var(--gris);border:1px solid var(--linea);border-radius:10px; padding:12px 15px;margin:0 0 12px;white-space:pre-wrap} .cita b{display:block;font-size:.8rem;color:var(--azul);letter-spacing:.06em; text-transform:uppercase;margin-bottom:4px} .hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--dim)} .acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px} .acciones form{margin:0} .chico{font-size:.9rem;padding:9px 14px;margin:0;width:auto;display:inline-block} /* ------------------------------------------------------------------ pie */ /* La raya y el pie estaban pegados: la nota se leía como parte de lo de arriba. */ footer{color:var(--dim);font-size:.82rem;border-top:1px solid var(--linea); padding-top:26px;margin-top:40px;text-align:center} a{color:var(--azul)} /* En el pie, los enlaces van con su color y sin subrayar: el subrayado solo al pasar el ratón o al llegar con el teclado, para que se sepa que es un enlace. */ footer a{text-decoration:none} footer a:hover,footer a:focus-visible{text-decoration:underline} h2{font-size:1.22rem;margin:0 0 12px;line-height:1.3} h3{font-size:1.05rem;margin:26px 0 10px} .fadein{animation:fadein .18s ease-out} @keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .fadein{animation:none} .opt,.cta,.escala button{transition:none} } /* opcion ya elegida al volver atras */ .opt.elegida{border-color:var(--azul);box-shadow:0 2px 8px rgba(58,79,192,.12)} .opt.elegida::before{content:"✓ ";color:var(--azul);font-weight:700} /* ------------------------------------------------------------------- avisos */ /* Una barra fina arriba del todo, del ancho de la ventana. Mismo trazo que la de previsualización del panel. NO va pegada al scroll: un aviso que te persigue por toda la página deja de ser un aviso y pasa a ser un estorbo. */ /* Los márgenes negativos cancelan el relleno del body: si no, la barra queda con un marco blanco arriba y a los lados y deja de ser una barra. Es lo mismo que hace la banda de previsualización. */ .avisobanda{background:var(--azul-solido);color:#fff;padding:11px 16px;font-size:.9rem; line-height:1.45;text-align:center;margin:-28px -16px 24px} /* Si además hay banda de previsualización, van pegadas y no separadas por blanco. */ .avisobanda:has(+ .banda){margin-bottom:0} .avisobanda + .banda{margin-top:0} /* El texto, al ancho de lectura de la página: estirado de borde a borde en un portátil se lee peor que el resto, que va a 680. */ .avisobanda > span{display:block;max-width:680px;margin:0 auto} .avisobanda a{color:#fff;text-decoration:underline} .avisobanda a:hover{opacity:.85} .avisobanda strong,.avisobanda b{font-weight:650} /* La misma barra, dentro del panel, para ver cómo va a quedar. */ .avisobanda.demo{border-radius:10px;margin:6px 0 0;text-align:left} .avisobanda.demo > span{max-width:none} /* Las dos vistas del alumno. No son pestañas de una app: son dos maneras de mirar lo mismo, así que se pintan pequeñas y sin caja, para no competir con el material. */ .vistas{display:flex;gap:16px;margin:-6px 0 18px;font-size:.85rem} .vista{color:var(--dim);text-decoration:none;padding-bottom:3px; border-bottom:2px solid transparent} a.vista:hover{color:var(--azul)} .vista.elegida{color:var(--azul);border-bottom-color:var(--azul)} /* Los saltos dentro del panel: sin esto el título aterriza pegado al borde. */ #mentorias,#anadir,#avisos,#imagenes{scroll-margin-top:20px} /* El corte antes de la post mentoría: eso ya no es la mentoría. */ hr.corte{border:none;border-top:1px solid var(--linea);margin:26px 0 20px} /* El titular de cada mentoría del recorrido. Con aire por los dos lados: separa las pestañas de los bloques, y separará una mentoría de la siguiente el día que el alumno tenga varias. */ /* Lo de después del corte, sin caja: separa lo que es la mentoría de lo que ya no. Mismo interior que una tarjeta, sin el borde ni el fondo. */ .suelto{padding:0 24px;margin-bottom:16px} @media(max-width:520px){.suelto{padding:0 18px}} /* Y su titular en tinta, no en azul: el azul es de la mentoría. Lo de fuera se distingue por el color además de por la caja que ya no tiene. */ .suelto .paso{color:var(--tinta)} .suelto .fila-tipo{color:var(--dim)} .viaje{margin:30px 0 22px} .viaje-tit{font-size:1.15rem;margin:0} .viaje-sub{color:var(--dim);font-size:.88rem;margin-top:3px} /* ------------------------------------------------------ aula: lista de piezas */ .tipo{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--azul);margin-bottom:5px} /* --------------------------------------------------------------- prosa (guías) */ .prosa{line-height:1.7} .prosa > :first-child{margin-top:0} .prosa > :last-child{margin-bottom:0} /* Una diapositiva de información dentro de un cuestionario: el texto va entre el título y el «Continuar», con aire a los dos lados. */ .diapositiva{margin:14px 0 22px} .prosa h1{font-size:1.5rem;margin:28px 0 10px;line-height:1.25} .prosa h2{font-size:1.25rem;margin:26px 0 8px} .prosa h3{font-size:1.08rem;margin:22px 0 6px} .prosa img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--linea)} /* Una captura a todo lo ancho seguida de un encabezado quedaba apretada: la imagen va dentro de un párrafo, los márgenes del párrafo y del encabezado se solapan y gana el mayor —22 px—, que es poco debajo de una imagen grande. Un párrafo que solo lleva una imagen pide su propio aire, y más por abajo que por arriba, que es donde empieza lo siguiente. (Dejar líneas en blanco de más en el editor no sirve para esto: Markdown las junta todas en un solo corte entre bloques. El aire lo pone esta regla, y así sale igual en todas las guías sin que nadie cuente intros.) */ /* Cada línea en blanco de más que se deja en el editor. Markdown las junta todas en un solo corte, así que sin esto dejar tres no separaba más que dejar una. */ .prosa .hueco{height:1.5rem} .prosa p:has(> .visor:only-child){margin:26px 0 34px} .prosa > p:has(> .visor:only-child):first-child{margin-top:0} .prosa blockquote{background:var(--gris);border:1px solid var(--linea);border-radius:10px; margin:18px 0;padding:14px 16px;color:var(--tinta)} .prosa blockquote > :first-child{margin-top:0} .prosa blockquote > :last-child{margin-bottom:0} .prosa pre{background:var(--gris);border:1px solid var(--linea);border-radius:10px; padding:14px 16px;overflow-x:auto;font-size:.86rem; /* Aquí NO se parte: en un bloque de código, cortar una línea por la mitad cambia lo que dice. Se desplaza de lado, que ya estaba. */ overflow-wrap:normal} .prosa pre code{background:none;border:none;padding:0} .prosa li{margin-bottom:6px} .prosa hr{border:none;border-top:1px solid var(--linea);margin:26px 0} .prosa table{border-collapse:collapse;width:100%;font-size:.92rem;margin:16px 0; display:block;overflow-x:auto} .prosa th,.prosa td{border:1px solid var(--linea);padding:8px 10px;text-align:left} .prosa th{background:var(--gris)} /* -------------------------------------------------------------- panel: filas */ .fila{display:flex;gap:14px;align-items:flex-start;justify-content:space-between; padding:13px 0;border-bottom:1px solid var(--linea)} .fila:last-of-type{border-bottom:none} .fila-cuerpo{min-width:0} .fila-cuerpo b{display:block} .fila-cuerpo small{display:block;color:var(--dim);font-size:.83rem;margin-top:3px} /* Dentro de ese va la lista de opciones de una pregunta, en un renglón y separadas por «·», con la correcta en . La regla de arriba convierte en bloque TODOS los de una fila —está pensada para el título—, así que partía el renglón justo en la opción correcta y dejaba las anteriores apelotonadas encima de ella. Aquí un es énfasis, no título. */ .fila-cuerpo small b{display:inline} .fila-botones{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end} .fila-botones form{margin:0} @media(max-width:620px){ .fila{flex-direction:column;gap:8px} .fila-botones{justify-content:flex-start} } .dos{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:620px){.dos{grid-template-columns:1fr;gap:0}} select{width:100%;font:inherit;color:var(--tinta);background:var(--blanco); border:1px solid var(--linea);border-radius:10px;padding:13px 15px} textarea.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem; line-height:1.55;min-height:420px;white-space:pre;overflow-wrap:normal;overflow-x:auto} .enlinea{display:inline} .comoenlace{background:none;border:none;padding:0;font:inherit;color:var(--azul); cursor:pointer;text-decoration:underline} .comoenlace:hover{opacity:.72} .micro{font-size:.82rem;color:var(--dim)} .micro a,.micro .comoenlace{font-size:inherit} .apagado{color:var(--dim);font-weight:400} details.ayuda{margin:16px 0 4px;border:1px solid var(--linea);border-radius:10px; padding:12px 16px;background:var(--gris)} details.ayuda summary{cursor:pointer;color:var(--azul);font-size:.92rem} details.ayuda pre{font-size:.8rem;line-height:1.6;overflow-x:auto;margin:12px 0} details.card > summary{list-style:none} details.card > summary::-webkit-details-marker{display:none} /* la escala se adapta al rango que tenga */ .escala{grid-template-columns:repeat(var(--pasos,10),1fr)} @media(max-width:520px){ .escala{grid-template-columns:repeat(min(var(--pasos,10),5),1fr)} } /* resultado de un quiz */ .res{border-radius:14px;overflow:hidden;margin-bottom:16px;border:1px solid var(--linea); background:var(--blanco);box-shadow:0 1px 3px var(--sombra)} .band{padding:22px 24px 18px;color:#fff} .band .verdict{font-size:2rem;line-height:1.05;text-transform:uppercase; letter-spacing:.02em;display:block} /* La frase propia del resultado de un quiz («Estás un 70 % tranquilo con tu custodia»): una frase y no una cifra, así que sin mayúsculas forzadas y algo más pequeña. */ .band .verdict.final-frase{text-transform:none;font-size:1.55rem;line-height:1.2} /* La banda del resultado: VERDE cuando ha sacado el 60 % o más, mostaza cuando no. El corte estaba en la mitad y lo subió Luna al 60 %. Pasó por azul un rato y volvió al verde: aquí el verde es «acertaste», el mismo que marca cada respuesta buena, y así la banda y los rótulos cuentan lo mismo. */ .res.ok .band{background:var(--ok)} /* Sin color de nota (contenido.final_color = 'neutra'): ni verde ni mostaza, que en un test de «¿cómo de tranquilo estás?» no hay aprobado. El azul de Semilla de los botones principales, con el texto en blanco: resalta como resultado sin juzgarlo. (Primero fue gris con una raya azul, y se perdía entre las tarjetas.) */ .res.neutra .band{background:var(--azul-solido);color:#fff} /* El rótulo de cada pregunta corregida: verde si acertó, mostaza si no, los mismos colores que su ✓ y su ✗ y que la banda de arriba. El azul de `.paso` se queda para las preguntas sin respuesta correcta —las abiertas—, que no son ni una cosa ni la otra. */ .paso-bien{color:var(--ok)} .paso-mal{color:var(--ambar)} /* La respuesta dada y la correcta, cada una con su marca. Sin recuadro: el único que queda en la tarjeta es el del porqué, y así se ve de lejos qué hay que leer. La marca va un punto más grande que el texto y sin negrita, para que se lea como un gesto al margen y no como parte de la frase. */ /* Lo contestado y lo correcto son la misma clase de dato, así que se pintan igual: mismo tamaño, rótulo en gris y la respuesta en negrita. Antes una era una pista pequeña y la otra texto normal, y parecían dos cosas distintas. */ .respuesta{margin:0 0 4px;line-height:1.5;color:var(--dim)} .respuesta + .respuesta{margin-bottom:12px} .respuesta b{color:var(--tinta)} /* Se llama `senal` y no `marca` porque `.marca` YA existe: es la insignia monoespaciada de la lista de alumnos, y heredarla daba un ✓ diminuto en monoespaciada. Es la misma colisión que aplastó la tabla de «apartado por apartado» en septiembre; dos cosas sin relación no comparten nombre. Con la fuente de la casa, el navegador no encuentra el ✓ ni el ✗ y los dibuja con una de emergencia: salen diminutos y dentro de una caja. Se les da una pila de fuentes del sistema que sí los trae. */ .senal{font-family:-apple-system,"Segoe UI Symbol","Noto Sans Symbols 2", "DejaVu Sans",sans-serif;font-size:1.3em;font-weight:700;line-height:1; vertical-align:-.08em;margin-left:6px} .senal.si{color:var(--ok)} /* La ✗ en el mostaza de los avisos, no en rojo: es el color con el que esta pantalla ya dice «mal» —el rótulo de la pregunta y la banda del resultado—, y el rojo era el único de la página. Volver al rojo es cambiar `--ambar` por `--bad` aquí y nada más. */ .senal.no{color:var(--ambar)} /* El icono de la «i», del tamaño del texto y alineado con su primera línea. */ .porque{display:flex;gap:9px;align-items:flex-start} .porque-i{flex:none;width:1.05em;height:1.05em;margin-top:.15em;color:var(--dim)} .res.warn .band{background:var(--warn);color:var(--tinta)} .resbody{padding:20px 24px 22px} .note{background:var(--blanco);border:1px solid var(--linea);border-radius:10px; padding:14px 16px;margin:14px 0 0;font-size:.93rem} .verde{color:var(--ok)} /* los domingos de una edición */ .domingos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px; margin-bottom:16px} .domingo{border:1px solid var(--linea);border-radius:10px;padding:12px 14px} .domingo b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:var(--azul);margin-bottom:4px} .domingo span{font-size:.95rem} /* La tira de domingos también es navegación: cada bloque lleva a sus contenidos. */ a.domingo{text-decoration:none;color:inherit;display:block} a.domingo:hover{border-color:var(--azul)} .domingo.ahora{border-color:var(--azul);background:rgba(58,79,192,.05)} /* ------------------------------------------------- contenidos de una edición */ /* Fila con el sitio que ocupa a la izquierda: escribir los números y guardar una vez sustituye a subir de uno en uno con ↑↓, que eran una recarga por clic. */ .pieza{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:14px; align-items:center;padding:14px 0;border-bottom:1px solid var(--linea)} .pieza:last-of-type{border-bottom:none} .pieza-num{width:3.4em;text-align:center;padding:8px 4px; font-variant-numeric:tabular-nums} .bloque-tit{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azul); border-top:1px solid var(--linea);margin:18px 0 0;padding-top:14px} .bloque-tit:first-of-type{border-top:none;margin-top:6px;padding-top:0} .bloque-tit .apagado{text-transform:none;letter-spacing:normal;font-size:.8rem} /* Tres columnas fijas, iguales en todas las filas: con anchos automáticos, un rótulo más largo o un botón que falta descolocaban la fila entera. */ .tres-botones{display:grid;grid-template-columns:3.6em 4.4em;gap:6px} .tres-botones .cta{width:100%;padding-left:4px;padding-right:4px} @media(max-width:620px){ .pieza{grid-template-columns:3.6em minmax(0,1fr)} .pieza .fila-botones{grid-column:2/-1;justify-content:flex-start} } /* Lo que quita algo se ve, en vez de atenuarse: «dar de baja» iba en gris de apagado, que dice justo lo contrario de lo que hace. */ .peligro{color:var(--bad)} .cta.peligro{border-color:var(--mal-borde)} .cta.peligro:hover{border-color:var(--bad);box-shadow:0 2px 8px rgba(196,58,47,.12)} /* Un aviso dentro de un encabezado en gris pequeñito no lo lee nadie. */ .ojo{color:var(--ambar)} /* las flechitas de los sobran: son números que se teclean */ /* Los de número y fecha no estaban en la lista de arriba, así que se quedaban con el blanco del navegador: invisible sobre papel blanco, y un recuadro que deslumbra sobre gris oscuro. Solo color y borde: el tamaño lo pone cada uno. */ input[type=number],input[type=date]{font:inherit;color:var(--tinta); background:var(--blanco);border:1px solid var(--linea);border-radius:10px} input[type=file]{color:var(--tinta)} input[type=number]{appearance:textfield;-moz-appearance:textfield} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} /* «Visto» y «Próximamente»: fila de bandeja de entrada, no tarjeta */ /* la primera pista va fija: con «auto» cada fila se dimensiona por su cuenta y «CUESTIONARIO» empuja su título más a la derecha que «GUÍA» */ .linea{display:grid;grid-template-columns:9.5em minmax(0,1fr) auto auto;gap:12px; align-items:baseline; padding:12px 2px;border-bottom:1px solid var(--linea);text-decoration:none; color:var(--tinta);transition:background .12s} .linea:last-child{border-bottom:none} a.linea:hover{background:var(--gris)} .linea.quieta{color:var(--dim)} .fila-tipo{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azul); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .linea.quieta .fila-tipo{color:var(--dim)} .fila-tit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Lo que está pendiente pesa más que lo ya visto: «Visto» es un archivo y «Pendiente» es lo que hay que hacer. El cajón viaja como clase de la fila. */ .linea.pendiente .fila-tit{font-weight:650} .fila-est{font-size:.8rem;color:var(--dim);white-space:nowrap;text-align:right} .fila-fecha{font-size:.8rem;color:var(--dim);white-space:nowrap;text-align:right; min-width:4.2em;font-variant-numeric:tabular-nums} /* En «Pendiente» la fecha es un plazo, no un recibo: se lee distinto. */ .fila-fecha.aviso-fecha{color:var(--ambar)} .linea.quieta .fila-est{grid-column:3/-1} @media(max-width:520px){ .linea{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;padding:11px 2px} .fila-tipo{grid-column:1/-1} .fila-tit{grid-column:1/-1} .fila-est{grid-column:1/2;text-align:left} .linea.quieta .fila-est{grid-column:1/-1} .fila-tit{white-space:normal} } .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:760px){.tres{grid-template-columns:1fr;gap:0}} /* ------------------------------------------------- editor del panel interno */ /* Pegajosa y NO fija: con el teclado virtual abierto, iOS Safari deja de honrar position:fixed y la barra se queda flotando en mitad de la pantalla. */ .editor-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px; background:var(--fondo);border-bottom:1px solid var(--linea);padding:9px 0;margin-bottom:18px} .editor-bar .estado-linea{color:var(--dim);font-size:.85rem;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .editor-bar .derecha{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none} .editor-bar .cta{margin-top:0} .editor-bar .avisos-n{color:var(--ambar);font-size:.85rem;white-space:nowrap} /* El renglón que dice qué está pasando con lo escrito. Sin clase está en gris («Guardando…»); .ok cuando se ha guardado, .sucio con cambios sin guardar y .mal cuando algo ha ido mal. En el móvil se queda: es lo ÚNICO que hay que poder leer, y era justo lo que se escondía. */ .editor-bar .guardado{color:var(--dim);font-size:.85rem;white-space:nowrap} .editor-bar .guardado.ok{color:var(--ok)} .editor-bar .guardado.sucio{color:var(--ambar)} .editor-bar .guardado.mal{color:var(--bad)} /* En pantalla estrecha la barra pasa a dos renglones en vez de esconder cosas: escondiendo, o no sabías si había guardado o no sabías hasta cuándo está abierto. Las dos hacen falta. */ @media(max-width:700px){ .editor-bar{flex-wrap:wrap;row-gap:4px} .editor-bar .estado-linea{order:3;flex-basis:100%;white-space:normal} .editor-bar .guardado{white-space:normal;text-align:right} } /* Un botón apagado tiene que verse apagado, o se pulsa igual. */ .cta[disabled]{opacity:.45;cursor:default} .cta[disabled]:hover{border-color:var(--linea);box-shadow:none} /* El botón por defecto del formulario: existe para que Intro guarde, y para nada más. Fuera de la vista pero DENTRO del formulario, que display:none lo dejaría sin contar como botón por defecto. */ .oculto{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0; overflow:hidden;clip-path:inset(50%)} .rejilla-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px; align-items:start} @media(max-width:900px){.rejilla-editor{grid-template-columns:1fr}} /* El panel NO es pegajoso a propósito: con sus tres tarjetas es más alto que muchas pantallas, y pegado no habría forma de llegar a lo de abajo. */ .panel .card{padding:18px} .panel h2{font-size:1.05rem} .panel .acciones{gap:8px;margin-bottom:0} /* La columna de la derecha va toda desplegada: nada de plegables ahí. La letra pequeña de cada control vive en su «title», que es consulta y no lectura. */ .panel h2 .apagado{font-size:.78rem;letter-spacing:normal;text-transform:none} .panel .campo:last-child{margin-bottom:0} .panel [title]{cursor:help} .panel .opt[title],.panel button[title]{cursor:pointer} details.borrar > summary{cursor:pointer;color:var(--dim)} /* El título se escribe donde se lee: sin recuadro y con la letra del titular. */ .titulo-grande{font-family:'Coolvetica',"Arial Narrow",-apple-system,sans-serif; font-size:1.5rem;line-height:1.25;border:none;border-bottom:1px solid var(--linea); border-radius:0;padding:2px 0 9px;margin-bottom:18px} .titulo-grande:focus{border-color:var(--azul);box-shadow:none} /* Debajo de la barra pegajosa: sin esto, volver del guardado deja el ancla tapada. */ #cuerpo,#avisos{scroll-margin-top:74px} /* El techo es lo que impide que una guía larga vuelva a empujar los botones fuera de la pantalla; el suelo, que un borrador vacío parezca una ranura. Donde field-sizing no llegue, manda el rows="22" del HTML. */ textarea.cuerpo{min-height:56vh;max-height:74vh;field-sizing:content} /* El texto del final de un quiz: grande para escribir a gusto, sin llegar al de las preguntas; crece con lo escrito. */ textarea.final-texto{min-height:30vh;max-height:70vh;field-sizing:content} /* Los textos por tramos de nota: más bajos que el del final, uno debajo de otro. */ .tramo{margin:10px 0 14px} .tramo-desde{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:.85rem} .tramo-desde input{width:5.5em} .tramo textarea.final-texto{min-height:6em} /* Un borrador y un archivado se veían igual (los dos, píldora sin relleno). Se distinguen por la FORMA del borde, no solo por el color. */ .pill.borrador{border-style:dashed} /* banda de previsualización */ .banda{position:sticky;top:0;z-index:9;background:var(--azul-solido);color:#fff; padding:9px 16px;font-size:.85rem;text-align:center;margin:-28px -16px 24px} .banda a{color:#fff;margin-left:10px} details.card > summary{cursor:pointer;color:var(--azul);font-size:1.05rem; font-family:'Coolvetica',"Arial Narrow",sans-serif;letter-spacing:.02em} .marca{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem;background:var(--gris);border:1px solid var(--linea);border-radius:6px; padding:1px 7px} /* el aviso que solo ven los exalumnos */ .oferta{border:1px solid var(--azul);background:var(--azul-tenue);border-radius:14px; padding:20px 24px;margin-bottom:16px} .oferta > :first-child{margin-top:0} .oferta > :last-child{margin-bottom:0} /* La barra de arriba mide siempre lo mismo, tenga una línea o dos a la derecha: si encoge, arrastra al logo y al título y todo baila al cambiar de página. */ .topbar{min-height:46px} /* ------------------------------------------------ tamaño con que sale una imagen */ .prosa img.pequena{max-width:min(240px,100%)} .prosa img.mediana{max-width:min(420px,100%)} .prosa img.grande{max-width:min(680px,100%)} /* --------------------------------------------------- biblioteca de imágenes */ .card.medio{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start} @media(max-width:620px){.card.medio{grid-template-columns:1fr}} .medio-foto{background:var(--gris);border:1px solid var(--linea);border-radius:10px; padding:8px;display:flex;align-items:center;justify-content:center;min-height:120px} .medio-foto img{max-width:100%;max-height:180px;display:block;border-radius:6px} .medio-datos > b{display:block;font-size:1.05rem} .medio-datos > small{display:block;color:var(--dim);font-size:.83rem;margin-top:3px} .pegar{display:grid;grid-template-columns:9.5em minmax(0,1fr) auto;gap:10px; align-items:center;margin-bottom:10px} .pegar-nombre{font-size:.8rem;color:var(--dim)} /* Sin rótulo a la izquierda: el enlace ocupa todo el ancho que le sobra. */ .pegar.solo{grid-template-columns:minmax(0,1fr) auto} .pegar-texto{display:block;overflow-x:auto;white-space:nowrap;font-size:.76rem; padding:6px 9px} .pegar .cta.chico{margin:0;padding:5px 11px;font-size:.8rem} @media(max-width:620px){ .pegar{grid-template-columns:minmax(0,1fr) auto} .pegar-nombre{grid-column:1/-1} } /* ------------------------------------------------------- visor de imágenes Pinchar una imagen la abre encima de la página. Sin JavaScript: la casilla escondida guarda si está abierta, la miniatura es su etiqueta y el fondo oscuro es otra etiqueta de la misma casilla, así que pinchar fuera cierra. */ .visor{display:inline-block;line-height:0} .visor-marca{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .visor-abrir{display:inline-block;line-height:0;cursor:zoom-in;border-radius:10px} .visor-abrir img{transition:box-shadow .12s} .visor-abrir:hover img{box-shadow:0 2px 14px rgba(20,22,26,.18)} .visor-marca:focus-visible + .visor-abrir{outline:2px solid var(--azul);outline-offset:3px; border-radius:10px} .visor-fondo{display:none} .visor-marca:checked ~ .visor-fondo{ /* Nota: el hueco reservado de la barra de desplazamiento queda fuera, con su color de siempre. No hay forma de taparlo desde la página: lo pinta el navegador. En macOS, con barras superpuestas, ese hueco ni existe. */ display:flex;position:fixed;inset:0;z-index:60;cursor:zoom-out; align-items:center;justify-content:center;flex-direction:column;gap:16px; padding:28px;background:rgba(12,13,16,.92); animation:aparece .14s ease-out} .visor-marca:checked ~ .visor-fondo img{ max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto; border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.5)} .visor-cerrar{color:#fff;font-size:.9rem;letter-spacing:.04em;line-height:1.4; border:1px solid rgba(255,255,255,.45);border-radius:20px;padding:6px 16px} @keyframes aparece{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion: reduce){.visor-marca:checked ~ .visor-fondo{animation:none}} .pegar-nombre small{display:block;font-size:.72rem;opacity:.75;line-height:1.3} .pegar{align-items:start} .pegar .cta.chico,.pegar .pegar-texto{margin-top:2px} /* ---------------------------------------------- apartados plegables de una guía Sin cajas ni fondos: una línea fina entre filas, el título a la izquierda y a la derecha el estado y la flecha, la misma de coldcard.semillabitcoin.com. */ .plegable{border-top:1px solid var(--linea)} .plegable:last-of-type{border-bottom:1px solid var(--linea)} .plegable-titulo{display:grid;grid-template-columns:1fr auto auto;gap:14px; align-items:center;padding:15px 2px;cursor:pointer;list-style:none; font-family:'Coolvetica',"Arial Narrow",-apple-system,sans-serif; font-size:1.15rem;letter-spacing:.01em;line-height:1.3;color:var(--tinta)} .plegable-titulo::-webkit-details-marker{display:none} .plegable-titulo:hover{color:var(--azul)} summary.plegable-titulo:focus-visible{outline:2px solid var(--azul);outline-offset:2px; border-radius:6px} .plegable-estado{font-size:.78rem;color:var(--dim);letter-spacing:0;text-align:right; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif} .plegable-flecha{width:0;height:0;flex:none; border-right:8px solid var(--tinta); border-top:5.5px solid transparent;border-bottom:5.5px solid transparent; transition:transform .18s ease} .plegable[open] > .plegable-titulo{color:var(--azul)} /* -90 y no 270: acaban igual, pero 270 anima la vuelta larga en sentido horario y con -90 gira un cuarto de vuelta, antihorario, que es el camino corto. */ .plegable[open] > .plegable-titulo .plegable-flecha{transform:rotate(-90deg); border-right-color:var(--azul)} .plegable-cuerpo{padding:2px 2px 22px} .plegable-cuerpo > :first-child{margin-top:0} .plegable-cuerpo > :last-child{margin-bottom:0} /* bloqueado: apagado, sin flecha activa y sin nada que abrir */ .plegable.bloqueado .plegable-titulo{color:var(--dim);cursor:default} .plegable.bloqueado .plegable-flecha{border-right-color:var(--linea)} /* Un apartado con «@oculto»: en vez del título, ochos almohadillas. El servidor ya manda «########» —el título de verdad no sale de allí— y esto solo le da la pinta de hueco tapado, en monoespaciada y con las letras separadas para que se lea como una barrera y no como un título raro. */ .plegable.tapado .plegable-nombre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em;color:var(--linea);user-select:none} /* Las mentorías a las que pertenece un artículo transversal, en el editor. */ /* De qué mentorías es un transversal, bajo su dirección en la lista del panel. */ .trans-quien{display:block;margin-top:3px;font-size:.72rem;color:var(--dim); letter-spacing:.04em} .trans-quien.abierto{font-style:italic;opacity:.7} /* Un grupo, no un campo más: se separa de lo de arriba para que no se lean juntos. */ .campo.separada{margin-top:26px} /* La fila de «sin bloqueos» y su «?». Relativa, que de ella cuelga la ayuda. */ .regla-sub{position:relative;display:flex;align-items:center;gap:7px} .pista{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:16px;height:16px;margin-top:2px;border:1px solid var(--linea);border-radius:50%; color:var(--dim);font-size:.66rem;font-weight:700;cursor:help;user-select:none} .pista:hover{border-color:var(--azul);color:var(--azul)} /* La explicación, en vez del rótulo nativo del navegador: aquel tarda casi un segundo en salir y en un icono de 16px es fácil no llegar a verlo nunca. Este sale enseguida, y sin una línea de JavaScript: es el propio atributo pintado con content:attr(). El «title» se queda en la etiqueta de al lado, que es lo que leen los lectores de pantalla. */ .pista::after{content:attr(data-ayuda);position:absolute;z-index:30; left:0;right:0;top:calc(100% + 8px); padding:10px 12px;border:1px solid var(--linea);border-radius:8px; background:var(--blanco);color:var(--tinta); box-shadow:0 6px 20px rgba(0,0,0,.18); font-size:.8rem;font-weight:400;line-height:1.4;text-align:left;letter-spacing:0; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .12s,visibility .12s} .pista:hover::after{opacity:1;visibility:visible} @media (prefers-reduced-motion:reduce){.pista::after{transition:none}} /* La tarjeta de una mentoría envuelve SU casilla y la de «sin bloqueos», porque las dos son la misma decisión: de quién es el artículo y con qué llave. El borde lo pone esta caja y no la etiqueta de dentro, que se queda desnuda. */ .regla{border:1px solid var(--linea);border-radius:10px;background:var(--blanco); padding:0 0 9px;margin-bottom:10px; transition:border-color .12s,box-shadow .12s} .regla:hover{border-color:var(--azul)} /* la etiqueta de dentro no suma su margen al de la tarjeta (en el editor de los transversales va además con un style="margin:0" de antes; aquí se cubre igual) */ .regla > label.opt.desnuda{margin:0} /* «Desde el bloque N», al lado de la casilla de la mentoría, en las herramientas */ .regla-desde{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 16px; font-size:.86rem;color:var(--dim)} .regla-desde select.desde{width:auto;padding:5px 30px 5px 10px;font-size:.9rem; border-radius:8px} /* Los días de «Se abre a», en el editor de un artículo de Casa Semilla. */ .regla-desde input.regla-dias{width:5em;padding:5px 8px;font-size:.9rem;border-radius:8px} .regla:has(input[name="mentoria"]:checked){border-color:var(--azul); box-shadow:0 2px 8px rgba(58,79,192,.12)} /* El nombre de la mentoría, con la tipografía de los botones de la casa (`.cta`): Coolvetica, no la del cuerpo de texto. El color sí es el del texto y no el azul de los botones: aquí el azul es lo que dice «esto está elegido» —lo dice el borde de la tarjeta— y ponerlo también en el nombre lo repetiría sin decir nada. El padding de abajo se recorta para que «sin bloqueos» quede pegado a su mentoría y no flotando entre dos. */ /* Dentro de una tarjeta, el anillo de foco va en la CASILLA y no alrededor de la etiqueta. Alrededor de la etiqueta dibujaba un rectángulo redondeado que competía con el de la tarjeta y partía en dos algo que es una sola decisión: de quién es el artículo y con qué llave. Eso es lo que se veía «según dónde pongas el ratón» —salía al recibir el foco, no al sobrevolar—. No se quita sin más: en la casilla se sigue viendo cuál de las dos tiene el foco, que es justo para lo que está. Rodear la tarjeta entera lo perdería. */ .regla label.opt:has(input:focus-visible){outline:none} .regla label.opt:has(input:focus-visible)::before{outline:2px solid var(--azul); outline-offset:2px} .opt.desnuda,.opt.desnuda:hover{border:0;background:none;box-shadow:none; padding-bottom:2px; color:var(--tinta); font-family:'Coolvetica',"Arial Narrow",-apple-system,sans-serif; font-size:.98rem;letter-spacing:.03em} /* Con `label.opt.desnuda`, no con `.opt.desnuda`: la regla que ilumina una casilla marcada es `label.opt:has(input:checked)` y le gana en especificidad, así que la sombra seguía dibujándose DENTRO de la tarjeta y se veía como una raya bajo el nombre de la mentoría. Ahora la ilumina la tarjeta y solo ella. */ label.opt.desnuda:has(input:checked){box-shadow:none} /* La casilla de «sin bloqueos», colgando de la mentoría a la que pertenece. Es un `label.opt` como los demás, así que la casilla la dibuja un ::before colocado en absoluto y el hueco lo reserva el padding-left: al achicarla hay que mover LAS DOS COSAS a la vez. Quitando solo el padding, el cuadradito cae encima del texto — que es justo lo que pasaba. */ /* 16px es lo que separa el borde de la tarjeta de arriba de su propia casilla (`label.opt::before{left:16px}`), así que con este margen las dos casillas quedan en la MISMA vertical. Si allí cambia el 16, aquí también. */ .opt.sangrada{margin:0 0 0 16px;width:auto;border:0;background:none; padding:3px 0 3px 26px;font-size:.86rem;color:var(--dim);line-height:1.35} /* Del mismo tamaño que la de arriba (18px, el de toda la casa): dos casillas de distinto tamaño en la misma tarjeta se leen como si una valiera menos. Lo que cambia es el sitio, no el tamaño. El tic conserva sus distancias respecto al cuadro: +5 y +3 desde su esquina, igual que en `label.opt`. */ .opt.sangrada::before{left:0;top:3px;width:18px;height:18px} .opt.sangrada::after{left:5px;top:6px;width:8px;height:13px;border-width:0 2.5px 2.5px 0} /* Sin recuadro no hay borde que iluminar: la sombra sola se ve como una mancha. */ .opt.sangrada:hover,.opt.sangrada:has(input:checked){box-shadow:none;border-color:transparent} .opt.sangrada:active{transform:none} @supports not selector(:has(*)){ .opt.sangrada{padding-left:0} } /* los anidados cuelgan del de arriba */ .plegable-cuerpo .plegable{border-top:1px dashed var(--linea)} .plegable-cuerpo .plegable:last-of-type{border-bottom:none} /* el aviso de «lo he abierto»: una imagen de fondo que no se ve */ .plegable-rastro{display:block;width:1px;height:1px; background-repeat:no-repeat;overflow:hidden} @media (prefers-reduced-motion: reduce){.plegable-flecha{transition:none}} @media(max-width:520px){ .plegable-titulo{grid-template-columns:1fr auto;gap:4px 12px;font-size:1.05rem} .plegable-estado{grid-column:1/2;grid-row:2;text-align:left} .plegable-flecha{grid-row:1/3} } /* rejilla de «quién abrió qué apartado» */ .rejilla{overflow-x:auto} .rejilla th.vertical{font-size:.68rem;white-space:nowrap;padding:0 8px 8px 0; vertical-align:bottom;max-width:8em;overflow:hidden;text-overflow:ellipsis} /* «tic» y no «marca»: `.marca` ya existía para la insignia monoespaciada de `alumnos.html` y lleva `display:inline-block`. Un en inline-block DEJA DE SER una celda de tabla: los ✓ se amontonaban en fila justo detrás del nombre del alumno y las cabeceras se repartían el ancho con nada debajo, como si todo lo hubieran abierto el lunes. Los datos siempre estuvieron bien. */ .rejilla td.tic{text-align:center;font-size:1rem;padding-right:10px} .rejilla td.tic .si{color:var(--ok);cursor:help} .rejilla td.tic .no{color:var(--linea)} /* ═══ Feedback del equipo por Nostr — TEMPORAL, fase de pruebas ═══════════════ Todo lo de esta caja se borra de una vez cuando ya no haga falta; ver «Cómo quitar el feedback por Nostr» en CLAUDE.md. Solo se pinta en /admin. El z-index va por encima de la barra pegajosa del editor (20) y de la banda de previsualización (9), y el modal por encima del visor de imágenes (60). */ #feedback-boton{position:fixed;right:20px;bottom:20px;z-index:70; width:46px;height:46px;border-radius:50%;border:none;cursor:pointer; background:var(--azul-solido);color:#fff;display:flex;align-items:center; justify-content:center;box-shadow:0 3px 12px rgba(58,79,192,.35)} #feedback-boton svg{width:20px;height:20px} #feedback-boton:hover{box-shadow:0 4px 16px rgba(58,79,192,.5)} #feedback-boton:active{transform:translateY(1px)} @media(max-width:520px){#feedback-boton{right:14px;bottom:14px;width:42px;height:42px}} #feedback-modal{position:fixed;inset:0;z-index:80;display:flex; align-items:center;justify-content:center;padding:20px} #feedback-modal[hidden]{display:none} #feedback-fondo{position:absolute;inset:0;background:rgba(20,22,26,.55)} .feedback-caja{position:relative;background:var(--blanco);border:1px solid var(--linea); border-radius:14px;padding:24px;width:100%;max-width:520px; max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.22)} .feedback-caja h2{margin-bottom:4px} .feedback-caja .acciones{margin-bottom:0} #feedback-previa{margin-top:10px;display:flex;align-items:center;gap:10px} #feedback-previa[hidden]{display:none} #feedback-miniatura{max-width:150px;max-height:110px;border-radius:8px; border:1px solid var(--linea)} .feedback-estado{margin:0 0 14px;font-size:.9rem;color:var(--dim)} .feedback-estado[hidden]{display:none} .feedback-estado.bien{color:var(--ok)} .feedback-estado.mal{color:var(--bad)} /* Con el modal abierto no se desplaza lo de detrás. El hueco de la barra sigue reservado (scrollbar-gutter), así que esto no mueve nada de sitio. */ html:has(.con-modal){overflow:hidden} /* ── vídeos de Vimeo dentro de una guía ────────────────────────────────────── Mientras se ve la portada NO hay nada de Vimeo en la página: es un enlace a esta misma página con «?video=». Solo al pulsar aparece el iframe. */ .video{margin:22px 0} .video-portada{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;text-align:center;text-decoration:none;padding:38px 24px; background:var(--gris);border:1px solid var(--linea);border-radius:14px; color:var(--tinta)} .video-portada:hover{border-color:var(--azul)} .video-play{width:52px;height:52px;border-radius:50%;background:var(--azul-solido); display:flex;align-items:center;justify-content:center;flex:none} /* El triángulo, con bordes: un carácter ▶ cambia de forma en cada sistema. */ .video-play::after{content:"";border-style:solid;border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff;margin-left:4px} .video-nombre{font-weight:650;font-size:1.02rem} .video-nota{font-size:.82rem;color:var(--dim);max-width:34ch;line-height:1.45} /* 16:9 sin trucos de relleno: aspect-ratio lo entienden todos desde 2021. */ .video-marco{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden; background:#000;border:1px solid var(--linea)} .video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-pie{font-size:.86rem;color:var(--dim);margin:8px 0 0;text-align:center} /* ── la lista de artículos transversales ───────────────────────────────────── Es una tabla `.mini` de las de la casa: así las columnas se alinean entre filas —cada fila por su cuenta no se alineaba— y la cabecera que ordena tiene sentido. */ /* La dirección puede partirse (por los guiones, o donde haga falta) antes que empujar a las demás columnas: con /material/… es más larga que la /t/… de antes, y dejaba los botones de la derecha partidos letra a letra. */ .trans-slug{font-size:.78rem;color:var(--dim);white-space:normal;overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} /* Los botones, nunca partidos: un renglón y su ancho entero. */ .trans-acciones{display:flex;gap:6px;flex:none;justify-content:flex-end;white-space:nowrap} .trans-acciones .cta{margin:0;flex:none;white-space:nowrap} /* la cabecera que ordena */ .mini th .ordena{color:inherit;text-decoration:none;white-space:nowrap} .mini th .ordena:hover{color:var(--azul)} .mini th .ordena.activa{color:var(--azul)} .mini th .ordena span{margin-left:4px} /* el botón de copiar: un icono, y al pulsarlo enseña el visto un momento */ .cta.chico.icono{padding:5px 9px;line-height:0} .cta.chico.icono svg{width:15px;height:15px} .cta.chico.icono .visto{display:none} .cta.chico.icono.copiado{border-color:var(--ok);color:var(--ok)} .cta.chico.icono.copiado svg{display:none} .cta.chico.icono.copiado .visto{display:block} /* ═══ Las herramientas del alumno (/herramientas) ═════════════════════════════ Todo lo de esta caja es de la tercera vista del alumno y de la herramienta BIP39; ver «Las herramientas del alumno» en CLAUDE.md. Fuera de aquí no se ha tocado ni una regla: tarjetas, avisos, etiquetas, campos y botones son los de la casa, y los colores salen TODOS de los tokens de arriba, así que el modo oscuro funciona sin escribir nada aparte. La herramienta BIP39 nace a DOS COLUMNAS y el botón redondo la pasa a una y vuelta en el sitio. Lo de una columna es todo lo que hay aquí hasta la caja «dos columnas» del final: tarjeta principal y, debajo, las direcciones, en el ancho de siempre (680 px, el de Mensajes y Tu camino). Las dos columnas son UNA clase en el contenedor de la página (la de la caja del final) y un solo `@media`; por debajo de 1150 px no hace nada, o sea que solo hay una columna. */ /* la lista de herramientas: cada una, una tarjeta que es un enlace entero */ .herr-tarjeta{display:block;text-decoration:none;color:var(--tinta); transition:border-color .12s,box-shadow .12s} .herr-tarjeta:hover{border-color:var(--azul);box-shadow:0 2px 8px rgba(58,79,192,.12)} .herr-tit{display:block;font-size:1.18rem;font-weight:650;line-height:1.35;margin-bottom:6px} .herr-texto{display:block;color:var(--dim);font-size:.93rem} .herr-abrir{display:block;margin-top:14px;color:var(--azul);font-size:.9rem} /* en el panel: quién tiene cada herramienta ahora mismo, y la nota bajo las reglas */ .herr-quien{margin:0 0 16px} .herr-nota{margin:10px 0 0} /* `hidden` lo gobierna el script, y una regla de autor con `display` le gana a la del navegador: sin esto, lo escondido con rejilla o flex seguiría a la vista. */ .bip39 [hidden]{display:none !important} .bip39-oculto{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* un fieldset trae borde, relleno y un ancho mínimo que revienta el móvil */ .bip39-app{border:0;padding:0;margin:0;min-width:0} .bip39-parrafo{margin:0 0 10px} .bip39-parrafo:last-child{margin-bottom:0} .bip39-pista{margin:8px 0 0} /* La redacción corta de una nota, que solo enseña el modo compacto de más abajo. */ .bip39-solo-ancha{display:none} /* El aviso de mainnet: un que hay que aceptar. Tarjeta de la casa con el rojo de los avisos (--mal-borde / --mal-fondo) en el borde y en la cabecera. · Al NO se le pone `display`: cerrado tiene que seguir sin verse. Y la regla de `:not([open])` es para los navegadores que no lo conocen (Safari anterior al 15.4), que si no pintarían el texto suelto en mitad de la página; ahí el script pregunta con confirm(). · El fondo atenuado va con un color escrito y no con un token: `::backdrop` no heredaba las variables hasta hace bien poco. Oscuro vale para los dos modos. */ .bip39-dialogo{width:calc(100vw - 32px);max-width:600px;padding:0;overflow:hidden; border:1px solid var(--mal-borde);border-radius:14px;background:var(--blanco); color:var(--tinta);box-shadow:0 14px 44px rgba(0,0,0,.35)} .bip39-dialogo:not([open]){display:none} .bip39-dialogo::backdrop{background:rgba(10,12,16,.62)} .bip39-dialogo-cab{background:var(--mal-fondo);border-bottom:1px solid var(--mal-borde); padding:16px 22px} .bip39-dialogo-tit{margin:0;font-size:1.4rem;line-height:1.15;color:var(--tinta)} .bip39-dialogo-cuerpo{padding:18px 22px 22px} .bip39-dialogo-texto{margin:0 0 20px;line-height:1.6} .bip39-dialogo-botones{display:flex;flex-direction:column;gap:10px} .bip39-dialogo-botones .cta{margin-top:0} .bip39-error{margin:12px 0 0} .bip39-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:0} /* El botón de sol/luna es fijo y va pegado al borde derecho. En el móvil cae encima de la flecha de un y tiene que medir lo mismo. */ .bip39 input[type=number]{width:100%;font:inherit;border-radius:10px;padding:13px 15px} /* Un
y no un 
: una semilla son 128 caracteres seguidos y una clave
   extendida 111, sin un solo espacio. Tienen que partirse por donde haga falta. */
.bip39-dato{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;
  line-height:1.55;color:var(--tinta);background:var(--gris);
  border:1px solid var(--linea);border-radius:10px;padding:11px 13px;
  min-height:4.9em;white-space:normal;overflow-wrap:anywhere;word-break:break-all;
  -webkit-user-select:all;user-select:all}
.bip39-ruta-cuenta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem;color:var(--azul);margin-left:6px;white-space:nowrap}

.bip39-huella{display:flex;gap:14px;align-items:flex-start}
.bip39-huella canvas{flex:none;width:72px;height:72px;border-radius:10px;
  border:1px solid var(--linea);background:var(--gris)}
.bip39-huella-hex{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.05rem;letter-spacing:.06em;color:var(--tinta)}
.bip39-huella .bip39-pista{margin-top:4px}

/* El «NO usar con fondos reales» que acompaña al rótulo de la frase: va DENTRO de la
   etiqueta —así forma parte del nombre del campo también para un lector de pantalla— y
   con el mismo gris que el resto del rótulo. Estuvo en rojo y seminegrita; Luna lo
   prefirió así. La clase se queda por si algún día vuelve a querer destacarse. */
.bip39-ojo{color:inherit;font-weight:inherit}
/* El título de la tarjeta principal: el mismo rótulo azul que «Direcciones», y en una
   cabecera de su misma altura para que los dos queden en la misma línea. */
.bip39-entrada-cab{display:flex;align-items:center;min-height:26px;margin-bottom:10px}
.bip39-entrada-tit{margin:0}
/* las direcciones */
.bip39-salida-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin-bottom:10px}
.bip39-salida-tit{margin:0}
.bip39-salida-nota{color:var(--dim);font-size:.8rem;margin-right:auto}
.bip39-conmuta{font:inherit;font-size:.78rem;line-height:1.3;cursor:pointer;
  padding:4px 12px;border-radius:999px;border:1px solid var(--linea);
  background:transparent;color:var(--dim)}
.bip39-conmuta:hover{border-color:var(--azul)}
.bip39-conmuta[aria-pressed="true"]{background:var(--azul-solido);
  border-color:var(--azul-solido);color:#fff}
.bip39-vacio{margin:0}
.bip39-dirs{list-style:none;margin:0;padding:0}
/* Una dirección, UNA línea: número · ruta · dirección. Lo que manda es el caso
   peor, una P2TR (62 caracteres) con su ruta delante, dentro de una tarjeta de
   680 px: 630 útiles. A .75rem la dirección mide ~448 px y a .68rem la ruta ~105,
   que con el número y los huecos son ~595. De ahí los dos tamaños; no son gusto.
   Y cuando no cabe —un móvil, o una cuenta con muchas cifras— no hace falta
   ningún `@media`: el cuerpo es un flex que envuelve, así que la dirección baja
   ENTERA debajo de su ruta, y solo si ni sola cabe se parte por donde haga falta. */
.bip39-dir{display:grid;grid-template-columns:2ch minmax(0,1fr);gap:0 12px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--linea)}
.bip39-dir:last-child{border-bottom:none;padding-bottom:0}
.bip39-dir-n{color:var(--dim);font-size:.78rem;text-align:right;
  font-variant-numeric:tabular-nums}
.bip39-dir-cuerpo{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.bip39-dir-ruta{display:none;flex:none;color:var(--dim);font-size:.68rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bip39-dirs.con-ruta .bip39-dir-ruta{display:block}
.bip39-dir-valor{display:block;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;line-height:1.5;overflow-wrap:anywhere;word-break:break-all;
  -webkit-user-select:all;user-select:all}

@media(min-width:520px){
  .bip39-opciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bip39-generar-fila{flex-direction:row;align-items:stretch}
  .bip39-generar-fila select{flex:1;width:auto;min-width:0}
  .bip39-generar-fila .cta{width:auto;flex:none;padding-left:34px;padding-right:34px}
  .bip39-huella canvas{width:96px;height:96px}
  /* En un renglón y sin partir el rótulo; si aun así no caben, se apilan solos. */
  .bip39-dialogo-botones{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
  .bip39-dialogo-botones .cta{width:auto;white-space:nowrap;padding-left:20px;padding-right:20px}
}

/* ── la disposición «ancha»: las dos columnas ────────────────────────────────
   Es como nace la página, y el botón redondo la quita y la pone en marcha. Todo
   lo suyo es esta caja y la clase `bip39-ancha`, que la plantilla pone en el
   contenedor de la página (`.wrap`) y en ningún otro sitio, y app.js conmuta.

   La página entera se ensancha hasta 1400 px, cabecera y pestañas incluidas: el
   logo y el título se quedan alineados con el borde izquierdo de las tarjetas, y
   «salir» con el derecho. Con la cabecera en sus 680 px de siempre quedaba una
   isla centrada encima de un cuerpo el doble de ancho.

   Los números salen de las direcciones, que son las que no se pueden encoger: su
   columna mide 680 px fijos —630 útiles, los mismos que en la de una columna,
   para los ~595 de la fila peor— y el formulario se queda con TODO lo demás, que
   es quien lo aprovecha: la semilla y la clave extendida ocupan menos renglones.
   Dos columnas desde 1150 px, que es donde al formulario le quedan ~390; por
   debajo, nada de esto se aplica.

   Los cuatro selectores siguen al ancho que le queda al formulario, y los tres
   saltos están MEDIDOS para que ninguno corte lo que lleva escrito: en columna
   mientras es estrecho, de dos en dos desde 1270 px y los cuatro en un renglón,
   como en el prototipo, desde 1364 px (cabe en un portátil de 1366). En ese
   renglón van un punto más pequeños y cada uno con el ancho que pide su texto:
   a partes iguales, «BIP84 · SegWit nativo» se quedaba cortado. */
@media(min-width:1150px){
  .wrap.bip39-ancha{max-width:1400px;padding:0 8px}
  .bip39-ancha .bip39-rejilla{grid-template-columns:minmax(0,1fr) 680px;gap:16px;
    align-items:start}
  .bip39-ancha .bip39-opciones{grid-template-columns:minmax(0,1fr)}

  /* ·· Modo compacto. Lo pidió Luna al verla en su portátil (1440×792 útiles): de
     la tarjeta izquierda solo cabían los selectores, generar, la frase y media
     passphrase; huella, semilla y clave quedaban bajo el pliegue. El objetivo está
     MEDIDO: a 1440×780, con una frase de 24 palabras, el borde inferior de esa
     tarjeta queda por encima del pliegue. Todo esto es de ratón y pantalla ancha:
     controles de 34 px (nunca menos de 32) y ninguna letra por debajo de 11 px.
     Por debajo de 1150 px no se aplica nada, y el móvil sigue con sus tamaños. */
  .bip39-ancha .bip39-rejilla .card{padding:16px}
  /* ·· El aire entre secciones. A la vista, con «Detalles de semilla» cerrado, la
     tarjeta tiene SEIS (`.bip39-seccion`: generar · entropía · frase · detalles de
     semilla · selectores · clave pública) y entre ellas hay UNA sola distancia,
     `--bip39-aire`. Dentro de cada sección no cambia nada: la etiqueta sigue
     pegada a su campo y la nota a su recuadro. Esa distancia SIGUE A LA ALTURA DE
     LA VENTANA: respira todo lo que deja el pliegue y ni un píxel más. Son 5
     huecos, así que cada píxel de aire baja 5 el final de la tarjeta; el número
     que se resta es lo que mide todo lo demás (medido, con los dos desplegables
     cerrados y 24 palabras) más 10 px de margen sobre el pliegue. Tiene un suelo
     —10 px: un portátil bajo no pierde nada— y un techo, que en un monitor alto
     más aire ya es desparramar. La tarjeta mide distinto según cómo caigan los
     selectores, así que cada tramo de anchura lleva su número dentro del calc();
     la propiedad es siempre la misma. */
  /* PARA DAR MÁS O MENOS AIRE ENTRE SECCIONES, CAMBIA SOLO ESTOS DOS NÚMEROS.
     `--bip39-aire-max` es el techo: lo que se ve en una ventana con altura de sobra.
     `--bip39-aire-min` es el suelo: a lo que encoge cuando la ventana es baja. */
  .bip39-ancha .bip39-entrada{
    --bip39-aire-max:18px;
    --bip39-aire-min:10px}
  .bip39-ancha .bip39-entrada{
    --bip39-aire:clamp(var(--bip39-aire-min), calc((100vh - 926px) / 5), var(--bip39-aire-max));
    display:flex;flex-direction:column;gap:var(--bip39-aire)}
  /* El título no es una sección: debajo lleva 10 px fijos, no el aire. Como es un
     hijo más del flex, se le descuenta el hueco que el `gap` le pondría. */
  .bip39-ancha .bip39-entrada-cab{margin-bottom:calc(10px - var(--bip39-aire))}
  /* Un desplegable CERRADO es un renglón de texto, y el rótulo 1 va centrado en
     una fila de 34 px: de rótulo a rótulo, del 1 al 2 había 42,8 px y del 2 al 3
     solo 33,5. Estos 9 px son esa diferencia —(34 − 15,5) / 2— y dejan el mismo
     paso entre 1-2 y 2-3, y entre 4-5. Abierto no hace falta: lo que lleva dentro
     ya lo separa. */
  .bip39-ancha .bip39-desplegable:not([open]){padding-bottom:9px}
  /* (con `.bip39` delante para pesar más que la regla de `.campo` de aquí abajo) */
  .bip39-ancha .bip39 .bip39-entrada > .bip39-seccion{margin-top:0;margin-bottom:0}
  /* Passphrase+huella y semilla van DENTRO de «Detalles de semilla»: siguen
     siendo dos secciones, con el mismo aire entre ellas cuando está abierto. */
  .bip39-ancha .bip39-det-cuerpo{display:flex;flex-direction:column;gap:var(--bip39-aire)}
  .bip39-ancha .bip39 .bip39-det-cuerpo > .bip39-seccion{margin-top:0;margin-bottom:0}
  /* dentro de una sección manda el ritmo corto de siempre, ahora con `gap` */
  .bip39-ancha .bip39-par{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 16px}
  .bip39-ancha .bip39 .bip39-par > .campo,
  .bip39-ancha .bip39 .bip39-opciones > .campo{margin-bottom:0}
  .bip39-ancha .bip39-opciones{row-gap:10px}
  .bip39-ancha .bip39 .campo{margin-bottom:10px}
  .bip39-ancha .bip39 .bip39-ultimo{margin-bottom:0}
  .bip39-ancha .bip39 .etiq{font-size:.75rem;line-height:1.3;margin-bottom:3px}
  .bip39-ancha .bip39 select,
  .bip39-ancha .bip39 input[type=text],
  .bip39-ancha .bip39 input[type=number]{height:34px;padding:0 10px;font-size:.85rem;
    border-radius:8px}
  /* generar: un renglón —texto, «12/24 palabras», botón— y sin las dos rayas */
  .bip39-ancha .bip39-generar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
    padding:0;border:0}
  .bip39-ancha .bip39-generar .etiq{flex:1 1 200px;margin:0}
  .bip39-ancha .bip39-generar-fila{flex:none;flex-direction:row;gap:8px}
  .bip39-ancha .bip39-generar-fila select{flex:none;width:auto}
  .bip39-ancha .bip39-generar-fila .cta{width:auto;height:34px;padding:0 16px;
    font-size:.95rem;line-height:1;border-radius:8px}
  /* la frase: renglones apretados. Donde el navegador sabe (`field-sizing`), el
     recuadro crece con lo escrito y no hay barra interior a ningún ancho; donde
     no, cinco renglones mientras el formulario es estrecho. Se sigue pudiendo
     estirar a mano. */
  .bip39-ancha textarea.bip39-mono{font-size:.85rem;line-height:1.35;padding:6px 10px;
    border-radius:8px;min-height:0;height:calc(5 * 1.35em + 14px)}
  @supports (field-sizing:content){
    .bip39-ancha textarea.bip39-mono{field-sizing:content;height:auto;
      min-height:calc(3 * 1.35em + 14px);max-height:calc(10 * 1.35em + 14px)}
  }
  .bip39-ancha .bip39-copiable > textarea{padding-right:44px}
  .bip39-ancha .bip39-copiar{width:24px;height:24px;border-radius:6px}
  .bip39-ancha .bip39-pista{font-size:.75rem;line-height:1.35;margin:4px 0 0}
  /* los selectores, ahora abajo, sin su raya; y «Detalles entropía», apretado */
  .bip39-ancha .bip39-opciones{margin-top:0;padding-top:0;border-top:0}
  .bip39-ancha .bip39-sub{margin-bottom:10px}
  .bip39-ancha .bip39-sub-etiq{font-size:.72rem;margin-bottom:3px}
  .bip39-ancha .bip39-indices{font-size:.75rem}
  .bip39-ancha .bip39-de-mas{display:none}
  .bip39-ancha .bip39-solo-ancha{display:inline}
  .bip39-ancha .bip39-error{margin:6px 0 0;padding:8px 12px;font-size:.82rem}
  /* la huella: el LifeHash a 46 px. Solo encoge el CSS; el lienzo sigue siendo de
     96×96 puntos, así que se ve nítido también en pantallas de doble densidad. */
  .bip39-ancha .bip39-huella{gap:10px;align-items:center}
  .bip39-ancha .bip39-huella canvas{width:46px;height:46px;border-radius:8px}
  .bip39-ancha .bip39-huella-hex{font-size:.95rem;line-height:1.25}
  .bip39-ancha .bip39-huella .bip39-pista{font-size:.72rem;margin-top:2px}
  /* semilla y clave: dos renglones cada una */
  .bip39-ancha .bip39-dato{font-size:.72rem;line-height:1.45;padding:6px 9px;
    border-radius:8px;min-height:calc(2 * 1.45em + 14px)}
  .bip39-ancha .bip39-ruta-cuenta{font-size:.72rem}
  /* las direcciones: filas de ~28 px en vez de 39. La ruta sube a .69rem, que
     .68 son 10,9 px y aquí el suelo son 11; sigue cabiendo todo en un renglón. */
  .bip39-ancha .bip39-salida-cab{margin-bottom:4px}
  /* ·· La tarjeta de direcciones mide LO MISMO que la principal, ni un píxel más.
     `contain:size` hace que no cuente para la altura de la fila —la pone la
     tarjeta de la izquierda— y `align-self:stretch` la estira hasta ella. Dentro,
     la cabecera se queda quieta y lo que se desplaza es solo la lista. Si se abre
     «Detalles entropía» y la izquierda crece, esta crece con ella y enseña más.
     El suelo es por si algún día la izquierda quedara muy corta. */
  .bip39-ancha .bip39-salida{align-self:stretch;contain:size;min-height:260px;
    display:flex;flex-direction:column}
  .bip39-ancha .bip39-salida-cab{flex:none}
  .bip39-ancha .bip39-dirs{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;
    scrollbar-color:var(--linea) transparent;padding-right:4px}
  .bip39-ancha .bip39-dir{padding:5px 0;line-height:1.4}
  .bip39-ancha .bip39-dir-valor{line-height:1.4}
  .bip39-ancha .bip39-dir-ruta{font-size:.69rem}
}
@media(min-width:1270px){
  .bip39-ancha .bip39-opciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bip39-ancha .bip39-entrada{
    --bip39-aire:clamp(var(--bip39-aire-min), calc((100vh - 748px) / 5), var(--bip39-aire-max))}
}
@media(min-width:1364px){
  .bip39-ancha .bip39-opciones{gap:0 10px;
    grid-template-columns:minmax(0,1.48fr) minmax(0,1.2fr) minmax(0,.5fr) minmax(0,1fr)}
  .bip39-ancha .bip39-opciones select,
  .bip39-ancha .bip39-opciones input[type=number]{padding:0 6px 0 10px}
  /* Con el formulario ya ancho: la frase en tres renglones (24 palabras caben), y
     passphrase y huella —que son una sección— lado a lado. Aquí es donde la
     tarjeta cabe entera sobre el pliegue, y donde el aire se ajusta a él. */
  .bip39-ancha textarea.bip39-mono{height:calc(3 * 1.35em + 14px)}
  @supports (field-sizing:content){.bip39-ancha textarea.bip39-mono{height:auto}}
  .bip39-ancha .bip39-par{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .bip39-ancha .bip39-entrada{
    --bip39-aire:clamp(var(--bip39-aire-min), calc((100vh - 629px) / 5), var(--bip39-aire-max))}
}
/* ═══ fin de las herramientas del alumno ═════════════════════════════════════ */

/* ═══ «Mensajes»: la bandeja de entrada del alumno (/aula) ════════════════════
   Una sola lista con tres grupos —por abrir, anunciados, vistos— en vez de un
   recuadro por estado. Lo que los distingue NO es el color: es el PESO del
   título, la marca de la izquierda y el rótulo del grupo. El color acompaña, no
   informa solo.

   «Tu camino» y el perfil del panel siguen con `.linea` (más arriba), que es
   otra fila para otra pantalla.

   Ni un color escrito a mano: todo sale de los tokens, así que el modo oscuro
   no pide nada. */

/* Sin tarjeta: la lista va sobre el papel, no dentro de una caja. El aire de los
   lados lo pone ya el `padding` del `body` (16 px en el móvil), y las filas se
   alinean con la cabecera y con las pestañas en vez de ir sangradas 24 px. */
/* El relleno de arriba, y no un margen en el primer rótulo, porque un margen se
   funde con el de `.vistas` y no separa nada: el hueco se quedaba en los 18 px que
   ya ponía el menú. Con 12 de relleno el rótulo cae a 30 del menú, el mismo aire que
   «Tu camino» deja entre sus pestañas y la primera madriguera. Medido, no a ojo. */
.bandeja{padding-top:12px;margin-bottom:16px}
/* El rótulo de grupo es un encabezado de verdad (un 
), para que el lector de
   pantalla lo encuentre, con una raya fina que lleva el ojo hasta el borde. */
.bandeja-grupo{display:flex;align-items:center;gap:10px;
  margin:24px 0 4px;font-family:inherit;font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bandeja-grupo:first-child{margin-top:0}
.bandeja-grupo::after{content:"";flex:1;height:1px;background:var(--linea)}
.bandeja-vacio{margin:10px 0 0}

/* Dos píxeles a los lados y no los 24 del recuadro: el texto de la fila cae a
   plomo con el título de la página y con las pestañas, y el fondo de lo visto
   respira lo justo. */
.bandeja-linea{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:0 12px;align-items:start;padding:12px 2px;
  border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta);
  transition:background .12s}
.bandeja-linea:last-child{border-bottom:none}
a.bandeja-linea:hover{background:var(--azul-tenue)}
/* Lo ya visto se ilumina con el MISMO gris que una fila de «Tu camino»: son dos
   listas de lo mismo y el roce del ratón tiene que sentirse igual. El azul tenue
   se queda para lo que está por abrir, que es lo que pide atención. */
a.bandeja-visto:hover{background:var(--gris)}
/* Lo visto ya tiene fondo propio: el mismo azul tenue encima apenas se movería,
   así que ahí se aclara con el papel. */

/* La marca de la izquierda: punto lleno = por abrir, aro = anunciado, aro casi
   invisible = visto. Decorativa (aria-hidden): lo que dice también está escrito. */
.bandeja-punto{width:9px;height:9px;border-radius:50%;margin-top:.45em;
  box-sizing:border-box}
.bandeja-por-abrir .bandeja-punto{background:var(--azul)}
.bandeja-anunciado .bandeja-punto{border:1.5px solid var(--dim)}
.bandeja-visto .bandeja-punto{border:1.5px solid var(--linea)}

.bandeja-cuerpo{min-width:0}
.bandeja-cab{display:flex;align-items:baseline;gap:9px;min-width:0}
/* La chapa NO encoge: si encogiera, junto a un título largo se leería
   «CUESTIONAR…», que es peor que no ponerla. El que se corta es el título. */
.bandeja-cab .fila-tipo{flex:none}
.bandeja-tit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lo que está por abrir es el «sin leer» de un buzón: negrita y tinta plena. */
.bandeja-por-abrir .bandeja-tit{font-weight:650;color:var(--tinta)}
.bandeja-anunciado .bandeja-tit,
.bandeja-visto .bandeja-tit{font-weight:400;color:var(--dim)}
.bandeja-anunciado .fila-tipo,
.bandeja-visto .fila-tipo{color:var(--dim)}
/* El resumen, en un renglón y cortado con puntos suspensivos: es lo que hace
   que esto se lea como una bandeja y no como una lista de enlaces. */
.bandeja-previa{display:block;margin-top:2px;font-size:.82rem;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bandeja-derecha{text-align:right;white-space:nowrap;min-width:4.4em;
  font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums}
.bandeja-marca{display:block;margin-top:2px;font-size:.75rem}

/* Lo visto NO lleva fondo: se distingue por el peso del título, por su color
   apagado, por el aro hueco en lugar del punto lleno y por su propio rótulo de
   grupo. Llegó a tener un gris detrás y Luna lo quitó (21-sep-2026): con la
   bandeja ya sin tarjeta, ese gris pintaba un bloque macizo al final de la
   lista en vez de acompañarla. El estado no lo lleva el color solo. */


/* ── Novedades: una fila como las demás, con su página detrás ─────────────────
   «Novedades en tu mentoría — 21/09»: lo que se le abrió ese día fuera de la
   edición. **Es una fila normal del buzón** —enlace, punto, título, renglón de
   resumen y fecha— que lleva a `/aula/novedades/`, y entrar ahí es lo que
   la da por vista. Por eso aquí abajo casi no hay nada: el grupo
   (`bandeja-por-abrir` / `bandeja-visto`) va en la propia fila y el peso del
   título, el punto, el fondo de lo visto y el hover salen de las reglas de
   arriba, sin repetir ni una.

   Tuvo un `
` y un botón «Marcar como leída», y las dos cosas se
   quitaron: el gesto de abrirla ya significa eso. De aquella versión no queda
   ninguna regla. */
/* `fila()` mete el título en un contenedor flex junto a la chapa del tipo, y de
   ahí saca el corte con puntos suspensivos. Esta fila no tiene chapa —el título
   ya empieza por «Novedades»— así que el título cuelga directo del cuerpo y se
   le da el bloque para que siga cortándose igual en una pantalla estrecha. */
.bandeja-novedad .bandeja-tit{display:block}
/* La lista de la PÁGINA del día: una cosa por renglón, dentro de la tarjeta. */
.novedad-lista{margin:0;padding:0;list-style:none}
.novedad-lista li{margin:0 0 8px}
.novedad-lista li:last-child{margin-bottom:0}
/* De qué artículo es, o «Herramienta»: acompaña, no es lo que se viene a leer. */
.novedad-rotulo{color:var(--dim)}

/* En el móvil la fecha baja debajo del título y el resumen sigue en un renglón:
   nada se sale, y no hay desplazamiento lateral. */
@media(max-width:520px){
  .bandeja-linea{grid-template-columns:auto minmax(0,1fr);gap:0 10px;padding:12px 2px}
  .bandeja-derecha{grid-column:2;text-align:left;min-width:0;margin-top:3px}
  .bandeja-marca{display:inline;margin-left:9px}
  .bandeja-grupo{margin-top:20px}
}
/* ═══ fin de «Mensajes» ══════════════════════════════════════════════════════ */

/* ── aula2: lo que todavía no se ha abierto, en gris ───────────────────────────
   Una fila de la bandeja sin enlace, apagada, con un candado donde las demás
   llevan el punto. Se ve que existe y, si ya tiene fecha, cuándo se abre. */
.bandeja-bloqueado{opacity:.55}
/* «Más contenido en camino»: el punto, en raya discontinua, de algo que aún no está. */
.bandeja-pronto .bandeja-punto{border:1.5px dashed var(--dim)}
.bandeja-bloqueado .bandeja-tit{font-weight:400;color:var(--dim)}
.bandeja-bloqueado .fila-tipo{color:var(--dim)}
.bandeja-candado{width:14px;height:14px;margin-top:.2em;color:var(--dim)}
.bandeja-candado svg{display:block;width:100%;height:100%}

/* ── aula2: la letra pequeña del registro, debajo del botón ───────────────────
   Es lo que se acepta al pulsarlo, así que va pegada a él y no arriba, dentro
   del texto de la landing. */
.legal-registro{margin:14px 0 0;font-size:.8rem;line-height:1.5}

/* ── aula2: la tabla de enlaces de campaña ────────────────────────────────────
   Las cabeceras y los números en un renglón: partidos («CLI/CS») no se leen. El
   enlace, corto y con su botón de copiar; debajo, el canal y la nota. */
.enlaces-tabla th{white-space:nowrap}
.enlaces-tabla .num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;
  padding-right:18px}
.enlace-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.enlace-det{display:block;margin-top:3px;font-size:.8rem;color:var(--dim)}
.enlace-acciones{white-space:nowrap;text-align:right}
.enlace-acciones form{display:inline}
.enlace-acciones .cta{margin:0 0 0 6px}
/* En el móvil la tabla no se aplasta (una columna de letra a letra no se lee): se
   desplaza de lado dentro de su `.rejilla`, y la página no se ensancha. */
.enlaces-tabla{min-width:760px}
.enlace-cab{flex-wrap:nowrap}
.enlace-cab .hash{white-space:nowrap}
.enlace-det .pill{margin-right:4px}
/* Una dirección de ejemplo dentro de un texto: se parte donde haga falta. */
.hash.parte{overflow-wrap:anywhere}
.enlaces-tabla td:nth-child(2){min-width:190px}
/* La del embudo de las mentorías tiene cuatro columnas más: la mentoría va con su
   nombre corto y los números, más juntos. */
.enlaces-tabla.embudo td:nth-child(2){min-width:0}
.enlaces-tabla.embudo .num{padding-right:12px}

/* ── aula2: el precio y el botón de comprar de una mentoría ─────────────────── */
.compra-precio{font-size:1.6rem;margin:0 0 14px}
.compra form{margin:0}

/* ── Casa Semilla: las mentorías abajo del dashboard, en iconos redondos ───────
   Discretas, al final: pequeñas, en gris y apagadas; el color vuelve al pasar el
   ratón o al llegar con el teclado. Solo CSS (filter), sin una línea de script. */
.mentorias-pie{margin-top:56px}
.mentorias-iconos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 14px;
  margin:24px 0 4px}
/* Con 1:1 al lado: una sola fila, cada columna del mismo ancho, las mentorías a la
   izquierda y el 1:1 a la derecha tras un hueco. Cada grupo lleva su rótulo, pero la
   raya es una sola: el del 1:1 se mete en el hueco (margen negativo = column-gap +
   padding-left, 36px) y empalma con la de «Mentorías…», sigue hasta el «1:1» y, tras
   él, un tramo corto hasta el borde, donde acaba la raya de «Para ti». El tramo de la
   izquierda arranca con esos 36px de más, para que el «1:1» caiga centrado sobre su
   icono. */
.mentorias-pie.con-unoauno{display:grid;column-gap:14px;
  grid-template-columns:repeat(var(--n-mentorias),minmax(0,1fr)) repeat(var(--n-unoauno),minmax(0,1fr))}
.mentorias-pie.con-unoauno .mentorias-grupo{grid-column:span var(--n-mentorias)}
.mentorias-pie.con-unoauno .mentorias-grupo.unoauno{grid-column:span var(--n-unoauno);
  padding-left:22px}
.mentorias-grupo .mentorias-iconos{grid-template-columns:repeat(var(--n-mentorias),minmax(0,1fr))}
.mentorias-grupo.unoauno .mentorias-iconos{grid-template-columns:repeat(var(--n-unoauno-iconos),minmax(0,1fr))}
.mentorias-grupo.unoauno .bandeja-grupo{white-space:nowrap}
.mentorias-pie.con-unoauno .unoauno .bandeja-grupo{margin-left:-36px}
.mentorias-pie.con-unoauno .unoauno .bandeja-grupo::before{content:"";flex:1 0 36px;height:1px;
  background:var(--linea)}
.mentorias-pie.con-unoauno .unoauno .bandeja-grupo::after{flex:1 0 0}
.mentoria-icono{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--dim);text-align:center}
.mentoria-circulo{display:flex;align-items:center;justify-content:center;width:64px;
  height:64px;border-radius:50%;overflow:hidden;background:var(--gris);
  border:1px solid var(--linea);filter:grayscale(1);opacity:.6;
  transition:filter .2s,opacity .2s,transform .2s}
.mentoria-circulo img{width:100%;height:100%;object-fit:cover;display:block}
.mentoria-inicial{font-size:1.5rem;font-weight:650;color:var(--dim)}
.mentoria-icono:hover .mentoria-circulo,
.mentoria-icono:focus-visible .mentoria-circulo{filter:none;opacity:1;transform:translateY(-2px)}
.mentoria-icono:hover,.mentoria-icono:focus-visible{color:var(--tinta)}
.mentoria-nombre{font-size:.78rem;line-height:1.3}
@media(max-width:520px){
  .mentorias-iconos,.mentorias-grupo .mentorias-iconos{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En el móvil no cabe al lado: el 1:1 baja debajo, con su rótulo. */
  .mentorias-pie.con-unoauno{display:block}
  /* Sin el padding-left de escritorio, que aquí no hay hueco que empalmar: si no, el
     rótulo y el icono del 1:1 quedaban corridos frente a la columna de Custodia. */
  .mentorias-grupo.unoauno,.mentorias-pie.con-unoauno .mentorias-grupo.unoauno{margin-top:28px;padding-left:0}
  .mentorias-pie.con-unoauno .unoauno .bandeja-grupo{margin-left:0}
  .mentorias-pie.con-unoauno .unoauno .bandeja-grupo::before{display:none}
  .mentorias-grupo.unoauno .mentorias-iconos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* «Borrar mi cuenta», debajo de la línea del pie y aún más pequeño. */
.pie-borrar{margin:10px 0 0;font-size:.7rem}

/* La salida para quien no está registrado, bajo el botón de entrar. */
.entrar-registro{margin:18px 0 0;font-size:.85rem}

/* ═══ Las tarjetas (6-oct-2026) ════════════════════════════════════════════════
   El dashboard de Casa en tarjetas y la ficha de cada artículo, con la app SNKRS de
   Nike como referencia: tarjetas grandes a todo el ancho con su imagen, el tipo en
   pequeño y el título en grande arriba, y un botón píldora abajo; lo que aún no se
   abre, en un carrusel horizontal (solo CSS: se desliza y encaja). Sin una línea de
   JavaScript, como toda la parte de la persona. */
.tarjetas{display:grid;gap:18px;grid-template-columns:1fr;margin:14px 0 8px}
@media (min-width:760px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tarjeta{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:1/1;border-radius:16px;overflow:hidden;padding:22px 22px 20px;
  text-decoration:none;color:var(--tinta);background:var(--gris);
  border:1px solid var(--linea);transition:transform .2s}
.tarjeta:hover,.tarjeta:focus-visible{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.tarjeta{transition:none}}
/* Sin imagen, cada tipo con su fondo: el quiz en el azul de Semilla. */
.tarjeta-quiz:not(.con-imagen){background:var(--azul-solido);color:#fff;border-color:transparent}
.tarjeta-encuesta:not(.con-imagen){background:var(--blanco)}
/* Cuadradas (1:1, 26-oct): en 4:5 la primera llenaba la pantalla del móvil y no se
   veía que hubiera más debajo. */
/* Con imagen: la foto llena la tarjeta y una sombra arriba y abajo deja leer el texto.
   Sin borde: uno transparente dejaba ver el fondo oscuro como un marco de 1px alrededor
   de la foto. Lo mismo en la miniatura y en la ficha. */
.tarjeta.con-imagen{color:#fff;border:0;background:#111}
.tarjeta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tarjeta.con-imagen::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5))}
.tarjeta.con-imagen .tarjeta-cab{text-shadow:0 1px 12px rgba(0,0,0,.55)}
.tarjeta-cab,.tarjeta-pie{position:relative;z-index:1}
.tarjeta-cab{display:flex;flex-direction:column;gap:4px}
.tarjeta-tipo{font-size:.95rem;opacity:.85}
.tarjeta-tit{font-size:1.7rem;line-height:1.12;font-weight:650;letter-spacing:-.01em}
.tarjeta-pie{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tarjeta-boton{border-radius:999px;padding:11px 22px;font-weight:650;font-size:1rem;
  background:var(--tinta);color:var(--fondo)}
.tarjeta.con-imagen .tarjeta-boton,.tarjeta-quiz:not(.con-imagen) .tarjeta-boton{background:#111;color:#fff}
.tarjeta-marca{font-size:.85rem;padding:5px 11px;border-radius:999px;
  background:rgba(127,127,127,.22)}

/* «Próximamente»: el carrusel de lo que aún no se ha abierto */
.proximamente{margin-top:34px}
.seccion-cab{margin-bottom:14px}
.seccion-tit{font-size:1.55rem;line-height:1.1;margin:0}
.seccion-sub{font-size:1.55rem;line-height:1.1;color:var(--dim)}
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,44%);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  scrollbar-width:thin}
@media (min-width:760px){.carrusel{grid-auto-columns:minmax(0,30%)}}
.mini{scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;
  text-decoration:none;color:var(--tinta)}
.mini-img{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:var(--gris);border:1px solid var(--linea);margin-bottom:8px}
.mini-img.con-imagen{border:0}
.mini-img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.6) brightness(.8)}
.mini-img.tarjeta-quiz:not(.con-imagen){background:var(--azul-solido);opacity:.7}
.mini-candado{position:absolute;right:10px;bottom:10px;width:30px;height:30px;padding:6px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff}
.mini-candado svg,.ficha-candado svg{width:100%;height:100%;display:block}
.mini-tipo{font-size:.85rem;color:var(--dim)}
.mini-tit{font-weight:650;line-height:1.25}
.mini-fecha{font-weight:650}

/* La ficha de un artículo */
.ficha{margin:-6px 0 0}
.ficha-hero{position:relative;display:flex;align-items:flex-end;aspect-ratio:1/1;
  border-radius:16px;overflow:hidden;background:var(--gris);border:1px solid var(--linea);
  padding:24px}
@media (min-width:760px){.ficha-hero{aspect-ratio:16/9}}
.ficha-hero.con-imagen{background:#111;border:0;padding:0}
.ficha-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ficha-hero.tarjeta-quiz:not(.con-imagen){background:var(--azul-solido);color:#fff;border-color:transparent}
.ficha-hero-tit{font-size:2.2rem;line-height:1.05;letter-spacing:-.01em}
.ficha-candado{position:absolute;right:16px;top:16px;width:40px;height:40px;padding:9px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff}
.ficha-info{padding:24px 2px 8px}
.ficha-fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ficha-tipo{font-size:1.05rem;font-weight:600}
.ficha-marca{font-weight:650}
.ficha-tit{font-size:2rem;line-height:1.1;margin:4px 0 10px}
.ficha-datos{font-size:1.1rem;font-weight:600}
.ficha-cuando{font-size:1.1rem;font-weight:650;margin:18px 0 0}
.ficha-resumen{font-size:1.1rem;line-height:1.55;margin:18px 0 0}
.ficha-candado-form{margin:20px 2px 8px}
/* El botón, fijo abajo mientras se lee la ficha: una píldora a todo el ancho. */
.ficha-cta{position:sticky;bottom:16px;margin:26px 0 8px;z-index:2}
.ficha-boton{display:block;text-align:center;border-radius:999px;padding:17px 22px;
  font-size:1.15rem;font-weight:650;text-decoration:none;
  background:var(--tinta);color:var(--fondo);box-shadow:0 6px 20px var(--sombra)}
/* La foto de portada en el editor: la misma proporción que la tarjeta, en pequeño. */
.portada-previa{width:60%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--gris);border:1px solid var(--linea)}
.portada-previa img{width:100%;height:100%;object-fit:cover;display:block}
.portada-previa .hint{display:none}
#portada-quitar[hidden]{display:none}
.portada-previa.vacia{width:auto;aspect-ratio:auto;padding:12px 14px}
.portada-previa.vacia img{display:none}
.portada-previa.vacia .hint{display:block;margin:0}
/* ═══ fin de las tarjetas ═══════════════════════════════════════════════════════ */

/* ═══ Las landings, en la línea de la app (7-oct-2026) ════════════════════════
   La foto arriba, de borde a borde en el móvil; el título grande debajo; el texto
   sin recuadro y más grande; el campo y el botón altos, el botón en píldora. */
.landing-hero{border-radius:16px;overflow:hidden;margin:0 0 24px;background:#111}
.landing-hero img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover}
@media (max-width:520px){
  /* de borde a borde: se come el relleno lateral del body (16 px) */
  .landing-hero{margin:-10px -16px 22px;border-radius:0}
}
.landing-tit{font-size:2.5rem;line-height:1.05;margin:0 0 16px;letter-spacing:-.005em}
@media (max-width:520px){.landing-tit{font-size:2.1rem}}
.landing-texto{font-size:1.15rem;line-height:1.6;margin:0 0 26px}
.landing-texto p{margin:0 0 14px}
.landing-form .etiq{font-size:1rem}
.landing-form input[type=email]{font-size:1.15rem;padding:16px 18px;border-radius:14px;min-height:58px}
.landing-boton{border-radius:999px;padding:17px 22px;font-size:1.2rem;min-height:58px;margin-top:14px}
.landing-form .legal-registro{font-size:.85rem;line-height:1.5;margin-top:16px}
/* ═══ fin de las landings ═══════════════════════════════════════════════════════ */

/* La tarjeta «Más contenido en camino»: sin enlace ni imagen, apagada. */
.tarjeta.bandeja-pronto{opacity:.55;pointer-events:none}