/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  EL CHAT DE SOPORTE — badge flotante y panel
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Prefijo `sop-` y TODO colgando de `#sopChat`, que es la raíz que monta el
 * JS. Se escribe así porque esto vive en CUALQUIER página del sitio --la
 * tienda, la portada, la ficha de un artículo-- y cada una trae su propia
 * hoja: sin un ancestro propio, la primera regla global de `button` o de `nav`
 * se lleva el panel por delante.
 *
 * Y por eso también se declaran aquí cosas que parecen obvias --`box-sizing`,
 * `font-family`, el `margin:0` de los títulos--: no se puede dar por hecho
 * ninguna base cuando el vecino cambia en cada pantalla.
 */

/* LOS TOKENS VIVEN EN LAS DOS RAÍCES.
 *
 * El panel de ajustes del agente se monta en `#sopConf`, un nodo HERMANO de
 * `#sopChat` y no un hijo: `_pintar()` reescribe la raíz del chat entera cada
 * vez que llega un aviso por el WebSocket, y un editor de texto rico ahí dentro
 * se destruiría cada pocos segundos con lo escrito a medias.
 *
 * Al ser hermano no hereda nada, así que los tokens se declaran para los dos.
 * Lo que NO se repite es la colocación --cada uno se ancla a su manera-- ni
 * ninguna regla de las de abajo: esas cuelgan de la clase y valen igual en los
 * dos árboles. */
#sopChat,
#sopConf{
    /* La paleta, en un solo sitio. Es la de la marca, no una nueva. */
    --sop-verde:        #236e30;
    --sop-verde-vivo:   #2a7a38;
    --sop-verde-hondo:  #16491f;
    --sop-verde-claro:  #eef6ec;
    --sop-verde-borde:  #d3e7cf;

    --sop-tinta:  #16211a;
    --sop-texto:  #3f4a43;
    --sop-suave:  #6b7a70;
    --sop-borde:  #e4eae4;
    --sop-papel:  #ffffff;
    --sop-crema:  #f7faf6;

    --sop-radio:  16px;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--sop-texto);
}

#sopChat{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
}

#sopChat *,
#sopConf *{ box-sizing: border-box; }

/* ══ EL BADGE ══════════════════════════════════════════════════════ */

.sop-badge{
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 20px 12px 14px;
    border: 0;
    border-radius: 999px;

    background: linear-gradient(135deg, var(--sop-verde-vivo), var(--sop-verde-hondo));
    color: #fff;
    box-shadow: 0 10px 28px rgba(16,50,24,.32);
    cursor: pointer;

    font-family: inherit;
    text-align: left;
    white-space: nowrap;
}
.sop-badge:hover{ box-shadow: 0 14px 34px rgba(16,50,24,.4); }

.sop-badge-ico{
    position: relative;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    font-size: 21px;
}

/* ── ¿HAY ALGUIEN AL OTRO LADO? ────────────────────────────────────
 *
 * El punto sobre la burbuja y la palabra al lado de «Soporte». Los dos, y no
 * uno: el punto solo hay que haberlo aprendido antes para entenderlo, y la
 * palabra desaparece en pantalla estrecha, donde del badge no queda más que el
 * icono. Así siempre hay una de las dos.
 *
 * Y NO SE PINTA MIENTRAS NO SE SABE. El badge sale antes de que conteste
 * `/support/presence`, así que un gris por defecto diría «no hay nadie» medio
 * segundo en cada página del sitio, que es justo la mentira que más cuesta:
 * quien lo ve gris no abre el chat. */
