/* ConnectChatPublico.css · sección «Chat público» del admin de Business Connect.
   Prefijo ccp- para no chocar con los estilos ce-* existentes. Paleta Cobalt Elegante. */
.ccp, .ccp-overlay { --ccp-cobalt: var(--em-cobalt, #1a4fba); --ccp-cobalt-osc: #133a8a; --ccp-pale: #eef3fc; --ccp-borde: #dbe3f0; --ccp-texto: #1f2937; --ccp-gris: #6b7280;
       color: var(--ccp-texto); font-size: 13.5px; }
.ccp { padding: 4px 2px 24px; }
.ccp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ccp-head h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ccp-texto); }
.ccp-head h3 i { color: var(--ccp-cobalt); margin-right: 4px; }
.ccp-head p { margin: 3px 0 0; color: var(--ccp-gris); font-size: 13px; }
.ccp-head-acc { display: flex; gap: 8px; align-items: center; }

.ccp-aviso { background: #fff7e6; border: 1px solid #f5d38c; color: #7a4b00; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; }
.ccp-aviso a { color: var(--ccp-cobalt); font-weight: 600; cursor: pointer; text-decoration: underline; }
.ccp-error { background: #fde8e8; border: 1px solid #f5b5b5; color: #991b1b; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; }

.ccp-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--ccp-borde); margin-bottom: 14px; }
.ccp-tab { border: none; background: transparent; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ccp-gris); cursor: pointer;
           border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.ccp-tab:hover { background: var(--ccp-pale); color: var(--ccp-cobalt); }
