/* ══════════════════════════════════════════════════════════════════════════════
   voz-layer.css  —  GeoVoz: burbujas efímeras sobre el mapa
   Depende de: variables-luxury.css (cargado antes en map.php)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Burbuja flotante — cartel ──────────────────────────────────────────────── */
.gv-bubble {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 650;
    pointer-events: auto;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    min-width: 210px;
    max-width: 290px;

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 14px 14px 14px 4px;
    box-shadow:
        0 20px 56px rgba(0,0,0,.38),
        0 4px 16px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.95);

    animation: gv-pop-in .62s cubic-bezier(.175,.885,.32,1.275) both;
    transition: opacity .38s ease, transform .38s ease;
    overflow: visible;
}
.gv-bubble:hover {
    box-shadow:
        0 22px 60px rgba(0,0,0,.44),
        0 5px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.95);
    transform: translate(-50%, -102%) scale(1.02);
}
.gv-bubble.gv-fade-out {
    opacity: 0;
    transform: translate(-50%, -112%);
}
/* Ring de sonar al aterrizar */
.gv-bubble::before {
    content:''; position:absolute; inset:-4px;
    border-radius:18px 18px 18px 6px;
    border:2px solid rgba(27,59,111,.5);
    animation:gv-ring .78s ease .54s both;
    pointer-events:none; z-index:-1;
}
@keyframes gv-ring {
    0%   { transform:scale(.88); opacity:.8; }
    100% { transform:scale(1.5);  opacity:0; }
}

