/* ===========================================================================
 * chat.css — Asistente flotante de la landing
 * ----------------------------------------------------------------------------
 * Archivo propio (sin Tailwind) para que el widget se vea igual en
 * index.php, privacidad.php y admin/login.php sin depender del build.
 * Paleta alineada con tailwind.config.js: tinta-950/800 + acento #06B6D4.
 * ======================================================================== */

.chat-lanzador,
.chat-panelo {
    --chat-fondo: #05070a;
    --chat-panel: #0b0f16;
    --chat-borde: rgba(255, 255, 255, .10);
    --chat-texto: #cbd5e1;
    --chat-tenue: #94a3b8;
    --chat-acento: #06B6D4;
    --chat-verde: #25D366;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- Lanzador */
.chat-lanzador {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9999px;
    background: linear-gradient(135deg, #06B6D4, #3b82f6);
    color: #04141a;
    box-shadow: 0 18px 45px -14px rgba(6, 182, 212, .75);
    cursor: pointer;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.chat-lanzador:hover {
    transform: scale(1.07);
    box-shadow: 0 22px 52px -14px rgba(6, 182, 212, .85);
}

.chat-lanzador:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
}

.chat-lanzador svg {
    width: 1.75rem;
    height: 1.75rem;
}

.chat-lanzador .chat-icono-cerrar {
    display: none;
}

.chat-lanzador[aria-expanded='true'] .chat-icono-abrir {
    display: none;
}

.chat-lanzador[aria-expanded='true'] .chat-icono-cerrar {
    display: block;
}

.chat-lanzador[aria-expanded='true'] {
    background: #0b0f16;
    color: #67e8f9;
}

/* Punto de "en línea" */
.chat-lanzador .chat-punto {
    position: absolute;
    top: .2rem;
    right: .2rem;
    width: .8rem;
    height: .8rem;
    border: 2px solid #05070a;
    border-radius: 9999px;
    background: var(--chat-verde);
}

/* ------------------------------------------------------------------ Panel */
.chat-panelo {
    position: fixed;
    right: 1.25rem;
    bottom: 5.5rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(23.5rem, calc(100vw - 2.5rem));
    height: min(34rem, calc(100vh - 8.5rem));
    overflow: hidden;
    border: 1px solid var(--chat-borde);
    border-radius: 1.25rem;
    background: var(--chat-panel);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03);
    animation: chatSube .28s cubic-bezier(.16, 1, .3, 1);
}

.chat-panelo[hidden] {
    display: none;
}

@keyframes chatSube {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- Cabecera */
.chat-cabecera {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--chat-borde);
    background: linear-gradient(135deg, rgba(6, 182, 212, .18), rgba(59, 130, 246, .10));
}

.chat-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #06B6D4, #3b82f6);
    color: #04141a;
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: .95rem;
}

.chat-titulos {
    min-width: 0;
    flex: 1;
}

.chat-nombre {
    overflow: hidden;
    color: #fff;
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-estado {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .1rem;
    color: var(--chat-tenue);
    font-size: .72rem;
}

.chat-estado::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 9999px;
    background: var(--chat-verde);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}

.chat-icono-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .06);
    color: var(--chat-tenue);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.chat-icono-btn:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.chat-icono-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

.chat-icono-btn.is-wa {
    background: rgba(37, 211, 102, .16);
    color: var(--chat-verde);
}

.chat-icono-btn.is-wa:hover {
    background: rgba(37, 211, 102, .28);
    color: #7dffa8;
}

/* ---------------------------------------------------------------- Mensajes */
.chat-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 1rem .9rem .35rem;
    background:
        radial-gradient(ellipse at top, rgba(6, 182, 212, .07), transparent 65%),
        var(--chat-fondo);
    scroll-behavior: smooth;
}

.chat-mensajes::-webkit-scrollbar {
    width: 6px;
}

.chat-mensajes::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgba(255, 255, 255, .14);
}

.chat-fila {
    display: flex;
    margin-bottom: .7rem;
    animation: chatAparece .24s ease-out;
}

