/* _content/netsynerCRM/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xfuzn40s1h] {
    min-height: 100vh;
}

/* Contenedor global (barra sup + cuerpo) */
.layout-shell[b-xfuzn40s1h] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Checkbox de menú móvil */
.main-menu-toggle[b-xfuzn40s1h] {
    display: none;
}

/* ======= BARRA SUPERIOR ======= */

.top-row[b-xfuzn40s1h] {
    background-color: #000;
    border-bottom: 1px solid #d6d5d5;
    height: 3.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales -> centro REAL */
    align-items: center;
    column-gap: 1rem;
    color: #fff;
}

.top-left[b-xfuzn40s1h] {
    display: flex;
    align-items: center;
    color:#fff;
}

/* Logo grande y limpio */
.crm-splash-logo-header[b-xfuzn40s1h] {
    width: 50px;
    height: 50px;

}

    .crm-splash-logo-header img[b-xfuzn40s1h] {
        width: 50px;
        height: 50px; /* ✅ antes tenías 5600px */
      
    }

.top-brand[b-xfuzn40s1h] {
    font-size: 1.05rem;
    font-weight: 600;
}

.top-brand-full[b-xfuzn40s1h] {
    display: inline;
}

.top-brand-short[b-xfuzn40s1h] {
    display: none;
}

.top-center[b-xfuzn40s1h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.2;
}

.top-empresa[b-xfuzn40s1h] {
    font-weight: 500;
}

.top-user-mobile[b-xfuzn40s1h] {
    opacity: 0.8;
}

.top-right[b-xfuzn40s1h] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.top-user-desktop[b-xfuzn40s1h] {
    font-weight: 500;
}

/* Iconos escritorio */
.top-icon-btn[b-xfuzn40s1h] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
}

    .top-icon-btn:hover[b-xfuzn40s1h] {
        background-color: rgba(0, 0, 0, 0.04);
    }

/* Logout escritorio */
.top-logout-desktop[b-xfuzn40s1h] {
    margin:0px 0px 0px 12px;
    border-radius: 999px;
    padding-inline: 0.9rem;
    padding-block: 0.3rem;
    font-size: 0.8rem;
    color: #fff;
    border:solid #fff 2px ;
}

/* Icono mensajes */
.top-icon-btn.msg-bell[b-xfuzn40s1h] {
    font-size: 20px; /* antes heredaba 16px aprox */
    line-height: 1;
}


/* Botón menú (hamburguesa) */
.top-menu-btn[b-xfuzn40s1h] {
    display: none; /* por defecto oculto; solo móvil la muestra */
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ======= CUERPO (sidebar + contenido) ======= */

.layout-body[b-xfuzn40s1h] {
    display: flex;
    flex: 1;
    min-height: 0;
    max-width: 100%; /* nunca más ancho que la ventana */
    overflow-x: hidden; /* bloquea scroll horizontal del área de páginas */
}


/* Sidebar de menú */
.sidebar[b-xfuzn40s1h] {
    width: 250px;
    background-color: #000000; /* negro en escritorio */
    color: #ffffff;
}

/* main ocupa el resto */
.layout-body main[b-xfuzn40s1h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden; /* por si algún hijo se pasa */
}

article.content[b-xfuzn40s1h] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
/*    padding-top: 1.25rem;
    padding-bottom: 1.5rem;*/
    overflow-x: hidden; /* la página nunca genera scroll lateral */
}

/* ========= ESCRITORIO (>= 769px) ========= */

@media (min-width: 769px) {

    .layout-body[b-xfuzn40s1h] {
        flex-direction: row;
    }

    .sidebar[b-xfuzn40s1h] {
        display: block;
    }

    /* Usuario móvil no se ve en escritorio */
    .top-user-mobile[b-xfuzn40s1h], .crm-splash-logo-header[b-xfuzn40s1h] {
        display: none;
    }

    /* Botón menú solo móvil */
    .top-menu-btn[b-xfuzn40s1h] {
        display: none;
    }
}

/* ========= MÓVIL / TABLET (<= 768px) ========= */

@media (max-width: 768px) {

    .layout-shell[b-xfuzn40s1h] {
        min-height: 100vh;
    }

    .top-row[b-xfuzn40s1h] {
        grid-template-columns: 1fr 1fr auto;
        row-gap: 0.25rem;
        padding-inline: 1rem !important;
    }

    .top-left[b-xfuzn40s1h] {
        align-items: center;
    }

    .top-center[b-xfuzn40s1h] {
        align-items: center;
    }

    .top-right[b-xfuzn40s1h] {
        justify-content: flex-end;
    }

    /* En móvil: solo se ve empresa+usuario en centro y burger a la derecha */
    .top-user-desktop[b-xfuzn40s1h],
    .top-logout-desktop[b-xfuzn40s1h], .top-brand-pc[b-xfuzn40s1h] {
        display: none;
    }

    /* En móvil ocultamos iconos genéricos, pero dejamos Notificaciones (y futuro Mensajes) */
    .top-icon-btn[b-xfuzn40s1h] {
        display: none;
    }

        .top-icon-btn.notif-bell[b-xfuzn40s1h],
        .top-icon-btn.msg-bell[b-xfuzn40s1h] {
            display: inline-block;
        }

    .top-brand-full[b-xfuzn40s1h] {
        display: none;
    }

    .top-brand-short[b-xfuzn40s1h] {
        display: inline;
    }


    .top-menu-btn[b-xfuzn40s1h] {
        display: inline-block;
    }

    /* Cuerpo en columna; sidebar debajo de la barra superior */
    .layout-body[b-xfuzn40s1h] {
        flex-direction: column;
    }

    .sidebar[b-xfuzn40s1h] {
        width: 100%;
        display: none; /* oculta por defecto */
    }

    /* Cuando el checkbox está marcado mostramos el menú justo debajo de la barra */
    .main-menu-toggle:checked ~ .layout-shell .sidebar[b-xfuzn40s1h] {
        display: block;
    }
}

/* Error UI por defecto */
#blazor-error-ui[b-xfuzn40s1h] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xfuzn40s1h] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/* =========================================================
   GLOBAL LOADING OVERLAY (MainLayout)
   ========================================================= */
.global-loading-backdrop[b-xfuzn40s1h] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* por encima del layout y del error-ui */
}

.global-loading-card[b-xfuzn40s1h] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    max-width: calc(100vw - 32px);
}

    .global-loading-card .loading-text[b-xfuzn40s1h] {
        font-size: 0.95rem;
        font-weight: 600;
        opacity: 0.85;
        white-space: nowrap;
    }

    .global-loading-card .spinner[b-xfuzn40s1h] {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 3px solid rgba(0, 0, 0, 0.18);
        border-top-color: rgba(0, 0, 0, 0.55);
        animation: globalSpin-b-xfuzn40s1h 0.85s linear infinite;
    }

@keyframes globalSpin-b-xfuzn40s1h {
    to {
        transform: rotate(360deg);
    }
}


/* =========================
   MainLayout.razor.css
   SOLO: Notificaciones (icono + badge + overlay)
   ========================= */

.notif-overlay[b-xfuzn40s1h] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;
}

.notif-bell[b-xfuzn40s1h] {
    position: relative;
}

    .notif-bell .notif-badge[b-xfuzn40s1h] {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .notif-bell .notif-badge[b-xfuzn40s1h] {
        background: #0d6efd; /* azul bootstrap */
        color: #fff;
        font-weight: 800;
        border: 2px solid #f7f7f7; /* para que “flote” encima del header */
    }
/* ===== NOTIFICACIONES (panel + overlay) ===== */

:deep(.notif-panel)[b-xfuzn40s1h] {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    box-shadow: -12px 0 32px rgba(0,0,0,.18);
    transition: right .18s ease;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(0,0,0,.08);
}

:deep(.notif-panel.open)[b-xfuzn40s1h] {
    right: 0;
}

@media (max-width: 768px) {
    :deep(.notif-panel)[b-xfuzn40s1h] {
        width: 100vw;
        right: -100vw;
    }
}

.notif-overlay[b-xfuzn40s1h] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;
}


/* ====================== TEMPORAL X SAFARI ======================*/
.top-row[b-xfuzn40s1h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* clave */
    gap: 10px;
    overflow: hidden; /* clave: recorta si algo intenta sobresalir */
}

.top-left[b-xfuzn40s1h], .top-center[b-xfuzn40s1h], .top-right[b-xfuzn40s1h] {
    min-width: 0; /* clave en Safari: permite encoger */
}

.top-center[b-xfuzn40s1h] {
    flex: 1 1 auto; /* ocupa lo que pueda, pero se deja encoger */
    overflow: hidden;
}

.top-empresa[b-xfuzn40s1h],
.top-user-mobile[b-xfuzn40s1h],
.top-user-desktop[b-xfuzn40s1h]{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/netsynerCRM/Components/Layout/NavMenu.razor.rz.scp.css */
/* Contenedor general del menú */
.crm-nav-wrapper[b-h63iweellr] {
    padding: 0.9rem 0.8rem 1.5rem;
    background-color: #000; /* negro en todas las resoluciones */
    color: #fff;
}

/* El UL “virtual” del menú */
.crm-nav[b-h63iweellr] {
    display: block;
}

/* Cada item del menú */
.crm-nav-item[b-h63iweellr] {
    font-size: 0.95rem;
    margin-bottom: 0.85rem; /* más espacio entre enlaces */
}

/* Separador menu (TEXTO) */
.separadorMenu[b-h63iweellr] {
    padding:0.60rem 1rem;
    font-size:1rem;
    font-weight:600;
    color:#fff;
    background-color:rgba(255, 255, 255, 0.15)
}

/* ENLACES (NavLink → <a>) */
/* ::deep para asegurarnos de ganar a Bootstrap */
[b-h63iweellr] a.crm-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.9rem;
    text-decoration: none; /* quitar subrayado */
    color: #ffffff; /* blanco siempre */
    background-color: transparent;
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}

    /* Estado activo */
    [b-h63iweellr] a.crm-nav-link.active {
        background-color: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }

    /* Hover */
    [b-h63iweellr] a.crm-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        transform: translateX(2px);
    }

    /* ICONOS dentro del enlace */
    [b-h63iweellr] a.crm-nav-link .bi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.2rem;
        height: 1.2rem;
        background-size: cover;
    }

/* SVG embebidos */
.bi-house-door-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 0-1 0v-3h-3a.5.5 0 0 0 0-1h3v-3a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-6.936 4.936A2.5 2.5 0 0 1 7.5 9c.703 0 1.36.258 1.865.703-.888.297-1.66.805-2.187 1.447-.447.546-.722 1.164-.87 1.786-.115.486-.114.906-.05 1.233H2s-1 0-1-1 1-4 5-4c.297 0 .58.016.852.047a3.5 3.5 0 0 0-1.802 1.72 2.5 2.5 0 0 0-.936 1.999ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-shield-lock-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.303-2.273.662-3.135.86A1.54 1.54 0 0 0 .8 2.956c-.104 1.364.163 4.008 1.084 6.237.92 2.23 2.833 4.433 6.053 5.67a.22.22 0 0 0 .127 0c3.22-1.237 5.133-3.44 6.053-5.67.92-2.23 1.188-4.873 1.084-6.237a1.54 1.54 0 0 0-1.137-1.536c-.862-.198-2.024-.557-3.135-.86C9.843.265 8.69 0 8 0z'/%3E%3Cpath d='M8 5a1.5 1.5 0 0 0-1.5 1.5v1H6a1 1 0 0 0-1 1v2.5A1.5 1.5 0 0 0 6.5 13h3A1.5 1.5 0 0 0 11 11.5V9a1 1 0 0 0-1-1h-.5v-1A1.5 1.5 0 0 0 8 5zm.5 3v-1a.5.5 0 0 0-1 0v1h1z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.132.948l-.31-.17c-1.244-.68-2.73.806-2.05 2.05l.17.31c.446.81.023 1.841-.948 2.132l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1c.971.291 1.394 1.322.948 2.132l-.17.31c-.68 1.244.806 2.73 2.05 2.05l.31-.17c.81-.446 1.841-.023 2.132.948l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.132-.948l.31.17c1.244.68 2.73-.806 2.05-2.05l-.17-.31a1.464 1.464 0 0 1 .948-2.132l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.948-2.132l.17-.31c.68-1.244-.806-2.73-2.05-2.05l-.31.17a1.464 1.464 0 0 1-2.132-.948l-.1-.34zM8 10.5A2.5 2.5 0 1 1 8 5.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.bi-box-arrow-right-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

.bi-envelope-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-envelope-fill' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555Z'/%3E%3Cpath d='M0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.809-1.143l-6.57-4.027L8 9.586l-1.239-.757ZM10.197 8.243 16 11.801V4.697l-5.803 3.546Z'/%3E%3C/svg%3E");
}
.bi-calendar-week-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calendar-week-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 .5a.5.5 0 0 1 .5.5V2h7V1a.5.5 0 0 1 1 0V2h.5A1.5 1.5 0 0 1 15 3.5v10A1.5 1.5 0 0 1 13.5 15h-11A1.5 1.5 0 0 1 1 13.5v-10A1.5 1.5 0 0 1 2.5 2H3V1a.5.5 0 0 1 1 0V2h.5V1a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M2 6h12v7.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V6z'/%3E%3Cpath d='M3.5 7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm3-3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm3-3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
}

.bi-clipboard-data-fill-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-clipboard-data-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 0A1.5 1.5 0 0 0 5 1.5V2H3.5A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h9A1.5 1.5 0 0 0 14 14.5v-11A1.5 1.5 0 0 0 12.5 2H11v-.5A1.5 1.5 0 0 0 9.5 0h-3zM6 1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V2H6v-.5z'/%3E%3Cpath d='M4.5 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5zm2 1a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm2-2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .5-.5zm2 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
}

.bi-arrow-clockwise-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-clockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.418A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 1 .41-.192l1.966 1.966a.25.25 0 0 1 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/%3E%3C/svg%3E");
}

.bi-renovaciones-nav-menu[b-h63iweellr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 2.5A6.5 6.5 0 0 1 14 7a1 1 0 1 1-2 0 4.5 4.5 0 0 0-7.65-3.182L5.2 4.6A.8.8 0 0 1 4.64 6H2.2A1.2 1.2 0 0 1 1 4.8V2.36A.8.8 0 0 1 2.4 1.8l.6.6A6.47 6.47 0 0 1 3 2.5Z' fill='white'/%3E%3Cpath d='M13 13.5A6.5 6.5 0 0 1 2 9a1 1 0 1 1 2 0 4.5 4.5 0 0 0 7.65 3.182L10.8 11.4A.8.8 0 0 1 11.36 10h2.44A1.2 1.2 0 0 1 15 11.2v2.44a.8.8 0 0 1-1.4.56l-.6-.6c.0 0 .0 0 0 0Z' fill='white'/%3E%3C/svg%3E");
}






/* Logout solo móvil */
.crm-nav-logout-mobile[b-h63iweellr] {
    display: none;
    border-radius: 10px;
    padding: 8px 12px;
}

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

