/*
  PillcoBot — widget de chat de Viaje Informado.
  Namespace: .pcbot / #pcbot-* para no colisionar con el resto del sitio.
  z-index: 1035–1040, por debajo de modales Bootstrap (1055) y del toast
  global (1080, esquina opuesta) para no romper esos overlays.
*/
.pcbot {
    --pcbot-white: #FFFFFF;
    --pcbot-navy: #002D89;
    --pcbot-blue: #007FFF;
    --pcbot-bg: #F7F9FD;
    --pcbot-bg-soft: #EEF3FB;
    --pcbot-text: #182033;
    --pcbot-muted: #61708C;
    --pcbot-border: #DFE7F3;
    --pcbot-font: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
    font-family: var(--pcbot-font);
}

.pcbot * {
    box-sizing: border-box;
    min-width: 0;
}

/* ---------- Botón flotante ---------- */
.pcbot-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--pcbot-border);
    background: var(--pcbot-white);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 45, 137, 0.18);
    cursor: pointer;
    z-index: 1035;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pcbot-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 14px 34px rgba(0, 45, 137, 0.24);
}

.pcbot-fab:focus-visible {
    outline: 2px solid var(--pcbot-blue);
    outline-offset: 3px;
}

.pcbot-fab__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
}

/* Con el panel abierto, PillcoBot ya tiene una representación principal
   (la cabecera): ocultar el FAB evita mostrar dos veces el mismo icono. */
.pcbot.is-open .pcbot-fab {
    display: none;
}

/* ---------- Backdrop (solo móvil) ---------- */
.pcbot-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(24, 32, 51, 0.32);
    z-index: 1036;
    opacity: 0;
    transition: opacity .22s ease;
}

.pcbot.is-open .pcbot-backdrop {
    opacity: 1;
}

/* Scroll lock real (móvil): el fondo queda TOTALMENTE congelado mientras el
   bottom sheet está abierto — ni scroll vertical, ni horizontal, ni el
   "rubber-band" de Safari. body.style.top lo fija el JS (bloquearScroll) al
   scrollY exacto para poder restaurarlo al cerrar. No cambia nada del sitio
   cuando el chat está cerrado. */
html.pcbot-lock-scroll {
    overflow: hidden;
}

body.pcbot-lock-scroll {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* ---------- Panel (desktop: ventana flotante) ---------- */
.pcbot-panel {
    position: fixed;
    right: 24px;
    bottom: 100px;
    right: max(24px, env(safe-area-inset-right));
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 380px;
    max-width: calc(100vw - 32px);
    height: min(640px, 78vh);
    background: var(--pcbot-white);
    border-radius: 20px;
    border: 1px solid var(--pcbot-border);
    box-shadow: 0 24px 60px rgba(24, 32, 51, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    z-index: 1040;
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .22s ease, transform .22s ease;
    color: var(--pcbot-text);
}

/* La transición se anula temporalmente mientras el JS arrastra el panel
   (drag-to-close): así el gesto sigue al dedo sin retraso. */
.pcbot-panel.is-dragging {
    transition: none;
}

.pcbot.is-open .pcbot-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pcbot-panel[hidden] {
    display: none;
}

.pcbot-handle {
    display: none;
}

.pcbot-draghandle {
    display: none;
}

/* ---------- Cabecera ---------- */
.pcbot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--pcbot-navy), var(--pcbot-blue));
    color: var(--pcbot-white);
    flex: 0 0 auto;
}

.pcbot-header__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.pcbot-header__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--pcbot-white);
    padding: 3px;
    flex: 0 0 auto;
}

.pcbot-header__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.pcbot-header__name {
    font-weight: 700;
    font-size: .98rem;
}

.pcbot-header__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    opacity: .92;
}

.pcbot-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    display: inline-block;
}

.pcbot-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.pcbot-iconbtn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--pcbot-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s ease;
}

.pcbot-iconbtn:hover {
    background: rgba(255, 255, 255, 0.26);
}

.pcbot-iconbtn:focus-visible {
    outline: 2px solid var(--pcbot-white);
    outline-offset: 2px;
}

/* ---------- Área de mensajes ---------- */
.pcbot-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--pcbot-bg);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.pcbot-row {
    display: flex;
    gap: 8px;
    max-width: 88%;
    align-items: flex-end;
}

.pcbot-row--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.pcbot-row--bot {
    align-self: flex-start;
}

.pcbot-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    padding: 2px;
    flex: 0 0 auto;
}

.pcbot-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.pcbot-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pcbot-bg);
    border: 1px solid var(--pcbot-border);
    color: var(--pcbot-navy);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pcbot-cta:hover {
    background: var(--pcbot-bg-soft);
    border-color: var(--pcbot-blue);
}

/* "También te puede interesar" — sugerencia contextual discreta, distinta
   de una respuesta del bot. */
.pcbot-suggestion {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pcbot-white);
    border: 1px dashed var(--pcbot-border);
    max-width: 100%;
}

.pcbot-suggestion__label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--pcbot-muted);
    font-weight: 700;
    margin-bottom: 3px;
}

