/* Panel de RRHH: lo que es SOLO de este sistema.
   La ropa común (colores, letra, fondo, la barra de arriba, el menú del lado, botones, casillas, listas, etiquetas, tarjetas,
   avisos, diálogos, pestañas, pastillas y el ingreso) es la del estilo único de VITRIX: vitrix/vitrix.css, que la página carga
   antes. La guía es estilo/LEEME.md. Aquí queda cómo se acomodan esas piezas en las pantallas de RRHH y las piezas que no
   trae el estilo: la ficha de datos, un texto de varios renglones, los pasos de un caso, la línea de tiempo, la lista de
   pendientes de un ingreso o una salida, las columnas de candidatos, calificar de 1 a 5, la foto de un documento, la
   contraseña temporal y la hoja de una carta (lo que se imprime).
   Aquí no se escribe ningún color de pantalla a mano: solo las variables «--vx-». Los únicos colores escritos son la tinta
   de lo que se imprime (la hoja de una carta), que sale como salía.

   Nombres que quedaron en las pantallas solo como nombre, sin regla aquí (los buscan el programa y las pruebas): «boton»,
   «fuerte», «peligro», «chico», «nota», «gris», «roja», «verde», «ficha», «error», «resumen», «campo», «casilla», «dlg»,
   «pie-dlg», «aviso-flotante», «queda», «avisos», «franja», «tabla-zona», «acciones», «fijo», «apagada», «total», «pestanas»,
   «activa», «filtros», «vacio», «ayuda», «ingreso», «cuerpo» y «cuenta». */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:where(.vx-contenido, .vx-dialogo) b { font-weight: 600; }

/* ---------------------------------------------------------------- cómo se acomoda una pantalla */
/* El renglón gris de apoyo (el color se lo da «vx-gris» o «vx-subtitulo»). */
.sub { font-size: 13px; }
.pantalla > .sub { margin: 0 0 14px; }
.pantalla > .vx-cabeza + .sub { margin-top: -10px; }
.separado { margin-top: 18px; }
.sub + .vx-tarjeta, .sub + .vx-tarjeta-lista, .sub + .vx-filtros, .sub + .vx-acciones, .sub + .vx-cifras { margin-top: 10px; }
.vx-cabeza + .vx-seccion { margin-top: 4px; }
.vx-filtros + .separado, .vx-acciones.separado + .separado { margin-top: 0; }
.vx-acciones.separado { margin-bottom: 12px; }
.subtitulo { font-size: 14px; font-weight: 600; }
.vx-miga { margin-bottom: 6px; }
/* El título de una tarjeta con su botón al lado; y un subtítulo de la pantalla con el suyo. */
.vx-tarjeta > .vx-cabeza { align-items: center; margin-bottom: 8px; }
.vx-cabeza > .vx-tarjeta-titulo, .vx-cabeza > .vx-seccion, .vx-cabeza > .subtitulo { margin: 0; }
.vx-cabeza.separado { align-items: center; margin: 26px 0 10px; }
.vx-dialogo-cuerpo .vx-cabeza { align-items: center; margin-bottom: 4px; }
.vx-dialogo-cuerpo .vx-cabeza.separado { margin: 18px 0 4px; }
/* Las casillas sueltas en un renglón de filtros (el patrono, la clase, una fecha) no ocupan todo el ancho. */
.vx-filtros > .vx-casilla.vx-casilla, .vx-acciones > .vx-casilla.vx-casilla { display: block; width: auto; max-width: 100%; flex: 0 1 auto; }
.vx-filtros > .vx-marcar, .vx-filtros > .sub { align-self: center; }
.vx-acciones > .sub { align-self: center; }
/* Campos, formularios y casillas de marcar, uno debajo de otro. */
.vx-campo, .vx-formulario { margin-top: 12px; }
.vx-ingreso-tarjeta .vx-formulario, .vx-dialogo-cuerpo > .vx-campo:first-child, .vx-dialogo-cuerpo > .vx-formulario:first-child { margin-top: 0; }
.vx-formulario > div > .vx-campo:first-child { margin-top: 0; }
.vx-marcar { width: fit-content; margin-top: 6px; }
.vx-filtros > .vx-marcar { margin-top: 0; }
.vx-grupo-marcar.opciones { margin-top: 4px; }
.vx-grupo-marcar.opciones > legend { padding-top: 12px; }
.opciones .sub { margin: 0 0 4px 28px; }
.vx-dialogo-cuerpo > .vx-seccion { margin: 22px 0 6px; }
.vx-dialogo-cuerpo > .vx-seccion:first-child { margin-top: 4px; }
.vx-dialogo-cuerpo > .sub + .vx-nota, .vx-dialogo-cuerpo > .vx-texto + .vx-nota { margin-top: 10px; }
.vx-campo + .vx-nota, .vx-formulario + .vx-nota, .vx-campo + .vx-texto, .vx-formulario + .vx-texto, .vx-marcar + .vx-nota, .vx-grupo-marcar + .vx-nota { margin-top: 12px; }
.vx-nota + .vx-campo, .vx-nota + .vx-formulario { margin-top: 0; }
.vx-nota > .vx-puntos { margin-top: 4px; }
.vx-nota .vx-boton { margin-left: 8px; }
.vx-nota.separado { margin-top: 18px; }
/* Una nota dentro de una tarjeta, al final, no le agranda el pie. */
.vx-tarjeta > .vx-nota:last-child, .vx-tarjeta > .vx-texto:last-child { margin-bottom: 0; }
/* El diálogo corriente de RRHH mide 560 de ancho, como siempre: sus formularios de dos casillas por renglón no caben
   en los 480 del estilo. (El ancho y el muy ancho son los del estilo.) */
