:root {
    --texto-body:#1e293b;
    --neutral:#fff;
    --disabled-btn-bg:#f1f5f9;
    --disabled-btn-color:#94a3b8;
    --disabled-btn-border:#f1f5f9;
    --soc-sidebar-bg: #006d4e;
    --soc-header-bg: #fff;
    --soc-browser-toolbar-strip: #006d4e;
    --soc-header-text-color: #ffffff;
    --heatmap-0: #f1f5f9;
    --heatmap-1: #c6f0e2;
    --heatmap-2: #6ee7b7;
    --heatmap-3: #0b8261;
    --heatmap-4: #006d4e;
    --soc-page-title-color: #006d4e;
    --soc-modal-title-color: #0b7d62;
    --soc-link-color: #0b8261;
    --color-primario:#006D4E;
    --color-primario-400:#1E8A6B;
    --color-primario-700:#00412F;
    --color-verdeSecundario:#6ee7b7;
    --color-secundario: #4ade80;
    --color-secundario-100:#DCF6E4;
    --color-secundario-05:#EDFAF1;
    --color-rosaSoc:#f08cb9;
    --color-naranjaSoc:#ed694b;
    --color-azulSoc:#38bdf8;
    --color-azulSocSecundario:#0ea5e9;
    --colorRojoSoc:#ff4f4f;
    --highdmin-nav-link-hover-color: #6ee7b7 !important;
    /* Guía botones (primario / secundario, pill) */
    --soc-btn-primary: #0b8261;
    --soc-btn-primary-hover: #005f45;
    --soc-btn-primary-disabled-bg: #a7e0c8;
    --soc-btn-primary-disabled-border: #a7e0c8;
    --soc-btn-secondary-fg: #4ED176;
    --soc-btn-secondary-border: #0b8261;
    --soc-btn-secondary-hover-fg: #005f45;
    --soc-btn-secondary-hover-border: #005f45;
    --soc-btn-secondary-disabled-fg: #a7e0c8;
    --soc-btn-secondary-disabled-border: #c6f0e2;
    --soc-btn-radius: 8px;
    --soc-btn-pill-radius: 8px;
    --soc-btn-shadow: 0 1px 3px rgba(30, 41, 59, 0.12), 0 1px 2px rgba(30, 41, 59, 0.08);
    --soc-btn-shadow-hover: 0 4px 10px rgba(30, 41, 59, 0.16), 0 2px 4px rgba(30, 41, 59, 0.10);
    --soc-btn-transition: all 0.18s ease;
    /* Botón Editar — verde tint limpio */
    --soc-btn-edit-bg: #eefaf5;
    --soc-btn-edit-border: #c6f0e2;
    --soc-btn-edit-fg: #006d4e;
    --soc-btn-edit-hover-bg: #d3f3e6;
    --soc-btn-edit-hover-border: #a7e0c8;
    --soc-btn-edit-hover-fg: #006d4e;
    --soc-btn-edit-disabled-bg: #f2fbf8;
    --soc-btn-edit-disabled-border: #e3f6ee;
    --soc-btn-edit-disabled-fg: #94a3b8;
    /* Desactivar */
    --soc-btn-deactivate: #ef4444;
    --soc-btn-deactivate-hover: #dc2626;
    --soc-btn-deactivate-disabled-bg: #fecaca;
    --soc-btn-deactivate-disabled-border: #fca5a5;
    /*Empty state*/
    --icon-color-empty-state:#006D4E;
    --bg-icon-color-empty-state:#EDFAF1;
    
    
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Thin.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Book.otf") format("opentype");
    font-weight: 450;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Medium.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Bold.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "CircularXX";
    src: url("../fonts/Circular/CircularXX-ExtraBlack.otf") format("opentype");
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}
/**HELPER`S**/
html {
    /* Color al “rebote” del scroll; ayuda a Safari a relacionar la página con la marca */
    background-color: var(--soc-browser-toolbar-strip, #006d4e);
}

body{
    font-family: "CircularXX", sans-serif;
}
a {
    text-decoration: none;
}

/* Enlaces de contenido (configurable en Apariencia). Excluye botones y estilos Telerik tipo .k-link */
.soc-app-links a:not([class*="btn"]):not(.k-link):not(.k-button):not(.k-picker),
.soc-app-links .btn-link,
.modal a:not([class*="btn"]):not(.k-link):not(.k-button):not(.k-picker),
.modal .btn-link,
.soc-login-page a:not([class*="btn"]),
.soc-login-page .btn-link,
.soc-ui-appearance-page a:not([class*="btn"]),
.soc-ui-appearance-page .btn-link {
    color: var(--soc-link-color, #0b8261);
}

.soc-app-links a:not([class*="btn"]):not(.k-link):not(.k-button):not(.k-picker):hover,
.soc-app-links .btn-link:hover,
.modal a:not([class*="btn"]):not(.k-link):not(.k-button):not(.k-picker):hover,
.modal .btn-link:hover,
.soc-login-page a:not([class*="btn"]):hover,
.soc-login-page .btn-link:hover,
.soc-ui-appearance-page a:not([class*="btn"]):hover,
.soc-ui-appearance-page .btn-link:hover {
    color: color-mix(in srgb, var(--soc-link-color, #0b8261) 78%, #000000);
}

.soc-login-page .btn-link {
    font-weight: 500;
}
svg{
    width: inherit !important;
    height: auto !important;
}

.bg-soc{
    background-color: var(--color-primario);
}
.page-content{
    min-height: 100vh;
}
.footer{
    padding: 0px !important;
}
.boldSoc{
    color: var(--color-primario);
    font-weight: 600;
}
.text-verde{
    color: var(--color-primario);
}
.center{
    text-align: center;
}
.mt-10{
    margin-top: 10px;
}
.mt-3{
    margin-top: 30px;
}
.r-20{
    margin-right: 10px;
}
.mt-buscar{
    margin-top: 29px;
}
.align-right{
    text-align: right;
}
.left-check{
    padding-left: 50px;
}
.p-20{
    padding: 20px;
}
.card{
    background-color: #ffffff;
    border: 1px solid #ededed;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
}
.btn-guardar{
    background-color: #eefaf5;
    border: 1px solid #a7e0c8;
    border-radius: 8px;
    color: #006d4e;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 9px 20px;
    margin: 10px;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08);
    transition: var(--soc-btn-transition);
}
.btn-guardar:hover:not(:disabled) {
    background-color: #d3f3e6;
    border-color: #6ee7b7;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.20);
    transform: translateY(-1px);
}
.btn-guardar:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08);
}
.btn-cancelar{
    background-color: #ef4444;
    border: 1px solid #ef4444;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 9px 20px;
    margin: 10px;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.20);
    transition: var(--soc-btn-transition);
}
.btn-cancelar:hover:not(:disabled) {
    background-color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.28);
    transform: translateY(-1px);
}
.btn-cancelar:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.20);
}
.texto-secundario{
    color: #6c6c6c;
    font-size: 13px;
}
.h-auto{
    height: auto;
}

/**LOADER***/
.contentLoader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.iconoLoader {
    width: 80px; 
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/**LOGIN**/
.auth-bg {
    background-color: #006d4e !important;
}
.text-description{
    text-align: center !important;
    font-size: 13px !important;
    color: #717171 !important;
    padding: 0px !important;
}
.content-form{
    background-color: #ffffff !important;
}
.recuperar-contraseña {
    color: #6ee7b7 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: underline;
}
/**TOP NAV**/
.page-container {
    --highdmin-gutter-x: 0px !important;
    padding: 0px !important;
}
.logotipoSistema{
    color: #006d4e;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0px;
    padding: 0 20px;
}
.logotipoSistema small{
    color: #3aa6ff;
    font-weight: 600;
    font-size: 14px;
}
/********Telerik*******/
.titulo-tabla{
    color: var(--soc-page-title-color, #006d4e);
    font-size: 17px;
    font-weight: 500;
}
.k-link{
    background-color: #006d4e;
    color: #ffffff !important;
    font-weight: 500;
}
.k-link:hover{
    background-color: #006d4e;
    color: #ffffff !important;
}
.k-grid-filter-row input {
    color: black;        
    caret-color: black;    
    background-color: white; 
}
.matriz-thead {
    background-color: #006d4e;
    color: #ffffff;
    font-weight: 800;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.matriz-thead div{
    border: 1px solid #ebebeb;
    padding-left: 10px;
}
.matriz{
    border: 1px solid #ebebeb;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.bg-bandeja-operativa{
    background-color: #f8f8f8;
    font-size: 14px;
    font-weight: 500;
}
.bandejas-operativas{
    border: 1px solid #ebebeb;
    padding-left: 10px;
    height: 50px;
}
.bandejas-operativas strong{
    color: #006d4e;
}
.iconoCheck{
    margin-top: 10px;
    width: 25px;
}
.no-aplica{
    background: #f8f8f8;
    color: #6c6c6c;
    font-size: 13px;
    height: 50px;
    display: flex;
    justify-content: center;     
    align-items: center;    
    text-align: center;
}
.k-checkbox-wrap{
    margin-top: 10px;
}
.k-checkbox {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    padding: 3px !important;
}
.k-checkbox:checked,
.k-checkbox.k-checked {
    background-color: #0f8868 !important;
    border-color: #0f8868 !important;
}
.k-checkbox:checked::before {
    color: #ffffff;
}
.k-checkbox:hover {
    border-color: #0f8868;
}
.k-checkbox:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
/****Tabla usuarios******/
.estado-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.nombre-tabla{
    color: #0f8868;
    font-weight: 800;
}
/* ================================================================
   BOTONES SOC — Soft Elevation
   SfButton (Syncfusion) renderiza como <button class="e-btn ...">
   Por eso los selectores usan "button.clase-soc" en lugar de ".k-button"
   ================================================================ */

/* ── btn-soc-primary: hereda el look de .soc-ficha-action-btn.is-primary ── */
button.btn-soc-primary,
input[type="submit"].btn-soc-primary {
    background-color: #0b8261 !important;
    border: 1px solid var(--color-primario) !important;
    color: #ffffff !important;
    border-radius: var(--soc-btn-radius) !important;
    font-weight: 450 !important;
    cursor: pointer !important;
    padding: 7px 20px !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08) !important;
    transition: var(--soc-btn-transition) !important;
    height: 38px;
}

button.btn-soc-primary:hover:not(:disabled),
input[type="submit"].btn-soc-primary:hover:not(:disabled) {
    background-color: var(--color-primario-400) !important;
    border-color: var(--color-primario) !important;
    color: var(--neutral) !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08) !important;
    transform: none !important;
}

button.btn-soc-primary:active:not(:disabled),
input[type="submit"].btn-soc-primary:active:not(:disabled) {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08) !important;
}

button.btn-soc-primary:disabled,
input[type="submit"].btn-soc-primary:disabled {
    background-color: var(--disabled-btn-bg) !important;
    border-color: var(--disabled-btn-border) !important;
    color: var(--disabled-btn-color) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── btn-soc-edit: Editar en grids ── */
button.btn-soc-edit {
    background-color: var(--soc-btn-edit-bg) !important;
    border: 1px solid var(--soc-btn-edit-border) !important;
    color: var(--soc-btn-edit-fg) !important;
    border-radius: var(--soc-btn-radius) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08) !important;
    transition: var(--soc-btn-transition) !important;
}

button.btn-soc-edit:hover:not(:disabled) {
    background-color: var(--soc-btn-edit-hover-bg) !important;
    border-color: var(--soc-btn-edit-hover-border) !important;
    color: var(--soc-btn-edit-hover-fg) !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.20) !important;
    transform: translateY(-1px) !important;
}

button.btn-soc-edit:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08) !important;
}

button.btn-soc-edit:disabled {
    background-color: var(--soc-btn-edit-disabled-bg) !important;
    border-color: var(--soc-btn-edit-disabled-border) !important;
    color: var(--soc-btn-edit-disabled-fg) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── soc-btn-personal: Personal, Cambiar contraseña, terciarios ── */
button.soc-btn-personal {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: var(--soc-btn-radius) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06) !important;
    transition: var(--soc-btn-transition) !important;
}

button.soc-btn-personal:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
    box-shadow: 0 3px 8px rgba(30, 41, 59, 0.10) !important;
    transform: translateY(-1px) !important;
}

button.soc-btn-personal:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06) !important;
}

button.soc-btn-personal:disabled {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── btn-soc-secondary: Cerrar, Cancelar ── */
button.btn-soc-secondary {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: var(--soc-btn-radius) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 7px 20px !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06) !important;
    transition: var(--soc-btn-transition) !important;
}

button.btn-soc-secondary:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
    box-shadow: 0 3px 8px rgba(30, 41, 59, 0.10) !important;
    transform: translateY(-1px) !important;
}

button.btn-soc-secondary:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06) !important;
}

button.btn-soc-secondary:disabled {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── btn-soc-deactivate: Desactivar ── */
button.btn-soc-deactivate {
    background-color: var(--soc-btn-deactivate) !important;
    border: 1px solid var(--soc-btn-deactivate) !important;
    color: #ffffff !important;
    border-radius: var(--soc-btn-radius) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.25) !important;
    transition: var(--soc-btn-transition) !important;
}

button.btn-soc-deactivate:hover:not(:disabled) {
    background-color: var(--soc-btn-deactivate-hover) !important;
    border-color: var(--soc-btn-deactivate-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.30) !important;
    transform: translateY(-1px) !important;
}

button.btn-soc-deactivate:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.25) !important;
}

button.btn-soc-deactivate:disabled {
    background-color: var(--soc-btn-deactivate-disabled-bg) !important;
    border-color: var(--soc-btn-deactivate-disabled-border) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: not-allowed;
    box-shadow: none;
}

.boton-regresar{
    background-color: transparent !important;
    border: none !important;
    color: #ff4f4f !important;
    font-weight: 500;
}

/* ================= Catálogo de Bancos ================= */
.soc-banks-page .soc-banks-grid {
    background: #ffffff;
    border: 1px solid #e3e7ec;
    border-radius: 6px;
}

