:root {
  --fondo: #111114; --superficie: #1b1b20; --superficie2: #24242b; --borde: #2f2f38;
  --texto: #ececf1; --tenue: #9a9aa8; --acento: #ff4d6d; --acento2: #ff8fa3; --pista: #3a3a45;
  --ok: #3ccf91; --radio: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { height: 100vh; height: 100dvh; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
body {
  background: var(--fondo); color: var(--texto); font: 14px/1.4 "Segoe UI", system-ui, sans-serif;
  display: grid; grid-template-columns: 84px 1fr 0; grid-template-rows: 56px 1fr; overflow: hidden;
  grid-template-areas: "barra barra barra" "riel visor panel";
}
body.con-panel { grid-template-columns: 84px 1fr 330px; }
button { font: inherit; color: inherit; }

#barra { grid-area: barra; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: .2px; min-width: 120px; }
.logo { width: 30px; height: 30px; border-radius: 8px; display: block; }
.grupo { display: flex; gap: 8px; align-items: center; }
.grupo.centro { margin-left: auto; }
.grupo.derecha { margin-left: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--superficie2); border: 1px solid var(--borde); padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: #4a4a57; background: #2b2b33; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn.primario:hover:not(:disabled) { background: #ff6680; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--tenue); }
.btn.fantasma:hover { color: var(--texto); background: var(--superficie2); }
.btn.icono-btn { padding: 6px 9px; display: grid; place-items: center; }
.btn.ancho { width: 100%; }
.btn.chico { padding: 4px 10px; font-size: 13px; }

#riel { grid-area: riel; background: var(--superficie); border-right: 1px solid var(--borde); overflow-y: auto; padding: 6px 0; scrollbar-width: thin; }
#riel button { width: 100%; background: none; border: 0; padding: 8px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: var(--tenue); border-left: 3px solid transparent; }
#riel button:hover { color: var(--texto); background: var(--superficie2); }
#riel button.activa { color: var(--acento2); border-left-color: var(--acento); background: var(--superficie2); }
.riel-nombre { font-size: 11px; text-align: center; line-height: 1.15; }
body.sin-foto #riel button { opacity: .45; }

#visor { grid-area: visor; position: relative; overflow: hidden; background:
  radial-gradient(circle at 50% 40%, #1a1a20, #0d0d10); touch-action: none; }
#visor.moviendo, #visor.mano { cursor: grabbing !important; }
#lienzo { position: absolute; image-rendering: auto; box-shadow: 0 6px 40px rgba(0,0,0,.55);
  background: repeating-conic-gradient(#2a2a2a 0 25%, #3a3a3a 0 50%) 0 0 / 18px 18px; }
body.sin-foto #lienzo { display: none; }
#capa { position: absolute; inset: 0; pointer-events: none; }
#vacio { position: absolute; inset: 0; display: none; place-items: center; cursor: pointer; }
body.sin-foto #vacio { display: grid; }
.vacio-caja { text-align: center; padding: 48px 64px; border: 2px dashed #3a3a46; border-radius: 18px; color: var(--tenue); transition: .15s; }
#vacio:hover .vacio-caja, body.soltando .vacio-caja { border-color: var(--acento); color: var(--texto); }
.vacio-caja h1 { font-size: 20px; color: var(--texto); margin: 14px 0 6px; }
.vacio-caja p { margin: 4px 0; } .chico { font-size: 12px; opacity: .8; }
#etiqueta-antes { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); padding: 4px 14px; border-radius: 20px; font-weight: 600; display: none; }
#etiqueta-antes.visible { display: block; }
#zoom { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: rgba(27,27,32,.92); border: 1px solid var(--borde); border-radius: 22px; padding: 3px 6px; }
body.sin-foto #zoom { display: none; }
#zoom button { background: none; border: 0; padding: 4px 10px; cursor: pointer; border-radius: 14px; font-size: 15px; }
#zoom button:hover { background: var(--superficie2); }
#info-zoom { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 12px; }
#info-tam { color: var(--tenue); font-size: 12px; padding: 0 8px 0 4px; border-left: 1px solid var(--borde); }

#panel { grid-area: panel; background: var(--superficie); border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.panel-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; color: var(--acento2); }
.panel-cab h2 { font-size: 16px; margin: 0; color: var(--texto); }
.panel-cuerpo { flex: 1; overflow-y: auto; padding: 0 16px 16px; scrollbar-width: thin; }
.panel-pie { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--borde); }
.panel-pie .btn { flex: 1; padding: 9px; }

.seccion { margin: 14px 0 6px; }
.seccion-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--tenue); margin-bottom: 8px; font-weight: 600; }
.nota { color: var(--tenue); font-size: 12.5px; margin: 6px 0 10px; }
.nota.aviso { color: #ffd27a; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.fila .btn { flex: 1; }

.deslizador { display: block; margin: 10px 0 14px; cursor: default; user-select: none; }
.desl-cab { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
.desl-valor { color: var(--tenue); font-variant-numeric: tabular-nums; }
.desl-valor.cambiado { color: var(--acento2); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; background: var(--pista); outline: none; margin: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; }

.pestanas { display: flex; gap: 4px; background: var(--fondo); padding: 4px; border-radius: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.pestanas button { flex: 1; border: 0; background: none; padding: 7px 6px; border-radius: 7px; cursor: pointer; color: var(--tenue); font-size: 13px; min-width: 56px; }
.pestanas button.activa { background: var(--superficie2); color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.4); }

.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 6px 0 12px; }
.opciones.cuatro { grid-template-columns: repeat(4, 1fr); }
.opciones.dos { grid-template-columns: repeat(2, 1fr); }
.opciones button { background: var(--superficie2); border: 1px solid var(--borde); border-radius: 9px; padding: 9px 4px 7px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--tenue); min-width: 0; }
.opciones button:hover { color: var(--texto); border-color: #4a4a57; }
.opciones button.activa { border-color: var(--acento); color: var(--texto); background: #2d1f25; }
.op-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.op-icono { display: grid; place-items: center; font-size: 22px; line-height: 1; }
.miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.miniaturas button { padding: 0 0 6px; overflow: hidden; }
.miniaturas canvas { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 8px 8px 0 0; }

.colores { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 12px; }
.color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.color.activa { border-color: #fff; }
.color.libre { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; overflow: hidden; }
.color.libre input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }

.interruptor { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 10px 0; font-size: 13px; }
.interruptor input { display: none; }
.int-pista { width: 34px; height: 19px; border-radius: 10px; background: var(--pista); position: relative; transition: .15s; flex: none; }
.int-pista::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: .15s; }
.interruptor input:checked + .int-pista { background: var(--acento); }
.interruptor input:checked + .int-pista::after { left: 17px; }

.selector, .campo { width: 100%; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto); padding: 8px 10px; border-radius: 8px; font: inherit; }
textarea.campo { resize: vertical; min-height: 70px; }
.campo-et { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; color: var(--tenue); }

#ocupado { position: fixed; inset: 0; background: rgba(8,8,10,.62); display: none; place-items: center; z-index: 50; align-content: center; justify-items: center; gap: 12px; backdrop-filter: blur(2px); }
#ocupado.visible { display: grid; }
.girador { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--acento); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
#ocupado-texto { font-weight: 600; } #ocupado-seg { color: var(--tenue); font-variant-numeric: tabular-nums; min-height: 1em; }
#aviso { position: fixed; left: 50%; bottom: 64px; transform: translate(-50%, 20px); background: #2c2c35; border: 1px solid #3d3d48; padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .2s; z-index: 60; max-width: 560px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
#aviso.visible { opacity: 1; transform: translate(-50%, 0); }

.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 40; }
.modal { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 20px 22px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal.grande { width: min(980px, calc(100vw - 32px)); }
.modal h2 { margin: 0 0 6px; font-size: 18px; }
.modal-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.fatal { padding: 40px; font-size: 18px; }

.capas-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.capa-item { display: flex; align-items: center; gap: 8px; background: var(--superficie2); border: 1px solid var(--borde); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.capa-item.activa { border-color: var(--acento); }
.capa-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 260px; overflow-y: auto; margin: 6px 0 10px; }
.emojis button { background: var(--superficie2); border: 1px solid transparent; border-radius: 8px; font-size: 24px; padding: 4px 0; cursor: pointer; }
.emojis button:hover { border-color: var(--acento); }

.collage-cuerpo { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-top: 12px; }
.collage-cuerpo canvas { max-width: 100%; max-height: 62vh; background: #222; border-radius: 6px; display: block; margin: auto; }
.lista-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.lista-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.progreso { height: 6px; background: var(--pista); border-radius: 4px; overflow: hidden; margin: 10px 0; }
.progreso div { height: 100%; width: 0; background: var(--acento); transition: width .2s; }

@media (max-width: 1100px) and (min-width: 761px) {
  body.con-panel { grid-template-columns: 76px 1fr 300px; }
  .grupo .fantasma .txt { display: none; }
}

.solo-movil { display: none; }
.aviso-instalar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: #2c2c35; border: 1px solid #44444f; border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); font-size: 13.5px; max-width: 520px; margin: 0 auto; }
.aviso-instalar b { display: block; margin-bottom: 3px; font-size: 14px; }
.ico-compartir { display: inline-block; vertical-align: -3px; color: #4ea1ff; }

/* ------------------------------------------------------------------ celular */
@media (max-width: 760px) {
  body, body.con-panel {
    grid-template-columns: 1fr;
    grid-template-rows: calc(52px + env(safe-area-inset-top)) minmax(0, 1fr) auto;
    grid-template-areas: "barra" "visor" "riel";
  }
  body.con-panel { grid-template-areas: "barra" "visor" "panel"; }
  #barra { padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); gap: 4px; }
  .marca { min-width: 0; } .marca span, .txt { display: none; }
  .grupo { gap: 4px; } .grupo.derecha { margin-left: 4px; }
  .btn { padding: 8px 10px; } .btn.primario { padding: 8px 12px; }
  #riel { display: flex; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--borde); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #riel::-webkit-scrollbar { display: none; }
  #riel button { width: 66px; flex: none; border-left: 0; border-top: 3px solid transparent; padding: 6px 2px 5px; }
  #riel button.activa { border-top-color: var(--acento); }
  .riel-nombre { font-size: 10.5px; }
  body.con-panel #riel { display: none; }
  #panel { border-left: 0; border-top: 1px solid var(--borde); max-height: 47vh; max-height: 47dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.45); }
  .panel-cab { padding: 10px 14px 4px; }
  .panel-cuerpo { padding: 0 14px 12px; }
  .panel-pie { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  #zoom { display: none; }
  .solo-pc { display: none; } .solo-movil { display: block; }
  .vacio-caja { padding: 34px 22px; margin: 16px; }
  .opciones { grid-template-columns: repeat(4, 1fr); } .opciones.dos { grid-template-columns: repeat(2, 1fr); }
  .miniaturas { grid-template-columns: repeat(4, 1fr); }
  .emojis { grid-template-columns: repeat(7, 1fr); }
  input, select, textarea, .campo, .selector { font-size: 16px; }
  input[type=range] { height: 5px; }
  input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .deslizador { margin: 8px 0 13px; }
  .modal { max-height: calc(100dvh - 40px - env(safe-area-inset-top)); padding: 18px 16px; }
  .collage-cuerpo { grid-template-columns: 1fr; }
  #aviso { bottom: calc(86px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
  #etiqueta-antes { top: 8px; }
}