.vx-dialogo:not(.vx-dialogo-ancho):not(.vx-dialogo-muy-ancho) { width: min(560px, calc(100vw - 32px)); }
.vx-dialogo-cuerpo .sub { margin-top: 8px; }
.vx-dialogo-cuerpo > .sub:first-child { margin-top: 0; }
.vx-campo + select.vx-casilla.vx-casilla, .vx-campo + .vx-casilla.vx-casilla { margin-top: 6px; }
/* El texto largo de una carta o de una plantilla, mientras se escribe. */
textarea.grande.vx-casilla.vx-casilla { min-height: 320px; }
/* Mientras una acción de un diálogo va al servidor, el diálogo no se cierra: sus botones lo dicen. */
dialog.ocupado .vx-dialogo-pie .vx-boton { opacity: .5; cursor: progress; }
/* Mientras llega lo que se pidió (otro filtro del buzón, otros días de la agenda). */
.ocupada { opacity: .5; pointer-events: none; }

.vx-tarjeta .vx-cifras, .vx-dialogo-cuerpo .vx-cifras { margin-top: 12px; }
/* Una tarjeta que pide cuidado. */
.vx-tarjeta.alerta { border-color: var(--vx-fucsia); }

/* Una lista va en su tarjeta. Dentro de otra tarjeta o de un diálogo va sola, sin su propio borde. */
.vx-tarjeta .vx-tarjeta-lista, .vx-dialogo .vx-tarjeta-lista { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.vx-tarjeta * + .vx-tarjeta-lista, .vx-dialogo * + .vx-tarjeta-lista { margin-top: 12px; }
.vx-tarjeta .vx-cabeza + .vx-tarjeta-lista { margin-top: 0; }
.vx-tarjeta .vx-vacio, .vx-dialogo .vx-vacio { padding: 14px 0; text-align: left; }
.vx-lista td.arriba { vertical-align: top; }
/* Una columna de texto largo se parte entre palabras, no a media palabra. */
.vx-lista .vx-parte { overflow-wrap: break-word; }
.vx-lista td.arriba details { margin-top: 4px; }
.vx-lista td > .vx-etiquetas { min-width: 96px; }
.vx-chico.mal { color: var(--vx-fucsia-oscuro); }
.vx-lista .vx-error { display: block; margin: 0; }
/* Una casilla dentro de una lista que dice su propio ancho («Grupo», «Qué hay que hacer») lo conserva: la lista corre de lado antes que aplastarla. */
.vx-lista td > input.vx-casilla.vx-casilla[size] { width: auto; max-width: none; }
/* De quién viene un correo: una dirección larga se parte antes que esconder la columna «Estado». */
.vx-lista td.buzon-de { overflow-wrap: anywhere; min-width: 9em; }
.vx-lista tr.vx-apagado td .vx-enlace, .vx-lista tr.vx-apagado td .vx-lista-enlace { color: var(--vx-gris); }
/* Un correo que todavía no se atiende: la raya de lo que espera, al principio de su renglón. */
.vx-lista tr.nuevo td:first-child { box-shadow: inset 3px 0 0 var(--vx-fucsia); }
/* La agenda: una sola lista, con un renglón de título por día. */
.vx-lista td > .agenda-dia { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.vx-lista tbody:first-of-type td > .agenda-dia { margin-top: 2px; }

/* La ficha de datos: el rótulo y su valor, uno al lado del otro. */
dl.datos { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; font-size: 14px; margin-top: 8px; }
dl.datos dt { color: var(--vx-gris); }
dl.datos dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.vx-tarjeta > dl.datos:first-child { margin-top: 0; }
dl.datos dd > .vx-boton { margin-top: 4px; }
dl.datos dd > .vx-boton, .vx-tarjeta > .vx-cabeza > .vx-boton { max-width: 100%; white-space: normal; padding-top: 6px; padding-bottom: 6px; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; margin-top: 12px; }
.dos-columnas > .vx-tarjeta-lista { margin-top: 0; }
.dos-columnas > div > .vx-seccion:first-child { margin-top: 12px; }
.dos-columnas + .vx-tarjeta, .dos-columnas + .vx-nota { margin-top: 16px; }
.pantalla > dl.datos { margin-bottom: 14px; }
/* «No hay…» suelto en una pantalla (fuera de una tarjeta) va como una tarjeta vacía. */
.pantalla > .vx-vacio, .pantalla > div:not(.vx-tarjeta):not(.dos-columnas) > .vx-vacio { margin-bottom: 14px; border: 1px solid var(--vx-raya); border-radius: var(--vx-radio-tarjeta);
  background: var(--vx-tarjeta); }

/* Lo que se despliega («Ver lo anterior», los candidatos que ya no van en camino). */
details { margin-top: 10px; }
details > summary { cursor: pointer; color: var(--vx-turquesa-oscuro); font-weight: 600; font-size: 13px; border-radius: 4px; }
details > summary:focus-visible { outline: 2px solid var(--vx-turquesa-oscuro); outline-offset: 2px; }
.pantalla > details { margin: 0 0 14px; }
.pantalla > details > .vx-tarjeta-lista { margin-top: 10px; }

/* ---------------------------------------------------------------- piezas que son solo de RRHH */
/* Un texto de varios renglones que escribió alguien (los hechos de un caso, un descargo, el cuerpo de un correo): con sus
   renglones, y sin salirse de su caja aunque traiga una palabra larguísima. */
.parrafos { white-space: pre-wrap; overflow-wrap: anywhere; }
.parrafos.citado { border-left: 3px solid var(--vx-raya); padding: 2px 0 2px 12px; color: var(--vx-gris); margin-top: 8px; }
.parrafos.correo { background: var(--vx-apagado); border-radius: 10px; padding: 14px 16px; margin-top: 12px; max-height: 60vh; overflow-y: auto; }
/* La contraseña temporal de un usuario nuevo. */
.codigo { font-size: 28px; font-weight: 700; letter-spacing: 3px; text-align: center; padding: 14px; background: var(--vx-apagado);
  border-radius: 12px; margin-top: 12px; user-select: all; overflow-wrap: anywhere; }
.codigo:focus-visible { outline: 2px solid var(--vx-turquesa-oscuro); outline-offset: 2px; }
/* El número de una pastilla de filtro («Incapacidad 3»): cuántos tiene sin atender. */
.vx-pildora > b { margin-left: 5px; font-weight: 700; }
.vx-pildoras + .vx-pildoras { margin-top: -4px; }

/* Los pasos de un trámite que tiene un camino: «Los hechos → El descargo → La sanción → Gerencia → La entrega». El paso
   hecho, el que toca y los que faltan. */
.pasos { display: flex; gap: 0; margin: 0 0 14px; flex-wrap: wrap; counter-reset: paso; }
.pasos > div { flex: 1 1 120px; padding: 8px 10px 8px 0; border-top: 3px solid var(--vx-raya); font-size: 12.5px; color: var(--vx-gris); counter-increment: paso; }
.pasos > div::before { content: counter(paso) ". "; font-weight: 600; }
.pasos > div b { display: block; font-size: 12px; font-weight: 400; color: var(--vx-gris); }
.pasos > .hecho { border-top-color: var(--vx-turquesa); }
.pasos > .toca { border-top-color: var(--vx-turquesa-oscuro); color: var(--vx-turquesa-oscuro); font-weight: 600; }

/* La línea de tiempo: todo lo que le ha pasado a una persona, de lo más reciente a lo más viejo. */
.linea-tiempo { list-style: none; margin-top: 8px; }
.linea-tiempo li { display: grid; grid-template-columns: 92px 14px 1fr; gap: 0 10px; padding: 7px 0; align-items: baseline; }
.linea-tiempo .cuando { font-size: 12.5px; color: var(--vx-gris); white-space: nowrap; }
.linea-tiempo .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--vx-borde); align-self: center; }
/* La clase de cada renglón lleva «de-» adelante («de-ingreso», «de-caso»): así no se cruza con las clases de otras pantallas. */
.linea-tiempo .de-ingreso .punto { background: var(--vx-turquesa); }
.linea-tiempo .de-salida .punto { background: var(--vx-gris); }
.linea-tiempo .de-caso .punto { background: var(--vx-fucsia); }
.linea-tiempo .de-carta .punto, .linea-tiempo .de-documento .punto { background: var(--vx-tarjeta); border: 2px solid var(--vx-turquesa); }
.linea-tiempo .que { min-width: 0; }
.linea-tiempo .apagado .que { color: var(--vx-gris); text-decoration: line-through; }

