/* ====== Visor de Curaduría ====== */
:root {
  /* Paleta por tipo de cambio (fondo suave / borde fuerte) */
  --c-quita-bg: #fde8e8;        --c-quita: #c0392b;
  --c-atenua-bg: #fdf0e0;       --c-atenua: #d35400;
  --c-estandariza-bg: #e3effc;  --c-estandariza: #2471a3;
  --c-agrega-bg: #e4f6e8;       --c-agrega: #1e8449;
  --c-sintetiza-bg: #f0e8fa;    --c-sintetiza: #7d3c98;
  --c-reorganiza-bg: #ededed;   --c-reorganiza: #5d6d7e;
  --gris-borde: #d8dce1;
  --fondo: #f5f6f8;
  --tinta: #1f2933;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
}

.btn {
  border: 1px solid var(--gris-borde);
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn:hover { background: #eef1f4; }

/* ====== Vista índice ====== */
#vista-indice { max-width: 880px; margin: 0 auto; padding: 32px 20px; }
.app-header h1 { margin: 0 0 4px; font-size: 1.7rem; }
.subtitulo { margin: 0 0 28px; color: #5d6d7e; }

.tarjeta-informe {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.15s;
}
.tarjeta-informe:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.tarjeta-informe h3 { margin: 0 0 6px; font-size: 1.1rem; }
.tarjeta-informe .meta { color: #5d6d7e; font-size: 0.85rem; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  background: #fff;
  white-space: nowrap;
}

/* ====== Vista visor ====== */
#vista-visor { display: flex; flex-direction: column; height: 100vh; }

.visor-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--gris-borde);
  flex-wrap: wrap;
}
.visor-toolbar h2 { flex: 1; margin: 0; font-size: 1.05rem; min-width: 200px; }
.toolbar-derecha { display: flex; align-items: center; gap: 14px; }
.toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--gris-borde);
}
.leyenda .chip { cursor: pointer; user-select: none; }
.leyenda .chip.apagado { opacity: 0.35; }

.visor-cuerpo { flex: 1; display: flex; min-height: 0; }

.panel-doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--gris-borde);
  background: #fff;
}
.panel-header {
  /* Header fijo de cada panel */
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5d6d7e;
  background: #fafbfc;
  border-bottom: 1px solid var(--gris-borde);
  flex-shrink: 0;
}
.doc-scroll { flex: 1; overflow-y: auto; padding: 24px 28px; }

/* ====== Marca de agua ======
 * Problema: la marca "CONFIDENCIAL" de los DOCX no se veía (header ignorado
 * por mammoth) o se veía MAL (imagen repetida incrustada entre párrafos).
 * Fix: capa absoluta detrás del contenido, fija al viewport del panel,
 * con patrón diagonal repetido. pointer-events:none + z-index 0 garantizan
 * que no interfiere con selección, edición ni highlights. */
.doc-area { position: relative; flex: 1; display: flex; min-height: 0; }
.doc-area .doc-scroll { position: relative; z-index: 1; background: transparent; }
.watermark-capa {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  overflow: hidden;
}
/* La imagen-watermark del DOCX ya viene gris claro: opacidad moderada */
.watermark-capa.wm-imagen { opacity: 0.35; background-size: 340px auto; }