@media (max-width: 768px) {
    .crm-nav-wrapper[b-h63iweellr] {
        padding-inline: 1rem;
        padding-bottom: 1.25rem;
    }

    .crm-nav-logout-mobile[b-h63iweellr] {
        display: block;
        border-radius: 10px;
    }

    .crm-nav-logout-button[b-h63iweellr] {
        padding:5px 10px;
        border:solid 1px #000;
        border-radius: 10px;
        background-color:#fff;
        color:#020b3b;
        font-weight:600;
    }

    .bi-box-arrow-right-nav-menu[b-h63iweellr] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
    }

}
.crm-nav-link .bi[b-h63iweellr] {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}
/* _content/netsynerCRM/Components/Pages/Agenda.razor.rz.scp.css */
/* =========================================================
   AGENDA (página /agenda)
   - Submenú superior (tabs) estilo Configuración (barra gris)
   - Acciones en fila 2
   - Calendario semanal (ANTES: cards) ✅ AHORA: TABLA / GRID
   - Servicios (cards)
   - Modal SIEMPRE CLARA (independiente del modo)
   ========================================================= */


/* =========================================================
   1) CONTENEDOR + HEADER
   ========================================================= */
.agenda-shell[b-4xm9xsvaio] {
    padding: 16px;
}

.agenda-header[b-4xm9xsvaio] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .agenda-header .title h1[b-4xm9xsvaio] {
        margin: 0;
    }

    .agenda-header .subtitle[b-4xm9xsvaio] {
        opacity: .7;
        margin-top: 4px;
    }

/* Acciones (navegación semana + botones) */
.agenda-actions[b-4xm9xsvaio] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.week-nav[b-4xm9xsvaio] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Hint / ayuda en cabecera */
.agenda-hint[b-4xm9xsvaio] {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(15,23,42,.18);
    background: rgba(15,23,42,.03);
    color: #0f172a;
    font-weight: 800;
    opacity: .9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.dark .agenda-hint[b-4xm9xsvaio] {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
}

/* Rango (texto de semana) */
.range[b-4xm9xsvaio] {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,.12);
    background: rgba(15,23,42,.04);
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   2) TABS estilo Configuración
   Usa: .agenda-tabs .tab .active
   ========================================================= */
.agenda-tabs[b-4xm9xsvaio] {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 14px;
    background: rgba(15,23,42,.05);
    border: 1px solid rgba(15,23,42,.10);
    overflow-x: auto;
}

    .agenda-tabs .tab[b-4xm9xsvaio] {
        appearance: none;
        border: 1px solid rgba(15,23,42,.14);
        background: rgba(255,255,255,.92);
        color: #0f172a;
        border-radius: 12px;
        padding: 9px 14px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        transition: background .12s ease, transform .08s ease, border-color .12s ease, opacity .12s ease, box-shadow .12s ease;
        user-select: none;
        white-space: nowrap;
    }

        .agenda-tabs .tab:hover[b-4xm9xsvaio] {
            background: #ffffff;
            border-color: rgba(15,23,42,.20);
            transform: translateY(-1px);
        }

        .agenda-tabs .tab:active[b-4xm9xsvaio] {
            transform: translateY(0px);
        }

        .agenda-tabs .tab.active[b-4xm9xsvaio] {
            background: rgba(59,130,246,.12);
            border-color: rgba(59,130,246,.55);
            color: #0b2a5b;
            box-shadow: 0 0 0 3px rgba(59,130,246,.14);
        }

        .agenda-tabs .tab:disabled[b-4xm9xsvaio] {
            opacity: .55;
            cursor: not-allowed;
            transform: none;
        }


/* =========================================================
   3) CALENDARIO SEMANAL (LEGACY - CARDS)
   ========================================================= */
.agenda-week[b-4xm9xsvaio] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.day-col[b-4xm9xsvaio] {
    border: 1px solid rgba(17,24,39,.12);
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.day-head[b-4xm9xsvaio] {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(17,24,39,.10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15,23,42,.03);
}

.day-name[b-4xm9xsvaio] {
    font-weight: 900;
    text-transform: capitalize;
    color: #0f172a;
}

.day-date[b-4xm9xsvaio] {
    opacity: .7;
    color: #0f172a;
}

.day-body[b-4xm9xsvaio] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.cita-card[b-4xm9xsvaio] {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(17,24,39,.12);
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 12px;
    transition: transform .08s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .cita-card:hover[b-4xm9xsvaio] {
        transform: translateY(-1px);
        border-color: rgba(59,130,246,.28);
        box-shadow: 0 10px 22px rgba(0,0,0,.07);
        background: rgba(59,130,246,.03);
    }

    .cita-card:disabled[b-4xm9xsvaio] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.cita-time[b-4xm9xsvaio] {
    font-weight: 900;
    color: #0f172a;
}

.cita-name[b-4xm9xsvaio] {
    margin-top: 2px;
    color: #0f172a;
}

.cita-service[b-4xm9xsvaio] {
    margin-top: 2px;
    opacity: .75;
    font-size: .92rem;
    color: #334155;
}

.cita-state[b-4xm9xsvaio] {
    margin-top: 6px;
    font-size: .82rem;
    opacity: .75;
    color: #334155;
}

.empty[b-4xm9xsvaio] {
    margin-top: 4px;
    opacity: .55;
    font-size: .92rem;
    color: #334155;
}

.agenda-placeholder[b-4xm9xsvaio] {
    opacity: .7;
    padding: 10px 0;
}


/* =========================================================
   4) ALERTAS
   ========================================================= */
.agenda-alert[b-4xm9xsvaio] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,.12);
    background: rgba(15,23,42,.04);
    color: #0f172a;
}

    .agenda-alert.error[b-4xm9xsvaio] {
        border-color: rgba(220,38,38,.22);
        background: rgba(220,38,38,.06);
        color: #7f1d1d;
    }

    .agenda-alert.warning[b-4xm9xsvaio] {
        border-color: rgba(245,158,11,.22);
        background: rgba(245,158,11,.08);
        color: #7c2d12;
    }


/* =========================================================
   5) MODAL (FIJO Y CORRECTO)
   ========================================================= */

/* Backdrop */
.crm-modal-backdrop[b-4xm9xsvaio] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
}

/* Importante: box-sizing para que nada “sume” de más */
.crm-modal[b-4xm9xsvaio],
.crm-modal *[b-4xm9xsvaio] {
    box-sizing: border-box;
}

/* PC/base: centrado real */
.crm-modal[b-4xm9xsvaio] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid rgba(17,24,39,.14);
    background: #fff;
    color: #111827;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    z-index: 10000;
    height: auto;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header/Footer fijos, body con scroll */
.crm-modal-head[b-4xm9xsvaio] {
    flex: 0 0 auto;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.10);
    background: #fff;
}

.crm-modal-title[b-4xm9xsvaio] {
    font-weight: 800;
    color: #111;
}

.crm-modal-body[b-4xm9xsvaio] {
    flex: 1 1 auto;
    padding: 14px;
    color: #111;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

    .crm-modal-body .form-control[b-4xm9xsvaio],
    .crm-modal-body input[b-4xm9xsvaio],
    .crm-modal-body select[b-4xm9xsvaio],
    .crm-modal-body textarea[b-4xm9xsvaio] {
        max-width: 100%;
    }

.crm-modal-foot[b-4xm9xsvaio] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.10);
    background: #fff;
    flex-wrap: wrap;
}

/* Móvil */
@media (max-width: 576px) {
    .crm-modal[b-4xm9xsvaio] {
        top: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-width: none;
        border-radius: 14px;
        max-height: calc(100dvh - 24px);
    }

    .crm-modal-foot[b-4xm9xsvaio] {
        justify-content: stretch;
        gap: 8px;
    }

        .crm-modal-foot .btn[b-4xm9xsvaio] {
            flex: 1 1 auto;
        }
}


/* =========================================================
   6) SERVICIOS (CARDS)
   ========================================================= */
.services-card[b-4xm9xsvaio] {
    margin-top: 14px;
}

.services-head[b-4xm9xsvaio] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.muted[b-4xm9xsvaio] {
    opacity: .75;
    color: #334155;
}

.servicios-grid[b-4xm9xsvaio] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.servicio-card[b-4xm9xsvaio] {
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.servicio-top[b-4xm9xsvaio] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.servicio-name[b-4xm9xsvaio] {
    font-weight: 900;
    font-size: 1.05rem;
    color: #0f172a;
}

.servicio-badge[b-4xm9xsvaio] {
    font-size: .78rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.12);
    background: rgba(15,23,42,.04);
    color: #0f172a;
    white-space: nowrap;
}

.servicio-meta[b-4xm9xsvaio] {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    font-size: .92rem;
    color: #334155;
}

    .servicio-meta div b[b-4xm9xsvaio] {
        color: #0f172a;
    }

.empty-cell[b-4xm9xsvaio] {
    visibility: hidden;
}

.servicio-actions[b-4xm9xsvaio] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .servicio-actions .left[b-4xm9xsvaio] {
        display: flex;
        gap: 10px;
    }

    .servicio-actions .total[b-4xm9xsvaio] {
        font-size: .92rem;
        color: #0f172a;
        opacity: .9;
        white-space: nowrap;
    }


/* =========================================================
   7) RESPONSIVE (GENERAL)
   ========================================================= */
@media (max-width: 900px) {

    .agenda-week[b-4xm9xsvaio] {
        grid-template-columns: 1fr;
    }

    .form-grid2[b-4xm9xsvaio] {
        grid-template-columns: 1fr;
    }

    .servicios-grid[b-4xm9xsvaio] {
        grid-template-columns: 1fr;
    }

    .agenda-actions[b-4xm9xsvaio] {
        align-items: stretch;
    }

    .week-nav[b-4xm9xsvaio] {
        width: 100%;
    }

    .servicio-actions[b-4xm9xsvaio] {
        align-items: stretch;
        flex-direction: column;
    }

        .servicio-actions .total[b-4xm9xsvaio] {
            text-align: left;
        }
}


/* =========================================================
   8) CONFIG (CARD) (sección Config dentro de Agenda)
   ========================================================= */
.config-card[b-4xm9xsvaio] {
    margin-top: 14px;
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.config-head[b-4xm9xsvaio] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.config-grid[b-4xm9xsvaio] {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.config-item[b-4xm9xsvaio] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 14px;
    background: rgba(15,23,42,.02);
}

.config-label .ttl[b-4xm9xsvaio] {
    font-weight: 900;
    color: #0f172a;
}

.config-label .sub[b-4xm9xsvaio] {
    margin-top: 2px;
    font-size: .92rem;
    color: #334155;
    opacity: .8;
}

/* Switch moderno */
.switch[b-4xm9xsvaio] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex: 0 0 auto;
}

    .switch input[b-4xm9xsvaio] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-4xm9xsvaio] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(15,23,42,.12);
    border: 1px solid rgba(17,24,39,.14);
    transition: .15s ease;
    border-radius: 999px;
}

    .slider[b-4xm9xsvaio]:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        top: 3px;
        background: #fff;
        border: 1px solid rgba(17,24,39,.12);
        transition: .15s ease;
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(0,0,0,.10);
    }

.switch input:checked + .slider[b-4xm9xsvaio] {
    background: rgba(59,130,246,.35);
    border-color: rgba(59,130,246,.45);
}

    .switch input:checked + .slider[b-4xm9xsvaio]:before {
        transform: translateX(22px);
    }

.switch input:disabled + .slider[b-4xm9xsvaio] {
    opacity: .55;
    cursor: not-allowed;
}


/* =========================================================
   9) HORARIOS (sin tocar HTML)
   ========================================================= */
.horarios-grid[b-4xm9xsvaio] {
    display: grid;
    gap: 14px;
}

.horario-row[b-4xm9xsvaio] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 14px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.horario-day[b-4xm9xsvaio] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(0,0,0,.12);
}

    .horario-day .ttl[b-4xm9xsvaio] {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .2px;
    }

    .horario-day .sub[b-4xm9xsvaio] {
        font-size: 12px;
        opacity: .75;
    }

.horario-times[b-4xm9xsvaio] {
    display: grid;
    gap: 10px;
}

    .horario-times .time-field[b-4xm9xsvaio] {
        display: grid;
        gap: 6px;
    }

.horario-active[b-4xm9xsvaio] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    justify-content: flex-end;
}

/* Desktop: 2 columnas */
@media (min-width: 768px) {
    .horario-times[b-4xm9xsvaio] {
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 10px;
        align-items: end;
    }

        .horario-times .time-field[style*="display:flex"][b-4xm9xsvaio] {
            grid-column: 1 / -1;
            justify-content: flex-start;
        }
}

.horario-row input:disabled[b-4xm9xsvaio] {
    opacity: .65;
    cursor: not-allowed;
}


/* =========================================================
   10) BOTONES PROPIOS AGENDA (sin Bootstrap)
   ========================================================= */
