:root {
    --azul: #0A43D5;
    --azul-oscuro: #0e1e49;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0e1e49;
    min-height: 100vh;
    height: auto;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
}

.login-container {
    width: 100%;
    padding: 0 px 0 0 0;
}

.logo-area {
    text-align: center;
    margin-bottom: -30px;
    position: relative;
    z-index: 1;
}

.logo {
    width: 300px;
    padding-bottom: 100px;
    padding-top: 50px;
}

.logo_cp {
    width: 80%;
    padding-bottom: 50px;
    padding-top: 10px;
}

.login-card {

    background: white;

    width: 100%;

    margin: auto;

    border-radius: 38px;

    padding: 45px 30px 35px 30px;

    height: auto;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .12);

    position: relative;

    z-index: 2;
}

.form-label{

    font-size:20px;

    font-weight:500;

    margin-bottom:12px;
}

.form-control{

    height:65px;

    border-radius:20px;

    border:1px solid #ECECEC;

    font-size:18px;

    padding-left:20px;
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--azul);
}

.password-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 18px;
    top: 18px;
    cursor: pointer;
    color: #888;
    user-select: none;
}

.btn-login{

    width:100%;

    height:65px;

    border:none;

    border-radius:20px;

    margin-top:25px;

    color:white;

    font-size:24px;

    font-weight:700;

    background:linear-gradient(
        90deg,
        #142b69
    );
}
.btn-login:hover {
    opacity: .95;
}

.btn-register {
    display: block;
    width: 100%;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-radius: 20px;
    margin-top: 15px;
    border: 2px solid #142b69;
    color: #142b69;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.btn-register:hover {
    background: #142b69;
    color: #fff;
}

.help {
    text-align: center;
    margin-top: 25px;
    color: #888;
    font-size: 15px;
}

.help a {
    display: block;
    text-decoration: none;
    font-weight: 700;
    color: #0A43D5;
    margin-top: 5px;
}

.alert {
    border-radius: 15px;
}

/* ===================================
   DASHBOARD
=================================== */

.page{
    width: 100%;
}

.topbar{
    padding:25px 12px 10px;
}

.user-name{
    font-size:24px;
    font-weight:700;
    color:#222;
}

.user-route{
    color:#888;
    font-size:15px;
}

.user-name-cp{
    font-size:24px;
    font-weight:700;
    color:#fbfbfb;
    text-align: center;
}

.user-route-cp{
    color:hsl(0, 0%, 100%);
    font-size:15px;
}


.balance-card{

    margin:15px 10px;

    background:linear-gradient(
        135deg,
        #0A43D5,
        #0633A7
    );

    border-radius:25px;

    color:white;

    padding:25px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);
}

.balance-title{
    font-size:15px;
    opacity:.9;
}

.balance-amount{
    font-size:42px;
    font-weight:700;
    margin-top:5px;
}

.balance-footer{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
}

.balance-item{
    flex:1;
}

.balance-label{
    font-size:13px;
    opacity:.85;
}

.balance-value{
    font-size:22px;
    font-weight:600;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
}

.section-title{
    font-size:20px;
    font-weight:700;
}

.section-link{
    color:#0A43D5;
    font-weight:600;
    text-decoration:none;
}

.movement-card{

    background:white;

    margin:10px 12px;

    padding:15px;

    border-radius:18px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.06);
}

.movement-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.movement-title{
    font-weight:600;
    color:#222;
}

.movement-date{
    font-size:13px;
    color:#999;
}

.amount-positive{
    color:#00B050;
    font-weight:700;
}

.amount-negative{
    color:#E53935;
    font-weight:700;
}

.amount-blue{
    color: #0A43D5;
    font-weight:700;
}

.bottom-nav{

    position:fixed;

    bottom:0;

    left:0;
    right:0;

    background:white;

    display:flex;

    justify-content:space-around;

    padding:12px 0;

    box-shadow:
        0 -5px 15px rgba(0,0,0,.08);

    max-width:500px;

    margin:auto;
}

.bottom-nav a{

    text-decoration:none;

    color:#777;

    font-size:13px;

    text-align:center;
}

.bottom-nav .active{
    color:#0A43D5;
    font-weight:700;
}

hr{
    margin:12px 0;
    border-color:#eee;
}
.account-switch{

    display:flex;

    background:#E9EEF8;

    margin:10px 12px 20px;

    border-radius:16px;

    padding:4px;
}

.account-switch a{

    flex:1;

    text-align:center;

    padding:12px;

    text-decoration:none;

    color:#666;

    border-radius:12px;

    font-weight:600;

    transition:.2s;
}

.account-switch a.active{

    background: #0A43D5;

    color: white;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}

.account-switch a.active-promotora{

    background:white;

    color:#D4AF37;

    font-weight:700;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}

.account-switch a.active-promotora{

    background:
        linear-gradient(
            135deg,
            #FFF8E1,
            #FFE082
        );

    color:#9C6B00;

    font-weight:700;

    box-shadow:
        0 2px 8px rgba(212,175,55,.25);
}

.cards-slider{

    display:flex;

    overflow-x:auto;

    gap:12px;

    padding:0 12px;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;
}

.cards-slider::-webkit-scrollbar{
    display:none;
}

.cards-slider .balance-card{

    min-width:calc(100% - 5px);

    margin:0;

    scroll-snap-align:start;
}

.promotora-card{

    background:linear-gradient(
        135deg,
        #D4AF37,
        #B8860B
    );
}