:root{
    --bg: #ffffff;
    --bg-alt: #f6f6f7;
    --bg-elv: #ffffff;
    --bg-soft: #f6f6f7;
    --border: #c2c2c4;
    --divider: #e2e2e3;
    --gutter: #e2e2e3;
    --text-1: rgba(60, 60, 67);
    --text-2: rgba(60, 60, 67, .78);
    --text-3: rgba(60, 60, 67, .56);
    --layout-max-width: 1440px;
    --gray-soft: rgba(142, 150, 170, .14);
    --neutral: #000;
    --neutral-inverse: #fff;
    --gray-1: #dddde3;
    --gray-2: #e4e4e9;
    --gray-3: #ebebef;
    --blue-1: #0095f6;
    --blue-2: #1877f2;
    --brand: var(--blue-1);
    --green-1: #18794e;
    --green-2: #299764;
    --green-3: #30a46c;
    --green-soft: rgba(16, 185, 129, .14);
    --yellow-1: #915930;
    --yellow-2: #946300;
    --yellow-3: #9f6a00;
    --yellow-soft: rgba(234, 179, 8, .14);
    --red-1: #b8272c;
    --red-2: #d5393e;
    --red-3: #e0575b;
    --red-soft: rgba(244, 63, 94, .14);
    --indigo-1: #3451b2;
    --indigo-2: #3a5ccc;
    --indigo-3: #5672cd;
    --indigo-soft: rgba(100, 108, 255, .14);
    --version: '0.3.4-alfa';
}

.dark{
    --version: '0.3.4-alfa';
    --bg: #1b1b1f;
    --bg-alt: #161618;
    --bg-elv: #202127;
    --bg-soft: #202127;
    --border: #3c3f44;
    --divider: #2e2e32;
    --gutter: #000000;
    --text-1: rgba(255, 255, 245, .86);
    --text-2: rgba(235, 235, 245, .6);
    --text-3: rgba(235, 235, 245, .38);
    --gray-soft: rgba(101, 117, 133, .16);
    --neutral: #fff;
    --neutral-inverse: #000;
    --gray-1: #515c67;
    --gray-2: #414853;
    --gray-3: #32363f;
    --blue-1: #0095f6;
    --blue-2: #1877f2;
    --brand: var(--blue-1);
    --green-1: #3dd68c;
    --green-2: #30a46c;
    --green-3: #298459;
    --green-soft: rgba(16, 185, 129, .16);
    --yellow-1: #f9b44e;
    --yellow-2: #da8b17;
    --yellow-3: #a46a0a;
    --yellow-soft: rgba(234, 179, 8, .16);
    --red-1: #f66f81;
    --red-2: #f14158;
    --red-3: #b62a3c;
    --red-soft: rgba(244, 63, 94, .16);
    --indigo-1: #a8b1ff;
    --indigo-2: #5c73e7;
    --indigo-3: #3e63dd;
    --indigo-soft: rgba(100, 108, 255, .16);
}

input, select, textarea {
    -webkit-appearance: none; /* Remove o estilo padrão do iOS */
    -moz-appearance: none;    /* Para outros navegadores baseados em Gecko */
    appearance: none;         /* Para outros navegadores modernos */
    border: none;             /* Remover bordas */
    background: transparent;  /* Remover fundo */
    padding: 0;               /* Resetar o preenchimento */
    font-family: inherit;     /* Usar a fonte do documento */
}

/* Para o select */
select {
    -webkit-appearance: none; /* Remove o estilo de seleção padrão do iOS */
    -moz-appearance: none;    /* Para outros navegadores baseados em Gecko */
    appearance: none;         /* Para outros navegadores modernos */
}

html.dark {
    color-scheme: dark;
}
body{
    margin: 0;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    line-height: 1.5rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-1);
    background-color: var(--bg);
    font-synthesis: style;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body:has(#light.show){
    overflow: hidden;
}

