/* WAV · la hoja de estilo del salón y la cocina. Sistema de diseño de WAV (Editorial Noir × Radical Subtraction) llevado a una plataforma de trabajo: misma paleta, familias, líneas finas y radio 0; sin hero, 3D, grano, brillos ni texto en degradé. Oscuro por defecto (operador, torre, moderadora, cocina). Claro para quien viene de fuera (participante, cliente): el servidor pone data-tema="claro" en . Sin JS. Los colores viven SOLO entre los dos comentarios de tokens: un test lo hace cumplir, y otro mide el contraste AA de cada par texto/fondo en los dos temas. */ /* tokens */ :root { /* marca (colors_and_type.css del sistema de WAV) */ --ink: #07070c; --ink-raised: #0f0e17; --paper: #ede7db; --bone: #c7beaa; --grey: #2a2830; --grey-light: #9993a3; --pink: #ff009b; --cyan: #00b4ff; /* derivados para la plataforma: el borde de un control pide 3:1 y la línea fina de marca no llega */ --grey-control: #6f6979; --paper-raised: #f5f1e8; --tinta-2: #4d4756; --tinta-3: #5f596a; --tinta-control: #7d7688; --paper-linea: #d9d0c0; --pink-tinta: #b8006f; --cyan-tinta: #00679a; /* tema oscuro */ --fondo: var(--ink); --fondo-elevado: var(--ink-raised); --texto: var(--paper); --texto-2: var(--bone); --texto-3: var(--grey-light); --acento: var(--pink); --enlace: var(--cyan); --linea: var(--grey); --borde-control: var(--grey-control); --foco: var(--cyan); --pill-fondo: var(--paper); --pill-texto: var(--ink); } :root[data-tema="claro"] { --fondo: var(--paper); --fondo-elevado: var(--paper-raised); --texto: var(--ink); --texto-2: var(--tinta-2); --texto-3: var(--tinta-3); --acento: var(--pink-tinta); --enlace: var(--cyan-tinta); --linea: var(--paper-linea); --borde-control: var(--tinta-control); --foco: var(--cyan-tinta); --pill-fondo: var(--ink); --pill-texto: var(--paper); } /* fin de los tokens */ :root { color-scheme: dark; --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif; --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* escala: solo los pasos chicos del sistema; display-l/m/hero son del sitio de marca */ --t-display-s: clamp(28px, 3.5vw, 56px); --t-body-l: clamp(18px, 1.4vw, 22px); --t-body: clamp(15px, 1.1vw, 18px); --t-body-s: clamp(13px, 0.95vw, 15px); --t-meta: 12px; --t-eyebrow: 11px; --tracking-mono: 0.28em; --tracking-tabla: 0.12em; --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --margen: 16px; --columna: 640px; --columna-formulario: 440px; --columna-amplia: 1120px; --tactil: 44px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; } :root[data-tema="claro"] { color-scheme: light; } @media (min-width: 768px) { :root { --margen: 32px; } } @font-face { font-family: "Bricolage Grotesque"; src: url(fuentes/bricolage-grotesque.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url(fuentes/inter-tight.woff2) format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(fuentes/jetbrains-mono.woff2) format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } /* --- base --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto); font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--acento); color: var(--fondo); } /* --- marco --- */ .cabecera, .marco { width: 100%; max-width: calc(var(--columna) + 2 * var(--margen)); margin: 0 auto; padding-left: max(var(--margen), env(safe-area-inset-left)); padding-right: max(var(--margen), env(safe-area-inset-right)); } .cabecera { padding-top: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--linea); } .marco { padding-top: var(--s-5); padding-bottom: var(--s-7); } .amplio .cabecera, .amplio .marco { max-width: calc(var(--columna-amplia) + 2 * var(--margen)); } .firma { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--texto); text-decoration: none; } /* --- tipografía --- */ h1, h2, h3 { margin: 0; font-weight: 500; } h1 { font-family: var(--font-display); font-size: var(--t-display-s); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--s-5); text-wrap: balance; } h2 { font-family: var(--font-display); font-size: var(--t-body-l); line-height: 1.25; margin-top: var(--s-6); margin-bottom: var(--s-3); } /* h3 y la ceja: mono, mayúsculas, con aire */ h3, .eyebrow { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--texto-2); margin-top: var(--s-5); margin-bottom: var(--s-2); } .eyebrow { font-size: var(--t-eyebrow); margin: 0 0 var(--s-2); } p { margin: 0 0 var(--s-3); max-width: 64ch; } small, .meta { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--texto-3); } strong { font-weight: 500; color: var(--texto); } .acento { color: var(--acento); } .tabular, table, time { font-variant-numeric: tabular-nums; } /* una fecha o una hora no se parte en dos líneas */ time { white-space: nowrap; } blockquote { margin: var(--s-2) 0; padding-left: var(--s-3); border-left: 1px solid var(--acento); color: var(--texto-2); } a { color: var(--texto); text-decoration-line: underline; text-decoration-color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--enlace); } /* --- listas: filas con línea fina, como un registro --- */ main ul, main ol { list-style: none; margin: 0 0 var(--s-4); padding: 0; border-top: 1px solid var(--linea); } main li { padding: var(--s-2) 0; border-bottom: 1px solid var(--linea); } main li ul, main li ol { margin: var(--s-2) 0 0; } /* --- tablas --- */ table { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); margin-bottom: var(--s-4); } caption { text-align: left; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--texto-2); padding-bottom: var(--s-2); } th, td { text-align: left; padding: var(--s-1) var(--s-2) var(--s-1) 0; border-bottom: 1px solid var(--linea); vertical-align: top; } th { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: var(--tracking-tabla); text-transform: uppercase; color: var(--texto-2); } /* --- formularios --- */ form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); max-width: var(--columna-formulario); margin: var(--s-3) 0 var(--s-4); } /* un formulario dentro de una fila (acciones sobre ese registro): en línea, para que la lista siga siendo lista */ li form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--s-1); margin: var(--s-1) var(--s-2) 0 0; display: inline-flex; vertical-align: top; } li form input:not([type="checkbox"], [type="radio"]) { width: auto; } label { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; font-size: var(--t-body-s); font-weight: 500; color: var(--texto-2); } input:not([type="image"]), select, textarea { width: 100%; min-height: var(--tactil); padding: 10px var(--s-2); border: 1px solid var(--borde-control); border-radius: 0; background: var(--fondo-elevado); color: var(--texto); /* 16px como mínimo: iOS no hace zoom al enfocar */ font: 400 max(16px, var(--t-body)) / 1.4 var(--font-body); } /* el texto de ejemplo de un campo se lee con el mismo contraste que el meta */ ::placeholder { color: var(--texto-3); opacity: 1; } input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--acento); } /* la foto que se toca (asientos): a su tamaño declarado, sin relleno ni borde. El toque llega en píxeles de la caja que se ve y el salón lo lee contra ese ancho; si se encoge, el asiento queda corrido. Por eso los campos de ancho completo la excluyen, y lo que se desplaza es su contenedor. */ input[type="image"] { display: block; /* el mismo ANCHO_MOSTRADO de wav/linea/modulos/sala.py (un test los ata): Chromium no toma el atributo width */ width: 960px; height: auto; max-width: none; padding: 0; border: 0; background: none; cursor: crosshair; } form.foto { max-width: none; } .foto-360 { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--linea); } input[type="hidden"] { display: none; } textarea { min-height: 120px; resize: vertical; } button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tactil); min-width: var(--tactil); padding: 10px 20px; border: 1px solid var(--borde-control); border-radius: 0; background: transparent; color: var(--texto); font: 500 15px / 1.2 var(--font-body); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo); } /* todo botón responde al presionar; la píldora, además, al pasar un puntero fino por encima */ button:active { transform: scale(0.97); } /* la acción principal: una por pantalla, la única píldora */ .principal { padding: 16px 28px; border: 0; border-radius: 999px; background: var(--pill-fondo); color: var(--pill-texto); } @media (hover: hover) and (pointer: fine) { button:hover { border-color: var(--enlace); } .principal:hover { transform: scale(1.02); } } .principal:active { transform: scale(0.97); } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; } [role="alert"] { padding: var(--s-2) var(--s-3); border-left: 2px solid var(--acento); background: var(--fondo-elevado); color: var(--texto); } /* --- pantallas de trabajo (cocina): texto de apoyo, código y encabezados de fila --- */ .bajada { color: var(--texto-2); font-size: var(--t-body-s); margin-bottom: var(--s-4); } code, kbd { font-family: var(--font-mono); font-size: 0.85em; color: var(--texto-2); overflow-wrap: anywhere; } /* el encabezado de una fila es su nombre (una ola, un bloque): texto, no ceja */ tbody th, tfoot th { font-family: var(--font-body); font-size: var(--t-body-s); letter-spacing: 0; text-transform: none; color: var(--texto); } /* las tareas de una ola: una fila de enlaces, la actual subrayada en acento */ .pestanas { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: calc(-1 * var(--s-3)) 0 var(--s-5); padding-bottom: var(--s-2); border-bottom: 1px solid var(--linea); font-size: var(--t-body-s); } .pestanas a { display: inline-flex; align-items: center; min-height: var(--tactil); color: var(--texto-2); text-decoration: none; } .pestanas a:hover { color: var(--texto); } .pestanas a[aria-current="page"] { color: var(--texto); text-decoration-line: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 0.5em; } /* cifras: lo que hay que mirar primero, en números tabulares */ .cifras { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: 0 0 var(--s-5); } .cifras dt { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--texto-2); } .cifras dd { margin: var(--s-1) 0 0; font-family: var(--font-display); font-size: var(--t-body-l); font-weight: 500; font-variant-numeric: tabular-nums; } /* columnas de cifras: a la derecha, alineadas por el dígito */ .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } th.num { text-align: right; } .num + td, .num + th { padding-left: var(--s-4); } tfoot th, tfoot td { border-bottom: 0; border-top: 1px solid var(--borde-control); color: var(--texto); } /* un estado: la palabra y una forma que no depende del color. cuadrado lleno = listo · cuadrado vacío = en curso o por decidir · rombo = error, rechazo o sobre el tope */ .estado { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--t-meta); color: var(--texto-2); white-space: nowrap; } .estado::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid currentColor; background: currentColor; } .estado[data-estado="en_curso"], .estado[data-estado="por_decidir"] { color: var(--enlace); } .estado[data-estado="en_curso"]::before, .estado[data-estado="por_decidir"]::before, .estado[data-estado="desbloqueo"]::before { background: transparent; } .estado[data-estado="error"], .estado[data-estado="rechazo"], .estado[data-estado="rechazar"], .estado[data-estado="sobre_tope"], .estado[data-estado="violacion"] { color: var(--acento); } .estado[data-estado="error"]::before, .estado[data-estado="rechazo"]::before, .estado[data-estado="rechazar"]::before, .estado[data-estado="sobre_tope"]::before, .estado[data-estado="violacion"]::before { transform: rotate(45deg); } /* avisos de una decisión: una línea cada uno, con su forma */ main ul.avisos { border-top: 0; margin: 0 0 var(--s-3); } main ul.avisos li { padding: var(--s-1) 0; border-bottom: 0; font-size: var(--t-body-s); } .avisos .estado { white-space: normal; } /* una candidata del informe: una línea fina la separa de la siguiente, sin tarjeta */ .candidata { padding: var(--s-4) 0 var(--s-2); border-top: 1px solid var(--linea); } .candidata:target { border-top-color: var(--enlace); } .tesis { font-size: var(--t-body-l); line-height: 1.35; color: var(--texto); margin-bottom: var(--s-2); } .cita { color: var(--texto-2); } /* en una tabla de citas, las columnas de datos se encogen y la cita se queda con el resto */ table.citas th:not(:last-child), table.citas td:not(:last-child) { width: 1%; white-space: nowrap; padding-right: var(--s-4); } /* lo ya decidido guarda su formulario plegado: se puede cambiar, pero no compite con lo pendiente */ details { margin: var(--s-2) 0 var(--s-3); } /* el triángulo del navegador queda: dice que se despliega */ summary { min-height: var(--tactil); padding: var(--s-2) 0; font-size: var(--t-body-s); color: var(--texto-2); cursor: pointer; } summary:hover { color: var(--texto); } /* lo buscado, marcado dentro de la cita: subrayado de acento, sin fondo chillón */ mark { background: transparent; color: var(--texto); text-decoration-line: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } /* un formulario en fila: los campos crecen, los botones quedan a su lado */ form.en-fila { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); max-width: none; } form.en-fila label { width: auto; } form.en-fila input[size] { width: 10ch; } form.en-fila .ancho { flex: 1 1 280px; } /* la píldora en fila mide lo mismo que los campos a su lado */ form.en-fila .principal { padding-top: 12px; padding-bottom: 12px; } /* --- reproductor: la consola a la izquierda, fija; la cola de dudas a la derecha --- */ .reproductor { display: grid; gap: var(--s-5); } @media (min-width: 1024px) { .reproductor { grid-template-columns: minmax(300px, 360px) 1fr; gap: var(--s-6); align-items: start; } .consola { position: sticky; top: var(--s-4); } } .consola audio { display: block; width: 100%; margin: var(--s-3) 0 var(--s-4); } .reloj { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: var(--t-display-s); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; } .cola h2 { margin-top: 0; } kbd { display: inline-block; min-width: 2.2em; padding: 1px var(--s-1); border: 1px solid var(--borde-control); text-align: center; line-height: 1.4; } button kbd { margin-left: var(--s-1); } .teclas { display: grid; gap: var(--s-1); margin: 0; font-size: var(--t-body-s); } .teclas div { display: grid; grid-template-columns: 5.5em 1fr; align-items: baseline; gap: var(--s-2); } .teclas dd { margin: 0; color: var(--texto-2); } /* una casilla con su palabra, en la misma línea */ label.casilla { flex-direction: row; align-items: center; width: auto; min-height: var(--tactil); font-weight: 400; } /* una duda: línea fina arriba; la actual lleva una línea de enlace a la izquierda */ .duda { padding: var(--s-4) 0 var(--s-2) var(--s-3); border-top: 1px solid var(--linea); border-left: 2px solid transparent; } .duda[aria-current="true"] { border-left-color: var(--enlace); } /* un id se lee tal cual: sin pasarlo a mayúsculas */ .eyebrow.literal { text-transform: none; letter-spacing: 0.08em; } .consola th, .consola td { vertical-align: middle; } .duda > button { margin-bottom: var(--s-1); } /* --- el salón: acciones, estados de la sala y la tablet --- */ /* un link que es la acción principal (abrir el kiosco): la misma píldora que un botón */ a.principal { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tactil); font: 500 15px / 1.2 var(--font-body); text-decoration: none; } a.principal:hover { color: var(--pill-texto); } /* más estados, con la misma regla de forma: lleno = listo · vacío = por hacer · rombo = mal · barra = bloqueado */ .estado[data-estado="vence_pronto"], .estado[data-estado="sin_dato"], .estado[data-estado="avisos"] { color: var(--enlace); } .estado[data-estado="pendiente"]::before, .estado[data-estado="vence_pronto"]::before, .estado[data-estado="sin_dato"]::before, .estado[data-estado="avisos"]::before { background: transparent; } .estado[data-estado="vencido"], .estado[data-estado="falla"], .estado[data-estado="bloqueada"] { color: var(--acento); } .estado[data-estado="vencido"]::before, .estado[data-estado="falla"]::before, .estado[data-estado="bloqueada"]::before { transform: rotate(45deg); } .estado[data-estado="bloqueado"]::before { height: 2px; border: 0; } /* acciones sobre un registro, en una fila que se parte si no cabe */ .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); } .acciones form, td form { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-1); max-width: none; margin: 0; } td form input:not([type="checkbox"], [type="radio"], [type="image"]), td form select, .acciones input:not([type="checkbox"], [type="radio"], [type="image"]), .acciones select { width: auto; } td .acciones, td form { margin-top: var(--s-1); } /* en una pantalla ancha, las acciones de una fila quedan en una línea */ @media (min-width: 1024px) { td .acciones, td .acciones form { flex-wrap: nowrap; } td .acciones button { white-space: nowrap; } } /* una tabla que en el teléfono se desplaza sola, sin mover la página */ .desplaza { max-width: 100%; overflow-x: auto; margin-bottom: var(--s-4); } .desplaza table { margin-bottom: 0; } @media (max-width: 767px) { .desplaza table { min-width: 640px; } } /* grupos de campos: una línea fina arriba y su nombre en mono */ fieldset { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; min-width: 0; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--linea); } legend { float: left; width: 100%; padding: 0; font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--texto-2); } /* dos campos lado a lado cuando hay ancho (modelo y dimensión, opción y puntos) */ .par { display: grid; gap: var(--s-2); width: 100%; } @media (min-width: 560px) { .par { grid-template-columns: 1fr 1fr; } .par.angosto { grid-template-columns: 1fr 7em; } } /* una elección entre pocas opciones: botones o casillas grandes en fila; lo elegido, lleno */ .opciones { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; border: 0; } .opciones button[aria-pressed="true"], .opciones input:checked + span { background: var(--texto); border-color: var(--texto); color: var(--fondo); } /* dentro de un grupo, la pregunta se lee como texto, no como ceja */ .opciones legend { margin-bottom: var(--s-1); font-family: var(--font-body); font-size: var(--t-body-s); letter-spacing: 0; text-transform: none; } .opciones label { position: relative; flex-direction: row; width: auto; } /* la casilla de verdad queda (teclado, lector de pantalla); se ve su palabra */ .opciones input[type="radio"], .opciones input[type="checkbox"] { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; } .opciones input + span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tactil); min-height: var(--tactil); padding: 0 var(--s-2); border: 1px solid var(--borde-control); color: var(--texto); font-size: var(--t-body); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; } /* una alternativa con su explicación (los temas): la explicación va debajo, más chica */ .opciones input + span { flex-direction: column; align-items: flex-start; text-align: left; } /* cuántas se eligen, dicho antes de elegir */ .indicacion { margin: var(--s-2) 0 var(--s-1); color: var(--texto-2); font-size: var(--t-body-s); } /* una alternativa que ya no se puede marcar (se llegó al máximo) */ .opciones input:disabled + span { opacity: 0.4; cursor: not-allowed; } .opciones span small { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-s); color: inherit; opacity: 0.8; } .opciones input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; } /* la puerta: una persona por bloque, cada paso en su fila */ .persona-puerta { padding: var(--s-4) 0 var(--s-3); } .persona-puerta .nombre { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--t-body-l); font-weight: 500; } .paso { display: grid; gap: var(--s-1); padding: var(--s-1) 0; } @media (min-width: 600px) { .paso { grid-template-columns: 10em 1fr; align-items: center; gap: var(--s-2); } } .paso-nombre { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--texto-2); } .paso-nombre output { display: block; margin-top: 2px; font-family: var(--font-body); font-size: var(--t-body-s); letter-spacing: 0; text-transform: none; color: var(--texto); } .paso .opciones input:not([type="radio"]) { width: 6em; } /* la cola sin señal: siempre a la vista arriba mientras se registra */ .cola { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-3); padding: var(--s-2) 0; background: var(--fondo); border-bottom: 1px solid var(--linea); } .cola p { margin: 0; } /* una sección con su número arriba (1 de 4): la ceja va pegada a su título */ section > .eyebrow { margin-top: var(--s-6); } section > .eyebrow + h2 { margin-top: 0; } /* un acto de la guía: su nombre se lee como título, no como ceja */ .acto { padding: var(--s-4) 0 var(--s-3); } .acto h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-body-l); letter-spacing: 0; text-transform: none; color: var(--texto); } .acto .meta { margin-bottom: var(--s-2); } /* los tres vocabularios se leen como una sola tabla: mismas columnas */ table.vocabulario { table-layout: fixed; } table.vocabulario th:nth-child(1) { width: 24%; } table.vocabulario th:nth-child(2) { width: 12%; } table.vocabulario th:nth-child(4) { width: 22%; } /* la hora de un registro de la sala: primera columna, angosta */ th.hora, td.hora { width: 1%; white-space: nowrap; padding-right: var(--s-4); font-variant-numeric: tabular-nums; } /* el índice de bloques: cada tarea es un blanco táctil */ table.bloques th, table.bloques td { vertical-align: middle; } table.bloques .acciones { gap: 0 var(--s-4); margin-top: 0; } table.bloques .acciones a { display: inline-flex; align-items: center; min-height: var(--tactil); } /* la tablet de la sala: se usa de pie y con una mano. Controles de 56 px, letra un paso más grande */ .tactil { --tactil: 56px; } .tactil button, .tactil a.principal { font-size: 17px; } .tactil .principal { min-height: var(--tactil); } /* en la tablet la escala de 1 a 7 cabe en una fila: el formulario toma la columna entera */ .tactil form { max-width: var(--columna); } .tactil .pestanas { font-size: var(--t-body); } /* en el teléfono la acción principal de la tablet ocupa todo el ancho: se alcanza con el pulgar */ @media (max-width: 599px) { .tactil form > .principal { width: 100%; } } /* --- movimiento --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .principal:hover, .principal:active, button:active { transform: none; } }