:root {
    --navy-950: #050d1c;
    --navy-900: #071426;
    --navy-850: #0b1930;
    --navy-800: #313a44;

    --blue-700: #0e5e59;
    --blue-600: #16756f;
    --blue-500: #218a82;
    --cyan-400: #43a79f;

    --text-main: #0f172a;
    --text-soft: #64748b;
    --text-light: #94a3b8;

    --border: #e2e8f0;
    --surface: #ffffff;
    --background: #f5f8fc;

    --success: #0f9f6e;

    --radius-lg: 22px;
    --radius-md: 15px;
    --radius-sm: 10px;

    --shadow:
        0 18px 48px rgba(15, 23, 42, .08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--background);
    color: var(--text-main);
}


/* LOGIN */

.login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(420px, 1.08fr)
        minmax(420px, .92fr);
}

.login-brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 70px;

    background:
        radial-gradient(
            circle at 72% 20%,
            rgba(35, 200, 244, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 88%,
            rgba(22, 117, 111, .22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #071426 0%,
            #07101f 50%,
            #06152d 100%
        );

    color: #ffffff;
}

.login-brand-content {
    max-width: 650px;
}

.brand-mark-large {
    width: 78px;
    height: 78px;
    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
    font-size: 29px;

    background:
        linear-gradient(
            135deg,
            var(--blue-600),
            var(--cyan-400)
        );

    box-shadow:
        0 22px 50px rgba(22, 117, 111, .30);
}

.login-brand-name {
    margin-top: 30px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.login-brand-name span {
    color: var(--cyan-400);
}

.login-brand h1 {
    font-size: clamp(36px, 3.4vw, 54px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 28px 0 22px;
}

.login-brand p {
    color: #b9c8dc;
    font-size: 15px;
    line-height: 1.75;
    max-width: 520px;
}

.brand-pill {
    display: inline-flex;
    margin-top: 30px;

    padding: 12px 17px;
    border-radius: 999px;

    border:
        1px solid rgba(255, 255, 255, .13);

    color: #d7e7f8;
    background:
        rgba(255, 255, 255, .045);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
}

.login-copyright {
    position: absolute;
    left: 70px;
    bottom: 40px;

    font-size: 12px;
    color: #6f849e;
}

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 55px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #e2f0ed
        );
}

.login-card {
    width: min(100%, 460px);
}

.mobile-brand {
    display: none;
}

.login-heading .eyebrow,
.eyebrow {
    color: var(--blue-600);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1.25px;
}

.login-heading h2 {
    margin:
        10px 0 10px;

    font-size: 38px;
    letter-spacing: -1.5px;
}

.login-heading p {
    color: var(--text-soft);
    line-height: 1.65;
    margin-bottom: 30px;
}

.field {
    margin-bottom: 20px;
}

.field label {
    display: block;

    margin-bottom: 9px;

    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.field input {
    width: 100%;

    height: 52px;

    padding: 0 15px;

    border:
        1px solid #d8e1ec;

    border-radius: 12px;

    background: #ffffff;

    outline: none;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color .2s,
        box-shadow .2s;
}

.field input:focus {
    border-color: var(--blue-500);

    box-shadow:
        0 0 0 4px rgba(33, 138, 130, .11);
}

.btn-primary {
    width: 100%;
    height: 53px;

    border: 0;
    border-radius: 12px;

    margin-top: 7px;

    cursor: pointer;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0e5e59,
            #218a82
        );

    font-family: inherit;
    font-weight: 800;

    box-shadow:
        0 14px 28px rgba(22, 117, 111, .20);
}

.alert-error {
    margin-bottom: 20px;
    padding: 13px 15px;

    border-radius: 10px;

    background: #fff1f2;
    color: #be123c;

    font-size: 13px;
    font-weight: 600;
}

.login-security {
    margin-top: 24px;

    color: var(--text-light);
    text-align: center;
    font-size: 11px;
}


/* APP */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: 255px;

    display: flex;
    flex-direction: column;

    padding: 22px 16px;

    background:
        linear-gradient(
            180deg,
            var(--navy-950),
            #081326
        );

    color: #ffffff;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding:
        5px 7px 24px;
}

.brand-mark {
    width: 43px;
    height: 43px;

    border-radius: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 16px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            var(--blue-600),
            var(--cyan-400)
        );

    box-shadow:
        0 10px 22px rgba(22, 117, 111, .22);
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-copy strong {
    font-size: 14px;
}

.brand-copy span {
    margin-top: 3px;

    color: #7890ac;
    font-size: 10px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;

    padding-right: 2px;
}

.nav-section {
    margin-bottom: 22px;
}

.nav-label {
    display: block;

    padding:
        0 11px 8px;

    color: #526a86;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.1px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 40px;

    margin: 3px 0;

    padding: 0 11px;

    border-radius: 9px;

    color: #aebcd0;

    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.nav-item.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(22, 117, 111, .28),
            rgba(33, 138, 130, .12)
        );

    box-shadow:
        inset 3px 0 0 var(--blue-500);
}

.nav-item.disabled {
    cursor: default;
}

.nav-icon {
    width: 20px;

    color: #6e91b9;
    text-align: center;
    font-weight: 700;
}

.sidebar-footer {
    padding-top: 14px;

    border-top:
        1px solid rgba(255, 255, 255, .07);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;
}

.user-avatar {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(33, 138, 130, .16);

    color: #43a79f;

    font-weight: 800;
}

.sidebar-user div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-user strong {
    max-width: 155px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
}

.sidebar-user span {
    margin-top: 2px;

    color: #7186a0;
    font-size: 9px;
}

.logout-button {
    width: 100%;

    border: 0;

    padding: 9px;

    border-radius: 8px;

    cursor: pointer;

    color: #7890ac;
    background: transparent;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}

.logout-button:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, .05);
}

.main-content {
    width: calc(100% - 255px);

    min-height: 100vh;

    margin-left: 255px;

    background: var(--background);
}

.topbar {
    height: 67px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 32px;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(255, 255, 255, .92);

    backdrop-filter: blur(12px);
}

.environment-badge {
    display: inline-flex;

    padding:
        6px 9px;

    border-radius: 7px;

    color: #7c3aed;
    background: #f3e8ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .7px;
}

.topbar-company {
    color: #475569;

    font-size: 11px;
    font-weight: 700;
}

.content-wrapper {
    max-width: 1560px;

    padding:
        34px 34px 60px;

    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 24px;
}

.page-header h1 {
    margin:
        7px 0 5px;

    font-size: 30px;
    letter-spacing: -1px;
}

.page-header p {
    margin: 0;

    color: var(--text-soft);
    font-size: 12px;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--text-soft);

    font-size: 11px;
    font-weight: 600;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #10b981;

    box-shadow:
        0 0 0 5px rgba(16, 185, 129, .09);
}

.welcome-card {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 35px;

    overflow: hidden;

    border-radius: var(--radius-lg);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(35, 200, 244, .22),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #191e24,
            #214441 70%,
            #0e5e59
        );

    box-shadow:
        0 20px 45px rgba(9, 30, 66, .15);
}

.card-kicker {
    color: #64d9ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.welcome-card h2 {
    margin:
        10px 0 8px;

    font-size: 27px;
    letter-spacing: -1px;
}

.welcome-card p {
    max-width: 650px;

    margin: 0;

    color: #b9cbe3;

    font-size: 12px;
    line-height: 1.6;
}


.metrics-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 18px;
}

.metric-card {
    min-height: 150px;

    position: relative;

    padding: 20px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--surface);

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .035);
}

.metric-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    border-radius: 9px;

    color: var(--blue-600);
    background: #e2f0ed;

    font-weight: 800;
}

.metric-card > span {
    display: block;

    color: #64748b;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .75px;
}

.metric-card strong {
    display: block;

    margin:
        7px 0 5px;

    color: #0b1730;

    font-size: 24px;
    letter-spacing: -.8px;
}

.metric-card small {
    color: #94a3b8;

    font-size: 9px;
}

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, .75fr);

    gap: 18px;

    margin-top: 18px;
}

.panel {
    min-height: 300px;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--surface);

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .03);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-header h3 {
    margin:
        6px 0 0;

    font-size: 15px;
}

.panel-badge {
    padding:
        6px 9px;

    border-radius: 7px;

    color: #047857;
    background: #ecfdf5;

    font-size: 8px;
    font-weight: 800;
}

.empty-state {
    min-height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;
}

.empty-state-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border-radius: 12px;

    color: var(--blue-600);
    background: #e2f0ed;
}

.empty-state strong {
    font-size: 12px;
}

.empty-state p {
    max-width: 390px;

    margin:
        7px 0 0;

    color: var(--text-light);

    font-size: 10px;
    line-height: 1.6;
}

.status-list {
    margin-top: 18px;
}

.status-list > div {
    display: flex;
    justify-content: space-between;

    padding:
        15px 0;

    border-bottom:
        1px solid #edf1f6;

    font-size: 10px;
}

.status-list span {
    color: var(--text-soft);
}

.status-list strong {
    color: #334155;
}

.status-list .success {
    color: var(--success);
}


@media (max-width: 1100px) {

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

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 820px) {

    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-brand {
        display: none;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;

        margin-bottom: 40px;
    }

    .mobile-brand > div:last-child {
        display: flex;
        flex-direction: column;
    }

    .mobile-brand span {
        color: var(--blue-600);
        font-size: 11px;
        font-weight: 800;
    }

    .sidebar {
        display: none;
    }

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

    .content-wrapper {
        padding:
            25px 18px 45px;
    }

    .topbar {
        padding:
            0 18px;
    }

}


@media (max-width: 560px) {

    .login-panel {
        padding: 30px 22px;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .welcome-card {
        padding: 25px;
    }

    

}

/* === UNIRIA OFFICIAL BRAND START === */

.uniria-mark-login {
    display: block;
    width: 145px;
    height: auto;
    object-fit: contain;
    margin: 0 0 16px 0;
}

.uniria-mark-sidebar {
    display: block;
    width: 52px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.uniria-mark-mobile {
    display: block;
    width: 68px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .uniria-mark-mobile {
        width: 62px;
    }
}

/* === UNIRIA OFFICIAL BRAND END === */


/* =========================================================
   AC UNIRIA ERP - CONFIGURACION / ADMINISTRACION
   ========================================================= */

.messages-wrapper {
    padding:
        18px 34px 0;
}

.app-message {
    max-width: 1560px;

    margin:
        0 auto;

    padding:
        12px 15px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 600;
}

.app-message.success {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.app-message.error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


.settings-card {
    padding: 25px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--surface);

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .035);
}


.erp-form input[type="text"],
.erp-form input[type="email"],
.erp-form input[type="url"],
.erp-form input[type="password"],
.erp-form input[type="tel"],
.erp-form input[type="search"],
.erp-form input[type="number"],
.erp-form input[type="date"],
.erp-form input[type="time"],
.erp-form input[type="datetime-local"],
.erp-form select,
.erp-form textarea {

    width: 100%;

    min-height: 44px;

    padding:
        10px 12px;

    border:
        1px solid #d8e1ec;

    border-radius:
        10px;

    outline: none;

    background:
        #ffffff;

    color:
        #0f172a;

    font-family:
        inherit;

    font-size:
        12px;
}


.erp-form textarea {
    resize: vertical;
}


.erp-form input:focus,
.erp-form select:focus,
.erp-form textarea:focus {

    border-color:
        var(--blue-500);

    box-shadow:
        0 0 0 3px rgba(33, 138, 130, .10);
}


.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px;
}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.form-group label {

    color:
        #334155;

    font-size:
        11px;

    font-weight:
        700;
}


.form-span-2 {
    grid-column:
        span 2;
}


.field-help {

    color:
        #94a3b8;

    font-size:
        9px;

    line-height:
        1.5;
}


.field-error {

    color:
        #be123c;

    font-size:
        10px;

    font-weight:
        600;
}


.form-actions {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        25px;

    padding-top:
        20px;

    border-top:
        1px solid #edf1f6;
}


.btn-primary-inline,
.btn-secondary-inline {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0 16px;

    border-radius:
        9px;

    text-decoration:
        none;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.btn-primary-inline {

    border:
        0;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0e5e59,
            #218a82
        );
}


.btn-secondary-inline {

    color:
        #475569;

    border:
        1px solid #d8e1ec;

    background:
        #ffffff;
}


.table-responsive {
    width: 100%;
    overflow-x: auto;
}


.erp-table {

    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        11px;
}


.erp-table th {

    padding:
        12px 14px;

    color:
        #64748b;

    text-align:
        left;

    font-size:
        9px;

    letter-spacing:
        .6px;

    text-transform:
        uppercase;

    border-bottom:
        1px solid #e7edf5;
}


.erp-table td {

    padding:
        15px 14px;

    color:
        #334155;

    border-bottom:
        1px solid #edf1f6;
}


.erp-table tbody tr:hover {
    background:
        #f7faf8;
}


.table-actions {
    text-align:
        right;
}


.table-actions a {

    color:
        var(--blue-600);

    font-weight:
        700;

    text-decoration:
        none;
}


.status-chip {

    display:
        inline-flex;

    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        800;
}


.status-chip.success {

    color:
        #047857;

    background:
        #ecfdf5;
}


.status-chip.inactive {

    color:
        #64748b;

    background:
        #f1f5f9;
}


.role-field {
    margin-bottom:
        20px;
}


.role-field ul {

    list-style:
        none;

    margin:
        5px 0 0;

    padding:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px;
}


.role-field ul li label {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 11px;

    border:
        1px solid #e2e8f0;

    border-radius:
        8px;

    background:
        #f8fafc;

    font-weight:
        500;
}


.role-field input[type="checkbox"] {
    accent-color:
        #16756f;
}


@media (max-width: 760px) {

    .form-grid {
        grid-template-columns:
            1fr;
    }

    .form-span-2 {
        grid-column:
            span 1;
    }

    .role-field ul {
        grid-template-columns:
            1fr;
    }

}

/* === UNIRIA DESIGN SYSTEM V1 START === */

.content-wide {
    max-width: 1560px;
}

.content-list {
    max-width: 1480px;
}

.content-form {
    max-width: 1240px;
}


/* Sidebar */

.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #414b54 transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #414b54;
    border-radius: 999px;
}

.nav-group {
    margin-bottom: 16px;
}

.nav-group summary {
    position: relative;

    display: flex;
    align-items: center;

    padding: 0 11px 8px;

    color: #526a86;

    cursor: pointer;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.1px;

    list-style: none;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary::after {
    content: "›";

    position: absolute;
    right: 10px;

    font-size: 14px;

    transform: rotate(90deg);

    transition: transform .2s ease;
}

.nav-group:not([open]) summary::after {
    transform: rotate(0deg);
}

.nav-group-content {
    overflow: hidden;
}


/* Topbar */

.topbar-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-org-mark {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #0e5e59;

    background: #e2f0ed;

    font-size: 10px;
    font-weight: 800;
}

.topbar-identity > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.topbar-identity strong {
    color: #334155;
    font-size: 10px;
}

.topbar-identity span {
    color: #94a3b8;
    font-size: 9px;
}


/* Headers */

.premium-page-header {
    align-items: center;
}

.premium-page-header h1 {
    font-size: 31px;
    letter-spacing: -1.1px;
}


/* Company */

.company-summary {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 22px 24px;

    margin-bottom: 18px;

    border: 1px solid #dce7f3;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1f7f5
        );
}