@keyframes chatAparece {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.chat-fila.is-usuario {
    justify-content: flex-end;
}

.chat-burbuja {
    max-width: 84%;
    padding: .6rem .8rem;
    border: 1px solid var(--chat-borde);
    border-radius: 1rem 1rem 1rem .3rem;
    background: rgba(255, 255, 255, .05);
    color: var(--chat-texto);
    font-size: .875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-fila.is-usuario .chat-burbuja {
    border: none;
    border-radius: 1rem 1rem .3rem 1rem;
    background: linear-gradient(135deg, #06B6D4, #2563eb);
    color: #04141a;
    font-weight: 500;
}

/* Acciones del botón (chips) */
.chat-acciones,
.chat-sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 .9rem .7rem;
}

.chat-sugerencias:empty,
.chat-acciones:empty {
    display: none;
}

.chat-sugerencias {
    padding-top: .2rem;
    background: var(--chat-fondo);
}

.chat-chip {
    padding: .42rem .75rem;
    border: 1px solid rgba(6, 182, 212, .45);
    border-radius: 9999px;
    background: rgba(6, 182, 212, .10);
    color: #67e8f9;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.chat-chip:hover {
    background: var(--chat-acento);
    color: #04141a;
    transform: translateY(-1px);
}

.chat-chip.is-wa {
    border-color: rgba(37, 211, 102, .5);
    background: rgba(37, 211, 102, .12);
    color: #7dffa8;
}

.chat-chip.is-wa:hover {
    background: var(--chat-verde);
    color: #04141a;
}

.chat-chip.is-carrito {
    border-color: rgba(245, 158, 11, .55);
    background: rgba(245, 158, 11, .14);
    color: #fcd34d;
}

.chat-chip.is-carrito:hover {
    background: #f59e0b;
    color: #1b1204;
}

/* Escribiendo... */
.chat-escribiendo {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    padding: .7rem .85rem;
    border: 1px solid var(--chat-borde);
    border-radius: 1rem 1rem 1rem .3rem;
    background: rgba(255, 255, 255, .05);
}

.chat-escribiendo span {
    width: .4rem;
    height: .4rem;
    border-radius: 9999px;
    background: var(--chat-tenue);
    animation: chatPunto 1.1s infinite ease-in-out;
}

.chat-escribiendo span:nth-child(2) {
    animation-delay: .16s;
}

.chat-escribiendo span:nth-child(3) {
    animation-delay: .32s;
}

@keyframes chatPunto {

    0%,
    60%,
    100% {
        opacity: .3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* ------------------------------------------------------------- Entrada */
.chat-entrada {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .7rem .8rem;
    border-top: 1px solid var(--chat-borde);
    background: var(--chat-panel);
}

.chat-entrada input {
    flex: 1;
    min-width: 0;
    padding: .62rem .85rem;
    border: 1px solid var(--chat-borde);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .05);
    color: #e2e8f0;
    font-size: .875rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.chat-entrada input::placeholder {
    color: #64748b;
}

.chat-entrada input:focus {
    outline: none;
    border-color: var(--chat-acento);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .18);
}

.chat-enviar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #06B6D4, #3b82f6);
    color: #04141a;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}

.chat-enviar:hover {
    transform: scale(1.06);
}

.chat-enviar:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.chat-enviar svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* -------------------------------------------------- Captura de datos */
.chat-captura {
    padding: .85rem .9rem;
    border-top: 1px solid var(--chat-borde);
    background: rgba(6, 182, 212, .06);
}

.chat-captura[hidden] {
    display: none;
}

.chat-captura h4 {
    margin-bottom: .55rem;
    color: #fff;
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 700;
}

.chat-captura label {
    display: block;
    margin-bottom: .5rem;
    color: var(--chat-tenue);
    font-size: .72rem;
    font-weight: 600;
}

.chat-captura input[type='text'],
.chat-captura input[type='email'],
.chat-captura input[type='tel'] {
    width: 100%;
    margin-top: .25rem;
    padding: .5rem .7rem;
    border: 1px solid var(--chat-borde);
    border-radius: .6rem;
    background: rgba(255, 255, 255, .05);
    color: #e2e8f0;
    font-size: .82rem;
}

.chat-captura input:focus {
    outline: none;
    border-color: var(--chat-acento);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .18);
}

.chat-check {
    display: flex !important;
    gap: .5rem;
    align-items: flex-start;
    margin-top: .6rem;
    color: var(--chat-tenue) !important;
    font-size: .7rem !important;
    font-weight: 400 !important;
    line-height: 1.45;
    cursor: pointer;
}

.chat-check input {
    margin-top: .15rem;
    accent-color: var(--chat-acento);
}

.chat-check a {
    color: var(--chat-acento);
    text-decoration: underline;
}

.chat-botones-captura {
    display: flex;
    gap: .5rem;
    margin-top: .7rem;
}

.chat-captura-enviar {
    flex: 1;
    padding: .55rem .75rem;
    border: none;
    border-radius: .7rem;
    background: linear-gradient(135deg, #06B6D4, #3b82f6);
    color: #04141a;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease;
}

.chat-captura-enviar:hover {
    transform: translateY(-1px);
}

.chat-captura-enviar:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.chat-captura-cancelar {
    padding: .55rem .75rem;
    border: 1px solid var(--chat-borde);
    border-radius: .7rem;
    background: transparent;
    color: var(--chat-tenue);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-captura-cancelar:hover {
    color: #fff;
}

.chat-error-captura {
    margin-top: .5rem;
    padding: .5rem .65rem;
    border: 1px solid rgba(248, 113, 113, .45);
    border-radius: .6rem;
    background: rgba(248, 113, 113, .12);
    color: #fecaca;
    font-size: .74rem;
    line-height: 1.5;
}

.chat-error-captura[hidden] {
    display: none;
}

/* ------------------------------------------------ Pie del panel */
.chat-pie {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .9rem .55rem;
    border-top: 1px solid rgba(255, 255, 255, .05);
    background: var(--chat-panel);
    font-size: .66rem;
    color: #64748b;
}

.chat-pie button {
    border: none;
    background: none;
    color: #64748b;
    font-size: .66rem;
    text-decoration: underline;
    cursor: pointer;
}

.chat-pie button:hover {
    color: var(--chat-acento);
}

/* --------------------------------------------------------------- Móvil */
@media (max-width: 640px) {
    .chat-panelo {
        right: .75rem;
        bottom: 5rem;
        left: .75rem;
        width: auto;
        height: min(32rem, calc(100vh - 7.5rem));
    }

    .chat-lanzador {
        right: 1rem;
        bottom: 1rem;
    }
}

/* --------------------------------------- Sin animaciones (preferencia) */
@media (prefers-reduced-motion: reduce) {

    .chat-panelo,
    .chat-fila,
    .chat-escribiendo span {
        animation: none;
    }

    .chat-lanzador,
    .chat-chip,
    .chat-enviar,
    .chat-captura-enviar {
        transition: none;
    }
}