:root {
    --sc-dark: #2c2c2c;
    --sc-accent: #00e5a0;
    --sc-text: #1f2328;
}

/* TOPBAR */
.sc-topbar.navbar-inverse {
    background: var(--sc-dark);
    border-color: var(--sc-dark);
}

.sc-brand .sc-brand-title {
    color: #fff;
    font-weight: 600;
}

.sc-sidebar-toggle {
    color: #fff !important;
    text-decoration: none !important;
}

    .sc-sidebar-toggle:hover {
        color: var(--sc-accent) !important;
    }

/* Top menu links */
.sc-topnav > li > a {
    color: #e6e6e6 !important;
}

    .sc-topnav > li > a:hover,
    .sc-topnav > li > a:focus {
        color: #fff !important;
    }

.sc-topnav i {
    color: var(--sc-accent);
}

/* Search */
.sc-search-input {
    border-radius: 8px 0 0 8px !important;
}

.sc-search-btn {
    border-radius: 0 8px 8px 0 !important;
}

/* User area */
.sc-user-text {
    color: #e6e6e6 !important;
}

/* SIDEBAR (sin azul) */
.sc-sidebar {
    background: #32363a;
    border-right: 1px solid #2a2d30;
}

.sc-sidebar-header {
    padding: 16px 14px;
    border-bottom: 1px solid #2a2d30;
}

.sc-logo {
    color: #fff;
    font-weight: 700;
    letter-spacing: .6px;
}

.sc-sidenav {
    margin: 0;
    padding: 10px 0;
}

.sc-nav-section {
    padding: 10px 16px;
    color: #aeb4bb;
    font-size: 11px;
    letter-spacing: .8px;
}

.sc-sidenav > li > a {
    color: #d9dde3;
    padding: 10px 16px;
}

    .sc-sidenav > li > a:hover,
    .sc-sidenav > li > a:focus {
        background: rgba(0, 229, 160, .10);
        color: #fff;
    }

.sc-sidenav i {
    color: var(--sc-accent);
    margin-right: 10px;
    font-size: 18px;
    vertical-align: middle;
}

/* “Activo” (cuando lo conectes) */
.sc-sidenav > li.active > a {
    background: rgba(0, 229, 160, .16);
    border-left: 3px solid var(--sc-accent);
}

/* SOS */
.sc-sos > a {
    background: rgba(231, 76, 60, .18);
    color: #fff !important;
}

    .sc-sos > a:hover {
        background: rgba(231, 76, 60, .28);
    }

.sc-sos i {
    color: #ffb3aa;
}

/* Badge */
.sc-badge {
    background: var(--sc-accent);
    color: #0b1f18;
}

.sc-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.sc-logo-img {
    width: 24px;
    height: 24px;
}

.sc-logo-text {
    color: #fff;
    font-weight: 700;
    letter-spacing: .6px;
}

/* En colapsado: ocultar texto, dejar solo favicon */
.sc-wrapper.sc-sidebar-collapsed .sc-logo-text {
    display: none;
}

.sc-wrapper.sc-sidebar-collapsed .sc-logo-wrap {
    justify-content: center;
    gap: 0;
}

/* Brand: que no crezca y use ellipsis */
.sc-brand {
    display: inline-block;
    max-width: 260px; /* ajusta a tu gusto */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff !important;
    font-weight: 600;
}

/* Dropdown botón usuario */
.sc-user-dd > a.sc-user-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #e6e6e6 !important;
    transition: background .12s ease, color .12s ease;
    border-radius: 10px;
    margin-right: 8px;
}

    .sc-user-dd.open > a.sc-user-btn,
    .sc-user-dd > a.sc-user-btn:hover,
    .sc-user-dd > a.sc-user-btn:focus {
        background: rgba(0,229,160,.12) !important;
        color: #fff !important;
    }

.sc-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
}

    .sc-user-avatar i {
        color: var(--sc-accent);
        font-size: 20px;
    }

