/* Documentos por bloques (F1): la lista, la galeria "Nuevo" y el editor. Solo tokens de cuarto-oscuro.css:
   ningun color escrito a mano. Lo IMPRESO no vive aqui: es el papel de src/doc-render.js (fuera de Cuarto Oscuro a
   proposito, como contratos y recibos). */
.dx-pag{ display:flex; flex-direction:column; gap:var(--e-4); max-width:960px; }
.dx-cab{ display:flex; align-items:center; gap:var(--e-3); }
.dx-cab h1{ flex:1; margin:0; font-size:var(--t-titulo); color:var(--tinta); }
.dx-filtros{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.dx-filtros .dx-sep{ width:var(--e-4); }
.dx-pil{ border:1px solid var(--linea); background:transparent; color:var(--texto); border-radius:var(--r-pildora); padding:var(--e-2) var(--e-3); font:inherit; font-size:var(--t-texto); cursor:pointer; min-height:36px; }
.dx-pil.on{ background:var(--boton); color:var(--boton-t); border-color:var(--boton); }
.dx-grupo{ font-size:var(--t-meta); color:var(--apagado); margin-top:var(--e-2); }
.dx-filas{ display:flex; flex-direction:column; }
.dx-fila{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-3) var(--e-2); border:0; border-radius:var(--r); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; width:100%; }
.dx-fila:hover{ background:var(--piedra); }
.dx-ico{ width:34px; height:34px; border-radius:var(--r); background:var(--piedra); display:flex; align-items:center; justify-content:center; color:var(--medio); flex:none; }
.dx-fila .dx-t{ font-size:var(--t-texto); color:var(--tinta); }
.dx-fila .dx-m{ font-size:var(--t-meta); color:var(--apagado); }
.dx-fila .dx-txt{ flex:1; min-width:0; }
.dx-tag{ font-size:var(--t-meta); color:var(--medio); background:var(--piedra); border-radius:var(--r-pildora); padding:2px var(--e-3); white-space:nowrap; }
.dx-vacio{ padding:var(--e-6) 0; color:var(--medio); font-size:var(--t-texto); }
.dx-galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--e-3); }
.dx-carta{ text-align:left; background:var(--piedra); border:0; border-radius:var(--r-flota); padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-2); min-height:120px; font:inherit; color:inherit; cursor:pointer; }
.dx-carta:hover{ background:var(--piedra-on); }
.dx-carta .dx-t{ font-size:var(--t-texto); color:var(--tinta); font-weight:500; }
.dx-carta .dx-m{ font-size:var(--t-meta); color:var(--medio); line-height:1.45; }

/* Editor */
.dx-ed{ display:flex; flex-direction:column; gap:var(--e-3); container-type:inline-size; }
.dx-ed-cuerpo{ display:flex; gap:var(--e-4); align-items:flex-start; }
.dx-mesa{ flex:1; min-width:0; background:var(--piedra); border-radius:var(--r); padding:var(--e-4); display:flex; height:calc(100vh - 160px); min-height:480px; align-self:stretch; }
.dx-mesa iframe{ flex:1; width:100%; border:0; border-radius:var(--r); background:var(--piedra); }
.dx-panel{ width:290px; flex:none; display:flex; flex-direction:column; gap:var(--e-3); overflow:auto; }
.dx-caja{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-2); }
.dx-caja h3{ margin:0; font-size:var(--t-meta); font-weight:500; color:var(--apagado); }
.dx-caja label{ display:flex; flex-direction:column; gap:var(--e-1); font-size:var(--t-meta); color:var(--medio); }
.dx-caja input, .dx-caja select, .dx-caja textarea{ background:var(--pag); border:1px solid var(--linea); border-radius:var(--r); color:var(--tinta); font:inherit; font-size:var(--t-texto); padding:var(--e-2); }
.dx-caja textarea{ min-height:96px; resize:vertical; }
.dx-agregar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-1); }
.dx-agregar button{ text-align:left; background:transparent; border:0; border-radius:var(--r); padding:var(--e-2); color:var(--texto); font:inherit; font-size:var(--t-texto); cursor:pointer; }
.dx-agregar button:hover{ background:var(--piedra-on); }
.dx-acciones{ display:flex; gap:var(--e-2); flex-wrap:wrap; }
.dx-aviso{ border:1px solid var(--urge); }
.dx-estado{ font-size:var(--t-meta); color:var(--apagado); }
/* Con el chat abierto a la izquierda, el CRM puede medir 400 px aunque la ventana mida 1280: el acomodo se decide por el
   espacio del EDITOR (container query), no por el de la ventana. Angosto: el papel arriba y el panel debajo. */
