/* ───────────────────────────────────────────────
	 koder — paleta Claude dark, acento verde

	 Orden del archivo:
	 1. tokens · 2. reset · 3. esqueleto · 4. sidebar
	 5. paneles · 6. buscador · 7. diálogo · 8. menú
	 9. confirmación · 10. aviso · 11. barra móvil
	 12. tema CodeMirror · 13. táctil · 14. iPad · 15. iPhone
	 ─────────────────────────────────────────────── */

/* ── 1. tokens ─────────────────────────────── */

:root{
	--bg:        #1a1a18;
	--bg-side:   #171715;
	--bg-deep:   #131311;
	--bg-hover:  #201f1c;
	--line:      #2a2a27;
	--line-soft: #232320;

	--text:      #c8c6bc;
	--dim:       #6f6d64;
	--dimmer:    #4a4a46;

	--accent:      #7aaa6a;
	--accent-hi:   #8cc47a;
	--accent-soft: rgba(122,170,106,.13);

	--sel:    #2e3a28;
	--sel-hi: #3e5134;

	--blue:   #8099d4;
	--green:  #7aaa6a;
	--amber:  #c4943a;
	--red:    #c45a5a;
	--violet: #a98fc4;

	--r: 3px;
	--mono: "Berkeley Mono","JetBrains Mono","IBM Plex Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
	--fs: 12.5px;
	--lh: 1.65;

	--kb: 0px;   /* alto del teclado, lo pisa app.js en runtime */
}

[data-theme="9009"]{
	--bg:        #ebe8df;
	--bg-side:   #e9e5db;
	--bg-deep:   #e6e2d6;
	--bg-hover:  #e7e4d9;
	--line:      #dfdacc;
	--line-soft: #e4e0d5;

	--text:      #0c0d0d;
	--dim:       #8e8976;
	--dimmer:    #b5b1a2;

	--accent:      #799878;
	--accent-hi:   #86b585;
	--accent-soft: rgba(121,152,120,.13);
	--amber:       #9d7525;

	--sel:    #d3d7ca;
	--sel-hi: #c1cbb9;
}

[data-theme="viridescent"]{
	--bg:        #282d2d;
	--bg-side:   #252a2a;
	--bg-deep:   #212626;
	--bg-hover:  #2d3232;
	--line:      #373d3d;
	--line-soft: #303636;

	--text:      #e8f2d8;
	--dim:       #7e9d83;
	--dimmer:    #5a6e5f;

	--accent:      #94ccab;
	--accent-hi:   #aae0c0;
	--accent-soft: rgba(148,204,171,.13);
	--amber:       #d2a956;

	--sel:    #3f4e47;
	--sel-hi: #50675b;
}

[data-theme="camping"]{
	--bg:        #f8efe1;
	--bg-side:   #f7ecdc;
	--bg-deep:   #f5e9d6;
	--bg-hover:  #f6ebd9;
	--line:      #f2e2c8;
	--line-soft: #f5e8d3;

	--text:      #353834;
	--dim:       #b9afa2;
	--dimmer:    #d3cabc;

	--accent:      #9c4b47;
	--accent-hi:   #c1514c;
	--accent-soft: rgba(156,75,71,.13);
	--amber:       #9d7525;

	--sel:    #e5cdc1;
	--sel-hi: #d6b3a9;
}

[data-theme="carbon"]{
	--bg:        #2b2b2b;
	--bg-side:   #282828;
	--bg-deep:   #242424;
	--bg-hover:  #303030;
	--line:      #3b3b3b;
	--line-soft: #333333;

	--text:      #f2e2c4;
	--dim:       #565656;
	--dimmer:    #444444;

	--accent:      #e96b29;
	--accent-hi:   #f88244;
	--accent-soft: rgba(233,107,41,.13);
	--amber:       #d2a956;

	--sel:    #53382b;
	--sel-hi: #71422a;
}

[data-theme="matrix"]{
	--bg:        #000000;
	--bg-side:   #000000;
	--bg-deep:   #000000;
	--bg-hover:  #050505;
	--line:      #101010;
	--line-soft: #080808;

	--text:      #d2fccb;
	--dim:       #205717;
	--dimmer:    #13330d;

	--accent:      #5df742;
	--accent-hi:   #7bff64;
	--accent-soft: rgba(93,247,66,.13);
	--amber:       #d2a956;

	--sel:    #13340e;
	--sel-hi: #225a18;
}