button:enabled, [role=button]:enabled {
    cursor: pointer;
}
button {
    padding: 0;
    font-family: inherit;
    background-color: transparent;
    background-image: none;
}
button, input, optgroup, select, textarea {
    border: 0;
    padding: 0;
    line-height: inherit;
    color: inherit;
    outline: none;
    font-family: inherit;
    font-size: inherit;
}
a, area, button, [role=button], input, label, select, summary, textarea {
    touch-action: manipulation;
}
*, :before, :after {
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, li, p {
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
}

svg{
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
a{
    text-decoration: none;
}

.layout{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header{
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 64px;
    pointer-events: none;
    background-color: var(--bg);
    position: sticky;
}
header .header{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--layout-max-width);
    height: 64px;
    width: 95%;
    pointer-events: none;
}
header .title{
    flex-shrink: 0;
    pointer-events: auto;
    padding: 1.25rem;
    color: var(--brand);
    position: relative;
}
header .title::after{
    content: var(--version);
    font-size: .5rem;
    color: var(--text-2);
    position: absolute;
    top: 1.25rem;
    right: -0.75rem;
}
header .title svg{
    width: 68.75px;
    height: 1.5rem;
    stroke-width: 0;
    fill: currentColor;
}
header .content{
    pointer-events: none;
    flex-grow: 1;
    position: relative;
}
header .content-body{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 64px;
    pointer-events: auto;
}
header .menu{
    display: flex;
    position: relative;
    flex-direction: column;
}
header .menu a{
    display: flex;
    align-items: center;
    padding: 1rem;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-1);
    transition: all .25s;
    border-top: 1px solid var(--bg-soft);
}
header .menu a:first-child{
    border-top: 0;
}
header .menu a:hover, header .menu a.active{
    color: var(--brand);
}
header .appearance{
    display: flex;
    align-items: center;
}
header .appearance::before{
    margin-right: 1rem;
    margin-left: 8px;
    width: 0;
    height: 1.5rem;
    content: "";
}
header .appearance .switch{
    position: relative;
    border-radius: 11px;
    display: block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background-color: var(--gray-soft);
    transition: border-color .25s;
    cursor: pointer;
}
.dark .switch .check {
    transform: translate(18px);
}
header .appearance .switch:hover {
    border-color: var(--brand);
}
header .appearance .switch .check{
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--neutral-inverse);
    transition: transform .25s !important;
}
header .appearance .switch .check .icon{
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
}
header .appearance .switch .check .icon svg{
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
}
header .avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--text-1);
    flex-shrink: 0;
    border-radius: 50%;
    padding: .5rem;
    background-color: var(--gray-3);
    margin-left: 1rem;
    cursor: pointer;
}
header .dropdown{
    top: 64px;
    right: 0;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
header .dropdown .user{
    padding:  1rem;
}
header .dropdown .user .group{
    font-size: .875rem;
    color: var(--text-2);
}
header .dropdown .user .name{
    font-weight: 600;
}

.dropdown.show{
    opacity: 1;
    visibility:visible;
    pointer-events: all;
    z-index: 100;
    width: auto;
    height: auto;
}
.dropdown.show .menu{
    animation: unhide .15s ease-in-out forwards;
    transform-origin: top right;
}

.dropdown .menu{
    width: 240px;
    background-color: var(--bg);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
    border-radius: 12px;
    transform: scale(0);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.dropdown .menu .li{
    background-color: transparent;
    animation: transform .15s ease-in-out;
    display: inline-flex;
    cursor: pointer;
    align-items: stretch;
    flex-direction: row;
    position: relative;
    width: 100%;
}
.dropdown .menu .li:hover{
    background-color: var(--bg-soft);
}

@keyframes unhide {
    0% {
        opacity: 0;
        transform: scale(0);
        visibility: hidden;
        pointer-events: none;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        visibility:visible;
        pointer-events: all;
    }
}

.sun{
    opacity: 1;
}
.moon, .dark .sun{
    opacity: 0;
}
.dark .moon{
    opacity: 1;
}

.btn{
    border-color: transparent;
    color: var(--text-1);
    background-color: var(--gray-3);
    border-radius: 20px;
    padding: 0 20px;
    line-height: 38px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid transparent;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    transition: color .25s, border-color .25s, background-color .25s;
    text-decoration: inherit;
}
.btn:hover{
    background-color: var(--gray-2);
    border-color: var(--gray-2);
}
.btn.blue{
    background-color: var(--blue-1);
    border-color: var(--blue-1);
    color: #fff;
}
.btn.blue:hover{
    background-color: var(--blue-2);
    border-color: var(--blue-2);
}
table .btn{
    cursor: pointer;
    height: 1.5rem;
    line-height: 1.5rem;
    min-width: 85px;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: auto;
    margin-left: 50%;
    transform: translateX(-50%);

}
table .btn svg{
    width: 1rem;
    height: 1rem;
}
.btn.signal:empty{
    visibility: hidden;
}
table .btn.confirm{
    color: var(--red-2);
    background-color: var(--red-soft);
    border-color: var(--red-soft);
}

.a{
    cursor: pointer;
}
.a:not([data-href]), .a[data-href=""] {
    display: none !important;
}

.section{
    position: relative;
    color: var(--text-2);
}
.section.search{
    width: 100%;
}
.section svg{
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    width: 1.5rem;
    height: 1.5rem;
}
.section .btn.a, .section .btn.add, .section .btn.remove{
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-1);
}
.section .btn.remove{
    background-color: var(--red-2);
    border-color: var(--red-2);
}
.section .btn.remove:hover{
    background-color: var(--red-1);
    border-color: var(--red-1);
}
.section .btn svg{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}
.input{
    padding-block: 12px;
    font-size: 14px;
    height: 3.25rem;
    line-height: 1.5rem;
    justify-content: flex-start;
    border: 2px solid var(--bg-soft);
    background-color: var(--bg-soft);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    width: 100%;
    position: relative;
    min-width: 275px;
}
div.input{
    cursor: pointer;
}
.input.box{
    cursor: text;
}
textarea.input{
    resize: vertical;
    margin: 0;
    display: block;
}
.section:has(.input.disabled){
    cursor:not-allowed;
}
.input.disabled{
    border-color: var(--bg-soft) !important;
    opacity: .25;
    pointer-events: none;
}
.input.has-icon{
    padding-left: 52px;
}
.input.has-button{
    padding-right: 52px;
}
.input:hover, .input:active{
    border-color: var(--border);
}
.input:focus{
    border-color: var(--brand);
}
input:-webkit-autofill, input:autofill, input:-internal-autofill-selected {
    background-color: var(--gray-soft) !important;
}

#login{
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}
#login form{
    width: 95%;
    max-width: 460px;
}
#login .section{
    margin-top: 20px;
}
#login .section:first-child{
    margin-top: 0;
}
#login .btn{
    width: 100%;
}

