/* ═══════════════════════════════════════════════════════════════
   Flowtavia Communications — 8 channels (Preference, Call, SMS,
   Email, WhatsApp, Meetings, Facebook Messenger, Notes)
   Source: files-UI/flowtavia_designs/desktop/04_communication_*.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Page subheader ── */
.comms-subheader {
    background: var(--white);
    padding: 14px 22px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--gray-100);
    gap: 12px;
    flex-wrap: wrap;
}
.comms-title {
    font-size: 15px; font-weight: 600;
    color: var(--blue-800);
    display: flex; align-items: center; gap: 8px;
}
.comms-title > i { color: var(--gold-400); font-size: 17px; }
.comms-breadcrumb { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.comms-meta { font-size: 12px; font-weight: 600; color: var(--blue-700); }

/* ── Tab pill bar (horizontal scroll on mobile) ── */
.comms-tabs {
    background: var(--white);
    padding: 10px 22px;
    border-bottom: 1px solid var(--gray-100);
}
.comms-tabs__inner {
    display: flex; gap: 4px;
    background: var(--gray-100);
    padding: 4px;
    border-radius: 10px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}
.comms-tab {
    padding: 7px 14px;
    font-size: 12px; font-weight: 500;
    color: var(--gray-500);
    cursor: pointer; border: none; background: none;
    border-radius: 8px;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
    transition: all .15s;
    font-family: inherit;
}
.comms-tab i { font-size: 14px; }
.comms-tab:hover { color: var(--gray-700); }
.comms-tab.active {
    background: var(--white);
    color: var(--blue-800);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
}
.comms-tab.active i { color: var(--gold-400); }

/* ── Content shell ── */
.comms-content {
    padding: 18px 22px;
    flex: 1;
    background: var(--gray-50);
}

/* ── Generic comms card (white, gray-100 border, gold-titled) ── */
.comms-card {
    background: var(--white);
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid var(--gray-100);
    box-shadow: 0 1px 4px rgba(13,53,133,.06);
}
.comms-card-title {
    font-size: 13px; font-weight: 600;
    color: var(--blue-800);
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 14px;
}
.comms-card-title i { font-size: 16px; color: var(--gold-400); }

/* ── Form field tokens (auth-field style but tighter) ── */
.comms-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.comms-field__label {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--gray-400);
}
.comms-field__input {
    display: flex; align-items: center; gap: 9px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-100);
    border-radius: 10px;
    padding: 9px 12px;
    transition: border .15s, box-shadow .15s;
}
.comms-field__input:focus-within {
    border-color: var(--blue-600);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(16,66,160,.07);
}
.comms-field__input > i {
    font-size: 16px; color: var(--blue-600); opacity: .6; flex-shrink: 0;
}
.comms-field__input input,
.comms-field__input select,
.comms-field__input textarea {
    background: none; border: none; outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; color: var(--gray-900);
    width: 100%;
}
.comms-field__input textarea { resize: none; }
.comms-field__input--readonly {
    background: var(--blue-50);
    border-color: var(--blue-100);
}
.comms-field__input--readonly input { font-weight: 600; color: var(--blue-800); }

/* ── Buttons (comms scoped, prevents collision with auth-btn) ── */
.comms-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; border: none;
    text-decoration: none;          /* also when it is an <a> (Abrir el editor, Biblioteca, Inscritos…) */
    transition: all .15s;
}
.comms-btn:hover { text-decoration: none; }
.comms-btn i { font-size: 15px; }
.comms-btn--primary {
    background: var(--navy-800); color: var(--on-accent);
    box-shadow: 0 4px 14px rgba(13,53,133,.22);
}
.comms-btn--primary:hover:not(:disabled) {
    background: var(--navy-700); transform: translateY(-1px);
}
.comms-btn--primary i { color: var(--gold-300); }
.comms-btn--secondary {
    background: var(--white); color: var(--gray-500);
    border: 1.5px solid var(--gray-200);
}
.comms-btn--secondary:hover:not(:disabled) {
    border-color: var(--gray-300); color: var(--gray-700);
}
/* Ghost: a quiet secondary action (Archivar, Expandir todas, Dar intentos extra…). Transparent over any surface, a hairline
   border so it still reads as a button, tokens only so it follows the light and dark themes. Never the UA's ButtonFace grey. */
.comms-btn--ghost {
    background: transparent; color: var(--gray-600);
    border: 1.5px solid var(--gray-200);
    text-decoration: none;
}
.comms-btn--ghost:hover:not(:disabled) {
    background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-800);
    text-decoration: none;
}
.comms-btn--ghost:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.comms-btn--ghost.plan-card__danger:hover:not(:disabled) { background: var(--red-100); border-color: var(--red-border); }
.comms-btn--danger {
    background: var(--red-100); color: var(--red-500);
    border: 1.5px solid var(--red-border);
}
.comms-btn--sm { padding: 6px 14px; font-size: 12px; }
.comms-btn:disabled { opacity: .5; cursor: not-allowed; }

.comms-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 880px) {
    .comms-grid-2 { grid-template-columns: 1fr; }
}
.comms-stack { display: flex; flex-direction: column; gap: 12px; }
.comms-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════
   1) CALL screen — phone bar + script + call log
   ════════════════════════════════════════════════════════════ */
.comms-phone-bar {
    background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
    border-radius: 14px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    color: var(--on-accent);
}
.comms-phone-bar__num {
    font-size: 15px; font-weight: 600;
    color: var(--on-accent);
    flex: 1;
}
.comms-phone-bar__status { font-size: 12px; color: rgba(255,255,255,.7); }
.comms-call-actions { display: flex; gap: 10px; }
.comms-call-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer;
    border: none; background: none;
    font-family: inherit;
}
.comms-call-btn__circle {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.15);
}
.comms-call-btn__circle i { font-size: 20px; color: var(--on-accent); }
.comms-call-btn__circle--hangup { background: #e03030; }
.comms-call-btn__label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.7); }

.comms-script-card {
    background: var(--blue-50);
    border: 1.5px solid var(--blue-100);
    border-radius: 14px;
    overflow: hidden;
}
.comms-script-header {
    background: var(--navy-800);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.comms-script-title {
    font-size: 13px; font-weight: 600; color: var(--on-accent);
    display: flex; align-items: center; gap: 7px;
}
.comms-script-title i { color: var(--gold-300); }
.comms-script-body {
    padding: 14px 16px;
    font-size: 12px; color: var(--gray-700); line-height: 1.8;
    max-height: 200px; overflow-y: auto;
}

.comms-call-result-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 560px) { .comms-call-result-row { grid-template-columns: 1fr; } }
.comms-call-result {
    display: flex; gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    cursor: pointer; align-items: center;
    font-size: 13px; font-weight: 500; color: var(--gray-600);
    background: var(--white);
}
.comms-call-result.selected--answered {
    border-color: var(--green-500);
    background: var(--green-100);
    color: var(--green-500);
}
.comms-call-result.selected--voicemail {
    border-color: var(--gold-400);
    background: var(--gold-100);
    color: var(--gold-600);
}
.comms-call-result.selected--noanswer {
    border-color: var(--orange-500);
    background: var(--orange-100);
    color: var(--orange-500);
}