.agenda-btn[b-4xm9xsvaio] {
    appearance: none;
    border: 1px solid rgba(15,23,42,.18);
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform .08s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
    user-select: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .agenda-btn:hover[b-4xm9xsvaio] {
        transform: translateY(-1px);
        border-color: rgba(15,23,42,.28);
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
    }

    .agenda-btn:active[b-4xm9xsvaio] {
        transform: translateY(0);
    }

    .agenda-btn:disabled[b-4xm9xsvaio],
    .agenda-btn[disabled][b-4xm9xsvaio] {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

.agenda-btn-primary[b-4xm9xsvaio] {
    background: rgba(59,130,246,.12);
    border-color: rgba(59,130,246,.55);
    color: #0b2a5b;
    box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}

    .agenda-btn-primary:hover[b-4xm9xsvaio] {
        background: rgba(59,130,246,.18);
        border-color: rgba(59,130,246,.75);
    }

.agenda-btn-success[b-4xm9xsvaio] {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.55);
    color: #14532d;
    box-shadow: 0 0 0 3px rgba(34,197,94,.14);
}

    .agenda-btn-success:hover[b-4xm9xsvaio] {
        background: rgba(34,197,94,.18);
        border-color: rgba(34,197,94,.75);
    }



/* =========================================================
   4) SLOTS GRID (CALENDARIO) — MODERNO / LEGIBLE
   ========================================================= */

/* Contenedor general del calendario */
.slots-grid[b-4xm9xsvaio] {
    margin-top: 14px;
    border: 1px solid #e6e7ea;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* ===== Cabecera (días) ===== */
.slots-head[b-4xm9xsvaio] {
    display: grid;
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
    border-bottom: 1px solid #e6e7ea;
}

.slots-time-head[b-4xm9xsvaio] {
    border-right: 1px solid #e6e7ea;
    background: #f6f8fb;
}

.slots-day-head[b-4xm9xsvaio] {
    padding: 14px 12px 12px 12px;
    text-align: center;
    border-right: 1px solid #e6e7ea;
}

    .slots-day-head:last-child[b-4xm9xsvaio] {
        border-right: none;
    }

    /* (Opcional si tu HTML ya lo imprime así) */
    .slots-day-head .d1[b-4xm9xsvaio] {
        font-weight: 950;
        font-size: 16px;
        line-height: 1.1;
    }

    .slots-day-head .d2[b-4xm9xsvaio] {
        margin-top: 4px;
        font-weight: 800;
        opacity: .65;
        font-size: 13px;
    }

/* ===== Filas (horas) ===== */
.slots-row[b-4xm9xsvaio] {
    display: grid;
    min-height: 92px;
}

    /* Alternancia suave por fila (mejor lectura) */
    .slots-row.hour-a[b-4xm9xsvaio] {
        background: #d2d2d2;
    }

    .slots-row.hour-b[b-4xm9xsvaio] {
        background: #e7e7e7;
    }

    /* Columna de hora */
    .slots-row .slots-time[b-4xm9xsvaio] {
        border-right: 1px solid #e6e7ea;
        padding: 10px 12px;
        font-weight: 950;
        letter-spacing: .2px;
        opacity: .85;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
        color: #111;
    }

/* ===== Celdas ===== */
.slots-cell[b-4xm9xsvaio] {
    position: relative;
    padding: 0;
    background: transparent;
    /* ✅ rejilla visible */
    border-right: 1px solid #e9edf3;
    border-bottom: 1px solid #e9edf3;
    /* ✅ ligera separación interna “visual” */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    overflow: visible; 
    min-height: 92px; 
}

.slots-row .slots-cell:last-child[b-4xm9xsvaio] {
    border-right: none;
}

/* Separador de hora más “premium” */
.slots-cell.slot-hour-sep[b-4xm9xsvaio]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: rgba(0,0,0,.12);
    z-index: 3;
}

/* ===== Estados de slot (celda) ===== */
.slots-cell.slot-disponible[b-4xm9xsvaio] {
    background: #e6e6e6;
}

.slots-cell.slot-fuerahorario[b-4xm9xsvaio] {
    background: #1e1e1e
}

.slots-cell.slot-excepcion_cerrado[b-4xm9xsvaio] {
    background: #334155;
}

.slots-cell.slot-bloqueado[b-4xm9xsvaio] {
    background: #e6e6e6;
}

.slots-cell.slot-ocupado[b-4xm9xsvaio] {
    background: #ffffff;
}

/* Estado de cita también pinta la celda */
.slots-cell.slot-cita-pendiente[b-4xm9xsvaio] {
    background: rgb(118, 167, 143, 0.20) !important;
}

.slots-cell.slot-cita-confirmada[b-4xm9xsvaio] {
    background: rgba(0, 180, 90, 0.14) !important;
}

.slots-cell.slot-cita-cancelada[b-4xm9xsvaio] {
    background: rgba(220, 53, 69, 0.14) !important;
}

.slots-cell.slot-cita-finalizada-pagada[b-4xm9xsvaio] {
    background: rgba(13, 110, 253, 0.14) !important;
}

.slots-cell.slot-cita-finalizada-pendiente[b-4xm9xsvaio] {
    background: rgba(255, 193, 7, 0.14) !important;
}

.slots-cell.slot-cita-unknown[b-4xm9xsvaio] {
    background: rgba(0,0,0,0.05) !important;
}

/* ===== Hover intuitivo (sin tocar HTML) ===== */
/* Hover al pasar por celda: remarca bordes y eleva contraste */
.slots-cell:hover[b-4xm9xsvaio] {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    z-index: 2;
}

/* ===== Slot disponible ===== */
.slot-btn[b-4xm9xsvaio] {
    width: 100%;
    height: 100%;
    min-height: 52px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

    /* indicador sutil “+” al hover (sin texto) */
    .slot-btn[b-4xm9xsvaio]::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 12px;
        border: 1px dashed rgba(0,0,0,.10);
        opacity: 0;
        transition: opacity .12s ease, transform .12s ease;
        transform: scale(.98);
    }

    .slot-btn:hover[b-4xm9xsvaio] {
        background: rgba(0, 180, 90, 0.10);
    }

        .slot-btn:hover[b-4xm9xsvaio]::after {
            opacity: 1;
            transform: scale(1);
        }

    .slot-btn:disabled[b-4xm9xsvaio] {
        cursor: not-allowed;
        opacity: .4;
    }

/* ===== Bloque no clicable ===== */
.slot-block[b-4xm9xsvaio] {
    width: 100%;
    height: 100%;
    min-height: 52px;
    background: rgba(0,0,0,0.035);
}

/* ===== Slot ocupado (tarjeta dentro de la celda) ===== */
.slot-ocupado-btn[b-4xm9xsvaio] {
    width: calc(100% - 10px);
    /*    height: calc(100% - 10px);  */
    min-height: 92px;
    margin: 5px;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    background: rgba(13, 110, 253, 0.12);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    position: relative;
}

    .slot-ocupado-btn:hover[b-4xm9xsvaio] {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        filter: saturate(1.05);
    }

    .slot-ocupado-btn:disabled[b-4xm9xsvaio] {
        cursor: not-allowed;
        opacity: .55;
        transform: none;
        box-shadow: none;
    }


.slot-user[b-4xm9xsvaio] {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.12);
    border: 1px solid rgba(0,0,0,.10);
    opacity: .9;
    pointer-events: none;
}

@media (max-width: 576px) {
    .slot-user[b-4xm9xsvaio] {
        right: 6px;
        bottom: 4px;
        font-size: 10px;
    }
}
/* textos */
.slot-t1[b-4xm9xsvaio] {
    font-weight: 950;
    font-size: 13px;
    line-height: 1.1;
    color: rgba(0,0,0,.88);
}

.slot-t2[b-4xm9xsvaio] {
    font-weight: 800;
    font-size: 12px;
    opacity: .78;
    line-height: 1.1;
    color: rgba(0,0,0,.78);
}

/* Estados de cita (botón) */
.slot-ocupado-btn.slot-cita-pendiente[b-4xm9xsvaio] {
    background: rgb(255, 255, 143, 0.10);
    border-left: 4px solid #00b45a;
}

.slot-ocupado-btn.slot-cita-confirmada[b-4xm9xsvaio] {
    background: rgba(0, 180, 90, 0.20);
    border-left: 4px solid #00b45a;
}

.slot-ocupado-btn.slot-cita-cancelada[b-4xm9xsvaio] {
    background: rgba(220, 53, 69, 0.20);
    border-left: 4px solid #dc3545;
}

.slot-ocupado-btn.slot-cita-finalizada-pagada[b-4xm9xsvaio] {
    background: rgba(13, 110, 253, 0.18);
    border-left: 4px solid #0d6efd;
}

.slot-ocupado-btn.slot-cita-finalizada-pendiente[b-4xm9xsvaio] {
    background: rgba(255, 193, 7, 0.22);
    border-left: 4px solid #ffc107;
}

.slot-ocupado-btn.slot-cita-unknown[b-4xm9xsvaio] {
    background: rgba(0,0,0,0.06);
    border-left: 4px solid rgba(0,0,0,0.25);
}

/* =========================================================
   ESTADO EN LA CABECERA DE LA MODAL (misma gama que los slots)
   ========================================================= */
.crm-modal-state[b-4xm9xsvaio] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

    /* Pendiente */
    .crm-modal-state.slot-cita-pendiente[b-4xm9xsvaio] {
        background: rgba(255, 255, 143, 0.18);
        border-color: rgba(0, 180, 90, 0.35);
        color: #00b45a;
    }

    /* Confirmada */
    .crm-modal-state.slot-cita-confirmada[b-4xm9xsvaio] {
        background: rgba(0, 180, 90, 0.20);
        border-color: rgba(0, 180, 90, 0.45);
        color: #00b45a;
    }

    /* Cancelada */
    .crm-modal-state.slot-cita-cancelada[b-4xm9xsvaio] {
        background: rgba(220, 53, 69, 0.20);
        border-color: rgba(220, 53, 69, 0.45);
        color: #dc3545;
    }

    /* Finalizada / Cobrada */
    .crm-modal-state.slot-cita-finalizada-pagada[b-4xm9xsvaio] {
        background: rgba(13, 110, 253, 0.18);
        border-color: rgba(13, 110, 253, 0.45);
        color: #0d6efd;
    }

    /* Finalizada / Pdte cobro */
    .crm-modal-state.slot-cita-finalizada-pendiente[b-4xm9xsvaio] {
        background: rgba(255, 193, 7, 0.22);
        border-color: rgba(255, 193, 7, 0.55);
        color: #b8860b; /* más legible que #ffc107 como texto */
    }

    /* Unknown */
    .crm-modal-state.slot-cita-unknown[b-4xm9xsvaio] {
        background: rgba(0,0,0,0.06);
        border-color: rgba(0,0,0,0.20);
        color: rgba(0,0,0,0.70);
    }



/* Badge estado en la esquina superior derecha del slot */
.slots-cell[b-4xm9xsvaio] {
    position: relative;
}

.slot-state-badge[b-4xm9xsvaio] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2px;
    padding: 3px 7px;
    border-radius: 999px;
    line-height: 1;
    pointer-events: none; /* no bloquea clicks */
    background: rgba(0,0,0,.35);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
}

    /* Badges por tipo */
    .slot-state-badge.badge-bloq[b-4xm9xsvaio] {
        background: rgba(220, 53, 69, .38);
    }

    .slot-state-badge.badge-cerrado[b-4xm9xsvaio] {
        background: rgba(0, 0, 0, .45);
    }

    .slot-state-badge.badge-fuera[b-4xm9xsvaio] {
        background: rgba(108, 117, 125, .35);
    }

    /* Badges para estado de cita (mismo “mapping” que tus clases visuales) */
    .slot-state-badge.badge-cita-pendiente[b-4xm9xsvaio] {
        background: rgba(25, 135, 84, .38);
    }

    .slot-state-badge.badge-cita-confirmada[b-4xm9xsvaio] {
        background: rgba(25, 135, 84, .38);
    }

    .slot-state-badge.badge-cita-cancelada[b-4xm9xsvaio] {
        background: rgba(220, 53, 69, .38);
    }

    .slot-state-badge.badge-cita-finalizada-pagada[b-4xm9xsvaio] {
        background: rgba(13, 110, 253, .38);
    }

    .slot-state-badge.badge-cita-finalizada-pendiente[b-4xm9xsvaio] {
        background: rgba(255, 140, 0, .38);
    }

    .slot-state-badge.badge-cita-unknown[b-4xm9xsvaio] {
        background: rgba(0, 0, 0, .35);
    }



/* =========================================================
   Responsive del grid (solo grid, sin tocar modal)
   ========================================================= */
@media (max-width: 768px) {
    .slots-row[b-4xm9xsvaio] {
        min-height: 86px;
    }

    .slots-cell[b-4xm9xsvaio] {
        min-height: 86px;
    }

    .slot-btn[b-4xm9xsvaio], .slot-block[b-4xm9xsvaio], .slot-ocupado-btn[b-4xm9xsvaio] {
        min-height: 70px;
    }
}


@media (max-width: 576px) {
    .slots-day-head[b-4xm9xsvaio] {
        padding: 10px 8px;
    }

    .slots-row .slots-time[b-4xm9xsvaio] {
        padding: 10px 8px;
        font-size: 13px;
    }

    .slot-t1[b-4xm9xsvaio] {
        font-size: 12px;
    }

    .slot-t2[b-4xm9xsvaio] {
        font-size: 11px;
    }
}
/* =========================================================
   FIX MÓVIL: evitar compresión del grid (scroll horizontal)
   + evitar solapes dentro de las tarjetas
   ========================================================= */

@media (max-width: 768px) {

    /* 1) El calendario puede hacer scroll horizontal */
    .slots-grid[b-4xm9xsvaio] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 2) NO comprimimos columnas: fijamos un ancho mínimo total */
    /* Ajusta 860px/920px según nº de días que pintes */
    .slots-head[b-4xm9xsvaio],
    .slots-row[b-4xm9xsvaio] {
        min-width: 920px;
    }

    /* 3) Asegurar celdas más altas en móvil (2 líneas + badges) */
    .slots-row[b-4xm9xsvaio] {
        min-height: 92px;
    }

    .slots-cell[b-4xm9xsvaio] {
        min-height: 92px;
    }

    .slot-btn[b-4xm9xsvaio],
    .slot-block[b-4xm9xsvaio],
    .slot-ocupado-btn[b-4xm9xsvaio] {
        min-height: 78px;
    }

    /* 4) Evitar que badges y textos se “pisen” */
    .slot-ocupado-btn[b-4xm9xsvaio] {
        position: relative;
        overflow: hidden; /* clave: nada se sale */
        padding-right: 44px; /* espacio para .slot-user si va abajo/dcha */
        padding-top: 18px; /* espacio para badge superior */
    }

    /* 5) Elipsis en textos (no desbordan ni se montan) */
    .slot-t1[b-4xm9xsvaio],
    .slot-t2[b-4xm9xsvaio] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Si quieres 2 líneas en el nombre en móvil, usa esto en slot-t1:
       (y comenta white-space:nowrap de arriba) */
    /*
    .slot-t1{
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    */
}

@media (max-width: 576px) {

    /* Cabecera más compacta para que no “rompa” alturas */
    .slots-day-head .d1[b-4xm9xsvaio] {
        font-size: 14px;
    }

    .slots-day-head .d2[b-4xm9xsvaio] {
        font-size: 12px;
    }

    /* Un pelín más pequeños para que entren mejor */
    .slot-t1[b-4xm9xsvaio] {
        font-size: 12px;
    }

    .slot-t2[b-4xm9xsvaio] {
        font-size: 11px;
    }

    /* Badges un punto más compactos */
    .slot-state-badge[b-4xm9xsvaio] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .slot-user[b-4xm9xsvaio] {
        font-size: 10px;
        padding: 2px 6px;
    }
}


/* =========================================================
   FIX: columnas SIEMPRE alineadas por día (días variables)
   - mismo grid-template en cabecera y filas
   - evita que una celda “regale” ancho a otra
   ========================================================= */

/* Tiempo + N días */
.slots-head[b-4xm9xsvaio],
.slots-row[b-4xm9xsvaio] {
    /* 1ª columna = hora, resto = días */
    grid-template-columns: 86px repeat(var(--days), minmax(0, 1fr));
}

/* Clave: las celdas pueden encoger (si no, el contenido rompe columnas) */
.slots-cell[b-4xm9xsvaio],
.slots-day-head[b-4xm9xsvaio] {
    min-width: 0;
}

/* Y el botón/ tarjeta NUNCA debe desbordar su celda */
.slot-ocupado-btn[b-4xm9xsvaio],
.slot-btn[b-4xm9xsvaio],
.slot-block[b-4xm9xsvaio] {
    width: 100%;
    max-width: 100%;
}


@media (max-width: 768px) {
    .slots-grid[b-4xm9xsvaio] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ancho mínimo del grid: (col hora) + (N días * ancho día) */
    .slots-head[b-4xm9xsvaio],
    .slots-row[b-4xm9xsvaio] {
        min-width: calc(86px + (var(--days) * 150px));
    }
}
/* =========================================================
   FIX: columnas SIEMPRE alineadas por día (días variables)
   ========================================================= */

/* Tiempo + N días */
.slots-head[b-4xm9xsvaio],
.slots-row[b-4xm9xsvaio] {
    grid-template-columns: 86px repeat(var(--days), minmax(0, 1fr));
}

/* Clave: permitir encoger el contenido dentro de la celda */
.slots-day-head[b-4xm9xsvaio],
.slots-cell[b-4xm9xsvaio] {
    min-width: 0;
}

