: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-row-action: acciones de fila en grids, botón circular solo con ícono (nombre en el title).
   Mismo lenguaje que /admin/tenants del CRM. Usado en /admin/tenants y en su pantalla de personal. ── */
.soc-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.soc-row-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.soc-row-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.18);
}

.soc-row-action:focus-visible {
    outline: 2px solid #0b8261;
    outline-offset: 2px;
}

.soc-row-action.is-edit {
    color: #0b8261;
}

.soc-row-action.is-edit:hover:not(:disabled) {
    background: #eef8f4;
    border-color: #0b8261;
}

.soc-row-action.is-neutral:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
}

.soc-row-action.is-danger {
    background: #fff1ed;
    border-color: #f7b8a4;
    color: #e5431d;
}

.soc-row-action.is-danger:hover:not(:disabled) {
    background: #e5431d;
    border-color: #e5431d;
    color: #ffffff;
}

/* Contador sobre el ícono (p. ej. personal activo del broker). */
.soc-row-action-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #0b8261;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ── 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: #fff;
    border: 1px solid #e6eeea;
    border-radius: 16px;
}

.soc-tablero-page > .soc-page-header .soc-tablero-filters.is-date-filter {
    background: #f6f8f7;
}

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

.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 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,
.soc-tablero-page .soc-tablero-date .form-select {
    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;
}

.soc-tablero-kanban-wrapper .e-card-container .e-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem 0.75rem;
    min-height: 220px;
    box-sizing: border-box;
    color: #64748b;
    pointer-events: none;
}

/* ── 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: 4px;
}

.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%;
    /* !important igual que el ancho: Syncfusion escribe height en línea (parámetro Height, "auto" por
       defecto) y con eso toda la cadena de altos hasta la columna se resolvía a auto: la columna crecía
       con sus tarjetas, el wrapper la recortaba y no había scroll (visto en Safari, 2026-10-09). */
    height: 100% !important;
}

/* 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: 300px !important;
    min-width: 300px !important;
    max-width: 300px !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(--color-primario);
    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-btn-rounded {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.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: 299px;
    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;
}
/* ── Tablero de Clientes: la columna mide lo que queda de pantalla y desplaza sus tarjetas ──
   Antes la caja de tarjetas medía 100vh y su padre (.e-kanban-content) la recortaba a
   100vh - 320px con overflow hidden: la caja nunca desbordaba, así que no mostraba scroll, y en
   pantallas de 720px o menos la primera tarjeta quedaba cortada sin forma de llegar a "Ver detalle".
   El alto correcto ya lo reparte el flex de .container_column_kanban (soc-responsive.css); lo que
   faltaba era que llegara al <td>: un porcentaje no se resuelve a través de table/tbody/tr con
   display de tabla, por eso los tres pasan a bloque. Medido en Chrome de 1024x640 a 1920x1080 y en
   390x844: la columna termina donde termina el área visible y desplaza hasta la última tarjeta. */
.soc-tablero-kanban-wrapper .e-kanban .e-content-table,
.soc-tablero-kanban-wrapper .e-kanban .e-content-table > tbody,
.soc-tablero-kanban-wrapper .e-kanban .e-content-row {
    display: block;
    height: 100%;
}

/* Como bloque, la fila pierde los 10px de border-spacing que alinean la primera columna con su
   encabezado (la tabla de encabezados sigue siendo tabla y los conserva). */
.soc-tablero-kanban-wrapper .e-kanban .e-content-row {
    padding-left: 10px;
}

