/* division.css -- la pantalla dividida (public/dividir.js, la ventana de arriba) y el modo marco (public/marco.js, dentro del iframe).
   Cuarto Oscuro: SOLO tokens de cuarto-oscuro.css (paridad-cuarto-oscuro cuenta esta hoja desde cero: un color, una sombra o un font-size en px escritos
   a mano la hacen fallar). Pildora = se toca; 16 px = flota; 4 px = contenido; filas sin cajas ni rayas; ventanas sin barra de titulo ni x.
   Nada se anima: el ancho del lado cambia con el teclado y con el arrastre, y lo que se usa cien veces al dia ni con teclado se anima.
   Va DESPUES de cuarto-oscuro.css (y antes de app.js), como las demas hojas de pantalla. */

/* =============================== La ventana de ARRIBA: el lado derecho =============================== */
@media (min-width:861px){
  /* Con la division abierta los rieles (la lista del dia, los widgets fijados) se esconden: el espacio es de las dos pantallas. `!important` porque
     `#app .riel-lat:not([hidden])` (styles.css) les da display con un ID y mas peso que cualquier regla de clase, y no vale la pena una carrera de
     especificidad por algo que solo tiene que desaparecer mientras dure la division. */
  #app.dividida > #riel-izq, #app.dividida > #riel-der{ display:none !important; }
  /* El piso del CRM (el mismo que CRM_ANCHO_MIN de app.js): el JS ya lo respeta al arrastrar; esto es el respaldo si la ventana cambia de golpe. */
  #app.dividida > .main{ min-width:380px; }

  /* #division es UN hijo de #app, pegado a section.main. Su ancho lo pone dividir.js en --div-w (el divisor va DENTRO, a su izquierda). */
  #division.div{ position:relative; flex:0 0 var(--div-w, 50%); min-width:360px; height:100%; min-height:0; display:flex; flex-direction:row; box-sizing:border-box; background:var(--pag); }

  /* El divisor: el mismo agarre que #cp-resize (6 px, con la zona agarrable mas ancha por ::before), copiado de montarDivisorChat. */
  .div-sep{ position:relative; flex:0 0 6px; cursor:col-resize; background:transparent; touch-action:none; }
  .div-sep::before{ content:""; position:absolute; inset:0 -3px; }
  /* El agarre es PERMANENTE: lo unico que dice que esto se arrastra no puede aparecer solo al pasar el cursor. Cambia de tono, no de presencia. */
  .div-grip{ position:absolute; left:50%; top:50%; width:3px; height:38px; border-radius:var(--r-pildora); background:var(--punto); transform:translate(-50%, -50%); }
  @media (hover:hover){ .div-sep:hover .div-grip{ background:var(--tinta); } }
  .div-sep:focus-visible .div-grip, .div-sep.arrastrando .div-grip{ background:var(--tinta); }

  .div-col{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }

  /* La cabecera: < destino, el nombre de la pantalla, y las acciones. Sin barra de titulo ni x; el alto es el de la barra de arriba. */
  .div-cab{ flex:none; display:flex; align-items:center; gap:var(--e-2); min-height:var(--topnav-h, 48px); padding:0 var(--e-4) 0 var(--e-2); box-sizing:border-box; }
  .div-titulo{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
  .div-acciones{ flex:none; display:flex; align-items:center; gap:var(--e-1); }
  .div-pil{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora);
    background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-meta); font-weight:500; line-height:1.2; white-space:nowrap; cursor:pointer; }
  .div-pil:disabled{ opacity:.5; cursor:default; }
  .div-pil:active:not(:disabled){ opacity:.85; }
  @media (hover:hover){ .div-pil:hover:not(:disabled){ box-shadow:inset 0 0 0 100px var(--tinte-toque); } }
  /* El boton de volver (< destino) puede llevar un nombre largo ("Ana & Luis, boda del 12 de octubre"): se acorta con puntos suspensivos en vez de empujar a las demas. */
  .div-atras{ flex:0 1 auto; min-width:0; max-width:42%; overflow:hidden; text-overflow:ellipsis; background:transparent; }
  .div-ib{ width:32px; padding:0; font-size:var(--t-texto); }

  /* El iframe llena el resto. Sin borde: la pagina de adentro trae su propio fondo y su propio scroll. */
  .div-marco{ display:block; flex:1 1 auto; width:100%; min-height:0; border:0; background:var(--pag); }
}

/* =============================== El modo MARCO: esta pagina ES el lado derecho =============================== */
/* theme-init.js le pone `marco` al <html> solo dentro de un iframe del mismo sitio. La copia del CRM que hay aqui no pinta el chat, las barras ni los
   rieles: lo que queda es `section.main` llenando el marco. `!important` en la lista de lo que se esconde porque el chrome del CRM tiene capas de reglas
   que lo muestran con mucha especificidad (#cp-riel.show, body.nav-lat-on.menu-arriba #cp-riel.show...), y aqui solo tiene que NO existir. */
html.marco #cp-riel, html.marco #chatpane, html.marco #cp-resize, html.marco #riel-izq, html.marco #riel-der,
html.marco #wpanel, html.marco #wpanel-backdrop, html.marco #barra-inf, html.marco #nav-lat, html.marco #tel-convs, html.marco #cp-backdrop,
html.marco .skip-link{ display:none !important; }
/* #subtabs (las sub-pestanas de una seccion) es de la barra de arriba, que aqui no existe, y lleva tiempo sin usarse (ver el comentario en index.html):
   si algun dia se pintara se veria sola, sin su contexto. */
html.marco .main > #subtabs{ display:none !important; }

/* Las medidas del marco: sin barra de arriba (--topnav-h) ni panel lateral (--navlat-w) los rieles y el ancho salen solos. Se fijan en <html> Y en
   <body>: `body.nav-lat-on{ --navlat-w:... }` (styles.css) las redefine en el body, y una variable heredada no le gana a una propia. */
html.marco, html.marco body{ --topnav-h:0px; --navlat-w:0px; }
/* #app ocupa todo el marco; .main llena #app sin los margenes ni el relleno inferior que el telefono reserva para su barra de abajo (que aqui no hay). Con el
   marco angosto (menos de 861 px) el diseno de telefono sale por si solo de las consultas de medios; lo que NO sale solo son las capas de telefono del JS
   (paginas de Xarpie y de Chats, pushState({tel})): esas las apaga app.js con Marco.activo(), ver DIVIDIR-INTEGRACION.md. */
html.marco #app.show{ margin-left:0; height:100vh; height:100dvh; min-height:0; }
html.marco #app.show .main{ flex:1 1 auto; min-width:0; height:100%; margin:0; padding-bottom:0; border-radius:0; }