.sc-user-name {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-user-caret {
    color: #9aa1aa;
    font-size: 18px;
}

/* Menú dropdown elegante */
.sc-user-menu {
    border-radius: 12px;
    border: 1px solid #e6e8ee;
    padding: 8px;
    min-width: 240px;
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.sc-user-menu-title {
    padding: 10px 12px;
}

.sc-user-menu-hello {
    font-size: 12px;
    color: #6b7280;
}

.sc-user-menu-full {
    font-weight: 700;
    color: #1f2328;
    margin-top: 2px;
}

/* Ítems */
.sc-user-menu > li > a {
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

    .sc-user-menu > li > a i {
        color: var(--sc-accent);
        font-size: 18px;
    }

    .sc-user-menu > li > a:hover,
    .sc-user-menu > li > a:focus {
        background: rgba(0,229,160,.10);
    }

/* Logout destacado */
.sc-user-logout i {
    color: #e74c3c;
}

.sc-user-logout:hover {
    background: rgba(231,76,60,.10) !important;
}

/* Navbar brand: alineación vertical y ellipsis real */
.sc-topbar .navbar-brand.sc-brand {
    height: 50px; /* navbar BS3 */
    line-height: 50px; /* centra vertical */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 320px; /* ajusta */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Sidebar nav base */
.sc-sidenav {
    padding: 10px 0;
    margin: 0;
}

.sc-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #d9dde3;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    border-radius: 0;
    position: relative;
}

    .sc-nav-link:hover,
    .sc-nav-link:focus {
        background: rgba(0,229,160,.10);
        color: #fff;
        border-left-color: rgba(0,229,160,.45);
    }

    .sc-nav-link i {
        color: var(--sc-accent);
        font-size: 18px;
        min-width: 18px;
    }

.sc-nav-caret {
    margin-left: auto;
    color: #aeb4bb;
    font-size: 18px;
}

/* Subnav */
.sc-subnav {
    margin: 0;
    padding: 6px 0 8px 0;
}

.sc-subnav-link {
    display: block;
    padding: 8px 16px 8px 46px; /* indent */
    color: #cfd5dd;
    text-decoration: none !important;
    font-size: 12px;
}

    .sc-subnav-link:hover,
    .sc-subnav-link:focus {
        background: rgba(255,255,255,.04);
        color: #fff;
    }

/* Collapsed sidebar: ocultar textos y caret, y cerrar submenus */
.sc-wrapper.sc-sidebar-collapsed .sc-nav-link span,
.sc-wrapper.sc-sidebar-collapsed .sc-nav-caret {
    display: none;
}

.sc-wrapper.sc-sidebar-collapsed .sc-subnav {
    display: none !important;
}

.sc-wrapper.sc-sidebar-collapsed .sc-nav-link {
    justify-content: center;
    padding: 12px 10px;
    border-left-color: transparent;
}

/* SOS button */
.sc-sos-item {
    padding: 10px 12px 0 12px;
}

.sc-sos-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(231, 76, 60, .18);
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(231, 76, 60, .22);
}

    .sc-sos-btn:hover {
        background: rgba(231, 76, 60, .28);
    }

    .sc-sos-btn i {
        color: #ffb3aa;
        font-size: 18px;
    }

/* Collapsed: dejar solo ícono SOS */
.sc-wrapper.sc-sidebar-collapsed .sc-sos-btn strong {
    display: none;
}


/* Alerts*/
.sc-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid transparent;
}

    .sc-alert i {
        font-size: 18px;
        flex-shrink: 0;
    }

.sc-alert-info {
    background-color: #eef6ff;
    border-color: #cfe5ff;
    color: #0c63e4;
}

    .sc-alert-info i {
        color: #0c63e4;
    }

.sc-alert-success {
    background-color: #edf7ed;
    border-color: #cde9ce;
    color: #2e7d32;
}

    .sc-alert-success i {
        color: #2e7d32;
    }

.sc-alert-warning {
    background-color: #fff8e1;
    border-color: #ffe0a3;
    color: #b26a00;
}

    .sc-alert-warning i {
        color: #b26a00;
    }

.sc-alert-danger {
    background-color: #fdecea;
    border-color: #f5c2c0;
    color: #c62828;
}

    .sc-alert-danger i {
        color: #c62828;
    }

.sc-alert-neutral {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #424242;
}

    .sc-alert-neutral i {
        color: #616161;
    }

.sc-alert-sm {
    padding: 8px 12px;
    font-size: 12px;
}

.sc-alert + .sc-alert {
    margin-top: 10px;
}

.sc-alert-center {
    justify-content: center;
    text-align: center;
}



/*para cambiar un radiobutton center un toggle bonito*/
.sc-toggle-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-toggle {
    position: relative;
    cursor: pointer;
}

    .sc-toggle input {
        display: none;
    }

.sc-toggle-ui {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.15);
    background: #fff;
    transition: all .15s ease;
}

