/* ===========================================================================
   LA CHARLA GUIADA (dk-charla.js). Pensada primero para el teléfono: quien
   hace el alta llega casi siempre desde el navegador de WhatsApp, con el
   pulgar. Toma los colores de quien la carga por variables:

     --dkc-fondo-ia, --dkc-tinta-ia     la burbuja del asistente
     --dkc-fondo-tu, --dkc-tinta-tu     la tuya
     --dkc-acento, --dkc-tinta-acento   botones y lo elegido
     --dkc-linea, --dkc-suave, --dkc-gris
   =========================================================================== */
.dkc {
    --dkc-fondo-ia: var(--panel-2, #35211a);
    --dkc-tinta-ia: var(--text, #f7ece4);
    --dkc-fondo-tu: var(--accent, #F2600C);
    --dkc-tinta-tu: #ffffff;
    --dkc-acento: var(--accent, #F2600C);
    --dkc-tinta-acento: var(--accent-ink, #2a1509);
    --dkc-linea: var(--border, #4a2f22);
    --dkc-suave: var(--panel, #2a1912);
    --dkc-gris: var(--muted, #b99a86);
    --dkc-error: var(--danger, #e5484d);

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dkc-hilo { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.dkc-msj { display: flex; align-items: flex-end; gap: 0.55rem; animation: dkc-entra 0.26s ease both; }
.dkc-msj--ia { max-width: 94%; }
.dkc-msj--tu { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 0.2rem; max-width: 86%; }

.dkc-burbuja {
    padding: 0.7rem 0.95rem;
    font-size: 0.97rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.dkc-burbuja > :first-child { margin-top: 0; }
.dkc-burbuja > :last-child { margin-bottom: 0; }
.dkc-msj--ia .dkc-burbuja { border-radius: 16px 16px 16px 4px; background: var(--dkc-fondo-ia); color: var(--dkc-tinta-ia); }
.dkc-msj--tu .dkc-burbuja { border-radius: 16px 16px 4px 16px; background: var(--dkc-fondo-tu); color: var(--dkc-tinta-tu); font-weight: 600; }
.dkc-msj--cambiada .dkc-burbuja { animation: dkc-cambia 0.6s ease; }
.dkc-msj--error .dkc-burbuja { background: color-mix(in srgb, var(--dkc-error) 18%, var(--dkc-fondo-ia)); border: 1px solid var(--dkc-error); }

/* Una burbuja que trae algo para mirar —la cabecera con sus colores, la
   portada, la ficha—: se abre a lo ancho para que se vea entera. */
.dkc-burbuja--vista { padding: 0.35rem; width: min(100%, 22rem); }

.dkc-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dkc-acento);
    color: var(--dkc-tinta-acento);
    font-size: 0.85rem;
    font-weight: 700;
}
.dkc-avatar svg, .dkc-avatar img { width: 18px; height: 18px; }

.dkc-escribe { display: inline-flex; gap: 4px; padding: 0.85rem 1rem; border-radius: 16px 16px 16px 4px; background: var(--dkc-fondo-ia); }
.dkc-escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--dkc-gris); animation: dkc-punto 1s ease-in-out infinite; }
.dkc-escribe i:nth-child(2) { animation-delay: 0.15s; }
.dkc-escribe i:nth-child(3) { animation-delay: 0.3s; }

/* «Cambiar», debajo de lo que contestó: pequeño y sin caja, para que no
   compita con lo que se está preguntando ahora. */
.dkc button.dkc-enlace {
    min-height: 32px;
    padding: 0.2rem 0.3rem;
    border: 0;
    background: none;
    color: var(--dkc-gris);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dkc button.dkc-enlace:hover { color: var(--dkc-tinta-ia); filter: none; }

/* --- La zona de respuesta --------------------------------------------- */
.dkc-zona { display: flex; flex-direction: column; gap: 0.7rem; animation: dkc-entra 0.26s ease both; }
.dkc-zona:empty { display: none; }
.dkc-zona--ocupada { opacity: 0.6; pointer-events: none; }

.dkc-cambiando {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    background: var(--dkc-suave);
    color: var(--dkc-gris);
    font-size: 0.85rem;
}

.dkc button.dkc-btn { min-height: 46px; border-radius: 10px; font-size: 1rem; }
.dkc button.dkc-btn-sec {
    min-height: 46px;
    border-radius: 10px;
    background: transparent;
    color: var(--dkc-tinta-ia);
    border: 1px solid var(--dkc-linea);
}
.dkc button.dkc-btn-sec:hover { border-color: var(--dkc-acento); filter: none; }
.dkc-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dkc-fila > * { flex: 1 1 10rem; }

.dkc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dkc button.dkc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.4rem 0.95rem;
    border: 1.5px solid var(--dkc-linea);
    border-radius: 999px;
    background: var(--dkc-suave);
    color: var(--dkc-tinta-ia);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
}
.dkc button.dkc-chip:hover { border-color: var(--dkc-acento); filter: none; }
.dkc button.dkc-chip--puesta { border-color: var(--dkc-acento); box-shadow: 0 0 0 1px var(--dkc-acento) inset; font-weight: 700; }
.dkc-chip small { color: var(--dkc-gris); font-size: 0.75rem; font-weight: 400; }
.dkc-chip-muestra { display: inline-flex; gap: 3px; }

/* Los nombres en dos columnas, siempre, y la frase del elegido en un solo
   recuadro debajo (ver el tipo «tarjetas» en dk-charla.js). */
.dkc-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.dkc button.dkc-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--dkc-linea);
    border-radius: 12px;
    background: var(--dkc-suave);
    color: var(--dkc-tinta-ia);
    text-align: left;
    font-weight: 400;
}
.dkc button.dkc-tarjeta:hover { border-color: var(--dkc-acento); filter: none; }
.dkc button.dkc-tarjeta--puesta { border-color: var(--dkc-acento); box-shadow: 0 0 0 1px var(--dkc-acento) inset; }
.dkc-tarjeta strong { font-size: 0.88rem; line-height: 1.25; }

/* La muestra del elegido. Con alto mínimo de tres renglones: si creciera con
   cada frase, el botón de confirmar saltaría de sitio al tocar otra opción. */
.dkc-muestra {
    margin: 0;
    min-height: 4.6em;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--dkc-acento);
    border-radius: 4px 10px 10px 4px;
    background: var(--dkc-suave);
    color: var(--dkc-tinta-ia);
    font-size: 0.93rem;
    line-height: 1.45;
}
.dkc-muestra--vacia { color: var(--dkc-gris); font-style: italic; }

.dkc-escribir { display: flex; gap: 0.5rem; align-items: stretch; }
.dkc-escribir .dkc-entrada { flex: 1 1 auto; min-width: 0; min-height: 46px; font-size: 1rem; }
.dkc-escribir textarea.dkc-entrada { resize: vertical; min-height: 5.2rem; }
.dkc-escribir--largo { flex-direction: column; }
/* EL PAÍS Y EL NÚMERO, SIEMPRE EN UNA FILA. admin.css apila el selector de
   país por debajo de 480 px de pantalla, y este chat deja «Seguir» al lado
   desde 421: entre los dos, en un teléfono grande, salían el país encima del
   número y un «Seguir» alto como los dos juntos (lo vio el dueño el 10/10).
   Aquí el país va compacto a la izquierda y el número se lleva el resto; por
   debajo de 421 px, «Seguir» baja a su propia línea, como en los demás pasos. */
.dkc-escribir--tel .dk-tel { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0.4rem; }
.dkc-escribir--tel .dk-tel > .dk-tel-pais { flex: 0 1 auto; width: auto; max-width: 46%; min-height: 46px; }
.dkc-escribir--tel .dk-tel > .dkc-entrada { flex: 1 1 auto; min-width: 6em; }
.dkc-escribir--tel > .dkc-btn { flex: 0 0 auto; }
@media (max-width: 420px) {
    .dkc-escribir:not(.dkc-escribir--largo) { flex-direction: column; }
}

.dkc-nota { margin: 0; color: var(--dkc-gris); font-size: 0.85rem; line-height: 1.45; }
.dkc-aviso { margin: 0; color: var(--dkc-error); font-size: 0.88rem; font-weight: 600; }

/* La lista de lo que se va haciendo (el armado): de verdad, no un reloj. */
.dkc-tareas { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.dkc-tareas li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.93rem; }
.dkc-tareas li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--dkc-linea);
    box-sizing: border-box;
}
.dkc-tareas li.dkc-tarea--haciendo::before { border-color: var(--dkc-acento); border-top-color: transparent; animation: dkc-gira 0.9s linear infinite; }
.dkc-tareas li.dkc-tarea--lista::before { border: 0; background: var(--ok, #3ecf8e); }
.dkc-tareas li.dkc-tarea--lista { color: var(--dkc-gris); }

@keyframes dkc-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dkc-punto { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes dkc-cambia { 0% { filter: brightness(1.5); } 100% { filter: none; } }
@keyframes dkc-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .dkc-msj, .dkc-zona, .dkc-msj--cambiada .dkc-burbuja { animation: none; }
    .dkc-escribe i, .dkc-tareas li.dkc-tarea--haciendo::before { animation: none; }
}