/*
 * Agendate — el ícono «instalar la aplicación» en la página del cliente final (08-10-2026).
 * Vive en el encabezado del sitio, así que usa el azul del sitio (el de la «A.» del logo), no el acento del panel.
 *
 * 360 y 768: en el encabezado, a la derecha (lo ubica instalar-cliente.js midiendo); 44 de toque, 40 de dibujo.
 * 1280: no aparece.
 */
.agdt-instalar-caja,
#agdt-instalar-pasos {
    --agi-azul: #2283CF;
    --agi-azul-tinta: #1a6fb3;
    --agi-tinta: #12233D;
    --agi-gris: #4a5a70;
    --agi-linea: #d6deeb;
    --agi-salida: cubic-bezier(.23, 1, .32, 1);
}
.agdt-instalar-caja { position: absolute; z-index: 1; width: 44px; height: 44px; margin: 0; padding: 0; }
/* Sin lugar en el encabezado: junto a «Salir», en la cabecera del panel. */
/* (La separación con «Salir» la pone la propia cabecera del panel.) */
.agdt-instalar-caja.en-panel { position: relative; flex: 0 0 44px; margin: 0 0 0 auto; }

#agdt-instalar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--agi-azul) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 140ms var(--agi-salida);
}
#agdt-instalar:active { transform: scale(.94); }
#agdt-instalar:focus-visible { outline: 2px solid var(--agi-azul); outline-offset: 2px; }
#agdt-instalar .agdt-instalar-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(34, 131, 207, .12);
}
/* El dibujo se declara entero acá: dentro del panel, la hoja del vendor (`.booknetic-body *`) reinicia todo
   (color, trazo, ancho y alto) en cada pieza. */
#agdt-instalar svg { display: block; flex: none; width: 22px; height: 22px; }
#agdt-instalar .agdt-instalar-flecha svg { width: 10px; height: 10px; }
#agdt-instalar svg,
#agdt-instalar svg * { color: inherit !important; fill: none !important; stroke: currentColor !important; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#agdt-instalar .agdt-instalar-flecha svg,
#agdt-instalar .agdt-instalar-flecha svg * { stroke-width: 3.5; }
#agdt-instalar .agdt-instalar-icono { color: var(--agi-azul) !important; }
#agdt-instalar .agdt-instalar-flecha { color: #fff !important; }
/* La flechita de descargar, en la esquina del teléfono. */
#agdt-instalar .agdt-instalar-flecha {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--agi-azul);
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
    animation: agdt-instalar-baja 1.2s var(--agi-salida) 5 both;
}
/* El latido: una onda que sale del ícono unas pocas veces y se queda quieta. */
#agdt-instalar .agdt-instalar-onda {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(34, 131, 207, .32);
    opacity: 0;
    pointer-events: none;
    animation: agdt-instalar-onda 1.2s cubic-bezier(0, 0, .2, 1) 5 both;
}
@keyframes agdt-instalar-onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes agdt-instalar-baja { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
@media (hover: hover) and (pointer: fine) {
    #agdt-instalar:hover .agdt-instalar-icono { background: rgba(34, 131, 207, .2); }
}

/* La ayuda de las primeras veces. */
#agdt-instalar-ayuda {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-height: 0;
    margin: 0;
    padding: 9px 12px;
    border: 0 !important;
    border-radius: 12px;
    background: var(--agi-tinta) !important;
    color: #fff !important;
    font: 600 13px/1.2 Roboto, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgba(18, 35, 61, .55);
    cursor: pointer;
    transform-origin: calc(100% - 22px) 0;
    animation: agdt-instalar-ayuda 220ms var(--agi-salida) both;
}
#agdt-instalar-ayuda::before {
    content: '';
    position: absolute;
    top: -4px;
    right: 18px;
    width: 9px;
    height: 9px;
    background: var(--agi-tinta);
    transform: rotate(45deg);
}
@keyframes agdt-instalar-ayuda { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }

/* iPhone: los dos pasos, en una hoja que sube desde abajo. */
#agdt-instalar-velo {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(18, 35, 61, .45);
    opacity: 0;
    transition: opacity 200ms ease;
}
#agdt-instalar-velo.visible { opacity: 1; }
#agdt-instalar-pasos {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    box-sizing: border-box;
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background: #fff;
    color: var(--agi-gris);
    font: 400 15px/1.45 Roboto, system-ui, sans-serif;
    box-shadow: 0 -18px 40px -18px rgba(18, 35, 61, .4);
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
    overscroll-behavior: contain;
}
#agdt-instalar-pasos.visible { transform: none; }
#agdt-instalar-pasos h2 { margin: 0 0 6px; color: var(--agi-tinta); font: 600 20px/1.25 Poppins, Roboto, system-ui, sans-serif; letter-spacing: -.01em; }
#agdt-instalar-pasos p { margin: 0 0 16px; color: var(--agi-gris); font-size: 15px; }
#agdt-instalar-pasos ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
#agdt-instalar-pasos li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--agi-linea); border-radius: 16px; color: var(--agi-gris); }
#agdt-instalar-pasos li > span { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; height: 36px; border-radius: 50%; background: rgba(34, 131, 207, .12); color: var(--agi-azul); }
#agdt-instalar-pasos li b { color: var(--agi-tinta); font-weight: 600; }
#agdt-instalar-pasos .agdt-instalar-botones { display: flex; gap: 10px; }
#agdt-instalar-pasos .agdt-instalar-botones button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--agi-linea) !important;
    border-radius: 99px;
    background: #fff !important;
    color: var(--agi-tinta) !important;
    font: 600 15px/1.2 Roboto, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 140ms var(--agi-salida);
}
#agdt-instalar-pasos .agdt-instalar-botones button.principal { border-color: var(--agi-azul) !important; background: var(--agi-azul) !important; color: #fff !important; }
#agdt-instalar-pasos .agdt-instalar-botones button:active { transform: scale(.97); }
#agdt-instalar-pasos .agdt-instalar-botones button:focus-visible { outline: 2px solid var(--agi-azul); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    #agdt-instalar .agdt-instalar-onda, #agdt-instalar .agdt-instalar-flecha, #agdt-instalar-ayuda { animation: none; }
    #agdt-instalar-pasos, #agdt-instalar-velo, #agdt-instalar { transition: none; }
}