/* Avatar con foto: mismo marco "pegatina" que los avatares ilustrados */
img.avatar { border-radius: 22%; border: 3px solid var(--line); object-fit: cover; background: var(--card); display: block; }
.hello img.avatar { width: 64px; height: 64px; flex: none; filter: drop-shadow(3px 3px 0 var(--line)); }
.list img.avatar { width: 44px; height: 44px; flex: none; }
img.av-img { width: 64px; height: 64px; }

/* Editor */
.modal.wide { max-width: 560px; text-align: center; }
.av-preview { width: min(72vw, 280px); height: auto; aspect-ratio: 1; border-radius: 22%; border: 4px solid var(--line); box-shadow: var(--shadow); margin: 12px auto; display: block; background: #222; }
/* Stickers */
.st-canvas { cursor: pointer; }
.st-ctl { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px; border: 3px solid var(--line); border-radius: 14px; background: var(--bg); text-align: left; }
.st-ctl label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.st-ctl .btn { margin: 4px 0 0; }
.st-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; max-height: 36vh; overflow: auto; padding: 4px; }
.st-opt { background: var(--bg); border: 3px solid var(--line); border-radius: 14px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.st-opt:active { transform: translateY(2px); background: var(--yellow); }
.st-opt img { width: 100%; height: auto; max-width: 56px; }
input[type=range] { width: 100%; accent-color: var(--brand); }
label.btn { cursor: pointer; margin-top: 10px; }
.av-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.av-actions .btn.small { margin: 0; }
@media (min-width: 480px) { .st-tray { grid-template-columns: repeat(6, 1fr); } }

/* Pasos: FOTO → ENCUADRE → STICKERS */
.steps { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.steps li { padding: 4px 10px; border-radius: 99px; border: 2px solid var(--line); background: var(--bg); }
.steps li b { font-family: var(--mono); margin-right: 2px; }
.steps li.on { background: var(--yellow); color: #2a1a00; }
.steps li.done { color: var(--teal); }

/* Encuadre: arrastrar y pellizcar dentro del cuadro */
.frame-wrap { position: relative; width: min(72vw, 300px); margin: 10px auto; touch-action: none; }
.frame-wrap .av-preview { width: 100%; margin: 0; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.frame-wrap .av-preview:active { cursor: grabbing; }
.frame-guide { position: absolute; inset: 0; pointer-events: none; border-radius: 22%; }
.frame-guide::after { content: ""; position: absolute; left: 21%; right: 21%; top: 12%; bottom: 12%; border: 2px dashed rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* Cámara en directo */
.cam-view { width: min(80vw, 320px); aspect-ratio: 1; margin: 12px auto; border-radius: 22%; overflow: hidden; border: 4px solid var(--line); box-shadow: var(--shadow); background: #000; }
.cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-view video.mirror { transform: scaleX(-1); }

/* Diagnóstico de cámara y avisos */
.warn { background: rgba(232,217,176,.14); border: 2px solid var(--yellow); border-radius: 12px; padding: 8px 10px; font-size: .85rem; text-align: left; margin: 10px 0; }
.cam-label { margin: 4px 0 0; word-break: break-word; }
.diag { text-align: left; margin: 12px 0; border: 2px dashed rgba(255,255,255,.2); border-radius: 12px; padding: 6px 10px; }
.diag summary { cursor: pointer; font-weight: 800; font-size: .8rem; padding: 6px 0; }
.diag pre { white-space: pre-wrap; word-break: break-all; font-size: .68rem; max-height: 180px; overflow: auto; background: var(--bg); border-radius: 8px; padding: 8px; }

/* Stickers de texto y pestañas de la bandeja */
.st-tabs { margin: 6px 0; }
.st-opt small { display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.st-opt { flex-direction: column; }
.st-text-tray { grid-template-columns: repeat(3, 1fr) !important; }
#sttextnew, #sttext { width: 100%; }
.st-opt { background: #8a8a8a; }   /* tono medio: se ven bien tanto los stickers oscuros como los blancos */
.st-opt small { color: #1b1530; }

/* Táctil del editor de stickers: el lienzo es una zona de gestos propia (nada de scroll de la página dentro de él) */
.modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal.wide { max-height: 94vh; max-height: 94dvh; }
.st-canvas, .frame-wrap .av-preview { touch-action: none; -ms-touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* El lienzo se queda fijo arriba mientras se desplaza el panel de edición que hay debajo: siempre hay zona libre para los dedos */
.st-stage { position: sticky; top: 0; z-index: 3; background: var(--card); padding: 2px 0 8px; margin-bottom: 8px; box-shadow: 0 8px 8px -8px rgba(0,0,0,.45); }
.st-stage .frame-wrap { margin: 4px auto; }
.st-ctl { gap: 4px; padding: 8px 10px; margin: 6px 0 8px; }
.st-ctl label { grid-template-columns: 58px 1fr; }
.st-ctl input[type=text] { padding: 8px 10px; }
.st-ctl .btn { margin: 2px 0 0; }

/* Teclado virtual abierto escribiendo un texto: el lienzo se compacta (sigue fijo y visible) para que quepa el campo */
#sttextnew, #sttext { font-size: 16px; }                 /* 16px: iOS no hace zoom automático al enfocar */
.modal.kb .steps, .modal.kb #avedit > h2, .modal.kb #avedit > p { display: none; }
.modal.kb .st-stage .frame-wrap { width: min(34vw, 120px); }
.modal.kb .st-stage { padding-bottom: 4px; margin-bottom: 4px; }
.modal.kb .st-tray { max-height: 22vh; }