/* ════════════════════════════════════════════════════════════
   2) CHAT (SMS / WhatsApp / Facebook Messenger)
   ════════════════════════════════════════════════════════════ */
.comms-chat {
    display: flex; flex-direction: column;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    overflow: hidden;
    height: 540px;
}
.comms-chat--wa { background: #E5DDD5; }
.comms-chat--fb { background: #F0F2F5; }

.comms-chat__area {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 22px;
    flex: 1; overflow-y: auto;
}

.comms-chat__msg { display: flex; gap: 10px; align-items: flex-end; }
.comms-chat__msg.out { flex-direction: row-reverse; }

.comms-chat__bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px; line-height: 1.5;
}
.comms-chat__bubble.in {
    background: var(--white); color: var(--gray-800);
    border: 1px solid var(--gray-100);
    border-radius: 4px 12px 12px 12px;
    box-shadow: 0 1px 4px rgba(13,53,133,.06);
}
.comms-chat__bubble.out {
    background: var(--navy-700); color: var(--on-accent);
    border-radius: 12px 4px 12px 12px;
}
.comms-chat--wa .comms-chat__bubble.in { background: var(--white); }
.comms-chat--wa .comms-chat__bubble.out {
    background: #DCF8C6; color: #1a3020;
}
.comms-chat--fb .comms-chat__bubble.in {
    background: var(--white); color: var(--gray-800);
}
.comms-chat--fb .comms-chat__bubble.out {
    background: #0084FF; color: var(--on-accent);
}

.comms-chat__meta {
    font-size: 10px; color: var(--gray-300); margin-top: 4px;
}
.comms-chat__meta.right { text-align: right; }
.comms-chat--wa .comms-chat__bubble.out .comms-chat__meta { color: #5a8060; }
.comms-chat--fb .comms-chat__bubble.out .comms-chat__meta { color: rgba(255,255,255,.7); }

.comms-chat__input-row {
    display: flex; gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid var(--gray-100);
    background: var(--white);
    align-items: center;
}
.comms-chat__input {
    flex: 1;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-100);
    border-radius: 999px;
    padding: 10px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; color: var(--gray-900);
    outline: none;
    transition: border .15s;
}
.comms-chat__input:focus { border-color: var(--blue-400); }
.comms-chat__send {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent); flex-shrink: 0;
    transition: filter .15s;
    background: var(--navy-700);
}
.comms-chat__send:hover { filter: brightness(.92); }
.comms-chat__send i { font-size: 18px; }
.comms-chat__send--wa { background: #25D366; }
.comms-chat__send--fb { background: #0084FF; }

/* ════════════════════════════════════════════════════════════
   3) EMAIL
   ════════════════════════════════════════════════════════════ */
.comms-email-recipients {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 6px;
}
.comms-recipient-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px; font-weight: 500;
    color: var(--blue-700);
}
.comms-recipient-chip button {
    background: none; border: none;
    color: var(--blue-400);
    cursor: pointer;
    font-size: 14px; line-height: 1;
}

.comms-attachment {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    font-size: 12px; color: var(--gray-700);
}
.comms-attachment i { font-size: 16px; color: var(--blue-500); }
.comms-attachment__name { flex: 1; }
.comms-attachment__size { color: var(--gray-400); }
.comms-attachment button {
    background: none; border: none;
    color: var(--gray-300); cursor: pointer; font-size: 16px;
}

.comms-editor {
    border: 1.5px solid var(--gray-100);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
}
.comms-editor__toolbar {
    display: flex; gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    flex-wrap: wrap;
}
.comms-tool-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: none; background: none;
    cursor: pointer;
    font-size: 12px; font-weight: 700;
    color: var(--gray-500);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.comms-tool-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.comms-tool-btn.active { background: var(--blue-100); color: var(--blue-700); }
.comms-tool-sep { width: 1px; background: var(--gray-200); margin: 2px 4px; }

.comms-editor__body {
    padding: 12px 14px;
    min-height: 160px;
    font-size: 13px;
    color: var(--gray-900);
    outline: none;
}

/* ════════════════════════════════════════════════════════════
   4) MEETINGS — provider picker + date strip + time slots
   ════════════════════════════════════════════════════════════ */
.comms-provider-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.comms-provider {
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 8px;
    background: var(--white);
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    font-family: inherit;
}
.comms-provider:hover { border-color: var(--blue-400); }
.comms-provider.selected {
    border-color: var(--blue-700);
    background: var(--blue-50);
}
.comms-provider__logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
}
.comms-provider__logo i { font-size: 18px; }
.comms-provider__logo--teams  { background: #4B53BC; }
.comms-provider__logo--meet   { background: #00897B; }
.comms-provider__logo--zoom   { background: #2D8CFF; }
.comms-provider__name {
    font-size: 12px; font-weight: 600;
    color: var(--gray-800);
}
.comms-provider.selected .comms-provider__name { color: var(--blue-800); }
.comms-provider__sub {
    font-size: 10px; color: var(--gray-400); margin-top: 2px;
}

.comms-date-strip {
    display: flex; gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
}
.comms-date-chip {
    min-width: 56px;
    padding: 8px;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    text-align: center;
    cursor: pointer;
    background: var(--white);
    transition: all .15s;
    flex-shrink: 0;
    font-family: inherit;
}
.comms-date-chip:hover { border-color: var(--blue-400); }
.comms-date-chip.selected {
    background: var(--navy-800);
    border-color: var(--blue-800);
}
.comms-date-chip__day {
    font-size: 10px; font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .05em;
}
.comms-date-chip.selected .comms-date-chip__day { color: rgba(255,255,255,.7); }
.comms-date-chip__num {
    font-size: 18px; font-weight: 700;
    color: var(--blue-800); margin-top: 2px;
}
.comms-date-chip.selected .comms-date-chip__num { color: var(--on-accent); }
.comms-date-chip.today .comms-date-chip__num { color: var(--gold-500); }
.comms-date-chip.disabled {
    opacity: .35; cursor: not-allowed;
}

.comms-time-slots { display: flex; flex-direction: column; gap: 6px; }
.comms-time-slot {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    cursor: pointer;
    background: var(--white);
    transition: all .15s;
    font-family: inherit;
}
.comms-time-slot:hover { border-color: var(--blue-400); }
.comms-time-slot.selected {
    border-color: var(--blue-700);
    background: var(--blue-50);
}
.comms-time-slot.booked {
    border-color: var(--gray-100);
    background: var(--gray-50);
    cursor: default; opacity: .6;
}
.comms-slot-time {
    font-size: 14px; font-weight: 600; color: var(--blue-800);
    min-width: 70px;
}
.comms-time-slot.selected .comms-slot-time { color: var(--blue-700); }
.comms-slot-status { font-size: 12px; flex: 1; }
.comms-slot-status.available { color: var(--green-500); }
.comms-slot-status.selected-label { color: var(--blue-700); font-weight: 600; }
.comms-slot-status.booked-label { color: var(--gray-300); }
.comms-slot-indicator {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.comms-slot-indicator.green { background: var(--green-500); }
.comms-slot-indicator.blue  { background: var(--blue-500); }
.comms-slot-indicator.gray  { background: var(--gray-200); }

.comms-meeting-summary {
    background: var(--blue-50);
    border-color: var(--blue-100);
}
.comms-meeting-summary__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.comms-meeting-summary__title {
    font-size: 13px; font-weight: 600; color: var(--blue-800);
}
.comms-meeting-summary__sub {
    font-size: 11px; color: var(--gray-400);
}

/* ════════════════════════════════════════════════════════════
   5) PREFERENCE
   ════════════════════════════════════════════════════════════ */
.comms-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
}
.comms-toggle-row:last-child { border-bottom: none; }
.comms-toggle-row__info { flex: 1; }
.comms-toggle-row__title {
    font-size: 13px; font-weight: 600; color: var(--gray-800);
    display: flex; align-items: center; gap: 8px;
}
.comms-toggle-row__title i { color: var(--blue-600); font-size: 16px; }
.comms-toggle-row__desc { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

.comms-switch {
    position: relative; display: inline-block;
    width: 40px; height: 22px;
    flex-shrink: 0;
}
.comms-switch input { opacity: 0; width: 0; height: 0; }
.comms-switch__slider {
    position: absolute; cursor: pointer; inset: 0;
    background-color: var(--gray-300);
    transition: .2s;
    border-radius: 999px;
}
.comms-switch__slider::before {
    position: absolute; content: ""; height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background-color: var(--white);
    transition: .2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.comms-switch input:checked + .comms-switch__slider { background-color: var(--navy-700); }
.comms-switch input:checked + .comms-switch__slider::before { transform: translateX(18px); }

/* ════════════════════════════════════════════════════════════
   6) NOTES — timeline list
   ════════════════════════════════════════════════════════════ */
.comms-notes-list {
    display: flex; flex-direction: column; gap: 10px;
}
.comms-note {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
}
.comms-note.internal {
    background: var(--gold-100);
    border-color: var(--gold-200);
}
.comms-note__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.comms-note__author {
    font-size: 12px; font-weight: 600;
    color: var(--blue-800);
}
.comms-note__time {
    font-size: 11px; color: var(--gray-400);
}
.comms-note__internal-badge {
    margin-left: auto;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    background: var(--gold-200); color: var(--gold-700);
    padding: 2px 8px; border-radius: 999px;
}
.comms-note__body {
    font-size: 13px; color: var(--gray-800); line-height: 1.55;
    white-space: pre-wrap;
}

.comms-note-composer {
    background: var(--white);
    border: 1.5px solid var(--gray-100);
    border-radius: 12px;
    padding: 12px 14px;
}
.comms-note-composer textarea {
    width: 100%; min-height: 80px;
    border: none; outline: none; resize: vertical;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; color: var(--gray-900);
    background: none;
}
.comms-note-composer textarea::placeholder { color: var(--gray-300); }
.comms-note-composer__actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--gray-100);
}
.comms-note-composer__internal {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--gray-500); cursor: pointer;
    margin-right: auto;
}
.comms-note-composer__internal input {
    accent-color: var(--gold-500);
    width: 14px; height: 14px;
}

/* ════════════════════════════════════════════════════════════
   Empty / loading states
   ════════════════════════════════════════════════════════════ */
.comms-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-400);
}
.comms-empty i { font-size: 36px; color: var(--gray-200); display: block; margin: 0 auto 10px; }
.comms-empty__title { font-size: 14px; font-weight: 600; color: var(--gray-500); }
.comms-empty__sub { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* Long unbroken text (links, tokens) wraps instead of widening the page. */
.comms-chat__bubble, .comms-note__body { overflow-wrap: anywhere; }

/* Lead temperature, in the color the company configured (Lead Temperatures). */
.temp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
              font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.temp-badge--sm { padding: 2px 8px; font-size: 11px; }
.temp-badge__emoji { font-size: 1.05em; }

/* ── Payment plans (PaymentPlanPanel, PlanTermsEditor, CreatePaymentPlanModal, /payment-plans) ── */
.plan-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
             border: 1px solid transparent; white-space: nowrap; }
