/* 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;
  /* Fijo al bajar por la página (Diego, 5-oct-2026): el menú y el usuario
     siempre a la vista. Si la pantalla es baja, el menú baja por dentro. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.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; min-width: 0; }

.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); }
/* Panel por etapas y filtros «tipo Excel» (5-oct-2026) */
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--tinta-suave); background: var(--papel-blanco); cursor: pointer; }
.chip:hover { border-color: var(--acento); color: var(--tinta); }
.resumen-filtros { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; color: var(--tinta-suave); margin: 2px 0 10px; }
.enlace-quitar { margin-left: auto; font-size: 13px; }
.filtro-col { position: relative; display: inline-block; }
.filtro-col > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; padding: 3px 6px; margin: -3px -6px; border-radius: 4px; }
.filtro-col .flecha { flex: 0 0 auto; }
.filtro-col > summary::-webkit-details-marker { display: none; }
.filtro-col > summary:hover { background: var(--papel); }
.filtro-col .flecha { font-size: 10px; color: var(--tinta-tenue); border: 1px solid var(--linea-fuerte); border-radius: 3px; padding: 0 3px; line-height: 14px; background: var(--papel-blanco); }
.filtro-col.filtro-activo > summary { color: var(--acento); }
.filtro-col.filtro-activo .flecha { background: var(--acento); border-color: var(--acento); color: #fff; }
.filtro-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: -6px; min-width: 230px; max-height: 360px; overflow-y: auto; background: var(--papel-blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(26,29,33,.14); padding: 10px 12px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinta); font-size: 13.5px; }
.filtro-derecha .filtro-pop { left: auto; right: -6px; }
.filtro-pop label { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer; white-space: nowrap; }
.filtro-pop label .n { margin-left: auto; color: var(--tinta-tenue); font-size: 12px; font-variant-numeric: tabular-nums; }
.filtro-pop .filtro-todo { border-bottom: 1px solid var(--linea); margin-bottom: 4px; padding-bottom: 6px; font-weight: 600; }
.filtro-pop input[type=search] { width: 100%; }
.filtro-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea); }
.filtro-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); font-size: 12.5px; }
.filtro-fechas label { justify-content: space-between; }
.filtro-fechas { min-width: 270px; }
.sin-resultados { text-align: center; color: var(--tinta-tenue); padding: 22px 8px; }
.pasos-mini { display: flex; gap: 4px; margin-bottom: 4px; }
.paso-mini { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); background: var(--papel-blanco); }
.paso-mini:last-child { border-radius: 3px; }
.paso-guardada { background: var(--verde); border-color: var(--verde); }
.paso-redactada { background: var(--acento-claro); border-color: var(--acento); }
.paso-redactando { background: var(--acento); border-color: var(--acento); animation: latir 1.4s ease-in-out infinite; }
.etapa-texto { font-size: 13px; color: var(--tinta-suave); }
.etapa-final { color: var(--verde); font-weight: 600; }
.fila-finalizada td { background: #f7faf7; }
.tabla-expedientes .boton { white-space: nowrap; }
/* En pantallas de portátil la tabla no cabe con siete columnas: el recuento
   de documentos es lo que menos se echa de menos. */
@media (max-width: 1279px) { .tabla-expedientes .col-documentos { display: none; } }
@media (max-width: 1279px) { .tabla-expedientes th, .tabla-expedientes td { padding-left: 7px; padding-right: 7px; } .tabla-expedientes td:last-child { padding-right: 0; } }

.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); position: static; height: auto; overflow: visible; }
  .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; }
}
/* Las fincas de la operacion, dentro de "Lo que hemos entendido". Una linea:
   que se vende, y cuantas cosas del expediente se quedan fuera. */
.lectura-fincas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
    font-size: 0.9rem;
}

.lectura-fincas-titulo {
    color: var(--tinta-tenue);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.lectura-finca {
    padding: 2px 9px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--papel-blanco);
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lectura-fincas-fuera {
    color: var(--tinta-tenue);
    font-size: 0.82rem;
}
/* ── La lectura editable: los controles que heredan al checklist ──────────
   Poca cosa a proposito. Un select por persona, una casilla por finca, el
   precio con su alcance y los faltantes del ultimo borrador. */

.lectura-rol-select {
    font-size: 0.78rem;
    padding: 2px 6px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--papel-blanco);
    color: var(--tinta-suave);
    cursor: pointer;
}

.lectura-separar {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: 999px;
    background: transparent;
    color: var(--tinta-tenue);
    cursor: pointer;
}

.lectura-separar:hover { color: var(--tinta); border-color: var(--tinta-tenue); }

.lectura-finca { cursor: default; }

.lectura-finca input { margin-right: 5px; vertical-align: -1px; }

label.lectura-finca { cursor: pointer; }

.lectura-finca-fuera { opacity: 0.55; }

/* El precio con su alcance, en una linea */

.lectura-precio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
    font-size: 0.9rem;
}

.campo-precio {
    width: 130px;
    padding: 5px 9px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    font: inherit;
}

.lectura-alcance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--tinta-suave);
}

/* Los faltantes del ultimo borrador */

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

.faltantes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px 18px;
    margin-top: 12px;
}

.faltante { display: block; }

.faltante-nombre {
    display: block;
    font-size: 0.8rem;
    color: var(--tinta-tenue);
    margin-bottom: 3px;
}

.faltante .campo-dato { width: 100%; }
/* ── El borrador en siete secciones plegables ─────────────────────────────
   Una escritura entera desplegada son treinta pantallas. Cada seccion es un
   pliegue con su nombre, cuantos parrafos tiene y que le pasa; dentro, los
   parrafos como texto corrido -el textarea sigue ahi, pero sin parecer un
   formulario- y UNA caja de instrucciones para la IA. */

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

.seccion-resumen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.seccion-resumen::-webkit-details-marker { display: none; }

.seccion-resumen::before {
    content: "▸";
    color: var(--tinta-tenue);
    font-size: 0.85em;
    transition: transform 0.15s;
}

.seccion-escritura[open] > .seccion-resumen::before { transform: rotate(90deg); }

.seccion-nombre {
    font-weight: 600;
    font-size: 1.02rem;
    flex: 0 0 auto;
}

.seccion-cuenta {
    color: var(--tinta-tenue);
    font-size: 0.82rem;
    flex: 1;
}

.seccion-marca { flex: 0 0 auto; }

.seccion-cuerpo {
    border-top: 1px solid var(--linea);
    padding: 6px 18px 18px;
}

/* Dentro del pliegue, el parrafo manda: el textarea pierde el marco y solo
   lo recupera cuando se esta escribiendo en el. */

.seccion-cuerpo .bloque {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 10px 0 4px;
    border-bottom: 1px dashed var(--linea);
}

.seccion-cuerpo .bloque:last-of-type { border-bottom: none; }

.seccion-cuerpo .texto-bloque {
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    width: 100%;
}

.seccion-cuerpo .texto-bloque:hover:not([readonly]) { border-color: var(--linea); }

.seccion-cuerpo .texto-bloque:focus {
    border-color: var(--linea-fuerte);
    background: var(--papel-blanco);
    outline: none;
}

/* La caja de la seccion para la IA */

.seccion-revision {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--papel);
}

.seccion-revision label {
    display: block;
    font-size: 0.85rem;
    color: var(--tinta-suave);
    margin-bottom: 6px;
}