.company-summary-mark {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0e5e59,
            #43a79f
        );

    font-size: 16px;
    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(22, 117, 111, .18);
}

.company-summary-label {
    color: #16756f;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.company-summary h2 {
    margin: 5px 0 3px;

    color: #0f172a;

    font-size: 19px;
    letter-spacing: -.5px;
}

.company-summary p {
    margin: 0;

    color: #64748b;

    font-size: 10px;
}


.settings-layout {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.form-section {
    padding: 22px;

    border: 1px solid #e0e7f0;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .025);
}


.form-section-wide {
    grid-column: 1 / -1;
}


.form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 22px;
}


.section-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    color: #16756f;
    background: #e2f0ed;

    font-size: 9px;
    font-weight: 800;
}


.form-section-heading h3 {
    margin: 0 0 4px;

    font-size: 14px;
}


.form-section-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 10px;
    line-height: 1.5;
}


.form-grid-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.company-form .erp-form,
.erp-form {
    width: 100%;
}


.sticky-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 15;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;

    padding: 12px 15px;

    border: 1px solid rgba(214, 224, 237, .92);

    border-radius: 13px;

    background: rgba(255,255,255,.94);

    backdrop-filter: blur(16px);

    box-shadow:
        0 14px 35px rgba(15, 23, 42, .10);
}


.sticky-save-bar span {
    color: #64748b;

    font-size: 10px;
}


/* Lists */

.mini-stats {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 180px));

    gap: 12px;

    margin-bottom: 16px;
}


.mini-stats article {
    padding: 15px 16px;

    border: 1px solid #e0e7f0;

    border-radius: 13px;

    background: #ffffff;
}


.mini-stats span {
    display: block;

    color: #94a3b8;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;
}


.mini-stats strong {
    display: block;

    margin-top: 5px;

    color: #0f172a;

    font-size: 21px;
}


.list-card {
    overflow: hidden;

    border: 1px solid #e0e7f0;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .025);
}


.list-toolbar {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        200px
        170px
        auto;

    gap: 10px;

    padding: 15px;

    border-bottom: 1px solid #edf1f6;

    background: #fbfdff;
}


.list-toolbar input,
.list-toolbar select {
    width: 100%;
    min-height: 40px;

    padding: 0 12px;

    border: 1px solid #d8e1ec;

    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: #334155;

    font-family: inherit;

    font-size: 10px;
}


.btn-filter {
    min-height: 40px;

    padding: 0 15px;

    border: 1px solid #d8e1ec;

    border-radius: 9px;

    cursor: pointer;

    color: #334155;
    background: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}


.table-user,
.role-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}


.table-avatar {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    color: #0e5e59;
    background: #e2f0ed;

    font-size: 10px;
    font-weight: 800;
}


.action-menu {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #64748b !important;

    font-size: 20px !important;
    line-height: 1;
}


.action-menu:hover {
    color: #0e5e59 !important;
    background: #e2f0ed;
}


.table-empty {
    padding: 20px;

    color: #94a3b8;

    text-align: center;

    font-size: 10px;
}


/* Roles */

.role-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #0e5e59;
    background: #e2f0ed;
}


.role-name-cell > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.role-name-cell span {
    color: #94a3b8;

    font-size: 9px;
}


.erp-table code {
    padding: 4px 7px;

    border-radius: 6px;

    color: #475569;
    background: #f1f5f9;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 9px;
}


.premium-empty-state {
    min-height: 370px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 50px;

    border: 1px solid #e0e7f0;

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(33, 138, 130, .06),
            transparent 42%
        ),
        #ffffff;

    text-align: center;
}


.premium-empty-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    border-radius: 17px;

    color: #0e5e59;
    background: #e2f0ed;

    font-size: 20px;
}


.premium-empty-state h2 {
    margin: 8px 0;

    font-size: 19px;
}


.premium-empty-state p {
    max-width: 500px;

    margin: 0 0 20px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.7;
}


/* Permission editor */

.permission-groups {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.permission-group {
    overflow: hidden;

    border: 1px solid #e2e8f0;

    border-radius: 13px;
}


.permission-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 14px;

    background: #f8fafc;

    border-bottom: 1px solid #e7edf5;
}


.permission-group-title strong {
    font-size: 11px;
}


.permission-group-title span {
    color: #94a3b8;

    font-size: 9px;
}


.permission-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    padding: 8px;
}


.permission-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 11px;

    border-radius: 9px;

    cursor: pointer;
}


.permission-item:hover {
    background: #f7faf8;
}


.permission-item input {
    margin-top: 2px;

    accent-color: #16756f;
}


.permission-item span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.permission-item strong {
    color: #334155;

    font-size: 10px;
}


.permission-item small {
    color: #94a3b8;

    font-size: 8px;
}


.toggle-field {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    background: #f8fafc;
}


.toggle-field > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.toggle-field strong {
    font-size: 10px;
}


.toggle-field span {
    color: #94a3b8;

    font-size: 9px;
}


@media (max-width: 1100px) {

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .form-section-wide {
        grid-column: auto;
    }

    .form-grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .list-toolbar {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 700px) {

    .form-grid-3,
    .permission-grid,
    .mini-stats {
        grid-template-columns: 1fr;
    }

    .list-toolbar {
        grid-template-columns: 1fr;
    }

    .sticky-save-bar span {
        display: none;
    }

}

/* === UNIRIA DESIGN SYSTEM V1 END === */

/* === UNIRIA ICON SYSTEM START === */

.uniria-icon {
    display: block;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    vector-effect:
        non-scaling-stroke;
}


/* Escala oficial */

.uniria-icon-xs {
    width: 13px;
    height: 13px;
}

.uniria-icon-sm {
    width: 16px;
    height: 16px;
}

.uniria-icon-md {
    width: 19px;
    height: 19px;
}

.uniria-icon-lg {
    width: 24px;
    height: 24px;
}

.uniria-icon-xl {
    width: 32px;
    height: 32px;
}


/* Sidebar */

.nav-icon {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #6e91b9;
}


.nav-item.active .nav-icon {
    color: #43a79f;
}


.nav-item:hover .nav-icon {
    color: #43a79f;
}


/* Cards Dashboard */

.metric-icon .uniria-icon {
    width: 17px;
    height: 17px;
}


.empty-state-icon .uniria-icon {
    width: 18px;
    height: 18px;
}


/* Roles */

.role-icon .uniria-icon {
    width: 17px;
    height: 17px;
}


.premium-empty-icon .uniria-icon {
    width: 25px;
    height: 25px;
}


/* Menú contextual */

.action-menu .uniria-icon {
    width: 17px;
    height: 17px;
}


/* Consistencia de interacción */

.nav-item,
.action-menu,
.metric-icon,
.role-icon,
.premium-empty-icon {

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


/* === UNIRIA ICON SYSTEM END === */


/* =========================================================
   AC UNIRIA ERP - FASE 4B
   MULTIEMPRESA / LOGOS / SUCURSALES / MODULOS
   ========================================================= */


.company-logo-display {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 7px;

    border: 1px solid #dce7f3;

    border-radius: 16px;

    background: #ffffff;
}


.company-logo-display img,
.brand-upload-preview img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.brand-upload-field {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 22px;

    padding: 15px;

    border: 1px solid #e2e8f0;

    border-radius: 13px;

    background: #f8fafc;
}


.brand-upload-preview {
    width: 76px;
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 8px;

    border: 1px solid #dce7f3;

    border-radius: 16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0e5e59,
            #43a79f
        );

    font-size: 17px;
    font-weight: 800;
}


.brand-upload-control {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 7px;
}


.brand-upload-control label {
    color: #334155;

    font-size: 11px;
    font-weight: 700;
}


.brand-upload-control small {
    color: #94a3b8;

    font-size: 9px;
}


.brand-upload-control input[type="file"] {
    width: 100%;

    color: #64748b;

    font-family: inherit;
    font-size: 10px;
}


.brand-upload-control input[type="file"]::file-selector-button {
    margin-right: 10px;

    padding: 8px 11px;

    border: 1px solid #d8e1ec;
    border-radius: 8px;

    cursor: pointer;

    color: #334155;
    background: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}


/* Topbar multiempresa */

.topbar-company-area {
    display: flex;
    align-items: center;
}


.topbar-company-logo {
    width: 35px;
    height: 35px;

    padding: 4px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    object-fit: contain;

    background: #ffffff;
}


.organization-switcher {
    display: flex;
    align-items: center;
    gap: 9px;
}


.organization-switcher select {
    min-width: 220px;

    height: 38px;

    padding: 0 34px 0 11px;

    border: 1px solid #dce5f0;

    border-radius: 10px;

    outline: none;

    color: #334155;
    background: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}


.organization-switcher select:focus {
    border-color: #218a82;

    box-shadow:
        0 0 0 3px rgba(33, 138, 130, .10);
}


/* Sucursales */

.table-secondary {
    color: #94a3b8;

    font-size: 9px;
}


.status-chip.primary {
    color: #0e5e59;

    background: #e2f0ed;
}


/* Modulos */

.module-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;

    padding: 18px 20px;

    border: 1px solid #dce7f3;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6f9ff
        );
}


.module-summary > div {
    display: flex;
    flex-direction: column;
}


.module-summary span {
    color: #64748b;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .9px;
}


.module-summary strong {
    margin-top: 3px;

    color: #0f172a;

    font-size: 25px;
}


.module-summary strong small {
    color: #94a3b8;

    font-size: 12px;
}


.module-summary p {
    max-width: 520px;

    margin: 0;

    color: #64748b;

    font-size: 10px;
    line-height: 1.6;
}


.modules-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


.module-card {
    min-height: 138px;

    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 18px;

    border: 1px solid #e0e7f0;

    border-radius: 15px;

    cursor: pointer;

    background: #ffffff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.module-card:hover {
    border-color: #cfe5e1;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, .055);

    transform:
        translateY(-1px);
}


.module-card-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    color: #0e5e59;

    background: #e2f0ed;
}


.module-card-copy {
    flex: 1;

    padding-right: 40px;
}


.module-card-copy strong {
    color: #0f172a;

    font-size: 11px;
}


.module-card-copy p {
    margin: 6px 0 0;

    color: #94a3b8;

    font-size: 9px;
    line-height: 1.55;
}


/* Switch */

.module-switch {
    position: absolute;

    top: 18px;
    right: 16px;
}


.module-switch input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


.module-switch span {
    width: 36px;
    height: 20px;

    position: relative;

    display: block;

    border-radius: 999px;

    background: #cbd5e1;

    transition:
        background .18s ease;
}


.module-switch span::after {
    content: "";

    width: 14px;
    height: 14px;

    position: absolute;

    top: 3px;
    left: 3px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 4px rgba(15, 23, 42, .18);

    transition:
        transform .18s ease;
}


.module-switch input:checked + span {
    background: #16756f;
}


.module-switch input:checked + span::after {
    transform:
        translateX(16px);
}


@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

    .modules-grid {
        grid-template-columns:
            1fr;
    }

    .module-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .organization-switcher select {
        min-width: 150px;
    }

    .brand-upload-field {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   AC UNIRIA ERP - TOAST NOTIFICATIONS V1
   ========================================================= */

.uniria-toast-container {
    position: fixed;

    top: 84px;
    right: 24px;

    z-index: 9999;

    width: min(
        390px,
        calc(100vw - 48px)
    );

    display: flex;
    flex-direction: column;
    gap: 10px;

    pointer-events: none;
}


.uniria-toast {
    position: relative;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        28px;

    gap: 10px;

    align-items: start;

    overflow: hidden;

    padding:
        13px
        12px
        14px;

    border:
        1px solid #dbe5f0;

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    box-shadow:
        0 16px 45px
        rgba(
            15,
            23,
            42,
            .14
        );

    backdrop-filter:
        blur(14px);

    pointer-events: auto;

    animation:
        uniriaToastEnter
        .28s
        ease-out
        both;
}


.uniria-toast.is-leaving {
    animation:
        uniriaToastLeave
        .28s
        ease-in
        both;
}


.uniria-toast-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:
        9px;

    font-size:
        13px;

    font-weight:
        800;
}


.uniria-toast.success
.uniria-toast-icon {
    color:
        #047857;

    background:
        #ecfdf5;
}


.uniria-toast.error
.uniria-toast-icon {
    color:
        #be123c;

    background:
        #fff1f2;
}


.uniria-toast.warning
.uniria-toast-icon {
    color:
        #b45309;

    background:
        #fffbeb;
}


.uniria-toast.info
.uniria-toast-icon {
    color:
        #0e5e59;

    background:
        #e2f0ed;
}


.uniria-toast-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding-top: 1px;
}


.uniria-toast-content strong {
    color:
        #0f172a;

    font-size:
        10px;

    font-weight:
        800;
}


.uniria-toast-content span {
    color:
        #64748b;

    font-size:
        10px;

    line-height:
        1.45;
}


.uniria-toast-close {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius:
        7px;

    cursor: pointer;

    color:
        #94a3b8;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        18px;

    line-height:
        1;
}


.uniria-toast-close:hover {
    color:
        #334155;

    background:
        #f1f5f9;
}


.uniria-toast-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    transform-origin:
        left center;

    animation:
        uniriaToastProgress
        6000ms
        linear
        forwards;
}


.uniria-toast.success
.uniria-toast-progress {
    background:
        #10b981;
}


.uniria-toast.error
.uniria-toast-progress {
    background:
        #e11d48;
}


.uniria-toast.warning
.uniria-toast-progress {
    background:
        #f59e0b;
}


.uniria-toast.info
.uniria-toast-progress {
    background:
        #218a82;
}


@keyframes uniriaToastEnter {

    from {
        opacity: 0;

        transform:
            translateX(18px)
            translateY(-4px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0);
    }

}


@keyframes uniriaToastLeave {

    from {
        opacity: 1;

        transform:
            translateX(0);
    }

    to {
        opacity: 0;

        transform:
            translateX(24px);
    }

}


@keyframes uniriaToastProgress {

    from {
        transform:
            scaleX(1);
    }

    to {
        transform:
            scaleX(0);
    }

}


@media (max-width: 700px) {

    .uniria-toast-container {
        top: 72px;
        right: 12px;
        left: 12px;

        width: auto;
    }

}


/* Ya no usamos el antiguo banner de mensajes */

