/*
 * docuprivado.es · estilos de Fotos (js/fotos.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).
 */

.fotos-modos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.tool-card[data-state="error"] .fotos-modos,
.tool-card[data-state="working"] .fotos-modos,
.tool-card[data-state="loading-engine"] .fotos-modos { display: none; }

.fotos-vista { display: grid; gap: 16px; }
@media (min-width: 860px) {
  .fotos-vista { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); align-items: start; }
}

.fotos-lienzo {
  position: relative;
  max-width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-bg);
}
.fotos-lienzo canvas { width: 100%; height: auto; display: block; }
.fotos-capa {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
}
.fotos-caja {
  position: absolute;
  padding: 0;
  border: 2px dashed rgba(255, 255, 255, .9);
  outline: 1px solid rgba(0, 0, 0, .55);
  border-radius: 3px;
  background: rgba(242, 140, 40, .18);
  cursor: pointer;
}
.fotos-caja.is-activa { background: transparent; border-style: solid; border-color: var(--c-action); }
.fotos-caja.is-activa.is-dudosa { border-style: dashed; border-width: 3px; }
.fotos-caja.is-dibujando { pointer-events: none; background: rgba(242, 140, 40, .3); }
.fotos-caja:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 1px; }
/* Las caras pequeñas dan recuadros diminutos: se pueden pulsar un poco por fuera. */
.fotos-caja::after { content: ""; position: absolute; inset: -6px; }
.fotos-anadir { display: grid; gap: 4px; justify-items: start; }
/* En pantallas táctiles no hay teclado: sobra la explicación (los lectores de pantalla la siguen leyendo). */
@media (pointer: coarse) { #fotos-teclas { display: none; } }

.fotos-panel { display: grid; gap: 12px; align-content: start; }
.fotos-panel [data-panel] { display: grid; gap: 12px; }
.fotos-panel [data-panel][hidden] { display: none; }

.fotos-meta {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  font-size: .95rem;
}
.fotos-meta dt { color: var(--c-muted); }
.fotos-meta dd { margin: 0; overflow-wrap: anywhere; }
.fotos-meta__delicado { color: var(--c-error); font-weight: 600; }

/* Ejemplos dibujados: datos ocultos, marca de agua y matrícula (hito de actualización 23) */
.fo-ej{position:relative;overflow:hidden;width:100%;max-width:440px;aspect-ratio:16/9;border-radius:8px;background:linear-gradient(#EDE4D6 0 66%,#C49E73 66%)}
.fo-ej::before{content:"";position:absolute;left:12%;top:14%;width:28%;height:38%;border:4px solid #fff;background:linear-gradient(#BFE3F2 0 62%,#8CC49A 62%)}
.fo-ej::after{content:"";position:absolute;right:9%;bottom:24%;width:40%;height:22%;border-radius:10px 10px 4px 4px;background:#5B7F8C}
.fo-ej__dato,.fo-ej__limpia{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600}
.fo-ej__dato{left:8px;bottom:calc(8px + (1 - var(--i))*30px);background:rgba(255,255,255,.95);color:#1B2429;opacity:.6}
.fo-ej__dato>span{position:relative}
.fo-ej__dato>span::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#C62828}
.fo-ej__limpia{right:8px;top:8px;background:#E6F4EC;color:#177A4C}
.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)}
.ejemplo .tapado{height:1.1em;border-radius:2px;background:#111}
.fo-ej--marca .marca-ej{font-size:.62rem;gap:1em}
.fo-ej--coche{background:linear-gradient(#CFE3EA 0 58%,#9AA5AA 58%)}
.fo-ej--coche::before,.fo-ej--coche::after{content:none}
.fo-ej__auto{position:absolute;left:27%;bottom:5%;width:46%;aspect-ratio:120/84}
.fo-ej__auto svg{display:block;width:100%;height:100%}
.fo-ej__placa{position:absolute;left:35%;top:54.8%;width:30%;height:11.9%;display:grid;place-items:center;border:1px solid #1B2429;border-left:4px solid #1E4FA8;border-radius:2px;background:#fff;color:#1B2429;font-size:.62rem;font-weight:700;line-height:1}
.fo-ej__placa .tapado{position:absolute;inset:-1px -1px -1px -5px;height:auto;border-radius:2px}
@media(prefers-reduced-motion:no-preference){
.is-anima .fo-ej__dato>span::after{transform-origin:left;animation:dp-tapa .4s calc(.5s + var(--i)*.4s) both}
.is-anima .fo-ej__dato{animation:dp-apaga .5s calc(1s + var(--i)*.4s) both}
.is-anima .fo-ej__limpia{animation:dp-pop .35s 1.9s both}
.is-anima .fo-ej__placa{animation:dp-detecta .8s both}
.is-anima .fo-ej--marca .marca-ej>i{animation-delay:calc(.2s + var(--i)*.07s)}
.is-anima .marca-ej>i{animation:dp-franja .6s calc(.3s + var(--i)*.12s) both}
.is-anima .tapado{transform-origin:left;animation:dp-tapa .45s calc(var(--i)*.6s + .5s) cubic-bezier(.3,.7,.2,1) both}}
@keyframes dp-franja{from{opacity:0;transform:translateX(-24px)}}
@keyframes dp-apaga{from{opacity:1}}
@keyframes dp-detecta{30%,70%{box-shadow:0 0 0 3px #F28C28}}