/* === GCI GROUP - Paleta de colores basada en el nuevo logo (2024) === */
:root {
  --gci-blue-dark:    #143644;    /* azul oscuro profundo */
  --gci-blue:         #2076a5;    /* azul principal */
  --gci-blue-accent:  #23a7df;    /* azul vibrante / cian */
  --gci-blue-light:   #48d2ff;    /* azul claro */
  --gci-black:        #24292e;    /* negro suave */
  --gci-gray-dark:    #4a4a4a;    /* gris oscuro */
  --gci-gray:         #d6dde3;    /* gris sutil (bordes, backgrounds) */
  --gci-bg:           #f5f7fa;    /* fondo web elegante */
  --gci-white:        #ffffff;
}

/* === Fondo general y texto === */
body {
  background: var(--gci-bg);
  color: var(--gci-black);
}

/* === Navbar / Header === */
.navbar, .topbar {
  background: var(--gci-blue-dark) !important;
  color: var(--gci-white) !important;
  border-bottom: 2px solid var(--gci-blue-accent);
}

/* === Navbar links === */
.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--gci-white) !important;
  font-weight: 500;
}
.navbar .nav-link.active,
.navbar .nav-link:focus {
  color: var(--gci-blue-light) !important;
}

/* === Botones === */
.btn-primary {
  background: linear-gradient(90deg, var(--gci-blue), var(--gci-blue-accent));
  border: none;
  color: var(--gci-white);
  font-weight: 600;
  border-radius: 14px;
  padding: 12px 14px;
  transition: 0.2s;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--gci-blue-dark);
  color: var(--gci-blue-light);
}


.btn-outline-dark {
  border: 2px solid var(--gci-blue-dark);
  color: var(--gci-blue-dark);
  background: var(--gci-white);
  font-weight: 500;
  border-radius: 14px;
  padding: 12px 14px;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
  background: var(--gci-blue-dark);
  color: var(--gci-white);
}

/* Bot��n outline light (b��sico) */
.btn-outline-light{
  border-color: var(--gci-gray-dark) !important;
  color: var(--gci-blue-dark) !important;
}
.btn-outline-light:hover{
  background: var(--gci-blue-accent) !important;
  color: var(--gci-white) !important;
}

/* === Card principal === */
.card-app {
  background: var(--gci-white);
  border: 1px solid var(--gci-gray);
  border-radius: 1rem;
  box-shadow: 0 4px 14px 0 rgba(20,54,68,0.06);
}

/* === Titulares === */
h1, h2, h3, h4, h5, .fw-semibold {
  color: var(--gci-blue-dark);
  font-weight: bold;
}

/* === Enlaces principales === */
a {
  color: var(--gci-blue);
}
a:hover {
  color: var(--gci-blue-accent);
}

/* === Badge personalizado para status/aprobaci��n === */
.badge-app {
  background: var(--gci-blue-accent);
  color: var(--gci-white);
  border-radius: 6px;
  padding: 5px 12px;
  font-weight: 500;
  letter-spacing: .5px;
}

::-webkit-scrollbar-thumb {
  background: var(--gci-blue-dark);
}

/* === Formulario y campos === */
.form-control, .form-select{
  background: #f7faff !important;
  border: 1px solid var(--gci-blue-accent) !important;
  color: var(--gci-black) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.form-control:focus, .form-select:focus{
  border-color: var(--gci-blue) !important;
  box-shadow: 0 0 0 .20rem rgba(35,167,223,.11) !important;
}

/* === Logo === */
.logo{
  width: 80px;
  height: 70px;
  border-radius: 18px;
  object-fit: contain;
  background: #eaf6fb;
  border: 1px solid var(--gci-blue-light);
}
body.bg-app {
  background: linear-gradient(120deg, #f5f8fa 0%, #eaf6fb 100%);
  min-height: 100vh;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  object-fit: contain;
  background: #f5fafe;
  border: 2px solid var(--gci-blue-light);
  box-shadow: 0 4px 18px 0 rgba(20,54,68,0.07);
}

.card-app {
  border: 1.5px solid var(--gci-blue);
  box-shadow: 0 6px 24px 0 rgba(20,54,68,0.09);
  border-radius: 22px;
}

/* Inputs grandes y claros */
.input-lg, .form-control, .form-select {
  font-size: 1.05rem;
  border-radius: 12px !important;
  border-color: var(--gci-blue-accent)!important;
  background: #f9fbfd!important;
  color: var(--gci-black)!important;
  padding: 14px 16px!important;
  box-shadow: none !important;
  transition: box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gci-blue)!important;
  box-shadow: 0 0 0 0.2rem rgba(35,167,223,.10)!important;
}

.btn-primary.btn-lg {
  font-size: 1.07rem;
  padding: 0.82rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--gci-blue), var(--gci-blue-accent));
  border: none;
}
.btn-primary.btn-lg:hover, .btn-primary.btn-lg:focus {
  background: var(--gci-blue-dark);
  color: var(--gci-white);
}
.login-3d-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #f5f8fa 0%, #eaf6fb 100%);
}

