/* ============================================================================
   CHAT EN COMPUTADORA · FICHA A LA DERECHA (js/crm/chat-ficha.js)
   Todo va dentro de html.cf-on (solo computadora con el chat abierto).
   ============================================================================ */
#cf-ficha, #cf-paso { display: none; }

/* ── Chat + ficha ── */
html.cf-on #chat-drawer .chat-drawer-card,
html.cf-on #chat-drawer.chat-drawer-side-left .chat-drawer-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(1240px, 95vw) !important;
    max-width: none !important;
    height: 90vh !important;
    max-height: 920px !important;
    overflow: hidden !important;
}
html.cf-on #chat-drawer.chat-drawer-side-left {
    padding: 0 !important;
    justify-content: center !important;
}
html.cf-on #chat-drawer .chat-drawer-card > * { grid-column: 1; min-width: 0; }
html.cf-on #chat-drawer .chat-drawer-card > .chat-drawer-header { grid-column: 1 / -1; grid-row: 1; padding-right: 230px !important; }
html.cf-on #chat-drawer .chat-drawer-card > #chat-protocol-banner { grid-column: 1 / -1; grid-row: 2; padding-right: 180px !important; min-height: 38px; }
html.cf-on #chat-drawer .chat-drawer-card > #chat-drawer-body-wrapper { grid-row: 3; min-height: 0; }
html.cf-on #chat-drawer .chat-drawer-card > .chat-drawer-footer { grid-row: 4; }
html.cf-on #chat-drawer .chat-drawer-card > #chat-linea-switch { top: 22px !important; }
html.cf-on #chat-drawer .chat-floating-actions-bar { display: none !important; }

/* Siguiente paso: botón a la derecha del protocolo */
html.cf-on #chat-drawer .chat-drawer-card > #cf-paso { display: flex; grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: center; margin-right: 14px; z-index: 2; }
#cf-paso button { display: inline-flex; align-items: center; gap: 6px; border: none; background: #d81b60; color: #fff; border-radius: 8px;
    padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
#cf-paso button:hover { background: #be185d; }
#cf-paso svg { width: 14px; height: 14px; }

/* ── Ficha ── */
html.cf-on #chat-drawer .chat-drawer-card > #cf-ficha {
    display: flex; flex-direction: column; grid-column: 2; grid-row: 3 / 5; min-height: 0;
    background: #f8fafc; border-left: 1px solid #e2e8f0; color: #0f172a; font-size: 13px;
}
#cf-ficha .cf-cuerpo { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
#cf-ficha .cf-sec { background: #fff; border: 1px solid #e8ebf0; border-radius: 12px; padding: 11px 12px; }
#cf-ficha h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #64748b; }
#cf-ficha .cf-vacio { color: #94a3b8; font-size: 12.5px; }
#cf-ficha .cf-link { border: none; background: none; color: #d81b60; font-weight: 700; font-size: 12px; padding: 6px 0 0; cursor: pointer; font-family: inherit; }
#cf-ficha .cf-link:hover { text-decoration: underline; }

/* Acciones */
#cf-ficha .cf-acc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#cf-ficha .cf-acc button { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: #334155; cursor: pointer; padding: 4px 0; border-radius: 10px; font-family: inherit; }
#cf-ficha .cf-acc button:hover { background: #f1f5f9; }
#cf-ficha .cf-acc .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
#cf-ficha .cf-acc svg { width: 20px; height: 20px; }

/* IA en este chat */
#cf-ficha .cf-ia { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #334155; }
#cf-ficha .cf-ia span { flex: 1; }
#cf-ficha .cf-ia-off { font-size: 12px; color: #94a3b8; }
#cf-ficha .cf-switch { flex: none; width: 42px; height: 24px; border-radius: 999px; border: none; background: #cbd5e1; position: relative; cursor: pointer; transition: background .2s; }
#cf-ficha .cf-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
#cf-ficha .cf-switch[aria-checked="true"] { background: #16a34a; }
#cf-ficha .cf-switch[aria-checked="true"] i { left: 21px; }
#cf-ficha .cf-switch:disabled { opacity: .5; cursor: wait; }

/* Cotizaciones */
#cf-ficha .cf-cot { width: 100%; display: flex; align-items: center; gap: 8px; border: none; border-left: 3px solid var(--c); background: #fafbfc;
    border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