.seccion-revision .instruccion {
    width: 100%;
    margin-bottom: 8px;
}

.propuesta-parrafo { margin-top: 12px; }
/* El párrafo que la IA está escribiendo ahora mismo lleva el cursor */
.propuesta-texto.escribiendo::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--acento); animation: latir 1.1s steps(2, start) infinite; }

.propuesta-parrafo > code {
    font-size: 0.75rem;
    color: var(--tinta-tenue);
}

/* La lectura mientras se hace: el paso 3 nunca en blanco */
.lectura-cargando { border-style: dashed; }
.lectura-espera { color: var(--tinta-tenue); display: flex; align-items: center; gap: 10px; }
/* Lo que la lectura ya ha entendido, apareciendo según lo escribe */
.lectura-en-vivo { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.lectura-en-vivo li { font-size: 14px; padding: 6px 10px; border-left: 3px solid var(--linea); background: var(--papel-blanco); border-radius: 4px; animation: aparecer .35s ease-out; }
.lectura-en-vivo li.en-vivo-persona { border-left-color: var(--acento); }
.lectura-en-vivo li.en-vivo-finca { border-left-color: var(--verde); }
.lectura-en-vivo li.en-vivo-no-cuadra { border-left-color: var(--ambar); color: var(--ambar); }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.punto-vivo {
    width: 9px; height: 9px; border-radius: 50%; background: var(--acento);
    flex: 0 0 auto; animation: latir 1.4s ease-in-out infinite;
}
@keyframes latir { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* ── Seccion a dos columnas: texto que se lee, panel que se queda ─────────
   La izquierda es la seccion redactada de corrido; la derecha, pegada
   (sticky) mientras se baja, las modificaciones. Se lee una estipulacion
   larga y se anota al lado sin ir arriba y abajo. */
.seccion-dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}
.seccion-texto { min-width: 0; }
.seccion-lateral {
    position: sticky;
    top: 16px;
    margin-top: 0 !important;
}
.pie-discreto { min-height: 0; padding-top: 2px; }
.pie-discreto:empty { display: none; }
.adjuntar-documento { display: block; margin: 6px 0 10px; cursor: pointer; font-size: 0.85rem; }
.adjunto-nombre { margin-left: 8px; color: var(--tinta-tenue); font-size: 0.8rem; }
@media (max-width: 900px) {
    .seccion-dos-columnas { grid-template-columns: 1fr; }
    .seccion-lateral { position: static; }
}

/* ── La burbuja de la esquina ─────────────────────────────────────────── */
.burbuja { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.burbuja-boton {
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--acento); color: #fff; font-size: 1.3rem; position: relative;
    box-shadow: 0 6px 18px rgba(26,29,33,.18);
}
.burbuja-cuenta {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
    border-radius: 999px; background: var(--rojo); color: #fff; font-size: 0.72rem;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.burbuja-panel {
    position: absolute; right: 0; bottom: 64px; width: 380px; max-width: calc(100vw - 44px);
    max-height: 70vh; display: flex; flex-direction: column;
    background: var(--papel-blanco); border: 1px solid var(--linea); border-radius: 12px;
    box-shadow: 0 12px 34px rgba(26,29,33,.16); overflow: hidden;
}
.burbuja-cabecera {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-bottom: 1px solid var(--linea); font-size: 0.9rem;
}
.burbuja-cabecera strong { flex: 1; }
.burbuja-cerrar { border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--tinta-tenue); }
.burbuja-lista { overflow-y: auto; padding: 8px 14px 14px; }
.burbuja-seccion {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tinta-tenue); margin: 12px 0 6px;
}
.burbuja-nota, .burbuja-mensaje {
    display: block; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
    border-left: 3px solid var(--linea); background: var(--papel); text-decoration: none; color: inherit;
}
.burbuja-nota strong, .burbuja-mensaje strong { display: block; font-size: 0.86rem; }
.burbuja-nota p, .burbuja-mensaje p { margin: 3px 0 0; font-size: 0.82rem; color: var(--tinta-suave); white-space: pre-line; }
.burbuja-mensaje small { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--tinta-tenue); }
.burbuja-nota-bloqueante { border-left-color: var(--rojo); }
.burbuja-nota-revisar { border-left-color: var(--ambar); }
.burbuja-nota-duda { border-left-color: var(--linea-fuerte); }
.burbuja-sin-leer { border-left-color: var(--acento); background: var(--acento-claro); }
.burbuja-tipo-protocolizar { border-left-color: var(--verde); }
.burbuja-vacio { font-size: 0.85rem; color: var(--tinta-tenue); margin: 6px 0; }

