/* Estilos mínimos de M0 (pantalla de ingreso e inicio). Pensados primero para el celular. */
:root {
  --fondo: #f6f7f9;
  --tarjeta: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6470;
  --borde: #c9ced6;
  --acento: #1f5fbf;
  --acento-texto: #ffffff;
  --aviso-fondo: #fdecea;
  --aviso-texto: #8a1c13;
}

/* Apariencia: sin elección sigue al teléfono; el selector del registro fija data-tema="claro" u "oscuro" (Apariencia.php).
   Cada tema fijado repite sus valores después del @media para ganar aunque el teléfono esté en el otro modo. */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14171b;
    --tarjeta: #1d2127;
    --texto: #eceff3;
    --suave: #a3acb8;
    --borde: #3a424d;
    --acento: #6ea3f2;
    --acento-texto: #0d1117;
    --aviso-fondo: #3b1a17;
    --aviso-texto: #ffb4ab;
  }
}

:root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #f6f7f9;
  --tarjeta: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6470;
  --borde: #c9ced6;
  --acento: #1f5fbf;
  --acento-texto: #ffffff;
  --aviso-fondo: #fdecea;
  --aviso-texto: #8a1c13;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #14171b;
  --tarjeta: #1d2127;
  --texto: #eceff3;
  --suave: #a3acb8;
  --borde: #3a424d;
  --acento: #6ea3f2;
  --acento-texto: #0d1117;
  --aviso-fondo: #3b1a17;
  --aviso-texto: #ffb4ab;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; }

form {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  padding: 1rem;
}

label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; }

input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

button,
.boton {
  display: inline-block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--acento-texto);
  background: var(--acento);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

button.secundario {
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--borde);
}

.aviso {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  color: var(--aviso-texto);
  background: var(--aviso-fondo);
  border-radius: 0.5rem;
}

.nota { color: var(--suave); }

/* ───────────── Registro maestro (M2): mobile-first, sin JavaScript ───────────── */
:root {
  --ok-fondo: #e6f4ea;
  --ok-texto: #1e5b2f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ok-fondo: #17301f;
    --ok-texto: #a8e0b5;
  }
}

:root[data-tema="claro"] {
  --ok-fondo: #e6f4ea;
  --ok-texto: #1e5b2f;
}

:root[data-tema="oscuro"] {
  --ok-fondo: #17301f;
  --ok-texto: #a8e0b5;
}

/* En la computadora el contenido se centra con un ancho cómodo de leer (MF-2). */
main:has(> .registro) { max-width: 40rem; }

.registro h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

/* Todo botón y todo enlace de acción mide al menos 44 px de alto y de ancho (MF-4), con aire entre ellos. */
.tactil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
}

button.tactil,
.boton.tactil,
a.tactil.secundario {
  text-decoration: none;
}

/* AUD-M2 C-1: la regla ".tactil" de arriba le pintaba el texto del color del fondo a los botones principales (ilegibles, A-1). */
button.tactil:not(.secundario), .boton.tactil { color: var(--acento-texto); }

.navegacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

form.en-linea {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.navegacion button,
.navegacion .tactil { width: auto; margin-top: 0; }

.volver { margin: 0 0 0.5rem; }

.confirmacion {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  color: var(--ok-texto);
  background: var(--ok-fondo);
  border-radius: 0.5rem;
}

.filas { list-style: none; margin: 0; padding: 0; }

.fila {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  overflow-wrap: anywhere;
}

.fila-titulo { font-weight: 700; font-size: 1.05rem; margin-left: 0; }
.linea { margin: 0.25rem 0; color: var(--suave); }

.etiqueta {
  display: inline-block;
  margin: 0 0.25rem 0 0.25rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 1rem;
}

.acciones { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }

.acciones .tactil,
.boton.tactil { width: auto; margin-top: 0.25rem; }

.tactil.secundario { color: var(--texto); background: transparent; border: 1px solid var(--borde); border-radius: 0.5rem; }

select,
textarea,
input[type="date"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}

.registro input[type="text"] { max-width: 100%; }

/* AUD-M2 C-1: el borde de los campos y de los botones secundarios del registro tiene que verse (3:1 como mínimo; con --borde daba 1,58:1).
   Solo dentro de .registro: la pantalla de ingreso de M0 no cambia (queda anotado como OBS-M2-9). */
.registro select,
.registro textarea,
.registro input[type="date"],
.registro input[type="text"],
.registro .tactil.secundario { border-color: var(--suave); }

select:focus-visible,
textarea:focus-visible,
input[type="date"]:focus-visible,
summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.campo { margin: 0 0 0.25rem; }
.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea { border-color: var(--aviso-texto); border-width: 2px; }

.ayuda { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--suave); }
.error-campo { margin: 0.25rem 0 0; font-weight: 600; color: var(--aviso-texto); }

