/* NovaNotaria — hoja de estilo propia.
   Sin Tailwind ni build: el servidor no tiene Node, asi que el CSS se sirve
   estatico y se edita a mano. */

:root {
  --tinta: #1a1d21;
  --tinta-suave: #4a5058;
  --tinta-tenue: #7b828b;
  --papel: #f7f6f3;
  --papel-blanco: #ffffff;
  --linea: #dcd9d3;
  --linea-fuerte: #c3bfb7;
  --acento: #7a5c2e;
  --acento-claro: #f0e9dc;
  --verde: #2f6b45;
  --verde-fondo: #e6f0e9;
  --ambar: #8a6520;
  --ambar-fondo: #fbf1dc;
  --rojo: #94332c;
  --rojo-fondo: #f8e6e4;
  --sombra: 0 1px 2px rgba(26,29,33,.06), 0 4px 12px rgba(26,29,33,.04);
  --radio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Estructura --- */
.app { display: flex; min-height: 100vh; }

.barra-lateral {
  width: 250px;
  flex-shrink: 0;
  background: var(--papel-blanco);
  border-right: 1px solid var(--linea);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
}

.marca {
  padding: 0 22px 20px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 14px;
}
.marca-nombre { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.marca-notaria { font-size: 13px; color: var(--tinta-tenue); margin-top: 2px; }

.menu { list-style: none; margin: 0; padding: 0 12px; flex: 1; }
.menu li { margin-bottom: 2px; }
.menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font-size: 15px;
}
.menu a:hover { background: var(--papel); color: var(--tinta); text-decoration: none; }
.menu a.activo { background: var(--acento-claro); color: var(--acento); font-weight: 600; }

.pie-lateral {
  padding: 16px 22px 0;
  border-top: 1px solid var(--linea);
  font-size: 13px;
  color: var(--tinta-tenue);
}
.pie-lateral .usuario { color: var(--tinta); font-weight: 600; }
.pie-lateral .rol { display: block; margin-bottom: 8px; }

.contenido { flex: 1; padding: 34px 44px; max-width: 1180px; }

.cabecera-pagina { margin-bottom: 26px; }
.cabecera-pagina h1 { margin: 0 0 4px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.cabecera-pagina p { margin: 0; color: var(--tinta-suave); }

/* --- Tarjetas --- */
.tarjeta {
  background: var(--papel-blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.tarjeta h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; }

.dato-grande { font-size: 33px; font-weight: 600; line-height: 1.1; }
.dato-etiqueta { font-size: 13px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .04em; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--linea-fuerte);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-tenue);
  font-weight: 600;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--papel); }

