/* docs/logica/estilos.css
 *
 * Lo que comparten las notas de Lógica. Va acá y no en base.css por la regla de
 * capas del brief: base.css es el sistema de diseño de TODO el sitio, y estas
 * clases son de una materia. Física no las necesita y no tiene por qué
 * heredarlas.
 *
 * Nació de recoger lo que estaba duplicado entre notas, copiado tal cual. Desde
 * entonces también aloja clases que se inventan para una sola nota —como
 * `.tabla-op`— cuando el control es de la materia y no del sitio: ese es el
 * criterio de qué entra acá y no en `base.css`, no que todo lo de acá tenga que
 * venir de una copia. */

/* La fila de un widget: el dibujo a la izquierda, los controles a la derecha,
   y en pantalla angosta uno debajo del otro. */
.fila-widget { display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start }
.fila-widget > .lado { flex:1 1 300px; min-width:260px }

/* Los dos avisos. El rojo dice que algo se rompió -- nunca es decorativo. */
.aviso { font:400 13px/1.5 'Source Serif 4',Georgia,serif; color:var(--red); margin:0 }
.aviso-ok { font:400 13px/1.5 'Source Serif 4',Georgia,serif; color:var(--dim); margin:0 }

/* El diagrama de Hasse. `overflow:visible` porque los rótulos sueltos cuelgan
   a la izquierda de los nodos y si no se recortan contra el viewBox. */
svg.hasse { width:100%; max-width:420px; display:block; margin:0 auto; overflow:visible }
.nodo { cursor:pointer }
/* El nodo es un botón de verdad: se llega con Tab y se activa con Enter o
   Espacio (ver hasse.js). El anillo usa el --blue que ya existe. */
.nodo:focus-visible { outline:2px solid var(--blue); outline-offset:2px }
.nodo text { font-family:'JetBrains Mono',monospace; font-weight:500; pointer-events:none; user-select:none }

/* El SVG de un morfismo (flechas entre dos posets, dibujarMorfismo en
   morfismo.js). Vivía en el <style> de la nota 2 con un solo consumidor; se
   muda acá porque ahora hay una segunda nota que llama a dibujarMorfismo,
   que era la condición registrada en la §8 del Bloque I. */
svg.morfismo { width:100%; max-width:520px; display:block; margin:0 auto; overflow:visible }

/* La rejilla de "un <select> por elemento" que arma F a mano. Existía dos
   veces con un píxel de diferencia -- acá con 3px 5px, y en la otra nota
   como estilo inline con 3px 4px-- y quedó registrada como deuda en la §8
   del Bloque I. Gana el 3px 5px: es el mismo valor que ya usa `.tabla-op`
   más abajo para sus <span> chicos en mono, así que unifica con una
   convención que ya está en este archivo en vez de dejar dos medidas
   parecidas sueltas. */
.asignacion { display:flex; flex-wrap:wrap; gap:6px }
.asignacion label { display:flex; align-items:center; gap:4px; font:500 11px/1 'JetBrains Mono',monospace; color:var(--dim) }
.asignacion select { padding:3px 5px; font-size:11px }

/* La lista de condiciones que pinta condiciones.js: «esto vale / esto no, y
   acá está el que lo rompe». El ✓ va neutro y el ✕ y su testigo van en --red,
   que es el reparto de decisiones.md #4 -- un booleano verdadero no es «lo que
   estás mirando», así que no va azul. */
.condiciones { display:flex; flex-direction:column; gap:9px; margin-top:4px }
.condicion { display:flex; align-items:baseline; gap:8px; font:400 13px/1.45 'Source Serif 4',Georgia,serif }
.condicion .marca { font:600 13px/1 'JetBrains Mono',monospace; width:1.1em; flex-shrink:0 }
.condicion.vale .marca { color:var(--dim) }
.condicion.falla .marca { color:var(--red) }
.condicion.falla .porque { color:var(--red) }
.condicion .porque { display:block; font-size:12px; color:var(--dim); margin-top:2px }

select { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:6px 8px }
.boton[aria-pressed="true"] { color:var(--ink); border-color:var(--ink) }
code { font:500 .92em/1 'JetBrains Mono',monospace }

/* Las dos tablas de operación del ensayo de la Guía 4. Rejilla de 5 columnas
   —el encabezado más los cuatro elementos— porque una <table> de verdad pide
   mucho markup para algo que es un control, no un dato tabular. */
.tabla-op { display:grid; grid-template-columns:repeat(5,auto); gap:2px; justify-content:start; align-items:center }
.tabla-op > span { padding:3px 5px; font-size:12px; color:var(--dim); text-align:center }
.tabla-op > span.cabecera { color:var(--ink); font-weight:500 }
/* Misma convención de foco que los nodos de un diagrama: dieciséis <select> por
   tabla es lo más tabulable de la nota, y el anillo del navegador se pierde
   contra el fondo de la banda en oscuro. */
.tabla-op select:focus-visible { outline:2px solid var(--blue); outline-offset:2px }