/* Otros datos que traen los documentos (lectura): cita literal al lado. */
.lectura-otros .lectura-cita { color: var(--gris-medio, #6b6b6b); font-style: italic; }

/* Procedencia en el editor: lo deducido por la lectura de conjunto, en azul. */
.etiqueta-azul { background: #e7eef8; color: #2b4f7e; border-color: #b9cbe6; }
/* Lectura: lo escrito a mano pendiente de confirmar. */
.lectura-sin-confirmar { margin: 12px 0; padding: 10px 14px; background: var(--ambar-fondo); border: 1px solid #e3cf9e; border-radius: 6px; }
.lectura-sin-confirmar ul { margin: 6px 0 0 18px; }
.lectura-sin-confirmar li { margin: 3px 0; }
.lectura-sin-confirmar .lectura-indice { color: var(--tinta-tenue); }

/* --- La escritura por fases (29-sep-2026) ---
   El carril de las cinco fases, las cajas por parte y por finca, el texto
   de la fase editable en sitio y la biblioteca de modelos macro. */
.fases { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.fase { background: var(--papel-blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; font-size: 14px; min-width: 0; }
.fase-enlace { display: block; color: inherit; text-decoration: none; }
.fase-enlace:hover { text-decoration: none; }
.fase .fase-n { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-tenue); }
.fase .fase-t { display: block; font-weight: 600; }
.fase .fase-e { display: block; font-size: 12px; margin-top: 2px; color: var(--tinta-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fase-hecha { border-color: var(--verde); background: var(--verde-fondo); }
.fase-hecha .fase-e { color: var(--verde); }
.fase-actual { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-claro); }
.fase-actual .fase-e { color: var(--acento); }
.fase-bloqueada { opacity: .55; }
.fase-armado { border-style: dashed; }

.zonas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.zona { background: var(--papel-blanco); border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: var(--radio); padding: 16px 18px; min-width: 0; }
.zona h3 { margin: 0 0 2px; font-size: 16px; }
.zona .zona-sub { font-size: 13px; color: var(--tinta-tenue); margin-bottom: 12px; }
.zona-finca { border-left-color: #4a6b8a; }
.zona-anadir { border-style: dashed; border-left-style: dashed; display: flex; align-items: center; justify-content: center; min-height: 160px; background: transparent; }
.anadir { border: 0; background: transparent; color: var(--acento); font: inherit; font-size: 15px; cursor: pointer; padding: 14px; width: 100%; }
.anadir:hover { text-decoration: underline; }
.caja-papeles { margin-top: 10px; }
.soltar { display: block; border: 1.5px dashed var(--linea-fuerte); border-radius: var(--radio); padding: 12px; text-align: center; font-size: 13px; color: var(--tinta-tenue); background: var(--papel); cursor: pointer; }
.soltar:hover { border-color: var(--acento); color: var(--tinta); }
/* Soltar archivos (data-soltar): la zona se ilumina al pasar por encima */
[data-soltar].soltar-activa { border-color: var(--acento); background: var(--acento-claro); color: var(--tinta); }
.soltar.soltar-subiendo { border-style: solid; border-color: var(--acento); }
.zona-campo { border: 1.5px dashed transparent; border-radius: var(--radio); padding: 6px; margin: -6px; }
.zona-campo.soltar-activa { border-color: var(--acento); }
.adjuntar-documento.soltar-activa { outline: 1.5px dashed var(--acento); outline-offset: 3px; border-radius: 4px; }
.soltar-aviso { display: block; margin-top: 6px; font-size: 12.5px; color: var(--acento); }
.soltar-aviso.soltar-aviso-error { color: var(--rojo, #9b2c2c); }
.entrada-caja { display: block; margin: 8px auto 0; font-size: 12px; max-width: 100%; }
.docs { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13.5px; }
.docs li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linea); align-items: center; flex-wrap: wrap; }
.docs li:last-child { border-bottom: none; }
.docs .tipo { color: var(--tinta-tenue); display: flex; align-items: center; gap: 8px; }
.detectado { font-size: 13.5px; background: var(--acento-claro); border-radius: var(--radio); padding: 8px 10px; margin-top: 10px; }
.detectado b { color: var(--acento); }
.detectado .personas { margin: 6px 0 0; padding-left: 18px; }
.texto-rojo { color: var(--rojo); }
.advertencia { display: block; margin-bottom: 8px; font-size: 15px; }
.advertencia input { margin-right: 6px; }

.redaccion { background: var(--papel-blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 22px; font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 1.75; white-space: pre-wrap; outline: none; min-height: 90px; overflow-wrap: anywhere; }
.redaccion:focus { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-claro); }
.redaccion.aprobada { background: var(--verde-fondo); border-color: var(--verde); }
/* El texto de la fase según se escribe: caja con su propio desplazamiento
   y un cursor al final, para que se lea como algo que avanza */
.redaccion.en-vivo { max-height: 60vh; overflow-y: auto; color: var(--tinta); }
.redaccion.en-vivo:empty::before { content: "Preparando el texto…"; color: var(--tinta-tenue); }
.redaccion.en-vivo::after { content: ""; display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--acento); animation: latir 1.1s steps(2, start) infinite; }
.aviso-redactando { display: flex; align-items: center; gap: 10px; }
.falta { color: var(--rojo); font-weight: 700; }
.pie-redaccion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--tinta-tenue); }
.procedencia { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; margin: 8px 0; }
.procedencia span { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 1px 8px; }
.procedencia .procedencia-huecos { background: var(--rojo-fondo); color: var(--rojo); border-color: transparent; }
.variante { font-size: 13px; color: var(--tinta-tenue); margin-bottom: 6px; }
.variante code, .lista-tipo code { background: var(--papel); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.mini { font-size: 13px; color: var(--tinta-tenue); }
.lista-tipo { margin: 0 0 14px; padding-left: 20px; font-size: 15px; }

.piezas { list-style: none; margin: 0; padding: 0; }
.piezas li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.piezas li:last-child { border-bottom: none; }
.piezas .quien { font-size: 13px; color: var(--tinta-tenue); }
.pieza-numero { width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.cierre { margin: 0; padding-left: 0; list-style: none; }
.cierre li { padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.cierre li:last-child { border-bottom: none; }
.tabla-scroll { overflow-x: auto; }

.apartado { background: var(--papel-blanco); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 12px; padding: 0 18px; }
.apartado-titulo { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bloque-modelo { border-top: 1px solid var(--linea); padding: 12px 0 14px; }
.bloque-modelo-cabecera { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.variante-etiqueta { background: var(--acento-claro); color: var(--acento); padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.fijo-etiqueta { background: var(--papel); color: var(--tinta-tenue); padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.texto-modelo { width: 100%; font-family: "Courier New", Courier, monospace; font-size: 13px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); resize: vertical; }
.menu a.nuevo::after { content: "nuevo"; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--verde-fondo); color: var(--verde); padding: 1px 6px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }

@media (max-width: 900px) {
  .fases { grid-template-columns: 1fr 1fr; }
  .zonas { grid-template-columns: 1fr; }
  .piezas li { grid-template-columns: 34px 1fr; row-gap: 4px; }
}

/* Plantillas de Word en Ajustes (6-oct-2026) */
.plantilla-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 14px 0 8px; }
.plantilla-fila .acciones form { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Pasada gráfica · 6-oct-2026
   Diego: «llévalo al siglo XXI sin que pierda su línea gráfica». No cambia
   estructura, textos ni colores de marca: el papel cálido, la tinta, el
   marrón notarial, la serif en la marca, los títulos y las cifras, y el
   Courier de la escritura (imita la matriz) se quedan. Lo que cambia:
   - La letra de trabajo (menú, tablas, botones, formularios) pasa a la del
     sistema: se lee mejor en pequeño. Sin fuentes externas. Para volver a
     la serif en todo basta con --ui: var(--serif).
   - Más aire, esquinas más suaves, sombras en capas y bordes más finos.
   - Respuesta al usar: transiciones, anillo de foco y la opción activa
     del menú marcada con una barra.
   Va al final de la hoja a propósito: ordena encima de todo lo anterior
   y se puede retirar entera sin tocar nada más.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --papel: #f6f4ef;
  --papel-hundido: #efebe3;
  --linea: #e6e2da;
  --linea-fuerte: #d3cdc2;
  --acento-oscuro: #5f4722;
  --anillo: 0 0 0 3px rgba(122, 92, 46, .2);
  --sombra: 0 1px 2px rgba(48, 38, 22, .05), 0 3px 10px rgba(48, 38, 22, .04);
  --sombra-media: 0 2px 4px rgba(48, 38, 22, .05), 0 8px 22px rgba(48, 38, 22, .07);
  --sombra-alta: 0 4px 10px rgba(48, 38, 22, .06), 0 18px 44px rgba(48, 38, 22, .14);
  --radio: 8px;
  --radio-grande: 12px;
  --suave: 160ms cubic-bezier(.2, .7, .3, 1);
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: #eadcc2; color: var(--tinta); }

/* La serif se queda donde está la identidad: marca, títulos y cifras. */
h1, h2, h3,
.marca-nombre, .cabecera-pagina h1, .tarjeta h2, .dato-grande,
.caja-acceso .marca-acceso h1, dialog.dialogo h3, .paso-cuerpo h2, .zona h3, .lectura-resumen {
  font-family: var(--serif);
  letter-spacing: -.012em;
}
.cabecera-pagina { margin-bottom: 28px; }
.cabecera-pagina h1 { font-size: 30px; line-height: 1.2; }
.cabecera-pagina p { font-size: 15px; }
.tarjeta h2 { font-size: 19px; }

a { transition: color var(--suave); }
a:hover { color: var(--acento-oscuro); }

/* ── Barra lateral ─────────────────────────────────────────────────── */
.barra-lateral { background: #fbfaf7; border-right-color: var(--linea); padding-top: 26px; }
.marca { padding: 0 24px 22px; }
.marca-nombre { font-size: 24px; letter-spacing: .04em; }
.marca-notaria { font-size: 12.5px; }
.menu { padding: 0 14px; }
.menu li { margin-bottom: 3px; }
.menu a {
  font-size: 14.5px;
  padding: 8px 12px;
  border-radius: var(--radio);
  transition: background var(--suave), color var(--suave), box-shadow var(--suave);
}
.menu a:hover { background: var(--papel-hundido); }
.menu a.activo {
  background: var(--acento-claro);
  color: var(--acento-oscuro);
  box-shadow: inset 3px 0 0 var(--acento);
}
.pie-lateral { padding: 18px 24px 0; }

/* ── Contenido y tarjetas ──────────────────────────────────────────── */
.contenido { padding: 38px 48px; }
.tarjeta {
  border-color: var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  padding: 24px 26px;
}
.rejilla { gap: 18px; }
.rejilla > .tarjeta { transition: box-shadow var(--suave), transform var(--suave); }
.rejilla > .tarjeta:hover { box-shadow: var(--sombra-media); transform: translateY(-1px); }
.dato-grande { font-size: 36px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.dato-etiqueta { font-size: 11.5px; letter-spacing: .08em; font-weight: 600; margin-bottom: 4px; }

/* ── Tablas ────────────────────────────────────────────────────────── */
table { font-size: 14.5px; font-variant-numeric: tabular-nums; }
th {
  font-size: 11.5px;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--linea-fuerte);
  padding: 10px 12px;
}
td { padding: 13px 12px; border-bottom-color: var(--linea); }
tbody tr { transition: background var(--suave); }
tbody tr:hover { background: #faf8f4; }

/* ── Botones ───────────────────────────────────────────────────────── */
.boton {
  border-radius: var(--radio);
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 550;
  padding: 9px 18px;
  box-shadow: 0 1px 2px rgba(48, 38, 22, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background var(--suave), border-color var(--suave), box-shadow var(--suave), transform 80ms ease;
}
.boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); box-shadow: 0 2px 6px rgba(48, 38, 22, .18); }
.boton:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(48, 38, 22, .12); }
.boton-secundario { box-shadow: 0 1px 2px rgba(48, 38, 22, .06); }
.boton-secundario:hover { background: var(--papel); border-color: var(--acento); color: var(--acento-oscuro); box-shadow: 0 1px 3px rgba(48, 38, 22, .08); }
.boton-peligro:hover { background: #7d2b25; border-color: #7d2b25; }
.boton-pequeno { padding: 5px 12px; font-size: 13.5px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--anillo); }
.boton:focus-visible { box-shadow: var(--anillo); }

/* ── Formularios ───────────────────────────────────────────────────── */
.campo label { font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea {
  border-radius: var(--radio);
  border-color: var(--linea-fuerte);
  padding: 9px 12px;
  font-family: var(--ui);
  font-size: 14.5px;
  transition: border-color var(--suave), box-shadow var(--suave), background var(--suave);
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=search]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color: #bdb6a9; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: var(--anillo); }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); }
/* El texto de la escritura se edita como sobre papel: sin anillo. */
.texto-bloque:focus { box-shadow: none; }

/* ── Avisos y etiquetas ────────────────────────────────────────────── */
.aviso { border-radius: var(--radio); border-left-width: 4px; font-size: 14.5px; padding: 12px 16px 12px 14px; }
.etiqueta { border-radius: 999px; font-size: 12px; padding: 2px 10px; letter-spacing: .01em; }

/* ── El carril de las fases y las cajas ────────────────────────────── */
.fases { gap: 8px; }
.fase {
  border-radius: var(--radio);
  transition: box-shadow var(--suave), border-color var(--suave), transform var(--suave);
}
.fase-enlace:hover .fase, .fase:has(.fase-enlace:hover) { box-shadow: var(--sombra-media); transform: translateY(-1px); }
.fase-actual { box-shadow: 0 0 0 3px var(--acento-claro), var(--sombra); }
.zona { border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.soltar { border-radius: var(--radio); transition: border-color var(--suave), background var(--suave), color var(--suave); }
.paso-numero { box-shadow: inset 0 0 0 1px rgba(122, 92, 46, .18); font-family: var(--serif); }
.redaccion { border-radius: var(--radio); }

/* ── Ventanas emergentes, diálogos y burbuja ───────────────────────── */
.filtro-pop { border-radius: 10px; border-color: var(--linea); box-shadow: var(--sombra-alta); }
dialog.dialogo { border-radius: 14px; border-color: var(--linea); box-shadow: var(--sombra-alta); padding: 26px 28px; }
dialog.dialogo::backdrop { background: rgba(32, 26, 18, .38); backdrop-filter: blur(2px); }
.burbuja-panel { border-radius: var(--radio-grande); box-shadow: var(--sombra-alta); }
.burbuja-boton { box-shadow: var(--sombra-media); transition: transform var(--suave), box-shadow var(--suave); }
.burbuja-boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

/* ── Acceso ────────────────────────────────────────────────────────── */
.pantalla-acceso { background: radial-gradient(1200px 600px at 50% -10%, #fbf8f2 0%, var(--papel) 60%, #f1ede5 100%); }
.caja-acceso .tarjeta { border-radius: 14px; box-shadow: var(--sombra-alta); padding: 28px 30px; }
.caja-acceso .marca-acceso h1 { font-size: 38px; letter-spacing: .05em; }

/* ── Barras de desplazamiento a juego ──────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #cfc8bb transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5cec2; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #bfb6a6; background-clip: padding-box; border: 2px solid transparent; }

@media (max-width: 820px) {
  .contenido { padding: 24px 18px; }
}

/* Quien pide menos movimiento en su sistema, no lo tiene aquí. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Un tipo con una sola fase (la póliza, 6-oct-2026): el carril no se
   queda en dos columnas estrechas de seis. */
.fases-cortas { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .fases-cortas { grid-template-columns: 1fr 1fr; } }

/* ── Mesa de luz y trazabilidad · 7-oct-2026 ─────────────────────────
   La fase se revisa como una hoja de protocolo sobre una mesa oscura.
   Cada dato va subrayado con el color del papel del que sale; al lado,
   las cifras y los papeles, que al pulsarlos dejan resaltado solo lo
   suyo. Debajo, la barra para pedirle a NOVA que la rehaga. */
:root {
  --mesa: #1c1e23;
  --mesa-borde: #30333a;
  --mesa-texto: #c9ccd2;
  --mesa-tenue: #8d929b;
  --oro: #e2bd78;
  --hoja: #fbf8f1;
  --hoja-tinta: #22201c;
  --fuente-0: #12a37a;
  --fuente-1: #6c5ce7;
  --fuente-2: #2f80ed;
  --fuente-3: #d9822b;
  --fuente-4: #c2185b;
  --fuente-5: #0e9aa7;
}
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mesa { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; background: var(--mesa); border-radius: 16px; padding: 26px; margin: 12px 0 0; }
.mesa-sola { grid-template-columns: minmax(0, 1fr); }
.mesa-hoja { min-width: 0; }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: center; color: var(--mesa-tenue); font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; margin: 0 2px 12px; }
.hoja-sello { color: var(--oro); border: 1px solid var(--oro); border-radius: 999px; padding: 4px 10px; letter-spacing: .14em; }
.mesa .redaccion { background: var(--hoja); color: var(--hoja-tinta); border: 0; border-radius: 3px; padding: 40px 46px; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 22px 50px rgba(0,0,0,.45); min-height: 220px; }
.mesa .redaccion:focus { box-shadow: 0 0 0 2px var(--oro), 0 22px 50px rgba(0,0,0,.45); }
.mesa .redaccion.aprobada { background: var(--hoja); }
.mesa .redaccion.en-vivo { max-height: 70vh; }
.mesa .redaccion.en-vivo::after { background: var(--oro); width: 2px; }
.mesa .falta { background: #f6dcd6; color: #8e2b22; border-radius: 2px; padding: 0 2px; font-weight: 700; }
.dato-fuente { border-bottom: 2px solid var(--c); transition: background var(--suave, .16s), border-color var(--suave, .16s); cursor: help; }
.dato-fuente:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.dato-fuente-0 { --c: var(--fuente-0); } .dato-fuente-1 { --c: var(--fuente-1); } .dato-fuente-2 { --c: var(--fuente-2); }
.dato-fuente-3 { --c: var(--fuente-3); } .dato-fuente-4 { --c: var(--fuente-4); } .dato-fuente-5 { --c: var(--fuente-5); }
.mesa[data-enfoque] .dato-fuente { border-bottom-color: transparent; }
.mesa[data-enfoque="0"] .dato-fuente-0, .mesa[data-enfoque="1"] .dato-fuente-1, .mesa[data-enfoque="2"] .dato-fuente-2,
.mesa[data-enfoque="3"] .dato-fuente-3, .mesa[data-enfoque="4"] .dato-fuente-4, .mesa[data-enfoque="5"] .dato-fuente-5 { border-bottom-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.mesa-lado { color: var(--mesa-texto); font: 13px/1.45 var(--ui); padding-top: 23px; position: sticky; top: 16px; align-self: start; }
.mesa-cifra { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--mesa-borde); padding: 9px 0; color: var(--mesa-tenue); }
.mesa-cifra b { color: var(--oro); font: 500 20px/1 var(--serif); }
.mesa-cifra b.cifra-roja { color: #f09a8c; }
.mesa-titulo { color: var(--mesa-tenue); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 18px 0 4px; }
.mesa-nota { color: var(--mesa-tenue); font-size: 12px; margin: 8px 0 0; }
.fuente { display: flex; gap: 8px; align-items: center; width: 100%; background: transparent; border: 1px solid var(--mesa-borde); color: var(--mesa-texto); border-radius: 9px; padding: 7px 9px; margin-top: 6px; text-align: left; cursor: pointer; font: 12px/1.3 var(--ui); }
.fuente:hover { border-color: var(--mesa-tenue); }
.fuente[aria-pressed="true"] { border-color: var(--oro); background: rgba(226, 189, 120, .08); }
.fuente .punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.fuente-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuente-n { color: var(--mesa-tenue); }
.pidele { display: flex; gap: 10px; align-items: center; background: var(--mesa); border: 1px solid var(--mesa-borde); border-radius: 14px; padding: 8px 8px 8px 16px; margin-top: 12px; }
.pidele-chispa { color: var(--oro); font-style: normal; font-size: 15px; }
.pidele input[type=text] { flex: 1; min-width: 0; background: transparent; border: 0; color: #eef0f3; font: 14px var(--ui); padding: 8px 0; outline: none; box-shadow: none; }
.pidele input::placeholder { color: var(--mesa-tenue); }
.pidele:focus-within { border-color: var(--oro); }
.pidele .boton { background: var(--oro); border-color: var(--oro); color: #1c1e23; }
.pidele-nota { margin: 6px 4px 0; }
@media (max-width: 1100px) {
  .mesa { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .mesa .redaccion { padding: 26px 22px; }
  .mesa-lado { padding-top: 0; position: static; }
}

/* ── Mesa de luz en toda NOVA · 7-oct-2026 ───────────────────────────
   Diego: «llevalo a todo NOVA». La mesa oscura y el oro de la pantalla
   de fase pasan al menú, al carril, a los botones principales, al
   editor del borrador y al acceso. El contenido sigue sobre papel claro:
   se lee durante horas. */
:root {
  --acento: #8a6528;
  --acento-oscuro: #6c4d1b;
  --acento-claro: #f5ecda;
  --anillo: 0 0 0 3px rgba(226, 189, 120, .35);
  --papel: #f2f0eb;
  --papel-hundido: #e9e6df;
  --tinta: #1c1e23;
}
body { background: var(--papel); }

/* El menú es la mesa */
.barra-lateral { background: var(--mesa); border-right: 0; color: var(--mesa-texto); }
.marca { border-bottom-color: var(--mesa-borde); }
.marca-nombre { color: var(--oro); letter-spacing: .3em; font-size: 22px; font-weight: 500; }
.marca-notaria { color: var(--mesa-tenue); }
.menu a { color: var(--mesa-texto); border-radius: 9px; }
.menu a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.menu a.activo { background: rgba(226, 189, 120, .1); color: var(--oro); box-shadow: inset 2px 0 0 var(--oro); font-weight: 500; }
.menu a.nuevo::after { background: rgba(226, 189, 120, .14); color: var(--oro); }
.pie-lateral { border-top-color: var(--mesa-borde); color: var(--mesa-tenue); }
.pie-lateral .usuario { color: #eef0f3; }
.pie-lateral .boton, .pie-lateral .boton-secundario { background: transparent; color: var(--mesa-texto); border-color: var(--mesa-borde); box-shadow: none; }
.pie-lateral .boton:hover, .pie-lateral .boton-secundario:hover { border-color: var(--oro); color: var(--oro); background: transparent; }
.barra-lateral { scrollbar-color: #3a3e46 transparent; }

/* Títulos y tarjetas */
.cabecera-pagina h1 { font-weight: 500; letter-spacing: -.01em; }
.tarjeta { border-radius: 14px; border-color: #e3dfd6; }
.tarjeta h2 { font-weight: 500; }
.dato-grande { font-weight: 500; color: var(--tinta); }
th { letter-spacing: .08em; }

/* Botón principal: grafito con letra oro */
.boton:not(.boton-secundario):not(.boton-peligro) { background: var(--mesa); border-color: var(--mesa); color: #f3e2bf; }
.boton:not(.boton-secundario):not(.boton-peligro):hover { background: #2b2e35; border-color: #2b2e35; color: var(--oro); }
.pidele .boton:not(.boton-secundario) { background: var(--oro); border-color: var(--oro); color: var(--mesa); }
.boton-secundario:hover { border-color: var(--oro); }

/* El carril: la fase en curso es la mesa; las guardadas, oro */
.fase-hecha { background: #fbf6ea; border-color: #e2cfa6; }
.fase-hecha .fase-e { color: var(--acento); }
.fase-actual { background: var(--mesa); border-color: var(--mesa); box-shadow: 0 8px 22px rgba(28, 30, 35, .22); }
.fase-actual .fase-n, .fase-actual .fase-e { color: var(--oro); }
.fase-actual .fase-t { color: #eef0f3; }
.paso-numero { background: var(--mesa); color: var(--oro); box-shadow: none; }
.paso-guardada { background: var(--oro); border-color: #c79f55; }
.paso-redactada { background: var(--acento-claro); border-color: var(--oro); }
.paso-redactando { background: var(--oro); border-color: var(--oro); }
.etapa-final { color: var(--acento); }

/* El editor del borrador: cada sección abierta es una hoja sobre la mesa */
.seccion-escritura { border-radius: 14px; border-color: #e3dfd6; }
/* Sin overflow: hidden, que anulaba el panel pegado al bajar (Eduardo, 8-oct). */
.seccion-escritura > .seccion-resumen { border-radius: 13px; }
.seccion-escritura[open] > .seccion-resumen { border-radius: 13px 13px 0 0; }
.seccion-escritura[open] > .seccion-cuerpo { border-radius: 0 0 13px 13px; }
.seccion-escritura[open] > .seccion-resumen { background: var(--mesa); color: #eef0f3; }
.seccion-escritura[open] > .seccion-resumen .seccion-cuenta,
.seccion-escritura[open] > .seccion-resumen::before { color: var(--mesa-tenue); }
.seccion-escritura[open] > .seccion-cuerpo { background: var(--mesa); border-top-color: var(--mesa-borde); padding: 8px 22px 24px; }
.seccion-dos-columnas .seccion-texto { background: var(--hoja); color: var(--hoja-tinta); border-radius: 3px; padding: 26px 32px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.seccion-cuerpo .bloque { border-bottom-color: #e7e0d2; }
.seccion-cuerpo .texto-bloque:focus { background: #fffdf8; border-color: var(--oro); }
.seccion-escritura[open] .seccion-revision { background: #24272d; border: 1px solid var(--mesa-borde); color: var(--mesa-texto); }
.seccion-escritura[open] .seccion-revision label,
.seccion-escritura[open] .seccion-revision .mini,
.seccion-escritura[open] .seccion-revision code,
.seccion-escritura[open] .seccion-revision .propuesta-parrafo > code { color: var(--mesa-tenue); }
.seccion-escritura[open] .seccion-revision a { color: var(--oro); }
.seccion-escritura[open] .seccion-revision .boton-secundario { background: transparent; color: var(--mesa-texto); border-color: var(--mesa-borde); }
.seccion-escritura[open] .seccion-revision .boton-secundario:hover { color: var(--oro); border-color: var(--oro); }
.seccion-escritura[open] .seccion-revision .propuesta { background: var(--hoja); color: var(--hoja-tinta); border-radius: 8px; }

/* El acceso: la mesa con la hoja encima */
.pantalla-acceso { background: var(--mesa); }
.caja-acceso .marca-acceso h1 { color: var(--oro); letter-spacing: .3em; font-weight: 500; }
.caja-acceso .marca-acceso p { color: var(--mesa-tenue); }
.caja-acceso .tarjeta { background: var(--hoja); border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.pantalla-acceso .creditos, .pantalla-acceso .creditos a { color: var(--mesa-tenue); }

@media (max-width: 820px) {
  .seccion-escritura[open] > .seccion-cuerpo { padding: 8px 10px 14px; }
  .seccion-dos-columnas .seccion-texto { padding: 18px 16px; }
}
.seccion-dos-columnas .seccion-texto .bloque { background: transparent; }
.seccion-escritura[open] .seccion-revision .boton-secundario { border-color: #555a64; color: #eef0f3; }
.seccion-escritura[open] .seccion-revision .instruccion { background: #fffdf8; border-color: #555a64; }

/* El panel de modificaciones acepta un documento arrastrado (Eduardo, 8-oct). */
.seccion-escritura[open] .seccion-revision .adjuntar-documento.soltar { background: transparent; border-color: #555a64; color: var(--mesa-texto); margin: 8px 0 10px; font-size: 12.5px; }
.seccion-escritura[open] .seccion-revision .adjuntar-documento.soltar:hover { border-color: var(--oro); color: #eef0f3; }
.seccion-escritura[open] .seccion-revision.soltar-activa { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(226, 189, 120, .35); background: #24272d; }
.seccion-escritura[open] .seccion-revision .adjunto-nombre { display: block; margin-top: 4px; color: var(--oro); }
.seccion-escritura[open] .seccion-revision .soltar-aviso { color: var(--oro); }

/* Tarjetas plegables: el cierre de coherencia del armado */
details.plegable > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before { content: "▸"; color: var(--tinta-tenue); transition: transform .15s; }
details.plegable[open] > summary::before { transform: rotate(90deg); }
details.plegable > summary h2 { margin: 0; flex: 1; }
details.plegable[open] > summary { margin-bottom: 14px; }

/* Con el menú lateral al lado, a menos de 1150 px la hoja queda en una
   tira estrecha: el panel pasa debajo (8-oct-2026). */
@media (max-width: 1150px) {
  .seccion-dos-columnas { grid-template-columns: 1fr; }
  .seccion-lateral { position: static; }
}

/* ── Primera tanda de uso · 9-oct-2026 ───────────────────────────────── */
/* Panel: qué toca hoy */
.cabecera-con-accion { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
a.tarjeta-cifra { display: block; color: inherit; text-decoration: none; }
a.tarjeta-cifra:hover { text-decoration: none; }
.tarjeta-cifra .mini { margin-top: 6px; }
.tarjeta-cifra.cifra-viva .dato-grande { color: var(--acento); }
.tarjeta-cifra.cifra-roja-suave .dato-grande { color: var(--rojo); }
.tabla-expedientes tr.fila-resaltada td { background: var(--acento-claro); }
/* Fase guardada: paso 1 plegado */
.paso-plegado > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.paso-plegado > summary::-webkit-details-marker { display: none; }
.paso-plegado > summary::before { content: "▸"; color: var(--tinta-tenue); transition: transform .15s; }
.paso-plegado[open] > summary::before { transform: rotate(90deg); }
.paso-plegado > summary h2 { margin: 0; }
.paso-plegado-cuerpo { margin-top: 14px; }
.paso-plegado-cuerpo > h2:first-child { display: none; }
.paso-accion-arriba { float: right; margin: 0 0 8px 16px; }
/* Avisos plegables («Para mirar», «Faltan N datos») */
details.aviso-plegable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.aviso-plegable > summary::-webkit-details-marker { display: none; }
details.aviso-plegable > summary::before { content: "▸"; color: var(--ambar); transition: transform .15s; }
details.aviso-plegable[open] > summary::before { transform: rotate(90deg); }
details.aviso-plegable > summary .boton { margin-left: auto; }
.avisos-lista { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.avisos-lista li { color: var(--tinta-suave); font-size: 14px; line-height: 1.45; }
.avisos-lista li b { color: var(--tinta); font-weight: 600; }
.avisos-lista a { color: inherit; }
/* Mesa: huecos y variantes */
.mesa-cifra-boton { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--mesa-borde); color: var(--mesa-tenue); font: inherit; cursor: pointer; text-align: left; }
.mesa-cifra-boton:hover { color: var(--oro); }
.mesa-detalle { margin-top: 14px; }
.mesa-detalle > summary { cursor: pointer; list-style: none; }
.mesa-detalle > summary::-webkit-details-marker { display: none; }
.mesa-lista { margin: 6px 0 0; padding-left: 14px; color: var(--mesa-texto); font: 11.5px/1.5 var(--ui); }
.falta-enfocada { outline: 3px solid var(--oro); outline-offset: 2px; transition: outline-color .3s; }
.bloque-enfocado { outline: 3px solid var(--oro); outline-offset: 4px; border-radius: 4px; }
/* Menú móvil */
.menu-movil { display: none; }
.marca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
@media (max-width: 820px) {
  .menu-movil { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--mesa-borde); background: transparent; color: var(--oro); font-size: 20px; cursor: pointer; }
  .barra-lateral { padding: 12px 0 0; }
  .marca { padding: 0 18px 12px; margin-bottom: 0; border-bottom: 0; }
  .barra-lateral .menu, .barra-lateral .pie-lateral { display: none; }
  .barra-lateral.abierta .menu, .barra-lateral.abierta .pie-lateral { display: block; }
  .barra-lateral.abierta .marca { border-bottom: 1px solid var(--mesa-borde); margin-bottom: 10px; }
  .barra-lateral.abierta .pie-lateral { padding-bottom: 14px; }
  .paso-accion-arriba { float: none; margin: 0 0 12px; }
}

/* ── Segunda tanda de uso · 9-oct-2026 ───────────────────────────────── */
tbody tr:hover { background: var(--acento-claro); }
tbody tr.fila-finalizada:hover td { background: var(--acento-claro); }
.guardado-caja { color: var(--verde); margin-left: 8px; }
.guardado-caja-error { color: var(--rojo); }
.ficha-oficial { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--linea); }
.ficha-oficial:first-of-type { border-top: 0; }
.ficha-oficial-nombre { font-family: var(--serif); font-size: 19px; }
.ficha-oficial-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.ficha-oficial-cifras .dato-grande { font-size: 30px; }
@media (max-width: 820px) { .ficha-oficial { grid-template-columns: 1fr; } }

/* ── La portada · 9-oct-2026 ───────────────────────────────────────────
   Qué es NOVA y el acceso, sobre la mesa oscura. */
.portada-cuerpo { margin: 0; background: var(--mesa); color: var(--mesa-texto); font-family: var(--ui); min-height: 100vh; }
.portada { min-height: 100vh; display: flex; flex-direction: column; max-width: 1180px; margin: 0 auto; padding: 28px 40px 24px; box-sizing: border-box; }
.portada-cabecera { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.portada-marca { font-family: var(--serif); font-size: 22px; color: var(--oro); letter-spacing: .3em; text-decoration: none; }
.portada-lema { color: var(--mesa-tenue); font-size: 13px; }
.portada-principal { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px); gap: 56px; align-items: center; padding: 48px 0 40px; }
.portada-sola { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.portada-antetitulo { color: var(--oro); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; }
.portada-texto h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -.01em; color: #f3f1ec; margin: 0 0 22px; }
.portada-entrada { font-size: 18px; line-height: 1.55; color: #d6d9de; margin: 0 0 30px; max-width: 58ch; }
.portada-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.portada-puntos li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--mesa-texto); }
.portada-puntos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--oro); }
.portada-puntos li b { display: block; color: #f3f1ec; font-weight: 500; }
.portada-nota { margin: 30px 0 0; color: var(--mesa-tenue); font-size: 13.5px; }
.hoja-acceso { background: var(--hoja); color: var(--hoja-tinta); border-radius: 4px; padding: 34px 34px 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); width: 100%; max-width: 420px; box-sizing: border-box; }
.hoja-acceso h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 18px; color: var(--hoja-tinta); }
.hoja-ayuda { color: var(--tinta-suave); font-size: 14px; margin: -8px 0 18px; }
.hoja-acceso .campo { margin-bottom: 14px; }
.hoja-acceso .campo label { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 5px; }
.hoja-acceso input[type=email], .hoja-acceso input[type=password] { width: 100%; box-sizing: border-box; background: #fff; }
.campo-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.campo-cabecera label { margin-bottom: 5px; }
.enlace-discreto { font-size: 13px; color: var(--acento); text-decoration: none; }
.enlace-discreto:hover { text-decoration: underline; }
.casilla { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 14px !important; color: var(--tinta) !important; }
.casilla input { width: auto; margin: 0; }
.boton-acceso { width: 100%; padding: 11px 16px; font-size: 15px; margin-top: 4px; }
.hoja-pie { margin: 16px 0 0; text-align: center; font-size: 13px; }
.hoja-acceso .aviso { margin-bottom: 14px; }
.portada-pie { text-align: center; color: var(--mesa-tenue); font-size: 12.5px; }
@media (max-width: 900px) {
  .portada { padding: 20px 18px 18px; }
  .portada-principal { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 0 24px; }
  .portada-texto h1 br { display: none; }
  .hoja-acceso { padding: 26px 22px 22px; max-width: none; }
}

/* ── Look and feel Protocolo · 9-oct-2026 ──────────────────────────────
   Diego eligió «Protocolo» para la portada y pidió el mismo criterio
   dentro: marfil de fondo, blanco en las tarjetas, grafito solo en el
   menú, la mesa y los botones principales; una sola escala de tipos. */
:root {
  --papel: #f6f3ec;
  --papel-hundido: #ede8dd;
  --papel-blanco: #ffffff;
  --linea: #e3dcd0;
  --linea-fuerte: #cfc6b6;
  --mesa: #15171b;
  --mesa-borde: #2c3037;
  --oro: #c9a45c;
}
body { background: var(--papel); }

/* Tipografía: una escala */
.cabecera-pagina h1, .banda h1 { font-size: 28px; line-height: 1.15; font-weight: 400; }
.tarjeta h2, .paso-cuerpo h2 { font-size: 17px; font-weight: 500; }
.zona h3 { font-size: 15px; font-weight: 500; }
body, .tarjeta, .campo, table { font-size: 14.5px; }
.mini, .paso-ayuda, .zona .zona-sub, .mesa-nota { font-size: 12.5px; }
.paso-ayuda { line-height: 1.5; }
th { font-size: 11px; letter-spacing: .1em; }
.tarjeta { border: 1px solid var(--linea); border-radius: 12px; box-shadow: none; }

/* La banda del expediente */
.banda { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; background: var(--papel-blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 22px 14px; margin: 0 0 18px; }
.banda-datos { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-tenue); }
.banda h1 { margin: 2px 0 0; font-family: var(--serif); }
.banda-sub { color: var(--tinta-tenue); font-size: 20px; }
.banda-lado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.chip { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-suave); background: var(--papel-blanco); }
.enlace-discreto { color: var(--acento); text-decoration: none; }
.enlace-discreto:hover { text-decoration: underline; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--tinta-tenue); }
.enlace-boton:hover { color: var(--rojo); text-decoration: underline; }

/* La línea de fases */
.linea-fases { list-style: none; margin: 0 0 22px; padding: 18px 10px 12px; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); background: var(--papel-blanco); border: 1px solid var(--linea); border-radius: 12px; }
.paso-linea { position: relative; text-align: center; min-width: 0; }
.paso-linea a { color: inherit; text-decoration: none; display: block; }
.paso-linea::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 1.5px; background: var(--linea); }
.paso-linea:first-child::before { display: none; }
.paso-linea.hecha::before, .paso-linea.actual::before { background: var(--oro); }
.punto-linea { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); background: var(--papel-blanco); font: 500 11px/1 var(--ui); color: var(--oro); box-sizing: border-box; }
.paso-linea.hecha .punto-linea { background: var(--oro); border-color: var(--oro); }
.paso-linea.actual .punto-linea { background: var(--mesa); border-color: var(--mesa); width: 22px; height: 22px; margin-top: -2px; }
.punto-final { border-radius: 4px; }
.paso-linea.abierta.paso-linea-final .punto-linea { border-color: var(--oro); }
.nombre-linea { display: block; margin-top: 8px; font-size: 13px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.paso-linea.actual .nombre-linea { color: var(--tinta); font-weight: 500; }
.estado-linea { display: block; font-size: 11.5px; color: var(--tinta-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.paso-linea.hecha .estado-linea { color: var(--acento); }
.paso-linea.bloqueada { opacity: .55; }
.paso-linea a:hover .nombre-linea { text-decoration: underline; }

/* Cajas ligeras */
.zona { border-left-width: 1px; border-color: var(--linea); border-radius: 12px; box-shadow: none; padding: 16px 18px 14px; }
.zona-finca { border-left-color: var(--linea); }
.docs { font-size: 13.5px; margin: 6px 0 0; }
.docs li { padding: 7px 0; border-bottom-color: var(--papel-hundido); }
.docs .tipo { font-size: 12.5px; }
.soltar.soltar-linea { padding: 8px 10px; font-size: 12.5px; border-width: 1px; background: transparent; margin-top: 10px; }
.soltar.soltar-linea:hover { background: var(--papel); }
.subir-caja .acciones { margin-top: 4px !important; }
.detectado { background: var(--papel); border: 1px solid var(--linea); font-size: 13px; }
.caja-papeles { margin-top: 6px; }

/* La mesa, continua con la pantalla */
.mesa { margin: 10px 0 0; border-radius: 12px; padding: 22px; }
.pidele { border-radius: 0 0 12px 12px; margin-top: 0; border-top: 1px solid var(--mesa-borde); }
.mesa:has(+ .pidele), .mesa:has(+ form.pidele) { border-radius: 12px 12px 0 0; }

/* Panel y listas */
.rejilla > .tarjeta-cifra { padding: 14px 18px; }
.tarjeta-cifra .dato-grande { font-size: 30px; }
.rejilla > .tarjeta:hover { transform: none; box-shadow: none; border-color: var(--linea-fuerte); }
.tabla-expedientes td { padding-top: 11px; padding-bottom: 11px; }
.boton:not(.boton-secundario):not(.boton-peligro) { background: var(--mesa); border-color: var(--mesa); color: #f1e3c4; }

/* Portada Protocolo */
.protocolo { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.protocolo-oscuro { background: var(--mesa); color: #ece6d8; padding: 32px 48px 28px; display: flex; flex-direction: column; justify-content: space-between; }
.protocolo-oscuro .portada-marca { align-self: flex-start; }
.protocolo-texto { margin: auto 0; padding: 40px 0; }
.protocolo-texto h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.06; color: #f3f1ec; margin: 0 0 20px; max-width: 17ch; }
.protocolo-texto h1 span { color: var(--oro); display: block; }
.protocolo-texto .portada-entrada { max-width: 46ch; font-size: 16.5px; }
.protocolo-puntos { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.protocolo-puntos li { font-size: 12.5px; color: #c7c2b6; border: 1px solid var(--mesa-borde); border-radius: 999px; padding: 6px 12px; }
.protocolo-claro { background: var(--papel); color: var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 48px 24px; position: relative; }
.acceso { width: 100%; max-width: 380px; }
.acceso h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 20px; }
.acceso .campo { margin-bottom: 14px; }
.acceso .campo label { display: block; font-size: 13px; font-weight: 500; color: var(--tinta-suave); margin-bottom: 5px; }
.acceso input[type=email], .acceso input[type=password] { width: 100%; box-sizing: border-box; background: var(--papel-blanco); }
.acceso .aviso { margin-bottom: 14px; }
.protocolo-pie { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--tinta-tenue); font-size: 12px; }
@media (max-width: 900px) {
  .protocolo { grid-template-columns: 1fr; }
  .protocolo-oscuro { padding: 22px 22px 20px; min-height: 0; }
  .protocolo-oscuro-corto .protocolo-texto { display: none; }
  .protocolo-texto { padding: 22px 0; }
  .protocolo-texto h1 { max-width: none; }
  .protocolo-claro { padding: 28px 22px 60px; }
  .banda { padding: 14px 16px 12px; }
  .linea-fases { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .paso-linea::before { display: none; }
}

/* ── El panel: qué toca hoy · 9-oct-2026 ───────────────────────────── */
.rejilla-cifras { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tarjeta-cifra .dato-grande { color: var(--tinta-tenue); }
.tarjeta-cifra.cifra-viva .dato-grande { color: var(--acento); }
.tarjeta-cifra.cifra-activa { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(201, 164, 92, .25); }
.tabla-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tabla-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabla-titulo h2 { margin: 0; }
.chip-filtro { background: var(--acento-claro); border-color: transparent; color: var(--acento-oscuro); text-decoration: none; }
.chip-filtro span { color: var(--tinta-tenue); margin-left: 4px; }
.chip-filtro:hover { text-decoration: none; border-color: var(--oro); }
.buscador input[type=search] { width: 260px; max-width: 100%; padding: 7px 12px; font-size: 13.5px; }
.persona { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.persona .inicial { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-oscuro); font-size: 11px; font-weight: 500; }
.col-fecha { white-space: nowrap; color: var(--tinta-suave); }
tr.fila-abre { cursor: pointer; }
.terminadas { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 10px; }
.terminadas > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--tinta-suave); }
.terminadas > summary::-webkit-details-marker { display: none; }
.terminadas > summary > span:first-child::before { content: "▸ "; color: var(--tinta-tenue); }
.terminadas[open] > summary > span:first-child::before { content: "▾ "; }
.terminadas-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
@media (max-width: 820px) { .buscador input[type=search] { width: 100%; } .buscador { width: 100%; } }

/* Las cifras del panel, a la misma altura (Diego, 9-oct): la etiqueta
   reserva dos líneas aunque use una, y la cabecera de la tabla no parte
   en dos ni se va al bajar. */
.tarjeta-cifra { display: grid; grid-template-rows: 2.6em auto auto; align-content: start; }
.tarjeta-cifra .dato-etiqueta { align-self: end; line-height: 1.3; margin-bottom: 0; }
.tarjeta-cifra .dato-grande { line-height: 1.05; margin: 4px 0 2px; }
.tabla-expedientes th { white-space: nowrap; }
.tabla-expedientes th .filtro-col > summary { white-space: nowrap; }
.tabla-expedientes thead th { position: sticky; top: 0; background: var(--papel-blanco); z-index: 2; box-shadow: 0 1px 0 var(--linea); }
/* El desplazamiento de lado solo en el móvil: un contenedor con overflow
   anula la cabecera fija en escritorio. */
@media (max-width: 820px) {
  .form-filtros { overflow-x: auto; }
  .form-filtros .tabla-expedientes { min-width: 760px; }
}
.tabla-expedientes thead th { top: -1px; padding-top: 12px; padding-bottom: 12px; }

/* La cabecera de cualquier tabla queda fija al bajar (Diego, 9-oct):
   datos mínimos, usuarios, modelos… igual que el panel. */
.tarjeta table thead th { position: sticky; top: -1px; background: var(--papel-blanco); z-index: 2; box-shadow: 0 1px 0 var(--linea); padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }