/* =============================================
   ImagineX CRM - Estilos globales
   Color base: #00A0E3
   ============================================= */

:root {
    --im-primary: #00A0E3;
    --im-primary-dark: #0080b8;
    --im-primary-darker: #005f8a;
    --im-sidebar-bg: #0d1b2a;
    --im-sidebar-text: #c8d8e8;
    --im-sidebar-hover: rgba(0, 160, 227, 0.12);
    --im-sidebar-active: #00A0E3;
    --im-sidebar-section: #1e3448;
    --im-content-bg: #f0f4f8;
    --im-card-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ---- Reset / Base ---- */
* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* =============================================
   LOGIN PAGE
   ============================================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

/* Panel izquierdo - branding */
.login-brand-panel {
    flex: 0 0 45%;
    background: linear-gradient(145deg, var(--im-primary) 0%, var(--im-primary-darker) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    top: -100px;
    right: -100px;
}

.login-brand-panel::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    bottom: -60px;
    left: -60px;
}

.login-brand-logo {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
}

.login-brand-logo .app-title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    white-space: nowrap;
}

/* Logo PNG dentro de una "lozenge" blanca para que el azul corporativo
   resalte sobre el panel azul oscuro del branding. */
.login-brand-logo-img {
    display: inline-block;
    background: #fff;
    border-radius: 16px;
    padding: 1.1rem 1.75rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .15);
}
.login-brand-logo-img img {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 720px) {
    .login-brand-logo-img { padding: .85rem 1.3rem; }
    .login-brand-logo-img img { width: 220px; }
}

.login-brand-logo .app-title .version-sup {
    font-size: 1.1rem;
    font-weight: 300;
    top: -2em;
    position: relative;
    letter-spacing: 2px;
    opacity: 0.9;
}

.login-brand-logo .app-tagline {
    font-size: 1rem;
    font-weight: 300;
    opacity: 0.8;
    margin-top: 0.75rem;
    letter-spacing: 1px;
}

.login-brand-features {
    position: relative;
    z-index: 1;
    margin-top: 3rem;
    color: rgba(255,255,255,0.85);
    width: 100%;
    max-width: 320px;
}

.login-brand-features .feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.login-brand-features .feature-item:last-child {
    border-bottom: none;
}

.feature-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Panel derecho - formulario */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f8fafc;
}

.login-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}

.login-card .login-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a2942;
    margin-bottom: 0.25rem;
}

.login-card .login-card-subtitle {
    font-size: 0.875rem;
    color: #6b7c93;
    margin-bottom: 2rem;
}

/* Inputs del login */
.login-input-group {
    position: relative;
    margin-bottom: 1.25rem;
}

.login-input-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input-group input {
    width: 100%;
    max-width: 100%;
    height: 46px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 2.75rem 0 2.75rem;
    font-size: 0.95rem;
    color: #1a2942;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.login-input-group input:focus {
    border-color: var(--im-primary);
    box-shadow: 0 0 0 3px rgba(0,160,227,0.15);
    background: white;
}

.login-input-group .input-icon {
    position: absolute;
    left: 0.9rem;
    bottom: 11px;
    color: #a0aec0;
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.2s;
}

.login-input-group input:focus + .input-icon,
.login-input-group:has(input:focus) .input-icon {
    color: var(--im-primary);
}

.login-input-group .toggle-eye {
    position: absolute;
    right: 0.75rem;
    bottom: 9px;
    background: none;
    border: none;
    padding: 2px 4px;
    color: #a0aec0;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.login-input-group .toggle-eye:hover { color: var(--im-primary); }

/* Captcha deslizante */
.captcha-wrapper {
    margin-bottom: 1.5rem;
}

.captcha-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.captcha-track {
    position: relative;
    height: 48px;
    background: #edf2f7;
    border-radius: 24px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    user-select: none;
    cursor: default;
}

.captcha-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 46px;
    background: linear-gradient(90deg, var(--im-primary), var(--im-primary-dark));
    border-radius: 24px;
    transition: width 0.05s linear;
}

.captcha-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    cursor: grab;
    z-index: 2;
    color: var(--im-primary);
    font-size: 1.1rem;
    transition: box-shadow 0.15s;
}

.captcha-thumb:active {
    cursor: grabbing;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

.captcha-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #a0aec0;
    font-size: 0.82rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    transition: opacity 0.2s;
}

.captcha-verified-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.85rem;
    display: none;
    z-index: 3;
    white-space: nowrap;
}

.captcha-track.is-verified .captcha-hint { opacity: 0; }
.captcha-track.is-verified .captcha-verified-check { display: block; }
.captcha-track.is-verified .captcha-thumb { color: #22c55e; }
.captcha-track.is-verified { border-color: #22c55e; }
.captcha-track.is-verified .captcha-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.captcha-error-msg {
    font-size: 0.8rem;
    color: #e53e3e;
    margin-top: 0.3rem;
    display: none;
}

.captcha-error-msg.visible { display: block; }

/* Aviso visual cuando se intenta entrar sin verificar el captcha */
.captcha-track.captcha-shake { animation: captchaShake .42s ease; }
@keyframes captchaShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* Botón entrar */
.btn-login {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, var(--im-primary), var(--im-primary-dark));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 0.5rem;
}

.btn-login:hover { opacity: 0.92; }
.btn-login:active { transform: scale(0.99); }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

/* Acceso biométrico (login) */
.login-bio-wrap { margin-top: 0.75rem; }

.login-bio-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9aa3ad;
    font-size: 0.8rem;
    margin: 0.75rem 0;
}
.login-bio-divider::before,
.login-bio-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e3e7ec;
}
.login-bio-divider span { padding: 0 0.75rem; }

.btn-login-bio {
    width: 100%;
    height: 48px;
    background: #fff;
    color: var(--im-primary);
    border: 1.5px solid var(--im-primary);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s, transform 0.1s;
}
.btn-login-bio:hover { background: rgba(0, 160, 227, 0.08); }
.btn-login-bio:active { transform: scale(0.99); }
.btn-login-bio:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-login-bio .bi-fingerprint { font-size: 1.2rem; }

.login-bio-msg {
    text-align: center;
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.5rem;
    min-height: 1.1em;
}
.login-bio-msg.is-error { color: #d23b3b; }

/* Mis dispositivos (gestión de credenciales biométricas) */
.bio-add-wrap { margin-bottom: 1.25rem; }

.bio-dev-list { list-style: none; margin: 0; padding: 0; }

.bio-dev-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid #eceff3;
}
.bio-dev-item:last-child { border-bottom: none; }

.bio-dev-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(0, 160, 227, 0.1);
    color: var(--im-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.bio-dev-info { flex: 1; min-width: 0; }
.bio-dev-name { font-weight: 600; color: #1f2937; }
.bio-dev-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
    color: #8a929c;
    margin-top: 0.15rem;
}

.bio-dev-revoke {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #f0d4d4;
    background: #fff;
    color: #d23b3b;
    cursor: pointer;
    transition: background 0.2s;
}
.bio-dev-revoke:hover { background: #fdeaea; }
.bio-dev-revoke:disabled { opacity: 0.5; cursor: not-allowed; }

.bio-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #8a929c;
}
.bio-empty i { font-size: 2rem; color: #c7ccd3; }
.bio-empty p { margin: 0.5rem 0 0; }
.bio-empty-hint { font-size: 0.82rem; }

.bio-note {
    margin-top: 1.25rem;
    padding: 0.75rem 0.9rem;
    background: #f5f7fa;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Integraciones (Microsoft 365 / Google) */
.integ-alert {
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.integ-alert--ok  { background: #e7f6ec; color: #1c6b38; border: 1px solid #b7e1c4; }
.integ-alert--err { background: #fdeaea; color: #a3271f; border: 1px solid #f0c4c0; }

.integ-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid #e6eaef;
    border-radius: 12px;
    margin-bottom: 0.85rem;
}

.integ-card-logo {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}
.integ-logo--ms { background: #0078d4; }
.integ-logo--g  { background: #ea4335; }

.integ-card-body { flex: 1; min-width: 0; }
.integ-card-name { font-weight: 700; color: #1f2937; }
.integ-card-status { font-size: 0.82rem; color: #8a929c; margin-top: 0.1rem; }
.integ-card-status--on { color: #1c6b38; font-weight: 600; }

.integ-card-action { flex-shrink: 0; }
.integ-btn {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}
.integ-btn--on  { background: var(--im-primary); color: #fff; }
.integ-btn--on:hover { opacity: 0.92; }
.integ-btn--off { background: #fff; color: #d23b3b; border-color: #f0d4d4; }
.integ-btn--off:hover { background: #fdeaea; }
.integ-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.integ-badge-soon {
    display: inline-block;
    background: #f0f2f5;
    color: #8a929c;
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.integ-hint {
    font-size: 0.8rem;
    color: #8a929c;
    margin: -0.4rem 0 0.85rem;
    padding-left: 0.2rem;
}
.integ-hint code { background: #f0f2f5; padding: 0.05rem 0.3rem; border-radius: 4px; }

/* Modal componer email */
.email-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1080;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.email-modal-overlay.is-open { display: flex; }

.email-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.email-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eceff3;
    font-weight: 700;
    color: #1f2937;
}
.email-modal-close {
    border: none;
    background: none;
    font-size: 1.1rem;
    color: #8a929c;
    cursor: pointer;
}
.email-modal-close:hover { color: #1f2937; }

.email-modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; }

.email-lbl {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.6rem 0 0.25rem;
}
.email-lbl:first-child { margin-top: 0; }

.email-inp {
    width: 100%;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.92rem;
    font-family: inherit;
    color: #1f2937;
}
.email-inp:focus { outline: none; border-color: var(--im-primary); box-shadow: 0 0 0 3px rgba(0, 160, 227, 0.12); }
.email-textarea { resize: vertical; min-height: 140px; }

.email-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #eceff3;
}

.email-aviso {
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.email-aviso--info { background: #eef2f7; color: #4b5563; }
.email-aviso--ok   { background: #e7f6ec; color: #1c6b38; }
.email-aviso--err  { background: #fdeaea; color: #a3271f; }
.email-aviso a { color: inherit; font-weight: 600; text-decoration: underline; }

.email-lbl-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9aa3ad; }
.email-file { width: 100%; font-size: 0.85rem; color: #4b5563; }
.email-adj-info { font-size: 0.8rem; color: #6b7280; margin-top: 0.4rem; line-height: 1.5; }
.email-adj-total { font-weight: 600; margin-top: 0.2rem; }
.email-adj-total.is-over { color: #d23b3b; }

/* Toggle de sincronización de calendario (Integraciones) */
.integ-sync {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.25rem 0 0.85rem;
    padding: 0.75rem 0.9rem;
    background: #f5f7fa;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #4b5563;
    cursor: pointer;
}
.integ-sync input { margin-top: 0.15rem; flex-shrink: 0; }

/* Resultado de crear reunión */
.email-reunion-result { margin-top: 0.75rem; }
.email-reunion-link {
    word-break: break-all;
    background: #f5f7fa;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.email-reunion-acts { display: flex; gap: 0.5rem; }

/* Selector de contactos de la empresa en el compositor de email */
.email-emp-pick { margin-top: 0.4rem; }
.email-emp-lista {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e6eaef;
    border-radius: 8px;
    margin-top: 0.35rem;
}
.email-emp-lista:empty { display: none; }
.email-emp-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
}
.email-emp-item:last-child { border-bottom: none; }
.email-emp-item:hover { background: rgba(0, 160, 227, 0.06); }
.email-emp-item.is-sel { background: rgba(0, 160, 227, 0.12); }
.email-emp-nom { font-weight: 600; color: #1f2937; font-size: 0.85rem; }
.email-emp-mail { font-size: 0.78rem; color: #6b7280; }
.email-emp-cargando, .email-emp-vacio { padding: 0.5rem 0.7rem; font-size: 0.82rem; color: #8a929c; }
.email-emp-sep { margin: 0.9rem 0 0.2rem; font-size: 0.78rem; font-weight: 600; color: #8a929c; border-top: 1px solid #eceff3; padding-top: 0.6rem; }

/* Buscador de la pestaña Contactos en ficha de empresa */
.ef-busca-contactos {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 0.75rem;
}
.ef-busca-contactos > .bi-search {
    position: absolute;
    left: 0.7rem;
    color: #9aa3ad;
    font-size: 0.9rem;
    pointer-events: none;
}
.ef-busca-contactos input {
    width: 100%;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 2.1rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1f2937;
}
.ef-busca-contactos input:focus {
    outline: none;
    border-color: var(--im-primary);
    box-shadow: 0 0 0 3px rgba(0, 160, 227, 0.12);
}
.ef-busca-clr {
    position: absolute;
    right: 0.5rem;
    border: none;
    background: none;
    color: #9aa3ad;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.2rem;
}
.ef-busca-clr:hover { color: #1f2937; }

/* Cambiar contraseña */
.change-pw-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

.change-pw-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--im-primary);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1rem;
}
.change-pw-back:hover { text-decoration: underline; color: var(--im-primary); }

/* Requisitos de contraseña */
.pw-requirements {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .82rem;
}
.pw-req-title {
    font-weight: 600;
    color: #4a5568;
    margin-bottom: .4rem;
    font-size: .82rem;
}
.pw-req-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #e53e3e;
    padding: .12rem 0;
}
.pw-req-item i { font-size: .85rem; flex-shrink: 0; }
.pw-req-item.ok { color: #38a169; }

/* Captcha de imagen */
.captcha-img-wrapper {
    margin-bottom: 1.25rem;
}
.captcha-img-label {
    font-size: .82rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: .5rem;
}
.captcha-img-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.captcha-img {
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    height: 44px;
    width: 130px;
    object-fit: cover;
}
.captcha-refresh-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #6b7c93;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: border-color .2s, color .2s;
}
.captcha-refresh-btn:hover { border-color: var(--im-primary); color: var(--im-primary); }
.captcha-img-hint {
    font-size: .75rem;
    color: #a0aec0;
    margin-top: .2rem;
}

.change-pw-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.change-pw-header {
    text-align: center;
    margin-bottom: 2rem;
}

.change-pw-icon {
    font-size: 2.5rem;
    color: var(--im-primary);
    display: block;
    margin-bottom: 0.75rem;
}

.change-pw-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a2942;
    margin-bottom: 0.25rem;
}

.change-pw-subtitle {
    font-size: 0.875rem;
    color: #6b7c93;
}

.change-pw-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}
.login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--im-primary);
    cursor: pointer;
}
.login-remember label {
    font-size: .875rem;
    color: #4a5568;
    cursor: pointer;
    margin: 0;
}

.forgot-back-link {
    font-size: .875rem;
    color: var(--im-primary);
    text-decoration: none;
}
.forgot-back-link:hover { text-decoration: underline; color: var(--im-primary); }

.forgot-sent-icon {
    font-size: 3rem;
    color: var(--im-primary);
    text-align: center;
    display: block;
    margin-bottom: .75rem;
}

.btn-cancel {
    height: 48px;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #6b7c93;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.btn-cancel:hover { border-color: var(--im-primary); color: var(--im-primary); text-decoration: none; }

/* Mensajes de error */
.login-error-alert {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: #c53030;
}

.login-error-alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* Banner de mantenimiento en el login */
.login-mant-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #fff7e6;
    border: 1px solid #ffd98a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: #92640a;
}
.login-mant-alert i { font-size: 1.2rem; line-height: 1.2; }
.login-mant-alert strong { display: block; margin-bottom: 2px; }

/* Validación inline */
.field-error {
    font-size: 0.78rem;
    color: #e53e3e;
    margin-top: 0.25rem;
}

/* Decoración login brand */
.login-brand-divider {
    width: 50px;
    height: 3px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    margin: 1.5rem auto;
}

/* =============================================
   APP LAYOUT (post-login)
   ============================================= */

.app-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ---- Sidebar ---- */
.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--im-sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width 0.25s ease;
    position: relative;
    z-index: 100;
}

.sidebar-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.sidebar-logo-icon {
    width: 38px;
    height: 38px;
    background: var(--im-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-logo-text {
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

.sidebar-logo-text .ver {
    font-size: 0.6rem;
    font-weight: 300;
    opacity: 0.7;
    letter-spacing: 1px;
    display: block;
}

/* Usuario info en sidebar */
.sidebar-user {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    background: var(--im-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-user-info {
    overflow: hidden;
    flex: 1;
}

.sidebar-user-name {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    color: var(--im-primary);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Navegación sidebar */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Sección de menú */
.nav-section {
    margin-bottom: 0.25rem;
}

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    color: var(--im-sidebar-text);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 0;
    transition: background 0.15s;
    user-select: none;
}

.nav-section-header:hover {
    background: var(--im-sidebar-hover);
}

.nav-section-header .section-icon {
    width: 28px;
    height: 28px;
    background: rgba(0, 160, 227, 0.15);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--im-primary);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.nav-section-header .section-title {
    flex: 1;
}

.nav-section-header .chevron {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.2s;
}

.nav-section-header.collapsed .chevron {
    transform: rotate(-90deg);
}

/* Items de menú */
.nav-items {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nav-items.collapsed {
    max-height: 0 !important;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem 0.55rem 2.5rem;
    color: rgba(200, 216, 232, 0.75);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--im-sidebar-hover);
    color: white;
    text-decoration: none;
}

/* Rejilla de campos para pantallas de configuración (WhatsApp, etc.) */
.pres-ajustes-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pres-ajustes-field { display:flex; flex-direction:column; gap:5px; font-size:13px; color:#475569; }
.pres-ajustes-field span { font-weight:600; }
.pres-ajustes-field input { border:1px solid #cbd5e1; border-radius:8px; padding:9px 12px; font-size:14px; outline:0; }
@media (max-width: 680px) { .pres-ajustes-grid { grid-template-columns:1fr; } }

/* ===== WhatsApp (chat) ===== */
.wa-wrap { display:flex; gap:14px; height:calc(100vh - 170px); min-height:420px; }
.wa-side { width:320px; flex-shrink:0; display:flex; flex-direction:column; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.wa-search { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #eef2f6; color:#94a3b8; }
.wa-search input { border:0; outline:0; width:100%; font-size:14px; background:transparent; }
.wa-lista { overflow-y:auto; flex:1; }
.wa-conv { padding:10px 12px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
.wa-conv:hover { background:#f8fafc; }
.wa-conv--sel { background:#e8f7ee; }
.wa-conv-top { display:flex; justify-content:space-between; gap:8px; }
.wa-conv-nom { font-weight:600; font-size:14px; color:#1a2942; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-conv-fec { font-size:11px; color:#94a3b8; flex-shrink:0; }
.wa-conv-bot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px; }
.wa-conv-ult { font-size:12.5px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-badge { background:#25d366; color:#fff; border-radius:999px; font-size:11px; padding:1px 7px; flex-shrink:0; }
.wa-chat { flex:1; display:flex; flex-direction:column; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.wa-chat-head { padding:10px 16px; border-bottom:1px solid #eef2f6; display:flex; align-items:center; gap:10px; }
.wa-chat-head-info { flex:1; min-width:0; }
.wa-chat-nombre { font-weight:600; color:#1a2942; }
.wa-chat-tel { font-size:12px; color:#94a3b8; }
.wa-chat-borrar { flex:0 0 auto; border:none; background:transparent; color:#94a3b8; width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:16px; line-height:1; transition:background .15s,color .15s; }
.wa-chat-borrar:hover { background:#fdeaea; color:#d9534f; }
.wa-chat-borrar:disabled { opacity:.5; cursor:default; }
.wa-chat-plantilla { flex:0 0 auto; border:none; background:transparent; color:#94a3b8; width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:16px; line-height:1; transition:background .15s,color .15s; }
.wa-chat-plantilla:hover { background:#e7f7ef; color:#16a34a; }
.wa-chat-plantilla:disabled { opacity:.5; cursor:default; }

/* Modal enviar plantilla individual */
.wa-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:1080; }
.wa-modal-box { background:#fff; border-radius:12px; width:460px; max-width:92vw; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden; }
.wa-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #eef2f6; font-weight:600; color:#1a2942; }
.wa-modal-x { border:none; background:transparent; color:#94a3b8; cursor:pointer; font-size:15px; }
.wa-modal-x:hover { color:#1a2942; }
.wa-modal-body { padding:16px 18px; }
.wa-modal-dest { font-size:13px; color:#64748b; margin-bottom:12px; }
.wa-modal-label { display:block; font-size:12px; font-weight:600; color:#475569; margin:12px 0 4px; }
.wa-modal-hint { font-size:12px; color:#64748b; margin-top:6px; }
.wa-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #eef2f6; background:#f9fafb; }
.wa-mensajes { flex:1; overflow-y:auto; padding:16px; background:#f5f6f8; display:flex; flex-direction:column; gap:8px; }
.wa-msg { max-width:72%; padding:7px 11px; border-radius:10px; font-size:14px; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.wa-msg--in  { align-self:flex-start; background:#fff; }
.wa-msg--out { align-self:flex-end; background:#d9fdd3; }
.wa-msg-txt { white-space:pre-wrap; word-break:break-word; color:#1a2942; }
.wa-msg-meta { font-size:10.5px; color:#7c8a99; text-align:right; margin-top:2px; }
.wa-composer { border-top:1px solid #eef2f6; padding:10px 12px; }
.wa-ventana-aviso { font-size:12px; color:#b06a00; background:#fff7ec; border:1px solid #ffe3b3; border-radius:8px; padding:6px 10px; margin-bottom:8px; }
.wa-composer-row { display:flex; gap:8px; align-items:flex-end; }
.wa-composer-row textarea { flex:1; resize:none; border:1px solid #cbd5e1; border-radius:20px; padding:9px 14px; font-size:14px; outline:0; max-height:120px; }
.wa-send-btn { background:#25d366; color:#fff; border:0; width:42px; height:42px; border-radius:50%; cursor:pointer; flex-shrink:0; }
.wa-send-btn:disabled { opacity:.5; }
.wa-empty { color:#94a3b8; text-align:center; padding:24px 12px; font-size:13px; }
@media (max-width: 760px) { .wa-wrap { flex-direction:column; height:auto; } .wa-side { width:auto; } .wa-mensajes { min-height:300px; } }

/* Ítem de menú deshabilitado (p.ej. Fuerza de Ventas sin BDs de Gestión): visible pero no clicable.
   Es un <span> (no navega); mantenemos el tooltip pero anulamos el resaltado de hover. */
.nav-item-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.nav-item-disabled:hover {
    background: transparent;
    color: rgba(200, 216, 232, 0.75);
}
.nav-item-disabled .nav-item-lock {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.9;
}

.nav-item.active {
    background: var(--im-sidebar-hover);
    color: white;
    border-left-color: var(--im-primary);
}

.nav-item .item-icon {
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-item:hover .item-icon,
.nav-item.active .item-icon {
    opacity: 1;
    color: var(--im-primary);
}

/* Separador */
.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.5rem 1rem;
}

/* Botón logout en sidebar */
.sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.btn-change-pw {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(200,216,232,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.btn-change-pw:hover {
    background: rgba(0,160,227,0.15);
    border-color: rgba(0,160,227,0.3);
    color: #7dd3fc;
    text-decoration: none;
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(200,216,232,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-logout:hover {
    background: rgba(229,62,62,0.15);
    border-color: rgba(229,62,62,0.3);
    color: #fc8181;
    text-decoration: none;
}

/* ---- Contenido principal ---- */
.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--im-content-bg);
}

.app-topbar {
    height: 60px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    flex-shrink: 0;
    gap: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2942;
    flex: 1;
}

.topbar-breadcrumb {
    font-size: 0.8rem;
    color: #6b7c93;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar-campana {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #6b7c93;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background .15s, color .15s;
}

.topbar-campana:hover {
    background: #e8f4fc;
    color: #00A0E3;
}

.topbar-campana-activa {
    color: #00A0E3;
    animation: campana-shake 1s ease 0s 1;
}

.topbar-avisos-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e53935;
    color: #fff;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

@keyframes campana-shake {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(18deg); }
    30%  { transform: rotate(-16deg); }
    45%  { transform: rotate(12deg); }
    60%  { transform: rotate(-8deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0deg); }
}

.app-main {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Banner de éxito */
.alert-success-banner {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    color: #166534;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ============================================================
   Dashboard proyectos → tareas
   ============================================================ */

.db-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.db-title { font-size: 1.4rem; font-weight: 700; color: var(--im-text); margin: 0; }
.db-subtitle { color: #6b7280; font-size: .9rem; margin: .2rem 0 0; }
.db-header-actions { display: flex; gap: .5rem; }
.db-btn-outline {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .4rem .9rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
    border: 1.5px solid var(--im-primary); color: var(--im-primary);
    text-decoration: none; transition: background .15s, color .15s;
}
.db-btn-outline:hover { background: var(--im-primary); color: #fff; }

/* KPI cards */
.db-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .db-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .db-kpi-row { grid-template-columns: 1fr; } }

.db-kpi-card {
    background: #fff; border-radius: 14px; padding: 1.1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border: 1.5px solid transparent; transition: border .2s;
}
.db-kpi-card--danger--active { border-color: #dc3545; }
.db-kpi-card--warn--active   { border-color: #ffc107; }
.db-kpi-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.db-kpi-value { font-size: 1.75rem; font-weight: 800; color: var(--im-text); line-height: 1; }
.db-kpi-label { font-size: .8rem; color: #6b7280; margin-top: .2rem; }

/* Section */
.db-section {
    background: #fff; border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07); overflow: hidden;
}
.db-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.25rem; border-bottom: 1px solid #e5e7eb;
    font-weight: 600; font-size: .95rem; color: var(--im-text);
}
.db-toggle-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 400; color: #6b7280; cursor: pointer;
}
.db-toggle-label input { accent-color: var(--im-primary); cursor: pointer; }

.db-loading, .db-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 2.5rem; color: #9ca3af; font-size: .95rem;
}
.db-empty i, .db-loading i { font-size: 1.8rem; }
.db-empty--error { color: #dc3545; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .8s linear infinite; }

/* Proyecto row */
.db-proy-list { }
.db-proy-row { border-bottom: 1px solid #f3f4f6; }
.db-proy-row:last-child { border-bottom: none; }

.db-proy-head {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.25rem; cursor: pointer; transition: background .12s;
}
.db-proy-head:hover { background: #f9fafb; }

.db-proy-toggle { color: #9ca3af; font-size: .8rem; width: 16px; flex-shrink: 0; transition: transform .15s; }
.db-proy-info { flex: 1; min-width: 0; }
.db-proy-nombre {
    font-weight: 600; font-size: .95rem; color: var(--im-text);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.db-proy-nombre a { color: inherit; text-decoration: none; }
.db-proy-nombre a:hover { color: var(--im-primary); }
.db-proy-meta { display: flex; align-items: center; gap: .75rem; margin-top: .25rem; flex-wrap: wrap; }
.db-meta-item { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: #6b7280; }
.db-meta-item i { font-size: .75rem; }

.db-proy-progress { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.db-progress { width: 90px; height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.db-progress-bar { height: 100%; background: var(--im-primary); border-radius: 99px; transition: width .3s; }
.db-pct { font-size: .78rem; color: #6b7280; width: 34px; text-align: right; }

/* Estado badges */
.db-estado {
    display: inline-flex; align-items: center;
    padding: .15rem .55rem; border-radius: 99px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.db-estado--new  { background: #e8f4fd; color: #0077b6; }
.db-estado--prog { background: #fff3e0; color: #e65c00; }
.db-estado--done { background: #eaf7ee; color: #1a7a3c; }

.db-badge {
    display: inline-flex; align-items: center;
    padding: .1rem .45rem; border-radius: 99px; font-size: .7rem; font-weight: 700;
}
.db-badge--danger { background: #fde8e8; color: #dc3545; }

/* Tareas */
.db-tareas-wrap { background: #f9fafb; border-top: 1px solid #f3f4f6; }
.db-tareas-empty { padding: .75rem 1.25rem 1rem 3rem; font-size: .85rem; color: #9ca3af; }

.db-tareas-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.db-tareas-table thead tr { border-bottom: 1px solid #e5e7eb; }
.db-tareas-table th {
    padding: .45rem 1rem; text-align: left; font-weight: 600;
    color: #6b7280; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
}
.db-tareas-table th:first-child { padding-left: 3rem; }
.db-tarea-row td { padding: .55rem 1rem; border-bottom: 1px solid #f3f4f6; }
.db-tarea-row:last-child td { border-bottom: none; }
.db-tarea-row td:first-child { padding-left: 3rem; }
.db-tarea-asunto { font-weight: 500; color: var(--im-text); }
.db-tarea-link { color: var(--im-text); text-decoration: none; }
.db-tarea-link:hover { color: var(--im-primary); text-decoration: underline; }
.db-tarea-ffin { white-space: nowrap; }
.db-tarea-act { text-align: center; width: 40px; }

.db-tarea-row--danger { background: #fff8f8; }
.db-tarea-row--warn   { background: #fffdf0; }
.db-text-danger { color: #dc3545; }
.db-text-warn   { color: #d97706; }
.db-text-ok     { color: #28a745; font-size: 1rem; }

/* ============================================================ */

/* Dashboard welcome */
.dashboard-welcome {
    background: linear-gradient(135deg, var(--im-primary), var(--im-primary-dark));
    color: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.dashboard-welcome::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
}

.dashboard-welcome h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.dashboard-welcome p {
    opacity: 0.85;
    margin: 0;
    font-size: 0.9rem;
}

/* Cards dashboard */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--im-card-shadow);
    border-left: 4px solid var(--im-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.dash-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(0,160,227,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--im-primary);
    flex-shrink: 0;
}

.dash-card-text .label {
    font-size: 0.78rem;
    color: #6b7c93;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dash-card-text .value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a2942;
    line-height: 1.2;
}

/* ==============================================
   HOME — Secciones y cards con enlace
   ============================================== */
.home-section {
    margin-bottom: 2rem;
}
.home-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #7a94aa;
    margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #e8eef4;
}
.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
a.home-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    border: 1px solid #e8eef4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
a.home-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,160,227,.15);
    border-color: #b8dff5;
    text-decoration: none;
}
.home-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.home-card-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #9ab0c4;
    line-height: 1;
}
.home-card-name {
    font-size: .92rem;
    font-weight: 700;
    color: #1a3050;
    line-height: 1.2;
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* Logo dentro de la tarjeta: solo en móvil (el panel de branding se oculta) */
.login-mobile-logo {
    display: none;
}

@media (max-width: 768px) {
    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        padding: 1.5rem;
    }

    .login-mobile-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

    .login-mobile-logo .login-brand-logo-img img {
        width: 180px;
    }
}

@media (max-width: 576px) {
    .login-card {
        padding: 1.75rem 1.25rem;
    }
}

/* =============================================
   SIDEBAR — TOGGLE / RESPONSIVE
   ============================================= */

/* Botón hamburguesa en topbar */
.btn-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: #3d4f6b;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s;
}
.btn-sidebar-toggle:hover { background: #e8f0fa; }

/* Backdrop para móvil */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 299;
}
.sidebar-backdrop.active { display: block; }

/* Desktop: colapsar sidebar a 64px (solo iconos) — antes era 0.
   El ancho final se define en el bloque V3 al final del archivo. */
.app-sidebar.sidebar-collapsed {
    overflow: hidden;
}

/* Móvil: sidebar como overlay fuera de pantalla */
@media (max-width: 768px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px !important;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .app-sidebar.sidebar-open {
        transform: translateX(0);
    }
    .app-sidebar.sidebar-collapsed {
        width: 260px !important;
        transform: translateX(-100%);
    }
}

/* =============================================
   CALENDARIO — TOOLBAR RESPONSIVE
   ============================================= */

@media (max-width: 640px) {
    #calendar .fc-toolbar {
        flex-wrap: wrap;
        gap: .4rem;
    }
    #calendar .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        justify-content: center;
    }
    #calendar .fc-toolbar-chunk:nth-child(2) {
        width: 100%;
        justify-content: center;
    }
    #calendar .fc-toolbar-title {
        font-size: .95rem;
    }
}

/* =============================================
   ADMIN — SECCIÓN GENERAL
   ============================================= */

.btn-nuevo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #00A0E3;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .45rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-nuevo:hover { background: #0088c2; }

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.admin-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a2942;
    display: flex;
    align-items: center;
}

/* =============================================
   ADMIN — TABLA
   ============================================= */

.admin-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .875rem;
}

.admin-table thead th {
    background: #1a2942;
    color: #fff;
    padding: .6rem .9rem;
    font-weight: 600;
    white-space: nowrap;
    border: none;
}

.admin-table tbody tr {
    border-bottom: 1px solid #e8ecf0;
    transition: background .15s;
}

.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: #f0f7ff; }

.admin-table tbody td {
    padding: .55rem .9rem;
    vertical-align: middle;
    color: #2d3a4a;
}

.admin-table .text-center { text-align: center; }

/* =============================================
   ADMIN — BADGES
   ============================================= */

.badge-active,
.badge-inactive {
    display: inline-block;
    padding: .18rem .65rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.badge-active   { background: #d4edda; color: #155724; }
.badge-inactive { background: #f8d7da; color: #721c24; }

/* =============================================
   ADMIN — BOTONES DE TABLA
   ============================================= */

.btn-tbl-edit,
.btn-tbl-ok,
.btn-tbl-danger,
.btn-tbl-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
}

.btn-tbl-edit   { background: #e8f0fe; color: #1a56db; }
.btn-tbl-ok     { background: #d4edda; color: #155724; }
.btn-tbl-danger { background: #f8d7da; color: #721c24; }
.btn-tbl-warn   { background: #fff3cd; color: #856404; }

.btn-tbl-edit:hover,
.btn-tbl-ok:hover,
.btn-tbl-danger:hover,
.btn-tbl-warn:hover  { opacity: .82; transform: translateY(-1px); text-decoration: none; }

/* =============================================
   ADMIN — MODAL CONFIRMACIÓN
   ============================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.modal-box-header {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2942;
    margin-bottom: 1rem;
}

.modal-box-icon-warning {
    color: #f0a500;
    font-size: 1.2em;
}

.modal-box-body {
    font-size: .92rem;
    color: #3a4a5c;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.modal-box-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2942;
    margin-bottom: .75rem;
}

.modal-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* =============================================
   ADMIN — FORMULARIO
   ============================================= */

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.form-section {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    padding: 1.25rem;
}

.form-section-title {
    font-size: .8rem;
    font-weight: 700;
    color: #00a0e3;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #e0f4fd;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.admin-field label {
    font-size: .8rem;
    font-weight: 600;
    color: #4a5568;
}

.admin-input {
    width: 100%;
    padding: .45rem .75rem;
    border: 1.5px solid #d1dce8;
    border-radius: 7px;
    font-size: .875rem;
    color: #1a2942;
    background: #f8fafc;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.admin-input:focus {
    outline: none;
    border-color: #00a0e3;
    box-shadow: 0 0 0 3px rgba(0,160,227,.12);
    background: #fff;
}

.admin-input[readonly] {
    background: #eef2f7;
    color: #6b7c93;
    cursor: default;
}

.admin-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.admin-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: #2d3a4a;
    cursor: pointer;
}

.admin-check input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #00a0e3;
    cursor: pointer;
}

.admin-form-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid #e0e7ef;
    margin-top: .5rem;
}

.admin-meta {
    font-size: .8rem;
    color: #6b7c93;
}

.field-error {
    font-size: .78rem;
    color: #dc3545;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
}

/* =============================================
   ADMIN — TABS
   ============================================= */

.admin-tabs {
    border-bottom: 2px solid #e0e7ef;
    margin-bottom: 0;
}

.admin-tabs .nav-link {
    color: #4a5568;
    font-size: .85rem;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .6rem 1.1rem;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    background: none;
}

.admin-tabs .nav-link:hover  { color: #00a0e3; border-color: #b3e0f7; }
.admin-tabs .nav-link.active { color: #00a0e3; border-color: #00a0e3; background: none; }

/* Pestañas bloqueadas (alta de usuario: aún no hay ID al que asignar nada) */
.admin-tabs .nav-link.admin-tab-locked {
    color: #a0aec0;
    cursor: not-allowed;
    opacity: .7;
}
.admin-tabs .nav-link.admin-tab-locked:hover { color: #a0aec0; border-color: transparent; }

.admin-tab-content {
    background: #f5f8fc;
    border: 1px solid #e0e7ef;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.25rem;
}

.tab-inner-wrapper { padding: 0; }

.tab-loading {
    padding: 2rem;
    text-align: center;
    color: #6b7c93;
    font-size: .9rem;
}

/* =============================================
   ADMIN — FILTRO DE PÁGINA PRINCIPAL (Usuarios, BDs, Dispositivos)
   ============================================= */

.admin-filters {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 140px;
    flex: 1 1 140px;
}

.filter-field label {
    font-size: .75rem;
    font-weight: 600;
    color: #4a5568;
    margin: 0;
}

.filter-field input,
.filter-field select {
    padding: .4rem .7rem;
    border: 1.5px solid #d1dce8;
    border-radius: 7px;
    font-size: .85rem;
    color: #1a2942;
    background: #f8fafc;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
}

.filter-field input:focus,
.filter-field select:focus {
    outline: none;
    border-color: #00a0e3;
    background: #fff;
}

/* =============================================
   CRM - CONTACTOS
   ============================================= */

/* Banner de error */
.alert-banner {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.alert-banner-error {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

/* Selector de base de datos */
.crm-db-selector {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.db-selector-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

/* Tarjeta de búsqueda */
.crm-search-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: var(--im-card-shadow);
}
.crm-search-header {
    background: linear-gradient(90deg, var(--im-primary) 0%, var(--im-primary-dark) 100%);
    color: #fff;
    padding: 0.7rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.crm-search-body {
    padding: 1rem 1.25rem;
}
.crm-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}
.crm-search-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.crm-search-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 1px;
}
.btn-crm-search {
    background: var(--im-primary);
    color: #fff;
    border: none;
    padding: 0.45rem 1.1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.btn-crm-search:hover { background: var(--im-primary-dark); }
.btn-crm-clear {
    color: #718096;
    border: 1px solid #cbd5e0;
    background: #fff;
    padding: 0.42rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s;
}
.btn-crm-clear:hover { background: #f7fafc; color: #4a5568; }

/* Tarjeta de resultados */
.crm-results-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--im-card-shadow);
}
.crm-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
    color: #4a5568;
}
.crm-results-paginfo { color: #718096; font-size: 0.82rem; }

/* Estado vacío */
.crm-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #a0aec0;
}
.crm-empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}
.crm-empty-state p { margin: 0; font-size: 1rem; color: #718096; }
.crm-empty-state small { font-size: 0.82rem; }

/* Tabla */
.crm-table-wrapper { overflow-x: auto; }
.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.crm-table thead tr {
    background: #f1f5f9;
    border-bottom: 2px solid #e2e8f0;
}
.crm-table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a5568;
    white-space: nowrap;
}
.crm-table tbody tr {
    border-bottom: 1px solid #f0f4f8;
    transition: background .15s;
}
.crm-table tbody tr:hover { background: #f0f9ff; }
.crm-table td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    color: #2d3748;
}
.crm-col-tel   { width: 130px; }
.crm-col-loc   { width: 130px; }
.crm-col-email { width: 180px; }

.crm-cell-primary   { font-weight: 500; color: #1a202c; }
.crm-cell-secondary { font-size: 0.78rem; color: #718096; margin-top: 1px; }

.crm-cp {
    font-size: 0.75rem;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 4px;
    padding: 0 4px;
    margin-right: 4px;
}

.crm-tel-link {
    color: #2b6cb0;
    text-decoration: none;
    font-size: 0.84rem;
    white-space: nowrap;
}
.crm-tel-link:hover { text-decoration: underline; }
.crm-tel-secondary  { color: #718096; }

.crm-email-link {
    color: var(--im-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.83rem;
}
.crm-email-link:hover { text-decoration: underline; }
.crm-email-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    display: inline-block;
}

/* Paginación */
.crm-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 1rem;
    border-top: 1px solid #f0f4f8;
}
.crm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all .15s;
}
.crm-page-btn:hover        { background: #f0f9ff; border-color: var(--im-primary); color: var(--im-primary); }
.crm-page-btn.active       { background: var(--im-primary); color: #fff; border-color: var(--im-primary); font-weight: 700; }
.crm-page-btn.disabled     { opacity: 0.4; pointer-events: none; }
.crm-page-dots             { padding: 0 4px; color: #a0aec0; font-size: 0.85rem; }

.filter-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    min-width: auto;
}

.btn-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .85rem;
    border-radius: 7px;
    border: 1.5px solid #d1dce8;
    background: #fff;
    color: #6b7c93;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
    white-space: nowrap;
}

.btn-filter-clear:hover { background: #fee2e2; color: #dc3545; text-decoration: none; border-color: #f5c6cb; }

/* =============================================
   ADMIN — FORMULARIO BÚSQUEDA USUARIOS (2 filas)
   ============================================= */

.usuarios-filter-form {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.usuarios-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
}

/* Nuevo layout en grid: cada campo ocupa una columna con un ancho mínimo,
   y el contenedor crea tantas columnas como caben. Robusto frente a overflow. */
.usuarios-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    align-items: end;
}

.usuarios-filter-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.usuarios-filter-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;          /* permitir que el contenido se ajuste */
}

.usuarios-filter-field label {
    font-size: .73rem;
    font-weight: 600;
    color: #4a5568;
    margin: 0;
}

.usuarios-filter-field .tab-filter-input,
.usuarios-filter-field .tab-filter-select {
    width: 100%;
    min-width: 0;          /* anular el min-width: 140px del estilo base */
    box-sizing: border-box;
}

/* =============================================
   ADMIN — FILTRO DE TABS / LISTAS
   ============================================= */

.tab-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .75rem;
}

.tab-filter-input,
.tab-filter-select {
    padding: .4rem .7rem;
    border: 1.5px solid #d1dce8;
    border-radius: 7px;
    font-size: .85rem;
    color: #1a2942;
    background: #fff;
    min-width: 140px;
    transition: border-color .2s;
}

.tab-filter-input:focus,
.tab-filter-select:focus {
    outline: none;
    border-color: #00a0e3;
}

.btn-filter {
    padding: .4rem .85rem;
    background: #00a0e3;
    color: #fff;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: .85rem;
    transition: background .2s;
}

.btn-filter:hover { background: #0086c0; color: #fff; text-decoration: none; }

.btn-sincronizar {
    padding: .4rem 1rem;
    font-weight: 500;
}

/* =============================================
   ADMIN — PAGINACIÓN
   ============================================= */

.btn-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .45rem;
    border-radius: 6px;
    border: 1.5px solid #d1dce8;
    background: #fff;
    color: #4a5568;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}

.btn-page:hover { background: #e8f4fb; border-color: #00a0e3; color: #00a0e3; text-decoration: none; }

.btn-page-active {
    background: #00a0e3;
    border-color: #00a0e3;
    color: #fff !important;
    cursor: default;
}

/* =============================================
   ADMIN — BOTÓN CANCELAR / VOLVER
   ============================================= */

.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 7px;
    border: 1.5px solid #d1dce8;
    background: #fff;
    color: #4a5568;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.btn-cancel:hover { background: #f0f4fa; color: #1a2942; text-decoration: none; }

/* =============================================
   ADMIN — INVENTARIO CONFIG CARD
   ============================================= */

.inv-config-card {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: .75rem;
}

/* =============================================
   ADMIN — ALERT SUCCESS BANNER
   ============================================= */

.alert-success-banner {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 500;
}

/* =============================================
   CRM — PROYECTOS / TAREAS
   ============================================= */

.crm-check-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: #3d4f6b;
    cursor: pointer;
    user-select: none;
}

.crm-check-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #00A0E3;
    cursor: pointer;
}

.crm-badge-estado {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    background: #e8f4fd;
    color: #0077b6;
    border: 1px solid #bee3f8;
    white-space: nowrap;
}

.crm-badge-shared {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    color: #718096;
    font-size: .8rem;
    vertical-align: middle;
}

.crm-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 .4rem;
    border-radius: 12px;
    background: #00A0E3;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.crm-badge-count:hover {
    background: #0086c0;
    color: #fff;
    text-decoration: none;
}

/* =============================================
   CRM — BARRA DE PREVISIÓN / PROGRESO
   ============================================= */

.prev-prog {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 140px;
}

.prev-prog-bar {
    position: relative;
    height: 8px;
    background: #eaf3fa;
    border-radius: 4px;
    overflow: hidden;
}

.prev-prog-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    transition: width .25s ease;
}

.prev-prog-fill--ok    { background: linear-gradient(90deg, #28a745, #20c997); }
.prev-prog-fill--warn  { background: linear-gradient(90deg, #e08000, #fd7e14); }
.prev-prog-fill--over  { background: linear-gradient(90deg, #dc3545, #c0306a); }

.prev-prog-label {
    font-size: .72rem;
    color: #6b7c93;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.prev-prog-label strong   { color: #1a2f45; font-weight: 600; }
.prev-prog-label--over    { color: #dc3545; }
.prev-prog-label--over strong { color: #dc3545; }

.prev-prog-empty {
    font-size: .72rem;
    color: #b0c8dc;
    font-style: italic;
}

.prev-prog-fecha {
    font-size: .72rem;
    color: #6b7c93;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.prev-prog-fecha--vencida { color: #dc3545; font-weight: 600; }

.prev-retraso-icon {
    color: #dc3545;
    margin-right: .35rem;
    font-size: .95em;
    vertical-align: -1px;
}

.crm-filter-banner {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #e8f4fd;
    border: 1px solid #b8def4;
    color: #006a9a;
    padding: .4rem .8rem;
    border-radius: 18px;
    font-size: .85rem;
    margin-bottom: .85rem;
}

.crm-filter-banner-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A0E3;
    color: #fff !important;
    margin-left: .5rem;
    font-size: .7rem;
    text-decoration: none;
    transition: background .15s;
}

.crm-filter-banner-clear:hover {
    background: #0086c0;
}

/* Selector de tiempo previsto (horas + minutos) */
.nuevo-form-tiempo {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.nuevo-form-tiempo .nuevo-form-input {
    width: 70px;
    text-align: center;
    -moz-appearance: textfield;
}
.nuevo-form-tiempo .nuevo-form-input::-webkit-outer-spin-button,
.nuevo-form-tiempo .nuevo-form-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.nuevo-form-tiempo span {
    color: #6b7c93;
    font-size: .85rem;
    font-weight: 500;
}

/* Chip de tipo de actividad (color del tipo).
   El color de texto lo establece el render server-side mediante inline style
   (color blanco u oscuro según luminosidad del fondo). */
.act-tipo-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

/* Grid del modal detalle actividad */
.det-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
}
.det-grid-item, .det-grid-full {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.det-grid-full {
    grid-column: 1 / -1;
}
.det-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aadbe;
    font-weight: 600;
}
.det-value {
    color: #1a2f45;
    font-size: .92rem;
}
.det-comentario {
    background: #f6f9fc;
    border: 1px solid #e4ecf3;
    border-radius: 6px;
    padding: .65rem .8rem;
    font-size: .88rem;
    color: #1a2f45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =============================================
   CRM — ACTIVIDADES / FULLCALENDAR
   ============================================= */

.actividades-calendar-wrapper {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e6ef;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* FullCalendar overrides para que encaje con el tema */
#calendar .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2942;
}

#calendar .fc-button {
    background: #fff !important;
    border: 1px solid #d0d8e4 !important;
    color: #3d4f6b !important;
    border-radius: 6px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .3rem .7rem !important;
    box-shadow: none !important;
    transition: background .15s;
    margin-left: 3px !important;
}

#calendar .fc-button:first-child {
    margin-left: 0 !important;
}

#calendar .fc-button-group {
    gap: 3px;
}

#calendar .fc-button-group .fc-button {
    border-radius: 6px !important;
    margin-left: 0 !important;
}

#calendar .fc-button:hover {
    background: #e8f4fd !important;
    border-color: #00A0E3 !important;
    color: #00A0E3 !important;
}

#calendar .fc-button-active,
#calendar .fc-button-primary:not(:disabled).fc-button-active {
    background: #00A0E3 !important;
    border-color: #00A0E3 !important;
    color: #fff !important;
}

#calendar .fc-today-button:disabled {
    opacity: .5 !important;
}

#calendar .fc-col-header-cell {
    background: #f5f8fc;
    font-size: .8rem;
    font-weight: 700;
    color: #3d4f6b;
    padding: .4rem 0;
}

#calendar .fc-day-today {
    background: #f0f7ff !important;
}

#calendar .fc-timegrid-slot-label {
    font-size: .75rem;
    color: #8899aa;
}

#calendar .fc-event {
    border-radius: 5px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    padding: 1px 4px !important;
}

.fc-periodica-icon {
    font-size: .75em;
    margin-right: 3px;
    opacity: .85;
    vertical-align: middle;
}

#calendar .fc-daygrid-event {
    border-radius: 4px !important;
    font-size: .75rem !important;
}

#calendar .fc-list-event-title a {
    font-weight: 600;
}

/* FullCalendar overrides para #eqCalendar (Agenda de Equipo) — mismos estilos que #calendar */
#eqCalendar .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2942;
}

#eqCalendar .fc-button {
    background: #fff !important;
    border: 1px solid #d0d8e4 !important;
    color: #3d4f6b !important;
    border-radius: 6px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .3rem .7rem !important;
    box-shadow: none !important;
    transition: background .15s;
    margin-left: 3px !important;
}

#eqCalendar .fc-button:first-child {
    margin-left: 0 !important;
}

#eqCalendar .fc-button-group {
    gap: 3px;
}

#eqCalendar .fc-button-group .fc-button {
    border-radius: 6px !important;
    margin-left: 0 !important;
}

#eqCalendar .fc-button:hover {
    background: #e8f4fd !important;
    border-color: #00A0E3 !important;
    color: #00A0E3 !important;
}

#eqCalendar .fc-button-active,
#eqCalendar .fc-button-primary:not(:disabled).fc-button-active {
    background: #00A0E3 !important;
    border-color: #00A0E3 !important;
    color: #fff !important;
}

#eqCalendar .fc-today-button:disabled {
    opacity: .5 !important;
}

#eqCalendar .fc-col-header-cell {
    background: #f5f8fc;
    font-size: .8rem;
    font-weight: 700;
    color: #3d4f6b;
    padding: .4rem 0;
}

#eqCalendar .fc-day-today {
    background: #f0f7ff !important;
}

#eqCalendar .fc-timegrid-slot-label {
    font-size: .75rem;
    color: #8899aa;
}

#eqCalendar .fc-event {
    border-radius: 5px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    padding: 1px 4px !important;
}

#eqCalendar .fc-daygrid-event {
    border-radius: 4px !important;
    font-size: .75rem !important;
}

#eqCalendar .fc-list-event-title a {
    font-weight: 600;
}

@media (max-width: 640px) {
    #eqCalendar .fc-toolbar {
        flex-wrap: wrap;
        gap: .4rem;
    }
    #eqCalendar .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        justify-content: center;
    }
    #eqCalendar .fc-toolbar-chunk:nth-child(2) {
        width: 100%;
        justify-content: center;
    }
    #eqCalendar .fc-toolbar-title {
        font-size: .95rem;
    }
}

/* Modal actividades */
.actividad-modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.actividad-modal-header {
    background: #fff;
    color: #1a2942;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e9f0;
}
.actividad-modal-header .modal-title {
    color: #1a2942;
    font-weight: 600;
    font-size: 1.05rem;
}
.actividad-modal-header .modal-title i {
    color: var(--v3-accent, #00A0E3);
}
.actividad-modal-header .btn-close-white {
    filter: none;
}

.actividad-modal-body {
    padding: 1.25rem;
    background: #fff;
}

.actividad-modal-footer {
    background: #fff;
    border-top: 1px solid #e5e9f0;
    padding: .75rem 1.25rem;
}

html[data-theme="dark"] .actividad-modal-header { background: var(--bg-card); color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .actividad-modal-header .modal-title { color: var(--text); }
html[data-theme="dark"] .actividad-modal-header .modal-title i { color: var(--acento); }
html[data-theme="dark"] .actividad-modal-header .btn-close-white { filter: invert(1); }
html[data-theme="dark"] .actividad-modal-body, html[data-theme="dark"] .actividad-modal-footer { background: var(--bg-card); border-top-color: var(--border); }

.actividad-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
}

.actividad-form-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.actividad-form-field label {
    font-size: .78rem;
    font-weight: 600;
    color: #3d4f6b;
    margin-bottom: 0;
}

.actividad-field-full {
    grid-column: 1 / -1;
}

.actividad-propietario-info {
    margin-top: .75rem;
    padding: .5rem .75rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: .82rem;
    color: #6b5000;
}

@media (max-width: 640px) {
    .actividad-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   CRM — ACTIVIDADES MODAL (nuevo diseño)
   ============================================= */

.act-section {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .9rem;
}

.act-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.act-label {
    font-size: .78rem;
    font-weight: 600;
    color: #3d4f6b;
    margin-bottom: 0;
    line-height: 1.2;
}

.act-required {
    color: #dc3545;
    font-weight: 700;
}

.act-input {
    width: 100%;
    padding: .42rem .65rem;
    font-size: .85rem;
    color: #1a2942;
    background: #fff;
    border: 1.5px solid #d0dae6;
    border-radius: 7px;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-sizing: border-box;
}

.act-input:focus {
    border-color: #00A0E3;
    box-shadow: 0 0 0 3px rgba(0,160,227,.12);
}

.act-input:disabled {
    background: #f0f4fa;
    color: #8899aa;
    cursor: not-allowed;
}

.act-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%233d4f6b' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    padding-right: 2rem;
    cursor: pointer;
}

.act-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* Sección fecha/hora con fondo diferenciado */
.act-datetime-section {
    background: #f5f8fc;
    border: 1px solid #e0e7ef;
    border-radius: 9px;
    margin-bottom: .9rem;
    overflow: hidden;
}

.act-datetime-header {
    padding: .45rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    color: #3d4f6b;
    background: #eef2f8;
    border-bottom: 1px solid #e0e7ef;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.act-datetime-body {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.act-datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .6rem;
}

/* Checkboxes pill */
.act-checks-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.act-check-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    background: #fff;
    border: 1.5px solid #d0dae6;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    color: #3d4f6b;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}

.act-check-pill input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #00A0E3;
    cursor: pointer;
    flex-shrink: 0;
}

.act-check-pill:has(input:checked) {
    background: #e8f4fd;
    border-color: #00A0E3;
    color: #006fa0;
}

.act-check-pill:hover {
    border-color: #00A0E3;
    background: #f0f9ff;
}

@media (max-width: 600px) {
    .act-datetime-row {
        grid-template-columns: 1fr;
    }
    .act-checks-row {
        flex-direction: column;
    }
}

/* =============================================
   CRM — ALERT BANNER (actividades)
   ============================================= */

.alert-banner {
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
}

.alert-banner-error {
    background: #fde8e8;
    color: #a71d1d;
    border: 1px solid #f5c6cb;
}

.act-duplicando-banner {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff8e1;
    color: #7a5800;
    border: 1px solid #ffe082;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    font-size: .85rem;
}

/* =============================================
   CRM — AVISOS
   ============================================= */

.avisos-tabs {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.avisos-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1.1rem;
    border: 1.5px solid #d0dae8;
    border-radius: 20px;
    background: #fff;
    color: #3a4a5c;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.avisos-tab:hover {
    background: #e8f4fc;
    border-color: #00A0E3;
    color: #00A0E3;
}

.avisos-tab.active {
    background: #00A0E3;
    border-color: #00A0E3;
    color: #fff;
    font-weight: 600;
}

.avisos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e53935;
    color: #fff;
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.avisos-tab.active .avisos-badge {
    background: rgba(255,255,255,.35);
    color: #fff;
}

.avisos-lista {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.avisos-loading,
.avisos-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #7a8a9a;
    font-size: .92rem;
}

.aviso-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .9rem 1.1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .15s;
}

.aviso-card:hover {
    box-shadow: 0 3px 10px rgba(0,160,227,.1);
    border-color: #b3ddf5;
}

.aviso-card-left {
    flex-shrink: 0;
    padding-top: .1rem;
}

.aviso-tipo-badge {
    display: inline-block;
    background: #e8f4fc;
    color: #00A0E3;
    border: 1px solid #b3ddf5;
    border-radius: 6px;
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aviso-card-body {
    flex: 1;
    min-width: 0;
}

.aviso-asunto {
    font-weight: 600;
    font-size: .92rem;
    color: #1a2942;
    margin-bottom: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aviso-meta {
    font-size: .8rem;
    color: #5a6a7a;
    margin-bottom: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aviso-fecha {
    font-size: .78rem;
    color: #00A0E3;
    font-weight: 500;
    margin-top: .25rem;
}

.aviso-card-actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex-shrink: 0;
    align-items: stretch;
    min-width: 100px;
}

.btn-aviso-posponer,
.btn-aviso-activar,
.btn-aviso-descartar,
.btn-aviso-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .7rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.btn-aviso-posponer {
    background: #e8f4fc;
    color: #00A0E3;
    border-color: #b3ddf5;
}
.btn-aviso-posponer:hover { background: #b3ddf5; }

.btn-aviso-activar {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}
.btn-aviso-activar:hover { background: #a5d6a7; }

.btn-aviso-descartar {
    background: #fdecea;
    color: #c62828;
    border-color: #ef9a9a;
}
.btn-aviso-descartar:hover { background: #ef9a9a; }

.btn-aviso-ver {
    background: #f3f4f6;
    color: #3a4a5c;
    border-color: #d0dae8;
}
.btn-aviso-ver:hover { background: #d0dae8; }

/* =============================================
   CRM — ACTIVIDADES TAREA VINCULADA
   ============================================= */

/* Buscador: columna (proyecto encima, texto+lupa debajo) */
.act-tarea-buscar {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.act-tarea-buscar-fila {
    display: flex;
    gap: .4rem;
}

.act-tarea-btn-buscar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00A0E3;
    color: #fff;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s;
}
.act-tarea-btn-buscar:hover { background: #0086c0; }

/* Lista de resultados */
.act-tarea-resultados {
    border: 1px solid #d0dae6;
    border-radius: 7px;
    background: #fff;
    max-height: 160px;
    overflow-y: auto;
    margin-top: .25rem;
}

.act-tarea-item {
    padding: .45rem .75rem;
    font-size: .83rem;
    color: #1a2942;
    cursor: pointer;
    border-bottom: 1px solid #f0f4fa;
    transition: background .12s;
}
.act-tarea-item:last-child { border-bottom: none; }
.act-tarea-item:hover { background: #e8f4fd; color: #006fa0; }

/* =============================================
   CALENDARIO — ACTIVIDADES PERSONALES
   ============================================= */

.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cal-toolbar-left {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cal-toolbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.cal-new-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #00A0E3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .4rem .9rem;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.cal-new-btn:hover { background: #0088c2; }

.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .75rem;
    border-radius: 6px;
    border: 1px solid #d0dae6;
    background: #fff;
    color: #1a2942;
    font-size: .83rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
}
.cal-nav-btn:hover { background: #f0f9ff; border-color: #00A0E3; color: #00A0E3; }

.cal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2942;
    margin-left: .25rem;
}

.cal-view-btns {
    display: flex;
    border: 1px solid #d0dae6;
    border-radius: 7px;
    overflow: hidden;
}

.cal-view-btn {
    padding: .35rem .85rem;
    background: #fff;
    border: none;
    border-right: 1px solid #d0dae6;
    font-size: .82rem;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: all .15s;
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover  { background: #f0f9ff; color: #00A0E3; }
.cal-view-btn.active { background: #00A0E3; color: #fff; }

#calendarContainer {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    padding: .75rem;
}

/* Ajustes FullCalendar */
#calendarContainer .fc-timegrid-slot { height: 2.2em; }
#calendarContainer .fc-col-header-cell-cushion { font-size: .82rem; font-weight: 600; color: #1a2942; text-decoration: none; }
#calendarContainer .fc-timegrid-slot-label { font-size: .75rem; color: #6b7c93; }
#calendarContainer .fc-event { border-radius: 4px; font-size: .78rem; padding: 1px 3px; cursor: pointer; }
#calendarContainer .fc-event:hover { opacity: .88; }
#calendarContainer .fc-daygrid-event { font-size: .78rem; }
#calendarContainer .fc-list-event-title a { font-weight: 600; color: #1a2942; text-decoration: none; }
#calendarContainer .fc-list-event-time { font-size: .8rem; color: #6b7c93; }
#calendarContainer .fc-now-indicator { border-color: #dc3545; }
#calendarContainer .fc-non-business { background: rgba(240,244,248,.55); }
#calendarContainer .fc-today-button { display: none; }
#calendarContainer .fc-scrollgrid { border-radius: 6px; overflow: hidden; }

/* Modal detalle actividad */
.mad-row {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    padding: .45rem 0;
    border-bottom: 1px solid #f0f4f8;
    font-size: .88rem;
    color: #1a2942;
}
.mad-row:last-child { border-bottom: none; }
.mad-header { border-left: 4px solid #00A0E3; }

@media (max-width: 600px) {
    .cal-toolbar { flex-direction: column; align-items: flex-start; }
    .cal-view-btns .cal-view-btn { padding: .3rem .55rem; font-size: .76rem; }
}

.act-tarea-item-proyecto {
    display: block;
    font-size: .75rem;
    color: #6b7c93;
    margin-top: 1px;
    padding-left: 1.4rem;
}

.act-tarea-loading,
.act-tarea-empty,
.act-tarea-error {
    padding: .5rem .75rem;
    font-size: .82rem;
    color: #6b7c93;
}
.act-tarea-error { color: #a71d1d; }

/* Tarea seleccionada (display) */
.act-tarea-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .7rem;
    background: #e8f4fd;
    border: 1.5px solid #00A0E3;
    border-radius: 7px;
}

.act-tarea-info {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 1;
    min-width: 0;
    font-size: .83rem;
    color: #006fa0;
}

.act-tarea-asunto {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-tarea-proyecto {
    color: #3d4f6b;
    font-size: .78rem;
    white-space: nowrap;
}

.act-tarea-desvincular {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    background: transparent;
    border: 1px solid #00A0E3;
    border-radius: 5px;
    color: #006fa0;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.act-tarea-desvincular:hover { background: #fff; }

/* =============================================
   CRM — ACTIVIDADES MODAL TABS
   ============================================= */

.act-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #e0e7ef;
    background: #f5f8fc;
}

.act-tab {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .65rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #6b7c93;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    user-select: none;
}

.act-tab:hover { color: #00A0E3; }

.act-tab.active {
    color: #00A0E3;
    border-bottom-color: #00A0E3;
    background: #fff;
}

.act-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    border-radius: 9px;
    background: #00A0E3;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.act-tab-content {
    background: #f7f9fc;
}

/* =============================================
   CRM — ACTIVIDADES PERSONAS (invitados / contactos)
   ============================================= */

.act-personas-buscar {
    padding: .85rem 1.1rem .5rem;
    border-bottom: 1px solid #e0e7ef;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.act-personas-lista {
    padding: .5rem .75rem;
    max-height: 220px;
    overflow-y: auto;
}

.act-personas-empty,
.act-personas-loading {
    padding: .75rem .5rem;
    font-size: .82rem;
    color: #8899aa;
    text-align: center;
}

.act-persona-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .5rem;
    border-radius: 7px;
    transition: background .12s;
    gap: .5rem;
}

.act-persona-row:hover { background: #f0f4fa; }

.act-persona-info {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 1;
    min-width: 0;
    font-size: .83rem;
    color: #1a2942;
}

.act-persona-nombre {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-persona-detalle {
    font-size: .75rem;
    color: #6b7c93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.act-persona-quitar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #d0dae6;
    border-radius: 5px;
    color: #8899aa;
    font-size: .75rem;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.act-persona-quitar:hover {
    background: #fde8e8;
    border-color: #dc3545;
    color: #dc3545;
}

/* =============================================
   CRM — MODAL DETALLE (proyectos / tareas)
   ============================================= */

/* Botón ojo en tabla */
.btn-det-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #d0dae6;
    border-radius: 6px;
    background: #f5f8fc;
    color: #6b7c93;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    padding: 0;
}
.btn-det-ver:hover {
    background: #e8f4fd;
    border-color: #00A0E3;
    color: #00A0E3;
    box-shadow: 0 2px 6px rgba(0,160,227,.15);
}

/* ── Header del modal ── */
#modalDetalleProyecto .modal-header,
#modalDetalleTarea .modal-header {
    background: linear-gradient(100deg, #f5f8fc 0%, #e6f5fc 100%);
    border-bottom: 2px solid #00A0E3;
    padding: .9rem 1.25rem;
}
#modalDetalleProyecto .modal-title,
#modalDetalleTarea .modal-title {
    font-size: .92rem;
    font-weight: 700;
    color: #1a2942;
    display: flex;
    align-items: center;
    gap: .4rem;
}
#modalDetalleProyecto .modal-title i,
#modalDetalleTarea .modal-title i {
    color: #00A0E3;
    font-size: 1rem;
}

/* ── Wrapper pestañas (para gradiente de overflow) ── */
.det-tabs-wrap {
    position: relative;
    background: #f7fafd;
    border-bottom: 2px solid #e0e9f4;
}
.det-tabs-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, #f7fafd 80%);
    pointer-events: none;
    z-index: 1;
}

/* ── Pestañas ── */
.det-nav-tabs {
    border-bottom: none !important;
    background: transparent;
    padding: 0 .75rem !important;
    gap: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 0 !important;
}
.det-nav-tabs::-webkit-scrollbar { display: none; }

.det-nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -2px;
    padding: .65rem .9rem !important;
    font-size: .81rem;
    font-weight: 600;
    color: #6b7c93;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    gap: .3rem;
    transition: color .15s, border-color .15s, background .15s;
    background: transparent !important;
}
.det-nav-tabs .nav-link:hover {
    color: #00A0E3 !important;
    border-bottom-color: #b3ddf5 !important;
    background: rgba(0,160,227,.04) !important;
}
.det-nav-tabs .nav-link.active {
    color: #00A0E3 !important;
    border-bottom-color: #00A0E3 !important;
    background: rgba(0,160,227,.06) !important;
    font-weight: 700;
}

/* ── Badge en pestaña ── */
.det-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .35rem;
    border-radius: 9px;
    background: #00A0E3;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}
.det-nav-tabs .nav-link:not(.active) .det-badge {
    background: #a0b4cc;
}

/* ── Área de contenido ── */
.det-tab-content {
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    padding: .75rem 1rem !important;
}

/* ── Estados loading / vacío ── */
.det-loading {
    padding: 2rem 1rem;
    font-size: .84rem;
    color: #9aadbe;
    text-align: center;
}
.det-empty {
    padding: 2rem 1rem;
    font-size: .84rem;
    color: #9aadbe;
    text-align: center;
}
.det-empty i, .det-loading i { font-size: 1.3rem; display: block; margin-bottom: .4rem; color: #c0d0de; }

/* ── Lista (invitados / contactos) ── */
.det-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .35rem;
}
.det-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;           /* permite que las pills bajen a la siguiente fila si no caben */
    row-gap: .25rem;
    column-gap: .35rem;
    padding: .45rem .6rem;
    font-size: .83rem;
    color: #1a2942;
    background: #f5f8fc;
    border-radius: 7px;
    border: 1px solid #e8eef6;
    min-width: 0;              /* permite que el contenido se reduzca dentro de la celda del grid */
}
.det-list li > i:first-child { color: #00A0E3; font-size: .85rem; flex-shrink: 0; }
.det-list li small { white-space: nowrap; }

/* ── Tabla de datos ── */
.det-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .81rem;
}
.det-table thead tr {
    background: #f0f6fb;
    border-bottom: 2px solid #d5e5f0;
}
.det-table thead th {
    color: #3a4f6b;
    font-weight: 700;
    padding: .5rem .7rem;
    white-space: nowrap;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-size: .72rem;
}
.det-table tbody td {
    padding: .45rem .7rem;
    border-bottom: 1px solid #edf2f8;
    color: #1a2942;
    vertical-align: middle;
}
.det-table tbody tr:last-child td { border-bottom: none; }
.det-table tbody tr:hover td { background: #f2f8fd; }

/* =============================================
   CRM — AGENDA DE EQUIPO
   ============================================= */

.eq-panel {
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.eq-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #f5f8fc;
    border-bottom: 1px solid #dce5f0;
    font-size: .82rem;
    font-weight: 600;
    color: #3a4f6b;
}
.eq-panel-actions { display: flex; gap: .4rem; }
.eq-btn-sel {
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid #c5d4e5;
    border-radius: 5px;
    background: #fff;
    color: #5a6a7a;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.eq-btn-sel:hover { background: #e8f4fd; color: #00A0E3; border-color: #00A0E3; }

.eq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    min-height: 52px;
}
.eq-chip-loading { font-size: .82rem; color: #8899aa; display: flex; align-items: center; }

.eq-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem .3rem .5rem;
    border-radius: 20px;
    border: 1.5px solid #dce5f0;
    background: #f5f8fc;
    color: #6b7c93;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}
.eq-chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c0ccd8;
    transition: background .18s;
    flex-shrink: 0;
}
.eq-chip.active {
    border-color: var(--chip-color, #00A0E3);
    background: rgba(0,0,0,.04);
    color: var(--chip-color, #00A0E3);
}
.eq-chip.active .eq-chip-dot {
    background: var(--chip-color, #00A0E3);
}
.eq-chip:hover { opacity: .82; }

.eq-switcher { display: flex; gap: .4rem; margin-bottom: .75rem; flex-wrap: wrap; }
.eq-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 8px;
    border: 1.5px solid #dce5f0;
    background: #f5f8fc;
    color: #6b7c93;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.eq-switch-btn:hover { border-color: #00A0E3; color: #00A0E3; background: #e8f4fd; }
.eq-switch-btn.active {
    background: #00A0E3;
    border-color: #00A0E3;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,160,227,.25);
}

.eq-leyenda { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.eq-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .77rem;
    font-weight: 600;
    color: #3a4f6b;
    padding: .15rem .55rem .15rem .35rem;
    background: #f5f8fc;
    border-radius: 10px;
    border: 1px solid #dce5f0;
}
.eq-leyenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color, #6b7c93);
    flex-shrink: 0;
}

.eq-calendar-wrapper {
    border: 1px solid #dce5f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.eq-tabla-vacia {
    text-align: center;
    color: #8899aa;
    padding: 2rem 1rem !important;
    font-size: .85rem;
}

.eq-prop-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 10px;
    font-size: .76rem;
    font-weight: 700;
}

.eq-tooltip {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(26,41,66,.18);
    border: 1px solid #dce5f0;
    min-width: 210px;
    max-width: 300px;
    overflow: hidden;
    pointer-events: none;
}
.eq-tip-header {
    padding: .5rem .75rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.eq-tip-body {
    padding: .5rem .75rem;
    font-size: .8rem;
    color: #3a4f6b;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* =============================================
   CRM — DASHBOARD (individual y equipo)
   ============================================= */

/* ── Selector de período ── */
.dash-period-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .6rem .75rem;
    background: #fff;
    border: 1px solid #d6e4ef;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.dash-period-btn {
    padding: .3rem .75rem;
    border: 1px solid #c0d4e4;
    border-radius: 20px;
    background: #f4f8fb;
    color: #4a6680;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.dash-period-btn:hover { background: #e0f0fb; border-color: #00A0E3; color: #0077aa; }
.dash-period-btn.active { background: #00A0E3; border-color: #00A0E3; color: #fff; font-weight: 600; }
.dash-period-custom {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
.dash-period-custom input[type="date"] {
    padding: .25rem .5rem;
    border: 1px solid #c0d4e4;
    border-radius: 6px;
    font-size: .8rem;
    color: #3a4f6b;
    background: #fff;
}
.dash-period-custom .dash-period-apply {
    padding: .28rem .7rem;
    border: none;
    border-radius: 6px;
    background: #00A0E3;
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s;
}
.dash-period-custom .dash-period-apply:hover { background: #0080bb; }

/* ── KPI cards ── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dash-kpis { grid-template-columns: 1fr; } }
.dash-kpi {
    background: #fff;
    border: 1px solid #d6e4ef;
    border-radius: 12px;
    padding: 1.1rem 1.25rem .9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 4px rgba(0,160,227,.07);
    transition: box-shadow .15s;
}
.dash-kpi:hover { box-shadow: 0 3px 12px rgba(0,160,227,.15); }
.dash-kpi-click { cursor: pointer; }
.dash-kpi-click:hover {
    box-shadow: 0 4px 16px rgba(0,160,227,.22);
    transform: translateY(-1px);
    transition: box-shadow .15s, transform .15s;
}
.dash-kpi-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.dash-kpi-icon.blue  { background: #e0f4fd; color: #00A0E3; }
.dash-kpi-icon.green { background: #e4f8f0; color: #28a745; }
.dash-kpi-icon.amber { background: #fff4e0; color: #e08000; }
.dash-kpi-icon.purple{ background: #f0eaff; color: #7040c0; }
.dash-kpi-icon.pink  { background: #ffeaf2; color: #c0306a; }
.dash-kpi-icon.red   { background: #fde8e8; color: #dc3545; }

/* ── Resumen Anual ── */
.anual-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2rem 0 1rem;
}
.anual-divisor::before,
.anual-divisor::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d0e8f5, transparent);
}
.anual-divisor-text {
    font-size: .82rem;
    font-weight: 700;
    color: #00A0E3;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    padding: 0 8px;
}
.anual-year-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 1rem;
}
.anual-year-btn {
    padding: .35rem 1.1rem;
    border: 1.5px solid #d0e8f5;
    border-radius: 20px;
    background: #fff;
    color: #3a5a7a;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.anual-year-btn.active {
    background: #00A0E3;
    border-color: #00A0E3;
    color: #fff;
}
.anual-year-btn:hover:not(.active) { border-color: #00A0E3; color: #00A0E3; }

/* Chart mensual de barras */
.anual-mensual-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding-bottom: 22px;
    position: relative;
}
.anual-mensual-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 100%;
    justify-content: flex-end;
}
.anual-mensual-val {
    font-size: .68rem;
    color: #6b7c93;
    text-align: center;
    white-space: nowrap;
}
.anual-mensual-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: #00A0E3;
    min-height: 2px;
    transition: height .3s ease;
    cursor: default;
}
.anual-mensual-lbl {
    font-size: .68rem;
    color: #9aadbe;
    text-align: center;
    position: absolute;
    bottom: 0;
    white-space: nowrap;
}
.anual-mensual-axis {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 22px;
    position: relative;
}

/* Tabla horas por persona */
.anual-personas-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
}
.anual-personas-name {
    width: 110px;
    flex-shrink: 0;
    font-size: .80rem;
    color: #3a4f6b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anual-personas-track {
    flex: 1;
    background: #eaf3fa;
    border-radius: 6px;
    height: 20px;
    overflow: hidden;
}
.anual-personas-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .4s ease;
}
.anual-personas-h {
    width: 46px;
    flex-shrink: 0;
    text-align: right;
    font-size: .78rem;
    font-weight: 600;
    color: #2a4560;
}
.dash-kpi-val {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1a2f45;
    line-height: 1;
}
.dash-kpi-lab {
    font-size: .75rem;
    color: #7a94aa;
    margin-top: .2rem;
}

/* ── Grid de secciones ── */
.dash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) { .dash-row { grid-template-columns: 1fr; } }
.dash-section, .dash-section-full {
    background: #fff;
    border: 1px solid #d6e4ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,160,227,.07);
}
.dash-section-full { margin-bottom: 1rem; }
.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    background: #f4f8fb;
    border-bottom: 1px solid #d6e4ef;
}
.dash-section-title {
    font-size: .85rem;
    font-weight: 600;
    color: #2a4560;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.dash-section-title i { color: #00A0E3; font-size: .95rem; }
.dash-section-badge {
    font-size: .72rem;
    background: #00A0E3;
    color: #fff;
    border-radius: 20px;
    padding: .1rem .55rem;
    font-weight: 600;
}
.dash-section-body { padding: .75rem 1rem; }

/* ── Barras de estadísticas ── */
.dash-bars { display: flex; flex-direction: column; gap: .55rem; }
.dash-bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 38px;
    align-items: center;
    gap: .5rem;
}
@media (max-width: 500px) { .dash-bar-row { grid-template-columns: 80px 1fr 32px; } }
.dash-bar-label {
    font-size: .78rem;
    color: #3a4f6b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-bar-track {
    background: #eaf3fa;
    border-radius: 6px;
    height: 14px;
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: #00A0E3;
    transition: width .4s ease;
}
.dash-bar-count {
    font-size: .78rem;
    font-weight: 600;
    color: #2a4560;
    text-align: right;
}

/* ── Próximas actividades ── */
.dash-upcoming { display: flex; flex-direction: column; gap: .4rem; }
.dash-upcoming-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    border: 1px solid #e8f2fa;
    background: #fafdff;
    transition: background .15s;
}
.dash-upcoming-item:hover { background: #f0f8ff; }
.dash-upcoming-fecha {
    font-size: .73rem;
    color: #7a94aa;
    white-space: nowrap;
}
.dash-upcoming-asunto {
    font-size: .8rem;
    color: #2a4560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-upcoming-tipo {
    font-size: .7rem;
    background: #e0f4fd;
    color: #0077aa;
    border-radius: 12px;
    padding: .1rem .45rem;
    white-space: nowrap;
}
.dash-upcoming-owner {
    font-size: .7rem;
    color: #9aadbe;
    white-space: nowrap;
}

/* ── Tabla dashboard ── */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}
.dash-table th {
    background: #f4f8fb;
    color: #4a6680;
    font-weight: 600;
    padding: .45rem .6rem;
    border-bottom: 2px solid #d6e4ef;
    white-space: nowrap;
}
.dash-table td {
    padding: .4rem .6rem;
    border-bottom: 1px solid #eaf3fa;
    color: #2a4560;
    vertical-align: middle;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: #f5fbff; }
.dash-row-clickable { cursor: pointer; }
.dash-row-clickable:hover td { background: #e6f5fd !important; }

/* ══════════════════════════════════════════════════
   HOME WELCOME  (Dashboard/Index.cshtml – CRM)
══════════════════════════════════════════════════ */
.hw-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.4rem;
}
.hw-greet {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2f45;
    line-height: 1.3;
}
.hw-date {
    font-size: .85rem;
    color: #7a9ab2;
    margin-top: .15rem;
    text-transform: capitalize;
}
.hw-header-links {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
.hw-link {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border: 1.5px solid #c8dff0;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    color: #00A0E3;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.hw-link:hover { background: #e8f4fd; border-color: #00A0E3; color: #0082ba; }

/* Navegación entre semanas */
.hw-weeks-nav {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: .35rem 0 .65rem;
    padding: .35rem .25rem;
}
.hw-weeks-nav-btn {
    width: 32px; height: 32px;
    border: 1px solid #e2e8f2;
    background: #fff;
    color: #00A0E3;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.hw-weeks-nav-btn:hover:not(:disabled) { background: #e8f4fd; border-color: #00A0E3; }
.hw-weeks-nav-btn:disabled { color: #c7d2e0; border-color: #e8edf3; background: #f7f9fc; cursor: not-allowed; }
.hw-weeks-nav-label {
    color: #1a2f45;
    font-weight: 600;
    font-size: .92rem;
}
.hw-weeks-nav-hoy {
    margin-left: auto;
    padding: .35rem .85rem;
    border: 1px solid #00A0E3;
    background: #fff;
    color: #00A0E3;
    border-radius: 6px;
    cursor: pointer;
    font-size: .82rem;
    transition: background .15s, color .15s;
}
.hw-weeks-nav-hoy:hover { background: #00A0E3; color: #fff; }

/* KPIs semanales clicables */
.hw-wkpi-click { cursor: pointer; transition: transform .15s, box-shadow .15s; border-radius: 8px; }
.hw-wkpi-click:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,160,227,.15);
    background: #f9fbff;
}

/* Semanas */
.hw-weeks-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
@media (max-width: 700px) { .hw-weeks-row { grid-template-columns: 1fr; } }

.hw-week-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.1rem 1.2rem 1rem;
    box-shadow: 0 2px 10px rgba(0,120,200,.07);
    border: 1.5px solid #e0eef8;
}
.hw-week-current { border-left: 4px solid #00A0E3; }
.hw-week-prev    { border-left: 4px solid #b0c8dc; }

.hw-week-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .9rem;
}
.hw-week-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .7rem;
    border-radius: 20px;
    letter-spacing: .02em;
}
.hw-week-badge--current { background: #e8f4fd; color: #00A0E3; }
.hw-week-badge--prev    { background: #f0f4f8; color: #7a9ab2; }
.hw-week-range { font-size: .78rem; color: #9aadbe; }

.hw-week-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}
@media (max-width: 1100px) { .hw-week-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hw-week-kpis { grid-template-columns: 1fr; } }

/* Tarjeta KPI con sparkline (estilo prototipo) */
.hw-kpi-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6eef6;
    border-radius: 12px;
    padding: .85rem .95rem .7rem;
    display: flex;
    flex-direction: column;
    min-height: 118px;
    overflow: hidden;
}
.hw-kpi-top { display: flex; align-items: center; gap: .5rem; }
.hw-kpi-ico {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.hw-kpi-label { font-size: .78rem; color: #64748b; font-weight: 500; line-height: 1.2; }
.hw-kpi-value { font-size: 1.9rem; font-weight: 700; color: #0f172a; line-height: 1.1; margin: .35rem 0 .15rem; }
.hw-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; margin-top: auto; }
.hw-kpi-foot-left { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.hw-kpi-badge {
    font-size: .72rem; font-weight: 700; padding: .12rem .4rem; border-radius: 6px; white-space: nowrap;
}
.hw-kpi-badge--up   { background: #eafaf0; color: #16a34a; }
.hw-kpi-badge--down { background: #fdecec; color: #dc2626; }
.hw-kpi-badge--flat { background: #eef2f6; color: #64748b; }
.hw-kpi-desc { font-size: .72rem; color: #94a3b8; }
.hw-kpi-spark { flex-shrink: 0; width: 96px; height: 36px; opacity: .95; }
.hw-kpi-spark svg { display: block; }
.hw-wkpi {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #f7fbff;
    border-radius: 10px;
    padding: .5rem .75rem;
    flex: 1 1 130px;
    min-width: 120px;
}
.hw-wkpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.hw-wkpi-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a2f45;
    line-height: 1.2;
}
.hw-wkpi-label {
    font-size: .68rem;
    color: #9aadbe;
    line-height: 1.2;
}
.hw-wkpi-skeleton {
    grid-column: 1 / -1;
    width: 100%;
    height: 118px;
    background: linear-gradient(90deg, #eaf3fa 25%, #f5f9fd 50%, #eaf3fa 75%);
    background-size: 400% 100%;
    animation: hw-shimmer 1.4s infinite;
    border-radius: 12px;
}
@keyframes hw-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.hw-wkpi-error { font-size: .8rem; color: #dc3545; padding: .5rem; }

/* Fila inferior */
.hw-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
@media (max-width: 700px) { .hw-bottom-row { grid-template-columns: 1fr; } }

.hw-bottom-section {
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 10px rgba(0,120,200,.07);
    border: 1.5px solid #e0eef8;
}
.hw-bottom-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .7rem;
    font-size: .82rem;
    font-weight: 700;
    color: #2c4a62;
}
.hw-ver-todo {
    font-size: .75rem;
    font-weight: 600;
    color: #00A0E3;
    text-decoration: none;
    white-space: nowrap;
}
.hw-ver-todo:hover { text-decoration: underline; }

.hw-act-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.hw-act-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .5rem;
    border-radius: 7px;
    font-size: .78rem;
    border-left: 3px solid #c8dff0;
    background: #f7fbff;
}
.hw-act-item--danger { border-left-color: #dc3545; background: #fff5f5; }
.hw-act-item--warn   { border-left-color: #ffc107; background: #fffbf0; }
.hw-act-fecha {
    flex-shrink: 0;
    font-size: .72rem;
    color: #9aadbe;
    min-width: 62px;
}
.hw-act-asunto {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a2f45;
    font-weight: 500;
}
.hw-act-tipo {
    flex-shrink: 0;
    font-size: .68rem;
    color: #7a9ab2;
    background: #eaf3fa;
    padding: .1rem .45rem;
    border-radius: 10px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hw-loading { display: flex; justify-content: center; padding: 1.2rem 0; color: #9aadbe; gap: .5rem; align-items: center; }
.hw-empty { font-size: .8rem; color: #9aadbe; padding: .8rem .3rem; display: flex; align-items: center; }
.dash-table .badge-estado {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 600;
}

/* ── Loading ── */
.dash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    color: #9aadbe;
    font-size: .85rem;
}
.dash-loading .spinner-border { width: 1.2rem; height: 1.2rem; border-width: 2px; color: #00A0E3; }

/* ── Chip persona equipo ── */
.dash-person-chip {
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: .25rem;
}
.dash-no-data {
    text-align: center;
    padding: 1.5rem;
    color: #b0c4d4;
    font-size: .85rem;
}
.dash-no-data i { display: block; font-size: 1.5rem; margin-bottom: .35rem; color: #ccdde8; }

/* ── Paginador dashboard ── */
.dash-pager {
    border-top: 1px solid #eaf3fa;
    padding: .5rem .75rem;
}
.dash-pager-inner {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.dash-pager-info {
    font-size: .75rem;
    color: #9aadbe;
    margin-right: .4rem;
}
.dash-pager-btn {
    min-width: 30px; height: 28px;
    padding: 0 .5rem;
    border: 1px solid #c0d4e4;
    border-radius: 6px;
    background: #f4f8fb;
    color: #4a6680;
    font-size: .78rem;
    cursor: pointer;
    transition: background .12s, color .12s;
    line-height: 26px;
}
.dash-pager-btn:hover:not(:disabled) { background: #e0f0fb; border-color: #00A0E3; color: #0077aa; }
.dash-pager-btn.active { background: #00A0E3; border-color: #00A0E3; color: #fff; font-weight: 600; }
.dash-pager-btn:disabled { opacity: .4; cursor: default; }
.dash-pager-ellipsis { font-size: .8rem; color: #9aadbe; padding: 0 .2rem; }

/* ── Buscador dashboard ── */
.dash-search-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid #eaf3fa;
    background: #fafdff;
}
.dash-search-bar i { color: #9aadbe; font-size: .85rem; flex-shrink: 0; }
.dash-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: .8rem;
    color: #2a4560;
    outline: none;
}
.dash-search-input::placeholder { color: #b0c8dc; }
.dash-search-clear {
    background: none;
    border: none;
    color: #9aadbe;
    cursor: pointer;
    padding: 0 .1rem;
    font-size: .85rem;
    line-height: 1;
}
.dash-search-clear:hover { color: #dc3545; }

/* ── Ranking con donut ── */
.dash-rank-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.dash-rank-chart { width: 100%; }
.dash-rank-list  { width: 100%; overflow: hidden; }
.dash-rank-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .45rem;
}
.dash-rank-name {
    width: 130px;
    flex-shrink: 0;
    font-size: .80rem;
    color: #3a4f6b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-rank-track {
    flex: 1;
    background: #eaf3fa;
    border-radius: 6px;
    height: 20px;
    overflow: hidden;
    min-width: 20px;
}
.dash-rank-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .4s ease;
}
.dash-rank-count {
    min-width: 38px;
    flex-shrink: 0;
    text-align: right;
    font-size: .78rem;
    font-weight: 600;
    color: #2a4560;
    white-space: nowrap;
}

/* ==============================================
   INFORMES - Tabs
   ============================================== */
.inf-tabs {
    display: flex;
    gap: 4px;
    padding: 0 0 0 0;
    margin: 16px 0 0 0;
    border-bottom: 2px solid #dee2e6;
}
.inf-tab {
    padding: 9px 18px;
    border: none;
    background: transparent;
    color: #5a7491;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 4px 4px 0 0;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.inf-tab:hover { color: #00A0E3; background: #f0f8fd; }
.inf-tab.active { color: #00A0E3; border-bottom-color: #00A0E3; font-weight: 600; }
.inf-tab-pane { padding: 18px 0 0 0; }

/* ==============================================
   GANTT - Lista de proyectos
   ============================================== */
.gantt-proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.gantt-proj-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    transition: transform .15s, box-shadow .15s;
    border: 1px solid #e8eef4;
}
.gantt-proj-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,160,227,.18); }
.gantt-proj-card-title {
    font-weight: 600;
    font-size: .88rem;
    color: #1a3050;
    margin-bottom: 6px;
    line-height: 1.3;
}
.gantt-proj-card-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.gantt-proj-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: #7a94aa;
    margin-top: 4px;
}

/* ==============================================
   GANTT - Chart
   ============================================== */
.gantt-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.gantt-titulo {
    font-weight: 600;
    font-size: 1rem;
    color: #1a3050;
}
.gantt-fechas { font-size: .8rem; color: #7a94aa; }

.gantt-container {
    overflow-x: auto;
    border: 1px solid #dde5ee;
    border-radius: 8px;
    background: #fff;
}
.gantt-wrap { min-width: 700px; }

.gantt-header {
    display: flex;
    border-bottom: 2px solid #dde5ee;
    background: #f5f8fb;
    position: sticky;
    top: 0;
    z-index: 2;
}
.gantt-label-col { width: 200px; flex-shrink: 0; padding: 8px 10px; font-size: .75rem; color: #7a94aa; }
.gantt-months {
    flex: 1;
    position: relative;
    height: 34px;
}
.gantt-month {
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 600;
    color: #4a6680;
    border-right: 1px dashed #dde5ee;
    padding: 0 4px;
    overflow: hidden;
}

.gantt-rows { }
.gantt-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f4f8;
    min-height: 42px;
}
.gantt-row:hover { background: #f8fbfd; }
.gantt-label {
    width: 200px;
    flex-shrink: 0;
    padding: 6px 10px;
    overflow: hidden;
}
.gantt-label-name {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: #1a3050;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-label-owner {
    display: block;
    font-size: .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-track {
    flex: 1;
    position: relative;
    height: 42px;
}
.gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    border-radius: 4px;
    cursor: default;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: opacity .15s;
}
.gantt-bar:hover { opacity: .85; }
.gantt-bar-label {
    font-size: .68rem;
    color: #fff;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-bar-hours {
    font-size: .65rem;
    color: rgba(255,255,255,.85);
    padding-right: 4px;
    margin-left: auto;
    white-space: nowrap;
}
.gantt-no-date {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-size: .72rem;
    color: #aaa;
    font-style: italic;
}
.gantt-act-dot {
    position: absolute;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    cursor: default;
    z-index: 1;
}
.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e83e8c;
    z-index: 3;
}
.gantt-today-label {
    position: absolute;
    top: 0;
    left: 4px;
    font-size: .65rem;
    color: #e83e8c;
    font-weight: 700;
    white-space: nowrap;
}
.gantt-leyenda {
    margin-top: 10px;
    padding: 8px 10px;
}
.gantt-leyenda-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gantt-leyenda-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: #4a6680;
}
.gantt-leyenda-item span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* ==============================================
   PRODUCTIVIDAD - Gráfico semanal
   ============================================== */
.wprod-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 180px;
    padding: 10px 0 30px 0;
}
.wprod-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 28px;
    height: 100%;
}
.wprod-val {
    font-size: .65rem;
    color: #7a94aa;
    margin-bottom: 2px;
    text-align: center;
}
.wprod-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: #f0f4f8;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}
.wprod-fill {
    width: 100%;
    background: linear-gradient(180deg, #00bfff 0%, #00A0E3 100%);
    border-radius: 3px 3px 0 0;
    transition: height .5s ease;
    min-height: 2px;
}
.wprod-lbl {
    font-size: .62rem;
    color: #7a94aa;
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    transform: rotate(-40deg);
    transform-origin: top center;
    max-width: 40px;
}

/* =============================================
   NUEVO ITEM (Proyecto / Tarea) — Formulario modal
   ============================================= */
.nuevo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.25rem;
}
.nuevo-form-col       { grid-column: span 1; }
.nuevo-form-col-full  { grid-column: span 2; }
@media (max-width: 600px) {
    .nuevo-form-col, .nuevo-form-col-full { grid-column: span 2; }
}
.nuevo-form-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: .3rem;
}
.nuevo-req { color: #e53e3e; }
.nuevo-form-input,
.nuevo-form-select,
.nuevo-form-textarea {
    width: 100%;
    border: 1.5px solid #d1d9e4;
    border-radius: 7px;
    padding: .45rem .7rem;
    font-size: .88rem;
    color: #1a2234;
    background: #fff;
    transition: border-color .15s;
    box-sizing: border-box;
}
.nuevo-form-input:focus,
.nuevo-form-select:focus,
.nuevo-form-textarea:focus {
    border-color: #00A0E3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,160,227,.12);
}
.nuevo-form-textarea { resize: vertical; min-height: 72px; }

/* Invitados */
.nuevo-inv-wrap  { border: 1.5px solid #d1d9e4; border-radius: 7px; overflow: hidden; }
.nuevo-inv-search { padding: .5rem; background: #f8fafc; border-bottom: 1px solid #e8edf2; }
.nuevo-inv-lista {
    max-height: 160px;
    overflow-y: auto;
    padding: .4rem .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}
.nuevo-inv-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .83rem;
    color: #2d3748;
    padding: .2rem .4rem;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.nuevo-inv-item:hover { background: #e8f4fd; }
.nuevo-inv-item input[type=checkbox] { accent-color: #00A0E3; }

/* Contactos autocomplete */
.nuevo-con-search-wrap { position: relative; }
.nuevo-con-sugerencias {
    /* posicionado via JS con position:fixed para escapar overflow del modal */
    background: #fff;
    border: 1.5px solid #00A0E3;
    border-radius: 0 0 7px 7px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.nuevo-con-sug-item {
    padding: .45rem .75rem;
    font-size: .85rem;
    cursor: pointer;
    color: #1a2234;
    border-bottom: 1px solid #f0f4f8;
}
.nuevo-con-sug-item:last-child { border-bottom: none; }
.nuevo-con-sug-item:hover { background: #e8f4fd; }

.nuevo-con-seleccionados {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
    min-height: 28px;
}
.nuevo-con-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #e8f4fd;
    color: #00A0E3;
    border: 1px solid #b8ddf5;
    border-radius: 20px;
    padding: .2rem .65rem;
    font-size: .82rem;
    font-weight: 500;
}
.nuevo-con-tag small { color: #4a5568; font-weight: 400; }

/* Lista de CNAE secundarios en el editor de empresa */
.ee-cnae-sec {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .25rem 0 .5rem;
}
.ee-cnae-sec .nuevo-con-tag { max-width: 100%; }
.ee-cnae-sec .nuevo-con-tag code { background: none; padding: 0; font-weight: 600; }
.nuevo-con-tag-rm {
    background: none;
    border: none;
    color: #00A0E3;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    margin-left: .1rem;
    opacity: .7;
}
.nuevo-con-tag-rm:hover { opacity: 1; }

/* Tag de invitado por defecto (propietario, no se puede quitar) */
.nuevo-con-tag.nuevo-con-tag--owner {
    background: #fff4e0;
    border-color: #f4cf95;
    color: #8a4d00;
}
.nuevo-con-tag.nuevo-con-tag--owner i.bi-star-fill { color: #e08000; }
.nuevo-con-tag.nuevo-con-tag--owner small { color: #b06b00; font-weight: 600; }

/* Tag con flag "en uso" (persona trabajando, no solo invitada a ver) */
.nuevo-con-tag.nuevo-con-tag--enuso {
    background: #eaf7ee;
    border-color: #b6e2c2;
}
.nuevo-con-tag.nuevo-con-tag--enuso.nuevo-con-tag--owner {
    /* propietario es ambos: prevalece el verde "en uso" pero conserva el borde ámbar */
    background: linear-gradient(135deg, #fff4e0 0%, #eaf7ee 100%);
    border-color: #f4cf95;
}

/* Botón clicable para alternar el flag "en uso" dentro del tag */
.nuevo-con-tag-uso {
    background: transparent;
    border: none;
    color: #6b7c93;
    padding: 0 2px;
    margin-left: .25rem;
    font-size: .95em;
    cursor: pointer;
    opacity: .75;
}
.nuevo-con-tag-uso:hover { opacity: 1; color: #28a745; }
.nuevo-con-tag--enuso .nuevo-con-tag-uso { color: #28a745; opacity: 1; }
.nuevo-con-tag-uso-icon { color: #28a745; margin-left: .25rem; }

/* Badges en lista de invitados del detalle */
.det-enuso-badge,
.det-soloinv-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 600;
    margin-left: auto;          /* empuja a la derecha cuando hay espacio */
    vertical-align: middle;
    white-space: nowrap;        /* nunca partir "trabajando" o "solo invitado" */
    flex-shrink: 0;
}
.det-enuso-badge {
    background: #eaf7ee;
    color: #1e7e34;
    border: 1px solid #b6e2c2;
}
.det-soloinv-badge {
    background: #f1f5f9;
    color: #6b7c93;
    border: 1px solid #dde6ee;
}
/* el icono dentro del badge no debe heredar el color azul de .det-list li i */
.det-enuso-badge i,
.det-soloinv-badge i { color: inherit !important; font-size: .72rem; }

/* Versión clicable (button): mismo look pero con feedback de hover */
button.det-enuso-badge,
button.det-soloinv-badge {
    cursor: pointer;
    transition: filter .12s, box-shadow .12s;
    font-family: inherit;
    line-height: 1.1;
}
button.det-enuso-badge:hover:not(:disabled),
button.det-soloinv-badge:hover:not(:disabled) {
    filter: brightness(.96);
    box-shadow: 0 0 0 2px rgba(0,0,0,.05);
}
button.det-enuso-badge:disabled,
button.det-soloinv-badge:disabled { cursor: wait; opacity: .7; }

/* Botones del footer del modal */
.btn-modal-cancel {
    background: #f1f5f9;
    color: #4a5568;
    border: 1.5px solid #d1d9e4;
    border-radius: 7px;
    padding: .45rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-modal-cancel:hover { background: #e2e8f0; }
.btn-modal-save {
    background: #00A0E3;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .45rem 1.3rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-modal-save:hover:not(:disabled) { background: #0088c2; }
.btn-modal-save:disabled { opacity: .65; cursor: default; }
.btn-modal-delete {
    background: #fff0f0;
    color: #dc3545;
    border: 1.5px solid #f5c6cb;
    border-radius: 7px;
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-modal-delete:hover { background: #dc3545; color: #fff; border-color: #dc3545; }

.nuevo-loading { color: #6b7c93; font-size: .83rem; padding: .4rem; }
.nuevo-empty   { color: #a0aec0; font-size: .82rem; padding: .4rem; font-style: italic; }

/* ── Tab Dedicación ──────────────────────────────────────────────────── */
.ded-filtros {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0 0 14px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 14px;
}
.ded-filtro-group { display: flex; flex-direction: column; gap: 4px; }
.ded-label { font-size: .78rem; font-weight: 600; color: #6b7c93; text-transform: uppercase; letter-spacing: .04em; }
.ded-select {
    height: 34px;
    min-width: 180px;
    padding: 0 10px;
    border: 1.5px solid #dde3ec;
    border-radius: 7px;
    font-size: .88rem;
    color: #2d3748;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.ded-select:focus { border-color: #00A0E3; }

/* =============================================
   GESTIÓN / FUERZA DE VENTAS — pedidos
   ============================================= */

.gt-bd-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    background: #f5f8fc;
    border: 1px solid #e2e8f2;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 6px solid var(--gt-color, #00A0E3);
}
.gt-bd-label { font-weight: 600; color: #4a5568; font-size: .85rem; white-space: nowrap; }
.gt-bd-select {
    flex: 1;
    max-width: 420px;
    padding: .35rem .55rem;
    border-radius: 6px;
    border: 1.5px solid #d1d9e4;
    background: #fff;
    font-size: .9rem;
}
.gt-bd-select:focus { border-color: #00A0E3; outline: none; }
.gt-bd-tipo {
    margin-left: auto;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7c93;
    background: #fff;
    padding: 2px 8px;
    border-radius: 9px;
    border: 1px solid #e2e8f2;
}

.gt-section { border: 1px solid #e2e8f2; border-radius: 8px; margin-bottom: .85rem; background: #fff; overflow: hidden; }
.gt-section-header {
    display: flex; align-items: center; gap: .35rem;
    padding: .65rem 1rem;
    background: #f7faff;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    user-select: none;
}
.gt-section-header.open { border-bottom-color: #e2e8f2; }
.gt-section-header.disabled { opacity: .55; cursor: not-allowed; background: #f1f5f9; }
.gt-section-title { font-weight: 600; color: #1a2f45; flex: 1; }
.gt-section-chevron { color: #9aadbe; transition: transform .2s; }
.gt-section-header.open .gt-section-chevron { transform: rotate(180deg); }
.gt-section-body { padding: 1rem; }
.gt-placeholder { color: #9aadbe; font-style: italic; padding: 1rem; background: #f9fbff; border-radius: 6px; border: 1px dashed #d6e0ee; }

.btn-gt-clear { background: transparent; border: none; color: #dc3545; padding: .15rem .45rem; cursor: pointer; }
.btn-gt-clear:hover { color: #b1192b; }

/* Filtros de cliente */
.gt-cliente-filtros { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.gt-cli-row { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.gt-cli-row .gt-input { flex: 1 1 220px; min-width: 0; }
.gt-cli-actions { justify-content: flex-end; gap: .65rem; margin-top: .35rem; }
.gt-input {
    padding: .5rem .75rem;
    border-radius: 6px;
    border: 1.5px solid #d1d9e4;
    background: #fff;
    font-size: .88rem;
}
.gt-input:focus { border-color: #00A0E3; outline: none; }

/* Paginador */
.gt-pag { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .55rem 0; }

/* Cards de cliente */
.gt-cli-resultados { display: flex; flex-direction: column; gap: .5rem; }
.gt-cli-card { border: 1px solid #e2e8f2; border-radius: 7px; padding: .65rem .85rem; background: #fff; transition: box-shadow .15s; }
.gt-cli-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.gt-cli-head { display: flex; align-items: center; gap: .5rem; }
.gt-cli-titulo { flex: 1; font-size: .94rem; color: #1a2f45; }
.gt-cli-titulo small { color: #6b7c93; font-weight: 400; }
.gt-cli-body { font-size: .8rem; color: #4a5568; margin-top: .35rem; line-height: 1.45; }
.btn-gt-sel {
    background: #00A0E3; color: #fff; border: none;
    padding: .35rem .85rem; border-radius: 6px;
    font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-gt-sel:hover { background: #0086c0; }

.gt-loading { padding: 1.5rem; text-align: center; color: #6b7c93; }
.gt-loading .spinner-border { width: 1rem; height: 1rem; margin-right: .5rem; }


/* GT — Cabecera del pedido */
.gt-crear-pedido { text-align: center; padding: 1.5rem 1rem; }
.gt-crear-pedido p { color: #4a5568; margin-bottom: 1rem; }

.btn-gt-primary,
a.btn-gt-primary,
a.btn-gt-primary:link,
a.btn-gt-primary:visited,
a.btn-gt-primary:hover,
a.btn-gt-primary:focus,
a.btn-gt-primary:active {
    background: #00A0E3;
    color: #fff !important;
    border: none;
    padding: .5rem 1.1rem;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}
.btn-gt-primary:hover,
a.btn-gt-primary:hover { background: #0086c0; }

.btn-gt-secondary,
a.btn-gt-secondary,
a.btn-gt-secondary:link,
a.btn-gt-secondary:visited,
a.btn-gt-secondary:hover,
a.btn-gt-secondary:focus,
a.btn-gt-secondary:active {
    background: #f1f5f9;
    color: #4a5568 !important;
    border: 1.5px solid #d1d9e4;
    padding: .45rem 1.1rem;
    border-radius: 6px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}
.btn-gt-secondary:hover,
a.btn-gt-secondary:hover { background: #e4ecf3; }
.btn-gt-danger {
    background: #fff; color: #dc3545; border: 1.5px solid #f1c4cb;
    padding: .45rem 1.1rem; border-radius: 6px;
    font-size: .88rem; font-weight: 600; cursor: pointer;
}
.btn-gt-danger:hover { background: #fde8e8; border-color: #dc3545; }

.gt-cab-totales {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    padding: .55rem .85rem; background: #f5f8fc;
    border-radius: 6px; margin-bottom: .85rem;
    font-size: .85rem;
}
.gt-total { color: #28a745; font-weight: 600; }

.gt-cab-form { display: flex; flex-direction: column; gap: .65rem; }
.gt-cab-row  { display: flex; gap: .65rem; flex-wrap: wrap; }
.gt-cab-row > .gt-cab-field { flex: 1 1 180px; min-width: 0; }
.gt-cab-field { display: flex; flex-direction: column; gap: .25rem; }
.gt-cab-field label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7c93; font-weight: 600;
}

.gt-cab-marketing { background: #fafcff; border: 1px solid #e2e8f2; border-radius: 6px; padding: .55rem .75rem; }
.gt-cab-marketing > summary { cursor: pointer; font-weight: 600; color: #00A0E3; }
.gt-cab-marketing[open] > summary { margin-bottom: .55rem; }
.gt-cab-checks { gap: 1.1rem; padding-top: .25rem; }
.gt-cab-checks label { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: #4a5568; cursor: pointer; }

.gt-cab-actions { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .55rem; }

/* Direcciones */
.gt-direcciones { display: flex; flex-direction: column; gap: .4rem; }
.gt-dir-card { border: 1px solid #e2e8f2; border-radius: 6px; padding: .55rem .75rem; background: #fff; }
.gt-dir-card--sel { border-color: #28a745; background: #f3fdf6; }
.gt-dir-head { display: flex; align-items: center; gap: .55rem; }
.gt-dir-titulo { flex: 1; font-size: .85rem; color: #1a2f45; }
.gt-dir-body { font-size: .78rem; color: #4a5568; margin-top: .25rem; line-height: 1.45; }
.gt-dir-tag {
    display: inline-block; padding: 1px 7px; border-radius: 9px;
    font-size: .68rem; font-weight: 600; margin-right: .35rem; vertical-align: middle;
}
.gt-dir-tag--in  { background: #eaf7ee; color: #1e7e34; border: 1px solid #b6e2c2; }
.gt-dir-tag--def { background: #fff4e0; color: #8a4d00; border: 1px solid #f4cf95; }


.gt-cliente-bloqueado {
    color: #b06b00;
    background: #fff4e0;
    border: 1px solid #f4cf95;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
}


/* GT — Líneas del pedido */
.gt-lineas-toolbar { display: flex; gap: .55rem; align-items: center; margin-bottom: .85rem; flex-wrap: wrap; }
.gt-lineas-toolbar #gtFiltroLinea { flex: 1 1 240px; min-width: 0; }

.gt-lineas-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: .35rem;
}
.gt-lineas-tabla thead th {
    background: #f4f7fb; color: #64748b; padding: .5rem .6rem;
    font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .3px;
    text-align: left; border-bottom: 1px solid #e6ebf1;
}
.gt-lineas-tabla thead th.text-center { text-align: center; }
.gt-lineas-tabla thead th.text-right  { text-align: right; }
.gt-lineas-tabla tbody td {
    padding: .4rem .55rem;
    border-bottom: 1px solid #e8eef6;
    vertical-align: middle;
}
.gt-lineas-tabla tbody tr:hover { background: #f7faff; }
.gt-lineas-tabla td.text-center { text-align: center; }
.gt-lineas-tabla td.text-right  { text-align: right; }
.gt-lineas-tabla tfoot td {
    padding: .55rem .55rem;
    background: #f5f8fc;
    color: #1a2f45;
    font-size: .9rem;
    border-top: 2px solid #d6e0ee;
}

.gt-lineas-tabla input[type="number"],
.gt-lineas-tabla input[type="text"] {
    width: 100%;
    padding: .25rem .4rem;
    border: 1px solid #d1d9e4;
    border-radius: 4px;
    font-size: .85rem;
    text-align: right;
    -moz-appearance: textfield;
}
.gt-lineas-tabla input[type="number"]::-webkit-outer-spin-button,
.gt-lineas-tabla input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.gt-lineas-tabla input[type="number"]:focus,
.gt-lineas-tabla input[type="text"]:focus { border-color: #00A0E3; outline: none; }
.gt-lineas-tabla input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }
.gt-lineas-tabla .btn-tbl-danger { padding: .25rem .5rem; }
/* Tema oscuro para la tabla de líneas / detalle de pedido */
html[data-theme="dark"] .gt-lineas-tabla thead th { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .gt-lineas-tabla tbody td { border-color: var(--border); }
html[data-theme="dark"] .gt-lineas-tabla tbody tr:hover { background: var(--bg-card-2); }
html[data-theme="dark"] .gt-lineas-tabla tfoot td { background: var(--bg-card-2); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .gt-lineas-tabla input[type="number"],
html[data-theme="dark"] .gt-lineas-tabla input[type="text"] { background: var(--bg-input); border-color: var(--border-2); color: var(--text); }

/* Panel de búsqueda de artículos */
.gt-articulos-panel {
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: #f5f8fc;
    border: 1px solid #d6e0ee;
    border-radius: 8px;
}
.gt-articulos-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .75rem;
    color: #1a2f45;
}
.gt-art-card {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .65rem;
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 6px;
    margin-bottom: .35rem;
}
.gt-art-info { flex: 1; min-width: 0; }
.gt-art-info > div { font-size: .85rem; color: #1a2f45; }


.gt-lin-totstock { color: #6b7c93; font-weight: 500; font-size: .78rem; }


/* GT — Badges consulta de artículos */
.gt-art-badge {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.gt-art-badge--pvp   { background: #e6f4ff; color: #00578a; border-color: #b3dffa; }
.gt-art-badge--pva   { background: #e6f4ff; color: #00578a; border-color: #b3dffa; }
.gt-art-badge--pvc   { background: #fff0e6; color: #a04a00; border-color: #fad2b3; }
.gt-art-badge--stock { background: #eaf7ec; color: #1f6d2a; border-color: #b9e2c0; }


/* ============================================================
   FUERZA DE VENTAS — DASHBOARD (Informes + Gráficos)
   ============================================================ */

/* Tabs principales (Dashboard FV + Dashboard CRM) */
.gt-dash-tabs, .crm-dash-tabs { gap: .4rem; }
.gt-dash-tabs .nav-link, .crm-dash-tabs .nav-link {
    color: #6b7c93;
    background: #f4f7fb;
    border: 1px solid #e2e8f2;
    padding: .55rem 1.1rem;
    border-radius: 6px;
    font-weight: 500;
}
.gt-dash-tabs .nav-link.active, .crm-dash-tabs .nav-link.active {
    background: #00A0E3;
    color: #fff;
    border-color: #00A0E3;
}
.gt-dash-tabs .nav-link:hover:not(.active),
.crm-dash-tabs .nav-link:hover:not(.active) {
    background: #e8f4fb;
    color: #00A0E3;
    text-decoration: none;
}

/* Sub-tabs (informes) */
.gt-inf-subtabs { border-bottom: 1px solid #e2e8f2; margin-bottom: .85rem; }
.gt-inf-subtabs .nav-link {
    color: #6b7c93;
    border: 1px solid transparent;
    padding: .5rem .9rem;
    font-size: .88rem;
}
.gt-inf-subtabs .nav-link.active {
    color: #00A0E3;
    border-color: #e2e8f2 #e2e8f2 #fff;
    background: #fff;
    font-weight: 600;
}
.gt-inf-subcontent { padding: .25rem 0; }

.gt-input-label {
    display: inline-flex;
    flex-direction: column;
    font-size: .76rem;
    color: #6b7c93;
    gap: .15rem;
    flex: 0 0 auto;
}
.gt-input-label input[type="checkbox"] { margin-right: .35rem; }

/* Dentro del dashboard: compactar la fila de filtros — anular el flex-grow
   que aplica `.gt-cli-row .gt-input` (220px) que provocaba inputs gigantes
   al interpretarse como altura dentro del label inline-flex column. */
.gt-inf-subcontent .gt-cli-row {
    align-items: flex-end;
    gap: .85rem;
}
.gt-inf-subcontent .gt-input-label .gt-input {
    flex: 0 0 auto;
    width: 170px;
    min-width: 0;
}
.gt-inf-subcontent .gt-cli-row > .gt-input {
    flex: 0 0 auto;
    width: 170px;
}
.gt-inf-subcontent .gt-cli-row .btn-filter,
.gt-inf-subcontent .gt-cli-row .btn-filter-clear {
    flex: 0 0 auto;
    align-self: flex-end;
    height: 38px;
}

.gt-inf-extra {
    color: #00A0E3;
    font-weight: 600;
    font-size: .88rem;
    padding: .35rem .5rem;
}

.gt-inf-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.gt-inf-pag {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.gt-inf-pag-info {
    color: #00A0E3;
    font-weight: 600;
    font-size: .82rem;
}

.gt-inf-tabla-wrap { margin-top: .85rem; }
.gt-inf-tabla-scroll {
    overflow-x: auto;
    border: 1px solid #e2e8f2;
    border-radius: 6px;
    background: #fff;
}
.gt-inf-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.gt-inf-tabla thead th {
    background: #f4f7fb;
    color: #1a2f45;
    padding: .55rem .65rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f2;
    position: sticky;
    top: 0;
    white-space: nowrap;
    font-weight: 600;
}
.gt-inf-tabla tbody td {
    padding: .45rem .65rem;
    border-bottom: 1px solid #f0f4fa;
    color: #1a2f45;
    white-space: nowrap;
}
.gt-inf-tabla tbody tr:hover { background: #f9fbff; }
.gt-inf-tabla tr.gt-inf-totales td {
    background: #eef7fd;
    font-weight: 600;
    color: #00578a;
    border-bottom: 2px solid #b3dffa;
}

/* ===== Badge Tipo de empresa (Cliente / Potencial) ===== */
.tipo-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.cf-tipo-wrap { margin-top: 4px; }
.tipo-badge--cliente   { background: #e6f7ec; color: #12734a; border: 1px solid #b6e4c9; }
.tipo-badge--potencial { background: #fff4e0; color: #a86400; border: 1px solid #ffd98a; }
.tipo-badge--none      { background: #eef1f5; color: #6b7c93; border: 1px solid #d7dee6; }
html[data-theme="dark"] .tipo-badge--cliente   { background: rgba(22,163,74,.18); color: #7ee2a8; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .tipo-badge--potencial { background: rgba(224,168,0,.18); color: #ffd98a; border-color: rgba(224,168,0,.4); }
html[data-theme="dark"] .tipo-badge--none      { background: rgba(255,255,255,.06); color: #9fb0c3; border-color: rgba(255,255,255,.12); }

/* Badge de PROVEEDOR (en base de datos: empresa interna).
   Neutro a propósito: acompaña al de tipo de empresa sin competir con él. */
.prov-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: #eef4ff;
    color: #3b5bdb;
    border: 1px solid #c7d7fb;
}
.prov-badge i { margin-right: 4px; font-size: 10px; }
html[data-theme="dark"] .prov-badge { background: rgba(59,91,219,.18); color: #a9bcff; border-color: rgba(59,91,219,.45); }

/* Gráficos */
.gt-graf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem;
}
.gt-graf-card {
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 8px;
    padding: .8rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    display: flex;
    flex-direction: column;
}
.gt-graf-head {
    display: flex;
    align-items: center;
    color: #1a2f45;
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .65rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid #f0f4fa;
}
.gt-graf-canvas {
    position: relative;
    min-height: 260px;
    height: 280px;
}
.gt-graf-canvas canvas { max-height: 280px; }

/* ============================================================
   PÁGINA BIENVENIDA — Sección Fuerza de Ventas
   ============================================================ */
.hw-fv-section { margin-top: 1.5rem; }
.hw-fv-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem .25rem .55rem;
    color: #1a2f45;
    font-weight: 600;
    font-size: .98rem;
    border-bottom: 1px solid #e2e8f2;
    margin-bottom: .8rem;
}
.hw-fv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: .85rem;
}
.hw-fv-card {
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 8px;
    padding: .7rem .9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.hw-fv-card-title {
    color: #6b7c93;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .45rem;
}
.hw-fv-canvas {
    position: relative;
    height: 200px;
}
.hw-fv-canvas canvas { max-height: 200px; }

/* Banner informativo */
.alert-banner.alert-banner-info {
    background: #eef7fd;
    color: #00578a;
    border: 1px solid #b3dffa;
    padding: .55rem .85rem;
    border-radius: 6px;
    margin: .55rem 0;
    font-size: .88rem;
}

/* Empresa dada de baja: etiqueta + fila apagada. Las dos cosas, porque solo el
   color deja fuera a quien no lo distingue y solo la etiqueta se pierde entre las
   demas que ya lleva la fila. */
.emp-inactiva-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    background: #f1f5f9; color: #64748b;
    border: 1px solid #cbd5e1; border-radius: 999px;
    padding: .05rem .45rem; margin-left: .4rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    vertical-align: middle; white-space: nowrap;
}
.emp-row-inactiva { opacity: .55; }
.emp-row-inactiva:hover { opacity: .8; }
/* El nombre tachado deja claro que la ficha ya no cuenta, sin esconder el dato. */
.emp-row-inactiva .ct-name-text > strong,
.emp-row-inactiva .ct-card-name > strong { text-decoration: line-through; }

/* Banner de resultado correcto (prueba de conexion con el proveedor de IA, etc.) */
.alert-banner.alert-banner-ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: .55rem .85rem;
    border-radius: 6px;
    margin: .55rem 0;
    font-size: .88rem;
}


/* GT — overlay de operaciones largas */
.gt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,47,69,0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.gt-overlay-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    min-width: 260px;
    max-width: 90vw;
    text-align: center;
}
.gt-overlay-card .spinner-border {
    width: 2.5rem; height: 2.5rem;
    color: #00A0E3;
    border-width: .3rem;
}
.gt-overlay-text {
    color: #1a2f45;
    font-size: .95rem;
    font-weight: 600;
}


/* GT — toolbar global y botón conversión */
.gt-toolbar {
    display: flex; gap: .55rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.gt-toolbar .btn-gt-primary,
.gt-toolbar .btn-gt-secondary { display: inline-flex; align-items: center; text-decoration: none; }

.btn-gt-convert {
    background: #fff; color: #00A0E3; border: 1.5px solid #b8def4;
    padding: .45rem 1rem; border-radius: 6px;
    font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-gt-convert:hover { background: #00A0E3; color: #fff; }


.gt-cliente-info-bar {
    display: flex; align-items: center; gap: .25rem;
    padding: .6rem .9rem;
    background: #f7faff;
    border: 1px solid #d6e0ee;
    border-radius: 8px;
    margin-bottom: .85rem;
    font-size: .9rem;
    color: #1a2f45;
}
.gt-cliente-info-bar i.bi-person-vcard { color: #00A0E3; }
.gt-cliente-info-bar .ms-auto { margin-left: auto !important; }


/* GT — PedidosPC detalle read-only */
.gt-pc-det-cab {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f2;
    background: #f7faff;
}
.gt-pc-det-h {
    padding: .65rem 1rem .35rem;
    color: #1a2f45;
    font-weight: 600;
    font-size: .95rem;
    margin: 0;
}
.gt-pc-ro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem 1.5rem;
}
.gt-pc-ro-item { display: flex; flex-direction: column; gap: 3px; }
.gt-pc-ro-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aadbe;
    font-weight: 600;
}
.gt-pc-ro-value { color: #1a2f45; font-size: .9rem; }
.gt-pc-ro-nota,
.gt-pc-ro-dir {
    margin-top: .85rem;
    padding: .65rem .85rem;
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 6px;
    font-size: .85rem;
    color: #1a2f45;
}


/* GT — Consulta de Clientes */
.gt-cl-card {
    border: 1px solid #e2e8f2;
    border-radius: 8px;
    background: #fff;
    margin-bottom: .5rem;
    transition: box-shadow .15s;
}
.gt-cl-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.gt-cl-card > summary {
    list-style: none;
    cursor: pointer;
    padding: .7rem .9rem;
}
.gt-cl-card > summary::-webkit-details-marker { display: none; }
.gt-cl-card > summary::before {
    content: "▸";
    color: #00A0E3;
    margin-right: .55rem;
    display: inline-block;
    transition: transform .15s;
}
.gt-cl-card[open] > summary::before { transform: rotate(90deg); }

.gt-cl-card-head {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55rem 1rem;
    width: calc(100% - 1.5rem);
    vertical-align: top;
}
.gt-cl-card-titulo { flex: 1 1 240px; min-width: 0; color: #1a2f45; font-size: .92rem; }
.gt-cl-card-meta { font-size: .82rem; color: #4a5568; }
.gt-cl-card-counts { display: flex; gap: .35rem; flex-wrap: wrap; }

.gt-cl-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 600;
    border: 1px solid;
}
.gt-cl-badge--pw { background: #fff4e0; color: #b06b00; border-color: #f4cf95; }
.gt-cl-badge--pc { background: #eaf7ee; color: #1e7e34; border-color: #b6e2c2; }
.gt-cl-badge--op { background: #e8f4fd; color: #0086c0; border-color: #b8def4; }
.gt-cl-badge--pm { background: #f3eef9; color: #5a2da0; border-color: #d5c4ed; }

.gt-cl-card-body {
    border-top: 1px solid #e2e8f2;
    padding: .7rem .9rem .85rem;
    background: #fafcff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .4rem 1.5rem;
    font-size: .85rem;
    color: #1a2f45;
}
.gt-cl-dato { line-height: 1.45; }
.gt-cl-dato-label {
    color: #9aadbe;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .04em;
    margin-right: .35rem;
}

/* ============================================================
   DROPDOWN DEL USUARIO EN LA TOPBAR (selector de tema, etc.)
   ============================================================ */
.topbar-user-dropdown { display: inline-block; }
.topbar-user-btn {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    padding: .25rem .55rem;
    border-radius: 6px;
    font: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
}
.topbar-user-btn:hover { background: rgba(0,0,0,.04); }
.topbar-user-menu {
    min-width: 220px;
    padding: .25rem 0;
}
.topbar-user-menu .dropdown-header {
    color: #6b7c93;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem .85rem .25rem;
}
.topbar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: .45rem .85rem;
    color: #1a2f45;
    font-size: .88rem;
}
.topbar-user-menu .dropdown-item:hover { background: #f4f7fb; }
.topbar-user-menu .dropdown-item.active {
    background: #e8f4fd;
    color: #00578a;
    font-weight: 600;
}
.topbar-user-menu .topbar-user-logout { color: #b02a37; }
.topbar-user-menu .topbar-user-logout:hover { background: #fde8e8; color: #b02a37; }
html[data-theme="dark"] .topbar-user-menu .topbar-user-logout { color: #ff8a96; }
html[data-theme="dark"] .topbar-user-menu .topbar-user-logout:hover { background: rgba(220,53,69,.18); color: #ff8a96; }

/* ============================================================
   TEMA "CLARO" (neutro — sidebar claro + acentos gris-azulados)
   El sidebar pasa de oscuro corporativo a fondo claro.
   ============================================================ */
html[data-theme="light"] {
    --tm-acento:        #4a5d7a;
    --tm-acento-suave:  #eef2f7;
    --tm-acento-soft:   #5a6c84;
    --tm-side-bg:       #f8fafc;
    --tm-side-border:   #e2e8f0;
    --tm-side-hover:    #eef2f7;
    --tm-side-active:   #e2e8f0;
    --tm-side-text:     #1a2f45;
    --tm-side-muted:    #6b7c93;
}

/* Sidebar claro */
html[data-theme="light"] .app-sidebar { background: var(--tm-side-bg); border-right: 1px solid var(--tm-side-border); }
html[data-theme="light"] .sidebar-header { border-bottom-color: var(--tm-side-border); }
html[data-theme="light"] .sidebar-logo, html[data-theme="light"] .sidebar-logo-text { color: var(--tm-side-text); }
html[data-theme="light"] .sidebar-logo-text .ver { color: var(--tm-side-muted); }
html[data-theme="light"] .sidebar-logo-icon { background: var(--tm-acento); color: #fff; }
html[data-theme="light"] .sidebar-user { border-bottom-color: var(--tm-side-border); background: rgba(0,0,0,.02); }
html[data-theme="light"] .sidebar-user-avatar { background: var(--tm-acento); color: #fff; }
html[data-theme="light"] .sidebar-user-name { color: var(--tm-side-text); }
html[data-theme="light"] .sidebar-user-role { color: var(--tm-side-muted); }
html[data-theme="light"] .nav-divider { border-top-color: var(--tm-side-border); }
html[data-theme="light"] .nav-section-header { color: var(--tm-side-muted); }
html[data-theme="light"] .nav-section-header:hover { background: var(--tm-side-hover); color: var(--tm-side-text); }
html[data-theme="light"] .section-title { color: var(--tm-side-muted); }
html[data-theme="light"] .section-icon { color: var(--tm-side-muted); background: transparent; }
html[data-theme="light"] .nav-section-header:hover .section-icon,
html[data-theme="light"] .nav-section-header:hover .section-title { color: var(--tm-acento); }
html[data-theme="light"] .nav-item { color: var(--tm-side-muted); }
html[data-theme="light"] .nav-item:hover { background: var(--tm-side-hover); color: var(--tm-acento); }
html[data-theme="light"] .nav-item.active { background: var(--tm-side-active); color: var(--tm-acento); border-left-color: var(--tm-acento); }
html[data-theme="light"] .nav-item .item-icon { color: inherit; }
html[data-theme="light"] .sidebar-footer { background: var(--tm-side-bg); border-top-color: var(--tm-side-border); }
html[data-theme="light"] .btn-change-pw, html[data-theme="light"] .btn-logout {
    background: #fff; color: var(--tm-side-muted); border-color: var(--tm-side-border);
}
html[data-theme="light"] .btn-change-pw:hover, html[data-theme="light"] .btn-logout:hover {
    background: var(--tm-side-hover); color: var(--tm-acento); border-color: var(--tm-acento);
}
html[data-theme="light"] .chevron { color: var(--tm-side-muted); }
html[data-theme="light"] .sidebar-logo-icon,
html[data-theme="light"] .nav-section-header.collapsed:hover,
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .sidebar-user-role,
html[data-theme="light"] .crm-page-title i,
html[data-theme="light"] .admin-section-title i {
    color: var(--tm-acento, #4a5d7a);
}
html[data-theme="light"] .nav-item.active {
    background: var(--tm-acento-suave, #eef2f7);
    border-left-color: var(--tm-acento, #4a5d7a);
}
html[data-theme="light"] .sidebar-logo-icon {
    background: var(--tm-acento, #4a5d7a);
    color: #fff;
}
html[data-theme="light"] .hw-greet,
html[data-theme="light"] .topbar-campana:hover,
html[data-theme="light"] .topbar-user-menu .dropdown-item.active {
    color: var(--tm-acento, #4a5d7a);
}
html[data-theme="light"] .btn-filter,
html[data-theme="light"] .btn-gt-primary,
html[data-theme="light"] .dash-period-btn.active,
html[data-theme="light"] .crm-dash-tabs .nav-link.active,
html[data-theme="light"] .gt-dash-tabs .nav-link.active {
    background: var(--tm-acento, #4a5d7a);
    border-color: var(--tm-acento, #4a5d7a);
    color: #fff;
}
html[data-theme="light"] .btn-filter:hover,
html[data-theme="light"] .btn-gt-primary:hover {
    background: #3a4d68;
    border-color: #3a4d68;
}
html[data-theme="light"] .btn-page-active,
html[data-theme="light"] .dash-pager-btn.active {
    background: var(--tm-acento, #4a5d7a);
    border-color: var(--tm-acento, #4a5d7a);
    color: #fff;
}
html[data-theme="light"] .gt-input:focus,
html[data-theme="light"] .form-control:focus {
    border-color: var(--tm-acento, #4a5d7a);
    box-shadow: 0 0 0 .15rem rgba(74,93,122,.18);
}
html[data-theme="light"] .gt-bd-bar { border-left-color: var(--tm-acento, #4a5d7a); }
html[data-theme="light"] .dash-section-title i,
html[data-theme="light"] .dash-kpi-icon.blue { color: var(--tm-acento, #4a5d7a); }
html[data-theme="light"] .dash-kpi-icon.blue { background: var(--tm-acento-suave, #eef2f7); }
html[data-theme="light"] a.hw-link,
html[data-theme="light"] .hw-ver-todo,
html[data-theme="light"] .topbar-campana {
    color: var(--tm-acento, #4a5d7a);
}
html[data-theme="light"] .topbar-user-menu .dropdown-item.active {
    background: var(--tm-acento-suave, #eef2f7);
}
html[data-theme="light"] .badge-estado { /* mantiene */ }
html[data-theme="light"] .dash-pager-info,
html[data-theme="light"] .gt-inf-pag-info { color: var(--tm-acento, #4a5d7a); }
html[data-theme="light"] .det-enuso-badge { background: #e4ebf2; color: #3a4d68; border-color: #c8d3e0; }

/* ============================================================
   TEMA "OSCURO"
   ============================================================ */
html[data-theme="dark"] {
    --bg-body:    #1a1f2b;
    --bg-card:    #232b3a;
    --bg-card-2:  #2a3344;
    --bg-sidebar: #11151c;
    --bg-topbar:  #1f2532;
    --bg-input:   #2a3344;
    --bg-hover:   #2f3a4f;
    --border:     #2f3a4f;
    --border-2:   #3a4659;
    --text:       #e7ebf2;
    --text-muted: #94a3b8;
    --text-dim:   #6b7c93;
    --acento:     #4ec3f0;     /* azul un poco más claro para mejor contraste sobre oscuro */
    --acento-bg:  #1d3a52;
    background: var(--bg-body);
    color: var(--text);
}
html[data-theme="dark"] body { background: var(--bg-body); color: var(--text); }
html[data-theme="dark"] .app-wrapper { background: var(--bg-body); }
html[data-theme="dark"] .app-main    { background: var(--bg-body); color: var(--text); }

/* Sidebar */
html[data-theme="dark"] .app-sidebar { background: var(--bg-sidebar); border-color: var(--border); }
html[data-theme="dark"] .sidebar-header { border-bottom-color: var(--border); }
html[data-theme="dark"] .sidebar-logo, html[data-theme="dark"] .sidebar-logo-text { color: var(--text); }
html[data-theme="dark"] .sidebar-logo-text .ver { color: var(--text-muted); }
html[data-theme="dark"] .sidebar-user { border-bottom-color: var(--border); background: rgba(255,255,255,.02); }
html[data-theme="dark"] .sidebar-user-name { color: var(--text); }
html[data-theme="dark"] .sidebar-user-role { color: var(--text-muted); }
html[data-theme="dark"] .nav-divider { border-top-color: var(--border); }
html[data-theme="dark"] .nav-section-header { color: var(--text-muted); }
html[data-theme="dark"] .nav-section-header:hover { background: var(--bg-hover); }
html[data-theme="dark"] .section-title, html[data-theme="dark"] .section-icon { color: var(--text-muted); }
html[data-theme="dark"] .nav-item { color: var(--text-muted); }
html[data-theme="dark"] .nav-item:hover { background: var(--bg-hover); color: var(--acento); }
html[data-theme="dark"] .nav-item.active { background: var(--acento-bg); color: var(--acento); border-left-color: var(--acento); }
html[data-theme="dark"] .nav-item .item-icon { color: inherit; }
html[data-theme="dark"] .sidebar-footer { background: var(--bg-sidebar); border-top-color: var(--border); }
html[data-theme="dark"] .btn-change-pw, html[data-theme="dark"] .btn-logout {
    background: var(--bg-card); color: var(--text-muted); border-color: var(--border);
}
html[data-theme="dark"] .btn-change-pw:hover, html[data-theme="dark"] .btn-logout:hover {
    background: var(--bg-hover); color: var(--text); border-color: var(--border-2);
}

/* Topbar */
html[data-theme="dark"] .app-topbar { background: var(--bg-topbar); border-bottom-color: var(--border); color: var(--text); }
html[data-theme="dark"] .topbar-title, html[data-theme="dark"] .topbar-breadcrumb { color: var(--text); }
html[data-theme="dark"] .btn-sidebar-toggle { color: var(--text-muted); }
html[data-theme="dark"] .btn-sidebar-toggle:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .topbar-campana { color: var(--text-muted); }
html[data-theme="dark"] .topbar-campana:hover { color: var(--acento); }

/* Dropdown del usuario */
html[data-theme="dark"] .topbar-user-btn:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .topbar-user-menu { background: var(--bg-card); border: 1px solid var(--border); }
html[data-theme="dark"] .topbar-user-menu .dropdown-header { color: var(--text-muted); }
html[data-theme="dark"] .topbar-user-menu .dropdown-item { color: var(--text); }
html[data-theme="dark"] .topbar-user-menu .dropdown-item:hover { background: var(--bg-hover); color: var(--acento); }
html[data-theme="dark"] .topbar-user-menu .dropdown-item.active { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .topbar-user-menu .dropdown-divider { border-color: var(--border); }

/* Tablas */
html[data-theme="dark"] .dash-table, html[data-theme="dark"] .gt-inf-tabla, html[data-theme="dark"] .det-table { color: var(--text); }
html[data-theme="dark"] .dash-table thead th, html[data-theme="dark"] .gt-inf-tabla thead th, html[data-theme="dark"] .det-table thead th {
    background: var(--bg-card-2); color: var(--text); border-bottom-color: var(--border-2);
}
html[data-theme="dark"] .dash-table tbody td, html[data-theme="dark"] .gt-inf-tabla tbody td, html[data-theme="dark"] .det-table tbody td {
    border-bottom-color: var(--border); color: var(--text);
}
html[data-theme="dark"] .dash-table tbody tr:hover, html[data-theme="dark"] .gt-inf-tabla tbody tr:hover { background: var(--bg-hover); }
html[data-theme="dark"] .gt-inf-tabla tr.gt-inf-totales td { background: var(--acento-bg); color: var(--acento); border-bottom-color: var(--acento); }
html[data-theme="dark"] .dash-row-clickable:hover { background: var(--bg-hover); }
html[data-theme="dark"] .gt-inf-tabla-scroll, html[data-theme="dark"] .dash-section-body { background: transparent; }

/* Secciones / cards */
html[data-theme="dark"] .dash-section, html[data-theme="dark"] .dash-section-full,
html[data-theme="dark"] .hw-bottom-section, html[data-theme="dark"] .hw-week-card,
html[data-theme="dark"] .gt-section, html[data-theme="dark"] .gt-cli-card,
html[data-theme="dark"] .gt-cl-card, html[data-theme="dark"] .gt-pc-det-cab,
html[data-theme="dark"] .gt-pc-ro-grid, html[data-theme="dark"] .gt-pc-ro-item,
html[data-theme="dark"] .gt-graf-card, html[data-theme="dark"] .hw-fv-card,
html[data-theme="dark"] .dash-kpi, html[data-theme="dark"] .home-card {
    background: var(--bg-card); border-color: var(--border); color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
html[data-theme="dark"] .dash-section-header, html[data-theme="dark"] .gt-section-header,
html[data-theme="dark"] .gt-pc-det-cab .gt-pc-det-cab-title {
    color: var(--text); border-bottom-color: var(--border);
}
html[data-theme="dark"] .dash-section-title, html[data-theme="dark"] .gt-section-title,
html[data-theme="dark"] .crm-page-title { color: var(--text); }
html[data-theme="dark"] .dash-section-title i, html[data-theme="dark"] .crm-page-title i { color: var(--acento); }
html[data-theme="dark"] .dash-section-badge, html[data-theme="dark"] .gt-section-header .badge-estado { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .dash-kpi-val { color: var(--text); }
html[data-theme="dark"] .dash-kpi-lab { color: var(--text-muted); }
html[data-theme="dark"] .dash-no-data { background: rgba(255,255,255,.03); border-color: var(--border); color: var(--text-muted); }

/* Bienvenida (hw-*) */
html[data-theme="dark"] .hw-header { color: var(--text); }
html[data-theme="dark"] .hw-greet { color: var(--text); }
html[data-theme="dark"] .hw-date { color: var(--text-muted); }
html[data-theme="dark"] .hw-link { background: var(--bg-card); color: var(--acento); border-color: var(--border-2); }
html[data-theme="dark"] .hw-link:hover { background: var(--acento-bg); border-color: var(--acento); }
html[data-theme="dark"] .hw-week-head { border-bottom-color: var(--border); }
html[data-theme="dark"] .hw-week-badge--current { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .hw-week-badge--prev    { background: var(--bg-hover); color: var(--text-muted); }
html[data-theme="dark"] .hw-week-range { color: var(--text-muted); }
html[data-theme="dark"] .hw-wkpi { background: var(--bg-card-2); }
html[data-theme="dark"] .hw-wkpi-val { color: var(--text); }
html[data-theme="dark"] .hw-wkpi-label { color: var(--text-muted); }
html[data-theme="dark"] .hw-wkpi-click:hover { background: var(--bg-hover); }
html[data-theme="dark"] .hw-kpi-card { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .hw-kpi-value { color: var(--text); }
html[data-theme="dark"] .hw-kpi-label { color: var(--text); }
html[data-theme="dark"] .hw-kpi-desc { color: var(--text-muted); }
html[data-theme="dark"] .hw-kpi-badge--up   { background: rgba(22,163,74,.18); color: #5fd08a; }
html[data-theme="dark"] .hw-kpi-badge--down { background: rgba(220,38,38,.18); color: #f08a8a; }
html[data-theme="dark"] .hw-kpi-badge--flat { background: var(--bg-hover); color: var(--text-muted); }
html[data-theme="dark"] .hw-bottom-head { color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .hw-ver-todo { color: var(--acento); }
html[data-theme="dark"] .hw-act-item { border-bottom-color: var(--border); color: var(--text); }
html[data-theme="dark"] .hw-act-fecha { color: var(--text-muted); }
html[data-theme="dark"] .hw-act-tipo { color: var(--text-muted); }
html[data-theme="dark"] .hw-empty { color: var(--text-muted); }

/* Navegación de semanas */
html[data-theme="dark"] .hw-weeks-nav-btn { background: var(--bg-card); color: var(--acento); border-color: var(--border-2); }
html[data-theme="dark"] .hw-weeks-nav-btn:hover:not(:disabled) { background: var(--acento-bg); border-color: var(--acento); }
html[data-theme="dark"] .hw-weeks-nav-btn:disabled { background: var(--bg-sidebar); color: var(--text-dim); border-color: var(--border); }
html[data-theme="dark"] .hw-weeks-nav-label { color: var(--text); }
html[data-theme="dark"] .hw-weeks-nav-hoy { background: var(--bg-card); color: var(--acento); border-color: var(--acento); }
html[data-theme="dark"] .hw-weeks-nav-hoy:hover { background: var(--acento); color: var(--bg-sidebar); }

/* Inputs y selects */
html[data-theme="dark"] .gt-input, html[data-theme="dark"] .form-control,
html[data-theme="dark"] .gt-bd-select, html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .dash-search-input {
    background: var(--bg-input); color: var(--text); border-color: var(--border-2);
}
html[data-theme="dark"] .gt-input::placeholder, html[data-theme="dark"] .dash-search-input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .gt-input:focus, html[data-theme="dark"] .form-control:focus { border-color: var(--acento); box-shadow: 0 0 0 .15rem rgba(78,195,240,.18); }
html[data-theme="dark"] .dash-search-bar { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .dash-search-bar i { color: var(--text-muted); }

/* Botones */
html[data-theme="dark"] .btn-filter, html[data-theme="dark"] .btn-gt-primary { background: var(--acento); border-color: var(--acento); color: var(--bg-sidebar); }
html[data-theme="dark"] .btn-filter:hover, html[data-theme="dark"] .btn-gt-primary:hover { background: #6cd0f5; border-color: #6cd0f5; }
html[data-theme="dark"] .btn-filter-clear { background: var(--bg-card); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .btn-filter-clear:hover { background: var(--bg-hover); }
html[data-theme="dark"] .btn-page, html[data-theme="dark"] .dash-pager-btn { background: var(--bg-card); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .btn-page:hover, html[data-theme="dark"] .dash-pager-btn:hover { background: var(--acento-bg); border-color: var(--acento); color: var(--acento); }
html[data-theme="dark"] .btn-page-active, html[data-theme="dark"] .dash-pager-btn.active { background: var(--acento); border-color: var(--acento); color: var(--bg-sidebar); }
html[data-theme="dark"] .dash-period-btn { background: var(--bg-card); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .dash-period-btn.active { background: var(--acento); color: var(--bg-sidebar); border-color: var(--acento); }
html[data-theme="dark"] .dash-period-apply { background: var(--acento); color: var(--bg-sidebar); }

/* Tabs (CRM y Dashboard FV) */
html[data-theme="dark"] .crm-dash-tabs .nav-link, html[data-theme="dark"] .gt-dash-tabs .nav-link {
    background: var(--bg-card); color: var(--text-muted); border-color: var(--border-2);
}
html[data-theme="dark"] .crm-dash-tabs .nav-link.active, html[data-theme="dark"] .gt-dash-tabs .nav-link.active {
    background: var(--acento); color: var(--bg-sidebar); border-color: var(--acento);
}
html[data-theme="dark"] .crm-dash-tabs .nav-link:hover:not(.active),
html[data-theme="dark"] .gt-dash-tabs .nav-link:hover:not(.active) { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .gt-inf-subtabs .nav-link.active { background: var(--bg-card); color: var(--acento); border-color: var(--border-2) var(--border-2) var(--bg-card); }
html[data-theme="dark"] .gt-inf-subtabs { border-bottom-color: var(--border); }

/* Bd bar */
html[data-theme="dark"] .gt-bd-bar { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .gt-bd-label { color: var(--text-muted); }
html[data-theme="dark"] .gt-bd-tipo { background: var(--bg-card-2); color: var(--text-muted); }

/* Badges varios */
html[data-theme="dark"] .badge-estado { filter: brightness(1.1); }
html[data-theme="dark"] .det-enuso-badge { background: #1d3a52; color: #4ec3f0; border-color: #1d3a52; }
html[data-theme="dark"] .det-soloinv-badge { background: #2a3344; color: var(--text-muted); border-color: var(--border-2); }
html[data-theme="dark"] .gt-cl-badge--pw { background: rgba(176,107,0,.18); color: #f4cf95; border-color: rgba(176,107,0,.4); }
html[data-theme="dark"] .gt-cl-badge--pc { background: rgba(31,109,42,.18); color: #b9e2c0; border-color: rgba(31,109,42,.4); }
html[data-theme="dark"] .gt-cl-badge--op { background: rgba(0,87,138,.22); color: #b3dffa; border-color: rgba(0,87,138,.4); }
html[data-theme="dark"] .gt-cl-badge--pm { background: rgba(160,74,0,.22); color: #fad2b3; border-color: rgba(160,74,0,.4); }
html[data-theme="dark"] .gt-art-badge--pvp, html[data-theme="dark"] .gt-art-badge--pva { background: var(--acento-bg); color: var(--acento); border-color: var(--acento); }
html[data-theme="dark"] .gt-art-badge--pvc { background: rgba(160,74,0,.22); color: #fad2b3; border-color: rgba(160,74,0,.4); }
html[data-theme="dark"] .gt-art-badge--stock { background: rgba(31,109,42,.18); color: #b9e2c0; border-color: rgba(31,109,42,.4); }

/* Modales */
html[data-theme="dark"] .modal-content { background: var(--bg-card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--border); }
html[data-theme="dark"] .modal-title { color: var(--text); }
html[data-theme="dark"] .modal-body { color: var(--text); }
html[data-theme="dark"] .btn-close { filter: invert(.85); }
html[data-theme="dark"] .det-tab-content { background: var(--bg-card); }
html[data-theme="dark"] .det-nav-tabs { background: var(--bg-card-2); border-bottom-color: var(--border); }
html[data-theme="dark"] .det-nav-tabs .nav-link { color: var(--text-muted); }
html[data-theme="dark"] .det-nav-tabs .nav-link.active { background: var(--bg-card); color: var(--acento); border-color: var(--border) var(--border) var(--bg-card); }
html[data-theme="dark"] .det-empty, html[data-theme="dark"] .det-loading { color: var(--text-muted); }
html[data-theme="dark"] .det-badge { background: var(--acento-bg); color: var(--acento); }

/* Alert banners */
html[data-theme="dark"] .alert-banner-info { background: var(--acento-bg); color: var(--acento); border-color: var(--acento); }
html[data-theme="dark"] .alert-banner-ok { background: rgba(16,185,129,.12); color: #34d399; border-color: #10b981; }
html[data-theme="dark"] .emp-inactiva-badge { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .alert-banner-error { background: rgba(220,53,69,.18); color: #ff8a96; border-color: rgba(220,53,69,.4); }

/* Filtros y placeholders */
html[data-theme="dark"] .gt-placeholder { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .gt-cli-row .gt-input-label, html[data-theme="dark"] .gt-input-label { color: var(--text-muted); }

/* Listas (det-list) */
html[data-theme="dark"] .det-list li { border-bottom-color: var(--border); color: var(--text); }

/* Texto general muted */
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Sección Fuerza de Ventas en bienvenida */
html[data-theme="dark"] .hw-fv-section .hw-fv-head { color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .hw-fv-card-title { color: var(--text-muted); }

/* ─── Títulos de vistas (Contactos, Empresas, Proyectos, Tareas, Admin) ─── */
html[data-theme="dark"] .admin-section-header { color: var(--text); }
html[data-theme="dark"] .admin-section-title,
html[data-theme="dark"] .home-section-title,
html[data-theme="dark"] .form-section-title { color: var(--text); }
html[data-theme="dark"] .admin-section-title i,
html[data-theme="dark"] .home-section-title i,
html[data-theme="dark"] .form-section-title i { color: var(--acento); }

/* ─── Tablas tipo "admin" (rejillas Contactos / Empresas / Proyectos / Tareas) ─── */
html[data-theme="dark"] .admin-table-wrapper { background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
html[data-theme="dark"] .admin-table { background: var(--bg-card); color: var(--text); }
html[data-theme="dark"] .admin-table thead th { background: var(--bg-card-2); color: var(--text); border-bottom: 1px solid var(--border-2); }
html[data-theme="dark"] .admin-table tbody tr { border-bottom-color: var(--border); }
html[data-theme="dark"] .admin-table tbody tr:hover { background: var(--bg-hover); }
html[data-theme="dark"] .admin-table tbody td { color: var(--text); }
html[data-theme="dark"] .admin-table a, html[data-theme="dark"] .admin-table .crm-tel-link { color: var(--acento); }
html[data-theme="dark"] .admin-table a:hover { color: #6cd0f5; }
html[data-theme="dark"] .admin-table .text-muted { color: var(--text-muted) !important; }

/* ─── Filtros tipo "usuarios-filter" usados por Contactos/Empresas/Proyectos/Tareas ─── */
html[data-theme="dark"] .usuarios-filter-form { background: var(--bg-card); border: 1px solid var(--border); }
html[data-theme="dark"] .usuarios-filter-field label { color: var(--text-muted); }
html[data-theme="dark"] .tab-filter-input,
html[data-theme="dark"] .tab-filter-select {
    background: var(--bg-input); color: var(--text); border-color: var(--border-2);
}
html[data-theme="dark"] .tab-filter-input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .tab-filter-input:focus,
html[data-theme="dark"] .tab-filter-select:focus { border-color: var(--acento); box-shadow: 0 0 0 .15rem rgba(78,195,240,.18); }
html[data-theme="dark"] .tab-filter-bar { background: var(--bg-card); border-color: var(--border); }

/* ─── Mensajes "sin resultados" en tablas ─── */
html[data-theme="dark"] .admin-table .text-center.text-muted { color: var(--text-muted) !important; }

/* ─── Banner verde de éxito ─── */
html[data-theme="dark"] .alert-success-banner { background: rgba(40,167,69,.15); color: #6ee7b7; border-color: rgba(40,167,69,.4); }
html[data-theme="dark"] .alert-success-banner i { color: #6ee7b7; }

/* ─── Botones de paginación (.btn-page) ─── */
html[data-theme="dark"] .btn-page { background: var(--bg-card); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .btn-page:hover { background: var(--bg-hover); color: var(--acento); border-color: var(--acento); }
html[data-theme="dark"] .btn-page-active { background: var(--acento); color: var(--bg-sidebar); border-color: var(--acento); }
html[data-theme="dark"] .btn-page-active:hover { background: #6cd0f5; color: var(--bg-sidebar); }

/* ─── Informes CRM: page-title + tabs + dash-search ─── */
html[data-theme="dark"] .page-content-header { color: var(--text); }
html[data-theme="dark"] .page-title { color: var(--text); }
html[data-theme="dark"] .page-title i { color: var(--acento); }
html[data-theme="dark"] .inf-tabs { border-bottom-color: var(--border); background: transparent; }
html[data-theme="dark"] .inf-tab { color: var(--text-muted); background: transparent; }
html[data-theme="dark"] .inf-tab:hover { color: var(--acento); background: var(--acento-bg); }
html[data-theme="dark"] .inf-tab.active { color: var(--acento); border-bottom-color: var(--acento); background: transparent; }
html[data-theme="dark"] .dash-search-bar { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .dash-search-bar i { color: var(--text-muted); }
html[data-theme="dark"] .dash-search-input { background: transparent; color: var(--text); }
html[data-theme="dark"] .dash-search-input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .dash-rank-name { color: var(--text); }
html[data-theme="dark"] .dash-rank-count { color: var(--text-muted); }
html[data-theme="dark"] .dash-rank-track { background: var(--bg-hover); }

/* ─── Agenda de Equipo: panel miembros + chips + switcher ─── */
html[data-theme="dark"] .eq-panel { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .eq-panel-header { background: var(--bg-card-2); border-bottom-color: var(--border); color: var(--text); }
html[data-theme="dark"] .eq-btn-sel { background: var(--bg-card); color: var(--text-muted); border-color: var(--border-2); }
html[data-theme="dark"] .eq-btn-sel:hover { background: var(--acento-bg); color: var(--acento); border-color: var(--acento); }
html[data-theme="dark"] .eq-chip { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border-2); }
html[data-theme="dark"] .eq-chip-dot { background: var(--text-dim); }
html[data-theme="dark"] .eq-chip.active { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .eq-chip-loading { color: var(--text-muted); }
html[data-theme="dark"] .eq-switch-btn { background: var(--bg-card); color: var(--text-muted); border-color: var(--border-2); }
html[data-theme="dark"] .eq-switch-btn:hover { background: var(--acento-bg); color: var(--acento); border-color: var(--acento); }
html[data-theme="dark"] .eq-switch-btn.active { background: var(--acento); color: var(--bg-sidebar); border-color: var(--acento); box-shadow: 0 2px 8px rgba(78,195,240,.25); }
html[data-theme="dark"] .eq-leyenda-item { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border-2); }
html[data-theme="dark"] .eq-calendar-wrapper { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .eq-tabla-vacia { color: var(--text-muted); }
html[data-theme="dark"] .actividades-calendar-wrapper { background: var(--bg-card); border-color: var(--border); }

/* ─── Buscador genérico CRM (.crm-search-*) ─── */
html[data-theme="dark"] .crm-search-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .crm-search-header { background: var(--bg-card-2); color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .crm-search-field label { color: var(--text-muted); }
html[data-theme="dark"] .crm-search-input { background: var(--bg-input); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .crm-search-input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .crm-search-bar { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .crm-search-icon { color: var(--text-muted); }
html[data-theme="dark"] .crm-search-input-wrap { background: transparent; }

/* ============================================================
   FULLCALENDAR — TEMA OSCURO
   Selectores con #calendar para vencer la especificidad existente.
   ============================================================ */
html[data-theme="dark"] #calendar,
html[data-theme="dark"] .fc {
    background: var(--bg-card);
    color: var(--text);
}
html[data-theme="dark"] #calendar .fc-toolbar-title { color: var(--text); }
html[data-theme="dark"] #calendar .fc-button {
    background: var(--bg-card-2); color: var(--text); border-color: var(--border-2);
}
html[data-theme="dark"] #calendar .fc-button:hover {
    background: var(--acento-bg); color: var(--acento); border-color: var(--acento);
}
html[data-theme="dark"] #calendar .fc-button:disabled {
    background: var(--bg-sidebar); color: var(--text-dim); border-color: var(--border);
}
html[data-theme="dark"] #calendar .fc-button-active,
html[data-theme="dark"] #calendar .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--acento); color: var(--bg-sidebar); border-color: var(--acento);
}
html[data-theme="dark"] #calendar .fc-scrollgrid,
html[data-theme="dark"] #calendar .fc-scrollgrid-section > * {
    border-color: var(--border);
}
html[data-theme="dark"] #calendar .fc-scrollgrid td,
html[data-theme="dark"] #calendar .fc-scrollgrid th,
html[data-theme="dark"] #calendar table {
    border-color: var(--border);
}
html[data-theme="dark"] #calendar .fc-col-header-cell {
    background: var(--bg-card-2);
    color: var(--text);
}
html[data-theme="dark"] #calendar .fc-col-header-cell a {
    color: var(--text);
}
html[data-theme="dark"] #calendar .fc-timegrid-axis,
html[data-theme="dark"] #calendar .fc-timegrid-slot-label,
html[data-theme="dark"] #calendar .fc-timegrid-slot-label-cushion {
    color: var(--text-muted);
}
html[data-theme="dark"] #calendar .fc-timegrid-slot,
html[data-theme="dark"] #calendar .fc-timegrid-slot-lane {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] #calendar .fc-timegrid-slot-minor { border-top-color: var(--border); }
html[data-theme="dark"] #calendar .fc-day {
    background: var(--bg-card);
}
html[data-theme="dark"] #calendar .fc-day-today,
html[data-theme="dark"] #calendar .fc-timegrid-col.fc-day-today,
html[data-theme="dark"] #calendar .fc-daygrid-day.fc-day-today {
    background: rgba(78,195,240,.10) !important;
}
html[data-theme="dark"] #calendar .fc-day-disabled,
html[data-theme="dark"] #calendar .fc-non-business {
    background: rgba(0,0,0,.18);
}
html[data-theme="dark"] #calendar .fc-list,
html[data-theme="dark"] #calendar .fc-list-table { background: var(--bg-card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] #calendar .fc-list-day-cushion { background: var(--bg-card-2); color: var(--text); }
html[data-theme="dark"] #calendar .fc-list-event:hover td { background: var(--bg-hover); }
html[data-theme="dark"] #calendar .fc-list-event-title a { color: var(--text); }
html[data-theme="dark"] #calendar .fc-list-empty { background: var(--bg-card); color: var(--text-muted); }
html[data-theme="dark"] #calendar .fc-daygrid-day-number,
html[data-theme="dark"] #calendar .fc-daygrid-day-top a { color: var(--text); }
html[data-theme="dark"] #calendar .fc-event {
    border-color: transparent;
    /* el color de cada evento lo pone el JS — solo ajustamos el texto */
}
html[data-theme="dark"] #calendar .fc-event-title,
html[data-theme="dark"] #calendar .fc-event-time { color: inherit; }
html[data-theme="dark"] #calendar .fc-popover { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] #calendar .fc-popover-header { background: var(--bg-card-2); color: var(--text); }

/* ─── Tema CLARO: pequeño ajuste para sidebar dark removido ─── */
html[data-theme="light"] .topbar-user-btn:hover { background: rgba(0,0,0,.04); }

/* ─── Cabecera de las secciones del dashboard / informes ─── */
html[data-theme="dark"] .dash-section-header {
    background: var(--bg-card-2);
    border-bottom-color: var(--border);
}
html[data-theme="dark"] .dash-section-title { color: var(--text); }
html[data-theme="dark"] .dash-section-title i { color: var(--acento); }
html[data-theme="dark"] .dash-section-badge { background: var(--acento); color: var(--bg-sidebar); }
html[data-theme="dark"] .dash-section-body { color: var(--text); }

/* ─── Selector de período (.dash-period-bar) ─── */
html[data-theme="dark"] .dash-period-bar {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] .dash-period-btn {
    background: var(--bg-card-2);
    border-color: var(--border-2);
    color: var(--text-muted);
}
html[data-theme="dark"] .dash-period-btn:hover {
    background: var(--acento-bg);
    border-color: var(--acento);
    color: var(--acento);
}
html[data-theme="dark"] .dash-period-btn.active {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--bg-sidebar);
}
html[data-theme="dark"] .dash-period-custom input[type="date"] {
    background: var(--bg-input);
    color: var(--text);
    border-color: var(--border-2);
}
html[data-theme="dark"] .dash-period-custom .dash-period-apply {
    background: var(--acento);
    color: var(--bg-sidebar);
}
html[data-theme="dark"] .dash-period-custom .dash-period-apply:hover {
    background: #6cd0f5;
}

/* ─── Filtros de "Dedicación" en Informes ─── */
html[data-theme="dark"] .ded-filtros { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .ded-label { color: var(--text-muted); }
html[data-theme="dark"] .ded-select {
    background: var(--bg-input);
    color: var(--text);
    border-color: var(--border-2);
}

/* ─── Gantt: cabeceras y filas ─── */
html[data-theme="dark"] .gantt-proj-card { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .gantt-proj-card:hover { background: var(--bg-hover); }
html[data-theme="dark"] .gantt-proj-card-title { color: var(--text); }
html[data-theme="dark"] .gantt-proj-card-meta { color: var(--text-muted); }
html[data-theme="dark"] .gantt-proj-card-footer { color: var(--text-muted); border-top-color: var(--border); }
html[data-theme="dark"] .gantt-wrap { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .gantt-header { background: var(--bg-card-2); border-bottom-color: var(--border); }
html[data-theme="dark"] .gantt-month { color: var(--text-muted); }
html[data-theme="dark"] .gantt-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .gantt-label { background: var(--bg-card-2); color: var(--text); border-right-color: var(--border); }
html[data-theme="dark"] .gantt-label-name { color: var(--text); }
html[data-theme="dark"] .gantt-track { background: var(--bg-card); }
html[data-theme="dark"] .gantt-no-date { color: var(--text-dim); }
html[data-theme="dark"] .gantt-nav { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .gantt-titulo { color: var(--text); }
html[data-theme="dark"] .gantt-fechas { color: var(--text-muted); }
html[data-theme="dark"] .gantt-today-label { background: var(--acento); color: var(--bg-sidebar); }
html[data-theme="dark"] .gantt-leyenda { background: var(--bg-card); color: var(--text); border-top-color: var(--border); }
html[data-theme="dark"] .gantt-leyenda-items { color: var(--text-muted); }

/* ─── Productividad: chart semanal de barras ─── */
html[data-theme="dark"] .wprod-bars { background: var(--bg-card); }
html[data-theme="dark"] .wprod-val { color: var(--text); }
html[data-theme="dark"] .wprod-track { background: var(--bg-card-2); }
html[data-theme="dark"] .wprod-fill { background: var(--acento); }
html[data-theme="dark"] .wprod-lbl { color: var(--text-muted); }

/* ─── Chips de persona dentro de tablas ─── */
html[data-theme="dark"] .dash-person-chip { background: var(--bg-card-2); color: var(--text); }
html[data-theme="dark"] .dash-bar-track { background: var(--bg-hover); }

/* ─── Textos dentro de gráficos donut SVG (centro: valor + label + count) ───
   El JS pinta los <text> con fill="#333" / "#1a2f45" / etc. hardcoded.
   En oscuro los sobrescribimos: el bold/700 va en color principal y
   los demás en muted. Los atributos SVG de presentación son sobre-
   escribibles por CSS sin !important. */
html[data-theme="dark"] .dash-rank-chart svg text,
html[data-theme="dark"] .hw-fv-canvas svg text {
    fill: var(--text-muted);
}
html[data-theme="dark"] .dash-rank-chart svg text[font-weight],
html[data-theme="dark"] .hw-fv-canvas svg text[font-weight] {
    fill: var(--text);
}

/* ============================================================
   ============================================================
   REDISEÑO V3 — Layout estilo prototipo CRM
   (sidebar claro + topbar con buscador + FAB IA + footer)
   ============================================================
   ============================================================ */

:root {
    --v3-side-bg:      #ffffff;
    --v3-side-border:  #e5e9f0;
    --v3-side-hover:   #f4f7fb;
    --v3-side-active-bg: #e8f4fd;
    --v3-side-active-color: #00A0E3;
    --v3-side-active-bar:   #00A0E3;
    --v3-text:        #1a2942;
    --v3-text-muted:  #6b7c93;
    --v3-text-dim:    #94a3b8;
    --v3-page-bg:     #f5f7fa;
    --v3-accent:      #00A0E3;
    --v3-accent-dark: #0080bb;
}

/* ───────── Sidebar ───────── */
.app-sidebar {
    background: var(--v3-side-bg) !important;
    border-right: 1px solid var(--v3-side-border);
    width: 240px;
}

.sidebar-header {
    padding: 1rem .9rem;
    border-bottom: 1px solid var(--v3-side-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sidebar-logo {
    display: flex; align-items: center;
    gap: .55rem;
    text-decoration: none;
    flex: 1; min-width: 0;
}
.sidebar-logo-icon {
    width: 32px; height: 32px;
    background: var(--v3-accent); color: #fff;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sidebar-logo-text {
    display: flex; flex-direction: column;
    color: var(--v3-text);
    font-size: .92rem;
    line-height: 1.1;
    min-width: 0;
}
.sidebar-logo-text strong { font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.sidebar-logo-text .ver  { color: var(--v3-text-muted); font-size: .72rem; font-weight: 500; }

.sidebar-collapse-btn {
    width: 28px; height: 28px;
    background: transparent;
    color: var(--v3-text-muted);
    border: 1px solid var(--v3-side-border);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--v3-side-hover); color: var(--v3-accent); }

/* Workspace */
.sidebar-workspace {
    margin: .75rem .75rem 0;
    padding: .55rem .65rem;
    border: 1px solid var(--v3-side-border);
    border-radius: 8px;
    display: flex; align-items: center; gap: .55rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sidebar-workspace:hover { background: var(--v3-side-hover); }
.sidebar-ws-icon {
    width: 30px; height: 30px;
    background: var(--v3-accent); color: #fff;
    border-radius: 6px;
    font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sidebar-ws-text { flex: 1; min-width: 0; }
.sidebar-ws-name {
    color: var(--v3-text); font-weight: 600; font-size: .82rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-ws-role {
    color: var(--v3-text-muted); font-size: .68rem;
}
.sidebar-ws-chev { color: var(--v3-text-dim); font-size: .78rem; }
/* Desplegable del workspace */
.sidebar-ws-dropdown { margin: .75rem .75rem 0; }
.sidebar-ws-dropdown .sidebar-workspace { margin: 0; }
.sidebar-ws-menu { min-width: 230px; font-size: .85rem; }
.sidebar-ws-menu .sidebar-ws-menu-sub { padding: 0 1rem .4rem; font-size: .72rem; color: var(--v3-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-ws-menu .sidebar-ws-logout { color: #dc2626; }
.sidebar-ws-menu .sidebar-ws-logout:hover { background: #fef2f2; color: #dc2626; }

/* Nav */
.sidebar-nav {
    flex: 1; overflow-y: auto;
    padding: .65rem .55rem;
    display: flex; flex-direction: column;
    gap: 2px;
}
.sidebar-nav .nav-item {
    display: flex; align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border-radius: 7px;
    color: var(--v3-text-muted) !important;
    font-size: .85rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-left-color .12s;
    cursor: pointer;
}
.sidebar-nav .nav-item:hover {
    background: var(--v3-side-hover);
    color: var(--v3-text) !important;
}
.sidebar-nav .nav-item.active {
    background: var(--v3-side-active-bg);
    color: var(--v3-side-active-color) !important;
    font-weight: 600;
    border-left-color: var(--v3-side-active-bar);
}
.sidebar-nav .nav-item .item-icon {
    font-size: 1rem;
    width: 1rem;
    text-align: center;
    color: inherit;
    flex-shrink: 0;
}
.sidebar-nav .nav-section-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--v3-text-dim);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 1rem .65rem .25rem;
}

/* Footer sidebar */
.sidebar-user-footer {
    padding: .75rem .9rem;
    border-top: 1px solid var(--v3-side-border);
    display: flex; align-items: center; gap: .55rem;
}
.sidebar-user-footer .sidebar-user-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #ff5e9c, #c33775);
    color: #fff;
    border-radius: 50%;
    font-size: .76rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sidebar-user-footer .sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-footer .sidebar-user-name {
    color: var(--v3-text); font-weight: 600; font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-footer .sidebar-user-role {
    color: var(--v3-text-muted); font-size: .7rem;
}

/* Sidebar colapsado (oculta texto). El botón "expandir" queda visible. */
.app-sidebar.sidebar-collapsed { width: 64px; }
.app-sidebar.sidebar-collapsed .sidebar-logo-text,
.app-sidebar.sidebar-collapsed .sidebar-ws-text,
.app-sidebar.sidebar-collapsed .sidebar-ws-chev,
.app-sidebar.sidebar-collapsed .sidebar-user-info,
.app-sidebar.sidebar-collapsed .nav-item span,
.app-sidebar.sidebar-collapsed .nav-section-label { display: none; }
/* Ocultamos el LOGO completo, no el botón — así queda el botón solo y centrado. */
.app-sidebar.sidebar-collapsed .sidebar-logo { display: none; }
.app-sidebar.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
.app-sidebar.sidebar-collapsed .sidebar-workspace { padding: .35rem; justify-content: center; }
.app-sidebar.sidebar-collapsed .sidebar-header { justify-content: center; }
.app-sidebar.sidebar-collapsed .nav-item { justify-content: center; padding: .55rem 0; }
.app-sidebar.sidebar-collapsed .sidebar-user-footer { justify-content: center; }

/* ───────── Página + topbar ───────── */
.app-content { background: var(--v3-page-bg); }
.app-main    { background: var(--v3-page-bg); padding: 1.5rem 4.5rem 5rem; }
/* Más aire a los lados en pantallas grandes; se reduce en pantallas estrechas */
@media (min-width: 1700px) { .app-main { padding-left: 7rem;   padding-right: 7rem; } }
@media (max-width: 1200px) { .app-main { padding-left: 3rem;   padding-right: 3rem; } }
@media (max-width: 992px)  { .app-main { padding-left: 1.75rem; padding-right: 1.75rem; } }
@media (max-width: 600px)  { .app-main { padding-left: 1rem;    padding-right: 1rem; } }

/* ===== Selector de columnas (Contactos / Empresas) ===== */
.crm-cols-badge {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: .35rem;
    font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center;
    background: #e8f4fd; color: #00A0E3; border-radius: 9px;
}
.crm-cols-menu { width: 280px; padding: 0; }
.crm-cols-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .8rem; border-bottom: 1px solid #eef2f6;
    font-size: .74rem; font-weight: 600; color: #64748b;
}
.crm-cols-reset {
    border: none; background: transparent; color: #00A0E3; cursor: pointer;
    font-size: .74rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem;
}
.crm-cols-reset:hover { text-decoration: underline; }
.crm-cols-list { padding: .35rem; max-height: 320px; overflow-y: auto; }
.crm-cols-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .5rem; border-radius: 7px; cursor: grab; user-select: none;
}
.crm-cols-item:hover { background: #f5f9fd; }
.crm-cols-item.dragging { opacity: .5; background: #e8f4fd; }
.crm-cols-grip { color: #b4c2d3; display: inline-flex; cursor: grab; }
.crm-cols-chk { display: flex; align-items: center; gap: .5rem; margin: 0; flex: 1; cursor: pointer; font-size: .85rem; color: #334155; }
.crm-cols-chk input { cursor: pointer; }

/* Cabeceras ordenables */
.crm-th-sortable { cursor: pointer; white-space: nowrap; }
.crm-th-sortable:hover { color: #00A0E3; }
.crm-th-active { color: #00A0E3; }
.crm-th-arrow { font-size: .8rem; margin-left: .25rem; }

html[data-theme="dark"] .crm-cols-badge { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .crm-cols-head { color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="dark"] .crm-cols-item:hover { background: var(--bg-hover); }
html[data-theme="dark"] .crm-cols-item.dragging { background: var(--acento-bg); }
html[data-theme="dark"] .crm-cols-chk { color: var(--text); }

/* Pestañas del Dashboard unificado (Resumen · Panel CRM · Informes) */
.dash-tabs {
    display: flex; gap: .4rem; flex-wrap: wrap;
    margin-bottom: 1.25rem; padding-bottom: .3rem;
    border-bottom: 1px solid #e6eef6;
}
.dash-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .95rem; border-radius: 8px;
    font-size: .9rem; font-weight: 600; color: #64748b; text-decoration: none;
    transition: background .12s, color .12s;
}
.dash-tab i { font-size: .95rem; }
.dash-tab:hover { background: #f1f5f9; color: #0f172a; }
.dash-tab.active { background: #00A0E3; color: #fff; }
html[data-theme="dark"] .dash-tabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .dash-tab { color: var(--text-muted); }
html[data-theme="dark"] .dash-tab:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .dash-tab.active { background: var(--acento); color: #fff; }

/* ===== Dashboard personalizable (widgets) ===== */
.dw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.dw-toolbar-hint { font-size: .82rem; color: #94a3b8; }
.dw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; align-items: start; }
.dw-size-1 { grid-column: span 1; }
.dw-size-2 { grid-column: span 2; }
.dw-size-3 { grid-column: span 4; }
@media (max-width: 1100px) { .dw-grid { grid-template-columns: repeat(2, 1fr); } .dw-size-2, .dw-size-3 { grid-column: span 2; } }
@media (max-width: 560px)  { .dw-grid { grid-template-columns: 1fr; } .dw-size-1, .dw-size-2, .dw-size-3 { grid-column: span 1; } }

.dw-card { background: #fff; border: 1px solid #e6eef6; border-radius: 12px; display: flex; flex-direction: column; min-height: 120px; overflow: hidden; }
.dw-card.dw-dragging { opacity: .55; outline: 2px dashed #00A0E3; }
.dw-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-bottom: 1px solid #f0f4f8; }
.dw-grip { color: #b4c2d3; cursor: grab; display: inline-flex; }
.dw-grip:active { cursor: grabbing; }
.dw-title { flex: 1; min-width: 0; font-size: .82rem; font-weight: 600; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-remove { border: none; background: transparent; color: #b4c2d3; cursor: pointer; padding: 2px 4px; border-radius: 6px; font-size: .8rem; }
.dw-remove:hover { background: #fef2f2; color: #dc2626; }
.dw-body { flex: 1; padding: .85rem .95rem; }
.dw-loading, .dw-err, .dw-empty-line { color: #94a3b8; font-size: .85rem; padding: .4rem 0; }
.dw-err { color: #dc3545; }
.dw-empty { text-align: center; color: #94a3b8; padding: 2.5rem 1rem; grid-column: 1 / -1; }
.dw-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; }

.dw-list { list-style: none; margin: 0; padding: 0; }
.dw-li { padding: .4rem 0; border-bottom: 1px solid #f3f6fa; display: flex; flex-direction: column; }
.dw-li:last-child { border-bottom: none; }
.dw-li-main { font-size: .87rem; color: #1e293b; }
.dw-li-sub { font-size: .75rem; color: #94a3b8; }

.dw-bars { display: flex; flex-direction: column; gap: .4rem; }
.dw-bar-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.dw-bar-lbl { width: 38%; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-bar-track { flex: 1; height: 8px; background: #eef2f6; border-radius: 5px; overflow: hidden; }
.dw-bar-fill { display: block; height: 100%; background: #00A0E3; }
/* 38px y no 28: los widgets de cobertura muestran porcentajes, y "100%" no cabía. */
.dw-bar-val { width: 38px; text-align: right; color: #64748b; font-weight: 600; }

/* La pastilla de señal dentro de la lista de alertas del widget. */
.dw-li-sub .sn-badge { font-size: .68rem; padding: .05rem .3rem; margin-right: .25rem; }

.dw-cat-group { font-size: .7rem; font-weight: 700; color: #94a3b8; letter-spacing: .04em; margin: .75rem 0 .35rem; }
.dw-cat-item { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; border: 1px solid #e6eef6; background: #fff; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .4rem; cursor: pointer; font-size: .9rem; color: #334155; }
.dw-cat-item:hover { background: #f0f9ff; border-color: #00A0E3; }
.dw-cat-item i { color: #00A0E3; }

html[data-theme="dark"] .dw-card { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .dw-head { border-bottom-color: var(--border); }
html[data-theme="dark"] .dw-title { color: var(--text); }
html[data-theme="dark"] .dw-li-main { color: var(--text); }
html[data-theme="dark"] .dw-li { border-bottom-color: var(--border); }
html[data-theme="dark"] .dw-bar-track { background: var(--bg-hover); }
html[data-theme="dark"] .dw-cat-item { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .dw-cat-item:hover { background: var(--bg-hover); }

.app-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--v3-side-border);
    height: 56px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky; top: 0;
    z-index: 50;
}

.btn-sidebar-toggle-mobile {
    background: transparent; border: 0;
    color: var(--v3-text-muted); font-size: 1.4rem;
    padding: .25rem .5rem;
    display: none;
}
@media (max-width: 768px) {
    .btn-sidebar-toggle-mobile { display: inline-flex; }
}

/* Breadcrumb */
.topbar-breadcrumb-new {
    display: flex; align-items: center; gap: .55rem;
    font-size: .9rem;
    color: var(--v3-text);
    flex-shrink: 0;
}
.topbar-brand {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--v3-text); text-decoration: none;
}
.topbar-brand i { color: var(--v3-accent); font-size: 1rem; }
.topbar-brand strong { font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.topbar-brand .ver { color: var(--v3-text-muted); font-size: .7rem; margin-left: .15rem; }
.topbar-bc-sep    { color: var(--v3-text-dim); }
.topbar-bc-current { color: var(--v3-text); font-weight: 500; font-size: .9rem; }

/* Selector "Módulos" */
.topbar-modulos { flex-shrink: 0; }
.topbar-modulos-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff;
    border: 1px solid var(--v3-side-border);
    color: var(--v3-text);
    padding: .35rem .75rem;
    border-radius: 7px;
    font-size: .84rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.topbar-modulos-btn:hover { background: var(--v3-side-hover); border-color: var(--v3-accent); }
.topbar-modulos-btn i { font-size: .85rem; }
.topbar-modulos-chev { color: var(--v3-text-muted); }
.topbar-modulos-menu { font-size: .85rem; padding: .3rem 0; min-width: 220px; }
.topbar-modulos-menu .dropdown-header {
    font-size: .68rem; text-transform: uppercase;
    color: var(--v3-text-muted); padding: .35rem .85rem;
    letter-spacing: .06em; font-weight: 700;
}

/* Buscador global */
.topbar-search-global {
    flex: 1;
    max-width: 540px;
    display: flex; align-items: center;
    gap: .5rem;
    background: var(--v3-page-bg);
    border: 1px solid var(--v3-side-border);
    border-radius: 7px;
    padding: .35rem .75rem;
    color: var(--v3-text-muted);
}
.topbar-search-global i { color: var(--v3-text-dim); }
.topbar-search-global input {
    flex: 1; border: 0; background: transparent;
    color: var(--v3-text);
    outline: none;
    font-size: .85rem;
}
.topbar-search-global input::placeholder { color: var(--v3-text-dim); }
.topbar-search-kbd {
    display: inline-flex; align-items: center;
    font-family: ui-monospace, monospace;
    font-size: .72rem;
    color: var(--v3-text-dim);
    background: #fff;
    border: 1px solid var(--v3-side-border);
    border-radius: 5px;
    padding: 1px 6px;
}

/* Actions topbar */
.topbar-actions {
    margin-left: auto;
    display: flex; align-items: center;
    gap: .55rem;
}

.topbar-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--v3-text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.topbar-bell:hover { background: var(--v3-side-hover); color: var(--v3-accent); }
.topbar-bell-dot {
    position: absolute; top: 6px; right: 6px;
    width: 9px; height: 9px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
}

.topbar-user-btn {
    background: transparent; border: 0;
    display: inline-flex; align-items: center;
    gap: .45rem;
    padding: .25rem .5rem .25rem .3rem;
    border-radius: 999px;
    color: var(--v3-text);
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s;
}
.topbar-user-btn:hover { background: var(--v3-side-hover); }
.topbar-user-avatar-circle {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, #ff5e9c, #c33775);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
}
.topbar-user-chev { color: var(--v3-text-muted); font-size: .72rem; }

/* Topbar responsive — evita que las acciones (campana + avatar/tema) se salgan
   del borde en móvil. El breadcrumb y Módulos no encogían y empujaban el avatar
   fuera de pantalla. */
@media (max-width: 768px) {
    /* El omnibox (⌘K) no aporta sin teclado: se oculta y libera el centro */
    .topbar-search-global { display: none; }
    /* El breadcrumb puede encoger y truncar la página actual */
    .topbar-breadcrumb-new { min-width: 0; flex-shrink: 1; overflow: hidden; }
    .topbar-bc-current {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Las acciones nunca encogen: el avatar siempre visible */
    .topbar-actions { flex-shrink: 0; }
}
@media (max-width: 520px) {
    /* En pantallas muy estrechas: solo la página actual y los iconos */
    .topbar-brand,
    .topbar-bc-sep { display: none; }
    .topbar-modulos-btn span { display: none; }   /* solo el icono de Módulos */
    .app-topbar { gap: .5rem; padding: 0 .6rem; }
}

/* FAB Asistente IA */
.fab-ia {
    position: fixed;
    right: 1.25rem; bottom: 1.25rem;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d2c3, #1abc9c);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 18px rgba(26,188,156,.35);
    cursor: pointer;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: transform .18s;
}
.fab-ia:hover { transform: translateY(-2px); }

/* Footer confidencial */
.app-footer-confidencial {
    position: fixed;
    right: 1.25rem; bottom: .6rem;
    font-size: .68rem;
    color: var(--v3-text-dim);
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 199;
    /* Margen para que no choque con el FAB */
    right: calc(1.25rem + 64px);
}

/* ───────── Ajustes de los 3 temas al nuevo layout ───────── */

/* TEMA POR DEFECTO (corporativo) — mantiene acentos azul vibrante #00A0E3.
   El sidebar es claro, igual que en light. No hay nada extra que sobrescribir. */

/* TEMA LIGHT — acentos un poco más neutros pero mismo layout. */
html[data-theme="light"] {
    --v3-accent:      #2d7eb8;
    --v3-accent-dark: #21618f;
    --v3-side-active-bg:    #eef2f7;
    --v3-side-active-color: #2d7eb8;
    --v3-side-active-bar:   #2d7eb8;
}

/* TEMA OSCURO — el sidebar/topbar/main pasan a oscuro. */
html[data-theme="dark"] {
    --v3-side-bg:           #11151c;
    --v3-side-border:       #2f3a4f;
    --v3-side-hover:        #1a2030;
    --v3-side-active-bg:    #1d3a52;
    --v3-side-active-color: #4ec3f0;
    --v3-side-active-bar:   #4ec3f0;
    --v3-text:        #e7ebf2;
    --v3-text-muted:  #94a3b8;
    --v3-text-dim:    #6b7c93;
    --v3-page-bg:     #1a1f2b;
    --v3-accent:      #4ec3f0;
    --v3-accent-dark: #3aa8d3;
}
html[data-theme="dark"] .app-topbar { background: #1f2532; border-bottom-color: var(--v3-side-border); }
html[data-theme="dark"] .topbar-modulos-btn { background: #232b3a; border-color: #2f3a4f; color: var(--v3-text); }
html[data-theme="dark"] .topbar-modulos-btn:hover { background: #2a3344; }
html[data-theme="dark"] .topbar-search-global { background: #232b3a; border-color: #2f3a4f; }
html[data-theme="dark"] .topbar-search-global input { color: var(--v3-text); }
html[data-theme="dark"] .topbar-search-kbd { background: #2a3344; color: var(--v3-text-muted); border-color: #2f3a4f; }
html[data-theme="dark"] .topbar-bell-dot { border-color: #1f2532; }

/* ============================================================
   PÁGINA "CONTACTOS" — diseño prototipo (toolbar + cards + tabla)
   ============================================================ */

/* Cabecera */
.ct-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ct-page-title {
    font-size: 1.5rem; font-weight: 700;
    color: var(--v3-text, #1a2942);
    margin: 0;
}
.ct-page-subtitle {
    color: var(--v3-text-muted, #6b7c93);
    font-size: .82rem;
    margin-top: .15rem;
}
.ct-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.btn-ct-primary, .btn-ct-secondary {
    display: inline-flex; align-items: center;
    padding: .45rem .85rem;
    border-radius: 7px;
    font-size: .85rem; font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
    line-height: 1.2;
}
.btn-ct-primary {
    background: var(--v3-accent, #00A0E3); color: #fff;
    border: 1px solid var(--v3-accent, #00A0E3);
}
.btn-ct-primary:hover { background: var(--v3-accent-dark, #0080bb); border-color: var(--v3-accent-dark, #0080bb); color: #fff; }
.btn-ct-secondary {
    background: #fff;
    border: 1px solid #e5e9f0;
    color: var(--v3-text, #1a2942);
}
.btn-ct-secondary:hover { background: #f4f7fb; border-color: var(--v3-accent, #00A0E3); color: var(--v3-accent, #00A0E3); }

/* Deshabilitados. Sin esto se ven igual de activos: el botón de guardar que se
   bloquea al detectar un producto ya contratado parecía pulsable y no hacía nada. */
.btn-ct-primary:disabled, .btn-ct-secondary:disabled, .btn-ct-mini:disabled,
.btn-ct-primary[disabled], .btn-ct-secondary[disabled], .btn-ct-mini[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Toolbar */
.ct-toolbar {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .55rem .65rem;
    display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ct-search {
    flex: 1 1 280px;
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem;
    background: #f5f7fa;
    border: 1px solid transparent;
    border-radius: 7px;
}
.ct-search:focus-within { border-color: var(--v3-accent, #00A0E3); background: #fff; }
.ct-search i { color: var(--v3-text-muted, #6b7c93); }
.ct-search input {
    flex: 1; border: 0; background: transparent;
    color: var(--v3-text, #1a2942);
    outline: none; font-size: .88rem;
}
.ct-search input::placeholder { color: #94a3b8; }

.ct-tb-dropdown { position: relative; }
.ct-tb-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .75rem;
    background: #fff; border: 1px solid #e5e9f0;
    border-radius: 7px;
    color: var(--v3-text, #1a2942);
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ct-tb-btn:hover { background: #f4f7fb; border-color: var(--v3-accent, #00A0E3); }
/* Botón con valor activo (filtro aplicado) */
.ct-tb-btn--active {
    background: #e8f4fd;
    border-color: var(--v3-accent, #00A0E3);
    color: var(--v3-accent, #00A0E3);
}
.ct-tb-btn--active:hover { background: #d5ecfb; }
/* Chip con el valor actual del filtro dentro del botón */
.ct-tb-val {
    display: inline-block;
    margin-left: .45rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #4a5a72;
    font-size: .72rem;
    font-weight: 500;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.ct-tb-btn--active .ct-tb-val {
    background: var(--v3-accent, #00A0E3);
    color: #fff;
}
.ct-tb-badge {
    background: var(--v3-accent, #00A0E3); color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .7rem; font-weight: 600;
    margin-left: .2rem;
}

/* Switch "Mostrar eliminados" */
.ct-tb-switch {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-right: auto;          /* empuja el boton a su sitio de siempre, a la derecha */
    font-size: .82rem;
    color: var(--v3-text-muted, #6b7c93);
    cursor: pointer;
}
.ct-tb-switch input { display: none; }
.ct-tb-switch-track {
    width: 32px; height: 18px;
    background: #d1dce8;
    border-radius: 999px;
    position: relative;
    transition: background .15s;
}
.ct-tb-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #fff; border-radius: 50%;
    transition: left .15s;
}
.ct-tb-switch input:checked + .ct-tb-switch-track { background: var(--v3-accent, #00A0E3); }
.ct-tb-switch input:checked + .ct-tb-switch-track .ct-tb-switch-thumb { left: 16px; }

/* Popovers */
.ct-pop { padding: .65rem; min-width: 260px; }
.ct-pop-mini { padding: .25rem 0; min-width: 200px; }
.ct-pop-title {
    font-size: .82rem; font-weight: 600;
    color: var(--v3-text, #1a2942);
    margin-bottom: .5rem;
}
.ct-pop-header {
    padding: .45rem .85rem;
    font-size: .68rem; font-weight: 700;
    color: var(--v3-text-muted, #6b7c93);
    text-transform: uppercase; letter-spacing: .06em;
}
.ct-pop-field { margin-bottom: .55rem; }
.ct-pop-field label {
    display: block;
    font-size: .72rem; font-weight: 600;
    color: var(--v3-text-muted, #6b7c93);
    margin-bottom: .2rem;
}
.ct-pop-input {
    width: 100%;
    padding: .4rem .65rem;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--v3-text, #1a2942);
}
.ct-pop-input:focus { outline: none; border-color: var(--v3-accent, #00A0E3); }
.ct-pop-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: .45rem;
    border-top: 1px solid #f0f4fa;
    margin-top: .35rem;
}
.ct-pop-link {
    color: var(--v3-text-muted, #6b7c93);
    font-size: .8rem;
    text-decoration: none;
}
.ct-pop-link:hover { color: var(--v3-accent, #00A0E3); }
.ct-pop-btn { padding: .35rem .85rem; font-size: .82rem; }

/* Dropdown items en los popovers de Vista / Ordenar */
.ct-pop-mini .dropdown-item {
    display: flex; align-items: center;
    padding: .45rem .85rem;
    font-size: .85rem;
    color: var(--v3-text, #1a2942);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.ct-pop-mini .dropdown-item:hover { background: #f4f7fb; }
.ct-pop-mini .dropdown-item.active {
    background: #e8f4fd;
    color: var(--v3-accent, #00A0E3);
    font-weight: 600;
}

/* Tabla */
.ct-table-wrapper {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ct-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ct-table thead th {
    background: #fff;
    color: #6b7c93;
    text-align: left;
    padding: .7rem .9rem;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid #e5e9f0;
}
.ct-table tbody tr { border-bottom: 1px solid #f0f4fa; transition: background .12s; }
.ct-table tbody tr:hover { background: #f9fbff; }
.ct-table tbody td {
    padding: .65rem .9rem;
    vertical-align: middle;
    color: var(--v3-text, #1a2942);
}
.ct-col-check { width: 36px; text-align: center; }
.ct-empty {
    padding: 2rem;
    text-align: center;
    color: var(--v3-text-muted, #6b7c93);
    font-size: .85rem;
}

/* Nombre con avatar */
.ct-name { display: flex; align-items: center; gap: .65rem; }
.ct-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--v3-accent, #00A0E3);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
    flex-shrink: 0;
}
.ct-avatar-lg { width: 44px; height: 44px; font-size: .92rem; }
.ct-avatar i { font-size: .9rem; }
.ct-avatar-lg i { font-size: 1.15rem; }
/* Avatar de empresa (icono edificio) */
.em-avatar-co { background: var(--v3-accent, #00A0E3); color: #fff; }
.ct-name-text { display: flex; flex-direction: column; line-height: 1.2; }
.ct-name-text strong { color: var(--v3-text, #1a2942); font-weight: 600; }
.ct-name-text small { color: var(--v3-text-muted, #6b7c93); font-size: .72rem; }
.ct-empresa { color: var(--v3-text, #1a2942); }
.ct-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--v3-text, #1a2942); text-decoration: none;
    font-size: .82rem;
}
.ct-link:hover { color: var(--v3-accent, #00A0E3); }
.ct-link i { color: var(--v3-text-muted, #6b7c93); font-size: .8rem; }

/* Vista cards */
.ct-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.ct-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    transition: box-shadow .15s, border-color .15s;
}
.ct-card:hover { box-shadow: 0 3px 12px rgba(0,160,227,.12); border-color: var(--v3-accent, #00A0E3); }
.ct-card-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.ct-card-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ct-card-name strong { color: var(--v3-text, #1a2942); font-size: .92rem; font-weight: 600; }
.ct-card-name small  { color: var(--v3-text-muted, #6b7c93); font-size: .72rem; }
.ct-card-body { display: flex; flex-direction: column; gap: .35rem; }
.ct-card-line {
    display: flex; align-items: center; gap: .45rem;
    color: var(--v3-text, #1a2942);
    font-size: .82rem;
}
.ct-card-line i {
    color: var(--v3-text-muted, #6b7c93);
    width: 14px; flex-shrink: 0;
}
.ct-card-line a { color: var(--v3-text, #1a2942); text-decoration: none; }
.ct-card-line a:hover { color: var(--v3-accent, #00A0E3); }

/* Paginador */
.ct-pager {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1rem; gap: 1rem; flex-wrap: wrap;
}
.ct-pager-info {
    display: flex; align-items: center; gap: .5rem;
    color: var(--v3-text-muted, #6b7c93);
    font-size: .82rem;
}
.ct-pager-pp {
    padding: .2rem .35rem;
    border: 1px solid #e5e9f0;
    border-radius: 5px;
    font-size: .82rem;
    color: var(--v3-text, #1a2942);
}
.ct-pager-text { margin-left: .35rem; }
.ct-pager-nav { display: flex; gap: .25rem; }

/* ───── Tema oscuro: overrides ───── */
html[data-theme="dark"] .ct-page-title { color: var(--text); }
html[data-theme="dark"] .ct-page-subtitle { color: var(--text-muted); }
html[data-theme="dark"] .btn-ct-secondary {
    background: var(--bg-card); color: var(--text); border-color: var(--border-2);
}
html[data-theme="dark"] .btn-ct-secondary:hover {
    background: var(--bg-hover); border-color: var(--acento); color: var(--acento);
}
html[data-theme="dark"] .ct-toolbar { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ct-search { background: var(--bg-card-2); }
html[data-theme="dark"] .ct-search:focus-within { background: var(--bg-input); border-color: var(--acento); }
html[data-theme="dark"] .ct-search input { color: var(--text); }
html[data-theme="dark"] .ct-search input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .ct-tb-btn { background: var(--bg-card-2); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .ct-tb-btn:hover { background: var(--bg-hover); border-color: var(--acento); }
html[data-theme="dark"] .ct-tb-btn--active { background: var(--acento-bg); border-color: var(--acento); color: var(--acento); }
html[data-theme="dark"] .ct-tb-btn--active:hover { background: var(--bg-hover); }
html[data-theme="dark"] .ct-tb-val { background: var(--bg-input); color: var(--text-muted); }
html[data-theme="dark"] .ct-tb-btn--active .ct-tb-val { background: var(--acento); color: #fff; }

/* ============================================================
   ÁRBOL PROYECTO → TAREA → ACTIVIDAD (acordeón anidado)
   ============================================================ */
.proy-tree { display: flex; flex-direction: column; gap: .75rem; }

/* ───── Tarjeta de proyecto ───── */
.proy-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    overflow: hidden;
}
.proy-card[open]            { box-shadow: 0 4px 12px rgba(0,160,227,.08); border-color: #cce8f9; }
.proy-card-head {
    list-style: none;
    cursor: pointer;
    padding: .85rem 1rem;
    display: flex; align-items: center; gap: .75rem;
    user-select: none;
    transition: background .12s;
}
.proy-card-head::-webkit-details-marker { display: none; }
.proy-card-head:hover { background: #f9fbff; }
.proy-chev {
    color: #6b7c93;
    transition: transform .15s;
    flex-shrink: 0;
    font-size: 1rem;
}
.proy-card[open] > .proy-card-head .proy-chev { transform: rotate(90deg); color: var(--v3-accent, #00A0E3); }
.proy-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--v3-accent, #00A0E3); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.proy-info { flex: 1; min-width: 0; }
.proy-name {
    font-size: 1rem; color: #1a2942;
    display: flex; align-items: center; gap: .35rem;
    flex-wrap: wrap;
}
.proy-name strong { font-weight: 600; }
.proy-meta {
    display: flex; align-items: center; gap: .65rem;
    flex-wrap: wrap;
    margin-top: .25rem;
    color: #6b7c93;
    font-size: .8rem;
}
.proy-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.proy-meta .crm-badge-estado { padding: 1px 7px; }
.proy-badge-count {
    background: #eef2f7; color: #4a5a72;
    padding: 1px 8px; border-radius: 999px;
    font-weight: 500; font-size: .72rem;
}
.proy-prog { width: 170px; flex-shrink: 0; }
.proy-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.proy-actions .btn-det-ver { background: transparent; }

.proy-body {
    border-top: 1px solid #f0f4fa;
    padding: .85rem 1rem .85rem 3rem;   /* indentación del cuerpo */
    background: #fafbfd;
}
.proy-descripcion {
    color: #6b7c93; font-size: .85rem;
    margin-bottom: .65rem;
    font-style: italic;
}
.proy-tareas-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .5rem;
    color: #4a5a72;
    font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.btn-ct-mini { padding: .25rem .65rem; font-size: .78rem; }

/* Fila de botones de accion en tablas de listado.
   nowrap a proposito: si no caben, es la columna la que debe ensancharse, no los
   botones caer a una segunda linea (quedaba un boton suelto debajo). */
.ct-row-acciones {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
}
.ct-row-acciones .ct-acc-sep {
    width: 1px;
    align-self: stretch;
    background: #e5e9f0;
    margin: .15rem .2rem;
}
html[data-theme="dark"] .ct-row-acciones .ct-acc-sep { background: var(--border); }

/* ───── Tarjeta de tarea (anidada) ───── */
.tar-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    margin-bottom: .5rem;
    overflow: hidden;
}
.tar-card[open] { border-color: #cce8f9; }
.tar-card:last-child { margin-bottom: 0; }
.tar-card-head {
    list-style: none;
    cursor: pointer;
    padding: .65rem .85rem;
    display: flex; align-items: center; gap: .65rem;
    user-select: none;
    transition: background .12s;
}
.tar-card-head::-webkit-details-marker { display: none; }
.tar-card-head:hover { background: #f9fbff; }
.tar-chev {
    color: #6b7c93;
    transition: transform .15s;
    flex-shrink: 0;
    font-size: .85rem;
}
.tar-card[open] > .tar-card-head .tar-chev { transform: rotate(90deg); color: var(--v3-accent, #00A0E3); }
.tar-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fbbf24; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.tar-info { flex: 1; min-width: 0; }
.tar-name {
    font-size: .9rem; color: #1a2942;
    display: flex; align-items: center; gap: .3rem;
    flex-wrap: wrap;
}
.tar-meta {
    display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap;
    margin-top: .2rem;
    color: #6b7c93;
    font-size: .75rem;
}
.tar-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.tar-badge-count {
    background: #eef2f7; color: #4a5a72;
    padding: 1px 7px; border-radius: 999px;
    font-weight: 500; font-size: .68rem;
}
.tar-prog { width: 150px; flex-shrink: 0; }
.tar-actions { display: flex; gap: .15rem; flex-shrink: 0; }
.tar-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: .85rem;
    padding: .5rem 0;
}

.tar-body {
    border-top: 1px solid #f0f4fa;
    padding: .65rem .85rem .65rem 2.5rem;
    background: #f7f9fc;
}

/* ───── Tarjeta de actividad (más anidada) ───── */
.act-list { display: flex; flex-direction: column; gap: .5rem; }
.act-loading, .act-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: .8rem;
    padding: .4rem 0;
}
.act-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    padding: .55rem .75rem;
    display: flex; align-items: flex-start; gap: .55rem;
    transition: border-color .12s;
}
.act-card:hover { border-color: var(--v3-accent, #00A0E3); }
.act-ico {
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.act-info { flex: 1; min-width: 0; }
.act-name { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .85rem; color: #1a2942; }
.act-name strong { font-weight: 600; }
.act-tipo-tag {
    border: 1px solid #d1dce8;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .68rem;
    background: #fff;
}
.act-meta {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
    margin-top: .15rem;
    color: #6b7c93;
    font-size: .72rem;
}
.act-meta span { display: inline-flex; align-items: center; gap: .2rem; }
.act-coment {
    margin-top: .35rem;
    color: #4a5a72;
    font-size: .78rem;
    background: #f7f9fc;
    border-left: 3px solid #cfd7e3;
    padding: .35rem .6rem;
    border-radius: 4px;
}
/* Botón editar dentro de la tarjeta de actividad */
.act-edit-btn {
    flex-shrink: 0;
    background: transparent;
    align-self: flex-start;
    margin-left: .25rem;
    opacity: .6;
    transition: opacity .15s, background .15s, color .15s;
}
.act-card:hover .act-edit-btn { opacity: 1; }
.act-edit-btn:hover { background: #e8f4fd; color: var(--v3-accent, #00A0E3); }
html[data-theme="dark"] .act-edit-btn:hover { background: var(--acento-bg); color: var(--acento); }

/* Tabs Invitados/Contactos del modal Nueva/Editar Actividad en Proyectos */
.act-tab-disabled {
    opacity: .55;
    cursor: not-allowed;
}
.act-tab-disabled:hover { color: #6b7c93; }

/* Ítems de personas (invitados / contactos) dentro del modal */
.act-persona-item {
    display: flex; align-items: center;
    padding: .55rem .75rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    margin-bottom: .35rem;
    font-size: .85rem;
    color: #1a2942;
}
.act-persona-item:last-child { margin-bottom: 0; }
.act-persona-item i.bi { color: #6b7c93; }
.act-persona-rm {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .35rem;
    border-radius: 4px;
}
.act-persona-rm:hover { background: #fef2f2; color: #dc3545; }

html[data-theme="dark"] .act-persona-item { background: var(--bg-card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .act-persona-item i.bi { color: var(--text-muted); }
html[data-theme="dark"] .act-persona-rm { color: var(--text-muted); }
html[data-theme="dark"] .act-persona-rm:hover { background: rgba(220,53,69,.18); color: #ff7080; }

/* ============================================================
   CENTRO DE AYUDA (Views/Help/Index.cshtml)
   ============================================================ */

/* Buscador en la cabecera */
.hlp-search {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .85rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 7px;
    min-width: 260px;
}
.hlp-search:focus-within { border-color: var(--v3-accent, #00A0E3); }
.hlp-search i { color: #6b7c93; }
.hlp-search input {
    flex: 1; border: 0; outline: none; background: transparent;
    color: #1a2942; font-size: .88rem;
}
.hlp-search input::placeholder { color: #94a3b8; }

/* Layout 2 columnas: TOC + contenido */
.hlp-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    height: calc(100vh - 220px);
    min-height: 500px;
}

/* Índice lateral */
.hlp-toc {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .9rem .85rem;
    overflow-y: auto;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 230px);
}
.hlp-toc-title {
    font-size: .72rem; font-weight: 700;
    color: #6b7c93;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: .65rem;
    padding: 0 .35rem;
}
.hlp-toc nav { display: flex; flex-direction: column; gap: 2px; }
.hlp-toc-item, .hlp-toc-sub {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .7rem;
    border-radius: 6px;
    color: #4a5a72;
    font-size: .85rem;
    text-decoration: none;
    transition: background .12s, color .12s;
    border-left: 3px solid transparent;
}
.hlp-toc-item { font-weight: 600; }
.hlp-toc-sub  { padding-left: 1.6rem; font-size: .8rem; color: #6b7c93; }
.hlp-toc-item:hover, .hlp-toc-sub:hover { background: #f4f7fb; color: var(--v3-accent, #00A0E3); }
.hlp-toc-item.active, .hlp-toc-sub.active {
    background: #e8f4fd;
    color: var(--v3-accent, #00A0E3);
    border-left-color: var(--v3-accent, #00A0E3);
}
.hlp-toc-item i, .hlp-toc-sub i { width: 16px; flex-shrink: 0; }

/* Contenido principal scrollable */
.hlp-content {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    max-height: calc(100vh - 230px);
}
.hlp-section {
    margin-bottom: 2rem;
    scroll-margin-top: 1rem;
}
.hlp-section:last-child { margin-bottom: 0; }
.hlp-section h2 {
    font-size: 1.35rem;
    color: #1a2942;
    margin: 0 0 .65rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #f0f4fa;
}
.hlp-section h2 i { color: var(--v3-accent, #00A0E3); }
.hlp-section h3 {
    font-size: 1.05rem;
    color: #1a2942;
    margin: 1rem 0 .4rem;
}
.hlp-section h3 i { color: var(--v3-accent, #00A0E3); }
.hlp-section h4 {
    font-size: .92rem;
    color: #4a5a72;
    margin: .85rem 0 .35rem;
    font-weight: 600;
}
.hlp-section p, .hlp-section li {
    color: #4a5a72;
    line-height: 1.55;
    font-size: .9rem;
}
.hlp-section ul { padding-left: 1.4rem; margin-bottom: .5rem; }
.hlp-section li { margin-bottom: .3rem; }
.hlp-section code {
    background: #f4f7fb;
    color: #1a2942;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .82rem;
    border: 1px solid #e5e9f0;
}
.hlp-section strong { color: #1a2942; }
.hlp-section em { color: #4a5a72; font-style: italic; }

/* Callouts (info / tip / warning) */
.hlp-callout {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    margin: .85rem 0;
    border-left: 3px solid;
    font-size: .85rem;
}
.hlp-callout i { font-size: 1.05rem; margin-top: .1rem; flex-shrink: 0; }
.hlp-callout-info { background: #e8f4fd; border-left-color: #00A0E3; color: #1a4d6e; }
.hlp-callout-info i { color: #00A0E3; }
.hlp-callout-tip  { background: #fef3c7; border-left-color: #d97706; color: #78350f; }
.hlp-callout-tip i { color: #d97706; }
.hlp-callout-warn { background: #fff7ed; border-left-color: #ea580c; color: #7c2d12; }
.hlp-callout-warn i { color: #ea580c; }
.hlp-callout-error { background: #fdeaea; border-left-color: #d9534f; color: #842029; }
.hlp-callout-error i { color: #d9534f; }

/* Editor de factura — subtítulos de sección */
.fc-cab-sec { font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:#94a3b8; font-weight:600; margin-bottom:8px; }

/* Diseñador visual de factura */
.df-wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.df-list { flex:0 0 200px; max-width:200px; }
.df-item { padding:9px 12px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:6px; cursor:pointer; font-size:13px; background:#fff; transition:background .12s,border-color .12s; }
.df-item:hover { background:#f1f5f9; }
.df-item--sel { border-color:#00A0E3; background:#e8f4fd; font-weight:600; }
.df-badge-def { display:inline-block; background:#16a34a; color:#fff; border-radius:8px; padding:1px 7px; font-size:10px; font-weight:600; margin-left:4px; }
.df-form { flex:0 0 320px; max-width:320px; }
.df-preview { flex:1; min-width:300px; }
.df-group { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px; margin-bottom:12px; }
.df-group-title { font-weight:600; color:#1a2942; margin-bottom:8px; font-size:14px; }
.df-field { display:block; margin-bottom:10px; }
.df-field span { display:block; font-size:12px; color:#64748b; margin-bottom:3px; }
.df-field input[type=text], .df-field textarea { width:100%; padding:7px 9px; border:1px solid #cbd5e1; border-radius:7px; font-size:13px; }
.df-check { display:block; padding:3px 0; font-size:13px; cursor:pointer; }
.df-check input { margin-right:6px; }
.btn-link-sm { background:none; border:none; color:#d9534f; font-size:12px; cursor:pointer; padding:4px 0; }
#dfColor { width:60px; height:34px; border:1px solid #cbd5e1; border-radius:7px; cursor:pointer; }
.df-preview-label { font-weight:600; color:#64748b; margin-bottom:8px; }
.df-paper { background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.08); padding:28px; min-height:400px; }
@@media (max-width:820px){ .df-form { flex:1 1 100%; max-width:none; } }

/* Indicador de color (verde/ámbar/rojo en barra de progreso) */
.hlp-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: middle;
}
.hlp-dot-ok   { background: #16a34a; }
.hlp-dot-warn { background: #f59e0b; }
.hlp-dot-over { background: #dc2626; }

/* FAQ — bloques colapsables */
.hlp-faq {
    background: #f9fbff;
    border: 1px solid #e5e9f0;
    border-radius: 7px;
    margin-bottom: .5rem;
    overflow: hidden;
}
.hlp-faq summary {
    cursor: pointer;
    padding: .65rem .9rem;
    font-weight: 600;
    color: #1a2942;
    font-size: .88rem;
    list-style: none;
    display: flex; align-items: center; gap: .5rem;
    user-select: none;
}
.hlp-faq summary::-webkit-details-marker { display: none; }
.hlp-faq summary::before {
    content: '\F285';  /* bi-chevron-right */
    font-family: "bootstrap-icons";
    font-size: .8rem;
    color: #6b7c93;
    transition: transform .15s;
}
.hlp-faq[open] summary::before { transform: rotate(90deg); color: var(--v3-accent, #00A0E3); }
.hlp-faq[open] summary { background: #fff; border-bottom: 1px solid #f0f4fa; }
.hlp-faq p {
    padding: .65rem .9rem .85rem 2.1rem;
    margin: 0;
    color: #4a5a72;
    font-size: .85rem;
    line-height: 1.55;
}

.hlp-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
    font-style: italic;
}

/* Responsive: en móviles colapsamos a una columna */
@@media (max-width: 900px) {
    .hlp-layout { grid-template-columns: 1fr; height: auto; }
    .hlp-toc { max-height: 280px; position: static; }
    .hlp-content { max-height: none; }
}

/* Tema oscuro */
html[data-theme="dark"] .hlp-search { background: var(--bg-card); border-color: var(--border-2); }
html[data-theme="dark"] .hlp-search input { color: var(--text); }
html[data-theme="dark"] .hlp-search input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .hlp-search i { color: var(--text-muted); }

html[data-theme="dark"] .hlp-toc { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .hlp-toc-title { color: var(--text-muted); }
html[data-theme="dark"] .hlp-toc-item, html[data-theme="dark"] .hlp-toc-sub { color: var(--text); }
html[data-theme="dark"] .hlp-toc-sub { color: var(--text-muted); }
html[data-theme="dark"] .hlp-toc-item:hover, html[data-theme="dark"] .hlp-toc-sub:hover { background: var(--bg-hover); color: var(--acento); }
html[data-theme="dark"] .hlp-toc-item.active, html[data-theme="dark"] .hlp-toc-sub.active { background: var(--acento-bg); color: var(--acento); border-left-color: var(--acento); }

html[data-theme="dark"] .hlp-content { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .hlp-section h2, html[data-theme="dark"] .hlp-section h3 { color: var(--text); }
html[data-theme="dark"] .hlp-section h2 { border-bottom-color: var(--border); }
html[data-theme="dark"] .hlp-section h4 { color: var(--text-muted); }
html[data-theme="dark"] .hlp-section p, html[data-theme="dark"] .hlp-section li { color: var(--text); }
html[data-theme="dark"] .hlp-section strong { color: var(--text); }
html[data-theme="dark"] .hlp-section em { color: var(--text-muted); }
html[data-theme="dark"] .hlp-section code { background: var(--bg-card-2); color: var(--text); border-color: var(--border-2); }

html[data-theme="dark"] .hlp-callout-info { background: var(--acento-bg); color: var(--text); border-left-color: var(--acento); }
html[data-theme="dark"] .hlp-callout-info i { color: var(--acento); }
html[data-theme="dark"] .hlp-callout-tip { background: rgba(217,119,6,.18); color: var(--text); border-left-color: #d97706; }
html[data-theme="dark"] .hlp-callout-warn { background: rgba(234,88,12,.18); color: var(--text); border-left-color: #ea580c; }

html[data-theme="dark"] .hlp-faq { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .hlp-faq summary { color: var(--text); }
html[data-theme="dark"] .hlp-faq[open] summary { background: var(--bg-card); border-bottom-color: var(--border); }
html[data-theme="dark"] .hlp-faq p { color: var(--text-muted); }
html[data-theme="dark"] .hlp-no-results { color: var(--text-muted); }

/* ============================================================
   CONFIGURACIÓN — hub principal
   ============================================================ */
.cfg-search {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.cfg-search:focus-within { border-color: var(--v3-accent, #00A0E3); }
.cfg-search i { color: #6b7c93; }
.cfg-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: .9rem; color: #1a2942; }
.cfg-search input::placeholder { color: #94a3b8; }

.cfg-group { margin-bottom: 2rem; }
.cfg-group-label {
    color: #6b7c93;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: .15rem;
}
.cfg-group-desc { color: #6b7c93; font-size: .85rem; margin-bottom: .85rem; }
.cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.cfg-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    text-decoration: none;
    color: #1a2942;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    display: block;
}
.cfg-card:hover { border-color: var(--v3-accent, #00A0E3); box-shadow: 0 6px 18px rgba(0,160,227,.10); transform: translateY(-1px); }
.cfg-card-active:hover { box-shadow: 0 8px 24px rgba(0,160,227,.16); }
.cfg-card-disabled { color: #1a2942; }
.cfg-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #e8f4fd;
    color: var(--v3-accent, #00A0E3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    margin-bottom: .65rem;
}
.cfg-card-title { font-weight: 600; font-size: .95rem; color: #1a2942; margin-bottom: .2rem; }
.cfg-card-desc { color: #6b7c93; font-size: .82rem; line-height: 1.45; }
.cfg-card-action { color: var(--v3-accent, #00A0E3); font-size: .8rem; font-weight: 600; margin-top: .6rem; }
.cfg-card-lock { position: absolute; top: .85rem; right: .9rem; color: #94a3b8; font-size: .85rem; }
.cfg-card-tag {
    position: absolute; top: .85rem; right: .9rem;
    background: #eef2f7; color: #4a5a72;
    border-radius: 999px;
    font-size: .68rem; font-weight: 600;
    padding: 2px 8px;
}

html[data-theme="dark"] .cfg-search { background: var(--bg-card); border-color: var(--border-2); }
html[data-theme="dark"] .cfg-search input { color: var(--text); }
html[data-theme="dark"] .cfg-search input::placeholder { color: var(--text-dim); }
html[data-theme="dark"] .cfg-search i { color: var(--text-muted); }
html[data-theme="dark"] .cfg-group-label, html[data-theme="dark"] .cfg-group-desc { color: var(--text-muted); }
html[data-theme="dark"] .cfg-card { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .cfg-card:hover { border-color: var(--acento); }
html[data-theme="dark"] .cfg-card-icon { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .cfg-card-title { color: var(--text); }
html[data-theme="dark"] .cfg-card-desc { color: var(--text-muted); }
html[data-theme="dark"] .cfg-card-action { color: var(--acento); }
html[data-theme="dark"] .cfg-card-tag { background: var(--bg-card-2); color: var(--text-muted); }

/* ============================================================
   PIPELINES — editor
   ============================================================ */
.pip-tabs {
    display: flex; gap: .35rem;
    border-bottom: 2px solid #e5e9f0;
    margin-bottom: 1rem;
    overflow-x: auto;
}
.pip-tab {
    background: transparent;
    border: 0;
    padding: .55rem 1rem;
    color: #6b7c93;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
}
.pip-tab:hover { color: var(--v3-accent, #00A0E3); }
.pip-tab.active { color: var(--v3-accent, #00A0E3); border-bottom-color: var(--v3-accent, #00A0E3); }

.pip-editor { display: flex; flex-direction: column; gap: 1rem; }
.pip-empty {
    background: #fff;
    border: 1px dashed #cfd7e3;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
}
.pip-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1rem 1.15rem;
}
.pip-card-head { display: flex; align-items: flex-end; gap: .75rem; margin-bottom: .85rem; flex-wrap: wrap; }
.pip-card-title { font-weight: 600; color: #1a2942; flex: 1; font-size: 1rem; }
.pip-card-foot { color: #6b7c93; font-size: .78rem; margin-top: .85rem; }
.pip-field { display: flex; flex-direction: column; }
.pip-field label { font-size: .72rem; font-weight: 600; color: #6b7c93; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.pip-input {
    padding: .45rem .7rem;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    font-size: .9rem;
    color: #1a2942;
    background: #fff;
}
.pip-input:focus { outline: none; border-color: var(--v3-accent, #00A0E3); }

.pip-etapas { display: flex; flex-direction: column; gap: .5rem; }
.pip-etapa {
    display: flex; align-items: center; gap: .55rem;
    background: #f9fbff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .45rem .55rem;
}
.pip-etapa-drag-active { opacity: .5; }
.pip-etapa-drag { cursor: grab; color: #94a3b8; padding: .25rem; }
.pip-etapa-drag:active { cursor: grabbing; }
.pip-etapa-color { width: 36px; height: 28px; border: 1px solid #e5e9f0; border-radius: 4px; cursor: pointer; padding: 1px; background: #fff; }
.pip-etapa-nombre { flex: 1 1 auto; min-width: 0; padding: .35rem .6rem; border: 1px solid #e5e9f0; border-radius: 6px; font-size: .9rem; color: #1a2942; }
/* Los controles de la derecha llevan ancho FIJO para que formen columnas. Sin esto
   cada fila los coloca donde le toca: el <select> se ajusta al texto de su opción
   ("Abierta" no mide lo que "Perdida") y el contador de usos sólo aparece en algunas
   filas, con lo que todo lo que va detrás se desplaza. */
.pip-etapa-prob { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; width: 92px; justify-content: flex-end; }
.pip-etapa-prob input { width: 62px; padding: .35rem .4rem; border: 1px solid #e5e9f0; border-radius: 6px; text-align: right; font-size: .88rem; }
.pip-etapa-prob span { color: #6b7c93; font-size: .88rem; width: 14px; }
.pip-etapa-tipo { flex: 0 0 auto; width: 112px; padding: .35rem .5rem; border: 1px solid #e5e9f0; border-radius: 6px; background: #fff; font-size: .82rem; }
.pip-etapa-presup {
    display: inline-flex; align-items: center; gap: .3rem;
    flex: 0 0 auto; width: 136px;
    padding: .3rem .55rem; border: 1px solid #e5e9f0; border-radius: 6px;
    background: #fff; font-size: .78rem; color: #6b7c93; cursor: pointer; white-space: nowrap;
}
.pip-etapa-presup input { margin: 0; cursor: pointer; }
.pip-etapa-presup i { font-size: .9rem; }
.pip-etapa-presup:has(input:checked) { background: #e8f6ee; border-color: #16a34a; color: #15803d; }
html[data-theme="dark"] .pip-etapa-presup { background: var(--bg-card-2); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .pip-etapa-presup:has(input:checked) { background: rgba(22,163,74,.18); border-color: #16a34a; color: #4ade80; }
.pip-etapa-btn {
    background: transparent;
    border: 0;
    color: #94a3b8;
    flex: 0 0 auto;
    width: 34px;
    padding: .35rem .5rem;
    border-radius: 4px;
    cursor: pointer;
}
.pip-etapa-rm:hover { background: #fef2f2; color: #dc3545; }
.pip-etapa-rm[disabled] { opacity: .35; cursor: not-allowed; }
.pip-etapa-rm[disabled]:hover { background: transparent; color: #94a3b8; }
.pip-etapa-usos {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    flex: 0 0 auto; width: 46px;
    background: #e8f4fd; color: var(--v3-accent, #00A0E3);
    padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
}
/* Fila sin oportunidades: ocupa el hueco pero no se ve. */
.pip-etapa-usos--vacio { background: transparent; }

/* Codigo de la oportunidad en la tarjeta del tablero. Monoespaciado para que los
   codigos, que miden todos igual, se lean en columna de un vistazo. */
.op-card-codigo {
    font-family: Consolas, "Courier New", monospace;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    color: #94a3b8; margin-bottom: .15rem;
}
html[data-theme="dark"] .op-card-codigo { color: var(--text-muted); }
.mo-codigo {
    font-family: Consolas, "Courier New", monospace;
    font-size: .78rem; font-weight: 700;
    background: #f1f5f9; color: #64748b;
    border-radius: 5px; padding: .1rem .4rem; margin-left: .45rem;
}
html[data-theme="dark"] .mo-codigo { background: var(--bg-card-2); color: var(--text-muted); }
/* Margen bruto en la tarjeta: al lado del importe pero claramente secundario, que
   el numero grande sigue siendo lo que se factura. */
.op-card-margen {
    font-size: .72rem; font-weight: 600; color: #15803d;
    background: #e8f6ee; border-radius: 5px;
    padding: .05rem .35rem; margin-left: .35rem; white-space: nowrap;
}
html[data-theme="dark"] .op-card-margen { background: rgba(22,163,74,.18); color: #4ade80; }

/* En pantalla estrecha la fila se parte en dos lineas antes que aplastar los
   controles: mejor dos filas legibles que una ilegible. */
@media (max-width: 900px) {
    .pip-etapa { flex-wrap: wrap; }
    .pip-etapa-nombre { flex: 1 1 100%; order: -1; }
}
.pip-etapa-usos i { font-size: .7rem; }
html[data-theme="dark"] .pip-etapa-usos { background: var(--acento-bg); color: var(--acento); }

.pip-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.pip-btn-danger { color: #dc3545; border-color: #fde2e2 !important; }
.pip-btn-danger:hover { background: #fef2f2; }

html[data-theme="dark"] .pip-tabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .pip-tab { color: var(--text-muted); }
html[data-theme="dark"] .pip-tab.active { color: var(--acento); border-bottom-color: var(--acento); }
html[data-theme="dark"] .pip-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .pip-card-title { color: var(--text); }
html[data-theme="dark"] .pip-field label { color: var(--text-muted); }
html[data-theme="dark"] .pip-input { background: var(--bg-input); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .pip-etapa { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .pip-etapa-nombre, html[data-theme="dark"] .pip-etapa-prob input, html[data-theme="dark"] .pip-etapa-tipo {
    background: var(--bg-input); color: var(--text); border-color: var(--border-2);
}
html[data-theme="dark"] .pip-empty { background: var(--bg-card); border-color: var(--border-2); color: var(--text-muted); }

/* Pipeline del sistema — sólo lectura */
.pip-sistema-banner {
    margin-bottom: 1rem;
    display: flex; align-items: center;
}
.pip-card--sistema { background: #f9fbff; border-style: dashed; }
.pip-card--sistema .pip-input,
.pip-card--sistema .pip-etapa-nombre,
.pip-card--sistema .pip-etapa-prob input,
.pip-card--sistema .pip-etapa-tipo,
.pip-card--sistema .pip-etapa-color {
    background: #f0f4fa;
    color: #6b7c93;
    cursor: not-allowed;
}
.pip-etapas--ro .pip-etapa { background: #f7f9fc; }
html[data-theme="dark"] .pip-card--sistema { background: var(--bg-card-2); border-style: dashed; }
html[data-theme="dark"] .pip-card--sistema .pip-input,
html[data-theme="dark"] .pip-card--sistema .pip-etapa-nombre,
html[data-theme="dark"] .pip-card--sistema .pip-etapa-prob input,
html[data-theme="dark"] .pip-card--sistema .pip-etapa-tipo,
html[data-theme="dark"] .pip-card--sistema .pip-etapa-color { background: var(--bg-card); color: var(--text-muted); }
html[data-theme="dark"] .pip-etapas--ro .pip-etapa { background: var(--bg-card); }

/* ============================================================
   OPORTUNIDADES en Dashboard CRM e Informes
   ============================================================ */

.op-dash-section { margin-top: 1.25rem; }
.op-dash-body    { padding: 1rem; }
.dash-link-tiny {
    color: var(--v3-accent, #00A0E3);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex; align-items: center;
}
.dash-link-tiny:hover { text-decoration: underline; }

/* KPIs */
.op-dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.op-dash-kpi {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .75rem .85rem;
}
.op-dash-kpi-lab {
    color: #6b7c93;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.op-dash-kpi-val { font-size: 1.35rem; font-weight: 700; color: #1a2942; line-height: 1; }
.op-dash-kpi-val--ok  { color: #16a34a; }
.op-dash-kpi-val--acc { color: var(--v3-accent, #00A0E3); }
.op-dash-kpi-sub { color: #6b7c93; font-size: .72rem; margin-top: .2rem; }

/* Grid funnel + top */
.op-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@@media (max-width: 900px) { .op-dash-grid { grid-template-columns: 1fr; } }
.op-dash-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .9rem 1rem;
}
.op-dash-card-title {
    font-weight: 600;
    color: #4a5a72;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .6rem;
    display: flex; align-items: center; gap: .35rem;
}
.op-dash-card-title i { color: var(--v3-accent, #00A0E3); }

/* Funnel */
.op-dash-funnel { display: flex; flex-direction: column; gap: .4rem; }
.op-dash-fnl-row {
    display: grid;
    grid-template-columns: 130px 1fr 36px 80px;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}
.op-dash-fnl-name {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #1a2942;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-dash-fnl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.op-dash-fnl-track { background: #f4f7fb; height: 8px; border-radius: 4px; overflow: hidden; }
.op-dash-fnl-fill  { height: 100%; border-radius: 4px; transition: width .25s; }
.op-dash-fnl-count { text-align: right; color: #4a5a72; font-weight: 600; }
.op-dash-fnl-imp   { text-align: right; color: #6b7c93; font-size: .78rem; }

/* Top próximas a cerrar */
.op-dash-top { display: flex; flex-direction: column; gap: .45rem; }
.op-dash-top-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .65rem;
    background: #f9fbff;
    border: 1px solid #e5e9f0;
    border-radius: 7px;
}
.op-dash-top-info { flex: 1; min-width: 0; }
.op-dash-top-title { font-weight: 600; color: #1a2942; font-size: .85rem; line-height: 1.25; }
.op-dash-top-meta  {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-top: .2rem;
    color: #6b7c93; font-size: .72rem;
}
.op-dash-top-meta span { display: inline-flex; align-items: center; gap: .2rem; }
.op-dash-top-imp {
    font-weight: 700; color: #1a2942;
    font-size: .92rem;
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1;
    flex-shrink: 0;
}
.op-dash-top-imp small { color: var(--v3-accent, #00A0E3); font-size: .7rem; font-weight: 600; margin-top: .15rem; }

.op-dash-empty {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
    font-size: .82rem;
}

/* Tema oscuro */
html[data-theme="dark"] .op-dash-kpi { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .op-dash-kpi-val { color: var(--text); }
html[data-theme="dark"] .op-dash-kpi-lab, html[data-theme="dark"] .op-dash-kpi-sub { color: var(--text-muted); }
html[data-theme="dark"] .op-dash-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .op-dash-card-title { color: var(--text-muted); }
html[data-theme="dark"] .op-dash-card-title i { color: var(--acento); }
html[data-theme="dark"] .op-dash-fnl-name { color: var(--text); }
html[data-theme="dark"] .op-dash-fnl-track { background: var(--bg-card-2); }
html[data-theme="dark"] .op-dash-fnl-count { color: var(--text); }
html[data-theme="dark"] .op-dash-fnl-imp { color: var(--text-muted); }
html[data-theme="dark"] .op-dash-top-row { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .op-dash-top-title, html[data-theme="dark"] .op-dash-top-imp { color: var(--text); }
html[data-theme="dark"] .op-dash-top-meta { color: var(--text-muted); }
html[data-theme="dark"] .op-dash-top-imp small { color: var(--acento); }
html[data-theme="dark"] .op-dash-empty { color: var(--text-muted); }
html[data-theme="dark"] .dash-link-tiny { color: var(--acento); }

/* ============================================================
   LISTAS Y SEGMENTOS
   ============================================================ */

/* Ambito Todas / Mis listas */
.ls-ambito {
    display: inline-flex;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
}
.ls-ambito-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .7rem;
    border-radius: 5px;
    font-size: .85rem;
    color: #6b7c93;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ls-ambito-btn input { display: none; }
.ls-ambito-btn.active { background: #e8f4fd; color: var(--v3-accent, #00A0E3); font-weight: 600; }
html[data-theme="dark"] .ls-ambito { background: var(--bg-card); border-color: var(--border-2); }
html[data-theme="dark"] .ls-ambito-btn { color: var(--text-muted); }
html[data-theme="dark"] .ls-ambito-btn.active { background: var(--acento-bg); color: var(--acento); }

/* Listado */
.ls-table tbody tr { cursor: pointer; }
.ls-name { display: flex; align-items: flex-start; gap: .65rem; }
.ls-name-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ls-sistema-badge {
    display: inline-flex; align-items: center;
    background: #eef2f7;
    color: #4a5a72;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    margin-left: .35rem;
}
.ls-tipo-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.ls-tipo-din { background: #e8f4fd; color: #0284c7; }
.ls-tipo-est { background: #fef3c7; color: #b45309; }
.ls-ent-pill { background: #f4f7fb; color: #4a5a72; }

html[data-theme="dark"] .ls-sistema-badge { background: var(--bg-card-2); color: var(--text-muted); }
html[data-theme="dark"] .ls-tipo-din { background: rgba(2,132,199,.22); color: #38bdf8; }
html[data-theme="dark"] .ls-tipo-est { background: rgba(180,83,9,.22);  color: #fbbf24; }
html[data-theme="dark"] .ls-ent-pill { background: var(--bg-card-2); color: var(--text-muted); }

/* Detalle de lista */
.ls-det-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.ls-det-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ls-det-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ls-det-info { flex: 1; min-width: 0; }
.ls-det-titulo { font-size: 1.5rem; font-weight: 700; color: #1a2942; margin: 0; }
.ls-det-desc   { color: #6b7c93; font-size: .9rem; margin-top: .15rem; }
.ls-det-tipo   { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ls-det-meta   { color: #6b7c93; font-size: .82rem; margin-top: .65rem; display: flex; flex-wrap: wrap; gap: .35rem; }

html[data-theme="dark"] .ls-det-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ls-det-titulo { color: var(--text); }
html[data-theme="dark"] .ls-det-desc, html[data-theme="dark"] .ls-det-meta { color: var(--text-muted); }

/* Barra de acciones */
.ls-bulk-bar {
    background: #e8f4fd;
    border: 1px solid #cce8f9;
    border-radius: 8px;
    padding: .55rem .85rem;
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ls-bulk-count { color: var(--v3-accent, #00A0E3); font-size: .9rem; }
.ls-bulk-btn {
    background: transparent;
    border: 0;
    color: var(--v3-accent, #00A0E3);
    padding: .3rem .65rem;
    font-size: .85rem;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
}
.ls-bulk-btn:hover { background: rgba(255,255,255,.6); }
.ls-bulk-btn-danger { color: #dc2626; }
.ls-bulk-btn-danger:hover { background: #fef2f2; }

html[data-theme="dark"] .ls-bulk-bar { background: var(--acento-bg); border-color: var(--acento); }
html[data-theme="dark"] .ls-bulk-btn { color: var(--acento); }

/* Barra Añadir miembros */
.ls-add-bar { margin-bottom: 1rem; display: flex; justify-content: flex-end; }

/* Búsqueda de candidatos */
.ls-add-resultados {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    padding: .25rem;
    margin-bottom: 1rem;
}
.ls-add-row {
    padding: .45rem .65rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s;
}
.ls-add-row:hover { background: #f4f7fb; }
.ls-add-row.active { background: #e8f4fd; color: var(--v3-accent, #00A0E3); }
.ls-add-seleccionados {
    margin-top: .5rem;
    font-size: .82rem;
    color: #6b7c93;
}
.ls-add-seleccionados strong { color: #1a2942; }

html[data-theme="dark"] .ls-add-resultados { border-color: var(--border-2); }
html[data-theme="dark"] .ls-add-row:hover { background: var(--bg-hover); }
html[data-theme="dark"] .ls-add-row.active { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .ls-add-seleccionados { color: var(--text-muted); }
html[data-theme="dark"] .ls-add-seleccionados strong { color: var(--text); }

/* Wizard Nueva lista */
.lsw-step-label { color: #6b7c93; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }
.lsw-progress {
    background: #e5e9f0;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.lsw-progress-bar { background: var(--v3-accent, #00A0E3); height: 100%; transition: width .25s; }
.lsw-section-label { font-size: .72rem; font-weight: 700; color: #6b7c93; letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: .4rem; }

.lsw-tipo-grid, .lsw-entidad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}
.lsw-tipo-card, .lsw-ent-card {
    background: #fff;
    border: 2px solid #e5e9f0;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.lsw-tipo-card:hover, .lsw-ent-card:hover { border-color: var(--v3-accent, #00A0E3); background: #f9fbff; }
.lsw-tipo-card.active, .lsw-ent-card.active { border-color: var(--v3-accent, #00A0E3); background: #e8f4fd; }
.lsw-tipo-head {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .4rem;
}
.lsw-tipo-head i { color: var(--v3-accent, #00A0E3); font-size: 1.15rem; }
.lsw-tipo-head strong { color: #1a2942; font-size: 1rem; }
.lsw-tipo-tag {
    margin-left: auto;
    background: #fef3c7;
    color: #b45309;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
}
.lsw-tipo-desc { color: #6b7c93; font-size: .85rem; line-height: 1.4; }

.lsw-ent-card { text-align: center; }
.lsw-ent-ico {
    width: 48px; height: 48px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto .55rem;
}
.lsw-ent-card strong { display: block; color: #1a2942; font-size: .92rem; }
.lsw-ent-card small  { display: block; color: #6b7c93; font-size: .76rem; margin-top: .15rem; }

.lsw-est-card {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed #cfd7e3;
    border-radius: 10px;
    background: #f9fbff;
}
.lsw-est-ico { font-size: 2rem; color: #b45309; margin-bottom: .5rem; }
.lsw-est-titulo { font-weight: 700; color: #1a2942; font-size: 1.05rem; }
.lsw-est-desc   { color: #6b7c93; font-size: .85rem; margin-top: .25rem; }

html[data-theme="dark"] .lsw-step-label, html[data-theme="dark"] .lsw-section-label { color: var(--text-muted); }
html[data-theme="dark"] .lsw-progress { background: var(--bg-card-2); }
html[data-theme="dark"] .lsw-progress-bar { background: var(--acento); }
html[data-theme="dark"] .lsw-tipo-card, html[data-theme="dark"] .lsw-ent-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .lsw-tipo-card:hover, html[data-theme="dark"] .lsw-ent-card:hover { background: var(--bg-hover); border-color: var(--acento); }
html[data-theme="dark"] .lsw-tipo-card.active, html[data-theme="dark"] .lsw-ent-card.active { background: var(--acento-bg); border-color: var(--acento); }
html[data-theme="dark"] .lsw-tipo-head strong, html[data-theme="dark"] .lsw-ent-card strong { color: var(--text); }
html[data-theme="dark"] .lsw-tipo-head i { color: var(--acento); }
html[data-theme="dark"] .lsw-tipo-desc, html[data-theme="dark"] .lsw-ent-card small, html[data-theme="dark"] .lsw-est-desc { color: var(--text-muted); }
html[data-theme="dark"] .lsw-tipo-tag { background: rgba(180,83,9,.22); color: #fbbf24; }
html[data-theme="dark"] .lsw-est-card { background: var(--bg-card); border-color: var(--border-2); }
html[data-theme="dark"] .lsw-est-titulo { color: var(--text); }

/* Rule builder */
.lsw-reglas-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .5rem;
}
.lsw-coincidencias {
    background: #e8f4fd;
    color: var(--v3-accent, #00A0E3);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.lsw-nivel {
    background: #f9fbff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .65rem;
    margin-bottom: .6rem;
}
.lsw-nivel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .55rem;
}
.lsw-comb {
    display: inline-flex;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}
.lsw-comb-btn {
    background: transparent;
    border: 0;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: #6b7c93;
    cursor: pointer;
}
.lsw-comb-btn.active { background: var(--v3-accent, #00A0E3); color: #fff; }
.lsw-cond-count { color: #6b7c93; font-size: .78rem; }
.lsw-empty { color: #94a3b8; font-style: italic; text-align: center; padding: .85rem 0; font-size: .85rem; }
.lsw-nivel-body > .lsw-nivel { background: #fff; }
.lsw-cond {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 32px;
    gap: .4rem;
    margin-bottom: .35rem;
}
.lsw-cond-campo, .lsw-cond-op, .lsw-cond-val {
    padding: .4rem .6rem;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    font-size: .85rem;
    background: #fff;
}
.lsw-cond-rm {
    background: transparent;
    border: 0;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.lsw-cond-rm:hover { background: #fef2f2; color: #dc2626; }
.lsw-nivel-actions { display: flex; gap: .85rem; margin-top: .35rem; }
.lsw-link {
    background: transparent;
    border: 0;
    color: var(--v3-accent, #00A0E3);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; gap: .25rem;
}
.lsw-link:hover { text-decoration: underline; }

html[data-theme="dark"] .lsw-coincidencias { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .lsw-nivel { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .lsw-nivel-body > .lsw-nivel { background: var(--bg-card); }
html[data-theme="dark"] .lsw-comb { background: var(--bg-card); border-color: var(--border-2); }
html[data-theme="dark"] .lsw-comb-btn { color: var(--text-muted); }
html[data-theme="dark"] .lsw-comb-btn.active { background: var(--acento); color: #fff; }
html[data-theme="dark"] .lsw-cond-count, html[data-theme="dark"] .lsw-empty { color: var(--text-muted); }
html[data-theme="dark"] .lsw-cond-campo, html[data-theme="dark"] .lsw-cond-op, html[data-theme="dark"] .lsw-cond-val { background: var(--bg-input); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .lsw-link { color: var(--acento); }

/* Tipo/Entidad bloqueados en edición */
.lsw-tipo-card.locked, .lsw-ent-card.locked { opacity: .6; cursor: not-allowed; }
.lsw-tipo-card.locked.active, .lsw-ent-card.locked.active { opacity: 1; }
.lsw-tipo-card.locked:not(.active), .lsw-ent-card.locked:not(.active) { background: #f4f7fb !important; }
html[data-theme="dark"] .lsw-tipo-card.locked:not(.active), html[data-theme="dark"] .lsw-ent-card.locked:not(.active) { background: var(--bg-card-2) !important; }

/* Botón eliminar grupo en el rule builder */
.lsw-grupo-rm {
    background: transparent;
    border: 0;
    color: #94a3b8;
    padding: .2rem .5rem;
    margin-left: .35rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.lsw-grupo-rm:hover { background: #fef2f2; color: #dc2626; }
html[data-theme="dark"] .lsw-grupo-rm { color: var(--text-muted); }
html[data-theme="dark"] .lsw-grupo-rm:hover { background: rgba(220,38,38,.18); color: #ff7080; }

/* Diferenciar visualmente grupos anidados */
.lsw-nivel-grupo { border-left: 3px solid var(--v3-accent, #00A0E3); }
html[data-theme="dark"] .lsw-nivel-grupo { border-left-color: var(--acento); }

/* Toolbar superior del detalle */
.ls-det-toolbar {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .5rem;
}

/* Kebab de acciones por fila en el listado de listas */
.ls-kebab-wrap { display: inline-block; }
.ls-kebab-btn {
    background: transparent;
    border: 0;
    color: #6b7c93;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ls-kebab-btn:hover { background: #eef2f7; color: var(--v3-accent, #00A0E3); }
.ls-kebab-btn[aria-expanded="true"] { background: #e8f4fd; color: var(--v3-accent, #00A0E3); }
.ls-kebab-danger { color: #dc2626 !important; }
.ls-kebab-danger:hover { background: #fef2f2 !important; }
html[data-theme="dark"] .ls-kebab-btn { color: var(--text-muted); }
html[data-theme="dark"] .ls-kebab-btn:hover { background: var(--bg-hover); color: var(--acento); }
html[data-theme="dark"] .ls-kebab-btn[aria-expanded="true"] { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .ls-kebab-danger { color: #ff7080 !important; }
html[data-theme="dark"] .ls-kebab-danger:hover { background: rgba(220,38,38,.18) !important; }

/* ============================================================
   OPORTUNIDADES — KPIs, kanban, lista
   ============================================================ */

/* KPIs */
.op-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.op-kpi {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .9rem 1rem;
}
.op-kpi-label {
    color: #6b7c93;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem;
}
.op-kpi-value { font-size: 1.65rem; font-weight: 700; color: #1a2942; line-height: 1; }
.op-kpi-value--ok  { color: #16a34a; }
.op-kpi-value--acc { color: var(--v3-accent, #00A0E3); }
.op-kpi-sub { color: #6b7c93; font-size: .78rem; margin-top: .25rem; }

/* Toolbar específico */
.op-vista-toggle {
    display: inline-flex;
    border: 1px solid #e5e9f0;
    border-radius: 7px;
    overflow: hidden;
    margin-left: auto;
}
.op-vista-btn {
    background: #fff;
    color: #6b7c93;
    border: 0;
    padding: .42rem .8rem;
    font-size: .85rem;
    cursor: pointer;
}
.op-vista-btn.active { background: #e8f4fd; color: var(--v3-accent, #00A0E3); font-weight: 600; }
.op-vista-btn:not(.active):hover { background: #f4f7fb; }

/* Kanban */
.op-kanban {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    /* Las columnas se estiran a la altura de la etapa más alta (sin scroll vertical interno). */
    align-items: stretch;
}
.op-col {
    flex: 0 0 280px;
    background: #f4f7fb;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .6rem;
    /* Sin altura máxima: la columna crece con su contenido; solo hay scroll horizontal en el tablero. */
    display: flex; flex-direction: column;
}
.op-col-over { border-color: var(--v3-accent, #00A0E3); background: #e8f4fd; }
.op-col-head {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .55rem;
    padding: 0 .3rem;
}
.op-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.op-col-name { font-weight: 600; color: #1a2942; font-size: .88rem; flex: 1; }
.op-col-count {
    background: #eef2f7; color: #4a5a72;
    padding: 1px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
}
.op-col-total { font-size: .8rem; color: #6b7c93; font-weight: 600; }
.op-col-body { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.op-col-empty {
    text-align: center;
    padding: 1.5rem .5rem;
    color: #94a3b8;
    font-style: italic;
    font-size: .82rem;
    border: 1px dashed #cfd7e3;
    border-radius: 6px;
}

.op-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .65rem .75rem .55rem;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.op-card:hover { border-color: var(--v3-accent, #00A0E3); box-shadow: 0 4px 12px rgba(0,160,227,.10); }
.op-card-dragging { opacity: .5; }
.op-card-grip {
    position: absolute; top: .35rem; right: .35rem;
    color: #cfd7e3;
    cursor: grab;
    padding: .15rem .25rem;
    border-radius: 4px;
}
.op-card-grip:hover { color: var(--v3-accent, #00A0E3); background: #e8f4fd; }
.op-card-grip:active { cursor: grabbing; }
.op-card-title { font-weight: 600; color: #1a2942; font-size: .88rem; padding-right: 1.2rem; line-height: 1.35; }
.op-card-account { color: #6b7c93; font-size: .76rem; margin-top: .2rem; display: flex; align-items: center; gap: .25rem; }
.op-card-account i { font-size: .75rem; }
.op-card-amount { font-weight: 700; color: #1a2942; font-size: 1rem; margin-top: .4rem; }
.op-card-meta { color: #6b7c93; font-size: .73rem; margin-top: .15rem; }
.op-card-prob { font-weight: 600; color: var(--v3-accent, #00A0E3); }
.op-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .55rem;
}
.op-card-days {
    display: inline-flex; align-items: center; gap: .25rem;
    background: #eef2f7; color: #4a5a72;
    padding: 1px 7px; border-radius: 999px;
    font-size: .68rem; font-weight: 600;
}
.op-card-days--over { background: #fee2e2; color: #b91c1c; }
.op-card-days--soon { background: #fef3c7; color: #92400e; }
.op-card-foot-left { display: inline-flex; align-items: center; gap: .3rem; }
.op-card-acts {
    display: inline-flex; align-items: center; gap: .25rem;
    background: #e0f2fe; color: #0369a1;
    padding: 1px 7px; border-radius: 999px;
    font-size: .68rem; font-weight: 600;
}
html[data-theme="dark"] .op-card-acts { background: rgba(3,105,161,.25); color: #7dd3fc; }

/* Modal oportunidad: pestañas + lista de actividades */
.op-modal-tabs { margin-bottom: 1rem; }
.op-tab-count { display: inline-block; min-width: 18px; text-align: center; font-size: .68rem; font-weight: 700; background: #e0f2fe; color: #0369a1; border-radius: 999px; padding: 0 6px; margin-left: .25rem; }
.op-ficha-link { font-size: .78rem; font-weight: 500; color: #00A0E3; text-decoration: none; margin-left: .5rem; }
.op-ficha-link:hover { text-decoration: underline; }
.op-acts-empty { text-align: center; color: #64748b; padding: 2rem 1rem; }
.op-acts-empty i { font-size: 1.8rem; display: block; margin-bottom: .4rem; color: #94a3b8; }
.op-acts-list { display: flex; flex-direction: column; gap: .5rem; }
.op-act-item { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid #e5e9f0; border-radius: 8px; padding: .6rem .75rem; background: #fff; }
.op-act-ico { flex: 0 0 auto; color: #00A0E3; }
.op-act-title { font-weight: 600; color: #1e293b; }
.op-act-meta { font-size: .8rem; color: #64748b; margin-top: .15rem; }
html[data-theme="dark"] .op-tab-count { background: rgba(3,105,161,.25); color: #7dd3fc; }
html[data-theme="dark"] .op-act-item { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .op-act-title { color: var(--text); }
html[data-theme="dark"] .op-act-meta, html[data-theme="dark"] .op-acts-empty { color: var(--text-muted); }
.op-act-clic { cursor: pointer; transition: border-color .12s, background .12s; }
.op-act-clic:hover { border-color: #00A0E3; background: #f0faff; }
.op-act-chev { margin-left: auto; color: #94a3b8; align-self: center; }
.op-act-volver { background: none; border: 0; color: #00A0E3; font-weight: 600; font-size: .85rem; padding: 0; margin-bottom: .75rem; cursor: pointer; }
.op-act-volver:hover { text-decoration: underline; }
.op-act-det-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; }
.op-act-det-meta { font-size: .82rem; color: #64748b; margin-top: .15rem; }
.op-act-det-sub { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #94a3b8; margin-top: .9rem; margin-bottom: .3rem; }
.op-act-det-coment { white-space: normal; color: #334155; font-size: .88rem; line-height: 1.5; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; padding: .6rem .75rem; }
.op-act-det-row { font-size: .85rem; color: #475569; padding: .15rem 0; }
html[data-theme="dark"] .op-act-clic:hover { border-color: var(--acento); background: var(--bg-hover); }
html[data-theme="dark"] .op-act-det-title { color: var(--text); }
html[data-theme="dark"] .op-act-det-coment { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .op-act-det-row { color: var(--text-muted); }
.op-card-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .65rem;
    font-weight: 700;
}

/* Pill de etapa en la lista */
.op-etapa-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.op-etapa-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Responsive */
@@media (max-width: 900px) {
    .op-kanban { flex-direction: column; }
    .op-col    { flex: 0 0 auto; max-height: none; }
}

html[data-theme="dark"] .op-kpi { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .op-kpi-label, html[data-theme="dark"] .op-kpi-sub { color: var(--text-muted); }
html[data-theme="dark"] .op-kpi-value { color: var(--text); }
html[data-theme="dark"] .op-vista-toggle { border-color: var(--border-2); }
html[data-theme="dark"] .op-vista-btn { background: var(--bg-card); color: var(--text-muted); }
html[data-theme="dark"] .op-vista-btn.active { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .op-col { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .op-col-over { background: var(--bg-hover); border-color: var(--acento); }
html[data-theme="dark"] .op-col-name { color: var(--text); }
html[data-theme="dark"] .op-col-count { background: var(--bg-card); color: var(--text-muted); }
html[data-theme="dark"] .op-col-total { color: var(--text-muted); }
html[data-theme="dark"] .op-col-empty { color: var(--text-muted); border-color: var(--border-2); }
html[data-theme="dark"] .op-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .op-card:hover { border-color: var(--acento); }
html[data-theme="dark"] .op-card-title, html[data-theme="dark"] .op-card-amount { color: var(--text); }
html[data-theme="dark"] .op-card-account, html[data-theme="dark"] .op-card-meta { color: var(--text-muted); }
html[data-theme="dark"] .op-card-prob { color: var(--acento); }
html[data-theme="dark"] .op-card-days { background: var(--bg-card-2); color: var(--text); }

/* ============================================================
   OPORTUNIDADES — modal de confirmación Ganada / Perdida
   ============================================================ */
#modalCierreOp .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
#modalCierreOp .modal-body { text-align: center; }
.op-cierre-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    margin: .25rem auto 1rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
}
.op-cierre-icon--ok { background: #dcfce7; color: #16a34a; }
.op-cierre-icon--ko { background: #fee2e2; color: #dc2626; }
.op-cierre-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a2942;
    margin-bottom: .25rem;
}
.op-cierre-subtitulo {
    color: #6b7c93;
    font-size: .9rem;
    margin-bottom: 1.25rem;
}
#modalCierreOp .nuevo-form-label,
#modalCierreOp .nuevo-form-input,
#modalCierreOp .nuevo-form-textarea { text-align: left; }
#modalCierreOp .nuevo-form-grid { gap: .85rem; }
.op-cierre-prop-actual {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .35rem;
    font-size: .82rem;
    color: #6b7c93;
}
.op-cierre-confirmar { font-weight: 600; }
.op-cierre-ok { background: #16a34a; border-color: #16a34a; }
.op-cierre-ok:hover { background: #15803d; border-color: #15803d; }
.op-cierre-ko { background: #dc2626; border-color: #dc2626; }
.op-cierre-ko:hover { background: #b91c1c; border-color: #b91c1c; }

html[data-theme="dark"] .op-cierre-titulo { color: var(--text); }
html[data-theme="dark"] .op-cierre-subtitulo, html[data-theme="dark"] .op-cierre-prop-actual { color: var(--text-muted); }
html[data-theme="dark"] .op-cierre-icon--ok { background: rgba(22,163,74,.22); color: #4ade80; }
html[data-theme="dark"] .op-cierre-icon--ko { background: rgba(220,38,38,.22); color: #ff7080; }

/* ============================================================
   Confeti — animación al ganar (manejada con Web Animations API
   desde JS, ver lanzarConfeti() en Views/Oportunidad/Index.cshtml)
   ============================================================ */

/* ============================================================
   Toast de celebración
   ============================================================ */
.op-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    padding: .75rem 1rem;
    display: flex; align-items: center; gap: .5rem;
    z-index: 2100;
    font-size: .92rem;
    font-weight: 600;
    color: #1a2942;
}
.op-toast-icon { color: #16a34a; font-size: 1.15rem; }
.op-toast-emoji { font-size: 1.1rem; }
.op-toast-in  { animation: opToastIn  .35s ease forwards; }
.op-toast-out { animation: opToastOut .35s ease forwards; }
@@keyframes opToastIn  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@@keyframes opToastOut { from { transform: translateY(0);   opacity: 1; } to { transform: translateY(20px); opacity: 0; } }

/* Variante "ko" — pérdida */
.op-toast--ko {
    border-color: #fecaca;
    background: #fff;
    color: #1a2942;
}
.op-toast--ko .op-toast-icon { color: #dc2626; }

html[data-theme="dark"] .op-toast { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .op-toast-icon { color: #4ade80; }
html[data-theme="dark"] .op-toast--ko { border-color: rgba(220,38,38,.45); }
html[data-theme="dark"] .op-toast--ko .op-toast-icon { color: #ff7080; }

/* ============================================================
   ADMIN — API KEYS DE IA
   ============================================================ */
.ia-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem; font-weight: 600;
}
.ia-badge-on  { background: #dcfce7; color: #15803d; }
.ia-badge-off { background: #eef2f7; color: #6b7c93; }
.ia-key-mask  {
    background: #f4f7fb; color: #1a2942;
    padding: 2px 7px; border-radius: 4px;
    font-family: ui-monospace, "Cascadia Mono", "Menlo", monospace;
    font-size: .82rem;
    letter-spacing: .03em;
}
html[data-theme="dark"] .ia-badge-on  { background: rgba(22,163,74,.25);   color: #4ade80; }
html[data-theme="dark"] .ia-badge-off { background: var(--bg-card-2);      color: var(--text-muted); }
html[data-theme="dark"] .ia-key-mask  { background: var(--bg-card-2);      color: var(--text); }

/* ============================================================
   ADMIN — ANIMACIONES (cards + switch)
   ============================================================ */
.an-cards {
    display: flex; flex-direction: column;
    gap: .75rem;
    max-width: 760px;
}
.an-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1rem 1.15rem;
    transition: border-color .15s, box-shadow .15s;
}
.an-card:hover { border-color: var(--v3-accent, #00A0E3); }
.an-card-master {
    background: linear-gradient(135deg, #e8f4fd 0%, #f9fbff 100%);
    border-color: #cce8f9;
}
.an-card-head {
    display: flex; align-items: center; gap: 1rem;
}
.an-card-head > i {
    font-size: 1.4rem;
    color: var(--v3-accent, #00A0E3);
    flex-shrink: 0;
}
.an-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.an-card-title { font-weight: 600; color: #1a2942; font-size: .95rem; }
.an-card-desc  { color: #6b7c93;  font-size: .82rem; margin-top: .15rem; line-height: 1.4; }
.an-card-head > div { flex: 1; }

/* Switch grande */
.an-switch {
    display: inline-flex; align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.an-switch input { display: none; }
.an-switch-track {
    width: 44px; height: 24px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    transition: background .2s;
}
.an-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.an-switch input:checked + .an-switch-track { background: var(--v3-accent, #00A0E3); }
.an-switch input:checked + .an-switch-track .an-switch-thumb { left: 22px; }

html[data-theme="dark"] .an-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .an-card-master { background: linear-gradient(135deg, var(--acento-bg) 0%, var(--bg-card-2) 100%); border-color: var(--acento); }
html[data-theme="dark"] .an-card-title { color: var(--text); }
html[data-theme="dark"] .an-card-desc { color: var(--text-muted); }
html[data-theme="dark"] .an-switch-track { background: var(--border-2); }

/* Responsive: ocultar barra de progreso en pantallas estrechas */
@@media (max-width: 900px) {
    .proy-prog, .tar-prog { display: none; }
}

/* ───── Tema oscuro ───── */
html[data-theme="dark"] .proy-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .proy-card[open] { border-color: var(--acento); }
html[data-theme="dark"] .proy-card-head:hover { background: var(--bg-hover); }
html[data-theme="dark"] .proy-name { color: var(--text); }
html[data-theme="dark"] .proy-meta { color: var(--text-muted); }
html[data-theme="dark"] .proy-badge-count { background: var(--bg-card-2); color: var(--text-muted); }
html[data-theme="dark"] .proy-body { background: var(--bg-card-2); border-top-color: var(--border); }
html[data-theme="dark"] .proy-descripcion { color: var(--text-muted); }
html[data-theme="dark"] .proy-tareas-head { color: var(--text-muted); }

html[data-theme="dark"] .tar-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .tar-card[open] { border-color: var(--acento); }
html[data-theme="dark"] .tar-card-head:hover { background: var(--bg-hover); }
html[data-theme="dark"] .tar-name { color: var(--text); }
html[data-theme="dark"] .tar-meta { color: var(--text-muted); }
html[data-theme="dark"] .tar-badge-count { background: var(--bg-card-2); color: var(--text-muted); }
html[data-theme="dark"] .tar-body { background: var(--bg-card-2); border-top-color: var(--border); }
html[data-theme="dark"] .tar-empty, html[data-theme="dark"] .act-empty, html[data-theme="dark"] .act-loading { color: var(--text-muted); }

html[data-theme="dark"] .act-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .act-card:hover { border-color: var(--acento); }
html[data-theme="dark"] .act-name { color: var(--text); }
html[data-theme="dark"] .act-tipo-tag { background: var(--bg-card-2); border-color: var(--border-2); }
html[data-theme="dark"] .act-meta { color: var(--text-muted); }
html[data-theme="dark"] .act-coment { background: var(--bg-card-2); color: var(--text); border-left-color: var(--acento); }

/* Sub-encabezado "+ Nueva actividad" dentro del cuerpo de la tarea */
.tar-actividades-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .5rem;
    color: #4a5a72;
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
html[data-theme="dark"] .tar-actividades-head { color: var(--text-muted); }

/* ============================================================
   FILAS / TARJETAS CLICABLES (Contactos, Empresas)
   ============================================================ */
.ct-row-clickable { cursor: pointer; }
.ct-table tbody tr.ct-row-clickable:hover { background: #f0f7fd; }
.ct-card.ct-row-clickable:hover { border-color: var(--v3-accent, #00A0E3); box-shadow: 0 4px 14px rgba(0,160,227,.12); }
html[data-theme="dark"] .ct-table tbody tr.ct-row-clickable:hover { background: var(--bg-hover); }

/* ============================================================
   MODAL DE DETALLE (Contacto / Empresa) — info + tabs + items
   ============================================================ */
.det-info-grid {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f4fa;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem .85rem;
    background: #f9fbff;
}
.det-info-item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .85rem;
    color: #1a2942;
}
.det-info-item i { color: #6b7c93; font-size: .85rem; }
.det-info-label {
    color: #6b7c93;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}
.det-info-val { color: #1a2942; word-break: break-word; }
.det-info-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: .85rem;
    grid-column: 1/-1;
}
.det-info-coment {
    grid-column: 1/-1;
    background: #fff;
    border-left: 3px solid #cfd7e3;
    border-radius: 4px;
    padding: .5rem .75rem;
    font-size: .82rem;
    color: #4a5a72;
    margin-top: .25rem;
}

.det-seccion-body {
    padding: 1rem 1.25rem;
    min-height: 200px;
}
.det-empty, .det-loading {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 1.5rem 0;
    font-size: .9rem;
}
.det-items { display: flex; flex-direction: column; gap: .5rem; }
.det-item {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    padding: .6rem .75rem;
    display: flex; align-items: flex-start; gap: .65rem;
    transition: border-color .12s;
}
.det-item:hover { border-color: var(--v3-accent, #00A0E3); }
.det-item-info { flex: 1; min-width: 0; }
.det-item-title {
    display: flex; align-items: center; gap: .4rem;
    flex-wrap: wrap;
    font-size: .88rem;
    color: #1a2942;
}
.det-item-title strong { font-weight: 600; }
.det-item-meta {
    display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap;
    margin-top: .2rem;
    color: #6b7c93;
    font-size: .75rem;
}
.det-item-meta span { display: inline-flex; align-items: center; gap: .2rem; }

.det-pager {
    margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px solid #f0f4fa;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
}
.det-pager-info {
    color: #6b7c93;
    font-size: .78rem;
    margin-top: .6rem;
}
.det-pager-nav { display: flex; gap: .25rem; }

html[data-theme="dark"] .det-info-grid { background: var(--bg-card-2); border-bottom-color: var(--border); }
html[data-theme="dark"] .det-info-item, html[data-theme="dark"] .det-info-val { color: var(--text); }
html[data-theme="dark"] .det-info-item i, html[data-theme="dark"] .det-info-label, html[data-theme="dark"] .det-pager-info { color: var(--text-muted); }
html[data-theme="dark"] .det-info-coment { background: var(--bg-card); color: var(--text); border-left-color: var(--acento); }
html[data-theme="dark"] .det-info-empty, html[data-theme="dark"] .det-empty, html[data-theme="dark"] .det-loading { color: var(--text-muted); }
html[data-theme="dark"] .det-item { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .det-item:hover { border-color: var(--acento); }
html[data-theme="dark"] .det-item-title { color: var(--text); }
html[data-theme="dark"] .det-item-meta { color: var(--text-muted); }
html[data-theme="dark"] .det-pager { border-top-color: var(--border); }
html[data-theme="dark"] .ct-pop { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ct-pop-title, html[data-theme="dark"] .ct-pop-input { color: var(--text); }
html[data-theme="dark"] .ct-pop-input { background: var(--bg-input); border-color: var(--border-2); }
html[data-theme="dark"] .ct-pop-field label, html[data-theme="dark"] .ct-pop-header,
html[data-theme="dark"] .ct-pop-link { color: var(--text-muted); }
html[data-theme="dark"] .ct-pop-mini .dropdown-item { color: var(--text); }
html[data-theme="dark"] .ct-pop-mini .dropdown-item:hover { background: var(--bg-hover); }
html[data-theme="dark"] .ct-pop-mini .dropdown-item.active { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .ct-pop-foot { border-top-color: var(--border); }
html[data-theme="dark"] .ct-table-wrapper { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ct-table thead th { background: var(--bg-card); color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="dark"] .ct-table tbody tr { border-bottom-color: var(--border); }
html[data-theme="dark"] .ct-table tbody tr:hover { background: var(--bg-hover); }
html[data-theme="dark"] .ct-table tbody td { color: var(--text); }
html[data-theme="dark"] .ct-empresa, html[data-theme="dark"] .ct-name-text strong { color: var(--text); }
html[data-theme="dark"] .ct-name-text small { color: var(--text-muted); }
html[data-theme="dark"] .ct-link { color: var(--text); }
html[data-theme="dark"] .ct-link i { color: var(--text-muted); }
html[data-theme="dark"] .ct-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ct-card:hover { border-color: var(--acento); }
html[data-theme="dark"] .ct-card-name strong, html[data-theme="dark"] .ct-card-line { color: var(--text); }
html[data-theme="dark"] .ct-card-name small, html[data-theme="dark"] .ct-card-line i { color: var(--text-muted); }
html[data-theme="dark"] .ct-card-line a { color: var(--text); }
html[data-theme="dark"] .ct-pager-info { color: var(--text-muted); }
html[data-theme="dark"] .ct-pager-pp { background: var(--bg-input); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .ct-tb-switch-track { background: var(--bg-hover); }
html[data-theme="dark"] .ct-tb-switch-label { color: var(--text-muted); }
html[data-theme="dark"] .ct-empty { color: var(--text-muted); }


/* ============================================================
   CONTACTOS — PANEL LATERAL (sidepanel desde el listado)
   ============================================================ */

.ct-side-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s;
    z-index: 1050;
}
.ct-side-overlay.is-open { opacity: 1; pointer-events: auto; }

.ct-side-panel {
    position: fixed;
    top: 0; right: 0;
    width: 420px;
    max-width: 95vw;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, .12);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    z-index: 1060;
    display: flex;
    flex-direction: column;
}
.ct-side-panel.is-open { transform: translateX(0); }

.ct-side-head {
    display: flex;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #e5e9f0;
    gap: .75rem;
}
.ct-side-head-main {
    display: flex; gap: .75rem; align-items: center; flex: 1; min-width: 0;
}
.ct-side-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #94a3b8;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}
.ct-side-titlebox { min-width: 0; }
.ct-side-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-side-sub {
    font-size: .82rem; color: #64748b; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-side-close {
    background: transparent; border: 0; padding: .4rem;
    color: #64748b; font-size: 1.1rem; cursor: pointer; border-radius: 6px;
}
.ct-side-close:hover { background: #f1f5f9; color: #0f172a; }

.ct-side-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e9f0;
}
.ct-side-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .7rem .5rem;
    color: #475569;
    font-size: .75rem;
    cursor: pointer;
    transition: all .15s;
}
.ct-side-action i { font-size: 1rem; color: #00A0E3; }
.ct-side-action:hover {
    border-color: #00A0E3;
    color: #00A0E3;
    background: #f0faff;
}

.ct-side-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}
.ct-side-loading, .ct-side-empty, .ct-side-empty-line {
    text-align: center;
    color: #94a3b8;
    padding: 2rem 1rem;
    font-size: .9rem;
}
.ct-side-empty-line { padding: .5rem 0; text-align: left; }

.ct-side-section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .5rem;
}

.ct-side-kvs { display: flex; flex-direction: column; gap: .35rem; }
.ct-side-kv {
    display: grid;
    grid-template-columns: 22px 100px 1fr;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    padding: .2rem 0;
}
.ct-side-kv i { color: #94a3b8; font-size: .95rem; }
.ct-side-kv-label { color: #64748b; }
.ct-side-kv-val { color: #1e293b; text-align: right; word-break: break-word; }
.ct-side-kv-val a { color: #00A0E3; text-decoration: none; }
.ct-side-kv-val a:hover { text-decoration: underline; }

.ct-side-acts { display: flex; flex-direction: column; gap: .5rem; }
.ct-side-act {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .55rem .65rem;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
}
.ct-side-act i { color: #00A0E3; font-size: .95rem; margin-top: .1rem; }
.ct-side-act-title { font-size: .85rem; color: #1e293b; font-weight: 500; }
.ct-side-act-meta { font-size: .75rem; color: #94a3b8; margin-top: 2px; }

.ct-side-foot {
    border-top: 1px solid #e5e9f0;
    padding: 1rem 1.25rem;
}
.ct-side-foot-btn { width: 100%; }

/* Tema oscuro */
html[data-theme="dark"] .ct-side-panel { background: var(--bg-card); }
html[data-theme="dark"] .ct-side-head { border-bottom-color: var(--border); }
html[data-theme="dark"] .ct-side-title { color: var(--text); }
html[data-theme="dark"] .ct-side-sub { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-close { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-close:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .ct-side-actions { border-bottom-color: var(--border); }
html[data-theme="dark"] .ct-side-action { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ct-side-action i { color: var(--acento); }
html[data-theme="dark"] .ct-side-action:hover { background: var(--acento-bg); border-color: var(--acento); color: var(--acento); }
html[data-theme="dark"] .ct-side-section-label { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-kv-label { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-kv-val { color: var(--text); }
html[data-theme="dark"] .ct-side-kv-val a { color: var(--acento); }
html[data-theme="dark"] .ct-side-kv i { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-act { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .ct-side-act-title { color: var(--text); }
html[data-theme="dark"] .ct-side-act-meta { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-act i { color: var(--acento); }
html[data-theme="dark"] .ct-side-foot { border-top-color: var(--border); }
html[data-theme="dark"] .ct-side-loading, html[data-theme="dark"] .ct-side-empty { color: var(--text-muted); }

/* ============================================================
   CONTACTO — FICHA COMPLETA (vista a pantalla completa)
   ============================================================ */

.cf-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.cf-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: #64748b;
}
.cf-breadcrumb a {
    color: #64748b; text-decoration: none;
    display: inline-flex; align-items: center; gap: .25rem;
}
.cf-breadcrumb a:hover { color: #00A0E3; }
.cf-bc-sep { color: #cbd5e1; }
.cf-bc-current { color: #1e293b; font-weight: 600; font-size: 1.1rem; }

.cf-header-actions { display: flex; gap: .5rem; align-items: center; }
.cf-icon-btn { padding: .45rem .55rem; }

/* Grid 3 columnas */
.cf-grid {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1280px) {
    .cf-grid { grid-template-columns: 280px 1fr 280px; }
}
@media (max-width: 1080px) {
    .cf-grid { grid-template-columns: 1fr; }
}

.cf-col { display: flex; flex-direction: column; gap: 1rem; }

/* Cards */
.cf-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.cf-card-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .75rem;
}
.cf-card-title--icon {
    display: flex; align-items: center; gap: .4rem;
    color: #475569;
    font-size: .82rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.cf-card-title--icon i { color: #00A0E3; }
.cf-card-action-btn {
    background: transparent; border: 0; padding: .2rem .4rem;
    color: #94a3b8; cursor: pointer; border-radius: 4px;
    font-size: .85rem;
}
.cf-card-action-btn:hover { background: #f1f5f9; color: #0f172a; }

/* Card identidad */
.cf-card-identidad { text-align: center; }
.cf-avatar-xl {
    width: 80px; height: 80px; border-radius: 50%;
    background: #94a3b8; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1.6rem;
    margin-bottom: .75rem;
}
.cf-nombre {
    margin: 0 0 .15rem;
    font-size: 1.25rem; font-weight: 600; color: #1e293b;
}
.cf-puesto { font-size: .9rem; color: #64748b; margin-bottom: .4rem; }
.cf-empresa-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #00A0E3; text-decoration: none; font-size: .88rem;
    margin-bottom: 1rem;
}
.cf-empresa-link:hover { text-decoration: underline; }

.cf-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .5rem;
}
.cf-action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .8rem .5rem;
    color: #475569;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s;
}
.cf-action-btn i { font-size: 1.1rem; color: #00A0E3; }
.cf-action-btn:hover {
    border-color: #00A0E3;
    color: #00A0E3;
    background: #f0faff;
}

/* KV de información */
.cf-kv-list { display: flex; flex-direction: column; gap: .55rem; }
.cf-kv-row {
    display: grid;
    grid-template-columns: 18px 70px 1fr;
    gap: .55rem;
    align-items: center;
    font-size: .88rem;
}
.cf-kv-ico i { color: #94a3b8; font-size: .92rem; }
.cf-kv-label { color: #64748b; }
.cf-kv-val { color: #1e293b; word-break: break-word; }
.cf-kv-val a { color: #00A0E3; text-decoration: none; }
.cf-kv-val a:hover { text-decoration: underline; }
.cf-empty-line { color: #94a3b8; font-size: .88rem; font-style: italic; }
.cf-loading { color: #94a3b8; font-size: .88rem; }

/* Consentimientos LOPD - toggles */
.cf-lopd-grid { display: flex; flex-direction: column; gap: .6rem; }
.cf-lopd-item {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.cf-lopd-name { font-size: .88rem; color: #1e293b; font-weight: 500; }
.cf-lopd-sub  { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
.cf-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.cf-switch input { display: none; }
.cf-switch span {
    position: absolute; cursor: pointer; inset: 0;
    background: #cbd5e1; border-radius: 20px; transition: .2s;
}
.cf-switch span::before {
    content: ""; position: absolute;
    height: 14px; width: 14px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: .2s;
}
.cf-switch input:checked + span { background: #00A0E3; }
.cf-switch input:checked + span::before { transform: translateX(16px); }

/* Columna central — tabs + acciones */
.cf-card-actividad { padding: 0; }
.cf-tabs {
    display: flex;
    border-bottom: 1px solid #e5e9f0;
    padding: 0 1rem;
    gap: 0;
    overflow-x: auto;
}
.cf-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .85rem .9rem;
    color: #64748b;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.cf-tab:hover { color: #00A0E3; }
.cf-tab.active {
    color: #00A0E3;
    border-bottom-color: #00A0E3;
    font-weight: 600;
}

/* ── Ficha (Empresa/Contacto): pestañas en raíl vertical ── */
.cf-card-tabsv { display: flex; flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; }
.cf-tabs-mobilesel { display: none; }
.cf-tabs--rail {
    flex-direction: column;
    flex: 0 0 200px;
    max-width: 200px;
    border-bottom: 0;
    border-right: 1px solid #e5e9f0;
    padding: .5rem;
    gap: .12rem;
    overflow-x: visible;
    overflow-y: auto;
}
.cf-tabs--rail .cf-tab {
    display: flex;
    align-items: center;
    gap: .35rem;
    text-align: left;
    white-space: normal;
    border-bottom: 0;
    border-left: 3px solid transparent;
    border-radius: 8px;
    padding: .6rem .7rem;
    font-size: .875rem;
}
.cf-tabs--rail .cf-tab i { flex: 0 0 auto; }
.cf-tabs--rail .cf-tab .cf-tab-count { margin-left: auto; }
.cf-tabs--rail .cf-tab:hover { background: #f0faff; }
.cf-tabs--rail .cf-tab.active {
    background: #e0f2fe;
    color: #00A0E3;
    border-left-color: #00A0E3;
    border-bottom-color: transparent;
}
.cf-tabsv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Contraer/expandir el raíl para ganar espacio */
.cf-rail-toggle {
    background: none; border: 0; color: #94a3b8; cursor: pointer;
    padding: .3rem .5rem; align-self: flex-end; border-radius: 8px; line-height: 1;
}
.cf-rail-toggle:hover { background: #f0faff; color: #00A0E3; }
.cf-tabsv--collapsed .cf-tabs--rail { flex: 0 0 52px; max-width: 52px; }
.cf-tabsv--collapsed .cf-tabs--rail .cf-tab { font-size: 0; justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.cf-tabsv--collapsed .cf-tabs--rail .cf-tab i { font-size: 1rem; margin: 0 !important; }
.cf-tabsv--collapsed .cf-tabs--rail .cf-tab .cf-tab-count { display: none; }
.cf-tabsv--collapsed .cf-rail-toggle { align-self: center; }
.cf-tabsv--collapsed .cf-rail-toggle i { display: inline-block; transform: rotate(180deg); }
/* Globo con el nombre de la pestaña cuando el raíl está contraído.
   Vive suelto en <body> (lo coloca Scripts/crm-rail-tips.js): dentro del raíl lo
   recortarían su overflow-y:auto y el overflow:hidden de la tarjeta. */
.cf-rail-tip {
    position: fixed;
    z-index: 2000;
    background: #1f2937;
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    padding: .35rem .6rem;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.cf-rail-tip.is-on { opacity: 1; }
html[data-theme="dark"] .cf-rail-tip { background: #e5e7eb; color: #111827; }

html[data-theme="dark"] .cf-rail-toggle:hover { background: var(--bg-hover); color: var(--acento); }

/* Pantallas estrechas / móvil: el raíl se pliega a un desplegable */
@media (max-width: 820px) {
    .cf-card-tabsv { flex-direction: column; }
    .cf-tabs--rail { display: none; }
    .cf-tabs-mobilesel { display: block; padding: .75rem 1rem; border-bottom: 1px solid #e5e9f0; }
    .cf-tabs-mobilesel select {
        width: 100%;
        padding: .55rem .7rem;
        border: 1px solid #e5e9f0;
        border-radius: 8px;
        background: #fff;
        color: #334155;
        font-size: .9rem;
    }
}

.cf-quick-acciones {
    display: flex; flex-wrap: wrap;
    gap: .4rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.cf-quick-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .8rem;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
}
.cf-quick-btn:hover { border-color: #00A0E3; color: #00A0E3; background: #f0faff; }
.cf-quick-btn--primary {
    margin-left: auto;
    background: #00A0E3;
    color: #fff;
    border-color: #00A0E3;
}
.cf-quick-btn--primary:hover { background: #0088c4; color: #fff; }

.cf-tab-body {
    min-height: 280px;
    padding: 1rem;
}

.cf-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}
.cf-empty-ico {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #f0f9ff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    color: #00A0E3;
    margin-bottom: .75rem;
}
.cf-empty-title { color: #475569; font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.cf-empty-sub { color: #94a3b8; font-size: .85rem; }

/* Items en tabs */
/* Pestaña Ventas (ficha de empresa) */
.ef-ventas-kpis { display: flex; flex-wrap: wrap; gap: .6rem; }
.ef-ventas-kpi {
    flex: 1 1 140px;
    display: flex; align-items: center; gap: .6rem;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 10px; padding: .7rem .8rem;
}
.ef-ventas-kpi-ico {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 9px; background: #e0f2fe; color: #00A0E3;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ef-ventas-kpi-txt { min-width: 0; }
.ef-ventas-kpi-val { font-size: 1.05rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.ef-ventas-kpi-lbl { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
.ef-ventas-subtitle { margin: .85rem 0 .45rem; font-weight: 600; font-size: .85rem; color: #475569; }
html[data-theme="dark"] .ef-ventas-kpi { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .ef-ventas-kpi-ico { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .ef-ventas-kpi-val { color: var(--text); }
html[data-theme="dark"] .ef-ventas-kpi-lbl, html[data-theme="dark"] .ef-ventas-subtitle { color: var(--text-muted); }

.cf-items { display: flex; flex-direction: column; gap: .5rem; }
.cf-item {
    display: flex; gap: .65rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
}
.cf-item--clic { cursor: pointer; transition: border-color .12s, background .12s; }
.cf-item--clic:hover { border-color: #00A0E3; background: #f0faff; }
.cf-item-chev { margin-left: auto; align-self: center; color: #94a3b8; }
html[data-theme="dark"] .cf-item--clic:hover { border-color: var(--acento); background: var(--bg-hover); }
.cf-item-ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #00A0E3;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cf-item-body { flex: 1; min-width: 0; }
.cf-item-title strong { color: #1e293b; font-size: .9rem; }
.cf-item-tag {
    display: inline-block;
    font-size: .68rem;
    border: 1px solid;
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: .4rem;
    vertical-align: middle;
}
.cf-item-meta {
    display: flex; gap: .8rem; flex-wrap: wrap;
    font-size: .77rem; color: #94a3b8;
    margin-top: .3rem;
}
.cf-item-meta i { margin-right: 2px; }

.cf-pager {
    display: flex; justify-content: center; gap: .35rem;
    padding: .8rem 0 .25rem;
}

/* ── Histórico LOPD (panel derecha) ── */
.cf-lopdh-list { display: flex; flex-direction: column; gap: .55rem; }
.cf-lopdh-item {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: #1e293b;
    padding: .15rem 0;
}
.cf-lopdh-item strong { font-weight: 500; }
.cf-lopdh-dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.cf-lopdh-dot--yes { background: #16a34a; }
.cf-lopdh-dot--no  { background: #dc2626; }
.cf-lopdh-est {
    font-size: .78rem; color: #64748b;
    margin-left: -.3rem;
}
.cf-lopdh-time {
    font-size: .78rem; color: #94a3b8; white-space: nowrap;
}

/* ── Asistente IA (panel derecha) ── */
.cf-ai-icon { color: #9b51e0 !important; }
.cf-ai-section { margin-top: .9rem; }
.cf-ai-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .35rem;
}
.cf-ai-text {
    font-size: .87rem; color: #475569; line-height: 1.45;
}
.cf-ai-text strong { color: #1e293b; }
.cf-ai-nba {
    background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    padding: .75rem .85rem;
}
.cf-ai-nba-head {
    display: flex; align-items: center; gap: .4rem;
    color: #1e293b;
    margin-bottom: .3rem;
}
.cf-ai-nba-head i { color: #9b51e0; font-size: 1rem; }
.cf-ai-nba-text { font-size: .82rem; color: #475569; margin-bottom: .55rem; }
.cf-ai-nba-btn {
    background: transparent;
    border: 0;
    color: #00A0E3;
    font-size: .82rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}
.cf-ai-nba-btn:hover { text-decoration: underline; }
.cf-ai-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .85rem;
    padding-top: .6rem;
    border-top: 1px solid #f1f5f9;
    font-size: .75rem; color: #94a3b8;
}
.cf-ai-foot-btn {
    background: transparent; border: 0;
    color: #00A0E3; font-size: .78rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;
}
.cf-ai-foot-btn:hover { text-decoration: underline; }

/* Tema oscuro — ficha completa */
html[data-theme="dark"] .cf-bc-current { color: var(--text); }
html[data-theme="dark"] .cf-breadcrumb, html[data-theme="dark"] .cf-breadcrumb a { color: var(--text-muted); }
html[data-theme="dark"] .cf-bc-sep { color: var(--border-2); }
html[data-theme="dark"] .cf-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .cf-card-title { color: var(--text-muted); }
html[data-theme="dark"] .cf-card-title--icon { color: var(--text); }
html[data-theme="dark"] .cf-card-title--icon i { color: var(--acento); }
html[data-theme="dark"] .cf-card-action-btn { color: var(--text-muted); }
html[data-theme="dark"] .cf-card-action-btn:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .cf-nombre { color: var(--text); }
html[data-theme="dark"] .cf-puesto { color: var(--text-muted); }
html[data-theme="dark"] .cf-empresa-link { color: var(--acento); }
html[data-theme="dark"] .cf-action-btn { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .cf-action-btn i { color: var(--acento); }
html[data-theme="dark"] .cf-action-btn:hover { background: var(--acento-bg); border-color: var(--acento); color: var(--acento); }
html[data-theme="dark"] .cf-kv-row .cf-kv-ico i { color: var(--text-muted); }
html[data-theme="dark"] .cf-kv-label { color: var(--text-muted); }
html[data-theme="dark"] .cf-kv-val { color: var(--text); }
html[data-theme="dark"] .cf-kv-val a { color: var(--acento); }
html[data-theme="dark"] .cf-empty-line { color: var(--text-muted); }
html[data-theme="dark"] .cf-lopd-name { color: var(--text); }
html[data-theme="dark"] .cf-lopd-sub { color: var(--text-muted); }
html[data-theme="dark"] .cf-switch span { background: var(--border-2); }
html[data-theme="dark"] .cf-switch input:checked + span { background: var(--acento); }
html[data-theme="dark"] .cf-tabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .cf-tab { color: var(--text-muted); }
html[data-theme="dark"] .cf-tab:hover { color: var(--acento); }
html[data-theme="dark"] .cf-tab.active { color: var(--acento); border-bottom-color: var(--acento); }
html[data-theme="dark"] .cf-tabs--rail { border-right-color: var(--border); border-bottom-color: transparent; }
html[data-theme="dark"] .cf-tabs--rail .cf-tab:hover { background: var(--bg-hover); }
html[data-theme="dark"] .cf-tabs--rail .cf-tab.active { background: var(--acento-bg); color: var(--acento); border-left-color: var(--acento); border-bottom-color: transparent; }
html[data-theme="dark"] .cf-tabs-mobilesel { border-bottom-color: var(--border); }
html[data-theme="dark"] .cf-tabs-mobilesel select { background: var(--bg-card, #1e293b); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .cf-quick-acciones { border-bottom-color: var(--border); }
html[data-theme="dark"] .cf-quick-btn { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .cf-quick-btn:hover { background: var(--acento-bg); border-color: var(--acento); color: var(--acento); }
html[data-theme="dark"] .cf-quick-btn--primary { background: var(--acento); color: #fff; border-color: var(--acento); }
html[data-theme="dark"] .cf-quick-btn--primary:hover { background: var(--acento); color: #fff; }
html[data-theme="dark"] .cf-empty-ico { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .cf-empty-title { color: var(--text); }
html[data-theme="dark"] .cf-empty-sub { color: var(--text-muted); }
html[data-theme="dark"] .cf-item { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .cf-item-title strong { color: var(--text); }
html[data-theme="dark"] .cf-item-meta { color: var(--text-muted); }
html[data-theme="dark"] .cf-lopdh-item, html[data-theme="dark"] .cf-lopdh-item strong { color: var(--text); }
html[data-theme="dark"] .cf-lopdh-est { color: var(--text-muted); }
html[data-theme="dark"] .cf-lopdh-time { color: var(--text-muted); }
html[data-theme="dark"] .cf-ai-text { color: var(--text); }
html[data-theme="dark"] .cf-ai-text strong { color: var(--text); }
html[data-theme="dark"] .cf-ai-label { color: var(--text-muted); }
html[data-theme="dark"] .cf-ai-nba {
    background: linear-gradient(135deg, rgba(0,160,227,.12) 0%, rgba(155,81,224,.12) 100%);
    border-color: var(--border);
}
html[data-theme="dark"] .cf-ai-nba-head, html[data-theme="dark"] .cf-ai-nba-head i { color: var(--text); }
html[data-theme="dark"] .cf-ai-nba-text { color: var(--text-muted); }
html[data-theme="dark"] .cf-ai-foot { color: var(--text-muted); border-top-color: var(--border); }
html[data-theme="dark"] .cf-loading { color: var(--text-muted); }


/* ============================================================
   EMPRESAS — PANEL LATERAL (variante con icono empresa + KPIs)
   ============================================================ */

.ct-side-avatar--building {
    background: #faf5ff;
    color: #9b51e0;
    font-size: 1.4rem;
}

.ct-side-empkpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}
.ct-side-empkpi {
    background: #f8fafc;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .55rem .5rem;
    text-align: center;
}
.ct-side-empkpi-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .15rem;
}
.ct-side-empkpi-val {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}

html[data-theme="dark"] .ct-side-avatar--building { background: rgba(155,81,224,.18); color: #b682ea; }
html[data-theme="dark"] .ct-side-empkpi { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .ct-side-empkpi-label { color: var(--text-muted); }
html[data-theme="dark"] .ct-side-empkpi-val { color: var(--text); }

/* ============================================================
   EMPRESA — FICHA COMPLETA (extiende cf-* con bloques propios)
   ============================================================ */

.ef-card-identidad { padding-bottom: 0; }

.ef-id-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.ef-id-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: #faf5ff;
    color: #9b51e0;
    font-size: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ef-id-textbox { flex: 1; min-width: 0; }
.ef-id-textbox .cf-nombre { text-align: left; margin: 0 0 .1rem; font-size: 1.05rem; }
.ef-id-textbox .cf-puesto { text-align: left; font-size: .8rem; margin-bottom: .05rem; }

/* KPIs */
.ef-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 1rem;
}
.ef-kpi {
    text-align: center;
    border-right: 1px solid #f1f5f9;
    padding: .25rem .25rem 1rem;
}
.ef-kpi:last-child { border-right: 0; }
.ef-kpi-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .25rem;
    display: flex; align-items: center; justify-content: center; gap: .15rem;
    /* Altura fija de 2 líneas para que los números queden alineados aunque la
       etiqueta ocupe una o dos líneas (p.ej. "OPS ABIERTAS"). */
    min-height: 2.4em;
    line-height: 1.15;
    text-align: center;
}
.ef-kpi-label i { font-size: .7rem; }
.ef-kpi-val {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0f172a;
}

/* Identificación fiscal */
.ef-fiscal { display: flex; flex-direction: column; gap: .4rem; }
.ef-fiscal-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .9rem;
}
.ef-fiscal-val { color: #1e293b; font-weight: 500; }
.ef-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}
.ef-pill--ok { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.ef-pill--ok i { font-size: .7rem; }

/* Detalles */
.ef-det-list { display: flex; flex-direction: column; gap: .55rem; }
.ef-det-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: .5rem;
    font-size: .87rem;
}
.ef-det-label { color: #64748b; }
.ef-det-val   { color: #1e293b; }
.ef-life-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .75rem;
    background: #f0fdf4; color: #16a34a;
    border: 1px solid #bbf7d0;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Tab count badge */
.cf-tab-count {
    display: inline-block;
    background: #e0e7ff;
    color: #475569;
    font-size: .65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: .25rem;
    min-width: 18px; text-align: center;
}
.cf-tab.active .cf-tab-count { background: var(--acento-bg, #e0f2fe); color: #00A0E3; }
.cf-tabs--rail .cf-tab.active .cf-tab-count { background: #fff; color: #00A0E3; }
html[data-theme="dark"] .cf-tabs--rail .cf-tab.active .cf-tab-count { background: var(--bg-card, #1e293b); color: var(--acento); }

/* Acciones rápidas (columna derecha) */
.ef-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

/* Marketplace */
.ef-mk-locked {
    font-size: .72rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.ef-mk-list { display: flex; flex-direction: column; gap: .6rem; }
.ef-mk-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
}
.ef-mk-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #fef3c7;
    color: #d97706;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ef-mk-ico--green { background: #dcfce7; color: #16a34a; }
.ef-mk-info { flex: 1; min-width: 0; }
.ef-mk-info strong {
    display: block; font-size: .87rem; color: #1e293b; font-weight: 600;
    margin-bottom: 2px;
}
.ef-mk-info small {
    display: block; font-size: .72rem; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ef-mk-btn {
    background: transparent;
    border: 1px solid #e5e9f0;
    color: #00A0E3;
    font-size: .78rem;
    padding: .25rem .7rem;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.ef-mk-btn:hover { background: #f0faff; border-color: #00A0E3; }

/* Tema oscuro */
html[data-theme="dark"] .ef-id-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .ef-id-icon { background: rgba(155,81,224,.18); color: #b682ea; }
html[data-theme="dark"] .ef-kpi { border-right-color: var(--border); }
html[data-theme="dark"] .ef-kpi-label { color: var(--text-muted); }
html[data-theme="dark"] .ef-kpi-val { color: var(--text); }
html[data-theme="dark"] .ef-fiscal-val { color: var(--text); }
html[data-theme="dark"] .ef-pill--ok { background: rgba(22,163,74,.18); color: #4ade80; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .ef-det-label { color: var(--text-muted); }
html[data-theme="dark"] .ef-det-val { color: var(--text); }
html[data-theme="dark"] .ef-life-pill { background: rgba(22,163,74,.18); color: #4ade80; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .cf-tab-count { background: var(--bg-hover); color: var(--text-muted); }
html[data-theme="dark"] .cf-tab.active .cf-tab-count { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .ef-mk-locked { color: var(--text-muted); }
html[data-theme="dark"] .ef-mk-item { border-color: var(--border); }
html[data-theme="dark"] .ef-mk-info strong { color: var(--text); }
html[data-theme="dark"] .ef-mk-info small { color: var(--text-muted); }
html[data-theme="dark"] .ef-mk-btn { background: var(--bg-card-2); border-color: var(--border); color: var(--acento); }
html[data-theme="dark"] .ef-mk-btn:hover { background: var(--acento-bg); border-color: var(--acento); }


/* ============================================================
   CRM — BARRA INFERIOR DE ACCIONES MASIVAS (BULK)
   ============================================================ */

.ct-bulkbar {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #1e293b;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14), 0 0 0 1px rgba(15, 23, 42, .05);
    padding: .35rem .5rem .35rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .2rem;
    z-index: 1040;
    transition: bottom .25s cubic-bezier(.4, 0, .2, 1);
    max-width: calc(100% - 2rem);
}
.ct-bulkbar.is-open { bottom: 18px; }

.ct-bulkbar-info {
    display: flex; align-items: baseline; gap: .3rem;
    font-size: .85rem;
    color: #64748b;
    padding-right: .85rem;
    margin-right: .15rem;
    border-right: 1px solid #e5e9f0;
    white-space: nowrap;
}
.ct-bulkbar-count {
    font-weight: 600;
    color: #1e293b;
    font-size: .92rem;
}

.ct-bulkbar-actions { display: flex; gap: 0; align-items: center; }

.ct-bulk-btn {
    background: transparent;
    border: 0;
    color: #475569;
    padding: .45rem .8rem;
    font-size: .85rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center;
    gap: .4rem;
    transition: all .12s;
    white-space: nowrap;
}
.ct-bulk-btn i { font-size: .95rem; color: #64748b; }
.ct-bulk-btn:hover { background: #eef2f7; color: #0f172a; }
.ct-bulk-btn:hover i { color: #00A0E3; }
.ct-bulk-btn--danger { color: #dc2626; }
.ct-bulk-btn--danger i { color: #dc2626; }
.ct-bulk-btn--danger:hover { background: #fef2f2; color: #b91c1c; }
.ct-bulk-btn--danger:hover i { color: #b91c1c; }

.ct-bulkbar-close {
    background: transparent;
    border: 0;
    color: #94a3b8;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: .3rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
}
.ct-bulkbar-close:hover { background: #f1f5f9; color: #0f172a; }

/* Botón guardar variante peligro (modales) */
.btn-modal-save--danger {
    background: #dc2626;
    border-color: #dc2626;
}
.btn-modal-save--danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Tema oscuro */
html[data-theme="dark"] .ct-bulkbar {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px var(--border);
}
html[data-theme="dark"] .ct-bulkbar-info { color: var(--text-muted); border-right-color: var(--border); }
html[data-theme="dark"] .ct-bulkbar-count { color: var(--text); }
html[data-theme="dark"] .ct-bulk-btn { color: var(--text); }
html[data-theme="dark"] .ct-bulk-btn i { color: var(--text-muted); }
html[data-theme="dark"] .ct-bulk-btn:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .ct-bulk-btn:hover i { color: var(--acento); }
html[data-theme="dark"] .ct-bulk-btn--danger,
html[data-theme="dark"] .ct-bulk-btn--danger i { color: #fb7185; }
html[data-theme="dark"] .ct-bulk-btn--danger:hover { background: rgba(220,38,38,.18); color: #fecaca; }
html[data-theme="dark"] .ct-bulk-btn--danger:hover i { color: #fecaca; }
html[data-theme="dark"] .ct-bulkbar-close { color: var(--text-muted); }
html[data-theme="dark"] .ct-bulkbar-close:hover { background: var(--bg-hover); color: var(--text); }


/* ============================================================
   HOME / DASHBOARD CRM — Card de la semana con flechas internas
   ============================================================ */
.hw-week-card--single {
    margin-bottom: 1rem;
}
.hw-week-card--single .hw-week-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid #e5e9f0;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
}
.hw-week-head-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hw-week-nav-arrow {
    background: #f1f5f9;
    border: 0;
    color: #475569;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.hw-week-nav-arrow:hover:not(:disabled) { background: #00A0E3; color: #fff; }
.hw-week-nav-arrow:disabled { opacity: .35; cursor: not-allowed; }

html[data-theme="dark"] .hw-week-card--single .hw-week-head { border-bottom-color: var(--border); }
html[data-theme="dark"] .hw-week-nav-arrow { background: var(--bg-card-2); color: var(--text-muted); }
html[data-theme="dark"] .hw-week-nav-arrow:hover:not(:disabled) { background: var(--acento); color: #fff; }


/* ============================================================
   OMNIBOX — Buscador global (Cmd/Ctrl + K)
   ============================================================ */

#omniboxTrigger { cursor: pointer; }
#omniboxTrigger input { cursor: pointer; }

.omnibox-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.omnibox-overlay.is-open { opacity: 1; pointer-events: auto; }

.omnibox-modal {
    background: #fff;
    width: 560px;
    max-width: calc(100% - 2rem);
    max-height: 70vh;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
    transform: translateY(-8px) scale(.985);
    opacity: 0;
    transition: transform .18s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.omnibox-overlay.is-open .omnibox-modal { transform: translateY(0) scale(1); opacity: 1; }

.omnibox-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.omnibox-search > i {
    color: #94a3b8;
    font-size: 1.1rem;
}
.omnibox-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1rem;
    color: #1e293b;
    padding: .25rem 0;
}
.omnibox-search input::placeholder { color: #94a3b8; }
.omnibox-close {
    background: transparent;
    border: 0;
    color: #94a3b8;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .1s;
}
.omnibox-close:hover { background: #f1f5f9; color: #0f172a; }

.omnibox-body {
    flex: 1;
    overflow-y: auto;
    padding: .6rem .5rem .8rem;
}

.omni-section-title {
    font-size: .72rem;
    font-weight: 600;
    color: #94a3b8;
    padding: .4rem .9rem .35rem;
    text-transform: none;
    letter-spacing: 0;
    display: flex; align-items: center;
}
.omni-ai-ico { color: #9b51e0; }

.omni-section { display: flex; flex-direction: column; gap: 2px; }

.omni-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .8rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    cursor: pointer;
    transition: background .1s;
    margin: 0 .25rem;
}
.omni-item:hover, .omni-item.is-active {
    background: #f0f9ff;
    color: #0f172a;
}
.omni-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.omni-item.is-active .omni-ico,
.omni-item:hover .omni-ico { background: #e0f2fe; color: #00A0E3; }
.omni-ico--ai { background: #faf5ff; color: #9b51e0; }
.omni-item:hover .omni-ico--ai, .omni-item.is-active .omni-ico--ai { background: #ede9fe; color: #9b51e0; }

.omni-text { flex: 1; min-width: 0; }
.omni-name {
    font-size: .92rem;
    color: #1e293b;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.omni-sub {
    font-size: .78rem;
    color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}

.omni-match {
    background: #ecfdf5;
    color: #16a34a;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #bbf7d0;
    flex-shrink: 0;
    margin-left: .35rem;
}
.omni-item--ai { /* misma fila, pero el badge añade peso a la derecha */ }

.omni-loading, .omni-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: .9rem;
    gap: .4rem;
}
.omni-empty i { font-size: 1.4rem; }

/* Tema oscuro */
html[data-theme="dark"] .omnibox-modal {
    background: var(--bg-card);
    box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px var(--border);
}
html[data-theme="dark"] .omnibox-search { border-bottom-color: var(--border); }
html[data-theme="dark"] .omnibox-search input { color: var(--text); }
html[data-theme="dark"] .omnibox-search input::placeholder { color: var(--text-muted); }
html[data-theme="dark"] .omnibox-search > i { color: var(--text-muted); }
html[data-theme="dark"] .omnibox-close { color: var(--text-muted); }
html[data-theme="dark"] .omnibox-close:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .omni-section-title { color: var(--text-muted); }
html[data-theme="dark"] .omni-item { color: var(--text); }
html[data-theme="dark"] .omni-item:hover, html[data-theme="dark"] .omni-item.is-active { background: var(--bg-hover); }
html[data-theme="dark"] .omni-ico { background: var(--bg-card-2); color: var(--text-muted); }
html[data-theme="dark"] .omni-item.is-active .omni-ico,
html[data-theme="dark"] .omni-item:hover .omni-ico { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .omni-ico--ai { background: rgba(155,81,224,.18); color: #b682ea; }
html[data-theme="dark"] .omni-item:hover .omni-ico--ai, html[data-theme="dark"] .omni-item.is-active .omni-ico--ai { background: rgba(155,81,224,.28); color: #b682ea; }
html[data-theme="dark"] .omni-name { color: var(--text); }
html[data-theme="dark"] .omni-sub { color: var(--text-muted); }
html[data-theme="dark"] .omni-match { background: rgba(22,163,74,.18); color: #4ade80; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .omni-loading, html[data-theme="dark"] .omni-empty { color: var(--text-muted); }


/* ============================================================
   ASISTENTE IA — Botón flotante + panel deslizable
   ============================================================ */

.ai-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A0E3 0%, #9b51e0 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 22px rgba(0,160,227,.35), 0 2px 6px rgba(0,0,0,.1);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    z-index: 1055;
    transition: transform .15s, box-shadow .15s;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,160,227,.4), 0 4px 10px rgba(0,0,0,.12); }
.ai-fab:active { transform: translateY(0); }

.ai-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s;
    z-index: 1060;
}
.ai-overlay.is-open { opacity: 1; pointer-events: auto; }

.ai-panel {
    position: fixed;
    top: 0; right: 0;
    width: 480px;
    max-width: 95vw;
    height: 100vh;
    background: #fff;
    box-shadow: -10px 0 28px rgba(15,23,42,.18);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    z-index: 1070;
    display: flex;
    flex-direction: column;
}
.ai-panel.is-open { transform: translateX(0); }

/* Head */
.ai-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem .85rem;
    border-bottom: 1px solid #e5e9f0;
}
.ai-head-main { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; }
.ai-avatar {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00A0E3 0%, #9b51e0 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.ai-head-textbox { min-width: 0; }
.ai-title { margin: 0; font-size: 1rem; color: #1e293b; font-weight: 600; }
.ai-sub { font-size: .76rem; color: #64748b; display: flex; align-items: center; gap: .3rem; margin-top: 2px; }
.ai-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}
.ai-head-actions { display: flex; gap: .15rem; }
.ai-head-btn {
    background: transparent;
    border: 0;
    color: #64748b;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .1s;
}
.ai-head-btn:hover { background: #f1f5f9; color: #0f172a; }

/* Historial */
.ai-hist {
    border-bottom: 1px solid #e5e9f0;
    background: #f8fafc;
    max-height: 240px;
    overflow-y: auto;
}
.ai-hist-head {
    font-size: .7rem;
    font-weight: 700;
    color: #94a3b8;
    padding: .6rem .9rem .3rem;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.ai-hist-clear {
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    padding: .15rem .35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.ai-hist-clear:hover { background: #fef2f2; }
html[data-theme="dark"] .ai-hist-clear:hover { background: rgba(220,38,38,.15); }
.ai-hist-empty {
    color: #94a3b8;
    font-size: .85rem;
    padding: .85rem 1rem;
    text-align: center;
}
.ai-hist-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .9rem;
    cursor: pointer;
    transition: background .1s;
}
.ai-hist-item:hover { background: #eef2f7; }
.ai-hist-item.is-active { background: #e0f2fe; }
.ai-hist-item i { color: #64748b; font-size: .9rem; }
.ai-hist-info { flex: 1; min-width: 0; }
.ai-hist-tit {
    font-size: .85rem; color: #1e293b; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-hist-sub { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
.ai-hist-del {
    background: transparent; border: 0;
    color: #cbd5e1;
    width: 24px; height: 24px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .1s;
}
.ai-hist-item:hover .ai-hist-del { opacity: 1; }
.ai-hist-del:hover { background: #fef2f2; color: #dc2626; }

/* Body — mensajes */
.ai-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.ai-welcome {
    text-align: center;
    padding: 1.5rem .5rem .5rem;
    color: #475569;
}
.ai-welcome-ico {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #faf5ff 100%);
    color: #9b51e0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
}
.ai-welcome h4 { margin: 0 0 .4rem; color: #1e293b; }
.ai-welcome p { font-size: .9rem; margin-bottom: 1rem; }
.ai-hints { display: flex; flex-direction: column; gap: .4rem; max-width: 380px; margin: 0 auto; }
.ai-hint {
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: .55rem .8rem;
    font-size: .85rem;
    color: #475569;
    cursor: pointer;
    transition: all .1s;
}
.ai-hint:hover { background: #f0f9ff; border-color: #00A0E3; color: #0f172a; }

.ai-msg { display: flex; align-items: flex-end; gap: .55rem; }
.ai-msg--user { justify-content: flex-end; }
.ai-msg-bubble {
    background: #e0f2fe;
    color: #0f172a;
    padding: .55rem .85rem;
    border-radius: 16px 16px 4px 16px;
    max-width: 78%;
    font-size: .9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-msg--assist { align-items: flex-start; }
.ai-msg-avatar {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00A0E3 0%, #9b51e0 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.ai-msg-content {
    max-width: 86%;
    font-size: .9rem;
    color: #1e293b;
    line-height: 1.5;
    word-break: break-word;
}
.ai-msg-content p { margin: 0 0 .35rem; }
.ai-msg-content p:last-child { margin-bottom: 0; }
.ai-msg-content ol, .ai-msg-content ul { margin: .25rem 0 .35rem 1.4rem; padding: 0; }
.ai-msg-content li { margin-bottom: 2px; }
.ai-msg-content code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .82em;
    color: #475569;
}
.ai-msg-content strong { color: #0f172a; }
.ai-msg-content a.ai-link {
    color: var(--im-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,160,227,.35);
}
.ai-msg-content a.ai-link:hover { border-bottom-color: var(--im-primary); }
html[data-theme="dark"] .ai-msg-content a.ai-link { color: #5ec3ef; border-bottom-color: rgba(94,195,239,.4); }

/* Typing indicator */
.ai-typing { display: inline-flex; gap: 4px; padding: .35rem 0; }
.ai-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Tool call card */
.ai-tool {
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    margin-left: 36px;       /* alineado bajo avatar assistant */
}
.ai-tool-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    cursor: pointer;
    background: #f8fafc;
    transition: background .1s;
}
.ai-tool-head:hover { background: #f1f5f9; }
.ai-tool-ico {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #e0f2fe;
    color: #00A0E3;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ai-tool-info { flex: 1; min-width: 0; }
.ai-tool-name { font-size: .82rem; color: #1e293b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-tool-name code { background: transparent; color: #64748b; font-size: .76em; margin-left: .3rem; }
.ai-tool-sub { font-size: .72rem; color: #94a3b8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-tool-ms { font-size: .7rem; color: #94a3b8; flex-shrink: 0; }
.ai-tool-ok { color: #16a34a; flex-shrink: 0; }
.ai-tool-chev { color: #94a3b8; font-size: .85rem; transition: transform .15s; flex-shrink: 0; }
.ai-tool.is-open .ai-tool-chev { transform: rotate(180deg); }
.ai-tool-body {
    display: none;
    border-top: 1px solid #e5e9f0;
    padding: .55rem .7rem .7rem;
}
.ai-tool.is-open .ai-tool-body { display: block; }
.ai-tool-section { margin-top: .5rem; }
.ai-tool-section:first-child { margin-top: 0; }
.ai-tool-section-label { font-size: .65rem; color: #94a3b8; font-weight: 700; letter-spacing: .04em; margin-bottom: .25rem; }
.ai-tool-body pre {
    background: #f8fafc;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    padding: .55rem;
    font-size: .75rem;
    color: #1e293b;
    margin: 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.ai-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .85rem;
    margin-left: 36px;
}

/* Footer */
.ai-foot {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    padding: .75rem 1rem .25rem;
    border-top: 1px solid #e5e9f0;
}
.ai-foot textarea {
    flex: 1;
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    padding: .55rem .85rem;
    font-size: .9rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    resize: none;
    outline: none;
    line-height: 1.4;
    min-height: 38px;
    max-height: 140px;
    transition: border-color .1s, background .1s;
}
.ai-foot textarea:focus { border-color: #00A0E3; background: #fff; }
.ai-send {
    background: linear-gradient(135deg, #00A0E3 0%, #9b51e0 100%);
    border: 0;
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .1s;
}
.ai-send:hover { opacity: .92; }
.ai-send:disabled { opacity: .55; cursor: not-allowed; }

.ai-foot-note {
    text-align: center;
    font-size: .72rem;
    color: #94a3b8;
    padding: .25rem .75rem .75rem;
}

.ai-loading, .ai-empty {
    text-align: center; color: #94a3b8;
    padding: 2rem 1rem;
}

/* Tema oscuro */
html[data-theme="dark"] .ai-panel { background: var(--bg-card); }
html[data-theme="dark"] .ai-head { border-bottom-color: var(--border); }
html[data-theme="dark"] .ai-title { color: var(--text); }
html[data-theme="dark"] .ai-sub { color: var(--text-muted); }
html[data-theme="dark"] .ai-head-btn { color: var(--text-muted); }
html[data-theme="dark"] .ai-head-btn:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="dark"] .ai-hist { background: var(--bg-card-2); border-bottom-color: var(--border); }
html[data-theme="dark"] .ai-hist-head { color: var(--text-muted); }
html[data-theme="dark"] .ai-hist-item:hover { background: var(--bg-hover); }
html[data-theme="dark"] .ai-hist-item.is-active { background: var(--acento-bg); }
html[data-theme="dark"] .ai-hist-tit { color: var(--text); }
html[data-theme="dark"] .ai-hist-sub, html[data-theme="dark"] .ai-hist-empty { color: var(--text-muted); }
html[data-theme="dark"] .ai-welcome { color: var(--text-muted); }
html[data-theme="dark"] .ai-welcome h4 { color: var(--text); }
html[data-theme="dark"] .ai-welcome-ico { background: linear-gradient(135deg, rgba(0,160,227,.18) 0%, rgba(155,81,224,.18) 100%); }
html[data-theme="dark"] .ai-hint { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ai-hint:hover { background: var(--acento-bg); border-color: var(--acento); }
html[data-theme="dark"] .ai-msg-bubble { background: var(--acento-bg); color: var(--text); }
html[data-theme="dark"] .ai-msg-content, html[data-theme="dark"] .ai-msg-content strong { color: var(--text); }
html[data-theme="dark"] .ai-msg-content code { background: var(--bg-card-2); color: var(--text); }
html[data-theme="dark"] .ai-tool { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .ai-tool-head { background: var(--bg-card); }
html[data-theme="dark"] .ai-tool-head:hover { background: var(--bg-hover); }
html[data-theme="dark"] .ai-tool-ico { background: var(--acento-bg); color: var(--acento); }
html[data-theme="dark"] .ai-tool-name { color: var(--text); }
html[data-theme="dark"] .ai-tool-name code, html[data-theme="dark"] .ai-tool-sub, html[data-theme="dark"] .ai-tool-ms { color: var(--text-muted); }
html[data-theme="dark"] .ai-tool-body { border-top-color: var(--border); }
html[data-theme="dark"] .ai-tool-body pre { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ai-foot { border-top-color: var(--border); }
html[data-theme="dark"] .ai-foot textarea { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ai-foot textarea:focus { background: var(--bg-card); border-color: var(--acento); }
html[data-theme="dark"] .ai-foot-note, html[data-theme="dark"] .ai-loading, html[data-theme="dark"] .ai-empty { color: var(--text-muted); }
html[data-theme="dark"] .ai-error { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.3); color: #fecaca; }

/* ===========================================================================
   ASISTENTE IA — VISTA A PANTALLA COMPLETA (.fa-*)
   Reutiliza las clases .ai-msg* / .ai-tool* / .ai-link / .ai-hist* del panel.
   =========================================================================== */
.fa-page {
    display: flex;
    gap: 16px;
    height: calc(100vh - 190px);
    min-height: 420px;
}
.fa-side {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    overflow: hidden;
}
.fa-nueva { margin: 12px; }
.fa-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a94a6;
}
.fa-hist-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }

.fa-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    overflow: hidden;
    min-width: 0;
}
.fa-msgs { flex: 1; overflow-y: auto; padding: 22px 24px; }
.fa-msgs .ai-msg { max-width: 820px; margin-left: auto; margin-right: auto; }
.fa-foot {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 18px 6px;
    border-top: 1px solid #eef1f6;
}
.fa-foot textarea {
    flex: 1;
    resize: none;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: .95rem;
    font-family: inherit;
    line-height: 1.4;
    max-height: 160px;
    outline: none;
    transition: border-color .15s;
}
.fa-foot textarea:focus { border-color: var(--acento, #00A0E3); }
.fa-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--acento, #00A0E3);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.fa-send:hover { filter: brightness(1.08); }
.fa-send:disabled { opacity: .5; cursor: default; }
.fa-foot-note {
    text-align: center;
    font-size: .74rem;
    color: #9aa3b2;
    padding: 4px 0 12px;
}

.fa-no-disp {
    text-align: center;
    max-width: 480px;
    margin: 60px auto;
    color: #6b7280;
}
.fa-no-disp-ico {
    width: 72px; height: 72px; line-height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eef2f7;
    color: #b6c0cf;
    font-size: 2rem;
}
.fa-no-disp h3 { font-size: 1.25rem; color: #374151; margin-bottom: 8px; }

@media (max-width: 880px) {
    .fa-page { flex-direction: column; height: auto; }
    .fa-side { flex: 0 0 auto; max-height: 240px; }
    .fa-main { min-height: 60vh; }
}

/* Tema light */
html[data-theme="light"] .fa-side,
html[data-theme="light"] .fa-main { background: var(--bg-card); border-color: var(--border); }
html[data-theme="light"] .fa-foot { border-top-color: var(--border); }
html[data-theme="light"] .fa-foot textarea { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .fa-foot-note, html[data-theme="light"] .fa-no-disp { color: var(--text-muted); }

/* Tema dark */
html[data-theme="dark"] .fa-side,
html[data-theme="dark"] .fa-main { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .fa-side-head { color: var(--text-muted); }
html[data-theme="dark"] .fa-foot { border-top-color: var(--border); }
html[data-theme="dark"] .fa-foot textarea { background: var(--bg-card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .fa-foot textarea:focus { border-color: var(--acento); }
html[data-theme="dark"] .fa-foot-note, html[data-theme="dark"] .fa-no-disp { color: var(--text-muted); }
html[data-theme="dark"] .fa-no-disp-ico { background: var(--bg-card-2); color: var(--text-muted); }

/* ===========================================================================
   DASHBOARD EQUIPO PERSONALIZABLE — widgets (.eq-*)
   Reutiliza .dash-* (KPIs, rankings, tablas) dentro de tarjetas .dw-card.
   =========================================================================== */
/* Etiqueta de las barras de selección (período / año) */
.dash-period-tag {
    display: inline-flex; align-items: center;
    font-size: .78rem; font-weight: 700; color: #6b7c93;
    text-transform: uppercase; letter-spacing: .03em;
    margin-right: .35rem;
}
/* La barra de años se comporta como la de período */
.anual-year-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* KPIs embebidos en un widget: sin márgenes externos y compactos */
.dw-body .dash-kpis.eq-kpis-in { margin: 0; gap: .6rem; }
.dw-body .dash-kpis.eq-kpis-in .dash-kpi { min-width: 0; }

/* Listas de ranking dentro de un widget: scroll si crecen mucho */
.eq-scroll { max-height: 320px; overflow-y: auto; }

/* El pager dentro de un widget no necesita borde superior extra */
.dw-body .dash-pager { display: block; padding-top: .5rem; }
.dw-body .dash-search-bar { margin-bottom: .6rem; }

/* Tema dark */
html[data-theme="dark"] .dash-period-tag { color: var(--text-muted); }

/* ===========================================================================
   MODULO REPORTING (Informes) - catalogo + detalle de informe
   =========================================================================== */
.btn-ct-light { display:inline-flex; align-items:center; gap:.3rem; background:#fff; color:#374151; border:1px solid #d7dce5; border-radius:9px; padding:.45rem .8rem; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .12s,border-color .12s; }
.btn-ct-light:hover { background:#f4f7fb; border-color:#c2cbd9; }
.ct-table-wrap { background:#fff; border:1px solid #e6eef6; border-radius:12px; overflow:auto; }
.ct-link-btn { display:inline-flex; align-items:center; color:#00A0E3; font-weight:600; font-size:.84rem; text-decoration:none; }
.ct-link-btn:hover { text-decoration:underline; }
.ct-icon-btn { background:none; border:none; cursor:pointer; padding:.2rem .35rem; border-radius:6px; }
.ct-icon-btn:hover { background:#f1f5f9; }

.rep-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1300px){ .rep-cat-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px) { .rep-cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .rep-cat-grid { grid-template-columns:1fr; } }
.rep-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e6eef6; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s, border-color .15s; }
.rep-card:hover { box-shadow:0 8px 24px rgba(15,40,80,.10); transform:translateY(-2px); border-color:#cfe3f5; }
.rep-card-thumb { height:120px; background:linear-gradient(180deg,#f7fbff,#eef5fc); display:flex; align-items:center; justify-content:center; border-bottom:1px solid #eef2f7; }
.rep-thumb-svg { width:75%; height:80px; }
.rep-card-body { padding:.85rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.35rem; }
.rep-cat-badge { display:inline-flex; align-items:center; font-size:.66rem; font-weight:800; letter-spacing:.04em; padding:.2rem .5rem; border-radius:20px; }
.rep-cat-ventas    { background:#e8f4fd; color:#0277bd; }
.rep-cat-cuentas   { background:#e3f7f1; color:#0f9d76; }
.rep-cat-actividad { background:#fff3e0; color:#e08000; }
.rep-card-title { font-size:1rem; font-weight:700; color:#1a2f45; }
.rep-card-desc { font-size:.83rem; color:#6b7c93; line-height:1.35; }

.rep-fav-btn { background:none; border:none; cursor:pointer; color:#cbd5e1; font-size:1rem; }
.rep-fav-btn.is-fav { color:#f5b301; }

.rep-det-top { margin-bottom:.5rem; }
.rep-det-bc { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:#8a94a6; }
.rep-det-bc a { color:#00A0E3; text-decoration:none; }
.rep-det-bc i { font-size:.7rem; }
.rep-det-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.rep-det-head-left { display:flex; align-items:center; gap:.9rem; }
.rep-det-ico { width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex:0 0 auto; }
.rep-det-title { font-size:1.55rem; font-weight:800; color:#1a2f45; margin:0; }
.rep-det-desc { font-size:.88rem; color:#6b7c93; }
.rep-det-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

.rep-det-filterbar { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:#fff; border:1px solid #e6eef6; border-radius:12px; padding:.75rem 1rem; margin-bottom:1rem; }
.rep-det-filters { display:flex; gap:1rem; flex-wrap:wrap; }
.rep-flt { display:flex; flex-direction:column; gap:.2rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#8a94a6; }
.rep-flt .form-select { min-width:170px; }
.rep-det-kpi { display:flex; flex-direction:column; align-items:flex-end; }
.rep-kpi-label { font-size:.72rem; font-weight:700; text-transform:uppercase; color:#8a94a6; letter-spacing:.03em; }
.rep-kpi-val { font-size:1.5rem; font-weight:800; color:#00A0E3; line-height:1; }

.rep-det-grid { display:grid; grid-template-columns:1fr 320px; gap:1rem; align-items:start; margin-bottom:1rem; }
@media (max-width:980px){ .rep-det-grid { grid-template-columns:1fr; } }
.rep-det-chart-card { background:#fff; border:1px solid #e6eef6; border-radius:14px; padding:1.1rem; }
.rep-chart-wrap { position:relative; height:420px; }
.rep-loading { display:flex; align-items:center; justify-content:center; height:100%; color:#94a3b8; }
.rep-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:.5rem; color:#94a3b8; text-align:center; padding:1rem; }
.rep-empty i { font-size:1.8rem; }
.rep-det-insights { background:#fff; border:1px solid #e6eef6; border-radius:14px; padding:1.1rem; }
.rep-ins-title { font-size:.72rem; font-weight:800; letter-spacing:.05em; color:#00A0E3; margin-bottom:.7rem; }
.rep-ins-card { background:#f7fbff; border:1px solid #e6f0fa; border-radius:10px; padding:.7rem .8rem; font-size:.85rem; color:#374151; line-height:1.4; margin-bottom:.6rem; }
.rep-det-tabla { margin-bottom:2rem; }
.rep-det-tabla .ct-table th, .rep-det-tabla .ct-table td { padding:.6rem .9rem; }

.rep-funnel { display:flex; flex-direction:column; gap:.55rem; padding:.5rem 0; height:100%; justify-content:center; }
.rep-funnel-row { display:flex; align-items:center; gap:.8rem; position:relative; }
.rep-funnel-bar { height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem; min-width:34px; transition:width .3s; margin:0 auto; }
.rep-funnel-lbl { position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:.82rem; font-weight:600; color:#1a2f45; text-align:right; }
.rep-funnel-lbl small { color:#8a94a6; font-weight:500; }

.rep-cohort { overflow:auto; height:100%; display:flex; align-items:center; }
.rep-cohort-tbl { border-collapse:separate; border-spacing:4px; margin:0 auto; font-size:.78rem; }
.rep-cohort-tbl th { color:#8a94a6; font-weight:700; font-size:.72rem; padding:.2rem .3rem; }
.rep-coh-lbl { font-weight:700; color:#1a2f45; text-align:right; padding-right:.4rem; white-space:nowrap; }
.rep-coh-size { color:#6b7c93; text-align:center; }
.rep-coh-cell { width:54px; height:34px; text-align:center; border-radius:7px; font-weight:600; }

.rep-score { display:flex; align-items:center; gap:.5rem; justify-content:flex-end; }
.rep-score-bar { width:64px; height:6px; border-radius:4px; background:#eef2f7; overflow:hidden; }
.rep-score-bar > div { height:100%; }

.rep-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1a2f45; color:#fff; padding:.7rem 1.1rem; border-radius:10px; font-size:.88rem; box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:3000; }
.rep-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

html[data-theme="dark"] .rep-card,
html[data-theme="dark"] .rep-det-chart-card,
html[data-theme="dark"] .rep-det-insights,
html[data-theme="dark"] .rep-det-filterbar,
html[data-theme="dark"] .ct-table-wrap { background:var(--bg-card); border-color:var(--border); }
html[data-theme="dark"] .rep-card-thumb { background:var(--bg-card-2); border-bottom-color:var(--border); }
html[data-theme="dark"] .rep-card-title, html[data-theme="dark"] .rep-det-title, html[data-theme="dark"] .rep-coh-lbl { color:var(--text); }
html[data-theme="dark"] .rep-card-desc, html[data-theme="dark"] .rep-det-desc { color:var(--text-muted); }
html[data-theme="dark"] .btn-ct-light { background:var(--bg-card-2); color:var(--text); border-color:var(--border); }
html[data-theme="dark"] .rep-ins-card { background:var(--bg-card-2); border-color:var(--border); color:var(--text); }
html[data-theme="dark"] .rep-funnel-lbl { color:var(--text); }

/* Etiqueta "proximamente" en tarjetas de modulo (integraciones pendientes) */
.an-card-tag { display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8a6d00; background:#fff3cd; border:1px solid #ffe69a; border-radius:20px; padding:.08rem .45rem; margin-left:.4rem; vertical-align:middle; }
html[data-theme="dark"] .an-card-tag { background:rgba(255,193,7,.15); border-color:rgba(255,193,7,.3); color:#ffd96b; }

/* ===========================================================================
   OPORTUNIDADES - barra de filtro temporal + exportar
   =========================================================================== */
.op-datebar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.op-period-seg { display:inline-flex; background:#eef3f8; border-radius:10px; padding:3px; gap:2px; }
.op-period-btn { border:none; background:transparent; color:#5a6b80; font-size:.82rem; font-weight:600; padding:.4rem .75rem; border-radius:8px; cursor:pointer; transition:background .12s,color .12s; }
.op-period-btn:hover { color:#1a2f45; }
.op-period-btn.active { background:#fff; color:#00A0E3; box-shadow:0 1px 3px rgba(15,40,80,.12); }
.op-nav { display:inline-flex; align-items:center; gap:.4rem; }
.op-nav-arrow { width:32px; height:32px; border:1px solid #d7dce5; background:#fff; border-radius:8px; cursor:pointer; color:#5a6b80; display:inline-flex; align-items:center; justify-content:center; }
.op-nav-arrow:hover { background:#f4f7fb; color:#00A0E3; }
.op-nav-label { font-size:.88rem; font-weight:700; color:#1a2f45; min-width:120px; text-align:center; }
.op-nav-date { border:1px solid #d7dce5; border-radius:8px; padding:.3rem .5rem; font-size:.82rem; color:#374151; }
.op-nav-hoy { border:1px solid #d7dce5; background:#fff; border-radius:8px; padding:.35rem .6rem; font-size:.8rem; font-weight:600; color:#5a6b80; cursor:pointer; }
.op-nav-hoy:hover { background:#f4f7fb; color:#00A0E3; }
.op-export { margin-left:auto; }

html[data-theme="dark"] .op-period-seg { background:var(--bg-card-2); }
html[data-theme="dark"] .op-period-btn { color:var(--text-muted); }
html[data-theme="dark"] .op-period-btn.active { background:var(--bg-card); color:var(--acento); }
html[data-theme="dark"] .op-nav-label { color:var(--text); }
html[data-theme="dark"] .op-nav-arrow,
html[data-theme="dark"] .op-nav-date,
html[data-theme="dark"] .op-nav-hoy { background:var(--bg-card-2); border-color:var(--border); color:var(--text); }

/* Actividades - fila de recordatorio/aviso en el modal */
.act-aviso-row { display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-top:.6rem; }
.act-aviso-when { min-width:200px; }
.act-aviso-when .act-input { min-width:200px; }

/* =====================================================================
   PRESUPUESTOS — plantillas y diseñador
   ===================================================================== */
.btn-ct-danger-light { display:inline-flex; align-items:center; gap:.3rem; background:#fff; color:#dc2626; border:1px solid #f0c4c4; border-radius:9px; padding:.45rem .7rem; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .12s,border-color .12s; }
.btn-ct-danger-light:hover { background:#fef2f2; border-color:#e7a3a3; }
html[data-theme="dark"] .btn-ct-danger-light { background:var(--bg-card-2); border-color:var(--border); color:#f87171; }

/* Listado de plantillas */
.pres-plant-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pres-plant-card { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.pres-plant-card-head { display:flex; justify-content:space-between; align-items:flex-start; }
.pres-plant-icon { width:40px; height:40px; border-radius:9px; background:#e8f6fd; color:#00A0E3; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.pres-plant-badges { display:flex; gap:6px; flex-wrap:wrap; }
.pres-badge { font-size:.7rem; font-weight:600; padding:.15rem .45rem; border-radius:20px; }
.pres-badge--def { background:#fff5e6; color:#b06a00; }
.pres-badge--off { background:#f1f5f9; color:#64748b; }
.pres-plant-name { font-weight:700; color:#1a2942; font-size:1rem; }
.pres-plant-desc { font-size:.85rem; color:#6b7c93; flex:1; }
.pres-plant-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:.75rem; color:#94a3b8; }
.pres-plant-actions { display:flex; gap:8px; margin-top:6px; }
.pres-plant-actions .btn-ct-light { flex:1; justify-content:center; }
.pres-empty { text-align:center; padding:48px 16px; color:#94a3b8; }
.pres-empty i { font-size:2.5rem; display:block; margin-bottom:10px; }
.pres-empty p { margin-bottom:14px; }
html[data-theme="dark"] .pres-plant-card { background:var(--bg-card); border-color:var(--border); }
html[data-theme="dark"] .pres-plant-name { color:var(--text); }
html[data-theme="dark"] .pres-plant-icon { background:var(--acento-bg); color:var(--acento); }

/* Editor */
.pres-ed-settings { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.pres-ed-field { display:flex; flex-direction:column; gap:4px; }
.pres-ed-field--grow { flex:1; min-width:220px; }
.pres-ed-field > label { font-size:.78rem; font-weight:600; color:#6b7c93; }
.pres-ed-field input[type=text] { padding:.45rem .6rem; border:1px solid #e5e9f0; border-radius:8px; font-size:.9rem; }
.pres-ed-check { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:#374151; margin-right:12px; font-weight:500; }

.pres-ed-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
@media (max-width:900px){ .pres-ed-layout { grid-template-columns:1fr; } }

.pres-ed-palette { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:14px; position:sticky; top:12px; max-height:calc(100vh - 40px); overflow:auto; }
.pres-ed-palette-title { font-weight:700; color:#1a2942; font-size:.92rem; }
.pres-ed-palette-hint { font-size:.75rem; color:#94a3b8; margin:.2rem 0 .8rem; }
.pres-mf-group { margin-bottom:12px; }
.pres-mf-group-title { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#00A0E3; margin-bottom:6px; }
.pres-mf-chips { display:flex; flex-wrap:wrap; gap:5px; }
.pres-mf-chip { background:#f1f5f9; border:1px solid #e2e8f0; color:#374151; border-radius:7px; padding:.28rem .5rem; font-size:.76rem; cursor:pointer; transition:background .12s,border-color .12s; }
.pres-mf-chip:hover { background:#e8f6fd; border-color:#00A0E3; color:#0080bb; }
html[data-theme="dark"] .pres-ed-palette { background:var(--bg-card); border-color:var(--border); }
html[data-theme="dark"] .pres-ed-palette-title { color:var(--text); }
html[data-theme="dark"] .pres-mf-chip { background:var(--bg-card-2); border-color:var(--border); color:var(--text); }

.pres-ed-doc { background:#fff; border:1px solid #e5e9f0; border-radius:12px; overflow:hidden; }
.pres-ed-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:8px; border-bottom:1px solid #eef1f6; background:#fafbfd; }
.pres-ed-toolbar button { background:transparent; border:1px solid transparent; border-radius:6px; padding:.35rem .5rem; cursor:pointer; color:#374151; font-size:.9rem; line-height:1; }
.pres-ed-toolbar button:hover { background:#eef4fb; border-color:#dbe6f3; }
.pres-ed-sep { width:1px; height:20px; background:#e2e8f0; margin:0 4px; }
.pres-ed-color { display:inline-flex; align-items:center; gap:3px; cursor:pointer; padding:.25rem .4rem; }
.pres-ed-color input[type=color] { width:22px; height:22px; border:none; background:none; padding:0; cursor:pointer; }
.pres-ed-canvas { background:#eef1f6; padding:20px; max-height:calc(100vh - 140px); overflow:auto; }
.pres-ed-page { background:#fff; max-width:780px; margin:0 auto; min-height:500px; padding:48px 56px; box-shadow:0 2px 12px rgba(0,0,0,.08); font-family:'Segoe UI',Arial,sans-serif; font-size:14px; color:#1a2942; outline:none; }
.pres-ed-page:focus { box-shadow:0 2px 12px rgba(0,160,227,.25); }
html[data-theme="dark"] .pres-ed-doc { background:var(--bg-card); border-color:var(--border); }
html[data-theme="dark"] .pres-ed-toolbar { background:var(--bg-card-2); border-color:var(--border); }
html[data-theme="dark"] .pres-ed-toolbar button { color:var(--text); }
html[data-theme="dark"] .pres-ed-canvas { background:#0f1722; }

/* Vista previa */
.pres-preview-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:1080; display:flex; align-items:center; justify-content:center; padding:24px; }
.pres-preview-box { background:#fff; border-radius:12px; width:100%; max-width:840px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.pres-preview-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eef1f6; }
.pres-preview-close { background:transparent; border:none; font-size:1.1rem; color:#64748b; cursor:pointer; }
.pres-preview-body { padding:40px 48px; overflow:auto; background:#fff; }
html[data-theme="dark"] .pres-preview-box { background:var(--bg-card); }
html[data-theme="dark"] .pres-preview-body { background:#fff; color:#1a2942; }

/* Generar presupuesto */
.pres-gen-grid { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px; }
.pres-gen-field { display:flex; flex-direction:column; gap:4px; min-width:160px; }
.pres-gen-field--grow { flex:1; min-width:220px; }
.pres-gen-field--sm { width:120px; min-width:100px; }
.pres-gen-field > label { font-size:.78rem; font-weight:600; color:#6b7c93; }
.pres-gen-lineas { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:16px; margin-bottom:16px; }
.pres-gen-lineas-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pres-gen-lineas-head h3 { margin:0; font-size:1rem; color:#1a2942; }
.pres-gen-tabla { width:100%; border-collapse:collapse; }
.pres-gen-tabla th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:#94a3b8; padding:4px 6px; border-bottom:1px solid #eef1f6; }
.pres-gen-tabla td { padding:4px 6px; vertical-align:middle; }
.pres-gen-tabla td.pl-importe { text-align:right; font-weight:600; color:#1a2942; white-space:nowrap; }
.pres-gen-tabla .act-input { width:100%; padding:.35rem .5rem; }
.pres-gen-tabla .pl-rm { background:transparent; border:none; color:#cbd5e1; cursor:pointer; padding:.25rem; }
.pres-gen-tabla .pl-rm:hover { color:#dc2626; }
.pres-gen-totales { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:12px; padding-top:12px; border-top:1px solid #eef1f6; }
.pres-gen-totales > div { display:flex; gap:18px; min-width:240px; justify-content:space-between; font-size:.9rem; color:#6b7c93; }
.pres-gen-totales .pres-gen-total { font-size:1.05rem; color:#1a2942; border-top:1px solid #eef1f6; padding-top:6px; margin-top:2px; }
.pres-gen-actions { display:flex; gap:10px; justify-content:flex-end; margin-bottom:24px; }
.pres-gen-previos { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:16px; }
.pres-gen-previos h3 { margin:0 0 10px; font-size:1rem; color:#1a2942; }
.pres-previos-lista { display:flex; flex-direction:column; gap:8px; }
.pres-previo-item { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid #eef1f6; border-radius:8px; }
.pres-previo-info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pres-previo-meta { font-size:.82rem; color:#94a3b8; }
.pres-env-msg { font-size:.85rem; color:#b06a00; min-height:1.2em; margin-bottom:8px; }
.pres-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1a2942; color:#fff; padding:.6rem 1.1rem; border-radius:10px; font-size:.9rem; opacity:0; transition:opacity .25s,transform .25s; z-index:1090; }
.pres-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
html[data-theme="dark"] .pres-gen-lineas, html[data-theme="dark"] .pres-gen-previos { background:var(--bg-card); border-color:var(--border); }
html[data-theme="dark"] .pres-gen-lineas-head h3, html[data-theme="dark"] .pres-gen-previos h3, html[data-theme="dark"] .pres-gen-total { color:var(--text); }

/* Ajustes de presupuesto */
.pres-ajustes-card { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:20px; max-width:680px; }
.pres-ajustes-grupo { margin:0 0 4px; font-size:1rem; color:#1a2942; }
.pres-ajustes-hint { font-size:.82rem; color:#94a3b8; margin:0 0 12px; }
.pres-ajustes-card input[type=text], .pres-ajustes-card input[type=number] { padding:.45rem .6rem; border:1px solid #e5e9f0; border-radius:8px; font-size:.9rem; width:100%; }
.pres-ajustes-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid #eef1f6; }
.pres-ajustes-msg { font-size:.85rem; }
.pres-ajustes-msg--ok { color:#15803d; }
.pres-ajustes-msg--err { color:#dc2626; }
html[data-theme="dark"] .pres-ajustes-card { background:var(--bg-card); border-color:var(--border); }
html[data-theme="dark"] .pres-ajustes-grupo { color:var(--text); }
html[data-theme="dark"] .pres-ajustes-card input { background:var(--bg-card-2); border-color:var(--border); color:var(--text); }

/* ====================================================================
   WHATSAPP EN FICHA (pestaña WhatsApp de Contacto / Empresa)
   Mini-chat de solo lectura con burbujas + enlace a "Abrir chat".
   ==================================================================== */
.wa-ficha { display:flex; flex-direction:column; }
.wa-ficha-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:2px 2px 10px; border-bottom:1px solid #e6ebf1; margin-bottom:10px; flex-wrap:wrap; }
.wa-ficha-tel { font-weight:600; color:#334155; font-size:.9rem; }
.wa-ficha-badge { font-size:.66rem; font-weight:600; padding:2px 7px; border-radius:9px;
    background:#e2e8f0; color:#64748b; margin-left:4px; white-space:nowrap; }
.wa-ficha-badge--open { background:#dcfce7; color:#15803d; }
.wa-ficha-msgs { max-height:440px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:2px; }
.wa-msg { max-width:80%; padding:7px 10px; border-radius:11px; font-size:.85rem; line-height:1.35; }
.wa-msg-txt { white-space:pre-wrap; word-break:break-word; color:#0f172a; }
.wa-msg-meta { font-size:.66rem; color:#94a3b8; margin-top:3px; text-align:right; }
.wa-msg--in  { align-self:flex-start; background:#f1f5f9; border-bottom-left-radius:3px; }
.wa-msg--out { align-self:flex-end;   background:#dcf8c6; border-bottom-right-radius:3px; }
.wa-ficha-foot { margin-top:10px; font-size:.75rem; color:#64748b; text-align:center; }

html[data-theme="dark"] .wa-ficha-head { border-color:var(--border); }
html[data-theme="dark"] .wa-ficha-tel { color:var(--text); }
html[data-theme="dark"] .wa-ficha-badge { background:var(--bg-card-2); color:var(--text-muted); }
html[data-theme="dark"] .wa-ficha-badge--open { background:#14532d; color:#bbf7d0; }
html[data-theme="dark"] .wa-msg-txt { color:var(--text); }
html[data-theme="dark"] .wa-msg--in  { background:var(--bg-card-2); }
html[data-theme="dark"] .wa-msg--out { background:#075e54; }
html[data-theme="dark"] .wa-msg--out .wa-msg-txt { color:#e9fbe9; }

/* ====================================================================
   FUERZA DE VENTAS — pulido de búsquedas y alta de pedido
   ==================================================================== */
/* Paginador SIEMPRE abajo (como Contactos/Empresas): footer separado. */
.gt-pag--abajo { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid #e6ebf1; }
html[data-theme="dark"] .gt-pag--abajo { border-color: var(--border); }

/* Paginador reutilizable (GtPager) dentro de las búsquedas FV: separación tipo footer. */
.gt-pager-fv { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid #e6ebf1; }
html[data-theme="dark"] .gt-pager-fv { border-color: var(--border); }
.ct-pager-dots { padding: 0 .2rem; color: #94a3b8; }

/* Consulta de artículos: cabeceras de columna ordenables (clic para ordenar). */
.gt-art-th--sort { cursor: pointer; user-select: none; white-space: nowrap; }
.gt-art-th--sort:hover { color: #00A0E3; }

/* Consulta de artículos: toolbar única (buscador + Filtros/Ordenar/Columnas + BD a la derecha). */
.gt-art-toolbar { align-items: center; }
.gt-art-toolbar .ct-search { flex: 0 1 340px; }
.gt-art-bd {
    margin-left: auto; display: flex; align-items: center; gap: .45rem;
    padding-left: .75rem; border-left: 3px solid var(--gt-color, #00A0E3);
}
.gt-art-bd > .bi-database { color: var(--gt-color, #00A0E3); font-size: 1rem; }
.gt-art-bd-select {
    border: 1px solid #e5e9f0; border-radius: 7px; padding: .38rem .55rem;
    font-size: .85rem; color: #1a2942; background: #fff; max-width: 240px;
}
.gt-art-bd-tipo {
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    color: #6b7c93; background: #eef2f7; border-radius: 8px; padding: 3px 9px; white-space: nowrap;
}
html[data-theme="dark"] .gt-art-bd-select { background: var(--bg-input); border-color: var(--border-2); color: var(--text); }
html[data-theme="dark"] .gt-art-bd-tipo { background: var(--bg-card-2); color: var(--text-muted); }
@media (max-width: 900px) { .gt-art-bd { margin-left: 0; } .gt-art-toolbar .ct-search { flex: 1 1 100%; } }

/* Búsqueda de clientes (alta de pedido): pills de estado en la tabla. */
.gt-cli-pill { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 6px; border-radius: 7px; vertical-align: middle; }
.gt-cli-pill--imp  { background: #fde8e8; color: #c81e1e; }
.gt-cli-pill--bloq { background: #eef2f7; color: #64748b; }
html[data-theme="dark"] .gt-cli-pill--imp  { background: #4c1d1d; color: #fca5a5; }
html[data-theme="dark"] .gt-cli-pill--bloq { background: var(--bg-card-2); color: var(--text-muted); }

/* Alta de pedido: barra de totales Bruto/Neto más clara y con acento (solo estética). */
.gt-cab-totales {
    align-items: center; gap: 1rem;
    padding: .7rem 1rem; background: #f0f7fe;
    border: 1px solid #d6eafc; border-left: 4px solid #00A0E3;
    border-radius: 10px;
}
.gt-cab-totales > span { display: inline-flex; align-items: baseline; gap: .35rem; }
.gt-total { font-size: 1.05rem; }
html[data-theme="dark"] .gt-cab-totales { background: var(--bg-card-2); border-color: var(--border); border-left-color: #00A0E3; }

/* ── Consumo / control de costes IA (Admin → API Keys) ── */
.ia-kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.ia-kpi { flex: 1 1 160px; display: flex; align-items: center; gap: .65rem; background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; padding: .8rem 1rem; }
.ia-kpi-ico { width: 38px; height: 38px; border-radius: 9px; background: #eaf6fd; color: #00A0E3; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: 0 0 auto; }
.ia-kpi-val { font-size: 1.15rem; font-weight: 700; color: #22303c; line-height: 1.1; }
.ia-kpi-lbl { font-size: .75rem; color: #6b7c93; }
.ia-cost-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.ia-cost-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; padding: 1rem 1.1rem; }
.ia-cost-title { font-weight: 600; color: #22303c; margin-bottom: .75rem; }
.ia-lim-help { font-size: .8rem; color: #6b7c93; margin-bottom: .75rem; }
@media (max-width: 800px) { .ia-cost-grid { grid-template-columns: 1fr; } }
html[data-theme="dark"] .ia-kpi,
html[data-theme="dark"] .ia-cost-card { background: var(--bg-card-2); border-color: var(--border); }
html[data-theme="dark"] .ia-kpi-val,
html[data-theme="dark"] .ia-cost-title { color: var(--text); }
html[data-theme="dark"] .ia-kpi-ico { background: #12303c; }
html[data-theme="light"] .ia-kpi,
html[data-theme="light"] .ia-cost-card { background: var(--bg-card, #fff); border-color: var(--border, #e6ebf1); }

/* ── Métricas visuales de campañas de Emailing ── */
.em-metricas { margin-top: 1rem; }
.em-bars { display: flex; flex-direction: column; gap: .55rem; margin-top: .8rem; }
.em-bar-row { display: grid; grid-template-columns: 120px 1fr 150px; align-items: center; gap: .7rem; font-size: .82rem; }
.em-bar-lbl { color: #334155; font-weight: 600; }
.em-bar-track { background: #e6ebf1; border-radius: 6px; height: 14px; overflow: hidden; }
.em-bar-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
.em-bar-val { text-align: right; color: #51617a; }
.em-bar-val strong { color: #22303c; }
@media (max-width: 640px) { .em-bar-row { grid-template-columns: 90px 1fr; } .em-bar-val { grid-column: 2; text-align: left; } }
html[data-theme="dark"] .em-bar-track { background: var(--bg-card-2); }
html[data-theme="dark"] .em-bar-lbl { color: var(--text); }
html[data-theme="dark"] .em-bar-val { color: var(--text-muted); }
html[data-theme="dark"] .em-bar-val strong { color: var(--text); }

/* ── Herramienta de importación ─────────────────────────────────── */
.imp-card { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.imp-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.imp-file { flex: 1 1 auto; min-width: 220px; padding: .45rem; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fff; }
.imp-hint { font-size: .8rem; color: #64748b; margin-top: .5rem; }
.imp-kpis { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }
.imp-kpi { flex: 0 0 auto; min-width: 92px; text-align: center; border: 1px solid #e5e9f0; border-radius: 10px; padding: .55rem .8rem; background: #fff; }
.imp-kpi-n { font-size: 1.35rem; font-weight: 700; color: #1e293b; }
.imp-kpi-l { font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .02em; }
.imp-kpi--ok   { border-color: #b6e4c9; background: #f0fbf4; }
.imp-kpi--ok .imp-kpi-n   { color: #12734a; }
.imp-kpi--warn { border-color: #ffd98a; background: #fff8ec; }
.imp-kpi--warn .imp-kpi-n { color: #a86400; }
.imp-kpi--err  { border-color: #f6c6c2; background: #fdf0f1; }
.imp-kpi--err .imp-kpi-n  { color: #b42318; }
.imp-asignar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .75rem 0; }
.imp-asignar label { font-weight: 600; color: #334155; margin: 0; }
.imp-asignar select { max-width: 320px; }
.imp-badge { display: inline-block; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: #eef1f5; color: #475569; border: 1px solid #d7dee6; }
.imp-badge--ok   { background: #e6f7ec; color: #12734a; border-color: #b6e4c9; }
.imp-badge--warn { background: #fff4e0; color: #a86400; border-color: #ffd98a; }
.imp-badge--info { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.imp-detalles { font-size: .82rem; color: #475569; max-height: 260px; overflow: auto; margin: .3rem 0 0; padding-left: 1.2rem; }

html[data-theme="dark"] .imp-file { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .imp-hint, html[data-theme="dark"] .imp-kpi-l { color: var(--text-muted); }
html[data-theme="dark"] .imp-kpi { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .imp-kpi-n { color: var(--text); }
html[data-theme="dark"] .imp-asignar label { color: var(--text); }
html[data-theme="dark"] .imp-badge { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border); }

/* ── Direcciones/Sedes (ficha de empresa) ─────────────────────────── */
/* Fila de dos campos en los modales de alta/edición */
.ne-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 480px) { .ne-row2 { grid-template-columns: 1fr; } }
.email-emp-hint { font-size: .78rem; color: #64748b; margin: .35rem 0 .2rem; }
.sede-check { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: .88rem; color: #334155; cursor: pointer; }

/* El resumen de facturado y el botón comparten fila: sin gap se tocaban y parecía
   que la cifra formara parte del botón. */
.ef-sedes-head { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.ef-sedes-list { display: flex; flex-direction: column; gap: .6rem; }
.ef-sede-card {
    display: flex; align-items: flex-start; gap: .75rem;
    border: 1px solid #e5e9f0; border-radius: 10px; padding: .8rem .9rem; background: #fff;
}
.ef-sede-card--def {
    border-color: #00A0E3;
    border-left: 4px solid #00A0E3;
    background: #f4fbff;
    box-shadow: 0 1px 4px rgba(0,160,227,.14);
}
.ef-sede-main { flex: 1 1 auto; min-width: 0; }
.ef-sede-title { font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ef-sede-title i { color: #00A0E3; }
.ef-sede-card--def .ef-sede-title { color: #007bb3; }
.ef-sede-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    background: #00A0E3; color: #fff; border-radius: 999px; padding: 2px 9px;
}
.ef-sede-badge i { font-size: .66rem; color: #ffd54a; }
.ef-sede-star-def {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    color: #f5a623;
}
.ef-sede-lines { color: #475569; font-size: .86rem; margin-top: .25rem; line-height: 1.5; }
.ef-sede-contact { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .4rem; color: #64748b; font-size: .82rem; }
.ef-sede-contact span { display: inline-flex; align-items: center; gap: .3rem; }
.ef-sede-actions { display: flex; gap: .3rem; flex: 0 0 auto; }
.ef-sede-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; color: #475569; cursor: pointer; transition: all .15s;
}
.ef-sede-btn:hover { border-color: #00A0E3; color: #00A0E3; background: #f0faff; }
.ef-sede-btn--danger:hover { border-color: #dc3545; color: #dc3545; background: #fdf0f1; }
.ef-sede-btn--dis { opacity: .4; cursor: not-allowed; }
.ef-sede-btn--dis:hover { border-color: #e5e9f0; color: #475569; background: #fff; }

/* Menú flotante de acciones (kebab) — no lo recorta ningún contenedor con scroll */
.ef-acc-menu {
    position: fixed; z-index: 4000; min-width: 210px; padding: 6px;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15,23,42,.18); display: flex; flex-direction: column; gap: 2px;
}
.ef-acc-menu button {
    display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
    color: #334155; font-size: .9rem; cursor: pointer; transition: background .12s, color .12s;
}
.ef-acc-menu button i { font-size: 1rem; color: #64748b; width: 18px; text-align: center; }
.ef-acc-menu button:hover { background: #f0faff; color: #00A0E3; }
.ef-acc-menu button:hover i { color: #00A0E3; }
.ef-acc-menu button.ef-acc-danger:hover { background: #fdf0f1; color: #dc3545; }
.ef-acc-menu button.ef-acc-danger:hover i { color: #dc3545; }
html[data-theme="dark"] .ef-acc-menu { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ef-acc-menu button { color: var(--text); }
html[data-theme="dark"] .ef-acc-menu button i { color: var(--text-muted); }
html[data-theme="dark"] .ef-acc-menu button:hover { background: var(--bg-hover); color: var(--acento); }
html[data-theme="dark"] .ef-acc-menu button:hover i { color: var(--acento); }

html[data-theme="dark"] .email-emp-hint { color: var(--text-muted); }
html[data-theme="dark"] .sede-check { color: var(--text); }
html[data-theme="dark"] .ef-sede-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ef-sede-card--def { border-color: var(--acento); border-left-color: var(--acento); background: rgba(0,160,227,.10); }
html[data-theme="dark"] .ef-sede-title { color: var(--text); }
html[data-theme="dark"] .ef-sede-title i { color: var(--acento); }
html[data-theme="dark"] .ef-sede-card--def .ef-sede-title { color: var(--acento); }
html[data-theme="dark"] .ef-sede-badge { background: var(--acento); color: #06263a; }
html[data-theme="dark"] .ef-sede-badge i { color: #ffd54a; }
html[data-theme="dark"] .ef-sede-lines { color: var(--text); }
html[data-theme="dark"] .ef-sede-contact { color: var(--text-muted); }
html[data-theme="dark"] .ef-sede-btn { background: var(--bg-card-2); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .ef-sede-btn:hover { border-color: var(--acento); color: var(--acento); background: var(--bg-hover); }

/* ── Productos contratados (ficha de empresa) ─────────────────────── */
.ef-prod-badge {
    display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    border-radius: 999px; padding: 2px 9px;
}
.ef-prod-badge--ok   { background: #e6f7ec; color: #12734a; border: 1px solid #b6e4c9; }
.ef-prod-badge--venc { background: #fdecec; color: #b42318; border: 1px solid #f6c6c2; }
.ef-prod-badge--canc { background: #eef1f5; color: #6b7c93; border: 1px solid #d7dee6; }
/* Situacion contractual explicita (cdbSituacion), la que las fechas no deducen. */
.ef-prod-badge--susp { background: #fff4e5; color: #9a5b00; border: 1px solid #ffd9a8; }
.ef-prod-badge--pend { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }

/* Estado del cliente (Fase 3). Antes iba escrito dentro de la razon social; ahora es
   un campo propio y se pinta solo cuando NO es Activo. */
.estado-cli {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 6px;
    vertical-align: middle;
}
.estado-cli--canc { background: #fdecec; color: #b42318; border: 1px solid #f6c6c2; }
.estado-cli--susp { background: #fff4e5; color: #9a5b00; border: 1px solid #ffd9a8; }

/* Pista bajo un campo del panel de filtros. */
.ct-pop-hint { font-size: .74rem; color: #64748b; margin-top: .25rem; line-height: 1.3; }

/* La razón social todavía lleva el estado escrito dentro: hay que corregirla a mano. */
.nombre-sucio {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: #9a5b00;
    background: #fff4e5;
    border: 1px solid #ffd9a8;
    border-radius: 4px;
    padding: 1px 7px;
    cursor: help;
    vertical-align: middle;
}
html[data-theme="dark"] .ct-pop-hint  { color: var(--text-muted); }
html[data-theme="dark"] .nombre-sucio { background: rgba(217,119,6,.18); color: #fcd34d; border-color: rgba(217,119,6,.4); }

/* ── Cruce por CIF (Fase 4) ───────────────────────────────────────────────
   Marca en el listado: el CIF aparece en más de una ficha. */
.cif-dup {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 600;
    color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe;
    border-radius: 4px; padding: 1px 6px; vertical-align: middle;
}

/* ── Vista 360 (Fase 6) ───────────────────────────────────────────────────
   Tira de cifras en la cabecera de la ficha. Sólo se pintan los datos que
   existen, así que el número de celdas varía: rejilla flexible, no fija. */
/* Señales de la empresa, en su propia ficha. Van debajo de la tira de cifras
   porque son la explicación del número: un "1 señal" a secas no dice qué pasa. */
.ef-senales {
    border: 1px solid #f0c17a; background: #fffaf2; border-radius: 10px;
    padding: .7rem .85rem; margin-top: .75rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.ef-senales-tit {
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #96560a; display: flex; align-items: center; gap: .35rem;
}
.ef-senal { display: flex; flex-direction: column; gap: .2rem; }
.ef-senal .sn-badge { align-self: flex-start; }
.ef-senal-txt { font-size: .82rem; color: #475569; line-height: 1.4; }
.ef-senal-fecha { color: #94a3b8; }
.ef-senal-mas { font-size: .78rem; color: #96560a; font-style: italic; }

html[data-theme="dark"] .ef-senales      { background: rgba(253,126,20,.10); border-color: rgba(253,126,20,.35); }
html[data-theme="dark"] .ef-senales-tit  { color: #f0b863; }
html[data-theme="dark"] .ef-senal-txt    { color: var(--text); }
html[data-theme="dark"] .ef-senal-fecha  { color: var(--text-muted); }

/* Código del contrato. Monoespaciada porque es un identificador que se compara y
   se dicta: así no se confunde un 0 con una O ni un 1 con una l. */
.co-codigo {
    font-family: Consolas, "Courier New", monospace;
    font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    color: #1a2f45; background: #eef3f8;
    padding: .12rem .4rem; border-radius: 5px; white-space: nowrap;
}
html[data-theme="dark"] .co-codigo { color: var(--text); background: var(--bg-card-2); }

.ef-prod-libre { color: #96560a; }
html[data-theme="dark"] .ef-prod-libre { color: #f0b863; }

/* ── Pantalla de Cifrado (administración) ─────────────────────────────────
   Dos tarjetas lado a lado: lo que entra y lo que sale. En una sola columna en
   pantallas estrechas, porque el resultado hay que verlo debajo de lo escrito. */
.cif-grid {
    display: grid; gap: 1rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
.cif-campo { margin-top: .9rem; }
.cif-area { width: 100%; resize: vertical; font-size: .9rem; }
/* El texto cifrado es una tirada de base64: en monoespaciada se compara y se copia
   sin confundir un 1 con una l. */
.cif-mono { font-family: Consolas, "Courier New", monospace; font-size: .85rem; word-break: break-all; }
.cif-acciones { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.cif-copiado { font-size: .8rem; font-weight: 600; color: #1e7a3c; }
.cif-nota { margin-top: 1.25rem; }

html[data-theme="dark"] .cif-copiado { color: #6ee79a; }

/* Estado del cliente en verde. En la ficha se pinta siempre —también "Activo"—,
   porque ahí la pregunta es en qué situación está esta empresa concreta. */
.estado-cli.estado-cli--act { background: #eaf7ee; color: #1e7a3c; }
html[data-theme="dark"] .estado-cli.estado-cli--act { background: rgba(40,167,69,.16); color: #6ee79a; }

/* Aviso ámbar: algo se ha guardado a medias y hay que hacer otra cosa (aplicar una
   migración, normalmente). Ni éxito ni error: acción pendiente. */
.alert-banner.alert-banner-aviso {
    background: #fff4e0;
    border-color: #f0c17a;
    color: #8a5200;
}
html[data-theme="dark"] .alert-banner.alert-banner-aviso {
    background: rgba(253,126,20,.14);
    border-color: rgba(253,126,20,.35);
    color: #ffc078;
}

/* ── Widgets de cartera del inicio (mockup 4.1) ───────────────────────────
   La tabla de renovaciones vive DENTRO de un widget, que es estrecho: tipografía
   más pequeña que ct-table y sin bordes verticales, para que quepan cinco
   columnas sin que parezca un listado completo. */
.dw-tabla-caja { overflow-x: auto; }
.dw-tabla { width: 100%; border-collapse: collapse; font-size: .78rem; }
.dw-tabla th {
    text-align: left; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .04em; font-size: .66rem;
    padding: .2rem .5rem .35rem; border-bottom: 1px solid #eef2f6; white-space: nowrap;
}
.dw-tabla td { padding: .38rem .5rem; border-bottom: 1px solid #f4f7fa; color: #475569; }
.dw-tabla tr:last-child td { border-bottom: 0; }
.dw-tr-link { cursor: pointer; }
.dw-tr-link:hover td { background: #f4f9fd; }
.dw-vacio { color: #94a3b8; font-size: .72rem; }

.dw-est {
    display: inline-block; font-size: .68rem; font-weight: 600;
    padding: .1rem .4rem; border-radius: 5px; white-space: nowrap;
}
.dw-est--ok     { background: #eaf7ee; color: #1e7a3c; }
.dw-est--aviso  { background: #fff4e0; color: #a35c00; }
.dw-est--alerta { background: #fdecec; color: #b3261e; }

/* El KPI de "servicio más vendido" muestra un nombre, no una cifra: el tamaño de
   número lo desbordaría. */
.dw-kpi-txt { font-size: 1.05rem; line-height: 1.25; display: inline-block; }

html[data-theme="dark"] .dw-tabla th   { color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="dark"] .dw-tabla td   { color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .dw-tr-link:hover td { background: var(--bg-card-2); }
html[data-theme="dark"] .dw-vacio      { color: var(--text-muted); }
html[data-theme="dark"] .dw-est--ok     { background: rgba(40,167,69,.16);  color: #6ee79a; }
html[data-theme="dark"] .dw-est--aviso  { background: rgba(253,126,20,.16); color: #ffc078; }
html[data-theme="dark"] .dw-est--alerta { background: rgba(220,53,69,.16);  color: #ff9d9d; }

/* ── Cross-sell: tarjetas de señal, KPIs y embudo (mockup 4.3) ────────────
   Cada señal es una tarjeta y no una pastilla porque cada una pide una acción
   distinta, y la acción tiene que estar donde está la cifra. */
.xs-cards {
    display: grid; gap: .75rem; margin-bottom: 1rem;
    /* Tres columnas: son seis tarjetas, así que salen dos filas de tres. Con
       auto-fill quedaban cinco arriba y una suelta debajo. */
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1200px) { .xs-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .xs-cards { grid-template-columns: 1fr; } }
.xs-card {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid #e3e8ef; border-left: 4px solid #cbd5e1;
    border-radius: 10px; padding: .8rem .9rem;
    transition: box-shadow .12s, border-color .12s, transform .12s;
}
.xs-card:hover     { box-shadow: 0 4px 14px rgba(15,40,80,.10); transform: translateY(-1px); }
.xs-card.is-on     { box-shadow: 0 0 0 2px rgba(0,160,227,.25); }
.xs-card-n         { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #1a2f45; }
.xs-card-t         { font-size: .86rem; font-weight: 700; color: #1a2f45; margin-top: .1rem; }
.xs-card-t .bi     { margin-right: .25rem; }
.xs-card-d         { font-size: .76rem; color: #64748b; margin-top: .3rem; line-height: 1.35; }
.xs-card-acts      { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem;
                     padding-top: .55rem; border-top: 1px solid #eef2f7; }
.xs-card-act       { font-size: .74rem; font-weight: 600; color: #5a6b80; white-space: nowrap; }
.xs-card-act:hover { color: #00A0E3; text-decoration: underline; }
.xs-card-act--main { color: #00A0E3; }

.xs-card--todas { border-left-color: #00A0E3; }
.xs-card--venc  { border-left-color: #dc3545; }
.xs-card--prox  { border-left-color: #fd7e14; }
.xs-card--cruce { border-left-color: #9b51e0; }
.xs-card--reg   { border-left-color: #0d9488; }
.xs-card--mono  { border-left-color: #64748b; }

.xs-kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.xs-kpi {
    flex: 1 1 150px; background: #fff; border: 1px solid #e3e8ef;
    border-radius: 10px; padding: .7rem .9rem;
}
.xs-kpi-val    { font-size: 1.35rem; font-weight: 700; color: #1a2f45; line-height: 1.2; }
.xs-kpi-lab    { font-size: .74rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.xs-kpi--ok  .xs-kpi-val { color: #1e7a3c; }
.xs-kpi--bad .xs-kpi-val { color: #b3261e; }

.xs-subtitle { font-size: .95rem; font-weight: 700; color: #1a2f45; margin: 1.25rem 0 .5rem; }
.xs-dot  { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.xs-bar      { background: #eef3f8; border-radius: 5px; height: 8px; overflow: hidden; }
.xs-bar-fill { height: 100%; border-radius: 5px; }

/* La barra de pestañas de Cross-sell son enlaces, no botones: hay que quitarles
   el subrayado y darles la altura de un botón del segmentado. */
.ct-seg--nav .ct-seg-btn { text-decoration: none; }
.ct-seg--nav .ct-seg-btn:hover { text-decoration: none; }

html[data-theme="dark"] .xs-card,
html[data-theme="dark"] .xs-kpi      { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .xs-card-n,
html[data-theme="dark"] .xs-card-t,
html[data-theme="dark"] .xs-kpi-val,
html[data-theme="dark"] .xs-subtitle { color: var(--text); }
html[data-theme="dark"] .xs-card-d,
html[data-theme="dark"] .xs-card-act,
html[data-theme="dark"] .xs-kpi-lab  { color: var(--text-muted); }
html[data-theme="dark"] .xs-card-acts{ border-top-color: var(--border); }
html[data-theme="dark"] .xs-card-act:hover,
html[data-theme="dark"] .xs-card-act--main { color: var(--acento); }
html[data-theme="dark"] .xs-bar      { background: var(--bg-card-2); }

/* ── Pestañas de cartera + próxima renovación (mockup 4.2) ────────────────
   El segmentado repite el lenguaje visual del selector de período de
   Oportunidades: la misma app no debería tener dos maneras de pintar lo mismo. */
.ct-seg {
    display: inline-flex; background: #eef3f8; border-radius: 10px;
    padding: 3px; gap: 2px; margin-bottom: .75rem;
}
.ct-seg-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: none; background: transparent; cursor: pointer;
    color: #5a6b80; font-size: .85rem; font-weight: 600;
    padding: .45rem .9rem; border-radius: 8px;
    transition: background .12s, color .12s;
}
.ct-seg-btn:hover { color: #1a2f45; }
.ct-seg-btn.active { background: #fff; color: #00A0E3; box-shadow: 0 1px 3px rgba(15,40,80,.12); }
.ct-seg-count {
    font-size: .72rem; font-weight: 700; line-height: 1;
    padding: .2rem .4rem; border-radius: 6px;
    background: rgba(15,40,80,.08); color: inherit;
}
.ct-seg-btn.active .ct-seg-count { background: rgba(0,160,227,.12); }

.reno-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
    padding: .15rem .45rem; border-radius: 6px;
}
.reno-badge--ok   { background: #eaf7ee; color: #1e7a3c; }
.reno-badge--prox { background: #fff4e0; color: #a35c00; }
.reno-badge--venc { background: #fdecec; color: #b3261e; }
.reno-sin { font-size: .78rem; color: #94a3b8; font-style: italic; }

html[data-theme="dark"] .ct-seg        { background: var(--bg-card-2); }
html[data-theme="dark"] .ct-seg-btn    { color: var(--text-muted); }
html[data-theme="dark"] .ct-seg-btn:hover { color: var(--text); }
html[data-theme="dark"] .ct-seg-btn.active { background: var(--bg-card); color: var(--acento); }
html[data-theme="dark"] .ct-seg-count  { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .reno-badge--ok   { background: rgba(40,167,69,.16);  color: #6ee79a; }
html[data-theme="dark"] .reno-badge--prox { background: rgba(253,126,20,.16); color: #ffc078; }
html[data-theme="dark"] .reno-badge--venc { background: rgba(220,53,69,.16);  color: #ff9d9d; }
html[data-theme="dark"] .reno-sin      { color: var(--text-muted); }

/* ── Menú agrupado plegable (Fase 7) ──────────────────────────────────────
   Sólo en el estilo agrupado. Con los grupos cerrados el lateral se lee como
   los cinco apartados del memo; al entrar en una pantalla su grupo se abre. */
.nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: 0; cursor: pointer;
    padding: .7rem .65rem .3rem;
    font-size: .65rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--v3-text-dim); text-align: left;
}
.nav-group-toggle:hover { color: var(--v3-text); }
.nav-group-chevron { font-size: .7rem; transition: transform .15s ease; }
.nav-group-toggle.is-open .nav-group-chevron { transform: rotate(180deg); }
/* Envuelve los items de cada grupo. Se pinta SIEMPRE (tambien en el clasico) para
   que el hueco entre items no dependa del estilo de menu: el gap lo daba
   .sidebar-nav, y al meter los items en un div dejaban de ser hijos suyos. */
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }

/* .sidebar-nav es un flex en columna, y sus hijos se encogen por defecto. Con todos
   los grupos abiertos el contenido no cabe y, en vez de aparecer la barra de scroll
   que ya tiene el lateral, cada fila se aplastaba y se veía cortada por la mitad.
   flex-shrink:0 obliga a que el lateral haga scroll en lugar de comprimir. */
.sidebar-nav > .nav-group-toggle,
.sidebar-nav > .nav-group-items,
.sidebar-nav .nav-section-label,
.sidebar-nav .nav-item { flex-shrink: 0; }

.sidebar-nav > .nav-group-toggle:first-child { padding-top: .25rem; }

html[data-theme="dark"] .nav-group-toggle       { color: var(--text-muted); }
html[data-theme="dark"] .nav-group-toggle:hover { color: var(--acento); }

.ef360 {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: .75rem;
}
.ef360-item {
    flex: 1 1 auto; min-width: 92px;
    border: 1px solid #e5e9f0; border-radius: 10px;
    padding: .45rem .6rem; background: #fff;
}
.ef360-item--senal { border-color: #ffd9a8; background: #fff4e5; }
.ef360-val { font-size: 1.05rem; font-weight: 700; color: #0f172a; line-height: 1.2; }
.ef360-lbl { font-size: .7rem; color: #64748b; text-transform: lowercase; }
.ef360-item--senal .ef360-val { color: #9a5b00; }

html[data-theme="dark"] .ef360-item { background: var(--bg-card); border-color: var(--border); }
html[data-theme="dark"] .ef360-item--senal { background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.4); }
html[data-theme="dark"] .ef360-val  { color: var(--text); }
html[data-theme="dark"] .ef360-lbl  { color: var(--text-muted); }
html[data-theme="dark"] .ef360-item--senal .ef360-val { color: #fcd34d; }

/* Panel de la ficha con las otras fichas del mismo CIF. */
.cif-cruce {
    border: 1px solid #c7d2fe; background: #eef2ff;
    border-radius: 10px; padding: .6rem .7rem; margin-bottom: .75rem;
}
/* Si al otro lado ya hay servicios contratados no es un duplicado cualquiera:
   es una venta cruzada, y se destaca en verde para que se note. */
.cif-cruce--venta { border-color: #b6e4c9; background: #e6f7ec; }
/* Mismo CIF Y mismo nombre: es la misma empresa duplicada. Ámbar, porque es un
   problema de datos que hay que resolver, no una oportunidad. */
.cif-cruce--dup { border-color: #ffd9a8; background: #fff4e5; }
.cif-cruce-head {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; color: #3730a3; margin-bottom: .45rem;
}
.cif-cruce--venta .cif-cruce-head { color: #12734a; }
.cif-cruce--dup   .cif-cruce-head { color: #9a5b00; }
.cif-cruce-nota { font-size: .72rem; color: #64748b; margin: -.2rem 0 .4rem; }

/* ── Señales (Fase 5) ─────────────────────────────────────────────────────
   Cada señal pide una acción distinta, así que se distinguen por color: rojo
   lo vencido, ámbar lo que vence pronto, verde la venta cruzada, azul el resto. */
.sn-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sn-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 999px;
    padding: .3rem .8rem; font-size: .82rem; color: #475569; cursor: pointer;
}
.sn-chip:hover  { border-color: #cbd5e1; }
.sn-chip.is-on  { background: #e0f2fe; border-color: #00A0E3; color: #00658f; font-weight: 600; }
.sn-chip-n {
    font-size: .72rem; font-weight: 700; background: #eef1f5; color: #475569;
    border-radius: 999px; padding: 0 .4rem; min-width: 1.4rem; text-align: center;
}
.sn-chip.is-on .sn-chip-n { background: #fff; color: #00658f; }
/* Pastilla que no entra en «Todas»: se separa para que se note que es aparte. */
.sn-chip--aparte { margin-left: .6rem; border-style: dashed; }

.sn-badge {
    display: inline-block; font-size: .72rem; font-weight: 600;
    border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.sn-badge--venc  { background: #fdecec; color: #b42318; border: 1px solid #f6c6c2; }
.sn-badge--prox  { background: #fff4e5; color: #9a5b00; border: 1px solid #ffd9a8; }
.sn-badge--cruce { background: #e6f7ec; color: #12734a; border: 1px solid #b6e4c9; }
.sn-badge--reg   { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.sn-badge--mono  { background: #eef1f5; color: #6b7c93; border: 1px solid #d7dee6; }

html[data-theme="dark"] .sn-chip    { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .sn-chip.is-on { background: rgba(0,160,227,.18); border-color: var(--acento); color: var(--text); }
html[data-theme="dark"] .sn-chip-n  { background: var(--bg-card-2); color: var(--text-muted); }
html[data-theme="dark"] .sn-badge--venc  { background: rgba(220,53,69,.18); color: #f2a0a0; border-color: rgba(220,53,69,.4); }
html[data-theme="dark"] .sn-badge--prox  { background: rgba(217,119,6,.18);  color: #fcd34d; border-color: rgba(217,119,6,.4); }
html[data-theme="dark"] .sn-badge--cruce { background: rgba(22,163,74,.18);  color: #7ee2a8; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .sn-badge--reg   { background: rgba(79,70,229,.18);  color: #a5b4fc; border-color: rgba(79,70,229,.4); }
html[data-theme="dark"] .sn-badge--mono  { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border); }
.cif-cruce-item {
    display: block; text-decoration: none; padding: .3rem .4rem;
    border-radius: 6px; color: inherit;
}
.cif-cruce-item:hover { background: rgba(255,255,255,.7); text-decoration: none; }
.cif-cruce-nom  { display: block; font-size: .82rem; font-weight: 600; color: #0f172a; }
.cif-cruce-meta { display: block; font-size: .72rem; color: #64748b; }

html[data-theme="dark"] .cif-dup   { background: rgba(79,70,229,.18); color: #a5b4fc; border-color: rgba(79,70,229,.4); }
html[data-theme="dark"] .cif-cruce { background: rgba(79,70,229,.12); border-color: rgba(79,70,229,.35); }
html[data-theme="dark"] .cif-cruce--venta { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .cif-cruce--dup   { background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.4); }
html[data-theme="dark"] .cif-cruce--dup .cif-cruce-head { color: #fcd34d; }
html[data-theme="dark"] .cif-cruce-nota   { color: var(--text-muted); }
html[data-theme="dark"] .cif-cruce-head        { color: #a5b4fc; }
html[data-theme="dark"] .cif-cruce--venta .cif-cruce-head { color: #7ee2a8; }
html[data-theme="dark"] .cif-cruce-nom         { color: var(--text); }
html[data-theme="dark"] .cif-cruce-meta        { color: var(--text-muted); }
html[data-theme="dark"] .cif-cruce-item:hover  { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .estado-cli--canc { background: rgba(220,53,69,.18); color: #f2a0a0; border-color: rgba(220,53,69,.4); }
html[data-theme="dark"] .estado-cli--susp { background: rgba(217,119,6,.18);  color: #fcd34d; border-color: rgba(217,119,6,.4); }

/* Facturado real de los ultimos 12 meses, en la cabecera de la pestana Productos. */
.ef-prod-total12 {
    margin-left: auto;
    font-size: .82rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.ef-prod-total12 strong { color: #0f172a; }
.ef-prod-fechas { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .35rem; font-size: .82rem; color: #64748b; }
.ef-prod-fechas strong { color: #334155; }
.ef-prod-coment { margin-top: .35rem; font-size: .82rem; color: #64748b; font-style: italic; }
.ef-prod-venc { color: #dc3545 !important; }
.ef-prod-card--canc { opacity: .7; }
.ef-prod-card--canc .ef-sede-title { color: #64748b; }
.ef-det-venc { color: #dc3545; font-weight: 600; }
.ef-prod-nocli {
    display: flex; align-items: flex-start; gap: .5rem;
    background: #fff7e6; color: #92640a; border: 1px solid #ffe0a3; border-radius: 8px;
    padding: .6rem .8rem; font-size: .85rem; line-height: 1.45; margin-bottom: .75rem;
}
.ef-prod-nocli i { flex: 0 0 auto; margin-top: .1rem; font-size: 1rem; }
.ef-prod-nocli span { flex: 1 1 auto; }
html[data-theme="dark"] .ef-prod-nocli { background: rgba(224,168,0,.14); color: #ffd98a; border-color: rgba(224,168,0,.4); }

/* Badge de estado en la tabla admin de productos */
.pr-badge { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.pr-badge--on  { background: #e6f7ec; color: #12734a; border: 1px solid #b6e4c9; }
.pr-badge--off { background: #eef1f5; color: #6b7c93; border: 1px solid #d7dee6; }
/* Servicio exigido por normativa (LOPD-RGPD, PRL, canal de denuncias...). */
.pr-badge--reg { background: #fff4e5; color: #9a5b00; border: 1px solid #ffd9a8; }
.pr-badge--seg { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; font-weight: 600; }
.pr-badge--rep { background: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4; }

/* Etiqueta de familia de producto. El color lo pone cada familia (--fam-color),
   asi que la regla es una sola y sirve para todas las que se den de alta. */
.fam-tag { display: inline-flex; align-items: center; gap: .38rem; font-size: .84rem; white-space: nowrap; }
.fam-tag-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--fam-color, #94a3b8); flex-shrink: 0; }
.fam-tag--none { color: #94a3b8; font-style: italic; }

/* Nota del contacto: el texto tal cual lo escribio el comercial, respetando
   sus saltos de linea. Ancho limitado porque un parrafo a 1200px no se lee. */
/* Candidatos al buscar un cliente por nombre en Inf. Cliente. */
.gt-inf-candidatos { margin: .35rem 0 .75rem; max-height: 300px; overflow: auto; }
/* Exportar: separado del resto de la barra, que son filtros y no acciones. */
.gt-inf-exp { display: inline-flex; gap: .35rem; margin-left: auto; padding-left: .6rem; }

.cf-nota {
    padding: 1rem 1.15rem;
    background: #fbfdff;
    border: 1px solid #e6ecf3;
    border-left: 3px solid var(--v3-accent, #00A0E3);
    border-radius: 8px;
    max-width: 70ch;
    font-size: .92rem;
    line-height: 1.65;
    color: #2c3e50;
    white-space: normal;
    overflow-wrap: anywhere;
}
html[data-theme="dark"] .cf-nota { background: #16202c; border-color: #22303f; color: #d7e2ee; }
html[data-theme="dark"] .fam-tag--none { color: #64748b; }

/* Contador de usuarios del listado de proveedores: abre el detalle de quienes son. */
/* Precios del catálogo: una línea por proveedor. */
.pr-precio { font-size: .86rem; line-height: 1.5; }
.pr-precio-prov { display: inline-block; min-width: 34px; color: #64748b; font-family: monospace; font-size: .8rem; }
html[data-theme="dark"] .pr-precio-prov { color: #94a3b8; }

/* Comercial responsable de un contrato. */
.co-comercial { color: #0369a1; font-weight: 500; }
html[data-theme="dark"] .co-comercial { color: #7dd3fc; }

.pv-usu-link { color: #0369a1; font-weight: 600; text-decoration: none; }
.pv-usu-link:hover { text-decoration: underline; }
html[data-theme="dark"] .pv-usu-link { color: #7dd3fc; }

html[data-theme="dark"] .ef-prod-badge--ok   { background: rgba(22,163,74,.18);  color: #7ee2a8; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .ef-prod-badge--venc { background: rgba(220,53,69,.18);   color: #f2a0a0; border-color: rgba(220,53,69,.4); }
html[data-theme="dark"] .ef-prod-badge--canc { background: var(--bg-card-2);      color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .ef-prod-badge--susp { background: rgba(217,119,6,.18);   color: #fcd34d; border-color: rgba(217,119,6,.4); }
html[data-theme="dark"] .ef-prod-badge--pend { background: rgba(79,70,229,.18);   color: #a5b4fc; border-color: rgba(79,70,229,.4); }
html[data-theme="dark"] .ef-prod-total12       { color: var(--text-muted); }
html[data-theme="dark"] .ef-prod-total12 strong { color: var(--text); }
html[data-theme="dark"] .ef-prod-fechas { color: var(--text-muted); }
html[data-theme="dark"] .ef-prod-fechas strong { color: var(--text); }
html[data-theme="dark"] .ef-prod-coment { color: var(--text-muted); }
html[data-theme="dark"] .pr-badge--on  { background: rgba(22,163,74,.18); color: #7ee2a8; border-color: rgba(22,163,74,.4); }
html[data-theme="dark"] .pr-badge--off { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .pr-badge--reg { background: rgba(217,119,6,.18); color: #fcd34d; border-color: rgba(217,119,6,.4); }
html[data-theme="dark"] .pr-badge--seg { background: rgba(99,102,241,.18); color: #c7d2fe; border-color: rgba(99,102,241,.4); }
html[data-theme="dark"] .pr-badge--rep { background: rgba(13,148,136,.18); color: #99f6e4; border-color: rgba(13,148,136,.4); }


/* ─────────────────────────────────────────────────────────────────────
   DOCUMENTOS — panel de la pestaña en las fichas (Scripts/crm-documentos.js)
   y filas de la pantalla "Mis documentos".
   ───────────────────────────────────────────────────────────────────── */
.doc-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.doc-msg { font-size: .84rem; color: #64748b; }
.doc-msg.is-error { color: #dc3545; }

.doc-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid #e6ecf3; border-radius: 8px;
    background: #fff; margin-bottom: 8px;
}
.doc-item:hover { border-color: #cfe3f5; background: #fbfdff; }
.doc-item-ico { font-size: 1.35rem; color: var(--v3-accent, #00A0E3); line-height: 1.2; }
.doc-item-body { flex: 1; min-width: 0; }
.doc-item-tit { font-weight: 600; color: #1f2d3d; text-decoration: none; word-break: break-word; }
.doc-item-tit:hover { text-decoration: underline; }
.doc-item-desc { font-size: .8rem; color: #64748b; margin-top: 2px; word-break: break-word; }
.doc-item-meta { font-size: .78rem; color: #94a3b8; margin-top: 3px; }
.doc-item-acts { display: flex; gap: 4px; flex-shrink: 0; }

html[data-theme="dark"] .doc-item { background: #16202c; border-color: #22303f; }
html[data-theme="dark"] .doc-item:hover { background: #1a2634; border-color: #2c3f52; }
html[data-theme="dark"] .doc-item-tit { color: #d7e2ee; }
html[data-theme="dark"] .doc-item-desc,
html[data-theme="dark"] .doc-item-meta,
html[data-theme="dark"] .doc-msg { color: #94a3b8; }

/* Documentos — cabecera del panel: subir + buscador en la misma línea. */
.doc-buscar { position: relative; flex: 1; min-width: 180px; }
.doc-buscar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .9rem; }
.doc-buscar input {
    width: 100%; padding: 6px 10px 6px 30px; border: 1px solid #e6ecf3;
    border-radius: 8px; font-size: .86rem; background: #fff; color: #1f2d3d;
}
.doc-buscar input:focus { outline: none; border-color: var(--v3-accent, #00A0E3); }

/* Formulario de subida (plegado hasta que se pide). */
.doc-form { border: 1px solid #e6ecf3; border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #fbfdff; }
.doc-form-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-form-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px; }
.doc-form-field--ancho { flex: 2; min-width: 220px; }
.doc-form-field > span { font-size: .78rem; color: #64748b; font-weight: 600; }
.doc-form-field input {
    padding: 6px 10px; border: 1px solid #e6ecf3; border-radius: 8px;
    font-size: .86rem; background: #fff; color: #1f2d3d;
}
.doc-form-field input:focus { outline: none; border-color: var(--v3-accent, #00A0E3); }
.doc-form-files { font-size: .82rem; color: #64748b; margin: 8px 0; word-break: break-word; }
.doc-form-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

/* Tipo de documento y distintivo de "tiene documentación". */
.doc-tipo-badge {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: #e0f2fe; color: #075985; border: 1px solid #bae6fd;
    font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.doc-chip { color: #0369a1; font-weight: 600; }
.doc-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Pie: "Mostrando X–Y de Z" a la izquierda, botones a la derecha. */
.doc-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.doc-pager-info { font-size: .8rem; color: #64748b; }

html[data-theme="dark"] .doc-buscar input,
html[data-theme="dark"] .doc-form-field input { background: #16202c; border-color: #22303f; color: #d7e2ee; }
html[data-theme="dark"] .doc-form { background: #131c26; border-color: #22303f; }
html[data-theme="dark"] .doc-form-field > span,
html[data-theme="dark"] .doc-form-files,
html[data-theme="dark"] .doc-pager-info { color: #94a3b8; }
html[data-theme="dark"] .doc-tipo-badge { background: rgba(2,132,199,.18); color: #7dd3fc; border-color: rgba(2,132,199,.4); }
html[data-theme="dark"] .doc-chip { color: #7dd3fc; }