/*
 * docuprivado.es · estilos del Tachador (js/tachador.js).
 * Solo lo enlazan las páginas de esta herramienta, después de /styles.css,
 * que tiene las variables y los componentes comunes (CLAUDE.md §5).
 */

.tachador-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin: 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}
.tachador-barra__grupo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tachador-buscar { flex: 1 1 260px; }
.tachador-buscar .input { flex: 1 1 140px; min-width: 0; }

.tachador-vista { display: grid; gap: 16px; }
.tachador-miniaturas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.tachador-mini {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px;
  border: 2px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  font-size: .8rem;
  color: var(--c-muted);
}
.tachador-mini canvas { border-radius: 3px; }
.tachador-mini[aria-current="true"] { border-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }

.tachador-pagina { min-width: 0; }
.tachador-lienzo {
  position: relative;
  max-width: 100%;
  margin: 8px auto;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.tachador-lienzo canvas { width: 100%; height: auto; display: block; }
.tachador-capa {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
}
.tachador-caja {
  position: absolute;
  padding: 0;
  border: 1px solid rgba(180, 140, 0, .8);
  border-radius: 2px;
  background: var(--c-detect);
  cursor: pointer;
}
.tachador-caja.is-activa {
  background: rgba(17, 17, 17, .85);
  border-color: #111111;
}
.tachador-caja.is-manual { background: rgba(17, 17, 17, .92); }
.tachador-caja.is-dibujando { pointer-events: none; opacity: .6; }
.tachador-caja:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 1px; }

/* Capa de texto invisible de pdf.js: sirve para medir dónde está cada dato
   dentro de la página con exactitud. Nunca se ve ni se puede tocar. */
.dp-capa-texto {
  /* pdf.js escribe el ancho y el alto con estas variables: sin ellas la capa
     mediría cero y las posiciones saldrían mal. */
  --total-scale-factor: 1;
  --scale-round-x: 0.01px;
  --scale-round-y: 0.01px;
  position: absolute;
  left: -99999px;
  top: 0;
  overflow: hidden;
  line-height: 1;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}
.dp-capa-texto span {
  position: absolute;
  white-space: pre;
  color: transparent;
  transform-origin: 0% 0%;
  font-size: var(--font-height);
  transform: scaleX(var(--scale-x, 1));
}

.tachador-navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: .95rem;
}
.tachador-panel { min-width: 0; }
.tachador-lista { max-height: 420px; overflow-y: auto; }
.tachador-lista__grupo { margin-bottom: 12px; }
.tachador-lista__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border);
}
.tachador-lista__cabecera h4 { font-size: .95rem; }
.tachador-lista__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tachador-lista__fila .check { flex: 1; min-height: 40px; padding: 6px 0; font-size: .92rem; }
.tachador-lista__fila small { color: var(--c-muted); }

@media (min-width: 960px) {
  .tachador-vista {
    grid-template-columns: 110px minmax(0, 1fr) 260px;
    align-items: start;
  }
  /* Con una sola página no hay tira de miniaturas: la página ocupa su sitio. */
  .tachador-vista.is-sin-miniaturas { grid-template-columns: minmax(0, 1fr) 260px; }
  .tachador-miniaturas {
    flex-direction: column;
    max-height: 560px;
    overflow-y: auto;
  }
}

/* Ejemplo dibujado: cada dato se marca y se tapa (hito de actualización 23) */
.ejemplo__fila{display:grid;grid-template-columns:minmax(0,2fr) auto minmax(0,1fr);gap:0 10px;align-items:center}
.ejemplo__fila>span:first-child{grid-column:1/-1;font-size:.75rem;color:#5B6970}
.ejemplo__fila>span:nth-child(2){justify-self:start;padding:0 3px;margin-left:-3px;border-radius:3px}
@media(min-width:720px){.ejemplo__fila{grid-template-columns:6.5em minmax(0,1fr) auto minmax(0,1fr)}.ejemplo__fila>span:first-child{grid-column:auto}}
@media(prefers-reduced-motion:no-preference){.is-anima .ejemplo__fila>span:nth-child(2){animation:dp-marca .9s calc(var(--i)*.6s) both}}
@keyframes dp-marca{30%,70%{background:rgba(255,214,0,.55)}}
.ejemplo .tapado{height:1.1em;border-radius:2px;background:#111}
@media(prefers-reduced-motion:no-preference){.is-anima .tapado{transform-origin:left;animation:dp-tapa .45s calc(var(--i)*.6s + .5s) cubic-bezier(.3,.7,.2,1) both}}

/* El tachado falso se destapa (hito de actualización 23; también en la hoja del contenido.css, para la guía) */
.content .falso{display:grid;gap:14px}
.falso__fila{display:grid;gap:6px;justify-items:start}
.content .falso p{margin:0}
.falso__cap{font-size:.85rem;font-weight:600;color:var(--c-muted)}
.falso__linea{justify-self:stretch;padding:10px 14px;border:1px solid #DDE3E6;border-radius:8px;background:#fff;color:#1B2429}
.falso__dato{position:relative;display:inline-block}
.falso__sel,.falso__caja{position:absolute;inset:-2px -4px;border-radius:2px}
.falso__sel{background:rgba(66,133,244,.35)}
.falso__caja{background:#111;transform:translate(118%,-8%) rotate(5deg);box-shadow:0 3px 8px rgba(0,0,0,.3)}
.falso__barra{display:inline-block;width:5.4em;height:1.1em;vertical-align:-3px;border-radius:2px;background:#111}
.falso__nota{padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:600}
.falso__nota--mal{background:#FDECEC;color:#B3261E}
.falso__nota--bien{background:#E6F4EC;color:#177A4C}
@media(prefers-reduced-motion:no-preference){
.is-anima .falso__caja{animation:dp-destapa .7s 1s cubic-bezier(.3,.7,.3,1) both}
.is-anima .falso__sel{animation:dp-aparece .3s 1.7s both}
.is-anima .falso__fila--mal .falso__nota{animation:dp-sube .35s 2s both}
.is-anima .falso__barra{transform-origin:left;animation:dp-tapa .45s 2.7s both}
.is-anima .falso__fila--bien .falso__nota{animation:dp-sube .35s 3.3s both}}
@keyframes dp-destapa{from{transform:none;box-shadow:none}}
@keyframes dp-aparece{from{opacity:0}}