/* ═══════════════ Fotón · Editor de imágenes ═══════════════ */
:root{
  color-scheme:dark;   /* controles nativos (números, selectores, casillas) en modo oscuro */
  --bg0:#0f1217; --bg1:#161a21; --bg2:#1e242e; --bg3:#28303d;
  --line:#2c3542; --line2:#384452;
  --tx:#e8edf4; --tx2:#9aa7b8; --tx3:#6b788a;
  --acc:#4f8cff; --acc2:#2f6fe0; --ok:#35c983; --warn:#ffb454; --err:#ff6b6b;
  --radius:10px;
  --railw:56px; --panelw:300px; --topbarh:50px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg0); color:var(--tx);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  user-select:none; -webkit-user-select:none;
}
button{font:inherit; color:inherit; cursor:pointer}
input[type=text],select,input[type=number]{font:inherit; color:var(--tx)}

/* ── Barra superior ── */
#topbar{
  height:var(--topbarh); flex:0 0 var(--topbarh);
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--bg1); border-bottom:1px solid var(--line); z-index:5;
}
.brand{display:flex; align-items:center; gap:8px; margin-right:6px}
.brand-ic{color:var(--acc); font-size:24px; line-height:1}
.brand-tx{display:flex; flex-direction:column; line-height:1.15}
.brand-tx strong{font-size:15px}
.brand-tx small{color:var(--tx3); font-size:11px}
.tb-group{display:flex; align-items:center; gap:6px; flex:1; flex-wrap:nowrap; overflow:hidden}
.tb-sep{width:1px; height:22px; background:var(--line2); margin:0 4px}
.tb-meta{margin-left:auto; text-align:right; min-width:120px; overflow:hidden}
.tb-meta #imgName{display:block; font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px}
.tb-meta #imgDims{color:var(--tx3); font-size:11px}

.btn{
  background:var(--bg3); border:1px solid var(--line2); color:var(--tx);
  border-radius:8px; padding:6px 12px; font-size:13px; white-space:nowrap;
  transition:filter .12s, background .12s;
}
.btn:hover:not(:disabled){background:#33404f; filter:brightness(1.08)}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btn.icon{width:32px; padding:6px 0; text-align:center; font-size:15px}
.btn.ghost{background:transparent}
.btn.ghost:hover:not(:disabled){background:var(--bg3)}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#fff}
.btn.primary:hover:not(:disabled){background:var(--acc2)}
.btn.sm{padding:4px 8px; font-size:12px}
.btn.big{padding:12px 22px; font-size:15px}
.btn.wide{width:100%; justify-content:center}
.btn.it{font-style:italic}
.zoom-val{min-width:44px; text-align:center; color:var(--tx2); font-variant-numeric:tabular-nums; font-size:12px}
.chk{display:inline-flex; align-items:center; gap:6px; color:var(--tx2); font-size:12.5px; cursor:pointer; user-select:none}
.chk input{accent-color:var(--acc)}

/* ── Cuerpo ── */
#body{flex:1; display:flex; min-height:0; position:relative}

/* Carro de herramientas */
#rail{
  width:var(--railw); flex:0 0 var(--railw);
  background:var(--bg1); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; overflow-y:auto;
}
.tool{
  width:44px; height:44px; border-radius:10px; border:1px solid transparent;
  background:transparent; font-size:20px; line-height:1; display:flex;
  align-items:center; justify-content:center; transition:background .12s;
}
.tool:hover{background:var(--bg3)}
.tool.active{background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.25)}
.tool[data-tool=line],.tool[data-tool=rect],.tool[data-tool=ellipse],.tool[data-tool=text]{
  font-weight:700; font-size:17px; color:var(--tx);
}
.rail-sep{width:70%; height:1px; background:var(--line2); margin:4px 0}