.soc-bank-badge-active {
    background-color: var(--soc-page-title-color, #006d4e) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.soc-bank-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
}

.soc-bank-actions .soc-bank-link {
    color: var(--soc-page-title-color, #006d4e);
    font-weight: 600;
    cursor: default;
    text-decoration: none;
    font-size: 13px;
}

.soc-bank-actions .soc-bank-link:hover {
    text-decoration: underline;
}

.soc-bank-actions .sep {
    color: #9aa3ad;
    margin: 0 6px;
    user-select: none;
}

.soc-bank-detail {
    margin: 8px 8px 12px 32px;
    padding: 14px 16px;
    background: #fafbfc;
    border-left: 3px solid var(--soc-page-title-color, #006d4e);
    border-radius: 0 8px 8px 0;
}

.soc-bank-detail-title {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--soc-page-title-color, #006d4e);
}

.soc-bank-detail-thead {
    background: #eceef2;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 13px;
    color: #3a424a;
    border-radius: 4px 4px 0 0;
}

.soc-bank-detail-row {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e3e7ec;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.soc-bank-input:focus {
    border-color: var(--soc-page-title-color, #006d4e);
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.18);
}


:root {
    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #4723D9;
    --first-color-light: #AFA5D9;
    --white-color: #F7F6FB;
    --body-font: "CircularXX", sans-serif;
    --bs-body-font-family: "CircularXX", sans-serif;
    --bs-font-sans-serif: "CircularXX", sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
}
*,::before,::after {
    box-sizing: border-box;
}

body{
    background-color: #f8fafc;
}

/* ================= Navigation Items (page styling) ================= */
.navigation-items-page{
    padding:20px 24px 40px;
}

.navigation-items-page .card{
    margin: 0;
}

.navigation-items-page .btn-soc-link{
    background: transparent;
    border: none;
    color: #006d4e;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
}

.navigation-items-page .btn-soc-danger{
    color: #ff4f4f;
}

.navigation-items-page .table-soc{
    margin-bottom: 0;
}

.navigation-items-page .table-soc thead th{
    background-color: #006d4e;
    color: #ffffff;
    font-weight: 800;
    border-color: #006d4e;
}

.navigation-items-page .table-soc tbody td{
    vertical-align: middle;
    color: #515151;
}

.navigation-items-page .table-actions{
    white-space: nowrap;
}

.navigation-items-page .modal-content{
    border-radius: 12px;
}

.navigation-items-page .modal-actions{
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}
.container_logOut_icon svg{
    color: var(--color-primario);
}
/* Títulos de modales Bootstrap */
.modal-title {
    color: var(--soc-modal-title-color, #0b7d62);
}

/* Ventanas Telerik (título) — incluye .soc-tenant-window y otras */
.k-window-title {
    color: var(--soc-modal-title-color, #0b7d62);
}

/* ================= Tenants modal (TelerikWindow) ================= */
.soc-tenant-window .k-window-titlebar{
    border-bottom: 1px solid #d9dde3;
    padding: 16px 20px;
}

.soc-tenant-window .k-window-title{
    font-weight: 800;
    color: var(--soc-modal-title-color, #0b7d62);
}

.soc-tenant-window .k-window-content{
    background: #eceef2;
    padding: 14px;
}

.soc-tenant-window-body{
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    max-width: 460px;
    margin: 0 auto;
}

.soc-tenant-window .form-label{
    font-weight: 500;
    color: #606774;
    margin-bottom: 6px;
}

.soc-tenant-control{
    width: 100%;
}

.soc-tenant-window .k-input,
.soc-tenant-window .k-input-inner,
.soc-tenant-window .k-picker-md,
.soc-tenant-window .k-picker{
    border-radius: 6px;
}

.soc-tenant-window .modal-actions{
    justify-content: flex-start;
    gap: 10px;
}

.soc-tenant-logo-preview-wrap{
    margin-top: 10px;
}

.soc-tenant-logo-preview{
    max-height: 48px;
    max-width: 220px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    padding: 4px 8px;
}

/* ================= Tenants grid ================= */
.soc-tenants-grid{
    background: #ffffff;
    border: 1px solid #d9dde3;
    border-radius: 4px;
}

.soc-tenants-grid .k-grid-header{
    background: #ffffff;
    border-bottom: 1px solid #dde2e8;
}

.soc-tenants-grid .k-grid-header th{
    font-weight: 800;
    color: #2f3642;
    font-size: 14px;
    border-right: none;
}

.soc-tenants-grid .k-grouping-header{
    background: #ffffff;
    border-bottom: 1px solid #e3e7ec;
}

.soc-tenants-grid .k-table-row td{
    color: #2e3137;
    border-top: 1px solid #eef1f5;
    font-size: 14px;
}

.soc-tenants-grid .k-grouping-row td{
    background: #f8fafc;
    font-weight: 500;
    color: #4a5568;
}


.soc-tenants-grid .k-pager{
    border-top: 1px solid #dfe4ea;
    background: #ffffff;
}

.soc-branches-block{
    border-left: 3px solid #0f8868;
    padding: 8px 0 0 14px;
    margin: 0 0 2px 8px;
}

.soc-branches-title{
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 800;
    color: #006d4e;
    letter-spacing: 0.5px;
}

.soc-branches-grid .k-grid-header th{
    font-size: 13px;
}

/* ================= Register User ================= */
.register-user-page{
    padding: 0 20px 40px 20px;
}

.register-user-page .register-user-actions{
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.register-user-page .card{
    margin: 0;
}

.register-user-page .table-soc{
    margin-bottom: 0;
}

.register-user-page .table-soc thead th{
    background-color: #006d4e;
    color: #ffffff;
    font-weight: 800;
    border-color: #006d4e;
}

.register-user-page .table-soc tbody td{
    vertical-align: middle;
    color: #515151;
}

.register-user-page .modal-actions{
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.register-user-page .modal-content{
    border-radius: 12px;
}

#body-pd {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s;
}

/* ================= HEADER ================= */
.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    /* Fondo verde SOC fijo: Safari en macOS muestrea este color para teñir el chrome del navegador */
    background:var(--neutral);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: var(--z-fixed);
    transition: .5s;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.header_toggle {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--soc-header-text-color, #ffffff);
}

.header_img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
}

.header_img img {
    width: 40px;
}
/* ================= HEADER LAYOUT ================= */
.header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-left {
    flex: 0 0 48px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-logo {
    flex: 0 0 auto;
}
.header-spacer {
    flex: 1;
}
.header-notifications {
    display: flex;
    align-items: center;
}
.logoHeader{
    font-size: 20px;
}
.version{
    font-size: 15px;
    color: #3aa6ff;
}
/* empuja contenido a la derecha */
.header-spacer {
    flex: 1;
}

/* derecha */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-action {
    color: var(--soc-header-text-color, #ffffff);
    font-size: 14px;
    cursor: pointer;
}
/* ================= LOGOTIPO ================= */
.logotipoSistema {
    margin: 0;
    line-height: 1.1;
}

.loaderSoc{
    width: 150px;
    display: block;
}
/* ================= SIDEBAR ================= */
.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background: var(--soc-sidebar-bg, #006d4e);
    padding: .15rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "CircularXX", sans-serif;
    padding-left: 20px;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
}

.nav_logo {
    margin-bottom: 2px;
    /* Reduce el alto del logo para que el bloque de usuario suba */
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.nav_link {
    position: relative;
    color: #ffffff;
    transition: .3s;
}

.nav_link:hover,
.active {
    color: #4ade80;
}

.nav_icon {
    font-size: 1.25rem;
}

/* ================= TOGGLE ================= */
.show {
    left: 0;
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

.l-navbar {
    background-color: var(--soc-sidebar-bg, #006d4e)!important;
}

.iconoLogo{
    width: 25px;
    display: inline-block;
    margin-top: 5px;
}

.logoSistema{
    width: 140px;
    display: none;
}

/* Expandido */
.l-navbar.show .iconoLogo{
    display: none;
}

.l-navbar.show .logoSistema{
    display: inline-block;
}

/* Animación suave */
.iconoLogo,
.logoSistema{
    transition: opacity .3s ease, transform .3s ease;
}

/* ================= LINKS ================= */
.nav_icon{
    color: #ffffff;
}

.nav_name{
    color: #ffffff;
}

.active {
    color: #4ade80 !important;
}

.active::before {
    background-color: #4ade80 !important;
}

#header-toggle{
    color: var(--soc-header-text-color, #ffffff) !important;
    font-size: 35px !important;
}

.iconoSalir{
    width: 25px;
}

.nav_logo{
    padding-left: 0px;
}

.nav_link{
    padding-left: 0px;
}

/* ================= DESKTOP ================= */
@media screen and (min-width: 768px) {

    #body-pd {
        padding-left: calc(var(--nav-width) + 2rem);
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding-left: calc(var(--nav-width) + 2rem);
    }

    .header_img {
        width: 40px;
        height: 40px;
    }

    .header_img img {
        width: 45px;
    }

    /* Posición horizontal del sidebar: ver bloque "Layout fix" al final del archivo */

    .show {
        width: calc(var(--nav-width) + 175px);
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px);
    }
}

/* ================= MAIN ================= */
#body-pd {
    margin-top: var(--header-height);
    transition: .5s;
}

#body-pd.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

.header.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

/* ================= DESKTOP PUSH ================= */
@media screen and (min-width: 768px) {

    #body-pd.body-pd {
        padding-left: calc(var(--nav-width) + 188px);
    }

    .header.body-pd {
        padding-left: calc(var(--nav-width) + 188px);
    }
}

/* ================= ANIMACIONES ================= */
.nav_name {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .3s ease, transform .3s ease;
    white-space: nowrap;
}

.l-navbar.show .nav_name {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .15s; 
    font-size: 13px;
    font-family: "CircularXX", sans-serif;
    font-weight: 600;
}

.nav_link {
    overflow: hidden;
}

.nav_logo-name {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .3s ease, transform .3s ease;
}

.l-navbar.show .nav_logo-name {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .15s;
}

.main-content{
    margin-top: 100px !important;
}

/* ================= SUBMENU ================= */
.nav-list{
    border-bottom: 1px solid #ebebeb;
}
.nav_item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
}

.nav_link_toggle {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
}

.nav_arrow {
    font-size: 1rem;
    transition: transform 1s ease;
}

.nav_submenu {
    max-height: 0;
    overflow: hidden;
    padding-left: 35px;
    margin: 0 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height .4s ease,
        opacity .3s ease,
        transform .3s ease;
}
.nav_item.open > .nav_submenu {
    max-height: 60vh;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
}

.nav_submenu li{
    list-style: none;
}

.nav_sublink {
    display: block;
    padding: .4rem 0;
    font-size: .9rem;
    color: #515151;
    opacity: .85;
    transition: 1s;
    font-size: 13px;
}

.nav_sublink:hover {
    opacity: 1;
    color: #006d4e;
}

.nav_item.open > .nav_submenu {
    background-color: #006d4e;
    max-height: 60vh;
    overflow-y: auto;
}

.nav_item.open > .nav_link_toggle > .nav_arrow {
    transform: rotate(180deg);
}

/* ================= SYNCFUSION NAV TREE (menú lateral) ================= */
.soc-nav-tree.e-treeview {
    background: transparent;
    border: none;
    padding: 0;
    font-family: "CircularXX", sans-serif;
}

.soc-nav-tree .e-list-parent {
    padding-left: 0;
}

.soc-nav-tree .e-ul {
    background-color: #006d4e;
    padding-left: 0;
}

.soc-nav-tree .e-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.soc-nav-tree .e-list-item > .e-fullrow {
    background: transparent;
    border: none;
}

.soc-nav-tree .e-list-item > .e-text-content {
    padding: .5rem 0 .5rem 1.5rem;
    color: #ffffff;
}

.soc-nav-tree .e-list-item > .e-text-content .e-list-text,
.soc-nav-tree .e-list-item > .e-text-content a.e-list-text {
    color: #ffffff;
    font-size: 13px;
    opacity: .85;
}

.soc-nav-tree .e-list-item:not(.e-level-1) > .e-text-content .e-list-text,
.soc-nav-tree .e-list-item:not(.e-level-1) > .e-text-content a.e-list-text {
    opacity: 1;
}

.soc-nav-tree .e-list-item > .e-text-content:hover .e-list-text,
.soc-nav-tree .e-list-item > .e-fullrow:hover ~ .e-text-content .e-list-text {
    color: #4ade80;
    opacity: 1;
}

.soc-nav-tree .e-list-icon {
    font-size: 1.25rem;
    color: #ffffff;
    margin-right: 1rem;
}

.soc-nav-tree .e-icon-expandable,
.soc-nav-tree .e-icon-collapsible {
    color: #ffffff;
    font-size: 1rem;
}

/* Estados hover/foco/seleccionado del tema Bootstrap5 de Syncfusion (blanco/azul por defecto)
   sustituidos por el mismo criterio verde+lima ya usado en el resto del sidebar (.active/.nav_link:hover). */
.soc-nav-tree.e-treeview .e-list-item.e-hover > .e-fullrow,
.soc-nav-tree.e-treeview .e-list-item.e-node-focus > .e-fullrow,
.soc-nav-tree.e-treeview .e-list-item.e-active > .e-fullrow,
.soc-nav-tree.e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
.soc-nav-tree.e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow,
.soc-nav-tree.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
.soc-nav-tree.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content,
.soc-nav-tree.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active > .e-text-content,
.soc-nav-tree.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
.soc-nav-tree.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
    background-color: transparent !important;
    border-color: transparent !important;
}

.soc-nav-tree .e-list-item.e-hover > .e-text-content,
.soc-nav-tree .e-list-item.e-node-focus > .e-text-content,
.soc-nav-tree .e-list-item.e-active > .e-text-content,
.soc-nav-tree .e-list-item.e-active.e-hover > .e-text-content,
.soc-nav-tree .e-list-item.e-active.e-node-focus > .e-text-content {
    color: #4ade80 !important;
}

.soc-nav-tree .e-list-item.e-hover > .e-text-content .e-list-text,
.soc-nav-tree .e-list-item.e-node-focus > .e-text-content .e-list-text,
.soc-nav-tree .e-list-item.e-active > .e-text-content .e-list-text,
.soc-nav-tree .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
.soc-nav-tree .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
    color: #4ade80 !important;
    opacity: 1;
}

.soc-nav-tree .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
.soc-nav-tree .e-list-item.e-hover > .e-text-content .e-icon-expandable,
.soc-nav-tree .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
.soc-nav-tree .e-list-item.e-node-focus > .e-text-content .e-icon-expandable,
.soc-nav-tree .e-list-item.e-active > .e-text-content .e-icon-collapsible,
.soc-nav-tree .e-list-item.e-active > .e-text-content .e-icon-expandable {
    color: #4ade80 !important;
}

.logoUsuario{
    border-radius: 50%;
    width: 30px;
    vertical-align: middle;
}
.usuario{
    background-color: #006d4e;
    color: #ffffff;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
}
.usuario {
    transition: opacity .3s ease, transform .3s ease;
}

/* Asegura que el texto del usuario se vea sobre el fondo verde */
.usuario .nav_name,
.usuario strong{
    color: #ffffff !important;
}
.l-navbar:not(.show) .usuario {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}
/* Sidebar colapsado */
.l-navbar:not(.show) .nav_name,
.l-navbar:not(.show) .nav_arrow {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =========================================================
   TEMA GLOBAL ESTILO EJEMPLO (layout completo)
========================================================= */

#header {
    height: 72px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.header-left {
    flex: 0 0 46px;
}

.header-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
    /* Mantener colores originales del logo cargado */
    filter: none;
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-title {
    margin: 0;
    color: var(--color-primario);
    font-size: 30px;
    line-height: 1;
    font-weight: 500;
}

.header-actions {
    gap: 10px;
    font-size: 12px;
    color: var(--color-primario);
}

.header-user {
    color: var(--color-primario); 
}

.header-bell {
    font-size: 20px;
    line-height: 1;
    display: block;
    color: var(--color-primario);
}

/* ===== LOGOUT - PUERTA ANIMADA ===== */
.logout-door-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--soc-header-text-color, #ffffff);
    position: relative;
    padding: 4px 6px;
}

.door-scene {
    width: 26px;
    height: 34px;
    perspective: 140px;
    position: relative;
}

.door-frame-outer {
    position: absolute;
    inset: 0;
    border: 2.5px solid currentColor;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
}

.door-frame-outer::after {
    content: '';
    position: absolute;
    bottom: -2.5px;
    left: -2.5px;
    right: -2.5px;
    height: 3px;
    background: currentColor;
    border-radius: 0 0 2px 2px;
}

.door-panel {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid currentColor;
    border-radius: 1px;
    transform-origin: left center;
    transform: rotateY(-62deg);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-door-btn:hover .door-panel {
    transform: rotateY(0deg);
}

.door-handle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
}

#body-pd {
    margin-top: 72px;
    padding-right: 12px;
}

.main-content {
    margin-top: 72px !important;
    background: #f5f7f6;
    min-height: calc(100vh - 72px);
    padding-bottom: 18px;
}

.l-navbar {
    top: 72px;
    height: calc(100vh - 72px);
    background: var(--soc-sidebar-bg, #006d4e) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    padding-top: 10px;
}

.nav {
    padding-left: 10px;
    padding-top: 0;
}

.usuario {
    position: relative;
    background: var(--soc-sidebar-bg, #006d4e);
    border-radius: 0;
    margin: 0 0 0 -10px;
    width: calc(100% + 10px);
    min-height: 72px;
    padding: 10px 40px 10px 22px;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.usuario .logoUsuario {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.usuario .soc-user-photo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.soc-staff-photo-preview {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #006d4e;
    display: block;
    margin: 0 auto;
}

.soc-staff-photo-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 2px dashed #ced4da;
}

.soc-staff-photo-placeholder i {
    font-size: 2.5rem;
    color: #adb5bd;
}

.soc-user-welcome {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.92;
    margin-bottom: 2px;
}

.soc-user-name {
    display: block;
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 2px;
}

.soc-user-role {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0.92;
    font-weight: 400;
}

.soc-user-role-label {
    display: inline-block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 2px 8px;
    color: #ffffff;
}

.usuario .soc-user-welcome,
.usuario .soc-user-role {
    color: #ffffff !important;
}

.usuario .soc-user-name {
    color: #ffffff !important;
}

.nav_item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav_link {
    border-radius: 6px;
    margin-right: 8px;
}

.nav_link:hover,
.nav_item.open > .nav_link {
    background: rgba(0, 0, 0, 0.12);
    color: #ffffff;
}

.nav_sublink {
    color: #ffffff;
}

.nav_submenu .nav_sublink:hover {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1;
}

.nav_subicon {
    margin-right: 8px;
    font-size: 15px;
    vertical-align: middle;
}

.nav_item.open > .nav_submenu {
    background: var(--soc-sidebar-bg, #006d4e);
    border-radius: 0 0 6px 6px;
}

.card,
.k-card,
.k-grid,
.k-tilelayout-item {
    border-radius: 8px !important;
    border: 1px solid #e3e8eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.k-grid-header,
.k-table-thead {
    background: #f6f8f9 !important;
}

@media (max-width: 992px) {
    .header-title {
        font-size: 22px;
    }

    .header-logo-img {
        height: 34px;
    }

    .header-logo-img.is-tinted {
        width: 138px;
    }

    .header-user {
        display: none;
    }
}

.header-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.header-bell-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #f44336;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    min-width: 14px;
    height: 14px;
    border-radius: 50%;
    text-align: center;
    font-weight: 500;
}

/* ── Animación al llegar una alerta nueva ─────────────────────────────────── */
.header-bell-wrap--ring .header-bell {
    animation: soc-bell-ring 0.55s ease-in-out 2;
    transform-origin: 50% 0%;
}

.header-bell-wrap--ring .header-bell-badge {
    animation: soc-bell-badge-pulse 1.1s ease-out 1;
}

@keyframes soc-bell-ring {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-18deg); }
    30% { transform: rotate(14deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
    90% { transform: rotate(2deg); }
}

@keyframes soc-bell-badge-pulse {
    0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.65); }
    70% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}

/* Dashboard clone */
.soc-dashboard {
    padding: 0 12px 16px;
}

.soc-dashboard-title {
    margin: 4px 0 10px;
    color: var(--soc-page-title-color, #0b6f54);
    font-size: 22px;
    font-weight: 500;
}

.soc-dashboard-subtitle {
    margin: 18px 0 10px;
    color: var(--soc-page-title-color, #0b6f54);
    font-size: 16px;
    font-weight: 500;
}

.soc-kpi-row,
.soc-stage-row,
.soc-chart-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.soc-kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.soc-kpi-card {
    background: #fff;
    border: 1px solid #dfe5e8;
    border-top: 3px solid #0b8261;
    border-radius: 6px;
    padding: 10px 14px;
}

.soc-kpi-card span {
    display: block;
    text-transform: uppercase;
    color: #8a9399;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .03em;
}

.soc-kpi-card strong {
    display: block;
    margin-top: 2px;
    color: #1f2f36;
    font-size: 39px;
    line-height: 1.1;
    font-weight: 400;
}

.soc-kpi-card .soc-positive {
    color: #16a34a;
}

.soc-stage-row {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.soc-stage-card {
    background: #fff;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    text-align: center;
    padding: 8px 8px 4px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.soc-stage-card h3 {
    margin: 0 -8px 8px;
    padding: 7px 6px;
    border-bottom: 1px solid #e9eef1;
    color: #7f8890;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    min-height: 33px;
}

.soc-stage-card strong {
    font-size: 38px;
    line-height: 1.15;
    color: #1f2f36;
    font-weight: 450;
}

.soc-stage-card small {
    color: #8a949b;
    text-transform: uppercase;
    font-size: 10px;
}

.soc-stage-card a {
    margin-top: auto;
    color: var(--soc-link-color, #0b8261);
    font-size: 12px;
    font-weight: 500;
}

.soc-chart-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.soc-chart-card {
    background: #fff;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    padding: 10px 14px 12px;
}

.soc-chart-card h3 {
    margin: 0 0 10px;
    text-transform: uppercase;
    font-size: 10px;
    color: #7f8890;
    font-weight: 500;
}

.soc-bars {
    height: 250px;
    display: grid;
    align-items: end;
    gap: 12px;
    border: 1px solid #edf1f3;
    border-radius: 4px;
    padding: 16px 12px;
    background:
        linear-gradient(to top, #f3f6f8 1px, transparent 1px) 0 100%/100% 20%,
        #fff;
}

.soc-bars span {
    border-radius: 2px 2px 0 0;
}

.soc-bars-blue {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.soc-bars-blue span {
    background: linear-gradient(180deg, #43c5e7 0%, #26a9d7 100%);
}

.soc-bars-green {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.soc-bars-green span {
    background: linear-gradient(180deg, #0f8868 0%, #0b8261 100%);
}

/* Telerik Chart en dashboard Home */
.soc-chart-telerik-wrap {
    margin-top: 6px;
    border: 1px solid #edf1f3;
    border-radius: 6px;
    padding: 4px 6px 0;
    background: #ffffff;
    min-height: 268px;
}

.soc-chart-telerik-wrap .k-chart,
.soc-chart-telerik.k-chart {
    --kendo-chart-bg: #ffffff;
}

.soc-chart-telerik-blue.k-chart {
    --kendo-chart-series-1: #43c5e7;
}

.soc-chart-telerik-green.k-chart {
    --kendo-chart-series-1: #0b8261;
}

@media (max-width: 1400px) {
    .soc-stage-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .soc-kpi-row,
    .soc-chart-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .soc-kpi-row,
    .soc-stage-row,
    .soc-chart-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Layout fix: header no invade sidebar
========================================================= */
:root {
    --soc-sidebar-open-width: 262px;
}

.l-navbar {
    top: 0 !important;
    height: 100vh !important;
    width: var(--soc-sidebar-open-width) !important;
    left: calc(-1 * var(--soc-sidebar-open-width)) !important;
    padding-top: 0;
    background-color: var(--soc-sidebar-bg, #006d4e) !important;
    transition: left 0.35s ease !important;
    box-shadow: none;
}

.l-navbar.show {
    left: 0 !important;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.12);
}

.l-navbar .nav {
    height: 100%;
    overflow: hidden;
}

.l-navbar .nav > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.l-navbar .nav > div > .nav_list.usuario {
    flex: 0 0 auto;
}

.l-navbar .nav > div > .nav_list:not(.usuario) {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.soc-sidebar-close {
    position: absolute;
    top: 10px;
    right: 6px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.soc-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.soc-sidebar-close i {
    font-size: 26px;
}

.soc-sidebar-fab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: var(--soc-sidebar-bg, #006d4e);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.18);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.soc-sidebar-fab:hover {
    filter: brightness(0.88);
    box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.22);
}

.soc-sidebar-fab i {
    font-size: 26px;
}

.header {
    left: 0;
    width: 100%;
    margin-left: 0;
}

#body-pd {
    padding-left: 12px;
}

@media screen and (min-width: 768px) {
    .header.body-pd {
        margin-left: var(--soc-sidebar-open-width) !important;
        width: calc(100% - var(--soc-sidebar-open-width)) !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #body-pd.body-pd {
        padding-left: calc(var(--soc-sidebar-open-width) + 12px) !important;
    }
}

/* Página configuración apariencia */
.soc-ui-appearance-page {
    padding: 0 4px 24px;
    max-width: 640px;
}

.soc-ui-appearance-card {
    background: #fff;
    border: 1px solid #e3e8eb;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.soc-ui-appearance-row {
    margin-bottom: 20px;
}

.soc-ui-appearance-row:last-of-type {
    margin-bottom: 0;
}

.soc-ui-appearance-label {
    display: block;
    font-weight: 500;
    color: #3a4550;
    margin-bottom: 8px;
    font-size: 14px;
}

.soc-ui-appearance-hint {
    display: block;
    font-size: 12px;
    color: #7a8692;
    margin-top: 6px;
    line-height: 1.35;
}

.soc-ui-appearance-input {
    max-width: 100%;
}

.soc-ui-appearance-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.soc-ui-appearance-color {
    width: 52px;
    height: 40px;
    padding: 2px;
    border: 1px solid #cfd6dc;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
}

.soc-ui-appearance-hex {
    max-width: 140px;
    font-family: ui-monospace, monospace;
    font-size: 14px;
}

.soc-ui-appearance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9eef1;
}

.soc-app-links .pagination .page-item:not(.active):not(.disabled) .page-link,
.modal .pagination .page-item:not(.active):not(.disabled) .page-link {
    color: var(--soc-link-color, #0b8261);
}

/* ── TabStrip estilo subrayado (global) ─────────────────────── */
.k-tabstrip > .k-tabstrip-items-wrapper {
    border-bottom: 1px solid #d1d5db;
    background: transparent !important;
}
.k-tabstrip .k-tabstrip-items {
    border: none !important;
    background: transparent !important;
    gap: 0;
}
/* Reset total de fondo y bordes en todos los estados */
.k-tabstrip .k-tabstrip-items .k-item,
.k-tabstrip .k-tabstrip-items .k-item *,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: #006d4e !important;
}
.k-tabstrip .k-tabstrip-items .k-item,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item {
    font-weight: 400;
    font-size: 0.95rem;
    padding: 10px 20px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: opacity .15s;
}
.k-tabstrip .k-tabstrip-items .k-item:hover,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item:hover {
    opacity: 0.7;
}
/* Tab activo: fondo verde tenue, negrita y subrayado */
.k-tabstrip .k-tabstrip-items .k-item.k-active,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item.k-active,
.k-tabstrip .k-tabstrip-items .k-item.k-state-active,
.k-tabstrip .k-tabstrip-items .k-tabstrip-item.k-state-active {
    font-weight: 600 !important;
    background-color: rgba(30, 41, 59, 0.06) !important;
    border-bottom: 2px solid #006d4e !important;
}
.k-tabstrip > .k-content,
.k-tabstrip .k-tabstrip-content {
    border: none !important;
    padding: 20px 0 0 0;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── Uso Plataforma ─────────────────────────────────────────── */
.uso-plataforma-page { padding: 0 8px; }
.uso-plataforma-page .titulo-modulo { color: #006d4e; font-size: 1.6rem; margin-bottom: 20px; }

.filtros-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.filtro-item { display: flex; flex-direction: column; gap: 4px; }
.filtro-item label { font-size: 0.8rem; color: #555; font-weight: 500; }
.filtro-hint { font-size: 0.82rem; color: #666; margin-bottom: 20px; }

.loading-container { display: flex; justify-content: center; padding: 40px; }
.sin-datos { color: #888; padding: 20px 0; }

/* KPI Cards */
.kpi-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.kpi-card { border: 1.5px solid #c6f0e2; border-radius: 6px; padding: 18px 24px; min-width: 160px; text-align: center; }
.kpi-card .kpi-label { display: block; font-size: 0.7rem; color: #666; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.kpi-card .kpi-value { display: block; font-size: 2rem; font-weight: 500; color: #006d4e; }

/* Tables */
.detalle-tables-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.detalle-table-section h4 { color: #006d4e; font-size: 1rem; margin-bottom: 8px; }
.soc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.soc-table th { border-bottom: 2px solid #c6f0e2; padding: 6px 8px; color: #444; text-align: left; }
.soc-table td { border-bottom: 1px solid #f1f5f9; padding: 5px 8px; }
.soc-table tr:hover td { background: #f2fbf8; }
.text-right { text-align: right !important; }

/* Broker tab */
.tab-broker { padding: 8px 0; }
.broker-header { display: flex; align-items: center; gap: 20px; margin-bottom: 4px; }
.broker-header h3 { color: #006d4e; margin: 0; }
.broker-sort { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #666; }
.btn-sort { border: 1px solid #ccc; background: #fff; border-radius: 20px; padding: 3px 12px; cursor: pointer; font-size: 0.82rem; }
.btn-sort-active { border: 1.5px solid #006d4e; background: #fff; border-radius: 20px; padding: 3px 12px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: #006d4e; }
.hint-broker { font-size: 0.82rem; color: #888; margin-bottom: 16px; }
.broker-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.broker-row:hover { background: #f2fbf8; }
.broker-row--selected { background: #eefaf5; }
.broker-name { min-width: 160px; font-size: 0.88rem; font-weight: 500; }
.broker-bar-wrap { flex: 1; height: 22px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.broker-bar { height: 100%; background: #006d4e; border-radius: 3px; transition: width .3s; }
.broker-stat { font-size: 0.8rem; min-width: 80px; text-align: center; }
.broker-stat small { display: block; font-size: 0.65rem; color: #888; }
.broker-stat--actions { color: #006d4e; }
.broker-stat--contacts { color: #0055aa; }
.broker-stat--opps { color: #7b3fa0; }
.bdp-users-header { display: grid; grid-template-columns: 160px 100px 1fr; font-size: 0.75rem; color: #888; border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-bottom: 6px; }
.bdp-user-row { display: grid; grid-template-columns: 160px 100px 1fr; align-items: center; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.bdp-username { font-size: 0.88rem; font-weight: 500; }
.bdp-total { font-size: 0.88rem; color: #006d4e; font-weight: 500; }
.hour-cells { display: flex; gap: 2px; }
.hour-cell { width: 14px; height: 14px; border-radius: 2px; }

/* Heatmap tab */
.tab-heatmap h3 { color: #006d4e; margin-top: 0; }
.calendar-heatmap { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; max-width: 700px; }
.cal-day { width: 18px; height: 18px; border-radius: 2px; cursor: pointer; }
.cal-day:hover { opacity: .8; outline: 1px solid #666; }
.heatmap-legend { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #888; margin-bottom: 24px; }
.leg-box { width: 14px; height: 14px; border-radius: 2px; }
/* Patrón semanal — estructura alineada */
.week-pattern-wrap { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.wp-header { display: flex; align-items: center; gap: 2px; }
.wp-day-spacer { width: 28px; flex-shrink: 0; }
.wp-hour-labels { display: flex; gap: 2px; }
.wp-hour-label { width: 20px; font-size: 0.62rem; color: #888; text-align: center; flex-shrink: 0; overflow: hidden; }
.wp-row { display: flex; align-items: center; gap: 2px; }
.wp-day-label { width: 28px; font-size: 0.7rem; color: #666; flex-shrink: 0; }
.wp-cells { display: flex; gap: 2px; }
.wp-cell { width: 20px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.mt-4 { margin-top: 24px; }
/* Mapas de calor por empresa / empleado */
.entity-heatmap-wrap { display: flex; flex-direction: column; gap: 3px; margin-bottom: 24px; max-width: 100%; overflow-x: auto; }
.eh-row { display: flex; align-items: center; gap: 8px; }
.eh-name { width: 160px; flex-shrink: 0; font-size: 0.8rem; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-cells { display: flex; gap: 2px; }
.eh-cell { width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; }
.eh-total { width: 40px; flex-shrink: 0; text-align: right; font-size: 0.78rem; font-weight: 500; color: #006d4e; }
.eh-header-row { padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid #e2e8f0; }
.eh-date-label { width: 20px; flex-shrink: 0; font-size: 0.6rem; color: #888; text-align: center; overflow: hidden; }
.day-detail-table { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; font-size: 0.85rem; max-width: 700px; }
.ddt-header { display: grid; grid-template-columns: 120px 60px 80px 1fr; background: #f1f5f9; padding: 7px 12px; font-size: 0.75rem; font-weight: 600; color: #444; }
.ddt-row { display: grid; grid-template-columns: 120px 60px 80px 1fr; padding: 6px 12px; border-bottom: 1px solid #f1f5f9; align-items: center; }
.ddt-row:hover:not(.ddt-weekend) { background: #f2fbf8; }
.ddt-weekend { color: #aaa; }
.activity-bar { height: 10px; background: #006d4e; border-radius: 2px; min-width: 0; }

/* Horario laboral */
.tab-work-hours h3 { color: #006d4e; margin-top: 0; }
.wh-table { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; font-size: 0.85rem; }
.wh-header { display: grid; grid-template-columns: 110px 1fr 1fr 160px 200px; background: #f1f5f9; padding: 7px 12px; font-size: 0.75rem; font-weight: 600; color: #444; }
.wh-row { display: grid; grid-template-columns: 110px 1fr 1fr 160px 200px; padding: 6px 12px; border-bottom: 1px solid #f1f5f9; align-items: center; }
.wh-row:hover { background: #f2fbf8; }
.wh-pct-cell { display: flex; align-items: center; gap: 8px; }
.wh-bar-wrap { flex: 1; height: 10px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.wh-bar { height: 100%; border-radius: 3px; transition: width .3s; }
.wh-pct-label { width: 46px; text-align: right; font-weight: 600; }

/* Sesiones Activas */
.tab-sesiones { padding: 8px 0; }
.sa-header { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.sa-kpis { display: flex; gap: 12px; }
.sa-kpi { border: 1.5px solid #ccc; border-radius: 6px; padding: 8px 20px; text-align: center; min-width: 80px; }
.sa-kpi--green { border-color: #006d4e; }
.sa-kpi-num { display: block; font-size: 1.5rem; font-weight: 500; color: #006d4e; }
.sa-kpi-label { display: block; font-size: 0.65rem; color: #888; text-transform: uppercase; }
.btn-soc-outline { border: 1.5px solid #006d4e; background: #fff; color: #006d4e; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-size: 0.88rem; }
.btn-soc-outline:hover { background: #f1f5f9; }
.estado-dot { font-size: 1rem; }
.estado-conectado { color: #22c55e; }
.estado-inactivo { color: #aaa; }
.role-chip { background: #d3f3e6; color: #006d4e; border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; }
.actividad-activo { color: #16a34a; font-weight: 600; }
.actividad-inactivo { color: #b45309; font-weight: 600; }

/* Modal detalle de día */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-dia-detalle { background: #fff; border-radius: 10px; width: 680px; max-width: 95vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.modal-dia-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px 12px; border-bottom: 1px solid #eee; }
.modal-dia-header h4 { margin: 0 0 4px 0; color: #006d4e; font-size: 1.2rem; }
.modal-dia-header p { margin: 0; font-size: 0.85rem; color: #666; }
.btn-cerrar { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #666; }
.modal-dia-body { padding: 16px 24px; }

/* Modal detalle de broker */
.modal-broker-detalle { background: #fff; border-radius: 10px; width: 900px; max-width: 95vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.modal-broker-body { padding: 4px 24px 20px; }
.modal-broker-body h5 { font-size: 0.75rem; color: #888; letter-spacing: .04em; margin: 8px 0 10px; }
.hour-cells-wrap { overflow-x: auto; }
.hour-axis-labels { display: flex; gap: 2px; padding-top: 2px; }
.hour-axis-label { width: 14px; font-size: 0.62rem; color: #888; text-align: left; flex-shrink: 0; white-space: nowrap; overflow: visible; }
.bdp-hour-axis { border-bottom: none; padding-top: 0; }
.hora-grupo { margin-bottom: 16px; }
.hora-titulo { color: #006d4e; margin: 0 0 8px 0; font-size: 0.95rem; }
.hora-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hora-tabla th { border-bottom: 1.5px solid #ddd; padding: 5px 8px; color: #555; }
.hora-tabla td { border-bottom: 1px solid #f0f0f0; padding: 4px 8px; }
.tipo-chip { background: #d3f3e6; color: #006d4e; border-radius: 4px; padding: 1px 7px; font-size: 0.75rem; }

/* ======================== NOTIFICATION BELL DROPDOWN ======================== */
.header-bell-wrap { position: relative; cursor: pointer; }
.notification-overlay { position: fixed; inset: 0; z-index: 1040; }
.notification-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 280px; background: #fff; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18); z-index: 1050;
    overflow: hidden;
}
.notification-list { max-height: 300px; overflow-y: auto; }
.notification-empty { padding: 18px 16px; color: #888; font-size: 0.85rem; text-align: center; }
.notification-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid #f0f0f0;
}
.notification-item:last-child { border-bottom: none; }
.notification-item-content { flex: 1; min-width: 0; }
.notification-item-title { display: block; font-weight: 600; font-size: 0.9rem; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification-item-date { display: block; font-size: 0.75rem; color: #888; margin-top: 2px; }
.notification-badge-active { color: #006d4e; font-weight: 600; }
.notification-item-close {
    background: none; border: none; color: #aaa; font-size: 1.1rem;
    cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.notification-item-close:hover { color: #e53e3e; }
.notification-footer {
    display: flex; justify-content: space-between;
    padding: 10px 12px; border-top: 1px solid #e8e8e8; background: #fafafa;
}
.notification-footer-link { font-size: 0.8rem; color: #006d4e; cursor: pointer; text-decoration: none; }
.notification-footer-link:hover { text-decoration: underline; }

/* ======================== ALERTS MODULE PAGE ======================== */
.soc-alerts-page { padding: 24px; }
.soc-alerts-header {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; margin-bottom: 20px;
}
.soc-alerts-count { font-size: 0.95rem; color: #444; }
.soc-alerts-notif-toggle { margin-left: auto; }
.soc-alerts-card {
    background: #fff; border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 20px 24px;
}
.soc-alerts-card-title { font-size: 0.75rem; font-weight: 500; color: #888; letter-spacing: .06em; margin-bottom: 12px; }
.soc-alerts-filter { display: flex; gap: 4px; margin-bottom: 16px; }
.btn-soc-filter {
    padding: 6px 18px; border-radius: 6px; border: 1px solid #d1d5db;
    background: #fff; color: #555; font-size: 0.88rem; cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-soc-filter.active { background: #006d4e; color: #fff; border-color: #006d4e; }
.btn-soc-filter:hover:not(.active) { background: #f3f4f6; }
.soc-alerts-empty { color: #888; font-size: 0.9rem; padding: 12px 0; }
.soc-alerts-list { display: flex; flex-direction: column; gap: 0; }
.soc-alert-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.soc-alert-item:last-child { border-bottom: none; }
.soc-alert-dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.soc-alert-dot.active { background: #006d4e; }
.soc-alert-dot.inactive { background: #ccc; }
.soc-alert-body { flex: 1; min-width: 0; }
.soc-alert-date { font-size: 0.78rem; color: #006d4e; font-weight: 600; margin-bottom: 2px; }
.soc-alert-title { font-size: 0.95rem; font-weight: 500; color: #1a1a1a; }
.soc-alert-comment { font-size: 0.85rem; color: #555; margin-top: 2px; }
.soc-alert-meta { font-size: 0.8rem; color: #888; margin-top: 4px; }
.soc-alert-action { font-size: 0.82rem; color: #006d4e; cursor: pointer; text-decoration: none; margin-top: 4px; display: inline-block; }
.soc-alert-action:hover { text-decoration: underline; }
.soc-alerts-modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.soc-alerts-modal .soc-alerts-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.soc-alerts-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.soc-alerts-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.soc-alerts-subtabs { display: flex; gap: 4px; margin: 4px 0 12px; }
.soc-tab-btn.soc-tab-sub { padding: 6px 14px; font-size: 0.85rem; }
.soc-alerts-tenant-filter { margin-bottom: 16px; max-width: 280px; }
.soc-alerts-empty { color: #888; font-size: 0.9rem; padding: 24px 0; text-align: center; }

.soc-alerts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .soc-alerts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .soc-alerts-grid { grid-template-columns: 1fr; } }

.soc-alert-card {
    background: #fff; border-radius: 8px; border: 1px solid #eef0f2;
    box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 16px; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, transform .1s;
}
.soc-alert-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.soc-alert-card-header { display: flex; align-items: center; justify-content: space-between; }
.soc-alert-card-title { font-size: 0.95rem; font-weight: 500; color: #1a1a1a; }
.soc-alert-card-date { font-size: 0.78rem; color: #006d4e; font-weight: 600; }
.soc-alert-card-comment { font-size: 0.85rem; color: #555; }
.soc-alert-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: #888; margin-top: 4px; }
.soc-alert-card-meta i { margin-right: 4px; }

.soc-badge-unread { background: #d3f3e6; color: #005f45; }
.soc-detail-badges { display: flex; gap: 6px; margin-bottom: 10px; }
.soc-attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.soc-attachment-download { border: none; cursor: pointer; }
.soc-attachment-download:hover { filter: brightness(0.95); }

/* ===================== ANNOUNCEMENTS ===================== */
.soc-announcements-page { padding: 1.5rem; }
.soc-announcements-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.soc-announcements-title { font-size: 1.35rem; font-weight: 500; color: var(--soc-page-title-color); display: flex; align-items: center; gap: 8px; margin: 0; }
.soc-announcements-tabs { display: flex; gap: 4px; margin-bottom: 1rem; border-bottom: 2px solid #e5e7eb; }
.soc-tab-btn { background: none; border: none; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 6px; }
.soc-tab-btn.active { color: var(--soc-page-title-color); border-bottom-color: var(--soc-page-title-color); }
.soc-tab-count { background: #e5e7eb; border-radius: 999px; font-size: 0.75rem; padding: 0 7px; line-height: 1.6; }
.soc-tab-btn.active .soc-tab-count { background: var(--soc-page-title-color); color: #fff; }
.soc-announcement-message-preview { font-size: 0.82rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; margin-top: 2px; }
.soc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.soc-badge-contract { background: #fef3c7; color: #92400e; }
.soc-badge-attachment { background: #e3f6ee; color: #047857; }
.soc-badge-active { background: #d1fae5; color: #065f46; }
.soc-badge-inactive { background: #f3f4f6; color: #6b7280; }
.soc-scheduled-date { font-size: 0.82rem; color: #6b7280; display: flex; align-items: center; gap: 4px; }
.soc-actions-cell { display: flex; gap: 6px; align-items: center; }
.soc-btn-icon { background: none; border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; gap: 4px; transition: background 0.12s, border-color 0.12s; color: #4b5563; }
.soc-btn-icon:hover { background: #f3f4f6; }
.soc-btn-round { width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center; font-size: 1.05rem; }
.soc-btn-round i { line-height: 1; }
.soc-btn-responses { color: #047857; border-color: #a7e0c8; }
.soc-btn-edit     { color: #065f46; border-color: #a7f3d0; }
.soc-btn-view     { color: #047857; border-color: #a7e0c8; }
.soc-btn-view:hover { background: #e3f6ee; }
.soc-btn-copy-action { color: #6b7280; border-color: #d1d5db; }
.soc-btn-copy-action:hover { background: #f3f4f6; }
.soc-btn-resolve  { color: #059669; border-color: #6ee7b7; }
.soc-btn-resolve:hover  { background: #d1fae5; }
.soc-btn-resolved { color: #d97706; border-color: #fde68a; }
.soc-btn-resolved:hover { background: #fef3c7; }
.soc-btn-delete   { color: #991b1b; border-color: #fecaca; }
.soc-btn-delete:hover { background: #fee2e2; }
.soc-btn-danger { background: #dc2626; color: #fff; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.soc-btn-danger:hover { background: #b91c1c; }
.soc-responses-badge { background: #d3f3e6; color: #006d4e; border-radius: 999px; font-size: 0.7rem; padding: 1px 6px; font-weight: 500; }
.soc-responses-summary { display: flex; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.soc-response-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: filter 0.12s, box-shadow 0.12s; }
.soc-response-chip.all { background: #e0e7ff; color: #3730a3; }
.soc-response-chip.accepted, .soc-response-chip.aceptado { background: #d1fae5; color: #065f46; }
.soc-response-chip.later, .soc-response-chip.después { background: #fef3c7; color: #92400e; }
.soc-response-chip.rejected, .soc-response-chip.rechazado { background: #fee2e2; color: #991b1b; }
.soc-response-chip:hover { filter: brightness(0.94); }
.soc-response-chip.soc-chip-active { border-color: currentColor; box-shadow: 0 0 0 2px currentColor; }
.soc-announcement-modal .soc-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.soc-toggle-input { width: 2.5rem !important; height: 1.4rem !important; cursor: pointer; }
.soc-attachment-preview { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 4px 10px; font-size: 0.85rem; color: #065f46; margin-bottom: 8px; }
.soc-btn-remove-attachment { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 1rem; margin-left: 4px; line-height: 1; }
.soc-file-input { display: block; }
.soc-loading-text { color: #6b7280; font-style: italic; padding: 1rem 0; }

/* Modal usuario de anuncios */
.soc-announcement-user-modal .modal-dialog { max-width: 600px; }
.soc-announcement-modal-content { display: flex; flex-direction: column; max-height: 85vh; border-radius: 10px; overflow: hidden; }
.soc-announcement-modal-header { display: flex; flex-direction: row; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--soc-page-title-color) 0%, #005f45 100%); color: #fff; padding: 0.6rem 1.2rem; min-height: unset; border-bottom: none; }
.soc-announcement-header-icon { font-size: 1.3rem; opacity: 0.9; flex-shrink: 0; }
.soc-announcement-modal-title { color: #fff; font-size: 1rem; font-weight: 500; margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-announcement-modal-body { padding: 1.5rem; flex: 1; overflow-y: auto; min-height: 300px; }
.soc-announcement-message { font-size: 0.95rem; color: #374151; line-height: 1.7; white-space: pre-wrap; }
.soc-announcement-attachment { display: flex; align-items: center; gap: 8px; margin-top: 1.2rem; padding: 10px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; font-size: 0.88rem; color: #065f46; }
.soc-btn-download { background: none; border: 1px solid #065f46; color: #065f46; border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 5px; transition: background 0.12s; }
.soc-btn-download:hover { background: #d1fae5; }
.soc-announcement-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 0.8rem 1.2rem; border-top: 1px solid #e5e7eb; flex-shrink: 0; }

/* Visor de adjunto */
.soc-attachment-viewer-modal .modal-dialog { max-width: 90vw; }
.soc-attachment-modal-content { height: 90vh; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.soc-attachment-modal-header { background: linear-gradient(135deg, var(--soc-page-title-color) 0%, #005f45 100%); color: #fff; padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; min-height: unset; border-bottom: none; }
.soc-attachment-modal-name { font-size: 0.9rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 6px; }
.soc-attachment-modal-body { flex: 1; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #1a1a1a; }
.soc-attachment-iframe { width: 100%; height: 100%; border: none; display: block; }
.soc-attachment-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ── Error Logs ─────────────────────────────────────────── */
.soc-errorlogs-page { padding: 1.5rem; }
.soc-errorlogs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.soc-errorlogs-title { font-size: 1.35rem; font-weight: 500; color: var(--soc-page-title-color); display: flex; align-items: center; gap: 8px; margin: 0; }
.soc-errorlogs-actions { display: flex; gap: 8px; }
.soc-errorlogs-empty { text-align: center; padding: 3rem; color: #9ca3af; }
.soc-errorlogs-empty i { font-size: 3rem; color: #0f8868; }
.soc-log-date { font-size: 0.8rem; color: #6b7280; white-space: nowrap; }
.soc-log-resolved-at { font-size: 0.72rem; color: #059669; display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.soc-tab-btn.soc-tab-resolved { color: #059669; }
.soc-tab-btn.soc-tab-resolved.active { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.soc-log-level { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.soc-log-level--error { background: #fee2e2; color: #dc2626; }
.soc-log-level--warning { background: #fef3c7; color: #d97706; }
.soc-log-level--info { background: #d3f3e6; color: #0b8261; }
.soc-log-message { display: flex; flex-direction: column; gap: 2px; }
.soc-log-msg-text { font-size: 0.875rem; color: #111827; }
.soc-log-source { font-size: 0.75rem; color: #9ca3af; }
.soc-log-url { font-size: 0.72rem; color: #6b7280; display: flex; align-items: center; gap: 3px; }
.soc-log-user { font-size: 0.8rem; }
.soc-errorlog-modal { max-height: 90vh; display: flex; flex-direction: column; }
.soc-errorlog-detail-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.soc-detail-row { display: flex; gap: 12px; font-size: 0.875rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 6px; }
.soc-detail-label { font-weight: 600; min-width: 120px; color: #374151; }
.soc-stacktrace-container { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.soc-stacktrace-header { display: flex; justify-content: space-between; align-items: center; background: #1e1e1e; color: #d4d4d4; padding: 6px 12px; font-size: 0.8rem; }
.soc-btn-copy-stack { background: none; border: 1px solid #555; color: #d4d4d4; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
.soc-btn-copy-stack:hover { background: #333; }
.soc-stacktrace { background: #1e1e1e; color: #d4d4d4; padding: 12px; margin: 0; font-size: 0.75rem; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.soc-errorlog-modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.soc-email-send-row { display: flex; gap: 8px; align-items: center; flex: 1; }

/* ── Error Boundary ─────────────────────────────────────── */
.soc-error-boundary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 3rem 2rem; text-align: center; }
.soc-error-boundary i { font-size: 3rem; color: #dc2626; }
.soc-error-boundary-title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0; }
.soc-error-boundary-msg { font-size: 0.85rem; color: #6b7280; margin: 0; max-width: 480px; }

/* ── Page Navigation Loader ──────────────────────────────── */
.soc-page-loader {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(3px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    z-index: 9998;
    animation: soc-fadein 0.12s ease;
}
.soc-page-loader-text {
    font-size: 0.85rem; color: #6b7280; font-weight: 500; letter-spacing: 0.02em;
}
@keyframes soc-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ===================== PAGE HEADER ===================== */
.soc-page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(30, 41, 59, 0.06);
    width: 100%;
    box-sizing: border-box;
}

/* Contenedores que agrupan el encabezado con los botones de la página: el encabezado ocupa el
   primer renglón completo y las acciones bajan al siguiente, alineadas a la derecha. */
.soc-tablero-header > .soc-page-header,
.soc-agenda-header > .soc-page-header,
.soc-alerts-top > .soc-page-header {
    margin-bottom: 1rem;
}

.soc-page-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.soc-page-header-back {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.soc-page-header-back:hover {
    background: #e2e8f0;
    color: #006d4e;
}

.soc-page-header-back i {
    font-size: 1rem;
}

.soc-page-header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #079def;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc-page-header-icon i {
    font-size: 1.6rem;
    color: #ffffff;
    line-height: 1;
}


.soc-page-header-title {
    font-size: 1.15rem;
    font-weight: 4500;
    color: var(--texto-body);
    line-height: 1.2;
}

.soc-page-header-subtitle {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.3;
}

.soc-page-header-description {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 0.1rem;
}

.soc-page-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    background: none;
    border: none;
    padding: 0.25rem 0;
    margin-bottom: 0.6rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.soc-page-back:hover {
    color: #0b8261;
}

.soc-page-back i {
    font-size: 1rem;
}

/* ── Ficha de Cliente: toolbar de iconos redondeados ── */
.soc-ficha-toolbar {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 0.9rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.soc-ficha-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #0b8261;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0;
    transition: opacity 0.15s ease;
}

.soc-ficha-toolbar-btn:hover {
    opacity: 0.8;
}

.soc-ficha-toolbar-btn:disabled {
    cursor: not-allowed;
    color: #94a3b8;
    opacity: 1;
}

.soc-ficha-toolbar-btn:disabled:hover {
    opacity: 1;
}

.soc-ficha-toolbar-btn:disabled .soc-ficha-toolbar-icon {
    background: #f1f5f9;
    color: #94a3b8;
}

.soc-ficha-toolbar-btn:disabled.is-primary .soc-ficha-toolbar-icon {
    background: #cbd5e1;
    color: #ffffff;
}

.soc-ficha-toolbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eefaf5;
    color: #0b8261;
    font-size: 1.15rem;
}

.soc-ficha-toolbar-btn.is-primary .soc-ficha-toolbar-icon {
    background: var(--soc-btn-primary, #0b8261);
    color: #ffffff;
}

/* ── Ficha de Cliente: encabezado con selector de broker ── */
/* ── Ficha de Cliente (/admin/clientes): usa todo el ancho disponible de la
   pantalla. Reduce el gutter de `.navigation-items-page` (20px, compartido por
   otras 26 páginas, por eso no se toca allá) y deja que header/stepper/tabs y
   el contenido de cada tab compartan exactamente el mismo margen lateral —
   antes cada bloque sumaba su propio `margin: 0 1.5rem`, que los metía hacia
   adentro y los desalineaba entre sí. */
.soc-ficha-page {
    padding-left: 12px;
    padding-right: 12px;
}

.soc-ficha-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    row-gap: 1rem;
    column-gap: 1rem;
    flex-wrap: wrap;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.9rem 0;
}

.soc-ficha-header-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Franja de contexto bajo el encabezado de módulo: identifica al cliente cargado, así que se
   mantiene un escalón por debajo del título de la página (1.15rem, verde) para que no se lean
   como dos encabezados en competencia. */
.soc-ficha-header-title {
    display: flex;
    gap: 5px;
    font-size: 1rem;
    color: var(--texto-body);
    font-weight: bold;
}

.soc-ficha-header-title-prefix {
    color: var(--texto-body);
    font-weight: 600;
}

.soc-ficha-header-subtitle {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
}

/* ── Ficha de Cliente: barra de acciones unificada al header (Buscar/Mi Lista/Nuevo/Guardar/Eliminar) ── */
.soc-ficha-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* El fondo vive en el recuadro del ícono, no en el botón: la etiqueta queda fuera,
   en texto oscuro sobre el fondo de la barra. */
.soc-ficha-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #1f2937;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.soc-ficha-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eefaf5;
    color: #0b8261;
    font-size: 1.15rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.soc-ficha-action-btn:hover:not(:disabled) i {
    background: #d6f1e6;
}

.soc-ficha-action-btn:disabled {
    cursor: not-allowed;
    color: #9ca3af;
}

.soc-ficha-action-btn:disabled i {
    background: #f1f5f9 !important;
    color: #b6c2cd !important;
}

/* Acción principal: recuadro verde sólido, etiqueta en oscuro igual que las demás. */
.soc-ficha-action-btn.is-primary i {
    background: #04684c;
    color: #ffffff;
}

.soc-ficha-action-btn.is-primary:hover:not(:disabled) i {
    background: #035440;
}

.soc-ficha-action-btn.is-save i {
    color: #0b8261;
}


.soc-ficha-action-btn.is-danger i {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fee2e2;
}
button.soc-ficha-action-btn.is-danger:hover:not(:disabled){
    border-color: #fee2e2;
}

.soc-ficha-action-btn.is-danger:hover:not(:disabled) i {
    background: #fdcfcf;
}

/* ── Ficha de Cliente: tabs ── */
.soc-ficha-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: #f3f4f7;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin: 1rem 0 0;
    padding: 0.4rem;
}

.soc-ficha-tab {
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 200;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.soc-ficha-tab:hover {
    color: var(--texto-body);
}

.soc-ficha-tab.is-active {
    background: var(--neutral);
    color: var(--color-primario);
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.12);
    font-weight: bold;
}

.soc-ficha-tab:disabled {
    color: #b0b7c3;
    cursor: not-allowed;
}

.soc-ficha-tab:disabled:hover {
    color: #b0b7c3;
}

.soc-ficha-tab-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin: 0 0 1.5rem;
    padding: 2rem 1.25rem;
    min-height: 320px;
}

.soc-ficha-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    color: #64748b;
}

.soc-ficha-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--bg-icon-color-empty-state);
    color: var(--neutral);
    font-size:38px;
}
.soc-ficha-empty-icon.--icon-sm{
    width: 70px;
    height: 70px;
    font-size:30px;
}
.soc-ficha-empty-icon i{
    color: var(--icon-color-empty-state);
}
.soc-ficha-empty-title{
    font-weight: 450;
    color: #1F2328;
    margin-bottom: 0;
}
.soc-ficha-empty-text {
    font-size: 0.9rem;
    max-width: 360px;
    line-height: 1.5;
}

.soc-ficha-empty-text b {
    color: #1e293b;
}

/* ── Tablero de Clientes (Kanban) ── */
.soc-tablero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.soc-tablero-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;

    /* El encabezado ocupa el primer renglón completo, así que las acciones quedan solas en el
       segundo: se empujan a la derecha para no dejar el hueco a ese lado. */
    margin-left: auto;
}

.soc-tablero-header-actions .btn-soc-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.soc-tablero-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

/* Solo Tablero de Clientes: los filtros viven dentro del PageHeader y ocupan
   el segundo renglón. El max-height fijo del encabezado se suelta para no recortarlos. */
.soc-tablero-page > .soc-page-header {
    flex-wrap: wrap;
    max-height: none;
    align-items: center;
}

.soc-tablero-page > .soc-page-header .soc-tablero-filters {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0.75rem 0 0;
    padding: 0.85rem 1rem;
    background: #f6f8f7;
    border: 1px solid #e6eeea;
    border-radius: 16px;
}

.soc-tablero-filters-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.soc-tablero-filters-search {
    flex: 1 1 220px;
    min-width: 0;
    flex-wrap: nowrap;
}

.soc-tablero-filters-search > .input-group-text {
    flex: 0 0 auto;
}

.soc-tablero-filters-search > .form-control {
    width: 1%;
    min-width: 0;
    flex: 1 1 auto;
}

.soc-tablero-page .soc-tablero-filters .input-group-text {
    background: #fff;
    color: #94a3b8;
    border-color: #dee2e6;
}

.soc-tablero-page .soc-tablero-filters .form-check {
    white-space: nowrap;
    min-height: auto;
}

/* Combo de broker (Syncfusion, con búsqueda): ancho fijo junto al buscador. */
.soc-tablero-page .soc-tablero-filters .soc-tablero-broker {
    flex: 0 0 260px;
    min-width: 0;
}

.soc-tablero-page .soc-tablero-filters .soc-tablero-date-field {
    width: auto;
    min-width: 160px;
    flex: 0 0 auto;
}

.soc-tablero-filters-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e4ece8;
}

.soc-tablero-page .soc-tablero-date {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    margin: 0;
}

.soc-tablero-page .soc-tablero-date .form-label {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 400;
}

.soc-tablero-page .soc-tablero-date .form-control {
    min-width: 0;
    width: 100%;
}

.soc-tablero-page .soc-tablero-date-hint {
    margin-top: 0.6rem;
}

.soc-tablero-date-hint {
    font-size: 0.78rem;
    color: #64748b;
}

.soc-tablero-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #eefaf5;
    color: #0b8261;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* ── Tablero de Clientes: la página completa como columna flex, con el
   Kanban ocupando todo el espacio vertical restante bajo header/filtros —
   así el alto se ajusta solo sin importar cuánto midan esos elementos de
   arriba, sin necesidad de recalcular un `calc(100vh - Npx)` a mano cada
   vez que cambian. `min-height: 0` en el hijo flex es necesario porque un
   flex item por default no se encoge por debajo de su contenido, lo que
   rompería el `overflow` interno del wrapper. ── */
.soc-tablero-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px - 18px);
}

.soc-tablero-page .soc-tablero-kanban-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Tablero de Clientes: columnas al doble de ancho + scroll horizontal ── */
.soc-tablero-kanban-wrapper {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-color: #0b8261 #eefaf5;
    scrollbar-width: thin;
}

.soc-tablero-kanban-wrapper::-webkit-scrollbar {
    height: 10px;
}

.soc-tablero-kanban-wrapper::-webkit-scrollbar-track {
    background: #eefaf5;
    border-radius: 999px;
}

.soc-tablero-kanban-wrapper::-webkit-scrollbar-thumb {
    background-color: #0b8261;
    border-radius: 999px;
}

.soc-tablero-kanban-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #006d4e;
}

.soc-tablero-kanban-wrapper .e-kanban {
    width: max-content !important;
    min-width: 100%;
    height: 100%;
}

/* Syncfusion pinta header y content como hermanos; JS los mete juntos aquí
   para poder tratar cada tablero como un bloque (header arriba, tarjetas abajo). */
.soc-tablero-kanban-wrapper .container_column_kanban {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 100%;
    width: max-content;
}

.soc-tablero-kanban-wrapper .e-kanban .e-kanban-table {
    table-layout: fixed;
    width: auto !important;
}

.soc-tablero-kanban-wrapper .e-kanban .e-header-cells,
.soc-tablero-kanban-wrapper .e-kanban .e-content-cells {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

/* ── Tablero de Clientes: scroll vertical independiente por columna ──
   `.e-content-cells` es un <td>; solo fija la altura de la columna (con
   `display: inline-block` para que un <td> respete `height` de forma
   confiable) pero NO tiene su propio `overflow-y` — el tema de Syncfusion
   ya define `.e-card-wrapper`/`.e-card-container` (el div real con las
   tarjetas) como `height: inherit; overflow: auto`, así que con el <td>
   padre en una altura concreta ese `inherit` se resuelve solo y el scroll
   aparece exactamente donde debe. Poner el overflow en el propio <td> generaba
   un desbordamiento falso de ~4px (heredado del padding/min-height interno
   del tema) que Chrome pintaba como una barra de scroll ancha y permanente
   incluso en columnas vacías. */
.soc-tablero-kanban-wrapper .e-kanban .e-content-cells {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    margin-right: 10px;
}

/* La tabla de encabezados (`e-header-table`) sigue siendo <td> real y ya
   trae 10px de `border-spacing` propio del tema — sin este margen se
   duplicaría el espaciado ahí. La de contenido (`e-content-table`) perdió
   su `border-spacing` horizontal al forzar `display: inline-block` en
   `.e-content-cells` arriba (los inline-block no participan del spacing
   de tabla), por eso ese margen se repone solo en el content, no en el
   header — de lo contrario columna tras columna se acumulaba un desfase
   de 10px entre el título de cada etapa y su contenido debajo. */
.soc-tablero-kanban-wrapper .e-kanban .e-content-cells:last-child {
    margin-right: 0;
}

/* ── Tablero de Clientes: header de columna (icono + contador + totales) ── */
.soc-tablero-kanban-wrapper .e-kanban .e-header-cells {
    padding: 0;
    box-sizing: border-box;
}

.soc-kanban-col-header {
    width: 100%;
    box-sizing: border-box;
    background: var(--neutral);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.soc-kanban-col-header-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px;
    background: #fbfbfb !important;
}

.soc-kanban-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #eaf7f1;
    color: var(--color-primario);
    font-size: 16px;
    border: 1px solid #e5e7eb;
}

.soc-kanban-col-title {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    color: var(--texto-body);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-kanban-col-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 0.4rem;
    border-radius: 8px;
    background: var(--neutral);
    color: #0b8261;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--color-primario);
}

.soc-kanban-col-totals {
    display: flex;
    gap: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid #e5e7eb;
}

.soc-kanban-col-totals-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-primario);
}

.soc-kanban-col-totals-value {
    display: block;
    font-size: 14px;
    font-weight: 450;
    color: #1e293b;
}

/* "Ver N más..." al pie de cada columna. Para el Kanban es una tarjeta más: se le quita el marco
   de tarjeta de Syncfusion para que se vea como botón. */
.e-kanban .e-card:has(.soc-kanban-load-more) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.soc-kanban-load-more {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px dashed #9fd8c3;
    border-radius: 8px;
    background: #f3fbf8;
    color: #0b5e47;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.soc-kanban-load-more:hover:not(:disabled) {
    background: #e3f5ee;
    border-color: #0b8261;
}

.soc-kanban-load-more:disabled {
    cursor: wait;
    opacity: 0.7;
}

.soc-kanban-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.68rem 0.8rem;
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.08);
}

.soc-kanban-card .soc-kanban-card-key {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-primario) !important;
    margin-bottom: 0.28rem;
}

.soc-kanban-card-amounts {
    display: flex;
    gap: 5px;
}

.soc-kanban-card-amount {
    display: flex;
    font-weight: 500;
    line-height: 1.5;
    font-size: 14px;
    flex-direction: column;
    gap: 0px !important;
    color: var(--color-primario);
}

.soc-kanban-card-amount-label {
    display: flex;
    align-items: center;
  font-weight: 450;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--texto-body);
        height: 100%;
    min-height: 20px;
}
.soc-kanban-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.soc-kanban-card-name {
    font-weight: 500;
    font-size: 12px;
    color: var(--texto-body) !important;
}

.soc-kanban-card-badge {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 450;
    padding: 6px;
    border-radius: 6px;
    background: #DCF6E4;
    color: #138B38;
    white-space: nowrap;
    height: 25px;
}

.soc-kanban-card-row {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.62rem;
    color: #475569;
    margin-bottom: 0.24rem;
}



.soc-kanban-card-tag {
    display: inline-block;
    font-size: 0.56rem;
    font-weight: 500;
    color: #64748b;
    background: #f3f4f7;
    border-radius: 6px;
    padding: 0.12rem 0.4rem;
    margin: 0.28rem 0 0.4rem;
}

.soc-kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.4rem;
    margin-top: 0.32rem;
    font-size: 12px;
}
.soc-kanban-card-footer a{
    font-size: 13px;
}

.soc-kanban-card-footer .soc-kanban-card-date {
    color: var(--texto-body);
    font-size: 13px;
    font-weight: 450;
}

.soc-kanban-card-footer .soc-kanban-card-link {
    color: #0b8261;
    font-weight: 500;
    text-decoration: none;
}

.soc-kanban-card-footer .soc-kanban-card-link:hover {
    text-decoration: underline;
}

.soc-kanban-card-assignees {
    display: flex;
    justify-content: space-between;
    gap: 0;
    padding-top: 10px;
    flex-direction: column;
    color: var(--texto-body) !important;
}

.soc-kanban-card-no-executive {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #7A4A03;
    background: #FFFBEB;
    border: 1px solid #F5D77A;
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 12px;
    font-weight: 400;
    height: 40px;
}

.soc-kanban-card-no-executive i {
    font-size: 15px;
    margin-top: 1px
}

/* ── Ficha de Cliente: secciones "Básicos" / "Complementarios" en tab Datos ── */
.soc-datos-section {
    background: var(--neutral);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem;
    height: 100%;
}

.soc-datos-section-title {
    font-size: 16px;
    color: var(--texto-body);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.soc-datos-section-basicos {
    background: #fffdf0;
    border-color: #f5e6a8;
}

.soc-datos-section-basicos .soc-datos-section-title {
    color: #8a6d00;
    border-bottom-color: #f5e6a8;
}

.soc-datos-section-complementarios {
    background: #f0f8ff;
    border-color: #a9d4f5;
}

.soc-datos-section-complementarios .soc-datos-section-title {
    color: #0b5f9e;
    border-bottom-color: #a9d4f5;
}

.soc-datos-section-oficina {
    background: #f1faf1;
    border-color: #a9dba9;
}

.soc-datos-section-oficina .soc-datos-section-title {
    color: #1a7a1a;
    border-bottom-color: #a9dba9;
}

/* Campo restringido por rol (ver /admin/visibilidad-campos-cliente) — el valor real nunca llega al navegador. */
.soc-field-masked {
    display: flex;
    align-items: center;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    color: #94a3b8;
    background-color: #f1f5f9;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    letter-spacing: 0.15em;
    user-select: none;
}

/* ── Ficha de Cliente: tab Seguimiento (Agenda y Planes / Actividades / Notas) ── */
.soc-seguimiento-panel {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.soc-seguimiento-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    margin-bottom: 0.75rem;
}

.soc-seguimiento-panel-header .soc-datos-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.soc-seguimiento-empty {
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: left;
}

.soc-seguimiento-week-range {
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    color: #6c757d;
    font-size: 0.9rem;
    text-align: center;
}

.soc-seguimiento-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.soc-seguimiento-event-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.soc-seguimiento-event-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
}

.soc-seguimiento-event-dates {
    font-size: 0.75rem;
    color: #64748b;
}

.soc-seguimiento-event-description {
    font-size: 0.8rem;
    color: #475569;
}

button.btn-soc-primary.btn-soc-sm {
    padding: 4px 14px !important;
    font-size: 0.8rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Ficha de Cliente: tab Resumen (tarjetas Datos del Cliente / Agenda / Prioridades / Recordatorios) ── */
.soc-resumen-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
}

.soc-resumen-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 20px 13px;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}
.soc-resumen-card-header + div {
    padding: 0 20px 20px;
}

.soc-resumen-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--neutral);
    border: 1px solid #D4D4D4;
    color: var(--color-primario);
    font-size: 1.05rem;
}
.soc-resumen-card-icon > .bx-id-card:before{
    font-size: 18px;
}

.soc-resumen-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 450;
    color: #1e293b;
}

/* Tab "Datos" de la ficha de Cliente: valores de solo lectura (Razón social, Titular, Correo del
   titular, etc.) que pueden ser largos — se permite salto de línea en vez de truncarse, y las
   tarjetas Básicos/Complementarios/Oficina ganan más ancho en resoluciones medianas (2 por fila
   en vez de 3) para que los combos (Ejecutivo Asignado, Franquicia, Asesor de franquicia) muestren
   el texto completo sin cortarse. */
.soc-field-plaintext-wrap {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.soc-resumen-datalist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 0 20px 20px;
}

.soc-resumen-datalist dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.15rem;
}

.soc-resumen-datalist dd {
    font-size: 0.85rem;
    color: #1f2937;
    margin: 0;
    word-break: break-word;
    font-weight: 450;
}

.soc-resumen-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: center;
}

.soc-resumen-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
background: var(--bg-icon-color-empty-state);
    color: var(--icon-color-empty-state);
    font-size: 1.3rem;
}

/* ── Ficha de Cliente: tab WhatsApp ── */
.soc-whatsapp-header {
    margin-bottom: 1rem;
}

.soc-whatsapp-header-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #0b8261;
    text-transform: uppercase;
}

.soc-whatsapp-header-phone {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0.25rem 0 0.75rem;
}

.soc-whatsapp-panel {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.soc-whatsapp-panel-header {
    background: #0b8261;
    color: #fff;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.soc-whatsapp-messages {
    background: #f8fafc;
    min-height: 320px;
    max-height: 420px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.soc-whatsapp-bubble {
    max-width: 70%;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.35;
    word-break: break-word;
}

.soc-whatsapp-bubble.is-outbound {
    align-self: flex-end;
    background: #dcf8c6;
    border-bottom-right-radius: 2px;
}

.soc-whatsapp-bubble.is-inbound {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 2px;
}

.soc-whatsapp-bubble-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: #94a3b8;
    text-align: right;
}

.soc-whatsapp-input-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.soc-whatsapp-input-bar input {
    flex: 1;
}

/* ── Página Conversaciones de WhatsApp (listado global por cliente) ── */
.soc-whatsapp-conversations-layout {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 520px;
}

.soc-whatsapp-conversations-list {
    width: 320px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 640px;
}

.soc-whatsapp-conversations-search {
    margin-bottom: 0.25rem;
}

.soc-whatsapp-conversation-item {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.soc-whatsapp-conversation-item:hover {
    background: #f8fafc;
}

.soc-whatsapp-conversation-item.is-selected {
    background: #e6f7f1;
    border-color: #0b8261;
}

.soc-whatsapp-conversation-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.soc-whatsapp-conversation-item-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-whatsapp-conversation-item-time {
    font-size: 0.7rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.soc-whatsapp-conversation-item-preview {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-whatsapp-conversations-detail {
    flex: 1;
    min-width: 0;
}

/* ── Ficha de Cliente: tab Llamadas ── */
.soc-llamadas-contact-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.soc-llamadas-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.soc-llamadas-contact-name {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: #1e293b;
}

.soc-llamadas-contact-status {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
}

.soc-llamadas-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}

.soc-llamadas-number-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

.soc-llamadas-number-value {
    display: block;
    font-weight: 500;
    font-size: 0.95rem;
    color: #1e293b;
}

.soc-llamadas-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #eff6ff;
    color: #475569;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 1rem;
}

.soc-llamadas-hint i {
    color: #2563eb;
    font-size: 1rem;
    flex-shrink: 0;
}

.soc-llamadas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
}

.soc-llamadas-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.soc-llamadas-empty-title {
    font-weight: 500;
    color: #1e293b;
    margin: 0;
}

.soc-llamadas-empty-text {
    color: #94a3b8;
    font-size: 0.85rem;
    max-width: 360px;
    margin: 0;
}

/* ── Ficha de Cliente: tab Histórico ── */
.soc-history-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 8px;
}

.soc-history-table thead th {
    border-bottom: none;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.soc-history-table thead th:first-child {
    border-top-left-radius: 8px;
}

.soc-history-table thead th:last-child {
    border-top-right-radius: 8px;
}

.soc-history-table tbody td {
    padding: 0.75rem 1rem;
    border: none;
    vertical-align: top;
    color: #334155;
    font-size: 0.85rem;
}

.soc-history-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* ── Agenda (Syncfusion Schedule) ── */
.soc-agenda-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.soc-agenda-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.soc-agenda-owner-select {
    width: auto;
    min-width: 14rem;
    max-width: 100%;
}

.soc-agenda-wrapper {
    margin-top: 1rem;
}

.soc-agenda-event {
    padding: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-agenda-event-title {
    font-weight: 600;
}

/* Eventos traídos de Outlook: tono más claro que los del CRM, para distinguirlos de un vistazo.
   El color de fondo lo pone la tarjeta de Syncfusion (.e-appointment), así que se usa :has(). */
/* Recargando otro mes: el calendario se queda visible y solo se atenúa. */
.soc-agenda-wrapper.is-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Buscador de cliente del formulario de evento (reemplaza al combo con la cartera completa). */
.soc-agenda-cliente-search {
    position: relative;
}

.soc-agenda-cliente-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e3ebe8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 40, 30, 0.12);
}

.soc-agenda-cliente-option {
    display: grid;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    cursor: pointer;
}

.soc-agenda-cliente-option:hover,
.soc-agenda-cliente-option:focus-visible {
    background: #eefaf5;
}

.soc-agenda-cliente-option small,
.soc-agenda-cliente-note {
    font-size: 0.78rem;
    color: #7b8794;
}

.soc-agenda-cliente-note {
    padding: 6px 10px;
}

.soc-agenda-cliente-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #c6f0e2;
    border-radius: 8px;
    background: #eefaf5;
    color: #006d4e;
    font-weight: 500;
}

.soc-agenda-cliente-selected .btn-link {
    margin-left: auto;
    padding: 0;
}

.soc-agenda-wrapper .e-schedule .e-appointment:has(.soc-agenda-event.is-outlook) {
    background-color: #4fa98c !important;
    border-color: #3f9179 !important;
}

.soc-agenda-event-title .bx-video {
    margin-right: 0.2rem;
    vertical-align: -0.1em;
}

.soc-agenda-outlook-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #eef7f3;
    color: #0a6f52;
    font-size: 0.9rem;
}

.soc-agenda-modal-actions a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Dueño del evento: solo aparece en la vista de todas las agendas, en eventos ajenos. */
.soc-agenda-event-owner {
    display: block;
    font-size: 0.75em;
    opacity: 0.85;
}

/* El modal de la Agenda vive fuera de .navigation-items-page, así que no hereda su .modal-actions. */
.soc-agenda-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Eliminar va a la izquierda, separado de Cancelar/Guardar, para que no se pulse por error. */
.soc-agenda-delete-btn {
    margin-right: auto;
    padding: 0.45rem 1rem;
    border: 1px solid #f1b8b8;
    border-radius: 8px;
    background: #fdecec;
    color: #c62828;
    font-weight: 600;
}

.soc-agenda-delete-btn:hover:not(:disabled) {
    background: #c62828;
    color: #fff;
}

.soc-agenda-delete-btn:disabled {
    opacity: 0.6;
}

/* Tarjetas de evento del SfSchedule — el tema bootstrap5 de Syncfusion las pinta azules por
   default; se sobreescribe con el verde institucional del repo (mismo tono de --soc-btn-primary). */
.soc-agenda-wrapper .e-schedule .e-appointment {
    background-color: #0b8261 !important;
    border-color: #0a6f52 !important;
}

.soc-agenda-wrapper .e-schedule .e-appointment.e-selected,
.soc-agenda-wrapper .e-schedule .e-appointment:hover {
    background-color: #0a6f52 !important;
}

.soc-agenda-wrapper .e-schedule .e-agenda-view .e-appointment,
.soc-agenda-wrapper .e-schedule .e-more-indicator {
    background-color: #0b8261 !important;
}

.soc-agenda-wrapper .e-schedule .e-month-view .e-appointment .e-appointment-details,
.soc-agenda-wrapper .e-schedule .e-appointment .e-indicator {
    color: #ffffff !important;
}

/* ── Modal "Clientes" (Buscar / Mi Lista) — /admin/clientes ── */
.soc-client-list-modal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    border: none;
}

/* Más ancho que el `modal-lg` de Bootstrap (800px): con ese ancho el nombre
   del cliente, el ejecutivo asignado y los correos largos se partían en dos
   líneas. `width: 95vw` lo mantiene dentro de la pantalla en monitores chicos.
   Solo aplica al modal de `/admin/clientes`: `.soc-broker-modal` (el de
   /admin/consulta-cliente, 8 columnas) conserva su propio ancho de 1400px. */
.soc-client-list-modal:not(.soc-broker-modal) .modal-dialog {
    max-width: 1100px;
    width: 95vw;
}

/* Nombre y ejecutivo en una sola línea; el correo puede seguir partiéndose si
   es excepcionalmente largo, para no forzar scroll horizontal en la tabla. */
.soc-client-list-modal .soc-client-list-name-text,
.soc-client-list-modal:not(.soc-broker-modal) .soc-client-list-table tbody td:nth-child(4) {
    white-space: nowrap;
}

/* ── Modal "Buscar por Franquicias" — /admin/consulta-cliente — más ancho
   que el resto de modales `.soc-client-list-modal` porque tiene 8 columnas
   (Clave/Nombre/Correo/Tipo/Estatus/Ejecutivo/Monto/Fecha) en vez de las 4-5
   habituales; `modal-xl` de Bootstrap (1140px) se quedaba corto. */
.soc-broker-modal .modal-dialog {
    max-width: 1400px;
    width: 95vw;
}

.soc-client-list-modal .modal-header {
    background: var(--neutral);
    border-bottom: 1px solid #e8ecea;
    padding: 1rem 1.5rem;
}

 .modal-header .modal-title {
    color: var(--color-primario);
    font-weight: 500;
    font-size: 20px;
}

 .modal-header .soc-client-list-subtitle {
font-size: 16px;
}

 .modal-header .btn-close {
   color: var(--color-primario);
}

.soc-client-list-modal .modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.soc-client-list-search {
    position: relative;
    margin-bottom: 1rem;
}

.soc-client-list-search input.form-control {
    padding-right: 2.75rem;
    border-radius: 8px;
    border-color: #dbe3e0;
}

.soc-client-list-search i {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0b8261;
    font-size: 1.1rem;
    pointer-events: none;
}

.soc-client-list-table {
    margin-bottom: 0;
}

.soc-client-list-table thead th {
    background-color: #006d4e;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    padding: 0.65rem 0.85rem;
    white-space: nowrap;
}

.soc-client-list-table thead th:first-child {
    border-top-left-radius: 8px;
}

.soc-client-list-table thead th:last-child {
    border-top-right-radius: 8px;
}

.soc-client-list-table tbody tr {
    cursor: pointer;
    border-bottom: 1px solid #eef1f0;
}

.soc-client-list-table tbody tr:hover {
    background-color: #f3faf7;
}

.soc-client-list-table tbody td {
    vertical-align: middle;
    padding: 0.7rem 0.85rem;
    color: #4b5563;
}

.soc-client-list-name {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.soc-client-list-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e3f4ec;
    color: #0b8261;
    font-size: 11px;
    font-weight: 500;
}

.soc-client-list-name-text {
    font-weight: 600;
}

/* Paginador del modal "Buscar" / "Mi Lista" (20 clientes por página, pedidos al backend). */
.soc-client-list-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: #64748b;
}

.soc-client-list-pager-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.soc-client-list-pager-page {
    font-weight: 600;
    color: #1e293b;
}

.soc-client-list-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid #0b8261;
    background: #ffffff;
    color: #0b8261;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.soc-client-list-pager-btn:hover:not(:disabled) {
    background: #0b8261;
    color: #ffffff;
}

.soc-client-list-pager-btn:disabled {
    border-color: #cbd5e1;
    color: #94a3b8;
    cursor: default;
}

/* Mientras llega la siguiente página la tabla actual se atenúa en lugar de desaparecer. */
.soc-client-list-loading {
    opacity: 0.5;
    pointer-events: none;
}

.soc-client-list-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #e3f4ec;
    color: #0b8261;
    font-size: 0.95rem;
}

.soc-client-list-table tbody tr:hover .soc-client-list-view {
    background: #0b8261;
    color: #ffffff;
}

.soc-client-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.soc-client-list-pagination-info {
    color: #6b7280;
    font-size: 0.8rem;
}

.soc-client-list-pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.soc-client-list-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.4rem;
    border-radius: 6px;
    border: 1px solid #dbe3e0;
    background: #ffffff;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 600;
}

.soc-client-list-page-btn:hover:not(:disabled) {
    background: #f3faf7;
    border-color: #0b8261;
    color: #0b8261;
}

.soc-client-list-page-btn.is-active {
    background: #0b8261;
    border-color: #0b8261;
    color: #ffffff;
}

.soc-client-list-page-btn:disabled {
    opacity: 0.4;
}

/* Portal de Aliados */
.soc-aliado-portal-layout {
    min-height: 100vh;
    background: #f5f7f6;
}

.soc-aliado-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0b8261;
    color: #ffffff;
    padding: 0.9rem 1.5rem;
}

.soc-aliado-portal-header-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.soc-aliado-portal-header-welcome {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 400;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.soc-aliado-portal-header-logo {
    height: 28px;
}

.soc-aliado-portal-header-logout {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
}

.soc-aliado-portal-header-logout:hover {
    background: rgba(255, 255, 255, 0.15);
}

.soc-aliado-portal-content {
    padding: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

.soc-aliado-portal-page {
    background: #ffffff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.soc-aliado-portal-title {
    color: #0b8261;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.soc-aliado-portal-search {
    position: relative;
    margin-bottom: 1.25rem;
    max-width: 420px;
}

.soc-aliado-portal-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
}

.soc-aliado-portal-search input {
    padding-left: 2.2rem;
}

.soc-aliado-portal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.soc-aliado-portal-card {
    border: 1px solid #e3e8e6;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.soc-aliado-portal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.soc-aliado-portal-card-name {
    font-weight: 600;
    color: #1a1a1a;
}

.soc-aliado-portal-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: #555555;
    font-size: 0.9rem;
}

.soc-aliado-portal-card-body i {
    color: #0b8261;
    margin-right: 0.3rem;
}

/* Aviso de que el estatus no espera al botón "Guardar": se alinea a la derecha del encabezado
   de la tarjeta, y en pantallas angostas cae debajo del título en vez de apretarlo. */
.soc-estatus-stepper-hint {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

.soc-estatus-stepper-hint i {
    font-size: 0.95rem;
    color: #0b8261;
}

@media (max-width: 575.98px) {
    .soc-estatus-stepper-card .soc-resumen-card-header {
        flex-wrap: wrap;
    }

    .soc-estatus-stepper-hint {
        margin-left: 0;
        white-space: normal;
    }
}

/* ── Ficha de Cliente, tab "Datos": stepper de Estatus (reemplaza el combo simple) ── */
.soc-estatus-stepper-card {
    padding-bottom: 1.75rem;
}

.soc-estatus-stepper-card .e-stepper .e-step-label,
.soc-estatus-stepper-card .e-stepper .e-label {
    font-size: 0.78rem;
}

.soc-estatus-stepper-card .e-stepper .e-indicator {
    cursor: pointer;
}

/* Completado y seleccionado: círculo + ícono + barra de progreso en verde institucional
   (por defecto Syncfusion los pinta en azul). Clases reales verificadas inspeccionando el DOM
   real vía Playwright (no solo el CSS del tema): el paso activo es "e-step-selected", no
   "e-step-active"; con StepType="Indicator" el ícono se pinta pero el Label del paso nunca se
   renderiza en esta versión (34.2.6) — hace falta StepType="Default" para que el indicador
   (con ícono) y la etiqueta convivan. */
.soc-estatus-stepper-card .e-stepper .e-step-completed .e-indicator,
.soc-estatus-stepper-card .e-stepper .e-step-selected .e-indicator {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario);
    color: #fff !important;
}
.soc-estatus-stepper-card .e-stepper .e-stepper-progressbar .e-progressbar-value {
    background-color: var(--color-secundario);
}

.soc-estatus-stepper-card .e-stepper .e-label {
    color: #475569 !important;
    font-weight: 200;
    opacity: .8;
}

.soc-estatus-stepper-card .e-stepper .e-step-completed .e-label,
.soc-estatus-stepper-card .e-stepper .e-step-selected .e-label {
        pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    color: #006d4e !important;
    font-weight: 500;
}

/* ── Landing pública "Portal de Aliados" (/aliados) ──────────────────────── */
.soc-aliado-landing {
    min-height: 100vh;
    background: #f5f7f6;
}

.soc-aliado-landing-header {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.75rem;
    background: #ffffff;
    border-bottom: 1px solid #e3e8e6;
}

.soc-aliado-landing-header img {
    height: 30px;
}

.soc-aliado-landing-hero {
    position: relative;
    padding: 3rem 1.75rem 3.5rem;
    background: linear-gradient(135deg, #0b3b2c 0%, #006d4e 45%, #0b8261 100%);
    color: #ffffff;
    overflow: hidden;
}

.soc-aliado-landing-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
    align-items: start;
}

.soc-aliado-landing-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 500;
    color: #bfe9d9;
    margin-bottom: 0.6rem;
}

.soc-aliado-landing-title {
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 0.9rem;
    color: #ffffff;
}

.soc-aliado-landing-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 540px;
    margin: 0 0 1.6rem;
    line-height: 1.5;
}

.soc-aliado-landing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.soc-aliado-landing-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.soc-aliado-landing-badge i {
    font-size: 1.1rem;
    color: #7fe0bb;
}

/* Widget de acceso (reutiliza soc-login-card pero posicionado dentro del hero) */
.soc-aliado-landing-hero .soc-login-card {
    margin: 0;
    max-width: none;
    width: 100%;
}

.soc-aliado-landing-access-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 500;
    color: #0b8261;
    margin-bottom: 0.35rem;
}

/* ── Servicios de inversión ───────────────────────────────────────────────── */
.soc-aliado-landing-services {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.75rem 1rem;
}

.soc-aliado-landing-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.4rem;
}

.soc-aliado-landing-section-subtitle {
    color: #667;
    font-size: 0.95rem;
    margin: 0 0 1.75rem;
}

.soc-aliado-landing-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.soc-aliado-landing-service-card {
    background: #ffffff;
    border: 1px solid #e3e8e6;
    border-radius: 12px;
    padding: 1.4rem 1.2rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.soc-aliado-landing-service-card:hover {
    box-shadow: 0 10px 24px rgba(11, 130, 97, 0.12);
    transform: translateY(-2px);
}

.soc-aliado-landing-service-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e6f5ef;
    color: #0b8261;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
}

.soc-aliado-landing-service-card h3 {
    font-size: 1.02rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.4rem;
}

.soc-aliado-landing-service-card p {
    font-size: 0.87rem;
    color: #5b6b66;
    line-height: 1.5;
    margin: 0;
}

/* ── Aliado GBM ───────────────────────────────────────────────────────────── */
.soc-aliado-landing-partner {
    max-width: 1180px;
    margin: 0.5rem auto 0;
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #4d5c57;
    font-size: 0.9rem;
}

.soc-aliado-landing-partner i {
    color: #0b8261;
    font-size: 1.3rem;
}

/* ── Testimonios ──────────────────────────────────────────────────────────── */
.soc-aliado-landing-testimonials {
    background: #ffffff;
    padding: 3rem 1.75rem 3.5rem;
    margin-top: 1.5rem;
}

.soc-aliado-landing-testimonials-inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.soc-aliado-landing-testimonials h2 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.4rem;
}

.soc-aliado-landing-testimonials > .soc-aliado-landing-testimonials-inner > p {
    color: #667;
    margin: 0 0 2rem;
}

.soc-aliado-landing-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    text-align: left;
}

.soc-aliado-landing-testimonial-card {
    border: 1px solid #e3e8e6;
    border-radius: 12px;
    padding: 1.2rem;
}

.soc-aliado-landing-testimonial-stars {
    color: #f5a623;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.soc-aliado-landing-testimonial-card p {
    font-size: 0.87rem;
    color: #3d4a46;
    line-height: 1.5;
    margin: 0 0 0.9rem;
}

.soc-aliado-landing-testimonial-author {
    font-size: 0.83rem;
    color: #667;
}

.soc-aliado-landing-testimonial-author strong {
    color: #1a1a1a;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .soc-aliado-landing-hero-inner {
        grid-template-columns: 1fr;
    }

    .soc-aliado-landing-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .soc-aliado-landing-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .soc-aliado-landing-title {
        font-size: 1.8rem;
    }

    .soc-aliado-landing-services-grid {
        grid-template-columns: 1fr;
    }

    .soc-aliado-landing-testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Dashboard interno del Portal de Aliados (post-login) ────────────────── */
.soc-aliado-dashboard-hero {
    background: linear-gradient(135deg, #0b3b2c 0%, #006d4e 45%, #0b8261 100%);
    color: #ffffff;
    padding: 2rem 1.75rem 2.25rem;
    margin: -1.5rem -1.5rem 1.5rem;
}

.soc-aliado-dashboard-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.soc-aliado-dashboard-hero h1 {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    color: #ffffff;
}

.soc-aliado-dashboard-hero p {
    color: rgba(255, 255, 255, 0.88);
    max-width: 640px;
    margin: 0 0 1.4rem;
    line-height: 1.5;
}

.soc-aliado-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
}

.soc-aliado-dashboard-kpi {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

.soc-aliado-dashboard-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.soc-aliado-dashboard-kpi-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.2rem;
}

.soc-aliado-dashboard-content {
    max-width: 1180px;
    margin: 0 auto;
}

.soc-aliado-dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.9rem;
}

.soc-aliado-dashboard-section-title i {
    color: #0b8261;
    font-size: 1.3rem;
}

.soc-aliado-dashboard-partner-card {
    border-left: 4px solid #0b8261;
    border: 1px solid #e3e8e6;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
}

.soc-aliado-dashboard-partner-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 500;
    color: #0b8261;
    margin-bottom: 0.7rem;
}

.soc-aliado-dashboard-partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1.5rem;
}

.soc-aliado-dashboard-partner-field label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a9490;
    margin-bottom: 0.15rem;
}

.soc-aliado-dashboard-partner-field span {
    font-size: 0.92rem;
    color: #1a1a1a;
    font-weight: 600;
}

.soc-aliado-dashboard-partner-field a {
    color: #0b8261;
}

@media (max-width: 768px) {
    .soc-aliado-dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .soc-aliado-dashboard-partner-grid {
        grid-template-columns: 1fr;
    }
}
.is-secondary{
    border: 1px solid var(--color-secundario-100);
    color: var(--color-primario);
    background: var(--color-secundario-100);
}
.e-stepper:not(.e-steps-focus) .e-step-selected .e-step {
    background: #006d4e !important;
    border-color: #006d4e !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4ed176 !important;
}
li.e-step-notstarted span{
    color: #B2B2B2 !important;
}
.--btn-md{
    height: 35px;
}
.e-kanban .e-kanban-content{
    margin-top: -10px;
}
.soc-kanban-card div:not(.soc-kanban-card-footer):not(.soc-kanban-card-no-executive):not(.soc-kanban-card-amounts):not(.soc-kanban-card-amount) {
    color: var(--color-primario);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.5;
}
.soc-kanban-card-name{
    color: var(--texto-body);
}
.soc-kanban-card-row i {
    color: var(--texto-body);
    margin-top: 3.5px;
    font-size: 18px;
}
.soc-kanban-card-assignees span
{
    height: 25px;
    font-weight: 450;
}

/* ===== Permisos de acciones por rol (/admin/permisos-rol) ===== */
.soc-perm-help {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.soc-perm-section {
    margin-bottom: 1.75rem;
}

.soc-perm-table th,
.soc-perm-table td {
    vertical-align: middle;
}

.soc-perm-role-col {
    min-width: 230px;
    text-align: left;
}

.soc-perm-role-name {
    font-weight: 500;
}

.soc-perm-badge-full {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #e7f5ef;
    color: #0b8261;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.soc-perm-check {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
}

.soc-perm-check:checked {
    background-color: #0b8261;
    border-color: #0b8261;
}

.soc-perm-always {
    color: #0b8261;
    font-size: 1.25rem;
}

/* ===== Pestaña "Seguimiento" de /admin/uso-plataforma (bitácora de auditoría) ===== */
.soc-audit-tab {
    padding: 0.5rem 0;
}

.soc-audit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin: 1rem 0;
}

.soc-audit-filters label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.soc-audit-filters select {
    min-width: 220px;
}

.soc-audit-filters-actions {
    display: flex;
    gap: 0.5rem;
}

.soc-audit-summary {
    font-size: 0.85rem;
    color: #5a6b66;
    margin-bottom: 0.5rem;
}

.soc-audit-table th,
.soc-audit-table td {
    vertical-align: middle;
    font-size: 0.875rem;
}

.soc-audit-date {
    white-space: nowrap;
}

.soc-audit-details {
    color: #5a6b66;
    max-width: 320px;
    word-break: break-word;
}

.soc-audit-pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

/* ===== Modal "Empleados asignables" (/admin/permisos-rol) ===== */
.soc-perm-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.soc-exec-modal .modal-content {
    border-radius: 10px;
}

.soc-exec-modal .modal-header {
    background: #0b8261;
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.soc-exec-modal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.soc-exec-modal-subtitle {
    font-size: 0.8rem;
    opacity: 0.9;
}

.soc-exec-help {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #5a6b66;
    margin-bottom: 0.75rem;
}

.soc-exec-table th,
.soc-exec-table td {
    vertical-align: middle;
    font-size: 0.875rem;
}

.soc-exec-name {
    display: block;
    font-weight: 500;
}

.soc-exec-username {
    display: block;
    font-size: 0.78rem;
    color: #7b8b86;
}

/* Fila atenuada: deja claro de un vistazo quién no aparecerá en el combo. */
.soc-exec-table tr.is-hidden-exec .soc-exec-name,
.soc-exec-table tr.is-hidden-exec td {
    color: #9aa8a4;
}

.soc-exec-empty {
    font-size: 0.875rem;
    color: #5a6b66;
}

/* ===== Modal "Registro de Cliente" (/admin/clientes) ===== */
.soc-nuevo-cliente-modal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.soc-nuevo-cliente-modal .modal-header {
    display: flex;
    align-items: center;
    /* Empuja el botón de cerrar al extremo derecho: sin esto queda pegado al título,
       porque .soc-nc-title es un contenedor propio y no ocupa el ancho disponible. */
    justify-content: space-between;
    border-bottom: 1px solid #e8efec;
    padding: 1rem 1.25rem;
}

.soc-nuevo-cliente-modal .soc-nc-title {
    /* Ocupa el espacio libre para que el título no se pegue al botón de cerrar. */
    flex: 1 1 auto;
    min-width: 0;
}

.soc-nuevo-cliente-modal .soc-nc-close {
    flex: 0 0 auto;
    margin-left: auto;
}

.soc-nc-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.soc-nc-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e7f5ef;
    color: var(--soc-btn-primary);
    font-size: 1.15rem;
}

.soc-nuevo-cliente-modal .modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--soc-btn-primary);
}

/* Cerrar dentro de un recuadro claro, como en la referencia. */
.soc-nc-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #e7f5ef;
    color: var(--soc-btn-primary);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.soc-nc-close:hover {
    background: #cfeadf;
}

.soc-nuevo-cliente-modal .modal-body {
    padding: 1.25rem;
}

.soc-nuevo-cliente-modal .form-label {
    font-weight: 300;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.soc-nuevo-cliente-modal .form-control,
.soc-nuevo-cliente-modal .form-select {
    border-radius: 8px;
    border-color: #d8e3df;
    padding: 0.5rem 0.75rem;
}

.soc-nuevo-cliente-modal .form-control:focus,
.soc-nuevo-cliente-modal .form-select:focus {
    border-color: var(--soc-btn-primary);
    box-shadow: 0 0 0 3px rgba(11, 130, 97, 0.12);
}

.soc-nc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e8efec;
}

.soc-nc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 450;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.soc-nc-btn.is-cancel {
    background: #fff;
    border: 1px solid #f0c2c2;
    color: #c0392b;
}

.soc-nc-btn.is-cancel:hover {
    background: #fdf0ef;
}

.soc-nc-btn.is-submit {
    background: #04684c;
    border: 1px solid #04684c;
    color: #fff;
}

.soc-nc-btn.is-submit:hover {
    background: #035440;
}

/* En móvil los botones ocupan el ancho completo, para no quedar apretados. */
@media (max-width: 575.98px) {
    .soc-nc-actions {
        flex-direction: column-reverse;
    }

    .soc-nc-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ===== Encabezado: botones de acción configurables desde /admin/apariencia =====
   La campana es un PNG, así que no admite `color`: se usa como máscara (mask-image) y el
   color se aplica con background-color, lo que permite cualquier tono elegido. */
.header-actions .header-action,
.header-actions .logout-door-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    background: var(--soc-header-icon-bg, #e7f5ef);
    transition: background-color 0.15s ease;
}

.header-actions .header-action:hover,
.header-actions .logout-door-btn:hover {
    filter: brightness(0.95);
}

/* La campana: el PNG recorta la silueta y el color lo da background-color. */
.header-actions .header-bell {
    width: 22px;
    height: 22px;
    /* El filtro anterior la forzaba a blanco; ahora el color es configurable. */
    filter: none;
    background-color: var(--soc-header-icon-color, #0b5c46);
    -webkit-mask-image: var(--soc-header-bell-mask);
    mask-image: var(--soc-header-bell-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.header-bell-badge {
    background: var(--soc-header-badge-bg, #f4562a);
}

/* Botón "Actualizar a la última versión": limpia cachés y recarga. Hereda el
   recuadro de `.header-action`, solo aporta el color e ícono. */
.header-actions .header-refresh-btn {
    cursor: pointer;
    color: var(--soc-header-icon-color, #0b5c46);
}

.header-actions .header-refresh-btn i {
    font-size: 1.35rem;
    line-height: 1;
}

.header-actions .header-refresh-btn.is-busy {
    pointer-events: none;
    opacity: 0.6;
}

.header-actions .header-refresh-btn.is-busy i {
    animation: soc-header-refresh-spin 0.8s linear infinite;
}

@keyframes soc-header-refresh-spin {
    to { transform: rotate(360deg); }
}

/* Cerrar sesión: la puerta son divs con CSS, así que hereda el color del ícono. */
.header-actions .logout-door-btn {
    color: var(--soc-header-icon-color, #0b5c46);
}

/* La puerta mide 26x34px y quedaba al ras del recuadro de 40px (3px por lado). Se reduce con
   scale en vez de recalcular cada medida: sus piezas (marco, panel, manija) están
   proporcionadas entre sí y la animación de apertura depende de esas proporciones. */
.header-actions .logout-door-btn .door-scene {
    transform: scale(0.75);
}

/* Teñido del logo con el color elegido en /admin/apariencia.
   El logo se pinta en un <div> y no en un <img> a propósito: la máscara recorta el elemento
   completo, así que en un <img> el bitmap original seguiría dibujándose encima del color
   (el logo blanco tapaba el verde). Un div solo tiene background, que es justo lo que se tiñe.
   Hace falta porque el logo real puede venir de dos fuentes con colores distintos: el PNG
   local (verde) o el LogoUrl del tenant (en el caso de SOC Asesores, todo blanco y por tanto
   invisible sobre un encabezado claro). La máscara los unifica en el color configurado.

   La url() de la máscara la inyecta Header.razor en línea, porque debe ser la del logo que
   se está mostrando, no una ruta fija. */
.header-logo-img.is-tinted {
    /* Al enmascarar, los píxeles del <img> quedan transparentes y "width: auto" colapsaría a
       cero: el ancho debe ser explícito. Se usa un ancho amplio en lugar de calcularlo por
       ratio porque los dos logos posibles tienen proporciones distintas (3.84 y 5.14);
       mask-size: contain ajusta la silueta dentro sin deformarla. */
    width: 170px;
    background-color: var(--soc-header-icon-color, #0b5c46);
    -webkit-mask-image: var(--soc-header-logo-mask);
    mask-image: var(--soc-header-logo-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Tabla de histórico (modal "Histórico" de Aliados) — mismo criterio visual que
   .soc-client-list-table, pero sin cursor/hover de fila clicable. */
.soc-history-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.soc-history-table {
    margin-bottom: 0;
    width: 100%;
    font-size: 0.85rem;
}

.soc-history-table thead th {
    background-color: #006d4e;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    padding: 0.65rem 0.85rem;
    white-space: nowrap;
}

.soc-history-table tbody td {
    vertical-align: top;
    padding: 0.6rem 0.85rem;
    color: #4b5563;
    border-bottom: 1px solid #eef1f0;
}

.soc-history-table tbody tr:nth-child(even) td {
    background-color: #f7faf9;
}

.soc-history-table tbody tr:last-child td {
    border-bottom: none;
}

.soc-history-date,
.soc-history-user {
    white-space: nowrap;
}

.soc-history-action {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    background: #e3f6ee;
    color: #047857;
}

.soc-history-change {
    display: block;
    margin-bottom: 2px;
}

.soc-history-change:last-child {
    margin-bottom: 0;
}

.soc-history-change-field {
    color: #374151;
    font-weight: 600;
}

.soc-history-change-old {
    color: #9ca3af;
}

.soc-history-change-new {
    color: #065f46;
    font-weight: 600;
}

/* ===================== COMENTARIOS (ficha de cliente) ===================== */
.soc-comentarios {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.soc-comentarios-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
}

.soc-comentarios-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.soc-comentarios-hint {
    font-size: 0.8rem;
    color: #64748b;
}

.soc-comentarios-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.soc-comentario-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0b8261;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.soc-comentario-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.soc-comentario-author {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.soc-comentario-author i {
    font-size: 1.1rem;
    color: #0b8261;
}

.soc-comentario-date {
    font-size: 0.8rem;
    color: #64748b;
}

/* El comentario es texto libre: se respetan los saltos de línea que escribió el usuario y se
   parten las palabras muy largas (una URL pegada) para que no desborden la tarjeta. */
.soc-comentario-text {
    margin: 0;
    font-size: 0.92rem;
    color: #334155;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ===================== FICHA DE CLIENTE — TAB "DATOS" =====================
   Un campo por fila y un tratamiento visual uniforme de etiquetas y controles.
   Todo va acotado a .soc-datos-form para no alterar el resto de formularios. */

/* Las tarjetas (Básicos/Complementarios/Oficina) reparten sus campos en columnas de Bootstrap.
   Aquí se fuerza el ancho completo: con dos campos por fila, los valores largos (un correo, el
   nombre de un ejecutivo, una razón social) quedaban cortados. */
.soc-datos-form .soc-resumen-card .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.soc-datos-form .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.3rem;
}

/* Un solo tratamiento para todos los controles del tab, incluidos los que Syncfusion renderiza
   con su propio marcado (montos, fechas), que de otro modo no coincidirían con los nativos. */
.soc-datos-form .form-control,
.soc-datos-form .form-select,
.soc-datos-form .e-input-group,
.soc-datos-form .e-control-wrapper.e-input-group {
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 0.9rem;
    color: #1e293b;
    min-height: 42px;
    box-shadow: none;
}

.soc-datos-form .form-control::placeholder {
    color: #b4bfcc;
}

.soc-datos-form .form-control:focus,
.soc-datos-form .form-select:focus,
.soc-datos-form .e-input-group.e-input-focus {
    border-color: #0b8261;
    box-shadow: 0 0 0 3px rgba(11, 130, 97, 0.12);
}

/* Syncfusion dibuja su propio subrayado al enfocar: se desactiva para que el foco se vea igual
   que en los campos nativos (borde verde + halo). */
.soc-datos-form .e-input-group:not(.e-float-icon-left)::before,
.soc-datos-form .e-input-group:not(.e-float-icon-left)::after {
    display: none;
}

.soc-datos-form .e-input-group input.e-input {
    font-size: 0.9rem;
    color: #1e293b;
}

/* Campos de solo lectura (Razón social, Titular...): se distinguen de los editables por el fondo,
   conservando la misma caja para que las columnas no se desalineen. */
.soc-datos-form .soc-field-masked,
.soc-datos-form .form-control[readonly] {
    background-color: #f5f7fa;
    border-radius: 10px;
    border-color: #e4e9f0;
}

.soc-datos-form .soc-field-masked {
    min-height: 42px;
    height: auto;
}

/* ===================== FICHA DE CLIENTE — CAPITALIZACIÓN POR PESTAÑA =====================
   Solo presentación: el dato se guarda tal como se capturó, así que esto no altera nada en la
   base ni el valor que viaja al backend (importante para los correos, sensibles a mayúsculas). */

/* --- Resumen y Datos: los VALORES en mayúsculas --- */

/* Resumen: <dd> son los valores; <dt> (las etiquetas) quedan como están. */
.soc-resumen-datalist dd {
    text-transform: uppercase;
}

/* Datos: los controles de captura y los campos de solo lectura. Las etiquetas (.form-label)
   se excluyen a propósito, igual que en Resumen. */
.soc-datos-form .form-control,
.soc-datos-form .form-select,
.soc-datos-form .form-select option,
.soc-datos-form .form-control-plaintext,
.soc-datos-form .e-input-group input.e-input {
    text-transform: uppercase;
}

/* El texto del placeholder no es un valor capturado: se deja en su forma original para que siga
   leyéndose como una indicación ("Seleccione", "$0.00") y no como un dato del cliente. */
.soc-datos-form .form-control::placeholder,
.soc-datos-form .e-input-group input.e-input::placeholder {
    text-transform: none;
}

/* --- Histórico y Comentarios: en minúsculas --- */
.soc-history-table tbody td,
.soc-comentarios-list .soc-comentario-text,
.soc-comentarios-list .soc-comentario-author {
    text-transform: lowercase;
}
span.header-action.header-bell-wrap {
    font-size: 20px;
}
.soc-resumen-card-header.--header-card-stepper{
    background-color: inherit;
    padding: 0;
    padding-bottom: 13px;
}
.container_elements {
    display: flex;
    align-items: center;
    gap: 10px;
}
.container-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* Debajo de 1440px cada tarjeta ocupa el renglón (col-12). En 1440+ quedan
   4/12 y 8/12, descontando el gap para que no se empujen fuera del flex. */
.container-flex > .soc-datos-section {
    min-width: 0;
    flex: 1 1 100%;
}

@media (min-width: 1440px) {
    .container-flex > .soc-datos-section:first-child {
        flex: 1 1 calc((100% - 10px) * 4 / 12);
        max-width: calc((100% - 10px) * 4 / 12);
    }

    .container-flex > .soc-datos-section:last-child {
        flex: 1 1 calc((100% - 10px) * 8 / 12);
        max-width: calc((100% - 10px) * 8 / 12);
    }
}

/* La tabla de documentos no cabe en el col-8 bajo 1440: se desplaza dentro
   de la tarjeta en vez de desbordarla. min-width: 0 del flex item de arriba
   es lo que permite que este overflow funcione. */
.container-flex .soc-table-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1439.98px) {
    .container-flex .soc-table-scroll > table {
        min-width: 800px;
    }
}

.soc-kanban-card-assignees span {
    color: var(--color-primario);
    font-size: 14px;
}
.e-kanban{
    background-color: transparent !important;
}
.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td{
    background-color: transparent !important;
}
.e-kanban .e-kanban-header .e-header-cells{
    padding: 0 !important;
    background: #ffff !important;
}
.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-wrapper, .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container{
background: #ffff !important;
    margin-top: 0px !important;
    border: 1px solid #e5e7eb;
    border-top: 0;
    margin-left: -1px;
    width: 279px;
    padding: 12px 12px !important;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card{
    border: 1px solid #e8ecea !important;
}
.soc-kanban-card{
    border: none !important;
}
.e-control, .e-css, .e-error{
    font-family: "CircularXX", sans-serif !important;
}
.e-card{
    font-family: var(--body-font) !important;
}
article.soc-stage-card a {
    font-size: 14px;
    font-weight: 450;
}

/* ===== /admin/agenda-sincronizacion ===== */
.soc-agenda-sync-help {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #eef7f3;
    color: #0a6f52;
    font-size: 0.9rem;
}

.soc-agenda-sync-search {
    max-width: 320px;
}

.soc-agenda-sync-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.soc-agenda-sync-status.is-ok { background: #dff3ea; color: #0a6f52; }
.soc-agenda-sync-status.is-pending { background: #fff4d6; color: #8a6100; }
.soc-agenda-sync-status.is-error { background: #fdecec; color: #c62828; }
.soc-agenda-sync-status.is-off { background: #eef0f2; color: #5f6b76; }

/* ===== Agenda: sección de Outlook/Teams del formulario de evento ===== */
.soc-agenda-outlook-section {
    padding: 0.75rem 0.9rem;
    border: 1px solid #d7ebe3;
    border-radius: 8px;
    background: #f6fbf9;
}

.soc-agenda-outlook-hint {
    font-size: 0.85rem;
    color: #0a6f52;
}

.soc-agenda-attendees {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.soc-agenda-attendee {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.35rem 0.15rem 0.6rem;
    border-radius: 999px;
    background: #dff3ea;
    color: #0a6f52;
    font-size: 0.85rem;
}

.soc-agenda-attendee button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.soc-agenda-sync-line {
    font-size: 0.85rem;
}

/* ===== /admin/agenda-reporte ===== */
.soc-agenda-report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.soc-agenda-report-note {
    font-size: 0.85rem;
    color: #5f6b76;
}

.soc-agenda-report-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.soc-agenda-report-kpi {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    border: 1px solid #d7ebe3;
    border-radius: 10px;
    background: #fff;
}

.soc-agenda-report-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b8261;
}

.soc-agenda-report-kpi-label {
    font-size: 0.85rem;
    color: #5f6b76;
}

.soc-agenda-report-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.soc-agenda-report-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.soc-agenda-report-bar-label {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-agenda-report-bar-track {
    height: 14px;
    border-radius: 999px;
    background: #eef0f2;
    overflow: hidden;
}

.soc-agenda-report-bar {
    height: 100%;
    border-radius: 999px;
    background: #0b8261;
}

.soc-agenda-report-bar.is-unclassified {
    background: #b0b8bf;
}

.soc-agenda-report-bar-value {
    font-size: 0.85rem;
    color: #5f6b76;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .soc-agenda-report-bar-row {
        grid-template-columns: 1fr auto;
    }

    .soc-agenda-report-bar-track {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* ===== Importar clientes (/admin/importar-clientes) ===== */
.soc-import-card {
    background: #fff;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    padding: 14px 16px;
}

.soc-import-steps {
    margin: 0 0 12px;
    padding-left: 1.2rem;
    color: #4b5563;
    font-size: 0.9rem;
}

.soc-import-file {
    max-width: 420px;
}

/* La tabla puede traer cientos de filas: se desplaza dentro de su caja y el encabezado queda fijo. */
.soc-import-table {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
}

.soc-import-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #006d4e;
    color: #fff;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.soc-import-table td {
    font-size: 0.85rem;
}
table.--table-primary thead > tr > th {
    background-color: #006D4E;
    color: #fff;
    font-weight: 450;
    padding: 10px;
}
.--btn-icon-red{
    color: #dc2626;
}
.--btn-red{
    background: #fee2e2;
    color: #dc2626;
    border-color: #fee2e2;
}
.--btn-icon-green{
color: var(--color-primario);
}
table.--table-primary tbody > tr > td {
    padding: 10px;
    vertical-align: middle;    
    font-weight: 300;
}
table.--table-primary thead > tr > th:last-child,
table.--table-primary tbody > tr > td:last-child {
    width: 115px;
    padding: 10px 0;
}
.soc-kanban-col-totals > div {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #e8ecea !important;
}
.soc-kanban-col-totals > div:first-child{
    padding-right: 20px;
}
.soc-kanban-col-totals > div:last-child{
    border-right: none !important;
}
.soc-tablero-filters-top .soc-tablero-filters-search{
    max-height: 35px !important;
}
/* ==========================================================================
   Reporte de seguimiento de clientes (/admin/seguimiento-clientes)
   Orden de lectura: filtros → indicadores con medidor → salud de la cartera →
   gráficas por etapa y por ejecutivo → lista (tabla en pantallas anchas, tarjetas en angostas).
   Semáforo: verde = en tiempo, ámbar = por vencer (≥ 75 % del umbral), rojo = atorado,
   gris = etapa sin umbral. Verdes tomados de la ficha de cliente (/admin/clientes).
   ========================================================================== */
/* Variables y retícula compartidas con el tablero de colocación (/admin/colocacion). */
.soc-seguimiento-page,
.soc-colocacion-page,
.soc-bitacora-page {
    --seg-green: #0b8261;
    --seg-green-dark: #006d4e;
    --seg-green-solid: #04684c;
    --seg-mint: #eefaf5;
    --seg-mint-2: #d6f1e6;
    --seg-mint-3: #c6f0e2;
    --seg-line: #e3ebe8;
    --seg-line-2: #eef3f1;
    --seg-ink: #1e293b;
    --seg-ink-2: #475569;
    --seg-ink-3: #7b8794;
    --seg-crit: #d92d20;
    --seg-crit-ink: #b42318;
    --seg-crit-bg: #fef0ee;
    --seg-warn: #f79009;
    --seg-warn-ink: #b54708;
    --seg-warn-bg: #fff6e8;
    --seg-none: #cbd5e1;
    --seg-none-ink: #64748b;
    --seg-none-bg: #f1f5f9;
    --seg-shadow: 0 1px 2px rgba(15, 40, 30, .05), 0 2px 8px rgba(15, 40, 30, .04);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.soc-seguimiento-page .soc-page-header,
.soc-seguimiento-page .alert,
.soc-colocacion-page .soc-page-header,
.soc-colocacion-page .alert,
.soc-bitacora-page .soc-page-header,
.soc-bitacora-page .alert {
    margin: 0;
}

.soc-seg-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--seg-ink-3);
}

.soc-seg-num,
.soc-seg-kpi strong,
.soc-seg-bar-total,
.soc-seg-health-figure b {
    font-variant-numeric: tabular-nums;
}

/* ── Barra de filtros: se queda bajo el encabezado fijo (72px) al desplazarse ── */
.soc-seg-toolbar {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--seg-line);
    border-radius: 12px;
    box-shadow: var(--seg-shadow);
}

.soc-seg-segmented {
    display: inline-flex;
    flex: none;
    padding: 3px;
    border: 1px solid var(--seg-line);
    border-radius: 10px;
    background: #f8fbfa;
}

.soc-seg-segmented button {
    border: 0;
    background: none;
    padding: 6px 14px;
    border-radius: 7px;
    color: var(--seg-ink-2);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.soc-seg-segmented button:hover:not(.is-active) {
    color: var(--seg-green-dark);
}

.soc-seg-segmented button.is-active {
    background: var(--seg-green);
    color: #fff;
}

.soc-seg-filter {
    flex: 1 1 190px;
    min-width: 0;
}

.soc-seg-filter .form-select {
    min-height: 36px;
    font-size: 0.85rem;
}

.soc-seg-switch {
    flex: none;
    margin: 0;
    font-size: 0.85rem;
    color: var(--seg-ink-2);
    white-space: nowrap;
}

.soc-seg-switch .form-check-input:checked {
    background-color: var(--seg-green);
    border-color: var(--seg-green);
}

/* ── Indicadores ── */
.soc-seg-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.soc-seg-kpi {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--seg-line);
    border-radius: 12px;
    box-shadow: var(--seg-shadow);
    color: var(--seg-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.soc-seg-kpi:hover {
    border-color: var(--seg-green);
}

.soc-seg-kpi.is-active {
    border-color: var(--seg-green);
    box-shadow: 0 0 0 3px var(--seg-mint-2);
}

.soc-seg-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.soc-seg-kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--seg-ink-3);
}

.soc-seg-kpi-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    font-size: 1.1rem;
}

.soc-seg-kpi strong {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.soc-seg-kpi-caption {
    font-size: 12px;
    color: var(--seg-ink-3);
}

.soc-seg-meter {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--seg-line-2);
}

.soc-seg-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.soc-seg-kpi.is-ok .soc-seg-kpi-icon { background: var(--seg-mint); color: var(--seg-green); }
.soc-seg-kpi.is-ok .soc-seg-meter span { background: var(--seg-green); }
.soc-seg-kpi.is-crit .soc-seg-kpi-icon { background: var(--seg-crit-bg); color: var(--seg-crit); }
.soc-seg-kpi.is-crit strong { color: var(--seg-crit-ink); }
.soc-seg-kpi.is-crit .soc-seg-meter span { background: var(--seg-crit); }
.soc-seg-kpi.is-warn .soc-seg-kpi-icon { background: var(--seg-warn-bg); color: var(--seg-warn); }
.soc-seg-kpi.is-warn strong { color: var(--seg-warn-ink); }
.soc-seg-kpi.is-warn .soc-seg-meter span { background: var(--seg-warn); }
.soc-seg-kpi.is-none .soc-seg-kpi-icon { background: var(--seg-none-bg); color: var(--seg-none-ink); }
.soc-seg-kpi.is-none .soc-seg-meter span { background: var(--seg-none-ink); }

/* ── Paneles ── */
.soc-seg-panel {
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--seg-line);
    border-radius: 12px;
    box-shadow: var(--seg-shadow);
}

.soc-seg-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 14px;
}

.soc-seg-panel h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--seg-ink);
}

.soc-seg-panel-head p {
    margin: 0;
    font-size: 12px;
    color: var(--seg-ink-3);
}

.soc-seg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--seg-ink-2);
}

.soc-seg-legend span,
.soc-seg-health-figure small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.soc-seg-sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 3px;
}

.soc-seg-sw.is-ok,
.soc-seg-health .is-ok,
.soc-seg-stack .is-ok { background: var(--seg-green); }
.soc-seg-sw.is-warn,
.soc-seg-health .is-warn,
.soc-seg-stack .is-warn { background: var(--seg-warn); }
.soc-seg-sw.is-crit,
.soc-seg-health .is-crit,
.soc-seg-stack .is-crit { background: var(--seg-crit); }
.soc-seg-sw.is-none,
.soc-seg-health .is-none,
.soc-seg-stack .is-none { background: var(--seg-none); }

/* ── Salud de la cartera: una barra con los cuatro estados ── */
.soc-seg-health {
    display: flex;
    gap: 2px;
    height: 34px;
    overflow: hidden;
    border-radius: 8px;
}

.soc-seg-health.is-loading {
    background: var(--seg-line-2);
}

.soc-seg-health > div {
    display: flex;
    align-items: center;
    flex-basis: 0;
    min-width: 6px;
    padding-inline: 10px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.soc-seg-health > .is-none {
    color: var(--seg-ink-2);
}

.soc-seg-health-foot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.soc-seg-health-figure {
    display: grid;
    gap: 1px;
}

.soc-seg-health-figure small,
.soc-seg-health-figure span {
    font-size: 12px;
    color: var(--seg-ink-3);
}

.soc-seg-health-figure b {
    font-size: 1.05rem;
    color: var(--seg-ink);
}

.soc-seg-panel > .soc-seg-note {
    margin-top: 10px;
}

/* ── Gráficas de barras apiladas (etapa y ejecutivo) ── */
.soc-seg-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.soc-seg-charts.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.soc-seg-bars {
    display: grid;
    gap: 6px;
}

.soc-seg-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--seg-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.soc-seg-bar-row:hover:not(:disabled) {
    background: #f8fbfa;
}

.soc-seg-bar-row.is-selected,
.soc-seg-exec.is-selected {
    background: var(--seg-mint);
}

.soc-seg-bar-row:disabled {
    cursor: default;
}

.soc-seg-bar-label {
    display: grid;
    min-width: 0;
}

.soc-seg-bar-label > span {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-seg-bar-label small {
    overflow: hidden;
    font-size: 11px;
    color: var(--seg-ink-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-seg-stack {
    display: flex;
    gap: 2px;
    height: 14px;
    min-width: 0;
}

.soc-seg-stack i {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 3px;
}

.soc-seg-bar-total {
    min-width: 64px;
    font-size: 0.8rem;
    color: var(--seg-ink-3);
    text-align: right;
    white-space: nowrap;
}

.soc-seg-bar-total b {
    color: var(--seg-crit-ink);
    font-weight: 600;
}

.soc-seg-exec {
    border-radius: 8px;
}

.soc-seg-exec .soc-seg-bar-row {
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
}

.soc-seg-exec.is-selected .soc-seg-bar-row {
    background: none;
}

.soc-seg-exec-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px 8px calc(170px + 20px);
}

.soc-seg-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border: 1px solid var(--seg-line);
    border-radius: 999px;
    background: #fff;
    color: var(--seg-ink-2);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

button.soc-seg-count-chip:hover {
    border-color: var(--seg-green);
    background: var(--seg-mint);
}

.soc-seg-count-chip b {
    font-weight: 600;
    color: var(--seg-green-dark);
}

.soc-seg-count-chip.is-crit b { color: var(--seg-crit-ink); }
.soc-seg-count-chip.is-warn b { color: var(--seg-warn-ink); }
.soc-seg-count-chip.is-none b { color: var(--seg-none-ink); }

.soc-seg-count-chip.is-empty {
    border-style: dashed;
    color: var(--seg-ink-3);
    cursor: default;
}

/* ── Lista ── */
.soc-seg-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.soc-seg-list-head h2 {
    margin-bottom: 2px;
}

.soc-seg-count {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--seg-mint);
    color: var(--seg-green-dark);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.soc-seg-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px dashed var(--seg-mint-3);
    border-radius: 10px;
    background: var(--seg-mint);
    color: var(--seg-green-dark);
    font-size: 0.9rem;
}

.soc-seg-empty i {
    font-size: 1.4rem;
}

.soc-seg-table-wrap {
    overflow-x: auto;
}

.soc-seg-table {
    min-width: 900px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.soc-seg-table thead th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--seg-line);
    background: #fff;
    color: var(--seg-ink-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.soc-seg-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--seg-line-2);
    vertical-align: middle;
    font-size: 0.85rem;
    color: var(--seg-ink);
}

.soc-seg-table tbody tr:hover td {
    background: #f8fbfa;
}

.soc-seg-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.soc-seg-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--seg-mint);
    color: var(--seg-green-dark);
    font-size: 12px;
    font-weight: 600;
}

.soc-seg-who-text {
    display: grid;
    min-width: 0;
}

.soc-seg-who-text b {
    overflow: hidden;
    color: var(--seg-green-dark);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-seg-who-text small,
.soc-seg-activity small,
.soc-seg-muted {
    color: var(--seg-ink-3);
    font-size: 12px;
}

.soc-seg-activity {
    display: grid;
}

.soc-seg-stage {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--seg-line);
    border-radius: 999px;
    background: #f8fbfa;
    font-size: 12px;
    white-space: nowrap;
}

.soc-seg-days {
    display: grid;
    gap: 4px;
    min-width: 120px;
}

.soc-seg-days-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--seg-ink-3);
    white-space: nowrap;
}

.soc-seg-days-top b {
    font-size: 13px;
    color: var(--seg-ink);
    font-variant-numeric: tabular-nums;
}

.soc-seg-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--seg-line-2);
}

.soc-seg-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--seg-green);
}

.soc-seg-days.is-crit .soc-seg-progress span { background: var(--seg-crit); }
.soc-seg-days.is-crit .soc-seg-days-top b { color: var(--seg-crit-ink); }
.soc-seg-days.is-warn .soc-seg-progress span { background: var(--seg-warn); }
.soc-seg-days.is-warn .soc-seg-days-top b { color: var(--seg-warn-ink); }

.soc-seg-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.soc-seg-pill.is-crit { background: var(--seg-crit-bg); color: var(--seg-crit-ink); }
.soc-seg-pill.is-warn { background: var(--seg-warn-bg); color: var(--seg-warn-ink); }
.soc-seg-pill.is-ok { background: var(--seg-mint); color: var(--seg-green-dark); }
.soc-seg-pill.is-none { background: var(--seg-none-bg); color: var(--seg-none-ink); }

.soc-seg-overdue {
    display: flex;
    width: fit-content;
    margin-top: 4px;
}

.soc-seg-go {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--seg-mint);
    color: var(--seg-green);
    font-size: 1.15rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.soc-seg-table tbody tr:hover .soc-seg-go {
    background: var(--seg-green);
    color: #fff;
}

/* Tarjetas: sustituyen a la tabla en pantallas angostas. */
.soc-seg-cards {
    display: none;
    gap: 10px;
}

.soc-seg-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--seg-line);
    border-left: 4px solid var(--seg-green);
    border-radius: 10px;
    background: #fff;
    color: var(--seg-ink);
    text-decoration: none;
}

.soc-seg-card:hover {
    border-color: var(--seg-green);
    color: var(--seg-ink);
}

.soc-seg-card.is-crit { border-left-color: var(--seg-crit); }
.soc-seg-card.is-warn { border-left-color: var(--seg-warn); }
.soc-seg-card.is-none { border-left-color: var(--seg-none); }

.soc-seg-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.soc-seg-card-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.soc-seg-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
    font-size: 12px;
}

.soc-seg-card-grid dt {
    font-weight: 400;
    color: var(--seg-ink-3);
}

.soc-seg-card-grid dd {
    margin: 0;
    font-weight: 500;
}

/* Detalle por ejecutivo: mismo ancho que el modal de brokers. */
.soc-seguimiento-modal .modal-dialog {
    max-width: 1400px;
    width: 95vw;
}

/* ── Adaptación por ancho ── */
@media (max-width: 1199.98px) {
    .soc-seg-charts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .soc-seguimiento-page,
    .soc-colocacion-page,
    .soc-colocacion-body {
        gap: 12px;
    }

    .soc-seg-toolbar {
        position: static;
    }

    .soc-seg-segmented {
        width: 100%;
    }

    .soc-seg-segmented button {
        flex: 1 1 0;
        padding-inline: 8px;
    }

    .soc-seg-filter,
    .soc-seg-switch {
        flex: 1 1 100%;
    }

    .soc-seg-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .soc-seg-kpi {
        padding: 12px;
    }

    .soc-seg-kpi strong {
        font-size: 1.5rem;
    }

    .soc-seg-health-foot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .soc-seg-bar-row,
    .soc-seg-exec .soc-seg-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
    }

    .soc-seg-bar-row .soc-seg-stack {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .soc-seg-exec-counts {
        padding-left: 8px;
    }

    .soc-seg-table-wrap {
        display: none;
    }

    .soc-seg-cards {
        display: grid;
    }
}

@media (max-width: 420px) {
    .soc-seg-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .soc-seg-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .soc-seg-meter span,
    .soc-seg-kpi,
    .soc-seg-bar-row {
        transition: none;
    }
}

/* ==========================================================================
   Tablero de colocación e inversión (/admin/colocacion)
   Lectura: indicadores con variación contra el año anterior → lectura rápida en texto →
   colocación mensual (columnas, año actual contra anterior) → mezcla por segmento →
   tamaño de inversión y embudo → concentración de la cartera.
   Comparte variables, barra de filtros, tarjetas y paneles con el reporte de seguimiento.
   ========================================================================== */
.soc-colocacion-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.soc-col-period {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--seg-ink-3);
}

.soc-col-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.soc-col-kpi {
    cursor: default;
}

.soc-col-kpi:hover {
    border-color: var(--seg-line);
}

.soc-col-kpi-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.soc-col-kpi.is-warn .soc-col-kpi-value strong {
    color: var(--seg-ink);
}

.soc-col-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.soc-col-delta.is-up {
    background: var(--seg-mint);
    color: var(--seg-green-dark);
}

.soc-col-delta.is-down {
    background: var(--seg-crit-bg);
    color: var(--seg-crit-ink);
}

/* Lectura rápida */
.soc-col-insights h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.soc-col-insights h2 i {
    color: var(--seg-warn);
    font-size: 1.2rem;
}

.soc-col-insights ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.soc-col-insights li {
    position: relative;
    padding-left: 18px;
    font-size: 0.9rem;
    color: var(--seg-ink-2);
    line-height: 1.45;
}

.soc-col-insights li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--seg-none);
}

.soc-col-insights li.is-ok::before { background: var(--seg-green); }
.soc-col-insights li.is-warn::before { background: var(--seg-warn); }
.soc-col-insights li.is-crit::before { background: var(--seg-crit); }

/* Colocación mensual: columnas a una sola escala, con rejilla de referencia. */
.soc-col-sw-cur { background: var(--seg-green); }
.soc-col-sw-prev { background: var(--seg-mint-3); }

.soc-col-chart-scroll {
    overflow-x: auto;
}

.soc-col-chart {
    position: relative;
    min-width: calc(var(--cols, 12) * 44px + 64px);
    height: 260px;
    padding: 18px 0 40px 64px;
}

.soc-col-chart-grid {
    position: absolute;
    inset: 18px 0 40px 64px;
    pointer-events: none;
}

.soc-col-chart-grid span {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--seg-line);
}

.soc-col-chart-grid em {
    position: absolute;
    right: calc(100% + 8px);
    top: -0.6em;
    font-size: 11px;
    font-style: normal;
    color: var(--seg-ink-3);
    white-space: nowrap;
}

.soc-col-chart-cols {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
    height: 100%;
    border-bottom: 1px solid var(--seg-line);
}

.soc-col-month {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.soc-col-month:hover .soc-col-bar.is-cur {
    background: var(--seg-green-dark);
}

.soc-col-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 100%;
}

.soc-col-bar {
    position: relative;
    display: block;
    width: 38%;
    max-width: 22px;
    min-height: 0;
    border-radius: 4px 4px 0 0;
    transition: height .3s ease, background-color .15s ease;
}

.soc-col-bar.is-prev { background: var(--seg-mint-3); }
.soc-col-bar.is-cur { background: var(--seg-green); }

.soc-col-bar em {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    color: var(--seg-ink-2);
    white-space: nowrap;
}

.soc-col-month-label {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    text-align: center;
    font-size: 11px;
    color: var(--seg-ink-2);
    text-transform: capitalize;
}

.soc-col-month-label small {
    color: var(--seg-ink-3);
    font-size: 10px;
}

.soc-col-chart-foot {
    margin-top: 6px;
}

/* Encabezado de la sección de mezcla, con el selector de medida. */
.soc-col-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 4px;
}

.soc-col-section-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--seg-green-dark);
}

.soc-col-section-head p {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--seg-ink-3);
}

.soc-col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* Barras horizontales de segmentos y rangos */
.soc-col-rows {
    display: grid;
    gap: 4px;
}

.soc-col-row {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--seg-ink);
    text-align: left;
}

button.soc-col-row {
    cursor: pointer;
    transition: background-color .15s ease;
}

button.soc-col-row:hover {
    background: #f8fbfa;
}

.soc-col-row.is-selected {
    background: var(--seg-mint);
}

.soc-col-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.soc-col-row-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-col-row-value {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.soc-col-row-value small {
    margin-left: 4px;
    font-weight: 400;
    color: var(--seg-ink-3);
}

.soc-col-row-sub {
    font-size: 11px;
    color: var(--seg-ink-3);
}

.soc-col-track {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--seg-line-2);
}

.soc-col-track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--seg-green);
    transition: width .3s ease;
}

.soc-col-row.is-other .soc-col-track > span { background: var(--seg-green-light, #6fc3a5); }
.soc-col-row.is-nodata .soc-col-track > span { background: var(--seg-none); }
.soc-col-row.is-nodata .soc-col-row-name { color: var(--seg-ink-3); font-style: italic; }

/* Embudo: barras centradas, el ancho es el número de clientes de la etapa. */
.soc-col-funnel {
    display: grid;
    gap: 6px;
}

.soc-col-funnel-row {
    display: grid;
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 80px;
    align-items: center;
    gap: 10px;
}

.soc-col-funnel-name {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soc-col-funnel-track {
    display: flex;
    justify-content: center;
}

.soc-col-funnel-track > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    border-radius: 6px;
    background: var(--seg-green);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.soc-col-funnel-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--seg-ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Concentración */
.soc-col-top-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 12px;
}

.soc-col-top-head h2 {
    margin-bottom: 2px;
}

.soc-col-concentration {
    display: grid;
    gap: 4px;
    min-width: 220px;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--seg-mint);
}

.soc-col-concentration strong {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--seg-green-dark);
}

.soc-col-concentration span:not(.soc-seg-meter) {
    font-size: 12px;
    color: var(--seg-ink-2);
}

.soc-col-concentration .soc-seg-meter span {
    background: var(--seg-green);
}

.soc-col-concentration.is-warn {
    background: var(--seg-warn-bg);
}

.soc-col-concentration.is-warn strong {
    color: var(--seg-warn-ink);
}

.soc-col-concentration.is-warn .soc-seg-meter span {
    background: var(--seg-warn);
}

.soc-col-top-table {
    min-width: 860px;
}

.soc-col-share {
    display: inline-grid;
    gap: 3px;
    min-width: 90px;
    font-variant-numeric: tabular-nums;
}

.soc-col-share .soc-col-track {
    height: 5px;
}

/* Grupos de indicadores con título ("Saldo e inversión", "Colocación y pipeline"). */
.soc-col-group {
    display: grid;
    gap: 8px;
}

.soc-col-group-title {
    margin: 4px 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--seg-green-dark);
}

/* El saldo es el número central: su tarjeta resalta con fondo menta. */
.soc-col-kpi.is-hero {
    background: var(--seg-mint);
    border-color: var(--seg-mint-3);
}

.soc-col-kpi.is-hero strong {
    color: var(--seg-green-dark);
}

.soc-col-kpi.is-crit .soc-col-kpi-value strong {
    color: var(--seg-crit-ink);
}

.soc-col-up { color: var(--seg-green-dark); }
.soc-col-down { color: var(--seg-crit-ink); }

.soc-col-signed {
    font-weight: 600;
}

.soc-col-row.is-up .soc-col-signed { color: var(--seg-green-dark); }
.soc-col-row.is-down .soc-col-signed { color: var(--seg-crit-ink); }
.soc-col-row.is-down .soc-col-track > span { background: var(--seg-crit); }

/* Evolución del saldo: una columna ancha por mes; sin historial = hueco rayado, no cero. */
.soc-col-sw-nohist {
    background: repeating-linear-gradient(135deg, var(--seg-line) 0 3px, transparent 3px 6px);
    border: 1px solid var(--seg-line);
}

.soc-col-bar.is-wide {
    width: 56%;
    max-width: 34px;
}

.soc-col-bar.is-nohist {
    width: 56%;
    max-width: 34px;
    border: 1px dashed var(--seg-line);
    background: repeating-linear-gradient(135deg, var(--seg-line-2) 0 4px, transparent 4px 8px);
}

.soc-col-chart.is-saldo .soc-col-month-label small {
    font-size: 10px;
}

/* Comportamiento por cliente: rojos bajaron, gris sin cambio, verdes subieron. */
.soc-col-variation-bar {
    display: flex;
    gap: 2px;
    height: 16px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 6px;
}

.soc-col-variation-bar span {
    flex-basis: 0;
    min-width: 3px;
}

.soc-col-variation-bar .is-b1,
.soc-seg-sw.is-b1 { background: #912018; }
.soc-col-variation-bar .is-b2,
.soc-seg-sw.is-b2 { background: var(--seg-crit); }
.soc-col-variation-bar .is-b3,
.soc-seg-sw.is-b3 { background: var(--seg-warn); }
.soc-col-variation-bar .is-b4,
.soc-seg-sw.is-b4 { background: var(--seg-none); }
.soc-col-variation-bar .is-b5,
.soc-seg-sw.is-b5 { background: #6fc3a5; }
.soc-col-variation-bar .is-b6,
.soc-seg-sw.is-b6 { background: var(--seg-green); }

.soc-col-variation-row .soc-col-row-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.soc-col-variation-row {
    padding-block: 5px;
    border-bottom: 1px solid var(--seg-line-2);
    border-radius: 0;
}

.soc-col-variation-row:last-child {
    border-bottom: 0;
}

/* Quién movió el saldo */
.soc-col-mini-toggle button {
    padding: 4px 10px;
    font-size: 0.78rem;
}

.soc-col-movers {
    display: grid;
    gap: 2px;
}

.soc-col-mover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--seg-ink);
    text-decoration: none;
    transition: background-color .15s ease;
}

.soc-col-mover:hover {
    background: #f8fbfa;
    color: var(--seg-ink);
}

.soc-col-mover .soc-seg-who {
    min-width: 0;
}

.soc-col-mover-figures {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 2px;
    font-size: 0.8rem;
    color: var(--seg-ink-2);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1199.98px) {
    .soc-col-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .soc-col-period {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .soc-colocacion-page .soc-seg-segmented {
        flex-wrap: wrap;
    }

    .soc-colocacion-page .soc-seg-segmented button {
        flex: 1 1 auto;
    }

    .soc-col-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .soc-col-kpi .soc-col-kpi-value strong {
        font-size: 1.35rem;
    }

    .soc-col-bar em {
        display: none;
    }

    .soc-col-funnel-row {
        grid-template-columns: minmax(0, 1fr) 70px;
    }

    .soc-col-mover {
        flex-wrap: wrap;
    }

    .soc-col-mover-figures {
        justify-items: start;
        padding-left: 44px;
    }

    .soc-col-funnel-track {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .soc-col-concentration {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .soc-col-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .soc-col-bar,
    .soc-col-track > span {
        transition: none;
    }
}

/* ==========================================================================
   Bitácora de descargas de reportes (/admin/bitacora-descargas)
   Comparte variables, paneles, tabla y etiquetas con los reportes de clientes.
   ========================================================================== */
.soc-bit-verify {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    background: var(--seg-mint);
    border-color: var(--seg-mint-3);
}

.soc-bit-verify-text {
    flex: 1 1 320px;
    min-width: 0;
}

.soc-bit-verify h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--seg-green-dark);
}

.soc-bit-verify-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.soc-bit-file {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px dashed var(--seg-green);
    border-radius: 8px;
    background: #fff;
    color: var(--seg-green-dark);
    font-weight: 500;
    cursor: pointer;
}

.soc-bit-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.soc-bit-verify-result {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
}

.soc-bit-verify-result i {
    font-size: 1.3rem;
}

.soc-bit-verify-result.is-found {
    background: #fff;
    color: var(--seg-green-dark);
}

.soc-bit-verify-result.is-missing {
    background: var(--seg-crit-bg);
    color: var(--seg-crit-ink);
}

.soc-bit-toolbar {
    position: static;
    align-items: flex-end;
}

.soc-bit-field {
    display: grid;
    flex: 1 1 140px;
    min-width: 0;
    gap: 2px;
}

.soc-bit-field.is-wide {
    flex-basis: 200px;
}

.soc-bit-field .form-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--seg-ink-3);
}

.soc-bit-field .form-control,
.soc-bit-field .form-select {
    min-height: 36px;
    font-size: 0.85rem;
}

.soc-bit-search {
    flex: none;
    height: 36px;
}

.soc-bit-table {
    min-width: 980px;
}

.soc-bit-table tbody tr {
    cursor: pointer;
}

.soc-bit-table button.soc-seg-go {
    border: 0;
}

.soc-bit-code {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--seg-line-2);
    color: var(--seg-ink);
    font-size: 0.8rem;
}

.soc-bit-wrap {
    word-break: break-all;
}

.soc-bit-detail {
    display: grid;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
    font-size: 0.875rem;
}

.soc-bit-detail dt {
    font-weight: 500;
    color: var(--seg-ink-3);
}

.soc-bit-detail dd {
    margin: 0;
    min-width: 0;
}

.soc-bit-json {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--seg-line-2);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .soc-bit-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .soc-bit-detail dd {
        margin-bottom: 6px;
    }
}