@charset "utf-8"; /* ============================================================ modulos/traductor.css Se carga después de base.css, panel.css y app.css. Solo lo que es de esta área: todo lo común (tarjetas, botones, campos, cifras, tablas, avisos, cabecera de pantalla) ya viene de ahí. El color es el de la sección: `route()` pone `t-traductor` y app.css lo viste de jade (`--acierto`). Aquí no se escribe ni un color de familia a mano salvo los que significan algo por sí mismos: el ámbar del aviso de falso amigo y el coral del error, que dicen «cuidado» en cualquier sección. ============================================================ */ /* ---------- el reparto ---------- Por el ancho del CONTENEDOR y no de la ventana: la columna lateral de la aplicación se come 15rem a partir de 60rem, así que una consulta por ventana partía en dos columnas una pantalla de 1024 px que por dentro solo tenía 720 px útiles, y la ficha quedaba en un pasillo de 400. */ .tk-traductor { container-type: inline-size; } .tk-tr-rejilla { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "consulta" "salida" "guardadas"; } .tk-tr-consulta { grid-area: consulta; } .tk-tr-salida { grid-area: salida; min-width: 0; } .tk-tr-guardadas { grid-area: guardadas; min-width: 0; } .tk-tr-guardadas:empty { display: none; } @container (min-width: 52rem) { .tk-tr-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "consulta salida" "guardadas salida"; align-items: start; } } /* app.css separa el icono de lo que le sigue con un margen; dentro de un botón o de un aviso ya lo separa su propio hueco y salían dos espacios. */ .tk-traductor :is(.btn, .aviso, .tk-tr-nota-breve) .tk-icono + * { margin-left: 0; } /* ============================================================ 1. La consulta ============================================================ */ .tk-tr-consulta { display: grid; gap: var(--e-4); } .tk-tr-consulta .campo { margin-bottom: 0; } /* Los dos idiomas y el intercambio entre ellos, a la altura de los selectores. Mientras llega la lista del servidor la fila ya ocupa lo que va a ocupar: si no, la caja de texto bajaba de golpe medio segundo después de pintarse, con el cursor ya dentro. */ .tk-tr-idiomas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--e-2); } .tk-tr-idiomas:empty { min-height: 4.75rem; } /* min-width: 0 en el campo Y en el selector: un