/* Lienzo */
#stagewrap{flex:1; min-width:0; display:flex}
#stage{position:relative; flex:1; overflow:hidden; background:var(--bg0);
  background-image:radial-gradient(circle, #1a202a 1px, transparent 1px); background-size:22px 22px}
#view{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:default; display:block}

/* Estados vacío / ocupado / sugerencia */
#emptyState{position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:2}
#emptyState.shown{display:flex}
#dropZone{border:2px dashed var(--line2); border-radius:18px; padding:44px 58px; text-align:center; background:rgba(22,26,33,.75); transition:border .15s}
#dropZone.over{border-color:var(--acc); background:rgba(79,140,255,.08)}
.empty-ic{font-size:52px; margin-bottom:8px}
#emptyState h2{margin:6px 0 2px; font-size:20px}
#emptyState p{color:var(--tx2); margin:6px 0}
#emptyState .empty-hint{color:var(--tx3); font-size:12.5px}
#busy{position:absolute; inset:0; z-index:6; background:rgba(10,12,16,.55); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px)}
#busy[hidden]{display:none}
.busy-in{background:var(--bg2); border:1px solid var(--line2); padding:20px 26px; border-radius:14px; text-align:center}
.spinner{width:34px;height:34px;margin:0 auto 10px;border:3px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#hintLine{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:rgba(22,26,33,.92); border:1px solid var(--line2); color:var(--tx);
  padding:7px 16px; border-radius:20px; font-size:12.5px; z-index:3; pointer-events:none;
  white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.4);
}
#hintLine[hidden]{display:none}

/* ── Panel derecho ── */
#panel{
  width:var(--panelw); flex:0 0 var(--panelw);
  background:var(--bg1); border-left:1px solid var(--line);
  overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px;
}
#panel h3{margin:0 0 10px; font-size:15px}
#panel .ps{border-bottom:1px solid var(--line); padding-bottom:12px}
#panel .sec-static{border-bottom:1px solid var(--line); padding-bottom:12px}
#panel .sec-static:last-child{border-bottom:none; padding-bottom:0}
.lab{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3); margin:4px 0 6px}
.grp{margin:0 0 10px}
.grp label{display:block; margin-bottom:4px; color:var(--tx2); font-size:12.5px}
.grp label b{color:var(--tx); font-variant-numeric:tabular-nums}
input[type=range]{width:100%; accent-color:var(--acc); margin:2px 0}
input[type=color]{
  width:100%; height:34px; border:1px solid var(--line2); border-radius:8px;
  background:var(--bg3); padding:3px; cursor:pointer;
}
select{
  width:100%; background:var(--bg3); border:1px solid var(--line2);
  border-radius:8px; padding:7px 8px; color:var(--tx);
}
select:focus{outline:none; border-color:var(--acc)}
input[type=color]:focus{outline:none; border-color:var(--acc)}
input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],input[type=url],textarea{
  width:100%; background:var(--bg3); border:1px solid var(--line2);
  border-radius:8px; padding:7px 9px; color:var(--tx); outline:none;
  font:inherit;
}
input[type=text]:focus,input[type=number]:focus,input[type=search]:focus,input[type=email]:focus,input[type=password]:focus,input[type=url]:focus,textarea:focus{border-color:var(--acc)}
input[type=number]{font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield}
/* sin flechas nativas: el valor se ve completo y el control queda como los demás campos */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; appearance:none; margin:0}
input::placeholder,textarea::placeholder{color:var(--tx3)}
input:disabled,select:disabled,textarea:disabled{opacity:.5; cursor:not-allowed}
.row{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:6px 0}
.row .btn{flex:1}
.bigrow .btn{padding:10px 6px; font-weight:700}
.chks{display:flex; flex-direction:column; gap:6px; margin-bottom:8px}
.note{color:var(--tx2); font-size:12.5px; margin:6px 0}
.note.small{font-size:11.5px; color:var(--tx3)}
.muted{color:var(--tx2)}
.muted.small{font-size:12px; color:var(--tx3)}
.small{font-size:12px}
ul.small li{margin-bottom:3px}
.mono{font-family:Consolas,monospace; font-size:12.5px; color:var(--ok)}