.container{
    margin: 0 auto;
    max-width: var(--layout-max-width);
    width: 95% !important;
    overflow: hidden;
    position: relative;
}
.container h1{
    text-align: left;
    width: 100%;
    max-width: 100%;
}
.container .new{
    width: 48px;
    height: 48px;
    padding: .5rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.container.overflow{
    overflow-x: auto;
}
.container .items{
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}
.container .items .item{
    width: calc(100% / 3);
    padding: 8px;
    position: relative;
}
.container .items#results{
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    margin-top: .5rem;
}
.container .items .item.result{
    width: 100%;
    border-radius: 0;
}
.container .items a.item .feature:hover {
    border-color: var(--brand);
}
.container .items .item .counter {
    background-color: var(--red-soft);
    color: var(--red-2);
    font-size: 0.75rem;
    border-radius: 2rem;
    padding: 0 .5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    position: absolute;
    font-weight: 500;
    top: 1rem;
    right: 1rem;
}

.container .items .item .counter:empty {
    display: none;
}
.container .items .item .feature{
    display: flex;
    border: 1px solid var(--bg-soft);
    border-radius: 12px;
    background-color: var(--bg-soft);
    transition: border-color .25s, background-color .25s;
    height: 100%;
}
.container .items .item .feature .box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}

.task{
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    align-items: start;
    gap: .5rem;
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    width: 100%;
}
.task.t-user .user{
    padding: 0;
}
.task > * {
    width: 100%;
}
.task .info{
    display: flex;
    gap: .5rem;
    justify-content: flex-start;
    font-size: .875rem;
}
.task .info:not(:has(div)), .task .bottom:not(:has(div)){
    display: none;
}
.task .info.users{
    flex-direction: column;
}
.task .user{
    width: 100%;
    gap: 0.5rem;
    display: flex;
    align-items: center;
    padding: .5rem;
}
.task .user .name{
    line-height: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    width: 100%;
}
.task .user .name span{
    color: var(--text-3);
    font-weight: 400;
}
.task .avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5;
    height: 1.5rem;
    color: var(--text-1);
    flex-shrink: 0;
    border-radius: 50%;
    padding: .25rem;
    background-color: var(--gray-3);
}
.task .avatar svg{
    width: 1rem;
    height: 1rem;
}

