/* ==========================================================================================================================
   CASA DE LEÓN AI · negro y oro — c8l-casa-0810 (Claude Code, 08/10/2026). Leo: «así quiero que se vea, como la foto».
   Va DESPUÉS de leon-ide.css y no la reescribe: pone el armazón nuevo (menú a la izquierda, centro, chat a la derecha con la caja de
   escribir abajo y fija) y la paleta de la orden. El chat, la mesa y sus páginas son los de siempre: solo cambian de sitio.
   ========================================================================================================================== */
:root {
  --cl-fondo: #101113;
  --cl-panel: #191b1e;
  --cl-panel-2: #15171a;
  --cl-borde: rgba(212, 175, 55, 0.16);
  --cl-borde-suave: rgba(255, 255, 255, 0.07);
  --cl-oro: #d4af37;
  --cl-oro-luz: #f4c95d;
  --cl-oro-osc: #8c681f;
  --cl-texto: #f5f5f3;
  --cl-texto-2: #a8a9ad;
  --cl-verde: #3ccf7a;
  --cl-rojo: #ff6b6b;
  --cl-nav-w: 236px;
  --cl-chat-w: 420px;
  --cl-cab-h: 64px;
  --cl-mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}

/* --- Barras de desplazamiento con la marca (nunca blancas) --- */
* { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.35) #0b0c0e; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0b0c0e; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.28); border-radius: 4px; }

html, body { background: var(--cl-fondo) !important; color: var(--cl-texto); }
body.casa-0810 #fondo { display: none; }

/* --- Cabecera como la foto: marca, buscador, «Nuevo chat», usuario --- */
body.casa-0810 .cab {
  height: var(--cl-cab-h); background: rgba(16, 17, 19, 0.96); border-bottom: 1px solid var(--cl-borde-suave);
  display: flex; align-items: center; gap: 14px; padding: 0 16px; position: relative; z-index: 30;
}
body.casa-0810 .cab .marca { width: 40px; height: 40px; flex-shrink: 0; }
/* en la Casa de León, su marca fija: el cristal C8L en oro (los seis logotipos ya no rotan aquí) */
body.casa-0810 .cab .marca img { opacity: 0 !important; visibility: hidden !important; }
body.casa-0810 .cab .marca img[src*="os-oro"] { opacity: 1 !important; visibility: visible !important; }
body.casa-0810 .cab .titulo b { font-size: 19px; letter-spacing: 0.01em; color: var(--cl-texto); text-transform: none; }
body.casa-0810 .cab .titulo span { font-size: 10.5px; letter-spacing: 0.22em; color: var(--cl-oro); text-transform: uppercase; }
.cl-buscar {
  flex: 1 1 auto; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px;
  background: var(--cl-panel); border: 1px solid var(--cl-borde-suave); border-radius: 12px; color: var(--cl-texto-2); cursor: pointer;
  font: inherit; font-size: 14px; text-align: left;
}
.cl-buscar:hover { border-color: var(--cl-borde); }
.cl-buscar kbd { margin-left: auto; font: 11px var(--cl-mono); border: 1px solid var(--cl-borde-suave); border-radius: 6px; padding: 2px 6px; color: var(--cl-texto-2); }
.cl-nuevo {
  min-height: 42px; padding: 0 16px; border-radius: 11px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  background: linear-gradient(180deg, var(--cl-oro-luz), var(--cl-oro)); color: #1a1406; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}
.cl-nuevo:hover { filter: brightness(1.06); }
.cl-yo {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cl-oro); color: var(--cl-oro); display: grid; place-items: center;
  font-weight: 800; background: transparent; flex-shrink: 0; cursor: default;
}
.cl-hamb { display: none; }
body.casa-0810 .cab .estado { font-size: 11px; color: var(--cl-texto-2); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.casa-0810 #taller-btn, body.casa-0810 #unicornio, body.casa-0810 #cmd-btn { display: none !important; }

/* --- El armazón: menú | centro | chat --- */
body.casa-0810 .cuerpo {
  display: grid !important; grid-template-columns: var(--cl-nav-w) minmax(0, 1fr) var(--cl-chat-w);
  grid-template-areas: "nav centro chat"; height: calc(100dvh - var(--cl-cab-h)); overflow: hidden; background: var(--cl-fondo);
}
body.casa-0810 .riel { display: none !important; }
.cl-nav { grid-area: nav; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--cl-borde-suave); overflow-y: auto; background: var(--cl-fondo); }
.cl-nav button.cl-item {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 8px; text-align: left; padding: 9px 10px; min-height: 52px;
  border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--cl-texto); cursor: pointer; font: inherit;
}
.cl-nav button.cl-item .ic { grid-row: 1 / 3; font-size: 20px; color: var(--cl-oro); display: grid; place-items: center; }
.cl-nav button.cl-item b { font-size: 14.5px; font-weight: 650; }
.cl-nav button.cl-item small { font-size: 12px; color: var(--cl-texto-2); }
.cl-nav button.cl-item:hover { background: var(--cl-panel); }
.cl-nav button.cl-item.on { background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.05)); border-color: var(--cl-borde); box-shadow: inset 3px 0 0 var(--cl-oro); }
.cl-nav h4 { margin: 14px 10px 6px; font-size: 11px; letter-spacing: 0.12em; color: var(--cl-texto-2); text-transform: uppercase; font-weight: 600; }
.cl-nav .cl-esp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--cl-texto); font-size: 14px; border-radius: 10px; min-height: 40px; background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.cl-nav .cl-esp:hover { background: var(--cl-panel); }
.cl-nav .cl-esp .punto { margin-left: auto; font-size: 11.5px; color: var(--cl-verde); }
.cl-nav .cl-tarjeta { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--cl-borde-suave); border-radius: 14px; background: var(--cl-panel-2); }
.cl-nav .cl-tarjeta img { width: 42px; height: 42px; border-radius: 10px; }
.cl-nav .cl-tarjeta p { margin: 0; font-size: 12px; color: var(--cl-texto-2); line-height: 1.45; }