.plan-pill--proposed { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-200); }
.plan-pill--active   { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.plan-pill--late     { background: var(--gold-100); color: var(--gold-600); border-color: var(--gold-300); }
.plan-pill--default  { background: var(--red-100); color: var(--red-500); border-color: var(--red-border); }
.plan-pill--done     { background: var(--green-100); color: var(--green-500); border-color: var(--green-border); }
.plan-pill--closed   { background: var(--gray-50); color: var(--gray-500); border-color: var(--gray-100); text-decoration: line-through; }

.plan-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 16px; }
.plan-card__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-card__title { font-size: 14px; font-weight: 700; color: var(--blue-800); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-card__sub { font-size: 12px; color: var(--gray-500); margin-top: 3px; overflow-wrap: anywhere; }
.plan-card__progress { min-width: 190px; font-size: 13px; color: var(--gray-700); text-align: right; }
.plan-card__charge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; padding: 8px 12px;
                     border-radius: 8px; background: var(--gray-50); font-size: 12px; color: var(--gray-700); }
.plan-card__charge .comms-btn { margin-left: auto; }
.plan-card__warn { color: var(--gold-600); }
.plan-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.plan-card__danger { color: var(--red-500) !important; }
.plan-bar { height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; margin: 5px 0; }
.plan-bar > span { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg, var(--gold-500, #C9A04A), var(--gold-300, #E3C06E)); }

.plan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                 color: var(--gray-500); padding: 6px 8px; border-bottom: 1px solid var(--gray-100); }
.plan-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-50); color: var(--gray-800); }
.plan-table .right { text-align: right; }
.plan-table__down td { font-weight: 700; background: var(--gold-100); }

.plan-inline, .plan-confirm { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; padding: 12px;
                              border: 1px solid var(--gray-100); border-radius: 10px; background: var(--gray-50); }
.plan-confirm { align-items: center; font-size: 13px; color: var(--gray-700); }
.plan-confirm span { flex: 1; min-width: 220px; }

