/* ══════════════════════════════════════════════════════════════════
   Dentara — «Instala la app» (RONDA 112) · ver assets/js/app-install.js

   Vive en <body>, en la pantalla de acceso y en /sistema, fuera de
   .dg-sistema: trae sus propios tokens y va blindado (!important en los
   botones) contra el reset.css de Hello Elementor, igual que el resto de
   elementos que Dentara cuelga del body.
   ══════════════════════════════════════════════════════════════════ */
.dai-root, .dai-chip {
    --dai-bg:      #ffffff;
    --dai-ink:     #0f172a;
    --dai-muted:   #64748b;
    --dai-line:    rgba(15, 23, 42, .09);
    --dai-soft:    #f3f5fb;
    --dai-accent:  #4f46e5;
    --dai-accent-2:#4338ca;
    --dai-accent-pale: #eef1ff;
    --dai-mint:    #2f7d5b;
    --dai-shadow:  0 -18px 60px -18px rgba(10, 22, 40, .45), 0 -2px 10px rgba(10, 22, 40, .08);
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--dai-ink);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
.dai-root *, .dai-chip *, .dai-root *::before, .dai-chip *::before, .dai-root *::after, .dai-chip *::after { box-sizing: border-box; }

html[data-dentara-theme="dark"] .dai-root,
html[data-dentara-theme="dark"] .dai-chip {
    --dai-bg: #171a24; --dai-ink: #e8e9ee; --dai-muted: #9aa0b2; --dai-line: rgba(255, 255, 255, .1);
    --dai-soft: #20242f; --dai-accent: #6366f1; --dai-accent-2: #4f46e5; --dai-accent-pale: rgba(129, 140, 248, .16);
    --dai-mint: #8fc6a6;
}
@media (prefers-color-scheme: dark) {
    /* Pantalla de acceso: no tiene tema propio, sigue al del teléfono. */
    .dai-root.dai-auto {
        --dai-bg: #171a24; --dai-ink: #e8e9ee; --dai-muted: #9aa0b2; --dai-line: rgba(255, 255, 255, .1);
        --dai-soft: #20242f; --dai-accent: #6366f1; --dai-accent-2: #4f46e5; --dai-accent-pale: rgba(129, 140, 248, .16);
        --dai-mint: #8fc6a6;
    }
}

/* ── Contenedor ── */
.dai-root {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
}
.dai-backdrop {
    position: absolute; inset: 0; pointer-events: auto;
    background: rgba(8, 15, 30, .52);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .28s ease;
}
.dai-sheet {
    position: relative; pointer-events: auto;
    width: 100%; max-width: 460px;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--dai-bg);
    border-radius: 26px 26px 0 0;
    padding: 12px 22px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--dai-shadow);
    transform: translateY(105%);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
    outline: none;
}
.dai-root.is-open .dai-backdrop { opacity: 1; }
.dai-root.is-open .dai-sheet    { transform: none; }

.dai-grip { display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--dai-line); margin: 0 auto 14px; }

.dai-x,
.dai-root .dai-x {
    position: absolute; top: 14px; right: 14px;
    width: 34px !important; height: 34px !important; min-height: 0 !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0 !important; margin: 0 !important;
    border: none !important; border-radius: 50% !important;
    background: var(--dai-soft) !important; color: var(--dai-muted) !important;
    cursor: pointer; box-shadow: none !important;
}
.dai-x svg { width: 16px; height: 16px; }
.dai-root svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Presentación ── */
.dai-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.dai-appicon {
    width: 64px !important; height: 64px !important; max-width: none !important; flex: 0 0 64px;
    border-radius: 15px !important; display: block;
    box-shadow: 0 8px 22px -8px rgba(10, 22, 40, .55);
}
.dai-title,
.dai-root h2.dai-title {
    margin: 0 !important; padding: 0 !important;
    font: 700 19px/1.25 'Poppins', 'Inter', system-ui, -apple-system, sans-serif !important;
    letter-spacing: -.01em; color: var(--dai-ink) !important; text-transform: none !important;
}
.dai-sub,
.dai-root p.dai-sub { margin: 4px 0 0 !important; padding: 0 !important; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--dai-muted) !important; }
.dai-sub-wide { margin-top: 12px !important; }
.dai-sub b, .dai-step-title b, .dai-step-text b { color: var(--dai-ink); font-weight: 600; }

.dai-benefits,
.dai-root ul.dai-benefits { list-style: none !important; margin: 18px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.dai-benefits li { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.35; color: var(--dai-ink); list-style: none !important; }
.dai-benefits li::before, .dai-steps li::before { content: none !important; }
.dai-b-ico {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dai-accent-pale); color: var(--dai-accent);
}
.dai-b-ico svg { width: 18px; height: 18px; }