.task .admin, .task .remove{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--text-2);
    background-color: var(--gray-3);
    flex-shrink: 0;
    border-radius: 50%;
    padding: .25rem;
    cursor: pointer;
}
.task .remove{
    color: var(--red-2);
    background-color: var(--red-soft);
}
.task .admin.manager{
    color: #fff;
    background-color: var(--blue-1);
}
.task .admin svg, .task .remove svg{
    width: 1rem;
    height: 1rem;
}

a.item{
    color: inherit;
}

.task .title{
    line-height: 1.5rem;
}
.task .status, .task .priority, .task .time {
    padding: 0.25rem .5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    background-color: var(--gray-soft);
    color: var(--text-2);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    gap: .5rem;
}
.task .info.users .status{
    justify-content: flex-start;
    text-align: left;
}
.task .status::after, .task .priority::after, .task .time::after{
    font-size: 0.875rem;
    content: '';
    justify-content:flex-start;
    align-items: center;
    line-height: 1rem;
}
.task .time::after{
    content: attr(data-time);
}
.task .status svg, .task .priority svg, .task .time svg{
    width: 1rem;
    height: 1rem;
    display: block;
}
.task .status.pending::after{ content: 'Pendente' }
.task .status.in-progress::after{ content: 'Em andamento' }
.task .status.completed::after{ content: 'Concluída' }

.task .status.pending, .task .priority.high, .task .time.past{
    background-color: var(--red-soft);
    color: var(--red-2);
}
.task .status.in-progress, .task .priority.middle, .task .time.coming-soon{
    background-color: var(--yellow-soft);
    color: var(--yellow-2);
}
.task .status.completed, .task .priority.low, .task .time.soon{
    background-color: var(--green-soft);
    color: var(--green-2);
}
.task .time.future{
    background-color: var(--indigo-soft);
    color: var(--indigo-2);
}

.task .priority.high::after{ content: 'Urgente' }
.task .priority.middle::after{ content: 'Prioridade média' }
.task .priority.low::after{ content: 'Baixa' }

.task .bottom{
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.task .data{
    display: flex;
    gap: .5rem;
    flex-direction: column;
}
.task .bottom:empty{
    display: none;
}
.task .message{
    padding: 1rem;
    border: 1px solid var(--bg);
    background-color: var(--bg);
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: .5rem;
}
.task .message .user{
    padding: 0;
}

#create{
    width: 3rem;
    height: 3rem;
    background-color: var(--blue-1);
    border: 2px solid var(--blue-1);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    color: #fff;
    transition: all .25s;
    z-index: 40;
}
#create:hover{
    border-color: var(--blue-2);
    background-color: var(--blue-2);
}

.container .items .item .feature .box .icon {
    background-color: var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    color: var(--brand);
    transition: background-color .25s;
    flex-shrink: 0;  /* Evita que o ícone diminua de tamanho */
}
.container .items .item .feature .box .icon svg{
    width: 1.5rem;
    height: 1.5rem;
}

.container .items .item .feature .box .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;  /* Faz com que o texto ocupe o espaço restante */
}

.container .items .item .feature .info .title, .task .title {
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.container .items .item .feature .text, .task .text {
    padding: 0;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-2);
    height: 100%;
}

table{
    font-size: 0.875rem;
    border: 1px solid var(--bg-soft);
    border-radius: 12px;
    background-color: var(--bg-soft);
    visibility: hidden;
    margin-top: 1rem;
}

table .check{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table th{
    text-align: center !important;  /* Alinha o texto no centro */
}
.chart{
    border: 1px solid var(--bg-soft);
    border-radius: 12px;
    background-color: var(--bg-soft);
    padding: 1rem;
    margin-top: 1rem;
}
.chart:first-child{
    margin-top: 0;
}
table.show{
    visibility:visible;
}
table td {
    position: relative;
}
table a{
    color: inherit;
}
table td a{
    cursor: pointer;
    position: relative;
    transition: color .2s linear;
}
table td a::after{
    position: absolute;
    top: 10px;
    right: 10px;
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9 17.9V6.7a1 1 0 0 1 1.7-.7l5.6 5.6a1 1 0 0 1 0 1.4l-5.6 5.6a1 1 0 0 1-1.7-.7Z"/></svg>');
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: #fff;
    opacity: 0;
    transition: opacity .2s linear;
}
table td a:hover{
    color: #fff;
}
table td a:hover span::after{
    opacity: 0;
}
table span::after{
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-3px);
}
table .green{
    color: inherit;
}
table .red{
    color: var(--red-2);
}
table .yellow{
    color: var(--yellow-2);
}
table .gray{
    color: var(--text-3);
}
table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td{
    padding: .5rem;
}
table .dtr-details{
    text-wrap: auto;
}