.pcbot-suggestion__text {
    display: block;
    font-size: .84rem;
    color: var(--pcbot-text);
    margin-bottom: 6px;
}

.pcbot-suggestion .pcbot-cta {
    margin-top: 0;
}

.pcbot-row--user .pcbot-bubble {
    background: var(--pcbot-navy);
    color: var(--pcbot-white);
    border-bottom-right-radius: 4px;
}

.pcbot-row--bot .pcbot-bubble {
    background: var(--pcbot-bg-soft);
    color: var(--pcbot-text);
    border-bottom-left-radius: 4px;
}

.pcbot-row--error .pcbot-bubble {
    background: #FDEEEE;
    color: #7A1F1F;
}

/* Escribiendo... */
.pcbot-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 2px;
}

.pcbot-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pcbot-muted);
    opacity: .5;
    animation: pcbot-blink 1.1s infinite ease-in-out;
}

.pcbot-typing span:nth-child(2) {
    animation-delay: .15s;
}

.pcbot-typing span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes pcbot-blink {

    0%,
    80%,
    100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcbot-panel, .pcbot-fab, .pcbot-backdrop, .pcbot-typing span {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Fuentes oficiales ---------- */
.pcbot-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--pcbot-border);
    font-size: .78rem;
}

.pcbot-sources__title {
    display: block;
    color: var(--pcbot-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.pcbot-sources a {
    display: block;
    color: var(--pcbot-navy);
    text-decoration: none;
    padding: 2px 0;
    overflow-wrap: anywhere;
}

.pcbot-sources a:hover {
    text-decoration: underline;
}

/* ---------- Quick actions ---------- */
/* Grid simétrica de 2 columnas: todos los chips comparten ancho y altura
   mínima, sin importar el largo de su label (minmax(0,1fr) evita que el
   contenido empuje una columna más ancha que la otra). */
.pcbot-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
}

.pcbot-chip {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--pcbot-border);
    background: var(--pcbot-white);
    color: var(--pcbot-navy);
    border-radius: 14px;
    padding: 8px 12px;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s ease, border-color .15s ease;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

.pcbot-chip i {
    flex: 0 0 auto;
    font-size: .95rem;
}

.pcbot-chip:hover {
    background: var(--pcbot-bg-soft);
    border-color: var(--pcbot-blue);
}

.pcbot-chip:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- Mini cards ---------- */
/* Una card por fila: en un panel de ~380px, dos cards en horizontal dejaban
   la segunda cortada. El listado completo se recorre con el scroll vertical
   normal de .pcbot-messages, sin scroll horizontal propio. */
.pcbot-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
}

