/* AIM OFFICE · AIM Anonimizar. Portada, barra de trabajo, lista de documentos, documento lado a lado
   (texto, tablas y páginas) y panel de cambios. Solo variables del estilo elegido; el negro de los
   tachados de las páginas es el contenido del propio documento, no un color de la interfaz. */
.ap[data-app="anonimizar"] { --an-marca: color-mix(in srgb, var(--ap-acento) 20%, var(--blanco)); --an-marca-borde: color-mix(in srgb, var(--ap-acento) 70%, var(--tinta)); --an-tachon: var(--tinta); }
.an-cuerpo { display: flex; flex-direction: column; }
.an-cargando { margin: auto; padding: 32px 16px; color: var(--tinta-3); text-align: center; }

/* ── Portada ─────────────────────────────────────────────────────────── */
.an-portada { max-width: 920px; }
.an-heroe { display: flex; flex-direction: column; gap: 10px; }
.an-heroe h2 { font: 780 clamp(26px, 4vw, 38px)/1.08 var(--titulo); letter-spacing: -.01em; }
.an-heroe p { color: var(--tinta-2); font-size: 16.5px; max-width: 70ch; }
.an-privado { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--ok-fondo); color: var(--ok-tinta) !important; border: 1px solid var(--ok-borde); font-size: 14.5px !important; font-weight: 600; }
.an-privado svg { width: 18px; height: 18px; }
.an-soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 210px; padding: 28px 16px; border: 2px dashed var(--linea-2); border-radius: 18px; background: var(--blanco); color: var(--tinta-2); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.an-soltar:hover, .ap-soltando .an-soltar { border-color: var(--ap-acento); background: var(--ap-suave); }
.an-soltar b { font: 700 18px/1.3 var(--titulo); color: var(--tinta); }
.an-soltar-icono { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--ap-suave); color: var(--ap-acento); }
.an-soltar-icono svg { width: 34px; height: 34px; }
.an-portada-botones { justify-content: center; }
.an-ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.an-ventajas li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio, 14px); background: var(--blanco); }
.an-ventajas li > span:last-child { color: var(--tinta-2); font-size: 14px; }
.an-ventaja-icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ap-suave); color: var(--ap-acento); margin-bottom: 4px; }
.an-perfil-actual { text-align: center; color: var(--tinta-3); font-size: 14.5px; }
.an-pie { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.an-pie p { display: flex; gap: 6px; align-items: flex-start; color: var(--tinta-3); font-size: 13.5px; line-height: 1.45; }
.an-pie p svg { width: 16px; height: 16px; margin-top: 2px; }
.an-pie a { color: var(--enlace); font-weight: 600; }
.an-enlace-eco { padding-left: 22px; }

/* ── Trabajo ─────────────────────────────────────────────────────────── */
.an-trabajo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.an-barra { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.an-barra-fila { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.an-titulo-doc { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 220px; }
.an-titulo-doc b { font: 700 16px/1.3 var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-titulo-doc svg { color: var(--tinta-3); }
.an-selector-doc { max-width: 420px; min-height: 38px; font-weight: 650; }
.an-segmentado { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 6%, var(--blanco)); border: 1px solid var(--linea); }
.an-seg-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 0; border-radius: 9px; background: none; color: var(--tinta-2); font: 600 14px/1.2 var(--cuerpo) !important; cursor: pointer; white-space: nowrap; }
.an-seg-boton svg { width: 17px; height: 17px; }
.an-seg-boton:hover { color: var(--tinta); }
.an-seg-boton[aria-checked="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px color-mix(in srgb, var(--tinta) 18%, transparent); }
.an-modos .an-seg-boton[aria-checked="true"] { background: var(--ap-acento); color: var(--ap-sobre) !important; }
.an-buscar-caja { display: flex; gap: 6px; flex: 1 1 220px; max-width: 380px; }
.an-buscar { min-height: 38px; }
.an-zona-boton[aria-pressed="true"] { background: var(--ap-suave); border-color: var(--ap-acento); }
.an-pestanas-movil { display: none; background: var(--blanco); padding: 0 8px; }

.an-areas { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 350px; }
.an-lote { min-height: 0; overflow-y: auto; border-right: 1px solid var(--linea); padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.an-lote-cabeza { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.an-lote-cabeza h2 { font: 700 15px/1.2 var(--titulo); }
.an-lote-item { display: flex; align-items: center; gap: 2px; }
.an-lote-item .ap-lista-item { flex: 1; min-width: 0; align-items: flex-start; }
.an-lote-item .ap-lista-item > svg { margin-top: 2px; }
.an-lote-item .ap-chip { align-self: flex-start; margin-top: 3px; font-size: 11.5px; }
.an-lote-nombre { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.an-lote-nombre > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-lote-nombre small { color: var(--tinta-3); font-size: 12.5px; font-weight: 500; }
.an-lote-quitar { width: 32px; min-height: 32px; opacity: .6; }
.an-lote-quitar:hover, .an-lote-quitar:focus-visible { opacity: 1; }
.an-lote-pie { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.an-lote-ayuda { color: var(--tinta-3); font-size: 13px; padding: 0 4px; }
.an-lote-ayuda a { color: var(--enlace); font-weight: 600; }

.an-doc { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); }
.an-lados { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.an-lados-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.an-lado { min-height: 0; overflow: auto; padding: 0 14px 28px; }
.an-lados-2 .an-lado + .an-lado { border-left: 1px solid var(--linea); }
.an-lado-titulo { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; margin: 0 -14px 10px; padding: 9px 14px; background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); color: var(--tinta-3); font: 650 12.5px/1.2 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--linea); }
.an-lado-titulo svg { width: 16px; height: 16px; }
.an-hoja { max-width: 760px; margin: 0 auto; padding: 28px 30px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 2px 14px color-mix(in srgb, var(--tinta) 7%, transparent); }
.an-seg { margin: 0 0 .7em; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 15px; }
.an-parte { margin: 18px 0 8px; padding-top: 10px; border-top: 1px dashed var(--linea-2); color: var(--tinta-3); font: 650 12px/1.2 var(--cuerpo); letter-spacing: .05em; text-transform: uppercase; }
.an-vacio-doc { color: var(--tinta-3); }
.an-m { background: var(--an-marca); color: var(--tinta); border-bottom: 2px solid var(--an-marca-borde); border-radius: 3px; padding: 0 1px; cursor: pointer; }
.an-m.an-no { background: none; border-bottom: 2px dashed var(--tinta-3); }
.an-m.an-c-baja.an-no { border-bottom-color: var(--aviso-borde); }
.an-m:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ap-acento) 35%, transparent); }
.an-r { background: var(--ap-suave); color: var(--tinta); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.an-r-tachar { background: var(--an-tachon); color: var(--an-tachon); letter-spacing: -.05em; }
.an-destello { animation: an-destello 1.2s ease-out; }
@keyframes an-destello { 0%, 40% { box-shadow: 0 0 0 4px var(--ap-acento); } 100% { box-shadow: 0 0 0 0 transparent; } }
.an-flotante svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.an-flotante { position: fixed; z-index: 55; box-shadow: 0 10px 28px color-mix(in srgb, var(--tinta) 30%, transparent); }

.an-tablas { display: flex; flex-direction: column; gap: 10px; }
.an-hoja-nombre { font: 700 15px/1.2 var(--titulo); margin-top: 6px; }
.an-tabla { font-size: 14px; }
.an-tabla th { vertical-align: top; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--tinta-2); min-width: 170px; }
.an-tabla td { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 90px; }
.an-tabla .an-num-fila { min-width: 0; width: 1%; color: var(--tinta-3); font-size: 12px; text-align: right; }
.an-col-titulo { font-weight: 700; margin-bottom: 6px; color: var(--tinta); }
.an-col-sel { width: 100%; min-height: 32px !important; padding: 3px 6px !important; font-size: 13px !important; }
.an-col-activa { border-color: var(--ap-acento) !important; background: var(--ap-suave) !important; }
.an-nota { color: var(--tinta-3); font-size: 13.5px; }
.an-alerta { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--error-fondo); color: var(--error-tinta); border: 1px solid var(--error-borde); font-size: 14px; font-weight: 600; }
.an-alerta .ap-boton { min-height: 34px; padding: 5px 10px; font-size: 13.5px !important; }
.an-nota-aviso { padding: 8px 10px; border-radius: 10px; background: var(--aviso-fondo); color: var(--aviso-tinta); border: 1px solid var(--aviso-borde); }

.an-paginas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.an-pagina { position: relative; width: min(100%, 820px); background: var(--blanco); box-shadow: 0 3px 16px color-mix(in srgb, var(--tinta) 16%, transparent); }
.an-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.an-capa { position: absolute; inset: 0; }
.an-capa.an-dibujando { cursor: crosshair; touch-action: none; }
.an-caja { position: absolute; padding: 0; border: 2px solid var(--an-marca-borde); background: color-mix(in srgb, var(--ap-acento) 22%, transparent); border-radius: 2px; cursor: pointer; }
.an-caja.an-no { border-style: dashed; border-color: var(--tinta-3); background: none; }
.an-caja-zona.an-si { background: color-mix(in srgb, var(--tinta) 55%, transparent); }
.an-dibujando .an-caja { pointer-events: none; }
.an-caja-nueva { position: absolute; border: 2px dashed var(--ap-acento); background: color-mix(in srgb, var(--ap-acento) 18%, transparent); }
.an-pagina-num { position: absolute; right: 8px; bottom: -22px; color: var(--tinta-3); font-size: 12px; }
.an-pagina-num:empty { display: none; }

/* ── Panel de cambios ────────────────────────────────────────────────── */
.an-panel { min-height: 0; overflow-y: auto; border-left: 1px solid var(--linea); background: var(--blanco); padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 12px; }
.an-panel-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.an-panel-cabeza h2 { font: 750 18px/1.2 var(--titulo); }
.an-panel-cuenta { color: var(--tinta-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.an-panel-todo { display: flex; gap: 8px; flex-wrap: wrap; }
.an-panel-todo .ap-boton { min-height: 36px; padding: 6px 12px; font-size: 14px !important; }
.an-grupos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-grupo { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.an-grupo-cabeza { display: flex; align-items: center; gap: 4px; padding-left: 12px; }
.an-grupo-cabeza input, .an-item input { width: 18px; height: 18px; accent-color: var(--ap-acento); flex: 0 0 auto; }
.an-grupo-boton { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 6px; border: 0; background: none; cursor: pointer; text-align: left; }
.an-grupo-nombre { flex: 1; font-weight: 650; }
.an-grupo-cuenta { padding: 1px 8px; border-radius: 999px; background: var(--ap-suave); font: 650 12.5px/1.6 var(--cuerpo); font-variant-numeric: tabular-nums; }
.an-grupo-flecha { width: 16px !important; height: 16px !important; color: var(--tinta-3); transition: transform .15s; }
.an-abierto .an-grupo-flecha { transform: rotate(180deg); }
.an-items { list-style: none; margin: 0; padding: 4px 6px 8px; display: flex; flex-direction: column; border-top: 1px solid var(--linea); max-height: 420px; overflow-y: auto; }
.an-item { display: flex; align-items: flex-start; gap: 6px; padding: 6px 4px 6px 6px; border-radius: 8px; }
.an-item:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.an-item input { margin-top: 3px; }
.an-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.an-item-original { font-weight: 600; overflow-wrap: anywhere; }
.an-item-no .an-item-original { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tinta-3) 60%, transparent); }
.an-item-sust { display: flex; align-items: center; gap: 4px; color: var(--tinta-2); font-size: 13.5px; overflow-wrap: anywhere; }
.an-item-sust svg { width: 13px !important; height: 13px !important; }
.an-item-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--tinta-3); font-size: 12.5px; }
.an-conf { padding: 0 7px; border-radius: 999px; font-weight: 650; font-size: 11.5px; line-height: 1.7; }
.an-conf-alta { background: var(--ok-fondo); color: var(--ok-tinta); }
.an-conf-media { background: var(--ap-suave); color: var(--tinta-2); }
.an-conf-baja { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.an-item-quitar { width: 30px; min-height: 30px; }
.an-ver-mas { padding: 6px; font-size: 14px; }
.an-vaciar { font-size: 14.5px; }
.an-avisos { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); border: 1px solid var(--linea); }
.an-avisos h3 { font: 700 14px/1.3 var(--titulo); margin-bottom: 4px; }
.an-avisos ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--tinta-2); font-size: 13.5px; }

