:root{
  --gi-red:#E10600;
  --gi-red-soft: rgba(225,6,0,.08);
  --gi-black:#111111;
  --gi-white:#FFFFFF;
  --gi-border:#e9e9e9;
  --gi-muted:#6c757d;
}

/* Fondo general */
.bg-app{
  background: radial-gradient(1000px 500px at 10% 0%, rgba(225,6,0,.06), transparent 60%), #ffffff;
}

/* Navbar */
.nav-app{
  background: #ffffff;
  border-bottom: 1px solid var(--gi-border);
}

/* Cards */
.card-app{
  background: #ffffff;
  border: 1px solid var(--gi-border);
  color: #111;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.card-app .text-muted{
  color: var(--gi-muted) !important;
}

/* Badge rol */
.badge-role{
  background: var(--gi-red-soft);
  color: var(--gi-red);
  border: 1px solid rgba(225,6,0,.25);
}

/* Botón principal */
.btn-gi{
  background: var(--gi-red);
  border-color: var(--gi-red);
  color: white;
}

.btn-gi:hover{
  background: #c00500;
  border-color: #c00500;
}

/* Inputs */
.form-control,
.form-select{
  background: #ffffff;
  color: #111;
  border: 1px solid var(--gi-border);
}

.form-control:focus,
.form-select:focus{
  border-color: var(--gi-red);
  box-shadow: 0 0 0 .2rem rgba(225,6,0,.15);
}

/* Tablas */
.table{
  color:#111;
}

.table thead th{
  color: #333;
  border-bottom: 2px solid var(--gi-border);
}

.table td{
  border-top: 1px solid var(--gi-border);
}

/* Links */
.link-gi{
  color: var(--gi-red);
  font-weight: 500;
}

.link-gi:hover{
  color: #c00500;
  text-decoration: underline;
}

/* Texto pequeño */
.small-muted{
  color: var(--gi-muted);
}

/* Alerts */
.alert{
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--gi-border);
}