.sc-toggle-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

.sc-toggle input:checked + .sc-toggle-ui {
    background: rgba(0,229,160,.12);
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 1px var(--sc-accent) inset;
}

.sc-toggle input:checked ~ .sc-toggle-label {
    color: #0b1f18;
}

/*FIN ****para cambiar un radiobutton center un toggle bonito*/

/*Mostrar prestaciones como card*/
/* syscomp.v1.theme.css */
.sc-benefits-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sc-benefit-card {
    border: 1px solid #e6e8ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    overflow: hidden;
}

.sc-benefit-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    background: rgba(0,229,160,.07);
    border-bottom: 1px solid rgba(0,229,160,.16);
}

.sc-benefit-specialty {
    font-size: 14px;
    font-weight: 900;
    color: #1f2328;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sc-benefit-specialty i {
        color: var(--sc-accent);
        font-size: 19px;
    }

.sc-benefit-type {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
}

.sc-benefit-count {
    white-space: nowrap;
    align-self: flex-start;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    font-size: 11px;
    font-weight: 900;
    color: #6b7280;
}

.sc-benefit-list {
    padding: 8px 12px 12px 12px;
}

.sc-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 2px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 12px;
    font-weight: 700;
    color: #1f2328;
}

    .sc-benefit-item:last-child {
        border-bottom: 0;
    }

    .sc-benefit-item i {
        color: var(--sc-accent);
        font-size: 16px;
        margin-top: 1px;
    }

.sc-benefits-empty {
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #fff;
    color: #6b7280;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 991px) {
    .sc-benefits-wrap {
        grid-template-columns: 1fr;
    }
}
/*FIN***** Mostrar prestaciones como card*/

/*Este section supone muestra de mejor forma un resumen de pagos en dental, veamos si sirve en otro lado*/
.sc-paycancel-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sc-paycancel-card {
    border: 1px solid #e6e8ee;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.sc-paycancel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: rgba(239,68,68,.06);
    border-bottom: 1px solid rgba(239,68,68,.16);
}

.sc-paycancel-title {
    font-size: 15px;
    font-weight: 900;
    color: #1f2328;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sc-paycancel-title i {
        color: #ef4444;
        font-size: 18px;
    }

.sc-paycancel-sub {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}

.sc-paycancel-amount {
    font-size: 18px;
    font-weight: 900;
    color: #991b1b;
    white-space: nowrap;
}

.sc-paycancel-body {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sc-paycancel-field {
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 9px 11px;
    background: #f8fafc;
}

    .sc-paycancel-field span {
        display: block;
        font-size: 11px;
        font-weight: 900;
        color: #6b7280;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .sc-paycancel-field strong {
        display: block;
        font-size: 13px;
        color: #1f2328;
        overflow-wrap: anywhere;
    }

.sc-paycancel-foot {
    padding: 12px 14px;
    border-top: 1px solid #eef0f4;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .sc-paycancel-head {
        flex-direction: column;
    }

    .sc-paycancel-body {
        grid-template-columns: 1fr;
    }
}
/*FIN***** Este section supone muestra de mejor forma un resumen de pagos en dental, veamos si sirve en otro lado*/

/*BANNER MENÚS*/
.sc-ae-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.78));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 42px rgba(15,23,42,.22);
}

    .sc-ae-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(760px 260px at 12% 20%, rgba(0,229,160,.22), transparent 58%), radial-gradient(520px 220px at 92% 28%, rgba(239,68,68,.20), transparent 52%);
        pointer-events: none;
    }