/* ── Header bar coloreado por tipo ─────────────────────────────────────────── */
.gv-bubble-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px 8px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #1B3B6F 0%, #2d5296 100%);
    position: relative;
    overflow: hidden;
}
/* Shine sweep al aparecer */
.gv-bubble-header::after {
    content:''; position:absolute; top:0; left:-120%;
    width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
    animation:gv-header-shine .65s ease .60s forwards;
    pointer-events:none;
}
@keyframes gv-header-shine {
    0%   { left:-120%; opacity:0; }
    18%  { opacity:1; }
    100% { left:160%; opacity:0; }
}
.gv-bubble[data-tipo="oferta"]  .gv-bubble-header { background: linear-gradient(90deg, #1a6b35, #27ae60); }
.gv-bubble[data-tipo="cultura"] .gv-bubble-header { background: linear-gradient(90deg, #5e2080, #8e44ad); }
.gv-bubble[data-tipo="deporte"] .gv-bubble-header { background: linear-gradient(90deg, #145580, #2980b9); }
.gv-bubble[data-tipo="alerta"]  .gv-bubble-header { background: linear-gradient(90deg, #9b2c2c, #e74c3c); }
.gv-bubble[data-tipo="en_vivo"] .gv-bubble-header { background: linear-gradient(90deg, #8c3a00, #e67e22); }

/* Megáfono SVG */
.gv-megaphone {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.92);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
/* Tipo badge */
.gv-tipo-badge {
    flex: 1;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── Luz parpadeante ───────────────────────────────────────────────────────── */
.gv-blink-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd54f;
    animation: gv-blink 1.4s ease-in-out infinite;
}
@keyframes gv-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(255,213,79,.3),
                    0 0 9px rgba(255,213,79,.85);
    }
    50% {
        opacity: 0.18;
        box-shadow: none;
    }
}

/* ── Cuerpo ────────────────────────────────────────────────────────────────── */
.gv-bubble-body {
    padding: 13px 15px 12px;
}
.gv-bubble-texto {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.58;
    color: #0f172a;
    word-break: break-word;
    text-align: center;
    letter-spacing: -.01em;
}
/* Formato inline: negrita, cursiva, subrayado */
.gv-bubble-texto strong { font-weight:900; color:#0a0f1e; }
.gv-bubble-texto em     { font-style:italic; color:#1e3a5f; font-weight:500; }
.gv-bubble-texto u      { text-decoration:none; border-bottom:2px solid #2d5296; padding-bottom:1px; }
.gv-bubble-negocio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: #64748b;
    margin-top: 7px;
}
.gv-bubble-neg-link {
    color: #2d5296;
    font-weight: 700;
    text-decoration: none;
}
.gv-bubble-neg-link:hover { text-decoration: underline; }

/* ── Cola triangular ───────────────────────────────────────────────────────── */
.gv-bubble::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 10px solid #1B3B6F;
    border-bottom: 9px solid transparent;
}
.gv-bubble[data-tipo="oferta"]::after   { border-left-color: #1a6b35; }
.gv-bubble[data-tipo="cultura"]::after  { border-left-color: #5e2080; }
.gv-bubble[data-tipo="deporte"]::after  { border-left-color: #145580; }
.gv-bubble[data-tipo="alerta"]::after   { border-left-color: #9b2c2c; }
.gv-bubble[data-tipo="en_vivo"]::after  { border-left-color: #8c3a00; }

/* ── Animación de entrada ──────────────────────────────────────────────────── */
@keyframes gv-pop-in {
    0%   { opacity:0; transform:translate(-50%,-78%) scale(.07); filter:blur(7px); }
    50%  { opacity:1; transform:translate(-50%,-107%) scale(1.13); filter:blur(0); }
    70%  { transform:translate(-50%,-99%) scale(.97); }
    86%  { transform:translate(-50%,-102%) scale(1.03); }
    100% { transform:translate(-50%,-100%) scale(1); }
}

/* ── Beacon — punto pulsante en el origen del anuncio ─────────────────────── */
.gv-beacon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2d5296;
    animation: gv-beacon-ripple 1.8s ease-out infinite;
    box-sizing: border-box;
}
.gv-beacon[data-tipo="oferta"]  { background: #27ae60; }
.gv-beacon[data-tipo="cultura"] { background: #8e44ad; }
.gv-beacon[data-tipo="deporte"] { background: #2980b9; }
.gv-beacon[data-tipo="alerta"]  { background: #e74c3c; }
.gv-beacon[data-tipo="en_vivo"] { background: #e67e22; }

@keyframes gv-beacon-ripple {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,.55),
                       0 0 0 0   rgba(255,255,255,.25); opacity: 1; }
    60%  { box-shadow: 0 0 0 10px rgba(255,255,255,.0),
                       0 0 0 20px rgba(255,255,255,.0); opacity: 0.85; }
    100% { box-shadow: 0 0 0 0   rgba(255,255,255,0),
                       0 0 0 0   rgba(255,255,255,0);   opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GeoVoz Control Room  —  Panel de emisión para comerciantes
   ═══════════════════════════════════════════════════════════════════════════ */
#geovoz-control {
    position: fixed;
    bottom: 50px;
    right: 16px;
    z-index: 1100;
    font-family: var(--font-primary, system-ui, sans-serif);
}

/* FAB button */
#gv-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold-primary, #c9a84c), #b8892a);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: var(--shadow-gold-lg, 0 6px 24px rgba(201,168,76,.5));
    transition: transform .2s ease, box-shadow .2s ease;
    color: #fff;
}
#gv-fab:hover { transform: scale(1.08); }
#gv-fab .gv-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 5px;
    display: none;
}

/* Panel expandido */
#gv-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,.98);
    border-radius: var(--border-radius-xl, 16px);
    box-shadow: var(--shadow-gold-lg, 0 8px 32px rgba(0,0,0,.18));
    padding: 16px;
    width: 280px;
    border-top: 3px solid var(--color-gold-primary, #c9a84c);
    margin-bottom: 10px;
    animation: gv-panel-in .25s cubic-bezier(.34,1.2,.64,1) both;
}
#geovoz-control.gv-open #gv-panel { display: flex; }
#geovoz-control.gv-open #gv-fab   { background: linear-gradient(135deg,#e74c3c,#c0392b); }

@keyframes gv-panel-in {
    from { opacity:0; transform: translateY(10px) scale(.95); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Header del panel */
.gv-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gv-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gv-panel-biz {
    font-size: 11px;
    color: #666;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Templates rápidos */
.gv-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.gv-tpl-btn {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-weight: 500;
    color: #333;
}
.gv-tpl-btn:hover {
    background: var(--color-gold-primary, #c9a84c);
    border-color: var(--color-gold-primary, #c9a84c);
    color: #fff;
}

/* Textarea */
.gv-textarea-wrap {
    position: relative;
}
#gv-texto {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #e0d9cc;
    border-radius: 10px;
    padding: 9px 10px 22px;
    font-size: 13px;
    resize: none;
    outline: none;
    font-family: inherit;
    color: #1a1a2e;
    transition: border-color .15s;
    background: #fafafa;
}
#gv-texto:focus { border-color: var(--color-gold-primary, #c9a84c); background:#fff; }
.gv-chars {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 10px;
    color: #aaa;
    pointer-events: none;
}
.gv-chars.gv-near { color: #e67e22; }
.gv-chars.gv-over { color: #e74c3c; }

/* Fila tipo + duración */
.gv-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.gv-row label {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}
.gv-row select {
    flex: 1;
    padding: 5px 8px;
    border: 1.5px solid #e0d9cc;
    border-radius: 8px;
    font-size: 12px;
    background: #fafafa;
    color: #333;
    outline: none;
}
.gv-row select:focus { border-color: var(--color-gold-primary, #c9a84c); }

/* Cooldown bar */
.gv-cooldown {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.gv-cooldown.gv-active { display: flex; }
.gv-cooldown-label {
    font-size: 10.5px;
    color: #888;
    text-align: center;
}
.gv-cooldown-bar-track {
    height: 4px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}
.gv-cooldown-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-primary, #c9a84c), #b8892a);
    border-radius: 4px;
    transition: width .5s linear;
}

/* Botón emitir */
#gv-submit {
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-gold-primary, #c9a84c), #b8892a);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: opacity .2s;
    letter-spacing: .3px;
}
#gv-submit:hover:not(:disabled) { opacity: .88; }
#gv-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 1;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #geovoz-control { bottom: 50px; right: 10px; }
    #gv-panel { width: 260px; }
}