/* =========================================================
   PASCOM+
   DESIGN SYSTEM GLOBAL
   ========================================================= */


:root {
    --primary: #7a1f2b;
    --primary-dark: #5f1620;
    --primary-hover: #681a25;

    --primary-soft: #f7ecee;
    --primary-soft-2: #fbf5f6;

    --secondary: #bd945f;
    --secondary-soft: #f7f1e9;

    --success: #32705a;
    --success-soft: #edf7f2;

    --info: #476f8a;
    --info-soft: #edf5f9;

    --warning: #9c6d2c;
    --warning-soft: #fcf4e8;

    --danger: #a53a4e;
    --danger-soft: #fbedf0;

    --text-primary: #2b2527;
    --text-secondary: #70676a;
    --text-muted: #9b9295;

    --background: #f7f7f8;
    --surface: #ffffff;

    --border: #ebe7e8;
    --border-strong: #ddd6d8;

    --sidebar-width: 254px;
    --header-height: 74px;

    --radius-xs: 7px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;

    --shadow-xs:
        0 2px 7px
        rgba(35, 25, 29, 0.025);

    --shadow-sm:
        0 7px 22px
        rgba(35, 25, 29, 0.04);

    --shadow-md:
        0 12px 34px
        rgba(35, 25, 29, 0.06);

    --shadow-lg:
        0 22px 55px
        rgba(35, 25, 29, 0.10);

    --font:
        'Poppins',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    --transition:
        160ms ease;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    min-height: 100%;

    background:
        var(--background);

    scroll-behavior:
        smooth;
}


body {
    min-height:
        100vh;

    margin: 0;

    background:
        var(--background);

    color:
        var(--text-primary);

    font-family:
        var(--font);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.55;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


body.sidebar-open {
    overflow:
        hidden;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
select,
textarea {
    font:
        inherit;
}


button {
    color:
        inherit;
}


img,
svg {
    display:
        block;
}


svg {
    width:
        100%;

    height:
        100%;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top:
        0;

    color:
        var(--text-primary);

    font-family:
        var(--font);

    font-weight:
        600;

    letter-spacing:
        -0.025em;
}


p {
    margin-top:
        0;
}


::selection {
    background:
        var(--primary);

    color:
        #ffffff;
}


/* =========================================================
   FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(122, 31, 43, 0.14);

    outline-offset:
        2px;
}


/* =========================================================
   BOTÕES
   ========================================================= */

.btn {
    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        9px 16px;

    border:
        1px solid
        transparent;

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

    background:
        transparent;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.btn:hover {
    transform:
        translateY(-1px);
}


.btn:active {
    transform:
        translateY(0);
}


.btn-primary {
    background:
        var(--primary);

    color:
        #ffffff;

    box-shadow:
        0 5px 15px
        rgba(122, 31, 43, 0.16);
}


.btn-primary:hover {
    background:
        var(--primary-hover);

    color:
        #ffffff;
}


.btn-secondary {
    border-color:
        var(--border-strong);

    background:
        #ffffff;

    color:
        var(--text-primary);
}


.btn-secondary:hover {
    border-color:
        #d1c6c9;

    background:
        var(--primary-soft-2);

    color:
        var(--primary);
}


.btn-danger {
    background:
        var(--danger);

    color:
        #ffffff;
}


.btn-danger:hover {
    background:
        #8e3042;
}


.btn-ghost {
    color:
        var(--primary);
}


.btn-ghost:hover {
    background:
        var(--primary-soft);
}


.btn-sm {
    min-height:
        34px;

    padding:
        7px 11px;

    font-size:
        10px;
}


/* =========================================================
   FORMULÁRIOS
   ========================================================= */

.form-group {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.form-group label {
    color:
        var(--text-primary);

    font-size:
        11px;

    font-weight:
        600;
}


.form-help {
    color:
        var(--text-muted);

    font-size:
        9px;

    line-height:
        1.5;
}


input:not([type]),
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='url'],
select,
textarea {
    width:
        100%;

    min-height:
        43px;

    padding:
        9px 12px;

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

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

    background:
        #ffffff;

    color:
        var(--text-primary);

    font-size:
        12px;

    outline:
        none;

    box-sizing:
        border-box;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


input[type='datetime-local'] {
    color-scheme:
        light;
}


input[type='datetime-local']::-webkit-calendar-picker-indicator {
    cursor:
        pointer;

    opacity:
        .62;
}


textarea {
    min-height:
        110px;

    resize:
        vertical;
}


input:hover,
select:hover,
textarea:hover {
    border-color:
        #cfc4c7;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        rgba(122, 31, 43, .72);

    box-shadow:
        0 0 0 3px
        rgba(122, 31, 43, 0.06);
}


input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        none;
}


input::placeholder,
textarea::placeholder {
    color:
        #aaa2a4;
}


input[type='checkbox'],
input[type='radio'] {
    accent-color:
        var(--primary);
}


/* =========================================================
   ALERTAS
   ========================================================= */

.alert {
    margin-bottom:
        18px;

    padding:
        12px 14px;

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

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

    font-size:
        11px;
}


.alert-success {
    border-color:
        #d6eadf;

    background:
        var(--success-soft);

    color:
        var(--success);
}


.alert-error {
    border-color:
        #eed5db;

    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.alert-warning {
    border-color:
        #eddfc7;

    background:
        var(--warning-soft);

    color:
        var(--warning);
}


/* =========================================================
   UTILS
   ========================================================= */

.inline-actions,
.form-actions,
.page-footer-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    flex-wrap:
        wrap;
}


.form-actions,
.page-footer-actions {
    justify-content:
        flex-end;
}


.hidden {
    display:
        none !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width:
        7px;

    height:
        7px;
}


::-webkit-scrollbar-track {
    background:
        transparent;
}


::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        #d9d2d4;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #c9c0c3;
}