/* --- Botones --- */
.boton {
  display: inline-block;
  padding: 9px 17px;
  border-radius: var(--radio);
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover { background: #674e26; text-decoration: none; color: #fff; }
.boton-secundario { background: var(--papel-blanco); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton-secundario:hover { background: var(--papel); color: var(--tinta); }
.boton-peligro { background: var(--rojo); border-color: var(--rojo); }
.boton-peligro:hover { background: #7d2b25; }
.boton-pequeno { padding: 5px 11px; font-size: 14px; }

.acciones { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
td .acciones { flex-wrap: nowrap; }
td .acciones form { margin: 0; }
.acciones-pagina { margin-bottom: 20px; }

/* --- Formularios --- */
.campo { margin-bottom: 17px; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.campo .ayuda { font-size: 13px; color: var(--tinta-tenue); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 15px;
  background: var(--papel-blanco);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}
.error-campo { color: var(--rojo); font-size: 13px; margin-top: 4px; }

/* --- Avisos --- */
.aviso { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 20px; border: 1px solid; font-size: 15px; }
.aviso-exito { background: var(--verde-fondo); border-color: #b9d4c3; color: var(--verde); }
.aviso-error { background: var(--rojo-fondo); border-color: #e3bdb9; color: var(--rojo); }
.aviso-atencion { background: var(--ambar-fondo); border-color: #e3cf9e; color: var(--ambar); }

/* --- Etiquetas de estado --- */
.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}
.etiqueta-verde { background: var(--verde-fondo); color: var(--verde); border-color: #b9d4c3; }
.etiqueta-ambar { background: var(--ambar-fondo); color: var(--ambar); border-color: #e3cf9e; }
.etiqueta-roja { background: var(--rojo-fondo); color: var(--rojo); border-color: #e3bdb9; }
.etiqueta-neutra { background: var(--papel); color: var(--tinta-suave); border-color: var(--linea-fuerte); }

.vacio { padding: 40px 20px; text-align: center; color: var(--tinta-tenue); }

/* --- Login --- */
.pantalla-acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--papel);
}
.caja-acceso { width: 100%; max-width: 410px; }
.caja-acceso .marca-acceso { text-align: center; margin-bottom: 26px; }
.caja-acceso .marca-acceso h1 { font-size: 33px; margin: 0; font-weight: 600; letter-spacing: -.02em; }
.caja-acceso .marca-acceso p { color: var(--tinta-tenue); margin: 5px 0 0; }
.creditos {
  text-align: center;
  margin-top: 26px;
  font-size: 13px;
  color: var(--tinta-tenue);
}

@media (max-width: 820px) {
  .app { flex-direction: column; }
  .barra-lateral { width: 100%; border-right: none; border-bottom: 1px solid var(--linea); }
  .contenido { padding: 22px 18px; }
}

/* --- Diálogo de confirmación --- */
dialog.dialogo {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 24px 26px;
  max-width: 460px;
  box-shadow: 0 10px 40px rgba(26,29,33,.18);
  color: var(--tinta);
  background: var(--papel-blanco);
  font-family: inherit;
}
dialog.dialogo::backdrop { background: rgba(26,29,33,.42); }
dialog.dialogo h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
dialog.dialogo p { margin: 0 0 20px; color: var(--tinta-suave); }
dialog.dialogo form { margin: 0; }

/* --- Zona de carga de documentos --- */
.zona-soltar {
  border: 2px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 42px 24px;
  text-align: center;
  cursor: pointer;
  background: var(--papel);
  transition: border-color .15s, background .15s;
}
.zona-soltar:hover, .zona-soltar-activa {
  border-color: var(--acento);
  background: var(--acento-claro);
}
.zona-soltar-titulo { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.zona-soltar-ayuda { margin: 0 0 10px; color: var(--tinta-suave); }
.zona-soltar-limites { margin: 0; font-size: 13px; color: var(--tinta-tenue); }
.enlace-boton {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  cursor: pointer;
}
.lista-elegidos { list-style: none; padding: 0; margin: 16px 0 0; }
.lista-elegidos li {
  padding: 7px 12px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 6px;
  font-size: 14px;
}

/* Un botón deshabilitado tiene que parecerlo. */
.boton:disabled,
.boton[disabled] {
  background: var(--linea);
  border-color: var(--linea-fuerte);
  color: var(--tinta-tenue);
  cursor: not-allowed;
}
.boton:disabled:hover,
.boton[disabled]:hover {
  background: var(--linea);
  color: var(--tinta-tenue);
}

/* Elección de cómo se controla el texto de la biblioteca. Dos tarjetas
   pulsables: el radio es pequeño y la zona de clic tiene que ser grande. */
.opcion-modo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.opcion-modo:hover {
    border-color: var(--acento);
}

.opcion-modo-activa {
    border-color: var(--acento);
    background: var(--acento-claro);
}

.opcion-modo input[type="radio"] {
    margin-top: 4px;
    flex: 0 0 auto;
}

.opcion-modo span {
    font-size: 14px;
    color: var(--tinta-suave);
    line-height: 1.55;
}

.opcion-modo strong {
    display: block;
    font-size: 15px;
    color: var(--tinta);
    margin-bottom: 2px;
}

.opcion-modo em {
    font-style: normal;
    color: var(--acento);
    font-weight: 600;
}

/* — El editor del borrador ————————————————————————————————————————
   Cada párrafo es un bloque editable que sabe de qué cláusula viene. El texto
   va en monoespaciada porque así se lee el borrador en la notaría, y porque
   con letra de ancho fijo se ve al vuelo si un párrafo quedó descuadrado. */

.titulo-seccion {
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--linea);
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acento);
}

.bloque {
  background: var(--papel-blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 10px;
  padding: 10px 14px 8px;
  transition: border-color .12s ease;
}

.bloque:focus-within {
  border-color: var(--acento);
  border-left-color: var(--acento);
  box-shadow: var(--sombra);
}

.bloque-incompleto {
  border-left-color: var(--rojo);
}

.texto-bloque {
  width: 100%;
  border: 0;
  padding: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--tinta);
  font-family: "Courier New", Courier, monospace;
  font-size: 14.5px;
  line-height: 1.7;
}

.texto-bloque:focus {
  outline: none;
}

.texto-bloque[readonly] {
  color: var(--tinta-suave);
}

.pie-bloque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted var(--linea);
  font-size: 12.5px;
  color: var(--tinta-tenue);
}

.pie-bloque code {
  font-size: 12.5px;
  color: var(--tinta-tenue);
}

.enlace-pie {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--acento);
  font-family: inherit;
  font-size: 12.5px;
  text-decoration: underline;
}

.traza {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--papel);
  border-radius: var(--radio);
  font-size: 13.5px;
}

.traza table {
  margin-top: 8px;
}

.traza td, .traza th {
  padding: 4px 8px;
  font-size: 13px;
}

/* El aviso de guardado se queda fijo abajo a la derecha: el usuario está
   leyendo el texto, no mirando la cabecera. */
.estado-guardado {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 8px 14px;
  border-radius: var(--radio);
  background: var(--verde-fondo);
  color: var(--verde);
  border: 1px solid var(--verde);
  font-size: 13.5px;
  box-shadow: var(--sombra);
  z-index: 40;
}

.estado-guardado-error {
  background: var(--rojo-fondo);
  color: var(--rojo);
  border-color: var(--rojo);
}

.selector-version {
  padding: 8px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-blanco);
  font-family: inherit;
  font-size: 14px;
}

/* La fila del checklist que necesita un motivo antes de marcarse. */
.linea-motivo {
  display: flex;
  gap: 6px;
  align-items: center;
}

.campo-motivo {
  width: 170px;
  padding: 5px 8px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 13px;
}

/* El atributo hidden trae su display:none de la hoja del navegador, y
   cualquier regla nuestra con clase le gana. Sin esto, las etiquetas del
   editor que se ocultan y se muestran en vivo salían todas a la vez. */
[hidden] { display: none !important; }

/* Dos campos en la misma línea cuando son cortos y van juntos (código postal
   y provincia, por ejemplo). Se apilan en pantallas estrechas. */
.rejilla-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
}

/* Buscador de la lista de expedientes: en una línea si cabe, apilado si no. */
.barra-busqueda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.barra-busqueda input[type="search"] {
  flex: 1 1 260px;
  padding: 9px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 15px;
}

.barra-busqueda select {
  padding: 9px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-blanco);
  font-family: inherit;
  font-size: 15px;
}

/* Acciones de cada dato del checklist: escribir el valor, dar fe, o marcar
   que no procede. Se apilan porque la columna es estrecha. */
.acciones-dato { display: flex; flex-direction: column; gap: 8px; }
.linea-dato { display: flex; gap: 6px; align-items: center; }

.campo-dato {
  width: 100%;
  min-width: 150px;
  padding: 6px 9px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 14px;
}

.campo-dato:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

/* — Pestañas del expediente ————————————————————————————————————— */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 20px;
  border-bottom: 2px solid var(--linea);
}

.pestana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--tinta-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.pestana:hover { color: var(--tinta); }

.pestana-activa {
  color: var(--acento);
  font-weight: 600;
  border-bottom-color: var(--acento);
}

.pestana-cuenta {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--rojo-fondo);
  color: var(--rojo);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.pestana-cuenta-suave {
  background: var(--papel);
  color: var(--tinta-tenue);
}

.panel { display: none; }
.panel-visible { display: block; }

/* — Cada comprobación ——————————————————————————————————————————— */
.titulo-grupo {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 24px 0 10px;
}

.comprobacion {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.comprobacion-atencion { border-left-color: var(--ambar); background: #fffdf8; }
.comprobacion-conforme { border-left-color: var(--verde); }
.comprobacion-no_procede { opacity: .6; }

.comprobacion-cabecera { display: flex; gap: 12px; align-items: flex-start; }

.comprobacion-marca {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta-tenue);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comprobacion-atencion .comprobacion-marca { background: var(--ambar-fondo); color: var(--ambar); font-weight: 700; }
.comprobacion-conforme .comprobacion-marca { background: var(--verde-fondo); color: var(--verde); }

.comprobacion-cuerpo { flex: 1; }

.comprobacion-detalle {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.comprobacion-hallazgo {
  margin: 10px 0 0;
  padding: 9px 12px;
  background: var(--papel);
  border-radius: var(--radio);
  font-size: 14px;
  line-height: 1.5;
}

.comprobacion-hallazgo span {
  color: var(--tinta-tenue);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.comprobacion-nota {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--tinta);
  border-left: 2px solid var(--acento-claro);
  padding-left: 10px;
}

.comprobacion-firma {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--tinta-tenue);
}

.comprobacion-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 12px 0 0 38px;
}

.comprobacion-acciones .campo-dato { flex: 1 1 200px; }

/* — El borrador a doble columna ————————————————————————————————
   Izquierda el párrafo, derecha lo que se le pide a la IA. En pantalla
   estrecha se apilan: el texto primero, que es lo que se lee. */
.bloque-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 1100px) {
  .bloque-columnas {
    grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr);
  }
}