/* ── Botones (blindados contra el tema) ── */
.dai-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.dai-btn,
.dai-root .dai-btn,
.dai-root a.dai-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100% !important; min-height: 50px !important;
    padding: 0 18px !important; margin: 0 !important;
    border: none !important; border-radius: 14px !important;
    font: 600 15px/1 'Poppins', 'Inter', system-ui, -apple-system, sans-serif !important;
    letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
    cursor: pointer; box-shadow: none !important;
    transition: transform .15s ease, background-color .2s ease;
    -webkit-appearance: none; appearance: none;
}
.dai-btn:active { transform: scale(.98); }
.dai-btn svg { width: 18px; height: 18px; }
.dai-btn-primary,
.dai-root .dai-btn-primary,
.dai-root a.dai-btn-primary,
.dai-root .dai-btn-primary:hover,
.dai-root .dai-btn-primary:focus {
    background: linear-gradient(135deg, var(--dai-accent), var(--dai-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .8) !important;
}
.dai-btn-ghost,
.dai-root .dai-btn-ghost,
.dai-root .dai-btn-ghost:hover,
.dai-root .dai-btn-ghost:focus { background: var(--dai-soft) !important; color: var(--dai-ink) !important; }
.dai-btn-soft,
.dai-root .dai-btn-soft,
.dai-root .dai-btn-soft:hover,
.dai-root .dai-btn-soft:focus {
    width: auto !important; min-height: 40px !important; flex: 0 0 auto; padding: 0 14px !important;
    font-size: 13.5px !important; border-radius: 11px !important;
    background: var(--dai-accent-pale) !important; color: var(--dai-accent) !important;
}
.dai-link,
.dai-root .dai-link,
.dai-root .dai-link:hover,
.dai-root .dai-link:focus {
    display: block !important; width: 100% !important; margin: 12px 0 0 !important; padding: 6px !important;
    background: none !important; border: none !important; box-shadow: none !important;
    font: 500 13px/1.3 'Poppins', 'Inter', system-ui, sans-serif !important;
    color: var(--dai-muted) !important; text-decoration: underline !important; text-underline-offset: 3px;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; min-height: 0 !important;
}
.dai-root .dai-btn:focus-visible, .dai-root .dai-link:focus-visible, .dai-root .dai-x:focus-visible, .dai-root .dai-back:focus-visible {
    outline: 2px solid var(--dai-accent) !important; outline-offset: 2px;
}
.dai-url { margin: 10px 0 0 !important; text-align: center; font-size: 12.5px !important; color: var(--dai-muted) !important; letter-spacing: .01em; }

/* ── Guía de 3 pasos ── */
.dai-guide-head { display: flex; align-items: center; gap: 10px; padding-right: 40px; }
.dai-back,
.dai-root .dai-back {
    width: 34px !important; height: 34px !important; min-height: 0 !important; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 !important; margin: 0 0 0 -6px !important;
    border: none !important; border-radius: 50% !important;
    background: transparent !important; color: var(--dai-muted) !important; cursor: pointer; box-shadow: none !important;
}
.dai-back svg { width: 20px; height: 20px; }

.dai-steps,
.dai-root ol.dai-steps { list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; counter-reset: none; }
.dai-step {
    display: flex; align-items: center; gap: 12px;
    margin: 0 !important; padding: 12px 14px !important;
    border: 1px solid var(--dai-line); border-radius: 16px; background: var(--dai-bg);
    list-style: none !important;
}
.dai-step-n {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--dai-accent); color: #fff; font-size: 13px; font-weight: 700;
}
.dai-step-body { flex: 1 1 auto; min-width: 0; }
.dai-step-title { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--dai-ink); }
.dai-step-text  { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--dai-muted); }
.dai-step-ico {
    flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dai-soft); color: #0a84ff;            /* azul de los controles de iOS */
}
.dai-step-ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.dai-add { font: 600 13.5px/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; color: #0a84ff; }

.dai-note,
.dai-root p.dai-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 14px 0 0 !important; padding: 0 !important;
    font-size: 13px !important; line-height: 1.45 !important; color: var(--dai-muted) !important;
}
.dai-note svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--dai-mint); stroke-width: 2.6; }

.dai-copy {
    display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 8px 8px 14px;
    border: 1px solid var(--dai-line); border-radius: 14px; background: var(--dai-soft);
}
.dai-copy-url { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flecha hacia la barra de Safari (iPhone) */
.dai-pointer { display: flex; justify-content: center; margin: 12px 0 -6px; color: #0a84ff; animation: dai-bob 1.5s ease-in-out infinite; }
.dai-pointer svg { width: 22px; height: 22px; stroke-width: 2.4; }
@keyframes dai-bob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } }

/* ── Recordatorio pequeño (dentro del sistema) ── */
.dai-chip {
    position: fixed; z-index: 2147482000;
    left: 12px; right: 86px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: 420px;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px 10px 10px;
    background: var(--dai-bg); border: 1px solid var(--dai-line); border-radius: 18px;
    box-shadow: 0 18px 40px -16px rgba(10, 22, 40, .5), 0 2px 8px rgba(10, 22, 40, .08);
    opacity: 0; transform: translateY(16px);
    transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.dai-chip.is-open { opacity: 1; transform: none; }
.dai-chip-icon { width: 38px !important; height: 38px !important; max-width: none !important; flex: 0 0 38px; border-radius: 10px !important; display: block; }
.dai-chip-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.dai-chip-text b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--dai-ink); }
.dai-chip .dai-chip-go,
.dai-chip .dai-chip-go:hover,
.dai-chip .dai-chip-go:focus {
    flex: 0 0 auto; min-height: 34px !important; padding: 0 12px !important; margin: 0 !important;
    border: none !important; border-radius: 10px !important;
    background: var(--dai-accent) !important; color: #fff !important;
    font: 600 12.5px/1 'Poppins', 'Inter', system-ui, sans-serif !important;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; white-space: nowrap;
}
.dai-chip .dai-chip-x,
.dai-chip .dai-chip-x:hover,
.dai-chip .dai-chip-x:focus {
    flex: 0 0 28px; width: 28px !important; height: 28px !important; min-height: 0 !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important;
    background: transparent !important; color: var(--dai-muted) !important; cursor: pointer; box-shadow: none !important;
}
.dai-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Tablet / pantallas anchas: tarjeta flotante ── */
@media (min-width: 600px) {
    .dai-root { align-items: center; }
    .dai-sheet { border-radius: 26px; padding-bottom: 22px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
    .dai-root.is-open .dai-sheet { opacity: 1; }
    .dai-grip, .dai-pointer { display: none; }
    .dai-sheet { padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .dai-sheet, .dai-backdrop, .dai-chip { transition-duration: .01ms !important; }
    .dai-pointer { animation: none; }
}