/* La lista de pendientes (ingreso y salida): cada punto con su estado: pendiente, hecho o «no aplica». */
.puntos { list-style: none; margin-top: 6px; }
.puntos li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--vx-raya-renglon); }
.puntos li > .marca { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--vx-borde); display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--vx-tarjeta); margin-top: 1px; }
.puntos li.hecho > .marca { background: var(--vx-turquesa-oscuro); border-color: var(--vx-turquesa-oscuro); }
.puntos li.no_aplica > .marca { background: var(--vx-apagado); color: var(--vx-gris); }
.puntos li > .que { flex: 1; min-width: 0; }
.puntos li.hecho > .que, .puntos li.no_aplica > .que { color: var(--vx-gris); }
.puntos li > .acciones { flex: none; display: flex; gap: 6px; }
.puntos-grupo { font-size: 12px; font-weight: 600; color: var(--vx-gris); margin-top: 16px; }

/* Tarjetas en columnas: los candidatos de una vacante, una columna por etapa. En una pantalla angosta las columnas se
   corren de lado. */
.columnas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; margin-top: 14px; padding-bottom: 6px; }
.columnas > section { background: var(--vx-apagado); border-radius: 12px; padding: 10px; min-width: 0; }
.columnas > section > h3 { font-size: 12.5px; font-weight: 600; color: var(--vx-gris); display: flex; justify-content: space-between; padding: 0 2px 8px; }
.tarjeta { display: block; background: var(--vx-tarjeta); border: 1px solid var(--vx-raya); border-radius: 10px; padding: 9px 11px; margin-top: 8px; color: inherit;
  text-decoration: none; }
