:root{--bg:#eaf0f4;--surface:#fff;--ink:#24323d;--ink-soft:#5b6b78;--line:#c9d5df;--accent:#2f7fd1;--accent-ink:#fff;--danger:#b3402e;--radius:18px;--radio-boton:14px;--alto-boton:56px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:12px;display:flex}.bar{justify-content:space-between;align-items:center;gap:12px;display:flex}.bar__title{letter-spacing:.02em;margin:0;font-size:1.375rem}.bar__hint{color:var(--ink-soft);font-size:.875rem}.bar__acciones{align-items:center;gap:8px;display:flex}.boton{min-height:var(--alto-boton);border-radius:var(--radio-boton);background:var(--accent);color:var(--accent-ink);font:inherit;cursor:pointer;border:0;padding:0 24px;font-size:1.0625rem;font-weight:600;transition:transform 80ms,filter .15s}.boton:active{transform:scale(.97)}.boton:disabled{opacity:.45;cursor:default;transform:none}.boton--secundario{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.boton-icono{width:44px;height:44px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;font-size:1.5rem;line-height:1;display:grid}.boton-icono:hover{background:var(--bg)}.galeria{flex:1;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));align-content:start;gap:16px;min-height:0;padding:4px;display:grid;overflow-y:auto}.vacio{text-align:center;color:var(--ink-soft);grid-column:1/-1;margin:48px 0;line-height:1.6}.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);position:relative;overflow:hidden}.tarjeta__abrir{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:0;display:block}.tarjeta__imagen{aspect-ratio:1;object-fit:cover;background:var(--bg);width:100%;display:block}.tarjeta__nombre{letter-spacing:.05em;text-transform:uppercase;padding:10px 12px;font-size:1.0625rem;font-weight:700;display:block}.stage{flex:1;gap:16px;min-height:0;display:flex}.tray{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:clamp(180px,20vw,250px);padding:12px;display:flex}.tray__empty{color:var(--ink-soft);text-align:center;font-size:.8rem}.acciones{flex-direction:column;justify-content:center;gap:12px;display:flex}.board-wrap{flex:1;place-items:center;min-width:0;display:grid}.board{grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);width:auto;height:100%;aspect-ratio:var(--cols) / var(--rows);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);touch-action:none;gap:4px;padding:4px;display:grid}.board__slot{border:1px dashed var(--line);background:#f7fafc;border-radius:6px;position:relative}.rotulo{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:999px;padding:8px 24px;font-size:1.375rem;font-weight:700}.visor{z-index:40;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:fixed;inset:0}.visor__imagen{border-radius:var(--radius);object-fit:contain;max-width:100%;max-height:72dvh}.visor__nombre{letter-spacing:.06em;margin:0;font-size:1.5rem;font-weight:700}.modal{z-index:100;background:#24323d8c;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal__panel{background:var(--surface);border-radius:22px;width:min(560px,100%);max-height:90dvh;padding:24px;overflow-y:auto}.modal__cabecera{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.modal__titulo{margin:0;font-size:1.25rem}.modal__texto{color:var(--ink-soft);margin:0 0 16px}.modal__opciones{flex-wrap:wrap;gap:12px;display:flex}.modal__acciones{justify-content:flex-end;gap:12px;margin-top:16px;display:flex}.previa{object-fit:contain;background:var(--bg);border-radius:12px;width:100%;max-height:40dvh;margin-bottom:16px;display:block}.campo{display:block}.campo__etiqueta{color:var(--ink-soft);margin-bottom:6px;font-size:.9rem;display:block}.campo__input{width:100%;min-height:var(--alto-boton);border:1px solid var(--line);border-radius:var(--radio-boton);background:var(--bg);color:var(--ink);font:inherit;letter-spacing:.06em;text-transform:uppercase;padding:0 16px;font-size:1.125rem;font-weight:700}.campo__input:focus{outline:3px solid var(--accent);outline-offset:1px}.aviso-error{color:var(--danger);margin:12px 0 0;font-size:.95rem}.rotate-hint{z-index:50;background:var(--bg);text-align:center;place-items:center;padding:24px;font-size:1.125rem;display:none;position:fixed;inset:0}@media (orientation:portrait){.rotate-hint{display:grid}}.bandeja{flex:1;place-content:center;min-height:0;display:grid}.pieza{background-color:var(--bg);touch-action:none;-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:10px;box-shadow:0 2px 8px #141e2829}.pieza--bandeja:hover{box-shadow:0 4px 14px #141e2838}.pieza--flotante{z-index:200;pointer-events:none;cursor:grabbing;will-change:transform;position:fixed;top:0;left:0;box-shadow:0 18px 36px #141e2859}.board__slot--lleno{background:0 0;border:0}.pieza--colocada{width:100%;height:100%;box-shadow:none;border-radius:4px;animation:.18s ease-out encajar}@keyframes encajar{0%{opacity:.5;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.final{z-index:60;background:var(--bg);place-items:center;padding:24px;animation:.22s ease-out aparecer;display:grid;position:fixed;inset:0}.final__panel{background:var(--surface);border-radius:24px;flex-direction:column;align-items:center;gap:16px;max-height:100%;padding:28px;display:flex;box-shadow:0 18px 48px #141e2829}.final__imagen{border-radius:var(--radius);max-width:min(70vw,640px);max-height:60dvh;box-shadow:0 12px 32px #141e282e}.final__nombre{letter-spacing:.08em;margin:0;font-size:2rem;font-weight:800}.final__acciones{gap:12px;display:flex}@keyframes aparecer{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.pieza--colocada,.final{animation:none}.boton{transition:none}}.ajustes{flex-direction:column;flex:1;gap:24px;min-height:0;padding:4px;display:flex;overflow-y:auto}.ajustes__seccion{flex-direction:column;gap:12px;display:flex}.ajustes__titulo{color:var(--ink-soft);margin:0;font-size:1.0625rem;font-weight:600}.ajustes__vacio{color:var(--ink-soft);margin:0}.opciones{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;display:grid}.opcion{border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;display:flex}.opcion--activa{border-color:var(--accent);box-shadow:0 0 0 3px #2f7fd129}.opcion__vista{gap:2px;width:64px;height:64px;display:grid}.opcion__celda{background:var(--line);border-radius:2px}.opcion--activa .opcion__celda{background:var(--accent)}.opcion__etiqueta{font-size:1.25rem;font-weight:700}.opcion__detalle{color:var(--ink-soft);font-size:.8125rem}.lista-imagenes{flex-direction:column;gap:8px;display:flex}.fila{border:1px solid var(--line);background:var(--surface);border-radius:14px;align-items:center;gap:12px;padding:8px 12px;display:flex}.fila-imagen__foto{object-fit:cover;background:var(--bg);border-radius:10px;width:56px;height:56px}.fila__texto{letter-spacing:.05em;flex:1;font-weight:700}.pin{z-index:120;background:#24323d99;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.pin__panel{background:var(--surface);border-radius:24px;flex-direction:column;align-items:center;gap:14px;width:min(420px,100%);padding:28px;display:flex}.pin__titulo{margin:0;font-size:1.25rem}.pin__texto{color:var(--ink-soft);text-align:center;margin:0;font-size:.9375rem}.pin__puntos{gap:16px;margin:4px 0;display:flex}.pin__punto{border:2px solid var(--line);border-radius:50%;width:18px;height:18px}.pin__punto--lleno{background:var(--accent);border-color:var(--accent)}.pin__teclado{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.tecla{border:1px solid var(--line);background:var(--bg);min-height:64px;color:var(--ink);font:inherit;cursor:pointer;border-radius:14px;font-size:1.375rem;font-weight:700}.tecla:active{transform:scale(.97)}.tecla--vacia{visibility:hidden}.aviso{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);align-items:center;gap:12px;padding:10px 12px 10px 16px;display:flex}.aviso__texto{flex:1;margin:0;font-size:.9375rem}.boton--peligro{background:var(--danger);color:#fff}.confirmacion__acciones{gap:12px;margin-top:8px;display:flex}