fieldset.grupo { margin: 1rem 0 0; padding: 0.5rem 0.75rem 0.75rem; border: 1px solid var(--borde); border-radius: 0.5rem; }
fieldset.grupo legend { padding: 0 0.5rem; font-weight: 700; }

details.procedencia { margin: 1rem 0 0; padding: 0.25rem 0.75rem 0.75rem; border: 1px solid var(--borde); border-radius: 0.5rem; }
details.procedencia summary { cursor: pointer; font-weight: 600; }

.seccion { margin: 0 0 1rem; }
/* ───────────── Usabilidad de M2: apariencia, campos obligatorios, dependencias y celular ───────────── */
/* Encabezado en una sola fila: «Registro», el selector de tema (que se achica si falta lugar) y «Salir». Nunca se superponen. */
.navegacion { flex-wrap: nowrap; }
.navegacion > * { min-width: 0; }
.apariencia { display: block; flex: 1 1 auto; max-width: 11rem; margin: 0; }
.apariencia[hidden] { display: none; }
.apariencia select { width: 100%; min-height: 2.75rem; text-overflow: ellipsis; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.marca { margin-left: 0.25rem; padding: 0.05rem 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--suave); border: 1px solid var(--suave); border-radius: 1rem; white-space: nowrap; }
.marca.obligatorio { color: var(--aviso-texto); background: var(--aviso-fondo); border-color: var(--aviso-texto); }

.leyenda { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--suave); }

.dependencia { margin: 0 0 1rem; padding: 0.75rem 1rem; color: var(--aviso-texto); background: var(--aviso-fondo); border: 1px solid var(--aviso-texto); border-radius: 0.5rem; }
.dependencia p { margin: 0 0 0.5rem; }
.dependencia .boton.tactil { margin-top: 0; }

.registro .campo { margin-bottom: 1rem; }
.registro .ayuda { font-size: 0.95rem; }
.registro .nota { font-size: 0.95rem; }
form.formulario > button.tactil { width: 100%; margin-top: 1.25rem; }

/* En pantallas angostas los botones de acción ocupan todo el ancho: más fáciles de tocar con el pulgar. */
@media (max-width: 30rem) {
  .acciones .boton.tactil { flex: 1 1 100%; }
  .registro h2 { margin-top: 1.75rem; }
}

/* ───────────── Asistente de configuración inicial ───────────── */
.asistente-progreso { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 0.75rem; }
.asistente-paso { margin: 0 0 0.5rem; font-size: 1.1rem; }
.asistente-barra { display: block; width: 100%; height: 0.9rem; accent-color: var(--acento); }
.asistente-lista summary { cursor: pointer; font-weight: 600; }
.asistente-pasos { margin: 0.5rem 0 0; padding: 0 0 0 1.25rem; }
.asistente-pasos li { margin: 0.25rem 0; }
.asistente-pasos li[aria-current="step"] { font-weight: 700; }
.asistente-paso-nombre { display: inline-block; padding: 0.5rem 0; }

.asistente-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.asistente-nav .tactil { flex: 1 1 8rem; margin: 0; }
.asistente-nav .nota { flex: 1 1 100%; margin: 0; }

.asistente-pestanas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.asistente-pestanas .tactil { flex: 1 1 auto; margin: 0; text-align: center; }
.asistente-pestanas a.tactil.actual { color: var(--acento-texto); background: var(--acento); border-radius: 0.5rem; text-decoration: none; font-weight: 700; }

/* ───────────── Mis máquinas y carga masiva ───────────── */
.fila.pendiente { border-left: 0.4rem solid var(--aviso-texto); }
.fila.completa { border-left: 0.4rem solid var(--ok-texto); }

