/*
 * docuprivado.es · estilos del Kit DNI (js/kit-dni.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).
 */

.kit-faces {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.kit-face { min-width: 0; }
.kit-face__title { font-size: 1rem; margin-bottom: 6px; }
.kit-face__icon { width: 60px; height: 40px; color: var(--c-primary); }
.kit-face__done {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-bg);
}
.kit-face__thumb { max-width: 100%; border-radius: 6px; }
.kit-face__info { font-size: .85rem; color: var(--c-muted); }

.kit-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kit-screen[hidden] { display: none; }

.kit-crop {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin: 12px 0;
}
.crop {
  position: relative;
  max-width: 100%;
  touch-action: none;
}
.crop__photo { width: 100%; height: auto; border-radius: 6px; }
.crop__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.crop__mask { fill: rgba(10, 20, 25, .55); }
.crop__outline { fill: none; stroke: var(--c-primary); stroke-width: 2; stroke-dasharray: 6 4; }
.crop.is-tal-cual .crop__mask, .crop.is-tal-cual .crop__outline { display: none; }
.crop__handle {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  touch-action: none;
}
.crop__handle::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 12px;
  border: 3px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.crop__handle.is-dragging::after, .crop__handle:hover::after { background: var(--c-action); }
.kit-crop__preview { display: grid; gap: 6px; justify-items: center; }
.kit-crop__preview canvas {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
}

.kit-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kit-sliders { display: grid; gap: 8px; margin-top: 12px; }
.kit-estilo { display: grid; gap: 12px; margin-top: 16px; }
.kit-previews {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-top: 16px;
}
.kit-previews figure { display: grid; gap: 6px; justify-items: center; }
.kit-previews canvas {
  max-width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.kit-previews figcaption { font-size: .85rem; color: var(--c-muted); }
.kit-extras { display: grid; margin-top: 8px; }

@media (min-width: 720px) {
  .kit-faces { grid-template-columns: 1fr 1fr; gap: 16px; }
  .kit-crop { grid-template-columns: minmax(0, 1fr) auto; align-items: start; justify-items: stretch; }
  .kit-sliders { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Uno al lado del otro: sin el margen que separa un campo del de encima */
  .kit-sliders .field + .field { margin-top: 0; }
  .kit-previews { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Resultado en el móvil: las imágenes a la vista para guardarlas con el dedo */
.kit-archivos { display: grid; gap: 8px; justify-items: center; margin-top: 12px; }
.kit-archivos[hidden] { display: none; }
.kit-archivos__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kit-archivos__lista li { display: grid; gap: 4px; justify-items: center; }
.kit-archivos__lista img { width: 150px; height: auto; border-radius: 6px; border: 1px solid var(--c-border); -webkit-touch-callout: default; }
.kit-recorte-auto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 8px 0 0; color: var(--c-muted); font-size: .92rem; text-align: center; }
.kit-recorte-auto[hidden] { display: none; }

/* Ejemplo dibujado: las dos caras en un folio, con la marca de agua (hito de actualización 23) */
.kit-ej{display:grid;justify-items:center}
.kit-ej__hoja{width:min(100%,180px);aspect-ratio:210/297;display:grid;align-content:center;justify-items:center;gap:14px;border:1px solid #DDE3E6;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.kit-ej__carta{position:relative;overflow:hidden;display:grid;grid-template-columns:30% 1fr;gap:8%;width:66%;aspect-ratio:85.6/54;padding:6%;border:1px solid #C4D6DB;border-radius:5px;background:linear-gradient(135deg,#EAF2F4,#D7E6EA)}
.kit-ej__carta--rev{grid-template-columns:1fr}
.kit-ej__carta--rev .kit-ej__lineas{align-content:end}
.kit-ej__foto{border-radius:3px;background:#BFD1D6}
.kit-ej__lineas{display:grid;gap:4px;align-content:start}
.kit-ej__lineas i{height:4px;border-radius:2px;background:#9FB7BE}
.marca-ej{position:absolute;z-index:1;inset:-60%;display:grid;align-content:center;justify-items:center;gap:1.1em;transform:rotate(-30deg);color:rgba(27,36,41,.4);font-size:.5rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;pointer-events:none}
.marca-ej i{font-style:normal}
.marca-ej i::before{content:var(--t) " · " var(--t) " · " var(--t)}
.kit-ej .marca-ej{font-size:.4rem;gap:.8em}
@media(prefers-reduced-motion:no-preference){
.is-anima .kit-ej__carta{animation:dp-sube .45s both}
.is-anima .marca-ej>i{animation:dp-franja .6s calc(.3s + var(--i)*.12s) both}
.is-anima .kit-ej__carta--rev{animation-delay:.15s}
.is-anima .kit-ej .marca-ej>i{animation-delay:calc(.7s + var(--i)*.1s)}}
@keyframes dp-franja{from{opacity:0;transform:translateX(-24px)}}