/*
 * docuprivado.es · estilos de la Foto de carnet (js/foto-carnet.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).
 */

.fc-pantalla[hidden] { display: none; }

/* Documento elegido y lista con buscador */
.fc-doc { margin-bottom: 12px; }
.fc-doc__etiqueta { display: block; margin-bottom: 4px; font-weight: 600; font-size: .95rem; }
.fc-doc__actual {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-btn);
  background: var(--c-surface);
  text-align: left;
  cursor: pointer;
}
.fc-doc__actual:hover { border-color: var(--c-primary); }
.fc-doc__nombre { font-weight: 600; }
.fc-doc__medida { color: var(--c-muted); font-size: .9rem; }
.fc-doc__flecha { flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--c-primary); transition: transform .15s; }
.fc-doc__actual[aria-expanded="true"] .fc-doc__flecha { transform: rotate(180deg); }
.fc-doc__panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-bg);
}
.fc-doc__panel .input { margin-top: 4px; }
.fc-doc__lista { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; margin-top: 10px; }
.fc-doc__opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  background: var(--c-surface);
  cursor: pointer;
}
.fc-doc__opcion[hidden] { display: none; }
.fc-doc__opcion input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-primary); }
.fc-doc__opcion:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.fc-doc__texto { display: grid; gap: 2px; }
.fc-doc__texto small { color: var(--c-muted); font-size: .85rem; }

.fc-icono { width: 40px; height: 48px; color: var(--c-primary); }

/* Cámara con la silueta encima (el vídeo se ve en espejo, como un espejo de verdad) */
.fc-camara {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 3 / 4;
  margin: 0 auto 10px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #0b0f11;
}
.fc-camara__video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.fc-camara__silueta { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(0, 0, 0, .35); }
.fc-camara__linea { fill: none; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 8 6; }
.fc-camara.is-listo .fc-camara__linea { stroke: #3ddc84; stroke-dasharray: none; }
.fc-camara__consejo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .66);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
}

/* Ajuste: la foto con sus guías y el panel de comprobaciones */
.fc-ajuste { display: grid; gap: 16px; margin-top: 8px; }
.fc-vista { display: grid; justify-items: center; gap: 6px; align-content: start; }
.fc-marco {
  position: relative;
  width: 220px;
  max-width: 100%;
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-card);
  background: #ffffff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.fc-marco.is-arrastrando { cursor: grabbing; }
.fc-marco:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.fc-marco__lienzo { display: block; width: 100%; height: auto; }
.fc-guias { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.fc-guias[hidden] { display: none; }
.fc-guias line { stroke-width: 1.5; }
.fc-guias__franja { fill: rgba(26, 140, 70, .16); }
.fc-guias__corona, .fc-guias__barbilla { stroke: #1a8c46; }
.fc-guias__centro { stroke: rgba(15, 92, 110, .7); stroke-dasharray: 4 4; }
.fc-guias__ojos { stroke: rgba(15, 92, 110, .7); stroke-dasharray: 2 4; }
.fc-vista__ayuda { margin: 0; color: var(--c-muted); font-size: .85rem; text-align: center; }
.fc-vista__guias { min-height: 36px; }

.fc-panel { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fc-panel .btn--link { justify-self: start; }
.fc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fc-check { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; line-height: 1.4; }
.fc-check svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.fc-check.is-ok svg { color: var(--c-ok); }
.fc-check.is-aviso svg { color: var(--c-warn); }
.fc-check.is-mal svg { color: var(--c-error); }
.fc-check.is-mal { font-weight: 600; }
.fc-deslizadores { display: grid; gap: 4px; }
.fc-reglas summary { cursor: pointer; font-weight: 600; font-size: .95rem; min-height: 32px; }
.fc-reglas ul { margin: 6px 0; padding-left: 1.2em; font-size: .9rem; }
.fc-reglas li + li { margin-top: 4px; }

.fc-resultado {
  display: block;
  width: auto;
  max-width: min(100%, 260px);
  max-height: 360px;
  margin: 4px auto 12px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
}
.fc-resultado:not([src]) { display: none; }

@media (min-width: 540px) {
  .fc-deslizadores { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Uno al lado del otro: sin el margen que separa un campo del de encima */
  .fc-deslizadores .field + .field { margin-top: 0; }
}
@media (min-width: 720px) {
  .fc-ajuste { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .fc-marco { width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-doc__flecha { transition: none; }
}

/* Ejemplo dibujado: la foto se encuadra y se comprueba (hito de actualización 23) */
.fc-ej{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.fc-ej__marco{position:relative;flex:none;width:92px;aspect-ratio:26/32;overflow:hidden;border:1px solid #C4D6DB;background:#EEF2F3}
.fc-ej__marco svg{display:block;width:100%;height:100%}
.fc-ej__guia{position:absolute;left:0;right:0;height:2px;background:#F28C28}
.content .fc-ej__checks{list-style:none;margin:0;padding:0;display:grid;gap:4px;color:#177A4C;font-weight:600}
.content .fc-ej__checks li{margin:0}
.fc-ej__checks li::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;background:currentColor;clip-path:polygon(14% 47%,0 61%,40% 100%,100% 22%,85% 10%,38% 72%)}
@media(prefers-reduced-motion:no-preference){
.is-anima .fc-ej__marco svg{animation:dp-encuadra .7s cubic-bezier(.3,.7,.2,1) both}
.is-anima .fc-ej__guia{transform-origin:left;animation:dp-tapa .4s calc(.6s + var(--i)*.3s) both}
.is-anima .fc-ej__checks li{animation:dp-sube .35s calc(1.3s + var(--i)*.25s) both}}
@keyframes dp-encuadra{from{transform:translate(14%,6%) scale(.82) rotate(8deg)}}