:root {
    --bg: #f4f6fb; --card: #fff; --text: #0f1a3d; --muted: #64748b; --line: #e2e8f0;
    --brand: #0055f8; --brand-strong: #0046d1; --navy: #0a2459; --brand-soft: #e8efff;
    --brand-ink: #fff; --danger: #dc2626; --ok: #16a34a;
    --mail: #7c3aed; --orange-direnet: #f87200; --orange: #ff6a07; --orange-strong: #e55d00; --orange-soft: #fff1e6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h1 small { color: var(--muted); font-weight: 400; font-size: 15px; }
h2 { font-size: 16px; margin: 0 0 12px; }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 8px 10px; border: 1px solid #dbe3f1; border-radius: 10px; background: #fff; color: var(--text); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, white); border-color: var(--brand); }
input[type=color] { width: 46px; height: 36px; padding: 3px; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 7px; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-strong); width: 16px; height: 16px; }
textarea { width: 100%; }
/* Texto de ayuda dentro de los campos: claro, para que no parezca un dato ya escrito. */
::placeholder { color: #b8c0cc; opacity: 1; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.danger { color: var(--danger) !important; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 24px; background: #fff; color: var(--text); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar a { color: #475569; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 44px; width: auto; display: block; }
.client-box { display: flex; flex-direction: column; padding-left: 18px; border-left: 1px solid var(--line); line-height: 1.3; }
.client-box strong, .client-box label { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.client-box span { color: var(--muted); font-size: 13px; }
.client-box select { field-sizing: content; border: 0; padding: 0 4px; font-weight: 800; font-size: 16px; color: #f26a1b; background: transparent; cursor: pointer; }
.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.topbar nav a { padding: 8px 12px; border-radius: 999px; font-weight: 600; color: #475569; }
.topbar nav a:hover { background: var(--brand-soft); color: var(--navy); text-decoration: none; }
.topbar nav a.active { color: var(--brand); background: var(--brand-soft); }
.topbar-right { display: flex; gap: 16px; align-items: center; color: var(--muted); }
.user-name strong { color: var(--text); }
.btn-logout { background: #3c9a2e; color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.btn-logout:hover { background: #33852a; }
button.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }

/* Las pantallas usan todo el ancho (como HubSpot); lo que no debe estirarse trae su propio ancho máximo (.narrow, cajas de formas). */
.container { padding: 20px 24px 60px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; margin-bottom: 18px; box-shadow: 0 10px 30px -18px rgba(15, 26, 61, .18); }
.empty { text-align: center; color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 12px; border: 1px solid #dbe3f1; background: #fff; color: var(--text); cursor: pointer; font-weight: 600; white-space: nowrap; transition: background .15s, transform .05s; }
.btn:hover { text-decoration: none; background: #f6f8fc; border-color: #c9d4e6; }
.btn-soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.table .btn-sm { background: #ecfdf3; border-color: #bbf7d0; color: #15803d; }
.table .btn-sm:hover { background: #dcfce7; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-ink); box-shadow: 0 6px 14px -8px rgba(63, 69, 234, .7); }
.btn-primary:hover { background: #3237d6; border-color: #3237d6; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: #eef2f6; color: var(--text); }
.btn-danger-soft { background: #fef2f2; color: #b91c1c; }
.btn-danger-soft:hover { background: #fee2e2; }
.btn-sm { padding: 4px 10px; font-size: 13px; }

.flash { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; font-weight: 600; }
.flash::before { content: "✓ "; }
.flash-error { position: relative; padding-left: 46px; background: #fef2f2; color: #991b1b; border-color: #fecaca; }
/* El «!» va dentro de un círculo rojo, alineado con la primera línea aunque el aviso ocupe varias. */
.flash-error::before { content: "!"; position: absolute; left: 16px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; }

.status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.status-tabs a { --c: #64748b; padding: 6px 14px; border-radius: 999px; font-weight: 600; background: color-mix(in srgb, var(--c) 14%, white); border: 1px solid color-mix(in srgb, var(--c) 28%, white); color: color-mix(in srgb, var(--c) 75%, black); }
.status-tabs a:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 24%, white); }
.status-tabs a:not([style]) { background: #fff; border-color: var(--line); color: var(--text); }
.status-tabs a b { color: inherit; opacity: .7; font-weight: 700; margin-left: 4px; }
.status-tabs a.active { background: color-mix(in srgb, var(--c) 80%, black); border-color: transparent; color: #fff; }
.status-tabs a.active:not([style]) { background: var(--navy); color: #fff; }
.status-tabs a.active b { color: #fff; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filters input[type=search] { flex: 1 1 240px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }

.table-wrap { position: relative; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; margin-bottom: 16px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th.num, .table td.num { text-align: right; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f8fafc; }
.table tr:last-child td { border-bottom: 0; }
.table input:not([type=checkbox]):not([type=radio]):not([type=color]), .table select { width: 100%; min-width: 110px; }
.w-num { width: 80px !important; min-width: 0 !important; }
.status-form select { --c: #64748b; min-width: 150px; padding: 6px 12px; border-radius: 999px; font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--c) 14%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); color: color-mix(in srgb, var(--c) 75%, black); }
.status-form select option { background: #fff; color: var(--text); }

.badge { --c: #64748b; display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 14%, white); border: 1px solid color-mix(in srgb, var(--c) 35%, white); }
.pager { display: flex; gap: 16px; justify-content: center; align-items: center; }
/* Paginador de leads: "1–50 de 132", las páginas y cuántos por pantalla. */
.pager-full { flex-wrap: wrap; gap: 10px 18px; margin: 14px 0 6px; font-size: 14px; }
.pager-range { color: var(--muted); }
.pager-pages { display: inline-flex; align-items: center; gap: 4px; }
.pager-pages a, .pager-pages b, .pager-pages .off { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); font-weight: 600; }
.pager-pages a:hover { text-decoration: none; border-color: #c9d4e6; background: #f6f8fc; }
.pager-pages b { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager-pages .off { color: #cbd5e1; }
.pager-pages .gap { color: var(--muted); padding: 0 2px; }
.pager-per label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.pager-per select { width: auto; padding: 5px 28px 5px 10px; font-size: 14px; }
/* Leads sin abrir, como el correo: punto azul, nombre en negritas y la etiqueta "Sin abrir". Los ya abiertos, normales. */
.unread-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--brand); vertical-align: middle; flex: none; }
.unread-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2px; vertical-align: 2px; white-space: nowrap; }
.read-pill b { margin-left: 4px; }
/* «Volvió a escribir»: el lead que ya existía y escribió otro día (lead_mark_returned). */
.unread-pill.returned-pill { background: #ea580c; }
.date-cell .returned-at { display: block; color: #c2410c; font-size: 12px; font-weight: 600; }
/* «Requieren atención»: píldora roja en «Ver:» y el tiempo en rojo en cada lead (lead_clock.php). */
.read-pills a.attention-pill { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.read-pills a.attention-pill.active { background: #dc2626; border-color: #dc2626; color: #fff; }
.lead-card .lc-attention .lead-clock.is-attention { margin-left: 0; }
.read-pills a.attention-pill:hover { background: #fecaca; border-color: #f87171; }
.read-pills a.attention-pill.active:hover { background: #b91c1c; border-color: #b91c1c; }
.attention-pill b { margin-left: 4px; }
.attention-rule { font-weight: 500; opacity: .8; }
.leads-table .lead-clock.is-attention, .lead-card .lead-clock.is-attention { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; vertical-align: 2px; }
.leads-table tr.is-unread { background: #f5f8ff; }
.leads-table tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.leads-table tr.is-read .lead-name { font-weight: 400; color: #334155; }
.leads-table tr.is-unread .msg, .leads-table tr.is-unread .date-cell b { font-weight: 700; color: var(--text); }
.leads-table tr.is-read .date-cell b { font-weight: 400; }
.leads-table tr.is-unread .lead-name { font-weight: 800; }
.leads-table tr.is-picked, .lead-card.is-picked { background: #eaf0fe; }
.leads-table .pick-cell { width: 34px; padding-right: 0; }
input.pick, .pick-all { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
.bulk-bar { position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px 8px 14px; border-radius: 14px; background: #0f1a3d; color: #fff; box-shadow: 0 10px 24px -12px rgba(15, 26, 61, .5); }
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count { font-weight: 600; margin-right: auto; }
.bulk-bar .btn { background: #fff; color: var(--text); border-color: transparent; }
.bulk-bar .bulk-clear { background: transparent; color: #fff; font-size: 18px; }

.form { display: flex; flex-direction: column; gap: 12px; }
.form + .form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
/* Con la pantalla a todo lo ancho, un campo no pasa de lo que se lee cómodo. */
.form label > :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { max-width: min(100%, 760px); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.span-2 { grid-column: span 2; }
.inline-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.inline-form h2 { width: 100%; margin: 0; }

.detail { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv .found-kw ol { margin: 6px 0 0; padding-left: 20px; }
.kv .found-kw li { margin: 2px 0; }
.note-form { flex-direction: row; align-items: flex-start; }
.timeline { list-style: none; padding: 0; margin: 16px 0 0; }
.timeline li { border-left: 2px solid var(--line); padding: 4px 0 14px 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.timeline li.ev-note::before { background: var(--brand); }
.timeline li.ev-status::before { background: #7c3aed; }
.ev-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.code { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-size: 13px; }

.guest { display: grid; place-items: center; min-height: 100vh; background: radial-gradient(ellipse at top, #e4e9fb 0%, var(--bg) 60%); }
.guest-box { width: 100%; max-width: 460px; padding: 16px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 40px 36px 28px; box-shadow: 0 30px 60px -20px rgba(15, 26, 61, .18); }
.login-logo { display: block; width: 260px; max-width: 80%; height: auto; margin: 0 auto 18px; }
.login-lead { text-align: center; color: var(--muted); font-size: 16px; margin: 0 0 26px; }
.login-card .form { gap: 18px; }
.login-card label { font-weight: 700; color: var(--text); }
.login-card input { padding: 13px 16px; border-radius: 14px; border-color: #dbe3f1; background: #f5f8ff; font-size: 16px; }
.login-card input:focus { outline: 2px solid var(--brand); outline-offset: 0; background: #fff; }
.login-card .btn-primary { padding: 13px; border-radius: 14px; font-size: 17px; font-weight: 700; }
.login-foot { text-align: center; color: var(--muted); margin: 22px 0 0; }
.login-foot-ask { margin-top: 10px; }
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 48px; }
.password-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 46px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.password-toggle:hover { color: var(--text); }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .eye-closed, .password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-closed { display: block; }
.login-card label.inline { font-weight: 500; color: var(--text); }

@media (max-width: 760px) {
    .detail, .grid-2 { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .topbar-right { margin-left: 0; width: 100%; }
    .note-form { flex-direction: column; }
}

.checks { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.checks legend { font-size: 13px; color: #64748b; padding: 0 4px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; }

/* Reportes */
.small { font-size: 12px; }
.num { text-align: right; white-space: nowrap; }
.report-head { margin: 4px 0 16px; }
.report-head h1 { margin: 2px 0; }
.brand-report { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.brand-report img { height: 26px; width: auto; }
/* PDF: logo de Direnet arriba a la izquierda y el de AskMetrix arriba a la derecha. */
.brand-report { justify-content: space-between; margin-bottom: 18px; }
.brand-report .brand-agency { height: 30px; }
.brand-report { position: relative; }
.brand-report .brand-client { height: auto; max-height: 56px; max-width: 220px; object-fit: contain; }
/* Con logo de la empresa: ella a la izquierda, Direnet a la derecha y AskMetrix firma al final. */
.brand-report.has-client { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.brand-report .brand-made { height: 34px; position: absolute; top: -14mm; right: 0; }
/* La primera hoja tiene menos margen arriba para que el logo de AskMetrix quede pegado a la esquina;
   el encabezado compensa con relleno para que Direnet y el título no se muevan. */
@media print {
    @page :first { margin-top: 6mm; }
    .report-head { padding-top: 8mm; }
    /* Con logo de la empresa no va AskMetrix arriba: menos espacio en blanco. */
    .report-head:has(.has-client) { padding-top: 2mm; }
}
.src-logo { height: 22px; width: auto; flex: none; vertical-align: -4px; margin-right: 8px; }
.data-source { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.data-source img { height: 26px; width: auto; }
.data-source .src-name { font-size: 15px; color: var(--text); }
@media print { .data-source { break-inside: avoid; } }
.pm-title .src-logo { margin-right: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 24px; box-shadow: 0 10px 30px -20px rgba(15, 26, 61, .2); }
.kpi span { display: block; color: #475569; font-size: 14px; font-weight: 700; }
.kpi b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 16px; }
.report-block { break-inside: avoid; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 10px; align-items: center; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef2f6; border-radius: 4px; height: 12px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 4px; min-width: 2px; }
.bar-value { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.bar-value small { color: var(--muted); }
.days { display: flex; align-items: flex-end; gap: 3px; height: 150px; overflow-x: auto; }
.day { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.day-bar { width: 100%; max-width: 28px; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; }
.day-n { font-size: 11px; color: var(--muted); }
.day-label { font-size: 10px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.kv-wide { grid-template-columns: 260px 1fr; margin-bottom: 10px; }

@media (max-width: 640px) {
    .report-grid { grid-template-columns: 1fr; }
    .kv-wide { grid-template-columns: 1fr; }
}

@media print {
    body { background: #fff; }
    .topbar, .no-print, .flash { display: none !important; }
    .container { max-width: none; padding: 0; }
    .card, .kpi, .table-wrap { border-color: #d6dde5; }
    .report-grid { grid-template-columns: 1fr 1fr; }
    .bar-fill, .day-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { margin: 14mm; }
}
tr.selected td { background: var(--brand-soft); }

/* Menú: Configuración y Direnet como desplegables */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 999px; font-weight: 600; color: #475569; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: "▾"; margin-left: 5px; font-size: 11px; }
.nav-menu summary:hover, .nav-menu[open] summary { background: var(--brand-soft); color: var(--navy); }
.nav-menu summary.active { color: var(--brand); background: var(--brand-soft); }
.nav-dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 18px 40px -16px rgba(15, 26, 61, .3); display: flex; flex-direction: column; }
.topbar .nav-dropdown a { border-radius: 10px; padding: 9px 12px; }
/* Configuración es un engrane (como en HubSpot); en el celular, dentro del menú, se lee el texto. */
.nav-gear { display: inline-flex; align-items: center; }
.nav-gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-gear::after { display: none; }
.nav-gear-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .nav-gear-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-left: 8px; } .nav-gear::after { display: inline; } }
a.kpi { color: inherit; }
a.kpi:hover { text-decoration: none; border-color: #c7d6fb; }
.kpi small { font-size: 15px; font-weight: 700; }
.table-wrap.flat { border: 0; margin: 0; }
.page-head h2 { margin: 0; }

/* Encuestas: constructor */
.q-row { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #fafbff; display: flex; flex-direction: column; gap: 8px; }
.q-main { display: grid; grid-template-columns: 24px 1fr 250px auto auto; gap: 8px; align-items: center; }
.q-drag { cursor: grab; color: #94a3b8; display: flex; align-items: center; justify-content: center; user-select: none; }
.q-drag:hover { color: #334155; }
.q-row.dragging { opacity: .45; background: #eef2ff; }
.form .field .check-state { flex-direction: row; align-self: flex-start; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; }
.answers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.answers li { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.survey-sent { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.btn-wa { background: #25d366; border-color: #25d366; color: #fff; }
.ok-text { color: #15803d; font-weight: 600; }
@media (max-width: 760px) { .q-main { grid-template-columns: 24px 1fr; } .q-main > :not(.q-drag):not(:nth-child(2)) { grid-column: 2; } }

/* Encuestas: página pública */
.survey-page { place-items: start center; padding: 24px 0; }
.survey-box { width: 100%; max-width: 640px; padding: 16px; }
.survey-card h1 { font-size: 26px; margin: 4px 0 8px; }
.survey-client { color: var(--brand); font-weight: 700; margin: 0; }
.survey-form { gap: 16px; margin-top: 18px; }
.survey-q { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0; }
.survey-q legend { font-weight: 700; padding: 0 4px; }
.survey-q.has-error { border-color: #f87171; }
.req { color: #dc2626; }
.error-text { color: #b91c1c; }
.scale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.scale label, .choices label { cursor: pointer; }
.scale input { position: absolute; opacity: 0; }
.scale span { display: inline-block; min-width: 40px; text-align: center; padding: 9px 10px; border: 1px solid #dbe3f1; border-radius: 12px; background: #f5f8ff; font-weight: 700; }
.scale-rating span { color: #f59e0b; letter-spacing: -1px; }
.scale input:checked + span { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.scale input:focus-visible + span { outline: 2px solid var(--brand); }
.scale-faces { gap: 4px; justify-content: center; margin-top: 0; }
.survey-q:has(.scale-faces) { padding-top: 6px; padding-bottom: 8px; }
.scale-faces span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; padding: 6px 6px 4px; background: #fff; border-color: transparent; }
.scale-faces label:hover span { border-color: var(--line); }
.scale-faces small { font-size: 12px; font-weight: 600; color: #0b2b66; }
.scale-faces .survey-face { width: 54px; height: 54px; transition: transform .15s; }
.scale-faces label:hover .survey-face { transform: translateY(-2px); }
.scale-faces input:checked + span { background: #fff; border-color: #0b2b66; color: #0b2b66; box-shadow: inset 0 0 0 2px #0b2b66; }
.scale-faces input:checked + span .survey-face { transform: scale(1.08); }
.survey-kinds { margin: 0 0 16px; }
.survey-kinds-label { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 0 0 8px; }
.survey-kinds-label b { color: #0b2b66; font-size: 16px; }
.survey-kinds-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.survey-kind { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--text); }
.survey-kind:hover { text-decoration: none; border-color: #0b2b66; }
.survey-kind.on { border-color: #0b2b66; box-shadow: inset 0 0 0 1px #0b2b66; background: #f7f9ff; }
.survey-kind b { color: #0b2b66; font-size: 15px; }
.survey-kind small { color: #475569; font-size: 13px; }
.survey-kind em { font-style: normal; color: var(--muted); font-size: 12px; }
.survey-kind-faces { display: flex; gap: 2px; min-height: 30px; }
.survey-kind-faces .survey-face { width: 30px; height: 30px; }
.survey-avg-face .survey-face { width: 22px; height: 22px; vertical-align: middle; }
.survey-logo { display: block; max-height: 64px; max-width: 240px; margin: 0 0 14px; }
.survey-logo-mini { height: 22px; width: auto; vertical-align: middle; margin-left: 6px; }
.survey-design { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 6px; margin: 0; }
.survey-design legend { font-weight: 600; padding: 0 6px; }
.sd-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.sd-row:last-child { border-bottom: 0; }
.sd-label { font-weight: 600; color: #0b2b66; font-size: 14px; }
.sd-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.form .sd-other { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: #475569; }
.sd-other input { width: 110px; padding: 6px 10px; }
.form .sd-body .sd-brand { width: 240px; max-width: 100%; }
@media (max-width: 640px) { .sd-row { grid-template-columns: 1fr; } }
.sd-aligns { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.form .sd-align { display: inline-flex; flex-direction: row; cursor: pointer; }
.sd-align input { position: absolute; opacity: 0; }
.sd-align span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 14px; color: #475569; border-right: 1px solid var(--line); }
.sd-align:last-child span { border-right: 0; }
.sd-align input:checked + span { background: #0b2b66; color: #fff; }
.sd-align input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
.sd-align-ico { display: inline-flex; flex-direction: column; gap: 2px; width: 14px; }
.sd-align-ico b { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.sd-align-ico b:nth-child(2) { width: 9px; }
.sd-align-ico.is-center { align-items: center; }
/* Encuesta pública centrada: logo, título, textos, preguntas y caritas al centro; las cajas y el botón siguen a lo ancho. */
.survey-align-center { text-align: center; }
.survey-align-center .survey-logo { margin-left: auto; margin-right: auto; }
.survey-align-center .survey-q legend { margin: 0 auto; }
.survey-align-center .scale, .survey-align-center .choices { justify-content: center; }
.survey-align-center h1 { justify-content: center; text-align: center; }
.survey-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.survey-color { cursor: pointer; }
.survey-color input[type=radio] { position: absolute; opacity: 0; }
.survey-color span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.survey-color input:checked + span { box-shadow: 0 0 0 2px #0b2b66; }
.form .survey-color { display: inline-flex; }
.survey-color input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.survey-q textarea { resize: vertical; }
.survey-cnt { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; }
.survey-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; text-align: left; }
.q-ph.fc-like { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.q-ph.fc-like[hidden] { display: none; }
.q-ph.fc-like input { flex: 1 1 200px; min-width: 0; }
.q-ph.fc-like select { flex: 0 0 auto; width: auto; }
@media (max-width: 640px) { .scale-faces span { min-width: 64px; } .scale-faces .survey-face { width: 48px; height: 48px; } }
/* Lista de encuestas en celular: una tarjeta por encuesta, sin scroll de lado. */
@media (max-width: 720px) {
    .table-wrap:has(.survey-list) { overflow: visible; border: 0; background: none; box-shadow: none; }
    .survey-list, .survey-list tbody { display: block; width: 100%; }
    .survey-list thead { display: none; }
    .survey-list tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px 16px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
    .survey-list td, .survey-list td.num { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; text-align: left; white-space: normal; }
    .survey-list td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--muted); font-weight: 500; }
    .survey-list td.survey-list-name, .survey-list td.survey-list-actions { grid-column: 1 / -1; }
    .survey-list td.survey-list-name a { font-size: 17px; }
    .survey-list td.survey-list-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
}
.form .field .check-state { white-space: normal; align-items: flex-start; }
.form .field .check-state input { flex: none; margin-top: 2px; }
.survey-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #0b2b66; font-weight: 600; font-size: 14px; }
.survey-back:hover { text-decoration: none; border-color: #0b2b66; }
.survey-preview { background: #fff7e6; border: 1px solid #fde7a6; color: #8a5a00; margin-bottom: 12px; }
.q-faces { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.q-faces-pick { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.q-faces-pick > span { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.q-faces-pick b { margin-left: 6px; }
.q-face .survey-face { width: 22px; height: 22px; display: block; }
.scale-hint { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 4px; }
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.choices label { display: flex; flex-direction: row; gap: 8px; align-items: center; font-weight: 500; }
.survey-q textarea { width: 100%; margin-top: 6px; }
.hp { position: absolute; left: -9999px; }
.survey-foot { text-align: center; color: var(--muted); font-size: 12px; display: flex; gap: 6px; justify-content: center; align-items: center; }
.survey-foot img { height: 22px; width: auto; }
[hidden] { display: none !important; }
.form label.inline { flex-direction: row; align-items: center; font-weight: 500; color: var(--text); }

/* Seguimiento en la lista de leads */
.note-count { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; vertical-align: 1px; }
.note-count:hover { text-decoration: none; background: #fde68a; }
.follow { min-width: 190px; max-width: 260px; }
.last-note { font-size: 13px; color: var(--text); background: #fffbeb; border-left: 3px solid #f59e0b; padding: 4px 8px; margin-bottom: 4px; overflow-wrap: anywhere; }
.no-follow { color: #b45309; font-weight: 600; }
.quick-note summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; margin-top: 4px; list-style: none; }
.quick-note summary::-webkit-details-marker { display: none; }
.quick-note form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.quick-note textarea { width: 100%; font-size: 13px; }
.edit-lead { margin: 12px 0 18px; }
.edit-lead summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.edit-lead .form { margin-top: 12px; }
.timeline li.ev-edited::before { background: #f59e0b; }
.timeline li.ev-survey::before { background: #16a34a; }
.narrow { max-width: 560px; }
a.user-name { color: var(--muted); }
a.user-name:hover { text-decoration: none; color: var(--text); }
.timeline li.ev-returned::before { background: #0ea5e9; }
.client-box .client-name { color: #f26a1b; font-weight: 800; }
.client-box select.all-clients { color: var(--muted); }
.client-box select.all-clients option { color: var(--text); }

/* Pasada de usabilidad */
.date-cell b { display: block; font-weight: 600; }
.date-cell span { font-size: 12px; }
.contact-line { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.wa-link { color: #15803d; font-weight: 600; }
.wa-link::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #25d366; margin-right: 5px; vertical-align: 1px; }
.msg { max-width: 230px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.msg-extra { max-width: 230px; margin-top: 4px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unassigned { color: #b45309; font-weight: 600; font-size: 13px; }
.table tbody tr:hover { background: #f8faff; }
.filters input[type=search] { flex: 1 1 220px; }
.date-range { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.field-label { font-weight: 500; margin-bottom: 6px; }
.field-label.wa-label { display: flex; align-items: center; gap: 6px; }
.status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pick button { --c: #64748b; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-weight: 600; background: color-mix(in srgb, var(--c) 12%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); color: color-mix(in srgb, var(--c) 75%, black); }
.status-pick button:hover { background: color-mix(in srgb, var(--c) 24%, white); }
.status-pick button.current { background: color-mix(in srgb, var(--c) 80%, black); color: #fff; border-color: transparent; cursor: default; }
.btn-wa:hover { background: #1ebe5a; }
.page-head .actions form { margin: 0; }
.chat-scheme { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.chat-scheme p { margin: 2px 0 0; }
.chat-scheme b { color: var(--navy); font-size: 16px; }
.chat-scheme-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.chat-scheme .btn { flex: none; }
@media (max-width: 700px) { .chat-scheme { flex-direction: column; } }
.roles-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.roles-legend div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.roles-legend b { display: block; color: var(--navy); }
.roles-legend span { color: var(--muted); font-size: 13px; }
.src-cell { max-width: 170px; }
.src-cell .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.src-cell .muted.who-line { display: block; -webkit-line-clamp: none; overflow: visible; }
.follow { width: 230px; min-width: 210px; }

/* Reporte estilo tablero: cada métrica con su color */
.print-only { display: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--k, var(--brand)); margin-right: 8px; vertical-align: 1px; }
.kpi em { display: block; font-style: normal; color: var(--muted); font-size: 12px; margin-top: 2px; }
.kpi b { color: var(--text); }
.report-block .bar-fill { background: var(--k, var(--brand)); }
.chart-card { padding-bottom: 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chart-body { --chart-h: 180px; display: grid; grid-template-columns: var(--y-width, 32px) 1fr; column-gap: 8px; margin-top: 10px; }
.chart-y { position: relative; height: var(--chart-h); font-size: 11px; color: var(--muted); }
.chart-y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.chart-plot { position: relative; height: var(--chart-h); border-left: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; cursor: crosshair; }
.area-chart { width: 100%; height: 100%; display: block; overflow: visible; }
.area-chart .grid { stroke: #eef2f6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #94a3b8; pointer-events: none; }
.chart-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--chart-color, #f97316); box-sizing: border-box; pointer-events: none; }
.chart-tip { position: absolute; z-index: 5; background: #0f172a; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(15, 23, 42, .2); }
.chart-tip span { display: block; color: #cbd5e1; text-transform: capitalize; }
.chart-tip b { font-size: 13px; }
.chart-guide[hidden], .chart-dot[hidden], .chart-tip[hidden] { display: none; }
.chart-x { position: relative; height: 16px; font-size: 11px; color: var(--muted); margin-top: 5px; }
.chart-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.chart-x span:first-child { transform: none; }
.chart-x span:last-child:not(:first-child) { transform: translateX(-100%); }
.stackbar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: #eef2f6; gap: 2px; margin: 4px 0 12px; }
.stackbar span { display: block; min-width: 3px; }
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 8px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend .lg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend small { color: var(--muted); text-align: right; }
.stack-note { margin: 12px 0 0; }
.channels-table td { vertical-align: middle; }
.share { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; min-width: 160px; }
.share .bar-track { height: 8px; }
.channels-table .bar-fill { background: var(--k); }
.spark-cell { width: 160px; color: var(--k); }
.spark { width: 140px; height: 30px; display: block; }
.gads-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); vertical-align: 0; }
@media print {
    .print-only { display: block; }
    .report-head { margin-bottom: 14px; }
}

/* ---------- Estilo ligero tipo Cloudflare: letra Inter, pesos bajos, tarjetas planas ---------- */
:root { --bg: #f7f8fa; --line: #e4e7ec; --text: #1d2433; --muted: #5f6b7c; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); -webkit-font-smoothing: antialiased; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.3px; }
h1 small { font-size: 14px; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
b, strong, .strong { font-weight: 600; }
.muted { color: var(--muted); }

.card { border-radius: 10px; box-shadow: none; padding: 20px 22px; border-color: var(--line); }
.kpi { border-radius: 10px; box-shadow: none; padding: 16px 18px; }
.kpi span { font-size: 13px; font-weight: 500; color: var(--text); }
.kpi b { font-size: 28px; font-weight: 500; letter-spacing: -.5px; }
.table-wrap { border-radius: 10px; }
.table th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--muted); background: #fafbfc; }
.table td { border-bottom-color: #eef0f3; }
.table tbody tr:hover { background: #fafbff; }

.btn { border-radius: 7px; padding: 7px 14px; font-weight: 500; font-size: 14px; }
.btn-sm { padding: 3px 10px; font-size: 13px; border-radius: 6px; }
.btn-primary { background: var(--brand); border-color: var(--brand); box-shadow: none; }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
input, select, textarea { border-radius: 7px; border-color: #d5dae2; padding: 7px 10px; }
.form label { font-weight: 500; }

.topbar { padding: 10px 24px; }
.topbar nav a, .nav-menu summary { font-weight: 500; padding: 6px 12px; border-radius: 7px; }
.btn-logout { border-radius: 7px; padding: 7px 16px; font-weight: 500; }
.client-box strong, .client-box label, .client-box select { font-weight: 600; font-size: 15px; }
.nav-dropdown { border-radius: 10px; }
.topbar .nav-dropdown a { border-radius: 6px; }

.status-tabs a { font-weight: 500; padding: 4px 12px; font-size: 13px; }
.status-form select { font-weight: 500; padding: 4px 10px; font-size: 13px; }
.status-pick button { font-weight: 500; font-size: 13px; padding: 5px 12px; }
.badge { font-weight: 500; }
.flash { border-radius: 8px; font-weight: 500; }
.roles-legend div, .q-row, .survey-sent { border-radius: 8px; }

.login-card { border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -16px rgba(16, 24, 40, .18); }
.login-card input { border-radius: 8px; background: #fff; }
.login-card .btn-primary { border-radius: 8px; font-weight: 600; font-size: 15px; }
.login-card label { font-weight: 500; }
.survey-q { border-radius: 10px; }
.scale span { border-radius: 8px; font-weight: 600; }
.unassigned { white-space: nowrap; }
.quick-note summary { display: flex; gap: 12px; align-items: center; }
.see-notes { color: var(--muted); font-weight: 500; }
.see-notes:hover { color: var(--brand); }

/* Avatares en círculo */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; object-fit: cover; font-weight: 600; line-height: 1; user-select: none; vertical-align: middle; }
.avatar-xs { width: 18px; height: 18px; font-size: 10px; margin-right: 5px; }
.avatar-sm { width: 26px; height: 26px; font-size: 12px; }
.avatar-md { width: 32px; height: 32px; font-size: 14px; }
.avatar-xl { width: 88px; height: 88px; font-size: 36px; }
.avatar-system { background: #eef0f3; color: var(--muted); }
.who { display: inline-flex; align-items: center; gap: 8px; }
.muted.who, .muted .who { gap: 0; }
a.user-name { display: inline-flex; align-items: center; gap: 8px; }
.avatar-edit { display: flex; gap: 18px; align-items: center; }
.avatar-edit .btn { cursor: pointer; display: inline-flex; flex-direction: row; }
.who-line { display: inline-flex; align-items: center; gap: 0; }
div.who-line { display: block; margin-top: 2px; }
div.who-line > .who-line { display: inline; }
div.who-line .avatar-xs { display: inline-flex; vertical-align: middle; margin: 0 3px 0 2px; }
.who-line .avatar-xs { margin-left: 4px; }
.manual-stamp { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; }

/* Widgets: tarjetas y editor con vista previa */
.widget-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.widget-card { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.widget-card.paused { background: #fafafa; }
.widget-card.paused .wc-icon { filter: grayscale(1); opacity: .5; }
.wc-head { display: flex; align-items: center; gap: 12px; }
.wc-head form { margin: 0 0 0 auto; }
.wc-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.wc-title { min-width: 0; }
.wc-title a { color: var(--text); font-size: 15px; }
.wc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.wc-stats b { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; }
.wc-stats b.wc-last { font-size: 14px; padding-top: 4px; }
.wc-stats > div > span { font-size: 12px; color: var(--muted); }
.wc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.switch { width: 40px; height: 22px; border-radius: 999px; border: 0; background: #cbd5e1; position: relative; cursor: pointer; padding: 0; }
.switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: #16a34a; }
.switch.on i { left: 21px; }
.widget-editor { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 18px; align-items: start; }
.widget-editor > form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
.widget-editor > form .card { margin: 0; }
/* Editor de widgets y formas: títulos de sección en naranja Direnet y letra más grande para no perderse (David, 2026-11-06). */
.widget-editor > form .card > h2 { color: var(--orange-direnet); font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.widget-editor .field-label.span-2 { color: var(--orange-direnet); font-size: 16px; font-weight: 700; margin-top: 8px; }
.widget-editor > form { font-size: 15px; }
.widget-editor > form .card > p.muted { font-size: 14px; }
.preview-pane { position: sticky; top: 16px; }
.preview-card { padding: 16px; }
.preview-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.preview-head b { margin-right: auto; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: #eef2ff; color: #1e40af; font-weight: 600; }
/* Sin esquinas recortadas ni transición: Chrome a veces deja de pintar un iframe aislado (sandbox) dentro de una caja recortada. */
.preview-stage { height: 690px; background: #eef0f3; display: flex; justify-content: center; isolation: isolate; }
.preview-stage iframe { width: 100%; height: 100%; border: 0; background: #f5f6f8; }
.preview-stage.mobile iframe { width: 375px; max-width: 100%; box-shadow: 0 0 0 1px #d6d9de; }
/* Forma web en computadora: pantalla de 1200 px reducida con zoom para que quepa (ver fitDesktop en widget-editor.js). */
.preview-stage.wide iframe { width: var(--screen, 1200px); height: calc(690px / var(--zoom, 1)); flex: none; zoom: var(--zoom, 1); }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type=color] { width: 44px; height: 36px; padding: 2px; }
.swatches { display: flex; gap: 6px; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d6d9de; cursor: pointer; padding: 0; }
.range-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.range-row input { flex: 1; padding: 0; }
.range-row output { min-width: 28px; text-align: right; color: var(--text); font-weight: 600; }
.save-bar { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; display: flex; align-items: center; gap: 12px; }
.fields-table td, .fields-table th { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 1100px) { .widget-editor { grid-template-columns: 1fr; } .preview-pane { position: static; } }
.img-pick { display: grid; gap: 6px; }
.img-row { display: flex; align-items: center; gap: 10px; }
.img-thumb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; overflow: hidden; flex: none; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-row .btn { cursor: pointer; }

/* Widget: agentes, campos y horario */
.agent-rows { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.agent-row { display: grid; grid-template-columns: 56px 1fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.agent-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.agent-photo .img-thumb { background: #e5e7eb; color: #475569; font-size: 16px; }
.agent-photo .link { color: var(--accent, var(--brand)); cursor: pointer; }
.agent-row label { font-size: 12px; }
@media (max-width: 1280px) { .agent-row { grid-template-columns: 56px 1fr 1fr; } .agent-row > .agent-photo { grid-row: span 2; align-self: start; } .agent-row > button { grid-column: 3; justify-self: end; } }
.fields-table .drag { cursor: grab; color: #94a3b8; width: 28px; user-select: none; }
.fields-table .drag:hover { color: #334155; }
.fields-table tr.dragging { opacity: .45; background: #eef2ff; }
.fields-table input:not([type=checkbox]), .fields-table select { padding: 6px 8px; font-size: 13px; min-width: 0; width: 100%; }
.fields-table { table-layout: fixed; width: 100%; }
.fields-table th:nth-child(1) { width: 30px; } .fields-table th:nth-child(2) { width: 58px; } .fields-table th:nth-child(5) { width: 86px; } .fields-table th:nth-child(6) { width: 104px; }
.fields-table td, .fields-table th { padding-left: 6px; padding-right: 6px; }
.fields-table input.num { width: 70px; }
.ph-off-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.ph-off-note .btn { margin-left: 6px; }
.ph-off-tag { color: #c2410c; font-weight: 600; }
.fields-table.ph-off [data-ph] { opacity: .45; }
.table.fields-table input:not([type=checkbox]), .table.fields-table select { min-width: 0; }
.table.fields-table select { -webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
.fields-table th:nth-child(6) { width: 132px; } .fields-table th:nth-child(7) { width: 34px; }
.fields-table tr.custom-field { background: #fffdf5; }
.fc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; }
.table.fields-table .fc-meta select { width: auto; flex: none; padding-top: 3px; padding-bottom: 3px; padding-right: 24px; font-size: 12px; background-position: right 8px center; }
.fc-token { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #64748b; white-space: nowrap; }
.fc-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.fc-hint[hidden] { display: none; }
.fields-table .fc-help { margin-top: 6px; font-size: 12px; padding-top: 5px; padding-bottom: 5px; }
.fields-table .fc-rows:not([hidden]) { display: block; margin-top: 6px; }
.table.fields-table select[data-wide] { width: auto; min-width: 112px; }
.fc-remove { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; }
.fc-remove:hover { background: #fef3f2; color: #b42318; }
.check-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #8a93a2; white-space: nowrap; cursor: pointer; }
.check-state .on { color: #2e7d4f; font-weight: 600; }
.po h2 { margin: 0 0 12px; font-size: 16px; }
.po-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.po-box, .po-savings { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; border-top: 3px solid var(--k); }
.po-paid { --k: #f97316; } .po-organic { --k: #10b981; } .po-other { --k: #94a3b8; }
.po-box span, .po-savings span { display: block; font-size: 13px; font-weight: 600; color: var(--k, #18794e); }
.po-box b { display: block; font-size: 28px; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.po-box em, .po-savings em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.po-box small { display: block; margin-top: 6px; font-size: 12px; color: #475569; }
.po-savings { --k: #10b981; margin-top: 12px; text-align: center; background: #f3fbf6; }
.po-savings b { display: block; font-size: 32px; font-weight: 700; color: #14532d; margin: 2px 0; }
.po-savings em { font-size: 13px; color: #334155; }
.po-savings small { display: block; max-width: 620px; margin: 8px auto 0; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .po-grid { grid-template-columns: 1fr; } }
.sw-default { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 13px; color: #475569; cursor: pointer; }
.num-unit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.num-unit[hidden] { display: none; }
.table.fields-table .num-unit input.num { width: 58px; }
.fields-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.drag-ico { font-weight: 700; color: #64748b; }
.req-star { color: #dc2626; }
.seg-radio { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.sched { display: flex; flex-direction: column; gap: 6px; }
.sched[hidden] { display: none; }
.sched-row { display: grid; grid-template-columns: 130px 130px 16px 130px; justify-content: start; gap: 8px; align-items: center; }
.sched-row input[type=time] { padding: 5px 8px; }
.launcher-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.lp { display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; text-align: center; font-weight: 400 !important; }
.lp:has(input:checked) { border-color: var(--brand); background: #eff6ff; }
.lp input { position: absolute; opacity: 0; pointer-events: none; }
.lp strong { font-size: 13px; color: var(--text); }
.lp small { font-size: 11px; }
.lp-art { height: 46px; width: 110px; position: relative; margin: 0 auto 4px; }
.widget-editor > form, .widget-editor > form .card { min-width: 0; }
.agent-row > *, .agent-row input, .agent-row select { min-width: 0; }
.lp-art i { position: absolute; right: 18px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; background: #25d366; }
.lp-pill .lp-art i { width: 70px; border-radius: 999px; }
.lp-card .lp-art b { position: absolute; right: 12px; bottom: 28px; width: 74px; height: 18px; border-radius: 4px 4px 0 0; background: #25d366; }
.lp-card .lp-art em { position: absolute; right: 12px; bottom: 28px; width: 74px; height: 18px; transform: translateY(14px); background: #fff; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 4px 4px; height: 12px; }
.lp-card .lp-art i { width: 14px; height: 14px; right: 12px; bottom: 0; }
.group-title { font-size: 15px; font-weight: 600; margin: 22px 0 10px; color: var(--muted); }
.install-steps { margin: 8px 0 10px 18px; padding: 0; line-height: 1.7; }
.install-steps code, #instalar h3 + p code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; word-break: break-all; }
.install-steps code.hl { background: #fef9c3; }
#instalar h3 { font-size: 15px; margin: 18px 0 4px; }

/* ---------- Celular: menú, barra inferior y tarjetas de leads ---------- */
.menu-toggle, .tabbar, .lead-cards, .f-toggle, .app-refresh { display: none; }
.app-refresh { align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); order: 2; flex: none; cursor: pointer; }
.app-refresh svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-refresh:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (display-mode: standalone) { .app-refresh { display: inline-flex; } }
.is-app .app-refresh { display: inline-flex; }
.login-card { position: relative; }
.guest-refresh { position: absolute; top: 14px; right: 14px; }
.mic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dbe3f1; background: #fff; cursor: pointer; color: var(--muted); flex: none; }
.mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mic.on { background: #fee2e2; border-color: #fca5a5; color: #dc2626; animation: mic-pulse 1.2s infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .15); } }

@media (max-width: 760px) {
    body { font-size: 15px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    h1 { font-size: 24px; }
    .container { padding: 14px 12px 30px; }
    .card { padding: 18px 16px; border-radius: 16px; }

    .topbar { padding: 10px 12px; gap: 10px; flex-wrap: nowrap; position: sticky; top: 0; z-index: 50; }
    .brand img { height: 34px; }
    .topbar-left { gap: 10px; min-width: 0; flex: 1; }
    .client-box { padding-left: 10px; min-width: 0; }
    .client-box strong, .client-box label, .client-box select { font-size: 14px; }
    .client-box > span, .hide-mobile { display: none !important; }
    .client-box strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; order: 3; flex: none; }
    .menu-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
    .topbar nav, .topbar-right { display: none; }
    /* Abierto queda encima de todo (en Chats la plática está fija arriba de la página y lo tapaba) y se desliza si no cabe. */
    .menu-open .topbar { flex-wrap: wrap; z-index: 70; }
    .menu-open .topbar nav { display: flex; flex-direction: column; order: 4; width: 100%; margin: 4px 0 0; gap: 0; max-height: calc(100dvh - 210px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
    .menu-open .topbar nav a, .menu-open .nav-menu summary { padding: 12px 10px; border-radius: 10px; font-size: 16px; }
    .menu-open .nav-dropdown { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; }
    .menu-open .topbar-right { display: flex; order: 5; width: 100%; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); }
    /* Abierto se separa de la página: fondo oscurecido (tocarlo cierra el menú), sombra abajo, líneas entre opciones y los submenús en una caja con línea azul. */
    .menu-open { overflow: hidden; }
    .menu-open::after { content: ""; position: fixed; inset: 0; z-index: 65; background: rgba(10, 36, 89, .45); }
    .menu-open .topbar { border-bottom: 0; border-radius: 0 0 18px 18px; box-shadow: 0 20px 40px -12px rgba(10, 36, 89, .5); }
    .menu-open .menu-toggle { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); }
    .menu-open .menu-toggle span { background: var(--brand); }
    .menu-open .topbar nav > * + * { border-top: 1px solid #eef2f6; }
    .menu-open .topbar nav > a, .menu-open .nav-menu summary { color: var(--text); }
    .menu-open .topbar nav > a.active { color: var(--brand); background: var(--brand-soft); }
    .menu-open .nav-menu[open] > summary, .menu-open .nav-menu summary.active { background: transparent; color: var(--navy); font-weight: 700; }
    .menu-open .nav-menu summary.active { color: var(--brand); }
    .menu-open .nav-menu[open] > summary::after { content: "▴"; }
    .menu-open .nav-dropdown { margin: 0 0 10px 10px; padding: 4px; background: #f8fafc; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; }
    .menu-open .topbar .nav-dropdown a { font-size: 15px; padding: 10px 12px; color: #334155; }
    .menu-open .topbar .nav-dropdown a.active { color: var(--brand); background: var(--brand-soft); font-weight: 700; }

    .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px -14px rgba(15, 26, 61, .35); }
    .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; text-decoration: none; }
    .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .tabbar a.active { color: var(--brand); }
    .tabbar .tab-new svg { background: var(--brand-strong); color: #fff; border-radius: 50%; padding: 4px; width: 30px; height: 30px; margin-top: -2px; }

    .page-head { margin-bottom: 10px; }
    .page-head .actions { width: 100%; justify-content: flex-start; }
    .status-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 10px; padding: 0 12px 4px; scrollbar-width: none; }
    .status-tabs::-webkit-scrollbar { display: none; }
    .status-tabs a { white-space: nowrap; }
    .filters input[type=search] { flex: 1 1 0; min-width: 0; }
    .f-toggle { display: inline-flex; }
    .filters:not(.show-more) .f-more { display: none; }
    .filters .f-more, .filters .date-range { width: 100%; }
    .filters .date-range { display: flex; gap: 6px; align-items: center; }
    .filters .date-range input { flex: 1; min-width: 0; }
    .filters .date-range { flex-wrap: wrap; }
    .filters .date-range .btn { flex: 1 0 100%; }

    /* En el celular solo las tarjetas: la tabla de escritorio se esconde (antes salían las dos, una arriba de la otra). */
    .leads-table { display: none; }
    .lead-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
    .lead-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
    .lc-top { display: flex; gap: 8px; align-items: center; }
    .lc-top .lc-time { margin-left: auto; }
    .lc-name { font-weight: 700; font-size: 17px; color: var(--text); min-width: 0; }
    .lead-card.is-read .lc-name { font-weight: 400; color: #334155; }
    .lead-card.is-unread .lc-msg, .lead-card.is-unread .lc-time { font-weight: 700; color: var(--text); }
    .lead-card.is-unread { background: #f5f8ff; border-color: color-mix(in srgb, var(--brand) 35%, white); box-shadow: inset 4px 0 0 var(--brand); }
    .lead-card.is-unread .lc-name { font-weight: 800; }
    .lead-card .unread-pill { margin-left: 0; }
    .bulk-bar { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0; flex-wrap: nowrap; gap: 6px; padding: 8px; }
    .bulk-bar .bulk-clear { order: -1; padding: 0 6px; }
    .bulk-bar .bulk-count { font-size: 14px; white-space: nowrap; }
    .bulk-bar .btn { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
    .pager-full { justify-content: center; }
    .lc-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .lc-meta { color: var(--muted); font-size: 13px; }
    .pre, .kv dd, .lc-msg, .lc-note-last, .lc-name { overflow-wrap: anywhere; }
    .lc-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
    .lc-note-last { font-size: 13px; color: #475569; background: #f8fafc; border-radius: 8px; padding: 6px 8px; }
    .lc-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
    .lc-row .status-form select { min-width: 0; max-width: 200px; }
    .lc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
    .lc-actions .btn { padding: 10px 6px; }
    .lc-actions .lc-see { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); font-weight: 600; }
    .lc-note-form { display: none; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
    .lead-card.noting .lc-note-form { display: flex; }
    .lc-note-form textarea { flex: 1 1 100%; font-size: 16px; }
    .lc-note-form .btn { flex: 1; }

    .detail { gap: 10px; }
    .page-head h1 { font-size: 22px; }
    /* Botones del lead del mismo tamaño: WhatsApp, Llamar y Correo repartidos en un renglón; lo demás abajo, a todo lo ancho. */
    .lead-actions > .btn, .lead-actions > form .btn { padding: 11px 12px; font-size: 16px; }
    .lead-actions > a.btn { flex: 1 1 0; }
    .lead-actions > form { flex: 1 1 100%; }
    .lead-actions > form .btn { width: 100%; }
    .status-pick button { padding: 10px 14px; font-size: 15px; }
    .kv { grid-template-columns: 90px 1fr; }
    .clip { max-width: 100%; }
    .note-form { flex-direction: row; flex-wrap: wrap; }
    .note-form textarea { flex: 1 1 100%; font-size: 16px; }
    input, select, textarea { font-size: 16px; }
    .table-wrap { border-radius: 14px; }
}

/* Accesos rápidos de fecha en Leads */
.date-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.date-pills a { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #334155; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.date-pills a:hover { text-decoration: none; border-color: #c9d4e6; background: #f6f8fc; }
.date-pills a.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); }
@media (max-width: 760px) {
    .date-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 10px; padding: 0 12px 4px; scrollbar-width: none; }
    .date-pills::-webkit-scrollbar { display: none; }
}
/* Leads en el celular: el panel de filtros va cerrado y unos chips dicen qué filtro está puesto (antes se abría solo y tapaba la lista). */
.f-dates, .active-filters { display: none; }
.f-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; }
@media (max-width: 760px) {
    .filters.show-more .f-dates { display: flex; margin: 0 0 2px; }
    .filters .f-seller { width: 100%; }
    .filters .f-seller:has(option:checked:not([value=""])) { background-color: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); font-weight: 600; }
    .filters .f-apply { display: none; }
    .filters.show-more .f-apply { display: inline-flex; }
    .filters.show-more .f-toggle { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); }
    .active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
    .af-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 999px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); font-size: 13px; font-weight: 600; }
    .af-chip span { font-size: 16px; line-height: 1; }
    .af-chip:hover, .af-clear:hover { text-decoration: none; }
    .af-clear { font-size: 13px; font-weight: 600; color: var(--muted); padding: 5px 4px; }
}
.period-label { font-size: 15px; font-weight: 600; letter-spacing: 0; color: #c2410c; background: #ffedd5; padding: 4px 12px; border-radius: 999px; }

/* Correos como etiquetas */
.email-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid #dbe3f1; border-radius: 10px; background: #fff; cursor: text; min-height: 42px; }
.email-chips:focus-within { outline: 2px solid color-mix(in srgb, var(--brand) 35%, white); border-color: var(--brand); }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #1e293b; color: #fff; border-radius: 6px; padding: 3px 4px 3px 9px; font-size: 13px; font-weight: 500; }
.chip button { background: none; border: 0; color: #cbd5e1; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chip button:hover { color: #fff; }
.chip-input { border: 0 !important; outline: none !important; flex: 1 1 180px; min-width: 120px; padding: 4px !important; }
.chip-error { color: var(--danger); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 4px; }
.secret-row { display: flex; gap: 8px; align-items: center; }
.secret-row input { flex: 1; }
.mail-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mail-method label { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; flex-direction: row !important; align-items: flex-start; gap: 8px !important; }
.mail-method label:has(input:checked) { border-color: var(--brand); background: #eff6ff; }
.mail-method small { display: block; color: var(--muted); font-weight: 400; }
@media (max-width: 760px) { .mail-method { grid-template-columns: 1fr; } }
.mail-box label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-weight: 500; }
.mail-box .inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: normal; }
.mail-usage td.bad { color: #b91c1c; font-weight: 600; }
#envios { margin-top: 16px; }

/* Reportes: pestañas, invitación a contratar y columnas por hora */
.report-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.report-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.report-tabs a:hover { border-color: #fdba74; }
.report-tabs a.active { background: #ffedd5; border-color: #fdba74; color: #c2410c; font-weight: 600; }
.report-tabs a.off { color: var(--muted); }
.report-tabs a.off::after { content: " +"; color: #f97316; font-weight: 700; }
.upsell { max-width: 640px; margin: 24px auto; text-align: center; padding: 32px 28px; }
.upsell h2 { font-size: 24px; margin: 10px 0 6px; }
.upsell-lead { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.upsell-tag { display: inline-block; background: #ffedd5; color: #c2410c; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.upsell form { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.upsell-admin { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
.hours { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 8px; }
.hcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.hcol i { display: block; width: 100%; min-height: 2px; background: #fdba74; border-radius: 3px 3px 0 0; }
.hcol small { font-size: 10px; color: var(--muted); height: 14px; margin-top: 3px; white-space: nowrap; }
.services-cell { white-space: nowrap; }
@media (max-width: 760px) {
    .report-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .report-tabs a { white-space: nowrap; }
}

/* Fuentes de datos */
.int-icon { display: inline-block; vertical-align: middle; flex: none; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569; }
.pill-ok { background: #dcfce7; color: #166534; }
/* Métricas → Botones: los ocultos del reporte, atenuados y al final en una sección plegable. */
.stats-buttons tr.is-hidden td { opacity: .55; }
.stats-buttons tr.is-hidden td:last-child { opacity: 1; }
.stats-hidden { margin-top: 16px; }
.stats-hidden summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.pill-bad { background: #fee2e2; color: #b91c1c; }
.pill-warn { background: #ffedd5; color: #c2410c; }
.inline-block { display: inline-block; }
.src-client { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); text-decoration: none; }
.src-avatar { width: 34px; height: 34px; border-radius: 8px; color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
/* Fuentes de datos: una tarjeta por cliente con sus fuentes agrupadas por servicio. */
.src-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.src-toolbar input { max-width: 260px; }
.src-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.src-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; margin-bottom: 18px; align-items: start; }
.src-cards .src-card { margin: 0; padding: 18px 20px; }
.src-card.is-off { opacity: .65; }
.src-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.src-card-head .src-client { margin-right: auto; }
.src-groups { margin-top: 12px; border-top: 1px solid var(--line); }
.src-group { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; }
.src-group:last-child { border-bottom: 0; padding-bottom: 0; }
.src-group-label { font-weight: 600; font-size: 13px; color: var(--navy); padding-top: 2px; }
.src-group-items { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-width: 0; }
.src-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.src-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.src-group.is-missing .src-group-label { color: #c2410c; }
.src-empty { margin: 10px 0 0; }
.src-conns > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.src-conns > summary::-webkit-details-marker { display: none; }
.src-conns > summary h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.src-conns > summary h2::before { content: "▸"; color: var(--muted); font-size: 14px; transition: transform .15s; }
.src-conns[open] > summary h2::before { transform: rotate(90deg); }
.src-conns[open] > summary { margin-bottom: 14px; }
@media (max-width: 640px) { .src-group { grid-template-columns: 1fr; gap: 4px; } .src-toolbar input { max-width: none; } }
.conn-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.conn-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.conn-list li > span:first-of-type { flex: 1; min-width: 180px; }
.conn-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-buttons [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.src-list td { vertical-align: top; }
.src-conn { margin-top: 2px; }
.ps-scores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ps { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; }
.ps.good { background: #dcfce7; color: #166534; }
.ps.mid { background: #ffedd5; color: #9a3412; }
.ps.bad { background: #fee2e2; color: #b91c1c; }
.int-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.int-pick label { position: relative; display: block; cursor: pointer; }
.int-pick input { position: absolute; opacity: 0; }
.int-pick span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; background: var(--card); }
.int-pick input:checked + span { border-color: #fdba74; background: #fff7ed; box-shadow: 0 0 0 2px #fed7aa; }
.int-pick input:focus-visible + span { outline: 2px solid var(--brand); }
code.copy { user-select: all; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
.wa-webhook { border-top: 1px solid var(--line); padding-top: 14px; }
.wa-webhook h3 { margin: 0 0 6px; font-size: 15px; }
.wa-webhook p { margin: 6px 0; }
.int-pick span { position: relative; }
.int-pick .soon { position: absolute; top: 3px; right: 8px; font-size: 10px; }
.src-step { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 6px 0 2px; }
.src-step-add { margin-left: auto; font-weight: 600; font-size: 14px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.src-step-add:hover { text-decoration: underline; }
.src-step b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff7ed; color: #c2410c; font-size: 12px; }
#new-source select { max-width: 520px; width: 100%; }
#step-conn, #step-acct { display: grid; gap: 6px; }
#step-conn > .src-step { max-width: 520px; }
#step-conn[hidden], #step-acct[hidden] { display: none; }
#conn-has, #conn-none { display: grid; gap: 6px; justify-items: start; }
#conn-has[hidden], #conn-none[hidden] { display: none; }
.plug { vertical-align: -2px; }
.row-menu { position: relative; display: inline-block; }
.row-menu summary { list-style: none; cursor: pointer; padding: 2px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text); background: #fff; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: #f1f5f9; color: var(--text); }
.row-menu-list { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px -12px rgba(15, 26, 61, .3); padding: 4px; text-align: left; }
.row-menu-list form { margin: 0; }
.row-menu-list button, .row-menu-list a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--text); text-decoration: none; cursor: pointer; }
.row-menu-list button:hover, .row-menu-list a:hover { background: #f8fafc; }
.row-menu-list .danger { color: #b91c1c; }
.src-connect { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.app-card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 20px; color: var(--text); text-decoration: none; flex-wrap: wrap; transition: border-color .15s; }
.app-card:hover { border-color: #fdba74; }
.app-card-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.app-card-body b { font-size: 17px; }
.app-title { display: flex; align-items: center; gap: 10px; }
.legal { background: var(--bg); }
.legal-box { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; line-height: 1.6; }
.legal-logo { height: 40px; margin-bottom: 24px; }
.legal-box h1 { margin-bottom: 4px; }
.legal-box h2 { font-size: 18px; margin-top: 28px; }
.legal-box footer { margin-top: 40px; }
.tutorial-tag { margin: 0 0 4px; color: var(--brand); font-weight: 600; }
.tutorial { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; margin-top: 20px; }
.tutorial h2 { font-size: 18px; margin: 0 0 12px; }
.tutorial-media { position: sticky; top: 16px; }
.tutorial-video { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--navy); box-shadow: 0 8px 24px rgba(10, 36, 89, .15); }
.tutorial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tutorial-play-label { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 600; font-size: 14px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(10, 36, 89, .25); }
.tutorial-video.is-playing .tutorial-play-label { display: none; }
.tutorial-os { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.tutorial-os.is-yours { border-color: var(--brand); }
.tutorial-os h3 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.tutorial-yours { background: var(--brand-soft); color: var(--brand-strong); font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.tutorial-os ol { padding-left: 20px; margin: 0; }
.tutorial-os li { margin-bottom: 6px; }
.tutorial-os p { margin: 8px 0 0; }
@media (max-width: 640px) {
    .tutorial { grid-template-columns: 1fr; }
    .tutorial-media { position: static; width: 100%; max-width: 340px; margin: 0 auto; }
}
.guest-legal { text-align: center; margin-top: 14px; }
.src-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.src-sync form { margin: 0; }



/* Tabla jerárquica campaña > grupo > anuncio */
.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; vertical-align: 1px; margin-right: 4px; }
.tag-campaign { background: #dbeafe; color: var(--brand-strong); }
.tag-group { background: #ede9fe; color: #6d28d9; }
.tag-creative { background: #d1fae5; color: #047857; }
.tree-legend { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.pm-tree tr.tr-campaign td { background: #eff6ff; font-weight: 600; border-top: 2px solid #bfdbfe; }
.pm-tree tr.tr-campaign td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.pm-tree tr.tr-group td { background: #faf5ff; font-weight: 500; }
.pm-tree tr.tr-group td:first-child { padding-left: 30px; box-shadow: inset 4px 0 0 #a78bfa; }
.pm-tree tr.tr-creative td:first-child { padding-left: 56px; box-shadow: inset 4px 0 0 #6ee7b7; }
@media print { .pm-tree tr td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Reportes de anuncios: accesos directos (general, por campaña, propios) */
.af-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.my-reports { padding: 14px 16px; margin-bottom: 14px; }
.mr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mr-head h2 { margin: 0; font-size: 16px; }
.mr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-btn { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-left: 4px solid #f26a1b; border-radius: 0; background: #fff; color: inherit; min-width: 140px; max-width: 320px; }
.mr-btn > a:first-child { display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.mr-btn b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-btn small { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-btn:hover { border-color: #94a3b8; border-left-color: #f26a1b; background: #f8fafc; }
.mr-edit { color: #64748b; text-decoration: none; font-size: 15px; padding: 2px 4px; border-radius: 6px; }
.mr-edit:hover { background: #f1f5f9; color: #0f172a; }
.mr-rename { display: inline-flex; margin: 0; }
.mr-rename .mr-edit { background: none; border: 0; cursor: pointer; line-height: 1; }
.mr-sched { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 6px; color: #2e7d4f; text-decoration: none; }
.mr-sched:hover { background: #ecfdf3; text-decoration: none; }
.mr-sched b { font-size: 11px; font-weight: 700; }
.mr-sched .mr-clock { stroke: #fff; stroke-width: 1.4; }
.mr-sched .mr-hands { stroke: #fff; }
.mr-sched.off { color: #98a2b3; }
.mr-tip { position: fixed; z-index: 90; max-width: 320px; padding: 9px 12px; border-radius: 6px; background: #1d2433; color: #fff; font-size: 12px; line-height: 1.55; white-space: pre-line; pointer-events: none; box-shadow: 0 8px 24px rgba(15, 23, 42, .25); }
.mr-btn.on, .mr-btn.on:hover { background: #f26a1b; border-color: #f26a1b; color: #fff; }
.mr-btn.on small, .mr-btn.on .mr-edit, .mr-btn.on .mr-sched { color: #ffedd5; }
.mr-btn.on .mr-sched:hover, .mr-btn.on .mr-edit:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.mr-btn.on .mr-clock { stroke: #f26a1b; }
.mr-btn.on .mr-hands { stroke: #f26a1b; }
.kpis-pm { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.kpis-pm .kpi b { font-size: 24px; }
.kpis-crm { margin-top: -2px; }
.section-title { font-size: 15px; margin: 18px 0 8px; color: #334155; }
.chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-pair .report-block { margin: 0; }
.chart-trio { grid-template-columns: repeat(3, 1fr); }
.chart-trio .chart-head { flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 1100px) { .chart-trio { grid-template-columns: 1fr 1fr; } }
th.sort { padding: 0; }
th.sort button, th.sort > a { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; }
th.num.sort button { justify-content: flex-end; }
th.sort button:hover, th.sort > a:hover { color: var(--text); }
th.sort i { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #cbd5e1; border-bottom: 0; }
th.sort.desc i { border-top-color: currentColor; }
th.sort.asc i { border-top: 0; border-bottom: 5px solid currentColor; }
th.sort.asc button, th.sort.desc button, th.sort.asc > a, th.sort.desc > a { color: var(--tone, var(--text)); font-weight: 700; }
.pm-block { border-top: 5px solid var(--tone, var(--brand)); border-radius: 0; margin: 40px 0; }
.pm-block .table-wrap { border-radius: 0; }
.pm-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--tone, var(--text)); margin-bottom: 16px; }
.pm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 17px; background: color-mix(in srgb, var(--tone, #f97316) 12%, #fff); }
@media print { .pm-block, .pm-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.pm-table td:first-child { max-width: 420px; overflow-wrap: anywhere; }
.pm-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: #f8fafc; }
/* Cuadre con la cuenta: subtotal de la tabla y lo que falta, más ligeros; el último renglón es el total de las tarjetas. */
.pm-table tfoot .pm-subtotal td { font-weight: 600; }
.pm-table tfoot .pm-rest td { font-weight: 400; color: var(--muted); border-top: 0; }
.report-scope { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #78350f; }
.camp-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #94a3b8; }
.camp-link:hover { color: var(--brand-strong); border-color: var(--brand-strong); }
.lead-col { background: #f0fdf4; }
.pm-tree .lead-col { background: transparent; }
@media (max-width: 600px) {
    .mr-btn { min-width: 0; max-width: 100%; flex: 1 1 140px; }
    .mr-btn b { white-space: normal; }
    .mr-head { flex-wrap: wrap; }
    .chart-pair { grid-template-columns: 1fr; }
}

/* Armar un reporte propio: filtros tipo Swydo */
.rv-form { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px; }
.rv-name { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.rv-rules { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.rv-rule { display: grid; grid-template-columns: 70px minmax(220px, 2fr) minmax(130px, 1fr) 34px; grid-template-areas: "when field op del" ". value value value" ". hint hint hint"; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.rv-when { grid-area: when; font-size: 14px; color: #475569; }
.rv-field { grid-area: field; }
.rv-op { grid-area: op; }
.rv-del { grid-area: del; border: 0; background: none; font-size: 20px; color: #64748b; cursor: pointer; }
.rv-del:hover { color: var(--danger); }
.rv-value { grid-area: value; }
.rv-value input[type=text] { width: 100%; }
.rv-hint { grid-area: hint; }
.rv-hint:empty { display: none; }
.rv-add { align-self: flex-start; border: 0; background: none; color: var(--brand); font-weight: 600; cursor: pointer; padding: 4px 0; }
.rv-picker { position: relative; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: pointer; background: #fff; }
.rv-picker.open .rv-chips { border-color: var(--brand); }
.rv-ph { color: #94a3b8; font-size: 14px; }
.rv-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2ff; color: #1e3a8a; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; }
.rv-chip button { border: 0; background: none; color: #64748b; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.rv-panel { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 8px; }
.rv-picker.open .rv-panel { display: block; }
.rv-panel input[type=search] { width: 100%; margin-bottom: 6px; }
.rv-bulk { display: flex; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.rv-bulk button { border: 1px solid var(--line); background: #f8fafc; border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; color: #1e40af; }
.rv-bulk button:hover { background: #eff6ff; }
.rv-chip-all { background: var(--brand-strong) !important; color: #fff !important; }
.rv-options { max-height: 260px; overflow: auto; }
.rv-opt { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.rv-opt:hover { background: #f8fafc; }
.rv-opt small { grid-column: 2; color: #64748b; font-size: 12px; }
.rv-actions { display: flex; gap: 8px; }
.rv-delete { margin-top: 12px; }
@media (max-width: 700px) {
    .rv-rule { grid-template-columns: 1fr 34px; grid-template-areas: "when del" "field field" "op op" "value value" "hint hint"; }
}

.request-help { margin-top: 10px; }
.request-help summary { cursor: pointer; color: var(--brand-strong); font-size: 13px; }
.request-help ul { margin: 6px 0 0; padding-left: 18px; color: #475569; }
.request-help li { margin: 3px 0; }

/* PDF (imprimir): la hoja es angosta y entraría el diseño de celular; se acomoda como en escritorio. */
@media print {
    .tabbar, .menu-toggle { display: none !important; }
    body { padding-bottom: 0 !important; }
    .chart-pair { grid-template-columns: 1fr 1fr !important; gap: 8px; break-inside: avoid; }
    .chart-pair.chart-trio { grid-template-columns: repeat(3, 1fr) !important; }
    .chart-trio .chart-card { padding: 12px 12px 10px; }
    .chart-trio .chart-head h2 { font-size: 13px; }
    .chart-trio .chart-head .muted { font-size: 10px; }
    .chart-trio .chart-body { --chart-h: 120px; }
    .chart-trio .chart-x span:nth-child(even):not(:last-child) { display: none; }
    .chart-guide, .chart-dot, .chart-tip { display: none !important; }
    .chart-x { font-size: 9px; }
    .kpis-pm { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
    .kpis-pm .kpi b { font-size: 24px; }
    .kpis-pm .kpi span { font-size: 14px; }
    /* Si la última fila queda con 3 tarjetas, la última ocupa dos lugares para que no quede un hueco. */
    .kpis-pm .kpi:last-child:nth-child(4n+3) { grid-column: span 2; }
    .pm-block { margin: 18px 0; break-inside: auto; }
    .pm-table thead { display: table-row-group; }
    .pm-block .table-wrap { overflow: visible; }
    .pm-table { width: 100%; table-layout: fixed; }
    .pm-table th:first-child, .pm-table td:first-child { width: 30%; }
    .pm-table td { padding: 7px 6px; font-size: 14px; }
    .pm-table th.sort button { padding: 6px 8px; font-size: 13px; white-space: normal; }
    th.sort i { display: none; }
    .pm-table tfoot { display: table-row-group; }
    .pm-table tr { break-inside: avoid; }
}



/* Lista de leads: total, mensaje completo al pasar el mouse y "Ver detalle" */
.total-pill { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 14px; font-weight: 600; }
.hover-full { cursor: zoom-in; }
.full-tip { position: fixed; z-index: 1000; max-width: 380px; padding: 10px 14px; background: #fef9c3; color: #1f2937; border: 1px solid #fde047; border-radius: 8px; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.see-lead { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid #fed7b0; border-radius: 8px; color: #c2410c; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; background: #fff4ea; }
.see-lead:hover { background: #ffe7d1; border-color: #fdba74; color: #9a3412; text-decoration: none; }
.leads-table tbody tr:hover { background: #f8fafc; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Que quepa la columna "Ver detalle" sin desplazar la tabla en pantallas de laptop */
.leads-table .table th, .leads-table .table td { padding-left: 9px; padding-right: 9px; }
.leads-table .msg { max-width: 200px; }
.leads-table .follow { width: 180px; min-width: 170px; }
.leads-table .status-form select { min-width: 130px; }
.leads-table .contact-line { max-width: 230px; }
.leads-table td:nth-child(3) { max-width: 215px; overflow-wrap: anywhere; }
.leads-table .see-lead { padding: 5px 8px; }

/* ---------- Campos y controles más limpios (estilo Swydo / Material) ---------- */
:root { --field-line: #c9ced6; --field-hover: #8f98a6; --focus: var(--brand); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23646b78'/%3E%3C/svg%3E"); }
input, select, textarea { border: 1px solid var(--field-line); border-radius: 6px; padding: 9px 12px; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: var(--field-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(0, 85, 248, .14); }
input[type=checkbox], input[type=radio], input[type=color] { box-shadow: none; }
select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 13px center; background-color: #fff; cursor: pointer; }
.status-form select { background-image: var(--chevron); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.client-box select { background-image: var(--chevron); background-repeat: no-repeat; background-position: right 2px center; padding-right: 18px; }
.email-chips { border: 1px solid var(--field-line); border-radius: 6px; padding: 6px 8px; min-height: 44px; }
.email-chips:hover { border-color: var(--field-hover); }
.email-chips:focus-within { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(0, 85, 248, .14); }
.chip { background: #eef0f4; color: #1d2433; border-radius: 999px; padding: 3px 4px 3px 12px; font-weight: 500; }
.chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: #c3c8d1; color: #fff; font-size: 13px; }
.chip button:hover { background: #8f98a6; color: #fff; }
.chip-input:focus { box-shadow: none !important; }
.btn { border-radius: 6px; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.switch { width: 38px; height: 16px; background: #cfd4dc; overflow: visible; }
.switch i { top: -3px; left: -2px; width: 22px; height: 22px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.switch.on { background: #9fd3ad; }
.switch.on i { left: 18px; background: #2e7d4f; }
.switch-form { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0; }
.switch-state { font-size: 12px; font-weight: 600; color: #8a93a2; }
.switch-state.on { color: #2e7d4f; }

/* Campo con la etiqueta sobre el borde */
.fl { position: relative; display: block; margin: 0; }
.fl > span:first-child { position: absolute; z-index: 1; left: 10px; top: -8px; padding: 0 5px; background: #fff; font-size: 12px; line-height: 16px; font-weight: 400; color: #5f6b7c; pointer-events: none; white-space: nowrap; }
.fl:focus-within > span:first-child { color: var(--focus); }
.fl > input, .fl > select, .fl > textarea { display: block; width: 100%; min-height: 50px; padding: 13px 14px; font-size: 15px; border-radius: 4px; }
.fl > select { padding-right: 36px; }
.fl > textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.fl-chips .email-chips { min-height: 50px; padding: 9px 10px; border-radius: 4px; }
.fl-chips .chip-input { font-size: 15px; }
.fl[hidden] { display: none; }

/* Automatizaciones */
.sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 220px; padding: 12px 28px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .12s; }
.sw-btn:hover { background: var(--brand-strong); text-decoration: none; }
.sw-btn-sm { min-width: 0; padding: 8px 16px; font-size: 14px; }
.sw-wrap { max-width: 760px; margin: 0 auto; }
.sw-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12); }
.sw-head { display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.sw-head > div { flex: 1; min-width: 0; }
.sw-head h1 { font-size: 22px; margin: 0; }
.sw-send-now { white-space: nowrap; }
.sw-head:has(.sw-now) { flex-wrap: wrap; align-items: flex-start; row-gap: 14px; }
.sw-head > .sw-now { order: 9; flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sw-now .sw-send-now { margin-left: 4px; }
.sw-now-opt { font-size: 14px; }
@media (max-width: 640px) { .sw-head { flex-wrap: wrap; } .sw-head > div { flex-basis: calc(100% - 40px); } }
.sw-client { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sw-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #5f6b7c; font-size: 26px; line-height: 1; text-decoration: none; }
.sw-close:hover { background: #f1f3f6; text-decoration: none; }
.sw-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: #1d2433; user-select: none; }
.sw-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-toggle i { position: relative; width: 38px; height: 16px; border-radius: 999px; background: #cfd4dc; transition: background .15s; }
.sw-toggle i::after { content: ""; position: absolute; top: -3px; left: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s, background .15s; }
.sw-toggle input:checked + i { background: #9fd3ad; }
.sw-toggle input:checked + i::after { left: 18px; background: #2e7d4f; }
.sw-toggle input:focus-visible + i { box-shadow: 0 0 0 3px rgba(0, 85, 248, .25); }
.sw-body { display: flex; flex-direction: column; gap: 22px; padding: 28px 26px 8px; }
.sw-grid { display: grid; gap: 22px 16px; }
.sw-grid-2 { grid-template-columns: 1fr 1fr; }
.sw-grid-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sw-grid > * { min-width: 0; }
.sw-hint { margin: -12px 0 0; color: var(--muted); font-size: 13px; }
.sw-sep { border-top: 1px solid var(--line); margin: 2px 0; }
.sw-links, .sw-tags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: -14px; }
.sw-links button { background: none; border: 0; padding: 2px 0; color: #3f51b5; font-size: 15px; cursor: pointer; }
.sw-links button:hover { text-decoration: underline; }
.sw-links button[hidden] { display: none; }
.sw-tags { gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.sw-tags button { border: 1px dashed #aab2c0; background: #fff; border-radius: 4px; padding: 3px 10px; font-size: 13px; color: #3f51b5; cursor: pointer; }
.sw-tags button:hover { background: #f3f5ff; border-color: #3f51b5; }
.sw-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 26px 24px; }
.sw-cancel { color: var(--muted); font-size: 14px; }
.sw-delete { text-align: center; margin: 16px 0; }
.sw-logo { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 16px; align-items: center; }
.sw-logo-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 56px; padding: 10px 14px; border: 1px dashed #d0d5dd; border-radius: 6px; background: #fafbfc; }
.sw-logo-box[hidden] { display: none; }
.sw-logo-box img { display: block; max-height: 40px; max-width: 220px; }
.sw-logo-box small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.sw-logo-none { color: var(--muted); font-size: 13px; }
.sw-upload { position: relative; display: inline-block; padding: 6px 12px; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; color: #3f51b5; font-size: 14px; cursor: pointer; }
.sw-upload:hover { border-color: #3f51b5; background: #f3f5ff; }
.sw-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sw-delete button { background: none; border: 0; color: #b42318; font-size: 14px; cursor: pointer; }
.sw-delete button:hover { text-decoration: underline; }

.sw-list { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sw-row { display: grid; grid-template-columns: 64px minmax(200px, 1.5fr) minmax(205px, 1.1fr) minmax(170px, 1fr) 96px minmax(120px, .8fr) 172px; align-items: center; column-gap: 14px; padding: 14px 18px; border-top: 1px solid #eef0f3; }
.sw-row:first-child { border-top: 0; }
.sw-row:hover:not(.sw-row-head) { background: #fafbfd; }
.sw-row-head { padding-top: 10px; padding-bottom: 10px; background: #fafbfc; font-size: 13px; color: var(--muted); }
.sw-row.off .sw-name, .sw-row.off .sw-when { color: #8a93a2; }
.sw-cell-toggle { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sw-state { font-size: 12px; font-weight: 600; color: #8a93a2; }
.sw-state.on { color: #2e7d4f; }
.sw-switch { position: relative; width: 38px; height: 16px; border: 0; padding: 0; border-radius: 999px; background: #cfd4dc; cursor: pointer; }
.sw-switch i { position: absolute; top: -3px; left: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.sw-switch.on { background: #9fd3ad; }
.sw-switch.on i { left: 18px; background: #2e7d4f; }
.sw-cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sw-cell-main > div { min-width: 0; }
.sw-doc { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: #fff1e8; color: #f26a1b; }
.sw-name { display: block; color: #1d2433; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sw-name:hover { color: var(--brand); text-decoration: none; }
.sw-sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
.sw-when { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.sw-when svg { color: #8a93a2; }
.sw-cell-to { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sw-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: #eef0f4; font-size: 13px; }
.sw-more { padding: 2px 8px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: 13px; font-weight: 500; }
.sw-cell-files { display: flex; gap: 10px; }
.sw-file-icon { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); cursor: default; }
.sw-file-icon svg { display: block; }
.sw-status { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.sw-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sw-status.ok { color: #18794e; }
.sw-status.bad { color: #b42318; }
.sw-cell-actions { display: flex; justify-content: flex-end; gap: 4px; }
.sw-cell-actions form { margin: 0; }
.sw-icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #5f6b7c; cursor: pointer; }
.sw-icon:hover { background: #eef2ff; color: var(--brand); text-decoration: none; }
.sw-icon[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; padding: 5px 9px; border-radius: 4px; background: #1d2433; color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; }
.sw-error { grid-column: 2 / -1; margin-top: 8px; padding: 8px 12px; border-left: 3px solid #f04438; background: #fef3f2; color: #912018; font-size: 13px; }
.sw-empty { max-width: 560px; margin: 30px auto; padding: 40px 30px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.sw-empty h2 { font-size: 18px; margin: 14px 0 6px; }
.sw-empty p { color: var(--muted); margin: 0 0 20px; }
.sw-empty-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff1e8; color: #f26a1b; }
.sw-empty-icon svg { width: 26px; height: 26px; }
@media (max-width: 1000px) {
    .sw-row-head { display: none; }
    .sw-row { grid-template-columns: 1fr auto; row-gap: 10px; padding: 16px; }
    .sw-cell-main { grid-column: 1; grid-row: 1; }
    .sw-cell-toggle { grid-column: 2; grid-row: 1; }
    .sw-cell-when, .sw-cell-to, .sw-cell-files, .sw-cell-last, .sw-error { grid-column: 1 / -1; }
    .sw-cell-actions { grid-column: 1 / -1; justify-content: flex-start; margin-left: -8px; }
}
@media (max-width: 640px) { .sw-doc { display: none; } }
@media (max-width: 640px) {
    .sw-grid-2 { grid-template-columns: 1fr; }
    .sw-head, .sw-body, .sw-foot { padding-left: 16px; padding-right: 16px; }
    .sw-btn { width: 100%; }
}
@media (max-width: 640px) { .sw-logo { grid-template-columns: 1fr; } }
.sw-row-head > span:first-child { text-align: center; }

/* Motivo de Descartado / Perdido */
.lead-reason { margin: 4px 0 2px; color: #475467; font-size: 14px; }
.row-reason { max-width: 190px; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-row .row-reason { max-width: none; }
.rd { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.rd::backdrop { background: rgba(15, 23, 42, .45); }
.rd-box { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.rd-box h2 { margin: 0; font-size: 19px; }
.rd-sub { margin: -10px 0 0; color: var(--muted); font-size: 13px; }
.rd-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.rd-cancel { border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; }
.rd-cancel:hover { color: #1d2433; }
.rd .sw-btn { min-width: 130px; width: auto; }
.rd .dup-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.rd .dup-field input, .rd .dup-field select { width: 100%; font-weight: 400; }
.rd .dup-other { margin: -8px 0 0; }
.rd .del-leads { display: flex; gap: 8px; align-items: center; margin: -4px 0 4px; font-weight: 600; }
.rd .del-leads[hidden] { display: none; }
.scheme-dialog { width: min(640px, calc(100vw - 32px)); }
.scheme-dialog fieldset { border: 0; margin: 0; min-width: 0; }
.scheme-table th, .scheme-table td { padding: 8px; vertical-align: middle; }
.scheme-table select { width: 100%; min-width: 0; }
.scheme-warn { margin: -6px 0 0; padding: 8px 12px; border-radius: 8px; background: #fff7ed; color: #9a3412; }

/* Adjuntos de la automatización */
.sw-attach { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #e4e7ec; border-radius: 6px; background: #fafbfc; }
.sw-attach-title { font-size: 13px; color: var(--muted); }
.sw-attach-row { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #1d2433; }
.sw-attach-row small { display: block; color: var(--muted); font-size: 12px; }
.sw-attach-row.sw-toggle { gap: 12px; }
.sw-attach-row.sw-toggle i { flex: none; order: 3; margin-left: auto; }
.sw-attach-row .sw-onoff { order: 4; min-width: 20px; font-size: 13px; color: #8a93a2; }
.sw-attach-row input:checked ~ .sw-onoff { color: #2e7d4f; }
.sw-file { flex: none; display: inline-grid; place-items: center; width: 38px; height: 26px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.sw-file-pdf { background: #d92d20; }
.sw-file-xls { background: #1d7a45; }
.sw-wa { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
/* Programar reporte: bloque «WhatsApp de Direnet» (como Adjuntos) y números como etiquetas. */
.sw-file-wa { background: #25d366; }
.sw-file-mail { background: var(--brand, #0055f8); font-size: 14px; }
.phone-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; min-height: 44px; border: 1px solid var(--field-line, #d0d5dd); border-radius: 6px; background: #fff; }
.phone-chips-empty { color: var(--muted); font-size: 13px; }
.wa-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sw-wa .sw-consent { margin-top: 12px; }
.sw-from-note { display: block; margin: -10px 0 16px; }
.sw-known { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sw-known[hidden], .sw-known button[hidden] { display: none; }
.sw-known button { border: 1px dashed #c7d7fe; border-radius: 999px; padding: 4px 10px; background: #fff; color: var(--brand-strong); font-size: 13px; cursor: pointer; }
.sw-known button:hover { background: var(--brand-soft); border-style: solid; }
.sw-add { border: 0; border-radius: 6px; padding: 9px 16px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; cursor: pointer; }
.sw-add:hover { background: #d6e2ff; }
.wa-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; background: #efeae2; }
.wa-bubble { max-width: 460px; padding: 10px 12px; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.45; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); overflow-wrap: anywhere; }
.wa-bubble .sw-file { vertical-align: middle; margin-bottom: 6px; }
.wa-bubble small { display: block; margin-top: 6px; color: #667781; font-size: 12px; }
.sw-warn { margin: 0; padding: 10px 12px; border-radius: 6px; background: #fff7ed; color: #9a3412; font-size: 13px; }
.sw-consent-note { margin-top: -18px; }
.sw-chip.sw-chip-wa { background: #e7f8ee; color: #146c3b; }
.sw-attach-link { align-self: flex-start; font-size: 13px; }
.tag-internal { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fff1e8; color: #c2410c; font-size: 12px; font-weight: 600; vertical-align: middle; }
.edited-mark { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
h1 .edited-mark { font-size: 13px; }

.ev-reason { font-size: 14px; color: var(--text); margin-top: 2px; }
.ev-reason b { font-weight: 600; }

.conn-perm { max-width: 520px; border: 1px solid #fed7aa; background: #fff7ed; border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; justify-items: start; margin: 4px 0; }
.conn-perm p { margin: 0; font-size: 14px; }
.conn-perm[hidden] { display: none; }

.gsc-block > .kpis { margin-top: 6px; }
.gsc-block .report-grid, .gsc-tables { margin-top: 14px; }
.gsc-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .gsc-tables { grid-template-columns: 1fr; } }
.gsc-table .num { text-align: right; white-space: nowrap; }
.gsc-table .gsc-key { max-width: 320px; overflow-wrap: anywhere; }
.section-title { font-size: 18px; margin: 22px 0 10px; }

/* Revisión de tablas en celular */
.gsc-tables > *, .report-grid > * { min-width: 0; }
@media (max-width: 600px) {
    .sched-row { grid-template-columns: 92px minmax(0, 1fr) 12px minmax(0, 1fr); }
    .leads-table .wa-link { white-space: nowrap; }
    .leads-table .contact-line .muted { overflow-wrap: anywhere; }
    .grid-2 > * { min-width: 0; }
    .color-row, .swatches { flex-wrap: wrap; }
    .launcher-pick { grid-template-columns: 1fr; }
}

.clients-table td { vertical-align: middle; }
.clients-table input[name=name] { min-width: 170px; }
.clients-table input[name=slug] { min-width: 130px; }
.clients-table td.nowrap label.inline, .clients-table .services-cell label.inline { display: flex; margin: 2px 0; }
/* Módulos y Reportes plegados: la fila queda corta y solo crece la que se abre. */
.cl-pick summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #dbe3f0; border-radius: 999px; background: #fff; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.cl-pick summary::-webkit-details-marker { display: none; }
.cl-pick summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.cl-pick[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.cl-pick summary:hover, .cl-pick[open] summary { background: #f1f5ff; }
.cl-pick-body { margin-top: 8px; }
.clients-table td > .pill { margin-left: 6px; }
@media (max-width: 1400px) { .topbar nav a { padding: 8px 9px; } }

/* ---------- Chat de WhatsApp ---------- */
/* Globos de «te toca» (Leads y Bandeja): rojos con números blancos, todos iguales (David, 2026-11-11; el amarillo no se leía). */
.nav-count, .tab-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.nav-count[hidden], .tab-count[hidden] { display: none; }
.tabbar.tabbar-5 { grid-template-columns: repeat(5, 1fr); }
.tabbar a { position: relative; }
.tab-count { position: absolute; top: 0; left: calc(50% + 6px); }
.chat-app { position: relative; display: grid; grid-template-columns: clamp(300px, 22vw, 420px) minmax(0, 1fr) clamp(270px, 20vw, 380px); height: var(--chat-desk-height, calc(100vh - 110px)); min-height: 520px; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.container:has(.chat-app) { padding-bottom: 0; }
.chat-app:not(.has-chat) { grid-template-columns: clamp(300px, 22vw, 420px) minmax(0, 1fr); }
.chat-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 8px; }
.chat-side-head h1 { font-size: 26px; margin: 0; }
.chat-side-tools { display: flex; align-items: center; gap: 4px; position: relative; }
/* ↻ Revisar correo: gira mientras revisa; el resultado sale un momento debajo. */
.chat-mail-check.is-spinning svg { animation: mail-spin 1s linear infinite; }
@keyframes mail-spin { to { transform: rotate(360deg); } }
.chat-mail-check-msg { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px 10px; border-radius: 8px; background: #0f1a3d; color: #fff; font-size: 12px; white-space: nowrap; }
.chat-icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.chat-icon-btn[hidden] { display: none; }
.chat-search { position: relative; padding: 0 16px 10px; }
.chat-search input { width: 100%; padding: 9px 14px 9px 40px; border: 0; border-radius: 999px; background: var(--bg); font-size: 15px; }
.chat-search input:focus { background: #fff; }
.chat-search-ico { position: absolute; left: 30px; top: 10px; color: var(--muted); pointer-events: none; }
/* La ⓧ para borrar la búsqueda (la de iPhone no sale siempre): un círculo gris a la derecha, con área de toque grande. */
.chat-search input { padding-right: 44px; }
.chat-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.chat-search-clear { position: absolute; right: 22px; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #94a3b8; cursor: pointer; }
.chat-search-clear:hover { color: #64748b; }
.chat-search-clear[hidden] { display: none; }
/* Buscador y "+ Contacto" en el mismo renglón (Bandeja). */
.chat-search-row { display: flex; align-items: flex-start; gap: 8px; padding-right: 16px; }
.chat-search-row .chat-search { flex: 1; min-width: 0; padding-right: 0; }
.chat-search-row .chat-search-clear { right: 6px; }
.chat-search-row script { display: none; }
.chat-add-contact { flex: none; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 0; white-space: nowrap; display: inline-flex; align-items: center; }
.chat-add-contact:hover { background: color-mix(in srgb, var(--brand) 16%, white); text-decoration: none; }
/* Pestañas como chips de WhatsApp: una sola línea que se desliza de lado. */
.chat-filters { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chat-filters::-webkit-scrollbar { display: none; }
.chat-filters a { flex: none; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: #475569; white-space: nowrap; text-decoration: none; }
.chat-filters a:hover { background: var(--bg); text-decoration: none; }
.chat-filters a span { font-size: 12px; opacity: .7; }
.chat-filters a.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); font-weight: 600; }
.chat-pickers { display: flex; gap: 8px; padding: 0 16px 10px; }
.chat-inbox-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.chat-inbox-pick select { flex: 1; min-width: 0; padding: 5px 30px 5px 12px; border-radius: 999px; text-overflow: ellipsis; font-size: 13px; color: #475569; }
.chat-list { flex: 1; overflow-y: auto; border-top: 1px solid var(--line); }
.chat-list-empty { padding: 24px 18px; color: var(--muted); text-align: center; }
.chat-list-section { margin: 0; padding: 14px 16px 6px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
/* Renglón como en WhatsApp: foto grande y la raya empieza después de la foto. */
.chat-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--text); text-decoration: none; }
.chat-item::after { content: ""; position: absolute; left: 76px; right: 0; bottom: 0; border-bottom: 1px solid #eef1f5; }
.chat-item:hover { background: #f8fafc; text-decoration: none; }
.chat-item.active { background: var(--brand-soft); }
.chat-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #dcfce7; color: #166534; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.chat-item .chat-avatar { width: 48px; height: 48px; font-size: 19px; }
.chat-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-top, .chat-item-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-item-top b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-top time { flex: none; font-size: 12px; color: var(--muted); }
.chat-preview { min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-ico { vertical-align: -2px; margin-right: 3px; }
.chat-ticks { margin-right: 3px; font-size: 13px; letter-spacing: -3px; padding-right: 3px; color: #94a3b8; }
.chat-ticks-read { color: #53bdeb; }
.chat-ticks-failed { color: var(--danger); letter-spacing: 0; font-weight: 700; }
.chat-item.is-unread .chat-preview { font-weight: 500; color: var(--text); }
.chat-item.is-unread time { color: var(--brand); font-weight: 600; }
/* Nuevo contra ya abierto, como en Gmail: lo no leído va en negritas, con fondo azul claro y raya a la izquierda; lo leído, ligero. */
.chat-item:not(.is-unread):not(.active) .chat-item-top b { font-weight: 500; }
.chat-item:not(.is-unread) .chat-item-subject { font-weight: 400; color: #475569; }
.chat-item.is-unread:not(.active) { background: #eef4ff; box-shadow: inset 4px 0 0 var(--brand); }
.chat-item.is-unread .chat-item-top b { font-weight: 800; color: var(--text); }
.chat-item.is-unread .chat-item-subject { font-weight: 700; color: var(--text); }
.chat-list-summary { margin: 0; padding: 10px 16px 6px; font-size: 13px; color: #475569; }
.chat-list-summary b { color: var(--brand); font-weight: 700; }
/* "5 nuevos" como en Gmail: pastilla azul. En las pestañas del celular solo cabe el número. */
.new-pill { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; vertical-align: 1px; white-space: nowrap; }
.new-pill[hidden] { display: none; }
.chat-list-summary .new-pill { margin-left: 0; text-decoration: none; }
.chat-list-summary a.new-pill:hover { filter: brightness(1.1); }
/* En la pestaña elegida (naranja) la pastilla va blanca con el número en naranja, no azul sobre naranja. */
.inbox-channels a.active .new-pill { background: #fff; color: #ea580c; }
/* Las pestañas siempre en un renglón: el número va pegado al nombre y cada pestaña toma el ancho que necesita. */
nav.inbox-channels a { white-space: nowrap; }
/* La columna de la lista puede ser angosta también en la computadora (ventana chica): ahí, como en el celular, las
   pestañas solo llevan el número y los filtros se compactan. Se mide la columna, no la pantalla. */
.chat-side { container-type: inline-size; }
@container (max-width: 440px) {
    .inbox-channels .new-pill-word { display: none; }
    nav.inbox-channels a { flex: 1 1 auto; padding: 7px 3px; font-size: 12.5px; letter-spacing: -.1px; }
    .inbox-channels .new-pill { min-width: 18px; padding: 0 5px; margin-left: 3px; font-size: 11px; line-height: 17px; text-align: center; }
    .chat-filters { gap: 6px; }
    .chat-filters a { padding: 5px 9px; font-size: 13px; }
    /* Encabezado: título más chico y botones juntos para que quepan Disponible, campana, ↻ y engrane. */
    .chat-side-head { padding: 12px 12px 8px; gap: 6px; }
    .chat-side-head h1 { font-size: 22px; }
    .chat-side-tools { gap: 2px; }
    .chat-side .chat-side-tools .btn-sm { padding-left: 7px; padding-right: 7px; }
    .chat-side .chat-avail-pill { padding: 4px 9px; font-size: 12px; gap: 5px; }
}
/* La columna en su ancho mínimo (300 px): "Disponible" queda como su puntito de color (el texto sigue en el título). */
@container (max-width: 350px) {
    .chat-side .chat-avail-pill { font-size: 0; gap: 0; padding: 9px; }
    .chat-side .chat-avail-dot { width: 10px; height: 10px; }
}
@media (max-width: 760px) {
    .inbox-channels .new-pill-word { display: none; }
    nav.inbox-channels a { flex: 1 1 auto; padding: 7px 3px; font-size: 12.5px; letter-spacing: -.1px; }
    .inbox-channels .new-pill { min-width: 18px; padding: 0 5px; margin-left: 3px; font-size: 11px; line-height: 17px; text-align: center; }
}
.chat-unread { flex: none; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.chat-item-meta { font-size: 12px; color: var(--muted); }
.chat-from-ad { color: #1877f2; font-weight: 500; }
.chat-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: middle; white-space: nowrap; }
.chat-pill-closed { background: #fee2e2; color: #b91c1c; }
.chat-pill-expired { background: #ffedd5; color: #9a3412; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background-color: #efeae2; background-image: radial-gradient(rgba(84, 70, 50, .07) 1px, transparent 1.3px); background-size: 20px 20px; }
.chat-placeholder { align-items: center; justify-content: center; color: var(--muted); padding: 24px; text-align: center; }
.chat-placeholder-art { display: block; width: 280px; max-width: 80%; height: auto; margin: 0 auto 8px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.chat-head .chat-avatar { width: 42px; height: 42px; }
.chat-head-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-head-name b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-actions .btn { border-radius: 999px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.chat-head-actions { margin: 0; }
.chat-back { display: none; font-size: 30px; line-height: 1; padding: 0 6px 4px 0; color: var(--text); text-decoration: none; }
.chat-thread { flex: 1; overflow-y: auto; padding: 14px 7% 18px; display: flex; flex-direction: column; gap: 3px; }
.chat-day-group { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.chat-day { position: sticky; top: 4px; z-index: 2; text-align: center; margin: 10px 0 6px; }
.chat-day span { display: inline-block; background: #fff; color: #54656f; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.chat-event { display: flex; justify-content: center; margin: 8px 0; font-size: 12px; }
.chat-event span { max-width: 85%; text-align: center; padding: 5px 12px; border-radius: 8px; background: #fff; color: #54656f; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.chat-event-closed span { background: #fee2e2; color: #991b1b; }
.chat-event-reopened span { background: #dcfce7; color: #166534; }
/* Globos como en WhatsApp: los nuestros en verde claro, los de la persona en blanco, sobre el fondo beige. */
.chat-msg { display: flex; }
.chat-msg.is-first { margin-top: 12px; }
.chat-out, .chat-note { justify-content: flex-end; }
.chat-bubble { position: relative; max-width: min(65%, 560px); padding: 7px 10px 7px 11px; border-radius: 9px; background: #fff; color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; white-space: normal; font-size: 15px; line-height: 1.4; }
.chat-bubble::after { content: ""; display: block; clear: both; }
.chat-out .chat-bubble { background: #d9fdd3; }
.chat-note .chat-bubble { background: #fff7d6; border: 1px dashed #e5c76b; }
.chat-out.is-failed .chat-bubble { background: #fee2e2; }
.chat-in.is-first .chat-bubble { border-top-left-radius: 3px; }
.chat-out.is-first .chat-bubble, .chat-note.is-first .chat-bubble { border-top-right-radius: 3px; }
.chat-in.is-first .chat-bubble::before, .chat-out.is-first .chat-bubble::before { content: ""; position: absolute; top: 0; width: 9px; height: 12px; background: inherit; }
.chat-in.is-first .chat-bubble::before { left: -7px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.chat-out.is-first .chat-bubble::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.chat-who { display: block; font-size: 12px; font-weight: 600; color: var(--brand); }
.chat-note .chat-who { color: #a16207; }
.chat-ref { display: block; font-size: 12px; color: #1877f2; background: #eef4ff; border-radius: 6px; padding: 3px 7px; margin: 2px 0 5px; }
.chat-meta { float: right; margin: 6px 0 -4px 12px; font-size: 11px; line-height: 1.4; color: #667781; white-space: nowrap; }
.chat-tick { letter-spacing: -3px; margin-left: 2px; padding-right: 3px; }
.chat-tick.tick-read { color: var(--brand); }
.chat-tick.tick-failed { color: var(--danger); letter-spacing: 0; font-weight: 700; }
.chat-fail { display: block; font-size: 12px; color: #b91c1c; }
.chat-composer { background: #f8fafc; border-top: 1px solid var(--line); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-window { font-size: 12px; color: var(--muted); text-align: center; }
.chat-composer.window-closed .chat-window { color: #b45309; background: #fff7ed; border-radius: 6px; padding: 6px 8px; }
.chat-error { font-size: 13px; color: #b91c1c; background: #fef2f2; border-radius: 6px; padding: 6px 8px; }
/* Tipo de mensaje como chips; el botón de radio queda escondido pero sigue funcionando con teclado. */
.chat-mode { display: flex; align-items: center; gap: 6px; font-size: 13px; overflow-x: auto; scrollbar-width: none; }
.chat-mode::-webkit-scrollbar { display: none; }
.chat-mode label { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #475569; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chat-mode label[hidden] { display: none; }
.chat-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chat-mode label:has(input:checked) { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); font-weight: 600; }
.chat-mode label:has(input[value=note]:checked) { background: #fff7d6; border-color: #e5c76b; color: #a16207; }
.chat-mode label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
.chat-mode .chat-hint { margin-left: auto; white-space: nowrap; }
/* La caja de escribir es una tarjeta: el texto arriba y los botones abajo, como en la app de Claude. */
.chat-tools { display: grid; grid-template-columns: auto auto auto 1fr auto; grid-template-areas: "reply reply reply reply reply" "text text text text text" "attach quick emoji . send"; align-items: center; gap: 8px 6px; padding: 8px 10px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 26px; box-shadow: 0 4px 16px -6px rgba(15, 26, 61, .16); }
.chat-tools:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, white); }
.chat-tools .chat-attach { grid-area: attach; }
.chat-tools .chat-quick { grid-area: quick; }
.chat-tools #chat-send { grid-area: send; }
.chat-composer textarea { grid-area: text; width: 100%; min-width: 0; resize: none; min-height: 56px; max-height: 180px; padding: 6px 8px 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; line-height: 1.45; }
/* Sin el marco azul de los demás campos: la caja de afuera ya marca que se está escribiendo. */
.chat-composer textarea:focus { outline: none; box-shadow: none; }
.chat-composer.is-note .chat-tools { background: #fffbea; border-color: #e5c76b; }
.chat-composer.is-template .chat-tools { grid-template-areas: "attach quick emoji . send"; }
.chat-tools .chat-emoji-btn { grid-area: emoji; }
.chat-composer.is-template .chat-emoji-btn { display: none; }
.chat-tools .chat-icon-btn { width: 38px; height: 38px; flex: none; color: #475569; background: #f1f5f9; border-color: transparent; border-radius: 999px; }
.chat-attach-btn { width: 38px; height: 38px; }
.chat-tools .chat-attach-btn { background: #f1f5f9; border-color: transparent; color: #475569; }
#chat-send { flex: none; height: 38px; border-radius: 999px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; }
#chat-send::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5l2.5 7.2L14 12l-8.5 1.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5l2.5 7.2L14 12l-8.5 1.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.chat-hint { flex: 1; }
.chat-quick { position: relative; }
.chat-quick summary { list-style: none; }
.chat-quick summary::-webkit-details-marker { display: none; }
.chat-quick-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; width: 320px; max-height: min(380px, 60vh); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px -12px rgba(15, 26, 61, .35); padding: 0 0 6px; }
.chat-quick-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.chat-quick-head b { font-size: 15px; }
.chat-quick-head a { font-size: 13px; }
.chat-quick-sec { padding: 4px 6px 0; }
.chat-quick-sec + .chat-quick-sec { border-top: 1px solid var(--line); margin-top: 4px; }
.chat-quick-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 8px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.chat-quick-group span { padding: 2px 8px; border-radius: 999px; }
.chat-quick-company .chat-quick-group span { background: var(--brand-soft); color: var(--brand); }
.chat-quick-mine .chat-quick-group span { background: #f1f5f9; color: #475569; }
.chat-quick-group a { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.chat-quick-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer; color: var(--text); }
.chat-quick-menu button:hover { background: #f1f5f9; }
.chat-quick-menu button span { font-size: 12px; color: var(--muted); }
.chat-quick-empty { margin: 2px 9px 6px; font-size: 13px; color: var(--muted); }
.chat-gear { position: relative; }
.chat-gear summary { list-style: none; padding: 6px 8px; }
.chat-gear summary::-webkit-details-marker { display: none; }
.chat-gear-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(15, 26, 61, .35); padding: 4px; }
.chat-gear-menu a { padding: 8px 10px; border-radius: 7px; color: var(--text); text-decoration: none; }
.chat-gear-menu a:hover, .chat-gear-menu a:focus-visible { background: #f1f5f9; }
.quick-lists { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.quick-scope { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.quick-scope legend { font-weight: 600; margin-bottom: 4px; }
.chat-info { border-left: 1px solid var(--line); overflow-y: auto; padding: 6px 16px; }
.chat-info section { padding: 12px 0; border-bottom: 1px solid #f1f3f6; }
.chat-info section:last-child { border-bottom: 0; }
.chat-info h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.chat-info p { margin: 0 0 6px; }
.chat-info select { width: 100%; }
.chat-info .chat-owner { margin-top: 10px; }
.chat-contact-data { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.chat-panel-tool { margin-top: 4px; }
.chat-panel-tool summary { list-style: none; cursor: pointer; color: var(--brand); font-size: 14px; font-weight: 500; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.chat-panel-tool summary:hover { text-decoration: underline; }
.chat-panel-tool summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.chat-panel-tool summary::-webkit-details-marker { display: none; }
.chat-panel-tool summary::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--brand); transition: transform .15s; }
.chat-panel-tool[open] summary::before { transform: rotate(90deg); }
.chat-panel-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.chat-panel-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.chat-panel-form label.inline { flex-direction: row; align-items: flex-start; gap: 6px; }
.chat-panel-form input:not([type=checkbox]):not([type=radio]) { width: 100%; min-width: 0; }
.chat-panel-form > .btn, .chat-extra-list .btn { align-self: flex-start; }
.chat-extra-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.chat-link-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-link-results .btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; height: auto; white-space: normal; }
.chat-link-results .btn span { font-size: 12px; color: var(--muted); font-weight: 400; word-break: break-word; }
.quick-form { max-width: 720px; }
.chat-info-toggle, .chat-info-close { display: none; }
@media (max-width: 1100px) {
    .chat-app, .chat-app:not(.has-chat) { grid-template-columns: 300px minmax(0, 1fr); }
    .chat-info { display: none; }
    .chat-info-toggle { display: inline-flex; }
    .chat-app.show-info .chat-info { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 88%); background: #fff; z-index: 30; box-shadow: -12px 0 30px -14px rgba(15, 26, 61, .35); }
    .chat-app.show-info .chat-info-close { display: inline-flex; float: right; margin-top: 8px; }
}
@media (max-width: 760px) {
    /* En el celular Chats ocupa justo el espacio entre la barra de arriba y la de abajo (las medidas las pone la pantalla). */
    .container:has(.chat-app) { padding: 0; }
    /* Que la página no se mueva al jalar: solo se desliza la lista o la conversación. */
    html:has(.chat-app), body:has(.chat-app) { height: 100%; overflow: hidden; overscroll-behavior: none; }
    .chat-list, .chat-thread { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .chat-app, .chat-app:not(.has-chat) { position: fixed; left: var(--chat-left, 0); width: var(--chat-width, 100%); top: var(--chat-top, 61px); height: var(--chat-height, calc(100dvh - 129px - env(safe-area-inset-bottom))); grid-template-columns: minmax(0, 1fr); min-height: 0; border: 0; border-radius: 0; z-index: 55; }
    /* Mientras se escribe, la barra de abajo se esconde y la conversación usa todo lo que queda arriba del teclado. */
    body.chat-typing .tabbar, body.kb-open .tabbar { display: none; }
    /* Los avisos ("Contacto creado…") en Chats y la Bandeja: la conversación tapa la página, así que salen flotando
       arriba de la barra de abajo y se van solos. */
    .container:has(.chat-app) > .flash { position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 70; margin: 0; box-shadow: 0 10px 30px -10px rgba(15, 26, 61, .45); animation: flash-away .3s ease 7s forwards; }
    /* Con letra menor a 16px, el iPhone hace zoom al escribir y recorre la pantalla. */
    .chat-composer input, .chat-composer select, .chat-composer textarea, .chat-search input, .chat-inbox-pick select { font-size: 16px; }
    /* En el celular se ve la lista o la conversación abierta: un chat o, en la Bandeja, una forma (has-form) o un correo (has-mail). */
    .chat-app:is(.has-chat, .has-form, .has-mail) .chat-side { display: none; }
    .chat-app:not(.has-chat):not(.has-form):not(.has-mail) .chat-main { display: none; }
    .chat-app:is(.has-chat, .has-form, .has-mail) { grid-template-rows: minmax(0, 1fr); }
    .chat-back { display: inline-block; }
    .chat-thread { padding: 8px 12px 12px; }
    .chat-bubble { max-width: 85%; }
    .chat-hint { display: none; }
    .chat-composer:not(.window-closed) .chat-window { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-head { padding: 6px 8px; gap: 8px; }
    .chat-head .chat-avatar { width: 38px; height: 38px; }
    .chat-head-name { cursor: pointer; }
    .chat-head-actions .btn { padding: 5px 10px; font-size: 13px; }
    #chat-send { padding: 0; width: 38px; justify-content: center; font-size: 0; }
    .chat-tools .chat-icon-btn, .chat-attach-btn { width: 38px; }
    .chat-to { display: none; }
    .chat-mode label .muted { display: none; }
}
.chat-attach { position: relative; }
.chat-attach summary { list-style: none; }
.chat-attach summary::-webkit-details-marker { display: none; }
.chat-attach-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.chat-attach[open] .chat-attach-btn svg { transform: rotate(45deg); }
.chat-attach-btn svg { transition: transform .15s; }
.chat-attach.is-off .chat-attach-btn { opacity: .45; }
.chat-attach-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25; min-width: 250px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(15, 26, 61, .35); padding: 6px; }
.chat-attach-menu button { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; text-align: left; }
.chat-attach-menu button:hover, .chat-attach-menu button:focus-visible { background: #f1f5f9; }
.att-ico { width: 22px; height: 22px; display: inline-flex; flex: 0 0 auto; }
.att-text { display: flex; flex-direction: column; line-height: 1.25; }
.att-text small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.att-ico svg { width: 22px; height: 22px; }
.att-doc { color: #7c3aed; }
.att-photo { color: var(--brand); }
.att-cam { color: #e11d48; }
.att-audio { color: #ea580c; }
@media (pointer: fine) { .chat-attach-menu .att-camera { display: none; } }
.chat-file { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 8px; padding: 6px 8px; }
.chat-file[hidden] { display: none; }
.chat-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-doc { display: flex; align-items: center; gap: 8px; min-width: 220px; background: rgba(0, 0, 0, .04); border-radius: 8px; padding: 8px; margin: 2px 0 4px; color: var(--text); text-decoration: none; }
.chat-doc:hover { background: rgba(0, 0, 0, .07); text-decoration: none; }
.chat-doc-icon { flex: none; width: 38px; height: 38px; border-radius: 6px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chat-doc-get { font-size: 12px; color: var(--brand-strong); font-weight: 600; }
.chat-media-img { display: block; margin: 2px 0 4px; }
.chat-media-img img { display: block; max-width: 280px; max-height: 320px; width: auto; border-radius: 8px; }
.chat-media-audio { width: 260px; max-width: 100%; margin: 2px 0; }
.chat-media-video { max-width: 280px; border-radius: 8px; margin: 2px 0; }
.chat-media-get { display: block; margin: 2px 0 4px; }
@media (max-width: 760px) { .chat-media-img img, .chat-media-video { max-width: 100%; } .chat-doc { min-width: 0; } }
.chat-tpl { display: flex; flex-direction: column; gap: 6px; }
.chat-tpl[hidden] { display: none; }
.chat-tpl-msg { margin: 0; }
.chat-tpl select { width: 100%; }
.chat-tpl-params { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-tpl-params label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.chat-tpl-preview, .tpl-bubble { background: #d9fdd3; border-radius: 10px; padding: 8px 10px; font-size: 14px; max-height: 160px; overflow-y: auto; white-space: normal; overflow-wrap: anywhere; }
.tpl-footer { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.tpl-layout { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tpl-form label { display: flex; flex-direction: column; gap: 4px; }
.tpl-item { padding: 12px 0; border-bottom: 1px solid #f1f3f6; }
.tpl-item:last-child { border-bottom: 0; }
.tpl-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.tpl-item .tpl-bubble { max-width: 520px; max-height: none; }
@media (max-width: 900px) { .tpl-layout { grid-template-columns: 1fr; } }
.tpl-form select { width: 100%; min-width: 0; }
.tpl-form .grid-2 > label { min-width: 0; }
.chat-composer.is-template .chat-hint, .chat-composer.is-template .chat-quick, .chat-composer.is-template a.btn-ghost { display: none; }
.chat-composer.is-template #chat-send { margin-left: auto; font-size: 14px; width: auto; padding: 0 16px; }
.quick-actions { margin-left: auto; display: inline-flex; gap: 2px; }
.quick-actions form { margin: 0; }
.quick-actions .quick-delete:hover { background: #fef2f2; color: #b91c1c; }
.quick-var { background: #fff; border-radius: 4px; padding: 0 3px; color: #15803d; font-weight: 600; }
.quick-form-actions { display: flex; gap: 8px; }
.tpl-item.is-editing { background: #f8fafc; margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }

/* Cada tipo en su propio bloque con su color: Marketing naranja, Utilidad azul, Autenticación morado. */
.tpl-cat-marketing { --tc: #c2410c; --tc-bg: #fff4ec; --tc-line: #fed7aa; }
.tpl-cat-utility { --tc: var(--brand-strong); --tc-bg: #eef3fe; --tc-line: #bfd3fb; }
.tpl-cat-authentication { --tc: #6d28d9; --tc-bg: #f5f0ff; --tc-line: #ddd0fb; }
.tpl-cat-other { --tc: #475569; --tc-bg: #f8fafc; --tc-line: #e2e8f0; }
.tpl-cat { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1px solid var(--tc-line); background: var(--tc-bg); color: var(--tc); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.tpl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tpl-jump .tpl-cat { padding: 4px 12px; font-size: 13px; text-decoration: none; }
.tpl-group { margin: 0 0 18px; border: 1px solid var(--tc-line); border-left: 5px solid var(--tc); border-radius: 12px; overflow: hidden; scroll-margin-top: 80px; }
.tpl-group:last-child { margin-bottom: 0; }
.tpl-group-head { padding: 10px 14px; background: var(--tc-bg); border-bottom: 1px solid var(--tc-line); }
.tpl-group-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--tc); }
.tpl-group-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--tc); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.tpl-group-head p { margin: 2px 0 0; font-size: 13px; color: #475569; }
.tpl-group .tpl-item { padding: 12px 14px; }
.tpl-actions { display: flex; gap: 6px; margin-top: 8px; }
.tpl-actions form { margin: 0; }
.tpl-del { color: #b91c1c; }

/* Editor de widgets: errores al guardar, junto al campo */
#widget-form .is-bad:not(section) { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
#widget-form section.is-bad { border-color: #f87171; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
#widget-form .field-err { display: block; color: #b91c1c; font-size: 13px; font-weight: 500; margin-top: 4px; }
#widget-form section > .field-err { margin: -4px 0 10px; }
#save-note.is-err { color: #b91c1c; font-weight: 600; }
.req-legend { margin: 0 0 10px; }

/* Usuarios: qué chats ve cada vendedor */
.chat-access summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #dbe3f0; border-radius: 999px; background: #fff; cursor: pointer; white-space: nowrap; color: var(--brand); font-weight: 600; font-size: 14px; list-style: none; }
.chat-access summary::-webkit-details-marker { display: none; }
.chat-access summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.chat-access[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.chat-access { display: block; max-width: 190px; }
.chat-access summary { max-width: 100%; box-sizing: border-box; }
.chat-access summary span { overflow: hidden; text-overflow: ellipsis; }
.chat-access-body { position: fixed; z-index: 60; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; width: 270px; box-sizing: border-box; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 6px 18px -10px rgba(15, 26, 61, .25); }
.chat-access fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-access fieldset[disabled] { opacity: .45; }
.chat-opt-group { margin-top: 4px !important; padding-top: 6px !important; border-top: 1px solid #eef2f7 !important; }
.chat-opt-group .chat-opt-group { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.chat-opt-group .chat-opt-group[data-chat-inboxes] { margin-top: 4px !important; padding-top: 6px !important; border-top: 1px solid #eef2f7 !important; }
.chat-opt-title { padding: 2px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.chat-opt { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; font-weight: 400; }
.chat-opt:hover { background: #f5f8fd; }
.chat-opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
.chat-opt span { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.chat-opt b { font-size: 14px; font-weight: 500; color: #1e293b; }
.chat-opt small { font-size: 12px; color: #64748b; }
.chat-opt-note { margin: 4px 8px; font-size: 13px; color: #64748b; }
.chat-opt-foot { margin: 4px 0 0; padding: 6px 8px 2px; border-top: 1px solid #eef2f7; font-size: 12px; color: #94a3b8; }

/* Widget de WhatsApp: un solo número o el de cada vendedor */
.phone-mode { border: 0; padding: 0; margin: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.phone-mode legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; padding: 0; }
.phone-mode label.inline { align-items: flex-start; color: var(--text); font-weight: 400; }
.phone-mode label.inline input { margin-top: 3px; flex: none; }
.phone-mode [data-phone-single] { max-width: 320px; }

/* Leads, Contactos y Empresas */
.section-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.section-tabs a { padding: 8px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.section-tabs a:hover { color: var(--text); text-decoration: none; }
.section-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.contacts-table td.clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-edit { align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.company-edit p { flex-basis: 100%; margin: 0; }
.company-kicker { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.company-rename { margin-bottom: 14px; }
.company-cards { display: none; }
.company-people { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; }
.company-people li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f3f6; }
.company-people li:last-child { border-bottom: 0; }
.company-people .cp-main { min-width: 0; overflow-wrap: anywhere; }
.company-people form { flex: none; }
.company-link-title { font-size: 15px; margin: 16px 0 8px; }
.company-delete { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f3f6; }
.company-leads-card { margin-top: 16px; }
@media (max-width: 760px) {
    .companies-table-wrap { display: none; }
    .company-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
    .company-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--text); }
    .company-card:hover { text-decoration: none; }
    .cc-top { display: flex; gap: 8px; align-items: baseline; }
    .cc-name { font-size: 17px; color: var(--brand); min-width: 0; overflow-wrap: anywhere; }
    .cc-time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .cc-meta { color: var(--muted); font-size: 13px; }
}
.company-rename summary { cursor: pointer; color: var(--brand); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.company-rename summary::-webkit-details-marker { display: none; }
.company-rename summary::before { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--brand); transition: transform .15s; }
.company-rename[open] summary::before { transform: rotate(90deg); }
.owner-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.owner-box label.inline { color: var(--text); font-weight: 400; align-items: flex-start; }
.contact-leads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-leads li { padding-bottom: 10px; border-bottom: 1px solid #f1f3f6; }
.contact-leads li:last-child { border-bottom: 0; }
.contact-filters select { width: auto; flex: 0 1 220px; }
@media (max-width: 640px) { .contact-filters input[type=search] { flex-basis: 100%; } .contact-filters select { flex: 1 1 auto; } }
.move-number { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.move-number p { margin: 0; }
.move-number label.inline { align-items: flex-start; color: var(--text); font-weight: 400; }
.move-number label.inline input { margin-top: 3px; flex: none; }
.routing-pick { border: 0; margin: 16px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.routing-pick legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.routing-pick label.inline { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 0; text-align: left; }
.routing-pick label.inline input { flex: none; margin: 3px 0 0; }
.routing-pick label.inline small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; }
.routing-rules { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 0 26px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.routing-rules[hidden] { display: none; }
.rr-block { display: flex; flex-direction: column; gap: 8px; }
.rr-block p { margin: 0; }
.rr-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rr-seg { display: inline-flex; align-self: flex-start; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.form .rr-seg label { display: block; margin: 0; cursor: pointer; }
.rr-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rr-seg span { display: block; padding: 6px 14px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--muted); }
.rr-seg input:checked + span { background: var(--brand); color: #fff; }
.rr-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.rr-people { display: flex; flex-wrap: wrap; gap: 8px; }
.form .rr-person { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 500; font-size: 14px; cursor: pointer; }
.rr-person input { margin: 0; }
.rr-person:has(input:not(:checked)) { color: var(--muted); background: transparent; }
.rr-check { margin-top: 2px !important; }
.rr-person > span { display: inline-flex; align-items: center; }
@media (max-width: 640px) { .routing-rules { margin-left: 0; padding: 14px; } .rr-seg { align-self: stretch; } .form .rr-seg label { flex: 1; text-align: center; } .rr-seg span { padding: 6px 8px; } }
.rr-now { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.chat-avail { margin: 0; }
.chat-avail-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #fecaca; border-radius: 999px; background: #fef2f2; color: #b91c1c; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chat-avail.is-on .chat-avail-pill { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.chat-avail-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-avail-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--danger); }
.chat-avail.is-on .chat-avail-dot { background: var(--ok); }
.chat-push { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 5px 5px 5px 8px; border: 1px solid #dbe4fb; border-radius: 10px; background: #f5f8ff; font-size: 12.5px; line-height: 1.3; color: #334155; }
.chat-push[hidden] { display: none; }
.chat-push-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e3ebfd; color: var(--brand); }
.chat-push-text { flex: 1; min-width: 0; }
.chat-push .btn { flex: none; }
.chat-push .chat-push-go { padding: 3px 10px; font-size: 12.5px; border-radius: 7px; }
.chat-push-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; }
.chat-push-x:hover { background: #e3ebfd; color: #334155; }
#chat-push-bell .bell-slash { display: none; }
#chat-push-bell.is-off { color: #94a3b8; }
#chat-push-bell.is-off .bell-slash { display: inline; }
.avail-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--danger); vertical-align: 1px; }
.avail-dot.is-on { background: var(--ok); }
.channels-cell { white-space: nowrap; }
.users-table th, .users-table td { padding: 8px; vertical-align: middle; }
/* Títulos en una sola línea, con el ícono (i) alineado al texto. */
.users-table th { white-space: nowrap; }
.users-table th .info-tip { vertical-align: -2px; }
.users-table td.u-nochat { white-space: nowrap; }
.users-table input:not([type=checkbox]):not([type=radio]):not([type=color]), .users-table select { min-width: 0; }
.users-table td:first-child { min-width: 170px; }
.users-table td:nth-child(2) { min-width: 150px; }
.users-table select[name=role] { min-width: 120px; }
.users-table input[name=password] { min-width: 90px; }
.users-table td.nowrap { width: 1%; }
.users-table .u-active select { width: 64px; }
.users-table td.u-login { min-width: 84px; font-size: 13px; }
@media (max-width: 1180px) { .users-table .u-login { display: none; } .users-table .channels-cell > div { flex-wrap: wrap; gap: 4px; } }
.users-table .channels-cell > div { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.channel-icons { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.channel-icon { display: inline-flex; }
/* Bandejas de entrada (múltiples bandejas), al estilo de HubSpot */
.inbox-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inbox-pick label { font-weight: 700; font-size: 16px; margin: 0; }
.inbox-pick select { flex: 0 1 320px; min-width: 0; }
.inbox-tabs { display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.inbox-tabs a { padding: 10px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600; text-decoration: none; margin-bottom: -1px; }
.inbox-tabs a:hover { color: var(--text); }
.inbox-tabs a.active { background: var(--card); border-color: var(--line); color: var(--text); }
.inbox-body { border-top-left-radius: 0; }
.inbox-body h2 { margin: 0 0 12px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.inbox-head h2 { margin: 0; }
.inbox-channels td { vertical-align: middle; }
.inbox-channels td.right { text-align: right; }
.inbox-channels .btn-sm { background: transparent; border-color: var(--line); color: var(--danger); }
.connect-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 18px; }
.connect-card { flex: 1 1 200px; max-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; border: 1px solid var(--line); border-radius: 12px; text-align: center; color: var(--text); text-decoration: none; background: var(--card); }
.connect-card, .connect-card:hover { text-decoration: none; }
a.connect-card:hover, a.connect-card:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.connect-card.is-soon { opacity: .55; }
.connect-numbers { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.connect-numbers p { margin: 0 0 4px; }
.connect-number { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 0; font-weight: 400; text-align: left; cursor: pointer; }
.connect-number input { flex: none; margin: 0; }
.connect-number svg { flex: none; }
.connect-number:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.connect-number.is-taken { cursor: not-allowed; background: var(--bg); color: var(--muted); }
.access-list { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 700px) {
    .connect-card { max-width: none; }
    .inbox-pick select { flex: 1 1 100%; }
}
.chat-settings label.inline > span { flex: 1; }
.chat-bot-form h2 { margin: 18px 0 6px; }
.chat-bot-form h2:first-of-type { margin-top: 0; }
/* Switch Activo/Apagado arriba de cada sección (Bot y horario) */
.toggle-sec { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0; }
.toggle-sec .toggle-head h2 { margin: 0; }
.toggle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form label.sw-toggle { flex-direction: row; margin: 0; font-weight: 600; }
.toggle-state { min-width: 64px; font-size: 14px; color: #8a93a2; }
.toggle-state .t-on, .toggle-input:checked ~ .toggle-state .t-off { display: none; }
.toggle-input:checked ~ .toggle-state { color: #2e7d4f; }
.toggle-input:checked ~ .toggle-state .t-on { display: inline; }
.toggle-body { display: flex; flex-direction: column; gap: 12px; }
.toggle-hint { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.toggle-sec:has(.toggle-input:not(:checked)) { background: #f8fafc; }
.toggle-sec:has(.toggle-input:not(:checked)) .toggle-body { opacity: .55; }
.switch-line { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.switch-line input { flex: none; margin: 3px 0 0; }
.hours-sub { font-size: 14px; margin: 12px 0 0; }
.hours-phone { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.hours-phone summary { cursor: pointer; font-size: 14px; }
.hours-phone[open] summary { margin-bottom: 8px; }
.hours-days { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.hours-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hours-day label.inline { display: flex; align-items: center; gap: 6px; width: 120px; margin: 0; font-weight: 400; }
.hours-day input[type=time] { width: auto; padding: 4px 6px; }
@media (max-width: 520px) { .hours-day { gap: 4px 8px; } .hours-day label.inline { width: 100%; } }
.away-box { max-width: 720px; }
.bot-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.bot-number { white-space: nowrap; color: var(--orange); font-size: 22px; font-weight: 700; letter-spacing: .3px; }
.bot-number .muted { font-weight: 400; letter-spacing: 0; }
.away-tags { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.away-tag-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.away-tag-row .away-tag { flex: none; min-width: 150px; text-align: left; }
.away-code { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 2px 2px 8px; background: var(--card); }
.away-code code { font-size: 13px; }
.away-copy { border: 0; background: var(--brand-soft); color: var(--brand-strong); border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.away-info { flex: 1 1 260px; }
.away-tag { border: 1px dashed var(--brand); background: var(--card); color: var(--brand); border-radius: 999px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.away-tag[aria-pressed=true] { border-style: solid; background: var(--brand); color: var(--brand-ink); }
.away-tag[aria-pressed=true]::before { content: '✓ '; }
.away-tag[aria-pressed=false]::before { content: '+ '; }
.away-preview { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.away-example { margin-top: 8px; }
.away-bubble { background: #dcf8c6; color: #111; border-radius: 8px; padding: 8px 10px; margin-top: 2px; max-width: 520px; white-space: pre-wrap; font-size: 14px; }
.channels-cell .channel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; font-weight: 400; text-align: left; }
.channel-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.channel-name svg { flex: none; }
.channels-cell select { min-width: 190px; }

/* Números de WhatsApp: en celular cada número es una tarjeta con su bandeja abajo */
.numbers-table select { width: 100%; }
@media (max-width: 700px) {
    .numbers-table thead { display: none; }
    .numbers-table tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
    .numbers-table td { display: block; padding: 0; border: 0; }
    .numbers-table td:nth-child(2)::before { content: "Cuenta: "; }
}

/* Coronita del dueño en Usuarios */
.avatar-owner { position: relative; display: inline-flex; flex: none; margin-right: 0; }
.owner-crown { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 1px 0 #fff); }

/* Etiqueta de color de cada número de WhatsApp: a qué número escribieron */
.num-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; vertical-align: 1px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.num-tag-0 { background: #dbeafe; color: #1e40af; }
.num-tag-1 { background: #fef3c7; color: #92400e; }
.num-tag-2 { background: #ede9fe; color: #5b21b6; }
.num-tag-3 { background: #fce7f3; color: #9d174d; }
.num-tag-4 { background: #ccfbf1; color: #115e59; }
.num-tag-5 { background: #ffedd5; color: #9a3412; }
.num-label-edit { display: flex; align-items: center; gap: 8px; }
.num-label-edit input { max-width: 150px; }

/* @ en las notas internas */
.chat-composer { position: relative; }
.chat-mention-menu { position: absolute; left: 14px; bottom: 100%; z-index: 20; list-style: none; margin: 0; padding: 4px; min-width: 220px; max-width: calc(100% - 28px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.chat-mention-menu li { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.chat-mention-menu li[aria-selected="true"], .chat-mention-menu li:hover { background: var(--brand-soft); }
.chat-mention { color: var(--brand-strong); font-weight: 600; }
.chat-fail-detail { margin-top: 4px; font-size: 12px; color: var(--muted); }
.chat-fail-detail summary { cursor: pointer; }

/* Visor de fotos y documentos del chat en la app instalada (assets/chat-viewer.js). */
.viewer-open, .viewer-open body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #1f2433; }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: #fff; border-bottom: 1px solid var(--line); }
.viewer-back, .viewer-share { flex: none; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--brand-strong); padding: 8px 6px; cursor: pointer; }
.viewer-share { display: inline-flex; align-items: center; gap: 5px; }
.viewer-share-icon { flex: none; margin-top: -2px; }
.viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 500; color: var(--text); }
.viewer-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.viewer-page { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.viewer-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
.viewer-body:has(.viewer-frame) { padding: 0; }
.viewer-img { display: block; max-width: 100%; height: auto; margin: auto; }
.viewer-msg { margin: auto; padding: 20px; color: #fff; text-align: center; max-width: 340px; }

/* Uso de WhatsApp contra la cuota del mes (Dashboard y consumo de todos los clientes). */
.wa-usage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wa-usage-head h2 { font-size: 17px; margin: 0; }
.wa-usage-head p { margin: 2px 0 0; }
.wa-usage-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.wa-usage-count b { font-size: 28px; font-weight: 800; line-height: 1; }
.wa-usage .bar-track { height: 10px; border-radius: 999px; }
.wa-usage .bar-fill { border-radius: 999px; min-width: 10px; }
.wa-usage-legend { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wa-usage-note { margin: 12px 0 0; }
.wa-history { display: flex; align-items: flex-end; gap: 6px; height: 110px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.wa-history div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 11px; color: var(--muted); }
.wa-history i { display: block; width: 100%; max-width: 34px; background: #25d366; border-radius: 4px 4px 0 0; min-height: 2px; }
.wa-history b { font-size: 11px; color: var(--text); font-weight: 700; }
.wa-history span { line-height: 1.35; white-space: nowrap; }
.wa-history-month { margin-top: 4px; }
.wa-history-cost { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Acciones de cada mensaje (dejar el dedo encima, clic derecho o la flechita), como en WhatsApp. */
.chat-more { position: absolute; top: 3px; right: 3px; z-index: 1; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 8px; background: inherit; color: #64748b; cursor: pointer; display: none; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .chat-msg[data-id]:hover .chat-more { display: inline-flex; } }
.chat-msg.is-picked .chat-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, white); }
.chat-msg.is-flash .chat-bubble { animation: chat-flash 1.2s; }
@keyframes chat-flash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 35%, white); } }
@media (pointer: coarse) { .chat-thread .chat-bubble, .chat-thread .chat-bubble a, .chat-thread .chat-bubble img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.chat-msg.has-reacts { margin-bottom: 14px; }
.chat-reacts { position: absolute; bottom: -15px; right: 10px; padding: 1px 6px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 26, 61, .2); font-size: 14px; line-height: 20px; letter-spacing: 1px; }
.chat-in .chat-reacts { right: auto; left: 10px; }
.chat-fwd { display: block; font-size: 12px; font-style: italic; color: #64748b; }
.chat-fwd::before { content: "↪ "; font-style: normal; }
.chat-quote { display: block; margin: 2px 0 5px; padding: 5px 8px; border-left: 4px solid var(--brand); border-radius: 7px; background: rgba(15, 26, 61, .06); font-size: 13px; line-height: 1.35; cursor: pointer; overflow: hidden; }
.chat-quote.chat-quote-message { border-left-color: #0d9488; }
.chat-quote b { display: block; font-size: 12px; color: var(--brand); }
.chat-quote.chat-quote-message b { color: #0d9488; }
.chat-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #475569; }
.chat-quote.is-missing { cursor: default; border-left-color: #94a3b8; }
.chat-quote.is-missing b { color: #64748b; }
.chat-menu-shade { position: fixed; inset: 0; z-index: 200; background: rgba(15, 26, 61, .25); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.chat-menu { position: fixed; display: flex; flex-direction: column; gap: 8px; width: min(300px, calc(100vw - 16px)); }
.chat-react-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -10px rgba(15, 26, 61, .45); }
.chat-react-bar button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; cursor: pointer; }
.chat-react-bar button.is-mine { background: var(--brand-soft); }
.chat-react-bar .chat-react-more { font-size: 22px; color: #475569; background: #f1f5f9; }
.chat-menu-card { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -10px rgba(15, 26, 61, .45); }
.chat-menu-card button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border: 0; background: none; font-size: 16px; color: var(--text); text-align: left; cursor: pointer; }
.chat-menu-card button + button { border-top: 1px solid var(--line); }
.chat-menu-card button:hover { background: #f8fafc; }
.chat-menu-card svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chat-info-box { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 14px 16px; font-size: 14px; }
.chat-info-box b { color: var(--muted); font-weight: 600; }
.chat-emoji-pick { position: fixed; z-index: 210; width: min(320px, calc(100vw - 16px)); border-radius: 16px; background: #fff; box-shadow: 0 12px 34px -10px rgba(15, 26, 61, .45); overflow: hidden; }
.chat-emoji-tabs { display: flex; border-bottom: 1px solid var(--line); }
.chat-emoji-tabs button { flex: 1; padding: 8px 0; border: 0; background: none; font-size: 20px; cursor: pointer; opacity: .55; }
.chat-emoji-tabs button[aria-selected="true"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--brand); }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); max-height: 230px; overflow-y: auto; padding: 6px; }
[hidden].chat-emoji-grid, .chat-emoji-pick[hidden], .chat-menu-shade[hidden], .chat-toast[hidden], .chat-react-bar[hidden] { display: none; }
.chat-emoji-grid button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 24px; cursor: pointer; }
.chat-emoji-grid button:hover { background: #f1f5f9; }
.chat-reply-bar { grid-area: reply; display: flex; align-items: flex-start; gap: 6px; }
.chat-reply-bar[hidden] { display: none; }
.chat-reply-bar .chat-quote { flex: 1; min-width: 0; margin: 0; cursor: default; }
.chat-reply-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 18px; line-height: 1; cursor: pointer; }
.chat-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 220; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: #0f1a3d; color: #fff; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(15, 26, 61, .5); }
.chat-toast.is-bad { background: #b91c1c; }
.chat-fwd-shade { position: fixed; inset: 0; z-index: 205; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 26, 61, .35); }
.chat-fwd-shade[hidden] { display: none; }
.chat-fwd-box { display: flex; flex-direction: column; width: min(420px, 100%); max-height: min(560px, calc(100dvh - 32px)); border-radius: 18px; background: #fff; box-shadow: 0 20px 50px -15px rgba(15, 26, 61, .5); overflow: hidden; }
.chat-fwd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 17px; }
.chat-fwd-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f5f9; font-size: 20px; cursor: pointer; }
.chat-fwd-q { margin: 0 16px 8px; font-size: 16px; }
.chat-fwd-list { flex: 1; overflow-y: auto; padding: 0 8px; min-height: 120px; }
.chat-fwd-list > p { padding: 12px 8px; }
.chat-fwd-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; }
.chat-fwd-row:hover { background: #f8fafc; }
.chat-fwd-row input { width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
.chat-fwd-row.is-off { opacity: .5; cursor: default; }
.chat-fwd-name { display: flex; flex-direction: column; min-width: 0; }
.chat-fwd-name span { font-size: 13px; color: var(--muted); }
.chat-fwd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat-fwd-count { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tpl-footer { display: block; margin-top: 4px; font-size: 12px; color: #64748b; }
.chat-tpl-name { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(15, 26, 61, .06); font-size: 11px; color: #64748b; }
.chat-tpl-buttons { display: flex; flex-direction: column; gap: 1px; margin: 8px -10px -2px; border-top: 1px solid rgba(15, 26, 61, .08); }
.chat-tpl-buttons span { padding: 8px 10px 4px; text-align: center; font-weight: 600; color: var(--brand); }
.chat-tpl-buttons span + span { border-top: 1px solid rgba(15, 26, 61, .08); }
.chat-where { margin: -4px 16px 8px; font-size: 13px; color: #64748b; }
.chat-where b { color: var(--brand); font-weight: 700; }
.chat-where span { color: #64748b; }
/* Menú "Estás en": botón con la bandeja actual y una lista con ícono, nombre, número y cuántos chats abiertos tiene. */
.where-menu { position: relative; margin: -2px 16px 10px; }
.where-menu summary { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; list-style: none; transition: border-color .15s, box-shadow .15s; }
.where-menu summary::-webkit-details-marker { display: none; }
.where-menu summary:hover { border-color: #cbd5e1; }
.where-menu[open] summary, .where-menu summary:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 85, 248, .12); outline: 0; }
.wm-label { flex: none; font-size: 12px; color: #64748b; }
.wm-current { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.wm-current b { color: var(--text); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.wm-current small { color: #64748b; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.wm-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: #64748b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.where-menu[open] .wm-chev { transform: rotate(180deg); }
.wm-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15, 26, 61, .28); }
.wm-group { display: flex; flex-direction: column; gap: 2px; }
.wm-title { margin: 8px 10px 4px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
.wm-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.wm-item:hover { background: #f8fafc; text-decoration: none; }
.wm-item.is-on { background: var(--brand-soft); }
.wm-icon { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #eef2ff; color: var(--brand); font-weight: 600; font-size: 14px; }
.wm-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wm-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--danger); }
.wm-dot.is-on { background: var(--ok); }
.wm-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.wm-text b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-text small { color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-item.is-on .wm-text b { color: var(--brand); }
.wm-count { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; font-size: 12px; font-weight: 600; text-align: center; }
.wm-count.has { background: #e0e7ff; color: var(--brand); }
@media (max-width: 760px) { .wm-item { padding: 10px; } .wm-current b { font-size: 15px; } }
.chat-head-inbox { color: var(--brand); font-weight: 600; }
.chat-no-inbox { margin-bottom: 2px; color: #b45309; font-weight: 600; }
/* En iPhone, al tocar un campo o una lista con letra de menos de 16px la pantalla se acerca sola y la barra de abajo
   queda flotando a media pantalla. En celular todos los campos van en 16px para que eso no pase. */
@media (max-width: 760px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { font-size: 16px !important; }
}

/* Atención temporal: el chat lo atiende alguien que no es el propietario de contacto. */
.chat-pill-temp { background: #ede9fe; color: #6d28d9; }
.chat-head-pills { display: flex; gap: 4px; align-items: center; }
.chat-head-pills:empty, .chat-head-pills #chat-state:empty { display: none; }
.chat-head-owner { color: #6d28d9; font-weight: 500; }
.chat-temp-note { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #f5f3ff; color: #5b21b6; }

/* Filtros de la lista: pestañas que se deslizan y, al lado, el menú "Más" con los de revisión. */
.chat-filter-row { display: flex; align-items: flex-start; gap: 8px; padding: 0 16px 10px; }
.chat-filter-row .chat-filters { flex: 1; min-width: 0; padding: 0; }
.chat-filter-more { position: relative; flex: none; }
.chat-filter-more summary { display: flex; align-items: center; gap: 4px; padding: 5px 10px 5px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: #475569; white-space: nowrap; cursor: pointer; list-style: none; }
.chat-filter-more summary::-webkit-details-marker { display: none; }
.chat-filter-more summary:hover { background: var(--bg); }
.chat-filter-more summary span { font-size: 12px; opacity: .7; }
.chat-filter-more summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.chat-filter-more[open] summary svg { transform: rotate(180deg); }
.chat-filter-more summary.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, white); color: var(--brand); font-weight: 600; }
.cm-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 270px; padding: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15, 26, 61, .28); }
.cm-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.cm-item:hover { background: #f8fafc; text-decoration: none; }
.cm-item.is-on { background: var(--brand-soft); }
.cm-item.is-on b { color: var(--brand); }
.cm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-text b { font-size: 14px; font-weight: 600; }
.cm-text small { font-size: 12px; color: var(--muted); }

/* Configuración de Chats: cierre automático y registro de notificaciones. */
.form .autoclose-pick { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.autoclose-pick select { width: auto; }
.push-log-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.push-log-bar > span { flex: 1; min-width: 180px; }
.push-log-bar form { margin: 0; }
.push-log-bar + .table-wrap + .pager { margin-top: 12px; }
.text-bad { color: var(--danger); }
.chat-filter-row .chat-filters { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); padding-right: 18px; }

/* Inicio en celular: los últimos leads como lista (nombre y estatus arriba; fecha y canal abajo) para que no se corte la tabla. */
@media (max-width: 760px) {
    .recent-leads thead { display: none; }
    .recent-leads, .recent-leads tbody { display: block; width: 100%; }
    .recent-leads tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name status" "date chan chan"; column-gap: 6px; row-gap: 3px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
    .recent-leads tr:last-child { border-bottom: 0; }
    .recent-leads td { display: block; padding: 0; border: 0; background: none; }
    .recent-leads .rl-name { grid-area: name; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .recent-leads .rl-status { grid-area: status; align-self: center; }
    .recent-leads .rl-date { grid-area: date; font-size: 13px; }
    .recent-leads .rl-channel { grid-area: chan; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .recent-leads .rl-channel::before { content: "· "; }
}

/* Reporte de leads: estatus y descartados */
.status-pair { margin-bottom: 14px; }
.status-table td { vertical-align: middle; }
.status-table .bar-fill { background: var(--k, #64748b); }
.status-table .share { min-width: 120px; grid-template-columns: 48px 1fr; }
.status-table tr.is-zero td { color: var(--muted); }
.status-table tr.is-zero .dot { opacity: .45; }
.status-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: #f8fafc; }
.discard-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.discard-kpis div { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.discard-kpis span { display: block; font-size: 12px; color: var(--muted); }
.discard-kpis b { display: block; font-size: 22px; margin-top: 2px; color: var(--text); }
.discard-kpis .is-rate { background: #fff7ed; border-color: #fed7aa; }
.discard-kpis .is-rate b { color: #c2410c; }
@media (max-width: 600px) {
    .status-table .share { min-width: 90px; grid-template-columns: 44px 1fr; }
    .discard-kpis div { padding: 9px 10px; }
    .discard-kpis span { font-size: 11px; white-space: nowrap; }
    .discard-kpis b { font-size: 18px; }
}
.status-table tr.is-zero .bar-fill { display: none; }

/* Campana de notificaciones en Chats: menú para mandar prueba o desactivar */
.chat-bell-wrap { position: relative; display: inline-flex; }
.chat-bell-menu { min-width: 220px; }
.chat-bell-menu[hidden] { display: none; }
.chat-bell-menu button { all: unset; box-sizing: border-box; padding: 8px 10px; border-radius: 7px; color: var(--text); cursor: pointer; font-size: 14px; }
.chat-bell-menu button:hover, .chat-bell-menu button:focus-visible { background: #f1f5f9; }
.chat-bell-menu [data-push-off] { color: #b42318; }
.chat-bell-state { display: block; padding: 6px 10px 4px; font-size: 12px; color: var(--muted); }

/* Validación en línea de formularios (assets/forms.js): naranja con ! y el motivo abajo; verde con ✓ cuando ya está bien */
input.fv-bad, select.fv-bad, textarea.fv-bad { border-color: #e8913a; }
input.fv-bad:focus, select.fv-bad:focus, textarea.fv-bad:focus { border-color: #e8913a; outline-color: #fbd9b4; }
input.fv-ok, select.fv-ok, textarea.fv-ok { border-color: #3fae7a; }
input.fv-ok:focus, select.fv-ok:focus, textarea.fv-ok:focus { outline-color: #c4ead6; }
.fv-icon.fv-bad, .fv-icon.fv-ok { padding-right: 36px; background-repeat: no-repeat; background-position: right 10px center; background-size: 18px 18px; }
textarea.fv-icon.fv-bad, textarea.fv-icon.fv-ok { background-position: right 10px top 9px; }
.fv-icon.fv-bad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8913a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.6v.1'/%3E%3C/svg%3E"); }
.fv-icon.fv-ok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fae7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
/* En la contraseña el ojo ocupa la esquina: sin ✓ ni ! encima del ojo, el borde verde/naranja ya avisa. */
.password-field input.fv-icon { padding-right: 48px; background-image: none; }
input[type=checkbox].fv-bad, input[type=radio].fv-bad { outline: 2px solid #fbd9b4; outline-offset: 1px; }
.fv-msg { display: block; flex-basis: 100%; margin-top: 4px; color: #dd7a1f; font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: right; }
.fv-msg[hidden] { display: none; }
.fv-msg.fv-float { position: absolute; z-index: 2; margin: 0; text-align: left; white-space: normal; }
form.fv-room .fv-float { pointer-events: none; }
form.fv-room.inline-form, form.fv-room .inline-form { row-gap: 28px; padding-bottom: 22px; }

/* WhatsApp de los widgets: lada aparte y 10 dígitos */
.wa-phone { display: flex; gap: 6px; }
.wa-phone select { flex: none; width: auto; }
.wa-phone input { flex: 1; min-width: 0; }
.users-table .u-phone { min-width: 230px; }
.inline-form .wa-phone input { width: 130px; }

/* Letra del círculo del vendedor: siempre en mayúsculas */
.agent-row input[data-initial] { text-transform: uppercase; }
.agent-photo .field-err { max-width: 110px; text-align: center; }

/* Estado de HubSpot en la ficha del lead */
.hubspot-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Estadísticas de botones */
.type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--k, #64748b); margin-right: 6px; vertical-align: 0; }
.kpi em.delta-up { color: #15803d; font-weight: 600; }
.kpi em.delta-down { color: #b91c1c; font-weight: 600; }
.stats-grid { gap: 14px; align-items: start; }
.stats-grid > .report-block { margin: 0; }
.stats-table .bar-track { height: 4px; margin-top: 6px; max-width: 320px; }
.stats-buttons input:not([type=checkbox]) { min-width: 160px; }
.stats-buttons .clip { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.text-ok { color: #15803d; }
.stats-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin: 6px 0; }
/* Métricas: periodos y tiempo real */
.period-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.period-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.period-chips button:hover { border-color: #fdba74; }
.period-chips button.on { background: #fff7ed; border-color: #fb923c; color: #9a3412; font-weight: 600; }
.date-range.on input { border-color: #fb923c; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .6); animation: live-pulse 1.6s infinite; vertical-align: 1px; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.live-kpis { margin-top: 12px; }
/* Títulos de Tiempo real: en naranja Direnet para que no se pierdan entre las tarjetas. */
.live-title { margin: 4px 0 8px; padding-left: 10px; border-left: 4px solid #ff6a07; color: #ff6a07; font-size: 15px; font-weight: 700; }
.live-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.live-list li { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }

/* ---------- Tareas ---------- */
.period-chips a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.period-chips a:hover { border-color: #fdba74; text-decoration: none; }
.period-chips a.on { background: #fff7ed; border-color: #fb923c; color: #9a3412; font-weight: 600; }
.tasks-table { margin-top: 12px; }
.tasks-table tr.is-done td { color: var(--muted); }
.task-progress { min-width: 140px; }
.task-progress .bar-track { margin: 0 0 4px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; color: #475569; font-size: 14px; align-items: center; }
.task-desc { white-space: normal; line-height: 1.55; }
.task-bar { height: 8px; margin: 0 0 14px; }
.task-items { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; counter-reset: task; }
.task-item { background: var(--card); border: 1px solid var(--line); border-left: 4px solid #ff6a07; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.task-item.is-done { border-left-color: #16a34a; background: #f7fdf9; }
.task-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.task-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #16a34a; flex: none; }
.task-check span { display: flex; flex-direction: column; gap: 2px; }
.task-check em { font-style: normal; }
.task-item.is-done .task-check b { text-decoration: line-through; text-decoration-color: #86efac; }
.task-detail { margin-left: 32px; padding: 8px 12px; background: #f8fafc; border-radius: 8px; color: #334155; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; }
.task-answer { margin-left: 32px; margin-top: 6px; }
.task-answer textarea { width: 100%; }
.task-answered { margin: -4px 0 0 32px; }
.task-save { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 12px 0; background: linear-gradient(to top, var(--bg, #f5f7fb) 70%, transparent); z-index: 2; }
.task-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.task-log li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 14px; }
.task-delete { margin-top: 8px; }
.task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.task-grid .task-wide { grid-column: 1 / -1; }
.task-grid input, .task-grid textarea, .task-grid select, .task-rows input, .task-rows textarea { width: 100%; }
.task-sub { margin: 22px 0 4px; font-size: 15px; }
.task-watchers { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 14px; }
.task-watchers .check, .task-notify { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.task-rows { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; counter-reset: row; }
.task-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wa-dialog { width: min(620px, calc(100vw - 32px)); }
.wa-dialog textarea { width: 100%; font-size: 14px; line-height: 1.5; border-radius: 8px; border: 1px solid var(--line); padding: 10px; }
@media (max-width: 760px) {
    .task-grid, .task-row { grid-template-columns: 1fr; }
    .task-log li { grid-template-columns: 1fr; gap: 0; }
    .task-detail, .task-answer, .task-answered { margin-left: 0; }
}
.task-notify-row { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Botón trabajando (lo pone forms.js al mandar un formulario). Gira también con "Reducir movimiento". */
.btn.is-loading { cursor: progress; opacity: .92; }
.btn-spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; flex: none; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Tareas: grupos */
.task-group { margin: 18px 0 8px; }
.task-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.task-group-head h2 { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.task-group-head h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: #ff6a07; align-self: center; }
.task-group-head .btn { margin-left: auto; }
.task-group-empty { margin: 0 0 6px 14px; }
.task-group-chips { margin-top: -6px; }
.task-groups-admin { margin-top: 18px; }
.task-groups-admin summary { cursor: pointer; font-weight: 600; }
.task-group-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.task-group-row form { display: flex; gap: 8px; align-items: center; margin: 0; }

/* Colaboraciones */
form.inline { display: inline-block; margin: 0; }
.collab-invite { display: grid; gap: 12px; max-width: 640px; }
.collab-groups { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.collab-groups legend { padding: 0 4px; font-weight: 600; font-size: 13px; }
.collab-groups label { display: inline-flex; gap: 6px; align-items: center; }
.collab-groups.is-all .collab-group { display: none; }
.collab-edit { display: inline-block; vertical-align: top; }
.collab-edit summary { list-style: none; display: inline-block; }
.collab-edit summary::-webkit-details-marker { display: none; }
.collab-edit[open] form { display: grid; gap: 10px; padding: 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 280px; white-space: normal; }
.collab-table td { vertical-align: top; }
.collab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.collab-card { display: grid; gap: 6px; color: var(--text); border-top: 3px solid #ff6a07; transition: transform .15s, box-shadow .15s; }
.collab-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 26, 61, .08); }
.collab-card .pill { justify-self: start; }
.collab-client { font-size: 17px; font-weight: 600; }
.collab-pending { font-size: 22px; }

/* Usuarios: el estado de Chats se lee completo (🟢 Disponible / 🔴 Ausente). */
.users-table select[name=chat_available] { min-width: 150px; }

/* Ícono "i" en círculo con su explicación al pasar el mouse o tocarlo. */
.info-tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border: 1.5px solid currentColor; border-radius: 50%; font: 600 10px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--muted); cursor: help; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.info-tip:hover, .info-tip:focus { color: var(--brand); outline: none; }
.info-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: #0f1a3d; color: #fff; font: 400 12.5px/1.45 Inter, system-ui, sans-serif; white-space: normal; text-align: left; box-shadow: 0 8px 24px rgba(15, 26, 61, .18); opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; pointer-events: none; }
.info-tip:hover::after, .info-tip:focus::after { opacity: 1; visibility: visible; }
/* Escondido no debe ocupar lugar: dentro de una tabla con scroll de lado, el globo invisible de la última fila
   la hacía más alta que su caja y salía un segundo scroll que atoraba el de la página. */
.info-tip:not(:hover):not(:focus)::after { display: none; }
.table tbody .info-tip::after { top: auto; bottom: calc(100% + 8px); }

/* Tareas: equipo del grupo */
.task-team { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-team:hover { border-color: #ff6a07; color: #c2410c; }
.task-team-form .task-watchers { max-height: 50vh; overflow: auto; }
.task-group-head .task-team { margin-left: auto; }
.task-group-head .task-team + .btn { margin-left: 0; }

/* Usuarios: agregar invitando o creando con contraseña */
.user-add .inline-form { margin-bottom: 12px; }
.user-add-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.user-add-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.user-add-mode .password-field { width: 210px; }
.user-add-quiet { flex-basis: 100%; }
.user-pending { display: inline-block; margin: 4px 0 0 40px; }
.users-table select[name=login_method] { min-width: 170px; }
/* Entrar con código */
.login-code-btn { display: block; width: 100%; margin-top: 10px; text-align: center; }
.code-input { font-size: 26px; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.access-or { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Usuarios: encabezados parejos (misma altura, mayúsculas chicas, el (i) alineado) */
.users-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #64748b; vertical-align: middle; height: 44px; }
.users-table thead th .info-tip { width: 15px; height: 15px; font-size: 9.5px; vertical-align: -3px; text-transform: none; }
.users-table input[name=password] { min-width: 120px; }

/* Usuarios: que la tabla quepa sin barra de desplazamiento en pantallas normales. */
.users-table th, .users-table td { padding: 8px 6px; }
.users-table td:first-child { min-width: 150px; }
.users-table td:nth-child(2) { min-width: 140px; }
.users-table .u-phone { min-width: 190px; }
.users-table .wa-phone select { padding-left: 6px; padding-right: 22px; }
.users-table select[name=login_method] { min-width: 0; width: 112px; }
.users-table select[name=chat_available] { min-width: 0; width: 132px; }
.users-table input[name=password] { min-width: 0; width: 100px; }
@media (max-width: 1500px) { .users-table .u-login { display: none; } }

/* Invitación abierta con otra cuenta: qué sesión está abierta */
.session-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 6px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; text-align: left; }

/* Campanita de Notificaciones */
.bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); }
.bell:hover, .bell.active { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.bell svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff6a07; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.notif-invite { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 4px solid #ff6a07; margin-bottom: 10px; }
.notif-invite-text { display: grid; gap: 3px; }
.notif-invite-actions { display: flex; gap: 8px; }
.notif-invite-actions form { margin: 0; }
.notif-list ul { list-style: none; margin: 0; padding: 0; }
.notif-list li a { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 12px 6px; border-top: 1px solid var(--line); color: var(--text); }
.notif-list li:first-child a { border-top: 0; }
.notif-list li a:hover { background: #fafbfc; text-decoration: none; }
.notif-list li.is-new a { background: #fff7f0; }
.notif-body { display: grid; gap: 2px; }
/* Pantalla de la invitación */
.invite-head { text-align: center; margin-bottom: 18px; }
.invite-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c2410c; background: #fff1e6; border-radius: 999px; padding: 3px 10px; }
.invite-title { font-size: 21px; justify-content: center; margin: 10px 0 4px; }
.invite-access { display: grid; gap: 2px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.invite-q { text-align: center; margin: 4px 0 10px; }
.invite-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f4f9; margin-bottom: 14px; }
.invite-tabs button { border: 0; background: transparent; padding: 9px; border-radius: 9px; font-weight: 600; color: var(--muted); cursor: pointer; }
.invite-tabs button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(15, 26, 61, .1); }
.invite-code { margin-top: 10px; }
.invite-decline { text-align: center; margin-top: 14px; }
.link-btn { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.invite-as { text-align: center; }

/*
 * Sistema de botones de AskMetrix (nunca blancos). El color dice qué hace el botón:
 * - .btn-primary  azul relleno: la acción principal de la pantalla (Guardar, Nueva tarea, Entrar).
 * - .btn-success  verde relleno: aceptar o confirmar algo de otra persona (Aceptar invitación).
 * - .btn-wa       verde WhatsApp: todo lo que abre o manda por WhatsApp.
 * - .btn          azul suave: acciones secundarias (Exportar, Copiar liga, Cargar CSV).
 * - .btn-danger-soft rojo suave: quitar, borrar, rechazar, cancelar invitaciones.
 * - .btn-ghost    gris suave: salir de un diálogo (Cancelar, Cerrar).
 */
.btn { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.btn:hover { background: #dbe6fd; border-color: transparent; color: #1e40af; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; border-color: #15803d; color: #fff; }
.btn-wa { background: #25d366; border-color: #25d366; color: #fff; }
.btn-wa:hover { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }
.btn-danger-soft { background: #fef2f2; border-color: transparent; color: #b91c1c; }
.btn-danger-soft:hover { background: #fee2e2; color: #991b1b; }
.btn-ghost { background: #f1f4f9; border-color: transparent; color: #475569; }
.btn-ghost:hover { background: #e5eaf2; color: var(--text); }
.invite-tabs button.on { background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(0, 85, 248, .35); }
/* Pestañas de la invitación: las dos se ven como botón (la no elegida en azul suave, no gris apagado). */
.invite-tabs { background: transparent; padding: 0; gap: 8px; }
.invite-tabs button { background: var(--brand-soft); color: var(--brand-strong); border: 1px solid #c7d7fb; padding: 10px; }
.invite-tabs button:hover { background: #dbe6fd; }
.invite-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Copiar WhatsApp: botón azul suave junto al número; verde un momento al copiar. */
.wa-phone .wa-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; border: 1px solid #c7d7fe; border-radius: 8px; background: #eef4ff; color: var(--brand-strong); cursor: pointer; }
.wa-phone .wa-copy:hover { background: #dbe7ff; }
.wa-phone .wa-copy.is-copied { background: #dcfce7; border-color: #86efac; color: #15803d; }
.wa-phone .wa-copy.is-failed { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.users-table .u-phone { min-width: 226px; }

/* Campañas de WhatsApp: pestañas, editor con vista previa tipo WhatsApp y reporte. */
.cmp-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.cmp-tabs a { padding: 8px 16px; border-radius: 999px; border: 1px solid #c7d7fe; background: #eef4ff; color: var(--brand-strong); font-weight: 600; text-decoration: none; }
.cmp-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cmp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-bottom: 18px; }
@media (max-width: 960px) { .cmp-layout { grid-template-columns: 1fr; } }
.cmp-preview-card { position: sticky; top: 16px; }
.cmp-tools { display: flex; gap: 6px; margin: 2px 0 4px; }
.wa-phone-pv { background: #efeae2; border-radius: 14px; padding: 18px 14px; min-height: 260px; }
.wa-bubble { background: #fff; border-radius: 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); overflow: hidden; max-width: 300px; font-size: 14px; color: #111b21; }
.wa-img { aspect-ratio: 1.91 / 1; background: #dfe5e7; display: flex; align-items: center; justify-content: center; color: #667781; overflow: hidden; }
.wa-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-title { display: block; padding: 8px 10px 0; }
.wa-body { padding: 8px 10px 0; overflow-wrap: anywhere; line-height: 1.35; }
.wa-footer { padding: 4px 10px 0; color: #8696a0; font-size: 12px; }
.wa-time { text-align: right; color: #8696a0; font-size: 11px; padding: 2px 10px 6px; }
.wa-btn { border-top: 1px solid #e9edef; text-align: center; color: #00a884; font-weight: 600; padding: 9px; }
.wa-bubble [hidden] { display: none; }
.cmp-list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cmp-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cmp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cmp-stat { background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 12px 14px; }
.cmp-stat b { display: block; font-size: 24px; }
.cmp-stat span { color: #64748b; font-size: 12.5px; }
.cmp-stat .cmp-stat-sub { display: block; margin-top: 6px; }
.cmp-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0; }
.cmp-summary b { font-size: 18px; }

/* Campañas: especificaciones de la imagen y botón de archivo azul suave (nada de botones blancos). */
.cmp-specs { margin: 4px 0 0; padding-left: 18px; }
.cmp-specs li { margin: 2px 0; }
.tpl-form input[type=file]::file-selector-button { border: 1px solid #c7d7fe; background: #eef4ff; color: var(--brand-strong); border-radius: 8px; padding: 7px 12px; margin-right: 10px; font-weight: 600; cursor: pointer; }
.tpl-form input[type=file]::file-selector-button:hover { background: #dbe7ff; }
.cmp-audience input[type=file]::file-selector-button { border: 1px solid #c7d7fe; background: #eef4ff; color: var(--brand-strong); border-radius: 8px; padding: 7px 12px; margin-right: 10px; font-weight: 600; cursor: pointer; }
.cmp-manual [data-mrow] { margin-bottom: 8px; }
.cmp-manual [data-madd] { margin: 2px 0 6px; }

/* Plantillas: contador de letras, grupos por estado y botones de envío/borrador. */
.cmp-count { align-self: flex-end; font-size: 11.5px; color: #64748b; margin-top: -2px; }
.cmp-count.full { color: #b91c1c; font-weight: 600; }
.cmp-grp { margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.cmp-send { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Plantillas: la imagen de la plantilla arriba del texto. */
.tpl-bubble .tpl-thumb { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.cmp-image-pick { display: flex; flex-direction: column; gap: 6px; }

/* Campañas: ayuda del archivo y revisión del archivo antes de mandar. */
.cmp-file-help { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.cmp-file-help a { align-self: flex-start; }
.cmp-file-help ul { margin: 4px 0 0; padding-left: 18px; }
.cmp-check { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.cmp-check.ok { background: #ecfdf3; border: 1px solid #86efac; }
.cmp-check.warn { background: #fff7ed; border: 1px solid #fdba74; }
.cmp-check p { margin: 4px 0 8px; }
.cmp-phone-fmt { max-width: 560px; margin-top: 6px; font-size: 13px; }
.cmp-phone-fmt code { white-space: nowrap; }

/* Campañas: Enviar / Programar / Prueba / Borrar en una sola línea; la fecha junto a su botón. */
.cmp-send form { margin: 0; }
.cmp-send .cmp-schedule { display: flex; align-items: center; gap: 6px; }
.cmp-send .cmp-schedule input[type=datetime-local] { width: auto; min-width: 210px; }
.cmp-send .cmp-schedule { flex-wrap: wrap; }
.cmp-send .cmp-schedule .fv-msg { flex-basis: 100%; order: 3; }

/* Confirmaciones de AskMetrix (en lugar del aviso del navegador). */
.amx-confirm { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px; z-index: 1000; animation: amxFade .12s ease-out; }
.amx-confirm-box { background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); padding: 22px 22px 18px; width: min(440px, 100%); border-top: 4px solid var(--brand); }
.amx-confirm-text { font-size: 16px; line-height: 1.45; color: #0f172a; margin: 0 0 18px; }
.amx-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@keyframes amxFade { from { opacity: 0; } to { opacity: 1; } }

/* Botón de actualizar (flecha circular), gira mientras trae los datos. */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; }
.btn-icon.spinning svg { animation: amxSpin .8s linear infinite; }
@keyframes amxSpin { to { transform: rotate(360deg); } }

/* Encabezado: logo y cliente a la izquierda, usuario (campanita, nombre y Salir) arriba a la derecha y el menú debajo. */
@media (min-width: 761px) {
    .topbar { row-gap: 8px; }
    .topbar-left { order: 1; }
    .topbar-right { order: 2; margin-left: auto; }
    .topbar nav { order: 3; flex-basis: 100%; justify-content: flex-end; margin-left: 0; }
}

/* Integraciones → WhatsApp: números conectados y proveedor elegible (se ve como botón aunque no esté elegido). */
.wa-num { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.wa-num:first-of-type { border-top: 0; }
.wa-num-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-prov { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wa-prov label { margin: 0; }
.wa-prov input { position: absolute; opacity: 0; pointer-events: none; }
.wa-prov span { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid #bfdbfe; background: #eff6ff; color: var(--brand-strong); font-weight: 600; cursor: pointer; }
.wa-prov input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.wa-prov input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.wa-prov-steps h3 { margin: 16px 0 6px; font-size: 16px; }
.wa-key { margin-top: 8px; }
.wa-key summary { cursor: pointer; color: var(--brand-strong); font-weight: 600; font-size: 14px; }
.wa-key .form { margin-top: 8px; max-width: 480px; }
/* Claves pegadas: se ven como puntitos sin ser campo de contraseña (así el navegador no les pone la del login). */
.secret-input { -webkit-text-security: disc; text-security: disc; font-family: var(--font, inherit); }

/* Usuarios: el botón de copiar WhatsApp (#108) volvió a sacar la barra de desplazamiento.
   La página usa más ancho de pantalla y las columnas de selects se ajustan a su texto. */
.users-table .u-phone { min-width: 0; }
.users-table .wa-phone input[type=tel] { width: 104px; flex: none; }
.users-table select[name=chat_available] { width: 140px; }
.users-table select[name=login_method] { width: 104px; }
.users-table .chat-access { max-width: 160px; }
@media (max-width: 1640px) { .users-table .u-login { display: none; } }

/* Citas: página pública como Calendly. A la izquierda la cita; a la derecha el calendario del mes y las horas del día
   (o los datos de la persona). En el celular va todo en una columna. */
.survey-box.appt-box { max-width: 1060px; }
.appt-card { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; padding: 0; overflow: hidden; }
.appt-side { padding: 32px 28px; border-right: 1px solid var(--line); }
.appt-side h1 { font-size: 26px; margin: 4px 0 18px; }
.appt-logo { display: block; max-width: 180px; max-height: 64px; width: auto; height: auto; object-fit: contain; margin-bottom: 14px; }
.appt-back { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--brand); font-size: 20px; margin-bottom: 14px; }
.appt-back:hover { background: var(--brand-soft); text-decoration: none; }
.appt-facts { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; color: var(--muted); font-weight: 600; }
.appt-facts li { display: flex; gap: 10px; align-items: flex-start; }
.appt-facts svg { flex: none; margin-top: 2px; }
.appt-facts .appt-chosen { color: var(--text); }
.appt-main { padding: 32px 28px; min-width: 0; }
.appt-title { font-size: 20px; margin: 0 0 18px; }
.appt-pick { display: grid; grid-template-columns: minmax(280px, 1fr) 250px; gap: 24px; align-items: start; }
.appt-month { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 10px; font-size: 16px; }
.appt-nav { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; color: var(--brand); background: var(--brand-soft); }
.appt-nav:hover { text-decoration: none; filter: brightness(.96); }
.appt-nav.is-off { color: #c3cad6; background: none; }
.appt-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.appt-grid th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 0; text-transform: capitalize; }
.appt-grid td { text-align: center; padding: 3px 0; height: 50px; }
.appt-day { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #94a3b8; font-size: 15px; }
.appt-day.is-open { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.appt-day.is-open:hover { background: #dbe6fd; text-decoration: none; }
.appt-day.is-picked, .appt-day.is-picked:hover { background: var(--brand); color: #fff; }
.appt-day.is-today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.appt-tz { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.appt-times { display: grid; gap: 10px; max-height: 470px; overflow-y: auto; padding-right: 4px; }
.appt-times-day { grid-column: 1 / -1; margin: 8px 0 4px; font-weight: 600; }
.appt-time { display: block; text-align: center; padding: 12px; border: 1.5px solid #93b4f5; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: 15px; }
.appt-time:hover { background: #dbe6fd; text-decoration: none; }
/* Al elegir una hora: la hora en gris y "Siguiente" en azul a un lado (como Calendly). */
.appt-slot { display: flex; gap: 6px; }
.appt-slot .appt-time { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.appt-next { display: none; flex: 1; text-align: center; padding: 12px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; }
.appt-next:hover { background: var(--brand-strong); text-decoration: none; }
.appt-slot.is-picked .appt-time { background: #64748b; border-color: #64748b; color: #fff; }
.appt-slot.is-picked .appt-time .appt-dot { display: none; }
.appt-slot.is-picked .appt-next { display: block; }
.appt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex: none; }
.appt-legend { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px; padding: 6px 10px; border-radius: 8px; background: #f1f5f9; color: var(--muted); font-size: 13px; grid-column: 1 / -1; }
.appt-form { max-width: 460px; display: grid; gap: 12px; }
.appt-form label { display: grid; gap: 6px; font-weight: 600; }
.appt-confirm { justify-self: start; padding: 11px 22px; font-size: 15px; }
.appt-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
@media (max-width: 860px) {
    .appt-card { grid-template-columns: 1fr; }
    .appt-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 20px; }
    .appt-main { padding: 24px 20px; }
    .appt-pick { grid-template-columns: 1fr; }
    /* Como Calendly en el celular: una hora por renglón, a todo lo ancho; la elegida se parte a la mitad con "Siguiente". */
    .appt-times { max-height: none; grid-template-columns: 1fr; }
    .appt-slot .appt-time, .appt-next { padding: 15px 12px; font-size: 16px; }
    .appt-day { width: 40px; height: 40px; }
}
.appt-card .btn-primary { padding: 9px 16px; font-size: 14px; border-radius: 8px; }
/* Citas: festivos en Mi horario (casilla, nombre y su siguiente fecha en un renglón). */
.appt-options { align-items: start; margin-top: 16px; }
.form label.appt-holiday { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.form label.appt-holiday input { width: 16px; margin: 0; }
/* Citas: botones de la tarjeta pública del mismo tamaño que el resto (la del login los agranda). */
/* Citas: calendarios conectados en Mi horario. */
.appt-calendars { margin-top: 16px; }
.appt-conn { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; display: grid; gap: 10px; }
.appt-conn-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.appt-conn-head .pill { margin-left: auto; }
.appt-cal-table td:nth-child(2), .appt-cal-table td:nth-child(3), .appt-cal-table th:nth-child(2), .appt-cal-table th:nth-child(3) { text-align: center; width: 190px; }
/* Citas: el nombre de la liga con su dominio enfrente (Tipos de cita). */
.appt-slug { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appt-slug input { flex: 1 1 160px; min-width: 120px; }
.appt-slug-form { margin-bottom: 16px; }
/* Citas: página de la empresa con sus tipos de cita (como la página de usuario de Calendly). */
.appt-types { display: grid; gap: 12px; }
.appt-type { display: grid; gap: 4px; padding: 16px 18px; border: 1.5px solid #c9d8fb; border-left: 5px solid var(--brand); border-radius: 12px; background: var(--brand-soft); color: var(--text); }
.appt-type:hover { border-color: var(--brand); text-decoration: none; }
.appt-type b { font-size: 16px; color: var(--brand-strong); }
/* Citas: "Mi liga" va hasta arriba de Mi horario. */
.appt-my-link { margin-bottom: 16px; }
/* Citas: la hora nunca se parte en dos renglones ("10:00 a. / m."); la elegida y "Siguiente" se ajustan para caber. */
.appt-time, .appt-next { white-space: nowrap; }
.appt-slot.is-picked .appt-time, .appt-slot.is-picked .appt-next { padding-left: 6px; padding-right: 6px; font-size: 14px; }
/* Citas: la agenda de quien agenda ("Ver mis horas libres"), bajo el calendario. Punto gris = tiene algo a esa hora. */
.appt-visitor { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; display: grid; gap: 6px; }
.appt-visitor p { margin: 0; }
.appt-visitor-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.appt-visitor-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.appt-visitor-free { color: #15803d; font-weight: 600; }
.appt-visitor-busy { color: var(--muted); }
.appt-slot.is-their-busy .appt-dot { background: #cbd5e1; }
.appt-slot.is-their-busy .appt-time { color: #64748b; }
/* Citas: tarjetas de "Dónde" en Tipos de cita (Google Meet, Teléfono, En persona), como Calendly. */
.appt-loc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form .appt-loc-card { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-weight: 400; }
.form .appt-loc-card:has(input[type=checkbox]:checked) { border-color: var(--brand); background: var(--brand-soft); }
.form .appt-loc-head { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.form .appt-loc-head input { width: 16px; margin: 0; }
.appt-loc-choice { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: grid; gap: 6px; }
.appt-loc-choice legend { font-weight: 600; padding: 0 4px; }
.appt-form .appt-loc-choice label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.appt-form .appt-loc-choice input { width: 16px; margin: 0; }
/* Citas: recordatorios en Tipos de cita (casillas en renglón). */
.appt-reminders { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.appt-cancel-ask { border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.appt-cancel-ask p { margin: 0 0 8px; }

/* Configuración → Logo y avisos */
.settings-logo { display: block; max-width: 240px; max-height: 80px; object-fit: contain; }
.settings-channels { margin: 0 0 14px; padding-left: 18px; line-height: 1.7; }
.settings-no-mail { color: #b91c1c; font-weight: 500; }
.settings-logo-remove { margin: -8px 0 16px; }

/* Tienda (tablero) y Reportes → Tienda en línea (Shopify) */
.store-kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (min-width: 641px) { .store-kpis .kpi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 640px) { .store-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.store-spark { display: block; width: 100%; height: 28px; margin-top: 8px; }
.store-photo-head { margin: 0 0 10px; }
.store-quick { color: var(--muted); }
.store-quick a { white-space: nowrap; }
.store-better { color: #15803d; }
.store-worse { color: var(--danger); }
.store-day { border-top: 1px solid var(--line); padding: 10px 0; }
.store-day:first-of-type { border-top: 0; }
.store-day summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.store-day ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.kpi em.store-better { color: #15803d; }
.kpi em.store-worse { color: var(--danger); }
.store-check summary { cursor: pointer; }
.store-check summary h2 { display: inline; }
.store-table td { vertical-align: top; }
.store-thumb { width: 44px; }
.store-thumb img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #f8fafc; }
.store-new td:nth-child(2) { font-weight: 600; }
.store-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.store-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 999px; background: #fff; color: inherit; text-decoration: none; font-size: 13px; }
.store-jump a:hover { border-color: #94a3b8; }
.store-check { scroll-margin-top: 80px; }
.store-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; color: var(--muted, #64748b); }
.store-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.store-feed-list li { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: baseline; }
.store-feed-list li > span:first-child { color: var(--muted); }
.store-feed-list .pill { margin: 0 4px 4px 0; }
.store-feed-note { margin-top: 4px; color: #b45309; }
@media (max-width: 640px) { .store-feed-list li { grid-template-columns: 1fr; gap: 2px; } }
.shop-steps { margin: 6px 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.shop-steps li > span { display: block; font-weight: 600; margin-bottom: 4px; }
.shop-steps .copy-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.shop-warn { color: #b45309; }
.src-config { margin-top: 6px; }
.src-config form { margin-top: 8px; }
.src-config-row { display: flex; flex-wrap: wrap; gap: 12px; }
.src-config-check { display: flex; align-items: center; gap: 6px; }

/* Línea de WhatsApp que no conecta: alerta junto a su etiqueta y aviso en el chat. */
.num-down { padding: 1px 8px; font-size: 11px; vertical-align: middle; }
.chat-line-down { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 13px; }

/* Número principal de la bandeja compartida. */
.main-phone { margin: 6px 0 0 28px; max-width: 520px; }
.main-phone select { display: block; margin-top: 4px; }

/* Arriba de Configuración de Chats: los números activos, grandes, para revisar de un vistazo. */
.active-numbers .an-title { font-size: 13px; font-weight: 600; color: var(--muted, #64748b); margin-bottom: 8px; }
.active-numbers .an-list { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.active-numbers .an-num { color: #ff6a07; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
.active-numbers .an-sub { font-size: 13px; color: var(--muted, #64748b); margin-top: 2px; }
.active-numbers .an-none { color: var(--danger); font-weight: 600; margin: 0; }
.active-numbers .an-dead { color: #b91c1c; margin: 10px 0 0; }
@media (max-width: 600px) { .active-numbers .an-num { font-size: 22px; } }

/* En bandeja compartida solo el principal va en naranja grande; los secundarios, chicos y en gris. */
.active-numbers .an-secondary .an-num { color: var(--muted, #64748b); font-size: 18px; font-weight: 600; }
.btn-warning-soft { background: #fff7ed; color: #c2410c; }

/* Resumen en texto de la configuración, debajo de los WhatsApp en uso. */
.active-numbers .an-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.active-numbers .an-summary dt { color: var(--muted, #64748b); }
.active-numbers .an-summary dd { margin: 0; color: var(--ink, #0f172a); }
@media (max-width: 600px) { .active-numbers .an-summary { grid-template-columns: 1fr; gap: 2px; } .active-numbers .an-summary dd { margin-bottom: 8px; } }

/* Código de la forma web: lo que usa hoy el sitio y la opción plegada de "ya tiene su propia forma". */
.install-now { margin: 4px 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--brand-soft); }
.own-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.own-form summary { cursor: pointer; color: var(--brand-strong); font-weight: 600; }

/* Bandeja de entrada: chips de canal y formas web en naranja Direnet. */
.inbox-channels { display: flex; margin: 0 12px 8px; }
.inbox-channels a { flex: 1; text-align: center; padding: 6px 10px; font-size: 13px; color: var(--text); background: #f1f5f9; text-decoration: none; }
.inbox-channels a + a { border-left: 1px solid var(--line); }
.inbox-channels a.active { background: #ff6a07; color: #fff; font-weight: 600; }
/* Bandeja: el círculo es el icono del canal (como HubSpot), con su color: verde WhatsApp, naranja forma, morado correo; después redes. */
.chat-avatar.inbox-channel { color: #fff; }
.chat-avatar.inbox-channel svg { width: 55%; height: 55%; }
.chat-avatar.inbox-channel.is-whatsapp { background: #25d366; }
.chat-avatar.inbox-channel.is-whatsapp svg { fill: currentColor; }
.chat-avatar.inbox-channel.is-form { background: #ff6a07; }
.chat-avatar.inbox-channel.is-form svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-avatar.inbox-channel.is-email { background: var(--mail); }
.chat-avatar.inbox-channel.is-email svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Lo ya abierto lleva el círculo claro (el icono en el color del canal); lo nuevo, el color fuerte. */
.chat-item:not(.is-unread) .chat-avatar.inbox-channel.is-email { background: color-mix(in srgb, var(--mail) 16%, white); color: var(--mail); }
.chat-item:not(.is-unread) .chat-avatar.inbox-channel.is-form { background: #ffe8d6; color: #ff6a07; }
.chat-item:not(.is-unread) .chat-avatar.inbox-channel.is-whatsapp { background: #dcf8e7; color: #1fa855; }
/* Renglón de correo: la segunda línea es el asunto; ↩ antes de la vista previa si lo último lo contestamos nosotros. */
.chat-item-subject { min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview .mail-out { color: var(--mail); font-weight: 600; }
.inbox-form-tag { display: inline-block; background: #fff1e6; color: #c2410c; font-weight: 600; font-size: 11px; padding: 1px 6px; border-radius: 999px; }
.inbox-form-tag.is-wa { background: #e7f8ee; color: #128c4b; }
.chat-item.is-joined .chat-avatar.inbox-channel.is-form { background: #eef0f3; color: #8a93a0; }
.chat-item.is-joined .inbox-form-tag { background: #eef0f3; color: #6b7280; }
.chat-item.is-joined .chat-item-top b, .chat-item.is-joined .chat-preview { color: #6b7280; }
.inbox-joined { color: #1fa855; font-weight: 500; }
.chat-item .info-tip::after { left: auto; right: -8px; transform: none; }
.inbox-form-card.is-joined { border-left-color: #c3c8cf; }
.inbox-form-card.is-joined b, .inbox-form-card.is-joined summary { color: #6b7280; }
.chat-head-name .inbox-form-tag { align-self: flex-start; }
.inbox-form-card { margin: 10px 16px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid #ff6a07; border-radius: 8px; font-size: 14px; }
.inbox-form-card b, .inbox-form-card summary { display: block; color: #c2410c; font-weight: 600; }
.inbox-form-card b { margin-bottom: 6px; }
.inbox-form-body { white-space: pre-line; overflow-wrap: anywhere; }
/* Arriba de una plática: una sola línea que se abre; abierta no pasa de un tercio de la pantalla para que siempre se vea dónde contestar. */
.inbox-form-card.is-fold { flex: none; }
.inbox-form-card.is-fold summary { cursor: pointer; list-style: none; }
.inbox-form-card.is-fold summary::-webkit-details-marker { display: none; }
.inbox-form-card.is-fold summary::after { content: ' · Ver lo que escribió'; color: var(--brand); font-weight: 500; }
.inbox-form-card.is-fold[open] summary::after { content: ' · Ocultar'; }
.inbox-form-card.is-fold .inbox-form-body { max-height: 33vh; overflow-y: auto; margin-top: 8px; }
/* La X para ocultar el aviso de una forma dentro del chat y la línea para volver a mostrarlos. */
.chat-forms { flex: none; }
.inbox-form-row { position: relative; }
.inbox-form-row .inbox-form-card summary { padding-right: 28px; }
.inbox-form-x { position: absolute; top: 7px; right: 24px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #eef0f3; color: #6b7280; font-size: 18px; line-height: 28px; cursor: pointer; }
.inbox-form-x:hover { background: #e2e5ea; color: var(--text); }
.inbox-form-restore { display: block; margin: 6px 16px 2px auto; padding: 2px 6px; border: 0; background: none; color: var(--brand); font-size: 12px; cursor: pointer; }
.inbox-form-restore[hidden] { display: none; }
.inbox-form-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); }

/* Correo de la Bandeja: las cuentas conectadas y el formulario para conectar (views/chats/_mail_card.php). */
.mail-account { border-top: 1px solid var(--line); padding: 16px 0 12px; }
.mail-account-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-account-error { color: var(--danger); margin: 6px 0; }
/* El resultado de conectar el correo se ve dentro de su tarjeta: la página llega a #correo con el aviso a la vista. */
.mail-accounts { scroll-margin-top: 16px; }
.mail-notice { margin: 8px 0 12px; }
.mail-account-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 8px 0; }
.mail-account-actions details[open] { flex-basis: 100%; }
.mail-reconnect summary, .mail-connect summary { list-style: none; }
.mail-reconnect summary::-webkit-details-marker, .mail-connect summary::-webkit-details-marker { display: none; }
.mail-reconnect .form, .mail-connect .form { margin-top: 10px; }
.mail-connect { margin-top: 12px; }
.mail-connects { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mail-connects .mail-connect { margin-top: 0; }
.mail-connects:has(details[open]) > details:not([open]), .mail-connect[open] > summary { display: none; }
.mail-connects .mail-connect[open] { flex-basis: 100%; }
.mail-connect-form { max-width: 560px; }
.mail-connect-title { margin: 0; font-size: 16px; }
.mail-step { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-size: 12px; font-weight: 700; }
.btn-primary .mail-step { background: rgba(255, 255, 255, .25); color: #fff; }
.mail-pass-help { margin: -4px 0 0; }
.mail-more summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.mail-more[open] summary { margin-bottom: 8px; }
.mail-connect-actions { display: flex; gap: 8px; }
.mail-autoreply { margin: 4px 0 8px; }
.mail-autoreply summary { cursor: pointer; color: var(--mail); font-weight: 500; font-size: 14px; }
.mail-autoreply .form { margin-top: 8px; }
.mail-more .cm-panel form { margin: 0; }
.mail-more button.cm-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.mail-more button.cm-item b { color: var(--danger); }
.mail-block-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px; }
@media (max-width: 600px) { .mail-block-form { grid-template-columns: 1fr; } }
.mail-auto-tag { font-size: 11px; font-weight: 600; color: var(--mail); background: color-mix(in srgb, var(--mail) 10%, white); border-radius: 999px; padding: 1px 8px; }

/*
 * Conversación de correo en la Bandeja (views/chats/_mail.php): los mensajes en una columna (los nuestros a la derecha
 * con fondo morado claro), scroll en medio y la caja abajo. El HTML del correo llega saneado (mail_html_clean, sin
 * estilos propios) y aquí se le da un estilo acotado a .mail-body, para que ningún correo cambie la pantalla.
 */
.btn-mail { background: var(--mail); border-color: var(--mail); color: #fff; }
.btn-mail:hover { background: color-mix(in srgb, var(--mail) 85%, black); border-color: color-mix(in srgb, var(--mail) 85%, black); color: #fff; }
.mail-main { background: var(--bg); }
.mail-head-subject { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-notice { flex: none; margin: 0; padding: 8px 16px; background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; font-size: 13px; }
.mail-notice[hidden], .mail-msg[hidden], .mail-older[hidden] { display: none; }
.mail-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 5% 18px; display: flex; flex-direction: column; gap: 10px; }
.mail-older { align-self: center; flex: none; }
/* Como un chat: lo del contacto pegado a la izquierda y lo de tu lado (tú o un compañero) a la derecha, con sangría. */
.mail-msg { flex: none; margin: 0 18% 0 0; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.mail-msg.is-out { margin: 0 0 0 18%; background: color-mix(in srgb, var(--mail) 8%, white); border-color: color-mix(in srgb, var(--mail) 26%, white); }
.mail-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; }
.mail-msg-head b { font-size: 14px; overflow-wrap: anywhere; }
.mail-msg-head time { color: var(--muted); }
.mail-meta { position: relative; margin-left: auto; }
.mail-meta summary { cursor: pointer; list-style: none; color: var(--mail); font-weight: 500; }
.mail-meta summary::-webkit-details-marker { display: none; }
.mail-meta dl { position: absolute; right: 0; top: 100%; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; width: max-content; max-width: min(360px, 80vw); margin: 4px 0 0; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 26, 61, .12); overflow-wrap: anywhere; }
.mail-meta dt { color: var(--muted); }
.mail-meta dd { margin: 0; }
.mail-body { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; overflow-x: auto; }
.mail-body p, .mail-body ul, .mail-body ol, .mail-body blockquote, .mail-body pre, .mail-body table { margin: 0 0 8px; }
.mail-body h1, .mail-body h2, .mail-body h3, .mail-body h4 { margin: 8px 0 4px; font-size: 15px; letter-spacing: 0; display: block; }
.mail-body blockquote { padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.mail-body table { border-collapse: collapse; max-width: 100%; }
/* En tablas no se parten palabras letra por letra (con "anywhere" una columna angosta, como la fecha de un aviso de
   Teamwork, se encogía a una letra y el texto salía vertical): ahí solo se cortan las palabras que de plano no caben. */
.mail-body td, .mail-body th { overflow-wrap: break-word; word-break: normal; }
.mail-body td, .mail-body th { padding: 2px 6px; text-align: left; vertical-align: top; }
.mail-body pre { white-space: pre-wrap; font-size: 13px; }
.mail-body a { color: var(--brand); text-decoration: underline; }
.mail-body hr { border: 0; border-top: 1px solid var(--line); }
.mail-text { white-space: pre-line; }
.mail-gone { margin: 0 0 6px; color: #9a3412; font-size: 13px; font-weight: 500; }
.mail-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.mail-file { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 220px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); font-size: 13px; text-decoration: none; }
a.mail-file:hover { border-color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.mail-file-kind { grid-row: span 2; display: grid; place-items: center; height: 40px; border-radius: 6px; background: #ede9fe; color: #6d28d9; font-size: 11px; font-weight: 700; }
.mail-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mail-file small { color: var(--muted); }
.mail-body img { max-width: 100%; height: auto; }
.mail-msg-to { margin: -4px 0 8px; color: var(--muted); font-size: 13px; }
.mail-day { display: flex; justify-content: center; margin: 6px 0; }
.mail-day span { padding: 3px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--text); }
.mail-reply { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 12px; background: #fff; border-top: 1px solid var(--line); }
.mail-reply-to { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-reply textarea { resize: vertical; min-height: 64px; max-height: 40vh; }
.mail-reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-attach { cursor: pointer; }
.mail-attach:focus-within { outline: 2px solid color-mix(in srgb, var(--mail) 45%, white); }
.mail-attach-list { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mail-reply-buttons { display: flex; gap: 8px; margin-left: auto; }
.mail-reply-off { margin: 0; color: var(--muted); }
/* "Contestar por correo" en una forma: el botón abre la caja a todo lo ancho de la barra de abajo. */
.inbox-mail-compose summary { list-style: none; }
.inbox-mail-compose summary::-webkit-details-marker { display: none; }
.inbox-mail-compose[open] { flex-basis: 100%; }
.inbox-mail-compose .mail-reply { padding: 10px 0 0; border-top: 0; }
.inbox-mail-compose label { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) {
    .mail-thread { padding: 8px 10px 12px; }
    .mail-msg { margin: 0 8% 0 0; }
    .mail-msg.is-out { margin: 0 0 0 8%; }
    .mail-reply { padding: 8px 10px 10px; }
    .mail-reply textarea, .mail-reply input { font-size: 16px; }
    .mail-reply textarea { max-height: 30vh; }
}

/* Panel lateral (Crear contacto, como HubSpot): entra desde la derecha a todo lo alto; en celular ocupa toda la pantalla. */
.side-panel { position: fixed; inset: 0 0 0 auto; margin: 0; box-sizing: border-box; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: #fff; color: var(--text); overflow: hidden; box-shadow: -18px 0 50px rgba(15, 23, 42, .22); animation: side-panel-in .22s ease-out; }
.side-panel::backdrop { background: rgba(15, 23, 42, .4); }
.side-panel-box { display: flex; flex-direction: column; height: 100%; }
.side-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.side-panel-head h2 { margin: 0; font-size: 19px; }
.side-panel-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.side-panel-x:hover { color: var(--text); }
.side-panel-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.side-panel-body .flash { margin: 0; }
.side-panel-body p { margin: 0; }
.side-panel-body label { display: flex; flex-direction: column; gap: 4px; }
.side-panel-body input, .side-panel-body select, .side-panel-body textarea { width: 100%; box-sizing: border-box; }
.side-panel-foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
@keyframes side-panel-in { from { transform: translateX(24px); } to { transform: none; } }

/* Menú agrupado: los grupos abren hacia la derecha; Configuración y AskMetrix (al final) hacia la izquierda. */
.nav-menu:not(.nav-menu-end) .nav-dropdown { left: 0; right: auto; }
/* Si un grupo queda pegado al borde derecho (por ejemplo CRM para un vendedor), su menú se alinea a la derecha para no salirse de la pantalla. */
.nav-menu.nav-menu-flip .nav-dropdown { left: auto; right: 0; }

/* Aviso fijo arriba del hilo de correo (por ejemplo, Gmail con Enviados escondido). */
.mail-hint { margin: 0; padding: 8px 16px; background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #9a3412; font-size: 13px; }
.mail-gmail-missing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-gmail-missing form { margin: 0; }
.side-panel-body .wa-phone select { width: auto; }
.mail-reply-arrow { color: var(--mail, #7c3aed); font-weight: 700; }
.mail-recips { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.mail-recips-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.mail-recips .email-chips { min-height: 0; padding: 2px 6px; }
.mail-recips .chip-error { grid-column: 2; }
.mail-recips-from { grid-column: 1 / -1; }
/* Hilo de correo como Gmail: mensajes viejos plegados en un renglón, ancho de lectura, citas/firma/aviso legal en "···". */
.mail-body { max-width: 75ch; }
.mail-snippet { display: none; margin: 2px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-msg.is-collapsed { cursor: pointer; padding-top: 8px; padding-bottom: 8px; }
.mail-msg.is-collapsed .mail-snippet { display: block; }
.mail-msg.is-collapsed .mail-msg-to, .mail-msg.is-collapsed .mail-body, .mail-msg.is-collapsed .mail-meta { display: none; }
.mail-msg-head { cursor: pointer; }
.mail-fold { margin: 8px 0 0; }
.mail-fold > summary { display: inline-block; list-style: none; cursor: pointer; padding: 0 10px; border-radius: 999px; background: #eef2f7; color: #475569; font-size: 12px; font-weight: 600; letter-spacing: .5px; line-height: 20px; }
.mail-fold > summary::-webkit-details-marker { display: none; }
.mail-fold[open] > summary { margin-bottom: 6px; }
.mail-fold img { max-height: 90px; width: auto; }
.mail-recips-bcc { display: contents; }
.mail-recips-bcc[hidden] { display: none; }
.mail-link-btn { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; cursor: pointer; }
.mail-link-btn:hover { text-decoration: underline; }
/* Contestar como Gmail en el celular: cerrado es una barra con Responder / Responder a todos; abierto, la caja con los
   destinatarios en un renglón que se abre para editarlos. */
.mail-reply { box-shadow: 0 -6px 16px -12px rgba(15, 23, 42, .35); }
.mail-reply-start { display: none; gap: 8px; }
.mail-reply-start .btn { flex: 1; justify-content: center; }
.mail-reply.is-compact .mail-reply-start { display: flex; }
.mail-reply.is-compact > :not(.mail-reply-start):not([type=hidden]) { display: none; }
.mail-reply-start .mail-start-lead { flex: none; }
.mail-recips-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mail-recips-summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-recips-summary b { font-weight: 600; }
.mail-recips-edit { flex: none; color: var(--brand); font-size: 13px; font-weight: 600; }
.mail-recips[hidden] { display: none; }
.mail-recips .email-chips { max-height: 30vh; overflow-y: auto; }
.mail-reply textarea { border-color: #cbd5e1; }
.mail-reply textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.mail-msg-to-more > summary { cursor: pointer; list-style: none; }
.mail-msg-to-more > summary::-webkit-details-marker { display: none; }
.mail-msg-to-more > summary::after { content: " ▾"; color: var(--brand); }
.mail-msg-to-more[open] > summary { display: none; }
.mail-msg-to-more > span { display: block; overflow-wrap: anywhere; }
.mail-msg.is-collapsed .mail-msg-to-more { display: none; }
/* Ver una imagen del correo en grande: pantalla completa, fondo negro, zoom con los dedos dentro del visor. */
.mail-body img { cursor: zoom-in; }
.img-viewer { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0b0f19; }
.img-viewer::backdrop { background: #0b0f19; }
.img-viewer-box { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; touch-action: pinch-zoom pan-x pan-y; }
.img-viewer-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-viewer-x { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
@keyframes flash-away { to { opacity: 0; visibility: hidden; transform: translateY(8px); } }
/* Otros correos y celulares del contacto: un renglón por cada uno, con "Hacer principal" y × (forms.js). */
.multi-field .field-label { font-weight: 500; margin-bottom: 6px; }
.multi-rows { display: flex; flex-direction: column; gap: 6px; }
.multi-row { display: flex; align-items: center; gap: 6px; }
.multi-row input { flex: 1; min-width: 0; }
.multi-primary { flex: none; border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; white-space: nowrap; }
.multi-x { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; }
.multi-x:hover { color: var(--danger); border-color: #fecaca; }
.multi-add { align-self: flex-start; margin-top: 6px; border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 0; }
/* Correo nuevo (sobre junto a + Contacto) y la nota de firma en el composer. */
.chat-new-mail, .chat-my-contacts { width: 40px; padding: 0; justify-content: center; }
/* Con "Mis contactos" (y el sobre) junto a la búsqueda, en una lista angosta "+ Contacto" se queda en "+" para que se lea "Buscar". */
.chat-search-row { container-type: inline-size; }
@container (max-width: 380px) { .chat-add-contact-label { display: none; } .chat-add-contact:not(.chat-new-mail):not(.chat-my-contacts) { width: 40px; padding: 0; justify-content: center; font-size: 18px; } }
/* "Crear lead con estos datos" en el panel del chat: el botón y, abajo, con qué datos se crea. */
.lead-quick { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lead-quick .muted { overflow-wrap: anywhere; }
.mail-sig-note { white-space: nowrap; text-decoration: none; }
.mail-sig-note:hover { text-decoration: underline; }

/* Servicio a Clientes: casos */
.case-pill { --c: #64748b; display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .82em; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 78%, black); border: 1px solid color-mix(in srgb, var(--c) 28%, white); }
.case-nuevo { --c: #2563eb; } .case-abierto { --c: #0891b2; } .case-esperando { --c: #f59e0b; } .case-pausa { --c: #64748b; }
.case-resuelto { --c: #16a34a; } .case-cerrado { --c: #475569; }
.case-late { color: #dc2626; font-weight: 600; }
.case-warn { color: #b45309; font-size: .82em; font-weight: 600; white-space: nowrap; }
.case-contact-results { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 8px; }
.case-contact-pick { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 6%, white); cursor: pointer; }
.case-contact-pick:hover { background: color-mix(in srgb, var(--brand) 14%, white); }
.case-contact-new { margin-bottom: 10px; }
.case-contact-new summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-bottom: 8px; }
.case-resolve summary { cursor: pointer; }
.case-resolve[open] summary { margin-bottom: 10px; }
.case-others { margin: 6px 0 0; padding-left: 18px; }
.case-others li { margin: 4px 0; }
.case-dates { margin-top: 12px; }
.case-detail > * { min-width: 0; }
@media (max-width: 640px) { .case-filters input[type=search] { flex: 1 1 100%; } }
.case-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.case-settings-list { list-style: none; margin: 0 0 12px; padding: 0; }
.case-settings-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.case-settings-list li.off { opacity: .6; }
.case-settings-list form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.case-settings-list input[type=text] { width: auto; flex: 1 1 160px; }
.case-settings-list input[type=color] { width: 38px; padding: 2px; }

/* Configuración de Chats en pestañas (una sección a la vez; sin JS se ven todas). */
.cfg-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding: 10px 0; background: var(--bg); scrollbar-width: none; }
.cfg-tabs::-webkit-scrollbar { display: none; }
.cfg-tabs a { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; white-space: nowrap; }
.cfg-tabs a:hover { background: color-mix(in srgb, var(--brand) 18%, white); }
.cfg-tabs a.is-on { background: var(--brand); color: var(--brand-ink); }
.cfg-pane { scroll-margin-top: 16px; margin-bottom: 28px; }
.cfg-pane > .card, .cfg-pane > form.card { margin-top: 0; margin-bottom: 16px; }
.cfg-head { margin: 4px 0 14px; }
.cfg-head h2 { margin: 0; font-size: 24px; line-height: 1.25; color: var(--navy); }
.cfg-head p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.cfg-pane .an-summary dt a { color: var(--brand); font-weight: 600; }
.cfg-tabs-on .cfg-pane { display: none; }
.cfg-tabs-on .cfg-pane.is-open { display: block; }

/* Cada correo de la Bandeja en renglones (Enviar · Llega a · Respuesta automática) y abajo lo de la conexión. */
.mail-account-email { font-size: 17px; }
.mail-account-sync { margin-left: auto; }
.mail-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--line); }
.mail-account-head + .mail-row, .mail-account-error + .mail-row { margin-top: 10px; }
.mail-row-label { font-weight: 600; color: var(--navy); font-size: 14px; }
.mail-row-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.mail-row-body > form, .mail-users-form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mail-row-body .mail-account-error { flex-basis: 100%; margin: 0; }
.mail-row .mail-autoreply { margin: 0; width: 100%; }
.mail-account .mail-account-actions { justify-content: flex-end; margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.btn-mail-soft { background: #f3e8ff; border-color: transparent; color: var(--mail); }
.btn-mail-soft:hover { background: #e9d5ff; color: #6d28d9; }
.mail-connects.has-accounts { align-items: center; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.mail-connects-label { color: var(--muted); font-weight: 600; }
.mail-connects:has(details[open]) > .mail-connects-label { display: none; }
@media (max-width: 640px) {
    .mail-row { grid-template-columns: 1fr; gap: 6px; }
    .mail-account-sync { margin-left: 0; flex-basis: 100%; }
}

/* Asignar varias conversaciones a la vez (Bandeja y Chats): "Seleccionar" muestra una casilla en cada chat de WhatsApp
   y abajo de la lista una barra con a quién asignarlas. En el celular la barra queda abajo, sobre la lista. */
.chat-pick-toggle { float: right; margin: -2px 0 0 8px; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
.chat-app.is-picking .chat-pick-toggle { background: var(--brand); color: #fff; }
.chat-pick { display: none; flex: none; width: 22px; height: 22px; border: 2px solid #94a3b8; border-radius: 6px; background: #fff; }
.chat-app.is-picking .chat-item[data-pick] .chat-pick { display: inline-block; }
.chat-app.is-picking .chat-item:not([data-pick]) { opacity: .45; pointer-events: none; }
.chat-item.is-picked .chat-pick { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.chat-app.is-picking .chat-item.is-picked { background: var(--brand-soft); }
.chat-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -8px 20px -14px rgba(15, 26, 61, .35); }
.chat-pick-bar[hidden] { display: none; }
.chat-pick-count { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--text); }
.chat-pick-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; cursor: pointer; }
.chat-pick-bar select { flex: 1 1 100%; min-width: 0; padding: 8px 12px; border-radius: 12px; font-size: 14px; }
.chat-pick-actions { display: flex; gap: 8px; margin-left: auto; }
.chat-pick-bar .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Reparto de leads: cada opción con su vendedor y el botón de quitar. */
.routing-rows { display: flex; flex-direction: column; gap: 8px; }
.routing-row { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr auto; gap: 8px; align-items: center; }
.routing-row > * { min-width: 0; }
.routing-other { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: #f8fafc; }
.routing-other input { background: transparent; font-weight: 600; }
.routing-row input, .routing-row select { width: 100%; }
@media (max-width: 640px) {
    .routing-row { grid-template-columns: 1fr auto; }
    .routing-row input, .routing-row select { grid-column: 1; }
    .routing-row > .btn { grid-row: 1 / span 3; grid-column: 2; }
    .routing-row > .people-pick { grid-column: 1; }
    .routing-row[data-routing-row] { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .routing-head { display: none; }
}
.toggle-head h3 { margin: 0; font-size: 17px; }
/* Una o varias personas en una zona, el respaldo o «Si nadie lo tomó» (se turnan): una lista por persona. */
.people-pick { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.people-pick select { width: 100%; }
.people-more { display: flex; gap: 6px; align-items: center; }
.people-more select { flex: 1; min-width: 0; }
.people-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 18px; line-height: 1; cursor: pointer; }
.people-x:hover { background: #fee2e2; }
.people-add { align-self: flex-start; border: 0; background: none; padding: 2px 0; color: var(--brand-strong); font-size: 13px; font-weight: 600; cursor: pointer; }
.people-add:hover { text-decoration: underline; }
.routing-fallback, .route-fallback .people-pick { max-width: 340px; }

/* Formato del reporte (Con gráficas, Solo datos…): a la derecha de los filtros. */
.report-format { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.report-format select { font-weight: 600; color: var(--navy); }
.th-print { display: none; }
/* PDF de "Solo datos": tarjetas en la primera hoja y cada tabla empieza en hoja nueva, sin cortar el título ni una fila;
   si una tabla no cabe, sigue en la siguiente hoja repitiendo los encabezados. */
@media print {
    .data-only .pm-block { break-before: page; margin: 0; }
    .data-only .pm-title { break-after: avoid; }
    .data-only .pm-table thead { display: table-header-group; }
    .data-only .pm-table th.sort button { display: none; }
    .data-only .pm-table .th-print { display: block; padding: 6px 6px; font-size: 12px; }
    .data-only .pm-table tfoot tr { break-before: avoid; }
    /* Las demás tablas (Campañas, etc.) caben a lo ancho de la hoja. */
    .data-only .table-wrap { overflow: visible; }
    .data-only .table:not(.pm-table) { width: 100%; font-size: 12px; }
    .data-only .table:not(.pm-table) th, .data-only .table:not(.pm-table) td { padding: 6px 5px; }
}

/* Configuración de Chats → Reparto: "¿A quién le llega un mensaje nuevo?", los pasos en el orden en que se aplican. */
.route-form { display: flex; flex-direction: column; gap: 16px; }
.route-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--line); }
.form .route-quick select { max-width: 340px; flex: 1 1 220px; }
.route-quick p { flex-basis: 100%; margin: 0; }
.route-story { padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 7%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 25%, #fff); }
.route-story-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.route-story ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.route-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.route-step { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.route-step > p { margin: 0; }
.route-step-head { display: flex; align-items: center; gap: 10px; }
.route-step-head h3 { margin: 0; font-size: 16px; flex: 1; }
.route-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; }
.route-step .routing-rules { margin: 0; }
.route-step .rr-now { border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .route-step-head { flex-wrap: wrap; } .route-step-head h3 { font-size: 15px; flex-basis: calc(100% - 40px); } .route-step-head .sw-toggle { margin-left: 36px; } }
.route-step .rr-check small { display: block; margin-top: 2px; }
.form .route-fallback select { max-width: 340px; }
.route-step .flash { margin: 0; }
.form .route-step label.rr-check { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; }
.form .route-step label.rr-check input { margin-top: 3px; flex: none; }

/* ---------- Selector de cliente del encabezado (client-picker.js) ---------- */
/* Sin JavaScript se ve el desplegable normal; con JavaScript, el selector con buscador. */
.client-pick { display: none; position: relative; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.js .client-native { display: none; }
.js .client-pick { display: flex; }
.client-box .client-pick-label { color: var(--text); font-size: inherit; }
.client-pick-btn { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 260px; padding: 3px 6px 3px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #f26a1b; font-weight: 700; cursor: pointer; }
.client-pick-btn:hover, .client-pick-btn[aria-expanded=true] { background: #fff1e8; border-color: #fcd9c2; }
.client-pick-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.client-pick-btn.all-clients { color: var(--muted); }
.client-pick-btn.all-clients:hover, .client-pick-btn.all-clients[aria-expanded=true] { background: #f1f5f9; border-color: var(--line); }
.client-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.client-pick-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.client-pick-btn[aria-expanded=true] svg { transform: rotate(180deg); }
.client-pick-btn.is-loading { opacity: .6; cursor: progress; }
.client-pick-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; width: 320px; max-width: calc(100vw - 24px); padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15, 26, 61, .3); font-weight: 400; }
.client-pick-panel[hidden] { display: none; }
.client-pick-head { display: none; }
.client-pick-search { width: 100%; margin-bottom: 6px; }
.client-pick-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.client-pick-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text); }
.client-pick-list li[hidden] { display: none; }
.client-pick-list li.is-active { background: var(--brand-soft); }
.client-pick-list li[aria-selected=true] { color: var(--brand); font-weight: 600; }
.client-pick-list li[aria-selected=true]::after { content: "✓"; color: var(--brand); }
.client-box .client-pick-empty { margin: 6px 10px 4px; color: var(--muted); font-size: 13px; }
.client-pick-open .topbar { position: relative; z-index: 90; }

@media (max-width: 760px) {
    .client-switch, .client-pick { min-width: 0; }
    .client-pick { font-size: 14px; }
    /* En el celular solo el nombre: con "Cliente:" se cortaba. */
    .client-box .client-pick-label { display: none; }
    .client-pick-btn { max-width: 100%; }
    .client-pick-open .topbar { position: sticky; }
    /* En el celular la lista sube desde abajo, a todo lo ancho, con fondo oscuro detrás. */
    .client-pick-open::after { content: ""; position: fixed; inset: 0; z-index: 85; background: rgba(15, 26, 61, .45); }
    .client-pick-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 95; width: auto; max-width: none; padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px -10px rgba(15, 26, 61, .35); }
    .client-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 8px; font-size: 16px; color: var(--text); }
    .client-pick-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f5f9; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
    .client-pick-search { font-size: 16px; padding: 10px 12px; margin-bottom: 8px; }
    .client-pick-list { max-height: calc(75dvh - 120px); }
    .client-pick-list li { padding: 13px 12px; font-size: 16px; }
}
.empty-period { text-align: center; padding: 28px 16px; }
.users-table .user-leads-perm { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* Etiquetas de la Bandeja (tipo Gmail): píldoras pastel; --lb fondo y --lf texto vienen del color de cada etiqueta. */
.inbox-label { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 1px 9px; border-radius: 999px; background: var(--lb, #f1f5f9); color: var(--lf, #334155); font-size: 12px; font-weight: 600; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-label-n { font-weight: 500; opacity: .75; }
.inbox-label-x { font-size: 14px; line-height: 1; margin-left: 2px; }
.inbox-label-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 4px 2px; }
.inbox-label-bar::-webkit-scrollbar { display: none; }
.inbox-label-bar a { flex: none; display: inline-flex; border-radius: 999px; text-decoration: none; }
.inbox-label-bar a .inbox-label { padding: 3px 11px; font-size: 13px; }
.inbox-label-bar a:hover .inbox-label { filter: brightness(.96); }
.inbox-label-bar a.is-on .inbox-label { box-shadow: inset 0 0 0 1.5px var(--lf); }
.inbox-label-bar a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.inbox-label-manage { width: 25px; height: 25px; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.chat-item-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-item-labels .inbox-label { font-size: 11px; line-height: 17px; padding: 0 7px; }
.chat-head-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.inbox-label-menu summary { padding: 5px 10px; }
.inbox-label-ico { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.inbox-label-ico circle { fill: currentColor; stroke: none; }
.inbox-label-panel { display: flex; flex-direction: column; gap: 8px; width: 250px; padding: 10px; margin: 0; }
.inbox-label-title { font-size: 13px; color: var(--muted); font-weight: 600; }
.inbox-label-options { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.inbox-label-option { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.inbox-label-option:hover { background: #f8fafc; }
.inbox-label-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.inbox-label-new { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.inbox-label-actions { display: flex; align-items: center; justify-content: space-between; }
.inbox-label-group { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); padding: 6px 6px 2px; }
.inbox-label-sep { flex: none; width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
@media (max-width: 760px) {
    .inbox-label-word { display: none; }
    .inbox-label-bar { flex-wrap: nowrap; overflow-x: auto; }
    .inbox-label-menu summary { padding: 6px 8px; }
    .inbox-label-menu summary > svg:last-child { display: none; }
    .inbox-label-panel { position: fixed; left: 16px; right: 16px; top: 140px; width: auto; max-height: calc(100dvh - 240px); overflow-y: auto; }
    .chat-head .chat-head-labels { display: none; }
}
/* Página de Etiquetas */
.label-colors { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 4px 0 12px; }
.label-colors legend { margin-bottom: 6px; font-weight: 600; }
.label-color input { position: absolute; opacity: 0; }
.label-color span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--lb); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); cursor: pointer; }
.label-color input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lf); }
.label-color input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
.label-list { list-style: none; margin: 0; padding: 0; }
.label-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.label-list li.is-editing { background: #f8fafc; margin: 0 -10px; padding: 8px 10px; border-radius: 8px; }
.label-list-pill { text-decoration: none; min-width: 0; }
.label-list-pill .inbox-label { font-size: 13px; padding: 3px 11px; }
.label-list .quick-actions form { margin: 0; }
/* Usuarios: el WhatsApp ocupa su propio espacio (antes se metía debajo del Rol) y las etiquetas van en una línea. */
.table.users-table .wa-phone input[type=tel]:not([type=checkbox]):not([type=radio]):not([type=color]) { flex: none; width: 108px; min-width: 0; }
.users-table .user-pending { white-space: nowrap; font-size: 11px; padding: 2px 8px; }
.users-table .user-leads-perm { white-space: nowrap; margin-top: 6px; font-size: 12px; }
.pill-sent { background: var(--brand-soft); color: var(--brand-strong); }

/* Usuarios sin barra lateral: nombre y correo en una sola columna, "Entra con" lleva la contraseña abajo,
   botones apilados. En celular cada usuario es una tarjeta. */
.users-table td.u-user { min-width: 212px; }
.users-table .u-user .who { display: flex; }
.table.users-table td.u-user input[name]:not([type=hidden]) { box-sizing: border-box; width: 168px; flex: none; }
.users-table .u-user .u-email { display: block; margin: 4px 0 0 40px; font-size: 13px; padding-top: 5px; padding-bottom: 5px; overflow: hidden; text-overflow: ellipsis; }
.users-table .u-user span.u-email { padding: 0; }
.users-table td:nth-child(2) { min-width: 0; }
.users-table .u-phone { min-width: 0; width: 1%; }
.users-table .u-phone .wa-phone input { width: 108px; flex: none; }
.users-table select[name=role] { min-width: 0; width: 140px; }
.users-table .user-leads-perm { white-space: normal; display: flex; align-items: flex-start; gap: 6px; max-width: 140px; margin-top: 4px; line-height: 1.25; }
.users-table select[name=chat_available] { width: 140px; }
.users-table .u-avail { margin-top: 6px; }
.users-table .u-avail select { font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
.users-table .u-access select, .users-table .u-access .password-field { display: block; width: 150px; box-sizing: border-box; }
.users-table .u-access .password-field { margin-top: 4px; }
.users-table .u-access input[name=password] { width: 100%; box-sizing: border-box; font-size: 13px; padding-top: 5px; padding-bottom: 5px; padding-right: 36px; }
.users-table .u-access .password-toggle { width: 34px; }
.users-table .u-access .password-toggle svg { width: 17px; height: 17px; }
.users-table select[name=home_page] { width: 122px; }
.users-table thead th, .users-table th.sort button { white-space: normal; line-height: 1.25; }
.users-table td.u-actions { width: 1%; white-space: nowrap; }
.users-table .u-actions form { display: block; margin: 0; }
.users-table .u-actions form + form { margin-top: 4px; }
.users-table .u-actions .btn { width: 100%; }
.users-table .u-actions .btn-ghost { background: #f1f5f9; border-color: transparent; color: #475569; }
.users-table .u-actions .btn-ghost:hover { background: #e2e8f0; }
.users-table .u-actions .btn-danger-soft { background: #fef2f2; border-color: transparent; color: #b91c1c; }
.users-table .u-actions .btn-danger-soft:hover { background: #fee2e2; }
.users-table tr.is-dirty > td { background: #f5f8ff; }
.users-table tr.is-dirty .u-actions button:not(.btn-ghost):not(.btn-danger-soft) { background: var(--brand); border-color: var(--brand); color: #fff; }
.users-saveall { position: sticky; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; margin: -4px 0 16px; padding: 10px 14px; background: #fff; border: 1px solid #c7d7fe; border-radius: 12px; box-shadow: 0 10px 30px -14px rgba(15, 26, 61, .35); font-weight: 600; }
.users-saveall[hidden] { display: none; }
@media (max-width: 760px) {
    .users-table-wrap, .table-wrap:has(> .users-table) { overflow: visible; background: transparent; border: 0; }
    .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; width: auto; }
    .users-table thead { display: none; }
    .users-table tr { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
    .users-table tr.is-dirty { background: #f5f8ff; }
    .users-table td, .users-table td.u-user, .users-table td.u-phone, .users-table td.u-actions { position: relative; display: block; width: auto; min-width: 0; padding: 6px 0 6px 88px; border: 0; white-space: normal; }
    .users-table td.u-user { padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
    .users-table td::before { content: attr(data-label); position: absolute; left: 0; top: 15px; font-size: 12px; font-weight: 600; color: #64748b; }
    .users-table td.u-user::before, .users-table td.u-actions::before { content: none; }
    .users-table td.u-user .who { display: flex; }
    .table.users-table td.u-user input[name]:not([type=hidden]) { flex: 1; width: 100%; }
    .table.users-table td.u-user input[name].u-email:not([type=hidden]) { width: calc(100% - 40px); }
    .users-table .wa-phone select { flex: none; width: 84px; }
    .users-table td.u-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 0; }
    .users-table td.u-actions:empty { display: none; }
    .users-table .u-actions form { flex: 1; }
    .users-table .u-actions form + form { margin-top: 0; }
    .users-table select[name=role], .users-table select[name=chat_available], .users-table select[name=home_page], .users-table .u-access select, .users-table .u-access .password-field, .users-table .u-active select { width: 100%; }
    .users-table .u-phone .wa-phone { width: 100%; }
    .table.users-table .u-phone .wa-phone input[type=tel] { flex: 1; width: auto; min-width: 0; padding-left: 8px; padding-right: 4px; }
    .users-table .user-leads-perm { max-width: none; }
    .users-table .chat-access { max-width: none; }
    .users-saveall { justify-content: space-between; flex-wrap: nowrap; font-size: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* Usuarios: botones que guardan sin recargar («✓ Guardado» o el error en su renglón). */
.table .btn-sm.is-done, .users-table tr .u-actions button.is-done { background: #16a34a; border-color: #16a34a; color: #fff; }
.table .btn-sm.is-failed, .users-table tr .u-actions button.is-failed { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.users-table .u-row-msg { max-width: 150px; margin-top: 6px; font-size: 12px; line-height: 1.3; color: #b91c1c; white-space: normal; }
.users-table .u-row-msg.is-ok { color: #15803d; }
.users-saveall.is-error { border-color: #fca5a5; color: #b91c1c; }
@media (max-width: 760px) { .users-table .u-row-msg { flex-basis: 100%; max-width: none; } }

/* Usuarios → Eliminar: ventana con lo que tiene y a quién se le pasa. */
.users-table .u-actions [data-delete-open] { margin-top: 4px; }
dialog.user-delete { width: min(440px, calc(100vw - 32px)); padding: 22px; border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(10, 36, 89, .25); white-space: normal; text-align: left; color: var(--text); }
dialog.user-delete::backdrop { background: rgba(10, 36, 89, .35); }
dialog.user-delete h3 { margin: 0 0 10px; font-size: 18px; }
dialog.user-delete p { margin: 0 0 10px; }
dialog.user-delete .user-delete-to { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; font-weight: 600; }
dialog.user-delete .user-delete-to select { width: 100%; font-weight: 400; }
dialog.user-delete .user-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
dialog.user-delete .user-delete-actions .btn { width: auto; }
dialog.user-delete .u-row-msg { max-width: none; }

/* Inicio del Dueño y del Gerente: Bandeja, leads del periodo y cada persona del equipo. */
.dash-periods { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }
.dash-periods a { padding: 6px 14px; border-radius: 9px; color: #475569; font-weight: 600; font-size: 13px; }
.dash-periods a:hover { text-decoration: none; background: var(--brand-soft); }
.dash-periods a.on { background: var(--brand); color: var(--brand-ink); }
.dash-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 10px; }
.kpi.is-alert { border-color: #fecaca; background: #fff7f7; }
.kpi.is-alert b { color: var(--danger); }
.kpi.is-warn { border-color: #fed7aa; background: #fffaf3; }
.kpi.is-warn b { color: #c2410c; }
.kpi.is-ok b { color: var(--ok); }
.dash-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dash-channel { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; border-top: 4px solid var(--brand); }
.dash-channel.is-wa { border-top-color: #25d366; }
.dash-channel.is-mail { border-top-color: var(--mail); }
.dash-channel.is-form { border-top-color: var(--navy); }
.dash-channel h3 { margin: 0 0 8px; font-size: 15px; }
.dash-channel dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; margin: 0; }
.dash-channel dt { font-size: 12px; color: var(--muted); }
.dash-channel dd { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-channel p { margin: 10px 0 0; }
.dash-sub { font-size: 14px; margin: 0 0 8px; }
.dash-waiting, .dash-recent, .dash-bars { list-style: none; margin: 0; padding: 0; }
.dash-waiting li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: inherit; }
.dash-waiting li:last-child a { border-bottom: 0; }
.dash-waiting li a:hover { text-decoration: none; background: #f8fafc; }
.dash-waiting strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-ch { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #dcfce7; color: #166534; }
.dash-ch.is-mail { background: #ede9fe; color: #5b21b6; }
.dash-wait { font-weight: 700; font-variant-numeric: tabular-nums; }
.bad, .table td.bad { color: var(--danger); font-weight: 700; }
.dash-people td { vertical-align: middle; }
.dash-people tr.is-none td { background: #fafbfc; color: var(--muted); }
.dash-who { white-space: nowrap; }
.dash-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; margin-right: 6px; vertical-align: middle; }
.dash-dot.on { background: var(--ok); }
.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-bars li { display: grid; grid-template-columns: minmax(120px, 46%) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; }
.dash-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar { height: 10px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; }
.dash-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.dash-bar-n { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-bar-n small { color: var(--muted); font-weight: 500; }
.dash-recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name tag" "meta tag"; column-gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dash-recent li:last-child { border-bottom: 0; }
.dash-recent li > a { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-recent li > .muted { grid-area: meta; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tag { grid-area: tag; align-self: center; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.dash-tag.ok { background: #dcfce7; color: #166534; }
.dash-tag.bad { background: #fee2e2; color: #b91c1c; }
/* Reloj de seguimiento de los leads (lead_clock.php): rojo = espera o sin atender, naranja = sin seguimiento, gris = al día. */
.lead-clock { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.lead-clock b { font-weight: 800; }
.lead-clock.is-waiting, .lead-clock.is-unattended { background: #fee2e2; color: #b91c1c; }
.lead-clock.is-followup { background: #ffedd5; color: #c2410c; }
.lead-clock.is-ok { background: #f1f5f9; color: #64748b; }
.lead-clock.is-attention { background: #fee2e2; color: #b91c1c; }
.dash-head-links { display: inline-flex; align-items: center; gap: 14px; }
.report-now { margin-top: 4px; font-size: 14px; color: var(--text); }
.report-now b { font-weight: 700; }
.table td.warn { color: #c2410c; font-weight: 700; }
.dash-tags { grid-area: tag; align-self: center; display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dash-tags .dash-tag { grid-area: auto; }
.dash-tag.is-status { --c: #64748b; background: color-mix(in srgb, var(--c) 14%, white); border: 1px solid color-mix(in srgb, var(--c) 28%, white); color: color-mix(in srgb, var(--c) 75%, black); }
@media (max-width: 900px) { .dash-two { grid-template-columns: 1fr; } }
/* En celular cada persona es una tarjeta con sus números en dos columnas (sin tabla ancha ni scroll de lado). */
@media (max-width: 760px) {
    .dash-periods { display: flex; width: 100%; }
    .dash-periods a { flex: 1; text-align: center; padding: 7px 4px; }
    .dash-people thead { display: none; }
    .dash-people, .dash-people tbody { display: block; width: 100%; }
    .dash-people tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
    .dash-people tr:last-child { border-bottom: 0; }
    .dash-people td { display: flex; justify-content: space-between; gap: 8px; padding: 0; border: 0; text-align: left; }
    .dash-people td::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
    .dash-people td.dash-who { grid-column: 1 / -1; margin-bottom: 4px; font-size: 15px; }
    .dash-people td.dash-who::before { content: none; }
    .dash-waiting li a { grid-template-columns: auto minmax(0, 1fr) auto; }
    .dash-waiting li a > .muted { display: none; }
}
.dash-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Carita doodle (dashboard_doodle): solo en las píldoras de vendedores. */
.dash-doodle .dd-float { transform-origin: 60px 60px; }
.dash-last-in { margin-top: 6px; font-size: 13px; font-weight: 600; color: #0b2b66; }
.dash-last-in.bad { color: var(--danger); }
.dash-who-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; }
.dash-who-line > span { color: #0b2b66; font-size: 13px; font-weight: 700; margin-right: 2px; }
.dash-who-line a { display: inline-flex; align-items: center; padding: 2px 10px 2px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #0b2b66; font-weight: 600; }
.dash-who-line a:hover { text-decoration: none; border-color: #0b2b66; }
.dash-who-line a b { margin-left: 5px; color: var(--danger); font-weight: 700; }

/* Tarjeta de arriba: dos bloques que no se mezclan, uno bajo el otro: LEADS (del periodo) y BANDEJA (ahora mismo), cada uno con sus cuadros. */
.dash-split { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dash-split-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dash-split-head .dash-last-in { margin: 0; }
.dash-split-note { flex-basis: 100%; font-size: 14px; }
.dash-area { border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 14px; padding: 14px 16px 16px; min-width: 0; background: #fff; }
.dash-area.is-inbox { border-top-color: #16a34a; }
.dash-area-tag { display: inline-block; font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--brand); }
.dash-area.is-inbox .dash-area-tag { color: #15803d; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 12px; }
.dash-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f7; min-width: 0; }
.dash-tile span { font-size: 12px; font-weight: 600; color: #475569; }
.dash-tile b { font-size: 24px; font-weight: 800; line-height: 1.15; color: #0b2b66; font-variant-numeric: tabular-nums; letter-spacing: -.4px; overflow-wrap: anywhere; }
.dash-tile b small { font-size: 13px; font-weight: 600; color: #64748b; margin-left: 2px; letter-spacing: 0; }
.dash-tile em { font-style: normal; font-size: 12px; color: var(--muted); }
.dash-tile.is-bad b { color: var(--danger); }
.dash-tile.is-won b { color: #15803d; }
.dash-tile.is-score { cursor: help; }
.dash-tile.is-score em { font-weight: 700; font-size: 13px; }
.dash-tile.is-g { background: #ecfdf3; border-color: #bbf0cf; } .dash-tile.is-g b, .dash-tile.is-g em { color: #15803d; }
.dash-tile.is-b { background: #eef4ff; border-color: #c9d9ff; } .dash-tile.is-b b, .dash-tile.is-b em { color: var(--brand); }
.dash-tile.is-y { background: #fffaeb; border-color: #fde7a6; } .dash-tile.is-y b, .dash-tile.is-y em { color: #b45309; }
.dash-tile.is-r { background: #fff1f0; border-color: #fecaca; } .dash-tile.is-r b, .dash-tile.is-r em { color: #c2261b; }
.dash-area-why { margin: 10px 0 0; font-size: 13px; color: #475569; }
.dash-people .dash-score { cursor: help; }
.dash-dot.b { background: var(--brand); }
@media (max-width: 720px) {
    .dash-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dash-tile { padding: 10px 12px; }
    .dash-tile b { font-size: 22px; }
}

/* Píldoras del Tablero: «Equipo» y una por vendedor, cada una con su carita del semáforo. Con su título, para no confundirlas con los periodos. */
.dash-pills-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 2px 0 8px; }
.dash-pills-label b { font-size: 16px; font-weight: 800; color: #0b2b66; }
.dash-pills-label span { font-size: 13px; color: var(--muted); }
.dash-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px dashed #c9d9ff; }
.dash-pills a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--brand-soft); border: 1.5px solid transparent; color: #0b2b66; font-weight: 600; font-size: 14px; white-space: nowrap; }
.dash-pills a:hover { text-decoration: none; border-color: #c9d9ff; }
.dash-pills a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.dash-pills .dash-doodle { width: 26px; height: 24px; flex: none; }
.dash-pills .dash-doodle > ellipse, .dash-pills .dash-doodle > g:not(.dd-float), .dash-pills .dash-doodle > circle { display: none; }
.dash-pills .dash-doodle .dd-float, .dash-pills .dash-doodle .dd-drop { animation: none; }
.dash-pill-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.dash-pill-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.dash-person + .dash-section { margin-top: 0; }
details.dash-rules.card { margin-top: 18px; }
@media (max-width: 720px) {
    .dash-pills { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
    .dash-pills::-webkit-scrollbar { display: none; }
}
.dash-summary-text { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.dash-summary-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.dash-summary-text strong { font-size: 24px; font-weight: 800; }
.is-green .dash-summary-text strong { color: var(--ok); }
.is-yellow .dash-summary-text strong { color: #c2410c; }
.is-red .dash-summary-text strong { color: var(--danger); }
.dash-summary-nums { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; margin: 0; }
.dash-summary-nums dt { font-size: 12px; color: var(--muted); }
.dash-summary-nums dd { margin: 0; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-rules { margin: -4px 0 18px; font-size: 13px; }
.dash-rules summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.dash-rules[open] { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.dash-rules .table { max-width: 520px; margin: 8px 0; }
.dash-rules ul { margin: 4px 0; padding-left: 20px; }
.dash-dot.g { background: var(--ok); }
.dash-dot.y { background: #f59e0b; }
.dash-dot.r { background: var(--danger); }
.dash-paused { font-size: 11px; color: var(--muted); background: #f1f5f9; padding: 1px 7px; border-radius: 99px; margin-left: 4px; }
.dash-off { font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.dash-wait.warn { color: #c2410c; }
@media (max-width: 760px) {
    .dash-summary { gap: 14px; }
    .dash-summary-nums { grid-template-columns: repeat(2, 1fr); width: 100%; }
}
.dash-people th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
@media (max-width: 760px) {
    .dash-people { min-width: 0; table-layout: auto; }
    .dash-people tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-size: 13px; }
    .dash-people td { min-width: 0; }
    .dash-people td::before { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-people td.dash-who { justify-content: flex-start; align-items: center; }
    .dash-rules .table { width: 100%; }
    .dash-rules .table th, .dash-rules .table td { padding: 6px; }
}
.dash-rules ul.dash-rule-levels { list-style: none; padding: 0; margin: 8px 0; }
.dash-rule-levels li { padding: 3px 0; }
/* Criterio del semáforo, siempre visible, y «¿Qué es?» debajo (dentro de la tarjeta). */
.dash-legend { flex-basis: 100%; list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; font-size: 13px; color: #334155; }
.dash-legend li { line-height: 1.4; }
.dash-summary .dash-rules { flex-basis: 100%; margin: 0; }
.dash-summary .dash-rules[open] { border: 0; padding: 0; background: none; }
@media (max-width: 900px) { .dash-legend { grid-template-columns: 1fr; } }

/* Tablero: periodos con del/al, KPIs con cambio, tendencia y ranking */
.dash-period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.dash-period-bar .dash-periods { margin-bottom: 0; flex-wrap: wrap; }
.dash-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 4px 4px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: #475569; }
.dash-range.on { border-color: var(--brand); }
.dash-range input { padding: 5px 8px; font-size: 13px; width: auto; }
.dash-range .btn { padding: 6px 12px; }
.dash-title small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi em.dash-delta { font-weight: 700; color: #475569; margin-top: 6px; }
.kpi em.dash-delta.up { color: #15803d; }
.kpi em.dash-delta.down { color: var(--danger); }
.kpi em.dash-delta small { font-weight: 500; color: var(--muted); font-size: 11px; }
.dash-trend h2 small { font-size: 13px; font-weight: 500; }
.dash-legend-line { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #334155; margin: 0 0 8px; }
.dash-legend-line i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dash-chart { position: relative; padding: 14px 0 22px; margin-bottom: 12px; }
.dash-chart svg { display: block; width: 100%; height: 140px; overflow: visible; }
.dash-chart svg .grid { stroke: #eef1f5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-chart-max { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--muted); }
.dash-chart-x { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.dash-chart-x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.dash-chart-x span:first-child { transform: none; }
.dash-chart-x span:last-child { transform: translateX(-100%); }
.dash-pos { font-weight: 800; color: var(--muted); width: 32px; }
.dash-rank tbody tr:first-child .dash-pos { color: var(--brand); }
.dash-score { display: inline-grid; grid-template-columns: 30px 90px auto; align-items: center; gap: 8px; }
.dash-score b { font-size: 16px; font-variant-numeric: tabular-nums; }
.dash-score em { font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dash-score.is-g .dash-bar i { background: var(--ok); } .dash-score.is-g em { color: #15803d; }
.dash-score.is-b .dash-bar i { background: var(--brand); } .dash-score.is-b em { color: var(--brand); }
.dash-score.is-y .dash-bar i { background: #f59e0b; } .dash-score.is-y em { color: #b45309; }
.dash-score.is-r .dash-bar i { background: var(--danger); } .dash-score.is-r em { color: var(--danger); }
.dash-rank .dash-rules { margin: 10px 0 0; }
@media (max-width: 760px) {
    .dash-range { width: 100%; }
    .dash-range input { flex: 1 1 120px; min-width: 0; }
    .dash-score { grid-template-columns: 30px 120px auto; }
    .dash-rank td[data-label="Calificación"] { grid-column: 1 / -1; }
    .dash-trend { grid-template-columns: 1fr; }
}
/* Servicio a Clientes: los correos del caso (del cliente a la izquierda, del equipo con fondo azul suave). */
.case-msg { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; background: #fff; }
.case-msg-out { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 18%, white); }
.case-msg-auto { opacity: .8; }
.case-msg header { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.case-msg header .small { overflow-wrap: anywhere; }
.case-msg-body { margin-top: 6px; }
.case-msg-error { color: var(--danger); font-weight: 600; margin: 6px 0 0; }
.case-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case-files li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 100%; }
.case-files a { overflow-wrap: anywhere; }
.case-file-kind { display: inline-block; font-size: 11px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border-radius: 4px; padding: 0 5px; }
.case-reply { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.case-reply summary { cursor: pointer; }
.case-reply[open] summary { margin-bottom: 10px; }
.case-mailbox { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.case-forward { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.case-forward code { background: #f1f5f9; border-radius: 6px; padding: 4px 8px; overflow-wrap: anywhere; font-size: 13px; }
.case-code { font-size: 20px; font-weight: 700; letter-spacing: 1px; }

/* Tablero: dos secciones claras, Leads y Bandeja (conversaciones) */
.dash-section { margin: 28px 0 8px; padding-top: 4px; }
.dash-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; background: var(--brand-soft); border-left: 6px solid var(--brand); }
.dash-section-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--navy); }
.dash-section-head p { margin: 0; font-size: 13px; color: #334155; flex: 1 1 320px; }
.dash-section.is-inbox .dash-section-head { background: #e9fbf0; border-left-color: #25d366; }
.dash-section .dash-title { margin-top: 14px; }

/* Tickets de soporte, diseño tipo Teamwork (David, 2026-11-05): bandejas a la izquierda, pestañas por estado y tabla. */
.btn-send { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; padding-left: 22px; padding-right: 22px; box-shadow: 0 6px 14px -8px rgba(255, 106, 7, .8); }
.btn-send:hover { background: var(--orange-strong); border-color: var(--orange-strong); color: #fff; }
.btn-note { background: #fef3c7; border-color: #fde68a; color: #92400e; font-weight: 600; }
.btn-note:hover { background: #fde68a; }
.tk-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.tk-side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; position: sticky; top: 12px; }
.tk-side-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tk-side-head h1 { font-size: 22px; margin: 0; }
.tk-boxes { display: flex; flex-direction: column; gap: 2px; }
.tk-boxes a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--text); font-weight: 500; border-left: 3px solid transparent; }
.tk-boxes a:hover { background: var(--brand-soft); text-decoration: none; }
.tk-boxes a.active { background: var(--brand-soft); color: var(--navy); font-weight: 700; border-left-color: var(--brand); }
.tk-boxes b { font-size: 12px; background: #eef2f6; color: var(--muted); border-radius: 999px; padding: 0 8px; min-width: 24px; text-align: center; }
.tk-boxes a.active b { background: var(--orange); color: #fff; }
.tk-side-link { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.tk-main { min-width: 0; }
.tk-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tk-title h2 { margin: 0; font-size: 22px; color: var(--navy); }
.tk-search input { width: 300px; max-width: 100%; }
.tk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.tk-tabs::-webkit-scrollbar { display: none; }
.tk-tabs a { padding: 9px 14px; color: var(--muted); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tk-tabs a:hover { color: var(--text); text-decoration: none; }
.tk-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.tk-tabs b { font-size: 11px; background: #eef2f6; color: var(--muted); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.tk-tabs a.active b { background: var(--orange); color: #fff; }
.tk-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tk-filters select { width: auto; }
.tk-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.tk-table tbody tr { cursor: pointer; }
.tk-table tbody tr:hover td { background: #f8fafc; }
.tk-table td { vertical-align: middle; }
.tk-who { max-width: 160px; }
.tk-who b, .tk-who .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-table { table-layout: auto; width: 100%; }
.tk-table-wrap { overflow-x: visible; }
.tk-subject { width: 100%; max-width: 0; }
.tk-subject > a { overflow-wrap: anywhere; }
.tk-folio-link { font-size: 12.5px; font-weight: 800; color: var(--orange) !important; margin-right: 4px; }
.tk-subject > a { color: var(--text); font-weight: 600; }
.tk-new .tk-subject > a, .tk-new .tk-who b { font-weight: 800; }
.tk-preview { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-count { display: inline-block; font-size: 11px; background: var(--orange-soft); color: var(--orange-strong); border-radius: 999px; padding: 0 7px; margin-left: 4px; font-weight: 700; }
.tk-clip { font-size: 12px; margin-left: 2px; }
.tk-assignee { white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tk-assignee-name { font-size: 13px; }
.tk-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e2e8f0; color: #334155; font-size: 12px; font-weight: 700; vertical-align: middle; }
.tk-assignee .tk-avatar { width: 26px; height: 26px; font-size: 11px; margin-right: 4px; background: var(--brand-soft); color: var(--brand); }
.tk-avatar-none { background: #f1f5f9 !important; color: #94a3b8 !important; border: 1px dashed #cbd5e1; }
.tk-avatar-team { background: var(--orange); color: #fff; }
.tk-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--c, #64748b) 80%, black); }
.tk-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #64748b); }

/* Ticket abierto */
.tk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tk-bar-form { margin: 0; }
.tk-bar-space { flex: 1; }
.tk-status-select { width: auto; border-radius: 999px; font-weight: 700; color: #fff; background-color: var(--c, #64748b); border-color: var(--c, #64748b); padding-left: 14px; }
.tk-status-select option { color: var(--text); background: #fff; }
.tk-assign-select { width: auto; border-radius: 999px; }
.tk-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.tk-col { min-width: 0; }
.tk-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.tk-head h1 { font-size: 24px; margin: 0; }
.tk-folio { font-size: 20px; color: var(--orange); font-weight: 800; white-space: nowrap; }
.tk-folio-sm { font-size: 12px; color: var(--orange-strong); background: var(--orange-soft); border-radius: 4px; padding: 0 5px; font-weight: 600; }
.tk-resolution { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #ecfdf3; border: 1px solid #bbf7d0; }
.tk-detail .case-resolve { margin-top: 12px; }
.tk-radio { position: absolute; opacity: 0; pointer-events: none; }
.tk-compose { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.tk-compose-tabs, .tk-view-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 12px; background: #f8fafc; }
.tk-compose-tabs label, .tk-view-tabs label { padding: 10px 12px; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tk-view-tabs b { font-size: 11px; background: #eef2f6; border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.tk-pane, .tk-view { display: none; padding: 14px; }
#tkc-reply:checked ~ .tk-compose-tabs label[for=tkc-reply] { color: var(--orange-strong); border-bottom-color: var(--orange); }
#tkc-note:checked ~ .tk-compose-tabs label[for=tkc-note] { color: #92400e; border-bottom-color: #f59e0b; }
#tkc-reply:checked ~ .tk-pane-reply, #tkc-note:checked ~ .tk-pane-note { display: block; }
#tkc-note:checked ~ .tk-pane-note { background: #fffbeb; }
.tk-pane .form { gap: 10px; }
.tk-from { margin: 0; }
.tk-cc summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.tk-canned { width: 100%; background: var(--orange-soft); border-color: #fed7aa; }
.tk-compose-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.tk-compose-foot > * { margin: 0; }
.tk-attach { position: relative; cursor: pointer; margin-right: auto !important; max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 40px; display: inline-flex; align-items: center; }
.tk-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.tk-after { display: flex !important; flex-direction: row !important; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
.tk-after select { width: auto; height: 40px; margin: 0; }
.tk-compose-foot .btn-send { height: 40px; }
.tk-views { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
#tkv-msgs:checked ~ .tk-view-tabs label[for=tkv-msgs], #tkv-files:checked ~ .tk-view-tabs label[for=tkv-files], #tkv-log:checked ~ .tk-view-tabs label[for=tkv-log] { color: var(--brand); border-bottom-color: var(--brand); }
#tkv-msgs:checked ~ .tk-view-msgs, #tkv-files:checked ~ .tk-view-files, #tkv-log:checked ~ .tk-view-log { display: block; }
.tk-view-log .timeline { margin-top: 0; }
.tk-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; }
.tk-files-list { flex-direction: column; }
/* Mensajes: el cliente a la izquierda en blanco; lo que manda el equipo a la derecha, en naranja suave con raya naranja. */
.tk-msg { display: flex; gap: 10px; margin: 0 0 14px; align-items: flex-start; }
.tk-msg-box { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.tk-msg-in .tk-msg-box { border-left: 4px solid #94a3b8; margin-right: 48px; }
.tk-msg-out { flex-direction: row-reverse; }
.tk-msg-out .tk-msg-box { background: var(--orange-soft); border-color: #fed7aa; border-right: 4px solid var(--orange); margin-left: 48px; }
.tk-msg-auto .tk-msg-box { background: #f8fafc; border-color: var(--line); border-right-color: #cbd5e1; border-style: dashed; }
.tk-msg-auto .tk-avatar-team { background: #cbd5e1; }
.tk-msg header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tk-msg-when { margin-left: auto; }
.tk-msg-to { overflow-wrap: anywhere; }
.tk-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; text-transform: uppercase; letter-spacing: .3px; }
.tk-tag-client { background: #e2e8f0; color: #334155; }
.tk-tag-team { background: var(--orange); color: #fff; }
.tk-msg-auto .tk-tag-team { background: #94a3b8; }
.tk-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.tk-box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tk-box h2 { font-size: 15px; margin: 0 0 10px; }
.tk-box .form { gap: 8px; }
.tk-customer { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.tk-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tk-recent li { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
@media (max-width: 900px) {
    /* minmax(0, 1fr): la fila de bandejas (con scroll de lado) no puede ensanchar la página. */
    .tk-layout, .tk-detail { grid-template-columns: minmax(0, 1fr); }
    .tk-side, .tk-aside { position: static; min-width: 0; }
    .tk-boxes { flex-direction: row; overflow-x: auto; }
    .tk-boxes a { white-space: nowrap; gap: 6px; }
    .tk-msg-in .tk-msg-box { margin-right: 0; }
    .tk-msg-out .tk-msg-box { margin-left: 0; }
    .tk-search input { width: 100%; }
    .tk-search { flex: 1 1 100%; }
}

/* Selectores de bandeja y estado, engrane y botón Filtros: solo en el celular (en escritorio están la columna y las pestañas). */
.tk-pick, .tk-gear, .tk-fl-btn, .tk-fl-check { display: none; }

/* Tickets en celular, en orden: «Tickets ⚙ + Nuevo», bandeja y estado, búsqueda y Filtros, y cada ticket como tarjeta (asunto, cliente y fecha, estado y responsable). */
@media (max-width: 640px) {
    .tk-side { padding: 0; background: transparent; border: 0; }
    .tk-side-head { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 10px; }
    .tk-side-head h1 { flex: 1; }
    .tk-gear { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 18px; text-decoration: none; }
    .tk-layout { gap: 0; }
    .tk-boxes, .tk-side-link, .tk-tabs, .tk-main .tk-title h2 { display: none; }
    .tk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .tk-pick select { min-width: 0; width: 100%; font-weight: 600; color: var(--navy); }
    .tk-title { flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
    .tk-search { flex: 1 1 auto; min-width: 0; }
    .tk-search input { width: 100%; }
    .tk-fl-btn { display: inline-flex; align-items: center; flex: none; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer; }
    .tk-fl-check:not(:checked) ~ .tk-filters { display: none; }
    .tk-view-tabs { padding: 0 4px; gap: 0; overflow-x: auto; scrollbar-width: none; }
    .tk-view-tabs label { padding: 10px 8px; font-size: 13px; white-space: nowrap; }
    .tk-filters select { flex: 1 1 140px; min-width: 0; }
    .tk-table-wrap { border: 0; background: transparent; box-shadow: none; }
    .tk-table, .tk-table tbody { display: block; width: 100%; }
    .tk-table thead { display: none; }
    .tk-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "subject subject" "who when" "state assignee";
        gap: 6px 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
    .tk-table tr.tk-new { border-left: 4px solid var(--orange); }
    .tk-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .tk-table tbody tr:hover td { background: transparent; }
    .tk-table .tk-subject { grid-area: subject; width: auto; max-width: none; }
    .tk-table .tk-who { grid-area: who; max-width: none; }
    .tk-table .tk-when { grid-area: when; text-align: right; font-size: 13px; color: var(--muted); }
    .tk-table .tk-created { display: none; }
    .tk-table .tk-state { grid-area: state; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; white-space: normal; }
    .tk-table .tk-state > div { display: inline; }
    .tk-table .tk-assignee { grid-area: assignee; max-width: 160px; text-align: right; }
    .tk-table .tk-assignee div.muted.small, .tk-table .tk-avatar-none { display: none; }
    .tk-table .tk-preview, .tk-table .tk-when div:not(.case-late) { display: none; }
    .tk-table .tk-subject > a:not(.tk-folio-link) { font-size: 16px; }
    .tk-table .tk-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .tk-table .tk-who b { flex: none; max-width: 60%; }
    .tk-table .tk-who .small { min-width: 0; }
    .tk-table .tk-who .small::before { content: "· "; }
}

/* Botón Actualizar de Tickets (como en la Bandeja), en escritorio y celular. */
.tk-refresh { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; vertical-align: middle; flex: none; }
.tk-refresh:hover { border-color: var(--orange); color: var(--orange); }
.tk-refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tk-refresh.is-spin svg { animation: tk-spin .8s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
.tk-title h2 { display: flex; align-items: center; gap: 10px; }

/* Ventanita de Llamar (views/leads/_contact_tools.php): número grande, QR para el celular y cómo salió la llamada. */
.call-dial { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.call-num { font-size: 30px; font-weight: 600; letter-spacing: .5px; user-select: all; }
.call-qr { width: 200px; height: 200px; }
.call-qr svg { width: 100%; height: 100%; display: block; }
.call-help { margin: 0; }
.call-outcome { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line, #e5e7eb); display: flex; flex-direction: column; gap: 12px; }
.call-outcome legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.call-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.call-options label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.btn-link { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

/* Flechas de las tiras que se desplazan de lado (hscroll.js): aparecen solo del lado donde hay más. */
.hs-wrap { position: relative; min-width: 0; }
.hs-arrow { position: absolute; z-index: 3; width: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 2px; border: 0; color: var(--brand); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s; background: none; }
.hs-arrow svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .25); flex: none; }
.hs-arrow.hs-l { justify-content: flex-start; }
.hs-arrow.hs-l svg { transform: rotate(180deg); }
.hs-arrow.on { opacity: 1; pointer-events: auto; }

/* Botón «Ver los N leads de …» al final de la lista del reporte de un vendedor. */
.dash-more { margin: 12px 0 0; }
.dash-more .btn { width: 100%; justify-content: center; }

/* Tablero: encabezado limpio (módulo, a quién ves, periodo) y una sola tira de periodos (2026-11-07). */
.dash-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.dash-top-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.dash-top h1 { margin: 2px 0 2px; font-size: 26px; line-height: 1.15; }
.dash-top p { margin: 0; font-size: 13px; color: var(--muted); }
.dash-top-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-periods { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: auto; max-width: 100%; margin-bottom: 10px; }
.dash-periods::-webkit-scrollbar { display: none; }
.dash-periods a { flex: none; white-space: nowrap; }
.dash-range { margin-bottom: 12px; width: fit-content; max-width: 100%; }
.dash-range[hidden] { display: none; }
.dash-pills { margin-top: 4px; }
@media (max-width: 720px) {
    .dash-top h1 { font-size: 22px; }
    .dash-periods { display: flex; width: auto; }
    .dash-periods a { flex: none; padding: 7px 12px; }
}

/* El nombre (Equipo o el vendedor) arriba de su resumen: grande, grueso y en azul. */
.dash-split-head .dash-summary-who { display: block; width: 100%; margin: 2px 0 4px; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--brand); letter-spacing: -.01em; }
@media (max-width: 720px) { .dash-split-head .dash-summary-who { font-size: 22px; } }

/* «← Tablero» arriba de Programar reporte cuando se llega desde el Tablero. */
.back-link { display: inline-block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--brand); }

/* Bandeja: "Asigna a otro agente" en naranja Direnet, para que el gerente no lo pase de largo. */
.assign-cta { display: block; margin: 4px 0 6px; color: #ff6a07; font-size: 15px; font-weight: 700; }
.chat-side select.assign-select, select.assign-select { border: 2px solid #ff6a07; }
.assign-select:focus { outline: 2px solid #ff6a07; outline-offset: 1px; }

/* Clientes: tabla para ver (módulos como etiquetas) y página de cada cliente con tarjetas por módulo. */
.cl-mods { display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; }
.ce-form { display: flex; flex-direction: column; gap: 18px; }
.ce-card h2, .ce-section h2 { margin: 0 0 12px; }
.ce-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.ce-section > p { margin: -6px 0 12px; }
.ce-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ce-mod { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 12px 14px; }
.ce-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.form .ce-report { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.ce-report input { margin: 0; }
.ce-mod:has(.toggle-input:not(:checked)) { background: #f8fafc; }
.ce-sec { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ce-sec-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ce-mod:has(.toggle-input:not(:checked)) .ce-sec { opacity: .55; }
.form .ce-domain { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; font-size: 14px; }
/* Un campo de la tarjeta que solo sale al elegir «Otro» (Agente IA): escondido de verdad aunque sea flex. */
.form .ce-domain[hidden] { display: none; }
.ce-actions { display: flex; justify-content: flex-end; }
.cl-mods-mobile { display: none; }
@media (max-width: 720px) {
    /* Clientes en celular: nombre, activo y Editar; lo demás se ve al editar. */
    .clients-table th:nth-child(2), .clients-table td:nth-child(2), .clients-table th:nth-child(3), .clients-table td:nth-child(3),
    .clients-table th:nth-child(4), .clients-table td:nth-child(4), .clients-table th:nth-child(5), .clients-table td:nth-child(5) { display: none; }
    .cl-mods-mobile { display: block; margin-top: 2px; }
}

/* Bandeja fase 3: Messenger (azul) e Instagram (rosa). */
.chat-avatar.inbox-channel.is-messenger { background: #0084ff; }
.chat-avatar.inbox-channel.is-messenger svg { fill: currentColor; }
.chat-avatar.inbox-channel.is-instagram { background: #e1306c; }
.chat-avatar.inbox-channel.is-instagram svg { fill: none; stroke: currentColor; stroke-width: 2; }
.chat-item:not(.is-unread) .chat-avatar.inbox-channel.is-messenger { background: #e0efff; color: #0084ff; }
.chat-item:not(.is-unread) .chat-avatar.inbox-channel.is-instagram { background: #fde4ee; color: #e1306c; }

/* ---------- Publicaciones (calendario, lista, post) ---------- */
:root {
    --pub-borrador: #eef1f6; --pub-borrador-ink: #475569;
    --pub-pendiente: #fef3c7; --pub-pendiente-ink: #92400e;
    --pub-programado: var(--brand-soft); --pub-programado-ink: var(--brand-strong);
    --pub-publicando: #f3e8ff; --pub-publicando-ink: var(--mail);
    --pub-publicado: #dcfce7; --pub-publicado-ink: #166534;
    --pub-rechazado: #fee2e2; --pub-rechazado-ink: #b91c1c;
    --pub-error: #fee2e2; --pub-error-ink: #b91c1c;
    --pub-facebook: #1877f2; --pub-instagram: #e1306c;
}
.pub-st-borrador { background: var(--pub-borrador); color: var(--pub-borrador-ink); }
.pub-st-pendiente { background: var(--pub-pendiente); color: var(--pub-pendiente-ink); }
.pub-st-programado { background: var(--pub-programado); color: var(--pub-programado-ink); }
.pub-st-publicando { background: var(--pub-publicando); color: var(--pub-publicando-ink); }
.pub-st-publicado { background: var(--pub-publicado); color: var(--pub-publicado-ink); }
.pub-st-rechazado { background: var(--pub-rechazado); color: var(--pub-rechazado-ink); text-decoration: line-through; }
.pub-st-error { background: var(--pub-error); color: var(--pub-error-ink); box-shadow: inset 3px 0 0 var(--danger); }
.pub-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: none; }
.pub-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-tabs { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.pub-tab { padding: 5px 14px; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 600; border: 0; background: transparent; cursor: pointer; font: inherit; }
.pub-tab.active { background: var(--brand-soft); color: var(--brand-strong); }
.pub-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-mes { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.pub-mes-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pub-mes-head h2 { margin: 0; font-size: 18px; min-width: 180px; text-align: center; }
.pub-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pub-dow { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 0; }
.pub-day { position: relative; min-height: 104px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 22px; background: var(--card); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-grid-week .pub-day { min-height: 320px; }
.pub-day-out { background: var(--bg); }
.pub-day-out .pub-day-num { opacity: .5; }
.pub-day-past { background: var(--bg); }
.pub-day-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pub-day-num { font-size: 12px; font-weight: 600; color: var(--muted); }
.pub-day-today .pub-day-num { color: var(--brand); }
.pub-day.pub-drop { background: var(--brand-soft); border-style: dashed; }
.pub-day-add { position: absolute; right: 4px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--brand); text-decoration: none; font-weight: 700; opacity: 0; transition: opacity .12s; }
.pub-day:hover .pub-day-add, .pub-day-add:focus { opacity: 1; background: var(--brand-soft); }
.pub-card { display: flex; gap: 5px; align-items: center; padding: 3px 5px; border-radius: 6px; text-decoration: none; font-size: 12px; line-height: 1.25; min-width: 0; }
.pub-card[draggable="true"] { cursor: grab; }
.pub-card.pub-dragging { opacity: .5; }
.pub-card-body { display: flex; flex-direction: column; min-width: 0; }
.pub-card-hora { font-weight: 700; }
.pub-card-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.pub-thumb { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; flex: none; background: var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); }
.pub-thumb-lg { width: 64px; height: 64px; border-radius: 8px; font-size: 18px; }
.pub-thumb-video { background: var(--navy); color: #fff; }
.pub-red { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.pub-red-facebook { color: var(--pub-facebook); }
.pub-red-instagram { color: var(--pub-instagram); }
.pub-list { display: flex; flex-direction: column; gap: 8px; }
.pub-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; text-decoration: none; color: inherit; }
.pub-row:hover { border-color: var(--brand); }
.pub-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-row-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pub-row-texto { overflow: hidden; text-overflow: ellipsis; }
.pub-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.pub-form h2 { font-size: 16px; margin: 6px 0 8px; }
.pub-cuentas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pub-cuenta { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.pub-cuenta-off { opacity: .55; cursor: not-allowed; background: var(--bg); }
.pub-media { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pub-media-item { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.pub-cuando { display: flex; gap: 12px; flex-wrap: wrap; }
.pub-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pub-actions form { margin: 0; }
.pub-status { margin-bottom: 14px; }
.pub-status-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pub-error { color: var(--pub-error-ink); background: var(--pub-error); border-radius: 8px; padding: 8px 12px; font-weight: 600; }
.pub-textos summary { cursor: pointer; color: var(--brand); font-weight: 600; margin: 4px 0 8px; }
.pub-preview { position: sticky; top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.pub-preview h2 { font-size: 16px; margin: 0 0 8px; }
.pub-preview-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.pub-prev-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.pub-prev-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; }
.pub-prev-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); }
.pub-prev-ig .pub-prev-avatar { box-shadow: 0 0 0 2px var(--pub-instagram); }
.pub-prev-img { aspect-ratio: 1 / 1; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.pub-prev-ig .pub-prev-img { aspect-ratio: 4 / 5; order: -1; }
.pub-prev-img img { width: 100%; height: 100%; object-fit: cover; }
.pub-prev-text { padding: 8px 10px; margin: 0; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.pub-prev-ig-crop { display: none; padding: 0 10px 8px; gap: 4px; }
.pub-prev-ig .pub-prev-ig-crop { display: flex; }
.pub-formatos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pub-thumb-historia { aspect-ratio: 9 / 16; width: 54px; height: auto; object-fit: cover; }
.pub-prev-historia .pub-prev-img { aspect-ratio: 9 / 16; }
.pub-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
dialog.pub-dialog { width: min(820px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(10, 36, 89, .25); color: var(--text); background: var(--card); }
dialog.pub-dialog::backdrop { background: rgba(10, 36, 89, .35); }
dialog.pub-dialog h3 { margin: 0 0 4px; font-size: 18px; }
.pub-dialog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; max-height: 62vh; overflow: auto; align-items: start; }
.pub-dialog-actions { justify-content: flex-end; }
.pub-dialog-actions .btn { width: auto; }
@media (max-width: 900px) {
    .pub-editor { grid-template-columns: 1fr; }
    .pub-preview { position: static; }
}
@media (max-width: 700px) {
    .pub-grid { gap: 2px; }
    .pub-day { min-height: 70px; padding: 2px 2px 18px; }
    .pub-card-texto, .pub-card .pub-thumb { display: none; }
    .pub-legend { display: none; }
}

/* ---------- Roles (Configuración → Roles, tipo Google Workspace) ---------- */
.role-type { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--orange-soft); color: var(--orange-strong); }
.role-type-system { background: var(--brand-soft); color: var(--brand-strong); }
.roles-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.roles-actions form { margin: 0; }
.role-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.role-tags a { display: contents; text-decoration: none; }
.role-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--brand-soft); color: var(--brand-strong); }
.role-steps { display: flex; gap: 18px; list-style: none; padding: 0 0 12px; margin: 0 0 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.role-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.role-step span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--line); color: var(--muted); font-size: 13px; }
.role-step.active { color: var(--text); }
.role-step.active span { background: var(--orange); color: #fff; }
.role-step.done span { background: var(--ok); color: #fff; font-size: 0; }
.role-step.done span::after { content: "✓"; font-size: 14px; }
.role-tree { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.role-mod { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.role-mod summary { cursor: pointer; list-style: none; }
.role-mod summary::-webkit-details-marker { display: none; }
.role-group { margin: 8px 0 0 22px; display: flex; flex-direction: column; gap: 4px; }
.role-group-name { font-weight: 600; }
.role-perm { margin-left: 22px; display: flex; align-items: center; gap: 6px; }
.role-review { margin: 0; padding-left: 20px; }
.role-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.role-person { display: flex; gap: 8px; align-items: flex-start; }
.pager { display: flex; gap: 6px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
@media (max-width: 700px) {
    .roles-table thead { display: none; }
    .roles-table tr { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); }
    .roles-table td { display: block; border: 0; padding: 3px 0; }
    .roles-table td.num { text-align: left; }
    .role-group, .role-perm { margin-left: 12px; }
}
/* Botón invisible que recibe el Enter de un formulario (para que Enter no dispare «Invitar»). */
.form-default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; }
.dash-clock-note { margin: -4px 0 10px; }

/* Íconos de origen (Bandeja: círculos y pestañas; Leads: Canal y fuente). Un solo juego: src/messaging/inbox.php INBOX_ORIGINS. */
.origin-icon, .inbox-tab-icon { display: inline-flex; position: relative; vertical-align: -3px; }
.origin-icon { margin-right: 6px; }
.origin-icon > svg, .inbox-tab-icon > svg { width: 16px; height: 16px; }
.inbox-tab-icon > svg { width: 17px; height: 17px; }
.origin-icon.is-whatsapp, .inbox-tab-icon.is-whatsapp { color: #1fa855; }
.origin-icon.is-form, .inbox-tab-icon.is-form { color: #ff6a07; }
.origin-icon.is-email, .inbox-tab-icon.is-email { color: var(--mail); }
.origin-icon.is-messenger, .inbox-tab-icon.is-messenger { color: #0084ff; }
.origin-icon.is-instagram, .inbox-tab-icon.is-instagram { color: #e1306c; }
.inbox-channels a.active .inbox-tab-icon { color: #fff; }
.origin-icon.is-whatsapp svg, .origin-icon.is-messenger svg, .inbox-tab-icon.is-whatsapp svg, .inbox-tab-icon.is-messenger svg { fill: currentColor; }
.origin-icon.is-form svg, .origin-icon.is-email svg, .origin-icon.is-instagram svg,
.inbox-tab-icon.is-form svg, .inbox-tab-icon.is-email svg, .inbox-tab-icon.is-instagram svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* WhatsApp widget: globito naranja (el sitio web) en la esquina del logo. */
.chat-avatar.inbox-channel { position: relative; }
.origin-badge { position: absolute; right: -3px; bottom: -3px; width: 42%; height: 42%; min-width: 9px; min-height: 9px; border-radius: 50%; background: #ff6a07; border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; }
.origin-icon .origin-badge { right: -4px; bottom: -4px; width: 10px; height: 10px; border-width: 1px; }
.origin-badge svg { width: 72% !important; height: 72% !important; fill: none !important; stroke: #fff; stroke-width: 2.4; }
.chat-item.is-joined .origin-badge { background: #8a93a0; }
.origin-icon.is-widget { margin-right: 9px; }

/* Aviso de versión nueva en la Bandeja (cuando hay algo a medio escribir y no se recarga sola). */
.new-build-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; background: #0a2459; color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(10, 36, 89, .25); display: flex; gap: 10px; align-items: center; }
.new-build-bar button { background: #0055f8; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 600; cursor: pointer; }

/* Agente IA (módulo `ia`): solo clases nuevas .ia-*; no cambian nada de otras pantallas. */
.ia-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: .02em; vertical-align: 1px; }
.ia-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: -2px 16px 8px; font-size: 13px; }
.ia-bar-form { margin: 0; }
.ia-bar .sw-toggle, .ia-chat .sw-toggle { gap: 8px; font-size: 13px; }
.ia-bar .sw-toggle b { color: var(--text); font-weight: 700; }
.ia-credits { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ia-credits:hover { color: var(--brand); }
.ia-bar-empty { color: #b45309; }
.ia-bar-empty b { color: var(--text); }
.ia-chat { display: inline-flex; align-items: center; margin: 0; }
.ia-chat .sw-toggle i { width: 30px; height: 14px; }
.ia-chat .sw-toggle i::after { width: 18px; height: 18px; top: -2px; }
.ia-chat .sw-toggle input:checked + i::after { left: 14px; }
.ia-chat .ia-tag { margin-left: 0; }
.ia-words .bar-row { margin: 0; }
.ia-words p { margin: 10px 0 0; }
.ia-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.ia-add .card { margin-bottom: 16px; }
.ia-questions { list-style: none; margin: 0; padding: 0; }
.ia-questions li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ia-questions li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ia-questions form { margin: 0; flex: none; }
.ia-url { display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ia-edit-row > td { background: var(--surface-2, #f7f8fa); padding: 16px; }
.ia-edit-row[hidden] { display: none; }
.ia-handoff-users { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; }
.ia-handoff-users[hidden] { display: none; }
.ia-handoff-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.ia-handoff-list li { padding-left: 4px; }
.ia-handoff-list li span { display: inline-block; min-width: 180px; font-weight: 600; }
.ia-handoff-list li .btn { margin-left: 4px; }
.ia-handoff-found { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-handoff-found [hidden] { display: none; }
.ia-mine { display: flex; flex-direction: column; gap: 14px; }
.ia-mine form { margin: 0; }
.ia-empty { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--orange-soft); color: #9a3412; }
.ia-test { display: flex; flex-direction: column; gap: 8px; }
.ia-test p { margin: 0; }
.ia-test-bubble { align-self: flex-start; max-width: min(100%, 560px); padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #e7f6ec; overflow-wrap: anywhere; }
.ia-test-who { display: block; font-size: 12px; font-weight: 600; color: var(--brand); }
.ia-users .ia-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.ia-users .ia-num { width: 110px; text-align: right; }
.ia-balance { font-size: 14px; }
@media (max-width: 760px) {
    .ia-bar { margin: -2px 12px 6px; }
    .ia-questions li { flex-direction: column; align-items: flex-start; }
    .ia-url { max-width: 200px; }
}
.ia-loads { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* Reporte «Leads + Google Ads / SEO» impreso (Descargar PDF): más apretado, sin sombras y con las tablas completas. */
@media print {
    .leads-report .kpis { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; margin-bottom: 6px; }
    .leads-report .card .kpis { grid-template-columns: repeat(4, 1fr); }
    .leads-report .kpi { padding: 7px 10px; border-radius: 8px; box-shadow: none; break-inside: avoid; }
    .leads-report .kpi span { font-size: 8.5px; }
    .leads-report .kpi b { font-size: 18px; line-height: 1.2; }
    .leads-report .kpi em { font-size: 8px; margin-top: 0; }
    .leads-report .card { padding: 9px 11px; border-radius: 8px; box-shadow: none; margin-bottom: 7px; }
    .leads-report .card h2 { font-size: 11.5px; margin: 0 0 5px; }
    .leads-report p { margin: 4px 0; }
    .leads-report .small { font-size: 8.5px; line-height: 1.35; }
    .leads-report .table-wrap { border: 0; border-radius: 0; overflow: visible; }
    .leads-report .table { font-size: 9px; }
    .leads-report .table th, .leads-report .table td { padding: 3px 6px; white-space: normal; }
    .leads-report .table th { font-size: 8px; }
    .leads-report th.sort button, .leads-report th.sort > a { padding: 3px 6px; white-space: normal; }
    .leads-report th.sort i { display: none; }
    .leads-report .table thead { display: table-header-group; }
    .leads-report .table tr { break-inside: avoid; }
    /* La tabla de leads sí se parte entre hojas: es la única larga. */
    .leads-report .lr-long { break-inside: auto; }
    .leads-report .report-grid { grid-template-columns: repeat(3, 1fr); gap: 0 7px; }
    .leads-report .bars { gap: 2px; }
    .leads-report .bar-row { font-size: 8.5px; gap: 6px; grid-template-columns: minmax(60px, 46%) 1fr auto; }
    .leads-report .bar-track { height: 6px; }
    .leads-report .bar-value { min-width: 44px; }
    .leads-report .legend li { font-size: 8.5px; }
    .leads-report .stackbar { height: 7px; margin: 3px 0 7px; }
    /* Leads: anchos fijos para que el correo y la solicitud quepan completos y nada se salga de la hoja. */
    .leads-report .lr-leads { table-layout: fixed; }
    .leads-report .lr-leads th, .leads-report .lr-leads td { font-size: 7.8px; padding: 3px 4px; overflow-wrap: anywhere; }
    .leads-report .lr-leads th.sort button, .leads-report .lr-leads th.sort > a { padding: 3px 4px; }
    .leads-report .lr-leads th:first-child { width: 9%; }
    .leads-report .lr-leads th:last-child { width: 24%; }
    .leads-report .lr-leads th:nth-last-child(2) { width: 7%; }
    .leads-report .lr-leads th:nth-last-child(3) { width: 9%; }
    .leads-report .lr-leads th:nth-last-child(4) { width: 10%; }
    .leads-report .lr-leads th:nth-last-child(5) { width: 17%; }
    .leads-report .lr-leads a { color: inherit; text-decoration: none; }
    /* Su encabezado no se repite en cada hoja (Chrome lo repetía a medias) y todos los títulos quedan a la misma altura. */
    .leads-report .lr-leads thead { display: table-row-group; }
    .leads-report .lr-leads th { vertical-align: middle; padding: 3px 4px; }
}

/* Total al pie de cada bloque del reporte de leads. */
.block-total { display: flex; justify-content: space-between; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; }
@media print { .leads-report .block-total { margin-top: 4px; padding-top: 3px; font-size: 8.5px; } }

/* Reporte de leads impreso con el diseño de los PDF de las automatizaciones (David, 2026-11-13): logo a la izquierda y
   título a la derecha sobre una raya naranja, tarjetas con su raya de color, títulos de sección naranjas y tablas con
   encabezado naranja claro y renglones alternados. */
@media print {
    body:has(.leads-report) .report-head { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 0 0 9px; margin: 0 0 12px; border-bottom: 2px solid #f26a1b; }
    body:has(.leads-report) .report-head .brand-report { grid-row: 1 / 3; margin: 0; padding: 0; border: 0; }
    body:has(.leads-report) .report-head .brand-made { display: none; }
    body:has(.leads-report) .report-head h1 { display: block; justify-self: end; margin: 0; text-align: right; font-size: 15px; font-weight: 700; color: #0f172a; }
    body:has(.leads-report) .report-head .muted { display: block; justify-self: end; text-align: right; font-size: 10px; }
    .leads-report, .leads-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .leads-report .kpi { border-radius: 0; border: 1px solid #e4e7ec; border-left: 3px solid var(--k, #f26a1b); }
    .leads-report .kpi .dot { display: none; }
    .leads-report .kpi span { color: #64748b; font-weight: 400; }
    .leads-report .kpi b { font-weight: 800; color: #0f172a; }
    .leads-report .card { border: 0; border-radius: 0; padding: 0; background: none; margin-bottom: 10px; }
    .leads-report .card h2 { color: #f26a1b; font-size: 12px; font-weight: 700; border-left: 4px solid #f26a1b; padding: 1px 0 1px 7px; margin: 8px 0 6px; }
    .leads-report .card h2 .dot { display: none; }
    .leads-report .card .kpis { margin-top: 2px; }
    .leads-report .report-grid { gap: 2px 16px; }
    .leads-report .table th { background: #fff1e8; color: #f26a1b; font-weight: 700; text-transform: none; letter-spacing: 0; border-bottom: 0; }
    .leads-report .table th.sort button, .leads-report .table th.sort > a { color: #f26a1b; font-weight: 700; }
    .leads-report .table td { border-bottom: 0; }
    .leads-report .table tbody tr:nth-child(even) td { background: #f8fafc; }
    .leads-report .table tfoot td { border-top: 1px solid #cbd5e1; font-weight: 700; background: none; }
    .leads-report .block-total { border-top-color: #cbd5e1; }
    .leads-report .lr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 6px; border-top: 1px solid #e4e7ec; color: #64748b; font-size: 8px; }
    .leads-report .lr-foot img { height: 13px; width: auto; }
}

/* Reportes: «Enviar por correo» una vez, con el periodo abierto. */
.send-once { position: relative; display: inline-block; }
.send-once > summary { list-style: none; cursor: pointer; }
.send-once > summary::-webkit-details-marker { display: none; }
.send-once-box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(380px, 90vw); margin: 0; text-align: left; }
.send-once-box input[type=text] { width: 100%; }
/* Cada canal: casilla arriba y su campo debajo, con aire; el campo solo se ve con la casilla marcada. */
.send-once-box .send-ch { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
.send-once-box .send-ch:not(:has(> label.inline input:checked)) > .fl { display: none; }
.send-once-box .wa-add { display: flex; gap: 8px; margin-top: 10px; }
.send-once-box .wa-add .wa-phone { flex: 1; min-width: 0; }
.send-once-box label.inline { color: var(--text); font-weight: 500; }
.send-once-box label.inline .small { font-weight: 400; }
.send-once-box .send-excel { margin: 2px 0 6px; }
.send-once-box .send-go { margin: 12px 0 0; }

/* Usuarios (2026-11-13): lista de personas con «Editar» que abre sus datos en su lugar. Mismo HTML en escritorio y móvil. */
.usr-head { align-items: center; }
.usr-count { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #eef2f6; color: var(--muted); font-size: 14px; font-weight: 600; vertical-align: 4px; }
.usr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.usr-scheme { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 8px 14px; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 10px; }
.usr-scheme-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.usr-scheme b { color: var(--navy); }
.usr-scheme .btn { margin-left: auto; background: #fff; }
.usr-roles[hidden], .usr-add[hidden] { display: none; }

/* Alta: dos columnas en escritorio, una en móvil; campos uno debajo de otro. */
.usr-add h2 { margin-top: 0; }
.usr-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.usr-add-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.usr-step { font-weight: 600; color: var(--navy); margin-top: 4px; }
.usr-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #475569; }
.usr-field > input, .usr-field > select, .usr-field .wa-phone, .usr-field .password-field { width: 100%; box-sizing: border-box; font-weight: 400; }
.usr-field .wa-phone { display: flex; gap: 6px; }
.usr-field .wa-phone select { flex: none; width: 104px; }
.usr-field .wa-phone input { flex: 1; min-width: 0; }
.usr-hint { font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.usr-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.usr-choice:has(input:checked) { border-color: var(--brand); background: #f5f8ff; }
.usr-choice input { margin-top: 3px; }
.usr-choice b, .usr-choice small { display: block; }
.usr-choice small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.usr-add-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Interruptor (WhatsApp / Correo). */
.usr-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.usr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.usr-switch i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
.usr-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.usr-switch input:checked + i { background: #16a34a; }
.usr-switch input:checked + i::after { left: 21px; }
.usr-switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Lista. */
.usr-list { display: flex; flex-direction: column; gap: 8px; }
.usr { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; }
.usr.is-open { border-color: #c7d7fe; box-shadow: 0 10px 30px -18px rgba(15, 26, 61, .35); }
.usr.is-dirty { background: #f5f8ff; }
.usr.is-off .usr-who, .usr.is-off .usr-cell:not(.usr-state) { opacity: .6; }
.usr-sum { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(120px, 1fr) minmax(150px, 1.1fr) minmax(170px, 1.1fr) 96px 84px; gap: 12px; align-items: center; padding: 10px 14px; }
.usr-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.usr-who > div { min-width: 0; }
.usr-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-mail { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-cell { font-size: 14px; min-width: 0; }
.usr-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.usr-on, .usr-off { font-size: 13px; font-weight: 600; }
.usr-on { color: #15803d; }
.usr-off { color: #b91c1c; }
.usr-edit { justify-self: end; }
.usr:not(.is-open) .usr-body { display: none; }
.usr-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding: 14px; border-top: 1px solid var(--line); }
.usr-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.usr-sec h3 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.usr-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.usr-check input { margin-top: 3px; flex: none; }
.usr-check small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.usr-sub-title { margin-top: 4px; font-size: 12px; font-weight: 600; color: #64748b; }
.usr-fixed { font-size: 14px; }
.usr-chat { display: flex; flex-direction: column; gap: 8px; }
.usr-chat fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.usr-chat fieldset[disabled] { opacity: .45; }
.usr-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.usr-actions form { margin: 0; }
.usr-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.usr-actions-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usr-invite { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.usr-invite-form { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.usr-invite-label { font-size: 12.5px; font-weight: 600; color: #64748b; }
.usr-invite .usr-switch { font-size: 13px; gap: 6px; }
.usr-save { min-width: 120px; }

@media (max-width: 1100px) {
    .usr-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usr-sum { grid-template-columns: minmax(180px, 1.4fr) 1fr 1fr 84px; }
    .usr-sum .usr-cell[data-label="Acceso"], .usr-sum .usr-state { grid-row: 2; }
    .usr-sum .usr-cell[data-label="Acceso"] { grid-column: 1 / 3; }
    .usr-sum .usr-state { grid-column: 3; }
}
@media (max-width: 760px) {
    .usr-head-actions { width: 100%; }
    .usr-head-actions .btn { flex: 1; }
    .usr-add-grid { grid-template-columns: 1fr; }
    .usr-add-actions .btn { flex: 1; }
    .usr-sum { grid-template-columns: 1fr auto; gap: 8px 10px; }
    .usr-who { grid-column: 1; grid-row: 1; }
    .usr-edit { grid-column: 2; grid-row: 1; }
    .usr-sum .usr-cell, .usr-sum .usr-cell[data-label="Acceso"], .usr-sum .usr-state { grid-column: 1 / -1; grid-row: auto; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding-left: 0; }
    .usr-sum .usr-cell::before { content: attr(data-label); flex: none; width: 68px; font-size: 12px; font-weight: 600; color: #64748b; }
    .usr-sub { display: inline; margin: 0; }
    .usr-body { grid-template-columns: 1fr; }
    .usr-actions-row { flex-direction: column-reverse; align-items: stretch; }
    .usr-actions-more > form, .usr-actions-more > .usr-delete { flex: 1; }
    .usr-actions-more .btn { width: 100%; }
    .usr-save-form, .usr-save { width: 100%; }
    .users-saveall { justify-content: space-between; flex-wrap: nowrap; font-size: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

.usr-preview { font-size: 13px; font-weight: 600; color: var(--brand); }
.usr-preview[hidden] { display: none; }
.usr-note { padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.4; }
.usr-invite-note { flex-basis: 100%; }

.usr-field[hidden], .usr-preview[hidden], .usr-add-actions .btn[hidden] { display: none; }
.usr .user-pending { margin: 0; white-space: nowrap; font-size: 11px; padding: 2px 8px; }
.usr .u-row-msg { font-size: 13px; line-height: 1.3; color: #b91c1c; }
.usr .u-row-msg.is-ok { color: #15803d; }
.usr .u-actions button.is-done { background: #16a34a; border-color: #16a34a; color: #fff; }
.usr .u-actions button.is-failed { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.usr.is-dirty .usr-save { box-shadow: 0 0 0 3px #c7d7fe; }
.usr-list + .users-saveall { margin-top: 12px; }
.usr-list { margin-bottom: 16px; }
.usr .channels-cell > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Vista previa de la invitación (Usuarios → «Ver cómo le llega»). */
.invp { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.invp-col { flex: 1 1 340px; min-width: 0; max-width: 560px; }
.invp-col h2 { margin: 0 0 2px; font-size: 16px; }
.invp-col .muted { margin: 0 0 10px; }
.invp-mail { display: block; width: 100%; height: 800px; border: 1px solid var(--line); border-radius: 12px; background: #f4f6fb; }
.invp-wa { max-width: 380px; background: #e5ddd5; padding: 16px 12px; border-radius: 12px; }
.invp-bubble { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.invp-bubble img { display: block; width: 100%; height: auto; }
.invp-text { padding: 10px 12px; font-size: 15px; line-height: 1.4; color: #111b21; }
.invp-btn { display: block; text-align: center; padding: 11px; border-top: 1px solid #e9edef; color: #027eb5; font-size: 15px; }