.bloque-texto { min-width: 0; }

.bloque-revision {
  border-left: 1px solid var(--linea);
  padding-left: 16px;
}

@media (max-width: 1099px) {
  .bloque-revision {
    border-left: 0;
    border-top: 1px dotted var(--linea);
    padding-left: 0;
    padding-top: 12px;
  }
}

.bloque-revision label {
  display: block;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 6px;
}

.instruccion {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 8px;
}

.instruccion:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.propuesta {
  margin-top: 12px;
  padding: 12px;
  background: var(--acento-claro);
  border-radius: var(--radio);
}

.propuesta-aviso {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ambar);
  background: var(--ambar-fondo);
  border-radius: var(--radio);
  padding: 8px 10px;
  margin-bottom: 10px;
}

.propuesta-texto {
  font-family: "Courier New", Courier, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tinta);
  white-space: pre-wrap;
  margin-bottom: 10px;
}

/* — El expediente como recorrido ————————————————————————————————
   Cada paso numerado, en el orden en que se trabaja. La numeración a la
   izquierda para que se vea dónde está uno sin leer los títulos. */
.paso {
  display: flex;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--linea);
}

.paso-final { border-bottom: 0; }

.paso-numero {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--acento-claro);
  color: var(--acento);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paso-cuerpo { flex: 1; min-width: 0; }
