/* =====================================================================
   Chat en vivo (widget del sitio público y del sistema de las empresas).
   Usa los tokens del tema (App\Core\Temas): --fondo, --superficie, --borde, --texto, --acento… en canales RGB.
   ===================================================================== */
.fc-raiz { --fc-ac: var(--acento, 8 145 178); --fc-sup: var(--superficie, 255 255 255); --fc-sup2: var(--superficie-2, 241 245 249);
    --fc-borde: var(--borde, 226 232 240); --fc-tx: var(--texto, 15 23 42); --fc-tx2: var(--texto-2, 71 85 105); --fc-tx3: var(--texto-3, 100 116 139);
    --fc-fondo: var(--fondo, 248 250 252); --fc-radio: var(--radio-2xl, 16px);
    position: fixed; right: 20px; bottom: 20px; z-index: 9990; font-family: var(--fuente-texto, ui-sans-serif, system-ui, sans-serif);
    font-size: 14px; line-height: 1.5; color: rgb(var(--fc-tx)); }
.fc-raiz *, .fc-raiz *::before, .fc-raiz *::after { box-sizing: border-box; }
@media (max-width: 520px) { .fc-raiz { right: 14px; bottom: 14px; } }

/* Botón flotante */
.fc-lanzador { position: relative; width: 60px; height: 60px; border-radius: 999px; border: 0; cursor: pointer; color: #fff;
    background: rgb(var(--fc-ac)); box-shadow: 0 10px 30px -6px rgb(var(--fc-ac) / .55), 0 2px 6px rgb(0 0 0 / .15);
    display: grid; place-items: center; font-size: 24px; transition: transform .2s cubic-bezier(.2,.8,.2,1.2), box-shadow .2s; }
.fc-lanzador:hover { transform: translateY(-2px) scale(1.04); }
.fc-lanzador:focus-visible { outline: 3px solid rgb(var(--fc-ac) / .4); outline-offset: 3px; }
.fc-lanzador .fc-ico-cerrar { display: none; }
.fc-abierto .fc-lanzador .fc-ico-abrir { display: none; }
.fc-abierto .fc-lanzador .fc-ico-cerrar { display: inline; }
.fc-insignia { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e11d48;
    color: #fff; font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; border: 2px solid rgb(var(--fc-sup)); }
.fc-insignia.fc-ver { display: inline-flex; animation: fc-rebote .5s ease; }
.fc-punto-linea { position: absolute; bottom: 3px; right: 3px; width: 13px; height: 13px; border-radius: 999px; background: #22c55e; border: 2px solid #fff; display: none; }
.fc-en-linea .fc-punto-linea { display: block; }
.fc-burbuja-invitacion { position: absolute; right: 0; bottom: 74px; width: max-content; max-width: 260px; padding: 12px 34px 12px 14px;
    background: rgb(var(--fc-sup)); color: rgb(var(--fc-tx)); border: 1px solid rgb(var(--fc-borde)); border-radius: 14px 14px 4px 14px;
    box-shadow: 0 12px 32px -10px rgb(0 0 0 / .25); font-size: 13.5px; cursor: pointer; animation: fc-entra .35s ease both; }
.fc-burbuja-invitacion button { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: rgb(var(--fc-tx3)); cursor: pointer; font-size: 12px; padding: 4px; }

/* Panel */
.fc-panel { position: absolute; right: 0; bottom: 76px; width: 384px; max-width: calc(100vw - 28px); height: min(620px, calc(100vh - 110px));
    background: rgb(var(--fc-sup)); border: 1px solid rgb(var(--fc-borde)); border-radius: var(--fc-radio); overflow: hidden;
    box-shadow: 0 30px 70px -20px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .02); display: flex; flex-direction: column;
    transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; visibility: hidden;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
.fc-abierto .fc-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 520px) {
    .fc-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; bottom: 0; }
    .fc-abierto .fc-lanzador { display: none; }
}
.fc-cabecera { position: relative; padding: 18px 18px 16px; color: #fff; overflow: hidden;
    background: linear-gradient(135deg, rgb(var(--ac-700, var(--fc-ac))) 0%, rgb(var(--fc-ac)) 55%, rgb(var(--ac-400, var(--fc-ac))) 130%); }
