:root {
  --fondo: #f4f5f7;
  --texto: #1d2329;
  --suave: #5b6672;
  --primario: #0b5cad;
  --error: #b42318;
  --borde: #c9d0d8;
  --ok: #1a7f37;
  --alerta: #9a6700;
}

* { box-sizing: border-box; }
/* Lo oculto se oculta siempre, aunque su clase le dé otro display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  background: var(--fondo);
  color: var(--texto);
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
}

h1 { font-size: 1.5rem; margin: 8px 0 24px; }
h2 { font-size: 1.1rem; margin: 28px 0 8px; }
ol { padding-left: 1.3em; line-height: 1.5; }
li { margin-bottom: 6px; }

label { display: block; margin: 16px 0 6px; font-weight: 600; }

input {
  width: 100%;
  padding: 14px 12px;
  font-size: 1rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
}
/* Casillas y círculos: nunca del ancho de un campo de texto (F2 P21, 2.4). */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }

button {
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  font-size: 1.05rem;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  background: var(--primario);
  color: #fff;
}

button.secundario { background: #fff; color: var(--primario); border: 2px solid var(--primario); }

/* Enlace con forma de botón (navegación entre pantallas). */
a.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
a.boton.secundario { background: #fff; color: var(--primario); border: 2px solid var(--primario); }
button:disabled { opacity: 0.6; }

dl { margin: 0; background: #fff; border-radius: 8px; padding: 8px 16px; }
dt { color: var(--suave); font-size: 0.85rem; margin-top: 12px; }
dd { margin: 2px 0 8px; font-weight: 600; }

.nota { padding: 12px; border-radius: 8px; background: #fff4d6; color: #4d3800; }
.nota.ok { background: #dcf3e2; color: #0f4d22; }
.suave { color: var(--suave); font-weight: 400; font-size: 0.85rem; }

.mensaje { margin-top: 16px; padding: 12px; border-radius: 8px; background: #fde8e7; color: var(--error); }
.mensaje[data-tipo="ok"] { background: #e3f4e8; color: #1d5e2f; }
/* «Mi contraseña»: en la PC no ocupa todo el ancho. */
#pantalla-contrasena form, #pantalla-contrasena .mensaje { max-width: 480px; }

/* Arriba, siempre visible: modo pruebas, conexión y cambios sin enviar, aviso de versión nueva. */
.arriba {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  background: var(--texto);
}

.barra-estado {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: #fff;
}

.conexion::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #9aa4ae;
}
.conexion[data-estado="en_linea"]::before { background: #3fb950; }
.conexion[data-estado="sin_conexion"]::before,
.conexion[data-estado="servidor_no_disponible"]::before { background: #f85149; }
.pendientes[data-hay="si"] { font-weight: 700; color: #ffd23f; }

.aviso-version {
  margin: 0;
  min-height: 48px;
  border-radius: 0;
  background: var(--ok);
}

.franja-pruebas {
  padding: 8px 16px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: repeating-linear-gradient(-45deg, #ffd23f, #ffd23f 12px, #f5c400 12px, #f5c400 24px);
  color: #1d2329;
}

.aviso-sesion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #fde8e7;
  color: var(--error);
  font-size: 0.95rem;
}
.aviso-sesion .boton { margin: 0; min-height: 44px; padding: 0 16px; background: var(--error); color: #fff; }
/* F2 P21: avisos del sistema apilados arriba (pantallas/comun.js, avisoArriba). */
.aviso-arriba { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px; font-size: 0.95rem; }
.aviso-arriba .texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aviso-arriba[data-tipo="error"] { background: #fde8e7; color: var(--error); }
.aviso-arriba[data-tipo="aviso"] { background: #fff3d6; color: #6b4b00; }
.aviso-arriba[data-tipo="info"] { background: #e7effa; color: #0b3d75; }
.aviso-arriba + .aviso-arriba { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.cerrar-aviso { flex: none; width: 44px; min-height: 44px; margin: 0; padding: 0; background: none; color: inherit; font-size: 1.4rem; line-height: 1; }
/* F2 P16: el servidor cambió de base con cosas sin enviar en el celular. */
.aviso-otra-base { flex-wrap: wrap; }
.aviso-otra-base > span:first-child { flex: 1 1 260px; min-width: 0; }
.aviso-otra-base .botones { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso-otra-base button { width: auto; min-height: 44px; margin: 0; padding: 0 14px; }

dd.error { color: var(--error); font-weight: 600; }

.lista-tecnica { padding-left: 1.4em; font-size: 0.85rem; font-family: ui-monospace, Consolas, monospace; }
.lista-tecnica li { margin-bottom: 8px; word-break: break-all; }

/* Diálogo de confirmación: «Cancelar» queda marcado (foco) y es el más fácil de tocar. */
.dialogo {
  width: min(440px, calc(100% - 32px));
  border: 0;
  border-radius: 12px;
  padding: 20px;
  color: var(--texto);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.5); }
.dialogo p { margin: 0; line-height: 1.4; }
.dialogo-botones { display: flex; flex-direction: column; }
.dialogo-botones button { margin-top: 16px; }
button.peligro { background: var(--error); }
button:focus-visible, a.boton:focus-visible { outline: 3px solid #ffb000; outline-offset: 2px; }

/* --- P7: inicio y parte del día --------------------------------------------------------------- */
select, textarea {
  width: 100%;
  padding: 14px 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
}
input[type="date"], input[type="time"] { min-height: 52px; }
input:disabled, select:disabled, textarea:disabled { background: #eef0f3; color: var(--suave); }

.tarjeta { margin-top: 16px; padding: 4px 16px 16px; background: #fff; border-radius: 12px; }
.tarjeta h2 { margin-top: 16px; }
.numero-parte { margin: 10px 0 0; font-weight: 700; }

button.chico { width: auto; min-height: 44px; margin: 0; padding: 0 14px; font-size: 0.95rem; }

.lista-partes, .lista-faltantes, .renglones { list-style: none; margin: 0; padding: 0; }
.item-parte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 56px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  text-decoration: none;
}
/* El día arriba y los botones siempre debajo, en todos (no al lado cuando el texto es corto). */
.faltante {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
}
.botones-faltante { display: flex; gap: 8px; }

.estado-parte { padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: #dcf3e2; color: #0f4d22; }
.estado-parte.cerrado { background: #e6e9ee; color: var(--suave); }
.marca { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.marca.pendiente { background: #fff4d6; color: #4d3800; }
.marca.rechazo { background: #fde8e7; color: var(--error); }
.marca.papel { background: #e7effa; color: #0b3d7a; }
.marca-detalle { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--error); }
.marcas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
/* Botón «PDF» del parte (F3 P4), con «Para el PDF hace falta señal.» al lado. */
.pdf-del-parte { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }

.volver { display: inline-flex; align-items: center; min-height: 44px; color: var(--primario); font-weight: 600; text-decoration: none; }
.subtitulo { margin: -16px 0 8px; color: var(--suave); text-transform: capitalize; }

/* Resumen arriba del parte: HH, HM, personas, tareas. */
.resumen-parte {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 12px;
  background: var(--primario);
  color: #fff;
  text-align: center;
}
.dato-resumen strong { display: block; font-size: 1.2rem; }
.dato-resumen span { font-size: 0.75rem; opacity: 0.9; }

/* El relleno va en la sección (no márgenes en los hijos): así un botón de ancho completo no se sale. */
.seccion { margin-bottom: 12px; padding: 0 16px; border-radius: 12px; background: #fff; }
.seccion[open] { padding-bottom: 16px; }
.seccion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  margin: 0 -16px;
  padding: 0 16px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.seccion > summary::-webkit-details-marker { display: none; }
.seccion > summary::after { content: "▾"; color: var(--suave); }
.seccion[open] > summary::after { content: "▴"; }
.seccion > summary .cuenta { margin-left: auto; margin-right: 12px; color: var(--suave); font-weight: 600; }
.seccion .agregar { margin-top: 12px; }

.renglon { padding: 12px 0; border-top: 1px solid #e6e9ee; }
.renglon[role="button"] { cursor: pointer; }
.renglon.vacio { color: var(--suave); }
.renglon-texto { font-weight: 600; }
.renglon-autor { font-size: 0.85rem; color: var(--suave); margin: 2px 0 4px; }

.cabecera { padding-bottom: 8px; }
.campo { margin-top: 4px; }
.campo label, .campo .etiqueta { display: block; margin: 16px 0 6px; font-weight: 600; }
.campo-sino { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.campo-sino input { width: 28px; height: 28px; margin: 0; }
.campo-sino label { margin: 0; }
.campo-otro label { font-weight: 400; margin-top: 8px; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  width: auto;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 2px solid var(--borde);
  background: #fff;
  color: var(--texto);
  font-weight: 600;
}
.opcion[aria-pressed="true"] { border-color: var(--primario); background: var(--primario); color: #fff; }
.opcion.mas { border-style: dashed; color: var(--suave); }

.contador { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.contador button { margin: 0; min-height: 52px; font-size: 1.5rem; }
.contador input { text-align: center; font-size: 1.2rem; }
.con-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; }
.con-sugerencias input { flex: 1 1 140px; }
.sugerencia { width: auto; min-height: 48px; margin: 0; padding: 0 12px; background: #e7effa; color: var(--primario); }
.sufijo { align-self: center; color: var(--suave); }

/* Editor de un renglón: hoja a pantalla completa, botones al alcance del pulgar. */
.hoja {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--fondo);
}
.hoja .editor { max-width: 480px; margin: 0 auto; }
/* F2 P17: «Volver» arriba de cada hoja, fijo al bajar (la hoja es la que se desplaza). */
.barra-hoja {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: calc(-1 * max(16px, env(safe-area-inset-top))) 0 12px;
  padding: max(8px, env(safe-area-inset-top)) 0 8px;
  background: var(--fondo);
  border-bottom: 1px solid #d9dee3;
}
.barra-hoja h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.1rem; }
.barra-hoja .volver-hoja { flex: none; width: auto; min-height: 44px; margin: 0; padding: 0 12px 0 4px; background: none; color: var(--primario); font-weight: 600; }
.botones-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.botones-editor button { margin-top: 24px; }

.aviso-breve {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 40;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--texto);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.mi-usuario { margin-top: 24px; }
.mi-usuario summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }

.tarjeta-consulta { margin-top: 16px; padding: 4px 16px 12px; border-radius: 12px; background: #fff; }
.tarjeta-consulta h2 { font-size: 1.05rem; }
.tarjeta-consulta h3 { font-size: 0.95rem; margin: 16px 0 4px; }

.opciones-dialogo { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.opciones-dialogo .opcion { width: 100%; text-align: left; }

/* --- P8: cierre, rechazos y traslado ---------------------------------------------------------- */
.acciones-parte { margin-top: 8px; }
.acciones-parte button { margin-top: 12px; }
.nota ul { margin: 8px 0 0; padding-left: 1.2em; }
.nota a { color: inherit; font-weight: 700; }
.lista-usuarios, .lista-dias { list-style: none; margin: 0; padding: 0; }
.lista-usuarios > li { margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: #fff; }
.lista-usuarios li > div { font-size: 0.9rem; }
.lista-usuarios .dispositivo { font-size: 0.85rem; color: var(--suave); }
.lista-usuarios .aviso-usuario { margin-top: 4px; font-size: 0.9rem; color: #4d3800; }
.lista-dias li { margin-bottom: 4px; }
.tarjeta-rechazo { margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #fff; }
.tarjeta-rechazo h2 { margin: 0 0 4px; font-size: 1rem; }
.tarjeta-rechazo .detalle { margin: 4px 0; overflow-wrap: anywhere; }
.tarjeta-rechazo .motivo { color: var(--error); font-size: 0.9rem; }
.tarjeta-rechazo button, .tarjeta-rechazo a.boton { margin-top: 12px; }
.tarjeta-rechazo .mensaje { margin-top: 8px; }
.grupo-mover { margin-top: 16px; }
.grupo-mover h2 { margin: 0 0 4px; font-size: 1rem; }
.elegir-renglon { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #e6e9ee; }
.elegir-renglon input { width: 28px; height: 28px; flex: none; margin: 2px 0 0; }
.elegir-renglon label { margin: 0; font-weight: 400; }
.elegir-renglon .suave { display: block; }
.marca.tardia { background: #efe3fb; color: #4b1f80; }

/* --- F1.1: padrón de personal ---------------------------------------------------------------- */
.grupo-padron { margin-top: 8px; padding: 4px 16px 8px; border-radius: 12px; background: #fff; }
.grupo-padron h2 { margin: 12px 0 4px; font-size: 1rem; }
.persona-padron[role="button"] { cursor: pointer; }
.bajas { margin-top: 12px; padding: 0 16px 8px; border-radius: 12px; background: #fff; }
.bajas > summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.marca.revisar { background: #fde8e7; color: var(--error); }
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* --- F1.1: personal y equipos del parte ------------------------------------------------------- */
.resumen-desplegable > summary { list-style: none; cursor: pointer; }
.resumen-desplegable > summary::-webkit-details-marker { display: none; }
.resumen-desplegable[open] .resumen-parte { border-radius: 12px 12px 0 0; margin-bottom: 0; }
.resumen-detalle { margin-bottom: 12px; padding: 8px 12px; border-radius: 0 0 12px 12px; background: #fff; }
.tabla-resumen { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.9rem; }
.tabla-resumen caption { text-align: left; font-weight: 700; padding-bottom: 4px; }
.tabla-resumen th, .tabla-resumen td { padding: 4px 6px; border-bottom: 1px solid #e6e9ee; text-align: right; }
.tabla-resumen th:first-child, .tabla-resumen td:first-child { text-align: left; overflow-wrap: anywhere; }
.subtitulo-seccion { margin: 16px 0 4px; font-size: 0.95rem; color: var(--suave); }
.seccion .elegir-de-lista { margin-top: 12px; }
.lista-elegir { margin-top: 8px; }
.grupo-elegir h3 { margin: 16px 0 4px; font-size: 0.95rem; }
.editor.elegir input[type="search"] { margin-top: 8px; }

footer { text-align: center; color: var(--suave); font-size: 0.8rem; padding: 24px 0; }

/* Fotos (F2) */
.fotos-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.foto-tarjeta { min-width: 0; border-radius: 8px; overflow: hidden; background: #eef1f5; }
.foto-tarjeta img, .foto-sin-imagen { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-sin-imagen { display: grid; place-items: center; color: var(--suave); font-size: 0.8rem; }
.foto-datos { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; font-size: 0.75rem; }
.foto-epigrafe { flex-basis: 100%; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; } /* completo, con sus saltos (F2 P19) */
.marca.sin-epigrafe { background: #fde8e8; color: #8a1c1c; }
.marca.galeria { background: #fff3d6; color: #6b4b00; }

/* F2 P6: botón flotante, aviso de epígrafes, hoja de una foto y la ráfaga. */
.foto-tarjeta[role="button"] { cursor: pointer; }
.marca.pliego { background: #e3f4e8; color: #1d5b2d; }
.aviso-fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #fde8e8; color: #8a1c1c; }
.aviso-fotos span { flex: 1 1 180px; min-width: 0; }
.aviso-fotos button { width: auto; min-height: 44px; margin: 0; padding: 0 14px; }
#pantalla-parte:not([hidden]) { padding-bottom: 88px; } /* que el botón flotante no tape lo último */
.boton-flotante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 20;
  width: 64px;
  height: 64px;
  min-height: 0;
  margin: 0;
  border-radius: 50%;
  font-size: 1.7rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.editor-foto .foto-grande { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; background: #1b1f24; }
.foto-toma { margin: 8px 0; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.marca.aviso-galeria { white-space: normal; margin: 2px 0; }
.foto-epigrafe-lectura { overflow-wrap: anywhere; white-space: pre-line; }
body.con-camara { overflow: hidden; }
.camara { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: space-between; background: #000; color: #fff; }
.camara-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camara-arriba, .camara-abajo { position: relative; z-index: 1; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.camara-arriba { padding-top: max(12px, env(safe-area-inset-top)); background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); }
.camara-contador { font-weight: 700; }
.camara-mensaje { margin: 4px 0 0; overflow-wrap: anywhere; }
.camara-mensaje:empty { display: none; }
.camara-abajo {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 12px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}
.camara-abajo button { min-width: 0; margin: 0; }
.camara-telefono { font-size: 0.85rem; }
.camara-disparar { width: 76px; height: 76px; min-height: 0; justify-self: center; border: 6px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.camara.sin-camara .camara-disparar { visibility: hidden; }
.camara.destello::after { content: ""; position: absolute; inset: 0; background: #fff; pointer-events: none; animation: destello 0.25s ease-out forwards; }
@keyframes destello { from { opacity: 0.7; } to { opacity: 0; } }

/* F2 P7: recorrido del día, galería y fotos en los rechazos. */
.recorrido-del-dia h3 { margin: 20px 0 4px; font-size: 1rem; }
.lista-recorrido { margin: 0; padding: 0; list-style: none; }
.punto-recorrido { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.punto-recorrido .punto-nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.punto-recorrido.con-foto .punto-nombre { color: #1d5b2d; font-weight: 600; }
.foto-parte { flex-basis: 100%; color: var(--suave); }
.fechas-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fechas-galeria .campo, .filtros-galeria .campo { min-width: 0; }
.filtros-galeria select, .filtros-galeria input[type="date"] { width: 100%; min-width: 0; }
.miniatura-rechazo { display: block; width: 120px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* F2 P12: fotos desde cada renglón. */
.boton-fotos-renglon { width: auto; min-height: 40px; margin: 6px 0 0; padding: 0 12px; }
.panel-fotos-renglon { margin: 8px 0 0; padding: 8px; border-radius: 8px; background: #f5f7fa; cursor: default; }
.panel-fotos-renglon .fotos-grilla { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); margin-bottom: 8px; }
.botones-fotos-renglon { display: flex; flex-wrap: wrap; gap: 8px; }
.botones-fotos-renglon button { flex: 1 1 140px; width: auto; margin: 0; }
.marca.renglon-borrado { background: #fff3d6; color: #6b4b00; }
.aviso-renglon-borrado { color: #6b4b00; }

/* F2 P13: «Elegir varias» y el mismo epígrafe para varias. */
.barra-varias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.barra-varias button { width: auto; min-height: 40px; margin: 0; padding: 0 12px; }
.cuantas-elegidas { flex: 1 1 100%; font-weight: 600; }
.foto-tarjeta.elegible { position: relative; outline: 2px solid transparent; }
.foto-tarjeta.elegible::after { content: ""; position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.35); }
.foto-tarjeta.elegible[aria-pressed="true"] { outline-color: var(--primario, #0b5cad); }
.foto-tarjeta.elegible[aria-pressed="true"]::after { content: "✓"; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--primario, #0b5cad); }
.ya-tienen { margin: 12px 0; padding: 8px 12px; border: 1px solid #e6e9ee; border-radius: 8px; }
.opcion-ya-tienen { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: normal; }
.opcion-ya-tienen input { width: 24px; height: 24px; flex: none; margin: 0; }
.aviso-fotos button + button { margin-left: 0; }

/* F2 P14: la miniatura de una foto rechazada, en grande. */
.miniatura-rechazo { cursor: pointer; }
.vista-grande { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(0, 0, 0, 0.85); color: #fff; }
.vista-grande img { max-width: 100%; max-height: 75vh; width: auto; image-rendering: auto; border-radius: 8px; }
.vista-grande .suave { color: #dfe3e8; text-align: center; }
.vista-grande button { width: auto; min-width: 160px; }