.paso-cuerpo h2 { margin: 4px 0 6px; }

.paso-ayuda {
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* — La barra de avance ——————————————————————————————————————— */
.avance {
  margin-top: 18px;
  padding: 16px;
  background: var(--papel);
  border-radius: var(--radio);
}

.avance-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}

.avance-barra {
  height: 8px;
  background: var(--linea);
  border-radius: 4px;
  overflow: hidden;
}

.avance-relleno {
  height: 100%;
  width: 0;
  background: var(--acento);
  transition: width .5s ease;
}

.avance-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 13.5px;
  max-height: 200px;
  overflow-y: auto;
}

.avance-lista li {
  padding: 3px 0;
  color: var(--tinta-suave);
}

.avance-lista .avance-listo { color: var(--verde); }
.avance-lista .avance-rechazado,
.avance-lista .avance-error { color: var(--rojo); }
.avance-lista .avance-clasificando,
.avance-lista .avance-extrayendo { color: var(--acento); }

/* — Guardar todo de una vez ——————————————————————————————————— */
.guardar-todo {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  position: sticky;
  bottom: 0;
  background: var(--papel-blanco);
  padding-bottom: 4px;
}

.aviso-guardado {
  font-size: 14px;
  color: var(--verde);
}
/* ── Lo que hemos entendido del expediente ────────────────────────────────
   Panel de la lectura de conjunto. Va entre subir documentos y rellenar
   campos, porque saber que dos personas están mezcladas cambia lo que uno
   escribe después.

   Sin colores de alarma más allá de lo imprescindible: la lista ya es
   suficientemente seria por lo que dice.
   ------------------------------------------------------------------------ */