form.filtros .campo { margin-bottom: 0.75rem; }
form.filtros .tactil { margin-right: 0.5rem; }

.lote-resumen { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: 0.5rem; }
.lote-resumen p { margin: 0.25rem 0; }
.lote-filas { list-style: none; margin: 0 0 1rem; padding: 0; }
.lote-fila { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--borde); border-radius: 0.5rem; }
.lote-fila.con-error { border-color: var(--aviso-texto); border-width: 2px; }
.lote-fila .campo { margin-bottom: 0.5rem; }
.lote-datos summary { cursor: pointer; font-weight: 600; }
form.lote > button.tactil { width: 100%; margin-top: 0.75rem; }

details.filtros-caja { margin: 0 0 1rem; }
details.filtros-caja > summary { cursor: pointer; font-weight: 600; }
details.filtros-caja[open] > summary { margin-bottom: 0.5rem; }

/* ───────────── Elegir varias máquinas y asignarles algo ───────────── */
.casilla { display: flex; align-items: center; min-height: 2.75rem; margin: 0 0 0.25rem; }
.casilla input[type="checkbox"] { width: 1.6rem; height: 1.6rem; margin: 0 0.6rem 0 0; flex: none; accent-color: var(--acento); }
.casilla label { display: inline-flex; flex: 1 1 auto; align-items: center; min-width: 6rem; min-height: 2.75rem; font-weight: 600; margin: 0; cursor: pointer; }

.seleccion-barra { position: sticky; bottom: 0; z-index: 2; margin: 1rem -0.25rem 0; padding: 0.25rem 0.75rem; background: var(--tarjeta); border: 1px solid var(--suave); border-radius: 0.75rem; }
.seleccion-menu[open] { max-height: 70vh; overflow-y: auto; }
.seleccion-menu > summary { cursor: pointer; }
.seleccion-contador { font-weight: 700; }
.seleccion-marcar, .seleccion-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.seleccion-marcar .tactil, .seleccion-acciones .tactil { flex: 1 1 9rem; margin: 0; width: auto; }
.seleccion-acciones button:disabled { opacity: 0.55; cursor: not-allowed; }
form.lote-confirmar .tactil { width: 100%; margin-top: 0.5rem; }

.fila.compacta { padding: 0.25rem 0.75rem; margin: 0 0 0.4rem; }
.fila.compacta .linea { margin: 0.1rem 0; font-size: 0.95rem; }

/* ───────────── Pasada final de interfaz de M2: limpia, sin degradados, con jerarquía clara ─────────────
   Reglas que pisan a las de arriba a propósito (mismo archivo, después). Solo dentro de .registro: la pantalla de ingreso de M0 no cambia. */

/* Encabezado: queda fijo arriba para no perderse; «Registro» es la marca y «Salir» el botón discreto. */
.registro .navegacion { position: sticky; top: 0; z-index: 5; margin: 0 0 0.25rem; padding: 0.4rem 0; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.registro .navegacion > a.tactil { margin: 0; font-weight: 700; text-decoration: none; color: var(--texto); }
.registro .apariencia select { font-size: 0.9rem; }
.registro .volver { margin: 0.25rem 0 0; }
.registro .volver a.tactil { margin: 0; padding-left: 0; font-weight: 600; text-decoration: none; }
.registro h1 { margin: 0.25rem 0 0.75rem; font-size: 1.4rem; line-height: 1.25; }
.registro h2 { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }

/* Botones: uno principal (relleno) y uno secundario (borde); siempre del mismo alto y del mismo radio. */
.registro .boton.tactil, .registro button.tactil:not(.secundario) { min-height: 3rem; border-radius: 0.6rem; font-weight: 600; text-decoration: none; }
.registro .tactil.secundario { border-width: 1px; border-radius: 0.6rem; font-weight: 600; }

/* Formularios: sin tarjeta dentro de tarjeta, campos más juntos, avisos chicos y lo opcional en silencio (sigue disponible para lectores de pantalla). */
.registro form.formulario { padding: 0.75rem 0.9rem 0.9rem; }
.registro form.seleccion { padding: 0; background: none; border: 0; border-radius: 0; }
.registro .campo { margin-bottom: 0.75rem; }
.registro label { margin: 0.5rem 0 0.25rem; font-size: 0.95rem; }
.registro .marca:not(.obligatorio) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.registro .marca.obligatorio { font-size: 0.75rem; }
.registro .nota, .registro .leyenda { font-size: 0.9rem; }
.registro .ayuda { font-size: 0.85rem; }
.registro fieldset.grupo { margin: 0.75rem 0 0.5rem; padding: 0.25rem 0.75rem 0.5rem; }
.registro fieldset.grupo legend { font-size: 0.9rem; color: var(--suave); }
.registro summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; }
.ayuda-plegable { margin: 0.1rem 0 0; }
.ayuda-plegable summary { font-size: 0.85rem; color: var(--acento); }
.formulario-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.formulario-acciones .tactil { flex: 1 1 8rem; margin: 0; }
.formulario-acciones button.tactil { width: auto; margin-top: 0; }