a.tarjeta:hover { border-color: var(--vx-turquesa); }
a.tarjeta:focus-visible { outline: 2px solid var(--vx-turquesa-oscuro); outline-offset: 2px; }
.tarjeta b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tarjeta .vx-chico { margin-top: 2px; }

/* Calificar de 1 a 5: un criterio de una entrevista, con su nombre, lo que mide, sus preguntas y la nota. */
.criterio { border-top: 1px solid var(--vx-raya); padding: 12px 0; }
.criterio:first-child { border-top: 0; }
.criterio h3 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; font-weight: 600; }
.criterio .vx-puntos { color: var(--vx-gris); }
.criterio > .vx-formulario { margin-top: 6px; }
.notas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; border: 0; }
.notas legend { font-size: 12.5px; font-weight: 500; color: var(--vx-gris); float: left; margin-right: 8px; padding-top: 6px; }
.notas label { position: relative; }
.notas input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.notas span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--vx-borde); font-weight: 600;
  background: var(--vx-tarjeta); }
.notas input:checked + span { background: var(--vx-turquesa-oscuro); border-color: var(--vx-turquesa-oscuro); color: var(--vx-tarjeta); }
.notas input:focus-visible + span { outline: 2px solid var(--vx-turquesa-oscuro); outline-offset: 2px; }
.notas .extremos { font-size: 12px; color: var(--vx-gris); }

