@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,500');
:root {
    --main: #5FB2F5;
    --secondary: #63E2FF;
    --titles: #66E8DD;
    --action: #63FFC6;
    --action-hover: #5FF594;
    --text-color: #000;
    --text-secondary: #6c757d;
    /* --main: #8FBDD3;
    --secondary:#E4D1B9 ;
    --titles: #E4D1B9;
    --action: #BE8C63;
    --action-hover: #A97155;
    --text-color: #E4D1B9;
    --text-secondary: #6c757d; */
    --animate-delay:0s;
    --animate-duration:0.6s;
}

*::selection{
    background-color: var(--action);
}
.main{
    background-color: var(--main);
    color: var(--text-color);
}
.sidebar a{
    color: var(--text-color)!important;
}
#menuHome {
    justify-content: center;
    
}
#menuHome i{
    /* transform: translate(10px, 0px);
    margin: 10px; */
    color: var(--text-color)!important;
}
a:active,.dropdown-item.active, .dropdown-item:active{
    background-color: var(--action);
}
.brand-link{
    text-decoration: none;
}
li.nav-header{
    color: var(--action)!important;
    font-weight: 900;
}
.small-box>.small-box-footer{
    padding: 0;
}
input, select, textarea, .bootstrap-tagsinput{
    background-color: var(--titles)!important;
}
.bootstrap-tagsinput{
    color: #000!important;
}
input[type="search"]:focus-visible{
    outline-color: var(--action-hover);
}
select:not([multiple]){
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
    border: 1px solid var(--secondary);
    border-radius: 2px;
    margin-right: 2rem;
    padding-right: 2rem;
}
button.btn-main, button.btn-new, .badge-gg{
    background-color: var(--action)!important;
}
button.btn-main, btn-new, btn-edit{
    background-color: var(--action)!important;
}
button.btn-main:hover, button.btn-new:hover, button.btn-edit:hover, .badge-gg:hover{
    background-color: var(--action-hover)!important;
}
button.btn-main:hover span, button.btn-new:hover span, button.btn-edit:hover span{
    transform: scale(1.1);
    transition: ease 0.3;
}
.btn-clone>i{
    font-size: 18px;
}
.btn-outline-main{
    color: var(--action);
    border-color: var(--action);
}
.btn-outline-main:hover{
    color: #000;
    background-color: var(--action-hover);
    border-color: var(--action-hover);
}
.btn-check:checked + .btn-outline-main, .btn-check:active + .btn-outline-main, .btn-outline-main:active, .btn-outline-main.active, .btn-outline-main.dropdown-toggle.show{
    color: #000;
    background-color: var(--action-hover);
    border-color: var(--action-hover);
}
.form-check-input:checked[type=checkbox]{
    background-color: var(--action-hover)!important;
}
.badge-gg{
    color: black;
}
.usedCategory{
    cursor: pointer;
}
table thead{
    background-color: var(--main);
}
.expense{
    color: red!important;
}
.income{
    color: green!important;
}
.amountHideable.hidden span{
    display: none;
}
.amountHideable.hidden::after{
    content: "****,**";
}
.tableTotal{
    border-top: 2px solid var(--main);
    border-width: 2px 0!important;
    background-color: var(--action);
}
.tableContainer{
    width:100%;
    max-width:100%;
}
.scrollableTable{
    overflow: auto;
    min-height: 100px;
    /* max-height: 550px; */
    min-width: auto;
}
.dataTables_paginate {
    margin-top: 10px;
    background-color: var(--main);
    border-radius: 10px;
    padding: 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    background-color: var(--action);
    border-radius: 5px;
    margin: 3px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: none;
    background-color: var(--action);
    border-radius: 5px;
    margin: 3px;
    opacity: 0.75;
    box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover{
    background-color: var(--action-hover)!important;
    background-image: none;
}
.dataTables_wrapper .dataTables_length select{
    min-width: 50px;
    margin-right: 0.25em;
}
.accordion-header button{
    text-align: center;
    background-color: var(--action)!important;
    color: var(--text-color)!important;
}
.errorPage{
    font-family: "Roboto Mono";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle at center,  var(--secondary) 0%, transparent 50%);
}
.errorPage div.errorNumber{
    font-size: 4rem;
    font-weight: 500;
}
.errorPage div.errorText{
    font-weight: 300;
    text-align: center;
}
td.ribbon{
    position: relative;
    overflow: hidden;
    width: 300px;
}
.ribbon::after{
position: absolute;
    width: 90px;
    height: 30px;
    background:var(--action);
    top: 5px;
    text-align: center;
    line-height: 25px;
    right: -25px;
    transform: rotate(49deg);
}
.ribbon.ribbonPeriodic::after{
    content: "Auto";
}
.ribbon.ribbonImported::after{
    content: "Importado";
    font-size: 10px;
}
.ribbon.ribbonAudio::after{
    content: "Audio";
}
.addHomeScreen{
    position: fixed;
    background-color: var(--text-secondary);
    color: var(--action);
    bottom: 50px;
    width: 100%;
    padding: 10px;
    text-align: center;
    display: flex;
}
.addHomeScreen a{
    color: var(--action);
    cursor: pointer;
    text-decoration: none;
}
.addHomeScreen span, .addHomeScreen i{
    display: flex;
    flex-direction: row;
}
.addHomeScreen i{
    margin-left: auto;
}
.enjoyhint{
    z-index: 99999;
}
#notificationDropdown a.dropdown-toggle::after{
    display: none;
}
.listNotification{
    max-height: 400px;
    overflow-y: scroll;
}
.badge{
    padding: 0.3em 0.6em;
    right: 0px;
    top: 3px;
    font-size: 0.6em;
}
.form-switch .form-check-input{
    width: 4em;
    height: 2em;
}

