/* Equino-cruzaschile · registro genealógico Un sistema de lectura, no un tablero: el criador viene a decidir una cruza, así que cada cifra aparece con su banda y su base de cálculo al lado. */ /* La vista sale al 90 %, que es como el criador trabaja: cabe una fila más de tabla y una generación más del árbol sin tocar el zoom del navegador. Es `zoom` y no un cambio de tipografía a propósito — escala la página entera, márgenes y bordes incluidos, igual que haría el navegador, así que las proporciones del diseño se mantienen intactas. */ html { zoom: 0.9; } :root { --fondo: #f9f6f1; --panel: #ffffff; --panel-alto: #f5f1ea; --borde: #cfc7b8; --rejilla: #e6e0d5; --texto: #171412; --suave: #635c52; --tenue: #8d8579; /* La barra lateral va en negro con rótulos carmesí: es el índice del sistema, y separarla del papel evita que compita con las tarjetas. */ --barra-fondo: #131110; --barra-alto: #221d1c; --barra-texto: #f6f2ec; --barra-borde: #2c2624; /* La escala del informe es una progresión, no cinco colores sueltos: cada banda tiene que distinguirse de su vecina de un vistazo. Los dos primeros tramos eran verdes casi iguales; ahora uno tira a azul y el otro a amarillo, que es la mayor separación posible sin salirse del «zona sana». */ --verde: #0f7d67; /* outcross · verde azulado */ --menta: #6f9612; /* linebreeding suave · verde amarillento */ --ambar: #a97b16; --naranja: #b86432; --rojo: #b04a37; /* El sexo va aparte: cambiar la escala no debe repintar el árbol. */ --sexo-macho: #9b1c31; --sexo-hembra: #2f7d8c; --acento: #9b1c31; --acento-fuerte: #7d1527; --acento-suave: #f6e7e9; --sombra: 0 1px 3px rgb(31 28 24 / 10%); --sobre-fondo: #1f1c18; --sobre-fondo-suave: #6f6759; --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --barra: 300px; } :root[data-tema="oscuro"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-tema="oscuro"] { --fondo: #cfd3d9; --panel: #000000; --panel-alto: #121212; --borde: #3d3d3d; --rejilla: #262626; --texto: #f0f0f0; --suave: #9a9a9a; --tenue: #6b6b6b; --sobre-fondo: #16202f; --sobre-fondo-suave: #55637a; --verde: #43c2a4; --menta: #a9c94f; --ambar: #d7a548; --naranja: #e0925a; --rojo: #cf6f5c; --sexo-macho: #d4415c; --sexo-hembra: #58b6c9; --acento: #d4415c; --acento-fuerte: #b62f47; --acento-suave: #2a1116; --barra-fondo: #000000; --barra-alto: #191113; --barra-texto: #f0f0f0; --barra-borde: #2a2a2a; --sombra: none; } } :root[data-tema="oscuro"] { color-scheme: dark; --fondo: #cfd3d9; --panel: #000000; --panel-alto: #121212; --borde: #3d3d3d; --rejilla: #262626; --texto: #f0f0f0; --suave: #9a9a9a; --tenue: #6b6b6b; --sobre-fondo: #16202f; --sobre-fondo-suave: #55637a; --verde: #43c2a4; --menta: #a9c94f; --ambar: #d7a548; --naranja: #e0925a; --rojo: #cf6f5c; --sexo-macho: #d4415c; --sexo-hembra: #58b6c9; --acento: #d4415c; --acento-fuerte: #b62f47; --acento-suave: #2a1116; --barra-fondo: #000000; --barra-alto: #191113; --barra-texto: #f0f0f0; --barra-borde: #2a2a2a; --sombra: none; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--texto); -webkit-font-smoothing: antialiased; /* Textura difuminada del fondo. Tres manchas de luz y sombra muy abiertas —ninguna con borde visible— que rompen el plano sin dibujar nada reconocible. Van fijas al viewport para que no se arrastren al hacer scroll, que es lo que delataría el truco. */ background-color: var(--fondo); background-image: radial-gradient(1400px 900px at 12% -12%, rgb(255 255 255 / 62%), transparent 62%), radial-gradient(1100px 800px at 96% 4%, rgb(255 255 255 / 34%), transparent 58%), radial-gradient(900px 750px at 46% 118%, rgb(0 0 0 / 9%), transparent 62%), radial-gradient(700px 500px at 78% 62%, rgb(0 0 0 / 5%), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } a { color: inherit; text-decoration: none; } a:hover { color: var(--acento); } h1, h2, h3 { margin: 0; font-weight: 500; } /* ---------- estructura ---------- */ .disposicion { display: flex; min-height: 100vh; } .barra-lateral { position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; width: var(--barra); height: 100vh; flex: 0 0 var(--barra); padding: 18px 0 14px; background: var(--barra-fondo); color: var(--barra-texto); border-right: 1px solid var(--barra-borde); } .marca { display: block; padding: 4px 24px 18px; } .marca .nombre { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: -0.01em; color: var(--barra-texto); } .marca .nombre em { font-style: normal; color: var(--acento); } .marca .bajada { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tenue); } .grupo-nav { margin-bottom: 14px; } .grupo-nav > h2 { padding: 10px 24px 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--acento); } /* Los enlaces heredaban el tamaño del cuerpo; en la barra son el índice del sistema y se leen de reojo, así que van una vez y media más grandes. */ .grupo-nav a { display: flex; align-items: center; gap: 12px; margin: 2px 10px; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--barra-texto); } .grupo-nav a:hover { color: #fff; background: var(--barra-alto); } /* El activo va en macizo, no en tinte: en una barra negra un fondo apenas más claro no se distingue. */ .grupo-nav a.activo { color: #fff; background: var(--acento); border-left-color: transparent; } /* Los iconos van en trazo, heredando el color del enlace: en el activo se vuelven blancos solos. */ .icono { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .etiqueta.acento { color: var(--acento); border-color: var(--acento); background: transparent; } .nota-datos { margin-top: auto; margin-inline: 16px; padding: 18px 20px; border: 1px solid var(--acento); border-left-width: 5px; border-radius: 10px; background: var(--barra-alto); } .nota-datos p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tenue); } .contenido { flex: 1; min-width: 0; } .cabecera { position: sticky; top: 0; z-index: 20; /* Si el nombre es largo, los botones bajan a su propio renglón en vez de aplastarlo. */ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 22px; background: var(--fondo); border-bottom: 1px solid rgb(0 0 0 / 12%); } /* Con el nombre a 51 px, un «FANATICA EN DOMINGO» necesita sitio: si la franja no da, los botones bajan a su propio renglón en vez de taparlo. */ .cabecera .titulo-pagina { flex: 1 1 260px; min-width: 0; } /* El encabezado y el hueco entre tarjetas se apoyan en `--fondo`, que en el tema oscuro es blanco: ahí la tinta tiene que ser oscura, no la clara que usan las tarjetas. */ .cabecera .seccion-actual { font-size: 13.88px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sobre-fondo-suave); } /* Una pantalla puede no querer antetítulo. Si el bloque viene vacío el div sigue existiendo, así que lo escondemos para que no deje un hueco sobre el título. */ .cabecera .seccion-actual:empty { display: none; } /* El nombre del ejemplar es de lo que trata la pantalla: va en negrita y una vez y media más grande. El número de inscripción lo acompaña a la derecha, discreto, porque identifica sin competir con el nombre. */ .cabecera h1 { font-size: 29.14px; font-weight: 700; color: var(--sobre-fondo); line-height: 1.05; } .cabecera h1 .id-encabezado { margin-left: 12px; white-space: nowrap; font-family: var(--mono); font-size: 13.88px; font-weight: 400; letter-spacing: 0; color: var(--sobre-fondo-suave); } /* Los tres botones de la esquina son una fila, no tres piezas sueltas: como rejilla de columnas iguales, todas toman el ancho de la más ancha y se estiran al mismo alto sin que haya que fijar medidas a mano. Si mañana cambia una etiqueta, se reacomodan solas. */ .cabecera .acciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; } .cabecera .acciones .boton { color: var(--sobre-fondo); background: transparent; border-color: var(--borde); justify-content: center; } .cabecera .acciones .boton:hover { color: var(--acento); } .principal { padding: 18px 22px 60px; display: grid; gap: 14px; } /* `display: grid` convierte a cada tarjeta en ítem de rejilla, y un ítem trae `min-width: auto`: reclama el ancho de su contenido más ancho y empuja la página fuera del viewport en vez de encogerse. Con la letra al 140 % eso sacaba 294 px de barra horizontal. */ .principal > * { min-width: 0; } /* El formulario de la baja envuelve dos tarjetas, y como no es rejilla sus hijos no heredaban la separación: los dos cuadros quedaban pegados uno al otro mientras el resto de la pantalla respiraba. Se le da la misma. */ #baja { display: grid; gap: 14px; min-width: 0; } #baja > * { min-width: 0; } /* Pantalla que ocupa la ventana y no se desplaza entera. El listado tiene su propio alto y el resto —barra de selección, nombres de las columnas— se queda quieto. Antes lo resolvía un `sticky` por pieza y un `max-height` a ojo: cuando la suma de lo de arriba no cuadraba con ese alto, la página se desplazaba igual y arrastraba todo. Aquí el listado se queda con lo que sobra, sea lo que sea. */ /* Sólo el registro se comporta así: la ventana no se desplaza y el único que se mueve es el listado. Las demás pantallas siguen desplazándose enteras, que es lo que se espera de un documento. Hace falta bloquear el desplazamiento explícitamente y no confiar sólo en las alturas: con `zoom` los `vh` y la caja real no coinciden al píxel, y ese sobrante bastaba para que la página se corriera y arrastrara la cabecera. */ body:has(.principal.pantalla-fija) { overflow: hidden; } .contenido:has(> .principal.pantalla-fija) { display: flex; flex-direction: column; height: 100dvh; min-height: 0; } .principal.pantalla-fija { flex: 1; min-height: 0; overflow: hidden; grid-template-rows: auto auto 1fr; padding-bottom: 18px; } .principal.pantalla-fija #baja { min-height: 0; grid-template-rows: auto 1fr; } .principal.pantalla-fija .tarjeta-listado { min-height: 0; display: flex; flex-direction: column; } .principal.pantalla-fija .tabla-envoltorio.alto-fijo { flex: 1; min-height: 0; max-height: none; } /* Ya no hace falta despegar nada: nada de lo de arriba se mueve. */ .principal.pantalla-fija .tarjeta-seleccion { position: static; } /* ---------- tarjetas ---------- */ .tarjeta { padding: 16px 18px; background: var(--panel); border: 2px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); } .tarjeta > header { margin-bottom: 14px; } .tarjeta h2 { font-family: var(--serif); font-size: 17.2px; font-weight: 400; } .tarjeta .bajada { margin: 3px 0 0; font-size: 13.88px; color: var(--suave); } .tarjeta .encabezado-con-accion { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .tarjeta .encabezado-con-accion > :first-child { flex: 1 1 300px; min-width: 0; } .rejilla { display: grid; gap: 14px; } /* Sin `min-width: 0` cada tarjeta reclama el ancho de su rótulo más largo —«CONSANGUINIDAD» con su espaciado— y la rejilla crece por debajo hasta sacar la página del viewport. Con la letra un 40 % más grande eso dejaba 1222 px de contenido en una columna de 906. */ .rejilla > * { min-width: 0; } /* Varias rejillas del panel llevan tarjetas condicionales —la cruza del informe sólo aparece si hay una en estudio—. Cuando queda una sola, ocupaba su columna y dejaba la otra vacía: el gráfico salía estrecho y con la mitad derecha en blanco. Sola, se lleva el ancho entero. */ .rejilla > :only-child { grid-column: 1 / -1; } .rejilla.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .rejilla.dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rejilla.ancha-izq { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .rejilla.ancha-der { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } @media (max-width: 1080px) { .rejilla.dos, .rejilla.ancha-izq, .rejilla.ancha-der { grid-template-columns: 1fr; } } .kpi { padding: 14px 16px; } .kpi .rotulo { font-size: 13.88px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .kpi .cifra { margin: 7px 0 4px; font-family: var(--serif); font-size: 30.8px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--acento); } .kpi .cifra.verde { color: var(--verde); } .kpi .cifra.menta { color: var(--menta); } .kpi .cifra.ambar { color: var(--ambar); } .kpi .cifra.naranja{ color: var(--naranja); } .kpi .cifra.rojo { color: var(--rojo); } .kpi .pie { font-size: 13.88px; color: var(--suave); } /* ---------- pastillas y etiquetas ---------- */ .pastilla, .etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 13.88px; white-space: nowrap; border: 1px solid transparent; } /* La pastilla del COI va en macizo, con la banda de color como fondo. En el listado es la cifra que se busca de un vistazo, y un tinte del 10 % junto a texto de 34 px no se distinguía de la celda. El color sigue diciendo la banda: pintarlas todas iguales quitaría el único dato que se lee sin pensar. */ .pastilla { font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 8px; color: #fff; } .pastilla .punto { display: none; } .pastilla.vacia { color: var(--tenue); background: var(--panel-alto); } /* El color va en el fondo y la tinta en blanco. Hace falta repetir `color` aquí: las reglas de banda que vienen más abajo lo fijan para las etiquetas, y sin esto la cifra salía del mismo color que su propio fondo. */ .pastilla.verde { background: var(--verde); color: #fff; } .pastilla.menta { background: var(--menta); color: #fff; } .pastilla.ambar { background: var(--ambar); color: #fff; } .pastilla.naranja { background: var(--naranja); color: #fff; } .pastilla.rojo { background: var(--rojo); color: #fff; } .verde { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 35%, transparent); background: color-mix(in srgb, var(--verde) 10%, transparent); } .menta { color: var(--menta); border-color: color-mix(in srgb, var(--menta) 35%, transparent); background: color-mix(in srgb, var(--menta) 10%, transparent); } .ambar { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 35%, transparent); background: color-mix(in srgb, var(--ambar) 10%, transparent); } .naranja { color: var(--naranja); border-color: color-mix(in srgb, var(--naranja) 35%, transparent); background: color-mix(in srgb, var(--naranja) 10%, transparent); } .rojo { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); background: color-mix(in srgb, var(--rojo) 10%, transparent); } .etiqueta.neutra { color: var(--suave); border-color: var(--borde); background: var(--panel-alto); } /* ---------- tablas ---------- */ .tabla-envoltorio { overflow-x: auto; } /* Listado largo con la cabecera quieta. Con dos mil ancestros a la vista, desplazar la página entera dejaba fuera los nombres de las columnas y la barra de selección: a media lista ya no se sabía qué columna era cuál ni cuántos había marcados. Se desplaza sólo el cuerpo de la tabla; el resto de la pantalla no se mueve. */ .tabla-envoltorio.alto-fijo { max-height: 62vh; overflow-y: auto; border-radius: 10px; } /* `border-collapse: collapse` desactiva el `sticky` de las celdas de cabecera: con los bordes fundidos, el navegador deja de tratarlas como cajas propias y se van con el scroll. Con `separate` y sin separación entre celdas se ve igual y la cabecera se queda. */ .tabla-envoltorio.alto-fijo table.datos { border-collapse: separate; border-spacing: 0; } /* El `sticky` va en el `thead`, no en las celdas. Puesto en los `th` este navegador no lo respeta —la cabecera se va con el scroll— y comprobado en vivo: en el grupo entero se queda quieta. */ .tabla-envoltorio.alto-fijo thead { position: sticky; top: 0; z-index: 3; } .tabla-envoltorio.alto-fijo thead th { /* La fila pegada tapa a las que pasan por debajo: sin fondo propio se transparentaría y se leerían los dos textos encima. */ background: var(--barra-fondo); } table.datos { width: 100%; border-collapse: collapse; font-size: 13.88px; } /* La cabecera va en barra maciza: con la fila de datos a 34 px, un rótulo gris sobre blanco se perdía y costaba saber qué columna se estaba mirando. */ table.datos thead { background: var(--barra-fondo); } table.datos th { padding: 10px 12px; text-align: left; font-weight: 700; font-size: 13.88px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--barra-texto); border-bottom: none; white-space: nowrap; } table.datos thead tr th:first-child { border-radius: 10px 0 0 10px; } table.datos thead tr th:last-child { border-radius: 0 10px 10px 0; } table.datos td { padding: 11px 12px; border-bottom: 1px solid var(--rejilla); vertical-align: middle; } table.datos tbody tr:last-child td { border-bottom: none; } table.datos tbody tr:hover { background: var(--panel-alto); } table.datos .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } /* La pastilla del COI se alinea a la izquierda de su columna, pegada a capa: es el último dato del animal y ahí es donde se lo busca. A la derecha queda el hueco que la separa del botón de la acción. */ table.datos td.coi { text-align: left; } /* El año lleva la tipografía de cifras pero se alinea a la izquierda: pegado al borde derecho de su columna quedaba a un pelo del rótulo de la capa, y un año no es una magnitud que se compare columna abajo. */ table.datos .anio { text-align: left; font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Número de registro y nombre son con lo que el criador identifica la fila: van en negrita y con la tinta plena. El resto de la fila es contexto. */ table.datos .reg { font-family: var(--mono); font-size: 13.88px; font-weight: 700; color: var(--texto); } table.datos .nombre-principal { font-weight: 700; } table.datos .secundario { display: block; font-size: 13.88px; color: var(--tenue); } table.datos .orden { font-family: var(--mono); font-size: 13.88px; color: var(--tenue); width: 24px; } .medidor { display: flex; align-items: center; gap: 8px; } .medidor .canal { flex: 1; height: 5px; min-width: 60px; background: var(--rejilla); border-radius: 3px; overflow: hidden; } .medidor .relleno { height: 100%; background: var(--acento); border-radius: 3px; } .medidor .cuota { font-family: var(--mono); font-size: 13.88px; color: var(--tenue); width: 30px; text-align: right; } /* Listado de cruzas del módulo de color. Una fila por cruza, y el reparto completo sólo cuando se pide: con seis capas por cruza, mostrarlas todas de entrada convierte la pantalla en un muro de tablas. */ /* Las tres columnas del listado se declaran una vez y las comparten el encabezado y todas las filas: si no, cada fila se ancharía según su propio contenido y los rótulos dejarían de caer encima de lo que nombran. */ .encabezado-cruzas, .cruza-capa > summary { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.6fr); align-items: center; gap: 14px; } .encabezado-cruzas { padding: 10px 16px; margin-bottom: 8px; border-radius: 10px; background: var(--barra-fondo); color: var(--barra-texto); font-size: 13.88px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .encabezado-cruzas span:first-child { grid-column: 2; } .listado-cruzas { display: flex; flex-direction: column; gap: 8px; } .cruza-capa { border: 2px solid var(--borde); border-radius: 10px; background: var(--panel); } .cruza-capa[open] { border-color: var(--acento); } .cruza-capa > summary { padding: 12px 16px; cursor: pointer; list-style: none; } .cruza-capa > summary::-webkit-details-marker { display: none; } /* El triángulo lo dibujamos nosotros para que gire al abrir. */ .cruza-capa > summary::before { content: ''; width: 0; height: 0; flex: none; border-left: 7px solid var(--acento); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s ease; } .cruza-capa[open] > summary::before { transform: rotate(90deg); } .cruza-capa > summary:hover { background: var(--panel-alto); border-radius: 8px; } .cruza-capa .celda { min-width: 0; } /* Las tres primeras salidas, en fila y ordenadas de mayor a menor: con una sola no se sabía si el 50 % era la salida clara o un empate a tres. */ .cruza-capa .tres-primeras { display: flex; flex-wrap: wrap; gap: 6px; } .cruza-capa .cruza { display: flex; flex-direction: column; gap: 2px; } .cruza-capa .nombres { font-family: var(--serif); font-size: 17.2px; } .cruza-capa .capas-padres { font-size: 13.88px; color: var(--suave); } .cruza-capa .coi { font-family: var(--mono); font-size: 13.88px; color: var(--suave); } .cruza-capa .mas-probable { display: inline-block; padding: 4px 10px; border-radius: 7px; font-size: 13.88px; font-weight: 700; color: #fff; } .cruza-capa .mas-probable b { font-family: var(--mono); font-weight: 700; } .cruza-capa .mas-probable.segura { background: var(--verde); } .cruza-capa .mas-probable.probable { background: var(--menta); } .cruza-capa .mas-probable.posible { background: var(--ambar); } .cruza-capa .mas-probable.remota, .cruza-capa .mas-probable.nula { background: var(--rejilla); color: var(--suave); } .cruza-capa .detalle { padding: 0 16px 16px; } .cruza-capa .detalle .bajada { margin-top: 10px; } .cruza-capa .detalle .boton { margin-top: 12px; } /* La barra de probabilidad del color de capa. Más alta que un medidor corriente y con el porcentaje escrito dentro: es la fila que el criador recorre de arriba abajo buscando cuál es la salida probable, y el color se lo dice antes de leer la cifra. */ .medidor.probabilidad { gap: 0; } .medidor.probabilidad .canal { height: 26px; border-radius: 7px; background: var(--rejilla); position: relative; overflow: hidden; } .medidor.probabilidad .canal i { display: block; height: 100%; border-radius: 7px; transition: width .2s ease; } .medidor.probabilidad .canal .valor { position: absolute; inset: 0; display: flex; align-items: center; padding-inline: 10px; font-family: var(--mono); font-size: 13.88px; font-weight: 700; color: var(--texto); } .medidor.probabilidad.segura .canal i { background: var(--verde); } .medidor.probabilidad.probable .canal i { background: var(--menta); } .medidor.probabilidad.posible .canal i { background: var(--ambar); } .medidor.probabilidad.remota .canal i { background: var(--tenue); opacity: .5; } /* Sobre el verde macizo la tinta oscura no se lee: en los dos tramos altos el número va en blanco, y sólo mientras la barra lo tape. */ .medidor.probabilidad.segura .canal .valor { color: #fff; } /* ---------- escala de bandas ---------- */ .escala { margin-top: 4px; } .escala .via { position: relative; display: flex; height: 22px; border-radius: 4px; overflow: visible; } .escala .via span { flex: 1; } .escala .via span:first-child { border-radius: 4px 0 0 4px; } .escala .via span:last-child { border-radius: 0 4px 4px 0; } /* Color pleno y un filo entre tramos: la escala tiene que leerse de lejos, porque es lo primero que el criador mira antes de decidir una cruza. */ .escala .via .s0 { background: var(--verde); } .escala .via .s1 { background: var(--menta); } .escala .via .s2 { background: var(--ambar); } .escala .via .s3 { background: var(--naranja); } .escala .via .s4 { background: var(--rojo); } .escala .via span + span { box-shadow: inset 1px 0 0 var(--panel); } .escala .aguja { position: absolute; } .escala .marcas { display: flex; justify-content: space-between; margin-top: 4px; } .escala .marcas span { font-family: var(--mono); font-size: 13.88px; color: var(--suave); } .leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; } .leyenda span { display: inline-flex; align-items: center; gap: 5px; font-size: 13.88px; color: var(--suave); } .leyenda i { width: 10px; height: 10px; border-radius: 3px; } /* ---------- árbol genealógico ---------- */ .arbol { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; } .arbol .generacion { flex: 1; min-width: 230px; display: flex; flex-direction: column; } .arbol .generacion > h3 { margin-bottom: 8px; padding-bottom: 5px; font-size: 13.88px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--borde); } .arbol .columna { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; } .arbol .casilla { padding: 6px 9px; border-radius: 5px; background: var(--panel-alto); border: 1px solid var(--borde); border-left-width: 3px; } .arbol .casilla.macho { border-left-color: var(--sexo-macho); } .arbol .casilla.hembra { border-left-color: var(--sexo-hembra); } .arbol .casilla.sin-sexo { border-left-color: var(--borde); } .arbol .casilla.repetido { border-color: var(--acento); background: var(--acento-suave); } .arbol .casilla.hueca { border-style: dashed; border-left-style: dashed; opacity: 0.55; } .arbol .casilla .nom { display: block; font-size: 13.88px; } .arbol .casilla .meta { font-family: var(--mono); font-size: 13.88px; color: var(--tenue); } .arbol .casilla .aviso { color: var(--acento); } /* ---------- matriz de parentesco ---------- */ .matriz { border-collapse: collapse; font-family: var(--mono); font-size: 13.88px; } .matriz th { padding: 4px 6px; font-weight: 400; color: var(--suave); } .matriz thead th { height: 95px; vertical-align: bottom; } .matriz thead th > span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13.88px; letter-spacing: 0.08em; text-transform: uppercase; } .matriz tbody th { text-align: right; font-family: var(--sans); font-size: 13.88px; color: var(--texto); } .matriz td { width: 42px; height: 36px; text-align: center; border: 1px solid var(--panel); border-radius: 2px; } .matriz td.nulo { background: var(--panel-alto); color: var(--tenue); } .matriz td.bajo { background: color-mix(in srgb, var(--menta) 22%, transparent); } .matriz td.medio { background: color-mix(in srgb, var(--ambar) 40%, transparent); } .matriz td.alto { background: color-mix(in srgb, var(--rojo) 55%, transparent); } .matriz td.diagonal { background: transparent; color: var(--tenue); } /* ---------- controles ---------- */ /* Todos al porte del de «Generar cruza»: el criador los usa con guantes y de pie junto al corral, no con el ratón fino de un escritorio. */ .boton, button.boton, a.boton { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 700; color: var(--acento); background: transparent; border: 2px solid var(--acento); } .boton:hover { background: var(--acento-suave); } .boton.principal { color: #fff; background: var(--acento); border-color: var(--acento); } .boton.principal:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); } .boton.principal:hover { filter: brightness(1.08); color: #fff; } .boton.menudo { padding: 7px 16px; font-size: 18px; } .grupo-botones { display: inline-flex; gap: 12px; border: none; border-radius: 0; overflow: visible; } .grupo-botones a { padding: 9px 20px; font-size: 18px; font-weight: 700; border-radius: 10px; color: var(--acento); border: 2px solid var(--acento); background: transparent; } .grupo-botones a.activo { color: #fff; background: var(--acento); border-color: var(--acento); } .filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .campo { display: flex; flex-direction: column; gap: 4px; } .campo > label { font-size: 13.88px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tenue); } .campo input, .campo select { padding: 5px 8px; font-family: inherit; font-size: 13.88px; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; } /* Los desplegables del simulador llevan la clase en el propio `select`, no en un contenedor, así que `.campo select` no los alcanzaba: quedaban con el tamaño de fábrica del navegador —13 px— mientras el resto de la interfaz iba a 37. Por eso no se leían. Son listas de nombres de caballos que hay que reconocer de un vistazo, así que van más grandes que cualquier otro campo. */ select.campo, select.campo option, .campo select, .campo select option { font-size: 21.76px; line-height: 1.35; } select.campo { display: block; padding: 8px 10px; font-family: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; } .campo select { min-width: 320px; padding: 8px 10px; } .campo.ancho input { min-width: 300px; } /* ---------- avisos y bloques de texto ---------- */ .aviso { padding: 11px 14px; border-radius: 8px; font-size: 13.88px; line-height: 1.55; background: var(--panel-alto); border-left: 3px solid var(--acento); color: var(--suave); } .aviso strong { color: var(--texto); font-weight: 500; } .aviso.verde { border-left-color: var(--verde); background: color-mix(in srgb, var(--verde) 7%, var(--panel-alto)); } .aviso.ambar { border-left-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, var(--panel)); } .aviso + .aviso { margin-top: 9px; } .mensajes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; } .mensajes li { padding: 9px 13px; border-radius: 7px; font-size: 13.88px; background: var(--panel-alto); border-left: 3px solid var(--acento); } .formula { margin: 10px 0; padding: 12px 14px; border-radius: 7px; font-family: var(--mono); font-size: 13.88px; line-height: 1.85; white-space: pre; overflow-x: auto; color: var(--texto); background: var(--panel-alto); border: 1px solid var(--borde); } .definiciones { display: grid; gap: 13px; } .definiciones dt { font-family: var(--serif); font-size: 15px; } .definiciones dd { margin: 3px 0 0; font-size: 13.88px; line-height: 1.55; color: var(--suave); } .lista-limpia { margin: 0; padding-left: 17px; display: grid; gap: 6px; font-size: 13.88px; color: var(--suave); } .lista-limpia strong { color: var(--texto); font-weight: 500; } .lista-limpia code { font-family: var(--mono); font-size: 13.88px; color: var(--acento); } .vacio-total { max-width: 560px; margin: 60px auto; text-align: center; color: var(--sobre-fondo); } .vacio-total h2 { font-family: var(--serif); font-size: 22.8px; margin-bottom: 8px; } .vacio-total p { color: var(--sobre-fondo-suave); font-size: 14.4px; } .vacio-total pre { margin-top: 18px; padding: 14px; text-align: left; overflow-x: auto; font-family: var(--mono); font-size: 13.88px; background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 8px; } /* El SVG se dibuja con medidas propias y se estira a lo que le den. Sin tope, en una tarjeta a todo el ancho se ampliaba al doble y los rótulos del eje salían del tamaño de un titular. Se le pone techo y se centra: crece hasta donde se lee bien y ahí se queda. */ .grafico { width: 100%; max-width: 640px; height: auto; display: block; margin-inline: auto; overflow: visible; } .grafico text { font-family: var(--sans); } .paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .paginacion .donde { font-size: 13.88px; color: var(--tenue); } .tarjeta-progenitor { padding: 13px 15px; background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 9px; } .tarjeta-progenitor .rotulo { font-size: 13.88px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .tarjeta-progenitor .nom { margin: 5px 0 8px; font-family: var(--serif); font-size: 18.2px; } .datos-en-linea { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.88px; } .datos-en-linea > div { display: flex; gap: 6px; } .datos-en-linea .k { color: var(--tenue); } .datos-en-linea .v { font-family: var(--mono); } .cruzando { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; } .cruzando .aspa { font-size: 20.6px; color: var(--tenue); } /* Con los nombres a 53 px, dos columnas dejan cada desplegable en 300 px y el nombre se corta. Padrillo y yegua se apilan salvo en pantallas muy anchas. */ @media (max-width: 980px) { .cruzando { grid-template-columns: 1fr; } .cruzando .aspa { text-align: center; } } /* El botón de confirmación ocupa todo el ancho de la rejilla y va centrado: elegir en los desplegables ya no dispara nada por su cuenta, así que ésta es la única forma de pedir la evaluación y tiene que verse sin buscarla. */ .confirmar-cruza { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; text-align: center; } .confirmar-cruza .bajada { margin: 0; } .boton.grande { padding: 13px 30px; font-size: 18px; border-radius: 10px; } .boton.grande[disabled] { opacity: .45; cursor: not-allowed; } .resultado-grande { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .resultado-grande .cifra-gigante { font-family: var(--serif); font-size: 50.4px; line-height: 1; font-variant-numeric: tabular-nums; } .resultado-grande .veredicto { flex: 1; min-width: 270px; } .resultado-grande .veredicto h3 { font-family: var(--serif); font-size: 17.2px; font-weight: 400; } .resultado-grande .veredicto p { margin: 3px 0 0; font-size: 13.88px; color: var(--suave); } .comparaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 20px; margin-top: 14px; } .comparaciones > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.88px; padding: 3px 0; border-bottom: 1px solid var(--rejilla); } .comparaciones .k { color: var(--suave); } .comparaciones .v { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---------- búsqueda del registro ---------- Un solo campo: número de inscripción o nombre. Es la puerta de entrada al registro, así que ocupa el ancho y se lleva el foco al cargar. */ .buscar-ejemplar label { display: block; margin-bottom: 7px; font-size: 13.88px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } /* El campo ocupaba todo el ancho de la tarjeta para escribir seis dígitos. Se queda con el 40 % y el resto de la fila es aire. */ .linea-busqueda { display: flex; gap: 9px; align-items: stretch; max-width: 40%; } .linea-busqueda input { flex: 1; min-width: 0; padding: 9px 13px; font-family: var(--sans); font-size: 17.2px; color: var(--texto); background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 7px; } .linea-busqueda input::placeholder { color: var(--tenue); } .linea-busqueda input:focus { outline: 2px solid var(--acento); outline-offset: -1px; } .linea-busqueda .boton { padding-inline: 26px; font-size: 18px; } @media (max-width: 620px) { .linea-busqueda { flex-wrap: wrap; } .linea-busqueda input { flex-basis: 100%; } } /* ---------- vista previa de la fuente ---------- Lo que trae el portal antes de inscribirlo. Se distingue del registro propio con un borde de acento: en esta tarjeta nada está guardado todavía. */ .vista-previa { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); } .vista-previa .arbol .casilla { padding: 5px 8px; } .vista-previa .arbol .generacion { min-width: 150px; } .vista-previa .arbol .generacion > h3 { display: flex; gap: 6px; align-items: baseline; } /* ---------- baja de ejemplares ---------- Borrar no se deshace: el botón se distingue del resto y la confirmación enseña el daño antes de ejecutarlo. */ .boton.peligro { color: #fff; background: var(--acento); border-color: var(--acento); } .boton.peligro:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; } .aviso.rojo-fuerte { border-left-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 10%, var(--panel-alto)); } /* La barra vive en su propio cuadro, así que el relleno y el borde los pone la tarjeta: aquí sólo queda la disposición. Pegada arriba, acompaña mientras se recorre el listado. */ .tarjeta-seleccion { position: sticky; top: 78px; z-index: 4; padding: 10px 14px; } .tarjeta-seleccion .bajada { margin: 0 0 8px; } .tarjeta-seleccion .tabla-envoltorio { margin-top: 10px; } /* La tarjeta del listado sangra igual que la de la cabecera: cuatro píxeles de diferencia bastaban para que los rótulos dejaran de caer sobre su columna. */ .tarjeta-listado { padding: 10px 14px; } /* La cabecera va en un cuadro y las filas en otro, así que son dos tablas distintas. Sólo coinciden si las dos reparten el ancho igual: `fixed` hace que manden las medidas del `colgroup` y no el contenido de cada celda —si no, una capa larga ensancharía su columna abajo y no arriba, y los rótulos dejarían de caer sobre lo que nombran. */ table.datos.columnas-registro, table.datos.columnas-ficha { table-layout: fixed; } table.datos.columnas-registro td, table.datos.columnas-registro th, table.datos.columnas-ficha td, table.datos.columnas-ficha th { overflow-wrap: anywhere; } .barra-seleccion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .barra-seleccion .cuenta { font-size: 13.88px; color: var(--suave); } /* El total va a la derecha de los marcados, pegado al borde: es la referencia contra la que se lee la cuenta —tres de trece— y estaba arriba del todo, fuera de la vista en cuanto se bajaba por el listado. */ .barra-seleccion .cuenta.total { margin-left: auto; margin-right: 14px; font-weight: 700; color: var(--texto); } /* Las casillas nunca entraron en las escaladas: quedaron en los 13 px de fábrica del navegador, imposibles de acertar junto a un texto de 37 px. Van al tamaño del texto, y la celda entera es zona de clic. */ input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); cursor: pointer; flex: none; } /* La columna de la casilla. Se llamaba `marca` como el logo de la barra lateral, y el estilo de aquél —`padding: 4px 24px 18px`— se colaba en la celda y descuadraba la casilla dentro de su columna. */ table.datos td.casilla, table.datos th.casilla { padding: 0; text-align: center; cursor: pointer; } table.datos td.casilla input { display: inline-block; vertical-align: middle; } .barra-seleccion label { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; } .barra-seleccion .cuenta strong { color: var(--texto); } table.datos input[type="checkbox"] { accent-color: var(--acento); cursor: pointer; } tr.marcada { background: var(--acento-suave); } /* Publicado en esta generación, pero sin saber en qué posición. No es un hueco ni una casilla firme: se distingue de ambos. */ .arbol .casilla.sin-situar { border-style: dashed; border-left-color: var(--ambar); background: color-mix(in srgb, var(--ambar) 7%, transparent); } /* De dónde salió el dato de una ranura. Discreto a propósito: antes reutilizaba el realce naranja de «ancestro repetido» y se leía como un error. */ .arbol .casilla .fuente-dato { color: var(--tenue); font-size: 13.88px; } .clave-sexo { display: inline-flex; align-items: center; gap: 4px; } .clave-sexo::before { content: ""; width: 8px; height: 8px; border-radius: 2px; } .clave-sexo.macho::before { background: var(--sexo-macho); } .clave-sexo.hembra::before { background: var(--sexo-hembra); } /* El número de inscripción va pegado al nombre: es como el criador identifica a un ejemplar, y en un árbol con homónimos el nombre solo no basta. */ .id-inscripcion { font-family: var(--mono); font-size: 13.88px; color: var(--tenue); white-space: nowrap; } .arbol .casilla .nom { line-height: 1.35; } /* Marcador de posición. Una raya fina se perdía sobre el color pleno de los tramos, así que ahora es una aguja con contorno propio y una punta que la ancla al punto exacto: se ve dónde cae sin tener que buscarla. */ .escala { padding-top: 15px; } .escala .aguja { top: -9px; width: 5px; height: 43px; margin-left: -2.5px; background: var(--texto); border-radius: 2.5px; box-shadow: 0 0 0 2px var(--panel), 0 1px 4px rgb(0 0 0 / 35%); pointer-events: none; } .escala .aguja::before { content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--texto); filter: drop-shadow(0 0 1px var(--panel)); } /* La fila del total cierra la tabla de profundidad: es donde el criador comprueba que la suma de los niveles da la cifra de la tarjeta de arriba. */ table.datos tfoot tr.total td { border-top: 1px solid var(--borde); border-bottom: none; padding-top: 9px; } table.datos tfoot tr.total strong { font-size: 15px; } /* El punto de «aparece en ambas líneas» va pegado al número de inscripción, que es donde el ojo ya está mirando para identificar al ejemplar. */ .arbol .casilla .marca-repetido { margin-left: 5px; color: var(--acento); font-size: 13.88px; vertical-align: 1px; } /* La fila recién dada de alta. En un listado largo «no aparece» casi siempre es «no la encuentro»: el realce dura lo justo para señalarla. */ table.datos tr.recien-anadido td { background: color-mix(in srgb, var(--acento) 16%, transparent); animation: senalar 2.4s ease-out 1; } table.datos tr.recien-anadido td:first-child { box-shadow: inset 3px 0 0 var(--acento); } @keyframes senalar { from { background: color-mix(in srgb, var(--acento) 42%, transparent); } } @media (prefers-reduced-motion: reduce) { table.datos tr.recien-anadido td { animation: none; } } /* Árbol profundo. A partir de la sexta generación las columnas se estrechan y las casillas se aprietan: con 128 ranuras en una columna, el nombre y el número siguen siendo lo único que hace falta leer. */ .arbol.hondo .generacion { min-width: 180px; } .arbol.hondo .casilla { padding: 3px 6px; } .arbol.hondo .casilla .nom { font-size: 12.2px; } .arbol.hondo .casilla .meta { font-size: 9.6px; } .arbol.hondo .id-inscripcion { font-size: 9.6px; } .arbol.hondo .columna { gap: 2px; } /* «REGISTRO INEXISTENTE»: el portal ocupó la ranura para decir que ahí no hay ficha. No es un caballo ni un hueco, y se lee distinto de los dos. */ .casilla.inexistente { border-left-color: var(--tenue); border-style: dashed; } .casilla.inexistente .nom { color: var(--tenue); font-style: italic; } /* ---------- confirmación de una baja ---------- Centrado y por encima de todo: lo que se va no vuelve solo, así que la pregunta tiene que cortar lo que se estaba haciendo, no aparecer al margen. */ .confirmar { max-width: 460px; padding: 0; border: 2px solid var(--acento); border-radius: 12px; background: var(--panel); color: var(--texto); box-shadow: 0 18px 50px rgb(0 0 0 / 22%); } .confirmar::backdrop { background: rgb(23 20 18 / 45%); } .confirmar h2 { margin: 0; padding: 16px 22px; font-family: var(--serif); font-size: 21.5px; font-weight: 400; color: #fff; background: var(--acento); border-radius: 9px 9px 0 0; } .confirmar .detalle { margin: 0; padding: 18px 22px; font-size: 15px; line-height: 1.55; color: var(--texto); } .confirmar .acciones { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 18px; } /* Sin menú al costado, la pantalla de ingreso se queda con todo el ancho. Centrarla evita que la tarjeta quede pegada al margen izquierdo, sola en medio de una página vacía. */ .contenido.sin-menu .principal { justify-items: center; padding-top: 6vh; } .contenido.sin-menu .cabecera { justify-content: center; } .contenido.sin-menu .titulo-pagina { flex: 0 1 auto; text-align: center; } /* ---------- ingreso con Google ---------- El botón va del ancho de la tarjeta y con el logotipo a la izquierda, que es como lo espera cualquiera que haya entrado a otro sitio con Google. El fondo blanco y el borde gris son los de la marca: cambiarlos lo haría parecer una imitación. */ .tarjeta-ingreso { max-width: 460px; } .boton.google { width: 100%; justify-content: center; margin-bottom: 4px; color: #1f1f1f; background: #fff; border: 1px solid #747775; font-weight: 500; } .boton.google:hover { background: #f2f2f2; } .icono-google { width: 19px; height: 19px; flex: 0 0 auto; } /* La raya con la palabra al medio: dos líneas que se reparten lo que sobra. */ .o-bien { display: flex; align-items: center; gap: 12px; margin: 18px 0; } .o-bien::before, .o-bien::after { content: ''; flex: 1; height: 1px; background: var(--rejilla); } .o-bien span { font-size: 13.88px; color: var(--tenue); } .cabecera .acciones .salir { display: contents; } /* ---------- formulario de ingreso ---------- Una sola pantalla lo usa —la puerta de la administración—, así que son las cuatro reglas que hacen falta para que el campo se parezca al del buscador del registro y no al gris del navegador. */ .formulario p { margin: 0 0 14px; } .formulario label { display: block; margin-bottom: 6px; font-size: 13.88px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .formulario input[type="text"], .formulario input[type="password"] { width: 100%; padding: 9px 13px; font-family: var(--sans); font-size: 17.2px; color: var(--texto); background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 8px; } .formulario input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } /* ---------- papel ---------- Todo lo de abajo sólo existe al imprimir o al guardar en PDF. La hoja es A4 vertical: 210 mm de ancho, de los que quedan 190 útiles. Ese ancho manda sobre las medidas de pantalla, que están pensadas para un monitor y en papel parten los años en «2/0/2/1» y los nombres a la mitad. */ .solo-papel { display: none; } @media print { @page { size: A4 portrait; margin: 14mm 10mm 16mm; } /* Los grises de pantalla están medidos contra un monitor retroiluminado. Impresos en tinta sobre papel quedan lavados, sobre todo el texto de apoyo, que es la mitad de la metodología. Se oscurecen los tonos y se aclaran los fondos, sin tocar la escala de bandas ni el carmesí: esos colores llevan información. */ :root, :root[data-tema="oscuro"] { --texto: #000; --suave: #333; --tenue: #555; --sobre-fondo: #000; --sobre-fondo-suave: #444; --fondo: #fff; --panel: #fff; --panel-alto: #f2f2f2; --borde: #999; --rejilla: #ccc; --sombra: none; } /* Lo que sólo sirve para operar el sistema no se imprime. */ .barra-lateral, .cabecera .acciones, .boton, .grupo-botones, .buscar-ejemplar, .paginacion, .aviso-vivo, input[type="checkbox"], dialog { display: none !important; } /* El cuadro de la cabecera fija no va al papel: su tabla la reemplaza la cabecera repetida del listado. De todo ese cuadro sólo sobrevive el total, que en una hoja suelta dice de cuántos ejemplares se trata. */ .tarjeta.tarjeta-seleccion { border: 0; padding: 0; margin: 0 0 6pt; background: none; } .tarjeta-seleccion .tabla-envoltorio, .tarjeta-seleccion > .bajada, .barra-seleccion > *:not(.cuenta.total) { display: none !important; } .tarjeta-seleccion .barra-seleccion { display: block; padding: 0; border: 0; background: none; } .cuenta.total { font-size: 9pt; color: #000; } /* La pantalla ancla el alto al viewport para que el listado se desplace dentro de su caja. En papel no hay viewport: todo tiene que fluir y crecer hasta donde haga falta. */ html { zoom: 1; } body, body:has(.principal.pantalla-fija) { background: #fff; color: #000; overflow: visible; font-size: 9.5pt; line-height: 1.35; } .disposicion { display: block; } .contenido, .principal, .principal.pantalla-fija { display: block; height: auto; max-height: none; overflow: visible; padding: 0; } .principal.pantalla-fija .tarjeta-listado, .tabla-envoltorio, .tabla-envoltorio.alto-fijo { max-height: none; height: auto; overflow: visible; } /* Encabezado de la pantalla: en papel es el título del documento, arriba de la primera hoja y nada más. */ .cabecera { position: static; padding: 0 0 6pt; margin-bottom: 10pt; border-bottom: 1.5pt solid #000; background: #fff; } .cabecera h1 { font-size: 17pt; color: #000; } .cabecera .seccion-actual { font-size: 8pt; color: #444; } /* Un cuadro es una caja de pantalla. En papel se queda con un filete y, si es corto, se evita que lo parta un salto de hoja. El listado es la excepción: tiene que poder repartirse en todas las hojas que necesite. */ .tarjeta { break-inside: avoid; border: 0.75pt solid #999; box-shadow: none; border-radius: 0; padding: 8pt 10pt; margin-bottom: 8pt; background: #fff; } .tarjeta-listado { break-inside: auto; padding: 0; border: 0; } /* Las medidas del colgroup están calculadas para un monitor: dejan 42 px de casilla y 142 px de botón que en papel salen vacíos, y aprietan el resto hasta partir las palabras. En la hoja el navegador reparte las columnas según lo que llevan dentro. */ table.datos { table-layout: auto !important; width: 100%; font-size: 8.5pt; } table.datos col { width: auto !important; } table.datos th, table.datos td { padding: 3pt 4pt; border-color: #bbb; overflow: visible; text-overflow: clip; white-space: normal; } /* Los datos cortos no se parten nunca: un año en «202/1» o un número de inscripción en «29683/5» no se leen. Los nombres largos sí pueden repartirse en dos renglones, que para eso son texto. */ table.datos th, table.datos .reg, table.datos .anio, table.datos .sexo, table.datos .coi, table.datos .num { white-space: nowrap; } /* Cabecera repetida en cada hoja: la de pantalla se esconde, ésta aparece. */ .solo-papel { display: table-header-group; } table.datos thead { display: table-header-group; } table.datos thead th { background: #e8e8e8 !important; color: #000 !important; font-size: 7.5pt; letter-spacing: 0.04em; border-bottom: 0.75pt solid #666; } tr { break-inside: avoid; } /* La casilla de selección y el botón de simular no llevan nada al papel: fuera, y las dos columnas se cierran solas. */ table.datos .casilla, table.columnas-registro th:last-child, table.columnas-registro td:last-child, table.columnas-ficha th:last-child, table.columnas-ficha td:last-child { display: none; } /* Subrayados y color de enlace son señales de pantalla; en papel sólo ensucian. El nombre del ejemplar conserva la negrita, que sí informa. */ a { color: #000; text-decoration: none; } /* La pastilla del COI es el dato central del sistema: su color dice en qué banda cae. Sin esto el navegador la imprimiría en gris. */ .pastilla { border: 0.5pt solid #666; print-color-adjust: exact; -webkit-print-color-adjust: exact; font-size: 8pt; } .barra, .barra span, .grafico, svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* El árbol es una fila que en pantalla se desplaza de lado: cada generación reclama 230 px y las que no caben quedan fuera de la vista, a un tirón de ratón. En papel no hay tirón: lo que se sale del ancho de la hoja se pierde, y así salían las columnas cortadas por la mitad. En la hoja las generaciones se reparten el ancho disponible en partes iguales y la letra de las casillas baja para que quepan los nombres. */ .arbol { overflow: visible; gap: 5pt; } .arbol .generacion, .arbol.hondo .generacion, .arbol .columna { min-width: 0; } .arbol .generacion { flex: 1 1 0; } /* El número de inscripción va en una sola línea para que se lea de un vistazo, pero eso impide que la casilla se angoste: la última generación terminaba saliéndose del papel. En la hoja se le permite doblar. */ .arbol .casilla, .arbol .casilla .id-inscripcion, .arbol .casilla .meta { white-space: normal; overflow-wrap: anywhere; } .arbol .generacion > h3 { font-size: 6.5pt; letter-spacing: 0.04em; } .arbol .casilla, .arbol.hondo .casilla { padding: 2.5pt 4pt; } .arbol .casilla .nom, .arbol.hondo .casilla .nom { font-size: 7.5pt; line-height: 1.25; } .arbol .casilla .meta, .arbol.hondo .casilla .meta, .arbol .casilla .fuente-dato, .arbol .id-inscripcion, .arbol.hondo .id-inscripcion { font-size: 6.5pt; } /* Un árbol de seis generaciones no cabe en una hoja: mejor que se reparta en dos que no que se corte. */ .tarjeta:has(.arbol) { break-inside: auto; } /* Metodología y los textos largos: ni títulos huérfanos al pie de una hoja ni renglones sueltos al empezar la siguiente. */ h2, h3, h4 { break-after: avoid; page-break-after: avoid; } p, li { orphans: 3; widows: 3; } }