/* La barra de «qué parte del total» (<meter>): la dibuja el navegador; aquí solo lleva los colores de la marca. */
meter::-webkit-meter-bar { background: var(--vx-apagado); border-color: var(--vx-raya); }
meter::-webkit-meter-optimum-value { background: var(--vx-turquesa); }
meter::-moz-meter-bar { background: var(--vx-turquesa); }

/* Una foto del expediente. */
.vista-foto { margin-top: 12px; text-align: center; background: var(--vx-apagado); border-radius: 10px; padding: 10px; }
.vista-foto img { max-height: 70vh; }

/* El aviso de versión nueva sigue a la vista al correr la pantalla: el menú del lado se acomoda debajo de él. */
@media (min-width: 901px) {
  body.con-franja .vx-menu { top: calc(22px + var(--franja-alto, 40px)); max-height: calc(100vh - 44px - var(--franja-alto, 40px)); }
}

/* ---------------------------------------------------------------- cartas y plantillas (cartas.js) */
/* En la lista de cartas, el motivo de una anulación va debajo de su ficha y no se estira más que esto: uno largo no les quita el ancho a las demás
   columnas, que quedarían con cada nombre partido en tres renglones. */
.cartas-motivo { max-width: 340px; overflow-wrap: break-word; }

/* En la lista de plantillas, las fichas y el botón de cada renglón. En una pantalla angosta se acomodan en dos o tres renglones, en vez de dejar el
   botón fuera de la vista, a la derecha. */
.cartas-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }

/* Los datos que se pueden poner en el texto de una plantilla. Cada uno es un botón: arriba, como se escribe; abajo, lo que es. */
.cartas-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 8px; margin-top: 6px; }
.cartas-datos button { min-width: 0; padding: 6px 10px; border: 1px solid var(--vx-borde); border-radius: 9px; background: var(--vx-tarjeta); text-align: left;
  font: inherit; font-size: 12px; line-height: 1.35; color: var(--vx-gris); cursor: pointer; }