#light{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg);
    z-index: 50;
    align-items: center;
    flex-direction: column;
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
#light .dialog.confirm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    max-width: 320px;
    padding-top: 1rem;
    border-radius: 12px;
    background-color: var(--bg-soft);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
}
#light .dialog.confirm .buttons{
    width: 100%;
    display: flex;
    gap: 1px;
}
#light .dialog.confirm .buttons .btn{
    width: 50%;
    border-radius: 0;
    cursor: pointer;
}
#light .confirm .title{
    font-weight: 500;
    align-items: center;
}
#light .dialog p{
    padding: 0 1rem;
    text-align: center;
}
#light .section{
    margin: 0 auto 0.5rem auto;
    max-width: 480px;
    width: 100%;
}
#light.show{
    display: flex;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
#light .close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    padding: 6px;
    color: var(--text-2);
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--bg-soft);
}
#light .dialog{
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
    max-height: calc(100% - 68px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#light .dialog .li{
    position: relative;
    display: flex;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
    transition: all .25s;
    display: inline-flex;
    width: 100%;
    font-size: 1rem;
    padding: 1rem;
    color: var(--text-2);
    border-top: 1px solid var(--bg-soft);
    cursor: pointer;
}
#light .dialog .li:first-child{
    border-top: 0;
}
#light .dialog .li:hover, #light .dialog .li:active{
    color: var(--text-1);
    background-color: var(--bg-soft);
}

#options{
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.alertr{
    border-radius: 8px;
    background-color: var(--bg);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 200%);
    transition: all .25s;
    visibility: hidden;
    pointer-events: none;
    color: var(--text-1);
}
.alertr.show{
    transform: translate(-50%, 0);
    visibility: visible;
    pointer-events: all;
}

.alertr .type{
    padding: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    line-height: 1.5rem;
    gap: .5rem;
    border-radius: 8px;
}
.alertr .type .icon{
    width: 1.5rem;
    height: 1.5rem;
}

.alertr .error{
    background-color: var(--red-soft);
    color: var(--red-2);
}
.alertr .success{
    background-color: var(--green-soft);
    color: var(--green-2);
}
.alertr .warn{
    background-color: var(--yellow-soft);
    color: var(--yellow-2);
}

.alertr.error .error{display: flex;}
.alertr.success .success{display: flex;}
.alertr.warn .warn{display: flex;}
.alertr.info .info{display: flex;}
.alertr.loading .loading{display: flex;}
.alertr.loading .loading svg{animation: spin 1s linear infinite;}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.active-marker {
    animation: bounce .3s ease infinite alternate;
}

@keyframes bounce {
	from {transform: translateY(0px) scale(1.25);}
    to {transform: translateY(-10px) scale(1.25);}
}

#hidder{
    position: fixed;
    bottom: 2rem;
    left: 1rem;
    z-index: 100;
    width: 2rem;
    gap: .5rem;
    flex-direction: column;
    display: none;
}
#hidder.show{
    display: flex;
}
#hidder .btn{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--bg-elv);
    padding: 0;
    cursor: pointer;
    border-width: 2px;
}
#hidder .btn.hide{
    background-color: transparent !important;
}
#hidder .btn.red{background-color: var(--red-2); border-color: var(--red-2);}
#hidder .btn.green{background-color: var(--green-2); border-color: var(--green-2);}
#hidder .btn.yellow{background-color: var(--yellow-2); border-color: var(--yellow-2);}
#hidder .btn.blue{background-color: var(--blue-2); border-color: var(--blue-2);}

.hide-marker {
    display: none !important;           /* Oculta completamente */
    transform: scale(0) !important;     /* Aplica escala zero */
    pointer-events: none !important;    /* Impede interação */
    transition: transform 0.3s ease;    /* Suaviza a transição */
}


