/* hilos.css — la hoja del hilo de una boda (public/hilos.js). Cuarto Oscuro: solo tokens de cuarto-oscuro.css; pildora = se toca, 16 px = flota,
   4 px = contenido, filas sin cajas ni rayas. La hoja flota a la derecha en escritorio y sube desde abajo en telefono; queda POR DEBAJO de los
   menus (--z-menu) y de las ventanas de confirmacion (--z-velo), para que `pzMenu` y `confirmModal` se vean encima de ella. */

/* ---- la pastilla del encabezado de la boda ---- */
.hl-pastilla{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 12px; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-meta); cursor:pointer; }
.hl-n{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:var(--r-pildora); background:var(--urge); color:var(--urge-t); font-size:var(--t-meta); font-weight:500; line-height:1; }

/* ---- la hoja ---- */
.hl-raiz{ position:fixed; inset:0; z-index:calc(var(--z-menu) - 20); pointer-events:none; }
.hl-velo{ position:absolute; inset:0; background:var(--velo); opacity:0; pointer-events:none; }
.hl-hoja{ position:absolute; right:16px; bottom:16px; width:min(400px, calc(100vw - 32px)); height:min(680px, calc(100vh - 32px)); display:flex; flex-direction:column; box-sizing:border-box;
  background:var(--hoja); color:var(--texto); border-radius:var(--r-flota); box-shadow:var(--sombra-flota); overflow:hidden; pointer-events:auto; font-family:var(--sans);
  opacity:0; transform:translateY(12px); }
.hl-raiz.abierta .hl-hoja{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  .hl-hoja{ transition:opacity var(--d-hoja) var(--curva-entra), transform var(--d-hoja) var(--curva-entra); }
  .hl-velo{ transition:opacity var(--d-hoja) var(--curva-cambia); }
}
.hl-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-3); padding:var(--e-4) var(--e-4) var(--e-2) var(--e-5); flex:none; }
.hl-titulo{ font-size:var(--t-sub); line-height:1.25; color:var(--tinta); font-weight:500; }
.hl-sub{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.hl-cab-b{ display:flex; gap:2px; flex:none; }
.hl-ib{ position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); cursor:pointer; }
@media (hover:hover){ .hl-ib:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.hl-ib-n{ position:absolute; top:2px; right:0; min-width:14px; height:14px; padding:0 3px; box-sizing:border-box; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-eti); line-height:14px; text-align:center; }
.hl-ib-n:empty{ display:none; }
.hl-cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; }
.hl-cargando{ margin:var(--e-6) var(--e-5); color:var(--apagado); }
.hl-error{ margin:var(--e-6) var(--e-5); color:var(--medio); }

/* ---- mensajes ---- */
.hl-lista{ flex:1; min-height:0; overflow-y:auto; padding:var(--e-2) var(--e-5) var(--e-4); display:flex; flex-direction:column; gap:var(--e-5); overscroll-behavior:contain; }
.hl-fila{ margin:0; }
.hl-fila-cab{ margin:0 0 2px; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.hl-de{ color:var(--tinta); font-weight:500; }
.hl-marca{ padding:0 8px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--medio); }
.hl-hora{ margin-left:auto; }
.hl-mas{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--apagado); cursor:pointer; opacity:0; }
.hl-fila:hover .hl-mas, .hl-fila:focus-within .hl-mas, .hl-mi .hl-mas{ opacity:1; }
@media (hover:none){ .hl-mas{ opacity:1; } }
.hl-texto{ margin:0; font-size:var(--t-texto); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--texto); }
.hl-borrado{ margin:0; color:var(--apagado); font-style:italic; }
.hl-tarjeta{ margin-top:var(--e-2); padding:var(--e-3) var(--e-4); background:var(--piedra); border-radius:var(--r); }
.hl-tj-t{ margin:0 0 var(--e-2); font-weight:500; color:var(--tinta); }
.hl-tj-l{ margin:0 0 4px; display:flex; gap:var(--e-3); font-size:var(--t-texto); }
.hl-tj-k{ flex:0 0 68px; color:var(--apagado); font-size:var(--t-meta); padding-top:1px; }
.hl-vacio{ margin:var(--e-6) 0; }
.hl-vacio-t{ margin:0 0 var(--e-2); color:var(--tinta); }
.hl-vacio-p{ margin:0 0 var(--e-4); font-size:var(--t-meta); color:var(--medio); }