.cl-centro { grid-area: centro; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--cl-fondo); }
.cl-panel { display: none; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 22px; }
.cl-panel.on { display: block; }
.cl-panel h2 { margin: 0 0 4px; font-size: 22px; color: var(--cl-texto); }
.cl-panel .sub { margin: 0 0 16px; color: var(--cl-texto-2); font-size: 13.5px; }
.cl-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cl-tarjeta2 { background: var(--cl-panel); border: 1px solid var(--cl-borde-suave); border-radius: 14px; padding: 14px; }
.cl-tarjeta2 h3 { margin: 0 0 6px; font-size: 15px; color: var(--cl-oro-luz); }
.cl-tarjeta2 p { margin: 0 0 8px; font-size: 13px; color: var(--cl-texto-2); line-height: 1.5; overflow-wrap: anywhere; }
.cl-tarjeta2 .ok { color: var(--cl-verde); } .cl-tarjeta2 .mal { color: var(--cl-rojo); }
.cl-boton { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--cl-borde); background: var(--cl-panel-2); color: var(--cl-oro-luz); cursor: pointer; font: inherit; font-size: 13.5px; }
.cl-boton:hover { border-color: var(--cl-oro); }
.cl-boton.oro { background: linear-gradient(180deg, var(--cl-oro-luz), var(--cl-oro)); color: #1a1406; border: 0; font-weight: 700; }
.cl-boton:disabled { opacity: 0.5; cursor: not-allowed; }
.cl-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cl-lista { display: flex; flex-direction: column; gap: 6px; }
.cl-lista button { text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--cl-borde-suave); background: var(--cl-panel); color: var(--cl-texto); font: inherit; font-size: 13.5px; cursor: pointer; }
.cl-lista button:hover, .cl-lista button.on { border-color: var(--cl-borde); }
.cl-pronto { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--cl-borde); color: var(--cl-oro); }

/* La mesa de siempre (Taller, Entregables, Herramientas…) se abre en el CENTRO */
body.casa-0810 #mesa { grid-area: centro; position: relative !important; inset: auto !important; width: auto !important; max-width: none !important;
  height: 100% !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: var(--cl-fondo) !important; z-index: 1; }
body.casa-0810 #mesa.cerrada { display: none !important; }
body.casa-0810.vista-mesa .cl-centro { display: none; }