/* Secciones: la principal destaca; las plegables se parecen a las tarjetas; la secundaria queda discreta. */
.registro .seccion.principal { padding: 1rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 0.75rem; }
.registro .seccion.principal .nota { margin: 0 0 0.5rem; font-size: 1rem; }
.registro .seccion.principal .acciones { margin-top: 0; }
.registro .seccion.secundaria h2 { color: var(--suave); }
details.plegable { margin: 0.5rem 0; padding: 0 0.75rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 0.75rem; }
details.plegable > summary { font-weight: 600; }
details.plegable[open] { padding-bottom: 0.5rem; }
details.plegable .filas { margin-top: 0.25rem; }
.acciones.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.acciones.rejilla .tactil { width: 100%; margin: 0; min-height: 3rem; font-size: 0.95rem; text-align: center; }

/* Operación sobre varias máquinas: qué paso es, qué se hace y sobre cuáles. */
.banner-lote { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--tarjeta); border: 2px solid var(--acento); border-radius: 0.75rem; }
.banner-lote p { margin: 0; }
.banner-paso { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acento); }
.banner-accion { margin: 0.15rem 0 !important; font-size: 1.05rem; font-weight: 700; }
.banner-maquinas { font-size: 0.95rem; color: var(--suave); }

/* Desplegables: el título a la izquierda, sin subrayado, con una flecha que indica si está abierto. */
.registro details > summary { list-style: none; }
.registro details > summary::-webkit-details-marker { display: none; }
.registro details > summary.tactil { justify-content: flex-start; margin: 0; padding-left: 0; text-decoration: none; color: var(--texto); font-weight: 600; }
.registro details > summary.tactil::after { content: "▾"; margin-left: auto; padding-left: 0.5rem; color: var(--suave); }
.registro details[open] > summary.tactil::after { content: "▴"; }
.registro .seleccion-menu > summary.tactil::after { content: none; }
.registro details.procedencia > summary.tactil { font-weight: 500; font-size: 0.9rem; color: var(--suave); }

/* En el celular, los botones de acción ocupan todo el ancho (principales y secundarios) y no se salen del cuadro. */
@media (max-width: 30rem) {
  .registro .acciones:not(.rejilla):not(.dos) .tactil { flex: 1 1 100%; margin: 0.25rem 0 0; }
}

/* Listas de filas: el título no lleva sangría ni subrayado. */
.registro .fila .fila-titulo.tactil { justify-content: flex-start; margin: 0; padding-left: 0; text-decoration: none; }
.registro .fila { padding: 0.6rem 0.75rem; }
.registro .linea { margin: 0.15rem 0; font-size: 0.92rem; }