.cartas-datos button:hover { background: var(--vx-turquesa-suave); border-color: var(--vx-turquesa); }
.cartas-datos button:focus-visible { outline: 2px solid var(--vx-turquesa-oscuro); outline-offset: 2px; }
.cartas-datos button b { display: block; font-size: 12.5px; font-weight: 600; color: var(--vx-tinta); overflow-wrap: anywhere; }

/* Los campos propios de una plantilla: uno por renglón, con su casilla y su botón al final. */
.cartas-campo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 132px minmax(0, 3fr) auto auto; gap: 0 12px; align-items: end; padding-bottom: 12px;
  border-bottom: 1px solid var(--vx-raya-renglon); }
.cartas-campo > .vx-marcar { margin: 0; }

/* ---------------------------------------------------------------- buzón (buzon.js) */
/* Lo que viene en un correo (el asunto, el nombre y la dirección de quien escribe, el nombre de un adjunto) puede traer una «palabra» larguísima.
   Aquí se parte por donde haga falta, para que no empuje fuera de la pantalla a todo lo demás. Dentro de una tabla lleva además un ancho mínimo:
   sin él, en una pantalla angosta su columna quedaría de una letra de ancho. */
.buzon-afuera { overflow-wrap: anywhere; }
td .buzon-afuera { display: block; min-width: 13em; }

/* ---------------------------------------------------------------- la hoja de una carta
   Como va a salir impresa: el membrete del patrono, la fecha, a quién va, el texto y las firmas. Es papel: va en su propia
   tinta, no en los colores de la pantalla, y se imprime como siempre. En la pantalla, lo que falta por llenar y el sello
   («BORRADOR», «ANULADA») van con los colores del estilo único y lo más grueso es el 700 de su letra; al imprimir, con los
   colores y el grueso de siempre (abajo, en «impresión»). */
/* El grueso 800 de la letra, que el estilo único no trae: solo para el papel (el nombre del patrono, el título y el sello
   de una carta se imprimen igual que siempre). Ninguna regla de pantalla lo usa (lo más grueso en pantalla es 700). Declararlo
   aquí no lo descarga: lo pide el programa (piezas.js) cuando pinta una hoja, para que ya esté cuando se imprima; si se
   declarara solo al imprimir, la primera impresión saldría sin el patrono, sin el título y sin el sello. */
@font-face { font-family: Poppins; font-weight: 800; font-style: normal; font-display: block; src: url(/fuentes/poppins-extrabold.woff2) format("woff2"); }
.hoja { --papel: #fff; --tinta-papel: #1d1d1f; --senas-papel: #55555a;
  --alerta-papel: var(--vx-fucsia-oscuro); --alerta-fondo-papel: var(--vx-fucsia-suave); --grueso-papel: 700;
  position: relative; border: 1.5px solid var(--vx-raya); border-radius: 6px; padding: 44px 52px 40px; margin: 18px auto 0; max-width: 780px; background: var(--papel);
  font-size: 13px; line-height: 1.6; color: var(--tinta-papel); }
.hoja .membrete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid var(--tinta-papel); padding-bottom: 10px; }
.hoja .membrete .patrono { font-size: 17px; font-weight: var(--grueso-papel); line-height: 1.25; }
.hoja .membrete .senas { font-size: 11.5px; color: var(--senas-papel); line-height: 1.4; margin-top: 2px; }
.hoja .membrete .numero { text-align: right; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hoja .lugar-fecha { text-align: right; margin-top: 22px; }
.hoja .para { margin-top: 22px; font-weight: 600; }
.hoja .para span { display: block; font-weight: 400; }
.hoja .titulo { text-align: center; font-size: 15px; font-weight: var(--grueso-papel); letter-spacing: .3px; text-transform: uppercase; margin: 26px 0 10px; }
.hoja .texto { margin-top: 20px; white-space: pre-wrap; overflow-wrap: anywhere; text-align: justify; }
.hoja .falta { background: var(--alerta-fondo-papel); color: var(--alerta-papel); font-weight: 600; }
.hoja .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 44px; padding-top: 70px; font-size: 12.5px; text-align: center; line-height: 1.4; }
.hoja .firmas.una { grid-template-columns: minmax(0, 320px); }
.hoja .firmas > div { border-top: 1px solid var(--tinta-papel); padding-top: 6px; }
.hoja .firmas > div b { display: block; font-weight: 600; }
.hoja .firmas > .ancha { grid-column: 1 / -1; border-top: 0; padding-top: 0; text-align: left; font-size: 12px; color: var(--senas-papel); }
.hoja .sello { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 62px; font-weight: var(--grueso-papel); letter-spacing: 6px;
  color: var(--alerta-papel); opacity: .16; white-space: nowrap; pointer-events: none; user-select: none; }