/* --- El chat de León a la derecha: mensajes arriba, caja de escribir abajo y fija --- */
body.casa-0810 #chat {
  grid-area: chat; position: relative !important; display: flex !important; flex-direction: column; min-height: 0; height: 100%; width: auto !important;
  border-left: 1px solid var(--cl-borde-suave); background: var(--cl-fondo) !important; max-width: none !important; margin: 0 !important;
}
.cl-chat-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cl-borde-suave); flex-shrink: 0; }
.cl-chat-cab img { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cl-oro); object-fit: cover; background: #000; }
.cl-chat-cab b { font-size: 17px; }
.cl-chat-cab .vivo { font-size: 12px; color: var(--cl-verde); margin-left: 6px; }
.cl-chat-cab small { display: block; font-size: 12px; color: var(--cl-texto-2); }
.cl-chat-cab .cl-cerrar-chat { display: none; margin-left: auto; }
body.casa-0810 #chat .hilo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; }
body.casa-0810 #chat .compositor {
  position: relative !important; flex-shrink: 0; margin: 0 !important; border-radius: 0 !important; border: 0 !important;
  border-top: 1px solid var(--cl-borde-suave) !important; background: var(--cl-panel-2) !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; transform: none !important;
}
body.casa-0810 #chat .servicios-barra { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
body.casa-0810 #chat .servicios-barra::-webkit-scrollbar { display: none; }
body.casa-0810 #chat textarea#entrada { font-size: 16px; min-height: 48px; max-height: 30dvh; background: var(--cl-fondo); border: 1px solid var(--cl-borde-suave); border-radius: 12px; color: var(--cl-texto); }
body.casa-0810 #chat textarea#entrada:focus { border-color: var(--cl-oro); outline: none; }
body.casa-0810 #chat .enviar { background: linear-gradient(180deg, var(--cl-oro-luz), var(--cl-oro)) !important; color: #1a1406 !important; }
body.casa-0810 .msg.yo { background: rgba(212, 175, 55, 0.10); border: 1px solid var(--cl-borde); }

/* Chats a pantalla: la conversación ocupa el centro y la derecha */
body.casa-0810.vista-chats .cuerpo { grid-template-areas: "nav chat chat"; }
body.casa-0810.vista-chats .cl-centro { display: none; }