#cf-ficha .cf-cot:hover { background: #f1f5f9; }
#cf-ficha .cf-cot-n { flex: 1; min-width: 0; font-weight: 800; color: var(--c); font-size: 12.5px; }
#cf-ficha .cf-cot-n small { display: block; font-weight: 600; color: #94a3b8; font-size: 11px; }
#cf-ficha .cf-cot b { font-size: 12.5px; white-space: nowrap; }

/* Cita */
#cf-ficha .cf-cita { border-left: 3px solid var(--c); padding: 2px 0 2px 9px; }
#cf-ficha .cf-cita b { display: block; font-size: 13px; text-transform: capitalize; }
#cf-ficha .cf-cita span { display: block; color: #64748b; font-size: 12px; margin-top: 1px; }
#cf-ficha .cf-mapa { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 12px; font-weight: 700; color: #1d4ed8; text-decoration: none; }
#cf-ficha .cf-mapa svg { width: 13px; height: 13px; }

/* Datos */
#cf-ficha .cf-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; }
#cf-ficha .cf-datos dt { color: #64748b; }
#cf-ficha .cf-datos dd { margin: 0; font-weight: 600; text-align: right; }

/* Barra "‹ Ficha" y hueco donde se acomoda la ventana */
#cf-ficha .cf-volver { display: none; align-items: center; gap: 6px; border: none; border-bottom: 1px solid #e2e8f0; background: #fff;
    padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: #d81b60; cursor: pointer; text-align: left; font-family: inherit; }
#cf-ficha .cf-volver svg { width: 15px; height: 15px; }
#cf-ficha .cf-volver b { margin-left: 6px; color: #64748b; font-weight: 600; }
#cf-ficha .cf-volver:hover span { text-decoration: underline; }
#cf-ficha .cf-hueco { display: none; flex: 1; min-height: 0; }

/* ── Con una ventana abierta: la ficha se agranda y la ventana ocupa su lugar ── */
html.cf-on.cf-exp #chat-drawer .chat-drawer-card,
html.cf-on.cf-exp #chat-drawer.chat-drawer-side-left .chat-drawer-card {
    grid-template-columns: minmax(0, 1fr) min(var(--cf-panel, 540px), 58vw);
}
html.cf-on.cf-exp #cf-ficha .cf-cuerpo { display: none; }
html.cf-on.cf-exp #cf-ficha .cf-volver { display: flex; }
html.cf-on.cf-exp #cf-ficha .cf-hueco { display: block; }

html.cf-on.cf-exp .modal-overlay.modal-side-right {
    inset: auto !important;
    top: var(--cf-y) !important; left: var(--cf-x) !important;
    width: var(--cf-w) !important; height: var(--cf-h) !important;
    padding: 0 !important; background: transparent !important;
    align-items: stretch !important; justify-content: stretch !important;
}
html.cf-on.cf-exp .modal-overlay.modal-side-right .modal-card,
html.cf-on.cf-exp .modal-overlay.modal-side-right .modal-content,
html.cf-on.cf-exp #modal-quote.modal-side-right .modal-card {
    width: 100% !important; max-width: none !important;
    height: 100% !important; max-height: none !important;
    border-radius: 0 0 16px 0 !important; box-shadow: none !important; border: none !important;
}
html.cf-on.cf-exp #ag-modal.abierto:not(.ag-centro) {
    inset: auto !important;
    top: var(--cf-y) !important; left: var(--cf-x) !important;
    width: var(--cf-w) !important; height: var(--cf-h) !important;
    padding: 0 !important; align-items: stretch !important;
}
html.cf-on.cf-exp #ag-modal.abierto:not(.ag-centro) .ag-card {
    max-width: none !important; height: 100% !important; max-height: none !important;
    border-radius: 0 0 16px 0 !important; box-shadow: none !important;
}

/* ── Sugerencia de la IA: arriba de la caja de texto, sin tapar el chat ── */
html.cf-on #ia-cc-panel {
    inset: auto !important;
    left: var(--cc-x) !important; width: var(--cc-w) !important;
    bottom: var(--cc-b) !important; top: auto !important;
    max-height: calc(100vh - var(--cc-t) - var(--cc-b)) !important;
    background: transparent !important; padding: 0 12px 8px !important;
    align-items: flex-end !important; pointer-events: none;
}
html.cf-on #ia-cc-panel > div {
    pointer-events: auto; max-width: none !important; max-height: 100% !important;
    border: 1.5px solid #f9a8d4; box-shadow: 0 -4px 20px rgba(216, 27, 96, .14) !important;
}