#map{
    width: 100%;
    height: calc(100vh - 64px);
    position: absolute;
    top: 64px;
    left: 0;
}
#map svg{
    fill: var(--blue-2);
    stroke: none;
}
.infowindow{
    border-radius: 8px;
    background-color: var(--bg);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12), -24px -24px 0 var(--bg-soft);
    display: flex;
    min-height: 240px;
    position: fixed;
    top: 50%;
    right: 2rem;
    transform: translate(200%, -50%);
    transition: all .25s;
    visibility: hidden;
    pointer-events: none;
    max-width: calc(100% - 4rem);
    flex-direction: column;
    z-index: 60;
}
.infowindow.show{
    transform: translate(0, -50%);
    visibility: visible;
    pointer-events: all;
}
.infowindow .close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    padding: 6px;
    color: var(--text-2);
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--bg-soft);
}
.infowindow .title{
    text-align: center;
    height: 4.25rem;
    line-height: 2.25rem;
    padding: 1rem 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.infowindow .list{
    min-width: 320px;
    overflow-x: auto;
    max-height: calc(100vh - 14rem);
}
.infowindow .list .li{
    display: flex;
    gap: 1rem;
    border-top: 1px solid var(--gray-soft);
    padding: .5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-1);
}
.infowindow .list .li .port{
    width: 2rem;
    height: 2rem;
    padding: .5rem;
    border-radius: 50%;
    background-color: var(--gray-soft);
    line-height: 1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.infowindow .list .li.red{
    color: var(--red-2);
}
.infowindow .list .li.red .port{
    background-color: var(--red-soft);
}

.infowindow .list .li.gray{
    color: var(--text-3);
}
.infowindow .list .li.gray .port{
    background-color: var(--bg-soft);
}

.infowindow .list .li .login{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.infowindow .btn{
    margin: 1rem;
    width: calc(100% - 2rem);
}


.switch .slider{
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background-color: var(--tertiary-background);
}
.switch {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--border);
    background-color: var(--gray-soft);
    transition: .2s;
    border-radius: 1.5rem;
    box-sizing: border-box;
}
.switch:hover .slider{
    border-color: var(--brand);
}
.switch .slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    top: 1px;
    left: 1px;
    background-color: var(--text-1);
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--brand);
}
input:checked + .slider::before {
    transform: translateX(1.5rem);
}

form, .btns, #task, .persona{
    max-width: 740px;
    margin: 0 auto 1rem auto;
}
.btns{
    display: flex;
    gap: 1rem;
}
.btns .btn{
    width: calc(50% - .5rem);
}
.btn.delete, #light .dialog .submit{
    color: #fff;
    background-color: var(--red-2);
    border-color: var(--red-2);
    cursor: pointer;
}
.btn.delete:hover, #light .dialog .submit:hover{
    background-color: var(--red-1);
    border-color: var(--red-1);
}
form .section{
    margin-bottom: 1rem;
    transition: all 0.25s;
}
form .section.hide{
    opacity: .3;
    cursor: pointer;
    transform: scale(.9);
}
form .btn[type=submit]{
    width: 100%;
}

h1, h2.subtitle{
    line-height: 2rem;
    font-size: 1.5rem;
    margin: 1rem auto;
    max-width: 576px;
    letter-spacing: -.4px;
    font-weight: 700;
    white-space: pre-wrap;
    color: var(--text-1);
    text-align: center;
}
#task, .persona{
    margin: 1rem auto;
    border: 1px solid var(--bg-soft);
    border-radius: 12px;
    background-color: var(--bg-soft);
}

.persona-data{
    list-style: none;
    margin: 0;
    padding: 0;
}
.persona-data li{
    margin: 0;
    padding: .5rem 0;
    border-top: 1px solid var(--border);
    display: flex;
    gap: .5rem;
    line-height: 1rem;
    font-size: 0.875rem;
}
.persona-data li span{
    color: var(--text-3);
    font-weight: 400;
}
.persona-data li strong{
    text-align: right;
}
.persona-data li:first-child{
    border-top: 0;
}

#error{
    width: 95%;
    max-width: 320px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#error h1{
    font-weight: 400;
    text-align: center;
}
#error .description{
    font-size: 0.875rem;
    color: var(--text-2);
    text-align: center;
}
#error .btn{
    width: 100%;
}

#footer{
    width: 100%;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}