/* ====== Editor del panel curado ====== */
.panel-header-curado { display: flex; align-items: center; gap: 10px; }
.panel-header-curado > span:first-child { flex-shrink: 0; }
.estado-guardado {
  flex: 1;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.8rem;
  color: #7f8c8d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.estado-guardado.guardando { color: #d35400; }
.btn-restaurar { font-size: 0.75rem; padding: 3px 8px; flex-shrink: 0; }

.barra-editor {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--gris-borde);
  flex-shrink: 0; /* fija: no scrollea con el documento */
  flex-wrap: wrap;
}
.btn-fmt {
  border: 1px solid transparent;
  background: none;
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--tinta);
  min-width: 30px;
}
.btn-fmt:hover { background: #eef1f4; border-color: var(--gris-borde); }
.sep-fmt { width: 1px; height: 18px; background: var(--gris-borde); margin: 0 4px; }

/* El área editable no debe mostrar el outline azul por defecto del browser:
 * ya hay borde de panel y el outline ensucia el layout lado a lado. */
#doc-curado:focus { outline: none; }

/* Tipografía legible para documentos largos */
.documento { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.65; }
.documento p { margin: 0 0 0.9em; }
.documento img { max-width: 100%; height: auto; }
.documento table { border-collapse: collapse; }
.documento td, .documento th { border: 1px solid var(--gris-borde); padding: 4px 8px; }

/* Highlights de anclas */
mark[data-cambio-id] {
  padding: 1px 0;
  border-radius: 2px;
  cursor: pointer;
  transition: outline 0.1s;
}
mark[data-cambio-id]:hover { filter: brightness(0.93); }
mark.activo { outline: 2px solid currentColor; outline-offset: 1px; }
mark.oculto { background: transparent !important; color: inherit; cursor: inherit; }

/* ====== Estado de revisión sobre los highlights ======
 * Problema: con decenas de highlights, el usuario no distinguía qué cambios
 * ya había revisado y repasaba los mismos una y otra vez.
 * Fix: aceptado baja a opacidad sutil (ya revisado, menos ruido visual);
 * rechazado toma subrayado rojo punteado (queda pendiente de corrección
 * humana y debe seguir llamando la atención). */
mark.estado-aceptado { opacity: 0.4; }
mark.estado-rechazado {
  border-bottom: 2px dotted #c0392b;
  padding-bottom: 0; /* compensa el borde para no desplazar la línea de texto */
}
/* Si el tipo está filtrado (oculto), el punteado rojo tampoco debe verse */
mark.oculto.estado-rechazado { border-bottom: none; }

mark[data-tipo="quita"]       { background: var(--c-quita-bg);       color: var(--c-quita); }
mark[data-tipo="atenua"]      { background: var(--c-atenua-bg);      color: var(--c-atenua); }
mark[data-tipo="estandariza"] { background: var(--c-estandariza-bg); color: var(--c-estandariza); }
mark[data-tipo="agrega"]      { background: var(--c-agrega-bg);      color: var(--c-agrega); }
mark[data-tipo="sintetiza"]   { background: var(--c-sintetiza-bg);   color: var(--c-sintetiza); }
mark[data-tipo="reorganiza"]  { background: var(--c-reorganiza-bg);  color: var(--c-reorganiza); }

/* ====== Panel lateral de cambios ====== */
.panel-cambios {
  width: 320px;
  display: flex;
  flex-direction: column;
  background: #fff;
  flex-shrink: 0;
  border-left: 1px solid var(--gris-borde);
}
.panel-cambios.colapsado { display: none; }
.lista-cambios { flex: 1; overflow-y: auto; }

/* ====== Revisión: progreso + filtros por estado ====== */
.revision-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--gris-borde);
  background: #fafbfc;
  flex-shrink: 0;
}
.progreso-revision { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.progreso-pista {
  flex: 1;
  height: 6px;
  background: #e3e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.progreso-barra {
  height: 100%;
  width: 0;
  background: #2471a3;
  border-radius: 999px;
  transition: width 0.25s;
}
.progreso-barra.completo { background: #1e8449; } /* todo revisado: verde */
.progreso-texto { font-size: 0.78rem; color: #5d6d7e; white-space: nowrap; }

.filtros-estado { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-filtro-estado {
  border: 1px solid var(--gris-borde);
  background: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: #5d6d7e;
}
.btn-filtro-estado:hover { background: #eef1f4; }
.btn-filtro-estado.activo {
  background: #2471a3;
  border-color: #2471a3;
  color: #fff;
}

/* Icono de estado en cada entrada de la lista */
.estado-icono { font-size: 0.85rem; width: 1em; text-align: center; flex-shrink: 0; }
.estado-icono.estado-pendiente { color: #aab4bd; }
.estado-icono.estado-aceptado { color: #1e8449; font-weight: 700; }
.estado-icono.estado-rechazado { color: #c0392b; font-weight: 700; }

/* Botones ✓/✗ por entrada: siempre visibles (en táctil no hay hover y en
 * revisión uno-por-uno esconderlos obliga a "cazarlos"), pero atenuados
 * para no competir con el contenido; toman color pleno al hover del item. */
.acciones-estado { margin-left: auto; display: flex; gap: 2px; flex-shrink: 0; }
.btn-estado {
  border: 1px solid transparent;
  background: none;
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #aab4bd;
  line-height: 1.4;
}
.item-cambio:hover .btn-estado { color: #5d6d7e; }
.btn-estado-aceptar:hover { color: #1e8449 !important; background: #e4f6e8; border-color: #1e8449; }
.btn-estado-rechazar:hover { color: #c0392b !important; background: #fde8e8; border-color: #c0392b; }
.btn-estado-aceptar.activo { color: #fff !important; background: #1e8449; border-color: #1e8449; }
.btn-estado-rechazar.activo { color: #fff !important; background: #c0392b; border-color: #c0392b; }

/* Chip de progreso en las tarjetas del índice */
.chip-revisados { border-color: #aab4bd; color: #5d6d7e; background: #f5f6f8; }
.chip-revisados.completo { border-color: #1e8449; color: #1e8449; background: #e4f6e8; }

.item-cambio {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid #eef1f4;
  padding: 10px 14px;
  cursor: pointer;
}
.item-cambio:hover { background: #f5f8fb; }
.item-cambio.activo { background: #eef4fb; }
.item-cambio .fila1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.item-cambio .num { color: #95a5a6; font-size: 0.8rem; }
.item-cambio .resumen { font-size: 0.85rem; color: #34495e; line-height: 1.4; }
.badge-sin-anclar {
  font-size: 0.7rem;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  padding: 1px 6px;
}

/* ====== Detalle expandido in-place en la lista ======
 * Problema: el detalle del cambio se mostraba en una tarjeta flotante
 * centrada abajo que TAPABA el texto del documento en revisión (justo el
 * texto del cambio quedaba detrás del popup). Fix: la tarjeta se eliminó y
 * el detalle (explicación completa + botones grandes) se expande dentro de
 * la propia entrada de la lista lateral, sin cubrir los documentos. */
.item-cambio.expandido {
  /* Realce con el borde del color del tipo (--color-tipo lo pone el JS por
   * entrada). box-shadow inset y no border: un border real cambiaría el
   * ancho del item y la lista "saltaría" al expandir/colapsar. */
  box-shadow: inset 0 0 0 2px var(--color-tipo, var(--gris-borde));
  background: #fff;
  cursor: default; /* el cuerpo expandido es texto seleccionable, no botón */
}
.item-cambio.expandido .fila1 { cursor: pointer; } /* el encabezado colapsa */
.detalle-cambio .explicacion-completa {
  font-size: 0.88rem;
  color: #34495e;
  line-height: 1.5;
}
.detalle-cambio .detalle-extra {
  font-size: 0.82rem;
  color: #5d6d7e;
  margin-top: 8px;
  line-height: 1.5;
}

/* Botones grandes de revisión dentro del detalle expandido: el del estado
 * vigente queda "encendido" (relleno) para que se vea la decisión tomada. */
.acciones-revision {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef1f4;
  flex-wrap: wrap;
}
.btn-revision { font-size: 0.85rem; }
.btn-revision-aceptar { color: #1e8449; border-color: #1e8449; }
.btn-revision-aceptar:hover { background: #e4f6e8; }
.btn-revision-aceptar.activo { background: #1e8449; color: #fff; }
.btn-revision-rechazar { color: #c0392b; border-color: #c0392b; }
.btn-revision-rechazar:hover { background: #fde8e8; }
.btn-revision-rechazar.activo { background: #c0392b; color: #fff; }
.estado-revision-txt { font-size: 0.8rem; color: #7f8c8d; margin-left: auto; }

/* ====== Responsive ====== */
@media (max-width: 900px) {
  .visor-cuerpo { flex-direction: column; }
  .panel-doc { border-right: none; border-bottom: 1px solid var(--gris-borde); }
  .panel-cambios {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: min(320px, 85vw);
    box-shadow: -4px 0 18px rgba(0,0,0,0.2);
    z-index: 40;
  }
}