.messages-wrapper {
    display: none;
}


/* =========================================================
   FIN TOAST NOTIFICATIONS
   ========================================================= */

/* === UNIRIA MODULAR DASHBOARD START === */

.metrics-grid.metrics-grid-1 {
    grid-template-columns:
        minmax(280px, 420px);
}


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


.metrics-grid.metrics-grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


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


.dashboard-no-metrics {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 18px;

    padding: 17px 18px;

    border: 1px solid #e0e7f0;

    border-radius: 14px;

    background: #ffffff;
}


.dashboard-no-metrics
.empty-state-icon {
    flex-shrink: 0;
}


.dashboard-no-metrics strong {
    display: block;

    margin-bottom: 3px;

    color: #0f172a;

    font-size: 11px;
}


.dashboard-no-metrics p {
    margin: 0;

    color: #94a3b8;

    font-size: 9px;

    line-height: 1.5;
}


@media (max-width: 1100px) {

    .metrics-grid.metrics-grid-3,
    .metrics-grid.metrics-grid-4 {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 700px) {

    .metrics-grid.metrics-grid-1,
    .metrics-grid.metrics-grid-2,
    .metrics-grid.metrics-grid-3,
    .metrics-grid.metrics-grid-4 {

        grid-template-columns:
            1fr;
    }

}

/* === UNIRIA MODULAR DASHBOARD END === */


/* =========================================================
   AC UNIRIA ERP - CRM V1
   ========================================================= */

.crm-filters {
    display: grid;

    grid-template-columns:
        minmax(320px, 1fr)
        190px
        180px
        auto;

    gap: 10px;

    padding: 14px;

    border-bottom:
        1px solid #e5ebf2;
}


.crm-search {
    position: relative;

    display: flex;
    align-items: center;
}


.crm-search .uniria-icon {
    position: absolute;

    left: 13px;

    color: #94a3b8;
}


.crm-search input {
    width: 100%;

    padding-left: 40px;
}


.crm-filters input,
.crm-filters select {
    height: 40px;

    border:
        1px solid #d9e3ef;

    border-radius:
        9px;

    outline: none;

    color: #334155;
    background: #ffffff;

    font-family: inherit;
    font-size: 10px;
}


.crm-filters input {
    padding-right: 12px;
}


.crm-filters select {
    padding: 0 32px 0 11px;
}


.crm-filters input:focus,
.crm-filters select:focus {
    border-color: #218a82;

    box-shadow:
        0 0 0 3px
        rgba(33, 138, 130, .09);
}


.customer-cell {
    display: flex;
    align-items: center;

    gap: 10px;
}


.customer-avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: #0e5e59;

    background: #e2f0ed;
}


.customer-cell > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.customer-cell strong {
    color: #0f172a;

    font-size: 10px;
}


.customer-cell span {
    color: #94a3b8;

    font-size: 9px;
}


.table-primary {
    display: block;

    color: #334155;

    font-size: 10px;
}


.table-secondary {
    display: block;

    margin-top: 2px;
}


.crm-form-layout {
    display: grid;

    gap: 16px;
}


.form-error-summary {
    margin-bottom: 16px;

    padding: 12px 14px;

    border:
        1px solid #fecdd3;

    border-radius: 10px;

    color: #be123c;
    background: #fff1f2;

    font-size: 10px;
}


.errorlist {
    margin: 5px 0 0;
    padding: 0;

    list-style: none;

    color: #be123c;

    font-size: 9px;
}


.crm-note-warning {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 12px;

    padding: 11px 12px;

    border:
        1px solid #cfe9e4;

    border-radius: 10px;

    color: #4b6584;
    background: #f1f7f5;

    font-size: 9px;
    line-height: 1.55;
}


.crm-note-warning .uniria-icon {
    flex-shrink: 0;

    margin-top: 1px;

    color: #218a82;
}


@media (max-width: 1000px) {

    .crm-filters {
        grid-template-columns:
            1fr
            1fr;
    }

    .crm-search {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 700px) {

    .crm-filters {
        grid-template-columns:
            1fr;
    }

    .crm-search {
        grid-column:
            auto;
    }

}

/* =========================================================
   FIN CRM V1
   ========================================================= */


/* =========================================================
   UNIRIA CRM - IDENTIFICATION VALIDATION
   ========================================================= */

.identification-live-help {
    min-height: 15px;

    margin-top: 2px;

    font-size: 9px;

    line-height: 1.45;
}


.identification-live-help.neutral {
    color: #94a3b8;
}


.identification-live-help.success {
    color: #047857;
}


.identification-live-help.error {
    color: #be123c;
}


.erp-form input:invalid:not(:placeholder-shown) {
    border-color: #fda4af;
}


.erp-form
select.is-auto-country {
    border-color: #b8ded8;

    background-color: #f7faf8;
}


/* =========================================================
   FIN IDENTIFICATION VALIDATION
   ========================================================= */

/* === UNIRIA CRM 5A2B START === */

.identification-live-help.checking {
    color: #16756f;
}


.crm-stats {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    width: min(
        100%,
        760px
    );
}


@media (max-width: 900px) {

    .crm-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        width: 100%;
    }

}


@media (max-width: 560px) {

    .crm-stats {
        grid-template-columns:
            1fr;
    }

}

/* === UNIRIA CRM 5A2B END === */


/* =========================================================
   AC UNIRIA ERP - CUSTOMER 360 V1
   ========================================================= */

.detail-back-link {
    display: inline-block;

    margin-bottom: 7px;

    color: #64748b;

    font-size: 9px;
    font-weight: 600;

    text-decoration: none;
}


.detail-back-link:hover {
    color: #16756f;
}


.detail-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    margin-top: 6px;

    color: #64748b;

    font-size: 10px;
}


.detail-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.customer-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 16px;
}


.customer-summary-card {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 92px;

    padding: 16px;

    border:
        1px solid #dfe7f0;

    border-radius: 14px;

    background: #ffffff;
}


.summary-card-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: #16756f;

    background: #e2f0ed;
}


.customer-summary-card > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.customer-summary-card span {
    color: #7184a1;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}


.customer-summary-card strong {
    color: #0f172a;

    font-size: 18px;
}


.customer-summary-card strong.summary-text-value {
    font-size: 14px;
}


.customer-summary-card small {
    color: #94a3b8;

    font-size: 8px;
}


.customer-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 16px;

    align-items: start;
}


.customer-detail-main,
.customer-detail-aside {
    display: grid;

    gap: 16px;
}


.detail-panel {
    overflow: hidden;

    border:
        1px solid #dfe7f0;

    border-radius: 14px;

    background: #ffffff;
}


.detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 17px 18px;

    border-bottom:
        1px solid #edf1f6;
}


.detail-panel-header h2 {
    margin: 3px 0 0;

    color: #0f172a;

    font-size: 13px;
}


.detail-data-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.detail-field {
    min-height: 74px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 15px 18px;

    border-bottom:
        1px solid #edf1f6;
}


.detail-field:nth-child(odd) {
    border-right:
        1px solid #edf1f6;
}


.detail-field span,
.aside-data-list span {
    color: #8493aa;

    font-size: 8px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .045em;
}


.detail-field strong {
    color: #26364d;

    font-size: 10px;

    overflow-wrap: anywhere;
}


.detail-field strong.detail-success {
    color: #059669;
}


.detail-count-badge {
    min-width: 28px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    color: #16756f;
    background: #e2f0ed;

    font-size: 9px;
    font-weight: 700;
}


.related-list {
    display: grid;
}


.related-row {
    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        minmax(150px, .7fr);

    gap: 12px;

    align-items: center;

    padding: 13px 18px;

    border-bottom:
        1px solid #edf1f6;
}


.related-row:last-child {
    border-bottom: 0;
}


.related-avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #16756f;
    background: #e2f0ed;
}


.related-main,
.related-contact {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.related-main strong {
    color: #0f172a;

    font-size: 10px;
}


.related-main span,
.related-contact span {
    color: #7c8da6;

    font-size: 9px;
}


.related-contact {
    text-align: right;
}


.detail-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px 20px;

    text-align: center;
}


.detail-empty-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 10px;

    color: #16756f;
    background: #e2f0ed;
}


.detail-empty-state strong {
    color: #25364c;

    font-size: 10px;
}


.detail-empty-state p {
    max-width: 420px;

    margin:
        5px 0 0;

    color: #94a3b8;

    font-size: 9px;
    line-height: 1.55;
}


.aside-data-list {
    display: grid;
}


.aside-data-list > div {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    padding: 12px 18px;

    border-bottom:
        1px solid #edf1f6;
}


.aside-data-list > div:last-child {
    border-bottom: 0;
}


.aside-data-list strong {
    max-width: 56%;

    color: #26364d;

    font-size: 9px;

    text-align: right;

    overflow-wrap: anywhere;
}


.customer-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    padding: 16px 18px;
}


.customer-tag {
    display: inline-flex;
    align-items: center;

    padding:
        6px 9px;

    border:
        1px solid #cfe1fb;

    border-radius: 20px;

    color: #16756f;
    background: #f5f9ff;

    font-size: 8px;
    font-weight: 600;
}


.aside-empty-copy {
    margin: 0;

    padding: 17px 18px;

    color: #94a3b8;

    font-size: 9px;
    line-height: 1.5;
}


.customer-notes {
    margin: 0;

    padding: 17px 18px;

    color: #53657d;

    font-size: 9px;
    line-height: 1.65;
}


.customer-name-link {
    color: #0f172a;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}


.customer-name-link:hover {
    color: #16756f;
}


@media (max-width: 1100px) {

    .customer-detail-layout {
        grid-template-columns:
            1fr;
    }


    .customer-detail-aside {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .customer-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 700px) {

    .customer-summary-grid,
    .customer-detail-aside,
    .detail-data-grid {
        grid-template-columns:
            1fr;
    }


    .detail-field:nth-child(odd) {
        border-right: 0;
    }


    .related-row {
        grid-template-columns:
            36px
            minmax(0, 1fr);
    }


    .related-contact {
        grid-column:
            2;

        text-align: left;
    }

}

/* =========================================================
   FIN CUSTOMER 360 V1
   ========================================================= */

/* === UNIRIA NAVIGATION STANDARD START === */

.uniria-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    margin-bottom: 9px;

    color: #94a3b8;

    font-size: 9px;
}


.uniria-breadcrumb a {
    color: #64748b;

    font-weight: 600;

    text-decoration: none;
}


.uniria-breadcrumb a:hover {
    color: #16756f;
}


.uniria-breadcrumb strong {
    color: #334155;

    font-weight: 700;
}


.uniria-breadcrumb span {
    color: #c0cad8;
}


.detail-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;
}


/* ---------------------------------------------------------
   ROW ACTION MENU
   --------------------------------------------------------- */

.row-action-menu {
    position: relative;

    display: inline-block;
}


.row-action-menu > summary {
    list-style: none;

    cursor: pointer;
}


.row-action-menu > summary::-webkit-details-marker {
    display: none;
}


.row-action-dropdown {
    position: absolute;

    top: calc(100% + 6px);
    right: 0;

    z-index: 50;

    width: 210px;

    overflow: hidden;

    border:
        1px solid #dce5ef;

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 12px 32px
        rgba(15, 23, 42, .12);
}


.row-action-dropdown a {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid #edf1f6;
}


.row-action-dropdown a:last-child {
    border-bottom: 0;
}


.row-action-dropdown a:hover {
    background: #f7faf8;
}


.row-action-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    color: #16756f;
    background: #e2f0ed;
}


.row-action-dropdown a > span:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.row-action-dropdown strong {
    color: #1e293b;

    font-size: 9px;
}


.row-action-dropdown small {
    color: #94a3b8;

    font-size: 8px;
}


.customer-name-link {
    border-bottom:
        1px dashed transparent;
}


.customer-name-link:hover {
    border-bottom-color:
        #91cec7;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .detail-header-actions {
        width: 100%;
    }

    .detail-header-actions
    .btn-primary-inline,
    .detail-header-actions
    .btn-secondary-inline {
        justify-content: center;
    }

}

/* === UNIRIA NAVIGATION STANDARD END === */

/* === UNIRIA FLOATING ACTION MENU START === */

.row-action-menu {
    position: relative;
    display: inline-block;
}


.row-action-menu > summary {
    list-style: none;
    cursor: pointer;
}


.row-action-menu > summary::-webkit-details-marker {
    display: none;
}


.row-action-dropdown {
    position: fixed;

    z-index: 10000;

    width: 220px;

    overflow: hidden;

    border:
        1px solid #dce5ef;

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 16px 40px
        rgba(15, 23, 42, .16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-3px);

    transition:
        opacity .12s ease,
        transform .12s ease,
        visibility .12s ease;
}


.row-action-menu[open]
.row-action-dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


.row-action-dropdown a {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid #edf1f6;
}


.row-action-dropdown a:last-child {
    border-bottom: 0;
}


.row-action-dropdown a:hover {
    background: #f5f9ff;
}


.row-action-icon {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    color: #16756f;
    background: #e2f0ed;
}


.row-action-dropdown a > span:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.row-action-dropdown strong {
    color: #1e293b;

    font-size: 9px;
    font-weight: 700;
}


.row-action-dropdown small {
    color: #94a3b8;

    font-size: 8px;
}


/*
El dropdown se posiciona con JavaScript respecto
al botón ⋮. Al ser fixed no modifica el tamaño
ni el scroll del contenedor de la tabla.
*/

.row-action-dropdown[data-positioned="true"] {
    visibility: visible;
}


/* === UNIRIA FLOATING ACTION MENU END === */


/* =========================================================
   AC UNIRIA ERP - CRM 5A.3B
   ========================================================= */

.detail-panel-tools {
    display: flex;
    align-items: center;

    gap: 8px;
}


.btn-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding:
        0 10px;

    border:
        1px solid #cfe0f7;

    border-radius: 8px;

    color: #16756f;
    background: #f6faff;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.btn-panel-action:hover {
    border-color: #a8d8d2;

    background: #e2f0ed;
}


.related-row {
    grid-template-columns:
        36px
        minmax(0, 1fr)
        minmax(150px, .7fr)
        auto;
}


.related-edit-link {
    color: #16756f;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}


.related-edit-link:hover {
    text-decoration: underline;
}


.customer-tag {
    gap: 6px;
}


.tag-remove-form {
    display: inline-flex;

    margin: 0;
}


.tag-remove-form button {
    width: 17px;
    height: 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    color: #64748b;
    background: #e8f1fd;

    cursor: pointer;

    font-family: inherit;
    font-size: 12px;
    line-height: 1;
}


.tag-remove-form button:hover {
    color: #be123c;
    background: #ffe4e6;
}


.form-check-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 14px;
}


.uniria-check-card {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 12px;

    border:
        1px solid #dfe7f0;

    border-radius: 10px;

    background: #fbfdff;

    cursor: pointer;
}