.plan-terms { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.plan-terms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.plan-terms__switch { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
                      border: 1px solid var(--gray-100); background: var(--gray-50); cursor: pointer; }
.plan-terms__switch input { margin-top: 3px; }
.plan-terms__switch b { display: block; font-size: 13px; color: var(--blue-800); }
.plan-terms__switch small { display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.plan-terms__preview { border: 1px solid var(--gray-100); border-radius: 10px; padding: 12px; background: var(--white); }
.plan-terms__preview-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--gray-500);
                            text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.plan-terms__preview-head b { color: var(--blue-800); text-transform: none; letter-spacing: 0; font-size: 13px; }
.plan-terms__error { font-size: 13px; color: var(--red-500); }

.plan-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.plan-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.plan-choice__opt { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 10px; cursor: pointer; }
.plan-choice__opt.is-on { border-color: var(--gold-300); background: var(--gold-100); }
.plan-choice__opt, .plan-terms__switch { text-transform: none; letter-spacing: normal; font-weight: 400; }
.plan-choice__opt b { display: block; font-size: 13px; color: var(--blue-800); }
.plan-choice__opt small { display: block; font-size: 12px; color: var(--gray-500); }

.plan-invoices { border: 1px solid var(--gray-100); border-radius: 10px; overflow: hidden; }
.plan-invoices__row { display: grid; grid-template-columns: auto 90px minmax(0, 1fr) 100px auto; gap: 10px; align-items: center;
                      padding: 8px 12px; border-bottom: 1px solid var(--gray-50); font-size: 13px; color: var(--gray-800); cursor: pointer; }
.plan-invoices__row:last-child { border-bottom: 0; }
.plan-invoices__num { font-weight: 700; color: var(--blue-700); }
.plan-invoices__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-invoices__date { color: var(--gray-500); font-size: 12px; }

.plan-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; }
.plan-filter { border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-700); border-radius: 999px;
               padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.plan-filter.is-on { background: var(--blue-800); border-color: var(--blue-800); color: var(--white); }
.plan-link { font-weight: 700; color: var(--blue-700); text-decoration: none; }
.plan-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gray-600); }
.plan-settings span { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--gray-500); }
.plan-settings input { width: 90px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); }

@media (max-width: 760px) {
    .plan-terms, .plan-choice, .plan-settings { grid-template-columns: minmax(0, 1fr); }
    .plan-invoices__row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .plan-invoices__title, .plan-invoices__date { display: none; }
    .plan-card__progress { text-align: left; }
}

/* ── Saved cards & charging (ContactCardsTab, ChargeModal) ── */
.card-list { display: grid; gap: 8px; }
.card-row { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
            padding: 10px 12px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; }
.card-row.is-expired { opacity: .7; }
.card-row__pos { width: 24px; height: 24px; border-radius: 50%; background: var(--gray-50); color: var(--gray-600); font-weight: 700;
                 font-size: 12px; display: flex; align-items: center; justify-content: center; }
.card-row__brand { font-size: 22px; color: var(--blue-700); }
.card-row__main { display: flex; flex-direction: column; min-width: 0; }
.card-row__main b { color: var(--blue-800); }
.card-row__tags { display: flex; gap: 6px; }
.card-row__actions { display: flex; gap: 4px; }
.charge-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan-choice__opt.is-disabled { opacity: .5; cursor: not-allowed; }
.charge-order { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--gray-700); }
.charge-split { display: grid; gap: 6px; margin-top: 8px; }
.charge-split__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center; font-size: 13px; color: var(--gray-800); }
.charge-split__row label { display: flex; gap: 8px; align-items: center; cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 600; }
.charge-split__row input[type=number] { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); }
.charge-split__sum { font-size: 12px; font-weight: 700; text-align: right; }
.charge-split__sum.is-ok { color: var(--green-500); } .charge-split__sum.is-bad { color: var(--red-500); }
.charge-result { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.charge-result.is-ok { background: var(--green-100); color: var(--green-500); }
.charge-result.is-partial { background: var(--gold-100); color: var(--gold-600); }
.charge-result.is-fail { background: var(--red-100); color: var(--red-500); }
.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; }
@media (max-width: 760px) {
    .card-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .card-row__brand, .card-row__tags { display: none; }
    .charge-modes { grid-template-columns: minmax(0, 1fr); }
}

/* ── Transfer reconciliation (ReviewTransferModal, BankAccountPage) ── */
.rt-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rt-proof { border: 1px solid var(--gray-100); border-radius: 12px; background: var(--gray-50); min-height: 420px; display: flex;
            align-items: center; justify-content: center; overflow: hidden; }
.rt-proof img { max-width: 100%; max-height: 70vh; display: block; }
.rt-proof iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.rt-proof__none { color: var(--gray-500); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.rt-side { display: grid; gap: 12px; }
.rt-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.rt-facts dt { color: var(--gray-500); } .rt-facts dd { margin: 0; color: var(--gray-800); overflow-wrap: anywhere; }
.rt-box { border: 1px solid var(--gray-100); border-radius: 10px; padding: 12px; display: grid; gap: 8px; background: var(--white); }
.rt-box--reject { border-color: var(--red-border); }
.rt-box__title { font-weight: 700; font-size: 13px; color: var(--blue-800); display: flex; gap: 6px; align-items: center; }
.rt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rt-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: none; letter-spacing: normal; }
.rt-box input { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); font-size: 13px; }
.rt-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.bank-form input, .bank-form textarea { width: 100%; box-sizing: border-box; }
.bank-form__full { grid-column: 1 / -1; }
.bank-form textarea { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); font-family: inherit; }
.bank-form__check { flex-direction: row !important; align-items: center; gap: 8px !important; grid-column: 1 / -1; }
.bank-form .plan-settings input { width: 100%; }
@media (max-width: 860px) { .rt-grid { grid-template-columns: minmax(0, 1fr); } .rt-proof { min-height: 260px; } }

/* ── Reconciliation: sending bank, investigation (F4) ── */
.stat-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stat-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .stat-grid--5 { grid-template-columns: minmax(0, 1fr); } }
.rt-sender { border: 1px solid var(--gray-100); border-radius: 10px; padding: 12px; display: grid; gap: 8px; background: var(--gray-50); }
.rt-copy { border: 0; background: transparent; color: var(--gray-500); cursor: pointer; padding: 0 4px; font-size: 13px; }
.rt-copy:hover { color: var(--blue-600); }
.rt-investigating { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
                    background: var(--blue-50); color: var(--blue-800); font-size: 13px; }
.rt-investigating > i { font-size: 18px; margin-top: 1px; }
.rt-investigating span { display: block; color: var(--gray-600); }
.rt-box--investigate { border-color: var(--blue-100); }

