/*
 * Estilos de la aplicación de gestión, con la identidad de ABTEMAS (skill abt-pry-design y
 * _RECURSOS/abt/abt_colors.html).
 *   --acento       #5B7F95, el color que indicó el responsable el 23-10-2026: línea de cabecera,
 *                  iconos, botones de icono y selecciones.
 *   --acento-texto #45637A, azul acero (ABT.P). Para enlaces y botones con texto: el texto blanco
 *                  sobre #5B7F95 da 4,3:1 y WCAG pide 4,5:1; sobre #45637A da 6,3:1.
 *   --oscuro       #2C4050, azul profundo (ABT.N), títulos y estados de pulsado.
 *   --linea        #D9D9D6, gris claro (ABT.G).
 *   --rojo         #A4343A, solo para errores y para lo que no se puede deshacer.
 *   --verde        #719949, avisos de que algo ha ido bien y fichaje en curso.
 * Fuentes: Gotham y Poppins si están instaladas en el equipo; si no, las del sistema. No se
 * descargan: la política de contenidos solo admite recursos del propio sitio, y cargar fuentes
 * de terceros comunicaría la IP de quien la usa a otro servidor.
 */

:root {
  --texto: #2f3438;
  --oscuro: #2C4050;
  --acento: #5B7F95;
  --acento-texto: #45637A;
  --acento-suave: #E4ECF1;
  --gris: #6b7378;
  --fondo: #F4F6F7;
  --linea: #D9D9D6;
  --blanco: #ffffff;
  --verde: #719949;
  --aviso: #eef4ea;
  --rojo: #A4343A;
  --error: #f8eaea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
}

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--blanco);
  border-bottom: 3px solid var(--acento);
}