.uniria-check-card input {
    margin-top: 2px;
}


.uniria-check-card > span {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.uniria-check-card strong {
    color: #26364d;

    font-size: 9px;
}


.uniria-check-card small {
    color: #94a3b8;

    font-size: 8px;

    line-height: 1.4;
}


@media (max-width: 800px) {

    .form-check-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .related-row {
        grid-template-columns:
            36px
            minmax(0, 1fr);
    }


    .related-edit-link {
        grid-column: 2;
    }

}

/* =========================================================
   FIN CRM 5A.3B
   ========================================================= */

/* === UNIRIA CRM TIMELINE START === */

.crm-activity-timeline {
    padding:
        6px 18px 8px;
}


.crm-activity-item {
    display: grid;

    grid-template-columns:
        24px
        minmax(0, 1fr);

    gap: 10px;
}


.crm-activity-marker {
    position: relative;

    display: flex;
    justify-content: center;
}


.crm-activity-marker::after {
    content: "";

    position: absolute;

    top: 24px;
    bottom: 0;

    width: 1px;

    background: #e2e8f0;
}


.crm-activity-item:last-child
.crm-activity-marker::after {
    display: none;
}


.crm-activity-marker span {
    position: relative;

    z-index: 1;

    width: 9px;
    height: 9px;

    margin-top: 19px;

    border:
        2px solid #b8ded8;

    border-radius: 50%;

    background: #16756f;
}


.crm-activity-content {
    padding:
        14px 0 16px;

    border-bottom:
        1px solid #edf1f6;
}


.crm-activity-item:last-child
.crm-activity-content {
    border-bottom: 0;
}


.crm-activity-heading {
    display: flex;
    justify-content: space-between;

    gap: 14px;
}


.crm-activity-heading strong {
    color: #1e293b;

    font-size: 10px;
}


.crm-activity-heading time {
    color: #94a3b8;

    font-size: 8px;

    white-space: nowrap;
}


.crm-activity-content p {
    margin:
        5px 0 0;

    color: #64748b;

    font-size: 9px;

    line-height: 1.5;
}


.crm-activity-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 6px;

    color: #94a3b8;

    font-size: 8px;
}


@media (max-width: 620px) {

    .crm-activity-heading {
        flex-direction: column;

        gap: 3px;
    }

}

/* === UNIRIA CRM TIMELINE END === */

/* === UNIRIA CRM TIMELINE PAGINATION START === */

.crm-activity-pagination {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;

    padding:
        12px 18px 15px;

    border-top:
        1px solid #edf1f6;

    background:
        #fbfdff;
}


.crm-activity-pagination-side {
    display: flex;
    justify-content: flex-start;
}


.crm-activity-pagination-side.right {
    justify-content: flex-end;
}


.crm-pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding:
        0 11px;

    border:
        1px solid #d7e2ef;

    border-radius: 8px;

    color: #16756f;
    background: #ffffff;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.crm-pagination-button:hover {
    border-color:
        #a8d8d2;

    background:
        #f2f7ff;
}


.crm-pagination-button.disabled {
    color: #b1bdcc;
    background: #f8fafc;

    cursor: default;

    pointer-events: none;
}


.crm-activity-page-status {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 2px;

    min-width: 110px;
}


.crm-activity-page-status strong {
    color: #334155;

    font-size: 8px;
    font-weight: 700;
}


.crm-activity-page-status span {
    color: #94a3b8;

    font-size: 8px;
}


#activity-history {
    scroll-margin-top: 86px;
}


@media (max-width: 620px) {

    .crm-activity-pagination {
        grid-template-columns:
            1fr
            1fr;

        gap: 9px;
    }


    .crm-activity-page-status {
        grid-column:
            1 / -1;

        grid-row:
            1;

        margin-bottom:
            3px;
    }


    .crm-activity-pagination-side {
        grid-row:
            2;
    }

}

/* === UNIRIA CRM TIMELINE PAGINATION END === */


/* =========================================================
   AC UNIRIA ERP - GLOBAL NOTIFICATIONS V1
   ========================================================= */

.uniria-notification-center {
    position: relative;

    display: flex;
    align-items: center;

    margin-right: 8px;
}


.uniria-notification-bell {
    position: relative;

    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid #dce5ef;

    border-radius: 10px;

    color: #52657d;
    background: #ffffff;

    cursor: pointer;
}


.uniria-notification-bell:hover {
    color: #16756f;
    background: #f6faff;
}


.uniria-notification-bell svg {
    width: 17px;
    height: 17px;
}


.uniria-notification-count {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 17px;
    height: 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 4px;

    border:
        2px solid #ffffff;

    border-radius: 999px;

    color: #ffffff;
    background: #dc2626;

    font-size: 7px;
    font-weight: 800;
}


.uniria-notification-panel {
    position: absolute;

    top: calc(100% + 9px);
    right: 0;

    z-index: 12000;

    width: 340px;
    max-height: 420px;

    overflow: hidden;

    border:
        1px solid #dce5ef;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 18px 50px
        rgba(15, 23, 42, .16);
}


.uniria-notification-panel-head {
    padding:
        13px 15px;

    border-bottom:
        1px solid #edf1f6;
}


.uniria-notification-panel-head > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.uniria-notification-panel-head strong {
    color: #172033;

    font-size: 10px;
}


.uniria-notification-panel-head span {
    color: #94a3b8;

    font-size: 8px;
}


.uniria-notification-list {
    max-height: 350px;

    overflow-y: auto;
}


.uniria-notification-empty {
    padding: 24px 16px;

    color: #94a3b8;

    font-size: 9px;

    text-align: center;
}


.uniria-notification-row {
    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        auto;

    gap: 9px;

    align-items: center;

    padding:
        11px 13px;

    border-bottom:
        1px solid #edf1f6;
}


.uniria-notification-row:last-child {
    border-bottom: 0;
}


.uniria-notification-row-icon {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #16756f;
    background: #e2f0ed;

    font-size: 10px;
    font-weight: 800;
}


.uniria-notification-row-copy {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.uniria-notification-row-copy strong {
    color: #1e293b;

    font-size: 9px;
}


.uniria-notification-row-copy span {
    color: #64748b;

    font-size: 8px;
}


.uniria-notification-row-copy small {
    color: #16756f;

    font-size: 8px;
    font-weight: 700;
}


.uniria-notification-row-link {
    color: #16756f;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}


/* ---------------------------------------------------------
   AVISO FLOTANTE
   --------------------------------------------------------- */

.uniria-global-reminder-container {
    position: fixed;

    top: 76px;
    right: 22px;

    z-index: 13000;

    width: min(
        360px,
        calc(100vw - 32px)
    );
}


.uniria-reminder-card {
    overflow: hidden;

    border:
        1px solid #cfe0f7;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 18px 55px
        rgba(15, 23, 42, .20);

    animation:
        uniriaReminderEnter
        .18s ease-out;
}


@keyframes uniriaReminderEnter {

    from {
        opacity: 0;

        transform:
            translateY(-8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.uniria-reminder-card-head {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;

    gap: 9px;

    align-items: center;

    padding:
        13px 14px 10px;
}


.uniria-reminder-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #16756f,
            #218a82
        );

    font-size: 11px;
    font-weight: 800;
}


.uniria-reminder-heading {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.uniria-reminder-heading > span {
    color: #16756f;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .08em;
}


.uniria-reminder-heading strong {
    color: #172033;

    font-size: 10px;
}


.uniria-reminder-close {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 8px;

    color: #7c8da6;
    background: transparent;

    cursor: pointer;

    font-size: 17px;
}


.uniria-reminder-close:hover {
    color: #334155;
    background: #f1f5f9;
}


.uniria-reminder-body {
    padding:
        0 14px 12px 57px;
}


.uniria-reminder-body p {
    margin: 0;

    color: #64748b;

    font-size: 9px;
    line-height: 1.5;
}


.uniria-reminder-due {
    display: block;

    margin-top: 5px;

    color: #16756f;

    font-size: 9px;
}


.uniria-reminder-actions {
    display: flex;
    justify-content: flex-end;

    gap: 7px;

    padding:
        10px 14px;

    border-top:
        1px solid #edf1f6;

    background: #fbfdff;
}


.uniria-reminder-view,
.uniria-reminder-snooze {
    min-height: 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 10px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 8px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}


.uniria-reminder-view {
    border:
        1px solid #16756f;

    color: #ffffff;
    background: #16756f;
}


.uniria-reminder-snooze {
    border:
        1px solid #d7e2ef;

    color: #52657d;
    background: #ffffff;
}


@media (max-width: 620px) {

    .uniria-notification-panel {
        position: fixed;

        top: 62px;
        right: 12px;
        left: 12px;

        width: auto;
    }


    .uniria-global-reminder-container {
        top: 68px;
        right: 12px;

        width:
            calc(100vw - 24px);
    }

}

/* =========================================================
   FIN GLOBAL NOTIFICATIONS V1
   ========================================================= */

/* === UNIRIA CRM TASKS START === */

#customer-tasks {
    scroll-margin-top: 86px;
}


.crm-task-add {
    min-height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border-radius: 8px;

    color: #ffffff;
    background: #16756f;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}


.crm-task-list {
    display: flex;
    flex-direction: column;
}


.crm-task-row {
    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr)
        auto
        auto;

    gap: 14px;

    align-items: center;

    padding: 14px 18px;

    border-top:
        1px solid #edf1f6;
}


.crm-task-row.is-overdue {
    background: #fffafa;
}


.crm-task-kind {
    color: #16756f;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}


.crm-task-main {
    min-width: 0;
}


.crm-task-main > strong {
    display: block;

    color: #172033;

    font-size: 10px;
}


.crm-task-main > p {
    margin: 4px 0 0;

    color: #64748b;

    font-size: 8px;
}


.crm-task-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 5px;

    color: #94a3b8;

    font-size: 8px;
}


.crm-task-pending,
.crm-task-overdue {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;
}


.crm-task-pending {
    color: #16756f;
    background: #e2f0ed;
}


.crm-task-overdue {
    color: #b42318;
    background: #fff0ef;
}


.crm-task-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    white-space: nowrap;
}


.crm-task-actions a {
    color: #16756f;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}


.crm-task-actions a.complete {
    color: #15803d;
}


.crm-task-actions a.cancel {
    color: #b42318;
}


.crm-task-empty {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 24px 18px;

    border-top:
        1px solid #edf1f6;

    text-align: center;
}


.crm-task-empty strong {
    color: #475569;

    font-size: 9px;
}


.crm-task-empty span {
    color: #94a3b8;

    font-size: 8px;
}


.crm-task-pagination {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    padding: 11px 18px;

    border-top:
        1px solid #edf1f6;

    font-size: 8px;
}


.crm-task-pagination > :last-child {
    text-align: right;
}


.crm-task-pagination a {
    color: #16756f;

    font-weight: 700;

    text-decoration: none;
}


.crm-task-pagination span {
    color: #b1bdcc;
}


.crm-task-pagination strong {
    color: #64748b;

    font-size: 8px;
}


.crm-task-confirm {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 18px;
}


.crm-task-confirm > strong {
    color: #172033;

    font-size: 13px;
}


.crm-task-confirm > span,
.crm-task-confirm > p {
    color: #64748b;

    font-size: 9px;
}


.crm-task-confirm-actions {
    display: flex;

    gap: 8px;

    margin-top: 8px;
}


.btn-danger-inline {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border: 0;

    border-radius: 9px;

    color: #ffffff;
    background: #b42318;

    font-family: inherit;
    font-size: 8px;
    font-weight: 700;

    cursor: pointer;
}


@media (max-width: 900px) {

    .crm-task-row {
        grid-template-columns:
            1fr;

        gap: 7px;
    }


    .crm-task-actions {
        flex-wrap: wrap;
    }

}

/* === UNIRIA CRM TASKS END === */


/* === UNIRIA CRM MANUAL ACTIVITY BUTTON === */

.crm-activity-add {
    min-height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 10px;

    border-radius: 8px;

    color: #ffffff;
    background: #16756f;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
}


.crm-activity-add:hover {
    background: #16756f;
}


/* === END UNIRIA CRM MANUAL ACTIVITY BUTTON === */



/* =========================================================
   AC UNIRIA ERP - QUOTES V1
   ========================================================= */

.quote-empty-state {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 30px;

    color: #94a3b8;

    text-align: center;
}


.quote-empty-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;

    border-radius: 12px;

    color: #16756f;
    background: #e2f0ed;
}


.quote-empty-state strong {
    color: #475569;

    font-size: 11px;
}


.quote-empty-state span {
    font-size: 8px;
}


.quote-status {
    display: inline-flex;

    align-items: center;

    padding:
        4px 7px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;
}


.quote-status-draft {
    color: #52657d;
    background: #eef2f6;
}


.quote-status-issued,
.quote-status-sent {
    color: #16756f;
    background: #e2f0ed;
}


.quote-status-accepted {
    color: #15803d;
    background: #ecfdf3;
}


.quote-status-rejected,
.quote-status-canceled {
    color: #b42318;
    background: #fff0ef;
}


.quote-status-expired {
    color: #a15c00;
    background: #fff7e6;
}


/* =========================================================
   END QUOTES V1
   ========================================================= */


/* =========================================================
   AC UNIRIA ERP - QUOTE EDITOR V1
   ========================================================= */

.quote-lines-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.quote-lines-table {
    overflow-x: auto;

    margin-top: 8px;

    border:
        1px solid #e8edf3;

    border-radius: 12px;
}


.quote-line-header,
.quote-line-row {
    min-width: 1040px;

    display: grid;

    grid-template-columns:
        105px
        90px
        minmax(260px, 1fr)
        86px
        110px
        82px
        82px
        110px
        36px;

    gap: 7px;

    align-items: start;
}


.quote-line-header {
    padding: 10px 12px;

    color: #64748b;
    background: #f8fafc;

    border-bottom:
        1px solid #e8edf3;

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
}


.quote-line-row {
    padding: 10px 12px;

    border-bottom:
        1px solid #edf1f6;
}


.quote-line-row:last-child {
    border-bottom: 0;
}


.quote-line-field input,
.quote-line-field select {
    width: 100%;
}


.quote-line-description {
    min-width: 0;
}


.quote-line-secondary {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 5px;

    margin-top: 5px;
}


.quote-line-secondary span {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #94a3b8;

    font-size: 7px;
}


.quote-line-secondary input {
    min-width: 0;
}


.quote-line-total {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: 4px;

    color: #172033;

    font-size: 9px;
    font-weight: 800;
}


.quote-line-remove-cell {
    display: flex;
    justify-content: center;
}


.quote-line-remove {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 7px;

    color: #b42318;
    background: #fff0ef;

    font-size: 16px;

    cursor: pointer;
}


.quote-editor-totals {
    width: min(
        420px,
        100%
    );

    display: flex;
    flex-direction: column;

    gap: 5px;

    margin:
        16px
        0
        0
        auto;
}


.quote-editor-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        5px
        2px;

    color: #64748b;

    font-size: 8px;
}


.quote-editor-totals strong {
    color: #172033;
}


.quote-editor-grand-total {
    margin-top: 3px;

    padding:
        11px
        12px !important;

    border-radius: 10px;

    background: #f4f8fd;

    color: #172033 !important;
}


.quote-editor-grand-total span {
    font-weight: 800;
}


.quote-editor-grand-total small {
    margin-left: 4px;

    color: #16756f;
}


.quote-editor-grand-total strong {
    font-size: 14px;
}


.quote-document-card {
    overflow: hidden;

    border:
        1px solid #e7edf4;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 16px rgba(15, 35, 58, 0.04);
}


.quote-document-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        18px
        20px;

    border-bottom:
        1px solid #edf1f6;
}