.btn-floating-record{
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--action);
    color: #000;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    font-size: 22px;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, transform .2s ease;
}
.btn-floating-record:hover{
    background-color: var(--action-hover);
}
.btn-floating-record.recording{
    background-color: #e53e3e;
    color: #fff;
    animation: recordPulse 1.4s infinite;
}
@keyframes recordPulse{
    0%{ box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 0 0 0 rgba(229,62,62,.6); }
    70%{ box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 0 0 14px rgba(229,62,62,0); }
    100%{ box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 0 0 0 rgba(229,62,62,0); }
}
@media (max-width: 767px){
    .btn-floating-record{
        right: 16px;
        bottom: 16px;
    }
}

/* Dark mode */
body.dark-mode nav.main-header.main{
    background-color: var(--main) !important;
    color: var(--text-color) !important;
}
body.dark-mode nav.main-header .nav-link,
body.dark-mode nav.main-header .nav-link i,
body.dark-mode nav.main-header #menuHome i{
    color: var(--text-color) !important;
}
body.dark-mode table,
body.dark-mode table.dataTable,
body.dark-mode .dataTables_wrapper table{
    color: #e9ecef !important;
    border-color: #454d55 !important;
}
body.dark-mode table thead{
    background-color: var(--main) !important;
    color: var(--text-color) !important;
}
body.dark-mode table td,
body.dark-mode table th{
    border-color: #454d55 !important;
    color: #e9ecef !important;
    background-color: transparent !important;
}
body.dark-mode table thead th,
body.dark-mode table thead td{
    color: var(--text-color) !important;
}
body.dark-mode table tbody tr{
    background-color: rgba(0,0,0,.15) !important;
}
body.dark-mode table tbody tr.odd,
body.dark-mode table.table-striped>tbody>tr:nth-of-type(odd){
    background-color: rgba(255,255,255,.06) !important;
}
body.dark-mode table tbody tr.even,
body.dark-mode table.table-striped>tbody>tr:nth-of-type(even){
    background-color: rgba(0,0,0,.15) !important;
}
body.dark-mode table tbody tr:hover{
    background-color: rgba(255,255,255,.12) !important;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode select option{
    color: #000 !important;
}
body.dark-mode .tableTotal{
    background-color: var(--action) !important;
    color: #000 !important;
}
/* Ingresos/gastos: la regla genérica de celdas pisaba .income/.expense en los <td>.
   Tonos más claros sobre el fondo oscuro; en la fila de totales (fondo claro) se
   mantienen los originales. */
body.dark-mode .income{
    color: #4ade80 !important;
}
body.dark-mode .expense{
    color: #ff6b6b !important;
}
body.dark-mode .tableTotal .income{
    color: green !important;
}
body.dark-mode .tableTotal .expense{
    color: red !important;
}
body.dark-mode .accordion-item{
    background-color: #545d66 !important;
    color: #e9ecef !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    border-radius: 4px;
}
body.dark-mode .accordion-body{
    background-color: transparent !important;
    color: #e9ecef !important;
}
body.dark-mode .accordion-collapse{
    border-color: rgba(255,255,255,.15) !important;
}
.ribbon::after{
    color: #000;
}