:root {
/* Azules */
--blue-900: #1F294D; /* Azul intenso (texto fuerte) */
--blue-300: #9092AA; /* Azul claro/pastel (texto suave o bordes) */
--blue-600: #5150E3; /* Azul medio (botones secundarios) */
--blue-500: #525FEA; /* Azul primario (acciones principales, fondo exterior) */

/* Grises y blancos */
--gray-100: #EFEFFA; /* Fondo claro (sidebar, centro) */
--gray-300: #9092AA; /* Líneas separadoras o texto suave */
--white-100: #F6F5FA; /* Fondo tipo "white" */

/* Amarillo pastel */
--yellow-100: #FFF1C4; /* Fondo suave */

/* Verde pastel */
--green-100: #DDF0EA; /* Fondo suave */
}

@font-face {
font-family: 'Rubik';
src: url('/assets/fonts/Rubik-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

.bg-blue-500 {
background-color: var(--blue-500);
}

.text-blue-900 {
color: var(--blue-900);
}
.text-grey-300 {
color: var(--gray-300);
}

.border-gray-300 {
border-color: var(--gray-300);
}

.bg-green-100 {
background-color: var(--green-100);
}

.bg-yellow-100 {
background-color: var(--yellow-100);
}

.bg-white-100 {
background-color: var(--white-100);
}
body {
font-family: 'Rubik';
background-color: var(--blue-500);
color: var(--blue-900);
margin: 0;
padding: 0;
}
.content{
background-color: var(--gray-100);
margin: 40px; 
border-radius: 40px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-height: calc(100vh - 80px);
}
.d-flex.custom-layout {
display: flex;
width: 100%;
}
.col-sidebar {
padding: 40px;
flex: 0 0 20%;
max-width: 20%;
border-right: solid 2px #d7d7d7;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.col-body {
flex: 0 0 55%;
max-width: 55%;
padding: 40px;
background-color: var(--gray-100);
}
.col-resume {
flex: 0 0 25%;
max-width: 25%;
padding: 40px;
background-color: var(--white-100);
border-radius: 0px 40px 40px 0px;
min-height: calc(100vh - 80px);
}
.uppercase{
text-transform: uppercase;
}
.profile{
display: flex;
align-items: center;
gap: 10px;
}
.profile-text{
font-size: 14px;
line-height: 16px;
}
.customer-date{
font-size: 12px;
line-height: 14px;
color: var(--gray-300);
}
.sidebar-navigation{
margin-top: 40px;
}
.sidebar-navigation ul{
padding: 0px!important;
}
.sidebar-navigation ul li{
list-style: none;
padding: 10px 0;
}
.sidebar-navigation ul li a{
display: flex;
align-items: center;
gap: 4px;
text-transform: uppercase;
font-size: 15px;
line-height: 16px;
letter-spacing: 0.8px;
color: var(--gray-300);
}
.nolink{
text-decoration: none;
color: inherit;
}
.li-active{
color: var(--blue-900)!important;
}
.sidebar-bottom{
color: var(--gray-300);
}
.filter-buttons{
display: flex;
margin-top: 60px;
margin-bottom: 60px;
justify-content: space-between;
gap: 15px;
}
.filter-button{
background: var(--blue-600);
color: white;
border: none;
border-radius: 12px;
padding: 16px 30px;
width: 100%;
text-transform: uppercase;
font-size: 14px; 
}
.activity-row{
align-items: center;
padding: 20px 0px;
border-top: solid 2px #d7d7d7;
}
.red-button{
background: red;
color: white;
border: none;
border-radius: 6px;
padding: 10px 30px;
width: 100%;
text-transform: uppercase;
font-size: 14px;
}

.blue-button{
background: var(--blue-600);
color: white;
border: none;
border-radius: 12px;
padding: 10px 30px;
width: 100%;
text-transform: uppercase;
font-size: 14px;
}
.cards-resume-row{
display: flex;
gap: 10px;
margin-top: 40px;
}
.card-resume-col{
width: 50%;
}
.card-resume-body{
min-height: 150px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
position: relative;
}
.card-resume-text{
font-size: 12px
}
.card-resume-number{
font-size: 1.8rem;
}
.c-icon{
position: absolute;
top: 10px;
right: 10px;
}
/*login*/
.form-content{
background-color: var(--gray-100);
border-radius: 40px;
padding: 60px 70px 60px 70px;
}
.form-content-flex{
background-color: var(--gray-100);
/*width: 80%;*/
border-radius: 40px;
padding: 60px 70px 60px 70px;
display: flex;
align-items: center;
gap: 30px;
justify-content: center;
}
.flex-center{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.group-form{
display: flex;
flex-direction: column;
width: 300px;
margin: auto;
}
.form-label{
font-size: 12px;
margin-bottom: .2rem;
}
.form-input{
border: solid 2px var(--blue-600);
border-radius: 10px;
height: 53px;
padding: 0px 10px;
}
.form-button{
background: var(--blue-600);
color: white;
border: none;
border-radius: 12px;
padding: 16px 30px;
width: 100%;
text-transform: uppercase;
font-size: 14px;
margin-top: 30px;
cursor: pointer;
}
.login-hr{
border: solid 1px var(--gray-300);
}
.smaller{
font-size: .775em;
}
.form-social-button {
display: flex;
align-items: center;
padding: 0;
overflow: hidden;
border-radius: 8px;
height: 53px;
}
.facebook-button-color{
background: linear-gradient(to right, #1c45a3 0%, #1c45a3 53px, #ffffff 53px, #ffffff 100%);
border: 2px solid #1c45a3;
color: #1d45a3;
}
.twitter-button-color{
background: linear-gradient(to right, #1a9bce 0%, #1a9bce 53px, #ffffff 53px, #ffffff 100%);
border: 2px solid #1a9bce;
color: #1a9bce;
}
/* Icon section (left) */
.icon-section {
padding: 10px 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px 0px 0px 7px;
height: 53px;
}
/* Text section (right) */
.text-section {
padding: 10px 16px;
white-space: nowrap;
text-transform: uppercase;
font-size: 14px;
width: 100%;
}
.form-social-button:hover {
opacity: 0.95;
}
.nolink{
text-decoration: none;
color: inherit;
}
.error-msg {
color: red;
font-size: 12px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.center{
text-align: center;
}