/* vistazo.css -- el panel "Vistazo al lado" (public/vistazo.js). Cuarto Oscuro: SOLO tokens de cuarto-oscuro.css;
   pildora = se toca, 16 px = flota, 4 px = contenido, filas sin cajas ni rayas. Sin barra de titulo y sin x a la
   vista: la primera linea del panel es el titulo y la fecha, y se cierra con la pildora «Cerrar» o con Escape.

   Va DESPUES de styles.css y de cuarto-oscuro.css: #wpanel es la caja de siempre (panel derecho apilable) y aqui solo
   se le cambia la forma cuando lo que se apila es un vistazo (vistazo.js le pone la clase .vz y data-vz):

     flujo  el panel esta EN el flujo de #app (empuja al CRM) mientras la columna del CRM conserve 720 px o mas;
     flota  si no cabe, flota sobre el CRM: fijo, pegado al borde derecho de .main (vistazo.js escribe --vz-der,
            --vz-arriba y --vz-ancho), 16 px de radio, sin tapar menus ni ventanas y SIN ser un dialogo;
     hoja   en telefono (860 px o menos) sube desde abajo como una hoja, con el velo de siempre.

   Movimiento (Cuarto Oscuro): ventana que aparece 180 ms / se va 120 ms, hoja que sube 280 / baja 200. Dentro del
   flujo y con teclado no se anima (vistazo.js no pone .vz-entrando), y con movimiento reducido solo se funde. */

/* ---------------------------------- el panel ---------------------------------- */
#app .wpanel.vz{ background:var(--hoja); color:var(--texto); border-left:0; font-family:var(--sans); }
/* La cabecera vieja (flecha, titulo h2, x) no se dibuja: el vistazo trae la suya. */
#app .wpanel.vz .wpanel-head{ display:none; }
#app .wpanel.vz .wpanel-body{ padding:0; min-height:0; overscroll-behavior:contain; }
/* En el flujo el alto es el de #app, no el del viewport (#app ya descuenta la barra de arriba). */
#app .wpanel.vz[data-vz="flujo"]{ height:100%; }

/* ---- flota ---- */
#app .wpanel.vz[data-vz="flota"]{
  position:fixed; top:calc(var(--vz-arriba, 0px) + var(--e-3)); right:calc(var(--vz-der, 0px) + var(--e-3)); bottom:var(--e-4);
  width:var(--vz-ancho, 360px); height:auto; flex:none; min-width:0; box-sizing:border-box;
  z-index:calc(var(--z-menu) - 20); border-radius:var(--r-flota); box-shadow:var(--sombra-flota);
}

/* ---- hoja (telefono) ---- */
#app .wpanel.vz[data-vz="hoja"]{
  position:fixed; inset:auto 0 0 0; width:auto; height:auto; flex:none; box-sizing:border-box;
  max-height:88vh; max-height:min(88vh, calc(100dvh - var(--e-5)));
  z-index:66; border-radius:var(--r-flota) var(--r-flota) 0 0; box-shadow:var(--sombra-flota);
}
#app .wpanel.vz[data-vz="hoja"] .wpanel-body{ padding-bottom:env(safe-area-inset-bottom); }
/* El velo de siempre (#wpanel-backdrop), pero con el token: el de styles.css trae un color a mano. */
#app.vz-hoja .wpanel-backdrop:not([hidden]){ background:var(--velo); }

