:root {
    --color-primary: #0f4f8a;
    --color-primary-dark: #0a3962;
    --color-primary-deep: #082842;
    --color-primary-soft: #eaf2fb;
    --color-gray-950: #1c2430;
    --color-gray-900: #26313d;
    --color-gray-700: #5d6772;
    --color-gray-600: #707a85;
    --color-gray-500: #8d96a0;
    --color-gray-300: #c9d3dd;
    --color-gray-200: #dce4eb;
    --color-white: #ffffff;
    --color-danger: #b64646;
    --shadow-soft: 0 20px 46px rgba(17, 55, 97, 0.10);
    --shadow-shell: 0 24px 52px rgba(23, 40, 80, 0.10);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --font-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --container-width: min(80vw, 1380px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--font-base);
    color: var(--color-gray-900);
}

a { color: inherit; text-decoration: none; }

.container-80 {
    width: var(--container-width);
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 800;
    font-size: .76rem;
}

/* LOGIN */
.guest-body-final {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 14%, rgba(107,145,183,.10), transparent 26%),
        radial-gradient(circle at 82% 74%, rgba(15,79,138,.05), transparent 22%),
        linear-gradient(135deg, #eef3f8 0%, #f8fbfd 52%, #edf3f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.login-stage-final {
    width: min(1240px, 100%);
}

.login-shell-final {
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
    gap: 28px;
    align-items: center;
}

.login-showcase-final,
.login-form-side-final {
    min-width: 0;
}

.login-showcase-final {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 28px;
}

.showcase-backdrop-final {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.showcase-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
}

.orb-one {
    width: 240px;
    height: 240px;
    top: 18px;
    left: 18px;
    background: radial-gradient(circle, rgba(107,145,183,.16) 0%, rgba(107,145,183,.03) 68%, transparent 100%);
}

.orb-two {
    width: 230px;
    height: 230px;
    top: 34%;
    left: 56%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(107,145,183,.12) 0%, rgba(107,145,183,.03) 70%, transparent 100%);
}

.orb-three {
    width: 280px;
    height: 280px;
    bottom: 18px;
    left: 18%;
    background: radial-gradient(circle, rgba(107,145,183,.16) 0%, rgba(107,145,183,.03) 68%, transparent 100%);
}

.login-showcase-wrap-final {
    width: 100%;
    max-width: 620px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-showcase-content-final {
    width: min(560px, 100%);
}

.login-showcase-content-final h1 {
    margin: 0 0 18px;
    font-size: clamp(3.4rem, 5.8vw, 5.2rem);
    line-height: .94;
    letter-spacing: -.05em;
    color: var(--color-primary-deep);
    font-weight: 900;
}

.showcase-copy-final {
    max-width: 520px;
    margin: 0;
    font-size: 1.14rem;
    line-height: 1.78;
    color: var(--color-gray-700);
}

.showcase-pills-final {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.showcase-pills-final span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    min-height: 60px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,79,138,.08);
    box-shadow: var(--shadow-soft);
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: 1rem;
}

.login-form-side-final {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-wrap-final {
    width: 100%;
    max-width: 460px;
}

.auth-card-final {
    width: 100%;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,79,138,.08);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-shell);
    padding: 34px 30px 26px;
    backdrop-filter: blur(8px);
}

.auth-card-header h2 {
    margin: 0 0 10px;
    color: var(--color-primary-deep);
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: 2.25rem;
}

.auth-card-header p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.65;
}

.alert {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .95rem;
}

.alert-danger {
    background: #fff2f2;
    color: var(--color-danger);
    border: 1px solid #f3c7c7;
}

.auth-form {
    margin-top: 24px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 9px;
    font-weight: 700;
    color: var(--color-gray-950);
}

.form-group input {
    width: 100%;
    height: 54px;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 14px;
    padding: 0 16px;
    outline: none;
    transition: .2s ease;
    background: rgba(255,255,255,.96);
    color: var(--color-gray-950);
    font-size: .98rem;
    box-shadow: 0 10px 22px rgba(20,45,85,.04);
}

.form-group input::placeholder {
    color: #9aa5af;
}

.form-group input:focus {
    border-color: rgba(15,79,138,.35);
    box-shadow: 0 0 0 4px rgba(15,79,138,.08);
    background: var(--color-white);
}

.auth-row-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 24px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-gray-700);
    font-weight: 500;
    font-size: .95rem;
}

.auth-support-text {
    color: var(--color-primary-dark);
    font-size: .9rem;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
    font-size: .96rem;
}

.btn-primary {
    background: linear-gradient(135deg, #2e8fda 0%, var(--color-primary) 54%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: 0 14px 26px rgba(15,79,138,.16);
}

.btn-outline {
    background: var(--color-white);
    border: 1px solid rgba(15,79,138,.15);
    color: var(--color-primary-dark);
    min-height: 44px;
    padding: 0 16px;
}

.btn-block {
    width: 100%;
}

.auth-footer-note-final {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, #f1f6fb 100%);
    border: 1px solid rgba(15,79,138,.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.auth-footer-note-final strong {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary-deep);
    font-size: .92rem;
}

.auth-footer-note-final span {
    display: block;
    color: var(--color-gray-700);
    font-size: .92rem;
    word-break: break-word;
}

/* DASHBOARD Y BASE VISUAL */
.app-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f7fbff 0%, #eef3f8 100%);
    color: var(--color-gray-900);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15,79,138,.08);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 18px;
}

.brand-inline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-inline-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 800;
    box-shadow: 0 12px 22px rgba(15,79,138,.20);
    flex: 0 0 44px;
}

.brand-inline-text strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: 1rem;
}

.brand-inline-text span {
    color: var(--color-gray-700);
    font-size: .9rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.main-nav a {
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--color-gray-700);
    font-weight: 700;
    font-size: .94rem;
}

.main-nav a.is-active,
.main-nav a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.app-main {
    padding: 34px 0 48px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.page-head h1 {
    margin: 0 0 10px;
    color: var(--color-primary-deep);
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: 2.2rem;
}

.page-head p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.65;
    max-width: 780px;
}

.status-pill,
.task-status,
.quick-card small {
    border-radius: 999px;
    background: var(--color-white);
    border: 1px solid rgba(15,79,138,.12);
    padding: 8px 14px;
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: .84rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.metric-card,
.panel-card,
.quick-card,
.mini-stat-card {
    background: var(--color-white);
    border: 1px solid rgba(15,79,138,.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.metric-card {
    padding: 22px;
}

.metric-card span,
.mini-stat-card span {
    color: var(--color-gray-700);
    display: block;
    margin-bottom: 14px;
    font-weight: 700;
}

.metric-card strong,
.mini-stat-card strong {
    font-size: 2rem;
    color: var(--color-primary-deep);
    display: block;
}

.metric-card small {
    display: block;
    margin-top: 10px;
    color: var(--color-gray-500);
}

.content-grid,
.workspace-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
}

.panel-card {
    padding: 22px;
}

.panel-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.panel-card-head h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-primary-deep);
}

.panel-card-head span {
    color: var(--color-gray-500);
    font-size: .9rem;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.quick-card {
    padding: 18px;
}

.quick-card-link {
    transition: transform .18s ease, box-shadow .18s ease;
}

.quick-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 36px rgba(15,79,138,.12);
}

.quick-card h3 {
    margin: 0 0 8px;
    color: var(--color-primary-dark);
    font-size: 1.05rem;
}

.quick-card p {
    margin: 0 0 14px;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.task-list,
.placeholder-checklist {
    display: grid;
    gap: 12px;
}

.task-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 14px;
    padding: 14px 16px;
    background: #fbfdff;
}

.task-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-gray-900);
}

.task-item p {
    margin: 0;
    color: var(--color-gray-700);
}

.mini-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.mini-stat-card {
    padding: 20px 22px;
}

.placeholder-note {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, #f1f6fb 100%);
    border: 1px solid rgba(15,79,138,.08);
}

.placeholder-note p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.7;
}

@media (max-width: 1100px) {
    .guest-body-final {
        padding: 22px;
    }

    .login-shell-final {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .login-showcase-final {
        min-height: 360px;
        padding: 34px 22px 16px;
    }

    .login-showcase-content-final {
        text-align: center;
    }

    .showcase-copy-final {
        margin: 0 auto;
    }

    .showcase-pills-final {
        justify-content: center;
    }

    .login-form-wrap-final {
        max-width: 520px;
    }

    .topbar-inner,
    .page-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .metrics-grid,
    .content-grid,
    .workspace-grid,
    .mini-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .guest-body-final {
        padding: 14px;
    }

    .login-showcase-final {
        min-height: 320px;
        padding: 28px 16px 12px;
    }

    .login-showcase-content-final h1 {
        font-size: clamp(2.6rem, 11vw, 4rem);
    }

    .showcase-copy-final {
        font-size: 1rem;
    }

    .showcase-pills-final span {
        min-width: 100%;
    }

    .auth-card-final {
        padding: 28px 20px 22px;
    }

    .auth-card-header h2 {
        font-size: 1.95rem;
    }

    .auth-row-final {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-footer-note-final,
    .metrics-grid,
    .content-grid,
    .workspace-grid,
    .quick-grid,
    .mini-stats-grid {
        grid-template-columns: 1fr;
    }

    .task-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav {
        width: 100%;
    }

    .main-nav a {
        padding-left: 0;
        padding-right: 0;
    }
}

/* BLOQUE 3 · CLIENTES Y PROSPECTOS */
.mini-stats-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mini-stat-card-soft small {
    display: block;
    margin-top: 10px;
    color: var(--color-gray-500);
}

.workspace-grid-wide {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
}

.side-stack {
    display: grid;
    gap: 18px;
}

.filter-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(0, .8fr));
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
}

.filter-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-700);
    font-weight: 700;
    font-size: .9rem;
}

.filter-toolbar input,
.filter-toolbar select {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 14px;
    padding: 0 14px;
    background: #fbfdff;
    color: var(--color-gray-900);
    outline: none;
    box-shadow: 0 10px 22px rgba(20,45,85,.04);
}

.filter-toolbar input:focus,
.filter-toolbar select:focus {
    border-color: rgba(15,79,138,.30);
    box-shadow: 0 0 0 4px rgba(15,79,138,.07);
}

.filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.table-shell {
    overflow-x: auto;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    background: var(--color-white);
}

.crm-table th,
.crm-table td {
    padding: 18px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(15,79,138,.08);
}

.crm-table th {
    background: #f8fbfe;
    color: var(--color-primary-dark);
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.crm-table tbody tr:hover {
    background: #fbfdff;
}

.crm-table tbody tr:last-child td {
    border-bottom: 0;
}

.entity-block {
    display: grid;
    gap: 6px;
}

.entity-block strong {
    color: var(--color-primary-deep);
    font-size: 1rem;
}

.entity-block span,
.entity-block small {
    color: var(--color-gray-700);
}

.entity-block.compact strong {
    font-size: .95rem;
}

.stacked-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tone-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: .84rem;
}

.tone-badge-neutral {
    background: #f4f7fa;
    color: var(--color-gray-900);
}

.tone-badge-light {
    background: rgba(15,79,138,.06);
    color: var(--color-primary-dark);
}

.row-actions {
    display: grid;
    gap: 10px;
}

.text-action {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.text-action-muted {
    color: var(--color-gray-500);
}

.empty-state-inline {
    padding: 20px 4px;
}

.empty-state-inline strong {
    display: block;
    color: var(--color-primary-deep);
    margin-bottom: 6px;
}

.empty-state-inline p {
    margin: 0;
    color: var(--color-gray-700);
}

.insight-list {
    display: grid;
    gap: 12px;
}

.insight-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.insight-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
}

.insight-card p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.65;
}

.insight-card-highlight {
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, #f1f6fb 100%);
}

.page-actions-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.detail-grid {
    align-items: start;
}

.detail-main-card {
    display: grid;
    gap: 22px;
}

.detail-section + .detail-section {
    border-top: 1px solid rgba(15,79,138,.08);
    padding-top: 22px;
}

.detail-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-kv-item {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.detail-kv-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-600);
    font-size: .9rem;
}

.detail-kv-item strong {
    color: var(--color-primary-deep);
}

.contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.contact-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.contact-card strong,
.contact-card span,
.contact-card small {
    display: block;
}

.contact-card strong {
    color: var(--color-primary-deep);
    margin-bottom: 6px;
}

.contact-card span,
.contact-card small {
    color: var(--color-gray-700);
}

.timeline-list {
    display: grid;
    gap: 16px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 14px;
    align-items: start;
}

.timeline-bullet {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: 0 0 0 5px rgba(15,79,138,.08);
    margin-top: 6px;
}

.timeline-content small,
.timeline-content p {
    color: var(--color-gray-700);
}

.timeline-content strong {
    display: block;
    margin: 6px 0;
    color: var(--color-primary-deep);
}

.timeline-content p {
    margin: 0;
    line-height: 1.65;
}

@media (max-width: 1100px) {
    .workspace-grid-wide,
    .detail-kv-grid,
    .contact-list,
    .mini-stats-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .filter-toolbar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .workspace-grid-wide,
    .detail-kv-grid,
    .contact-list,
    .mini-stats-grid-4,
    .filter-toolbar {
        grid-template-columns: 1fr;
    }

    .page-actions-inline,
    .filter-actions {
        width: 100%;
    }

    .page-actions-inline .btn,
    .filter-actions .btn {
        width: 100%;
    }
}


.async-page-content {
    position: relative;
    min-height: 220px;
}

.async-page-content.is-loading {
    pointer-events: none;
    opacity: .72;
    transition: opacity .18s ease;
}

.async-page-content.is-loading::after {
    content: "Actualizando vista...";
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 79, 138, .92);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 18px 40px rgba(15,79,138,.18);
}

/* BLOQUE 4 · TICKETS Y LLAMADAS */
.compact-badges {
    margin-bottom: 10px;
}

.entity-block-top-gap {
    margin-top: 12px;
}

.script-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.script-step-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.script-step-card span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}

.script-step-card strong {
    display: block;
    color: var(--color-primary-deep);
    line-height: 1.65;
    font-size: .96rem;
}

.detail-callout {
    margin-top: 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.detail-callout span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-600);
    font-size: .9rem;
}

.detail-callout strong {
    color: var(--color-primary-deep);
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .script-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .script-list {
        grid-template-columns: 1fr;
    }
}

/* BLOQUE 5 · REPORTES Y SEGURIDAD */
.module-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 18px;
    padding: .35rem;
    border: 1px solid rgba(14, 80, 128, .08);
    border-radius: 999px;
    background: rgba(248, 251, 255, .92);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .035);
}

.module-tabs a,
.module-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #40546b;
    font-size: .88rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.module-tabs a:hover,
.module-tab:hover {
    background: #eef6ff;
    border-color: #d9eafa;
    color: #0b4f86;
    transform: translateY(-1px);
}

.module-tabs a.is-active,
.module-tab.is-active {
    background: linear-gradient(135deg, #0b5f99 0%, #0e7fbd 100%);
    border-color: rgba(11, 95, 153, .18);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(11, 95, 153, .18);
}

.module-tab-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: currentColor;
    opacity: .35;
}

.module-tab.is-active .module-tab-dot,
.module-tabs a.is-active .module-tab-dot {
    opacity: .95;
}

.preview-card-head {
    margin-bottom: 16px;
}

.preview-badges {
    margin-bottom: 16px;
}

.preview-mini-table {
    display: grid;
    gap: 10px;
}

.preview-mini-row {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fbfdff;
}

.preview-mini-row span {
    color: var(--color-gray-700);
    font-size: .92rem;
    line-height: 1.55;
}

.btn-static {
    pointer-events: none;
}

.security-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .security-mini-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .module-tabs {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 22px;
    }

    .module-tabs a,
    .module-tab {
        width: 100%;
    }

    .security-mini-grid {
        grid-template-columns: 1fr;
    }
}

/* FASE 2 · SEGURIDAD REAL */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-user {
    display: grid;
    gap: 2px;
    text-align: right;
}

.topbar-user strong {
    color: var(--color-primary-deep);
    font-size: .92rem;
}

.topbar-user span {
    color: var(--color-gray-600);
    font-size: .84rem;
}

.flash-banner {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(15,79,138,.10);
    box-shadow: var(--shadow-soft);
}

.flash-banner ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.flash-banner-success {
    background: linear-gradient(180deg, #eff8f2 0%, #f7fcf8 100%);
    color: #1f6c3c;
}

.flash-banner-error {
    background: linear-gradient(180deg, #fff4f4 0%, #fff8f8 100%);
    color: #8b2d2d;
}

.form-stack {
    display: grid;
    gap: 22px;
}

.card-form-grid {
    display: grid;
    gap: 16px;
}

.card-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-block {
    display: grid;
    gap: 8px;
    align-content: start;
    align-self: start;
}

.field-block-inline {
    align-items: center;
}

.field-block-bottom {
    align-self: end;
    min-height: 52px;
}

.field-label {
    color: var(--color-gray-700);
    font-weight: 700;
    font-size: .92rem;
}

.field-input,
.field-textarea {
    width: 100%;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 14px;
    padding: 14px 16px;
    background: #fbfdff;
    color: var(--color-gray-900);
    outline: none;
    box-shadow: 0 10px 22px rgba(20,45,85,.04);
    font: inherit;
}

.field-input {
    min-height: 52px;
}

.field-textarea {
    min-height: 120px;
    resize: vertical;
}

.field-input:focus,
.field-textarea:focus {
    border-color: rgba(15,79,138,.30);
    box-shadow: 0 0 0 4px rgba(15,79,138,.07);
}

.helper-text {
    color: var(--color-gray-500);
    font-size: .85rem;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.checkbox-grid-compact {
    grid-template-columns: 1fr;
}

.selection-card {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fbfdff;
}

.selection-card p {
    margin: 6px 0 0;
    color: var(--color-gray-700);
    line-height: 1.55;
}

.selection-card-compact strong {
    font-size: .9rem;
}

.selection-card-compact p {
    font-size: .84rem;
}

.permission-group-grid,
.security-permission-groups {
    display: grid;
    gap: 16px;
}

.permission-group-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.permission-group-card > strong {
    display: block;
    margin-bottom: 12px;
    color: var(--color-primary-deep);
}

.form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
}

.status-chip-success {
    background: #edf8f1;
    color: #1f6c3c;
}

.status-chip-danger {
    background: #fff0f0;
    color: #9b3030;
}

.filter-toolbar-compact {
    grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(0, .85fr)) auto;
}

.filter-toolbar-role {
    grid-template-columns: minmax(220px, 1.3fr) minmax(0, .85fr) auto;
}

@media (max-width: 1100px) {
    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .card-form-grid-2,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .filter-toolbar-compact,
    .filter-toolbar-role {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .topbar-actions,
    .topbar-user {
        width: 100%;
        text-align: left;
    }

    .filter-toolbar-compact,
    .filter-toolbar-role,
    .card-form-grid-2,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}


.compact-form-stack {
    gap: 16px;
}

.catalog-detail-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr);
}

.field-input-color {
    min-height: 52px;
    padding: 8px 10px;
}

.field-textarea-compact {
    min-height: 92px;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid rgba(15,79,138,.12);
}

.settings-stack {
    display: grid;
    gap: 16px;
}

.setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .9fr);
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(251,253,255,.95) 0%, rgba(247,250,253,.98) 100%);
}

.setting-row p {
    margin: 6px 0 12px;
    color: var(--color-gray-600);
}

.setting-input-wrap {
    display: grid;
    gap: 10px;
}

.empty-state-inline {
    padding: 20px 8px;
    text-align: center;
    color: var(--color-gray-600);
}

.form-actions-stack {
    justify-content: stretch;
}

.form-actions-stack .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 1040px) {
    .catalog-detail-grid,
    .setting-row {
        grid-template-columns: 1fr;
    }
}


/* AJUSTE UI · CATÁLOGOS Y CONFIGURACIÓN */
.metric-grid,
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.catalog-metric-grid {
    margin-bottom: 18px;
}

.metric-card-compact {
    padding: 18px 20px;
    min-height: 132px;
}

.metric-card-compact span {
    margin-bottom: 8px;
}

.metric-card-compact strong {
    font-size: 1.85rem;
}

.collapse-card {
    margin-bottom: 18px;
    background: var(--color-white);
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.collapse-card > summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(250,252,254,.95) 0%, rgba(245,248,251,.96) 100%);
}

.collapse-card > summary::-webkit-details-marker {
    display: none;
}

.collapse-card > summary strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: 1.02rem;
}

.collapse-card > summary span {
    color: var(--color-gray-600);
    font-size: .9rem;
}

.collapse-indicator {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark) !important;
    font-weight: 700;
    white-space: nowrap;
}

.collapse-body {
    padding: 18px 20px 20px;
}

.collapse-body-tight {
    padding-top: 12px;
}

.filters-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .7fr) auto;
    gap: 14px;
    align-items: end;
}

.filters-grid-compact {
    grid-template-columns: minmax(280px, 1.7fr) minmax(180px, .8fr) auto;
}

.filter-field {
    display: grid;
    gap: 8px;
}

.filter-field label {
    color: var(--color-gray-700);
    font-weight: 700;
    font-size: .92rem;
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 14px;
    padding: 0 14px;
    background: #fbfdff;
    color: var(--color-gray-900);
    outline: none;
    box-shadow: 0 10px 22px rgba(20,45,85,.04);
}

.filter-field input:focus,
.filter-field select:focus {
    border-color: rgba(15,79,138,.30);
    box-shadow: 0 0 0 4px rgba(15,79,138,.07);
}

.catalog-card-list,
.catalog-item-list {
    display: grid;
    gap: 14px;
}

.catalog-index-card,
.catalog-item-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fbfdff;
}

.catalog-index-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.catalog-index-title-row h3 {
    margin: 0;
    color: var(--color-primary-deep);
    font-size: 1rem;
}

.catalog-index-main p,
.catalog-item-main p {
    margin: 0 0 12px;
    color: var(--color-gray-700);
    line-height: 1.58;
}

.catalog-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.catalog-index-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.catalog-index-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-action-equal {
    width: 148px;
    min-width: 148px;
    min-height: 46px;
    padding: 0 14px;
}

.catalog-index-actions .btn-action-equal {
    width: 148px;
}

.empty-state-card {
    border: 1px dashed rgba(15,79,138,.18);
    border-radius: 16px;
    background: #fbfdff;
    padding: 24px 18px;
}

.catalog-detail-grid-tight {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
    gap: 18px;
}

.catalog-main-stack {
    display: grid;
    gap: 18px;
}

.detail-kv-grid-single {
    grid-template-columns: 1fr;
}

.settings-collapse {
    margin-bottom: 14px;
}

.settings-stack-compact {
    gap: 12px;
}

.setting-row-compact {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .85fr);
    gap: 14px;
    padding: 16px 18px;
}

.checkbox-line-boxed {
    min-height: 52px;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 14px;
    padding: 0 14px;
    background: #fbfdff;
    justify-content: flex-start;
}

.config-main-card {
    padding: 18px;
}

.form-actions-sticky-lite {
    position: sticky;
    bottom: 10px;
    z-index: 3;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 36%, rgba(255,255,255,.98) 100%);
}

@media (max-width: 1180px) {
    .metric-grid,
    .metrics-grid,
    .catalog-detail-grid-tight {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 980px) {
    .filters-grid,
    .filters-grid-compact,
    .setting-row-compact,
    .catalog-index-card,
    .catalog-item-card,
    .catalog-detail-grid-tight {
        grid-template-columns: 1fr;
    }

    .catalog-index-actions {
        justify-content: stretch;
    }

    .catalog-index-actions-row {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
    }

    .catalog-index-actions .btn {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .metric-grid,
    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .collapse-card > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .collapse-indicator {
        white-space: normal;
    }

    .form-actions-sticky-lite,
    .form-actions-sticky-lite .btn,
    .catalog-index-actions .btn,
    .filter-actions .btn {
        width: 100%;
    }
}


.pill-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1f6fb;
    border: 1px solid rgba(15,79,138,.10);
    color: var(--color-primary-dark);
    font-size: .8rem;
    font-weight: 700;
}

.status-positive {
    background: #edf8f1;
    color: #1f6c3c;
}

.status-neutral {
    background: #f4f7fa;
    color: var(--color-gray-700);
}

.table-secondary-text {
    color: var(--color-gray-600);
    font-size: .9rem;
}

.table-link {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.detail-side-stack,
.activity-list {
    display: grid;
    gap: 14px;
}

.activity-item {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fbfdff;
}

.activity-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary-deep);
}

.activity-item p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.58;
}


/* Ajuste puntual filtros Tickets/Tareas */
.filter-toolbar-stacked {
    display: block;
    margin-bottom: 18px;
}

.filter-toolbar-stacked .filter-toolbar-top {
    margin-bottom: 14px;
}

.filter-toolbar-bottom-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) 1fr;
    gap: 14px;
    align-items: end;
}

.filter-toolbar-bottom-row .filter-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-700);
    font-weight: 700;
    font-size: .9rem;
}

.filter-toolbar-bottom-row select {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 14px;
    padding: 0 14px;
    background: #fbfdff;
    color: var(--color-gray-900);
    outline: none;
    box-shadow: 0 10px 22px rgba(20,45,85,.04);
}

.filter-toolbar-bottom-row select:focus {
    border-color: rgba(15,79,138,.30);
    box-shadow: 0 0 0 4px rgba(15,79,138,.07);
}

.filter-actions-inline-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .filter-toolbar-bottom-row {
        grid-template-columns: 1fr;
    }
}


/* Ajuste puntual filtros Tickets/Tareas V5 */
.filter-toolbar-single-row {
    grid-template-columns: minmax(220px, 1.3fr);
    margin-bottom: 12px;
}

.filter-actions-below-clean {
    align-items: center;
    margin-top: 2px;
}

.filter-actions-below-clean .btn {
    min-height: 46px;
}

@media (max-width: 980px) {
    .filter-toolbar-single-row {
        grid-template-columns: 1fr;
    }
}

/* Fase 8 · Vista 360 y tableros */
.metrics-grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.metric-card-alert {
    border-color: rgba(180, 83, 9, .20);
    background: linear-gradient(180deg, rgba(255, 251, 235, .92), rgba(255,255,255,.96));
}

.dashboard-grid-3 {
    grid-template-columns: 1.35fr 1fr 1fr;
}

.quick-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pipeline-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pipeline-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
}

.pipeline-row p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .86rem;
}

.timeline-bullet-danger {
    background: #b91c1c;
    box-shadow: 0 0 0 4px rgba(185, 28, 28, .12);
}

.timeline-bullet-warning {
    background: #b45309;
    box-shadow: 0 0 0 4px rgba(180, 83, 9, .12);
}

.insight-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.compact-badges-top-gap {
    margin-top: 10px;
}

.overview-banner {
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(15, 23, 42, .08);
    margin-bottom: 12px;
}

.overview-banner strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 6px;
}

.overview-banner p {
    margin: 0;
    color: #475569;
}

.overview-banner-success {
    background: linear-gradient(180deg, rgba(240, 253, 244, .96), rgba(255,255,255,.98));
    border-color: rgba(21, 128, 61, .18);
}

.overview-banner-info {
    background: linear-gradient(180deg, rgba(239, 246, 255, .96), rgba(255,255,255,.98));
    border-color: rgba(2, 132, 199, .18);
}

.overview-banner-warning {
    background: linear-gradient(180deg, rgba(255, 251, 235, .96), rgba(255,255,255,.98));
    border-color: rgba(180, 83, 9, .18);
}

.overview-banner-danger {
    background: linear-gradient(180deg, rgba(254, 242, 242, .96), rgba(255,255,255,.98));
    border-color: rgba(185, 28, 28, .18);
}

.compact-insight-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tone-badge-success {
    background: rgba(21, 128, 61, .10);
    color: #166534;
}

.tone-badge-info {
    background: rgba(2, 132, 199, .10);
    color: #075985;
}

.tone-badge-warning {
    background: rgba(180, 83, 9, .12);
    color: #92400e;
}

.tone-badge-danger {
    background: rgba(185, 28, 28, .10);
    color: #991b1b;
}

@media (max-width: 1320px) {
    .metrics-grid-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid-3,
    .quick-grid-6 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .metrics-grid-6,
    .compact-insight-list {
        grid-template-columns: 1fr;
    }
}

.section-accordion {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 20px;
    background: #fbfdff;
    overflow: hidden;
}

.detail-main-card > .section-accordion,
.side-stack > .section-accordion {
    margin: 0;
}

.section-accordion + .section-accordion {
    margin-top: 18px;
}

.section-accordion-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(15,79,138,.03), rgba(15,79,138,0));
}

.section-accordion-summary::-webkit-details-marker {
    display: none;
}

.section-accordion-summary h2 {
    margin: 0;
    color: var(--color-primary-deep);
}

.section-accordion-summary p {
    margin: 6px 0 0;
    color: var(--color-gray-700);
}

.section-accordion-state {
    position: relative;
    padding-right: 22px;
    color: var(--color-gray-700);
    font-size: .9rem;
    white-space: nowrap;
}

.section-accordion-state::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(15,79,138,.75);
    border-bottom: 2px solid rgba(15,79,138,.75);
    transform: translateY(-65%) rotate(45deg);
    transition: transform .18s ease;
}

.section-accordion[open] .section-accordion-state::after {
    transform: translateY(-30%) rotate(-135deg);
}

.section-accordion-body {
    padding: 0 22px 22px;
}

.pipeline-grid-360 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pipeline-stage-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    padding: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 138px;
}

.pipeline-stage-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pipeline-stage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding: 0 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15,79,138,.12), rgba(15,79,138,.05));
    color: var(--color-primary-deep);
    font-weight: 800;
    font-size: 1.2rem;
}

.pipeline-stage-caption {
    color: var(--color-gray-700);
    font-size: .9rem;
}

.pipeline-stage-card strong {
    color: var(--color-primary-deep);
    font-size: 1.02rem;
}

.pipeline-stage-card p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.panel-card-nested {
    border: none;
    background: transparent;
}

.panel-card-nested .section-accordion-summary,
.panel-card-nested .section-accordion-body {
    background: #fff;
}

@media (max-width: 1100px) {
    .pipeline-grid-360 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .section-accordion-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-accordion-state {
        padding-right: 18px;
    }

    .pipeline-grid-360 {
        grid-template-columns: 1fr;
    }
}

/* ===== Vista 360 refinement ===== */
.vista360-head {
    margin-bottom: 18px;
}

.vista360-metrics .vista360-metric-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.98));
    border: 1px solid rgba(15,79,138,.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .05);
}

.vista360-layout {
    align-items: start;
}

.vista360-main-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.vista360-side-stack {
    gap: 18px;
}

.vista360-accordion {
    border: 1px solid rgba(15, 79, 138, .08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
    box-shadow: 0 22px 48px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.vista360-accordion + .vista360-accordion {
    margin-top: 20px;
}

.vista360-accordion .section-accordion-summary {
    padding: 20px 22px;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 32%),
        linear-gradient(180deg, rgba(15,79,138,.06), rgba(15,79,138,0));
}

.accordion-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.section-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15,79,138,.14), rgba(15,79,138,.06));
    color: var(--color-primary-deep);
    font-weight: 800;
    font-size: .86rem;
    letter-spacing: .04em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.vista360-accordion .section-accordion-summary h2 {
    font-size: 1.06rem;
}

.vista360-accordion .section-accordion-summary p {
    margin-top: 4px;
    font-size: .92rem;
}

.vista360-accordion .section-accordion-state {
    min-width: 104px;
    text-align: center;
    padding: 10px 34px 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,79,138,.10);
    background: rgba(255,255,255,.86);
    color: var(--color-primary-deep);
    font-weight: 700;
}

.vista360-accordion .section-accordion-state::after {
    right: 14px;
}

.vista360-accordion .section-accordion-body {
    padding: 0 22px 22px;
}

.vista360-banner {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.vista360-badges-row {
    gap: 8px;
}

.vista360-insight-grid {
    margin-top: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vista360-insight-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .04);
}

.vista360-pipeline-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.vista360-stage-card {
    min-height: 0;
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.98));
    box-shadow: 0 14px 28px rgba(15, 23, 42, .05);
    position: relative;
    overflow: hidden;
}

.vista360-stage-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: rgba(15,79,138,.16);
}

.vista360-stage-card-1::before { background: rgba(59,130,246,.65); }
.vista360-stage-card-2::before { background: rgba(14,165,233,.65); }
.vista360-stage-card-3::before { background: rgba(245,158,11,.70); }
.vista360-stage-card-4::before { background: rgba(168,85,247,.70); }
.vista360-stage-card-5::before { background: rgba(34,197,94,.70); }

.vista360-stage-top {
    align-items: flex-start;
    gap: 12px;
}

.vista360-stage-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vista360-stage-card .pipeline-stage-count {
    min-width: 50px;
    height: 50px;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.vista360-stage-card strong {
    font-size: .98rem;
    line-height: 1.2;
}

.vista360-stage-card p {
    margin-top: auto;
    font-size: .92rem;
}

.vista360-timeline-list {
    display: grid;
    gap: 12px;
}

.vista360-timeline-item {
    border: 1px solid rgba(15,79,138,.07);
    border-radius: 18px;
    background: #fff;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.vista360-timeline-item .timeline-content small {
    display: inline-block;
    margin-bottom: 5px;
    color: #64748b;
}

.vista360-timeline-item .timeline-content strong a,
.vista360-timeline-item .timeline-content strong {
    color: var(--color-primary-deep);
    text-decoration: none;
}

.vista360-timeline-item .timeline-content p {
    margin: 6px 0 0;
}

.panel-card-nested.vista360-accordion {
    border: 1px solid rgba(15,79,138,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
}

.panel-card-nested.vista360-accordion .section-accordion-summary,
.panel-card-nested.vista360-accordion .section-accordion-body {
    background: transparent;
}

@media (max-width: 1380px) {
    .vista360-pipeline-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .vista360-insight-grid,
    .vista360-pipeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .vista360-accordion .section-accordion-summary {
        align-items: flex-start;
    }

    .accordion-heading {
        width: 100%;
    }

    .vista360-accordion .section-accordion-state {
        margin-left: 58px;
    }

    .vista360-insight-grid,
    .vista360-pipeline-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== FASE 9 · PORTAL DEL CLIENTE ===== */
.portal-body {
    background:
        radial-gradient(circle at top left, rgba(44, 107, 196, 0.10), transparent 28%),
        linear-gradient(180deg, #eef3f9 0%, #f7fafc 100%);
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #d9e3f0;
    box-shadow: 0 14px 38px rgba(15, 44, 82, 0.06);
}

.portal-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 88px;
}

.portal-topbar-start {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.portal-brand-inline .brand-inline-mark {
    box-shadow: 0 12px 24px rgba(15, 60, 115, 0.18);
}

.portal-topbar-actions {
    gap: .9rem;
}

.portal-user-card {
    padding: .75rem 1rem;
    border-radius: 18px;
    border: 1px solid #d9e3f0;
    background: rgba(255,255,255,.92);
    min-width: 220px;
}

.portal-main-shell {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.portal-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.portal-nav a {
    color: #36506c;
    text-decoration: none;
    font-weight: 700;
    padding: .75rem 1rem;
    border-radius: 999px;
    transition: .18s ease;
}

.portal-nav a.is-active,
.portal-nav a:hover {
    background: #e6eef9;
    color: #0e3c73;
}

.portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
    gap: 1.4rem;
    margin-bottom: 1.5rem;
}

.portal-hero-copy,
.portal-hero-panel {
    padding: 1.35rem 1.45rem;
    border-radius: 28px;
    border: 1px solid #d9e3f0;
    background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(248,251,255,.98) 100%);
    box-shadow: 0 18px 44px rgba(15, 44, 82, 0.07);
}

.portal-hero-copy h1 {
    margin-bottom: .5rem;
}

.portal-hero-copy > p:last-of-type,
.portal-hero-panel p {
    color: #5d7186;
}

.portal-hero-panel {
    display: grid;
    gap: .85rem;
    align-content: start;
}

.portal-hero-panel strong {
    color: #0f315b;
    font-size: 1.05rem;
}

.portal-mini-note {
    padding: .95rem 1rem;
    border-radius: 18px;
    border: 1px dashed #c7d7ec;
    background: #f6faff;
}

.portal-mini-note p {
    margin: .35rem 0 0;
    color: #617587;
}

.portal-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.status-pill-soft {
    background: #f4f8fd;
    color: #57708c;
}

.portal-metric-grid {
    margin-bottom: 1.5rem;
}

.portal-metric-card {
    min-height: 132px;
    box-shadow: 0 18px 42px rgba(15, 44, 82, 0.06);
}

.portal-filter-card {
    margin-bottom: 1.5rem;
}

.portal-filter-card-strong {
    box-shadow: 0 18px 42px rgba(15, 44, 82, 0.06);
}

.portal-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.portal-filter-actions {
    justify-content: flex-start;
}

.portal-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .92fr);
    gap: 1.5rem;
}

.portal-account-list {
    display: grid;
    gap: 1rem;
}

.portal-account-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-account-card {
    padding: 1.15rem 1.2rem;
    border-radius: 22px;
    border: 1px solid #d9e3f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.portal-account-card-v2 {
    box-shadow: 0 16px 38px rgba(15, 44, 82, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.portal-account-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(15, 44, 82, 0.10);
    border-color: #c8d9ee;
}

.portal-account-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.portal-account-summary {
    margin: .8rem 0 0;
    color: #58708b;
}

.portal-account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}

.portal-account-stats > div {
    padding: .8rem .85rem;
    border-radius: 16px;
    background: #f4f8fd;
    border: 1px solid #e0e9f4;
}

.portal-account-stats span {
    display: block;
    color: #6e8095;
    font-size: .78rem;
    margin-bottom: .2rem;
}

.portal-account-stats strong {
    color: #0f315b;
    font-size: 1.15rem;
}

.portal-guide-card-strong,
.portal-side-card-strong,
.portal-main-panel-strong {
    box-shadow: 0 18px 42px rgba(15, 44, 82, 0.06);
}

.portal-guide-list {
    display: grid;
    gap: 1rem;
}

.portal-soft-card {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid #d9e3f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.soft-card p {
    margin: .45rem 0;
    color: #5b6f85;
}

.soft-card small {
    color: #7a8da1;
}

.portal-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .95fr);
    gap: 1.5rem;
}

.portal-main-panel {
    display: grid;
    gap: 1rem;
}

.portal-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portal-summary-grid-strong .portal-soft-card {
    min-height: 122px;
}

.portal-section {
    border: 1px solid #d9e3f0;
    background: #ffffff;
    border-radius: 24px;
    padding: .45rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

.portal-section summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1rem;
    font-weight: 800;
    color: #103f74;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
    user-select: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.portal-section summary span {
    display: block;
}

.portal-section summary small {
    color: #678098;
    font-weight: 700;
}

.portal-section summary::-webkit-details-marker {
    display: none;
}

.portal-section[open] summary {
    margin-bottom: .85rem;
}

.portal-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .9rem;
    padding: 0 .35rem .35rem;
}

.pipeline-card-strong {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid #dce6f3;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    text-align: left;
    box-shadow: 0 12px 28px rgba(15, 44, 82, 0.05);
}

.portal-pipeline-grid .pipeline-card span {
    display: block;
    color: #6d8095;
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .35rem;
}

.portal-pipeline-grid .pipeline-card strong {
    display: block;
    font-size: 1.95rem;
    color: #0e2f58;
    line-height: 1;
    margin-bottom: .35rem;
}

.portal-pipeline-grid .pipeline-card small {
    color: #71859b;
}

.portal-timeline-item {
    border-radius: 18px;
    padding: .9rem;
    background: #fbfdff;
    border: 1px solid #e1eaf4;
}

.portal-alert-card {
    border-left: 4px solid #d7e2ef;
}

.portal-alert-card-high {
    border-left-color: #dc2626;
}

.portal-alert-card-medium {
    border-left-color: #d97706;
}

.portal-side-column {
    display: grid;
    gap: 1.5rem;
}

@media (max-width: 1180px) {
    .portal-dashboard-grid,
    .portal-account-grid,
    .portal-summary-grid,
    .portal-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .portal-filter-grid,
    .portal-account-list-grid {
        grid-template-columns: 1fr;
    }

    .portal-topbar-inner {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .portal-account-stats,
    .portal-summary-grid,
    .portal-hero-tags,
    .portal-section summary {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .portal-user-card {
        min-width: 0;
        width: 100%;
    }

    .portal-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== AJUSTE VISUAL · PORTAL BUSCADOR Y USUARIO ===== */
.portal-user-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1.05rem;
    border-radius: 20px;
    border: 1px solid #d6e4f2;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,249,255,.98) 100%);
    box-shadow: 0 12px 30px rgba(15, 44, 82, 0.08);
    min-width: 250px;
}

.portal-user-accent {
    width: 12px;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(180deg, #1d5ca8 0%, #4d89d6 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.portal-user-copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.portal-user-name {
    display: block;
    color: #0d3767;
    font-size: 1rem;
    line-height: 1.15;
}

.portal-user-email {
    display: block;
    color: #61758b;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.portal-filter-grid-enhanced {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.1rem;
    align-items: end;
}

.portal-search-field label {
    margin-bottom: .45rem;
    color: #103f73;
    font-weight: 700;
}

.portal-search-field small {
    display: block;
    margin-top: .55rem;
    color: #6a7f95;
    font-size: .8rem;
}

.portal-search-shell {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .2rem .22rem .2rem .9rem;
    border: 1px solid #d6e3f1;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 28px rgba(15, 44, 82, 0.06);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.portal-search-shell:focus-within {
    border-color: #7fa9da;
    box-shadow: 0 0 0 4px rgba(45, 108, 196, 0.12), 0 16px 34px rgba(15, 44, 82, 0.08);
    transform: translateY(-1px);
}

.portal-search-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #ecf4ff 0%, #dfeefe 100%);
    color: #1d5ca8;
    font-size: 1rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.portal-search-input {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: 0 .7rem 0 0 !important;
    min-height: 48px;
    color: #143a65;
    font-size: .96rem;
    box-shadow: none !important;
}

.portal-search-input::placeholder {
    color: #91a4b8;
}

.portal-search-input:focus {
    outline: none;
}

.portal-filter-actions-elevated {
    align-self: end;
    padding-bottom: 2px;
}

.portal-filter-actions-elevated .btn {
    min-height: 50px;
    border-radius: 16px;
    padding-inline: 1.15rem;
    font-weight: 700;
}

@media (max-width: 980px) {
    .portal-filter-grid-enhanced {
        grid-template-columns: 1fr;
    }

    .portal-filter-actions-elevated {
        padding-bottom: 0;
    }
}

@media (max-width: 720px) {
    .portal-user-card {
        min-width: 100%;
    }

    .portal-user-email {
        max-width: none;
    }

    .portal-search-shell {
        min-height: 52px;
        border-radius: 18px;
    }
}


/* ===== AJUSTE VISUAL · PORTAL ALINEACION DE BOTONES ===== */
.portal-search-field-inline {
    min-width: 0;
}

.portal-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.portal-filter-actions-inline {
    align-self: center;
    padding-bottom: 0;
    margin-top: 0;
    white-space: nowrap;
}

.portal-filter-actions-inline .btn {
    min-width: 136px;
}

@media (max-width: 980px) {
    .portal-search-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .portal-filter-actions-inline {
        justify-content: flex-start;
        white-space: normal;
    }
}

/* BLOQUE 1 · MESA COMERCIAL CLIENTES Y LEADS */
:root {
    --color-primary: #0e578d;
    --color-primary-dark: #0a446c;
    --color-primary-deep: #08324f;
    --color-primary-soft: #e8f3fb;
    --color-accent: #3d8fbe;
    --color-accent-soft: #f0f8fd;
    --color-gray-950: #183042;
    --color-gray-900: #274153;
    --color-gray-700: #5d7385;
    --color-gray-600: #718699;
    --color-gray-500: #8ea0ad;
    --color-gray-300: #cdd8e2;
    --color-gray-200: #dde7ef;
    --shadow-soft: 0 20px 42px rgba(10, 68, 108, 0.10);
    --shadow-shell: 0 24px 54px rgba(8, 50, 79, 0.12);
}

.app-body {
    background:
        radial-gradient(circle at top left, rgba(61,143,190,.08), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(14,87,141,.07), transparent 22%),
        linear-gradient(180deg, #f7fbfd 0%, #edf4f9 100%);
}

.topbar {
    background: rgba(248, 252, 254, .94);
    border-bottom: 1px solid rgba(14, 87, 141, .10);
}

.brand-inline-mark {
    background: linear-gradient(135deg, #1e85bf 0%, var(--color-primary) 54%, var(--color-primary-dark) 100%);
    box-shadow: 0 14px 26px rgba(14, 87, 141, .22);
}

.main-nav a.is-active,
.main-nav a:hover {
    background: linear-gradient(180deg, #eef7fc 0%, #e6f1fa 100%);
    color: var(--color-primary-dark);
}

.workbench-head {
    margin-bottom: 22px;
}

.workbench-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.panel-card-head-stack {
    align-items: flex-start;
}

.panel-card-head-stack > div {
    display: grid;
    gap: 6px;
}

.workbench-grid {
    grid-template-columns: minmax(0, 1.38fr) minmax(360px, .92fr);
    align-items: start;
}

.workbench-main-card {
    display: grid;
    gap: 18px;
}

.workbench-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(240,248,253,.94) 0%, rgba(255,255,255,.96) 100%);
    border: 1px solid rgba(14, 87, 141, .08);
}

.workbench-search-field {
    display: grid;
    gap: 10px;
}

.workbench-search-shell {
    position: relative;
}

.workbench-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-weight: 800;
    font-size: 1rem;
}

.workbench-search-shell input {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(14, 87, 141, .12);
    background: #fff;
    padding: 0 16px 0 44px;
    font-size: .98rem;
    color: var(--color-gray-950);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 20px rgba(12, 58, 92, .04);
}

.workbench-search-shell input:focus {
    outline: none;
    border-color: rgba(14, 87, 141, .28);
    box-shadow: 0 0 0 4px rgba(61, 143, 190, .10);
}

.workbench-search-actions {
    align-items: end;
}

.account-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.account-tab {
    min-width: 220px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(14, 87, 141, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,249,252,.98) 100%);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 6px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.account-tab strong {
    color: var(--color-primary-deep);
    font-size: 1rem;
}

.account-tab span {
    color: var(--color-gray-700);
    font-size: .9rem;
}

.account-tab:hover,
.account-tab.is-active {
    transform: translateY(-1px);
    border-color: rgba(14, 87, 141, .18);
    box-shadow: 0 20px 38px rgba(10, 68, 108, .12);
}

.account-tab.is-active {
    background: linear-gradient(180deg, #f0f8fd 0%, #e7f2fb 100%);
}

.account-table td {
    vertical-align: top;
}

.selectable-row.is-selected {
    background: linear-gradient(180deg, rgba(232,243,251,.64) 0%, rgba(244,249,252,.82) 100%);
}

.entity-block-link {
    display: grid;
    gap: 6px;
}

.type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.type-pill-client {
    color: #0b4b75;
    background: #eaf5fc;
    border-color: rgba(14, 87, 141, .14);
}

.type-pill-lead {
    color: #155c72;
    background: #edf8fb;
    border-color: rgba(61, 143, 190, .18);
}

.detail-hero-block {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(239,248,253,.95) 0%, rgba(255,255,255,.98) 100%);
    border: 1px solid rgba(14, 87, 141, .08);
    margin-bottom: 16px;
}

.detail-hero-block strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
    font-size: 1.08rem;
}

.detail-hero-block p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.detail-kv-grid-compact {
    margin-bottom: 16px;
}

.mini-inline-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.mini-inline-stat {
    padding: 14px 16px;
    border-radius: 16px;
    background: #f8fbfd;
    border: 1px solid rgba(14, 87, 141, .08);
}

.mini-inline-stat span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-700);
    font-size: .86rem;
    font-weight: 700;
}

.mini-inline-stat strong {
    color: var(--color-primary-deep);
    font-size: 1.25rem;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-actions-top-gap {
    margin-top: 16px;
}

.script-card-shell {
    display: grid;
    gap: 14px;
}

.script-card-title {
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(232,243,251,.84) 0%, rgba(244,249,252,.96) 100%);
    border: 1px solid rgba(14, 87, 141, .10);
}

.script-card-title strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
}

.script-card-title p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.62;
}

.script-section {
    padding: 15px 16px;
    border-radius: 16px;
    border: 1px solid rgba(14, 87, 141, .08);
    background: #fff;
}

.script-section span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.script-section p {
    margin: 0;
    color: var(--color-gray-900);
    line-height: 1.68;
}

.script-section-muted {
    background: #f8fbfd;
}

.workbench-side-stack {
    gap: 18px;
}

.catalog-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.catalog-chip-card {
    padding: 14px 15px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248,251,253,.98) 0%, rgba(255,255,255,.98) 100%);
    border: 1px solid rgba(14, 87, 141, .08);
}

.catalog-chip-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary-deep);
    font-size: .93rem;
}

.catalog-chip-card span {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary);
    font-size: .84rem;
    font-weight: 700;
}

.catalog-chip-card small {
    color: var(--color-gray-700);
    line-height: 1.55;
    display: block;
}

.empty-state-inline-large {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1180px) {
    .workbench-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .workbench-search {
        grid-template-columns: 1fr;
    }

    .catalog-chip-grid,
    .mini-inline-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .account-tab {
        min-width: 100%;
    }

    .row-actions-compact {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Ajuste bloque 1 · azul diagnostic suave ===== */
.app-body {
    background:
        radial-gradient(circle at top left, rgba(46, 127, 187, .10), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(11, 79, 128, .08), transparent 22%),
        linear-gradient(180deg, #f6fbfe 0%, #edf5fb 100%);
}

.topbar {
    background: rgba(247, 251, 255, .96);
    border-bottom: 1px solid rgba(19, 89, 138, .12);
    box-shadow: 0 12px 24px rgba(14, 57, 92, .04);
}

.main-nav a {
    color: #234f70;
}

.main-nav a.is-active,
.main-nav a:hover {
    background: linear-gradient(180deg, #edf7fd 0%, #e3f0fa 100%);
    color: #0f4f7f;
}

.btn-primary {
    background: linear-gradient(135deg, #247ab5 0%, #16659f 100%);
    box-shadow: 0 14px 26px rgba(22, 101, 159, .22);
}

.btn-primary:hover {
    box-shadow: 0 18px 34px rgba(22, 101, 159, .28);
}

.panel-card,
.workbench-search,
.account-tab,
.detail-hero-block,
.script-card-title,
.catalog-chip-card {
    border-color: rgba(17, 91, 144, .10);
}

.mini-stat-card-soft {
    background: linear-gradient(180deg, rgba(239, 248, 253, .92) 0%, rgba(255, 255, 255, .98) 100%);
    border: 1px solid rgba(17, 91, 144, .10);
}

.mini-stat-card-soft strong,
.panel-card-head h2,
.catalog-chip-card strong,
.account-tab strong,
.detail-hero-block strong,
.mini-inline-stat strong,
.script-card-title strong {
    color: #114f80;
}

.selectable-row.is-selected {
    background: linear-gradient(180deg, rgba(226, 240, 250, .82) 0%, rgba(241, 248, 252, .92) 100%);
}

.type-pill-client {
    background: #e6f2fa;
    color: #0d527f;
}

.type-pill-lead {
    background: #e8f7fb;
    color: #166885;
}

.status-pill-soft-blue {
    background: #eaf4fb;
    color: #0f5f92;
    border: 1px solid rgba(17, 91, 144, .12);
}

.dashboard-general-grid {
    align-items: start;
}

.panel-card-span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 920px) {
    .panel-card-span-2 {
        grid-column: auto;
    }
}


.workbench-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.workbench-main-card-full,
.panel-card-fullwidth,
.detail-full-block {
    width: 100%;
}

.workbench-main-head {
    gap: 18px;
}

.workbench-search-wide {
    padding: 18px 20px 22px;
    border: 1px solid rgba(15,79,138,.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15,79,138,.035), rgba(255,255,255,.95));
}

.workbench-search-scope {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(15,79,138,.18);
    background: #f6fafe;
    color: var(--color-primary-dark);
    font-weight: 800;
    transition: .18s ease;
}

.scope-chip.is-active {
    background: linear-gradient(180deg, #1f6ab1, #0f4f8a);
    border-color: #0f4f8a;
    color: #fff;
    box-shadow: 0 14px 28px rgba(15,79,138,.18);
}

.workbench-search-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.workbench-search-field-grow {
    min-width: 0;
}

.workbench-search-shell-strong {
    min-height: 62px;
    border: 1px solid rgba(15,79,138,.18);
    box-shadow: 0 12px 28px rgba(15,79,138,.08);
    background: #fff;
}

.workbench-search-shell-strong input {
    font-size: 1rem;
}

.table-shell-wide {
    margin-top: 18px;
}

.table-shell-scroll-x {
    overflow-x: auto;
}

.workbench-table-counter-footer {
    display: grid;
    gap: 10px;
    min-width: 980px;
    padding: 13px 14px 14px;
    border-top: 1px solid rgba(15,79,138,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,252,.98));
}

.workbench-table-counter-footer-smart {
    align-items: start;
    border-top: 1px solid rgba(15,95,146,.16);
    background:
        radial-gradient(circle at 0% 0%, rgba(21,123,182,.10), transparent 34%),
        linear-gradient(135deg, #f8fbfd 0%, #eef7fc 100%);
}

.workbench-table-counter-caption {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    color: #526f84;
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.workbench-table-counter-caption::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #157bb6;
    box-shadow: 0 0 0 4px rgba(21,123,182,.12);
}

.workbench-table-counter-main,
.workbench-table-territory-counters,
.workbench-table-counter-main-smart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.workbench-table-smart-chip {
    --counter-accent: #0ea5e9;
    --counter-text: #075985;
    --counter-muted: rgba(7,89,133,.68);
    --counter-border: rgba(14,165,233,.28);
    --counter-bg: #eaf8ff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--counter-border);
    background: linear-gradient(135deg, var(--counter-bg), #ffffff);
    color: var(--counter-text);
    font-size: .84rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15,79,138,.08);
}

.workbench-table-smart-chip i {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--counter-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--counter-accent) 16%, transparent);
}

.workbench-table-smart-chip em {
    font-style: normal;
    color: var(--counter-text);
    font-weight: 950;
}

.workbench-table-smart-chip strong {
    color: var(--counter-text);
    font-size: .96rem;
    font-weight: 950;
}

.workbench-table-smart-chip small {
    color: var(--counter-muted);
    font-size: .74rem;
    font-weight: 850;
}

.workbench-table-smart-chip-total {
    --counter-accent: #0ea5e9;
    --counter-text: #075985;
    --counter-muted: rgba(7,89,133,.68);
    --counter-border: rgba(14,165,233,.30);
    --counter-bg: #eaf8ff;
}

.workbench-table-smart-chip-territory {
    --counter-accent: #22c55e;
    --counter-text: #166534;
    --counter-muted: rgba(22,101,52,.68);
    --counter-border: rgba(34,197,94,.30);
    --counter-bg: #ecfdf3;
}

.workbench-table-smart-chip-client {
    --counter-accent: #0ea5e9;
    --counter-text: #075985;
    --counter-muted: rgba(7,89,133,.68);
    --counter-border: rgba(14,165,233,.30);
    --counter-bg: #eaf8ff;
}

.workbench-table-smart-chip-lead {
    --counter-accent: #8b5cf6;
    --counter-text: #5b21b6;
    --counter-muted: rgba(91,33,182,.68);
    --counter-border: rgba(139,92,246,.28);
    --counter-bg: #f3edff;
}

.workbench-table-smart-chip-search {
    --counter-accent: #f59e0b;
    --counter-text: #92400e;
    --counter-muted: rgba(146,64,14,.68);
    --counter-border: rgba(245,158,11,.30);
    --counter-bg: #fff7ed;
}

.account-table-wide {
    min-width: 980px;
}

.cell-fit {
    white-space: nowrap;
    width: 1%;
}

.btn-sm {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: .9rem;
}

.detail-hero-block-wide {
    background: linear-gradient(180deg, rgba(15,79,138,.05), rgba(15,79,138,.02));
}

.detail-kv-grid-expanded {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.script-card-shell-wide {
    width: 100%;
}

.script-grid-wide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.script-section-note-wide {
    margin-top: 16px;
}

@media (max-width: 1100px) {
    .detail-kv-grid-expanded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .workbench-search-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-kv-grid-expanded,
    .script-grid-wide {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ===== Ajuste bloque 3 · grid configurable y ordenable ===== */
.workbench-actions-tight {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

.workbench-actions-tight .btn {
    white-space: nowrap;
}

.workbench-search-scope-strong {
    margin-bottom: 18px;
}

.account-table-configurable {
    min-width: 1380px;
}

.account-table-configurable th,
.account-table-configurable td {
    white-space: nowrap;
}

.grid-fixed-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
}

.crm-table thead .grid-fixed-col {
    z-index: 4;
    background: #f8fbfe;
}

.selectable-row.is-selected .grid-fixed-col {
    background: linear-gradient(180deg, rgba(226, 240, 250, .82) 0%, rgba(241, 248, 252, .92) 100%);
}

.grid-config-col {
    user-select: none;
}

.grid-header-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.grid-header-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.grid-sort-indicator {
    font-size: .86rem;
    color: var(--color-primary);
}

.grid-config-col.is-sorted .grid-header-button {
    color: #0f4f8a;
}

.grid-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: 8px;
    color: var(--color-gray-500);
    cursor: grab;
    border: 1px dashed rgba(15,79,138,.16);
    background: rgba(255,255,255,.72);
}

.grid-config-col.is-dragging .grid-drag-handle {
    cursor: grabbing;
    opacity: .7;
}

.grid-config-col.is-drop-target {
    background: linear-gradient(180deg, #eef7fc 0%, #e2f0fa 100%);
}

.grid-config-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 31, 55, .34);
    backdrop-filter: blur(4px);
    z-index: 80;
}

.grid-config-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    overflow: auto;
    z-index: 81;
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(15,79,138,.12);
    box-shadow: 0 28px 60px rgba(8, 40, 66, .20);
    padding: 22px;
}

.grid-config-open {
    overflow: hidden;
}

.grid-config-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.grid-config-modal-head h3 {
    margin: 0 0 8px;
    color: var(--color-primary-deep);
    font-size: 1.2rem;
}

.grid-config-modal-head p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.grid-config-close {
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(15,79,138,.12);
    background: #f7fbfe;
    color: var(--color-primary-dark);
    font-size: 1.4rem;
    cursor: pointer;
}

.grid-config-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.grid-config-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(15,79,138,.10);
    background: linear-gradient(180deg, #fbfdff 0%, #f5faff 100%);
    color: var(--color-gray-900);
    font-weight: 700;
}

.grid-config-item input {
    width: 18px;
    height: 18px;
    accent-color: #16659f;
}

.grid-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 1080px) {
    .workbench-actions-tight {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .grid-config-list {
        grid-template-columns: 1fr;
    }
}


/* ===== Ajuste bloque 4 · acciones horizontales, exportación y filtro ===== */
.workbench-toolbar-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 2px;
}

.workbench-toolbar-inline::-webkit-scrollbar {
    height: 6px;
}

.workbench-toolbar-inline::-webkit-scrollbar-thumb {
    background: rgba(15,79,138,.18);
    border-radius: 999px;
}

.workbench-toolbar-inline .btn {
    flex: 0 0 auto;
}

.workbench-filter-row {
    justify-content: flex-start;
}

.type-cell {
    min-width: 116px;
}

.type-pill {
    min-height: 36px;
    min-width: 88px;
    font-weight: 900;
    letter-spacing: .01em;
}

.type-pill-client {
    color: #ffffff;
    background: linear-gradient(180deg, #1568a5 0%, #0f4f8a 100%);
    border-color: rgba(15,79,138,.32);
    box-shadow: 0 10px 18px rgba(15,79,138,.16);
}

.type-pill-lead {
    color: #0d5f91;
    background: linear-gradient(180deg, #eef8ff 0%, #dceefb 100%);
    border-color: rgba(52,139,198,.24);
}

.type-cell-client {
    background: linear-gradient(180deg, rgba(21,104,165,.06) 0%, rgba(21,104,165,.02) 100%);
}

.type-cell-lead {
    background: linear-gradient(180deg, rgba(84,166,218,.08) 0%, rgba(84,166,218,.03) 100%);
}

.selectable-row--client td:first-child {
    box-shadow: inset 3px 0 0 rgba(15,79,138,.22);
}

.selectable-row--lead td:first-child {
    box-shadow: inset 3px 0 0 rgba(84,166,218,.22);
}

@media (max-width: 1180px) {
    .workbench-toolbar-inline {
        flex-wrap: wrap;
        overflow: visible;
    }
}


/* ===== Ajuste bloque 5 · barra horizontal de acciones ===== */
.panel-card-head-stack > .workbench-toolbar-inline-fixed {
    display: flex;
    grid-template-columns: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 2px;
}

.panel-card-head-stack > .workbench-toolbar-inline-fixed .btn {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
}

.panel-card-head-stack > .workbench-toolbar-inline-fixed::-webkit-scrollbar {
    height: 6px;
}

.panel-card-head-stack > .workbench-toolbar-inline-fixed::-webkit-scrollbar-thumb {
    background: rgba(15,79,138,.18);
    border-radius: 999px;
}

@media (max-width: 760px) {
    .panel-card-head-stack > .workbench-toolbar-inline-fixed {
        flex-wrap: wrap;
        white-space: normal;
        overflow-x: visible;
    }
}

/* ===== Ajuste bloque 6 · barra dividida y detalle con vista resumida ===== */
.workbench-toolbar-split {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
}

.workbench-toolbar-left,
.workbench-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
}

.workbench-toolbar-right {
    margin-left: auto;
    justify-content: flex-end;
}

.detail-record-shell {
    display: grid;
    gap: 18px;
}

.detail-record-head {
    gap: 16px;
}

.detail-record-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.detail-record-summary {
    display: grid;
    gap: 16px;
}

.detail-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.detail-kv-grid-selectable .detail-kv-item {
    min-height: 96px;
}

.detail-kv-item strong {
    white-space: normal;
}

.script-basic-block .script-grid-basic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1120px) {
    .workbench-toolbar-split {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .workbench-toolbar-right {
        margin-left: 0;
    }
}

@media (max-width: 840px) {
    .detail-hero-row,
    .script-basic-block .script-grid-basic {
        grid-template-columns: 1fr;
        display: grid;
    }

    .detail-record-head-actions {
        justify-content: flex-start;
    }
}


/* ===== Ajuste bloque 7 · ficha ejecutiva del detalle ===== */
.detail-record-shell-executive {
    gap: 22px;
}

.detail-record-head-executive {
    align-items: flex-start;
}

.detail-record-head-copy {
    display: grid;
    gap: 8px;
}

.detail-record-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .74rem;
    font-weight: 800;
}

.detail-record-head-copy h2 {
    margin: 0;
    color: var(--color-primary-deep);
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.detail-record-head-copy p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.detail-executive-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr);
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(15,79,138,.10);
    box-shadow: var(--shadow-soft);
}