.pcbot-card {
    width: 100%;
    max-width: 100%;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcbot-card__title {
    font-weight: 700;
    font-size: .86rem;
    color: var(--pcbot-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pcbot-card__meta {
    font-size: .76rem;
    color: var(--pcbot-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pcbot-card__cta {
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--pcbot-blue);
    text-decoration: none;
    align-self: flex-start;
}

.pcbot-card__cta:hover {
    text-decoration: underline;
}

.pcbot-cards-title {
    font-size: .8rem;
    color: var(--pcbot-muted);
    font-weight: 600;
    margin-top: 6px;
}

/* ---------- C6.2: componentes estructurados (presentacion.*) ---------- */

/* Clima: una sola card vertical, temperatura con mayor jerarquía */
.pcbot-weather {
    width: 100%;
    max-width: 100%;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 16px;
    padding: 14px 16px;
}

.pcbot-weather__titulo {
    font-size: .84rem;
    color: var(--pcbot-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

.pcbot-weather__principal {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.pcbot-weather__temp {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--pcbot-navy);
    line-height: 1;
}

.pcbot-weather__estado {
    font-size: .9rem;
    color: var(--pcbot-text);
}

.pcbot-weather__detalles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--pcbot-border);
    padding-top: 8px;
}

.pcbot-weather__fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .82rem;
}

.pcbot-weather__fila span:first-child {
    color: var(--pcbot-muted);
}

.pcbot-weather__fila span:last-child {
    color: var(--pcbot-text);
    font-weight: 600;
}

.pcbot-weather__nota {
    margin-top: 8px;
    font-size: .74rem;
    color: var(--pcbot-muted);
    font-style: italic;
}

/* La sugerencia de clima siempre va debajo de la card (nunca al costado) */
.pcbot-row .pcbot-suggestion {
    width: 100%;
}

/* Emergencias: grid de cards nacionales compactas + chips de zona */
.pcbot-emg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.pcbot-emg-card {
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.pcbot-emg-card__nombre {
    font-size: .74rem;
    font-weight: 600;
    color: var(--pcbot-text);
    line-height: 1.25;
}

.pcbot-emg-card__numero {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pcbot-navy);
}

.pcbot-emg-card__meta {
    font-size: .68rem;
    color: var(--pcbot-muted);
    overflow-wrap: anywhere;
}

.pcbot-emg-card__llamar {
    margin-top: 4px;
    display: block;
    background: var(--pcbot-navy);
    color: var(--pcbot-white);
    border-radius: 999px;
    padding: 5px 8px;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
}

.pcbot-emg-card__llamar:hover {
    background: var(--pcbot-blue);
}

.pcbot-emg-prompt {
    width: 100%;
    max-width: 100%;
}

.pcbot-quick--zonas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Eventos */
.pcbot-event-card {
    width: 100%;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pcbot-event-card__fecha {
    align-self: flex-start;
    background: var(--pcbot-bg-soft);
    color: var(--pcbot-navy);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 2px 9px;
    margin-bottom: 2px;
}

.pcbot-event-card__estado {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    color: #B4230B;
}

/* Platos típicos: lista mínima, el nombre es protagonista */
.pcbot-plato-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.pcbot-plato-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 12px;
    padding: 10px 12px;
}

.pcbot-plato-row__nombre {
    font-weight: 600;
    font-size: .88rem;
    color: var(--pcbot-text);
}

.pcbot-plato-row .pcbot-cta {
    margin-top: 0;
}

/* Lugares turísticos */
.pcbot-place-card {
    width: 100%;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcbot-place-card__descripcion {
    font-size: .8rem;
    color: var(--pcbot-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* C8: itinerario — filas de actividad dentro de la card del día */
.pcbot-itin-act {
    padding: 6px 0;
    border-top: 1px solid var(--pcbot-border);
}

.pcbot-itin-act:first-child {
    border-top: 0;
    padding-top: 0;
}

.pcbot-itin-act__momento {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pcbot-muted);
}

/* Movilidad */
.pcbot-mobility-card {
    width: 100%;
    background: var(--pcbot-white);
    border: 1px solid var(--pcbot-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcbot-mobility-card__pen {
    font-weight: 700;
    color: var(--pcbot-navy);
    font-size: .92rem;
    margin-top: 4px;
}

.pcbot-mobility-card__usd {
    font-size: .78rem;
    color: var(--pcbot-muted);
}

.pcbot-toggle {
    align-self: flex-start;
    border: 1px solid var(--pcbot-border);
    background: var(--pcbot-bg-soft);
    color: var(--pcbot-navy);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.pcbot-toggle:hover {
    border-color: var(--pcbot-blue);
}

.pcbot-mobility-tips {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--pcbot-bg);
    border-radius: 12px;
    padding: 10px 12px;
}

.pcbot-mobility-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    color: var(--pcbot-text);
    line-height: 1.35;
}

.pcbot-mobility-tip__icono {
    flex: 0 0 auto;
}

/* ---------- Input ---------- */
.pcbot-inputbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--pcbot-white);
    border-top: 1px solid var(--pcbot-border);
}

.pcbot-input {
    flex: 1 1 auto;
    width: 0;
    border: 1px solid var(--pcbot-border);
    background: var(--pcbot-bg);
    color: var(--pcbot-text);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: .92rem;
    font-family: inherit;
    min-height: 44px;
}

.pcbot-input:focus {
    outline: none;
    border-color: var(--pcbot-blue);
    background: var(--pcbot-white);
}

.pcbot-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--pcbot-navy);
    color: var(--pcbot-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s ease, transform .1s ease;
}

.pcbot-send:hover {
    background: var(--pcbot-blue);
}

.pcbot-send:active {
    transform: scale(.94);
}

.pcbot-send:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* =========================================================
   Móvil: bottom sheet grande
   ========================================================= */
@media (max-width: 576px) {
    .pcbot-fab {
        width: 56px;
        height: 56px;
    }

    .pcbot-panel {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-width: 100vw;
        height: min(86vh, 86dvh);
        max-height: none;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .pcbot.is-open .pcbot-panel {
        transform: translateY(0);
    }

    /* Modo teclado (JS): el panel ocupa exactamente el VisualViewport
       (top/height inline) encima del teclado. Sin transición ni safe-area
       inferior: el teclado ya ocupa esa zona. Header y composer fijos; solo
       .pcbot-messages scrollea. */
    .pcbot-panel.pcbot-panel--keyboard {
        bottom: auto;
        border-radius: 0;
        padding-bottom: 0;
        transition: none;
        /* Por encima de la cabecera fija del sitio (z-index 1050): en modo
           teclado el panel arranca en top:0 y el header de Pillco debe verse. */
        z-index: 1060;
    }

    .pcbot-handle {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.55);
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }

    /* Zona de arrastre dedicada: solo la franja superior del panel (donde
       está el handle visual) responde al swipe-to-close, para no interferir
       con el scroll del área de mensajes ni con los botones de la cabecera. */
    .pcbot-draghandle {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 22px;
        z-index: 1;
        touch-action: none;
        cursor: grab;
    }

    .pcbot-header {
        padding-top: 18px;
    }

    .pcbot-minimize-hide-mobile,
    #pcbot-minimize {
        display: none;
    }

    .pcbot-row {
        max-width: 92%;
    }

    /* Evita el auto-zoom de Safari iOS al enfocar un input con font-size < 16px */
    .pcbot-input {
        font-size: 16px;
    }

    /* Emergencias nacionales: 1 card por fila en móvil (3 columnas quedan
       demasiado angostas para número + botón "Llamar") */
    .pcbot-emg-grid {
        grid-template-columns: 1fr;
    }
}