/*
 * docuprivado.es · estilos del Anonimizador (js/anonimizador.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).
 */

.textarea--grande { min-height: 200px; }
.anon-contador { text-align: right; }
.anon-contador .is-pasado { color: var(--c-error); font-weight: 600; }
.anon-volver { margin-top: 18px; }

.anon-pestanas { display: flex; gap: 8px; margin: 14px 0 6px; }
.anon-pestanas .chip[aria-selected="true"] {
  border-color: var(--c-primary);
  color: var(--c-primary);
  font-weight: 600;
}

.anon-columnas { display: grid; gap: 14px; margin-top: 6px; }
.anon-columnas.is-original .anon-columna--anonimo,
.anon-columnas.is-anonimo .anon-columna--original { display: none; }
.anon-columna { min-width: 0; }

.anon-texto {
  max-height: 340px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-size: .95rem;
}
.anon-texto:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* Cada etiqueta es un botón: al pasar por encima o tocarla enseña el dato real. */
.anon-etiqueta {
  position: relative;
  display: inline;
  padding: 1px 5px;
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  background: var(--c-detect);
  color: var(--c-text);
  font-size: .85em;
  font-weight: 600;
  cursor: help;
}
.anon-etiqueta::after {
  content: attr(data-original);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: none;
  max-width: 260px;
  width: max-content;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--c-text);
  color: var(--c-surface);
  font-size: .8rem;
  font-weight: 400;
  white-space: pre-wrap;
  box-shadow: var(--shadow-card);
}
.anon-etiqueta:hover::after,
.anon-etiqueta:focus-visible::after,
.anon-etiqueta.is-abierta::after { display: block; }

.anon-sustituciones { margin-top: 20px; }
.anon-lista { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 2px; }
.anon-item { border-bottom: 1px solid var(--c-border); }
.anon-item:last-child { border-bottom: 0; }
.anon-item.is-apagada { opacity: .55; }
.anon-item .check { align-items: center; flex-wrap: wrap; }
.anon-item__etiqueta { font-weight: 600; font-size: .85rem; color: var(--c-primary); }
.anon-item__valor { overflow-wrap: anywhere; }
.anon-item__veces, .anon-item__duda { color: var(--c-muted); font-size: .8rem; }
.anon-item__duda {
  padding: 1px 8px;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
}

.anon-copiar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 14px 0 6px; }
.anon-tabla { margin: 16px 0; }
.anon-tabla .field__hint { text-align: center; }
.anon-restaurado { margin-top: 18px; }
.anon-restaurado .anon-texto { margin-top: 6px; }

@media (min-width: 860px) {
  .anon-pestanas { display: none; }
  .anon-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
  .anon-columnas.is-original .anon-columna--anonimo,
  .anon-columnas.is-anonimo .anon-columna--original { display: block; }
}

/* Ejemplo dibujado: cada dato se cambia por su etiqueta (hito de actualización 23) */
.anon-ej{line-height:1.9}
.tok{display:inline-grid;vertical-align:bottom}
.tok>*{grid-area:1/1;text-align:center;white-space:nowrap}
.tok__antes{opacity:0;border-radius:3px}
.tok__despues{padding:0 4px;border-radius:4px;background:#E3F0F3;color:#0F5C6E;font-weight:600}
@media(prefers-reduced-motion:no-preference){
.is-anima .tok__antes{animation:dp-se-va .9s calc(.4s + var(--i)*.8s) both}
.is-anima .tok__despues{animation:dp-sube .4s calc(.9s + var(--i)*.8s) both}}
@keyframes dp-se-va{from{opacity:1}20%,45%{opacity:1;background:rgba(255,214,0,.55)}to{opacity:0;transform:translateY(-6px)}}