/* ---- movimiento ---- */
@keyframes vz-entra{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
@keyframes vz-sale{ from{ opacity:1; transform:none; } to{ opacity:0; transform:scale(.98); } }
@keyframes vz-sube{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes vz-baja{ from{ transform:none; } to{ transform:translateY(100%); } }
@keyframes vz-funde{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vz-desvanece{ from{ opacity:1; } to{ opacity:0; } }
@media (prefers-reduced-motion:no-preference){
  #app .wpanel.vz[data-vz="flota"].vz-entrando{ animation:vz-entra var(--d-ventana) var(--curva-entra) both; transform-origin:top right; }
  #app .wpanel.vz[data-vz="flota"].vz-sale{ animation:vz-sale var(--d-ventana-sale) var(--curva-cambia) both; transform-origin:top right; }
  #app .wpanel.vz[data-vz="hoja"].vz-entrando{ animation:vz-sube var(--d-hoja) var(--curva-arrastre) both; }
  #app .wpanel.vz[data-vz="hoja"].vz-sale{ animation:vz-baja var(--d-hoja-sale) var(--curva-arrastre) both; }
}
@media (prefers-reduced-motion:reduce){
  #app .wpanel.vz.vz-entrando{ animation:vz-funde var(--d-toque) linear both; }
  #app .wpanel.vz.vz-sale{ animation:vz-desvanece var(--d-toque) linear both; }
}

/* ---------------------------------- el contenido ---------------------------------- */
.vz-raiz{ display:flex; flex-direction:column; min-height:100%; }
.vz-cargando{ padding:var(--e-5) var(--e-4); }

/* La primera linea: el titulo (y abajo la fecha y el lugar). Es la cabecera de la ficha de la boda
   (pintarCabTrabajo) o la propia del cliente; vistazo.js le cambia el h2 a .vz-cab-t. */
.vz-cab{ flex:none; }
.vz-raiz .por-cab{ padding:var(--e-5) var(--e-4) 0; gap:var(--e-3); }
.vz-raiz .por-cab-sub{ font-size:var(--t-meta); margin-top:2px; }
.vz-raiz .por-cab-chips{ gap:var(--e-2); margin-top:var(--e-2); }
.vz-raiz .fb-cuenta-n{ font-size:var(--t-titulo); }
.vz-cab-fila{ display:flex; align-items:flex-start; gap:var(--e-3); padding:var(--e-5) var(--e-4) 0; }
.vz-cab-txt{ flex:1; min-width:0; }
.vz-cab-t{ margin:0; font-size:var(--t-sub); font-weight:500; line-height:1.25; letter-spacing:-.01em; color:var(--tinta); overflow-wrap:anywhere; }
.vz-cab-sub{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); overflow-wrap:anywhere; }
.vz-cab-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); margin-top:var(--e-2); }

/* La barra de pildoras: «‹ Anterior» a la izquierda (si hay pila), el estado de guardado en medio, «Abrir
   completo», «Al lado», «↗» y «Cerrar». Se pega arriba al bajar. */
.vz-barra{ position:sticky; top:0; z-index:var(--z-pegajoso); flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); padding:var(--e-3) var(--e-4); background:var(--hoja); }
.vz-pil{ display:inline-flex; align-items:center; justify-content:center; 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; cursor:pointer; white-space:nowrap; }
.vz-pil-p{ background:var(--boton); color:var(--boton-t); }
.vz-pil:active{ opacity:.85; }
@media (hover:hover){
  .vz-pil:hover{ box-shadow:inset 0 0 0 100px var(--tinte-toque); }
}
@media (hover:none){ .vz-pil{ min-height:44px; padding:0 var(--e-4); } }
.vz-estado{ flex:1 1 auto; min-width:0; font-size:var(--t-meta); color:var(--apagado); }
.vz-estado:empty{ display:none; }

/* Las secciones son las de la ficha (.fsec de ficha.css y de Cuarto Oscuro); aqui solo se adaptan al ancho. */
.vz-cuerpo{ flex:1 1 auto; padding:0 var(--e-4) var(--e-5); }
.vz-raiz .ce-grid{ grid-template-columns:minmax(0, 1fr); }
.vz-raiz .ce-editando.ce-inline .ce-inp{ min-width:0; }
.vz-pie{ flex:none; padding:var(--e-2) var(--e-4) var(--e-5); }
.vz-pie[hidden]{ display:none; }
.vz-vacio{ padding:var(--e-5) var(--e-4); color:var(--medio); }
.vz-error .vz-barra{ position:static; }

/* ---------------------------------- el pie «En el calendario» ---------------------------------- */
/* Lo arma calendario.js (cfPieVistazo) con las acciones de siempre del detalle lateral: mover un dia, duplicar, eliminar, traslado y recordatorio.
   Las clases .cf-* traen su aspecto de .calfull (variables --cal-* que aqui no existen): se redibujan con los tokens del panel. */
.cf-vz-pie{ display:flex; flex-direction:column; gap:var(--e-3); }
.cf-vz-t{ margin:0; font-size:var(--t-eti); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--medio); }
#app .cf-vz-pie .cf-dacts{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
#app .cf-vz-pie .cf-dact{ flex:0 1 auto; min-width:0; height:auto; display:inline-flex; align-items:center; gap:var(--e-2); 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; cursor:pointer; }
#app .cf-vz-pie .cf-dact.danger{ color:var(--urge); }
@media (hover:none){ #app .cf-vz-pie .cf-dact{ min-height:44px; padding:0 var(--e-4); } }
#app .cf-vz-pie .cf-two{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--e-3); }
#app .cf-vz-pie .cf-fgrp{ margin:0; }
#app .cf-vz-pie .cf-flbl{ display:flex; flex-direction:column; gap:var(--e-1); font-size:var(--t-meta); color:var(--medio); }
#app .cf-vz-pie .cf-inp{ width:100%; box-sizing:border-box; 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); }
@media (hover:none){ #app .cf-vz-pie .cf-inp{ min-height:44px; } }
.cf-vz-pie svg{ width:14px; height:14px; flex:none; }