.marca {
  font-family: Gotham, Poppins, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  color: var(--oscuro);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.marca span { color: var(--acento); font-weight: 600; }

.cuenta { display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; }
.cuenta form { margin: 0; }

.contenido { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.tarjeta.estrecha { max-width: 440px; margin-left: auto; margin-right: auto; }

h1, h2 { font-family: Gotham, Poppins, "Segoe UI", system-ui, sans-serif; color: var(--oscuro); line-height: 1.25; }
h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; margin-top: 0; }

label { display: block; margin-top: 0.85rem; font-weight: 600; }

input[type="text"], input[type="password"] {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 0.65rem;
  margin-top: 0.35rem;
  font: inherit;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

.boton {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.55rem 1.1rem;
  min-height: 2.6rem;
  font: inherit;
  font-weight: 600;
  color: var(--blanco);
  background: var(--acento-texto);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover { background: var(--oscuro); }

.boton-enlace {
  padding: 0;
  font: inherit;
  color: var(--acento-texto);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

a { color: var(--acento-texto); }

.aviso, .error { padding: 0.7rem 0.9rem; border-radius: 4px; border-left: 4px solid; }
.aviso { background: var(--aviso); border-color: var(--verde); }
.error { background: var(--error); border-color: var(--rojo); }

.nota { color: var(--gris); font-size: 0.92rem; }

.pasos li { margin-bottom: 1.25rem; }
.qr { margin: 0.75rem 0; min-height: 200px; }
.qr img, .qr canvas { display: block; }
.clave-manual, .codigos code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}
.clave-manual { display: block; margin-top: 0.5rem; padding: 0.5rem; background: var(--fondo); word-break: break-all; }

.codigos { columns: 2; list-style: none; padding: 0; }
.codigos li { padding: 0.25rem 0; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
/* Tarjetas del inicio: cada una es un botón grande, con el icono abajo a la izquierda. */
a.tarjeta.modulo { display: flex; flex-direction: column; margin-bottom: 0; min-height: 10.5rem; color: var(--texto);
  text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.tarjeta.modulo h2 { margin-bottom: 0.4rem; }
a.tarjeta.modulo p { flex: 1; margin: 0 0 1rem; }
a.tarjeta.modulo:hover { border-color: var(--acento); box-shadow: 0 3px 10px rgba(44, 64, 80, 0.12); }
a.tarjeta.modulo:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.modulo-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  border-radius: 4px; color: var(--blanco); background: var(--acento); }
a.tarjeta.modulo:hover .modulo-icono { background: var(--acento-texto); }
.modulo .estado { color: var(--gris); font-size: 0.9rem; margin-bottom: 0; }

.detalle-desarrollo { font-family: Consolas, monospace; font-size: 0.85rem; color: var(--gris); }

.tabla { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.tabla th, .tabla td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla th { background: var(--fondo); font-weight: 600; }
.tabla td:not(:first-child), .tabla th:not(:first-child) { text-align: right; }
h3 { font-family: Gotham, Poppins, "Segoe UI", system-ui, sans-serif; color: var(--oscuro); font-size: 1rem; margin-bottom: 0.25rem; }

.pie { text-align: center; color: var(--gris); font-size: 0.85rem; padding: 1.5rem 0 2rem; }
.pie a { color: inherit; }
.pie a:hover, .pie a:focus-visible { color: var(--oscuro); }

/* Menú de secciones, con iconos. El nombre va como texto para lectores de pantalla y como rótulo. */
.menu { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.35rem 1rem; background: var(--blanco);
  border-bottom: 1px solid var(--linea); }
.menu a, .boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 6px; color: var(--oscuro); text-decoration: none; }
.menu a:hover, .boton-icono:hover { color: var(--acento); background: var(--fondo); }
.menu a[aria-current="page"] { color: var(--acento-texto); background: var(--acento-suave); }
.menu a:focus-visible, .boton-icono:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.boton-icono { padding: 0; border: 0; background: none; cursor: pointer; }
.icono { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; }
.icono .relleno { fill: currentColor; }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Formularios */
select, textarea, input[type="date"], input[type="datetime-local"], input[type="search"] {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.65rem;
  margin-top: 0.35rem;
  font: inherit;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  background: var(--blanco);
}
select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
textarea { resize: vertical; }
input:disabled, select:disabled { background: var(--fondo); color: var(--gris); }
/* Formularios en una rejilla de 12 columnas: cada campo dice su ancho (col-N) y su bloque. */
.campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 1rem; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }
.campo-casilla { align-self: end; padding-bottom: 0.55rem; }
fieldset.grupo-campos { min-width: 0; margin: 1.2rem 0 0; padding: 0; border: 0; }
fieldset.grupo-campos > legend { width: 100%; padding: 0 0 0.3rem; font-family: Gotham, Poppins, "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem; font-weight: 700; color: var(--oscuro); border-bottom: 1px solid var(--linea); }
label.casilla { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-top: 1.5rem; }
label.casilla input { width: auto; margin: 0; }
.obligatorio { color: var(--rojo); }
.error-campo { color: var(--rojo); font-size: 0.9rem; margin: 0.25rem 0 0; }
[aria-invalid="true"] { border-color: var(--rojo); }
.campo .nota { margin: 0.25rem 0 0; }
fieldset.recordar { margin: 1.25rem 0 0; padding: 0.5rem 0.9rem 0.75rem; border: 1px solid var(--linea); border-radius: 4px; }
fieldset.recordar legend { font-weight: 600; padding: 0 0.3rem; }
fieldset.recordar label.casilla { margin-top: 0.4rem; font-weight: 400; }
form.en-linea { display: inline; margin: 0; }
.bloque { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.boton.secundario { color: var(--acento-texto); background: var(--blanco); border: 1px solid var(--acento-texto); }
.boton.secundario:hover { background: var(--acento-suave); }
.boton.peligro { background: var(--rojo); }
.boton.peligro:hover { background: #7e2329; }
.boton.pequeno { margin-top: 0; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
/* Botones cuadrados con icono en negativo; el asterisco de la esquina marca los que crean algo. */
.boton-cuadrado { display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0; vertical-align: middle; }
.boton-cuadrado { background: var(--acento); }
.boton-cuadrado:hover { background: var(--acento-texto); }
.boton-cuadrado .icono { width: 1.45rem; height: 1.45rem; }
/* Variante con borde (editar, acciones de fila) y variante pequeña para las filas de las tablas. */
.boton-cuadrado.secundario { color: var(--acento-texto); background: var(--blanco); border: 1px solid var(--linea); }
.boton-cuadrado.secundario:hover { border-color: var(--acento); background: var(--acento-suave); }
.boton-cuadrado.fila { width: 2.15rem; height: 2.15rem; margin: 0; }
.boton-cuadrado.fila .icono { width: 1.2rem; height: 1.2rem; }
.boton-cuadrado.quitar:hover { color: var(--rojo); border-color: var(--rojo); background: var(--error); }
.boton-cuadrado.con-nuevo .icono { transform: translate(-0.1rem, 0.12rem); }
.icono-nuevo { position: absolute; top: 0.25rem; right: 0.25rem; width: 0.7rem; height: 0.7rem; fill: none;
  stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.boton-volver { margin-left: 1rem; }
.enlace-copiar { font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; }

/* Filtros de los listados */
.filtros { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.filtros > div { flex: 1 1 160px; }
.filtros .filtro-ancho { flex: 3 1 260px; }
.filtros label { margin-top: 0; }
.filtros .boton { margin-top: 0; }
.filtros > div:has(> .boton-cuadrado) { flex: 0 0 auto; }
.filtros select, .filtros input[type="date"], .filtros input[type="search"] { height: 2.6rem; }
/* Interruptores de los filtros: píldoras que filtran al pulsarlas. */
.filtros .interruptores { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.interruptor { margin: 0; padding: 0; font: inherit; font-weight: 400; color: inherit; background: none; border: 0; cursor: pointer; }
.interruptor span { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.2rem; padding: 0.3rem 0.85rem;
  border: 1px solid var(--linea); border-radius: 999px; font-size: 0.92rem; background: var(--blanco); }
.interruptor span::before { content: ""; width: 0.85rem; height: 0.85rem; border: 1.5px solid var(--gris); border-radius: 50%; }
.interruptor[aria-pressed="true"] span { color: var(--acento-texto); background: var(--acento-suave); border-color: var(--acento);
  font-weight: 600; }
.interruptor[aria-pressed="true"] span::before { border-color: var(--acento-texto); background: var(--acento-texto);
  box-shadow: inset 0 0 0 2px var(--acento-suave); }
.interruptor:hover span { border-color: var(--acento); }
.interruptor:focus-visible { outline: none; }
.interruptor:focus-visible span { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Botones que se pulsan y se sueltan (bombillas de estado, ABTEMAS): sin ninguno pulsado se ve todo. */
.filtros > .alternas { flex: 0 0 auto; display: inline-flex; gap: 0.3rem; }
.filtros > .alterna { flex: 0 0 auto; }
.alterna { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0;
  color: var(--acento-texto); background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px; cursor: pointer; }
.alterna:hover { border-color: var(--acento); background: var(--acento-suave); }
.alterna[aria-pressed="true"] { color: var(--blanco); background: var(--acento-texto); border-color: var(--acento-texto); }
.alterna:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.alterna .icono { width: 1.45rem; height: 1.45rem; }
.alterna .icono-img { width: 1.3rem; height: 1.3rem; }
.alterna[aria-pressed="true"] .icono-img { filter: brightness(0) invert(1); }
.filtros .empuje { flex: 1 1 0; min-width: 0; }
/* Barra de la ficha: miga a la izquierda; anterior, posición y siguiente a la derecha. */
.barra-ficha { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap;
  margin-bottom: 0.5rem; }
.barra-ficha .miga { margin: 0; }
.navegacion-ficha { display: inline-flex; align-items: center; gap: 0.4rem; }
.navegacion-ficha .posicion { min-width: 5.5rem; text-align: center; font-size: 0.88rem; color: var(--gris); }
.boton-cuadrado.desactivado { opacity: 0.35; cursor: default; }
/* Listados: buscador con la lupa pegada, botones unidos de «Mostrar» y el interruptor, en una fila. */
.filtros-lista { align-items: center; }
.filtros-lista .interruptores { flex: 0 1 auto; }
.filtros > div.buscador { flex: 1 1 260px; display: flex; }
.buscador input { flex: 1; min-width: 0; height: 2.6rem; margin: 0; border-radius: 4px 0 0 4px; }
.buscador .boton-cuadrado { margin: 0; border-radius: 0 4px 4px 0; }
.filtros > .segmentos { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--acento-texto); border-radius: 4px; overflow: hidden; }
.segmento { min-height: 2.6rem; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--acento-texto);
  background: var(--blanco); border: 0; border-left: 1px solid var(--acento-texto); cursor: pointer; }
.segmento:first-of-type { border-left: 0; }
.segmento[aria-pressed="true"] { color: var(--blanco); background: var(--acento-texto); }
.segmento:hover:not([aria-pressed="true"]) { background: var(--acento-suave); }
.segmento:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }

/* Tablas de datos: texto a la izquierda, cifras a la derecha */
.tabla.datos td, .tabla.datos th { text-align: left; vertical-align: top; }
.tabla.datos .num { text-align: right; white-space: nowrap; }
.tabla .acciones { white-space: nowrap; text-align: right; }
.tabla .acciones a, .tabla .acciones form { display: inline-block; margin-left: 0.3rem; vertical-align: middle; }
.tabla .acciones .boton { margin-top: 0; }
.tabla .acciones .boton-cuadrado { display: inline-flex; }
.tabla .acciones form { margin-top: 0; }
.desplazable { overflow-x: auto; }
.fila-anulada td { color: var(--gris); text-decoration: line-through; }
.fila-anulada td.acciones, .fila-anulada td .etiqueta { text-decoration: none; }
.fila-revisar { background: #fff8e1; }
.fila-inactiva td { color: var(--gris); }
.fila-grupo td { font-weight: 600; background: var(--fondo); }
.sangria { padding-left: 1.5rem !important; }
.secundario { color: var(--gris); }
.nota-fila { display: block; color: var(--gris); font-size: 0.85rem; }
.etiqueta { display: inline-block; padding: 0 0.45rem; border-radius: 3px; font-size: 0.8rem; background: var(--linea);
  color: var(--oscuro); white-space: nowrap; }
.etiqueta.revisar { background: #ffe08a; }
/* Importación: cambio dudoso, que va sin marcar */
.tabla tr.dudoso td { background: var(--acento-suave); }
.lista-alta { list-style: none; padding-left: 0; }
.lista-alta li { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--linea); }
.lista-alta li.dudoso { background: var(--acento-suave); }
.separado { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
/* Ayuda con capturas */
.ayuda h3 { margin-top: 1.5rem; }
.indice-ayuda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0.5rem 0 0; }
.captura { margin: 0.75rem 0 1.5rem; }
.captura img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(44, 64, 80, 0.08); }
.captura figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--gris); }
ul.cambios { margin: 0; padding-left: 1.1rem; }

/* Pestañas de la ficha del proyecto. Sin JavaScript la barra es un índice de los paneles. */
.lista-pestanas { display: flex; flex-wrap: wrap; gap: 0.1rem 0.25rem; margin: 0 0 1rem; border-bottom: 2px solid var(--linea); }
.lista-pestanas [role="tab"] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.6rem;
  text-decoration: none; color: var(--oscuro); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.lista-pestanas .icono { width: 1.45rem; height: 1.45rem; }
.lista-pestanas .cuenta-pestana { font-size: 0.8rem; font-weight: 600; color: var(--gris); }
.lista-pestanas [role="tab"].vacia { opacity: 0.55; }
.lista-pestanas [role="tab"]:hover { color: var(--acento-texto); opacity: 1; }
.lista-pestanas [role="tab"][aria-selected="true"] { color: var(--acento-texto); border-bottom-color: var(--acento); opacity: 1; }
.lista-pestanas [role="tab"][aria-selected="true"] .cuenta-pestana { color: var(--acento-texto); }
.lista-pestanas [role="tab"]:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.panel[hidden] { display: none; }

/* Fichas */
.titulo-con-accion { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.6rem; }
.titulo-con-accion h1, .titulo-con-accion h2 { margin-bottom: 0.5rem; }
.titulo-con-accion .boton { margin-top: 0; }
.miga { margin: 0 0 0.5rem; font-size: 0.9rem; }
.datos-ficha { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 1rem 0; }
.datos-ficha dt { font-weight: 600; color: var(--gris); }
.datos-ficha dd { margin: 0; }
.estado-fichaje { font-size: 1.1rem; }
.estado-fichaje.abierto { padding: 0.7rem 0.9rem; border-left: 4px solid var(--verde); background: var(--aviso); }
.acciones-pie { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.enlaces-modulo { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.enlaces-modulo .boton { margin-top: 0; }

/*
 * Móvil. La cabecera va en una línea y el menú en una fila que se desliza. Las tablas marcadas
 * como «apilable» pasan a una tarjeta por fila, con la etiqueta de cada dato a la izquierda: a
 * 375 px no caben seis columnas sin desplazarse de lado (revisión del 23-10-2026).
 */
@media (max-width: 700px) {
  .cabecera { padding: 0.6rem 1rem; }
  .cuenta span { display: none; }
  .menu { justify-content: space-between; padding: 0.25rem 0.75rem; }
  .contenido { margin: 1rem auto; padding: 0 0.75rem; }
  .tarjeta { padding: 1rem; margin-bottom: 1rem; }
  h1 { font-size: 1.3rem; }
  .filtros { gap: 0.6rem 0.75rem; }
  .filtros > div { flex: 1 1 135px; min-width: 0; }
  .filtros input, .filtros select { min-width: 0; }
  .filtros .filtro-ancho { flex-basis: 100%; }
  .filtros > div:has(input[type="date"]) { flex: 1 1 105px; }
  .filtros .interruptores { gap: 0.4rem; }
  .filtros > div.buscador { flex-basis: 100%; }
  .campos > .campo { grid-column: 1 / -1; }
  .campo-casilla { padding-bottom: 0; }
  .interruptor span { padding: 0.3rem 0.65rem; font-size: 0.86rem; }
  .tarjeta form > .boton[type="submit"]:not(.boton-cuadrado) { width: 100%; }
  .tabla.apilable thead { display: none; }
  .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr { display: block; width: 100%; }
  .tabla.apilable tr { padding: 0.65rem 0.25rem; border-bottom: 1px solid var(--linea); }
  .tabla.apilable td { display: block; position: relative; padding: 0.15rem 0 0.15rem 40%; border: 0; text-align: left;
    white-space: normal; min-height: 1.6rem; }
  .tabla.datos.apilable .num { text-align: left; }
  .tabla.apilable td::before { content: attr(data-etiqueta); position: absolute; left: 0; width: 37%; color: var(--gris);
    font-size: 0.9rem; }
  .tabla.apilable td.principal { padding-left: 0; font-weight: 600; font-size: 1.05rem; }
  .tabla.apilable td.principal::before, .tabla.apilable td.acciones::before { content: none; }
  .tabla.apilable td.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0 0; }
  .tabla.apilable td.acciones a, .tabla.apilable td.acciones form { margin-left: 0; padding: 0; }
}

@media (max-width: 560px) {
  .codigos { columns: 1; }
  .datos-ficha { grid-template-columns: 1fr; }
  .boton-volver { display: inline-block; margin: 1rem 0 0; }
}