.soc-tablero-kanban-wrapper .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container {
    overflow: auto;
    height: 100%;
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container {
    scrollbar-color: #0b8261 #eef2f0;
    scrollbar-width: thin;
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container::-webkit-scrollbar-track {
    background: #eef2f0;
}

.e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-container::-webkit-scrollbar-thumb {
    background-color: #0b8261;
    border-radius: 999px;
}
.soc-tablero-page .soc-tablero-kanban-wrapper
{
overflow-y: hidden;
}
/* El alto lo da el flex (ver arriba); sin el padding-bottom del tema, la tabla al 100% no desborda
   y no aparece una segunda barra de scroll. */
.soc-tablero-kanban-wrapper .e-kanban .e-kanban-content{
    overflow: hidden;
    padding-bottom: 0;
}
span.e-empty-card.soc-ficha-empty {
    display: flex !important;
    align-items: center;
    justify-content: center;
        background: #f7fbf9 !important;
    border: 1.5px dashed #b9dccb !important;
    border-radius: 10px;
}
span.e-empty-card.soc-ficha-empty .soc-ficha-empty-icon{
    width: 70px;
    height: 70px;
    font-size: 35px;
}
span.e-empty-card.soc-ficha-empty .soc-ficha-empty-title{
    font-size: 16px;
}
span.e-empty-card.soc-ficha-empty .soc-ficha-empty-text{
    display: none;
}
.e-table.e-sortfilter thead tr th {
    background: var(--color-primario);
    padding: 10px 14px !important;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
}
.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow){
color: #fff !important;
}

.e-grid .e-gridpager.e-pager,
.e-grid .e-pager {
display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    background: #ffffff;
    border: none;
    padding: 16px;
}

.e-grid .e-pager .e-pagercontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    float: none !important;
    margin: 0;
    padding: 0;
    background: transparent;
}

.e-grid .e-pager .e-numericcontainer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.e-grid .e-pager .e-numericitem,
.e-grid .e-pager .e-firstpage,
.e-grid .e-pager .e-prevpage,
.e-grid .e-pager .e-nextpage,
.e-grid .e-pager .e-lastpage,
.e-grid .e-pager .e-firstpagedisabled,
.e-grid .e-pager .e-prevpagedisabled,
.e-grid .e-pager .e-nextpagedisabled,
.e-grid .e-pager .e-lastpagedisabled {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
}

.e-grid .e-pager .e-icons,
.e-grid .e-pager .e-icons::before {
    color: #1e293b !important;
    font-size: 12px;
}

.e-grid .e-pager .e-numericitem:hover,
.e-grid .e-pager .e-firstpage:hover,
.e-grid .e-pager .e-prevpage:hover,
.e-grid .e-pager .e-nextpage:hover,
.e-grid .e-pager .e-lastpage:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-active {
    background: #006D4E !important;
    border-color: #006D4E !important;
    color: #ffffff !important;
    box-shadow: none;
}

.e-grid .e-pager .e-currentitem:hover,
.e-grid .e-pager .e-active:hover {
    background: #006D4E !important;
    border-color: #006D4E !important;
    color: #ffffff !important;
}

.e-grid .e-pager .e-firstpagedisabled,
.e-grid .e-pager .e-prevpagedisabled,
.e-grid .e-pager .e-nextpagedisabled,
.e-grid .e-pager .e-lastpagedisabled {
    opacity: 0.45;
    cursor: default;
}

.e-grid .e-pager .e-pp,
.e-grid .e-pager .e-np {
    border-color: #e5e7eb !important;
    background: #ffffff !important;
    color: #1e293b !important;
    pointer-events: none;
}

.e-grid .e-pager .e-parentmsgbar {
    float: none !important;
    margin: 0 0 0 auto;
    color: #1e293b;
    font-size: 0.85rem;
}
.e-grid {
    width: 100%;
    max-width: 100%;
}

.e-grid .e-gridheader,
.e-grid .e-gridcontent {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.e-grid .e-gridheader .e-table,
.e-grid .e-gridcontent .e-table {
    table-layout: fixed;
    width: 100%;
    min-width: 720px;
}

.e-grid .e-gridheader colgroup col:first-child,
.e-grid .e-gridcontent colgroup col:first-child {
    width: 120px !important;
}

.e-grid .e-gridheader colgroup col:not(:first-child),
.e-grid .e-gridcontent colgroup col:not(:first-child) {
    width: auto !important;
}

.e-grid .e-headercell:first-child,
.e-grid .e-rowcell:first-child {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.e-grid .e-headercell,
.e-grid .e-headercell .e-headercelldiv,
.e-grid .e-rowcell,
.e-grid .e-rowcell.e-leftalign,
.e-grid .e-templatecell.e-leftalign {
    text-align: center !important;
}

.e-grid .e-headercell,
.e-grid .e-rowcell {
    padding: 10px 14px !important;
    vertical-align: middle;
}
.e-grid .e-fltr-icon .e-headertext, .e-grid .e-leftalign.e-fltr-icon .e-headertext{
    text-align: center !important;
}
.e-grid .e-headertext{
    text-align: center !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;
    }
}