/* Mis máquinas: cada máquina es una tarjeta con casilla, nombre, estado y lo que importa (dueño, pool, ubicación, falta). */
.fila.maquina { padding: 0.4rem 0.75rem 0.75rem; }
.fila.maquina:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--tarjeta)); }
.maquina-cabeza { display: flex; align-items: center; gap: 0.25rem; }
.maquina-cabeza .fila-titulo { flex: 1 1 auto; min-width: 0; color: var(--texto); font-size: 1.05rem; }
.maquina-cabeza .casilla { position: relative; display: block; flex: none; width: 2.75rem; height: 2.75rem; min-height: 0; margin: 0; }
.maquina-cabeza .casilla input[type="checkbox"] { position: absolute; top: 0.5rem; left: 0.5rem; width: 1.75rem; height: 1.75rem; margin: 0; }
.maquina-cabeza .casilla label { position: absolute; inset: 0; display: block; min-width: 0; min-height: 0; margin: 0; }
.etiqueta.estado { flex: none; margin: 0; font-weight: 600; white-space: nowrap; }
.etiqueta.ok { color: var(--ok-texto); background: var(--ok-fondo); border-color: transparent; }
.etiqueta.falta { color: var(--aviso-texto); background: var(--aviso-fondo); border-color: transparent; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0; }
.etiquetas .etiqueta { margin: 0; }
.linea.falta { color: var(--aviso-texto); font-weight: 600; }
/* Estado de los datos de una máquina de un vistazo: ícono + palabra (nunca solo color). Mismos colores del resto de la app. */
.puntos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.4rem 0; padding: 0; list-style: none; }
.punto { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border: 1px solid var(--borde); border-radius: 1rem; font-size: 0.85rem; color: var(--suave); }
.punto-icono { font-weight: 700; }
.punto.completo { color: var(--ok-texto); background: var(--ok-fondo); border-color: transparent; }
.punto.obligatorio { color: var(--aviso-texto); background: var(--aviso-fondo); border-color: transparent; font-weight: 600; }
.punto.no_corresponde { opacity: 0.85; }
.registro details.pendientes { margin: 0.25rem 0; }
.acciones.dos { gap: 0.5rem; margin-top: 0.5rem; }
.acciones.dos .tactil { flex: 1 1 0; margin: 0; }

/* Barra de selección: siempre a la vista, dice cuántas hay elegidas y abre las acciones. */
.registro .seleccion-barra { bottom: 0.5rem; margin: 1rem 0 0; padding: 0.25rem 0.5rem; border: 2px solid var(--acento); border-radius: 0.75rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.registro .seleccion-menu > summary { justify-content: space-between; gap: 0.5rem; width: 100%; margin: 0; padding: 0.25rem 0; text-decoration: none; color: var(--texto); }
.seleccion-contador { font-size: 0.95rem; }
.seleccion-abrir { flex: none; padding: 0.45rem 1rem; font-weight: 700; color: var(--acento-texto); background: var(--acento); border-radius: 0.5rem; }
details.filtros-caja { padding: 0 0.75rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 0.75rem; }
details.filtros-caja > summary { margin: 0; }
details.filtros-caja form { padding: 0 0 0.75rem; background: none; border: 0; }

/* ───────────── Ronda de presentación de M2 (2026-10-24, F54): datos legibles, estados con color y texto, celular ─────────────
   Solo presentación, y solo dentro de .registro (la pantalla de ingreso de M0 no cambia). Reglas que pisan a las de arriba a propósito.
   Colores: completo = verde, falta (obligatorio) = rojo, opcional que falta = amarillo limón brillante. El color nunca va solo: cada estado lleva su
   ícono (✓ ! ○) y, los que piden atención, su palabra («Falta:», «Opcional:»). */
:root {
  --bien-fondo: #c9eed4;
  --bien-texto: #0f4a25;
  --bien-borde: #2e8b4f;
  --falta-fondo: #f9cdc8;
  --falta-texto: #7a1209;
  --falta-borde: #c0392b;
  --opc-fondo: #e6ff1f;
  --opc-texto: #1b1f24;
  --opc-borde: #8a9a00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bien-fondo: #1f4d2f;
    --bien-texto: #bff2cd;
    --bien-borde: #57b97a;
    --falta-fondo: #5c2621;
    --falta-texto: #ffd0ca;
    --falta-borde: #ff8c80;
    --opc-fondo: #e6ff1f;
    --opc-texto: #1b1f24;
    --opc-borde: #f3ff80;
  }
}

:root[data-tema="claro"] {
  --bien-fondo: #c9eed4;
  --bien-texto: #0f4a25;
  --bien-borde: #2e8b4f;
  --falta-fondo: #f9cdc8;
  --falta-texto: #7a1209;
  --falta-borde: #c0392b;
  --opc-fondo: #e6ff1f;
  --opc-texto: #1b1f24;
  --opc-borde: #8a9a00;
}

