:root {
   --brand-50: #e6f2ff;
   --brand-100: #cfe8ff;
   --brand-200: #a8d0ff;
   --brand-300: #79b7ff;
   --brand-400: #4d9eff;
   --brand-500: #1f86ff;
   /* primario */
   --brand-600: #146fe0;
   --brand-700: #115ab8;
   --brand-800: #0f4490;
   --brand-900: #0c336e;
   --accent: #22d3ee;
   /* celeste tenue para detalles */
   --text-on-brand: #ffffff;
   --card-radius: 16px;
   --shadow-soft: 0 10px 30px rgba(17, 90, 184, 0.15);
   --safe-top: env(safe-area-inset-top);
   --safe-bottom: env(safe-area-inset-bottom);
   --vh: 1vh;
   /* se recalcula por JS para iOS */
 }

 /* === Fondo base en azules === */
 body.login-page {
   background: radial-gradient(1200px 40% at 80% -10%, rgba(79, 158, 255, 0.25), transparent 60%),
     radial-gradient(900px 35% at -10% 10%, rgba(34, 211, 238, 0.18), transparent 60%),
     linear-gradient(180deg, #0b1220 0%, #0b1220 20%, #0e1a35 100%);
   min-height: calc(var(--vh) * 100);
   padding-top: var(--safe-top);
   padding-bottom: calc(var(--safe-bottom) + 8px);
   -webkit-text-size-adjust: 100%;
   /* evita zoom raro iOS */
   overflow: hidden;
   /* para el canvas */
 }

 /* === Canvas de burbujas === */
 #bg-bubbles {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   /* detrás de todo */
   pointer-events: none;
   /* que no bloquee clicks */
 }

 /* Contenedor del login por encima del canvas */
 .login-box {
   width: 420px;
   max-width: 94vw;
   position: relative;
   z-index: 1;
 }

 .card.card-outline.card-primary {
   border-top: 3px solid var(--brand-500);
   border-radius: var(--card-radius);
   box-shadow: var(--shadow-soft);
   overflow: hidden;
   backdrop-filter: saturate(120%) blur(2px);
 }

 .card-header {
   background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
   color: var(--text-on-brand) !important;
   border-bottom: none;
 }

 .card-header .brand {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   color: var(--text-on-brand) !important;
   text-decoration: none;
 }

 .brand__logo {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   object-fit: contain;
   background: #fff;
   padding: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
 }

 .brand__title {
   font-weight: 700;
   letter-spacing: .3px;
 }

 .login-box-msg {
   color: #153a85;
 }

 /* Icon box a la izquierda + Select2 alineado */
 .input-group>.input-group-prepend>.input-group-text,
 .input-group>.input-group-append>.input-group-text {
   background: var(--brand-50);
   border: 1px solid #ced4da;
   border-right: 0;
   color: var(--brand-700);
   height: calc(2.25rem + 2px);
   display: flex;
   align-items: center;
 }

 .form-control:focus {
   border-color: var(--brand-400) !important;
   box-shadow: 0 0 0 .2rem rgba(31, 134, 255, .15) !important;
 }

 /* Select2 integrado al input-group */
 .input-group .select2-container--default {
   flex: 1 1 auto;
   width: 1% !important;
 }

 .select2-container .select2-selection--single {
   height: calc(2.25rem + 2px) !important;
   display: flex;
   align-items: center;
   border: 1px solid #ced4da;
   border-left: 0 !important;
   border-radius: 0 .25rem .25rem 0 !important;
 }

 .select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 2.25rem;
   padding-left: .5rem;
   color: #334155;
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 2.25rem;
   right: .35rem;
 }

 .select2-results__option--highlighted[aria-selected] {
   background-color: var(--brand-500);
 }

 .btn-primary {
   background: var(--brand-600);
   border-color: var(--brand-600);
   border-radius: 10px;
   transition: transform .08s ease, box-shadow .2s ease;
 }

 .btn-primary:hover {
   background: var(--brand-500);
   border-color: var(--brand-500);
   box-shadow: 0 10px 20px rgba(31, 134, 255, .25);
   transform: translateY(-1px);
 }

 #alert-login {
   margin: 0;
   font-size: .85rem;
   color: #153a85;
 }

 .login-utils a {
   color: var(--brand-200);
 }

 .login-utils a:hover {
   color: var(--accent);
 }

 @media (max-width: 576px) {
   .login-box {
     width: 96vw;
   }

   .brand__title {
     font-size: 1.05rem;
   }

   .btn-primary {
     padding: .8rem 1rem;
     font-size: 1rem;
   }

   .input-group>.input-group-prepend>.input-group-text {
     height: 48px;
   }

   .select2-container .select2-selection--single,
   .form-control {
     height: 48px !important;
     font-size: 16px;
   }

   /* 16px evita zoom en iOS */
 }

 .brand__title {
   font-size: 1.1rem;
 }