/* AIM OFFICE · AIM Comparar. Colores de los cambios: verde (insertado), rojo tachado (borrado),
   azul (movido) y morado (formato), siempre con las variables del estilo elegido. */
.ap[data-app="comparar"] {
  --cc-ins-f: var(--ok-fondo); --cc-ins: var(--ok-tinta);
  --cc-del-f: var(--error-fondo); --cc-del: var(--error-tinta);
  --cc-mov-f: color-mix(in srgb, var(--texto) 16%, var(--blanco)); --cc-mov: color-mix(in srgb, var(--texto) 72%, var(--tinta));
  --cc-fmt-f: color-mix(in srgb, var(--correo) 16%, var(--blanco)); --cc-fmt: color-mix(in srgb, var(--correo) 72%, var(--tinta));
  --cc-sus: color-mix(in srgb, var(--aviso-tinta) 80%, var(--tinta));
}
.ap-dialogo { --cc-ins-f: var(--ok-fondo); --cc-ins: var(--ok-tinta); --cc-del-f: var(--error-fondo); --cc-del: var(--error-tinta); --cc-mov-f: color-mix(in srgb, var(--texto) 16%, var(--blanco)); --cc-mov: color-mix(in srgb, var(--texto) 72%, var(--tinta)); --cc-fmt-f: color-mix(in srgb, var(--correo) 16%, var(--blanco)); --cc-fmt: color-mix(in srgb, var(--correo) 72%, var(--tinta)); }
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Marcas de cambio (también en la ayuda) */
.cc-ins { background: var(--cc-ins-f); color: var(--cc-ins); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; border-radius: 2px; }
.cc-del { background: var(--cc-del-f); color: var(--cc-del); text-decoration: line-through; border-radius: 2px; }
.cc-mov { background: var(--cc-mov-f); color: var(--cc-mov); text-decoration: underline double; text-underline-offset: 2px; border-radius: 2px; }
.cc-movde { background: var(--cc-mov-f); color: var(--cc-mov); text-decoration: line-through; border-radius: 2px; }
.cc-fmt { background: var(--cc-fmt-f); color: var(--cc-fmt); border-bottom: 2px dotted var(--cc-fmt); border-radius: 2px; }
ins.cc-ins, del.cc-del, del.cc-movde { font-style: inherit; }
.cc-n { font-weight: 700; }
.cc-k { font-style: italic; }
.cc-u { text-decoration-line: underline; }
.cc-del.cc-u, .cc-movde.cc-u { text-decoration-line: line-through underline; }
.cc-leyenda { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Inicio */
.cc-intro h2 { font: 750 clamp(22px, 3.2vw, 30px)/1.15 var(--titulo); margin-bottom: 6px; }
.cc-intro p { color: var(--tinta-2); max-width: 62em; }
.cc-ranuras { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.cc-entre { display: grid; place-items: center; }
.cc-ranura { background: var(--blanco); border: 1.5px dashed var(--linea-2); border-radius: var(--radio, 14px); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; transition: border-color .12s, background .12s; }
.cc-ranura.cc-llena { border-style: solid; border-color: var(--linea); }
.cc-ranura.ap-soltando { border-color: var(--ap-acento); background: var(--ap-suave); outline: none; }
.cc-ranura.cc-leyendo { opacity: .6; pointer-events: none; }
.cc-ranura header { display: flex; align-items: center; gap: 10px; }
.cc-ranura h3 { font: 700 16.5px/1.2 var(--titulo); }
.cc-ranura-letra { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--ap-suave); color: color-mix(in srgb, var(--ap-acento) 80%, var(--tinta)); font: 800 13px/1 var(--cuerpo); }
.cc-ranura-vacia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; color: var(--tinta-2); }
.cc-ranura-vacia svg { width: 30px; height: 30px; color: var(--tinta-3); }
.cc-ranura-vacia p { font-weight: 600; }
.cc-ranura-vacia small { color: var(--tinta-3); font-size: 13.5px; }
.cc-ranura-doc { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.cc-ranura-doc svg { width: 34px; height: 34px; color: var(--ap-acento); }
.cc-ranura-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cc-ranura-info b { overflow-wrap: anywhere; }
.cc-ranura-info small { color: var(--tinta-3); font-size: 13.5px; }
.cc-ranura .ap-botones { gap: 8px; }
.cc-mas-opciones summary { cursor: pointer; font-weight: 650; min-height: 28px; }
.cc-mas-opciones[open] summary { margin-bottom: 12px; }
.cc-opciones { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cc-opciones { grid-template-columns: 1fr 1fr; } }
.cc-opciones fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.cc-opciones legend { font: 650 12.5px/1.3 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.cc-acciones-inicio .cc-comparar { min-width: 160px; }
.cc-nota { margin-top: -6px; }
.cc-recientes { display: flex; flex-direction: column; gap: 10px; }
.cc-recientes h2 { font: 700 18px/1.2 var(--titulo); }
.cc-rec-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-rec { display: flex; align-items: center; gap: 6px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 4px 6px 4px 4px; }
.cc-rec-abrir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 0; background: none; border-radius: 9px; text-align: left; cursor: pointer; }
.cc-rec-abrir:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.cc-rec-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-rec-flecha { color: var(--tinta-3); }
.cc-rec-datos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cc-rec-datos small { color: var(--tinta-3); }
.cc-pegar { min-height: 240px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 14px !important; }
@media (max-width: 699px) {
  .cc-ranuras { grid-template-columns: 1fr; }
  .cc-entre { justify-items: center; }
  .cc-intercambiar svg { transform: rotate(90deg); }
  .cc-ranura { min-height: 0; }
  .cc-ranura-vacia { padding: 8px 0; }
}

/* Esperando */
.cc-esperando { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 12px; background: color-mix(in srgb, var(--papel) 70%, transparent); font-weight: 650; color: var(--tinta); }
.cc-girar { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--linea-2); border-top-color: var(--ap-acento); animation: cc-girar .8s linear infinite; }
@keyframes cc-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cc-girar { animation: none; } }