[data-theme="olive"]{
	--bg:        #e6e1c8;
	--bg-side:   #e4dfc4;
	--bg-deep:   #e2dcbe;
	--bg-hover:  #e3ddc1;
	--line:      #dcd5b3;
	--line-soft: #e1dbbc;

	--text:      #30302c;
	--dim:       #aeaa96;
	--dimmer:    #c5c1ab;

	--accent:      #888867;
	--accent-hi:   #a9a970;
	--accent-soft: rgba(136,136,103,.13);
	--amber:       #9d7525;

	--sel:    #d2ceb4;
	--sel-hi: #c4c0a4;
}

/* ── 2. reset y base ───────────────────────── */

*{ box-sizing:border-box; margin:0; padding:0 }
*{ scrollbar-width:none }
*{ transition:background-color .50s ease-in-out, color .30s ease-in-out, border-color .30s ease-in-out, fill .30s ease-in-out }
::-webkit-scrollbar{ width:0; height:0 }

html, body{ height:100dvh; overflow:hidden }

body{
	background:var(--bg);
	color:var(--text);
	font:400 var(--fs)/var(--lh) var(--mono);
	-webkit-font-smoothing:antialiased;
	font-variant-ligatures:none;
	user-select:none;
}

input, textarea{
	font:inherit; color:var(--text); background:transparent;
	border:none; outline:none; border-radius:var(--r);
	-webkit-appearance:none; appearance:none;
	user-select:text;
}
input::placeholder, textarea::placeholder{ color:var(--dimmer) }

::selection{ background:var(--sel-hi); color:#e6e4da }

body.bardrag, body.bardrag *{
	user-select:none !important; -webkit-user-select:none !important;
}

/* ── 3. esqueleto ──────────────────────────── */

#app{
	display:flex; flex-direction:column; height:100%;
	background:var(--bg-side);
	padding-top:   env(safe-area-inset-top);
	padding-right: env(safe-area-inset-right);
	padding-left:  env(safe-area-inset-left);
}
#main{
	display:flex; flex:1; min-height:0;
	background:var(--bg);
	border-top:1px solid var(--line);
}
#panes{ display:flex; flex:1; min-width:0 }

.gutter{
	flex:0 0 1px; position:relative; z-index:5;
	background:var(--line); touch-action:none;
}
.gutter::after{ content:""; position:absolute; inset:-3px }
.gutter-v{ cursor:col-resize }
.gutter-v::after{ inset:0 -3px }
.gutter-h{ cursor:row-resize; flex:0 0 1px; height:1px }
.gutter-h::after{ inset:-3px 0 }
.gutter:hover, .gutter.dragging{ background:var(--accent) }
.gutter[hidden]{ display:none }

/* ── 4. sidebar ────────────────────────────── */

#sidebar{
	flex:0 0 224px; min-width:120px; max-width:60vw;
	background:var(--bg-side);
	display:flex; flex-direction:column; min-height:0;
}
#sidebar[hidden]{ display:none }

#rootbar{
	flex:0 0 auto; padding:9px 12px 8px;
	color:var(--dim); font-size:11px; letter-spacing:.04em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	cursor:pointer;
}
#rootbar:hover{ color:var(--accent) }
#rootname{ color:var(--accent) }
#rootname .appname{ color:var(--dim) }

#tree{ flex:1; overflow-y:auto; padding:0 0 24px }

/* con una sola carpeta el árbol es idéntico al de siempre:
	 el encabezado y el estado activo solo existen bajo .multi */
.roothead{ display:none }

#tree.multi .roothead{
	display:flex; align-items:center; gap:7px;
	height:22px; margin-top:7px; padding:0 10px 0 8px;
	color:var(--dim); font-size:11px; letter-spacing:.04em;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	cursor:pointer; -webkit-touch-callout:none;
}
#tree.multi .rootblock:first-child .roothead{ margin-top:0 }
#tree.multi .roothead:hover{ color:var(--text) }
#tree.multi .rootblock.active > .roothead{ color:var(--dim) }
#tree.multi .rootblock:not(.active){ opacity:.55 }
#tree.multi .rootblock:not(.active):hover{ opacity:.8 }

/* contraer solo existe con varias carpetas: con una, el árbol
	 siempre se ve, aunque hayas dejado el bloque cerrado antes */