/* Selector segmentado (métodos de fondo) */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px}
.seg-b{position:relative; cursor:pointer}
.seg-b input{position:absolute; opacity:0; pointer-events:none}
.seg-b span{
  display:block; text-align:center; padding:8px 4px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--line2); font-size:12px; color:var(--tx2);
  transition:all .12s;
}
.seg-b input:checked + span{background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600}
.seg-b:hover span{border-color:var(--acc)}
.seg-b input:disabled + span{opacity:.45}
.seg-b:has(input:disabled){cursor:not-allowed}

/* Botones de estado de texto */
#xBold{font-weight:800}
#xBold.on,#xItalic.on{background:var(--acc); border-color:var(--acc); color:#fff}

/* Publicidad: rejilla de piezas y textos rápidos */
.ad-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0 12px}
.ad-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:var(--bg3); border:1px solid var(--line2); border-radius:10px;
  padding:8px 9px; cursor:pointer; color:var(--tx2); text-align:left;
  transition:border-color .12s, background .12s, transform .08s;
}
.ad-btn:hover{border-color:var(--acc); background:var(--bg2)}
.ad-btn:active{transform:scale(.97)}
.ad-btn .ad-ico{font-size:19px; line-height:1.1}
.ad-btn b{color:var(--tx); font-size:12.5px}
.ad-btn i{font-size:10.5px; font-style:normal; color:var(--tx3)}
.ad-texts{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px}
.ad-text{
  background:var(--bg3); border:1px solid var(--line2); border-radius:999px;
  padding:4px 10px; font-size:11.5px; color:var(--tx2); cursor:pointer;
  transition:border-color .12s, color .12s;
}
.ad-text:hover{border-color:var(--acc); color:var(--tx)}

/* Donación (ventana de ayuda) */
.dona-box{
  display:flex; align-items:center; gap:10px; margin:12px 0;
  background:var(--bg3); border:1px solid var(--line2); border-radius:10px; padding:10px 12px;
}
.dona-ico{font-size:24px}
.dona-lbl{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3)}
.dona-box b{font-size:14px; color:var(--tx)}
.help .row a.btn{flex:1; text-align:center; text-decoration:none; display:inline-block}

/* Barra de estado */
#statusbar{
  height:26px; flex:0 0 26px; display:flex; align-items:center; padding:0 12px;
  background:var(--bg1); border-top:1px solid var(--line);
  color:var(--tx3); font-size:12px; z-index:5;
}

/* Soltar archivo */
#dropHint{position:fixed; inset:8px; z-index:50; pointer-events:none; border:3px dashed var(--acc); border-radius:16px;
  background:rgba(20,40,80,.55); display:flex; align-items:center; justify-content:center}
#dropHint[hidden]{display:none}
#dropHint div{font-size:22px; font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* Diálogo modal */
#modalRoot{position:fixed; inset:0; z-index:40; background:rgba(8,10,14,.6); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px)}
#modalRoot[hidden]{display:none}
#modalCard{background:var(--bg2); border:1px solid var(--line2); border-radius:14px; padding:20px; width:min(430px,92vw); max-height:86vh; overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.5)}
#modalCard h3{margin:0 0 14px}
#modalBody .grp:last-child{margin-bottom:0}