.quote-document-head h2 {
    margin: 3px 0 0;

    color: #172033;
}


.quote-document-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    padding:
        18px
        20px;

    border-bottom:
        1px solid #edf1f6;
}


.quote-document-grid > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.quote-document-grid span,
.quote-detail-notes span {
    color: #94a3b8;

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
}


.quote-document-grid strong {
    color: #172033;

    font-size: 9px;
}


.quote-document-grid small {
    color: #64748b;

    font-size: 8px;
}


.quote-detail-bottom {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 24px;

    padding:
        18px
        20px;
}


.quote-detail-notes {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.quote-detail-notes p {
    margin: 4px 0 0;

    color: #52657d;

    font-size: 8px;
}


.quote-detail-totals {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.quote-detail-totals > div {
    display: flex;
    justify-content: space-between;

    color: #64748b;

    font-size: 8px;
}


.quote-detail-totals strong {
    color: #172033;
}


.quote-detail-totals .grand-total {
    margin-top: 5px;

    padding:
        12px;

    border-radius: 10px;

    background: #f4f8fd;

    color: #172033;

    font-weight: 800;
}


.quote-detail-totals .grand-total strong {
    font-size: 13px;
}


@media (max-width: 900px) {

    .quote-document-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .quote-detail-bottom {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   END QUOTE EDITOR V1
   ========================================================= */

/* === UNIRIA QUOTE BRAND IDENTITY === */

.quote-document-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}


.quote-document-logo {
    width: 82px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.quote-document-logo img {
    display: block;

    max-width: 82px;
    max-height: 52px;

    width: auto;
    height: auto;

    object-fit: contain;
}


.quote-document-logo-fallback {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #16756f;
    background: #e2f0ed;

    font-size: 12px;
    font-weight: 800;
}


.quote-document-brand > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.quote-issuer-name {
    color: #172033;

    font-size: 10px;
    font-weight: 800;
}


.quote-issuer-detail {
    color: #64748b;

    font-size: 7px;
}


.quote-document-identification {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 4px;

    text-align: right;
}


.quote-document-identification h2 {
    margin: 0;

    color: #172033;
}


@media (max-width: 700px) {

    .quote-document-head {
        align-items: flex-start;

        gap: 14px;
    }


    .quote-document-logo {
        width: 58px;
    }


    .quote-document-logo img {
        max-width: 58px;
    }

}

/* === END UNIRIA QUOTE BRAND IDENTITY === */

/* === UNIRIA UX VISIBILITY FIXES === */

/*
 * Los componentes flex de UNIRIA no deben
 * sobreescribir el atributo HTML hidden.
 */
.form-group[hidden] {
    display: none !important;
}


/*
 * Un contador de notificaciones igual a cero
 * debe permanecer completamente oculto.
 */
.uniria-notification-count[hidden] {
    display: none !important;
}

/* === END UNIRIA UX VISIBILITY FIXES === */


/* =========================================================
   AC UNIRIA ERP
   QUOTE DOCUMENT WORKSPACE V2
   ========================================================= */

.quote-premium {
    --quote-border: #dfe7f1;
    --quote-border-soft: #ebf0f5;
    --quote-text: #172033;
    --quote-muted: #64748b;
    --quote-soft: #f7f9fc;
    --quote-blue: #16756f;
    --quote-blue-soft: #e2f0ed;
}


/* ---------------------------------------------------------
   COMMAND BAR
   --------------------------------------------------------- */

.quote-commandbar {
    position: sticky;
    top: 64px;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 16px;
    padding: 14px 0;

    background:
        rgba(246, 249, 253, 0.94);

    backdrop-filter:
        blur(14px);
}


.quote-commandbar-main {
    min-width: 0;
}


.quote-title-line {
    margin-top: 8px;
}


.quote-title-meta {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 5px;
}


.quote-status-pill {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 0 9px;

    border: 1px solid #d8e3f1;
    border-radius: 999px;

    color: #52657d;
    background: #ffffff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}


.quote-document-number {
    color: #8190a5;

    font-size: 9px;
    font-weight: 700;
}


.quote-commandbar h1 {
    margin: 0;

    color: var(--quote-text);

    font-size: 29px;
    line-height: 1.1;

    letter-spacing: -.025em;
}


.quote-commandbar p {
    margin: 6px 0 0;

    color: var(--quote-muted);

    font-size: 11px;
}


.quote-commandbar-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;
}


.quote-save-primary {
    min-width: 132px;
}


/* ---------------------------------------------------------
   CARDS / SECTIONS
   --------------------------------------------------------- */

.quote-card,
.quote-summary-card {
    border:
        1px solid
        var(--quote-border);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 3px 14px
        rgba(15, 35, 58, .035);
}


.quote-commercial-card,
.quote-notes-card {
    padding: 20px;
}


.quote-section-head,
.quote-lines-toolbar,
.quote-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.quote-section-kicker {
    display: block;

    margin-bottom: 4px;

    color: var(--quote-blue);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.quote-section-head h2,
.quote-lines-toolbar h2,
.quote-summary-head h2 {
    margin: 0;

    color: var(--quote-text);

    font-size: 14px;
    font-weight: 800;
}


.quote-lines-toolbar p {
    margin: 4px 0 0;

    color: #8190a5;

    font-size: 9px;
}


.quote-section-note {
    color: #94a3b8;

    font-size: 8px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   FORM CONTROLS
   --------------------------------------------------------- */

.quote-field-grid {
    display: grid;

    gap: 14px 16px;

    margin-top: 18px;
}


.quote-field-grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


.quote-field-wide {
    grid-column: span 1;
}


.quote-field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.quote-field label {
    color: #334155;

    font-size: 9px;
    font-weight: 750;
}


.quote-premium
input:not([type="hidden"]):not([type="checkbox"]),
.quote-premium select,
.quote-premium textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid #d6e0eb;

    border-radius: 9px;

    color: #1e293b;
    background: #ffffff;

    font-family: inherit;
    font-size: 11px;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.quote-premium
input:not([type="hidden"]):not([type="checkbox"]),
.quote-premium select {
    min-height: 40px;

    padding: 0 11px;
}


.quote-premium textarea {
    min-height: 104px;

    padding: 10px 11px;

    line-height: 1.45;

    resize: vertical;
}


.quote-premium
input:not([type="hidden"]):not([type="checkbox"]):focus,
.quote-premium select:focus,
.quote-premium textarea:focus {
    border-color: #43a79f;

    box-shadow:
        0 0 0 3px
        rgba(22, 117, 111, .09);
}


.quote-field-help {
    color: #8795a8;

    font-size: 8px;
    line-height: 1.4;
}


.quote-commercial-divider {
    height: 1px;

    margin: 18px 0 0;

    background: var(--quote-border-soft);
}


.quote-input-prefix,
.quote-input-suffix {
    display: flex;
    align-items: stretch;
}


.quote-input-prefix > span,
.quote-input-suffix > span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;

    padding: 0 10px;

    border:
        1px solid #d6e0eb;

    color: #64748b;
    background: #f8fafc;

    font-size: 9px;
    font-weight: 700;
}


.quote-input-prefix > span {
    border-radius:
        9px 0 0 9px;

    border-right: 0;
}


.quote-input-prefix input {
    border-radius:
        0 9px 9px 0 !important;
}


.quote-input-suffix input {
    border-radius:
        9px 0 0 9px !important;
}


.quote-input-suffix > span {
    border-radius:
        0 9px 9px 0;

    border-left: 0;
}


.quote-exchange-field[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   MAIN DOCUMENT WORKSPACE
   --------------------------------------------------------- */

.quote-workspace {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 16px;

    align-items: start;

    margin-top: 16px;
}


.quote-lines-card {
    min-width: 0;

    padding: 20px;
}


.quote-lines-toolbar {
    align-items: center;

    margin-bottom: 15px;
}


.quote-add-line {
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   LINE GRID
   --------------------------------------------------------- */

.quote-grid-shell {
    overflow-x: auto;

    border:
        1px solid
        var(--quote-border-soft);

    border-radius: 11px;

    background: #ffffff;
}


.quote-line-grid {
    min-width: 1080px;

    display: grid;

    grid-template-columns:
        104px
        92px
        minmax(250px, 1.8fr)
        92px
        112px
        74px
        96px
        112px
        34px;

    gap: 8px;

    align-items: start;
}


.quote-line-grid-head {
    padding: 9px 10px;

    border-bottom:
        1px solid
        var(--quote-border-soft);

    color: #7c8a9e;
    background: #f8fafc;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .035em;
    text-transform: uppercase;
}


.quote-line-row {
    padding: 10px;

    border-bottom:
        1px solid
        #edf1f6;

    transition:
        background .12s ease;
}


.quote-line-row:last-child {
    border-bottom: 0;
}


.quote-line-row:hover {
    background: #fbfcfe;
}


.quote-line-cell {
    min-width: 0;
}


.quote-line-cell
input:not([type="hidden"]),
.quote-line-cell select {
    min-height: 34px;

    padding: 0 8px;

    border-radius: 7px;

    font-size: 9px;
}


.quote-line-main input {
    font-weight: 650;
}


.quote-line-stack {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.quote-mini-field input {
    min-height: 27px !important;

    color: #718096;
    background: #f8fafc;

    font-size: 8px !important;
}


.quote-line-total {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: 3px;

    color: var(--quote-text);

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}


.quote-line-remove-cell {
    display: flex;
    justify-content: flex-end;
}


.quote-line-remove {
    width: 29px;
    height: 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 8px;

    color: #b42318;
    background: #fff1f0;

    font-size: 16px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}


.quote-line-remove:hover {
    background: #ffe3df;

    transform: translateY(-1px);
}


.quote-lines-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 11px 2px 0;

    color: #8a98aa;

    font-size: 8px;
}


.quote-lines-footer strong {
    color: #52657d;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.quote-summary-card {
    position: sticky;
    top: 148px;

    overflow: hidden;
}


.quote-summary-head {
    padding: 17px 18px;

    border-bottom:
        1px solid
        var(--quote-border-soft);
}


.quote-summary-currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    min-height: 25px;

    padding: 0 8px;

    border-radius: 999px;

    color: var(--quote-blue);
    background: var(--quote-blue-soft);

    font-size: 8px;
    font-weight: 800;
}


.quote-summary-body {
    padding: 15px 18px;
}


.quote-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 7px 0;

    color: #65758a;

    font-size: 9px;
}


.quote-summary-row strong {
    color: #344256;

    font-weight: 750;
}


.quote-summary-total {
    margin: 0 12px;

    padding: 15px 14px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #e2f0ed 0%,
            #f4f8fd 100%
        );
}


.quote-summary-total span {
    display: block;

    margin-bottom: 5px;

    color: #5c718d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .06em;
}


.quote-summary-total strong {
    display: block;

    color: #0e2748;

    font-size: 22px;
    line-height: 1.1;

    letter-spacing: -.025em;
}


.quote-summary-total small {
    display: block;

    margin-top: 5px;

    color: var(--quote-blue);

    font-size: 8px;
    font-weight: 800;
}


.quote-summary-context {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    padding: 16px 18px 18px;
}


.quote-summary-context > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.quote-summary-context span {
    color: #94a3b8;

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
}


.quote-summary-context strong {
    color: #52657d;

    font-size: 9px;
}


/* ---------------------------------------------------------
   NOTES
   --------------------------------------------------------- */

.quote-notes-card {
    margin-top: 16px;
}


.quote-notes-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 16px;

    margin-top: 16px;
}


/* ---------------------------------------------------------
   ERRORS
   --------------------------------------------------------- */

.quote-premium .errorlist {
    margin: 3px 0 0;
    padding: 0;

    list-style: none;

    color: #b42318;

    font-size: 8px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1220px) {

    .quote-workspace {
        grid-template-columns: 1fr;
    }


    .quote-summary-card {
        position: static;
    }


    .quote-summary-body {
        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 16px;
    }


    .quote-summary-total {
        margin-top: 0;
    }

}


@media (max-width: 900px) {

    .quote-commandbar {
        position: static;

        align-items: flex-start;

        flex-direction: column;
    }


    .quote-field-grid-3 {
        grid-template-columns:
            1fr
            1fr;
    }


    .quote-commandbar-actions {
        width: 100%;

        justify-content: flex-end;
    }


    .quote-notes-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    .quote-field-grid-3 {
        grid-template-columns: 1fr;
    }


    .quote-commandbar-actions {
        justify-content: stretch;
    }


    .quote-commandbar-actions > * {
        flex: 1;
    }


    .quote-summary-body {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   END QUOTE DOCUMENT WORKSPACE V2
   ========================================================= */


/* =========================================================
   UNIRIA GLOBAL FORM CONTROL EXTENSIONS
   Inputs date + checkbox reutilizables
   ========================================================= */

.erp-form input[type="date"] {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;

    padding:
        10px 12px;

    border:
        1px solid #d8e1ec;

    border-radius:
        10px;

    outline:
        none;

    color:
        #0f172a;

    background:
        #ffffff;

    font-family:
        inherit;

    font-size:
        12px;
}


.erp-form input[type="date"]:focus {
    border-color:
        var(--blue-500);

    box-shadow:
        0 0 0 3px rgba(33, 138, 130, .10);
}


.form-check-row {
    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #334155;

    font-size:
        11px;

    font-weight:
        600;

    cursor:
        pointer;
}


.form-check-row input[type="checkbox"] {
    width:
        16px;

    height:
        16px;

    flex:
        0 0 auto;

    margin:
        0;

    accent-color:
        #16756f;
}

/* =========================================================
   END UNIRIA GLOBAL FORM CONTROL EXTENSIONS
   ========================================================= */

/* UNIRIA GLOBAL NUMERIC FORM CONTROLS */

/*
 * Los campos IntegerField / DecimalField de Django
 * renderizan input[type="number"].
 *
 * Deben utilizar exactamente la misma apariencia
 * que los controles canónicos de .erp-form.
 */
.erp-form input[type="number"] {
width: 100%;
    min-height: 44px;
    box-sizing: border-box;

    padding:
        10px 12px;

    border:
        1px solid #d8e1ec;

    border-radius:
        10px;

    outline:
        none;

    color:
        #0f172a;

    background:
        #ffffff;

    font-family:
        inherit;

    font-size:
        12px;
}

.erp-form input[type="number"]:focus {
border-color:
        var(--blue-500);

    box-shadow:
        0 0 0 3px rgba(33, 138, 130, .10);
}

/* === END UNIRIA GLOBAL NUMERIC FORM CONTROLS === */

/* UNIRIA FORM VALIDATION UX */

/*
 * Un campo HTML5 requerido no debe mostrarse como error
 * apenas se abre un formulario.
 *
 * :invalid representa invalidez técnica inmediata.
 * :user-invalid representa invalidez después de que el
 * usuario interactuó o intentó enviar el formulario.
 *
 * Antes de esa interacción conservamos el aspecto neutro
 * del control global de UNIRIA.
 */
.erp-form input:invalid:not(:user-invalid),
.erp-form select:invalid:not(:user-invalid),
.erp-form textarea:invalid:not(:user-invalid) {
    border-color:
        #d8e1ec;

    box-shadow:
        none;
}


/*
 * Para campos numéricos conservamos exactamente
 * el mismo estado neutro del control global.
 */
.erp-form input[type="number"]:invalid:not(:user-invalid) {
    border-color:
        #d8e1ec;

    box-shadow:
        none;
}


/*
 * Los campos fecha también deben abrir neutros.
 */
.erp-form input[type="date"]:invalid:not(:user-invalid) {
    border-color:
        #d8e1ec;

    box-shadow:
        none;
}

/* === END UNIRIA FORM VALIDATION UX === */


/* ============================================================
   UNIRIA REPORTS - FINANCIAL FILTER LAYOUT

   Extensión del componente global .crm-filters.
   No reemplaza el Design System.

   Rango:
   Desde | Hasta | Cuentas | Aplicar | Restablecer

   Corte:
   Fecha | Cuentas | Aplicar | Restablecer
   ============================================================ */


.report-filters-range {
    grid-template-columns:
        minmax(145px, 165px)
        minmax(145px, 165px)
        minmax(190px, 220px)
        auto
        auto;

    justify-content: start;
    align-items: end;

    column-gap: 12px;
    row-gap: 10px;
}


.report-filters-single {
    grid-template-columns:
        minmax(155px, 175px)
        minmax(190px, 220px)
        auto
        auto;

    justify-content: start;
    align-items: end;

    column-gap: 12px;
    row-gap: 10px;
}


.report-filters-range > div,
.report-filters-single > div {
    min-width: 0;
}


.report-filters-range input,
.report-filters-range select,
.report-filters-single input,
.report-filters-single select {
    width: 100%;
}


/*
Separación entre la línea inferior del filtro
y los indicadores financieros.
*/

.report-financial-stats {
    margin-top: 16px;
}


/* Tablet */

@media (max-width: 900px) {

    .report-filters-range,
    .report-filters-single {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* Mobile */

@media (max-width: 620px) {

    .report-filters-range,
    .report-filters-single {
        grid-template-columns:
            1fr;
    }

}



/* ==========================================================
   HR - RESUMEN DE EXPEDIENTE
   4 KPI alineados en desktop.
   2 x 2 en viewport intermedio.
   1 columna en móvil.
   Los valores no se parten entre líneas.
   ========================================================== */

.hr-employee-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    align-items: stretch;
    gap: 12px;
    width: min(100%, 980px);
}

.hr-employee-summary > article {
    min-width: 0;
    width: auto;
}

.hr-employee-summary > article strong {
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .hr-employee-summary {
        grid-template-columns: repeat(2, minmax(210px, 1fr));
        width: 100%;
    }
}

@media (max-width: 680px) {
    .hr-employee-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}



/* ==========================================================
   UNIRIA - CONTRATO VISUAL DE BOTONES DE ACCION
   C2-C-UI-R1

   Las acciones principales que conviven en una cabecera
   mantienen exactamente las mismas dimensiones.
   Solo cambia la semantica visual del botón.
   ========================================================== */


/* Danger adopta la misma escala tipografica y geometrica
   de primary / secondary. */
.btn-danger-inline {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    border-radius: 8px;

    box-sizing: border-box;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   ACCIONES DE CABECERA

   Desktop:
   todos los botones principales = 180 x 40 px.
   ---------------------------------------------------------- */

.premium-page-header
> .detail-header-actions
> .btn-primary-inline,

.premium-page-header
> .detail-header-actions
> .btn-secondary-inline,

.premium-page-header
> .detail-header-actions
> .btn-danger-inline,

.premium-page-header
> .detail-header-actions
> form
> .btn-primary-inline,

.premium-page-header
> .detail-header-actions
> form
> .btn-secondary-inline,

.premium-page-header
> .detail-header-actions
> form
> .btn-danger-inline,

.detail-panel-header
> .detail-header-actions
> .btn-primary-inline,

.detail-panel-header
> .detail-header-actions
> .btn-secondary-inline,

.detail-panel-header
> .detail-header-actions
> .btn-danger-inline,

.detail-panel-header
> .detail-header-actions
> form
> .btn-primary-inline,

.detail-panel-header
> .detail-header-actions
> form
> .btn-secondary-inline,

.detail-panel-header
> .detail-header-actions
> form
> .btn-danger-inline {

    width: 180px;
    min-width: 180px;
    max-width: 180px;

    height: 40px;
    min-height: 40px;

    padding: 0 16px;

    border-radius: 8px;

    box-sizing: border-box;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    justify-content: center;
    text-align: center;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   RESPONSIVE

   En móvil las acciones ocupan el ancho disponible,
   conservando exactamente la misma altura.
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    .premium-page-header
    > .detail-header-actions,

    .detail-panel-header
    > .detail-header-actions {
        width: 100%;
    }


    .premium-page-header
    > .detail-header-actions
    > .btn-primary-inline,

    .premium-page-header
    > .detail-header-actions
    > .btn-secondary-inline,

    .premium-page-header
    > .detail-header-actions
    > .btn-danger-inline,

    .premium-page-header
    > .detail-header-actions
    > form,

    .detail-panel-header
    > .detail-header-actions
    > .btn-primary-inline,

    .detail-panel-header
    > .detail-header-actions
    > .btn-secondary-inline,

    .detail-panel-header
    > .detail-header-actions
    > .btn-danger-inline,

    .detail-panel-header
    > .detail-header-actions
    > form {
        width: 100%;
        min-width: 0;
        max-width: none;
    }


    .premium-page-header
    > .detail-header-actions
    > form
    > .btn-primary-inline,

    .premium-page-header
    > .detail-header-actions
    > form
    > .btn-secondary-inline,

    .premium-page-header
    > .detail-header-actions
    > form
    > .btn-danger-inline,

    .detail-panel-header
    > .detail-header-actions
    > form
    > .btn-primary-inline,

    .detail-panel-header
    > .detail-header-actions
    > form
    > .btn-secondary-inline,

    .detail-panel-header
    > .detail-header-actions
    > form
    > .btn-danger-inline {
        width: 100%;
        min-width: 0;
        max-width: none;

        height: 40px;
        min-height: 40px;
    }

}



/* ==========================================================
   UNIRIA - CONTRATO VISUAL FILTROS Y TABLAS
   FASE 6.12-C2-UI-R2

   Cabeceras:
       180 x 40  (definido en UI-R1)

   Filtros:
       120 x 40

   Acciones dentro de tablas:
       90 x 36
   ========================================================== */


/* ----------------------------------------------------------
   FILTROS
   Aplicar / Restablecer deben medir exactamente lo mismo.
   ---------------------------------------------------------- */

.crm-filters .btn-primary-inline,
.crm-filters .btn-secondary-inline,
.crm-filters button.btn-primary-inline,
.crm-filters button.btn-secondary-inline,
.crm-filters a.btn-primary-inline,
.crm-filters a.btn-secondary-inline {

    width: 120px;
    min-width: 120px;
    max-width: 120px;

    height: 40px;
    min-height: 40px;

    padding: 0 14px;

    box-sizing: border-box;

    border-radius: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* Si el botón está dentro de un form auxiliar,
   el form no debe alterar su tamaño. */

.crm-filters form {
    width: auto;
    margin: 0;
}


/* ----------------------------------------------------------
   ACCIONES DE TABLA
   Abrir / Editar / Activar / Inactivar.
   ---------------------------------------------------------- */

.erp-table .btn-primary-inline,
.erp-table .btn-secondary-inline,
.erp-table .btn-danger-inline,

.erp-table button.btn-primary-inline,
.erp-table button.btn-secondary-inline,
.erp-table button.btn-danger-inline,

.erp-table a.btn-primary-inline,
.erp-table a.btn-secondary-inline,
.erp-table a.btn-danger-inline {

    width: 90px;
    min-width: 90px;
    max-width: 90px;

    height: 36px;
    min-height: 36px;

    padding: 0 10px;

    box-sizing: border-box;

    border-radius: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* Formularios POST dentro de las acciones de tabla
   no deben añadir ancho ni margen. */

.erp-table td form {
    display: inline-flex;
    width: auto;
    margin: 0;
}


/* ----------------------------------------------------------
   RESPONSIVE
   En móvil los filtros pueden ocupar más ancho,
   manteniendo idéntica altura.
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    .crm-filters .btn-primary-inline,
    .crm-filters .btn-secondary-inline,
    .crm-filters button.btn-primary-inline,
    .crm-filters button.btn-secondary-inline,
    .crm-filters a.btn-primary-inline,
    .crm-filters a.btn-secondary-inline {

        width: 100%;
        min-width: 0;
        max-width: none;

        height: 40px;
        min-height: 40px;
    }

}



/* ==========================================================
   UNIRIA - CONTRATO VISUAL BADGES DE ESTADO
   UI-R3

   Cotizaciones / Ventas.
   Mantiene colores semanticos existentes.
   Unifica geometria y legibilidad.
   ========================================================== */

.quote-status {

    width: 92px;
    min-width: 92px;
    max-width: 92px;

    height: 26px;
    min-height: 26px;

    padding: 0 10px;

    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}


/* === UNIRIA GLOBAL TIME FORM CONTROLS === */

/*
 * Django TimeField -> input[type="time"].
 * Mismo contrato visual que el resto de controles UNIRIA.
 */
.erp-form input[type="time"] {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;

    padding:
        10px 12px;

    border:
        1px solid #d8e1ec;

    border-radius:
        10px;

    outline:
        none;

    color:
        #0f172a;

    background:
        #ffffff;

    font-family:
        inherit;

    font-size:
        12px;
}

.erp-form input[type="time"]:focus {
    border-color:
        var(--blue-500);

    box-shadow:
        0 0 0 3px rgba(33, 138, 130, .10);
}

/* === END UNIRIA GLOBAL TIME FORM CONTROLS === */


/* === UNIRIA UX4 FORM ACTION GEOMETRY R3-R1 === */

/*
 * Plantillas de jornada y perfiles de descanso.
 *
 * Acciones operativas principales:
 * contrato aprobado UNIRIA = 180 x 40.
 *
 * Los presets L-V / L-S / Todos permanecen compactos.
 */
#schedule-template-form
.schedule-pattern-row
.remove-pattern,

#schedule-template-form
#add-schedule-pattern,

#schedule-template-form
> .detail-header-actions
> .btn-secondary-inline,

#schedule-template-form
> .detail-header-actions
> .btn-primary-inline,

#break-profile-form
.break-pattern-row
.remove-pattern,

#break-profile-form
#add-break-pattern,

#break-profile-form
> .detail-header-actions
> .btn-secondary-inline,

#break-profile-form
> .detail-header-actions
> .btn-primary-inline {

    width:
        180px;

    min-width:
        180px;

    height:
        40px;

    min-height:
        40px;

    box-sizing:
        border-box;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 16px;

    border-radius:
        8px;

    font-size:
        11px;

    font-weight:
        700;
}


/*
 * Separación entre la acción destructiva del bloque
 * y la acción para agregar otro registro.
 */
#schedule-template-form
.schedule-pattern-row
.remove-pattern,

#break-profile-form
.break-pattern-row
.remove-pattern {

    margin-top:
        12px;
}


#schedule-template-form
#add-schedule-pattern,

#break-profile-form
#add-break-pattern {

    margin-top:
        14px;

    margin-bottom:
        4px;
}


/*
 * Entrada y Salida poseen label superior.
 * Este checkbox no; lo descendemos para que quede
 * visualmente centrado respecto a los controles.
 */
#schedule-template-form
.schedule-pattern-row
.form-group:has(
    input[name$="-ends_next_day"]
) {

    padding-top:
        24px;
}


/*
 * Acciones finales del formulario.
 */
#schedule-template-form
> .detail-header-actions,

#break-profile-form
> .detail-header-actions {

    gap:
        12px;

    margin-top:
        18px;
}


/*
 * Mobile mantiene contrato responsive:
 * botones ocupan el ancho disponible.
 */
@media (max-width: 620px) {

    #schedule-template-form
    .schedule-pattern-row
    .remove-pattern,

    #schedule-template-form
    #add-schedule-pattern,

    #schedule-template-form
    > .detail-header-actions
    > .btn-secondary-inline,

    #schedule-template-form
    > .detail-header-actions
    > .btn-primary-inline,

    #break-profile-form
    .break-pattern-row
    .remove-pattern,

    #break-profile-form
    #add-break-pattern,

    #break-profile-form
    > .detail-header-actions
    > .btn-secondary-inline,

    #break-profile-form
    > .detail-header-actions
    > .btn-primary-inline {

        width:
            100%;

        min-width:
            0;
    }


    #schedule-template-form
    .schedule-pattern-row
    .form-group:has(
        input[name$="-ends_next_day"]
    ) {

        padding-top:
            0;
    }

}

/* === END UNIRIA UX4 FORM ACTION GEOMETRY R3-R1 === */


/* === UNIRIA UX4 ASSIGNMENT UI R1 === */

/*
 * Filtros de colaboradores:
 *
 * Sucursal necesita más espacio porque sus nombres
 * suelen ser más largos.
 *
 * Filtrar / Limpiar conservan contrato de filtros:
 * 120 × 40.
 */
#work-schedule-filter-form {
    display: grid;

    grid-template-columns:
        minmax(260px, 2fr)
        minmax(170px, 1fr)
        minmax(170px, 1fr)
        120px
        120px;

    gap:
        12px;

    align-items:
        end;
}


#work-schedule-filter-form
.form-group {
    margin-bottom:
        0;
}


#work-schedule-filter-form
.btn-primary-inline,

#work-schedule-filter-form
.btn-secondary-inline {
    width:
        120px;

    min-width:
        120px;

    height:
        40px;

    min-height:
        40px;

    box-sizing:
        border-box;

    justify-content:
        center;
}


/*
 * Acciones de selección masiva.
 * Contrato auxiliar de filtros/listados: 120 × 40.
 */
#select-all-employees,
#clear-all-employees {
    width:
        120px;

    min-width:
        120px;

    height:
        40px;

    min-height:
        40px;

    box-sizing:
        border-box;

    justify-content:
        center;
}


/*
 * Acciones finales del formulario:
 * contrato principal UNIRIA 180 × 40.
 */
#work-schedule-assignment-form
> .detail-header-actions {
    gap:
        12px;

    margin-top:
        18px;
}


#work-schedule-assignment-form
> .detail-header-actions
> .btn-primary-inline,

#work-schedule-assignment-form
> .detail-header-actions
> .btn-secondary-inline {
    width:
        180px;

    min-width:
        180px;

    height:
        40px;

    min-height:
        40px;

    box-sizing:
        border-box;

    justify-content:
        center;

    border-radius:
        8px;

    font-size:
        11px;

    font-weight:
        700;
}


@media (max-width: 1100px) {

    #work-schedule-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    #work-schedule-filter-form
    .btn-primary-inline,

    #work-schedule-filter-form
    .btn-secondary-inline {
        width:
            100%;

        min-width:
            0;
    }

}


@media (max-width: 620px) {

    #work-schedule-filter-form {
        grid-template-columns:
            1fr;
    }


    #select-all-employees,
    #clear-all-employees {
        width:
            100%;

        min-width:
            0;
    }


    #work-schedule-assignment-form
    > .detail-header-actions
    > .btn-primary-inline,

    #work-schedule-assignment-form
    > .detail-header-actions
    > .btn-secondary-inline {
        width:
            100%;

        min-width:
            0;
    }

}

/* === END UNIRIA UX4 ASSIGNMENT UI R1 === */


/* === UNIRIA UX4 BULK SELECTION BUTTONS R2 === */

/*
 * Acciones auxiliares de selección masiva.
 * 150 × 40 evita quiebres de línea sin convertirlas
 * en acciones principales de formulario.
 */
#select-all-employees,
#clear-all-employees {
    width:
        150px;

    min-width:
        150px;

    height:
        40px;

    min-height:
        40px;

    white-space:
        nowrap;
}


/*
 * En móvil se conserva el comportamiento responsive.
 */
@media (max-width: 620px) {

    #select-all-employees,
    #clear-all-employees {
        width:
            100%;

        min-width:
            0;
    }

}

/* === END UNIRIA UX4 BULK SELECTION BUTTONS R2 === */



/* ============================================================
   UNIRIA - OPERATION FORM
   Patrón global para acciones operativas compactas.
   Mantiene inputs con proporciones funcionales y evita
   botones o campos innecesariamente extendidos.
   ============================================================ */

.operation-card-body {
    padding:
        16px
        18px
        18px;
}


.operation-form-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 340px)
        210px
        auto;

    gap: 16px;

    align-items: end;

    max-width: 760px;
}