/* Comparación */
.cc-en-comparacion .ap-cuerpo { overflow: hidden; display: flex; flex-direction: column; }
.cc-comp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cc-herr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cc-segmentos { display: inline-flex; border: 1px solid var(--linea-2); border-radius: 10px; padding: 2px; gap: 2px; background: var(--papel); }
.cc-seg { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-weight: 600; color: var(--tinta-2); }
.cc-seg svg { width: 18px; height: 18px; }
.cc-seg[aria-pressed="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px color-mix(in srgb, var(--tinta) 18%, transparent); }
.cc-sync { font-size: 14.5px; align-items: center; }
.cc-sync input { margin-top: 0; }
.cc-nav { display: inline-flex; align-items: center; gap: 4px; }
.cc-contador { min-width: 86px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14.5px; color: var(--tinta-2); }
.cc-btn-panel { display: none; }
.cc-num { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 8%, transparent); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-principal { flex: 1; min-height: 0; display: flex; }
.cc-area { flex: 1; min-width: 0; min-height: 0; display: flex; position: relative; }
.cc-docs { flex: 1; min-width: 0; min-height: 0; display: flex; gap: 0; }
.cc-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--linea); }
.cc-col:last-child { border-right: 0; }
.cc-col-cab { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--papel); border-bottom: 1px solid var(--linea); font-size: 14px; min-width: 0; }
.cc-col-nombre { color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cc-scroll { flex: 1; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); padding: 18px 16px 40vh; scroll-behavior: auto; }
.cc-scroll:focus-visible { outline: 3px solid var(--ap-acento); outline-offset: -3px; }
.cc-hoja { position: relative; max-width: 860px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 1px 3px color-mix(in srgb, var(--tinta) 8%, transparent); padding: 40px 48px 56px; font: 15.5px/1.62 var(--cuerpo); color: var(--tinta); overflow-wrap: anywhere; }
[data-vista="lado"] .cc-hoja { padding: 30px 32px 44px; }
.cc-b { position: relative; margin: 0 0 .75em; white-space: pre-wrap; }
.cc-h1 { font: 750 1.55em/1.25 var(--titulo); margin: .3em 0 .55em; }
.cc-h2 { font: 700 1.25em/1.3 var(--titulo); margin: 1em 0 .45em; }
.cc-h3, .cc-h4 { font: 700 1.07em/1.35 var(--titulo); margin: .9em 0 .4em; }
.cc-li { padding-left: 1.4em; }
.cc-lejos { content-visibility: auto; contain-intrinsic-size: auto 3em; }
/* Párrafos enteros: una barra a la izquierda con el color del cambio */
.cc-b.cc-r-del::before, .cc-b.cc-r-ins::before, .cc-b.cc-r-mov::before, .cc-b.cc-r-movde::before, .cc-b.cc-r-mod::before { content: ""; position: absolute; left: -14px; top: .25em; bottom: .25em; width: 3px; border-radius: 2px; background: var(--cc-barra); }
.cc-r-del { --cc-barra: var(--cc-del); }
.cc-r-ins { --cc-barra: var(--cc-ins); }
.cc-r-mov, .cc-r-movde { --cc-barra: var(--cc-mov); }
.cc-r-mod { --cc-barra: var(--cc-sus); }
.cc-estilo { display: inline-block; margin-right: 8px; padding: 0 6px; font: 650 11.5px/1.7 var(--cuerpo); letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px; border-bottom: 0; }
.cc-tabla { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: .92em; }
.cc-tabla td, .cc-tabla th { border: 1px solid var(--linea); padding: 4px 8px; vertical-align: top; white-space: pre-wrap; }
.cc-num-fila { width: 1%; color: var(--tinta-3); font-weight: 600; background: var(--papel); text-align: right; font-variant-numeric: tabular-nums; }
.cc-tabla tr.cc-r-del td { background: color-mix(in srgb, var(--cc-del-f) 55%, transparent); }
.cc-tabla tr.cc-r-ins td { background: color-mix(in srgb, var(--cc-ins-f) 55%, transparent); }
.cc-tabla tr.cc-r-mov td, .cc-tabla tr.cc-r-movde td { background: color-mix(in srgb, var(--cc-mov-f) 55%, transparent); }
.cc-iguales { border-radius: 10px; border: 1px solid var(--ok-borde); margin-bottom: 18px; }