.lectura {
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 22px 24px;
    margin: 0 0 28px;
    background: var(--papel);
}

.lectura-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lectura-cabecera h2 {
    margin: 0;
    font-size: 1.05rem;
}

.lectura-fecha {
    font-size: 0.8rem;
    color: var(--tinta-tenue);
}

.lectura-resumen {
    margin: 12px 0 0;
    line-height: 1.6;
    max-width: 68ch;
}

/* Quién es quién ------------------------------------------------------- */

.lectura-quien {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--linea);
}

.lectura-persona {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lectura-rol {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--linea);
    color: var(--tinta-tenue);
    white-space: nowrap;
}

.lectura-rol-transmitente { border-color: #b08968; color: #8a6440; }
.lectura-rol-adquirente { border-color: #6a8caf; color: #4a6b8a; }

.lectura-nombre { font-size: 0.9rem; }

/* Lo que no cuadra ----------------------------------------------------- */

.lectura-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    font-size: 0.95rem;
}

.lectura-cuenta {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--linea);
    color: var(--tinta-tenue);
}

.lectura-aviso {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--tinta-tenue);
    max-width: 68ch;
}

.lectura-lista {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lectura-item {
    border-left: 3px solid var(--linea);
    padding: 2px 0 2px 14px;
}

.lectura-item-bloqueante { border-left-color: var(--rojo); }
.lectura-item-revisar { border-left-color: var(--ambar); }

.lectura-item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
}

.lectura-item p {
    margin: 3px 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--tinta-tenue);
    max-width: 74ch;
}

.lectura-limpio {
    margin: 18px 0 0;
    font-size: 0.9rem;
    color: var(--verde);
}

/* Lo que no se ha podido saber ------------------------------------------ */

.lectura-dudas {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--linea);
}

.lectura-dudas summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--tinta-tenue);
}

.lectura-dudas ul {
    margin: 12px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 7px;
}

.lectura-dudas li {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--tinta-tenue);
    max-width: 74ch;
}

@media (max-width: 640px) {
    .lectura { padding: 18px 16px; }
}

/* Los avisos de "revisar" se enumeran plegados: la lista completa con sus
   explicaciones ocupaba doce mil pixeles y hundia lo importante. */
.lectura-item-revisar summary {
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
}

.lectura-item-revisar summary::marker { color: var(--tinta-tenue); }

.lectura-item-revisar p { margin-top: 6px; }

/* ── El checklist agrupado por entidad ────────────────────────────────────
   Un bloque por cada persona, finca o pago. Abierto si le falta algo, cerrado
   si está completo: con cuatro fincas, la diferencia entre ver lo que importa
   y bajar por una lista de treinta pantallas.
   ------------------------------------------------------------------------ */

.seccion-titulo {
    font-size: 16px;
    margin: 26px 0 10px;
}

.entidad {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    margin-bottom: 10px;
    background: var(--papel-blanco);
}

.entidad-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.entidad-titulo::-webkit-details-marker { display: none; }

.entidad-titulo::before {
    content: "▸";
    color: var(--tinta-tenue);
    font-size: 0.8em;
    transition: transform 0.15s;
}

.entidad[open] > .entidad-titulo::before { transform: rotate(90deg); }

.entidad-nombre {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
}

.entidad-estado {
    font-size: 0.78rem;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.entidad-estado-pendiente {
    background: var(--ambar-fondo);
    color: var(--ambar);
}

.entidad-estado-hecho {
    background: var(--verde-fondo);
    color: var(--verde);
}

.entidad > table {
    border-top: 1px solid var(--linea);
}

@media (max-width: 640px) {
    .entidad-titulo { flex-wrap: wrap; gap: 6px; }
}