#tree.multi .rootblock:not(.open) .rootkids{ display:none }
/* los hijos arrancan donde arranca el nombre de la madre */
#tree.multi .rootkids{ padding-left:15px }
#tree .rootblock.open > .roothead .chev{ transform:rotate(90deg) }
#tree .roothead .chev{ margin:0 -3px 0 0; padding:0 3px }
#tree .roothead svg{
	width:13px; height:13px; flex:0 0 auto; color:var(--dimmer);
	fill:none; stroke:currentColor; stroke-width:1.6;
	stroke-linecap:round; stroke-linejoin:round;
}
#tree .rootblock.active > .roothead svg{ color:var(--accent) }

#dropzone{
	flex:0 0 auto; margin:6px 10px 10px; padding:14px 8px;
	border:1px dashed var(--amber); border-radius:var(--r);
	color:var(--amber); font-size:11px; text-align:center;
	opacity:.5; cursor:pointer; transition:opacity .15s, background .15s;
}
#dropzone[data-root]:not([data-root=""])::after{ content:" → " attr(data-root) }
#dropzone:hover, #dropzone.dragover{ opacity:1 }
#dropzone.dragover{ background:color-mix(in srgb, var(--amber) 12%, transparent) }
@media (hover:none){ #dropzone{ display:none } }

.row{
	display:flex; align-items:center; gap:7px;
	height:22px; padding-right:10px;
	color:var(--text); white-space:nowrap;
	cursor:default; border-radius:var(--r);
	-webkit-touch-callout:none;
}
.row:hover{ background:var(--bg-hover) }
.row.active{ background:var(--accent-soft); color:var(--accent-hi) }
.row.dir.picked > .name{ color:var(--accent-hi) }
.row.dir.dragover{ background:color-mix(in srgb, var(--amber) 16%, transparent); outline:1px dashed var(--amber); outline-offset:-1px }
.row.drop{ background:var(--accent-soft) }
.row .name{ overflow:hidden; text-overflow:ellipsis }
.row.dir .name{ color:var(--text) }
.row.file .name{ color:#b4b2a8 }

/* abierto en segundo plano vs. el que estás editando */
.row.file.loaded{ background:none }
.row.file.loaded .name{ color:#6d8a63 }
.row.file.active .name{ color:var(--accent-hi) }

.chev{
	flex:0 0 10px; color:var(--dimmer); font-size:9px;
	transition:transform .12s ease; transform-origin:50% 55%;
}
.row.open .chev{ transform:rotate(90deg) }

.ico{
	flex:0 0 15px; height:15px; border-radius:2px;
	display:grid; place-items:center;
	font-size:8.5px; letter-spacing:-.02em; line-height:1;
	background:#201f1c;
}

.nameinput{
	flex:1; min-width:0; height:19px; padding:0 3px;
	background:var(--bg-deep); border:1px solid var(--accent);
	border-radius:2px; caret-color:var(--accent-hi);
}

/* papelera */
#sidefoot{
	flex:0 0 auto; display:flex; flex-direction:column;
	padding:0 0 env(safe-area-inset-bottom);
}
#trashrow{
	display:flex; align-items:center; gap:7px;
	height:40px; padding:0 10px; color:color-mix(in srgb, var(--dim) 50%, var(--text) 50%);
	border-top:1px solid var(--line-soft); cursor:pointer;
}
#trashrow:hover{ color:var(--text) }
#trashrow .chev{ font-size:9px }
#trashrow.open .chev{ transform:rotate(90deg) }
#trashrow .count{ margin-left:auto; flex:0 0 auto; padding-left:6px; font-size:10px; color:var(--dimmer) }
#trashlist{ max-height:26vh; overflow-y:auto; padding-bottom:3px }
#trashlist .row{ color:var(--dim); height:24px }

/* ── 5. paneles de edición ─────────────────── */

.pane{
	flex:1; min-width:140px; min-height:0;
	display:flex; flex-direction:column; position:relative;
}
.pane[hidden]{ display:none }
.pane[data-pane="1"]{ flex:0 0 45% }
.pane.dragover{ box-shadow:inset 0 0 0 1px var(--accent) }

/* velo sobre el panel sin foco */
.pane::after{
	content:""; position:absolute; inset:0; z-index:9;
	background:var(--bg-hover); opacity:0; pointer-events:none;
	transition:opacity .12s ease;
}
.pane:not(.focused)::after{ opacity:.7 }

.tabs{
	flex:0 0 auto; display:flex; align-items:stretch;
	min-height:29px; overflow-x:auto;
	border-bottom:1px solid var(--line-soft);
}
.tab{
	display:flex; align-items:center; gap:7px;
	flex:1 1 0; min-width:118px;
	padding:0 11px; height:29px;
	color:var(--dim); white-space:nowrap; cursor:default;
	border-right:1px solid var(--line-soft);
}
.tab:hover{ color:var(--text) }
.tab.active{ color:var(--text); background:var(--bg); box-shadow:inset 0 -1px 0 var(--accent) }
.pane.focused .tab.active{ color:var(--accent-hi) }
.tab .label{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:11px; letter-spacing:.04em }
.tab .tabroot{ color:var(--dim); font-weight:400 }
.tab.active .tabroot{ opacity:.75 }
.tab .dot{
	margin-left:auto; width:5px; height:5px;
	border-radius:50%; background:var(--accent); opacity:0;
}
.tab.dirty .dot{ opacity:1 }
.tab .x{ color:var(--dimmer); font-size:11px; padding:0 1px }
.tab .x:hover{ color:var(--red) }

.editor{ flex:1; min-height:0; position:relative }
.editor .CodeMirror{ height:100% }

.empty{
	position:absolute; inset:29px 0 0 0;
	display:grid; place-items:center;
	color:var(--dimmer); font-size:11px; pointer-events:none;
}
.pane.has-file .empty{ display:none }

/* barra de scroll propia, sin inercia */
.vbar{
	position:absolute; top:0; right:0; bottom:0; width:11px;
	z-index:6; touch-action:none; opacity:0;
	transition:opacity .15s ease;
}
.vbar.vis{ opacity:1 }
.vthumb{
	position:absolute; top:0; right:3px; width:4px;
	border-radius:2px; background:#3a3a34;
}
.vbar:hover .vthumb{ background:#4f4f47 }
.vbar.on .vthumb{ background:var(--accent) }

.hbar{
	position:absolute; left:0; right:11px; bottom:0; height:11px;
	z-index:6; touch-action:none; opacity:0;
	transition:opacity .15s ease;
}
.hbar.vis{ opacity:1 }
.hthumb{
	position:absolute; left:0; bottom:3px; height:4px;
	border-radius:2px; background:#3a3a34;
}
.hbar:hover .hthumb{ background:#4f4f47 }
.hbar.on .hthumb{ background:var(--accent) }

/* ── 6. buscador ───────────────────────────── */

#search{
	flex:0 0 220px; min-height:90px; min-width:0;
	display:flex; flex-direction:column;
	background:var(--bg);
	border-top:.5px solid var(--line-soft);
}
#search[hidden]{ display:none }

#searchbar{ flex:0 0 auto; display:flex; padding:9px 12px 5px }

#q{
	flex:1; margin:0; padding:5px 8px;
	min-height:26px; max-height:120px;
	background:var(--bg-deep); border:1px solid var(--line);
	color:var(--text); -webkit-text-fill-color:var(--text);
	caret-color:var(--accent-hi);
	resize:none; overflow-y:auto; white-space:pre; line-height:1.5;
}
#q:focus{ outline:none; border-color:var(--accent) }

#results{ flex:1; overflow-y:auto; padding-bottom:10px }

.res{
	display:flex; gap:11px; padding:2px 12px;
	border-radius:var(--r); color:#b4b2a8; cursor:default;
	white-space:nowrap; overflow:hidden;
}
.res:hover{ background:var(--bg-hover) }
.res .rel{ flex:0 0 auto; max-width:34%; color:var(--dim); overflow:hidden; text-overflow:ellipsis }
.res .ln{ flex:0 0 auto; color:var(--dimmer) }
.res .tx{ flex:1; min-width:0; white-space:pre; overflow:hidden; text-overflow:ellipsis }
.res mark{ background:transparent; color:var(--accent-hi) }
.res-note{ padding:8px 12px; color:var(--dimmer); font-size:11px }

/* ── 7. diálogo abrir carpeta ──────────────── */

#dialog, #thememodal{
	position:fixed; inset:0; z-index:75;
	background:rgba(10,10,9,.55);
	display:grid; place-items:start center; padding-top:22vh;
}
#dialog[hidden], #thememodal[hidden]{ display:none }