/* ── Financial health: traffic light badge (F4) ── */
.hl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 9px 2px 7px;
      border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.hl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hl--green  { background: var(--green-100); color: var(--green-600, #16A34A); }
.hl--yellow { background: var(--gold-100); color: var(--gold-600); }
.hl--red    { background: var(--red-100); color: var(--red-500); }
.hl--black  { background: var(--gray-900); color: var(--gray-50); }
.hl--dot { padding: 0; width: 10px; height: 10px; border-radius: 50%; }
.hl--dot::before { display: none; }
.hl--dot.hl--green { background: var(--green-500); } .hl--dot.hl--yellow { background: var(--gold-500, #D4A017); }
.hl--dot.hl--red { background: var(--red-500); } .hl--dot.hl--black { background: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-300); }
.hl__score { font-weight: 600; opacity: .8; }

/* ── Account statement tab / receivables (F4) ── */
.acct-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.acct-health { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acct-reason { font-size: 12px; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-100);
               border-radius: 999px; padding: 2px 9px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aging-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.aging-cell { border: 1px solid var(--gray-100); border-radius: 10px; padding: 8px 10px; background: var(--white); }
.aging-cell__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }
.aging-cell__value { font-size: 15px; font-weight: 700; color: var(--blue-800); margin-top: 2px; }
.aging-cell--late .aging-cell__value { color: var(--gold-600); }
.aging-cell--risk .aging-cell__value { color: var(--red-500); }
.aging-cell--plan { background: var(--gray-50); }
.aging-cell.is-zero .aging-cell__value { color: var(--gray-400); font-weight: 600; }
.acct-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.acct-period input[type=date] { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); }
.acct-table td.num, .acct-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acct-table tr.acct-total td { font-weight: 700; background: var(--gray-50); }
.acct-kind { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; font-size: 13px;
             margin-right: 6px; vertical-align: middle; background: var(--gray-50); color: var(--gray-600); }
.acct-kind--Payment, .acct-kind--Recovery { background: var(--green-100); color: var(--green-600, #16A34A); }
.acct-kind--WriteOff { background: var(--gray-900); color: var(--gray-50); }
.acct-kind--Refund { background: var(--red-100); color: var(--red-500); }
.acct-pending { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--gold-100); color: var(--gold-700, #8A6414); font-size: 13px; }
.acct-pending ul { margin: 6px 0 0; padding-left: 18px; }
.acct-optout { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--gray-600); cursor: pointer; }
.wo-summary { border-radius: 10px; padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--gray-100); font-size: 13px; display: grid; gap: 4px; }
.wo-summary b { color: var(--blue-800); }
@media (max-width: 900px) { .aging-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .aging-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wo-textarea { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); font: inherit; font-size: 13px; resize: vertical; }
.th-sort { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort:hover { color: var(--blue-600); }
button.aging-cell { font: inherit; }
.aging-cell.is-on { border-color: var(--blue-600); box-shadow: 0 0 0 1px var(--blue-600); }
.wo-select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); font: inherit; font-size: 13px; }
.acct-optout { text-transform: none !important; letter-spacing: normal !important; font-weight: 500 !important; }

/* ── Collections (F4b) ── */
.tier-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.tier--1 { --tier: var(--gold-600); --tier-bg: var(--gold-100); }
.tier--2 { --tier: var(--red-500); --tier-bg: var(--red-100); }
.tier--3 { --tier: var(--red-500); --tier-bg: var(--red-100); }
.tier--cold { --tier: var(--blue-700); --tier-bg: var(--blue-50); }
.tier-pill.tier--1, .tier-pill.tier--2, .tier-pill.tier--3, .tier-pill.tier--cold { color: var(--tier); background: var(--tier-bg); }
.tier-pill.tier--3 { border-color: var(--red-border); }
.tier-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.tier-card { font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--gray-100); border-radius: 10px; padding: 9px 11px; background: var(--white);
             display: flex; flex-direction: column; gap: 2px; color: var(--gray-700); border-top: 3px solid var(--tier, var(--blue-600)); }
.tier-card span { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gray-500); }
.tier-card b { font-size: 18px; color: var(--blue-800); }
.tier-card em { font-style: normal; font-size: 12px; color: var(--tier, var(--gray-600)); font-weight: 700; }
.tier-card.is-on { box-shadow: 0 0 0 2px var(--tier, var(--blue-600)); }
.next-late { color: var(--red-500); font-weight: 700; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--gray-50); }
.case-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.case-side { display: grid; gap: 12px; }
.case-panel { border: 1px solid var(--gray-100); border-radius: 12px; padding: 12px 14px; background: var(--white); }
.case-panel__title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; }
.case-reasons { margin: 8px 0; padding-left: 18px; font-size: 12px; color: var(--gray-600); }
.case-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--gray-100); font-size: 13px; }
.case-line:first-of-type { border-top: 0; }
.case-line > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case-line span { font-size: 11px; color: var(--gray-500); }
.case-line .num { align-items: flex-end; text-align: right; }
.aging-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aging-mini > div { background: var(--gray-50); border-radius: 8px; padding: 5px 7px; display: flex; flex-direction: column; }
.aging-mini span { font-size: 10px; color: var(--gray-500); text-transform: uppercase; font-weight: 700; }
.aging-mini b { font-size: 12px; color: var(--blue-800); } .aging-mini .is-zero b { color: var(--gray-400); font-weight: 500; }
.timeline { display: grid; gap: 2px; }
.tl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--gray-100); }
.tl-item:first-child { border-top: 0; }
.tl-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px;
           background: var(--blue-50); color: var(--blue-700); }
.tl-item--billing .tl-icon { background: var(--green-100); color: var(--green-600); }
.tl-item--crm .tl-icon { background: var(--gold-100); color: var(--gold-600); }
.tl-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--gray-800); }
.tl-head span { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.tl-detail { font-size: 12px; color: var(--gray-600); margin-top: 2px; overflow-wrap: anywhere; }
.case-form { display: grid; gap: 10px; }
.case-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: none; letter-spacing: normal; }
@media (max-width: 1000px) { .case-grid { grid-template-columns: minmax(0, 1fr); } .tier-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tier-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-actions a.comms-btn { text-decoration: none; }

/* ── Finance: company expenses (F5) ── */
.month-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; margin: 14px 0 6px;
              padding: 10px 12px 0; border: 1px solid var(--gray-100); border-radius: 12px; background: var(--white); }