/* ---- botones de pildora ---- */
.hl-pil{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
.hl-pil-s{ background:var(--piedra-on); color:var(--tinta); }
.hl-pil-ch{ min-height:28px; padding:0 var(--e-3); font-size:var(--t-meta); flex:none; }
.hl-pil:disabled{ opacity:.5; }
.hl-pil:active{ opacity:.85; }

/* ---- caja de escribir ---- */
.hl-comp{ display:flex; align-items:flex-end; gap:var(--e-2); padding:var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); flex:none; }
.hl-adj{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); cursor:pointer; }
@media (hover:hover){ .hl-adj:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.hl-area{ flex:1; min-width:0; min-height:40px; max-height:140px; resize:none; box-sizing:border-box; padding:9px var(--e-4); border:0; border-radius:var(--r-flota); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-campo); line-height:1.4; }
.hl-area:focus-visible{ outline:2px solid var(--tinta); outline-offset:1px; }
.hl-enviar{ min-height:40px; padding:0 var(--e-4); flex:none; border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
.hl-enviar:disabled{ opacity:.5; }
.hl-cerrado{ flex:none; padding:var(--e-4) var(--e-5) calc(var(--e-4) + env(safe-area-inset-bottom)); color:var(--medio); font-size:var(--t-meta); }
.hl-cerrado p{ margin:0; }

/* ---- confirmar dinero ---- */
.hl-capa{ position:absolute; inset:0; display:flex; align-items:flex-end; background:var(--velo); }
.hl-conf{ width:100%; box-sizing:border-box; padding:var(--e-5); background:var(--hoja); border-radius:var(--r-flota) var(--r-flota) 0 0; }
.hl-conf-t{ margin:0 0 var(--e-2); font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
.hl-conf-p{ margin:0 0 var(--e-3); font-size:var(--t-texto); color:var(--medio); }
.hl-conf-q{ margin:0 0 var(--e-4); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra); color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; max-height:120px; overflow:auto; }
.hl-conf-b{ display:flex; gap:var(--e-2); justify-content:flex-end; }

/* ---- pantallas internas: tarjeta, miembros, invitar, enlace ---- */
.hl-pant{ flex:1; min-height:0; overflow-y:auto; padding:0 var(--e-5) var(--e-5); display:flex; flex-direction:column; }
.hl-volver{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin:0 0 var(--e-3) -6px; padding:4px 8px 4px 4px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.hl-volver svg{ transform:rotate(90deg); }
@media (hover:hover){ .hl-volver:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.hl-pant-t{ margin:0 0 var(--e-3); font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
.hl-prev{ margin-bottom:var(--e-4); }
.hl-prev .hl-tarjeta{ margin-top:0; }
.hl-inter{ display:flex; flex-direction:column; gap:var(--e-1); margin-bottom:var(--e-3); }
.hl-int{ display:flex; align-items:center; gap:var(--e-3); min-height:36px; font-size:var(--t-texto); color:var(--texto); cursor:pointer; }
.hl-int input{ width:18px; height:18px; accent-color:var(--tinta); flex:none; }
.hl-int-fijo{ color:var(--apagado); cursor:default; }
.hl-nunca{ margin:0 0 var(--e-4); font-size:var(--t-meta); color:var(--medio); }
.hl-pie{ display:flex; justify-content:flex-end; gap:var(--e-2); margin-top:auto; padding-top:var(--e-3); }
.hl-pie-2{ justify-content:flex-start; margin-top:var(--e-3); }
.hl-banner{ margin:0 0 var(--e-4); font-size:var(--t-meta); color:var(--medio); }
.hl-sec{ margin:var(--e-3) 0 var(--e-1); font-size:var(--t-meta); font-weight:500; color:var(--apagado); }
.hl-mi{ display:flex; align-items:center; gap:var(--e-2); min-height:44px; }
.hl-mi-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.hl-mi-n{ color:var(--tinta); overflow-wrap:anywhere; }
.hl-mi-e{ font-size:var(--t-meta); color:var(--apagado); }
.hl-mi-aviso{ color:var(--urge); }
.hl-fila-lnk{ align-self:flex-start; margin-top:var(--e-3); padding:6px 0; border:0; background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); text-decoration:underline; cursor:pointer; }
.hl-puerta{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:var(--e-4); padding:var(--e-3) 0 0; border:0; background:transparent; text-align:left; font:inherit; color:var(--medio); cursor:pointer; }
.hl-puerta-t{ font-size:var(--t-texto); color:var(--tinta); }
.hl-puerta-p{ font-size:var(--t-meta); }
.hl-puerta:disabled{ cursor:default; }
.hl-form{ display:flex; flex-direction:column; flex:1; }
.hl-lb{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--e-4); font-size:var(--t-meta); color:var(--medio); }
.hl-in{ min-height:44px; box-sizing:border-box; padding:0 var(--e-4); border:0; border-radius:var(--r-flota); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-campo); }
.hl-in:focus-visible{ outline:2px solid var(--tinta); outline-offset:1px; }
.hl-enl{ width:100%; margin-bottom:var(--e-3); font-size:var(--t-texto); }

/* ---- lista de hilos en la pestana Chats del telefono ---- */
.hl-lista-chats{ margin:0 0 var(--e-4); }
.hl-lc{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); width:100%; min-height:48px; padding:0; border:0; background:transparent; color:var(--tinta); font:inherit; text-align:left; cursor:pointer; }
.hl-lc-t{ overflow-wrap:anywhere; }

/* ---- telefono: la hoja sube desde abajo ---- */
@media (max-width:860px){
  .hl-raiz.abierta{ pointer-events:auto; }
  .hl-raiz.abierta .hl-velo{ opacity:1; pointer-events:auto; }
  .hl-hoja{ left:0; right:0; bottom:0; width:100%; height:min(88vh, 88dvh); border-radius:var(--r-flota) var(--r-flota) 0 0; transform:translateY(24px); }
}