/* CUENTIVA - Interfaz académica | Personalización independiente del MVC */
:root{--black:#f4f8fa;--black-2:#fff;--black-3:#ecf3f5;--black-4:#e0eaee;--gold:#087f7b;--gold-light:#0aa69a;--gold-dark:#075f60;--white:#173549;--gray:#607681;--gray-light:#526875;--gray-dark:#8ba0a9;--border-gold:1px solid #dbe8ea;--shadow:0 16px 50px rgba(18,57,76,.09);--font-base:'Inter',sans-serif}
html,body{background:#f4f8fa;color:#173549}
body{background:linear-gradient(140deg,#f2faf9 0%,#f5f8fa 55%,#edf4f7 100%)}
.demo-ribbon{position:relative;z-index:3000;background:#12394c;color:#d8fcf5;font-size:10px;line-height:1.5;letter-spacing:.13em;text-align:center;font-weight:700;padding:6px 12px}
.demo-ribbon i{margin-right:6px}
.auth-wrapper{min-height:calc(100vh - 28px);background:radial-gradient(circle at 10% 20%,rgba(85,221,196,.23),transparent 35%),radial-gradient(circle at 95% 90%,rgba(251,190,116,.13),transparent 38%),#f5fafb}
.auth-card{background:white;border:1px solid #e2ecef;border-radius:25px;box-shadow:0 28px 80px rgba(18,57,76,.12);padding:2.8rem 2.4rem;max-width:455px}
.auth-logo .logo-img{width:235px;max-width:90%}.auth-eyebrow{color:#0c8983;font-weight:800;letter-spacing:.17em;font-size:.64rem;text-align:center;margin-bottom:.6rem}
.auth-title{font-size:1.55rem;letter-spacing:-.035em;color:#12394c}.auth-subtitle{line-height:1.65;color:#6a7d87}
.form-input-cuentiva,.op-input,select,textarea{background:#f7fafb!important;color:#173549!important;border:1px solid #d9e7e9!important;border-radius:12px!important}
.form-input-cuentiva::placeholder,.op-input::placeholder{color:#94a6ae!important}.form-input-cuentiva:focus,.op-input:focus{border-color:#16aaa0!important;box-shadow:0 0 0 4px rgba(22,170,160,.12)!important;outline:none}
.btn-cuentiva,.btn-retiro{background:#087f7b!important;color:#fff!important;border-color:#087f7b!important;border-radius:12px!important;box-shadow:0 8px 20px rgba(8,127,123,.16)}
.btn-cuentiva:hover,.btn-retiro:hover{background:#066c68!important;color:#fff!important}
.app-shell{background:#f4f8fa;box-shadow:0 14px 65px rgba(19,61,76,.1)}
.app-header{background:rgba(255,255,255,.95);border-bottom:1px solid #e2ecef}.app-header-inner{padding:1rem 1.2rem}.header-brand{color:#12394c;font-size:1.13rem;letter-spacing:-.04em;font-weight:800}.header-logo-icon{width:34px;height:34px;object-fit:contain}.header-status-badge{background:#f0f7f7;border:1px solid #dbebe8;color:#51717a}
.balance-section{text-align:left;margin:1rem 1rem .7rem;padding:1.6rem;border-radius:22px;background:linear-gradient(122deg,#12394c,#185768 75%,#177e7d);box-shadow:0 14px 30px rgba(18,57,76,.15)}
.greeting{color:#c3eee5;font-size:.81rem;margin-bottom:1.15rem;font-weight:700}.greeting strong{color:white}.greeting-second{display:block;color:#fff;font-size:1.04rem;font-weight:400;margin-top:.45rem}.balance-label{color:#c2dedf;font-size:.75rem}.balance-amount{color:white;font-size:2.4rem;letter-spacing:-.05em;margin-top:.4rem}.balance-currency{color:#c4e6e5;font-size:.85rem;letter-spacing:0}.account-status-badge{border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.12);color:white!important}
.cuentiva-card{background:linear-gradient(135deg,#0d5a5a,#12394c 80%)!important;border:1px solid rgba(105,229,205,.33);box-shadow:0 16px 33px rgba(18,57,76,.2);border-radius:20px}.cuentiva-card::before{background:radial-gradient(circle,rgba(85,221,196,.2),transparent 72%)}.cuentiva-card .card-number,.cuentiva-card .card-meta-value{color:#fff}.cuentiva-card .card-meta-label,.cuentiva-card .card-network{color:#a4e9d9}.cuentiva-card .card-brand-logo{filter:brightness(0) invert(1);opacity:.93}
.option-card,.service-card,.promo-banner,.digital-card-section{background:#fff;border:1px solid #e1ecee;box-shadow:0 5px 15px rgba(18,57,76,.035);border-radius:15px}.option-card:hover,.service-card:hover{background:#f0faf8;border-color:#a4dcd3;transform:translateY(-2px)}.option-icon,.service-icon{color:#08867f}.option-label,.service-label{color:#496571}.section-title{color:#173549;letter-spacing:-.025em}
.bottom-nav{background:rgba(255,255,255,.97);border-top:1px solid #e0e9eb;box-shadow:0 -8px 24px rgba(18,57,76,.05)}.bottom-nav .nav-item{color:#708790}.bottom-nav .nav-item:hover{color:#087f7b;background:#f1faf8}.bottom-nav .nav-item--active,.bottom-nav .nav-item--active i{color:#087f7b!important}.bottom-nav .nav-item--active::after{background:#087f7b}
.modal-cuentiva,.op-modal-body,.auth-card{color:#173549}.modal-title-cuentiva{color:#173549}.modal-body-text{color:#516b76}
.admin-shell{background:#f4f8fa}.admin-sidebar{background:#12394c;border-right:0}.admin-sidebar .sidebar-brand,.admin-sidebar a,.admin-sidebar .nav-link{color:#e4f5f4}.admin-sidebar a:hover{background:rgba(255,255,255,.1)}
.alert-cuentiva{border-radius:12px}.link-gold{font-weight:600;color:#087f7b}.text-muted{color:#647b85!important}
:focus-visible{outline:3px solid #22aca0;outline-offset:3px}
@media(min-width:768px){.app-shell{max-width:560px}.bottom-nav{max-width:560px}.balance-section{margin:1.4rem 1.4rem 1rem;padding:2rem}.app-header-inner{padding:1.2rem 1.6rem}}
@media(max-width:480px){.auth-card{padding:2rem 1.35rem;border-radius:20px}.demo-ribbon{font-size:9px;letter-spacing:.07em}.balance-amount{font-size:2.15rem}}