:root[data-tema="oscuro"] {
  --bien-fondo: #1f4d2f;
  --bien-texto: #bff2cd;
  --bien-borde: #57b97a;
  --falta-fondo: #5c2621;
  --falta-texto: #ffd0ca;
  --falta-borde: #ff8c80;
  --opc-fondo: #e6ff1f;
  --opc-texto: #1b1f24;
  --opc-borde: #f3ff80;
}

/* Las palabras no se cortan a la mitad: se parten entre palabras. Solo los textos larguísimos sin espacios (un código) se parten donde haga falta. */
.registro .fila { overflow-wrap: break-word; }
.registro .tactil, .registro button, .registro .boton { overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.25; }
.registro .acciones .tactil { white-space: normal; }
/* El texto va centrado SOLO en los botones y enlaces de acción; los títulos de fila y los resúmenes plegables se leen alineados a la izquierda. */
.registro button, .registro .boton, .registro a.tactil.secundario, .registro .acciones .tactil, .registro .formulario-acciones .tactil, .registro .navegacion .tactil { text-align: center; }
.registro summary.tactil { text-align: left; overflow-wrap: anywhere; }
.registro .fila .fila-titulo.tactil { text-align: left; }
/* Un nombre larguísimo SIN espacios (o un título) se parte donde haga falta en vez de salirse de la pantalla. */
.registro .fila-titulo, .registro h1, .registro .linea, .registro .datos dd { overflow-wrap: anywhere; }

/* Los enlaces que se tocan para desplegar («¿Qué va acá?», «Procedencia del dato») miden 16 px como el resto de los botones; la casilla de elegir también. */
.registro .ayuda-plegable summary { font-size: 1rem; }
.registro details.procedencia > summary.tactil { font-size: 1rem; }
.maquina-cabeza .casilla label { font-size: 1rem; }

/* Cabecera de una fila: el título y, al lado, el estado de lo que describe (una pastilla), sin mezclarse con las etiquetas. */
.registro .fila-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; }
.registro .fila-cabeza .fila-titulo { flex: 1 1 auto; min-width: 0; margin: 0; }
.registro .fila-cabeza .etiqueta.estado { flex: none; margin: 0; }
.registro .etiquetas { margin: 0.1rem 0 0.2rem; }

/* Estados de una asignación o de un pago (pastilla) y certeza del dato (etiqueta punteada): son cosas distintas y se ven distintas. */
.etiqueta.estado.ok { color: var(--bien-texto); background: var(--bien-fondo); border-color: var(--bien-borde); }
.etiqueta.estado.falta { color: var(--falta-texto); background: var(--falta-fondo); border-color: var(--falta-borde); }
.etiqueta.estado.aviso { color: var(--opc-texto); background: var(--opc-fondo); border-color: var(--opc-borde); }
.etiqueta.estado.neutro { color: var(--suave); background: transparent; border: 1px solid var(--suave); }
.etiqueta.certeza { border: 1px dashed var(--suave); color: var(--suave); }

/* Renglones «etiqueta: valor» con la etiqueta chica y apagada y el valor a la vista; los importes alineados. */
.datos { display: grid; margin: 0.3rem 0 0; padding: 0; }
.datos .dato { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr); gap: 0 0.75rem; align-items: baseline; padding: 0.3rem 0; border-top: 1px solid var(--borde); }
.datos .dato:first-child { border-top: 0; }
.datos dt { margin: 0; font-size: 0.85rem; color: var(--suave); }
.datos dd { margin: 0; font-size: 0.95rem; font-weight: 600; }
.datos .importe dd { font-variant-numeric: tabular-nums; }
.datos .total { border-top: 2px solid var(--suave); }
.datos .total dd { font-size: 1.02rem; }
.datos .ciclo.dada_de_baja dd { color: var(--falta-texto); }
@media (max-width: 22rem) {
  .datos .dato { grid-template-columns: minmax(0, 1fr); }
}

/* «Mis máquinas»: los datos de cada tarjeta en dos columnas, para que la lista no se alargue. */
.fila.maquina .datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.75rem; margin: 0.1rem 0 0.2rem; }
.fila.maquina .datos .dato { grid-template-columns: minmax(0, 1fr); border-top: 0; padding: 0.15rem 0; }