.operation-form-grid
.form-group {
    min-width: 0;
}


.operation-form-grid
input,
.operation-form-grid
select {
    width: 100%;
}


.operation-form-action {
    align-items: flex-start;
}


.operation-form-action
.btn-primary-inline {
    width: auto;

    min-width: 150px;

    justify-content: center;

    white-space: nowrap;
}


@media (max-width: 900px) {

    .operation-form-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(180px, .65fr);

        max-width: none;
    }


    .operation-form-action {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 620px) {

    .operation-card-body {
        padding:
            14px;
    }


    .operation-form-grid {
        grid-template-columns:
            1fr;
    }


    .operation-form-action {
        grid-column:
            auto;
    }


    .operation-form-action
    .btn-primary-inline {
        width: 100%;
    }

}


/* ============================================================
   UNIRIA - TABLE INLINE ACTION
   Acción secundaria/destructiva dentro de tablas ERP.
   Mantiene input y botón alineados, separados y uniformes.
   ============================================================ */

.table-inline-action {
    display: grid;

    grid-template-columns:
        minmax(180px, 240px)
        92px;

    align-items: center;

    gap: 10px;

    margin: 0;

    width: max-content;

    max-width: 100%;
}


.table-inline-action-input {
    width: 100%;

    height: 38px;

    min-width: 0;

    padding:
        0
        12px;

    border:
        1px solid #d9e3ef;

    border-radius: 8px;

    background: #ffffff;

    color: #334155;

    font-family: inherit;

    font-size: 11px;

    line-height: 1;
}