.detail-executive-hero-client {
    background:
        linear-gradient(135deg, rgba(15,79,138,.08) 0%, rgba(15,79,138,.03) 58%, rgba(255,255,255,.92) 100%);
}

.detail-executive-hero-lead {
    background:
        linear-gradient(135deg, rgba(46,143,218,.12) 0%, rgba(46,143,218,.04) 58%, rgba(255,255,255,.92) 100%);
}

.detail-executive-hero-main {
    display: grid;
    gap: 18px;
}

.detail-executive-hero-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.detail-executive-hero-title strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: 1.35rem;
    line-height: 1.1;
}

.detail-executive-hero-title p {
    margin: 8px 0 0;
    color: var(--color-gray-700);
    font-weight: 700;
}

.detail-executive-hero-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-hero-chip,
.detail-metric-card {
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,79,138,.10);
}

.detail-hero-chip span,
.detail-metric-card span {
    color: var(--color-gray-700);
    font-size: .77rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.detail-hero-chip strong,
.detail-metric-card strong {
    color: var(--color-primary-deep);
    font-size: 1.02rem;
    line-height: 1.35;
}

.detail-executive-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-metric-card strong {
    font-size: 1.55rem;
    line-height: 1;
}

.detail-record-summary-executive {
    display: grid;
    gap: 18px;
}

.detail-section-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,248,252,.98) 100%);
    border: 1px solid rgba(15,79,138,.08);
    box-shadow: 0 14px 34px rgba(17, 55, 97, 0.06);
}

.detail-section-head {
    display: grid;
    gap: 6px;
}

.detail-section-head h3 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 1.02rem;
    letter-spacing: -.02em;
}

.detail-section-head p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.55;
    font-size: .94rem;
}

.detail-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.detail-section-grid-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-kv-item-executive {
    min-height: 100px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--color-white);
    border: 1px solid rgba(15,79,138,.08);
    box-shadow: 0 10px 24px rgba(17, 55, 97, 0.04);
}

.detail-kv-item-executive span {
    color: var(--color-gray-600);
    font-size: .77rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.detail-kv-item-executive strong {
    color: var(--color-gray-950);
    font-size: 1rem;
    line-height: 1.45;
}

.detail-kv-item-notes {
    min-height: 132px;
    align-content: flex-start;
}

.detail-kv-item-notes strong {
    line-height: 1.7;
}

.detail-actions-executive {
    justify-content: flex-end;
}

@media (max-width: 1200px) {
    .detail-executive-hero {
        grid-template-columns: 1fr;
    }

    .detail-section-grid,
    .detail-section-grid-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .detail-executive-hero-title,
    .detail-executive-hero-chips,
    .detail-executive-metrics,
    .detail-section-grid,
    .detail-section-grid-metrics {
        grid-template-columns: 1fr;
        display: grid;
    }

    .detail-record-head-actions,
    .detail-actions-executive {
        justify-content: flex-start;
    }
}


/* ===== Ajuste bloque 8 · barra afinada, densidad y formulario visible ===== */
.workbench-main-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.workbench-main-head > :first-child {
    min-width: 0;
}

.workbench-main-head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 1.82rem);
    line-height: 1.05;
    white-space: nowrap;
    letter-spacing: -.02em;
}

.workbench-toolbar-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.workbench-toolbar-left {
    min-width: 0;
}

.workbench-toolbar-right {
    justify-self: end;
}

.account-table-configurable th,
.account-table-configurable td {
    padding: 9px 10px;
    line-height: 1.2;
}

.grid-header-button {
    min-height: 34px;
}

.type-pill {
    min-height: 30px;
    min-width: 78px;
    font-size: .76rem;
    padding: 0 10px;
}

.crm-table td .btn.btn-sm {
    min-height: 32px;
    padding: 0 12px;
}

.detail-record-shell-executive {
    gap: 18px;
}

.detail-executive-hero {
    gap: 14px;
    padding: 18px;
}

.detail-executive-hero-title strong {
    font-size: 1.22rem;
}

.detail-executive-hero-title p {
    margin-top: 6px;
}

.detail-executive-hero-chips {
    gap: 10px;
}

.detail-hero-chip,
.detail-metric-card {
    min-height: 70px;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
}

.detail-hero-chip strong,
.detail-metric-card strong {
    font-size: .96rem;
}

.detail-metric-card strong {
    font-size: 1.35rem;
}

.detail-type-text {
    display: inline-block;
    margin-bottom: 10px;
    font-size: .84rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.detail-type-text--client {
    color: #0f4f8a;
}

.detail-type-text--lead {
    color: #3c87bb;
}

.detail-record-head-actions {
    align-items: flex-start;
}

.detail-section-card {
    gap: 14px;
    padding: 18px;
}

.detail-section-head-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.detail-readonly-form {
    display: grid;
    gap: 14px;
}

.detail-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.detail-form-item {
    display: grid;
    gap: 7px;
}

.detail-form-item-full {
    grid-column: 1 / -1;
}

.detail-form-item label {
    color: var(--color-gray-600);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.detail-form-item input,
.detail-form-item textarea {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(15,79,138,.10);
    background: #f8fbfe;
    color: var(--color-gray-950);
    font-size: .95rem;
    line-height: 1.3;
    padding: 10px 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.detail-form-item textarea {
    min-height: 110px;
    resize: vertical;
}

.detail-form-item input[readonly],
.detail-form-item textarea[readonly] {
    cursor: default;
}

.detail-kv-item-executive {
    min-height: 84px;
    padding: 14px 16px;
}

.detail-kv-item-executive strong {
    font-size: .95rem;
    line-height: 1.32;
}

.detail-kv-item-metric strong {
    font-size: 1.32rem;
    line-height: 1;
}

.detail-section-grid-metrics {
    gap: 12px;
}

@media (max-width: 1180px) {
    .workbench-main-head {
        grid-template-columns: 1fr;
    }

    .detail-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .workbench-toolbar-split,
    .detail-section-head-inline,
    .detail-form-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .workbench-toolbar-right {
        justify-self: stretch;
    }

    .detail-section-head-inline .btn {
        justify-self: start;
    }
}

.detail-record-head-compact {
    gap: 16px;
    align-items: flex-start;
}

.detail-record-head-actions-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.detail-identity-stack {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.detail-identity-stack span {
    color: var(--color-gray-700);
    font-size: .96rem;
    line-height: 1.35;
}

.inline-form-alert {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff4f4;
    border: 1px solid #f0caca;
    color: #9d4040;
}

.inline-form-alert strong {
    display: block;
    margin-bottom: 8px;
}

.inline-form-alert ul {
    margin: 0;
    padding-left: 18px;
}

.detail-section-card-form-tight {
    padding-top: 22px;
}

.detail-section-head-form p {
    max-width: 760px;
}

.detail-inline-form {
    display: grid;
    gap: 18px;
}

.detail-form-sections {
    display: grid;
    gap: 16px;
}

.detail-form-section-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,248,252,.95));
    padding: 16px 16px 14px;
}

.detail-form-section-head {
    margin-bottom: 12px;
}

.detail-form-section-head h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.detail-form-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.detail-form-item {
    display: grid;
    gap: 4px;
}

.detail-form-item-full {
    grid-column: 1 / -1;
}

.detail-form-item label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-gray-700);
}

.detail-form-item input,
.detail-form-item select,
.detail-form-item textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(15,79,138,.12);
    border-radius: 12px;
    padding: 8px 11px;
    background: rgba(255,255,255,.94);
    color: var(--color-gray-950);
    font-size: .93rem;
    line-height: 1.25;
    box-shadow: none;
}

.detail-form-item textarea {
    min-height: 94px;
    resize: vertical;
}

.detail-inline-form:not(.is-inline-editing) input[readonly],
.detail-inline-form:not(.is-inline-editing) textarea[readonly],
.detail-inline-form:not(.is-inline-editing) select:disabled,
.detail-inline-form:not(.is-inline-editing) input:disabled {
    background: #f6f9fc;
    color: var(--color-gray-900);
    cursor: default;
    opacity: 1;
}

.detail-inline-form.is-inline-editing input,
.detail-inline-form.is-inline-editing select,
.detail-inline-form.is-inline-editing textarea {
    background: #fff;
    border-color: rgba(15,79,138,.24);
}

.detail-inline-form.is-inline-editing input:focus,
.detail-inline-form.is-inline-editing select:focus,
.detail-inline-form.is-inline-editing textarea:focus {
    outline: 2px solid rgba(15,79,138,.12);
    border-color: rgba(15,79,138,.40);
}

.detail-form-item-checkbox {
    align-content: end;
}

.detail-checkbox-row {
    min-height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(15,79,138,.12);
    border-radius: 12px;
    padding: 0 11px;
    background: rgba(255,255,255,.94);
}

.detail-inline-form:not(.is-inline-editing) .detail-checkbox-row {
    background: #f6f9fc;
}

.detail-inline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid rgba(15,79,138,.08);
}

.detail-inline-secondary,
.detail-inline-edit-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    .detail-form-grid-2col {
        grid-template-columns: 1fr;
    }

    .detail-inline-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ===== Ajuste bloque 9 · detalle sobrio y sin resumen operativo ===== */
.detail-record-head-copy {
    gap: 6px;
}

.detail-record-eyebrow {
    letter-spacing: .1em;
}

.detail-identity-stack {
    gap: 4px;
}

.detail-record-head-actions-inline {
    justify-content: flex-end;
}

.detail-section-head-form-minimal {
    margin-bottom: 2px;
}

.detail-section-head-form-minimal h3 {
    font-size: 1rem;
}

.detail-section-head-form-minimal p {
    display: none;
}

.detail-inline-footer {
    padding-top: 10px;
}

.script-basic-block {
    margin-top: 2px;
}


/* ===== Ajuste bloque 12 · énfasis de datos clave y direcciones ocultas inicialmente ===== */
.detail-record-head-copy h2 {
    color: #0f4f8a;
    letter-spacing: -.02em;
}

.detail-record-eyebrow {
    color: #2a6ba5;
}

.detail-identity-stack-emphasis {
    margin-top: 12px;
    gap: 8px;
}

.identity-line {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(242,248,253,.98), rgba(233,243,250,.98));
    border: 1px solid rgba(15,79,138,.10);
}

.identity-label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #5f7f99;
}

.identity-value {
    font-size: 1rem;
    line-height: 1.28;
    color: #123b63;
    font-weight: 700;
}

.identity-value-strong {
    color: #0f4f8a;
    font-size: 1.06rem;
}

.identity-tier {
    color: #1f6fb3;
}

.detail-form-section-head h4 {
    color: #155791;
}

.detail-form-section-card {
    border-color: rgba(21,87,145,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,252,.98));
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item input[readonly],
.detail-inline-form:not(.is-inline-editing) .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) .detail-form-item select:disabled,
.detail-inline-form:not(.is-inline-editing) .detail-form-item input:disabled {
    border-color: rgba(21,87,145,.12);
    background: linear-gradient(180deg, #f9fcfe, #f2f7fb);
}

.detail-form-item label {
    color: #4f6e89;
}

@media (min-width: 961px) {
    .detail-identity-stack-emphasis {
        max-width: 620px;
    }
}


/* ===== Ajuste bloque 13 · encabezado compacto para maximizar espacio ===== */
.detail-identity-compact {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    max-width: 920px;
}

.identity-primary-line {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(244,249,253,.98), rgba(236,245,251,.98));
    border: 1px solid rgba(15,79,138,.10);
}

.identity-value-primary {
    font-size: 1.02rem;
    line-height: 1.3;
    color: #123b63;
    font-weight: 800;
}

.identity-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.identity-meta-item {
    display: grid;
    gap: 2px;
    min-height: 64px;
    align-content: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(249,252,254,.98), rgba(241,247,251,.98));
    border: 1px solid rgba(15,79,138,.10);
}