.fc-cabecera::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -120px; border-radius: 999px; background: rgb(255 255 255 / .12); }
.fc-cab-fila { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.fc-avatares { display: flex; }
.fc-avatar { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .2); border: 2px solid rgb(255 255 255 / .55);
    font-weight: 700; font-size: 14px; flex-shrink: 0; }
.fc-avatares .fc-avatar + .fc-avatar { margin-left: -10px; }
.fc-cab-titulo { font-family: var(--fuente-titulos, inherit); font-weight: 700; font-size: 16px; line-height: 1.2; }
.fc-cab-estado { font-size: 12.5px; opacity: .92; display: flex; align-items: center; gap: 6px; }
.fc-cab-estado::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #fbbf24; }
.fc-en-linea .fc-cab-estado::before { background: #4ade80; box-shadow: 0 0 0 3px rgb(74 222 128 / .3); }
.fc-cab-acciones { margin-left: auto; display: flex; gap: 2px; }
.fc-cab-btn { width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: #fff; cursor: pointer; opacity: .85; font-size: 15px; }
.fc-cab-btn:hover { background: rgb(255 255 255 / .16); opacity: 1; }
.fc-horario { position: relative; z-index: 1; margin-top: 10px; font-size: 12px; opacity: .85; }

.fc-cuerpo { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: rgb(var(--fc-fondo)); scroll-behavior: smooth; overscroll-behavior: contain; }
.fc-cuerpo::-webkit-scrollbar { width: 6px; } .fc-cuerpo::-webkit-scrollbar-thumb { background: rgb(var(--fc-borde)); border-radius: 9px; }

/* Mensajes */
.fc-msj { display: flex; gap: 8px; margin: 0 0 10px; align-items: flex-end; animation: fc-entra .25s ease both; }
.fc-msj-yo { flex-direction: row-reverse; }
.fc-msj .fc-avatar { width: 28px; height: 28px; font-size: 11px; border: 0; background: rgb(var(--fc-ac) / .14); color: rgb(var(--acento-tinta, var(--fc-ac))); }
.fc-msj-bot .fc-avatar { background: rgb(var(--fc-sup2)); color: rgb(var(--fc-tx2)); }
.fc-globo { max-width: 78%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
    background: rgb(var(--fc-sup)); border: 1px solid rgb(var(--fc-borde)); border-bottom-left-radius: 5px; }
.fc-msj-yo .fc-globo { background: rgb(var(--fc-ac)); color: #fff; border-color: transparent; border-radius: 16px; border-bottom-right-radius: 5px; }
.fc-globo a { color: inherit; text-decoration: underline; }
.fc-meta { font-size: 11px; color: rgb(var(--fc-tx3)); margin-top: 3px; padding: 0 4px; }
.fc-msj-yo .fc-meta { text-align: right; }
.fc-msj-col { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.fc-msj-yo .fc-msj-col { align-items: flex-end; }
.fc-msj-col .fc-globo { max-width: 100%; }
.fc-sistema { text-align: center; font-size: 12px; color: rgb(var(--fc-tx3)); margin: 6px 12px 12px; padding: 7px 12px; border-radius: 10px; background: rgb(var(--fc-sup2) / .7); }
.fc-separador-dia { text-align: center; font-size: 11px; color: rgb(var(--fc-tx3)); margin: 6px 0 12px; text-transform: uppercase; letter-spacing: .06em; }
.fc-escribiendo { display: none; align-items: center; gap: 8px; padding: 0 14px 8px; font-size: 12px; color: rgb(var(--fc-tx3)); background: rgb(var(--fc-fondo)); }
.fc-escribiendo.fc-ver { display: flex; }
.fc-puntos { display: inline-flex; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgb(var(--fc-sup)); border: 1px solid rgb(var(--fc-borde)); }
.fc-puntos i { width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--fc-tx3)); animation: fc-punto 1.2s infinite ease-in-out; }
.fc-puntos i:nth-child(2) { animation-delay: .15s; } .fc-puntos i:nth-child(3) { animation-delay: .3s; }

/* Formulario inicial */
.fc-form { display: grid; gap: 10px; margin-top: 4px; padding: 14px; border-radius: 14px; background: rgb(var(--fc-sup)); border: 1px solid rgb(var(--fc-borde)); animation: fc-entra .3s ease both; }
.fc-form label { font-size: 12px; font-weight: 600; color: rgb(var(--fc-tx2)); display: grid; gap: 4px; }
.fc-campo { width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgb(var(--fc-borde));
    background: rgb(var(--fc-fondo)); color: rgb(var(--fc-tx)); transition: border-color .15s, box-shadow .15s; }
.fc-campo:focus { outline: none; border-color: rgb(var(--fc-ac)); box-shadow: 0 0 0 3px rgb(var(--fc-ac) / .16); }
textarea.fc-campo { resize: none; min-height: 76px; }
.fc-temas { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-tema { font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgb(var(--fc-borde)); background: rgb(var(--fc-fondo));
    color: rgb(var(--fc-tx2)); cursor: pointer; transition: all .15s; }
.fc-tema:hover { border-color: rgb(var(--fc-ac) / .6); }
.fc-tema[aria-pressed="true"] { background: rgb(var(--fc-ac)); border-color: rgb(var(--fc-ac)); color: #fff; }
.fc-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fc-boton { font: inherit; font-weight: 700; font-size: 14px; padding: 11px 14px; border-radius: 10px; border: 0; cursor: pointer; background: rgb(var(--fc-ac)); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, transform .1s; }
.fc-boton:hover { filter: brightness(1.08); } .fc-boton:active { transform: translateY(1px); }
.fc-boton[disabled] { opacity: .6; cursor: progress; }
.fc-boton-sec { background: rgb(var(--fc-sup2)); color: rgb(var(--fc-tx)); }
.fc-error { font-size: 12.5px; color: #e11d48; display: none; }
.fc-error.fc-ver { display: block; }
.fc-legal { font-size: 11px; color: rgb(var(--fc-tx3)); text-align: center; }
.fc-legal a { color: inherit; }

/* Redactor */
.fc-pie { border-top: 1px solid rgb(var(--fc-borde)); background: rgb(var(--fc-sup)); padding: 10px 12px 8px; display: none; }
.fc-con-conversacion .fc-pie { display: block; }
.fc-redactor { display: flex; align-items: flex-end; gap: 8px; border: 1px solid rgb(var(--fc-borde)); border-radius: 14px; padding: 6px 6px 6px 12px; background: rgb(var(--fc-fondo));
    transition: border-color .15s, box-shadow .15s; }
.fc-redactor:focus-within { border-color: rgb(var(--fc-ac)); box-shadow: 0 0 0 3px rgb(var(--fc-ac) / .14); }
.fc-redactor textarea { flex: 1; border: 0; background: transparent; resize: none; font: inherit; font-size: 14px; color: rgb(var(--fc-tx)); max-height: 120px; padding: 6px 0; outline: none; }
.fc-enviar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 0; background: rgb(var(--fc-ac)); color: #fff; cursor: pointer; display: grid; place-items: center; }
.fc-enviar[disabled] { opacity: .45; cursor: default; }
.fc-pie-fila { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; color: rgb(var(--fc-tx3)); }
.fc-enlace { border: 0; background: transparent; font: inherit; font-size: 11px; color: rgb(var(--fc-tx3)); cursor: pointer; text-decoration: underline; padding: 0; }
.fc-enlace:hover { color: rgb(var(--fc-tx)); }

/* Calificación */
.fc-calificar { text-align: center; padding: 14px; border-radius: 14px; background: rgb(var(--fc-sup)); border: 1px solid rgb(var(--fc-borde)); margin: 6px 0 12px; animation: fc-entra .3s ease both; }
.fc-estrellas { display: inline-flex; gap: 4px; margin-top: 6px; }
.fc-estrella { border: 0; background: transparent; font-size: 24px; cursor: pointer; color: rgb(var(--fc-borde)); transition: transform .1s, color .1s; padding: 2px; }
.fc-estrella:hover, .fc-estrella.fc-activa { color: #f59e0b; transform: scale(1.1); }

@keyframes fc-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fc-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes fc-rebote { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fc-raiz * { animation: none !important; transition: none !important; } }