/* Cambio actual, filtros */
.cc-docs .cc-actual { outline: 2px solid var(--ap-acento); outline-offset: 1px; }
.cc-b.cc-actual { outline-offset: 4px; border-radius: 3px; }
.cc-filtrando .cc-docs .cc-tenue { background: none; color: inherit; text-decoration: none; border-bottom: 0; opacity: .75; }
.cc-filtrando .cc-docs del.cc-tenue { text-decoration: line-through; }
.cc-filtrando .cc-docs .cc-b.cc-tenue::before { display: none; }
.cc-docs .cc-destacado { outline: 2px dashed var(--cc-sus); outline-offset: 1px; }
.cc-docs .cc-destacado.cc-actual { outline: 2px solid var(--ap-acento); }

/* Mapa de cambios */
.cc-mapa { position: relative; width: 14px; flex: 0 0 auto; background: var(--papel); border-left: 1px solid var(--linea); cursor: pointer; margin-top: 37px; }
.cc-marca { position: absolute; left: 2px; right: 2px; height: 3px; border-radius: 2px; margin-top: -1px; background: var(--cc-sus); }
.cc-marca.cc-t-insertado { background: var(--cc-ins); }
.cc-marca.cc-t-borrado { background: var(--cc-del); }
.cc-marca.cc-t-movido { background: var(--cc-mov); }
.cc-marca.cc-t-formato { background: var(--cc-fmt); }
.cc-mapa-vista { position: absolute; left: 0; right: 0; border: 1.5px solid color-mix(in srgb, var(--tinta) 40%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--tinta) 6%, transparent); pointer-events: none; }