.dialog-box{
	width:min(520px,80vw); padding:4px;
	background:var(--bg-side);
	border:1px solid var(--line); border-radius:var(--r);
}

#dcrumb{ display:flex; flex-wrap:wrap; align-items:center; padding:8px 8px 6px; font-size:11px }

#dtools{ display:flex; justify-content:space-between; align-items:center; padding:0 8px 8px }
.dtools-left{ display:flex; gap:4px }
#dtools button#dmore{ padding:0; width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; line-height:1 }
#dtools button{
	font:inherit; padding:4px 9px; border-radius:var(--r);
	border:1px solid var(--line); background:none; color:var(--dim); cursor:pointer;
}
#dtools button:hover{ color:var(--accent-hi); border-color:var(--accent) }

#dlist.dragover{ box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft) }
.crumb{ padding:3px 5px; border-radius:2px; color:var(--dim); cursor:default }
.crumb:hover{ color:var(--accent-hi); background:var(--bg-hover) }
.crumb.sep{ color:var(--dimmer); padding:3px 1px }
.crumb.sep:hover{ background:transparent; color:var(--dimmer) }

#dlist{
	max-height:44vh; overflow-y:auto;
	border-top:1px solid var(--line-soft);
	border-bottom:1px solid var(--line-soft);
}
.drow{ display:flex; align-items:center; gap:9px; padding:6px 12px; border-radius:var(--r); cursor:default }
.drow:hover{ background:var(--bg-hover) }
.drow .chev{ color:var(--dimmer); font-size:9px }
.dnote{ padding:9px 12px; color:var(--dimmer); font-size:11px }

