/* ════════════════════════════════════════════════════════════════════
   PEDIDO RÁPIDO CON IA — la ventanita de gestión de rutas
   Botón flotante, ventana con el cuadro de texto y la animación de
   "generando pedido" mientras FLORE lo apunta.
   ════════════════════════════════════════════════════════════════════ */

/* ── Barra de escribir, con el aire del buscador de arriba ──
   Va sobre el mapa, centrada en la parte de arriba: se escribe el pedido
   ahí mismo y al enviar sale la ventana con la animación. */
.pr-barra-busqueda {
    position: absolute; top: 70px; z-index: 1100;
    left: 50%; transform: translateX(-50%);
    width: min(560px, calc(100vw - var(--sidebar-width, 350px) - 90px));
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 6px 16px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .12);
    transition: box-shadow .2s, border-color .2s;
}
.pr-barra-busqueda:focus-within {
    border-color: #a78bfa;
    box-shadow: 0 6px 26px rgba(109, 40, 217, .22);
}
.pr-barra-f { font-size: 19px; flex-shrink: 0; }

/* Pedido o presupuesto, dentro de la propia barra */
.pr-barra-modos {
    display: flex; gap: 2px; padding: 2px; flex-shrink: 0;
    background: #f1f5f9; border-radius: 9px;
}
.pr-barra-modos button {
    width: 30px; height: 26px; border: none; border-radius: 7px; cursor: pointer;
    background: transparent; color: #94a3b8; font-size: 12.5px;
    transition: background .15s, color .15s;
}
.pr-barra-modos button:hover { background: #e2e8f0; color: #475569; }
.pr-barra-modos button.activo { background: #fff; color: #6d28d9; box-shadow: 0 1px 3px rgba(15, 23, 42, .16); }
.pr-barra-modos button:disabled { opacity: .5; cursor: not-allowed; }
.pr-barra-busqueda input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font: 14px 'Segoe UI', sans-serif; color: #1e293b; padding: 8px 0;
}
.pr-barra-busqueda input::placeholder { color: #94a3b8; }
.pr-barra-enviar {
    flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%;
    cursor: pointer; color: #fff; font-size: 14px;
    background: linear-gradient(135deg, #6d28d9, #2563eb);
    box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
    transition: filter .15s, transform .1s;
}
.pr-barra-enviar:hover { filter: brightness(1.1); }
.pr-barra-enviar:active { transform: scale(.94); }

/* ── Ventana ── */
.pr-fondo {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.pr-fondo.abierto { display: flex; animation: pr-aparecer .18s ease; }
@keyframes pr-aparecer { from { opacity: 0 } to { opacity: 1 } }

.pr-ventana {
    width: min(560px, 100%); max-height: 90vh; overflow: hidden auto;
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    animation: pr-subir .22s cubic-bezier(.2, .8, .3, 1);
    display: flex; flex-direction: column;
}
@keyframes pr-subir { from { transform: translateY(18px) scale(.97); opacity: .6 } to { transform: none; opacity: 1 } }

.pr-cabecera {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; color: #fff;
    background: linear-gradient(135deg, #6d28d9 0%, #2563eb 60%, #0ea5e9 100%);
}
/* Izquierda de la cabecera: pedido o presupuesto */
.pr-modos {
    display: flex; gap: 4px; padding: 3px;
    background: rgba(255, 255, 255, .16); border-radius: 10px; flex-shrink: 0;
}
.pr-modos button {
    width: 34px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
    background: transparent; color: rgba(255, 255, 255, .75); font-size: 14px;
    transition: background .15s, color .15s, transform .1s;
}
.pr-modos button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.pr-modos button.activo { background: #fff; color: #6d28d9; box-shadow: 0 1px 4px rgba(15, 23, 42, .2); }
.pr-modos button:disabled { opacity: .5; cursor: not-allowed; }

.pr-titulo { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.pr-titulo .flore-f { font-size: 22px; }
.pr-cerrar {
    border: none; background: rgba(255, 255, 255, .18); color: #fff;
    width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 15px;
}
.pr-cerrar:hover { background: rgba(255, 255, 255, .32); }

/* ── Formulario ── */
.pr-cuerpo { padding: 18px; }
#prTexto {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
    border: 2px solid #e2e8f0; border-radius: 12px; padding: 13px 15px;
    font: 15px 'Segoe UI', sans-serif; color: #1e293b; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#prTexto:focus { border-color: #6d28d9; box-shadow: 0 0 0 4px rgba(109, 40, 217, .12); }
#prTexto::placeholder { color: #94a3b8; }

.pr-ejemplos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pr-ejemplos button {
    border: 1px solid #e9d5ff; background: #faf5ff; color: #6d28d9;
    border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
    text-align: left; transition: background .15s;
}
.pr-ejemplos button:hover { background: #f3e8ff; }

.pr-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pr-nota { font-size: 12px; color: #64748b; }
.pr-crear {
    display: inline-flex; align-items: center; gap: 8px;
    border: none; border-radius: 12px; padding: 12px 20px; cursor: pointer;
    color: #fff; font-size: 14.5px; font-weight: 700; font-family: inherit;
    background: linear-gradient(135deg, #6d28d9, #2563eb);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .32);
    transition: filter .15s, transform .1s;
}
.pr-crear:hover { filter: brightness(1.08); }
.pr-crear:disabled { opacity: .6; cursor: wait; }

/* ── Animación de generación ── */
.pr-trabajando { display: none; padding: 26px 22px 22px; text-align: center; }
.pr-trabajando.visible { display: block; }

.pr-orbe {
    position: relative; width: 108px; height: 108px; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
}
.pr-orbe .flore-f {
    font-size: 40px; z-index: 2;
    animation: pr-latido 1.6s ease-in-out infinite;
}
@keyframes pr-latido {
    0%, 100% { transform: scale(1); opacity: .95 }
    50% { transform: scale(1.14); opacity: 1 }
}
/* Tres anillos girando a distinta velocidad */
.pr-orbe i {
    position: absolute; border-radius: 50%; border: 2px solid transparent;
    animation: pr-girar 2.4s linear infinite;
}
.pr-orbe i:nth-child(2) { inset: 0; border-top-color: #6d28d9; border-right-color: #6d28d9; }
.pr-orbe i:nth-child(3) { inset: 13px; border-bottom-color: #2563eb; border-left-color: #2563eb; animation-duration: 1.7s; animation-direction: reverse; }
.pr-orbe i:nth-child(4) { inset: 26px; border-top-color: #0ea5e9; animation-duration: 1.1s; }
@keyframes pr-girar { to { transform: rotate(360deg) } }

.pr-pasos { display: flex; flex-direction: column; gap: 9px; text-align: left; max-width: 340px; margin: 0 auto; }
.pr-paso {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: #94a3b8;
    opacity: .45; transform: translateX(-6px);
    transition: opacity .3s, transform .3s, color .3s;
}
.pr-paso.activo { opacity: 1; transform: none; color: #1e293b; font-weight: 600; }
.pr-paso.hecho { opacity: 1; transform: none; color: #15803d; }
.pr-paso-icono {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #e2e8f0; color: #94a3b8; font-size: 11px;
}
.pr-paso.activo .pr-paso-icono { background: #ede9fe; color: #6d28d9; animation: pr-pulso 1.2s ease-in-out infinite; }
.pr-paso.hecho .pr-paso-icono { background: #dcfce7; color: #15803d; }
@keyframes pr-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, .35) }
    70% { box-shadow: 0 0 0 8px rgba(109, 40, 217, 0) }
}

.pr-barra { height: 4px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-top: 22px; }
.pr-barra span {
    display: block; height: 100%; width: 40%;
    background: linear-gradient(90deg, #6d28d9, #2563eb, #0ea5e9);
    border-radius: 999px; animation: pr-recorrer 1.4s ease-in-out infinite;
}
@keyframes pr-recorrer {
    0% { margin-left: -40% } 100% { margin-left: 100% }
}

/* ── Resultado ── */
.pr-hecho { display: none; padding: 26px 22px 22px; text-align: center; }
.pr-hecho.visible { display: block; animation: pr-aparecer .25s ease; }
.pr-tic {
    width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #dcfce7; color: #15803d; font-size: 30px;
    animation: pr-tic-entra .45s cubic-bezier(.2, 1.4, .4, 1);
}
.pr-hecho.error .pr-tic { background: #fee2e2; color: #b91c1c; }
@keyframes pr-tic-entra { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.pr-hecho h3 { color: #0f172a; font-size: 18px; margin-bottom: 10px; }
.pr-resumen {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 13px 15px; font-size: 13.5px; color: #334155; line-height: 1.6;
    text-align: left; white-space: pre-wrap; word-break: break-word;
}
.pr-acciones { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pr-otro, .pr-ver {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 10px; padding: 10px 16px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; font-family: inherit;
}
.pr-otro { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.pr-otro:hover { background: #f1f5f9; }
.pr-ver { border: none; background: linear-gradient(135deg, #6d28d9, #2563eb); color: #fff; }
.pr-ver:hover { filter: brightness(1.08); }

/* Marcador recién creado: destella en el mapa */
.pr-marcador-nuevo { animation: pr-destello 1.1s ease-out 3; transform-origin: center bottom; }
@keyframes pr-destello {
    0% { filter: drop-shadow(0 0 0 rgba(109, 40, 217, .9)); transform: scale(1) }
    35% { filter: drop-shadow(0 0 14px rgba(109, 40, 217, .95)); transform: scale(1.22) }
    100% { filter: drop-shadow(0 0 0 rgba(109, 40, 217, 0)); transform: scale(1) }
}

@media (max-width: 1100px) {
    .pr-barra-busqueda { width: min(460px, calc(100vw - var(--sidebar-width, 350px) - 60px)); }
}
@media (max-width: 768px) {
    /* En el móvil la barra entera tapaba medio mapa y se pintaba encima
       del desplegable de pedidos. Se encoge a un botón redondo con la F,
       debajo del botón ☰ (que va en izquierda:10, de 60 a 100): al
       tocarlo se abre la ventana de siempre, que en pantalla pequeña se
       ve mucho mejor que la barra (lo engancha pedido-rapido.js). */
    .pr-barra-busqueda {
        left: 10px; right: auto; top: 110px;
        width: 44px; height: 44px; padding: 0;
        transform: none; justify-content: center;
        border-radius: 50%; cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    }
    .pr-barra-busqueda .pr-barra-modos,
    .pr-barra-busqueda input,
    .pr-barra-busqueda .pr-barra-enviar { display: none; }
    .pr-barra-f { font-size: 22px; }
    /* Con el desplegable de pedidos abierto, el botón desaparece: la F
       flotaba por encima de la lista y estorbaba para leerla. */
    body:has(.sidebar.active) .pr-barra-busqueda { display: none; }
    .pr-ventana { width: 100%; border-radius: 14px; }
    .pr-pie { flex-direction: column; align-items: stretch; }
    .pr-crear { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-orbe .flore-f, .pr-orbe i, .pr-barra span, .pr-paso.activo .pr-paso-icono,
    .pr-tic, .pr-marcador-nuevo { animation: none !important; }
}