/* Panel de cambios */
.cc-panel { width: 340px; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; background: var(--blanco); border-left: 1px solid var(--linea); }
.cc-panel-cab { display: flex; align-items: center; gap: 8px; }
.cc-panel-cab h2 { font: 700 17px/1.2 var(--titulo); }
.cc-cerrar-panel { display: none; }
.cc-resumen { font-size: 13px; margin-top: -4px; }
.cc-filtros { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 9px; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--blanco); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.cc-filtro[aria-pressed="true"] { background: var(--ap-suave); border-color: color-mix(in srgb, var(--ap-acento) 45%, transparent); color: var(--tinta); }
.cc-filtro .cc-num { height: 18px; min-width: 18px; font-size: 12px; }
.cc-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--cc-sus); }
.cc-t-insertado .cc-punto { background: var(--cc-ins); }
.cc-t-borrado .cc-punto { background: var(--cc-del); }
.cc-t-movido .cc-punto { background: var(--cc-mov); }
.cc-t-formato .cc-punto { background: var(--cc-fmt); }
.cc-solo-cifras { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--aviso-fondo) 70%, var(--blanco)); border: 1px solid var(--aviso-borde); }
.cc-solo-cifras span { display: flex; flex-direction: column; }
.cc-solo-cifras small { color: var(--tinta-2); font-size: 12.5px; }
.cc-lista { list-style: none; margin: 0 -4px; padding: 2px 4px; flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border-radius: 10px; }
.cc-lista:focus-visible { outline: 3px solid var(--ap-acento); outline-offset: 0; }
.cc-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linea); cursor: pointer; font-size: 14px; line-height: 1.4; content-visibility: auto; contain-intrinsic-size: auto 72px; }
.cc-item:hover { border-color: var(--linea-2); background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.cc-item[aria-selected="true"] { border-color: var(--ap-acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ap-acento) 30%, transparent); background: var(--ap-suave); }
.cc-item-cab { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cc-item-cab b { font-size: 13.5px; white-space: nowrap; }
.cc-item-cab small { color: var(--tinta-3); font-size: 12.5px; white-space: nowrap; }
.cc-donde { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-item-texto { overflow-wrap: anywhere; color: var(--tinta-2); }
.cc-item-texto small { color: var(--tinta-3); }
.cc-flecha { color: var(--tinta-3); }
.cc-chip-cifra { padding: 0 6px; border-radius: 999px; font: 700 11px/1.6 var(--cuerpo); background: var(--aviso-fondo); color: var(--aviso-tinta); border: 1px solid var(--aviso-borde); }
.cc-item-vacio { padding: 18px 8px; text-align: center; color: var(--tinta-3); font-size: 14px; }
.cc-lex { display: flex; align-items: flex-start; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--tinta-2); }
.cc-lex svg { width: 17px; height: 17px; color: var(--tinta-3); margin-top: 1px; }
.cc-lex a { color: var(--enlace); font-weight: 600; white-space: nowrap; }

/* Versiones */
.cc-ver-orden { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-ver-orden li { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; border: 1px solid var(--linea); border-radius: 10px; min-width: 0; }
.cc-ver-n { font-weight: 800; color: color-mix(in srgb, var(--ap-acento) 80%, var(--tinta)); min-width: 28px; }
.cc-ver-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.cc-ver-tabla th[scope="row"] { min-width: 170px; }
.cc-ver-total th, .cc-ver-total td { background: color-mix(in srgb, var(--ap-acento) 6%, var(--blanco)); }

/* Escritorio estrecho y móvil */
@media (max-width: 1180px) { .cc-panel { width: 300px; } [data-vista="lado"] .cc-hoja { padding: 22px 20px 36px; } .cc-scroll { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 899px) {
  .cc-btn-panel { display: inline-flex; }
  .cc-cerrar-panel { display: inline-flex; }
  .cc-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; width: auto; max-height: 72dvh; border-left: 0; border-top: 1px solid var(--linea); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 40px color-mix(in srgb, var(--tinta) 25%, transparent); transform: translateY(105%); visibility: hidden; transition: transform .2s, visibility .2s; }
  .cc-panel.cc-abierto { transform: none; visibility: visible; }
  .cc-docs { flex-direction: column; }
  .cc-col { border-right: 0; border-bottom: 1px solid var(--linea); }
  .cc-hoja, [data-vista="lado"] .cc-hoja { padding: 18px 16px 28px; font-size: 15px; }
  .cc-scroll { padding: 10px 8px 30vh; }
  .cc-herr { padding: 6px 8px; gap: 6px; }
  .cc-seg span { display: none; }
  .cc-seg { padding: 4px 10px; }
  .cc-sync span { font-size: 13.5px; }
  .cc-contador { min-width: 64px; font-size: 13.5px; }
  .cc-mapa { width: 10px; }
  .cc-b::before { left: -9px !important; }
}
@media print { .cc-herr, .cc-panel, .cc-mapa { display: none !important; } .cc-scroll { overflow: visible; padding: 0; background: none; } .cc-hoja { border: 0; box-shadow: none; } }

/* Comparación visual */
.cc-vis-resumen { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-vis-lista { display: flex; flex-direction: column; gap: 16px; }
.cc-vis header h3 { font: 700 16px/1.2 var(--titulo); margin: 0; }
.cc-vis-cambia { border-color: var(--error-borde); }
.cc-vis-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
@media (max-width: 699px) { .cc-vis-dos { grid-template-columns: 1fr; } }
.cc-vis-pag { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-vis-pag figcaption { font-size: 13.5px; font-weight: 650; color: var(--tinta-2); }
.cc-vis-img { position: relative; border: 1px solid var(--linea-2); border-radius: 4px; overflow: hidden; }
.cc-vis-img img { display: block; width: 100%; height: auto; }
.cc-vis-zona { position: absolute; border: 2px solid; border-radius: 3px; background: color-mix(in srgb, var(--error-fondo) 30%, transparent); pointer-events: none; }
.cc-vis-hueco { display: grid; place-items: center; min-height: 220px; border: 1.5px dashed var(--linea-2); border-radius: 6px; color: var(--tinta-3); text-align: center; padding: 16px; }
.cc-papyr { font-size: 14px; color: var(--tinta-2); }
.cc-papyr a { color: var(--enlace); font-weight: 600; }
.cc-docs del + ins { margin-left: 2px; }
.cc-col-cab b { white-space: nowrap; }
@media (max-width: 599px) {
  .ap[data-app="comparar"] .ap-barra-acciones .ap-boton { width: 40px; padding: 0; }
  .ap[data-app="comparar"] .ap-barra-acciones .ap-boton span,
  .cc-herr > .ap-boton span, .cc-btn-panel span:not(.cc-num) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cc-herr > .ap-boton { width: 40px; padding: 0; }
  .cc-herr .ap-espacio { display: none; }
  .cc-btn-panel { padding: 0 10px; gap: 6px; }
  .cc-col-cab { padding: 6px 10px; }
}
@media (max-width: 899px) { .cc-col + .cc-col .cc-col-cab { border-top: 2px solid var(--linea-2); } }