.month-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.month-bar__fill { width: 100%; max-width: 34px; background: linear-gradient(180deg, var(--gold-500), var(--gold-600)); border-radius: 5px 5px 0 0; }
.month-bar span { font-size: 10px; color: var(--gray-500); text-transform: capitalize; padding-bottom: 6px; }
.fin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.fin-filters .wo-select { min-width: 170px; }
.fin-filters input.wo-select { flex: 1; min-width: 220px; }
.fin-totals { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--gray-600); margin-bottom: 10px; }
.fin-totals b { color: var(--blue-800); }
.fin-group { padding: 2px 9px; border-radius: 999px; background: var(--gray-50); border: 1px solid var(--gray-100); font-size: 12px; }
.fin-icon { margin-left: 6px; color: var(--gray-400); font-size: 14px; }
tr.is-muted td { opacity: .55; }
.fin-group-pill { display: inline-flex; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); }
.fin-group--Payroll { background: var(--green-100); color: var(--green-600); }
.fin-group--CostOfServices { background: var(--gold-100); color: var(--gold-600); }
.fin-group--Marketing { background: var(--red-100); color: var(--red-500); }
.fin-group--Taxes, .fin-group--Financial { background: var(--gray-50); color: var(--gray-600); }
@media (max-width: 700px) { .month-bars { gap: 3px; } .month-bar span { font-size: 9px; } }
.case-form .wo-select, .case-form .wo-textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.case-form label.acct-optout { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.case-form label.acct-optout input { width: auto; margin: 0; }
.sup-table td.right .comms-btn { white-space: nowrap; }
.fin-table td:first-child { white-space: nowrap; }

/* ── Finance: reports (F6) ── */
.fin-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.fin-overview--cash { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: stretch; margin: 0 0 12px; }
.fin-side { display: grid; gap: 12px; align-content: start; }
.fin-card { border: 1px solid var(--gray-100); border-radius: 12px; background: var(--white); padding: 14px 16px; }
.fin-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--blue-800); margin-bottom: 10px; flex-wrap: wrap; }
.fin-legend { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; color: var(--gray-500); }
.fin-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
.fin-dot--rev, .fin-bars__bar--rev { background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); }
.fin-dot--cost, .fin-bars__bar--cost { background: linear-gradient(180deg, var(--gold-500), var(--gold-600)); }
.fin-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 200px; align-items: end; }
.fin-bars__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; min-width: 0; }
.fin-bars__pair { display: flex; align-items: flex-end; gap: 2px; height: 150px; width: 100%; justify-content: center; }
.fin-bars__bar { width: 42%; max-width: 16px; border-radius: 3px 3px 0 0; }
.fin-bars__col span { font-size: 10px; font-weight: 700; }
.fin-bars__col em { font-style: normal; font-size: 10px; color: var(--gray-500); white-space: nowrap; }
.fin-top { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--gray-50); font-size: 13px; color: var(--gray-600); }
.fin-top:last-child { border-bottom: none; }
.fin-top b { color: var(--blue-800); }
.fin-top a { color: var(--blue-600); text-decoration: none; }
.neg, .fin-top b.neg { color: var(--red-500) !important; }
.pos { color: var(--green-500); }
.fin-report { margin-top: 12px; overflow-x: auto; }
.fin-report__table { min-width: 720px; }
.fin-report__table th, .fin-report__table td { white-space: nowrap; padding: 7px 10px; }
.fin-report__label { position: sticky; left: 0; background: inherit; min-width: 190px; text-align: left; }
.fin-report__table tbody tr { background: var(--white); }
.fin-report__table td.fin-report__total, .fin-report__table th.fin-report__total { background: var(--gold-100); font-weight: 700; }
.fin-report__row--subtotal td { font-weight: 700; background: var(--gray-50); }
.fin-report__row--total td { font-weight: 800; background: var(--blue-50); color: var(--blue-800); }
.fin-report__row--percent td { font-size: 11px; color: var(--gray-500); font-style: italic; }
.fin-report__section td { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); background: var(--white); padding-top: 12px; }
.fin-opening .rt-row .wo-select { width: 100%; box-sizing: border-box; }
@media (max-width: 1000px) { .fin-overview, .fin-overview--cash { grid-template-columns: minmax(0, 1fr); } }

/* ── Expenses: reading a receipt with AI (F5.1) ── */
.rcpt-drop { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px dashed var(--gold-300); border-radius: 12px; background: var(--gold-100); }
.rcpt-drop > i { font-size: 26px; color: var(--gold-600); margin-top: 2px; }
.rcpt-drop b { color: var(--blue-800); font-size: 13px; }
.rcpt-drop .wo-select { margin-top: 6px; }
.rcpt-drop.is-reading { border-style: solid; }
.ai-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
          color: var(--white); background: linear-gradient(135deg, var(--blue-600), var(--gold-600)); vertical-align: 1px; }
.spin { animation: rcpt-spin 1s linear infinite; }
@keyframes rcpt-spin { to { transform: rotate(360deg); } }

/* ── Crypto payments (F3b) ── */
.plan-filters__sep { width: 1px; align-self: stretch; background: var(--gray-200); margin: 0 6px; }
.crypto-chip { display: inline-flex; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--gold-100); color: var(--gold-600); }
.rt-hash { word-break: break-all; font-size: 11px; }
.cw-address { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.case-form label > .lbl { display: inline-flex; align-items: center; gap: 0; }

/* ── Receiving-fee policy and the shortfall choice ── */
.fee-policy { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gray-100); display: grid; gap: 8px; }
.fee-policy__title { font-weight: 700; color: var(--blue-800); display: flex; gap: 6px; align-items: center; }
.fee-policy__opt, .fee-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--gray-100); border-radius: 10px; cursor: pointer; background: var(--white); }
.fee-policy__opt.is-on, .fee-choice label.is-on { border-color: var(--gold-500); background: var(--gold-100); }
.fee-policy__opt input, .fee-choice input { margin-top: 3px; }
.fee-policy__opt div, .fee-choice label div { display: grid; gap: 2px; font-size: 13px; color: var(--gray-700); }
.fee-policy__opt span, .fee-choice label span { font-size: 12px; color: var(--gray-500); }
.fee-policy__max span { display: flex; gap: 6px; align-items: center; }
.fee-policy__max input { width: 110px; }
.fee-policy__preview { font-size: 12px; color: var(--gray-600); background: var(--gray-50); border-radius: 8px; padding: 8px 10px; }
.fee-choice { display: grid; gap: 6px; margin: 6px 0 8px; }
.fee-choice__title { font-size: 12.5px; font-weight: 700; color: var(--red-500); }
.rt-box .fee-choice label { display: flex !important; flex-direction: row; align-items: flex-start; gap: 10px; }
.rt-box .fee-choice label > input { width: auto; flex: none; }
.plan-settings .fee-policy label, .fee-policy label { text-transform: none !important; letter-spacing: normal !important; font-weight: 400; }
.fee-policy .fee-policy__opt { display: flex !important; flex-direction: row; align-items: flex-start; gap: 10px; grid-template-columns: none; }
.fee-policy .fee-policy__opt > input { width: auto; flex: none; }
.fee-policy .fee-policy__opt b { font-weight: 700; color: var(--blue-800); }
.fee-policy .fee-policy__max { display: flex !important; flex-direction: column; gap: 4px; font-weight: 600; }

/* ── Breathing room between a page's header bar and its content (all admin pages) ── */
.comms-subheader ~ .admin-content { padding-top: var(--space-6, 24px); padding-bottom: var(--space-8, 32px); }
.bank-form .bank-form__check { justify-content: flex-start; }
.bank-form .bank-form__check input { width: auto; flex: none; }
.fee-policy input[type=number] { width: 110px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); font: inherit; }
.fee-policy .fee-policy__max span { font-weight: 400; color: var(--gray-500); }

