/* ==========================================================================
   SALA DE ESPERA v1 · Dra. Mónica Álvarez
   SOLO TABLETA (≥600px de ancho y ≥561px de alto, en modo responsive):
   - Se ocultan el bloque de navegación del héroe (mon-dock) y la barra inferior
     Llamar/WhatsApp (mon-mbar); en su lugar se presenta la tarjeta "Llévame en tu celular"
     con dos QR alternables: Mi sitio y Déjame una reseña (js/kiosk.js).
   ========================================================================== */
.mon-kiosk{display:none}

@media (min-width:600px) and (max-width:1024px) and (min-height:561px),
       (min-width:600px) and (max-aspect-ratio:10/11) and (min-height:561px){
  :root{--mbar-h:0px}
  .mon-dock,.mon-mbar{display:none!important}
  .mon-toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}

  /* ── tarjeta "Llévame en tu celular" ── */
  .mon-kiosk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;position:relative;z-index:5;isolation:isolate;overflow:hidden;
    width:calc(100% - var(--pad) * 2);max-width:760px;margin:-26px auto var(--pad);padding:26px 26px 26px 30px;border-radius:30px;color:#fff;text-align:left;
    background:radial-gradient(70% 90% at 100% 0%,#1fb5e3 0%,rgba(31,181,227,0) 70%),#0d1a2d;
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 30px 50px -28px rgba(13,26,45,.9);animation:rise .7s var(--ease) .6s backwards}
  .mon-kiosk::before{content:"";position:absolute;z-index:-1;left:-34px;bottom:-56px;width:150px;height:170px;opacity:.08;rotate:-14deg;background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 10.5h-5.5V5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v5.5H5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h5.5V19c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-5.5H19c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 10.5h-5.5V5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v5.5H5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h5.5V19c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-5.5H19c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
  .mon-kiosk__who{display:flex;align-items:center;gap:12px}
  .mon-kiosk__av{width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;background:#dfeafe;box-shadow:0 0 0 3px var(--blue-a,#3cc6ef)}
  .mon-kiosk__av img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
  .mon-kiosk__who div{display:grid;line-height:1.25}
  .mon-kiosk__who b{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .mon-kiosk__who span{font-size:13px;color:#a9dff5}
  .mon-kiosk__t{margin-top:18px;font-size:clamp(24px,3.6vw,30px);font-weight:700;line-height:1.1;letter-spacing:-.035em}
  .mon-kiosk__s{margin-top:6px;min-height:2.9em;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.82)}
  .mon-kiosk__tabs{display:inline-flex;gap:4px;margin-top:14px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .mon-kiosk__tabs button{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border:0;border-radius:999px;background:none;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.8);cursor:pointer;transition:background-color .25s,color .25s}
  .mon-kiosk__tabs .mon-ic{width:17px;height:17px}
  .mon-kiosk__tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 8px 16px -10px rgba(0,0,0,.5)}
  .mon-kiosk__tabs button[aria-selected="true"] .mon-ic{color:var(--blue-b,#0e9ccb)}
  .mon-kiosk__tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .mon-kiosk [data-kiosk="review"]{min-width:15.5em;justify-content:center}
  .mon-kiosk__steps{display:flex;flex-wrap:wrap;gap:8px 14px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.75)}
  .mon-kiosk__steps li{display:flex;align-items:center;gap:7px}
  .mon-kiosk__steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.12);color:#fff}
  .mon-kiosk__qr{display:grid;justify-items:center;gap:12px}
  .mon-kiosk__frame{position:relative;padding:12px;border-radius:24px;background:#fff;box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
  .mon-kiosk__code{width:clamp(170px,26vw,212px);aspect-ratio:1;display:grid;place-items:center}
  .mon-kiosk__code img,.mon-kiosk__code canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
  .mon-kiosk__code p{margin:0;padding:10px;font-size:12.5px;line-height:1.35;color:var(--ink-soft);text-align:center}
  .mon-kiosk__code.is-new{animation:kfx-qr .45s var(--ease)}
  .mon-kiosk__scan{position:absolute;left:14px;right:14px;top:14px;height:2px;border-radius:2px;opacity:.85;
    background:linear-gradient(90deg,transparent,var(--blue-a,#3cc6ef),transparent);box-shadow:0 0 12px var(--blue-a,#3cc6ef);animation:kfx-scan 3.4s ease-in-out infinite alternate}
  .mon-kiosk__frame i{position:absolute;width:22px;height:22px;border:3px solid #7edaf6;animation:kfx-corner 2.4s ease-in-out infinite}
  .mon-kiosk__frame i:nth-of-type(1){left:-9px;top:-9px;border-right:0;border-bottom:0;border-top-left-radius:12px}
  .mon-kiosk__frame i:nth-of-type(2){right:-9px;top:-9px;border-left:0;border-bottom:0;border-top-right-radius:12px}
  .mon-kiosk__frame i:nth-of-type(3){left:-9px;bottom:-9px;border-right:0;border-top:0;border-bottom-left-radius:12px}
  .mon-kiosk__frame i:nth-of-type(4){right:-9px;bottom:-9px;border-left:0;border-top:0;border-bottom-right-radius:12px}
  .mon-kiosk__qr small{font-size:13px;font-weight:600;color:rgba(255,255,255,.86)}
}

/* tableta horizontal: tarjeta compacta para que todo quepa en la primera pantalla */
@media (min-width:600px) and (max-width:1024px) and (min-height:561px) and (orientation:landscape){
  .mon-kiosk{padding:18px 20px 18px 24px;gap:22px}
  .mon-kiosk__t{margin-top:10px;font-size:23px}
  .mon-kiosk__s{min-height:0}
  .mon-kiosk__steps{margin-top:10px}
  .mon-kiosk__code{width:150px}
}

@keyframes kfx-scan{to{top:calc(100% - 16px)}}
@keyframes kfx-corner{50%{scale:1.12}}
@keyframes kfx-qr{from{opacity:0;scale:.92}}