.table-inline-action-input::placeholder {
    color: #94a3b8;
}


.table-inline-action-input:focus {
    outline: none;

    border-color: #218a82;

    box-shadow:
        0 0 0 3px
        rgba(33, 138, 130, .09);
}


.table-inline-action
.table-inline-action-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 92px;

    min-width: 92px;

    height: 38px;

    margin: 0;

    padding:
        0
        14px;

    white-space: nowrap;
}


@media (max-width: 720px) {

    .table-inline-action {
        grid-template-columns:
            minmax(0, 1fr);

        width: 100%;
    }


    .table-inline-action
    .table-inline-action-button {
        width: 100%;

        min-width: 0;
    }

}


/* ============================================================
   UNIRIA - COMPACT FORM GRID
   Formularios operativos de pocos campos.
   Evita estirar controles innecesariamente en pantallas anchas.
   ============================================================ */

.compact-form-grid {
    display: grid;

    align-items: start;

    gap: 16px;

    width: 100%;
}


.compact-form-grid-attendance {
    grid-template-columns:
        minmax(220px, 280px)
        minmax(280px, 340px)
        minmax(220px, 280px);

    max-width: 940px;
}


.compact-form-grid
.form-group {
    min-width: 0;
}


.compact-form-grid
input,
.compact-form-grid
select {
    width: 100%;
}


@media (max-width: 1050px) {

    .compact-form-grid-attendance {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        max-width: none;
    }

}


@media (max-width: 680px) {

    .compact-form-grid-attendance {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   UNIRIA - TEMPORAL INPUT NORMALIZATION
   Date / time / datetime-local dentro de formularios ERP.
   ============================================================ */

.erp-form input[type="date"],
.erp-form input[type="time"],
.erp-form input[type="datetime-local"] {
    appearance: auto;

    min-height: 44px;

    line-height: 1.2;

    font-family: inherit;

    font-size: 12px;

    color: #0f172a;

    background-color: #ffffff;
}


.erp-form input[type="date"]::-webkit-datetime-edit,
.erp-form input[type="time"]::-webkit-datetime-edit,
.erp-form input[type="datetime-local"]::-webkit-datetime-edit {
    font-family: inherit;

    color: #0f172a;

    padding: 0;
}


.erp-form input[type="date"]::-webkit-calendar-picker-indicator,
.erp-form input[type="time"]::-webkit-calendar-picker-indicator,
.erp-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: .72;

    cursor: pointer;
}


/* ============================================================
   UNIRIA - INCIDENT FORM
   Composición compacta para incidencias de asistencia.
   ============================================================ */

.compact-form-grid-incident {
    grid-template-columns:
        minmax(240px, 300px)
        120px
        minmax(220px, auto);

    max-width: 720px;

    align-items: end;
}


.incident-full-day-field {
    min-width: 0;
}


.incident-full-day-field
.form-check-row {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 44px;

    margin: 0;

    white-space: nowrap;
}


.incident-full-day-field
.form-check-row input[type="checkbox"] {
    width: 16px;

    height: 16px;

    margin: 0;

    flex: 0 0 auto;
}


.form-header-actions-equal
.btn-primary-inline,
.form-header-actions-equal
.btn-secondary-inline {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 160px;

    min-width: 160px;

    height: 40px;

    padding:
        0
        18px;
}


@media (max-width: 780px) {

    .compact-form-grid-incident {
        grid-template-columns:
            1fr
            140px;

        max-width: none;
    }


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

}


@media (max-width: 620px) {

    .compact-form-grid-incident {
        grid-template-columns:
            1fr;
    }


    .incident-full-day-field {
        grid-column:
            auto;
    }


    .form-header-actions-equal
    .btn-primary-inline,
    .form-header-actions-equal
    .btn-secondary-inline {
        width: 100%;

        min-width: 0;
    }

}


/* ============================================================
   UNIRIA - CONDITIONAL INCIDENT FIELD
   Ocultamiento explícito para controles condicionales.
   ============================================================ */

.incident-full-day-field.is-hidden {
    display: none !important;
}


/* ============================================================
   UNIRIA - ATTENDANCE COMMAND CENTER
   Resumen operativo premium de Asistencia.
   ============================================================ */

.attendance-command-center {
    overflow: hidden;
}


.attendance-command-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding:
        20px
        22px;

    border-bottom:
        1px solid
        #e4ebf3;
}


.attendance-command-heading {
    min-width: 0;
}


.attendance-command-title-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 3px;
}


.attendance-command-title-row h3 {
    margin: 0;

    font-size: 16px;

    line-height: 1.25;

    color: #0f172a;
}


.attendance-command-heading p {
    margin:
        5px
        0
        0;

    font-size: 11px;

    color: #64748b;
}


.attendance-command-actions {
    display: flex;

    align-items: center;

    flex: 0 0 auto;
}


.attendance-command-actions form {
    margin: 0;
}


.attendance-status-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 25px;

    padding:
        0
        10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    background: #eef2f7;

    color: #475569;
}


.attendance-status--present {
    background: #ecfdf3;

    color: #16794a;
}


.attendance-status--partial,
.attendance-status--incomplete {
    background: #fff7e6;

    color: #9a6700;
}


.attendance-status--absent {
    background: #fff0ee;

    color: #b42318;
}


.attendance-status--pending,
.attendance-status--no_schedule {
    background: #eef4ff;

    color: #16756f;
}


.attendance-flow-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        42px
        minmax(0, 1fr);

    align-items: stretch;

    gap: 14px;

    padding:
        22px;
}


.attendance-flow-card {
    min-width: 0;

    padding: 18px;

    border:
        1px solid
        #e2e8f0;

    border-radius: 12px;

    background: #ffffff;
}


.attendance-flow-card--expected {
    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #ffffff 100%
        );
}


.attendance-flow-card--actual {
    background:
        linear-gradient(
            180deg,
            #f7faf8 0%,
            #ffffff 100%
        );
}


.attendance-flow-topline {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;
}


.attendance-flow-topline > span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;

    color: #64748b;
}


.attendance-flow-topline > strong {
    font-size: 15px;

    line-height: 1.25;

    text-align: right;

    color: #0f172a;
}


.attendance-timebar {
    display: grid;

    grid-template-columns:
        12px
        minmax(0, 1fr)
        12px;

    align-items: center;

    margin:
        24px
        4px
        10px;
}


.attendance-timebar-dot {
    width: 12px;

    height: 12px;

    border:
        3px solid
        #ffffff;

    border-radius: 50%;

    box-shadow:
        0 0 0 2px
        #94a3b8;
}


.attendance-timebar-line {
    height: 4px;

    margin:
        0
        -1px;

    border-radius: 999px;

    background: #cbd5e1;
}


.attendance-timebar--expected
.attendance-timebar-dot {
    box-shadow:
        0 0 0 2px
        #64748b;
}


.attendance-timebar--expected
.attendance-timebar-line {
    background:
        linear-gradient(
            90deg,
            #94a3b8,
            #64748b
        );
}


.attendance-timebar--actual
.attendance-timebar-dot {
    box-shadow:
        0 0 0 2px
        #16756f;
}


.attendance-timebar--actual
.attendance-timebar-line {
    background:
        linear-gradient(
            90deg,
            #43a79f,
            #16756f
        );
}


.attendance-timebar-labels {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;
}


.attendance-timebar-labels span {
    display: grid;

    gap: 2px;

    font-size: 9px;

    color: #94a3b8;
}


.attendance-timebar-labels span:last-child {
    text-align: right;
}


.attendance-timebar-labels strong {
    font-size: 11px;

    color: #334155;
}


.attendance-flow-note {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px dashed
        #dbe4ee;

    font-size: 10px;

    color: #475569;
}


.attendance-flow-note > span {
    font-weight: 700;

    color: #64748b;
}


.attendance-flow-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 700;

    color: #94a3b8;
}


.attendance-operational-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    padding:
        0
        22px
        22px;
}


.attendance-operational-kpi {
    min-width: 0;

    padding:
        15px
        16px;

    border:
        1px solid
        #e4ebf3;

    border-radius: 10px;

    background: #fbfcfe;
}


.attendance-operational-kpi > span {
    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .06em;

    text-transform: uppercase;

    color: #64748b;
}


.attendance-operational-kpi > strong {
    display: block;

    font-size: 18px;

    line-height: 1.2;

    color: #0f172a;
}


.attendance-operational-kpi > small {
    display: block;

    margin-top: 4px;

    font-size: 9px;

    color: #94a3b8;
}


.attendance-command-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        10px
        28px;

    padding:
        13px
        22px;

    border-top:
        1px solid
        #e4ebf3;

    background: #fafbfd;
}


.attendance-command-meta span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 9px;

    color: #64748b;
}


.attendance-command-meta strong {
    font-weight: 700;

    color: #475569;
}


@media (max-width: 980px) {

    .attendance-flow-grid {
        grid-template-columns:
            1fr;
    }


    .attendance-flow-arrow {
        transform: rotate(90deg);

        min-height: 20px;
    }


    .attendance-operational-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 680px) {

    .attendance-command-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .attendance-command-actions {
        width: 100%;
    }


    .attendance-command-actions form,
    .attendance-command-actions button {
        width: 100%;
    }


    .attendance-flow-grid {
        padding:
            16px;
    }


    .attendance-operational-grid {
        grid-template-columns:
            1fr;

        padding:
            0
            16px
            16px;
    }


    .attendance-command-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

        padding:
            12px
            16px;
    }


    .attendance-flow-topline {
        flex-direction: column;
    }


    .attendance-flow-topline > strong {
        text-align: left;
    }

}


/* ============================================================
   UNIRIA HR - EXPEDIENTE / JORNADA LABORAL PREMIUM
   ============================================================ */

.hr-schedule-premium {
    overflow: hidden;
}


.hr-schedule-premium-header {
    align-items: center;
}


.hr-schedule-heading {
    min-width: 0;
}


.hr-schedule-heading-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}


.hr-schedule-heading-row h2 {
    margin-bottom: 0;
}


.hr-schedule-subtitle {
    margin:
        5px
        0
        0;

    font-size: 11px;

    color: #64748b;
}


.hr-schedule-status {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 25px;

    padding:
        0
        10px;

    border-radius: 999px;

    background: #ecfdf3;

    color: #16794a;

    font-size: 10px;

    font-weight: 700;
}


.hr-schedule-actions {
    flex-wrap: wrap;
}


.hr-schedule-summary {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    padding:
        20px
        22px;

    border-top:
        1px solid
        #e4ebf3;

    border-bottom:
        1px solid
        #e4ebf3;

    background: #fafbfd;
}