/* --- IDE: proyecto y explorador | pestañas y editor | terminal abajo --- */
.cl-ide { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.cl-ide.on { display: flex; }
.cl-ide-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--cl-borde-suave); min-height: 52px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.cl-ide-cab .cl-boton, .cl-ide-cab select { flex-shrink: 0; white-space: nowrap; }
/* el chat plegado en el IDE: el código se queda con su ancho */
body.casa-0810.vista-ide.chat-plegado .cuerpo { grid-template-columns: var(--cl-nav-w) minmax(0, 1fr) 0; }
body.casa-0810.vista-ide.chat-plegado #chat { display: none !important; }
/* portátil con el chat abierto: la barra del IDE cabe en una fila */
@media (max-width: 1700px) {
  body.casa-0810.vista-ide:not(.chat-plegado) .cl-ide-cab .cl-ruta { display: none; }
  body.casa-0810.vista-ide:not(.chat-plegado) .cl-ide-cab .cl-boton { min-height: 36px; padding: 0 10px; font-size: 12.5px; }
  body.casa-0810.vista-ide:not(.chat-plegado) .cl-ide-cab select { max-width: 200px; }
}
.cl-ide-cab select { min-height: 38px; max-width: 320px; background: var(--cl-panel); color: var(--cl-texto); border: 1px solid var(--cl-borde-suave); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13px; }
.cl-ruta { color: var(--cl-texto-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.cl-ruta b { color: var(--cl-texto); font-weight: 600; }
.cl-ide-cuerpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.cl-explorador { border-right: 1px solid var(--cl-borde-suave); overflow: auto; padding: 8px 6px; font-size: 13.5px; min-height: 0; }
.cl-explorador .cl-exp-cab { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; font-weight: 700; letter-spacing: 0.04em; font-size: 12.5px; color: var(--cl-texto-2); text-transform: uppercase; }
.cl-explorador .cl-exp-tit { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-explorador .cl-exp-cab button { flex-shrink: 0; min-width: 32px; min-height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--cl-oro); cursor: pointer; font-size: 16px; }

.cl-explorador .cl-exp-cab button:hover { border-color: var(--cl-borde); }
.cl-nodo { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 6px; border-radius: 7px; cursor: pointer; color: var(--cl-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.cl-nodo:hover { background: var(--cl-panel); }
.cl-nodo.on { background: rgba(212, 175, 55, 0.14); color: var(--cl-oro-luz); }
.cl-nodo .flecha { width: 14px; color: var(--cl-texto-2); flex-shrink: 0; font-size: 10px; }
.cl-nodo .tipo { width: 16px; flex-shrink: 0; color: var(--cl-oro); font-size: 12px; text-align: center; }
.cl-editor-zona { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cl-pestanas { display: flex; overflow-x: auto; border-bottom: 1px solid var(--cl-borde-suave); background: var(--cl-panel-2); flex-shrink: 0; scrollbar-width: none; }
.cl-pestanas::-webkit-scrollbar { display: none; }
.cl-pes { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 12px; color: var(--cl-texto-2); cursor: pointer; white-space: nowrap; font-size: 13px; border-top: 2px solid transparent; border-right: 1px solid var(--cl-borde-suave); }
.cl-pes.on { color: var(--cl-texto); background: var(--cl-fondo); border-top-color: var(--cl-oro); }
.cl-pes.sucio .nom::after { content: " ●"; color: var(--cl-oro); }
.cl-pes .x { min-width: 28px; min-height: 28px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 6px; font-size: 14px; }
.cl-pes .x:hover { background: rgba(255, 255, 255, 0.08); }
.cl-monaco { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
.cl-vacio { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--cl-texto-2); padding: 20px; font-size: 14px; line-height: 1.6; }
.cl-abajo { height: 220px; flex-shrink: 0; border-top: 1px solid var(--cl-borde-suave); display: flex; flex-direction: column; min-height: 0; background: #0b0c0e; }
.cl-abajo.plegado { height: 38px; }
.cl-abajo-pes { display: flex; align-items: center; gap: 2px; padding: 0 6px; min-height: 38px; border-bottom: 1px solid var(--cl-borde-suave); flex-shrink: 0; }
.cl-abajo-pes button { min-height: 34px; padding: 0 12px; border: 0; background: none; color: var(--cl-texto-2); cursor: pointer; font: inherit; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.cl-abajo-pes button.on { color: var(--cl-texto); border-bottom-color: var(--cl-oro); }
.cl-abajo-pes .hueco { flex: 1; }
.cl-abajo-cuerpo { flex: 1 1 auto; min-height: 0; position: relative; }
.cl-abajo-cuerpo > div { position: absolute; inset: 0; display: none; overflow: auto; }
.cl-abajo-cuerpo > div.on { display: block; }
.cl-term { padding: 4px 8px; }
.cl-problemas, .cl-resultados { padding: 8px 12px; font: 12.5px var(--cl-mono); color: var(--cl-texto-2); }
.cl-problemas div, .cl-resultados div { padding: 3px 0; cursor: pointer; }
.cl-problemas div:hover, .cl-resultados div:hover { color: var(--cl-texto); }
.cl-estado-barra { display: flex; gap: 14px; align-items: center; padding: 0 12px; min-height: 26px; font-size: 11.5px; color: var(--cl-texto-2); border-top: 1px solid var(--cl-borde-suave); flex-shrink: 0; white-space: nowrap; overflow: hidden; }
.cl-estado-barra .der { margin-left: auto; display: flex; gap: 14px; }
.cl-vista-previa { width: 100%; height: 100%; border: 0; background: #fff; }
.cl-dialogo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; z-index: 200; padding: 16px; }
.cl-dialogo > div { background: var(--cl-panel); border: 1px solid var(--cl-borde); border-radius: 16px; padding: 18px; width: min(520px, 100%); max-height: 85dvh; overflow: auto; }
.cl-dialogo h3 { margin: 0 0 10px; color: var(--cl-oro-luz); }
.cl-dialogo input, .cl-dialogo select { width: 100%; min-height: 44px; margin: 6px 0 12px; background: var(--cl-fondo); color: var(--cl-texto); border: 1px solid var(--cl-borde-suave); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; box-sizing: border-box; }
.cl-aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--cl-panel); border: 1px solid var(--cl-borde); color: var(--cl-texto); padding: 10px 16px; border-radius: 12px; z-index: 300; font-size: 13.5px; max-width: calc(100vw - 32px); }

/* --- Barra móvil (solo pantallas pequeñas) --- */
.cl-movil { display: none; }

/* === Tableta y portátil estrecho: menú solo con iconos === */
@media (max-width: 1280px) {
  :root { --cl-nav-w: 72px; --cl-chat-w: 360px; }
  .cl-nav button.cl-item { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; }
  .cl-nav button.cl-item b { font-size: 10.5px; font-weight: 600; }
  .cl-nav button.cl-item small, .cl-nav h4, .cl-nav .cl-esp, .cl-nav .cl-tarjeta { display: none; }
  .cl-nav button.cl-item .ic { grid-row: auto; }
  .cl-ide-cuerpo { grid-template-columns: 190px minmax(0, 1fr); }
  .cl-ide-cab .cl-ruta { display: none; }
  .cl-ide-cab .cl-boton { min-height: 36px; padding: 0 10px; font-size: 12.5px; }
  .cl-ide-cab select { max-width: 220px; }
}

/* === Móvil (vertical) y móvil tumbado: una vista cada vez; barra abajo; el chat es una vista más === */
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  :root { --cl-cab-h: 56px; --cl-movil-h: 58px; }
  body.casa-0810 .cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "centro"; height: calc(100dvh - var(--cl-cab-h) - var(--cl-movil-h) - env(safe-area-inset-bottom, 0px)); }
  .cl-nav { position: fixed; top: var(--cl-cab-h); left: 0; bottom: 0; width: min(300px, 86vw); z-index: 120; transform: translateX(-102%); transition: transform 0.2s ease; background: var(--cl-fondo); box-shadow: 8px 0 30px rgba(0, 0, 0, 0.6); }
  body.nav-abierto .cl-nav { transform: none; }
  .cl-nav button.cl-item { grid-template-columns: 34px 1fr; justify-items: start; padding: 9px 10px; }
  .cl-nav button.cl-item .ic { grid-row: 1 / 3; }
  .cl-nav button.cl-item b { font-size: 14.5px; }
  .cl-nav button.cl-item small, .cl-nav h4, .cl-nav .cl-esp { display: initial; }
  .cl-nav .cl-esp { display: flex; }
  .cl-hamb { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--cl-borde-suave); background: var(--cl-panel); color: var(--cl-oro); font-size: 20px; cursor: pointer; }
  .cl-buscar { max-width: none; min-width: 44px; padding: 0 12px; }
  .cl-buscar span, .cl-buscar kbd { display: none; }
  .cl-nuevo span { display: none; }
  .cl-nuevo { padding: 0 12px; min-width: 44px; justify-content: center; }
  body.casa-0810 .cab .titulo span, body.casa-0810 .cab .estado, .cl-yo { display: none; }
  body.casa-0810 .cab .titulo b { font-size: 16px; }
  body.casa-0810 .cab { gap: 8px; padding: 0 10px; }
  /* el chat es una vista: en «Chat» ocupa la pantalla; en las demás se oculta */
  body.casa-0810 #chat { grid-area: centro; display: none !important; border-left: 0; }
  body.casa-0810.vista-chats #chat { display: flex !important; }
  body.casa-0810.vista-chats .cuerpo { grid-template-areas: "centro"; }
  .cl-chat-cab { padding: 8px 12px; } .cl-chat-cab img { width: 34px; height: 34px; }
  .cl-panel { padding: 14px 12px; }
  /* IDE en el móvil: Archivos | Código | Terminal, una cada vez */
  .cl-ide-cuerpo { grid-template-columns: minmax(0, 1fr); }
  #cl-b-chat { display: none; }
  body.casa-0810.vista-ide.chat-plegado .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cl-explorador { display: none; border-right: 0; }
  body.ide-archivos .cl-explorador { display: block; }
  body.ide-archivos .cl-editor-zona { display: none; }
  .cl-abajo { display: none; height: auto; flex: 1 1 auto; }
  body.ide-terminal .cl-abajo { display: flex; }
  body.ide-terminal .cl-monaco, body.ide-terminal .cl-pestanas { display: none; }
  .cl-ide-sub { display: flex !important; }
  /* la barra del IDE en una sola fila que se desliza (medido en 812×375: con dos filas el editor se quedaba en 97 px) */
  .cl-ide-cab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px 8px; min-height: 0; }
  .cl-ide-cab::-webkit-scrollbar { display: none; }
  .cl-ide-cab select { max-width: 46vw; flex-shrink: 0; }
  .cl-ide-cab .cl-ruta { display: none; }
  .cl-ide-cab .cl-boton { flex-shrink: 0; white-space: nowrap; }
  .cl-estado-barra .der span:not(:first-child) { display: none; }
  .cl-movil {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--cl-movil-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(16, 17, 19, 0.97); border-top: 1px solid var(--cl-borde-suave); z-index: 110; justify-content: space-around; align-items: stretch;
  }
  .cl-movil button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; background: none; border: 0; color: var(--cl-texto-2); font: inherit; font-size: 11px; cursor: pointer; }
  .cl-movil button .ic { font-size: 19px; }
  .cl-movil button.on { color: var(--cl-oro-luz); }
  /* la mesa de siempre, a pantalla */
  body.casa-0810 #mesa { grid-area: centro; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --cl-cab-h: 46px; --cl-movil-h: 46px; }
  .cl-movil button { flex-direction: row; gap: 6px; font-size: 12px; }
  .cl-chat-cab { display: none; }
  .cl-ide-cab .cl-boton, .cl-ide-cab select { min-height: 36px; font-size: 12.5px; }
  .cl-ide-sub { padding: 4px 8px; } .cl-ide-sub button { min-height: 34px; }
  .cl-estado-barra { display: none; }
  body.casa-0810 #chat textarea#entrada { min-height: 44px; }
  body.casa-0810 #chat .servicios-barra { display: none !important; }
}
.cl-ide-sub { display: none; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--cl-borde-suave); }
.cl-ide-sub button { flex: 1; min-height: 40px; border-radius: 9px; border: 1px solid var(--cl-borde-suave); background: var(--cl-panel); color: var(--cl-texto-2); font: inherit; font-size: 13px; cursor: pointer; }
.cl-ide-sub button.on { color: var(--cl-oro-luz); border-color: var(--cl-borde); }
@media (prefers-reduced-motion: reduce) { .cl-nav { transition: none; } }