/* ── Contabilidad (C1) ── */
.acc-step { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--gray-100); border-radius: 12px; background: var(--white); margin-bottom: 12px; }
.acc-step__num { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--blue-800); color: var(--gold-300); display: grid; place-items: center; font-weight: 700; }
.acc-step__body { flex: 1; min-width: 0; }
.acc-step__body h3 { margin: 2px 0 6px; font-size: 15px; color: var(--blue-800); }
.acc-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.acc-template { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); cursor: pointer; font: inherit; }
.acc-template:hover { border-color: var(--gold-300); }
.acc-template.is-on { border-color: var(--gold-500, var(--gold-600)); box-shadow: 0 0 0 2px var(--gold-100); background: var(--gold-100); }
.acc-template__name { font-weight: 700; color: var(--blue-800); font-size: 14px; }
.acc-template__desc { font-size: 12px; color: var(--gray-600); }
.acc-template__count { font-size: 11px; font-weight: 700; color: var(--gold-600); }
.acc-preview { margin-top: 10px; font-size: 13px; }
.acc-preview summary { cursor: pointer; color: var(--blue-700); font-weight: 600; }
.acc-preview__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin-top: 8px; }
.acc-preview__cols ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; font-size: 12px; color: var(--gray-700, var(--gray-600)); }
.acc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.acc-grid-entry { display: grid; grid-template-columns: 180px 1fr; gap: 12px; margin-bottom: 10px; }
@media (max-width: 760px) { .acc-grid3, .acc-grid2, .acc-grid-entry { grid-template-columns: 1fr; } }
.acc-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 20px; }
.acc-ai__head { display: flex; align-items: center; gap: 8px; color: var(--blue-800); font-size: 14px; margin-bottom: 4px; }
.acc-ai__head i { color: var(--gold-600); }
.acc-ai__text { width: 100%; box-sizing: border-box; margin-top: 6px; }
.acc-ai__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.acc-ai__table { margin-top: 10px; }
.acc-spin { animation: acc-spin 0.9s linear infinite; display: inline-block; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
.acc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.acc-links a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gray-100); background: var(--white); color: var(--gray-800); text-decoration: none; }
.acc-links a:hover { border-color: var(--gold-300); }
.acc-links a i { font-size: 20px; color: var(--gold-600); }
.acc-links a b { color: var(--blue-800); font-size: 13px; }
.acc-links a span { font-size: 12px; color: var(--gray-500); }
.acc-group { margin-bottom: 12px; }
.acc-group__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--gray-100); color: var(--blue-800); font-size: 13px; }
.acc-group__head span { color: var(--gray-500); font-size: 12px; }
.acc-lock { color: var(--gold-600); font-size: 13px; margin-left: 6px; }
.acc-inactive td { opacity: 0.55; }
.acc-neg { color: var(--red-500); }
.acc-lines td { vertical-align: middle; }
.acc-lines .wo-select { width: 100%; box-sizing: border-box; min-width: 0; }
.acc-lines input.num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-icon-btn { border: 0; background: transparent; color: var(--gray-400); cursor: pointer; font-size: 16px; padding: 4px; }
.acc-icon-btn:hover:not(:disabled) { color: var(--red-500); }
.acc-icon-btn:disabled { opacity: 0.35; cursor: default; }
.acc-balance { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; margin: 10px 0; padding: 8px 12px; border-radius: 8px; }
.acc-balance.is-ok { background: var(--green-100); color: var(--green-600); }
.acc-balance.is-off { background: var(--gold-100); color: var(--gold-600); }
.acc-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 10px; }
.acc-facts div { display: grid; gap: 2px; }
.acc-facts span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.acc-facts b { color: var(--blue-800); font-size: 14px; }
.acc-facts small { color: var(--gray-500); font-size: 11px; }
.acc-memo { font-size: 14px; color: var(--gray-800); margin: 0 0 10px; }
.acc-opening-sum { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 12px; }
.acc-opening-sum div { display: grid; gap: 2px; }
.acc-opening-sum span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.acc-opening-sum b { color: var(--blue-800); font-size: 16px; }
.acc-opening-sum small { color: var(--gray-500); font-size: 11px; }
.acc-tb__grp { text-align: center !important; border-bottom: 1px solid var(--gray-100); }
.acc-tb__type td { background: var(--gray-50); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600); }
.acc-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .acc-settings { grid-template-columns: 1fr; } }
.acc-audit-detail { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--gray-500); word-break: break-word; max-width: 420px; }
.acc-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--gray-600); }

/* ── Impuesto de ventas (T1) ── */
.tax-profile__addr { font-size: 13px; color: var(--gray-800); }
.tax-profile__exempt { margin-top: 6px; font-size: 12px; color: var(--gray-600); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tax-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 12px; color: var(--gray-700, var(--gray-600)); margin-bottom: 14px; }
.tax-note > i { font-size: 18px; color: var(--blue-700); margin-top: 1px; }
.tax-note > div { flex: 1; display: grid; gap: 2px; }
.tax-note b { color: var(--blue-800); }
.tax-note.is-review { background: var(--gold-100); border-color: var(--gold-300); }
.tax-note.is-review > i { color: var(--gold-600); }
.tax-version { display: flex; flex-wrap: wrap; gap: 28px; padding: 12px 16px; border: 1px solid var(--gray-100); border-radius: 12px; background: var(--white); margin-bottom: 12px; }
.tax-version div { display: grid; gap: 2px; }
.tax-version span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.tax-version b { color: var(--blue-800); font-size: 15px; }
.tax-version small { color: var(--gray-500); font-size: 11px; }
.tax-pending { margin-bottom: 12px; border-color: var(--gold-300); }
.tax-pending .acc-actions { align-items: center; }
.tax-sources { margin-top: 10px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tax-sources a { color: var(--blue-700); }
.nexus-bar { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.nexus-bar span { display: block; height: 100%; border-radius: 999px; background: var(--green-500); }
.nexus-bar--near span { background: var(--gold-600); }
.nexus-bar--exceeded span { background: var(--red-500); }
.nexus-bar--none span { background: var(--gray-300, var(--gray-200)); }
.acc-settings--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acc-settings .fin-card { min-width: 0; overflow-x: auto; }
.tax-mini { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px; }

/* ── Estados financieros (C3) ── */
.acc-statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .acc-statement { grid-template-columns: 1fr; } }
.acc-st td:first-child { padding-left: 16px; }
.acc-st .acc-tb__type td { padding-left: 12px; }
.acc-st__subtotal td { font-weight: 600; border-top: 1px solid var(--gray-100); color: var(--blue-800); }
.acc-st__net td { font-size: 15px; }
.acc-st-narrow { max-width: 860px; }
.acc-st a.mono { color: var(--blue-700); margin-right: 4px; }

/* ── Equipo (06) ── */
.team-chip { display: inline-flex; align-items: center; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: 11px;
             font-weight: 600; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); white-space: nowrap; }