/* Estado de los datos de una máquina: completo (verde), falta (rojo) y opcional (amarillo limón), con ícono y palabra. */
.punto.completo { color: var(--bien-texto); background: var(--bien-fondo); border-color: var(--bien-borde); }
.punto.obligatorio { color: var(--falta-texto); background: var(--falta-fondo); border-color: var(--falta-borde); font-weight: 700; }
.punto.opcional { color: var(--opc-texto); background: var(--opc-fondo); border-color: var(--opc-borde); font-weight: 600; }
.punto .palabra { font-weight: 700; }
details.pendientes .pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.75rem; margin: 0.4rem 0; padding: 0.4rem 0.6rem; border: 1px solid var(--borde); border-radius: 0.5rem; }
details.pendientes .pendiente .linea { flex: 1 1 13rem; margin: 0.1rem 0; }
details.pendientes .pendiente.obligatorio .linea { color: var(--falta-texto); }
details.pendientes .pendiente.opcional .linea { color: var(--opc-texto); }
details.pendientes .pendiente .tactil { flex: none; margin: 0; }
details.pendientes .pendiente.obligatorio { color: var(--falta-texto); background: var(--falta-fondo); border-color: var(--falta-borde); }
details.pendientes .pendiente.opcional { color: var(--opc-texto); background: var(--opc-fondo); border-color: var(--opc-borde); }
details.pendientes .pendiente.opcional .tactil.secundario { color: var(--opc-texto); border-color: var(--opc-texto); }
details.pendientes .pendiente.obligatorio .tactil.secundario { color: var(--falta-texto); border-color: var(--falta-texto); }
.etiqueta.falta { color: var(--falta-texto); background: var(--falta-fondo); }
.etiqueta.ok { color: var(--bien-texto); background: var(--bien-fondo); }

/* Los botones en rejilla (dos por fila) con la misma letra que el resto de los botones: 16 px. */
.acciones.rejilla .tactil { font-size: 1rem; }

/* Menos alto por pantalla: tarjetas y secciones más compactas, sin perder nada. */
.registro .fila { margin-bottom: 0.5rem; }
.registro h2 { margin: 1rem 0 0.4rem; }
.registro .acciones { margin-top: 0.4rem; }

/* Saldo del libro junto a los campos (cuenta e importe): el disponible y cuánto sale / cuánto queda, en celeste; si no alcanza, el aviso rojo de siempre (.aviso). */
:root {
  --celeste-fondo: #d9eefb;
  --celeste-texto: #0a3d5c;
  --celeste-borde: #1b6f9f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --celeste-fondo: #11394f;
    --celeste-texto: #c4e8ff;
    --celeste-borde: #5cb6e8;
  }
}

:root[data-tema="claro"] {
  --celeste-fondo: #d9eefb;
  --celeste-texto: #0a3d5c;
  --celeste-borde: #1b6f9f;
}

:root[data-tema="oscuro"] {
  --celeste-fondo: #11394f;
  --celeste-texto: #c4e8ff;
  --celeste-borde: #5cb6e8;
}

.saldo-ranura { margin: -0.4rem 0 1rem; }
.saldo-ranura p { margin: 0.25rem 0 0; }
.saldo-disponible,
.saldo-resumen {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: var(--celeste-texto);
  background: var(--celeste-fondo);
  border-left: 0.3rem solid var(--celeste-borde);
  border-radius: 0.4rem;
}
/* Importes a la vista en los listados de movimientos: la palabra (Entra, Sale, Pendiente) y el signo dicen el sentido; el color solo acompaña. */
.flujos { list-style: none; margin: 0.3rem 0 0.2rem; padding: 0; }
.flujo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; padding: 0.25rem 0; }
.flujo .etiqueta.estado { align-self: center; }
.flujo-importe { font-size: 1.1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.flujo-donde { flex: 1 1 11rem; min-width: 0; font-size: 0.9rem; color: var(--suave); overflow-wrap: anywhere; }

.saldo-fecha { font-size: 0.85rem; color: var(--suave); }
.saldo-ranura .nota { font-size: 0.9rem; }
.saldo-ranura .aviso { padding: 0.5rem 0.75rem; font-weight: 600; }