/* --- iconos a lápiz dentro del IDE (§0.6 bis): trazo fino, sin relleno, el color lo pone quien los usa --- */
.cl-explorador .cl-exp-cab button, .cl-pes .x, .cl-abajo-pes button[data-ab="plegar"] { display: inline-grid; place-items: center; }
.cl-explorador .cl-exp-cab button i, .cl-pes .x i, .cl-abajo-pes i, .cl-hamb i, #mesa .cerrar i, .cl-nodo i { display: inline-grid; place-items: center; font-style: normal; line-height: 0; }
.cl-nodo .flecha { display: inline-grid; place-items: center; transition: transform .15s; transform: rotate(-90deg); }
.cl-nodo .flecha.abierta { transform: none; }
.cl-nodo .tipo { display: inline-grid; place-items: center; width: 18px; }
.cl-nodo .nombre { overflow: hidden; text-overflow: ellipsis; }

/* === TELÉFONO (Leo, 08/10: «revisa la versión para teléfonos y ajústalo») ===================================================
   La caja de escribir pasa de cuatro filas a tres (vertical) y a UNA (horizontal): la conversación se queda con la pantalla.
   Todo lo que se toca, 44 px de dedo. Las cajas de texto ocultas del editor y de la terminal a 16 px: así el iPhone no amplía
   la página al escribir. */
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  body.casa-0810 #chat .compositor { display: flex !important; flex-direction: column; gap: 8px; }
  body.casa-0810 #chat .cl-escribir { display: flex; gap: 8px; align-items: flex-end; min-width: 0; }
  body.casa-0810 #chat .cl-escribir textarea#entrada { flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 30dvh; font-size: 16px; margin: 0 !important; }
  body.casa-0810 #chat .compositor .fila { display: flex !important; flex-wrap: nowrap !important; gap: 8px; align-items: center; min-width: 0; }
  body.casa-0810 #chat .compositor .fila .hueco { display: none; }
  body.casa-0810 #chat .compositor .fila label.selector { min-width: 0; flex: 0 1 auto; }
  body.casa-0810 #chat .compositor .fila label.selector.quien { flex: 1 1 0; }
  body.casa-0810 #chat .compositor label.selector.quien .quien-lbl { display: none; }
  body.casa-0810 #chat .compositor label.selector select { min-height: 44px; max-width: 100%; }
  body.casa-0810 #chat #enviar { width: 48px; height: 48px; min-width: 48px; flex-shrink: 0; }
  body.casa-0810 #chat .redondo { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; }
  body.casa-0810 #chat .btn-servicio { min-height: 44px; }
  body.casa-0810 .btn-idea { min-height: 44px; }
  /* dedos de 44 px en el IDE y en las páginas de la mesa */
  .cl-explorador .cl-exp-cab button { min-width: 44px; min-height: 44px; }
  .cl-nodo { min-height: 44px; }
  .cl-pes .x { min-width: 44px; min-height: 44px; }
  .cl-abajo-pes { overflow-x: auto; scrollbar-width: none; }
  .cl-abajo-pes button { min-height: 44px; white-space: nowrap; flex-shrink: 0; }
  body.casa-0810 #mesa .entregable-nom { display: inline-block; padding: 11px 0; }
  body.casa-0810 #mesa #btn-refrescar, body.casa-0810 #mesa .btn-refrescar, body.casa-0810 #mesa a { min-height: 44px; display: inline-flex; align-items: center; }
  /* el iPhone no amplía la página al tocar el editor o la terminal */
  .monaco-editor textarea.inputarea, .xterm .xterm-helper-textarea { font-size: 16px !important; }
  /* la barra del IDE se desliza: una sombra a la derecha avisa de que hay más botones */
  .cl-ide-cab { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 28px; }
}
/* tumbado: una sola fila para escribir, y en el IDE sin la cabecera grande (el menú sigue en la barra de abajo) */
@media (max-height: 520px) and (orientation: landscape) {
  body.casa-0810 #chat .compositor { flex-direction: row; align-items: flex-end; padding-top: 6px !important; padding-bottom: 6px !important; }
  body.casa-0810 #chat .compositor .fila { flex: 0 0 auto; order: 1; }
  body.casa-0810 #chat .compositor label.selector.quien { flex: 0 1 130px; max-width: 130px; }
  body.casa-0810 #chat .cl-escribir { flex: 1 1 0; order: 2; }
  body.casa-0810 #chat .cl-escribir textarea#entrada { min-height: 44px; max-height: 88px; }
  body.casa-0810.vista-ide .cab { display: none !important; }
  body.casa-0810.vista-ide .cuerpo { height: calc(100dvh - var(--cl-movil-h) - env(safe-area-inset-bottom, 0px)) !important; }
}