.sc-ae-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.sc-ae-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
}

.sc-ae-title {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sc-ae-title i {
        color: var(--sc-accent);
        font-size: 34px;
    }

.sc-ae-sub {
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    max-width: 680px;
}

.sc-ae-mark {
    width: 92px;
    height: 92px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

    .sc-ae-mark i {
        font-size: 48px;
        color: var(--sc-accent);
    }

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

.sc-ae-card {
    position: relative;
    min-height: 166px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
    padding: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

    .sc-ae-card:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(420px 120px at 20% 0%, rgba(0,229,160,.10), transparent 62%);
        pointer-events: none;
    }

    .sc-ae-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 38px rgba(15,23,42,.13);
        border-color: rgba(0,229,160,.34);
    }

.sc-ae-card-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sc-ae-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sc-ae-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,229,160,.13);
    border: 1px solid rgba(0,229,160,.20);
    color: #0b1f18;
    flex: 0 0 auto;
}

    .sc-ae-icon i {
        font-size: 26px;
    }

.sc-ae-card-title {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    margin-top: 2px;
}

.sc-ae-card-text {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(15,23,42,.68);
}

.sc-ae-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sc-ae-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,.05);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.70);
    font-size: 11px;
    font-weight: 900;
}

.sc-ae-go {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,229,160,.12);
    color: #0b1f18;
    transition: transform .16s ease;
}

.sc-ae-card:hover .sc-ae-go {
    transform: translateX(2px);
}

.sc-ae-go i {
    font-size: 20px;
}

@media (max-width: 991px) {
    .sc-ae-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .sc-ae-title {
        font-size: 24px;
    }

    .sc-ae-mark {
        display: none;
    }
}
/*FIN BANNER MENÚS*/

/*CUADRATURA DE CAJA*/
/* agregar en syscomp.v1.theme.css */
.sc-cashdash {
    border: 1px solid #e6e8ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    overflow: hidden;
}

.sc-cashdash-main {
    padding: 16px;
    background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.82));
}

.sc-cashdash-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.sc-cashdash-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .sc-cashdash-kicker i {
        color: var(--sc-accent);
        font-size: 18px;
    }

.sc-cashdash-title {
    margin-top: 6px;
}

.sc-cashdash-input-title {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    padding: 0;
}

    .sc-cashdash-input-title:disabled {
        opacity: 1;
        cursor: default;
    }

.sc-cashdash-amount {
    min-width: 260px;
}

    .sc-cashdash-amount > span {
        display: block;
        color: rgba(255,255,255,.72);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

.sc-cashdash-money {
    font-size: 16px;
    font-weight: 900;
    text-align: right;
}

.sc-cashdash-grid {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sc-cashdash-item {
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 12px;
    background: #f8fafc;
}

    .sc-cashdash-item i {
        color: var(--sc-accent);
        font-size: 20px;
    }

    .sc-cashdash-item span {
        display: block;
        margin-top: 6px;
        font-size: 11px;
        font-weight: 900;
        color: #6b7280;
        text-transform: uppercase;
    }

.sc-cashdash-value {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 4px 0 0 0;
    color: #1f2328;
    font-size: 14px;
    font-weight: 900;
}

    .sc-cashdash-value:disabled {
        opacity: 1;
        cursor: default;
    }

.sc-cashdash-item-strong {
    background: rgba(0,229,160,.08);
    border-color: rgba(0,229,160,.20);
}

@media (max-width: 991px) {
    .sc-cashdash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .sc-cashdash-amount {
        width: 100%;
        min-width: 0;
    }
}
/*FIN CUADRATURA DE CAJA*/

/*TOGGLE CON BUTTONS*/
.sc-v13-toggle {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: #eef2f7;
    border: 1px solid #d8dee8;
    gap: 0;
}

.sc-v13-toggle-btn {
    border: 0 !important;
    min-width: 58px;
    padding: 7px 16px;
    border-radius: 999px !important;
    background: transparent !important;
    color: #475467 !important;
    font-weight: 700;
    font-size: 13px;
    box-shadow: none !important;
    outline: none !important;
}

    .sc-v13-toggle-btn:hover {
        background: #e4e9f2 !important;
    }

    .sc-v13-toggle-btn.is-active {
        background: #16a34a !important;
        color: #ffffff !important;
        box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
    }
/*FIN TOGGLE CON BUTTONS*/


.sc-email-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 4px 0 16px;
    padding: 14px 16px;
    color: #713f12;
    background-color: #fffbeb;
    border: 1px solid #f5d98b;
    border-left: 4px solid #d97706;
    border-radius: var(--sc-radius, 8px);
    box-shadow: 0 2px 8px rgba(120, 53, 15, 0.08);
}

.sc-email-warning-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #b45309;
    background-color: #fef3c7;
    border-radius: 50%;
}

    .sc-email-warning-icon .mdi {
        font-size: 23px;
        line-height: 1;
    }