#dhere, #dadd{ padding:9px 12px; color:var(--accent); border-radius:var(--r); cursor:default }

#dherow{ display:flex; gap:1px }
#dherow > *{ flex:1; min-width:0; display:flex; align-items:center; gap:8px }
#dherow .label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#dherow svg{
	width:14px; height:14px; flex:0 0 auto;
	fill:none; stroke:currentColor; stroke-width:1.6;
	stroke-linecap:round; stroke-linejoin:round;
}

/* el secundario: misma caja, menos peso */
#dadd{ color:var(--dim) }
#dadd:hover{ background:var(--accent-soft); color:var(--accent-hi) }
#dadd[hidden]{ display:none }
#dhere:hover{ background:var(--accent-soft); color:var(--accent-hi) }

#dpath{ width:100%; padding:9px 10px; border-top:1px solid var(--line-soft); caret-color:var(--accent-hi) }

#drecent{ max-height:220px; overflow-y:auto; padding:2px 0 3px }
.recent{
	padding:4px 10px; color:var(--dim); border-radius:var(--r); cursor:default;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent:hover{ background:var(--bg-hover); color:var(--accent-hi) }

#themelist{ display:flex; flex-direction:column; gap:6px; padding:6px }
.theme-row{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:9px 14px; border-radius:var(--r); cursor:pointer;
	transition:filter .12s ease, box-shadow .12s ease;
}
.theme-row:hover{ filter:brightness(1.15) }
.theme-swatches{ display:flex; align-items:center; gap:6px }
.theme-dot{ width:12px; height:12px; border-radius:1px; flex:0 0 auto }
.theme-row .name{ font-size:11px; opacity:.85 }

/* ── 8. menú contextual ────────────────────── */

.menu{
	position:fixed; z-index:80; min-width:172px; padding:3px;
	background:var(--bg-side); border:1px solid var(--line); border-radius:var(--r);
	box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.menu-item{
	display:flex; align-items:center; gap:9px;
	padding:6px 10px; border-radius:2px;
	color:var(--text); white-space:nowrap; cursor:pointer;
}
.menu-item:hover{ background:var(--accent-soft); color:var(--accent-hi) }
.menu-item.danger{ color:#a87a7a }
.menu-item.danger:hover{ background:rgba(196,90,90,.14); color:var(--red) }

.menu-item .mi{ flex:0 0 15px; height:15px; color:var(--dimmer) }
.menu-item:hover .mi{ color:var(--accent) }
.menu-item.danger .mi{ color:#8a6060 }
.menu-item.danger:hover .mi{ color:var(--red) }
.menu-item svg{
	width:15px; height:15px; fill:none;
	stroke:currentColor; stroke-width:1.5;
	stroke-linecap:round; stroke-linejoin:round;
}

/* ── 9. confirmación ───────────────────────── */

#confirm{
	position:fixed; inset:0; z-index:90; padding:20px;
	background:rgba(10,10,9,.6); display:grid; place-items:center;
}
#confirm[hidden]{ display:none }
.confirm-box{
	width:min(430px,92vw); padding:16px;
	background:var(--bg-side); border:1px solid var(--line); border-radius:var(--r);
}
#confirm-text{ margin-bottom:15px; color:var(--text) }
.confirm-acts{ display:flex; gap:8px; justify-content:flex-end }
.confirm-acts button{
	font:inherit; padding:6px 13px; border-radius:var(--r);
	border:1px solid var(--line); background:none; color:var(--dim); cursor:pointer;
}
.confirm-acts button:hover{ color:var(--text); border-color:var(--dimmer) }
.confirm-acts button.danger{ border-color:#553a3a; color:#bd8383 }
.confirm-acts button.danger:hover{ background:rgba(196,90,90,.14); color:var(--red) }

/* ── login (login.php) ─────────────────────── */

body.login{ display:grid; place-items:center }
.login-wrap{ display:grid; justify-items:center; gap:20px }
.k0dr-logo{
	font:600 22px/1 var(--mono);
	color:var(--accent-hi);
	white-space:nowrap; overflow:hidden;
	border-right:2px solid var(--accent-hi);
	width:5ch;
	animation:k0dr-type 900ms steps(5) 1 both, k0dr-blink 900ms step-end infinite;
}
@keyframes k0dr-type{ from{ width:0 } }
@keyframes k0dr-blink{ 50%{ border-color:transparent } }
.login-box{
	width:min(300px,92vw); padding:18px;
	background:var(--bg-side); border:1px solid var(--line); border-radius:var(--r);
	display:grid; gap:10px;
}
.login-box p{ color:var(--red); font-size:12px }
.login-box p.hint{ color:var(--dim) }
.login-box input{
	padding:9px 10px; border:1px solid var(--line); border-radius:var(--r);
	background:var(--bg-deep); caret-color:var(--accent-hi);
}
.login-box button{
	font:inherit; padding:8px 13px; border-radius:var(--r);
	border:1px solid var(--line); background:none; color:var(--dim); cursor:pointer;
}
.login-box button:hover{ color:var(--accent-hi); border-color:var(--accent) }

/* ── 10. aviso efímero ─────────────────────── */

#toast{
	position:fixed; right:14px; bottom:12px; z-index:60;
	padding:4px 9px; border-radius:var(--r);
	background:var(--bg-side); border:1px solid var(--line);
	color:var(--dim); font-size:11px;
	opacity:0; transition:opacity .25s ease;
}
#toast.on{ opacity:1 }
#toast.ok{ background:var(--accent); border-color:var(--accent); color:#15170f }

/* ── 11. barra móvil ───────────────────────── */

#mobar{ display:none }

/* ── 12. tema CodeMirror ───────────────────── */

.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler{ display:none !important }
.CodeMirror-scroll{ overscroll-behavior:contain }

.CodeMirror-gutters,
.CodeMirror-gutter,
.CodeMirror-gutter-wrapper,
.CodeMirror-linenumber{
	user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

.cm-s-claude.CodeMirror{ background:var(--bg); color:var(--text) }
.cm-s-claude .CodeMirror-gutters{ background:var(--bg); border:none; padding-right:6px }
.cm-s-claude .CodeMirror-cursor{ border-left:1.6px solid var(--accent-hi) }
.cm-s-claude .CodeMirror-activeline-background{ background:var(--bg-hover) }
.cm-s-claude .CodeMirror-matchingbracket{ color:var(--accent-hi) !important; border-bottom:1px solid var(--accent) }
.cm-s-claude .CodeMirror-nonmatchingbracket{ color:var(--red) !important }
.cm-s-claude .CodeMirror-lines{ padding-bottom:calc(24px + env(safe-area-inset-bottom)) }

/* selección: verde donde CodeMirror la dibuja (modo textarea:
	 escritorio siempre, iPad cuando hay trackpad/mouse conectado).
	 Con solo el dedo, iOS/iPadOS usan contenteditable y pintan
	 su celeste de sistema — ahí esto no aplica. */
.cm-s-claude div.CodeMirror-selected{ background:var(--sel) }
.cm-s-claude .CodeMirror-focused div.CodeMirror-selected{ background:var(--sel-hi) }
.cm-s-claude .CodeMirror-line::selection,
.cm-s-claude .CodeMirror-line ::selection,
.CodeMirror ::selection{ background:var(--sel-hi); color:inherit }

.cm-s-claude .cm-keyword,
.cm-s-claude .cm-atom,
.cm-s-claude .cm-def,
.cm-s-claude .cm-tag,
.cm-s-claude .cm-type,
.cm-s-claude .cm-builtin,
.cm-s-claude .cm-meta,
.cm-s-claude .cm-qualifier,
.cm-s-claude .cm-variable-2,
.cm-s-claude .cm-variable-3{ color:var(--blue) }

.cm-s-claude .cm-string,
.cm-s-claude .cm-string-2{ color:var(--green) }

.cm-s-claude .cm-number,
.cm-s-claude .cm-attribute{ color:var(--amber) }

.cm-s-claude .cm-comment{ color:var(--dimmer); font-style:italic }
.cm-s-claude .cm-error,
.cm-s-claude .cm-invalidchar{ color:var(--red) }

.cm-s-claude .cm-variable,
.cm-s-claude .cm-property{ color:var(--text) }
.cm-s-claude .cm-operator,
.cm-s-claude .cm-punctuation,
.cm-s-claude .cm-bracket{ color:#8a877c }
.cm-s-claude .cm-link{ color:var(--accent) }
.cm-s-claude .cm-header{ color:var(--blue) }
.cm-s-claude .cm-hr{ color:var(--dimmer) }

.CodeMirror-hints{
	font:400 var(--fs)/1.5 var(--mono);
	background:var(--bg-side);
	border:1px solid var(--line); border-radius:var(--r);
	box-shadow:none; padding:3px; max-height:200px; z-index:70;
}
.CodeMirror-hint{ color:var(--text); padding:1px 7px; border-radius:2px }
li.CodeMirror-hint-active{ background:var(--accent-soft); color:var(--accent-hi) }

/* ── 13. táctil ────────────────────────────── */

@media (hover:none){
	:root{ --fs:13.5px }

	.row{ height:31px }
	.tabs{ min-height:35px }
	.tab{ height:35px; min-width:132px }
	.tab .x{ color:var(--dim) }
	.empty{ inset:35px 0 0 0 }

	.drow{ padding:11px 12px }
	#dhere, #dadd{ padding:13px 12px }
	#dtools button{ padding:8px 12px }
	.recent{ padding:9px 10px }
	#dialog{ padding-top:8vh; overflow-y:auto }
	.dialog-box{ width:min(560px,92vw) }
	#dlist{ max-height:50vh }

	.gutter-v::after{ inset:0 -10px }
	.gutter-h::after{ inset:-10px 0 }
	.vbar{ width:18px }
	.vthumb{ right:6px; width:5px }
	.hbar{ height:18px; right:18px }
	.hthumb{ bottom:6px; height:5px }

	/* iOS no dispara click en divs sin cursor:pointer */
	.row, .tab, .tab .x, .res, .drow, .crumb, #dhere, #dadd, .roothead, .recent, #rootbar{ cursor:pointer }
}

/* ── 14. iPad y pantallas angostas ─────────── */

@media (hover:none) and (max-width:820px){
	#mobar{
		position:fixed; left:0; right:0; bottom:0; z-index:70;
		display:flex; justify-content:space-between; align-items:stretch;
		gap:2px; padding:7px 8px calc(7px + env(safe-area-inset-bottom));
		background:var(--bg-side);
		border-top:1px solid var(--line);
		transition:padding-bottom .16s ease;
	}
	#mobar button{
		flex:1 1 0; display:grid; place-items:center;
		height:auto; min-height:38px; padding:0; cursor:pointer;
		background:none; border:none; border-radius:var(--r);
		color:var(--dim);
	}
	#mobar button.hit{ background:var(--accent-soft); color:var(--accent-hi) }
	#mobar button.on{ color:var(--accent-hi) }
	#mobar [data-act="kb"]{ display:none }
	#mobar svg{
		width:20px; height:20px; fill:none;
		stroke:currentColor; stroke-width:1.5;
		stroke-linecap:round; stroke-linejoin:round;
	}

	/* que la barra no tape la última línea ni la papelera */
	#app{ padding-bottom:calc(52px + env(safe-area-inset-bottom)) }
	#sidefoot{ padding-bottom:0 }
	#toast{ bottom:calc(64px + env(safe-area-inset-bottom)) }
}

/* ── 15. iPhone ────────────────────────────── */

@media (hover:none) and (max-width:480px){
	/* la app se achica a lo que deja el teclado */
	#app{
		height:calc(100dvh - var(--kb));
		padding-bottom:0;
		border-bottom:1px solid var(--line);
	}

	/* el menú flota arriba: abajo pelea con el menú de iOS */
	#mobar{
		left:50%; right:auto; bottom:auto;
		top:calc(env(safe-area-inset-top) + 50px);
		transform:translateX(-50%);
		width:auto; max-width:calc(100vw - 20px);
		justify-content:flex-start; align-items:center;
		padding:5px;
		border:1px solid var(--line);
		border-radius:var(--r);
		box-shadow:0 10px 20px rgba(0,0,0,.30);
		transition:none;
	}
	#mobar button{ flex:0 0 38px; width:38px; height:38px; min-height:0 }
	#mobar [data-act="kb"]{ display:grid }

	#mobar.folded{ left:auto; right:20px; transform:none }
	#mobar.folded button:not([data-act="fold"]){ display:none }
	#mobar.folded [data-act="fold"] svg{ transform:rotate(180deg) }

	#toast{ bottom:calc(12px + env(safe-area-inset-bottom)) }

	/* aire y desvanecido para que Safari no corte el final */
	.cm-s-claude .CodeMirror-lines{ padding-bottom:96px }
	/* vertical con el dedo; horizontal solo con la barra */
	.editor .CodeMirror-scroll{
		overflow-x:hidden !important; overflow-y:scroll !important;
		touch-action:pan-y; overscroll-behavior:none;
	}
	#results{ padding-bottom:96px }
	.pane .editor::after{
		content:""; position:absolute; left:0; right:0; bottom:0;
		height:64px; z-index:5; pointer-events:none;
		background:linear-gradient(to top, var(--bg), rgba(26,26,24,0));
	}
}