/* --- la web, sin cuenta: entrar antes de usar el IDE --- */
.cl-entrar { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 18px 12px; color: var(--cl-texto-2); font-size: 13.5px; line-height: 1.5; }
.cl-entrar b { color: var(--cl-oro-luz); font-size: 15px; }
.cl-entrar a.cl-boton { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* --- la cabecera de cada respuesta: el nombre no se parte; las etiquetas de la ruta bajan si no caben --- */
body.casa-0810 #chat .msg.ia .quien { flex-wrap: wrap; row-gap: 4px; }
body.casa-0810 #chat .msg.ia .quien > b { white-space: nowrap; }

/* --- la vista previa: grande, y con su botón para abrirla en una pestaña --- */
.cl-abajo.grande { height: 58%; }
.cl-vista-caja { position: relative; }
.cl-vista-fuera { position: absolute; right: 12px; bottom: 12px; min-height: 40px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) { .cl-abajo.grande { height: auto; } .cl-vista-fuera { min-height: 44px; } }

/* --- ventana baja: el menú lateral se desplaza; sus entradas nunca se aplastan unas sobre otras --- */
.cl-nav { overflow-y: auto; min-height: 0; }
.cl-nav button.cl-item, .cl-nav .cl-esp, .cl-nav .cl-tarjeta, .cl-nav h4 { flex-shrink: 0; }