.sc-email-warning-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .sc-email-warning-content strong {
        color: #78350f;
        font-size: 14px;
        font-weight: 700;
    }

    .sc-email-warning-content span {
        font-size: 13px;
        line-height: 1.45;
    }

    .sc-email-warning-content small {
        margin-top: 3px;
        color: #92400e;
        font-size: 12px;
        line-height: 1.4;
    }

@media (max-width: 575.98px) {
    .sc-email-warning {
        gap: 10px;
        padding: 12px;
    }

    .sc-email-warning-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

        .sc-email-warning-icon .mdi {
            font-size: 20px;
        }
}

/* Odontograma adulto: representación visual sin alterar los eventos Web Forms. */
.sc-odontogram {
    border: 1px solid #d9e6ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fbfe, #fff 38%);
    padding: 16px;
    text-align: left;
}
.sc-odontogram-intro {
    color: #345267;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 12px;
}
.sc-odontogram-faces-note {
    margin: -4px 0 12px;
    color: #617988;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}
.sc-odontogram-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-bottom: 12px;
    color: #496577;
    font-size: 11px;
}
.sc-odontogram-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sc-odontogram-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sc-odontogram-key-planned { background: #147fa3; }
.sc-odontogram-key-started { background: #bd7618; }
.sc-odontogram-key-completed { background: #208264; }
.sc-odontogram-key-mixed { background: #7955a6; }
.sc-odontogram-key-clinical { width: 17px; height: 17px; background: #b53d57; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 17px; text-align: center; }
.sc-odontogram-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 2px 12px;
    scrollbar-color: #9bb6c9 #eaf1f6;
}
.sc-odontogram-scroll:focus-visible {
    outline: 3px solid #36a4ca;
    outline-offset: 2px;
    border-radius: 10px;
}
.sc-odontogram-arch { min-width: 760px; }
.sc-odontogram-arch-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: #22455d;
    font-size: 13px;
    font-weight: 700;
    padding: 0 4px 7px;
}
.sc-odontogram-arch-label span { color: #647e90; font-size: 11px; font-weight: 500; }
.sc-odontogram-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    min-width: 760px;
}
.sc-odontogram-row:not(.sc-odontogram-row-child) > div:nth-child(8),
.sc-odontogram-row-child > div:nth-child(5) { margin-right: 12px; }
.sc-odontogram-row > div {
    float: none !important;
    padding: 0 !important;
    flex: 0 0 43px;
    min-width: 0;
}
.sc-odontogram-row > div > div:first-child {
    position: relative;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
}
/* Las cinco celdas antiguas no tienen manejadores en estas vistas; las caras se eligen en el panel lateral. */
.sc-odontogram-row > div > div:not(:first-child) { display: none !important; }
.sc-odontogram-row a[data-tooth-kind] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 43px;
    height: 72px;
    padding: 0 2px 5px;
    border: 1px solid #d5e4ec;
    border-radius: 11px;
    background: #fff;
    color: #244963;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(31, 66, 88, .08);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sc-odontogram-row a[data-tooth-kind]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 35px;
    height: 48px;
    background: center / contain no-repeat url('../Resources/Dental/tooth-incisor.svg');
    transform: rotate(180deg);
}
.sc-odontogram-row a[data-tooth-kind="canine"]::before { background-image: url('../Resources/Dental/tooth-canine.svg'); }
.sc-odontogram-row a[data-tooth-kind="premolar"]::before { background-image: url('../Resources/Dental/tooth-premolar.svg'); }
.sc-odontogram-row a[data-tooth-kind="molar"]::before { background-image: url('../Resources/Dental/tooth-molar.svg'); }
.sc-odontogram-row-lower a[data-tooth-kind]::before { transform: none; }
.sc-odontogram-row a[data-tooth-kind]:hover,
.sc-odontogram-row a[data-tooth-kind]:focus-visible {
    border-color: #2389ac;
    background: #eff9fc;
    box-shadow: 0 0 0 3px rgba(35, 137, 172, .17);
    outline: none;
}
.sc-odontogram-row a[data-selected="true"] {
    border-color: #1487a9;
    background: #e7f6fa;
    box-shadow: inset 0 0 0 1px #1487a9;
}
.sc-odontogram-row a[data-care-status="planned"] { border-bottom: 4px solid #147fa3; }
.sc-odontogram-row a[data-care-status="started"] { border-bottom: 4px solid #bd7618; }
.sc-odontogram-row a[data-care-status="completed"] { border-bottom: 4px solid #208264; }
.sc-odontogram-row a[data-care-status="mixed"] { border-bottom: 4px solid #7955a6; }
.sc-odontogram-row a[data-benefits]:not([data-benefits="0"]):not([data-extracted="true"])::after {
    content: attr(data-benefits);
    position: absolute;
    top: -7px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 2px;
    border-radius: 8px;
    background: #28576d;
    color: #fff;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    z-index: 3;
}
.sc-odontogram-row .sc-tooth-face-map {
    position: absolute;
    top: 18px;
    left: 0;
    width: 43px;
    height: 38px;
    z-index: 2;
    pointer-events: none;
}
.sc-odontogram-row-lower .sc-tooth-face-map { top: 5px; }
.sc-odontogram-row .sc-tooth-face {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid #fff;
    border-radius: 5px;
    background: #146f8a;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(18, 55, 74, .28);
}
.sc-odontogram-row .sc-tooth-face-x { top: 0; left: 3px; }
.sc-odontogram-row .sc-tooth-face-v { top: 0; left: 15px; }
.sc-odontogram-row .sc-tooth-face-s { top: 0; left: 27px; }
.sc-odontogram-row .sc-tooth-face-m { top: 12px; left: 3px; }
.sc-odontogram-row .sc-tooth-face-o { top: 12px; left: 15px; }
.sc-odontogram-row .sc-tooth-face-d { top: 12px; left: 27px; }
.sc-odontogram-row .sc-tooth-face-p { top: 24px; left: 3px; }
.sc-odontogram-row .sc-tooth-face-l { top: 24px; left: 15px; }
.sc-odontogram-row .sc-tooth-face-i { top: 24px; left: 27px; }
.sc-face-picker-active .sc-odontogram-row > div > div:first-child:hover .sc-tooth-face,
.sc-face-picker-active .sc-odontogram-row > div > div:first-child:focus-within .sc-tooth-face {
    display: flex;
    background: #f5f9fb;
    color: #315468;
    cursor: pointer;
    pointer-events: auto;
}
.sc-odontogram-row a[data-pending-faces*="M"] + .sc-tooth-face-map .sc-tooth-face-m,
.sc-odontogram-row a[data-pending-faces*="D"] + .sc-tooth-face-map .sc-tooth-face-d,
.sc-odontogram-row a[data-pending-faces*="V"] + .sc-tooth-face-map .sc-tooth-face-v,
.sc-odontogram-row a[data-pending-faces*="P"] + .sc-tooth-face-map .sc-tooth-face-p,
.sc-odontogram-row a[data-pending-faces*="L"] + .sc-tooth-face-map .sc-tooth-face-l,
.sc-odontogram-row a[data-pending-faces*="O"] + .sc-tooth-face-map .sc-tooth-face-o,
.sc-odontogram-row a[data-pending-faces*="I"] + .sc-tooth-face-map .sc-tooth-face-i,
.sc-odontogram-row a[data-pending-faces*="X"] + .sc-tooth-face-map .sc-tooth-face-x,
.sc-odontogram-row a[data-pending-faces*="S"] + .sc-tooth-face-map .sc-tooth-face-s {
    display: flex;
    background: #c47a1c;
}
.sc-odontogram-row a[data-faces*="M"] + .sc-tooth-face-map .sc-tooth-face-m,
.sc-odontogram-row a[data-faces*="D"] + .sc-tooth-face-map .sc-tooth-face-d,
.sc-odontogram-row a[data-faces*="V"] + .sc-tooth-face-map .sc-tooth-face-v,
.sc-odontogram-row a[data-faces*="P"] + .sc-tooth-face-map .sc-tooth-face-p,
.sc-odontogram-row a[data-faces*="L"] + .sc-tooth-face-map .sc-tooth-face-l,
.sc-odontogram-row a[data-faces*="O"] + .sc-tooth-face-map .sc-tooth-face-o,
.sc-odontogram-row a[data-faces*="I"] + .sc-tooth-face-map .sc-tooth-face-i,
.sc-odontogram-row a[data-faces*="X"] + .sc-tooth-face-map .sc-tooth-face-x,
.sc-odontogram-row a[data-faces*="S"] + .sc-tooth-face-map .sc-tooth-face-s { display: flex; }
.sc-odontogram-row a[data-clinical-faces*="M"] + .sc-tooth-face-map .sc-tooth-face-m,
.sc-odontogram-row a[data-clinical-faces*="D"] + .sc-tooth-face-map .sc-tooth-face-d,
.sc-odontogram-row a[data-clinical-faces*="V"] + .sc-tooth-face-map .sc-tooth-face-v,
.sc-odontogram-row a[data-clinical-faces*="P"] + .sc-tooth-face-map .sc-tooth-face-p,
.sc-odontogram-row a[data-clinical-faces*="L"] + .sc-tooth-face-map .sc-tooth-face-l,
.sc-odontogram-row a[data-clinical-faces*="O"] + .sc-tooth-face-map .sc-tooth-face-o,
.sc-odontogram-row a[data-clinical-faces*="I"] + .sc-tooth-face-map .sc-tooth-face-i,
.sc-odontogram-row a[data-clinical-faces*="X"] + .sc-tooth-face-map .sc-tooth-face-x,
.sc-odontogram-row a[data-clinical-faces*="S"] + .sc-tooth-face-map .sc-tooth-face-s {
    display: flex;
    box-shadow: 0 0 0 2px #b53d57, 0 2px 4px rgba(18, 55, 74, .22);
}
.sc-odontogram-row a[data-clinical-faces*="M"]:not([data-faces*="M"]) + .sc-tooth-face-map .sc-tooth-face-m,
.sc-odontogram-row a[data-clinical-faces*="D"]:not([data-faces*="D"]) + .sc-tooth-face-map .sc-tooth-face-d,
.sc-odontogram-row a[data-clinical-faces*="V"]:not([data-faces*="V"]) + .sc-tooth-face-map .sc-tooth-face-v,
.sc-odontogram-row a[data-clinical-faces*="P"]:not([data-faces*="P"]) + .sc-tooth-face-map .sc-tooth-face-p,
.sc-odontogram-row a[data-clinical-faces*="L"]:not([data-faces*="L"]) + .sc-tooth-face-map .sc-tooth-face-l,
.sc-odontogram-row a[data-clinical-faces*="O"]:not([data-faces*="O"]) + .sc-tooth-face-map .sc-tooth-face-o,
.sc-odontogram-row a[data-clinical-faces*="I"]:not([data-faces*="I"]) + .sc-tooth-face-map .sc-tooth-face-i,
.sc-odontogram-row a[data-clinical-faces*="X"]:not([data-faces*="X"]) + .sc-tooth-face-map .sc-tooth-face-x,
.sc-odontogram-row a[data-clinical-faces*="S"]:not([data-faces*="S"]) + .sc-tooth-face-map .sc-tooth-face-s { background: #b53d57; }
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="M"] + .sc-tooth-face-map .sc-tooth-face-m,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="D"] + .sc-tooth-face-map .sc-tooth-face-d,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="V"] + .sc-tooth-face-map .sc-tooth-face-v,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="P"] + .sc-tooth-face-map .sc-tooth-face-p,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="L"] + .sc-tooth-face-map .sc-tooth-face-l,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="O"] + .sc-tooth-face-map .sc-tooth-face-o,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="I"] + .sc-tooth-face-map .sc-tooth-face-i,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="X"] + .sc-tooth-face-map .sc-tooth-face-x,
.sc-face-picker-active .sc-odontogram-row a[data-pending-faces*="S"] + .sc-tooth-face-map .sc-tooth-face-s { background: #c47a1c; }
.sc-odontogram-row a[data-extracted="true"]::after {
    content: "×";
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    color: #b4233d;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}
.sc-odontogram-row a[data-clinical-count]:not([data-clinical-count="0"])::before {
    content: "C";
    position: absolute;
    top: -7px;
    left: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #b53d57;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    z-index: 4;
}
.sc-odontogram-row a[data-clinical-absent="true"] {
    background-image: linear-gradient(45deg, transparent 47%, rgba(181, 61, 87, .32) 49%, rgba(181, 61, 87, .32) 51%, transparent 53%),
                      linear-gradient(-45deg, transparent 47%, rgba(181, 61, 87, .32) 49%, rgba(181, 61, 87, .32) 51%, transparent 53%);
}
.sc-dental-findings { margin-bottom: 18px; }
.sc-dental-findings .sc-card-body { padding: 18px; }
.sc-dental-findings-table { overflow-x: auto; }
.sc-dental-finding-history { margin-top: 18px; padding: 15px; }
.sc-dental-finding-history .sc-dental-findings-table { margin-top: 12px; }
.sc-dental-findings .sc-label { display: block; text-align: left; }
.sc-dental-selected-tooth { display: block; padding: 9px 12px; border-radius: 9px; background: #edf6fa; color: #20576e; }
.sc-dental-finding-faces { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 7px 0 16px; }
.sc-dental-finding-faces label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 500; }
.sc-clinical-finding-mode .sc-odontogram a[data-tooth-reference] { box-shadow: 0 0 0 2px #b53d57; cursor: crosshair; }
.sc-clinical-finding-mode .sc-odontogram-row a[data-pending-faces] + .sc-tooth-face-map .sc-tooth-face { background: #b53d57; }
.sc-odontogram-row-child {
    min-width: 760px;
    justify-content: center;
    gap: 6px;
}
.sc-odontogram-arch-temporary { margin-top: 15px; }
.sc-odontogram-arch-temporary .sc-odontogram-arch-label { padding-left: 120px; padding-right: 120px; }
.sc-odontogram-midline {
    min-width: 760px;
    height: 22px;
    margin: 10px 0 6px;
    border-top: 2px dashed #c5d9e4;
}
@media (max-width: 767px) {
    .sc-odontogram { padding: 12px; }
    .sc-odontogram-scroll { margin: 0 -4px; }
    .sc-odontogram-legend { gap: 6px 10px; }
}

/* Las etiquetas de WorkDentalDetail que comparten fila con el control se alinean hacia él. */
.sc-wdd-page .sc-form-row > [class*="col-"] > label.sc-label:not([style]):not([for]) {
    text-align: right;
    padding-top: 8px;
    margin-bottom: 0;
}
.sc-wdd-page .sc-form-row > [class*="col-"] > label.sc-label:not([style]):not([for]) { padding-right: 4px; }
@media (max-width: 767px) {
    .sc-wdd-page .sc-form-row > [class*="col-"] > label.sc-label:not([style]):not([for]) {
        text-align: left;
        padding-top: 0;
        margin-bottom: 6px;
    }
}