/* ==========================================================================
   TABERNA LA TIENTA - Asistente de reservas
   UEYIA (ueyia.com) - 21/10/2026. Basado en el asistente de A'Barra.

   Colores y tipografias de la propia web:
     oro #d4af37   negro #0f0f0f   cuerpo Raleway   titulares Marck Script
   ========================================================================== */

#abc-raiz{
  --abc-oro:#d4af37;
  --abc-oro-oscuro:#b8952a;
  --abc-negro:#0f0f0f;
  --abc-papel:#171717;
  --abc-tenue:#9a9a9a;
  --abc-linea:#2e2e2e;
  position:fixed; right:20px; bottom:96px; z-index:99999;
  font-family:Raleway,system-ui,sans-serif;
}

#abc-raiz .abc-icono{
  flex:none; width:auto; height:34px; color:var(--abc-oro);
  display:block;
}
#abc-raiz .abc-icono svg{height:100%; width:auto; display:block; overflow:visible}

/* ---- burbuja ---- */
#abc-raiz .abc-burbuja{
  display:flex; align-items:center; gap:12px;
  background:var(--abc-negro); color:#fff;
  border:1px solid var(--abc-oro); padding:10px 20px 10px 14px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.3px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  animation:abc-entra .5s ease-out both 1.2s;
}
#abc-raiz .abc-burbuja:hover{background:#1d1d1d}
#abc-raiz .abc-burbuja:focus-visible{outline:3px solid var(--abc-oro); outline-offset:2px}
@keyframes abc-entra{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ---- panel ---- */
#abc-raiz .abc-panel{
  width:360px; max-width:calc(100vw - 32px);
  background:var(--abc-papel); color:#eee;
  border:1px solid var(--abc-linea);
  box-shadow:0 14px 50px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  overflow:hidden;
}
#abc-raiz .abc-oculto{display:none !important}

#abc-raiz .abc-cab{
  background:var(--abc-negro); color:#fff;
  border-bottom:1px solid var(--abc-oro);
  padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#abc-raiz .abc-cab-izq{display:flex; align-items:center; gap:10px; min-width:0}
#abc-raiz .abc-cab .abc-icono{height:28px}
#abc-raiz .abc-cab h2{
  margin:0; font-family:"Marck Script",cursive;
  font-size:24px; font-weight:400; letter-spacing:0; text-transform:none;
  color:#fff; line-height:1.2;
}
#abc-raiz .abc-cerrar{
  background:none; border:0; color:#fff; cursor:pointer;
  padding:4px; line-height:0; opacity:.75;
}
#abc-raiz .abc-cerrar:hover{opacity:1}
#abc-raiz .abc-cerrar:focus-visible{outline:2px solid var(--abc-oro); outline-offset:2px; opacity:1}

#abc-raiz .abc-cuerpo{
  padding:18px; max-height:min(64vh,460px); overflow-y:auto;
}

#abc-raiz .abc-msg{
  background:#222; color:#f1f1f1;
  border-left:2px solid var(--abc-oro);
  padding:12px 14px; font-size:14px; line-height:1.5;
  margin:0 0 14px; text-align:left;
}

#abc-raiz .abc-ops{display:flex; flex-wrap:wrap; gap:8px}
#abc-raiz .abc-op{
  background:transparent; color:#f1f1f1;
  border:1px solid #3a3a3a; cursor:pointer;
  padding:10px 14px; font-family:inherit; font-size:13px; font-weight:500;
  letter-spacing:.3px; transition:background .15s,border-color .15s,color .15s;
  text-transform:none; text-decoration:none; display:inline-block;
}
#abc-raiz .abc-op:hover{border-color:var(--abc-oro); color:var(--abc-oro)}
#abc-raiz .abc-op:focus-visible{outline:2px solid var(--abc-oro); outline-offset:2px}
#abc-raiz input.abc-op{color-scheme:dark}
#abc-raiz .abc-op-ppal{
  background:var(--abc-oro); color:#111; border-color:var(--abc-oro);
  font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:1px;
}
#abc-raiz .abc-op-ppal:hover{background:var(--abc-oro-oscuro); border-color:var(--abc-oro-oscuro); color:#111}
#abc-raiz .abc-op-tenue{border:0; color:var(--abc-tenue); text-decoration:underline; padding:10px 4px}
#abc-raiz .abc-op-tenue:hover{background:none; color:#fff}

#abc-raiz .abc-ops-rejilla{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
#abc-raiz .abc-ops-rejilla .abc-op{padding:11px 0; text-align:center}

/* ---- resumen ---- */
#abc-raiz .abc-resumen{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  border-top:1px solid var(--abc-linea); margin-top:12px; padding-top:12px;
  font-size:12px; color:var(--abc-tenue);
}
#abc-raiz .abc-resumen b{color:var(--abc-oro); font-weight:600}

/* ---- paso final: el modulo de CoverManager ---- */
#abc-raiz .abc-panel-ancho{width:460px}
#abc-raiz .abc-marco{width:100%; height:min(70vh,540px); border:0; display:block; background:#fff}
#abc-raiz .abc-nota{
  font-size:11px; color:var(--abc-tenue); padding:10px 0 0;
  line-height:1.45; margin:0;
}
#abc-raiz .abc-nota a{color:var(--abc-tenue)}

/* ---- movil ----
   La barra fija de abajo (Reservar / Llamar) ya abre el asistente: la burbuja
   sobraria y taparia contenido. Solo se ve el panel cuando se abre. */
@media (max-width:767px){
#abc-raiz{right:8px; left:8px; bottom:76px !important}
#abc-raiz .abc-burbuja{display:none}
#abc-raiz .abc-panel, #abc-raiz .abc-panel-ancho{width:100%; max-width:none}
#abc-raiz .abc-cuerpo{max-height:calc(100vh - 180px)}
#abc-raiz .abc-marco{height:calc(100vh - 300px)}
}

@media (prefers-reduced-motion:reduce){
#abc-raiz .abc-op{transition:none}
#abc-raiz .abc-burbuja{animation:none}
}