.team-row--off td { opacity: .55; }
.team-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.team-extras { margin-top: 6px; padding: 12px; border: 1px solid var(--gray-100); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.team-extras__title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.case-form label.team-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 10px; }
.case-form label.team-extra select { width: 100%; }
.case-form label.team-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 400; }
.case-form label.team-check input { width: auto; margin: 3px 0 0; flex: none; }
.case-form label.team-check b { font-weight: 600; color: var(--gray-700); }
@media (max-width: 600px) { .team-form-row { grid-template-columns: 1fr; } .case-form label.team-extra { grid-template-columns: 1fr; } }

/* ── Plantillas de cobranza (04) ── */
.tpl-layout { display: grid; grid-template-columns: 240px minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .tpl-layout { grid-template-columns: 220px minmax(0, 1fr); } .tpl-preview { grid-column: 1 / -1; } }
@media (max-width: 720px) { .tpl-layout { grid-template-columns: 1fr; } }
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tpl-lang { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white, #fff); color: var(--gray-600);
            font-weight: 600; font-size: 12px; cursor: pointer; }
.tpl-lang.is-active { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.tpl-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 10px;
            border: 1px solid var(--gray-100); background: var(--white, #fff); cursor: pointer; }
.tpl-item.is-active { border-color: var(--blue-700); box-shadow: 0 0 0 1px var(--blue-700) inset; }
.tpl-item__title { font-weight: 700; font-size: 13px; color: var(--blue-800); }
.tpl-item__sub { font-size: 12px; color: var(--gray-500); }
.tpl-vars { margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--gray-200); border-radius: 10px; font-size: 12px; display: grid; gap: 4px; }
.tpl-vars code { font-size: 11px; color: var(--blue-700); }
.tpl-editor .case-form { display: grid; gap: 10px; }
.tpl-body { font-family: inherit; line-height: 1.5; resize: vertical; }
.tpl-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tpl-preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tpl-mail { border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; background: #fff; }
.tpl-mail__subject { padding: 10px 12px; border-bottom: 1px solid #E8EEFB; font-size: 13px; font-weight: 600; color: #1f2937; background: #F7F9FD; }
.tpl-mail__frame { width: 100%; height: 470px; border: 0; display: block; background: #fff; }
.tpl-sms { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--blue-50); color: var(--blue-800); font-size: 13px; line-height: 1.45; }
.acct-lang { width: auto; min-width: 0; padding: 4px 8px; font-size: 12px; }

/* ── Presupuestos (08) ── */
.bud-month { min-width: 150px; text-align: center; color: var(--blue-800); }
.bud-bar { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.bud-bar span { display: block; height: 100%; border-radius: 999px; background: var(--green-500); }
.bud-bar--near span { background: var(--gold-600); }
.bud-bar--over span { background: var(--red-500); }
.bud-bar__label { margin-top: 4px; font-size: 11px; color: var(--gray-500); display: flex; gap: 6px; align-items: center; }
.bud-pill { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
.bud-pill--ok { background: var(--green-100); color: var(--green-500); }
.bud-pill--near { background: var(--gold-100); color: var(--gold-600); border-color: var(--gold-300); }
.bud-pill--over { background: var(--red-100); color: var(--red-500); border-color: var(--red-border); }
.bud-free { display: flex; flex-wrap: wrap; gap: 6px; }
.bud-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px) { .bud-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Aprobación de gastos (10) ── */
.appr-settings__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.appr-amount { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
.appr-amount input { width: 140px; }
a.bud-pill { text-decoration: none; }

/* ── Varias monedas (03) ── */
.acct-currencies { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.acct-cur { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-600);
            font-size: 12px; font-weight: 700; cursor: pointer; }
.acct-cur.is-on { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }

/* ── Agente de impuestos (12) ── */
.agent-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-state { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--gray-200);
               font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--gray-600); cursor: pointer; }
.agent-state input { display: none; }
.agent-state.is-on { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-700); }
.agent-sources { font-size: 12px; }
.agent-sources a { display: block; color: var(--blue-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Verificación en la red (13) ── */
.chain-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin: 8px 0; border: 1px solid var(--gray-200); background: var(--gray-50); }
.chain-check i { font-size: 18px; margin-top: 1px; }
.chain-check div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.chain-check b { font-size: 13px; }
.chain-check--verified { background: var(--green-100); border-color: var(--green-500); color: var(--green-500); }
.chain-check--pending, .chain-check--notfound { background: var(--gold-100); border-color: var(--gold-300); color: var(--gold-600); }
.chain-check--mismatch, .chain-check--expired, .chain-check--error { background: var(--red-100); border-color: var(--red-border); color: var(--red-500); }
.chain-pill { display: inline-flex; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--gray-100); color: var(--gray-600); }
.chain-pill--verified { background: var(--green-100); color: var(--green-500); }
.chain-pill--pending, .chain-pill--notfound { background: var(--gold-100); color: var(--gold-600); }
.chain-pill--mismatch, .chain-pill--expired, .chain-pill--error { background: var(--red-100); color: var(--red-500); }
.chain-settings { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--gray-100);
                  border-radius: 10px; background: var(--white); }
.chain-settings > i { color: var(--blue-700); font-size: 18px; }

/* ── Account-me-AI: clasificación y notas fiscales (14) ── */
.cls-pill { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
            border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
.cls-pill--rule { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.cls-pill--shared { background: var(--green-100); color: var(--green-500); }
.cls-pill--ai { background: var(--gold-100); color: var(--gold-600); border-color: var(--gold-300); }
.cls-pill--pending { background: var(--red-100); color: var(--red-500); border-color: var(--red-border); }
.cls-conf { display: inline-block; min-width: 38px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; text-align: center;
            background: var(--gold-100); color: var(--gold-600); }
.cls-conf--low { background: var(--red-100); color: var(--red-500); }
.cls-bulk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--gray-100);
            border-radius: 10px; background: var(--white); }
.cls-bulk .wo-select { width: auto; min-width: 200px; }
.cls-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cls-stat { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--gray-100); background: var(--white); font-size: 12px; color: var(--gray-600); }
.cls-stat b { color: var(--blue-800); font-size: 15px; margin-right: 4px; }
.cls-import { display: inline-flex; align-items: center; gap: 8px; }
.cls-import input[type=file] { max-width: 230px; font-size: 12px; }
.cls-share { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--blue-50); border: 1px solid var(--blue-100);
             font-size: 12.5px; color: var(--gray-700); line-height: 1.5; }
.cls-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.cls-threshold { display: flex; align-items: center; gap: 8px; }
.cls-threshold input[type=range] { flex: 1; accent-color: var(--gold-600); }
.tax-box { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gray-100); background: var(--gray-50); font-size: 12.5px; }
.tax-box__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.tax-box__head b { color: var(--blue-800); }
.tax-warn { display: flex; gap: 6px; margin-top: 4px; color: var(--red-500); }
.tax-src { margin-top: 4px; font-size: 11px; color: var(--gray-500); }
.ded-disclaimer { padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--gold-300); background: var(--gold-100);
                  color: var(--gray-700); font-size: 13px; }