#kbrow{
	display:flex; align-items:center; gap:8px;
	height:34px; padding:0 10px; color:color-mix(in srgb, var(--dim) 50%, var(--text) 50%);
	border-top:1px solid var(--line-soft); cursor:pointer;
}
#kbrow:hover{ color:var(--text) }
#kbrow .ki{
	width:15px; height:15px; opacity:.55;
	fill:none; stroke:currentColor; stroke-width:1.5;
	stroke-linecap:round; stroke-linejoin:round;
	transition:opacity .12s ease, color .12s ease;
}
#kbrow.on{ color:var(--accent-hi) }
#kbrow.on .ki{ opacity:1 }

@media (hover:hover){ #kbrow{ display:none } }

/* 
#previewrow .ki{ transform: translatey(0.8px) }
#themerow .ki{ transform: translatey(0.8px) }
#logoutrow .ki{ transform: translatey(0.8px) }
*/

/* ── vista previa ──────────────────────────── */
#recoprow, #previewrow, #logoutrow, #themerow{
	display:flex; align-items:center; gap:8px;
	height:34px; padding:0 10px; color:color-mix(in srgb, var(--dim) 50%, var(--text) 50%);
	border-top:1px solid var(--line-soft); cursor:pointer;
}
#recoprow:hover, #previewrow:hover, #logoutrow:hover, #themerow:hover{ color:var(--text) }
#recoprow .name, #previewrow .name, #logoutrow .name, #themerow .name,
#kbrow .name, #trashrow .name{
	min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#recoprow.on{ color:var(--accent-hi) }