/* Botones/blocks nunca pueden desbordar su celda */
.slot-ocupado-btn[b-4xm9xsvaio],
.slot-btn[b-4xm9xsvaio],
.slot-block[b-4xm9xsvaio] {
    width: 100%;
    max-width: 100%;
}
@media (max-width: 768px) {
    .slots-grid[b-4xm9xsvaio] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ancho mínimo: col hora + N días */
    .slots-head[b-4xm9xsvaio],
    .slots-row[b-4xm9xsvaio] {
        min-width: calc(86px + (var(--days) * 160px));
    }
}
/* =========================================================
   TABLET: ajustar ancho del grid (evitar “apretado” con sidebar)
   ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    /* seguimos permitiendo scroll horizontal si no cabe */
    .slots-grid[b-4xm9xsvaio] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* columnas un poco más estrechas para tablet */
    .slots-head[b-4xm9xsvaio],
    .slots-row[b-4xm9xsvaio] {
        grid-template-columns: 80px repeat(var(--days), minmax(120px, 1fr));
        min-width: calc(80px + (var(--days) * 120px));
    }

    /* tarjeta más compacta */
    .slot-ocupado-btn[b-4xm9xsvaio] {
        padding: 6px 8px;
        gap: 2px;
        border-radius: 10px;
    }

    .slot-t1[b-4xm9xsvaio] {
        font-size: 12px;
    }

    .slot-t2[b-4xm9xsvaio] {
        font-size: 11px;
    }

    .slot-user[b-4xm9xsvaio] {
        font-size: 10px;
        right: 6px;
        bottom: 5px;
    }

    .slot-state-badge[b-4xm9xsvaio] {
        font-size: 10px;
        padding: 2px 6px;
    }
}
/* Clamp de texto dentro de la tarjeta (evita solapes visuales) */
.slot-t1[b-4xm9xsvaio], .slot-t2[b-4xm9xsvaio] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/netsynerCRM/Components/Pages/Auditoria.razor.rz.scp.css */
/* =========================================================
   AUDITORÍA (página /auditoria) - audit2
   Responsive + usable en móvil/tablet/desktop
   ========================================================= */

.audit2-shell[b-8ch30ydxg8] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===================== HEADER ===================== */
.audit2-header[b-8ch30ydxg8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

    .audit2-header .title h1[b-8ch30ydxg8] {
        margin: 0;
        font-size: 22px;
        line-height: 1.15;
    }

    .audit2-header .subtitle[b-8ch30ydxg8] {
        margin-top: 4px;
        opacity: .75;
        font-size: 13px;
    }

    .audit2-header .actions[b-8ch30ydxg8] {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

/* ===================== ALERT ===================== */
.audit2-alert[b-8ch30ydxg8] {
    padding: 12px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
}

    .audit2-alert.error[b-8ch30ydxg8] {
        border-color: rgba(220, 38, 38, .35);
        background: rgba(220, 38, 38, .08);
    }

/* ===================== FILTERS CARD ===================== */
.audit2-filters[b-8ch30ydxg8] {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 14px;
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* grid rows */
    .audit2-filters .row[b-8ch30ydxg8] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: end;
    }

        .audit2-filters .row .grow[b-8ch30ydxg8] {
            grid-column: span 2;
        }

    .audit2-filters .f[b-8ch30ydxg8] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .audit2-filters label[b-8ch30ydxg8] {
        font-size: 12px;
        font-weight: 800;
        opacity: .8;
    }

    .audit2-filters .hint[b-8ch30ydxg8] {
        font-size: 12px;
        opacity: .65;
        margin-top: -2px;
    }

    /* inputs */
    .audit2-filters .input[b-8ch30ydxg8] {
        width: 100%;
        border: 1px solid rgba(0,0,0,.14);
        border-radius: 10px;
        padding: 10px 10px;
        font-size: 14px;
        outline: none;
        background: rgba(255,255,255,.92);
    }

        .audit2-filters .input:focus[b-8ch30ydxg8] {
            border-color: rgba(0,0,0,.30);
            box-shadow: 0 0 0 3px rgba(0,0,0,.06);
        }

    /* meta block */
    .audit2-filters .meta[b-8ch30ydxg8] {
        border: 1px dashed rgba(0,0,0,.18);
        border-radius: 12px;
        padding: 10px 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: rgba(0,0,0,.02);
    }

        .audit2-filters .meta .muted[b-8ch30ydxg8] {
            opacity: .65;
            font-size: 12px;
            margin-right: 8px;
        }

        .audit2-filters .meta .strong[b-8ch30ydxg8] {
            font-weight: 900;
            font-size: 14px;
        }

    /* ===================== CHIPS ===================== */
    .audit2-filters .chips[b-8ch30ydxg8] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .audit2-filters .chip[b-8ch30ydxg8] {
        border: 1px solid rgba(0,0,0,.14);
        background: rgba(255,255,255,.92);
        padding: 8px 10px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        user-select: none;
        line-height: 1;
    }

        .audit2-filters .chip:hover[b-8ch30ydxg8] {
            border-color: rgba(0,0,0,.30);
        }

        .audit2-filters .chip.active[b-8ch30ydxg8] {
            border-color: rgba(0,0,0,.40);
            box-shadow: 0 0 0 3px rgba(0,0,0,.06);
        }

    /* ===================== ADVANCED (details) ===================== */
    .audit2-filters details.advanced[b-8ch30ydxg8] {
        border-top: 1px solid rgba(0,0,0,.10);
        padding-top: 10px;
    }

        .audit2-filters details.advanced summary[b-8ch30ydxg8] {
            cursor: pointer;
            font-weight: 900;
            font-size: 13px;
            opacity: .85;
            list-style: none;
        }

            .audit2-filters details.advanced summary[b-8ch30ydxg8]::-webkit-details-marker {
                display: none;
            }

/* ===================== TABLE ===================== */
.audit2-table-wrap[b-8ch30ydxg8] {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(6px);
}

/* horizontal scroll on small screens */
.audit2-table-wrap[b-8ch30ydxg8] {
    overflow-x: auto;
}

.audit2-table[b-8ch30ydxg8] {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px; /* hace que en móvil haya scroll horizontal */
}

    .audit2-table thead th[b-8ch30ydxg8] {
        text-align: left;
        font-size: 12px;
        font-weight: 900;
        opacity: .85;
        padding: 12px 12px;
        border-bottom: 1px solid rgba(0,0,0,.10);
        white-space: nowrap;
    }

    .audit2-table tbody td[b-8ch30ydxg8] {
        padding: 12px 12px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        font-size: 14px;
        vertical-align: top;
    }

    .audit2-table tbody tr:hover[b-8ch30ydxg8] {
        background: rgba(0,0,0,.03);
    }

    .audit2-table .right[b-8ch30ydxg8] {
        text-align: right;
        white-space: nowrap;
    }

    .audit2-table .mono[b-8ch30ydxg8] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 13px;
    }

    .audit2-table .clip[b-8ch30ydxg8] {
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .audit2-table th.sortable[b-8ch30ydxg8] {
        cursor: pointer;
        user-select: none;
    }

    .audit2-table td.empty[b-8ch30ydxg8] {
        padding: 24px 12px;
        text-align: center;
        opacity: .7;
    }

/* ===================== FOOTER ===================== */
.audit2-footer[b-8ch30ydxg8] {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

/* ===================== MODAL ===================== */
.audit2-modal-backdrop[b-8ch30ydxg8] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
}

.audit2-modal[b-8ch30ydxg8] {
    width: min(980px, 100%);
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}

.audit2-modal-head[b-8ch30ydxg8] {
    padding: 14px 14px;
    border-bottom: 1px solid rgba(0,0,0,.10);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

    .audit2-modal-head .t[b-8ch30ydxg8] {
        font-weight: 1000;
        font-size: 16px;
    }

    .audit2-modal-head .s[b-8ch30ydxg8] {
        margin-top: 6px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

.audit2-modal-body[b-8ch30ydxg8] {
    padding: 14px;
}

.pill[b-8ch30ydxg8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.03);
    font-size: 12px;
    font-weight: 900;
    opacity: .9;
}

.kv[b-8ch30ydxg8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-bottom: 12px;
}

    .kv .k[b-8ch30ydxg8] {
        font-weight: 900;
        opacity: .75;
        margin-right: 6px;
    }

    .kv .v[b-8ch30ydxg8] {
        opacity: .95;
    }

/* json box */
.jsonbox[b-8ch30ydxg8] {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,.02);
}

.jsonhead[b-8ch30ydxg8] {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(0,0,0,.10);
}

.jsonlabel[b-8ch30ydxg8] {
    font-weight: 1000;
    font-size: 13px;
    opacity: .9;
}

.json[b-8ch30ydxg8] {
    margin: 0;
    padding: 12px;
    overflow: auto;
    max-height: 55vh;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.45;
}

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

/* Tablet: 2 columnas */
@media (max-width: 980px) {
    .audit2-filters .row[b-8ch30ydxg8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .audit2-filters .row .grow[b-8ch30ydxg8] {
            grid-column: span 2;
        }

    .kv[b-8ch30ydxg8] {
        grid-template-columns: 1fr;
    }

    .audit2-header[b-8ch30ydxg8] {
        align-items: stretch;
    }

        .audit2-header .actions[b-8ch30ydxg8] {
            justify-content: flex-end;
        }
}

/* Móvil: 1 columna */
@media (max-width: 600px) {
    .audit2-shell[b-8ch30ydxg8] {
        padding: 12px;
        gap: 12px;
    }

    .audit2-header .title h1[b-8ch30ydxg8] {
        font-size: 20px;
    }

    .audit2-filters[b-8ch30ydxg8] {
        padding: 12px;
    }

        .audit2-filters .row[b-8ch30ydxg8] {
            grid-template-columns: 1fr;
        }

            .audit2-filters .row .grow[b-8ch30ydxg8] {
                grid-column: auto;
            }

    .audit2-table[b-8ch30ydxg8] {
        min-width: 760px;
    }

    .audit2-modal-backdrop[b-8ch30ydxg8] {
        padding: 10px;
    }

    .audit2-modal-head[b-8ch30ydxg8] {
        flex-direction: column;
        align-items: stretch;
    }

    .audit2-header .actions[b-8ch30ydxg8] {
        width: 100%;
        justify-content: stretch;
    }

        .audit2-header .actions .btn[b-8ch30ydxg8] {
            flex: 1;
        }
}
/* _content/netsynerCRM/Components/Pages/Clientes.razor.rz.scp.css */
/* =========================================================
   CLIENTES (NetSyner CRM)
   CSS saneado + ordenado + comentado (sin romper diseño)
   - Se han eliminado duplicados lógicos (mismas reglas repetidas)
   - Se han corregido llaves mal cerradas
   - En móvil: acciones con GRID (Nuevo arriba / Ver último + Filtros / Buscar)
   ========================================================= */


/* =========================================================
   1) CONTENEDOR / LAYOUT GENERAL
   ========================================================= */

/* Evita que el contenido “reviente” el ancho disponible */
.clientes-shell[b-052fmslm11] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


/* =========================================================
   2) HEADER (PC)
   - Fila 1: título + subtítulo
   - Fila 2: buscador + botones
   ========================================================= */

.clientes-header[b-052fmslm11] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.title[b-052fmslm11] {
    grid-row: 1;
    min-width: 0;
}

    .title h1[b-052fmslm11] {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 700;
    }

.subtitle[b-052fmslm11] {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-top: 0.25rem;
}

/* Acciones (PC: buscador + botones en una fila, envolviendo si hace falta) */
.actions[b-052fmslm11] {
    grid-row: 2;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Buscador mantiene el ancho “bueno” en PC */
.search[b-052fmslm11] {
    width: min(520px, 100%);
}


/* =========================================================
   3) TABLA / LISTADO
   ========================================================= */

.table-wrap[b-052fmslm11] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,0.08);
}

.clientes-table[b-052fmslm11] {
    margin: 0;
    min-width: 980px;
}

.empty[b-052fmslm11] {
    padding: 1.25rem;
    text-align: center;
    opacity: 0.75;
}

.loading[b-052fmslm11] {
    padding: 1rem;
    opacity: 0.75;
}

.cell-main .name[b-052fmslm11] {
    font-weight: 600;
}

.cell-main .meta[b-052fmslm11] {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.code[b-052fmslm11] {
    font-weight: 650;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dot[b-052fmslm11] {
    padding: 0 0.4rem;
}


/* =========================================================
   4) THEAD / ORDENACIÓN
   - Fondo base suave
   - Hover sutil
   - Columna activa resaltada con .is-sorted
   ========================================================= */

/* Fondo base del thead */
.clientes-table thead th[b-052fmslm11],
.clientes-table .clientes-thead th[b-052fmslm11] {
    background: rgba(0,0,0,.04);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Cabeceras ordenables */
.clientes-table th.sortable[b-052fmslm11] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    /* Icono */
    .clientes-table th.sortable .sort-ico[b-052fmslm11] {
        display: inline-block;
        margin-left: 8px;
        opacity: .55;
        font-size: .9em;
    }

    /* Hover */
    .clientes-table th.sortable:hover[b-052fmslm11] {
        background: rgba(0,0,0,.06);
    }

        .clientes-table th.sortable:hover .sort-ico[b-052fmslm11] {
            opacity: .9;
        }

    /* Columna activa */
    .clientes-table th.sortable.is-sorted[b-052fmslm11] {
        background: rgba(0,0,0,.10); /* semigris */
        box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); /* subrayado sutil */
    }

        .clientes-table th.sortable.is-sorted .sort-ico[b-052fmslm11] {
            opacity: 1;
            font-weight: 700;
        }

/* Nota: he quitado :has() porque puede fallar en algunos navegadores/entornos y no es necesario */


/* =========================================================
   5) MODALES (BASE)
   ========================================================= */

.modal-backdrop-custom[b-052fmslm11] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2000;
    overflow: hidden;
}

.modal-card[b-052fmslm11] {
    width: min(720px, 100%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.25);
    overflow: hidden;
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}

.modal-card-lg[b-052fmslm11] {
    width: min(980px, 100%);
}

.modal-card-md[b-052fmslm11] {
    width: min(760px, 100%);
}

.modal-card-sm[b-052fmslm11] {
    width: min(520px, 100%);
}

.modal-toolbar[b-052fmslm11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
    position: sticky;
    top: 0;
    z-index: 1;
}

    .modal-toolbar .nav[b-052fmslm11] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

.nav-pos[b-052fmslm11] {
    margin-left: 6px;
    opacity: 0.75;
    font-size: 0.9rem;
}

.toolbar-actions[b-052fmslm11] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-head[b-052fmslm11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    gap: 12px; /* ya lo estabas reforzando en overrides */
}

.modal-title[b-052fmslm11] {
    font-weight: 700;
}

.modal-title-main[b-052fmslm11] {
    font-size: 1.05rem;
}

.modal-title-sub[b-052fmslm11] {
    margin-top: 4px;
    font-size: 0.9rem;
    opacity: 0.85;
}

.muted[b-052fmslm11] {
    opacity: 0.75;
}

.modal-body[b-052fmslm11] {
    padding: 14px 16px;
    overflow: auto;
    flex: 1 1 auto;
}

.hint[b-052fmslm11] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

.modal-actions[b-052fmslm11] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 14px 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 1;
}


/* =========================================================
   6) TABS
   ========================================================= */

.tabs[b-052fmslm11] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.tab-btn[b-052fmslm11] {
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.02);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 650;
    font-size: 0.95rem;
    cursor: pointer;
}

    .tab-btn.active[b-052fmslm11] {
        background: rgba(13,110,253,0.12);
        border-color: rgba(13,110,253,0.35);
    }

.tab-panel[b-052fmslm11] {
    padding-top: 2px;
}

.hint-mini[b-052fmslm11] {
    margin-top: 6px;
    font-size: 0.85rem;
    opacity: 0.75;
}

.quick-actions[b-052fmslm11] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}


