/* Cámara y foto personal: imagen ambiental y controles glass con tokens de tema. */
:root .capture .camera-preview{inset:0;width:100%;height:100%;border:0;border-radius:inherit;box-shadow:none;background:var(--ground)!important}
#camera-backdrop{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:scaleX(-1);filter:var(--refraction);opacity:.25}
#camera-video{position:absolute;inset:auto;left:0;top:13%;width:100%;height:61%;object-fit:cover;object-position:center;transform:scaleX(-1);mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent)}
.capture .camera-preview:after{display:block!important;position:absolute;inset:0;z-index:0;background:linear-gradient(var(--ground),color-mix(in srgb,var(--ground) 85%,transparent) 10%,transparent 23%,transparent 72%,color-mix(in srgb,var(--ground) 38%,transparent))!important;opacity:1;pointer-events:none}
:root .capture>h1{color:var(--ink)}
.capture>h1,.capture .camera-instruction{z-index:2;text-shadow:0 1px 12px var(--ground)}
.capture .camera-instruction{position:absolute;top:10.3%;left:4%;right:4%;margin:0;text-align:center;font-size:3.8cqw;line-height:1.3;color:var(--ink)}
.capture .framing{z-index:1;inset:14.8% 4% 27.8%}
.capture .framing i{width:9cqw;height:9cqw;opacity:.8;transition:border-color .18s}
.capture[data-valid=true] .framing i{border-color:var(--accent)}
:root .capture .capture-indicator{display:none}
:root .capture .count-panel{top:76%;height:12%;display:grid;grid-template-columns:18cqw 1fr;grid-template-rows:1fr 1fr;column-gap:3cqw;padding:2cqw 4cqw;backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction)}
.capture .count{grid-column:1;grid-row:1/3;height:15cqw;width:15cqw;font-size:10cqw;outline-offset:2px;display:grid;place-items:center}
.capture .count-panel #capture-status{grid-column:2;grid-row:1;align-self:end;margin:0;font-size:3.8cqw;line-height:1.2;text-align:left}
.capture .count-panel #camera-help{grid-column:2;grid-row:2;align-self:start;margin:1cqw 0 0;font-size:3cqw;line-height:1.3;text-align:left;color:var(--muted)}
.capture[data-state=error] .count-panel{top:64%;height:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3cqw;gap:2cqw}
.capture[data-state=error] #count{display:none}
.capture[data-state=error] .count-panel #capture-status,.capture[data-state=error] .count-panel #camera-help{text-align:center;align-self:center}
.camera-recovery{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin:1cqw 2cqw;width:90%}
.camera-recovery .button{min-height:44px;font-size:3.5cqw;padding:2cqw;border-radius:5cqw;color:var(--ink);background:var(--surface);border:1px solid var(--surface-edge)}
.camera-recovery[hidden]{display:none}
:root .capture #cancel{backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction)}
.selection-backdrop{display:none}
.choose[data-personal=true] .selection-backdrop{display:block;position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:var(--refraction);opacity:.18;mask-image:linear-gradient(transparent 30%,#000 50%)}
.choose[data-personal=true] .selection-person{top:18%;height:61%;width:100%;object-fit:cover;object-position:center;border-radius:0;mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent)}
:root .choose[data-personal=true] .selection-preview:after{display:block;background:linear-gradient(180deg,var(--stage-top),color-mix(in srgb,var(--stage-top) 90%,transparent) 14%,transparent 27%,transparent 62%,color-mix(in srgb,var(--stage-bottom) 55%,transparent) 88%,var(--stage-bottom))}
.choose[data-personal=true] .choose-hint{font-size:3.7cqw}
.choose[data-personal=true] .look-selector{backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction)}
#retake{position:absolute;z-index:2;right:5%;top:23%;min-height:44px;padding:2cqw 3cqw;border-radius:5cqw;font-size:3.5cqw;color:var(--ink);background:var(--surface);border:1px solid var(--surface-edge);box-shadow:var(--surface-shadow);backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction)}
#retake[hidden]{display:none}
[data-effects=light] #camera-backdrop,[data-effects=light] .selection-backdrop{filter:blur(10px) grayscale(1)}
[data-effects=light] .capture .count-panel,[data-effects=light] .capture #cancel,[data-effects=light] .choose[data-personal=true] .look-selector,[data-effects=light] #retake{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-strong)}
@media(prefers-reduced-motion:reduce){.capture .framing i{transition:none}}

.capture[data-state=error] .framing,.capture[data-state=error] video{visibility:hidden}
:root .capture .camera-instruction{display:flex;align-items:center;justify-content:flex-start;gap:12px;top:10.3%;left:6%;right:6%;min-height:48px;padding:10px 14px;border:1px solid var(--surface-edge);border-radius:20px;background:var(--surface);box-shadow:var(--surface-shadow);backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction);font:500 clamp(14px,4cqw,22px)/1.2 'Segoe UI',sans-serif;text-align:left;text-shadow:none}
.camera-instruction svg{width:28px;height:28px;flex-shrink:0}.camera-instruction span{min-width:0}
.capture[data-valid=true] .camera-instruction{border-color:var(--accent)}
.capture[data-guidance=move-right] .framing i:nth-child(even),.capture[data-guidance=move-left] .framing i:nth-child(odd){border-color:var(--accent);opacity:1}
[data-effects=light] .capture .camera-instruction{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){.capture .camera-instruction{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}