.sop-badge-punto{
    position: absolute;
    right: -1px; bottom: -1px;
    width: 12px; height: 12px;
    border: 2px solid var(--sop-verde-hondo);
    border-radius: 50%;
    background: #9aa8a0;
}
.sop-badge-punto.es-online{ background: #3ddc73; }
.sop-badge-punto.es-away{ background: #f0b429; }

/* El halo SOLO cuando hay alguien de verdad. Un punto ámbar o gris latiendo
   llama la atención para decir que no atendemos, que es lo contrario de lo que
   se quiere: la animación es una promesa de respuesta inmediata. */
.sop-badge-punto.es-online{ animation: sopLatido 2.4s ease-out infinite; }

@keyframes sopLatido{
    0%   { box-shadow: 0 0 0 0 rgba(61,220,115,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(61,220,115,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,220,115,0); }
}

/* Quien prefiera la pantalla quieta no ve el latido; el color se queda. */
@media (prefers-reduced-motion: reduce){
    .sop-badge-punto.es-online{ animation: none; }
}

/* La palabra, en la misma línea que «Soporte» y sin robarle peso: más
   pequeña, en redonda y con su propio punto delante. */
.sop-badge-estado{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: rgba(255,255,255,.82);
    vertical-align: middle;
}
.sop-badge-estado:before{
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #9aa8a0;
}
.sop-badge-estado.es-online:before{ background: #3ddc73; }
.sop-badge-estado.es-online{ color: #d8ffe6; }
.sop-badge-estado.es-away:before{ background: #f0b429; }
.sop-badge-estado.es-away{ color: #ffeec2; }
/* EL COLOR, DECLARADO EN CADA PIEZA Y NO SOLO EN EL BOTÓN.
   El `color:#fff` del badge lo pisaba una regla global del sitio sobre `b`, y
   «Soporte» salía en NEGRO sobre el verde -- el rótulo más importante del
   widget. Heredar el color no basta cuando alguien lo declara por debajo. */
.sop-badge small{ display: block; font-size: 11px; opacity: .85; line-height: 1.2; color: #fff; }
.sop-badge b{ display: block; font-size: 15px; line-height: 1.25; color: #fff; }

/* La pastilla «Chat» de la maqueta, colgando de la esquina. */
.sop-badge-tag{
    position: absolute;
    right: 14px;
    bottom: -9px;
    padding: 2px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--sop-verde-hondo);
    box-shadow: 0 3px 10px rgba(16,50,24,.22);
    font-size: 11px;
    font-weight: 700;
}

/* El contador de sin leer. Solo aparece cuando hay algo que leer: un cero
   dentro de un círculo rojo es una alarma que no dice nada. */
.sop-punto{
    position: absolute;
    left: -6px;
    top: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(190,18,60,.45);
}

/* ══ EL PANEL ══════════════════════════════════════════════════════
   Alto por `max-height` y no fijo: con 620px clavados, en un portátil de 768
   el panel se sale por arriba y la cabecera queda fuera de la pantalla. */
.sop-panel{
    display: flex;
    flex-direction: column;

    width: 380px;
    max-height: min(640px, calc(100vh - 60px));

    border-radius: var(--sop-radio);
    background: var(--sop-papel);
    box-shadow: 0 24px 60px rgba(16,40,22,.28);
    overflow: hidden;
}

/* ── Cabecera con el logo del sitio ─────────────────────────────── */
.sop-cab{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sop-borde);
    background: var(--sop-papel);
}
.sop-marca{ display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sop-marca-ico{ display: flex; font-size: 22px; color: var(--sop-verde); }
.sop-marca b{ font-size: 15px; font-weight: 800; color: var(--sop-tinta); letter-spacing: -.2px; }
.sop-marca b em{ color: var(--sop-verde); font-style: normal; }

/* ── EL COLOR DEL ESTADO LLEGA AL TÍTULO ───────────────────────────
   La cabecera lleva la clase del estado, así que el icono de la marca y la
   segunda mitad del nombre se tiñen del MISMO color que el punto del badge.
   Es lo que hace que las dos piezas digan lo mismo de un vistazo -- con el
   título siempre verde, el color quedaba encerrado en una chapa de 90px que
   se mira una vez y ya.

   El nombre en sí no cambia de color: en gris sobre blanco es lo único que se
   lee siempre bien, y teñir un título de gris claro porque el soporte está
   cerrado sería castigar la marca por la hora que es. */
.sop-cab.es-online  .sop-marca-ico, .sop-cab.es-online  .sop-marca b em{ color: #17692f; }
.sop-cab.es-away    .sop-marca-ico, .sop-cab.es-away    .sop-marca b em{ color: #9a6a06; }
.sop-cab.es-offline .sop-marca-ico, .sop-cab.es-offline .sop-marca b em{ color: #67736c; }

/* ── LA CHAPA DE ESTADO DE LA BARRA DE TÍTULO ──────────────────────
 *
 * Tres estados, y cada uno con SU ICONO además de su color: el color solo no
 * vale --uno de cada doce hombres no distingue bien el verde, y el ámbar
 * contra el gris tampoco se separa en una pantalla al sol--. Con icono,
 * palabra y color hay tres formas de leer lo mismo.
 *
 * Va en la cabecera y no solo en el badge porque, con el panel abierto, el
 * badge ya no se ve -- y es justo el momento en que saber si hay alguien
 * importa más: se está a punto de escribir.
 *
 * `flex: 0 1 auto` con `min-width: 0`: si el rótulo es largo --lo escribe
 * quien atiende, y puede poner «Volvemos a las 16:00»-- se recorta la chapa
 * antes que empujar los botones de minimizar y cerrar fuera de la barra. */
.sop-cab-linea{
    flex: 0 1 auto;
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 10px 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sop-cab-linea iconify-icon{ flex: 0 0 auto; font-size: 13px; }

.sop-cab-linea.es-online{
    background: #e8f7ec;
    border-color: #bfe6ca;
    color: #17692f;
}
.sop-cab-linea.es-away{
    background: #fdf4e3;
    border-color: #f2ddb0;
    color: #9a6a06;
}
.sop-cab-linea.es-offline{
    background: #f1f3f2;
    border-color: #dde2de;
    color: #67736c;
}

/* ══ LA CHAPA COMO INTERRUPTOR (solo el agente) ══════════════════════
   Para el agente la chapa es un `<button>`, y unas líneas más abajo hay
   `.sop-cab button { width:28px; height:28px }` para los iconos de la barra:
   sin doblar el selector, la chapa se quedaba en un cuadrado de 28px con el
   rótulo cortado. `.sop-cab button.sop-cab-linea` es (0,2,1) y gana. */
.sop-cab button.sop-cab-linea{
    width: auto;
    height: auto;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
}
.sop-cab button.sop-cab-linea:hover{ filter: brightness(.97); }

/* La flecha, más pequeña y apagada: dice «esto se abre» sin competir con el
   icono del estado, que es el que trae la noticia. */
.sop-cab-linea.es-pulsable iconify-icon:last-child{ font-size: 11px; opacity: .65; }

/* ══ EL MENÚ DEL ESTADO ══════════════════════════════════════════════
   Colgado del `body` --la barra de título tiene `overflow` y lo recortaría--
   y colocado a mano bajo la chapa. */
.sop-linea-caja{
    position: fixed;
    z-index: 2147483000;          /* por encima de la esquina, que ya va alta */
}

.sop-linea-menu{
    width: 268px;
    box-sizing: border-box;

    /* NUNCA MÁS ALTO QUE LA PANTALLA: en una ventana baja el menú no cabe
       entero ni pegado al borde, y sin esto las últimas opciones quedaban
       fuera sin forma de llegar a ellas. Con el tope hace scroll por dentro;
       los 16px son el margen de 8 que `_alternarMenuLinea()` deja arriba y
       abajo. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;

    padding: 8px;
    border: 1px solid var(--sop-borde, #e2e8f0);
    border-radius: 14px;
    background: var(--sop-papel, #fff);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.sop-linea-rot{
    margin: 2px 4px 8px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sop-suave, #64748b);
}

.sop-linea-menu .sop-linea-op{
    width: 100%; height: auto;
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 3px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.sop-linea-menu .sop-linea-op:hover{ background: var(--sop-crema, #f8fafc); }
.sop-linea-menu .sop-linea-op.es-on{
    border-color: var(--sop-verde, #16a34a);
    background: #f0fdf4;
}

/* EL ICONO EN SU COLUMNA Y TODO EL TEXTO EN LA SEGUNDA: título y explicación
   arrancan en la misma vertical, que es la regla de alineación del proyecto. */
.sop-linea-ico{ flex: 0 0 auto; margin-top: 1px; }
.sop-linea-ico iconify-icon{ font-size: 16px; color: var(--sop-suave, #64748b); }
.sop-linea-op.es-on .sop-linea-ico iconify-icon{ color: var(--sop-verde, #16a34a); }

.sop-linea-txt{ flex: 1; min-width: 0; }
.sop-linea-txt b{ display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.sop-linea-txt small{
    display: block; margin-top: 2px;
    font-size: 10.5px; line-height: 1.35;
    color: var(--sop-suave, #64748b);
    white-space: normal;
}

.sop-linea-tic{ flex: 0 0 auto; margin-top: 2px; }
.sop-linea-tic iconify-icon{ font-size: 14px; color: var(--sop-verde, #16a34a); }

.sop-linea-pie{
    margin: 6px 4px 2px;
    font-size: 10px; line-height: 1.4;
    color: var(--sop-suave, #64748b);
}

.sop-cab button{
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sop-suave);
    font-size: 18px;
    cursor: pointer;
}
.sop-cab button:hover{ background: var(--sop-crema); color: var(--sop-tinta); }

/* ── El cuerpo, que es lo que cambia de pantalla ────────────────── */
.sop-cuerpo{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 16px;
}

.sop-titulo{ margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--sop-tinta); }
.sop-sub{ margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--sop-suave); }

/* ══ EL FORMULARIO ═════════════════════════════════════════════════ */
.sop-campo{ margin-bottom: 12px; }
.sop-campo label{
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sop-texto);
}
.sop-campo input,
.sop-campo textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sop-borde);
    border-radius: 10px;
    background: #fff;
    font: 13px/1.4 inherit;
    color: var(--sop-tinta);
    outline: 0;
}
.sop-campo textarea{ min-height: 82px; resize: vertical; }
.sop-campo input:focus,
.sop-campo textarea:focus{ border-color: var(--sop-verde); box-shadow: 0 0 0 3px var(--sop-verde-claro); }

/* El aviso de un campo mal: pegado a SU campo y no en un montón arriba, que
   es lo que obliga a adivinar cuál falla. */
.sop-error{ margin: 5px 0 0; font-size: 11.5px; color: #b91c1c; }
.sop-campo.es-mal input,
.sop-campo.es-mal textarea{ border-color: #dc2626; }

/* ── Adjuntos ───────────────────────────────────────────────────── */
.sop-adj-titulo{ margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--sop-texto); }
.sop-adj-titulo span{ font-weight: 400; color: var(--sop-suave); }

/* ══ LO QUE SE VA A ENVIAR ═════════════════════════════════════════
 * DEBAJO del renglón de escribir y con su propio suelo: pegada a los mensajes
 * se leía como uno más --una tarjeta clara justo bajo la última burbuja-- y
 * había medio segundo de duda sobre si eso ya se había enviado.
 *
 * Se separa por tres cosas a la vez, y hacen falta las tres: la LÍNEA de
 * arriba, el FONDO más frío que el papel del chat, y el ICONO DE FOTO al fondo
 * --marca de agua-- que dice de un vistazo de qué es esta zona aunque esté
 * vacía de contexto. Va como `background-image` y no como `<iconify-icon>`
 * porque un icono de fondo no es contenido: no debe leerlo un lector de
 * pantalla ni recibir el foco. */
.sop-adjuntos{
    position: relative;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;

    padding: 10px 14px;
    border-top: 1px solid var(--sop-borde);
    background: #f2f5f1;

    /* El icono `lucide:image`, en gris muy claro y anclado a la derecha: al
       fondo de verdad, sin competir con las miniaturas. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3cfc0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2' ry='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 40px 40px;
}

.sop-adjunto{
    position: relative;               /* por encima de la marca de agua */
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--sop-borde);
    border-radius: 9px;
    background: var(--sop-papel);
    font-size: 11.5px;
}
.sop-adjunto span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.sop-adjunto small{ color: var(--sop-suave); flex: 0 0 auto; }
.sop-adjunto button{
    flex: 0 0 auto;
    border: 0; background: transparent;
    color: var(--sop-suave);
    font-size: 14px; line-height: 1; cursor: pointer;
}
.sop-adjunto.es-subiendo{ opacity: .6; }

/* ── UNA FOTO SE ENSEÑA ────────────────────────────────────────────
 * `images.jpeg` no dice nada: lo que hay que comprobar antes de enviar es que
 * es LA foto, y para eso hace falta verla. La miniatura sale del fichero que se
 * acaba de elegir, así que está ahí antes de que termine la subida. */
.sop-adjunto.es-foto{
    /* `flex: 0 0 56px` Y NO SOLO `width`: la zona es un flex, y con tres
       adjuntos el navegador encogía las miniaturas hasta 2px de ancho -- una
       raya vertical donde debía haber una foto. */
    flex: 0 0 56px;
    width: 56px; height: 56px;
    padding: 0;
    overflow: visible;                /* la × se sale un poco por la esquina */
    background: var(--sop-crema);
}
.sop-adjunto.es-foto img{
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* LA × EN LA ESQUINA, sobre la propia foto: dentro le robaría sitio a la
   imagen, que es lo único que hay que ver. */
.sop-adjunto.es-foto button{
    position: absolute;
    top: -6px; right: -6px;
    width: 18px; height: 18px;
    display: grid; place-items: center;
    padding: 0;
    border: 1px solid var(--sop-borde);
    border-radius: 50%;
    background: var(--sop-papel);
    color: var(--sop-texto);
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.sop-adjunto.es-foto button:hover{ background: #fee4e2; color: #b42318; }

/* Mientras sube, la foto se ve pero apagada: se sabe que está en camino sin
   perder de vista cuál es. */
.sop-adjunto.es-foto.es-subiendo img{ opacity: .5; }

.sop-soltar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px;
    border: 1px dashed var(--sop-verde-borde);
    border-radius: 10px;
    background: var(--sop-crema);
    color: var(--sop-suave);
    font-size: 12px;
    cursor: pointer;
}
.sop-soltar:hover,
.sop-soltar.es-encima{ border-color: var(--sop-verde); background: var(--sop-verde-claro); color: var(--sop-verde-hondo); }

/* ══ BOTONES ═══════════════════════════════════════════════════════ */
.sop-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: 700 13.5px inherit;
    cursor: pointer;
}
.sop-btn-verde{ background: var(--sop-verde-hondo); color: #fff; }
.sop-btn-verde:hover{ background: #0f3617; }
.sop-btn[disabled]{ opacity: .55; cursor: default; }

/* ══ MENSAJE RECIBIDO ══════════════════════════════════════════════
   Verde y con su marca de comprobado: es la única pantalla del widget que
   confirma algo, y tiene que leerse como tal en menos de un segundo. */
.sop-recibido{
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    padding: 13px 15px;
    border: 1px solid var(--sop-verde-borde);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sop-verde-claro), #f7fdf6);
}
.sop-recibido-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sop-verde);
    color: #fff;
    font-size: 16px;
}
.sop-recibido b{ display: block; font-size: 13px; color: var(--sop-verde-hondo); }
.sop-recibido small{ display: block; margin-top: 2px; font-size: 11.5px; color: var(--sop-texto); }

/* ══ UNA CONSULTA CON OPCIONES ═════════════════════════════════════
 *
 * Va DENTRO de la burbuja del mensaje, debajo de su texto: la pregunta y sus
 * respuestas son una sola cosa. Por eso no lleva fondo propio -- se apoya en el
 * de la burbuja y solo se separa con una raya fina.
 */
.sop-voto{
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--sop-borde);
}
.sop-voto-preg{
    margin: 0 0 8px;
    font-size: 12px; font-weight: 700; line-height: 1.35;
    color: var(--sop-tinta);
}

/* EN COLUMNA. Con 380px de esquina, dos botones por fila obligan a partir el
   texto de cada opción -- y una opción que no se lee entera no se elige. */
.sop-voto-ops{ display: flex; flex-direction: column; gap: 6px; }

/* Son `<button>` dentro del widget: hay que apagarles lo que el sitio le pone a
   todo botón (alto fijo, borde `outset`, fondo gris). La clase doblada gana sin
   depender del orden de las hojas. */
.sop-voto .sop-voto-op{
    width: 100%; height: auto;
    display: flex; align-items: center; gap: 7px;
    padding: 9px 12px;
    border: 1px solid var(--sop-verde-borde);
    border-radius: 10px;
    background: var(--sop-papel);
    color: var(--sop-tinta);
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}
.sop-voto .sop-voto-op:hover{ border-color: var(--sop-verde); background: var(--sop-verde-claro); }

/* LA ELEGIDA SE QUEDA, con su tic. Que el bloque desaparezca al contestar deja
   la conversación sin la pregunta, y a los tres mensajes nadie sabe a qué
   contestó ese «Sí» suelto. */
.sop-voto .sop-voto-op.es-puesta{
    border-color: var(--sop-verde-hondo);
    background: var(--sop-verde-hondo);
    color: #fff;
}
.sop-voto-tic{ display: flex; }
.sop-voto-tic iconify-icon{ font-size: 15px; }

/* LAS DEMÁS, APAGADAS PERO LEGIBLES: siguen contando lo que se preguntó. */
.sop-voto.es-cerrada .sop-voto-op[disabled]{
    opacity: .55;
    cursor: default;
}
.sop-voto.es-cerrada .sop-voto-op.es-puesta{ opacity: 1; }

/* ── LAS DE VARIAS RESPUESTAS ──────────────────────────────────────
 * Casilla en vez de tic: la forma dice si al pulsar se contesta o se marca. Con
 * el mismo botón para las dos, la de una sola parece que espera a que termines
 * de elegir y la múltiple parece que ya has contestado.
 */
.sop-voto-casilla{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 16px; height: 16px;
    border: 1.5px solid var(--sop-borde);
    border-radius: 4px;
    background: var(--sop-papel);
}
.sop-voto-casilla.es-on{
    border-color: var(--sop-verde-hondo);
    background: var(--sop-verde-hondo);
    color: #fff;
}
.sop-voto-casilla iconify-icon{ font-size: 12px; }

/* La marcada NO se pinta entera de verde: en una múltiple hay varias a la vez y
   tres botones verdes seguidos se leen como «ya está contestado». La casilla
   basta, y el borde acompaña. */
.sop-voto .sop-voto-op.es-puesta:has(.sop-voto-casilla){
    border-color: var(--sop-verde-hondo);
    background: var(--sop-verde-claro);
    color: var(--sop-tinta);
}

.sop-voto .sop-voto-enviar{
    width: 100%; height: auto;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid var(--sop-verde-hondo);
    border-radius: 10px;
    background: var(--sop-verde-hondo);
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}
/* APAGADO MIENTRAS NO HAYA NADA MARCADO: un «Enviar» pulsable sin elegir manda
   una respuesta vacía que el servidor rechaza, y el rechazo no se entiende. */
.sop-voto .sop-voto-enviar[disabled]{
    border-color: var(--sop-borde);
    background: var(--sop-crema);
    color: var(--sop-suave);
    cursor: default;
}

/* ── LA SALIDA DE LA PREGUNTA CERRADA ──────────────────────────────
 * Con borde de puntos, para que se vea que NO es una respuesta más: es irse de
 * la lista. Una pregunta cerrada que no contempla tu caso te deja mintiendo o
 * abandonando, y quien escribe al soporte suele estar justo en el caso raro.
 */
.sop-voto .sop-voto-otra{
    border-style: dashed;
    border-color: var(--sop-borde);
    color: var(--sop-suave);
    font-weight: 500;
}
.sop-voto .sop-voto-otra:hover{
    border-color: var(--sop-suave);
    background: var(--sop-crema);
    color: var(--sop-texto);
}

/* Sobre la burbuja propia --si alguna vez se pinta ahí-- los tonos se invierten
   para que el texto siga leyéndose. */
.sop-msg.es-mio .sop-voto{ border-top-color: rgba(255,255,255,.25); }
.sop-msg.es-mio .sop-voto-preg{ color: #fff; }

/* ── LOS ENLACES DEL MENSAJE ───────────────────────────────────────
 * Se subrayan y se cortan si son largos: una URL de doscientos caracteres
 * rompe el ancho de la burbuja y empuja la hora fuera.
 */
.sop-burbuja .sop-enlace{
    color: var(--sop-verde-hondo);
    text-decoration: underline;
    word-break: break-word;
}
.sop-msg.es-mio .sop-burbuja .sop-enlace{ color: #fff; }

/* ══ ¿DAMOS ESTO POR RESUELTO? ═════════════════════════════════════
 *
 * Sale AL FINAL DEL HILO, no en una ventana aparte: la pregunta es sobre esta
 * conversación y se contesta mirándola. Un overlay taparía justo lo último que
 * se dijo, que es el dato que hace falta para decidir.
 *
 * Se parece a `.sop-recibido` --misma familia de tarjeta dentro del hilo-- pero
 * con el borde del verde fuerte: esto pide una decisión, aquello solo informa.
 */
.sop-cierre{
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid var(--sop-verde);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sop-verde-claro), #f7fdf6);
}
.sop-cierre-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sop-verde);
    color: #fff;
    font-size: 16px;
}

/* TODO EL TEXTO EN LA SEGUNDA COLUMNA: título, explicación y botones arrancan
   en la misma vertical, que es la regla de alineación del proyecto. */
.sop-cierre-txt{ flex: 1; min-width: 0; }
.sop-cierre-txt b{ display: block; font-size: 13px; color: var(--sop-verde-hondo); }
.sop-cierre-txt small{
    display: block; margin-top: 3px;
    font-size: 11.5px; line-height: 1.45; color: var(--sop-texto);
}

/* EN COLUMNA, Y NO EN FILA. La esquina mide 380px y, quitando el relleno y la
   columna del icono, quedan unos 310 para dos botones que piden 352: en fila se
   estrujaban hasta partir el texto en tres líneas y quedaban de 76px de alto.
   Uno debajo del otro caben enteros y se leen de una pasada. */
.sop-cierre-btns{ display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }

/* Los dos botones son `<button>` dentro del widget, así que hay que apagarles
   lo que el sitio le pone a todo botón: alto fijo, borde `outset` y fondo gris
   del navegador. La clase doblada gana sin depender del orden de las hojas. */
.sop-cierre .sop-cierre-btns button{
    width: 100%; height: auto;
    white-space: nowrap;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: 12px; font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

/* LA SALIDA BARATA, PRIMERO Y EN SECUNDARIO. Cerrar la consulta se archiva,
   sale de la cola y manda el correo: es una decisión, no un descuido al buscar
   la X. Que el botón que la toma pese más que el que no hace nada. */
.sop-cierre .sop-cierre-no{
    border: 1px solid var(--sop-borde);
    background: var(--sop-papel);
    color: var(--sop-texto);
}
.sop-cierre .sop-cierre-no:hover{ background: var(--sop-crema); }

.sop-cierre .sop-cierre-si{
    border: 1px solid var(--sop-verde-hondo);
    background: var(--sop-verde-hondo);
    color: #fff;
}
.sop-cierre .sop-cierre-si:hover{ filter: brightness(1.06); }

/* ══ LA TARJETA DE ESTADO ══════════════════════════════════════════ */
.sop-estado{
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--sop-borde);
    border-radius: 12px;
    background: var(--sop-papel);
}
.sop-estado-fila{ display: flex; gap: 12px; }
.sop-estado-fila > div{ flex: 1; min-width: 0; }
.sop-estado-fila small{ display: block; font-size: 10.5px; color: var(--sop-suave); }
.sop-estado-fila b{
    display: flex; align-items: center; gap: 6px;
    margin-top: 2px;
    font-size: 13px; color: var(--sop-tinta);
}
.sop-estado-fila b.es-online{ color: var(--sop-verde); }
.sop-estado-detalle{
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--sop-borde);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--sop-texto);
}

/* ══ EL HILO ═══════════════════════════════════════════════════════ */
.sop-dia{
    margin: 4px 0 12px;
    text-align: center;
    font-size: 10.5px;
    color: var(--sop-suave);
}
.sop-msgs{ display: flex; flex-direction: column; gap: 10px; }

.sop-msg{ display: flex; gap: 9px; align-items: flex-start; }
.sop-msg-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--sop-verde-claro);
    color: var(--sop-verde);
    font-size: 14px;
}
.sop-burbuja{
    max-width: 78%;
    padding: 9px 12px;
    border-radius: 12px 12px 12px 3px;
    background: var(--sop-crema);
    border: 1px solid var(--sop-borde);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sop-texto);
    word-break: break-word;
}
.sop-hora{ display: block; margin-top: 4px; font-size: 10px; color: var(--sop-suave); }

/* El mío: a la derecha, en verde y sin avatar -- ya sé quién soy. */
.sop-msg.es-mio{ flex-direction: row-reverse; }
.sop-msg.es-mio .sop-msg-ico{ display: none; }
.sop-msg.es-mio .sop-burbuja{
    border-radius: 12px 12px 3px 12px;
    background: var(--sop-verde-hondo);
    border-color: var(--sop-verde-hondo);
    color: #fff;
}
.sop-msg.es-mio .sop-hora{ color: rgba(255,255,255,.7); }

/* La raya de sistema: «se ha conectado». No es una burbuja porque no lo dice
   nadie -- lo dice la conversación. */
.sop-sistema{
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--sop-verde-claro);
    color: var(--sop-verde-hondo);
    font-size: 11.5px;
    font-weight: 600;
}
.sop-sistema iconify-icon{ font-size: 15px; }

/* Los adjuntos dentro de un mensaje. */
.sop-msg-files{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.sop-msg-files a{
    display: flex; align-items: center; gap: 6px;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    color: inherit;
    font-size: 11px;
    text-decoration: none;
}
.sop-msg:not(.es-mio) .sop-msg-files a{ background: #fff; border-color: var(--sop-borde); }
.sop-msg-files img{ display: block; max-width: 150px; border-radius: 8px; }

/* ══ LA CAJA DE ESCRIBIR ═══════════════════════════════════════════ */
/* LOS TRES A LA MISMA ALTURA, Y HAY QUE DECIRLO.
   El clip y el botón de enviar miden 38px de lado; el `<textarea rows="1">` se
   quedaba en 22 --medido-- porque su alto lo decide el contenido y no hay
   ninguna hoja que le dé una medida. Con `align-items:flex-end` los tres
   compartían el borde de abajo, así que la caja de escribir salía hundida
   respecto a los botones y con el texto pegado al suelo.
   Se le da la MISMA altura y se centran los tres. */
.sop-pie{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--sop-borde);
    background: var(--sop-papel);
}
.sop-pie textarea{
    flex: 1;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    max-height: 92px;
    padding: 9px 11px;
    border: 1px solid var(--sop-borde);
    border-radius: 10px;

    /* Interlineado DECLARADO: con `normal`, el alto de la línea depende de la
       fuente que herede de cada página del sitio, y el texto bailaba dentro de
       la caja según dónde estuviera montado el chat. */
    font-size: 12.5px;
    line-height: 18px;
    font-family: inherit;
    color: var(--sop-tinta);
    resize: none;
    outline: 0;
    overflow-y: auto;
}
.sop-pie textarea:focus{ border-color: var(--sop-verde); }
.sop-pie button{
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--sop-verde-hondo);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.sop-pie button.sop-clip{ background: var(--sop-crema); color: var(--sop-suave); }
.sop-pie button.sop-clip:hover{ background: var(--sop-verde-claro); color: var(--sop-verde); }

/* ══ AVISO GENERAL ═════════════════════════════════════════════════ */
.sop-aviso{
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 12px;
}

/* ══ PANTALLAS ESTRECHAS ═══════════════════════════════════════════
   El panel pasa a ocupar la ventana: a 360px de ancho, 380px de panel con
   22px de margen no cabe, y el chat se salía por la derecha. */
@media (max-width: 460px){
    #sopChat{ right: 12px; bottom: 12px; left: 12px; }
    .sop-panel{ width: auto; max-height: calc(100vh - 24px); }
    .sop-badge{ margin-left: auto; }
    .sop-badge small, .sop-badge b{ display: none; }
    .sop-badge{ padding: 12px; }
}

/* Quien pide no animarse, no se anima. */
@media (prefers-reduced-motion: reduce){
    #sopChat *{ transition: none !important; animation: none !important; }
}

/* ══ CONVERSACIÓN APAGADA ══════════════════════════════════════════
   Cerrada por soporte o caducada por silencio. El cartel va ARRIBA y el hilo
   debajo, no en su lugar: quien vuelve dos semanas después quiere leer lo que
   se dijo, y esconderlo sería castigarle por no haber contestado.

   La caducada en ámbar y la cerrada en verde, porque no son lo mismo: una es
   «esto se resolvió» y la otra «dejaste de contestar». */
.sop-apagada{
    margin-bottom: 16px;
    padding: 18px 16px;
    border-radius: 12px;
    border: 1px solid var(--sop-verde-borde);
    background: linear-gradient(135deg, var(--sop-verde-claro), #f7fdf6);
    text-align: center;
}
.sop-apagada-ico{
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--sop-verde);
    color: #fff;
    font-size: 21px;
}
.sop-apagada b{ display: block; font-size: 14.5px; color: var(--sop-verde-hondo); }
.sop-apagada p{ margin: 6px 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--sop-texto); }
.sop-apagada .sop-btn{ width: auto; padding: 10px 18px; }

.sop-apagada.es-caducada{
    border-color: #fcd9a0;
    background: linear-gradient(135deg, #fef6e7, #fffdf7);
}
.sop-apagada.es-caducada .sop-apagada-ico{ background: #d97706; }
.sop-apagada.es-caducada b{ color: #92400e; }

/* ═══════════════════════════════════════════════════════════════════
 *  EL MISMO WIDGET, VISTO POR UN AGENTE
 * ═══════════════════════════════════════════════════════════════════
 *
 * No es otro componente ni otra hoja: es el de siempre con otro oficio. Las
 * burbujas, la caja de escribir, los adjuntos y la cabecera son EXACTAMENTE
 * los del cliente --incluido el lado: lo propio a la derecha, lo del otro a la
 * izquierda--, y lo único que cambia es por dónde se entra: una lista de
 * conversaciones en vez de un formulario.
 *
 * Hacerlo con las mismas clases no es ahorro de líneas: es que el agente vea
 * la conversación tal y como la ve el cliente. Con dos hojas, el día que se
 * cambie el radio de una burbuja se cambia en una sola y nadie se entera. */

/* ── EL BADGE DEL AGENTE ─────────────────────────────────────────── */

/* Más sobrio que el del visitante --al que hay que invitar-- y con el número
   rojo como único grito. Verde oscuro plano en vez del degradado: este badge
   se ve TODO el día mientras se trabaja, y un degradado vivo en la esquina
   cansa a la tercera hora. */
.sop-badge.es-agente{
    background: #17351f;
    box-shadow: 0 10px 26px rgba(10,30,15,.34);

    /* EL ARO DE TRES PÍXELES, que es el semáforo del turno. Se mira de reojo
       desde el otro lado de la pantalla mientras se hace otra cosa, y a 1px el
       color no se separa del borde del propio botón. */
    border: 3px solid transparent;
}
.sop-badge.es-agente .sop-badge-ico{ background: rgba(255,255,255,.13); }

/* ══ Y EL ARO DEL VISITANTE, CON LOS MISMOS TRES PÍXELES ═══════════
 *
 * El agente tiene su semáforo --qué le queda por contestar-- y el visitante
 * tiene el suyo: si hay alguien al otro lado. Es la misma pregunta desde el
 * otro lado del mostrador, así que se enseña igual.
 *
 * TRES PÍXELES Y NO UNO por lo mismo que allí: a 1px el color no se separa del
 * borde del propio botón y el semáforo deja de leerse de reojo. Y AQUÍ MÁS,
 * porque este badge vive sobre la foto de una portada: un aro fino sobre una
 * imagen con contraste no se ve.
 *
 * Los colores son los del punto y los de la chapa de la cabecera --verde,
 * ámbar y gris--: tres sitios distintos diciendo lo mismo con el mismo color
 * es lo que hace que no haya que aprenderse ninguno.
 */
.sop-badge{ border: 3px solid transparent; }

/* EN LÍNEA: hay alguien y contesta ahora. */
.sop-badge.es-online{ border-color: #3ddc73; }

/* AUSENTE: hay equipo, pero ahora no está delante. Ámbar, que es «espera», no
   «no hay nadie»: la diferencia decide si el visitante escribe o se va. */
.sop-badge.es-away{ border-color: #f0b429; }

/* FUERA DE LÍNEA: se recoge la consulta y se contesta luego. Gris y no rojo --
   el rojo dice «algo va mal» y aquí no va mal nada: está cerrado. */
.sop-badge.es-offline{ border-color: #9aa8a0; }

/* El del agente NO hereda estos: su aro cuenta otra cosa --su turno-- y las
   dos clases pueden coincidir en el mismo botón. Gana el suyo, que es el que
   le sirve a quien lo está mirando. */
.sop-badge.es-agente.es-online,
.sop-badge.es-agente.es-away,
.sop-badge.es-agente.es-offline{ border-color: transparent; }

/* VERDE: todo contestado, no hay nada esperando. */
.sop-badge.es-agente.es-libre{ border-color: #3ddc73; }

/* ROJO: hay conversaciones sin responder. El número rojo ya lo dice, pero el
   número hay que leerlo y el aro se ve sin mirar. */
.sop-badge.es-agente.es-cola{
    border-color: #e11d48;
    background: #1e4526;
}

/* NARANJA: el agente lleva veinte minutos sin tocar nada, y ese estado ya se
   ha publicado -- la web le está diciendo «Ausente» a quien entre. Manda sobre
   los otros dos: haya o no cola, lo que hay que corregir es que no hay nadie
   delante. */
.sop-badge.es-agente.es-quieto{
    border-color: #f0b429;
    background: #2a2a17;
}

/* El halo rojo del pendiente, además del aro: uno es el borde y el otro la
   sombra, así que no se pisan. */
.sop-badge.es-agente.es-pendiente{
    box-shadow: 0 10px 26px rgba(10,30,15,.34), 0 0 0 2px rgba(225,29,72,.28);
}

/* Quieto, el halo rojo sobra: llamaría a resolver la cola cuando lo que hay
   que hacer es volver. */
.sop-badge.es-agente.es-quieto.es-pendiente{
    box-shadow: 0 10px 26px rgba(10,30,15,.34);
}

/* ── LA LISTA DE CONVERSACIONES ──────────────────────────────────── */

/* LA LISTA TIENE SU PROPIO TECHO Y SU PROPIO SCROLL.
 *
 * No basta con el del panel: con quince conversaciones, el enlace de «Abrir la
 * bandeja completa» --que es la salida hacia la pantalla grande-- se iba con la
 * lista al desplazarse y había que bajar hasta el final para encontrarlo.
 * Acotando la lista, el pie se queda quieto y lo que se mueve es solo lo que
 * tiene que moverse.
 *
 * `48vh` y no un número de píxeles: en un portátil la esquina no puede comerse
 * media pantalla, y en un monitor grande sería una tira ridícula. El tope de
 * 420px es para que en una pantalla muy alta no se convierta en una columna
 * interminable. */
.sop-bandeja{
    display: flex;
    flex-direction: column;
    gap: 6px;

    max-height: min(48vh, 420px);
    overflow-y: auto;

    /* Sitio para la barra sin que se coma el borde de las filas. */
    padding-right: 4px;
    margin-right: -4px;
}

/* Una barra discreta: esto es una esquina, no una pantalla. */
.sop-bandeja::-webkit-scrollbar{ width: 8px; }
.sop-bandeja::-webkit-scrollbar-thumb{
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: var(--sop-verde-borde);
}
.sop-bandeja::-webkit-scrollbar-track{ background: transparent; }

/* Firefox no entiende lo de arriba y sí estas dos. */
.sop-bandeja{ scrollbar-width: thin; scrollbar-color: var(--sop-verde-borde) transparent; }

/* ── LA FILA SON DOS TROZOS DENTRO DE UNA CAJA ───────────────────
   El botón que abre la conversación, y a su lado la columna de la derecha
   --hora y chapa-- que queda FUERA de él para que la chapa de «Sin coger»
   pueda ser a su vez un botón. El borde y el resalte al pasar por encima
   pasan a la caja, para que los dos trozos se sigan leyendo como una fila. */
.sop-fila-caja{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;
    border: 1px solid var(--sop-borde);
    border-radius: 12px;
    background: var(--sop-papel);
}
.sop-fila-caja:hover{ border-color: var(--sop-verde-borde); background: var(--sop-crema); }

.sop-fila-caja.es-pendiente{ border-left: 3px solid #e11d48; padding-left: 8px; }

.sop-fila{
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 1;
    min-width: 0;
    height: auto;                 /* el global `button{height:25px}` del sitio */
    padding: 9px 10px;
    border: 1px solid var(--sop-borde);
    border-radius: 12px;
    background: var(--sop-papel);

    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.sop-fila:hover{ border-color: var(--sop-verde-borde); background: var(--sop-crema); }

/* Lo que espera respuesta, con la barra roja a la izquierda: en una lista de
   doce, el color del texto no basta para encontrarlas de un vistazo. */
.sop-fila.es-pendiente{ border-left: 3px solid #e11d48; padding-left: 8px; }

.sop-fila-ini{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--sop-verde-claro);
    color: var(--sop-verde);
    font-size: 12px; font-weight: 800;
}

/* `min-width: 0` para que el asunto largo se recorte en vez de empujar la
   hora fuera de la fila: sin él, un `flex` no baja de su contenido. */
.sop-fila-txt{ flex: 1; min-width: 0; display: block; }
.sop-fila-txt b{
    display: block;
    font-size: 12.5px; color: var(--sop-tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sop-fila-txt small{
    display: block;
    font-size: 11px; color: var(--sop-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sop-fila-der{
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.sop-fila-der small{ font-size: 10.5px; color: var(--sop-tenue, #93a399); }

.sop-fila-chapa{
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f3f2;
    color: #67736c;
    font-size: 10px; font-weight: 700; font-style: normal;
    white-space: nowrap;
}
.sop-fila-chapa.es-espera{ background: #fdf4e3; color: #9a6a06; }
.sop-fila-chapa.es-pendiente{ background: #fdeaef; color: #b3183c; }

/* ── LA CHAPA QUE ADEMÁS SE PULSA ────────────────────────────────
   «Sin coger» dice el estado y es el botón de cogerla. Se le nota que se pulsa
   --cursor, borde al pasar por encima-- sin dejar de parecer una chapa: si se
   vistiera de botón corriente, la lista pasaría a tener un botón por fila y ya
   no se leería de un vistazo cuál pide algo. */
button.sop-fila-chapa{
    height: auto;                 /* el global `button{height:25px}` del sitio */
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}
button.sop-fila-chapa.es-coger:hover{
    border-color: #d9a441;
    background: #fbeccb;
}

/* El enlace a la bandeja grande. Está abajo y no arriba a propósito: lo que se
   viene a hacer aquí es contestar, no irse a otra pantalla. */
.sop-bandeja-pie{
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 10px;
    background: var(--sop-crema);
    color: var(--sop-verde);
    font-size: 11.5px; font-weight: 700;
    text-decoration: none;
}
.sop-bandeja-pie:hover{ background: var(--sop-verde-claro); }

/* El color, declarado también para visitado: la hoja global del sitio pinta
   `a, a:visited, a span` de magenta, y este enlace lleva a /admin, que un
   agente visita todos los días. */
.sop-bandeja-pie:visited{ color: var(--sop-verde); }

/* ── LA BANDEJA VACÍA ────────────────────────────────────────────── */

.sop-vacio{
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 34px 18px;
    text-align: center;
}
.sop-vacio-ico{ font-size: 30px; color: var(--sop-verde-borde); }
.sop-vacio b{ font-size: 13px; color: var(--sop-tinta); }
.sop-vacio small{ font-size: 11.5px; color: var(--sop-suave); }

/* ── LA FLECHA DE VOLVER ─────────────────────────────────────────── */

/* Hereda el tamaño y el aspecto de los botones de la cabecera --minimizar y
   cerrar-- porque vive en la misma barra y a la misma altura. */
.sop-volver{
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sop-verde);
    font-size: 18px;
    cursor: pointer;
}
.sop-volver:hover{ background: var(--sop-verde-claro); }

/* ═══════════════════════════════════════════════════════════════════
 *  LA TIRA DE CONVERSACIONES DEL AGENTE
 * ═══════════════════════════════════════════════════════════════════
 *
 * Dos colocaciones con el mismo material. La raíz `#sopChat` está anclada
 * abajo a la derecha, así que las dos crecen desde ahí: en fila hacia la
 * izquierda, en columna hacia arriba.
 *
 * `row-reverse` --y no reordenar en el JS-- porque el ORDEN DEL DOM es el de
 * prioridad: primero el badge, después la conversación más importante, y así.
 * Ese orden es el que sigue el teclado al tabular y el que lee un lector de
 * pantalla; darle la vuelta en el marcado para que quedara bien a la vista
 * dejaría el recorrido del teclado empezando por la menos urgente. */

.sop-agente{ display: flex; align-items: flex-end; gap: 12px; }

.sop-agente.es-fila{ flex-direction: row-reverse; }

/* ── LA BANDEJA, ENCIMA DEL BADGE ────────────────────────────────
   Las conversaciones crecen hacia el LADO --son varias y se comparan entre
   ellas--; la bandeja crece hacia ARRIBA, que es la dirección contraria y la
   que dice «esto sale del botón que acabas de pulsar». En la misma línea que
   las conversaciones quedaba lejos de su badge y parecía de otra cosa.

   `column-reverse` y no `column`: en el marcado el badge va PRIMERO --es lo
   primero que se tabula y lo primero que lee un lector de pantalla--, así que
   la vuelta se la da el CSS y no el orden del documento.

   `align-items: flex-end` para que la bandeja quede alineada con el borde
   derecho del badge, que es su ancla; sin eso una bandeja más ancha se
   desplaza y deja de leerse como suya. */
.sop-agente.es-fila .sop-badge-col,
.sop-agente.es-columna .sop-col{
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.sop-agente.es-fila .sop-badge-col{ flex-direction: column-reverse; }

/* ── LA BANDEJA, FUERA DEL FLUJO: SI NO, EMPUJA ──────────────────
   En el flujo, la bandeja --330 px-- ensancha la caja del badge, y como la fila
   crece hacia la izquierda, los avatares de las conversaciones SE DESPLAZABAN al
   abrirla y volvían a su sitio al cerrarla. Un panel que se abre no puede mover
   lo que hay debajo.

   Absoluta contra la caja del badge, anclada por abajo y por la derecha: el
   badge sigue mandando en el ancho y la bandeja crece hacia arriba y hacia la
   izquierda, que es donde hay hueco.

   Y `position: relative` aquí es además lo que recoloca el PUNTO de mensajes sin
   leer: es `absolute` y buscaba antepasado posicionado, así que se iba hasta la
   esquina de `#sopChat` --que con la bandeja abierta mide 330 px más-- y
   aparecía suelto en mitad de la pantalla, lejos de su badge.

   La caja es la MISMA en las dos colocaciones, y por eso la regla no lleva
   `es-fila` ni `es-columna`: dos reglas para lo mismo acaban separándose. */
/* ── EL ORDEN DE APILADO LO PONE EL JS, NO EL MARCADO ────────────
   `z-index` NO HACE NADA sobre un elemento estático, y las ventanas de
   conversación son elementos de un flex: sin este `position` el
   `style="z-index:N"` que escribe `_alFrente()` se ignoraría en silencio y
   seguiría mandando el orden del documento --que pone la bandeja la primera y,
   por tanto, debajo de todo--. */
.sop-vent{ position: relative; }

.sop-badge-col{ position: relative; }

.sop-badge-col > .sop-vent{
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 10px;
}


/* EN COLUMNA, `row` Y NO `row-reverse`.
   Con `row-reverse` --que es lo que había-- la ventana se colocaba a la
   DERECHA del badge, o sea hacia fuera de la pantalla: `#sopChat` está anclado
   a `right: 22px`, así que a la derecha no queda sitio y la conversación se
   salía por el borde. En `row`, el marcado va en el orden en que se lee
   --ajustes, conversación, columna-- y todo crece hacia la izquierda, que es
   donde hay hueco. */
.sop-agente.es-columna{ flex-direction: row; }

/* En columna el orden del marcado ya es el de la pantalla --avatares, bandeja,
   badge-- y no hay nada que invertir. */
.sop-agente.es-columna .sop-col{ flex-direction: column; }
.sop-agente.es-columna .sop-tira{
    display: flex;
    flex-direction: column-reverse;   /* el más prioritario, pegado al badge */
    gap: 8px;
}
.sop-agente.es-columna .sop-vents{ display: flex; gap: 12px; }

/* ── EL AVATAR ───────────────────────────────────────────────────── */

.sop-ava{
    position: relative;
    flex: 0 0 auto;

    width: 48px; height: 48px;      /* el global `button{height:25px}` del sitio */
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--sop-verde-claro);

    display: grid; place-items: center;
    overflow: visible;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16,50,24,.26);
    font-family: inherit;
}
/* Al pasar por encima sube UN POCO y se pone delante del todo: `transform`
   crea contexto de apilado, así que sin este `z-index` el avatar levantado se
   metía por debajo del siguiente. */
.sop-ava:hover{ transform: translateY(-2px); z-index: 3; }

/* LA FOTO, CUADRADA POR `aspect-ratio` Y NO POR `height: 100%`.
   Con `height:100%` la imagen salía a 44x63: el porcentaje no llegaba a
   resolverse contra la caja del botón --que es una rejilla con las piezas
   centradas, así que el hijo no se estira-- y la foto se quedaba con su
   proporción de origen (280x400). El resultado: un óvalo que se salía del
   círculo por arriba y por abajo y pisaba al avatar de al lado.

   `aspect-ratio: 1` no depende de que la altura del padre sea resoluble: la
   caja es cuadrada por definición y `cover` recorta lo que sobra. Medido:
   44x63 antes, 44x44 después. */
.sop-ava img{
    display: block;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;              /* una foto vertical, recortada y no deformada */
}

/* Las iniciales: el color se declara aquí porque el `b, strong{color:#000}`
   global no llega, pero el `a span` sí alcanzaría a un `<span>` dentro de un
   enlace, y esta pieza puede acabar siéndolo. */
.sop-ava > span{
    font-size: 15px;
    font-weight: 800;
    color: var(--sop-verde-hondo);
    letter-spacing: -.3px;
}

/* EL ARO DICE POR QUÉ ESTÁ DONDE ESTÁ. Sin él, el orden de la tira parece
   arbitrario --y a la tercera vez se deja de confiar en él--. Los cuatro
   niveles con su color de metal, y sin aro quien no es vendedor. */
.sop-ava.es-bronce  { border-color: #c07a3e; }
.sop-ava.es-plata   { border-color: #9aa7b0; }
.sop-ava.es-oro     { border-color: #d9a520; }
.sop-ava.es-diamante{ border-color: #4bb3d4; box-shadow: 0 4px 14px rgba(75,179,212,.5); }

/* Lo que espera respuesta, con su halo: es lo que se ve por el rabillo del ojo
   mientras se mira otra cosa, que es donde vive esta esquina. */
.sop-ava.es-pendiente{ box-shadow: 0 4px 14px rgba(16,50,24,.26), 0 0 0 3px rgba(225,29,72,.35); }

/* EL NÚMERO ROJO CON EL NÚMERO EN BLANCO. Arriba a la derecha y saliéndose del
   círculo: dentro se comería la cara. */
.sop-ava-punto{
    position: absolute;
    top: -4px; right: -4px;

    /* POR DELANTE DEL AVATAR DE AL LADO.
       El punto se sale del círculo --tiene que salirse, dentro se comería la
       cara-- y en columna el avatar de arriba va DESPUÉS en el marcado, así
       que se pintaba encima y tapaba el número. Con `z-index` aquí y ninguno
       en el botón, el punto compite en la capa de la esquina y gana a
       cualquier hermano posterior. Lo de arriba es lo que NO hay que poner: si
       `.sop-ava` llevara `z-index`, crearía su propio contexto y el punto
       volvería a quedarse dentro de él. */
    z-index: 2;

    min-width: 20px; height: 20px;
    padding: 0 5px;
    display: grid; place-items: center;

    border: 2px solid #fff;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;

    font-size: 10.5px; font-weight: 800; font-style: normal;
    line-height: 1;
}

/* El «+N» de las que no caben. Gris y sin aro: no es una persona, es un resto. */
.sop-ava.es-mas{ background: #eef1ef; border-color: #fff; }
.sop-ava.es-mas > span{ color: var(--sop-suave); font-size: 13px; }

/* ── LAS VENTANAS ────────────────────────────────────────────────── */

/* Más estrechas que la del visitante: caben tres en fila en un portátil, que
   es de lo que va esta colocación. */
.sop-vent{ width: 330px; }

/* Minimizada: solo su barra de título. Es lo que permite tener cinco
   conversaciones «abiertas» sin que ocupen la pantalla.

   Y PLEGADA SE QUITA LA CHAPA DE ESTADO, que es lo único que puede irse: en
   220px, la chapa más los tres botones no dejaban ni un píxel para el nombre
   --se veía una barra con «En líne…» y ningún nombre, que es justo el dato que
   hace falta para saber cuál de las tres es--. El estado se lee en las que
   están abiertas, y en el aro del badge. */
.sop-vent.es-min{ width: 240px; }
.sop-vent.es-min .sop-cab{ border-bottom: 0; }
.sop-vent.es-min .sop-cab-linea{ display: none; }

/* La cara en la barra de título, para no perder de vista con quién se habla
   cuando hay tres ventanas seguidas. */
.sop-marca-quien{ gap: 9px; }

.sop-cara{
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--sop-verde-claro);
    overflow: hidden;
}
/* Lo mismo en la barra de título, y por el mismo motivo. */
.sop-cara img{
    display: block;
    width: 100%; aspect-ratio: 1; height: auto;
    object-fit: cover;
}
.sop-cara > span{ font-size: 10.5px; font-weight: 800; color: var(--sop-verde-hondo); }

.sop-cara.es-bronce  { border-color: #c07a3e; }
.sop-cara.es-plata   { border-color: #9aa7b0; }
.sop-cara.es-oro     { border-color: #d9a520; }
.sop-cara.es-diamante{ border-color: #4bb3d4; }

/* `min-width: 0` para que un nombre largo se recorte en vez de empujar los
   tres botones de la barra fuera de la ventana. */
.sop-marca-txt{ flex: 1; min-width: 0; }
.sop-marca-txt b{
    display: block;
    font-size: 13px; font-weight: 700; color: var(--sop-tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sop-marca-txt small{
    display: block;
    font-size: 10.5px; color: var(--sop-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Con la cara y la chapa de estado dentro, la chapa de la barra se queda sin
   sitio en una ventana de 330px: aquí solo su icono y su color. */
.sop-vent .sop-cab-linea{ padding: 4px; }
.sop-vent .sop-cab-linea iconify-icon{ font-size: 12px; }

/* ── LA VENTANA DE AJUSTES (el icono de tres rayas) ──────────────── */

/* ══ EL PANEL DE AJUSTES ═══════════════════════════════════════════
 *
 * Anclado abajo a la derecha como el chat, pero por encima del badge y con la
 * altura acotada a la ventana: dentro hay un editor de texto y una lista de
 * veinte casillas, y sin tope el panel se sale por arriba en un portátil.
 *
 * 560px y no los 300 de antes. Con 300 --el ancho de una conversación-- las
 * instrucciones se escribían en una columna de treinta caracteres y las
 * casillas de las herramientas salían a una por línea: veinte renglones para
 * una lista que cabe en seis.
 */
#sopConf{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9100;                   /* por encima de la esquina del agente */
    display: none;
}

.sop-conf-panel{
    width: 560px;
    max-width: calc(100vw - 44px);
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
}

.sop-conf-cuerpo{
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 16px 16px;
}

/* La cabecera en dos columnas: el icono en la suya y TODO el texto en la otra,
   para que título y subtítulo arranquen en la misma vertical. Es la regla de
   alineación del proyecto, y es la que hace que un bloque no se lea torcido. */
.sop-marca-2col{ display: flex; align-items: flex-start; gap: 10px; }
.sop-marca-2col > div{ flex: 1; min-width: 0; }
.sop-marca-2col b{ display: block; font-size: 13.5px; color: var(--sop-tinta); }
.sop-marca-2col small{
    display: block;
    font-size: 11px; line-height: 1.4; color: var(--sop-suave);
}

/* Las pestañas del sitio, encajadas en el ancho del panel. `TTabES6` trae su
   propia hoja; aquí solo lo que depende de vivir dentro de esto. */
.sop-conf-cuerpo .TTabES6-header{ margin-bottom: 10px; }
.sop-conf-cuerpo .TTabES6-content{ overflow: visible; }

/* ══ LA PESTAÑA DE IA ══════════════════════════════════════════════ */

.sop-conf-ia .sop-conf-rot{ margin-top: 18px; }
.sop-conf-ia .sop-conf-rot:first-child{ margin-top: 0; }

/* El aviso de que falta la clave. Ámbar y no rojo: no está roto, está sin
   terminar de configurar, y son dos cosas que se atienden distinto. */
.sop-conf-aviso{
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 14px;
    padding: 10px 12px;
    border: 1px solid #f0dfae;
    border-radius: 12px;
    background: #fdf8ec;
}
.sop-conf-aviso iconify-icon{ font-size: 18px; color: #a37318; flex: 0 0 auto; }
.sop-conf-aviso b{ display: block; font-size: 12.5px; color: #6d4c0c; }
.sop-conf-aviso small{ display: block; font-size: 11px; line-height: 1.45; color: #8a6a2c; }

.sop-ia-texto{
    width: 100%;
    min-height: 150px;
    padding: 10px 12px;
    border: 1px solid var(--sop-borde);
    border-radius: 12px;
    background: var(--sop-papel);
    color: var(--sop-texto);
    font-family: inherit; font-size: 12.5px; line-height: 1.55;
    resize: vertical;
}

.sop-conf-pie{
    margin: 6px 0 0;
    font-size: 11px; line-height: 1.5; color: var(--sop-suave);
}
.sop-conf-pie code{
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--sop-crema);
    font-size: 10.5px;
    color: var(--sop-verde);
}

/* «Todas / Ninguna», pegado a la derecha de su rótulo. */
.sop-conf-rot{ display: flex; align-items: baseline; justify-content: space-between; }
.sop-conf-acc{ display: flex; gap: 6px; }
.sop-conf-acc button{
    height: auto;
    padding: 2px 8px;
    border: 1px solid var(--sop-borde);
    border-radius: 999px;
    background: var(--sop-papel);
    color: var(--sop-suave);
    font-family: inherit; font-size: 10px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
    cursor: pointer;
}
.sop-conf-acc button:hover{ border-color: var(--sop-verde-borde); color: var(--sop-verde); }

/* ── LAS HERRAMIENTAS ──────────────────────────────────────────────
 *
 * Por grupos, y las que ESCRIBEN con su propio color: leer un pedido y
 * cancelarlo no son la misma decisión, y en una lista corrida de veinte
 * casillas iguales nadie se para a mirar cuáles eran cuáles.
 */
.sop-ia-grupo{
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--sop-borde);
    border-radius: 12px;
    background: var(--sop-crema);
}
.sop-ia-grupo.es-escribe{ border-color: #eccfc9; background: #fdf3f1; }

.sop-ia-grupo-rot{
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 8px;
    font-size: 11px; font-weight: 800;
    letter-spacing: .03em; text-transform: uppercase;
    color: var(--sop-suave);
}
.sop-ia-grupo-rot iconify-icon{ font-size: 13px; }
.sop-ia-grupo.es-escribe .sop-ia-grupo-rot{ color: #a4483a; }

.sop-ia-grupo{ display: flex; flex-wrap: wrap; gap: 6px; }
.sop-ia-grupo-rot{ flex: 1 0 100%; }

.sop-ia-tool{
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--sop-borde);
    border-radius: 999px;
    background: var(--sop-papel);
    font-size: 11.5px; color: var(--sop-texto);
    cursor: pointer;
}
.sop-ia-tool input{ margin: 0; accent-color: var(--sop-verde); }
.sop-ia-grupo.es-escribe .sop-ia-tool input{ accent-color: #a4483a; }

/* ── LOS NÚMEROS Y LOS TEXTOS ─────────────────────────────────── */
.sop-ia-campos{ display: flex; gap: 10px; margin-top: 10px; }
.sop-ia-campo{ flex: 1; min-width: 0; display: block; }
.sop-ia-campo b{
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px; font-weight: 700; color: var(--sop-tinta);
}
.sop-ia-campo input{
    width: 100%; height: 34px;
    padding: 0 10px;
    border: 1px solid var(--sop-borde);
    border-radius: 9px;
    background: var(--sop-papel);
    color: var(--sop-texto);
    font-family: inherit; font-size: 12.5px;
}
/* El selector del proveedor, con la misma caja que los demás campos: el
   `select` del navegador trae su propio alto y su propio borde, y al lado de un
   `input` de 34px se le nota. */
#sopConf .sop-ia-campo select{
    width: 100%; height: 34px;
    padding: 0 8px;
    border: 1px solid var(--sop-borde);
    border-radius: 9px;
    background: var(--sop-papel);
    color: var(--sop-texto);
    font-family: inherit; font-size: 12.5px;
}

.sop-ia-campo small{
    display: block;
    margin-top: 4px;
    font-size: 10.5px; line-height: 1.4; color: var(--sop-suave);
}

/* ── LOS DOS BOTONES ───────────────────────────────────────────
 *
 * `btn-secondary` el que no escribe y `btn-primary` el que sí, que es la regla
 * dura del proyecto. Sin ella, «Probar» y «Guardar» pesan lo mismo y el que de
 * verdad cambia lo que ven los clientes se pulsa sin mirar.
 */
.sop-conf-pies{
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--sop-borde);
}
.sop-conf-pies .sop-btn{ width: auto; padding: 0 16px; }

.sop-conf-pies .btn-secondary{
    border: 1px solid var(--sop-borde);
    background: var(--sop-papel);
    color: var(--sop-texto);
}
.sop-conf-pies .btn-secondary:hover{ border-color: var(--sop-verde-borde); background: var(--sop-crema); }

.sop-conf-pies .btn-primary{
    border: 0;
    background: linear-gradient(135deg, var(--sop-verde-vivo), var(--sop-verde-hondo));
    color: #fff;
}
.sop-conf-pies .btn-primary[disabled]{ opacity: .6; cursor: default; }

.sop-ia-prueba{ display: none; }
.sop-ia-prueba.es-visible{
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--sop-verde-borde);
    border-radius: 12px;
    background: var(--sop-verde-claro);
}
.sop-ia-prueba.es-mal{ border-color: #eccfc9; background: #fdf3f1; }
.sop-ia-prueba small{ display: block; font-size: 10.5px; color: var(--sop-suave); }
.sop-ia-prueba p{ margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--sop-tinta); }

@media (max-width: 640px){
    #sopConf{ right: 12px; left: 12px; bottom: 12px; }
    .sop-conf-panel{ width: auto; }
    .sop-ia-campos{ flex-wrap: wrap; }
}

/* ── LAS PESTAÑAS TRAEN SU PROPIA REGLA DE BOTONES, Y GANA ─────────
 *
 * `TTabES6` es un `TComponentES6`, y la hoja del sitio declara
 * `.TComponentES6 button{ display:flex; height:25px }`. Eso es (0,2,1) contra
 * el (0,1,0) de `.sop-op`, así que dentro de la pestaña TODOS los botones del
 * panel salían en una fila de 25px de alto: el icono, el título y su
 * explicación aplastados en la misma línea.
 *
 * Medido con `getComputedStyle`, que es la única forma de verlo: sobre el
 * papel `.sop-op{display:block}` parece que manda, y no manda. Se sube la
 * especificidad con el id del panel --(1,1,0)-- en vez de poner `!important`,
 * que ganaría también a lo que se escriba mañana.
 */
#sopConf .sop-op,
#sopConf .sop-num,
#sopConf .sop-btn,
#sopConf .sop-conf-acc button{ height: auto; }

#sopConf .sop-op{ display: block; }
#sopConf .sop-num{ display: inline-block; height: 34px; }
#sopConf .sop-conf-acc button{ display: inline-block; }

#sopConf .sop-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
}

/* ══ «ESCRIBIENDO…» ════════════════════════════════════════════════
 *
 * Es una burbuja más, EN EL SITIO EN EL QUE VA A SALIR EL MENSAJE: al final del
 * hilo, con el mismo icono y del mismo lado. La diferencia con un rótulo en la
 * barra de título es la que hay entre «alguien está haciendo algo en alguna
 * parte» y «lo que estoy esperando viene por aquí».
 *
 * Y sirve para las dos cosas --una persona tecleando y la IA pensando-- a
 * propósito: para quien mira son lo mismo, y un segundo cartel con otro nombre
 * solo serviría para delatar cuál de los dos es.
 */
.sop-escribiendo .sop-burbuja{ min-height: 34px; }

.sop-puntos{ display: inline-flex; gap: 4px; align-items: center; height: 16px; }
.sop-puntos i{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sop-suave);
    opacity: .35;
    animation: sopPunto 1.2s infinite ease-in-out;
}
.sop-puntos i:nth-child(2){ animation-delay: .18s; }
.sop-puntos i:nth-child(3){ animation-delay: .36s; }

@keyframes sopPunto{
    0%, 60%, 100%{ opacity: .3; transform: translateY(0); }
    30%          { opacity: 1;  transform: translateY(-3px); }
}

.sop-escribiendo-rot{
    margin-left: 8px;
    font-size: 11px; font-style: italic; color: var(--sop-suave);
}

/* El cursor de lo que la IA está escribiendo. Parpadea porque el texto llega a
   trozos y sin él no se distingue de un mensaje ya terminado -- que es
   justamente lo que no se quiere: media respuesta leída como entera. */
.sop-cursor{
    display: inline-block;
    width: 2px; height: 13px;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--sop-verde);
    animation: sopCursor 1s steps(2, start) infinite;
}
@keyframes sopCursor{ 0%,100%{ opacity: 1 } 50%{ opacity: 0 } }


.sop-conf-rot{
    margin: 0 0 8px;
    font-size: 11px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sop-suave);
}

.sop-ops{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.sop-op{
    /* `display: block` DECLARADO, aunque «un botón ya es un bloque»: la hoja
       global del sitio le pone `display:flex` a TODO `button`, así que el
       icono, el título y la explicación salían en una fila -- el título
       aplastado a 26px de ancho entre los otros dos. Medido: `flex/row` antes,
       y las tres piezas en la misma línea pese a tener `display:block` cada
       una. Es la misma trampa de siempre: una regla que casa con el elemento
       le gana a lo que hereden sus hijos. */
    display: block;

    width: 100%;
    height: auto;                    /* el global `button{height:25px}` */
    padding: 10px 12px;
    border: 1px solid var(--sop-borde);
    border-radius: 12px;
    background: var(--sop-papel);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.sop-op:hover{ border-color: var(--sop-verde-borde); background: var(--sop-crema); }
.sop-op.es-on{ border-color: var(--sop-verde); background: var(--sop-verde-claro); }

.sop-op-ico{ display: block; font-size: 18px; color: var(--sop-verde); margin-bottom: 4px; }
.sop-op b{ display: block; font-size: 12.5px; color: var(--sop-tinta); }
.sop-op small{ display: block; font-size: 11px; line-height: 1.4; color: var(--sop-suave); }

.sop-cuantos{ display: flex; gap: 6px; }
.sop-num{
    width: 38px; height: 34px;
    border: 1px solid var(--sop-borde);
    border-radius: 9px;
    background: var(--sop-papel);
    color: var(--sop-texto);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}
.sop-num:hover{ border-color: var(--sop-verde-borde); }
.sop-num.es-on{ border-color: var(--sop-verde); background: var(--sop-verde); color: #fff; }

.sop-conf-nota{
    margin: 16px 0 0;
    font-size: 11px; line-height: 1.5; color: var(--sop-suave);
}

/* ── PANTALLA ESTRECHA ───────────────────────────────────────────── */

/* Tres ventanas de 330 no caben en un móvil, y la tira tampoco: se deja el
   badge y su contador, que es lo que avisa, y se atiende desde la bandeja. */
@media (max-width: 720px){
    .sop-agente .sop-tira{ display: none; }
    .sop-agente.es-fila .sop-vent ~ .sop-vent{ display: none; }
    .sop-vent{ width: min(330px, calc(100vw - 44px)); }

    /*
     * LA REGLA DE ARRIBA SOLO TAPABA LAS VENTANAS DE SOBRA DENTRO DE LA
     * MISMA COLUMNA (22/09/2026): abrir una conversación concreta desde la
     * bandeja añade su `.sop-vent` en uno de DOS sitios según el caso --
     * dentro de su propia `.sop-badge-col` (un agente con badge propio) o
     * COMO HERMANA DIRECTA de las columnas, colgando ya de `.sop-agente` (una
     * conversación suelta, sin badge) -- comprobado en el DOM real: la
     * segunda ventana abierta no tenía `.sop-badge-col` de por medio. El `~`
     * de arriba, que solo mira hermanos DENTRO DE LA MISMA columna, no
     * alcanzaba ninguno de los dos casos cruzados. Con la bandeja Y la
     * conversación abiertas a la vez, `.sop-agente` (flex, sin wrap) las
     * encogía a las dos por debajo de 330px para que cupieran juntas: los
     * globos de los mensajes se veían apretados, que es justo lo que no
     * cabía.
     *
     * Las cuatro reglas cubren las dos formas en que puede llegar una
     * ventana (colgada de `.sop-agente` o de su `.sop-badge-col`) contra las
     * dos formas en que puede llegar LA SIGUIENTE que la tapa. Se tapa la
     * ventana, nunca la columna ni el globo: el aviso sin abrir sigue
     * viéndose, y solo queda a la vista la ÚLTIMA conversación abierta. */
    .sop-agente.es-fila > .sop-vent:has(~ .sop-vent),
    .sop-agente.es-fila > .sop-vent:has(~ .sop-badge-col .sop-vent),
    .sop-agente.es-fila .sop-badge-col:has(~ .sop-vent) .sop-vent,
    .sop-agente.es-fila .sop-badge-col:has(~ .sop-badge-col .sop-vent) .sop-vent{
        display: none;
    }
}


/* ── EL TIC DE ENVIADO Y EL DOBLE TIC DE LEÍDO ───────────────────── */

.sop-tic{
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    font-size: 13px;
    vertical-align: -2px;
}

/* Sobre la burbuja propia, que es verde: el tic apagado en un blanco
   translúcido y el leído en blanco entero. Un azul --el de otras aplicaciones--
   aquí no se ve: el contraste contra el verde es peor que el del propio
   blanco. */
.sop-tic{ color: rgba(255,255,255,.55); }
.sop-tic.es-leido{ color: #fff; }

/* ── «ENVIADO» / «LEÍDO 14:32» ─────────────────────────────────
   La palabra al lado del tic, no en su lugar: el tic se ve de un vistazo y la
   palabra se lee cuando hace falta. A 10px --el suelo tipográfico del
   proyecto-- y en el tono apagado de la hora, para que sea una nota al pie de
   la burbuja y no otra línea de conversación. */
.sop-acuse{
    margin-left: 4px;
    font-size: 10px;
    letter-spacing: .01em;
}

/* Sobre la burbuja verde van los dos tonos de la hora: apagado mientras solo
   está enviado, y en blanco cuando ya lo han leído -- que es la única de las
   dos noticias que interesa. */
.sop-msg.es-mio .sop-acuse{ color: rgba(255,255,255,.7); }
.sop-msg.es-mio .sop-acuse.es-leido{ color: #fff; font-weight: 600; }

/* Y en el lado del agente la burbuja propia es igual de verde, así que valen
   los mismos dos tonos: no hay dos reglas porque no hay dos diseños. */

/* ══════════════════════════════════════════════════════════════════
   EL MENÚ DEL CLIP   ·   qué se mete en la conversación
   ══════════════════════════════════════════════════════════════════
   Colgado del `body` como el menú del estado, y por el mismo motivo: el pie de
   la ventana tiene `overflow` y lo recortaría por arriba justo donde crece. */
.sop-clip-caja{
    position: fixed;
    z-index: 2147483000;
}

.sop-clip-menu{
    width: 254px;
    padding: 8px;
    border: 1px solid var(--sop-borde, #e2e8f0);
    border-radius: 14px;
    background: var(--sop-papel, #fff);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

/* Doblada la clase: `.TComponentES6 button` le pone a todo botón un alto fijo y
   `display:flex` propio, y aquí el alto lo manda el texto. */
.sop-clip-menu button{
    width: 100%; height: auto;
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 3px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.sop-clip-menu button:last-child{ margin-bottom: 0; }
.sop-clip-menu button:hover{ background: var(--sop-crema, #f8fafc); }

/* EL ICONO EN SU COLUMNA Y EL TEXTO EN LA SEGUNDA -- título y explicación
   arrancan en la misma vertical. */
.sop-clip-menu button > iconify-icon{
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 16px;
    color: var(--sop-suave, #64748b);
}
.sop-clip-menu button > span{
    flex: 1; min-width: 0;
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
    color: var(--sop-tinta, #16211a);
}
.sop-clip-menu button > span small{
    display: block; margin-top: 2px;
    font-size: 11px; font-weight: 500; line-height: 1.35;
    color: var(--sop-suave, #64748b);
}

/* ══════════════════════════════════════════════════════════════════
   ESCRIBIR UNA ENCUESTA   ·   el marco, dentro del propio chat
   ══════════════════════════════════════════════════════════════════
   No es una ventana aparte: se está escribiendo PARA esta conversación y hay
   que poder leerla mientras se escribe. Va al final de los mensajes, con su
   propio fondo para que se distinga de una burbuja. */
.sop-enc{
    margin: 10px 0 4px;
    padding: 12px;
    border: 1px solid var(--sop-verde-borde, #d3e7cf);
    border-radius: 14px;
    background: var(--sop-crema, #f7faf6);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}

.sop-enc-cab{
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.sop-enc-cab b{
    font-size: 12.5px; font-weight: 800; letter-spacing: -.1px;
    color: var(--sop-tinta, #16211a);
}
.sop-enc .sop-enc-cab button{
    width: 24px; height: 24px;
    display: grid; place-items: center;
    padding: 0;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--sop-suave, #6b7a70);
    cursor: pointer;
}
.sop-enc .sop-enc-cab button:hover{ background: #e9efe7; }
.sop-enc .sop-enc-cab button iconify-icon{ font-size: 15px; }

/* Los campos: mismo trato para la pregunta y para cada opción, que son la misma
   cosa escrita en dos sitios. */
.sop-enc input[type="text"]{
    width: 100%; height: auto;
    padding: 8px 10px;
    border: 1px solid var(--sop-borde, #e4eae4);
    border-radius: 9px;
    background: var(--sop-papel, #fff);
    font-size: 12.5px; line-height: 1.35;
    color: var(--sop-tinta, #16211a);
    box-sizing: border-box;
}
.sop-enc input[type="text"]:focus{
    outline: none;
    border-color: var(--sop-verde, #236e30);
    box-shadow: 0 0 0 3px rgba(35, 110, 48, .12);
}
.sop-enc .sop-enc-preg{ font-weight: 700; }

.sop-enc-rot{
    margin: 12px 0 6px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sop-suave, #6b7a70);
}

.sop-enc-filas{ display: flex; flex-direction: column; gap: 6px; }

.sop-enc-fila{ display: flex; align-items: center; gap: 8px; }

/* EL NÚMERO EN SU COLUMNA: se ve de un vistazo cuántas opciones van, que es lo
   que se está contando mientras se escriben. */
.sop-enc-num{
    flex: 0 0 auto;
    width: 16px;
    font-size: 11px; font-weight: 700; text-align: right;
    color: var(--sop-suave, #6b7a70);
}
.sop-enc-fila input[type="text"]{ flex: 1; min-width: 0; }

.sop-enc .sop-enc-quita{
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    padding: 0;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--sop-suave, #6b7a70);
    cursor: pointer;
}
.sop-enc .sop-enc-quita:hover{ background: #e9efe7; color: #b42318; }
.sop-enc .sop-enc-quita iconify-icon{ font-size: 13px; }

.sop-enc .sop-enc-mas{
    width: auto; height: auto;
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 6px 8px;
    border: 0; border-radius: 8px;
    background: transparent;
    font-size: 12px; font-weight: 700;
    color: var(--sop-verde, #236e30);
    cursor: pointer;
}
.sop-enc .sop-enc-mas:hover{ background: #e9efe7; }
.sop-enc .sop-enc-mas iconify-icon{ font-size: 15px; }

.sop-enc-nota{
    margin: 8px 0 0;
    font-size: 10.5px; line-height: 1.4;
    color: var(--sop-suave, #6b7a70);
}

.sop-enc-mal{
    margin: 8px 0 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: #fef3f2;
    font-size: 11px; font-weight: 600; line-height: 1.35;
    color: #b42318;
}

.sop-enc-btns{
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 12px;
}
/* El que cierra en secundario y el que escribe en primario, como en todo el
   proyecto: sin eso, cancelar pesa lo mismo que mandar la pregunta. */
.sop-enc .sop-enc-no,
.sop-enc .sop-enc-si{
    width: auto; height: auto;
    display: inline-flex; align-items: center;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
}
.sop-enc .sop-enc-no{
    border: 1px solid var(--sop-borde, #e4eae4);
    background: var(--sop-papel, #fff);
    color: var(--sop-texto, #3f4a43);
}
.sop-enc .sop-enc-no:hover{ background: #eef2ed; }
.sop-enc .sop-enc-si{
    border: 1px solid var(--sop-verde-hondo, #16491f);
    background: var(--sop-verde, #236e30);
    color: #fff;
}
.sop-enc .sop-enc-si:hover{ background: var(--sop-verde-hondo, #16491f); }
.sop-enc .sop-enc-si[disabled]{ opacity: .6; cursor: default; }

/* ══════════════════════════════════════════════════════════════════
   LA SUBCABECERA   ·   Chat | Archivos
   ══════════════════════════════════════════════════════════════════
   Es un `TTabES6` de verdad, del que se aprovecha la barra: el aspecto, el
   indicador que se desliza y el aviso de cambio. Su zona de contenido se apaga
   --el cuerpo del chat tiene su propio desplazamiento, su tarjeta de estado y
   su pie, y meterlo dentro añadiría un segundo scroll dentro del primero. */
.sop-subtabs{
    flex: 0 0 auto;
    border-bottom: 1px solid var(--sop-borde, #e4eae4);
    background: var(--sop-papel, #fff);
}

.sop-subtabs .TTabES6-content{ display: none !important; }

/* El control trae altura propia; aquí manda la barra. */
.sop-subtabs .TTabES6{ height: auto !important; }

.sop-subtabs .TTabES6-header{ padding: 0 8px; }

.sop-subtabs .TTabES6-tab{
    padding: 9px 12px;
    font-size: 12px; font-weight: 700;
    color: var(--sop-suave, #6b7a70);
}
.sop-subtabs .TTabES6-tab.active{ color: var(--sop-verde, #236e30); }

/* ══════════════════════════════════════════════════════════════════
   LO COMPARTIDO EN LA CONVERSACIÓN
   ══════════════════════════════════════════════════════════════════ */
.sop-arch-rot{
    margin: 14px 0 8px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sop-suave, #6b7a70);
}
.sop-arch-rot:first-child{ margin-top: 4px; }

/* EN REJILLA Y CUADRADAS: de una foto se reconoce el contenido de un vistazo,
   y en columna cabrían tres en toda la altura del panel. */
.sop-arch-rejilla{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sop-arch-rejilla .sop-arch-foto{
    width: 100%; height: auto;
    display: block;
    padding: 0;
    border: 1px solid var(--sop-borde, #e4eae4);
    border-radius: 10px;
    background: var(--sop-crema, #f7faf6);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}
.sop-arch-rejilla .sop-arch-foto:hover{ border-color: var(--sop-verde, #236e30); }

.sop-arch-foto img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Y LOS DOCUMENTOS EN FILA: de un PDF el nombre es todo lo que hay, y doce
   miniaturas genéricas iguales no distinguen una factura de otra. */
.sop-arch-lista{ display: flex; flex-direction: column; gap: 6px; }

.sop-arch-doc{
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--sop-borde, #e4eae4);
    border-radius: 10px;
    background: var(--sop-papel, #fff);
    text-decoration: none;
}
/* El borde, explícito también para `:visited`: la regla global del sitio lo
   pinta de negro en cualquier tarjeta-enlace ya visitada. */
.sop-arch-doc:visited{ border-color: var(--sop-borde, #e4eae4); }
.sop-arch-doc:hover{ border-color: var(--sop-verde, #236e30); background: var(--sop-crema, #f7faf6); }

/* Icono en su columna y TODO el texto en la segunda: nombre y detalle arrancan
   en la misma vertical. */
.sop-arch-ico{ flex: 0 0 auto; display: flex; color: var(--sop-verde, #236e30); }
.sop-arch-ico iconify-icon{ font-size: 18px; }

.sop-arch-txt{ flex: 1; min-width: 0; }
.sop-arch-txt b{
    display: block;
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
    color: var(--sop-tinta, #16211a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sop-arch-txt small{
    display: block; margin-top: 2px;
    font-size: 11px; line-height: 1.35;
    color: var(--sop-suave, #6b7a70);
}

/* EL PANEL, CON EL MISMO ALTO EN LAS DOS PESTAÑAS. Sin esto, «Archivos» con
   tres fotos encoge la ventana entera y al volver a «Chat» vuelve a crecer: da
   la sensación de que son dos sitios distintos, y el que mira pierde el hilo de
   dónde está. `min-height` sobre el cuerpo y no sobre el panel, para que la
   cabecera y el pie sigan mandando lo suyo. */
.sop-panel .sop-cuerpo{ min-height: 320px; }

/* ══════════════════════════════════════════════════════════════════
   EL AVISO DE WHATSAPP   ·   solo en la ventana del agente
   ══════════════════════════════════════════════════════════════════
   Dos estados y dos lecturas opuestas: en verde, «lo que escribas sale a su
   móvil»; en ámbar, «lo que escribas NO va a salir». El segundo no puede pasar
   desapercibido -- es la diferencia entre contestar y creer que has contestado. */
.sop-wa{
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 10px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 11.5px; line-height: 1.4;
}
/* El icono en su columna y TODO el texto en la segunda. */
.sop-wa iconify-icon{ flex: 0 0 auto; font-size: 15px; margin-top: 1px; }
.sop-wa span{ flex: 1; min-width: 0; }

.sop-wa.es-abierta{
    border: 1px solid var(--sop-verde-borde, #d3e7cf);
    background: var(--sop-verde-claro, #eef6ec);
    color: var(--sop-texto, #3f4a43);
}
.sop-wa.es-abierta iconify-icon{ color: var(--sop-verde, #236e30); }

.sop-wa.es-cerrada{
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #7c2d12;
}
.sop-wa.es-cerrada iconify-icon{ color: #c2410c; }

/* ══════════════════════════════════════════════════════════════════
   SEGUIR DESDE EL MÓVIL
   ══════════════════════════════════════════════════════════════════
   Una consulta no se resuelve en dos minutos: se pregunta, pasa un rato y se
   contesta. Quien cierra la pestaña pierde el hilo y vuelve a preguntar
   mañana. Es una oferta, no un aviso, así que va en frío y sin alarma. */
.sop-seguir{
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--sop-borde, #e4eae4);
    border-radius: 12px;
    background: var(--sop-crema, #f7faf6);
    text-decoration: none;
}
/* El borde, explícito también para `:visited`: la regla global del sitio lo
   pinta de negro en cualquier tarjeta-enlace ya visitada. */
.sop-seguir:visited{ border-color: var(--sop-borde, #e4eae4); }
.sop-seguir:hover{ border-color: var(--sop-verde, #236e30); background: #eef6ec; }

.sop-seguir iconify-icon{ flex: 0 0 auto; font-size: 17px; color: var(--sop-verde, #236e30); }

/* Icono en su columna y TODO el texto en la segunda. */
.sop-seguir span{ flex: 1; min-width: 0; }
.sop-seguir b{
    display: block;
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
    color: var(--sop-tinta, #16211a);
}
.sop-seguir small{
    display: block; margin-top: 2px;
    font-size: 11px; line-height: 1.35;
    color: var(--sop-suave, #6b7a70);
}