.login-3d-card {
  max-width: 370px;
  width: 100%;
  background: #ffffffcc;
  border-radius: 1.7rem;
  padding: 2.3rem 2.1rem 1.3rem 2.1rem;
  box-shadow:
    0 8px 32px 0 rgba(28,52,85,0.23),
    0 1.5px 7px 0 rgba(50,85,150,0.09),
    0 32px 64px 0 rgba(60,180,238,0.08);
  position: relative;
  border: 1px solid #e7edf2;
  animation: login3d-in 0.7s cubic-bezier(.7,.1,.25,1) both;
}

@keyframes login3d-in {
  from { transform: translateY(16px) scale(.96) rotateX(11deg); opacity: 0.2; }
  to   { transform: none; opacity: 1; }
}

/* Extra visual fürs login */
.logo {
  width: 100px;
  height: 88px;
  border-radius: 18px;
  object-fit: contain;
  background: #f5fafe;
  border: 2px solid var(--gci-blue-light);
  box-shadow: 0 4px 18px 0 rgba(20,54,68,0.09);
}

.input-lg, .form-control, .form-select {
  font-size: 1.07rem;
  border-radius: 11px !important;
  border-color: var(--gci-blue-accent)!important;
  background: #f4fafe!important;
  color: var(--gci-black)!important;
  padding: 14px 16px!important;
  box-shadow: none !important;
  transition: box-shadow .22s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gci-blue)!important;
  box-shadow: 0 0 0 0.20rem rgba(35,167,223,.18)!important;
}

.btn-primary.btn-lg {
  font-size: 1.1rem;
  padding: 0.81rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--gci-blue), var(--gci-blue-accent));
  border: none;
  box-shadow: 0 3px 16px 0 rgba(35,167,223,.11);
}
.btn-primary.btn-lg:hover, .btn-primary.btn-lg:focus {
  background: var(--gci-blue-dark);
  color: var(--gci-white);
}

a, .text-secondary { color: var(--gci-blue-dark) !important; }
.gci-navbar {
  background: var(--gci-blue-dark,#143644);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  box-shadow: 0 4px 24px 0 rgba(20,54,68,0.06);
  border-bottom: 3px solid var(--gci-blue-accent,#23a7df);
}
.gci-navbar-content { max-width: 1240px; }
.gci-navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 1px;
}
.gci-navbar-logo {
  width: 108px;
  height: 75px;
  border-radius: 16px;
  background: #f6fafd;
  border: 2px solid var(--gci-blue-accent,#48d2ff);
  box-shadow: 0 2px 8px rgba(25,50,100,0.10);
  object-fit: contain;
  margin-right: 8px;
}
.gci-navbar-title {
  color: #fff;
  font-size: 1.32em;
  letter-spacing: 1px;
  font-weight: 600;
  text-shadow: 0 3px 18px rgba(35,167,223,0.20);
}
.gci-navbar-menu .nav-link {
  font-size: 1.08em;
  color: #e7f4fc !important;
  margin-right: 6px;
}
.gci-navbar-menu .nav-link.active,
.gci-navbar-menu .nav-link:focus,
.gci-navbar-menu .nav-link:hover {
  color: var(--gci-blue-accent,#23a7df) !important;
  background: rgba(25,90,180,.03);
  border-radius: 8px;
}
.gci-navbar-menu .dropdown-menu {
  border-radius: 10px;
  border: 1.5px solid var(--gci-blue);
  background: #fff;
  box-shadow: 0 8px 32px 0 rgba(28,52,85,0.08);
}
.gci-user {
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}
.btn-danger.btn-sm {
  font-size: 1em;
  background: linear-gradient(90deg, #e44242 65%, #f16363 90%);
  border:none;
  border-radius: 9px;
  padding: 6px 16px;
  box-shadow:0 2px 8px 0 rgba(80,32,32,0.08);
}
.btn-danger.btn-sm:hover { background: #b71818; color:#fff; }