#recoprow.on .ki{ opacity:1 }
#recoprow .ki, #previewrow .ki, #logoutrow .ki, #themerow .ki{
	width:14px; height:14px; flex:0 0 auto; opacity:.55; transform: translatey(0.5px);
	fill:none; stroke:currentColor; stroke-width:1.6;
	transition:opacity .12s ease, color .12s ease, fill .12s ease;
}
#previewrow.on{ color:var(--accent-hi) }
#previewrow.on .ki{ opacity:1; fill:currentColor;}

.preview-frame{
	position:absolute; inset:0; z-index:4;
	width:100%; height:100%;
	border:none; background:#fff;
}
.preview-frame[hidden]{ display:none }

.tab .prev-ico{ color:var(--accent-hi) }
.tab .prev-ico svg{ width:14px; height:14px; fill:currentColor }

#toast.up{ background:var(--amber); border-color:var(--amber); color:#15170f; font-variant-numeric:tabular-nums }

#toast.up::before{ border-color:rgba(0,0,0,.25) !important; border-top-color:#15170f !important }
#toast.busy::before, #toast.up::before{
  content:""; display:inline-block;
  width:9px; height:9px; margin-right:7px; vertical-align:-1px;
  border:1.5px solid var(--dimmer); border-top-color:var(--accent-hi);
  border-radius:50%; animation:kspin .7s linear infinite;
}
@keyframes kspin{ to{ transform:rotate(360deg) } }

@media (hover:none) and (max-width:480px){
	#kbrow, #previewrow{ display:none }
}

@media (hover:none) and (max-width:480px){
	#kbrow, #previewrow{ display:none }
}