@container (max-width:820px){
  .dx-ed-cuerpo{ flex-direction:column; }
  .dx-panel{ width:auto; overflow:visible; }
  .dx-ed-cuerpo{ align-items:stretch; }
  .dx-mesa{ padding:0; height:70vh; }
}

/* El diseno (aspecto) de un documento: la caja del editor y la pantalla #/documentos/diseno. Los colores de cada muestra
   "Aa" NO viven aqui: son los del diseno del NEGOCIO (public/doc-aspectos.js) y llegan por style. Aqui solo el CRM. */
.dx-asp-origen{ font-size:var(--t-meta); color:var(--tinta); line-height:1.45; }
.dx-asps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--e-2); }
.dx-asp{ display:flex; flex-direction:column; gap:var(--e-1); padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; min-width:0; }
.dx-asp-m{ position:relative; display:flex; align-items:center; justify-content:center; height:52px; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--linea); font-size:var(--t-sub); }
.dx-asp-m i{ position:absolute; right:var(--e-2); bottom:var(--e-2); width:var(--e-2); height:var(--e-2); border-radius:var(--r-pildora); }
.dx-asp.on .dx-asp-m{ box-shadow:0 0 0 2px var(--piedra), 0 0 0 4px var(--tinta); }
.dx-asp-n{ font-size:var(--t-eti); color:var(--medio); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-asp.on .dx-asp-n{ color:var(--tinta); }
.dx-asp-f{ display:flex; flex-direction:column; gap:var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.dx-asp-col{ display:flex; flex-wrap:wrap; gap:var(--e-2); align-items:center; }
.dx-sw{ width:28px; height:28px; border-radius:var(--r-pildora); border:0; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px var(--linea); position:relative; overflow:hidden; }
.dx-sw.on{ box-shadow:0 0 0 2px var(--piedra), 0 0 0 4px var(--tinta); }
.dx-sw:disabled{ cursor:default; opacity:.6; }
.dx-sw-otro{ background:var(--pag); display:flex; align-items:center; justify-content:center; color:var(--medio); font-size:var(--t-sub); }
.dx-sw-otro::after{ content:"+"; pointer-events:none; }
.dx-sw-otro input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.dx-asp-nota{ font-size:var(--t-meta); color:var(--medio); line-height:1.45; }
.dx-asp-portada{ flex-direction:row; align-items:center; gap:var(--e-3); }
.dx-asp-portada > div{ flex:1; min-width:0; }
.dx-asp-portada img{ width:48px; height:34px; object-fit:cover; border-radius:var(--r); }
.dx-switch{ width:40px; height:24px; border-radius:var(--r-pildora); border:0; padding:2px; background:var(--linea); display:flex; justify-content:flex-start; cursor:pointer; flex:none; }
.dx-switch[aria-checked="true"]{ background:var(--boton); justify-content:flex-end; }
.dx-switch:disabled{ opacity:.45; cursor:default; }
.dx-switch span{ width:20px; height:20px; border-radius:var(--r-pildora); background:var(--piedra); display:block; }

/* La pantalla mide su PROPIO ancho (con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280). */
.dx-dis-cont{ container-type:inline-size; }
.dx-dis{ display:grid; grid-template-columns:minmax(0, 560px) minmax(0, 1fr); gap:var(--e-6); align-items:start; }
.dx-dis-izq{ display:flex; flex-direction:column; gap:var(--e-6); }
.dx-dis-sec{ display:flex; flex-direction:column; gap:var(--e-3); }
.dx-dis-sec h2{ margin:0; font-size:var(--t-sub); color:var(--tinta); }
.dx-dis .dx-m{ font-size:var(--t-meta); color:var(--medio); }
.dx-dis-filas{ display:flex; flex-direction:column; }
.dx-dis-fila{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-3) 0; }
.dx-dis-fila .dx-txt{ flex:1; min-width:0; }
.dx-dis-fila .dx-t{ font-size:var(--t-texto); color:var(--tinta); }
.dx-dis-fila select{ background:var(--pag); border:1px solid var(--linea); border-radius:var(--r); color:var(--tinta); font:inherit; font-size:var(--t-texto); padding:var(--e-2); max-width:44%; }
.dx-asp-mini{ width:34px; height:34px; flex:none; font-size:var(--t-texto); }
.dx-dis-mesa{ flex-direction:column; gap:var(--e-2); height:calc(100vh - 220px); }
@container (max-width:900px){
  .dx-dis{ grid-template-columns:minmax(0, 1fr); }
  .dx-dis-mesa{ height:70vh; }
  .dx-dis-fila{ flex-wrap:wrap; }
  .dx-dis-fila select{ order:3; flex-basis:100%; max-width:none; }
}