/* ── Diálogos ────────────────────────────────────────────────────────── */
.an-tipos-campo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.an-tipos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.an-casilla-tipo { font-size: 14.5px; }
.an-cita { padding: 8px 12px; border-left: 3px solid var(--ap-acento); background: var(--ap-suave); border-radius: 0 8px 8px 0; font-weight: 600; overflow-wrap: anywhere; }
.an-fuerte { color: var(--tinta) !important; font-weight: 600; }
.an-perfiles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-perfil { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 12px; }
.an-perfil-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.an-perfil-texto small { color: var(--tinta-3); font-size: 13px; }
.ap-dialogo kbd { font: 600 13px/1.4 var(--cuerpo); padding: 1px 6px; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--papel); white-space: nowrap; }

/* ── Progreso ────────────────────────────────────────────────────────── */
.an-progreso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 58; width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 14px 40px color-mix(in srgb, var(--tinta) 25%, transparent); font-size: 14.5px; }
.an-progreso .ap-progreso > span { background: var(--ap-color, var(--tinta)); }
.an-indeterminado .ap-progreso > span { width: 35% !important; animation: an-ir 1.1s ease-in-out infinite; }
@keyframes an-ir { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ── Pantallas medianas y móvil ──────────────────────────────────────── */
@media (max-width: 1279px) {
  .an-areas { grid-template-columns: minmax(0, 1fr) 330px; }
  .an-lote { display: none; }
}
@media (max-width: 1099px) {
  .an-lados-2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .an-lados-2 .an-lado + .an-lado { border-left: 0; border-top: 2px solid var(--linea-2); }
}
@media (max-width: 899px) {
  .an-areas { grid-template-columns: minmax(0, 1fr); }
  .an-pestanas-movil { display: flex; }
  .ap[data-an-panel="doc"] .an-panel { display: none; }
  .ap[data-an-panel="cambios"] .an-doc { display: none; }
  .an-panel { border-left: 0; }
  .an-barra { padding: 8px 10px; }
  .an-seg-boton { padding: 5px 9px; font-size: 13.5px !important; }
  .an-hoja { padding: 18px 16px; }
  .an-lado { padding: 0 8px 24px; }
  .an-lado-titulo { margin: 0 -8px 8px; padding: 8px; }
  .an-buscar-caja { max-width: none; }
  .an-solo-ancho { display: none; }
}
@media (max-width: 560px) {
  .an-modos { width: 100%; }
  .an-modos .an-seg-boton { flex: 1; justify-content: center; padding: 5px 4px; }
  .an-modos .an-seg-boton svg { display: none; }
  .an-vistas .an-seg-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .an-vistas .an-seg-boton { padding: 5px 10px; }
  .an-zona-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ap[data-app="anonimizar"] .ap-barra-acciones .ap-boton:not(.ap-principal):not(.ap-solo-icono) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ap[data-app="anonimizar"] .ap-barra-acciones .ap-boton:not(.ap-principal):not(.ap-solo-icono) { width: 40px; padding: 0; }
}