.ccp-tab.on { color: var(--ccp-cobalt); border-bottom-color: var(--ccp-cobalt); background: var(--ccp-pale); }
.ccp-pill { background: #dc2626; color: #fff; border-radius: 999px; font-size: 10.5px; padding: 1px 7px; font-weight: 700; }

.ccp-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
           color: #fff; background: linear-gradient(135deg, var(--ccp-cobalt), var(--ccp-cobalt-osc)); cursor: pointer; white-space: nowrap; }
.ccp-btn:hover:not(:disabled) { filter: brightness(1.08); }
.ccp-btn:disabled { opacity: .5; cursor: not-allowed; }
.ccp-btn-sec { background: #fff; color: var(--ccp-cobalt); border: 1px solid var(--ccp-borde); }
.ccp-btn.rojo { background: #dc2626; }
.ccp-mini { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--ccp-borde);
            background: var(--ccp-pale); color: var(--ccp-cobalt); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ccp-mini.gris { background: #f3f4f6; color: #374151; }
.ccp-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: none;
           background: var(--ccp-cobalt); color: #fff; cursor: pointer; text-decoration: none; }
.ccp-ico + .ccp-ico { margin-left: 4px; }
.ccp-ico.rojo { background: #dc2626; }
.ccp-link { border: none; background: none; color: var(--ccp-cobalt); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 0; }

.ccp-sel, .ccp-in { height: 32px; border: 1px solid var(--ccp-borde); border-radius: 6px; padding: 0 10px; font-size: 13px; background: #fff; color: var(--ccp-texto); }
.ccp-in { width: 100%; }
.ccp-sel:focus, .ccp-in:focus, .ccp-area:focus { outline: none; border-color: var(--ccp-cobalt); box-shadow: 0 0 0 3px rgba(26, 79, 186, .12); }
.ccp-area { width: 100%; border: 1px solid var(--ccp-borde); border-radius: 6px; padding: 8px 10px; font-size: 13px; resize: vertical; margin: 6px 0; font-family: inherit; }
.ccp-lbl { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin: 10px 0 2px; }
.ccp-filtros { display: flex; gap: 8px; margin-bottom: 10px; }
.ccp-fila-der { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.ccp-sub { color: var(--ccp-gris); font-size: 12px; margin: 2px 0 8px; }
.ccp-vacio { color: var(--ccp-gris); font-style: italic; padding: 14px 4px; }
.ccp-ok { color: #15803d; font-weight: 600; font-size: 12.5px; }
.ccp-err-txt { color: #dc2626; font-size: 12.5px; margin: 6px 0 0; }

.ccp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ccp-kpi { background: #fff; border: 1px solid var(--ccp-borde); border-left: 4px solid var(--ccp-cobalt); border-radius: 8px; padding: 12px 14px;
           display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.ccp-kpi i { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; background: var(--ccp-pale); color: var(--ccp-cobalt);
             display: flex; align-items: center; justify-content: center; }
.ccp-kpi b { font-size: 17px; line-height: 1.2; }
.ccp-kpi span { font-size: 11.5px; color: var(--ccp-gris); }
.ccp-kpi.alerta { border-left-color: #dc2626; }
.ccp-kpi.alerta i { background: #fde8e8; color: #dc2626; }

.ccp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ccp-card { background: #fff; border: 1px solid var(--ccp-borde); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.ccp-card h4 { margin: 0; font-size: 14px; font-weight: 700; }
.ccp-card h4 i { color: var(--ccp-cobalt); margin-right: 4px; }
.ccp-barra { display: grid; grid-template-columns: 170px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: 12.5px; }
.ccp-barra div { background: var(--ccp-pale); border-radius: 4px; height: 10px; overflow: hidden; }
.ccp-barra div i { display: block; height: 100%; background: var(--ccp-cobalt); border-radius: 4px; }
.ccp-barra b { text-align: right; }

.ccp-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ccp-borde); border-radius: 8px; overflow: hidden; }
.ccp-tabla th { background: var(--ccp-pale); color: var(--ccp-cobalt-osc); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
                text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ccp-borde); }
.ccp-tabla td { padding: 8px 10px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.ccp-tabla tr:last-child td { border-bottom: none; }
.ccp-tabla tbody tr:hover { background: #f8faff; }
.ccp-tabla .num { text-align: right; white-space: nowrap; }
.ccp-tabla .acc { text-align: right; white-space: nowrap; width: 1%; }
.ccp-tabla .nw { white-space: nowrap; }
.ccp-tabla .txt { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ccp-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eef1f6; color: #374151; white-space: nowrap; }
.ccp-badge.e-ACT, .ccp-badge.c-VIG, .ccp-badge.s-RES { background: #e0ecff; color: #1d4ed8; }
.ccp-badge.e-BLO, .ccp-badge.c-ANU, .ccp-badge.t-ANTISPAM, .ccp-badge.t-BLOQUEO, .ccp-badge.t-ERROR { background: #fde8e8; color: #991b1b; }
.ccp-badge.e-MAR, .ccp-badge.s-PEN, .ccp-badge.t-NO_ENCONTRADO { background: #fef3c7; color: #92400e; }
.ccp-badge.c-CON, .ccp-badge.s-CON, .ccp-badge.t-PDF, .ccp-badge.t-CONVERSION { background: #dcfce7; color: #166534; }
.ccp-badge.c-VEN, .ccp-badge.s-CER { background: #f3f4f6; color: #6b7280; }

.ccp-sol { background: #fff; border: 1px solid var(--ccp-borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.ccp-sol.pen { border-left: 4px solid #f59e0b; }
.ccp-sol-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ccp-sol-acc { display: flex; gap: 6px; align-items: flex-start; }
.ccp-tipo { color: var(--ccp-gris); font-size: 12px; margin-left: 6px; }
.ccp-sol-datos { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; font-size: 12.5px; }
.ccp-sol-datos a { color: var(--ccp-cobalt); text-decoration: none; }
.ccp-sol-datos i { color: var(--ccp-gris); margin-right: 3px; }
.ccp-msg { background: #f8fafc; border-radius: 6px; padding: 8px 10px; margin: 6px 0; font-style: italic; }
.ccp-resp { background: var(--ccp-pale); border-left: 3px solid var(--ccp-cobalt); border-radius: 6px; padding: 8px 10px; margin: 6px 0; }
.ccp-resp small { color: var(--ccp-gris); }

.ccp-sin-form { display: grid; grid-template-columns: 1fr auto 1.4fr auto; gap: 8px; align-items: start; margin-top: 8px; }
.ccp-flecha { color: var(--ccp-gris); padding-top: 7px; }
.ccp-buscador { position: relative; }
.ccp-sugerencias { position: absolute; z-index: 20; left: 0; right: 0; top: 34px; background: #fff; border: 1px solid var(--ccp-borde); border-radius: 6px;
                   box-shadow: 0 8px 24px rgba(17, 24, 39, .12); max-height: 260px; overflow: auto; }
.ccp-sugerencias button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 10px; cursor: pointer; font-size: 13px; }
.ccp-sugerencias button:hover { background: var(--ccp-pale); }
.ccp-sugerencias small { color: var(--ccp-gris); margin-right: 6px; }
.ccp-elegido { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--ccp-pale); color: var(--ccp-cobalt); font-weight: 600; }
.ccp-elegido button { margin-left: auto; border: none; background: none; color: var(--ccp-gris); cursor: pointer; }

.ccp-link-box { display: flex; align-items: center; gap: 6px; margin: 10px 0; }
.ccp-link-box code { flex: 1; background: var(--ccp-pale); border-radius: 6px; padding: 7px 10px; font-size: 12.5px; color: var(--ccp-cobalt-osc); word-break: break-all; }
.ccp-qr { display: block; width: 180px; height: 180px; margin: 6px 0 10px; border: 1px solid var(--ccp-borde); border-radius: 8px; padding: 6px; background: #fff; }
.ccp-switch { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; font-weight: 600; }
.ccp-switch input { width: 16px; height: 16px; accent-color: var(--ccp-cobalt); }
.ccp-switch.peq { font-size: 12px; font-weight: 500; margin: 0; }
.ccp-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.ccp-nums label { font-size: 12px; color: #374151; font-weight: 600; display: flex; flex-direction: column; gap: 3px; }
.ccp-nums input { height: 30px; border: 1px solid var(--ccp-borde); border-radius: 6px; padding: 0 8px; font-size: 13px; }

.ccp-pag { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--ccp-gris); }
.ccp-pag button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--ccp-borde); background: #fff; color: var(--ccp-cobalt); cursor: pointer; }
.ccp-pag button:disabled { opacity: .4; cursor: default; }

/* ---- modal Cobalt Elegante ---- */
.ccp-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ccp-modal { background: #fff; width: 100%; max-width: 760px; max-height: 90vh; border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
             display: flex; flex-direction: column; overflow: hidden; }
.ccp-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; font-weight: 700;
                  background: linear-gradient(135deg, var(--ccp-cobalt, #1a4fba), #133a8a); }
.ccp-modal-head button { border: none; background: rgba(255, 255, 255, .15); color: #fff; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.ccp-modal-info { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-bottom: 1px solid #eef1f6; font-size: 12.5px; color: #374151; }
.ccp-modal-info .ccp-switch { margin-left: auto; }
.ccp-modal-body { padding: 14px 16px; overflow-y: auto; background: #f6f8fc; flex: 1; }
.ccp-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #eef1f6; flex-wrap: wrap; }
.ccp-modal-foot .ccp-in { width: 220px; }

.ccp-burbuja { max-width: 82%; margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #e5eaf3; }
.ccp-burbuja small { display: block; color: var(--ccp-gris, #6b7280); font-size: 11px; margin-bottom: 2px; }
.ccp-burbuja div { white-space: pre-wrap; }
.ccp-burbuja.r-C { margin-left: auto; background: #1a4fba; color: #fff; border-color: #1a4fba; border-bottom-right-radius: 4px; }
.ccp-burbuja.r-C small { color: rgba(255, 255, 255, .75); }
.ccp-burbuja.r-A { border-bottom-left-radius: 4px; }
.ccp-burbuja.r-V { background: #ecfdf5; border-color: #a7f3d0; border-bottom-left-radius: 4px; }
.ccp-herr { margin-top: 6px; border-top: 1px dashed #dbe3f0; padding-top: 6px; }
.ccp-herr summary { cursor: pointer; font-size: 12px; color: #1a4fba; font-weight: 600; }
.ccp-herr summary.mal { color: #dc2626; }
.ccp-herr pre { background: #0f172a; color: #e2e8f0; border-radius: 6px; padding: 6px 8px; font-size: 11px; white-space: pre-wrap; word-break: break-all; margin: 4px 0; max-height: 160px; overflow: auto; }
.ccp-eventos { margin-top: 8px; font-size: 12px; color: #374151; }
.ccp-eventos summary { cursor: pointer; font-weight: 600; color: #1a4fba; }
.ccp-eventos div { padding: 2px 0; }

@media (max-width: 720px) {
    .ccp-sin-form { grid-template-columns: 1fr; }
    .ccp-flecha { display: none; }
    .ccp-barra { grid-template-columns: 120px 1fr 32px; }
    .ccp-tabla .txt { max-width: 160px; }
}