/* ---------------------------------------------------------------- tablet y celular */
@media (max-width: 1100px) {
  /* Con el menú al lado queda menos ancho que antes: la lista aprieta sus rellenos para que los botones del renglón sigan a la vista. */
  .vx-lista th, .vx-lista td { padding-left: 7px; padding-right: 7px; }
  .vx-lista .vx-lista-acciones > .vx-boton + .vx-boton { margin-left: 4px; }
  .vx-lista .vx-lista-acciones > .vx-boton-chico { padding: 0 9px; }
  /* Y una etiqueta larga («Con contraseña temporal») se deja partir en dos renglones antes que esconder los botones. */
  .vx-lista td > .vx-etiqueta { white-space: normal; }
}
@media (max-width: 1024px) {
  details > summary { padding: 12px 0; }
  .vx-miga > .vx-enlace { display: inline-block; padding: 13px 0; margin: -8px 0; }
  /* Un enlace que va solo (el nombre en el título de un caso, un hecho de la línea de tiempo, «Abrir el buzón») se toca en
     44 de alto sin mover nada de lugar. El enlace dentro de un texto se queda en su renglón. */
  .vx-titulo > .vx-enlace { display: inline-block; padding: 9px 0; margin: -9px 0; }
  .linea-tiempo .que > .vx-enlace, .vx-etiquetas > .vx-enlace { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .linea-tiempo .que > .vx-boton-enlace { margin: -12px 0; }
  .notas span { width: 44px; height: 44px; }
  .cartas-datos button { min-height: 44px; }
  .tarjeta { min-height: 44px; }
}
@media screen and (max-width: 900px) and (min-width: 561px) {
  /* En una tablet angosta, los botones de un renglón se acomodan en dos renglones antes que esconderse a la derecha. */
  .vx-lista .vx-lista-acciones { white-space: normal; }
  .vx-lista .vx-lista-acciones > .vx-boton { margin-top: 2px; margin-bottom: 2px; }
}
@media screen and (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  dl.datos { grid-template-columns: 130px 1fr; }
  .hoja { padding: 26px 22px; }
  .hoja .firmas { gap: 50px 20px; }
  .hoja .sello { font-size: 40px; letter-spacing: 3px; }
  .linea-tiempo li { grid-template-columns: 78px 12px 1fr; }
  .puntos li { flex-wrap: wrap; }
  .puntos li > .que { flex-basis: calc(100% - 34px); }
  .puntos li > .acciones { margin-left: 32px; flex-wrap: wrap; }
  /* En una pantalla angosta el motivo de una anulación no va en la lista, donde alargaría su renglón varias veces: se lee en la carta. */
  td .cartas-motivo { display: none; }
  .cartas-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* En una pantalla angosta, cada dato del campo va en su renglón. */
  .cartas-campo { grid-template-columns: minmax(0, 1fr); }
  .cartas-campo > .vx-boton { justify-self: start; margin: 12px 0 0; }
  .cartas-campo > .vx-marcar { margin-top: 6px; }
}
@media screen and (max-width: 560px) {
  .vx-cifras { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .vx-filtros > .vx-casilla.vx-casilla { flex: 1 1 140px; }
  .vx-lista-marco > .vx-lista .vx-parte { min-width: 112px; }
  dl.datos { grid-template-columns: 112px 1fr; font-size: 13.5px; }
  /* En la ficha de datos, una etiqueta larga se parte en vez de salirse de la pantalla. */
  dl.datos dd .vx-etiqueta { white-space: normal; }
  /* Un botón de nombre largo, junto al título de una tarjeta o dentro de una nota, se parte en vez de salirse de su caja. */
  .vx-tarjeta .vx-acciones > .vx-boton, .vx-nota .vx-boton { max-width: 100%; white-space: normal; padding-top: 6px; padding-bottom: 6px; }
  .vx-nota .vx-boton { margin: 6px 0 0; }
  /* En la barra, el nombre del módulo («Recursos Humanos») se lee entero: quien entró es lo que se acomoda en el espacio que queda. */
  .vx-barra-modulo { flex: 0 0 auto; overflow: visible; }
  .vx-quien { flex: 1 1 0; max-width: none; }
}

/* ---------------------------------------------------------------- impresión
   Va al final: lo que diga aquí no lo pisa ninguna regla de pantalla. La barra, el menú, los avisos de la esquina y el
   fondo los quita el estilo único. */
@media print {
  .no-imprimir, .franja { display: none !important; }
  body { font-size: 12px; background: #fff; }
  .hoja { --alerta-papel: #B42318; --alerta-fondo-papel: #FCE9E6; --grueso-papel: 800;
    border: 0; border-radius: 0; margin: 0; max-width: none; padding: 0; page-break-after: always; break-after: page; }
  .hoja:last-child { page-break-after: auto; break-after: auto; }
  .hoja .firmas > div { break-inside: avoid; }
  /* Las firmas no se parten entre dos páginas ni se quedan solas en una: si no caben, pasan a la siguiente con los últimos renglones del texto. */
  .hoja .firmas { break-inside: avoid; break-before: avoid; }
  .hoja .texto { widows: 4; }
  /* Con un diálogo abierto se imprime ese diálogo, entero y sin sus botones, y no la pantalla que tiene detrás. */
  body.con-dialogo #panel, body > dialog:not(:last-of-type), .vx-dialogo-pie { display: none; }
  /* (La clase va tres veces a propósito: así esta regla le gana a la del diálogo de 560 de la pantalla.) */
  dialog.vx-dialogo.vx-dialogo.vx-dialogo[open] { display: block; position: absolute; inset: 0 0 auto 0; width: auto; max-width: none; max-height: none; margin: 0;
    box-shadow: none; border-radius: 0; overflow: visible; }
  .vx-dialogo-cabeza { padding: 0 0 8px; }
  .vx-dialogo-cuerpo { padding: 0; max-height: none; overflow: visible; }
  /* El papel es más angosto que 900: sin esto, un formulario saldría en menos columnas que en la pantalla y con las casillas del celular. */
  :root { --vx-alto: 40px; --vx-alto-renglon: 36px; }
  .vx-formulario-dos, .dos-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-formulario-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx-formulario-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @page { margin: 20mm 18mm; }
  /* Las páginas de una hoja van sin lo que el navegador pone en los márgenes (la fecha, el título y la dirección de la página): al declarar aquí
     cajas de margen, aunque vacías, Chrome deja de poner las suyas. */
  .hoja { page: carta; }
  @page carta { @top-left { content: ""; } @bottom-left { content: ""; } }
  /* De la pantalla de una carta se imprime una sola hoja: su sello («BORRADOR», «ANULADA») sale en cada página, no solo en la primera. No va
     en la regla general de la hoja porque así, si otra pantalla imprimiera varias hojas juntas, el sello de una saldría en las páginas de las demás. */
  .cartas-hoja .sello { position: fixed; }
  /* El sello, con su tinta de siempre. */
  .hoja .sello { color: rgba(180, 35, 24, .16); opacity: 1; }
}