/* Sin animaciones de tamaño al acomodar (evita el brinco) */
html.cf-on #chat-drawer .chat-drawer-card,
html.cf-on #chat-drawer.chat-drawer-side-left .chat-drawer-card,
html.cf-on.cf-exp .modal-overlay.modal-side-right .modal-card,
html.cf-on.cf-exp .modal-overlay.modal-side-right .modal-content,
html.cf-on.cf-exp #modal-quote.modal-side-right .modal-card,
html.cf-on.cf-exp #ag-modal .ag-card { transition: none !important; }
html.cf-on.cf-exp .modal-overlay.modal-side-right .modal-card,
html.cf-on.cf-exp .modal-overlay.modal-side-right .modal-content,
html.cf-on.cf-exp #ag-modal .ag-card { animation: none !important; transform: none !important; }

/* Pagos */
#cf-ficha h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#cf-ficha .cf-h4-link { border: none; background: none; color: #d81b60; font-weight: 700; font-size: 11.5px; cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0; font-family: inherit; }
#cf-ficha .cf-h4-nota { color: #94a3b8; font-weight: 600; font-size: 11px; text-transform: none; letter-spacing: 0; }
#cf-ficha .cf-contrato + .cf-contrato { border-top: 1px dashed #e2e8f0; margin-top: 8px; padding-top: 8px; }
#cf-ficha .cf-fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 2px 0; }
#cf-ficha .cf-fila span { color: #64748b; }
#cf-ficha .cf-barra { height: 7px; border-radius: 5px; background: #f1f5f9; overflow: hidden; margin: 6px 0 4px; }
#cf-ficha .cf-barra i { display: block; height: 100%; background: #16a34a; border-radius: 5px; }
#cf-ficha .cf-verde { color: #16a34a; } #cf-ficha .cf-rojo { color: #dc2626; }
#cf-ficha .cf-pago { display: flex; align-items: center; gap: 8px; padding: 6px 0 0; margin-top: 4px; border-top: 1px solid #f1f5f9; font-size: 12px; }
#cf-ficha .cf-pago div { flex: 1; min-width: 0; }
#cf-ficha .cf-pago small { display: block; color: #94a3b8; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cf-ficha .cf-folio { font-family: ui-monospace, monospace; color: #cc0000; font-weight: 700; font-size: 11px; }

/* Notas internas */
#cf-ficha .cf-nota { background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: 7px 9px; font-size: 12px; margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
#cf-ficha .cf-nota small { display: block; color: #92400e; font-weight: 700; font-size: 10.5px; margin-bottom: 2px; white-space: normal; }
#cf-ficha .cf-nota-caja { display: flex; gap: 6px; margin-top: 6px; align-items: flex-end; }
#cf-ficha .cf-nota-caja textarea { flex: 1; border: 1px solid #dfe3ea; border-radius: 9px; padding: 7px 9px; font-size: 12px; font-family: inherit; resize: vertical; min-height: 34px; max-height: 140px; }
#cf-ficha .cf-nota-caja textarea:focus { outline: none; border-color: #d81b60; box-shadow: 0 0 0 3px rgba(216,27,96,.12); }
#cf-ficha .cf-nota-caja button { border: none; background: #d81b60; color: #fff; border-radius: 9px; padding: 8px 12px; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
#cf-ficha .cf-nota-caja button:disabled { opacity: .5; }

/* "No requiere respuesta" */
#cf-ficha .cf-espera { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: #fff7ed; border-color: #fed7aa; font-size: 12.5px; color: #9a3412; font-weight: 600; }
#cf-ficha .cf-espera.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
#cf-ficha .cf-espera .cf-link { padding: 0; }
#cf-ficha .cf-sr { border: 1px solid #fdba74; background: #fff; color: #c2410c; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
#cf-ficha .cf-sr:hover { background: #ffedd5; }
#cf-ficha .cf-datos dd.cf-anuncio { text-align: left; grid-column: 1 / -1; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 7px 9px; font-weight: 500; }
#cf-ficha .cf-datos dd.cf-anuncio b { display: block; color: #1d4ed8; font-size: 12.5px; }
#cf-ficha .cf-datos dd.cf-anuncio span { display: block; color: #334155; font-size: 12px; margin-top: 2px; }
#cf-ficha .cf-datos dd.cf-anuncio small { display: block; color: #64748b; font-size: 11px; margin-top: 3px; }
#cf-ficha .cf-datos dd.cf-anuncio a { color: #1d4ed8; }