.hr-schedule-kpi {
    min-width: 0;

    padding:
        15px
        16px;

    border:
        1px solid
        #e4ebf3;

    border-radius: 10px;

    background: #ffffff;
}


.hr-schedule-kpi > span {
    display: block;

    margin-bottom: 6px;

    color: #64748b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.hr-schedule-kpi > strong {
    display: block;

    color: #0f172a;

    font-size: 18px;

    line-height: 1.2;
}


.hr-schedule-kpi > small {
    display: block;

    margin-top: 4px;

    color: #94a3b8;

    font-size: 9px;
}


.hr-schedule-content-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, .85fr);

    gap: 18px;

    padding:
        22px;
}


.hr-schedule-panel {
    min-width: 0;

    border:
        1px solid
        #e4ebf3;

    border-radius: 12px;

    background: #ffffff;

    overflow: hidden;
}


.hr-schedule-section-heading,
.hr-schedule-history-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding:
        16px
        18px;

    border-bottom:
        1px solid
        #e8edf4;
}


.hr-schedule-section-heading h3,
.hr-schedule-history-header h3 {
    margin:
        2px
        0
        0;

    font-size: 14px;

    color: #0f172a;
}


.hr-schedule-section-count,
.hr-schedule-history-count {
    flex: 0 0 auto;

    font-size: 9px;

    font-weight: 700;

    color: #94a3b8;
}


.hr-schedule-week {
    padding:
        4px
        18px
        10px;
}


.hr-schedule-day {
    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr);

    align-items: center;

    gap: 16px;

    min-height: 58px;

    border-bottom:
        1px solid
        #edf1f5;
}


.hr-schedule-day:last-child {
    border-bottom: 0;
}


.hr-schedule-day-name {
    display: flex;

    align-items: center;

    gap: 6px;
}


.hr-schedule-day-name strong {
    font-size: 11px;

    color: #334155;
}


.hr-schedule-day-name span {
    padding:
        2px
        6px;

    border-radius: 999px;

    background: #eef4ff;

    color: #16756f;

    font-size: 8px;

    font-weight: 700;
}


.hr-schedule-day-visual {
    min-width: 0;
}


.hr-schedule-day-times {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 6px;

    font-size: 9px;

    color: #94a3b8;
}


.hr-schedule-day-times strong {
    font-size: 11px;

    color: #0f172a;
}


.hr-schedule-timebar {
    display: grid;

    grid-template-columns:
        8px
        minmax(0, 1fr)
        8px;

    align-items: center;
}


.hr-schedule-timebar span {
    width: 8px;

    height: 8px;

    border:
        2px solid
        #16756f;

    border-radius: 50%;

    background: #ffffff;
}


.hr-schedule-timebar i {
    height: 3px;

    margin:
        0
        -1px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #79c5bd,
            #16756f
        );
}


.hr-schedule-break-list {
    padding:
        4px
        18px
        10px;
}


.hr-schedule-break-item {
    display: grid;

    grid-template-columns:
        82px
        minmax(120px, 1fr)
        82px
        auto;

    align-items: center;

    gap: 12px;

    min-height: 58px;

    border-bottom:
        1px solid
        #edf1f5;
}


.hr-schedule-break-item:last-child {
    border-bottom: 0;
}


.hr-schedule-break-day {
    font-size: 10px;

    font-weight: 700;

    color: #475569;
}


.hr-schedule-break-main {
    min-width: 0;
}


.hr-schedule-break-main strong,
.hr-schedule-break-time strong {
    display: block;

    font-size: 10px;

    color: #0f172a;
}


.hr-schedule-break-main span,
.hr-schedule-break-time span {
    display: block;

    margin-top: 2px;

    font-size: 8px;

    color: #94a3b8;
}


.hr-schedule-chip {
    display: inline-flex;

    align-items: center;

    min-height: 23px;

    padding:
        0
        8px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 8px;

    font-weight: 700;

    white-space: nowrap;
}


.hr-schedule-chip--work {
    background: #ecfdf3;

    color: #16794a;
}


.hr-schedule-history {
    border-top:
        1px solid
        #e4ebf3;
}


.hr-schedule-history-table th,
.hr-schedule-history-table td {
    padding-top: 11px;

    padding-bottom: 11px;
}


.hr-schedule-inline-current {
    display: inline-flex;

    align-items: center;

    min-height: 22px;

    padding:
        0
        8px;

    border-radius: 999px;

    background: #ecfdf3;

    color: #16794a;

    font-size: 8px;

    font-weight: 700;
}


.hr-schedule-empty {
    min-height: 120px;

    padding:
        24px;
}


.hr-schedule-empty-state {
    min-height: 220px;
}


@media (max-width: 1120px) {

    .hr-schedule-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .hr-schedule-content-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 720px) {

    .hr-schedule-premium-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .hr-schedule-actions {
        width: 100%;
    }


    .hr-schedule-actions a {
        flex: 1 1 0;

        text-align: center;
    }


    .hr-schedule-summary {
        grid-template-columns:
            1fr;

        padding:
            16px;
    }


    .hr-schedule-content-grid {
        padding:
            16px;
    }


    .hr-schedule-day {
        grid-template-columns:
            82px
            minmax(0, 1fr);
    }


    .hr-schedule-break-item {
        grid-template-columns:
            74px
            minmax(0, 1fr);

        gap:
            8px
            12px;

        padding:
            10px
            0;
    }


    .hr-schedule-break-time,
    .hr-schedule-break-treatment {
        grid-column: 2;
    }

}


/* ============================================================
   UNIRIA HR - EMPLOYEE FILTER COMPACT
   ============================================================ */

.hr-employee-filters {
    grid-template-columns:
        165px
        120px
        120px;

    justify-content: start;

    align-items: end;

    gap: 12px;
}


.hr-employee-filters > div {
    width: 165px;

    min-width: 0;
}


.hr-employee-filters > div > label {
    display: block;
}


.hr-employee-filters select[name="status"] {
    width: 100%;

    min-width: 0;
}


.hr-employee-filters > .btn-primary-inline,
.hr-employee-filters > .btn-secondary-inline {
    width: 120px;

    min-width: 120px;

    justify-content: center;

    text-align: center;
}


@media (max-width: 720px) {

    .hr-employee-filters {
        grid-template-columns:
            1fr;

        width: 100%;

        gap: 10px;
    }


    .hr-employee-filters > div,
    .hr-employee-filters select[name="status"],
    .hr-employee-filters > .btn-primary-inline,
    .hr-employee-filters > .btn-secondary-inline {
        width: 100%;

        min-width: 0;
    }

}


/* ============================================================
   UNIRIA HR - CATALOG FILTER COMPACT
   Departamentos / Puestos
   ============================================================ */

.hr-catalog-filters {
    grid-template-columns:
        165px
        120px
        120px;

    justify-content: start;

    align-items: end;

    gap: 12px;
}


.hr-catalog-filters > div {
    width: 165px;

    min-width: 0;
}


.hr-catalog-filters > div > label {
    display: block;
}


.hr-catalog-filters select {
    width: 100%;

    min-width: 0;
}


.hr-catalog-filters > .btn-primary-inline,
.hr-catalog-filters > .btn-secondary-inline {
    width: 120px;

    min-width: 120px;

    justify-content: center;

    text-align: center;
}


@media (max-width: 720px) {

    .hr-catalog-filters {
        grid-template-columns:
            1fr;

        width: 100%;

        gap: 10px;
    }


    .hr-catalog-filters > div,
    .hr-catalog-filters select,
    .hr-catalog-filters > .btn-primary-inline,
    .hr-catalog-filters > .btn-secondary-inline {
        width: 100%;

        min-width: 0;
    }

}


/* ============================================================
   UNIRIA HR - ATTENDANCE FILTER COMPACT
   ============================================================ */

.hr-attendance-filters {
    display: grid;

    grid-template-columns:
        minmax(280px, 340px)
        165px
        165px
        165px
        110px
        110px;

    align-items: end;

    justify-content: start;

    gap: 10px;
}


.hr-attendance-filters > * {
    min-width: 0;
}


.hr-attendance-filters select,
.hr-attendance-filters input[type="date"] {
    width: 100%;

    min-width: 0;
}


.hr-attendance-filters .btn-primary-inline,
.hr-attendance-filters .btn-secondary-inline,
.hr-attendance-filters button,
.hr-attendance-filters a {
    min-width: 0;
}


.hr-attendance-filters .btn-primary-inline,
.hr-attendance-filters button[type="submit"] {
    width: 110px;

    justify-content: center;

    text-align: center;
}


.hr-attendance-filters .btn-secondary-inline,
.hr-attendance-filters a {
    width: 110px;

    justify-content: center;

    text-align: center;
}


@media (max-width: 1200px) {

    .hr-attendance-filters {
        grid-template-columns:
            minmax(260px, 1fr)
            150px
            150px
            150px;

        width: 100%;
    }


    .hr-attendance-filters .btn-primary-inline,
    .hr-attendance-filters .btn-secondary-inline,
    .hr-attendance-filters button,
    .hr-attendance-filters a {
        width: 110px;
    }

}


@media (max-width: 820px) {

    .hr-attendance-filters {
        grid-template-columns:
            1fr
            1fr;

        width: 100%;
    }


    .hr-attendance-filters .btn-primary-inline,
    .hr-attendance-filters .btn-secondary-inline,
    .hr-attendance-filters button,
    .hr-attendance-filters a {
        width: 100%;
    }

}


@media (max-width: 560px) {

    .hr-attendance-filters {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   UNIRIA HR - EXPEDIENTE PREMIUM FINAL
   Compensation / Modality / Organization / Attendance
   ============================================================ */

.hr-expediente-section-header {
    align-items: center;
}


.hr-expediente-section-header h2 {
    margin-bottom: 0;
}


.hr-expediente-subtitle {
    margin:
        5px
        0
        0;

    color: #64748b;

    font-size: 10px;
}


.hr-expediente-history-header {
    margin-top: 4px;

    border-top:
        1px solid
        #e4ebf3;
}


.hr-expediente-empty {
    min-height: 145px;

    padding:
        28px
        24px;
}


.hr-expediente-empty .quote-empty-icon {
    margin-bottom: 10px;
}


.hr-expediente-kpi {
    min-width: 0;

    padding:
        15px
        16px;

    border:
        1px solid
        #e4ebf3;

    border-radius: 10px;

    background: #ffffff;
}


.hr-expediente-kpi > span {
    display: block;

    margin-bottom: 6px;

    color: #64748b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.hr-expediente-kpi > strong {
    display: block;

    overflow: hidden;

    color: #0f172a;

    font-size: 16px;

    line-height: 1.25;

    text-overflow: ellipsis;
}


.hr-expediente-kpi > small {
    display: block;

    margin-top: 4px;

    color: #94a3b8;

    font-size: 9px;
}


/* ------------------------------------------------------------
   COMPENSACION
   ------------------------------------------------------------ */

.hr-compensation-premium {
    overflow: hidden;
}


.hr-compensation-current {
    padding:
        20px
        22px
        10px;

    overflow: visible;
}


.hr-compensation-current table,
.hr-compensation-current tbody {
    display: block;

    width: 100%;
}


.hr-compensation-current tbody {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.hr-compensation-current tr {
    display: block;

    min-width: 0;

    padding:
        14px
        16px;

    border:
        1px solid
        #e4ebf3;

    border-radius: 10px;

    background: #fafbfd;
}


.hr-compensation-current th,
.hr-compensation-current td {
    display: block;

    width: auto;

    padding: 0;

    border: 0;

    text-align: left;
}


.hr-compensation-current th {
    margin-bottom: 6px;

    color: #64748b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.hr-compensation-current td {
    color: #0f172a;

    font-size: 15px;

    font-weight: 700;
}


.hr-compensation-note {
    min-height: auto;

    margin:
        6px
        22px
        20px;

    padding:
        14px
        16px;

    border:
        1px solid
        #e4ebf3;

    border-radius: 10px;

    background: #fafbfd;
}


.hr-compensation-note strong {
    font-size: 10px;
}


.hr-compensation-note span {
    margin-top: 3px;

    font-size: 9px;
}


/* ------------------------------------------------------------
   MODALIDAD LABORAL
   ------------------------------------------------------------ */

.hr-work-modality-premium {
    overflow: hidden;
}


.hr-work-modality-premium .hr-modality-summary {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    margin:
        20px
        22px
        12px;
}


.hr-work-modality-premium > .table-responsive {
    margin:
        0
        22px
        20px;

    border:
        1px solid
        #e4ebf3;

    border-radius: 10px;

    overflow: hidden;
}


.hr-work-modality-premium .hr-expediente-empty {
    margin:
        0;
}


/* ------------------------------------------------------------
   HISTORIAL ORGANIZATIVO
   ------------------------------------------------------------ */

.hr-organization-premium {
    overflow: hidden;
}


.hr-org-summary {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    padding:
        20px
        22px;

    border-top:
        1px solid
        #e4ebf3;

    border-bottom:
        1px solid
        #e4ebf3;

    background: #fafbfd;
}


.hr-organization-premium > .table-responsive {
    margin-top: 0;
}


/* ------------------------------------------------------------
   ASISTENCIA EN EXPEDIENTE
   ------------------------------------------------------------ */

.hr-attendance-dossier {
    overflow: hidden;
}


.hr-attendance-dossier .erp-table td {
    vertical-align: middle;
}


.hr-attendance-status {
    display: inline-flex;

    align-items: center;

    min-height: 23px;

    padding:
        0
        8px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 8px;

    font-weight: 800;
}


.hr-attendance-status--present {
    background: #ecfdf3;

    color: #16794a;
}


.hr-attendance-status--partial,
.hr-attendance-status--incomplete {
    background: #fff7e6;

    color: #a66300;
}


.hr-attendance-status--absent {
    background: #fff1f0;

    color: #b42318;
}


.hr-attendance-status--no_schedule {
    background: #f1f5f9;

    color: #64748b;
}


.hr-attendance-dossier tbody tr {
    transition:
        background-color
        .16s ease;
}


.hr-attendance-dossier tbody tr:hover {
    background: #fafbfd;
}


@media (max-width: 1120px) {

    .hr-compensation-current tbody {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .hr-org-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 720px) {

    .hr-compensation-current {
        padding:
            16px;
    }


    .hr-compensation-current tbody,
    .hr-org-summary,
    .hr-work-modality-premium .hr-modality-summary {
        grid-template-columns:
            1fr;
    }


    .hr-org-summary {
        padding:
            16px;
    }


    .hr-work-modality-premium .hr-modality-summary {
        margin:
            16px;
    }


    .hr-work-modality-premium > .table-responsive {
        margin:
            0
            16px
            16px;
    }


    .hr-compensation-note {
        margin:
            6px
            16px
            16px;
    }

}