/* =========================================================
   7) BLOQUES DE CONTENIDO (VER)
   ========================================================= */

.grid-2[b-052fmslm11] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.box[b-052fmslm11] {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px;
    background: rgba(0,0,0,0.015);
}

.box-full[b-052fmslm11] {
    grid-column: 1 / -1;
}

.box-title[b-052fmslm11] {
    font-weight: 700;
    margin-bottom: 8px;
}

.list-clean[b-052fmslm11] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.pill[b-052fmslm11] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    margin-right: 6px;
    font-size: 0.9rem;
}

.pill-primary[b-052fmslm11] {
    background: rgba(13,110,253,0.12);
}

.pill-muted[b-052fmslm11] {
    background: rgba(0,0,0,0.04);
    opacity: 0.85;
}

.notes[b-052fmslm11] {
    white-space: pre-wrap;
}


/* =========================================================
   8) EDITOR INLINE (emails / teléfonos)
   ========================================================= */

.block-title[b-052fmslm11] {
    font-weight: 700;
    margin-bottom: 8px;
}

.inline-row[b-052fmslm11] {
    display: grid;
    grid-template-columns: 1.6fr 1.1fr auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.principal[b-052fmslm11] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    opacity: 0.9;
    white-space: nowrap;
}


/* =========================================================
   9) CONTACTAR
   ========================================================= */

.contact-section[b-052fmslm11] {
    margin-bottom: 10px;
}

.email-multi[b-052fmslm11] {
    display: grid;
    gap: 8px;
}

/* Base del “check row” (se refuerza en overrides) */
.chk[b-052fmslm11] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phones[b-052fmslm11] {
    display: grid;
    gap: 10px;
}

.phone-row[b-052fmslm11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 10px 12px;
}

.phone-val[b-052fmslm11] {
    font-weight: 650;
}


/* =========================================================
   10) RESPONSIVE
   ========================================================= */

/* Helpers columnas */
.col-show-xs[b-052fmslm11] {
    display: none;
}

/* <= 992px */
@media (max-width: 992px) {
    .grid-2[b-052fmslm11] {
        grid-template-columns: 1fr;
    }

    .inline-row[b-052fmslm11] {
        grid-template-columns: 1fr 1fr auto;
    }

        .inline-row .principal[b-052fmslm11] {
            grid-column: 1 / -1;
        }
}

/* <= 576px (MÓVIL)
   - Nuevo cliente arriba (fila completa)
   - Ver último | Filtros debajo (2 columnas)
   - Buscar abajo (fila completa)
*/
@media (max-width: 576px) {

    .col-hide-xs[b-052fmslm11] {
        display: none;
    }

    .col-show-xs[b-052fmslm11] {
        display: block;
    }

    /* Header en móvil: mantenemos estructura limpia */
    .clientes-header[b-052fmslm11] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: start;
        justify-content: start;
        margin-bottom: 1rem;
    }

        /* Acciones en GRID (sin mezclar con flex + order) */
        .clientes-header .actions[b-052fmslm11] {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            align-items: stretch;
        }

            /* 1) Nuevo cliente arriba */
            .clientes-header .actions .btn.btn-primary[b-052fmslm11] {
                grid-column: 1 / -1;
                order: 1;
            }

            /* 2) Ver último + Filtros debajo */
            .clientes-header .actions .btn.btn-outline-secondary[b-052fmslm11] {
                order: 2;
                width: 100%;
            }


            /* 3) Búsqueda abajo del todo */
            .clientes-header .actions .search[b-052fmslm11] {
                grid-column: 1 / -1;
                order: 3;
                width: 100%;
            }

    /* Tabs en móvil */
    .tabs[b-052fmslm11] {
        gap: 6px;
    }

    .tab-btn[b-052fmslm11] {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Toolbar modal en móvil */
    .modal-toolbar[b-052fmslm11] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-actions[b-052fmslm11] {
        justify-content: flex-end;
    }

    .modal-head[b-052fmslm11],
    .modal-body[b-052fmslm11],
    .modal-actions[b-052fmslm11] {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Card: que nunca se salga de la pantalla */
    .modal-card[b-052fmslm11] {
        max-height: calc(100dvh - 28px); /* margen total (arriba+abajo) */
    }

    /* El scroll siempre aquí */
    .modal-body[b-052fmslm11] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Evita que filas largas (inline-row) empujen el layout */
    .inline-row[b-052fmslm11] {
        min-width: 0;
    }
}


/* =========================================================
   11) OVERRIDES (MODALES “NUEVAS” / VER)
   - Mantengo tu intención, pero sin duplicados/conflictos
   ========================================================= */

/* Header VER: jerarquía (código/estado arriba, nombre grande abajo) */
.modal-head .modal-title[b-052fmslm11] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Línea superior: Código + Estado */
.modal-title-sub[b-052fmslm11] {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Nombre grande debajo */
.modal-title-main.modal-title-big[b-052fmslm11] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.2px;
}

/* Refuerzo solo en modal VER */
.modal-title-main[b-052fmslm11] {
    font-weight: 800;
}

/* Badges */
.badge-code[b-052fmslm11] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.04);
}

.badge-state[b-052fmslm11] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,0.10);
}

    .badge-state.on[b-052fmslm11] {
        background: rgba(25, 135, 84, 0.12);
        border-color: rgba(25, 135, 84, 0.25);
    }

    .badge-state.off[b-052fmslm11] {
        background: rgba(220, 53, 69, 0.10);
        border-color: rgba(220, 53, 69, 0.22);
    }

/* Contactar: checks más cómodos */
.chk[b-052fmslm11] {
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.015);
}

/* Móvil: reduce tamaño del nombre grande */
@media (max-width: 576px) {
    .modal-title-main.modal-title-big[b-052fmslm11] {
        font-size: 1.25rem;
    }
}


/* =========================================================
   12) FILTROS
   ========================================================= */

.filters-panel[b-052fmslm11] {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 12px;
    background: rgba(0,0,0,.015);
    margin-bottom: 12px;
}

.filters-grid[b-052fmslm11] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

    .filters-grid .f label[b-052fmslm11] {
        display: block;
        font-size: .85rem;
        opacity: .8;
        margin-bottom: 4px;
    }

.filters-actions[b-052fmslm11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 992px) {
    .filters-grid[b-052fmslm11] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .filters-grid[b-052fmslm11] {
        grid-template-columns: 1fr;
    }

    .filters-actions[b-052fmslm11] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Filtro activo (azul suave) */
.filters-panel .filters-grid .f.is-active[b-052fmslm11] {
    border: 1px solid rgba(13, 110, 253, .45);
    background: rgba(13, 110, 253, .08);
    border-radius: 12px;
    padding: 10px;
}

    .filters-panel .filters-grid .f.is-active > label[b-052fmslm11] {
        color: #0d6efd;
        font-weight: 600;
    }

    .filters-panel .filters-grid .f.is-active .chk > span[b-052fmslm11] {
        color: #0d6efd;
        font-weight: 600;
    }

.filters-panel .filters-grid .f[b-052fmslm11] {
    transition: background .15s ease, border-color .15s ease;
}


/* =========================
   MODALES ESTABLES (NO SALTO)
   ========================= */

/* ===== MODAL: anclada arriba + sin “saltos” + scroll interno ===== */
.modal-backdrop-custom[b-052fmslm11] {
    align-items: flex-start; /* antes center -> evitamos que suba/baje */
    padding: clamp(12px, 3vh, 28px); /* margen arriba/abajo agradable */
    overflow-y: auto;
}

/* Card: altura AUTO (no rellena en blanco), con tope de pantalla */
.modal-card[b-052fmslm11] {
    height: auto;
    max-height:max-content;
    display: flex;
    flex-direction: column;
}

/* Cuerpo: NO fuerces a “rellenar” (quita el blanco), pero permite shrink+scroll */
.modal-body[b-052fmslm11] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Toolbar/Footer sticky siguen bien así (los tuyos valen) */
.modal-toolbar[b-052fmslm11] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.modal-actions[b-052fmslm11] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: #fff;
}

/* En móvil: mismo comportamiento, un pelín más de margen */
@media (max-width: 576px) {
    .modal-backdrop-custom[b-052fmslm11] {
        align-items: flex-start;
        padding: 14px 12px;
        overflow-y: scroll;
    }
}


/* =========================================================
   MÓVIL: HEADER MODAL (2 filas)
   Fila 1: navegación + Cerrar (a la izquierda), botones más grandes/espaciados
   Fila 2: acciones (Contactar/Editar/Borrar) centradas
   ========================================================= */