/* Capas de objetos */
#layersList{list-style:none; margin:0; padding:0; max-height:180px; overflow-y:auto; border:1px solid var(--line2); border-radius:8px; background:var(--bg0)}
#layersList li{
  display:flex; align-items:center; gap:6px; padding:5px 8px; font-size:12.5px;
  border-bottom:1px solid var(--line); cursor:pointer; color:var(--tx2);
}
#layersList li:last-child{border-bottom:none}
#layersList li:hover{background:var(--bg2)}
#layersList li.sel{background:rgba(79,140,255,.16); color:var(--tx)}
#layersList .l-ic{width:20px; text-align:center; flex:0 0 20px}
#layersList .l-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#layersList .l-btn{border:1px solid transparent; background:transparent; border-radius:6px; padding:1px 5px; font-size:11px; color:var(--tx2)}
#layersList .l-btn:hover:not(:disabled){background:var(--bg3); color:var(--tx); border-color:var(--line2)}
#layersList .l-btn:disabled{opacity:.25; cursor:not-allowed}
#layersList .l-empty{color:var(--tx3); font-style:italic; cursor:default; justify-content:center}
#layersList li.l-empty:hover{background:transparent}
textarea{font:inherit; outline:none}
textarea:focus{border-color:var(--acc) !important}

/* Estados deshabilitados */
.tool:disabled{opacity:.32; pointer-events:none}
body.noimg #panel .sec-static{opacity:.45; pointer-events:none}
body.noimg #rail{border-right-color:var(--line)}

/* ── Menú de ayuda ── */
.tb-help{position:relative; flex:0 0 auto}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:252px;
  display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--bg2); border:1px solid var(--line2); border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.menu[hidden]{display:none}
.menu-item{
  display:block; width:100%; text-align:left; background:transparent; border:none;
  color:var(--tx); padding:8px 10px; border-radius:7px; font-size:13px; cursor:pointer;
}
.menu-item:hover{background:var(--bg3)}
.menu-sep{height:1px; background:var(--line2); margin:4px 2px}

/* ── Contenido de las ventanas de ayuda ── */
#modalCard.wide{width:min(760px,94vw)}
.help h4{margin:14px 0 6px; font-size:13.5px; color:var(--acc)}
.help h4:first-child{margin-top:0}
.help ul{margin:4px 0 4px 18px; padding:0}
.help li{margin-bottom:5px; font-size:12.8px; line-height:1.45}
.help p{margin:6px 0}
.help hr{border:none; border-top:1px solid var(--line2); margin:12px 0}
.help a{color:var(--acc)}
.help code{background:var(--bg0); border:1px solid var(--line2); border-radius:5px; padding:1px 5px; font-size:11.5px}
.help table.keys{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px}
.help table.keys th{text-align:left; color:var(--tx3); font-weight:600; padding:5px 8px; border-bottom:1px solid var(--line2)}
.help table.keys td{padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.help table.keys td:first-child{white-space:nowrap; color:var(--tx); font-family:Consolas,monospace; font-size:11.8px}
.help.credits h4{font-size:16px; color:var(--tx); margin:0 0 4px}
.help.credits p{margin:4px 0}

/* Scrollbars */
#panel::-webkit-scrollbar,#rail::-webkit-scrollbar{width:9px}
#panel::-webkit-scrollbar-thumb,#rail::-webkit-scrollbar-thumb{background:var(--line2); border-radius:5px}

/* Responsive compacto */
@media (max-width:1440px){
  /* la barra superior lleva muchos botones: se compacta antes de recortar etiquetas */
  .tb-group{gap:4px}
  .tb-group .btn{padding:7px 9px}
  #chkBoardWrap .chk-tx{display:none}
}
@media (max-width:1240px){
  /* zoom: sigue disponible con la rueda, los botones − / + y las teclas 0 / + / − */
  #btnFit, #btnOne{display:none}
  .brand-tx small{display:none}
  .tb-meta #imgDims{display:none}
}
@media (max-width:1060px){
  /* zoom con la rueda o las teclas; se libera espacio en la barra */
  #btnZoomIn, #btnZoomOut{display:none}
}
@media (max-width:980px){
  :root{--panelw:252px}
  #chkBoardWrap{display:none}
}
@media (max-width:720px){
  #panel{position:absolute; right:0; top:0; bottom:0; z-index:8; box-shadow:-8px 0 24px rgba(0,0,0,.4)}
  #imgName{max-width:110px}
}