@media (max-width: 1080px) {
    .identity-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* compacta el bloque viejo si llega a quedar en caché */
.detail-identity-stack-emphasis {
    gap: 6px;
}

.identity-line {
    padding: 7px 10px;
}


/* ===== Ajuste bloque 14 · consulta compacta sin cajas y direcciones ocultas en modo consulta ===== */
.detail-inline-form:not(.is-inline-editing) .detail-form-section-card {
    padding: 12px 14px 10px;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-section-head {
    margin-bottom: 8px;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-section-head h4 {
    font-size: .94rem;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-grid-2col {
    gap: 8px 18px;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item {
    gap: 1px;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item label {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6d8498;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item input[readonly],
.detail-inline-form:not(.is-inline-editing) .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) .detail-form-item select:disabled,
.detail-inline-form:not(.is-inline-editing) .detail-form-item input:disabled {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #143c63;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item textarea[readonly] {
    min-height: auto;
    resize: none;
    overflow: hidden;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item select:disabled {
    appearance: none;
    -webkit-appearance: none;
    opacity: 1;
}

.detail-inline-form:not(.is-inline-editing) .detail-checkbox-row {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.detail-inline-form:not(.is-inline-editing) .checkbox-line span {
    font-weight: 600;
    color: #143c63;
}

.detail-inline-form:not(.is-inline-editing) .detail-inline-footer {
    padding-top: 8px;
}

.detail-inline-form:not(.is-inline-editing) [data-inline-edit-actions][hidden] {
    display: none !important;
}

.detail-inline-form.is-inline-editing .detail-form-item input,
.detail-inline-form.is-inline-editing .detail-form-item select,
.detail-inline-form.is-inline-editing .detail-form-item textarea {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(15,79,138,.24);
    border-radius: 12px;
    background: #fff;
    font-weight: 500;
}

.detail-inline-form.is-inline-editing .detail-form-item textarea {
    min-height: 94px;
}


/* ===== Ajuste bloque 15 · tipografía azul y limpia en datos clave del encabezado ===== */
.detail-identity-compact {
    gap: 8px;
}

.identity-primary-line,
.identity-meta-item {
    background: linear-gradient(180deg, rgba(248,252,255,.82), rgba(240,247,252,.72));
    border-color: rgba(15,79,138,.08);
    box-shadow: 0 8px 18px rgba(17,55,97,.035);
}

.identity-label {
    color: #6f8ba4;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .095em;
}

.identity-value,
.identity-value-primary,
.identity-value-strong,
.identity-tier {
    color: #0f4f8a;
    font-weight: 800;
    letter-spacing: -.01em;
}

.identity-value-primary {
    font-size: 1.08rem;
}

.identity-meta-item .identity-value {
    font-size: 1.01rem;
}

.identity-meta-item .identity-tier {
    color: #1c6faf;
    font-weight: 900;
}

/* ===== Ajuste bloque 17 · jerarquía azul para etiquetas y valores clave ===== */
.detail-identity-compact .identity-label {
    color: #145f9c;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .075em;
}

.detail-identity-compact .identity-value,
.detail-identity-compact .identity-value-primary,
.detail-identity-compact .identity-value-strong,
.detail-identity-compact .identity-tier {
    color: #0f4f8a;
    font-weight: 850;
}

.detail-identity-compact .identity-meta-item .identity-label {
    font-size: .78rem;
    color: #1769aa;
}

.detail-identity-compact .identity-meta-item .identity-value,
.detail-identity-compact .identity-meta-item .identity-tier {
    font-size: 1.06rem;
    color: #0f4f8a;
    line-height: 1.22;
}

.detail-identity-compact .identity-primary-line .identity-label {
    color: #1769aa;
    font-size: .76rem;
}

.detail-identity-compact .identity-primary-line .identity-value-primary {
    color: #0f4f8a;
    font-size: 1.08rem;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-section-head h4 {
    color: #0f4f8a;
    font-size: 1rem;
    letter-spacing: -.01em;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item label {
    color: #1769aa;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item input[readonly],
.detail-inline-form:not(.is-inline-editing) .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) .detail-form-item select:disabled,
.detail-inline-form:not(.is-inline-editing) .detail-form-item input:disabled {
    color: #0f4f8a;
    font-size: .99rem;
    font-weight: 750;
    letter-spacing: -.005em;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item select:disabled option,
.detail-inline-form:not(.is-inline-editing) .detail-form-item select:disabled {
    color: #0f4f8a;
}

.detail-inline-form:not(.is-inline-editing) .detail-form-item[data-detail-field="commercial_category_id"] input,
.detail-inline-form:not(.is-inline-editing) .detail-form-item[data-detail-field="commercial_category_id"] select,
.detail-inline-form:not(.is-inline-editing) .detail-form-item[data-detail-field="phone"] input,
.detail-inline-form:not(.is-inline-editing) .detail-form-item[data-detail-field="email"] input {
    color: #0f4f8a;
    font-weight: 850;
}

/* ===== Ajuste bloque 18 · datos comerciales compactos etiqueta: valor ===== */
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-section-card,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,254,.96));
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-section-head {
    margin-bottom: 6px;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-section-head h4 {
    color: #173b5c;
    font-size: .98rem;
    font-weight: 850;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-grid-2col {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 5px 22px;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 5px;
    min-height: 22px;
    padding: 1px 0;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item label {
    color: #2b78a6;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.25;
    white-space: nowrap;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item label::after {
    content: ':';
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item input[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item select:disabled,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item input:disabled {
    color: #173b5c;
    font-size: .91rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item textarea[readonly] {
    white-space: normal;
    line-height: 1.35;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item-full {
    grid-column: 1 / -1;
    grid-template-columns: max-content minmax(0, 1fr);
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item-checkbox {
    display: none;
}

.detail-inline-form.is-inline-editing [data-detail-section="general"] .detail-form-item label::after {
    content: '';
}

@media (max-width: 960px) {
    .detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-grid-2col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item,
    .detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item-full {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}

/* ===== Ajuste bloque 19 · campos finales del registro de cliente ===== */
.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,254,.96));
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-section-head,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-section-head {
    margin-bottom: 6px;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-section-head h4,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-section-head h4 {
    color: #173b5c;
    font-size: .98rem;
    font-weight: 850;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-grid-2col,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-grid-2col {
    grid-template-columns: 1fr;
    gap: 5px;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 5px;
    min-height: 22px;
    padding: 1px 0;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item label,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item label {
    color: #2b78a6;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.25;
    white-space: nowrap;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item label::after,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item label::after {
    content: ':';
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item textarea[readonly] {
    color: #173b5c;
    font-size: .91rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
}

.detail-inline-form.is-inline-editing [data-detail-section="trabajo"] .detail-form-item label::after,
.detail-inline-form.is-inline-editing [data-detail-section="entrega"] .detail-form-item label::after {
    content: '';
}

.detail-inline-form.is-inline-editing [data-detail-field="trabajo_reference"] textarea,
.detail-inline-form.is-inline-editing [data-detail-field="entrega_reference"] textarea {
    min-height: 94px;
}

@media (max-width: 560px) {
    .detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item,
    .detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}

/* Bloque 21 - Dirección de trabajo estructurada */
.detail-address-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

@media (max-width: 1200px) {
    .detail-address-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 860px) {
    .detail-address-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 560px) {
    .detail-address-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Ajuste bloque 22 · Datos generales como acordeón ===== */
.detail-accordion-card {
    overflow: hidden;
}

.detail-accordion-head {
    align-items: center;
    gap: 12px;
}

.detail-accordion-head h3 {
    margin: 0;
}

.detail-accordion-toggle {
    min-width: 98px;
    justify-content: center;
    padding-inline: 14px;
}

.detail-accordion-body {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.detail-accordion-card.is-collapsed {
    padding-bottom: 14px;
}

.detail-accordion-card.is-collapsed .detail-accordion-head {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-accordion-card.is-collapsed .detail-accordion-toggle {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #075985;
}

@media (max-width: 760px) {
    .detail-accordion-head {
        align-items: flex-start;
    }

    .detail-accordion-toggle {
        width: auto;
    }
}

/* ===== Bloque 23 · Acciones de llamada y scripts por tipo ===== */
.call-choice-block {
    margin-top: 14px;
}

.call-choice-head h2 {
    margin-bottom: 2px;
}

.call-choice-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.call-choice-actions .btn {
    min-width: 168px;
    justify-content: center;
}

.call-choice-actions .btn.is-active-call-script {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    transform: translateY(-1px);
}

.call-script-panel[hidden],
.call-script-panel [hidden] {
    display: none !important;
}

.call-script-panel {
    border-color: rgba(37, 99, 235, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.script-grid-call {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.script-grid-call .script-section {
    border-left: 3px solid #2b78a6;
    background: #ffffff;
}

.script-grid-call .script-section span {
    color: #145c8f;
}

@media (max-width: 820px) {
    .script-grid-call {
        grid-template-columns: 1fr;
    }

    .call-choice-actions .btn {
        width: 100%;
    }
}

/* ===== Bloque 28 · Modo de atención inicial simplificado ===== */
.attention-mode-card {
    display: grid;
    gap: 12px;
    margin: 14px 0 16px;
    padding: 14px 16px;
    border: 1px solid rgba(32, 105, 162, .14);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 12px 32px rgba(15, 79, 138, .06);
}

.attention-mode-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.attention-mode-head h3 {
    margin: 0;
    color: #0f4f8a;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.attention-mode-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .86rem;
}

.attention-caller-row {
    display: grid;
    grid-template-columns: minmax(260px, 520px);
    gap: 10px;
}

.attention-caller-field {
    display: grid;
    gap: 6px;
}

.attention-caller-field span {
    color: #1f5f93;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.attention-caller-field input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(15, 79, 138, .18);
    border-radius: 12px;
    background: #ffffff;
    color: #113b5f;
    font-weight: 750;
    padding: 0 12px;
}

.attention-caller-field input:focus {
    outline: none;
    border-color: rgba(15, 79, 138, .55);
    box-shadow: 0 0 0 3px rgba(32, 105, 162, .12);
}

.attention-script {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #eef7ff;
    border: 1px solid rgba(32, 105, 162, .12);
}

.attention-script[hidden] {
    display: none !important;
}

.attention-script-title {
    display: grid;
    gap: 2px;
}

.attention-script-title strong {
    color: #0f4f8a;
    font-size: .96rem;
}

.attention-script-title span {
    color: #64748b;
    font-size: .84rem;
}

.attention-script ol {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    color: #244761;
    font-size: .9rem;
    line-height: 1.38;
}

@media (max-width: 860px) {
    .attention-mode-head,
    .attention-caller-row {
        grid-template-columns: 1fr;
        display: grid;
    }

    .attention-mode-head .btn {
        width: 100%;
    }
}

/* Bloque 31: bloqueo de Ver hasta registrar persona que llama y continuación del script */
.attention-caller-row-save {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.attention-caller-field-grow {
    flex: 1 1 320px;
}

.attention-caller-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding-bottom: 0.05rem;
}

.attention-caller-status {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

.attention-caller-status.is-warning {
    color: #b45309;
}

.attention-caller-status.is-ok {
    color: #075985;
    font-weight: 700;
}

.btn-view-record:disabled,
.btn-view-record.is-disabled-by-caller {
    opacity: 0.48;
    cursor: not-allowed;
    border-color: #cbd5e1;
    color: #94a3b8;
    background: #f8fafc;
}

.script-continuation-card {
    border: 1px solid rgba(14, 116, 144, 0.16);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.script-continuation-head {
    gap: 1rem;
}

.script-caller-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 0.8rem;
    white-space: nowrap;
}

.script-caller-chip strong {
    color: #0f4c81;
}

.script-grid-continuation .script-section span {
    color: #075985;
}

@media (max-width: 760px) {
    .attention-caller-actions {
        width: 100%;
    }

    .attention-caller-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .attention-caller-status {
        white-space: normal;
    }
}

/* Bloque 32: llamada activa y bloqueo real de Ver */
.btn-view-record:disabled,
.btn-view-record.is-disabled-by-caller {
    opacity: .45;
    cursor: not-allowed;
    background: #eef3f8;
    color: #7f94aa;
    border-color: #d7e1ec;
}
.attention-caller-status.is-ok {
    color: #075985;
    font-weight: 700;
}
.attention-caller-status.is-warning {
    color: #9a5b00;
    font-weight: 700;
}
.script-caller-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.script-close-call-btn.btn-xs {
    padding: .25rem .55rem;
    min-height: auto;
    font-size: .74rem;
}

/* ===== Bloque 33 · Refinamiento visual profesional Clientes/Leads ===== */
:root {
    --brand-navy: #0b3558;
    --brand-blue: #135f96;
    --brand-blue-2: #1f78b4;
    --brand-sky: #eaf5fc;
    --brand-sky-2: #f4f9fd;
    --brand-cyan-soft: #e8f7fb;
    --text-strong: #1f2f3d;
    --text-base: #374957;
    --text-muted: #6d7d8b;
    --line-soft: #dce9f3;
    --surface-soft: #f8fbfd;
    --surface-white: #ffffff;
}

/* Base de la pantalla: menos saturación y más limpieza */
.app-body {
    background:
        radial-gradient(circle at 12% 0%, rgba(31, 120, 180, .08), transparent 22%),
        radial-gradient(circle at 90% 6%, rgba(19, 95, 150, .06), transparent 20%),
        linear-gradient(180deg, #f7fbfe 0%, #eef5fa 100%);
}

.panel-card,
.workbench-search-wide,
.attention-mode-card,
.detail-accordion-card,
.call-script-panel,
.script-continuation-card,
.table-shell {
    border-color: rgba(19, 95, 150, .11) !important;
    box-shadow: 0 14px 34px rgba(25, 63, 96, .055) !important;
}

.panel-card-head h2,
.workbench-main-head h2,
.detail-accordion-head h3,
.attention-mode-head h3 {
    color: var(--brand-navy) !important;
    letter-spacing: -.025em;
}

/* Botones: jerarquía más profesional */
.btn {
    font-weight: 800;
    letter-spacing: -.005em;
    border-radius: 12px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #176da6 0%, #0f4f82 100%) !important;
    border-color: rgba(15, 79, 130, .34) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(15, 79, 130, .20) !important;
}

.btn-primary:hover {
    box-shadow: 0 16px 30px rgba(15, 79, 130, .26) !important;
}

.btn-outline {
    background: #ffffff !important;
    border-color: rgba(19, 95, 150, .22) !important;
    color: var(--brand-blue) !important;
    box-shadow: 0 8px 18px rgba(25, 63, 96, .035);
}

.btn-outline:hover {
    background: #f2f8fc !important;
    border-color: rgba(19, 95, 150, .34) !important;
}

/* Consulta central */
.workbench-search-wide {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,254,.96)) !important;
}

.scope-chip {
    background: #ffffff !important;
    color: var(--brand-blue) !important;
    border-color: rgba(19, 95, 150, .18) !important;
    box-shadow: 0 8px 18px rgba(25, 63, 96, .035);
}

.scope-chip.is-active {
    background: linear-gradient(135deg, #176da6 0%, #0f4f82 100%) !important;
    color: #ffffff !important;
    border-color: rgba(15, 79, 130, .45) !important;
    box-shadow: 0 12px 22px rgba(15, 79, 130, .18) !important;
}

.workbench-search-shell-strong {
    border-color: rgba(19, 95, 150, .18) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 12px 26px rgba(25, 63, 96, .06) !important;
}

.filter-label,
.attention-caller-field span {
    color: #2c6f9e !important;
    font-weight: 850 !important;
}

/* Modo de atención / llamada activa */
.attention-mode-card {
    background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%) !important;
}

.attention-script {
    background: linear-gradient(180deg, #eef7ff 0%, #f7fbff 100%) !important;
    border-color: rgba(19, 95, 150, .14) !important;
}

.attention-script-title strong,
.attention-caller-status.is-ok {
    color: var(--brand-navy) !important;
}

.attention-script ol {
    color: var(--text-base) !important;
}

.attention-caller-status {
    color: var(--text-muted) !important;
}

.attention-caller-status.is-warning {
    color: #9a5b00 !important;
}

/* Grid: más ejecutivo, menos pesado */
.table-shell-wide {
    background: #ffffff;
    border-radius: 18px;
}

.crm-table {
    color: var(--text-base);
}

.crm-table thead th {
    background: #f2f7fb !important;
    color: var(--brand-navy) !important;
    border-bottom: 1px solid var(--line-soft) !important;
}

.grid-header-button {
    color: var(--brand-navy) !important;
    font-weight: 850 !important;
}

.crm-table tbody tr {
    border-bottom: 1px solid rgba(220, 233, 243, .86) !important;
}

.crm-table tbody tr:hover {
    background: #f7fbfe !important;
}

.selectable-row--client .type-pill-client,
.type-pill-client {
    background: #e3f0fa !important;
    color: #0b4f82 !important;
    border-color: rgba(11, 79, 130, .16) !important;
}

.selectable-row--lead .type-pill-lead,
.type-pill-lead {
    background: #ecf8fb !important;
    color: #17677e !important;
    border-color: rgba(23, 103, 126, .14) !important;
}

.type-pill {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

.btn-view-record:disabled,
.btn-view-record.is-disabled-by-caller {
    opacity: .52 !important;
    background: #f3f6f9 !important;
    border-color: #d8e2eb !important;
    color: #8496a8 !important;
}

/* Encabezado cliente/lead: datos clave claros, sin exceso de color */
.detail-identity-compact {
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%) !important;
    border: 1px solid rgba(19, 95, 150, .12) !important;
    box-shadow: 0 14px 30px rgba(25, 63, 96, .055) !important;
}

.detail-identity-compact .identity-primary-line .identity-label,
.detail-identity-compact .identity-meta-item .identity-label {
    color: #2d719e !important;
    font-weight: 900 !important;
}

.detail-identity-compact .identity-primary-line .identity-value-primary,
.detail-identity-compact .identity-meta-item .identity-value,
.detail-identity-compact .identity-meta-item .identity-tier {
    color: var(--brand-navy) !important;
    font-weight: 850 !important;
}

.detail-identity-compact .identity-name {
    color: var(--brand-navy) !important;
}

/* Datos generales: lectura compacta, etiqueta sobria y valor fuerte */
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-section-card,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] {
    background: #ffffff !important;
    border-color: rgba(19, 95, 150, .10) !important;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item label,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item label,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item label {
    color: #2d719e !important;
    font-weight: 850 !important;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item input[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item select:disabled,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item input:disabled,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="trabajo"] .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="entrega"] .detail-form-item textarea[readonly] {
    color: var(--text-strong) !important;
    font-weight: 700 !important;
}

/* Formularios en edición: más limpios y claros */
.detail-inline-form.is-inline-editing .detail-form-item input,
.detail-inline-form.is-inline-editing .detail-form-item select,
.detail-inline-form.is-inline-editing .detail-form-item textarea,
.attention-caller-field input {
    border-color: rgba(19, 95, 150, .18) !important;
    color: var(--text-strong) !important;
}

.detail-inline-form.is-inline-editing .detail-form-item input:focus,
.detail-inline-form.is-inline-editing .detail-form-item select:focus,
.detail-inline-form.is-inline-editing .detail-form-item textarea:focus,
.attention-caller-field input:focus {
    border-color: rgba(19, 95, 150, .55) !important;
    box-shadow: 0 0 0 3px rgba(19, 95, 150, .12) !important;
}

/* Scripts: información clara sin verse alarmante */
.script-card-title,
.script-section,
.call-script-panel,
.script-continuation-card {
    border-color: rgba(19, 95, 150, .12) !important;
}

.script-card-title,
.script-continuation-card {
    background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%) !important;
}

.script-section span,
.script-grid-call .script-section span,
.script-grid-continuation .script-section span {
    color: #2d719e !important;
    letter-spacing: .055em;
}

.script-section p {
    color: var(--text-base) !important;
}

.script-caller-chip {
    background: #e8f4fc !important;
    color: var(--brand-blue) !important;
    border: 1px solid rgba(19, 95, 150, .13);
}

.script-caller-chip strong {
    color: var(--brand-navy) !important;
}

/* Modales de configuración */
.grid-modal-card,
.detail-fields-modal-card {
    border-color: rgba(19, 95, 150, .12) !important;
    box-shadow: 0 28px 70px rgba(11, 53, 88, .18) !important;
}

.grid-column-option,
.detail-field-option {
    border-color: rgba(19, 95, 150, .10) !important;
    background: #ffffff !important;
}

.grid-column-option:hover,
.detail-field-option:hover {
    background: #f6fbff !important;
}

/* Bloque 35: flujo de llamada entrante/saliente y conversión de lead */
.attention-operation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .96));
    margin: .85rem 0;
}

.attention-operation-label {
    color: #1e3a8a;
    font-weight: 800;
    font-size: .86rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.attention-operation-buttons {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.attention-operation-btn {
    border: 1px solid rgba(37, 99, 235, .25);
    background: #ffffff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: .55rem .95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .16s ease;
}

.attention-operation-btn:hover,
.attention-operation-btn.is-active {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

.selected-call-context-card {
    margin-top: 1rem;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
    padding: 1rem;
}

.selected-call-context-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    padding-bottom: .8rem;
    margin-bottom: .9rem;
}

.selected-call-context-head h3 {
    margin: 0 0 .25rem;
    color: #0f172a;
    font-size: 1rem;
}

.selected-call-context-head p {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
}

.selected-caller-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: .8rem;
}

.selected-caller-field,
.attention-caller-field {
    display: grid;
    gap: .35rem;
}

.selected-caller-field span,
.attention-caller-field span {
    color: #1e40af;
    font-weight: 800;
    font-size: .82rem;
}

.selected-caller-field input,
.attention-caller-field input {
    min-height: 40px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 12px;
    padding: .55rem .75rem;
    outline: none;
}

.selected-caller-field input:focus,
.attention-caller-field input:focus {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.selected-caller-actions {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.selected-caller-status,
.attention-caller-status {
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.selected-caller-status.is-ok,
.attention-caller-status.is-ok {
    color: #0f766e;
}

.selected-caller-status.is-warning,
.attention-caller-status.is-warning {
    color: #b45309;
}

.script-caller-chip [data-current-operation-pill] {
    display: inline-flex;
    align-items: center;
    margin-right: .45rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 900;
    font-size: .78rem;
}

.script-caller-chip [data-current-operation-pill].is-outbound {
    background: #e0f2fe;
    color: #0369a1;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 760px) {
    .attention-operation-row,
    .selected-call-context-head,
    .selected-caller-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .attention-operation-buttons,
    .selected-caller-actions {
        width: 100%;
    }
}

/* Bloque 36: selector profesional de tipo de operación y script único */
.attention-operation-row-select {
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem;
}

.attention-operation-select-field {
    display: grid;
    gap: .4rem;
    width: min(360px, 100%);
}

.attention-operation-select {
    width: 100%;
    border: 1px solid rgba(37, 99, 235, .22);
    border-radius: 14px;
    background: #ffffff;
    color: #0f3f72;
    font-weight: 800;
    padding: .68rem .9rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
    outline: none;
}

.attention-operation-select:focus {
    border-color: rgba(29, 78, 216, .58);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.script-continuation-card [hidden],
.attention-script [hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .attention-operation-select-field {
        width: 100%;
    }
}


/* Bloque 37: tipo de operación junto a Ocultar guía */
.attention-mode-head-compact {
    align-items: flex-end;
}

.attention-mode-title {
    min-width: 0;
}

.attention-mode-actions {
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.attention-operation-select-field-inline {
    width: 230px;
    min-width: 210px;
}

.attention-operation-select-field-inline .attention-operation-label {
    font-size: .68rem;
    letter-spacing: .055em;
}

.attention-operation-select-field-inline .attention-operation-select {
    min-height: 34px;
    padding: .46rem .75rem;
    border-radius: 12px;
    font-size: .84rem;
}

.attention-mode-actions .btn {
    min-height: 34px;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .attention-mode-head-compact {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .attention-mode-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        margin-left: 0;
    }

    .attention-operation-select-field-inline {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .attention-mode-actions {
        grid-template-columns: 1fr;
    }

    .attention-mode-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Ajuste comercial: acciones secundarias y bloqueo de edición en llamada de salida */
.btn-soft-utility,
.btn-grid-secondary-action {
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .42rem !important;
    border: 1px solid rgba(71, 85, 105, .24) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
}

.btn-soft-utility-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: .75rem;
    line-height: 1;
}

.btn-soft-utility:hover,
.btn-grid-secondary-action:hover {
    border-color: rgba(37, 99, 235, .38) !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    transform: translateY(-1px);
}

.btn-soft-utility:hover .btn-soft-utility-icon,
.btn-grid-secondary-action:hover .btn-soft-utility-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.attention-caller-row.is-outbound-locked {
    position: relative;
    padding: .75rem;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}

.attention-caller-row.is-outbound-locked .attention-caller-field span {
    color: #64748b;
}

.attention-caller-row.is-outbound-locked .attention-caller-field input,
.attention-caller-field input:disabled[data-lock-on-outbound] {
    background: #eaf1f8 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .1) !important;
}

.attention-caller-row.is-outbound-locked .attention-caller-field::after {
    content: 'Captura bloqueada en llamada de salida';
    margin-top: 2px;
    color: #1d4ed8;
    font-size: .76rem;
    font-weight: 800;
}

.attention-caller-row.is-outbound-locked [data-save-attention-caller],
.attention-caller-row.is-outbound-locked [data-save-attention-caller].is-disabled-by-caller {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.selected-call-lock-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .85rem;
    padding: .8rem .95rem;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    color: #475569;
    font-size: .88rem;
}

.selected-call-lock-note strong {
    color: #1e3a8a;
    white-space: nowrap;
}

.detail-record-shell.is-outbound-readonly .detail-section-card-form {
    border-color: rgba(37, 99, 235, .18);
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
}

.detail-record-shell.is-outbound-readonly .detail-inline-form input[readonly],
.detail-record-shell.is-outbound-readonly .detail-inline-form textarea[readonly],
.detail-record-shell.is-outbound-readonly .detail-inline-form select:disabled {
    background: #eef4fb;
    border-color: #dbeafe;
    color: #64748b;
    cursor: not-allowed;
}

.detail-record-shell.is-outbound-readonly [data-start-inline-edit]:disabled,
.detail-record-shell.is-outbound-readonly [data-outbound-sensitive-action]:disabled,
.detail-record-shell.is-outbound-readonly [data-start-inline-edit].is-disabled-by-caller,
.detail-record-shell.is-outbound-readonly [data-outbound-sensitive-action].is-disabled-by-caller {
    opacity: .58;
    cursor: not-allowed;
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #64748b;
    box-shadow: none;
}

.selected-caller-status.is-warning {
    color: #1d4ed8;
    font-weight: 800;
}

@media (max-width: 760px) {
    .selected-call-lock-note {
        display: grid;
    }

    .selected-call-lock-note strong {
        white-space: normal;
    }
}

.btn-view-record.is-disabled-client-outbound,
.btn-view-record.is-disabled-client-outbound:disabled {
    background: #eef4fb !important;
    border-color: #dbeafe !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}


/* ControlOne - Atención de llamada / canalización progresiva */
.btn-quick-360 {
    border-color: rgba(37, 99, 235, .22) !important;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
    color: #1d4ed8 !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .08);
}

.btn-quick-360:hover {
    border-color: rgba(37, 99, 235, .42) !important;
    background: #dbeafe !important;
    transform: translateY(-1px);
}

.call-action-builder {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 22px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f8fafc 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.call-action-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.call-action-eyebrow {
    display: inline-flex;
    margin-bottom: .25rem;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
}

.call-action-builder-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.call-action-builder-head p {
    margin: .25rem 0 0;
    max-width: 760px;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.5;
}

.call-action-summary-pill {
    display: grid;
    place-items: center;
    min-width: 112px;
    padding: .75rem;
    border-radius: 18px;
    background: #eff6ff;
    color: #1d4ed8;
    text-align: center;
}

.call-action-summary-pill strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
}

.call-action-summary-pill span {
    font-size: .72rem;
    font-weight: 800;
}

.call-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.call-service-card {
    position: relative;
    display: grid;
    gap: .28rem;
    min-height: 132px;
    padding: .9rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.call-service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, .32);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

.call-service-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.call-service-check {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f1f5f9;
    color: transparent;
    font-size: .82rem;
    font-weight: 950;
}

.call-service-title {
    color: #0f172a;
    font-weight: 950;
    line-height: 1.1;
}

.call-service-area {
    color: #2563eb;
    font-size: .76rem;
    font-weight: 850;
}

.call-service-result {
    margin-top: auto;
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.25;
}

.call-service-card.is-selected {
    border-color: rgba(37, 99, 235, .48);
    background: linear-gradient(145deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .12);
}

.call-service-card.is-selected .call-service-check {
    background: #2563eb;
    color: #ffffff;
}

.call-service-accordion {
    display: grid;
    gap: .7rem;
    margin-top: .9rem;
}

.call-service-detail {
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, .13);
    border-radius: 18px;
    background: #ffffff;
}

.call-service-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 0;
    background: #f8fafc;
    text-align: left;
    cursor: pointer;
}

.call-service-detail-head strong {
    display: block;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 950;
}

.call-service-detail-head small {
    display: block;
    margin-top: .15rem;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

.call-service-detail-head em {
    flex: 0 0 auto;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.call-service-detail-body {
    padding: 1rem;
}

.call-service-output-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .8rem;
}

.call-service-output-list span {
    padding: .28rem .55rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .74rem;
    font-weight: 800;
}

.call-service-note,
.call-action-field {
    display: grid;
    gap: .35rem;
}

.call-service-note span,
.call-action-field span {
    color: #334155;
    font-size: .78rem;
    font-weight: 900;
}

.call-service-note textarea,
.call-action-field textarea,
.call-action-field input {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    padding: .7rem .8rem;
    font: inherit;
    font-size: .88rem;
    outline: none;
}

.call-service-note textarea:focus,
.call-action-field textarea:focus,
.call-action-field input:focus {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.call-action-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
    gap: .9rem;
    margin-top: 1rem;
}

.call-action-side-fields {
    display: grid;
    gap: .75rem;
}

.call-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(148, 163, 184, .32);
}

.call-action-preview {
    color: #475569;
    font-size: .86rem;
    line-height: 1.4;
}

.call-action-preview strong {
    color: #0f172a;
}

.call-action-preview span {
    color: #64748b;
}

.call-action-footer .btn:disabled {
    opacity: .58;
    cursor: not-allowed;
    box-shadow: none;
}


.quick-360-overlay[hidden],
.quick-360-drawer[hidden] {
    display: none !important;
}

.quick-360-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, .36);
    backdrop-filter: blur(2px);
}

.quick-360-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: min(540px, 96vw);
    height: 100vh;
    padding: 1rem;
    background: #f8fafc;
    box-shadow: -24px 0 60px rgba(15, 23, 42, .22);
}

.quick-360-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem .2rem 1rem;
}

.quick-360-head span {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quick-360-head h3 {
    margin: .15rem 0 0;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 950;
}

.quick-360-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    font-size: 1.3rem;
    cursor: pointer;
}

.quick-360-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.quick-360-metric {
    display: grid;
    gap: .2rem;
    min-height: 86px;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background: #ffffff;
}

.quick-360-metric strong {
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1;
}

.quick-360-metric span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 850;
}

.quick-360-metric-alert {
    border-color: rgba(185, 28, 28, .18);
    background: #fff7f7;
}

.quick-360-metric-sales,
.quick-360-metric-support {
    border-color: rgba(37, 99, 235, .16);
    background: #f8fbff;
}

.quick-360-blocks {
    display: grid;
    gap: .85rem;
    overflow: auto;
    margin-top: 1rem;
    padding-right: .2rem;
}

.quick-360-blocks section {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: #ffffff;
}

.quick-360-blocks h4 {
    margin: 0;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 950;
}

.quick-360-row {
    display: grid;
    gap: .16rem;
    padding: .65rem;
    border-radius: 14px;
    background: #f8fafc;
    text-decoration: none;
}

.quick-360-row:hover {
    background: #eff6ff;
}

.quick-360-row span {
    color: #0f172a;
    font-size: .84rem;
    font-weight: 900;
}

.quick-360-row small,
.quick-360-empty {
    margin: 0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.35;
}

.quick-360-footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1rem;
}

@media (max-width: 1180px) {
    .call-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .call-action-builder-head,
    .call-action-footer,
    .call-service-detail-head {
        display: grid;
    }

    .call-service-grid,
    .call-action-bottom-grid,
    .quick-360-metrics {
        grid-template-columns: 1fr;
    }

    .call-action-summary-pill {
        justify-items: start;
        text-align: left;
    }
}

/* ===== Ajuste ControlOne · Orden ficha, script plegable y persona visible ===== */
.detail-active-call-chip {
    display: grid;
    gap: 2px;
    min-width: 180px;
    padding: 0.58rem 0.78rem;
    border: 1px solid rgba(14, 116, 144, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    color: #075985;
}

.detail-active-call-chip span {
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.detail-active-call-chip span.is-outbound {
    color: #7c3aed;
}

.detail-active-call-chip small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 750;
}

.detail-active-call-chip strong {
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.15;
}

.script-continuation-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.script-accordion-toggle {
    min-width: 92px;
    justify-content: center;
}

.script-continuation-body {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.script-accordion-card.is-collapsed {
    padding-bottom: 14px;
}

.script-accordion-card.is-collapsed .script-continuation-head {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.script-accordion-card.is-collapsed .script-accordion-toggle {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #075985;
}

.call-workflow-shell {
    display: grid;
    gap: 1rem;
}

.call-workflow-shell .selected-call-context-card,
.call-workflow-shell .call-action-builder {
    margin-top: 0;
}

@media (max-width: 980px) {
    .detail-record-head-actions-inline {
        justify-content: flex-start;
    }

    .detail-active-call-chip {
        width: 100%;
    }

    .script-continuation-tools {
        justify-content: flex-start;
        width: 100%;
    }
}

/* Ajuste visual: Datos generales sin apariencia de etiqueta azul */
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-section-card,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] {
    background: #ffffff !important;
    background-image: none !important;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item label {
    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item input[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item textarea[readonly],
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item select:disabled,
.detail-inline-form:not(.is-inline-editing) [data-detail-section="general"] .detail-form-item input:disabled {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-strong) !important;
}

/* Radiografía 360 interactiva */
.quick-360-metric {
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.quick-360-metric:hover,
.quick-360-metric.is-active {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}

.quick-360-metric small {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: .15rem;
    padding: .18rem .42rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 950;
    letter-spacing: .02em;
}

.quick-360-card-status-safe {
    border: 1px solid rgba(22, 163, 74, .22);
    background: #ecfdf5;
}

.quick-360-card-status-safe small {
    color: #166534;
    background: rgba(22, 163, 74, .12);
}

.quick-360-card-status-warning {
    border: 1px solid rgba(217, 119, 6, .28);
    background: #fffbeb;
}

.quick-360-card-status-warning small {
    color: #92400e;
    background: rgba(245, 158, 11, .16);
}

.quick-360-card-status-today {
    border: 1px solid rgba(248, 113, 113, .32);
    background: #fff1f2;
}

.quick-360-card-status-today small {
    color: #be123c;
    background: rgba(248, 113, 113, .16);
}

.quick-360-card-status-danger {
    border: 1px solid rgba(185, 28, 28, .32);
    background: #fee2e2;
}

.quick-360-card-status-danger small {
    color: #991b1b;
    background: rgba(185, 28, 28, .14);
}

.quick-360-action-strip {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .7rem;
    margin-top: .85rem;
    padding: .75rem;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: #ffffff;
}

.quick-360-action-strip p {
    margin: 0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.35;
}

.quick-360-immediate-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .55rem .8rem;
    border: 1px solid rgba(185, 28, 28, .28);
    border-radius: 14px;
    background: #fff1f2;
    color: #9f1239;
    font-size: .78rem;
    font-weight: 950;
    cursor: pointer;
}

.quick-360-immediate-btn span {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #be123c;
    color: #ffffff;
    font-size: .68rem;
}

.quick-360-immediate-btn:disabled {
    border-color: rgba(148, 163, 184, .24);
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.quick-360-immediate-btn:disabled span {
    background: #cbd5e1;
}

.quick-360-detail-zone {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: .75rem;
    margin-top: .85rem;
    padding-right: .2rem;
}

.quick-360-detail-panel {
    display: grid;
    gap: .6rem;
    align-content: start;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: #ffffff;
}

.quick-360-detail-panel[hidden] {
    display: none !important;
}

.quick-360-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.quick-360-detail-head span {
    color: #2563eb;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quick-360-detail-head h4 {
    margin: .12rem 0 0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 950;
}

.quick-360-detail-head small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
}

.quick-360-event {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: .75rem;
    border: 1px solid transparent;
    border-radius: 16px;
    text-decoration: none;
}

.quick-360-event strong {
    display: block;
    color: #0f172a;
    font-size: .83rem;
    font-weight: 950;
    line-height: 1.25;
}

.quick-360-event span,
.quick-360-event em {
    display: block;
    margin-top: .16rem;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.35;
    font-style: normal;
}

.quick-360-event small {
    color: #475569;
    font-size: .7rem;
    font-weight: 950;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
}

.quick-360-event-safe {
    border-color: rgba(22, 163, 74, .18);
    background: #ecfdf5;
}

.quick-360-event-warning {
    border-color: rgba(217, 119, 6, .22);
    background: #fffbeb;
}

.quick-360-event-today {
    border-color: rgba(248, 113, 113, .25);
    background: #fff1f2;
}

.quick-360-event-danger {
    border-color: rgba(185, 28, 28, .28);
    background: #fee2e2;
}

.quick-360-event:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.quick-360-empty-state {
    margin: 0;
    padding: .8rem;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .quick-360-action-strip {
        grid-template-columns: 1fr;
    }

    .quick-360-event {
        display: grid;
    }

    .quick-360-event small {
        text-align: left;
        white-space: normal;
    }
}

/* Corrección Radiografía 360: semáforo visible y detalle clickeable */
.quick-360-metric.quick-360-card-status-safe,
.quick-360-metric[data-quick-360-status="safe"] {
    border: 1px solid rgba(22, 163, 74, .34) !important;
    background: #dcfce7 !important;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .08) !important;
}

.quick-360-metric.quick-360-card-status-warning,
.quick-360-metric[data-quick-360-status="warning"] {
    border: 1px solid rgba(217, 119, 6, .38) !important;
    background: #fef3c7 !important;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .09) !important;
}

.quick-360-metric.quick-360-card-status-today,
.quick-360-metric[data-quick-360-status="today"] {
    border: 1px solid rgba(248, 113, 113, .42) !important;
    background: #ffe4e6 !important;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .1) !important;
}

.quick-360-metric.quick-360-card-status-danger,
.quick-360-metric[data-quick-360-status="danger"] {
    border: 1px solid rgba(185, 28, 28, .46) !important;
    background: #fecaca !important;
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, .11) !important;
}

.quick-360-metric.quick-360-card-status-safe small,
.quick-360-metric[data-quick-360-status="safe"] small {
    color: #14532d !important;
    background: rgba(22, 163, 74, .18) !important;
}

.quick-360-metric.quick-360-card-status-warning small,
.quick-360-metric[data-quick-360-status="warning"] small {
    color: #78350f !important;
    background: rgba(245, 158, 11, .22) !important;
}

.quick-360-metric.quick-360-card-status-today small,
.quick-360-metric[data-quick-360-status="today"] small {
    color: #9f1239 !important;
    background: rgba(248, 113, 113, .2) !important;
}

.quick-360-metric.quick-360-card-status-danger small,
.quick-360-metric[data-quick-360-status="danger"] small {
    color: #7f1d1d !important;
    background: rgba(185, 28, 28, .2) !important;
}

.quick-360-metric em {
    display: inline-flex;
    width: fit-content;
    margin-top: .05rem;
    color: rgba(15, 23, 42, .68);
    font-size: .66rem;
    font-style: normal;
    font-weight: 850;
}

.quick-360-metric.is-active {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}

.quick-360-immediate-btn:not(:disabled) {
    border-color: rgba(185, 28, 28, .46) !important;
    background: #fecaca !important;
    color: #7f1d1d !important;
    box-shadow: 0 12px 24px rgba(185, 28, 28, .12);
}

.quick-360-immediate-btn:not(:disabled) span {
    background: #991b1b !important;
}

/* Radiografía 360: bloque visible de registros relacionados */
.quick-360-detail-zone[data-quick-360-detail-zone] {
    flex: 0 0 auto;
    min-height: auto;
    max-height: 46vh;
    overflow: auto;
    margin-top: 1rem;
    padding: .2rem .15rem .35rem;
}

.quick-360-detail-panel.is-active {
    display: grid;
}

.quick-360-detail-panel-safe {
    border-color: rgba(22, 163, 74, .22);
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
}

.quick-360-detail-panel-warning {
    border-color: rgba(217, 119, 6, .26);
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}

.quick-360-detail-panel-today {
    border-color: rgba(248, 113, 113, .30);
    background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
}

.quick-360-detail-panel-danger {
    border-color: rgba(185, 28, 28, .34);
    background: linear-gradient(180deg, #ffffff 0%, #fee2e2 100%);
}

.quick-360-event-list {
    display: grid;
    gap: .6rem;
}

.quick-360-event {
    position: relative;
    overflow: hidden;
}

.quick-360-event::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: rgba(22, 163, 74, .75);
}

.quick-360-event-warning::before {
    background: rgba(217, 119, 6, .82);
}

.quick-360-event-today::before {
    background: rgba(244, 63, 94, .82);
}

.quick-360-event-danger::before {
    background: rgba(185, 28, 28, .94);
}

.quick-360-event > div,
.quick-360-event > small {
    position: relative;
    z-index: 1;
}

.quick-360-event-safe strong,
.quick-360-event-safe small {
    color: #14532d;
}

.quick-360-event-warning strong,
.quick-360-event-warning small {
    color: #78350f;
}

.quick-360-event-today strong,
.quick-360-event-today small {
    color: #9f1239;
}

.quick-360-event-danger strong,
.quick-360-event-danger small {
    color: #7f1d1d;
}

.quick-360-metric.is-active,
.quick-360-immediate-btn.is-active {
    outline: 3px solid rgba(37, 99, 235, .18);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    transform: translateY(-1px);
}

/* Radiografía 360: todos los registros desplegados quedan solo como consulta temporalmente. */
.quick-360-detail-zone .quick-360-event,
.quick-360-event-static {
    cursor: default;
    pointer-events: auto;
}

.quick-360-detail-zone .quick-360-event:hover,
.quick-360-event-static:hover {
    box-shadow: none;
    transform: none;
}

/* Clientes: vista de listado más limpia y de ancho completo */
.clientes-summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
}

.clientes-summary-card {
    min-width: 190px;
    max-width: 245px;
    min-height: 72px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "note value";
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
}

.clientes-summary-card span {
    grid-area: label;
    color: var(--color-gray-700);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.15;
    text-transform: uppercase;
}

.clientes-summary-card strong {
    grid-area: value;
    color: var(--color-primary-deep);
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    line-height: 1;
    text-align: right;
}

.clientes-summary-card small {
    grid-area: note;
    margin-top: 0;
    color: var(--color-gray-500);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
}

.clientes-index-grid-full {
    grid-template-columns: minmax(0, 1fr) !important;
}

.clientes-index-grid-full > .panel-card {
    width: 100%;
}

@media (max-width: 1100px) {
    .clientes-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .clientes-summary-card {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .clientes-summary-strip {
        grid-template-columns: 1fr;
    }
}

/* Ajuste detalle de cliente: métricas en una fila y contenido a ancho completo */
.client-detail-summary-row {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.client-detail-summary-row .mini-stat-card {
    min-height: auto;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.client-detail-summary-row .mini-stat-card span {
    margin: 0;
    font-size: .88rem;
    line-height: 1.2;
}

.client-detail-summary-row .mini-stat-card strong {
    font-size: 1.45rem;
    line-height: 1;
    text-align: right;
}

.client-detail-full-stack {
    display: grid;
    gap: 18px;
    width: 100%;
}

.client-detail-full-stack > .panel-card {
    width: 100%;
}

.client-next-contact-panel .panel-card-head,
.client-audit-panel .panel-card-head {
    margin-bottom: 14px;
}

.client-next-contact-panel .insight-card-highlight {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.client-next-contact-panel .insight-card-highlight strong {
    margin: 0;
    font-size: 1.25rem;
}

.client-detail-full-panel {
    display: grid;
    gap: 22px;
}

.client-detail-full-panel .detail-section {
    width: 100%;
}

@media (max-width: 1100px) {
    .client-detail-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .client-detail-summary-row,
    .client-next-contact-panel .insight-card-highlight {
        grid-template-columns: 1fr;
    }

    .client-detail-summary-row .mini-stat-card {
        grid-template-columns: 1fr auto;
    }
}

/* =========================================================
   ControlOne · Colores comerciales para Clientes y leads
   Vista: /comercial/clientes-leads
   ========================================================= */
.commercial-color-guide {
    margin: 1rem 0;
    padding: .85rem 1rem;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #f0fdfa 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
}

.commercial-color-guide-copy {
    min-width: 230px;
    display: grid;
    gap: .12rem;
}

.commercial-color-guide-copy strong {
    color: #0f172a;
    font-size: .94rem;
    line-height: 1.15;
}

.commercial-color-guide-copy span {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
}

.commercial-color-guide-items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
}

.commercial-chip {
    --chip-bg: #f1f5f9;
    --chip-border: #e2e8f0;
    --chip-color: #475569;
    --chip-dot: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    max-width: 100%;
    min-height: 28px;
    padding: .26rem .62rem;
    border-radius: 999px;
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-color);
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: middle;
}

.commercial-chip::before {
    content: "";
    width: .46rem;
    height: .46rem;
    border-radius: 999px;
    background: var(--chip-dot);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-dot) 16%, transparent);
    flex: 0 0 auto;
}

.commercial-chip strong,
.commercial-chip small {
    line-height: 1.05;
}

.commercial-chip small {
    font-size: .66rem;
    font-weight: 750;
    opacity: .82;
}

.commercial-chip-follow {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "dot label"
        "dot date";
    column-gap: .35rem;
    row-gap: .05rem;
    min-height: 34px;
    padding-top: .24rem;
    padding-bottom: .24rem;
}

.commercial-chip-follow::before {
    grid-area: dot;
    align-self: center;
}

.commercial-chip-follow strong {
    grid-area: label;
}

.commercial-chip-follow small {
    grid-area: date;
}

.commercial-chip-client {
    --chip-bg: #e0f2fe;
    --chip-border: #bae6fd;
    --chip-color: #075985;
    --chip-dot: #0284c7;
}

.commercial-chip-lead {
    --chip-bg: #ede9fe;
    --chip-border: #ddd6fe;
    --chip-color: #5b21b6;
    --chip-dot: #7c3aed;
}

.commercial-chip-info {
    --chip-bg: #e0f2fe;
    --chip-border: #bae6fd;
    --chip-color: #075985;
    --chip-dot: #0ea5e9;
}

.commercial-chip-success {
    --chip-bg: #dcfce7;
    --chip-border: #bbf7d0;
    --chip-color: #047857;
    --chip-dot: #22c55e;
}

.commercial-chip-warning {
    --chip-bg: #fef3c7;
    --chip-border: #fde68a;
    --chip-color: #92400e;
    --chip-dot: #f59e0b;
}

.commercial-chip-danger {
    --chip-bg: #fee2e2;
    --chip-border: #fecaca;
    --chip-color: #b91c1c;
    --chip-dot: #ef4444;
}

.commercial-chip-neutral {
    --chip-bg: #f1f5f9;
    --chip-border: #e2e8f0;
    --chip-color: #475569;
    --chip-dot: #94a3b8;
}

.commercial-chip-bronze {
    --chip-bg: #f7e8dc;
    --chip-border: #e8c7ad;
    --chip-color: #7c3f13;
    --chip-dot: #b45309;
}

.commercial-chip-silver {
    --chip-bg: #f1f5f9;
    --chip-border: #cbd5e1;
    --chip-color: #334155;
    --chip-dot: #64748b;
}

.commercial-chip-gold {
    --chip-bg: #fef3c7;
    --chip-border: #facc15;
    --chip-color: #854d0e;
    --chip-dot: #eab308;
}

.commercial-chip-platinum {
    --chip-bg: #e0e7ff;
    --chip-border: #c7d2fe;
    --chip-color: #3730a3;
    --chip-dot: #4f46e5;
}

.account-table tbody tr.commercial-row-accent {
    position: relative;
    border-left: 5px solid transparent;
}

.account-table tbody tr.commercial-row-accent-client {
    border-left-color: #0284c7;
}

.account-table tbody tr.commercial-row-accent-lead {
    border-left-color: #7c3aed;
}

.account-table tbody tr.commercial-row-accent-info {
    border-left-color: #0ea5e9;
}

.account-table tbody tr.commercial-row-accent-success {
    border-left-color: #22c55e;
}

.account-table tbody tr.commercial-row-accent-warning {
    border-left-color: #f59e0b;
}

.account-table tbody tr.commercial-row-accent-danger {
    border-left-color: #ef4444;
}

.account-table tbody tr.commercial-row-accent-neutral {
    border-left-color: #94a3b8;
}

.account-table tbody tr.commercial-row-accent-warning td {
    background-image: linear-gradient(90deg, rgba(245, 158, 11, .07), transparent 35%);
}

.account-table tbody tr.commercial-row-accent-danger td {
    background-image: linear-gradient(90deg, rgba(239, 68, 68, .07), transparent 35%);
}

.account-table tbody tr.commercial-row-accent-success td {
    background-image: linear-gradient(90deg, rgba(34, 197, 94, .055), transparent 35%);
}

.account-table td[data-col-key="commercial_state"],
.account-table td[data-col-key="commercial_category"],
.account-table td[data-col-key="trend"],
.account-table td[data-col-key="next_contact_at"] {
    min-width: 138px;
}

.account-table td[data-col-key="next_contact_at"] {
    min-width: 154px;
}

.selected-commercial-color-strip {
    margin-top: .55rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .42rem;
}

.detail-record-eyebrow.commercial-chip {
    width: fit-content;
    margin-bottom: .34rem;
    letter-spacing: 0;
    text-transform: none;
}

.identity-tier {
    color: #0b4f86;
    font-weight: 900;
}

@media (max-width: 980px) {
    .commercial-color-guide {
        align-items: flex-start;
    }

    .commercial-color-guide-items {
        justify-content: flex-start;
    }
}

/* =========================================================
   RESTAURACIÓN /PROCESOS - conserva vista y funcionalidad
   ========================================================= */
/* Flujo operativo dinámico por llamada y ticket */
.process-hero {
    align-items: flex-start;
    gap: 18px;
}

.process-summary-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.process-call-panel,
.process-flow-panel {
    margin-top: 22px;
}

.process-panel-head,
.process-flow-head {
    gap: 18px;
    align-items: flex-start;
}

.process-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 220px) auto auto;
    gap: 10px;
    align-items: center;
    width: min(100%, 790px);
}

.process-call-list {
    display: grid;
    gap: 12px;
}

.process-call-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(15, 99, 121, .13);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,248,251,.92));
    box-shadow: 0 12px 28px rgba(14, 28, 45, .06);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.process-call-card.is-selected {
    border-color: rgba(16, 137, 153, .52);
    box-shadow: 0 18px 34px rgba(14, 132, 148, .13);
}

.process-call-card:hover {
    transform: translateY(-1px);
}

.process-call-main {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.process-call-badge {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0c8797, #0e5b7d);
    box-shadow: 0 10px 20px rgba(12, 135, 151, .24);
}

.process-call-main h3 {
    margin: 0 0 4px;
    color: var(--color-primary-deep);
    font-size: 1rem;
}

.process-call-main p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: .9rem;
    line-height: 1.35;
}

.process-call-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.process-call-meta span,
.process-call-status .pill {
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .74rem;
    font-weight: 800;
    color: var(--color-gray-600);
    background: rgba(15, 99, 121, .08);
}

.process-call-status {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-end;
}

.process-call-status .pill-success {
    color: #0f7a54;
    background: rgba(17, 166, 112, .12);
}

.process-call-status .pill-warning {
    color: #c26612;
    background: rgba(242, 139, 30, .14);
}

.process-call-status .pill-muted {
    color: var(--color-gray-500);
    background: rgba(100, 116, 139, .10);
}

.process-case-context {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
    margin: 16px 0 20px;
}

.process-case-context > div {
    padding: 13px 14px;
    border: 1px solid rgba(15, 99, 121, .12);
    border-radius: 16px;
    background: rgba(247, 251, 253, .92);
}

.process-case-context span {
    display: block;
    color: var(--color-gray-500);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.process-case-context strong {
    display: block;
    margin-top: 4px;
    color: var(--color-primary-deep);
    font-size: .95rem;
}

.process-ticket-summary,
.process-time-card {
    min-width: 270px;
    padding: 14px;
    border: 2px solid rgba(15, 99, 121, .22);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(14, 28, 45, .07);
}

.process-ticket-summary.good,
.process-time-card.good {
    border-color: rgba(31, 166, 104, .38);
}

.process-ticket-summary.bad,
.process-time-card.bad {
    border-color: rgba(220, 72, 58, .38);
}

.process-ticket-summary.neutral,
.process-time-card.neutral {
    border-color: rgba(100, 116, 139, .28);
}

.process-ticket-summary strong,
.process-time-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
}

.process-ticket-summary dl,
.process-time-card dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.process-ticket-summary dl div,
.process-time-card dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.process-ticket-summary dt,
.process-time-card dt {
    color: var(--color-gray-500);
    font-size: .76rem;
    font-weight: 800;
}

.process-ticket-summary dd,
.process-time-card dd {
    margin: 0;
    color: var(--color-primary-deep);
    font-size: .8rem;
    font-weight: 900;
    text-align: right;
}

.process-ticket-summary.good dd:last-child,
.process-time-card.good dd:last-child {
    color: #19965e;
}

.process-ticket-summary.bad dd:last-child,
.process-time-card.bad dd:last-child {
    color: #d94b3d;
}

.process-diagram-scroll {
    overflow-x: auto;
    padding: 6px 2px 16px;
}

.process-diagram-board {
    position: relative;
    min-width: 1180px;
    padding: 22px;
    border: 1px solid rgba(15, 99, 121, .12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 6% 8%, rgba(14, 135, 151, .08), transparent 26%),
        radial-gradient(circle at 90% 14%, rgba(242, 139, 30, .08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.process-responsible-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(14, 28, 45, .10);
}

.process-responsible-banner::before {
    content: '👤';
    font-size: .9rem;
}

.process-responsible-banner.teal,
.process-responsible-banner.neutral {
    background: linear-gradient(135deg, #0c8797, #0e5b7d);
}

.process-responsible-banner.orange {
    background: linear-gradient(135deg, #ee7f13, #c45f0d);
}

.process-responsible-banner.amber {
    background: linear-gradient(135deg, #d89212, #b7640f);
}

.process-responsible-banner.compact {
    margin-left: 10px;
}

.process-main-flow,
.process-branch-flow,
.process-final-flow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.process-main-flow {
    margin-top: 18px;
    padding-bottom: 10px;
}

.process-arrow {
    flex: 0 0 auto;
    color: rgba(65, 76, 91, .72);
    font-size: 1.85rem;
    font-weight: 900;
}

.process-node,
.process-decision {
    flex: 0 0 145px;
    min-height: 150px;
    padding: 16px 12px 12px;
    border: 1px solid rgba(15, 99, 121, .14);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    text-align: center;
    box-shadow: 0 14px 26px rgba(14, 28, 45, .07);
}

.process-node .node-icon,
.process-decision .node-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -34px auto 10px;
    border: 4px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0c8797, #0e5b7d);
    box-shadow: 0 8px 18px rgba(14, 28, 45, .18);
}

.process-node strong,
.process-decision strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: .86rem;
    line-height: 1.18;
}

.node-pill,
.process-decision span {
    display: inline-flex;
    margin-top: 9px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
    background: #0c8797;
}

.process-node small {
    display: block;
    min-height: 30px;
    margin-top: 8px;
    color: var(--color-gray-500);
    font-size: .69rem;
    line-height: 1.2;
}

.process-node em {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #0d6671;
    background: rgba(14, 135, 151, .12);
    font-size: .67rem;
    font-style: normal;
    font-weight: 900;
}

.process-node.node-active .node-icon,
.process-node.node-pending .node-icon {
    background: linear-gradient(135deg, #ef8a17, #cf620d);
}

.process-node.node-active .node-pill,
.process-node.node-pending .node-pill {
    background: #ef8a17;
}

.process-node.node-done .node-icon {
    background: linear-gradient(135deg, #1fa668, #147d51);
}

.process-node.node-done .node-pill {
    background: #1fa668;
}

.process-decision {
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    flex-basis: 165px;
    min-height: 165px;
    padding: 30px 24px;
    border: 2px solid rgba(14, 135, 151, .34);
}

.process-decision .node-icon {
    margin-top: -10px;
    margin-bottom: 6px;
}

.process-branches {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.process-branch {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 14px;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    border: 2px dashed rgba(14, 135, 151, .34);
}

.branch-orange {
    border-color: rgba(239, 138, 23, .44);
}

.branch-amber {
    border-color: rgba(216, 146, 18, .44);
}

.branch-neutral {
    border-color: rgba(100, 116, 139, .28);
}

.process-branch-side {
    display: grid;
    align-content: center;
    gap: 8px;
    text-align: center;
}

.branch-letter {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #0c8797, #0e5b7d);
}

.branch-orange .branch-letter,
.branch-amber .branch-letter {
    background: linear-gradient(135deg, #ef8a17, #c45f0d);
}

.process-branch-side strong {
    color: var(--color-primary-deep);
    font-size: .9rem;
    line-height: 1.2;
}

.process-branch-side span {
    color: var(--color-gray-500);
    font-size: .78rem;
    font-weight: 900;
}

.process-branch-content {
    min-width: 0;
}

.process-branch-toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 26px;
}

.process-branch-flow {
    align-items: stretch;
    overflow-x: auto;
    padding: 8px 2px 12px;
}

.process-branch-flow .process-node {
    flex-basis: 132px;
    min-height: 145px;
}

.process-final-flow {
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed rgba(15, 99, 121, .18);
}

.process-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.process-legend {
    display: grid;
    gap: 7px;
    min-width: 150px;
    padding: 12px;
    border: 1px solid rgba(15, 99, 121, .15);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
}

.process-legend strong {
    color: var(--color-primary-deep);
    font-size: .84rem;
}

.process-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gray-600);
    font-size: .76rem;
    font-weight: 800;
}

.legend-dot,
.legend-check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.legend-dot.start {
    background: #0c8797;
}

.legend-dot.active {
    background: #ef8a17;
}

.legend-dot.done,
.legend-check.good {
    background: #1fa668;
}

.legend-check.bad {
    background: #d94b3d;
}

.legend-check.neutral {
    background: #64748b;
}

@media (max-width: 1100px) {
    .process-summary-grid,
    .process-case-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-filter-form {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .process-call-card {
        grid-template-columns: 1fr;
    }

    .process-call-status,
    .process-call-actions {
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .process-summary-grid,
    .process-case-context,
    .process-filter-form {
        grid-template-columns: 1fr;
    }

    .process-flow-head,
    .process-panel-head {
        display: grid;
    }
}

/* Ajustes vista /procesos: tarjetas superiores horizontales y compactas */
.process-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.process-summary-grid .mini-stat-card {
    min-height: 82px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label value"
        "note value";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
}

.process-summary-grid .mini-stat-card span {
    grid-area: label;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.process-summary-grid .mini-stat-card strong {
    grid-area: value;
    justify-self: end;
    line-height: 1;
}

.process-summary-grid .mini-stat-card small {
    grid-area: note;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

.process-call-main p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.process-call-main h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.process-case-hero,
.process-case-overview,
.process-bottom-actions {
    margin-top: 22px;
}

.process-case-overview .process-flow-head {
    align-items: center;
}

.process-case-context-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.process-case-context-primary strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.process-bottom-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 99, 121, .10);
}

@media (max-width: 1100px) {
    .process-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-case-context-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .process-summary-grid,
    .process-case-context-primary {
        grid-template-columns: 1fr;
    }

    .process-summary-grid .mini-stat-card {
        min-height: auto;
    }

    .process-bottom-actions {
        justify-content: stretch;
    }

    .process-bottom-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mejora de color operativo: estados, áreas, tiempos y prioridad visual */
.process-color-stat:nth-child(1) {
    border-left: 5px solid #0c8797;
    background: linear-gradient(135deg, rgba(14, 135, 151, .10), rgba(255,255,255,.96));
}

.process-color-stat:nth-child(2) {
    border-left: 5px solid #ef8a17;
    background: linear-gradient(135deg, rgba(239, 138, 23, .12), rgba(255,255,255,.96));
}

.process-color-stat:nth-child(3) {
    border-left: 5px solid #1fa668;
    background: linear-gradient(135deg, rgba(31, 166, 104, .11), rgba(255,255,255,.96));
}

.process-color-stat:nth-child(4) {
    border-left: 5px solid #d94b3d;
    background: linear-gradient(135deg, rgba(217, 75, 61, .10), rgba(255,255,255,.96));
}

.process-call-card {
    position: relative;
    overflow: hidden;
}

.process-call-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-radius: 20px 0 0 20px;
    background: #0c8797;
}

.process-call-card.has-active-flow::before {
    background: linear-gradient(180deg, #ef8a17, #d94b3d);
}

.process-call-card.has-ticket-flow::before {
    background: linear-gradient(180deg, #0c8797, #ef8a17);
}

.process-call-card.has-direct-flow::before {
    background: linear-gradient(180deg, #1fa668, #0c8797);
}

.process-call-badge.inbound {
    background: linear-gradient(135deg, #0c8797, #0e5b7d);
}

.process-call-badge.outbound {
    background: linear-gradient(135deg, #2758bd, #5136a5);
}

.process-call-status .pill {
    border: 1px solid transparent;
}

.process-call-status .pill-success {
    border-color: rgba(31, 166, 104, .20);
}

.process-call-status .pill-warning {
    border-color: rgba(239, 138, 23, .28);
}

.process-call-status .pill-muted {
    border-color: rgba(100, 116, 139, .16);
}

.process-diagram-board {
    --area-accent: #0c8797;
    --area-accent-soft: rgba(14, 135, 151, .12);
    --area-accent-mid: rgba(14, 135, 151, .30);
}

.process-node {
    border-top: 5px solid var(--area-accent, #0c8797);
}

.process-node.area-atencion {
    --area-accent: #0c8797;
    --area-accent-soft: rgba(14, 135, 151, .13);
    --area-accent-mid: rgba(14, 135, 151, .32);
}

.process-node.area-ventas {
    --area-accent: #2758bd;
    --area-accent-soft: rgba(39, 88, 189, .12);
    --area-accent-mid: rgba(39, 88, 189, .30);
}

.process-node.area-soporte {
    --area-accent: #ef8a17;
    --area-accent-soft: rgba(239, 138, 23, .14);
    --area-accent-mid: rgba(239, 138, 23, .34);
}

.process-node.area-administracion {
    --area-accent: #d89212;
    --area-accent-soft: rgba(216, 146, 18, .16);
    --area-accent-mid: rgba(216, 146, 18, .35);
}

.process-node.area-direccion {
    --area-accent: #334155;
    --area-accent-soft: rgba(51, 65, 85, .12);
    --area-accent-mid: rgba(51, 65, 85, .26);
}

.process-node.area-atencion .node-icon,
.process-node.area-ventas .node-icon,
.process-node.area-soporte .node-icon,
.process-node.area-administracion .node-icon,
.process-node.area-direccion .node-icon {
    background: linear-gradient(135deg, var(--area-accent), color-mix(in srgb, var(--area-accent) 72%, #0f172a));
}

.process-node.area-atencion em,
.process-node.area-ventas em,
.process-node.area-soporte em,
.process-node.area-administracion em,
.process-node.area-direccion em {
    color: color-mix(in srgb, var(--area-accent) 72%, #0f172a);
    background: var(--area-accent-soft);
    border: 1px solid var(--area-accent-mid);
}

.process-node.node-active .node-pill,
.process-node.node-pending .node-pill {
    background: #ef8a17;
}

.process-node.node-done .node-pill {
    background: #1fa668;
}

.process-node.node-start .node-pill {
    background: #0c8797;
}

.process-time-card.good,
.process-ticket-summary.good {
    background: linear-gradient(135deg, rgba(31, 166, 104, .10), #fff 72%);
}

.process-time-card.bad,
.process-ticket-summary.bad {
    background: linear-gradient(135deg, rgba(217, 75, 61, .10), #fff 72%);
}

.process-time-card.neutral,
.process-ticket-summary.neutral {
    background: linear-gradient(135deg, rgba(100, 116, 139, .09), #fff 72%);
}

.process-time-card.good::before,
.process-ticket-summary.good::before,
.process-time-card.bad::before,
.process-ticket-summary.bad::before,
.process-time-card.neutral::before,
.process-ticket-summary.neutral::before {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    vertical-align: middle;
}

.process-time-card.good::before,
.process-ticket-summary.good::before {
    content: '✓';
    background: #1fa668;
}

.process-time-card.bad::before,
.process-ticket-summary.bad::before {
    content: '×';
    background: #d94b3d;
}

.process-time-card.neutral::before,
.process-ticket-summary.neutral::before {
    content: '–';
    background: #64748b;
}

.process-branch.branch-teal {
    background: linear-gradient(135deg, rgba(39, 88, 189, .06), rgba(255,255,255,.82));
    border-color: rgba(39, 88, 189, .36);
}

.process-branch.branch-orange {
    background: linear-gradient(135deg, rgba(239, 138, 23, .07), rgba(255,255,255,.82));
}

.process-branch.branch-amber {
    background: linear-gradient(135deg, rgba(216, 146, 18, .07), rgba(255,255,255,.82));
}

.process-responsible-banner.teal {
    background: linear-gradient(135deg, #2758bd, #0c8797);
}

.process-responsible-banner.orange {
    background: linear-gradient(135deg, #ef8a17, #c45f0d);
}

.process-responsible-banner.amber {
    background: linear-gradient(135deg, #d89212, #995d13);
}

.process-legend-row {
    align-items: stretch;
}

.process-legend {
    border-left: 4px solid rgba(14, 135, 151, .45);
}


.area-legend .area-atencion-dot { background: #0c8797; }
.area-legend .area-ventas-dot { background: #2758bd; }
.area-legend .area-soporte-dot { background: #ef8a17; }
.area-legend .area-admin-dot { background: #d89212; }

/* Fase 3 · Cierre técnico de órdenes de servicio */
.service-summary-grid .mini-stat-card {
    min-height: 112px;
}

.service-orders-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr);
}

.service-order-list {
    display: grid;
    gap: 12px;
}

.service-order-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(15, 79, 138, .10);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.88));
}

.service-order-main {
    min-width: 0;
}

.service-order-title-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.service-order-title-row strong {
    color: var(--color-primary-deep);
    min-width: 0;
}

.service-order-card p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.45;
}

.service-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    color: var(--color-gray-500);
    font-size: .88rem;
}

.service-order-meta span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(15, 79, 138, .05);
    padding: 5px 10px;
}

.service-order-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.service-form-shell {
    display: grid;
    gap: 16px;
}

.service-form-section {
    border: 1px solid rgba(15, 79, 138, .08);
    border-radius: 20px;
    padding: 18px;
    background: rgba(255,255,255,.82);
}

.service-form-section-compact {
    padding-bottom: 14px;
}

.service-form-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.service-form-section-head div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-form-section-head span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 800;
}

.service-form-section-head h2 {
    margin: 0;
    color: var(--color-primary-deep);
    font-size: 1.05rem;
}

.service-form-section-head small {
    color: var(--color-gray-500);
    font-weight: 700;
}

.service-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.service-two-columns-tight {
    margin-top: 12px;
}

.service-textarea-compact {
    min-height: 108px;
}

.service-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(15, 79, 138, .04);
}

.service-order-detail-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.service-closure-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(15, 79, 138, .10);
    background: linear-gradient(135deg, rgba(15, 79, 138, .10), rgba(255,255,255,.96));
    margin-bottom: 14px;
}

.service-closure-banner span {
    display: block;
    color: var(--color-gray-500);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin-bottom: 6px;
}

.service-closure-banner strong {
    color: var(--color-primary-deep);
    font-size: 1.35rem;
}

.service-closure-banner p {
    margin: 6px 0 0;
    color: var(--color-gray-700);
}

.service-progress-ring {
    min-width: 82px;
    min-height: 82px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--color-white);
    border: 8px solid rgba(15, 79, 138, .14);
    box-shadow: var(--shadow-soft);
}

.service-progress-ring strong {
    font-size: 1rem;
}

.service-checklist-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.service-check-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(15, 79, 138, .08);
    background: #f8fafc;
}

.service-check-item > span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(100, 116, 139, .12);
    color: var(--color-gray-700);
    font-weight: 900;
}

.service-check-item.is-complete {
    background: rgba(21, 128, 61, .07);
    border-color: rgba(21, 128, 61, .18);
}

.service-check-item.is-complete > span {
    background: rgba(21, 128, 61, .14);
    color: #166534;
}

.service-check-item strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: .88rem;
}

.service-check-item small {
    display: block;
    color: var(--color-gray-500);
    margin-top: 2px;
    line-height: 1.3;
}

.btn-full {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

@media (max-width: 1180px) {
    .service-orders-layout,
    .service-order-detail-grid {
        grid-template-columns: 1fr;
    }

    .service-checklist-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .service-order-card,
    .service-two-columns {
        grid-template-columns: 1fr;
    }

    .service-order-actions {
        justify-items: start;
        grid-template-columns: repeat(2, max-content);
    }

    .service-order-title-row,
    .service-closure-banner,
    .service-form-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-checklist-strip {
        grid-template-columns: 1fr;
    }
}

/* F3 · Equipos: vista compacta de producción */
.equipment-page-head {
    margin-bottom: 18px;
}

.equipment-compact-stats {
    gap: 12px;
    margin-bottom: 16px;
}

.equipment-stat-card {
    min-height: 66px;
    padding: 12px 14px;
    border-left: 4px solid rgba(15,79,138,.28);
    display: grid;
    align-content: center;
    gap: 4px;
    box-shadow: 0 12px 28px rgba(17, 55, 97, 0.07);
}

.equipment-stat-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.equipment-stat-card span {
    margin: 0;
    color: var(--color-gray-700);
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-stat-card strong {
    font-size: 1.45rem;
    line-height: 1;
    color: var(--color-primary-deep);
    flex: 0 0 auto;
}

.equipment-stat-card small {
    margin: 0;
    font-size: .75rem;
    line-height: 1.2;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-stat-info {
    border-left-color: #2f80ed;
    background: linear-gradient(90deg, rgba(47,128,237,.07), var(--color-white) 44%);
}

.equipment-stat-primary {
    border-left-color: var(--color-primary);
    background: linear-gradient(90deg, rgba(15,79,138,.08), var(--color-white) 44%);
}

.equipment-stat-success {
    border-left-color: #219653;
    background: linear-gradient(90deg, rgba(33,150,83,.08), var(--color-white) 44%);
}

.equipment-stat-warning {
    border-left-color: #d18b00;
    background: linear-gradient(90deg, rgba(209,139,0,.10), var(--color-white) 44%);
}

.equipment-index-full {
    display: block;
    width: 100%;
}

.equipment-technical-file-card {
    width: 100%;
}

.equipment-panel-head {
    align-items: flex-start;
}

.equipment-panel-head p {
    margin: 5px 0 0;
    color: var(--color-gray-700);
    line-height: 1.45;
    font-size: .92rem;
}

.equipment-filter-toolbar {
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, .7fr)) auto;
    gap: 12px;
    align-items: end;
}

.equipment-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap;
}

.equipment-table-shell {
    margin-top: 6px;
}

.equipment-table th,
.equipment-table td {
    vertical-align: top;
}

.equipment-table th:nth-child(1) { width: 32%; }
.equipment-table th:nth-child(2) { width: 30%; }
.equipment-table th:nth-child(3) { width: 26%; }
.equipment-table th:nth-child(4) { width: 12%; }

.equipment-entity-main,
.equipment-account-block,
.equipment-followup-block {
    gap: 5px;
}

.equipment-entity-main strong,
.equipment-account-block strong,
.equipment-followup-block strong {
    line-height: 1.25;
}

.equipment-entity-main span,
.equipment-account-block span,
.equipment-followup-block span,
.equipment-entity-main small,
.equipment-account-block small,
.equipment-followup-block small {
    line-height: 1.35;
}

.equipment-badge-row {
    gap: 6px;
}

.equipment-badge-row .tone-badge {
    min-height: 26px;
    padding: 0 10px;
    font-size: .76rem;
}

.equipment-inline-status {
    font-weight: 800;
}

.equipment-inline-status.is-ok {
    color: #1f7a47;
}

.equipment-inline-status.is-warning {
    color: #b87500;
}

.equipment-inline-status.is-danger {
    color: #b64646;
}

.equipment-inline-status.is-muted {
    color: var(--color-gray-600);
}

.equipment-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.equipment-row-actions .text-action {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15,79,138,.06);
    border: 1px solid rgba(15,79,138,.08);
    font-size: .82rem;
}

.equipment-row-actions .text-action:hover {
    background: var(--color-primary-soft);
}

@media (max-width: 1180px) {
    .equipment-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .equipment-compact-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .equipment-panel-head,
    .equipment-stat-main,
    .equipment-filter-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .equipment-compact-stats,
    .equipment-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .equipment-filter-actions .btn {
        width: 100%;
    }

    .equipment-stat-card span,
    .equipment-stat-card small {
        white-space: normal;
    }
}

/* F3 · Equipos: detalle compacto de producción */
.equipment-detail-head {
    align-items: flex-start;
}

.equipment-detail-head h1 {
    max-width: 980px;
}

.equipment-detail-title-badges {
    margin-top: 10px;
    gap: 7px;
}

.equipment-detail-actions {
    justify-content: flex-end;
}

.equipment-detail-stats {
    margin-bottom: 16px;
}

.equipment-stat-neutral,
.equipment-stat-muted {
    border-left-color: #94a3b8;
    background: linear-gradient(90deg, rgba(148,163,184,.10), var(--color-white) 44%);
}

.equipment-stat-danger {
    border-left-color: #c2410c;
    background: linear-gradient(90deg, rgba(194,65,12,.10), var(--color-white) 44%);
}

.equipment-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
}

.equipment-detail-file-card {
    width: 100%;
}

.equipment-detail-kv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.equipment-detail-kv {
    min-height: 58px;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15,79,138,.08);
    background: #fbfdff;
    display: grid;
    gap: 5px;
    align-content: center;
}

.equipment-detail-kv.is-featured {
    background: linear-gradient(135deg, rgba(15,79,138,.08), rgba(255,255,255,.96));
    border-color: rgba(15,79,138,.14);
}

.equipment-detail-kv.is-wide {
    grid-column: span 4;
}

.equipment-detail-kv span {
    display: block;
    color: var(--color-gray-500);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.equipment-detail-kv strong {
    color: var(--color-primary-deep);
    font-size: .92rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.equipment-detail-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.equipment-related-card {
    min-width: 0;
}

.equipment-related-list {
    display: grid;
    gap: 10px;
}

.equipment-related-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    background: #fbfdff;
}

.equipment-related-item > div:first-child {
    min-width: 0;
}

.equipment-related-item strong {
    display: block;
    color: var(--color-primary-deep);
    line-height: 1.3;
}

.equipment-related-item p {
    margin: 4px 0 0;
    color: var(--color-gray-700);
    line-height: 1.35;
    font-size: .86rem;
}

.equipment-related-item-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.equipment-compact-timeline {
    gap: 11px;
}

.equipment-compact-timeline .timeline-item {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15,79,138,.07);
    background: #fbfdff;
}

.equipment-compact-timeline .timeline-content strong {
    margin: 4px 0;
    line-height: 1.3;
}

.equipment-compact-timeline .timeline-content p {
    line-height: 1.45;
    font-size: .9rem;
}

.equipment-detail-disclosure {
    padding: 0;
    overflow: hidden;
}

.equipment-detail-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    color: var(--color-primary-deep);
}

.equipment-detail-disclosure > summary::-webkit-details-marker {
    display: none;
}

.equipment-detail-disclosure > summary span {
    font-weight: 900;
    font-size: 1.03rem;
}

.equipment-detail-disclosure > summary strong {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(15,79,138,.08);
    color: var(--color-primary-deep);
    font-size: .78rem;
}

.equipment-detail-disclosure[open] > summary {
    border-bottom: 1px solid rgba(15,79,138,.08);
}

.equipment-event-form,
.equipment-detail-disclosure > .timeline-list,
.equipment-detail-disclosure > .empty-state-inline {
    padding: 18px 20px;
}

.equipment-audit-disclosure {
    margin-top: 2px;
}

@media (max-width: 1180px) {
    .equipment-detail-kv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-detail-kv.is-wide {
        grid-column: span 2;
    }

    .equipment-detail-two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .equipment-detail-head,
    .equipment-detail-actions,
    .equipment-related-item,
    .equipment-related-item-actions,
    .equipment-detail-disclosure > summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .equipment-detail-kv-grid,
    .equipment-detail-two-columns,
    .equipment-related-item-actions {
        grid-template-columns: 1fr;
    }

    .equipment-detail-kv.is-wide {
        grid-column: span 1;
    }

    .equipment-detail-actions,
    .equipment-detail-actions .btn {
        width: 100%;
    }

    .equipment-row-actions {
        width: 100%;
    }
}

/* F3 · Equipos: alta/edición compacta de producción */
.equipment-form-head {
    align-items: flex-start;
}

.equipment-form-head h1 {
    max-width: 900px;
}

.equipment-form-head-actions {
    justify-content: flex-end;
}

.equipment-create-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.equipment-create-step {
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,79,138,.08);
    background: var(--color-white);
    box-shadow: 0 14px 30px rgba(23,40,80,.06);
    border-left: 4px solid rgba(15,79,138,.26);
    display: grid;
    align-content: center;
    gap: 3px;
}

.equipment-create-step span {
    color: var(--color-gray-500);
    font-size: .73rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.equipment-create-step strong {
    color: var(--color-primary-deep);
    font-size: .95rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-create-step small {
    color: var(--color-gray-600);
    font-size: .78rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-create-step.is-required {
    border-left-color: #0f4f8a;
    background: linear-gradient(90deg, rgba(15,79,138,.08), var(--color-white) 42%);
}

.equipment-create-step.is-info {
    border-left-color: #2563eb;
    background: linear-gradient(90deg, rgba(37,99,235,.07), var(--color-white) 42%);
}

.equipment-create-step.is-warning {
    border-left-color: #d97706;
    background: linear-gradient(90deg, rgba(217,119,6,.08), var(--color-white) 42%);
}

.equipment-create-step.is-success {
    border-left-color: #15803d;
    background: linear-gradient(90deg, rgba(21,128,61,.08), var(--color-white) 42%);
}

.equipment-form-shell {
    width: 100%;
}

.equipment-form-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.equipment-form-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(15,79,138,.08);
    background: linear-gradient(135deg, rgba(15,79,138,.08), rgba(255,255,255,.98) 58%);
}

.equipment-form-card-head h2 {
    margin: 2px 0 6px;
    color: var(--color-primary-deep);
    font-size: 1.45rem;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.equipment-form-card-head p {
    margin: 0;
    color: var(--color-gray-700);
    font-size: .92rem;
    line-height: 1.45;
    max-width: 780px;
}

.equipment-form-kicker {
    display: inline-flex;
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.equipment-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 14px;
    padding: 16px;
    background: #f7fafc;
}

.equipment-form-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 14px 32px rgba(23,40,80,.06);
}

.equipment-form-panel-wide {
    grid-column: 1 / -1;
}

.equipment-form-panel-featured {
    border-left: 4px solid #0f4f8a;
}

.equipment-form-panel-warning {
    border-left: 4px solid #d97706;
    background: linear-gradient(180deg, rgba(255,251,235,.72), var(--color-white) 52%);
}

.equipment-form-panel-muted {
    border-left: 4px solid #94a3b8;
}

.equipment-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.equipment-form-section-head > span {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-deep);
    background: rgba(15,79,138,.09);
    font-size: .78rem;
    font-weight: 900;
}

.equipment-form-section-head h3 {
    margin: 0 0 3px;
    color: var(--color-primary-deep);
    font-size: 1.02rem;
    line-height: 1.15;
}

.equipment-form-section-head p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: .84rem;
    line-height: 1.35;
}

.equipment-form-section-head-inline {
    margin-bottom: 12px;
}

.equipment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.equipment-form-grid-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.equipment-form-grid-dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equipment-field-wide {
    grid-column: span 2;
}

.equipment-form-panel .field-label {
    font-size: .84rem;
    line-height: 1.2;
}

.equipment-form-panel .field-input {
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: .92rem;
}

.equipment-form-panel .field-textarea {
    min-height: 96px;
    padding: 12px 13px;
    border-radius: 13px;
    font-size: .92rem;
}

.equipment-form-notes {
    min-height: 88px;
}

.equipment-form-active-row {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(21,128,61,.08), rgba(255,255,255,.98));
    border: 1px solid rgba(21,128,61,.12);
}

.equipment-active-check {
    color: #166534;
    line-height: 1.35;
}

.equipment-form-actions {
    justify-content: flex-end;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(15,79,138,.08);
    background: var(--color-white);
}

.form-error-text {
    color: var(--color-danger);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
}

.status-pill-soft-green {
    background: #edf8f1;
    color: #166534;
}

.status-pill-soft-gray {
    background: #f1f5f9;
    color: #475569;
}

@media (max-width: 1180px) {
    .equipment-create-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-form-layout,
    .equipment-form-grid-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-form-panel-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .equipment-form-head,
    .equipment-form-head-actions,
    .equipment-form-card-head,
    .equipment-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .equipment-create-strip,
    .equipment-form-layout,
    .equipment-form-grid,
    .equipment-form-grid-main,
    .equipment-form-grid-dates {
        grid-template-columns: 1fr;
    }

    .equipment-field-wide {
        grid-column: span 1;
    }

    .equipment-form-head-actions,
    .equipment-form-head-actions .btn,
    .equipment-form-actions,
    .equipment-form-actions .btn {
        width: 100%;
    }

    .equipment-create-step strong,
    .equipment-create-step small {
        white-space: normal;
    }
}

/* F3 · Visitas técnicas: agenda compacta de producción */
.visit-page-head {
    margin-bottom: 18px;
}

.visit-compact-stats {
    gap: 12px;
    margin-bottom: 16px;
}

.visit-stat-card {
    min-height: 66px;
    padding: 12px 14px;
    border-left: 4px solid rgba(15,79,138,.28);
    display: grid;
    align-content: center;
    gap: 4px;
    box-shadow: 0 12px 28px rgba(17, 55, 97, 0.07);
}

.visit-stat-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.visit-stat-card span {
    margin: 0;
    color: var(--color-gray-700);
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-stat-card strong {
    font-size: 1.45rem;
    line-height: 1;
    color: var(--color-primary-deep);
    flex: 0 0 auto;
}

.visit-stat-card small {
    margin: 0;
    font-size: .75rem;
    line-height: 1.2;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-stat-info {
    border-left-color: #2f80ed;
    background: linear-gradient(90deg, rgba(47,128,237,.07), var(--color-white) 44%);
}

.visit-stat-primary {
    border-left-color: var(--color-primary);
    background: linear-gradient(90deg, rgba(15,79,138,.08), var(--color-white) 44%);
}

.visit-stat-success {
    border-left-color: #219653;
    background: linear-gradient(90deg, rgba(33,150,83,.08), var(--color-white) 44%);
}

.visit-stat-warning {
    border-left-color: #d18b00;
    background: linear-gradient(90deg, rgba(209,139,0,.10), var(--color-white) 44%);
}

.visit-index-full {
    display: block;
    width: 100%;
}

.visit-agenda-card {
    width: 100%;
}

.visit-panel-head {
    align-items: flex-start;
}

.visit-panel-head p {
    margin: 5px 0 0;
    color: var(--color-gray-700);
    line-height: 1.45;
    font-size: .92rem;
}

.visit-filter-toolbar {
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, .7fr)) auto;
    gap: 12px;
    align-items: end;
}

.visit-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap;
}

.visit-list {
    display: grid;
    gap: 12px;
}

.visit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,79,138,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.9));
    box-shadow: 0 10px 26px rgba(17, 55, 97, 0.055);
}

.visit-card-main {
    min-width: 0;
}

.visit-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.visit-title-row strong {
    display: block;
    color: var(--color-primary-deep);
    line-height: 1.25;
}

.visit-title-row p {
    margin: 4px 0 0;
    color: var(--color-gray-600);
    font-size: .9rem;
    line-height: 1.3;
}

.visit-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.visit-meta-item {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15,79,138,.035);
    border: 1px solid rgba(15,79,138,.055);
}

.visit-meta-item span,
.visit-meta-item small {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-meta-item span {
    color: var(--color-gray-500);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.visit-meta-item strong {
    display: block;
    margin-top: 4px;
    color: var(--color-gray-900);
    font-size: .9rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-meta-item small {
    margin-top: 3px;
    color: var(--color-gray-500);
    font-size: .78rem;
    line-height: 1.25;
}

.visit-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.visit-badge-row .tone-badge,
.visit-title-row .tone-badge {
    min-height: 26px;
    padding: 0 10px;
    font-size: .76rem;
    white-space: nowrap;
}

.visit-inline-status {
    font-weight: 900;
}

.visit-inline-status.is-ok {
    color: #1f7a47;
}

.visit-inline-status.is-warning {
    color: #b87500;
}

.visit-inline-status.is-danger {
    color: #b64646;
}

.visit-inline-status.is-muted {
    color: var(--color-gray-700);
}

.visit-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    max-width: 190px;
}

.visit-card-actions .text-action {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15,79,138,.06);
    border: 1px solid rgba(15,79,138,.08);
    font-size: .82rem;
}

.visit-card-actions .text-action:hover {
    background: var(--color-primary-soft);
}

@media (max-width: 1180px) {
    .visit-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visit-filter-actions {
        justify-content: flex-start;
    }

    .visit-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .visit-compact-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visit-card {
        grid-template-columns: 1fr;
    }

    .visit-card-actions {
        justify-content: flex-start;
        max-width: none;
    }
}

@media (max-width: 760px) {
    .visit-panel-head,
    .visit-stat-main,
    .visit-title-row,
    .visit-filter-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .visit-compact-stats,
    .visit-filter-toolbar,
    .visit-meta-grid {
        grid-template-columns: 1fr;
    }

    .visit-filter-actions .btn {
        width: 100%;
    }

    .visit-stat-card span,
    .visit-stat-card small,
    .visit-meta-item span,
    .visit-meta-item strong,
    .visit-meta-item small {
        white-space: normal;
    }
}

/* F3 · Visitas técnicas: alta/edición compacta de producción */
.visit-form-head {
    align-items: flex-start;
    margin-bottom: 18px;
}

.visit-form-head h1 {
    max-width: 920px;
}

.visit-form-head-actions {
    justify-content: flex-end;
}

.visit-create-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.visit-create-step {
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,79,138,.08);
    border-left: 4px solid rgba(15,79,138,.26);
    background: var(--color-white);
    box-shadow: 0 14px 30px rgba(23,40,80,.06);
    display: grid;
    align-content: center;
    gap: 3px;
}

.visit-create-step span {
    color: var(--color-gray-500);
    font-size: .73rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.visit-create-step strong {
    color: var(--color-primary-deep);
    font-size: .95rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-create-step small {
    color: var(--color-gray-600);
    font-size: .78rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-create-step.is-required {
    border-left-color: #0f4f8a;
    background: linear-gradient(90deg, rgba(15,79,138,.08), var(--color-white) 42%);
}

.visit-create-step.is-info {
    border-left-color: #2563eb;
    background: linear-gradient(90deg, rgba(37,99,235,.07), var(--color-white) 42%);
}

.visit-create-step.is-warning {
    border-left-color: #d97706;
    background: linear-gradient(90deg, rgba(217,119,6,.08), var(--color-white) 42%);
}

.visit-create-step.is-success {
    border-left-color: #15803d;
    background: linear-gradient(90deg, rgba(21,128,61,.08), var(--color-white) 42%);
}

.visit-form-shell {
    width: 100%;
}

.visit-form-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.visit-form-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(15,79,138,.08);
    background: linear-gradient(135deg, rgba(15,79,138,.08), rgba(255,255,255,.98) 58%);
}

.visit-form-card-head h2 {
    margin: 2px 0 6px;
    color: var(--color-primary-deep);
    font-size: 1.45rem;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.visit-form-card-head p {
    margin: 0;
    color: var(--color-gray-700);
    font-size: .92rem;
    line-height: 1.45;
    max-width: 820px;
}

.visit-form-kicker {
    display: inline-flex;
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.visit-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(320px, .86fr);
    gap: 14px;
    padding: 16px;
    background: #f7fafc;
}

.visit-form-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 14px 32px rgba(23,40,80,.06);
}

.visit-form-panel-wide {
    grid-column: 1 / -1;
}

.visit-form-panel-featured {
    border-left: 4px solid #0f4f8a;
}

.visit-form-panel-warning {
    border-left: 4px solid #d97706;
    background: linear-gradient(180deg, rgba(255,251,235,.72), var(--color-white) 52%);
}

.visit-form-panel-success {
    border-left: 4px solid #15803d;
    background: linear-gradient(180deg, rgba(240,253,244,.72), var(--color-white) 52%);
}

.visit-form-panel-muted {
    border-left: 4px solid #94a3b8;
}

.visit-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.visit-form-section-head > span {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-deep);
    background: rgba(15,79,138,.09);
    font-size: .78rem;
    font-weight: 900;
}

.visit-form-section-head h3 {
    margin: 0 0 3px;
    color: var(--color-primary-deep);
    font-size: 1.02rem;
    line-height: 1.15;
}

.visit-form-section-head p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: .84rem;
    line-height: 1.35;
}

.visit-form-section-head-inline {
    margin-bottom: 12px;
}

.visit-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.visit-form-grid-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.visit-form-grid-text {
    align-items: stretch;
}

.visit-field-wide {
    grid-column: span 2;
}

.visit-form-panel .field-label {
    font-size: .84rem;
    line-height: 1.2;
}

.visit-form-panel .field-input {
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: .92rem;
}

.visit-form-panel .field-textarea {
    min-height: 96px;
    padding: 12px 13px;
    border-radius: 13px;
    font-size: .92rem;
}

.visit-form-textarea {
    min-height: 108px;
}

.visit-form-portal-row {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(21,128,61,.08), rgba(255,255,255,.98));
    border: 1px solid rgba(21,128,61,.12);
}

.visit-portal-check {
    color: #166534;
    line-height: 1.35;
}

.visit-form-actions {
    justify-content: flex-end;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(15,79,138,.08);
    background: var(--color-white);
}

@media (max-width: 1180px) {
    .visit-create-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visit-form-layout,
    .visit-form-grid-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visit-form-panel-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .visit-form-head,
    .visit-form-head-actions,
    .visit-form-card-head,
    .visit-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .visit-create-strip,
    .visit-form-layout,
    .visit-form-grid,
    .visit-form-grid-main {
        grid-template-columns: 1fr;
    }

    .visit-field-wide {
        grid-column: span 1;
    }

    .visit-form-head-actions,
    .visit-form-head-actions .btn,
    .visit-form-actions,
    .visit-form-actions .btn {
        width: 100%;
    }

    .visit-create-step strong,
    .visit-create-step small {
        white-space: normal;
    }
}

/* Seguridad · Crear usuario compacto */
.security-user-form-head {
    align-items: center;
    gap: 16px;
}

.security-user-form-head p {
    max-width: 760px;
}

.security-user-create-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.security-user-step {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--color-white);
    border: 1px solid rgba(15,79,138,.08);
    box-shadow: 0 12px 28px rgba(23,40,80,.06);
}

.security-user-step > span {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: .76rem;
    font-weight: 900;
}

.security-user-step strong,
.security-user-step small {
    display: block;
    margin: 0;
    line-height: 1.16;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.security-user-step strong {
    color: var(--color-primary-deep);
    font-size: .92rem;
}

.security-user-step small {
    margin-top: 2px;
    color: var(--color-gray-600);
    font-size: .76rem;
}

.security-user-step-primary > span {
    background: rgba(15,79,138,.10);
    color: var(--color-primary-dark);
}

.security-user-step-warning > span {
    background: rgba(217,119,6,.12);
    color: #92400e;
}

.security-user-step-success > span {
    background: rgba(21,128,61,.12);
    color: #166534;
}

.security-user-step-muted > span {
    background: rgba(100,116,139,.12);
    color: #475569;
}

.security-user-form-shell {
    grid-template-columns: minmax(0, 1fr);
}

.security-user-form-card {
    width: 100%;
    overflow: hidden;
}

.security-user-form-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(15,79,138,.08);
    background: linear-gradient(135deg, rgba(15,79,138,.06), rgba(255,255,255,.98));
}

.security-user-form-card-head h2 {
    margin: 3px 0 4px;
    color: var(--color-primary-deep);
    font-size: 1.35rem;
    line-height: 1.1;
}

.security-user-form-card-head p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: .9rem;
    line-height: 1.35;
    max-width: 760px;
}

.security-user-form-kicker {
    display: inline-flex;
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.security-user-form-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
    gap: 14px;
    padding: 16px;
    background: #f7fafc;
}

.security-user-form-panel {
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(15,79,138,.08);
    background: var(--color-white);
    box-shadow: 0 14px 32px rgba(23,40,80,.06);
}

.security-user-form-panel-wide {
    grid-column: 1 / -1;
}

.security-user-form-panel-featured {
    border-left: 4px solid #0f4f8a;
}

.security-user-form-panel-warning {
    border-left: 4px solid #d97706;
    background: linear-gradient(180deg, rgba(255,251,235,.76), var(--color-white) 54%);
}

.security-user-form-panel-success {
    border-left: 4px solid #15803d;
    background: linear-gradient(180deg, rgba(240,253,244,.76), var(--color-white) 54%);
}

.security-user-section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.security-user-section-head > span {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(15,79,138,.09);
    color: var(--color-primary-deep);
    font-size: .78rem;
    font-weight: 900;
}

.security-user-section-head h3 {
    margin: 0 0 3px;
    color: var(--color-primary-deep);
    font-size: 1.02rem;
    line-height: 1.15;
}

.security-user-section-head p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: .84rem;
    line-height: 1.35;
}

.security-user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.security-user-form-grid-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.security-user-form-panel .field-label {
    font-size: .84rem;
    line-height: 1.2;
}

.security-user-form-panel .field-input {
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: .92rem;
}

.security-superadmin-alert {
    margin-bottom: 12px;
    padding: 11px 13px;
    border-radius: 16px;
    border: 1px solid rgba(217,119,6,.16);
    background: rgba(255,251,235,.94);
    color: #78350f;
}

.security-superadmin-alert strong,
.security-superadmin-alert p {
    display: block;
    margin: 0;
    line-height: 1.28;
}

.security-superadmin-alert strong {
    font-size: .88rem;
    font-weight: 900;
}

.security-superadmin-alert p {
    margin-top: 3px;
    font-size: .8rem;
}

.security-policy-grid,
.security-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.security-toggle-card,
.security-role-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 76px;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15,79,138,.09);
    background: rgba(255,255,255,.86);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.security-toggle-card:hover,
.security-role-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(23,40,80,.08);
    border-color: rgba(15,79,138,.18);
}

.security-toggle-card input,
.security-role-card input {
    margin-top: 3px;
    accent-color: var(--color-primary);
}

.security-toggle-card strong,
.security-toggle-card p,
.security-role-card strong,
.security-role-card p {
    display: block;
    margin: 0;
    line-height: 1.24;
}

.security-toggle-card strong,
.security-role-card strong {
    color: var(--color-primary-deep);
    font-size: .88rem;
    font-weight: 900;
}

.security-toggle-card p,
.security-role-card p {
    margin-top: 4px;
    color: var(--color-gray-600);
    font-size: .78rem;
}

.security-toggle-card-success {
    background: linear-gradient(90deg, rgba(240,253,244,.92), rgba(255,255,255,.92));
}

.security-toggle-card-warning {
    background: linear-gradient(90deg, rgba(255,251,235,.94), rgba(255,255,255,.92));
}

.security-toggle-card-muted {
    background: linear-gradient(90deg, rgba(248,250,252,.98), rgba(255,255,255,.92));
}

.security-toggle-card-primary {
    background: linear-gradient(90deg, rgba(234,242,251,.94), rgba(255,255,255,.92));
}

.security-role-grid {
    max-height: 370px;
    overflow: auto;
    padding-right: 2px;
}

.security-role-card {
    min-height: 70px;
}

.security-user-form-actions {
    justify-content: flex-end;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(15,79,138,.08);
    background: var(--color-white);
}

@media (max-width: 1180px) {
    .security-user-create-strip,
    .security-user-form-grid-main,
    .security-user-form-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-user-form-panel-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .security-user-form-head,
    .security-user-form-head-actions,
    .security-user-form-card-head,
    .security-user-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .security-user-create-strip,
    .security-user-form-layout,
    .security-user-form-grid,
    .security-user-form-grid-main,
    .security-policy-grid,
    .security-role-grid {
        grid-template-columns: 1fr;
    }

    .security-role-grid {
        max-height: none;
        overflow: visible;
    }

    .security-user-form-head-actions,
    .security-user-form-head-actions .btn,
    .security-user-form-actions,
    .security-user-form-actions .btn {
        width: 100%;
    }

    .security-user-step strong,
    .security-user-step small {
        white-space: normal;
    }
}

/* Seguridad · Usuarios listado compacto */
.security-users-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.security-users-head h1,
.security-users-head p {
    margin: 0;
}

.security-users-head h1 {
    color: var(--color-primary-deep);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.security-users-head p:not(.eyebrow) {
    margin-top: 8px;
    color: var(--color-gray-600);
    line-height: 1.45;
}

.security-users-head-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.security-users-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 16px;
}

.security-users-step {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding: 11px 13px;
    border-radius: 18px;
    border: 1px solid rgba(15,79,138,.08);
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 26px rgba(23,40,80,.055);
}

.security-users-step span,
.security-users-step strong,
.security-users-step small {
    margin: 0;
    line-height: 1.15;
}

.security-users-step span {
    color: var(--color-primary-deep);
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.security-users-step strong {
    grid-row: span 2;
    color: var(--color-primary-deep);
    font-size: 1.25rem;
    font-weight: 900;
    white-space: nowrap;
}

.security-users-step small {
    color: var(--color-gray-600);
    font-size: .76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.security-users-step-info {
    border-left: 4px solid #0284c7;
    background: linear-gradient(90deg, rgba(224,242,254,.74), rgba(255,255,255,.96));
}

.security-users-step-success {
    border-left: 4px solid #15803d;
    background: linear-gradient(90deg, rgba(240,253,244,.80), rgba(255,255,255,.96));
}

.security-users-step-warning {
    border-left: 4px solid #d97706;
    background: linear-gradient(90deg, rgba(255,251,235,.88), rgba(255,255,255,.96));
}

.security-users-step-danger {
    border-left: 4px solid #b91c1c;
    background: linear-gradient(90deg, rgba(254,242,242,.82), rgba(255,255,255,.96));
}

.security-users-step-neutral {
    border-left: 4px solid rgba(112,122,133,.34);
}

.security-users-shell {
    display: grid;
    gap: 14px;
}

.security-users-card-wide {
    width: 100%;
}

.security-users-card {
    overflow: hidden;
}

.security-users-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(15,79,138,.08);
}

.security-users-card-head h2,
.security-users-card-head p {
    margin: 0;
}

.security-users-card-head h2 {
    color: var(--color-primary-deep);
    font-size: 1.18rem;
    line-height: 1.15;
}

.security-users-card-head p {
    margin-top: 4px;
    color: var(--color-gray-600);
    font-size: .88rem;
    line-height: 1.35;
}

.security-users-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(160px, .7fr) minmax(150px, .6fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(15,79,138,.08);
    background: linear-gradient(180deg, rgba(248,251,253,.94), rgba(255,255,255,.98));
}

.security-users-filter label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary-deep);
    font-size: .78rem;
    font-weight: 900;
}

.security-users-filter input,
.security-users-filter select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid rgba(15,79,138,.13);
    background: var(--color-white);
    color: var(--color-gray-900);
    font: inherit;
    outline: none;
}

.security-users-filter input:focus,
.security-users-filter select:focus {
    border-color: rgba(15,79,138,.42);
    box-shadow: 0 0 0 4px rgba(15,79,138,.08);
}

.security-users-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.security-user-list {
    display: grid;
    gap: 10px;
    padding: 14px 18px 18px;
}

.security-user-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .85fr) minmax(250px, 1.1fr) minmax(150px, .72fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,79,138,.08);
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 26px rgba(23,40,80,.045);
}

.security-user-row-protected {
    border-left: 4px solid #d97706;
}

.security-user-row-muted {
    background: linear-gradient(90deg, rgba(254,242,242,.72), rgba(255,255,255,.96));
}

.security-user-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.security-user-avatar {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
    font-weight: 900;
}

.security-user-title-line {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.security-user-title-line strong {
    color: var(--color-primary-deep);
    font-size: .98rem;
    line-height: 1.15;
}

.security-user-main span:not(.tone-badge):not(.status-chip) {
    display: block;
    color: var(--color-gray-600);
    font-size: .84rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.security-user-roles,
.security-user-policy,
.security-user-access {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.security-user-roles small,
.security-user-policy small,
.security-user-access small {
    color: var(--color-gray-500);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.security-user-role-badges,
.security-user-policy-badges {
    gap: 5px;
    overflow: hidden;
    max-height: 32px;
}

.security-user-role-badges .tone-badge,
.security-user-policy-badges .tone-badge,
.security-user-title-line .tone-badge,
.security-user-title-line .status-chip {
    min-height: 27px;
    padding: 0 9px;
    font-size: .74rem;
}

.security-user-access strong {
    color: var(--color-primary-deep);
    font-size: .9rem;
    line-height: 1.2;
}

.security-user-access span {
    color: var(--color-gray-600);
    font-size: .78rem;
    line-height: 1.2;
}

.security-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.security-user-actions .btn {
    min-height: 38px;
    padding: 0 13px;
}

.security-users-empty {
    padding: 20px;
    border-radius: 18px;
    border: 1px dashed rgba(15,79,138,.18);
    background: rgba(248,251,253,.95);
}

.security-users-empty strong,
.security-users-empty p {
    display: block;
    margin: 0;
}

.security-users-empty strong {
    color: var(--color-primary-deep);
}

.security-users-empty p {
    margin-top: 4px;
    color: var(--color-gray-600);
    line-height: 1.4;
}

.security-users-audit-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.security-users-audit-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    color: var(--color-primary-deep);
    font-weight: 900;
}

.security-users-audit-card summary::marker {
    color: var(--color-primary);
}

.security-users-audit-card summary strong {
    font-size: .86rem;
    color: var(--color-gray-600);
}

.security-users-audit-list {
    padding: 0 20px 18px;
}

.security-users-empty-soft {
    margin: 0 20px 18px;
}

@media (max-width: 1320px) {
    .security-users-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .security-user-row {
        grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .8fr) minmax(240px, 1fr);
    }

    .security-user-access,
    .security-user-actions {
        grid-column: auto;
    }
}

@media (max-width: 980px) {
    .security-users-head,
    .security-users-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .security-users-filter {
        grid-template-columns: 1fr 1fr;
    }

    .security-users-filter-search,
    .security-users-filter-actions {
        grid-column: 1 / -1;
    }

    .security-users-filter-actions {
        justify-content: flex-start;
    }

    .security-user-row {
        grid-template-columns: 1fr;
    }

    .security-user-actions {
        justify-content: flex-start;
    }

    .security-user-role-badges,
    .security-user-policy-badges {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .security-users-strip,
    .security-users-filter {
        grid-template-columns: 1fr;
    }

    .security-users-head-actions,
    .security-users-head-actions .btn,
    .security-users-filter-actions,
    .security-users-filter-actions .btn,
    .security-user-actions,
    .security-user-actions .btn {
        width: 100%;
    }

    .security-users-filter-actions,
    .security-user-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .security-user-main {
        align-items: flex-start;
    }
}

/* Seguridad · Detalle de usuario compacto */
.security-user-show-head {
    align-items: flex-start;
    gap: 14px;
}

.security-user-show-head h1,
.security-user-show-head p {
    margin-bottom: 0;
}

.security-user-show-head h1 {
    line-height: 1.08;
}

.security-user-show-head p:not(.eyebrow) {
    max-width: 720px;
}

.security-user-show-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.security-user-show-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 16px;
}

.security-user-show-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
}

.security-user-show-step span,
.security-user-show-step strong,
.security-user-show-step small {
    display: block;
}

.security-user-show-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 12px;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
}

.security-user-show-step strong {
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.15;
}

.security-user-show-step small {
    color: #64748b;
    font-size: .75rem;
    line-height: 1.15;
    margin-top: 2px;
}

.security-user-show-step-info > span,
.security-user-show-step-primary > span { background: #2758bd; }
.security-user-show-step-success > span { background: #1fa668; }
.security-user-show-step-warning > span { background: #d89212; }
.security-user-show-step-danger > span { background: #d94b3d; }
.security-user-show-step-neutral > span { background: #64748b; }

.security-user-show-step-info,
.security-user-show-step-primary {
    border-color: rgba(39, 88, 189, .24);
    background: linear-gradient(135deg, rgba(39, 88, 189, .08), rgba(255, 255, 255, .9));
}

.security-user-show-step-success {
    border-color: rgba(31, 166, 104, .24);
    background: linear-gradient(135deg, rgba(31, 166, 104, .08), rgba(255, 255, 255, .9));
}

.security-user-show-step-warning {
    border-color: rgba(216, 146, 18, .28);
    background: linear-gradient(135deg, rgba(216, 146, 18, .10), rgba(255, 255, 255, .9));
}

.security-user-show-step-danger {
    border-color: rgba(217, 75, 61, .28);
    background: linear-gradient(135deg, rgba(217, 75, 61, .09), rgba(255, 255, 255, .9));
}

.security-user-show-step-neutral {
    border-color: rgba(100, 116, 139, .24);
    background: linear-gradient(135deg, rgba(100, 116, 139, .08), rgba(255, 255, 255, .9));
}

.security-user-show-shell {
    grid-template-columns: 1fr;
    gap: 14px;
}

.security-user-show-card {
    overflow: hidden;
}

.security-user-show-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.security-user-show-card-head h2 {
    margin: 4px 0 4px;
    color: #0f172a;
    font-size: 1.42rem;
    line-height: 1.1;
}

.security-user-show-card-head p {
    margin: 0;
    max-width: 680px;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.35;
}

.security-user-show-kicker {
    display: inline-flex;
    color: #2758bd;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.security-user-show-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    min-width: 240px;
}

.security-user-show-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(217, 75, 61, .24);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(217, 75, 61, .09), rgba(255, 255, 255, .9));
}

.security-user-show-alert strong {
    color: #991b1b;
    font-size: .9rem;
}

.security-user-show-alert p {
    margin: 0;
    color: #7f1d1d;
    font-size: .82rem;
    line-height: 1.3;
}

.security-user-show-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 14px;
    margin-top: 14px;
}

.security-user-show-panel {
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: #fff;
}

.security-user-show-panel-wide {
    grid-column: 1 / -1;
}

.security-user-show-panel-primary {
    border-color: rgba(39, 88, 189, .20);
    background: linear-gradient(135deg, rgba(39, 88, 189, .055), #fff 58%);
}

.security-user-show-panel-warning {
    border-color: rgba(216, 146, 18, .25);
    background: linear-gradient(135deg, rgba(216, 146, 18, .065), #fff 58%);
}

.security-user-show-panel-success {
    border-color: rgba(31, 166, 104, .20);
    background: linear-gradient(135deg, rgba(31, 166, 104, .055), #fff 58%);
}

.security-user-show-panel-muted {
    border-color: rgba(100, 116, 139, .18);
    background: linear-gradient(135deg, rgba(100, 116, 139, .045), #fff 58%);
}

.security-user-show-section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.security-user-show-section-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
}

.security-user-show-section-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: .98rem;
    line-height: 1.16;
}

.security-user-show-section-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
}

.security-user-show-kv-grid,
.security-user-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.security-user-show-kv-item,
.security-user-policy-card {
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
}

.security-user-show-kv-item small,
.security-user-policy-card small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.security-user-show-kv-item strong,
.security-user-policy-card strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.2;
    word-break: break-word;
}

.security-user-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-user-policy-card.is-success {
    border-color: rgba(31, 166, 104, .24);
    background: rgba(31, 166, 104, .07);
}

.security-user-policy-card.is-warning {
    border-color: rgba(216, 146, 18, .28);
    background: rgba(216, 146, 18, .09);
}

.security-user-policy-card.is-info {
    border-color: rgba(39, 88, 189, .24);
    background: rgba(39, 88, 189, .07);
}

.security-user-policy-card.is-neutral {
    border-color: rgba(100, 116, 139, .18);
    background: rgba(100, 116, 139, .055);
}

.security-user-show-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.security-user-show-role-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.security-user-show-role-card {
    padding: 11px 12px;
    border: 1px solid rgba(31, 166, 104, .20);
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
}

.security-user-show-role-card strong {
    display: block;
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.16;
}

.security-user-show-role-card p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.28;
}

.security-user-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.security-user-permission-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
}

.security-user-permission-card strong,
.security-user-permission-card small {
    display: block;
}

.security-user-permission-card strong {
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.16;
}

.security-user-permission-card small {
    margin-top: 2px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}

.security-user-permission-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.security-user-permission-badges span {
    display: inline-flex;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(39, 88, 189, .08);
    color: #2758bd;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.15;
    word-break: break-word;
}

.security-user-show-empty {
    padding: 14px;
    border: 1px dashed rgba(148, 163, 184, .38);
    border-radius: 16px;
    background: rgba(248, 250, 252, .78);
}

.security-user-show-empty-wide {
    grid-column: 1 / -1;
}

.security-user-show-empty strong,
.security-user-show-empty p {
    display: block;
    margin: 0;
}

.security-user-show-empty strong {
    color: #0f172a;
    font-size: .9rem;
}

.security-user-show-empty p {
    margin-top: 4px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.3;
}

.security-user-show-audit-card {
    padding: 0;
    overflow: hidden;
}

.security-user-show-audit-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    color: #0f172a;
    font-weight: 900;
    list-style: none;
}

.security-user-show-audit-card summary::-webkit-details-marker {
    display: none;
}

.security-user-show-audit-card summary span {
    color: #0f172a;
    font-size: .95rem;
}

.security-user-show-audit-card summary strong {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(100, 116, 139, .10);
    color: #475569;
    font-size: .74rem;
}

.security-user-show-audit-list {
    padding: 0 18px 18px;
}

.security-user-show-empty-soft {
    margin: 0 18px 18px;
}

@media (max-width: 1180px) {
    .security-user-show-strip,
    .security-user-show-kv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-user-show-layout,
    .security-user-permission-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .security-user-show-head,
    .security-user-show-card-head,
    .security-user-show-alert {
        flex-direction: column;
        align-items: stretch;
    }

    .security-user-show-head-actions,
    .security-user-show-badges {
        justify-content: flex-start;
    }

    .security-user-show-strip,
    .security-user-show-kv-grid,
    .security-user-policy-grid,
    .security-user-show-role-list {
        grid-template-columns: 1fr;
    }
}

/* ===== F2 cierre final · Cotizaciones comerciales ===== */
.workspace-grid-full {
    grid-template-columns: 1fr;
}

.page-head-compact {
    margin-bottom: 18px;
}

.compact-metric-row {
    gap: 12px;
    margin-bottom: 16px;
}

.compact-metric-row .mini-stat-card {
    padding: 13px 16px;
    min-height: 74px;
}

.compact-metric-row .mini-stat-card span {
    margin-bottom: 4px;
    font-size: .82rem;
}

.compact-metric-row .mini-stat-card strong {
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.15;
}

.compact-metric-row .mini-stat-card small {
    margin-top: 4px;
    line-height: 1.25;
}

.quote-workspace-card,
.f2-quote-form {
    width: 100%;
}

.quote-filter-toolbar {
    grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(160px, .7fr)) auto;
}

.quote-list-stack,
.quote-items-stack {
    display: grid;
    gap: 12px;
}

.quote-list-stack-compact {
    gap: 10px;
}

.quote-row-card {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(160px, .48fr) minmax(160px, .48fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-left-width: 5px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(20,45,85,.05);
}

.quote-row-warning { border-left-color: #c89726; }
.quote-row-info { border-left-color: #2e8fda; }
.quote-row-success { border-left-color: #2f8f54; }
.quote-row-danger { border-left-color: #b64646; }

.quote-row-main {
    min-width: 0;
}

.quote-row-meta {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.quote-row-meta span,
.quote-row-meta small {
    color: var(--color-gray-600);
    font-size: .84rem;
    font-weight: 700;
}

.quote-row-meta strong {
    color: var(--color-primary-deep);
    font-size: 1rem;
    line-height: 1.2;
}

.quote-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 850;
}

.quote-status-warning { background: #fff5dd; color: #8a610e; }
.quote-status-info { background: #e9f4fc; color: #0f4f8a; }
.quote-status-success { background: #edf8f0; color: #216c3d; }
.quote-status-danger { background: #fff0f0; color: #9c3434; }

.row-actions-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 12px;
}

.quote-form-shell {
    display: grid;
    gap: 16px;
}

.quote-form-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(15,79,138,.08);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.quote-form-card-primary { background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%); }
.quote-form-card-warning { background: linear-gradient(180deg, #fffdf8 0%, #fffaf0 100%); }
.quote-form-card-success { background: linear-gradient(180deg, #fff 0%, #f6fbf7 100%); }

.quote-form-head,
.quote-line-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.quote-form-head span {
    display: block;
    color: var(--color-gray-600);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.quote-form-head strong,
.quote-line-top strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: 1.05rem;
}

.quote-form-head small {
    color: var(--color-gray-600);
    font-weight: 700;
}

.card-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-form-grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quote-line-card {
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    padding: 14px;
}

.quote-line-top {
    margin-bottom: 10px;
}

.quote-line-remove {
    border: 0;
    background: transparent;
    color: #9c3434;
    font-weight: 800;
    cursor: pointer;
}

.quote-description-field {
    grid-column: span 2;
}

.field-error {
    display: block;
    color: #b64646;
    font-weight: 700;
    font-size: .82rem;
}

.form-actions-sticky {
    position: sticky;
    bottom: 14px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    padding: 12px;
    justify-content: flex-end;
    z-index: 5;
}

.quote-total-panel {
    margin-top: 14px;
    margin-left: auto;
    width: min(420px, 100%);
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.quote-total-panel div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(15,79,138,.08);
}

.quote-total-panel div:last-child {
    border-bottom: 0;
}

.quote-total-panel span {
    color: var(--color-gray-600);
    font-weight: 800;
}

.quote-total-panel strong {
    color: var(--color-primary-deep);
}

.quote-total-final {
    background: var(--color-primary-deep);
}

.quote-total-final span,
.quote-total-final strong {
    color: #fff;
}

.audit-details-card {
    padding: 18px;
}

.audit-details-card summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    color: var(--color-primary-deep);
}

.timeline-list-top-gap {
    margin-top: 14px;
}

@media (max-width: 1180px) {
    .quote-filter-toolbar,
    .quote-row-card,
    .card-form-grid-3,
    .card-form-grid-4,
    .card-form-grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-row-main,
    .quote-description-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .quote-filter-toolbar,
    .quote-row-card,
    .card-form-grid-3,
    .card-form-grid-4,
    .card-form-grid-6 {
        grid-template-columns: 1fr;
    }

    .row-actions-compact,
    .quote-form-head,
    .quote-line-top {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ===== F2 ajuste visual · Oportunidades compactas ===== */
.opportunity-metric-row .opportunity-metric-card {
    border-left: 4px solid rgba(15,79,138,.20);
}

.opportunity-workspace-card {
    width: 100%;
}

.compact-panel-head > div {
    display: grid;
    gap: 3px;
}

.opportunity-filter-toolbar {
    grid-template-columns: minmax(260px, 1.2fr) repeat(4, minmax(145px, .72fr)) auto;
    gap: 12px;
    align-items: end;
}

.opportunity-filter-actions {
    justify-content: flex-end;
}

.opportunity-list-stack {
    display: grid;
    gap: 10px;
}

.opportunity-row-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, .42fr) minmax(150px, .42fr) minmax(170px, .52fr) auto;
    min-height: 92px;
}

.opportunity-row-info { border-left-color: #2e8fda; }
.opportunity-row-warning { border-left-color: #c89726; }
.opportunity-row-success { border-left-color: #2f8f54; }
.opportunity-row-danger { border-left-color: #b64646; }

.opportunity-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 5px;
}

.opportunity-title-line strong {
    color: var(--color-primary-deep);
    font-size: 1rem;
    line-height: 1.25;
}

.opportunity-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
}

.opportunity-meta-line span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f4f7fa;
    color: var(--color-gray-700);
    font-size: .78rem;
    font-weight: 800;
}

.opportunity-row-main p {
    margin: 0;
    color: var(--color-gray-700);
    font-size: .88rem;
    line-height: 1.35;
}

.opportunity-row-meta strong {
    font-size: .96rem;
}

.opportunity-danger-text {
    color: #9c3434 !important;
}

.opportunity-actions {
    min-width: 112px;
}

.opportunity-empty-state {
    border: 1px dashed rgba(15,79,138,.18);
    border-radius: 18px;
    background: #fbfdff;
}

@media (max-width: 1180px) {
    .opportunity-filter-toolbar,
    .opportunity-row-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opportunity-row-main {
        grid-column: 1 / -1;
    }

    .opportunity-actions {
        justify-content: flex-start;
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .opportunity-filter-toolbar,
    .opportunity-row-card {
        grid-template-columns: 1fr;
    }

    .opportunity-title-line,
    .opportunity-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* ===== F2 ajuste visual · Detalle de oportunidad compacto ===== */
.opportunity-show-head {
    border-left: 5px solid rgba(15,79,138,.24);
}

.opportunity-show-head-info { border-left-color: #2e8fda; }
.opportunity-show-head-warning { border-left-color: #c89726; }
.opportunity-show-head-success { border-left-color: #2f8f54; }
.opportunity-show-head-danger { border-left-color: #b64646; }

.opportunity-show-actions {
    align-items: center;
}

.opportunity-show-metric-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.opportunity-show-metric-card {
    min-height: 70px;
}

.opportunity-show-card {
    width: 100%;
    display: grid;
    gap: 16px;
}

.opportunity-show-panel-head p {
    margin: 2px 0 0;
    color: var(--color-gray-600);
    font-weight: 700;
}

.opportunity-show-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.opportunity-show-strip article {
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-left: 4px solid rgba(15,79,138,.22);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(20,45,85,.05);
}

.opportunity-show-strip-info article { border-left-color: rgba(46,143,218,.72); }
.opportunity-show-strip-warning article { border-left-color: rgba(200,151,38,.75); }
.opportunity-show-strip-success article { border-left-color: rgba(47,143,84,.72); }
.opportunity-show-strip-danger article { border-left-color: rgba(182,70,70,.72); }

.opportunity-show-strip span,
.opportunity-show-note-grid span,
.opportunity-show-flag span,
.section-title-row span {
    display: block;
    color: var(--color-gray-600);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opportunity-show-strip strong {
    display: block;
    margin-top: 4px;
    color: var(--color-primary-deep);
    font-size: .98rem;
    line-height: 1.22;
}

.opportunity-show-strip small {
    display: block;
    margin-top: 4px;
    color: var(--color-gray-600);
    font-weight: 700;
    line-height: 1.25;
}

.opportunity-show-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: 14px;
}

.opportunity-show-section {
    padding: 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.opportunity-show-section-main {
    background: #fff;
}

.opportunity-show-side {
    background: linear-gradient(180deg, #fffdf8 0%, #fffaf0 100%);
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-title-row h3 {
    margin: 2px 0 0;
    color: var(--color-primary-deep);
    font-size: 1.02rem;
    line-height: 1.25;
}

.section-title-row small {
    color: var(--color-gray-600);
    font-weight: 800;
    text-align: right;
}

.opportunity-show-kv-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.opportunity-show-kv-grid .detail-kv-item {
    min-height: 68px;
    padding: 12px;
    border-radius: 16px;
}

.opportunity-show-overdue {
    border-color: rgba(182,70,70,.22) !important;
    background: #fff7f7 !important;
}

.opportunity-show-overdue strong {
    color: #9c3434 !important;
}

.opportunity-show-flags {
    display: grid;
    gap: 10px;
}

.opportunity-show-flag {
    padding: 12px 14px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 16px;
    background: #fff;
}

.opportunity-show-flag strong {
    display: block;
    margin-top: 4px;
    color: var(--color-primary-deep);
    line-height: 1.2;
}

.opportunity-show-flag.is-warning { background: #fff8e8; border-color: rgba(200,151,38,.20); }
.opportunity-show-flag.is-info { background: #eef7fd; border-color: rgba(46,143,218,.18); }
.opportunity-show-flag.is-success { background: #eef9f2; border-color: rgba(47,143,84,.18); }
.opportunity-show-flag.is-danger { background: #fff0f0; border-color: rgba(182,70,70,.18); }
.opportunity-show-flag.is-muted { background: #f8fafc; }

.opportunity-show-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.opportunity-show-note-grid > div {
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(15,79,138,.08);
    border-radius: 18px;
    background: #fff;
}

.opportunity-show-note-grid p {
    margin: 6px 0 0;
    color: var(--color-gray-700);
    font-weight: 700;
    line-height: 1.45;
}

.opportunity-show-quote-card {
    grid-template-columns: minmax(0, 1.4fr) minmax(150px, .42fr) minmax(160px, .48fr) auto;
    box-shadow: 0 10px 22px rgba(20,45,85,.045);
}

.opportunity-show-lower-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-timeline-list {
    display: grid;
    gap: 10px;
}

.compact-timeline-list .timeline-item {
    padding-bottom: 10px;
}

.compact-timeline-list .timeline-content p {
    margin-bottom: 0;
    line-height: 1.35;
}

.opportunity-show-audit-card {
    box-shadow: none;
    background: #fff;
}

.opportunity-show-audit-card summary::-webkit-details-marker {
    display: none;
}

.opportunity-show-audit-card summary span {
    color: var(--color-primary-deep);
    font-weight: 900;
}

@media (max-width: 1180px) {
    .opportunity-show-metric-row,
    .opportunity-show-strip,
    .opportunity-show-kv-grid,
    .opportunity-show-section-grid,
    .opportunity-show-lower-grid,
    .opportunity-show-quote-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opportunity-show-quote-card .quote-row-main {
        grid-column: 1 / -1;
    }

    .opportunity-show-quote-card .row-actions-compact {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .opportunity-show-metric-row,
    .opportunity-show-strip,
    .opportunity-show-kv-grid,
    .opportunity-show-section-grid,
    .opportunity-show-lower-grid,
    .opportunity-show-note-grid,
    .opportunity-show-quote-card {
        grid-template-columns: 1fr;
    }

    .opportunity-show-actions,
    .section-title-row {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }
}

/* ===== F2 ajuste visual · Editar oportunidad compacto ===== */
.opportunity-edit-head {
    border-left: 5px solid rgba(15,79,138,.24);
}

.opportunity-edit-metric-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.opportunity-edit-card {
    width: 100%;
    display: grid;
    gap: 16px;
}

.opportunity-edit-panel-head {
    align-items: center;
}

.opportunity-edit-panel-head p {
    margin: 3px 0 0;
    color: var(--color-gray-600);
    font-weight: 700;
}

.opportunity-form-compact {
    gap: 14px;
}

.opportunity-form-section {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(15,79,138,.08);
    border-left: 5px solid rgba(15,79,138,.20);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: 0 12px 26px rgba(20,45,85,.045);
}

.opportunity-form-section-primary { border-left-color: rgba(46,143,218,.72); }
.opportunity-form-section-warning { border-left-color: rgba(200,151,38,.75); background: linear-gradient(180deg, #fff 0%, #fffaf0 100%); }
.opportunity-form-section-success { border-left-color: rgba(47,143,84,.72); background: linear-gradient(180deg, #fff 0%, #f7fcf9 100%); }
.opportunity-form-section-neutral { border-left-color: rgba(112,122,133,.55); }
.opportunity-form-section-notes { border-left-color: rgba(15,79,138,.30); }

.opportunity-form-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.opportunity-form-section-head > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
    font-size: .78rem;
    font-weight: 950;
}

.opportunity-form-section-head div {
    min-width: 0;
    flex: 1;
}

.opportunity-form-section-head h3 {
    margin: 0;
    color: var(--color-primary-deep);
    font-size: 1.02rem;
    line-height: 1.2;
}

.opportunity-form-section-head p {
    margin: 4px 0 0;
    color: var(--color-gray-600);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
}

.opportunity-form-section-head-inline {
    justify-content: flex-start;
}

.opportunity-form-grid {
    gap: 12px;
}

.opportunity-form-grid .field-block {
    margin: 0;
}

.opportunity-form-grid .field-block-wide {
    grid-column: 1 / -1;
}

.opportunity-textarea-compact {
    min-height: 96px;
}

.opportunity-flag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.opportunity-flag-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 76px;
    padding: 13px 14px;
    border: 1px solid rgba(15,79,138,.10);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
}

.opportunity-flag-card input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--color-primary);
}

.opportunity-flag-card strong {
    display: block;
    color: var(--color-primary-deep);
    font-size: .93rem;
    line-height: 1.2;
}

.opportunity-flag-card small {
    display: block;
    margin-top: 3px;
    color: var(--color-gray-600);
    font-weight: 700;
    line-height: 1.25;
}

.opportunity-flag-card-success {
    background: #f4fbf6;
    border-color: rgba(47,143,84,.18);
}

.opportunity-edit-actions {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(15,79,138,.08);
}

.status-pill-soft-yellow {
    background: #fff6dd;
    color: #8b6414;
    border-color: rgba(200,151,38,.24);
}

.status-pill-soft-red {
    background: #fff0f0;
    color: #9c3434;
    border-color: rgba(182,70,70,.22);
}

@media (max-width: 1180px) {
    .opportunity-edit-metric-row,
    .opportunity-flag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .opportunity-edit-metric-row,
    .opportunity-flag-grid,
    .opportunity-form-grid {
        grid-template-columns: 1fr;
    }

    .opportunity-edit-panel-head,
    .opportunity-form-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .opportunity-form-grid .field-block-wide {
        grid-column: auto;
    }
}

/* ===== Corrección puntual · Métricas superiores horizontales en editar oportunidad ===== */
.compact-metric-row {
    display: grid;
    align-items: stretch;
}

.opportunity-edit-metric-row,
.opportunity-show-metric-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
}

.opportunity-edit-metric-row .mini-stat-card,
.opportunity-show-metric-row .mini-stat-card,
.opportunity-edit-metric-row .opportunity-show-metric-card,
.opportunity-show-metric-row .opportunity-show-metric-card {
    min-width: 0;
    min-height: 72px;
    max-height: 96px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 3px;
    overflow: hidden;
}

.opportunity-edit-metric-row .mini-stat-card span,
.opportunity-show-metric-row .mini-stat-card span,
.opportunity-edit-metric-row .mini-stat-card small,
.opportunity-show-metric-row .mini-stat-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opportunity-edit-metric-row .mini-stat-card strong,
.opportunity-show-metric-row .mini-stat-card strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.12;
    max-height: 2.24em;
}

@media (max-width: 1180px) {
    .opportunity-edit-metric-row,
    .opportunity-show-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .opportunity-edit-metric-row,
    .opportunity-show-metric-row {
        grid-template-columns: 1fr;
    }
}

/* ===== FIX · Clientes y leads · Buscador visual limpio sin cambiar tamaño ni posición ===== */
.workbench-search-wide .workbench-search-shell-strong {
    min-height: 62px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(19, 95, 150, .20) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,251,254,.98) 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.92),
        0 12px 26px rgba(18, 76, 118, .07) !important;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.workbench-search-wide .workbench-search-shell-strong::after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1f78b4, #43b5d8);
    opacity: .88;
}

.workbench-search-wide .workbench-search-shell-strong:focus-within {
    border-color: rgba(31, 120, 180, .42) !important;
    background: #ffffff !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.96),
        0 0 0 4px rgba(31, 120, 180, .10),
        0 16px 32px rgba(18, 76, 118, .10) !important;
}

.workbench-search-wide .workbench-search-icon {
    left: 17px !important;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e8f7ff;
    color: #0f5f92 !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
    box-shadow: inset 0 0 0 1px rgba(14, 116, 144, .10);
    z-index: 1;
}

.workbench-search-wide .workbench-search-shell-strong input {
    min-height: 62px !important;
    height: 62px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 18px 0 54px !important;
    color: #14324a !important;
    font-size: .98rem !important;
    font-weight: 650;
}

.workbench-search-wide .workbench-search-shell-strong input::placeholder {
    color: #7c91a3;
    font-weight: 600;
}

.workbench-search-wide .workbench-search-shell-strong input:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Campos personalizados - Clientes y leads */
.custom-fields-modal {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.custom-fields-modal[hidden],
.custom-fields-overlay[hidden] {
    display: none !important;
}

.custom-fields-modal-body {
    overflow: auto;
    display: grid;
    gap: 16px;
    padding-right: 2px;
}

.custom-fields-create-form,
.custom-fields-list-panel,
.custom-fields-detail-section {
    border: 1px solid rgba(14, 116, 144, 0.16);
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.94), rgba(255, 255, 255, 0.98));
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.custom-fields-form-head,
.custom-fields-list-head,
.custom-fields-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.custom-fields-form-head strong,
.custom-fields-list-head strong,
.custom-fields-detail-head h4 {
    color: #075985;
    font-weight: 900;
}

.custom-fields-form-head span,
.custom-fields-list-head span,
.custom-fields-detail-head span,
.custom-field-help {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.custom-fields-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.custom-fields-form-item {
    display: grid;
    gap: 6px;
}

.custom-fields-form-item-wide {
    grid-column: 1 / -1;
}

.custom-fields-form-item > span,
.custom-field-config-actions label > span {
    color: #334155;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.custom-fields-form-item input,
.custom-fields-form-item select,
.custom-fields-form-item textarea,
.custom-field-config-actions input {
    border: 1px solid rgba(148, 163, 184, 0.46);
    border-radius: 12px;
    padding: 9px 11px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.96);
}

.custom-fields-form-checks,
.custom-fields-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.custom-fields-form-checks label,
.custom-field-config-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    padding: 7px 10px;
}

.custom-fields-list {
    display: grid;
    gap: 10px;
}

.custom-field-config-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
}

.custom-field-config-card.is-disabled {
    opacity: 0.62;
}

.custom-field-config-copy {
    display: grid;
    gap: 4px;
}

.custom-field-config-copy strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.custom-field-config-copy small,
.custom-field-config-type {
    color: #64748b;
    font-size: 0.75rem;
}

.custom-field-config-type {
    color: #0369a1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.custom-field-config-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.custom-field-config-actions input[type="number"] {
    width: 76px;
    padding: 7px 8px;
}

.custom-field-options-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.custom-field-options-preview span,
.custom-field-table-value {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: rgba(224, 242, 254, 0.82);
    color: #075985;
    font-size: 0.75rem;
    font-weight: 900;
    white-space: nowrap;
}

.custom-field-table-value-custom-money {
    border-color: rgba(16, 185, 129, 0.24);
    background: rgba(220, 252, 231, 0.82);
    color: #047857;
}

.custom-field-table-value-custom-number {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(254, 243, 199, 0.82);
    color: #92400e;
}

.custom-fields-detail-section {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.82), rgba(255, 255, 255, 0.96));
}

.custom-fields-detail-head {
    margin-bottom: 14px;
}

.custom-fields-detail-head h4 {
    margin: 0;
}

.custom-field-form-item label:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.custom-field-required {
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(254, 226, 226, 0.95);
    color: #b91c1c;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.custom-field-switch {
    width: fit-content;
}

.custom-fields-empty {
    background: rgba(255, 255, 255, 0.78);
    border-radius: 14px;
}

@media (max-width: 760px) {
    .custom-fields-form-grid,
    .custom-field-config-card {
        grid-template-columns: 1fr;
    }

    .custom-field-config-actions {
        justify-content: flex-start;
    }
}

/* Ajuste campos personalizados: edición sin orden manual */
.custom-field-config-admin {
    display: grid;
    gap: 10px;
    min-width: min(100%, 640px);
}

.custom-field-config-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    align-items: end;
    justify-content: stretch;
    gap: 10px;
    width: 100%;
}

.custom-field-config-edit-form label {
    display: grid;
    gap: 6px;
}

.custom-field-edit-name,
.custom-field-edit-help,
.custom-field-edit-options {
    grid-column: 1 / -1;
}

.custom-field-config-actions input,
.custom-field-config-actions select,
.custom-field-config-actions textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.46);
    border-radius: 12px;
    padding: 9px 11px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.96);
}

.custom-field-config-actions textarea {
    min-height: 74px;
    resize: vertical;
}

.custom-field-delete-form {
    display: flex;
    justify-content: flex-end;
}

.btn-danger-soft {
    border: 1px solid rgba(185, 28, 28, 0.18);
    background: rgba(254, 226, 226, 0.92);
    color: #991b1b;
    font-weight: 900;
}

.btn-danger-soft:hover {
    border-color: rgba(185, 28, 28, 0.32);
    background: rgba(254, 202, 202, 0.98);
    color: #7f1d1d;
}

@media (max-width: 900px) {
    .custom-field-config-card,
    .custom-field-config-edit-form {
        grid-template-columns: 1fr;
    }

    .custom-field-delete-form {
        justify-content: flex-start;
    }
}

/* Campos personalizados: acciones compactas con iconos */
.custom-fields-list-panel .custom-field-config-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 12px 14px;
}

.custom-field-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.custom-field-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.92);
    color: #475569;
}

.custom-field-status-pill.is-table {
    border-color: rgba(14, 165, 233, 0.22);
    background: rgba(224, 242, 254, 0.92);
    color: #0369a1;
}

.custom-field-status-pill.is-required {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(254, 243, 199, 0.92);
    color: #92400e;
}

.custom-field-status-pill.is-active {
    border-color: rgba(16, 185, 129, 0.24);
    background: rgba(220, 252, 231, 0.92);
    color: #047857;
}

.custom-field-status-pill.is-inactive {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(241, 245, 249, 0.96);
    color: #64748b;
}

.custom-field-icon-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 78px;
}

.custom-field-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(14, 116, 144, 0.18);
    background: rgba(240, 249, 255, 0.96);
    color: #075985;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.custom-field-icon-btn:hover,
.custom-field-icon-btn.is-active {
    transform: translateY(-1px);
    border-color: rgba(14, 116, 144, 0.34);
    background: #e0f2fe;
    color: #0369a1;
    box-shadow: 0 14px 26px rgba(14, 116, 144, 0.12);
}

.custom-field-icon-delete {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 242, 242, 0.98);
    color: #b91c1c;
}

.custom-field-icon-delete:hover {
    border-color: rgba(220, 38, 38, 0.34);
    background: #fee2e2;
    color: #991b1b;
    box-shadow: 0 14px 26px rgba(220, 38, 38, 0.10);
}

.custom-field-delete-form {
    margin: 0;
    display: inline-flex;
    justify-content: center;
}

.custom-field-edit-panel {
    grid-column: 1 / -1;
    margin-top: 2px;
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 16px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.custom-field-edit-panel[hidden] {
    display: none !important;
}

.custom-field-edit-panel .custom-field-config-edit-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
}

.custom-field-edit-panel .custom-field-edit-name,
.custom-field-edit-panel .custom-field-edit-help,
.custom-field-edit-panel .custom-field-edit-options {
    grid-column: span 3;
}

.custom-field-edit-panel .custom-field-config-check {
    min-height: 38px;
    justify-content: center;
}

.custom-field-edit-panel .btn-sm {
    min-height: 38px;
}

@media (max-width: 900px) {
    .custom-fields-list-panel .custom-field-config-card {
        grid-template-columns: 1fr;
    }

    .custom-field-icon-actions {
        justify-content: flex-start;
        min-width: 0;
    }

    .custom-field-edit-panel .custom-field-config-edit-form {
        grid-template-columns: 1fr;
    }

    .custom-field-edit-panel .custom-field-edit-name,
    .custom-field-edit-panel .custom-field-edit-help,
    .custom-field-edit-panel .custom-field-edit-options {
        grid-column: 1 / -1;
    }
}

/* Campos personalizados: confirmación estética y actualización inmediata */
.custom-field-delete-confirm[hidden] {
    display: none !important;
}

.custom-field-delete-confirm {
    position: fixed;
    inset: 0;
    z-index: 12080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(5px);
}

.custom-field-delete-confirm-card {
    width: min(100%, 440px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px solid rgba(220, 38, 38, 0.16);
    border-radius: 24px;
    padding: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 247, 0.98));
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}

.custom-field-delete-confirm-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(220, 38, 38, 0.22);
    background: rgba(254, 226, 226, 0.96);
    color: #b91c1c;
    font-size: 1.35rem;
    font-weight: 1000;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 34px rgba(220, 38, 38, 0.10);
}

.custom-field-delete-confirm-copy {
    display: grid;
    gap: 6px;
}

.custom-field-delete-confirm-copy span {
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 1000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.custom-field-delete-confirm-copy h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 1000;
}

.custom-field-delete-confirm-copy p {
    margin: 0;
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.45;
}

.custom-field-delete-confirm-copy p strong {
    color: #991b1b;
    font-weight: 1000;
}

.custom-field-delete-confirm-copy small {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
}

.custom-field-delete-confirm-feedback {
    grid-column: 1 / -1;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 900;
}

.custom-field-delete-confirm-feedback[data-tone="success"] {
    border: 1px solid rgba(16, 185, 129, 0.20);
    background: rgba(220, 252, 231, 0.95);
    color: #047857;
}

.custom-field-delete-confirm-feedback[data-tone="danger"],
.custom-field-delete-confirm-feedback:not([data-tone="success"]) {
    border: 1px solid rgba(220, 38, 38, 0.16);
    background: rgba(254, 226, 226, 0.92);
    color: #991b1b;
}

.custom-field-delete-confirm-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.custom-field-delete-confirm-button {
    min-width: 132px;
}

.custom-field-delete-confirm-button.is-loading {
    opacity: 0.78;
    cursor: wait;
}

.custom-field-config-card.is-removing {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

@media (max-width: 620px) {
    .custom-field-delete-confirm {
        align-items: flex-end;
        padding: 16px;
    }

    .custom-field-delete-confirm-card {
        grid-template-columns: 1fr;
        border-radius: 22px;
        padding: 18px;
    }

    .custom-field-delete-confirm-actions {
        justify-content: stretch;
        flex-direction: column-reverse;
    }

    .custom-field-delete-confirm-actions .btn,
    .custom-field-delete-confirm-button {
        width: 100%;
    }
}

/* Herramientas rápidas de llamada: Outlook, Excel y datos del cliente */
.quick-external-tools-card {
    margin: 14px 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(14, 116, 144, 0.14);
    border-radius: 24px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.11), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.96));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.quick-external-tools-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-external-tools-eyebrow {
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 1000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.quick-external-tools-copy h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.04rem;
    font-weight: 1000;
}

.quick-external-tools-copy p {
    margin: 0;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.45;
}

.quick-external-tools-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-external-tool {
    min-width: 128px;
    min-height: 58px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon meta";
    align-items: center;
    column-gap: 10px;
    border: 1px solid rgba(14, 116, 144, 0.16);
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    text-decoration: none;
    font-family: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.quick-external-tool:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 116, 144, 0.28);
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(14, 116, 144, 0.12);
}

.quick-external-tool-icon {
    grid-area: icon;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 1000;
    line-height: 1;
}

.quick-external-tool strong {
    grid-area: title;
    color: inherit;
    font-size: 0.86rem;
    font-weight: 1000;
    line-height: 1.1;
}

.quick-external-tool small {
    grid-area: meta;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
}

.quick-external-tool-outlook .quick-external-tool-icon {
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: rgba(219, 234, 254, 0.95);
    color: #1d4ed8;
}

.quick-external-tool-excel .quick-external-tool-icon {
    border: 1px solid rgba(22, 163, 74, 0.18);
    background: rgba(220, 252, 231, 0.95);
    color: #15803d;
}

.quick-external-tool-copy .quick-external-tool-icon {
    border: 1px solid rgba(14, 116, 144, 0.18);
    background: rgba(207, 250, 254, 0.95);
    color: #0e7490;
}

.quick-external-tool.is-disabled,
.quick-external-tool:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.quick-external-tools-status {
    grid-column: 1 / -1;
    justify-self: end;
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 900;
}

.quick-external-tools-status[data-tone="success"] {
    border: 1px solid rgba(16, 185, 129, 0.20);
    background: rgba(220, 252, 231, 0.94);
    color: #047857;
}

.quick-external-tools-status[data-tone="warning"] {
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: rgba(254, 243, 199, 0.94);
    color: #92400e;
}

.quick-external-tools-status[data-tone="danger"] {
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: rgba(254, 226, 226, 0.94);
    color: #991b1b;
}

@media (max-width: 980px) {
    .quick-external-tools-card {
        grid-template-columns: 1fr;
    }

    .quick-external-tools-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .quick-external-tools-card {
        border-radius: 20px;
        padding: 14px;
    }

    .quick-external-tools-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .quick-external-tool {
        width: 100%;
    }

    .quick-external-tools-status {
        justify-self: stretch;
    }
}

/* ControlOne · contador operativo de llamada */
.call-floating-timer {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 1200;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .72rem;
    width: min(430px, calc(100vw - 2rem));
    min-width: min(280px, calc(100vw - 2rem));
    max-width: min(430px, calc(100vw - 2rem));
    padding: .85rem .95rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(7, 79, 134, .98), rgba(14, 116, 144, .96));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .24), 0 0 0 1px rgba(15, 23, 42, .08);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.call-floating-timer.is-dragging,
.call-floating-timer.is-resizing {
    cursor: grabbing;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .32), 0 0 0 1px rgba(255, 255, 255, .18);
}

.call-floating-timer.has-account-link:not(.is-dragging):not(.is-resizing) {
    cursor: grab;
}

.call-floating-timer.has-account-link:not(.is-dragging):not(.is-resizing)::after {
    content: 'Clic para volver al cliente · arrastra para mover · esquina para ajustar';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: calc(100% + .45rem);
    padding: .38rem .58rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .82);
    color: #ffffff;
    font-size: .68rem;
    font-weight: 800;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.call-floating-timer.has-account-link:hover::after,
.call-floating-timer.has-account-link:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.call-floating-timer[hidden] {
    display: none !important;
}

.call-floating-timer__pulse {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 7px rgba(34, 197, 94, .18);
    animation: controlone-call-pulse 1.35s ease-in-out infinite;
}

.call-floating-timer.is-ended .call-floating-timer__pulse {
    background: #fbbf24;
    box-shadow: 0 0 0 7px rgba(251, 191, 36, .18);
    animation: none;
}

.call-floating-timer__body {
    min-width: 0;
    display: grid;
    gap: .12rem;
}

.call-floating-timer__eyebrow,
.call-floating-timer__body small {
    color: rgba(255, 255, 255, .78);
    font-size: .76rem;
    font-weight: 750;
}

.call-floating-timer__body strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .98rem;
    letter-spacing: .01em;
}

.call-floating-timer__time {
    padding: .52rem .72rem;
    min-width: 82px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}


.call-floating-timer__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.call-floating-timer__finish,
.call-floating-timer__discard {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    padding: .42rem .72rem;
    background: rgba(255, 255, 255, .92);
    color: #075985;
    font-weight: 900;
    font-size: .78rem;
    cursor: pointer;
}

.call-floating-timer__discard {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.call-floating-timer__finish:hover,
.call-floating-timer__discard:hover,
.call-floating-timer__finish:focus-visible,
.call-floating-timer__discard:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.call-floating-timer__resize {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    border-radius: 0 0 18px 0;
    cursor: nwse-resize;
    opacity: .88;
    touch-action: none;
}

.call-floating-timer__resize::before,
.call-floating-timer__resize::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 6px;
    border-right: 2px solid rgba(255, 255, 255, .72);
    border-bottom: 2px solid rgba(255, 255, 255, .72);
    border-radius: 0 0 5px 0;
}

.call-floating-timer__resize::before {
    width: 18px;
    height: 18px;
}

.call-floating-timer__resize::after {
    width: 10px;
    height: 10px;
}

.call-floating-timer__resize:hover,
.call-floating-timer.is-resizing .call-floating-timer__resize {
    opacity: 1;
}








@media (max-width: 640px) {
    .call-floating-timer {
        left: .75rem !important;
        right: .75rem !important;
        bottom: .75rem !important;
        top: auto !important;
        width: auto !important;
        max-width: none;
    }

    .call-floating-timer__resize {
        display: none;
    }

    .call-floating-timer.has-account-link::after {
        display: none;
    }
}

.call-duration-preview {
    margin: .85rem 0 1rem;
    padding: .8rem .95rem;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
    display: grid;
    gap: .18rem;
}

.call-duration-preview span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.call-duration-preview strong {
    color: #0b4f86;
    font-size: 1.02rem;
}

.call-duration-preview small {
    color: #475569;
}

.call-duration-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    min-height: 25px;
    padding: .2rem .56rem;
    border-radius: 999px;
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}

@keyframes controlone-call-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.82); opacity: .72; }
}

@media (max-width: 720px) {
    .call-floating-timer {
        right: .75rem;
        bottom: .75rem;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .call-floating-timer__time {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Control de acceso por horario */
.security-access-schedule-box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #fde68a;
    border-radius: 22px;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 58%, #eff6ff 100%);
    display: grid;
    gap: 1rem;
}

.security-access-schedule-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.security-access-schedule-head strong,
.security-user-schedule-summary strong {
    color: #78350f;
    font-weight: 900;
}

.security-access-schedule-head p,
.security-access-schedule-note,
.security-user-schedule-summary p {
    margin: .18rem 0 0;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.45;
}

.security-access-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.security-access-mode-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid #bbf7d0;
    border-radius: 18px;
    background: #f0fdf4;
    cursor: pointer;
}

.security-access-mode-card-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.security-access-mode-card input {
    margin-top: .18rem;
    accent-color: #0b4f86;
}

.security-access-mode-card strong {
    display: block;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 900;
}

.security-access-mode-card p {
    margin: .2rem 0 0;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.35;
}

.security-access-schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.security-access-schedule-grid.is-disabled {
    opacity: .58;
}

.security-access-day-row {
    min-width: 0;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .84);
    display: grid;
    grid-template-columns: minmax(105px, .65fr) minmax(0, 1.35fr);
    gap: .75rem;
    align-items: center;
}

.security-access-day-toggle {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 900;
}

.security-access-day-toggle input[type="checkbox"] {
    accent-color: #0b4f86;
}

.security-access-day-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.security-access-day-times label {
    min-width: 0;
    display: grid;
    gap: .25rem;
}

.security-access-day-times small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.security-access-day-times input[type="time"] {
    min-height: 38px;
    padding: .42rem .55rem;
    font-size: .82rem;
}

.security-access-day-error {
    grid-column: 1 / -1;
}

.security-user-schedule-summary {
    margin-top: 1rem;
    padding: .95rem;
    border: 1px solid #e0f2fe;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
}

.security-user-schedule-mini-grid {
    margin-top: .8rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.security-user-schedule-mini-grid span {
    padding: .65rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    display: grid;
    gap: .18rem;
}

.security-user-schedule-mini-grid span.is-enabled {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.security-user-schedule-mini-grid span.is-disabled {
    opacity: .62;
    background: #f8fafc;
}

.security-user-schedule-mini-grid small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.security-user-schedule-mini-grid strong {
    color: #0f172a;
    font-size: .8rem;
}

@media (max-width: 920px) {
    .security-access-mode-grid,
    .security-access-schedule-grid,
    .security-user-schedule-mini-grid {
        grid-template-columns: 1fr;
    }

    .security-access-day-row {
        grid-template-columns: 1fr;
    }
}

/* ControlOne · selector de hoja de cálculo local */
.quick-spreadsheet-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 20px;
    padding: 14px;
    background: rgba(240, 253, 250, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.quick-spreadsheet-panel[hidden] {
    display: none !important;
}

.quick-spreadsheet-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-spreadsheet-panel-head div {
    display: grid;
    gap: 3px;
}

.quick-spreadsheet-panel-head strong {
    color: #0f172a;
    font-size: 0.93rem;
    font-weight: 1000;
}

.quick-spreadsheet-panel-head span,
.quick-spreadsheet-config p {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.4;
}

.quick-spreadsheet-close {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 1000;
    line-height: 1;
}

.quick-spreadsheet-actions,
.quick-spreadsheet-path-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-spreadsheet-config {
    display: grid;
    gap: 8px;
}

.quick-spreadsheet-config label {
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 1000;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.quick-spreadsheet-path-row input {
    min-width: min(420px, 100%);
    flex: 1 1 360px;
    border: 1px solid rgba(14, 116, 144, 0.18);
    border-radius: 14px;
    padding: 9px 11px;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
    outline: none;
    background: rgba(255, 255, 255, 0.98);
}

.quick-spreadsheet-path-row input:focus {
    border-color: rgba(14, 116, 144, 0.42);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.quick-spreadsheet-config p {
    margin: 0;
}

@media (max-width: 620px) {
    .quick-spreadsheet-panel-head,
    .quick-spreadsheet-actions,
    .quick-spreadsheet-path-row {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-spreadsheet-path-row input,
    .quick-spreadsheet-actions .btn,
    .quick-spreadsheet-path-row .btn {
        width: 100%;
    }

    .quick-spreadsheet-close {
        align-self: flex-end;
    }
}

/* ControlOne · lista local de documentos permitidos */
.quick-spreadsheet-file-list {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 16px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.quick-spreadsheet-file-list[hidden] {
    display: none !important;
}

.quick-spreadsheet-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.quick-spreadsheet-file-item:hover {
    border-color: rgba(14, 116, 144, 0.28);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.quick-spreadsheet-file-item strong {
    font-size: 0.82rem;
    font-weight: 950;
}

.quick-spreadsheet-file-item span,
.quick-spreadsheet-empty {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.quick-spreadsheet-empty {
    padding: 8px 4px;
}