@media (max-width: 576px) {

    .modal-toolbar[b-052fmslm11] {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }

        /* Fila 1: navegación */
        .modal-toolbar .nav[b-052fmslm11] {
            grid-row: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

            .modal-toolbar .nav .btn[b-052fmslm11] {
                padding: 8px 10px;
                min-width: 35px;
                line-height: 1;
            }

        /* Cerrar SIEMPRE en fila 1, a la derecha */
        .modal-toolbar .btn-cerrar[b-052fmslm11] {
            position: absolute;
            right: 12px;
            top: 10px; /* alineado con la fila 1 */
            white-space: nowrap;
        }

        /* Fila 2: acciones centradas (dejando hueco visual) */
        .modal-toolbar .toolbar-actions[b-052fmslm11] {
            grid-row: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

            /* Para que el botón cerrar NO ocupe sitio en la fila 2 */
            .modal-toolbar .toolbar-actions .btn-cerrar[b-052fmslm11] {
                position: absolute; /* reafirmamos */
            }
}


/* =========================================================
   PC: Toolbar — Nav izquierda | Acciones centradas | Cerrar fijo derecha
   (sin cambiar HTML)
   ========================================================= */
@media (min-width: 577px) {

    .modal-toolbar[b-052fmslm11] {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        /* Nav izquierda + más grande */
        .modal-toolbar .nav[b-052fmslm11] {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

            .modal-toolbar .nav .btn[b-052fmslm11] {
                padding: 8px 10px;
                min-width: 44px;
                line-height: 1;
            }

        /* Acciones centradas (Contactar/Editar/Borrar) */
        .modal-toolbar .toolbar-actions[b-052fmslm11] {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: nowrap;
            padding-right: 140px; /* reserva hueco para Cerrar */
        }

            /* Cerrar fijo a la derecha, nunca baja */
            .modal-toolbar .toolbar-actions .btn-cerrar[b-052fmslm11] {
                position: absolute;
                right: 14px;
                top: 50%;
                transform: translateY(-50%);
                white-space: nowrap;
            }
}
/* _content/netsynerCRM/Components/Pages/Configuracion/Configuracion.razor.rz.scp.css */
/* =========================
   Configuración (tabs) - FORZADO LIGHT (sin herencia)
   ========================= */

.config-shell[b-yh59yq9l4j] {
    padding: 16px;
}

/* Header */
.config-header .title h1[b-yh59yq9l4j] {
    margin: 0;
    font-size:1.5rem;

}

.config-header .subtitle[b-yh59yq9l4j] {
    opacity: .7;
    margin-top: 4px;
}

/* Barra de tabs */
.config-tabs[b-yh59yq9l4j] {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: #eef1f5; /* gris suave */
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabs: NO heredar color */
.tab[b-yh59yq9l4j] {
    appearance: none;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.85);
    color: #111 !important; /* <- clave: texto visible siempre */

    padding: 12px 18px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 800;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, color .15s ease;
}

    .tab:hover:not(:disabled)[b-yh59yq9l4j] {
        background: #fff;
        border-color: rgba(0,0,0,.18);
        box-shadow: 0 10px 18px rgba(0,0,0,.10);
    }

    .tab:active:not(:disabled)[b-yh59yq9l4j] {
        transform: translateY(1px);
    }

    /* Activo bien marcado */
    .tab.active[b-yh59yq9l4j] {
        background: #ffffff;
        border-color: rgba(13,110,253,.45);
        color: rgb(13,110,253) !important;
        box-shadow: 0 14px 26px rgba(13,110,253,.14);
    }

        /* Subrayado del activo */
        .tab.active[b-yh59yq9l4j]::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: -10px;
            height: 4px;
            border-radius: 999px;
            background: rgb(13,110,253);
        }

    /* Disabled */
    .tab:disabled[b-yh59yq9l4j] {
        opacity: .45;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Content */
.config-content[b-yh59yq9l4j] {
    margin-top: 16px;
    min-height: 220px;
}

/* Mobile */
@media (max-width: 900px) {
    .config-shell[b-yh59yq9l4j] {
        padding: 12px;
    }

    .config-content[b-yh59yq9l4j] {
        margin-top: 14px;
    }
}
/* _content/netsynerCRM/Components/Pages/Configuracion/Secciones/ConfigEmpresa.razor.rz.scp.css */
.config-card[b-3jua8qpe6g] {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.card-head h2[b-3jua8qpe6g] {
    margin: 0;
}

.muted[b-3jua8qpe6g] {
    opacity: .7;
}

.grid[b-3jua8qpe6g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.field label[b-3jua8qpe6g] {
    display: block;
    margin-bottom: 6px;
    opacity: .85;
}

.actions[b-3jua8qpe6g] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.config-alert[b-3jua8qpe6g] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
}

    .config-alert.success[b-3jua8qpe6g] {
        border-color: rgba(0,255,0,.25);
    }

    .config-alert.error[b-3jua8qpe6g] {
        border-color: rgba(255,0,0,.25);
    }

    .config-alert.warning[b-3jua8qpe6g] {
        border-color: rgba(255,180,0,.25);
    }

.config-placeholder[b-3jua8qpe6g] {
    opacity: .75;
    padding: 10px 0;
}

@media (max-width: 900px) {
    .grid[b-3jua8qpe6g] {
        grid-template-columns: 1fr;
    }
}


/* ===== Modal simple (sin JS) ===== */
.modal-backdrop-custom[b-3jua8qpe6g] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2000;
}

.modal-card[b-3jua8qpe6g] {
    width: min(720px, 100%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.25);
    overflow: hidden;
}

.modal-card-sm[b-3jua8qpe6g] {
    width: min(520px, 100%);
}

.modal-head[b-3jua8qpe6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modal-title[b-3jua8qpe6g] {
    font-weight: 700;
}

.modal-body[b-3jua8qpe6g] {
    padding: 1rem 1.1rem;
}

.modal-actions[b-3jua8qpe6g] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}
/* _content/netsynerCRM/Components/Pages/Configuracion/Secciones/ConfigFirmaCorreo.razor.rz.scp.css */
/* =========================================================
   CONFIGURACIÓN -> FIRMA CORREO
   - Reutiliza estilos base del módulo SMTP (card/layout/modal)
   - Solo añade preview específico de firma
   ========================================================= */

.firma-preview[b-bjfbgrusei] {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 14px;
    background: rgba(0,0,0,.03);
}

    .firma-preview.disabled[b-bjfbgrusei] {
        opacity: .6;
    }

.firma-preview-inner[b-bjfbgrusei] {
    display: block;
    line-height: 1.25;
}

/* Logo: que no rompa el mail aunque sea enorme */
.firma-logo[b-bjfbgrusei] {
    display: inline-block;
    max-height: 90px;
    max-width: 240px;
    height: auto;
    width: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

/* HTML firma */
.firma-html[b-bjfbgrusei] {
    font-size: 14px;
}

    /* Si el usuario mete <p> etc, que no cree espacios raros */
    .firma-html :global(p)[b-bjfbgrusei] {
        margin: 0 0 6px 0;
    }

    /* Links dentro de la firma */
    .firma-html :global(a)[b-bjfbgrusei] {
        text-decoration: underline;
    }

/* Texto legal LOPD */
.firma-lopd[b-bjfbgrusei] {
    margin-top: 10px;
    font-size: 12px;
    opacity: .75;
    white-space: pre-line;
}

/* Responsive: en móvil, el preview abajo con buen espacio */
@media (max-width: 900px) {
    .firma-preview[b-bjfbgrusei] {
        padding: 12px;
    }

    .firma-logo[b-bjfbgrusei] {
        max-height: 56px;
        max-width: 220px;
    }
}


/* ===========================
   MODAL (reutilizado SMTP)
   =========================== */

.smtp-modal-backdrop[b-bjfbgrusei] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.smtp-modal[b-bjfbgrusei] {
    width: min(560px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;
}

.smtp-modal-header[b-bjfbgrusei] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.smtp-modal-title[b-bjfbgrusei] {
    font-weight: 800;
}

.smtp-modal-close[b-bjfbgrusei] {
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.smtp-modal-body[b-bjfbgrusei] {
    padding: 14px;
}

.smtp-modal-actions[b-bjfbgrusei] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.08);
}

.smtp-link[b-bjfbgrusei] {
    margin-top: 10px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.smtp-details[b-bjfbgrusei] {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
}
/* _content/netsynerCRM/Components/Pages/Configuracion/Secciones/ConfigSmtp.razor.rz.scp.css */
/* ===== Card ===== */
.smtp-card[b-6d1fups9rr] {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.card-head h2[b-6d1fups9rr] {
    margin: 0;
    font-size: 1.35rem;
}

.muted[b-6d1fups9rr] {
    color: rgba(0,0,0,0.60);
    margin-top: 2px;
}

/* ===== Layout (2 columnas) ===== */
.smtp-layout[b-6d1fups9rr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}

.smtp-col[b-6d1fups9rr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 900px) {
    .smtp-layout[b-6d1fups9rr] {
        grid-template-columns: 1fr;
    }
}

/* ===== Fields ===== */
.field label[b-6d1fups9rr] {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: rgba(0,0,0,0.82);
}

.chk[b-6d1fups9rr] {
    transform: translateY(1px);
}

.hint[b-6d1fups9rr] {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.55);
    margin-top: 6px;
}

/* ===== Protocolo ===== */
.proto-row[b-6d1fups9rr] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.proto-item[b-6d1fups9rr] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 600;
}

/* ===== Botones centrados ===== */
.smtp-actions-center[b-6d1fups9rr] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

/* ===== Alerts ===== */
.smtp-alert[b-6d1fups9rr] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    font-weight: 600;
}

    .smtp-alert.success[b-6d1fups9rr] {
        background: rgba(25, 135, 84, 0.10);
        border-color: rgba(25, 135, 84, 0.25);
        color: #0f5132;
    }

    .smtp-alert.error[b-6d1fups9rr] {
        background: rgba(220, 53, 69, 0.10);
        border-color: rgba(220, 53, 69, 0.25);
        color: #842029;
    }

    .smtp-alert.warning[b-6d1fups9rr] {
        background: rgba(255, 193, 7, 0.14);
        border-color: rgba(255, 193, 7, 0.35);
        color: #664d03;
    }

.smtp-link[b-6d1fups9rr] {
    margin-top: 8px;
    background: transparent;
    border: none;
    padding: 0;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.smtp-details[b-6d1fups9rr] {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.86);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow: auto;
}

/* ===== Modal (alto contraste + scroll seguro) ===== */
.smtp-modal-backdrop[b-6d1fups9rr] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
}

.smtp-modal[b-6d1fups9rr] {
    width: min(620px, 96vw);
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 18px 55px rgba(0,0,0,0.40);
    padding: 14px 14px 12px;
    max-height: 85vh;
    overflow: auto;
}

.smtp-modal-header[b-6d1fups9rr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
}

.smtp-modal-title[b-6d1fups9rr] {
    font-size: 1.1rem;
    font-weight: 900;
    color: rgba(0,0,0,0.90);
}

.smtp-modal-close[b-6d1fups9rr] {
    border: none;
    background: rgba(0,0,0,0.08);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

    .smtp-modal-close:hover[b-6d1fups9rr] {
        background: rgba(0,0,0,0.14);
    }

.smtp-modal-body[b-6d1fups9rr] {
    padding: 12px 2px 6px;
    color: rgba(0,0,0,0.88);
    font-weight: 700;
    line-height: 1.35;
}

.smtp-modal-actions[b-6d1fups9rr] {
    display: flex;
    justify-content: center; /* más claro */
    padding-top: 12px;
}
/* _content/netsynerCRM/Components/Pages/Home.razor.rz.scp.css */
/* ===========================
   DASHBOARD (encapsulado)
   =========================== */

.dash-shell[b-m3px55rk90] {
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.dash-head[b-m3px55rk90] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.dash-title h1[b-m3px55rk90] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dash-sub[b-m3px55rk90] {
    margin-top: 4px;
    opacity: .75;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .dash-sub .dot[b-m3px55rk90] {
        opacity: .55;
    }

.dash-actions[b-m3px55rk90] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .dash-actions .btn[b-m3px55rk90] {
        border-radius: 999px;
    }


/* Hora: nunca se parte */
.dash-shell .list .row .time[b-m3px55rk90] {
    white-space: nowrap;
    width: 64px; /* ajusta si quieres 70px */
    flex: 0 0 64px;
    font-variant-numeric: tabular-nums;
}

/* ===== KPIs ===== */
.dash-kpis[b-m3px55rk90] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.kpi[b-m3px55rk90] {
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    padding: 12px 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    min-width: 0;
}

.kpi-top[b-m3px55rk90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.kpi-label[b-m3px55rk90] {
    font-size: .93rem;
    font-weight: 700;
}

.kpi-badge[b-m3px55rk90] {
    font-size: .74rem;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    opacity: .9;
    white-space: nowrap;
}

.kpi-value[b-m3px55rk90] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

    .kpi-value.ok[b-m3px55rk90] {
        opacity: .85;
    }

.kpi-foot[b-m3px55rk90] {
    margin-top: 6px;
    font-size: .85rem;
    opacity: .75;
}

/* ===== Main grid ===== */
.dash-grid[b-m3px55rk90] {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 12px;
    align-items: start;
}

/* Cards */
.card[b-m3px55rk90] {
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    min-width: 0;
}

.card-head[b-m3px55rk90] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.card-title[b-m3px55rk90] {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.card-sub[b-m3px55rk90] {
    margin-top: 2px;
    font-size: .88rem;
    opacity: .72;
}

.card-head .btn[b-m3px55rk90] {
    border-radius: 999px;
}

/* Agenda list */
.list .row[b-m3px55rk90] {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.015);
    margin-bottom: 8px;
}

.list .time[b-m3px55rk90] {
    font-weight: 800;
    font-size: .95rem;
    opacity: .85;
}

.list .main[b-m3px55rk90] {
    min-width: 0;
}

.list .line1[b-m3px55rk90] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list .line2[b-m3px55rk90] {
    margin-top: 2px;
    font-size: .86rem;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list .meta[b-m3px55rk90] {
    font-size: .82rem;
    opacity: .7;
    white-space: nowrap;
}

.empty[b-m3px55rk90] {
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px dashed rgba(0,0,0,.18);
    background: rgba(0,0,0,.01);
}

.muted[b-m3px55rk90] {
    opacity: .72;
}

/* Timeline */
.timeline .t-item[b-m3px55rk90] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.015);
    margin-bottom: 8px;
}

.timeline .t-dot[b-m3px55rk90] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    background: rgba(0,0,0,.45);
}

.timeline .t-main[b-m3px55rk90] {
    min-width: 0;
}

.timeline .t-title[b-m3px55rk90] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline .t-sub[b-m3px55rk90] {
    margin-top: 2px;
    font-size: .86rem;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline .t-time[b-m3px55rk90] {
    font-size: .82rem;
    opacity: .7;
    white-space: nowrap;
}

/* Quick actions */
.quick[b-m3px55rk90] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.quick-btn[b-m3px55rk90] {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    border-radius: 16px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.05);
    cursor: pointer;
}

    .quick-btn:hover[b-m3px55rk90] {
        background: rgba(0,0,0,.02);
    }

.q-ico[b-m3px55rk90] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(0,0,0,.06);
    font-size: 1.05rem;
}

.q-text[b-m3px55rk90] {
    min-width: 0;
    flex: 1;
}

.q-title[b-m3px55rk90] {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.q-sub[b-m3px55rk90] {
    margin-top: 2px;
    font-size: .86rem;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-go[b-m3px55rk90] {
    font-size: 1.4rem;
    opacity: .45;
    padding-left: 8px;
}

/* Admin tiles */
.admin-grid[b-m3px55rk90] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.admin-tile[b-m3px55rk90] {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    padding: 10px;
    background: rgba(0,0,0,.015);
}

.a-title[b-m3px55rk90] {
    font-weight: 800;
}

.a-sub[b-m3px55rk90] {
    margin-top: 4px;
    font-size: .86rem;
    opacity: .72;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .dash-kpis[b-m3px55rk90] {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dash-grid[b-m3px55rk90] {
        grid-template-columns: 1fr;
    }

    .admin-grid[b-m3px55rk90] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dash-shell[b-m3px55rk90] {
        padding: 12px;
    }

    .dash-actions[b-m3px55rk90] {
        justify-content: flex-start;
    }

        .dash-actions .btn[b-m3px55rk90] {
            width: 100%;
        }

    .dash-kpis[b-m3px55rk90] {
        grid-template-columns: 1fr;
    }

    .list .row[b-m3px55rk90] {
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "time main"
            "meta meta";
    }

    .list .time[b-m3px55rk90] {
        grid-area: time;
    }

    .list .main[b-m3px55rk90] {
        grid-area: main;
    }

    .list .meta[b-m3px55rk90] {
        grid-area: meta;
        padding-left: 56px;
    }

    .timeline .t-item[b-m3px55rk90] {
        grid-template-columns: 12px 1fr;
        grid-template-areas:
            "dot main"
            "dot time";
    }

    .timeline .t-dot[b-m3px55rk90] {
        grid-area: dot;
    }

    .timeline .t-main[b-m3px55rk90] {
        grid-area: main;
    }

    .timeline .t-time[b-m3px55rk90] {
        grid-area: time;
        padding-left: 22px;
    }
}
/* _content/netsynerCRM/Components/Pages/Login.razor.rz.scp.css */
/* Login.razor.css */
[b-6bwlx77io3] article.content {
    padding-top: 0;
    padding-bottom: 0;
}
/* Contenedor de página: ocupa toda la altura y centra el card */
.login-page[b-6bwlx77io3] {
    height:100%;
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background-color:  #e3e3e3;
    color: #000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .25s ease, visibility .25s ease;
}

/* Tarjeta de login */
.login-card[b-6bwlx77io3] {
    width: 90%;
    max-width: 500px; /* en PC no pasa de 420px */
    background-color: #191919;
    border-radius: 14px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}


/* Título */
.login-title[b-6bwlx77io3] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.crm-splash-logo-loging[b-6bwlx77io3] {
    width: 200px;
    height: 200px;
    margin:auto;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

    .crm-splash-logo-loging img[b-6bwlx77io3] {
        width: 200px;
        height: 200px; /* ✅ antes tenías 5600px */
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
        transform: scale(1.12);
        transform-origin: center;
    }

.form-label[b-6bwlx77io3]{
    color:#fff;
}
/* Error */
.login-error[b-6bwlx77io3] {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Separación entre campos */
.login-card .mb-3[b-6bwlx77io3] {
    margin-bottom: 1rem;
}

/* Inputs dentro del card: full width del card, no de la pantalla */
.login-card .form-control[b-6bwlx77io3] {
    width: 100%;
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    border: 1px solid #d1d5db;
    font-size: 0.95rem;
}

/* Botón */
.login-btn[b-6bwlx77io3] {
    width: 100%;
    border-radius: 999px;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Responsive extra-pequeño (móviles estrechos) */
@media (max-width: 480px) {
    .login-card[b-6bwlx77io3] {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .login-title[b-6bwlx77io3] {
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
    }
}
/* _content/netsynerCRM/Components/Pages/Mailing.razor.rz.scp.css */
.mailing-shell[b-cpoeiwstp2] {
    padding: 16px;
}

.mailing-header[b-cpoeiwstp2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.title h1[b-cpoeiwstp2] {
    margin: 0;
}

.subtitle[b-cpoeiwstp2] {
    opacity: .7;
    margin-top: 4px;
}

.actions[b-cpoeiwstp2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== Alerts (estilo propio, sin bootstrap) ===== */
.mailing-alert[b-cpoeiwstp2] {
    margin: 12px 0;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

    .mailing-alert .msg[b-cpoeiwstp2] {
        font-weight: 600;
    }

    .mailing-alert.info[b-cpoeiwstp2] {
    }

    .mailing-alert.success[b-cpoeiwstp2] {
        border-color: rgba(16,185,129,.35);
        background: rgba(16,185,129,.10);
    }

    .mailing-alert.warning[b-cpoeiwstp2] {
        border-color: rgba(245,158,11,.35);
        background: rgba(245,158,11,.10);
    }

    .mailing-alert.error[b-cpoeiwstp2] {
        border-color: rgba(239,68,68,.35);
        background: rgba(239,68,68,.10);
    }

.details-btn[b-cpoeiwstp2] {
    margin-top: 8px;
    border: none;
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
    opacity: .9;
    padding: 0;
}

.details[b-cpoeiwstp2] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    white-space: pre-wrap;
}

/* ===== Card ===== */
.mailing-card[b-cpoeiwstp2] {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    border-radius: 16px;
    padding: 14px;
}

.lbl[b-cpoeiwstp2] {
    font-weight: 700;
    margin-bottom: 6px;
}

.row1[b-cpoeiwstp2], .row3[b-cpoeiwstp2], .row4[b-cpoeiwstp2] {
    margin-bottom: 14px;
}

.row2[b-cpoeiwstp2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    .row2[b-cpoeiwstp2] {
        grid-template-columns: 1fr;
    }
}

.to-add[b-cpoeiwstp2] {
    display: flex;
    gap: 10px;
}

.chips[b-cpoeiwstp2] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hint[b-cpoeiwstp2] {
    opacity: .7;
    font-size: 13px;
}

.chip[b-cpoeiwstp2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
}

.chip-text[b-cpoeiwstp2] {
    font-size: 13px;
}

.chip-x[b-cpoeiwstp2] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: .85;
}

.editor-top[b-cpoeiwstp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.editor-actions[b-cpoeiwstp2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Quill host */
.quill-host[b-cpoeiwstp2] {
    background: #fff;
    border-radius: 12px;
    /* ❌ Esto rompe el tooltip (link) */
    /* overflow: hidden; */
    /* ✅ deja que el tooltip se vea completo */
    overflow: visible;
    min-height: 320px;
}
:deep(.ql-container)[b-cpoeiwstp2] {
    position: relative;
    overflow: visible !important;
}

:deep(.ql-tooltip)[b-cpoeiwstp2] {
    z-index: 9999;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}

:deep(.ql-tooltip.ql-editing input[type="text"])[b-cpoeiwstp2] {
    width: min(420px, calc(100vw - 140px));
    box-sizing: border-box;
}



.hint-mini[b-cpoeiwstp2] {
    margin-top: 8px;
    font-size: 12px;
    opacity: .75;
}





/* ===== MODAL (claro, consistente) ===== */
.modal-backdrop-custom[b-cpoeiwstp2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
}

.modal-card[b-cpoeiwstp2] {
    width: min(720px, 100%);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #111;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

.modal-card-sm[b-cpoeiwstp2] {
    width: min(520px, 100%);
}

.modal-head[b-cpoeiwstp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.10);
    background: #fff;
}

.modal-title[b-cpoeiwstp2] {
    font-weight: 800;
    color: #111;
}

.modal-body[b-cpoeiwstp2] {
    padding: 14px;
    color: #111;
}

.modal-actions[b-cpoeiwstp2] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.10);
    background: #fff;
}

/* Detalles dentro del modal (claro) */
.details-btn[b-cpoeiwstp2] {
    margin-top: 10px;
    border: none;
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
    opacity: .85;
    padding: 0;
    color: inherit;
}

.details[b-cpoeiwstp2] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(0,0,0,.18);
    background: rgba(0,0,0,.04);
    color: #111;
    white-space: pre-wrap;
}


/* =========================================================
   BUSY OVERLAY (animación mientras envía/sube)
   ========================================================= */

.busy-backdrop[b-cpoeiwstp2] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 16px;
    /* oscurece + desenfoque suave (si el navegador lo soporta) */
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* animación de entrada */
    animation: busyFadeIn-b-cpoeiwstp2 .12s ease-out;
}

@keyframes busyFadeIn-b-cpoeiwstp2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.busy-card[b-cpoeiwstp2] {
    width: min(420px, 100%);
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(18,18,18,.72);
    color: #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    gap: 14px;
    /* micro animación */
    transform: translateY(2px);
    animation: busyPop-b-cpoeiwstp2 .16s ease-out forwards;
}

@keyframes busyPop-b-cpoeiwstp2 {
    from {
        transform: translateY(10px) scale(.985);
        opacity: .0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Spinner tipo “ring” + pulso */
.busy-spinner[b-cpoeiwstp2] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.20);
    border-top-color: rgba(255,255,255,.95);
    animation: busySpin-b-cpoeiwstp2 .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes busySpin-b-cpoeiwstp2 {
    to {
        transform: rotate(360deg);
    }
}

.busy-text[b-cpoeiwstp2] {
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;
}

    .busy-text[b-cpoeiwstp2]::after {
        content: "";
        display: block;
        margin-top: 2px;
        font-weight: 500;
        opacity: .75;
        font-size: 12px;
    }

/* Accesibilidad: respeta usuarios con “reduce motion” */
@media (prefers-reduced-motion: reduce) {
    .busy-backdrop[b-cpoeiwstp2], .busy-card[b-cpoeiwstp2], .busy-spinner[b-cpoeiwstp2] {
        animation: none !important;
    }
}


/* Mientras está ocupado, baja la interacción visual del formulario */
.mailing-card[aria-busy="true"][b-cpoeiwstp2] {
    opacity: .92;
}

    .mailing-card[aria-busy="true"] .quill-host[b-cpoeiwstp2] {
        pointer-events: none;
        filter: grayscale(.15);
        opacity: .92;
    }

.busy-progress[b-cpoeiwstp2] {
    margin-top: 10px;
    width: 100%;
}

.busy-progress-top[b-cpoeiwstp2] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    opacity: .9;
}

.busy-bar[b-cpoeiwstp2] {
    margin-top: 8px;
    height: 8px;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    overflow: hidden;
}

.busy-bar-fill[b-cpoeiwstp2] {
    height: 100%;
    background: rgba(255,255,255,.75);
    border-radius: 999px;
    transition: width .18s ease;
}
/* _content/netsynerCRM/Components/Pages/Permisos.razor.rz.scp.css */
.permisos-shell[b-6hkl54me8z] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.permisos-header[b-6hkl54me8z] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.title h1[b-6hkl54me8z] {
    margin: 0;
    padding:20px 0px 0px 0px;
    font-size: 1.35rem;
    font-weight: 700;
}

.subtitle[b-6hkl54me8z] {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-top: 0.25rem;
}

.actions[b-6hkl54me8z] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.search[b-6hkl54me8z] {
    width: min(520px, 100%);
}

.table-wrap[b-6hkl54me8z] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,0.08);
}

.permisos-table[b-6hkl54me8z] {
    margin: 0;
    min-width: 820px;
}

.empty[b-6hkl54me8z] {
    padding: 1.25rem;
    text-align: center;
    opacity: 0.75;
}

.loading[b-6hkl54me8z] {
    padding: 1rem;
    opacity: 0.75;
}

.cell-main .name[b-6hkl54me8z] {
    font-weight: 600;
}

.cell-main .meta[b-6hkl54me8z] {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.hint-top[b-6hkl54me8z] {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    opacity: 0.75;
}

/* ======= Modal simple (sin JS) ======= */

.modal-backdrop-custom[b-6hkl54me8z] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2000;
}

.modal-card[b-6hkl54me8z] {
    width: min(900px, 100%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.25);
    overflow: hidden;
}

.modal-card-sm[b-6hkl54me8z] {
    width: min(520px, 100%);
}

.modal-head[b-6hkl54me8z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modal-title[b-6hkl54me8z] {
    font-weight: 700;
}

.modal-body[b-6hkl54me8z] {
    padding: 1rem 1.1rem;
}

.modal-actions[b-6hkl54me8z] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.modal-summary[b-6hkl54me8z] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.hint[b-6hkl54me8z] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

.perm-actions[b-6hkl54me8z] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem;
}

/* ======= Secciones de permisos (Clientes/Usuarios/Citas/Servicios) ======= */

.perm-section[b-6hkl54me8z] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

    .perm-section:first-child[b-6hkl54me8z] {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

.perm-section-title[b-6hkl54me8z] {
    font-weight: 800;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Grid de checks */
.perm-grid[b-6hkl54me8z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
}

.perm-item[b-6hkl54me8z] {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
}

    .perm-item span[b-6hkl54me8z] {
        line-height: 1.2;
    }

.perm-title[b-6hkl54me8z] {
    font-weight: 600;
    display: block;
}

/* (Opcional) si ya no pintas el código, puedes borrar esta clase.
   La dejo por si la usas en otro punto, pero no afecta si no existe el elemento. */
.perm-code[b-6hkl54me8z] {
    display: block;
    font-size: .8rem;
    opacity: .65;
    margin-top: .15rem;
}

.perm-item input[b-6hkl54me8z] {
    transform: translateY(1px);
}

/* ======= Responsive ======= */
.col-show-xs[b-6hkl54me8z] {
    display: none;
}

@media (max-width: 576px) {
    .col-hide-sm[b-6hkl54me8z] {
        display: none;
    }

    .col-show-xs[b-6hkl54me8z] {
        display: block;
    }

    .actions[b-6hkl54me8z] {
        width: 100%;
    }

    .search[b-6hkl54me8z] {
        flex: 1;
    }

    .perm-grid[b-6hkl54me8z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .perm-grid[b-6hkl54me8z] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ======= Busy overlay ======= */
.busy-backdrop[b-6hkl54me8z] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 3000; /* por encima del modal */
}

.busy-card[b-6hkl54me8z] {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.25);
    padding: 1rem 1.1rem;
    display: flex;
    gap: .75rem;
    align-items: center;
}

.busy-text[b-6hkl54me8z] {
    font-weight: 600;
    line-height: 1.2;
}

.busy-spinner[b-6hkl54me8z] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.55);
    animation: busySpin-b-6hkl54me8z .8s linear infinite;
}

@keyframes busySpin-b-6hkl54me8z {
    to {
        transform: rotate(360deg);
    }
}


/* ===== Fix: modales con scroll interno en móvil (Permisos / Ver / etc.) ===== */
.modal-card[b-6hkl54me8z],
.modal-card-sm[b-6hkl54me8z] {
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}

.modal-body[b-6hkl54me8z] {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-head[b-6hkl54me8z],
.modal-actions[b-6hkl54me8z] {
    flex: 0 0 auto;
}
/* _content/netsynerCRM/Components/Pages/Renovaciones.razor.rz.scp.css */
/* =========================================================
   RENOVACIONES (página /renovaciones)
   - MISMO look & feel que Agenda: tabs, cards, tonos, modales, badges
   - Mantiene .crm-modal* para modales (compartido)
   ========================================================= */

/* =========================================================
   1) CONTENEDOR + HEADER
   ========================================================= */
.ren-shell[b-v40k9voxy2] {
    padding: 16px;
}

.ren-header[b-v40k9voxy2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .ren-header .title h1[b-v40k9voxy2] {
        margin: 0;
    }

    .ren-header .subtitle[b-v40k9voxy2] {
        opacity: .7;
        margin-top: 4px;
    }

.ren-actions[b-v40k9voxy2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Search */
.ren-search[b-v40k9voxy2] {
    min-width: min(420px, 100%);
}

/* =========================================================
   2) TABS (CLON Agenda -> ren-tabs)
   ========================================================= */
.ren-tabs[b-v40k9voxy2] {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 14px;
    background: rgba(15,23,42,.05);
    border: 1px solid rgba(15,23,42,.10);
    overflow-x: auto;
}

    .ren-tabs .tab[b-v40k9voxy2] {
        appearance: none;
        border: 1px solid rgba(15,23,42,.14);
        background: rgba(255,255,255,.92);
        color: #0f172a;
        border-radius: 12px;
        padding: 9px 14px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        transition: background .12s ease, transform .08s ease, border-color .12s ease, opacity .12s ease, box-shadow .12s ease;
        user-select: none;
        white-space: nowrap;
    }

        .ren-tabs .tab:hover[b-v40k9voxy2] {
            background: #ffffff;
            border-color: rgba(15,23,42,.20);
            transform: translateY(-1px);
        }

        .ren-tabs .tab:active[b-v40k9voxy2] {
            transform: translateY(0px);
        }

        .ren-tabs .tab.active[b-v40k9voxy2] {
            background: rgba(59,130,246,.12);
            border-color: rgba(59,130,246,.55);
            color: #0b2a5b;
            box-shadow: 0 0 0 3px rgba(59,130,246,.14);
        }

        .ren-tabs .tab:disabled[b-v40k9voxy2] {
            opacity: .55;
            cursor: not-allowed;
            transform: none;
        }


/* =========================================================
   3) CARDS / HEADERS / TEXTOS
   ========================================================= */
.ren-card[b-v40k9voxy2] {
    margin-top: 14px;
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.ren-card-head[b-v40k9voxy2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 12px;
}

    .ren-card-head h2[b-v40k9voxy2] {
        margin: 0;
        font-weight: 900;
        color: #0f172a;
    }

.muted[b-v40k9voxy2] {
    opacity: .75;
    color: #334155;
}

.ren-placeholder[b-v40k9voxy2] {
    opacity: .7;
    padding: 10px 0;
}

.empty[b-v40k9voxy2],
.ren-card .empty[b-v40k9voxy2] {
    margin-top: 4px;
    opacity: .55;
    font-size: .92rem;
    color: #334155;
}

/* =========================================================
   4) ALERTAS
   ========================================================= */
.ren-alert[b-v40k9voxy2] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,.12);
    background: rgba(15,23,42,.04);
    color: #0f172a;
}

    .ren-alert.error[b-v40k9voxy2] {
        border-color: rgba(220,38,38,.22);
        background: rgba(220,38,38,.06);
        color: #7f1d1d;
    }

    .ren-alert.warning[b-v40k9voxy2] {
        border-color: rgba(245,158,11,.22);
        background: rgba(245,158,11,.08);
        color: #7c2d12;
    }

/* =========================================================
   5) TABLA (Renovaciones)
   ========================================================= */
.ren-table-wrap[b-v40k9voxy2] {
    width: 100%;
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
}

.ren-table[b-v40k9voxy2] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 780px;
    background: #fff;
}

    .ren-table thead th[b-v40k9voxy2] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
        border-bottom: 1px solid rgba(0,0,0,.08);
        color: #0f172a;
        font-weight: 900;
        padding: 12px 12px;
        text-align: left;
        white-space: nowrap;
    }

    .ren-table tbody td[b-v40k9voxy2] {
        padding: 12px 12px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        vertical-align: middle;
        color: #0f172a;
    }

    .ren-table tbody tr:hover[b-v40k9voxy2] {
        background: rgba(59,130,246,.04);
    }

    .ren-table .sortable[b-v40k9voxy2] {
        cursor: pointer;
        user-select: none;
    }

.sort-arrow[b-v40k9voxy2] {
    margin-left: 6px;
    font-size: 12px;
    opacity: .8;
}

.clickable[b-v40k9voxy2] {
    cursor: pointer;
}

.empty-row[b-v40k9voxy2] {
    text-align: center;
    opacity: .65;
    color: #334155;
}

.cell-main[b-v40k9voxy2] {
    font-weight: 900;
    color: #0f172a;
}

.cell-sub[b-v40k9voxy2] {
    margin-top: 2px;
    font-size: .92rem;
}

.row-actions[b-v40k9voxy2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* =========================================================
   6) BADGES (Estado)
   ========================================================= */
.badge[b-v40k9voxy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    border: 1px solid rgba(17,24,39,.12);
    background: rgba(15,23,42,.04);
    color: #0f172a;
    white-space: nowrap;
}

    /* mapping: ok / warn / off (como en Agenda) */
    .badge.ok[b-v40k9voxy2] {
        background: rgba(34,197,94,.12);
        border-color: rgba(34,197,94,.35);
        color: #14532d;
    }

    .badge.warn[b-v40k9voxy2] {
        background: rgba(245,158,11,.14);
        border-color: rgba(245,158,11,.35);
        color: #7c2d12;
    }

    .badge.off[b-v40k9voxy2] {
        background: rgba(100,116,139,.12);
        border-color: rgba(100,116,139,.28);
        color: #334155;
    }

/* =========================================================
   7) GRID CARDS (tab servicios)
   ========================================================= */
.ren-grid[b-v40k9voxy2] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ren-item[b-v40k9voxy2] {
    text-align: left;
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    transition: transform .08s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
}

    .ren-item:hover[b-v40k9voxy2] {
        transform: translateY(-1px);
        border-color: rgba(59,130,246,.28);
        box-shadow: 0 12px 30px rgba(0,0,0,.10);
        background: rgba(59,130,246,.03);
    }

    .ren-item .top[b-v40k9voxy2] {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: flex-start;
    }

    .ren-item .name[b-v40k9voxy2] {
        font-weight: 900;
        font-size: 1.05rem;
        color: #0f172a;
    }

    .ren-item .meta[b-v40k9voxy2] {
        margin-top: 10px;
        display: grid;
        gap: 6px;
        font-size: .92rem;
        color: #334155;
    }

        .ren-item .meta b[b-v40k9voxy2] {
            color: #0f172a;
        }

    .ren-item .actions[b-v40k9voxy2] {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

        .ren-item .actions .left[b-v40k9voxy2] {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .ren-item .actions .right[b-v40k9voxy2] {
            white-space: nowrap;
        }

/* =========================================================
   8) CATS TAB (categorías / subs)
   ========================================================= */
.ren-cats-grid[b-v40k9voxy2] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ren-cats-col[b-v40k9voxy2] {
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 14px;
    background: rgba(15,23,42,.02);
    padding: 12px;
}

.ren-cats-title[b-v40k9voxy2] {
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 10px;
}

.ren-cat-item[b-v40k9voxy2] {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.92);
    color: #0f172a;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
    margin-bottom: 8px;
}

    .ren-cat-item:hover[b-v40k9voxy2] {
        background: #fff;
        border-color: rgba(15,23,42,.20);
        transform: translateY(-1px);
    }

    .ren-cat-item.active[b-v40k9voxy2] {
        background: rgba(59,130,246,.12);
        border-color: rgba(59,130,246,.55);
        color: #0b2a5b;
        box-shadow: 0 0 0 3px rgba(59,130,246,.14);
    }

.ren-sub-list[b-v40k9voxy2] {
    display: grid;
    gap: 10px;
}

.ren-sub-item[b-v40k9voxy2] {
    border: 1px solid rgba(17,24,39,.10);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

    .ren-sub-item .name[b-v40k9voxy2] {
        font-weight: 900;
        color: #0f172a;
    }

/* =========================================================
   9) CONFIG (UI) (mismo patrón que Agenda)
   ========================================================= */
.ren-config-grid[b-v40k9voxy2] {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.ren-config-item[b-v40k9voxy2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 14px;
    background: rgba(15,23,42,.02);
}

.ren-label .ttl[b-v40k9voxy2] {
    font-weight: 900;
    color: #0f172a;
}

.ren-label .sub[b-v40k9voxy2] {
    margin-top: 2px;
    font-size: .92rem;
    color: #334155;
    opacity: .8;
}

/* Switch moderno (mismo que Agenda) */
.switch[b-v40k9voxy2] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex: 0 0 auto;
}

    .switch input[b-v40k9voxy2] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-v40k9voxy2] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(15,23,42,.12);
    border: 1px solid rgba(17,24,39,.14);
    transition: .15s ease;
    border-radius: 999px;
}

    .slider[b-v40k9voxy2]:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        top: 3px;
        background: #fff;
        border: 1px solid rgba(17,24,39,.12);
        transition: .15s ease;
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(0,0,0,.10);
    }

.switch input:checked + .slider[b-v40k9voxy2] {
    background: rgba(59,130,246,.35);
    border-color: rgba(59,130,246,.45);
}

    .switch input:checked + .slider[b-v40k9voxy2]:before {
        transform: translateX(22px);
    }

.switch input:disabled + .slider[b-v40k9voxy2] {
    opacity: .55;
    cursor: not-allowed;
}

/* =========================================================
   10) FORM HELPERS (para el modal)
   ========================================================= */
.form-row[b-v40k9voxy2] {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

    .form-row label[b-v40k9voxy2] {
        font-weight: 900;
        color: #0f172a;
    }

.form-grid2[b-v40k9voxy2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.form-grid3[b-v40k9voxy2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.area-sm[b-v40k9voxy2] {
    min-height: 90px;
}

/* =========================================================
   11) PAGER
   ========================================================= */
.ren-pager[b-v40k9voxy2] {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
   12) RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .ren-actions[b-v40k9voxy2] {
        align-items: stretch;
    }

    .ren-grid[b-v40k9voxy2] {
        grid-template-columns: 1fr;
    }

    .ren-cats-grid[b-v40k9voxy2] {
        grid-template-columns: 1fr;
    }

    .form-grid2[b-v40k9voxy2] {
        grid-template-columns: 1fr;
    }

    .form-grid3[b-v40k9voxy2] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   13) DARK MODE (solo ajustes ligeros)
   ========================================================= */
body.dark .ren-card[b-v40k9voxy2] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
}

body.dark .ren-card-head[b-v40k9voxy2] {
    border-bottom-color: rgba(255,255,255,.10);
}

body.dark .muted[b-v40k9voxy2] {
    color: rgba(255,255,255,.72);
}

body.dark .ren-table-wrap[b-v40k9voxy2] {
    border-color: rgba(255,255,255,.12);
}

body.dark .ren-table[b-v40k9voxy2] {
    background: transparent;
}

    body.dark .ren-table thead th[b-v40k9voxy2] {
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.92);
        border-bottom-color: rgba(255,255,255,.12);
    }

    body.dark .ren-table tbody td[b-v40k9voxy2] {
        border-bottom-color: rgba(255,255,255,.08);
        color: rgba(255,255,255,.92);
    }

body.dark .ren-item[b-v40k9voxy2] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

    body.dark .ren-item:hover[b-v40k9voxy2] {
        background: rgba(59,130,246,.10);
    }

body.dark .ren-cats-col[b-v40k9voxy2] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

body.dark .ren-sub-item[b-v40k9voxy2] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}


/* ===================== MODALES (unificados) ===================== */
.crm-modal-backdrop[b-v40k9voxy2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

.crm-modal[b-v40k9voxy2] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.22);
    z-index: 9999;
}

.crm-modal-head[b-v40k9voxy2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.crm-modal-title[b-v40k9voxy2] {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
}

.crm-modal-body[b-v40k9voxy2] {
    padding: 16px;
}

.crm-modal-foot[b-v40k9voxy2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* ===================== ALERTS (dentro y fuera de modales) ===================== */
.ren-alert[b-v40k9voxy2] {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.08);
    background: #f6f7f9;
    color: #111;
}

    .ren-alert.error[b-v40k9voxy2] {
        background: #fff1f1;
        border-color: #ffd2d2;
        color: #8a1f1f;
    }

    .ren-alert.warning[b-v40k9voxy2] {
        background: #fff7e6;
        border-color: #ffe0a8;
        color: #6b4b00;
    }

    .ren-alert.info[b-v40k9voxy2] {
        background: #eef6ff;
        border-color: #cfe6ff;
        color: #0b3d6e;
    }

    .ren-alert.ok[b-v40k9voxy2] {
        background: #effaf2;
        border-color: #cfeeda;
        color: #0f5132;
    }

/* El “alert” dentro del modal resultado, que respire mejor */
.crm-modal-body .ren-alert[b-v40k9voxy2] {
    padding: 14px 14px;
    border-radius: 12px;
    font-weight: 600;
}

/* ===================== FORMS en modal ===================== */
.form-row[b-v40k9voxy2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-grid2[b-v40k9voxy2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-grid3[b-v40k9voxy2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .form-grid2[b-v40k9voxy2], .form-grid3[b-v40k9voxy2] {
        grid-template-columns: 1fr;
    }
}

/* ===================== SWITCH ===================== */
.switch[b-v40k9voxy2] {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}

    .switch input[b-v40k9voxy2] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch .slider[b-v40k9voxy2] {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: #d0d5dd;
        border-radius: 999px;
        transition: .15s ease;
    }

        .switch .slider[b-v40k9voxy2]:before {
            content: "";
            position: absolute;
            height: 20px;
            width: 20px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: .15s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,.18);
        }

    .switch input:checked + .slider[b-v40k9voxy2] {
        background: #2563eb;
    }

        .switch input:checked + .slider[b-v40k9voxy2]:before {
            transform: translateX(20px);
        }

.badge-soft[b-v40k9voxy2] {
    background: #eef1f5;
    color: #333;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
}


/* ===== ESTADOS POR FECHA EXPIRACIÓN ===== */

/* Celda expira: dot grande + texto + auto */
.ren-expira-cell[b-v40k9voxy2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* DOT grande (muy visible) */
.ren-dot[b-v40k9voxy2] {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset;
}

    .ren-dot.dot-red[b-v40k9voxy2] {
        background: #e53935;
    }

    /* cambiado a amarillo */
    .ren-dot.dot-orange[b-v40k9voxy2] {
        background: #fbc02d;
    }

    /* cambiado a naranja */
    .ren-dot.dot-yellow[b-v40k9voxy2] {
        background: #fb8c00;
    }

    .ren-dot.dot-blue[b-v40k9voxy2] {
        background: #1e88e5;
    }

    .ren-dot.dot-green[b-v40k9voxy2] {
        background: #43a047;
    }

    .ren-dot.dot-gray[b-v40k9voxy2] {
        background: #9e9e9e;
    }

.ren-auto[b-v40k9voxy2] {
    font-size: 20px; /* ⬅ casi el doble */
    line-height: 1;
    opacity: 1;
    margin-left: 4px;
    color: #1e88e5;
    vertical-align: middle;
}

/* ===== FILTROS ===== */

.ren-header[b-v40k9voxy2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.ren-actions[b-v40k9voxy2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ren-filters-wrap[b-v40k9voxy2] {
    width: 100%;
}

.ren-filters-wrap[b-v40k9voxy2] {
    margin-top: 10px;
}
[b-v40k9voxy2] .ren-filters {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.10);
}

[b-v40k9voxy2] .ren-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

[b-v40k9voxy2] .ren-filters-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    [b-v40k9voxy2] .ren-filters-grid {
        grid-template-columns: 1fr;
    }
}


.form-help[b-v40k9voxy2] {
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: .85rem;
    opacity: .75;
}


/* ===== Secciones dentro de la modal ===== */
.crm-form-section[b-v40k9voxy2] {
    margin-top: 14px;
    padding: 14px 14px 10px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: rgba(0,0,0,.02);
}

    .crm-form-section:first-child[b-v40k9voxy2] {
        margin-top: 0;
    }

.crm-form-section-title[b-v40k9voxy2] {
    font-weight: 900;
    font-size: 1.05rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .crm-form-section-title[b-v40k9voxy2]:after {
        content: "";
        height: 1px;
        background: rgba(0,0,0,.08);
        flex: 1;
        margin-top: 2px;
    }

/* ===== Sección Avisos un pelín destacada ===== */
.crm-form-section--warn[b-v40k9voxy2] {
    background: rgba(255, 193, 7, .07);
    border-color: rgba(255, 193, 7, .25);
}

/* ===== Texto ayuda ===== */
.form-help[b-v40k9voxy2] {
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: .85rem;
    opacity: .75;
}
/* _content/netsynerCRM/Components/Pages/Usuarios.razor.rz.scp.css */
/* Evita que el contenido “reviente” el ancho disponible */
.usuarios-shell[b-10d31khn87] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.usuarios-header[b-10d31khn87] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.title h1[b-10d31khn87] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.subtitle[b-10d31khn87] {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-top: 0.25rem;
}

.actions[b-10d31khn87] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.search[b-10d31khn87] {
    width: min(520px, 100%);
}

/* Tabla: el scroll (si hace falta) se queda aquí, no en la página */
.table-wrap[b-10d31khn87] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,0.08);
}

.usuarios-table[b-10d31khn87] {
    margin: 0;
    min-width: 920px; /* un poco más que clientes: roles/bloqueo/acciones */
}

.empty[b-10d31khn87] {
    padding: 1.25rem;
    text-align: center;
    opacity: 0.75;
}

.cell-main .name[b-10d31khn87] {
    font-weight: 600;
}

.cell-main .meta[b-10d31khn87] {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.dot[b-10d31khn87] {
    padding: 0 0.4rem;
}

.loading[b-10d31khn87] {
    padding: 1rem;
    opacity: 0.75;
}

/* ======= Modal simple (sin JS) ======= */
.modal-backdrop-custom[b-10d31khn87] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2000;
}

.modal-card[b-10d31khn87] {
    width: min(720px, 100%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.25);
    overflow: hidden;
}

.modal-card-sm[b-10d31khn87] {
    width: min(520px, 100%);
}

.modal-head[b-10d31khn87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modal-title[b-10d31khn87] {
    font-weight: 700;
}

.modal-body[b-10d31khn87] {
    padding: 1rem 1.1rem;
}

.hint[b-10d31khn87] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

.modal-actions[b-10d31khn87] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* Inputs en modales */
.form-grid[b-10d31khn87] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

    .form-grid .full[b-10d31khn87] {
        grid-column: 1 / -1;
    }

.form-row label[b-10d31khn87] {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.form-row input[b-10d31khn87], .form-row select[b-10d31khn87] {
    width: 100%;
}

/* ======= Vista SOLO LECTURA ======= */
.readonly-grid .readonly-field[b-10d31khn87] {
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: .375rem;
    background: rgba(0,0,0,0.03);
    line-height: 1.5;
    user-select: text;
}

/* ======= Responsive columnas ======= */
.col-show-xs[b-10d31khn87] {
    display: none;
}

@media (max-width: 576px) {
    .col-hide-xs[b-10d31khn87] {
        display: none;
    }

    .col-show-xs[b-10d31khn87] {
        display: block;
    }

    .actions[b-10d31khn87] {
        width: 100%;
    }

    .search[b-10d31khn87] {
        flex: 1;
    }

    .form-grid[b-10d31khn87] {
        grid-template-columns: 1fr;
    }
}

/* Modal: que nunca supere la pantalla */
.modal-card[b-10d31khn87],
.modal-card-sm[b-10d31khn87] {
    max-height: calc(100dvh - 2rem); /* usa dvh para móviles modernos */
    display: flex;
    flex-direction: column;
}

/* El scroll solo aquí (contenido) */
.modal-body[b-10d31khn87] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

/* Opcional: si quieres asegurar que head/actions no se encojan */
.modal-head[b-10d31khn87],
.modal-actions[b-10d31khn87] {
    flex: 0 0 auto;
}


@media (max-width: 768px) {
    .col-hide-sm[b-10d31khn87] {
        display: none;
    }
}

@media (max-width: 992px) {
    .col-hide-md[b-10d31khn87] {
        display: none;
    }
}


td button[b-10d31khn87]{
    margin: 5px ;
}
/* _content/netsynerCRM/Components/Shared/NotificationsPanel.razor.rz.scp.css */
/* _content/netsynerCRM/Components/Shared/RenovacionesFiltros.razor.rz.scp.css */
/* ===================== RenovacionesFiltros ===================== */

.ren-filters[b-tfku7xdc9t] {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.ren-filters-grid[b-tfku7xdc9t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.ren-filters-actions[b-tfku7xdc9t] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .ren-filters-grid[b-tfku7xdc9t] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .ren-filters-grid[b-tfku7xdc9t] {
        grid-template-columns: 1fr;
    }
}