/* ==========================================================================
   06-DOCK.CSS · Barra flotante de cristal (abajo) y su panel "Más"
   --------------------------------------------------------------------------
   Reemplaza a la antigua burbuja "Hay más". Tiene los mismos 5 enlaces:
   Propiedades, Vehículos, Pagos, Socios y Edúcate.
   Los enlaces se editan en index.html (busca "dock-panel").
   ========================================================================== */

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;pointer-events:none;
  padding:0 max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  transition:transform .55s var(--suave),opacity .4s;
}
/* Se aparta cuando el formulario ya está a la vista */
.dock.aparte{transform:translateY(160%);opacity:0}
.dock-in{position:relative;width:100%;max-width:440px}
.dock-bar{
  pointer-events:auto;display:flex;align-items:center;gap:6px;width:100%;padding:6px;border-radius:999px;
  background:rgba(11,30,21,.58);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(241,244,236,.24);box-shadow:0 14px 40px -12px rgba(0,0,0,.55);
}
.dock-item{
  min-height:48px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;border:0;
  background:transparent;color:var(--sobre-oscuro);font-weight:600;font-size:.96rem;text-decoration:none;
  cursor:pointer;transition:background .25s;
}
.dock-item:hover,.dock-item[aria-expanded="true"]{background:rgba(241,244,236,.14)}
.dock-item svg{width:20px;height:20px;fill:currentColor}
.dock-nav{display:none}
.dock .boton{flex:1;min-height:48px;padding-inline:18px;white-space:nowrap}

/* Panel "Más": es hermano de la barra (no está dentro) para que el cristal no se anide */
.dock-panel{
  position:absolute;pointer-events:auto;left:0;right:0;bottom:calc(100% + 10px);padding:8px;border-radius:26px;
  background:rgba(11,30,21,.8);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(241,244,236,.22);box-shadow:0 20px 50px -14px rgba(0,0,0,.6);
  transform-origin:50% 100%;transition:transform .35s var(--suave),opacity .25s;
}
.dock-panel[hidden]{display:none!important}
.dock-panel.cerrado{opacity:0;transform:translateY(10px) scale(.97)}
.dock-panel h2{font-size:.88rem;font-weight:600;color:var(--suave-oscuro);padding:10px 14px 6px}
.dock-panel a{display:flex;align-items:center;gap:14px;min-height:58px;padding:8px 12px;border-radius:18px;text-decoration:none}
.dock-panel a:hover{background:rgba(241,244,236,.1)}
.dock-panel svg{width:26px;height:26px;flex:none;stroke:var(--lima);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dock-panel b{display:block;font-weight:600;line-height:1.2}
.dock-panel span{display:block;font-size:.86rem;color:var(--suave-oscuro);line-height:1.25}

/* MURO SUAVE: a quien no se ha registrado solo se le muestra el botón de contacto */
html.visitante .dock-item,html.visitante .dock-panel{display:none!important}

@media (min-width:640px){
  .dock-nav{display:inline-flex}
  .dock-in{width:auto;max-width:none}
  .dock-bar{width:auto}
  .dock .boton{flex:none}
  .dock-panel{right:auto;width:340px}
}

@media (prefers-reduced-motion:reduce){
  .dock,.dock-panel{transition:none}
  .boton:hover{transform:none}
}